Merge pull request #31 from sillyangel/mobile-support

YAY

.dockerignore

@@ -2,7 +2,6 @@ node_modules
 .next
 .git
 .gitignore
-README.md
 .env.local
 .env.example
 *.log

.env.local

@@ -1 +1 @@
-NEXT_PUBLIC_COMMIT_SHA=a854604
+NEXT_PUBLIC_COMMIT_SHA=0c32c05

.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/nightly.yml

@@ -0,0 +1,132 @@
+name: Development Docker Image (Nightly)
+
+on:
+  schedule:
+    # Run every night at 5:00 UTC
+    - cron: '0 5 * * *'
+  push:
+    branches:
+      - dev
+  workflow_dispatch: # Allow manual triggering
+
+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
+            type=sha,prefix=dev-
+          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,90 @@
+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 }}
+          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

.vscode/launch.json

@@ -0,0 +1,38 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "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/**"
+      ]
+    },
+    {
+      "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>/**"]
+    }
+  ]
+}

.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"]
+		}
+	]
+}

DOCKER.md

@@ -8,7 +8,7 @@ This application can be easily deployed using Docker with configurable environme
 
 ```bash
 # Run using pre-built image (app will prompt for Navidrome config)
-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 .
@@ -20,7 +20,7 @@ docker run -p 3000:3000 \
   -e NEXT_PUBLIC_NAVIDROME_USERNAME=your_username \
   -e NEXT_PUBLIC_NAVIDROME_PASSWORD=your_password \
   -e PORT=3000 \
-  ghcr.io/sillyangel/mice:latest
+  sillyangel/mice:latest
 ```
 
 ### Using Docker Compose
@@ -43,7 +43,7 @@ docker run -p 3000:3000 \
    docker-compose up -d
    ```
 
-**Note**: The default docker-compose.yml uses the pre-built image `ghcr.io/sillyangel/mice:latest`.
+**Note**: The default docker-compose.yml uses the pre-built image `sillyangel/mice:latest`.
 
 For local development, you can use the override example:
 
@@ -86,7 +86,7 @@ For local development (non-Docker), use these variable names:
 
 ```bash
 # Using pre-built image - app will ask for Navidrome server details on first launch
-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 .
@@ -100,7 +100,7 @@ docker run -p 3000:3000 \
   -e NEXT_PUBLIC_NAVIDROME_URL=http://localhost:4533 \
   -e NEXT_PUBLIC_NAVIDROME_USERNAME=admin \
   -e NEXT_PUBLIC_NAVIDROME_PASSWORD=admin \
