Implement Album Count component

src/components/Sidebar.astro

@@ -10,6 +10,7 @@ import twitter from 'img/socials/twitter.png'
 import SidebarSection from './sidebar/SidebarSection.astro'
 import Highlight from './sidebar/Highlight.astro'
 import AlbumBox from './AlbumBox.astro'
+import AlbumCount from './sidebar/AlbumCount.astro'
 
 const listClass =
   'uppercase text-3xl font-semibold w-full text-center py-3 hover:bg-dark-hover hover:text-cyan-400 hover:underline'
@@ -47,5 +48,8 @@ const listClass =
         <AlbumBox loading />
       </SidebarSection>
     </Highlight>
+    <AlbumCount server:defer>
+      <SidebarSection slot='fallback' class='h-32 animate-pulse' />
+    </AlbumCount>
   </div>
 </div>

src/components/sidebar/AlbumCount.astro

@@ -0,0 +1,28 @@
+---
+import prismaClient from 'utils/prisma-client'
+import * as m from 'paraglide/messages.js'
+
+import SidebarSection from './SidebarSection.astro'
+
+import { getAlbumCount } from '@prisma/client/sql'
+
+const albumCount = await prismaClient.albums.count({ where: { status: 'show' } })
+const categoryRows = await prismaClient.$queryRawTyped(getAlbumCount())
+
+const categories = categoryRows.reduce(
+  (acc, currentValue) => {
+    // @ts-ignore
+    acc[currentValue.categoryName] = currentValue.count
+    return acc
+  },
+  { Animation: 0, Game: 0 }
+)
+---
+
+<SidebarSection>
+  <div class='uppercase text-center text-2xl/6 font-semibold'>{m.ostCount()}: {albumCount}</div>
+  <div class='mt-2'>
+    <div class='text-center font-light'>{m.animOsts}: {categories.Animation}</div>
+    <div class='text-center font-light'>{m.gameOsts}: {categories.Game}</div>
+  </div>
+</SidebarSection>