bloby-bot 0.37.1 → 0.39.1

package/workspace/client/src/components/StickyNotes/StickyNotesSettingsPage.tsx

@@ -0,0 +1,427 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { Trash2, Eye, EyeOff, NotebookPen, X, Check } from 'lucide-react';
+
+// Adjust this if your workspace proxies API calls differently.
+// Default Bloby workspaces: '/app/api'. Direct backend: '/api'.
+const API_BASE = '/app/api';
+
+interface StickyNote {
+  id: number;
+  content: string;
+  color: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  visible: number;
+  created_at: string;
+}
+
+const PASTEL_COLORS = ['#E6C97A', '#D4A0B0', '#8BBD9F', '#8BAFC4', '#B0A0C8', '#D4AD8A'];
+
+export default function StickyNotesSettingsPage() {
+  const [notes, setNotes] = useState<StickyNote[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [defaultColor, setDefaultColor] = useState('#E6C97A');
+  const [allVisible, setAllVisible] = useState(true);
+
+  const fetchNotes = useCallback(async () => {
+    try {
+      const res = await fetch(`${API_BASE}/sticky-notes`);
+      if (!res.ok) return;
+      const data: StickyNote[] = await res.json();
+      setNotes(data);
+      setAllVisible(data.length === 0 || data.some((n) => n.visible === 1));
+    } catch {
+      // silent
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchNotes();
+  }, [fetchNotes]);
+
+  const deleteNote = useCallback(async (id: number) => {
+    try {
+      const res = await fetch(`${API_BASE}/sticky-notes/${id}`, { method: 'DELETE' });
+      if (!res.ok) return;
+      setNotes((prev) => prev.filter((n) => n.id !== id));
+    } catch {
+      // silent
+    }
+  }, []);
+
+  const deleteAll = useCallback(async () => {
+    try {
+      const res = await fetch(`${API_BASE}/sticky-notes`, { method: 'DELETE' });
+      if (!res.ok) return;
+      setNotes([]);
+    } catch {
+      // silent
+    }
+  }, []);
+
+  const toggleVisibility = useCallback(async () => {
+    try {
+      const res = await fetch(`${API_BASE}/sticky-notes/toggle-visibility`, { method: 'POST' });
+      if (!res.ok) return;
+      const data = await res.json();
+      setNotes(data.notes);
+      setAllVisible(data.visible === 1);
+    } catch {
+      // silent
+    }
+  }, []);
+
+  const createNote = useCallback(async () => {
+    const x = 60 + Math.floor(Math.random() * 300);
+    const y = 60 + Math.floor(Math.random() * 200);
+    try {
+      const res = await fetch(`${API_BASE}/sticky-notes`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ content: '', color: defaultColor, x, y, width: 200, height: 180, visible: 1 }),
+      });
+      if (!res.ok) return;
+      const created = await res.json();
+      await fetchNotes();
+      // Auto-open the new note in the modal
+      const newNote: StickyNote = {
+        id: created.id,
+        content: '',
+        color: defaultColor,
+        x, y,
+        width: 200,
+        height: 180,
+        visible: 1,
+        created_at: new Date().toISOString(),
+      };
+      setEditingNote(newNote);
+      setEditContent('');
+      setEditColor(defaultColor);
+    } catch {
+      // silent
+    }
+  }, [defaultColor, fetchNotes]);
+
+  const updateColor = useCallback(async (id: number, color: string) => {
+    try {
+      await fetch(`${API_BASE}/sticky-notes/${id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ color }),
+      });
+      setNotes((prev) => prev.map((n) => (n.id === id ? { ...n, color } : n)));
+    } catch {
+      // silent
+    }
+  }, []);
+
+  const updateContent = useCallback(async (id: number, content: string) => {
+    try {
+      await fetch(`${API_BASE}/sticky-notes/${id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ content }),
+      });
+      setNotes((prev) => prev.map((n) => (n.id === id ? { ...n, content } : n)));
+    } catch {
+      // silent
+    }
+  }, []);
+
+  // Delete All confirmation
+  const [confirmDeleteAll, setConfirmDeleteAll] = useState(false);
+
+  // Modal state for editing a note
+  const [editingNote, setEditingNote] = useState<StickyNote | null>(null);
+  const [editContent, setEditContent] = useState('');
+  const [editColor, setEditColor] = useState('');
+  const contentRef = useRef(editContent);
+  contentRef.current = editContent;
+
+  const openModal = useCallback((note: StickyNote) => {
+    setEditingNote(note);
+    setEditContent(note.content);
+    setEditColor(note.color);
+  }, []);
+
+  const closeModal = useCallback(() => {
+    if (editingNote) {
+      const trimmed = contentRef.current;
+      if (trimmed !== editingNote.content) {
+        updateContent(editingNote.id, trimmed);
+      }
+    }
+    setEditingNote(null);
+  }, [editingNote, updateContent]);
+
+  const changeModalColor = useCallback((color: string) => {
+    if (!editingNote) return;
+    setEditColor(color);
+    updateColor(editingNote.id, color);
+    setEditingNote((prev) => prev ? { ...prev, color } : null);
+  }, [editingNote, updateColor]);
+
+  const deleteAndClose = useCallback(() => {
+    if (!editingNote) return;
+    deleteNote(editingNote.id);
+    setEditingNote(null);
+  }, [editingNote, deleteNote]);
+
+  return (
+    <div className="flex flex-col min-h-full px-4 sm:px-6 md:px-20 pt-10 sm:pt-16 pb-32 max-w-5xl mx-auto w-full">
+      {/* Header */}
+      <div className="flex items-start justify-between mb-8 gap-4">
+        <div className="flex items-start gap-4">
+          <div className="h-12 w-12 rounded-2xl flex items-center justify-center bg-gradient-to-br from-amber-300/40 to-yellow-500/20 border border-white/10 backdrop-blur-xl shrink-0">
+            <NotebookPen className="h-5 w-5 text-amber-200" />
+          </div>
+          <div>
+            <h1 className="text-2xl sm:text-3xl font-semibold text-white tracking-tight">Sticky Notes</h1>
+            <p className="text-sm text-white/60 mt-1 hidden md:block">
+              Manage your sticky notes. Drag them around on the dashboard.
+            </p>
+            <p className="text-sm text-white/60 mt-1 md:hidden">Tap a note to edit it.</p>
+          </div>
+        </div>
+        <div className="flex items-center gap-2 shrink-0">
+          <button
+            onClick={toggleVisibility}
+            className="hidden md:flex items-center gap-1.5 px-3 py-2 rounded-full text-xs font-semibold bg-white/5 border border-white/10 hover:bg-white/10 text-white/80 transition backdrop-blur-md"
+          >
+            {allVisible ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
+            {allVisible ? 'Hide All' : 'Show All'}
+          </button>
+          <button
+            onClick={createNote}
+            className="flex items-center gap-1.5 px-4 py-2 rounded-full text-xs font-semibold bg-gradient-to-br from-amber-400 to-yellow-500 text-zinc-900 shadow-lg shadow-amber-500/20 hover:brightness-110 transition"
+          >
+            <NotebookPen className="h-3.5 w-3.5" />
+            New Note
+          </button>
+        </div>
+      </div>
+
+      {/* Default Color */}
+      <div className="glass-card glass-card-md p-5 mb-6">
+        <div className="relative">
+          <label className="block text-[10px] font-semibold text-white/60 uppercase tracking-wider mb-3">
+            Default Color for New Notes
+          </label>
+          <div className="flex gap-2.5 flex-wrap">
+            {PASTEL_COLORS.map((c) => (
+              <button
+                key={c}
+                onClick={() => setDefaultColor(c)}
+                className={`h-9 w-9 rounded-full transition-all border border-white/15 ${
+                  defaultColor === c ? 'ring-2 ring-white/80 ring-offset-2 ring-offset-transparent scale-110' : 'hover:scale-105'
+                }`}
+                style={{ backgroundColor: c }}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Loading */}
+      {loading && (
+        <div className="flex-1 flex items-center justify-center">
+          <div className="h-6 w-6 border-2 border-white/10 border-t-white/50 rounded-full animate-spin" />
+        </div>
+      )}
+
+      {/* Empty State */}
+      {!loading && notes.length === 0 && (
+        <div className="glass-card p-12 flex flex-col items-center justify-center text-center">
+          <div className="relative">
+            <div className="h-14 w-14 rounded-2xl flex items-center justify-center bg-gradient-to-br from-amber-300/40 to-yellow-500/20 border border-white/10 backdrop-blur-xl mb-4 mx-auto">
+              <NotebookPen className="h-6 w-6 text-amber-200" />
+            </div>
+            <p className="text-base font-semibold text-white mb-1">No sticky notes yet</p>
+            <p className="text-sm text-white/60 mb-1 hidden md:block">
+              Click the + button on the dashboard to create one
+            </p>
+            <p className="text-sm text-white/60 mb-4 md:hidden">Tap the button below to create your first note</p>
+            <button
+              onClick={createNote}
+              className="mt-4 inline-flex items-center gap-1.5 px-4 py-2 rounded-full text-xs font-semibold bg-gradient-to-br from-amber-400 to-yellow-500 text-zinc-900 shadow-lg shadow-amber-500/20 hover:brightness-110 transition"
+            >
+              <NotebookPen className="h-3.5 w-3.5" />
+              Create Note
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Notes List */}
+      {!loading && notes.length > 0 && (
+        <>
+          <div className="glass-card glass-card-md overflow-hidden">
+            <div className="relative">
+              {notes.map((note, idx) => (
+                <div
+                  key={note.id}
+                  className={`group cursor-pointer ${idx > 0 ? 'border-t border-white/[0.06]' : ''}`}
+                  onClick={() => openModal(note)}
+                >
+                  {/* Desktop row */}
+                  <div className="hidden md:flex items-center gap-3 p-3 hover:bg-white/[0.04] transition">
+                    <div
+                      className="h-8 w-8 rounded-lg shrink-0 border border-white/15"
+                      style={{ backgroundColor: note.color }}
+                    />
+                    <div className="flex-1 min-w-0">
+                      <p
+                        className="text-sm text-white truncate"
+                        style={{ fontFamily: "'Caveat', 'Segoe Print', 'Comic Sans MS', cursive" }}
+                      >
+                        {note.content || 'Empty note'}
+                      </p>
+                      <p className="text-[10px] text-white/40 mt-0.5">
+                        Position: ({note.x}, {note.y}) &middot; {note.visible ? 'Visible' : 'Hidden'}
+                      </p>
+                    </div>
+                    <button
+                      onClick={(e) => { e.stopPropagation(); deleteNote(note.id); }}
+                      className="opacity-0 group-hover:opacity-100 h-8 w-8 rounded-full flex items-center justify-center bg-white/5 border border-white/10 hover:bg-rose-500/20 hover:border-rose-300/30 transition shrink-0 text-white/60 hover:text-rose-200"
+                    >
+                      <Trash2 className="h-3.5 w-3.5" />
+                    </button>
+                  </div>
+
+                  {/* Mobile row: colored sticky-note style */}
+                  <div className="md:hidden p-2">
+                    <div
+                      className="rounded-xl p-3 flex items-center gap-3 active:scale-[0.98] transition-transform shadow-md"
+                      style={{ backgroundColor: note.color }}
+                    >
+                      <div className="flex-1 min-w-0">
+                        <p
+                          className="truncate"
+                          style={{
+                            color: '#1a1a1a',
+                            fontFamily: "'Caveat', 'Segoe Print', 'Comic Sans MS', cursive",
+                            fontSize: 'clamp(1rem, 4vw, 1.15rem)',
+                          }}
+                        >
+                          {note.content || 'Empty note'}
+                        </p>
+                      </div>
+                      <button
+                        onClick={(e) => { e.stopPropagation(); deleteNote(note.id); }}
+                        className="p-1.5 rounded-md transition-all shrink-0"
+                      >
+                        <Trash2 className="h-4 w-4" style={{ color: 'rgba(127, 29, 29, 0.5)' }} />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Delete All */}
+          <div className="mt-6 pt-4 border-t border-white/[0.06]">
+            <div className="flex items-center gap-2">
+              <button
+                onClick={() => setConfirmDeleteAll(true)}
+                className={`flex items-center gap-1.5 px-3 py-2 rounded-full text-xs font-semibold text-rose-200 bg-rose-500/15 border border-rose-200/20 hover:bg-rose-500/25 transition ${confirmDeleteAll ? 'pointer-events-none' : ''}`}
+              >
+                <Trash2 className="h-3.5 w-3.5" />
+                Delete All Notes
+              </button>
+              {confirmDeleteAll && (
+                <div className="flex items-center gap-1.5 text-xs text-white/70 animate-in fade-in slide-in-from-left-2 duration-200">
+                  <span>Are you sure?</span>
+                  <button
+                    onClick={() => { deleteAll(); setConfirmDeleteAll(false); }}
+                    className="h-7 w-7 rounded-full flex items-center justify-center bg-rose-500/20 border border-rose-200/20 hover:bg-rose-500/30 text-rose-200 transition"
+                  >
+                    <Check className="h-3.5 w-3.5" />
+                  </button>
+                  <button
+                    onClick={() => setConfirmDeleteAll(false)}
+                    className="h-7 w-7 rounded-full flex items-center justify-center bg-white/5 border border-white/10 hover:bg-white/10 text-white/70 transition"
+                  >
+                    <X className="h-3.5 w-3.5" />
+                  </button>
+                </div>
+              )}
+            </div>
+          </div>
+        </>
+      )}
+
+      {/* Edit Modal */}
+      {editingNote && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40 backdrop-blur-sm"
+          onClick={closeModal}
+        >
+          <div
+            className="w-full max-w-sm rounded-2xl shadow-2xl overflow-hidden animate-in fade-in zoom-in-95 duration-200 border border-white/15"
+            onClick={(e) => e.stopPropagation()}
+            style={{ backgroundColor: editColor }}
+          >
+            {/* Header */}
+            <div className="flex items-center justify-between px-4 pt-3 pb-1">
+              <div className="flex gap-0.5 opacity-40">
+                <span className="block w-1.5 h-1.5 rounded-full" style={{ backgroundColor: '#1a1a1a' }} />
+                <span className="block w-1.5 h-1.5 rounded-full" style={{ backgroundColor: '#1a1a1a' }} />
+                <span className="block w-1.5 h-1.5 rounded-full" style={{ backgroundColor: '#1a1a1a' }} />
+              </div>
+              <button
+                onClick={closeModal}
+                className="p-1 rounded-full hover:bg-black/10 transition-colors"
+              >
+                <X className="h-4 w-4" style={{ color: '#1a1a1a' }} />
+              </button>
+            </div>
+
+            {/* Textarea */}
+            <textarea
+              value={editContent}
+              onChange={(e) => setEditContent(e.target.value)}
+              className="w-full px-4 pb-3 min-h-[220px] bg-transparent border-none outline-none resize-none text-lg md:text-base leading-relaxed placeholder:opacity-40"
+              style={{ color: '#1a1a1a', fontFamily: "'Caveat', 'Segoe Print', 'Comic Sans MS', cursive", fontSize: 'clamp(1.1rem, 4vw, 1.25rem)' }}
+              placeholder="Write something..."
+              autoFocus
+            />
+
+            {/* Color picker */}
+            <div className="px-4 pb-3 flex gap-3 md:gap-2">
+              {PASTEL_COLORS.map((c) => (
+                <button
+                  key={c}
+                  onClick={() => changeModalColor(c)}
+                  className={`h-9 w-9 md:h-7 md:w-7 rounded-full transition-all ${
+                    editColor === c
+                      ? 'ring-2 ring-white ring-offset-2 scale-110'
+                      : 'hover:scale-105 active:scale-95'
+                  }`}
+                  style={{ backgroundColor: c, ['--tw-ring-offset-color' as string]: editColor }}
+                />
+              ))}
+            </div>
+
+            {/* Delete button */}
+            <div className="px-4 pb-4">
+              <button
+                onClick={deleteAndClose}
+                className="text-xs font-medium transition-colors"
+                style={{ color: 'rgba(153, 27, 27, 0.6)' }}
+                onMouseEnter={(e) => (e.currentTarget.style.color = 'rgba(153, 27, 27, 0.9)')}
+                onMouseLeave={(e) => (e.currentTarget.style.color = 'rgba(153, 27, 27, 0.6)')}
+              >
+                Delete this note
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/workspace/client/src/components/Wallpaper/WallpaperBackground.tsx

@@ -0,0 +1,12 @@
+import { useWallpaper } from './WallpaperContext';
+
+export default function WallpaperBackground() {
+  const { wallpaper } = useWallpaper();
+  return (
+    <div
+      aria-hidden
+      className="fixed inset-0 -z-10 pointer-events-none"
+      style={{ background: wallpaper.background }}
+    />
+  );
+}

package/workspace/client/src/components/Wallpaper/WallpaperContext.tsx

@@ -0,0 +1,160 @@
+import { createContext, useContext, useEffect, useMemo, useState } from 'react';
+import type { ReactNode } from 'react';
+
+export type WallpaperKind = 'gradient' | 'image';
+
+export interface Wallpaper {
+  id: string;
+  name: string;
+  kind: WallpaperKind;
+  /** CSS background value (used in `background` shorthand) */
+  background: string;
+  /** Smaller thumbnail-sized background (lighter for the picker) */
+  thumb: string;
+}
+
+export const GRADIENT_WALLPAPERS: Wallpaper[] = [
+  {
+    id: 'sunset',
+    name: 'Sunset',
+    kind: 'gradient',
+    background:
+      'radial-gradient(ellipse at 20% 0%, #F2B5C7 0%, transparent 45%),' +
+      'radial-gradient(ellipse at 80% 10%, #C9A7E8 0%, transparent 50%),' +
+      'radial-gradient(ellipse at 50% 90%, #6B7BB8 0%, transparent 55%),' +
+      'linear-gradient(180deg, #E8B7C9 0%, #B49BD8 45%, #4A5A8C 100%)',
+    thumb:
+      'radial-gradient(ellipse at 30% 0%, #F2B5C7, transparent 60%),' +
+      'linear-gradient(180deg, #E8B7C9, #B49BD8 45%, #4A5A8C)',
+  },
+  {
+    id: 'aurora',
+    name: 'Aurora',
+    kind: 'gradient',
+    background:
+      'radial-gradient(ellipse at 10% 20%, #5DE0E6 0%, transparent 50%),' +
+      'radial-gradient(ellipse at 90% 30%, #B95BFF 0%, transparent 55%),' +
+      'radial-gradient(ellipse at 60% 90%, #FF6BAA 0%, transparent 50%),' +
+      'linear-gradient(135deg, #0B1228 0%, #1F1244 50%, #2A0E3A 100%)',
+    thumb:
+      'radial-gradient(ellipse at 10% 20%, #5DE0E6, transparent 60%),' +
+      'radial-gradient(ellipse at 90% 30%, #B95BFF, transparent 60%),' +
+      'linear-gradient(135deg, #0B1228, #2A0E3A)',
+  },
+  {
+    id: 'nebula',
+    name: 'Nebula',
+    kind: 'gradient',
+    background:
+      'radial-gradient(ellipse at 25% 25%, #FF7AB6 0%, transparent 45%),' +
+      'radial-gradient(ellipse at 75% 65%, #6B5BFF 0%, transparent 50%),' +
+      'radial-gradient(ellipse at 50% 50%, #FFB347 0%, transparent 30%),' +
+      'linear-gradient(180deg, #0A0518 0%, #16092B 60%, #2A0F3D 100%)',
+    thumb:
+      'radial-gradient(ellipse at 25% 25%, #FF7AB6, transparent 60%),' +
+      'radial-gradient(ellipse at 75% 65%, #6B5BFF, transparent 60%),' +
+      'linear-gradient(180deg, #0A0518, #2A0F3D)',
+  },
+];
+
+const STORAGE_KEY = 'bloby:wallpaper';
+const DEFAULT_ID = 'sunset';
+
+interface WallpaperContextValue {
+  wallpaper: Wallpaper;
+  setWallpaperId: (id: string) => void;
+  wallpapers: Wallpaper[];
+}
+
+const WallpaperContext = createContext<WallpaperContextValue | null>(null);
+
+interface ApiWallpaper {
+  id: string;
+  name: string;
+  url: string;
+}
+
+export function WallpaperProvider({ children }: { children: ReactNode }) {
+  const [wallpaperId, setWallpaperIdState] = useState<string>(() => {
+    if (typeof window === 'undefined') return DEFAULT_ID;
+    try {
+      return localStorage.getItem(STORAGE_KEY) || DEFAULT_ID;
+    } catch {
+      return DEFAULT_ID;
+    }
+  });
+
+  const [imageWallpapers, setImageWallpapers] = useState<Wallpaper[]>([]);
+
+  // Auto-discover any image dropped into client/public/wallpapers/
+  useEffect(() => {
+    let cancelled = false;
+    const load = () => {
+      fetch('/app/api/wallpapers')
+        .then((r) => (r.ok ? r.json() : []))
+        .then((items: ApiWallpaper[]) => {
+          if (cancelled || !Array.isArray(items)) return;
+          const mapped: Wallpaper[] = items.map((it) => ({
+            id: it.id,
+            name: it.name,
+            kind: 'image',
+            background: `url('${it.url}') center/cover no-repeat`,
+            thumb: `url('${it.url}') center/cover no-repeat`,
+          }));
+          setImageWallpapers(mapped);
+        })
+        .catch(() => {});
+    };
+    load();
+    // Refresh when the tab regains focus — picks up any image you just dropped
+    const onFocus = () => load();
+    window.addEventListener('focus', onFocus);
+    return () => {
+      cancelled = true;
+      window.removeEventListener('focus', onFocus);
+    };
+  }, []);
+
+  const wallpapers = useMemo<Wallpaper[]>(
+    () => [...GRADIENT_WALLPAPERS, ...imageWallpapers],
+    [imageWallpapers],
+  );
+
+  const wallpaper = useMemo(
+    () => wallpapers.find((w) => w.id === wallpaperId) || wallpapers[0],
+    [wallpapers, wallpaperId],
+  );
+
+  useEffect(() => {
+    try {
+      localStorage.setItem(STORAGE_KEY, wallpaperId);
+    } catch {
+      // ignore quota / private mode
+    }
+  }, [wallpaperId]);
+
+  const value = useMemo<WallpaperContextValue>(
+    () => ({
+      wallpaper,
+      setWallpaperId: (id) => setWallpaperIdState(id),
+      wallpapers,
+    }),
+    [wallpaper, wallpapers],
+  );
+
+  return <WallpaperContext.Provider value={value}>{children}</WallpaperContext.Provider>;
+}
+
+export function useWallpaper(): WallpaperContextValue {
+  const ctx = useContext(WallpaperContext);
+  if (!ctx) {
+    // Safe fallback: return defaults instead of throwing — prevents crashes
+    // in transient render situations (e.g. sub-tree mounted outside provider).
+    return {
+      wallpaper: GRADIENT_WALLPAPERS[0],
+      setWallpaperId: () => {},
+      wallpapers: GRADIENT_WALLPAPERS,
+    };
+  }
+  return ctx;
+}

package/workspace/client/src/components/Wallpaper/WallpaperPicker.tsx

@@ -0,0 +1,67 @@
+import { Check, X } from 'lucide-react';
+import { useWallpaper } from './WallpaperContext';
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+}
+
+export default function WallpaperPicker({ open, onClose }: Props) {
+  const { wallpaper, setWallpaperId, wallpapers } = useWallpaper();
+  if (!open) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-[120] flex items-center justify-center p-4"
+      onClick={onClose}
+    >
+      <div className="absolute inset-0 bg-black/40 backdrop-blur-sm" />
+      <div
+        onClick={(e) => e.stopPropagation()}
+        className="glass-card relative w-full max-w-2xl p-6"
+        style={{ borderRadius: 28 }}
+      >
+        <div className="flex items-center justify-between mb-5">
+          <div>
+            <h2 className="text-lg font-semibold tracking-tight">Wallpaper</h2>
+            <p className="text-xs text-white/60 mt-0.5">Pick a vibe for your workspace.</p>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            className="h-9 w-9 rounded-full glass-pill flex items-center justify-center text-white/80 hover:text-white transition"
+            aria-label="Close"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+
+        <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
+          {wallpapers.map((wp) => {
+            const active = wp.id === wallpaper.id;
+            return (
+              <button
+                key={wp.id}
+                type="button"
+                onClick={() => {
+                  setWallpaperId(wp.id);
+                }}
+                className="group relative aspect-[4/3] rounded-2xl overflow-hidden border border-white/10 hover:border-white/30 transition"
+                style={{ background: wp.thumb }}
+              >
+                <div className="absolute inset-x-0 bottom-0 px-3 py-2 bg-gradient-to-t from-black/60 to-transparent">
+                  <span className="text-xs font-medium text-white drop-shadow">{wp.name}</span>
+                </div>
+                {active && (
+                  <div className="absolute top-2 right-2 h-7 w-7 rounded-full bg-white/90 flex items-center justify-center shadow">
+                    <Check className="h-4 w-4 text-black" />
+                  </div>
+                )}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}