-  ghcr.io/sillyangel/mice:latest
+  sillyangel/mice:latest
 ```
 
 ### Pre-configured Production Setup
@@ -112,7 +112,7 @@ docker run -p 80:3000 \
   -e NEXT_PUBLIC_NAVIDROME_PASSWORD=your_secure_password \
   -e PORT=3000 \
   --restart unless-stopped \
-  ghcr.io/sillyangel/mice:latest
+  sillyangel/mice:latest
 ```
 
 ### Using Environment File

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,6 +16,9 @@ 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

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,50 +1,58 @@
-![splash](https://github.com/sillyangel/mice/blob/main/4xnored.png?raw=true)
-# mice (project still reworked)
-> project still, now with navidrome
+<p align="left" style="display: flex; align-items: center; gap: 12px;">
+  <img src="https://github.com/sillyangel/mice/blob/main/public/icon-512.png?raw=true" alt="Mice Logo" width="64" style="border-radius: 12px;" />
+  <strong style="font-size: 2rem;">Mice | Navidrome Client</strong>
+</p>
 
-> 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.
+> Project based on [shadcn/ui](https://github.com/shadcn-ui/ui)'s music template.
 
-**✨ New**: Migrated from Firebase + static data to **Navidrome/Subsonic** integration for real music streaming!
+<!-- This is a 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. -->
 
-### Features
+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.
 
-- 🎵 **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
+## 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
+- **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/
 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
@@ -54,10 +62,23 @@ 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 +91,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,15 +114,11 @@ 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.
-
 ## Tech Stack
 
 - **Frontend**: Next.js 15, React 19, TypeScript
@@ -110,14 +127,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

@@ -10,8 +10,9 @@ 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(() => {
@@ -117,110 +120,157 @@ 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, 280)
+      : '/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={280} 
+                height={280}
+                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>
+              </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>
+              <Button className="px-5" onClick={() => playAlbum(album.id)}>
+                Play
+              </Button>
+              <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

@@ -91,15 +91,15 @@ export default function BrowsePage() {
   }
 
   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,7 +111,7 @@ 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">
@@ -119,7 +119,7 @@ export default function BrowsePage() {
                   <ArtistIcon
                     key={artist.id}
                     artist={artist}
-                    className="flex-shrink-0 overflow-hidden"
+                    className="shrink-0 overflow-hidden"
                     size={190}
                   />
                 ))}
@@ -130,7 +130,7 @@ 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">
@@ -139,7 +139,7 @@ export default function BrowsePage() {
             </div>
           </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">
@@ -176,9 +176,9 @@ export default function BrowsePage() {
               <ScrollBar orientation="vertical" />
             </ScrollArea>
           </div>
-        </TabsContent>
-      </Tabs>
-    </>
+        </div>
+      </div>
+      </div>
     </div>
   );
 }

app/components/AudioPlayerContext.tsx

@@ -53,7 +53,15 @@ export const AudioPlayerProvider: React.FC<{ children: React.ReactNode }> = ({ c
   const [isLoading, setIsLoading] = useState(false);
   const [shuffle, setShuffle] = useState(false);
   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');
@@ -98,14 +106,18 @@ export const AudioPlayerProvider: React.FC<{ children: React.ReactNode }> = ({ c
     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

app/components/BottomNavigation.tsx

@@ -0,0 +1,67 @@
+'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';
+
+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 handleNavigation = (href: string) => {
+    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 (
+            <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"
+              )}
+            >
+              <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>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

app/components/CacheManagement.tsx

@@ -0,0 +1,223 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
+import { 
+  Database,
+  Trash2,
+  RefreshCw,
+  HardDrive
+} from 'lucide-react';
+import { CacheManager } from '@/lib/cache';
+
+export function CacheManagement() {
+  const [cacheStats, setCacheStats] = useState({
+    total: 0,
+    expired: 0,
+    size: '0 B'
+  });
+  const [isClearing, setIsClearing] = useState(false);
+  const [lastCleared, setLastCleared] = useState<string | null>(null);
+
+  const loadCacheStats = () => {
+    if (typeof window === 'undefined') return;
+    
+    let total = 0;
+    let expired = 0;
+    let totalSize = 0;
+    const now = Date.now();
+
+    // Check localStorage for cache entries
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      if (key && (key.startsWith('cache-') || key.startsWith('navidrome-cache-') || key.startsWith('library-cache-'))) {
+        total++;
+        const value = localStorage.getItem(key);
+        if (value) {
+          totalSize += key.length + value.length;
+          try {
+            const parsed = JSON.parse(value);
+            if (parsed.expiresAt && now > parsed.expiresAt) {
+              expired++;
+            }
+          } catch (error) {
+            expired++;
+          }
+        }
+      }
+    }
+
+    // Convert bytes to human readable format
+    const formatSize = (bytes: number): string => {
+      if (bytes === 0) return '0 B';
+      const k = 1024;
+      const sizes = ['B', 'KB', 'MB', 'GB'];
+      const i = Math.floor(Math.log(bytes) / Math.log(k));
+      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    };
+
+    setCacheStats({
+      total,
+      expired,
+      size: formatSize(totalSize * 2) // *2 for UTF-16 encoding
+    });
+  };
+
+  useEffect(() => {
+    loadCacheStats();
+    
+    // Check if there's a last cleared timestamp
+    const lastClearedTime = localStorage.getItem('cache-last-cleared');
+    if (lastClearedTime) {
+      setLastCleared(new Date(parseInt(lastClearedTime)).toLocaleString());
+    }
+  }, []);
+
+  const handleClearCache = async () => {
+    setIsClearing(true);
+    try {
+      // Clear all cache using the CacheManager
+      CacheManager.clearAll();
+      
+      // Also clear any other cache-related localStorage items
+      if (typeof window !== 'undefined') {
+        const keys = Object.keys(localStorage);
+        keys.forEach(key => {
+          if (key.startsWith('cache-') || 
+              key.startsWith('navidrome-cache-') || 
+              key.startsWith('library-cache-') ||
+              key.includes('album') ||
+              key.includes('artist') ||
+              key.includes('song')) {
+            localStorage.removeItem(key);
+          }
+        });
+        
+        // Set last cleared timestamp
+        localStorage.setItem('cache-last-cleared', Date.now().toString());
+      }
+      
+      // Update stats
+      loadCacheStats();
+      setLastCleared(new Date().toLocaleString());
+      
+      // Show success feedback
+      setTimeout(() => {
+        setIsClearing(false);
+      }, 1000);
+      
+    } catch (error) {
+      console.error('Failed to clear cache:', error);
+      setIsClearing(false);
+    }
+  };
+
+  const handleCleanExpired = () => {
+    if (typeof window === 'undefined') return;
+    
+    const now = Date.now();
+    const keysToRemove: string[] = [];
+
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      if (key && (key.startsWith('cache-') || key.startsWith('navidrome-cache-') || key.startsWith('library-cache-'))) {
+        try {
+          const value = localStorage.getItem(key);
+          if (value) {
+            const parsed = JSON.parse(value);
+            if (parsed.expiresAt && now > parsed.expiresAt) {
+              keysToRemove.push(key);
+            }
+          }
+        } catch (error) {
+          // Invalid cache item, remove it
+          keysToRemove.push(key);
+        }
+      }
+    }
+
+    keysToRemove.forEach(key => localStorage.removeItem(key));
+    loadCacheStats();
+  };
+
+  return (
+    <Card className="break-inside-avoid py-5">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Database className="h-5 w-5" />
+          Cache Management
+        </CardTitle>
+        <CardDescription>
+          Manage application cache to improve performance and free up storage
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Cache Statistics */}
+        <div className="grid grid-cols-3 gap-4 text-center">
+          <div className="space-y-1">
+            <p className="text-2xl font-bold">{cacheStats.total}</p>
+            <p className="text-xs text-muted-foreground">Total Items</p>
+          </div>
+          <div className="space-y-1">
+            <p className="text-2xl font-bold">{cacheStats.expired}</p>
+            <p className="text-xs text-muted-foreground">Expired</p>
+          </div>
+          <div className="space-y-1">
+            <p className="text-2xl font-bold">{cacheStats.size}</p>
+            <p className="text-xs text-muted-foreground">Storage Used</p>
+          </div>
+        </div>
+
+        {/* Cache Actions */}
+        <div className="space-y-2">
+          <div className="flex gap-2">
+            <Button
+              onClick={handleClearCache}
+              disabled={isClearing}
+              variant="destructive"
+              size="sm"
+              className="flex-1"
+            >
+              {isClearing ? (
+                <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
+              ) : (
+                <Trash2 className="h-4 w-4 mr-2" />
+              )}
+              {isClearing ? 'Clearing...' : 'Clear All Cache'}
+            </Button>
+            
+            <Button
+              onClick={handleCleanExpired}
+              variant="outline"
+              size="sm"
+              className="flex-1"
+            >
+              <HardDrive className="h-4 w-4 mr-2" />
+              Clean Expired
+            </Button>
+          </div>
+          
+          <Button
+            onClick={loadCacheStats}
+            variant="ghost"
+            size="sm"
+            className="w-full"
+          >
+            <RefreshCw className="h-4 w-4 mr-2" />
+            Refresh Stats
+          </Button>
+        </div>
+
+        {/* Cache Info */}
+        <div className="text-sm text-muted-foreground space-y-1">
+          <p>Cache includes albums, artists, songs, and image URLs to improve loading times.</p>
+          {lastCleared && (
+            <p>Last cleared: {lastCleared}</p>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

app/components/FullScreenPlayer.tsx

@@ -7,6 +7,7 @@ import { useAudioPlayer } from '@/app/components/AudioPlayerContext';
 import { Progress } from '@/components/ui/progress';
 import { lrcLibClient } from '@/lib/lrclib';
 import Link from 'next/link';
+import { useIsMobile } from '@/hooks/use-mobile';
 import { 
   FaPlay, 
   FaPause, 
@@ -21,14 +22,7 @@ import {
   FaListUl
 } from "react-icons/fa6";
 import { Heart } from 'lucide-react';
-import { Card, CardContent } from '@/components/ui/card';
 import { ScrollArea } from '@/components/ui/scroll-area';
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuTrigger,
-} from "@/components/ui/context-menu";
 
 interface LyricLine {
   time: number;
@@ -41,8 +35,20 @@ interface FullScreenPlayerProps {
   onOpenQueue?: () => void;
 }
 
+type MobileTab = 'player' | 'lyrics' | 'queue';
+
 export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onClose, onOpenQueue }) => {
-  const { currentTrack, playPreviousTrack, playNextTrack, shuffle, toggleShuffle, toggleCurrentTrackStar } = useAudioPlayer();
+  const { 
+    currentTrack, 
+    playPreviousTrack, 
+    playNextTrack, 
+    shuffle, 
+    toggleShuffle, 
+    toggleCurrentTrackStar,
+    queue 
+  } = useAudioPlayer();
+  
+  const isMobile = useIsMobile();
   const router = useRouter();
   const [progress, setProgress] = useState(0);
   const [isPlaying, setIsPlaying] = useState(false);
@@ -54,8 +60,19 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
   const [lyrics, setLyrics] = useState<LyricLine[]>([]);
   const [currentLyricIndex, setCurrentLyricIndex] = useState(-1);
   const [showLyrics, setShowLyrics] = useState(true);
+  const [activeTab, setActiveTab] = useState<MobileTab>('player');
   const lyricsRef = useRef<HTMLDivElement>(null);
 
+  // Debug logging for component changes
+  useEffect(() => {
+    console.log('🔍 FullScreenPlayer state changed:', {
+      isOpen,
+      currentTrack,
+      currentTrackKeys: currentTrack ? Object.keys(currentTrack) : 'null',
+      queueLength: queue?.length || 0
+    });
+  }, [isOpen, currentTrack, queue?.length]);
+
   // Load lyrics when track changes
   useEffect(() => {
     const loadLyrics = async () => {
@@ -79,7 +96,7 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
           setLyrics([]);
         }
       } catch (error) {
-        console.error('Failed to load lyrics:', error);
+        console.log('Failed to load lyrics:', error);
         setLyrics([]);
       }
     };
@@ -95,62 +112,106 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
     }
   }, [lyrics, currentTime, currentLyricIndex]);
 
-  // Auto-scroll lyrics using lyricsRef
+  // Auto-scroll lyrics using lyricsRef - Disabled on mobile to prevent iOS audio issues
   useEffect(() => {
-    if (currentLyricIndex >= 0 && lyrics.length > 0 && showLyrics && lyricsRef.current) {
+    // Only auto-scroll on desktop to avoid iOS audio interference
+    const shouldScroll = !isMobile && showLyrics && lyrics.length > 0;
+    
+    if (currentLyricIndex >= 0 && shouldScroll && lyricsRef.current) {
       const scrollTimeout = setTimeout(() => {
-        // Find the ScrollArea viewport
-        const scrollViewport = lyricsRef.current?.querySelector('[data-radix-scroll-area-viewport]') as HTMLElement;
-        const currentLyricElement = lyricsRef.current?.querySelector(`[data-lyric-index="${currentLyricIndex}"]`) as HTMLElement;
-        
-        if (scrollViewport && currentLyricElement) {
-          const containerHeight = scrollViewport.clientHeight;
-          const elementTop = currentLyricElement.offsetTop;
-          const elementHeight = currentLyricElement.offsetHeight;
+        try {
+          const scrollContainer = lyricsRef.current?.querySelector('[data-radix-scroll-area-viewport]') as HTMLElement;
+          const currentLyricElement = lyricsRef.current?.querySelector(`[data-lyric-index="${currentLyricIndex}"]`) as HTMLElement;
           
-          // Calculate scroll position to center the current lyric
-          const targetScrollTop = elementTop - (containerHeight / 2) + (elementHeight / 2);
-          
-          scrollViewport.scrollTo({
-            top: Math.max(0, targetScrollTop),
-            behavior: 'smooth'
-          });
+          if (scrollContainer && currentLyricElement) {
+            const containerHeight = scrollContainer.clientHeight;
+            const elementTop = currentLyricElement.offsetTop;
+            const elementHeight = currentLyricElement.offsetHeight;
+            const targetScrollTop = elementTop - (containerHeight / 2) + (elementHeight / 2);
+            
+            scrollContainer.scrollTo({
+              top: Math.max(0, targetScrollTop),
+              behavior: 'smooth'
+            });
+          }
+        } catch (error) {
+          console.warn('Lyrics scroll failed:', error);
         }
-      }, 100);
+      }, 200);
       
       return () => clearTimeout(scrollTimeout);
     }
-  }, [currentLyricIndex, showLyrics, lyrics.length]);
+  }, [currentLyricIndex, showLyrics, lyrics.length, isMobile]);
 
-  // Reset lyrics to top when song changes
+  // Reset lyrics to top when song changes - Disabled on mobile to prevent iOS audio issues
   useEffect(() => {
-    if (currentTrack && showLyrics && lyricsRef.current) {
-      // Reset scroll position using lyricsRef
-      const resetScroll = () => {
-        const scrollViewport = lyricsRef.current?.querySelector('[data-radix-scroll-area-viewport]') as HTMLElement;
-        
-        if (scrollViewport) {
-          scrollViewport.scrollTo({
-            top: 0,
-            behavior: 'instant' // Use instant for track changes
-          });
-        }
-      };
-      
-      // Small delay to ensure DOM is ready
+    // Only reset scroll on desktop to avoid iOS audio interference
+    const shouldReset = !isMobile && showLyrics && lyrics.length > 0;
+    
+    if (currentTrack?.id && shouldReset && lyricsRef.current) {
       const resetTimeout = setTimeout(() => {
-        resetScroll();
+        try {
+          const scrollContainer = lyricsRef.current?.querySelector('[data-radix-scroll-area-viewport]') as HTMLElement;
+          
+          if (scrollContainer) {
+            scrollContainer.scrollTo({
+              top: 0,
+              behavior: 'instant'
+            });
+          }
+        } catch (error) {
+          console.warn('Lyrics reset scroll failed:', error);
+        }
         setCurrentLyricIndex(-1);
       }, 50);
       
       return () => clearTimeout(resetTimeout);
     }
-  }, [currentTrack?.id, showLyrics, currentTrack]); // Only reset when track ID changes
+  }, [currentTrack?.id, showLyrics, isMobile, lyrics.length]);
 
   // Sync with main audio player (improved responsiveness)
   useEffect(() => {
     const syncWithMainPlayer = () => {
       const mainAudio = document.querySelector('audio') as HTMLAudioElement;
+      
+      console.log('=== FULLSCREEN PLAYER AUDIO DEBUG ===');
+      console.log('currentTrack from context:', currentTrack);
+      console.log('currentTrack keys:', currentTrack ? Object.keys(currentTrack) : 'null');
+      if (currentTrack) {
+        console.log('currentTrack.url:', currentTrack.url);
+        console.log('currentTrack.id:', currentTrack.id);
+        console.log('currentTrack.name:', currentTrack.name);
+        console.log('currentTrack.artist:', currentTrack.artist);
+      }
+      console.log('Audio element found:', !!mainAudio);
+      
+      if (mainAudio) {
+        console.log('Audio element src:', mainAudio.src);
+        console.log('Audio element currentSrc:', mainAudio.currentSrc);
+        console.log('Audio state:', {
+          currentTime: mainAudio.currentTime,
+          duration: mainAudio.duration,
+          paused: mainAudio.paused,
+          ended: mainAudio.ended,
+          readyState: mainAudio.readyState,
+          networkState: mainAudio.networkState,
+          error: mainAudio.error
+        });
+        
+        // Check if audio source matches current track
+        if (currentTrack) {
+          const audioSourceMatches = mainAudio.src === currentTrack.url || mainAudio.currentSrc === currentTrack.url;
+          console.log('Audio source matches current track URL:', audioSourceMatches);
+          if (!audioSourceMatches) {
+            console.log('⚠️ Audio source mismatch!');
+            console.log('Expected:', currentTrack.url);
+            console.log('Audio src:', mainAudio.src);
+            console.log('Audio currentSrc:', mainAudio.currentSrc);
+          }
+        }
+      }
+      console.log('==========================================');
+      
       if (mainAudio && currentTrack) {
         const newCurrentTime = mainAudio.currentTime;
         const newDuration = mainAudio.duration || 0;
@@ -213,20 +274,96 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
           setDominantColor(`rgb(${r}, ${g}, ${b})`);
         }
       } catch (error) {
-        console.error('Failed to extract color:', error);
+        console.log('Failed to extract color:', error);
       }
     };
     img.src = currentTrack.coverArt;
   }, [currentTrack]);
 
   const togglePlayPause = () => {
-    const mainAudio = document.querySelector('audio') as HTMLAudioElement;
-    if (!mainAudio) return;
-
-    if (isPlaying) {
-      mainAudio.pause();
+    console.log('🎵 FullScreenPlayer Toggle Play/Pause clicked');
+    
+    // Find the main audio player's play/pause button and click it
+    // This ensures we use the same logic as the main player
+    const mainPlayButton = document.querySelector('[data-testid="play-pause-button"]') as HTMLButtonElement;
+    
+    if (mainPlayButton) {
+      console.log('✅ Found main play button, triggering click');
+      mainPlayButton.click();
     } else {
-      mainAudio.play();
+      console.log('❌ Main play button not found, falling back to direct audio control');
+      
+      // Fallback to direct audio control if button not found
+      const mainAudio = document.querySelector('audio') as HTMLAudioElement;
+      if (!mainAudio) {
+        console.log('❌ No audio element found');
+        
+        // Try to find ALL audio elements for debugging
+        const allAudio = document.querySelectorAll('audio');
+        console.log('🔍 Found audio elements:', allAudio.length);
+        allAudio.forEach((audio, index) => {
+          console.log(`Audio ${index}:`, {
+            src: audio.src,
+            currentSrc: audio.currentSrc,
+            paused: audio.paused,
+            hidden: audio.hidden,
+            style: audio.style.display
+          });
+        });
+        return;
+      }
+
+      console.log('🔍 Detailed audio element state:');
+      console.log('- Audio src:', mainAudio.src);
+      console.log('- Audio currentSrc:', mainAudio.currentSrc);
+      console.log('- Audio paused:', mainAudio.paused);
+      console.log('- Audio currentTime:', mainAudio.currentTime);
+      console.log('- Audio duration:', mainAudio.duration);
+      console.log('- Audio readyState:', mainAudio.readyState, '(0=HAVE_NOTHING, 1=HAVE_METADATA, 2=HAVE_CURRENT_DATA, 3=HAVE_FUTURE_DATA, 4=HAVE_ENOUGH_DATA)');
+      console.log('- Audio networkState:', mainAudio.networkState, '(0=EMPTY, 1=IDLE, 2=LOADING, 3=NO_SOURCE)');
+      console.log('- Audio error:', mainAudio.error);
+      console.log('- Audio ended:', mainAudio.ended);
+      console.log('- Audio seeking:', mainAudio.seeking);
+      console.log('- Audio volume:', mainAudio.volume);
+      console.log('- Audio muted:', mainAudio.muted);
+      console.log('- Audio autoplay:', mainAudio.autoplay);
+      console.log('- Audio loop:', mainAudio.loop);
+      console.log('- Audio preload:', mainAudio.preload);
+      console.log('- Audio crossOrigin:', mainAudio.crossOrigin);
+
+      if (isPlaying) {
+        console.log('⏸️ Attempting to pause audio');
+        try {
+          mainAudio.pause();
+          console.log('✅ Audio pause() succeeded');
+        } catch (error) {
+          console.log('❌ Audio pause() failed:', error);
+        }
+      } else {
+        console.log('▶️ Attempting to play audio');
+        
+        // Check if audio has a valid source
+        if (!mainAudio.src && !mainAudio.currentSrc) {
+          console.log('❌ Audio has no source set!');
+          console.log('currentTrack:', currentTrack);
+          if (currentTrack) {
+            console.log('Setting audio source to:', currentTrack.url);
+            mainAudio.src = currentTrack.url;
+            mainAudio.load();
+          }
+        }
+        
+        mainAudio.play().then(() => {
+          console.log('✅ Audio play() succeeded');
+        }).catch((error) => {
+          console.log('❌ Audio play() failed:', error);
+          console.log('Error details:', {
+            name: error.name,
+            message: error.message,
+            code: error.code
+          });
+        });
+      }
     }
   };
 
@@ -276,217 +413,485 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
   if (!isOpen || !currentTrack) return null;
 
   return (
-    <div className="fixed inset-0 z-50 bg-black overflow-hidden">
-      {/* Blurred background image */}
+    <div className="fixed inset-0 z-[70] bg-black overflow-hidden">
+      {/* Enhanced Blurred background image */}
       {currentTrack.coverArt && (
-        <div 
-          className="absolute inset-0 w-full h-full"
-          style={{
-            backgroundImage: `url(${currentTrack.coverArt})`,
-            backgroundSize: '120%',
-            backgroundPosition: 'center',
-            backgroundRepeat: 'no-repeat',
-            filter: 'blur(20px) brightness(0.3)',
-            transform: 'scale(1.1)',
-          }}
-        />
+        <div className="absolute inset-0 w-full h-full">
+          {/* Main background */}
+          <div 
+            className="absolute inset-0 w-full h-full"
+            style={{
+              backgroundImage: `url(${currentTrack.coverArt})`,
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+              backgroundRepeat: 'no-repeat',
+              filter: 'blur(20px) brightness(0.3)',
+              transform: 'scale(1.1)',
+            }}
+          />
+          {/* Top gradient blur for mobile */}
+          <div 
+            className="absolute top-0 left-0 right-0 h-32"
+            style={{
+              background: `linear-gradient(to bottom, 
+                rgba(0,0,0,0.8) 0%, 
+                rgba(0,0,0,0.4) 50%, 
+                transparent 100%)`,
+              backdropFilter: 'blur(10px)',
+            }}
+          />
+          {/* Bottom gradient blur for mobile */}
+          <div 
+            className="absolute bottom-0 left-0 right-0 h-32"
+            style={{
+              background: `linear-gradient(to top, 
+                rgba(0,0,0,0.8) 0%, 
+                rgba(0,0,0,0.4) 50%, 
+                transparent 100%)`,
+              backdropFilter: 'blur(10px)',
+            }}
+          />
+        </div>
       )}
       
       {/* Overlay for better contrast */}
-      <div className="absolute inset-0 bg-black/50" />
-        <div className="relative h-full w-full flex flex-col">
-        {/* Header */}
-        <div className="flex items-center justify-between p-4 lg:p-6 flex-shrink-0">
-          <h2 className="text-lg lg:text-xl font-semibold text-white"></h2>
-          <div className="flex items-center gap-2">
-            {onOpenQueue && (
-              <button 
-                onClick={onOpenQueue}
-                className="text-white hover:bg-white/20 p-2 rounded-full transition-colors flex items-center justify-center w-10 h-10"
-                title="Open Queue"
-              >
-                <FaListUl className="w-5 h-5" />
-              </button>
-            )}
-            <button 
+      <div className="absolute inset-0 bg-black/30" />
+      
+      <div className="relative h-full w-full flex flex-col">
+        
+        {/* Mobile Close Handle */}
+        {isMobile && (
+          <div className="flex justify-center py-4 px-4">
+            <div 
               onClick={onClose}
-              className="text-white hover:bg-white/20 p-2 rounded-full transition-colors flex items-center justify-center w-10 h-10"
-              title="Close Player"
+              className="cursor-pointer px-8 py-3 -mx-8 -my-3"
+              style={{ touchAction: 'manipulation' }}
             >
-              <FaXmark className="w-5 h-5" />
-            </button>
+              <div className="w-8 h-1 bg-gray-300 rounded-full opacity-60" />
+            </div>
           </div>
-        </div>
+        )}
 
-        {/* Main Content */}
-        <div className="flex-1 flex flex-col lg:flex-row gap-4 lg:gap-8 p-4 lg:p-6 pt-0 overflow-hidden min-h-0">
-          {/* Left Side - Album Art and Controls */}
-          <div className={`flex flex-col items-center min-h-0 flex-1 min-w-0 ${
-            showLyrics && lyrics.length > 0 
-              ? 'justify-center lg:justify-start' 
-              : 'justify-center'
-          }`}>
-            {/* Album Art */}
-            <div className="relative mb-4 lg:mb-6 flex-shrink-0">
-              <Image
-                src={currentTrack.coverArt || '/default-album.png'}
-                alt={currentTrack.album}
-                width={320}
-                height={320}
-                className="w-56 h-56 sm:w-64 sm:h-64 lg:w-80 lg:h-80 rounded-lg shadow-2xl object-cover"
-                priority
-              />
-            </div>
-
-            {/* Track Info */}
-            <div className="text-center mb-4 lg:mb-6 px-4 flex-shrink-0 max-w-full">
-              <h1 className="text-lg sm:text-xl lg:text-3xl font-bold text-foreground mb-2 line-clamp-2 leading-tight">
-                {currentTrack.name}
-              </h1>
-              <Link href={`/artist/${currentTrack.artistId}`} className="text-base sm:text-lg lg:text-xl text-foreground/80 mb-1 line-clamp-1">
-                {currentTrack.artist}
-              </Link>
-              <Link href={`/album/${currentTrack.albumId}`}  className="text-sm sm:text-base lg:text-lg text-foreground/60 line-clamp-1 cursor-pointer hover:underline">
-                {currentTrack.album}
-              </Link>
-            </div>
-
-            {/* Progress */}
-            <div className="w-full max-w-sm lg:max-w-md mb-4 lg:mb-6 px-4 flex-shrink-0">
-              <div className="w-full" onClick={handleSeek}>
-                <Progress value={progress} className="h-2 cursor-pointer" />
-              </div>
-              <div className="flex justify-between text-sm text-foreground/60 mt-2">
-                <span>{formatTime(currentTime)}</span>
-                <span>{formatTime(duration)}</span>
-              </div>
-            </div>
-
-            {/* Controls */}
-            <div className="flex items-center gap-3 sm:gap-4 lg:gap-6 mb-4 lg:mb-6 flex-shrink-0">
-              <button
-                onClick={toggleShuffle}
-                className={`p-2 hover:bg-gray-700/50 rounded-full transition-colors ${
-                  shuffle ? 'text-primary bg-primary/20' : 'text-gray-400'
-                }`}
-                title={shuffle ? 'Shuffle On - Queue is shuffled' : 'Shuffle Off - Click to shuffle queue'}
-              >
-                <FaShuffle className="w-4 h-4 sm:w-5 sm:h-5" />
-              </button>
-
-              <button
-                onClick={playPreviousTrack}
-                className="p-2 hover:bg-gray-700/50 rounded-full transition-colors">
-                <FaBackward className="w-4 h-4 sm:w-5 sm:h-5" />
-              </button>
-
-              <button
-                onClick={togglePlayPause}
-                className="p-3 hover:bg-gray-700/50 rounded-full transition-colors">
-                {isPlaying ? (
-                  <FaPause className="w-8 h-8 sm:w-10 sm:h-10" />
-                ) : (
-                  <FaPlay className="w-8 h-8 sm:w-10 sm:h-10" />
-                )}
-              </button>
-
-              <button
-                onClick={playNextTrack}
-                className="p-2 hover:bg-gray-700/50 rounded-full transition-colors">
-                <FaForward className="w-4 h-4 sm:w-5 sm:h-5" />
-              </button>
-
-              <button
-                onClick={toggleCurrentTrackStar}
-                className="p-2 hover:bg-gray-700/50 rounded-full transition-colors"
-                title={currentTrack?.starred ? 'Remove from favorites' : 'Add to favorites'}
-              >
-                <Heart 
-                  className={`w-4 h-4 sm:w-5 sm:h-5 ${currentTrack?.starred ? 'text-primary fill-primary' : 'text-gray-400'}`} 
-                />
-              </button>
-
-              
-              
-            </div>
-
-            {/* Volume and Lyrics Toggle */}
-            <div className="flex items-center gap-3 flex-shrink-0 justify-center">
-              <button
-                onMouseEnter={() => setShowVolumeSlider(true)}
-                className="p-2 hover:bg-gray-700/50 rounded-full transition-colors">
-                {volume === 0 ? (
-                  <FaVolumeXmark className="w-4 h-4 sm:w-5 sm:h-5" />
-                ) : (
-                  <FaVolumeHigh className="w-4 h-4 sm:w-5 sm:h-5" />
-                )}
-              </button>
-              
-              {lyrics.length > 0 && (
-                <button
-                  onClick={() => setShowLyrics(!showLyrics)}
-                  className={`p-2 hover:bg-gray-700/50 rounded-full transition-colors ${
-                    showLyrics ? 'text-primary bg-primary/20' : 'text-gray-500'
-                  }`}
-                  title={showLyrics ? 'Hide Lyrics' : 'Show Lyrics'}
+        {/* Desktop Header */}
+        {!isMobile && (
+          <div className="absolute top-0 right-0 z-10 p-4 lg:p-6">
+            <div className="flex items-center gap-2">
+              {onOpenQueue && (
+                <button 
+                  onClick={onOpenQueue}
+                  className="text-white hover:bg-white/20 p-2 rounded-full transition-colors flex items-center justify-center w-10 h-10"
+                  title="Open Queue"
                 >
-                  <FaQuoteLeft className="w-4 h-4 sm:w-5 sm:h-5" />
+                  <FaListUl className="w-5 h-5" />
                 </button>
               )}
-              
-              {showVolumeSlider && (
-                <div 
-                  className="w-16 sm:w-20 lg:w-24"
-                  onMouseLeave={() => setShowVolumeSlider(false)}
-                >
-                  <input
-                    type="range"
-                    min="0"
-                    max="100"
-                    value={volume * 100}
-                    onChange={handleVolumeChange}
-                    className="w-full accent-foreground"
-                  />
-                </div>
-              )}
+              <button 
+                onClick={onClose}
+                className="text-white hover:bg-white/20 p-2 rounded-full transition-colors flex items-center justify-center w-10 h-10"
+                title="Close Player"
+              >
+                <FaXmark className="w-5 h-5" />
+              </button>
             </div>
           </div>
+        )}
 
-          {/* Right Side - Lyrics */}
-          {showLyrics && lyrics.length > 0 && (
-            <div className="flex-1 min-w-0 min-h-0 flex flex-col" ref={lyricsRef}>
-              <div className="h-full flex flex-col">
-                <ScrollArea className="flex-1 min-h-0">
-                  <div className="space-y-3 sm:space-y-4 pr-4 px-2 py-4">
-                    {lyrics.map((line, index) => (
-                      <div
-                        key={index}
-                        data-lyric-index={index}
-                        onClick={() => handleLyricClick(line.time)}
-                        className={`text-sm sm:text-base lg:text-base leading-relaxed transition-all duration-300 break-words cursor-pointer hover:text-foreground hover:scale-102 ${
-                          index === currentLyricIndex
-                            ? 'text-foreground font-semibold text-base sm:text-lg lg:text-xl scale-105'
-                            : index < currentLyricIndex
-                            ? 'text-foreground/60'
-                            : 'text-foreground/40'
+        {/* Main Content */}
+        <div className="flex-1 overflow-hidden">
+          {isMobile ? (
+            /* Mobile Tab Content */
+            <div className="h-full flex flex-col">
+              <div className="flex-1 overflow-hidden">
+                {activeTab === 'player' && (
+                  <div className="h-full flex flex-col justify-center items-center px-8 py-4">
+                    {/* Mobile Album Art */}
+                    <div className="relative mb-6 shrink-0">
+                      <Image
+                        src={currentTrack.coverArt || '/default-album.png'}
+                        alt={currentTrack.album}
+                        width={260}
+                        height={260}
+                        className={`rounded-lg shadow-2xl object-cover transition-all duration-300 ${
+                          !isPlaying ? 'w-52 h-52 opacity-70 scale-95' : 'w-64 h-64'
                         }`}
-                        style={{ 
-                          wordWrap: 'break-word',
-                          overflowWrap: 'break-word',
-                          hyphens: 'auto',
-                          paddingBottom: '6px',
-                          paddingLeft: '8px'
-                        }}
-                        title={`Click to jump to ${formatTime(line.time)}`}
-                      >
-                        {line.text || '♪'}
+                        priority
+                      />
+                    </div>
+
+                    {/* Track Info - Left Aligned and Heart on Same Line */}
+                    <div className="w-full mb-6 shrink-0">
+                      <div className="flex items-center justify-between mb-0">
+                        <h1 className="text-2xl font-bold text-foreground line-clamp-1 flex-1 text-left">
+                          {currentTrack.name}
+                        </h1>
+                        <button
+                          onClick={toggleCurrentTrackStar}
+                          className="p-2 hover:bg-gray-700/50 rounded-full transition-colors ml-3 pb-0"
+                          title={currentTrack?.starred ? 'Remove from favorites' : 'Add to favorites'}
+                        >
+                          <Heart 
+                            className={`w-6 h-6 ${currentTrack?.starred ? 'text-primary fill-primary' : 'text-gray-400'}`} 
+                          />
+                        </button>
                       </div>
-                    ))}
-                    {/* Add extra padding at the bottom to allow last lyric to center */}
-                    <div style={{ height: '200px' }} />
+                      <Link 
+                        href={`/artist/${currentTrack.artistId}`} 
+                        className="text-lg text-foreground/80 line-clamp-1 block text-left mb-1"
+                      >
+                        {currentTrack.artist}
+                      </Link>
+                      <Link 
+                        href={`/album/${currentTrack.albumId}`}  
+                        className="text-base text-foreground/60 line-clamp-1 cursor-pointer hover:underline block text-left"
+                      >
+                        {currentTrack.album}
+                      </Link>
+                    </div>
+
+                    {/* Progress */}
+                    <div className="w-full mb-4 shrink-0">
+                      <div className="w-full" onClick={handleSeek}>
+                        <Progress value={progress} className="h-2 cursor-pointer" />
+                      </div>
+                      {/* Time below progress on mobile */}
+                      <div className="flex justify-between text-sm text-foreground/60 mt-2">
+                        <span>{formatTime(currentTime)}</span>
+                        <span>{formatTime(duration)}</span>
+                      </div>
+                    </div>
+
+                    {/* Controls */}
+                    <div className="flex items-center gap-6 mb-4 shrink-0">
+                      <button
+                        onClick={toggleShuffle}
+                        className={`p-2 hover:bg-gray-700/50 rounded-full transition-colors ${
+                          shuffle ? 'text-primary bg-primary/20' : 'text-gray-400'
+                        }`}
+                        title={shuffle ? 'Shuffle On - Queue is shuffled' : 'Shuffle Off - Click to shuffle queue'}
+                      >
+                        <FaShuffle className="w-5 h-5" />
+                      </button>
+
+                      <button
+                        onClick={playPreviousTrack}
+                        className="p-2 hover:bg-gray-700/50 rounded-full transition-colors">
+                        <FaBackward className="w-6 h-6" />
+                      </button>
+
+                      <button
+                        onClick={togglePlayPause}
+                        className="p-4 hover:bg-gray-700/50 rounded-full transition-colors">
+                        {isPlaying ? (
+                          <FaPause className="w-10 h-10" />
+                        ) : (
+                          <FaPlay className="w-10 h-10" />
+                        )}
+                      </button>
+
+                      <button
+                        onClick={playNextTrack}
+                        className="p-2 hover:bg-gray-700/50 rounded-full transition-colors">
+                        <FaForward className="w-6 h-6" />
+                      </button>
+
+                      <button
+                        onMouseEnter={() => setShowVolumeSlider(true)}
+                        className="p-2 hover:bg-gray-700/50 rounded-full transition-colors">
+                        {volume === 0 ? (
+                          <FaVolumeXmark className="w-5 h-5" />
+                        ) : (
+                          <FaVolumeHigh className="w-5 h-5" />
+                        )}
+                      </button>
+                    </div>
+
+                    {/* Volume Slider */}
+                    {showVolumeSlider && (
+                      <div 
+                        className="w-32 mb-4"
+                        onMouseLeave={() => setShowVolumeSlider(false)}
+                      >
+                        <input
+                          type="range"
+                          min="0"
+                          max="100"
+                          value={volume * 100}
+                          onChange={handleVolumeChange}
+                          className="w-full accent-foreground"
+                        />
+                      </div>
+                    )}
                   </div>
-                </ScrollArea>
+                )}
+
+                {activeTab === 'lyrics' && lyrics.length > 0 && (
+                  <div className="h-full flex flex-col px-4">
+                    <div 
+                      className="flex-1 overflow-y-auto"
+                      ref={lyricsRef}
+                    >
+                      <div className="space-y-3 py-4">
+                        {lyrics.map((line, index) => (
+                          <div
+                            key={index}
+                            data-lyric-index={index}
+                            onClick={() => handleLyricClick(line.time)}
+                            className={`text-base leading-relaxed transition-all duration-300 break-words cursor-pointer hover:text-foreground px-2 ${
+                              index === currentLyricIndex
+                                ? 'text-foreground font-bold text-xl'
+                                : index < currentLyricIndex
+                                ? 'text-foreground/60'
+                                : 'text-foreground/40'
+                            }`}
+                            style={{ 
+                              wordWrap: 'break-word',
+                              overflowWrap: 'break-word',
+                              hyphens: 'auto',
+                              paddingBottom: '4px'
+                            }}
+                            title={`Click to jump to ${formatTime(line.time)}`}
+                          >
+                            {line.text || '♪'}
+                          </div>
+                        ))}
+                        <div style={{ height: '200px' }} />
+                      </div>
+                    </div>
+                  </div>
+                )}
+
+                {activeTab === 'queue' && (
+                  <div className="h-full flex flex-col px-4">
+                    <ScrollArea className="flex-1">
+                      <div className="space-y-2 py-4">
+                        {queue.map((track, index) => (
+                          <div
+                            key={`${track.id}-${index}`}
+                            className={`flex items-center p-3 rounded-lg ${
+                              track.id === currentTrack?.id ? 'bg-primary/20' : 'bg-gray-800/30'
+                            }`}
+                          >
+                            <Image
+                              src={track.coverArt || '/default-album.png'}
+                              alt={track.album}
+                              width={40}
+                              height={40}
+                              className="rounded mr-3"
+                            />
+                            <div className="flex-1 min-w-0">
+                              <p className="font-medium text-sm truncate">
+                                {track.name}
+                              </p>
+                              <p className="text-xs text-gray-400 truncate">
+                                {track.artist}
+                              </p>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </ScrollArea>
+                  </div>
+                )}
               </div>
+
+              {/* Mobile Tab Bar */}
+              <div className="flex-shrink-0 pb-safe">
+                <div className="flex justify-around py-4 mb-2">
+                  <button
+                    onClick={() => setActiveTab('player')}
+                    className={`flex items-center justify-center p-4 rounded-full transition-colors ${
+                      activeTab === 'player' ? 'text-primary bg-primary/20' : 'text-gray-400'
+                    }`}
+                  >
+                    <FaPlay className="w-6 h-6" />
+                  </button>
+
+                  {lyrics.length > 0 && (
+                    <button
+                      onClick={() => setActiveTab('lyrics')}
+                      className={`flex items-center justify-center p-4 rounded-full transition-colors ${
+                        activeTab === 'lyrics' ? 'text-primary bg-primary/20' : 'text-gray-400'
+                      }`}
+                    >
+                      <FaQuoteLeft className="w-6 h-6" />
+                    </button>
+                  )}
+
+                  <button
+                    onClick={() => setActiveTab('queue')}
+                    className={`flex items-center justify-center p-4 rounded-full transition-colors ${
+                      activeTab === 'queue' ? 'text-primary bg-primary/20' : 'text-gray-400'
+                    }`}
+                  >
+                    <FaListUl className="w-6 h-6" />
+                  </button>
+                </div>
+              </div>
+            </div>
+          ) : (
+            /* Desktop Layout */
+            <div className="h-full flex flex-row gap-8 p-6 overflow-hidden">
+              {/* Left Side - Album Art and Controls */}
+              <div className="flex flex-col items-center justify-center min-h-0 flex-1 min-w-0">
+                {/* Album Art */}
+                <div className="relative mb-6 shrink-0">
+                  <Image
+                    src={currentTrack.coverArt || '/default-album.png'}
+                    alt={currentTrack.album}
+                    width={320}
+                    height={320}
+                    className="w-80 h-80 rounded-lg shadow-2xl object-cover"
+                    priority
+                  />
+                </div>
+
+                {/* Track Info */}
+                <div className="text-center mb-6 px-4 shrink-0 max-w-full">
+                  <h1 className="text-3xl font-bold text-foreground line-clamp-2 leading-tight mb-2">
+                    {currentTrack.name}
+                  </h1>
+                  <Link href={`/artist/${currentTrack.artistId}`} className="text-xl text-foreground/80 mb-1 line-clamp-1">
+                    {currentTrack.artist}
+                  </Link>
+                  <Link href={`/album/${currentTrack.albumId}`}  className="text-lg text-foreground/60 line-clamp-1 cursor-pointer hover:underline">
+                    {currentTrack.album}
+                  </Link>
+                </div>
+
+                {/* Progress */}
+                <div className="w-full max-w-md mb-6 px-4 shrink-0">
+                  <div className="w-full" onClick={handleSeek}>
+                    <Progress value={progress} className="h-2 cursor-pointer" />
+                  </div>
+                  <div className="flex justify-between text-sm text-foreground/60 mt-2">
+                    <span>{formatTime(currentTime)}</span>
+                    <span>{formatTime(duration)}</span>
+                  </div>
+                </div>
+
+                {/* Controls */}
+                <div className="flex items-center gap-6 mb-6 shrink-0">
+                  <button
+                    onClick={toggleShuffle}
+                    className={`p-2 hover:bg-gray-700/50 rounded-full transition-colors ${
+                      shuffle ? 'text-primary bg-primary/20' : 'text-gray-400'
+                    }`}
+                    title={shuffle ? 'Shuffle On - Queue is shuffled' : 'Shuffle Off - Click to shuffle queue'}
+                  >
+                    <FaShuffle className="w-5 h-5" />
+                  </button>
+
+                  <button
+                    onClick={playPreviousTrack}
+                    className="p-2 hover:bg-gray-700/50 rounded-full transition-colors">
+                    <FaBackward className="w-5 h-5" />
+                  </button>
+
+                  <button
+                    onClick={togglePlayPause}
+                    className="p-3 hover:bg-gray-700/50 rounded-full transition-colors">
+                    {isPlaying ? (
+                      <FaPause className="w-10 h-10" />
+                    ) : (
+                      <FaPlay className="w-10 h-10" />
+                    )}
+                  </button>
+
+                  <button
+                    onClick={playNextTrack}
+                    className="p-2 hover:bg-gray-700/50 rounded-full transition-colors">
+                    <FaForward className="w-5 h-5" />
+                  </button>
+
+                  <button
+                    onClick={toggleCurrentTrackStar}
+                    className="p-2 hover:bg-gray-700/50 rounded-full transition-colors"
+                    title={currentTrack?.starred ? 'Remove from favorites' : 'Add to favorites'}
+                  >
+                    <Heart 
+                      className={`w-5 h-5 ${currentTrack?.starred ? 'text-primary fill-primary' : 'text-gray-400'}`} 
+                    />
+                  </button>
+                </div>
+
+                {/* Volume and Lyrics Toggle - Desktop Only */}
+                <div className="flex items-center gap-3 shrink-0 justify-center">
+                  <button
+                    onMouseEnter={() => setShowVolumeSlider(true)}
+                    className="p-2 hover:bg-gray-700/50 rounded-full transition-colors">
+                    {volume === 0 ? (
+                      <FaVolumeXmark className="w-5 h-5" />
+                    ) : (
+                      <FaVolumeHigh className="w-5 h-5" />
+                    )}
+                  </button>
+                  
+                  {lyrics.length > 0 && (
+                    <button
+                      onClick={() => setShowLyrics(!showLyrics)}
+                      className={`p-2 hover:bg-gray-700/50 rounded-full transition-colors ${
+                        showLyrics ? 'text-primary bg-primary/20' : 'text-gray-500'
+                      }`}
+                      title={showLyrics ? 'Hide Lyrics' : 'Show Lyrics'}
+                    >
+                      <FaQuoteLeft className="w-5 h-5" />
+                    </button>
+                  )}
+                  
+                  {showVolumeSlider && (
+                    <div 
+                      className="w-24"
+                      onMouseLeave={() => setShowVolumeSlider(false)}
+                    >
+                      <input
+                        type="range"
+                        min="0"
+                        max="100"
+                        value={volume * 100}
+                        onChange={handleVolumeChange}
+                        className="w-full accent-foreground"
+                      />
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              {/* Right Side - Lyrics (Desktop Only) */}
+              {showLyrics && lyrics.length > 0 && (
+                <div className="flex-1 min-w-0 min-h-0 flex flex-col" ref={lyricsRef}>
+                  <div className="h-full flex flex-col">
+                    <ScrollArea className="flex-1 min-h-0">
+                      <div className="space-y-3 pl-4 pr-4 py-4">
+                        {lyrics.map((line, index) => (
+                          <div
+                            key={index}
+                            data-lyric-index={index}
+                            onClick={() => handleLyricClick(line.time)}
+                            className={`text-base leading-relaxed transition-all duration-300 break-words cursor-pointer hover:text-foreground ${
+                              index === currentLyricIndex
+                                ? 'text-foreground font-bold text-2xl'
+                                : index < currentLyricIndex
+                                ? 'text-foreground/60'
+                                : 'text-foreground/40'
+                            }`}
+                            style={{ 
+                              wordWrap: 'break-word',
+                              overflowWrap: 'break-word',
+                              hyphens: 'auto',
+                              paddingBottom: '4px',
+                              paddingLeft: '8px'
+                            }}
+                            title={`Click to jump to ${formatTime(line.time)}`}
+                          >
+                            {line.text || '♪'}
+                          </div>
+                        ))}
+                        <div style={{ height: '200px' }} />
+                      </div>
+                    </ScrollArea>
+                  </div>
+                </div>
+              )}
             </div>
           )}
         </div>

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/RootLayoutClient.tsx

@@ -9,20 +9,26 @@ 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";
 
 function NavidromeErrorBoundary({ children }: { children: React.ReactNode }) {
   const { error } = useNavidrome();
+  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,7 +51,12 @@ function NavidromeErrorBoundary({ children }: { children: React.ReactNode }) {
     }
     
     return false;
-  }, []);
+  }, [isClient]);
+  
+  // Don't show anything until client-side hydration is complete
+  if (!isClient) {
+    return <>{children}</>;
+  }
   
   // Show start screen ONLY if:
   // 1. First-time user (no onboarding completed), OR
@@ -74,6 +85,7 @@ export default function RootLayoutClient({ children }: { children: React.ReactNo
     <PostHogProvider>
       <ThemeProvider>
         <DynamicViewportTheme />
+        <ThemeColorHandler />
         <NavidromeConfigProvider>
           <NavidromeProvider>
             <NavidromeErrorBoundary>

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,347 @@
+'use client';
+
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import { Song, Album } 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, isConnected } = 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 () => {
+      if (!api || !isConnected) return;
+      
+      setLoading(true);
+      try {
+        // Get random albums for both mobile album view and desktop song extraction
+        const randomAlbums = await api.getAlbums('random', 10);
+        
+        if (isMobile) {
+          // For mobile: show 6 random albums
+          setRecommendedAlbums(randomAlbums.slice(0, 6));
+        } else {
+          // For desktop: extract songs from albums (original behavior)
+          const allSongs: Song[] = [];
+          
+          // Get songs from first few albums
+          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);
+            }
+          }
+          
+          // Shuffle and limit to 6 songs
+          const shuffled = allSongs.sort(() => Math.random() - 0.5);
+          const recommendations = shuffled.slice(0, 6);
+          setRecommendedSongs(recommendations);
+          
+          // Initialize starred states for songs
+          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);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadRecommendations();
+  }, [api, isConnected, isMobile]);
+
+  const handlePlaySong = async (song: Song) => {
+    if (!api) return;
+    
+    try {
+      const track = {
+        id: song.id,
+        name: song.title,
+        url: api.getStreamUrl(song.id),
+        artist: song.artist || 'Unknown Artist',
+        artistId: song.artistId || '',
+        album: song.album || 'Unknown Album',
+        albumId: song.albumId || '',
+        duration: song.duration || 0,
+        coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 64) : undefined,
+        starred: !!song.starred
+      };
+      await playTrack(track, true);
+    } catch (error) {
+      console.error('Failed to play song:', error);
+    }
+  };
+
+  const handlePlayAlbum = async (album: Album) => {
+    if (!api) return;
+    
+    try {
+      // Get album songs and play the first one
+      const albumSongs = await api.getAlbumSongs(album.id);
+      if (albumSongs.length > 0) {
+        const track = {
+          id: albumSongs[0].id,
+          name: albumSongs[0].title,
+          url: api.getStreamUrl(albumSongs[0].id),
+          artist: albumSongs[0].artist || 'Unknown Artist',
+          artistId: albumSongs[0].artistId || '',
+          album: albumSongs[0].album || 'Unknown Album',
+          albumId: albumSongs[0].albumId || '',
+          duration: albumSongs[0].duration || 0,
+          coverArt: albumSongs[0].coverArt ? api.getCoverArtUrl(albumSongs[0].coverArt, 64) : undefined,
+          starred: !!albumSongs[0].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 && api ? (
+                      <Image
+                        src={api.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 && api ? (
+                        <>
+                          <Image
+                            src={api.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/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,209 @@
+'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-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={16}
+                height={16}
+                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,70 @@
 '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 = '2025.07.31';
 
 // Changelog data - add new versions at the top
 const CHANGELOG = [
-    {
+  {
+    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)',
+      'Caching system added (incomplete)',
+      '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 +206,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

@@ -20,7 +20,7 @@ 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";
@@ -46,6 +46,24 @@ 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}`);
@@ -78,7 +96,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 +121,42 @@ 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}>
       <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()}>
+            <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="lazy"
+                />
+              ) : (
+                <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>
           {/* <div onClick={handleClick} className="overflow-hidden rounded-md">
             <Image
               src={coverArtUrl}
@@ -148,7 +166,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> */}

app/components/artist-icon.tsx

@@ -25,12 +25,14 @@ interface ArtistIconProps extends React.HTMLAttributes<HTMLDivElement> {
   artist: Artist
   size?: number
   imageOnly?: boolean
+  responsive?: boolean
 }
 
 export function ArtistIcon({
   artist,
   size = 150,
   imageOnly = false,
+  responsive = false,
   className,
   ...props
 }: ArtistIconProps) {
@@ -54,16 +56,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}
@@ -79,22 +81,33 @@ export function ArtistIcon({
     );
   }
 
+  // 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()}>
+          <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"}
                 />
               </div>
             </div>
@@ -105,19 +118,6 @@ 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> */}
         </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,8 @@
 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 {
     Menubar,
     MenubarCheckboxItem,
@@ -28,9 +29,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 +70,27 @@ 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();
+
+    // 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,30 +156,36 @@ 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>
@@ -280,6 +331,14 @@ export function Menu({ toggleSidebar, isSidebarVisible, toggleStatusBar, isStatu
           </MenubarMenu>
           </div>
         </Menubar>
+        )}
+        
+        {/* User Profile - Desktop only */}
+        {!isMobile && (
+          <div className="ml-auto">
+            <UserProfile variant="desktop" />
+          </div>
+        )}
         
       </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,7 @@ 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';
 
 export function LoginForm({
   className,
@@ -45,20 +45,7 @@ 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;
-  });
+  // New settings - removed sidebar and standalone lastfm options
 
   // Check if Navidrome is configured via environment variables
   const hasEnvConfig = React.useMemo(() => {
@@ -187,8 +174,6 @@ 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());
     
     // Mark onboarding as complete
     localStorage.setItem('onboarding-completed', '1.1.0');
@@ -206,10 +191,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" />
@@ -243,29 +271,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,31 +296,6 @@ export function LoginForm({
                 </p>
               </div>
 
-              {/* Standalone Last.fm */}
-              <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")}
-                >
-                  <SelectTrigger>
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="enabled">Enabled</SelectItem>
-                    <SelectItem value="disabled">Disabled</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"}
-                </p>
-              </div>
-
               <div className="flex flex-col gap-3">
                 <Button onClick={handleFinishSetup} className="w-full">
                   <FaCheck className="w-4 h-4 mr-2" />
@@ -340,7 +320,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" />
@@ -399,6 +379,56 @@ export function LoginForm({
                   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,35 @@ export const metadata = {
       'max-snippet': -1,
     },
   },
+  viewport: {
+    width: 'device-width',
+    initialScale: 1,
+    maximumScale: 1,
+    userScalable: false,
+  },
+  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' },
+    ],
+  },
 };
 
 const geistSans = localFont({
@@ -45,7 +74,7 @@ interface LayoutProps {
 
 export default function Layout({ children }: LayoutProps) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <head>
         <script
           dangerouslySetInnerHTML={{

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

@@ -101,7 +101,7 @@ export default function SongsPage() {
 
     setFilteredSongs(filtered);
   }, [songs, searchQuery, sortBy, sortDirection]);
-  const handlePlaySong = (song: Song) => {
+    const handlePlayClick = (song: Song) => {
     if (!api) {
       console.error('Navidrome API not available');
       return;
@@ -114,7 +114,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, 64) : undefined,
       albumId: song.albumId,
       artistId: song.artistId,
       starred: !!song.starred
@@ -135,7 +135,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, 64) : undefined,
       albumId: song.albumId,
       artistId: song.artistId,
       starred: !!song.starred
@@ -222,7 +222,7 @@ export default function SongsPage() {
                   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">
@@ -239,8 +239,8 @@ export default function SongsPage() {
                   </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/manifest.ts

@@ -2,9 +2,9 @@ import type { MetadataRoute } from 'next'
  
 export default function manifest(): MetadataRoute.Manifest {
   return {
-    name: 'mice',
-    short_name: 'Offbrand',
-    description: 'a very mice clone',
+    name: 'Mice',
+    short_name: 'Mice',
+    description: 'a very awesome navidrome client',
     start_url: '/',
     categories: ["music", "entertainment"],
     display_override: ['window-controls-overlay'],
@@ -15,7 +15,7 @@ export default function manifest(): MetadataRoute.Manifest {
       { 
          src: '/favicon.ico', 
          type: 'image/x-icon', 
-         sizes: '16x16 32x32'
+         sizes: '48x48'
       },
       { 
          src: '/icon-192.png', 
@@ -38,7 +38,97 @@ export default function manifest(): MetadataRoute.Manifest {
          type: 'image/png', 
          sizes: '512x512', 
          purpose: 'maskable'
+      },
+      // Apple Touch Icons for iOS
+      { 
+         src: '/apple-touch-icon.png', 
+         type: 'image/png', 
+         sizes: '180x180',
+         purpose: 'any'
+      },
+      { 
+         src: '/icon-192.png', 
+         type: 'image/png', 
+         sizes: '152x152',
+         purpose: 'any'
+      },
+      { 
+         src: '/icon-192.png', 
+         type: 'image/png', 
+         sizes: '120x120',
+         purpose: 'any'
       }
    ],
+      screenshots: [
+         {
+         src: '/home-preview.png',
+         sizes: '1920x1020',
+         type: 'image/png',
+         label: 'Home Preview',
+         form_factor: 'wide'
+         },
+         {
+         src: '/browse-preview.png',
+         sizes: '1920x1020',
+         type: 'image/png',
+         label: 'Browse Preview',
+         form_factor: 'wide'
+         },
+         {
+         src: '/album-preview.png',
+         sizes: '1920x1020',
+         type: 'image/png',
+         label: 'Album Preview',
+         form_factor: 'wide'
+         },
+         {
+         src: '/fullscreen-preview.png',
+         sizes: '1920x1020',
+         type: 'image/png',
+         label: 'Fullscreen Preview',
+         form_factor: 'wide'
+         }
+      ],
+      shortcuts: [
+         {
+            name: 'Resume Song',
+            short_name: 'Resume',
+            description: 'Resume the last played song',
+            url: '/?action=resume',
+            icons: [
+               {
+                  src: '/icon-192.png',
+                  sizes: '192x192',
+                  type: 'image/png'
+               }
+            ]
+         },
+         {
+            name: 'Play Recent Albums',
+            short_name: 'Recent',
+            description: 'Play from recently added albums',
+            url: '/?action=recent',
+            icons: [
+               {
+                  src: '/icon-192.png',
+                  sizes: '192x192',
+                  type: 'image/png'
+               }
+            ]
+         },
+         {
+            name: 'Shuffle Favorites',
+            short_name: 'Shuffle',
+            description: 'Shuffle songs from favorite artists',
+            url: '/?action=shuffle-favorites',
+            icons: [
+               {
+                  src: '/icon-192.png',
+                  sizes: '192x192',
+                  type: 'image/png'
+               }
+            ]
+         }
+      ]
   }
 }

app/page.tsx

@@ -5,17 +5,28 @@ 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 { useEffect, useState, Suspense } from 'react';
 import { Album } 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() {
+
+function MusicPageContent() {
   const { albums, isLoading, api, isConnected } = useNavidrome();
+  const { playAlbum, playTrack, shuffle, toggleShuffle, addToQueue } = useAudioPlayer();
+  const searchParams = useSearchParams();
   const [recentAlbums, setRecentAlbums] = useState<Album[]>([]);
   const [newestAlbums, setNewestAlbums] = useState<Album[]>([]);
   const [favoriteAlbums, setFavoriteAlbums] = useState<Album[]>([]);
   const [favoritesLoading, setFavoritesLoading] = useState(true);
+  const [shortcutProcessed, setShortcutProcessed] = useState(false);
+  const isMobile = useIsMobile();
 
   useEffect(() => {
     if (albums.length > 0) {
@@ -45,18 +56,113 @@ export default function MusicPage() {
     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';
-  }
+  // Handle PWA shortcuts
+  useEffect(() => {
+    const action = searchParams.get('action');
+    if (!action || shortcutProcessed || !api || !isConnected) 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
+              for (let i = 1; i < shuffledAlbums.length; i++) {
+                try {
+                  const albumSongs = await api.getAlbumSongs(shuffledAlbums[i].id);
+                  albumSongs.forEach(song => {
+                    addToQueue({
+                      id: song.id,
+                      name: song.title,
+                      url: api.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
+              for (let i = 1; i < shuffledFavorites.length; i++) {
+                try {
+                  const albumSongs = await api.getAlbumSongs(shuffledFavorites[i].id);
+                  albumSongs.forEach(song => {
+                    addToQueue({
+                      id: song.id,
+                      name: song.title,
+                      url: api.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);
+      }
+    };
+
+    // Delay to ensure data is loaded
+    const timeout = setTimeout(handleShortcuts, 1000);
+    return () => clearTimeout(timeout);
+  }, [searchParams, api, isConnected, recentAlbums, favoriteAlbums, shortcutProcessed, playAlbum, playTrack, shuffle, toggleShuffle, addToQueue]);
 
   // Try to get user name from navidrome context, fallback to 'user'
   let userName = '';
@@ -68,29 +174,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">
@@ -107,15 +199,22 @@ export default function MusicPage() {
               <div className="flex space-x-4 pb-4">
                 {isLoading ? (
                   // 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 +243,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}
@@ -181,14 +287,21 @@ export default function MusicPage() {
             {isLoading ? (
                   // 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 +317,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, 64) : 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, 64) : 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, 64) : 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

@@ -19,7 +19,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 +49,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}
@@ -115,7 +115,7 @@ const QueuePage: React.FC = () => {
                     onClick={() => skipToTrackInQueue(index)}
                   >
                     {/* Album Art with Play Indicator */}
-                    <div className="w-12 h-12 mr-4 flex-shrink-0 relative">
+                    <div className="w-12 h-12 mr-4 shrink-0 relative">
                       <Image
                         src={track.coverArt || '/default-user.jpg'}
                         alt={track.album}

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

@@ -101,7 +101,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">
@@ -136,19 +136,25 @@ export default function SearchPage() {
             )}
 
             {/* Artists */}
-            {searchResults.artists.length > 0 && (
+            {/* {searchResults.artists.length > 0 && (
               <div>
                 <h2 className="text-2xl font-bold mb-4">Artists</h2>
                 <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" />
+                        <ArtistIcon
+                          key={artist.id}
+                          artist={artist}
+                          className="shrink-0 overflow-hidden"
+                          size={190}
+                        />
                     ))}
                   </div>
                   <ScrollBar orientation="horizontal" />
                 </ScrollArea>
               </div>
-            )}
+            )} */}
+            {/* broken for now */}
 
             {/* Albums */}
             {searchResults.albums.length > 0 && (
@@ -160,7 +166,7 @@ export default function SearchPage() {
                       <AlbumArtwork 
                         key={album.id} 
                         album={album} 
-                        className="flex-shrink-0 w-48" 
+                        className="shrink-0 w-48" 
                         aspectRatio="square"
                         width={192}
                         height={192}
@@ -192,7 +198,7 @@ export default function SearchPage() {
                       </div>
                       
                       {/* Song Cover */}
-                      <div className="flex-shrink-0">                        <Image
+                      <div className="shrink-0">                        <Image
                           src={song.coverArt && api ? api.getCoverArtUrl(song.coverArt, 64) : '/default-user.jpg'}
                           alt={song.album}
                           width={48}

app/settings/page.tsx

@@ -10,38 +10,33 @@ 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 { useSidebarShortcuts, SidebarShortcutType } from '@/hooks/use-sidebar-shortcuts';
+import { SidebarCustomization } from '@/app/components/SidebarCustomization';
+import { SettingsManagement } from '@/app/components/SettingsManagement';
+import { CacheManagement } from '@/app/components/CacheManagement';
 import { FaServer, FaUser, FaLock, FaCheck, FaTimes, FaLastfm, FaCog } from 'react-icons/fa';
 import { Settings, ExternalLink } from 'lucide-react';
 
 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 [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 +45,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 +56,59 @@ 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);
 
-    // 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
+        }
+
+        // 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 +203,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 +216,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 +229,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 +240,27 @@ 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 handleLastFmAuth = () => {
@@ -234,7 +292,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 +316,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 +334,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 +442,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 +469,7 @@ const SettingsPage = () => {
                     </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" />
@@ -474,7 +547,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 +559,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 +695,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>
+
+                {/* Cache Management */}
+                <div className="break-inside-avoid mb-6">
+                  <CacheManagement />
+                </div>
+
+                <Card className="mb-6 break-inside-avoid py-5">
                     <CardHeader>
                         <CardTitle>Appearance</CardTitle>
                         <CardDescription>
@@ -619,6 +727,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 +739,29 @@ 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>Preview</CardTitle>
                         <CardDescription>
@@ -666,7 +789,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>
     );
 };

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/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 * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+
+function ResizablePanelGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
+  return (
+    <ResizablePrimitive.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 ResizablePrimitive.Panel>) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
+}
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean
+}) {
+  return (
+    <ResizablePrimitive.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>
+      )}
+    </ResizablePrimitive.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,
+}

components/ui/sidebar.tsx

@@ -0,0 +1,726 @@
+"use client"
+
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, VariantProps } from "class-variance-authority"
+import { PanelLeftIcon } from "lucide-react"
+
+import { useIsMobile } from "@/hooks/use-mobile"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Separator } from "@/components/ui/separator"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import { Skeleton } from "@/components/ui/skeleton"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state"
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+type SidebarContextProps = {
+  state: "expanded" | "collapsed"
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.")
+  }
+
+  return context
+}
+
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}) {
+  const isMobile = useIsMobile()
+  const [openMobile, setOpenMobile] = React.useState(false)
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen)
+  const open = openProp ?? _open
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === "function" ? value(open) : value
+      if (setOpenProp) {
+        setOpenProp(openState)
+      } else {
+        _setOpen(openState)
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+    },
+    [setOpenProp, open]
+  )
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
+  }, [isMobile, setOpen, setOpenMobile])
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault()
+        toggleSidebar()
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [toggleSidebar])
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? "expanded" : "collapsed"
+
+  const contextValue = React.useMemo<SidebarContextProps>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+  )
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <TooltipProvider delayDuration={0}>
+        <div
+          data-slot="sidebar-wrapper"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH,
+              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+              ...style,
+            } as React.CSSProperties
+          }
+          className={cn(
+            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </TooltipProvider>
+    </SidebarContext.Provider>
+  )
+}
+
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  side?: "left" | "right"
+  variant?: "sidebar" | "floating" | "inset"
+  collapsible?: "offcanvas" | "icon" | "none"
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+  if (collapsible === "none") {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    )
+  }
+
+  return (
+    <div
+      className="group peer text-sidebar-foreground hidden md:block"
+      data-state={state}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        data-slot="sidebar-gap"
+        className={cn(
+          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+        )}
+      />
+      <div
+        data-slot="sidebar-container"
+        className={cn(
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+          side === "left"
+            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+          // Adjust the padding for floating and inset variants.
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+          className
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon"
+      className={cn("size-7", className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <PanelLeftIcon />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        "bg-background relative flex w-full flex-1 flex-col",
+        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn("bg-background h-8 w-full shadow-none", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn("bg-sidebar-border mx-2 w-auto", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "div"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-label"
+      data-sidebar="group-label"
+      className={cn(
+        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-action"
+      data-sidebar="group-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn("w-full text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn("group/menu-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+  isActive?: boolean
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>
+} & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const Comp = asChild ? Slot : "button"
+  const { isMobile, state } = useSidebar()
+
+  const button = (
+    <Comp
+      data-slot="sidebar-menu-button"
+      data-sidebar="menu-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+      {...props}
+    />
+  )
+
+  if (!tooltip) {
+    return button
+  }
+
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip,
+    }
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== "collapsed" || isMobile}
+        {...tooltip}
+      />
+    </Tooltip>
+  )
+}
+
+function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+  showOnHover?: boolean
+}) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-action"
+      data-sidebar="menu-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuBadge({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
+        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showIcon?: boolean
+}) {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  }, [])
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubItem({
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn("group/menu-sub-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubButton({
+  asChild = false,
+  size = "md",
+  isActive = false,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+  size?: "sm" | "md"
+  isActive?: boolean
+}) {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-sub-button"
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+}

components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

components/ui/slider.tsx

@@ -0,0 +1,63 @@
+"use client"
+
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "@/lib/utils"
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  const _values = React.useMemo(
+    () =>
+      Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+          ? defaultValue
+          : [min, max],
+    [value, defaultValue, min, max]
+  )
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className={cn(
+          "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+        )}
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className={cn(
+            "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+          )}
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }

components/ui/sonner.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

components/ui/switch.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitive from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

components/ui/table.tsx

@@ -0,0 +1,116 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

components/ui/tabs.tsx

@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
       className
     )}
     {...props}
@@ -44,7 +44,7 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "mt-2 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       className
     )}
     {...props}

components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground 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 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

components/ui/toast.tsx

@@ -16,7 +16,7 @@ const ToastViewport = React.forwardRef<
   <ToastPrimitives.Viewport
     ref={ref}
     className={cn(
-      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      "fixed top-0 z-100 flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
       className
     )}
     {...props}
@@ -25,7 +25,7 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 
 const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
   {
     variants: {
       variant: {
@@ -62,7 +62,7 @@ const ToastAction = React.forwardRef<
   <ToastPrimitives.Action
     ref={ref}
     className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-hidden focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 hover:group-[.destructive]:border-destructive/30 hover:group-[.destructive]:bg-destructive hover:group-[.destructive]:text-destructive-foreground focus:group-[.destructive]:ring-destructive",
       className
     )}
     {...props}
@@ -77,7 +77,7 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      "absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      "absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-hidden focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 hover:group-[.destructive]:text-red-50 focus:group-[.destructive]:ring-red-400 focus:group-[.destructive]:ring-offset-red-600",
       className
     )}
     toast-close=""

components/ui/toggle-group.tsx

@@ -0,0 +1,73 @@
+"use client"
+
+import * as React from "react"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import { type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "@/components/ui/toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: "default",
+  variant: "default",
+})
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      className={cn(
+        "group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
+        className
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  )
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+  VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        "min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }

components/ui/toggle.tsx

@@ -0,0 +1,47 @@
+"use client"
+
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }

components/ui/tooltip.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

docker-compose.example.yml

@@ -3,18 +3,18 @@ version: '3.8'
 services:
   mice:
     container_name: mice-public
-    image: ghcr.io/sillyangel/mice:latest
+    image: sillyangel/mice:dev-latest
     ports:
       - "40625:40625"
     environment:
       # Navidrome Server Configuration
-      - NAVIDROME_URL=https://navi.sillyangel.dev
-      - NAVIDROME_USERNAME=kryptonite
-      - NAVIDROME_PASSWORD=kryptonite
+      # - NAVIDROME_URL=http://navidrome:4533
+      # - NAVIDROME_USERNAME=user
+      # - NAVIDROME_PASSWORD=password
 
-      # PostHog Analytics
-      - POSTHOG_KEY=phc_Sa39J7754MwaHrPxYiWnWETVSD3g1cU4nOplMGczRE9
-      - POSTHOG_HOST=https://us.i.posthog.com
+      # # PostHog Analytics
+      # - POSTHOG_KEY=phc_Sa39J7754MwaHrPxYiWnWETVSD3g1cU4nOplMGczRE9
+      # - POSTHOG_HOST=https://us.i.posthog.com
 
       # Application Port
       - PORT=40625
@@ -27,3 +27,24 @@ services:
       start_period: 40s
     
     restart: unless-stopped
+
+  navidrome:
+    container_name: navidrome
+    image: deluan/navidrome:latest
+    ports:
+      - "4533:4533"
+    environment:
+      - ND_SCANINTERVAL=1m
+      - ND_LOGLEVEL=info
+      - ND_SESSIONTIMEOUT=24h
+      - ND_PORT=4533
+      # - ND_BASEURL=/navidrome
+      # - ND_MUSICFOLDER=/music
+    volumes:
+      - navidrome_data:/data
+      - navidrome_music:/music
+    restart: unless-stopped
+
+volumes:
+  navidrome_data:
+  navidrome_music:

docker-compose.yml

@@ -2,9 +2,10 @@ version: '3.8'
 
 services:
   mice:
-    image: ghcr.io/sillyangel/mice:latest
+    container_name: mice-public
+    image: sillyangel/mice:dev-latest
     ports:
-      - "${HOST_PORT:-3000}:${PORT:-3000}"
+      - "40625:40625"
     environment:
       # Navidrome Server Configuration
       # These will be injected at runtime using the entrypoint script
@@ -13,18 +14,35 @@ services:
       - NEXT_PUBLIC_NAVIDROME_PASSWORD=${NAVIDROME_PASSWORD:-}
       
       # PostHog Analytics (optional)
-      - NEXT_PUBLIC_POSTHOG_KEY=${POSTHOG_KEY:-}
-      - NEXT_PUBLIC_POSTHOG_HOST=${POSTHOG_HOST:-}
-      
+      # - NEXT_PUBLIC_POSTHOG_KEY=phc_Sa39J7754MwaHrPxYiWnWETVSD3g1cU4nOplMGczRE9
+      # - NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
+
       # Application Port
-      - PORT=${PORT:-3000}
+      - PORT=40625
     
-    # Optional: Add a health check
     healthcheck:
-      test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost:${PORT:-3000}"]
+      test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost:40625"]
       interval: 30s
       timeout: 10s
       retries: 3
       start_period: 40s
     
     restart: unless-stopped
+
+  navidrome:
+    container_name: navidrome
+    image: deluan/navidrome:latest
+    ports:
+      - "4533:4533"
+    environment:
+      - ND_SCANINTERVAL=1m
+      - ND_LOGLEVEL=info
+      - ND_SESSIONTIMEOUT=24h
+      - ND_PORT=4533
+      # - ND_BASEURL=/navidrome
+      # - ND_MUSICFOLDER=/music
+    volumes:
+      - navidrome_data:/data
+      - navidrome_music:/music
+    restart: unless-stopped
+

entrypoint.sh

@@ -15,6 +15,3 @@ printenv | grep NEXT_PUBLIC_ | while read -r line ; do
 done
 
 echo "✅ Environment variable replacement complete"
-
-# Execute the container's main process (CMD in Dockerfile)
-exec "$@"