bloby-bot 0.37.1 → 0.39.1

package/workspace/client/src/components/Dashboard/WishlistPage.tsx

@@ -0,0 +1,464 @@
+import { useEffect, useState, type FormEvent } from 'react';
+import {
+  Heart, ShoppingCart, Tag, ExternalLink, Edit, Trash2, Plus, Zap, Eye, CheckCircle, X,
+} from 'lucide-react';
+
+interface WishlistItem {
+  id: number;
+  name: string;
+  url: string | null;
+  features: string | null;
+  price: number | null;
+  target_price: number | null;
+  alert_threshold_percent: number | null;
+  priority: string;
+  status: string;
+  notes: string | null;
+  image_url: string | null;
+  last_checked: string | null;
+  last_deal_found: string | null;
+  created_at: string;
+}
+
+interface Stats {
+  total: number;
+  watching: number;
+  urgent: number;
+  purchased: number;
+}
+
+const PRIORITIES = ['low', 'normal', 'urgent'];
+const STATUSES = ['watching', 'purchased', 'dismissed'];
+
+function formatUSD(n: number | null | undefined): string {
+  if (n == null || isNaN(n)) return '—';
+  return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(n);
+}
+
+function prettyLabel(s: string): string {
+  return s.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+function priorityBadge(p: string): string {
+  const map: Record<string, string> = {
+    urgent: 'bg-rose-300/15 border-rose-200/20 text-rose-200',
+    normal: 'bg-white/[0.06] border-white/10 text-white/70',
+    low: 'bg-white/[0.04] border-white/10 text-white/50',
+  };
+  return map[p] || 'bg-white/[0.06] border-white/10 text-white/70';
+}
+
+function statusBadge(s: string): string {
+  const map: Record<string, string> = {
+    watching: 'bg-cyan-300/15 border-cyan-200/20 text-cyan-200',
+    purchased: 'bg-emerald-300/15 border-emerald-200/20 text-emerald-200',
+    dismissed: 'bg-white/[0.06] border-white/10 text-white/60',
+  };
+  return map[s] || 'bg-white/[0.06] border-white/10 text-white/60';
+}
+
+export default function WishlistPage() {
+  const [items, setItems] = useState<WishlistItem[]>([]);
+  const [stats, setStats] = useState<Stats | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [modal, setModal] = useState<{ open: boolean; item: WishlistItem | null }>({ open: false, item: null });
+
+  async function loadAll() {
+    setLoading(true);
+    try {
+      const [list, s] = await Promise.all([
+        fetch('/app/api/wishlist').then((r) => r.json()),
+        fetch('/app/api/wishlist/stats').then((r) => r.json()),
+      ]);
+      setItems(list);
+      setStats(s);
+    } catch (err) {
+      console.error('Failed to load wishlist', err);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => { loadAll(); }, []);
+
+  async function deleteItem(item: WishlistItem) {
+    if (!confirm(`Delete "${item.name}"? This cannot be undone.`)) return;
+    const res = await fetch(`/app/api/wishlist/${item.id}`, { method: 'DELETE' });
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ error: 'Delete failed' }));
+      alert(err.error || 'Delete failed');
+      return;
+    }
+    loadAll();
+  }
+
+  return (
+    <div className="flex flex-col 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-pink-300/40 to-rose-500/20 border border-white/10 backdrop-blur-xl shrink-0">
+            <Heart className="h-5 w-5 text-pink-200" fill="currentColor" />
+          </div>
+          <div>
+            <h1 className="text-2xl sm:text-3xl font-semibold text-white tracking-tight">Wishlist</h1>
+            <p className="text-sm text-white/60 mt-1">Track items you're watching for deals.</p>
+          </div>
+        </div>
+        <button
+          onClick={() => setModal({ open: true, item: null })}
+          className="flex items-center gap-1.5 px-4 py-2 rounded-full bg-gradient-to-br from-pink-500 to-rose-500 text-white text-xs font-semibold shadow-lg shadow-rose-500/20 hover:brightness-110 transition shrink-0"
+        >
+          <Plus className="h-3.5 w-3.5" />
+          Add Item
+        </button>
+      </div>
+
+      {/* Stats row */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-8">
+        <StatCard
+          icon={Heart}
+          label="Total"
+          value={stats?.total ?? 0}
+          gradientFrom="#C9A7E8"
+          gradientTo="#F2B5C7"
+        />
+        <StatCard
+          icon={Eye}
+          label="Watching"
+          value={stats?.watching ?? 0}
+          gradientFrom="#5DE0E6"
+          gradientTo="#85C7FF"
+        />
+        <StatCard
+          icon={Zap}
+          label="Urgent"
+          value={stats?.urgent ?? 0}
+          gradientFrom="#FFB37A"
+          gradientTo="#FF7AAA"
+        />
+        <StatCard
+          icon={CheckCircle}
+          label="Purchased"
+          value={stats?.purchased ?? 0}
+          gradientFrom="#9BE7B5"
+          gradientTo="#5DE0B8"
+        />
+      </div>
+
+      {loading ? (
+        <p className="text-white/60 text-sm">Loading…</p>
+      ) : items.length === 0 ? (
+        <EmptyState onAdd={() => setModal({ open: true, item: null })} />
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {items.map((it) => (
+            <ItemCard
+              key={it.id}
+              item={it}
+              onEdit={() => setModal({ open: true, item: it })}
+              onDelete={() => deleteItem(it)}
+            />
+          ))}
+        </div>
+      )}
+
+      {modal.open && (
+        <ItemModal
+          item={modal.item}
+          onClose={() => setModal({ open: false, item: null })}
+          onSaved={() => { setModal({ open: false, item: null }); loadAll(); }}
+        />
+      )}
+    </div>
+  );
+}
+
+function StatCard({
+  icon: Icon,
+  label,
+  value,
+  gradientFrom,
+  gradientTo,
+}: {
+  icon: React.ComponentType<{ className?: string }>;
+  label: string;
+  value: string | number;
+  gradientFrom: string;
+  gradientTo: string;
+}) {
+  const gradient = `linear-gradient(135deg, ${gradientFrom}, ${gradientTo})`;
+  return (
+    <div className="glass-card glass-card-md p-4">
+      <div className="relative">
+        <div className="flex items-center gap-1.5 mb-2">
+          <Icon className="h-3 w-3 text-white/70" />
+          <span
+            className="text-[10px] font-semibold uppercase tracking-wider"
+            style={{
+              backgroundImage: gradient,
+              WebkitBackgroundClip: 'text',
+              WebkitTextFillColor: 'transparent',
+              backgroundClip: 'text',
+            }}
+          >
+            {label}
+          </span>
+        </div>
+        <p className="text-2xl sm:text-3xl font-semibold tracking-tight text-white tabular-nums">{value}</p>
+      </div>
+    </div>
+  );
+}
+
+function EmptyState({ onAdd }: { onAdd: () => void }) {
+  return (
+    <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-pink-300/40 to-rose-500/20 border border-white/10 backdrop-blur-xl mb-4 mx-auto">
+          <Heart className="h-6 w-6 text-pink-200" />
+        </div>
+        <p className="text-base font-semibold text-white mb-1">Your wishlist is empty</p>
+        <p className="text-sm text-white/60 mb-5">Add something you're watching for a deal.</p>
+        <button
+          onClick={onAdd}
+          className="inline-flex items-center gap-1.5 px-4 py-2 rounded-full bg-gradient-to-br from-pink-500 to-rose-500 text-white text-xs font-semibold shadow-lg shadow-rose-500/20 hover:brightness-110 transition"
+        >
+          <Plus className="h-3.5 w-3.5" />
+          Add your first item
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function ItemCard({ item, onEdit, onDelete }: { item: WishlistItem; onEdit: () => void; onDelete: () => void }) {
+  return (
+    <div className="glass-card glass-card-md p-5 flex flex-col">
+      <div className="relative flex flex-col h-full">
+        <div className="flex items-start justify-between gap-2 mb-3">
+          <h3 className="text-base font-semibold leading-tight text-white tracking-tight flex-1">{item.name}</h3>
+          <div className="flex items-center gap-1 shrink-0">
+            <IconBtn icon={Edit} onClick={onEdit} title="Edit" />
+            <IconBtn icon={Trash2} onClick={onDelete} title="Delete" danger />
+          </div>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-1.5 mb-3">
+          <span className={`text-[10px] font-semibold px-2 py-0.5 rounded-full border uppercase tracking-wider ${priorityBadge(item.priority)}`}>
+            {item.priority === 'urgent' && <Zap className="h-2.5 w-2.5 inline mr-0.5 -mt-0.5" />}
+            {prettyLabel(item.priority)}
+          </span>
+          <span className={`text-[10px] font-semibold px-2 py-0.5 rounded-full border uppercase tracking-wider ${statusBadge(item.status)}`}>
+            {prettyLabel(item.status)}
+          </span>
+        </div>
+
+        {item.url && (
+          <a
+            href={item.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-[11px] text-cyan-200 hover:text-cyan-100 flex items-center gap-1 mb-2 truncate"
+          >
+            <ExternalLink className="h-3 w-3 shrink-0" />
+            <span className="truncate">{(() => { try { return new URL(item.url!).hostname.replace('www.', ''); } catch { return item.url; } })()}</span>
+          </a>
+        )}
+
+        {item.features && (
+          <p className="text-xs text-white/60 mb-3 leading-relaxed">{item.features}</p>
+        )}
+
+        {(item.price != null || item.target_price != null) && (
+          <div className="flex items-center gap-3 mb-2 text-xs">
+            {item.price != null && (
+              <div className="flex items-center gap-1">
+                <Tag className="h-3 w-3 text-white/50" />
+                <span className="text-white/50">Price:</span>
+                <span className="font-semibold text-white tabular-nums">{formatUSD(item.price)}</span>
+              </div>
+            )}
+            {item.target_price != null && (
+              <div className="flex items-center gap-1">
+                <span className="text-white/50">Target:</span>
+                <span className="font-semibold text-emerald-200 tabular-nums">{formatUSD(item.target_price)}</span>
+              </div>
+            )}
+          </div>
+        )}
+
+        {item.alert_threshold_percent != null && (
+          <p className="text-[10px] text-white/40 mb-2">
+            Alert at {item.alert_threshold_percent}%+ off
+          </p>
+        )}
+
+        {item.last_deal_found && (
+          <div className="mt-auto pt-3 border-t border-white/[0.06] flex items-start gap-2">
+            <div className="h-6 px-2 rounded-full bg-amber-300/15 border border-amber-200/20 text-amber-200 text-[10px] font-semibold uppercase tracking-wider flex items-center shrink-0">
+              Latest
+            </div>
+            <p className="text-xs text-white/85 leading-relaxed">{item.last_deal_found}</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function IconBtn({ icon: Icon, onClick, title, danger }: { icon: React.ComponentType<{ className?: string }>; onClick: () => void; title: string; danger?: boolean }) {
+  return (
+    <button
+      onClick={onClick}
+      title={title}
+      className={`h-8 w-8 rounded-full flex items-center justify-center bg-white/5 border border-white/10 hover:bg-white/10 transition ${danger ? 'text-rose-300 hover:text-rose-200' : 'text-white/70 hover:text-white'}`}
+    >
+      <Icon className="h-3.5 w-3.5" />
+    </button>
+  );
+}
+
+const INPUT = 'w-full px-3 py-2 bg-white/5 border border-white/10 rounded-xl text-sm text-white placeholder-white/40 focus:outline-none focus:border-white/30 focus:bg-white/10 transition backdrop-blur-md';
+const LABEL = 'block text-[11px] font-semibold text-white/60 mb-1.5 uppercase tracking-wider';
+
+function Modal({ title, onClose, children }: { title: string; onClose: () => void; children: React.ReactNode }) {
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4" onClick={onClose}>
+      <div className="glass-card w-full max-w-lg max-h-[90dvh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
+        <div className="relative flex items-center justify-between px-5 py-4 border-b border-white/[0.06]">
+          <h2 className="text-base font-semibold text-white tracking-tight">{title}</h2>
+          <button onClick={onClose} className="h-8 w-8 rounded-full flex items-center justify-center bg-white/5 border border-white/10 hover:bg-white/10 transition text-white/70">
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+        <div className="relative p-5">{children}</div>
+      </div>
+    </div>
+  );
+}
+
+function FormField({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div>
+      <label className={LABEL}>{label}</label>
+      {children}
+    </div>
+  );
+}
+
+function ItemModal({ item, onClose, onSaved }: { item: WishlistItem | null; onClose: () => void; onSaved: () => void }) {
+  const [form, setForm] = useState({
+    name: item?.name ?? '',
+    url: item?.url ?? '',
+    features: item?.features ?? '',
+    price: item?.price ?? '',
+    target_price: item?.target_price ?? '',
+    alert_threshold_percent: item?.alert_threshold_percent ?? '',
+    priority: item?.priority ?? 'normal',
+    status: item?.status ?? 'watching',
+    notes: item?.notes ?? '',
+    last_deal_found: item?.last_deal_found ?? '',
+  });
+  const [error, setError] = useState('');
+  const [saving, setSaving] = useState(false);
+
+  async function submit(e: FormEvent) {
+    e.preventDefault();
+    if (!form.name.trim()) { setError('Name is required'); return; }
+    setSaving(true);
+    setError('');
+    const url = item ? `/app/api/wishlist/${item.id}` : '/app/api/wishlist';
+    const method = item ? 'PUT' : 'POST';
+    const payload = {
+      name: form.name.trim(),
+      url: form.url.toString().trim() || null,
+      features: form.features.toString().trim() || null,
+      price: form.price === '' ? null : Number(form.price),
+      target_price: form.target_price === '' ? null : Number(form.target_price),
+      alert_threshold_percent: form.alert_threshold_percent === '' ? null : Number(form.alert_threshold_percent),
+      priority: form.priority,
+      status: form.status,
+      notes: form.notes.toString().trim() || null,
+      last_deal_found: form.last_deal_found.toString().trim() || null,
+    };
+    const res = await fetch(url, {
+      method,
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload),
+    });
+    setSaving(false);
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ error: 'Save failed' }));
+      setError(err.error || 'Save failed');
+      return;
+    }
+    onSaved();
+  }
+
+  return (
+    <Modal title={item ? 'Edit Item' : 'Add Item'} onClose={onClose}>
+      <form onSubmit={submit} className="space-y-3">
+        {error && (
+          <div className="px-3 py-2 rounded-xl bg-rose-300/10 border border-rose-200/20 text-rose-200 text-xs">
+            {error}
+          </div>
+        )}
+        <FormField label="Name *">
+          <input className={INPUT} value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} required />
+        </FormField>
+        <FormField label="URL">
+          <input type="url" className={INPUT} placeholder="https://..." value={form.url as string} onChange={(e) => setForm({ ...form, url: e.target.value })} />
+        </FormField>
+        <FormField label="Features / Description">
+          <textarea className={INPUT} rows={3} value={form.features as string} onChange={(e) => setForm({ ...form, features: e.target.value })} />
+        </FormField>
+        <div className="grid grid-cols-2 gap-3">
+          <FormField label="Current Price (USD)">
+            <input type="number" min="0" step="0.01" className={INPUT} value={form.price as string} onChange={(e) => setForm({ ...form, price: e.target.value })} />
+          </FormField>
+          <FormField label="Target Price (USD)">
+            <input type="number" min="0" step="0.01" className={INPUT} value={form.target_price as string} onChange={(e) => setForm({ ...form, target_price: e.target.value })} />
+          </FormField>
+        </div>
+        <FormField label="Alert Threshold (% off)">
+          <input type="number" min="0" max="100" className={INPUT} placeholder="e.g. 30 for 30%+ off" value={form.alert_threshold_percent as string} onChange={(e) => setForm({ ...form, alert_threshold_percent: e.target.value })} />
+        </FormField>
+        <div className="grid grid-cols-2 gap-3">
+          <FormField label="Priority">
+            <select className={INPUT} value={form.priority} onChange={(e) => setForm({ ...form, priority: e.target.value })}>
+              {PRIORITIES.map((t) => <option key={t} value={t} className="bg-zinc-900">{prettyLabel(t)}</option>)}
+            </select>
+          </FormField>
+          <FormField label="Status">
+            <select className={INPUT} value={form.status} onChange={(e) => setForm({ ...form, status: e.target.value })}>
+              {STATUSES.map((t) => <option key={t} value={t} className="bg-zinc-900">{prettyLabel(t)}</option>)}
+            </select>
+          </FormField>
+        </div>
+        <FormField label="Last Deal Found">
+          <input className={INPUT} placeholder='e.g. "$349 on official site (50% off)"' value={form.last_deal_found as string} onChange={(e) => setForm({ ...form, last_deal_found: e.target.value })} />
+        </FormField>
+        <FormField label="Notes">
+          <textarea className={INPUT} rows={2} value={form.notes as string} onChange={(e) => setForm({ ...form, notes: e.target.value })} />
+        </FormField>
+        <div className="flex justify-end gap-2 pt-3">
+          <button
+            type="button"
+            onClick={onClose}
+            className="px-4 py-2 rounded-full text-xs font-semibold text-white/70 hover:text-white bg-white/5 border border-white/10 hover:bg-white/10 transition"
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            disabled={saving}
+            className="px-4 py-2 rounded-full text-xs font-semibold bg-gradient-to-br from-pink-500 to-rose-500 text-white shadow-lg shadow-rose-500/20 hover:brightness-110 disabled:opacity-50 transition"
+          >
+            {saving ? 'Saving…' : item ? 'Save' : 'Create'}
+          </button>
+        </div>
+      </form>
+    </Modal>
+  );
+}

