Fix center slot for TrangaPage

Make it easier to flash chapter or download on MangaDetailPage
Add "No timelimit" button to actions page
Actionspage fix Chapter link

website/app/assets/css/main.css

@@ -48,3 +48,13 @@
         transform: translate(1px, -2px) rotate(-1deg);
     }
 }
+
+@keyframes flash {
+    0%,
+    100% {
+        background-color: initial;
+    }
+    50% {
+        background-color: var(--color-secondary);
+    }
+}

website/app/components/ChaptersList.vue

@@ -1,6 +1,6 @@
 <template>
     <UPageList class="gap-2 h-full overflow-y-scroll">
-        <UPageCard v-for="chapter in chapters" :key="chapter.key" orientation="horizontal" :ui="{ container: 'p-2 sm:p-2' }">
+        <UPageCard v-for="chapter in chapters" :id="chapter.key" :key="chapter.key" orientation="horizontal" :ui="{ container: 'p-2 sm:p-2' }" :class="[$route.hash.substring(1) == chapter.key ? 'animate-[flash_0.75s_ease_0.5s]' : '']">
             <template #title>
                 <p class="text-primary">{{ chapter.title }}</p>
                 <p class="text-secondary">

website/app/components/TrangaPage.vue

@@ -18,14 +18,14 @@
                             <p v-if="title" class="text-2xl text-primary font-semibold">{{ title }}</p>
                         </slot>
                     </div>
-                    <div class="flex flew-row gap-2">
-                        <slot name="center" />
-                    </div>
                     <div class="flex flew-row gap-2">
                         <slot name="actions" />
                     </div>
                 </div>
                 <div :class="[$slots.left ? (rimless ? '' : 'min-md:mr-4 max-md:mx-2') : rimless ? '' : 'mx-4', 'h-full']">
+                    <div v-if="$slots.center" class="flex flew-row gap-2 w-full justify-center">
+                        <slot name="center" />
+                    </div>
                     <slot />
                 </div>
             </div>

website/app/pages/actions.vue

@@ -1,10 +1,11 @@
 <template>
     <TrangaPage rimless>
         <template #center>
+            <UButton color="primary" icon="i-lucide-rotate-ccw" @click="resetFilter" />
             <USelect v-model="params.action" :items="ActionTypes" class="w-50" @change="refreshData" />
             <UInput v-model="params.start" trailing-icon="i-lucide-chevron-first" type="datetime-local" @change="refreshData" />
+            <UButton color="primary" icon="i-lucide-infinity" @click="noTimeLimit" />
             <UInput v-model="params.end" icon="i-lucide-chevron-last" type="datetime-local" @change="refreshData" />
-            <UButton color="primary" icon="i-lucide-rotate-ccw" @click="resetFilter" />
         </template>
         <template #actions>
             <UTooltip text="Reload" :kbds="['meta', 'R']">
@@ -30,7 +31,7 @@
             <template #chapter-cell="{ row }">
                 <UButton
                     v-if="row.original.chapterId"
-                    :to="`/manga/${row.original.chapterId}?return=${$route.fullPath}`"
+                    :to="`/manga/${row.original.mangaId}?return=${$route.fullPath}#${row.original.chapterId}`"
                     variant="ghost"
                     color="secondary"
                     >Chapter</UButton
@@ -80,6 +81,15 @@ const resetFilter = async () => {
     await refreshData();
 };
 
+const noTimeLimit = async () => {
+    params.value = {
+        ...params.value,
+        start: new Date(0).toISOString().slice(0, 16),
+        end: new Date(Date.now() - timezoneOffsetMillis).toISOString().slice(0, 16),
+    };
+    await refreshData();
+};
+
 const refreshData = async (): Promise<void> => {
     if (!params.value.start || !params.value.end) return Promise.reject();
     data.value = await $api('/v2/Actions/Filter', {

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

@@ -88,7 +88,7 @@ const { $api } = useNuxtApp();
 const route = useRoute();
 const mangaId = route.params.mangaId as string;
 
-const flashDownloading = route.query.download;
+const flashDownloading = route.hash.substring(1) == "download";
 
 const { data: manga } = await useApi('/v2/Manga/{MangaId}', {
     path: { MangaId: mangaId },
@@ -139,16 +139,4 @@ const refreshData = async () => {
 defineShortcuts({ meta_r: { usingInput: true, handler: refreshData } });
 
 useHead({ title: 'Manga' });
-</script>
+</script>
-
-<style>
-@keyframes flash {
-    0%,
-    100% {
-        background-color: initial;
-    }
-    50% {
-        background-color: var(--color-secondary);
-    }
-}
-</style>

website/app/pages/search.vue

@@ -39,7 +39,7 @@
                         :key="m.key"
                         :manga="m"
                         :expanded="i === expanded"
-                        @click="navigateTo(`/manga/${m.key}?download=true&return=${$route.fullPath}`)" />
+                        @click="navigateTo(`/manga/${m.key}?return=${$route.fullPath}#download`)" />
                 </div>
             </template>
         </UPageSection>