From b257c3091e51196c15a788260540a72b6c13bd5e Mon Sep 17 00:00:00 2001
From: faralha <faralhaonly@gmail.com>
Date: Sat, 12 Jul 2025 23:56:31 +0700
Subject: [PATCH 01/14] fix: turned off img optim

---
 nuxt.config.ts  | 7 +------
 pages/index.vue | 2 +-
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index 450dd41..739d4cc 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -21,12 +21,7 @@ export default defineNuxtConfig({
     alias: {
       cdn2: 'https://cdn2.alterkaiscans.my.id',
     },
-    quality: 100,
-    providers: {
-      ipx: {
-        enabled: false,
-      }
-    }
+    provider: 'none'
   },
   fonts: {
     families: [
diff --git a/pages/index.vue b/pages/index.vue
index a8e9980..c75c90f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -12,7 +12,7 @@
     <div class="flex flex-col w-auto max-lg:w-full">
       <h2 class="font-semibold text-2xl mb-5">Latest Projects</h2>
       <div v-if="pending">
-        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-x-[5px] gap-y-6">
+        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-x-[5px] gap-y-6">
           <div v-for="i in 10" :key="i" class="flex flex-col gap-2">
             <USkeleton class="h-[250px] w-full" />
             <USkeleton class="h-4 w-3/4" />

From 9f40824d17ee5a68a6324408ca55422a360e666f Mon Sep 17 00:00:00 2001
From: faralha <faralhaonly@gmail.com>
Date: Sun, 13 Jul 2025 17:15:32 +0700
Subject: [PATCH 02/14] feat: form size

---
 components/Mangacard/home.vue  |  6 ++-
 pages/admin/editManga/[id].vue |  2 +-
 pages/login.vue                |  8 ++--
 pages/manga/[id]/index.vue     |  8 ++--
 pages/register.vue             | 14 +++---
 pages/user/[id].vue            | 87 +++++++++++++++++-----------------
 6 files changed, 65 insertions(+), 60 deletions(-)

diff --git a/components/Mangacard/home.vue b/components/Mangacard/home.vue
index 4acb4a1..35b0087 100644
--- a/components/Mangacard/home.vue
+++ b/components/Mangacard/home.vue
@@ -4,7 +4,7 @@
     <!-- Manga Cover Wrapper -->
     <div class="relative w-full aspect-[2/3] overflow-hidden">
       <!-- Update Badge -->
-      <div class="absolute top-0 left-0 bg-red-500 text-white text-xs px-2 py-1 z-10 rounded-br-md font-bold uppercase">
+      <div v-if="isUp" class="absolute top-0 left-0 bg-red-500 text-white text-xs px-2 py-1 z-10 rounded-br-md font-bold uppercase">
         UP
       </div>
 
@@ -49,6 +49,10 @@ defineProps({
       chapter_date_added: new Date(),
       views: 0,
     })
+  },
+  isUp: {
+    type: Boolean,
+    default: true
   }
 })
 </script>
diff --git a/pages/admin/editManga/[id].vue b/pages/admin/editManga/[id].vue
index f768f8a..528e24e 100644
--- a/pages/admin/editManga/[id].vue
+++ b/pages/admin/editManga/[id].vue
@@ -54,7 +54,7 @@
         </div>
 
         <div class="flex">
-          <UButton loading-auto type="submit" class="mt-4 flex">Add Manga</UButton>
+          <UButton loading-auto type="submit" class="mt-4 flex">Commit Changes</UButton>
         </div>
       </UForm>
     </div>
diff --git a/pages/login.vue b/pages/login.vue
index 612e9aa..b459a55 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -5,11 +5,11 @@
       <h1 class="font-bold text-2xl mb-2">Login</h1>
 
       <UFormField label="Email" name="email">
-        <UInput class="w-full" v-model="state.email" type="email" />
+        <UInput size="xl" class="w-full" v-model="state.email" type="email" />
       </UFormField>
 
       <UFormField label="Password" name="password">
-        <UInput class="w-full" v-model="state.password" :type="show ? 'text' : 'password'">
+        <UInput size="xl" class="w-full" v-model="state.password" :type="show ? 'text' : 'password'">
           <template #trailing>
             <UButton color="neutral" variant="link" size="sm" :icon="show ? 'i-lucide-eye-off' : 'i-lucide-eye'"
               :aria-label="show ? 'Hide password' : 'Show password'" :aria-pressed="show" aria-controls="password"
@@ -19,8 +19,8 @@
       </UFormField>
 
 
-      <UButton v-if="isLoading" class="mt-4 justify-center" loading>Loading</UButton>
-      <UButton v-else type="submit" class="mt-4 justify-center">Login</UButton>
+      <UButton size="xl" v-if="isLoading" class="mt-4 justify-center" loading>Loading</UButton>
+      <UButton size="xl" v-else type="submit" class="mt-4 justify-center">Login</UButton>
 
       <ULink to="/register" class="text-center text-sm" size="xl">
         Register
diff --git a/pages/manga/[id]/index.vue b/pages/manga/[id]/index.vue
index b0646af..6bdd21f 100644
--- a/pages/manga/[id]/index.vue
+++ b/pages/manga/[id]/index.vue
@@ -22,11 +22,11 @@
     <div v-else-if="error">
       <p>Could not load manga details. Please try again later.</p>
     </div>
-    <div v-else-if="mangaDetails" class="flex flex-col min-md:flex-row gap-5">
+    <div v-else-if="mangaDetails" class="flex w-full flex-col min-md:flex-row gap-5">
       <!-- Cover -->
       <NuxtImg :src="mangaDetails.cover" class="min-md:h-[20rem]" style="width: auto" />
       <!-- Content -->
-      <div class="flex flex-col gap-2">
+      <div class="flex w-full flex-col gap-2">
         <h1 class="font-bold text-3xl">{{ mangaDetails.title }}</h1>
         <h2 class="text-lg">{{ mangaDetails.original_title }}</h2>
 
@@ -79,8 +79,8 @@
         </div>
 
         <!-- GENRES -->
-        <div class="flex flex-row gap-2 mt-4">
-          <span v-for="genre in mangaDetails.genre" class="font-semibold text-sm">
+        <div class="h-auto gap-y-2 flex flex-row flex-wrap mt-4">
+          <span v-for="genre in mangaDetails.genre" class="p-1 h-auto font-semibold text-sm">
             <span v-if="genre == 'yuri' || genre == 'smut'" class="bg-primary p-1 px-1.5 rounded-sm text-white">{{
               capitalizeEachWord(genre) }}</span>
             <span v-else class="p-1 px-1.5 outline outline-current rounded-sm">{{ capitalizeEachWord(genre)
diff --git a/pages/register.vue b/pages/register.vue
index a9d89a7..59d725d 100644
--- a/pages/register.vue
+++ b/pages/register.vue
@@ -6,19 +6,19 @@
       <h1 class="font-bold text-2xl mb-2">Register</h1>
 
       <UFormField label="Email" name="email">
-        <UInput class="w-full" v-model="state.email" />
+        <UInput size="xl" class="w-full" v-model="state.email" />
       </UFormField>
 
       <UFormField label="Name" name="name">
-        <UInput class="w-full" v-model="state.name" />
+        <UInput size="xl" class="w-full" v-model="state.name" />
       </UFormField>
 
       <UFormField label="Username" name="username">
-        <UInput class="w-full" v-model="state.username" />
+        <UInput size="xl" class="w-full" v-model="state.username" />
       </UFormField>
 
       <UFormField label="Password" name="password">
-        <UInput class="w-full" v-model="state.password" :type="show ? 'text' : 'password'">
+        <UInput size="xl" class="w-full" v-model="state.password" :type="show ? 'text' : 'password'">
           <template #trailing>
             <UButton color="neutral" variant="link" size="sm" :icon="show ? 'i-lucide-eye-off' : 'i-lucide-eye'"
               :aria-label="show ? 'Hide password' : 'Show password'" :aria-pressed="show" aria-controls="password"
@@ -28,11 +28,11 @@
       </UFormField>
 
       <UFormField label="Confirm Password" name="confirmPassword">
-        <UInput class="w-full" v-model="state.confirmPassword" type="password" />
+        <UInput size="xl" class="w-full" v-model="state.confirmPassword" type="password" />
       </UFormField>
 
-      <UButton v-if="isLoading" class="mt-4 justify-center" loading>Loading</UButton>
-      <UButton v-else type="submit" class="mt-4 justify-center" size="lg">Register</UButton>
+      <UButton size="xl" v-if="isLoading" class="mt-4 justify-center" loading>Loading</UButton>
+      <UButton size="xl" v-else type="submit" class="mt-4 justify-center">Register</UButton>
 
       <ULink to="/login" class="text-center text-sm">
         Login
diff --git a/pages/user/[id].vue b/pages/user/[id].vue
index 2849d08..b534ef0 100644
--- a/pages/user/[id].vue
+++ b/pages/user/[id].vue
@@ -6,7 +6,7 @@
         <div class="flex flex-col gap-2">
           <USkeleton class="h-[30px] w-[200px]" />
           <USkeleton class="h-[20px] w-[150px]" />
-          <USkeleton class="h-[20px] w-[200px]"/>
+          <USkeleton class="h-[20px] w-[200px]" />
           <div class="flex flex-wrap gap-2">
             <USkeleton width="80px" height="20px" v-for="i in 3" :key="i" />
           </div>
@@ -37,10 +37,11 @@
       <!-- BOOKMARKS -->
       <div>
         <h1 class="font-bold text-xl">Bookmarks</h1>
-        <div v-if="userID">
-          <div v-for="bookmark in userBookmarks">
-            <!-- TODO: implement manga card -->
-            <MangacardBookmark :data="bookmark" />
+        <!-- PERBAIKAN: Gunakan grid untuk layout yang lebih baik -->
+        <div v-if="userID" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 mt-4">
+          <!-- PERBAIKAN: Loop melalui data yang sudah dipetakan -->
+          <div v-for="bookmark in userBookmarks" :key="bookmark.id">
+            <MangaCardHome :data="bookmark" isUp="false" />
           </div>
         </div>
 
@@ -56,7 +57,7 @@
 <script setup lang="ts">
 
 const toast = useToast();
-const isLoading = ref(false);
+const isLoading = ref(true); // Mulai dengan true karena kita akan fetch di onMounted
 
 interface Roles {
   id: number,
@@ -79,7 +80,6 @@ interface Response {
 }
 
 interface UserBookmark {
-  id: number;
   last_read_chapter: number;
   date_added: Date;
   user_id: number;
@@ -88,27 +88,49 @@ interface UserBookmark {
   manga_cover: string;
 }
 
+// PERBAIKAN: Tipe data untuk komponen Card
+interface MangaCardData {
+  id: number;
+  title: string;
+  cover: string;
+}
+
 let userDetails = ref<UserDetail | null>(null);
-let userBookmarks = ref<UserBookmark[]>([]);
+// PERBAIKAN: State ini akan menampung data yang sudah di-transformasi
+let userBookmarks = ref<MangaCardData[]>([]);
 const route = useRoute();
 const userID = route.params.id as string;
 
-async function fetchUserDetail() {
+// PERBAIKAN: Gabungkan kedua fetch ke dalam satu fungsi
+async function fetchUserData() {
+  isLoading.value = true;
   try {
-    isLoading.value = true;
-    const result = await $fetch<Response>(`/api/user/${userID}`, {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json'
-      }
-    });
-    console.log('User details fetched:', result);
-    userDetails.value = result.user;
-    fetchUserBookmarks();
-  } catch (error) {
+    // Jalankan kedua fetch secara paralel untuk performa yang lebih baik
+    const [detailsResponse, bookmarksResponse] = await Promise.all([
+      $fetch<{ success: boolean; user: UserDetail }>(`/api/user/${userID}`),
+      $fetch<UserBookmark[]>(`/api/user/${userID}/bookmarks`)
+    ]);
+
+    // Proses detail user
+    if (detailsResponse && detailsResponse.user) {
+      userDetails.value = detailsResponse.user;
+    } else {
+      throw new Error("User details not found.");
+    }
+
+    // Proses dan petakan (map) data bookmark
+    if (bookmarksResponse) {
+      userBookmarks.value = bookmarksResponse.map(bookmark => ({
+        id: bookmark.manga_id,
+        title: bookmark.manga_title,
+        cover: bookmark.manga_cover,
+      }));
+    }
+
+  } catch (error: any) {
     toast.add({
       title: 'Error',
-      description: 'Failed to fetch user details.',
+      description: 'Failed to fetch user data.',
       color: 'error',
       duration: 5000
     });
@@ -117,28 +139,7 @@ async function fetchUserDetail() {
   }
 }
 
-async function fetchUserBookmarks() {
-  try {
-    isLoading.value = true;
-    const result = await $fetch<UserBookmark[]>(`/api/user/${userID}/bookmarks`, {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json'
-      }
-    });
-    userBookmarks.value = result;
-  } catch (error) {
-    console.error('Error fetching user bookmarks:', error);
-    toast.add({
-      title: 'Error',
-      description: 'Failed to fetch user bookmarks.',
-      color: 'error',
-      duration: 5000
-    });
-  }
-}
-
 onMounted(() => {
-  fetchUserDetail();
+  fetchUserData();
 });
 </script>
\ No newline at end of file

From 97b75e90d4a377bcf41cb9eda183c0d3029354fc Mon Sep 17 00:00:00 2001
From: faralha <faralhaonly@gmail.com>
Date: Sun, 13 Jul 2025 19:06:22 +0700
Subject: [PATCH 03/14] refactor: GET manga, chapters typesafe

---
 components/Mangacard/home.vue               |   9 +-
 components/hero.vue                         |  22 ++--
 pages/index.vue                             |  19 ++--
 pages/manga/[id]/index.vue                  |  68 +++++-------
 pages/user/[id].vue                         |  29 ++---
 server/api/manga/[mangaID].get.ts           |  29 ++---
 server/api/manga/daily-highlights.get.ts    |  12 ++-
 server/api/manga/index.delete.ts            |   2 +-
 server/api/manga/index.get.ts               |  10 +-
 server/api/manga/latest-chapters.get.ts     |   8 +-
 server/api/user/[id]/bookmarks/index.get.ts |   7 +-
 types/database.ts                           | 112 --------------------
 types/manga.ts                              |  27 +++++
 13 files changed, 125 insertions(+), 229 deletions(-)
 delete mode 100644 types/database.ts
 create mode 100644 types/manga.ts

diff --git a/components/Mangacard/home.vue b/components/Mangacard/home.vue
index 35b0087..320b6d2 100644
--- a/components/Mangacard/home.vue
+++ b/components/Mangacard/home.vue
@@ -24,7 +24,7 @@
     <!-- Chapter Information -->
     <div class="p-2 flex-grow">
       <p class="font-semibold text-sm truncate">
-        Ch. {{ parseInt(data.chapter_number) ? parseInt(data.chapter_number) : 0 }}
+        Ch. {{ parseInt(data.chapter_id) ? parseInt(data.chapter_id) : 0 }}
       </p>
       <p class="text-xs">
         {{ timeAgo(data.chapter_date_added) ? timeAgo(data.chapter_date_added) : 'Unknown Date' }}
@@ -44,10 +44,9 @@ defineProps({
       manga_id: 0,
       manga_title: 'Manga Title Placeholder',
       manga_cover: 'https://placehold.co/600x850/333/EEE/png?text=No+Cover',
-      chapter_number: 0,
+      chapter_id: 0,
       chapter_name: 'Latest Chapter',
       chapter_date_added: new Date(),
-      views: 0,
     })
   },
   isUp: {
@@ -55,6 +54,4 @@ defineProps({
     default: true
   }
 })
-</script>
-
-<style scoped></style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/components/hero.vue b/components/hero.vue
index 78d6f97..0a8c057 100644
--- a/components/hero.vue
+++ b/components/hero.vue
@@ -19,9 +19,9 @@
                 {{ item.manga_title }}
               </h1>
               <div class="flex flex-row flex-wrap gap-2 mt-3 max-h-[1.5rem] overflow-hidden">
-                <div v-for="genre in item.genres" :key="genre.id"
+                <div v-for="genre in item.manga_genres"
                   class="text-white bg-white/20 px-2 py-1 text-xs rounded">
-                  {{ capitalizeEachWord(genre.name) }}
+                  {{ capitalizeEachWord(genre.genre_name) }}
                 </div>
               </div>
             </div>
@@ -30,8 +30,8 @@
             <div
               class="bg-primary p-4 md:p-6 text-slate-950 rounded-b-lg md:rounded-r-lg md:rounded-bl-none flex items-center justify-between w-full md:w-auto">
               <div class="text-center max-md:text-left">
-                <p class="font-bold text-2xl md:text-3xl">#{{ item.chapter_number !== null ?
-                  parseInt(item.chapter_number.toString()) : 0 }}</p>
+                <p class="font-bold text-2xl md:text-3xl">#{{ item.chapter_id !== null ?
+                  parseInt(item.chapter_id.toString()) : 0 }}</p>
                 <p class="text-xs font-semibold uppercase">Latest Chapter</p>
               </div>
               <NuxtLink :to="`/manga/${item.manga_id}`" class="ml-4">