package/workspace/client/src/components/Layout/DashboardLayout.tsx

@@ -1,7 +1,10 @@
 import { useState, useEffect } from 'react';
 import type { ReactNode } from 'react';
-import Sidebar from './Sidebar';
 import MobileNav from './MobileNav';
+import MiniSidebar from './MiniSidebar';
+import StickyNotesOverlay from '../StickyNotes/StickyNotesOverlay';
+import { WallpaperProvider } from '../Wallpaper/WallpaperContext';
+import WallpaperBackground from '../Wallpaper/WallpaperBackground';
 
 interface Props {
   children: ReactNode;
@@ -14,16 +17,9 @@ export default function DashboardLayout({ children, userName, botName = 'Bloby'
 
   useEffect(() => {
     const check = () => {
-      console.log('[health] checking /app/api/health…');
       fetch('/app/api/health', { signal: AbortSignal.timeout(3000) })
-        .then((r) => {
-          console.log(`[health] response: ${r.status} ok=${r.ok}`);
-          setStatus(r.ok ? 'healthy' : 'restarting');
-        })
-        .catch((err) => {
-          console.warn('[health] fetch failed:', err.message ?? err);
-          setStatus('restarting');
-        });
+        .then((r) => setStatus(r.ok ? 'healthy' : 'restarting'))
+        .catch(() => setStatus('restarting'));
     };
     check();
     const id = setInterval(check, 10_000);
@@ -31,34 +27,36 @@ export default function DashboardLayout({ children, userName, botName = 'Bloby'
   }, []);
 
   return (
-    <div className="flex h-dvh flex-col">
-      {/* Mobile header */}
-      <header className="flex items-center justify-between px-4 py-3 md:hidden">
-        <MobileNav userName={userName} botName={botName} backendStatus={status} />
-        <div className="flex items-center gap-2">
-          <img src="/bloby.png" alt={botName} className="h-6 w-auto" />
-          <span className="font-semibold text-base">{botName}</span>
-        </div>
-        <div className="w-10" />
-      </header>
+    <WallpaperProvider>
+      <WallpaperBackground />
 
-      <div className="flex flex-1 overflow-hidden">
-        {/* Desktop sidebar — floating card with shiny border */}
-        <div id="tour-sidebar" className="hidden md:flex shrink-0 pl-3 pt-3 pb-3">
-          <div className="relative rounded-3xl overflow-hidden h-full">
-            {/* Shiny border highlight */}
-            <div className="absolute inset-0 rounded-3xl bg-gradient-to-b from-white/[0.12] via-white/[0.04] to-transparent pointer-events-none" />
-            <div className="relative rounded-3xl bg-[#1A1A1A] m-px h-full">
-              <Sidebar userName={userName} botName={botName} backendStatus={status} />
-            </div>
+      <div className="flex h-dvh flex-col">
+        {/* Mobile header */}
+        <header className="flex items-center justify-between px-4 py-3 md:hidden">
+          <MobileNav userName={userName} botName={botName} backendStatus={status} />
+          <div className="flex items-center gap-2">
+            <img src="/bloby.png" alt={botName} className="h-6 w-auto" />
+            <span className="font-semibold text-base text-white drop-shadow">{botName}</span>
+          </div>
+          <div className="w-10" />
+        </header>
+
+        <div className="flex flex-1 overflow-hidden">
+          {/* Floating mini-sidebar (desktop only) */}
+          <div id="tour-sidebar" className="contents">
+            <MiniSidebar />
           </div>
-        </div>
 
-        {/* Main content + footer */}
-        <div className="flex flex-1 flex-col overflow-hidden">
-          <main id="tour-dashboard" className="flex-1 overflow-y-auto">{children}</main>
+          {/* Main content */}
+          <div className="flex flex-1 flex-col overflow-hidden">
+            <main id="tour-dashboard" className="relative flex-1 overflow-y-auto">
+              {children}
+              <StickyNotesOverlay />
+            </main>
+          </div>
         </div>
+
       </div>
-    </div>
+    </WallpaperProvider>
   );
 }

package/workspace/client/src/components/Layout/MiniSidebar.tsx

@@ -0,0 +1,64 @@
+import { useState } from 'react';
+import { NavLink } from 'react-router';
+import { LayoutDashboard, StickyNote, Bitcoin, MessageCircle, Heart, Settings } from 'lucide-react';
+import WallpaperPicker from '../Wallpaper/WallpaperPicker';
+import { cn } from '@/lib/utils';
+
+export default function MiniSidebar() {
+  const [pickerOpen, setPickerOpen] = useState(false);
+
+  return (
+    <>
+      <aside className="hidden md:flex fixed left-4 top-1/2 -translate-y-1/2 z-40">
+        <div className="glass-pill flex flex-col items-center gap-1 p-2" style={{ borderRadius: 28 }}>
+          <button
+            type="button"
+            onClick={() => setPickerOpen(true)}
+            className="h-11 w-11 rounded-2xl flex items-center justify-center text-white/80 hover:text-white hover:bg-white/10 transition"
+            aria-label="Wallpaper settings"
+            title="Wallpaper"
+          >
+            <Settings className="h-[18px] w-[18px]" />
+          </button>
+
+          <NavItem to="/" icon={LayoutDashboard} label="Dashboard" />
+          <NavItem to="/sticky-notes" icon={StickyNote} label="Sticky Notes" />
+          <NavItem to="/wishlist" icon={Heart} label="Wishlist" />
+          <NavItem to="/crypto" icon={Bitcoin} label="Crypto" />
+          <NavItem to="/aichat" icon={MessageCircle} label="AI Chat" />
+        </div>
+      </aside>
+
+      <WallpaperPicker open={pickerOpen} onClose={() => setPickerOpen(false)} />
+    </>
+  );
+}
+
+function NavItem({
+  to,
+  icon: Icon,
+  label,
+}: {
+  to: string;
+  icon: React.ComponentType<{ className?: string }>;
+  label: string;
+}) {
+  return (
+    <NavLink
+      to={to}
+      end
+      title={label}
+      aria-label={label}
+      className={({ isActive }) =>
+        cn(
+          'h-11 w-11 rounded-2xl flex items-center justify-center transition',
+          isActive
+            ? 'glass-inner-active text-white'
+            : 'text-white/70 hover:text-white hover:bg-white/10',
+        )
+      }
+    >
+      <Icon className="h-[18px] w-[18px]" />
+    </NavLink>
+  );
+}