Album list page

astro.config.mjs

@@ -48,7 +48,6 @@ export default defineConfig({
   output: 'server',
   adapter: node({ mode: 'standalone' }),
   redirects: {
-    '/album/list': { status: 307, destination: '/maintenance' },
     '/anim': { status: 307, destination: '/maintenance' },
     '/anim/[id]': { status: 307, destination: '/maintenance' },
     '/anim/list': { status: 307, destination: '/maintenance' },

src/components/Sidebar.astro

@@ -19,7 +19,6 @@ const listClass =
 ---
 
 <div class='md:w-3/12 md:max-w-[300px] h-full bg-dark flex flex-col'>
-  <a href='#' class={listClass}>{m.lastAddedSidebar()}</a>
   <a href='#' class={listClass}>{m.getLucky()}</a>
   <a href='#' class={listClass}>{m.randomPull()}</a>
   <div class='px-6 flex flex-col gap-y-3'>

src/components/albumList/letterSection.astro

@@ -0,0 +1,24 @@
+---
+import { AlbumStatus } from '@prisma/client'
+import prismaClient from 'utils/prisma-client'
+
+interface Props {
+  letter: string
+}
+
+const { letter } = Astro.props
+const albums = await prismaClient.albums.findMany({
+  where: { status: AlbumStatus.SHOW, title: { startsWith: letter } },
+  select: { id: true, title: true }
+})
+---
+
+<div class='flex flex-col gap-y-1'>
+  {
+    albums.map((a) => (
+      <a class='text-left' href={`/album/${a.id}`}>
+        {a.title}
+      </a>
+    ))
+  }
+</div>

src/pages/album/list/index.astro

@@ -0,0 +1,52 @@
+---
+import prismaClient from 'utils/prisma-client'
+import * as m from 'paraglide/messages'
+import { AlbumStatus } from '@prisma/client'
+
+import Sidebar from 'components/Sidebar.astro'
+import BaseLayout from 'layouts/base.astro'
+import AlbumBox from 'components/AlbumBox.astro'
+import LetterSection from 'components/albumList/letterSection.astro'
+
+const letters: { letter: string; count: BigInt }[] = await prismaClient.$queryRaw`
+    SELECT DISTINCT UPPER(LEFT(title, 1)) AS letter, COUNT(*) AS count
+    FROM albums
+    WHERE status = 'SHOW'
+    GROUP BY letter
+    ORDER BY letter;
+  `
+---
+
+<BaseLayout>
+  <div class='flex flex-col md:flex-row flex-1 max-w-[2000px]'>
+    <div class='flex-1 px-5 bg-dark'>
+      <div class='flex flex-wrap gap-4 justify-center my-3'>
+        {
+          letters.map((l) => (
+            <div class='bg-btn-gray rounded-md size-14 uppercase font-semibold text-4xl text-white hover:bg-gray-hover'>
+              <a
+                href={`#${l.letter}`}
+                class='flex justify-center items-center size-full hover:no-underline hover:text-white'
+              >
+                {l.letter}
+              </a>
+            </div>
+          ))
+        }
+      </div>
+      <div class='flex flex-col gap-y-6'>
+        {
+          letters.map((l) => (
+            <div id={l.letter}>
+              <div class='flex uppercase border-y-2 text-4xl justify-center border-white py-1.5'>{l.letter}</div>
+              <div class='my-4'>
+                <LetterSection letter={l.letter} />
+              </div>
+            </div>
+          ))
+        }
+      </div>
+    </div>
+    <Sidebar />
+  </div>
+</BaseLayout>