<template>
    <MkStickyContainer>
        <template #header><MkPageHeader /></template>
        <MkSpacer :content-max="800">
            <MkPagination ref="pagingComponent" :pagination="pagination">
                <template #empty>
                    <div class="_fullinfo">
                        <img
                            src="/static-assets/badges/info.png"
                            class="_ghost"
                            alt="Info"
                        />
                        <div>{{ i18n.ts.noNotes }}</div>
                    </div>
                </template>

                <template #default="{ items }">
                    <XList
                        v-slot="{
                            item,
                        }: {
                            item: Misskey.entities.NoteFavorite;
                        }"
                        :items="items"
                        :direction="'down'"
                        :no-gap="false"
                    >
                        <XNoteResolvingProxy
                            :key="item.id"
                            :note="item.noteId"
                            :class="$style.note"
                        />
                    </XList>
                </template>
            </MkPagination>
        </MkSpacer>
    </MkStickyContainer>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import MkPagination from "@/components/MkPagination.vue";
import XNoteResolvingProxy from "@/components/MagNoteResolvingProxy.vue";
import XList from "@/components/MagDateSeparatedList.vue";
import { i18n } from "@/i18n";
import { definePageMetadata } from "@/scripts/page-metadata";
import type * as Misskey from "calckey-js";

const pagination = {
    endpoint: "i/favorites" as const,
    limit: 10,
};

const pagingComponent = ref<InstanceType<typeof MkPagination>>();

definePageMetadata({
    title: i18n.ts.favorites,
    icon: "ph-bookmark-simple ph-bold ph-lg",
});
</script>

<style lang="scss" module>
.note {
    background: var(--panel);
    border-radius: var(--radius);
}
</style>
