From 60cf9d989945bc59765f99e9053c3e9113628328 Mon Sep 17 00:00:00 2001
From: zebus3d <zebus3dream@gmail.com>
Date: Fri, 9 Oct 2026 10:53:02 -0300
Subject: [PATCH 1/3] feat: change volume with the mouse wheel on the classic
 mini player

The skinned mini players already turn the wheel into volume, but the classic
capsule ignored it. Its only way to change volume was to switch the hover bar
from song position to volume in Settings, which means giving up seeking.

The wheel now controls volume on the classic skin too, with the same
proportional step as the skins. The artist line briefly shows the new level,
so a wheel turn has feedback even when the hover bar is the song position.
---
 src/ui/components/mini-player/MiniPlayer.tsx | 23 +++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/ui/components/mini-player/MiniPlayer.tsx b/src/ui/components/mini-player/MiniPlayer.tsx
index 6a37f052..bf1c87ee 100644
--- a/src/ui/components/mini-player/MiniPlayer.tsx
+++ b/src/ui/components/mini-player/MiniPlayer.tsx
@@ -8,6 +8,7 @@ import {
   type KeyboardEvent,
   type MouseEvent,
   type PointerEvent,
+  type WheelEvent,
 } from "react";
 import { cn } from "@/lib/utils";
 import { emit } from "@tauri-apps/api/event";
@@ -782,6 +783,19 @@ export default function MiniPlayer() {
       ? (displayedTime / timeState.duration) * 100
       : 0;
 
+  /*
+   * The wheel always controls volume, whatever the hover bar is set to, so the volume can be
+   * changed without giving up the song position slider. Same feel as the other skins: the
+   * step is proportional, so a trackpad fine-tunes and a wheel notch moves about 5%.
+   */
+  const handleWheel = (event: WheelEvent<HTMLDivElement>) => {
+    const delta = Math.max(-0.1, Math.min(0.1, -event.deltaY / 2000));
+    const next = Math.round(Math.min(1, Math.max(0, displayedVolume + delta)) * 100) / 100;
+    setVolumePreview(next);
+    void emit("mini-player:volume", { volume: next });
+    keepVolumePreviewUntilSync();
+  };
+
   // Playback progress is drawn as a ring around the artwork, so the collapsed pill
   // communicates position without spending any of its 100px budget on a progress bar.
   const trackProgress = timeState.duration > 0
@@ -823,6 +837,7 @@ export default function MiniPlayer() {
           if (event.button === RIGHT_MOUSE_BUTTON) void stopManualWindowDrag();
         }}
         onContextMenu={(event) => event.preventDefault()}
