<template>
    <main class="directory layout-block">
        <category-row
            v-for="(category, i) in categories"
            :index="i"
            :category="category"
            :key="category"
        />

        <h2 class="label">Summarium</h2>

        <div class="notes">
            <note-row v-for="note in notes" :note="note" :key="note.id" />
        </div>
    </main>
</template>

<script setup>
import useNotes from '@/composables/useNotes'
import { onMounted, ref, watch } from 'vue'
import CategoryRow from '@/components/CategoryRow.vue'
import NoteRow from '@/components/NoteRow.vue'

const { categories, loadCategories, loadCategoryNotes, notesChangeCount } =
    useNotes()

const notes = ref()

async function refreshNotes() {
    await loadCategories()
    notes.value = await loadCategoryNotes()
}

onMounted(async () => {
    await refreshNotes()
})

watch(notesChangeCount, async () => {
    await refreshNotes()
})
</script>

<style lang="scss">
main.directory {
    padding-top: size-vw(18px);

    .label {
        text-transform: uppercase;
        margin: size-vw(17px) 0 size-vw(24px);
        @include p;
    }
    .notes {
        display: flex;
        flex-direction: column;
        gap: size-vw(14px);
    }
}
</style>
