From c1db3a8aae3d2585fbe9f578d0b300c6ad797cf1 Mon Sep 17 00:00:00 2001
From: Val Alexander <bunsthedev@gmail.com>
Date: Fri, 27 Mar 2026 16:25:49 -0500
Subject: [PATCH] Add Spotify player drawer to the web UI

- Add a persisted Spotify player store with preset playlists and custom links
- Render the player in ChatView and expose it from the sidebar
---
 apps/web/src/components/ChatView.tsx      |   3 +
 apps/web/src/components/Sidebar.tsx       |   4 +
 apps/web/src/components/SpotifyPlayer.tsx | 219 ++++++++++++++++++++++
 apps/web/src/spotifyPlayerStore.ts        | 168 +++++++++++++++++
 4 files changed, 394 insertions(+)
 create mode 100644 apps/web/src/components/SpotifyPlayer.tsx
 create mode 100644 apps/web/src/spotifyPlayerStore.ts

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index f9fd68e37..924441a8b 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -90,6 +90,7 @@ import BranchToolbar from "./BranchToolbar";
 import { resolveShortcutCommand, shortcutLabelForCommand } from "../keybindings";
 import PlanSidebar from "./PlanSidebar";
 import ThreadTerminalDrawer from "./ThreadTerminalDrawer";
+import { SpotifyPlayerDrawer } from "./SpotifyPlayer";
 import {
   BotIcon,
   ChevronDownIcon,
@@ -4429,6 +4430,8 @@ export default function ChatView({ threadId }: ChatViewProps) {
         );
       })()}
 