@@ -50,18 +50,10 @@
 
 <script setup lang="ts">
 import { capitalizeEachWord } from '~/utils/capitalizeEachWord';
-interface Genre {
-  id: number;
-  name: string;
-}
+import type { Manga } from '~/types/manga';
 
-interface CarouselItem {
-  manga_id: number;
-  manga_title: string;
-  manga_description: string;
-  manga_cover: string;
-  chapter_number: number;
-  genres: Genre[];
+interface CarouselItem extends Manga {
+  chapter_id: number;
 }
 
 defineProps<{
diff --git a/pages/index.vue b/pages/index.vue
index c75c90f..7984864 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -43,20 +43,17 @@
 </template>
 
 <script setup lang="ts">
+import type { Manga } from '~/types/manga';
+
 const toast = useToast();
 
-interface LatestManga {
-  manga_id: number;
-  manga_title: string;
-  manga_cover: string;
-  chapter_number: number;
-  chapter_name: string;
-  chapter_date_added: Date;
+interface HeroData extends Manga {
+  chapter_id: number;
 }
 
 interface HomePageData {
-  latestManga: LatestManga[];
-  dailyHighlights: any[];
+  latestManga: Manga[];
+  dailyHighlights: HeroData[];
 }
 
 const { data, pending, error } = await useAsyncData<HomePageData>(
@@ -64,8 +61,8 @@ const { data, pending, error } = await useAsyncData<HomePageData>(
   async () => {
     // Fetch both endpoints concurrently for better performance
     const [latestManga, dailyHighlights] = await Promise.all([
-      $fetch<LatestManga[]>('/api/manga/latest-chapters'),
-      $fetch<LatestManga[]>('/api/manga/daily-highlights')
+      $fetch<Manga[]>('/api/manga/latest-chapters'),
+      $fetch<HeroData[]>('/api/manga/daily-highlights')
     ]);
     return { latestManga, dailyHighlights };
   }
diff --git a/pages/manga/[id]/index.vue b/pages/manga/[id]/index.vue
index 6bdd21f..b5a4626 100644
--- a/pages/manga/[id]/index.vue
+++ b/pages/manga/[id]/index.vue
@@ -3,7 +3,7 @@
   <div class="h-[25rem] min-lg:h-[20rem] overflow-hidden -z-10 relative">
     <USkeleton v-if="pending" class="w-full h-full" />
     <NuxtImg v-else ref="parallaxImage" class="w-full object-cover opacity-30 blur-sm select-none inset-0"
-      :src="mangaDetails?.cover" :style="{ transform: `translateY(${parallaxOffset}px)` }" draggable="false">
+      :src="mangaDetails?.manga_cover" :style="{ transform: `translateY(${parallaxOffset}px)` }" draggable="false">
     </NuxtImg>
   </div>
 
@@ -24,11 +24,11 @@
     </div>
     <div v-else-if="mangaDetails" class="flex w-full flex-col min-md:flex-row gap-5">
       <!-- Cover -->
-      <NuxtImg :src="mangaDetails.cover" class="min-md:h-[20rem]" style="width: auto" />
+      <NuxtImg :src="mangaDetails.manga_cover" class="min-md:h-[20rem]" style="width: auto" />
       <!-- Content -->
       <div class="flex w-full flex-col gap-2">
-        <h1 class="font-bold text-3xl">{{ mangaDetails.title }}</h1>
-        <h2 class="text-lg">{{ mangaDetails.original_title }}</h2>
+        <h1 class="font-bold text-3xl">{{ mangaDetails.manga_title }}</h1>
+        <h2 class="text-lg">{{ mangaDetails.manga_original_title }}</h2>
 
         <USeparator type="solid" color="primary" />
 
@@ -41,15 +41,15 @@
 
           <div class="flex flex-row items-center gap-2">
             <UIcon name="i-lucide-star" class="size-5" />
-            <span class="text-sm">{{ mangaDetails.ratings }}</span>
+            <span class="text-sm">{{ mangaDetails.manga_ratings }}</span>
           </div>
         </div>
 
         <!-- DESCRIPTIONS -->
-        <p class="text-md text-neutral text-wrap ">{{ mangaDetails.description }}</p>
+        <p class="text-md text-neutral text-wrap ">{{ mangaDetails.manga_description }}</p>
 
         <!-- AUTHOR -->
-        <span class="text-md">Author: {{ mangaDetails.author }}</span>
+        <span class="text-md">Author: {{ mangaDetails.manga_author }}</span>
 
         <!-- ACTION BUTTONS -->
         <div class="flex flex-row gap-2 mt-2">
@@ -80,10 +80,10 @@
 
         <!-- GENRES -->
         <div class="h-auto gap-y-2 flex flex-row flex-wrap mt-4">
-          <span v-for="genre in mangaDetails.genre" class="p-1 h-auto font-semibold text-sm">
-            <span v-if="genre == 'yuri' || genre == 'smut'" class="bg-primary p-1 px-1.5 rounded-sm text-white">{{
-              capitalizeEachWord(genre) }}</span>
-            <span v-else class="p-1 px-1.5 outline outline-current rounded-sm">{{ capitalizeEachWord(genre)
+          <span v-for="genre in mangaDetails.manga_genres" class="p-1 h-auto font-semibold text-sm">
+            <span v-if="genre.genre_name == 'yuri' || genre.genre_name == 'smut'" class="bg-primary p-1 px-1.5 rounded-sm text-white">{{
+              capitalizeEachWord(genre.genre_name) }}</span>
+            <span v-else class="p-1 px-1.5 outline outline-current rounded-sm">{{ capitalizeEachWord(genre.genre_name)
               }}</span>
           </span>
         </div>
@@ -93,22 +93,22 @@
     <!-- CHAPTERS -->
     <p class="text-xl font-semibold mt-5">Chapters</p>
     <div v-if="mangaDetails" class="max-h-[20rem] overflow-y-scroll flex flex-col gap-4 p-4 rounded-sm bg-accented">
-      <div v-if="mangaDetails.chapters.length === 0" class="text-center text-current/60">
+      <div v-if="mangaDetails.manga_chapters?.length === 0" class="text-center text-current/60">
         No chapters available for this manga.
       </div>
-      <div v-for="chapter in sortedChapters" :key="chapter.number" class="flex">
+      <div v-for="chapter in sortedChapters" :key="chapter.chapter_id" class="flex">
         <NuxtLink
           class="dark:hover:bg-slate-800 light:hover:bg-slate-300 outline outline-current/40 transition ease-in p-2 rounded-md font-semibold w-full"
-          :class="{ 'text-current/60 dark:text-slate-400 light:text-slate-500': chapter.number <= lastRead }"
-          :to="`/manga/${mangaDetails.id}/chapter/${chapter.number}`">
+          :class="{ 'text-current/60 dark:text-slate-400 light:text-slate-500': chapter.chapter_id <= lastRead }"
+          :to="`/manga/${mangaDetails.manga_id}/chapter/${chapter.chapter_id}`">
           <div class="flex justify-between items-center">
             <div>
-              Ch. {{ chapter.number }} {{ chapter.name ? `- ${chapter.name}` : '' }}
-              <p class="text-sm font-light">{{ timeAgo(chapter.date_added) }}</p>
+              Ch. {{ chapter.chapter_id }} {{ chapter.chapter_name ? `- ${chapter.chapter_name}` : '' }}
+              <p class="text-sm font-light">{{ timeAgo(chapter.chapter_date_added) }}</p>
             </div>
             <div class="flex items-center gap-2">
               <UIcon name="i-lucide-eye" class="size-4" />
-              {{ chapter.views }}
+              {{ chapter.chapter_views }}
             </div>
           </div>
         </NuxtLink>
@@ -126,6 +126,7 @@
 <script setup lang="ts">
 import { timeAgo } from '~/utils/format'
 import { capitalizeEachWord } from '~/utils/capitalizeEachWord'
+import type { Manga, Chapter } from '~/types/manga'
 
 const authStore = useAuthStore();
 const lastReadStore = useLastReadStore();
@@ -144,27 +145,8 @@ const isAdmin = computed(() => authStore.user?.roles.includes('Admin'));
 const parallaxOffset = ref(0);
 const parallaxImage = ref(null);
 
-interface Chapter {
-  number: number,
-  name: string,
-  date_added: Date,
-  views: number
-}
-
-interface MangaDetail {
-  id: number,
-  title: string,
-  original_title: string,
-  description: string,
-  cover: string,
-  ratings: number,
-  genre: string[],
-  chapters: Chapter[],
-  author: string,
-}
-
 interface MangaFetchData {
-  mangaDetails: MangaDetail;
+  mangaDetails: Manga;
   total_views: number;
 }
 
@@ -175,7 +157,7 @@ interface MangaViewsResponse {
 // Fetch data using useAsyncData
 const { data, pending, error } = await useAsyncData<MangaFetchData>(async () => {
   const [mangaDetails, mangaViews] = await Promise.all([
-    $fetch<MangaDetail>(`/api/manga/${manga_id}`),
+    $fetch<Manga>(`/api/manga/${manga_id}`),
     $fetch<MangaViewsResponse>(`/api/views/${manga_id}`)
   ]);
   return {
@@ -188,10 +170,10 @@ const mangaDetails = computed(() => data.value?.mangaDetails);
 const mangaViews = computed(() => data.value?.total_views);
 
 const sortedChapters = computed(() => {
-  if (!mangaDetails.value?.chapters) {
+  if (!mangaDetails.value?.manga_chapters) {
     return [];
   }
-  return [...mangaDetails.value.chapters].sort((a, b) => b.number - a.number);
+  return [...mangaDetails.value.manga_chapters].sort((a, b) => b.chapter_id - a.chapter_id);
 });
 
 async function addBookmark() {
@@ -208,7 +190,7 @@ async function addBookmark() {
     await $fetch(`/api/user/${userId}/bookmarks`, {
       method: 'POST',
       body: {
-        manga_id: mangaDetails.value.id,
+        manga_id: mangaDetails.value.manga_id,
         last_read_chapter_id: lastRead.value
       }
     })
@@ -240,7 +222,7 @@ async function removeBookmark() {
       });
       return;
     }
-    await $fetch(`/api/user/${userId}/bookmarks/${mangaDetails.value.id}`, {
+    await $fetch(`/api/user/${userId}/bookmarks/${mangaDetails.value.manga_id}`, {
       method: 'DELETE'
     });
     isBookmarked.value = false;
diff --git a/pages/user/[id].vue b/pages/user/[id].vue
index b534ef0..63af7fb 100644
--- a/pages/user/[id].vue
+++ b/pages/user/[id].vue
@@ -40,8 +40,8 @@
         <!-- PERBAIKAN: Gunakan grid untuk layout yang lebih baik -->
         <div v-if="userID" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 mt-4">
           <!-- PERBAIKAN: Loop melalui data yang sudah dipetakan -->
-          <div v-for="bookmark in userBookmarks" :key="bookmark.id">
-            <MangaCardHome :data="bookmark" isUp="false" />
+          <div v-if="userBookmarks" v-for="bookmark in userBookmarks">
+            <MangacardHome :data="bookmark" :isUp=false />
           </div>
         </div>
 
@@ -74,11 +74,6 @@ interface UserDetail {
   date_joined: Date;
 }
 
-interface Response {
-  success: boolean;
-  user: UserDetail;
-}
-
 interface UserBookmark {
   last_read_chapter: number;
   date_added: Date;
@@ -88,16 +83,9 @@ interface UserBookmark {
   manga_cover: string;
 }
 
-// PERBAIKAN: Tipe data untuk komponen Card
-interface MangaCardData {
-  id: number;
-  title: string;
-  cover: string;
-}
-
 let userDetails = ref<UserDetail | null>(null);
 // PERBAIKAN: State ini akan menampung data yang sudah di-transformasi
-let userBookmarks = ref<MangaCardData[]>([]);
+let userBookmarks = ref<UserBookmark[]>([]);
 const route = useRoute();
 const userID = route.params.id as string;
 
@@ -118,16 +106,11 @@ async function fetchUserData() {
       throw new Error("User details not found.");
     }
 
-    // Proses dan petakan (map) data bookmark
-    if (bookmarksResponse) {
-      userBookmarks.value = bookmarksResponse.map(bookmark => ({
-        id: bookmark.manga_id,
-        title: bookmark.manga_title,
-        cover: bookmark.manga_cover,
-      }));
-    }
+    // Assign bookmark data
+    if (bookmarksResponse) userBookmarks.value = bookmarksResponse
 
   } catch (error: any) {
+    console.error(error)
     toast.add({
       title: 'Error',
       description: 'Failed to fetch user data.',
diff --git a/server/api/manga/[mangaID].get.ts b/server/api/manga/[mangaID].get.ts
index 3403ef8..94b541d 100644
--- a/server/api/manga/[mangaID].get.ts
+++ b/server/api/manga/[mangaID].get.ts
@@ -28,20 +28,21 @@ export default defineEventHandler(async (event) => {
   manga = result.rows[0];
 
   return {
-    id: manga.manga_id,
-    title: manga.manga_title,
-    original_title: manga.manga_original_title,
-    description: manga.manga_description,
-    author: manga.manga_author,
-    cover: manga.manga_cover,
-    ratings: manga.manga_ratings,
-    genre: mangaGenre.rows.map((g: any) => g.name),
-    chapters: manga.chapters.map((chapter: any) => ({
-      id: chapter.id,
-      name: chapter.name,
-      number: chapter.number,
-      date_added: chapter.date_added,
-      views: chapter.views
+    manga_id: manga.manga_id,
+    manga_title: manga.manga_title,
+    manga_original_title: manga.manga_original_title,
+    manga_description: manga.manga_description,
+    manga_author: manga.manga_author,
+    manga_cover: manga.manga_cover,
+    manga_ratings: manga.manga_ratings,
+    manga_genres: mangaGenre.rows.map((g: any) => ({
+      genre_name: g.name
+    })),
+    manga_chapters: manga.chapters.map((chapter: any) => ({
+      chapter_id: chapter.number,
+      chapter_name: chapter.name,
+      chapter_date_added: chapter.date_added,
+      chapter_views: chapter.views
     })),
   };
 });
diff --git a/server/api/manga/daily-highlights.get.ts b/server/api/manga/daily-highlights.get.ts
index 86794a7..60be6b3 100644
--- a/server/api/manga/daily-highlights.get.ts
+++ b/server/api/manga/daily-highlights.get.ts
@@ -16,5 +16,15 @@ export default defineEventHandler(async (event) => {
     return [];
   }
 
-  return result.rows;
+  return result.rows.map((dh: any) => ({
+    manga_id: dh.manga_id,
+    manga_title: dh.manga_title,
+    manga_author: dh.manga_author,
+    manga_cover: dh.manga_cover,
+    chapter_id: dh.chapter_number,
+    manga_genres: dh.genres.map((g: any) => ({
+      genre_name: g.name,
+      genre_id: g.id,
+    }))
+  }));
 });
diff --git a/server/api/manga/index.delete.ts b/server/api/manga/index.delete.ts
index 5cbb245..3577969 100644
--- a/server/api/manga/index.delete.ts
+++ b/server/api/manga/index.delete.ts
@@ -20,6 +20,6 @@ export default defineEventHandler(async (event) => {
 
   return {
     message: "Manga deleted successfully",
-    id: result.rows[0].id,
+    manga_id: result.rows[0].id,
   };
 })
\ No newline at end of file
diff --git a/server/api/manga/index.get.ts b/server/api/manga/index.get.ts
index 093df8e..1ef4326 100644
--- a/server/api/manga/index.get.ts
+++ b/server/api/manga/index.get.ts
@@ -53,7 +53,15 @@ export default defineEventHandler(async (event) => {
         message: "Manga not found",
       });
     }
-    manga = result.rows;
+    manga = result.rows.map((m) => ({
+      manga_id: m.id,
+      manga_title: m.title,
+      manga_original_title: m.original_title,
+      manga_description: m.description,
+      manga_author: m.author,
+      manga_cover: m.cover,
+      manga_ratings: m.ratings,
+    }))
     return manga;
   }
 });
diff --git a/server/api/manga/latest-chapters.get.ts b/server/api/manga/latest-chapters.get.ts
index 459e7b0..81d1a60 100644
--- a/server/api/manga/latest-chapters.get.ts
+++ b/server/api/manga/latest-chapters.get.ts
@@ -16,5 +16,11 @@ export default defineEventHandler(async (event) => {
     });
   }
 
-  return result.rows;
+  return result.rows.map((m) => ({
+    manga_id: m.manga_id,
+    manga_title: m.manga_title,
+    manga_cover: m.manga_cover,
+    chapter_id: m.chapter_number,
+    chapter_date_added: m.chapter_date_added,
+  }));
 });
diff --git a/server/api/user/[id]/bookmarks/index.get.ts b/server/api/user/[id]/bookmarks/index.get.ts
index cd7a53f..ee2485d 100644
--- a/server/api/user/[id]/bookmarks/index.get.ts
+++ b/server/api/user/[id]/bookmarks/index.get.ts
@@ -18,7 +18,12 @@ export default defineEventHandler(async (event) => {
         message: "Bookmarks not found",
       });
     }
-    return result.rows;
+    return result.rows.map(b => ({
+      manga_id: b.manga_id,
+      manga_title: b.manga_title,
+      chapter_last_read: b.last_read_chapter,
+      chapter_date_added: b.date_added,
+    }));
   } catch (error) {
     console.error("Error fetching bookmarks:", error);
     throw createError({
diff --git a/types/database.ts b/types/database.ts
deleted file mode 100644
index 1ed3f25..0000000
--- a/types/database.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-// Tipe kustom yang dibuat dari ENUM di PostgreSQL
-export type TaskStatus = "pending" | "in_progress" | "completed";
-
-// Table: role
-export interface Role {
-  ID: number;
-  name: string;
-  description?: string | null;
-}
-
-// Table: users
-export interface User {
-  ID: number;
-  avatar?: string | null;
-  username: string;
-  name: string;
-  email: string;
-  password: string; // Di aplikasi, sebaiknya jangan pernah ekspos field ini ke client
-  status: boolean;
-  date_joined: Date;
-}
-
-// Table: user_role (Junction Table)
-export interface UserRole {
-  user_ID: number;
-  role_ID: number;
-}
-
-// Table: manga
-export interface Manga {
-  ID: number;
-  title: string;
-  original_title?: string | null;
-  description: string;
-  author: string;
-  cover: string;
-  ratings: number; // Tipe NUMERIC di-mapping ke number
-}
-
-// Table: genre
-export interface Genre {
-  ID: number;
-  name: string;
-}
-
-// Table: manga_genre (Junction Table)
-export interface MangaGenre {
-  manga_ID: number;
-  genre_ID: number;
-}
-
-// Table: chapter
-export interface Chapter {
-  ID: number;
-  number: number; // Tipe NUMERIC di-mapping ke number
-  name?: string | null;
-  date_added: Date;
-  manga_ID: number;
-  title: string;
-}
-
-// Table: image
-export interface Image {
-  ID: number; // BIGINT bisa di-mapping ke number jika tidak melebihi batas, atau string/bigint
-  page_number: number;
-  link: string;
-  chapter_ID: number;
-}
-
-// Table: bookmark
-export interface Bookmark {
-  ID: number;
-  last_read_chapter_id: number;
-  date_added: Date;
-  user_ID: number;
-  manga_ID: number;
-}
-
-// Table: manga_comments
-export interface MangaComment {
-  ID: number; // BIGINT bisa di-mapping ke number atau string/bigint
-  comment: string;
-  date_added: Date;
-  manga_ID: number;
-  user_ID: number;
-}
-
-// Table: chapter_comments
-export interface ChapterComment {
-  ID: number; // BIGINT bisa di--mapping ke number atau string/bigint
-  comment: string;
-  date_added: Date;
-  chapter_ID: number;
-  user_ID: number;
-}
-
-// Table: salary
-export interface Salary {
-  ID: number;
-  payment_date: Date;
-  amount: number; // Tipe NUMERIC di-mapping ke number
-  user_ID: number;
-}
-
-// Table: task
-export interface Task {
-  ID: number;
-  date_added: Date;
-  status: TaskStatus;
-  user_ID: number;
-  manga_ID: number;
-}
\ No newline at end of file
diff --git a/types/manga.ts b/types/manga.ts
new file mode 100644
index 0000000..4c3cb26
--- /dev/null
+++ b/types/manga.ts
@@ -0,0 +1,27 @@
+export interface Manga {
+  manga_id: number;
+  manga_title: string;
+  manga_original_title: string;
+  manga_description: string;
+  manga_author: string;
+  manga_cover: string;
+  manga_ratings: number;
+  manga_genres?: Genre[];
+  manga_chapters?: Chapter[];
+  manga_views?: number;
+}
+
+export interface Genre {
+  genre_id: number;
+  genre_name: string;
+}
+
+export interface Chapter {
+  // Chapter_id: chapter_number in database.
+  // To look for certain chapter from a manga, 
+  // do a lookout using (SQL) chapter.number + manga.id combo.
+  chapter_id: number;
+  chapter_name: string;
+  chapter_date_added: Date;
+  chapter_views: number;
+}

From b4a930396529678a0afc8778610fd83799dbbf31 Mon Sep 17 00:00:00 2001
From: faralha <faralhaonly@gmail.com>
Date: Tue, 15 Jul 2025 21:32:14 +0700
Subject: [PATCH 04/14] feat: view preference persisted, manga genre max width
 adjust

---
 pages/manga/[id]/chapter/[chapterID].vue |  8 +++++---
 pages/manga/[id]/index.vue               |  2 +-
 pages/user/[id].vue                      |  7 +------
 stores/bookmark.ts                       | 15 --------------
 stores/userPreference.ts                 | 25 ++++++++++++++++++++++++
 5 files changed, 32 insertions(+), 25 deletions(-)
 delete mode 100644 stores/bookmark.ts
 create mode 100644 stores/userPreference.ts

diff --git a/pages/manga/[id]/chapter/[chapterID].vue b/pages/manga/[id]/chapter/[chapterID].vue
index 063f462..75088e5 100644
--- a/pages/manga/[id]/chapter/[chapterID].vue
+++ b/pages/manga/[id]/chapter/[chapterID].vue
@@ -15,13 +15,13 @@
       <div class="my-4">
         <NuxtLink class="text-2xl font-bold" :to="`/manga/${mangaID}`">{{ chapterData.title }}</NuxtLink>
         <p class="text-sm font-current/60">{{ `Chapter ${parseInt(chapterData.chapter.toString())}` }}</p>
-        <UButton class="mt-2" variant="subtle" @click="isLongstrip = !isLongstrip">{{ isLongstrip ? "Horizontal View" :
+        <UButton class="mt-2" variant="subtle" @click="userPreferenceStore.toggleViewMode()">{{ userPreferenceStore.getViewMode ? "Horizontal View" :
           "Vertical View"}}</UButton>
       </div>
 
       <!-- Render Images -->
       <div class="flex flex-col items-center">
-        <ViewerVertical v-if="isLongstrip" :data="chapterData.images" />
+        <ViewerVertical v-if="userPreferenceStore.getViewMode" :data="chapterData.images" />
         <ViewerHorizontal v-else :data="chapterData.images" />
       </div>
 
@@ -50,12 +50,14 @@
 </template>
 
 <script setup lang="ts">
+import { useUserPreference } from '~/stores/userPreference';
+
 const toast = useToast();
 const route = useRoute();
 const mangaID = route.params.id as string;
 const chapterID = route.params.chapterID as string;
-const isLongstrip = ref(true);
 const lastReadStore = useLastReadStore();
+const userPreferenceStore = useUserPreference();
 
 const isNavVisible = ref(false);
 const lastScrollY = ref(0);
diff --git a/pages/manga/[id]/index.vue b/pages/manga/[id]/index.vue
index b5a4626..875c451 100644
--- a/pages/manga/[id]/index.vue
+++ b/pages/manga/[id]/index.vue
@@ -79,7 +79,7 @@
         </div>
 
         <!-- GENRES -->
-        <div class="h-auto gap-y-2 flex flex-row flex-wrap mt-4">
+        <div class="h-auto gap-y-2 flex flex-row flex-wrap mt-4 min-xl:max-w-[70%]">
           <span v-for="genre in mangaDetails.manga_genres" class="p-1 h-auto font-semibold text-sm">
             <span v-if="genre.genre_name == 'yuri' || genre.genre_name == 'smut'" class="bg-primary p-1 px-1.5 rounded-sm text-white">{{
               capitalizeEachWord(genre.genre_name) }}</span>
diff --git a/pages/user/[id].vue b/pages/user/[id].vue
index 63af7fb..11142cb 100644
--- a/pages/user/[id].vue
+++ b/pages/user/[id].vue
@@ -37,9 +37,7 @@
       <!-- BOOKMARKS -->
       <div>
         <h1 class="font-bold text-xl">Bookmarks</h1>
-        <!-- PERBAIKAN: Gunakan grid untuk layout yang lebih baik -->
         <div v-if="userID" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 mt-4">
-          <!-- PERBAIKAN: Loop melalui data yang sudah dipetakan -->
           <div v-if="userBookmarks" v-for="bookmark in userBookmarks">
             <MangacardHome :data="bookmark" :isUp=false />
           </div>
@@ -57,7 +55,7 @@
 <script setup lang="ts">
 
 const toast = useToast();
-const isLoading = ref(true); // Mulai dengan true karena kita akan fetch di onMounted
+const isLoading = ref(true);
 
 interface Roles {
   id: number,
@@ -84,16 +82,13 @@ interface UserBookmark {
 }
 
 let userDetails = ref<UserDetail | null>(null);
-// PERBAIKAN: State ini akan menampung data yang sudah di-transformasi
 let userBookmarks = ref<UserBookmark[]>([]);
 const route = useRoute();
 const userID = route.params.id as string;
 
-// PERBAIKAN: Gabungkan kedua fetch ke dalam satu fungsi
 async function fetchUserData() {
   isLoading.value = true;
   try {
-    // Jalankan kedua fetch secara paralel untuk performa yang lebih baik
     const [detailsResponse, bookmarksResponse] = await Promise.all([
       $fetch<{ success: boolean; user: UserDetail }>(`/api/user/${userID}`),
       $fetch<UserBookmark[]>(`/api/user/${userID}/bookmarks`)
diff --git a/stores/bookmark.ts b/stores/bookmark.ts
deleted file mode 100644
index 267e879..0000000
--- a/stores/bookmark.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { defineStore } from 'pinia';
-import { useAuthStore } from '~/stores/auth';
-
-// Source Hierarchy: 1. API/Database (logged in), 2. Local Storage
-export const useUserMangaStore = defineStore('userManga', {
-  state: () => ({
-    bookmarks: {} as Record<number, { manga_id: number, manga_title: string, manga_cover: string, last_read_chapter_id: number }>,
-    readingProgress: {} as Record<string, { chapter: number, page: number }>,
-  }),
-
-  actions: {
-    
-    
-  }
-})
\ No newline at end of file
diff --git a/stores/userPreference.ts b/stores/userPreference.ts
new file mode 100644
index 0000000..5e9996c
--- /dev/null
+++ b/stores/userPreference.ts
@@ -0,0 +1,25 @@
+import { defineStore } from 'pinia';
+
+export const useUserPreference = defineStore('userPreference', {
+  state: () => ({
+    // Reading View Preference
+    isLongstrip: false,
+  }),
+
+  actions: {
+    setViewMode(isLongstrip: boolean) {
+      this.isLongstrip = isLongstrip;
+    },
+    toggleViewMode() {
+      this.isLongstrip = !this.isLongstrip;
+    }
+  },
+
+  getters: {
+    getViewMode: (state) => {
+      return state.isLongstrip;
+    }
+  },
+  
+  persist: true,
+})
\ No newline at end of file

From 709711e42bee513508ccd69ff4257ac26ab421df Mon Sep 17 00:00:00 2001
From: faralha <faralhaonly@gmail.com>
Date: Sun, 20 Jul 2025 13:41:48 +0700
Subject: [PATCH 05/14] feat: restructure layout components and improve sidebar
 functionality (unfinished)

---
 app.vue                                 | 11 +++----
 components/Mangacard/home.vue           |  2 +-
 components/navbar.vue                   |  6 ++--
 components/sidebar.vue                  | 31 ++++++++++++++++++
 layouts/default.vue                     | 43 +++++++++++++++++++++++++
 pages/index.vue                         |  4 +--
 server/api/manga/latest-chapters.get.ts |  3 +-
 7 files changed, 87 insertions(+), 13 deletions(-)
 create mode 100644 components/sidebar.vue
 create mode 100644 layouts/default.vue

diff --git a/app.vue b/app.vue
index 1235cce..2b24d69 100644
--- a/app.vue
+++ b/app.vue
@@ -1,13 +1,12 @@
 <template>
-  <UApp>
-    <Navbar v-if="!['/login', '/register'].includes(route.path)" />
-    <NuxtPage />
-    <Footer v-if="!['/login', '/register'].includes(route.path)" class="mt-[10rem]" />
-  </UApp>
+  <NuxtLayout>
+    <UApp>
+      <NuxtPage />
+    </UApp>
+  </NuxtLayout>
 </template>
 
 <script setup>
-const route = useRoute();
 const authStore = useAuthStore();
 
 onMounted(async () => {
diff --git a/components/Mangacard/home.vue b/components/Mangacard/home.vue
index 320b6d2..e8f065a 100644
--- a/components/Mangacard/home.vue
+++ b/components/Mangacard/home.vue
@@ -27,7 +27,7 @@
         Ch. {{ parseInt(data.chapter_id) ? parseInt(data.chapter_id) : 0 }}
       </p>
       <p class="text-xs">
-        {{ timeAgo(data.chapter_date_added) ? timeAgo(data.chapter_date_added) : 'Unknown Date' }}
+        {{ timeAgo(data.chapter_date_added) ? timeAgo(data.chapter_date_added) : 'Unknown' }}
       </p>
     </div>
   </div>
diff --git a/components/navbar.vue b/components/navbar.vue
index a73994e..d6ed653 100644
--- a/components/navbar.vue
+++ b/components/navbar.vue
@@ -1,9 +1,9 @@
 <template>
-  <nav class="flex flex-row justify-between items-center container py-5">
-    <NuxtLink to="/" class="font-[Boldonse] text-xl flex flex-col items-end">Alterkai<span
+  <nav class="flex flex-row justify-between  items-center container py-5">
+    <NuxtLink to="/" class=" font-[Boldonse] text-xl flex flex-col items-end">Alterkai<span
         class="text-xs">Scans</span></NuxtLink>
       
-
+    <!-- TOP NAVBAR -->
     <div class="flex items-center gap-4">
       <!-- SEARCH BUTTON -->
       <UModal v-model:open="modalOpen" :ui="{ wrapper: 'flex items-start justify-center' }">
diff --git a/components/sidebar.vue b/components/sidebar.vue
new file mode 100644
index 0000000..2be1814
--- /dev/null
+++ b/components/sidebar.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="py-6 px-2 flex flex-col items-center dark:bg-zinc-800">
+    <!-- LOGO -->
+    <NuxtLink to="/" class="min-lg:flex hidden font-[Boldonse] text-xl flex-col items-end mb-5">Alterkai<span
+        class="text-xs">Scans</span></NuxtLink>
+
+    <!-- SIDEBAR ITEMS -->
+    <ul class="flex flex-col gap-2 w-full">
+      <li v-for="(item, index) in props.items" :key="index"
+        class="p-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-800 rounded">
+        <NuxtLink :to="item.to" class="flex items-center gap-2 w-full">
+          <UIcon v-if="item.icon" :name="item.icon" class="size-5" />
+          <span class="font-semibold">{{ item.label }}</span>
+        </NuxtLink>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface SidebarItem {
+  to: string
+  label: string
+  icon?: string
+}
+
+const props = defineProps<{
+  items: SidebarItem[]
+}>()
+
+</script>
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
new file mode 100644
index 0000000..b87762c
--- /dev/null
+++ b/layouts/default.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+const route = useRoute();
+const showLayout = computed(() => !['/login', '/register'].includes(route.path));
+const open = ref(true);
+
+const items = ref([
+  {
+    icon: 'i-lucide-house',
+    label: 'Home',
+    to: '/',
+  }
+])
+</script>
+
+<template>
+  <div class="flex flex-col min-h-screen overflow-hidden mb-[5rem]">
+
+    <div class="flex flex-row flex-1 overflow-hidden">
+      <!-- SIDEBAR NAV -->
+
+      <!-- 1. DESKTOP -->
+      <!-- <Sidebar v-if="showLayout" :items="items" class="hidden min-lg:flex w-[17rem] overflow-y-auto flex-shrink-0" /> -->
+
+      <!-- 2. MOBILE -->
+      <!-- <USlideover side="left" v-model:open="open" v-if="showLayout">
+        <template #content>
+          <Sidebar :items="items" class="min-lg:hidden w-full" />
+        </template>
+      </USlideover> -->
+
+      <div class="overflow-y-auto flex-1">
+        <Navbar v-if="showLayout" />
+
+        <slot />
+      </div>
+    </div>
+
+
+    <!-- FOOTER -->
+    <!-- <Footer v-if="showLayout" /> -->
+
+  </div>
+</template>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 7984864..e9a9fdc 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -21,7 +21,7 @@
       </div>
 
       <div v-else-if="data?.latestManga">
-        <div class="grid grid-cols-4 sm:grid-cols-4 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-5 gap-x-[5px] gap-y-6">
+        <div class="grid grid-cols-3 sm:grid-cols-3 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-x-[5px] gap-y-6">
           <NuxtLink v-for="manga in data.latestManga" :key="manga.manga_id" :to="`/manga/${manga.manga_id}`">
             <MangacardHome :data="manga" />
           </NuxtLink>
@@ -33,7 +33,7 @@
     </div>
 
     <!-- RIGHT SECTION -->
-    <div class="min-lg:w-[45%]">
+    <div class="min-lg:w-full">
       <h2 class="font-semibold text-2xl mb-5">Social Media</h2>
       <div>
         <Socialmedia />
diff --git a/server/api/manga/latest-chapters.get.ts b/server/api/manga/latest-chapters.get.ts
index 81d1a60..3e8d6ad 100644
--- a/server/api/manga/latest-chapters.get.ts
+++ b/server/api/manga/latest-chapters.get.ts
@@ -1,10 +1,11 @@
 import { db } from "~/server/utils/db";
 
-export default defineEventHandler(async (event) => {
+export default defineEventHandler(async () => {
   const result = await db.query(
     `
     SELECT manga_id, manga_title, manga_cover, chapter_number, chapter_name, chapter_date_added
     FROM manga_latest_chapters
+    WHERE chapter_number IS NOT NULL
     ORDER BY chapter_date_added DESC
     LIMIT 20`
   );

From 7afabbf37574602820cf983e4a4f00f5b6b711d7 Mon Sep 17 00:00:00 2001
From: faralha <faralhaonly@gmail.com>
Date: Sun, 20 Jul 2025 17:59:47 +0700
Subject: [PATCH 06/14] feat: implement comment submission and deletion
 functionality with authentication

---
 components/Comments/container.vue             | 107 ++++++++++++++----
 .../[chapterID]/comments/index.delete.ts      |  94 +++++++++++++++
 .../[chapterID]/comments/index.post.ts        |  49 +++++---
 3 files changed, 209 insertions(+), 41 deletions(-)
 create mode 100644 server/api/manga/[mangaID]/[chapterID]/comments/index.delete.ts

diff --git a/components/Comments/container.vue b/components/Comments/container.vue
index d36147d..ad0c9d0 100644
--- a/components/Comments/container.vue
+++ b/components/Comments/container.vue
@@ -1,10 +1,25 @@
 <template>
   <div class="flex flex-col gap-2 bg-accented h-[20rem]">
-    <div v-if="isLoading">
 
+    <!-- TEXTBOX -->
+    <div class="p-3 flex flex-col flex-shrink-0 w-full">
+      <div v-if="isLoggedIn == true" class="flex flex-col w-full items-end gap-2">
+        <UTextarea class="flex-1 w-full" v-model="newComment" placeholder="Add a comment..." />
+        <UButton @click="submitComment">Submit</UButton>
+      </div>
+
+      <div v-else class="text-center w-full">
+        <p class="text-sm text-current/50">You must be logged in to comment.</p>
+      </div>
+    </div>
+
+
+    <div v-if="pending">
+      <p>Loading comments...</p>
     </div>
 
-    <div v-else v-for="data in comments" :key="data.id" class="p-3 flex items-start gap-2">
+    <!-- COMMENTS -->
+    <div v-else v-if="comments" v-for="data in comments" :key="data.id" class="p-3 flex items-start gap-2">
       <UAvatar size="2xl" :src="data.user_avatar" />
       <div class="flex flex-col">
         <p class="text-sm text-current/80">@{{ data.username }}</p>
@@ -12,11 +27,18 @@
         <p>{{ data.comment }}</p>
       </div>
     </div>
+
+    <div v-if="!comments || comments.length === 0" class="p-3 text-center text-current/50">
+      No comments yet. Be the first to comment!
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { useAuthStore } from '~/stores/auth';
 
+const authStore = useAuthStore();
+const isLoggedIn = computed(() => authStore.isLoggedIn);
 const isLoading = ref(false);
 const toast = useToast();
 const props = defineProps({
@@ -32,6 +54,8 @@ const props = defineProps({
 });
 const { manga_id, chapter_id } = props;
 
+const newComment = ref('');
+
 interface Comment {
   id: number;
   comment: string;
@@ -41,33 +65,67 @@ interface Comment {
   user_avatar: string;
 }
 
-let comments = ref<Comment[]>([]);
-async function fetchComments() {
+// Fetch Comments
+const { data: comments, pending, error, refresh } = await useAsyncData<Comment[]>(
+  `comments-${manga_id}-${chapter_id ?? 'manga'}`,
+  () => {
+    const url = chapter_id
+      ? `/api/manga/${manga_id}/${chapter_id}/comments`
+      : `/api/manga/${manga_id}/comments`;
+    return $fetch(url);
+  }, {
+  default: () => []
+}
+);
+
+if (error.value) {
+  toast.add({
+    title: 'Error',
+    description: 'Failed to fetch comments.',
+    color: 'error',
+    duration: 5000
+  });
+}
+
+// Submit comment
+async function submitComment() {
+  if (!newComment.value.trim()) {
+    toast.add({
+      title: 'Error',
+      description: 'Comment cannot be empty.',
+      color: 'error',
+      duration: 3000
+    });
+    return;
+  }
+
   try {
     isLoading.value = true;
-    // Fetch from chapters
-    if (chapter_id) {
-      const results = await $fetch<Comment[]>(`/api/manga/${manga_id}/${chapter_id}/comments`, {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json'
-        }
-      });
-      comments.value = results;
-    } else {
-      // Fetch from manga
-      const results = await $fetch<Comment[]>(`/api/manga/${manga_id}/comments`, {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json'
-        }
-      });
-      comments.value = results;
-    }
+    await $fetch(`/api/manga/${manga_id}/${chapter_id ? chapter_id + '/' : ''}comments`, {
+      method: 'POST',
+      body: {
+        comment: newComment.value
+      },
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    });
+
+    // Clear the input field
+    newComment.value = '';
+    // Fetch updated comments
+    await refresh();
+    
+    toast.add({
+      title: 'Success',
+      description: 'Comment added successfully.',
+      color: 'success',
+      duration: 3000
+    });
   } catch (error) {
     toast.add({
       title: 'Error',
-      description: 'Failed to fetch comments.',
+      description: 'Failed to submit comment.',
       color: 'error',
       duration: 5000
     });
@@ -77,6 +135,5 @@ async function fetchComments() {
 }
 
 onMounted(() => {
-  fetchComments();
 })
 </script>
\ No newline at end of file
diff --git a/server/api/manga/[mangaID]/[chapterID]/comments/index.delete.ts b/server/api/manga/[mangaID]/[chapterID]/comments/index.delete.ts
new file mode 100644
index 0000000..0bde396
--- /dev/null
+++ b/server/api/manga/[mangaID]/[chapterID]/comments/index.delete.ts
@@ -0,0 +1,94 @@
+/**
+ * @summary Delete a user's comment.
+ * @description Deletes a specific comment. This endpoint requires the user to be authenticated.
+ * A user can only delete their own comments.
+ *
+ * @param {string} mangaID - The ID of the manga (used for URL structure, not in logic).
+ * @param {string} chapterID - The ID of the chapter (used for URL structure, not in logic).
+ *
+ * @body {{ commentId: number }} - The request body must be a JSON object containing the ID of the comment to be deleted.
+ *
+ * @returns {200, { message: string }} - On success, returns a confirmation message.
+ * @returns {400} - If the commentId is missing from the request body.
+ * @returns {401} - If the user is not authenticated or the token is invalid.
+ * @returns {403} - If the user tries to delete a comment that does not exist or does not belong to them.
+ * @returns {500} - For any other server-side errors.
+ */
+
+import jwt from "jsonwebtoken";
+import { db } from "~/server/utils/db";
+
+export default defineEventHandler(async (event) => {
+  // 1. Get User ID from JWT token (Authentication)
+  const token = getCookie(event, "auth-token");
+  if (!token) {
+    throw createError({
+      statusCode: 401,
+      message: "Authentication token is required",
+    });
+  }
+
+  let userID: string;
+  try {
+    const JWT_SECRET = process.env.JWT_SECRET;
+    if (!JWT_SECRET) {
+      throw new Error("Server configuration error: JWT_SECRET is not set.");
+    }
+    const decoded = jwt.verify(token, JWT_SECRET);
+    if (typeof decoded === "object" && decoded !== null && "id" in decoded) {
+      userID = (decoded as jwt.JwtPayload).id;
+    } else {
+      throw new Error("Invalid token payload.");
+    }
+  } catch (error) {
+    console.error("JWT verification failed:", error);
+    throw createError({
+      statusCode: 401,
+      message: "Invalid or expired authentication token",
+    });
+  }
+
+  // 2. Read comment ID from request body
+  const body = await readBody(event);
+  const { commentId } = body;
+
+  if (!commentId) {
+    throw createError({
+      statusCode: 400,
+      message: "Comment ID is required in the request body.",
+    });
+  }
+
+  // 3. Delete from database, ensuring the user owns the comment
+  try {
+    const result = await db.query(
+      `DELETE FROM chapter_comments
+       WHERE id = $1 AND user_ID = $2`,
+      [commentId, userID]
+    );
+
+    // Check if any row was actually deleted
+    if (result.rowCount === 0) {
+      // This happens if the comment doesn't exist OR the user doesn't own it.
+      // For security, we don't tell the user which one it is.
+      throw createError({
+        statusCode: 403, // Forbidden
+        message: "Comment not found or you do not have permission to delete it.",
+      });
+    }
+
+    return {
+      message: "Comment deleted successfully",
+    };
+  } catch (error: any) {
+    // Re-throw specific errors, otherwise throw a generic 500
+    if (error.statusCode) {
+      throw error;
+    }
+    console.error("Error deleting comment:", error);
+    throw createError({
+      statusCode: 500,
+      message: "An unexpected error occurred while deleting the comment.",
+    });
+  }
+});
diff --git a/server/api/manga/[mangaID]/[chapterID]/comments/index.post.ts b/server/api/manga/[mangaID]/[chapterID]/comments/index.post.ts
index ef43cbe..de6244c 100644
--- a/server/api/manga/[mangaID]/[chapterID]/comments/index.post.ts
+++ b/server/api/manga/[mangaID]/[chapterID]/comments/index.post.ts
@@ -1,13 +1,27 @@
-import jwt from 'jsonwebtoken';
+/**
+ * @summary Add a comment to a specific chapter of a manga.
+ * @description This endpoint allows users to add comments to a specific chapter of a manga. 
+ * It requires the user to be authenticated via a JWT token stored in a cookie named 'auth-token'. 
+ * The comment is associated with the user ID extracted from the token.
+ *
+ * @param {string} mangaID - Manga ID, extracted from the route parameters.
+ * @param {string} chapterID - Chapter ID, extracted from the route parameters.
+ *
+ * @body {{ comment: string }} - The comment to be added.
+ *
+ * @returns {200, { id: number, message: string }} - Returns an object containing the ID of the newly added comment and a success message.
+ */
+
+import jwt from "jsonwebtoken";
 
 export default defineEventHandler(async (event) => {
-  let manga_id = getRouterParam(event, 'mangaID') as string | undefined;
-  let chapter_id = getRouterParam(event, 'chapterID') as string | undefined;
-  
+  let manga_id = getRouterParam(event, "mangaID") as string | undefined;
+  let chapter_id = getRouterParam(event, "chapterID") as string | undefined;
+
   if (!manga_id || !chapter_id) {
     throw createError({
       statusCode: 400,
-      message: 'Manga ID and Chapter ID are required',
+      message: "Manga ID and Chapter ID are required",
     });
   }
 
@@ -17,26 +31,29 @@ export default defineEventHandler(async (event) => {
 
   // get user ID from JWT token
   let userID = "";
-  const token = getCookie(event, 'auth-token');
+  const token = getCookie(event, "auth-token");
   if (!token) {
     throw createError({
       statusCode: 401,
-      message: 'Authentication token is required',
+      message: "Authentication token is required",
     });
   }
 
   let decoded = null;
   try {
-    const JWT_SECRET = process.env.JWT_SECRET || "secretgoeshere,butthisshouldbechanged>:(";
+    const JWT_SECRET = process.env.JWT_SECRET;
+    if (!JWT_SECRET) {
+      throw new Error("Configuration Incomplete: JWT_SECRET is not set");
+    }
     decoded = jwt.verify(token, JWT_SECRET);
   } catch (error) {
-    console.error('JWT verification failed:', error);
+    console.error("JWT verification failed:", error);
     throw createError({
       statusCode: 401,
-      message: 'Invalid authentication token',
+      message: "Invalid authentication token",
     });
   }
-  
+
   if (typeof decoded === "object" && decoded !== null && "id" in decoded) {
     userID = (decoded as jwt.JwtPayload).id;
   } else {
@@ -49,7 +66,7 @@ export default defineEventHandler(async (event) => {
   if (!comment || !userID) {
     throw createError({
       statusCode: 400,
-      message: 'Comment and User ID are required',
+      message: "Comment and User ID are required",
     });
   }
 
@@ -67,12 +84,12 @@ export default defineEventHandler(async (event) => {
   if (result.rows.length === 0) {
     throw createError({
       statusCode: 500,
-      message: 'Failed to add comment',
+      message: "Failed to add comment",
     });
   }
 
   return {
     id: result.rows[0].id,
-    message: 'Comment added successfully'
-  }
-})
\ No newline at end of file
+    message: "Comment added successfully",
+  };
+});

From 968f91a208d37b2804a43aed26b5f3c4da18c2eb Mon Sep 17 00:00:00 2001
From: faralha <faralhaonly@gmail.com>
Date: Sun, 20 Jul 2025 21:47:32 +0700
Subject: [PATCH 07/14] feat: add comment deletion functionality with user
 authentication

---
 components/Comments/container.vue             | 83 +++++++++++++----
 pages/manga/[id]/index.vue                    |  2 +-
 public/assets/css/main.css                    |  4 +
 ...{index.delete.ts => [commentID].delete.ts} | 10 +-
 .../[mangaID]/comments/[commentID].delete.ts  | 93 +++++++++++++++++++
 5 files changed, 169 insertions(+), 23 deletions(-)
 rename server/api/manga/[mangaID]/[chapterID]/comments/{index.delete.ts => [commentID].delete.ts} (93%)
 create mode 100644 server/api/manga/[mangaID]/comments/[commentID].delete.ts

diff --git a/components/Comments/container.vue b/components/Comments/container.vue
index ad0c9d0..11733a1 100644
--- a/components/Comments/container.vue
+++ b/components/Comments/container.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="flex flex-col gap-2 bg-accented h-[20rem]">
+  <div class="flex flex-col gap-2 bg-accented h-[25rem]">
 
-    <!-- TEXTBOX -->
-    <div class="p-3 flex flex-col flex-shrink-0 w-full">
+    <!-- COMMENT INPUT -->
+    <div class="p-3 flex-shrink-0 w-full">
       <div v-if="isLoggedIn == true" class="flex flex-col w-full items-end gap-2">
         <UTextarea class="flex-1 w-full" v-model="newComment" placeholder="Add a comment..." />
         <UButton @click="submitComment">Submit</UButton>
@@ -13,23 +13,34 @@
       </div>
     </div>
 
+    <USeparator class="h-1 opacity-50 px-[2rem]" color="primary" />
 
-    <div v-if="pending">
-      <p>Loading comments...</p>
-    </div>
+    <!-- COMMENTS CONTAINER -->
+    <div class="overflow-y-auto flex-1">
+      <div v-if="pending">
+        <p>Loading comments...</p>
+      </div>
 
-    <!-- COMMENTS -->
-    <div v-else v-if="comments" v-for="data in comments" :key="data.id" class="p-3 flex items-start gap-2">
-      <UAvatar size="2xl" :src="data.user_avatar" />
-      <div class="flex flex-col">
-        <p class="text-sm text-current/80">@{{ data.username }}</p>
-        <p class="text-xs text-current/50 mb-1">{{ new Date(data.date_added).toLocaleDateString() }}</p>
-        <p>{{ data.comment }}</p>
+      <div v-else v-if="comments" v-for="data in comments" :key="data.id"
+        class="p-3 flex items-start justify-between gap-2">
+        <div class="flex items-start gap-2 flex-1">
+          <UAvatar size="2xl" :src="data.user_avatar" icon="i-lucide-circle-user-round"
+            class="outline outline-old-neutral-500 rounded-xl overflow-hidden" />
+          <div class="flex flex-col">
+            <p class="text-md text-current font-semibold">{{ data.username }}</p>
+            <p class="text-xs text-current/50 mb-1">{{ new Date(data.date_added).toLocaleDateString() }}</p>
+            <p>{{ data.comment }}</p>
+          </div>
+        </div>
+
+        <!-- Delete Button -->
+        <UButton v-if="user?.id === data.user_id.toString()" icon="i-lucide-trash" variant="ghost" color="neutral" size="sm"
+          @click="deleteComment(data.id)" />
       </div>
-    </div>
 
-    <div v-if="!comments || comments.length === 0" class="p-3 text-center text-current/50">
-      No comments yet. Be the first to comment!
+      <div v-if="!comments || comments.length === 0" class="p-3 text-center text-current/50">
+        No comments yet. Be the first to comment!
+      </div>
     </div>
   </div>
 </template>
@@ -39,6 +50,7 @@ import { useAuthStore } from '~/stores/auth';
 
 const authStore = useAuthStore();
 const isLoggedIn = computed(() => authStore.isLoggedIn);
+const user = computed(() => authStore.user);
 const isLoading = ref(false);
 const toast = useToast();
 const props = defineProps({
@@ -115,7 +127,7 @@ async function submitComment() {
     newComment.value = '';
     // Fetch updated comments
     await refresh();
-    
+
     toast.add({
       title: 'Success',
       description: 'Comment added successfully.',
@@ -134,6 +146,43 @@ async function submitComment() {
   }
 }
 
+// Delete Comment function
+async function deleteComment(commentId: number) {
+  if (!isLoggedIn.value) {
+    toast.add({
+      title: 'Error',
+      description: 'You must be logged in to delete comments.',
+      color: 'error',
+      duration: 3000
+    });
+    return;
+  }
+
+  try {
+    await $fetch(`/api/manga/${manga_id}/${chapter_id ? chapter_id + '/' : ''}comments/${commentId}`, {
+      method: 'DELETE'
+    });
+
+    // Refresh comments after deletion
+    await refresh();
+
+    toast.add({
+      title: 'Success',
+      description: 'Comment deleted successfully.',
+      color: 'success',
+      duration: 3000
+    });
+  } catch (error) {
+    console.error('Failed to delete comment:', error);
+    toast.add({
+      title: 'Error',
+      description: 'Failed to delete comment.',
+      color: 'error',
+      duration: 5000
+    });
+  }
+}
+
 onMounted(() => {
 })
 </script>
\ No newline at end of file
diff --git a/pages/manga/[id]/index.vue b/pages/manga/[id]/index.vue
index 875c451..cfcf7da 100644
--- a/pages/manga/[id]/index.vue
+++ b/pages/manga/[id]/index.vue
@@ -117,7 +117,7 @@
 
     <!-- COMMENTS -->
     <p class="text-xl font-semibold mt-5">Comments</p>
-    <div class="max-h-[20rem] overflow-y-scroll rounded-md">
+    <div class="rounded-md">
       <CommentsContainer :manga_id="manga_id" />
     </div>
   </div>
diff --git a/public/assets/css/main.css b/public/assets/css/main.css
index 5a81c91..5a5db65 100644
--- a/public/assets/css/main.css
+++ b/public/assets/css/main.css
@@ -1,6 +1,10 @@
 @import "tailwindcss";
 @import "@nuxt/ui";
 
+.bg-accented {
+  @apply dark:bg-zinc-800
+}
+
 .container {
   width: 100%; /* Default 100% lebar */
   padding-left: 15px; /* Padding default untuk mobile */
diff --git a/server/api/manga/[mangaID]/[chapterID]/comments/index.delete.ts b/server/api/manga/[mangaID]/[chapterID]/comments/[commentID].delete.ts
similarity index 93%
rename from server/api/manga/[mangaID]/[chapterID]/comments/index.delete.ts
rename to server/api/manga/[mangaID]/[chapterID]/comments/[commentID].delete.ts
index 0bde396..c6a5a88 100644
--- a/server/api/manga/[mangaID]/[chapterID]/comments/index.delete.ts
+++ b/server/api/manga/[mangaID]/[chapterID]/comments/[commentID].delete.ts
@@ -3,6 +3,7 @@
  * @description Deletes a specific comment. This endpoint requires the user to be authenticated.
  * A user can only delete their own comments.
  *
+ * @param {string} commentID - The ID of the comment to delete.
  * @param {string} mangaID - The ID of the manga (used for URL structure, not in logic).
  * @param {string} chapterID - The ID of the chapter (used for URL structure, not in logic).
  *
@@ -48,11 +49,10 @@ export default defineEventHandler(async (event) => {
     });
   }
 
-  // 2. Read comment ID from request body
-  const body = await readBody(event);
-  const { commentId } = body;
+  // 2. Read comment ID from params
+  let commentID = getRouterParam(event, 'commentID')
 
-  if (!commentId) {
+  if (!commentID) {
     throw createError({
       statusCode: 400,
       message: "Comment ID is required in the request body.",
@@ -64,7 +64,7 @@ export default defineEventHandler(async (event) => {
     const result = await db.query(
       `DELETE FROM chapter_comments
        WHERE id = $1 AND user_ID = $2`,
-      [commentId, userID]
+      [commentID, userID]
     );
 
     // Check if any row was actually deleted
diff --git a/server/api/manga/[mangaID]/comments/[commentID].delete.ts b/server/api/manga/[mangaID]/comments/[commentID].delete.ts
new file mode 100644
index 0000000..360963e
--- /dev/null
+++ b/server/api/manga/[mangaID]/comments/[commentID].delete.ts
@@ -0,0 +1,93 @@
+/**
+ * @summary Delete a user's comment.
+ * @description Deletes a specific comment. This endpoint requires the user to be authenticated.
+ * A user can only delete their own comments.
+ *
+ * @param {string} commentID - The ID of the comment to delete.
+ * @param {string} mangaID - The ID of the manga (used for URL structure, not in logic).
+ *
+ * @body {{ commentId: number }} - The request body must be a JSON object containing the ID of the comment to be deleted.
+ *
+ * @returns {200, { message: string }} - On success, returns a confirmation message.
+ * @returns {400} - If the commentId is missing from the request body.
+ * @returns {401} - If the user is not authenticated or the token is invalid.
+ * @returns {403} - If the user tries to delete a comment that does not exist or does not belong to them.
+ * @returns {500} - For any other server-side errors.
+ */
+
+import jwt from "jsonwebtoken";
+import { db } from "~/server/utils/db";
+
+export default defineEventHandler(async (event) => {
+  // 1. Get User ID from JWT token (Authentication)
+  const token = getCookie(event, "auth-token");
+  if (!token) {
+    throw createError({
+      statusCode: 401,
+      message: "Authentication token is required",
+    });
+  }
+
+  let userID: string;
+  try {
+    const JWT_SECRET = process.env.JWT_SECRET;
+    if (!JWT_SECRET) {
+      throw new Error("Server configuration error: JWT_SECRET is not set.");
+    }
+    const decoded = jwt.verify(token, JWT_SECRET);
+    if (typeof decoded === "object" && decoded !== null && "id" in decoded) {
+      userID = (decoded as jwt.JwtPayload).id;
+    } else {
+      throw new Error("Invalid token payload.");
+    }
+  } catch (error) {
+    console.error("JWT verification failed:", error);
+    throw createError({
+      statusCode: 401,
+      message: "Invalid or expired authentication token",
+    });
+  }
+
+  // 2. Read comment ID from params
+  let commentID = getRouterParam(event, 'commentID')
+
+  if (!commentID) {
+    throw createError({
+      statusCode: 400,
+      message: "Comment ID is required in the request body.",
+    });
+  }
+
+  // 3. Delete from database, ensuring the user owns the comment
+  try {
+    const result = await db.query(
+      `DELETE FROM manga_comments
+       WHERE id = $1 AND user_ID = $2`,
+      [commentID, userID]
+    );
+
+    // Check if any row was actually deleted
+    if (result.rowCount === 0) {
+      // This happens if the comment doesn't exist OR the user doesn't own it.
+      // For security, we don't tell the user which one it is.
+      throw createError({
+        statusCode: 403, // Forbidden
+        message: "Comment not found or you do not have permission to delete it.",
+      });
+    }
+
+    return {
+      message: "Comment deleted successfully",
+    };
+  } catch (error: any) {
+    // Re-throw specific errors, otherwise throw a generic 500
+    if (error.statusCode) {
+      throw error;
+    }
+    console.error("Error deleting comment:", error);
+    throw createError({
+      statusCode: 500,
+      message: "An unexpected error occurred while deleting the comment.",
+    });
+  }
+});

From 561a175e98f2b62fe444c0dce70c084f0e2463d1 Mon Sep 17 00:00:00 2001
From: faralha <faralhaonly@gmail.com>
Date: Mon, 21 Jul 2025 11:08:48 +0700
Subject: [PATCH 08/14] fix: update editmanga and addchapter get following
 types/api response changes

---
 pages/admin/addChapter.vue     |  29 +++------
 pages/admin/editManga/[id].vue | 112 +++++++++++++++++----------------
 pages/admin/index.vue          |   2 +-
 server/api/manga/index.get.ts  |  20 +++++-
 4 files changed, 85 insertions(+), 78 deletions(-)

diff --git a/pages/admin/addChapter.vue b/pages/admin/addChapter.vue
index 8826681..df92ba9 100644
--- a/pages/admin/addChapter.vue
+++ b/pages/admin/addChapter.vue
@@ -5,7 +5,7 @@
       <UForm :state="state" class="flex flex-col w-full mt-5 gap-5">
 
         <div class="flex flex-row w-full gap-5">
-          <NuxtImg class="w-[12rem] h-auto" :src="mangaDetails?.cover" />
+          <NuxtImg class="w-[12rem] h-auto" :src="mangaDetails?.manga_cover" />
 
           <div class="flex flex-col gap-2 justify-end w-full">
             <h1 class="font-bold text-2xl">Add Chapter</h1>
@@ -72,6 +72,7 @@
 
 <script setup lang="ts">
 import imageCompression from 'browser-image-compression';
+import type { Chapter, Manga } from '~/types/manga';
 
 const toast = useToast();
 const route = useRoute();
@@ -98,20 +99,7 @@ interface MangaList {
   value: number;
 }
 
-interface Chapter {
-  id: number;
-  name: string;
-  number: number;
-  date_added: Date;
-}
-
-interface MangaDetails {
-  id: number;
-  title: string;
-  original_title: string;
-  cover: string;
-  chapters: Chapter[];
-}
+interface MangaDetails extends Manga {}
 
 // Fetch manga details for selected manga clarity
 let mangaDetails = ref<MangaDetails | null>(null);
@@ -126,7 +114,9 @@ async function fetchMangaDetails(manga_id: string) {
       }
     });
     mangaDetails.value = response;
-    latestChapterNumber.value = response.chapters.length > 0 ? response.chapters[response.chapters.length - 1].number : 0;
+    latestChapterNumber.value = response.manga_chapters?.length && response.manga_chapters.length > 0
+      ? response.manga_chapters[response.manga_chapters.length - 1].chapter_id
+      : 0;
     state.chapterID = latestChapterNumber.value + 1; // chapterID = latest++
     return response;
   } catch (error) {
@@ -145,7 +135,6 @@ async function fetchMangaDetails(manga_id: string) {
 // Fetch all manga for the dropdown menu
 
 const mangaList = ref<MangaList[]>([]);
-const mangaValue = ref<MangaList>();
 async function fetchAllManga() {
   try {
     isLoading.value = true;
@@ -158,9 +147,9 @@ async function fetchAllManga() {
     let mangaListRaw = ref<MangaDetails[]>([]);
     mangaListRaw.value = response;
     mangaList.value = mangaListRaw.value.map(manga => ({
-      id: manga.id,
-      label: manga.title,
-      value: manga.id
+      id: manga.manga_id,
+      label: manga.manga_title,
+      value: manga.manga_id
     }));
 
     // Assign default manga dropdown state if mangaID is provided
diff --git a/pages/admin/editManga/[id].vue b/pages/admin/editManga/[id].vue
index 528e24e..96743a6 100644
--- a/pages/admin/editManga/[id].vue
+++ b/pages/admin/editManga/[id].vue
@@ -1,11 +1,13 @@
 <template>
   <div class="container">
     <div class="flex gap-4 h-[15rem]">
+      <!-- Preview image logic remains the same -->
       <NuxtImg :src="state.coverPreview || (typeof state.cover === 'string' ? state.cover : undefined)"
         class="w-auto" />
       <div>
         <h1 class="text-md">Edit Title:</h1>
-        <h1 class="font-bold text-3xl">{{ state.title }}</h1>
+        <!-- Bind to the new state property -->
+        <h1 class="font-bold text-3xl">{{ state.manga_title }}</h1>
       </div>
     </div>
 
@@ -14,47 +16,48 @@
       <UForm :state="state" class="flex flex-col w-full mt-5 gap-5" @submit="onSubmit">
 
         <div class="flex flex-row gap-5">
-          <UFormField class="w-full" label="Title" name="title">
-            <UInput placeholder="My Food Looks very Cute" class="w-full" v-model="state.title" />
+          <!-- Bind UFormField and UInput to the new state properties -->
+          <UFormField class="w-full" label="Title" name="manga_title">
+            <UInput placeholder="My Food Looks very Cute" class="w-full" v-model="state.manga_title" />
           </UFormField>
 
-          <UFormField class="w-full" label="Original Title" name="original_title">
-            <UInput placeholder="我的食物看起来很可爱" class="w-full" v-model="state.original_title" />
+          <UFormField class="w-full" label="Original Title" name="manga_original_title">
+            <UInput placeholder="我的食物看起来很可爱" class="w-full" v-model="state.manga_original_title" />
           </UFormField>
         </div>
 
-        <UFormField label="Description" name="description">
+        <UFormField label="Description" name="manga_description">
           <UTextarea placeholder="Tentang Maria, Vampir yang dibangunkan..." class="w-full"
-            v-model="state.description" />
+            v-model="state.manga_description" />
         </UFormField>
 
-        <!-- Cover Image Upload -->
+        <!-- Cover Image Upload logic remains the same -->
         <UFormField label="Cover Image" name="cover">
           <UInput type="file" accept="image/*" @change="handleFileUpload" class="w-full" />
-          <!-- Preview -->
           <div v-if="state.coverPreview" class="mt-2">
             <img :src="state.coverPreview" alt="Cover preview" class="w-32 h-48 object-cover rounded" />
           </div>
         </UFormField>
 
         <div class="flex flex-row gap-5">
-          <UFormField class="w-full" label="Author" name="author">
-            <UInput placeholder="Xi Luangbo" class="w-full" v-model="state.author" />
+          <!-- Bind UFormField and UInput to the new state properties -->
+          <UFormField class="w-full" label="Author" name="manga_author">
+            <UInput placeholder="Xi Luangbo" class="w-full" v-model="state.manga_author" />
           </UFormField>
 
-          <UFormField class="w-full" label="Ratings" name="ratings">
-            <UInput type="number" min="0" max="10" step="0.1" class="w-full" v-model.number="state.ratings"
+          <UFormField class="w-full" label="Ratings" name="manga_ratings">
+            <UInput type="number" min="0" max="10" step="0.1" class="w-full" v-model.number="state.manga_ratings"
               placeholder="8.5" />
           </UFormField>
 
-          <UFormField class="w-full" label="Genre" name="genre">
+          <UFormField class="w-full" label="Genre" name="manga_genres">
             <UInput class="w-full" placeholder="Slice of life, romance, yuri, monster girls, vampire"
-              v-model="state.genre" />
+              v-model="state.manga_genres" />
           </UFormField>
         </div>
 
         <div class="flex">
-          <UButton loading-auto type="submit" class="mt-4 flex">Commit Changes</UButton>
+          <UButton :loading="isLoading" type="submit" class="mt-4 flex">Commit Changes</UButton>
         </div>
       </UForm>
     </div>
@@ -62,45 +65,45 @@
 </template>
 
 <script setup lang="ts">
+// Import the central Manga type
+import type { Manga } from '~/types/manga';
+
 const routeId = useRoute().params.id;
 const manga_id = Array.isArray(routeId) ? Number(routeId[0]) : Number(routeId);
 const isLoading = ref(false);
 const toast = useToast();
+
+// Update state properties to match the Manga type
 const state = reactive({
-  title: '',
-  original_title: '',
-  description: '',
-  author: '',
-  cover: null as File | null,
-  coverPreview: '' as string,
-  ratings: 8,
-  genre: '',
-})
+  manga_title: '',
+  manga_original_title: '',
+  manga_description: '',
+  manga_author: '',
+  cover: null as File | null, // For file upload
+  coverPreview: '' as string, // For image preview
+  manga_ratings: 8,
+  manga_genres: '', // Genres as a comma-separated string for the input field
+});
 
 // Fetch existing manga data
 if (manga_id) {
-  interface MangaDetails {
-    title: string;
-    original_title: string;
-    description: string;
-    author: string;
-    ratings: number;
-    genre: string[];
-    cover: string;
-  }
-
+  // Use the imported Manga type for the fetch
   const { data: mangaData } = await useAsyncData('manga-details', () =>
-    $fetch<MangaDetails>(`/api/manga/${manga_id}`)
+    $fetch<Manga>(`/api/manga/${manga_id}`)
   );
 
+  // Populate state using the new property names from the API response
   if (mangaData.value) {
-    state.title = mangaData.value.title;
-    state.original_title = mangaData.value.original_title;
-    state.description = mangaData.value.description;
-    state.author = mangaData.value.author;
-    state.ratings = mangaData.value.ratings;
-    state.genre = mangaData.value.genre.join(', ');
-    state.coverPreview = mangaData.value.cover;
+    state.manga_title = mangaData.value.manga_title;
+    state.manga_original_title = mangaData.value.manga_original_title;
+    state.manga_description = mangaData.value.manga_description;
+    state.manga_author = mangaData.value.manga_author;
+    state.manga_ratings = mangaData.value.manga_ratings;
+    // The API returns an array of objects, so we map and join them for the input field
+    if (mangaData.value.manga_genres) {
+      state.manga_genres = mangaData.value.manga_genres.map(g => g.genre_name).join(', ');
+    }
+    state.coverPreview = mangaData.value.manga_cover;
   }
 }
 
@@ -110,8 +113,6 @@ const handleFileUpload = (event: Event) => {
 
   if (file) {
     state.cover = file;
-
-    // Create preview
     const reader = new FileReader();
     reader.onload = (e) => {
       state.coverPreview = e.target?.result as string;
@@ -124,12 +125,13 @@ const onSubmit = async () => {
   try {
     isLoading.value = true;
     const formData = new FormData();
-    formData.append('title', state.title);
-    formData.append('original_title', state.original_title);
-    formData.append('description', state.description);
-    formData.append('author', state.author);
-    formData.append('genre', state.genre);
-    formData.append('ratings', state.ratings.toString());
+    // Append data to FormData using the new property names
+    formData.append('title', state.manga_title);
+    formData.append('original_title', state.manga_original_title);
+    formData.append('description', state.manga_description);
+    formData.append('author', state.manga_author);
+    formData.append('genre', state.manga_genres);
+    formData.append('ratings', state.manga_ratings.toString());
 
     if (state.cover) {
       formData.append('cover', state.cover);
@@ -146,20 +148,20 @@ const onSubmit = async () => {
       body: formData,
     });
 
-    console.log('Manga added successfully:', response);
     toast.add({
       title: 'Success',
-      description: 'Manga added successfully!',
+      description: 'Manga updated successfully!',
       color: 'success',
       duration: 5000
     });
 
     await navigateTo(`/manga/${response.data.mangaId}`)
   } catch (error) {
-    console.error('Error adding manga:', error);
+    console.error('Error updating manga:', error);
+    const fetchError = error as { data?: { statusMessage?: string } };
     toast.add({
       title: 'Error',
-      description: 'Failed to add manga. Please try again.',
+      description: fetchError.data?.statusMessage || 'Failed to update manga. Please try again.',
       color: 'error',
       duration: 5000
     });
diff --git a/pages/admin/index.vue b/pages/admin/index.vue
index a1c11e7..6e88af4 100644
--- a/pages/admin/index.vue
+++ b/pages/admin/index.vue
@@ -70,7 +70,7 @@ interface MangaLatestChapter {
 // PERUBAHAN: Ambil 'refresh' dari useAsyncData untuk memperbarui tabel
 const { data, pending, error, refresh } = await useAsyncData<MangaLatestChapter[]>(
   'latestMangaChapters',
-  () => $fetch('/api/manga/latest-chapters')
+  () => $fetch('/api/manga')
 );
 
 const columnFilters = ref([
diff --git a/server/api/manga/index.get.ts b/server/api/manga/index.get.ts
index 1ef4326..155b492 100644
--- a/server/api/manga/index.get.ts
+++ b/server/api/manga/index.get.ts
@@ -19,7 +19,15 @@ export default defineEventHandler(async (event) => {
       FROM manga
       LIMIT 30`
     );
-    manga = result.rows;
+    manga = result.rows.map((m) => ({
+      manga_id: m.id,
+      manga_title: m.title,
+      manga_original_title: m.original_title,
+      manga_description: m.description,
+      manga_author: m.author,
+      manga_cover: m.cover,
+      manga_ratings: m.ratings,
+    }));
     return manga;
   }
   // Retrieve manga by ID
@@ -37,7 +45,15 @@ export default defineEventHandler(async (event) => {
         message: "Manga not found",
       });
     }
-    manga = result.rows;
+    manga = result.rows.map((m) => ({
+      manga_id: m.id,
+      manga_title: m.title,
+      manga_original_title: m.original_title,
+      manga_description: m.description,
+      manga_author: m.author,
+      manga_cover: m.cover,
+      manga_ratings: m.ratings,
+    }));
     return manga[0];
   } else if (title && title != "undefined") {
     const result = await db.query(

From f4119f59a15cdcec6b359ad6209dba46af25785e Mon Sep 17 00:00:00 2001
From: faralha <faralhaonly@gmail.com>
Date: Mon, 21 Jul 2025 11:24:17 +0700
Subject: [PATCH 09/14] fix: correct description of the project as a successor
 and update comments section in README

---
 README.md | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 6c39dfb..caaab83 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 
 # Monolithic
 
-A Fullstack manga reading website, full with features. A Predecessor to [alterkai-website](https://github.com/Alterkai/alterkai-website), hence why it's called Alterkai v2 (Codename: Monolithic). Powered by Nuxt 3, PostgreSQL, and Redis.
+A Fullstack manga reading website, full with features. A Successor to [alterkai-website](https://github.com/Alterkai/alterkai-website), hence why it's called Alterkai v2 (Codename: Monolithic). Powered by Nuxt 3, PostgreSQL, and Redis.
 
 ## Development
 
@@ -59,11 +59,15 @@ Start the server
 - Azure Blob Storage as CDN/Image storage
 - Manga and Chapter view trackers using Redis + PgSQL
 - Daily Highlights for home (random title, reset daily)
+- Comments (Basics)
 
 ### Yet to be implemented
-- Comments [Soon]
+- Local History (UI Implementation of Lastread) [Soon]
 - Tasks Assignment for Scanlation Staff [Soon]
 - Salary Tracking for Scanlation Staff [Soon]
+- Popularity Algorithm [Soon]
+- SQL seeds [Soon]
+
 ## Authors
 
 - [@faralha](https://www.github.com/faralha)

From b310aded7711288673508779c3b3ec610c0f22ec Mon Sep 17 00:00:00 2001
From: faralha <faralhaonly@gmail.com>
Date: Mon, 21 Jul 2025 11:24:17 +0700
Subject: [PATCH 10/14] fix: correct description of the project as a successor
 and update comments section in README

---
 README.md | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 6c39dfb..2a844f2 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 
 # Monolithic
 
-A Fullstack manga reading website, full with features. A Predecessor to [alterkai-website](https://github.com/Alterkai/alterkai-website), hence why it's called Alterkai v2 (Codename: Monolithic). Powered by Nuxt 3, PostgreSQL, and Redis.
+A Fullstack manga reading website, full with features. A Successor to [alterkai-website](https://github.com/Alterkai/alterkai-website), hence why it's called Alterkai v2 (Codename: Monolithic). Powered by Nuxt 3, PostgreSQL, and Redis.
 
 ## Development
 
@@ -23,6 +23,10 @@ Install dependencies
   npm install
 ```
 
+Install [Redis v7.0](https://redis.io/downloads/). This code uses Redis v7.0.5.
+
+Install [Postgres v16](https://www.postgresql.org/download/). Make sure to install the same version, as different version is untested and may broke the Website.
+
 Configure .env (or copy from .env.example)
 ```env
 DB_USER = 
@@ -59,11 +63,16 @@ Start the server
 - Azure Blob Storage as CDN/Image storage
 - Manga and Chapter view trackers using Redis + PgSQL
 - Daily Highlights for home (random title, reset daily)
+- Comments (Basics)
 
 ### Yet to be implemented
-- Comments [Soon]
+- Switching image CDN [Soon]
+- Local History (UI Implementation of Lastread) [Soon]
 - Tasks Assignment for Scanlation Staff [Soon]
 - Salary Tracking for Scanlation Staff [Soon]
+- Popularity Algorithm [Soon]
+- SQL seeds [Soon]
+
 ## Authors
 
 - [@faralha](https://www.github.com/faralha)

From 043ac44281f4b2749c3d5e2a9f9008085f778b85 Mon Sep 17 00:00:00 2001
From: faralha <faralhaonly@gmail.com>
Date: Mon, 21 Jul 2025 22:33:22 +0700
Subject: [PATCH 11/14] feat: readme fix and chapter navigation enhancement

---
 README.md                                |  8 +++++-
 pages/manga/[id]/chapter/[chapterID].vue | 36 +++++++++++++++++++++---
 2 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 10b651a..2286586 100644
--- a/README.md
+++ b/README.md
@@ -64,14 +64,20 @@ Start the server
 - Manga and Chapter view trackers using Redis + PgSQL
 - Daily Highlights for home (random title, reset daily)
 - Comments (Basics)
+- Comments (Basics)
 
 ### Yet to be implemented
-- Comments [Soon]
+- Switching image CDN [Soon]
+- Local History (UI Implementation of Lastread) [Soon]
+- Local History (UI Implementation of Lastread) [Soon]
 - Tasks Assignment for Scanlation Staff [Soon]
 - Salary Tracking for Scanlation Staff [Soon]
 - Popularity Algorithm [Soon]
 - SQL seeds [Soon]
 
+- Popularity Algorithm [Soon]
+- SQL seeds [Soon]
+
 ## Authors
 
 - [@faralha](https://www.github.com/faralha)
diff --git a/pages/manga/[id]/chapter/[chapterID].vue b/pages/manga/[id]/chapter/[chapterID].vue
index 75088e5..deab116 100644
--- a/pages/manga/[id]/chapter/[chapterID].vue
+++ b/pages/manga/[id]/chapter/[chapterID].vue
@@ -15,7 +15,8 @@
       <div class="my-4">
         <NuxtLink class="text-2xl font-bold" :to="`/manga/${mangaID}`">{{ chapterData.title }}</NuxtLink>
         <p class="text-sm font-current/60">{{ `Chapter ${parseInt(chapterData.chapter.toString())}` }}</p>
-        <UButton class="mt-2" variant="subtle" @click="userPreferenceStore.toggleViewMode()">{{ userPreferenceStore.getViewMode ? "Horizontal View" :
+        <UButton class="mt-2" variant="subtle" @click="userPreferenceStore.toggleViewMode()">{{
+          userPreferenceStore.getViewMode ? "Horizontal View" :
           "Vertical View"}}</UButton>
       </div>
 
@@ -25,21 +26,48 @@
         <ViewerHorizontal v-else :data="chapterData.images" />
       </div>
 
+      <!-- Navigation Button at the Bottom -->
+      <div class="flex max-md:flex-col min-lg:flex-row gap-2 mt-4">
+
+        <NuxtLink v-if="chapterData.prevChapter"
+          class="p-2 py-4 outline outline-zinc-500 rounded-sm flex gap-2 items-center justify-end min-md:w-full min-md:flex-row-reverse"
+          :to="`/manga/${mangaID}/chapter/${parseInt(chapterData.prevChapter.toString())}`">
+          <p class="font-semibold">Prev Chapter</p>
+          <UIcon name="i-lucide-arrow-left" class="size-5" />
+        </NuxtLink>
+
+        <NuxtLink v-else
+          class="p-2 py-4 outline outline-zinc-500 rounded-sm flex gap-2 items-center justify-end min-md:w-full min-md:flex-row-reverse"
+          :to="`/manga/${mangaID}`">
+          <p class="font-semibold">Manga Details</p>
+          <UIcon name="i-lucide-arrow-left" class="size-5" />
+        </NuxtLink>
+
+        <NuxtLink v-if="chapterData.nextChapter"
+          class="p-2 py-4 outline outline-zinc-500 rounded-sm flex gap-2 items-center justify-end min-md:w-full"
+          :to="`/manga/${mangaID}/chapter/${parseInt(chapterData.nextChapter.toString())}`">
+          <p class="font-semibold">Next Chapter</p>
+          <UIcon name="i-lucide-arrow-right" class="size-5" />
+        </NuxtLink>
+      </div>
+
       <div class="mt-5">
         <h2 class="text-xl font-semibold mb-3">Comments</h2>
         <CommentsContainer :manga_id="mangaID" :chapter_id="parseInt(chapterID)" />
       </div>
 
-      <!-- Navigation Button -->
+      <!-- Navigation Button Popup -->
       <Transition name="fade">
         <div v-show="isNavVisible" class="fixed bottom-5 right-5 z-50 flex gap-2">
           <!-- Tombol Previous Chapter (hanya muncul jika ada) -->
-          <NuxtLink v-if="chapterData.prevChapter" :to="`/manga/${mangaID}/chapter/${parseInt(chapterData.prevChapter.toString())}`">
+          <NuxtLink v-if="chapterData.prevChapter"
+            :to="`/manga/${mangaID}/chapter/${parseInt(chapterData.prevChapter.toString())}`">
             <UButton variant="subtle" color="neutral" icon="i-lucide-arrow-left" size="lg" />
           </NuxtLink>
 
           <!-- Tombol Next Chapter (hanya muncul jika ada) -->
-          <NuxtLink v-if="chapterData.nextChapter" :to="`/manga/${mangaID}/chapter/${parseInt(chapterData.nextChapter.toString())}`">
+          <NuxtLink v-if="chapterData.nextChapter"
+            :to="`/manga/${mangaID}/chapter/${parseInt(chapterData.nextChapter.toString())}`">
             <UButton variant="subtle" color="neutral" icon="i-lucide-arrow-right" size="lg" />
           </NuxtLink>
         </div>

From c093a25240023786c04bbd96856fb46c3df5de2a Mon Sep 17 00:00:00 2001
From: faralha <faralhaonly@gmail.com>
Date: Tue, 22 Jul 2025 11:32:53 +0700
Subject: [PATCH 12/14] feat: image placeholder for manga details and chapter
 viewer

---
 components/Mangacard/home.vue            |  4 ++--
 components/Viewer/horizontal.vue         | 23 +++++++++++++++----
 pages/manga/[id]/chapter/[chapterID].vue |  2 +-
 pages/manga/[id]/index.vue               | 28 ++++++++++++++++++++----
 4 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/components/Mangacard/home.vue b/components/Mangacard/home.vue
index e8f065a..e748060 100644
--- a/components/Mangacard/home.vue
+++ b/components/Mangacard/home.vue
@@ -9,8 +9,8 @@
       </div>
 
       <!-- Manga Cover Image -->
-      <NuxtImg :src="data.manga_cover" placeholder="/images/covers/65601c12-d40a-441e-920a-300ae87a2448.jpg"
-        class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" alt="Manga Cover" />
+      <NuxtImg :src="data.manga_cover"
+        class="min-w-[500px] w-full min-h-[800px] h-full object-cover transition-transform duration-300 group-hover:scale-105" alt="Manga Cover" />
 
       <!-- Title Overlay -->
       <div
diff --git a/components/Viewer/horizontal.vue b/components/Viewer/horizontal.vue
index 7e2b148..ba63ae2 100644
--- a/components/Viewer/horizontal.vue
+++ b/components/Viewer/horizontal.vue
@@ -1,10 +1,10 @@
 <template>
-  <div v-if="data && data.length > 0" class="w-full flex flex-col items-center gap-4">
+  <div v-if="data && data.length > 0" class="w-full flex flex-col items-center gap-4 h-screen">
     <!-- Main Viewer Area -->
-    <div class="relative w-full max-w-4xl select-none">
+    <div class="relative w-full max-w-4xl flex-1 overflow-hidden select-none">
       <!-- Display the current image -->
-      <NuxtImg v-if="currentImage" :key="currentImage.id" :src="currentImage.link" class="w-full h-auto rounded-md"
-        preload :alt="`Image ${currentImage.order}`" />
+      <NuxtImg v-if="currentImage" :key="currentImage.id" :src="imageSource" class="w-full h-full object-contain rounded-md"
+        preload :alt="`Image ${currentImage.order}`" @error="handleImageError" :placeholder="'https://placehold.co/500x800/27272a/404040?text=Loading...'" />
 
       <!-- Clickable Navigation Overlays -->
       <div class="absolute top-0 left-0 h-full w-1/2 cursor-pointer" title="Previous Page" @click="previousImage"></div>
@@ -47,6 +47,21 @@ const currentIndex = ref(0);
 // Computed property to get the current image object
 const currentImage = computed(() => props.data[currentIndex.value]);
 
+// Handle image loading errors
+const imageHasError = ref(false);
+const imageSource = computed(() => {
+  if (imageHasError.value || !currentImage.value) {
+    return 'https://placehold.co/500x800/27272a/404040?text=Image+Not+Available';
+  }
+  return currentImage.value.link;
+});
+const handleImageError = () => {
+  imageHasError.value = true;
+};
+watch(currentImage, () => {
+  imageHasError.value = false; // Reset error state when changing images
+})
+
 // Computed properties to check if we are at the beginning or end
 const isFirstPage = computed(() => currentIndex.value === 0);
 const isLastPage = computed(() => currentIndex.value === props.data.length - 1);
diff --git a/pages/manga/[id]/chapter/[chapterID].vue b/pages/manga/[id]/chapter/[chapterID].vue
index deab116..c9687bf 100644
--- a/pages/manga/[id]/chapter/[chapterID].vue
+++ b/pages/manga/[id]/chapter/[chapterID].vue
@@ -23,7 +23,7 @@
       <!-- Render Images -->
       <div class="flex flex-col items-center">
         <ViewerVertical v-if="userPreferenceStore.getViewMode" :data="chapterData.images" />
-        <ViewerHorizontal v-else :data="chapterData.images" />
+        <ViewerHorizontal v-else :data="chapterData.images" class="max-h-screen overflow-clip" />
       </div>
 
       <!-- Navigation Button at the Bottom -->
diff --git a/pages/manga/[id]/index.vue b/pages/manga/[id]/index.vue
index cfcf7da..764d750 100644
--- a/pages/manga/[id]/index.vue
+++ b/pages/manga/[id]/index.vue
@@ -24,7 +24,8 @@
     </div>
     <div v-else-if="mangaDetails" class="flex w-full flex-col min-md:flex-row gap-5">
       <!-- Cover -->
-      <NuxtImg :src="mangaDetails.manga_cover" class="min-md:h-[20rem]" style="width: auto" />
+      <NuxtImg :src="imageSource" :placeholder="'https://placehold.co/500x800/27272a/404040?text=Loading...'"
+        @error="handleImageError" class="min-md:h-[20rem]" style="width: auto" />
       <!-- Content -->
       <div class="flex w-full flex-col gap-2">
         <h1 class="font-bold text-3xl">{{ mangaDetails.manga_title }}</h1>
@@ -53,7 +54,8 @@
 
         <!-- ACTION BUTTONS -->
         <div class="flex flex-row gap-2 mt-2">
-          <UButton color="primary" @click="navigateTo(`/manga/${manga_id}/chapter/${readNow}`)" icon="i-lucide-book-open" size="xl">
+          <UButton color="primary" @click="navigateTo(`/manga/${manga_id}/chapter/${readNow}`)"
+            icon="i-lucide-book-open" size="xl">
             Read
           </UButton>
 
@@ -62,7 +64,8 @@
               icon="i-lucide-book-marked" size="xl">
               Bookmark
             </UButton>
-            <UButton v-else color="secondary" @click="removeBookmark()" variant="soft" icon="i-lucide-book-marked" size="xl">
+            <UButton v-else color="secondary" @click="removeBookmark()" variant="soft" icon="i-lucide-book-marked"
+              size="xl">
               Saved
             </UButton>
 
@@ -81,7 +84,8 @@
         <!-- GENRES -->
         <div class="h-auto gap-y-2 flex flex-row flex-wrap mt-4 min-xl:max-w-[70%]">
           <span v-for="genre in mangaDetails.manga_genres" class="p-1 h-auto font-semibold text-sm">
-            <span v-if="genre.genre_name == 'yuri' || genre.genre_name == 'smut'" class="bg-primary p-1 px-1.5 rounded-sm text-white">{{
+            <span v-if="genre.genre_name == 'yuri' || genre.genre_name == 'smut'"
+              class="bg-primary p-1 px-1.5 rounded-sm text-white">{{
               capitalizeEachWord(genre.genre_name) }}</span>
             <span v-else class="p-1 px-1.5 outline outline-current rounded-sm">{{ capitalizeEachWord(genre.genre_name)
               }}</span>
@@ -154,6 +158,22 @@ interface MangaViewsResponse {
   total_views: number;
 }
 
+// Handle cover manga placeholder
+const imageHasError = ref(false);
+const imageSource = computed(() => {
+  if (imageHasError.value || !mangaDetails.value?.manga_cover) {
+    return 'https://placehold.co/500x800/27272a/404040?text=Image+Not+Available';
+  }
+  return mangaDetails.value.manga_cover;
+});
+const handleImageError = () => {
+  imageHasError.value = true;
+};
+watch(() => manga_id, () => {
+  imageHasError.value = false; // Reset error state when changing manga
+});
+
+
 // Fetch data using useAsyncData
 const { data, pending, error } = await useAsyncData<MangaFetchData>(async () => {
   const [mangaDetails, mangaViews] = await Promise.all([

From 18bda555a897f2da69ed91a4c0f1a5354311f946 Mon Sep 17 00:00:00 2001
From: faralha <faralhaonly@gmail.com>
Date: Tue, 22 Jul 2025 11:37:00 +0700
Subject: [PATCH 13/14] fix: mangacard home aspect ratio

---
 components/Mangacard/home.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Mangacard/home.vue b/components/Mangacard/home.vue
index e748060..c9bc27b 100644
--- a/components/Mangacard/home.vue
+++ b/components/Mangacard/home.vue
@@ -10,7 +10,7 @@
 
       <!-- Manga Cover Image -->
       <NuxtImg :src="data.manga_cover"
-        class="min-w-[500px] w-full min-h-[800px] h-full object-cover transition-transform duration-300 group-hover:scale-105" alt="Manga Cover" />
+        class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" alt="Manga Cover" />
 
       <!-- Title Overlay -->
       <div

From 75ca7f47172ecbaf6bcd43ec069e63227325042c Mon Sep 17 00:00:00 2001
From: faralha <faralhaonly@gmail.com>
Date: Tue, 22 Jul 2025 17:25:03 +0700
Subject: [PATCH 14/14] fix: search and footer

---
 components/navbar.vue | 14 +++++++-------
 layouts/default.vue   |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/components/navbar.vue b/components/navbar.vue
index d6ed653..d0d82b2 100644
--- a/components/navbar.vue
+++ b/components/navbar.vue
@@ -22,9 +22,9 @@
             <div v-if="search.length > 0" class="mt-2">
               <p class="text-sm text-gray-500">Search results for "{{ search }}"</p>
 
-              <div v-for="result in searchResults" class="cursor-pointer" :key="result.id" @click="handleMangaClick()">
-                <Searchmangacard :title="result.title" :description="result.description" :image="result.cover"
-                  :id="result.id" />
+              <div v-for="result in searchResults" class="cursor-pointer" :key="result.manga_id" @click="handleMangaClick()">
+                <Searchmangacard :title="result.manga_title" :description="result.manga_description" :image="result.manga_cover"
+                  :id="result.manga_id" />
               </div>
             </div>
           </div>
@@ -55,10 +55,10 @@ import type { DropdownMenuItem } from '@nuxt/ui';
 import { debounce } from '~/utils/debounce'
 
 interface SearchMangaResult {
-  title: string;
-  description: string;
-  cover: string;
-  id: number;
+  manga_title: string;
+  manga_description: string;
+  manga_cover: string;
+  manga_id: number;
 }
 
 // Color mode
diff --git a/layouts/default.vue b/layouts/default.vue
index b87762c..765eb37 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -37,7 +37,7 @@ const items = ref([
 
 
     <!-- FOOTER -->
-    <!-- <Footer v-if="showLayout" /> -->
+    <Footer class="mt-5" v-if="showLayout" />
 
   </div>
 </template>
\ No newline at end of file