fix: MiniPlayer button clicks, 300px width, 8px margin, transparency

- Stop event propagation on all buttons to prevent drag capture
- Reduce window size to 300x140px
- Increase margin to 8px
- Enable window transparency in tauri.conf.json
- Compact UI for smaller size (smaller artwork, tighter controls)

src-tauri/tauri.conf.json

@@ -18,7 +18,7 @@
         "minWidth": 800,
         "minHeight": 600,
         "decorations": false,
-        "transparent": false,
+        "transparent": true,
         "resizable": true
       }
     ],

src/lib/services/miniplayerService.ts

@@ -10,9 +10,9 @@
 import { getCurrentWindow } from '@tauri-apps/api/window';
 import { goto } from '$app/navigation';
 
-// Miniplayer dimensions (with 4px margin on each side)
-const MINIPLAYER_WIDTH = 408;  // 400 content + 8px total margin
-const MINIPLAYER_HEIGHT = 158; // 150 content + 8px total margin
+// Miniplayer dimensions (with 8px margin on each side)
+const MINIPLAYER_WIDTH = 300;
+const MINIPLAYER_HEIGHT = 140;
 
 // LocalStorage key for persisting window state
 const STORAGE_KEY = 'miniplayer_original_state';

src/routes/miniplayer/+layout.svelte

@@ -19,16 +19,16 @@
   :global(html, body) {
     margin: 0;
     padding: 0;
-    background: #0f0f12 !important;
+    background: transparent !important;
     overflow: hidden;
   }
 
   .miniplayer-layout {
     width: 100vw;
     height: 100vh;
-    background: #0f0f12;
+    background: transparent;
     overflow: hidden;
-    padding: 4px;
+    padding: 8px;
     box-sizing: border-box;
   }
 
@@ -38,6 +38,6 @@
     background: #18181b;
     border-radius: 8px;
     overflow: hidden;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
   }
 </style>

