chore: bump version to 0.1.2 and fix tauri capability build error

2026-07-23 07:45:45 +00:00 · 2026-03-09 19:51:57 +01:00
48 changed files with 1404 additions and 3537 deletions
@@ -6,42 +6,7 @@ on:
  workflow_dispatch:

 jobs:
-  create-release:
-    permissions:
-      contents: write
-    runs-on: ubuntu-latest
-    outputs:
-      release_id: ${{ steps.create-release.outputs.result }}
-      package_version: ${{ steps.get-version.outputs.version }}
-    steps:
-      - uses: actions/checkout@v4
-      - name: setup node
-        uses: actions/setup-node@v4
-        with:
-          node-version: lts/*
-      - name: get version
-        id: get-version
-        run: echo "version=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT
-      - name: create release
-        id: create-release
-        uses: actions/github-script@v7
-        env:
-          PACKAGE_VERSION: ${{ steps.get-version.outputs.version }}
-        with:
-          script: |
-            const { data } = await github.rest.repos.createRelease({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              tag_name: `app-v${process.env.PACKAGE_VERSION}`,
-              name: `Psysonic v${process.env.PACKAGE_VERSION}`,
-              body: 'See the assets to download this version and install.',
-              draft: false,
-              prerelease: false
-            })
-            return data.id
-
-  build-macos-windows:
-    needs: create-release
+  release:
    permissions:
      contents: write
    strategy:
@@ -52,83 +17,41 @@ jobs:
            args: '--target aarch64-apple-darwin'
          - platform: 'macos-latest'
            args: '--target x86_64-apple-darwin'
+          - platform: 'ubuntu-22.04'
+            args: ''
          - platform: 'windows-latest'
            args: ''
+
    runs-on: ${{ matrix.settings.platform }}
    steps:
      - uses: actions/checkout@v4
+
+      - name: install dependencies (ubuntu only)
+        if: matrix.settings.platform == 'ubuntu-22.04'
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf
+
      - name: setup node
        uses: actions/setup-node@v4
        with:
          node-version: lts/*
+
      - name: install Rust stable
        uses: dtolnay/rust-toolchain@stable
        with:
          targets: ${{ matrix.settings.platform == 'macos-latest' && 'aarch64-apple-darwin,x86_64-apple-darwin' || '' }}
+
      - name: install npm dependencies
        run: npm install
+
      - uses: tauri-apps/tauri-action@v0
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
-          releaseId: ${{ needs.create-release.outputs.release_id }}
+          tagName: app-v__VERSION__
+          releaseName: 'Psysonic v__VERSION__'
+          releaseBody: 'See the assets to download this version and install.'
+          releaseDraft: false
+          prerelease: false
          args: ${{ matrix.settings.args }}
-
-  build-linux:
-    needs: create-release
-    permissions:
-      contents: write
-    runs-on: ubuntu-22.04
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: install dependencies
-        run: |
-          sudo apt-get update
-          sudo apt-get install -y \
-            libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf \
-            gstreamer1.0-plugins-base gstreamer1.0-plugins-good \
-            gstreamer1.0-plugins-bad gstreamer1.0-libav
-
-      - name: install linuxdeploy gstreamer plugin
-        run: |
-          wget -q "https://raw.githubusercontent.com/linuxdeploy/linuxdeploy-plugin-gstreamer/master/linuxdeploy-plugin-gstreamer.sh" \
-            -O /usr/local/bin/linuxdeploy-plugin-gstreamer.sh
-          chmod +x /usr/local/bin/linuxdeploy-plugin-gstreamer.sh
-
-      - name: setup node
-        uses: actions/setup-node@v4
-        with:
-          node-version: lts/*
-
-      - name: install Rust stable
-        uses: dtolnay/rust-toolchain@stable
-
-      - name: install npm dependencies
-        run: npm install
-
-      - name: build
-        run: npm run tauri:build
-        env:
-          APPIMAGE_EXTRACT_AND_RUN: 1
-
-      - name: patch AppImage AppRun
-        run: |
-          APPIMAGE=$(find src-tauri/target/release/bundle/appimage -name "*.AppImage" -not -name "*.tar.gz" | head -1)
-          echo "Patching: $APPIMAGE"
-          APPIMAGE_EXTRACT_AND_RUN=1 ./"$APPIMAGE" --appimage-extract
-          sed -i '/^exec /i export WEBKIT_DISABLE_COMPOSITING_MODE=1\nexport WEBKIT_DISABLE_DMABUF_RENDERER=1\nexport GDK_BACKEND=x11' squashfs-root/AppRun
-          wget -q "https://github.com/AppImage/AppImageKit/releases/download/continuous/appimagetool-x86_64.AppImage" \
-            -O appimagetool
-          chmod +x appimagetool
-          APPIMAGE_EXTRACT_AND_RUN=1 ./appimagetool squashfs-root "$APPIMAGE"
-          rm -rf squashfs-root appimagetool
-
-      - name: upload Linux artifacts
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: |
-          VERSION=${{ needs.create-release.outputs.package_version }}
-          find src-tauri/target/release/bundle \
-            \( -name "*.AppImage" -not -name "*.tar.gz" -o -name "*.deb" -o -name "*.rpm" \) \
-            | xargs gh release upload "app-v${VERSION}" --clobber
@@ -26,6 +26,3 @@ dist-ssr

 # Tauri
 src-tauri/target/
-
-# Documentation
-CLAUDE.md
@@ -5,124 +5,22 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

-## [1.0.9] - 2026-03-13
+## [0.1.1] - Beta Hotfix
+
+### Fixed
+- **App Termination Bug**: Fixed an issue where the application would hang in the background when the close button was clicked due to default Tauri tray icon handling. The `exit_app` event is now correctly triggered.
+
+## [0.1.0] - Initial Release

 ### Added
- **Gapless Playback**: The next track's audio pipeline is silently pre-warmed before the current track ends, eliminating the gap between songs — especially noticeable on live albums and concept records.
- **Pre-caching**: Prefetched Howl instances are now actually reused for playback, giving near-instant track transitions instead of a new HTTP connection each time.
- **Buffered Progress Indicator**: The seek bar now shows a secondary fill indicating how much of the current track has been buffered by the browser — visible in both the Player Bar and Fullscreen Player.
- **Resume on Startup**: Pressing Play after launching the app now resumes the last track at the saved playback position instead of doing nothing.
- **Album Track Hover Play Button**: Hovering over a track number in Album Detail reveals a play button for quick single-click playback.
- **Ken Burns Background**: The Fullscreen Player background now slowly drifts and zooms (Ken Burns effect) for a more cinematic feel.
- **F11 Fullscreen**: Toggle native borderless fullscreen with F11.
- **Compact Queue Now-Playing**: The current track block in the Queue Panel is now a slim horizontal strip (72 px thumbnail) instead of a full-width cover, freeing up significantly more space for the queue list on smaller screens.
+- **Core Architecture**: Full transition to Tauri v2 with React front-end.
+- **Subsonic API Integration**: Complete support for browsing albums, artists, playlists, and fetching streams.
+- **Theming System**: Implementation of the Catppuccin Mocha (Dark) and Latte (Light) design systems with dynamic CSS variables.
+- **Internationalization (i18n)**: Multi-language support structure established with English and German translations out of the box.
+- **Player & Queue**: Fully functional persistent queue with drag-and-drop support, repeat modes, and volume state retention.
+- **Live "Now Playing"**: Real-time dropdown to view active streams on the connected server.
+- **Settings & Network**: Dual URL configuration (LAN/External) with ping-testing capabilities.
+- **Full-Screen Player**: Immersive full-screen mode showing massive album art and track metadata.
+- **Continuous Integration**: Automated GitHub Actions to compile native binaries for Linux, macOS, and Windows.

-### Fixed
- **GStreamer Seek Stability**: Implemented a three-layer recovery system for Linux/GStreamer seek hangs: (1) seek queuing to prevent overlapping GStreamer seeks, (2) a 2-second watchdog that triggers automatic recovery if a seek never completes, (3) an 8-second hang detector that silently recreates the audio pipeline and resumes from the last known position if playback freezes entirely.
- **Fullscreen Player**: Removed drop shadow from cover art — looks cleaner on lighter artist backgrounds.
-
-### Changed
- **Hero Section**: Increased height (300 → 360 px) and cover art size (180 → 220 px) to prevent long album titles from clipping.
- **Player Bar**: Controls and progress bar moved closer together for a more balanced layout.
-
-## [1.0.8] - 2026-03-13
-
-### Added
- **Ambient Stage**: Completely redesigned Fullscreen Player. Experience an immersive atmosphere with drifting color orbs, a "breathing" cover animation, and high-resolution artist backgrounds.
- **Improved Drag & Drop**: Rewritten Play Queue reordering for rock-solid reliability on macOS (WKWebView) and Windows (WebView2).
-
-### Fixed
- **Linux Audio Stability**: Resolved playback stuttering when seeking under GStreamer by implementing a robust pause-seek-play sequence.
- **Data Integration**: Standardized `artistId` propagation across all track sources for better metadata consistency.
-
-## [1.0.7] - 2026-03-13
-
-### Added
- **Update Notifications**: Integrated a native update check system in the sidebar that notifies you when a new version is available on GitHub.
- **Improved Settings**: Refined layout and styling for a cleaner settings experience.
-
-### Fixed
- **UI/UX Refinements**: Polished sidebar animations and layout for better visual consistency.
- **i18n**: Added missing translations for update notifications and system status.
-
-## [1.0.6] - 2026-03-13
-
-### Added
- **Extended Themes**: Selection expanded to 8 themes, including the complete Nord series (Nord, Snowstorm, Frost, Aurora).
- **Light Theme Support**: Enhanced readability for Hero and Fullscreen Player components when using light themes (Latte, Snowstorm).
-
-### Fixed
- **Linux/Wayland Compatibility**: Fixed immediate crash on Wayland environments by forcing X11 backend for the AppImage.
- **Playback Stability**: Introduced seek debouncing to prevent audio stalls on Linux/GStreamer.
- **Windows Integration**: Improved drag-and-drop compatibility for systems using WebView2.
-
-## [1.0.5] - 2026-03-12
-
-### Added
- **Image Caching**: Integrated IndexedDB-based image caching for cover art and artist images, providing significantly faster loading times for frequently accessed items.
- **Improved Artist Discovery**: Faster scrolling in the Artists list using color-coded initial-based avatars for quick visual identification.
- **Random Albums**: New discovery page for exploring your library with random album selections.
- **Help & Documentation**: Added a dedicated help page for better user onboarding.
-
-### Changed
- **Optimized UI**: Instant "Now Playing" status updates via local state filtering for a more responsive experience.
- **Enhanced Data Flow**: General performance improvements in server communication and state management.
-
-## [1.0.4] - 2026-03-12
-
-### Added
- **Album Downloads**: Support for downloading entire albums with real-time progress tracking.
-
-### Fixed
- **Linux GPU Compatibility**: Patched AppImage to disable DMABUF renderer, fixing EGL/GPU crashes on older hardware.
- **CI/CD Reliability**: Optimized release workflow with split jobs for better stability across platforms.
-
-## [1.0.3] - 2026-03-12
-
-### Fixed
- **CI/CD Build**: Resolved build conflicts on Ubuntu 22.04 by removing redundant dev packages (`libunwind-dev`, gstreamer dev).
- **Linux AppImage**: Configured GStreamer bundling and verified runtime environment settings.
-
-## [1.0.2] - 2026-03-11
-
-### Fixed
- **Linux AppImage**: Integrated GStreamer bundling fix in CI/CD workflow.
- **CI/CD Reliability**: Set `APPIMAGE_EXTRACT_AND_RUN=1` to prevent FUSE-related issues.
-
-## [1.0.1] - 2026-03-11
-
-### Fixed
- **Optimized Codebase**: Integrated core fixes and performance improvements.
- **Improved Multi-Server Support**: Fixed edge cases in server switching and credential management.
- **Enhanced Security**: Switched to `crypto.getRandomValues()` for more robust auth salt generation.
- **Connection Reliability**: Added pre-verification for server connections to prevent state synchronization issues.
- **Linux Compatibility**: Applied workarounds for WebKitGTK compositing issues on Linux.
-
-### Changed
- Repository maintenance and preparation for the 1.0.1 release.
-
-## [1.0.0] - 2026-03-09
-
-### Added
- **Initial Public Release**: The first stable release of Psysonic.
- **Subsonic/Navidrome API**: Full integration for browsing library, artists, albums, and playlists.
- **Audio Playback**: Modern audio engine powered by Howler.js with support for various codecs.
- **Queue Management**: Persistent play queue with drag-and-drop reordering and server-side synchronization.
- **Secured Credentials**: Industry-standard security using Tauri's encrypted store for authentication tokens.
- **Design System**: Premium aesthetics based on the Catppuccin palette (Mocha & Latte themes).
- **Multi-Language**: Full localization support for English and German.
- **Fullscreen Mode**: Dedicated immersive player view with high-res album art.
- **Last.fm Scrobbling**: Built-in support for track scrobbling to Last.fm via Navidrome.
- **System Integration**: Native tray icon support, minimize-to-tray, and global media key handling.
- **Intelligent Networking**: Automatic or manual switching between LAN (Local) and External (Internet) addresses.
- **Live Now Playing**: Real-time view of what other users or players are streaming on your server.
- **Search**: Fast, real-time search for songs, albums, and artists.
-
-### Security
- **Hardened Sandbox**: Restricted filesystem permissions to only necessary download/cache directories.
- **API Lockdown**: Disabled global Tauri objects to mitigate XSS risks.
- **Credential Storage**: Replaced insecure `localStorage` with a native encrypted store.
-
-### Fixed
- Fixed a memory leak in the track prefetching engine.
- Improved Error handling for unstable Subsonic server responses.
+*Initial public release repository setup.*
@@ -12,37 +12,33 @@

 ---

+> [!WARNING]
+> **Beta Release (v0.1.0):** This is the very first public release. While fully usable, you might encounter bugs. Additionally, the English translation is currently incomplete in some areas.
+
 Psysonic is a beautiful desktop music player built completely from the ground up for the modern era. Utilizing **Tauri v2** and **React**, it offers a native-feeling, lightweight, and incredibly fast experience with a stunning UI inspired by the [Catppuccin](https://github.com/catppuccin/catppuccin) aesthetic. 

 Designed specifically for users hosting their own music via Navidrome or other Subsonic API servers, Psysonic aims to be the best way to interact with your personal library.

-
 ![Psysonic Screenshot](public/screenshot.png)

 ## ✨ Features

- 🎨 **Gorgeous UI**: 8 deeply integrated themes (Catppuccin series + Nord series) with smooth glassmorphism effects and micro-animations.
+- 🎨 **Gorgeous UI**: Deeply integrated Catppuccin themes (Mocha & Latte) with smooth glassmorphism effects and micro-animations.
 - ⚡ **Blazing Fast**: Built with Rust & Tauri, resulting in minimal RAM usage compared to typical Electron apps.
- 🌍 **Internationalization (i18n)**: Fully translated into English and German.
+- 🌍 **Internationalization (i18n)**: Fully translated into English and German, with the architecture built to easily support more languages.
 - 📻 **Live "Now Playing"**: See what other users on your server are currently listening to in real-time.
 - 🎵 **Last.fm Scrobbling**: Full integration for scrobbling your tracks via the Navidrome server.
- 💾 **IndexedDB Caching**: Ultra-fast loading times with persistent IndexedDB image caching for cover art and artist images.
- 📀 **Album Downloads**: Support for downloading entire albums directly to your local machine.
- 💿 **Album & Artist Views**: Beautiful grid displays and detailed artist pages with related albums and color-coded initial avatars for fast browsing.
- 🎛️ **Queue Management**: Drag & drop support, playlist saving, and loading directly built into the queue. Server-side queue synchronization is fully supported.
- 🔄 **Update Notifications**: Built-in update checker that notifies you when a new version is available on GitHub.
- 🖥️ **Cross-Platform**: Available natively for Windows, macOS, and Linux (including Wayland support).
-
-## ● Known Limitations
-
- **Linux (drag & drop cursor feedback)**: Due to a WebKitGTK limitation, the drag cursor does not reflect the drop operation type — it may appear as a "forbidden" symbol or show no indicator at all, depending on the desktop environment. Drag and drop itself works correctly.
+- 💾 **Local Caching**: Fast loading times with customizable image caching thresholds.
+- 💿 **Album & Artist Views**: Beautiful grid displays and detailed artist pages with related albums.
+- 🎛️ **Queue Management**: Drag & drop support, playlist saving, and loading directly built into the queue.
+- 🖥️ **Cross-Platform**: Available natively for Windows, macOS, and Linux.

 ## 📥 Installation

 Navigate to the [Releases](https://github.com/Psychotoxical/psysonic/releases) page and download the installer for your operating system.

 - **Windows**: `.exe` or `.msi`
- **macOS**: `.dmg` (Universal or Apple Silicon)
+- **macOS**: `.dmg`
 - **Linux**: `.AppImage` or `.deb`

 ## 🚀 Getting Started
@@ -58,8 +54,8 @@ If you want to build Psysonic from source or contribute to the project:

 ### Prerequisites
 - [Node.js](https://nodejs.org/) (v18+)
- [Rust](https://www.rust-lang.org/) (v1.75+)
- OS-specific build dependencies for Tauri (see the [Tauri prerequisites guide](https://tauri.app/v2/guides/getting-started/prerequisites)).
+- [Rust](https://www.rust-lang.org/)
+- OS-specific build dependencies for Tauri (see the [Tauri prerequisites guide](https://tauri.app/v1/guides/getting-started/prerequisites)).

 ### Setup

@@ -1,6 +1,6 @@
 {
  "name": "psysonic",
-  "version": "1.0.9",
+  "version": "0.1.2",
  "private": true,
  "scripts": {
    "dev": "vite",
@@ -2732,7 +2732,7 @@ dependencies = [

 [[package]]
 name = "psysonic"
-version = "1.0.9"
+version = "0.1.0"
 dependencies = [
 "serde",
 "serde_json",
@@ -1,6 +1,6 @@
 [package]
 name = "psysonic"
-version = "1.0.9"
+version = "0.1.2"
 description = "Psysonic Desktop Music Player"
 authors = []
 license = ""
@@ -1,5 +1,5 @@
 {
-  "$schema": "../gen/schemas/capability-schema.json",
+  "$schema": "https://schema.tauri.app/config/2/capability.json",
  "identifier": "default",
  "description": "Default capabilities for Psysonic",
  "platforms": ["linux", "macOS", "windows"],
@@ -22,11 +22,10 @@
    "fs:allow-write-file",
    "fs:allow-mkdir",
    "fs:scope-download-recursive",
+    "fs:scope-home-recursive",
    "core:window:allow-set-title",
    "core:window:allow-close",
    "core:window:allow-hide",
-    "core:window:allow-show",
-    "core:window:allow-set-fullscreen",
-    "core:window:allow-is-fullscreen"
+    "core:window:allow-show"
  ]
 }
@@ -1 +1 @@
-{"default":{"identifier":"default","description":"Default capabilities for Psysonic","local":true,"windows":["main"],"permissions":["core:default","shell:default","shell:allow-open","notification:default","global-shortcut:allow-register","global-shortcut:allow-unregister","store:default","store:allow-load","store:allow-set","store:allow-get","store:allow-save","dialog:default","dialog:allow-open","fs:default","fs:allow-write-file","fs:allow-mkdir","fs:scope-download-recursive","core:window:allow-set-title","core:window:allow-close","core:window:allow-hide","core:window:allow-show","core:window:allow-set-fullscreen","core:window:allow-is-fullscreen"],"platforms":["linux","macOS","windows"]}}
+{"default":{"identifier":"default","description":"Default capabilities for Psysonic","local":true,"windows":["main"],"permissions":["core:default","shell:default","shell:allow-open","notification:default","global-shortcut:allow-register","global-shortcut:allow-unregister","store:default","store:allow-load","store:allow-set","store:allow-get","store:allow-save","dialog:default","dialog:allow-open","fs:default","fs:allow-write-file","fs:allow-mkdir","fs:scope-download-recursive","fs:scope-home-recursive","core:window:allow-set-title","core:window:allow-close","core:window:allow-hide","core:window:allow-show"],"platforms":["linux","macOS","windows"]}}
@@ -1,7 +1,7 @@
 {
  "$schema": "https://schema.tauri.app/config/2",
  "productName": "Psysonic",
-  "version": "1.0.9",
+  "version": "0.1.2",
  "identifier": "dev.psysonic.app",
  "build": {
    "beforeDevCommand": "npm run dev",
@@ -10,7 +10,7 @@
    "frontendDist": "../dist"
  },
  "app": {
-    "withGlobalTauri": false,
+    "withGlobalTauri": true,
    "windows": [
      {
        "title": "Psysonic",
@@ -31,6 +31,7 @@
    "trayIcon": {
      "iconPath": "icons/icon.png",
      "iconAsTemplate": false,
+      "menuOnLeftClick": false,
      "title": "Psysonic",
      "tooltip": "Psysonic"
    }
@@ -44,11 +45,6 @@
      "icons/128x128@2x.png",
      "icons/icon.icns",
      "icons/icon.ico"
-    ],
-    "linux": {
-      "appimage": {
-        "bundleMediaFramework": true
-      }
-    }
+    ]
  }
 }
@@ -21,8 +21,6 @@ import AlbumDetail from './pages/AlbumDetail';
 import LabelAlbums from './pages/LabelAlbums';
 import Statistics from './pages/Statistics';
 import Playlists from './pages/Playlists';
-import Help from './pages/Help';
-import RandomAlbums from './pages/RandomAlbums';
 import FullscreenPlayer from './components/FullscreenPlayer';
 import ContextMenu from './components/ContextMenu';
 import { useAuthStore } from './store/authStore';
@@ -30,8 +28,8 @@ import { usePlayerStore } from './store/playerStore';
 import { useThemeStore } from './store/themeStore';

 function RequireAuth({ children }: { children: React.ReactNode }) {
-  const { isLoggedIn, servers, activeServerId } = useAuthStore();
-  if (!isLoggedIn || !activeServerId || servers.length === 0) return <Navigate to="/login" replace />;
+  const { isLoggedIn } = useAuthStore();
+  if (!isLoggedIn) return <Navigate to="/login" replace />;
  return <>{children}</>;
 }

@@ -144,7 +142,6 @@ function AppShell() {
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/albums" element={<Albums />} />
-            <Route path="/random-albums" element={<RandomAlbums />} />
            <Route path="/album/:id" element={<AlbumDetail />} />
            <Route path="/artists" element={<Artists />} />
            <Route path="/artist/:id" element={<ArtistDetail />} />
@@ -155,7 +152,6 @@ function AppShell() {
            <Route path="/label/:name" element={<LabelAlbums />} />
            <Route path="/statistics" element={<Statistics />} />
            <Route path="/settings" element={<Settings />} />
-            <Route path="/help" element={<Help />} />
          </Routes>
        </div>
      </main>
@@ -184,15 +180,9 @@ function TauriEventBridge() {
  const previous = usePlayerStore(s => s.previous);
  const { minimizeToTray } = useAuthStore();

-  // Spacebar → play/pause, F11 → window fullscreen
+  // Spacebar → play/pause (ignore when focus is in an input)
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
-      if (e.code === 'F11') {
-        e.preventDefault();
-        const win = getCurrentWindow();
-        win.isFullscreen().then(fs => win.setFullscreen(!fs));
-        return;
-      }
      if (e.code !== 'Space') return;
      const tag = (e.target as HTMLElement)?.tagName;
      if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;
@@ -2,38 +2,31 @@ import axios from 'axios';
 import md5 from 'md5';
 import { useAuthStore } from '../store/authStore';

-// ─── Secure random salt ────────────────────────────────────────
-function secureRandomSalt(): string {
-  const buf = new Uint8Array(8);
-  crypto.getRandomValues(buf);
-  return Array.from(buf, b => b.toString(16).padStart(2, '0')).join('');
-}
-
 // ─── Token Auth ───────────────────────────────────────────────
 function getAuthParams(username: string, password: string) {
-  const salt = secureRandomSalt();
+  const salt = Math.random().toString(36).substring(2, 10);
  const token = md5(password + salt);
  return { u: username, t: token, s: salt, v: '1.16.1', c: 'psysonic', f: 'json' };
 }

 function getClient() {
-  const { getBaseUrl, getActiveServer } = useAuthStore.getState();
-  const server = getActiveServer();
+  const { getBaseUrl, username, password } = useAuthStore.getState();
  const baseUrl = getBaseUrl();
-  if (!baseUrl) throw new Error('No server configured');
-  const params = getAuthParams(server?.username ?? '', server?.password ?? '');
-  return { baseUrl: `${baseUrl}/rest`, params };
+  const params = getAuthParams(username, password);
+
+  return {
+    baseUrl: `${baseUrl}/rest`,
+    params,
+  };
 }

-async function api<T>(endpoint: string, extra: Record<string, unknown> = {}, timeout = 15000): Promise<T> {
+async function api<T>(endpoint: string, extra: Record<string, unknown> = {}): Promise<T> {
  const { baseUrl, params } = getClient();
  const resp = await axios.get(`${baseUrl}/${endpoint}`, {
    params: { ...params, ...extra },
-    paramsSerializer: { indexes: null },
-    timeout,
+    paramsSerializer: { indexes: null }
  });
-  const data = resp.data?.['subsonic-response'];
-  if (!data) throw new Error('Invalid response from server (possibly not a Subsonic server)');
+  const data = resp.data['subsonic-response'];
  if (data.status !== 'ok') throw new Error(data.error?.message ?? 'Subsonic API error');
  return data as T;
 }
@@ -59,7 +52,6 @@ export interface SubsonicSong {
  artist: string;
  album: string;
  albumId: string;
-  artistId?: string;
  duration: number;
  track?: number;
  discNumber?: number;
@@ -67,11 +59,11 @@ export interface SubsonicSong {
  year?: number;
  userRating?: number;
  // Audio technical info
-  bitRate?: number;
-  suffix?: string;
-  contentType?: string;
-  size?: number;
-  samplingRate?: number;
+  bitRate?: number;       // kbps
+  suffix?: string;        // mp3, flac, opus…
+  contentType?: string;   // audio/mpeg, audio/flac…
+  size?: number;          // bytes
+  samplingRate?: number;  // Hz
  channelCount?: number;
  starred?: string;
 }
@@ -103,7 +95,7 @@ export interface SubsonicArtist {
 }

 export interface SubsonicGenre {
-  value: string;
+  value: string; // The genre name is returned as "value" by subsonic
  songCount: number;
  albumCount: number;
 }
@@ -127,24 +119,6 @@ export async function ping(): Promise<boolean> {
  }
 }

-/** Test a connection with explicit credentials — does NOT depend on store state. */
-export async function pingWithCredentials(serverUrl: string, username: string, password: string): Promise<boolean> {
-  try {
-    const base = serverUrl.startsWith('http') ? serverUrl.replace(/\/$/, '') : `http://${serverUrl.replace(/\/$/, '')}`;
-    const salt = secureRandomSalt();
-    const token = md5(password + salt);
-    const resp = await axios.get(`${base}/rest/ping.view`, {
-      params: { u: username, t: token, s: salt, v: '1.16.1', c: 'psysonic', f: 'json' },
-      paramsSerializer: { indexes: null },
-      timeout: 15000,
-    });
-    const data = resp.data?.['subsonic-response'];
-    return data?.status === 'ok';
-  } catch {
-    return false;
-  }
-}
-
 export async function getRandomAlbums(size = 6): Promise<SubsonicAlbum[]> {
  const data = await api<{ albumList2: { album: SubsonicAlbum[] } }>('getAlbumList2.view', { type: 'random', size });
  return data.albumList2?.album ?? [];
@@ -231,8 +205,13 @@ export async function getStarred(): Promise<StarredResults> {
      song?: SubsonicSong[];
    }
  }>('getStarred2.view');
+  
  const r = data.starred2 ?? {};