+        onWheel={handleWheel}
       >
         {/*
           Album-reactive backdrop: the artwork itself, blown up and blurred past recognition,
@@ -928,7 +943,13 @@ export default function MiniPlayer() {
                 </Marquee>
               )}
             </div>
-            {playerState.artist ? (
+            {/* The artist line briefly shows the level while it changes, so a wheel turn
+                has feedback even when the hover bar is the song position. */}
+            {volumePreview !== null ? (
+              <p className="truncate text-[10px] leading-tight text-white/55 tabular-nums">
+                Volume {Math.round(volumePreview * 100)}%
+              </p>
+            ) : playerState.artist ? (
               <p className="truncate text-[10px] leading-tight text-white/55">
                 {playerState.artist}
               </p>

From 6b7d06efbad90e2618e7ab792a9ddc9df0e8008d Mon Sep 17 00:00:00 2001
From: zebus3d <zebus3dream@gmail.com>
Date: Fri, 9 Oct 2026 10:55:05 -0300
Subject: [PATCH 2/3] feat: add a "don't show again" option to the mini player

Closing the mini player only hides it until the main window is next
backgrounded. That is right for "not now", but the only way to say "never" was
the switch in Settings > Window, which is hard to find from the mini player.

A right-click menu now offers both "Hide for now" and "Don't show again". On
the classic skin it opens from the close button, because a right-click
anywhere else on the capsule drags the window; the other skins open it from
anywhere. "Don't show again" only flips the existing setting, and the main
window reacts to that as it does when the switch is turned off in Settings.
---
 src/ui/components/mini-player/MiniPlayer.tsx  | 10 ++++++++--
 .../mini-player/SkinnedMiniPlayer.tsx         |  7 +++++--
 .../mini-player/useMiniPlayerBridge.ts        | 19 +++++++++++++++++++
 3 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/ui/components/mini-player/MiniPlayer.tsx b/src/ui/components/mini-player/MiniPlayer.tsx
index bf1c87ee..0b916666 100644
--- a/src/ui/components/mini-player/MiniPlayer.tsx
+++ b/src/ui/components/mini-player/MiniPlayer.tsx
@@ -26,7 +26,7 @@ import { saveMiniPlayerPosition, useMiniPlayerHoverAction } from "../../settings
 import { isLinux, isMacOS, isWindows } from "../../platform";
 import { Marquee } from "@/components/motion/marquee";
 import { TrackArtwork } from "../TrackArtwork";
-import { restoreMainWindow, useMiniPlayerBridge } from "./useMiniPlayerBridge";
+import { restoreMainWindow, showMiniPlayerCloseMenu, useMiniPlayerBridge } from "./useMiniPlayerBridge";
 
 const win = getCurrentWindow();
 
@@ -965,8 +965,14 @@ export default function MiniPlayer() {
             type="button"
             onMouseDown={(event) => event.stopPropagation()}
             onClick={() => void handleClose()}
+            // Right-click on the capsule drags it, so the close options live on this button.
+            onContextMenu={(event) => {
+              event.preventDefault();
+              event.stopPropagation();
+              void showMiniPlayerCloseMenu();
+            }}
             aria-label="Close mini player"
-            title="Close"
+            title="Close (right-click for more)"
           >
             <CloseIcon size={13} aria-hidden="true" />
           </button>
diff --git a/src/ui/components/mini-player/SkinnedMiniPlayer.tsx b/src/ui/components/mini-player/SkinnedMiniPlayer.tsx
index 72a5e85c..5744a683 100644
--- a/src/ui/components/mini-player/SkinnedMiniPlayer.tsx
+++ b/src/ui/components/mini-player/SkinnedMiniPlayer.tsx
@@ -8,7 +8,7 @@ import {
 } from "../../settings/miniPlayer";
 import { useReduceMotion } from "../../settings/renderEffects";
 import { isLinux } from "../../platform";
-import { restoreMainWindow, useMiniPlayerBridge } from "./useMiniPlayerBridge";
+import { restoreMainWindow, showMiniPlayerCloseMenu, useMiniPlayerBridge } from "./useMiniPlayerBridge";
 import { SKIN_COMPONENTS } from "./skins";
 
 const win = getCurrentWindow();
@@ -111,7 +111,10 @@ export function SkinnedMiniPlayer({ skin }: { skin: Exclude<MiniPlayerSkinId, "c
       className="grid h-full w-full cursor-grab place-items-center bg-transparent active:cursor-grabbing"
       onMouseDown={handleMouseDown}
       onWheel={handleWheel}
-      onContextMenu={(event) => event.preventDefault()}
+      onContextMenu={(event) => {
+        event.preventDefault();
+        void showMiniPlayerCloseMenu();
+      }}
     >
       <Skin
         title={playerState.title}
diff --git a/src/ui/components/mini-player/useMiniPlayerBridge.ts b/src/ui/components/mini-player/useMiniPlayerBridge.ts
index c12908c1..8d218c5c 100644
--- a/src/ui/components/mini-player/useMiniPlayerBridge.ts
+++ b/src/ui/components/mini-player/useMiniPlayerBridge.ts
@@ -1,7 +1,9 @@
 import { useEffect, useState } from "react";
 import { emit, listen } from "@tauri-apps/api/event";
+import { Menu } from "@tauri-apps/api/menu";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 import { WebviewWindow } from "@tauri-apps/api/webviewWindow";
+import { setMiniPlayerEnabled } from "../../settings/miniPlayer";
 
 export interface PlayerSync {
   status: string;
@@ -78,3 +80,20 @@ export async function restoreMainWindow(): Promise<void> {
     await mainWin.setFocus();
   }
 }
+
+/**
+ * Closing the mini player only hides it until the main window is next backgrounded, which
+ * is right for "not now" but leaves no quick way to say "never". This menu offers both.
+ *
+ * "Don't show again" only flips the setting: the main window hears the localStorage change
+ * and destroys this window itself, exactly as when the switch is turned off in Settings.
+ */
+export async function showMiniPlayerCloseMenu(): Promise<void> {
+  const menu = await Menu.new({
+    items: [
+      { text: "Hide for now", action: () => void getCurrentWindow().destroy() },
+      { text: "Don't show again", action: () => setMiniPlayerEnabled(false) },
+    ],
+  });
+  await menu.popup();
+}

From 33fd86c75e3d6c1d2079e4c93fd0e683c8813ef0 Mon Sep 17 00:00:00 2001
From: zebus3d <zebus3dream@gmail.com>
Date: Fri, 9 Oct 2026 11:14:57 -0300
Subject: [PATCH 3/3] feat: let the classic mini player expand downward near
 the top edge

The mini player window is always as tall as the expanded capsule, and the
capsule sits at the bottom of it and grows upward. That suits the default spot
near the bottom of the screen. In the top half, though, the spare room sits
above the pill and keeps it from reaching the top edge.

The capsule now anchors to whichever half of the monitor the window is in. In
the top half it sits at the top of the window and grows downward. The
Windows-only hover hit-test follows the same anchor.
---
 src/ui/components/mini-player/MiniPlayer.tsx | 40 ++++++++++++++++++--
 1 file changed, 36 insertions(+), 4 deletions(-)

diff --git a/src/ui/components/mini-player/MiniPlayer.tsx b/src/ui/components/mini-player/MiniPlayer.tsx
index 0b916666..571e20d7 100644
--- a/src/ui/components/mini-player/MiniPlayer.tsx
+++ b/src/ui/components/mini-player/MiniPlayer.tsx
@@ -12,7 +12,13 @@ import {
 } from "react";
 import { cn } from "@/lib/utils";
 import { emit } from "@tauri-apps/api/event";
-import { cursorPosition, getCurrentWindow, LogicalSize, PhysicalPosition } from "@tauri-apps/api/window";
+import {
+  currentMonitor,
+  cursorPosition,
+  getCurrentWindow,
+  LogicalSize,
+  PhysicalPosition,
+} from "@tauri-apps/api/window";
 import { SpinnerSteps } from "@/components/motion/loader";
 import {
   ArrowUpIcon,
@@ -86,8 +92,10 @@ export default function MiniPlayer() {
   const [isDragging, setIsDragging] = useState(false);
   const [seekPreviewTime, setSeekPreviewTime] = useState<number | null>(null);
   const [volumePreview, setVolumePreview] = useState<number | null>(null);
+  const [anchorTop, setAnchorTop] = useState(false);
   const hoverAction = useMiniPlayerHoverAction();
   const expandedRef = useRef(false);
+  const anchorTopRef = useRef(false);
   const dragTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const seekPreviewClearTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const volumePreviewClearTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -315,9 +323,28 @@ export default function MiniPlayer() {
     }
   }, [hoverAction]);
 
+  /*
+   * The window is always as tall as the expanded capsule, and the capsule grows into that
+   * spare room. Anchored to the bottom it grows upward, which suits the default spot near the
+   * bottom of the screen. In the top half the spare room would sit above the pill and keep it
+   * from reaching the top edge, so there it anchors to the top and grows downward instead.
+   */
+  const updateAnchor = async (windowY: number) => {
+    try {
+      const [monitor, size] = await Promise.all([currentMonitor(), win.outerSize()]);
+      if (!monitor) return;
+      const top = windowY + size.height / 2 < monitor.position.y + monitor.size.height / 2;
+      anchorTopRef.current = top;
+      setAnchorTop(top);
+    } catch (_) {}
+  };
+
   useEffect(() => {
+    void win.outerPosition().then((position) => updateAnchor(position.y), () => {});
+
     const setup = async () => {
       const unlisten = await win.onMoved(({ payload }) => {
+        void updateAnchor(payload.y);
         const nextPosition = { x: payload.x, y: payload.y };
         if (windowRectRef.current) {
           windowRectRef.current = { ...windowRectRef.current, ...nextPosition };
@@ -373,7 +400,9 @@ export default function MiniPlayer() {
           (expandedRef.current ? EXPANDED_CAPSULE_HEIGHT : COLLAPSED_HEIGHT) * scale;
         const capsuleWidth = capsuleWidthRef.current * scale;
         const capsuleCenterX = rect.x + rect.width / 2;
-        const capsuleBottom = rect.y + rect.height - WINDOW_PADDING * scale;
+        const capsuleBottom = anchorTopRef.current
+          ? rect.y + WINDOW_PADDING * scale + capsuleHeight
+          : rect.y + rect.height - WINDOW_PADDING * scale;
 
         // Once open, the region the cursor must leave is deliberately bigger than the one
         // it had to enter. See HOVER_RELEASE_SLACK.
@@ -805,8 +834,11 @@ export default function MiniPlayer() {
   return (
     <div
       ref={wrapperRef}
-      className="flex h-full w-full items-end justify-center bg-transparent"
-      style={{ paddingBottom: WINDOW_PADDING }}
+      className={cn(
+        "flex h-full w-full justify-center bg-transparent",
+        anchorTop ? "items-start" : "items-end",
+      )}
+      style={anchorTop ? { paddingTop: WINDOW_PADDING } : { paddingBottom: WINDOW_PADDING }}
       onBlur={handleMacFocusOut}
     >
       {/*