From 0fc5a27e8119741e055ce939f79daef585bf8f34 Mon Sep 17 00:00:00 2001
From: isabel <isabel@isabelroses.com>
Date: Thu, 13 Nov 2025 13:06:26 +0000
Subject: [PATCH] feat: add home & lyrics/queue button

---
 src/components/MusicPlayer.astro | 56 +++++++++++++++++++++++++-------
 src/components/Song.astro        |  2 +-
 src/pages/blog/[...slug].astro   | 30 +++++++++++++++--
 3 files changed, 72 insertions(+), 16 deletions(-)

diff --git a/src/components/MusicPlayer.astro b/src/components/MusicPlayer.astro
index 29cbb90..ef12ec9 100644
--- a/src/components/MusicPlayer.astro
+++ b/src/components/MusicPlayer.astro
@@ -1,10 +1,13 @@
 ---
+import { type CollectionEntry } from "astro:content";
 import { Icon } from "astro-icon/components";
 import { Image } from "astro:assets";
+import Song from "@components/Song.astro";
 import me from "@assets/me.webp";
 
 interface Props {
   isPlaying?: boolean;
+  posts?: CollectionEntry<"blog">[];
   nowPlaying: string;
   playPercent: number;
   playPositon: string;
@@ -14,6 +17,7 @@ interface Props {
 
 const {
   isPlaying = false,
+  posts,
   nowPlaying,
   playPercent,
   playPositon,
@@ -23,15 +27,37 @@ const {
 ---
 
 <section class={sectionClass}>
-  <Image
-    id="player-image"
-    src={me}
-    alt="isabel roses"
-    class="mb-4 rounded-sm"
-    width={416}
-    height={416}
-    loading="eager"
-  />
+  <div class="relative w-[416px] h-[416px] mb-4">
+    <Image
+      id="player-image"
+      src={me}
+      alt="isabel roses"
+      class="absolute inset-0 w-full h-full rounded-sm transition-opacity duration-500 ease-in-out opacity-100"
+      width={416}
+      height={416}
+      loading="eager"
+    />
+
+    {
+      posts && (
+        <div
+          id="queue-view"
+          class="absolute inset-0 opacity-0 pointer-events-none transition-opacity duration-500 ease-in-out overflow-y-auto"
+        >
+          <ul class="flex flex-col p-2">
+            {posts.entries().map(([i, post]) => (
+              <Song
+                index={i + 1}
+                title={post.data.title}
+                time={`${post.data.readTime} mins`}
+                slug={`/blog/${post.id}`}
+              />
+            ))}
+          </ul>
+        </div>
+      )
+    }
+  </div>
 
   <div class="flex flex-col gap-4">
     <div>
@@ -55,8 +81,10 @@ const {
       </div>
     </div>
 
-    <div class="flex gap-4 mt-4 items-center place-content-between">
-      <a href="/" alt="home"><Icon name="fa7-solid:house" class="h-6 w-6 mb-1 cursor-pointer" /></a>
+    <div class="flex gap-4 mt-4 mx-8 items-center place-content-between">
+      <a href="/" aria-label="home"
+        ><Icon name="fa7-solid:house" class="h-6 w-6 mb-1 cursor-pointer" /></a
+      >
 
       <div class="flex gap-4 items-center justify-center">
         <Icon
@@ -87,7 +115,11 @@ const {
         />
       </div>
 
-      <Icon name="fa7-solid:bars-staggered" class="h-6 w-6 mb-1 cursor-pointer" />
+      <Icon
+        id="queue"
+        name="fa7-solid:bars-staggered"
+        class="h-6 w-6 mb-1 cursor-pointer"
+      />
     </div>
   </div>
 </section>
diff --git a/src/components/Song.astro b/src/components/Song.astro
index a86939e..234b680 100644
--- a/src/components/Song.astro
+++ b/src/components/Song.astro
@@ -25,7 +25,7 @@ const { title, slug, index, time, id } = Astro.props as Props;
         )}
       </a>
     ) : (
-      <div class="flex flex-row items-center justify-between group">
+      <div class="flex flex-row items-center justify-between group cursor-pointer">
         <span class="w-8 font-mono text-fg-lighter mr-4">{index}</span>
 
         <span class="grow underline underline-offset-4 decoration-dashed hover:decoration-solid hover:text-special transition-all ease-in-out duration-200">
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
index 37d1fe3..7424dca 100644
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -13,18 +13,20 @@ export async function getStaticPaths() {
     params: { slug: post.id },
     props: {
       post,
-      nextSlug: posts[posts.indexOf(post) + 1]?.id || null,
+      posts,
     },
   }));
 }
 
 interface Props {
   post: CollectionEntry<"blog">;
-  nextSlug: string | null;
+  posts: CollectionEntry<"blog">[];
 }
 
-const { post, nextSlug } = Astro.props;
+const { post, posts } = Astro.props;
+
 const { Content } = await render(post);
+const nextSlug = posts[posts.indexOf(post) + 1]?.id || null;
 ---
 
 <Base
@@ -40,6 +42,7 @@ const { Content } = await render(post);
       playLength=`${post.data.readTime}:00`
       sectionClass="sticky top-24 lg:block hidden"
       isPlaying={true}
+      posts={posts.slice(posts.indexOf(post) + 1)}
     />
 
     <section class="my-12">
@@ -49,6 +52,27 @@ const { Content } = await render(post);
 </Base>
 
 <script is:inline define:vars={{ readTime: post.data.readTime, nextSlug }}>
+  const queueBtn = document.getElementById("queue");
+  const playerImage = document.getElementById("player-image");
+  const queueView = document.getElementById("queue-view");
+  let showingQueue = false;
+
+  queueBtn.addEventListener("click", () => {
+    showingQueue = !showingQueue;
+
+    if (showingQueue) {
+      playerImage.classList.remove("opacity-100");
+      playerImage.classList.add("opacity-0", "pointer-events-none");
+      queueView.classList.remove("pointer-events-none");
+      queueView.classList.add("opacity-100");
+    } else {
+      queueView.classList.remove("opacity-100");
+      queueView.classList.add("opacity-0", "pointer-events-none");
+      playerImage.classList.remove("pointer-events-none");
+      playerImage.classList.add("opacity-100");
+    }
+  });
+
   const backBtn = document.getElementById("back");
   const skipBtn = document.getElementById("skip");
 
-- 
2.51.2