last added

src/components/Sidebar.astro

@@ -18,7 +18,7 @@ const listClass =
   'uppercase text-3xl font-semibold w-full text-center py-3 hover:bg-dark-hover hover:text-cyan-400 hover:underline'
 ---
 
-<div class='md:w-3/12 md:max-w-[300px] bg-dark flex flex-col'>
+<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>

src/components/sidebar/SidebarAd.astro

@@ -5,7 +5,7 @@ const show = !permissions.includes('SKIP_ADS')
 
 {show ? (
 
-<div class="rounded-md mb-2">
+<div class="rounded-md mb-2 h-full min-h-96">
       <iframe
             title='play-asia'
             id='id01_909824'

src/pages/last-added/index.astro

@@ -0,0 +1,30 @@
+---
+import prismaClient from 'utils/prisma-client'
+import * as m from 'paraglide/messages'
+
+import BaseLayout from 'layouts/base.astro'
+import AlbumBox from 'components/AlbumBox.astro'
+
+const lastAlbums = await prismaClient.albums.findMany({
+  select: { id: true, title: true },
+  take: 40,
+  orderBy: { createdAt: 'desc' }
+})
+---
+
+<BaseLayout>
+  <div class='w-full min-h-100vh mx-auto max-w-[1440px]'>
+    <div class='px-2 mb-2'>
+      <h1 class='uppercase font-medium tracking-wide text-5xl drop-shadow-2xl mt-5 mb-2 text-center'>
+        {m.lastAdded()}
+      </h1>
+      <div class='grid grid-cols-4 gap-x-1.5'>
+        {
+          lastAlbums.map((album) => (
+            <AlbumBox title={album.title} href={`/album/${album.id}`} image={`/album/${album.id}.png`} />
+          ))
+        }
+      </div>
+    </div>
+   </div>
+</BaseLayout>