From 26c5fd2b037020dd774e3f389172f7bf56f4be81 Mon Sep 17 00:00:00 2001
From: Jorge Vargas <jorgev259@outlook.es>
Date: Sun, 27 Apr 2025 11:24:48 -0600
Subject: [PATCH] Implement /series/list

---
 astro.config.mjs                              |  1 -
 src/components/Header.astro                   |  2 +-
 src/components/letterList/SeriesList.astro    | 22 +++++++++++
 .../letterList/SeriesListCover.astro          | 30 ++++++++++++++
 src/layouts/LetterList.astro                  |  5 ++-
 src/pages/series/list/index.astro             | 39 +++++++++++++++++++
 6 files changed, 95 insertions(+), 4 deletions(-)
 create mode 100644 src/components/letterList/SeriesList.astro
 create mode 100644 src/components/letterList/SeriesListCover.astro
 create mode 100644 src/pages/series/list/index.astro

diff --git a/astro.config.mjs b/astro.config.mjs
index 12d7e74..966c2b1 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -56,7 +56,6 @@ export default defineConfig({
     '/profile': { status: 307, destination: '/maintenance' },
     '/profile/[username]': { status: 307, destination: '/maintenance' },
     '/series/[slug]': { status: 307, destination: '/maintenance' },
-    '/series/list': { status: 307, destination: '/maintenance' },
     '/studio/[slug]': { status: 307, destination: '/maintenance' },
     '/studio/list': { status: 307, destination: '/maintenance' },
     '/request': { status: 307, destination: '/maintenance' }
diff --git a/src/components/Header.astro b/src/components/Header.astro
index ee3241d..ef148ec 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -60,7 +60,7 @@ const { session } = Astro.locals
         <Fragment slot='items'>
           <DropdownItem href='/game/latest'>{m.latestReleases()}</DropdownItem>
           <DropdownItem href='/game/list'>{m.gamelist()}</DropdownItem>
-          <DropdownItem href='/series'>{m.series()}</DropdownItem>
+          <DropdownItem href='/series/list'>{m.series()}</DropdownItem>
           <DropdownItem href='/publisher/list'>{m.publishers()}</DropdownItem>
           <DropdownItem href='/platforms/list'>{m.platforms()}</DropdownItem>
         </Fragment>
diff --git a/src/components/letterList/SeriesList.astro b/src/components/letterList/SeriesList.astro
new file mode 100644
index 0000000..7f741d8
--- /dev/null
+++ b/src/components/letterList/SeriesList.astro
@@ -0,0 +1,22 @@
+---
+import { AlbumStatus } from '@prisma/client'
+import prismaClient from 'utils/prisma-client'
+
+interface Props {
+  letter: string
+}
+
+const { letter } = Astro.props
+const albums = await prismaClient.series.findMany({
+  where: { name: { startsWith: letter } },
+  select: { slug: true, name: true }
+})
+---
+
+{
+  albums.map((a) => (
+    <a class='text-left hover:bg-btn-gray/30 rounded-md p-2' href={`/album/${a.slug}`}>
+      {a.name}
+    </a>
+  ))
+}
diff --git a/src/components/letterList/SeriesListCover.astro b/src/components/letterList/SeriesListCover.astro
new file mode 100644
index 0000000..bb9ece6
--- /dev/null
+++ b/src/components/letterList/SeriesListCover.astro
@@ -0,0 +1,30 @@
+---
+import { AlbumStatus } from '@prisma/client'
+import { Image } from 'astro:assets'
+import prismaClient from 'utils/prisma-client'
+
+interface Props {
+  letter: string
+}
+
+const { letter } = Astro.props
+const albums = await prismaClient.series.findMany({
+  where: { name: { startsWith: letter } },
+  select: { slug: true }
+})
+---
+
+{
+  albums.map((a) => (
+    <a class='group text-left rounded-md p-2' href={`/album/${a.slug}`}>
+      <Image
+        src={`https://cdn.sittingonclouds.net/series/${a.slug}.png`}
+        alt={a.slug}
+        height={500}
+        width={500}
+        quality='low'
+        class='rounded-md scale-95 group-hover:scale-98 transition-transform'
+      />
+    </a>
+  ))
+}
diff --git a/src/layouts/LetterList.astro b/src/layouts/LetterList.astro
index da29477..4e897e1 100644
--- a/src/layouts/LetterList.astro
+++ b/src/layouts/LetterList.astro
@@ -1,13 +1,14 @@
 ---
 interface Props {
   letters: { letter: string; count: BigInt }[]
+  sidebar?: boolean
 }
 
 import BaseLayout from 'layouts/base.astro'
 import Sidebar from 'components/Sidebar.astro'
 import DefaultSEO from 'components/DefaultSEO.astro'
 
-const { letters } = Astro.props
+const { letters, sidebar = true } = Astro.props
 ---
 
 <DefaultSEO />
@@ -32,6 +33,6 @@ const { letters } = Astro.props
         <slot />
       </div>
     </div>
-    <Sidebar />
+    {sidebar ? <Sidebar /> : null}
   </div>
 </BaseLayout>
diff --git a/src/pages/series/list/index.astro b/src/pages/series/list/index.astro
new file mode 100644
index 0000000..9466b6b
--- /dev/null
+++ b/src/pages/series/list/index.astro
@@ -0,0 +1,39 @@
+---
+import prismaClient from 'utils/prisma-client'
+
+import LetterList from 'layouts/LetterList.astro'
+import AnimList from 'components/letterList/AnimList.astro'
+import SeriesList from 'components/letterList/SeriesList.astro'
+import SeriesListCover from 'components/letterList/SeriesListCover.astro'
+
+const letters: { letter: string; count: BigInt }[] = await prismaClient.$queryRaw`
+  SELECT DISTINCT UPPER(LEFT(series.name, 1)) AS letter, COUNT(*) AS count
+  FROM Series_Game, series, game
+  WHERE Series_Game.gameSlug = game.slug
+  AND Series_Game.seriesSlug = series.slug
+  GROUP BY letter
+  ORDER BY letter;
+`
+---
+
+<LetterList letters={letters} sidebar={false}>
+  <div class='flex mt-4'>
+    <div class='w-80'>
+      {
+        letters.map((l) => (
+          <div id={l.letter}>
+            <div class='flex uppercase text-4xl justify-center py-1.5'>{l.letter}</div>
+            <div class='w-full flex flex-col items-center'>
+              <SeriesList letter={l.letter} />
+            </div>
+          </div>
+        ))
+      }
+    </div>
+    <div class='w-full'>
+      <div class='grid grid-cols-3'>
+        {letters.map((l) => <SeriesListCover letter={l.letter} />)}
+      </div>
+    </div>
+  </div>
+</LetterList>