+      <SpotifyPlayerDrawer />
+
       {expandedImage && expandedImageItem && (
         <div
           className="fixed inset-0 z-50 flex items-center justify-center bg-black/75 px-4 py-6 [-webkit-app-region:no-drag]"
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 7a92a7c71..eb9e03ee4 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -11,6 +11,7 @@ import {
   TerminalIcon,
   TriangleAlertIcon,
 } from "lucide-react";
+import { SpotifyToggleButton } from "./SpotifyPlayer";
 import { autoAnimate } from "@formkit/auto-animate";
 import { useCallback, useEffect, useMemo, useRef, useState, type MouseEvent } from "react";
 import {
@@ -1882,6 +1883,9 @@ export default function Sidebar() {
       <SidebarSeparator />
       <SidebarFooter className="p-2">
         <SidebarMenu>
+          <SidebarMenuItem>
+            <SpotifyToggleButton />
+          </SidebarMenuItem>
           <SidebarMenuItem>
             {isOnSettings ? (
               <SidebarMenuButton
diff --git a/apps/web/src/components/SpotifyPlayer.tsx b/apps/web/src/components/SpotifyPlayer.tsx
new file mode 100644
index 000000000..9d284f4c0
--- /dev/null
+++ b/apps/web/src/components/SpotifyPlayer.tsx
@@ -0,0 +1,219 @@
+import { ChevronDownIcon, ChevronUpIcon, ListMusicIcon, Music2Icon, XIcon } from "lucide-react";
+import { useCallback, useMemo, useRef, useState } from "react";
+import {
+  buildEmbedUrl,
+  DEFAULT_PLAYLISTS,
+  parseSpotifyUri,
+  useSpotifyPlayerStore,
+} from "../spotifyPlayerStore";
+import { cn } from "~/lib/utils";
+
+// ---------------------------------------------------------------------------
+// Compact mini-bar shown at the bottom of the sidebar
+// ---------------------------------------------------------------------------
+export function SpotifyToggleButton() {
+  const { isOpen, toggle, selectedPlaylistUri } = useSpotifyPlayerStore();
+  const activePlaylist = DEFAULT_PLAYLISTS.find((p) => p.uri === selectedPlaylistUri);
+
+  return (
+    <button
+      type="button"
+      onClick={toggle}
+      className={cn(
+        "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-xs transition-colors",
+        isOpen
+          ? "bg-emerald-500/10 text-emerald-400 hover:bg-emerald-500/20"
+          : "text-muted-foreground/70 hover:bg-accent hover:text-foreground",
+      )}
+    >
+      <Music2Icon className="size-3.5" />
+      <span className="truncate">
+        {isOpen && activePlaylist ? activePlaylist.name : "Spotify"}
+      </span>
+      {isOpen && (
+        <span className="ml-auto flex size-1.5 rounded-full bg-emerald-400 animate-pulse" />
+      )}
+    </button>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Categories for the playlist picker
+// ---------------------------------------------------------------------------
+const CATEGORIES = [...new Set(DEFAULT_PLAYLISTS.map((p) => p.category))];
+
+// ---------------------------------------------------------------------------
+// Main Spotify Player Drawer — rendered at the bottom of ChatView
+// ---------------------------------------------------------------------------
+export function SpotifyPlayerDrawer() {
+  const { isOpen, selectedPlaylistUri, customUri, setOpen, selectPlaylist, setCustomUri } =
+    useSpotifyPlayerStore();
+  const [expanded, setExpanded] = useState(false);
+  const [customInput, setCustomInput] = useState("");
+  const [activeCategory, setActiveCategory] = useState<string>(CATEGORIES[0] ?? "Focus");
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const embedUrl = useMemo(() => {
+    // Custom URI takes priority
+    if (customUri) {
+      const parsed = parseSpotifyUri(customUri);
+      if (parsed) return buildEmbedUrl(parsed.type, parsed.id);
+    }
+    // Selected preset playlist
+    if (selectedPlaylistUri) {
+      return buildEmbedUrl("playlist", selectedPlaylistUri);
+    }
+    return null;
+  }, [customUri, selectedPlaylistUri]);
+
+  const handleCustomSubmit = useCallback(() => {
+    const trimmed = customInput.trim();
+    if (!trimmed) return;
+    const parsed = parseSpotifyUri(trimmed);
+    if (parsed) {
+      setCustomUri(trimmed);
+      setCustomInput("");
+      setExpanded(false);
+    }
+  }, [customInput, setCustomUri]);
+
+  if (!isOpen) return null;
+
+  const filteredPlaylists = DEFAULT_PLAYLISTS.filter((p) => p.category === activeCategory);
+
+  return (
+    <div className="border-t border-border/80 bg-background">
+      {/* Header bar */}
+      <div className="flex items-center gap-2 px-3 py-1.5">
+        <Music2Icon className="size-3.5 text-emerald-400" />
+        <span className="text-xs font-medium text-foreground/80">Spotify</span>
+
+        <button
+          type="button"
+          onClick={() => setExpanded(!expanded)}
+          className="ml-auto rounded p-0.5 text-muted-foreground/60 transition-colors hover:bg-accent hover:text-foreground"
+          aria-label={expanded ? "Collapse playlist picker" : "Expand playlist picker"}
+        >
+          {expanded ? (
+            <ChevronDownIcon className="size-3.5" />
+          ) : (
+            <ChevronUpIcon className="size-3.5" />
+          )}
+        </button>
+
+        <button
+          type="button"
+          onClick={() => setOpen(false)}
+          className="rounded p-0.5 text-muted-foreground/60 transition-colors hover:bg-accent hover:text-foreground"
+          aria-label="Close Spotify player"
+        >
+          <XIcon className="size-3.5" />
+        </button>
+      </div>
+
+      {/* Expanded playlist picker */}
+      {expanded && (
+        <div className="border-t border-border/40 px-3 py-2">
+          {/* Category tabs */}
+          <div className="mb-2 flex gap-1 overflow-x-auto">
+            {CATEGORIES.map((cat) => (
+              <button
+                key={cat}
+                type="button"
+                onClick={() => setActiveCategory(cat)}
+                className={cn(
+                  "shrink-0 rounded-full px-2.5 py-0.5 text-[11px] font-medium transition-colors",
+                  activeCategory === cat
+                    ? "bg-emerald-500/20 text-emerald-400"
+                    : "text-muted-foreground/60 hover:bg-accent hover:text-foreground",
+                )}
+              >
+                {cat}
+              </button>
+            ))}
+          </div>
+
+          {/* Playlist grid */}
+          <div className="grid max-h-32 grid-cols-2 gap-1 overflow-y-auto pr-1">
+            {filteredPlaylists.map((playlist) => (
+              <button
+                key={playlist.uri}
+                type="button"
+                onClick={() => {
+                  selectPlaylist(playlist.uri);
+                  setExpanded(false);
+                }}
+                className={cn(
+                  "flex items-center gap-1.5 rounded-md px-2 py-1 text-left text-[11px] transition-colors",
+                  selectedPlaylistUri === playlist.uri && !customUri
+                    ? "bg-emerald-500/15 text-emerald-400"
+                    : "text-muted-foreground/70 hover:bg-accent hover:text-foreground",
+                )}
+              >
+                <ListMusicIcon className="size-3 shrink-0" />
+                <span className="truncate">{playlist.name}</span>
+              </button>
+            ))}
+          </div>
+
+          {/* Custom URL input */}
+          <div className="mt-2 flex gap-1.5">
+            <input
+              ref={inputRef}
+              type="text"
+              value={customInput}
+              onChange={(e) => setCustomInput(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  handleCustomSubmit();
+                }
+              }}
+              placeholder="Paste Spotify link..."
+              className="flex-1 rounded-md border border-border/60 bg-background px-2 py-1 text-[11px] text-foreground placeholder:text-muted-foreground/40 focus:border-emerald-500/50 focus:outline-none"
+            />
+            <button
+              type="button"
+              onClick={handleCustomSubmit}
+              disabled={!customInput.trim()}
+              className="shrink-0 rounded-md bg-emerald-500/20 px-2 py-1 text-[11px] font-medium text-emerald-400 transition-colors hover:bg-emerald-500/30 disabled:opacity-40"
+            >
+              Play
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Spotify embed iframe */}
+      {embedUrl ? (
+        <div className="px-2 pb-2">
+          <iframe
+            title="Spotify Player"
+            src={embedUrl}
+            width="100%"
+            height={expanded ? "80" : "80"}
+            allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
+            // eslint-disable-next-line react/iframe-missing-sandbox -- Spotify embed requires both allow-scripts and allow-same-origin to function
+            sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
+            loading="lazy"
+            className="rounded-xl border-0"
+          />
+        </div>
+      ) : (
+        <div className="flex flex-col items-center gap-2 px-3 pb-3 pt-1">
+          <p className="text-[11px] text-muted-foreground/50">
+            Pick a playlist above or paste a Spotify link
+          </p>
+          <button
+            type="button"
+            onClick={() => setExpanded(true)}
+            className="rounded-md bg-emerald-500/15 px-3 py-1.5 text-xs font-medium text-emerald-400 transition-colors hover:bg-emerald-500/25"
+          >
+            <ListMusicIcon className="mr-1.5 inline size-3.5" />
+            Browse Playlists
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/src/spotifyPlayerStore.ts b/apps/web/src/spotifyPlayerStore.ts
new file mode 100644
index 000000000..a7a698e4c
--- /dev/null
+++ b/apps/web/src/spotifyPlayerStore.ts
@@ -0,0 +1,168 @@
+import { create } from "zustand";
+
+export interface SpotifyPlaylist {
+  name: string;
+  uri: string;
+  category: string;
+}
+
+/**
+ * Curated default playlists — popular Spotify playlists for vibe coding.
+ * URI format: spotify:playlist:<id>  →  embed URL: https://open.spotify.com/embed/playlist/<id>
+ */
+export const DEFAULT_PLAYLISTS: SpotifyPlaylist[] = [
+  // Lo-Fi & Focus
+  { name: "lofi beats", uri: "0vvXsWCC9xrXsKd4FyS8kM", category: "Focus" },
+  { name: "Deep Focus", uri: "37i9dQZF1DWZeKCadgRdKQ", category: "Focus" },
+  { name: "Chill Lofi Study Beats", uri: "37i9dQZF1DXa2SPUyWl8Y5", category: "Focus" },
+  { name: "Peaceful Piano", uri: "37i9dQZF1DX4sWSpwq3LiO", category: "Focus" },
+  { name: "Brain Food", uri: "37i9dQZF1DWXLeA8Omikj7", category: "Focus" },
+
+  // Coding & Electronic
+  { name: "Electronic Concentration", uri: "37i9dQZF1DX0wMD4IoQ5aJ", category: "Electronic" },
+  { name: "Synthwave from Space", uri: "37i9dQZF1DXaDnUWMp1loI", category: "Electronic" },
+  { name: "Atmospheric Calm", uri: "37i9dQZF1DX3SP1OXMnRa8", category: "Electronic" },
+  { name: "Ambient Relaxation", uri: "37i9dQZF1DX3Ogo9pFvBkY", category: "Electronic" },
+
+  // Chill Vibes
+  { name: "Jazz Vibes", uri: "37i9dQZF1DX0SM0LYsmbMT", category: "Vibes" },
+  { name: "Chill Hits", uri: "37i9dQZF1DX0MLFaUdXnjA", category: "Vibes" },
+  { name: "Soft Pop Hits", uri: "37i9dQZF1DWTwnEm1IYyoj", category: "Vibes" },
+  { name: "Indie Folk & Chill", uri: "37i9dQZF1DWVGXoIRWJPhl", category: "Vibes" },
+
+  // Energy & Motivation
+  { name: "Beast Mode", uri: "37i9dQZF1DX76Wlfdnj7AP", category: "Energy" },
+  { name: "Power Gaming", uri: "37i9dQZF1DWTyiBJ6yEqeu", category: "Energy" },
+  { name: "Motivation Mix", uri: "37i9dQZF1DXe6bgV3TmZOL", category: "Energy" },
+
+  // Classical & Instrumental
+  { name: "Classical Focus", uri: "37i9dQZF1DWV0gynK7G6pD", category: "Classical" },
+  { name: "Cinematic Chill", uri: "37i9dQZF1DX8Sz1gsYZdwj", category: "Classical" },
+];
+
+interface PersistedSpotifyState {
+  isOpen: boolean;
+  selectedPlaylistUri: string | null;
+  customUri: string | null;
+  volume: number;
+}
+
+interface SpotifyPlayerStore extends PersistedSpotifyState {
+  toggle: () => void;
+  setOpen: (open: boolean) => void;
+  selectPlaylist: (uri: string) => void;
+  setCustomUri: (uri: string | null) => void;
+  setVolume: (volume: number) => void;
+}
+
+const STORAGE_KEY = "okcode:spotify-player:v1";
+
+function readPersistedState(): PersistedSpotifyState {
+  const defaults: PersistedSpotifyState = {
+    isOpen: false,
+    selectedPlaylistUri: null,
+    customUri: null,
+    volume: 80,
+  };
+
+  if (typeof window === "undefined") return defaults;
+
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY);
+    if (!raw) return defaults;
+
+    const parsed = JSON.parse(raw) as Partial<PersistedSpotifyState>;
+    return {
+      isOpen: typeof parsed.isOpen === "boolean" ? parsed.isOpen : false,
+      selectedPlaylistUri:
+        typeof parsed.selectedPlaylistUri === "string" ? parsed.selectedPlaylistUri : null,
+      customUri: typeof parsed.customUri === "string" ? parsed.customUri : null,
+      volume:
+        typeof parsed.volume === "number" && Number.isFinite(parsed.volume)
+          ? Math.max(0, Math.min(100, parsed.volume))
+          : 80,
+    };
+  } catch {
+    return defaults;
+  }
+}
+
+function persistState(state: PersistedSpotifyState): void {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+  } catch {
+    // Ignore storage errors.
+  }
+}
+
+const initialState = readPersistedState();
+
+export const useSpotifyPlayerStore = create<SpotifyPlayerStore>((set, get) => ({
+  ...initialState,
+
+  toggle: () => {
+    const next = !get().isOpen;
+    set({ isOpen: next });
+    persistState({ ...get(), isOpen: next });
+  },
+
+  setOpen: (open) => {
+    set({ isOpen: open });
+    persistState({ ...get(), isOpen: open });
+  },
+
+  selectPlaylist: (uri) => {
+    set({ selectedPlaylistUri: uri, customUri: null });
+    persistState({ ...get(), selectedPlaylistUri: uri, customUri: null });
+  },
+
+  setCustomUri: (uri) => {
+    set({ customUri: uri });
+    persistState({ ...get(), customUri: uri });
+  },
+
+  setVolume: (volume) => {
+    const clamped = Math.max(0, Math.min(100, volume));
+    set({ volume: clamped });
+    persistState({ ...get(), volume: clamped });
+  },
+}));
+
+/**
+ * Parse a Spotify URL or URI into an embed-ready path.
+ * Supports:
+ *   - https://open.spotify.com/playlist/abc123
+ *   - https://open.spotify.com/album/abc123
+ *   - https://open.spotify.com/track/abc123
+ *   - spotify:playlist:abc123
+ *   - Raw playlist ID (alphanumeric, 22 chars)
+ */
+export function parseSpotifyUri(input: string): { type: string; id: string } | null {
+  const trimmed = input.trim();
+
+  // URL format
+  const urlMatch = trimmed.match(
+    /open\.spotify\.com\/(playlist|album|track|episode|show)\/([a-zA-Z0-9]+)/,
+  );
+  if (urlMatch && urlMatch[1] && urlMatch[2]) {
+    return { type: urlMatch[1], id: urlMatch[2] };
+  }
+
+  // URI format
+  const uriMatch = trimmed.match(/^spotify:(playlist|album|track|episode|show):([a-zA-Z0-9]+)$/);
+  if (uriMatch && uriMatch[1] && uriMatch[2]) {
+    return { type: uriMatch[1], id: uriMatch[2] };
+  }
+
+  // Raw playlist ID (22 alphanumeric chars)
+  if (/^[a-zA-Z0-9]{22}$/.test(trimmed)) {
+    return { type: "playlist", id: trimmed };
+  }
+
+  return null;
+}
+
+export function buildEmbedUrl(type: string, id: string): string {
+  return `https://open.spotify.com/embed/${type}/${id}?utm_source=generator&theme=0`;
+}