Merge branch 'main' into exp/orbit

# Conflicts:
#	src/components/QueuePanel.tsx

src/components/AboutPsysonicLol.tsx

@@ -0,0 +1,162 @@
+import React, { useCallback, useEffect, useId, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { X } from 'lucide-react';
+import { open as openUrl } from '@tauri-apps/plugin-shell';
+import PsysonicLogo from './PsysonicLogo';
+
+const TAPS_TO_REVEAL_HINT = 10;
+const TARGET_CLICKS_IN_WINDOW = 100;
+const WINDOW_MS = 60_000;
+
+/** Hardcoded About lol copy — intentionally not in locale files. */
+const MSG_HINT =
+  'To become a developer, you need to click the Psysonic logo 100 times within one minute.';
+
+const MSG_CONGRATS_TITLE = 'Congratulations.';
+const MSG_CONGRATS_SIGN_OFF = 'Sincerely, your maintainers.';
+const MSG_CONGRATS_PS = "PS: Don't forget to star the repo! ★";
+
+/**
+ * About page brand row + Settings → System → About lol (logo taps + modal).
+ * Modal copy is English and hardcoded by design.
+ */
+export function AboutPsysonicBrandHeader({
+  appVersion,
+  aboutVersionLabel,
+}: {
+  appVersion: string;
+  aboutVersionLabel: string;
+}) {
+  const modalWordmarkGradSuffix = useId().replace(/:/g, '');
+  const [phase, setPhase] = useState<'idle' | 'hint' | 'done'>('idle');
+  const [idleTaps, setIdleTaps] = useState(0);
+  const [hintTimestamps, setHintTimestamps] = useState<number[]>([]);
+  const [overlayOpen, setOverlayOpen] = useState(false);
+
+  const onLogoClick = useCallback(() => {
+    if (phase === 'done') return;
+
+    if (phase === 'idle') {
+      setIdleTaps(prev => {
+        const next = prev + 1;
+        if (next >= TAPS_TO_REVEAL_HINT) queueMicrotask(() => setPhase('hint'));
+        return next;
+      });
+      return;
+    }
+
+    if (phase === 'hint') {
+      const now = Date.now();
+      setHintTimestamps(prev => {
+        const inWindow = prev.filter(t => t > now - WINDOW_MS);
+        const nextTimes = [...inWindow, now];
+        if (nextTimes.length >= TARGET_CLICKS_IN_WINDOW) {
+          queueMicrotask(() => {
+            setPhase('done');
+            setOverlayOpen(true);
+          });
+        }
+        return nextTimes;
+      });
+    }
+  }, [phase]);
+
+  const closeOverlay = useCallback(() => setOverlayOpen(false), []);
+
+  useEffect(() => {
+    if (!overlayOpen) return;
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.body.style.overflow = prevOverflow;
+    };
+  }, [overlayOpen]);
+
+  return (
+    <>
+      <div className="settings-about-header">
+        <button
+          type="button"
+          onClick={onLogoClick}
+          className="about-psysonic-logo-lol-hit"
+          aria-label="Psysonic"
+        >
+          <img src="/logo-psysonic.png" width={52} height={52} alt="" decoding="async" style={{ borderRadius: 14, display: 'block' }} />
+        </button>
+        <div>
+          <div style={{ fontFamily: 'var(--font-display)', fontSize: '1.25rem', fontWeight: 700, color: 'var(--text-primary)' }}>
+            Psysonic
+          </div>
+          <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 2 }}>
+            {aboutVersionLabel} {appVersion}
+          </div>
+        </div>
+      </div>
+
+      {phase === 'hint' && !overlayOpen && (
+        <p
+          style={{
+            fontSize: 12,
+            color: 'var(--text-secondary)',
+            marginTop: '0.5rem',
+            lineHeight: 1.5,
+          }}
+        >
+          {MSG_HINT}
+        </p>
+      )}
+
+      {overlayOpen &&
+        createPortal(
+          <div
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="about-psysonic-lol-title"
+            className="about-psysonic-lol-overlay"
+          >
+            <button
+              type="button"
+              className="about-psysonic-lol-close"
+              aria-label="Close"
+              onClick={closeOverlay}
+            >
+              <X size={26} strokeWidth={2.25} aria-hidden />
+            </button>
+            <div className="about-psysonic-lol-panel">
+              <div className="about-psysonic-lol-logo-slot">
+                <PsysonicLogo
+                  gradientIdSuffix={modalWordmarkGradSuffix}
+                  className="about-psysonic-lol-logo-mark"
+                  style={{
+                    height: 'clamp(3.25rem, 14vw, 5.75rem)',
+                    width: 'auto',
+                    maxWidth: 'min(100%, 420px)',
+                    display: 'block',
+                  }}
+                />
+              </div>
+              <div className="about-psysonic-lol-copy">
+                <h2 id="about-psysonic-lol-title" className="about-psysonic-lol-title">
+                  {MSG_CONGRATS_TITLE}
+                </h2>
+                <p className="about-psysonic-lol-lede">
+                  {"We're very much looking forward to you as a developer — join us on "}
+                  <button
+                    type="button"
+                    className="about-psysonic-lol-inline-link"
+                    onClick={() => void openUrl('https://github.com/Psychotoxical/psysonic')}
+                  >
+                    GitHub
+                  </button>
+                  {' and build great features!'}
+                </p>
+                <p className="about-psysonic-lol-signoff">{MSG_CONGRATS_SIGN_OFF}</p>
+                <p className="about-psysonic-lol-ps">{MSG_CONGRATS_PS}</p>
+              </div>
+            </div>
+          </div>,
+          document.body,
+        )}
+    </>
+  );
+}