-  return { artists: r.artist ?? [], albums: r.album ?? [], songs: r.song ?? [] };
+  return {
+    artists: r.artist ?? [],
+    albums: r.album ?? [],
+    songs: r.song ?? [],
+  };
 }

 export async function star(id: string, type: 'song' | 'album' | 'artist' = 'album'): Promise<void> {
@@ -291,50 +270,33 @@ export async function reportNowPlaying(id: string): Promise<void> {

 // ─── Stream URL ───────────────────────────────────────────────
 export function buildStreamUrl(id: string): string {
-  const { getBaseUrl, getActiveServer } = useAuthStore.getState();
-  const server = getActiveServer();
+  const { getBaseUrl, username, password } = useAuthStore.getState();
  const baseUrl = getBaseUrl();
-  const salt = secureRandomSalt();
-  const token = md5((server?.password ?? '') + salt);
-  const p = new URLSearchParams({
-    id,
-    u: server?.username ?? '',
-    t: token, s: salt, v: '1.16.1', c: 'psysonic', f: 'json',
-  });
+  const { u, t, s, v, c, f } = (() => {
+    const salt = Math.random().toString(36).substring(2, 10);
+    const token = md5(password + salt);
+    return { u: username, t: token, s: salt, v: '1.16.1', c: 'psysonic', f: 'json' };
+  })();
+
+  const p = new URLSearchParams({ id, u, t, s, v, c, f });
  return `${baseUrl}/rest/stream.view?${p.toString()}`;
 }

-/** Stable cache key for cover art — does not include ephemeral auth params. */
-export function coverArtCacheKey(id: string, size = 256): string {
-  const server = useAuthStore.getState().getActiveServer();
-  return `${server?.id ?? '_'}:cover:${id}:${size}`;
-}
-
 export function buildCoverArtUrl(id: string, size = 256): string {
-  const { getBaseUrl, getActiveServer } = useAuthStore.getState();
-  const server = getActiveServer();
+  const { getBaseUrl, username, password } = useAuthStore.getState();
  const baseUrl = getBaseUrl();
-  const salt = secureRandomSalt();
-  const token = md5((server?.password ?? '') + salt);
-  const p = new URLSearchParams({
-    id, size: String(size),
-    u: server?.username ?? '',
-    t: token, s: salt, v: '1.16.1', c: 'psysonic', f: 'json',
-  });
+  const salt = Math.random().toString(36).substring(2, 10);
+  const token = md5(password + salt);
+  const p = new URLSearchParams({ id, size: String(size), u: username, t: token, s: salt, v: '1.16.1', c: 'psysonic', f: 'json' });
  return `${baseUrl}/rest/getCoverArt.view?${p.toString()}`;
 }

 export function buildDownloadUrl(id: string): string {
-  const { getBaseUrl, getActiveServer } = useAuthStore.getState();
-  const server = getActiveServer();
+  const { getBaseUrl, username, password } = useAuthStore.getState();
  const baseUrl = getBaseUrl();
-  const salt = secureRandomSalt();
-  const token = md5((server?.password ?? '') + salt);
-  const p = new URLSearchParams({
-    id,
-    u: server?.username ?? '',
-    t: token, s: salt, v: '1.16.1', c: 'psysonic', f: 'json',
-  });
+  const salt = Math.random().toString(36).substring(2, 10);
+  const token = md5(password + salt);
+  const p = new URLSearchParams({ id, u: username, t: token, s: salt, v: '1.16.1', c: 'psysonic', f: 'json' });
  return `${baseUrl}/rest/download.view?${p.toString()}`;
 }

@@ -345,6 +307,7 @@ export async function getPlaylists(): Promise<SubsonicPlaylist[]> {
 }

 export async function getPlaylist(id: string): Promise<{ playlist: SubsonicPlaylist; songs: SubsonicSong[] }> {
+  // Songs inside a playlist are typically in the 'entry' array
  const data = await api<{ playlist: SubsonicPlaylist & { entry: SubsonicSong[] } }>('getPlaylist.view', { id });
  const { entry, ...playlist } = data.playlist;
  return { playlist, songs: entry ?? [] };
@@ -367,7 +330,11 @@ export async function getPlayQueue(): Promise<{ current?: string; position?: num
  try {
    const data = await api<{ playQueue: { current?: string; position?: number; entry?: SubsonicSong[] } }>('getPlayQueue.view');
    const pq = data.playQueue;
-    return { current: pq?.current, position: pq?.position, songs: pq?.entry ?? [] };
+    return {
+      current: pq?.current,
+      position: pq?.position,
+      songs: pq?.entry ?? []
+    };
  } catch {
    return { songs: [] };
  }
@@ -375,9 +342,12 @@ export async function getPlayQueue(): Promise<{ current?: string; position?: num

 export async function savePlayQueue(songIds: string[], current?: string, position?: number): Promise<void> {
  const params: Record<string, unknown> = {};
-  if (songIds.length > 0) params.id = songIds;
+  if (songIds.length > 0) {
+    params.id = songIds;
+  }
  if (current !== undefined) params.current = current;
  if (position !== undefined) params.position = position;
+  
  await api('savePlayQueue.view', params);
 }

@@ -385,6 +355,7 @@ export async function savePlayQueue(songIds: string[], current?: string, positio
 export async function getNowPlaying(): Promise<SubsonicNowPlaying[]> {
  try {
    const data = await api<{ nowPlaying: { entry?: SubsonicNowPlaying[] } | '' }>('getNowPlaying.view');
+    // Navidrome might return an empty string or empty object if nobody is playing
    if (!data.nowPlaying || typeof data.nowPlaying === 'string') return [];
    return data.nowPlaying.entry ?? [];
  } catch {
@@ -1,9 +1,8 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Play } from 'lucide-react';
-import { SubsonicAlbum, buildCoverArtUrl, coverArtCacheKey } from '../api/subsonic';
+import { SubsonicAlbum, buildCoverArtUrl } from '../api/subsonic';
 import { usePlayerStore } from '../store/playerStore';
-import CachedImage from './CachedImage';

 interface AlbumCardProps {
  album: SubsonicAlbum;
@@ -29,7 +28,7 @@ export default function AlbumCard({ album }: AlbumCardProps) {
      draggable
      onDragStart={e => {
        e.dataTransfer.effectAllowed = 'copy';
-        e.dataTransfer.setData('text/plain', JSON.stringify({
+        e.dataTransfer.setData('application/json', JSON.stringify({
          type: 'album',
          id: album.id,
          name: album.name,
@@ -38,7 +37,7 @@ export default function AlbumCard({ album }: AlbumCardProps) {
    >
      <div className="album-card-cover">
        {coverUrl ? (
-          <CachedImage src={coverUrl} cacheKey={coverArtCacheKey(album.coverArt!, 300)} alt={`${album.name} Cover`} loading="lazy" />
+          <img src={coverUrl} alt={`${album.name} Cover`} loading="lazy" />
        ) : (
          <div className="album-card-cover-placeholder">
            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
@@ -3,7 +3,6 @@ import { SubsonicAlbum } from '../api/subsonic';
 import AlbumCard from './AlbumCard';
 import { ChevronLeft, ChevronRight, ArrowRight } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';

 interface Props {
  title: string;
@@ -14,7 +13,6 @@ interface Props {
 }

 export default function AlbumRow({ title, albums, moreLink, moreText, onLoadMore }: Props) {
-  const { t } = useTranslation();
  const scrollRef = useRef<HTMLDivElement>(null);
  const navigate = useNavigate();
  const [showLeft, setShowLeft] = useState(false);
@@ -88,7 +86,7 @@ export default function AlbumRow({ title, albums, moreLink, moreText, onLoadMore
              <div style={{ padding: '1rem', background: 'var(--bg-app)', borderRadius: '50%' }}>
                <div className="spinner" style={{ width: 24, height: 24 }} />
              </div>
-              <span style={{ fontSize: 13, fontWeight: 500 }}>{t('common.loadingMore')}</span>
+              <span style={{ fontSize: 13, fontWeight: 500 }}>Lädt...</span>
            </div>
          )}
          {!loadingMore && moreLink && (
@@ -96,7 +94,7 @@ export default function AlbumRow({ title, albums, moreLink, moreText, onLoadMore
              <div style={{ padding: '1rem', background: 'var(--bg-app)', borderRadius: '50%' }}>
                <ArrowRight size={24} />
              </div>
-              <span style={{ fontSize: 13, fontWeight: 500 }}>{moreText}</span>
+              <span style={{ fontSize: 13, fontWeight: 500 }}>{moreText || 'Alle ansehen'}</span>
            </div>
          )}
        </div>
@@ -3,7 +3,6 @@ import { SubsonicArtist } from '../api/subsonic';
 import ArtistCardLocal from './ArtistCardLocal';
 import { ChevronLeft, ChevronRight, ArrowRight } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';

 interface Props {
  title: string;
@@ -14,7 +13,6 @@ interface Props {
 }

 export default function ArtistRow({ title, artists, moreLink, moreText, onLoadMore }: Props) {
-  const { t } = useTranslation();
  const scrollRef = useRef<HTMLDivElement>(null);
  const navigate = useNavigate();
  const [showLeft, setShowLeft] = useState(false);
@@ -88,7 +86,7 @@ export default function ArtistRow({ title, artists, moreLink, moreText, onLoadMo
              <div style={{ padding: '1rem', background: 'var(--bg-app)', borderRadius: '50%' }}>
                <div className="spinner" style={{ width: 24, height: 24 }} />
              </div>
-              <span style={{ fontSize: 13, fontWeight: 500 }}>{t('common.loadingMore')}</span>
+              <span style={{ fontSize: 13, fontWeight: 500 }}>Lädt...</span>
            </div>
          )}
          {!loadingMore && moreLink && (
@@ -96,7 +94,7 @@ export default function ArtistRow({ title, artists, moreLink, moreText, onLoadMo
              <div style={{ padding: '1rem', background: 'var(--bg-app)', borderRadius: '50%' }}>
                <ArrowRight size={24} />
              </div>
-              <span style={{ fontSize: 13, fontWeight: 500 }}>{moreText}</span>
+              <span style={{ fontSize: 13, fontWeight: 500 }}>{moreText || 'Alle ansehen'}</span>
            </div>
          )}
        </div>
@@ -1,21 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { getCachedUrl } from '../utils/imageCache';
-
-interface CachedImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
-  src: string;
-  cacheKey: string;
-}
-
-export function useCachedUrl(fetchUrl: string, cacheKey: string): string {
-  const [resolved, setResolved] = useState('');
-  useEffect(() => {
-    if (!fetchUrl) { setResolved(''); return; }
-    getCachedUrl(fetchUrl, cacheKey).then(setResolved);
-  }, [fetchUrl, cacheKey]);
-  return resolved || fetchUrl;
-}
-
-export default function CachedImage({ src, cacheKey, ...props }: CachedImageProps) {
-  const resolvedSrc = useCachedUrl(src, cacheKey);
-  return <img src={resolvedSrc} {...props} />;
-}
@@ -7,23 +7,13 @@ import { useAuthStore } from '../store/authStore';
 import { open } from '@tauri-apps/plugin-shell';
 import { writeFile } from '@tauri-apps/plugin-fs';
 import { join } from '@tauri-apps/api/path';
-import { useTranslation } from 'react-i18next';
-
-function sanitizeFilename(name: string): string {
-  return name
-    .replace(/[/\\?%*:|"<>]/g, '-')
-    .replace(/\.{2,}/g, '.')
-    .replace(/^[\s.]+|[\s.]+$/g, '')
-    .substring(0, 200) || 'download';
-}

 export default function ContextMenu() {
-  const { t } = useTranslation();
  const { contextMenu, closeContextMenu, playTrack, enqueue, queue, currentTrack, removeTrack } = usePlayerStore();
  const auth = useAuthStore();
  const navigate = useNavigate();
  const menuRef = useRef<HTMLDivElement>(null);
-
+  
  // Adjusted coordinates to keep menu on screen
  const [coords, setCoords] = useState({ x: 0, y: 0 });

@@ -38,14 +28,37 @@ export default function ContextMenu() {
      const rect = menuRef.current.getBoundingClientRect();
      const winW = window.innerWidth;
      const winH = window.innerHeight;
+      
      let finalX = contextMenu.x;
      let finalY = contextMenu.y;
+      
      if (finalX + rect.width > winW) finalX = winW - rect.width - 10;
      if (finalY + rect.height > winH) finalY = winH - rect.height - 10;
+      
      setCoords({ x: finalX, y: finalY });
    }
  }, [contextMenu.isOpen, contextMenu.x, contextMenu.y]);

+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        closeContextMenu();
+      }
+    };
+    const handleEsc = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') closeContextMenu();
+    };
+
+    if (contextMenu.isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+      document.addEventListener('keydown', handleEsc);
+    }
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('keydown', handleEsc);
+    };
+  }, [contextMenu.isOpen, closeContextMenu]);
+
  if (!contextMenu.isOpen || !contextMenu.item) return null;

  const { type, item, queueIndex } = contextMenu;
@@ -62,7 +75,7 @@ export default function ContextMenu() {
        const top = await getTopSongs(artistName);
        const radioTracks = [...top, ...similar].map(s => ({
          id: s.id, title: s.title, artist: s.artist, album: s.album,
-          albumId: s.albumId, artistId: s.artistId, duration: s.duration, coverArt: s.coverArt, track: s.track,
+          albumId: s.albumId, duration: s.duration, coverArt: s.coverArt, track: s.track,
          year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating,
        }));
        playTrack(radioTracks[0], radioTracks);
@@ -78,140 +91,139 @@ export default function ContextMenu() {
      const response = await fetch(url);
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      const blob = await response.blob();
-
+      
      if (auth.downloadFolder) {
        const buffer = await blob.arrayBuffer();
-        const path = await join(auth.downloadFolder, `${sanitizeFilename(albumName)}.zip`);
+        const path = await join(auth.downloadFolder, `${albumName}.zip`);
        await writeFile(path, new Uint8Array(buffer));
      } else {
        const blobUrl = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = blobUrl;
-        a.download = `${sanitizeFilename(albumName)}.zip`;
+        a.download = `${albumName}.zip`;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        setTimeout(() => URL.revokeObjectURL(blobUrl), 2000);
      }
    } catch (e) {
-      console.error('Download failed:', e);
+      console.error('Download fehlgeschlagen:', e);
    }
  };

+
  return (
-    <>
-      {/* Transparent backdrop — catches all outside clicks cleanly, preventing freeze */}
-      <div
-        style={{ position: 'fixed', inset: 0, zIndex: 998 }}
-        onMouseDown={() => closeContextMenu()}
-      />
-      <div
-        ref={menuRef}
-        className="context-menu animate-fade-in"
-        style={{ left: coords.x, top: coords.y, zIndex: 999 }}
-      >
-        {(type === 'song' || type === 'album-song') && (() => {
-          const song = item as Track;
-          return (
-            <>
-              <div className="context-menu-item" onClick={() => handleAction(() => playTrack(song, [song]))}>
-                <Play size={14} /> {t('contextMenu.playNow')}
-              </div>
-              <div className="context-menu-item" onClick={() => handleAction(() => {
-                if (!currentTrack) {
-                  playTrack(song, [song]);
-                  return;
-                }
-                const currentIdx = usePlayerStore.getState().queueIndex;
-                const newQueue = [...queue];
-                newQueue.splice(currentIdx + 1, 0, song);
-                usePlayerStore.setState({ queue: newQueue });
+    <div 
+      ref={menuRef}
+      className="context-menu animate-fade-in"
+      style={{ left: coords.x, top: coords.y }}
+    >
+      {(type === 'song' || type === 'album-song') && (() => {
+        const song = item as Track;
+        return (
+          <>
+            <div className="context-menu-item" onClick={() => handleAction(() => playTrack(song, [song]))}>
+              <Play size={14} /> Direkt abspielen
+            </div>
+            <div className="context-menu-item" onClick={() => handleAction(() => {
+              if (!currentTrack) {
+                playTrack(song, [song]);
+                return;
+              }
+              const currentIdx = usePlayerStore.getState().queueIndex;
+              const newQueue = [...queue];
+              newQueue.splice(currentIdx + 1, 0, song);
+              usePlayerStore.setState({ queue: newQueue });
+            })}>
+              <ChevronRight size={14} /> Als Nächstes abspielen
+            </div>
+            <div className="context-menu-item" onClick={() => handleAction(() => enqueue([song]))}>
+              <ListPlus size={14} /> Zur Warteschlange hinzufügen
+            </div>
+            {type === 'album-song' && (
+              <div className="context-menu-item" onClick={() => handleAction(async () => {
+                const albumData = await getAlbum(song.albumId);
+                const tracks = albumData.songs.map(s => ({
+                  id: s.id, title: s.title, artist: s.artist, album: s.album,
+                  albumId: s.albumId, duration: s.duration, coverArt: s.coverArt, track: s.track,
+                  year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating,
+                }));
+                enqueue(tracks);
              })}>
-                <ChevronRight size={14} /> {t('contextMenu.playNext')}
+                <ListPlus size={14} /> Ganzes Album einreihen
              </div>
-              <div className="context-menu-item" onClick={() => handleAction(() => enqueue([song]))}>
-                <ListPlus size={14} /> {t('contextMenu.addToQueue')}
-              </div>
-              {type === 'album-song' && (
-                <div className="context-menu-item" onClick={() => handleAction(async () => {
-                  const albumData = await getAlbum(song.albumId);
-                  const tracks = albumData.songs.map(s => ({
-                    id: s.id, title: s.title, artist: s.artist, album: s.album,
-                    albumId: s.albumId, artistId: s.artistId, duration: s.duration, coverArt: s.coverArt, track: s.track,
-                    year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating,
-                  }));
-                  enqueue(tracks);
-                })}>
-                  <ListPlus size={14} /> {t('contextMenu.enqueueAlbum')}
-                </div>
-              )}
-              <div className="context-menu-divider" />
-              <div className="context-menu-item" onClick={() => handleAction(() => startRadio(song.artist, song.artist))}>
-                <Radio size={14} /> {t('contextMenu.startRadio')}
-              </div>
-              <div className="context-menu-item" onClick={() => handleAction(() => star(song.id, 'song'))}>
-                <Star size={14} /> {t('contextMenu.favorite')}
-              </div>
-            </>
-          );
-        })()}
+            )}
+            
+            <div className="context-menu-divider" />
+            
+            <div className="context-menu-item" onClick={() => handleAction(() => startRadio(song.artist, song.artist))}>
+              <Radio size={14} /> Song-Radio starten
+            </div>
+            <div className="context-menu-item" onClick={() => handleAction(() => star(song.id, 'song'))}>
+              <Star size={14} /> Favorisieren
+            </div>
+          </>
+        );
+      })()}

-        {type === 'album' && (() => {
-          const album = item as SubsonicAlbum;
-          return (
-            <>
-              <div className="context-menu-item" onClick={() => handleAction(() => navigate(`/album/${album.id}`))}>
-                <Play size={14} /> {t('contextMenu.openAlbum')}
-              </div>
-              <div className="context-menu-divider" />
-              <div className="context-menu-item" onClick={() => handleAction(() => navigate(`/artist/${album.artistId}`))}>
-                <User size={14} /> {t('contextMenu.goToArtist')}
-              </div>
-              <div className="context-menu-item" onClick={() => handleAction(() => star(album.id, 'album'))}>
-                <Star size={14} /> {t('contextMenu.favoriteAlbum')}
-              </div>
-              <div className="context-menu-item" onClick={() => handleAction(() => downloadAlbum(album.name, album.id))}>
-                <Download size={14} /> {t('contextMenu.download')}
-              </div>
-            </>
-          );
-        })()}
+      {type === 'album' && (() => {
+        const album = item as SubsonicAlbum;
+        return (
+          <>
+            <div className="context-menu-item" onClick={() => handleAction(() => {
+              // we don't have tracks here immediately, so we'd navigate or fetch. For now, navigate.
+              navigate(`/album/${album.id}`);
+            })}>
+              <Play size={14} /> Album öffnen
+            </div>
+            <div className="context-menu-divider" />
+            <div className="context-menu-item" onClick={() => handleAction(() => navigate(`/artist/${album.artistId}`))}>
+              <User size={14} /> Zum Künstler
+            </div>
+            <div className="context-menu-item" onClick={() => handleAction(() => star(album.id, 'album'))}>
+              <Star size={14} /> Album favorisieren
+            </div>
+            <div className="context-menu-item" onClick={() => handleAction(() => downloadAlbum(album.name, album.id))}>
+              <Download size={14} /> Herunterladen (ZIP)
+            </div>
+          </>
+        );
+      })()}

-        {type === 'artist' && (() => {
-          const artist = item as SubsonicArtist;
-          return (
-            <>
-              <div className="context-menu-item" onClick={() => handleAction(() => startRadio(artist.id, artist.name))}>
-                <Radio size={14} /> {t('contextMenu.startRadio')}
-              </div>
-              <div className="context-menu-divider" />
-              <div className="context-menu-item" onClick={() => handleAction(() => star(artist.id, 'artist'))}>
-                <Star size={14} /> {t('contextMenu.favoriteArtist')}
-              </div>
-            </>
-          );
-        })()}
+      {type === 'artist' && (() => {
+        const artist = item as SubsonicArtist;
+        return (
+          <>
+            <div className="context-menu-item" onClick={() => handleAction(() => startRadio(artist.id, artist.name))}>
+              <Radio size={14} /> Künstler-Radio starten
+            </div>
+            <div className="context-menu-divider" />
+            <div className="context-menu-item" onClick={() => handleAction(() => star(artist.id, 'artist'))}>
+              <Star size={14} /> Künstler favorisieren
+            </div>
+          </>
+        );
+      })()}

-        {type === 'queue-item' && (() => {
-          const song = item as Track;
-          return (
-            <>
-              <div className="context-menu-item" onClick={() => handleAction(() => playTrack(song, queue))}>
-                <Play size={14} /> {t('contextMenu.playNow')}
-              </div>
-              <div className="context-menu-item" style={{ color: 'var(--danger)' }} onClick={() => handleAction(() => {
-                if (queueIndex !== undefined) removeTrack(queueIndex);
-              })}>
-                {t('contextMenu.removeFromQueue')}
-              </div>
-              <div className="context-menu-divider" />
-              <div className="context-menu-item" onClick={() => handleAction(() => startRadio(song.artist, song.artist))}>
-                <Radio size={14} /> {t('contextMenu.startRadio')}
-              </div>
-            </>
-          );
-        })()}
-      </div>
-    </>
+      {type === 'queue-item' && (() => {
+        const song = item as Track;
+        return (
+          <>
+            <div className="context-menu-item" onClick={() => handleAction(() => playTrack(song, queue))}>
+              <Play size={14} /> Direkt abspielen
+            </div>
+            <div className="context-menu-item" style={{ color: 'var(--danger)' }} onClick={() => handleAction(() => {
+              if (queueIndex !== undefined) removeTrack(queueIndex);
+            })}>
+              Diesen Song entfernen
+            </div>
+            <div className="context-menu-divider" />
+            <div className="context-menu-item" onClick={() => handleAction(() => startRadio(song.artist, song.artist))}>
+              <Radio size={14} /> Song-Radio starten
+            </div>
+          </>
+        );
+      })()}
+    </div>
  );
 }
@@ -1,12 +1,10 @@
 import React, { useCallback, useEffect, useState, useRef, memo } from 'react';
 import {
-  Play, Pause, SkipBack, SkipForward,
+  Play, Pause, SkipBack, SkipForward, Volume2, VolumeX,
  ChevronDown, Repeat, Repeat1, Square, Music
 } from 'lucide-react';
 import { usePlayerStore } from '../store/playerStore';
-import { buildCoverArtUrl, coverArtCacheKey, getArtistInfo } from '../api/subsonic';
-import CachedImage, { useCachedUrl } from './CachedImage';
-import { useTranslation } from 'react-i18next';
+import { buildCoverArtUrl } from '../api/subsonic';

 function formatTime(seconds: number): string {
  if (!seconds || isNaN(seconds)) return '0:00';
@@ -15,8 +13,9 @@ function formatTime(seconds: number): string {
  return `${m}:${s.toString().padStart(2, '0')}`;
 }

-// ─── Crossfading blurred background ───────────────────────────────────────────
+// ─── Crossfading blurred background — two stacked divs for true crossfade ───
 const FsBg = memo(function FsBg({ url }: { url: string }) {
+  // Each layer: {url, id, visible}
  const [layers, setLayers] = useState<Array<{ url: string; id: number; visible: boolean }>>(() =>
    url ? [{ url, id: 0, visible: true }] : []
  );
@@ -25,10 +24,15 @@ const FsBg = memo(function FsBg({ url }: { url: string }) {
  useEffect(() => {
    if (!url) return;
    const id = counterRef.current++;
+    // Add the new layer (opacity 0)
    setLayers(prev => [...prev, { url, id, visible: false }]);
+    // One frame later: make new layer visible (0→1) and old ones invisible (1→0)
    const t1 = setTimeout(() => {
-      setLayers(prev => prev.map(l => ({ ...l, visible: l.id === id })));
+      setLayers(prev =>
+        prev.map(l => ({ ...l, visible: l.id === id }))
+      );
    }, 20);
+    // After transition: clean up old layers
    const t2 = setTimeout(() => {
      setLayers(prev => prev.filter(l => l.id === id));
    }, 800);
@@ -49,88 +53,67 @@ const FsBg = memo(function FsBg({ url }: { url: string }) {
  );
 });

-// ─── Progress bar (isolated — re-renders every tick) ──────────────────────────
+// ─── Isolated progress sub-component (re-renders every tick, nothing else does) ───
 const FsProgress = memo(function FsProgress({ duration }: { duration: number }) {
  const progress    = usePlayerStore(s => s.progress);
-  const buffered    = usePlayerStore(s => s.buffered);
  const currentTime = usePlayerStore(s => s.currentTime);
  const seek        = usePlayerStore(s => s.seek);

-  const handleSeek = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => seek(parseFloat(e.target.value)),
-    [seek]
-  );
-
-  const pct = progress * 100;
-  const buf = Math.max(pct, buffered * 100);
+  const handleSeek = useCallback((e: React.ChangeEvent<HTMLInputElement>) => seek(parseFloat(e.target.value)), [seek]);

  return (
-    <div className="fs-progress-wrap">
-      <span className="fs-time">{formatTime(currentTime)}</span>
-      <div className="fs-progress-bar">
-        <input
-          type="range" min={0} max={1} step={0.001}
-          value={progress}
-          onChange={handleSeek}
-          style={{
-            '--pct': `${pct}%`,
-            '--buf': `${buf}%`,
-          } as React.CSSProperties}
-          aria-label="progress"
-        />
+    <div className="fs-bottom">
+      <div className="fs-progress-wrap">
+        <span className="fs-time">{formatTime(currentTime)}</span>
+        <div className="fs-progress-bar">
+          <input
+            type="range" min={0} max={1} step={0.001}
+            value={progress}
+            onChange={handleSeek}
+            style={{ '--pct': `${progress * 100}%` } as React.CSSProperties}
+            aria-label="Songfortschritt"
+          />
+        </div>
+        <span className="fs-time">{formatTime(duration)}</span>
      </div>
-      <span className="fs-time">{formatTime(duration)}</span>
    </div>
  );
 });

-// ─── Play/Pause button (isolated — subscribes to isPlaying only) ──────────────
+
+
+// ─── Isolated play/pause button (subscribes to isPlaying only) ───
 const FsPlayBtn = memo(function FsPlayBtn() {
-  const { t } = useTranslation();
  const isPlaying  = usePlayerStore(s => s.isPlaying);
  const togglePlay = usePlayerStore(s => s.togglePlay);
  return (
-    <button className="fs-btn fs-btn-play" onClick={togglePlay} aria-label={isPlaying ? t('player.pause') : t('player.play')}>
-      {isPlaying ? <Pause size={25} /> : <Play size={25} fill="currentColor" />}
+    <button className="fs-btn fs-btn-play" onClick={togglePlay} aria-label={isPlaying ? 'Pause' : 'Play'}>
+      {isPlaying ? <Pause size={36} /> : <Play size={36} fill="currentColor" />}
    </button>
  );
 });

-// ─── Main component ────────────────────────────────────────────────────────────
 interface FullscreenPlayerProps {
  onClose: () => void;
 }

 export default function FullscreenPlayer({ onClose }: FullscreenPlayerProps) {
-  const { t } = useTranslation();
+  // Static/slow-changing state only — does NOT subscribe to progress or currentTime
  const currentTrack = usePlayerStore(s => s.currentTrack);
  const repeatMode   = usePlayerStore(s => s.repeatMode);
+  const queue        = usePlayerStore(s => s.queue);
+  const queueIndex   = usePlayerStore(s => s.queueIndex);
  const next         = usePlayerStore(s => s.next);
  const previous     = usePlayerStore(s => s.previous);
  const stop         = usePlayerStore(s => s.stop);
  const toggleRepeat = usePlayerStore(s => s.toggleRepeat);
+  const playTrack    = usePlayerStore(s => s.playTrack);

-  const duration = currentTrack?.duration ?? 0;
-  const coverUrl = currentTrack?.coverArt ? buildCoverArtUrl(currentTrack.coverArt, 800) : '';
-  const coverKey = currentTrack?.coverArt ? coverArtCacheKey(currentTrack.coverArt, 800) : '';
-  // useCachedUrl must be called unconditionally (hook rules)
-  const resolvedCoverUrl = useCachedUrl(coverUrl, coverKey);
-
-  // Fetch artist image for background — fall back to cover art if unavailable
-  const [artistBgUrl, setArtistBgUrl] = useState<string>('');
-  useEffect(() => {
-    setArtistBgUrl('');
-    const artistId = currentTrack?.artistId;
-    if (!artistId) return;
-    let cancelled = false;
-    getArtistInfo(artistId).then(info => {
-      if (!cancelled && info.largeImageUrl) setArtistBgUrl(info.largeImageUrl);
-    }).catch(() => {});
-    return () => { cancelled = true; };
-  }, [currentTrack?.artistId]);
-
-  const bgUrl = artistBgUrl || resolvedCoverUrl;
+  const duration  = currentTrack?.duration ?? 0;
+  const coverUrl  = currentTrack?.coverArt ? buildCoverArtUrl(currentTrack.coverArt, 800) : '';
+  const upcoming  = queue.slice(queueIndex + 1, queueIndex + 15);

+  // Close on Escape
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
@@ -138,78 +121,96 @@ export default function FullscreenPlayer({ onClose }: FullscreenPlayerProps) {
  }, [onClose]);

  return (
-    <div className="fs-player" role="dialog" aria-modal="true" aria-label={t('player.fullscreen')}>
-
-      {/* Layer 1 — blurred artist image (falls back to cover art) */}
-      <FsBg url={bgUrl} />
+    <div className="fs-player" role="dialog" aria-modal="true" aria-label="Vollbild-Player">
+      {/* Crossfading blurred background */}
+      <FsBg url={coverUrl} />
      <div className="fs-bg-overlay" aria-hidden="true" />

-      {/* Layer 2 — drifting color orbs */}
-      <div className="fs-orb fs-orb-1" aria-hidden="true" />
-      <div className="fs-orb fs-orb-2" aria-hidden="true" />
-      <div className="fs-orb fs-orb-3" aria-hidden="true" />
-
-      {/* Close */}
-      <button className="fs-close" onClick={onClose} aria-label={t('player.closeFullscreen')}>
+      {/* Close button */}
+      <button className="fs-close" onClick={onClose} aria-label="Vollbild schließen" data-tooltip="Schließen (Esc)">
        <ChevronDown size={28} />
      </button>

-      {/* Center stage — everything vertically + horizontally centered */}
-      <div className="fs-stage">
+      {/* Main layout: cover left, upcoming right */}
+      <div className="fs-layout">

-        <p className="fs-artist">{currentTrack?.artist ?? '—'}</p>
-
-        <div className="fs-cover-wrap">
-          {coverUrl ? (
-            <CachedImage
-              src={coverUrl}
-              cacheKey={coverKey}
-              alt={`${currentTrack?.album} Cover`}
-              className="fs-cover"
-            />
-          ) : (
-            <div className="fs-cover fs-cover-placeholder"><Music size={72} /></div>
-          )}
+        {/* Left column: cover only */}
+        <div className="fs-left">
+          <div className="fs-cover-wrap">
+            {coverUrl ? (
+              <img src={coverUrl} alt={`${currentTrack?.album} Cover`} className="fs-cover" />
+            ) : (
+              <div className="fs-cover fs-cover-placeholder"><Music size={72} /></div>
+            )}
+          </div>
        </div>

-        <div className="fs-track-info">
-          <h1 className="fs-title">{currentTrack?.title ?? '—'}</h1>
-          <p className="fs-album">
-            {currentTrack?.album ?? ''}
-            {currentTrack?.year ? ` · ${currentTrack.year}` : ''}
-          </p>
-          {(currentTrack?.bitRate || currentTrack?.suffix) && (
-            <span className="fs-codec">
-              {[
-                currentTrack.suffix?.toUpperCase(),
-                currentTrack.bitRate ? `${currentTrack.bitRate} kbps` : ''
-              ].filter(Boolean).join(' · ')}
-            </span>
-          )}
+        {/* Right column: upcoming tracks */}
+        {upcoming.length > 0 && (
+          <div className="fs-right">
+            <h2 className="fs-upcoming-title">Nächste Titel</h2>
+            <div className="fs-upcoming-list">
+              {upcoming.map((track, i) => (
+                <button
+                  key={`${track.id}-${queueIndex + 1 + i}`}
+                  className="fs-upcoming-item"
+                  onClick={() => playTrack(track, queue)}
+                >
+                  {track.coverArt ? (
+                    <img src={buildCoverArtUrl(track.coverArt, 80)} alt="" className="fs-upcoming-art" />
+                  ) : (
+                    <div className="fs-upcoming-art fs-upcoming-placeholder"><Music size={14} /></div>
+                  )}
+                  <div className="fs-upcoming-info">
+                    <span className="fs-upcoming-name">{track.title}</span>
+                    <span className="fs-upcoming-artist">{track.artist}</span>
+                  </div>
+                  <span className="fs-upcoming-dur">{formatTime(track.duration)}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Bottom: meta + progress + controls — centered across full width */}
+      <div className="fs-footer">
+        <div className="fs-footer-main">
+          <div className="fs-track-info">
+            <h1 className="fs-title">{currentTrack?.title ?? '—'}</h1>
+            <p className="fs-artist">{currentTrack?.artist ?? '—'}</p>
+            <p className="fs-album">{currentTrack?.album ?? '—'}{currentTrack?.year ? ` · ${currentTrack.year}` : ''}</p>
+            {(currentTrack?.bitRate || currentTrack?.suffix) && (
+              <span className="fs-codec">
+                {[currentTrack.suffix?.toUpperCase(), currentTrack.bitRate ? `${currentTrack.bitRate} kbps` : ''].filter(Boolean).join(' · ')}
+              </span>
+            )}
+          </div>
+
+          {/* Progress bar — isolated sub-component */}
+          <FsProgress duration={duration} />
        </div>

-        <FsProgress duration={duration} />
-
+        {/* Transport controls */}
        <div className="fs-controls">
-          <button className="fs-btn fs-btn-sm" onClick={stop} aria-label="Stop">
-            <Square size={14} fill="currentColor" />
+          <button className="fs-btn fs-btn-sm" onClick={stop} data-tooltip="Stop">
+            <Square size={20} fill="currentColor" />
          </button>
-          <button className="fs-btn" onClick={previous} aria-label={t('player.prev')}>
-            <SkipBack size={20} />
+          <button className="fs-btn" onClick={previous} aria-label="Vorheriger Titel">
+            <SkipBack size={28} />
          </button>
          <FsPlayBtn />
-          <button className="fs-btn" onClick={next} aria-label={t('player.next')}>
-            <SkipForward size={20} />
+          <button className="fs-btn" onClick={next} aria-label="Nächster Titel">
+            <SkipForward size={28} />
          </button>
          <button
            className={`fs-btn fs-btn-sm ${repeatMode !== 'off' ? 'active' : ''}`}
            onClick={toggleRepeat}
-            aria-label={t('player.repeat')}
+            data-tooltip={`Wiederholen: ${repeatMode === 'off' ? 'Aus' : repeatMode === 'all' ? 'Alle' : 'Einen'}`}
          >
-            {repeatMode === 'one' ? <Repeat1 size={14} /> : <Repeat size={14} />}
+            {repeatMode === 'one' ? <Repeat1 size={20} /> : <Repeat size={20} />}
          </button>
        </div>
-
      </div>
    </div>
  );
@@ -1,113 +1,47 @@
-import React, { useEffect, useState, useRef, useCallback } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Play, ListPlus } from 'lucide-react';
-import { getRandomAlbums, SubsonicAlbum, buildCoverArtUrl, coverArtCacheKey, getAlbum } from '../api/subsonic';
-import CachedImage, { useCachedUrl } from './CachedImage';
+import { getRandomAlbums, SubsonicAlbum, buildCoverArtUrl, getAlbum } from '../api/subsonic';
 import { usePlayerStore } from '../store/playerStore';
-import { useTranslation } from 'react-i18next';
-
-const INTERVAL_MS = 10000;
-
-// Crossfading background — same layer pattern as FullscreenPlayer
-function HeroBg({ url }: { url: string }) {
-  const [layers, setLayers] = useState<Array<{ url: string; id: number; visible: boolean }>>(() =>
-    url ? [{ url, id: 0, visible: true }] : []
-  );
-  const counter = useRef(1);
-
-  useEffect(() => {
-    if (!url) return;
-    const id = counter.current++;
-    setLayers(prev => [...prev, { url, id, visible: false }]);
-    const t1 = setTimeout(() => setLayers(prev => prev.map(l => ({ ...l, visible: l.id === id }))), 20);
-    const t2 = setTimeout(() => setLayers(prev => prev.filter(l => l.id === id)), 900);
-    return () => { clearTimeout(t1); clearTimeout(t2); };
-  }, [url]);
-
-  return (
-    <>
-      {layers.map(layer => (
-        <div
-          key={layer.id}
-          className="hero-bg"
-          style={{
-            backgroundImage: `url(${layer.url})`,
-            opacity: layer.visible ? 1 : 0,
-            filter: layer.visible ? 'blur(0px)' : 'blur(18px)',
-          }}
-          aria-hidden="true"
-        />
-      ))}
-    </>
-  );
-}

 export default function Hero() {
-  const { t } = useTranslation();
+  const [album, setAlbum] = useState<SubsonicAlbum | null>(null);
  const navigate = useNavigate();
-  const [albums, setAlbums] = useState<SubsonicAlbum[]>([]);
-  const [activeIdx, setActiveIdx] = useState(0);
-  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);

  useEffect(() => {
-    getRandomAlbums(8).then(a => { if (a.length) setAlbums(a); }).catch(() => {});
+    let cancelled = false;
+    getRandomAlbums(1).then(albums => {
+      if (!cancelled && albums[0]) setAlbum(albums[0]);
+    }).catch(() => {});
+    return () => { cancelled = true; };
  }, []);

-  // Start / restart auto-advance timer
-  const startTimer = useCallback((len: number) => {
-    if (timerRef.current) clearInterval(timerRef.current);
-    if (len <= 1) return;
-    timerRef.current = setInterval(() => {
-      setActiveIdx(prev => (prev + 1) % len);
-    }, INTERVAL_MS);
-  }, []);
-
-  useEffect(() => {
-    startTimer(albums.length);
-    return () => { if (timerRef.current) clearInterval(timerRef.current); };
-  }, [albums.length, startTimer]);
-
-  const goTo = useCallback((idx: number) => {
-    setActiveIdx(idx);
-    startTimer(albums.length);
-  }, [albums.length, startTimer]);
-
-  const album = albums[activeIdx] ?? null;
-
-  // Resolve background URL via cache
-  const bgRawUrl = album?.coverArt ? buildCoverArtUrl(album.coverArt, 800) : '';
-  const bgCacheKey = album?.coverArt ? coverArtCacheKey(album.coverArt, 800) : '';
-  const resolvedBgUrl = useCachedUrl(bgRawUrl, bgCacheKey);
-
-  // Resolve cover thumbnail via cache
-  const coverRawUrl = album?.coverArt ? buildCoverArtUrl(album.coverArt, 300) : '';
-  const coverCacheKey = album?.coverArt ? coverArtCacheKey(album.coverArt, 300) : '';
-
  if (!album) return <div className="hero-placeholder" />;

+  const coverUrl = album.coverArt ? buildCoverArtUrl(album.coverArt, 800) : '';
+
  return (
    <div
      className="hero"
      role="banner"
-      aria-label={t('hero.eyebrow')}
+      aria-label="Album des Augenblicks"
      onClick={() => navigate(`/album/${album.id}`)}
      style={{ cursor: 'pointer' }}
    >
-      <HeroBg url={resolvedBgUrl} />
+      {coverUrl && (
+        <div
+          className="hero-bg"
+          style={{ backgroundImage: `url(${coverUrl})` }}
+          aria-hidden="true"
+        />
+      )}
      <div className="hero-overlay" aria-hidden="true" />
-
-      {/* key causes re-mount → animate-fade-in triggers on each album change */}
-      <div className="hero-content animate-fade-in" key={album.id}>
-        {coverRawUrl && (
-          <CachedImage
-            className="hero-cover"
-            src={coverRawUrl}
-            cacheKey={coverCacheKey}
-            alt={`${album.name} Cover`}
-          />
+      <div className="hero-content animate-fade-in">
+        {coverUrl && (
+          <img className="hero-cover" src={coverUrl} alt={`${album.name} Cover`} />
        )}
        <div className="hero-text">
-          <span className="hero-eyebrow">{t('hero.eyebrow')}</span>
+          <span className="hero-eyebrow">Album des Augenblicks</span>
          <h2 className="hero-title">{album.name}</h2>
          <p className="hero-artist">{album.artist}</p>
          <div className="hero-meta">
@@ -120,10 +54,10 @@ export default function Hero() {
              className="hero-play-btn"
              id="hero-play-btn"
              onClick={e => { e.stopPropagation(); navigate(`/album/${album.id}`); }}
-              aria-label={`${t('hero.playAlbum')} ${album.name}`}
+              aria-label={`Album ${album.name} abspielen`}
            >
              <Play size={18} fill="currentColor" />
-              {t('hero.playAlbum')}
+              Album abspielen
            </button>
            <button
              className="btn btn-surface"
@@ -133,35 +67,21 @@ export default function Hero() {
                  const albumData = await getAlbum(album.id);
                  const tracks = albumData.songs.map(s => ({
                    id: s.id, title: s.title, artist: s.artist, album: s.album,
-                    albumId: s.albumId, artistId: s.artistId, duration: s.duration, coverArt: s.coverArt, track: s.track,
+                    albumId: s.albumId, duration: s.duration, coverArt: s.coverArt, track: s.track,
                    year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating,
                  }));
                  usePlayerStore.getState().enqueue(tracks);
-                } catch (_) { }
+                } catch (err) { }
              }}
              style={{ padding: '0 1.5rem', fontWeight: 600, fontSize: '0.95rem' }}
-              data-tooltip={t('hero.enqueueTooltip')}
+              data-tooltip="Ganzes Album zur Warteschlange hinzufügen"
            >
              <ListPlus size={18} />
-              {t('hero.enqueue')}
+              Einreihen
            </button>
          </div>
        </div>
      </div>
-
-      {/* Carousel dot indicators */}
-      {albums.length > 1 && (
-        <div className="hero-dots" onClick={e => e.stopPropagation()}>
-          {albums.map((_, i) => (
-            <button
-              key={i}
-              className={`hero-dot${i === activeIdx ? ' hero-dot-active' : ''}`}
-              onClick={() => goTo(i)}
-              aria-label={`Album ${i + 1}`}
-            />
-          ))}
-        </div>
-      )}
    </div>
  );
 }
@@ -3,7 +3,6 @@ import { useNavigate } from 'react-router-dom';
 import { Search, Disc3, Users, Music } from 'lucide-react';
 import { search, SearchResults, buildCoverArtUrl } from '../api/subsonic';
 import { usePlayerStore } from '../store/playerStore';
-import { useTranslation } from 'react-i18next';

 function debounce(fn: (q: string) => void, ms: number): (q: string) => void {
  let timer: ReturnType<typeof setTimeout>;
@@ -14,7 +13,6 @@ function debounce(fn: (q: string) => void, ms: number): (q: string) => void {
 }

 export default function LiveSearch() {
-  const { t } = useTranslation();
  const [query, setQuery] = useState('');
  const [results, setResults] = useState<SearchResults | null>(null);
  const [open, setOpen] = useState(false);
@@ -65,7 +63,7 @@ export default function LiveSearch() {
          id="live-search-input"
          className="input live-search-field"
          type="search"
-          placeholder={t('search.placeholder')}
+          placeholder="Suchen nach Künstler, Album oder Song…"
          value={query}
          onChange={e => setQuery(e.target.value)}
          onFocus={() => results && setOpen(true)}
@@ -75,7 +73,7 @@ export default function LiveSearch() {
          autoComplete="off"
        />
        {query && (
-          <button className="live-search-clear" onClick={() => { setQuery(''); setResults(null); setOpen(false); }} aria-label={t('search.clearLabel')}>
+          <button className="live-search-clear" onClick={() => { setQuery(''); setResults(null); setOpen(false); }} aria-label="Suche leeren">
            ×
          </button>
        )}
@@ -84,12 +82,12 @@ export default function LiveSearch() {
      {open && (
        <div className="live-search-dropdown" id="search-results" role="listbox">
          {!hasResults && !loading && (
-            <div className="search-empty">{t('search.noResults', { query })}</div>
+            <div className="search-empty">Keine Ergebnisse für „{query}"</div>
          )}

          {results?.artists.length ? (
            <div className="search-section">
-              <div className="search-section-label"><Users size={12} /> {t('search.artists')}</div>
+              <div className="search-section-label"><Users size={12} /> Künstler</div>
              {results.artists.map(a => (
                <button
                  key={a.id}
@@ -106,7 +104,7 @@ export default function LiveSearch() {

          {results?.albums.length ? (
            <div className="search-section">
-              <div className="search-section-label"><Disc3 size={12} /> {t('search.albums')}</div>
+              <div className="search-section-label"><Disc3 size={12} /> Alben</div>
              {results.albums.map(a => (
                <button
                  key={a.id}
@@ -130,15 +128,15 @@ export default function LiveSearch() {

          {results?.songs.length ? (
            <div className="search-section">
-              <div className="search-section-label"><Music size={12} /> {t('search.songs')}</div>
+              <div className="search-section-label"><Music size={12} /> Songs</div>
              {results.songs.map(s => (
                <button
                  key={s.id}
                  className="search-result-item"
                  onClick={() => {
-                    playTrack({
-                      id: s.id, title: s.title, artist: s.artist, album: s.album,
-                      albumId: s.albumId, artistId: s.artistId, duration: s.duration, coverArt: s.coverArt,
+                    playTrack({ 
+                      id: s.id, title: s.title, artist: s.artist, album: s.album, 
+                      albumId: s.albumId, duration: s.duration, coverArt: s.coverArt,
                      year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating
                    });
                    setOpen(false); setQuery('');
@@ -1,16 +1,10 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { PlayCircle, User, Radio, RefreshCw } from 'lucide-react';
 import { getNowPlaying, SubsonicNowPlaying, buildCoverArtUrl } from '../api/subsonic';
-import { useAuthStore } from '../store/authStore';
-import { usePlayerStore } from '../store/playerStore';
-import { useTranslation } from 'react-i18next';

 export default function NowPlayingDropdown() {
-  const { t } = useTranslation();
  const [isOpen, setIsOpen] = useState(false);
  const [nowPlaying, setNowPlaying] = useState<SubsonicNowPlaying[]>([]);
-  const isPlaying = usePlayerStore(s => s.isPlaying);
-  const ownUsername = useAuthStore(s => s.getActiveServer()?.username ?? '');
  const [loading, setLoading] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);

@@ -26,16 +20,11 @@ export default function NowPlayingDropdown() {
    }
  };

-  // Poll in background so the badge stays current without opening the dropdown
+  // Fetch when the dropdown is opened
  useEffect(() => {
-    fetchNowPlaying();
-    const id = setInterval(fetchNowPlaying, 10000);
-    return () => clearInterval(id);
-  }, []);
-
-  // Refresh immediately when dropdown is opened
-  useEffect(() => {
-    if (isOpen) fetchNowPlaying();
+    if (isOpen) {
+      fetchNowPlaying();
+    }
  }, [isOpen]);

  // Click outside to close
@@ -49,39 +38,33 @@ export default function NowPlayingDropdown() {
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

-  // For the current user, trust the local player state — the server keeps stale
-  // "now playing" entries for minutes after playback stops.
-  const visible = nowPlaying.filter(entry =>
-    entry.username === ownUsername ? isPlaying : true
-  );
-
  return (
    <div className="now-playing-dropdown" ref={dropdownRef} style={{ position: 'relative' }}>
-      <button
-        className="btn btn-surface"
+      <button 
+        className="btn btn-surface" 
        onClick={() => setIsOpen(!isOpen)}
-        data-tooltip={t('nowPlaying.tooltip')}
+        data-tooltip="Wer hört was?"
        data-tooltip-pos="bottom"
        style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: '0.5rem', padding: '0.5rem 1rem' }}
      >
-        <Radio size={18} className={visible.length > 0 ? 'animate-pulse' : ''} style={{ color: visible.length > 0 ? 'var(--accent)' : 'inherit' }} />
+        <Radio size={18} className={nowPlaying.length > 0 ? 'animate-pulse' : ''} style={{ color: nowPlaying.length > 0 ? 'var(--accent)' : 'inherit' }} />
        <span>Live</span>
-        {visible.length > 0 && (
-          <span style={{
-            background: 'var(--accent)',
-            color: 'var(--ctp-crust)',
-            fontSize: '10px',
-            fontWeight: 'bold',
-            padding: '2px 6px',
-            borderRadius: '10px'
+        {nowPlaying.length > 0 && (
+          <span style={{ 
+            background: 'var(--accent)', 
+            color: 'var(--ctp-crust)', 
+            fontSize: '10px', 
+            fontWeight: 'bold', 
+            padding: '2px 6px', 
+            borderRadius: '10px' 
          }}>
-            {visible.length}
+            {nowPlaying.length}
          </span>
        )}
      </button>

      {isOpen && (
-        <div
+        <div 
          className="glass animate-fade-in"
          style={{
            position: 'absolute',
@@ -100,9 +83,9 @@ export default function NowPlayingDropdown() {
          }}
        >
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid var(--border-subtle)', paddingBottom: '0.5rem' }}>
-            <h3 style={{ margin: 0, fontSize: '14px', fontWeight: 600 }}>{t('nowPlaying.title')}</h3>
-            <button
-              onClick={fetchNowPlaying}
+            <h3 style={{ margin: 0, fontSize: '14px', fontWeight: 600 }}>Wer hört was?</h3>
+            <button 
+              onClick={fetchNowPlaying} 
              className={`btn btn-ghost ${loading ? 'animate-spin' : ''}`}
              style={{ width: '28px', height: '28px', padding: 0 }}
            >
@@ -110,17 +93,17 @@ export default function NowPlayingDropdown() {
            </button>
          </div>

-          {loading && visible.length === 0 ? (
+          {loading && nowPlaying.length === 0 ? (
            <div style={{ padding: '1rem', textAlign: 'center', color: 'var(--text-muted)', fontSize: '13px' }}>
-              {t('nowPlaying.loading')}
+              Lädt...
            </div>
-          ) : visible.length === 0 ? (
+          ) : nowPlaying.length === 0 ? (
            <div style={{ padding: '1rem', textAlign: 'center', color: 'var(--text-muted)', fontSize: '13px' }}>
-              {t('nowPlaying.nobody')}
+              Gerade hört niemand Musik.
            </div>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
-              {visible.map((stream, idx) => (
+              {nowPlaying.map((stream, idx) => (
                <div key={`${stream.id}-${idx}`} style={{ display: 'flex', gap: '0.75rem', alignItems: 'center', background: 'var(--bg-hover)', padding: '0.5rem', borderRadius: '8px' }}>
                  <div style={{ width: '48px', height: '48px', flexShrink: 0, borderRadius: '6px', overflow: 'hidden', background: 'var(--bg-surface)' }}>
                    {stream.coverArt ? (
@@ -135,7 +118,7 @@ export default function NowPlayingDropdown() {
                    <div style={{ display: 'flex', alignItems: 'center', gap: '4px', marginTop: '2px', fontSize: '11px', color: 'var(--text-muted)' }}>
                      <User size={10} />
                      <span className="truncate">{stream.username} ({stream.playerName || 'Web'})</span>
-                      {stream.minutesAgo > 0 && <span>• {t('nowPlaying.minutesAgo', { n: stream.minutesAgo })}</span>}
+                      {stream.minutesAgo > 0 && <span>• vor {stream.minutesAgo}m</span>}
                    </div>
                  </div>
                </div>
@@ -1,10 +1,9 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback } from 'react';
 import {
  Play, Pause, SkipBack, SkipForward, Volume2, VolumeX, Music, List, Square, Repeat, Repeat1, Maximize2
 } from 'lucide-react';
 import { usePlayerStore } from '../store/playerStore';
-import { buildCoverArtUrl, coverArtCacheKey } from '../api/subsonic';
-import CachedImage from './CachedImage';
+import { buildCoverArtUrl } from '../api/subsonic';
 import { useTranslation } from 'react-i18next';

 function formatTime(seconds: number): string {
@@ -16,11 +15,9 @@ function formatTime(seconds: number): string {

 export default function PlayerBar() {
  const { t } = useTranslation();
-  const { currentTrack, isPlaying, progress, buffered, currentTime, volume, togglePlay, next, previous, seek, setVolume, isQueueVisible, toggleQueue, stop, toggleRepeat, repeatMode, toggleFullscreen } = usePlayerStore();
+  const { currentTrack, isPlaying, progress, currentTime, volume, togglePlay, next, previous, seek, setVolume, isQueueVisible, toggleQueue, stop, toggleRepeat, repeatMode, toggleFullscreen } = usePlayerStore();

  const duration = currentTrack?.duration ?? 0;
-  const coverSrc = useMemo(() => currentTrack?.coverArt ? buildCoverArtUrl(currentTrack.coverArt, 128) : '', [currentTrack?.coverArt]);
-  const coverKey = currentTrack?.coverArt ? coverArtCacheKey(currentTrack.coverArt, 128) : '';

  const handleSeek = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    seek(parseFloat(e.target.value));
@@ -30,10 +27,8 @@ export default function PlayerBar() {
    setVolume(parseFloat(e.target.value));
  }, [setVolume]);

-  const pct = progress * 100;
-  const buf = Math.max(pct, buffered * 100);
  const progressStyle = {
-    background: `linear-gradient(to right, var(--ctp-mauve) ${pct}%, var(--ctp-overlay0) ${pct}%, var(--ctp-overlay0) ${buf}%, var(--ctp-surface2) ${buf}%)`,
+    background: `linear-gradient(to right, var(--ctp-mauve) ${progress * 100}%, var(--ctp-surface2) ${progress * 100}%)`,
  };

  const volumeStyle = {
@@ -50,11 +45,11 @@ export default function PlayerBar() {
          data-tooltip={currentTrack ? t('player.openFullscreen') : undefined}
        >
          {currentTrack?.coverArt ? (
-            <CachedImage
+            <img
              className="player-album-art"
-              src={coverSrc}
-              cacheKey={coverKey}
+              src={buildCoverArtUrl(currentTrack.coverArt, 128)}
              alt={`${currentTrack.album} Cover`}
+              loading="lazy"
            />
          ) : (
            <div className="player-album-art-placeholder">
@@ -85,7 +80,7 @@ export default function PlayerBar() {
          </button>
          
          <button className="player-btn" onClick={previous} aria-label={t('player.prev')} data-tooltip={t('player.prev')}>
-            <SkipBack size={20} />
+            <SkipBack size={18} />
          </button>

          <button
@@ -94,11 +89,11 @@ export default function PlayerBar() {
            aria-label={isPlaying ? t('player.pause') : t('player.play')}
            data-tooltip={isPlaying ? t('player.pause') : t('player.play')}
          >
-            {isPlaying ? <Pause size={22} /> : <Play size={22} fill="currentColor" />}
+            {isPlaying ? <Pause size={20} /> : <Play size={20} fill="currentColor" />}
          </button>

          <button className="player-btn" onClick={next} aria-label={t('player.next')} data-tooltip={t('player.next')}>
-            <SkipForward size={20} />
+            <SkipForward size={18} />
          </button>

          <button 
@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useState } from 'react';
 import { Track, usePlayerStore } from '../store/playerStore';
 import { Play, Music, Star, X, Trash2, Save, FolderOpen } from 'lucide-react';
 import { buildCoverArtUrl, getAlbum, getPlaylists, getPlaylist, createPlaylist, deletePlaylist, SubsonicPlaylist } from '../api/subsonic';
@@ -124,11 +124,6 @@ export default function QueuePanel() {

  const [draggedIdx, setDraggedIdx] = useState<number | null>(null);
  const [dragOverIdx, setDragOverIdx] = useState<number | null>(null);
-  const isDraggingInternalRef = useRef(false);
-  // Refs mirror state so drop handler always reads fresh values even when
-  // macOS WKWebView fires dragend before drop (spec violation).
-  const draggedIdxRef = useRef<number | null>(null);
-  const dragOverIdxRef = useRef<number | null>(null);

  const [saveModalOpen, setSaveModalOpen] = useState(false);
  const [loadModalOpen, setLoadModalOpen] = useState(false);
@@ -147,84 +142,69 @@ export default function QueuePanel() {
  };

  const onDragStart = (e: React.DragEvent, index: number) => {
-    isDraggingInternalRef.current = true;
-    draggedIdxRef.current = index;
    setDraggedIdx(index);
-    e.dataTransfer.effectAllowed = 'move';
-    // Store index in dataTransfer too — on macOS WKWebView dragend fires before
-    // drop, so the ref will already be null; dataTransfer survives that race.
-    e.dataTransfer.setData('text/plain', JSON.stringify({ type: 'queue_reorder', index }));
-  };
-
-  const onDragEnterItem = (e: React.DragEvent) => {
-    e.preventDefault();
-    e.dataTransfer.dropEffect = isDraggingInternalRef.current ? 'move' : 'copy';
+    e.dataTransfer.effectAllowed = 'copyMove';
+    e.dataTransfer.setData('application/json', JSON.stringify({
+      type: 'queue_reorder',
+      index
+    }));
  };

  const onDragOverItem = (e: React.DragEvent, index: number) => {
    e.preventDefault();
-    e.dataTransfer.dropEffect = isDraggingInternalRef.current ? 'move' : 'copy';
-    dragOverIdxRef.current = index;
    setDragOverIdx(index);
  };

  const onDragEnd = () => {
-    isDraggingInternalRef.current = false;
-    draggedIdxRef.current = null;
-    dragOverIdxRef.current = null;
    setDraggedIdx(null);
    setDragOverIdx(null);
  };

-  const onDropQueue = async (e: React.DragEvent) => {
+  const onDropQueue = async (e: React.DragEvent, dropIndex?: number) => {
    e.preventDefault();
-
-    // Capture refs before resetting — dragend may have already cleared them on Mac.
-    const fromIdx = draggedIdxRef.current;
-    const toIdx = dragOverIdxRef.current ?? queue.length;
-
-    isDraggingInternalRef.current = false;
-    draggedIdxRef.current = null;
-    dragOverIdxRef.current = null;
    setDraggedIdx(null);
    setDragOverIdx(null);
-
-    // Read dataTransfer — set during dragstart, outlives dragend on all platforms.
-    let parsedData: any = null;
+    
    try {
-      const raw = e.dataTransfer.getData('text/plain');
-      if (raw) parsedData = JSON.parse(raw);
-    } catch { /* ignore */ }
-
-    // Internal reorder: prefer ref value (fast path), fall back to dataTransfer
-    // for the Mac dragend-before-drop race condition.
-    const reorderFrom = fromIdx ?? (parsedData?.type === 'queue_reorder' ? parsedData.index : null);
-    if (reorderFrom !== null) {
-      if (reorderFrom !== toIdx) reorderQueue(reorderFrom, toIdx);
-      return;
-    }
-
-    // External drop (song / album dragged from elsewhere in the app)
-    if (!parsedData) return;
-    if (parsedData.type === 'song') {
-      enqueue([parsedData.track]);
-    } else if (parsedData.type === 'album') {
-      const albumData = await getAlbum(parsedData.id);
-      const tracks: Track[] = albumData.songs.map(s => ({
-        id: s.id, title: s.title, artist: s.artist, album: s.album,
-        albumId: s.albumId, artistId: s.artistId, duration: s.duration, coverArt: s.coverArt, track: s.track,
-        year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating,
-      }));
-      enqueue(tracks);
+      const dataStr = e.dataTransfer.getData('application/json');
+      if (!dataStr) return;
+      const data = JSON.parse(dataStr);
+      
+      if (data.type === 'queue_reorder') {
+        const fromIdx = data.index;
+        const targetIdx = dropIndex !== undefined ? dropIndex : queue.length;
+        if (fromIdx !== undefined && fromIdx !== targetIdx) {
+          reorderQueue(fromIdx, targetIdx);
+        }
+      } else if (data.type === 'song') {
+        const track = data.track;
+        if (dropIndex !== undefined) {
+          // If dropped on a specific item, we might want to insert it there.
+          // For now we just enqueue it at the end to keep it simple, or insert it.
+          // Since we don't have an insert method, we use enqueue (appends to end).
+          enqueue([track]);  
+        } else {
+          enqueue([track]);
+        }
+      } else if (data.type === 'album') {
+        const albumData = await getAlbum(data.id);
+        const tracks: Track[] = albumData.songs.map(s => ({
+          id: s.id, title: s.title, artist: s.artist, album: s.album,
+          albumId: s.albumId, duration: s.duration, coverArt: s.coverArt, track: s.track,
+          year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating,
+        }));
+        enqueue(tracks);
+      }
+    } catch (err) {
+      console.error('Drop error', err);
    }
  };

  return (
-    <aside
-      className="queue-panel"
-      onDragEnter={e => { e.preventDefault(); e.dataTransfer.dropEffect = isDraggingInternalRef.current ? 'move' : 'copy'; }}
-      onDragOver={e => { e.preventDefault(); e.dataTransfer.dropEffect = isDraggingInternalRef.current ? 'move' : 'copy'; }}
-      onDrop={onDropQueue}
+    <aside 
+      className="queue-panel" 
+      onDragOver={e => e.preventDefault()}
+      onDrop={e => onDropQueue(e)}
      style={{ 
        borderLeftWidth: isQueueVisible ? 1 : 0
      }}
@@ -253,7 +233,7 @@ export default function QueuePanel() {
        <div className="queue-current-track">
          <div className="queue-current-cover">
            {currentTrack.coverArt ? (
-              <img src={buildCoverArtUrl(currentTrack.coverArt, 128)} alt="" loading="eager" />
+              <img src={buildCoverArtUrl(currentTrack.coverArt, 400)} alt="" loading="eager" />
            ) : (
              <div className="fallback"><Music size={32} /></div>
            )}
@@ -313,9 +293,12 @@ export default function QueuePanel() {
                }}
                draggable
                onDragStart={(e) => onDragStart(e, idx)}
-                onDragEnter={(e) => onDragEnterItem(e)}
                onDragOver={(e) => onDragOverItem(e, idx)}
                onDragEnd={onDragEnd}
+                onDrop={(e) => {
+                  e.stopPropagation();
+                  onDropQueue(e, idx);
+                }}
                style={dragStyle}
              >
                <div className="queue-item-info">
@@ -356,7 +339,7 @@ export default function QueuePanel() {
              const data = await getPlaylist(id);
              const tracks: Track[] = data.songs.map(s => ({
                id: s.id, title: s.title, artist: s.artist, album: s.album,
-                albumId: s.albumId, artistId: s.artistId, duration: s.duration, coverArt: s.coverArt, track: s.track,
+                albumId: s.albumId, duration: s.duration, coverArt: s.coverArt, track: s.track,
                year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating,
              }));
              if (tracks.length > 0) {
@@ -1,10 +1,9 @@
-import React, { useEffect, useState } from 'react';
-import { version as appVersion } from '../../package.json';
+import React from 'react';
 import { NavLink } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import {
  Disc3, Users, Music4, Radio, Settings, Heart, BarChart3, Shuffle, ListMusic,
-  PanelLeftClose, PanelLeft, HelpCircle, Dices, ArrowUpCircle
+  PanelLeftClose, PanelLeft
 } from 'lucide-react';

 const PsysonicLogo = () => (
@@ -14,80 +13,21 @@ const PsysonicLogo = () => (
 const navItems = [
  { icon: Disc3, labelKey: 'sidebar.mainstage', to: '/' },
  { icon: Radio, labelKey: 'sidebar.newReleases', to: '/new-releases' },
-  { icon: Music4,  labelKey: 'sidebar.allAlbums',    to: '/albums' },
-  { icon: Dices,   labelKey: 'sidebar.randomAlbums', to: '/random-albums' },
+  { icon: Music4, labelKey: 'sidebar.allAlbums', to: '/albums' },
  { icon: Users, labelKey: 'sidebar.artists', to: '/artists' },
  { icon: ListMusic, labelKey: 'sidebar.playlists', to: '/playlists' },
  { icon: Shuffle, labelKey: 'sidebar.randomMix', to: '/random-mix' },
  { icon: Heart, labelKey: 'sidebar.favorites', to: '/favorites' },
 ];

-function isNewer(latest: string, current: string): boolean {
-  const parse = (v: string) => v.replace(/^v/, '').split('.').map(Number);
-  const [lMaj, lMin, lPat] = parse(latest);
-  const [cMaj, cMin, cPat] = parse(current);
-  if (lMaj !== cMaj) return lMaj > cMaj;
-  if (lMin !== cMin) return lMin > cMin;
-  return lPat > cPat;
-}
-
-function UpdateToast({ isCollapsed, latestVersion }: { isCollapsed: boolean; latestVersion: string }) {
-  const { t } = useTranslation();
-
-  if (isCollapsed) {
-    return (
-      <div className="update-toast-icon" style={{ marginTop: 'auto' }} title={`${t('sidebar.updateAvailable')}: ${latestVersion}`}>
-        <ArrowUpCircle size={20} />
-      </div>
-    );
-  }
-
-  return (
-    <div className="update-toast">
-      <div className="update-toast-header">
-        <ArrowUpCircle size={14} />
-        <span className="update-toast-label">{t('sidebar.updateAvailable')}</span>
-      </div>
-      <div className="update-toast-version">{t('sidebar.updateReady', { version: latestVersion })}</div>
-      <a
-        className="update-toast-link"
-        href="https://github.com/Psychotoxical/psysonic/releases"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        {t('sidebar.updateLink')}
-      </a>
-    </div>
-  );
-}
-
-export default function Sidebar({
-  isCollapsed = false,
-  toggleCollapse
-}: {
+export default function Sidebar({ 
+  isCollapsed = false, 
+  toggleCollapse 
+}: { 
  isCollapsed?: boolean;
  toggleCollapse?: () => void;
 }) {
  const { t } = useTranslation();
-  const [latestVersion, setLatestVersion] = useState<string | null>(null);
-
-  useEffect(() => {
-    let cancelled = false;
-    const timer = setTimeout(async () => {
-      try {
-        const res = await fetch('https://api.github.com/repos/Psychotoxical/psysonic/releases/latest');
-        if (!res.ok) return;
-        const data = await res.json();
-        const tag: string = data.tag_name ?? '';
-        if (!cancelled && tag && isNewer(tag, appVersion)) {
-          setLatestVersion(tag.startsWith('v') ? tag : `v${tag}`);
-        }
-      } catch {
-        // network unavailable — silently skip
-      }
-    }, 1500);
-    return () => { cancelled = true; clearTimeout(timer); };
-  }, []);

  return (
    <aside className={`sidebar animate-slide-in ${isCollapsed ? 'collapsed' : ''}`}>
@@ -120,24 +60,15 @@ export default function Sidebar({
        ))}

        {!isCollapsed && <span className="nav-section-label" style={{ marginTop: 'auto' }}>{t('sidebar.system')}</span>}
-        {latestVersion && <UpdateToast isCollapsed={isCollapsed} latestVersion={latestVersion} />}
        <NavLink
          to="/statistics"
          className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}
-          style={isCollapsed && !latestVersion ? { marginTop: 'auto' } : undefined}
+          style={isCollapsed ? { marginTop: 'auto' } : undefined}
          title={isCollapsed ? t('sidebar.statistics') : undefined}
        >
          <BarChart3 size={isCollapsed ? 22 : 18} />
          {!isCollapsed && <span>{t('sidebar.statistics')}</span>}
        </NavLink>
-        <NavLink
-          to="/help"
-          className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}
-          title={isCollapsed ? t('sidebar.help') : undefined}
-        >
-          <HelpCircle size={isCollapsed ? 22 : 18} />
-          {!isCollapsed && <span>{t('sidebar.help')}</span>}
-        </NavLink>
        <NavLink
          to="/settings"
          className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}
@@ -8,7 +8,6 @@ const enTranslation = {
    mainstage: 'Mainstage',
    newReleases: 'New Releases',
    allAlbums: 'All Albums',
-    randomAlbums: 'Random Albums',
    artists: 'Artists',
    playlists: 'Playlists',
    randomMix: 'Random Mix',
@@ -16,197 +15,8 @@ const enTranslation = {
    system: 'System',
    statistics: 'Statistics',
    settings: 'Settings',
-    help: 'Help',
    expand: 'Expand Sidebar',
-    collapse: 'Collapse Sidebar',
-    updateAvailable: 'Update available',
-    updateReady: '{{version}} is ready',
-    updateLink: 'Go to release →'
-  },
-  home: {
-    starred: 'Personal Favorites',
-    recent: 'Recently Added',
-    mostPlayed: 'Most Played',
-    discover: 'Discover',
-    loadMore: 'Load More',
-    discoverMore: 'Discover More'
-  },
-  hero: {
-    eyebrow: 'Featured Album',
-    playAlbum: 'Play Album',
-    enqueue: 'Enqueue',
-    enqueueTooltip: 'Add entire album to queue',
-  },
-  search: {
-    placeholder: 'Search for artist, album or song…',
-    noResults: 'No results for "{{query}}"',
-    artists: 'Artists',
-    albums: 'Albums',
-    songs: 'Songs',
-    clearLabel: 'Clear search',
-  },
-  nowPlaying: {
-    tooltip: 'Who is listening?',
-    title: 'Who is listening?',
-    loading: 'Loading…',
-    nobody: 'Nobody is currently listening.',
-    minutesAgo: '{{n}}m ago',
-  },
-  contextMenu: {
-    playNow: 'Play Now',
-    playNext: 'Play Next',
-    addToQueue: 'Add to Queue',
-    enqueueAlbum: 'Enqueue Album',
-    startRadio: 'Start Radio',
-    favorite: 'Favorite',
-    favoriteArtist: 'Favorite Artist',
-    favoriteAlbum: 'Favorite Album',
-    removeFromQueue: 'Remove from Queue',
-    openAlbum: 'Open Album',
-    goToArtist: 'Go to Artist',
-    download: 'Download (ZIP)',
-  },
-  albumDetail: {
-    back: 'Back',
-    playAll: 'Play All',
-    enqueue: 'Enqueue',
-    enqueueTooltip: 'Add entire album to queue',
-    artistBio: 'Artist Bio',
-    download: 'Download (ZIP)',
-    downloading: 'Loading…',
-    downloadHint: 'FLAC/WAV albums are zipped server-side first — large albums may take a moment before the download starts.',
-    downloadHintShort: 'Server zips first — may take a moment depending on file size',
-    favoriteAdd: 'Add to Favorites',
-    favoriteRemove: 'Remove from Favorites',
-    favorite: 'Favorite',
-    noBio: 'No biography available.',
-    moreByArtist: 'More by {{artist}}',
-    tracksCount: '{{n}} Tracks',
-    goToArtist: 'Go to {{artist}}',
-    moreLabelAlbums: 'More albums on {{label}}',
-    trackTitle: 'Title',
-    trackArtist: 'Artist',
-    trackFormat: 'Format',
-    trackFavorite: 'Favorite',
-    trackRating: 'Rating',
-    trackDuration: 'Duration',
-    trackTotal: 'Total',
-    notFound: 'Album not found.',
-    bioModal: 'Artist Biography',
-    bioClose: 'Close',
-    ratingLabel: 'Rating',
-  },
-  artistDetail: {
-    back: 'Back',
-    albums: 'Albums',
-    album: 'Album',
-    playAll: 'Play All',
-    shuffle: 'Shuffle',
-    radio: 'Radio',
-    loading: 'Loading…',
-    noRadio: 'No similar tracks found for this artist.',
-    notFound: 'Artist not found.',
-    albumsBy: 'Albums by {{name}}',
-    topTracks: 'Top Tracks',
-    noAlbums: 'No albums found.',
-    trackTitle: 'Title',
-    trackAlbum: 'Album',
-    trackDuration: 'Duration',
-    favoriteAdd: 'Add to Favorites',
-    favoriteRemove: 'Remove from Favorites',
-    favorite: 'Favorite',
-    albumCount_one: '{{count}} Album',
-    albumCount_other: '{{count}} Albums',
-  },
-  favorites: {
-    title: 'Favorites',
-    empty: "You haven't saved any favorites yet.",
-    artists: 'Artists',
-    albums: 'Albums',
-    songs: 'Songs',
-  },
-  randomAlbums: {
-    title: 'Random Albums',
-    refresh: 'Refresh',
-  },
-  randomMix: {
-    title: 'Random Mix',
-    remix: 'Remix',
-    remixTooltip: 'Load new random songs',
-    playAll: 'Play All',
-    trackTitle: 'Title',
-    trackArtist: 'Artist',
-    trackAlbum: 'Album',
-    trackFavorite: 'Favorite',
-    trackDuration: 'Duration',
-    favoriteAdd: 'Add to Favorites',
-    favoriteRemove: 'Remove from Favorites',
-    play: 'Play',
-  },
-  playlists: {
-    title: 'Playlists',
-    loading: 'Loading playlists…',
-    empty: 'No playlists found.\nUse the queue to create playlists.',
-    play: 'Play',
-    deleteTooltip: 'Delete',
-    confirmDelete: 'Really delete playlist "{{name}}"?',
-    minutes: 'min.',
-    track_one: '{{count}} Track',
-    track_other: '{{count}} Tracks',
-  },
-  albums: {
-    title: 'All Albums',
-    sortByName: 'A–Z (Album)',
-    sortByArtist: 'A–Z (Artist)',
-    sortNewest: 'Newest first',
-    sortRandom: 'Random',
-  },
-  artists: {
-    title: 'Artists',
-    search: 'Search…',
-    all: 'All',
-    gridView: 'Grid view',
-    listView: 'List view',
-    loadMore: 'Load more',
-    notFound: 'No artists found.',
-    albumCount_one: '{{count}} Album',
-    albumCount_other: '{{count}} Albums',
-  },
-  login: {
-    subtitle: 'Your Navidrome Desktop Player',
-    serverName: 'Server Name (optional)',
-    serverNamePlaceholder: 'My Navidrome',
-    serverUrl: 'Server URL',
-    serverUrlPlaceholder: '192.168.1.100:4533 or music.example.com',
-    username: 'Username',
-    usernamePlaceholder: 'admin',
-    password: 'Password',
-    showPassword: 'Show password',
-    hidePassword: 'Hide password',
-    connect: 'Connect',
-    connecting: 'Connecting…',
-    connected: 'Connected!',
-    error: 'Connection failed – please check your details.',
-    urlRequired: 'Please enter a server URL.',
-    savedServers: 'Saved Servers',
-    addNew: 'Or add a new server',
-  },
-  common: {
-    albums: 'Albums',
-    album: 'Album',
-    loading: 'Loading…',
-    loadingMore: 'Loading…',
-    loadingPlaylists: 'Loading Playlists…',
-    noAlbums: 'No albums found.',
-    downloading: 'Downloading…',
-    downloadZip: 'Download (ZIP)',
-    back: 'Back',
-    cancel: 'Cancel',
-    save: 'Save',
-    delete: 'Delete',
-    use: 'Use',
-    add: 'Add',
-    active: 'Active',
+    collapse: 'Collapse Sidebar'
  },
  settings: {
    title: 'Settings',
@@ -215,29 +25,19 @@ const enTranslation = {
    languageDe: 'German',
    theme: 'Theme',
    appearance: 'Appearance',
-    servers: 'Servers',
-    serverName: 'Server Name',
-    serverUrl: 'Server URL',
-    serverUsername: 'Username',
-    serverPassword: 'Password',
-    addServer: 'Add Server',
-    addServerTitle: 'Add New Server',
-    useServer: 'Use',
-    deleteServer: 'Delete',
-    noServers: 'No servers saved.',
-    serverActive: 'Active',
-    confirmDeleteServer: 'Delete server "{{name}}"?',
-    serverConnecting: 'Connecting…',
-    serverConnected: 'Connected!',
-    serverFailed: 'Connection failed.',
+    connection: 'Connection',
+    lanIp: 'LAN IP',
+    externalUrl: 'External URL',
    testBtn: 'Test Connection',
    testingBtn: 'Testing…',
    connected: 'Connected',
    failed: 'Failed',
+    activeConn: 'Active Connection',
+    activeServer: 'Currently used server:',
+    connLocal: 'Local (LAN)',
+    connExternal: 'External (Internet)',
    lfmTitle: 'Last.fm Scrobbling',
-    lfmDesc1: 'Psysonic supports server-side scrobbling directly via Navidrome. To link Last.fm, please log in once via the',
-    lfmDesc1NavidromeWebplayer: 'Navidrome Webplayer',
-    lfmDesc1b: 'in your browser, go to your profile, and connect your Last.fm account.',
+    lfmDesc1: 'Psysonic supports server-side scrobbling directly via Navidrome. To link Last.fm, please log in once via the <strong>Navidrome Webplayer</strong> in your browser, go to your profile, and connect your Last.fm account.',
    lfmDesc2: 'Once that is done, Psysonic automatically forwards your currently playing songs to Navidrome, and they will appear on Last.fm.',
    scrobbleEnabled: 'Scrobbling enabled',
    scrobbleDesc: 'Send songs to Last.fm after 50% playtime',
@@ -250,66 +50,7 @@ const enTranslation = {
    downloadsDefault: 'Default Downloads Folder',
    pickFolder: 'Select',
    pickFolderTitle: 'Select Download Folder',
-    logout: 'Logout',
-    aboutTitle: 'About Psysonic',
-    aboutDesc: 'A desktop music player for Subsonic-compatible servers (Navidrome, Gonic, and others). Streams your self-hosted music library with a clean, modern interface styled after the Catppuccin colour palette.',
-    aboutFeatures: 'Multi-server support · Scrobbling · Fullscreen player · Album downloads · Image caching · Catppuccin themes',
-    aboutLicense: 'License',
-    aboutLicenseText: 'MIT — free to use, modify, and distribute.',
-    aboutRepo: 'Source Code on GitHub',
-    aboutVersion: 'Version',
-    aboutBuiltWith: 'Built with Tauri · React · TypeScript · Howler.js'
-  },
-  help: {
-    title: 'Help',
-    s1: 'Getting Started',
-    q1: 'Which servers are compatible?',
-    a1: 'Psysonic works with any Subsonic-compatible server: Navidrome, Gonic, Subsonic, Airsonic, and others. Navidrome is the recommended choice.',
-    q2: 'How do I connect to my server?',
-    a2: 'Open Settings and click "Add Server". Enter the server URL (e.g. 192.168.1.100:4533), your username, and password. Psysonic tests the connection before saving — nothing is stored if the connection fails.',
-    q3: 'Can I use multiple servers?',
-    a3: 'Yes. You can add as many servers as you like in Settings and switch between them at any time. Only one server is active at a time.',
-    s2: 'Playback',
-    q4: 'How do I play music?',
-    a4: 'Double-click any track to play it. On album and artist pages, use "Play All" to start the whole album. You can also drag tracks into the queue panel.',
-    q5: 'What keyboard shortcuts are available?',
-    a5: 'Space = Play / Pause · Escape = Close fullscreen player. Media keys (Play/Pause, Next, Previous) work on macOS and Windows. On Linux, use the player bar buttons.',
-    q6: 'What is the queue?',
-    a6: 'The queue shows all upcoming tracks. Open it with the list icon in the player bar. You can reorder tracks by dragging and save the current queue as a playlist.',
-    q7: 'How do I open the fullscreen player?',
-    a7: 'Click the album art thumbnail in the player bar at the bottom, or the expand icon next to it. Press Escape to close it again.',
-    q8: 'How does repeat work?',
-    a8: 'Click the repeat button in the player bar to cycle through: Off → Repeat All → Repeat One.',
-    s3: 'Library',
-    q9: 'How do I download an album?',
-    a9: 'Open an album\'s detail page and click "Download (ZIP)". The server zips the album first — this may take a moment for large albums or lossless files (FLAC / WAV). A progress bar shows the download status.',
-    q10: 'How do I star / favorite tracks and albums?',
-    a10: 'Click the star icon on any track row or on the album header. Starred items appear in the Favorites section in the sidebar.',
-    q11: 'What is the hero carousel on the home page?',
-    a11: 'The banner at the top of the home page randomly picks albums from your library and rotates through them every 10 seconds. Click the dots to jump to a specific one, or click the banner to open the album.',
-    s4: 'Settings',
-    q12: 'How do I change the theme?',
-    a12: 'Settings → Theme. Choose between Catppuccin Mocha (dark) and Catppuccin Latte (light).',
-    q13: 'How do I change the language?',
-    a13: 'Settings → Language. English and German are currently supported.',
-    q14: 'What does "Minimize to Tray" do?',
-    a14: 'When enabled, clicking the × button hides Psysonic to the system tray instead of closing it. Music keeps playing. Right-click the tray icon for controls or to quit.',
-    q15: 'How do I set a download folder?',
-    a15: 'Settings → App Behavior → Download Folder. Pick any folder — downloaded albums are saved there as ZIP files. Without a custom folder, your browser\'s default downloads location is used.',
-    s5: 'Scrobbling',
-    q16: 'How does scrobbling work?',
-    a16: 'Psysonic uses your Navidrome server\'s built-in Last.fm integration. First, connect your Last.fm account in Navidrome\'s web interface. Then enable scrobbling in Psysonic\'s Settings.',
-    q17: 'When is a scrobble sent?',
-    a17: 'A scrobble is submitted after you\'ve listened to 50% of a track.',
-    s6: 'Troubleshooting',
-    q18: 'Cover art and artist images load slowly.',
-    a18: 'Images are fetched from your server\'s disk on first load and then cached locally for 30 days. If your server\'s storage is slow, the first visit to a page may take a moment. Subsequent visits will be instant.',
-    q19: 'The connection test fails.',
-    a19: 'Check the URL including the port (e.g. http://192.168.1.100:4533). Make sure no firewall blocks the connection. Try http:// instead of https:// on a local network. Also verify that your username and password are correct.',
-    q20: 'No audio on Linux (AppImage).',
-    a20: 'The AppImage bundles GStreamer. If audio still doesn\'t work, try installing system GStreamer packages: gstreamer1.0-plugins-good, gstreamer1.0-plugins-bad, gstreamer1.0-libav.',
-    q21: 'The app crashes or shows a black screen on old Linux hardware.',
-    a21: 'This is usually caused by GPU / EGL driver issues in WebKitGTK. The official AppImage already patches the launcher to disable GPU compositing. If you build from source, launch with: WEBKIT_DISABLE_COMPOSITING_MODE=1 WEBKIT_DISABLE_DMABUF_RENDERER=1 ./psysonic',
+    logout: 'Logout'
  },
  queue: {
    title: 'Queue',
@@ -318,7 +59,7 @@ const enTranslation = {
    cancel: 'Cancel',
    save: 'Save',
    loadPlaylist: 'Load Playlist',
-    loading: 'Loading…',
+    loading: 'Loading...',
    noPlaylists: 'No playlists found.',
    load: 'Load',
    delete: 'Delete',
@@ -329,19 +70,9 @@ const enTranslation = {
    nextTracks: 'Next Tracks',
    emptyQueue: 'The queue is empty.'
  },
-  statistics: {
-    title: 'Statistics',
-    mostPlayed: 'Most Played Albums',
-    highestRated: 'Highest Rated Albums',
-    genreDistribution: 'Genre Distribution (Top 20)',
-    loadMore: 'Load more',
-  },
  player: {
    regionLabel: 'Music Player',
    openFullscreen: 'Open Fullscreen Player',
-    fullscreen: 'Fullscreen Player',
-    closeFullscreen: 'Close Fullscreen',
-    closeTooltip: 'Close (Esc)',
    noTitle: 'No Title',
    stop: 'Stop',
    prev: 'Previous Track',
@@ -365,7 +96,6 @@ const deTranslation = {
    mainstage: 'Mainstage',
    newReleases: 'Neueste',
    allAlbums: 'Alle Alben',
-    randomAlbums: 'Zufallsalben',
    artists: 'Künstler',
    playlists: 'Playlists',
    randomMix: 'Zufallsmix',
@@ -373,197 +103,8 @@ const deTranslation = {
    system: 'System',
    statistics: 'Statistiken',
    settings: 'Einstellungen',
-    help: 'Hilfe',
    expand: 'Sidebar einblenden',
-    collapse: 'Sidebar ausblenden',
-    updateAvailable: 'Update verfügbar',
-    updateReady: '{{version}} ist bereit',
-    updateLink: 'Zum Release →'
-  },
-  home: {
-    starred: 'Persönliche Favoriten',
-    recent: 'Zuletzt hinzugefügt',
-    mostPlayed: 'Meistgehört',
-    discover: 'Entdecken',
-    loadMore: 'Mehr laden',
-    discoverMore: 'Mehr entdecken'
-  },
-  hero: {
-    eyebrow: 'Album des Augenblicks',
-    playAlbum: 'Album abspielen',
-    enqueue: 'Einreihen',
-    enqueueTooltip: 'Ganzes Album zur Warteschlange hinzufügen',
-  },
-  search: {
-    placeholder: 'Suchen nach Künstler, Album oder Song…',
-    noResults: 'Keine Ergebnisse für „{{query}}"',
-    artists: 'Künstler',
-    albums: 'Alben',
-    songs: 'Songs',
-    clearLabel: 'Suche leeren',
-  },
-  nowPlaying: {
-    tooltip: 'Wer hört was?',
-    title: 'Wer hört was?',
-    loading: 'Lädt…',
-    nobody: 'Gerade hört niemand Musik.',
-    minutesAgo: 'vor {{n}}m',
-  },
-  contextMenu: {
-    playNow: 'Direkt abspielen',
-    playNext: 'Als Nächstes abspielen',
-    addToQueue: 'Zur Warteschlange hinzufügen',
-    enqueueAlbum: 'Ganzes Album einreihen',
-    startRadio: 'Radio starten',
-    favorite: 'Favorisieren',
-    favoriteArtist: 'Künstler favorisieren',
-    favoriteAlbum: 'Album favorisieren',
-    removeFromQueue: 'Diesen Song entfernen',
-    openAlbum: 'Album öffnen',
-    goToArtist: 'Zum Künstler',
-    download: 'Herunterladen (ZIP)',
-  },
-  albumDetail: {
-    back: 'Zurück',
-    playAll: 'Alle abspielen',
-    enqueue: 'Einreihen',
-    enqueueTooltip: 'Ganzes Album zur Warteschlange hinzufügen',
-    artistBio: 'Künstler-Bio',
-    download: 'Download (ZIP)',
-    downloading: 'Lade…',
-    downloadHint: 'FLAC/WAV-Alben werden serverseitig zuerst gezippt — bei großen Alben kann es einen Moment dauern, bevor der Download startet.',
-    downloadHintShort: 'Server zippt zuerst — je nach Dateigröße kann es etwas dauern bevor der Download startet',
-    favoriteAdd: 'Zu Favoriten hinzufügen',
-    favoriteRemove: 'Aus Favoriten entfernen',
-    favorite: 'Als Favorit',
-    noBio: 'Keine Biografie verfügbar.',
-    moreByArtist: 'Mehr von {{artist}}',
-    tracksCount: '{{n}} Tracks',
-    goToArtist: 'Zu {{artist}} wechseln',
-    moreLabelAlbums: 'Weitere Alben von {{label}} anzeigen',
-    trackTitle: 'Titel',
-    trackArtist: 'Interpret',
-    trackFormat: 'Format',
-    trackFavorite: 'Favorit',
-    trackRating: 'Bewertung',
-    trackDuration: 'Dauer',
-    trackTotal: 'Gesamt',
-    notFound: 'Album nicht gefunden.',
-    bioModal: 'Künstler-Biografie',
-    bioClose: 'Schließen',
-    ratingLabel: 'Bewertung',
-  },
-  artistDetail: {
-    back: 'Zurück',
-    albums: 'Alben',
-    album: 'Album',
-    playAll: 'Alle abspielen',
-    shuffle: 'Zufallswiedergabe',
-    radio: 'Radio',
-    loading: 'Lädt…',
-    noRadio: 'Keine ähnlichen Titel für diesen Künstler gefunden.',
-    notFound: 'Künstler nicht gefunden.',
-    albumsBy: 'Alben von {{name}}',
-    topTracks: 'Beliebteste Titel',
-    noAlbums: 'Keine Alben gefunden.',
-    trackTitle: 'Titel',
-    trackAlbum: 'Album',
-    trackDuration: 'Dauer',
-    favoriteAdd: 'Zu Favoriten hinzufügen',
-    favoriteRemove: 'Aus Favoriten entfernen',
-    favorite: 'Als Favorit',
-    albumCount_one: '{{count}} Album',
-    albumCount_other: '{{count}} Alben',
-  },
-  favorites: {
-    title: 'Favoriten',
-    empty: 'Du hast noch keine Favoriten gespeichert.',
-    artists: 'Künstler',
-    albums: 'Alben',
-    songs: 'Songs',
-  },
-  randomAlbums: {
-    title: 'Zufallsalben',
-    refresh: 'Neu laden',
-  },
-  randomMix: {
-    title: 'Zufallsmix',
-    remix: 'Neu mixen',
-    remixTooltip: 'Neue Songs laden',
-    playAll: 'Alle abspielen',
-    trackTitle: 'Titel',
-    trackArtist: 'Künstler',
-    trackAlbum: 'Album',
-    trackFavorite: 'Favorit',
-    trackDuration: 'Dauer',
-    favoriteAdd: 'Zu Favoriten hinzufügen',
-    favoriteRemove: 'Aus Favoriten entfernen',
-    play: 'Abspielen',
-  },
-  playlists: {
-    title: 'Playlists',
-    loading: 'Lade Playlists…',
-    empty: 'Keine Playlists gefunden.\nNutze die Warteschlange, um Playlists zu erstellen.',
-    play: 'Abspielen',
-    deleteTooltip: 'Löschen',
-    confirmDelete: 'Playlist "{{name}}" wirklich löschen?',
-    minutes: 'Min.',
-    track_one: '{{count}} Track',
-    track_other: '{{count}} Tracks',
-  },
-  albums: {
-    title: 'Alle Alben',
-    sortByName: 'A–Z (Album)',
-    sortByArtist: 'A–Z (Künstler)',
-    sortNewest: 'Neueste zuerst',
-    sortRandom: 'Zufällig',
-  },
-  artists: {
-    title: 'Künstler',
-    search: 'Suchen…',
-    all: 'Alle',
-    gridView: 'Gitteransicht',
-    listView: 'Listenansicht',
-    loadMore: 'Mehr laden',
-    notFound: 'Keine Künstler gefunden.',
-    albumCount_one: '{{count}} Album',
-    albumCount_other: '{{count}} Alben',
-  },
-  login: {
-    subtitle: 'Dein Navidrome Desktop Player',
-    serverName: 'Server-Name (optional)',
-    serverNamePlaceholder: 'Mein Navidrome',
-    serverUrl: 'Server-URL',
-    serverUrlPlaceholder: '192.168.1.100:4533 oder music.example.com',
-    username: 'Benutzername',
-    usernamePlaceholder: 'admin',
-    password: 'Passwort',
-    showPassword: 'Passwort anzeigen',
-    hidePassword: 'Passwort verstecken',
-    connect: 'Verbinden',
-    connecting: 'Verbinde…',
-    connected: 'Verbunden!',
-    error: 'Verbindung fehlgeschlagen – bitte Daten prüfen.',
-    urlRequired: 'Bitte Server-URL eingeben.',
-    savedServers: 'Gespeicherte Server',
-    addNew: 'Oder neuen Server hinzufügen',
-  },
-  common: {
-    albums: 'Alben',
-    album: 'Album',
-    loading: 'Lade…',
-    loadingMore: 'Lade…',
-    loadingPlaylists: 'Lade Playlists…',
-    noAlbums: 'Keine Alben gefunden.',
-    downloading: 'Lade…',
-    downloadZip: 'Download (ZIP)',
-    back: 'Zurück',
-    cancel: 'Abbrechen',
-    save: 'Speichern',
-    delete: 'Löschen',
-    use: 'Verwenden',
-    add: 'Hinzufügen',
-    active: 'Aktiv',
+    collapse: 'Sidebar ausblenden'
  },
  settings: {
    title: 'Einstellungen',
@@ -572,29 +113,19 @@ const deTranslation = {
    languageDe: 'Deutsch',
    theme: 'Design',
    appearance: 'Darstellung',
-    servers: 'Server',
-    serverName: 'Server-Name',
-    serverUrl: 'Server-URL',
-    serverUsername: 'Benutzername',
-    serverPassword: 'Passwort',
-    addServer: 'Server hinzufügen',
-    addServerTitle: 'Neuen Server hinzufügen',
-    useServer: 'Verwenden',
-    deleteServer: 'Löschen',
-    noServers: 'Keine Server gespeichert.',
-    serverActive: 'Aktiv',
-    confirmDeleteServer: 'Server „{{name}}" löschen?',
-    serverConnecting: 'Verbinde…',
-    serverConnected: 'Verbunden!',
-    serverFailed: 'Verbindung fehlgeschlagen.',
+    connection: 'Verbindung',
+    lanIp: 'LAN-IP',
+    externalUrl: 'Externe URL',
    testBtn: 'Verbindung testen',
    testingBtn: 'Teste…',
    connected: 'Verbunden',
    failed: 'Fehlgeschlagen',
+    activeConn: 'Aktive Verbindung',
+    activeServer: 'Aktuell verwendeter Server:',
+    connLocal: 'Lokal (LAN)',
+    connExternal: 'Extern (Internet)',
    lfmTitle: 'Last.fm Scrobbling',
-    lfmDesc1: 'Psysonic unterstützt serverseitiges Scrobbling direkt über Navidrome. Um Last.fm zu verknüpfen, logge dich bitte einmalig über den',
-    lfmDesc1NavidromeWebplayer: 'Navidrome Webplayer',
-    lfmDesc1b: 'im Browser ein, gehe auf dein Profil und verbinde deinen Last.fm Account.',
+    lfmDesc1: 'Psysonic unterstützt serverseitiges Scrobbling direkt über Navidrome. Um Last.fm zu verknüpfen, logge dich bitte einmalig über den <strong>Navidrome Webplayer</strong> im Browser ein, gehe auf dein Profil und verbinde deinen Last.fm Account.',
    lfmDesc2: 'Sobald das erledigt ist, leitet Psysonic deine aktuell gespielten Songs automatisch an Navidrome weiter, und diese erscheinen auf Last.fm.',
    scrobbleEnabled: 'Scrobbling aktiviert',
    scrobbleDesc: 'Songs nach 50% Laufzeit an Last.fm senden',
@@ -607,66 +138,7 @@ const deTranslation = {
    downloadsDefault: 'Standard-Downloads-Ordner',
    pickFolder: 'Auswählen',
    pickFolderTitle: 'Download-Ordner auswählen',
-    logout: 'Abmelden',
-    aboutTitle: 'Über Psysonic',
-    aboutDesc: 'Ein Desktop-Musikplayer für Subsonic-kompatible Server (Navidrome, Gonic u. a.). Streame deine selbst gehostete Musikbibliothek mit einer modernen Oberfläche im Catppuccin-Design.',
-    aboutFeatures: 'Multi-Server · Scrobbling · Vollbild-Player · Album-Downloads · Bild-Cache · Catppuccin-Themes',
-    aboutLicense: 'Lizenz',
-    aboutLicenseText: 'MIT — kostenlos nutzbar, veränderbar und weitergabbar.',
-    aboutRepo: 'Quellcode auf GitHub',
-    aboutVersion: 'Version',
-    aboutBuiltWith: 'Gebaut mit Tauri · React · TypeScript · Howler.js'
-  },
-  help: {
-    title: 'Hilfe',
-    s1: 'Erste Schritte',
-    q1: 'Welche Server sind kompatibel?',
-    a1: 'Psysonic funktioniert mit jedem Subsonic-kompatiblen Server: Navidrome, Gonic, Subsonic, Airsonic und anderen. Navidrome ist die empfohlene Wahl.',
-    q2: 'Wie verbinde ich mich mit meinem Server?',
-    a2: 'Öffne die Einstellungen und klicke auf "Server hinzufügen". Gib die Server-URL (z. B. 192.168.1.100:4533), Benutzername und Passwort ein. Psysonic testet die Verbindung vor dem Speichern — bei Fehler wird nichts gespeichert.',
-    q3: 'Kann ich mehrere Server verwenden?',
-    a3: 'Ja. Du kannst beliebig viele Server in den Einstellungen hinzufügen und jederzeit zwischen ihnen wechseln. Immer ist nur ein Server aktiv.',
-    s2: 'Wiedergabe',
-    q4: 'Wie spiele ich Musik ab?',
-    a4: 'Doppelklick auf einen Track startet die Wiedergabe. Auf Album- und Künstlerseiten gibt es "Alle abspielen". Tracks lassen sich auch per Drag & Drop in die Warteschlange ziehen.',
-    q5: 'Welche Tastenkürzel gibt es?',
-    a5: 'Leertaste = Play / Pause · Escape = Vollbild schließen. Medientasten (Play/Pause, Weiter, Zurück) funktionieren unter macOS und Windows. Unter Linux bitte die Buttons in der Playerleiste nutzen.',
-    q6: 'Was ist die Warteschlange?',
-    a6: 'Die Warteschlange zeigt alle kommenden Tracks. Öffnen mit dem Listen-Icon in der Playerleiste. Tracks können per Drag & Drop umsortiert und als Playlist gespeichert werden.',
-    q7: 'Wie öffne ich den Vollbild-Player?',
-    a7: 'Klick auf das Album-Cover unten in der Playerleiste oder auf das Expand-Icon daneben. Mit Escape wieder schließen.',
-    q8: 'Wie funktioniert die Wiederholfunktion?',
-    a8: 'Klick auf den Wiederhol-Button in der Playerleiste, um zwischen den Modi zu wechseln: Aus → Alles wiederholen → Einen wiederholen.',
-    s3: 'Bibliothek',
-    q9: 'Wie lade ich ein Album herunter?',
-    a9: 'Auf der Album-Detailseite auf "Download (ZIP)" klicken. Der Server zieht das Album zuerst zusammen — bei großen Alben oder verlustfreien Dateien (FLAC / WAV) kann das einen Moment dauern. Ein Fortschrittsbalken zeigt den Status.',
-    q10: 'Wie markiere ich Tracks und Alben als Favoriten?',
-    a10: 'Das Stern-Icon auf einem Track oder im Album-Header anklicken. Markierte Einträge erscheinen im Bereich "Favoriten" in der Seitenleiste.',
-    q11: 'Was ist das Karussell auf der Startseite?',
-    a11: 'Das Banner oben auf der Startseite wählt zufällige Alben aus der Bibliothek und rotiert alle 10 Sekunden weiter. Mit den Punkten kann man manuell springen, Klick auf das Banner öffnet das Album.',
-    s4: 'Einstellungen',
-    q12: 'Wie ändere ich das Theme?',
-    a12: 'Einstellungen → Theme. Wahl zwischen Catppuccin Mocha (dunkel) und Catppuccin Latte (hell).',
-    q13: 'Wie ändere ich die Sprache?',
-    a13: 'Einstellungen → Sprache. Aktuell verfügbar: Englisch und Deutsch.',
-    q14: 'Was bewirkt "In Tray minimieren"?',
-    a14: 'Wenn aktiviert, versteckt sich Psysonic beim Klick auf × im System-Tray statt sich zu schließen. Die Musik läuft weiter. Rechtsklick auf das Tray-Icon zeigt Steueroptionen und "Beenden".',
-    q15: 'Wie lege ich einen Download-Ordner fest?',
-    a15: 'Einstellungen → App-Verhalten → Download-Ordner. Beliebigen Ordner wählen — heruntergeladene Alben werden dort als ZIP gespeichert. Ohne eigenen Ordner landet alles im Standard-Downloads-Ordner.',
-    s5: 'Scrobbling',
-    q16: 'Wie funktioniert Scrobbling?',
-    a16: 'Psysonic nutzt die eingebaute Last.fm-Integration von Navidrome. Zuerst das Last.fm-Konto im Navidrome-Webinterface verbinden, dann Scrobbling in den Psysonic-Einstellungen aktivieren.',
-    q17: 'Wann wird ein Scrobble gesendet?',
-    a17: 'Ein Scrobble wird übermittelt, wenn 50 % eines Tracks gehört wurden.',
-    s6: 'Problemlösung',
-    q18: 'Cover und Künstlerbilder laden langsam.',
-    a18: 'Bilder werden beim ersten Aufruf vom Server geholt und dann 30 Tage lokal gecacht. Bei langsamen Server-Festplatten kann der erste Seitenaufruf einen Moment dauern. Danach geht alles sofort.',
-    q19: 'Der Verbindungstest schlägt fehl.',
-    a19: 'URL inklusive Port prüfen (z. B. http://192.168.1.100:4533). Sicherstellen, dass keine Firewall die Verbindung blockiert. Im lokalen Netzwerk http:// statt https:// versuchen. Benutzername und Passwort kontrollieren.',
-    q20: 'Kein Ton unter Linux (AppImage).',
-    a20: 'Das AppImage bündelt GStreamer. Falls trotzdem kein Ton kommt, diese System-Pakete installieren: gstreamer1.0-plugins-good, gstreamer1.0-plugins-bad, gstreamer1.0-libav.',
-    q21: 'Die App stürzt ab oder zeigt einen schwarzen Bildschirm auf alter Linux-Hardware.',
-    a21: 'Das liegt meist an GPU/EGL-Treiberproblemen in WebKitGTK. Das offizielle AppImage deaktiviert GPU-Compositing bereits automatisch. Beim Selbst-Kompilieren: WEBKIT_DISABLE_COMPOSITING_MODE=1 WEBKIT_DISABLE_DMABUF_RENDERER=1 ./psysonic',
+    logout: 'Abmelden'
  },
  queue: {
    title: 'Warteschlange',
@@ -675,7 +147,7 @@ const deTranslation = {
    cancel: 'Abbrechen',
    save: 'Speichern',
    loadPlaylist: 'Playlist laden',
-    loading: 'Lade…',
+    loading: 'Lade...',
    noPlaylists: 'Keine Playlists gefunden.',
    load: 'Laden',
    delete: 'Löschen',
@@ -686,19 +158,9 @@ const deTranslation = {
    nextTracks: 'Nächste Titel',
    emptyQueue: 'Die Warteschlange ist leer.'
  },
-  statistics: {
-    title: 'Statistiken',
-    mostPlayed: 'Meistgespielte Alben',
-    highestRated: 'Höchstbewertete Alben',
-    genreDistribution: 'Genre-Verteilung (Top 20)',
-    loadMore: 'Mehr laden',
-  },
  player: {
    regionLabel: 'Musikplayer',
    openFullscreen: 'Vollbild-Player öffnen',
-    fullscreen: 'Vollbild-Player',
-    closeFullscreen: 'Vollbild schließen',
-    closeTooltip: 'Schließen (Esc)',
    noTitle: 'Kein Titel',
    stop: 'Stop',
    prev: 'Vorheriger Titel',
@@ -728,10 +190,11 @@ i18n
    lng: savedLanguage,
    fallbackLng: 'en',
    interpolation: {
-      escapeValue: false
+      escapeValue: false // react already safes from xss
    }
  });

+// Setup listener to persist language changes
 i18n.on('languageChanged', (lng) => {
  localStorage.setItem('psysonic_language', lng);
 });
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { Play, Star, ExternalLink, X, ChevronLeft, Download, ListPlus, Info } from 'lucide-react';
-import { getAlbum, getArtist, getArtistInfo, setRating, buildCoverArtUrl, coverArtCacheKey, buildDownloadUrl, star, unstar, SubsonicSong, SubsonicAlbum } from '../api/subsonic';
+import { Play, Star, ExternalLink, X, ChevronLeft, Download, ListPlus } from 'lucide-react';
+import { getAlbum, getArtist, getArtistInfo, setRating, buildCoverArtUrl, buildDownloadUrl, star, unstar, SubsonicSong, SubsonicAlbum } from '../api/subsonic';
 import { usePlayerStore } from '../store/playerStore';
 import { useAuthStore } from '../store/authStore';
 import { useNavigate } from 'react-router-dom';
@@ -9,16 +9,6 @@ import { open } from '@tauri-apps/plugin-shell';
 import { writeFile } from '@tauri-apps/plugin-fs';
 import { join } from '@tauri-apps/api/path';
 import AlbumCard from '../components/AlbumCard';
-import CachedImage, { useCachedUrl } from '../components/CachedImage';
-import { useTranslation } from 'react-i18next';
-
-function sanitizeFilename(name: string): string {
-  return name
-    .replace(/[/\\?%*:|"<>]/g, '-')
-    .replace(/\.{2,}/g, '.')
-    .replace(/^[\s.]+|[\s.]+$/g, '')
-    .substring(0, 200) || 'download';
-}

 function formatDuration(seconds: number): string {
  const m = Math.floor(seconds / 60);
@@ -39,28 +29,10 @@ function codecLabel(song: { suffix?: string; bitRate?: number; samplingRate?: nu
  return parts.join(' · ');
 }

-/** Strip dangerous tags/attributes from server-provided HTML (e.g. artist bios from Last.fm) */
-function sanitizeHtml(html: string): string {
-  const parser = new DOMParser();
-  const doc = parser.parseFromString(html, 'text/html');
-  doc.querySelectorAll('script, style, iframe, object, embed, form, input, button, select, base, meta, link').forEach(el => el.remove());
-  doc.querySelectorAll('*').forEach(el => {
-    Array.from(el.attributes).forEach(attr => {
-      const name = attr.name.toLowerCase();
-      const val = attr.value.toLowerCase().trim();
-      if (name.startsWith('on') || (name === 'href' && (val.startsWith('javascript:') || val.startsWith('data:'))) || (name === 'src' && (val.startsWith('javascript:') || val.startsWith('data:')))) {
-        el.removeAttribute(attr.name);
-      }
-    });
-  });
-  return doc.body.innerHTML;
-}
-
 function StarRating({ value, onChange }: { value: number; onChange: (r: number) => void }) {
-  const { t } = useTranslation();
  const [hover, setHover] = useState(0);
  return (
-    <div className="star-rating" role="radiogroup" aria-label={t('albumDetail.ratingLabel')}>
+    <div className="star-rating" role="radiogroup" aria-label="Bewertung">
      {[1,2,3,4,5].map(n => (
        <button
          key={n}
@@ -68,7 +40,7 @@ function StarRating({ value, onChange }: { value: number; onChange: (r: number)
          onMouseEnter={() => setHover(n)}
          onMouseLeave={() => setHover(0)}
          onClick={() => onChange(n)}
-          aria-label={`${n}`}
+          aria-label={`${n} Stern${n !== 1 ? 'e' : ''}`}
          role="radio"
          aria-checked={(hover || value) >= n}
        >
@@ -81,20 +53,18 @@ function StarRating({ value, onChange }: { value: number; onChange: (r: number)

 interface BioModalProps { bio: string; onClose: () => void; }
 function BioModal({ bio, onClose }: BioModalProps) {
-  const { t } = useTranslation();
  return (
-    <div className="modal-overlay" onClick={onClose} role="dialog" aria-modal="true" aria-label={t('albumDetail.bioModal')}>
+    <div className="modal-overlay" onClick={onClose} role="dialog" aria-modal="true" aria-label="Künstler-Biografie">
      <div className="modal-content" onClick={e => e.stopPropagation()}>
-        <button className="modal-close" onClick={onClose} aria-label={t('albumDetail.bioClose')}><X size={18} /></button>
-        <h3 style={{ marginBottom: '1rem', fontFamily: 'var(--font-display)' }}>{t('albumDetail.bioModal')}</h3>
-        <div className="artist-bio" dangerouslySetInnerHTML={{ __html: sanitizeHtml(bio) }} data-selectable />
+        <button className="modal-close" onClick={onClose} aria-label="Schließen"><X size={18} /></button>
+        <h3 style={{ marginBottom: '1rem', fontFamily: 'var(--font-display)' }}>Künstler-Biografie</h3>
+        <div className="artist-bio" dangerouslySetInnerHTML={{ __html: bio }} data-selectable />
      </div>
    </div>
  );
 }

 export default function AlbumDetail() {
-  const { t } = useTranslation();
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const auth = useAuthStore();
@@ -107,24 +77,27 @@ export default function AlbumDetail() {
  const [bio, setBio] = useState<string | null>(null);
  const [bioOpen, setBioOpen] = useState(false);
  const [loading, setLoading] = useState(true);
-  const [downloadProgress, setDownloadProgress] = useState<number | null>(null);
+  const [downloading, setDownloading] = useState(false);
  const [isStarred, setIsStarred] = useState(false);
  const [starredSongs, setStarredSongs] = useState<Set<string>>(new Set());
-  const [hoveredSongId, setHoveredSongId] = useState<string | null>(null);

  useEffect(() => {
    if (!id) return;
    setLoading(true);
    setRelatedAlbums([]);
-    getAlbum(id).then(async data => {
-      setAlbum(data);
+    getAlbum(id).then(async data => { 
+      setAlbum(data); 
      setIsStarred(!!data.album.starred);
+      
      const initialStarred = new Set<string>();
      data.songs.forEach(s => { if (s.starred) initialStarred.add(s.id); });
      setStarredSongs(initialStarred);
-      setLoading(false);
+      
+      setLoading(false); 
+      // Fetch related albums by the same artist
      try {
        const artistData = await getArtist(data.album.artistId);
+        // Filter out the current album from the related list
        setRelatedAlbums(artistData.albums.filter(a => a.id !== id));
      } catch (e) {
        console.error('Failed to fetch related albums', e);
@@ -136,7 +109,7 @@ export default function AlbumDetail() {
    if (!album) return;
    const tracks = album.songs.map(s => ({
      id: s.id, title: s.title, artist: s.artist, album: s.album,
-      albumId: s.albumId, artistId: s.artistId, duration: s.duration, coverArt: s.coverArt, track: s.track,
+      albumId: s.albumId, duration: s.duration, coverArt: s.coverArt, track: s.track,
      year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating,
    }));
    if (tracks[0]) playTrack(tracks[0], tracks);
@@ -146,7 +119,7 @@ export default function AlbumDetail() {
    if (!album) return;
    const tracks = album.songs.map(s => ({
      id: s.id, title: s.title, artist: s.artist, album: s.album,
-      albumId: s.albumId, artistId: s.artistId, duration: s.duration, coverArt: s.coverArt, track: s.track,
+      albumId: s.albumId, duration: s.duration, coverArt: s.coverArt, track: s.track,
      year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating,
    }));
    enqueue(tracks);
@@ -154,10 +127,10 @@ export default function AlbumDetail() {

  const handlePlaySong = (song: SubsonicSong) => {
    const track = {
-      id: song.id, title: song.title, artist: song.artist, album: song.album,
-      albumId: song.albumId, artistId: song.artistId, duration: song.duration, coverArt: song.coverArt,
-      track: song.track, year: song.year, bitRate: song.bitRate,
-      suffix: song.suffix, userRating: song.userRating
+      id: song.id, title: song.title, artist: song.artist, album: song.album, 
+      albumId: song.albumId, duration: song.duration, coverArt: song.coverArt, 
+      track: song.track, year: song.year, bitRate: song.bitRate, 
+      suffix: song.suffix, userRating: song.userRating 
    };
    playTrack(track, [track]);
  };
@@ -171,220 +144,190 @@ export default function AlbumDetail() {
    if (!album) return;
    if (bio) { setBioOpen(true); return; }
    const info = await getArtistInfo(album.album.artistId);
-    setBio(info.biography ?? t('albumDetail.noBio'));
+    setBio(info.biography ?? 'Keine Biografie verfügbar.');
    setBioOpen(true);
  };

  const handleDownload = async (albumName: string, albumId: string) => {
-    setDownloadProgress(0);
+    setDownloading(true);
    try {
      const url = buildDownloadUrl(albumId);
      const response = await fetch(url);
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
-
-      const contentLength = response.headers.get('Content-Length');
-      const total = contentLength ? parseInt(contentLength, 10) : 0;
-      const chunks: Uint8Array<ArrayBuffer>[] = [];
-
-      if (total && response.body) {
-        const reader = response.body.getReader();
-        let received = 0;
-        while (true) {
-          const { done, value } = await reader.read();
-          if (done) break;
-          chunks.push(value);
-          received += value.length;
-          setDownloadProgress(Math.round((received / total) * 100));
-        }
-      } else {
-        const buffer = await response.arrayBuffer() as ArrayBuffer;
-        chunks.push(new Uint8Array(buffer));
-        setDownloadProgress(100);
-      }
-
-      const blob = new Blob(chunks);
+      const blob = await response.blob();
+      
      if (auth.downloadFolder) {
        const buffer = await blob.arrayBuffer();
-        const path = await join(auth.downloadFolder, `${sanitizeFilename(albumName)}.zip`);
+        const path = await join(auth.downloadFolder, `${albumName}.zip`);
        await writeFile(path, new Uint8Array(buffer));
+        console.log(`Saved to ${path}`);
      } else {
        const blobUrl = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = blobUrl;
-        a.download = `${sanitizeFilename(albumName)}.zip`;
+        a.download = `${albumName}.zip`;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        setTimeout(() => URL.revokeObjectURL(blobUrl), 2000);
      }
    } catch (e) {
-      console.error('Download failed:', e);
-      setDownloadProgress(null);
+      console.error('Download fehlgeschlagen:', e);
    } finally {
-      // keep bar visible at 100% for 3 seconds so user sees completion
-      setTimeout(() => setDownloadProgress(null), 60000);
+      setDownloading(false);
    }
  };

  const toggleStar = async () => {
    if (!album) return;
    const currentlyStarred = isStarred;
-    setIsStarred(!currentlyStarred);
+    setIsStarred(!currentlyStarred); // Optimistic UI update
    try {
-      if (currentlyStarred) await unstar(album.album.id);
-      else await star(album.album.id);
+      if (currentlyStarred) {
+        await unstar(album.album.id);
+      } else {
+        await star(album.album.id);
+      }
    } catch (e) {
      console.error('Failed to toggle star', e);
-      setIsStarred(currentlyStarred);
+      setIsStarred(currentlyStarred); // Revert on failure
    }
  };

  const toggleSongStar = async (song: SubsonicSong, e: React.MouseEvent) => {
-    e.stopPropagation();
+    e.stopPropagation(); // prevent play on double click trigger
    const currentlyStarred = starredSongs.has(song.id);
+    
+    // Optimistic UI
    const nextStarred = new Set(starredSongs);
    if (currentlyStarred) nextStarred.delete(song.id);
    else nextStarred.add(song.id);
    setStarredSongs(nextStarred);
+
    try {
-      if (currentlyStarred) await unstar(song.id, 'song');
-      else await star(song.id, 'song');
+      if (currentlyStarred) {
+        await unstar(song.id, 'song');
+      } else {
+        await star(song.id, 'song');
+      }
    } catch (err) {
      console.error('Failed to toggle song star', err);
-      setStarredSongs(new Set(starredSongs));
+      // Revert
+      const revert = new Set(starredSongs);
+      setStarredSongs(revert);
    }
  };

-  // Hooks must be called unconditionally — derive from nullable album state
-  const coverUrl = album?.album.coverArt ? buildCoverArtUrl(album.album.coverArt, 400) : '';
-  const coverKey = album?.album.coverArt ? coverArtCacheKey(album.album.coverArt, 400) : '';
-  const resolvedCoverUrl = useCachedUrl(coverUrl, coverKey);
-
  if (loading) return <div className="loading-center"><div className="spinner" /></div>;
-  if (!album) return <div className="empty-state">{t('albumDetail.notFound')}</div>;
+  if (!album) return <div className="empty-state">Album nicht gefunden.</div>;

  const { album: info, songs } = album;
+  const coverUrl = info.coverArt ? buildCoverArtUrl(info.coverArt, 400) : '';
  const totalDuration = songs.reduce((acc, s) => acc + s.duration, 0);
-  const hasVariousArtists = songs.some(s => s.artist !== info.artist);
-  const totalSize = songs.reduce((acc, s) => acc + (s.size ?? 0), 0);

  return (
    <div className="album-detail animate-fade-in">
      {bioOpen && bio && <BioModal bio={bio} onClose={() => setBioOpen(false)} />}

      <div className="album-detail-header">
-        {resolvedCoverUrl && (
+        {coverUrl && (
          <div
            className="album-detail-bg"
-            style={{ backgroundImage: `url(${resolvedCoverUrl})` }}
+            style={{ backgroundImage: `url(${coverUrl})` }}
            aria-hidden="true"
          />
        )}
        <div className="album-detail-overlay" aria-hidden="true" />
-
+        
        <div style={{ position: 'relative', zIndex: 1 }}>
          <button className="btn btn-ghost" onClick={() => navigate(-1)} style={{ marginBottom: '1rem', gap: '6px' }}>
-            <ChevronLeft size={16} /> {t('albumDetail.back')}
+            <ChevronLeft size={16} /> Zurück
          </button>
          <div className="album-detail-hero">
-            {coverUrl ? (
-              <CachedImage className="album-detail-cover" src={coverUrl} cacheKey={coverKey} alt={`${info.name} Cover`} />
-            ) : (
-              <div className="album-detail-cover album-cover-placeholder">♪</div>
-            )}
-            <div className="album-detail-meta">
-              <span className="badge" style={{ marginBottom: '0.5rem' }}>{t('common.album')}</span>
-              <h1 className="album-detail-title">{info.name}</h1>
-              <p className="album-detail-artist">
-                <button
-                  className="album-detail-artist-link"
-                  data-tooltip={t('albumDetail.goToArtist', { artist: info.artist })}
-                  onClick={() => navigate(`/artist/${info.artistId}`)}
-                >
-                  {info.artist}
-                </button>
-              </p>
-              <div className="album-detail-info">
-                {info.year && <span>{info.year}</span>}
-                {info.genre && <span>· {info.genre}</span>}
-                <span>· {songs.length} Tracks</span>
-                <span>· {formatDuration(totalDuration)}</span>
-                {info.recordLabel && (
-                  <>
-                    <span style={{ margin: '0 4px' }}>·</span>
-                    <button
-                      className="album-detail-artist-link"
-                      data-tooltip={t('albumDetail.moreLabelAlbums', { label: info.recordLabel })}
-                      onClick={() => navigate(`/label/${encodeURIComponent(info.recordLabel!)}`)}
-                    >
-                      {info.recordLabel}
-                    </button>
-                  </>
-                )}
-              </div>
-              <div className="album-detail-actions">
-                <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
-                  <button className="btn btn-primary" id="album-play-all-btn" onClick={handlePlayAll}>
-                    <Play size={16} fill="currentColor" /> {t('albumDetail.playAll')}
-                  </button>
-                  <button
-                    className="btn btn-surface"
-                    onClick={handleEnqueueAll}
-                    data-tooltip={t('albumDetail.enqueueTooltip')}
+          {coverUrl ? (
+            <img className="album-detail-cover" src={coverUrl} alt={`${info.name} Cover`} />
+          ) : (
+            <div className="album-detail-cover album-cover-placeholder">♪</div>
+          )}
+          <div className="album-detail-meta">
+            <span className="badge" style={{ marginBottom: '0.5rem' }}>Album</span>
+            <h1 className="album-detail-title">{info.name}</h1>
+            <p className="album-detail-artist">
+              <button
+                className="album-detail-artist-link"
+                data-tooltip={`Zu ${info.artist} wechseln`}
+                onClick={() => navigate(`/artist/${info.artistId}`)}
+              >
+                {info.artist}
+              </button>
+            </p>
+            <div className="album-detail-info">
+              {info.year && <span>{info.year}</span>}
+              {info.genre && <span>· {info.genre}</span>}
+              <span>· {songs.length} Tracks</span>
+              <span>· {formatDuration(totalDuration)}</span>
+              {info.recordLabel && (
+                <>
+                  <span style={{ margin: '0 4px' }}>·</span>
+                  <button 
+                    className="album-detail-artist-link"
+                    data-tooltip={`Weitere Alben von ${info.recordLabel} anzeigen`}
+                    onClick={() => navigate(`/label/${encodeURIComponent(info.recordLabel!)}`)}
                  >
-                    <ListPlus size={16} /> {t('albumDetail.enqueue')}
+                    {info.recordLabel}
                  </button>
-                </div>
-
-                <button
-                  className="btn btn-ghost"
-                  id="album-star-btn"
-                  onClick={toggleStar}
-                  data-tooltip={isStarred ? t('albumDetail.favoriteRemove') : t('albumDetail.favoriteAdd')}
-                  style={{ color: isStarred ? 'var(--accent)' : 'inherit', border: isStarred ? '1px solid var(--accent)' : undefined }}
+                </>
+              )}
+            </div>
+            <div className="album-detail-actions">
+              <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+                <button className="btn btn-primary" id="album-play-all-btn" onClick={handlePlayAll}>
+                  <Play size={16} fill="currentColor" /> Alle abspielen
+                </button>
+                <button 
+                  className="btn btn-surface" 
+                  onClick={handleEnqueueAll}
+                  data-tooltip="Ganzes Album zur Warteschlange hinzufügen"
                >
-                  <Star size={16} fill={isStarred ? "currentColor" : "none"} />
-                  {t('albumDetail.favorite')}
+                  <ListPlus size={16} /> Einreihen
                </button>
-
-                <button className="btn btn-ghost" id="album-bio-btn" onClick={handleBio}>
-                  <ExternalLink size={16} /> {t('albumDetail.artistBio')}
-                </button>
-                {downloadProgress !== null ? (
-                  <div className="download-progress-wrap">
-                    <Download size={14} />
-                    <div className="download-progress-bar">
-                      <div className="download-progress-fill" style={{ width: `${downloadProgress}%` }} />
-                    </div>
-                    <span className="download-progress-pct">{downloadProgress}%</span>
-                  </div>
-                ) : (
-                  <button className="btn btn-ghost" id="album-download-btn" onClick={() => handleDownload(info.name, info.id)}>
-                    <Download size={16} /> {t('albumDetail.download')}{totalSize > 0 ? ` · ${formatSize(totalSize)}` : ''}
-                  </button>
-                )}
-                <span className="download-hint">
-                  <Info size={12} />
-                  {t('albumDetail.downloadHintShort')}
-                </span>
              </div>
+              
+              <button 
+                className="btn btn-ghost" 
+                id="album-star-btn" 
+                onClick={toggleStar}
+                data-tooltip={isStarred ? "Aus Favoriten entfernen" : "Zu Favoriten hinzufügen"}
+                style={{ color: isStarred ? 'var(--accent)' : 'inherit', border: isStarred ? '1px solid var(--accent)' : undefined }}
+              >
+                <Star size={16} fill={isStarred ? "currentColor" : "none"} /> 
+                {isStarred ? 'Favorit' : 'Als Favorit'}
+              </button>
+
+              <button className="btn btn-ghost" id="album-bio-btn" onClick={handleBio}>
+                <ExternalLink size={16} /> Künstler-Bio
+              </button>
+              <button className="btn btn-ghost" id="album-download-btn" onClick={() => handleDownload(info.name, info.id)} disabled={downloading}>
+                <Download size={16} /> {downloading ? 'Lade…' : 'Download (ZIP)'}
+              </button>
            </div>
          </div>
        </div>
+        </div>
      </div>

      <div className="tracklist">
-        <div className={`tracklist-header${hasVariousArtists ? ' tracklist-va' : ''}`}>
+        <div className="tracklist-header">
          <div style={{ textAlign: 'center' }}>#</div>
-          <div>{t('albumDetail.trackTitle')}</div>
-          {hasVariousArtists && <div>{t('albumDetail.trackArtist')}</div>}
-          <div>{t('albumDetail.trackFormat')}</div>
-          <div style={{ textAlign: 'center' }}>{t('albumDetail.trackFavorite')}</div>
-          <div>{t('albumDetail.trackRating')}</div>
-          <div style={{ textAlign: 'right' }}>{t('albumDetail.trackDuration')}</div>
+          <div>Titel</div>
+          <div>Format</div>
+          <div style={{ textAlign: 'center' }}>Favorit</div>
+          <div>Bewertung</div>
+          <div style={{ textAlign: 'right' }}>Dauer</div>
        </div>

        {(() => {
+          // Group songs by disc number
          const discs = new Map<number, SubsonicSong[]>();
          songs.forEach(song => {
            const disc = song.discNumber ?? 1;
@@ -405,15 +348,13 @@ export default function AlbumDetail() {
              {discs.get(discNum)!.map((song, i) => (
                <div
                  key={song.id}
-                  className={`track-row${hasVariousArtists ? ' track-row-va' : ''}`}
-                  onMouseEnter={() => setHoveredSongId(song.id)}
-                  onMouseLeave={() => setHoveredSongId(null)}
+                  className="track-row"
                  onDoubleClick={() => handlePlaySong(song)}
                  onContextMenu={(e) => {
                    e.preventDefault();
                    const track = {
                      id: song.id, title: song.title, artist: song.artist, album: song.album,
-                      albumId: song.albumId, artistId: song.artistId, duration: song.duration, coverArt: song.coverArt, track: song.track,
+                      albumId: song.albumId, duration: song.duration, coverArt: song.coverArt, track: song.track,
                      year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating,
                    };
                    openContextMenu(e.clientX, e.clientY, track, 'album-song');
@@ -424,29 +365,22 @@ export default function AlbumDetail() {
                    e.dataTransfer.effectAllowed = 'copy';
                    const track = {
                      id: song.id, title: song.title, artist: song.artist, album: song.album,
-                      albumId: song.albumId, artistId: song.artistId, duration: song.duration, coverArt: song.coverArt, track: song.track,
+                      albumId: song.albumId, duration: song.duration, coverArt: song.coverArt, track: song.track,
                      year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating,
                    };
-                    e.dataTransfer.setData('text/plain', JSON.stringify({ type: 'song', track }));
+                    e.dataTransfer.setData('application/json', JSON.stringify({
+                      type: 'song',
+                      track
+                    }));
                  }}
                >
-                  <div
-                    className="track-num"
-                    style={{ textAlign: 'center', cursor: hoveredSongId === song.id ? 'pointer' : 'default', color: hoveredSongId === song.id ? 'var(--accent)' : undefined }}
-                    onClick={() => handlePlaySong(song)}
-                  >
-                    {hoveredSongId === song.id
-                      ? <Play size={13} fill="currentColor" />
-                      : (song.track ?? i + 1)}
-                  </div>
+                  <div className="track-num" style={{ textAlign: 'center' }}>{song.track ?? i + 1}</div>
                  <div className="track-info">
                    <span className="track-title" data-tooltip={song.title}>{song.title}</span>
-                  </div>
-                  {hasVariousArtists && (
-                    <div className="track-artist-cell">
+                    {song.artist !== info.artist && (
                      <span className="track-artist">{song.artist}</span>
-                    </div>
-                  )}
+                    )}
+                  </div>
                  <div className="track-meta" style={{ display: 'flex', alignItems: 'center' }}>
                    {(song.suffix || song.bitRate) && (
                      <span className="track-codec" style={{ marginTop: 0 }}>
@@ -456,10 +390,10 @@ export default function AlbumDetail() {
                    )}
                  </div>
                  <div style={{ display: 'flex', justifyContent: 'center' }}>
-                    <button
+                    <button 
                      className="btn btn-ghost"
                      onClick={(e) => toggleSongStar(song, e)}
-                      data-tooltip={starredSongs.has(song.id) ? t('albumDetail.favoriteRemove') : t('albumDetail.favoriteAdd')}
+                      data-tooltip={starredSongs.has(song.id) ? "Aus Favoriten entfernen" : "Zu Favoriten hinzufügen"}
                      style={{ padding: '4px', height: 'auto', minHeight: 'unset', color: starredSongs.has(song.id) ? 'var(--accent)' : 'var(--text-muted)' }}
                    >
                      <Star size={14} fill={starredSongs.has(song.id) ? "currentColor" : "none"} />
@@ -477,18 +411,11 @@ export default function AlbumDetail() {
            </div>
          ));
        })()}
-
-        {/* Total row */}
-        <div className={`tracklist-total${hasVariousArtists ? ' tracklist-va' : ''}`}>
-          <span className="tracklist-total-label">{t('albumDetail.trackTotal')}</span>
-          <span className="tracklist-total-value">{formatDuration(totalDuration)}</span>
-        </div>
      </div>

      {relatedAlbums.length > 0 && (
        <div style={{ padding: '0 var(--space-6) var(--space-8)' }}>
-          <div style={{ borderTop: '1px solid var(--border-subtle)', marginBottom: '2rem' }} />
-          <h2 className="section-title" style={{ marginBottom: '1rem' }}>{t('albumDetail.moreByArtist', { artist: info.artist })}</h2>
+          <h2 className="section-title" style={{ marginBottom: '1rem' }}>Mehr von {info.artist}</h2>
          <div className="album-grid-wrap">
            {relatedAlbums.map(a => <AlbumCard key={a.id} album={a} />)}
          </div>
@@ -1,12 +1,10 @@
 import React, { useEffect, useState, useCallback, useRef } from 'react';
 import AlbumCard from '../components/AlbumCard';
 import { getAlbumList, SubsonicAlbum } from '../api/subsonic';
-import { useTranslation } from 'react-i18next';

-type SortType = 'alphabeticalByName' | 'alphabeticalByArtist';
+type SortType = 'alphabeticalByName' | 'alphabeticalByArtist' | 'newest' | 'random';

 export default function Albums() {
-  const { t } = useTranslation();
  const [albums, setAlbums] = useState<SubsonicAlbum[]>([]);
  const [sort, setSort] = useState<SortType>('alphabeticalByName');
  const [loading, setLoading] = useState(true);
@@ -53,14 +51,16 @@ export default function Albums() {
  }, [loadMore]);

  const sortOptions: { value: SortType; label: string }[] = [
-    { value: 'alphabeticalByName', label: t('albums.sortByName') },
-    { value: 'alphabeticalByArtist', label: t('albums.sortByArtist') },
+    { value: 'alphabeticalByName', label: 'A–Z (Album)' },
+    { value: 'alphabeticalByArtist', label: 'A–Z (Künstler)' },
+    { value: 'newest', label: 'Neueste zuerst' },
+    { value: 'random', label: 'Zufällig' },
  ];

  return (
    <div className="content-body animate-fade-in">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem' }}>
-        <h1 className="page-title">{t('albums.title')}</h1>
+        <h1 className="page-title">Alle Alben</h1>
        <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
          {sortOptions.map(o => (
            <button
@@ -84,7 +84,7 @@ export default function Albums() {
          <div className="album-grid-wrap">
            {albums.map(a => <AlbumCard key={a.id} album={a} />)}
          </div>
-
+          
          <div ref={observerTarget} style={{ height: '20px', margin: '2rem 0', display: 'flex', justifyContent: 'center' }}>
            {loading && hasMore && <div className="spinner" style={{ width: 20, height: 20 }} />}
          </div>
@@ -1,12 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
-import { getArtist, getArtistInfo, getTopSongs, getSimilarSongs2, SubsonicArtist, SubsonicAlbum, SubsonicSong, SubsonicArtistInfo, buildCoverArtUrl, coverArtCacheKey, star, unstar } from '../api/subsonic';
+import { getArtist, getArtistInfo, getTopSongs, getSimilarSongs2, SubsonicArtist, SubsonicAlbum, SubsonicSong, SubsonicArtistInfo, buildCoverArtUrl, star, unstar } from '../api/subsonic';
 import AlbumCard from '../components/AlbumCard';
-import CachedImage from '../components/CachedImage';
 import { ArrowLeft, Users, ExternalLink, Star, Play, Shuffle, Radio } from 'lucide-react';
 import { open } from '@tauri-apps/plugin-shell';
 import { usePlayerStore } from '../store/playerStore';
-import { useTranslation } from 'react-i18next';

 function formatDuration(seconds: number): string {
  const m = Math.floor(seconds / 60);
@@ -14,23 +12,7 @@ function formatDuration(seconds: number): string {
  return `${m}:${s.toString().padStart(2, '0')}`;
 }

-/** Strip dangerous tags/attributes from server-provided HTML */
-function sanitizeHtml(html: string): string {
-  const parser = new DOMParser();
-  const doc = parser.parseFromString(html, 'text/html');
-  doc.querySelectorAll('script, style, iframe, object, embed, form, input, button, select, base, meta, link').forEach(el => el.remove());
-  doc.querySelectorAll('*').forEach(el => {
-    Array.from(el.attributes).forEach(attr => {
-      const name = attr.name.toLowerCase();
-      const val = attr.value.toLowerCase().trim();
-      if (name.startsWith('on') || (name === 'href' && (val.startsWith('javascript:') || val.startsWith('data:'))) || (name === 'src' && (val.startsWith('javascript:') || val.startsWith('data:')))) {
-        el.removeAttribute(attr.name);
-      }
-    });
-  });
-  return doc.body.innerHTML;
-}
-
+// Inline Last.fm SVG icon
 function LastfmIcon({ size = 16 }: { size?: number }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
@@ -40,7 +22,6 @@ function LastfmIcon({ size = 16 }: { size?: number }) {
 }

 export default function ArtistDetail() {
-  const { t } = useTranslation();
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const [artist, setArtist] = useState<SubsonicArtist | null>(null);
@@ -50,7 +31,7 @@ export default function ArtistDetail() {
  const [loading, setLoading] = useState(true);
  const [radioLoading, setRadioLoading] = useState(false);
  const [isStarred, setIsStarred] = useState(false);
-
+  
  const playTrack = usePlayerStore(state => state.playTrack);
  const enqueue = usePlayerStore(state => state.enqueue);
  const clearQueue = usePlayerStore(state => state.clearQueue);
@@ -63,6 +44,7 @@ export default function ArtistDetail() {
      setArtist(artistData.artist);
      setAlbums(artistData.albums);
      setIsStarred(!!artistData.artist.starred);
+      
      return Promise.all([
        getArtistInfo(id).catch(() => null),
        getTopSongs(artistData.artist.name).catch(() => [])
@@ -82,13 +64,16 @@ export default function ArtistDetail() {
  const toggleStar = async () => {
    if (!artist) return;
    const currentlyStarred = isStarred;
-    setIsStarred(!currentlyStarred);
+    setIsStarred(!currentlyStarred); // Optimistic UI update
    try {
-      if (currentlyStarred) await unstar(artist.id, 'artist');
-      else await star(artist.id, 'artist');
+      if (currentlyStarred) {
+        await unstar(artist.id, 'artist');
+      } else {
+        await star(artist.id, 'artist');
+      }
    } catch (e) {
      console.error('Failed to toggle star', e);
-      setIsStarred(currentlyStarred);
+      setIsStarred(currentlyStarred); // Revert on failure
    }
  };

@@ -116,10 +101,10 @@ export default function ArtistDetail() {
        clearQueue();
        playTrack(similar[0], similar);
      } else {
-        alert(t('artistDetail.noRadio'));
+        alert("Keine ähnlichen Titel für diesen Künstler gefunden.");
      }
    } catch (e) {
-      console.error('Radio start failed', e);
+      console.error("Radio start failed", e);
    } finally {
      setRadioLoading(false);
    }
@@ -137,7 +122,7 @@ export default function ArtistDetail() {
    return (
      <div className="content-body">
        <div style={{ textAlign: 'center', padding: '4rem', color: 'var(--text-muted)' }}>
-          {t('artistDetail.notFound')}
+          Künstler nicht gefunden.
        </div>
      </div>
    );
@@ -153,18 +138,18 @@ export default function ArtistDetail() {
        onClick={() => navigate(-1)}
        style={{ marginBottom: '1.5rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}
      >
-        <ArrowLeft size={16} /> <span>{t('artistDetail.back')}</span>
+        <ArrowLeft size={16} /> <span>Zurück</span>
      </button>

+      {/* Header: avatar + name + meta + links */}
      <div className="artist-detail-header">
        <div className="artist-detail-avatar">
          {coverId ? (
-            <CachedImage
+            <img
              src={buildCoverArtUrl(coverId, 300)}
-              cacheKey={coverArtCacheKey(coverId, 300)}
              alt={artist.name}
              style={{ width: '100%', height: '100%', objectFit: 'cover' }}
-              onError={e => { (e.currentTarget as HTMLImageElement).style.display = 'none'; }}
+              onError={e => { e.currentTarget.style.display = 'none'; }}
            />
          ) : (
            <Users size={64} color="var(--text-muted)" />
@@ -176,10 +161,11 @@ export default function ArtistDetail() {
            {artist.name}
          </h1>
          <div style={{ color: 'var(--text-secondary)', fontSize: '1rem', marginBottom: '1rem' }}>
-            {t('artistDetail.albumCount_other', { count: artist.albumCount ?? 0 })}
+            {artist.albumCount} {artist.albumCount === 1 ? 'Album' : 'Alben'}
          </div>

          <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+            {/* External links */}
            {(info?.lastFmUrl || artist.name) && (
              <div className="artist-detail-links">
                {info?.lastFmUrl && (
@@ -194,43 +180,44 @@ export default function ArtistDetail() {
                </button>
              </div>
            )}
-
-            <button
-              className="artist-ext-link"
+            
+            {/* Star toggle */}
+            <button 
+              className="artist-ext-link" 
              onClick={toggleStar}
-              data-tooltip={isStarred ? t('artistDetail.favoriteRemove') : t('artistDetail.favoriteAdd')}
+              data-tooltip={isStarred ? "Aus Favoriten entfernen" : "Zu Favoriten hinzufügen"}
              style={{ color: isStarred ? 'var(--accent)' : 'inherit', border: isStarred ? '1px solid var(--accent)' : undefined }}
            >
-              <Star size={14} fill={isStarred ? "currentColor" : "none"} />
-              {t('artistDetail.favorite')}
+              <Star size={14} fill={isStarred ? "currentColor" : "none"} /> 
+              {isStarred ? 'Favorit' : 'Als Favorit'}
            </button>
          </div>
-
+          
          <div style={{ display: 'flex', gap: '8px', marginTop: '1.5rem', flexWrap: 'wrap' }}>
            {topSongs.length > 0 && (
              <>
                <button className="btn btn-primary" onClick={handlePlayAll}>
-                  <Play size={16} /> {t('artistDetail.playAll')}
+                  <Play size={16} /> Alle abspielen
                </button>
                <button className="btn btn-surface" onClick={handleShuffle}>
-                  <Shuffle size={16} /> {t('artistDetail.shuffle')}
+                  <Shuffle size={16} /> Zufallswiedergabe
                </button>
              </>
            )}
            <button className="btn btn-surface" onClick={handleStartRadio} disabled={radioLoading}>
              {radioLoading ? <div className="spinner" style={{ width: 16, height: 16, borderTopColor: 'currentColor' }} /> : <Radio size={16} />}
-              {radioLoading ? t('artistDetail.loading') : t('artistDetail.radio')}
+              {radioLoading ? 'Lädt...' : 'Radio'}
            </button>
          </div>
        </div>
      </div>

-      {/* Biography — sanitized HTML from server */}
+      {/* Biography — only shown when available */}
      {info?.biography && (
        <div className="artist-bio-section">
          <div
            className="artist-bio-text"
-            dangerouslySetInnerHTML={{ __html: sanitizeHtml(info.biography) }}
+            dangerouslySetInnerHTML={{ __html: info.biography }}
          />
        </div>
      )}
@@ -239,14 +226,14 @@ export default function ArtistDetail() {
      {topSongs.length > 0 && (
        <>
          <h2 className="section-title" style={{ marginTop: info?.biography ? '2rem' : '0', marginBottom: '1rem' }}>
-            {t('artistDetail.topTracks')}
+            Beliebteste Titel
          </h2>
          <div className="tracklist" style={{ padding: 0, marginBottom: '2rem' }}>
            <div className="tracklist-header" style={{ gridTemplateColumns: '36px minmax(150px, 2fr) minmax(100px, 1fr) 60px' }}>
              <div style={{ textAlign: 'center' }}>#</div>
-              <div>{t('artistDetail.trackTitle')}</div>
-              <div>{t('artistDetail.trackAlbum')}</div>
-              <div style={{ textAlign: 'right' }}>{t('artistDetail.trackDuration')}</div>
+              <div>Titel</div>
+              <div>Album</div>
+              <div style={{ textAlign: 'right' }}>Dauer</div>
            </div>
            {topSongs.map((song, idx) => (
              <div
@@ -258,30 +245,34 @@ export default function ArtistDetail() {
                  e.preventDefault();
                  const track = {
                    id: song.id, title: song.title, artist: song.artist, album: song.album,
-                    albumId: song.albumId, artistId: song.artistId, duration: song.duration, coverArt: song.coverArt, track: song.track,
+                    albumId: song.albumId, duration: song.duration, coverArt: song.coverArt, track: song.track,
                    year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating,
                  };
                  openContextMenu(e.clientX, e.clientY, track, 'song');
                }}
              >
-                <div className="track-num" style={{ textAlign: 'center' }}>{idx + 1}</div>
+                <div className="track-num" style={{ textAlign: 'center' }}>
+                  {idx + 1}
+                </div>
+                
                <div className="track-info" style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
                  {song.coverArt && (
-                    <CachedImage
-                      src={buildCoverArtUrl(song.coverArt, 64)}
-                      cacheKey={coverArtCacheKey(song.coverArt, 64)}
-                      alt={song.album}
-                      style={{ width: '32px', height: '32px', borderRadius: '4px', objectFit: 'cover', flexShrink: 0 }}
-                      onError={(e) => { (e.currentTarget as HTMLImageElement).style.display = 'none'; }}
+                    <img 
+                      src={buildCoverArtUrl(song.coverArt, 64)} 
+                      alt={song.album} 
+                      style={{ width: '32px', height: '32px', borderRadius: '4px', objectFit: 'cover', flexShrink: 0 }} 
+                      onError={(e) => { e.currentTarget.style.display = 'none'; }} 
                    />
                  )}
                  <div style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
                    <div className="track-title">{song.title}</div>
                  </div>
                </div>
+                
                <div className="track-album truncate" style={{ color: 'var(--text-secondary)', fontSize: '12px' }}>
                  {song.album}
                </div>
+                
                <div className="track-duration" style={{ textAlign: 'right' }}>
                  {formatDuration(song.duration)}
                </div>
@@ -293,7 +284,7 @@ export default function ArtistDetail() {

      {/* Albums */}
      <h2 className="section-title" style={{ marginTop: (info?.biography || topSongs.length > 0) ? '2rem' : '0', marginBottom: '1rem' }}>
-        {t('artistDetail.albumsBy', { name: artist.name })}
+        Alben von {artist.name}
      </h2>

      {albums.length > 0 ? (
@@ -301,7 +292,7 @@ export default function ArtistDetail() {
          {albums.map(a => <AlbumCard key={a.id} album={a} />)}
        </div>
      ) : (
-        <p style={{ color: 'var(--text-muted)' }}>{t('artistDetail.noAlbums')}</p>
+        <p style={{ color: 'var(--text-muted)' }}>Keine Alben gefunden.</p>
      )}
    </div>
  );
@@ -1,44 +1,18 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { getArtists, SubsonicArtist } from '../api/subsonic';
-import { LayoutGrid, List } from 'lucide-react';
+import { getArtists, SubsonicArtist, buildCoverArtUrl } from '../api/subsonic';
+import { Users, LayoutGrid, List } from 'lucide-react';
 import { usePlayerStore } from '../store/playerStore';
-import { useTranslation } from 'react-i18next';

-const ALL_SENTINEL = 'ALL';
-const ALPHABET = [ALL_SENTINEL, '#', ...'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')];
-
-// Catppuccin accent colors — one is picked deterministically from the artist name
-const CTP_COLORS = [
-  'var(--ctp-rosewater)', 'var(--ctp-flamingo)', 'var(--ctp-pink)',    'var(--ctp-mauve)',
-  'var(--ctp-red)',       'var(--ctp-maroon)',    'var(--ctp-peach)',   'var(--ctp-yellow)',
-  'var(--ctp-green)',     'var(--ctp-teal)',      'var(--ctp-sky)',     'var(--ctp-sapphire)',
-  'var(--ctp-blue)',      'var(--ctp-lavender)',
-];
-
-function nameColor(name: string): string {
-  let h = 0;
-  for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) >>> 0;
-  return CTP_COLORS[h % CTP_COLORS.length];
-}
-
-function nameInitial(name: string): string {
-  // Skip leading non-letter chars (punctuation, numbers, brackets, …)
-  const letter = name.match(/[a-zA-ZÀ-ÖØ-öø-ÿ]/)?.[0];
-  if (letter) return letter.toUpperCase();
-  // Fallback: first alphanumeric (e.g. "1349")
-  const alnum = name.match(/[a-zA-Z0-9]/)?.[0];
-  return alnum?.toUpperCase() ?? '?';
-}
+const ALPHABET = ['Alle', '#', ...'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')];

 export default function Artists() {
-  const { t } = useTranslation();
  const [artists, setArtists] = useState<SubsonicArtist[]>([]);
  const [loading, setLoading] = useState(true);
  const [filter, setFilter] = useState('');
-  const [letterFilter, setLetterFilter] = useState(ALL_SENTINEL);
+  const [letterFilter, setLetterFilter] = useState('Alle');
  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
-
+  
  const [visibleCount, setVisibleCount] = useState(50);
  const navigate = useNavigate();
  const openContextMenu = usePlayerStore(state => state.openContextMenu);
@@ -58,8 +32,8 @@ export default function Artists() {

  // Filter pipeline
  let filtered = artists;
-
-  if (letterFilter !== ALL_SENTINEL) {
+  
+  if (letterFilter !== 'Alle') {
    filtered = filtered.filter(a => {
      const first = a.name[0]?.toUpperCase() ?? '#';
      const isAlpha = /^[A-Z]$/.test(first);
@@ -89,31 +63,31 @@ export default function Artists() {
    <div className="content-body animate-fade-in">
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '1.5rem', flexWrap: 'wrap', gap: '1rem' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-          <h1 className="page-title" style={{ marginBottom: 0 }}>{t('artists.title')}</h1>
+          <h1 className="page-title" style={{ marginBottom: 0 }}>Künstler</h1>
          <input
            className="input"
            style={{ maxWidth: 220 }}
-            placeholder={t('artists.search')}
+            placeholder="Suchen…"
            value={filter}
            onChange={e => setFilter(e.target.value)}
            id="artist-filter-input"
          />
        </div>
-
+        
        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-          <button
+          <button 
            className={`btn btn-surface ${viewMode === 'grid' ? 'btn-sort-active' : ''}`}
            onClick={() => setViewMode('grid')}
            style={viewMode === 'grid' ? { background: 'var(--accent)', color: 'var(--ctp-crust)', padding: '0.5rem' } : { padding: '0.5rem' }}
-            data-tooltip={t('artists.gridView')}
+            data-tooltip="Grid ansicht"
          >
            <LayoutGrid size={20} />
          </button>
-          <button
+          <button 
            className={`btn btn-surface ${viewMode === 'list' ? 'btn-sort-active' : ''}`}
            onClick={() => setViewMode('list')}
            style={viewMode === 'list' ? { background: 'var(--accent)', color: 'var(--ctp-crust)', padding: '0.5rem' } : { padding: '0.5rem' }}
-            data-tooltip={t('artists.listView')}
+            data-tooltip="Listenansicht"
          >
            <List size={20} />
          </button>
@@ -137,7 +111,7 @@ export default function Artists() {
              transition: 'all 0.2s'
            }}
          >
-            {l === ALL_SENTINEL ? t('artists.all') : l}
+            {l}
          </button>
        ))}
      </div>
@@ -147,10 +121,10 @@ export default function Artists() {
      {!loading && viewMode === 'grid' && (
        <div className="album-grid-wrap">
          {visible.map(artist => {
-            const color = nameColor(artist.name);
+            const coverId = artist.coverArt || artist.id;
            return (
-              <div
-                key={artist.id}
+              <div 
+                key={artist.id} 
                className="artist-card"
                onClick={() => navigate(`/artist/${artist.id}`)}
                onContextMenu={(e) => {
@@ -158,13 +132,26 @@ export default function Artists() {
                  openContextMenu(e.clientX, e.clientY, artist, 'artist');
                }}
              >
-                <div className="artist-card-avatar artist-card-avatar-initial" style={{ borderColor: color }}>
-                  <span style={{ color }}>{nameInitial(artist.name)}</span>
+                <div className="artist-card-avatar" style={{ position: 'relative', overflow: 'hidden' }}>
+                  {coverId ? (
+                    <img 
+                      src={buildCoverArtUrl(coverId, 200)} 
+                      alt=""
+                      style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                      onError={(e) => {
+                        e.currentTarget.style.display = 'none';
+                        e.currentTarget.parentElement?.classList.add('fallback-visible');
+                      }}
+                    />
+                  ) : (
+                    <Users size={32} />
+                  )}
+                  <Users size={32} className="fallback-icon" style={{ display: coverId ? 'none' : 'block', position: 'absolute' }} />
                </div>
                <div>
                  <div className="artist-card-name">{artist.name}</div>
                  {artist.albumCount != null && (
-                    <div className="artist-card-meta">{t('artists.albumCount', { count: artist.albumCount })}</div>
+                    <div className="artist-card-meta">{artist.albumCount} Alben</div>
                  )}
                </div>
              </div>
@@ -180,7 +167,7 @@ export default function Artists() {
              <h3 className="letter-heading">{letter}</h3>
              <div className="artist-list">
                {groups[letter].map(artist => {
-                  const color = nameColor(artist.name);
+                  const coverId = artist.coverArt || artist.id;
                  return (
                    <button
                      key={artist.id}
@@ -192,13 +179,26 @@ export default function Artists() {
                      }}
                      id={`artist-${artist.id}`}
                    >
-                      <div className="artist-avatar artist-avatar-initial" style={{ borderColor: color }}>
-                        <span style={{ color }}>{nameInitial(artist.name)}</span>
+                      <div className="artist-avatar" style={{ position: 'relative', overflow: 'hidden' }}>
+                        {coverId ? (
+                          <img 
+                            src={buildCoverArtUrl(coverId, 100)} 
+                            alt=""
+                            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                            onError={(e) => {
+                              e.currentTarget.style.display = 'none';
+                              e.currentTarget.parentElement?.classList.add('fallback-visible');
+                            }}
+                          />
+                        ) : (
+                          <Users size={18} />
+                        )}
+                        <Users size={18} className="fallback-icon" style={{ display: coverId ? 'none' : 'block', position: 'absolute' }} />
                      </div>
                      <div style={{ textAlign: 'left' }}>
                        <div className="artist-name">{artist.name}</div>
                        {artist.albumCount != null && (
-                          <div className="artist-meta">{t('artists.albumCount', { count: artist.albumCount })}</div>
+                          <div className="artist-meta">{artist.albumCount} Alben</div>
                        )}
                      </div>
                    </button>
@@ -213,14 +213,14 @@ export default function Artists() {
      {!loading && hasMore && (
        <div style={{ margin: '2rem 0', display: 'flex', justifyContent: 'center' }}>
          <button className="btn btn-ghost" onClick={loadMore}>
-            {t('artists.loadMore')}
+            Mehr laden
          </button>
        </div>
      )}
-
+      
      {!loading && filtered.length === 0 && (
        <div style={{ textAlign: 'center', padding: '3rem', color: 'var(--text-muted)' }}>
-          {t('artists.notFound')}
+          Keine Künstler gefunden.
        </div>
      )}
    </div>
@@ -4,10 +4,8 @@ import ArtistRow from '../components/ArtistRow';
 import { getStarred, SubsonicAlbum, SubsonicArtist, SubsonicSong } from '../api/subsonic';
 import { usePlayerStore } from '../store/playerStore';
 import { Play } from 'lucide-react';
-import { useTranslation } from 'react-i18next';

 export default function Favorites() {
-  const { t } = useTranslation();
  const [albums, setAlbums] = useState<SubsonicAlbum[]>([]);
  const [artists, setArtists] = useState<SubsonicArtist[]>([]);
  const [songs, setSongs] = useState<SubsonicSong[]>([]);
@@ -39,27 +37,28 @@ export default function Favorites() {
  return (
    <div className="content-body animate-fade-in" style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>
      <div style={{ marginBottom: '-1.5rem' }}>
-        <h1 className="page-title">{t('favorites.title')}</h1>
+        <h1 className="page-title">Favoriten</h1>
      </div>

      {!hasAnyFavorites ? (
-        <div className="empty-state">{t('favorites.empty')}</div>
+        <div className="empty-state">Du hast noch keine Favoriten gespeichert.</div>
      ) : (
        <>
          {artists.length > 0 && (
-            <ArtistRow title={t('favorites.artists')} artists={artists} />
+            <ArtistRow title="Künstler" artists={artists} />
          )}

          {albums.length > 0 && (
-            <AlbumRow title={t('favorites.albums')} albums={albums} />
+            <AlbumRow title="Alben" albums={albums} />
          )}

          {songs.length > 0 && (
            <section className="album-row-section">
              <div className="album-row-header" style={{ marginBottom: '1rem' }}>
-                <h2 className="section-title" style={{ marginBottom: 0 }}>{t('favorites.songs')}</h2>
+                <h2 className="section-title" style={{ marginBottom: 0 }}>Songs</h2>
              </div>
              <div className="tracklist" style={{ padding: 0 }}>
+                {/* Wir können für die Favoriten-Seite ruhig alle Songs anzeigen, statt nur 10 wie auf der Startseite */}
                {songs.map((song) => (
                  <div
                    key={song.id}
@@ -72,14 +71,17 @@ export default function Favorites() {
                      e.dataTransfer.effectAllowed = 'copy';
                      const track = {
                        id: song.id, title: song.title, artist: song.artist, album: song.album,
-                        albumId: song.albumId, artistId: song.artistId, duration: song.duration, coverArt: song.coverArt, track: song.track,
+                        albumId: song.albumId, duration: song.duration, coverArt: song.coverArt, track: song.track,
                        year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating,
                      };
-                      e.dataTransfer.setData('text/plain', JSON.stringify({ type: 'song', track }));
+                      e.dataTransfer.setData('application/json', JSON.stringify({
+                        type: 'song',
+                        track
+                      }));
                    }}
                  >
-                    <button
-                      className="btn btn-ghost"
+                    <button 
+                      className="btn btn-ghost" 
                      style={{ padding: 4 }}
                      onClick={(e) => { e.stopPropagation(); playTrack(song, songs); }}
                    >
@@ -1,108 +0,0 @@
-import React, { useState } from 'react';
-import { ChevronDown, Rocket, Play, LibraryBig, Settings2, Radio, Wrench } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-
-interface FaqItem { q: string; a: string; }
-interface FaqSection { icon: React.ReactNode; title: string; items: FaqItem[]; }
-
-function AccordionItem({ q, a, open, onToggle }: FaqItem & { open: boolean; onToggle: () => void }) {
-  return (
-    <div className={`help-item${open ? ' help-item-open' : ''}`}>
-      <button className="help-question" onClick={onToggle} aria-expanded={open}>
-        <span>{q}</span>
-        <ChevronDown size={16} className="help-chevron" />
-      </button>
-      {open && <div className="help-answer">{a}</div>}
-    </div>
-  );
-}
-
-export default function Help() {
-  const { t } = useTranslation();
-  const [openKey, setOpenKey] = useState<string | null>(null);
-
-  const toggle = (key: string) => setOpenKey(prev => prev === key ? null : key);
-
-  const sections: FaqSection[] = [
-    {
-      icon: <Rocket size={18} />,
-      title: t('help.s1'),
-      items: [
-        { q: t('help.q1'), a: t('help.a1') },
-        { q: t('help.q2'), a: t('help.a2') },
-        { q: t('help.q3'), a: t('help.a3') },
-      ],
-    },
-    {
-      icon: <Play size={18} />,
-      title: t('help.s2'),
-      items: [
-        { q: t('help.q4'), a: t('help.a4') },
-        { q: t('help.q5'), a: t('help.a5') },
-        { q: t('help.q6'), a: t('help.a6') },
-        { q: t('help.q7'), a: t('help.a7') },
-        { q: t('help.q8'), a: t('help.a8') },
-      ],
-    },
-    {
-      icon: <LibraryBig size={18} />,
-      title: t('help.s3'),
-      items: [
-        { q: t('help.q9'),  a: t('help.a9') },
-        { q: t('help.q10'), a: t('help.a10') },
-        { q: t('help.q11'), a: t('help.a11') },
-      ],
-    },
-    {
-      icon: <Settings2 size={18} />,
-      title: t('help.s4'),
-      items: [
-        { q: t('help.q12'), a: t('help.a12') },
-        { q: t('help.q13'), a: t('help.a13') },
-        { q: t('help.q14'), a: t('help.a14') },
-        { q: t('help.q15'), a: t('help.a15') },
-      ],
-    },
-    {
-      icon: <Radio size={18} />,
-      title: t('help.s5'),
-      items: [
-        { q: t('help.q16'), a: t('help.a16') },
-        { q: t('help.q17'), a: t('help.a17') },
-      ],
-    },
-    {
-      icon: <Wrench size={18} />,
-      title: t('help.s6'),
-      items: [
-        { q: t('help.q18'), a: t('help.a18') },
-        { q: t('help.q19'), a: t('help.a19') },
-        { q: t('help.q20'), a: t('help.a20') },
-        { q: t('help.q21'), a: t('help.a21') },
-      ],
-    },
-  ];
-
-  return (
-    <div className="content-body animate-fade-in">
-      <h1 className="page-title" style={{ marginBottom: '2rem' }}>{t('help.title')}</h1>
-
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
-        {sections.map((section, si) => (
-          <section key={si} className="settings-section">
-            <div className="settings-section-header">
-              {section.icon}
-              <h2>{section.title}</h2>
-            </div>
-            <div className="help-list">
-              {section.items.map((item, ii) => {
-                const key = `${si}-${ii}`;
-                return <AccordionItem key={key} q={item.q} a={item.a} open={openKey === key} onToggle={() => toggle(key)} />;
-              })}
-            </div>
-          </section>
-        ))}
-      </div>
-    </div>
-  );
-}
@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
 import Hero from '../components/Hero';
 import AlbumRow from '../components/AlbumRow';
 import { getAlbumList, SubsonicAlbum } from '../api/subsonic';
-import { useTranslation } from 'react-i18next';

 export default function Home() {
  const [starred, setStarred] = useState<SubsonicAlbum[]>([]);
@@ -43,8 +42,6 @@ export default function Home() {
    }
  };

-  const { t } = useTranslation();
-
  return (
    <div className="animate-fade-in">
      <Hero />
@@ -58,29 +55,29 @@ export default function Home() {
          <>
            {starred.length > 0 && (
              <AlbumRow 
-                title={t('home.starred')} 
+                title="Persönliche Favoriten" 
                albums={starred} 
                onLoadMore={() => loadMore('starred', starred, setStarred)}
-                moreText={t('home.loadMore')} 
+                moreText="Mehr laden" 
              />
            )}
            <AlbumRow 
-              title={t('home.recent')} 
+              title="Zuletzt hinzugefügt" 
              albums={recent} 
              onLoadMore={() => loadMore('newest', recent, setRecent)}
-              moreText={t('home.loadMore')} 
+              moreText="Mehr laden" 
            />
            <AlbumRow 
-              title={t('home.mostPlayed')} 
+              title="Meistgehört" 
              albums={mostPlayed} 
              onLoadMore={() => loadMore('frequent', mostPlayed, setMostPlayed)}
-              moreText={t('home.loadMore')} 
+              moreText="Mehr laden" 
            />
            <AlbumRow 
-              title={t('home.discover')} 
+              title="Entdecken" 
              albums={random} 
              onLoadMore={() => loadMore('random', random, setRandom)}
-              moreText={t('home.discoverMore')} 
+              moreText="Mehr entdecken" 
            />
          </>
        )}
@@ -3,10 +3,8 @@ import { useParams, useNavigate } from 'react-router-dom';
 import { ChevronLeft } from 'lucide-react';
 import AlbumCard from '../components/AlbumCard';
 import { search, SubsonicAlbum } from '../api/subsonic';
-import { useTranslation } from 'react-i18next';

 export default function LabelAlbums() {
-  const { t } = useTranslation();
  const { name } = useParams<{ name: string }>();
  const navigate = useNavigate();
  const [albums, setAlbums] = useState<SubsonicAlbum[]>([]);
@@ -15,17 +13,17 @@ export default function LabelAlbums() {
  useEffect(() => {
    if (!name) return;
    setLoading(true);
-
+    
    // Search for the label name and ask for a large number of albums
    search(name, { albumCount: 200, artistCount: 0, songCount: 0 })
      .then(res => {
-        // Filter out albums that don't match the record label exactly if possible,
+        // Filter out albums that don't match the record label exactly if possible, 
        // to avoid unrelated search hits. We do case-insensitive comparison.
-        const matches = res.albums.filter(a =>
+        const matches = res.albums.filter(a => 
          a.recordLabel?.toLowerCase() === name.toLowerCase()
        );
-        // Fallback: if Navidrome's search doesn't return the exact label in the recordLabel field
-        // (or it's not indexed exactly as typed), just show all album matches
+        // Fallback: if Navidrome's search doesn't return the exact label in the recordLabel field 
+        // (or it's not indexed exactly as typed), just show all album matches 
        // as a decent best-effort if our strict filter yields nothing.
        setAlbums(matches.length > 0 ? matches : res.albums);
      })
@@ -36,7 +34,7 @@ export default function LabelAlbums() {
  return (
    <div className="animate-fade-in" style={{ padding: '0 var(--space-6)' }}>
      <button className="btn btn-ghost" onClick={() => navigate(-1)} style={{ margin: '1rem 0', gap: '6px' }}>
-        <ChevronLeft size={16} /> {t('common.back')}
+        <ChevronLeft size={16} /> Zurück
      </button>

      <h1 className="page-title" style={{ marginBottom: '2rem' }}>
@@ -48,7 +46,7 @@ export default function LabelAlbums() {
          <div className="spinner" />
        </div>
      ) : albums.length === 0 ? (
-        <div className="empty-state">{t('common.noAlbums')}</div>
+        <div className="empty-state">Keine Alben für dieses Label gefunden.</div>
      ) : (
        <div className="album-grid-wrap">
          {albums.map(a => (
@@ -1,20 +1,38 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Wifi, WifiOff, Eye, EyeOff, Server } from 'lucide-react';
+import { Wifi, WifiOff, Eye, EyeOff } from 'lucide-react';
 import { useAuthStore } from '../store/authStore';
-import { pingWithCredentials } from '../api/subsonic';
-import { useTranslation } from 'react-i18next';
+import { ping } from '../api/subsonic';

 const PsysonicLogo = () => (
-  <img src="/logo.png" width="64" height="64" alt="Psysonic" style={{ borderRadius: 18 }} />
+  <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="64" height="64" rx="18" fill="url(#grad-login)" />
+    <text x="8" y="47" fontFamily="Inter, sans-serif" fontWeight="800" fontSize="42" fill="white">P</text>
+    <line x1="40" y1="18" x2="58" y2="18" stroke="white" strokeWidth="3.5" strokeLinecap="round" opacity="0.9"/>
+    <line x1="37" y1="26" x2="58" y2="26" stroke="white" strokeWidth="3.5" strokeLinecap="round" opacity="0.75"/>
+    <line x1="40" y1="34" x2="58" y2="34" stroke="white" strokeWidth="3.5" strokeLinecap="round" opacity="0.9"/>
+    <line x1="37" y1="42" x2="58" y2="42" stroke="white" strokeWidth="3.5" strokeLinecap="round" opacity="0.6"/>
+    <line x1="42" y1="50" x2="58" y2="50" stroke="white" strokeWidth="3.5" strokeLinecap="round" opacity="0.4"/>
+    <defs>
+      <linearGradient id="grad-login" x1="0" y1="0" x2="64" y2="64" gradientUnits="userSpaceOnUse">
+        <stop stopColor="#cba6f7"/>
+        <stop offset="1" stopColor="#89b4fa"/>
+      </linearGradient>
+    </defs>
+  </svg>
 );

 export default function Login() {
  const navigate = useNavigate();
-  const { t } = useTranslation();
-  const { addServer, updateServer, setActiveServer, setLoggedIn, setConnecting, setConnectionError, servers } = useAuthStore();
+  const { setCredentials, setLoggedIn, setConnecting, setConnectionError, connectionError } = useAuthStore();

-  const [form, setForm] = useState({ serverName: '', url: '', username: '', password: '' });
+  const [form, setForm] = useState({
+    serverName: '',
+    lanIp: '',
+    externalUrl: '',
+    username: '',
+    password: '',
+  });
  const [showPass, setShowPass] = useState(false);
  const [status, setStatus] = useState<'idle' | 'testing' | 'ok' | 'error'>('idle');
  const [testMessage, setTestMessage] = useState('');
@@ -22,69 +40,38 @@ export default function Login() {
  const update = (k: keyof typeof form) => (e: React.ChangeEvent<HTMLInputElement>) =>
    setForm(f => ({ ...f, [k]: e.target.value }));

-  const attemptConnect = async (profile: { name: string; url: string; username: string; password: string }) => {
-    if (!profile.url.trim()) {
-      setTestMessage(t('login.urlRequired'));
+  const handleConnect = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!form.lanIp && !form.externalUrl) {
+      setTestMessage('Bitte LAN-IP oder externe URL eingeben.');
      setStatus('error');
      return;
    }

    setStatus('testing');
-    setTestMessage(t('login.connecting'));
+    setTestMessage('Verbinde…');
    setConnecting(true);
+    setCredentials(form);
    setConnectionError(null);

-    // Test connection directly with entered credentials — don't touch the store yet.
-    // This avoids any race condition with Zustand's async store rehydration.
-    let ok = false;
-    try {
-      ok = await pingWithCredentials(profile.url.trim(), profile.username.trim(), profile.password);
-    } catch {
-      ok = false;
-    }
+    // Small delay to let store update
+    await new Promise(r => setTimeout(r, 100));

+    const ok = await ping();
    setConnecting(false);

    if (ok) {
-      // Connection succeeded — now persist to store
-      const existing = servers.find(s => s.url === profile.url.trim() && s.username === profile.username.trim());
-      let serverId: string;
-      if (existing) {
-        updateServer(existing.id, {
-          name: profile.name.trim() || profile.url.trim(),
-          password: profile.password,
-        });
-        serverId = existing.id;
-      } else {
-        serverId = addServer({
-          name: profile.name.trim() || profile.url.trim(),
-          url: profile.url.trim(),
-          username: profile.username.trim(),
-          password: profile.password,
-        });
-      }
-      setActiveServer(serverId);
      setLoggedIn(true);
      setStatus('ok');
-      setTestMessage(t('login.connected'));
+      setTestMessage('Verbunden!');
      setTimeout(() => navigate('/'), 600);
    } else {
      setStatus('error');
-      setConnectionError(t('login.error'));
-      setTestMessage(t('login.error'));
+      setConnectionError('Verbindung fehlgeschlagen – bitte Daten prüfen.');
+      setTestMessage('Verbindung fehlgeschlagen.');
    }
  };

-  const handleFormSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    await attemptConnect({ name: form.serverName, url: form.url, username: form.username, password: form.password });
-  };
-
-  const handleQuickConnect = async (srv: typeof servers[0]) => {
-    setForm({ serverName: srv.name, url: srv.url, username: srv.username, password: srv.password });
-    await attemptConnect({ name: srv.name, url: srv.url, username: srv.username, password: srv.password });
-  };
-
  return (
    <div className="login-page">
      <div className="login-bg" aria-hidden="true" />
@@ -93,72 +80,64 @@ export default function Login() {
          <PsysonicLogo />
        </div>
        <h1 className="login-title">Psysonic</h1>
-        <p className="login-subtitle">{t('login.subtitle')}</p>
+        <p className="login-subtitle">Dein Navidrome Desktop Player</p>

-        {/* Saved servers quick-connect */}
-        {servers.length > 0 && (
-          <div className="login-saved-servers">
-            <div className="login-saved-label">{t('login.savedServers')}</div>
-            {servers.map(srv => (
-              <button
-                key={srv.id}
-                className="btn btn-surface login-server-btn"
-                onClick={() => handleQuickConnect(srv)}
-                disabled={status === 'testing'}
-              >
-                <Server size={14} style={{ flexShrink: 0 }} />
-                <div style={{ textAlign: 'left', minWidth: 0 }}>
-                  <div style={{ fontWeight: 600 }} className="truncate">{srv.name || srv.url}</div>
-                  <div style={{ fontSize: 11, opacity: 0.7 }} className="truncate">{srv.username}@{srv.url}</div>
-                </div>
-              </button>
-            ))}
-            <div className="login-divider"><span>{t('login.addNew')}</span></div>
-          </div>
-        )}
-
-        <form className="login-form" onSubmit={handleFormSubmit} noValidate>
+        <form className="login-form" onSubmit={handleConnect} noValidate>
          <div className="form-group">
-            <label htmlFor="login-server-name">{t('login.serverName')}</label>
+            <label htmlFor="login-server-name">Server-Name (optional)</label>
            <input
              id="login-server-name"
              className="input"
              type="text"
-              placeholder={t('login.serverNamePlaceholder')}
+              placeholder="Mein Navidrome"
              value={form.serverName}
              onChange={update('serverName')}
              autoComplete="off"
            />
          </div>

-          <div className="form-group">
-            <label htmlFor="login-url">{t('login.serverUrl')}</label>
-            <input
-              id="login-url"
-              className="input"
-              type="text"
-              placeholder={t('login.serverUrlPlaceholder')}
-              value={form.url}
-              onChange={update('url')}
-              autoComplete="off"
-            />
+          <div className="form-row">
+            <div className="form-group">
+              <label htmlFor="login-lan-ip">LAN-IP / URL</label>
+              <input
+                id="login-lan-ip"
+                className="input"
+                type="text"
+                placeholder="192.168.1.100:4533"
+                value={form.lanIp}
+                onChange={update('lanIp')}
+                autoComplete="off"
+              />
+            </div>
+            <div className="form-group">
+              <label htmlFor="login-external-url">Externe URL (FQDN)</label>
+              <input
+                id="login-external-url"
+                className="input"
+                type="text"
+                placeholder="music.example.com"
+                value={form.externalUrl}
+                onChange={update('externalUrl')}
+                autoComplete="off"
+              />
+            </div>
          </div>

          <div className="form-row">
            <div className="form-group">
-              <label htmlFor="login-username">{t('login.username')}</label>
+              <label htmlFor="login-username">Benutzername</label>
              <input
                id="login-username"
                className="input"
                type="text"
-                placeholder={t('login.usernamePlaceholder')}
+                placeholder="admin"
                value={form.username}
                onChange={update('username')}
                autoComplete="username"
              />
            </div>
            <div className="form-group">
-              <label htmlFor="login-password">{t('login.password')}</label>
+              <label htmlFor="login-password">Passwort</label>
              <div style={{ position: 'relative' }}>
                <input
                  id="login-password"
@@ -174,7 +153,7 @@ export default function Login() {
                  type="button"
                  style={{ position: 'absolute', right: '10px', top: '50%', transform: 'translateY(-50%)', color: 'var(--text-muted)' }}
                  onClick={() => setShowPass(v => !v)}
-                  aria-label={showPass ? t('login.hidePassword') : t('login.showPassword')}
+                  aria-label={showPass ? 'Passwort verstecken' : 'Passwort anzeigen'}
                >
                  {showPass ? <EyeOff size={16} /> : <Eye size={16} />}
                </button>
@@ -198,7 +177,7 @@ export default function Login() {
            id="login-connect-btn"
            disabled={status === 'testing'}
          >
-            {status === 'testing' ? t('login.connecting') : t('login.connect')}
+            {status === 'testing' ? 'Verbinde…' : 'Verbinden'}
          </button>
        </form>
      </div>
@@ -2,13 +2,11 @@ import React, { useEffect, useState } from 'react';
 import { SubsonicPlaylist, getPlaylists, getPlaylist, deletePlaylist } from '../api/subsonic';
 import { usePlayerStore } from '../store/playerStore';
 import { ListMusic, Play, Trash2 } from 'lucide-react';
-import { useTranslation } from 'react-i18next';

 export default function Playlists() {
-  const { t } = useTranslation();
  const [playlists, setPlaylists] = useState<SubsonicPlaylist[]>([]);
  const [loading, setLoading] = useState(true);
-
+  
  const playTrack = usePlayerStore(s => s.playTrack);
  const clearQueue = usePlayerStore(s => s.clearQueue);

@@ -34,7 +32,7 @@ export default function Playlists() {
      const data = await getPlaylist(id);
      const tracks = data.songs.map((s: any) => ({
        id: s.id, title: s.title, artist: s.artist, album: s.album,
-        albumId: s.albumId, artistId: s.artistId, duration: s.duration, coverArt: s.coverArt, track: s.track,
+        albumId: s.albumId, duration: s.duration, coverArt: s.coverArt, track: s.track,
        year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating,
      }));
      if (tracks.length > 0) {
@@ -47,7 +45,7 @@ export default function Playlists() {
  };

  const handleDelete = async (id: string, name: string) => {
-    if (confirm(t('playlists.confirmDelete', { name }))) {
+    if (confirm(`Playlist "${name}" wirklich löschen?`)) {
      try {
        await deletePlaylist(id);
        fetchPlaylists();
@@ -61,20 +59,21 @@ export default function Playlists() {
    <div className="content-body animate-fade-in">
      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '2rem' }}>
        <ListMusic size={32} style={{ color: 'var(--accent)' }} />
-        <h1 className="page-title" style={{ margin: 0 }}>{t('playlists.title')}</h1>
+        <h1 className="page-title" style={{ margin: 0 }}>Playlists</h1>
      </div>

      {loading ? (
-        <div className="empty-state">{t('playlists.loading')}</div>
+        <div className="empty-state">Lade Playlists...</div>
      ) : playlists.length === 0 ? (
-        <div className="empty-state" style={{ whiteSpace: 'pre-line' }}>
-          {t('playlists.empty')}
+        <div className="empty-state">
+          Keine Playlists gefunden.<br/>
+          Nutze die Warteschlange, um Playlists zu erstellen.
        </div>
      ) : (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: '1rem' }}>
          {playlists.map(p => (
-            <div
-              key={p.id}
+            <div 
+              key={p.id} 
              style={{
                background: 'var(--surface0)',
                borderRadius: '12px',
@@ -92,22 +91,22 @@ export default function Playlists() {
                  {p.name}
                </h3>
                <p style={{ margin: 0, fontSize: '0.9rem', color: 'var(--subtext0)' }}>
-                  {t('playlists.track', { count: p.songCount })} • {Math.floor(p.duration / 60)} {t('playlists.minutes')}
+                  {p.songCount} {p.songCount === 1 ? 'Track' : 'Tracks'} • {Math.floor(p.duration / 60)} Min.
                </p>
              </div>

              <div style={{ display: 'flex', gap: '0.5rem', marginTop: 'auto' }}>
-                <button
-                  className="btn btn-primary"
+                <button 
+                  className="btn btn-primary" 
                  onClick={() => handlePlay(p.id)}
                  style={{ flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '0.5rem' }}
                >
-                  <Play size={16} fill="currentColor" /> {t('playlists.play')}
+                  <Play size={16} fill="currentColor" /> Abspielen
                </button>
-                <button
-                  className="btn btn-ghost"
+                <button 
+                  className="btn btn-ghost" 
                  onClick={() => handleDelete(p.id, p.name)}
-                  data-tooltip={t('playlists.deleteTooltip')}
+                  data-tooltip="Löschen"
                  style={{ width: '42px', display: 'flex', justifyContent: 'center', alignItems: 'center', color: 'var(--red)' }}
                >
                  <Trash2 size={18} />
@@ -1,94 +0,0 @@
-import React, { useEffect, useState, useCallback, useRef } from 'react';
-import { RefreshCw } from 'lucide-react';
-import { getAlbumList, SubsonicAlbum } from '../api/subsonic';
-import AlbumCard from '../components/AlbumCard';
-import { useTranslation } from 'react-i18next';
-
-const INTERVAL_MS = 30000;
-const ALBUM_COUNT = 30;
-
-export default function RandomAlbums() {
-  const { t } = useTranslation();
-  const [albums, setAlbums] = useState<SubsonicAlbum[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [renderKey, setRenderKey] = useState(0);
-  const [progress, setProgress] = useState(0);
-  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
-  const progressRef = useRef<ReturnType<typeof setInterval> | null>(null);
-
-  const load = useCallback(async () => {
-    setLoading(true);
-    try {
-      const data = await getAlbumList('random', ALBUM_COUNT);
-      setAlbums(data);
-      setRenderKey(k => k + 1);
-    } catch (e) {
-      console.error(e);
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  const startCycle = useCallback(() => {
-    // Clear existing timers
-    if (timerRef.current) clearInterval(timerRef.current);
-    if (progressRef.current) clearInterval(progressRef.current);
-
-    // Reset progress bar
-    setProgress(0);
-    const startTime = Date.now();
-    progressRef.current = setInterval(() => {
-      const elapsed = Date.now() - startTime;
-      setProgress(Math.min((elapsed / INTERVAL_MS) * 100, 100));
-    }, 100);
-
-    // Auto-refresh
-    timerRef.current = setInterval(() => {
-      load().then(() => startCycle());
-    }, INTERVAL_MS);
-  }, [load]);
-
-  useEffect(() => {
-    load().then(() => startCycle());
-    return () => {
-      if (timerRef.current) clearInterval(timerRef.current);
-      if (progressRef.current) clearInterval(progressRef.current);
-    };
-  }, [load, startCycle]);
-
-  const handleManualRefresh = () => {
-    load().then(() => startCycle());
-  };
-
-  return (
-    <div className="content-body animate-fade-in">
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '1.5rem' }}>
-        <h1 className="page-title" style={{ marginBottom: 0 }}>{t('randomAlbums.title')}</h1>
-        <button
-          className="btn btn-ghost"
-          onClick={handleManualRefresh}
-          disabled={loading}
-          data-tooltip={t('randomAlbums.refresh')}
-        >
-          <RefreshCw size={16} className={loading ? 'animate-spin' : ''} />
-          {t('randomAlbums.refresh')}
-        </button>
-      </div>
-
-      {/* Countdown progress bar */}
-      <div className="random-albums-progress">
-        <div className="random-albums-progress-fill" style={{ width: `${progress}%` }} />
-      </div>
-
-      {loading && albums.length === 0 ? (
-        <div style={{ display: 'flex', justifyContent: 'center', padding: '4rem' }}>
-          <div className="spinner" />
-        </div>
-      ) : (
-        <div className="album-grid-wrap animate-fade-in" key={renderKey}>
-          {albums.map(a => <AlbumCard key={a.id} album={a} />)}
-        </div>
-      )}
-    </div>
-  );
-}
@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
 import { getRandomSongs, SubsonicSong, star, unstar } from '../api/subsonic';
 import { usePlayerStore } from '../store/playerStore';
 import { Play, HandMetal, RefreshCw } from 'lucide-react';
-import { useTranslation } from 'react-i18next';

 function formatDuration(seconds: number): string {
  if (!seconds || isNaN(seconds)) return '0:00';
@@ -12,7 +11,6 @@ function formatDuration(seconds: number): string {
 }

 export default function RandomMix() {
-  const { t } = useTranslation();
  const [songs, setSongs] = useState<SubsonicSong[]>([]);
  const [loading, setLoading] = useState(true);
  const playTrack = usePlayerStore(s => s.playTrack);
@@ -37,7 +35,15 @@ export default function RandomMix() {
  }, []);

  const handlePlayAll = () => {
-    if (songs.length > 0) playTrack(songs[0], songs);
+    if (songs.length > 0) {
+      playTrack(songs[0], songs);
+    }
+  };
+
+  const handleEnqueueAll = () => {
+    if (songs.length > 0) {
+      enqueue(songs);
+    }
  };

  const toggleSongStar = async (song: SubsonicSong, e: React.MouseEvent) => {
@@ -53,21 +59,22 @@ export default function RandomMix() {
      else await star(song.id, 'song');
    } catch (err) {
      console.error('Failed to toggle song star', err);
-      setStarredSongs(new Set(starredSongs));
+      const revert = new Set(starredSongs);
+      setStarredSongs(revert);
    }
  };

  return (
    <div className="content-body animate-fade-in">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '2rem' }}>
-        <h1 className="page-title">{t('randomMix.title')}</h1>
-
+        <h1 className="page-title">Zufallsmix</h1>
+        
        <div style={{ display: 'flex', gap: '0.5rem' }}>
-          <button className="btn btn-surface" onClick={fetchSongs} disabled={loading} data-tooltip={t('randomMix.remixTooltip')}>
-            <RefreshCw size={18} className={loading ? 'spin' : ''} /> {t('randomMix.remix')}
+          <button className="btn btn-surface" onClick={fetchSongs} disabled={loading} data-tooltip="Neue Songs laden">
+            <RefreshCw size={18} className={loading ? 'spin' : ''} /> Neu mixen
          </button>
          <button className="btn btn-primary" onClick={handlePlayAll} disabled={loading || songs.length === 0}>
-            <Play size={18} fill="currentColor" /> {t('randomMix.playAll')}
+            <Play size={18} fill="currentColor" /> Alle abspielen
          </button>
        </div>
      </div>
@@ -78,20 +85,19 @@ export default function RandomMix() {
        </div>
      ) : (
        <div className="tracklist">
-          <div className="tracklist-header" style={{ gridTemplateColumns: '36px 1fr 1fr 1fr 60px 80px' }}>
+          <div className="tracklist-header" style={{ gridTemplateColumns: '36px 1fr 1fr 60px 80px' }}>
            <span></span>
-            <span>{t('randomMix.trackTitle')}</span>
-            <span>{t('randomMix.trackArtist')}</span>
-            <span>{t('randomMix.trackAlbum')}</span>
-            <span style={{ textAlign: 'center' }}>{t('randomMix.trackFavorite')}</span>
-            <span style={{ textAlign: 'right' }}>{t('randomMix.trackDuration')}</span>
+            <span>Titel</span>
+            <span>Album</span>
+            <span style={{ textAlign: 'center' }}>Favorit</span>
+            <span style={{ textAlign: 'right' }}>Dauer</span>
          </div>

          {songs.map((song) => (
            <div
              key={song.id}
              className="track-row"
-              style={{ gridTemplateColumns: '36px 1fr 1fr 1fr 60px 80px' }}
+              style={{ gridTemplateColumns: '36px 1fr 1fr 60px 80px' }}
              onDoubleClick={() => playTrack(song, songs)}
              role="row"
              draggable
@@ -99,38 +105,38 @@ export default function RandomMix() {
                e.dataTransfer.effectAllowed = 'copy';
                const track = {
                  id: song.id, title: song.title, artist: song.artist, album: song.album,
-                  albumId: song.albumId, artistId: song.artistId, duration: song.duration, coverArt: song.coverArt, track: song.track,
+                  albumId: song.albumId, duration: song.duration, coverArt: song.coverArt, track: song.track,
                  year: song.year, bitRate: song.bitRate, suffix: song.suffix, userRating: song.userRating,
                };
-                e.dataTransfer.setData('text/plain', JSON.stringify({ type: 'song', track }));
+                e.dataTransfer.setData('application/json', JSON.stringify({
+                  type: 'song',
+                  track
+                }));
              }}
            >
-              <button
-                className="btn btn-ghost"
+              <button 
+                className="btn btn-ghost" 
                style={{ padding: 4 }}
                onClick={(e) => { e.stopPropagation(); playTrack(song, songs); }}
-                data-tooltip={t('randomMix.play')}
+                data-tooltip="Abspielen"
              >
                <Play size={14} fill="currentColor" />
              </button>
-
+              
              <div className="track-info">
                <span className="track-title" data-tooltip={song.title}>{song.title}</span>
+                <span className="track-artist">{song.artist}</span>
              </div>
-
-              <div className="track-artist-cell">
-                <span className="track-artist" data-tooltip={song.artist}>{song.artist}</span>
-              </div>
-
+              
              <div className="track-info">
                <span className="track-title" style={{ fontSize: '0.85rem', color: 'var(--subtext0)' }} data-tooltip={song.album}>{song.album}</span>
              </div>

              <div style={{ display: 'flex', justifyContent: 'center' }}>
-                <button
+                <button 
                  className="btn btn-ghost"
                  onClick={(e) => toggleSongStar(song, e)}
-                  data-tooltip={starredSongs.has(song.id) ? t('randomMix.favoriteRemove') : t('randomMix.favoriteAdd')}
+                  data-tooltip={starredSongs.has(song.id) ? "Aus Favoriten entfernen" : "Zu Favoriten hinzufügen"}
                  style={{ padding: '4px', height: 'auto', minHeight: 'unset', color: starredSongs.has(song.id) ? 'var(--accent)' : 'var(--text-muted)' }}
                >
                  <HandMetal size={14} fill={starredSongs.has(song.id) ? "currentColor" : "none"} />
@@ -1,131 +1,32 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import {
-  Wifi, WifiOff, Globe, Music2, Sliders, LogOut, CheckCircle2, FolderOpen, Palette, Server, Plus, Trash2, Eye, EyeOff, Info, ExternalLink
+  Wifi, WifiOff, Globe, Server, Music2, Sliders, LogOut, CheckCircle2, FolderOpen, Palette
 } from 'lucide-react';
-import { open as openUrl } from '@tauri-apps/plugin-shell';
-import { useAuthStore, ServerProfile } from '../store/authStore';
+import { useAuthStore } from '../store/authStore';
 import { useThemeStore } from '../store/themeStore';
-import { pingWithCredentials } from '../api/subsonic';
+import { ping } from '../api/subsonic';
 import { open as openDialog } from '@tauri-apps/plugin-dialog';
 import { useTranslation } from 'react-i18next';

-function AddServerForm({ onSave, onCancel }: { onSave: (data: Omit<ServerProfile, 'id'>) => void; onCancel: () => void }) {
-  const { t } = useTranslation();
-  const [form, setForm] = useState({ name: '', url: '', username: '', password: '' });
-  const [showPass, setShowPass] = useState(false);
-
-  const update = (k: keyof typeof form) => (e: React.ChangeEvent<HTMLInputElement>) =>
-    setForm(f => ({ ...f, [k]: e.target.value }));
-
-  return (
-    <div className="settings-card" style={{ marginTop: '1rem' }}>
-      <h3 style={{ fontWeight: 600, marginBottom: '1rem', fontSize: '14px' }}>{t('settings.addServerTitle')}</h3>
-      <div className="form-group" style={{ marginBottom: '0.75rem' }}>
-        <label style={{ fontSize: 13 }}>{t('settings.serverName')}</label>
-        <input className="input" type="text" value={form.name} onChange={update('name')} placeholder="My Navidrome" autoComplete="off" />
-      </div>
-      <div className="form-group" style={{ marginBottom: '0.75rem' }}>
-        <label style={{ fontSize: 13 }}>{t('settings.serverUrl')}</label>
-        <input className="input" type="text" value={form.url} onChange={update('url')} placeholder="192.168.1.100:4533" autoComplete="off" />
-      </div>
-      <div className="form-row" style={{ marginBottom: '0.75rem' }}>
-        <div className="form-group">
-          <label style={{ fontSize: 13 }}>{t('settings.serverUsername')}</label>
-          <input className="input" type="text" value={form.username} onChange={update('username')} placeholder="admin" autoComplete="off" />
-        </div>
-        <div className="form-group">
-          <label style={{ fontSize: 13 }}>{t('settings.serverPassword')}</label>
-          <div style={{ position: 'relative' }}>
-            <input
-              className="input"
-              type={showPass ? 'text' : 'password'}
-              value={form.password}
-              onChange={update('password')}
-              placeholder="••••••••"
-              style={{ paddingRight: '2.5rem' }}
-            />
-            <button
-              type="button"
-              style={{ position: 'absolute', right: '10px', top: '50%', transform: 'translateY(-50%)', color: 'var(--text-muted)' }}
-              onClick={() => setShowPass(v => !v)}
-            >
-              {showPass ? <EyeOff size={14} /> : <Eye size={14} />}
-            </button>
-          </div>
-        </div>
-      </div>
-      <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>
-        <button className="btn btn-ghost" onClick={onCancel}>{t('common.cancel')}</button>
-        <button
-          className="btn btn-primary"
-          onClick={() => form.url.trim() && onSave({ name: form.name.trim() || form.url.trim(), url: form.url.trim(), username: form.username.trim(), password: form.password })}
-        >
-          {t('common.add')}
-        </button>
-      </div>
-    </div>
-  );
-}
-
 export default function Settings() {
  const auth = useAuthStore();
  const theme = useThemeStore();
  const navigate = useNavigate();
  const { t, i18n } = useTranslation();

-  const [connStatus, setConnStatus] = useState<Record<string, 'idle' | 'testing' | 'ok' | 'error'>>({});
-  const [showAddForm, setShowAddForm] = useState(false);
+  const [lanIp, setLanIp] = useState(auth.lanIp);
+  const [externalUrl, setExternalUrl] = useState(auth.externalUrl);
+  const [connStatus, setConnStatus] = useState<'idle' | 'testing' | 'ok' | 'error'>('idle');

-  const testConnection = async (server: ServerProfile) => {
-    setConnStatus(s => ({ ...s, [server.id]: 'testing' }));
-    try {
-      const ok = await pingWithCredentials(server.url, server.username, server.password);
-      setConnStatus(s => ({ ...s, [server.id]: ok ? 'ok' : 'error' }));
-    } catch {
-      setConnStatus(s => ({ ...s, [server.id]: 'error' }));
-    }
-  };
-
-  const switchToServer = async (server: ServerProfile) => {
-    setConnStatus(s => ({ ...s, [server.id]: 'testing' }));
-    try {
-      const ok = await pingWithCredentials(server.url, server.username, server.password);
-      if (ok) {
-        auth.setActiveServer(server.id);
-        auth.setLoggedIn(true);
-        navigate('/');
-      } else {
-        setConnStatus(s => ({ ...s, [server.id]: 'error' }));
-      }
-    } catch {
-      setConnStatus(s => ({ ...s, [server.id]: 'error' }));
-    }
-  };
-
-  const deleteServer = (server: ServerProfile) => {
-    if (confirm(t('settings.confirmDeleteServer', { name: server.name || server.url }))) {
-      auth.removeServer(server.id);
-    }
-  };
-
-  const handleAddServer = async (data: Omit<ServerProfile, 'id'>) => {
-    setShowAddForm(false);
-    const tempId = '_new';
-    setConnStatus(s => ({ ...s, [tempId]: 'testing' }));
-    try {
-      const ok = await pingWithCredentials(data.url, data.username, data.password);
-      if (ok) {
-        const id = auth.addServer(data);
-        auth.setActiveServer(id);
-        auth.setLoggedIn(true);
-        setConnStatus(s => ({ ...s, [id]: 'ok' }));
-      } else {
-        setConnStatus(s => ({ ...s, [tempId]: 'error' }));
-      }
-    } catch {
-      setConnStatus(s => ({ ...s, [tempId]: 'error' }));
-    }
+  const [lfmApiKey, setLfmApiKey] = useState(auth.lastfmApiKey);
+  const [lfmSecret, setLfmSecret] = useState(auth.lastfmApiSecret);
+  const testConnection = async () => {
+    setConnStatus('testing');
+    auth.setCredentials({ serverName: auth.serverName, lanIp, externalUrl, username: auth.username, password: auth.password });
+    await new Promise(r => setTimeout(r, 100));
+    const ok = await ping();
+    setConnStatus(ok ? 'ok' : 'error');
  };

  const handleLogout = () => {
@@ -152,9 +53,9 @@ export default function Settings() {
        </div>
        <div className="settings-card">
          <div className="form-group" style={{ maxWidth: '300px' }}>
-            <select
-              className="input"
-              value={i18n.language}
+            <select 
+              className="input" 
+              value={i18n.language} 
              onChange={(e) => i18n.changeLanguage(e.target.value)}
              aria-label={t('settings.language')}
            >
@@ -173,103 +74,72 @@ export default function Settings() {
        </div>
        <div className="settings-card">
          <div className="form-group" style={{ maxWidth: '300px' }}>
-            <select
-              className="input"
-              value={theme.theme}
+            <select 
+              className="input" 
+              value={theme.theme} 
              onChange={(e) => theme.setTheme(e.target.value as any)}
              aria-label={t('settings.theme')}
            >
-              <option value="mocha">Catppuccin Mocha</option>
-              <option value="macchiato">Catppuccin Macchiato</option>
-              <option value="frappe">Catppuccin Frappé</option>
-              <option value="latte">Catppuccin Latte</option>
-              <option value="nord">Nord · Polar Night</option>
-              <option value="nord-snowstorm">Nord · Snowstorm</option>
-              <option value="nord-frost">Nord · Frost</option>
-              <option value="nord-aurora">Nord · Aurora</option>
+              <option value="mocha">Catppuccin Mocha (Dark)</option>
+              <option value="latte">Catppuccin Latte (Light)</option>
            </select>
          </div>
        </div>
      </section>

-      {/* Servers */}
+      {/* Connection */}
      <section className="settings-section">
        <div className="settings-section-header">
-          <Server size={18} />
-          <h2>{t('settings.servers')}</h2>
+          <Wifi size={18} />
+          <h2>{t('settings.connection')}</h2>
        </div>
-
-        {auth.servers.length === 0 && !showAddForm ? (
-          <div className="settings-card" style={{ color: 'var(--text-muted)', fontSize: 14 }}>
-            {t('settings.noServers')}
+        <div className="settings-card">
+          <div className="form-row">
+            <div className="form-group">
+              <label htmlFor="settings-lan">{t('settings.lanIp')}</label>
+              <input id="settings-lan" className="input" value={lanIp} onChange={e => setLanIp(e.target.value)} placeholder="192.168.1.100:4533" />
+            </div>
+            <div className="form-group">
+              <label htmlFor="settings-ext">{t('settings.externalUrl')}</label>
+              <input id="settings-ext" className="input" value={externalUrl} onChange={e => setExternalUrl(e.target.value)} placeholder="music.example.com" />
+            </div>
          </div>
-        ) : (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
-            {auth.servers.map(srv => {
-              const isActive = srv.id === auth.activeServerId;
-              const status = connStatus[srv.id];
-              return (
-                <div key={srv.id} className="settings-card" style={{ border: isActive ? '1px solid var(--accent)' : undefined }}>
-                  <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: '1rem' }}>
-                    <div style={{ minWidth: 0 }}>
-                      <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '2px' }}>
-                        <span style={{ fontWeight: 600 }}>{srv.name || srv.url}</span>
-                        {isActive && (
-                          <span style={{ fontSize: 11, background: 'var(--accent)', color: 'var(--ctp-crust)', padding: '1px 6px', borderRadius: '10px', fontWeight: 600 }}>
-                            {t('settings.serverActive')}
-                          </span>
-                        )}
-                      </div>
-                      <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{srv.username}@{srv.url}</div>
-                    </div>
-                    <div style={{ display: 'flex', gap: '6px', flexShrink: 0, alignItems: 'center' }}>
-                      {status === 'ok' && <CheckCircle2 size={16} style={{ color: 'var(--positive)' }} />}
-                      {status === 'error' && <WifiOff size={16} style={{ color: 'var(--danger)' }} />}
-                      {status === 'testing' && <div className="spinner" style={{ width: 16, height: 16 }} />}
-                      <button
-                        className="btn btn-ghost"
-                        style={{ fontSize: 12, padding: '4px 10px' }}
-                        onClick={() => testConnection(srv)}
-                        disabled={status === 'testing'}
-                      >
-                        <Wifi size={13} />
-                        {t('settings.testBtn')}
-                      </button>
-                      {!isActive && (
-                        <button
-                          className="btn btn-primary"
-                          style={{ fontSize: 12, padding: '4px 10px' }}
-                          onClick={() => switchToServer(srv)}
-                          disabled={status === 'testing'}
-                          id={`settings-use-server-${srv.id}`}
-                        >
-                          {t('settings.useServer')}
-                        </button>
-                      )}
-                      <button
-                        className="btn btn-ghost"
-                        style={{ color: 'var(--danger)', padding: '4px 8px' }}
-                        onClick={() => deleteServer(srv)}
-                        data-tooltip={t('settings.deleteServer')}
-                        id={`settings-delete-server-${srv.id}`}
-                      >
-                        <Trash2 size={14} />
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              );
-            })}
+          <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginTop: '0.75rem' }}>
+            <button className="btn btn-primary" onClick={testConnection} id="settings-test-conn-btn" disabled={connStatus === 'testing'}>
+              {connStatus === 'testing' ? t('settings.testingBtn') : t('settings.testBtn')}
+            </button>
+            {connStatus === 'ok' && <span style={{ color: 'var(--positive)', display: 'flex', alignItems: 'center', gap: '4px' }}><CheckCircle2 size={16} /> {t('settings.connected')}</span>}
+            {connStatus === 'error' && <span style={{ color: 'var(--danger)', display: 'flex', alignItems: 'center', gap: '4px' }}><WifiOff size={16} /> {t('settings.failed')}</span>}
          </div>
-        )}

-        {showAddForm ? (
-          <AddServerForm onSave={handleAddServer} onCancel={() => setShowAddForm(false)} />
-        ) : (
-          <button className="btn btn-ghost" style={{ marginTop: '0.75rem' }} onClick={() => setShowAddForm(true)} id="settings-add-server-btn">
-            <Plus size={16} /> {t('settings.addServer')}
-          </button>
-        )}
+          <div className="divider" style={{ margin: '1rem 0' }} />
+
+          {/* Active connection toggle */}
+          <div className="settings-toggle-row">
+            <div>
+              <div style={{ fontWeight: 500 }}>{t('settings.activeConn')}</div>
+              <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{t('settings.activeServer')} <strong>{auth.activeConnection === 'local' ? t('settings.connLocal') : t('settings.connExternal')}</strong></div>
+            </div>
+            <div className="conn-toggle" role="group" aria-label="Verbindung umschalten">
+              <button
+                className={`conn-toggle-btn ${auth.activeConnection === 'local' ? 'active' : ''}`}
+                onClick={() => auth.toggleConnection()}
+                id="conn-local-btn"
+                aria-pressed={auth.activeConnection === 'local'}
+              >
+                <Server size={13} /> {t('settings.connLocal')}
+              </button>
+              <button
+                className={`conn-toggle-btn ${auth.activeConnection === 'external' ? 'active' : ''}`}
+                onClick={() => auth.toggleConnection()}
+                id="conn-extern-btn"
+                aria-pressed={auth.activeConnection === 'external'}
+              >
+                <Globe size={13} /> {t('settings.connExternal')}
+              </button>
+            </div>
+          </div>
+        </div>
      </section>

      {/* Last.fm */}
@@ -280,11 +150,7 @@ export default function Settings() {
        </div>
        <div className="settings-card">
          <div style={{ fontSize: 13, color: 'var(--text-secondary)', marginBottom: '1rem', lineHeight: 1.5 }}>
-            <p style={{ marginBottom: '0.5rem' }}>
-              {t('settings.lfmDesc1')}{' '}
-              <strong>{t('settings.lfmDesc1NavidromeWebplayer')}</strong>
-              {' '}{t('settings.lfmDesc1b')}
-            </p>
+            <p style={{ marginBottom: '0.5rem' }} dangerouslySetInnerHTML={{ __html: t('settings.lfmDesc1') }} />
            <p>{t('settings.lfmDesc2')}</p>
          </div>

@@ -293,7 +159,7 @@ export default function Settings() {
              <div style={{ fontWeight: 500 }}>{t('settings.scrobbleEnabled')}</div>
              <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{t('settings.scrobbleDesc')}</div>
            </div>
-            <label className="toggle-switch" aria-label={t('settings.scrobbleEnabled')}>
+            <label className="toggle-switch" aria-label="Scrobbling aktivieren">
              <input type="checkbox" checked={auth.scrobblingEnabled} onChange={e => auth.setScrobblingEnabled(e.target.checked)} id="scrobbling-toggle" />
              <span className="toggle-track" />
            </label>
@@ -313,7 +179,7 @@ export default function Settings() {
              <div style={{ fontWeight: 500 }}>{t('settings.trayTitle')}</div>
              <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{t('settings.trayDesc')}</div>
            </div>
-            <label className="toggle-switch" aria-label={t('settings.trayTitle')}>
+            <label className="toggle-switch" aria-label="In Tray minimieren">
              <input type="checkbox" checked={auth.minimizeToTray} onChange={e => auth.setMinimizeToTray(e.target.checked)} id="tray-toggle" />
              <span className="toggle-track" />
            </label>
@@ -359,56 +225,6 @@ export default function Settings() {
          <LogOut size={16} /> {t('settings.logout')}
        </button>
      </section>
-
-      {/* About */}
-      <section className="settings-section">
-        <div className="settings-section-header">
-          <Info size={18} />
-          <h2>{t('settings.aboutTitle')}</h2>
-        </div>
-        <div className="settings-card settings-about">
-          <div className="settings-about-header">
-            <img src="/logo.png" width={52} height={52} alt="Psysonic" style={{ borderRadius: 14 }} />
-            <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 }}>
-                {t('settings.aboutVersion')} 1.0.9
-              </div>
-            </div>
-          </div>
-
-          <p style={{ fontSize: 13, color: 'var(--text-secondary)', lineHeight: 1.6, margin: '1rem 0 0.5rem' }}>
-            {t('settings.aboutDesc')}
-          </p>
-          <p style={{ fontSize: 12, color: 'var(--text-muted)', lineHeight: 1.6, margin: '0.5rem 0' }}>
-            {t('settings.aboutFeatures')}
-          </p>
-
-          <div className="divider" style={{ margin: '1rem 0' }} />
-
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem', fontSize: 13 }}>
-            <div style={{ display: 'flex', gap: '0.5rem' }}>
-              <span style={{ color: 'var(--text-muted)', minWidth: 56 }}>{t('settings.aboutLicense')}</span>
-              <span style={{ color: 'var(--text-secondary)' }}>{t('settings.aboutLicenseText')}</span>
-            </div>
-            <div style={{ display: 'flex', gap: '0.5rem' }}>
-              <span style={{ color: 'var(--text-muted)', minWidth: 56 }}>Stack</span>
-              <span style={{ color: 'var(--text-secondary)' }}>{t('settings.aboutBuiltWith')}</span>
-            </div>
-          </div>
-
-          <button
-            className="btn btn-ghost"
-            style={{ marginTop: '1.25rem', alignSelf: 'flex-start' }}
-            onClick={() => openUrl('https://github.com/Psychotoxical/psysonic')}
-          >
-            <ExternalLink size={14} />
-            {t('settings.aboutRepo')}
-          </button>
-        </div>
-      </section>
    </div>
  );
 }
@@ -1,11 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { getAlbumList, getGenres, SubsonicAlbum, SubsonicGenre } from '../api/subsonic';
 import AlbumRow from '../components/AlbumRow';
-import { BarChart3 } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
+import { BarChart3, TrendingUp, Star, Music } from 'lucide-react';

 export default function Statistics() {
-  const { t } = useTranslation();
  const [frequent, setFrequent] = useState<SubsonicAlbum[]>([]);
  const [highest, setHighest] = useState<SubsonicAlbum[]>([]);
  const [genres, setGenres] = useState<SubsonicGenre[]>([]);
@@ -47,7 +45,7 @@ export default function Statistics() {
    <div className="content-body animate-fade-in">
      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '2rem' }}>
        <BarChart3 size={32} style={{ color: 'var(--accent)' }} />
-        <h1 className="page-title" style={{ margin: 0 }}>{t('statistics.title')}</h1>
+        <h1 className="page-title" style={{ margin: 0 }}>Statistiken</h1>
      </div>

      {loading ? (
@@ -56,27 +54,28 @@ export default function Statistics() {
        </div>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>
-
-          <AlbumRow
-            title={t('statistics.mostPlayed')}
-            albums={frequent}
+          
+          <AlbumRow 
+            title="Meistgespielte Alben"
+            albums={frequent} 
            onLoadMore={() => loadMore('frequent', frequent, setFrequent)}
-            moreText={t('statistics.loadMore')}
+            moreText="Mehr laden" 
          />

-          <AlbumRow
-            title={t('statistics.highestRated')}
-            albums={highest}
+          <AlbumRow 
+            title="Höchstbewertete Alben" 
+            albums={highest} 
            onLoadMore={() => loadMore('highest', highest, setHighest)}
-            moreText={t('statistics.loadMore')}
+            moreText="Mehr laden" 
          />

          {genres.length > 0 && (
            <div>
              <div className="section-title">
-                <h2>{t('statistics.genreDistribution')}</h2>
+                <Music size={20} />
+                <h2>Genre-Verteilung (Top 20)</h2>
              </div>
-
+              
              <div style={{ display: 'grid', gap: '1rem', background: 'var(--surface0)', padding: '1.5rem', borderRadius: '12px' }}>
                {genres.map(genre => {
                  const percentage = (genre.songCount / maxGenreCount) * 100;
@@ -87,14 +86,14 @@ export default function Statistics() {
                        <span style={{ color: 'var(--subtext0)' }}>{genre.songCount} Songs</span>
                      </div>
                      <div style={{ width: '100%', height: '8px', background: 'var(--surface2)', borderRadius: '4px', overflow: 'hidden' }}>
-                        <div
-                          style={{
-                            width: `${percentage}%`,
-                            height: '100%',
-                            background: 'var(--accent)',
+                        <div 
+                          style={{ 
+                            width: `${percentage}%`, 
+                            height: '100%', 
+                            background: 'var(--accent)', 
                            borderRadius: '4px',
                            transition: 'width 1s ease-out'
-                          }}
+                          }} 
                        />
                      </div>
                    </div>
@@ -1,26 +1,24 @@
 import { create } from 'zustand';
 import { persist, createJSONStorage } from 'zustand/middleware';

-export interface ServerProfile {
-  id: string;
-  name: string;
-  url: string;
-  username: string;
-  password: string;
-}
+export type ConnectionMode = 'local' | 'external';

 interface AuthState {
-  // Multi-server
-  servers: ServerProfile[];
-  activeServerId: string | null;
+  // Server config
+  serverName: string;
+  lanIp: string;
+  externalUrl: string;
+  username: string;
+  password: string; // stored encrypted via plugin-store
+  activeConnection: ConnectionMode;

-  // Last.fm (global)
+  // Last.fm
  lastfmApiKey: string;
  lastfmApiSecret: string;
  lastfmSessionKey: string;
  lastfmUsername: string;

-  // Settings (global)
+  // Settings
  minimizeToTray: boolean;
  scrobblingEnabled: boolean;
  maxCacheMb: number;
@@ -32,10 +30,15 @@ interface AuthState {
  connectionError: string | null;

  // Actions
-  addServer: (profile: Omit<ServerProfile, 'id'>) => string;
-  updateServer: (id: string, data: Partial<Omit<ServerProfile, 'id'>>) => void;
-  removeServer: (id: string) => void;
-  setActiveServer: (id: string) => void;
+  setCredentials: (data: {
+    serverName: string;
+    lanIp: string;
+    externalUrl: string;
+    username: string;
+    password: string;
+  }) => void;
+  setActiveConnection: (mode: ConnectionMode) => void;
+  toggleConnection: () => void;
  setLoggedIn: (v: boolean) => void;
  setConnecting: (v: boolean) => void;
  setConnectionError: (e: string | null) => void;
@@ -48,18 +51,17 @@ interface AuthState {

  // Derived
  getBaseUrl: () => string;
-  getActiveServer: () => ServerProfile | undefined;
-}
-
-function generateId(): string {
-  return Date.now().toString(36) + Math.random().toString(36).slice(2);
 }

 export const useAuthStore = create<AuthState>()(
  persist(
    (set, get) => ({
-      servers: [],
-      activeServerId: null,
+      serverName: '',
+      lanIp: '',
+      externalUrl: '',
+      username: '',
+      password: '',
+      activeConnection: 'local',
      lastfmApiKey: '',
      lastfmApiSecret: '',
      lastfmSessionKey: '',
@@ -72,31 +74,12 @@ export const useAuthStore = create<AuthState>()(
      isConnecting: false,
      connectionError: null,

-      addServer: (profile) => {
-        const id = generateId();
-        set(s => ({ servers: [...s.servers, { ...profile, id }] }));
-        return id;
-      },
+      setCredentials: (data) => set({ ...data, connectionError: null }),

-      updateServer: (id, data) => {
-        set(s => ({
-          servers: s.servers.map(srv => srv.id === id ? { ...srv, ...data } : srv),
-        }));
-      },
+      setActiveConnection: (mode) => set({ activeConnection: mode }),

-      removeServer: (id) => {
-        set(s => {
-          const newServers = s.servers.filter(srv => srv.id !== id);
-          const switchedAway = s.activeServerId === id;
-          return {
-            servers: newServers,
-            activeServerId: switchedAway ? (newServers[0]?.id ?? null) : s.activeServerId,
-            isLoggedIn: switchedAway ? false : s.isLoggedIn,
-          };
-        });
-      },
-
-      setActiveServer: (id) => set({ activeServerId: id }),
+      toggleConnection: () =>
+        set(s => ({ activeConnection: s.activeConnection === 'local' ? 'external' : 'local' })),

      setLoggedIn: (v) => set({ isLoggedIn: v }),
      setConnecting: (v) => set({ isConnecting: v }),
@@ -110,18 +93,20 @@ export const useAuthStore = create<AuthState>()(
      setMaxCacheMb: (v) => set({ maxCacheMb: v }),
      setDownloadFolder: (v) => set({ downloadFolder: v }),

-      logout: () => set({ isLoggedIn: false }),
+      logout: () => set({
+        isLoggedIn: false,
+        username: '',
+        password: '',
+        lastfmSessionKey: '',
+        lastfmUsername: '',
+      }),

      getBaseUrl: () => {
        const s = get();
-        const server = s.servers.find(srv => srv.id === s.activeServerId);
-        if (!server?.url) return '';
-        return server.url.startsWith('http') ? server.url : `http://${server.url}`;
-      },
-
-      getActiveServer: () => {
-        const s = get();
-        return s.servers.find(srv => srv.id === s.activeServerId);
+        if (s.activeConnection === 'local') {
+          return s.lanIp.startsWith('http') ? s.lanIp : `http://${s.lanIp}`;
+        }
+        return s.externalUrl.startsWith('http') ? s.externalUrl : `https://${s.externalUrl}`;
      },
    }),
    {
@@ -10,7 +10,6 @@ export interface Track {
  artist: string;
  album: string;
  albumId: string;
-  artistId?: string;
  duration: number;
  coverArt?: string;
  track?: number;
@@ -26,7 +25,6 @@ interface PlayerState {
  queueIndex: number;
  isPlaying: boolean;
  progress: number; // 0–1
-  buffered: number; // 0–1
  currentTime: number;
  volume: number;
  howl: Howl | null;
@@ -76,14 +74,6 @@ interface PlayerState {
 }

 let progressInterval: ReturnType<typeof setInterval> | null = null;
-let seekDebounce: ReturnType<typeof setTimeout> | null = null;
-let gstSeeking = false;           // true while GStreamer is processing a seek
-let pendingSeekTime: number | null = null; // queue at most one seek
-let gstSeekWatchdog: ReturnType<typeof setTimeout> | null = null; // safety release if onseek never fires
-let hangRecoveryPos: number | null = null; // set before a recovery playTrack call so onplay seeks here
-let gaplessPrewarmedId: string | null = null; // track id whose prefetched Howl has been silently pre-started
-let hangLastTime = -1;            // last observed currentTime for hang detection
-let hangStallTime = 0;            // Date.now() when currentTime last moved

 function clearProgress() {
  if (progressInterval) {
@@ -92,18 +82,6 @@ function clearProgress() {
  }
 }

-function armGstWatchdog(cb: () => void) {
-  if (gstSeekWatchdog) clearTimeout(gstSeekWatchdog);
-  gstSeekWatchdog = setTimeout(() => {
-    gstSeekWatchdog = null;
-    cb();
-  }, 2000);
-}
-
-function disarmGstWatchdog() {
-  if (gstSeekWatchdog) { clearTimeout(gstSeekWatchdog); gstSeekWatchdog = null; }
-}
-
 // Helper to debounce or fire queue syncs
 let syncTimeout: ReturnType<typeof setTimeout> | null = null;
 function syncQueueToServer(queue: Track[], currentTrack: Track | null, currentTime: number) {
@@ -127,7 +105,6 @@ export const usePlayerStore = create<PlayerState>()(
      queueIndex: 0,
      isPlaying: false,
      progress: 0,
-      buffered: 0,
      currentTime: 0,
      volume: 0.8,
      howl: null,
@@ -158,7 +135,7 @@ export const usePlayerStore = create<PlayerState>()(
    get().howl?.stop();
    get().howl?.seek(0);
    clearProgress();
-    set({ isPlaying: false, progress: 0, buffered: 0, currentTime: 0 });
+    set({ isPlaying: false, progress: 0, currentTime: 0 });
  },

  playTrack: (track, queue) => {
@@ -166,148 +143,60 @@ export const usePlayerStore = create<PlayerState>()(
    // Stop current
    state.howl?.unload();
    clearProgress();
-    if (seekDebounce) { clearTimeout(seekDebounce); seekDebounce = null; }
-    disarmGstWatchdog();
-    gstSeeking = false;
-    pendingSeekTime = null;
-    hangLastTime = -1;
-    hangStallTime = 0;
-    gaplessPrewarmedId = null;

    const newQueue = queue ?? state.queue;
    const idx = newQueue.findIndex(t => t.id === track.id);

-    // Reuse a prefetched Howl if available — it's already connected and buffering
-    const prefetchMap = state.prefetched;
-    let howl: Howl;
-    let gaplessHandoff = false;
-    if (prefetchMap.has(track.id)) {
-      howl = prefetchMap.get(track.id)!;
-      prefetchMap.delete(track.id);
-      set({ prefetched: new Map(prefetchMap) });
-      if (howl.playing()) {
-        // Gapless: pipeline already running — pause, seek to 0, then play
-        gaplessHandoff = true;
-        howl.pause();
-        hangRecoveryPos = 0; // onplay will seek to position 0
-      }
-      howl.volume(state.volume);
-    } else {
-      howl = new Howl({ src: [buildStreamUrl(track.id)], html5: true, volume: state.volume });
-    }
+    const url = buildStreamUrl(track.id);
+    const howl = new Howl({
+      src: [url],
+      html5: true,
+      volume: state.volume,
+      onplay: () => {
+        set({ isPlaying: true });
+        // Subsonic / Navidrome Now Playing
+        reportNowPlaying(track.id);

-    howl.on('play', () => {
-      set({ isPlaying: true });
-      reportNowPlaying(track.id);
-
-      // If recovering from a pipeline hang, seek to the saved position
-      if (hangRecoveryPos !== null) {
-        const pos = hangRecoveryPos;
-        hangRecoveryPos = null;
-        gstSeeking = true;
-        armGstWatchdog(() => { gstSeeking = false; pendingSeekTime = null; });
-        setTimeout(() => { howl.seek(pos); }, 50);
-      }
-
-      set({ scrobbled: false });
-      hangStallTime = Date.now();
-      hangLastTime = -1;
-
-      progressInterval = setInterval(() => {
-        const h = get().howl;
-        if (!h) return;
-        const s = h.seek();
-        const cur = typeof s === 'number' ? s : 0;
-        const dur = h.duration() || 1;
-        const prog = cur / dur;
-
-        // Read buffered ranges from the underlying <audio> element
-        const audioNode = (h as any)._sounds?.[0]?._node as HTMLAudioElement | undefined;
-        if (audioNode?.buffered && audioNode.duration > 0) {
-          let totalBuf = 0;
-          for (let i = 0; i < audioNode.buffered.length; i++) {
-            totalBuf += audioNode.buffered.end(i) - audioNode.buffered.start(i);
-          }
-          set({ currentTime: cur, progress: prog, buffered: Math.min(1, totalBuf / audioNode.duration) });
-        } else {
+        set({ scrobbled: false });
+        progressInterval = setInterval(() => {
+          const h = get().howl;
+          if (!h) return;
+          const cur = typeof h.seek() === 'number' ? h.seek() as number : 0;
+          const dur = h.duration() || 1;
+          const prog = cur / dur;
          set({ currentTime: cur, progress: prog });
-        }

-        // Hang detection: if playing but currentTime hasn't moved in 5s, recover
-        if (Math.abs(cur - hangLastTime) > 0.05) {
-          hangLastTime = cur;
-          hangStallTime = Date.now();
-        } else if (get().isPlaying && Date.now() - hangStallTime > 5000) {
-          const { currentTrack: ct, queue: q } = get();
-          if (ct) {
-            hangRecoveryPos = cur;
-            hangStallTime = Date.now(); // prevent re-trigger while recovering
-            get().playTrack(ct, q);
-          }
-          return;
-        }
-
-          // Gapless pre-warm: start next track's Howl silently ~1s before end
-          if (!gaplessPrewarmedId && dur > 2 && dur - cur < 1.0) {
-            const { queue: q, queueIndex: qi, repeatMode: rm, prefetched: pf } = get();
-            const nextIdx = qi + 1;
-            const nextTrack = nextIdx < q.length ? q[nextIdx]
-              : (rm === 'all' && q.length > 0 ? q[0] : null);
-            if (nextTrack && pf.has(nextTrack.id)) {
-              const nh = pf.get(nextTrack.id)!;
-              if (!nh.playing()) { nh.volume(0); nh.play(); gaplessPrewarmedId = nextTrack.id; }
+          // Scrobble at 50%
+          if (prog >= 0.5 && !get().scrobbled) {
+            set({ scrobbled: true });
+            const { scrobblingEnabled } = useAuthStore.getState();
+            if (scrobblingEnabled) {
+              scrobbleSong(track.id, Date.now());
            }
          }
+        }, 500);

-        // Scrobble at 50%
-        if (prog >= 0.5 && !get().scrobbled) {
-          set({ scrobbled: true });
-          const { scrobblingEnabled } = useAuthStore.getState();
-          if (scrobblingEnabled) scrobbleSong(track.id, Date.now());
+        // Prefetch next 3
+        get().prefetchUpcoming(idx + 1, newQueue);
+      },
+      onend: () => {
+        clearProgress();
+        set({ isPlaying: false, progress: 0, currentTime: 0 });
+        const { repeatMode, currentTrack, queue } = get();
+        if (repeatMode === 'one' && currentTrack) {
+          get().playTrack(currentTrack, queue);
+        } else {
+          get().next();
        }
-      }, 500);
-
-      // Prefetch next 3
-      get().prefetchUpcoming(idx + 1, newQueue);
+      },
+      onstop: () => {
+        clearProgress();
+        set({ isPlaying: false });
+      },
    });

-    howl.on('end', () => {
-      clearProgress();
-      set({ isPlaying: false, progress: 0, buffered: 0, currentTime: 0 });
-      const { repeatMode, currentTrack, queue } = get();
-      if (repeatMode === 'one' && currentTrack) {
-        get().playTrack(currentTrack, queue);
-      } else {
-        get().next();
-      }
-    });
-
-    howl.on('stop', () => {
-      clearProgress();
-      set({ isPlaying: false });
-    });
-
-    howl.on('seek', () => {
-      disarmGstWatchdog();
-      gstSeeking = false;
-      hangLastTime = -1;
-      hangStallTime = Date.now();
-      if (pendingSeekTime !== null) {
-        const t = pendingSeekTime;
-        pendingSeekTime = null;
-        gstSeeking = true;
-        armGstWatchdog(() => {
-          gstSeeking = false;
-          pendingSeekTime = null;
-          const { currentTrack: ct, queue: q } = get();
-          if (ct) { hangRecoveryPos = t; get().playTrack(ct, q); }
-        });
-        get().howl?.seek(t);
-      }
-    });
-
-    howl.play(); // for gapless: resumes from paused state, onplay fires and seeks to 0 via hangRecoveryPos
-    set({ currentTrack: track, queue: newQueue, queueIndex: idx >= 0 ? idx : 0, howl, progress: 0, buffered: 0, currentTime: 0 });
+    howl.play();
+    set({ currentTrack: track, queue: newQueue, queueIndex: idx >= 0 ? idx : 0, howl, progress: 0, currentTime: 0 });
    syncQueueToServer(newQueue, track, 0);
  },

@@ -318,14 +207,8 @@ export const usePlayerStore = create<PlayerState>()(
  },

  resume: () => {
-    const { howl, currentTrack, queue, currentTime } = get();
-    if (!currentTrack) return;
-    if (!howl) {
-      // Cold start from restored state (e.g. app relaunch) — resume from saved position
-      if (currentTime > 0) hangRecoveryPos = currentTime;
-      get().playTrack(currentTrack, queue);
-      return;
-    }
+    const { howl, currentTrack } = get();
+    if (!howl || !currentTrack) return;
    howl.play();
    set({ isPlaying: true });
  },
@@ -360,25 +243,8 @@ export const usePlayerStore = create<PlayerState>()(
    const { howl, currentTrack } = get();
    if (!howl || !currentTrack) return;
    const time = progress * (howl.duration() || currentTrack.duration);
+    howl.seek(time);
    set({ progress, currentTime: time });
-    if (seekDebounce) clearTimeout(seekDebounce);
-    seekDebounce = setTimeout(() => {
-      seekDebounce = null;
-      if (gstSeeking) {
-        // GStreamer busy — queue this position; onseek will send it when ready
-        pendingSeekTime = time;
-        return;
-      }
-      gstSeeking = true;
-      const seekTarget = time;
-      armGstWatchdog(() => {
-        gstSeeking = false;
-        pendingSeekTime = null;
-        const { currentTrack: ct, queue: q } = get();
-        if (ct) { hangRecoveryPos = seekTarget; get().playTrack(ct, q); }
-      });
-      get().howl?.seek(time);
-    }, 100);
  },

  setVolume: (v) => {
@@ -402,24 +268,20 @@ export const usePlayerStore = create<PlayerState>()(
  clearQueue: () => {
    get().howl?.unload();
    clearProgress();
-    set({ queue: [], queueIndex: 0, currentTrack: null, isPlaying: false, progress: 0, buffered: 0, currentTime: 0, howl: null });
+    set({ queue: [], queueIndex: 0, currentTrack: null, isPlaying: false, progress: 0, currentTime: 0, howl: null });
    syncQueueToServer([], null, 0);
  },

  // Internal: prefetch next N tracks
  prefetchUpcoming: (fromIndex: number, queue: Track[]) => {
    const { prefetched } = get();
-    // Unload and clear old prefetches to prevent memory leaks
-    prefetched.forEach((h, id) => {
-      h.unload();
-    });
-    prefetched.clear();
-
    const toFetch = queue.slice(fromIndex, fromIndex + 3);
    toFetch.forEach(track => {
-      const url = buildStreamUrl(track.id);
-      const h = new Howl({ src: [url], html5: true, preload: true, autoplay: false });
-      prefetched.set(track.id, h);
+      if (!prefetched.has(track.id)) {
+        const url = buildStreamUrl(track.id);
+        const h = new Howl({ src: [url], html5: true, preload: true, autoplay: false });
+        prefetched.set(track.id, h);
+      }
    });
    set({ prefetched: new Map(prefetched) });
  },
@@ -455,7 +317,7 @@ export const usePlayerStore = create<PlayerState>()(
      if (q.songs.length > 0) {
        const mappedTracks: Track[] = q.songs.map((s: SubsonicSong) => ({
          id: s.id, title: s.title, artist: s.artist, album: s.album,
-          albumId: s.albumId, artistId: s.artistId, duration: s.duration, coverArt: s.coverArt, track: s.track,
+          albumId: s.albumId, duration: s.duration, coverArt: s.coverArt, track: s.track,
          year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating,
        }));
        
@@ -1,7 +1,7 @@
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';

-type Theme = 'mocha' | 'macchiato' | 'frappe' | 'latte' | 'nord' | 'nord-snowstorm' | 'nord-frost' | 'nord-aurora';
+type Theme = 'mocha' | 'latte';

 interface ThemeState {
  theme: Theme;
@@ -4,14 +4,14 @@
 .hero {
  position: relative;
  width: 100%;
-  height: 360px;
+  height: 300px;
  overflow: hidden;
  flex-shrink: 0;
 }

 .hero-placeholder {
  width: 100%;
-  height: 360px;
+  height: 300px;
  background: linear-gradient(135deg, var(--ctp-surface0), var(--ctp-mantle));
  flex-shrink: 0;
 }
@@ -21,45 +21,23 @@
  inset: 0;
  background-size: cover;
  background-position: center;
-  transition: transform 8s ease, opacity 0.8s ease, filter 0.8s ease;
+  transition: transform 8s ease;
  transform: scale(1.05);
 }
 .hero:hover .hero-bg { transform: scale(1); }

-.hero-dots {
-  position: absolute;
-  bottom: var(--space-4);
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  gap: 6px;
-  z-index: 10;
-}
-.hero-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: var(--radius-full);
-  background: rgba(255, 255, 255, 0.35);
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-.hero-dot:hover:not(.hero-dot-active) { background: rgba(255, 255, 255, 0.6); }
-.hero-dot-active { width: 24px; background: rgba(255, 255, 255, 0.9); }
-
 .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
-    rgba(0, 0, 0, 0.78) 0%,
-    rgba(0, 0, 0, 0.45) 50%,
-    rgba(0, 0, 0, 0.18) 100%
+    rgba(30, 30, 46, 0.92) 0%,
+    rgba(30, 30, 46, 0.6) 50%,
+    rgba(30, 30, 46, 0.3) 100%
  ),
  linear-gradient(
    to top,
-    rgba(0, 0, 0, 0.88) 0%,
+    rgba(30, 30, 46, 0.95) 0%,
    transparent 60%
  );
 }
@@ -74,8 +52,8 @@
 }

 .hero-cover {
-  width: 220px;
-  height: 220px;
+  width: 180px;
+  height: 180px;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
  object-fit: cover;
@@ -94,7 +72,7 @@
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
-  color: var(--ctp-lavender);
+  color: var(--accent);
  margin-bottom: var(--space-2);
 }

@@ -102,16 +80,16 @@
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
-  color: #ffffff;
+  color: var(--text-primary);
  margin-bottom: var(--space-1);
  line-height: 1.2;
-  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
+  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
  max-width: 500px;
 }

 .hero-artist {
  font-size: 16px;
-  color: rgba(255, 255, 255, 0.72);
+  color: var(--text-secondary);
  margin-bottom: var(--space-3);
 }

@@ -211,19 +189,6 @@
  color: var(--text-muted);
  box-shadow: var(--shadow-sm);
 }
-.artist-card-avatar-initial {
-  background: var(--bg-card);
-  border: 2px solid;
-  box-shadow: none;
-  overflow: hidden;
-}
-.artist-card-avatar-initial span {
-  font-size: 2.5rem;
-  font-weight: 800;
-  font-family: var(--font-display);
-  line-height: 1;
-  user-select: none;
-}
 .artist-card-name {
  font-weight: 600;
  font-size: 14px;
@@ -304,20 +269,6 @@
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-4);
 }
-
-.random-albums-progress {
-  height: 2px;
-  background: var(--border-subtle);
-  border-radius: var(--radius-full);
-  margin-bottom: 1.5rem;
-  overflow: hidden;
-}
-.random-albums-progress-fill {
-  height: 100%;
-  background: var(--accent);
-  border-radius: var(--radius-full);
-  transition: width 0.1s linear;
-}
@media (min-width: 1024px) {
  .album-grid-wrap { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
 }
@@ -477,12 +428,12 @@
 .album-detail-hero {
  display: flex;
  gap: var(--space-6);
-  align-items: flex-start;
+  align-items: flex-end;
  padding: var(--space-4) 0 var(--space-6);
 }
 .album-detail-cover {
-  width: clamp(120px, 15vw, 200px);
-  height: clamp(120px, 15vw, 200px);
+  width: 180px;
+  height: 180px;
  border-radius: var(--radius-lg);
  object-fit: cover;
  box-shadow: var(--shadow-lg);
@@ -496,9 +447,8 @@
  font-size: 48px;
  color: var(--text-muted);
 }
-.album-detail-meta { min-width: 0; flex: 1; }
-.album-detail-title { font-family: var(--font-display); font-size: clamp(20px, 3vw, 32px); font-weight: 800; color: var(--text-primary); line-height: 1.1; margin: var(--space-2) 0 var(--space-1); overflow-wrap: break-word; }
-.album-detail-artist { font-size: clamp(13px, 1.5vw, 16px); color: var(--accent); font-weight: 600; }
+.album-detail-title { font-family: var(--font-display); font-size: 32px; font-weight: 800; color: var(--text-primary); line-height: 1.1; margin: var(--space-2) 0 var(--space-1); }
+.album-detail-artist { font-size: 16px; color: var(--accent); font-weight: 600; }
 .album-detail-artist-link {
  background: none;
  border: none;
@@ -514,60 +464,14 @@
  color: var(--text-primary);
  text-decoration: underline;
 }
-.album-detail-info { display: flex; flex-wrap: wrap; gap: var(--space-2); color: var(--text-muted); font-size: 13px; margin: var(--space-2) 0 var(--space-4); }
-.album-detail-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; row-gap: var(--space-2); }
-
-.download-hint {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  font-size: 11px;
-  color: var(--text-secondary);
-  background: rgba(203, 166, 247, 0.08);
-  border: 1px solid rgba(203, 166, 247, 0.2);
-  border-radius: var(--radius-full);
-  padding: 3px 10px 3px 8px;
-  cursor: default;
-  white-space: nowrap;
-}
-
-.download-progress-wrap {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  padding: 0 var(--space-3);
-  height: 36px;
-  border-radius: var(--radius-md);
-  background: var(--surface-1);
-  border: 1px solid var(--border);
-  min-width: 180px;
-  color: var(--text-secondary);
-  font-size: 12px;
-}
-.download-progress-bar {
-  flex: 1;
-  height: 4px;
-  background: var(--surface-2);
-  border-radius: 2px;
-  overflow: hidden;
-}
-.download-progress-fill {
-  height: 100%;
-  background: linear-gradient(90deg, var(--ctp-mauve), var(--ctp-blue));
-  border-radius: 2px;
-  transition: width 0.2s ease;
-}
-.download-progress-pct {
-  min-width: 28px;
-  text-align: right;
-  font-variant-numeric: tabular-nums;
-}
+.album-detail-info { display: flex; gap: var(--space-3); color: var(--text-muted); font-size: 13px; margin: var(--space-2) 0 var(--space-4); }
+.album-detail-actions { display: flex; gap: var(--space-3); }

 /* ─ Tracklist ─ */
 .tracklist { padding: 0 var(--space-6) var(--space-6); }
 .tracklist-header {
  display: grid;
-  grid-template-columns: 36px minmax(100px, 3fr) minmax(90px, 1.5fr) 70px 80px 60px;
+  grid-template-columns: 36px minmax(120px, 3fr) minmax(100px, 2fr) 70px 80px 60px;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-size: 11px;
@@ -578,53 +482,18 @@
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-2);
 }
-.tracklist-header.tracklist-va {
-  grid-template-columns: 36px minmax(100px, 2fr) minmax(80px, 1.2fr) minmax(90px, 1.5fr) 70px 80px 60px;
-}

 .track-row {
  display: grid;
-  grid-template-columns: 36px minmax(100px, 3fr) minmax(90px, 1.5fr) 70px 80px 60px;
+  grid-template-columns: 36px minmax(120px, 3fr) minmax(100px, 2fr) 70px 80px 60px;
  gap: var(--space-3);
-  align-items: start;
+  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
 }
-.track-row.track-row-va {
-  grid-template-columns: 36px minmax(100px, 2fr) minmax(80px, 1.2fr) minmax(90px, 1.5fr) 70px 80px 60px;
-}
-
-.tracklist-total {
-  display: grid;
-  grid-template-columns: 36px minmax(100px, 3fr) minmax(90px, 1.5fr) 70px 80px 60px;
-  border-top: 1px solid var(--border-subtle);
-  padding: var(--space-3) var(--space-4);
-  margin-top: var(--space-1);
-}
-.tracklist-total.tracklist-va {
-  grid-template-columns: 36px minmax(100px, 2fr) minmax(80px, 1.2fr) minmax(90px, 1.5fr) 70px 80px 60px;
-}
-.tracklist-total-label {
-  grid-column: 1 / -2;
-  text-align: right;
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  padding-right: var(--space-3);
-}
-.tracklist-total-value {
-  text-align: right;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-secondary);
-  font-variant-numeric: tabular-nums;
-}
 .track-row:hover { background: var(--bg-hover); }
-.track-row > * { padding-top: 6px; padding-bottom: 6px; }

 /* CD / Disc separator */
 .disc-header {
@@ -646,8 +515,7 @@

 .track-num { font-size: 13px; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
 .track-info { min-width: 0; }
-.track-title { font-size: 13px; font-weight: 500; color: var(--text-primary); overflow-wrap: break-word; word-break: break-word; }
-.track-artist-cell { min-width: 0; display: flex; align-items: flex-start; }
+.track-title { font-size: 13px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .track-artist { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .track-codec {
  display: block;
@@ -764,8 +632,6 @@
 .artist-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); transition: background var(--transition-fast); width: 100%; text-align: left; }
 .artist-row:hover { background: var(--bg-hover); }
 .artist-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--accent-dim); display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; }
-.artist-avatar-initial { background: var(--bg-card); border: 2px solid; }
-.artist-avatar-initial span { font-size: 1rem; font-weight: 700; font-family: var(--font-display); line-height: 1; user-select: none; }
 .artist-name { font-size: 14px; font-weight: 500; color: var(--text-primary); }
 .artist-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

@@ -781,20 +647,7 @@
 .settings-section-header { display: flex; align-items: center; gap: var(--space-2); color: var(--accent); margin-bottom: var(--space-3); }
 .settings-section-header h2 { font-size: 16px; font-weight: 600; color: var(--text-primary); }
 .settings-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-5); }
-
-/* ─ Help Page ─ */
-.help-list { display: flex; flex-direction: column; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; }
-.help-item { border-bottom: 1px solid var(--border-subtle); }
-.help-item:last-child { border-bottom: none; }
-.help-question { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: 100%; padding: var(--space-4) var(--space-5); text-align: left; font-size: 14px; font-weight: 500; color: var(--text-primary); background: var(--bg-card); transition: background var(--transition-fast); }
-.help-question:hover { background: var(--bg-hover); }
-.help-item-open .help-question { color: var(--accent); background: var(--bg-hover); }
-.help-chevron { flex-shrink: 0; color: var(--text-muted); transition: transform 0.2s ease; }
-.help-item-open .help-chevron { transform: rotate(180deg); color: var(--accent); }
-.help-answer { padding: var(--space-3) var(--space-5) var(--space-5); font-size: 13px; color: var(--text-secondary); line-height: 1.65; background: var(--bg-hover); border-top: 1px solid var(--border-subtle); }
 .settings-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
-.settings-about { display: flex; flex-direction: column; }
-.settings-about-header { display: flex; align-items: center; gap: var(--space-4); }

 /* Toggle switch */
 .toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; cursor: pointer; }
@@ -873,30 +726,24 @@
 .login-status--ok { background: rgba(166, 227, 161, 0.15); color: var(--positive); }
 .login-status--error { background: rgba(243, 139, 168, 0.15); color: var(--danger); }

-.login-saved-servers { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
-.login-saved-label { font-size: 11px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: var(--space-1); }
-.login-server-btn { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); text-align: left; width: 100%; }
-.login-divider { display: flex; align-items: center; gap: var(--space-3); color: var(--text-muted); font-size: 12px; margin: var(--space-2) 0; }
-.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
-
 /* ─ Loading / Empty ─ */
 .loading-center { display: flex; justify-content: center; align-items: center; height: 200px; }
 .empty-state { text-align: center; padding: var(--space-10); color: var(--text-muted); }

 /* ─────────────────────────────────────────
-   Fullscreen Player — Ambient Stage
+   Fullscreen Player
 ──────────────────────────────────────────── */
 .fs-player {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
-  align-items: center;
-  justify-content: center;
+  flex-direction: column;
  overflow: hidden;
  will-change: transform;
  contain: layout style paint;
  animation: fsIn 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
+  /* Solid base — guarantees nothing shines through, even at edges */
  background: #0e0e1a;
 }

@@ -905,50 +752,16 @@
  to   { transform: translateY(0);    opacity: 1; }
 }

-/* ── Drifting color orbs ── */
-@keyframes orb-a {
-  0%   { transform: translate(0px,   0px)   scale(1);    }
-  33%  { transform: translate(90px, -50px)  scale(1.12); }
-  66%  { transform: translate(-40px, 70px)  scale(0.94); }
-  100% { transform: translate(0px,   0px)   scale(1);    }
-}
-@keyframes orb-b {
-  0%   { transform: translate(0px,  0px)   scale(1);    }
-  33%  { transform: translate(-70px, 40px) scale(1.08); }
-  66%  { transform: translate(50px, -60px) scale(1.14); }
-  100% { transform: translate(0px,  0px)   scale(1);    }
-}
-@keyframes orb-c {
-  0%   { transform: translate(0px, 0px)   scale(1);   }
-  50%  { transform: translate(60px, 50px) scale(0.9); }
-  100% { transform: translate(0px, 0px)   scale(1);   }
-}
-
-/* ── Cover breathing ── */
-@keyframes cover-breathe {
-  0%, 100% { transform: scale(1); }
-  50%       { transform: scale(1.018); }
-}
-
-@keyframes ken-burns {
-  0%   { transform: scale(1.08) translate(0%, 0%); }
-  25%  { transform: scale(1.12) translate(-1.5%, 1%); }
-  50%  { transform: scale(1.10) translate(1%, -1.5%); }
-  75%  { transform: scale(1.13) translate(1.5%, 0.5%); }
-  100% { transform: scale(1.08) translate(0%, 0%); }
-}
-
-/* ── Blurred background ── */
+/* Blurred background — GPU layer, will not repaint with React re-renders */
 .fs-bg {
  position: absolute;
-  inset: -15%;
+  inset: -10%;
  background-size: cover;
  background-position: center;
-  filter: blur(6px) brightness(0.25) saturate(1.6);
-  animation: ken-burns 40s ease-in-out infinite;
-  transform: scale(1.2);
+  filter: blur(50px) brightness(0.28) saturate(1.6);
+  transform: scale(1.2) translateZ(0);
  z-index: 0;
-  will-change: opacity;
+  will-change: auto;
  pointer-events: none;
  transition: opacity 700ms ease;
 }
@@ -956,42 +769,17 @@
 .fs-bg-overlay {
  position: absolute;
  inset: 0;
-  background: rgba(0, 0, 0, 0.45);
+  background: linear-gradient(
+    180deg,
+    rgba(17, 17, 27, 0.45) 0%,
+    rgba(17, 17, 27, 0.75) 65%,
+    rgba(17, 17, 27, 0.96) 100%
+  );
  z-index: 0;
  pointer-events: none;
 }

-/* ── Drifting color orbs ── */
-.fs-orb {
-  position: absolute;
-  border-radius: 50%;
-  filter: blur(110px);
-  opacity: 0.22;
-  pointer-events: none;
-  z-index: 0;
-}
-.fs-orb-1 {
-  background: var(--ctp-mauve);
-  width: 700px; height: 700px;
-  top: -220px; left: -180px;
-  animation: orb-a 20s ease-in-out infinite;
-}
-.fs-orb-2 {
-  background: var(--ctp-blue);
-  width: 600px; height: 600px;
-  bottom: -180px; right: -120px;
-  animation: orb-b 26s ease-in-out infinite;
-  animation-delay: -9s;
-}
-.fs-orb-3 {
-  background: var(--ctp-lavender);
-  width: 480px; height: 480px;
-  top: 35%; right: 5%;
-  animation: orb-c 17s ease-in-out infinite;
-  animation-delay: -14s;
-}
-
-/* ── Close button ── */
+/* Close button */
 .fs-close {
  position: absolute;
  top: 20px;
@@ -1002,7 +790,7 @@
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
-  color: rgba(255,255,255,0.7);
+  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
@@ -1011,43 +799,46 @@
 }
 .fs-close:hover {
  background: rgba(255, 255, 255, 0.16);
-  color: #ffffff;
+  color: var(--text-primary);
  transform: translateY(-1px);
 }

-/* ── Center stage ── */
-.fs-stage {
+/* ── Main layout: cover left, upcoming right ── */
+.fs-layout {
  position: relative;
  z-index: 1;
+  display: flex;
+  flex: 1;
+  align-items: flex-start;
+  justify-content: center;
+  gap: clamp(24px, 4vw, 60px);
+  padding: clamp(52px, 8vh, 90px) clamp(32px, 5vw, 80px) 12px;
+  min-height: 0;
+  overflow: visible;
+}
+
+/* Left column */
+.fs-left {
  display: flex;
  flex-direction: column;
  align-items: center;
-  gap: 18px;
-  width: min(440px, 88vw);
-  padding: 16px 0;
+  flex-shrink: 0;
 }

-/* Artist name — above cover */
-.fs-artist {
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  color: var(--ctp-lavender);
-  margin: 0;
-  opacity: 0.9;
-}
-
-/* Cover — breathes slowly */
+/* Cover: explicit size, same formula as .fs-right */
 .fs-cover-wrap {
-  width: clamp(300px, 30vw, 480px);
-  max-height: calc(100vh - 300px);
+  position: relative;
+  width: clamp(240px, min(38vw, 50vh), 500px);
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-xl);
  overflow: hidden;
-  box-shadow: none;
+  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255,255,255,0.06);
  flex-shrink: 0;
-  animation: cover-breathe 9s ease-in-out infinite;
+  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
+}
+.fs-cover-wrap:hover {
+  transform: scale(1.015);
+  box-shadow: 0 32px 100px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.1);
 }
 .fs-cover {
  width: 100%;
@@ -1056,8 +847,6 @@
  display: block;
 }
 .fs-cover-placeholder {
-  width: 100%;
-  height: 100%;
  background: var(--ctp-surface0);
  display: flex;
  align-items: center;
@@ -1065,29 +854,141 @@
  color: var(--text-muted);
 }

-/* Track info — below cover */
+/* Right column: same explicit width+height as cover */
+.fs-right {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  flex-shrink: 0;
+  width: clamp(240px, min(38vw, 50vh), 500px);
+  height: clamp(240px, min(38vw, 50vh), 500px);
+  overflow: hidden;
+}
+.fs-upcoming-title {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  margin: 0;
+  flex-shrink: 0;
+}
+.fs-upcoming-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+}
+.fs-upcoming-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 14px;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  width: 100%;
+  text-align: left;
+  transition: background var(--transition-fast);
+  background: transparent;
+  flex-shrink: 0;
+}
+.fs-upcoming-item:hover {
+  background: rgba(255,255,255,0.07);
+}
+.fs-upcoming-art {
+  width: 44px;
+  height: 44px;
+  border-radius: var(--radius-sm);
+  object-fit: cover;
+  flex-shrink: 0;
+}
+.fs-upcoming-placeholder {
+  background: var(--ctp-surface1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+}
+.fs-upcoming-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+.fs-upcoming-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.fs-upcoming-artist {
+  font-size: 12px;
+  color: var(--text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.fs-upcoming-dur {
+  font-size: 12px;
+  color: var(--text-muted);
+  font-variant-numeric: tabular-nums;
+  flex-shrink: 0;
+}
+
+/* ── Footer: track info + progress + controls (centered, full width) ── */
+.fs-footer {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  width: 100%;
+  padding: 0 clamp(40px, 8vw, 120px) 48px;
+}
+
+.fs-footer-main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  gap: 16px;
+  margin-top: clamp(20px, 4vh, 80px);
+  margin-bottom: auto; /* Pushes controls down to bottom */
+}
+
+/* Track metadata */
 .fs-track-info {
  text-align: center;
  width: 100%;
 }
 .fs-title {
  font-family: var(--font-display);
-  font-size: clamp(20px, 3vw, 32px);
+  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 800;
-  color: #ffffff;
-  margin: 0 0 6px;
-  line-height: 1.15;
+  color: var(--text-primary);
+  margin: 0 0 4px;
+  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
 }
-.fs-album {
-  font-size: 14px;
-  color: rgba(255, 255, 255, 0.5);
+.fs-artist {
+  font-size: clamp(13px, 1.2vw, 16px);
+  font-weight: 600;
+  color: var(--accent);
  margin: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+}
+.fs-album {
+  font-size: 13px;
+  color: var(--text-secondary);
+  margin: 3px 0 0;
 }
 .fs-codec {
  display: inline-block;
@@ -1098,11 +999,21 @@
  border: 1px solid rgba(255,255,255,0.1);
  padding: 2px 8px;
  border-radius: var(--radius-full);
-  color: rgba(255, 255, 255, 0.35);
-  margin-top: 8px;
+  color: var(--text-muted);
+  margin-top: 6px;
 }

-/* Progress bar */
+/* Progress + volume container */
+.fs-bottom {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+  max-width: 700px;
+  align-items: center;
+}
+
+/* Progress */
 .fs-progress-wrap {
  display: flex;
  align-items: center;
@@ -1110,8 +1021,8 @@
  width: 100%;
 }
 .fs-time {
-  font-size: 11px;
-  color: rgba(255,255,255,0.4);
+  font-size: 12px;
+  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  text-align: center;
@@ -1122,14 +1033,8 @@
 }
 .fs-progress-bar input[type="range"] {
  width: 100%;
-  height: 3px;
-  background: linear-gradient(
-    to right,
-    rgba(255,255,255,0.85) var(--pct, 0%),
-    rgba(255,255,255,0.32) var(--pct, 0%),
-    rgba(255,255,255,0.32) var(--buf, 0%),
-    rgba(255,255,255,0.15) var(--buf, 0%)
-  );
+  height: 4px;
+  background: linear-gradient(to right, var(--ctp-mauve) var(--pct), rgba(255,255,255,0.12) var(--pct));
  border-radius: 2px;
  cursor: pointer;
  appearance: none;
@@ -1138,50 +1043,105 @@
 .fs-progress-bar input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
-  width: 13px;
-  height: 13px;
+  width: 14px;
+  height: 14px;
  border-radius: 50%;
-  background: #ffffff;
+  background: white;
  cursor: pointer;
-  box-shadow: 0 1px 6px rgba(0,0,0,0.6);
+  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
  transition: transform var(--transition-fast);
 }
-.fs-progress-bar input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.3); }
+.fs-progress-bar input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.25); }

-/* Transport controls */
+
+/* Controls: flat centered flex row */
 .fs-controls {
  display: flex;
  align-items: center;
  justify-content: center;
-  gap: 14px;
+  gap: 16px;
 }
+
 .fs-btn {
  display: flex;
  align-items: center;
  justify-content: center;
-  width: 36px;
-  height: 36px;
+  width: 48px;
+  height: 48px;
  border-radius: 50%;
-  color: rgba(255,255,255,0.6);
+  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  background: transparent;
 }
-.fs-btn:hover { color: #ffffff; background: rgba(255,255,255,0.1); }
-.fs-btn.active { color: var(--ctp-lavender); }
-.fs-btn-sm { width: 28px; height: 28px; }
+.fs-btn:hover { color: var(--text-primary); background: rgba(255,255,255,0.08); }
+.fs-btn.active { color: var(--accent); }
+.fs-btn-sm { width: 36px; height: 36px; }
 .fs-btn-play {
-  width: 54px;
-  height: 54px;
-  background: linear-gradient(135deg, var(--ctp-mauve), var(--ctp-lavender));
-  color: var(--ctp-crust);
-  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
+  width: 68px;
+  height: 68px;
+  background: white;
+  color: #1e1e2e;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
 }
 .fs-btn-play:hover {
-  background: linear-gradient(135deg, var(--ctp-lavender), var(--ctp-mauve));
-  color: var(--ctp-crust);
-  transform: scale(1.07);
-  box-shadow: 0 10px 34px rgba(0,0,0,0.6);
+  background: var(--ctp-lavender);
+  color: #1e1e2e;
+  transform: scale(1.06);
+  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
+}
+
+
+@keyframes fsIn {
+  from { transform: translateY(100%); opacity: 0; }
+  to   { transform: translateY(0);    opacity: 1; }
+}
+
+/* Blurred cover background */
+.fs-bg {
+  position: absolute;
+  inset: -10%;
+  background-size: cover;
+  background-position: center;
+  filter: blur(40px) brightness(0.35) saturate(1.4);
+  transform: scale(1.15);
+  z-index: 0;
+}
+
+.fs-bg-overlay {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    160deg,
+    rgba(17, 17, 27, 0.55) 0%,
+    rgba(17, 17, 27, 0.85) 60%,
+    rgba(17, 17, 27, 0.97) 100%
+  );
+  z-index: 0;
+}
+
+/* Close button */
+.fs-close {
+  position: absolute;
+  top: 20px;
+  left: 24px;
+  z-index: 10;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(8px);
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--transition-fast);
+  cursor: pointer;
+}
+.fs-close:hover {
+  background: rgba(255, 255, 255, 0.16);
+  color: var(--text-primary);
+  transform: translateY(-1px);
 }

 /* Chat */
@@ -164,70 +164,6 @@
  color: var(--text-primary);
 }

-/* ─── Update Toast ─── */
-@keyframes update-toast-in {
-  from { opacity: 0; transform: translateY(6px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-
-.update-toast {
-  margin: 0 var(--space-1) var(--space-2);
-  padding: var(--space-3) var(--space-3);
-  border-radius: var(--radius-md);
-  background: var(--accent-dim);
-  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-  animation: update-toast-in 0.35s ease both;
-}
-
-.update-toast-header {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  color: var(--accent);
-}
-
-.update-toast-label {
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: var(--accent);
-}
-
-.update-toast-version {
-  font-size: 12px;
-  color: var(--text-secondary);
-  padding-left: 22px;
-}
-
-.update-toast-link {
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--accent);
-  text-decoration: none;
-  padding-left: 22px;
-  opacity: 0.8;
-  transition: opacity var(--transition-fast);
-}
-
-.update-toast-link:hover {
-  opacity: 1;
-  text-decoration: underline;
-}
-
-.update-toast-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--space-2) 0;
-  color: var(--accent);
-  animation: update-toast-in 0.35s ease both;
-  cursor: default;
-}
-
 /* ─── Main Content ─── */
 .main-content {
  grid-area: main;
@@ -370,14 +306,13 @@
  display: flex;
  flex-direction: column;
  align-items: center;
-  gap: 2px;
-  padding: 12px 0;
+  gap: var(--space-2);
 }

 .player-buttons {
  display: flex;
  align-items: center;
-  gap: var(--space-3);
+  gap: var(--space-2);
 }

 .player-btn {
@@ -387,31 +322,29 @@
  width: 36px;
  height: 36px;
  border-radius: 50%;
-  color: var(--text-muted);
+  color: var(--text-secondary);
  transition: all var(--transition-fast);
 }

 .player-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
-  transform: scale(1.12);
 }

 .player-btn-primary {
-  width: 48px;
-  height: 48px;
-  background: linear-gradient(135deg, var(--ctp-mauve), var(--ctp-lavender));
-  color: var(--ctp-crust);
+  width: 42px;
+  height: 42px;
+  background: var(--text-primary);
+  color: var(--bg-app);
  border-radius: 50%;
-  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
-  flex-shrink: 0;
+  box-shadow: var(--shadow-sm);
 }

 .player-btn-primary:hover {
-  background: linear-gradient(135deg, var(--ctp-lavender), var(--ctp-mauve));
+  background: var(--accent);
  color: var(--ctp-crust);
-  transform: scale(1.07);
-  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4), var(--shadow-glow);
+  transform: scale(1.05);
+  box-shadow: var(--shadow-glow);
 }

 .player-progress {
@@ -508,26 +441,23 @@
 }

 .queue-current-track {
-  padding: var(--space-3) var(--space-4);
+  padding: var(--space-4);
  display: flex;
-  flex-direction: row;
-  align-items: center;
+  flex-direction: column;
  gap: var(--space-3);
  flex-shrink: 0;
-  border-bottom: 1px solid var(--border-subtle);
 }

 .queue-current-cover {
-  width: 72px;
-  height: 72px;
-  flex-shrink: 0;
+  width: 100%;
+  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
 }

 .queue-current-cover img {
@@ -544,12 +474,10 @@
  display: flex;
  flex-direction: column;
  gap: 2px;
-  min-width: 0;
-  flex: 1;
 }

 .queue-current-info h3 {
-  font-size: 13px;
+  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary);
@@ -573,7 +501,7 @@
 }

 .queue-divider {
-  padding: var(--space-3) var(--space-4) 0;
+  padding: var(--space-4) var(--space-5) 0;
  flex-shrink: 0;
 }

@@ -600,8 +528,6 @@
  transition: background var(--transition-fast);
  color: var(--text-secondary);
 }
-/* Prevent child elements from stealing dragenter/dragleave events */
-.queue-item > * { pointer-events: none; }

 .queue-item:hover {
  background: var(--bg-hover);
@@ -56,106 +56,6 @@
  --danger:        var(--ctp-red);
 }

-/* ─── Catppuccin Macchiato Variables ─── */
-[data-theme='macchiato'] {
-  color-scheme: dark;
-  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b8c0e0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
-  --ctp-rosewater: #f4dbd6;
-  --ctp-flamingo:  #f0c6c6;
-  --ctp-pink:      #f5bde6;
-  --ctp-mauve:     #c6a0f6;
-  --ctp-red:       #ed8796;
-  --ctp-maroon:    #ee99a0;
-  --ctp-peach:     #f5a97f;
-  --ctp-yellow:    #eed49f;
-  --ctp-green:     #a6da95;
-  --ctp-teal:      #8bd5ca;
-  --ctp-sky:       #91d7e3;
-  --ctp-sapphire:  #7dc4e4;
-  --ctp-blue:      #8aadf4;
-  --ctp-lavender:  #b7bdf8;
-  --ctp-text:      #cad3f5;
-  --ctp-subtext1:  #b8c0e0;
-  --ctp-subtext0:  #a5adcb;
-  --ctp-overlay2:  #939ab7;
-  --ctp-overlay1:  #8087a2;
-  --ctp-overlay0:  #6e738d;
-  --ctp-surface2:  #5b6078;
-  --ctp-surface1:  #494d64;
-  --ctp-surface0:  #363a4f;
-  --ctp-base:      #24273a;
-  --ctp-mantle:    #1e2030;
-  --ctp-crust:     #181926;
-
-  --bg-app:        var(--ctp-base);
-  --bg-sidebar:    var(--ctp-mantle);
-  --bg-card:       var(--ctp-surface0);
-  --bg-hover:      var(--ctp-surface1);
-  --bg-player:     var(--ctp-crust);
-  --bg-glass:      rgba(36, 39, 58, 0.75);
-  --accent:        var(--ctp-mauve);
-  --accent-dim:    rgba(198, 160, 246, 0.15);
-  --accent-glow:   rgba(198, 160, 246, 0.3);
-  --text-primary:  var(--ctp-text);
-  --text-secondary:var(--ctp-subtext1);
-  --text-muted:    var(--ctp-overlay1);
-  --border:        var(--ctp-surface1);
-  --border-subtle: var(--ctp-surface0);
-  --positive:      var(--ctp-green);
-  --warning:       var(--ctp-yellow);
-  --danger:        var(--ctp-red);
-}
-
-/* ─── Catppuccin Frappé Variables ─── */
-[data-theme='frappe'] {
-  color-scheme: dark;
-  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b5bfe2%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
-  --ctp-rosewater: #f2d5cf;
-  --ctp-flamingo:  #eebebe;
-  --ctp-pink:      #f4b8e4;
-  --ctp-mauve:     #ca9ee6;
-  --ctp-red:       #e78284;
-  --ctp-maroon:    #ea999c;
-  --ctp-peach:     #ef9f76;
-  --ctp-yellow:    #e5c890;
-  --ctp-green:     #a6d189;
-  --ctp-teal:      #81c8be;
-  --ctp-sky:       #99d1db;
-  --ctp-sapphire:  #85c1dc;
-  --ctp-blue:      #8caaee;
-  --ctp-lavender:  #babbf1;
-  --ctp-text:      #c6d0f5;
-  --ctp-subtext1:  #b5bfe2;
-  --ctp-subtext0:  #a5adce;
-  --ctp-overlay2:  #949cbb;
-  --ctp-overlay1:  #838ba7;
-  --ctp-overlay0:  #737994;
-  --ctp-surface2:  #626880;
-  --ctp-surface1:  #51576d;
-  --ctp-surface0:  #414559;
-  --ctp-base:      #303446;
-  --ctp-mantle:    #292c3c;
-  --ctp-crust:     #232634;
-
-  --bg-app:        var(--ctp-base);
-  --bg-sidebar:    var(--ctp-mantle);
-  --bg-card:       var(--ctp-surface0);
-  --bg-hover:      var(--ctp-surface1);
-  --bg-player:     var(--ctp-crust);
-  --bg-glass:      rgba(48, 52, 70, 0.75);
-  --accent:        var(--ctp-mauve);
-  --accent-dim:    rgba(202, 158, 230, 0.15);
-  --accent-glow:   rgba(202, 158, 230, 0.3);
-  --text-primary:  var(--ctp-text);
-  --text-secondary:var(--ctp-subtext1);
-  --text-muted:    var(--ctp-overlay1);
-  --border:        var(--ctp-surface1);
-  --border-subtle: var(--ctp-surface0);
-  --positive:      var(--ctp-green);
-  --warning:       var(--ctp-yellow);
-  --danger:        var(--ctp-red);
-}
-
 /* ─── Catppuccin Latte Variables (Light Theme) ─── */
 [data-theme='latte'] {
  color-scheme: light;
@@ -207,221 +107,6 @@
  --danger:        var(--ctp-red);
 }

-/* ─── Nord – Polar Night (Dark) ─── */
-[data-theme='nord'] {
-  color-scheme: dark;
-  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23e5e9f0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
-  /* Polar Night */
-  --ctp-crust:     #2e3440;
-  --ctp-mantle:    #2e3440;
-  --ctp-base:      #3b4252;
-  --ctp-surface0:  #434c5e;
-  --ctp-surface1:  #4c566a;
-  --ctp-surface2:  #576070;
-  --ctp-overlay0:  #7a8898;
-  --ctp-overlay1:  #8894a4;
-  --ctp-overlay2:  #96a2b0;
-  /* Snow Storm as text */
-  --ctp-text:      #eceff4;
-  --ctp-subtext1:  #e5e9f0;
-  --ctp-subtext0:  #d8dee9;
-  /* Frost */
-  --ctp-teal:      #8fbcbb;
-  --ctp-sky:       #88c0d0;
-  --ctp-sapphire:  #81a1c1;
-  --ctp-blue:      #5e81ac;
-  --ctp-lavender:  #81a1c1;
-  --ctp-mauve:     #88c0d0;
-  /* Aurora */
-  --ctp-red:       #bf616a;
-  --ctp-maroon:    #d08770;
-  --ctp-peach:     #d08770;
-  --ctp-yellow:    #ebcb8b;
-  --ctp-green:     #a3be8c;
-  --ctp-pink:      #b48ead;
-  --ctp-flamingo:  #bf616a;
-  --ctp-rosewater: #d08770;
-
-  --bg-app:        #3b4252;
-  --bg-sidebar:    #2e3440;
-  --bg-card:       #434c5e;
-  --bg-hover:      #4c566a;
-  --bg-player:     #2e3440;
-  --bg-glass:      rgba(59, 66, 82, 0.75);
-  --accent:        #88c0d0;
-  --accent-dim:    rgba(136, 192, 208, 0.15);
-  --accent-glow:   rgba(136, 192, 208, 0.3);
-  --text-primary:  #eceff4;
-  --text-secondary:#e5e9f0;
-  --text-muted:    #8894a4;
-  --border:        #434c5e;
-  --border-subtle: #3b4252;
-  --positive:      #a3be8c;
-  --warning:       #ebcb8b;
-  --danger:        #bf616a;
-}
-
-/* ─── Nord – Snow Storm (Light) ─── */
-[data-theme='nord-snowstorm'] {
-  color-scheme: light;
-  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%233b4252%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
-  /* Snow Storm as backgrounds */
-  --ctp-crust:     #d8dee9;
-  --ctp-mantle:    #e5e9f0;
-  --ctp-base:      #eceff4;
-  --ctp-surface0:  #d8dee9;
-  --ctp-surface1:  #c8d0de;
-  --ctp-surface2:  #b8c2d0;
-  --ctp-overlay0:  #7a8898;
-  --ctp-overlay1:  #636e7e;
-  --ctp-overlay2:  #4c566a;
-  /* Polar Night as text */
-  --ctp-text:      #2e3440;
-  --ctp-subtext1:  #3b4252;
-  --ctp-subtext0:  #434c5e;
-  /* Frost */
-  --ctp-teal:      #8fbcbb;
-  --ctp-sky:       #88c0d0;
-  --ctp-sapphire:  #81a1c1;
-  --ctp-blue:      #5e81ac;
-  --ctp-lavender:  #81a1c1;
-  --ctp-mauve:     #5e81ac;
-  /* Aurora */
-  --ctp-red:       #bf616a;
-  --ctp-maroon:    #d08770;
-  --ctp-peach:     #d08770;
-  --ctp-yellow:    #9a7200;
-  --ctp-green:     #4e7c3f;
-  --ctp-pink:      #7e5d8c;
-  --ctp-flamingo:  #bf616a;
-  --ctp-rosewater: #d08770;
-
-  --bg-app:        #eceff4;
-  --bg-sidebar:    #e5e9f0;
-  --bg-card:       #d8dee9;
-  --bg-hover:      #c8d0de;
-  --bg-player:     #e5e9f0;
-  --bg-glass:      rgba(236, 239, 244, 0.80);
-  --accent:        #5e81ac;
-  --accent-dim:    rgba(94, 129, 172, 0.15);
-  --accent-glow:   rgba(94, 129, 172, 0.3);
-  --text-primary:  #2e3440;
-  --text-secondary:#3b4252;
-  --text-muted:    #636e7e;
-  --border:        #c8d0de;
-  --border-subtle: #d8dee9;
-  --positive:      #4e7c3f;
-  --warning:       #9a7200;
-  --danger:        #bf616a;
-}
-
-/* ─── Nord – Frost (Deep Ocean Blue) ─── */
-[data-theme='nord-frost'] {
-  color-scheme: dark;
-  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23e5e9f0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
-  /* Deep ocean blue – Frost-inspired dark backgrounds */
-  --ctp-crust:     #1a2535;
-  --ctp-mantle:    #1d2b3a;
-  --ctp-base:      #253545;
-  --ctp-surface0:  #2d3f52;
-  --ctp-surface1:  #354a60;
-  --ctp-surface2:  #3d546e;
-  --ctp-overlay0:  #6888a4;
-  --ctp-overlay1:  #7898b4;
-  --ctp-overlay2:  #88a8c4;
-  /* Snow Storm as text */
-  --ctp-text:      #eceff4;
-  --ctp-subtext1:  #e5e9f0;
-  --ctp-subtext0:  #d8dee9;
-  /* Frost accent */
-  --ctp-teal:      #8fbcbb;
-  --ctp-sky:       #88c0d0;
-  --ctp-sapphire:  #81a1c1;
-  --ctp-blue:      #5e81ac;
-  --ctp-lavender:  #8fbcbb;
-  --ctp-mauve:     #88c0d0;
-  /* Aurora */
-  --ctp-red:       #bf616a;
-  --ctp-maroon:    #d08770;
-  --ctp-peach:     #d08770;
-  --ctp-yellow:    #ebcb8b;
-  --ctp-green:     #a3be8c;
-  --ctp-pink:      #b48ead;
-  --ctp-flamingo:  #bf616a;
-  --ctp-rosewater: #d08770;
-
-  --bg-app:        #253545;
-  --bg-sidebar:    #1d2b3a;
-  --bg-card:       #2d3f52;
-  --bg-hover:      #354a60;
-  --bg-player:     #1a2535;
-  --bg-glass:      rgba(37, 53, 69, 0.75);
-  --accent:        #88c0d0;
-  --accent-dim:    rgba(136, 192, 208, 0.15);
-  --accent-glow:   rgba(136, 192, 208, 0.35);
-  --text-primary:  #eceff4;
-  --text-secondary:#e5e9f0;
-  --text-muted:    #7898b4;
-  --border:        #2d3f52;
-  --border-subtle: #253545;
-  --positive:      #a3be8c;
-  --warning:       #ebcb8b;
-  --danger:        #bf616a;
-}
-
-/* ─── Nord – Aurora (Dark + Aurora Purple) ─── */
-[data-theme='nord-aurora'] {
-  color-scheme: dark;
-  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23e5e9f0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
-  /* Polar Night base */
-  --ctp-crust:     #2e3440;
-  --ctp-mantle:    #2e3440;
-  --ctp-base:      #3b4252;
-  --ctp-surface0:  #434c5e;
-  --ctp-surface1:  #4c566a;
-  --ctp-surface2:  #576070;
-  --ctp-overlay0:  #7a8898;
-  --ctp-overlay1:  #8894a4;
-  --ctp-overlay2:  #96a2b0;
-  /* Snow Storm as text */
-  --ctp-text:      #eceff4;
-  --ctp-subtext1:  #e5e9f0;
-  --ctp-subtext0:  #d8dee9;
-  /* Aurora accents — purple as mauve/lavender for button gradients */
-  --ctp-mauve:     #b48ead;
-  --ctp-lavender:  #a3be8c;
-  --ctp-pink:      #b48ead;
-  --ctp-teal:      #8fbcbb;
-  --ctp-sky:       #88c0d0;
-  --ctp-sapphire:  #81a1c1;
-  --ctp-blue:      #5e81ac;
-  --ctp-red:       #bf616a;
-  --ctp-maroon:    #d08770;
-  --ctp-peach:     #d08770;
-  --ctp-yellow:    #ebcb8b;
-  --ctp-green:     #a3be8c;
-  --ctp-flamingo:  #bf616a;
-  --ctp-rosewater: #d08770;
-
-  --bg-app:        #3b4252;
-  --bg-sidebar:    #2e3440;
-  --bg-card:       #434c5e;
-  --bg-hover:      #4c566a;
-  --bg-player:     #2e3440;
-  --bg-glass:      rgba(59, 66, 82, 0.75);
-  --accent:        #b48ead;
-  --accent-dim:    rgba(180, 142, 173, 0.15);
-  --accent-glow:   rgba(180, 142, 173, 0.3);
-  --text-primary:  #eceff4;
-  --text-secondary:#e5e9f0;
-  --text-muted:    #8894a4;
-  --border:        #434c5e;
-  --border-subtle: #3b4252;
-  --positive:      #a3be8c;
-  --warning:       #ebcb8b;
-  --danger:        #bf616a;
-}
-
 /* ─── Global Base Settings ─── */
 :root {
  /* Typography */
@@ -1,93 +0,0 @@
-const DB_NAME = 'psysonic-img-cache';
-const STORE_NAME = 'images';
-const MAX_AGE_MS = 30 * 24 * 60 * 60 * 1000; // 30 days
-
-// In-memory map: cacheKey → object URL (avoids creating multiple object URLs per session)
-const objectUrlCache = new Map<string, string>();
-
-let db: IDBDatabase | null = null;
-let dbPromise: Promise<IDBDatabase> | null = null;
-
-function openDB(): Promise<IDBDatabase> {
-  if (db) return Promise.resolve(db);
-  if (dbPromise) return dbPromise;
-  dbPromise = new Promise((resolve, reject) => {
-    const req = indexedDB.open(DB_NAME, 1);
-    req.onupgradeneeded = e => {
-      const database = (e.target as IDBOpenDBRequest).result;
-      if (!database.objectStoreNames.contains(STORE_NAME)) {
-        database.createObjectStore(STORE_NAME, { keyPath: 'key' });
-      }
-    };
-    req.onsuccess = e => {
-      db = (e.target as IDBOpenDBRequest).result;
-      resolve(db!);
-    };
-    req.onerror = () => reject(req.error);
-  });
-  return dbPromise;
-}
-
-async function getBlob(key: string): Promise<Blob | null> {
-  try {
-    const database = await openDB();
-    return new Promise(resolve => {
-      const req = database.transaction(STORE_NAME, 'readonly').objectStore(STORE_NAME).get(key);
-      req.onsuccess = () => {
-        const entry = req.result;
-        resolve(entry && Date.now() - entry.timestamp < MAX_AGE_MS ? entry.blob : null);
-      };
-      req.onerror = () => resolve(null);
-    });
-  } catch {
-    return null;
-  }
-}
-
-async function putBlob(key: string, blob: Blob): Promise<void> {
-  try {
-    const database = await openDB();
-    await new Promise<void>(resolve => {
-      const tx = database.transaction(STORE_NAME, 'readwrite');
-      tx.objectStore(STORE_NAME).put({ key, blob, timestamp: Date.now() });
-      tx.oncomplete = () => resolve();
-      tx.onerror = () => resolve();
-    });
-  } catch {
-    // Ignore write errors
-  }
-}
-
-/**
- * Returns a cached object URL for an image.
- * @param fetchUrl  The actual URL to fetch from (may contain ephemeral auth params).
- * @param cacheKey  A stable key that identifies the image across sessions.
- */
-export async function getCachedUrl(fetchUrl: string, cacheKey: string): Promise<string> {
-  if (!fetchUrl) return '';
-
-  // 1. In-memory hit (same session)
-  const existing = objectUrlCache.get(cacheKey);
-  if (existing) return existing;
-
-  // 2. IndexedDB hit (persisted from previous session)
-  const blob = await getBlob(cacheKey);
-  if (blob) {
-    const objUrl = URL.createObjectURL(blob);
-    objectUrlCache.set(cacheKey, objUrl);
-    return objUrl;
-  }
-
-  // 3. Network fetch → store in IDB → return object URL
-  try {
-    const resp = await fetch(fetchUrl);
-    if (!resp.ok) return fetchUrl;
-    const newBlob = await resp.blob();
-    putBlob(cacheKey, newBlob); // fire-and-forget
-    const objUrl = URL.createObjectURL(newBlob);
-    objectUrlCache.set(cacheKey, objUrl);
-    return objUrl;
-  } catch {
-    return fetchUrl; // fallback: direct URL
-  }
-}