src/routes/miniplayer/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
-  import { invoke } from '@tauri-apps/api/core';
   import { getCurrentWindow } from '@tauri-apps/api/window';
   import {
     Shuffle,
@@ -46,12 +45,10 @@
   let isPinned = $state(true);
   let isDragging = $state(false);
   let isDraggingProgress = $state(false);
-  let isDraggingVolume = $state(false);
   let queueCount = $state(0);
 
   // Refs
   let progressRef: HTMLDivElement;
-  let volumeRef: HTMLDivElement;
 
   // Derived state
   const progress = $derived(playerState.duration > 0 ? (playerState.currentTime / playerState.duration) * 100 : 0);
@@ -68,16 +65,12 @@
 
   onMount(async () => {
     console.log('[MiniPlayer] Mounting, starting polling...');
-
-    // Start listening for playback events
     await startPolling();
 
-    // Subscribe to player state
     unsubscribePlayer = subscribePlayer(() => {
       playerState = getPlayerState();
     });
 
-    // Subscribe to queue state
     unsubscribeQueue = subscribeQueue(() => {
       const qState = getQueueState();
       isShuffle = qState.isShuffle;
@@ -85,7 +78,6 @@
       queueCount = qState.tracks.length;
     });
 
-    // Initial state
     const qState = getQueueState();
     isShuffle = qState.isShuffle;
     repeatMode = qState.repeatMode;
@@ -100,7 +92,8 @@
   });
 
   // Playback controls
-  async function handlePlayPause(): Promise<void> {
+  async function handlePlayPause(e: MouseEvent): Promise<void> {
+    e.stopPropagation();
     try {
       await togglePlay();
     } catch (err) {
@@ -108,7 +101,8 @@
     }
   }
 
-  async function handleNext(): Promise<void> {
+  async function handleNext(e: MouseEvent): Promise<void> {
+    e.stopPropagation();
     try {
       await nextTrack();
     } catch (err) {
@@ -116,7 +110,8 @@
     }
   }
 
-  async function handlePrevious(): Promise<void> {
+  async function handlePrevious(e: MouseEvent): Promise<void> {
+    e.stopPropagation();
     try {
       await previousTrack();
     } catch (err) {
@@ -124,7 +119,8 @@
     }
   }
 
-  async function handleToggleShuffle(): Promise<void> {
+  async function handleToggleShuffle(e: MouseEvent): Promise<void> {
+    e.stopPropagation();
     try {
       await toggleShuffle();
     } catch (err) {
@@ -132,7 +128,8 @@
     }
   }
 
-  async function handleToggleRepeat(): Promise<void> {
+  async function handleToggleRepeat(e: MouseEvent): Promise<void> {
+    e.stopPropagation();
     try {
       await toggleRepeat();
     } catch (err) {
@@ -142,6 +139,7 @@
 
   // Progress bar
   function handleProgressMouseDown(e: MouseEvent): void {
+    e.stopPropagation();
     isDraggingProgress = true;
     updateProgress(e);
     document.addEventListener('mousemove', handleProgressMouseMove);
@@ -167,43 +165,17 @@
     }
   }
 
-  // Volume control
-  function handleVolumeMouseDown(e: MouseEvent): void {
-    isDraggingVolume = true;
-    updateVolume(e);
-    document.addEventListener('mousemove', handleVolumeMouseMove);
-    document.addEventListener('mouseup', handleVolumeMouseUp);
-  }
-
-  function handleVolumeMouseMove(e: MouseEvent): void {
-    if (isDraggingVolume) updateVolume(e);
-  }
-
-  function handleVolumeMouseUp(): void {
-    isDraggingVolume = false;
-    document.removeEventListener('mousemove', handleVolumeMouseMove);
-    document.removeEventListener('mouseup', handleVolumeMouseUp);
-  }
-
-  function updateVolume(e: MouseEvent): void {
-    if (volumeRef) {
-      const rect = volumeRef.getBoundingClientRect();
-      const percentage = Math.max(0, Math.min(100, ((e.clientX - rect.left) / rect.width) * 100));
-      playerSetVolume(Math.round(percentage));
-    }
-  }
-
-  function handleMuteToggle(): void {
-    playerSetVolume(playerState.volume === 0 ? 75 : 0);
-  }
-
-  // Window controls
-  async function handleRestore(): Promise<void> {
+  // Window controls - stop propagation to prevent drag from capturing
+  async function handleRestore(e: MouseEvent): Promise<void> {
+    e.stopPropagation();
+    e.preventDefault();
     console.log('[MiniPlayer] Restore button clicked');
     await exitMiniplayerMode();
   }
 
-  async function togglePin(): Promise<void> {
+  async function togglePin(e: MouseEvent): Promise<void> {
+    e.stopPropagation();
+    e.preventDefault();
     isPinned = !isPinned;
     await setMiniplayerAlwaysOnTop(isPinned);
   }
@@ -220,10 +192,9 @@
     }
   }
 
-  // Queue info (placeholder - will open queue panel later)
-  function handleOpenQueue(): void {
+  function handleOpenQueue(e: MouseEvent): void {
+    e.stopPropagation();
     console.log('[MiniPlayer] Queue button clicked, tracks:', queueCount);
-    // TODO: Open queue panel or switch to expanded mode
   }
 </script>
 
@@ -232,36 +203,37 @@
   class:dragging={isDragging}
   role="application"
   aria-label="MiniPlayer"
+  onmousedown={startDrag}
 >
-  <!-- Album Art Section -->
-  <div class="artwork-section" onmousedown={startDrag}>
+  <!-- Album Art -->
+  <div class="artwork-section">
     {#if playerState.currentTrack?.artwork}
       <img src={playerState.currentTrack.artwork} alt="Album art" class="artwork" />
     {:else}
       <div class="artwork-placeholder">
-        <Play size={32} />
+        <Play size={24} />
       </div>
     {/if}
   </div>
 
   <!-- Main Content -->
   <div class="content-section">
-    <!-- Header with track info and window controls -->
-    <div class="header" onmousedown={startDrag}>
+    <!-- Header: Track info + window controls -->
+    <div class="header">
       <div class="track-info">
-        <div class="title">{playerState.currentTrack?.title ?? 'No track playing'}</div>
+        <div class="title">{playerState.currentTrack?.title ?? 'No track'}</div>
         <div class="artist">{playerState.currentTrack?.artist ?? '—'}</div>
       </div>
       <div class="window-controls">
-        <button class="window-btn" onclick={togglePin} title={isPinned ? 'Unpin' : 'Pin on top'}>
+        <button class="window-btn" onclick={togglePin} title={isPinned ? 'Unpin' : 'Pin'}>
           {#if isPinned}
-            <Pin size={14} />
+            <Pin size={12} />
           {:else}
-            <PinOff size={14} />
+            <PinOff size={12} />
           {/if}
         </button>
-        <button class="window-btn restore" onclick={handleRestore} title="Restore window">
-          <Maximize2 size={14} />
+        <button class="window-btn restore" onclick={handleRestore} title="Restore">
+          <Maximize2 size={12} />
         </button>
       </div>
     </div>
@@ -282,92 +254,57 @@
         <div class="progress-track">
           <div class="progress-fill" style="width: {progress}%"></div>
         </div>
-        <div class="progress-thumb" style="left: {progress}%"></div>
       </div>
-      <span class="time remaining">-{formatTime(Math.max(0, playerState.duration - playerState.currentTime))}</span>
+      <span class="time">-{formatTime(Math.max(0, playerState.duration - playerState.currentTime))}</span>
     </div>
 
     <!-- Controls Row -->
     <div class="controls-row">
-      <!-- Playback Controls -->
-      <div class="playback-controls">
-        <button
-          class="control-btn small"
-          class:active={isShuffle}
-          onclick={handleToggleShuffle}
-          title="Shuffle"
-        >
-          <Shuffle size={14} />
-        </button>
+      <button
+        class="ctrl-btn"
+        class:active={isShuffle}
+        onclick={handleToggleShuffle}
+        title="Shuffle"
+      >
+        <Shuffle size={12} />
+      </button>
 
-        <button class="control-btn" onclick={handlePrevious} title="Previous">
-          <SkipBack size={18} />
-        </button>
+      <button class="ctrl-btn" onclick={handlePrevious} title="Previous">
+        <SkipBack size={14} />
+      </button>
 
-        <button class="control-btn play" onclick={handlePlayPause} title={playerState.isPlaying ? 'Pause' : 'Play'}>
-          {#if playerState.isPlaying}
-            <Pause size={20} />
-          {:else}
-            <Play size={20} />
-          {/if}
-        </button>
+      <button class="ctrl-btn play" onclick={handlePlayPause} title={playerState.isPlaying ? 'Pause' : 'Play'}>
+        {#if playerState.isPlaying}
+          <Pause size={16} />
+        {:else}
+          <Play size={16} />
+        {/if}
+      </button>
 
-        <button class="control-btn" onclick={handleNext} title="Next">
-          <SkipForward size={18} />
-        </button>
+      <button class="ctrl-btn" onclick={handleNext} title="Next">
+        <SkipForward size={14} />
+      </button>
 
-        <button
-          class="control-btn small"
-          class:active={repeatMode !== 'off'}
-          onclick={handleToggleRepeat}
-          title={repeatMode === 'off' ? 'Repeat' : repeatMode === 'all' ? 'Repeat All' : 'Repeat One'}
-        >
-          {#if repeatMode === 'one'}
-            <Repeat1 size={14} />
-          {:else}
-            <Repeat size={14} />
-          {/if}
-        </button>
-      </div>
+      <button
+        class="ctrl-btn"
+        class:active={repeatMode !== 'off'}
+        onclick={handleToggleRepeat}
+        title="Repeat"
+      >
+        {#if repeatMode === 'one'}
+          <Repeat1 size={12} />
+        {:else}
+          <Repeat size={12} />
+        {/if}
+      </button>
 
-      <!-- Right Controls: Queue + Volume -->
-      <div class="right-controls">
-        <button
-          class="control-btn small"
-          onclick={handleOpenQueue}
-          title="Queue ({queueCount} tracks)"
-        >
-          <ListMusic size={14} />
-          {#if queueCount > 0}
-            <span class="queue-badge">{queueCount > 99 ? '99+' : queueCount}</span>
-          {/if}
-        </button>
-
-        <button class="control-btn small" onclick={handleMuteToggle} title={playerState.volume === 0 ? 'Unmute' : 'Mute'}>
-          {#if playerState.volume === 0}
-            <VolumeX size={14} />
-          {:else if playerState.volume < 50}
-            <Volume1 size={14} />
-          {:else}
-            <Volume2 size={14} />
-          {/if}
-        </button>
-        <div
-          class="volume-slider"
-          bind:this={volumeRef}
-          onmousedown={handleVolumeMouseDown}
-          role="slider"
-          tabindex="0"
-          aria-valuenow={playerState.volume}
-          aria-valuemin={0}
-          aria-valuemax={100}
-        >
-          <div class="volume-track">
-            <div class="volume-fill" style="width: {playerState.volume}%"></div>
-          </div>
-          <div class="volume-thumb" style="left: {playerState.volume}%"></div>
-        </div>
-      </div>
+      <button
+        class="ctrl-btn"
+        onclick={handleOpenQueue}
+        title="Queue ({queueCount})"
+      >
+        <ListMusic size={12} />
+      </button>
     </div>
   </div>
 </div>
@@ -381,30 +318,25 @@
     color: white;
     user-select: none;
     overflow: hidden;
+    cursor: grab;
   }
 
   .miniplayer.dragging {
     cursor: grabbing;
   }
 
-  /* Album Art Section */
+  /* Album Art */
   .artwork-section {
-    width: 150px;
-    height: 150px;
+    width: 124px;
+    height: 124px;
     flex-shrink: 0;
-    cursor: grab;
-    position: relative;
-    background: #0f0f11;
-  }
-
-  .artwork-section:active {
-    cursor: grabbing;
   }
 
   .artwork {
     width: 100%;
     height: 100%;
     object-fit: cover;
+    border-radius: 6px 0 0 6px;
   }
 
   .artwork-placeholder {
@@ -414,16 +346,18 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: rgba(255, 255, 255, 0.3);
+    color: rgba(255, 255, 255, 0.2);
+    border-radius: 6px 0 0 6px;
   }
 
-  /* Content Section */
+  /* Content */
   .content-section {
     flex: 1;
     display: flex;
     flex-direction: column;
-    padding: 12px 14px;
+    padding: 8px 10px;
     min-width: 0;
+    justify-content: space-between;
   }
 
   /* Header */
@@ -431,12 +365,7 @@
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
-    margin-bottom: 6px;
-    cursor: grab;
-  }
-
-  .header:active {
-    cursor: grabbing;
+    gap: 6px;
   }
 
   .track-info {
@@ -447,7 +376,7 @@
 
   .title {
     font-weight: 600;
-    font-size: 13px;
+    font-size: 11px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -456,27 +385,25 @@
   }
 
   .artist {
-    font-size: 11px;
+    font-size: 10px;
     color: rgba(255, 255, 255, 0.5);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    margin-top: 1px;
   }
 
   .window-controls {
     display: flex;
-    gap: 4px;
+    gap: 2px;
     flex-shrink: 0;
-    margin-left: 8px;
   }
 
   .window-btn {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 22px;
-    height: 22px;
+    width: 20px;
+    height: 20px;
     background: rgba(255, 255, 255, 0.06);
     border: none;
     color: rgba(255, 255, 255, 0.5);
@@ -491,37 +418,31 @@
   }
 
   .window-btn.restore:hover {
-    background: rgba(99, 102, 241, 0.25);
+    background: rgba(99, 102, 241, 0.3);
     color: #a5b4fc;
   }
 
-  /* Progress Section */
+  /* Progress */
   .progress-section {
     display: flex;
     align-items: center;
-    gap: 8px;
-    margin-bottom: 8px;
+    gap: 6px;
   }
 
   .time {
-    font-size: 10px;
+    font-size: 9px;
     font-family: var(--font-mono, monospace);
     font-variant-numeric: tabular-nums;
     color: rgba(255, 255, 255, 0.4);
-    min-width: 30px;
-  }
-
-  .time.remaining {
-    text-align: right;
+    min-width: 28px;
   }
 
   .progress-bar {
     flex: 1;
-    height: 16px;
+    height: 12px;
     display: flex;
     align-items: center;
     cursor: pointer;
-    position: relative;
   }
 
   .progress-track {
@@ -539,140 +460,48 @@
     transition: width 100ms linear;
   }
 
-  .progress-thumb {
-    position: absolute;
-    top: 50%;
-    width: 10px;
-    height: 10px;
-    background: white;
-    border-radius: 50%;
-    transform: translate(-50%, -50%);
-    opacity: 0;
-    transition: opacity 150ms ease;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-  }
-
-  .progress-bar:hover .progress-thumb {
-    opacity: 1;
-  }
-
-  /* Controls Row */
+  /* Controls */
   .controls-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .playback-controls {
-    display: flex;
-    align-items: center;
-    gap: 2px;
-  }
-
-  .right-controls {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-  }
-
-  .control-btn {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 30px;
-    height: 30px;
+    gap: 2px;
+  }
+
+  .ctrl-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
     background: transparent;
     border: none;
     color: rgba(255, 255, 255, 0.7);
     cursor: pointer;
     border-radius: 50%;
     transition: all 0.15s ease;
-    position: relative;
   }
 
-  .control-btn:hover {
+  .ctrl-btn:hover {
     background: rgba(255, 255, 255, 0.08);
     color: #fff;
   }
 
-  .control-btn:active {
+  .ctrl-btn:active {
     transform: scale(0.95);
   }
 
-  .control-btn.small {
-    width: 26px;
-    height: 26px;
-  }
-
-  .control-btn.active {
+  .ctrl-btn.active {
     color: #818cf8;
   }
 
-  .control-btn.play {
-    width: 36px;
-    height: 36px;
+  .ctrl-btn.play {
+    width: 28px;
+    height: 28px;
     background: rgba(255, 255, 255, 0.1);
-    margin: 0 2px;
   }
 
-  .control-btn.play:hover {
+  .ctrl-btn.play:hover {
     background: rgba(255, 255, 255, 0.18);
   }
-
-  .queue-badge {
-    position: absolute;
-    top: 0;
-    right: 0;
-    min-width: 14px;
-    height: 14px;
-    padding: 0 3px;
-    font-size: 9px;
-    font-weight: 600;
-    background: #6366f1;
-    color: white;
-    border-radius: 7px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  /* Volume Control */
-  .volume-slider {
-    width: 50px;
-    height: 16px;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    position: relative;
-  }
-
-  .volume-track {
-    width: 100%;
-    height: 3px;
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 2px;
-    overflow: hidden;
-  }
-
-  .volume-fill {
-    height: 100%;
-    background: rgba(255, 255, 255, 0.5);
-    border-radius: 2px;
-  }
-
-  .volume-thumb {
-    position: absolute;
-    top: 50%;
-    width: 8px;
-    height: 8px;
-    background: white;
-    border-radius: 50%;
-    transform: translate(-50%, -50%);
-    opacity: 0;
-    transition: opacity 150ms ease;
-  }
-
-  .volume-slider:hover .volume-thumb {
-    opacity: 1;
-  }
 </style>