src/components/MiniPlayer.tsx

@@ -3,7 +3,7 @@ import { createPortal } from 'react-dom';
 import { emit, listen } from '@tauri-apps/api/event';
 import { invoke } from '@tauri-apps/api/core';
 import { useTranslation } from 'react-i18next';
-import { Play, Pause, SkipBack, SkipForward, Pin, PinOff, Maximize2, X, ListMusic, Volume2, VolumeX, Shuffle, Infinity as InfinityIcon, Waves, ArrowUpToLine } from 'lucide-react';
+import { Play, Pause, SkipBack, SkipForward, Pin, PinOff, Maximize2, X, ListMusic, Volume2, VolumeX, Shuffle, Infinity as InfinityIcon, Waves, MoveRight } from 'lucide-react';
 import CachedImage from './CachedImage';
 import { buildCoverArtUrl, coverArtCacheKey } from '../api/subsonic';
 import { usePlayerStore } from '../store/playerStore';
@@ -582,7 +582,7 @@ export default function MiniPlayer() {
             data-tooltip={t('queue.gapless')}
             aria-label={t('queue.gapless')}
           >
-            <InfinityIcon size={13} />
+            <MoveRight size={13} />
           </button>
 
           <button
@@ -604,7 +604,7 @@ export default function MiniPlayer() {
             data-tooltip={t('queue.infiniteQueue')}
             aria-label={t('queue.infiniteQueue')}
           >
-            <ArrowUpToLine size={13} />
+            <InfinityIcon size={13} />
           </button>
 
           <span className="mini-player__toolbar-sep" aria-hidden />

src/components/QueuePanel.tsx

@@ -2,7 +2,7 @@ import React, { useState, useRef, useMemo, useEffect } from 'react';
 import { Track, usePlayerStore, songToTrack } from '../store/playerStore';
 import { useOrbitStore } from '../store/orbitStore';
 import OrbitGuestQueue from './OrbitGuestQueue';
-import { Play, Music, Star, X, Trash2, Save, FolderOpen, Shuffle, Infinity, Waves, MicVocal, ListMusic, Check, ListPlus, ArrowUpToLine, Radio, HardDrive, ChevronDown, Info, Share2 } from 'lucide-react';
+import { Play, Music, Star, X, Trash2, Save, FolderOpen, Shuffle, Infinity, Waves, MicVocal, ListMusic, Check, ListPlus, MoveRight, Radio, HardDrive, ChevronDown, Info, Share2 } from 'lucide-react';
 import { buildCoverArtUrl, coverArtCacheKey, getAlbum, getPlaylists, getPlaylist, updatePlaylist, deletePlaylist, SubsonicPlaylist } from '../api/subsonic';
 import { usePlaylistStore } from '../store/playlistStore';
 import { useCachedUrl } from './CachedImage';
@@ -602,7 +602,7 @@ function QueuePanelHostOrSolo() {
           data-tooltip={t('queue.gapless')}
           aria-label={t('queue.gapless')}
         >
-          <Infinity size={13} />
+          <MoveRight size={13} />
         </button>
         <div style={{ position: 'relative' }}>
           <button
@@ -654,7 +654,7 @@ function QueuePanelHostOrSolo() {
           data-tooltip={t('queue.infiniteQueue')}
           aria-label={t('queue.infiniteQueue')}
         >
-          <ArrowUpToLine size={13} />
+          <Infinity size={13} />
         </button>
       </div>