From c55fb17498bedab80772a89b9e8c4e721579e7dd Mon Sep 17 00:00:00 2001
From: Azalea <22280294+hykilpikonna@users.noreply.github.com>
Date: Wed, 19 Nov 2025 14:23:52 +0800
Subject: [PATCH] [+] Menu

---
 src/components/appbar/AppBar.svelte | 21 +++++++++++++++++++--
 src/components/material3/README.md  |  3 +++
 src/routes/song/[slug]/+page.svelte | 10 +++++-----
 3 files changed, 27 insertions(+), 7 deletions(-)
 create mode 100644 src/components/material3/README.md

diff --git a/src/components/appbar/AppBar.svelte b/src/components/appbar/AppBar.svelte
index 3b6f826..de73c63 100644
--- a/src/components/appbar/AppBar.svelte
+++ b/src/components/appbar/AppBar.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { fly, slide } from "svelte/transition";
+  import { Menu } from "m3-svelte";
   import IconButton from "../IconButton.svelte";
 
   interface Icon {
@@ -6,12 +8,15 @@
     onclick: () => void
   }
 
-  let { title, sub, account, right }: {
+  let { title, sub, account, right, children }: {
     title?: string
     sub?: string
     account?: () => void
     right?: Icon[]
+    children?: any
   } = $props()
+
+  let showMenu = $state(false)
 </script>
 
 <div class="hbox h-64px">
@@ -30,4 +35,16 @@
   {#each right as item}
     <IconButton icon={item.icon} onclick={item.onclick} />
   {/each}
-</div>
\ No newline at end of file
+
+  {#if children}
+    <IconButton icon="i-material-symbols:more-vert" onclick={() => showMenu = !showMenu} />
+  {/if}
+</div>
+
+{#if children && showMenu}
+  <div class="absolute right-0 p-16px mt-[-16px]" transition:fly={{ duration: 200, y: -10 }}>
+    <Menu>
+      {@render children()}
+    </Menu>
+  </div>  
+{/if}
\ No newline at end of file
diff --git a/src/components/material3/README.md b/src/components/material3/README.md
new file mode 100644
index 0000000..038743c
--- /dev/null
+++ b/src/components/material3/README.md
@@ -0,0 +1,3 @@
+## Material 3
+
+These files are modified from https://github.com/KTibow/m3-svelte to fit the needs of this project.
\ No newline at end of file
diff --git a/src/routes/song/[slug]/+page.svelte b/src/routes/song/[slug]/+page.svelte
index 6fc5b88..23af5d6 100644
--- a/src/routes/song/[slug]/+page.svelte
+++ b/src/routes/song/[slug]/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import AppBar from "../../../components/appbar/AppBar.svelte";
   import type { PageProps } from "./$types"
-  import { LinearProgress } from "m3-svelte";
+  import { LinearProgress, MenuItem } from "m3-svelte";
   import { onMount } from "svelte";
   import type { LyricSegment } from "../../../shared/types.ts";
   import { isKana, isKanji, toHiragana } from "wanakana";
@@ -93,13 +93,13 @@
   let totalRight = $derived(flat.filter(s => s === 'right' || s === 'fuzzy').length)
 </script>
 
-<AppBar title={data.brief.name} sub={data.brief.artists.map(a => a.name).join(", ") + " - " + data.brief.album} right={[
-  // TODO
-  {icon: "i-material-symbols:more-vert", onclick: () => alert('More clicked')}
-]} />
+<AppBar title={data.brief.name} sub={data.brief.artists.map(a => a.name).join(", ") + " - " + data.brief.album}>
+  <MenuItem onclick={() => console.log("clicked")}>Mewo</MenuItem>
+</AppBar>
 
 <LinearProgress percent={progress} />
 
+
 <input bind:this={hiddenInput} oncompositionend={() => inputChanged(inp, true)} bind:value={inp} class="absolute opacity-0 top-[-9999px] left-[-9999px]" />
 
 <!-- Stats -->