fix: update tag pattern in release workflow and set default tag to 'latest'

Reviewed-on: #41

.dockerignore

@@ -2,7 +2,6 @@ node_modules
 .next
 .git
 .gitignore
-README.md
 .env.local
 .env.example
 *.log
@@ -23,3 +22,18 @@ build
 .turbo
 .github
 4xnored.png
+
+# Documentation and non-runtime files
+docs/
+CHANGELOG.md
+cliff.toml
+*.md
+!README.md
+
+# Docker compose files
+docker-compose*.yml
+Dockerfile
+
+# Git and backup files
+.git*
+backup-*

.env.docker

@@ -11,10 +11,6 @@ PORT=3000
 # NAVIDROME_USERNAME=your_username
 # NAVIDROME_PASSWORD=your_password
 
-# PostHog Analytics (optional)
-POSTHOG_KEY=
-POSTHOG_HOST=
-
 # Example for external Navidrome server:
 # NAVIDROME_URL=https://your-navidrome-server.com
 # NAVIDROME_USERNAME=your_username

.env.example

@@ -3,15 +3,9 @@ NEXT_PUBLIC_NAVIDROME_URL=http://localhost:4533
 NEXT_PUBLIC_NAVIDROME_USERNAME=your_username
 NEXT_PUBLIC_NAVIDROME_PASSWORD=your_password
 
-# PostHog Analytics (optional)
-NEXT_PUBLIC_POSTHOG_KEY=your_posthog_key
-NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
-
 # For Docker deployment, use these variable names in your .env file:
 # NAVIDROME_URL=https://your-navidrome-server.com
 # NAVIDROME_USERNAME=your_username
 # NAVIDROME_PASSWORD=your_password
-# POSTHOG_KEY=your_posthog_key
-# POSTHOG_HOST=https://us.i.posthog.com
 # HOST_PORT=3000
 # PORT=3000

.env.local

@@ -1 +1 @@
-NEXT_PUBLIC_COMMIT_SHA=a854604
+NEXT_PUBLIC_COMMIT_SHA=477b172

.github/dependabot.yml

@@ -0,0 +1,15 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+    groups:
+      runtime:
+        patterns:
+          - "!@types/*"
+      dev:
+        patterns:
+          - "@types/*"
+          - "eslint*"
+          - "typescript"

.github/workflows/github-release.yml

@@ -0,0 +1,34 @@
+name: GitHub Release
+
+on:
+  push:
+    tags:
+      - '[0-9][0-9][0-9][0-9].[0-9][0-9].[0-9][0-9]'
+
+
+permissions:
+  contents: write
+
+jobs:
+  release:
+    name: Create Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Generate changelog
+        id: changelog
+        uses: orhun/git-cliff-action@v4
+        with:
+          config: cliff.toml
+          args: --latest --strip header
+
+      - name: Create Release
+        uses: softprops/action-gh-release@v2
+        with:
+          body: ${{ steps.changelog.outputs.content }}
+          draft: false
+          prerelease: false

.github/workflows/nightly.yml

@@ -0,0 +1,127 @@
+name: Docker Image (Nightly)
+
+on:
+  schedule:
+    # Run every night at 5:00 UTC
+    - cron: '0 5 * * *'
+
+env:
+  REGISTRY: docker.io
+  IMAGE_NAME: sillyangel/mice
+
+jobs:
+  check_changes:
+    runs-on: ubuntu-latest
+    outputs:
+      should_build: ${{ steps.check.outputs.should_build }}
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0 # Get full history to check for changes
+          ref: dev # Always checkout dev branch
+
+      - name: Check for changes since last nightly build
+        id: check
+        run: |
+          # Get the last commit hash from the previous nightly build
+          LAST_NIGHTLY_COMMIT=$(gh api repos/${{ github.repository }}/actions/runs \
+            --jq '.workflow_runs[] | select(.name == "Development Docker Image (Nightly)" and .conclusion == "success") | .head_sha' \
+            | head -1 || echo "")
+          
+          CURRENT_COMMIT=${{ github.sha }}
+          
+          echo "Last nightly commit: $LAST_NIGHTLY_COMMIT"
+          echo "Current commit: $CURRENT_COMMIT"
+          
+          # If we don't have a previous commit or commits are different, we should build
+          if [ -z "$LAST_NIGHTLY_COMMIT" ] || [ "$LAST_NIGHTLY_COMMIT" != "$CURRENT_COMMIT" ]; then
+            echo "Changes detected or first nightly build"
+            echo "should_build=true" >> $GITHUB_OUTPUT
+          else
+            echo "No changes since last nightly build"
+            echo "should_build=false" >> $GITHUB_OUTPUT
+          fi
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+  push_to_registry:
+    runs-on: ubuntu-latest
+    needs: check_changes
+    if: needs.check_changes.outputs.should_build == 'true' && github.ref_name == 'dev'
+    permissions:
+      packages: write
+      contents: read
+      attestations: write
+      id-token: write
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v4
+        with:
+          ref: dev # Always checkout dev branch
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ vars.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+
+      - name: Get version from package.json
+        id: app_version
+        run: |
+          VERSION=$(node -p "require('./package.json').version")
+          echo "version=$VERSION" >> "$GITHUB_OUTPUT"
+
+      - name: Docker metadata (tags, labels)
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.IMAGE_NAME }}
+          tags: |
+            type=raw,value=nightly
+            type=raw,value=dev-latest
+          labels: |
+            org.opencontainers.image.created=${{ github.event.head_commit.timestamp }}
+            org.opencontainers.image.licenses=MIT
+            org.opencontainers.image.description=Nightly development build
+
+      
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Setup Docker buildx
+        uses: docker/setup-buildx-action@v3
+        with:
+          driver-opts: |
+            network=host
+      
+      - name: Build and push
+        id: build
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: |
+            ${{ steps.meta.outputs.labels }}
+            org.opencontainers.image.description=$(cat README.md | head -20 | tr '\n' ' ')
+            org.opencontainers.image.documentation=https://github.com/sillyangel/stillnavidrome/blob/main/README.md
+          platforms: |
+            linux/amd64
+            linux/arm64/v8
+          cache-from: |
+            type=gha,scope=deps-only
+          cache-to: |
+            type=gha,mode=max,scope=deps-only
+
+      # - name: Docker Hub Description
+      #   uses: peter-evans/dockerhub-description@v4
+      #   with:
+      #     username: ${{ vars.DOCKERHUB_USERNAME }}
+      #     password: ${{ secrets.DOCKERHUB_TOKEN }}
+      #     repository: sillyangel/mice

.github/workflows/publish-docker.yml

@@ -1,77 +0,0 @@
-name: Publish Docker Image
-
-on:
-    push:
-        tags:
-            - '[0-9][0-9][0-9][0-9].[0-9]*.[0-9]*'
-
-env:
-  REGISTRY: ghcr.io
-  IMAGE_NAME: ${{ github.repository }}
-
-jobs:
-  push_to_registry:
-    runs-on: ubuntu-latest
-    permissions:
-      packages: write
-      contents: read
-      attestations: write
-      id-token: write
-    steps:
-      - name: Check out the repo
-        uses: actions/checkout@v4
-
-      - name: Login to GitHub Container Registry
-        uses: docker/login-action@v3
-        with:
-          registry: ${{ env.REGISTRY }}
-          username: ${{ github.repository_owner }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: '22'
-
-      - name: Get version from package.json
-        id: app_version
-        run: |
-          VERSION=$(node -p "require('./package.json').version")
-          echo "version=$VERSION" >> "$GITHUB_OUTPUT"
-
-      - name: Docker metadata (tags, labels)
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
-          tags: |
-            type=raw,value=latest,enable=${{ github.ref == 'refs/heads/main' || github.ref == 'refs/heads/master' || startsWith(github.ref, 'refs/tags/') }}
-            type=raw,value=${{ steps.app_version.outputs.version }}
-            type=raw,value=${{ github.sha }}
-      
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
-
-      - name: Setup Docker buildx
-        uses: docker/setup-buildx-action@v3
-      
-      - name: Build and push
-        id: build
-        uses: docker/build-push-action@v5
-        with:
-          context: .
-          push: true
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-          platforms: |
-            linux/amd64
-            linux/arm64/v8
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
-
-      - name: Generate artifact attestation
-        uses: actions/attest-build-provenance@v1
-        with:
-          subject-name: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME}}
-          subject-digest: ${{ steps.build.outputs.digest }}
-          push-to-registry: true

.github/workflows/release.yml

@@ -0,0 +1,83 @@
+name: Release Docker Image
+
+on:
+  push:
+    tags:
+      - '[0-9][0-9][0-9][0-9].[0-9][0-9].[0-9][0-9]'
+
+env:
+  REGISTRY: docker.io
+  IMAGE_NAME: sillyangel/mice
+
+jobs:
+  push_to_registry:
+    runs-on: ubuntu-latest
+    permissions:
+      packages: write
+      contents: read
+      attestations: write
+      id-token: write
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v4
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: sillyangel
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+
+      - name: Get version from package.json
+        id: app_version
+        run: |
+          VERSION=$(node -p "require('./package.json').version")
+          echo "version=$VERSION" >> "$GITHUB_OUTPUT"
+
+      - name: Docker metadata (tags, labels)
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.IMAGE_NAME }}
+          tags: |
+            type=raw,value=latest,enable=${{ github.ref_name == 'main' }}
+            type=raw,value=${{ steps.app_version.outputs.version }},enable=${{ startsWith(github.ref, 'refs/tags/') }}
+            type=raw,value=${{ github.ref_name }},enable=${{ startsWith(github.ref, 'refs/tags/') }}
+            type=sha,prefix=main-,enable=${{ github.ref_name == 'main' }}
+          labels: |
+            org.opencontainers.image.created=${{ github.event.head_commit.timestamp }}
+            org.opencontainers.image.licenses=MIT
+
+      
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Setup Docker buildx
+        uses: docker/setup-buildx-action@v3
+        with:
+          driver-opts: |
+            network=host
+            
+      - name: Build and push
+        id: build
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.meta.outputs.tags || 'latest' }}
+          labels: |
+            ${{ steps.meta.outputs.labels }}
+            org.opencontainers.image.description=$(cat README.md | head -20 | tr '\n' ' ')
+            org.opencontainers.image.documentation=https://github.com/sillyangel/stillnavidrome/blob/main/README.md
+          platforms: |
+            linux/amd64
+            linux/arm64/v8
+          cache-from: |
+            type=gha,scope=deps-only
+          cache-to: |
+            type=gha,mode=max,scope=deps-only
+

.gitignore

@@ -70,6 +70,11 @@ next-env.d.ts
 # database
 still-database/
 
+# Debug related files
+scripts/sleep-debug.js
+.vscode/launch.json
+source-map-support/
+
 .next/
 certificates
 .vercel

.vscode/launch.json

@@ -0,0 +1,85 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Merow",
+      "program": "${workspaceFolder}/scripts/sleep-debug.js",
+      "skipFiles": [
+        "<node_internals>/**"
+      ],
+      "console": "integratedTerminal",
+      "sourceMaps": true,
+      "resolveSourceMapLocations": [
+        "${workspaceFolder}/**",
+        "!**/node_modules/**"
+      ],
+      "trace": true
+    },
+    {
+      "name": "Debug: Next.js Development",
+      "type": "node",
+      "request": "launch",
+      "program": "${workspaceFolder}/node_modules/.bin/next",
+      "args": ["dev"],
+      "console": "integratedTerminal",
+      "env": {
+        "NODE_ENV": "development"
+      },
+      "runtimeExecutable": "pnpm",
+      "runtimeArgs": ["run", "dev"],
+      "skipFiles": ["<node_internals>/**"],
+      "resolveSourceMapLocations": [
+        "${workspaceFolder}/**",
+        "!**/node_modules/**"
+      ],
+      "serverReadyAction": {
+        "action": "openExternally",
+        "pattern": "http://localhost:40625"
+      }
+    },
+    {
+      "name": "Debug: Development (Verbose)",
+      "type": "node",
+      "request": "launch",
+      "runtimeExecutable": "pnpm",
+      "runtimeArgs": ["run", "dev"],
+      "cwd": "${workspaceFolder}",
+      "env": {
+        "NODE_ENV": "development",
+        "DEBUG": "*",
+        "NEXT_TELEMETRY_DISABLED": "1"
+      },
+      "console": "integratedTerminal",
+      "skipFiles": ["<node_internals>/**"],
+      "resolveSourceMapLocations": [
+        "${workspaceFolder}/**",
+        "!**/node_modules/**"
+      ],
+      "serverReadyAction": {
+        "action": "openExternally",
+        "pattern": "http://localhost:40625"
+      }
+    },
+    {
+      "name": "Debug: Next.js Production",
+      "type": "node",
+      "request": "launch",
+      "program": "${workspaceFolder}/node_modules/.bin/next",
+      "args": ["start"],
+      "console": "integratedTerminal",
+      "env": {
+        "NODE_ENV": "production"
+      },
+      "preLaunchTask": "Build: Production Build Only",
+      "runtimeExecutable": "pnpm",
+      "runtimeArgs": ["run", "start"],
+      "skipFiles": ["<node_internals>/**"],
+      "serverReadyAction": {
+        "action": "openExternally",
+        "pattern": "http://localhost:40625"
+      }
+    }
+  ]
+}

.vscode/tasks.json

@@ -0,0 +1,114 @@
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"label": "Dev: Start Development Server",
+			"type": "shell",
+			"command": "pnpm",
+			"args": [
+				"run",
+				"dev"
+			],
+			"group": {
+				"kind": "build",
+				"isDefault": true
+			},
+			"isBackground": true,
+			"problemMatcher": [
+				"$tsc-watch"
+			],
+			"presentation": {
+				"echo": true,
+				"reveal": "always",
+				"focus": false,
+				"panel": "new",
+				"showReuseMessage": true,
+				"clear": false
+			},
+			"options": {
+				"env": {
+					"NODE_ENV": "development"
+				}
+			}
+		},
+		{
+			"label": "Prod: Build and Start Production",
+			"type": "shell",
+			"command": "bash",
+			"args": [
+				"-c",
+				"pnpm run build && pnpm run start"
+			],
+			"group": "build",
+			"presentation": {
+				"echo": true,
+				"reveal": "always",
+				"focus": true,
+				"panel": "new",
+				"showReuseMessage": true,
+				"clear": true
+			},
+			"options": {
+				"env": {
+					"NODE_ENV": "production"
+				}
+			},
+			"problemMatcher": ["$tsc"],
+			"dependsOrder": "sequence"
+		},
+		{
+			"label": "Debug: Development with Debug Info",
+			"type": "shell",
+			"command": "pnpm",
+			"args": [
+				"run",
+				"dev"
+			],
+			"group": {
+				"kind": "test",
+				"isDefault": false
+			},
+			"isBackground": true,
+			"presentation": {
+				"echo": true,
+				"reveal": "always",
+				"focus": false,
+				"panel": "new",
+				"showReuseMessage": true,
+				"clear": false
+			},
+			"options": {
+				"env": {
+					"NODE_ENV": "development",
+					"DEBUG": "*",
+					"NEXT_TELEMETRY_DISABLED": "1"
+				}
+			},
+			"problemMatcher": ["$tsc-watch"]
+		},
+		{
+			"label": "Build: Production Build Only",
+			"type": "shell",
+			"command": "pnpm",
+			"args": [
+				"run",
+				"build"
+			],
+			"group": "build",
+			"presentation": {
+				"echo": true,
+				"reveal": "always",
+				"focus": true,
+				"panel": "new",
+				"showReuseMessage": true,
+				"clear": true
+			},
+			"options": {
+				"env": {
+					"NODE_ENV": "production"
+				}
+			},
+			"problemMatcher": ["$tsc"]
+		}
+	]
+}

CHANGELOG.md

@@ -0,0 +1,50 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+## [unreleased]
+
+### Bug Fixes
+
+- Use git commit SHA for versioning, fix audio playback resume, remove all streak localStorage code
+- Docker startup issue, add GitHub release workflow and changelog config
+
+### Documentation
+
+- Add CHANGELOG and commit rewriting script
+
+### Features
+
+- Implement offline library management with IndexedDB support
+- Implement offline library synchronization with IndexedDB
+- Add page transition animations and notification settings for audio playback
+- Enhance UI with Framer Motion animations for album artwork and artist icons
+- Update cover art retrieval to use higher resolution images and enhance download manager with new features
+- Enhance audio settings with ReplayGain, crossfade, and equalizer presets; add AudioSettingsDialog component
+- Implement Auto-Tagging Settings and MusicBrainz integration
+- Enhance OfflineManagement component with improved card styling and layout
+- Refactor service worker registration and enhance offline download manager with client-side checks
+- Move service worker registration to a dedicated component for improved client-side handling
+- Add ListeningStreakCard component for tracking listening streaks
+- Add keyboard shortcuts and queue management features
+- Improve SortableQueueItem component with enhanced click handling and styling
+- Add pagination to library/songs and remove listening streaks
+- Fix menubar, add lazy loading, improve image quality, limit search results, filter browse artists
+
+### Miscellaneous
+
+- C
+- Merge pull request #39 from sillyangel/dependabot/npm_and_yarn/dev-99ea30e4b7
+- Remove PostHog analytics and update dependencies to latest minor versions
+- Update pnpm-lock.yaml to match new overrides configuration
+- Update version to 2026.01.24 and add changelog for January 2026 release
+- Organize documentation - move markdown files to docs/ folder
+
+### Refactoring
+
+- Remove all offline download and caching functionality
+- Simplify service worker by removing offline download functionality
+
+### Styling
+
+- Update README formatting and improve content clarity
+

Dockerfile

@@ -1,5 +1,5 @@
-# Use Node.js 22 Alpine for smaller image size
-FROM node:22-alpine
+# Use Node.js 20 Alpine for smaller image size
+FROM node:20-alpine
 
 # Install pnpm globally
 RUN npm install -g pnpm@10.12.4
@@ -16,18 +16,17 @@ RUN pnpm install
 # Copy source code
 COPY . .
 
+# Copy README.md to the app directory for documentation
+COPY README.md /app/
+
 # Set environment variable placeholders during build
 # These will be replaced at runtime with actual values
 ENV NEXT_PUBLIC_NAVIDROME_URL=NEXT_PUBLIC_NAVIDROME_URL
 ENV NEXT_PUBLIC_NAVIDROME_USERNAME=NEXT_PUBLIC_NAVIDROME_USERNAME
 ENV NEXT_PUBLIC_NAVIDROME_PASSWORD=NEXT_PUBLIC_NAVIDROME_PASSWORD
-ENV NEXT_PUBLIC_POSTHOG_KEY=NEXT_PUBLIC_POSTHOG_KEY
-ENV NEXT_PUBLIC_POSTHOG_HOST=NEXT_PUBLIC_POSTHOG_HOST
+ENV NEXT_PUBLIC_COMMIT_SHA=docker-build
 ENV PORT=3000
 
-# Generate git commit hash for build info (fallback if not available)
-RUN echo "NEXT_PUBLIC_COMMIT_SHA=docker-build" > .env.local
-
 # Build the application
 RUN pnpm build
 

GITHUB_ACTIONS.md

@@ -1,68 +0,0 @@
-# GitHub Actions Docker Publishing Setup
-
-This repository includes a GitHub Actions workflow that automatically builds and publishes Docker images to GitHub Container Registry (GHCR).
-
-## Workflow Overview
-
-The workflow (`/.github/workflows/publish-docker.yml`) automatically:
-
-1. **Builds** the Docker image using multi-platform support (AMD64 and ARM64)
-2. **Publishes** to `ghcr.io/sillyangel/mice`
-3. **Tags** images appropriately based on git refs
-4. **Caches** layers for faster subsequent builds
-5. **Generates** build provenance attestations for security
-
-## Trigger Conditions
-
-The workflow runs on:
-
-- **Push to main/master branch** → Creates `latest` tag
-- **Push tags** (e.g., `2025.07.02`) → Creates date-based version tags
-- **Pull requests** → Creates PR-specific tags for testing
-- **Manual dispatch** → Can be triggered manually from GitHub UI
-
-## Image Tags Generated
-
-Based on different triggers, the workflow creates these tags:
-
-### Main Branch Push
-
-- `ghcr.io/sillyangel/mice:latest`
-
-### Tag Push (e.g., `2025.07.02`)
-
-- `ghcr.io/sillyangel/mice:2025.07.02`
-- `ghcr.io/sillyangel/mice:latest`
-
-### Pull Request
-
-- `ghcr.io/sillyangel/mice:pr-123`
-
-## Multi-Platform Support
-
-The workflow builds for multiple architectures:
-
-- `linux/amd64` (Intel/AMD 64-bit)
-- `linux/arm64` (ARM 64-bit, Apple Silicon, etc.)
-
-## Usage After Setup
-
-Once the workflow is set up:
-
-1. **Push to main** → New `latest` image published
-2. **Create a release** → Versioned images published
-3. **Users can pull**: `docker pull ghcr.io/sillyangel/mice:latest`
-
-## Manual Image Building
-
-You can also build and push manually:
-
-```bash
-# Build for multiple platforms
-docker buildx build --platform linux/amd64,linux/arm64 \
-  -t ghcr.io/sillyangel/mice:latest \
-  --push .
-
-# Login first (if needed)
-echo $GITHUB_TOKEN | docker login ghcr.io -u USERNAME --password-stdin
-```

README.md

@@ -1,63 +1,80 @@
-![splash](https://github.com/sillyangel/mice/blob/main/4xnored.png?raw=true)
-# mice (project still reworked)
-> project still, now with navidrome
+<p align="center">
+  <img src="https://github.com/sillyangel/mice/blob/main/public/icon-512.png?raw=true" alt="Mice Logo" width="120" />
+</p>
+<h1 align="center"><strong>Mice | Navidrome Client</strong></h1>
 
-> project based on [shadcn/ui](https://github.com/shadcn-ui/ui)'s music template
+> Project based on [shadcn/ui](https://github.com/shadcn-ui/ui)'s music template.
 
-This is a modern music streaming web application built with [Next.js](https://nextjs.org/) and [shadcn/ui](https://ui.shadcn.com/), now powered by **Navidrome** for a complete self-hosted music streaming experience.
+<!-- this looks like "ai" lol but its not -->
 
-**✨ New**: Migrated from Firebase + static data to **Navidrome/Subsonic** integration for real music streaming!
+This is a "Modern" Navidrome (or Subsonic) client built with [Next.js](https://nextjs.org/) and [shadcn/ui](https://ui.shadcn.com/). It creates a beautiful, responsive music streaming web application that connects to your Navidrome server, and fully able to self-host using docker!
 
-### Features
+## Features
 
-- 🎵 **Real Music Streaming** via Navidrome/Subsonic API
-- 📱 **Modern UI** with shadcn/ui components
-- 🎨 **Dynamic Album Artwork** from your music library
-- ⭐ **Favorites** - Star albums, artists, and songs
-- 📋 **Playlist Management** - Create and manage playlists
-- 🔍 **Search** - Find music across your entire library
-- 🎧 **Audio Player** with queue management
-- 📊 **Scrobbling** - Track your listening history
+- **Real Music Streaming** via Navidrome/Subsonic API
+- **Modern UI** with shadcn/ui components
+- **Dynamic Album Artwork** from your music library
+- **Favorites** - Star albums, artists, and songs
+- **Search** - Find music across your entire library
+- **Audio Player** with queue management
+- **Scrobbling** - Track your listening history
+<!-- - **Playlist Management** - Create and manage playlists -->
 
 ### Preview
-![preview](https://github.com/sillyangel/mice/blob/main/public/screen.png?raw=true)
+![preview](https://github.com/sillyangel/mice/blob/main/public/home-preview.png?raw=true)
 
 ## Quick Start
 
 ### Prerequisites
 - [Navidrome](https://www.navidrome.org/) server running
-- Node.js 18+ and pnpm
+- Node.js 18+
 
 ### Setup
 
-1. **Clone and install**
+1. **Clone and install the required dependencies**
 
 ```bash
-git clone https://github.com/sillyangel/project-still.git
-cd project-still/
+git clone https://github.com/sillyangel/mice.git
+cd mice/
 pnpm install
+
+# or npm
+npm install
 ```
 
-2. **Configure Navidrome connection**
+## 2. **Configure the Navidrome connection**
+
+First, copy the example environment file:  
 
 ```bash
 cp .env.example .env
 ```
 
-Edit `.env` with your Navidrome server details:
+Next, open the new `.env` file and update it with your Navidrome server credentials:  
 
 ```env
 NEXT_PUBLIC_NAVIDROME_URL=http://localhost:4533
 NEXT_PUBLIC_NAVIDROME_USERNAME=your_username
 NEXT_PUBLIC_NAVIDROME_PASSWORD=your_password
-NEXT_PUBLIC_POSTHOG_KEY=phc_XXXXXXXXXXXXXXXXXX
-NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
+```
+
+> **Tip:** If you don’t have your own Navidrome server yet, you can use the public demo credentials:  
+
+```env
+NEXT_PUBLIC_NAVIDROME_URL=https://demo.navidrome.org
+NEXT_PUBLIC_NAVIDROME_USERNAME=demo
+NEXT_PUBLIC_NAVIDROME_PASSWORD=demo
 ```
 
 3. **Run the development server**
 
 ```bash
 pnpm dev
+
+# or npm
+
+npm run dev
+
 ```
 
 Open [http://localhost:40625](http://localhost:40625) in your browser.
@@ -70,7 +87,7 @@ For easy deployment using Docker:
 
 ```bash
 # Run using pre-built image (app will prompt for Navidrome configuration)
-docker run -p 3000:3000 ghcr.io/sillyangel/mice:latest
+docker run -p 3000:3000 sillyangel/mice:latest
 
 # Or build locally
 docker build -t mice .
@@ -93,14 +110,10 @@ docker run -p 3000:3000 \
   -e NEXT_PUBLIC_NAVIDROME_URL=http://your-navidrome-server:4533 \
   -e NEXT_PUBLIC_NAVIDROME_USERNAME=your_username \
   -e NEXT_PUBLIC_NAVIDROME_PASSWORD=your_password \
-  ghcr.io/sillyangel/mice:latest
+  sillyangel/mice:latest
 ```
 
-📖 **For detailed Docker configuration, environment variables, troubleshooting, and advanced setups, see [DOCKER.md](./DOCKER.md)**
-
-## Migration from Firebase
-
-This project was migrated from Firebase to Navidrome. See [NAVIDROME_MIGRATION.md](./NAVIDROME_MIGRATION.md) for detailed migration notes and troubleshooting.
+ **For detailed Docker configuration, environment variables, troubleshooting, and advanced setups, see [DOCKER.md](./docs/DOCKER.md)**
 
 ## Tech Stack
 
@@ -110,14 +123,6 @@ This project was migrated from Firebase to Navidrome. See [NAVIDROME_MIGRATION.m
 - **Audio**: Web Audio API with streaming
 - **State**: React Context for global state management
 
-## Contributing
-
-1. Fork the repository
-2. Create a feature branch
-3. Make your changes
-4. Test with your Navidrome server
-5. Submit a pull request
-
 ## License
 
 This project is licensed under the MIT License.

app/album/[id]/page.tsx

@@ -4,14 +4,15 @@ import { useParams } from 'next/navigation';
 import Image from 'next/image';
 import { Album, Song } from '@/lib/navidrome';
 import { useNavidrome } from '@/app/components/NavidromeContext';
-import { Play, Heart } from 'lucide-react';
+import { Play, Heart, Shuffle } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import Link from 'next/link';
 import { useAudioPlayer } from '@/app/components/AudioPlayerContext'
 import Loading from "@/app/components/loading";
 import { Separator } from '@/components/ui/separator';
-import { ScrollArea } from '@/components/ui/scroll-area';
 import { getNavidromeAPI } from '@/lib/navidrome';
+import { useFavoriteAlbums } from '@/hooks/use-favorite-albums';
+import { useIsMobile } from '@/hooks/use-mobile';
 
 export default function AlbumPage() {
   const { id } = useParams();
@@ -22,6 +23,8 @@ export default function AlbumPage() {
   const [starredSongs, setStarredSongs] = useState<Set<string>>(new Set());
   const { getAlbum, starItem, unstarItem } = useNavidrome();
   const { playTrack, addAlbumToQueue, playAlbum, playAlbumFromTrack, currentTrack } = useAudioPlayer();
+  const { isFavoriteAlbum, toggleFavoriteAlbum } = useFavoriteAlbums();
+  const isMobile = useIsMobile();
   const api = getNavidromeAPI();
 
   useEffect(() => {
@@ -108,6 +111,19 @@ export default function AlbumPage() {
     }
   };
 
+  const handleShuffleAlbum = async (): Promise<void> => {
+    if (!album || !tracklist.length) return;
+    
+    try {
+      // Shuffle the tracklist
+      const shuffled = [...tracklist].sort(() => Math.random() - 0.5);
+      // Play the first shuffled track
+      await playAlbumFromTrack(album.id, shuffled[0].id);
+    } catch (error) {
+      console.error('Failed to shuffle album:', error);
+    }
+  };
+
   const isCurrentlyPlaying = (song: Song): boolean => {
     return currentTrack?.id === song.id;
   };
@@ -117,110 +133,176 @@ export default function AlbumPage() {
     const seconds = duration % 60;
     return `${minutes}:${seconds.toString().padStart(2, '0')}`;
   };
-  // Get cover art URL with proper fallback
-  const coverArtUrl = album.coverArt && api
-    ? api.getCoverArtUrl(album.coverArt, 300)
-    : '/default-user.jpg';
+
+  // Dynamic cover art URLs based on image size
+  const getMobileCoverArtUrl = () => {
+    return album.coverArt && api
+      ? api.getCoverArtUrl(album.coverArt, 300)
+      : '/default-user.jpg';
+  };
+
+  const getDesktopCoverArtUrl = () => {
+    return album.coverArt && api
+      ? api.getCoverArtUrl(album.coverArt, 300)
+      : '/default-user.jpg';
+  };
 
   return (
     <>
     <div className="h-full px-4 py-6 lg:px-8">
       <div className="space-y-4">
-        <div className="flex items-start gap-6">
-          <Image 
-            src={coverArtUrl} 
-            alt={album.name} 
-            width={300} 
-            height={300}
-            className="rounded-md"
-          />
-          <div className="space-y-2">
-            <div className="flex items-center space-x-4">
-              <p className="text-3xl font-semibold tracking-tight">{album.name}</p>
-              <Button onClick={handleStar} variant="ghost">
-                <Heart className={isStarred ? 'text-primary' : 'text-gray-500'} fill={isStarred ? 'var(--primary)' : ""}/>
-              </Button>
+        {isMobile ? (
+          /* Mobile Layout */
+          <div className="space-y-6">
+            {/* Album Cover - Centered */}
+            <div className="flex justify-center">
+              <Image 
+                src={getMobileCoverArtUrl()} 
+                alt={album.name} 
+                width={300} 
+                height={300}
+                className="rounded-md shadow-lg"
+              />
             </div>
-            <Link href={`/artist/${album.artistId}`}>
-              <p className="text-xl text-primary mt-0 mb-4 underline">{album.artist}</p>
-            </Link>
-            <Button className="px-5" onClick={() => playAlbum(album.id)}>
-              <Play />
-              Play Album
-            </Button>
-            <div className="text-sm text-muted-foreground">
-              <p>{album.songCount} songs • {album.year} • {album.genre}</p>
-              <p>Duration: {formatDuration(album.duration)}</p>
+            
+            {/* Album Info and Controls */}
+            <div className="flex justify-between items-start gap-4">
+              {/* Left side - Album Info */}
+              <div className="flex-1 space-y-1">
+                <h1 className="text-2xl font-bold text-left">{album.name}</h1>
+                <Link href={`/artist/${album.artistId}`}>
+                  <p className="text-lg text-primary underline text-left">{album.artist}</p>
+                </Link>
+                <p className="text-sm text-muted-foreground text-left">{album.genre} • {album.year}</p>
+                <p className="text-sm text-muted-foreground text-left">{album.songCount} songs, {formatDuration(album.duration)}</p>
+              </div>
+              
+              {/* Right side - Controls */}
+              <div className="flex flex-col items-center gap-3">
+                <Button 
+                  className="w-12 h-12 rounded-full p-0" 
+                  onClick={() => playAlbum(album.id)}
+                  title="Play Album"
+                >
+                  <Play className="w-6 h-6" />
+                </Button>
+                <Button 
+                  variant="outline"
+                  className="w-12 h-12 rounded-full p-0" 
+                  onClick={handleShuffleAlbum}
+                  title="Shuffle Album"
+                >
+                  <Shuffle className="w-5 h-5" />
+                </Button>
+              </div>
             </div>
           </div>
-        </div>
+        ) : (
+          /* Desktop Layout */
+          <div className="flex items-start gap-6">
+            <Image 
+              src={getDesktopCoverArtUrl()} 
+              alt={album.name} 
+              width={300} 
+              height={300}
+              className="rounded-md"
+            />
+            <div className="space-y-2">
+              <div className="flex items-center space-x-4">
+                <p className="text-3xl font-semibold tracking-tight">{album.name}</p>
+                <Button onClick={handleStar} variant="ghost" title={isStarred ? "Unstar album" : "Star album"}>
+                  <Heart className={isStarred ? 'text-primary' : 'text-gray-500'} fill={isStarred ? 'var(--primary)' : ""}/>
+                </Button>
+              </div>
+              <Link href={`/artist/${album.artistId}`}>
+                <p className="text-xl text-primary mt-0 mb-4 underline">{album.artist}</p>
+              </Link>
+              
+              {/* Controls row */}
+              <div className="flex items-center gap-3">
+                <Button className="px-5" onClick={() => playAlbum(album.id)}>
+                  <Play className="w-4 h-4 mr-2" />
+                  Play
+                </Button>
+                <Button variant="outline" className="px-5" onClick={handleShuffleAlbum}>
+                  <Shuffle className="w-4 h-4 mr-2" />
+                  Shuffle
+                </Button>
+              </div>
+              
+              {/* Album info */}
+              <div className="text-sm text-muted-foreground">
+                <p>{album.genre} • {album.year}</p>
+                <p>{album.songCount} songs, {formatDuration(album.duration)}</p>
+              </div>
+            </div>
+          </div>
+        )}
         <div className="space-y-4">
           <Separator />
           
-          <ScrollArea className="h-[calc(100vh-500px)]">
-            {tracklist.length === 0 ? (
-              <div className="text-center py-12">
-                <p className="text-muted-foreground">No tracks available.</p>
-              </div>
-            ) : (
-              <div className="space-y-1">
-                {tracklist.map((song, index) => (
-                  <div
-                    key={song.id}
-                    className={`group flex items-center p-3 rounded-lg hover:bg-accent/50 cursor-pointer transition-colors`}
-                    onClick={() => handlePlayClick(song)}
-                  >
-                    {/* Track Number / Play Indicator */}
-                    <div className="w-8 text-center text-sm text-muted-foreground mr-3">
-                        <>
-                          <span className="group-hover:hidden">{song.track || index + 1}</span>
-                          <Play className="w-4 h-4 mx-auto hidden group-hover:block" />
-                        </>
-                    </div>
+          {tracklist.length === 0 ? (
+            <div className="text-center py-12">
+              <p className="text-muted-foreground">No tracks available.</p>
+            </div>
+          ) : (
+            <div className="space-y-1 pb-32">
+              {tracklist.map((song, index) => (
+                <div
+                  key={song.id}
+                  className={`group flex items-center p-3 rounded-lg hover:bg-accent/50 cursor-pointer transition-colors`}
+                  onClick={() => handlePlayClick(song)}
+                >
+                  {/* Track Number / Play Indicator */}
+                  <div className="w-8 text-center text-sm text-muted-foreground mr-3">
+                      <>
+                        <span className="group-hover:hidden">{song.track || index + 1}</span>
+                        <Play className="w-4 h-4 mx-auto hidden group-hover:block" />
+                      </>
+                  </div>
 
-                    {/* Song Info */}
-                    <div className="flex-1 min-w-0 mr-4">
-                      <div className="flex items-center gap-2 mb-1">
-                        <p className={`font-semibold truncate ${
-                          isCurrentlyPlaying(song) ? 'text-primary' : ''
-                        }`}>
-                          {song.title}
-                        </p>
+                  {/* Song Info */}
+                  <div className="flex-1 min-w-0 mr-4">
+                    <div className="flex items-center gap-2 mb-1">
+                      <p className={`font-semibold truncate ${
+                        isCurrentlyPlaying(song) ? 'text-primary' : ''
+                      }`}>
+                        {song.title}
+                      </p>
+                    </div>
+                    <div className="flex items-center text-sm text-muted-foreground">
+                      <div className="flex items-center gap-1">
+                        <span className="truncate">{song.artist}</span>
                       </div>
-                      <div className="flex items-center text-sm text-muted-foreground">
-                        <div className="flex items-center gap-1">
-                          <span className="truncate">{song.artist}</span>
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* Duration */}
-                    <div className="flex items-center text-sm text-muted-foreground mr-4">
-                      {formatDuration(song.duration)}
-                    </div>
-
-                    {/* Actions */}
-                    <div className="flex items-center space-x-2 group-hover:opacity-100 transition-opacity">
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          handleSongStar(song);
-                        }}
-                        className="h-8 w-8 p-0"
-                      >
-                        <Heart 
-                          className={`w-4 h-4 ${starredSongs.has(song.id) ? 'text-primary' : 'text-gray-500'}`}
-                          fill={starredSongs.has(song.id) ? 'var(--primary)' : 'none'}
-                        />
-                      </Button>
                     </div>
                   </div>
-                ))}
-              </div>
-            )}
-          </ScrollArea>
+
+                  {/* Duration */}
+                  <div className="flex items-center text-sm text-muted-foreground mr-4">
+                    {formatDuration(song.duration)}
+                  </div>
+
+                  {/* Actions */}
+                  <div className="flex items-center space-x-2 group-hover:opacity-100 transition-opacity">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleSongStar(song);
+                      }}
+                      className="h-8 w-8 p-0"
+                    >
+                      <Heart 
+                        className={`w-4 h-4 ${starredSongs.has(song.id) ? 'text-primary' : 'text-gray-500'}`}
+                        fill={starredSongs.has(song.id) ? 'var(--primary)' : 'none'}
+                      />
+                    </Button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
         </div>
       </div>
     </div>

app/artist/[artist]/page.tsx

@@ -15,6 +15,7 @@ import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
 import Loading from '@/app/components/loading';
 import { getNavidromeAPI } from '@/lib/navidrome';
 import { useToast } from '@/hooks/use-toast';
+import { useIsMobile } from '@/hooks/use-mobile';
 
 export default function ArtistPage() {
   const { artist: artistId } = useParams();
@@ -27,6 +28,7 @@ export default function ArtistPage() {
   const { getArtist, starItem, unstarItem } = useNavidrome();
   const { playArtist } = useAudioPlayer();
   const { toast } = useToast();
+  const isMobile = useIsMobile();
   const api = getNavidromeAPI();
 
   useEffect(() => {
@@ -103,7 +105,7 @@ export default function ArtistPage() {
   }
   // Get artist image URL with proper fallback
   const artistImageUrl = artist.coverArt && api
-    ? api.getCoverArtUrl(artist.coverArt, 300)
+    ? api.getCoverArtUrl(artist.coverArt, 1200)
     : '/default-user.jpg';
 
   return (
@@ -152,7 +154,7 @@ export default function ArtistPage() {
         <ArtistBio artistName={artist.name} />
         
         {/* Popular Songs Section */}
-        {popularSongs.length > 0 && (
+        {!isMobile && popularSongs.length > 0 && (
           <PopularSongs songs={popularSongs} artistName={artist.name} />
         )}
 

app/browse/page.tsx

@@ -1,105 +1,70 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
 import { Separator } from '@/components/ui/separator';
 import { Button } from '@/components/ui/button';
-import { Tabs, TabsContent } from '@/components/ui/tabs';
 import { AlbumArtwork } from '@/app/components/album-artwork';
 import { ArtistIcon } from '@/app/components/artist-icon';
 import { useNavidrome } from '@/app/components/NavidromeContext';
-import { getNavidromeAPI, Album } from '@/lib/navidrome';
 import { useAudioPlayer } from '@/app/components/AudioPlayerContext';
-import { Shuffle } from 'lucide-react';
+import { useProgressiveAlbumLoading } from '@/hooks/use-progressive-album-loading';
+import { 
+  Shuffle, 
+  ArrowDown, 
+  RefreshCcw,
+  Loader2
+} from 'lucide-react';
 import Loading from '@/app/components/loading';
+import { useInView } from 'react-intersection-observer';
 
 export default function BrowsePage() {
-  const { artists, isLoading: contextLoading } = useNavidrome();
+  const { artists: allArtists, isLoading: contextLoading } = useNavidrome();
+  // Filter to only show album artists (artists with at least one album)
+  const artists = allArtists.filter(artist => artist.albumCount && artist.albumCount > 0);
   const { shuffleAllAlbums } = useAudioPlayer();
-  const [albums, setAlbums] = useState<Album[]>([]);
-  const [currentPage, setCurrentPage] = useState(0);
-  const [isLoadingAlbums, setIsLoadingAlbums] = useState(false);
-  const [hasMoreAlbums, setHasMoreAlbums] = useState(true);
-  const albumsPerPage = 84;
-
-  const api = getNavidromeAPI();
-  const loadAlbums = async (page: number, append: boolean = false) => {
-    if (!api) {
-      console.error('Navidrome API not available');
-      return;
-    }
-    
-    try {
-      setIsLoadingAlbums(true);
-      const offset = page * albumsPerPage;
-      
-      // Use alphabeticalByName to get all albums in alphabetical order
-      const newAlbums = await api.getAlbums('alphabeticalByName', albumsPerPage, offset);
-      
-      if (append) {
-        setAlbums(prev => [...prev, ...newAlbums]);
-      } else {
-        setAlbums(newAlbums);
-      }
-      
-      // If we got fewer albums than requested, we've reached the end
-      setHasMoreAlbums(newAlbums.length === albumsPerPage);
-    } catch (error) {
-      console.error('Failed to load albums:', error);
-    } finally {
-      setIsLoadingAlbums(false);
-    }
-  };
-
+  
+  // Use our progressive loading hook
+  const { 
+    albums, 
+    isLoading, 
+    hasMore, 
+    loadMoreAlbums, 
+    refreshAlbums
+  } = useProgressiveAlbumLoading('alphabeticalByName');
+  
+  // Infinite scroll with intersection observer
+  const { ref, inView } = useInView({
+    threshold: 0.1,
+    triggerOnce: false
+  });
+  
+  // Load more albums when the load more sentinel comes into view
   useEffect(() => {
-    loadAlbums(0);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // Infinite scroll handler
-  useEffect(() => {
-    const handleScroll = (e: Event) => {
-      const target = e.target as HTMLElement;
-      if (!target || isLoadingAlbums || !hasMoreAlbums) return;
-      
-      const { scrollTop, scrollHeight, clientHeight } = target;
-      const threshold = 200; // Load more when 200px from bottom
-      
-      if (scrollHeight - scrollTop - clientHeight < threshold) {
-        loadMore();
-      }
-    };
-
-    const scrollArea = document.querySelector('[data-radix-scroll-area-viewport]');
-    if (scrollArea) {
-      scrollArea.addEventListener('scroll', handleScroll);
-      return () => scrollArea.removeEventListener('scroll', handleScroll);
+    if (inView && hasMore && !isLoading) {
+      loadMoreAlbums();
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isLoadingAlbums, hasMoreAlbums, currentPage]);
-
-  const loadMore = () => {
-    if (isLoadingAlbums || !hasMoreAlbums) return;
-    const nextPage = currentPage + 1;
-    setCurrentPage(nextPage);
-    loadAlbums(nextPage, true);
-  };
+  }, [inView, hasMore, isLoading, loadMoreAlbums]);
+  
+  // Pull-to-refresh simulation
+  const handleRefresh = useCallback(() => {
+    refreshAlbums();
+  }, [refreshAlbums]);
 
   if (contextLoading) {
     return <Loading />;
   }
 
   return (
-    <div className="h-full px-4 py-6 lg:px-8">
-    <>
-      <Tabs defaultValue="music" className="h-full flex flex-col space-y-6">
-        <TabsContent value="music" className="border-none p-0 outline-none flex flex-col flex-grow">
-        
-        <div className="flex items-center justify-between">
-            <div className="space-y-1">
-              <p className="text-2xl font-semibold tracking-tight">
-                Artists
+    <div className="p-6 pb-24 w-full">
+      <div className="space-y-2">
+        <div className="h-full flex flex-col space-y-6">
+          <div className="border-none p-0 outline-hidden flex flex-col grow">
+          
+          <div className="flex items-center justify-between">
+              <div className="space-y-1">
+              <p className="text-3xl font-semibold tracking-tight">
+                Browse Artists
               </p>
               <p className="text-sm text-muted-foreground">
                 the people who make the music
@@ -111,16 +76,17 @@ export default function BrowsePage() {
             </Button>
           </div>
           <Separator className="my-4" />
-          <div className="relative flex-grow">
+          <div className="relative grow">
             <div className="relative">
             <ScrollArea>
             <div className="flex space-x-4 pb-4">
-            {artists.map((artist) => (
+            {artists.map((artist, index) => (
                   <ArtistIcon
                     key={artist.id}
                     artist={artist}
-                    className="flex-shrink-0 overflow-hidden"
+                    className="shrink-0 overflow-hidden"
                     size={190}
+                    loading={index < 10 ? 'eager' : 'lazy'}
                   />
                 ))}
               </div>
@@ -130,20 +96,24 @@ export default function BrowsePage() {
           </div>
           <div className="flex items-center justify-between">
             <div className="space-y-1">
-              <p className="text-2xl font-semibold tracking-tight">
+              <p className="text-3xl font-semibold tracking-tight">
                 Browse Albums
               </p>
               <p className="text-sm text-muted-foreground">
                 Browse the full collection of albums ({albums.length} loaded).
               </p>
             </div>
+            <Button onClick={handleRefresh} variant="outline" size="sm">
+              <RefreshCcw className="w-4 h-4 mr-2" />
+              Refresh
+            </Button>
           </div>
           <Separator className="my-4" />
-          <div className="relative flex-grow">
+          <div className="relative grow">
             <ScrollArea className="h-full">
               <div className="h-full overflow-y-auto">
                 <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 gap-4 p-4 pb-8">
-                  {albums.map((album) => (
+                  {albums.map((album, index) => (
                     <AlbumArtwork
                       key={album.id}
                       album={album}
@@ -151,34 +121,58 @@ export default function BrowsePage() {
                       aspectRatio="square"
                       width={200}
                       height={200}
+                      loading={index < 20 ? 'eager' : 'lazy'}
                     />
                   ))}
                 </div>
-                {hasMoreAlbums && (
-                  <div className="flex justify-center p-4 pb-24">
+                {/* Load more sentinel */}
+                {hasMore && (
+                  <div 
+                    ref={ref} 
+                    className="flex justify-center p-4 pb-24"
+                  >
                     <Button 
-                      onClick={loadMore} 
-                      disabled={isLoadingAlbums}
-                      variant="outline"
+                      onClick={loadMoreAlbums} 
+                      disabled={isLoading}
+                      variant="ghost"
+                      className="flex flex-col items-center gap-2"
                     >
-                      {isLoadingAlbums ? 'Loading...' : `Load More Albums (${albumsPerPage} more)`}
+                      {isLoading ? (
+                        <Loader2 className="h-6 w-6 animate-spin" />
+                      ) : (
+                        <ArrowDown className="h-6 w-6" />
+                      )}
+                      <span className="text-sm">
+                        {isLoading ? 'Loading...' : 'Load More Albums'}
+                      </span>
                     </Button>
                   </div>
                 )}
-                {!hasMoreAlbums && albums.length > 0 && (
+                
+                {!hasMore && albums.length > 0 && (
                   <div className="flex justify-center p-4 pb-24">
                     <p className="text-sm text-muted-foreground">
                       All albums loaded ({albums.length} total)
                     </p>
                   </div>
                 )}
+                
+                {albums.length === 0 && !isLoading && (
+                  <div className="flex flex-col items-center justify-center p-12">
+                    <p className="text-lg font-medium mb-2">No albums found</p>
+                    <p className="text-sm text-muted-foreground mb-4">
+                      Try refreshing or check your connection
+                    </p>
+                    <Button onClick={handleRefresh}>Refresh</Button>
+                  </div>
+                )}
               </div>
               <ScrollBar orientation="vertical" />
             </ScrollArea>
           </div>
-        </TabsContent>
-      </Tabs>
-    </>
+        </div>
+      </div>
+      </div>
     </div>
   );
 }

app/components/AudioPlayerContext.tsx

@@ -1,9 +1,10 @@
 'use client';
 
-import React, { createContext, useContext, useState, useEffect, useMemo, useCallback } from 'react';
-import { Song, Album, Artist } from '@/lib/navidrome';
+import React, { createContext, useContext, useState, useEffect, useMemo, useCallback, useRef } from 'react';
+import { Song } from '@/lib/navidrome';
 import { getNavidromeAPI } from '@/lib/navidrome';
 import { useToast } from "@/hooks/use-toast";
+import { AudioEffects } from '@/lib/audio-effects';
 
 export interface Track {
   id: string;
@@ -15,8 +16,16 @@ export interface Track {
   coverArt?: string;
   albumId: string;
   artistId: string;
-  autoPlay?: boolean; // Flag to control auto-play
-  starred?: boolean; // Flag for starred/favorited tracks
+  autoPlay?: boolean;
+  starred?: boolean;
+  replayGain?: number; // Added ReplayGain field
+}
+
+interface AudioSettings {
+  crossfadeDuration: number;
+  equalizer: string;
+  replayGainEnabled: boolean;
+  gaplessPlayback: boolean;
 }
 
 interface AudioPlayerContextProps {
@@ -24,12 +33,14 @@ interface AudioPlayerContextProps {
   playTrack: (track: Track, autoPlay?: boolean) => void;
   queue: Track[];
   addToQueue: (track: Track) => void;
+  insertAtBeginningOfQueue: (track: Track) => void;
   playNextTrack: () => void;
   clearQueue: () => void;
   addAlbumToQueue: (albumId: string) => Promise<void>;
   playAlbum: (albumId: string) => Promise<void>;
   playAlbumFromTrack: (albumId: string, startingSongId: string) => Promise<void>;
   removeTrackFromQueue: (index: number) => void;
+  reorderQueue: (oldIndex: number, newIndex: number) => void;
   skipToTrackInQueue: (index: number) => void;
   addArtistToQueue: (artistId: string) => Promise<void>;
   playPreviousTrack: () => void;
@@ -42,18 +53,47 @@ interface AudioPlayerContextProps {
   clearHistory: () => void;
   toggleCurrentTrackStar: () => Promise<void>;
   updateTrackStarred: (trackId: string, starred: boolean) => void;
+  // Audio settings
+  audioSettings: AudioSettings;
+  updateAudioSettings: (settings: Partial<AudioSettings>) => void;
+  equalizerPreset: string;
+  setEqualizerPreset: (preset: string) => void;
+  audioEffects: AudioEffects | null;
+  // Playback state
+  isPlaying: boolean;
+  togglePlayPause: () => Promise<void>;
 }
 
 const AudioPlayerContext = createContext<AudioPlayerContextProps | undefined>(undefined);
 
+export // Default audio settings
+const DEFAULT_AUDIO_SETTINGS: AudioSettings = {
+  crossfadeDuration: 3,
+  equalizer: 'normal',
+  replayGainEnabled: true,
+  gaplessPlayback: true
+};
+
 export const AudioPlayerProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [currentTrack, setCurrentTrack] = useState<Track | null>(null);
   const [queue, setQueue] = useState<Track[]>([]);
   const [playedTracks, setPlayedTracks] = useState<Track[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [shuffle, setShuffle] = useState(false);
+  const [audioSettings, setAudioSettings] = useState<AudioSettings>(DEFAULT_AUDIO_SETTINGS);
+  const [equalizerPreset, setEqualizerPreset] = useState('normal');
+  const [audioEffects, setAudioEffects] = useState<AudioEffects | null>(null);
+  const audioRef = useRef<HTMLAudioElement | null>(null);
   const { toast } = useToast();
-  const api = useMemo(() => getNavidromeAPI(), []);
+  const api = useMemo(() => {
+    const navidromeApi = getNavidromeAPI();
+    if (!navidromeApi) {
+      console.warn('⚠️ Navidrome API not configured');
+    } else {
+      console.log('✅ Navidrome API initialized');
+    }
+    return navidromeApi;
+  }, []);
 
   useEffect(() => {
     const savedQueue = localStorage.getItem('navidrome-audioQueue');
@@ -75,8 +115,9 @@ export const AudioPlayerProvider: React.FC<{ children: React.ReactNode }> = ({ c
     if (savedCurrentTrack) {
       try {
         const track = JSON.parse(savedCurrentTrack);
-        // Clear autoPlay flag when loading from localStorage to prevent auto-play on refresh
-        track.autoPlay = false;
+        // Check if there's a saved playback position - if so, user was likely playing
+        const savedTime = localStorage.getItem('navidrome-current-track-time');
+        track.autoPlay = savedTime !== null && parseFloat(savedTime) > 0;
         setCurrentTrack(track);
       } catch (error) {
         console.error('Failed to parse saved current track:', error);
@@ -94,21 +135,93 @@ export const AudioPlayerProvider: React.FC<{ children: React.ReactNode }> = ({ c
     }
   }, [currentTrack]);
 
+  // Initialize audio effects when audio element is available
+  useEffect(() => {
+    const audioElement = audioRef.current;
+    if (audioElement && !audioEffects) {
+      const effects = new AudioEffects(audioElement);
+      setAudioEffects(effects);
+
+      // Load saved audio settings
+      const savedSettings = localStorage.getItem('navidrome-audio-settings');
+      if (savedSettings) {
+        try {
+          const settings = JSON.parse(savedSettings);
+          setAudioSettings(settings);
+          effects.setPreset(settings.equalizer);
+          setEqualizerPreset(settings.equalizer);
+        } catch (error) {
+          console.error('Failed to load audio settings:', error);
+        }
+      }
+
+      return () => {
+        effects.disconnect();
+      };
+    }
+  }, [audioEffects]);
+
+  // Save all audio-related settings
+  const saveSettings = useCallback(() => {
+    try {
+      // Save audio settings
+      localStorage.setItem('navidrome-audio-settings', JSON.stringify(audioSettings));
+      // Save equalizer preset
+      localStorage.setItem('navidrome-equalizer-preset', equalizerPreset);
+      // Save other playback settings
+      const playbackSettings = {
+        replayGainEnabled: audioSettings.replayGainEnabled,
+        gaplessPlayback: audioSettings.gaplessPlayback,
+        crossfadeDuration: audioSettings.crossfadeDuration,
+        volume: audioRef.current?.volume || 1,
+        lastPosition: audioRef.current?.currentTime || 0
+      };
+      localStorage.setItem('navidrome-playback-settings', JSON.stringify(playbackSettings));
+    } catch (error) {
+      console.error('Failed to save settings:', error);
+    }
+  }, [audioSettings, equalizerPreset]);
+
+  // Save settings whenever they change
+  useEffect(() => {
+    saveSettings();
+  }, [audioSettings, equalizerPreset, saveSettings]);
+
+  // Update equalizer when preset changes
+  useEffect(() => {
+    if (audioEffects) {
+      audioEffects.setPreset(equalizerPreset);
+    }
+  }, [equalizerPreset, audioEffects]);
+
+  const updateAudioSettings = useCallback((settings: Partial<AudioSettings>) => {
+    setAudioSettings(prev => {
+      const newSettings = { ...prev, ...settings };
+      localStorage.setItem('navidrome-audio-settings', JSON.stringify(newSettings));
+      return newSettings;
+    });
+  }, []);
+
   const songToTrack = useMemo(() => (song: Song): Track => {
     if (!api) {
       throw new Error('Navidrome API not configured');
     }
+    
+    const streamUrl = api.getStreamUrl(song.id);
+    console.log('🎵 Creating track with stream URL:', streamUrl);
+    
     return {
       id: song.id,
       name: song.title,
-      url: api.getStreamUrl(song.id),
+      url: streamUrl,
       artist: song.artist,
       album: song.album,
       duration: song.duration,
-      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 300) : undefined,
+      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 512) : undefined,
       albumId: song.albumId,
       artistId: song.artistId,
-      starred: !!song.starred
+      starred: !!song.starred,
+      replayGain: song.replayGain || 0 // Add ReplayGain support
     };
   }, [api]);
 
@@ -147,6 +260,10 @@ export const AudioPlayerProvider: React.FC<{ children: React.ReactNode }> = ({ c
     });
   }, [shuffle]);
 
+  const insertAtBeginningOfQueue = useCallback((track: Track) => {
+    setQueue((prevQueue) => [track, ...prevQueue]);
+  }, []);
+
   const clearQueue = useCallback(() => {
     setQueue([]);
   }, []);
@@ -155,6 +272,15 @@ export const AudioPlayerProvider: React.FC<{ children: React.ReactNode }> = ({ c
     setQueue((prevQueue) => prevQueue.filter((_, i) => i !== index));
   }, []);
 
+  const reorderQueue = useCallback((oldIndex: number, newIndex: number) => {
+    setQueue((prevQueue) => {
+      const newQueue = [...prevQueue];
+      const [movedItem] = newQueue.splice(oldIndex, 1);
+      newQueue.splice(newIndex, 0, movedItem);
+      return newQueue;
+    });
+  }, []);
+
   const playNextTrack = useCallback(() => {
     // Clear saved timestamp when changing tracks
     localStorage.removeItem('navidrome-current-track-time');
@@ -561,15 +687,43 @@ export const AudioPlayerProvider: React.FC<{ children: React.ReactNode }> = ({ c
       }
     }
   }, []);
+  // Track playback state
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  // Shared playback control function
+  const togglePlayPause = useCallback(async () => {
+    const audioElement = audioRef.current;
+    if (!audioElement || !currentTrack) return;
+
+    try {
+      if (isPlaying) {
+        audioElement.pause();
+        setIsPlaying(false);
+      } else {
+        await audioElement.play();
+        setIsPlaying(true);
+      }
+    } catch (error) {
+      console.error('Failed to toggle playback:', error);
+      toast({
+        variant: "destructive",
+        title: "Playback Error",
+        description: "Failed to control playback. Please try again.",
+      });
+    }
+  }, [currentTrack, isPlaying, toast]);
+
   const contextValue = useMemo(() => ({
     currentTrack, 
     playTrack, 
     queue, 
     addToQueue, 
+    insertAtBeginningOfQueue,
     playNextTrack, 
     clearQueue, 
     addAlbumToQueue, 
     removeTrackFromQueue, 
+    reorderQueue,
     addArtistToQueue, 
     playPreviousTrack,
     isLoading,
@@ -582,6 +736,15 @@ export const AudioPlayerProvider: React.FC<{ children: React.ReactNode }> = ({ c
     playArtist,
     playedTracks,
     clearHistory,
+    // Audio settings
+    audioSettings,
+    updateAudioSettings,
+    equalizerPreset,
+    setEqualizerPreset,
+    audioEffects,
+    // Playback state
+    isPlaying,
+    togglePlayPause,
     toggleCurrentTrackStar: async () => {
       if (!currentTrack || !api) {
         toast({
@@ -656,10 +819,12 @@ export const AudioPlayerProvider: React.FC<{ children: React.ReactNode }> = ({ c
     isLoading, 
     playTrack, 
     addToQueue, 
+    insertAtBeginningOfQueue,
     playNextTrack, 
     clearQueue, 
     addAlbumToQueue, 
     removeTrackFromQueue, 
+    reorderQueue,
     addArtistToQueue, 
     playPreviousTrack,
     playAlbum,
@@ -672,7 +837,14 @@ export const AudioPlayerProvider: React.FC<{ children: React.ReactNode }> = ({ c
     playedTracks,
     clearHistory,
     api,
-    toast
+    toast,
+    audioEffects,
+    audioSettings,
+    equalizerPreset,
+    updateAudioSettings,
+    setEqualizerPreset,
+    isPlaying,
+    togglePlayPause
   ]);
 
   return (

app/components/AudioSettingsDialog.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Slider } from "@/components/ui/slider";
+import { Switch } from "@/components/ui/switch";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { useAudioPlayer } from "./AudioPlayerContext";
+import { presets } from "@/lib/audio-effects";
+
+interface AudioSettingsDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function AudioSettingsDialog({ isOpen, onClose }: AudioSettingsDialogProps) {
+  const { 
+    audioSettings,
+    updateAudioSettings,
+    equalizerPreset,
+    setEqualizerPreset,
+  } = useAudioPlayer();
+
+  const handleCrossfadeChange = (value: number[]) => {
+    updateAudioSettings({ crossfadeDuration: value[0] });
+  };
+
+  const handleReplayGainToggle = (enabled: boolean) => {
+    updateAudioSettings({ replayGainEnabled: enabled });
+  };
+
+  const handleGaplessToggle = (enabled: boolean) => {
+    updateAudioSettings({ gaplessPlayback: enabled });
+  };
+
+  const handleEqualizerPresetChange = (preset: string) => {
+    setEqualizerPreset(preset);
+    updateAudioSettings({ equalizer: preset });
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Audio Settings</DialogTitle>
+          <DialogDescription>
+            Configure playback settings and audio effects
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-6">
+          {/* Crossfade */}
+          <div className="space-y-2">
+            <Label>Crossfade Duration ({audioSettings.crossfadeDuration}s)</Label>
+            <Slider
+              value={[audioSettings.crossfadeDuration]}
+              onValueChange={handleCrossfadeChange}
+              min={0}
+              max={5}
+              step={0.5}
+            />
+          </div>
+
+          {/* ReplayGain */}
+          <div className="flex items-center justify-between">
+            <Label>ReplayGain</Label>
+            <Switch
+              checked={audioSettings.replayGainEnabled}
+              onCheckedChange={handleReplayGainToggle}
+            />
+          </div>
+
+          {/* Gapless Playback */}
+          <div className="flex items-center justify-between">
+            <Label>Gapless Playback</Label>
+            <Switch
+              checked={audioSettings.gaplessPlayback}
+              onCheckedChange={handleGaplessToggle}
+            />
+          </div>
+
+          {/* Equalizer Presets */}
+          <div className="space-y-2">
+            <Label>Equalizer Preset</Label>
+            <div className="grid grid-cols-2 gap-2">
+              {Object.keys(presets).map((preset) => (
+                <Button
+                  key={preset}
+                  variant={preset === equalizerPreset ? "default" : "outline"}
+                  onClick={() => handleEqualizerPresetChange(preset)}
+                  className="w-full"
+                >
+                  {presets[preset].name}
+                </Button>
+              ))}
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

app/components/AutoTagContextMenu.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import React, { useState } from 'react';
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
+import { MusicIcon, TagIcon, InfoIcon } from 'lucide-react';
+import { AutoTaggingDialog } from './AutoTaggingDialog';
+
+interface AutoTagContextMenuProps {
+  children: React.ReactNode;
+  mode: 'track' | 'album' | 'artist';
+  itemId: string;
+  itemName: string;
+  artistName?: string;
+}
+
+export function AutoTagContextMenu({
+  children,
+  mode,
+  itemId,
+  itemName,
+  artistName
+}: AutoTagContextMenuProps) {
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+  return (
+    <>
+      <ContextMenu>
+        <ContextMenuTrigger asChild>
+          {children}
+        </ContextMenuTrigger>
+        <ContextMenuContent className="w-56">
+          <ContextMenuItem
+            onClick={() => setIsDialogOpen(true)}
+            className="cursor-pointer"
+          >
+            <TagIcon className="mr-2 h-4 w-4" />
+            Auto-Tag {mode === 'track' ? 'Track' : mode === 'album' ? 'Album' : 'Artist'}
+          </ContextMenuItem>
+          {mode === 'track' && (
+            <>
+              <ContextMenuSeparator />
+              <ContextMenuItem className="cursor-pointer">
+                <InfoIcon className="mr-2 h-4 w-4" />
+                View Track Details
+              </ContextMenuItem>
+              <ContextMenuItem className="cursor-pointer">
+                <MusicIcon className="mr-2 h-4 w-4" />
+                Edit Track Metadata
+              </ContextMenuItem>
+            </>
+          )}
+        </ContextMenuContent>
+      </ContextMenu>
+
+      <AutoTaggingDialog
+        isOpen={isDialogOpen}
+        onClose={() => setIsDialogOpen(false)}
+        mode={mode}
+        itemId={itemId}
+        itemName={itemName}
+        artistName={artistName}
+      />
+    </>
+  );
+}
+
+export default AutoTagContextMenu;

app/components/AutoTaggingDialog.tsx

@@ -0,0 +1,319 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/components/ui/tabs";
+import { Button } from "@/components/ui/button";
+import { Progress } from "@/components/ui/progress";
+import { useToast } from "@/hooks/use-toast";
+import { useAutoTagging, EnhancedTrackMetadata, EnhancedAlbumMetadata } from "@/hooks/use-auto-tagging";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { 
+  MusicIcon, 
+  AlbumIcon, 
+  UsersIcon, 
+  CheckCircle2Icon, 
+  XCircleIcon, 
+  AlertTriangleIcon, 
+  InfoIcon 
+} from 'lucide-react';
+import Image from 'next/image';
+
+interface AutoTaggingDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  mode: 'track' | 'album' | 'artist';
+  itemId: string;
+  itemName: string;
+  artistName?: string;
+}
+
+export const AutoTaggingDialog: React.FC<AutoTaggingDialogProps> = ({
+  isOpen,
+  onClose,
+  mode,
+  itemId,
+  itemName,
+  artistName
+}) => {
+  const isMobile = useIsMobile();
+  const { toast } = useToast();
+  const [confidenceThreshold, setConfidenceThreshold] = useState(70);
+  const [activeTab, setActiveTab] = useState<'tracks' | 'albums'>('tracks');
+  const [isApplying, setIsApplying] = useState(false);
+  const {
+    isProcessing,
+    progress,
+    enhancedTracks,
+    enhancedAlbums,
+    startAutoTagging,
+    applyEnhancedMetadata
+  } = useAutoTagging();
+
+  // Start auto-tagging when the dialog is opened
+  useEffect(() => {
+    if (isOpen && itemId && !isProcessing && progress === 0) {
+      // Wrap in try/catch to handle any errors that might occur during auto-tagging
+      try {
+        startAutoTagging(mode, itemId, confidenceThreshold);
+      } catch (error) {
+        console.error('Failed to start auto-tagging:', error);
+        toast({
+          title: "Auto-Tagging Error",
+          description: error instanceof Error ? error.message : "Failed to start auto-tagging",
+          variant: "destructive",
+        });
+        onClose();
+      }
+    }
+  }, [isOpen, itemId, mode, isProcessing, progress, startAutoTagging, confidenceThreshold, toast, onClose]);
+
+  // Set the active tab based on the mode
+  useEffect(() => {
+    if (mode === 'track') {
+      setActiveTab('tracks');
+    } else if (mode === 'album' || mode === 'artist') {
+      setActiveTab('albums');
+    }
+  }, [mode]);
+
+  const handleApplyMetadata = async () => {
+    try {
+      setIsApplying(true);
+      await applyEnhancedMetadata(
+        enhancedTracks.filter(track => track.status === 'matched' && track.confidence >= confidenceThreshold),
+        enhancedAlbums.filter(album => album.status === 'matched' && album.confidence >= confidenceThreshold)
+      );
+      onClose();
+    } catch (error) {
+      console.error('Failed to apply metadata:', error);
+      toast({
+        title: "Error",
+        description: "Failed to apply metadata",
+        variant: "destructive",
+      });
+    } finally {
+      setIsApplying(false);
+    }
+  };
+
+  // Get match statistics
+  const matchedTracks = enhancedTracks.filter(track => track.status === 'matched' && track.confidence >= confidenceThreshold).length;
+  const totalTracks = enhancedTracks.length;
+  const matchedAlbums = enhancedAlbums.filter(album => album.status === 'matched' && album.confidence >= confidenceThreshold).length;
+  const totalAlbums = enhancedAlbums.length;
+
+  const getStatusIcon = (status: 'pending' | 'matched' | 'failed' | 'applied', confidence: number) => {
+    if (status === 'pending') return <AlertTriangleIcon className="w-4 h-4 text-yellow-500" />;
+    if (status === 'failed') return <XCircleIcon className="w-4 h-4 text-red-500" />;
+    if (status === 'matched' && confidence >= confidenceThreshold) return <CheckCircle2Icon className="w-4 h-4 text-green-500" />;
+    if (status === 'matched' && confidence < confidenceThreshold) return <InfoIcon className="w-4 h-4 text-yellow-500" />;
+    if (status === 'applied') return <CheckCircle2Icon className="w-4 h-4 text-blue-500" />;
+    return null;
+  };
+
+  const getConfidenceColor = (confidence: number) => {
+    if (confidence >= 90) return 'bg-green-500';
+    if (confidence >= 70) return 'bg-green-400';
+    if (confidence >= 50) return 'bg-yellow-500';
+    return 'bg-red-500';
+  };
+
+  // Render the appropriate dialog/sheet based on mobile status
+  const DialogComponent = isMobile ? Sheet : Dialog;
+  const DialogContentComponent = isMobile ? SheetContent : DialogContent;
+  const DialogHeaderComponent = isMobile ? SheetHeader : DialogHeader;
+  const DialogTitleComponent = isMobile ? SheetTitle : DialogTitle;
+  const DialogDescriptionComponent = isMobile ? SheetDescription : DialogDescription;
+
+  return (
+    <DialogComponent open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContentComponent className={isMobile ? "p-0 pt-8" : "max-w-3xl max-h-[90vh] overflow-hidden flex flex-col"}>
+        <DialogHeaderComponent className={isMobile ? "p-6 pb-2" : ""}>
+          <DialogTitleComponent>
+            Auto-Tagging {mode === 'track' ? 'Track' : mode === 'album' ? 'Album' : 'Artist'}
+          </DialogTitleComponent>
+          <DialogDescriptionComponent>
+            {isProcessing ? (
+              `Analyzing ${mode === 'track' ? 'track' : mode === 'album' ? 'album' : 'artist'} "${itemName}"`
+            ) : (
+              `Found metadata for ${matchedTracks} of ${totalTracks} tracks${totalAlbums > 0 ? ` and ${matchedAlbums} of ${totalAlbums} albums` : ''}`
+            )}
+          </DialogDescriptionComponent>
+
+          {/* Progress bar */}
+          {(isProcessing || isApplying) && (
+            <div className="my-4">
+              <Progress value={progress} className="h-2" />
+              <p className="text-sm text-muted-foreground mt-2">
+                {isProcessing ? 'Analyzing metadata...' : 'Applying metadata...'}
+              </p>
+            </div>
+          )}
+        </DialogHeaderComponent>
+
+        {/* Tabs for tracks and albums */}
+        {!isProcessing && !isApplying && (
+          <div className={`flex-1 overflow-hidden flex flex-col ${isMobile ? "px-6" : ""}`}>
+            <Tabs value={activeTab} onValueChange={(value) => setActiveTab(value as 'tracks' | 'albums')} className="flex-1 flex flex-col">
+              <div className="flex justify-between items-center mb-2">
+                <TabsList>
+                  <TabsTrigger value="tracks" disabled={totalTracks === 0}>
+                    <MusicIcon className="w-4 h-4 mr-2" /> Tracks ({matchedTracks}/{totalTracks})
+                  </TabsTrigger>
+                  <TabsTrigger value="albums" disabled={totalAlbums === 0}>
+                    <AlbumIcon className="w-4 h-4 mr-2" /> Albums ({matchedAlbums}/{totalAlbums})
+                  </TabsTrigger>
+                </TabsList>
+
+                {/* Confidence threshold slider */}
+                <div className="flex items-center gap-2">
+                  <span className="text-xs text-muted-foreground whitespace-nowrap">Min. Confidence: {confidenceThreshold}%</span>
+                  <input
+                    type="range"
+                    min="0"
+                    max="100"
+                    value={confidenceThreshold}
+                    onChange={(e) => setConfidenceThreshold(parseInt(e.target.value))}
+                    className="w-24"
+                  />
+                </div>
+              </div>
+
+              {/* Tracks tab content */}
+              <TabsContent value="tracks" className="flex-1 overflow-auto data-[state=active]:flex flex-col">
+                <div className="rounded-md border">
+                  <div className="bg-muted p-2 grid grid-cols-12 gap-2 text-sm font-medium">
+                    <div className="col-span-1"></div>
+                    <div className="col-span-4">Title</div>
+                    <div className="col-span-3">Artist</div>
+                    <div className="col-span-2">Album</div>
+                    <div className="col-span-2 text-right">Confidence</div>
+                  </div>
+                  <div className="divide-y max-h-[50vh] overflow-auto">
+                    {enhancedTracks.map(track => (
+                      <div key={track.id} className="grid grid-cols-12 gap-2 p-2 items-center">
+                        <div className="col-span-1">
+                          {getStatusIcon(track.status, track.confidence)}
+                        </div>
+                        <div className="col-span-4 truncate">
+                          {track.title}
+                        </div>
+                        <div className="col-span-3 truncate">
+                          {track.artist}
+                        </div>
+                        <div className="col-span-2 truncate">
+                          {track.album}
+                        </div>
+                        <div className="col-span-2 flex justify-end items-center gap-2">
+                          <div className="h-2 w-10 rounded-full bg-gray-200">
+                            <div 
+                              className={`h-full rounded-full ${getConfidenceColor(track.confidence)}`} 
+                              style={{ width: `${track.confidence}%` }}
+                            />
+                          </div>
+                          <span className="text-xs">{track.confidence}%</span>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </TabsContent>
+
+              {/* Albums tab content */}
+              <TabsContent value="albums" className="flex-1 overflow-auto data-[state=active]:flex flex-col">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 max-h-[50vh] overflow-auto p-1">
+                  {enhancedAlbums.map(album => (
+                    <div key={album.id} className="border rounded-lg overflow-hidden">
+                      <div className="flex">
+                        {/* Album cover */}
+                        <div className="relative w-24 h-24">
+                          {album.coverArtUrl ? (
+                            <Image
+                              src={album.coverArtUrl}
+                              alt={album.name}
+                              fill
+                              className="object-cover"
+                            />
+                          ) : (
+                            <div className="w-full h-full bg-muted flex items-center justify-center">
+                              <AlbumIcon className="w-8 h-8 text-muted-foreground" />
+                            </div>
+                          )}
+                          {/* Status badge */}
+                          <div className="absolute top-1 left-1">
+                            {getStatusIcon(album.status, album.confidence)}
+                          </div>
+                        </div>
+                        {/* Album info */}
+                        <div className="flex-1 p-3">
+                          <h4 className="font-medium text-sm truncate">{album.name}</h4>
+                          <p className="text-xs text-muted-foreground truncate">{album.artist}</p>
+                          <div className="mt-2 flex items-center gap-2">
+                            <div className="h-2 w-10 rounded-full bg-gray-200">
+                              <div 
+                                className={`h-full rounded-full ${getConfidenceColor(album.confidence)}`} 
+                                style={{ width: `${album.confidence}%` }}
+                              />
+                            </div>
+                            <span className="text-xs">{album.confidence}%</span>
+                          </div>
+                          {album.year && (
+                            <p className="text-xs mt-1">Year: {album.year}</p>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </TabsContent>
+            </Tabs>
+          </div>
+        )}
+
+        <DialogFooter className={`${isMobile ? "p-6 pt-4" : "mt-4"}`}>
+          <div className="w-full flex flex-col md:flex-row justify-end gap-2">
+            <Button
+              variant="outline"
+              onClick={onClose}
+              disabled={isProcessing || isApplying}
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleApplyMetadata}
+              disabled={
+                isProcessing || 
+                isApplying || 
+                (matchedTracks === 0 && matchedAlbums === 0)
+              }
+            >
+              Apply Metadata
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContentComponent>
+    </DialogComponent>
+  );
+};
+
+export default AutoTaggingDialog;

app/components/AutoTaggingSettings.tsx

@@ -0,0 +1,221 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Switch } from '@/components/ui/switch';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Input } from '@/components/ui/input';
+import { FaTags } from 'react-icons/fa';
+import { useToast } from '@/hooks/use-toast';
+import { AutoTaggingDialog } from './AutoTaggingDialog';
+
+export const AutoTaggingSettings = () => {
+  const { toast } = useToast();
+  const [isClient, setIsClient] = useState(false);
+  const [autoTaggingEnabled, setAutoTaggingEnabled] = useState(false);
+  const [autoTagDialogOpen, setAutoTagDialogOpen] = useState(false);
+  const [selectedItem, setSelectedItem] = useState({
+    id: '',
+    name: 'Library',
+    mode: 'artist' as 'track' | 'album' | 'artist'
+  });
+  const [autoTagOptions, setAutoTagOptions] = useState({
+    rateLimit: 1000, // milliseconds between requests
+    autoProcess: false,
+    preferLocalMetadata: true,
+    tagsToUpdate: ['title', 'artist', 'album', 'year', 'genre'],
+  });
+
+  useEffect(() => {
+    setIsClient(true);
+    
+    // Load saved preferences from localStorage
+    const savedAutoTagging = localStorage.getItem('auto-tagging-enabled');
+    if (savedAutoTagging !== null) {
+      setAutoTaggingEnabled(savedAutoTagging === 'true');
+    }
+    
+    // Load saved auto-tag options
+    const savedOptions = localStorage.getItem('auto-tagging-options');
+    if (savedOptions !== null) {
+      try {
+        setAutoTagOptions(JSON.parse(savedOptions));
+      } catch (error) {
+        console.error('Failed to parse stored auto-tagging options:', error);
+      }
+    }
+  }, []);
+
+  const handleAutoTaggingToggle = (enabled: boolean) => {
+    setAutoTaggingEnabled(enabled);
+    if (isClient) {
+      localStorage.setItem('auto-tagging-enabled', enabled.toString());
+    }
+    toast({
+      title: enabled ? 'Auto-Tagging Enabled' : 'Auto-Tagging Disabled',
+      description: enabled 
+        ? 'Music will be automatically tagged with metadata from MusicBrainz' 
+        : 'Auto-tagging has been disabled',
+    });
+  };
+
+  const handleOptionsChange = (key: string, value: unknown) => {
+    setAutoTagOptions(prev => {
+      const newOptions = { ...prev, [key]: value };
+      if (isClient) {
+        localStorage.setItem('auto-tagging-options', JSON.stringify(newOptions));
+      }
+      return newOptions;
+    });
+  };
+
+  const handleTagSelectionChange = (tag: string, isSelected: boolean) => {
+    setAutoTagOptions(prev => {
+      const currentTags = [...prev.tagsToUpdate];
+      const newTags = isSelected 
+        ? [...currentTags, tag]
+        : currentTags.filter(t => t !== tag);
+      
+      const newOptions = { ...prev, tagsToUpdate: newTags };
+      if (isClient) {
+        localStorage.setItem('auto-tagging-options', JSON.stringify(newOptions));
+      }
+      return newOptions;
+    });
+  };
+
+  const isTagSelected = (tag: string) => {
+    return autoTagOptions.tagsToUpdate.includes(tag);
+  };
+
+  return (
+    <>
+      <Card className="mb-6 break-inside-avoid py-5">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <FaTags className="w-5 h-5" />
+            Auto-Tagging
+          </CardTitle>
+          <CardDescription>
+            Configure metadata auto-tagging with MusicBrainz
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="font-medium">Enable Auto-Tagging</p>
+              <p className="text-sm text-muted-foreground">
+                Automatically fetch and apply metadata from MusicBrainz
+              </p>
+            </div>
+            <Switch 
+              checked={autoTaggingEnabled} 
+              onCheckedChange={handleAutoTaggingToggle} 
+            />
+          </div>
+
+          {autoTaggingEnabled && (
+            <>
+              <div className="space-y-2">
+                <Label htmlFor="rate-limit">API Rate Limit (ms)</Label>
+                <Input
+                  id="rate-limit"
+                  type="number"
+                  min={500}
+                  max={5000}
+                  step={100}
+                  value={autoTagOptions.rateLimit}
+                  onChange={(e) => handleOptionsChange('rateLimit', Number(e.target.value))}
+                />
+                <p className="text-xs text-muted-foreground">
+                  Time between API requests in milliseconds (min: 500ms)
+                </p>
+              </div>
+
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="font-medium">Auto Process Results</p>
+                  <p className="text-sm text-muted-foreground">
+                    Automatically apply best matches without confirmation
+                  </p>
+                </div>
+                <Switch 
+                  checked={autoTagOptions.autoProcess}
+                  onCheckedChange={(checked) => handleOptionsChange('autoProcess', checked)}
+                />
+              </div>
+
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="font-medium">Prefer Local Metadata</p>
+                  <p className="text-sm text-muted-foreground">
+                    Keep existing metadata when confidence is low
+                  </p>
+                </div>
+                <Switch 
+                  checked={autoTagOptions.preferLocalMetadata}
+                  onCheckedChange={(checked) => handleOptionsChange('preferLocalMetadata', checked)}
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label>Tags to Update</Label>
+                <div className="grid grid-cols-2 gap-2">
+                  {['title', 'artist', 'album', 'year', 'genre', 'albumArtist', 'trackNumber', 'discNumber'].map(tag => (
+                    <div key={tag} className="flex items-center space-x-2">
+                      <Switch 
+                        id={`tag-${tag}`}
+                        checked={isTagSelected(tag)}
+                        onCheckedChange={(checked) => handleTagSelectionChange(tag, checked)}
+                      />
+                      <Label htmlFor={`tag-${tag}`} className="capitalize">
+                        {tag === 'albumArtist' ? 'Album Artist' : 
+                         tag === 'trackNumber' ? 'Track Number' :
+                         tag === 'discNumber' ? 'Disc Number' : tag}
+                      </Label>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              <div className="pt-2">
+                <Button onClick={() => {
+                  // Set selected item to represent the whole library
+                  setSelectedItem({
+                    id: 'library',
+                    name: 'Full Library',
+                    mode: 'artist'
+                  });
+                  setAutoTagDialogOpen(true);
+                }} variant="outline">
+                  <FaTags className="w-4 h-4 mr-2" />
+                  Open Auto-Tagging Tool
+                </Button>
+              </div>
+            </>
+          )}
+
+          <div className="text-sm text-muted-foreground space-y-2">
+            <p><strong>How it works:</strong></p>
+            <ul className="list-disc list-inside space-y-1 ml-2">
+              <li>Metadata is fetched from MusicBrainz when you play tracks</li>
+              <li>Tags can be applied automatically or manually reviewed</li>
+              <li>Right-click on tracks or albums to tag them manually</li>
+              <li>MusicBrainz API has rate limits, so don&apos;t set too fast</li>
+            </ul>
+          </div>
+        </CardContent>
+      </Card>
+
+      <AutoTaggingDialog 
+        isOpen={autoTagDialogOpen}
+        onClose={() => setAutoTagDialogOpen(false)}
+        mode={selectedItem.mode}
+        itemId={selectedItem.id}
+        itemName={selectedItem.name}
+      />
+    </>
+  );
+};

app/components/BottomNavigation.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import { useRouter, usePathname } from 'next/navigation';
+import { Home, Search, Disc, Users, Music, Heart, List, Settings } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useGlobalSearch } from './GlobalSearchProvider';
+
+interface NavItem {
+  href: string;
+  label: string;
+  icon: React.ComponentType<{ className?: string }>;
+}
+
+const navigationItems: NavItem[] = [
+  { href: '/', label: 'Home', icon: Home },
+  { href: '/search', label: 'Search', icon: Search },
+  { href: '/library', label: 'Library', icon: Music },
+  { href: '/queue', label: 'Queue', icon: List },
+];
+
+export function BottomNavigation() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const { openSpotlight } = useGlobalSearch();
+
+  const handleNavigation = (href: string) => {
+    if (href === '/search') {
+      // Use spotlight search instead of navigating to search page
+      openSpotlight();
+    } else {
+      router.push(href);
+    }
+  };
+
+  const isActive = (href: string) => {
+    if (href === '/') {
+      return pathname === '/';
+    }
+    return pathname.startsWith(href);
+  };
+
+  return (
+    <div className="fixed bottom-0 left-0 right-0 z-[50] bg-background/95 backdrop-blur-sm border-t border-border">
+      <div className="flex items-center justify-around px-2 py-2 pb-safe mb-2">
+        {navigationItems.map((item) => {
+          const isItemActive = isActive(item.href);
+          const Icon = item.icon;
+          
+          return (
+            <motion.button
+              key={item.href}
+              onClick={() => handleNavigation(item.href)}
+              className={cn(
+                "flex flex-col items-center justify-center p-2 rounded-lg transition-all duration-200 min-w-[60px] touch-manipulation",
+                "active:scale-95 active:bg-primary/20",
+                isItemActive 
+                  ? "text-primary bg-primary/10" 
+                  : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
+              )}
+              whileTap={{ scale: 0.95 }}
+              whileHover={{ y: -1 }}
+            >
+              <Icon className={cn("w-5 h-5 mb-1", isItemActive && "text-primary")} />
+              <span className={cn(
+                "text-xs font-medium",
+                isItemActive ? "text-primary" : "text-muted-foreground"
+              )}>
+                {item.label}
+              </span>
+              <AnimatePresence>
+                {isItemActive && (
+                  <motion.div
+                    layoutId="bottom-nav-underline"
+                    className="h-0.5 w-6 bg-primary mt-1 rounded"
+                    initial={{ opacity: 0, scaleX: 0.6 }}
+                    animate={{ opacity: 1, scaleX: 1 }}
+                    exit={{ opacity: 0, scaleX: 0.6 }}
+                    transition={{ duration: 0.2 }}
+                  />
+                )}
+              </AnimatePresence>
+            </motion.button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

app/components/ContextMenus.tsx

@@ -0,0 +1,260 @@
+'use client';
+
+import React from 'react';
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
+import { 
+  Play, 
+  Plus, 
+  ListMusic,
+  Heart,
+  SkipForward,
+  UserIcon,
+  Disc3,
+  Star,
+  Share,
+  Info
+} from 'lucide-react';
+import { useAudioPlayer } from '@/app/components/AudioPlayerContext';
+import { Track } from '@/app/components/AudioPlayerContext';
+
+interface TrackContextMenuProps {
+  children: React.ReactNode;
+  track: Track;
+  showPlayOptions?: boolean;
+  showQueueOptions?: boolean;
+  showFavoriteOption?: boolean;
+  showAlbumArtistOptions?: boolean;
+}
+
+export function TrackContextMenu({
+  children,
+  track,
+  showPlayOptions = true,
+  showQueueOptions = true,
+  showFavoriteOption = true,
+  showAlbumArtistOptions = true
+}: TrackContextMenuProps) {
+  const { 
+    playTrack, 
+    addToQueue, 
+    insertAtBeginningOfQueue,
+    toggleCurrentTrackStar,
+    currentTrack,
+    queue
+  } = useAudioPlayer();
+
+  const handlePlayTrack = () => {
+    playTrack(track, true);
+  };
+
+  const handleAddToQueue = () => {
+    addToQueue(track);
+  };
+
+  const handlePlayNext = () => {
+    // Add track to the beginning of the queue to play next
+    insertAtBeginningOfQueue(track);
+  };
+
+  const handleToggleFavorite = () => {
+    if (currentTrack?.id === track.id) {
+      toggleCurrentTrackStar();
+    }
+    // For non-current tracks, we'd need a separate function to toggle favorites
+  };
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>
+        {children}
+      </ContextMenuTrigger>
+      <ContextMenuContent className="w-56">
+        {showPlayOptions && (
+          <>
+            <ContextMenuItem onClick={handlePlayTrack} className="cursor-pointer">
+              <Play className="mr-2 h-4 w-4" />
+              Play Now
+            </ContextMenuItem>
+            <ContextMenuSeparator />
+          </>
+        )}
+        
+        {showQueueOptions && (
+          <>
+            <ContextMenuItem onClick={handlePlayNext} className="cursor-pointer">
+              <SkipForward className="mr-2 h-4 w-4" />
+              Play Next
+            </ContextMenuItem>
+            <ContextMenuItem onClick={handleAddToQueue} className="cursor-pointer">
+              <Plus className="mr-2 h-4 w-4" />
+              Add to Queue
+            </ContextMenuItem>
+            <ContextMenuSeparator />
+          </>
+        )}
+
+        {showFavoriteOption && (
+          <>
+            <ContextMenuItem onClick={handleToggleFavorite} className="cursor-pointer">
+              <Heart className={`mr-2 h-4 w-4 ${track.starred ? 'fill-current text-red-500' : ''}`} />
+              {track.starred ? 'Remove from Favorites' : 'Add to Favorites'}
+            </ContextMenuItem>
+            <ContextMenuSeparator />
+          </>
+        )}
+
+        {showAlbumArtistOptions && (
+          <>
+            <ContextMenuItem className="cursor-pointer">
+              <Disc3 className="mr-2 h-4 w-4" />
+              Go to Album
+            </ContextMenuItem>
+            <ContextMenuItem className="cursor-pointer">
+              <UserIcon className="mr-2 h-4 w-4" />
+              Go to Artist
+            </ContextMenuItem>
+            <ContextMenuSeparator />
+          </>
+        )}
+
+        <ContextMenuItem className="cursor-pointer">
+          <Info className="mr-2 h-4 w-4" />
+          Track Info
+        </ContextMenuItem>
+        <ContextMenuItem className="cursor-pointer">
+          <Share className="mr-2 h-4 w-4" />
+          Share
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}
+
+// Additional context menus for albums and artists
+interface AlbumContextMenuProps {
+  children: React.ReactNode;
+  albumId: string;
+  albumName: string;
+}
+
+export function AlbumContextMenu({ 
+  children, 
+  albumId, 
+  albumName 
+}: AlbumContextMenuProps) {
+  const { playAlbum, addAlbumToQueue } = useAudioPlayer();
+
+  const handlePlayAlbum = () => {
+    playAlbum(albumId);
+  };
+
+  const handleAddAlbumToQueue = () => {
+    addAlbumToQueue(albumId);
+  };
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>
+        {children}
+      </ContextMenuTrigger>
+      <ContextMenuContent className="w-56">
+        <ContextMenuItem onClick={handlePlayAlbum} className="cursor-pointer">
+          <Play className="mr-2 h-4 w-4" />
+          Play Album
+        </ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem onClick={handleAddAlbumToQueue} className="cursor-pointer">
+          <Plus className="mr-2 h-4 w-4" />
+          Add Album to Queue
+        </ContextMenuItem>
+        <ContextMenuItem className="cursor-pointer">
+          <SkipForward className="mr-2 h-4 w-4" />
+          Play Album Next
+        </ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem className="cursor-pointer">
+          <Heart className="mr-2 h-4 w-4" />
+          Add to Favorites
+        </ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem className="cursor-pointer">
+          <UserIcon className="mr-2 h-4 w-4" />
+          Go to Artist
+        </ContextMenuItem>
+        <ContextMenuItem className="cursor-pointer">
+          <Info className="mr-2 h-4 w-4" />
+          Album Info
+        </ContextMenuItem>
+        <ContextMenuItem className="cursor-pointer">
+          <Share className="mr-2 h-4 w-4" />
+          Share Album
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}
+
+interface ArtistContextMenuProps {
+  children: React.ReactNode;
+  artistId: string;
+  artistName: string;
+}
+
+export function ArtistContextMenu({ 
+  children, 
+  artistId, 
+  artistName 
+}: ArtistContextMenuProps) {
+  const { playArtist, addArtistToQueue } = useAudioPlayer();
+
+  const handlePlayArtist = () => {
+    playArtist(artistId);
+  };
+
+  const handleAddArtistToQueue = () => {
+    addArtistToQueue(artistId);
+  };
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>
+        {children}
+      </ContextMenuTrigger>
+      <ContextMenuContent className="w-56">
+        <ContextMenuItem onClick={handlePlayArtist} className="cursor-pointer">
+          <Play className="mr-2 h-4 w-4" />
+          Play All Songs
+        </ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem onClick={handleAddArtistToQueue} className="cursor-pointer">
+          <Plus className="mr-2 h-4 w-4" />
+          Add All to Queue
+        </ContextMenuItem>
+        <ContextMenuItem className="cursor-pointer">
+          <SkipForward className="mr-2 h-4 w-4" />
+          Play All Next
+        </ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem className="cursor-pointer">
+          <Heart className="mr-2 h-4 w-4" />
+          Add to Favorites
+        </ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem className="cursor-pointer">
+          <Info className="mr-2 h-4 w-4" />
+          Artist Info
+        </ContextMenuItem>
+        <ContextMenuItem className="cursor-pointer">
+          <Share className="mr-2 h-4 w-4" />
+          Share Artist
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}

app/components/DraggableMiniPlayer.tsx

@@ -0,0 +1,478 @@
+'use client';
+
+import React, { useRef, useState, useEffect, useCallback } from 'react';
+import Image from 'next/image';
+import { motion, PanInfo, AnimatePresence } from 'framer-motion';
+import { useAudioPlayer, Track } from './AudioPlayerContext';
+import { FaPlay, FaPause, FaExpand, FaForward, FaBackward, FaVolumeHigh, FaVolumeXmark } from 'react-icons/fa6';
+import { Heart } from 'lucide-react';
+import { constrain } from '@/lib/utils';
+import { Progress } from '@/components/ui/progress';
+import { extractDominantColor } from '@/lib/image-utils';
+
+interface DraggableMiniPlayerProps {
+  onExpand: () => void;
+}
+
+export const DraggableMiniPlayer: React.FC<DraggableMiniPlayerProps> = ({ onExpand }) => {
+  const { 
+    currentTrack, 
+    playPreviousTrack, 
+    playNextTrack,
+    toggleCurrentTrackStar,
+    isPlaying,
+    togglePlayPause 
+  } = useAudioPlayer();
+
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = useState(false);
+  const [dominantColor, setDominantColor] = useState<string | null>(null);
+  const [progress, setProgress] = useState(0);
+  const [showVolumeSlider, setShowVolumeSlider] = useState(false);
+  const [volume, setVolume] = useState(1);
+  const [clickCount, setClickCount] = useState(0);
+  const [clickTimer, setClickTimer] = useState<NodeJS.Timeout | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const dragStartRef = useRef({ x: 0, y: 0 });
+
+  // Save position to localStorage when it changes
+  useEffect(() => {
+    if (!isDragging) {
+      localStorage.setItem('mini-player-position', JSON.stringify(position));
+    }
+  }, [position, isDragging]);
+
+  // Extract dominant color from album art
+  useEffect(() => {
+    if (!currentTrack?.coverArt) {
+      setDominantColor(null);
+      return;
+    }
+    
+    extractDominantColor(currentTrack.coverArt)
+      .then(color => setDominantColor(color))
+      .catch(error => {
+        console.error('Failed to extract color:', error);
+        setDominantColor(null);
+      });
+  }, [currentTrack?.coverArt]);
+
+  // Track progress from main audio player
+  useEffect(() => {
+    const updateProgress = () => {
+      const audioElement = document.querySelector('audio') as HTMLAudioElement | null;
+      if (audioElement && audioElement.duration) {
+        setProgress((audioElement.currentTime / audioElement.duration) * 100);
+      }
+    };
+    
+    const updateVolume = () => {
+      const audioElement = document.querySelector('audio') as HTMLAudioElement | null;
+      if (audioElement) {
+        setVolume(audioElement.volume);
+      }
+    };
+    
+    const interval = setInterval(updateProgress, 250);
+    updateVolume(); // Initial volume
+    
+    // Set up event listener for volume changes
+    const audioElement = document.querySelector('audio');
+    if (audioElement) {
+      audioElement.addEventListener('volumechange', updateVolume);
+    }
+    
+    return () => {
+      clearInterval(interval);
+      if (audioElement) {
+        audioElement.removeEventListener('volumechange', updateVolume);
+      }
+    };
+  }, [currentTrack]);
+
+  // Detect double clicks for expanding
+  const handleContainerClick = useCallback(() => {
+    setClickCount(prev => prev + 1);
+    
+    if (clickTimer) {
+      clearTimeout(clickTimer);
+    }
+    
+    const timer = setTimeout(() => {
+      // If single click, do nothing
+      if (clickCount === 0) {
+        // Nothing
+      } 
+      // If double click, expand
+      else if (clickCount === 1) {
+        onExpand();
+      }
+      setClickCount(0);
+    }, 300);
+    
+    setClickTimer(timer as unknown as NodeJS.Timeout);
+  }, [clickCount, clickTimer, onExpand]);
+  
+  // Handle seeking in track
+  const handleProgressClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+    const audioElement = document.querySelector('audio') as HTMLAudioElement | null;
+    if (!audioElement) return;
+    
+    const rect = e.currentTarget.getBoundingClientRect();
+    const clickX = e.clientX - rect.left;
+    const percent = clickX / rect.width;
+    audioElement.currentTime = percent * audioElement.duration;
+  };
+  
+  // Handle volume change
+  const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const audioElement = document.querySelector('audio') as HTMLAudioElement | null;
+    if (!audioElement) return;
+    
+    const newVolume = parseFloat(e.target.value);
+    audioElement.volume = newVolume;
+    setVolume(newVolume);
+    
+    try {
+      localStorage.setItem('navidrome-volume', newVolume.toString());
+    } catch (error) {
+      console.error('Failed to save volume:', error);
+    }
+  };
+
+  // Keyboard controls for the mini player
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Only handle keyboard shortcuts if the mini player is focused
+      if (document.activeElement?.tagName === 'INPUT') return;
+
+      const step = e.shiftKey ? 100 : 10; // Larger steps with shift key
+      
+      switch (e.key) {
+        case 'ArrowLeft':
+          setPosition(prev => ({
+            ...prev,
+            x: constrain(
+              prev.x - step,
+              -(window.innerWidth - (containerRef.current?.offsetWidth || 0)) / 2 + 16,
+              (window.innerWidth - (containerRef.current?.offsetWidth || 0)) / 2 - 16
+            )
+          }));
+          break;
+        case 'ArrowRight':
+          setPosition(prev => ({
+            ...prev,
+            x: constrain(
+              prev.x + step,
+              -(window.innerWidth - (containerRef.current?.offsetWidth || 0)) / 2 + 16,
+              (window.innerWidth - (containerRef.current?.offsetWidth || 0)) / 2 - 16
+            )
+          }));
+          break;
+        case 'ArrowUp':
+          setPosition(prev => ({
+            ...prev,
+            y: constrain(
+              prev.y - step,
+              -(window.innerHeight - (containerRef.current?.offsetHeight || 0)) / 2 + 16,
+              (window.innerHeight - (containerRef.current?.offsetHeight || 0)) / 2 - 16
+            )
+          }));
+          break;
+        case 'ArrowDown':
+          setPosition(prev => ({
+            ...prev,
+            y: constrain(
+              prev.y + step,
+              -(window.innerHeight - (containerRef.current?.offsetHeight || 0)) / 2 + 16,
+              (window.innerHeight - (containerRef.current?.offsetHeight || 0)) / 2 - 16
+            )
+          }));
+          break;
+        case 'Escape':
+          onExpand();
+          break;
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [onExpand]);
+
+  // Load saved position on mount
+  useEffect(() => {
+    const savedPosition = localStorage.getItem('mini-player-position');
+    if (savedPosition) {
+      try {
+        const pos = JSON.parse(savedPosition);
+        setPosition(pos);
+      } catch (error) {
+        console.error('Failed to parse saved mini player position:', error);
+      }
+    }
+  }, []);
+
+  // Ensure player stays within viewport bounds and implement edge snapping
+  useEffect(() => {
+    const constrainToViewport = () => {
+      if (!containerRef.current || isDragging) return;
+
+      const rect = containerRef.current.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+
+      // Add some padding from edges
+      const padding = 16;
+      
+      // Calculate constrained position
+      let newX = constrain(
+        position.x,
+        -(viewportWidth - rect.width) / 2 + padding,
+        (viewportWidth - rect.width) / 2 - padding
+      );
+      
+      let newY = constrain(
+        position.y,
+        -(viewportHeight - rect.height) / 2 + padding,
+        (viewportHeight - rect.height) / 2 - padding
+      );
+      
+      // Edge snapping logic
+      const snapThreshold = 24; // Pixels from edge to trigger snap
+      const snapPositions = {
+        left: -(viewportWidth - rect.width) / 2 + padding,
+        right: (viewportWidth - rect.width) / 2 - padding,
+        top: -(viewportHeight - rect.height) / 2 + padding,
+        bottom: (viewportHeight - rect.height) / 2 - padding,
+      };
+      
+      // Snap to left or right edge
+      if (Math.abs(newX - snapPositions.left) < snapThreshold) {
+        newX = snapPositions.left;
+      } else if (Math.abs(newX - snapPositions.right) < snapThreshold) {
+        newX = snapPositions.right;
+      }
+      
+      // Snap to top or bottom edge
+      if (Math.abs(newY - snapPositions.top) < snapThreshold) {
+        newY = snapPositions.top;
+      } else if (Math.abs(newY - snapPositions.bottom) < snapThreshold) {
+        newY = snapPositions.bottom;
+      }
+
+      if (newX !== position.x || newY !== position.y) {
+        setPosition({ x: newX, y: newY });
+      }
+    };
+
+    constrainToViewport();
+    window.addEventListener('resize', constrainToViewport);
+    return () => window.removeEventListener('resize', constrainToViewport);
+  }, [position, isDragging]);
+
+  const handleDragStart = () => {
+    setIsDragging(true);
+    dragStartRef.current = position;
+  };
+
+  const handleDrag = (_: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => {
+    setPosition({
+      x: dragStartRef.current.x + info.offset.x,
+      y: dragStartRef.current.y + info.offset.y
+    });
+  };
+
+  const handleDragEnd = () => {
+    setIsDragging(false);
+  };
+
+  if (!currentTrack) return null;
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        ref={containerRef}
+        drag
+        dragMomentum={false}
+        dragElastic={0}
+        onDragStart={handleDragStart}
+        onDrag={handleDrag}
+        onDragEnd={handleDragEnd}
+        animate={{
+          x: position.x + window.innerWidth / 2,
+          y: position.y + window.innerHeight / 2,
+          scale: isDragging ? 1.02 : 1,
+          opacity: isDragging ? 0.8 : 1
+        }}
+        transition={{ type: 'spring', damping: 20 }}
+        style={{ 
+          position: 'fixed',
+          zIndex: 100,
+          transform: `translate(-50%, -50%)`
+        }}
+        className="cursor-grab active:cursor-grabbing"
+        onClick={handleContainerClick}
+      >
+        <div 
+          className="backdrop-blur-sm border rounded-lg shadow-xl hover:shadow-2xl transition-shadow p-3 w-[280px]"
+          style={{
+            backgroundColor: dominantColor 
+              ? `${dominantColor.replace('rgb', 'rgba').replace(')', ', 0.15)')}` 
+              : 'var(--background-color, rgba(0, 0, 0, 0.8))',
+            borderColor: dominantColor 
+              ? `${dominantColor.replace('rgb', 'rgba').replace(')', ', 0.3)')}` 
+              : 'var(--border-color, rgba(255, 255, 255, 0.1))'
+          }}
+        >
+          {/* Progress bar at the top */}
+          <div className="mb-3" onClick={handleProgressClick}>
+            <Progress 
+              value={progress} 
+              className="h-1 cursor-pointer" 
+              style={{
+                backgroundColor: dominantColor 
+                  ? `${dominantColor.replace('rgb', 'rgba').replace(')', ', 0.2)')}` 
+                  : undefined,
+                '--progress-color': dominantColor || undefined
+              } as React.CSSProperties}
+            />
+          </div>
+          
+          <div className="flex items-center gap-3">
+            {/* Album Art - Animated transition */}
+            <AnimatePresence mode="wait">
+              <motion.div 
+                key={currentTrack.id}
+                className="relative w-12 h-12 shrink-0"
+                initial={{ opacity: 0, scale: 0.9 }}
+                animate={{ opacity: 1, scale: 1 }}
+                exit={{ opacity: 0, scale: 0.9 }}
+                transition={{ duration: 0.2 }}
+              >
+                <Image
+                  src={currentTrack.coverArt || '/default-user.jpg'}
+                  alt={currentTrack.name}
+                  fill
+                  className="rounded-md object-cover shadow-md"
+                  sizes="48px"
+                  priority
+                />
+              </motion.div>
+            </AnimatePresence>
+
+            {/* Track Info */}
+            <div className="flex-1 min-w-0">
+              <p className="font-semibold text-sm truncate">{currentTrack.name}</p>
+              <p className="text-xs text-muted-foreground truncate">{currentTrack.artist}</p>
+            </div>
+          </div>
+
+          {/* Keyboard shortcut hint */}
+          <div className="text-xs text-muted-foreground text-center mt-2 px-2">
+            Double-click to expand • Arrow keys to move
+          </div>
+
+          {/* Controls */}
+          <div className="flex items-center justify-between mt-2 px-2">
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                toggleCurrentTrackStar();
+              }}
+              className="p-2 hover:bg-muted/50 rounded-full transition-colors"
+              title={currentTrack.starred ? 'Remove from favorites' : 'Add to favorites'}
+            >
+              <Heart
+                className={`w-4 h-4 ${currentTrack.starred ? 'text-primary fill-primary' : ''}`}
+              />
+            </button>
+
+            <div className="flex items-center gap-2">
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  playPreviousTrack();
+                }}
+                className="p-2 hover:bg-muted/50 rounded-full transition-colors"
+              >
+                <FaBackward className="w-3 h-3" />
+              </button>
+
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  togglePlayPause();
+                }}
+                className="p-3 hover:bg-muted/50 rounded-full transition-colors"
+              >
+                {isPlaying ? (
+                  <FaPause className="w-4 h-4" />
+                ) : (
+                  <FaPlay className="w-4 h-4" />
+                )}
+              </button>
+
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  playNextTrack();
+                }}
+                className="p-2 hover:bg-muted/50 rounded-full transition-colors"
+              >
+                <FaForward className="w-3 h-3" />
+              </button>
+            </div>
+
+            <div className="relative">
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setShowVolumeSlider(prev => !prev);
+                }}
+                className="p-2 hover:bg-muted/50 rounded-full transition-colors"
+                title="Volume"
+              >
+                {volume === 0 ? (
+                  <FaVolumeXmark className="w-4 h-4" />
+                ) : (
+                  <FaVolumeHigh className="w-4 h-4" />
+                )}
+              </button>
+              
+              {/* Volume Slider */}
+              {showVolumeSlider && (
+                <div 
+                  className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 p-2 bg-background/95 backdrop-blur-sm border rounded-lg shadow-lg"
+                  onClick={e => e.stopPropagation()}
+                >
+                  <input
+                    type="range"
+                    min="0"
+                    max="1"
+                    step="0.01"
+                    value={volume}
+                    onChange={handleVolumeChange}
+                    className="w-24 accent-foreground"
+                  />
+                </div>
+              )}
+            </div>
+          </div>
+          
+          {/* Expand button in top-right corner */}
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onExpand();
+            }}
+            className="absolute top-2 right-2 p-1.5 hover:bg-muted/50 rounded-full transition-colors"
+            title="Expand"
+          >
+            <FaExpand className="w-3 h-3" />
+          </button>
+        </div>
+      </motion.div>
+    </AnimatePresence>
+  );
+};

app/components/GlobalSearchProvider.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import React, { createContext, useContext, useState, useCallback } from 'react';
+import { SpotlightSearch } from './SpotlightSearch';
+
+interface GlobalSearchContextProps {
+  isSpotlightOpen: boolean;
+  openSpotlight: () => void;
+  closeSpotlight: () => void;
+}
+
+const GlobalSearchContext = createContext<GlobalSearchContextProps | undefined>(undefined);
+
+export function GlobalSearchProvider({ children }: { children: React.ReactNode }) {
+  const [isSpotlightOpen, setIsSpotlightOpen] = useState(false);
+
+  const openSpotlight = useCallback(() => {
+    setIsSpotlightOpen(true);
+  }, []);
+
+  const closeSpotlight = useCallback(() => {
+    setIsSpotlightOpen(false);
+  }, []);
+
+  return (
+    <GlobalSearchContext.Provider value={{
+      isSpotlightOpen,
+      openSpotlight,
+      closeSpotlight
+    }}>
+      {children}
+      <SpotlightSearch 
+        isOpen={isSpotlightOpen} 
+        onClose={closeSpotlight} 
+      />
+    </GlobalSearchContext.Provider>
+  );
+}
+
+export function useGlobalSearch() {
+  const context = useContext(GlobalSearchContext);
+  if (!context) {
+    throw new Error('useGlobalSearch must be used within a GlobalSearchProvider');
+  }
+  return context;
+}

app/components/PageTransition.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import React from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { usePathname } from "next/navigation";
+
+export default function PageTransition({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  return (
+    <AnimatePresence mode="wait" initial={false}>
+      <motion.div
+        key={pathname}
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        transition={{ duration: 0.18, ease: "easeInOut" }}
+        className="contents"
+      >
+        {children}
+      </motion.div>
+    </AnimatePresence>
+  );
+}

app/components/PopularSongs.tsx

@@ -36,7 +36,7 @@ export function PopularSongs({ songs, artistName }: PopularSongsProps) {
       artist: song.artist,
       album: song.album,
       duration: song.duration,
-      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 300) : undefined,
+      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 1200) : undefined,
       albumId: song.albumId,
       artistId: song.artistId,
       starred: !!song.starred
@@ -92,10 +92,10 @@ export function PopularSongs({ songs, artistName }: PopularSongsProps) {
             </div>
 
             {/* Album Art */}
-            <div className="relative w-12 h-12 bg-muted rounded-md overflow-hidden flex-shrink-0">
+            <div className="relative w-12 h-12 bg-muted rounded-md overflow-hidden shrink-0">
               {song.coverArt && api && (
                 <Image
-                  src={api.getCoverArtUrl(song.coverArt, 96)}
+                  src={api.getCoverArtUrl(song.coverArt, 300)}
                   alt={song.album}
                   width={48}
                   height={48}

app/components/PostHogProvider.tsx

@@ -1,50 +0,0 @@
-"use client"
-
-import posthog from "posthog-js"
-import { PostHogProvider as PHProvider, usePostHog } from "posthog-js/react"
-import { Suspense, useEffect } from "react"
-import { usePathname, useSearchParams } from "next/navigation"
-
-function PathnameTracker() {
-  const posthogClient = usePostHog()
-  const pathname = usePathname()
-  const searchParams = useSearchParams()
-
-  useEffect(() => {
-    if (posthogClient) {
-      posthogClient.capture('$pageview', {
-        path: pathname + (searchParams.toString() ? `?${searchParams.toString()}` : ''),
-      })
-    }
-  }, [posthogClient, pathname, searchParams])
-
-  return null
-}
-
-function SuspendedPostHogPageView() {
-  return (
-    <Suspense fallback={null}>
-      <PathnameTracker />
-    </Suspense>
-  )
-}
-
-export function PostHogProvider({ children }: { children: React.ReactNode }) {
-  useEffect(() => {
-    posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
-      api_host: "/ingest",
-      ui_host: "https://us.posthog.com",
-      capture_pageview: 'history_change',
-      capture_pageleave: true,
-      capture_exceptions: true,
-      debug: process.env.NODE_ENV === "development",
-    })
-  }, [])
-
-  return (
-    <PHProvider client={posthog}>
-      <SuspendedPostHogPageView />
-      {children}
-    </PHProvider>
-  )
-}

app/components/RootLayoutClient.tsx

@@ -1,28 +1,53 @@
 "use client";
 
-import React from "react";
+import React, { useEffect } from "react";
 import { AudioPlayerProvider } from "../components/AudioPlayerContext";
 import { NavidromeProvider, useNavidrome } from "../components/NavidromeContext";
 import { NavidromeConfigProvider } from "../components/NavidromeConfigContext";
 import { ThemeProvider } from "../components/ThemeProvider";
-import { PostHogProvider } from "../components/PostHogProvider";
 import { WhatsNewPopup } from "../components/WhatsNewPopup";
 import Ihateserverside from "./ihateserverside";
 import DynamicViewportTheme from "./DynamicViewportTheme";
+import ThemeColorHandler from "./ThemeColorHandler";
+import { useViewportThemeColor } from "@/hooks/use-viewport-theme-color";
 import { LoginForm } from "./start-screen";
 import Image from "next/image";
+import PageTransition from "./PageTransition";
+import { GlobalSearchProvider } from "./GlobalSearchProvider";
+
+// ServiceWorkerRegistration component to handle registration
+function ServiceWorkerRegistration() {
+  useEffect(() => {
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.register('/sw.js')
+        .then((registration) => {
+          console.log('Service Worker registered successfully:', registration);
+        })
+        .catch((error) => {
+          console.error('Service Worker registration failed:', error);
+        });
+    }
+  }, []);
+  
+  return null;
+}
 
 function NavidromeErrorBoundary({ children }: { children: React.ReactNode }) {
-  const { error } = useNavidrome();
+  // For now, since we're switching to offline-first, we'll handle errors differently
+  // The offline provider will handle connectivity issues automatically
+  const [isClient, setIsClient] = React.useState(false);
+  const [hasCompletedOnboarding, setHasCompletedOnboarding] = React.useState(true); // Default to true to prevent flash
   
-  // Check if this is a first-time user
-  const hasCompletedOnboarding = typeof window !== 'undefined' 
-    ? localStorage.getItem('onboarding-completed') 
-    : false;
+  // Client-side hydration
+  React.useEffect(() => {
+    setIsClient(true);
+    const onboardingStatus = localStorage.getItem('onboarding-completed');
+    setHasCompletedOnboarding(!!onboardingStatus);
+  }, []);
 
   // Simple check: has config in localStorage or environment
   const hasAnyConfig = React.useMemo(() => {
-    if (typeof window === 'undefined') return false;
+    if (!isClient) return true; // Assume config exists during SSR to prevent flash
     
     // Check localStorage config
     const savedConfig = localStorage.getItem('navidrome-config');
@@ -45,12 +70,16 @@ function NavidromeErrorBoundary({ children }: { children: React.ReactNode }) {
     }
     
     return false;
-  }, []);
+  }, [isClient]);
   
-  // Show start screen ONLY if:
-  // 1. First-time user (no onboarding completed), OR
-  // 2. User has completed onboarding BUT there's an error AND no config exists
-  const shouldShowStartScreen = !hasCompletedOnboarding || (hasCompletedOnboarding && error && !hasAnyConfig);
+  // Don't show anything until client-side hydration is complete
+  if (!isClient) {
+    return <>{children}</>;
+  }
+  
+  // Show start screen ONLY if first-time user (no onboarding completed)
+  // In offline-first mode, we don't need to check for errors since the app works offline
+  const shouldShowStartScreen = !hasCompletedOnboarding;
   
   if (shouldShowStartScreen) {
     return (
@@ -71,22 +100,24 @@ function NavidromeErrorBoundary({ children }: { children: React.ReactNode }) {
 
 export default function RootLayoutClient({ children }: { children: React.ReactNode }) {
   return (
-    <PostHogProvider>
-      <ThemeProvider>
-        <DynamicViewportTheme />
-        <NavidromeConfigProvider>
-          <NavidromeProvider>
-            <NavidromeErrorBoundary>
-              <AudioPlayerProvider>
+    <ThemeProvider>
+      <DynamicViewportTheme />
+      <ThemeColorHandler />
+      <ServiceWorkerRegistration />
+      <NavidromeConfigProvider>
+        <NavidromeProvider>
+          <NavidromeErrorBoundary>
+            <AudioPlayerProvider>
+              <GlobalSearchProvider>
                 <Ihateserverside>
-                  {children}
+                  <PageTransition>{children}</PageTransition>
                 </Ihateserverside>
                 <WhatsNewPopup />
-              </AudioPlayerProvider>
-            </NavidromeErrorBoundary>
-          </NavidromeProvider>
-        </NavidromeConfigProvider>
-      </ThemeProvider>
-    </PostHogProvider>
+              </GlobalSearchProvider>
+            </AudioPlayerProvider>
+          </NavidromeErrorBoundary>
+        </NavidromeProvider>
+      </NavidromeConfigProvider>
+    </ThemeProvider>
   );
 }

app/components/SettingsManagement.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { 
+  Download, 
+  Upload, 
+  RotateCcw,
+  Settings
+} from 'lucide-react';
+import { useSidebarLayout } from '@/hooks/use-sidebar-layout';
+
+export function SettingsManagement() {
+  const { exportSettings, importSettings, resetToDefaults } = useSidebarLayout();
+  const [importFile, setImportFile] = useState<File | null>(null);
+  const [importing, setImporting] = useState(false);
+  const [importError, setImportError] = useState<string | null>(null);
+
+  const handleImportFile = async () => {
+    if (!importFile) return;
+    
+    setImporting(true);
+    setImportError(null);
+    
+    try {
+      await importSettings(importFile);
+      setImportFile(null);
+      // Reset file input
+      const fileInput = document.getElementById('settings-import') as HTMLInputElement;
+      if (fileInput) fileInput.value = '';
+    } catch (error) {
+      setImportError(error instanceof Error ? error.message : 'Failed to import settings');
+    } finally {
+      setImporting(false);
+    }
+  };
+
+  return (
+    <Card className="py-5">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Settings className="h-5 w-5" />
+          Settings Management
+        </CardTitle>
+        <CardDescription>
+          Export, import, or reset your application settings
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="flex flex-wrap gap-2">
+          <Button onClick={exportSettings} variant="outline">
+            <Download className="h-4 w-4 mr-2" />
+            Export Settings
+          </Button>
+          
+          <div className="flex items-center gap-2">
+            <Input
+              id="settings-import"
+              type="file"
+              accept=".json"
+              onChange={(e) => setImportFile(e.target.files?.[0] || null)}
+              className="hidden"
+            />
+            <Button
+              variant="outline"
+              onClick={() => document.getElementById('settings-import')?.click()}
+            >
+              <Upload className="h-4 w-4 mr-2" />
+              Select File
+            </Button>
+            
+            {importFile && (
+              <Button
+                onClick={handleImportFile}
+                disabled={importing}
+                variant="default"
+              >
+                {importing ? 'Importing...' : 'Import'}
+              </Button>
+            )}
+          </div>
+          
+          <Button onClick={resetToDefaults} variant="outline">
+            <RotateCcw className="h-4 w-4 mr-2" />
+            Reset to Default
+          </Button>
+        </div>
+        
+        {importFile && (
+          <div className="text-sm text-muted-foreground">
+            Selected: {importFile.name}
+          </div>
+        )}
+        
+        {importError && (
+          <div className="text-sm text-destructive">
+            Error: {importError}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

app/components/SidebarCustomization.tsx

@@ -0,0 +1,244 @@
+'use client';
+
+import React from 'react';
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import {
+  useSortable,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import { Switch } from '@/components/ui/switch';
+import { 
+  GripVertical, 
+  Eye, 
+  EyeOff, 
+  Search,
+  Home,
+  List,
+  Radio,
+  Users,
+  Disc,
+  Music,
+  Heart,
+  Grid3X3,
+  Clock,
+  Settings
+} from 'lucide-react';
+import { useSidebarLayout, SidebarItem, SidebarItemType } from '@/hooks/use-sidebar-layout';
+
+// Icon mapping
+const iconMap: Record<string, React.ReactNode> = {
+  search: <Search className="h-4 w-4" />,
+  home: <Home className="h-4 w-4" />,
+  queue: <List className="h-4 w-4" />,
+  radio: <Radio className="h-4 w-4" />,
+  artists: <Users className="h-4 w-4" />,
+  albums: <Disc className="h-4 w-4" />,
+  playlists: <Music className="h-4 w-4" />,
+  favorites: <Heart className="h-4 w-4" />,
+  browse: <Grid3X3 className="h-4 w-4" />,
+  songs: <Music className="h-4 w-4" />,
+  history: <Clock className="h-4 w-4" />,
+  settings: <Settings className="h-4 w-4" />,
+};
+
+interface SortableItemProps {
+  item: SidebarItem;
+  onToggleVisibility: (id: SidebarItemType) => void;
+  showIcons: boolean;
+}
+
+function SortableItem({ item, onToggleVisibility, showIcons }: SortableItemProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: item.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className="flex items-center justify-between p-3 bg-secondary/50 rounded-lg border"
+    >
+      <div className="flex items-center gap-3">
+        <div
+          className="cursor-grab hover:cursor-grabbing text-muted-foreground"
+          {...attributes}
+          {...listeners}
+        >
+          <GripVertical className="h-4 w-4" />
+        </div>
+        
+        {showIcons && (
+          <div className="text-muted-foreground">
+            {iconMap[item.icon] || <div className="h-4 w-4" />}
+          </div>
+        )}
+        
+        <span className={`font-medium ${!item.visible ? 'text-muted-foreground line-through' : ''}`}>
+          {item.label}
+        </span>
+      </div>
+      
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={() => onToggleVisibility(item.id)}
+        className="h-8 w-8 p-0"
+      >
+        {item.visible ? (
+          <Eye className="h-4 w-4" />
+        ) : (
+          <EyeOff className="h-4 w-4" />
+        )}
+      </Button>
+    </div>
+  );
+}
+
+export function SidebarCustomization() {
+  const {
+    settings,
+    hasUnsavedChanges,
+    reorderItems,
+    toggleItemVisibility,
+    updateShortcuts,
+    updateShowIcons,
+    applyChanges,
+    discardChanges,
+  } = useSidebarLayout();
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (over && active.id !== over.id) {
+      reorderItems(active.id as string, over.id as string);
+    }
+  };
+
+
+
+  return (
+    <Card className="py-5">
+      <CardHeader>
+        <CardTitle>Sidebar Customization</CardTitle>
+        <CardDescription>
+          Customize the sidebar layout, reorder items, and manage visibility settings.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        {/* Show Icons Toggle */}
+        <div className="flex items-center justify-between">
+          <div className="space-y-0.5">
+            <Label>Show Icons</Label>
+            <div className="text-sm text-muted-foreground">
+              Display icons next to navigation items
+            </div>
+          </div>
+          <Switch
+            checked={settings.showIcons}
+            onCheckedChange={updateShowIcons}
+          />
+        </div>
+
+        {/* Shortcut Type */}
+        <div className="space-y-3">
+          <Label>Sidebar Shortcuts</Label>
+          <RadioGroup
+            value={settings.shortcuts}
+            onValueChange={(value: 'albums' | 'playlists' | 'both') => updateShortcuts(value)}
+          >
+            <div className="flex items-center space-x-2">
+              <RadioGroupItem value="albums" id="shortcuts-albums" />
+              <Label htmlFor="shortcuts-albums">Albums only</Label>
+            </div>
+            <div className="flex items-center space-x-2">
+              <RadioGroupItem value="playlists" id="shortcuts-playlists" />
+              <Label htmlFor="shortcuts-playlists">Playlists only</Label>
+            </div>
+            <div className="flex items-center space-x-2">
+              <RadioGroupItem value="both" id="shortcuts-both" />
+              <Label htmlFor="shortcuts-both">Both albums and playlists</Label>
+            </div>
+          </RadioGroup>
+        </div>
+
+        {/* Navigation Items Order */}
+        <div className="space-y-3">
+          <Label>Navigation Items</Label>
+          <div className="text-sm text-muted-foreground mb-3">
+            Drag to reorder, click the eye icon to show/hide items
+          </div>
+          
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragEnd={handleDragEnd}
+          >
+            <SortableContext items={settings.items.map(item => item.id)} strategy={verticalListSortingStrategy}>
+              <div className="space-y-2">
+                {settings.items.map((item) => (
+                  <SortableItem
+                    key={item.id}
+                    item={item}
+                    onToggleVisibility={toggleItemVisibility}
+                    showIcons={settings.showIcons}
+                  />
+                ))}
+              </div>
+            </SortableContext>
+          </DndContext>
+        </div>
+
+        {/* Apply/Discard Changes */}
+        {hasUnsavedChanges() && (
+          <div className="space-y-3 pt-4 border-t">
+            <Label>Unsaved Changes</Label>
+            <div className="flex gap-2">
+              <Button onClick={applyChanges} variant="default">
+                Apply Changes
+              </Button>
+              <Button onClick={discardChanges} variant="outline">
+                Discard Changes
+              </Button>
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

app/components/SidebarCustomizer.tsx

@@ -0,0 +1,321 @@
+'use client';
+
+import React, { useState } from 'react';
+import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Switch } from '@/components/ui/switch';
+import { Label } from '@/components/ui/label';
+import { Badge } from '@/components/ui/badge';
+import { GripVertical, Eye, EyeOff, Download, Upload, RotateCcw } from 'lucide-react';
+import { useSidebarLayout, SidebarItem } from '@/hooks/use-sidebar-layout';
+import { Input } from '@/components/ui/input';
+import { useToast } from '@/hooks/use-toast';
+
+export function SidebarCustomizer() {
+  const { 
+    settings, 
+    updateItemOrder, 
+    toggleItemVisibility, 
+    updateShortcuts, 
+    updateShowIcons,
+    exportSettings,
+    importSettings,
+    resetToDefaults 
+  } = useSidebarLayout();
+  const { toast } = useToast();
+  const [dragEnabled, setDragEnabled] = useState(false);
+
+  const handleDragEnd = (result: DropResult) => {
+    if (!result.destination) return;
+
+    const items = Array.from(settings.items);
+    const [reorderedItem] = items.splice(result.source.index, 1);
+    items.splice(result.destination.index, 0, reorderedItem);
+
+    updateItemOrder(items);
+  };
+
+  const handleFileImport = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    try {
+      await importSettings(file);
+      toast({
+        title: "Settings imported",
+        description: "Your sidebar settings have been imported successfully.",
+      });
+    } catch (error) {
+      toast({
+        title: "Import failed",
+        description: "Failed to import settings. Please check the file format.",
+        variant: "destructive",
+      });
+    }
+    
+    // Reset the input
+    event.target.value = '';
+  };
+
+  const handleExport = () => {
+    exportSettings();
+    toast({
+      title: "Settings exported",
+      description: "Your settings have been downloaded as a JSON file.",
+    });
+  };
+
+  const handleReset = () => {
+    resetToDefaults();
+    toast({
+      title: "Settings reset",
+      description: "Sidebar settings have been reset to defaults.",
+    });
+  };
+
+  const getSidebarIcon = (iconId: string) => {
+    const iconMap: Record<string, React.ReactElement> = {
+      search: (
+        <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <circle cx="11" cy="11" r="8" />
+          <path d="m21 21-4.35-4.35" />
+        </svg>
+      ),
+      home: (
+        <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <circle cx="12" cy="12" r="10" />
+          <polygon points="10 8 16 12 10 16 10 8" />
+        </svg>
+      ),
+      queue: (
+        <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M3 6h18M3 12h18M3 18h18" />
+        </svg>
+      ),
+      radio: (
+        <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M4.9 19.1C1 15.2 1 8.8 4.9 4.9"/>
+          <circle cx="12" cy="12" r="2"/>
+        </svg>
+      ),
+      artists: (
+        <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="m12 8-9.04 9.06a2.82 2.82 0 1 0 3.98 3.98L16 12" />
+          <circle cx="17" cy="7" r="5" />
+        </svg>
+      ),
+      albums: (
+        <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="m16 6 4 14" />
+          <path d="M12 6v14" />
+          <path d="M8 8v12" />
+          <path d="M4 4v16" />
+        </svg>
+      ),
+      playlists: (
+        <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M21 15V6" />
+          <path d="M18.5 18a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z" />
+          <path d="M12 12H3" />
+        </svg>
+      ),
+      favorites: (
+        <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
+        </svg>
+      ),
+      browse: (
+        <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <rect width="7" height="7" x="3" y="3" rx="1" />
+          <rect width="7" height="7" x="14" y="3" rx="1" />
+        </svg>
+      ),
+      songs: (
+        <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <circle cx="8" cy="18" r="4" />
+          <path d="M12 18V2l7 4" />
+        </svg>
+      ),
+      history: (
+        <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M12 2C6.48 2 2 6.48 2 12c0 5.52 4.48 10 10 10 5.52 0 10-4.48 10-10 0-5.52-4.48-10-10-10Z" />
+          <path d="M12 8v4l4 2" />
+        </svg>
+      ),
+      settings: (
+        <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
+          <circle cx="12" cy="12" r="3" />
+        </svg>
+      ),
+    };
+    
+    return iconMap[iconId] || iconMap.home;
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Global Settings */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Sidebar Settings</CardTitle>
+          <CardDescription>
+            Customize your sidebar appearance and behavior
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-center space-x-2">
+            <Switch
+              id="show-icons"
+              checked={settings.showIcons}
+              onCheckedChange={updateShowIcons}
+            />
+            <Label htmlFor="show-icons">Show icons</Label>
+          </div>
+          
+          <div className="space-y-2">
+            <Label>Sidebar shortcuts</Label>
+            <div className="flex gap-2">
+              <Button
+                variant={settings.shortcuts === 'both' ? 'default' : 'outline'}
+                size="sm"
+                onClick={() => updateShortcuts('both')}
+              >
+                Both
+              </Button>
+              <Button
+                variant={settings.shortcuts === 'albums' ? 'default' : 'outline'}
+                size="sm"
+                onClick={() => updateShortcuts('albums')}
+              >
+                Albums only
+              </Button>
+              <Button
+                variant={settings.shortcuts === 'playlists' ? 'default' : 'outline'}
+                size="sm"
+                onClick={() => updateShortcuts('playlists')}
+              >
+                Playlists only
+              </Button>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Item Management */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Sidebar Items</CardTitle>
+          <CardDescription>
+            Drag to reorder items and toggle visibility
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center space-x-2 mb-4">
+            <Switch
+              id="drag-enabled"
+              checked={dragEnabled}
+              onCheckedChange={setDragEnabled}
+            />
+            <Label htmlFor="drag-enabled">Enable drag to reorder</Label>
+          </div>
+
+          <DragDropContext onDragEnd={handleDragEnd}>
+            <Droppable droppableId="sidebar-items" isDropDisabled={!dragEnabled}>
+              {(provided) => (
+                <div
+                  {...provided.droppableProps}
+                  ref={provided.innerRef}
+                  className="space-y-2"
+                >
+                  {settings.items.map((item, index) => (
+                    <Draggable
+                      key={item.id}
+                      draggableId={item.id}
+                      index={index}
+                      isDragDisabled={!dragEnabled}
+                    >
+                      {(provided, snapshot) => (
+                        <div
+                          ref={provided.innerRef}
+                          {...provided.draggableProps}
+                          className={`flex items-center justify-between p-3 border rounded-lg ${
+                            snapshot.isDragging ? 'bg-accent' : 'bg-background'
+                          } ${!item.visible ? 'opacity-50' : ''}`}
+                        >
+                          <div className="flex items-center space-x-3">
+                            <div
+                              {...provided.dragHandleProps}
+                              className={`${dragEnabled ? 'cursor-grab' : 'cursor-default'}`}
+                            >
+                              <GripVertical className="h-4 w-4 text-muted-foreground" />
+                            </div>
+                            {settings.showIcons && getSidebarIcon(item.icon)}
+                            <span className="font-medium">{item.label}</span>
+                            {!item.visible && <Badge variant="secondary">Hidden</Badge>}
+                          </div>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => toggleItemVisibility(item.id)}
+                          >
+                            {item.visible ? (
+                              <Eye className="h-4 w-4" />
+                            ) : (
+                              <EyeOff className="h-4 w-4" />
+                            )}
+                          </Button>
+                        </div>
+                      )}
+                    </Draggable>
+                  ))}
+                  {provided.placeholder}
+                </div>
+              )}
+            </Droppable>
+          </DragDropContext>
+        </CardContent>
+      </Card>
+
+      {/* Import/Export */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Settings Management</CardTitle>
+          <CardDescription>
+            Export, import, or reset your settings
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex gap-2">
+            <Button onClick={handleExport} variant="outline">
+              <Download className="h-4 w-4 mr-2" />
+              Export Settings
+            </Button>
+            <div>
+              <Input
+                type="file"
+                accept=".json"
+                onChange={handleFileImport}
+                className="hidden"
+                id="import-settings"
+              />
+              <Label htmlFor="import-settings">
+                <Button variant="outline" asChild>
+                  <span>
+                    <Upload className="h-4 w-4 mr-2" />
+                    Import Settings
+                  </span>
+                </Button>
+              </Label>
+            </div>
+            <Button onClick={handleReset} variant="destructive">
+              <RotateCcw className="h-4 w-4 mr-2" />
+              Reset to Defaults
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

app/components/SimilarArtists.tsx

@@ -68,7 +68,7 @@ export function SimilarArtists({ artistName }: SimilarArtistsProps) {
             <Link
               key={artist.name}
               href={`/artist/${encodeURIComponent(artist.name)}`}
-              className="flex-shrink-0"
+              className="shrink-0"
             >
               <div className="w-32 space-y-2 group cursor-pointer">
                 <div className="relative w-32 h-32 bg-muted rounded-full overflow-hidden">

app/components/SongRecommendations.tsx

@@ -0,0 +1,346 @@
+'use client';
+
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import { Song, Album, getNavidromeAPI } from '@/lib/navidrome';
+import { useNavidrome } from '@/app/components/NavidromeContext';
+import { useAudioPlayer } from '@/app/components/AudioPlayerContext';
+import { useIsMobile } from '@/hooks/use-mobile';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Play, Heart, Music, Shuffle } from 'lucide-react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { UserProfile } from './UserProfile';
+
+interface SongRecommendationsProps {
+  userName?: string;
+}
+
+export function SongRecommendations({ userName }: SongRecommendationsProps) {
+  const { api } = useNavidrome();
+  const { playTrack, shuffle, toggleShuffle } = useAudioPlayer();
+  const isMobile = useIsMobile();
+  const [recommendedSongs, setRecommendedSongs] = useState<Song[]>([]);
+  const [recommendedAlbums, setRecommendedAlbums] = useState<Album[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [songStates, setSongStates] = useState<Record<string, boolean>>({});
+
+  // Memoize the greeting to prevent recalculation
+  const greeting = useMemo(() => {
+    const hour = new Date().getHours();
+    return hour < 12 ? 'Good morning' : hour < 18 ? 'Good afternoon' : 'Good evening';
+  }, []);
+
+  // Memoized callbacks to prevent re-renders
+  const handleImageLoad = useCallback(() => {
+    // Image loaded - no state update needed to prevent re-renders
+  }, []);
+
+  const handleImageError = useCallback(() => {
+    // Image error - no state update needed to prevent re-renders
+  }, []);
+
+  useEffect(() => {
+    const loadRecommendations = async () => {
+      setLoading(true);
+      try {
+        const api = getNavidromeAPI();
+        
+        if (api) {
+          // Use server-side recommendations
+          const randomAlbums = await api.getAlbums('random', 10);
+          if (isMobile) {
+            setRecommendedAlbums(randomAlbums.slice(0, 6));
+          } else {
+            const allSongs: Song[] = [];
+            for (let i = 0; i < Math.min(3, randomAlbums.length); i++) {
+              try {
+                const albumSongs = await api.getAlbumSongs(randomAlbums[i].id);
+                allSongs.push(...albumSongs);
+              } catch (error) {
+                console.error('Failed to get album songs:', error);
+              }
+            }
+            const shuffled = allSongs.sort(() => Math.random() - 0.5);
+            const recommendations = shuffled.slice(0, 6);
+            setRecommendedSongs(recommendations);
+            const states: Record<string, boolean> = {};
+            recommendations.forEach((song: Song) => { states[song.id] = !!song.starred; });
+            setSongStates(states);
+          }
+        }
+      } catch (error) {
+        console.error('Failed to load recommendations:', error);
+        setRecommendedAlbums([]);
+        setRecommendedSongs([]);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadRecommendations();
+  }, [isMobile]);
+
+  const handlePlaySong = async (song: Song) => {
+    try {
+      const api = getNavidromeAPI();
+      if (!api) return;
+      
+      const url = api.getStreamUrl(song.id);
+      const coverArt = song.coverArt ? api.getCoverArtUrl(song.coverArt, 300) : undefined;
+      const track = {
+        id: song.id,
+        name: song.title,
+        url,
+        artist: song.artist || 'Unknown Artist',
+        artistId: song.artistId || '',
+        album: song.album || 'Unknown Album',
+        albumId: song.albumId || '',
+        duration: song.duration || 0,
+        coverArt,
+        starred: !!song.starred
+      };
+      await playTrack(track, true);
+    } catch (error) {
+      console.error('Failed to play song:', error);
+    }
+  };
+
+  const handlePlayAlbum = async (album: Album) => {
+    try {
+      const api = getNavidromeAPI();
+      if (!api) return;
+      
+      const albumSongs = await api.getAlbumSongs(album.id);
+      if (albumSongs.length > 0) {
+        const first = albumSongs[0];
+        const url = api.getStreamUrl(first.id);
+        const coverArt = first.coverArt ? api.getCoverArtUrl(first.coverArt, 300) : undefined;
+        const track = {
+          id: first.id,
+          name: first.title,
+          url,
+          artist: first.artist || 'Unknown Artist',
+          artistId: first.artistId || '',
+          album: first.album || 'Unknown Album',
+          albumId: first.albumId || '',
+          duration: first.duration || 0,
+          coverArt,
+          starred: !!first.starred
+        };
+        await playTrack(track, true);
+      }
+    } catch (error) {
+      console.error('Failed to play album:', error);
+    }
+  };
+
+  const handleShuffleAll = async () => {
+    if (isMobile && recommendedAlbums.length === 0) return;
+    if (!isMobile && recommendedSongs.length === 0) return;
+    
+    // Enable shuffle if not already on
+    if (!shuffle) {
+      toggleShuffle();
+    }
+    
+    if (isMobile) {
+      // Play a random album
+      const randomAlbum = recommendedAlbums[Math.floor(Math.random() * recommendedAlbums.length)];
+      await handlePlayAlbum(randomAlbum);
+    } else {
+      // Play a random song from recommendations
+      const randomSong = recommendedSongs[Math.floor(Math.random() * recommendedSongs.length)];
+      await handlePlaySong(randomSong);
+    }
+  };
+
+  const formatDuration = (duration: number): string => {
+    const minutes = Math.floor(duration / 60);
+    const seconds = duration % 60;
+    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+  };
+
+  if (loading) {
+    return (
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <div className="h-8 w-48 bg-muted animate-pulse rounded" />
+          <div className="h-4 w-64 bg-muted animate-pulse rounded" />
+        </div>
+        {isMobile ? (
+          <div className="grid grid-cols-3 gap-3">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <div key={i} className="aspect-square bg-muted animate-pulse rounded" />
+            ))}
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <div key={i} className="h-16 bg-muted animate-pulse rounded" />
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-2xl font-bold">
+            {greeting}{userName ? `, ${userName}` : ''}!
+          </h2>
+          <p className="text-muted-foreground">
+            {isMobile ? 'Here are some albums you might enjoy' : 'Here are some songs you might enjoy'}
+          </p>
+        </div>
+        <div className="flex items-center gap-3">
+          {/* Mobile User Profile */}
+          {isMobile && <UserProfile variant="mobile" />}
+          
+          {/* Shuffle All Button (Desktop only) */}
+          {(isMobile ? recommendedAlbums.length > 0 : recommendedSongs.length > 0) && !isMobile && (
+            <Button onClick={handleShuffleAll} variant="outline" size="sm">
+              <Shuffle className="w-4 h-4 mr-2" />
+              Shuffle All
+            </Button>
+          )}
+        </div>
+      </div>
+      
+      {isMobile ? (
+        /* Mobile: Show albums in 3x2 grid */
+        recommendedAlbums.length > 0 ? (
+          <div className="grid grid-cols-3 gap-3">
+            {recommendedAlbums.map((album) => (
+              <div key={album.id} className="space-y-2">
+                <Link
+                  href={`/album/${album.id}`}
+                  className="group cursor-pointer block"
+                >
+                  <div className="relative aspect-square rounded-lg overflow-hidden bg-muted">
+                    {album.coverArt && getNavidromeAPI() ? (
+                      <Image
+            src={getNavidromeAPI()!.getCoverArtUrl(album.coverArt, 300)}
+                        alt={album.name}
+                        width={600}
+                        height={600}
+                        className="object-cover"
+                        sizes="(max-width: 768px) 33vw, 200px"
+                        onLoad={handleImageLoad}
+                        onError={handleImageError}
+                        loading="lazy"
+                      />
+                    ) : (
+                      <div className="w-full h-full flex items-center justify-center">
+                        <Music className="w-8 h-8 text-muted-foreground" />
+                      </div>
+                    )}
+                  </div>
+                </Link>
+                <div className="space-y-1">
+                  <Link 
+                    href={`/album/${album.id}`}
+                    className="font-medium text-sm truncate hover:underline block"
+                  >
+                    {album.name}
+                  </Link>
+                  <Link 
+                    href={`/artist/${album.artistId || album.artist}`}
+                    className="text-xs text-muted-foreground truncate hover:underline block"
+                  >
+                    {album.artist}
+                  </Link>
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <Card>
+            <CardContent className="p-6 text-center">
+              <Music className="w-12 h-12 mx-auto mb-4 text-muted-foreground" />
+              <p className="text-muted-foreground">
+                No albums available for recommendations
+              </p>
+            </CardContent>
+          </Card>
+        )
+      ) : (
+        /* Desktop: Show songs in original format */
+        recommendedSongs.length > 0 ? (
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+            {recommendedSongs.map((song) => (
+              <Card 
+                key={song.id} 
+                className="group cursor-pointer hover:bg-accent/50 transition-colors py-2"
+                onClick={() => handlePlaySong(song)}
+              >
+                <CardContent className="px-2">
+                  <div className="flex items-center gap-3">
+                    <div className="relative w-12 h-12 rounded overflow-hidden bg-muted flex-shrink-0">
+                      {song.coverArt && getNavidromeAPI() ? (
+                        <>
+                          <Image
+            src={getNavidromeAPI()!.getCoverArtUrl(song.coverArt, 48)}
+                            alt={song.title}
+                            fill
+                            className="object-cover"
+                            sizes="48px"
+                            onLoad={handleImageLoad}
+                            onError={handleImageError}
+                            loading="lazy"
+                          />
+                          <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+                            <Play className="w-4 h-4 text-white" />
+                          </div>
+                        </>
+                      ) : (
+                        <div className="w-full h-full flex items-center justify-center">
+                          <Music className="w-6 h-6 text-muted-foreground" />
+                        </div>
+                      )}
+                    </div>
+                    
+                    <div className="flex-1 min-w-0">
+                      <p className="font-medium truncate">{song.title}</p>
+                      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                        <Link 
+                          href={`/artist/${song.artistId}`}
+                          className="hover:underline truncate"
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          {song.artist}
+                        </Link>
+                        {song.duration && (
+                          <>
+                            <span>•</span>
+                            <span>{formatDuration(song.duration)}</span>
+                          </>
+                        )}
+                      </div>
+                    </div>
+                    
+                    {songStates[song.id] && (
+                      <Heart className="w-4 h-4 text-primary flex-shrink-0" fill="currentColor" />
+                    )}
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        ) : (
+          <Card>
+            <CardContent className="p-6 text-center">
+              <Music className="w-12 h-12 mx-auto mb-4 text-muted-foreground" />
+              <p className="text-muted-foreground">
+                No songs available for recommendations
+              </p>
+            </CardContent>
+          </Card>
+        )
+      )}
+    </div>
+  );
+}

app/components/SpotlightSearch.tsx

@@ -0,0 +1,653 @@
+'use client';
+
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useRouter } from 'next/navigation';
+import { 
+  Search, 
+  X, 
+  Music, 
+  Disc, 
+  User, 
+  Clock, 
+  Heart,
+  Play,
+  Plus,
+  ExternalLink,
+  Info,
+  Star,
+  TrendingUp,
+  Users,
+  Calendar,
+  Globe
+} from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Separator } from '@/components/ui/separator';
+import { useNavidrome } from '@/app/components/NavidromeContext';
+import { useAudioPlayer } from '@/app/components/AudioPlayerContext';
+import { lastFmAPI } from '@/lib/lastfm-api';
+import { Song, Album, Artist, getNavidromeAPI } from '@/lib/navidrome';
+import { useKeyboardShortcuts } from '@/hooks/use-keyboard-shortcuts';
+import Image from 'next/image';
+
+interface SpotlightSearchProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+interface LastFmTrackInfo {
+  name: string;
+  artist: {
+    name: string;
+    url: string;
+  };
+  album?: {
+    title: string;
+    image?: string;
+  };
+  wiki?: {
+    summary: string;
+    content: string;
+  };
+  duration?: string;
+  playcount?: string;
+  listeners?: string;
+  tags?: Array<{
+    name: string;
+    url: string;
+  }>;
+}
+
+interface LastFmTag {
+  name: string;
+  url: string;
+}
+
+interface LastFmArtist {
+  name: string;
+  url: string;
+  image?: Array<{ '#text': string; size: string }>;
+}
+
+interface LastFmBio {
+  summary: string;
+  content: string;
+}
+
+interface LastFmStats {
+  listeners: string;
+  playcount: string;
+}
+
+interface LastFmArtistInfo {
+  name: string;
+  bio?: LastFmBio;
+  stats?: LastFmStats;
+  tags?: {
+    tag: LastFmTag[];
+  };
+  similar?: {
+    artist: LastFmArtist[];
+  };
+  image?: Array<{ '#text': string; size: string }>;
+}
+
+interface SearchResult {
+  type: 'track' | 'album' | 'artist';
+  id: string;
+  title: string;
+  subtitle: string;
+  image?: string;
+  data: Song | Album | Artist;
+  lastFmData?: LastFmArtistInfo;
+}
+
+export function SpotlightSearch({ isOpen, onClose }: SpotlightSearchProps) {
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState<SearchResult[]>([]);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+  const [showDetails, setShowDetails] = useState(false);
+  const [selectedResult, setSelectedResult] = useState<SearchResult | null>(null);
+  const [lastFmDetails, setLastFmDetails] = useState<LastFmArtistInfo | null>(null);
+  
+  const inputRef = useRef<HTMLInputElement>(null);
+  const resultsRef = useRef<HTMLDivElement>(null);
+  const router = useRouter();
+  const api = getNavidromeAPI();
+  
+  const { search2 } = useNavidrome();
+  const { playTrack, addToQueue, insertAtBeginningOfQueue } = useAudioPlayer();
+
+  // Convert Song to Track with proper URL generation
+  const songToTrack = useCallback((song: Song) => {
+    if (!api) {
+      throw new Error('Navidrome API not configured');
+    }
+    
+    return {
+      id: song.id,
+      name: song.title,
+      url: api.getStreamUrl(song.id),
+      artist: song.artist,
+      album: song.album,
+      duration: song.duration,
+      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 512) : undefined,
+      albumId: song.albumId,
+      artistId: song.artistId,
+      starred: !!song.starred,
+      replayGain: song.replayGain || 0
+    };
+  }, [api]);
+
+  // Focus input when opened
+  useEffect(() => {
+    if (isOpen && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isOpen]);
+
+  // Close on escape
+  useKeyboardShortcuts({
+    disabled: !isOpen
+  });
+
+  // Handle keyboard navigation
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      switch (e.key) {
+        case 'ArrowDown':
+          e.preventDefault();
+          setSelectedIndex(prev => Math.min(prev + 1, results.length - 1));
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+          setSelectedIndex(prev => Math.max(prev - 1, 0));
+          break;
+        case 'Enter':
+          e.preventDefault();
+          if (results[selectedIndex]) {
+            handleResultSelect(results[selectedIndex]);
+          }
+          break;
+        case 'Escape':
+          e.preventDefault();
+          if (showDetails) {
+            setShowDetails(false);
+            setSelectedResult(null);
+          } else {
+            onClose();
+          }
+          break;
+        case 'Tab':
+          e.preventDefault();
+          if (results[selectedIndex]) {
+            handleShowDetails(results[selectedIndex]);
+          }
+          break;
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, results, selectedIndex, showDetails, onClose]);
+
+  // Search function with debouncing
+  const performSearch = useCallback(async (searchQuery: string) => {
+    if (!searchQuery.trim()) {
+      setResults([]);
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      const searchResults = await search2(searchQuery);
+      const formattedResults: SearchResult[] = [];
+
+      // Add tracks
+      searchResults.songs?.forEach(song => {
+        formattedResults.push({
+          type: 'track',
+          id: song.id,
+          title: song.title,
+          subtitle: `${song.artist} • ${song.album}`,
+          image: song.coverArt && api ? api.getCoverArtUrl(song.coverArt, 256) : undefined,
+          data: song
+        });
+      });
+
+      // Add albums
+      searchResults.albums?.forEach(album => {
+        formattedResults.push({
+          type: 'album',
+          id: album.id,
+          title: album.name,
+          subtitle: `${album.artist} • ${album.songCount} tracks`,
+          image: album.coverArt && api ? api.getCoverArtUrl(album.coverArt, 256) : undefined,
+          data: album
+        });
+      });
+
+      // Add artists
+      searchResults.artists?.forEach(artist => {
+        formattedResults.push({
+          type: 'artist',
+          id: artist.id,
+          title: artist.name,
+          subtitle: `${artist.albumCount} albums`,
+          image: artist.coverArt && api ? api.getCoverArtUrl(artist.coverArt, 256) : undefined,
+          data: artist
+        });
+      });
+
+      setResults(formattedResults);
+      setSelectedIndex(0);
+    } catch (error) {
+      console.error('Search failed:', error);
+      setResults([]);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [search2]);
+
+  // Debounced search
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      performSearch(query);
+    }, 300);
+
+    return () => clearTimeout(timeoutId);
+  }, [query, performSearch]);
+
+  const handleResultSelect = (result: SearchResult) => {
+    switch (result.type) {
+      case 'track':
+        const songData = result.data as Song;
+        const track = songToTrack(songData);
+        playTrack(track, true);
+        onClose();
+        break;
+      case 'album':
+        router.push(`/album/${result.id}`);
+        onClose();
+        break;
+      case 'artist':
+        router.push(`/artist/${result.id}`);
+        onClose();
+        break;
+    }
+  };
+
+  const handleShowDetails = async (result: SearchResult) => {
+    setSelectedResult(result);
+    setShowDetails(true);
+    setLastFmDetails(null);
+
+    // Fetch Last.fm data
+    try {
+      let lastFmData = null;
+      
+      if (result.type === 'artist') {
+        const artistData = result.data as Artist;
+        lastFmData = await lastFmAPI.getArtistInfo(artistData.name);
+      } else if (result.type === 'album') {
+        // For albums, get artist info as Last.fm album info is limited
+        const albumData = result.data as Album;
+        lastFmData = await lastFmAPI.getArtistInfo(albumData.artist);
+      } else if (result.type === 'track') {
+        // For tracks, get artist info
+        const songData = result.data as Song;
+        lastFmData = await lastFmAPI.getArtistInfo(songData.artist);
+      }
+      
+      setLastFmDetails(lastFmData);
+    } catch (error) {
+      console.error('Failed to fetch Last.fm data:', error);
+    }
+  };
+
+  const handlePlayNext = (result: SearchResult) => {
+    if (result.type === 'track') {
+      const songData = result.data as Song;
+      const track = songToTrack(songData);
+      insertAtBeginningOfQueue(track);
+    }
+  };
+
+  const handleAddToQueue = (result: SearchResult) => {
+    if (result.type === 'track') {
+      const songData = result.data as Song;
+      const track = songToTrack(songData);
+      addToQueue(track);
+    }
+  };
+
+  const getResultIcon = (type: string) => {
+    switch (type) {
+      case 'track': return <Music className="w-4 h-4" />;
+      case 'album': return <Disc className="w-4 h-4" />;
+      case 'artist': return <User className="w-4 h-4" />;
+      default: return <Search className="w-4 h-4" />;
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        className="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+        onClick={onClose}
+      >
+        <div className="flex items-start justify-center pt-[10vh] px-4">
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95, y: -20 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.95, y: -20 }}
+            transition={{ type: "spring", duration: 0.4 }}
+            className="w-full max-w-2xl bg-background border border-border rounded-lg shadow-2xl overflow-hidden"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {/* Search Input */}
+            <div className="flex items-center px-4 py-3 border-b border-border">
+              <Search className="w-5 h-5 text-muted-foreground mr-3" />
+              <Input
+                ref={inputRef}
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder="Search tracks, albums, artists..."
+                className="border-0 focus-visible:ring-0 text-lg bg-transparent"
+              />
+              {query && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setQuery('')}
+                  className="p-1 h-auto"
+                >
+                  <X className="w-4 h-4" />
+                </Button>
+              )}
+            </div>
+
+            {/* Results */}
+            <div className="max-h-96 overflow-hidden">
+              {isLoading ? (
+                <div className="flex items-center justify-center py-8">
+                  <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary"></div>
+                  <span className="ml-2 text-muted-foreground">Searching...</span>
+                </div>
+              ) : results.length > 0 ? (
+                <ScrollArea className="max-h-96" ref={resultsRef}>
+                  <div className="py-2">
+                    {results.map((result, index) => (
+                      <div
+                        key={`${result.type}-${result.id}`}
+                        className={`flex items-center px-4 py-3 cursor-pointer transition-colors ${
+                          index === selectedIndex ? 'bg-accent' : 'hover:bg-accent/50'
+                        }`}
+                        onClick={() => handleResultSelect(result)}
+                        onMouseEnter={() => setSelectedIndex(index)}
+                      >
+                        <div className="flex items-center space-x-3 flex-1 min-w-0">
+                          {result.image ? (
+                            <Image
+                              src={result.image}
+                              alt={result.title}
+                              width={40}
+                              height={40}
+                              className="w-10 h-10 rounded object-cover"
+                            />
+                          ) : (
+                            <div className="w-10 h-10 rounded bg-muted flex items-center justify-center">
+                              {getResultIcon(result.type)}
+                            </div>
+                          )}
+                          <div className="flex-1 min-w-0">
+                            <div className="font-medium truncate">{result.title}</div>
+                            <div className="text-sm text-muted-foreground truncate">
+                              {result.subtitle}
+                            </div>
+                          </div>
+                          <Badge variant="secondary" className="capitalize">
+                            {result.type}
+                          </Badge>
+                        </div>
+                        
+                        {/* Quick Actions */}
+                        <div className="flex items-center space-x-1 ml-3">
+                          {result.type === 'track' && (
+                            <>
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handlePlayNext(result);
+                                }}
+                                className="h-8 w-8 p-0"
+                                title="Play Next"
+                              >
+                                <Play className="w-3 h-3" />
+                              </Button>
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handleAddToQueue(result);
+                                }}
+                                className="h-8 w-8 p-0"
+                                title="Add to Queue"
+                              >
+                                <Plus className="w-3 h-3" />
+                              </Button>
+                            </>
+                          )}
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              handleShowDetails(result);
+                            }}
+                            className="h-8 w-8 p-0"
+                            title="Show Details (Tab)"
+                          >
+                            <Info className="w-3 h-3" />
+                          </Button>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </ScrollArea>
+              ) : query.trim() ? (
+                <div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
+                  <Search className="w-8 h-8 mb-2" />
+                  <p>No results found for &ldquo;{query}&rdquo;</p>
+                </div>
+              ) : (
+                <div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
+                  <Music className="w-8 h-8 mb-2" />
+                  <p>Start typing to search your music library</p>
+                  <div className="text-xs mt-2 space-y-1">
+                    <p>• Use ↑↓ to navigate • Enter to select</p>
+                    <p>• Tab for details • Esc to close</p>
+                  </div>
+                </div>
+              )}
+            </div>
+          </motion.div>
+        </div>
+
+        {/* Details Panel */}
+        <AnimatePresence>
+          {showDetails && selectedResult && (
+            <motion.div
+              initial={{ opacity: 0, x: 400 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: 400 }}
+              transition={{ type: "spring", duration: 0.4 }}
+              className="fixed right-4 top-[10vh] bottom-4 w-80 bg-background border border-border rounded-lg shadow-2xl overflow-hidden"
+            >
+              <div className="flex items-center justify-between p-4 border-b border-border">
+                <h3 className="font-semibold">Details</h3>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setShowDetails(false)}
+                  className="h-8 w-8 p-0"
+                >
+                  <X className="w-4 h-4" />
+                </Button>
+              </div>
+              
+              <ScrollArea className="h-full">
+                <div className="p-4 space-y-4">
+                  {/* Basic Info */}
+                  <div className="space-y-3">
+                    {selectedResult.image && (
+                      <Image
+                        src={selectedResult.image}
+                        alt={selectedResult.title}
+                        width={200}
+                        height={200}
+                        className="w-full aspect-square rounded object-cover"
+                      />
+                    )}
+                    <div>
+                      <h4 className="font-semibold text-lg">{selectedResult.title}</h4>
+                      <p className="text-muted-foreground">{selectedResult.subtitle}</p>
+                      <Badge variant="secondary" className="mt-1 capitalize">
+                        {selectedResult.type}
+                      </Badge>
+                    </div>
+                  </div>
+
+                  {/* Last.fm Data */}
+                  {lastFmDetails && (
+                    <>
+                      <Separator />
+                      <div className="space-y-3">
+                        <div className="flex items-center space-x-2">
+                          <ExternalLink className="w-4 h-4" />
+                          <span className="font-medium">Last.fm Info</span>
+                        </div>
+
+                        {/* Stats */}
+                        {lastFmDetails.stats && (
+                          <div className="grid grid-cols-2 gap-3">
+                            <div className="text-center p-2 bg-muted rounded">
+                              <div className="flex items-center justify-center space-x-1 mb-1">
+                                <Users className="w-3 h-3" />
+                                <span className="text-xs font-medium">Listeners</span>
+                              </div>
+                              <div className="text-sm font-semibold">
+                                {parseInt(lastFmDetails.stats.listeners).toLocaleString()}
+                              </div>
+                            </div>
+                            <div className="text-center p-2 bg-muted rounded">
+                              <div className="flex items-center justify-center space-x-1 mb-1">
+                                <TrendingUp className="w-3 h-3" />
+                                <span className="text-xs font-medium">Plays</span>
+                              </div>
+                              <div className="text-sm font-semibold">
+                                {parseInt(lastFmDetails.stats.playcount).toLocaleString()}
+                              </div>
+                            </div>
+                          </div>
+                        )}
+
+                        {/* Bio */}
+                        {lastFmDetails.bio?.summary && (
+                          <div>
+                            <h5 className="font-medium mb-2">Biography</h5>
+                            <p className="text-sm text-muted-foreground leading-relaxed">
+                              {lastFmDetails.bio.summary.replace(/<[^>]*>/g, '').split('\n')[0]}
+                            </p>
+                          </div>
+                        )}
+
+                        {/* Tags */}
+                        {lastFmDetails.tags?.tag && (
+                          <div>
+                            <h5 className="font-medium mb-2">Tags</h5>
+                            <div className="flex flex-wrap gap-1">
+                              {lastFmDetails.tags.tag.slice(0, 6).map((tag: LastFmTag, index: number) => (
+                                <Badge key={index} variant="outline" className="text-xs">
+                                  {tag.name}
+                                </Badge>
+                              ))}
+                            </div>
+                          </div>
+                        )}
+
+                        {/* Similar Artists */}
+                        {lastFmDetails.similar?.artist && (
+                          <div>
+                            <h5 className="font-medium mb-2">Similar Artists</h5>
+                            <div className="space-y-2">
+                              {lastFmDetails.similar.artist.slice(0, 4).map((artist: LastFmArtist, index: number) => (
+                                <div key={index} className="flex items-center space-x-2">
+                                  <div className="w-8 h-8 bg-muted rounded flex items-center justify-center">
+                                    <User className="w-3 h-3" />
+                                  </div>
+                                  <span className="text-sm">{artist.name}</span>
+                                </div>
+                              ))}
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    </>
+                  )}
+
+                  {/* Actions */}
+                  <Separator />
+                  <div className="space-y-2">
+                    <Button
+                      onClick={() => handleResultSelect(selectedResult)}
+                      className="w-full"
+                    >
+                      <Play className="w-4 h-4 mr-2" />
+                      {selectedResult.type === 'track' ? 'Play Track' : 
+                       selectedResult.type === 'album' ? 'View Album' : 'View Artist'}
+                    </Button>
+                    {selectedResult.type === 'track' && (
+                      <>
+                        <Button
+                          variant="outline"
+                          onClick={() => handlePlayNext(selectedResult)}
+                          className="w-full"
+                        >
+                          <Play className="w-4 h-4 mr-2" />
+                          Play Next
+                        </Button>
+                        <Button
+                          variant="outline"
+                          onClick={() => handleAddToQueue(selectedResult)}
+                          className="w-full"
+                        >
+                          <Plus className="w-4 h-4 mr-2" />
+                          Add to Queue
+                        </Button>
+                      </>
+                    )}
+                  </div>
+                </div>
+              </ScrollArea>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </motion.div>
+    </AnimatePresence>
+  );
+}

app/components/ThemeColorHandler.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import { useViewportThemeColor } from '@/hooks/use-viewport-theme-color';
+
+export default function ThemeColorHandler() {
+  useViewportThemeColor();
+  return null;
+}

app/components/ThemeProvider.tsx

@@ -2,12 +2,14 @@
 
 import React, { createContext, useContext, useEffect, useState } from 'react';
 
-
-type Theme = 'blue' | 'violet' | 'red' | 'rose' | 'orange' | 'green' | 'yellow';
+type Theme = 'default' | 'blue' | 'violet' | 'red' | 'rose' | 'orange' | 'green' | 'yellow';
+type Mode = 'light' | 'dark' | 'system';
 
 interface ThemeContextType {
   theme: Theme;
+  mode: Mode;
   setTheme: (theme: Theme) => void;
+  setMode: (mode: Mode) => void;
 }
 
 const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
@@ -25,18 +27,25 @@ interface ThemeProviderProps {
 }
 
 export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
-  const [theme, setTheme] = useState<Theme>('blue');
+  const [theme, setTheme] = useState<Theme>('default');
+  const [mode, setMode] = useState<Mode>('system');
   const [mounted, setMounted] = useState(false);
 
   // Load theme settings from localStorage on component mount
   useEffect(() => {
     setMounted(true);
     const savedTheme = localStorage.getItem('theme');
-    const validThemes: Theme[] = ['blue', 'violet', 'red', 'rose', 'orange', 'green', 'yellow'];
+    const savedMode = localStorage.getItem('theme-mode');
+    const validThemes: Theme[] = ['default', 'blue', 'violet', 'red', 'rose', 'orange', 'green', 'yellow'];
+    const validModes: Mode[] = ['light', 'dark', 'system'];
     
     if (savedTheme && validThemes.includes(savedTheme as Theme)) {
       setTheme(savedTheme as Theme);
     }
+    
+    if (savedMode && validModes.includes(savedMode as Mode)) {
+      setMode(savedMode as Mode);
+    }
   }, []);
 
   // Apply theme changes
@@ -46,35 +55,54 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
     const root = document.documentElement;
     
     // Remove existing theme classes
-    root.classList.remove('theme-blue', 'theme-violet', 'theme-red', 'theme-rose', 'theme-orange', 'theme-green', 'theme-yellow', 'dark');
+    root.classList.remove('theme-default', 'theme-blue', 'theme-violet', 'theme-red', 'theme-rose', 'theme-orange', 'theme-green', 'theme-yellow', 'dark');
     
     // Add new theme class
     root.classList.add(`theme-${theme}`);
     
-    // Always follow system preference for dark mode
-    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-    const applySystemTheme = () => {
-      root.classList.toggle('dark', mediaQuery.matches);
+    // Apply dark/light mode
+    const applyMode = () => {
+      if (mode === 'dark') {
+        root.classList.add('dark');
+      } else if (mode === 'light') {
+        root.classList.remove('dark');
+      } else { // system
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        root.classList.toggle('dark', mediaQuery.matches);
+      }
     };
     
-    applySystemTheme();
-    mediaQuery.addEventListener('change', applySystemTheme);
+    applyMode();
     
-    // Save theme to localStorage
+    // Listen for system preference changes only if mode is 'system'
+    let mediaQuery: MediaQueryList | null = null;
+    if (mode === 'system') {
+      mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      mediaQuery.addEventListener('change', applyMode);
+    }
+    
+    // Save settings to localStorage
     localStorage.setItem('theme', theme);
+    localStorage.setItem('theme-mode', mode);
     
     // Cleanup listener
-    return () => mediaQuery.removeEventListener('change', applySystemTheme);
-  }, [theme, mounted]);
+    return () => {
+      if (mediaQuery) {
+        mediaQuery.removeEventListener('change', applyMode);
+      }
+    };
+  }, [theme, mode, mounted]);
 
   return (
     <ThemeContext.Provider
       value={{
         theme,
+        mode,
         setTheme,
+        setMode,
       }}
     >
-      <div className={`theme-${theme}`}>
+      <div>
         {children}
       </div>
     </ThemeContext.Provider>

app/components/UserProfile.tsx

@@ -0,0 +1,210 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { User, ChevronDown, Settings, LogOut } from 'lucide-react';
+import { useNavidrome } from '@/app/components/NavidromeContext';
+import { getGravatarUrl } from '@/lib/gravatar';
+import { User as NavidromeUser } from '@/lib/navidrome';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Button } from '@/components/ui/button';
+
+interface UserProfileProps {
+  variant?: 'desktop' | 'mobile';
+}
+
+export function UserProfile({ variant = 'desktop' }: UserProfileProps) {
+  const { api, isConnected } = useNavidrome();
+  const [userInfo, setUserInfo] = useState<NavidromeUser | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchUserInfo = async () => {
+      if (!api || !isConnected) {
+        setLoading(false);
+        return;
+      }
+
+      try {
+        const user = await api.getUserInfo();
+        setUserInfo(user);
+      } catch (error) {
+        console.error('Failed to fetch user info:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchUserInfo();
+  }, [api, isConnected]);
+
+  const handleLogout = () => {
+    // Clear Navidrome config and reload
+    localStorage.removeItem('navidrome-config');
+    window.location.reload();
+  };
+
+  if (!userInfo) {
+    if (variant === 'desktop') {
+      return (
+        <Link href="/settings">
+          <Button variant="ghost" size="sm" className="gap-2">
+            <User className="w-4 h-4" />
+          </Button>
+        </Link>
+      );
+    } else {
+      return (
+        <Link href="/settings">
+          <Button variant="ghost" size="sm" className="gap-2">
+            <User className="w-4 h-4" />
+          </Button>
+        </Link>
+      );
+    }
+  }
+
+  const gravatarUrl = userInfo.email 
+    ? getGravatarUrl(userInfo.email, variant === 'desktop' ? 32 : 48, 'identicon')
+    : null;
+
+  if (variant === 'desktop') {
+    // Desktop: Only show profile icon
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" className="flex items-center gap-1 h-auto p-2">
+            {gravatarUrl ? (
+              <Image
+                src={gravatarUrl}
+                alt={`${userInfo.username}'s avatar`}
+                width={16}
+                height={16}
+                className="rounded-full"
+                onError={(e) => {
+                  const target = e.target as HTMLImageElement;
+                  target.style.display = 'none';
+                }}
+              />
+            ) : (
+                <div className="w-4 h-4 bg-primary/10 rounded-full flex items-center justify-center">
+                <User className="w-2 h-2 text-primary" />
+                </div>
+            )}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-56">
+          <div className="flex items-center gap-2 p-2">
+            {gravatarUrl ? (
+              <Image
+                src={gravatarUrl}
+                alt={`${userInfo.username}'s avatar`}
+                width={32}
+                height={32}
+                className="rounded-full"
+              />
+            ) : (
+              <div className="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center">
+                <User className="w-5 h-5 text-primary" />
+              </div>
+            )}
+            <div>
+              <p className="text-sm font-medium">{userInfo.username}</p>
+              {userInfo.email && (
+                <p className="text-xs text-muted-foreground">{userInfo.email}</p>
+              )}
+            </div>
+          </div>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem asChild>
+            <Link href="/settings" className="flex items-center gap-2">
+              <Settings className="w-4 h-4" />
+              Settings
+            </Link>
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem 
+            onClick={handleLogout}
+            className="flex items-center gap-2 text-red-600 focus:text-red-600"
+          >
+            <LogOut className="w-4 h-4" />
+            Logout
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+  } else {
+    // Mobile: Show only icon with dropdown
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" className="flex items-center gap-1 h-auto p-2">
+            {gravatarUrl ? (
+              <Image
+                src={gravatarUrl}
+                alt={`${userInfo.username}'s avatar`}
+                width={32}
+                height={32}
+                className="rounded-full"
+                onError={(e) => {
+                  const target = e.target as HTMLImageElement;
+                  target.style.display = 'none';
+                }}
+              />
+            ) : (
+              <div className="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center">
+                <User className="w-4 h-4 text-primary" />
+              </div>
+            )}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-56">
+          <div className="flex items-center gap-2 p-2">
+            {gravatarUrl ? (
+              <Image
+                src={gravatarUrl}
+                alt={`${userInfo.username}'s avatar`}
+                width={32}
+                height={32}
+                className="rounded-full"
+              />
+            ) : (
+              <div className="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center">
+                <User className="w-5 h-5 text-primary" />
+              </div>
+            )}
+            <div>
+              <p className="text-sm font-medium">{userInfo.username}</p>
+              {userInfo.email && (
+                <p className="text-xs text-muted-foreground">{userInfo.email}</p>
+              )}
+            </div>
+          </div>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem asChild>
+            <Link href="/settings" className="flex items-center gap-2">
+              <Settings className="w-4 h-4" />
+              Settings
+            </Link>
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem 
+            onClick={handleLogout}
+            className="flex items-center gap-2 text-red-600 focus:text-red-600"
+          >
+            <LogOut className="w-4 h-4" />
+            Logout
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+  }
+}
+

app/components/WhatsNewPopup.tsx

@@ -1,17 +1,93 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
-import { ScrollArea } from '@/components/ui/scroll-area';
 
 // Current app version from package.json
-const APP_VERSION = '2025.07.02';
+const APP_VERSION = '2026.01.24';
 
 // Changelog data - add new versions at the top
 const CHANGELOG = [
-    {
+  {
+    version: '2026.01.24',
+    title: 'January 2026 Update',
+    changes: [
+      'Improved SortableQueueItem component with enhanced click handling and styling',
+      'Added keyboard shortcuts and queue management features',
+      'Added ListeningStreakCard component for tracking listening streaks',
+      'Moved service worker registration to dedicated component for improved client-side handling',
+      'Implemented Auto-Tagging Settings and MusicBrainz integration',
+      'Enhanced audio settings with ReplayGain, crossfade, and equalizer presets',
+      'Added AudioSettingsDialog component',
+      'Updated cover art retrieval to use higher resolution images',
+      'Enhanced UI with Framer Motion animations for album artwork and artist icons',
+      'Added page transition animations and notification settings for audio playback',
+      'Updated all npm subdependencies to latest minor versions',
+    ],
+    fixes: [
+      'Updated README formatting and improved content clarity',
+    ],
+    breaking: [
+      'Removed PostHog analytics tracking',
+      'Removed all offline download and caching functionality',
+    ]
+  },
+  {
+    version: '2025.07.31',
+    title: 'July End of Month Update',
+    changes: [
+      'Native support for moblie devices (using pwa)', 
+    ],
+    fixes: [
+      'Fixed issue with mobile navigation bar not displaying correctly',
+      'Improved performance on mobile devices',
+      'Resolved layout issues on smaller screens',
+      'Fixed audio player controls not responding on mobile',
+      'Improved touch interactions for better usability',
+      'Fixed issue with album artwork not loading on mobile',
+      'Resolved bug with search functionality on mobile devices',
+      'Improved caching for faster load times on mobile',
+    ],
+    breaking: [
+    ]
+  },
+  {
+    version: '2025.07.10',
+    title: 'July Major Update',
+    changes: [
+      // New Features
+      'Support for Rich PWA Installs',
+      'Added right-click shortcuts to the PWA icon',
+      'Onboarding now suggests Navidrome\'s Demo Server',
+      'User can export settings as a downloadable JSON',
+      'New sidebar layout (compact design)',
+      'New masonry-style grid in the settings page',
+      'New options in settings to customize appearance',
+      'Added 5 recently played albums and playlists created',
+      'New loading screen',
+      'New recommended songs section',
+      'Enhanced playlist page',
+      'Enhanced Home page layout and content',
+      'Themes updated to use OKLCH (from HSL)',
+      'All themes updated (light themes look similar)',
+      'Skeleton loading added across all pages'
+    ],
+    fixes: [
+      'Fixed skeleton loader on the Home screen',
+      'Fixed album page not showing correct album art',
+      'Fixed album page not showing correct artist',
+      'Fixed album page not showing correct song count',
+      'Fixed flash of onboarding when already onboarded',
+      'Fixed issue with audio player not resuming playback after pause',
+      'Resolved bug with search results not displaying correctly'
+    ],
+    breaking: [
+      // Technically not breaking, but notable:
+      'Removed extended sidebar layout for a cleaner look'
+    ]
+  },
+  {
     version: '2025.07.02',
     title: 'July Mini Update',
     changes: [
@@ -153,65 +229,86 @@ export function WhatsNewPopup() {
   );
 
   return (
-    <Dialog open={isOpen} onOpenChange={handleClose}>
-      <DialogContent className="max-w-2xl max-h-[80vh]">
-        <DialogHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
-          <div>
-            <DialogTitle className="text-2xl font-bold flex items-center gap-2">
-              What&apos;s New in Mice
-              <Badge variant="outline">
-                {tab === 'latest' ? currentVersionChangelog.version : archiveChangelog?.version}
-              </Badge>
-            </DialogTitle>
+    <>
+      {isOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center">
+          {/* Backdrop */}
+          <div 
+            className="fixed inset-0 bg-black/50" 
+            onClick={handleClose}
+          />
+          
+          {/* Dialog content */}
+          <div className="relative bg-background rounded-lg shadow-lg max-w-2xl w-full mx-4 max-h-[80vh] flex flex-col">
+            {/* Header */}
+            <div className="flex flex-row items-center justify-between space-y-0 p-6 pb-4 shrink-0">
+              <div>
+                <h2 className="text-2xl font-bold flex items-center gap-2">
+                  What&apos;s New in Mice
+                  <Badge variant="outline">
+                    {tab === 'latest' ? currentVersionChangelog.version : archiveChangelog?.version}
+                  </Badge>
+                </h2>
+              </div>
+              <button
+                onClick={handleClose}
+                className="text-muted-foreground hover:text-foreground transition-colors"
+              >
+                ✕
+              </button>
+            </div>
+
+            {/* Tabs */}
+            <div className="flex gap-2 px-6 pt-4 shrink-0">
+              <Button
+                variant={tab === 'latest' ? 'default' : 'outline'}
+                size="sm"
+                onClick={() => setTab('latest')}
+              >
+                Latest
+              </Button>
+              <Button
+                variant={tab === 'archive' ? 'default' : 'outline'}
+                size="sm"
+                onClick={() => setTab('archive')}
+                disabled={archiveChangelogs.length === 0}
+              >
+                Archive
+              </Button>
+              {tab === 'archive' && archiveChangelogs.length > 0 && (
+                <select
+                  className="ml-2 border rounded px-2 py-1 text-sm bg-background"
+                  value={selectedArchive}
+                  onChange={e => setSelectedArchive(e.target.value)}
+                >
+                  {archiveChangelogs.map(entry => (
+                    <option key={entry.version} value={entry.version}>
+                      {entry.version}
+                    </option>
+                  ))}
+                </select>
+              )}
+            </div>
+            
+            {/* Scrollable content */}
+            <div className="flex-1 overflow-y-auto px-6 py-4 min-h-0">
+              <div className="space-y-6">
+                {tab === 'latest'
+                  ? renderChangelog(currentVersionChangelog)
+                  : archiveChangelog && renderChangelog(archiveChangelog)}
+              </div>
+            </div>
+
+            {/* Footer button */}
+            <div className="flex justify-center p-6 pt-4 shrink-0">
+              <Button onClick={handleClose}>
+                Got it!
+              </Button>
+            </div>
           </div>
-        </DialogHeader>
-
-        {/* Tabs */}
-        <>
-        <div className="flex gap-2 mb-4">
-          <Button
-            variant={tab === 'latest' ? 'default' : 'outline'}
-            size="sm"
-            onClick={() => setTab('latest')}
-          >
-            Latest
-          </Button>
-          <Button
-            variant={tab === 'archive' ? 'default' : 'outline'}
-            size="sm"
-            onClick={() => setTab('archive')}
-            disabled={archiveChangelogs.length === 0}
-          >
-            Archive
-          </Button>
-          {tab === 'archive' && archiveChangelogs.length > 0 && (
-            <select
-              className="ml-2 border rounded px-2 py-1 text-sm"
-              value={selectedArchive}
-              onChange={e => setSelectedArchive(e.target.value)}
-            >
-              {archiveChangelogs.map(entry => (
-                <option key={entry.version} value={entry.version}>
-                  {entry.version}
-                </option>
-              ))}
-            </select>
-          )}
         </div>
-        <ScrollArea className="max-h-[60vh] pr-4">
-          {tab === 'latest'
-            ? renderChangelog(currentVersionChangelog)
-            : archiveChangelog && renderChangelog(archiveChangelog)}
-        </ScrollArea>
-
-        <div className="flex justify-center pt-4">
-          <Button onClick={handleClose}>
-            Got it!
-          </Button>
-        </div>
-        </>
-      </DialogContent>
-    </Dialog>
+      )}
+    </>
   );
 }
 

app/components/album-artwork.tsx

@@ -3,6 +3,7 @@
 import Image from "next/image"
 import { PlusCircledIcon } from "@radix-ui/react-icons"
 import { useRouter } from 'next/navigation';
+import { motion } from 'framer-motion';
 
 import { cn } from "@/lib/utils"
 import {
@@ -20,18 +21,22 @@ import { useNavidrome } from "./NavidromeContext"
 import Link from "next/link";
 import { useAudioPlayer, Track } from "@/app/components/AudioPlayerContext";
 import { getNavidromeAPI } from "@/lib/navidrome";
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { ArtistIcon } from "@/app/components/artist-icon";
-import { Heart, Music, Disc, Mic, Play } from "lucide-react";
+import { Heart, Music, Disc, Mic, Play, Download } from "lucide-react";
 import { Album, Artist, Song } from "@/lib/navidrome";
 
-interface AlbumArtworkProps extends React.HTMLAttributes<HTMLDivElement> {
+interface AlbumArtworkProps extends Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  'onDrag' | 'onDragStart' | 'onDragEnd' | 'onDragOver' | 'onDragEnter' | 'onDragLeave' | 'onDrop'
+> {
   album: Album
   aspectRatio?: "portrait" | "square"
   width?: number
   height?: number
+  loading?: 'eager' | 'lazy'
 }
 
 export function AlbumArtwork({
@@ -39,6 +44,7 @@ export function AlbumArtwork({
   aspectRatio = "portrait",
   width,
   height,
+  loading = 'lazy',
   className,
   ...props
 }: AlbumArtworkProps) {
@@ -46,11 +52,40 @@ export function AlbumArtwork({
   const router = useRouter();
   const { addAlbumToQueue, playTrack, addToQueue } = useAudioPlayer();
   const { playlists, starItem, unstarItem } = useNavidrome();
+  
+  // Memoize cover art URL with dynamic sizing
+  const coverArtUrl = useMemo(() => {
+    if (!api || !album.coverArt) return '/default-user.jpg';
+    
+    // Use width prop or default size for optimization
+    const imageSize = width || height || 300;
+    return api.getCoverArtUrl(album.coverArt, imageSize);
+  }, [api, album.coverArt, width, height]);
+
+  // Use callback to prevent function recreation on every render
+  const handleImageLoad = useCallback(() => {
+    // Image loaded successfully - no state update needed
+  }, []);
+
+  const handleImageError = useCallback(() => {
+    // Image failed to load - could set error state if needed
+  }, []);
 
   const handleClick = () => {
     router.push(`/album/${album.id}`);
   };
 
+  const handlePrefetch = () => {
+    try {
+      // Next.js App Router will prefetch on hover when using Link with prefetch
+      // but we also call router.prefetch to ensure programmatic prefetch when present.
+      const r = router as unknown as { prefetch?: (href: string) => Promise<void> | void };
+      if (r && typeof r.prefetch === 'function') {
+        r.prefetch(`/album/${album.id}`);
+      }
+    } catch {}
+  };
+
   const handleAddToQueue = () => {
     addAlbumToQueue(album.id);
   };
@@ -78,7 +113,7 @@ export function AlbumArtwork({
             artistId: song.artistId,
             url: api.getStreamUrl(song.id),
             duration: song.duration,
-            coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt) : undefined,
+            coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 1200) : undefined,
             starred: !!song.starred
           }));
           
@@ -103,42 +138,51 @@ export function AlbumArtwork({
         console.error('Failed to toggle favorite:', error);
       }
     };
-  // Get cover art URL with proper fallback
-  const coverArtUrl = album.coverArt && api
-    ? api.getCoverArtUrl(album.coverArt, 300)
-    : '/default-user.jpg';
-
+    
   return (
     <div className={cn("space-y-3", className)} {...props}>
+      <motion.div
+        initial={{ opacity: 0, y: 10 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true, amount: 0.15 }}
+        transition={{ duration: 0.2 }}
+        whileHover={{ y: -2 }}
+      >
       <ContextMenu>
         <ContextMenuTrigger>
-          <Card key={album.id} className="overflow-hidden cursor-pointer" onClick={() => handleClick()}>
-                              <div className="aspect-square relative group">
-                                  {album.coverArt && api ? (
-                                      <Image
-                                          src={api.getCoverArtUrl(album.coverArt)}
-                                          alt={album.name}
-                                          fill
-                                          className="w-full h-full object-cover"
-                                          sizes="(max-width: 768px) 100vw, 300px"
-                                      />
-                                  ) : (
-                                      <div className="w-full h-full bg-muted rounded flex items-center justify-center">
-                                          <Disc className="w-12 h-12 text-muted-foreground" />
-                                      </div>
-                                  )}
-                                  <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
-                                      <Play className="w-6 h-6 mx-auto hidden group-hover:block" onClick={() => handlePlayAlbum(album)}/>
-                                  </div>
-                              </div>
-                              <CardContent className="p-4">
-                                <h3 className="font-semibold truncate">{album.name}</h3>
-                                <p className="text-sm text-muted-foreground truncate " onClick={() => router.push(album.artistId)}>{album.artist}</p>
-                                <p className="text-xs text-muted-foreground mt-1">
-                                  {album.songCount} songs • {Math.floor(album.duration / 60)} min
-                                </p>
-                              </CardContent>
-                            </Card>
+          <Card key={album.id} className="overflow-hidden cursor-pointer px-0 py-0 gap-0" onClick={() => handleClick()} onMouseEnter={handlePrefetch} onFocus={handlePrefetch}>
+            <div className="aspect-square relative group">
+              {album.coverArt && api ? (
+                <Image
+                  src={coverArtUrl}
+                  alt={album.name}
+                  fill
+                  className="w-full h-full object-cover transition-all"
+                  sizes="(max-width: 768px) 100vw, 300px"
+                  onLoad={handleImageLoad}
+                  onError={handleImageError}
+                  priority={false}
+                  loading={loading}
+                />
+              ) : (
+                <div className="w-full h-full bg-muted rounded flex items-center justify-center">
+                  <Disc className="w-12 h-12 text-muted-foreground" />
+                </div>
+              )}
+              <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
+                <Play className="w-6 h-6 mx-auto hidden group-hover:block" onClick={() => handlePlayAlbum(album)}/>
+              </div>
+            </div>
+            <CardContent className="p-4">
+              <h3 className="font-semibold truncate">
+                <Link href={`/album/${album.id}`} prefetch>{album.name}</Link>
+              </h3>
+              <p className="text-sm text-muted-foreground truncate " onClick={() => router.push(album.artistId)}>{album.artist}</p>
+              <p className="text-xs text-muted-foreground mt-1">
+                {album.songCount} songs • {Math.floor(album.duration / 60)} min
+              </p>
+            </CardContent>
+          </Card>
           {/* <div onClick={handleClick} className="overflow-hidden rounded-md">
             <Image
               src={coverArtUrl}
@@ -148,7 +192,7 @@ export function AlbumArtwork({
               
               className={cn(
                 "w-full h-full object-cover transition-all hover:scale-105",
-                aspectRatio === "portrait" ? "aspect-[3/4]" : "aspect-square"
+                aspectRatio === "portrait" ? "aspect-3/4" : "aspect-square"
               )}
             />
           </div> */}
@@ -195,6 +239,7 @@ export function AlbumArtwork({
           <ContextMenuItem>Share</ContextMenuItem>
         </ContextMenuContent>
       </ContextMenu>
+      </motion.div>
     </div>
   )
 }

app/components/artist-icon.tsx

@@ -4,6 +4,7 @@ import Image from "next/image"
 import { PlusCircledIcon } from "@radix-ui/react-icons"
 import { useRouter } from 'next/navigation';
 import { cn } from "@/lib/utils"
+import { motion } from 'framer-motion'
 import {
   ContextMenu,
   ContextMenuContent,
@@ -25,12 +26,16 @@ interface ArtistIconProps extends React.HTMLAttributes<HTMLDivElement> {
   artist: Artist
   size?: number
   imageOnly?: boolean
+  responsive?: boolean
+  loading?: 'eager' | 'lazy'
 }
 
 export function ArtistIcon({
   artist,
   size = 150,
   imageOnly = false,
+  responsive = false,
+  loading = 'lazy',
   className,
   ...props
 }: ArtistIconProps) {
@@ -54,16 +59,16 @@ export function ArtistIcon({
       starItem(artist.id, 'artist');
     }
   };
-  // Get cover art URL with proper fallback
+  // Get cover art URL with proper fallback - use higher resolution for better quality
   const artistImageUrl = artist.coverArt && api
-    ? api.getCoverArtUrl(artist.coverArt, 200)
+    ? api.getCoverArtUrl(artist.coverArt, 320)
     : '/default-user.jpg';
 
   // If imageOnly is true, return just the image without context menu or text
   if (imageOnly) {
     return (
       <div 
-        className={cn("overflow-hidden rounded-full cursor-pointer flex-shrink-0", className)} 
+        className={cn("overflow-hidden rounded-full cursor-pointer shrink-0", className)} 
         onClick={handleClick}
         style={{ width: size, height: size }}
         {...props}
@@ -74,27 +79,47 @@ export function ArtistIcon({
           width={size}
           height={size}
           className="w-full h-full object-cover transition-all hover:scale-105"
+          loading={loading}
         />
       </div>
     );
   }
 
+  // Determine if we should use responsive layout
+  const isResponsive = responsive;
+
   return (
     <div className={cn("space-y-3", className)} {...props}>
       <ContextMenu>
         <ContextMenuTrigger>
-          <Card key={artist.id} className="overflow-hidden cursor-pointer" onClick={() => handleClick()}>
+          <motion.div
+            initial={{ opacity: 0, y: 8 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, amount: 0.2 }}
+            transition={{ duration: 0.2 }}
+            whileHover={{ y: -2 }}
+          >
+          <Card key={artist.id} className="overflow-hidden cursor-pointer px-0 py-0 gap-0" onClick={() => handleClick()}>
             <div
               className="aspect-square relative group"
-              style={{ width: size, height: size }}
+              style={!isResponsive ? { width: size, height: size } : undefined}
             >
               <div className="w-full h-full">
                 <Image
-                  src={artist.coverArt && api ? api.getCoverArtUrl(artist.coverArt, 200) : '/placeholder-artist.png'}
+                  src={artist.coverArt && api ? api.getCoverArtUrl(artist.coverArt, 600) : '/placeholder-artist.png'}
                   alt={artist.name}
-                  width={size}
-                  height={size}
-                  className="object-cover w-full h-full"
+                  {...(isResponsive 
+                    ? { 
+                        fill: true, 
+                        sizes: "(max-width: 768px) 33vw, (max-width: 1024px) 25vw, 16vw" 
+                      }
+                    : { 
+                        width: size, 
+                        height: size 
+                      }
+                  )}
+                  className={isResponsive ? "object-cover" : "object-cover w-full h-full"}
+                  loading={loading}
                 />
               </div>
             </div>
@@ -105,19 +130,7 @@ export function ArtistIcon({
               </p>
             </CardContent>
           </Card>
-          {/* <div 
-            className="overflow-hidden rounded-full cursor-pointer flex-shrink-0" 
-            onClick={handleClick}
-            style={{ width: size, height: size }}
-          >
-            <Image
-              src={artistImageUrl}
-              alt={artist.name}
-              width={size}
-              height={size}
-              className="w-full h-full object-cover transition-all hover:scale-105"
-            />
-          </div> */}
+          </motion.div>
         </ContextMenuTrigger>
         <ContextMenuContent className="w-40">
           <ContextMenuItem onClick={handleStar}>

app/components/ihateserverside.tsx

@@ -5,7 +5,9 @@ import { Menu } from "@/app/components/menu";
 import { Sidebar } from "@/app/components/sidebar";
 import { useNavidrome } from "@/app/components/NavidromeContext";
 import { AudioPlayer } from "./AudioPlayer";
-import { Toaster } from "@/components/ui/toaster"
+import { BottomNavigation } from './BottomNavigation';
+import { Toaster } from "@/components/ui/toaster";
+import { useFavoriteAlbums } from "@/hooks/use-favorite-albums";
 
 interface IhateserversideProps {
   children: React.ReactNode;
@@ -18,12 +20,15 @@ const Ihateserverside: React.FC<IhateserversideProps> = ({ children }) => {
   const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
   const [isClient, setIsClient] = useState(false);
   const { playlists } = useNavidrome();
+  const { favoriteAlbums, removeFavoriteAlbum } = useFavoriteAlbums();
 
   // Handle client-side hydration
   useEffect(() => {
     setIsClient(true);
     const savedCollapsed = localStorage.getItem('sidebar-collapsed') === 'true';
+    const savedVisible = localStorage.getItem('sidebar-visible') !== 'false'; // Default to true
     setIsSidebarCollapsed(savedCollapsed);
+    setIsSidebarVisible(savedVisible);
   }, []);
 
   const toggleSidebarCollapse = () => {
@@ -34,6 +39,14 @@ const Ihateserverside: React.FC<IhateserversideProps> = ({ children }) => {
     }
   };
 
+  const toggleSidebarVisibility = () => {
+    const newVisible = !isSidebarVisible;
+    setIsSidebarVisible(newVisible);
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('sidebar-visible', newVisible.toString());
+    }
+  };
+
   const handleTransitionEnd = () => {
     if (!isSidebarVisible) {
       setIsSidebarHidden(true); // This will fully hide the sidebar after transition
@@ -43,17 +56,17 @@ const Ihateserverside: React.FC<IhateserversideProps> = ({ children }) => {
   if (!isClient) {
     // Return a basic layout during SSR to match initial client render
     return (
-      <div className="hidden md:flex md:flex-col md:h-screen">
+      <div className="hidden md:flex md:flex-col md:h-screen md:w-screen md:overflow-hidden">
         {/* Top Menu */}
         <div
-          className="sticky z-10 bg-background border-b"
+          className="sticky z-10 bg-background border-b w-full"
           style={{
             left: 'env(titlebar-area-x, 0)',
             top: 'env(titlebar-area-y, 0)',
           }}
         >
           <Menu
-            toggleSidebar={() => setIsSidebarVisible(!isSidebarVisible)}
+            toggleSidebar={toggleSidebarVisibility}
             isSidebarVisible={isSidebarVisible}
             toggleStatusBar={() => setIsStatusBarVisible(!isStatusBarVisible)}
             isStatusBarVisible={isStatusBarVisible}
@@ -61,17 +74,19 @@ const Ihateserverside: React.FC<IhateserversideProps> = ({ children }) => {
         </div>
 
         {/* Main Content Area */}
-        <div className="flex-1 flex overflow-hidden">
-          <div className="w-64 flex-shrink-0 border-r transition-all duration-200">
-            <Sidebar
-              playlists={playlists}
-              className="h-full overflow-y-auto"
-              collapsed={false}
-              onToggle={toggleSidebarCollapse}
-              onTransitionEnd={handleTransitionEnd}
-            />
-          </div>
-          <div className="flex-1 overflow-y-auto">
+        <div className="flex-1 flex overflow-hidden w-full">
+          {isSidebarVisible && (
+            <div className="w-16 shrink-0 border-r transition-all duration-200">
+              <Sidebar
+                playlists={playlists}
+                className="h-full overflow-y-auto"
+                visible={isSidebarVisible}
+                favoriteAlbums={favoriteAlbums}
+                onRemoveFavoriteAlbum={removeFavoriteAlbum}
+              />
+            </div>
+          )}
+          <div className="flex-1 overflow-y-auto min-w-0">
             <div>{children}</div>
           </div>
         </div>
@@ -82,48 +97,74 @@ const Ihateserverside: React.FC<IhateserversideProps> = ({ children }) => {
       </div>
     );
   }
+  
   return (
-    <div className="hidden md:flex md:flex-col md:h-screen">
-      {/* Top Menu */}
-      <div
-        className="sticky z-10 bg-background border-b"
-        style={{
-          left: 'env(titlebar-area-x, 0)',
-          top: 'env(titlebar-area-y, 0)',
-        }}
-      >
-        <Menu
-          toggleSidebar={() => setIsSidebarVisible(!isSidebarVisible)}
-          isSidebarVisible={isSidebarVisible}
-          toggleStatusBar={() => setIsStatusBarVisible(!isStatusBarVisible)}
-          isStatusBarVisible={isStatusBarVisible}
-        />
-      </div>
+    <>
+      {/* Mobile Layout */}
+      <div className="flex md:hidden flex-col h-screen w-screen overflow-hidden">
+        {/* Top Menu */}
+        {/* <div className="shrink-0 bg-background border-b w-full">
+          <Menu
+            toggleSidebar={toggleSidebarVisibility}
+            isSidebarVisible={isSidebarVisible}
+            toggleStatusBar={() => setIsStatusBarVisible(!isStatusBarVisible)}
+            isStatusBarVisible={isStatusBarVisible}
+          />
+        </div> */}
 
-      {/* Main Content Area */}
-      <div className="flex-1 flex overflow-hidden">
-        {isSidebarVisible && (
-          <div className={`${isSidebarCollapsed ? 'w-16' : 'w-64'} flex-shrink-0 border-r transition-all duration-200`}>
-            <Sidebar
-              playlists={playlists}
-              className="h-full overflow-y-auto"
-              collapsed={isSidebarCollapsed}
-              onToggle={toggleSidebarCollapse}
-              onTransitionEnd={handleTransitionEnd}
-            />
-          </div>
-        )}
-        <div className="flex-1 overflow-y-auto">
+        {/* Main Content Area with bottom padding for audio player and bottom nav */}
+        <div className="flex-1 overflow-y-auto pb-40">
           <div>{children}</div>
         </div>
+
+        {/* Bottom Navigation for Mobile */}
+        <BottomNavigation />
+
+        <Toaster />
       </div>
 
-      {/* Floating Audio Player */}
-      {isStatusBarVisible && (
-        <AudioPlayer />
-      )}
-      <Toaster />
-    </div>
+      {/* Desktop Layout */}
+      <div className="hidden md:flex md:flex-col md:h-screen md:w-screen md:overflow-hidden">
+        {/* Top Menu */}
+        <div
+          className="sticky z-10 bg-background border-b w-full"
+          style={{
+            left: 'env(titlebar-area-x, 0)',
+            top: 'env(titlebar-area-y, 0)',
+          }}
+        >
+          <Menu
+            toggleSidebar={toggleSidebarVisibility}
+            isSidebarVisible={isSidebarVisible}
+            toggleStatusBar={() => setIsStatusBarVisible(!isStatusBarVisible)}
+            isStatusBarVisible={isStatusBarVisible}
+          />
+        </div>
+
+        {/* Main Content Area */}
+          <div className="flex-1 flex overflow-hidden w-full">
+            {isSidebarVisible && (
+              <div className="w-16 shrink-0 border-r transition-all duration-200">
+                <Sidebar
+                  playlists={playlists}
+                  className="h-full overflow-y-auto"
+                  visible={isSidebarVisible}
+                  favoriteAlbums={favoriteAlbums}
+                  onRemoveFavoriteAlbum={removeFavoriteAlbum}
+                />
+              </div>
+            )}
+            <div className="flex-1 overflow-y-auto min-w-0">
+              <div>{children}</div>
+            </div>
+          </div>
+
+        <Toaster />
+      </div>
+      
+      {/* Single Shared Audio Player - shows on all layouts */}
+      <AudioPlayer />
+    </>
   );
 };
 

app/components/menu.tsx

@@ -1,7 +1,9 @@
 import { useCallback } from "react";
 import { useRouter } from 'next/navigation';
 import Image from "next/image";
-import { Github, Mail } from "lucide-react"
+import { Github, Mail, Menu as MenuIcon, X } from "lucide-react"
+import { UserProfile } from "@/app/components/UserProfile";
+import { useGlobalSearch } from "./GlobalSearchProvider";
 import {
     Menubar,
     MenubarCheckboxItem,
@@ -28,9 +30,35 @@ import {
     DialogHeader,
     DialogTitle,
     DialogTrigger,
-  } from "@/components/ui/dialog"
+} from "@/components/ui/dialog"
+import {
+    Drawer,
+    DrawerClose,
+    DrawerContent,
+    DrawerDescription,
+    DrawerFooter,
+    DrawerHeader,
+    DrawerTitle,
+    DrawerTrigger,
+} from "@/components/ui/drawer"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
+import { useIsMobile } from "@/hooks/use-mobile"
+import Link from "next/link"
+import { 
+  Search,
+  Home,
+  List,
+  Radio,
+  Users,
+  Disc,
+  Music,
+  Heart,
+  Grid3X3,
+  Clock,
+  Settings,
+  Circle
+} from "lucide-react";
 
 interface MenuProps {
   toggleSidebar: () => void;
@@ -43,9 +71,28 @@ export function Menu({ toggleSidebar, isSidebarVisible, toggleStatusBar, isStatu
     const [isFullScreen, setIsFullScreen] = useState(false)
     const router = useRouter();
     const [open, setOpen] = useState(false);
+    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
     const { isConnected } = useNavidrome();
     const [isClient, setIsClient] = useState(false);
     const [navidromeUrl, setNavidromeUrl] = useState<string | null>(null);
+    const isMobile = useIsMobile();
+    const { openSpotlight } = useGlobalSearch();
+
+    // Navigation items for mobile menu
+    const navigationItems = [
+      { href: '/', label: 'Home', icon: Home },
+      { href: '/search', label: 'Search', icon: Search },
+      { href: '/library/albums', label: 'Albums', icon: Disc },
+      { href: '/library/artists', label: 'Artists', icon: Users },
+      { href: '/library/songs', label: 'Songs', icon: Circle },
+      { href: '/library/playlists', label: 'Playlists', icon: Music },
+      { href: '/favorites', label: 'Favorites', icon: Heart },
+      { href: '/queue', label: 'Queue', icon: List },
+      { href: '/radio', label: 'Radio', icon: Radio },
+      { href: '/browse', label: 'Browse', icon: Grid3X3 },
+      { href: '/history', label: 'History', icon: Clock },
+      { href: '/settings', label: 'Settings', icon: Settings },
+    ];
 
     // For this demo, we'll show connection status instead of user auth
     const connectionStatus = isConnected ? "Connected to Navidrome" : "Not connected";
@@ -111,38 +158,41 @@ export function Menu({ toggleSidebar, isSidebarVisible, toggleStatusBar, isStatu
 
     return (
       <>
-      <div className="flex items-center justify-between w-full ml-2">
-        <Menubar
-          className="rounded-none border-b border-none px-0 lg:px-0 flex-1"
-          style={{
-            minWidth: 0,
-            WebkitAppRegion: "drag"
-          } as React.CSSProperties}
-        >
-        <div style={{ WebkitAppRegion: "no-drag" } as React.CSSProperties} className="flex items-center gap-2">
-        <MenubarMenu>
-        <MenubarTrigger className="font-bold">mice</MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem onClick={() => setOpen(true)}>About Music</MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem onClick={() => router.push('/settings')}>
-            Preferences <MenubarShortcut>⌘,</MenubarShortcut>
-          </MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem onClick={() => isClient && window.close()}>
-            Quit Music <MenubarShortcut>⌘Q</MenubarShortcut>
-          </MenubarItem>
-        </MenubarContent>
-          </MenubarMenu>
-          <div className="border-r-4 w-0"><p className="invisible">j</p></div>
+      <div className="flex items-center justify-between w-full">
+        {/* Mobile Top Bar - Simplified since navigation is now at bottom */}
+        {isMobile ? (
+// hey bear!
+// nothing
+            null
+        ) : (
+          /* Desktop Navigation */
+          <Menubar
+            className="rounded-none border-b border-none px-2 lg:px-2 flex-1 min-w-0"
+            style={{
+              minWidth: 0,
+              WebkitAppRegion: "drag"
+            } as React.CSSProperties}
+          >
+          <div style={{ WebkitAppRegion: "no-drag" } as React.CSSProperties} className="flex items-center gap-2">
+          <MenubarMenu>
+          <MenubarTrigger className="font-bold">mice</MenubarTrigger>
+          <MenubarContent>
+            <MenubarItem onClick={() => setOpen(true)}>About Music</MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem onClick={() => router.push('/settings')}>
+              Preferences <MenubarShortcut>⌘,</MenubarShortcut>
+            </MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem onClick={() => isClient && window.close()}>
+              Quit Music <MenubarShortcut>⌘Q</MenubarShortcut>
+            </MenubarItem>
+          </MenubarContent>
+            </MenubarMenu>
           <MenubarMenu>
         <MenubarTrigger className="relative">File</MenubarTrigger>
         <MenubarContent>
-          <MenubarSub>
-            <MenubarSubTrigger>New</MenubarSubTrigger>
-            <MenubarSubContent className="w-[230px]">
-          <MenubarItem>
-            Playlist <MenubarShortcut>⌘N</MenubarShortcut>
+          <MenubarItem onClick={() => router.push('/library/playlists')}>
+            View Playlists
           </MenubarItem>
           <MenubarItem disabled>
             Playlist from Selection <MenubarShortcut>⇧⌘N</MenubarShortcut>
@@ -152,8 +202,6 @@ export function Menu({ toggleSidebar, isSidebarVisible, toggleStatusBar, isStatu
           </MenubarItem>
           <MenubarItem>Playlist Folder</MenubarItem>
           <MenubarItem disabled>Genius Playlist</MenubarItem>
-            </MenubarSubContent>
-          </MenubarSub>
           <MenubarItem>
             Open Stream URL <MenubarShortcut>⌘U</MenubarShortcut>
           </MenubarItem>
@@ -280,6 +328,24 @@ export function Menu({ toggleSidebar, isSidebarVisible, toggleStatusBar, isStatu
           </MenubarMenu>
           </div>
         </Menubar>
+        )}
+        
+        {/* User Profile and Search - Desktop only */}
+        {!isMobile && (
+          <div className="ml-auto flex items-center space-x-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={openSpotlight}
+              className="flex items-center space-x-2"
+              title="Search (/ or ⌘K)"
+            >
+              <Search className="w-4 h-4" />
+              <span className="hidden lg:inline">Search</span>
+            </Button>
+            <UserProfile variant="desktop" />
+          </div>
+        )}
         
       </div>
 
@@ -315,7 +381,7 @@ export function Menu({ toggleSidebar, isSidebarVisible, toggleStatusBar, isStatu
               ) : navidromeUrl ? (
                 navidromeUrl
               ) : (
-                <span className="italic text-gray-400">Not set</span>
+                <span className="italic text-gray-400">Auto-configured</span>
               )}
             </span>
           </div>

app/components/sidebar.tsx

@@ -6,348 +6,238 @@ import { usePathname } from 'next/navigation';
 import { Button } from "../../components/ui/button";
 import { ScrollArea } from "../../components/ui/scroll-area";
 import Link from "next/link";
-import { Playlist } from "@/lib/navidrome";
-import { ChevronLeft, ChevronRight } from "lucide-react";
+import Image from "next/image";
+import { Playlist, Album } from "@/lib/navidrome";
+import { 
+  Search,
+  Home,
+  List,
+  Radio,
+  Users,
+  Disc,
+  Music,
+  Heart,
+  Grid3X3,
+  Clock,
+  Settings,
+  Circle
+} from "lucide-react";
+import { useNavidrome } from "./NavidromeContext";
+import { useRecentlyPlayedAlbums } from "@/hooks/use-recently-played-albums";
+import { useSidebarShortcuts } from "@/hooks/use-sidebar-shortcuts";
+import { useSidebarLayout, SidebarItem } from "@/hooks/use-sidebar-layout";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
+
+// Icon mapping for sidebar items
+const iconMap: Record<string, React.ReactNode> = {
+  search: <Search className="h-4 w-4" />,
+  home: <Home className="h-4 w-4" />,
+  queue: <List className="h-4 w-4" />,
+  radio: <Radio className="h-4 w-4" />,
+  artists: <Users className="h-4 w-4" />,
+  albums: <Disc className="h-4 w-4" />,
+  playlists: <Music className="h-4 w-4" />,
+  favorites: <Heart className="h-4 w-4" />,
+  browse: <Grid3X3 className="h-4 w-4" />,
+  songs: <Circle className="h-4 w-4" />,
+  history: <Clock className="h-4 w-4" />,
+  settings: <Settings className="h-4 w-4" />,
+};
 
 interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
   playlists: Playlist[];
-  collapsed?: boolean;
-  onToggle?: () => void;
+  visible?: boolean;
+  favoriteAlbums?: Array<{id: string, name: string, artist: string, coverArt?: string}>;
+  onRemoveFavoriteAlbum?: (albumId: string) => void;
 }
 
-export function Sidebar({ className, playlists, collapsed = false, onToggle }: SidebarProps) {
+export function Sidebar({ className, playlists, visible = true, favoriteAlbums = [], onRemoveFavoriteAlbum }: SidebarProps) {
   const pathname = usePathname();
-  
-  // Define all routes and their active states
-  const routes = {
-    isRoot: pathname === "/",
-    isBrowse: pathname === "/browse",
-    isSearch: pathname === "/search",
-    isQueue: pathname === "/queue",
-    isRadio: pathname === "/radio",
-    isPlaylists: pathname === "/library/playlists",
-    isSongs: pathname === "/library/songs",
-    isArtists: pathname === "/library/artists",
-    isAlbums: pathname === "/library/albums",
-    isHistory: pathname === "/history",
-    isFavorites: pathname === "/favorites",
-    isSettings: pathname === "/settings",
-    // Handle dynamic routes
-    isAlbumPage: pathname.startsWith("/album/"),
-    isArtistPage: pathname.startsWith("/artist/"),
-    isPlaylistPage: pathname.startsWith("/playlist/"),
-    isNewPage: pathname === "/new",
+  const { api } = useNavidrome();
+  const { recentAlbums } = useRecentlyPlayedAlbums();
+  const { shortcutType } = useSidebarShortcuts();
+  const { settings } = useSidebarLayout();
+
+  if (!visible) {
+    return null;
+  }
+
+  // Check if a route is active
+  const isRouteActive = (href: string): boolean => {
+    if (href === '/') return pathname === '/';
+    return pathname.startsWith(href);
   };
 
-  // Helper function to determine if any sidebar route is active
-  // This prevents highlights on pages not defined in sidebar
-  const isAnySidebarRouteActive = Object.values(routes).some(Boolean);
+  // Get visible navigation items
+  const visibleItems = settings.items.filter(item => item.visible);
 
   return (
-    <div className={cn("pb-23 relative", className)}>
-      {/* Collapse/Expand Button */}
-      <Button
-        variant="ghost"
-        size="sm"
-        onClick={onToggle}
-        className="absolute top-2 right-2 z-10 h-6 w-6 p-0"
-      >
-        {collapsed ? <ChevronRight className="h-4 w-4" /> : <ChevronLeft className="h-4 w-4" />}
-      </Button>
-
+    <div className={cn("pb-23 relative w-16", className)}>
       <div className="space-y-4 py-4 pt-6">
         <div className="px-3 py-2">
-          <p className={cn("mb-2 px-4 text-lg font-semibold tracking-tight", collapsed && "sr-only")}>
-            Discover
-          </p>
           <div className="space-y-1">
-            <Link href="/">
-              <Button 
-                variant={routes.isRoot ? "secondary" : "ghost"} 
-                className={cn("w-full justify-start mb-2", collapsed && "justify-center px-2")}
-                title={collapsed ? "Listen Now" : undefined}
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  className={cn("h-4 w-4", !collapsed && "mr-2")}
-                >
-                  <circle cx="12" cy="12" r="10" />
-                  <polygon points="10 8 16 12 10 16 10 8" />
-                </svg>
-                {!collapsed && "Listen Now"}
-              </Button>
-            </Link>
-            <Link href="/browse">
-              <Button 
-                variant={routes.isBrowse ? "secondary" : "ghost"} 
-                className={cn("w-full justify-start mb-2", collapsed && "justify-center px-2")}
-                title={collapsed ? "Browse" : undefined}
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  className={cn("h-4 w-4", !collapsed && "mr-2")}
-                >
-                  <rect width="7" height="7" x="3" y="3" rx="1" />
-                  <rect width="7" height="7" x="14" y="3" rx="1" />
-                  <rect width="7" height="7" x="14" y="14" rx="1" />
-                  <rect width="7" height="7" x="3" y="14" rx="1" />
-                </svg>
-                {!collapsed && "Browse"}
-              </Button>
-            </Link>
-            <Link href="/search">
-              <Button 
-                variant={routes.isSearch ? "secondary" : "ghost"} 
-                className={cn("w-full justify-start mb-2", collapsed && "justify-center px-2")}
-                title={collapsed ? "Search" : undefined}
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  className={cn("h-4 w-4", !collapsed && "mr-2")}
-                >
-                  <circle cx="11" cy="11" r="8" />
-                  <path d="m21 21-4.35-4.35" />
-                </svg>
-                {!collapsed && "Search"}
-              </Button>
-            </Link>
-            <Link href="/queue">
-              <Button 
-                variant={routes.isQueue ? "secondary" : "ghost"} 
-                className={cn("w-full justify-start mb-2", collapsed && "justify-center px-2")}
-                title={collapsed ? "Queue" : undefined}
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  className={cn("h-4 w-4", !collapsed && "mr-2")}
-                >
-                  <path d="M3 6h18M3 12h18M3 18h18" />
-                </svg>
-                {!collapsed && "Queue"}
-              </Button>
-            </Link>
-            <Link href="/radio">
-              <Button 
-                variant={routes.isRadio ? "secondary" : "ghost"} 
-                className={cn("w-full justify-start mb-2", collapsed && "justify-center px-2")}
-                title={collapsed ? "Radio" : undefined}
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  className={cn("h-4 w-4", !collapsed && "mr-2")}
-                >
-                  <path d="M4.9 19.1C1 15.2 1 8.8 4.9 4.9"/>
-                  <path d="M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5"/>
-                  <circle cx="12" cy="12" r="2"/>
-                  <path d="M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5"/>
-                  <path d="M19.1 4.9C23 8.8 23 15.2 19.1 19.1"/>
-                </svg>
-                {!collapsed && "Radio"}
-              </Button>
-            </Link>
-          </div>
-        </div>
-          <div>
-            <div className="px-3 py-0 pt-0">
-              <p className={cn("mb-2 px-4 text-lg font-semibold tracking-tight", collapsed && "sr-only")}>
-                Library
-              </p>
-              <div className="space-y-1">
-                <Link href="/library/playlists">
+            {/* Main Navigation Items */}
+            {visibleItems.map((item) => (
+              <Link key={item.id} href={item.href}>
                 <Button 
-                  variant={routes.isPlaylists ? "secondary" : "ghost"} 
-                  className={cn("w-full justify-start mb-1", collapsed && "justify-center px-2")}
-                  title={collapsed ? "Playlists" : undefined}
+                  variant={isRouteActive(item.href) ? "secondary" : "ghost"} 
+                  className="w-full justify-center px-2"
+                  title={item.label}
                 >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    className={cn("h-4 w-4", !collapsed && "mr-2")}
-                  >
-                    <path d="M21 15V6" />
-                    <path d="M18.5 18a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z" />
-                    <path d="M12 12H3" />
-                    <path d="M16 6H3" />
-                    <path d="M12 18H3" />
-                  </svg>
-                  {!collapsed && "Playlists"}
-                </Button>
-                </Link>
-                <Link href="/library/songs">
-                <Button 
-                  variant={routes.isSongs ? "secondary" : "ghost"} 
-                  className={cn("w-full justify-start mb-2", collapsed && "justify-center px-2")}
-                  title={collapsed ? "Songs" : undefined}
-                >
-                  <svg 
-                    className={cn("h-4 w-4", !collapsed && "mr-2")} 
-                    xmlns="http://www.w3.org/2000/svg" 
-                    viewBox="0 0 24 24" 
-                    fill="none" 
-                    stroke="currentColor" 
-                    strokeWidth="2" 
-                    strokeLinecap="round" 
-                    strokeLinejoin="round"
-                  >
-                    <circle cx="8" cy="18" r="4" />
-                    <path d="M12 18V2l7 4" />
-                  </svg>
-                  {!collapsed && "Songs"}
-                </Button>
-                </Link>
-                <Link href="/library/artists">
-                <Button 
-                  variant={routes.isArtists ? "secondary" : "ghost"} 
-                  className={cn("w-full justify-start mb-2", collapsed && "justify-center px-2")}
-                  title={collapsed ? "Artists" : undefined}
-                >
-                <svg 
-                  className={cn("h-4 w-4", !collapsed && "mr-2")} 
-                  xmlns="http://www.w3.org/2000/svg" 
-                  viewBox="0 0 24 24" 
-                  fill="none" 
-                  stroke="currentColor" 
-                  strokeWidth="2" 
-                  strokeLinecap="round" 
-                  strokeLinejoin="round" 
-                >
-                      <path d="m12 8-9.04 9.06a2.82 2.82 0 1 0 3.98 3.98L16 12" />
-                      <circle cx="17" cy="7" r="5" />
-                    </svg>
-                    {!collapsed && "Artists"}
-                  </Button>
-                </Link>
-                <Link href="/library/albums">
-                  <Button 
-                    variant={routes.isAlbums ? "secondary" : "ghost"} 
-                    className={cn("w-full justify-start mb-2", collapsed && "justify-center px-2")}
-                    title={collapsed ? "Albums" : undefined}
-                  >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      className={cn("h-4 w-4", !collapsed && "mr-2")}
-                    >
-                      <path d="m16 6 4 14" />
-                      <path d="M12 6v14" />
-                      <path d="M8 8v12" />
-                      <path d="M4 4v16" />
-                    </svg>
-                    {!collapsed && "Albums"}
-                  </Button>
-                </Link>
-                <Link href="/history">
-                  <Button 
-                    variant={routes.isHistory ? "secondary" : "ghost"} 
-                    className={cn("w-full justify-start mb-2", collapsed && "justify-center px-2")}
-                    title={collapsed ? "History" : undefined}
-                  >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      className={cn("h-4 w-4", !collapsed && "mr-2")}
-                    >
-                      <path d="M12 2C6.48 2 2 6.48 2 12c0 5.52 4.48 10 10 10 5.52 0 10-4.48 10-10 0-5.52-4.48-10-10-10Z" />
-                      <path d="M12 8v4l4 2" />
-                    </svg>
-                    {!collapsed && "History"}
-                  </Button>
-                </Link>
-                <Link href="/favorites">
-                  <Button 
-                    variant={routes.isFavorites ? "secondary" : "ghost"} 
-                    className={cn("w-full justify-start mb-2", collapsed && "justify-center px-2")}
-                    title={collapsed ? "Favorites" : undefined}
-                  >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      className={cn("h-4 w-4", !collapsed && "mr-2")}
-                    >
-                      <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
-                    </svg>
-                    {!collapsed && "Favorites"}
-                  </Button>
-                </Link>
-              </div>
-            </div>
-          </div>
-          <div className="px-3">
-            <div className="space-y-0">
-              <Link href="/settings">
-                <Button 
-                  variant={routes.isSettings ? "secondary" : "ghost"} 
-                  className={cn("w-full justify-start mb-2", collapsed && "justify-center px-2")}
-                  title={collapsed ? "Settings" : undefined}
-                >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    className={cn("h-4 w-4", !collapsed && "mr-2")}
-                  >
-                    <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
-                    <circle cx="12" cy="12" r="3" />
-                  </svg>
-                  {!collapsed && "Settings"}
+                  {settings.showIcons && (iconMap[item.icon] || <div className="h-4 w-4" />)}
                 </Button>
               </Link>
-            </div>
+            ))}
+            
+            {/* Dynamic Shortcuts Section */}
+            {(shortcutType === 'albums' || shortcutType === 'both') && favoriteAlbums.length > 0 && (
+              <>
+                <div className="border-t my-2"></div>
+                {favoriteAlbums.slice(0, 5).map((album) => (
+                  <ContextMenu key={album.id}>
+                    <ContextMenuTrigger>
+                      <Link href={`/album/${album.id}`}>
+                        <Button 
+                          variant="ghost" 
+                          className="w-full justify-center px-2"
+                          title={`${album.name} by ${album.artist}`}
+                        >
+                          {album.coverArt && api ? (
+                            <Image
+                              src={api.getCoverArtUrl(album.coverArt, 150)}
+                              alt={album.name}
+                              width={16}
+                              height={16}
+                              className="rounded"
+                            />
+                          ) : (
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              stroke="currentColor"
+                              strokeWidth="2"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              className="h-4 w-4"
+                            >
+                              <path d="m16 6 4 14" />
+                              <path d="M12 6v14" />
+                              <path d="M8 8v12" />
+                              <path d="M4 4v16" />
+                            </svg>
+                          )}
+                        </Button>
+                      </Link>
+                    </ContextMenuTrigger>
+                    <ContextMenuContent>
+                      <ContextMenuItem 
+                        onClick={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          onRemoveFavoriteAlbum?.(album.id);
+                        }}
+                        className="text-destructive focus:text-destructive"
+                      >
+                        Remove from favorites
+                      </ContextMenuItem>
+                    </ContextMenuContent>
+                  </ContextMenu>
+                ))}
+              </>
+            )}
+
+            {/* Recently Played Albums */}
+            {(shortcutType === 'albums' || shortcutType === 'both') && recentAlbums.length > 0 && (
+              <>
+                <div className="border-t my-2"></div>
+                {recentAlbums.slice(0, 5).map((album) => (
+                  <Link key={album.id} href={`/album/${album.id}`}>
+                    <Button 
+                      variant="ghost" 
+                      className="w-full justify-center px-2"
+                      title={`${album.name} by ${album.artist} (Recently Played)`}
+                    >
+                      {album.coverArt && api ? (
+                        <Image
+                          src={api.getCoverArtUrl(album.coverArt, 150)}
+                          alt={album.name}
+                          width={16}
+                          height={16}
+                          className="rounded opacity-70"
+                        />
+                      ) : (
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeWidth="2"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          className="h-4 w-4 opacity-70"
+                        >
+                          <path d="m16 6 4 14" />
+                          <path d="M12 6v14" />
+                          <path d="M8 8v12" />
+                          <path d="M4 4v16" />
+                        </svg>
+                      )}
+                    </Button>
+                  </Link>
+                ))}
+              </>
+            )}
+            
+            {/* Playlists Section */}
+            {(shortcutType === 'playlists' || shortcutType === 'both') && playlists.length > 0 && (
+              <>
+                <div className="border-t my-2"></div>
+                {playlists.slice(0, 5).map((playlist) => (
+                  <Link key={playlist.id} href={`/playlist/${playlist.id}`}>
+                    <Button 
+                      variant="ghost" 
+                      className="w-full justify-center px-2"
+                      title={`${playlist.name} by ${playlist.owner} - ${playlist.songCount} songs`}
+                    >
+                      {playlist.coverArt && api ? (
+                        <Image
+                          src={api.getCoverArtUrl(playlist.coverArt, 32)}
+                          alt={playlist.name}
+                          width={16}
+                          height={16}
+                          className="rounded"
+                        />
+                      ) : (
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeWidth="2"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          className="h-4 w-4"
+                        >
+                          <path d="M21 15V6" />
+                          <path d="M18.5 18a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z" />
+                          <path d="M12 12H3" />
+                          <path d="M16 6H3" />
+                          <path d="M12 18H3" />
+                        </svg>
+                      )}
+                    </Button>
+                  </Link>
+                ))}
+              </>
+            )}
           </div>
+        </div>
       </div>
     </div>
   );

app/components/start-screen.tsx

@@ -17,7 +17,8 @@ import { Badge } from '@/components/ui/badge';
 import { useNavidromeConfig } from '@/app/components/NavidromeConfigContext';
 import { useTheme } from '@/app/components/ThemeProvider';
 import { useToast } from '@/hooks/use-toast';
-import { FaServer, FaUser, FaLock, FaCheck, FaTimes, FaPalette, FaLastfm, FaBars } from 'react-icons/fa';
+import { FaServer, FaUser, FaLock, FaCheck, FaTimes, FaPalette, FaLastfm } from 'react-icons/fa';
+import type { SidebarItem, SidebarLayoutSettings } from '@/hooks/use-sidebar-layout';
 
 export function LoginForm({
   className,
@@ -36,6 +37,7 @@ export function LoginForm({
   });
 
   const [isTesting, setIsTesting] = useState(false);
+  const [hasError, setHasError] = useState(false);
   
   // Settings for step 2
   const [scrobblingEnabled, setScrobblingEnabled] = useState(() => {
@@ -45,20 +47,8 @@ export function LoginForm({
     return true;
   });
 
-  // New settings
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
-    if (typeof window !== 'undefined') {
-      return localStorage.getItem('sidebar-collapsed') === 'true';
-    }
-    return false;
-  });
-
-  const [standaloneLastfmEnabled, setStandaloneLastfmEnabled] = useState(() => {
-    if (typeof window !== 'undefined') {
-      return localStorage.getItem('standalone-lastfm-enabled') === 'true';
-    }
-    return false;
-  });
+  // Sidebar settings with new defaults
+  const [sidebarShortcuts, setSidebarShortcuts] = useState<'albums' | 'playlists' | 'both'>('playlists');
 
   // Check if Navidrome is configured via environment variables
   const hasEnvConfig = React.useMemo(() => {
@@ -132,6 +122,7 @@ export function LoginForm({
     e.preventDefault();
     
     if (!formData.serverUrl || !formData.username || !formData.password) {
+      setHasError(true);
       toast({
         title: "Missing Information",
         description: "Please fill in all fields before proceeding.",
@@ -141,6 +132,7 @@ export function LoginForm({
     }
 
     setIsTesting(true);
+    setHasError(false);
     try {
       // Strip trailing slash from server URL before testing
       const cleanServerUrl = formData.serverUrl.replace(/\/+$/, '');
@@ -167,6 +159,7 @@ export function LoginForm({
         // Move to settings step
         setStep('settings');
       } else {
+        setHasError(true);
         toast({
           title: "Connection Failed",
           description: "Could not connect to the server. Please check your settings.",
@@ -174,6 +167,7 @@ export function LoginForm({
         });
       }
     } catch (error) {
+      setHasError(true);
       toast({
         title: "Connection Error",
         description: "An error occurred while testing the connection.",
@@ -187,8 +181,30 @@ export function LoginForm({
   const handleFinishSetup = () => {
     // Save all settings
     localStorage.setItem('lastfm-scrobbling-enabled', scrobblingEnabled.toString());
-    localStorage.setItem('sidebar-collapsed', sidebarCollapsed.toString());
-    localStorage.setItem('standalone-lastfm-enabled', standaloneLastfmEnabled.toString());
+    
+    // Save sidebar settings with new defaults
+    const defaultSidebarItems: SidebarItem[] = [
+      { id: 'home', label: 'Home', visible: true, icon: 'home', href: '/' },
+      { id: 'queue', label: 'Queue', visible: true, icon: 'queue', href: '/queue' },
+      { id: 'artists', label: 'Artists', visible: true, icon: 'artists', href: '/library/artists' },
+      { id: 'albums', label: 'Albums', visible: true, icon: 'albums', href: '/library/albums' },
+      { id: 'playlists', label: 'Playlists', visible: true, icon: 'playlists', href: '/library/playlists' },
+      { id: 'favorites', label: 'Favorites', visible: true, icon: 'favorites', href: '/favorites' },
+      { id: 'settings', label: 'Settings', visible: true, icon: 'settings', href: '/settings' },
+      // Hidden by default
+      { id: 'search', label: 'Search', visible: false, icon: 'search', href: '/search' },
+      { id: 'radio', label: 'Radio', visible: false, icon: 'radio', href: '/radio' },
+      { id: 'browse', label: 'Browse', visible: false, icon: 'browse', href: '/browse' },
+      { id: 'songs', label: 'Songs', visible: false, icon: 'songs', href: '/library/songs' },
+      { id: 'history', label: 'History', visible: false, icon: 'history', href: '/history' },
+    ];
+
+    const sidebarSettings: SidebarLayoutSettings = {
+      items: defaultSidebarItems,
+      shortcuts: sidebarShortcuts,
+      showIcons: true,
+    };
+    localStorage.setItem('sidebar-layout-settings', JSON.stringify(sidebarSettings));
     
     // Mark onboarding as complete
     localStorage.setItem('onboarding-completed', '1.1.0');
@@ -206,10 +222,53 @@ export function LoginForm({
     setScrobblingEnabled(enabled);
   };
 
+  const handleDemoSetup = async () => {
+    const demoCredentials = {
+      serverUrl: 'https://demo.navidrome.org',
+      username: 'demo',
+      password: 'demo'
+    };
+
+    // Set form data
+    setFormData(demoCredentials);
+
+    setIsTesting(true);
+    try {
+      const success = await testConnection(demoCredentials);
+
+      if (success) {
+        // Save the config
+        updateConfig(demoCredentials);
+        
+        toast({
+          title: "Demo Server Connected",
+          description: "Successfully connected to the Navidrome demo server! Let's configure your preferences.",
+        });
+        
+        // Move to settings step
+        setStep('settings');
+      } else {
+        toast({
+          title: "Demo Server Unavailable",
+          description: "The demo server is currently unavailable. Please try again later or enter your own server details.",
+          variant: "destructive"
+        });
+      }
+    } catch (error) {
+      toast({
+        title: "Connection Error",
+        description: "Could not connect to the demo server. Please check your internet connection.",
+        variant: "destructive"
+      });
+    } finally {
+      setIsTesting(false);
+    }
+  };
+
   if (step === 'settings') {
     return (
       <div className={cn("flex flex-col gap-6", className)} {...props}>
-        <Card>
+        <Card className='py-5'>
           <CardHeader>
             <CardTitle className="flex items-center gap-2">
               <FaPalette className="w-5 h-5" />
@@ -232,6 +291,7 @@ export function LoginForm({
                     <SelectValue placeholder="Select a theme" />
                   </SelectTrigger>
                   <SelectContent>
+                    <SelectItem value="default">Default</SelectItem>
                     <SelectItem value="blue">Blue</SelectItem>
                     <SelectItem value="violet">Violet</SelectItem>
                     <SelectItem value="red">Red</SelectItem>
@@ -243,29 +303,6 @@ export function LoginForm({
                 </Select>
               </div>
 
-              {/* Sidebar Settings */}
-              <div className="grid gap-3">
-                <Label className="flex items-center gap-2">
-                  <FaBars className="w-4 h-4" />
-                  Sidebar Layout
-                </Label>
-                <Select 
-                  value={sidebarCollapsed ? "collapsed" : "expanded"} 
-                  onValueChange={(value) => setSidebarCollapsed(value === "collapsed")}
-                >
-                  <SelectTrigger>
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="expanded">Expanded (with labels)</SelectItem>
-                    <SelectItem value="collapsed">Collapsed (icons only)</SelectItem>
-                  </SelectContent>
-                </Select>
-                <p className="text-sm text-muted-foreground">
-                  You can always toggle this later using the button in the sidebar
-                </p>
-              </div>
-
               {/* Last.fm Scrobbling */}
               <div className="grid gap-3">
                 <Label className="flex items-center gap-2">
@@ -291,28 +328,21 @@ export function LoginForm({
                 </p>
               </div>
 
-              {/* Standalone Last.fm */}
+              {/* Sidebar Shortcuts */}
               <div className="grid gap-3">
-                <Label className="flex items-center gap-2">
-                  <FaLastfm className="w-4 h-4" />
-                  Standalone Last.fm (Advanced)
-                </Label>
-                <Select 
-                  value={standaloneLastfmEnabled ? "enabled" : "disabled"} 
-                  onValueChange={(value) => setStandaloneLastfmEnabled(value === "enabled")}
-                >
+                <Label>Sidebar Shortcuts</Label>
+                <Select value={sidebarShortcuts} onValueChange={(value: 'albums' | 'playlists' | 'both') => setSidebarShortcuts(value)}>
                   <SelectTrigger>
                     <SelectValue />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="enabled">Enabled</SelectItem>
-                    <SelectItem value="disabled">Disabled</SelectItem>
+                    <SelectItem value="playlists">Playlists Only</SelectItem>
+                    <SelectItem value="albums">Albums Only</SelectItem>
+                    <SelectItem value="both">Both</SelectItem>
                   </SelectContent>
                 </Select>
                 <p className="text-sm text-muted-foreground">
-                  {standaloneLastfmEnabled 
-                    ? "Direct Last.fm API integration (configure in Settings later)" 
-                    : "Use only Navidrome's Last.fm integration"}
+                  Choose what shortcuts appear in your sidebar
                 </p>
               </div>
 
@@ -340,7 +370,7 @@ export function LoginForm({
 
   return (
     <div className={cn("flex flex-col gap-6", className)} {...props}>
-      <Card>
+      <Card className="py-5">
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
             <FaServer className="w-5 h-5" />
@@ -369,6 +399,7 @@ export function LoginForm({
                   placeholder="https://your-navidrome-server.com"
                   value={formData.serverUrl}
                   onChange={(e) => handleInputChange('serverUrl', e.target.value)}
+                  className={hasError ? "border-destructive focus-visible:ring-destructive" : ""}
                   required
                 />
               </div>
@@ -383,6 +414,7 @@ export function LoginForm({
                   placeholder="your-username"
                   value={formData.username}
                   onChange={(e) => handleInputChange('username', e.target.value)}
+                  className={hasError ? "border-destructive focus-visible:ring-destructive" : ""}
                   required
                 />
               </div>
@@ -396,9 +428,60 @@ export function LoginForm({
                   type="password" 
                   value={formData.password}
                   onChange={(e) => handleInputChange('password', e.target.value)}
+                  className={hasError ? "border-destructive focus-visible:ring-destructive" : ""}
                   required 
                 />
               </div>
+
+              {/* Demo Server Setup */}
+              <div className="bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
+                <div className="flex items-start gap-3">
+                  <div className="text-blue-600 dark:text-blue-400 mt-0.5">
+                    💡
+                  </div>
+                  <div className="flex-1 text-sm">
+                    <p className="font-medium text-blue-900 dark:text-blue-100 mb-1">
+                      Don&apos;t have a Navidrome server?
+                    </p>
+                    <p className="text-blue-700 dark:text-blue-200 mb-3">
+                      Try the demo server to explore mice with one click:
+                    </p>
+                    <Button 
+                      type="button"
+                      variant="secondary" 
+                      size="sm"
+                      className="w-full bg-blue-100 hover:bg-blue-200 text-blue-900 dark:bg-blue-900/50 dark:hover:bg-blue-800/50 dark:text-blue-100"
+                      onClick={handleDemoSetup}
+                      disabled={isTesting}
+                    >
+                      {isTesting ? (
+                        <>
+                          <div className="w-4 h-4 mr-2 animate-spin rounded-full border-2 border-transparent border-t-current" />
+                          Connecting to Demo...
+                        </>
+                      ) : (
+                        <>
+                          <FaServer className="w-4 h-4 mr-2" />
+                          Connect to Demo Server
+                        </>
+                      )}
+                    </Button>
+                    <div className="mt-2 text-xs text-blue-600 dark:text-blue-300">
+                      This will automatically connect to: demo.navidrome.org
+                    </div>
+                    <details className="mt-3">
+                      <summary className="text-xs text-blue-600 dark:text-blue-300 cursor-pointer hover:text-blue-800 dark:hover:text-blue-100">
+                        Or enter demo credentials manually
+                      </summary>
+                      <div className="mt-2 bg-blue-100 dark:bg-blue-900/50 rounded p-2 font-mono text-xs">
+                        <div><strong>URL:</strong> https://demo.navidrome.org</div>
+                        <div><strong>Username:</strong> demo</div>
+                        <div><strong>Password:</strong> demo</div>
+                      </div>
+                    </details>
+                  </div>
+                </div>
+              </div>
               
               <div className="flex flex-col gap-3">
                 <Button type="submit" className="w-full" disabled={isTesting}>

app/favorites/page.tsx

@@ -3,7 +3,6 @@
 import React, { useState, useEffect } from 'react';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { useNavidrome } from "@/app/components/NavidromeContext";
 import { AlbumArtwork } from "@/app/components/album-artwork";
 import { ArtistIcon } from "@/app/components/artist-icon";
@@ -59,7 +58,7 @@ const FavoritesPage = () => {
       artistId: song.artistId,
       url: api?.getStreamUrl(song.id) || '',
       duration: song.duration,
-      coverArt: song.coverArt ? api?.getCoverArtUrl(song.coverArt) : undefined,
+      coverArt: song.coverArt ? api?.getCoverArtUrl(song.coverArt, 1200) : undefined,
       starred: !!song.starred
     });
   };
@@ -79,7 +78,7 @@ const FavoritesPage = () => {
           artistId: song.artistId,
           url: api.getStreamUrl(song.id),
           duration: song.duration,
-          coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt) : undefined,
+          coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 1200) : undefined,
           starred: !!song.starred
         }));
         
@@ -119,24 +118,25 @@ const FavoritesPage = () => {
 
   if (!isConnected) {
     return (
-      <div className="container mx-auto p-6">
-        <div className="text-center">
-          <p className="text-muted-foreground">Please connect to your Navidrome server to view favorites.</p>
+      <div className="container mx-auto p-6 pb-24 max-w-none">
+        <div className="space-y-6">
+          <div className="text-left">
+            <h1 className="text-3xl font-semibold tracking-tight">Favorites</h1>
+            <p className="text-muted-foreground">Please connect to your Navidrome server to view favorites.</p>
+          </div>
         </div>
       </div>
     );
   }
 
   return (
-    <div className="container mx-auto p-6 pb-24">
+    <div className="container mx-auto p-6 pb-24 max-w-none">
       <div className="space-y-6">
-        <div className="flex items-center gap-3">
-          <div>
-            <h1 className="text-3xl font-semibold tracking-tight">Favorites</h1>
-            <p className="text-muted-foreground">Your starred albums, songs, and artists</p>
-          </div>
+        <div className="text-left">
+          <h1 className="text-3xl font-semibold tracking-tight">Favorites</h1>
+          <p className="text-muted-foreground">Your starred albums, songs, and artists</p>
         </div>
-
+      <div className="space-y-6">
         <Tabs defaultValue="albums" className="space-y-6">
           <TabsList className="grid w-full grid-cols-3">
             <TabsTrigger value="albums" className="flex items-center gap-2">
@@ -167,33 +167,14 @@ const FavoritesPage = () => {
             ) : (
               <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
                 {favoriteAlbums.map((album) => (
-                  <Card key={album.id} className="overflow-hidden">
-                    <div className="aspect-square relative group">
-                        {album.coverArt && api ? (
-                            <Image
-                                src={api.getCoverArtUrl(album.coverArt)}
-                                alt={album.name}
-                                fill
-                                className="w-full h-full object-cover rounded"
-                                sizes="(max-width: 768px) 100vw, 300px"
-                            />
-                        ) : (
-                            <div className="w-full h-full bg-muted rounded flex items-center justify-center">
-                                <Disc className="w-12 h-12 text-muted-foreground" />
-                            </div>
-                        )}
-                        <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
-                          <Play className="w-12 h-12 mx-auto hidden group-hover:block" onClick={() => handlePlayAlbum(album)}/>
-                        </div>
-                    </div>
-                    <CardContent className="p-4">
-                      <h3 className="font-semibold truncate">{album.name}</h3>
-                      <p className="text-sm text-muted-foreground truncate">{album.artist}</p>
-                      <p className="text-xs text-muted-foreground mt-1">
-                        {album.songCount} songs • {Math.floor(album.duration / 60)} min
-                      </p>
-                    </CardContent>
-                  </Card>
+                  <AlbumArtwork
+                    key={album.id}
+                    album={album}
+                    className="w-full"
+                    aspectRatio="square"
+                    width={200}
+                    height={200}
+                  />
                 ))}
               </div>
             )}
@@ -217,10 +198,10 @@ const FavoritesPage = () => {
                     <div className="w-8 text-sm text-muted-foreground text-center">
                       {index + 1}
                     </div>
-                    <div className="w-12 h-12 relative flex-shrink-0">
+                    <div className="w-12 h-12 relative shrink-0">
                       {song.coverArt && api ? (
                         <Image
-                          src={api.getCoverArtUrl(song.coverArt)}
+                          src={api.getCoverArtUrl(song.coverArt, 1200)}
                           alt={song.album}
                           fill
                           className="rounded object-cover"
@@ -271,28 +252,13 @@ const FavoritesPage = () => {
             ) : (
               <div className="grid gap-4 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-7">
                 {favoriteArtists.map((artist) => (
-                  <Card key={artist.id} className="overflow-hidden">
-                    <CardContent className="p-3 text-center">
-                      <div className="w-24 h-24 mx-auto mb-4">
-                      <Image
-                        src={artist.coverArt && api ? api.getCoverArtUrl(artist.coverArt, 200) : '/placeholder-artist.png'}
-                        alt={artist.name}
-                        width={250}
-                        height={250}
-                        className="object-cover w-full h-full"
-                      />
-                      </div>
-                      <h3 className="font-semibold truncate">{artist.name}</h3>
-                      <p className="text-sm text-muted-foreground">
-                        {artist.albumCount} albums
-                      </p>
-                    </CardContent>
-                  </Card>
+                  <ArtistIcon key={artist.id} artist={artist} responsive />
                 ))}
               </div>
             )}
           </TabsContent>
         </Tabs>
+        </div>
       </div>
     </div>
   );

app/history/page.tsx

@@ -79,7 +79,7 @@ export default function HistoryPage() {
   return (
     <div className="h-full px-4 py-6 lg:px-8">
       <Tabs defaultValue="music" className="h-full space-y-6">
-        <TabsContent value="music" className="border-none p-0 outline-none">
+        <TabsContent value="music" className="border-none p-0 outline-hidden">
           <div className="flex items-center justify-between">
             <div className="space-y-1">
               <div className="flex items-center gap-2">
@@ -155,7 +155,7 @@ export default function HistoryPage() {
                             </div>
 
                             {/* Album Art */}
-                            <div className="w-12 h-12 mr-4 flex-shrink-0">
+                            <div className="w-12 h-12 mr-4 shrink-0">
                               <Image
                                 src={track.coverArt || '/default-user.jpg'}
                                 alt={track.album}

app/layout.tsx

@@ -26,6 +26,36 @@ export const metadata = {
       'max-snippet': -1,
     },
   },
+  appleWebApp: {
+    capable: true,
+    statusBarStyle: 'black-translucent',
+    title: isDev && shortCommit ? `mice (dev: ${shortCommit})` : 'mice',
+  },
+  formatDetection: {
+    telephone: false,
+  },
+  other: {
+    'apple-mobile-web-app-capable': 'yes',
+    'apple-mobile-web-app-status-bar-style': 'black-translucent',
+    'format-detection': 'telephone=no',
+  },
+  icons: {
+    icon: [
+      { url: '/favicon.ico', sizes: '48x48' },
+      { url: '/icon-192.png', sizes: '192x192', type: 'image/png' },
+      { url: '/icon-512.png', sizes: '512x512', type: 'image/png' },
+    ],
+    apple: [
+      { url: '/apple-touch-icon-precomposed.png', sizes: '180x180', type: 'image/png' },
+    ],
+  },
+};
+
+export const viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
 };
 
 const geistSans = localFont({
@@ -45,8 +75,9 @@ interface LayoutProps {
 
 export default function Layout({ children }: LayoutProps) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <head>
+        <link rel="manifest" href="/manifest.json" />
         <script
           dangerouslySetInnerHTML={{
             __html: `

app/library/albums/page.tsx

@@ -109,7 +109,7 @@ export default function AlbumsPage() {
   return (
     <div className="h-full px-4 py-6 lg:px-8">
       <Tabs defaultValue="music" className="h-full flex flex-col space-y-6">
-        <TabsContent value="music" className="border-none p-0 outline-none flex flex-col flex-grow">
+        <TabsContent value="music" className="border-none p-0 outline-hidden flex flex-col grow">
           <div className="flex items-center justify-between mb-4">
             <div className="space-y-1">
               <p className="text-2xl font-semibold tracking-tight">
@@ -150,7 +150,7 @@ export default function AlbumsPage() {
 
           <Separator className="my-4" />
           
-          <div className="relative flex-grow">
+          <div className="relative grow">
             <ScrollArea className="h-full">
               <div className="h-full overflow-y-auto">
                 <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 gap-4 p-4 pb-8">

app/library/artists/page.tsx

@@ -7,13 +7,11 @@ import { Separator } from "@/components/ui/separator";
 import { Tabs, TabsContent } from "@/components/ui/tabs";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Card, CardContent } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
 import { ArtistIcon } from '@/app/components/artist-icon';
 import { useNavidrome } from '@/app/components/NavidromeContext';
 import { Artist } from '@/lib/navidrome';
 import Loading from '@/app/components/loading';
-import { Search, Heart } from 'lucide-react';
+import { Search } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import Image from 'next/image';
 
@@ -67,7 +65,7 @@ export default function ArtistPage() {
   return (
     <div className="h-full px-4 py-6 lg:px-8 mb-24">
       <Tabs defaultValue="music" className="h-full space-y-6">
-        <TabsContent value="music" className="border-none p-0 outline-none">
+        <TabsContent value="music" className="border-none p-0 outline-hidden">
           <div className="flex items-center justify-between">
             <div className="space-y-1">
               <p className="text-2xl font-semibold tracking-tight">
@@ -106,27 +104,7 @@ export default function ArtistPage() {
             <ScrollArea>
               <div className="grid gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 cursor-pointer">
                 {filteredArtists.map((artist) => (
-                  <Card key={artist.id} className="overflow-hidden">
-                    <div className="aspect-square relative group cursor-pointer" onClick={() => handleViewArtist(artist)}>
-                        <div className="w-full h-full">
-                        <Image
-                          src={artist.coverArt && api ? api.getCoverArtUrl(artist.coverArt, 200) : '/placeholder-artist.png'}
-                          alt={artist.name}
-                          width={290}
-                          height={290}
-                          className="object-cover w-full h-full"
-                        />
-                        </div>
-                      <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
-                      </div>
-                    </div>
-                    <CardContent className="p-4">
-                      <h3 className="font-semibold truncate">{artist.name}</h3>
-                      <p className="text-sm text-muted-foreground">
-                        {artist.albumCount} albums
-                      </p>
-                    </CardContent>
-                  </Card>
+                  <ArtistIcon key={artist.id} artist={artist} responsive />
                 ))}
               </div>
               <ScrollBar orientation="horizontal" />

app/library/page.tsx

@@ -0,0 +1,244 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import Link from 'next/link';
+import Image from 'next/image';
+import { Music, Users, Disc, ListMusic, Heart, Play } from 'lucide-react';
+import { Card, CardContent } from '@/components/ui/card';
+import { getNavidromeAPI } from '@/lib/navidrome';
+import NavidromeAPI from '@/lib/navidrome';
+import { useAudioPlayer } from '@/app/components/AudioPlayerContext';
+import { useIsMobile } from '@/hooks/use-mobile';
+
+interface Album {
+  id: string;
+  name: string;
+  artist: string;
+  artistId?: string;
+  coverArt?: string;
+  year?: number;
+  songCount: number;
+}
+
+interface LibraryStats {
+  albums: number;
+  artists: number;
+  songs: number;
+  playlists: number;
+}
+
+export default function LibraryPage() {
+  const [recentAlbums, setRecentAlbums] = useState<Album[]>([]);
+  const [stats, setStats] = useState<LibraryStats>({ albums: 0, artists: 0, songs: 0, playlists: 0 });
+  const [loading, setLoading] = useState(true);
+  const [api, setApi] = useState<NavidromeAPI | null>(null);
+  const { playAlbum } = useAudioPlayer();
+  const isMobile = useIsMobile();
+
+  useEffect(() => {
+    const loadLibraryData = async () => {
+      try {
+        const navidromeApi = getNavidromeAPI();
+        if (!navidromeApi) {
+          console.error('Navidrome API not available');
+          return;
+        }
+        setApi(navidromeApi);
+
+        // Load recent albums
+        const albumsData = await navidromeApi.getAlbums('newest', 4, 0);
+        setRecentAlbums(albumsData || []);
+
+        // Load library stats
+        const [allAlbums, allArtists, allPlaylists] = await Promise.all([
+          navidromeApi.getAlbums('alphabeticalByName', 1, 0), // Just to get count
+          navidromeApi.getArtists(),
+          navidromeApi.getPlaylists()
+        ]);
+
+        setStats({
+          albums: allAlbums?.length || 0,
+          artists: allArtists?.length || 0,
+          songs: 0, // We don't have a direct method for this
+          playlists: allPlaylists?.length || 0
+        });
+      } catch (error) {
+        console.error('Failed to load library data:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadLibraryData();
+  }, []);
+
+  const handlePlayAlbum = async (album: Album) => {
+    try {
+      await playAlbum(album.id);
+    } catch (error) {
+      console.error('Failed to play album:', error);
+    }
+  };
+
+  const libraryLinks = [
+    {
+      href: '/library/albums',
+      label: 'Albums',
+      icon: Disc,
+      description: 'Browse all albums',
+      count: stats.albums
+    },
+    {
+      href: '/library/artists',
+      label: 'Artists',
+      icon: Users,
+      description: 'Discover artists',
+      count: stats.artists
+    },
+    {
+      href: '/library/songs',
+      label: 'Songs',
+      icon: Music,
+      description: 'All your music',
+      count: stats.songs
+    },
+    {
+      href: '/library/playlists',
+      label: 'Playlists',
+      icon: ListMusic,
+      description: 'Your playlists',
+      count: stats.playlists
+    },
+    {
+      href: '/favorites',
+      label: 'Favorites',
+      icon: Heart,
+      description: 'Starred music',
+      count: 0
+    }
+  ];
+
+  if (loading) {
+    return (
+      <div className="p-4 pb-20 space-y-6">
+        <div className="space-y-4">
+          <h1 className="text-2xl font-bold">Your Library</h1>
+          
+          {/* Loading skeleton for library links */}
+          <div>
+            <h2 className="text-lg font-semibold mb-3">Browse</h2>
+            <div className="space-y-3">
+              {[...Array(5)].map((_, i) => (
+                <div key={i} className="animate-pulse">
+                  <div className="bg-muted rounded-lg h-16"></div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Loading skeleton for recent albums */}
+          <div>
+            <h2 className="text-lg font-semibold mb-3">Recently Added</h2>
+            <div className="grid grid-cols-2 gap-4">
+              {[...Array(4)].map((_, i) => (
+                <div key={i} className="animate-pulse">
+                  <div className="bg-muted rounded-lg aspect-square mb-2"></div>
+                  <div className="bg-muted h-4 rounded mb-1"></div>
+                  <div className="bg-muted h-3 rounded w-3/4"></div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-4 pb-20 space-y-6">
+      <div className="space-y-4">
+        <h1 className="text-2xl font-bold">Your Library</h1>
+        
+        {/* Library Navigation - Always at top */}
+        <div>
+          {/* <h2 className="text-lg font-semibold mb-3">Browse</h2> */}
+          <div className="flex flex-col gap-2">
+            {libraryLinks.map((link) => {
+              const Icon = link.icon;
+              return (
+                <Link key={link.href} href={link.href}>
+                  <Card className="hover:bg-muted/50 transition-colors cursor-pointer">
+                    <CardContent className="p-2">
+                      <div className="flex items-center space-x-4">
+                        <div className="p-2 bg-primary/10 rounded-lg">
+                          <Icon className="w-6 h-6 text-primary" />
+                        </div>
+                        <div className="flex-1">
+                          <h3 className="font-medium">{link.label}</h3>
+                          <p className="text-sm text-muted-foreground">{link.description}</p>
+                        </div>
+                        {link.count > 0 && (
+                          <div className="text-sm text-muted-foreground">
+                            {link.count}
+                          </div>
+                        )}
+                      </div>
+                    </CardContent>
+                  </Card>
+                </Link>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Recently Added Albums - At bottom on mobile, after Browse on desktop */}
+        <div>
+          <h2 className="text-lg font-semibold mb-3">Recently Added</h2>
+          <div className="grid grid-cols-2 gap-4">
+            {recentAlbums.map((album) => (
+              <Card key={album.id} className="group cursor-pointer hover:bg-muted/50 transition-colors">
+                <CardContent className="p-3">
+                  <Link href={`/album/${album.id}`}>
+                    <div className="relative aspect-square mb-2">
+                      <Image
+                        src={album.coverArt && api ? api.getCoverArtUrl(album.coverArt, 300) : '/default-user.jpg'}
+                        alt={album.name}
+                        width={600}
+                        height={600}
+                        className="object-cover rounded-lg"
+                        sizes="(max-width: 768px) 50vw, 200px"
+                      />
+                      {!isMobile && (
+                        <button
+                          onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            handlePlayAlbum(album);
+                          }}
+                          className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity rounded-lg flex items-center justify-center"
+                        >
+                          <Play className="w-8 h-8 text-white fill-white" />
+                        </button>
+                      )}
+                    </div>
+                    <h3 className="font-medium text-sm truncate hover:underline">{album.name}</h3>
+                    <Link 
+                      href={`/artist/${album.artistId || album.artist}`}
+                      className="text-xs text-muted-foreground truncate hover:underline block"
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      {album.artist}
+                    </Link>
+                    {/* {album.year && (
+                      <p className="text-xs text-muted-foreground">{album.year}</p>
+                    )} */}
+                  </Link>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/library/playlists/page.tsx

@@ -31,9 +31,9 @@ const PlaylistsPage: React.FC = () => {
   }
 
   return (
-    <div className="h-full px-4 py-6 lg:px-8">
+    <div className="p-6 pb-24 w-full">
       <Tabs defaultValue="music" className="h-full space-y-6">
-        <TabsContent value="music" className="border-none p-0 outline-none">
+        <TabsContent value="music" className="border-none p-0 outline-hidden">
           <div className="flex items-center justify-between">
             <div className="space-y-1">
               <p className="text-2xl font-semibold tracking-tight">
@@ -53,14 +53,14 @@ const PlaylistsPage: React.FC = () => {
             <ScrollArea>
               <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 pb-4">                {playlists.map((playlist) => {
                   const playlistCoverUrl = playlist.coverArt && api
-                    ? api.getCoverArtUrl(playlist.coverArt, 200)
+                    ? api.getCoverArtUrl(playlist.coverArt, 600)
                     : '/default-user.jpg';
                   
                   return (
                     <Link key={playlist.id} href={`/playlist/${playlist.id}`}>
                       <div className="p-4 rounded-lg border border-border hover:bg-accent hover:text-accent-foreground transition-colors cursor-pointer h-32">
                         <div className="flex items-center space-x-4 h-full">
-                          <div className="w-12 h-12 bg-muted rounded-md overflow-hidden flex-shrink-0">
+                          <div className="w-12 h-12 bg-muted rounded-md overflow-hidden shrink-0">
                             <Image
                               src={playlistCoverUrl}
                               alt={playlist.name}

app/library/songs/page.tsx

@@ -10,13 +10,15 @@ import { Separator } from '@/components/ui/separator';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Input } from '@/components/ui/input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Search, Play, Plus, User, Disc } from 'lucide-react';
+import { Search, Play, Plus, User, Disc, ChevronLeft, ChevronRight } from 'lucide-react';
 import Loading from '@/app/components/loading';
 import { getNavidromeAPI } from '@/lib/navidrome';
 
 type SortOption = 'title' | 'artist' | 'album' | 'year' | 'duration' | 'track';
 type SortDirection = 'asc' | 'desc';
 
+const ITEMS_PER_PAGE = 50;
+
 export default function SongsPage() {
   const { getAllSongs } = useNavidrome();
   const { playTrack, addToQueue, currentTrack } = useAudioPlayer();
@@ -26,6 +28,7 @@ export default function SongsPage() {
   const [searchQuery, setSearchQuery] = useState('');
   const [sortBy, setSortBy] = useState<SortOption>('title');
   const [sortDirection, setSortDirection] = useState<SortDirection>('asc');
+  const [currentPage, setCurrentPage] = useState(1);
   const api = getNavidromeAPI();
 
   useEffect(() => {
@@ -100,8 +103,9 @@ export default function SongsPage() {
     });
 
     setFilteredSongs(filtered);
+    setCurrentPage(1); // Reset to first page when filters change
   }, [songs, searchQuery, sortBy, sortDirection]);
-  const handlePlaySong = (song: Song) => {
+    const handlePlayClick = (song: Song) => {
     if (!api) {
       console.error('Navidrome API not available');
       return;
@@ -114,7 +118,7 @@ export default function SongsPage() {
       artist: song.artist,
       album: song.album,
       duration: song.duration,
-      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 300) : undefined,
+  coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 300) : undefined,
       albumId: song.albumId,
       artistId: song.artistId,
       starred: !!song.starred
@@ -135,7 +139,7 @@ export default function SongsPage() {
       artist: song.artist,
       album: song.album,
       duration: song.duration,
-      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 300) : undefined,
+  coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 300) : undefined,
       albumId: song.albumId,
       artistId: song.artistId,
       starred: !!song.starred
@@ -154,6 +158,24 @@ export default function SongsPage() {
     return currentTrack?.id === song.id;
   };
 
+  // Pagination calculations
+  const totalPages = Math.ceil(filteredSongs.length / ITEMS_PER_PAGE);
+  const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
+  const endIndex = startIndex + ITEMS_PER_PAGE;
+  const paginatedSongs = filteredSongs.slice(startIndex, endIndex);
+
+  const goToNextPage = () => {
+    if (currentPage < totalPages) {
+      setCurrentPage(currentPage + 1);
+    }
+  };
+
+  const goToPreviousPage = () => {
+    if (currentPage > 1) {
+      setCurrentPage(currentPage - 1);
+    }
+  };
+
   if (loading) {
     return <Loading />;
   }
@@ -165,7 +187,8 @@ export default function SongsPage() {
         <div className="space-y-2">
           <h1 className="text-3xl font-semibold tracking-tight">Songs</h1>
           <p className="text-sm text-muted-foreground">
-            {filteredSongs.length} of {songs.length} songs
+            Showing {startIndex + 1}-{Math.min(endIndex, filteredSongs.length)} of {filteredSongs.length} songs
+            {searchQuery && ` (filtered from ${songs.length} total)`}
           </p>
         </div>
 
@@ -216,13 +239,13 @@ export default function SongsPage() {
             </div>
           ) : (
             <div className="space-y-1">
-              {filteredSongs.map((song, index) => (
+              {paginatedSongs.map((song, index) => (
                 <div
                   key={song.id}
                   className={`group flex items-center p-3 rounded-lg hover:bg-accent/50 cursor-pointer transition-colors ${
                     isCurrentlyPlaying(song) ? 'bg-accent/50 border-l-4 border-primary' : ''
                   }`}
-                  onClick={() => handlePlaySong(song)}
+                  onClick={() => handlePlayClick(song)}
                 >
                   {/* Track Number / Play Indicator */}
                   <div className="w-8 text-center text-sm text-muted-foreground mr-3">
@@ -232,15 +255,15 @@ export default function SongsPage() {
                       </div>
                     ) : (
                       <>
-                        <span className="group-hover:hidden">{index + 1}</span>
+                        <span className="group-hover:hidden">{startIndex + index + 1}</span>
                         <Play className="w-4 h-4 mx-auto hidden group-hover:block" />
                       </>
                     )}
                   </div>
 
                   {/* Album Art */}
-                  <div className="w-12 h-12 mr-4 flex-shrink-0">                    <Image
-                      src={song.coverArt && api ? api.getCoverArtUrl(song.coverArt, 100) : '/default-user.jpg'}
+                  <div className="w-12 h-12 mr-4 shrink-0">                    <Image
+                      src={song.coverArt && api ? api.getCoverArtUrl(song.coverArt, 48) : '/default-user.jpg'}
                       alt={song.album}
                       width={48}
                       height={48}
@@ -298,6 +321,35 @@ export default function SongsPage() {
             </div>
           )}
         </ScrollArea>
+
+        {/* Pagination Controls */}
+        {filteredSongs.length > ITEMS_PER_PAGE && (
+          <div className="flex items-center justify-between pt-4">
+            <p className="text-sm text-muted-foreground">
+              Page {currentPage} of {totalPages}
+            </p>
+            <div className="flex gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={goToPreviousPage}
+                disabled={currentPage === 1}
+              >
+                <ChevronLeft className="w-4 h-4 mr-1" />
+                Previous
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={goToNextPage}
+                disabled={currentPage === totalPages}
+              >
+                Next
+                <ChevronRight className="w-4 h-4 ml-1" />
+              </Button>
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );

app/manifest.ts

@@ -1,44 +0,0 @@
-import type { MetadataRoute } from 'next'
- 
-export default function manifest(): MetadataRoute.Manifest {
-  return {
-    name: 'mice',
-    short_name: 'Offbrand',
-    description: 'a very mice clone',
-    start_url: '/',
-    categories: ["music", "entertainment"],
-    display_override: ['window-controls-overlay'],
-    display: 'standalone',
-    background_color: '#0f0f0f',
-    theme_color: '#0f0f0f',
-    icons: [
-      { 
-         src: '/favicon.ico', 
-         type: 'image/x-icon', 
-         sizes: '16x16 32x32'
-      },
-      { 
-         src: '/icon-192.png', 
-         type: 'image/png', 
-         sizes: '192x192' 
-      },
-      { 
-         src: '/icon-512.png', 
-         type: 'image/png', 
-         sizes: '512x512' 
-      },
-      { 
-         src: '/icon-192-maskable.png', 
-         type: 'image/png', 
-         sizes: '192x192', 
-         purpose: 'maskable' 
-      },
-      { 
-         src: './icon-512-maskable.png', 
-         type: 'image/png', 
-         sizes: '512x512', 
-         purpose: 'maskable'
-      }
-   ],
-  }
-}

app/page.tsx

@@ -5,58 +5,193 @@ import { Separator } from '../components/ui/separator';
 import { Tabs, TabsContent } from '../components/ui/tabs';
 import { AlbumArtwork } from './components/album-artwork';
 import { useNavidrome } from './components/NavidromeContext';
-import { useEffect, useState } from 'react';
-import { Album } from '@/lib/navidrome';
+import { useEffect, useState, Suspense } from 'react';
+import { Album, Song, getNavidromeAPI } from '@/lib/navidrome';
 import { useNavidromeConfig } from './components/NavidromeConfigContext';
+import { useSearchParams } from 'next/navigation';
+import { useAudioPlayer } from './components/AudioPlayerContext';
+import { SongRecommendations } from './components/SongRecommendations';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useIsMobile } from '@/hooks/use-mobile';
+import { UserProfile } from './components/UserProfile';
 
 type TimeOfDay = 'morning' | 'afternoon' | 'evening';
-export default function MusicPage() {
-  const { albums, isLoading, api, isConnected } = useNavidrome();
+
+function MusicPageContent() {
+  const { api } = useNavidrome();
+  const { playAlbum, playTrack, shuffle, toggleShuffle, addToQueue } = useAudioPlayer();
+  const searchParams = useSearchParams();
+  const [allAlbums, setAllAlbums] = useState<Album[]>([]);
   const [recentAlbums, setRecentAlbums] = useState<Album[]>([]);
   const [newestAlbums, setNewestAlbums] = useState<Album[]>([]);
   const [favoriteAlbums, setFavoriteAlbums] = useState<Album[]>([]);
+  const [albumsLoading, setAlbumsLoading] = useState(true);
   const [favoritesLoading, setFavoritesLoading] = useState(true);
+  const [shortcutProcessed, setShortcutProcessed] = useState(false);
+  const isMobile = useIsMobile();
+
+  // Load albums
+  useEffect(() => {
+    let mounted = true;
+    const load = async () => {
+      if (!api) return;
+      setAlbumsLoading(true);
+      try {
+        const list = await api.getAlbums('newest', 500);
+        if (!mounted) return;
+        setAllAlbums(list || []);
+        // Split albums into two sections
+        const recent = list.slice(0, Math.ceil(list.length / 2));
+        const newest = list.slice(Math.ceil(list.length / 2));
+        setRecentAlbums(recent);
+        setNewestAlbums(newest);
+      } catch (e) {
+        console.error('Failed to load albums:', e);
+        if (mounted) {
+          setAllAlbums([]);
+          setRecentAlbums([]);
+          setNewestAlbums([]);
+        }
+      } finally {
+        if (mounted) setAlbumsLoading(false);
+      }
+    };
+    load();
+    return () => { mounted = false; };
+  }, [api]);
 
   useEffect(() => {
-    if (albums.length > 0) {
-      // Split albums into recent and newest for display
-      const recent = albums.slice(0, Math.ceil(albums.length / 2));
-      const newest = albums.slice(Math.ceil(albums.length / 2));
-      setRecentAlbums(recent);
-      setNewestAlbums(newest);
-    }
-  }, [albums]);
-
-  useEffect(() => {
+    let mounted = true;
     const loadFavoriteAlbums = async () => {
-      if (!api || !isConnected) return;
-      
+      if (!api) return;
       setFavoritesLoading(true);
       try {
-        const starredAlbums = await api.getAlbums('starred', 20); // Limit to 20 for homepage
-        setFavoriteAlbums(starredAlbums);
+        const starred = await api.getAlbums('starred', 20);
+        if (mounted) setFavoriteAlbums(starred || []);
       } catch (error) {
         console.error('Failed to load favorite albums:', error);
+        if (mounted) setFavoriteAlbums([]);
       } finally {
-        setFavoritesLoading(false);
+        if (mounted) setFavoritesLoading(false);
+      }
+    };
+    loadFavoriteAlbums();
+    return () => { mounted = false; };
+  }, [api]);
+
+  // Handle PWA shortcuts
+  useEffect(() => {
+    const action = searchParams.get('action');
+    if (!action || shortcutProcessed) return;
+
+    const handleShortcuts = async () => {
+      try {
+        switch (action) {
+          case 'resume':
+            // Try to resume from localStorage or play a recent track
+            const lastTrack = localStorage.getItem('lastPlayedTrack');
+            if (lastTrack) {
+              const trackData = JSON.parse(lastTrack);
+              await playTrack(trackData);
+            } else if (recentAlbums.length > 0) {
+              // Fallback: play first track from most recent album
+              await playAlbum(recentAlbums[0].id);
+            }
+            break;
+
+          case 'recent':
+            if (recentAlbums.length > 0) {
+              // Get the 10 most recent albums and shuffle them
+              const tenRecentAlbums = recentAlbums.slice(0, 10);
+              const shuffledAlbums = [...tenRecentAlbums].sort(() => Math.random() - 0.5);
+              
+              // Enable shuffle if not already on
+              if (!shuffle) {
+                toggleShuffle();
+              }
+              
+              // Play first album and add remaining albums to queue
+              await playAlbum(shuffledAlbums[0].id);
+              
+              // Add remaining albums to queue
+              const navidromeApi = getNavidromeAPI();
+              if (navidromeApi) {
+                for (let i = 1; i < shuffledAlbums.length; i++) {
+                  try {
+                    const songs = await navidromeApi.getAlbumSongs(shuffledAlbums[i].id);
+                    songs.forEach((song: Song) => {
+                      addToQueue({
+                        id: song.id,
+                        name: song.title,
+                        url: navidromeApi.getStreamUrl(song.id),
+                        artist: song.artist || 'Unknown Artist',
+                        artistId: song.artistId || '',
+                        album: song.album || 'Unknown Album',
+                        albumId: song.parent,
+                      duration: song.duration || 0,
+                      coverArt: song.coverArt,
+                      starred: !!song.starred
+                    });
+                  });
+                } catch (error) {
+                  console.error('Failed to load album tracks:', error);
+                }
+              }
+            }
+            }
+            break;
+
+          case 'shuffle-favorites':
+            if (favoriteAlbums.length > 0) {
+              // Shuffle all favorite albums
+              const shuffledFavorites = [...favoriteAlbums].sort(() => Math.random() - 0.5);
+              
+              // Enable shuffle if not already on
+              if (!shuffle) {
+                toggleShuffle();
+              }
+              
+              // Play first album and add remaining albums to queue
+              await playAlbum(shuffledFavorites[0].id);
+              
+              // Add remaining albums to queue
+              const navidromeApiFav = getNavidromeAPI();
+              if (navidromeApiFav) {
+                for (let i = 1; i < shuffledFavorites.length; i++) {
+                  try {
+                    const songs = await navidromeApiFav.getAlbumSongs(shuffledFavorites[i].id);
+                    songs.forEach((song: Song) => {
+                      addToQueue({
+                        id: song.id,
+                        name: song.title,
+                        url: navidromeApiFav.getStreamUrl(song.id),
+                        artist: song.artist || 'Unknown Artist',
+                        artistId: song.artistId || '',
+                        album: song.album || 'Unknown Album',
+                        albumId: song.parent,
+                      duration: song.duration || 0,
+                      coverArt: song.coverArt,
+                      starred: !!song.starred
+                    });
+                  });
+                } catch (error) {
+                  console.error('Failed to load album tracks:', error);
+                }
+              }
+            }
+            }
+            break;
+        }
+        setShortcutProcessed(true);
+      } catch (error) {
+        console.error('Failed to handle PWA shortcut:', error);
       }
     };
 
-    loadFavoriteAlbums();
-  }, [api, isConnected]);
-
-  // Get greeting and time of day
-  const hour = new Date().getHours();
-  const greeting = hour < 12 ? 'Good morning' : 'Good afternoon';
-  let timeOfDay: TimeOfDay;
-  if (hour >= 5 && hour < 12) {
-    timeOfDay = 'morning';
-  } else if (hour >= 12 && hour < 18) {
-    timeOfDay = 'afternoon';
-  } else {
-    timeOfDay = 'evening';
-  }
-
+    // Delay to ensure data is loaded
+    const timeout = setTimeout(handleShortcuts, 1000);
+    return () => clearTimeout(timeout);
+  }, [searchParams, recentAlbums, favoriteAlbums, shortcutProcessed, playAlbum, playTrack, shuffle, toggleShuffle, addToQueue]);
 
   // Try to get user name from navidrome context, fallback to 'user'
   let userName = '';
@@ -68,29 +203,15 @@ export default function MusicPage() {
 
 
   return (
-    <div className="h-full px-4 py-6 lg:px-8 pb-24">
-      <div className="relative rounded-lg p-8">
-          <div className="relative rounded-sm p-10">
-            <div
-              className="absolute inset-0 bg-center bg-cover bg-no-repeat blur-xl bg-gradient-to-r from-primary to-secondary"
- style={{
-                backgroundImage:
- timeOfDay === 'morning'
- ? 'linear-gradient(to right, #ff9a9e, #fad0c4, #fad0c4)' // Warm tones for morning
- : timeOfDay === 'evening'
- ? 'linear-gradient(to right, #a18cd1, #fbc2eb)' // Cool tones for evening
- : 'linear-gradient(to right, #a8edea, #fed6e3)', // Default/afternoon colors
- }} />
-            <div className="relative z-10 flex items-center space-x-6">
-              <div className="flex-1">
-                <h1 className="text-3xl font-bold mb-4">{greeting}{userName ? `, ${userName}` : ''}!</h1>
-              </div>
-          </div>
-        </div>
-       </div>
+    <div className="p-6 pb-24 w-full">
+      {/* Song Recommendations Section */}
+      <div className="mb-8">
+        <SongRecommendations userName={userName} />
+      </div>
+      
       <>
       <Tabs defaultValue="music" className="h-full space-y-6">
-        <TabsContent value="music" className="border-none p-0 outline-none">
+        <TabsContent value="music" className="border-none p-0 outline-hidden">
           <div className="flex items-center justify-between">
             <div className="space-y-1">
               <p className="text-2xl font-semibold tracking-tight">
@@ -105,17 +226,24 @@ export default function MusicPage() {
           <div className="relative">
             <ScrollArea>
               <div className="flex space-x-4 pb-4">
-                {isLoading ? (
+                {albumsLoading ? (
                   // Loading skeletons
-                  Array.from({ length: 6 }).map((_, i) => (
-                    <div key={i} className="w-[220px] h-[320px] bg-muted animate-pulse rounded-md flex-shrink-0" />
+                  Array.from({ length: 10 }).map((_, i) => (
+                    <div key={i} className="w-[220px] shrink-0 space-y-3">
+                      <Skeleton className="aspect-square w-full" />
+                      <div className="space-y-2 p-1">
+                        <Skeleton className="h-4 w-3/4" />
+                        <Skeleton className="h-3 w-1/2" />
+                        <Skeleton className="h-3 w-2/3" />
+                      </div>
+                    </div>
                   ))
                 ) : (
                   recentAlbums.map((album) => (
                     <AlbumArtwork
                       key={album.id}
                       album={album}
-                      className="w-[220px] flex-shrink-0"
+                      className="w-[220px] shrink-0"
                       aspectRatio="square"
                       width={220}
                       height={220}
@@ -144,15 +272,22 @@ export default function MusicPage() {
                   <div className="flex space-x-4 pb-4">
                     {favoritesLoading ? (
                       // Loading skeletons
-                      Array.from({ length: 6 }).map((_, i) => (
-                        <div key={i} className="w-[220px] h-[320px] bg-muted animate-pulse rounded-md flex-shrink-0" />
+                      Array.from({ length: 10 }).map((_, i) => (
+                        <div key={i} className="w-[220px] shrink-0 space-y-3">
+                          <Skeleton className="aspect-square w-full" />
+                          <div className="space-y-2 p-1">
+                            <Skeleton className="h-4 w-3/4" />
+                            <Skeleton className="h-3 w-1/2" />
+                            <Skeleton className="h-3 w-2/3" />
+                          </div>
+                        </div>
                       ))
                     ) : (
                       favoriteAlbums.map((album) => (
                         <AlbumArtwork
                           key={album.id}
                           album={album}
-                          className="w-[220px] flex-shrink-0"
+                          className="w-[220px] shrink-0"
                           aspectRatio="square"
                           width={220}
                           height={220}
@@ -178,17 +313,24 @@ export default function MusicPage() {
           <div className="relative">
             <ScrollArea>
             <div className="flex space-x-4 pb-4">
-            {isLoading ? (
+            {albumsLoading ? (
                   // Loading skeletons
                   Array.from({ length: 10 }).map((_, i) => (
-                    <div key={i} className="w-[220px] h-[320px] bg-muted animate-pulse rounded-md flex-shrink-0" />
+                    <div key={i} className="w-[220px] shrink-0 space-y-3">
+                      <Skeleton className="aspect-square w-full" />
+                      <div className="space-y-2 p-1">
+                        <Skeleton className="h-4 w-3/4" />
+                        <Skeleton className="h-3 w-1/2" />
+                        <Skeleton className="h-3 w-2/3" />
+                      </div>
+                    </div>
                   ))
                 ) : (
                   newestAlbums.map((album) => (
                     <AlbumArtwork
                       key={album.id}
                       album={album}
-                      className="w-[220px] flex-shrink-0"
+                      className="w-[220px] shrink-0"
                       aspectRatio="square"
                       width={220}
                       height={220}
@@ -204,4 +346,12 @@ export default function MusicPage() {
       </>
     </div>
   );
+}
+
+export default function MusicPage() {
+  return (
+    <Suspense fallback={<div className="p-6">Loading...</div>}>
+      <MusicPageContent />
+    </Suspense>
+  );
 }

app/playlist/[id]/page.tsx

@@ -57,7 +57,7 @@ export default function PlaylistPage() {
       artist: song.artist,
       album: song.album,
       duration: song.duration,
-      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 300) : undefined,
+  coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 300) : undefined,
       albumId: song.albumId,
       artistId: song.artistId,
       starred: !!song.starred
@@ -77,7 +77,7 @@ export default function PlaylistPage() {
       artist: song.artist,
       album: song.album,
       duration: song.duration,
-      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 300) : undefined,
+  coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 300) : undefined,
       albumId: song.albumId,
       artistId: song.artistId,
       starred: !!song.starred
@@ -98,7 +98,7 @@ export default function PlaylistPage() {
       artist: song.artist,
       album: song.album,
       duration: song.duration,
-      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 300) : undefined,
+  coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 300) : undefined,
       albumId: song.albumId,
       artistId: song.artistId,
       starred: !!song.starred
@@ -208,8 +208,8 @@ export default function PlaylistPage() {
                     </div>
 
                     {/* Album Art */}
-                    <div className="w-12 h-12 mr-4 flex-shrink-0">                      <Image
-                        src={song.coverArt && api ? api.getCoverArtUrl(song.coverArt, 100) : '/default-user.jpg'}
+                    <div className="w-12 h-12 mr-4 shrink-0">                      <Image
+                        src={song.coverArt && api ? api.getCoverArtUrl(song.coverArt, 48) : '/default-user.jpg'}
                         alt={song.album}
                         width={48}
                         height={48}

app/queue/page.tsx

@@ -3,14 +3,161 @@
 import React from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
-import { useAudioPlayer } from '@/app/components/AudioPlayerContext';
+import { useAudioPlayer, Track } from '@/app/components/AudioPlayerContext';
 import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
 import { ScrollArea } from '@/components/ui/scroll-area';
-import { Play, X, Disc, Trash2, SkipForward } from 'lucide-react';
+import { Play, X, Disc, Trash2, SkipForward, GripVertical } from 'lucide-react';
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+  useSortable,
+} from '@dnd-kit/sortable';
+import {
+  CSS,
+} from '@dnd-kit/utilities';
+
+interface SortableQueueItemProps {
+  track: Track;
+  index: number;
+  onPlay: () => void;
+  onRemove: () => void;
+  formatDuration: (seconds: number) => string;
+}
+
+function SortableQueueItem({ track, index, onPlay, onRemove, formatDuration }: SortableQueueItemProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: `${track.id}-${index}` });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={`group flex items-center p-3 rounded-lg hover:bg-accent/50 transition-colors ${
+        isDragging ? 'bg-accent' : ''
+      }`}
+    >
+      {/* Drag Handle */}
+      <div
+        className="mr-3 opacity-60 group-hover:opacity-100 transition-opacity cursor-grab active:cursor-grabbing p-1 -m-1 hover:bg-accent rounded"
+        {...attributes}
+        {...listeners}
+        onClick={(e) => e.stopPropagation()}
+        onMouseDown={(e) => e.stopPropagation()}
+      >
+        <GripVertical className="w-4 h-4 text-muted-foreground" />
+      </div>
+
+      {/* Clickable content area for play */}
+      <div 
+        className="flex items-center flex-1 cursor-pointer"
+        onClick={onPlay}
+      >
+        {/* Album Art with Play Indicator */}
+        <div className="w-12 h-12 mr-4 shrink-0 relative">
+          <Image
+            src={track.coverArt || '/default-user.jpg'}
+            alt={track.album}
+            width={48}
+            height={48}
+            className="w-full h-full object-cover rounded-md"
+          />
+          <div className="absolute inset-0 bg-black/50 rounded-md opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+            <Play className="w-5 h-5 text-white" />
+          </div>
+        </div>
+
+        {/* Song Info */}
+        <div className="flex-1 min-w-0 mr-4">
+          <div className="flex items-center gap-2 mb-1">
+            <p className="font-semibold truncate">{track.name}</p>
+          </div>
+          <div className="flex items-center text-sm text-muted-foreground space-x-4">
+            <div className="flex items-center gap-1">
+              <Link 
+                href={`/artist/${track.artistId}`} 
+                className="truncate hover:text-primary hover:underline"
+                onClick={(e) => e.stopPropagation()}
+              >
+                {track.artist}
+              </Link>
+            </div>
+          </div>
+        </div>
+
+        {/* Duration */}
+        <div className="flex items-center text-sm text-muted-foreground mr-4">
+          {formatDuration(track.duration)}
+        </div>
+      </div>
+
+      {/* Actions */}
+      <div className="flex items-center space-x-2 opacity-0 group-hover:opacity-100 transition-opacity">
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={(e) => {
+            e.stopPropagation();
+            onRemove();
+          }}
+          className="h-8 w-8 p-0 hover:bg-destructive hover:text-destructive-foreground"
+        >
+          <X className="w-4 h-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}
 
 const QueuePage: React.FC = () => {
-  const { queue, currentTrack, removeTrackFromQueue, clearQueue, skipToTrackInQueue } = useAudioPlayer();
+  const { queue, currentTrack, removeTrackFromQueue, clearQueue, skipToTrackInQueue, reorderQueue } = useAudioPlayer();
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8, // Require 8px of movement before starting drag
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (over && active.id !== over.id) {
+      const oldIndex = queue.findIndex((track, index) => `${track.id}-${index}` === active.id);
+      const newIndex = queue.findIndex((track, index) => `${track.id}-${index}` === over.id);
+
+      if (oldIndex !== -1 && newIndex !== -1) {
+        reorderQueue(oldIndex, newIndex);
+      }
+    }
+  };
 
   const formatDuration = (seconds: number): string => {
     const minutes = Math.floor(seconds / 60);
@@ -19,7 +166,7 @@ const QueuePage: React.FC = () => {
   };
 
   return (
-    <div className="h-full px-4 py-6 lg:px-8 pb-24">
+    <div className="p-6 pb-24 w-full">
       <div className="space-y-6">
         {/* Header */}
         <div className="flex items-center justify-between">
@@ -49,7 +196,7 @@ const QueuePage: React.FC = () => {
             <div className="p-4 bg-accent/30 rounded-lg">
               <div className="flex items-center">
                 {/* Album Art */}
-                <div className="w-16 h-16 mr-4 flex-shrink-0">
+                <div className="w-16 h-16 mr-4 shrink-0">
                   <Image
                     src={currentTrack.coverArt || '/default-user.jpg'}
                     alt={currentTrack.album}
@@ -107,67 +254,29 @@ const QueuePage: React.FC = () => {
                 </p>
               </div>
             ) : (
-              <div className="space-y-1">
-                {queue.map((track, index) => (
-                  <div
-                    key={`${track.id}-${index}`}
-                    className="group flex items-center p-3 rounded-lg hover:bg-accent/50 cursor-pointer transition-colors"
-                    onClick={() => skipToTrackInQueue(index)}
-                  >
-                    {/* Album Art with Play Indicator */}
-                    <div className="w-12 h-12 mr-4 flex-shrink-0 relative">
-                      <Image
-                        src={track.coverArt || '/default-user.jpg'}
-                        alt={track.album}
-                        width={48}
-                        height={48}
-                        className="w-full h-full object-cover rounded-md"
+              <DndContext
+                sensors={sensors}
+                collisionDetection={closestCenter}
+                onDragEnd={handleDragEnd}
+              >
+                <SortableContext
+                  items={queue.map((track, index) => `${track.id}-${index}`)}
+                  strategy={verticalListSortingStrategy}
+                >
+                  <div className="space-y-1">
+                    {queue.map((track, index) => (
+                      <SortableQueueItem
+                        key={`${track.id}-${index}`}
+                        track={track}
+                        index={index}
+                        onPlay={() => skipToTrackInQueue(index)}
+                        onRemove={() => removeTrackFromQueue(index)}
+                        formatDuration={formatDuration}
                       />
-                      <div className="absolute inset-0 bg-black/50 rounded-md opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
-                        <Play className="w-5 h-5 text-white" />
-                      </div>
-                    </div>
-
-                    {/* Song Info */}
-                    <div className="flex-1 min-w-0 mr-4">
-                      <div className="flex items-center gap-2 mb-1">
-                        <p className="font-semibold truncate">{track.name}</p>
-                      </div>
-                      <div className="flex items-center text-sm text-muted-foreground space-x-4">
-                        <div className="flex items-center gap-1">
-                          <Link 
-                            href={`/artist/${track.artistId}`} 
-                            className="truncate hover:text-primary hover:underline"
-                            onClick={(e) => e.stopPropagation()}
-                          >
-                            {track.artist}
-                          </Link>
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* Duration */}
-                    <div className="flex items-center text-sm text-muted-foreground mr-4">
-                      {formatDuration(track.duration)}
-                    </div>
-
-                    {/* Actions */}
-                    <div className="flex items-center space-x-2 opacity-0 group-hover:opacity-100 transition-opacity">
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          removeTrackFromQueue(index);
-                        }}
-                        className="h-8 w-8 p-0 hover:bg-destructive hover:text-destructive-foreground"
-                      >
-                        <X className="w-4 h-4" />
-                      </Button>
-                    </div>
+                    ))}
                   </div>
-                ))}
-              </div>
+                </SortableContext>
+              </DndContext>
             )}
           </ScrollArea>
         </div>

app/radio/page.tsx

@@ -128,24 +128,22 @@ const RadioStationsPage = () => {
 
   if (isLoading) {
     return (
-      <div className="container mx-auto p-6 max-w-4xl">
+      <div className="p-6 w-full max-w-4xl">
         <div className="text-center">Loading radio stations...</div>
       </div>
     );
   }
 
   return (
-    <div className="container mx-auto p-6 max-w-4xl">
-      <div className="space-y-6">
-        <div className="flex items-center justify-between">
+    <div className="p-6 pb-24 w-full">
+      <div className="space-y-2">
+        <div className="flex items-center justify-between border-b pb-4 mb-4">
           <div>
-            <h1 className="text-3xl font-semibold tracking-tight flex items-center gap-2">
-              <FaWifi className="w-8 h-8" />
-              Radio Stations
-            </h1>
-            <p className="text-muted-foreground">Listen to internet radio streams</p>
+            <h1 className="text-3xl font-bold">Radio Stations</h1>
+            <p className="text-muted-foreground text-sm">
+              Listen to internet radio stations.
+            </p>
           </div>
-          
           <Dialog open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}>
             <DialogTrigger asChild>
               <Button>

app/search/page.tsx

@@ -11,6 +11,7 @@ import { ArtistIcon } from '@/app/components/artist-icon';
 import { useNavidrome } from '@/app/components/NavidromeContext';
 import { getNavidromeAPI, Artist, Album, Song } from '@/lib/navidrome';
 import { useAudioPlayer } from '@/app/components/AudioPlayerContext';
+import { TrackContextMenu, AlbumContextMenu, ArtistContextMenu } from '@/app/components/ContextMenus';
 import { Search, Play, Plus } from 'lucide-react';
 
 export default function SearchPage() {
@@ -34,7 +35,12 @@ export default function SearchPage() {
     try {
       setIsSearching(true);
       const results = await search2(query);
-      setSearchResults(results);
+      // Limit results to 5 of each type
+      setSearchResults({
+        artists: results.artists.slice(0, 5),
+        albums: results.albums.slice(0, 5),
+        songs: results.songs.slice(0, 5)
+      });
     } catch (error) {
       console.error('Search failed:', error);
       setSearchResults({ artists: [], albums: [], songs: [] });
@@ -51,6 +57,31 @@ export default function SearchPage() {
     return () => clearTimeout(timeoutId);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchQuery]);
+
+  // Focus search input when component mounts (for keyboard shortcut navigation)
+  useEffect(() => {
+    const searchInput = document.querySelector('input[type="text"]') as HTMLInputElement;
+    if (searchInput) {
+      searchInput.focus();
+    }
+  }, []);
+  const createTrackFromSong = (song: Song) => {
+    if (!api) return null;
+    
+    return {
+      id: song.id,
+      name: song.title,
+      url: api.getStreamUrl(song.id),
+      artist: song.artist,
+      album: song.album,
+      duration: song.duration,
+      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 300) : undefined,
+      albumId: song.albumId,
+      artistId: song.artistId,
+      starred: !!song.starred
+    };
+  };
+
   const handlePlaySong = (song: Song) => {
     if (!api) {
       console.error('Navidrome API not available');
@@ -101,7 +132,7 @@ export default function SearchPage() {
   };
 
   return (
-    <div className="h-full px-4 py-6 lg:px-8">
+    <div className="p-6 pb-32 w-full">
       <div className="space-y-6">
         {/* Header */}
         <div className="space-y-1">
@@ -142,7 +173,17 @@ export default function SearchPage() {
                 <ScrollArea className="w-full">
                   <div className="flex space-x-4 pb-4">
                     {searchResults.artists.map((artist) => (
-                      <ArtistIcon key={artist.id} artist={artist} className="flex-shrink-0" />
+                      <ArtistContextMenu 
+                        key={artist.id}
+                        artistId={artist.id}
+                        artistName={artist.name}
+                      >
+                        <ArtistIcon
+                          artist={artist}
+                          className="shrink-0 overflow-hidden"
+                          size={190}
+                        />
+                      </ArtistContextMenu>
                     ))}
                   </div>
                   <ScrollBar orientation="horizontal" />
@@ -157,14 +198,19 @@ export default function SearchPage() {
                 <ScrollArea className="w-full">
                   <div className="flex space-x-4 pb-4">
                     {searchResults.albums.map((album) => (
-                      <AlbumArtwork 
-                        key={album.id} 
-                        album={album} 
-                        className="flex-shrink-0 w-48" 
-                        aspectRatio="square"
-                        width={192}
-                        height={192}
-                      />
+                      <AlbumContextMenu 
+                        key={album.id}
+                        albumId={album.id}
+                        albumName={album.name}
+                      >
+                        <AlbumArtwork 
+                          album={album} 
+                          className="shrink-0 w-48" 
+                          aspectRatio="square"
+                          width={192}
+                          height={192}
+                        />
+                      </AlbumContextMenu>
                     ))}
                   </div>
                   <ScrollBar orientation="horizontal" />
@@ -177,54 +223,62 @@ export default function SearchPage() {
               <div>
                 <h2 className="text-2xl font-bold mb-4">Songs</h2>
                 <div className="space-y-2">
-                  {searchResults.songs.slice(0, 10).map((song, index) => (
-                    <div key={song.id} className="group flex items-center space-x-3 p-3 hover:bg-accent rounded-lg transition-colors">
-                      <div className="w-8 text-center text-sm text-muted-foreground">
-                        <span className="group-hover:hidden">{index + 1}</span>
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          onClick={() => handlePlaySong(song)}
-                          className="hidden group-hover:flex h-8 w-8 p-0"
-                        >
-                          <Play className="w-4 h-4" />
-                        </Button>
-                      </div>
-                      
-                      {/* Song Cover */}
-                      <div className="flex-shrink-0">                        <Image
-                          src={song.coverArt && api ? api.getCoverArtUrl(song.coverArt, 64) : '/default-user.jpg'}
-                          alt={song.album}
-                          width={48}
-                          height={48}
-                          className="w-12 h-12 rounded-md object-cover"
-                        />
-                      </div>
-                      
-                      {/* Song Info */}
-                      <div className="flex-1 min-w-0">
-                        <p className="font-medium truncate">{song.title}</p>
-                        <p className="text-sm text-muted-foreground truncate">{song.artist} • {song.album}</p>
-                      </div>
-                      
-                      {/* Duration */}
-                      <div className="text-sm text-muted-foreground">
-                        {formatDuration(song.duration)}
-                      </div>
-                      
-                      {/* Actions */}
-                      <div className="flex items-center space-x-2 opacity-0 group-hover:opacity-100 transition-opacity">
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          onClick={() => handleAddToQueue(song)}
-                          className="h-8 w-8 p-0"
-                        >
-                          <Plus className="w-4 h-4" />
-                        </Button>
-                      </div>
-                    </div>
-                  ))}
+                  {searchResults.songs.slice(0, 10).map((song, index) => {
+                    const track = createTrackFromSong(song);
+                    if (!track) return null;
+
+                    return (
+                      <TrackContextMenu key={song.id} track={track}>
+                        <div className="group flex items-center space-x-3 p-3 hover:bg-accent rounded-lg transition-colors cursor-pointer">
+                          <div className="w-8 text-center text-sm text-muted-foreground">
+                            <span className="group-hover:hidden">{index + 1}</span>
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              onClick={() => handlePlaySong(song)}
+                              className="hidden group-hover:flex h-8 w-8 p-0"
+                            >
+                              <Play className="w-4 h-4" />
+                            </Button>
+                          </div>
+                          
+                          {/* Song Cover */}
+                          <div className="shrink-0">
+                            <Image
+                              src={song.coverArt && api ? api.getCoverArtUrl(song.coverArt, 300) : '/default-user.jpg'}
+                              alt={song.album}
+                              width={48}
+                              height={48}
+                              className="w-12 h-12 rounded-md object-cover"
+                            />
+                          </div>
+                          
+                          {/* Song Info */}
+                          <div className="flex-1 min-w-0">
+                            <p className="font-medium truncate">{song.title}</p>
+                            <p className="text-sm text-muted-foreground truncate">{song.artist} • {song.album}</p>
+                          </div>
+                          
+                          {/* Duration */}
+                          <div className="text-sm text-muted-foreground">
+                            {formatDuration(song.duration)}
+                          </div>
+                          
+                          {/* Actions */}
+                          <div className="flex items-center space-x-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              onClick={() => handleAddToQueue(song)}
+                              className="h-8 w-8 p-0"
+                            >
+                              <Plus className="w-4 h-4" />
+                            </Button>
+                          </div>
+                        </div>
+                      </TrackContextMenu>
+                    );
+                  })}
                   
                   {searchResults.songs.length > 10 && (
                     <div className="text-center pt-4">

app/settings/page.tsx

@@ -4,44 +4,42 @@ import React, { useState, useEffect } from 'react';
 import { Label } from '@/components/ui/label';
 import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from '@/components/ui/select';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { useAudioPlayer } from '@/app/components/AudioPlayerContext';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { useTheme } from '@/app/components/ThemeProvider';
 import { useNavidromeConfig } from '@/app/components/NavidromeConfigContext';
 import { useToast } from '@/hooks/use-toast';
 import { useStandaloneLastFm } from '@/hooks/use-standalone-lastfm';
-import { FaServer, FaUser, FaLock, FaCheck, FaTimes, FaLastfm, FaCog } from 'react-icons/fa';
-import { Settings, ExternalLink } from 'lucide-react';
+import { useSidebarShortcuts, SidebarShortcutType } from '@/hooks/use-sidebar-shortcuts';
+import { SidebarCustomization } from '@/app/components/SidebarCustomization';
+import { SettingsManagement } from '@/app/components/SettingsManagement';
+import { AutoTaggingSettings } from '@/app/components/AutoTaggingSettings';
+import { FaServer, FaUser, FaLock, FaCheck, FaTimes, FaLastfm, FaCog, FaTags } from 'react-icons/fa';
+import { Settings, ExternalLink, Tag } from 'lucide-react';
+import { Switch } from '@/components/ui/switch';
 
 const SettingsPage = () => {
-    const { theme, setTheme } = useTheme();
+    const { theme, setTheme, mode, setMode } = useTheme();
     const { config, updateConfig, isConnected, testConnection, clearConfig } = useNavidromeConfig();
     const { toast } = useToast();
     const { isEnabled: isStandaloneLastFmEnabled, getCredentials, getAuthUrl, getSessionKey } = useStandaloneLastFm();
+    const { shortcutType, updateShortcutType } = useSidebarShortcuts();
+    const audioPlayer = useAudioPlayer();
     
     const [formData, setFormData] = useState({
-        serverUrl: config.serverUrl,
-        username: config.username,
-        password: config.password
+        serverUrl: '',
+        username: '',
+        password: ''
     });
     const [isTesting, setIsTesting] = useState(false);
     const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
     
     // Last.fm scrobbling settings (Navidrome integration)
-    const [scrobblingEnabled, setScrobblingEnabled] = useState(() => {
-        if (typeof window !== 'undefined') {
-            return localStorage.getItem('lastfm-scrobbling-enabled') === 'true';
-        }
-        return true;
-    });
+    const [scrobblingEnabled, setScrobblingEnabled] = useState(true);
 
     // Standalone Last.fm settings
-    const [standaloneLastFmEnabled, setStandaloneLastFmEnabled] = useState(() => {
-        if (typeof window !== 'undefined') {
-            return localStorage.getItem('standalone-lastfm-enabled') === 'true';
-        }
-        return false;
-    });
+    const [standaloneLastFmEnabled, setStandaloneLastFmEnabled] = useState(false);
     
     const [lastFmCredentials, setLastFmCredentials] = useState({
         apiKey: '',
@@ -50,6 +48,9 @@ const SettingsPage = () => {
         username: ''
     });
 
+    // Client-side hydration state
+    const [isClient, setIsClient] = useState(false);
+
     // Check if Navidrome is configured via environment variables
     const hasEnvConfig = React.useMemo(() => {
         return !!(process.env.NEXT_PUBLIC_NAVIDROME_URL && 
@@ -58,25 +59,66 @@ const SettingsPage = () => {
     }, []);
 
     // Sidebar settings
-    const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
-        if (typeof window !== 'undefined') {
-            return localStorage.getItem('sidebar-collapsed') === 'true';
-        }
-        return false;
-    });
+    const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+    const [sidebarVisible, setSidebarVisible] = useState(true);
+    const [notifyNowPlaying, setNotifyNowPlaying] = useState(false);
 
-    // Load Last.fm credentials on mount
+    // Initialize client-side state after hydration
     useEffect(() => {
-        const credentials = getCredentials();
-        if (credentials) {
-            setLastFmCredentials({
-                apiKey: credentials.apiKey,
-                apiSecret: credentials.apiSecret,
-                sessionKey: credentials.sessionKey || '',
-                username: credentials.username || ''
-            });
+        setIsClient(true);
+        
+        // Initialize form data with config values
+        setFormData({
+            serverUrl: config.serverUrl || '',
+            username: config.username || '',
+            password: config.password || ''
+        });
+        
+        // Load saved preferences from localStorage
+        const savedScrobbling = localStorage.getItem('lastfm-scrobbling-enabled');
+        if (savedScrobbling !== null) {
+            setScrobblingEnabled(savedScrobbling === 'true');
         }
-    }, [getCredentials]);
+
+        const savedStandaloneLastFm = localStorage.getItem('standalone-lastfm-enabled');
+        if (savedStandaloneLastFm !== null) {
+            setStandaloneLastFmEnabled(savedStandaloneLastFm === 'true');
+        }
+
+        const savedSidebarCollapsed = localStorage.getItem('sidebar-collapsed');
+        if (savedSidebarCollapsed !== null) {
+            setSidebarCollapsed(savedSidebarCollapsed === 'true');
+        }
+
+        const savedSidebarVisible = localStorage.getItem('sidebar-visible');
+        if (savedSidebarVisible !== null) {
+            setSidebarVisible(savedSidebarVisible === 'true');
+        } else {
+            setSidebarVisible(true); // Default to visible
+        }
+
+        // Notifications preference
+        const savedNotify = localStorage.getItem('playback-notifications-enabled');
+        if (savedNotify !== null) {
+            setNotifyNowPlaying(savedNotify === 'true');
+        }
+
+        // Load Last.fm credentials
+        const storedCredentials = localStorage.getItem('lastfm-credentials');
+        if (storedCredentials) {
+            try {
+                const credentials = JSON.parse(storedCredentials);
+                setLastFmCredentials({
+                    apiKey: credentials.apiKey || '',
+                    apiSecret: credentials.apiSecret || '',
+                    sessionKey: credentials.sessionKey || '',
+                    username: credentials.username || ''
+                });
+            } catch (error) {
+                console.error('Failed to parse stored Last.fm credentials:', error);
+            }
+        }
+    }, [config.serverUrl, config.username, config.password]);
 
     const handleInputChange = (field: string, value: string) => {
         setFormData(prev => ({ ...prev, [field]: value }));
@@ -171,7 +213,9 @@ const SettingsPage = () => {
 
     const handleScrobblingToggle = (enabled: boolean) => {
         setScrobblingEnabled(enabled);
-        localStorage.setItem('lastfm-scrobbling-enabled', enabled.toString());
+        if (isClient) {
+            localStorage.setItem('lastfm-scrobbling-enabled', enabled.toString());
+        }
         toast({
             title: enabled ? "Scrobbling Enabled" : "Scrobbling Disabled",
             description: enabled 
@@ -182,7 +226,9 @@ const SettingsPage = () => {
 
     const handleStandaloneLastFmToggle = (enabled: boolean) => {
         setStandaloneLastFmEnabled(enabled);
-        localStorage.setItem('standalone-lastfm-enabled', enabled.toString());
+        if (isClient) {
+            localStorage.setItem('standalone-lastfm-enabled', enabled.toString());
+        }
         toast({
             title: enabled ? "Standalone Last.fm Enabled" : "Standalone Last.fm Disabled",
             description: enabled 
@@ -193,7 +239,9 @@ const SettingsPage = () => {
 
     const handleSidebarToggle = (collapsed: boolean) => {
         setSidebarCollapsed(collapsed);
-        localStorage.setItem('sidebar-collapsed', collapsed.toString());
+        if (isClient) {
+            localStorage.setItem('sidebar-collapsed', collapsed.toString());
+        }
         toast({
             title: collapsed ? "Sidebar Collapsed" : "Sidebar Expanded",
             description: collapsed 
@@ -202,7 +250,64 @@ const SettingsPage = () => {
         });
         
         // Trigger a custom event to notify the sidebar component
-        window.dispatchEvent(new CustomEvent('sidebar-toggle', { detail: { collapsed } }));
+        if (typeof window !== 'undefined') {
+            window.dispatchEvent(new CustomEvent('sidebar-toggle', { detail: { collapsed } }));
+        }
+    };
+
+    const handleSidebarVisibilityToggle = (visible: boolean) => {
+        setSidebarVisible(visible);
+        if (isClient) {
+            localStorage.setItem('sidebar-visible', visible.toString());
+        }
+        toast({
+            title: visible ? "Sidebar Shown" : "Sidebar Hidden",
+            description: visible 
+                ? "Sidebar is now visible" 
+                : "Sidebar is now hidden",
+        });
+        
+        // Trigger a custom event to notify the sidebar component
+        if (typeof window !== 'undefined') {
+            window.dispatchEvent(new CustomEvent('sidebar-visibility-toggle', { detail: { visible } }));
+        }
+    };
+
+    const handleNotifyToggle = async (enabled: boolean) => {
+        setNotifyNowPlaying(enabled);
+        if (isClient) {
+            localStorage.setItem('playback-notifications-enabled', enabled.toString());
+        }
+        if (enabled && typeof window !== 'undefined' && 'Notification' in window) {
+            try {
+                if (Notification.permission === 'default') {
+                    await Notification.requestPermission();
+                }
+            } catch {}
+        }
+        toast({
+            title: enabled ? 'Notifications Enabled' : 'Notifications Disabled',
+            description: enabled ? 'You will be notified when a new song starts.' : 'Now playing notifications are off.',
+        });
+    };
+
+    const handleTestNotification = () => {
+        if (typeof window === 'undefined') return;
+        if (!('Notification' in window)) {
+            toast({ title: 'Not supported', description: 'Browser does not support notifications.', variant: 'destructive' });
+            return;
+        }
+        if (Notification.permission === 'denied') {
+            toast({ title: 'Permission denied', description: 'Enable notifications in your browser settings.', variant: 'destructive' });
+            return;
+        }
+        const title = 'mice – Test Notification';
+        const body = 'This is how a now playing notification will look.';
+        try {
+            new Notification(title, { body, icon: '/icon-192.png', badge: '/icon-192.png' });
+        } catch {
+            toast({ title: 'Test Notification', description: body });
+        }
     };
 
     const handleLastFmAuth = () => {
@@ -234,7 +339,9 @@ const SettingsPage = () => {
             return;
         }
 
-        localStorage.setItem('lastfm-credentials', JSON.stringify(lastFmCredentials));
+        if (isClient) {
+            localStorage.setItem('lastfm-credentials', JSON.stringify(lastFmCredentials));
+        }
         toast({
             title: "Credentials Saved",
             description: "Last.fm credentials have been saved locally.",
@@ -256,7 +363,9 @@ const SettingsPage = () => {
             };
             
             setLastFmCredentials(updatedCredentials);
-            localStorage.setItem('lastfm-credentials', JSON.stringify(updatedCredentials));
+            if (isClient) {
+                localStorage.setItem('lastfm-credentials', JSON.stringify(updatedCredentials));
+            }
             
             toast({
                 title: "Last.fm Authentication Complete",
@@ -272,15 +381,26 @@ const SettingsPage = () => {
     };
 
     return (
-        <div className="container mx-auto p-6 pb-24 max-w-2xl">
-            <div className="space-y-6">
-                <div>
-                    <h1 className="text-3xl font-semibold tracking-tight">Settings</h1>
-                    <p className="text-muted-foreground">Customize your music experience</p>
+        <div className="p-6 pb-24 w-full">
+            {!isClient ? (
+                <div className="space-y-6 max-w-2xl mx-auto">
+                    <div>
+                        <h1 className="text-3xl font-semibold tracking-tight">Settings</h1>
+                        <p className="text-muted-foreground">Loading...</p>
+                    </div>
                 </div>
+            ) : (
+                <div className="space-y-6">
+                    <div className="text-left">
+                        <h1 className="text-3xl font-semibold tracking-tight">Settings</h1>
+                        <p className="text-muted-foreground">Customize your music experience</p>
+                    </div>
+
+                <div className="columns-1 lg:columns-2 xl:columns-3 gap-6 space-y-6"
+                     style={{ columnFill: 'balance' }}>
 
                 {!hasEnvConfig && (
-                    <Card>
+                    <Card className="mb-6 break-inside-avoid py-5">
                         <CardHeader>
                             <CardTitle className="flex items-center gap-2">
                                 <FaServer className="w-5 h-5" />
@@ -369,7 +489,7 @@ const SettingsPage = () => {
                 )}
 
                 {hasEnvConfig && (
-                    <Card>
+                    <Card className="mb-6 break-inside-avoid py-5">
                         <CardHeader>
                             <CardTitle className="flex items-center gap-2">
                                 <FaServer className="w-5 h-5" />
@@ -396,7 +516,30 @@ const SettingsPage = () => {
                     </Card>
                 )}
 
-                <Card>
+                {/* Notifications */}
+                <Card className="mb-6 break-inside-avoid py-5">
+                    <CardHeader>
+                        <CardTitle className="flex items-center gap-2">
+                            <Settings className="w-5 h-5" />
+                            Notifications
+                        </CardTitle>
+                        <CardDescription>Control now playing notifications</CardDescription>
+                    </CardHeader>
+                    <CardContent className="space-y-4">
+                        <div className="flex items-center justify-between">
+                            <div>
+                                <p className="font-medium">Now playing notifications</p>
+                                <p className="text-sm text-muted-foreground">Show a notification when a new song starts</p>
+                            </div>
+                            <Switch checked={notifyNowPlaying} onCheckedChange={handleNotifyToggle} />
+                        </div>
+                        <div className="flex gap-2">
+                            <Button variant="outline" size="sm" onClick={handleTestNotification}>Test notification</Button>
+                        </div>
+                    </CardContent>
+                </Card>
+
+                <Card className="mb-6 break-inside-avoid py-5">
                     <CardHeader>
                         <CardTitle className="flex items-center gap-2">
                             <FaLastfm className="w-5 h-5" />
@@ -474,7 +617,7 @@ const SettingsPage = () => {
                     </CardContent>
                 </Card> */}
 
-                <Card>
+                <Card className="mb-6 break-inside-avoid py-5">
                     <CardHeader>
                         <CardTitle className="flex items-center gap-2">
                             <Settings className="w-5 h-5" />
@@ -486,30 +629,50 @@ const SettingsPage = () => {
                     </CardHeader>
                     <CardContent className="space-y-6">
                         <div className="space-y-2">
-                            <Label htmlFor="sidebar-mode">Sidebar Mode</Label>
+                            <Label htmlFor="sidebar-visibility">Sidebar Visibility</Label>
                             <Select 
-                                value={sidebarCollapsed ? "collapsed" : "expanded"} 
-                                onValueChange={(value) => handleSidebarToggle(value === "collapsed")}
+                                value={sidebarVisible ? "visible" : "hidden"} 
+                                onValueChange={(value) => handleSidebarVisibilityToggle(value === "visible")}
                             >
-                                <SelectTrigger id="sidebar-mode">
+                                <SelectTrigger id="sidebar-visibility">
                                     <SelectValue />
                                 </SelectTrigger>
                                 <SelectContent>
-                                    <SelectItem value="expanded">Expanded (with labels)</SelectItem>
-                                    <SelectItem value="collapsed">Collapsed (icons only)</SelectItem>
+                                    <SelectItem value="visible">Visible</SelectItem>
+                                    <SelectItem value="hidden">Hidden</SelectItem>
+                                </SelectContent>
+                            </Select>
+                        </div>
+
+                        <div className="space-y-2">
+                            <Label htmlFor="sidebar-shortcuts">Sidebar Shortcuts</Label>
+                            <Select 
+                                value={shortcutType} 
+                                onValueChange={(value: SidebarShortcutType) => updateShortcutType(value)}
+                            >
+                                <SelectTrigger id="sidebar-shortcuts">
+                                    <SelectValue />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="both">Albums & Playlists</SelectItem>
+                                    <SelectItem value="albums">Albums Only</SelectItem>
+                                    <SelectItem value="playlists">Playlists Only</SelectItem>
                                 </SelectContent>
                             </Select>
                         </div>
 
                         <div className="text-sm text-muted-foreground space-y-2">
-                            <p><strong>Expanded:</strong> Shows full navigation labels</p>
-                            <p><strong>Collapsed:</strong> Shows only icons with tooltips</p>
-                            <p className="mt-3"><strong>Note:</strong> You can also toggle the sidebar using the collapse button in the sidebar.</p>
+                            <p><strong>Visible:</strong> Sidebar is always shown with icon navigation</p>
+                            <p><strong>Hidden:</strong> Sidebar is completely hidden for maximum space</p>
+                            <p><strong>Albums & Playlists:</strong> Show both favorite albums, recently played albums, and playlists as shortcuts</p>
+                            <p><strong>Albums Only:</strong> Show only favorite and recently played albums as shortcuts</p>
+                            <p><strong>Playlists Only:</strong> Show only playlists as shortcuts</p>
+                            <p className="mt-3"><strong>Note:</strong> The sidebar now shows only icons with tooltips on hover for a cleaner interface.</p>
                         </div>
                     </CardContent>
                 </Card>
 
-                <Card>
+                {/* <Card className="mb-6 break-inside-avoid py-5">
                     <CardHeader>
                         <CardTitle className="flex items-center gap-2">
                             <FaLastfm className="w-5 h-5" />
@@ -602,9 +765,24 @@ const SettingsPage = () => {
                             </>
                         )}
                     </CardContent>
-                </Card>
+                </Card> */}
 
-                <Card>
+                {/* Sidebar Customization */}
+                <div className="break-inside-avoid mb-6">
+                  <SidebarCustomization />
+                </div>
+
+                {/* Settings Management */}
+                <div className="break-inside-avoid mb-6">
+                  <SettingsManagement />
+                </div>
+
+                {/* Auto-Tagging Settings */}
+                <div className="break-inside-avoid mb-6">
+                  <AutoTaggingSettings />
+                </div>
+
+                <Card className="mb-6 break-inside-avoid py-5">
                     <CardHeader>
                         <CardTitle>Appearance</CardTitle>
                         <CardDescription>
@@ -619,6 +797,7 @@ const SettingsPage = () => {
                                     <SelectValue />
                                 </SelectTrigger>
                                 <SelectContent>
+                                    <SelectItem value="default">Default</SelectItem>
                                     <SelectItem value="blue">Blue</SelectItem>
                                     <SelectItem value="violet">Violet</SelectItem>
                                     <SelectItem value="red">Red</SelectItem>
@@ -630,15 +809,110 @@ const SettingsPage = () => {
                             </Select>
                         </div>
 
+                        <div className="space-y-2">
+                            <Label htmlFor="mode-select">Display Mode</Label>
+                            <Select value={mode} onValueChange={setMode}>
+                                <SelectTrigger id="mode-select">
+                                    <SelectValue />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="light">Light</SelectItem>
+                                    <SelectItem value="dark">Dark</SelectItem>
+                                    <SelectItem value="system">System</SelectItem>
+                                </SelectContent>
+                            </Select>
+                        </div>
+
                         <div className="text-sm text-muted-foreground">
-                            <p><strong>Theme:</strong> Choose between blue and violet color schemes</p>
-                            <p><strong>Dark Mode:</strong> Automatically follows your system preferences</p>
+                            <p><strong>Theme:</strong> Choose from multiple color schemes including default (white)</p>
+                            <p><strong>Display Mode:</strong> Choose light, dark, or system (follows your device preferences)</p>
                         </div>
                     </CardContent>
                 </Card>
 
                 {/* Theme Preview */}
-                <Card>
+                <Card className="mb-6 break-inside-avoid py-5">
+                    <CardHeader>
+                        <CardTitle className="flex items-center gap-2">
+                            <FaCog className="w-5 h-5" />
+                            Audio Settings
+                        </CardTitle>
+                        <CardDescription>
+                            Configure playback and audio effects
+                        </CardDescription>
+                    </CardHeader>
+                    <CardContent className="space-y-6">
+                        {/* Crossfade */}
+                        <div className="space-y-2">
+                            <Label htmlFor="crossfade-duration">Crossfade Duration</Label>
+                            <Select 
+                                value={String(audioPlayer.audioSettings.crossfadeDuration)}
+                                onValueChange={(value) => audioPlayer.updateAudioSettings({ crossfadeDuration: Number(value) })}
+                            >
+                                <SelectTrigger id="crossfade-duration">
+                                    <SelectValue />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="0">Off</SelectItem>
+                                    <SelectItem value="2">2 seconds</SelectItem>
+                                    <SelectItem value="3">3 seconds</SelectItem>
+                                    <SelectItem value="4">4 seconds</SelectItem>
+                                    <SelectItem value="5">5 seconds</SelectItem>
+                                </SelectContent>
+                            </Select>
+                        </div>
+
+                        {/* Equalizer Preset */}
+                        <div className="space-y-2">
+                            <Label htmlFor="equalizer-preset">Equalizer Preset</Label>
+                            <Select 
+                                value={audioPlayer.equalizerPreset} 
+                                onValueChange={audioPlayer.setEqualizerPreset}
+                            >
+                                <SelectTrigger id="equalizer-preset">
+                                    <SelectValue />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="normal">Normal</SelectItem>
+                                    <SelectItem value="bassBoost">Bass Boost</SelectItem>
+                                    <SelectItem value="trebleBoost">Treble Boost</SelectItem>
+                                    <SelectItem value="vocalBoost">Vocal Boost</SelectItem>
+                                </SelectContent>
+                            </Select>
+                        </div>
+
+                        {/* ReplayGain */}
+                        <div className="flex items-center justify-between">
+                            <div>
+                                <Label>ReplayGain</Label>
+                                <p className="text-sm text-muted-foreground">Normalize volume across tracks</p>
+                            </div>
+                            <Switch 
+                                checked={audioPlayer.audioSettings.replayGainEnabled}
+                                onCheckedChange={(checked) => audioPlayer.updateAudioSettings({ replayGainEnabled: checked })}
+                            />
+                        </div>
+
+                        {/* Gapless Playback */}
+                        <div className="flex items-center justify-between">
+                            <div>
+                                <Label>Gapless Playback</Label>
+                                <p className="text-sm text-muted-foreground">Seamless transitions between tracks</p>
+                            </div>
+                            <Switch 
+                                checked={audioPlayer.audioSettings.gaplessPlayback}
+                                onCheckedChange={(checked) => audioPlayer.updateAudioSettings({ gaplessPlayback: checked })}
+                            />
+                        </div>                        <div className="text-sm text-muted-foreground space-y-2">
+                            <p><strong>Crossfade:</strong> Smooth fade between tracks (2-5 seconds)</p>
+                            <p><strong>Equalizer:</strong> Preset frequency adjustments for different music styles</p>
+                            <p><strong>ReplayGain:</strong> Consistent volume across all tracks in your library</p>
+                            <p><strong>Gapless:</strong> Perfect for live albums and continuous DJ mixes</p>
+                        </div>
+                    </CardContent>
+                </Card>
+
+                <Card className="mb-6 break-inside-avoid py-5">
                     <CardHeader>
                         <CardTitle>Preview</CardTitle>
                         <CardDescription>
@@ -666,7 +940,50 @@ const SettingsPage = () => {
                         </div>
                     </CardContent>
                 </Card>
-            </div>
+                
+                {/* Debug Section - Development Only */}
+                {process.env.NODE_ENV === 'development' && (
+                    <Card className="mb-6 break-inside-avoid py-5 border-orange-200 bg-orange-50/50">
+                        <CardHeader>
+                            <CardTitle className="flex items-center gap-2 text-orange-700">
+                                <Settings className="w-5 h-5" />
+                                Debug Tools
+                            </CardTitle>
+                            <CardDescription className="text-orange-600">
+                                Development-only debugging utilities
+                            </CardDescription>
+                        </CardHeader>
+                        <CardContent>
+                            <Button 
+                                onClick={() => {
+                                    // Save Navidrome config before clearing
+                                    const navidromeConfig = localStorage.getItem('navidrome-config');
+                                    
+                                    // Clear all localStorage
+                                    localStorage.clear();
+                                    
+                                    // Restore Navidrome config
+                                    if (navidromeConfig) {
+                                        localStorage.setItem('navidrome-config', navidromeConfig);
+                                    }
+                                    
+                                    // Reload page to reset state
+                                    window.location.reload();
+                                }}
+                                variant="outline"
+                                className="w-full bg-orange-100 border-orange-300 text-orange-700 hover:bg-orange-200"
+                            >
+                                Clear All Data (Keep Navidrome Config)
+                            </Button>
+                            <p className="text-xs text-orange-600 mt-2">
+                                This will clear all localStorage data except your Navidrome server configuration, then reload the page.
+                            </p>
+                        </CardContent>
+                    </Card>
+                )}
+                </div>
+                </div>
+            )}
         </div>
     );
 };

cliff.toml

@@ -0,0 +1,46 @@
+# git-cliff configuration for changelog generation
+# https://git-cliff.org
+
+[changelog]
+header = """
+# Changelog
+
+All notable changes to this project will be documented in this file.
+"""
+body = """
+{% if version %}\
+    ## [{{ version | trim_start_matches(pat="v") }}] - {{ timestamp | date(format="%Y-%m-%d") }}
+{% else %}\
+    ## [unreleased]
+{% endif %}\
+{% for group, commits in commits | group_by(attribute="group") %}
+    ### {{ group | striptags | trim | upper_first }}
+    {% for commit in commits %}
+        - {% if commit.scope %}{{ commit.scope }}: {% endif %}\
+            {{ commit.message | upper_first }}\
+    {% endfor %}
+{% endfor %}
+"""
+footer = ""
+trim = true
+
+[git]
+conventional_commits = true
+filter_unconventional = true
+split_commits = false
+commit_parsers = [
+    { message = "^feat", group = "Features" },
+    { message = "^fix", group = "Bug Fixes" },
+    { message = "^doc", group = "Documentation" },
+    { message = "^perf", group = "Performance" },
+    { message = "^refactor", group = "Refactoring" },
+    { message = "^style", group = "Styling" },
+    { message = "^test", group = "Testing" },
+    { message = "^chore\\(release\\)", skip = true },
+    { message = "^chore|^ci", group = "Miscellaneous" },
+]
+protect_breaking_commits = false
+filter_commits = false
+tag_pattern = "[0-9][0-9][0-9][0-9].[0-9][0-9].[0-9][0-9]"
+topo_order = false
+sort_commits = "oldest"

components/ui/accordion.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

components/ui/aspect-ratio.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+
+function AspectRatio({
+  ...props
+}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
+}
+
+export { AspectRatio }

components/ui/badge.tsx

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
       variant: {

components/ui/breadcrumb.tsx

@@ -0,0 +1,109 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("hover:text-foreground transition-colors", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("text-foreground font-normal", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}

components/ui/button.tsx

@@ -5,18 +5,18 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
         default:
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+          "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90",
         destructive:
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+          "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90",
         outline:
-          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+          "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
         secondary:
-          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
       },

components/ui/calendar.tsx

@@ -0,0 +1,210 @@
+"use client"
+
+import * as React from "react"
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react"
+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { Button, buttonVariants } from "@/components/ui/button"
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "flex gap-4 flex-col md:flex-row relative",
+          defaultClassNames.months
+        ),
+        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+        nav: cn(
+          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn("absolute inset-0 opacity-0", defaultClassNames.dropdown),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label"
+            ? "text-sm"
+            : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("flex w-full mt-2", defaultClassNames.week),
+        week_number_header: cn(
+          "select-none w-(--cell-size)",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-[0.8rem] select-none text-muted-foreground",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "rounded-l-md bg-accent",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+        today: cn(
+          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+            )
+          }
+
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon
+                className={cn("size-4", className)}
+                {...props}
+              />
+            )
+          }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          )
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  )
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }

components/ui/card.tsx

@@ -2,75 +2,91 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-const Card = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      "rounded-xl border bg-card text-card-foreground shadow",
-      className
-    )}
-    {...props}
-  />
-))
-Card.displayName = "Card"
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-0 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
 
-const CardHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
-    {...props}
-  />
-))
-CardHeader.displayName = "CardHeader"
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
 
-const CardTitle = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("font-semibold leading-none tracking-tight", className)}
-    {...props}
-  />
-))
-CardTitle.displayName = "CardTitle"
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
 
-const CardDescription = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-CardDescription.displayName = "CardDescription"
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
 
-const CardContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
-CardContent.displayName = "CardContent"
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
 
-const CardFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
-    {...props}
-  />
-))
-CardFooter.displayName = "CardFooter"
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

components/ui/carousel.tsx

@@ -0,0 +1,241 @@
+"use client"
+
+import * as React from "react"
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react"
+import { ArrowLeft, ArrowRight } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+function Carousel({
+  orientation = "horizontal",
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & CarouselProps) {
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y",
+    },
+    plugins
+  )
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+  const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+  const onSelect = React.useCallback((api: CarouselApi) => {
+    if (!api) return
+    setCanScrollPrev(api.canScrollPrev())
+    setCanScrollNext(api.canScrollNext())
+  }, [])
+
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev()
+  }, [api])
+
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext()
+  }, [api])
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault()
+        scrollPrev()
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault()
+        scrollNext()
+      }
+    },
+    [scrollPrev, scrollNext]
+  )
+
+  React.useEffect(() => {
+    if (!api || !setApi) return
+    setApi(api)
+  }, [api, setApi])
+
+  React.useEffect(() => {
+    if (!api) return
+    onSelect(api)
+    api.on("reInit", onSelect)
+    api.on("select", onSelect)
+
+    return () => {
+      api?.off("select", onSelect)
+    }
+  }, [api, onSelect])
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        carouselRef,
+        api: api,
+        opts,
+        orientation:
+          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }}
+    >
+      <div
+        onKeyDownCapture={handleKeyDown}
+        className={cn("relative", className)}
+        role="region"
+        aria-roledescription="carousel"
+        data-slot="carousel"
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  )
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div
+      ref={carouselRef}
+      className="overflow-hidden"
+      data-slot="carousel-content"
+    >
+      <div
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      role="group"
+      aria-roledescription="slide"
+      data-slot="carousel-item"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CarouselPrevious({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-previous"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute size-8 rounded-full",
+        orientation === "horizontal"
+          ? "top-1/2 -left-12 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+}
+
+function CarouselNext({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-next"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute size-8 rounded-full",
+        orientation === "horizontal"
+          ? "top-1/2 -right-12 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+}
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+}

components/ui/checkbox.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

components/ui/collapsible.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

components/ui/command.tsx

@@ -0,0 +1,184 @@
+"use client"
+
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { SearchIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+  className?: string
+  showCloseButton?: boolean
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn("overflow-hidden p-0", className)}
+        hideCloseButton={!showCloseButton}
+      >
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("bg-border -mx-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}

components/ui/context-menu.tsx

@@ -27,7 +27,7 @@ const ContextMenuSubTrigger = React.forwardRef<
   <ContextMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
       inset && "pl-8",
       className
     )}
@@ -46,7 +46,7 @@ const ContextMenuSubContent = React.forwardRef<
   <ContextMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     )}
     {...props}
@@ -62,7 +62,7 @@ const ContextMenuContent = React.forwardRef<
     <ContextMenuPrimitive.Content
       ref={ref}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}
@@ -80,7 +80,7 @@ const ContextMenuItem = React.forwardRef<
   <ContextMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
       inset && "pl-8",
       className
     )}
@@ -96,7 +96,7 @@ const ContextMenuCheckboxItem = React.forwardRef<
   <ContextMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
       className
     )}
     checked={checked}
@@ -120,7 +120,7 @@ const ContextMenuRadioItem = React.forwardRef<
   <ContextMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
       className
     )}
     {...props}

components/ui/dialog.tsx

@@ -47,7 +47,7 @@ const DialogContent = React.forwardRef<
     >
       {children}
       {!hideCloseButton && (
-        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
           <X className="h-4 w-4" />
           <span className="sr-only">Close</span>
         </DialogPrimitive.Close>

components/ui/drawer.tsx

@@ -0,0 +1,135 @@
+"use client"
+
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "@/lib/utils"
+
+function Drawer({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
+}
+
+function DrawerTrigger({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
+}
+
+function DrawerPortal({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
+}
+
+function DrawerClose({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+  return (
+    <DrawerPrimitive.Overlay
+      data-slot="drawer-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        data-slot="drawer-content"
+        className={cn(
+          "group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
+          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
+          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
+          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
+          className
+        )}
+        {...props}
+      >
+        <div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  )
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn(
+        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}

components/ui/dropdown-menu.tsx

@@ -0,0 +1,257 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}

components/ui/hover-card.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/lib/utils"
+
+function HoverCard({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
+}
+
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return (
+    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  )
+}
+
+function HoverCardContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  )
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }

components/ui/infinite-scroll.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useInView } from 'react-intersection-observer';
+import { Loader2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface InfiniteScrollProps {
+  onLoadMore: () => void;
+  hasMore: boolean;
+  isLoading: boolean;
+  loadingText?: string;
+  endMessage?: string;
+  className?: string;
+}
+
+export function InfiniteScroll({
+  onLoadMore,
+  hasMore,
+  isLoading,
+  loadingText = 'Loading more items...',
+  endMessage = 'No more items to load',
+  className
+}: InfiniteScrollProps) {
+  const { ref, inView } = useInView({
+    threshold: 0,
+    rootMargin: '100px 0px',
+  });
+
+  useEffect(() => {
+    if (inView && hasMore && !isLoading) {
+      onLoadMore();
+    }
+  }, [inView, hasMore, isLoading, onLoadMore]);
+
+  return (
+    <div 
+      ref={ref} 
+      className={cn(
+        'py-4 flex flex-col items-center justify-center w-full', 
+        className
+      )}
+    >
+      {isLoading && (
+        <div className="flex items-center gap-2">
+          <Loader2 className="h-4 w-4 animate-spin" />
+          <p className="text-sm text-muted-foreground">{loadingText}</p>
+        </div>
+      )}
+      
+      {!hasMore && !isLoading && (
+        <p className="text-sm text-muted-foreground">{endMessage}</p>
+      )}
+    </div>
+  );
+}

components/ui/input-otp.tsx

@@ -0,0 +1,77 @@
+"use client"
+
+import * as React from "react"
+import { OTPInput, OTPInputContext } from "input-otp"
+import { MinusIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}: React.ComponentProps<typeof OTPInput> & {
+  containerClassName?: string
+}) {
+  return (
+    <OTPInput
+      data-slot="input-otp"
+      containerClassName={cn(
+        "flex items-center gap-2 has-disabled:opacity-50",
+        containerClassName
+      )}
+      className={cn("disabled:cursor-not-allowed", className)}
+      {...props}
+    />
+  )
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-otp-group"
+      className={cn("flex items-center", className)}
+      {...props}
+    />
+  )
+}
+
+function InputOTPSlot({
+  index,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  index: number
+}) {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
+
+  return (
+    <div
+      data-slot="input-otp-slot"
+      data-active={isActive}
+      className={cn(
+        "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+        </div>
+      )}
+    </div>
+  )
+}
+
+function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
+  return (
+    <div data-slot="input-otp-separator" role="separator" {...props}>
+      <MinusIcon />
+    </div>
+  )
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

components/ui/input.tsx

@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
       <input
         type={type}
         className={cn(
-          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className
         )}
         ref={ref}

components/ui/menubar.tsx

@@ -23,7 +23,7 @@ const Menubar = React.forwardRef<
   <MenubarPrimitive.Root
     ref={ref}
     className={cn(
-      "flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm",
+      "flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-xs",
       className
     )}
     {...props}
@@ -38,7 +38,7 @@ const MenubarTrigger = React.forwardRef<
   <MenubarPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
       className
     )}
     {...props}
@@ -55,7 +55,7 @@ const MenubarSubTrigger = React.forwardRef<
   <MenubarPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
       inset && "pl-8",
       className
     )}
@@ -74,7 +74,7 @@ const MenubarSubContent = React.forwardRef<
   <MenubarPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     )}
     {...props}
@@ -97,7 +97,7 @@ const MenubarContent = React.forwardRef<
         alignOffset={alignOffset}
         sideOffset={sideOffset}
         className={cn(
-          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          "z-50 min-w-48 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
           className
         )}
         {...props}
@@ -116,7 +116,7 @@ const MenubarItem = React.forwardRef<
   <MenubarPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
       inset && "pl-8",
       className
     )}
@@ -132,7 +132,7 @@ const MenubarCheckboxItem = React.forwardRef<
   <MenubarPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
       className
     )}
     checked={checked}
@@ -155,7 +155,7 @@ const MenubarRadioItem = React.forwardRef<
   <MenubarPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
       className
     )}
     {...props}

components/ui/navigation-menu.tsx

@@ -0,0 +1,168 @@
+import * as React from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { cva } from "class-variance-authority"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function NavigationMenu({
+  className,
+  children,
+  viewport = true,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+  viewport?: boolean
+}) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      data-viewport={viewport}
+      className={cn(
+        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {viewport && <NavigationMenuViewport />}
+    </NavigationMenuPrimitive.Root>
+  )
+}
+
+function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn(
+        "group flex flex-1 list-none items-center justify-center gap-1",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot="navigation-menu-item"
+      className={cn("relative", className)}
+      {...props}
+    />
+  )
+}
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
+)
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle(), "group", className)}
+      {...props}
+    >
+      {children}{" "}
+      <ChevronDownIcon
+        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+        aria-hidden="true"
+      />
+    </NavigationMenuPrimitive.Trigger>
+  )
+}
+
+function NavigationMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
+        "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuViewport({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
+  return (
+    <div
+      className={cn(
+        "absolute top-full left-0 isolate z-50 flex justify-center"
+      )}
+    >
+      <NavigationMenuPrimitive.Viewport
+        data-slot="navigation-menu-viewport"
+        className={cn(
+          "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function NavigationMenuLink({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
+  return (
+    <NavigationMenuPrimitive.Indicator
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
+        className
+      )}
+      {...props}
+    >
+      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+    </NavigationMenuPrimitive.Indicator>
+  )
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle,
+}

components/ui/pagination.tsx

@@ -0,0 +1,127 @@
+import * as React from "react"
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  MoreHorizontalIcon,
+} from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button, buttonVariants } from "@/components/ui/button"
+
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={cn("mx-auto flex w-full justify-center", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationContent({
+  className,
+  ...props
+}: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="pagination-content"
+      className={cn("flex flex-row items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationItem({ ...props }: React.ComponentProps<"li">) {
+  return <li data-slot="pagination-item" {...props} />
+}
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<React.ComponentProps<typeof Button>, "size"> &
+  React.ComponentProps<"a">
+
+function PaginationLink({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) {
+  return (
+    <a
+      aria-current={isActive ? "page" : undefined}
+      data-slot="pagination-link"
+      data-active={isActive}
+      className={cn(
+        buttonVariants({
+          variant: isActive ? "outline" : "ghost",
+          size,
+        }),
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function PaginationPrevious({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      size="default"
+      className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
+      {...props}
+    >
+      <ChevronLeftIcon />
+      <span className="hidden sm:block">Previous</span>
+    </PaginationLink>
+  )
+}
+
+function PaginationNext({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      size="default"
+      className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
+      {...props}
+    >
+      <span className="hidden sm:block">Next</span>
+      <ChevronRightIcon />
+    </PaginationLink>
+  )
+}
+
+function PaginationEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontalIcon className="size-4" />
+      <span className="sr-only">More pages</span>
+    </span>
+  )
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+}

components/ui/popover.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

components/ui/radio-group.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn("grid gap-3", className)}
+      {...props}
+    />
+  )
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="relative flex items-center justify-center"
+      >
+        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }

components/ui/resizable.tsx

@@ -0,0 +1,56 @@
+"use client"
+
+import * as React from "react"
+import { GripVerticalIcon } from "lucide-react"
+import { Group as PanelGroup, Panel, Separator as PanelResizeHandle } from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+
+function ResizablePanelGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof PanelGroup>) {
+  return (
+    <PanelGroup
+      data-slot="resizable-panel-group"
+      className={cn(
+        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ResizablePanel({
+  ...props
+}: React.ComponentProps<typeof Panel>) {
+  return <Panel data-slot="resizable-panel" {...props} />
+}
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof PanelResizeHandle> & {
+  withHandle?: boolean
+}) {
+  return (
+    <PanelResizeHandle
+      data-slot="resizable-handle"
+      className={cn(
+        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+        className
+      )}
+      {...props}
+    >
+      {withHandle && (
+        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
+          <GripVerticalIcon className="size-2.5" />
+        </div>
+      )}
+    </PanelResizeHandle>
+  )
+}
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

components/ui/scroll-area.tsx

@@ -33,9 +33,9 @@ const ScrollBar = React.forwardRef<
     className={cn(
       "flex touch-none select-none transition-colors",
       orientation === "vertical" &&
-        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+        "h-full w-2.5 border-l border-l-transparent p-px",
       orientation === "horizontal" &&
-        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+        "h-2.5 flex-col border-t border-t-transparent p-px",
       className
     )}
     {...props}

components/ui/select.tsx

@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className
     )}
     {...props}
@@ -75,7 +75,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
@@ -88,7 +88,7 @@ const SelectContent = React.forwardRef<
         className={cn(
           "p-1",
           position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+            "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"
         )}
       >
         {children}
@@ -118,7 +118,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
       className
     )}
     {...props}

components/ui/separator.tsx

@@ -19,7 +19,7 @@ const Separator = React.forwardRef<
       orientation={orientation}
       className={cn(
         "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
         className
       )}
       {...props}

components/ui/sheet.tsx

@@ -0,0 +1,139 @@
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left"
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" &&
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" &&
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" &&
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" &&
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}