Reestructure Highlight component

src/components/Sidebar.astro

@@ -6,9 +6,10 @@ import discord from 'img/socials/discord.png'
 import kofi from 'img/socials/ko-fi-donate-button.png'
 import yt from 'img/socials/yt.png'
 import twitter from 'img/socials/twitter.png'
-import SidebarSection from './sidebar/SidebarSection.astro'
 
+import SidebarSection from './sidebar/SidebarSection.astro'
 import Highlight from './sidebar/Highlight.astro'
+import AlbumBox from './AlbumBox.astro'
 
 const listClass =
   'uppercase text-3xl font-semibold w-full text-center py-3 hover:bg-dark-hover hover:text-cyan-400 hover:underline'
@@ -40,6 +41,11 @@ const listClass =
         </a>
       </div>
     </SidebarSection>
-    <Highlight />
+    <Highlight server:defer>
+      <SidebarSection slot='fallback'>
+        <div class='uppercase text-center text-2xl/6 font-semibold'>{m.highlightAlbum()}</div>
+        <AlbumBox loading />
+      </SidebarSection>
+    </Highlight>
   </div>
 </div>

src/components/sidebar/Highlight.astro

@@ -1,8 +1,28 @@
 ---
-import Content from './highlight/content.astro'
-import Loading from './highlight/loading.astro'
+import prismaClient from 'utils/prisma-client'
+import * as m from 'paraglide/messages.js'
+
+import AlbumBox from 'components/AlbumBox.astro'
+import SidebarSection from './SidebarSection.astro'
+
+const highlightConfig = await prismaClient.config.findUnique({
+  where: { name: 'highlight' },
+  select: { value: true }
+})
+
+const album = highlightConfig?.value
+  ? await prismaClient.albums.findUnique({
+      where: { id: parseInt(highlightConfig.value) },
+      select: { title: true, id: true }
+    })
+  : null
 ---
 
-<Content server:defer>
-  <Loading slot='fallback' />
-</Content>
+{
+  album ? (
+    <SidebarSection>
+      <div class='uppercase text-center text-2xl/6 font-semibold'>{m.highlightAlbum()}</div>
+      <AlbumBox href={`/album/${album.id}`} title={album.title ?? 'Unknown Title'} image={`/album/${album.id}.png`} />
+    </SidebarSection>
+  ) : null
+}

src/components/sidebar/highlight/content.astro

@@ -1,28 +0,0 @@
----
-import prismaClient from 'utils/prisma-client'
-import * as m from 'paraglide/messages.js'
-
-import AlbumBox from 'components/AlbumBox.astro'
-import SidebarSection from '../SidebarSection.astro'
-
-const highlightConfig = await prismaClient.config.findUnique({
-  where: { name: 'highlight' },
-  select: { value: true }
-})
-
-const album = highlightConfig?.value
-  ? await prismaClient.albums.findUnique({
-      where: { id: parseInt(highlightConfig.value) },
-      select: { title: true, id: true }
-    })
-  : null
----
-
-{
-  album ? (
-    <SidebarSection>
-      <div class='uppercase text-center text-2xl/6 font-semibold'>{m.highlightAlbum()}</div>
-      <AlbumBox href={`/album/${album.id}`} title={album.title ?? 'Unknown Title'} image={`/album/${album.id}.png`} />
-    </SidebarSection>
-  ) : null
-}

src/components/sidebar/highlight/loading.astro

@@ -1,11 +0,0 @@
----
-import * as m from 'paraglide/messages.js'
-
-import AlbumBox from 'components/AlbumBox.astro'
-import SidebarSection from '../SidebarSection.astro'
----
-
-<SidebarSection>
-  <div class='uppercase text-center text-2xl/6 font-semibold'>{m.highlightAlbum()}</div>
-  <AlbumBox loading />
-</SidebarSection>