Basic actions page

Rimless TrangaPage
Scroll behavior

website/app/pages/actions.vue

@@ -1,5 +1,71 @@
 <template>
-    <TrangaPage />
+    <TrangaPage rimless>
+        <template #actions>
+            <UTooltip text="Reload" :kbds="['meta', 'R']">
+                <UButton variant="soft" color="secondary" icon="i-lucide-refresh-ccw" loading-auto @click="refreshData" />
+            </UTooltip>
+        </template>
+        <UTable :data="data" :columns="columns" :sticky="'header'">
+            <template #action-cell="{ row }">
+                {{ row.original.action.split(/(?=[A-Z])/).join(' ') }}
+            </template>
+            <template #timestamp-cell="{ row }">
+                {{ new Date(row.original.performedAt).toLocaleString() }}
+            </template>
+            <template #manga-cell="{ row }">
+                <UButton v-if="row.original.mangaId" :to="`/manga/${row.original.mangaId}?return=${$route.fullPath}`">Manga</UButton>
+            </template>
+            <template #chapter-cell="{ row }">
+                <UButton v-if="row.original.chapterId" :to="`/manga/${row.original.chapterId}?return=${$route.fullPath}`">Chapter</UButton>
+            </template>
+            <template #additional-cell="{ row }">
+                <p v-if="row.original.from">From: {{ row.original.from }}</p>
+                <p v-if="row.original.to">To: {{ row.original.to }}</p>
+                <p v-if="row.original.filename">Filename: {{ row.original.filename }}</p>
+                <p v-if="row.original.metadataFetcher">Metadata Fetcher: {{ row.original.metadataFetcher }}</p>
+            </template>
+        </UTable>
+    </TrangaPage>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import type { components } from '#open-fetch-schemas/api';
+import type { TableColumn } from '#ui/components/Table.vue';
+type Filter = components['schemas']['Filter'];
+type ActionRecord = components['schemas']['ActionRecord'];
+
+const params = ref<Partial<Filter>>(useRoute().query);
+const { data, refresh } = useApi('/v2/Actions/Filter', { method: 'POST', body: params.value, immediate: false });
+
+const columns: TableColumn<ActionRecord>[] = [
+    {
+        id: 'action',
+        accessorKey: 'action',
+        header: 'Action'
+    },
+    {
+        id: 'timestamp',
+        accessorKey: 'performedAt',
+        header: 'Timestamp'
+    },
+    {
+        id: 'manga',
+        accessorKey: 'mangaId',
+        header: 'Manga'
+    },
+    {
+        id: 'chapter',
+        accessorKey: 'chapterId',
+        header: 'Chapter'
+    },
+    {
+        id: 'additional',
+        header: 'Additional'
+    },
+];
+
+const refreshData = async (): Promise<void> => {
+    await refresh();
+};
+defineShortcuts({ meta_r: { usingInput: true, handler: refreshData } });
+</script>

website/app/pages/manga/[mangaId]/index.vue

@@ -1,7 +1,7 @@
 <template>
     <MangaDetailPage :manga="manga">
-        <div class="grid gap-3 max-xl:grid-flow-row-dense min-2xl:grid-cols-[70%_auto] min-xl:grid-cols-[60%_auto]">
-            <ChaptersList :manga-id="mangaId" />
+        <div class="grid gap-3 max-xl:grid-flow-row-dense min-2xl:grid-cols-[70%_auto] min-xl:grid-cols-[60%_auto] relative min-xl:h-full">
+            <ChaptersList :manga-id="mangaId" class="min-xl:h-full min-xl:overflow-y-scroll p-[1px]" />
             <div class="flex flex-col gap-2">
                 <UCard :class="[flashDownloading ? 'animate-[flash_0.75s_ease_0.5s]' : '']">
                     <template #header>