Delete web/src

web/src/App.tsx

@@ -1,531 +0,0 @@
-// web/src/App.tsx
-import React, { useState, useEffect } from 'react';
-import { Header } from './components/Header';
-import { LeftSidebar } from './components/LeftSidebar';
-import { ChatArea } from './components/ChatArea';
-import { RightPanel } from './components/RightPanel';
-import { FloatingActionButtons } from './components/FloatingActionButtons';
-import { LoginScreen } from './components/LoginScreen';
-import { ProfileEditor } from './components/ProfileEditor';
-import { X } from 'lucide-react';
-import { Button } from './components/ui/button';
-import { Toaster } from './components/ui/sonner';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-import { toast } from 'sonner';
-
-import {
-  apiLogin,
-  apiChat,
-  apiUpload,
-  apiExport,
-  apiSummary,
-  type LearningMode,
-  type Language,
-  type FileType,
-  type User as ApiUser,
-} from './lib/api';
-
-export interface Message {
-  id: string;
-  role: 'user' | 'assistant';
-  content: string;
-  timestamp: Date;
-  references?: string[];
-  sender?: GroupMember; // For group chat
-}
-
-export interface User {
-  name: string;
-  email: string;
-}
-
-export interface GroupMember {
-  id: string;
-  name: string;
-  email: string;
-  avatar?: string;
-  isAI?: boolean;
-}
-
-export type SpaceType = 'individual' | 'group';
-
-export interface Workspace {
-  id: string;
-  name: string;
-  type: SpaceType;
-  avatar: string;
-  members?: GroupMember[];
-}
-
-export interface UploadedFile {
-  file: File;
-  type: FileType;
-}
-
-function App() {
-  const [isDarkMode, setIsDarkMode] = useState(() => {
-    const saved = localStorage.getItem('theme');
-    return saved === 'dark' || (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches);
-  });
-
-  const [user, setUser] = useState<User | null>(null);
-
-  const [messages, setMessages] = useState<Message[]>([
-    {
-      id: '1',
-      role: 'assistant',
-      content:
-        "👋 Hi! I'm Clare, your AI teaching assistant. I'm here to help you learn through personalized tutoring. Feel free to ask me anything about the course materials, or upload your documents to get started!",
-      timestamp: new Date(),
-    },
-  ]);
-
-  const [learningMode, setLearningMode] = useState<LearningMode>('concept');
-  const [language, setLanguage] = useState<Language>('auto');
-  const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([]);
-
-  // You can later wire this to /api/memoryline
-  const [memoryProgress] = useState(36);
-
-  const [leftSidebarOpen, setLeftSidebarOpen] = useState(false);
-  const [leftPanelVisible, setLeftPanelVisible] = useState(true);
-
-  const [rightPanelOpen, setRightPanelOpen] = useState(false);
-  const [rightPanelVisible, setRightPanelVisible] = useState(true);
-
-  const [showProfileEditor, setShowProfileEditor] = useState(false);
-
-  const [exportResult, setExportResult] = useState('');
-  const [resultType, setResultType] = useState<'export' | 'quiz' | 'summary' | null>(null);
-
-  // Mock group members (still fine; AI responder uses backend now)
-  const [groupMembers] = useState<GroupMember[]>([
-    { id: 'clare', name: 'Clare AI', email: 'clare@ai.assistant', isAI: true },
-    { id: '1', name: 'Sarah Johnson', email: 'sarah.j@university.edu' },
-    { id: '2', name: 'Michael Chen', email: 'michael.c@university.edu' },
-    { id: '3', name: 'Emma Williams', email: 'emma.w@university.edu' },
-  ]);
-
-  const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
-  const [currentWorkspaceId, setCurrentWorkspaceId] = useState<string>('individual');
-
-  useEffect(() => {
-    if (user) {
-      const userAvatar = `https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(user.email)}`;
-      setWorkspaces([
-        {
-          id: 'individual',
-          name: 'My Space',
-          type: 'individual',
-          avatar: userAvatar,
-        },
-        {
-          id: 'group-1',
-          name: 'CS 101 Study Group',
-          type: 'group',
-          avatar: 'https://api.dicebear.com/7.x/shapes/svg?seed=cs101group',
-          members: groupMembers,
-        },
-        {
-          id: 'group-2',
-          name: 'AI Ethics Team',
-          type: 'group',
-          avatar: 'https://api.dicebear.com/7.x/shapes/svg?seed=aiethicsteam',
-          members: groupMembers,
-        },
-      ]);
-    }
-  }, [user, groupMembers]);
-
-  const currentWorkspace = workspaces.find((w) => w.id === currentWorkspaceId) || workspaces[0];
-  const spaceType: SpaceType = currentWorkspace?.type || 'individual';
-
-  useEffect(() => {
-    document.documentElement.classList.toggle('dark', isDarkMode);
-    localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
-  }, [isDarkMode]);
-
-  const asApiUser = (u: User): ApiUser => ({ name: u.name, email: u.email });
-
-  const handleSendMessage = async (content: string) => {
-    if (!content.trim() || !user) return;
-
-    const sender: GroupMember | undefined =
-      spaceType === 'group'
-        ? { id: user.email, name: user.name, email: user.email }
-        : undefined;
-
-    const userMessage: Message = {
-      id: crypto.randomUUID(),
-      role: 'user',
-      content,
-      timestamp: new Date(),
-      sender,
-    };
-
-    setMessages((prev) => [...prev, userMessage]);
-
-    const shouldAIRespond = spaceType === 'individual' || content.toLowerCase().includes('@clare');
-    if (!shouldAIRespond) return;
-
-    const assistantId = crypto.randomUUID();
-    const assistantPlaceholder: Message = {
-      id: assistantId,
-      role: 'assistant',
-      content: 'Thinking...',
-      timestamp: new Date(),
-      sender: spaceType === 'group' ? groupMembers.find((m) => m.isAI) : undefined,
-    };
-    setMessages((prev) => [...prev, assistantPlaceholder]);
-
-    try {
-      const data = await apiChat({
-        user: asApiUser(user),
-        message: content,
-        learningMode,
-        language,
-        docType: 'Syllabus',
-      });
-
-      const references =
-        (data.refs || [])
-          .map((r) => [r.source_file, r.section].filter(Boolean).join(' — '))
-          .filter(Boolean);
-
-      setMessages((prev) =>
-        prev.map((m) =>
-          m.id === assistantId
-            ? {
-                ...m,
-                content: data.reply || '',
-                references: references.length ? references : undefined,
-              }
-            : m
-        )
-      );
-    } catch (err: any) {
-      setMessages((prev) =>
-        prev.map((m) =>
-          m.id === assistantId
-            ? { ...m, content: `Sorry — request failed.\n${err?.message ?? String(err)}` }
-            : m
-        )
-      );
-    }
-  };
-
-  const handleFileUpload = async (files: File[]) => {
-    if (!user) return;
-
-    const newFiles: UploadedFile[] = files.map((file) => ({
-      file,
-      type: 'other',
-    }));
-
-    setUploadedFiles((prev) => [...prev, ...newFiles]);
-
-    for (const f of files) {
-      try {
-        const r = await apiUpload({ user: asApiUser(user), file: f, fileType: 'other' });
-        toast.success(r.status_md || `Uploaded: ${f.name}`);
-      } catch (e: any) {
-        toast.error(e?.message ?? `Upload failed: ${f.name}`);
-      }
-    }
-  };
-
-  const handleRemoveFile = (index: number) => {
-    setUploadedFiles((prev) => prev.filter((_, i) => i !== index));
-  };
-
-  const handleFileTypeChange = async (index: number, type: FileType) => {
-    setUploadedFiles((prev) => prev.map((f, i) => (i === index ? { ...f, type } : f)));
-
-    if (!user) return;
-    const target = uploadedFiles[index];
-    if (!target) return;
-
-    try {
-      const r = await apiUpload({
-        user: asApiUser(user),
-        file: target.file,
-        fileType: type,
-      });
-      toast.success(r.status_md || `Updated type: ${target.file.name}`);
-    } catch (e: any) {
-      toast.error(e?.message ?? `Failed to update type: ${target.file.name}`);
-    }
-  };
-
-  const handleClearConversation = () => {
-    setMessages([
-      {
-        id: '1',
-        role: 'assistant',
-        content:
-          "👋 Hi! I'm Clare, your AI teaching assistant. I'm here to help you learn through personalized tutoring. Feel free to ask me anything about the course materials, or upload your documents to get started!",
-        timestamp: new Date(),
-      },
-    ]);
-    toast.success('Conversation cleared');
-  };
-
-  const handleExport = async () => {
-    if (!user) return;
-    try {
-      const r = await apiExport({ user: asApiUser(user), learningMode });
-      setExportResult(r.markdown || '');
-      setResultType('export');
-      toast.success('Conversation exported!');
-    } catch (e: any) {
-      toast.error(e?.message ?? 'Export failed');
-    }
-  };
-
-  const handleSummary = async () => {
-    if (!user) return;
-    try {
-      const r = await apiSummary({ user: asApiUser(user), learningMode, language });
-      setExportResult(r.markdown || '');
-      setResultType('summary');
-      toast.success('Summary generated!');
-    } catch (e: any) {
-      toast.error(e?.message ?? 'Summary failed');
-    }
-  };
-
-  if (!user) {
-    return (
-      <LoginScreen
-        onLogin={async (u) => {
-          setUser(u);
-          try {
-            await apiLogin(asApiUser(u));
-          } catch (e: any) {
-            toast.error(e?.message ?? 'Login sync failed');
-          }
-        }}
-      />
-    );
-  }
-
-  return (
-    <div className="min-h-screen bg-background flex flex-col">
-      <Toaster />
-      <Header
-        user={user}
-        onMenuClick={() => setLeftSidebarOpen(!leftSidebarOpen)}
-        onUserClick={() => setRightPanelOpen(!rightPanelOpen)}
-        isDarkMode={isDarkMode}
-        onToggleDarkMode={() => setIsDarkMode(!isDarkMode)}
-        language={language}
-        onLanguageChange={setLanguage}
-        workspaces={workspaces}
-        currentWorkspace={currentWorkspace}
-        onWorkspaceChange={setCurrentWorkspaceId}
-      />
-
-      {showProfileEditor && user && (
-        <ProfileEditor user={user} onSave={setUser} onClose={() => setShowProfileEditor(false)} />
-      )}
-
-      <div
-        className="flex-1 flex overflow-hidden"
-        onWheel={(e) => e.stopPropagation()}
-        style={{ overscrollBehavior: 'none' }}
-      >
-        {/* Mobile Sidebar Toggle - Left */}
-        {leftSidebarOpen && (
-          <div
-            className="fixed inset-0 bg-black/50 z-40 lg:hidden"
-            onClick={() => setLeftSidebarOpen(false)}
-          />
-        )}
-
-        {/* Left Sidebar */}
-        {leftPanelVisible ? (
-          <aside className="hidden lg:flex w-80 bg-card border-r border-border flex-col h-full min-h-0 relative">
-            <Button
-              variant="secondary"
-              size="icon"
-              onClick={() => setLeftPanelVisible(false)}
-              className="absolute top-4 z-[70] h-8 w-5 shadow-lg rounded-full bg-card border border-border"
-              style={{ right: '-10px' }}
-              title="Close panel"
-            >
-              <ChevronLeft className="h-3 w-3" />
-            </Button>
-            <LeftSidebar
-              learningMode={learningMode}
-              language={language}
-              onLearningModeChange={setLearningMode}
-              onLanguageChange={setLanguage}
-              spaceType={spaceType}
-              groupMembers={groupMembers}
-              user={user}
-              onLogin={setUser}
-              onLogout={() => setUser(null)}
-              isLoggedIn={!!user}
-              onEditProfile={() => setShowProfileEditor(true)}
-            />
-          </aside>
-        ) : (
-          <Button
-            variant="secondary"
-            size="icon"
-            onClick={() => setLeftPanelVisible(true)}
-            className="hidden lg:flex fixed top-20 left-0 z-[70] h-8 w-5 shadow-lg rounded-full bg-card border border-border"
-            title="Open panel"
-          >
-            <ChevronRight className="h-3 w-3" />
-          </Button>
-        )}
-
-        {/* Left Sidebar - Mobile */}
-        <aside
-          className={`
-            fixed lg:hidden inset-y-0 left-0 z-50
-            w-80 bg-card border-r border-border
-            transform transition-transform duration-300 ease-in-out
-            ${leftSidebarOpen ? 'translate-x-0' : '-translate-x-full'}
-            flex flex-col
-            mt-16
-            h-[calc(100vh-4rem)]
-            min-h-0
-          `}
-        >
-          <div className="p-4 border-b border-border flex justify-between items-center">
-            <h3>Settings & Guide</h3>
-            <Button variant="ghost" size="icon" onClick={() => setLeftSidebarOpen(false)}>
-              <X className="h-5 w-5" />
-            </Button>
-          </div>
-          <LeftSidebar
-            learningMode={learningMode}
-            language={language}
-            onLearningModeChange={setLearningMode}
-            onLanguageChange={setLanguage}
-            spaceType={spaceType}
-            groupMembers={groupMembers}
-            user={user}
-            onLogin={setUser}
-            onLogout={() => setUser(null)}
-            isLoggedIn={!!user}
-            onEditProfile={() => setShowProfileEditor(true)}
-          />
-        </aside>
-
-        {/* Main Chat Area */}
-        <main className="flex-1 flex flex-col min-w-0 min-h-0 h-full">
-          <ChatArea
-            // ✅ NEW: pass ApiUser down so Message can submit feedback
-            user={asApiUser(user)}
-            messages={messages}
-            onSendMessage={handleSendMessage}
-            uploadedFiles={uploadedFiles}
-            onFileUpload={handleFileUpload}
-            onRemoveFile={handleRemoveFile}
-            onFileTypeChange={handleFileTypeChange}
-            memoryProgress={memoryProgress}
-            isLoggedIn={!!user}
-            learningMode={learningMode}
-            onClearConversation={handleClearConversation}
-            onLearningModeChange={setLearningMode}
-            spaceType={spaceType}
-          />
-        </main>
-
-        {/* Mobile Sidebar Toggle - Right */}
-        {rightPanelOpen && (
-          <div className="fixed inset-0 bg-black/50 z-40 lg:hidden" onClick={() => setRightPanelOpen(false)} />
-        )}
-
-        {/* Right Panel */}
-        {rightPanelVisible ? (
-          <aside className="hidden lg:flex w-80 bg-card border-l border-border flex-col min-h-0 relative" style={{ height: 'calc(100vh - 4rem)' }}>
-            <Button
-              variant="secondary"
-              size="icon"
-              onClick={() => setRightPanelVisible(false)}
-              className="absolute top-4 z-[70] h-8 w-5 shadow-lg rounded-full bg-card border border-border"
-              style={{ left: '-10px' }}
-              title="Close panel"
-            >
-              <ChevronRight className="h-3 w-3" />
-            </Button>
-            <RightPanel
-              user={user}
-              onLogin={setUser}
-              onLogout={() => setUser(null)}
-              isLoggedIn={!!user}
-              onClose={() => setRightPanelVisible(false)}
-              exportResult={exportResult}
-              setExportResult={setExportResult}
-              resultType={resultType}
-              setResultType={setResultType}
-              onExport={handleExport}
-              onSummary={handleSummary}
-            />
-          </aside>
-        ) : (
-          <Button
-            variant="secondary"
-            size="icon"
-            onClick={() => setRightPanelVisible(true)}
-            className="hidden lg:flex fixed top-20 right-0 z-[70] h-8 w-5 shadow-lg rounded-full bg-card border border-border"
-            title="Open panel"
-          >
-            <ChevronLeft className="h-3 w-3" />
-          </Button>
-        )}
-
-        {/* Right Panel - Mobile */}
-        <aside
-          className={`
-            fixed lg:hidden inset-y-0 right-0 z-50
-            w-80 bg-card border-l border-border
-            transform transition-transform duration-300 ease-in-out
-            ${rightPanelOpen ? 'translate-x-0' : 'translate-x-full'}
-            flex flex-col
-            mt-16
-            h-[calc(100vh-4rem)]
-            min-h-0
-          `}
-        >
-          <div className="p-4 border-b border-border flex justify-between items-center">
-            <h3>Account & Actions</h3>
-            <Button variant="ghost" size="icon" onClick={() => setRightPanelOpen(false)}>
-              <X className="h-5 w-5" />
-            </Button>
-          </div>
-          <RightPanel
-            user={user}
-            onLogin={setUser}
-            onLogout={() => setUser(null)}
-            isLoggedIn={!!user}
-            onClose={() => setRightPanelVisible(false)}
-            exportResult={exportResult}
-            setExportResult={setExportResult}
-            resultType={resultType}
-            setResultType={setResultType}
-            onExport={handleExport}
-            onSummary={handleSummary}
-          />
-        </aside>
-
-        {/* Floating Action Buttons - Desktop only, when panel is closed */}
-        {!rightPanelVisible && (
-          <FloatingActionButtons
-            user={user}
-            isLoggedIn={!!user}
-            onOpenPanel={() => setRightPanelVisible(true)}
-            onExport={handleExport}
-            onSummary={handleSummary}
-          />
-        )}
-      </div>
-    </div>
-  );
-}
-
-export default App;

web/src/Attributions.md

@@ -1,3 +0,0 @@
-This Figma Make file includes components from [shadcn/ui](https://ui.shadcn.com/) used under [MIT license](https://github.com/shadcn-ui/ui/blob/main/LICENSE.md).
-
-This Figma Make file includes photos from [Unsplash](https://unsplash.com) used under [license](https://unsplash.com/license).

web/src/components/ChatArea.tsx

@@ -1,358 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { Button } from './ui/button';
-import { Textarea } from './ui/textarea';
-import { Send, ArrowDown, AlertCircle, Trash2, Share2 } from 'lucide-react';
-import { Message } from './Message';
-import { FileUploadArea } from './FileUploadArea';
-import { Alert, AlertDescription } from './ui/alert';
-import { Badge } from './ui/badge';
-import type { Message as MessageType, LearningMode, UploadedFile, FileType, SpaceType } from '../App';
-import { toast } from 'sonner';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from './ui/dropdown-menu';
-import clareAvatar from '../assets/dfe44dab3ad8cd93953eac4a3e68bd1a5f999653.png';
-
-interface ChatAreaProps {
-  messages: MessageType[];
-  onSendMessage: (content: string) => void;
-  uploadedFiles: UploadedFile[];
-  onFileUpload: (files: File[]) => void;
-  onRemoveFile: (index: number) => void;
-  onFileTypeChange: (index: number, type: FileType) => void;
-  memoryProgress: number;
-  isLoggedIn: boolean;
-  learningMode: LearningMode;
-  onClearConversation: () => void;
-  onLearningModeChange: (mode: LearningMode) => void;
-  spaceType: SpaceType;
-}
-
-export function ChatArea({
-  messages,
-  onSendMessage,
-  uploadedFiles,
-  onFileUpload,
-  onRemoveFile,
-  onFileTypeChange,
-  memoryProgress,
-  isLoggedIn,
-  learningMode,
-  onClearConversation,
-  onLearningModeChange,
-  spaceType,
-}: ChatAreaProps) {
-  const [input, setInput] = useState('');
-  const [isTyping, setIsTyping] = useState(false);
-  const [showScrollButton, setShowScrollButton] = useState(false);
-  const messagesEndRef = useRef<HTMLDivElement>(null);
-  const scrollContainerRef = useRef<HTMLDivElement>(null);
-
-  const scrollToBottom = () => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  };
-
-  useEffect(() => {
-    scrollToBottom();
-  }, [messages]);
-
-  useEffect(() => {
-    const handleScroll = () => {
-      if (scrollContainerRef.current) {
-        const { scrollTop, scrollHeight, clientHeight } = scrollContainerRef.current;
-        setShowScrollButton(scrollHeight - scrollTop - clientHeight > 100);
-      }
-    };
-
-    const container = scrollContainerRef.current;
-    container?.addEventListener('scroll', handleScroll);
-    return () => container?.removeEventListener('scroll', handleScroll);
-  }, []);
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!input.trim() || !isLoggedIn) return;
-
-    onSendMessage(input);
-    setInput('');
-    setIsTyping(true);
-    setTimeout(() => setIsTyping(false), 1500);
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      handleSubmit(e);
-    }
-  };
-
-  const modeLabels: Record<LearningMode, string> = {
-    concept: 'Concept Explainer',
-    socratic: 'Socratic Tutor',
-    exam: 'Exam Prep',
-    assignment: 'Assignment Helper',
-    summary: 'Quick Summary',
-  };
-
-  const handleClearClick = () => {
-    if (messages.length <= 1) {
-      toast.info('No conversation to clear');
-      return;
-    }
-
-    if (window.confirm('Are you sure you want to clear the conversation? This cannot be undone.')) {
-      onClearConversation();
-      toast.success('Conversation cleared');
-    }
-  };
-
-  const handleShareClick = () => {
-    if (messages.length <= 1) {
-      toast.info('No conversation to share');
-      return;
-    }
-
-    // Create a shareable text version of the conversation
-    const conversationText = messages
-      .map(msg => `${msg.role === 'user' ? (msg.sender?.name ?? 'You') : 'Clare'}: ${msg.content}`)
-      .join('\n\n');
-
-    // Copy to clipboard
-    navigator.clipboard.writeText(conversationText).then(() => {
-      toast.success('Conversation copied to clipboard!');
-    }).catch(() => {
-      toast.error('Failed to copy conversation');
-    });
-  };
-
-  return (
-    <div className="flex flex-col h-full overflow-hidden">
-      {/* Chat Area with Floating Input */}
-      <div className="flex-1 relative border-b-2 border-border min-h-0 flex flex-col">
-        {/* Action Buttons - Fixed at top right */}
-        {messages.length > 1 && (
-          <div className="absolute top-4 right-12 z-10 flex gap-2">
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={handleShareClick}
-              disabled={!isLoggedIn}
-              className="gap-2 bg-background/95 backdrop-blur-sm shadow-sm hover:shadow-md transition-all group"
-            >
-              <Share2 className="h-4 w-4" />
-              <span className="hidden group-hover:inline">Share</span>
-            </Button>
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={handleClearClick}
-              disabled={!isLoggedIn}
-              className="gap-2 bg-background/95 backdrop-blur-sm shadow-sm hover:shadow-md transition-all group"
-            >
-              <Trash2 className="h-4 w-4" />
-              <span className="hidden group-hover:inline">Clear</span>
-            </Button>
-          </div>
-        )}
-
-        {/* Messages Area */}
-        <div
-          ref={scrollContainerRef}
-          className="flex-1 overflow-y-auto overscroll-contain px-4 py-6 pb-36"
-          style={{ overscrollBehavior: 'contain' }}
-          onWheel={(e) => {
-            const container = scrollContainerRef.current;
-            if (!container) return;
-
-            const { scrollTop, scrollHeight, clientHeight } = container;
-            const isScrollable = scrollHeight > clientHeight;
-            const isAtTop = scrollTop === 0;
-            const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1;
-
-            // If scrolling up at top or down at bottom, prevent default to stop propagation
-            if (isScrollable && ((isAtTop && e.deltaY < 0) || (isAtBottom && e.deltaY > 0))) {
-              e.preventDefault();
-            }
-
-            e.stopPropagation();
-            e.nativeEvent.stopImmediatePropagation();
-          }}
-        >
-          <div className="max-w-4xl mx-auto space-y-6">
-            {messages.map((message) => (
-              <Message
-                key={message.id}
-                message={message}
-                showSenderInfo={spaceType === 'group'}
-              />
-            ))}
-
-            {isTyping && (
-              <div className="flex gap-3">
-                <div className="w-8 h-8 rounded-full overflow-hidden bg-white flex items-center justify-center flex-shrink-0">
-                  <img src={clareAvatar} alt="Clare" className="w-full h-full object-cover" />
-                </div>
-                <div className="bg-muted rounded-2xl px-4 py-3">
-                  <div className="flex gap-1">
-                    <div className="w-2 h-2 rounded-full bg-muted-foreground/50 animate-bounce" style={{ animationDelay: '0ms' }} />
-                    <div className="w-2 h-2 rounded-full bg-muted-foreground/50 animate-bounce" style={{ animationDelay: '150ms' }} />
-                    <div className="w-2 h-2 rounded-full bg-muted-foreground/50 animate-bounce" style={{ animationDelay: '300ms' }} />
-                  </div>
-                </div>
-              </div>
-            )}
-
-            <div ref={messagesEndRef} />
-          </div>
-        </div>
-
-        {/* Scroll to Bottom Button - Floating above input */}
-        {showScrollButton && (
-          <div className="absolute bottom-24 left-1/2 -translate-x-1/2 z-20">
-            <Button
-              variant="secondary"
-              size="icon"
-              className="rounded-full shadow-lg hover:shadow-xl transition-shadow bg-background"
-              onClick={scrollToBottom}
-            >
-              <ArrowDown className="h-4 w-4" />
-            </Button>
-          </div>
-        )}
-
-        {/* Floating Input Area */}
-        <div className="absolute bottom-0 left-0 right-0 bg-background/95 backdrop-blur-sm z-10">
-          <div className="max-w-4xl mx-auto px-4 py-4">
-            <form onSubmit={handleSubmit}>
-              <div className="relative">
-                {/* Mode Selector - ChatGPT style at bottom left */}
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="absolute bottom-3 left-2 gap-1.5 h-8 px-2 text-xs z-10 hover:bg-muted/50"
-                      disabled={!isLoggedIn}
-                      type="button"
-                    >
-                      <span>{modeLabels[learningMode]}</span>
-                      <svg
-                        className="h-3 w-3 opacity-50"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d="M19 9l-7 7-7-7"
-                        />
-                      </svg>
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="start" className="w-56">
-                    <DropdownMenuItem
-                      onClick={() => onLearningModeChange('concept')}
-                      className={learningMode === 'concept' ? 'bg-accent' : ''}
-                    >
-                      <div className="flex flex-col">
-                        <span className="font-medium">Concept Explainer</span>
-                        <span className="text-xs text-muted-foreground">
-                          Get detailed explanations of concepts
-                        </span>
-                      </div>
-                    </DropdownMenuItem>
-                    <DropdownMenuItem
-                      onClick={() => onLearningModeChange('socratic')}
-                      className={learningMode === 'socratic' ? 'bg-accent' : ''}
-                    >
-                      <div className="flex flex-col">
-                        <span className="font-medium">Socratic Tutor</span>
-                        <span className="text-xs text-muted-foreground">
-                          Learn through guided questions
-                        </span>
-                      </div>
-                    </DropdownMenuItem>
-                    <DropdownMenuItem
-                      onClick={() => onLearningModeChange('exam')}
-                      className={learningMode === 'exam' ? 'bg-accent' : ''}
-                    >
-                      <div className="flex flex-col">
-                        <span className="font-medium">Exam Prep</span>
-                        <span className="text-xs text-muted-foreground">
-                          Practice with quiz questions
-                        </span>
-                      </div>
-                    </DropdownMenuItem>
-                    <DropdownMenuItem
-                      onClick={() => onLearningModeChange('assignment')}
-                      className={learningMode === 'assignment' ? 'bg-accent' : ''}
-                    >
-                      <div className="flex flex-col">
-                        <span className="font-medium">Assignment Helper</span>
-                        <span className="text-xs text-muted-foreground">
-                          Get help with assignments
-                        </span>
-                      </div>
-                    </DropdownMenuItem>
-                    <DropdownMenuItem
-                      onClick={() => onLearningModeChange('summary')}
-                      className={learningMode === 'summary' ? 'bg-accent' : ''}
-                    >
-                      <div className="flex flex-col">
-                        <span className="font-medium">Quick Summary</span>
-                        <span className="text-xs text-muted-foreground">
-                          Get concise summaries
-                        </span>
-                      </div>
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-
-                <Textarea
-                  value={input}
-                  onChange={(e) => setInput(e.target.value)}
-                  onKeyDown={handleKeyDown}
-                  placeholder={
-                    isLoggedIn
-                      ? spaceType === 'group'
-                        ? "Type a message... (mention @Clare to get AI assistance)"
-                        : "Ask Clare anything about the course..."
-                      : "Please log in on the right to start chatting..."
-                  }
-                  disabled={!isLoggedIn}
-                  className="min-h-[80px] pl-4 pr-12 resize-none bg-background border-2 border-border"
-                />
-                <Button
-                  type="submit"
-                  size="icon"
-                  disabled={!input.trim() || !isLoggedIn}
-                  className="absolute bottom-2 right-2 rounded-full"
-                >
-                  <Send className="h-4 w-4" />
-                </Button>
-              </div>
-            </form>
-          </div>
-        </div>
-      </div>
-
-      {/* Course Materials Section */}
-      <div className="bg-card">
-        <div className="max-w-4xl mx-auto px-4 py-4">
-          <FileUploadArea
-            uploadedFiles={uploadedFiles}
-            onFileUpload={onFileUpload}
-            onRemoveFile={onRemoveFile}
-            onFileTypeChange={onFileTypeChange}
-            disabled={!isLoggedIn}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}

web/src/components/FileUploadArea.tsx

@@ -1,273 +0,0 @@
-import React, { useRef, useState } from 'react';
-import { Button } from './ui/button';
-import { Upload, File, X, FileText, FileSpreadsheet, Presentation } from 'lucide-react';
-import { Card } from './ui/card';
-import { Badge } from './ui/badge';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from './ui/dialog';
-import type { UploadedFile, FileType } from '../App';
-
-interface FileUploadAreaProps {
-  uploadedFiles: UploadedFile[];
-  onFileUpload: (files: File[]) => void;
-  onRemoveFile: (index: number) => void;
-  onFileTypeChange: (index: number, type: FileType) => void;
-  disabled?: boolean;
-}
-
-interface PendingFile {
-  file: File;
-  type: FileType;
-}
-
-export function FileUploadArea({
-  uploadedFiles,
-  onFileUpload,
-  onRemoveFile,
-  onFileTypeChange,
-  disabled = false,
-}: FileUploadAreaProps) {
-  const [isDragging, setIsDragging] = useState(false);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const [pendingFiles, setPendingFiles] = useState<PendingFile[]>([]);
-  const [showTypeDialog, setShowTypeDialog] = useState(false);
-
-  const handleDragOver = (e: React.DragEvent) => {
-    e.preventDefault();
-    if (!disabled) setIsDragging(true);
-  };
-
-  const handleDragLeave = () => {
-    setIsDragging(false);
-  };
-
-  const handleDrop = (e: React.DragEvent) => {
-    e.preventDefault();
-    setIsDragging(false);
-    if (disabled) return;
-
-    const files = Array.from(e.dataTransfer.files).filter((file) =>
-      ['.pdf', '.docx', '.pptx'].some((ext) => file.name.toLowerCase().endsWith(ext))
-    );
-
-    if (files.length > 0) {
-      setPendingFiles(files.map(file => ({ file, type: 'other' as FileType })));
-      setShowTypeDialog(true);
-    }
-  };
-
-  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const files = Array.from(e.target.files || []);
-    if (files.length > 0) {
-      setPendingFiles(files.map(file => ({ file, type: 'other' as FileType })));
-      setShowTypeDialog(true);
-    }
-    e.target.value = '';
-  };
-
-  const handleConfirmUpload = () => {
-    onFileUpload(pendingFiles.map(pf => pf.file));
-    // Update the parent's file types
-    const startIndex = uploadedFiles.length;
-    pendingFiles.forEach((pf, idx) => {
-      setTimeout(() => {
-        onFileTypeChange(startIndex + idx, pf.type);
-      }, 0);
-    });
-    setPendingFiles([]);
-    setShowTypeDialog(false);
-  };
-
-  const handleCancelUpload = () => {
-    setPendingFiles([]);
-    setShowTypeDialog(false);
-  };
-
-  const handlePendingFileTypeChange = (index: number, type: FileType) => {
-    setPendingFiles(prev => prev.map((pf, i) => 
-      i === index ? { ...pf, type } : pf
-    ));
-  };
-
-  const getFileIcon = (filename: string) => {
-    if (filename.endsWith('.pdf')) return FileText;
-    if (filename.endsWith('.docx')) return File;
-    if (filename.endsWith('.pptx')) return Presentation;
-    return File;
-  };
-
-  const formatFileSize = (bytes: number) => {
-    if (bytes < 1024) return bytes + ' B';
-    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
-    return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
-  };
-
-  const getFileTypeLabel = (type: FileType) => {
-    const labels: Record<FileType, string> = {
-      'syllabus': 'Syllabus',
-      'lecture-slides': 'Lecture Slides / PPT',
-      'literature-review': 'Literature Review / Paper',
-      'other': 'Other Course Document',
-    };
-    return labels[type];
-  };
-
-  return (
-    <Card className="p-4 space-y-3">
-      <div className="flex items-center justify-between">
-        <h4 className="text-sm">Course Materials</h4>
-        {uploadedFiles.length > 0 && (
-          <Badge variant="secondary">{uploadedFiles.length} file(s)</Badge>
-        )}
-      </div>
-
-      {/* Upload Area */}
-      <div
-        onDragOver={handleDragOver}
-        onDragLeave={handleDragLeave}
-        onDrop={handleDrop}
-        className={`
-          border-2 border-dashed rounded-lg p-4 text-center transition-colors
-          ${isDragging ? 'border-primary bg-accent' : 'border-border'}
-          ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
-        `}
-        onClick={() => !disabled && fileInputRef.current?.click()}
-      >
-        <Upload className="h-6 w-6 mx-auto mb-2 text-muted-foreground" />
-        <p className="text-sm text-muted-foreground mb-1">
-          {disabled ? 'Please log in to upload' : 'Drop files or click to upload'}
-        </p>
-        <p className="text-xs text-muted-foreground">
-          .pdf, .docx, .pptx
-        </p>
-        <input
-          ref={fileInputRef}
-          type="file"
-          multiple
-          accept=".pdf,.docx,.pptx"
-          onChange={handleFileSelect}
-          className="hidden"
-          disabled={disabled}
-        />
-      </div>
-
-      {/* Uploaded Files List */}
-      {uploadedFiles.length > 0 && (
-        <div className="space-y-3 max-h-64 overflow-y-auto">
-          {uploadedFiles.map((uploadedFile, index) => {
-            const Icon = getFileIcon(uploadedFile.file.name);
-            return (
-              <div
-                key={index}
-                className="p-3 bg-muted rounded-md space-y-2"
-              >
-                <div className="flex items-center gap-2 group">
-                  <Icon className="h-4 w-4 text-muted-foreground flex-shrink-0" />
-                  <div className="flex-1 min-w-0">
-                    <p className="text-sm truncate">{uploadedFile.file.name}</p>
-                    <p className="text-xs text-muted-foreground">
-                      {formatFileSize(uploadedFile.file.size)}
-                    </p>
-                  </div>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      onRemoveFile(index);
-                    }}
-                  >
-                    <X className="h-3 w-3" />
-                  </Button>
-                </div>
-                <div className="space-y-1">
-                  <label className="text-xs text-muted-foreground">File Type</label>
-                  <Select 
-                    value={uploadedFile.type} 
-                    onValueChange={(value) => onFileTypeChange(index, value as FileType)}
-                  >
-                    <SelectTrigger className="h-8 text-xs">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="syllabus">Syllabus</SelectItem>
-                      <SelectItem value="lecture-slides">Lecture Slides / PPT</SelectItem>
-                      <SelectItem value="literature-review">Literature Review / Paper</SelectItem>
-                      <SelectItem value="other">Other Course Document</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      )}
-
-      {/* Type Selection Dialog */}
-      {showTypeDialog && (
-        <Dialog open={showTypeDialog} onOpenChange={setShowTypeDialog}>
-          <DialogContent className="sm:max-w-[425px]">
-            <DialogHeader>
-              <DialogTitle>Select File Types</DialogTitle>
-              <DialogDescription>
-                Please select the type for each file you are uploading.
-              </DialogDescription>
-            </DialogHeader>
-            <div className="space-y-3 max-h-64 overflow-y-auto">
-              {pendingFiles.map((pendingFile, index) => {
-                const Icon = getFileIcon(pendingFile.file.name);
-                return (
-                  <div
-                    key={index}
-                    className="p-3 bg-muted rounded-md space-y-2"
-                  >
-                    <div className="flex items-center gap-2 group">
-                      <Icon className="h-4 w-4 text-muted-foreground flex-shrink-0" />
-                      <div className="flex-1 min-w-0">
-                        <p className="text-sm truncate">{pendingFile.file.name}</p>
-                        <p className="text-xs text-muted-foreground">
-                          {formatFileSize(pendingFile.file.size)}
-                        </p>
-                      </div>
-                    </div>
-                    <div className="space-y-1">
-                      <label className="text-xs text-muted-foreground">File Type</label>
-                      <Select 
-                        value={pendingFile.type} 
-                        onValueChange={(value) => handlePendingFileTypeChange(index, value as FileType)}
-                      >
-                        <SelectTrigger className="h-8 text-xs">
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectItem value="syllabus">Syllabus</SelectItem>
-                          <SelectItem value="lecture-slides">Lecture Slides / PPT</SelectItem>
-                          <SelectItem value="literature-review">Literature Review / Paper</SelectItem>
-                          <SelectItem value="other">Other Course Document</SelectItem>
-                        </SelectContent>
-                      </Select>
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-            <DialogFooter>
-              <Button
-                variant="outline"
-                onClick={handleCancelUpload}
-              >
-                Cancel
-              </Button>
-              <Button
-                onClick={handleConfirmUpload}
-              >
-                Upload
-              </Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-      )}
-    </Card>
-  );
-}

web/src/components/FloatingActionButtons.tsx

@@ -1,102 +0,0 @@
-import React, { useState } from 'react';
-import { Button } from './ui/button';
-import { Download, Sparkles } from 'lucide-react';
-import { toast } from 'sonner';
-import type { User } from '../App';
-
-interface FloatingActionButtonsProps {
-  user: User | null;
-  isLoggedIn: boolean;
-  onOpenPanel: () => void;
-  onExport: () => void;
-  onSummary: () => void;
-}
-
-export function FloatingActionButtons({
-  user,
-  isLoggedIn,
-  onOpenPanel,
-  onExport,
-  onSummary,
-}: FloatingActionButtonsProps) {
-  const [hoveredButton, setHoveredButton] = useState<string | null>(null);
-
-  const handleAction = (action: () => void, actionName: string, shouldOpenPanel: boolean = false) => {
-    if (!isLoggedIn) {
-      toast.error('Please log in to use this feature');
-      return;
-    }
-    action();
-    if (shouldOpenPanel) {
-      onOpenPanel();
-    }
-  };
-
-  const buttons = [
-    {
-      id: 'export',
-      icon: Download,
-      label: 'Export Conversation',
-      action: onExport,
-      openPanel: true, // Open panel for export
-    },
-    {
-      id: 'summary',
-      icon: Sparkles,
-      label: 'Summarization',
-      action: onSummary,
-      openPanel: true, // Open panel for summary
-    },
-  ];
-
-  return (
-    <div className="fixed right-4 bottom-[28rem] z-40 flex flex-col gap-2">
-      {buttons.map((button, index) => {
-        const Icon = button.icon;
-        const isHovered = hoveredButton === button.id;
-        
-        return (
-          <div
-            key={button.id}
-            className="relative group"
-            onMouseEnter={() => setHoveredButton(button.id)}
-            onMouseLeave={() => setHoveredButton(null)}
-          >
-            {/* Tooltip */}
-            <div
-              className={`
-                absolute right-full mr-3 top-1/2 -translate-y-1/2
-                px-3 py-2 rounded-lg bg-popover border border-border
-                whitespace-nowrap text-sm shadow-lg
-                transition-all duration-200
-                ${isHovered ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-2 pointer-events-none'}
-              `}
-            >
-              {button.label}
-            </div>
-
-            {/* Floating Button */}
-            <Button
-              size="icon"
-              className={`
-                h-6 w-6 rounded-full shadow-md opacity-60 hover:opacity-100
-                transition-all duration-200
-                ${isLoggedIn 
-                  ? 'bg-primary hover:bg-primary/90 text-primary-foreground' 
-                  : 'bg-muted hover:bg-muted/90 text-muted-foreground'
-                }
-                ${isHovered ? 'scale-110' : 'scale-100'}
-              `}
-              onClick={() => handleAction(button.action, button.label, button.openPanel)}
-              style={{
-                animationDelay: `${index * 100}ms`,
-              }}
-            >
-              <Icon className="h-3 w-3" />
-            </Button>
-          </div>
-        );
-      })}
-    </div>
-  );
-}

web/src/components/GroupMembers.tsx

@@ -1,60 +0,0 @@
-import React from 'react';
-import { Users } from 'lucide-react';
-import { Badge } from './ui/badge';
-import clareAvatar from '../assets/dfe44dab3ad8cd93953eac4a3e68bd1a5f999653.png';
-import type { GroupMember } from '../App';
-
-interface GroupMembersProps {
-  members: GroupMember[];
-}
-
-export function GroupMembers({ members }: GroupMembersProps) {
-  return (
-    <div className="space-y-3">
-      <div className="flex items-center gap-2">
-        <Users className="h-4 w-4 text-muted-foreground" />
-        <h3 className="text-sm">Group Members ({members.length})</h3>
-      </div>
-      
-      <div className="space-y-2">
-        {members.map((member) => {
-          const isAI = !!member.isAI;
-          return (
-          <div
-            key={member.id}
-            className="flex items-center gap-3 p-2 rounded-lg hover:bg-muted/50 transition-colors"
-          >
-            {/* Avatar */}
-            <div className={`w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 ${
-              isAI 
-                ? 'overflow-hidden bg-white' 
-                : 'bg-muted'
-            }`}>
-              {isAI ? (
-                <img src={clareAvatar} alt="Clare" className="w-full h-full object-cover" />
-              ) : (
-                <span className="text-sm">
-                  {member.name.split(' ').map(n => n[0]).join('').toUpperCase()}
-                </span>
-              )}
-            </div>
-            
-            {/* Member Info */}
-            <div className="flex-1 min-w-0">
-              <div className="flex items-center gap-2">
-                <p className="text-sm truncate">{member.name}</p>
-                {isAI && (
-                  <Badge variant="secondary" className="text-xs">AI</Badge>
-                )}
-              </div>
-              <p className="text-xs text-muted-foreground truncate">{member.email}</p>
-            </div>
-            
-            {/* Online Status */}
-            <div className="w-2 h-2 rounded-full bg-green-500 flex-shrink-0" title="Online" />
-          </div>
-        )})}
-      </div>
-    </div>
-  );
-}

web/src/components/Header.tsx

@@ -1,152 +0,0 @@
-import React from 'react';
-import { Button } from './ui/button';
-import { Menu, Sun, Moon, Languages, ChevronDown } from 'lucide-react';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from './ui/dropdown-menu';
-import clareAvatar from '../assets/dfe44dab3ad8cd93953eac4a3e68bd1a5f999653.png';
-import type { Workspace } from '../App';
-
-interface HeaderProps {
-  user: UserType | null;
-  onMenuClick: () => void;
-  onUserClick: () => void;
-  isDarkMode: boolean;
-  onToggleDarkMode: () => void;
-  language: Language;
-  onLanguageChange: (lang: Language) => void;
-  workspaces: Workspace[];
-  currentWorkspace: Workspace | undefined;
-  onWorkspaceChange: (workspaceId: string) => void;
-}
-
-type UserType = {
-  name: string;
-  email: string;
-};
-
-type Language = 'auto' | 'en' | 'zh';
-
-export function Header({
-  user,
-  onMenuClick,
-  onUserClick,
-  isDarkMode,
-  onToggleDarkMode,
-  language,
-  onLanguageChange,
-  workspaces,
-  currentWorkspace,
-  onWorkspaceChange,
-}: HeaderProps) {
-  const languageLabels = {
-    auto: 'Auto',
-    en: 'English',
-    zh: '简体中文',
-  };
-
-  return (
-    <header className="h-16 border-b border-border bg-card px-4 lg:px-6 flex items-center justify-between sticky top-0 z-[100]">
-      <div className="flex items-center gap-4">
-        <Button
-          variant="ghost"
-          size="icon"
-          className="lg:hidden"
-          onClick={onMenuClick}
-        >
-          <Menu className="h-5 w-5" />
-        </Button>
-        
-        <div className="flex items-center gap-3">
-          <div className="w-10 h-10 rounded-full overflow-hidden bg-white flex items-center justify-center">
-            <img src={clareAvatar} alt="Clare AI" className="w-full h-full object-cover" />
-          </div>
-          <div>
-            <h1 className="text-lg sm:text-xl tracking-tight">
-              Clare <span className="text-sm font-bold text-muted-foreground hidden sm:inline ml-2">Your Personalized AI Tutor</span>
-            </h1>
-            <p className="text-xs text-muted-foreground hidden sm:block">
-              Personalized guidance, review, and intelligent reinforcement
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <div className="flex items-center gap-2">
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              variant="ghost"
-              size="icon"
-              aria-label="Change language"
-            >
-              <Languages className="h-5 w-5" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuItem onClick={() => onLanguageChange('auto')}>
-              {language === 'auto' && '✓ '}Auto
-            </DropdownMenuItem>
-            <DropdownMenuItem onClick={() => onLanguageChange('en')}>
-              {language === 'en' && '✓ '}English
-            </DropdownMenuItem>
-            <DropdownMenuItem onClick={() => onLanguageChange('zh')}>
-              {language === 'zh' && '✓ '}简体中文
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-        
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={onToggleDarkMode}
-          aria-label="Toggle dark mode"
-        >
-          {isDarkMode ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
-        </Button>
-        
-        {user && currentWorkspace ? (
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                variant="outline"
-                className="gap-2 pl-2 pr-3"
-                aria-label="Switch workspace"
-              >
-                <img 
-                  src={currentWorkspace.avatar} 
-                  alt={currentWorkspace.name}
-                  className="w-6 h-6 rounded-full object-cover"
-                />
-                <span className="hidden sm:inline max-w-[120px] truncate">{currentWorkspace.name}</span>
-                <ChevronDown className="h-4 w-4 opacity-50" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="min-w-[14rem]">
-              {workspaces.map((workspace) => (
-                <DropdownMenuItem 
-                  key={workspace.id}
-                  onClick={() => onWorkspaceChange(workspace.id)}
-                  className={`gap-3 ${currentWorkspace.id === workspace.id ? 'bg-accent' : ''}`}
-                >
-                  <img 
-                    src={workspace.avatar} 
-                    alt={workspace.name}
-                    className="w-6 h-6 rounded-full object-cover flex-shrink-0"
-                  />
-                  <span className="truncate">{workspace.name}</span>
-                  {currentWorkspace.id === workspace.id && (
-                    <span className="ml-auto text-primary">✓</span>
-                  )}
-                </DropdownMenuItem>
-              ))}
-            </DropdownMenuContent>
-          </DropdownMenu>
-        ) : null}
-      </div>
-    </header>
-  );
-}

web/src/components/LearningModeSelector.tsx

@@ -1,93 +0,0 @@
-import React from 'react';
-import { Card } from './ui/card';
-import { 
-  Lightbulb, 
-  MessageCircleQuestion, 
-  GraduationCap, 
-  FileEdit, 
-  Zap 
-} from 'lucide-react';
-import type { LearningMode } from '../App';
-
-interface ModeSelectorProps {
-  selectedMode: LearningMode;
-  onModeChange: (mode: LearningMode) => void;
-}
-
-const modes = [
-  {
-    id: 'concept' as LearningMode,
-    icon: Lightbulb,
-    title: 'Concept Explainer',
-    description: 'Break down complex topics',
-    color: 'from-blue-500 to-blue-600',
-  },
-  {
-    id: 'socratic' as LearningMode,
-    title: 'Socratic Tutor',
-    description: 'Learn through questions',
-    color: 'from-red-500 to-rose-600',
-  },
-  {
-    id: 'exam' as LearningMode,
-    icon: GraduationCap,
-    title: 'Exam Prep/Quiz',
-    description: 'Test your knowledge',
-    color: 'from-green-500 to-green-600',
-  },
-  {
-    id: 'assignment' as LearningMode,
-    icon: FileEdit,
-    title: 'Assignment Helper',
-    description: 'Get homework guidance',
-    color: 'from-orange-500 to-orange-600',
-  },
-  {
-    id: 'summary' as LearningMode,
-    icon: Zap,
-    title: 'Quick Summary',
-    description: 'Fast key points review',
-    color: 'from-pink-500 to-pink-600',
-  },
-];
-
-export function LearningModeSelector({ selectedMode, onModeChange }: ModeSelectorProps) {
-  return (
-    <div className="space-y-2">
-      {modes.map((mode) => {
-        const Icon = mode.icon;
-        const isSelected = selectedMode === mode.id;
-        
-        return (
-          <Card
-            key={mode.id}
-            className={`
-              p-3 cursor-pointer transition-all duration-200
-              ${isSelected 
-                ? 'border-primary bg-accent shadow-sm' 
-                : 'hover:border-primary/50 hover:shadow-sm'
-              }
-            `}
-            onClick={() => onModeChange(mode.id)}
-          >
-            <div className="flex items-start gap-3">
-              <div className={`
-                w-10 h-10 rounded-lg bg-gradient-to-br ${mode.color}
-                flex items-center justify-center flex-shrink-0
-              `}>
-                <Icon className="h-5 w-5 text-white" />
-              </div>
-              <div className="flex-1 min-w-0">
-                <h4 className="text-sm mb-1">{mode.title}</h4>
-                <p className="text-xs text-muted-foreground">{mode.description}</p>
-              </div>
-              {isSelected && (
-                <div className="w-2 h-2 rounded-full bg-primary flex-shrink-0 mt-2" />
-              )}
-            </div>
-          </Card>
-        );
-      })}
-    </div>
-  );
-}

web/src/components/LeftSidebar.tsx

@@ -1,243 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
-import { UserGuide } from './UserGuide';
-import { SmartReview } from './SmartReview';
-import { Label } from './ui/label';
-import { Button } from './ui/button';
-import { LogIn, Edit, BookOpen } from 'lucide-react';
-import { GroupMembers } from './GroupMembers';
-import { Card } from './ui/card';
-import { Input } from './ui/input';
-import type { LearningMode, Language, SpaceType, GroupMember, User as UserType } from '../App';
-import { toast } from 'sonner';
-
-interface LeftSidebarProps {
-  learningMode: LearningMode;
-  language: Language;
-  onLearningModeChange: (mode: LearningMode) => void;
-  onLanguageChange: (lang: Language) => void;
-  spaceType: SpaceType;
-  groupMembers: GroupMember[];
-  user: UserType | null;
-  onLogin: (user: UserType) => void;
-  onLogout: () => void;
-  isLoggedIn: boolean;
-  onEditProfile: () => void;
-}
-
-export function LeftSidebar({
-  learningMode,
-  language,
-  onLearningModeChange,
-  onLanguageChange,
-  spaceType,
-  groupMembers,
-  user,
-  onLogin,
-  onLogout,
-  isLoggedIn,
-  onEditProfile,
-}: LeftSidebarProps) {
-  const [showLoginForm, setShowLoginForm] = useState(false);
-  const [name, setName] = useState('');
-  const [email, setEmail] = useState('');
-
-  const handleLogin = () => {
-    if (!name.trim() || !email.trim()) {
-      toast.error('Please fill in all fields');
-      return;
-    }
-
-    onLogin({ name: name.trim(), email: email.trim() });
-    setShowLoginForm(false);
-    setName('');
-    setEmail('');
-    toast.success(`Welcome, ${name}!`);
-  };
-
-  const handleLogout = () => {
-    onLogout();
-    setShowLoginForm(false);
-    toast.success('Logged out successfully');
-  };
-
-  const scrollContainerRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const container = scrollContainerRef.current;
-    if (!container) return;
-
-    const handleWheel = (e: WheelEvent) => {
-      e.stopPropagation();
-      e.stopImmediatePropagation();
-
-      const { scrollTop, scrollHeight, clientHeight } = container;
-      const isScrollable = scrollHeight > clientHeight;
-      const isAtTop = scrollTop === 0;
-      const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1;
-
-      if (isScrollable && ((isAtTop && e.deltaY < 0) || (isAtBottom && e.deltaY > 0))) {
-        e.preventDefault();
-      }
-    };
-
-    container.addEventListener('wheel', handleWheel, { passive: false, capture: true });
-    return () => {
-      container.removeEventListener('wheel', handleWheel, { capture: true } as any);
-    };
-  }, []);
-
-  return (
-    <div
-      ref={scrollContainerRef}
-      className="flex-1 overflow-auto overscroll-contain flex flex-col"
-      style={{ overscrollBehavior: 'contain' }}
-    >
-      {/* Profile/Login Section */}
-      <div className="p-4 border-b border-border flex-shrink-0">
-        <h3 className="text-base font-medium mb-4">Profile</h3>
-        <Card className="p-4">
-          {!isLoggedIn ? (
-            <div className="space-y-4">
-              <div className="flex flex-col items-center py-4">
-                <img
-                  src="https://images.unsplash.com/photo-1588912914049-d2664f76a947?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzdHVkZW50JTIwc3R1ZHlpbmclMjBpbGx1c3RyYXRpb258ZW58MXx8fHwxNzY2MDY2NjcyfDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
-                  alt="Student studying"
-                  className="w-20 h-20 rounded-full object-cover mb-4"
-                />
-                <h3 className="mb-2">Welcome to Clare!</h3>
-                <p className="text-sm text-muted-foreground text-center mb-4">
-                  Log in to start your personalized learning journey
-                </p>
-              </div>
-
-              {!showLoginForm ? (
-                <Button onClick={() => setShowLoginForm(true)} className="w-full gap-2">
-                  <LogIn className="h-4 w-4" />
-                  Student Login
-                </Button>
-              ) : (
-                <div className="space-y-3">
-                  <div className="space-y-2">
-                    <Label htmlFor="name">Name</Label>
-                    <Input
-                      id="name"
-                      value={name}
-                      onChange={(e) => setName(e.target.value)}
-                      placeholder="Enter your name"
-                    />
-                  </div>
-                  <div className="space-y-2">
-                    <Label htmlFor="email">Email / Student ID</Label>
-                    <Input
-                      id="email"
-                      type="email"
-                      value={email}
-                      onChange={(e) => setEmail(e.target.value)}
-                      placeholder="Enter your email or ID"
-                    />
-                  </div>
-                  <div className="flex gap-2">
-                    <Button onClick={handleLogin} className="flex-1">
-                      Enter
-                    </Button>
-                    <Button variant="outline" onClick={() => setShowLoginForm(false)}>
-                      Cancel
-                    </Button>
-                  </div>
-                </div>
-              )}
-            </div>
-          ) : (
-            <div className="space-y-3">
-              <div className="flex items-start justify-between">
-                <div className="flex items-center gap-2">
-                  <img
-                    src={`https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(
-                      user?.email || ''
-                    )}`}
-                    alt={user?.name || 'User'}
-                    className="w-8 h-8 rounded-full object-cover flex-shrink-0 bg-muted"
-                  />
-                  <div className="space-y-1">
-                    <p className="text-sm text-muted-foreground">Hello,</p>
-                    <h4>{user?.name ?? ''}!</h4>
-                  </div>
-                </div>
-                <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onEditProfile}>
-                  <Edit className="h-4 w-4" />
-                </Button>
-              </div>
-              <div className="text-xs text-muted-foreground">
-                ID: {user?.email ? user.email.split('@')[0] : ''}
-              </div>
-
-              <Button variant="outline" className="w-full" onClick={handleLogout}>
-                Log out
-              </Button>
-            </div>
-          )}
-        </Card>
-      </div>
-
-      {/* Group Members - Only show in group mode */}
-      {spaceType === 'group' && (
-        <div className="p-4 border-b border-border flex-shrink-0">
-          <GroupMembers members={groupMembers} />
-        </div>
-      )}
-
-      {/* Tabs */}
-      <Tabs defaultValue="review" className="flex flex-col flex-1 min-h-0 overflow-hidden">
-        <div className="px-4 pt-4">
-          {/* 关键：TabsList 已在 ui/tabs.tsx 改成 w-full flex，这里只需要三等分 */}
-          <TabsList className="w-full">
-            <TabsTrigger value="review" className="flex-1 px-2 text-xs whitespace-nowrap">
-              Smart Review
-            </TabsTrigger>
-            <TabsTrigger value="quiz" className="flex-1 px-2 text-xs whitespace-nowrap">
-              Personal Quiz
-            </TabsTrigger>
-            <TabsTrigger value="guide" className="flex-1 px-2 text-xs whitespace-nowrap">
-              User Guide
-            </TabsTrigger>
-          </TabsList>
-        </div>
-
-        <TabsContent value="review" className="flex-1 mt-0 p-4 space-y-6 overflow-auto">
-          <SmartReview />
-        </TabsContent>
-
-        <TabsContent value="quiz" className="flex-1 mt-0 p-4 overflow-auto">
-          <div className="space-y-4">
-            <div className="flex items-center gap-2">
-              <BookOpen className="h-5 w-5 text-red-500" />
-              <h3 className="text-base font-medium">Personal Quiz</h3>
-            </div>
-
-            <Card className="p-3 bg-muted/50 border-border">
-              <p className="text-xs text-muted-foreground leading-relaxed">
-                Clare analyzes your chat history and learning patterns to randomly select a personalized question that
-                challenges your understanding of previously discussed topics.
-              </p>
-            </Card>
-
-            <Button
-              className="w-full bg-red-500 hover:bg-red-600 text-white"
-              size="sm"
-              onClick={() => {
-                toast.success('Generating personalized quiz...');
-              }}
-            >
-              Test your memory
-            </Button>
-          </div>
-        </TabsContent>
-
-        <TabsContent value="guide" className="flex-1 mt-0 p-4 overflow-auto">
-          <UserGuide />
-        </TabsContent>
-      </Tabs>
-    </div>
-  );
-}

web/src/components/LoginScreen.tsx

@@ -1,125 +0,0 @@
-import React, { useState } from 'react';
-import { Button } from './ui/button';
-import { Input } from './ui/input';
-import { Label } from './ui/label';
-import { Card } from './ui/card';
-import { toast } from 'sonner';
-import clareAvatar from '../assets/dfe44dab3ad8cd93953eac4a3e68bd1a5f999653.png';
-import type { User } from '../App';
-
-interface LoginScreenProps {
-  onLogin: (user: User) => void;
-}
-
-export function LoginScreen({ onLogin }: LoginScreenProps) {
-  const [showForm, setShowForm] = useState(false);
-  const [name, setName] = useState('');
-  const [emailOrId, setEmailOrId] = useState('');
-  const [submitting, setSubmitting] = useState(false);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    const n = name.trim();
-    const uid = emailOrId.trim();
-
-    if (!n || !uid) return;
-
-    setSubmitting(true);
-    try {
-      // HF Space: same-origin call is correct (your FastAPI serves the SPA)
-      const resp = await fetch('/api/login', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ name: n, user_id: uid }),
-      });
-
-      const data = await resp.json().catch(() => ({}));
-
-      if (!resp.ok || !data?.ok) {
-        const msg = data?.error || `Login failed (HTTP ${resp.status})`;
-        throw new Error(msg);
-      }
-
-      // Keep your existing App flow: user = { name, email }
-      onLogin({ name: data.user?.name ?? n, email: data.user?.user_id ?? uid });
-      toast.success('Signed in');
-    } catch (err: any) {
-      toast.error(err?.message || 'Login failed');
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  return (
-    <div className="min-h-screen bg-background flex items-center justify-center p-4">
-      <Card className="w-full max-w-md p-8">
-        <div className="flex flex-col items-center space-y-6">
-          {/* Clare Avatar */}
-          <div className="w-24 h-24 rounded-full overflow-hidden bg-white flex items-center justify-center">
-            <img src={clareAvatar} alt="Clare AI" className="w-full h-full object-cover" />
-          </div>
-
-          {/* Welcome Text */}
-          <div className="text-center space-y-2">
-            <h1 className="text-2xl">Welcome to Clare</h1>
-            <p className="text-sm text-muted-foreground">
-              Your AI teaching assistant for personalized learning
-            </p>
-          </div>
-
-          {!showForm ? (
-            <Button onClick={() => setShowForm(true)} className="w-full" size="lg">
-              Sign In
-            </Button>
-          ) : (
-            <form onSubmit={handleSubmit} className="w-full space-y-4">
-              <div className="space-y-2">
-                <Label htmlFor="login-name">Name</Label>
-                <Input
-                  id="login-name"
-                  value={name}
-                  onChange={(e) => setName(e.target.value)}
-                  placeholder="Enter your name"
-                  required
-                  disabled={submitting}
-                />
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="login-userid">Email / Student ID</Label>
-                <Input
-                  id="login-userid"
-                  // IMPORTANT: allow non-email IDs
-                  type="text"
-                  value={emailOrId}
-                  onChange={(e) => setEmailOrId(e.target.value)}
-                  placeholder="Enter your email or ID"
-                  required
-                  disabled={submitting}
-                />
-              </div>
-
-              <div className="flex gap-2">
-                <Button type="submit" className="flex-1" disabled={submitting}>
-                  {submitting ? 'Signing in…' : 'Enter'}
-                </Button>
-                <Button
-                  type="button"
-                  variant="outline"
-                  onClick={() => setShowForm(false)}
-                  disabled={submitting}
-                >
-                  Cancel
-                </Button>
-              </div>
-
-              <div className="text-xs text-muted-foreground">
-                This sign-in is for session identification only (name + ID), used to personalize tutoring and log events.
-              </div>
-            </form>
-          )}
-        </div>
-      </Card>
-    </div>
-  );
-}

web/src/components/Message.tsx

@@ -1,368 +0,0 @@
-import React, { useState } from 'react';
-import { Button } from './ui/button';
-import {
-  Copy,
-  ThumbsUp,
-  ThumbsDown,
-  ChevronDown,
-  ChevronUp,
-  Check,
-  X,
-} from 'lucide-react';
-import { Badge } from './ui/badge';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible';
-import { Textarea } from './ui/textarea';
-import type { Message as MessageType } from '../App';
-import { toast } from 'sonner';
-import clareAvatar from '../assets/dfe44dab3ad8cd93953eac4a3e68bd1a5f999653.png';
-
-// ✅ Markdown rendering (NEW)
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-
-// ✅ NEW: call backend feedback API
-import {
-  apiFeedback,
-  type User as ApiUser,
-  type LearningMode as ApiLearningMode,
-  type FileType as ApiFileType,
-  type FeedbackRating,
-} from '../lib/api';
-
-interface MessageProps {
-  message: MessageType;
-  showSenderInfo?: boolean; // For group chat mode
-
-  // ✅ NEW (recommended) — for logging feedback correctly
-  user?: ApiUser | null;
-
-  // context (optional but useful for metadata)
-  learningMode?: ApiLearningMode;
-  docType?: ApiFileType | string;
-
-  // optional: supply refs (if your message.references is not the same as backend refs)
-  refs?: string[];
-
-  /**
-   * Optional: provide the user question that led to this assistant message.
-   * Best practice: parent passes a function that finds previous user message.
-   */
-  getContextUserText?: () => string;
-}
-
-// 反馈标签选项
-const FEEDBACK_TAGS: Record<FeedbackRating, string[]> = {
-  not_helpful: [
-    'Code was incorrect',
-    "Shouldn't have used Memory",
-    "Don't like the personality",
-    "Don't like the style",
-    'Not factually correct',
-  ],
-  helpful: [
-    'Accurate and helpful',
-    'Clear explanation',
-    'Good examples',
-    'Solved my problem',
-    'Well structured',
-  ],
-};
-
-export function Message({
-  message,
-  showSenderInfo = false,
-
-  // NEW
-  user = null,
-  learningMode,
-  docType,
-  refs,
-  getContextUserText,
-}: MessageProps) {
-  const [feedback, setFeedback] = useState<FeedbackRating | null>(null);
-  const [copied, setCopied] = useState(false);
-  const [referencesOpen, setReferencesOpen] = useState(false);
-  const [showFeedbackArea, setShowFeedbackArea] = useState(false);
-
-  // ✅ unify to backend enum
-  const [feedbackType, setFeedbackType] = useState<FeedbackRating | null>(null);
-
-  const [feedbackText, setFeedbackText] = useState('');
-  const [selectedTags, setSelectedTags] = useState<string[]>([]);
-  const [submitting, setSubmitting] = useState(false);
-
-  const isUser = message.role === 'user';
-
-  const handleCopy = async () => {
-    await navigator.clipboard.writeText(message.content);
-    setCopied(true);
-    toast.success('Message copied to clipboard');
-    setTimeout(() => setCopied(false), 2000);
-  };
-
-  const handleFeedbackClick = (type: FeedbackRating) => {
-    if (feedback === type) {
-      // clicked same state -> collapse + reset detail
-      setFeedback(null);
-      setShowFeedbackArea(false);
-      setFeedbackType(null);
-      setFeedbackText('');
-      setSelectedTags([]);
-      return;
-    }
-
-    // open feedback area
-    setFeedback(type);
-    setFeedbackType(type);
-    setShowFeedbackArea(true);
-  };
-
-  const handleFeedbackClose = () => {
-    setShowFeedbackArea(false);
-    setFeedbackType(null);
-    setFeedbackText('');
-    setSelectedTags([]);
-    // do NOT reset feedback (keeps thumbs state)
-  };
-
-  const handleTagToggle = (tag: string) => {
-    setSelectedTags((prev) =>
-      prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag],
-    );
-  };
-
-  const handleFeedbackSubmit = async () => {
-    if (!feedbackType) return;
-
-    // If not logged in / no user, we cannot attribute feedback to a student_id
-    if (!user?.email) {
-      toast.error('Please login to submit feedback.');
-      return;
-    }
-
-    const assistantText = (message.content || '').trim();
-    const userText = (getContextUserText ? getContextUserText() : '').trim();
-
-    // refs: prefer explicit refs prop; fallback to message.references
-    const refsToSend =
-      refs && refs.length > 0 ? refs : (message.references ?? []);
-
-    setSubmitting(true);
-    try {
-      await apiFeedback({
-        user,
-        rating: feedbackType,
-        assistantMessageId: message.id, // recommended
-        assistantText,
-        userText,
-        tags: selectedTags,
-        comment: feedbackText,
-        refs: refsToSend,
-        learningMode,
-        docType,
-        timestampMs: Date.now(),
-      });
-
-      toast.success('Thanks — feedback recorded.');
-      handleFeedbackClose();
-      // keep thumbs state
-    } catch (e: any) {
-      console.error('[feedback] submit failed:', e);
-      toast.error(e?.message ? `Feedback failed: ${e.message}` : 'Feedback failed.');
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  return (
-    <div className={`flex gap-3 ${isUser && !showSenderInfo ? 'justify-end' : 'justify-start'}`}>
-      {/* Avatar */}
-      {showSenderInfo && message.sender ? (
-        <div
-          className={`w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 ${
-            message.sender.isAI ? 'overflow-hidden bg-white' : 'bg-muted'
-          }`}
-        >
-          {message.sender.isAI ? (
-            <img src={clareAvatar} alt="Clare" className="w-full h-full object-cover" />
-          ) : (
-            <span className="text-sm">
-              {message.sender.name
-                .split(' ')
-                .map((n) => n[0])
-                .join('')
-                .toUpperCase()}
-            </span>
-          )}
-        </div>
-      ) : !isUser ? (
-        <div className="w-8 h-8 rounded-full overflow-hidden bg-white flex items-center justify-center flex-shrink-0">
-          <img src={clareAvatar} alt="Clare" className="w-full h-full object-cover" />
-        </div>
-      ) : null}
-
-      <div className={`flex flex-col gap-2 max-w-[80%] ${isUser && !showSenderInfo ? 'items-end' : 'items-start'}`}>
-        {/* Sender name in group chat */}
-        {showSenderInfo && message.sender && (
-          <div className="flex items-center gap-2 px-1">
-            <span className="text-xs">{message.sender.name}</span>
-            {message.sender.isAI && (
-              <Badge variant="secondary" className="text-xs h-4 px-1">
-                AI
-              </Badge>
-            )}
-          </div>
-        )}
-
-        <div
-          className={`
-            rounded-2xl px-4 py-3
-            ${isUser && !showSenderInfo ? 'bg-primary text-primary-foreground' : 'bg-muted'}
-          `}
-        >
-          {/* ✅ KEY FIX: assistant uses Markdown renderer */}
-          {isUser ? (
-            <p className="whitespace-pre-wrap">{message.content}</p>
-          ) : (
-            <div className="prose prose-sm max-w-none dark:prose-invert">
-              <ReactMarkdown
-                remarkPlugins={[remarkGfm]}
-                components={{
-                  // keep line breaks looking natural in chat bubbles
-                  p: ({ children }) => <p className="whitespace-pre-wrap">{children}</p>,
-                  // code blocks + inline code styling
-                  code: ({ className, children }) => (
-                    <code className={className ? className : 'px-1 py-0.5 rounded bg-black/5 dark:bg-white/10'}>
-                      {children}
-                    </code>
-                  ),
-                }}
-              >
-                {message.content}
-              </ReactMarkdown>
-            </div>
-          )}
-        </div>
-
-        {/* References */}
-        {message.references && message.references.length > 0 && (
-          <Collapsible open={referencesOpen} onOpenChange={setReferencesOpen}>
-            <CollapsibleTrigger asChild>
-              <Button variant="ghost" size="sm" className="gap-1 h-7 text-xs">
-                {referencesOpen ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
-                {message.references.length} {message.references.length === 1 ? 'reference' : 'references'}
-              </Button>
-            </CollapsibleTrigger>
-            <CollapsibleContent className="space-y-1 mt-1">
-              {message.references.map((ref, index) => (
-                <Badge key={index} variant="outline" className="text-xs">
-                  {ref}
-                </Badge>
-              ))}
-            </CollapsibleContent>
-          </Collapsible>
-        )}
-
-        {/* Message Actions */}
-        <div className="flex items-center gap-1">
-          <Button variant="ghost" size="sm" className="h-7 gap-1" onClick={handleCopy}>
-            {copied ? (
-              <>
-                <Check className="h-3 w-3" />
-                <span className="text-xs">Copied</span>
-              </>
-            ) : (
-              <>
-                <Copy className="h-3 w-3" />
-                <span className="text-xs">Copy</span>
-              </>
-            )}
-          </Button>
-
-          {!isUser && (
-            <>
-              <Button
-                variant="ghost"
-                size="sm"
-                className={`h-7 gap-1 ${
-                  feedback === 'helpful' ? 'bg-green-100 text-green-600 dark:bg-green-900/20' : ''
-                }`}
-                onClick={() => handleFeedbackClick('helpful')}
-              >
-                <ThumbsUp className="h-3 w-3" />
-                <span className="text-xs">Helpful</span>
-              </Button>
-
-              <Button
-                variant="ghost"
-                size="sm"
-                className={`h-7 gap-1 ${
-                  feedback === 'not_helpful' ? 'bg-red-100 text-red-600 dark:bg-red-900/20' : ''
-                }`}
-                onClick={() => handleFeedbackClick('not_helpful')}
-              >
-                <ThumbsDown className="h-3 w-3" />
-                <span className="text-xs">Not helpful</span>
-              </Button>
-            </>
-          )}
-        </div>
-
-        {/* Feedback Area */}
-        {!isUser && showFeedbackArea && feedbackType && (
-          <div className="w-full mt-2 bg-gray-50 dark:bg-gray-800/50 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
-            <div className="flex items-start justify-between mb-4">
-              <h4 className="text-sm font-medium text-gray-900 dark:text-gray-100">Tell us more:</h4>
-              <Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={handleFeedbackClose}>
-                <X className="h-4 w-4" />
-              </Button>
-            </div>
-
-            {/* Tags */}
-            <div className="flex flex-wrap gap-2 mb-4">
-              {FEEDBACK_TAGS[feedbackType].map((tag) => (
-                <Button
-                  key={tag}
-                  variant={selectedTags.includes(tag) ? 'default' : 'outline'}
-                  size="sm"
-                  className="h-7 text-xs"
-                  onClick={() => handleTagToggle(tag)}
-                >
-                  {tag}
-                </Button>
-              ))}
-            </div>
-
-            {/* Comment box */}
-            <Textarea
-              className="min-h-[60px] mb-4 bg-white dark:bg-gray-900"
-              value={feedbackText}
-              onChange={(e) => setFeedbackText(e.target.value)}
-              placeholder="Additional feedback (optional)..."
-            />
-
-            {/* Submit */}
-            <div className="flex justify-end gap-2">
-              <Button variant="outline" size="sm" onClick={handleFeedbackClose} disabled={submitting}>
-                Cancel
-              </Button>
-              <Button
-                size="sm"
-                onClick={handleFeedbackSubmit}
-                disabled={submitting || (selectedTags.length === 0 && !feedbackText.trim())}
-              >
-                {submitting ? 'Submitting…' : 'Submit'}
-              </Button>
-            </div>
-          </div>
-        )}
-      </div>
-
-      {isUser && !showSenderInfo && (
-        <div className="w-8 h-8 rounded-full bg-muted flex items-center justify-center flex-shrink-0">
-          <span className="text-sm">👤</span>
-        </div>
-      )}
-    </div>
-  );
-}

web/src/components/ProfileEditor.tsx

@@ -1,207 +0,0 @@
-import React, { useState } from 'react';
-import { Button } from './ui/button';
-import { Input } from './ui/input';
-import { Label } from './ui/label';
-import { Textarea } from './ui/textarea';
-import { Dialog, DialogContent, DialogTitle } from './ui/dialog';
-import type { User as UserType } from '../App';
-import { toast } from 'sonner';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from './ui/select';
-
-interface ProfileEditorProps {
-  user: UserType;
-  onSave: (user: UserType) => void;
-  onClose: () => void;
-}
-
-export function ProfileEditor({ user, onSave, onClose }: ProfileEditorProps) {
-  const [name, setName] = useState(user.name);
-  const [email, setEmail] = useState(user.email);
-  const [studentId, setStudentId] = useState('S12345678');
-  const [department, setDepartment] = useState('Computer Science');
-  const [year, setYear] = useState('3rd Year');
-  const [major, setMajor] = useState('Artificial Intelligence');
-  const [bio, setBio] = useState('Passionate about AI and machine learning');
-
-  const handleSave = () => {
-    if (name.trim() && email.trim()) {
-      onSave({ name: name.trim(), email: email.trim() });
-      toast.success('Profile updated successfully!');
-      onClose();
-    } else {
-      toast.error('Please fill in all required fields');
-    }
-  };
-
-  return (
-    <Dialog open onOpenChange={(open) => { if (!open) onClose(); }}>
-      <DialogContent className="sm:max-w-2xl p-0 gap-0 max-h-[90vh] overflow-hidden">
-        <div className="flex flex-col max-h-[90vh]">
-          {/* Header */}
-          <div className="border-b border-border p-4 flex items-center justify-between flex-shrink-0">
-            <DialogTitle className="text-xl font-medium">Edit Profile</DialogTitle>
-          </div>
-
-          {/* Content */}
-          <div className="p-6 space-y-6 overflow-y-auto flex-1">
-          {/* Profile Picture */}
-          <div className="flex items-center gap-4">
-            <div className="w-20 h-20 rounded-full bg-gradient-to-br from-red-500 to-orange-500 flex items-center justify-center text-white text-2xl">
-              {name.charAt(0).toUpperCase()}
-            </div>
-            <div>
-              <Button variant="outline" size="sm">
-                Change Photo
-              </Button>
-              <p className="text-xs text-muted-foreground mt-1">
-                JPG, PNG or GIF. Max size 2MB
-              </p>
-            </div>
-          </div>
-
-          {/* Basic Information */}
-          <div className="space-y-4">
-            <h3 className="text-sm font-medium">Basic Information</h3>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div className="space-y-2">
-                <Label htmlFor="edit-name">Full Name *</Label>
-                <Input
-                  id="edit-name"
-                  value={name}
-                  onChange={(e) => setName(e.target.value)}
-                  placeholder="Enter your full name"
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="edit-email">Email *</Label>
-                <Input
-                  id="edit-email"
-                  type="email"
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  placeholder="Enter your email"
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="edit-student-id">Student ID</Label>
-                <Input
-                  id="edit-student-id"
-                  value={studentId}
-                  onChange={(e) => setStudentId(e.target.value)}
-                  placeholder="Enter your student ID"
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="edit-department">Department</Label>
-                <Input
-                  id="edit-department"
-                  value={department}
-                  onChange={(e) => setDepartment(e.target.value)}
-                  placeholder="Enter your department"
-                />
-              </div>
-            </div>
-          </div>
-
-          {/* Academic Background */}
-          <div className="space-y-4">
-            <h3 className="text-sm font-medium">Academic Background</h3>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div className="space-y-2">
-                <Label htmlFor="edit-year">Year Level</Label>
-                <Select value={year} onValueChange={setYear}>
-                  <SelectTrigger id="edit-year">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="1st Year">1st Year</SelectItem>
-                    <SelectItem value="2nd Year">2nd Year</SelectItem>
-                    <SelectItem value="3rd Year">3rd Year</SelectItem>
-                    <SelectItem value="4th Year">4th Year</SelectItem>
-                    <SelectItem value="Graduate">Graduate</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="edit-major">Major</Label>
-                <Input
-                  id="edit-major"
-                  value={major}
-                  onChange={(e) => setMajor(e.target.value)}
-                  placeholder="Enter your major"
-                />
-              </div>
-            </div>
-          </div>
-
-          {/* Bio */}
-          <div className="space-y-2">
-            <Label htmlFor="edit-bio">Bio</Label>
-            <Textarea
-              id="edit-bio"
-              value={bio}
-              onChange={(e) => setBio(e.target.value)}
-              placeholder="Tell us about yourself..."
-              className="min-h-[100px] resize-none"
-            />
-            <p className="text-xs text-muted-foreground">
-              Brief description for your profile. Max 200 characters.
-            </p>
-          </div>
-
-          {/* Learning Preferences */}
-          <div className="space-y-4">
-            <h3 className="text-sm font-medium">Learning Preferences</h3>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div className="space-y-2">
-                <Label htmlFor="edit-learning-style">Preferred Learning Style</Label>
-                <Select defaultValue="visual">
-                  <SelectTrigger id="edit-learning-style">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="visual">Visual</SelectItem>
-                    <SelectItem value="auditory">Auditory</SelectItem>
-                    <SelectItem value="reading">Reading/Writing</SelectItem>
-                    <SelectItem value="kinesthetic">Kinesthetic</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="edit-pace">Learning Pace</Label>
-                <Select defaultValue="moderate">
-                  <SelectTrigger id="edit-pace">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="slow">Slow & Steady</SelectItem>
-                    <SelectItem value="moderate">Moderate</SelectItem>
-                    <SelectItem value="fast">Fast-paced</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-            </div>
-          </div>
-
-          </div>
-
-          {/* Footer */}
-          <div className="border-t border-border p-4 flex justify-end gap-2 flex-shrink-0">
-            <Button variant="outline" onClick={onClose}>
-              Cancel
-            </Button>
-            <Button onClick={handleSave}>
-              Save Changes
-            </Button>
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}

web/src/components/RightPanel.tsx

@@ -1,281 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { Button } from './ui/button';
-import { Input } from './ui/input';
-import { Label } from './ui/label';
-import { Card } from './ui/card';
-import { Separator } from './ui/separator';
-import { Textarea } from './ui/textarea';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
-import { 
-  LogIn, 
-  LogOut, 
-  Download, 
-  ClipboardList, 
-  FileText,
-  Sparkles,
-  ChevronUp,
-  ChevronDown,
-  PanelRightClose
-} from 'lucide-react';
-import { Document, HeadingLevel, Packer, Paragraph, TextRun } from 'docx';
-import type { User } from '../App';
-import { toast } from 'sonner';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-  DialogFooter,
-} from './ui/dialog';
-
-interface RightPanelProps {
-  user: User | null;
-  onLogin: (user: User) => void;
-  onLogout: () => void;
-  isLoggedIn: boolean;
-  onClose?: () => void;
-  exportResult: string;
-  setExportResult: (result: string) => void;
-  resultType: 'export' | 'quiz' | 'summary' | null;
-  setResultType: (type: 'export' | 'quiz' | 'summary' | null) => void;
-  onExport: () => void;
-  onSummary: () => void;
-}
-
-export function RightPanel({ user, onLogin, onLogout, isLoggedIn, onClose, exportResult, setExportResult, resultType, setResultType, onExport, onSummary }: RightPanelProps) {
-  const [showLoginForm, setShowLoginForm] = useState(false);
-  const [name, setName] = useState('');
-  const [email, setEmail] = useState('');
-  const [isExpanded, setIsExpanded] = useState(true);
-  const [isDownloading, setIsDownloading] = useState(false);
-
-  const handleLogin = () => {
-    if (!name.trim() || !email.trim()) {
-      toast.error('Please fill in all fields');
-      return;
-    }
-
-    onLogin({ name: name.trim(), email: email.trim() });
-    setShowLoginForm(false);
-    setName('');
-    setEmail('');
-    toast.success(`Welcome, ${name}!`);
-  };
-
-  const handleLogout = () => {
-    onLogout();
-    setShowLoginForm(false);
-    toast.success('Logged out successfully');
-  };
-
-  const scrollContainerRef = useRef<HTMLDivElement>(null);
-
-  // Use native event listeners to prevent scroll propagation
-  useEffect(() => {
-    const container = scrollContainerRef.current;
-    if (!container) return;
-
-    const handleWheel = (e: WheelEvent) => {
-      // Always stop propagation to prevent scrolling other panels
-      e.stopPropagation();
-      e.stopImmediatePropagation();
-      
-      // Only prevent default if we're at the boundaries
-      const { scrollTop, scrollHeight, clientHeight } = container;
-      const isScrollable = scrollHeight > clientHeight;
-      const isAtTop = scrollTop === 0;
-      const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1;
-
-      // If scrolling up at top or down at bottom, prevent default to stop propagation
-      if (isScrollable && ((isAtTop && e.deltaY < 0) || (isAtBottom && e.deltaY > 0))) {
-        e.preventDefault();
-      }
-    };
-
-    container.addEventListener('wheel', handleWheel, { passive: false, capture: true });
-    
-    return () => {
-      container.removeEventListener('wheel', handleWheel, { capture: true });
-    };
-  }, []);
-
-  const downloadBlob = (blob: Blob, filename: string) => {
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = filename;
-    document.body.appendChild(a);
-    a.click();
-    a.remove();
-    URL.revokeObjectURL(url);
-  };
-
-  const formatDateStamp = () => {
-    const d = new Date();
-    const yyyy = d.getFullYear();
-    const mm = String(d.getMonth() + 1).padStart(2, '0');
-    const dd = String(d.getDate()).padStart(2, '0');
-    return `${yyyy}-${mm}-${dd}`;
-  };
-
-  const getDefaultFilenameBase = () => {
-    const kind =
-      resultType === 'export' ? 'export' :
-      resultType === 'summary' ? 'summary' :
-      'result';
-    return `clare-${kind}-${formatDateStamp()}`;
-  };
-
-  const handleDownloadMd = async () => {
-    if (!exportResult) return;
-    try {
-      setIsDownloading(true);
-      toast.message('Preparing .md…');
-      const blob = new Blob([exportResult], { type: 'text/markdown;charset=utf-8' });
-      downloadBlob(blob, `${getDefaultFilenameBase()}.md`);
-      toast.success('Downloaded .md');
-    } catch (e) {
-      console.error(e);
-      toast.error('Failed to download .md');
-    } finally {
-      setIsDownloading(false);
-    }
-  };
-
-  const handleDownloadDocx = async () => {
-    if (!exportResult) return;
-    try {
-      setIsDownloading(true);
-      toast.message('Preparing .docx…');
-
-      const lines = exportResult.split('\n');
-      const paragraphs: Paragraph[] = lines.map((line) => {
-        const trimmed = line.trim();
-        if (!trimmed) return new Paragraph({ text: '' });
-
-        // Basic markdown-ish heading support
-        if (trimmed.startsWith('### ')) {
-          return new Paragraph({ text: trimmed.replace(/^###\s+/, ''), heading: HeadingLevel.HEADING_3 });
-        }
-        if (trimmed.startsWith('## ')) {
-          return new Paragraph({ text: trimmed.replace(/^##\s+/, ''), heading: HeadingLevel.HEADING_2 });
-        }
-        if (trimmed.startsWith('# ')) {
-          return new Paragraph({ text: trimmed.replace(/^#\s+/, ''), heading: HeadingLevel.HEADING_1 });
-        }
-
-        return new Paragraph({ children: [new TextRun({ text: line })] });
-      });
-
-      const doc = new Document({
-        sections: [{ properties: {}, children: paragraphs }],
-      });
-
-      const blob = await Packer.toBlob(doc);
-      downloadBlob(blob, `${getDefaultFilenameBase()}.docx`);
-      toast.success('Downloaded .docx');
-    } catch (e) {
-      console.error(e);
-      toast.error('Failed to download .docx');
-    } finally {
-      setIsDownloading(false);
-    }
-  };
-
-  return (
-    <div 
-      ref={scrollContainerRef}
-      className="flex-1 overflow-auto overscroll-contain flex flex-col" 
-      style={{ overscrollBehavior: 'contain' }}
-    >
-      <div className="p-4 space-y-4">
-        {isExpanded && (
-          <>
-            {/* Actions Section with Results */}
-            <div className="space-y-3">
-              <h3 className="text-base font-medium">Export / Summarize Conversation</h3>
-              <Card className="p-4 bg-muted/30">
-                <div className="flex flex-col gap-3">
-                  <Button
-                    variant="outline"
-                    className="w-full h-12 rounded-lg justify-start gap-3"
-                    onClick={onExport}
-                    disabled={!isLoggedIn}
-                  >
-                    <Download className="h-5 w-5" />
-                    <span>Export</span>
-                  </Button>
-                  <Button
-                    variant="outline"
-                    className="w-full h-12 rounded-lg justify-start gap-3"
-                    onClick={onSummary}
-                    disabled={!isLoggedIn}
-                  >
-                    <Sparkles className="h-5 w-5" />
-                    <span>Summarize</span>
-                  </Button>
-                  
-                  {/* Results - Expanded from buttons */}
-                  {exportResult && (
-                    <>
-                      <Separator className="my-2" />
-                      <div className="space-y-3">
-                        <div className="flex items-center justify-between">
-                          <h4 className="text-base font-bold">
-                            {resultType === 'export' && 'Exported Conversation'}
-                            {resultType === 'quiz' && 'Micro-Quiz'}
-                            {resultType === 'summary' && 'Summarization'}
-                          </h4>
-                        </div>
-                        <div className="flex items-center justify-end gap-2">
-                          <Button
-                            variant="outline"
-                            size="sm"
-                            disabled={isDownloading}
-                            onClick={handleDownloadMd}
-                            title="Download as .md"
-                            className="gap-2"
-                          >
-                            <Download className="h-4 w-4" />
-                            .md
-                          </Button>
-                          <Button
-                            variant="outline"
-                            size="sm"
-                            disabled={isDownloading}
-                            onClick={handleDownloadDocx}
-                            title="Download as .docx"
-                            className="gap-2"
-                          >
-                            <Download className="h-4 w-4" />
-                            .docx
-                          </Button>
-                          <Button
-                            variant="outline"
-                            size="sm"
-                            onClick={() => {
-                              navigator.clipboard.writeText(exportResult);
-                              toast.success('Copied to clipboard!');
-                            }}
-                            disabled={isDownloading}
-                          >
-                            Copy
-                          </Button>
-                        </div>
-                        <div className="text-sm whitespace-pre-wrap text-foreground">
-                          {exportResult}
-                        </div>
-                      </div>
-                    </>
-                  )}
-                </div>
-              </Card>
-            </div>
-          </>
-        )}
-      </div>
-    </div>
-  );
-}

web/src/components/SmartReview.tsx

@@ -1,263 +0,0 @@
-import React, { useState } from 'react';
-import { Brain, AlertTriangle, AlertCircle, CheckCircle, ChevronDown, ChevronRight, Info } from 'lucide-react';
-import { Badge } from './ui/badge';
-import { Button } from './ui/button';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible';
-import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip';
-
-interface ReviewItem {
-  id: string;
-  title: string;
-  schedule: string;
-  status: 'urgent' | 'review' | 'stable';
-  weight: number;
-  lastReviewed: string;
-  memoryRetention: number;
-  previousQuestion: string;
-}
-
-export function SmartReview() {
-  // Initialize with the first item of W-4 (red zone) expanded by default
-  const [expandedItems, setExpandedItems] = useState<string[]>(['w4-1']);
-  const [selectedCategory, setSelectedCategory] = useState<string>('W-4'); // Default to red zone
-
-  const reviewData = [
-    { 
-      label: 'W-4', 
-      percentage: 35, 
-      color: 'bg-red-500', 
-      textColor: 'text-red-500', 
-      icon: AlertTriangle, 
-      description: 'Higher forgetting risk',
-      items: [
-        {
-          id: 'w4-1',
-          title: 'Main Concept of Lab 3',
-          schedule: 'T+7',
-          status: 'urgent' as const,
-          weight: 35,
-          lastReviewed: '7 days ago',
-          memoryRetention: 25,
-          previousQuestion: 'I\'ve read the instructions for Lab 3, but what is the main concept we\'re supposed to be learning here?'
-        }
-      ]
-    },
-    { 
-      label: 'W-2', 
-      percentage: 20, 
-      color: 'bg-orange-500', 
-      textColor: 'text-orange-500', 
-      icon: AlertCircle, 
-      description: 'Medium forgetting risk',
-      items: [
-        {
-          id: 'w2-1',
-          title: 'Effective Prompt Engineering',
-          schedule: 'T+14',
-          status: 'review' as const,
-          weight: 20,
-          lastReviewed: '3 days ago',
-          memoryRetention: 60,
-          previousQuestion: 'I understand what prompt engineering is, but what specifically makes a prompt effective versus ineffective?'
-        }
-      ]
-    },
-    { 
-      label: 'W-1', 
-      percentage: 12, 
-      color: 'bg-green-500', 
-      textColor: 'text-green-500', 
-      icon: CheckCircle, 
-      description: 'Recently learned',
-      items: [
-        {
-          id: 'w1-1',
-          title: 'Objective LLM Evaluation',
-          schedule: 'T+7',
-          status: 'stable' as const,
-          weight: 12,
-          lastReviewed: '1 day ago',
-          memoryRetention: 90,
-          previousQuestion: 'How can we objectively evaluate an LLM\'s performance when the output quality seems so subjective?'
-        }
-      ]
-    },
-  ];
-
-  const totalPercentage = reviewData.reduce((sum, item) => sum + item.percentage, 0);
-  const selectedData = reviewData.find(item => item.label === selectedCategory);
-
-  const toggleItem = (itemId: string) => {
-    setExpandedItems(prev => 
-      prev.includes(itemId) 
-        ? prev.filter(id => id !== itemId)
-        : [...prev, itemId]
-    );
-  };
-
-  // When category changes, automatically expand the first item of that category
-  const handleCategoryChange = (categoryLabel: string) => {
-    setSelectedCategory(categoryLabel);
-    const categoryData = reviewData.find(item => item.label === categoryLabel);
-    if (categoryData && categoryData.items.length > 0) {
-      // Expand only the first item of the selected category
-      setExpandedItems([categoryData.items[0].id]);
-    }
-  };
-
-  const getStatusBadge = (status: 'urgent' | 'review' | 'stable') => {
-    const configs = {
-      urgent: { label: '🔥 URGENT', className: 'bg-red-500 text-white hover:bg-red-600' },
-      review: { label: '⚠️ REVIEW', className: 'bg-orange-500 text-white hover:bg-orange-600' },
-      stable: { label: '✓ STABLE', className: 'bg-green-500 text-white hover:bg-green-600' },
-    };
-    return configs[status];
-  };
-
-  const getButtonColorClass = (colorClass: string) => {
-    // Extract color from bg-red-500, bg-orange-500, bg-green-500
-    if (colorClass.includes('red')) {
-      return 'bg-red-500 hover:bg-red-600';
-    } else if (colorClass.includes('orange')) {
-      return 'bg-orange-500 hover:bg-orange-600';
-    } else if (colorClass.includes('green')) {
-      return 'bg-green-500 hover:bg-green-600';
-    }
-    return 'bg-red-500 hover:bg-red-600'; // default
-  };
-
-  return (
-    <div className="space-y-4">
-      <div className="flex flex-col gap-1">
-        <div className="flex items-center gap-2">
-          <Brain className="h-5 w-5 text-red-500" />
-          <h3>Current Review Distribution</h3>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button className="text-muted-foreground hover:text-foreground transition-colors">
-                <Info className="h-3 w-3" />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent side="right" className="p-2" style={{ maxWidth: '170px', whiteSpace: 'normal', wordBreak: 'break-word' }}>
-              <p className="text-[10px] leading-relaxed text-left" style={{ whiteSpace: 'normal' }}>
-                Based on the forgetting curve, Clare has selected topics you might be forgetting from your learning history and interaction patterns. Higher weights indicate higher forgetting risk.
-              </p>
-            </TooltipContent>
-          </Tooltip>
-        </div>
-        <div className="text-xs text-muted-foreground ml-7">(T+7 Schedule)</div>
-      </div>
-
-      {/* Combined Progress Bar - Clickable */}
-      <div className="space-y-2">
-        <div className="text-xs text-muted-foreground">Overall Distribution</div>
-        <div className="flex items-center gap-3">
-          {reviewData.map((item) => (
-            <button
-              key={item.label}
-              className={`flex flex-col gap-1.5 pt-2 px-1 pb-0 rounded-lg transition-all duration-200 hover:brightness-110 focus:outline-none cursor-pointer ${
-                selectedCategory === item.label ? 'bg-muted/80' : 'bg-transparent hover:bg-muted/40'
-              }`}
-              onClick={() => handleCategoryChange(item.label)}
-              title={`Click to view ${item.label} items`}
-              style={{ flex: item.percentage }}
-            >
-              <div className="flex items-center gap-1 justify-center whitespace-nowrap">
-                <span className="text-[10px]">{item.label}:</span>
-                <span className={`text-[10px] font-medium ${item.textColor}`}>{item.percentage}%</span>
-              </div>
-              <div className={`h-2 ${item.color} rounded-full mb-2`} />
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* Selected Category Progress Bar with Expandable Items */}
-      {selectedData && (
-        <div className="space-y-2">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-2">
-              <selectedData.icon className={`h-4 w-4 ${selectedData.textColor}`} />
-              <span className="text-sm">{selectedData.label}:</span>
-              <span className={`text-sm font-medium ${selectedData.textColor}`}>{selectedData.percentage}%</span>
-            </div>
-          </div>
-          <div className="h-2 bg-muted rounded-full overflow-hidden">
-            <div 
-              className={`h-full ${selectedData.color} transition-all duration-500`}
-              style={{ width: `${(selectedData.percentage / totalPercentage) * 100}%` }}
-            />
-          </div>
-          
-          {/* Expandable Review Items */}
-          <div className="space-y-2">
-            {selectedData.items.map((reviewItem) => (
-              <Collapsible
-                key={reviewItem.id}
-                open={expandedItems.includes(reviewItem.id)}
-                onOpenChange={() => toggleItem(reviewItem.id)}
-              >
-                <CollapsibleTrigger asChild>
-                  <Button
-                    variant="ghost"
-                    className="w-full justify-between text-left h-auto p-2 hover:bg-muted/50"
-                  >
-                    <span className="text-sm">Review: {reviewItem.title}</span>
-                    {expandedItems.includes(reviewItem.id) ? (
-                      <ChevronDown className="h-4 w-4 flex-shrink-0" />
-                    ) : (
-                      <ChevronRight className="h-4 w-4 flex-shrink-0" />
-                    )}
-                  </Button>
-                </CollapsibleTrigger>
-                <CollapsibleContent>
-                  <div className="p-3 space-y-3 pl-4" style={{ borderLeft: '0.5px solid', borderColor: `var(--${selectedData.color.replace('bg-', '')})` }}>
-                    <div className="flex items-center gap-2 flex-wrap">
-                      <Badge variant="outline" className="text-xs">
-                        {reviewItem.schedule}
-                      </Badge>
-                      <Badge className={`text-xs ${getStatusBadge(reviewItem.status).className}`}>
-                        {getStatusBadge(reviewItem.status).label}
-                      </Badge>
-                      <span className="text-xs text-muted-foreground">
-                        Weight: {reviewItem.weight}% | Last: {reviewItem.lastReviewed}
-                      </span>
-                    </div>
-
-                    <div className="space-y-1">
-                      <div className="flex justify-between items-center">
-                        <span className="text-xs text-muted-foreground">Memory Retention</span>
-                        <span className="text-xs font-medium">{reviewItem.memoryRetention}%</span>
-                      </div>
-                      <div className="h-2 bg-muted rounded-full overflow-hidden">
-                        <div
-                          className={`h-full ${selectedData.color} transition-all duration-500`}
-                          style={{ width: `${reviewItem.memoryRetention}%` }}
-                        />
-                      </div>
-                    </div>
-
-                    <div className="space-y-1">
-                      <p className="text-xs text-muted-foreground">You previously asked:</p>
-                      <p className="text-xs bg-muted/50 p-2 rounded italic">
-                        "{reviewItem.previousQuestion}"
-                      </p>
-                    </div>
-
-                    <Button 
-                      className={`w-full ${getButtonColorClass(selectedData.color)} text-white`}
-                      size="sm"
-                    >
-                      Review this topic
-                    </Button>
-                  </div>
-                </CollapsibleContent>
-              </Collapsible>
-            ))}
-          </div>
-        </div>
-      )}
-
-    </div>
-  );
-}

web/src/components/UserGuide.tsx

@@ -1,151 +0,0 @@
-import React from 'react';
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from './ui/accordion';
-
-export function UserGuide() {
-  return (
-    <div className="space-y-3">
-      <h3 className="mb-4">User Guide</h3>
-      
-      <Accordion type="single" collapsible className="space-y-2">
-        <AccordionItem value="getting-started" className="border rounded-lg px-4">
-          <AccordionTrigger>Getting Started</AccordionTrigger>
-          <AccordionContent className="text-sm text-muted-foreground space-y-2">
-            <p>Welcome to Clare! To begin:</p>
-            <ol className="list-decimal list-inside space-y-1 ml-2">
-              <li>Log in using your student credentials</li>
-              <li>Select your preferred learning mode</li>
-              <li>Upload course materials (optional)</li>
-              <li>Start asking questions!</li>
-            </ol>
-          </AccordionContent>
-        </AccordionItem>
-
-        <AccordionItem value="modes" className="border rounded-lg px-4">
-          <AccordionTrigger>Learning Modes</AccordionTrigger>
-          <AccordionContent className="text-sm text-muted-foreground space-y-2">
-            <p><strong>Concept Explainer:</strong> Get detailed explanations of complex topics with examples.</p>
-            <p><strong>Socratic Tutor:</strong> Learn through guided questions and discovery.</p>
-            <p><strong>Exam Prep/Quiz:</strong> Test your knowledge with practice questions.</p>
-            <p><strong>Assignment Helper:</strong> Get step-by-step guidance on homework.</p>
-            <p><strong>Quick Summary:</strong> Receive concise summaries of key concepts.</p>
-          </AccordionContent>
-        </AccordionItem>
-
-        <AccordionItem value="how-it-works" className="border rounded-lg px-4">
-          <AccordionTrigger>How Clare Works</AccordionTrigger>
-          <AccordionContent className="text-sm text-muted-foreground space-y-2">
-            <p>Clare uses advanced AI to provide personalized tutoring:</p>
-            <ul className="list-disc list-inside space-y-1 ml-2">
-              <li>Analyzes your questions and learning style</li>
-              <li>References uploaded course materials</li>
-              <li>Adapts explanations to your level</li>
-              <li>Tracks your learning progress over time</li>
-            </ul>
-          </AccordionContent>
-        </AccordionItem>
-
-        <AccordionItem value="memory-line" className="border rounded-lg px-4">
-          <AccordionTrigger>Memory Line</AccordionTrigger>
-          <AccordionContent className="text-sm text-muted-foreground space-y-2">
-            <p>The Memory Line tracks your retention using spaced repetition:</p>
-            <ul className="list-disc list-inside space-y-1 ml-2">
-              <li><strong>T+0:</strong> Initial learning</li>
-              <li><strong>T+7:</strong> First review (1 week)</li>
-              <li><strong>T+14:</strong> Second review (2 weeks)</li>
-              <li><strong>T+30:</strong> Final review (1 month)</li>
-            </ul>
-            <p>Regular reviews help solidify your understanding!</p>
-          </AccordionContent>
-        </AccordionItem>
-
-        <AccordionItem value="progress" className="border rounded-lg px-4">
-          <AccordionTrigger>Learning Progress Report</AccordionTrigger>
-          <AccordionContent className="text-sm text-muted-foreground">
-            <p>Your progress report shows:</p>
-            <ul className="list-disc list-inside space-y-1 ml-2">
-              <li>Topics covered and mastered</li>
-              <li>Time spent learning</li>
-              <li>Quiz scores and performance</li>
-              <li>Recommended review topics</li>
-            </ul>
-          </AccordionContent>
-        </AccordionItem>
-
-        <AccordionItem value="files" className="border rounded-lg px-4">
-          <AccordionTrigger>Using Your Files</AccordionTrigger>
-          <AccordionContent className="text-sm text-muted-foreground">
-            <p>Upload course materials to enhance Clare's responses:</p>
-            <ul className="list-disc list-inside space-y-1 ml-2">
-              <li>Supported formats: .docx, .pdf, .pptx</li>
-              <li>Clare will reference your materials in answers</li>
-              <li>Files are processed securely and privately</li>
-              <li>You can remove files anytime</li>
-            </ul>
-          </AccordionContent>
-        </AccordionItem>
-
-        <AccordionItem value="quiz" className="border rounded-lg px-4">
-          <AccordionTrigger>Micro-Quiz</AccordionTrigger>
-          <AccordionContent className="text-sm text-muted-foreground">
-            <p>Test your understanding with quick quizzes:</p>
-            <ul className="list-disc list-inside space-y-1 ml-2">
-              <li>Generated based on your conversation</li>
-              <li>Multiple choice and short answer questions</li>
-              <li>Instant feedback and explanations</li>
-              <li>Track your quiz performance over time</li>
-            </ul>
-          </AccordionContent>
-        </AccordionItem>
-
-        <AccordionItem value="summarization" className="border rounded-lg px-4">
-          <AccordionTrigger>Summarization</AccordionTrigger>
-          <AccordionContent className="text-sm text-muted-foreground">
-            <p>Get concise summaries of your learning session:</p>
-            <ul className="list-disc list-inside space-y-1 ml-2">
-              <li>Key concepts discussed</li>
-              <li>Important takeaways</li>
-              <li>Topics to review</li>
-              <li>Next steps for learning</li>
-            </ul>
-          </AccordionContent>
-        </AccordionItem>
-
-        <AccordionItem value="export" className="border rounded-lg px-4">
-          <AccordionTrigger>Export Conversation</AccordionTrigger>
-          <AccordionContent className="text-sm text-muted-foreground">
-            <p>Save your conversation for later review:</p>
-            <ul className="list-disc list-inside space-y-1 ml-2">
-              <li>Export as PDF or text file</li>
-              <li>Includes all messages and references</li>
-              <li>Perfect for study notes</li>
-              <li>Share with study groups (optional)</li>
-            </ul>
-          </AccordionContent>
-        </AccordionItem>
-
-        <AccordionItem value="faq" className="border rounded-lg px-4">
-          <AccordionTrigger>FAQ</AccordionTrigger>
-          <AccordionContent className="text-sm text-muted-foreground space-y-3">
-            <div>
-              <p className="font-medium text-foreground">Is my data private?</p>
-              <p>Yes! Your conversations and files are encrypted and never shared.</p>
-            </div>
-            <div>
-              <p className="font-medium text-foreground">Can Clare do my homework?</p>
-              <p>Clare is designed to help you learn, not do work for you. It provides guidance and explanations to help you understand concepts.</p>
-            </div>
-            <div>
-              <p className="font-medium text-foreground">How accurate is Clare?</p>
-              <p>Clare is highly accurate but should be used as a learning aid. Always verify important information with course materials.</p>
-            </div>
-          </AccordionContent>
-        </AccordionItem>
-      </Accordion>
-    </div>
-  );
-}

web/src/components/figma/ImageWithFallback.tsx

@@ -1,27 +0,0 @@
-import React, { useState } from 'react'
-
-const ERROR_IMG_SRC =
-  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iODgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIuMyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIzLjciPjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjU2IiBoZWlnaHQ9IjU2IiByeD0iNiIvPjxwYXRoIGQ9Im0xNiA1OCAxNi0xOCAzMiAzMiIvPjxjaXJjbGUgY3g9IjUzIiBjeT0iMzUiIHI9IjciLz48L3N2Zz4KCg=='
-
-export function ImageWithFallback(props: React.ImgHTMLAttributes<HTMLImageElement>) {
-  const [didError, setDidError] = useState(false)
-
-  const handleError = () => {
-    setDidError(true)
-  }
-
-  const { src, alt, style, className, ...rest } = props
-
-  return didError ? (
-    <div
-      className={`inline-block bg-gray-100 text-center align-middle ${className ?? ''}`}
-      style={style}
-    >
-      <div className="flex items-center justify-center w-full h-full">
-        <img src={ERROR_IMG_SRC} alt="Error loading image" {...rest} data-original-url={src} />
-      </div>
-    </div>
-  ) : (
-    <img src={src} alt={alt} className={className} style={style} {...rest} onError={handleError} />
-  )
-}

web/src/components/ui/accordion.tsx

@@ -1,66 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as AccordionPrimitive from "@radix-ui/react-accordion@1.2.3";
-import { ChevronDownIcon } from "lucide-react@0.487.0";
-
-import { cn } from "./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 };

web/src/components/ui/alert-dialog.tsx

@@ -1,157 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog@1.1.6";
-
-import { cn } from "./utils";
-import { buttonVariants } from "./button";
-
-function AlertDialog({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
-  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
-}
-
-function AlertDialogTrigger({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
-  return (
-    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
-  );
-}
-
-function AlertDialogPortal({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
-  return (
-    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
-  );
-}
-
-function AlertDialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
-  return (
-    <AlertDialogPrimitive.Overlay
-      data-slot="alert-dialog-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 AlertDialogContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
-  return (
-    <AlertDialogPortal>
-      <AlertDialogOverlay />
-      <AlertDialogPrimitive.Content
-        data-slot="alert-dialog-content"
-        className={cn(
-          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-          className,
-        )}
-        {...props}
-      />
-    </AlertDialogPortal>
-  );
-}
-
-function AlertDialogHeader({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogFooter({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
-  return (
-    <AlertDialogPrimitive.Title
-      data-slot="alert-dialog-title"
-      className={cn("text-lg font-semibold", className)}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
-  return (
-    <AlertDialogPrimitive.Description
-      data-slot="alert-dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogAction({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
-  return (
-    <AlertDialogPrimitive.Action
-      className={cn(buttonVariants(), className)}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogCancel({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
-  return (
-    <AlertDialogPrimitive.Cancel
-      className={cn(buttonVariants({ variant: "outline" }), className)}
-      {...props}
-    />
-  );
-}
-
-export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-};

web/src/components/ui/alert.tsx

@@ -1,66 +0,0 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority@0.7.1";
-
-import { cn } from "./utils";
-
-const alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
-  {
-    variants: {
-      variant: {
-        default: "bg-card text-card-foreground",
-        destructive:
-          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-function Alert({
-  className,
-  variant,
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
-  return (
-    <div
-      data-slot="alert"
-      role="alert"
-      className={cn(alertVariants({ variant }), className)}
-      {...props}
-    />
-  );
-}
-
-function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-title"
-      className={cn(
-        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function AlertDescription({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-description"
-      className={cn(
-        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Alert, AlertTitle, AlertDescription };

web/src/components/ui/aspect-ratio.tsx

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

web/src/components/ui/avatar.tsx

@@ -1,53 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as AvatarPrimitive from "@radix-ui/react-avatar@1.1.3";
-
-import { cn } from "./utils";
-
-function Avatar({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
-  return (
-    <AvatarPrimitive.Root
-      data-slot="avatar"
-      className={cn(
-        "relative flex size-10 shrink-0 overflow-hidden rounded-full",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function AvatarImage({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
-  return (
-    <AvatarPrimitive.Image
-      data-slot="avatar-image"
-      className={cn("aspect-square size-full", className)}
-      {...props}
-    />
-  );
-}
-
-function AvatarFallback({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
-  return (
-    <AvatarPrimitive.Fallback
-      data-slot="avatar-fallback"
-      className={cn(
-        "bg-muted flex size-full items-center justify-center rounded-full",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Avatar, AvatarImage, AvatarFallback };

web/src/components/ui/badge.tsx

@@ -1,46 +0,0 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot@1.1.2";
-import { cva, type VariantProps } from "class-variance-authority@0.7.1";
-
-import { cn } from "./utils";
-
-const badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-        destructive:
-          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-function Badge({
-  className,
-  variant,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"span"> &
-  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "span";
-
-  return (
-    <Comp
-      data-slot="badge"
-      className={cn(badgeVariants({ variant }), className)}
-      {...props}
-    />
-  );
-}
-
-export { Badge, badgeVariants };

web/src/components/ui/breadcrumb.tsx

@@ -1,109 +0,0 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot@1.1.2";
-import { ChevronRight, MoreHorizontal } from "lucide-react@0.487.0";
-
-import { cn } from "./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,
-};

web/src/components/ui/button.tsx

@@ -1,58 +0,0 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot@1.1.2";
-import { cva, type VariantProps } from "class-variance-authority@0.7.1";
-
-import { cn } from "./utils";
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "border bg-background text-foreground hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9 rounded-md",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-const Button = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<"button"> &
-    VariantProps<typeof buttonVariants> & {
-      asChild?: boolean;
-    }
->(({ className, variant, size, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "button";
-
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      ref={ref}
-      {...props}
-    />
-  );
-});
-
-Button.displayName = "Button";
-
-export { Button, buttonVariants };

web/src/components/ui/calendar.tsx

@@ -1,75 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { ChevronLeft, ChevronRight } from "lucide-react@0.487.0";
-import { DayPicker } from "react-day-picker@8.10.1";
-
-import { cn } from "./utils";
-import { buttonVariants } from "./button";
-
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  ...props
-}: React.ComponentProps<typeof DayPicker>) {
-  return (
-    <DayPicker
-      showOutsideDays={showOutsideDays}
-      className={cn("p-3", className)}
-      classNames={{
-        months: "flex flex-col sm:flex-row gap-2",
-        month: "flex flex-col gap-4",
-        caption: "flex justify-center pt-1 relative items-center w-full",
-        caption_label: "text-sm font-medium",
-        nav: "flex items-center gap-1",
-        nav_button: cn(
-          buttonVariants({ variant: "outline" }),
-          "size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
-        ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
-        table: "w-full border-collapse space-x-1",
-        head_row: "flex",
-        head_cell:
-          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
-        row: "flex w-full mt-2",
-        cell: cn(
-          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md",
-          props.mode === "range"
-            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
-            : "[&:has([aria-selected])]:rounded-md",
-        ),
-        day: cn(
-          buttonVariants({ variant: "ghost" }),
-          "size-8 p-0 font-normal aria-selected:opacity-100",
-        ),
-        day_range_start:
-          "day-range-start aria-selected:bg-primary aria-selected:text-primary-foreground",
-        day_range_end:
-          "day-range-end aria-selected:bg-primary aria-selected:text-primary-foreground",
-        day_selected:
-          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-        day_today: "bg-accent text-accent-foreground",
-        day_outside:
-          "day-outside text-muted-foreground aria-selected:text-muted-foreground",
-        day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle:
-          "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        day_hidden: "invisible",
-        ...classNames,
-      }}
-      components={{
-        IconLeft: ({ className, ...props }) => (
-          <ChevronLeft className={cn("size-4", className)} {...props} />
-        ),
-        IconRight: ({ className, ...props }) => (
-          <ChevronRight className={cn("size-4", className)} {...props} />
-        ),
-      }}
-      {...props}
-    />
-  );
-}
-
-export { Calendar };

web/src/components/ui/card.tsx

@@ -1,92 +0,0 @@
-import * as React from "react";
-
-import { cn } from "./utils";
-
-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",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-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 pt-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <h4
-      data-slot="card-title"
-      className={cn("leading-none", className)}
-      {...props}
-    />
-  );
-}
-
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <p
-      data-slot="card-description"
-      className={cn("text-muted-foreground", className)}
-      {...props}
-    />
-  );
-}
-
-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}
-    />
-  );
-}
-
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-content"
-      className={cn("px-6 [&:last-child]:pb-6", className)}
-      {...props}
-    />
-  );
-}
-
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-footer"
-      className={cn("flex items-center px-6 pb-6 [.border-t]:pt-6", className)}
-      {...props}
-    />
-  );
-}
-
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardAction,
-  CardDescription,
-  CardContent,
-};

web/src/components/ui/carousel.tsx

@@ -1,241 +0,0 @@
-"use client";
-
-import * as React from "react";
-import useEmblaCarousel, {
-  type UseEmblaCarouselType,
-} from "embla-carousel-react@8.6.0";
-import { ArrowLeft, ArrowRight } from "lucide-react@0.487.0";
-
-import { cn } from "./utils";
-import { Button } from "./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,
-};

web/src/components/ui/chart.tsx

@@ -1,353 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as RechartsPrimitive from "recharts@2.15.2";
-
-import { cn } from "./utils";
-
-// Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" } as const;
-
-export type ChartConfig = {
-  [k in string]: {
-    label?: React.ReactNode;
-    icon?: React.ComponentType;
-  } & (
-    | { color?: string; theme?: never }
-    | { color?: never; theme: Record<keyof typeof THEMES, string> }
-  );
-};
-
-type ChartContextProps = {
-  config: ChartConfig;
-};
-
-const ChartContext = React.createContext<ChartContextProps | null>(null);
-
-function useChart() {
-  const context = React.useContext(ChartContext);
-
-  if (!context) {
-    throw new Error("useChart must be used within a <ChartContainer />");
-  }
-
-  return context;
-}
-
-function ChartContainer({
-  id,
-  className,
-  children,
-  config,
-  ...props
-}: React.ComponentProps<"div"> & {
-  config: ChartConfig;
-  children: React.ComponentProps<
-    typeof RechartsPrimitive.ResponsiveContainer
-  >["children"];
-}) {
-  const uniqueId = React.useId();
-  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
-
-  return (
-    <ChartContext.Provider value={{ config }}>
-      <div
-        data-slot="chart"
-        data-chart={chartId}
-        className={cn(
-          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
-          className,
-        )}
-        {...props}
-      >
-        <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer>
-          {children}
-        </RechartsPrimitive.ResponsiveContainer>
-      </div>
-    </ChartContext.Provider>
-  );
-}
-
-const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
-  const colorConfig = Object.entries(config).filter(
-    ([, config]) => config.theme || config.color,
-  );
-
-  if (!colorConfig.length) {
-    return null;
-  }
-
-  return (
-    <style
-      dangerouslySetInnerHTML={{
-        __html: Object.entries(THEMES)
-          .map(
-            ([theme, prefix]) => `
-${prefix} [data-chart=${id}] {
-${colorConfig
-  .map(([key, itemConfig]) => {
-    const color =
-      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
-      itemConfig.color;
-    return color ? `  --color-${key}: ${color};` : null;
-  })
-  .join("\n")}
-}
-`,
-          )
-          .join("\n"),
-      }}
-    />
-  );
-};
-
-const ChartTooltip = RechartsPrimitive.Tooltip;
-
-function ChartTooltipContent({
-  active,
-  payload,
-  className,
-  indicator = "dot",
-  hideLabel = false,
-  hideIndicator = false,
-  label,
-  labelFormatter,
-  labelClassName,
-  formatter,
-  color,
-  nameKey,
-  labelKey,
-}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-  React.ComponentProps<"div"> & {
-    hideLabel?: boolean;
-    hideIndicator?: boolean;
-    indicator?: "line" | "dot" | "dashed";
-    nameKey?: string;
-    labelKey?: string;
-  }) {
-  const { config } = useChart();
-
-  const tooltipLabel = React.useMemo(() => {
-    if (hideLabel || !payload?.length) {
-      return null;
-    }
-
-    const [item] = payload;
-    const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
-    const itemConfig = getPayloadConfigFromPayload(config, item, key);
-    const value =
-      !labelKey && typeof label === "string"
-        ? config[label as keyof typeof config]?.label || label
-        : itemConfig?.label;
-
-    if (labelFormatter) {
-      return (
-        <div className={cn("font-medium", labelClassName)}>
-          {labelFormatter(value, payload)}
-        </div>
-      );
-    }
-
-    if (!value) {
-      return null;
-    }
-
-    return <div className={cn("font-medium", labelClassName)}>{value}</div>;
-  }, [
-    label,
-    labelFormatter,
-    payload,
-    hideLabel,
-    labelClassName,
-    config,
-    labelKey,
-  ]);
-
-  if (!active || !payload?.length) {
-    return null;
-  }
-
-  const nestLabel = payload.length === 1 && indicator !== "dot";
-
-  return (
-    <div
-      className={cn(
-        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
-        className,
-      )}
-    >
-      {!nestLabel ? tooltipLabel : null}
-      <div className="grid gap-1.5">
-        {payload.map((item, index) => {
-          const key = `${nameKey || item.name || item.dataKey || "value"}`;
-          const itemConfig = getPayloadConfigFromPayload(config, item, key);
-          const indicatorColor = color || item.payload.fill || item.color;
-
-          return (
-            <div
-              key={item.dataKey}
-              className={cn(
-                "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
-                indicator === "dot" && "items-center",
-              )}
-            >
-              {formatter && item?.value !== undefined && item.name ? (
-                formatter(item.value, item.name, item, index, item.payload)
-              ) : (
-                <>
-                  {itemConfig?.icon ? (
-                    <itemConfig.icon />
-                  ) : (
-                    !hideIndicator && (
-                      <div
-                        className={cn(
-                          "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
-                          {
-                            "h-2.5 w-2.5": indicator === "dot",
-                            "w-1": indicator === "line",
-                            "w-0 border-[1.5px] border-dashed bg-transparent":
-                              indicator === "dashed",
-                            "my-0.5": nestLabel && indicator === "dashed",
-                          },
-                        )}
-                        style={
-                          {
-                            "--color-bg": indicatorColor,
-                            "--color-border": indicatorColor,
-                          } as React.CSSProperties
-                        }
-                      />
-                    )
-                  )}
-                  <div
-                    className={cn(
-                      "flex flex-1 justify-between leading-none",
-                      nestLabel ? "items-end" : "items-center",
-                    )}
-                  >
-                    <div className="grid gap-1.5">
-                      {nestLabel ? tooltipLabel : null}
-                      <span className="text-muted-foreground">
-                        {itemConfig?.label || item.name}
-                      </span>
-                    </div>
-                    {item.value && (
-                      <span className="text-foreground font-mono font-medium tabular-nums">
-                        {item.value.toLocaleString()}
-                      </span>
-                    )}
-                  </div>
-                </>
-              )}
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-const ChartLegend = RechartsPrimitive.Legend;
-
-function ChartLegendContent({
-  className,
-  hideIcon = false,
-  payload,
-  verticalAlign = "bottom",
-  nameKey,
-}: React.ComponentProps<"div"> &
-  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
-    hideIcon?: boolean;
-    nameKey?: string;
-  }) {
-  const { config } = useChart();
-
-  if (!payload?.length) {
-    return null;
-  }
-
-  return (
-    <div
-      className={cn(
-        "flex items-center justify-center gap-4",
-        verticalAlign === "top" ? "pb-3" : "pt-3",
-        className,
-      )}
-    >
-      {payload.map((item) => {
-        const key = `${nameKey || item.dataKey || "value"}`;
-        const itemConfig = getPayloadConfigFromPayload(config, item, key);
-
-        return (
-          <div
-            key={item.value}
-            className={cn(
-              "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3",
-            )}
-          >
-            {itemConfig?.icon && !hideIcon ? (
-              <itemConfig.icon />
-            ) : (
-              <div
-                className="h-2 w-2 shrink-0 rounded-[2px]"
-                style={{
-                  backgroundColor: item.color,
-                }}
-              />
-            )}
-            {itemConfig?.label}
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-// Helper to extract item config from a payload.
-function getPayloadConfigFromPayload(
-  config: ChartConfig,
-  payload: unknown,
-  key: string,
-) {
-  if (typeof payload !== "object" || payload === null) {
-    return undefined;
-  }
-
-  const payloadPayload =
-    "payload" in payload &&
-    typeof payload.payload === "object" &&
-    payload.payload !== null
-      ? payload.payload
-      : undefined;
-
-  let configLabelKey: string = key;
-
-  if (
-    key in payload &&
-    typeof payload[key as keyof typeof payload] === "string"
-  ) {
-    configLabelKey = payload[key as keyof typeof payload] as string;
-  } else if (
-    payloadPayload &&
-    key in payloadPayload &&
-    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
-  ) {
-    configLabelKey = payloadPayload[
-      key as keyof typeof payloadPayload
-    ] as string;
-  }
-
-  return configLabelKey in config
-    ? config[configLabelKey]
-    : config[key as keyof typeof config];
-}
-
-export {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  ChartLegend,
-  ChartLegendContent,
-  ChartStyle,
-};

web/src/components/ui/checkbox.tsx

@@ -1,32 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox@1.1.4";
-import { CheckIcon } from "lucide-react@0.487.0";
-
-import { cn } from "./utils";
-
-function Checkbox({
-  className,
-  ...props
-}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
-  return (
-    <CheckboxPrimitive.Root
-      data-slot="checkbox"
-      className={cn(
-        "peer border bg-input-background 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 };

web/src/components/ui/collapsible.tsx

@@ -1,33 +0,0 @@
-"use client";
-
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible@1.1.3";
-
-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 };

web/src/components/ui/command.tsx

@@ -1,177 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { Command as CommandPrimitive } from "cmdk@1.1.1";
-import { SearchIcon } from "lucide-react@0.487.0";
-
-import { cn } from "./utils";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "./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,
-  ...props
-}: React.ComponentProps<typeof Dialog> & {
-  title?: string;
-  description?: string;
-}) {
-  return (
-    <Dialog {...props}>
-      <DialogHeader className="sr-only">
-        <DialogTitle>{title}</DialogTitle>
-        <DialogDescription>{description}</DialogDescription>
-      </DialogHeader>
-      <DialogContent className="overflow-hidden p-0">
-        <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,
-};

web/src/components/ui/context-menu.tsx

@@ -1,252 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as ContextMenuPrimitive from "@radix-ui/react-context-menu@2.2.6";
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react@0.487.0";
-
-import { cn } from "./utils";
-
-function ContextMenu({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
-  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
-}
-
-function ContextMenuTrigger({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
-  return (
-    <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
-  );
-}
-
-function ContextMenuGroup({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
-  return (
-    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
-  );
-}
-
-function ContextMenuPortal({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
-  return (
-    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
-  );
-}
-
-function ContextMenuSub({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
-  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />;
-}
-
-function ContextMenuRadioGroup({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
-  return (
-    <ContextMenuPrimitive.RadioGroup
-      data-slot="context-menu-radio-group"
-      {...props}
-    />
-  );
-}
-
-function ContextMenuSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
-  inset?: boolean;
-}) {
-  return (
-    <ContextMenuPrimitive.SubTrigger
-      data-slot="context-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 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto" />
-    </ContextMenuPrimitive.SubTrigger>
-  );
-}
-
-function ContextMenuSubContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
-  return (
-    <ContextMenuPrimitive.SubContent
-      data-slot="context-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-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function ContextMenuContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
-  return (
-    <ContextMenuPrimitive.Portal>
-      <ContextMenuPrimitive.Content
-        data-slot="context-menu-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 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
-          className,
-        )}
-        {...props}
-      />
-    </ContextMenuPrimitive.Portal>
-  );
-}
-
-function ContextMenuItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
-  inset?: boolean;
-  variant?: "default" | "destructive";
-}) {
-  return (
-    <ContextMenuPrimitive.Item
-      data-slot="context-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 ContextMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
-  return (
-    <ContextMenuPrimitive.CheckboxItem
-      data-slot="context-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">
-        <ContextMenuPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </ContextMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </ContextMenuPrimitive.CheckboxItem>
-  );
-}
-
-function ContextMenuRadioItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
-  return (
-    <ContextMenuPrimitive.RadioItem
-      data-slot="context-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">
-        <ContextMenuPrimitive.ItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
-        </ContextMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </ContextMenuPrimitive.RadioItem>
-  );
-}
-
-function ContextMenuLabel({
-  className,
-  inset,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
-  inset?: boolean;
-}) {
-  return (
-    <ContextMenuPrimitive.Label
-      data-slot="context-menu-label"
-      data-inset={inset}
-      className={cn(
-        "text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function ContextMenuSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
-  return (
-    <ContextMenuPrimitive.Separator
-      data-slot="context-menu-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  );
-}
-
-function ContextMenuShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="context-menu-shortcut"
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export {
-  ContextMenu,
-  ContextMenuTrigger,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuCheckboxItem,
-  ContextMenuRadioItem,
-  ContextMenuLabel,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuGroup,
-  ContextMenuPortal,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuRadioGroup,
-};

web/src/components/ui/dialog.tsx

@@ -1,137 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { XIcon } from "lucide-react";
-
-import { cn } from "./utils";
-
-function Dialog({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
-}
-
-function DialogTrigger({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
-}
-
-function DialogPortal({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
-}
-
-function DialogClose({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
-}
-
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => {
-  return (
-    <DialogPrimitive.Overlay
-      ref={ref}
-      data-slot="dialog-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-[100] bg-black/50",
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-
-function DialogContent({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Content>) {
-  return (
-    <DialogPortal data-slot="dialog-portal">
-      <DialogOverlay />
-      <DialogPrimitive.Content
-        data-slot="dialog-content"
-        className={cn(
-          "bg-background 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 fixed top-[50%] left-[50%] z-[100] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground 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 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
-          <XIcon />
-          <span className="sr-only">Close</span>
-        </DialogPrimitive.Close>
-      </DialogPrimitive.Content>
-    </DialogPortal>
-  );
-}
-
-function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-      {...props}
-    />
-  );
-}
-
-function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function DialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
-  return (
-    <DialogPrimitive.Title
-      data-slot="dialog-title"
-      className={cn("text-lg leading-none font-semibold", className)}
-      {...props}
-    />
-  );
-}
-
-function DialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Description>) {
-  return (
-    <DialogPrimitive.Description
-      data-slot="dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  );
-}
-
-export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-};

web/src/components/ui/drawer.tsx

@@ -1,132 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { Drawer as DrawerPrimitive } from "vaul@1.1.2";
-
-import { cn } from "./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-1.5 p-4", 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,
-};

web/src/components/ui/dropdown-menu.tsx

@@ -1,257 +0,0 @@
-"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 "./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-[100] 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,
-};

web/src/components/ui/form.tsx

@@ -1,168 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as LabelPrimitive from "@radix-ui/react-label@2.1.2";
-import { Slot } from "@radix-ui/react-slot@1.1.2";
-import {
-  Controller,
-  FormProvider,
-  useFormContext,
-  useFormState,
-  type ControllerProps,
-  type FieldPath,
-  type FieldValues,
-} from "react-hook-form@7.55.0";
-
-import { cn } from "./utils";
-import { Label } from "./label";
-
-const Form = FormProvider;
-
-type FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = {
-  name: TName;
-};
-
-const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue,
-);
-
-const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->({
-  ...props
-}: ControllerProps<TFieldValues, TName>) => {
-  return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
-      <Controller {...props} />
-    </FormFieldContext.Provider>
-  );
-};
-
-const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext);
-  const { getFieldState } = useFormContext();
-  const formState = useFormState({ name: fieldContext.name });
-  const fieldState = getFieldState(fieldContext.name, formState);
-
-  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>");
-  }
-
-  const { id } = itemContext;
-
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  };
-};
-
-type FormItemContextValue = {
-  id: string;
-};
-
-const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue,
-);
-
-function FormItem({ className, ...props }: React.ComponentProps<"div">) {
-  const id = React.useId();
-
-  return (
-    <FormItemContext.Provider value={{ id }}>
-      <div
-        data-slot="form-item"
-        className={cn("grid gap-2", className)}
-        {...props}
-      />
-    </FormItemContext.Provider>
-  );
-}
-
-function FormLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  const { error, formItemId } = useFormField();
-
-  return (
-    <Label
-      data-slot="form-label"
-      data-error={!!error}
-      className={cn("data-[error=true]:text-destructive", className)}
-      htmlFor={formItemId}
-      {...props}
-    />
-  );
-}
-
-function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
-  const { error, formItemId, formDescriptionId, formMessageId } =
-    useFormField();
-
-  return (
-    <Slot
-      data-slot="form-control"
-      id={formItemId}
-      aria-describedby={
-        !error
-          ? `${formDescriptionId}`
-          : `${formDescriptionId} ${formMessageId}`
-      }
-      aria-invalid={!!error}
-      {...props}
-    />
-  );
-}
-
-function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
-  const { formDescriptionId } = useFormField();
-
-  return (
-    <p
-      data-slot="form-description"
-      id={formDescriptionId}
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  );
-}
-
-function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
-  const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message ?? "") : props.children;
-
-  if (!body) {
-    return null;
-  }
-
-  return (
-    <p
-      data-slot="form-message"
-      id={formMessageId}
-      className={cn("text-destructive text-sm", className)}
-      {...props}
-    >
-      {body}
-    </p>
-  );
-}
-
-export {
-  useFormField,
-  Form,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-  FormField,
-};

web/src/components/ui/hover-card.tsx

@@ -1,44 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card@1.1.6";
-
-import { cn } from "./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 };

web/src/components/ui/input-otp.tsx

@@ -1,77 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { OTPInput, OTPInputContext } from "input-otp@1.4.2";
-import { MinusIcon } from "lucide-react@0.487.0";
-
-import { cn } from "./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 gap-1", 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 bg-input-background 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 };

web/src/components/ui/input.tsx

@@ -1,21 +0,0 @@
-import * as React from "react";
-
-import { cn } from "./utils";
-
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
-  return (
-    <input
-      type={type}
-      data-slot="input"
-      className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base bg-input-background transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Input };

web/src/components/ui/label.tsx

@@ -1,24 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as LabelPrimitive from "@radix-ui/react-label@2.1.2";
-
-import { cn } from "./utils";
-
-function Label({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  return (
-    <LabelPrimitive.Root
-      data-slot="label"
-      className={cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Label };

web/src/components/ui/menubar.tsx

@@ -1,276 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as MenubarPrimitive from "@radix-ui/react-menubar@1.1.6";
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react@0.487.0";
-
-import { cn } from "./utils";
-
-function Menubar({
-  className,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
-  return (
-    <MenubarPrimitive.Root
-      data-slot="menubar"
-      className={cn(
-        "bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function MenubarMenu({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
-  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />;
-}
-
-function MenubarGroup({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
-  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />;
-}
-
-function MenubarPortal({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
-  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />;
-}
-
-function MenubarRadioGroup({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
-  return (
-    <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
-  );
-}
-
-function MenubarTrigger({
-  className,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
-  return (
-    <MenubarPrimitive.Trigger
-      data-slot="menubar-trigger"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function MenubarContent({
-  className,
-  align = "start",
-  alignOffset = -4,
-  sideOffset = 8,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Content>) {
-  return (
-    <MenubarPortal>
-      <MenubarPrimitive.Content
-        data-slot="menubar-content"
-        align={align}
-        alignOffset={alignOffset}
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-popover text-popover-foreground 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-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
-          className,
-        )}
-        {...props}
-      />
-    </MenubarPortal>
-  );
-}
-
-function MenubarItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Item> & {
-  inset?: boolean;
-  variant?: "default" | "destructive";
-}) {
-  return (
-    <MenubarPrimitive.Item
-      data-slot="menubar-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 MenubarCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
-  return (
-    <MenubarPrimitive.CheckboxItem
-      data-slot="menubar-checkbox-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs 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">
-        <MenubarPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </MenubarPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </MenubarPrimitive.CheckboxItem>
-  );
-}
-
-function MenubarRadioItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
-  return (
-    <MenubarPrimitive.RadioItem
-      data-slot="menubar-radio-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs 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">
-        <MenubarPrimitive.ItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
-        </MenubarPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </MenubarPrimitive.RadioItem>
-  );
-}
-
-function MenubarLabel({
-  className,
-  inset,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Label> & {
-  inset?: boolean;
-}) {
-  return (
-    <MenubarPrimitive.Label
-      data-slot="menubar-label"
-      data-inset={inset}
-      className={cn(
-        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function MenubarSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
-  return (
-    <MenubarPrimitive.Separator
-      data-slot="menubar-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  );
-}
-
-function MenubarShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="menubar-shortcut"
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function MenubarSub({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
-  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />;
-}
-
-function MenubarSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
-  inset?: boolean;
-}) {
-  return (
-    <MenubarPrimitive.SubTrigger
-      data-slot="menubar-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-none select-none data-[inset]:pl-8",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto h-4 w-4" />
-    </MenubarPrimitive.SubTrigger>
-  );
-}
-
-function MenubarSubContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
-  return (
-    <MenubarPrimitive.SubContent
-      data-slot="menubar-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-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export {
-  Menubar,
-  MenubarPortal,
-  MenubarMenu,
-  MenubarTrigger,
-  MenubarContent,
-  MenubarGroup,
-  MenubarSeparator,
-  MenubarLabel,
-  MenubarItem,
-  MenubarShortcut,
-  MenubarCheckboxItem,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarSub,
-  MenubarSubTrigger,
-  MenubarSubContent,
-};

web/src/components/ui/navigation-menu.tsx

@@ -1,168 +0,0 @@
-import * as React from "react";
-import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu@1.2.5";
-import { cva } from "class-variance-authority@0.7.1";
-import { ChevronDownIcon } from "lucide-react@0.487.0";
-
-import { cn } from "./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,
-};

web/src/components/ui/pagination.tsx

@@ -1,127 +0,0 @@
-import * as React from "react";
-import {
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  MoreHorizontalIcon,
-} from "lucide-react@0.487.0";
-
-import { cn } from "./utils";
-import { Button, buttonVariants } from "./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,
-};

web/src/components/ui/popover.tsx

@@ -1,48 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as PopoverPrimitive from "@radix-ui/react-popover@1.1.6";
-
-import { cn } from "./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 };

web/src/components/ui/progress.tsx

@@ -1,31 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as ProgressPrimitive from "@radix-ui/react-progress@1.1.2";
-
-import { cn } from "./utils";
-
-function Progress({
-  className,
-  value,
-  ...props
-}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
-  return (
-    <ProgressPrimitive.Root
-      data-slot="progress"
-      className={cn(
-        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
-        className,
-      )}
-      {...props}
-    >
-      <ProgressPrimitive.Indicator
-        data-slot="progress-indicator"
-        className="bg-primary h-full w-full flex-1 transition-all"
-        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-      />
-    </ProgressPrimitive.Root>
-  );
-}
-
-export { Progress };

web/src/components/ui/radio-group.tsx

@@ -1,45 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group@1.2.3";
-import { CircleIcon } from "lucide-react@0.487.0";
-
-import { cn } from "./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 };

web/src/components/ui/resizable.tsx

@@ -1,56 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { GripVerticalIcon } from "lucide-react@0.487.0";
-import * as ResizablePrimitive from "react-resizable-panels@2.1.7";
-
-import { cn } from "./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-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[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 };

web/src/components/ui/scroll-area.tsx

@@ -1,58 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area@1.2.3";
-
-import { cn } from "./utils";
-
-function ScrollArea({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
-  return (
-    <ScrollAreaPrimitive.Root
-      data-slot="scroll-area"
-      className={cn("relative", className)}
-      {...props}
-    >
-      <ScrollAreaPrimitive.Viewport
-        data-slot="scroll-area-viewport"
-        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
-      >
-        {children}
-      </ScrollAreaPrimitive.Viewport>
-      <ScrollBar />
-      <ScrollAreaPrimitive.Corner />
-    </ScrollAreaPrimitive.Root>
-  );
-}
-
-function ScrollBar({
-  className,
-  orientation = "vertical",
-  ...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
-  return (
-    <ScrollAreaPrimitive.ScrollAreaScrollbar
-      data-slot="scroll-area-scrollbar"
-      orientation={orientation}
-      className={cn(
-        "flex touch-none p-px transition-colors select-none",
-        orientation === "vertical" &&
-          "h-full w-2.5 border-l border-l-transparent",
-        orientation === "horizontal" &&
-          "h-2.5 flex-col border-t border-t-transparent",
-        className,
-      )}
-      {...props}
-    >
-      <ScrollAreaPrimitive.ScrollAreaThumb
-        data-slot="scroll-area-thumb"
-        className="bg-border relative flex-1 rounded-full"
-      />
-    </ScrollAreaPrimitive.ScrollAreaScrollbar>
-  );
-}
-
-export { ScrollArea, ScrollBar };

web/src/components/ui/select.tsx

@@ -1,189 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as SelectPrimitive from "@radix-ui/react-select@2.1.6";
-import {
-  CheckIcon,
-  ChevronDownIcon,
-  ChevronUpIcon,
-} from "lucide-react@0.487.0";
-
-import { cn } from "./utils";
-
-function Select({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Root>) {
-  return <SelectPrimitive.Root data-slot="select" {...props} />;
-}
-
-function SelectGroup({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Group>) {
-  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
-}
-
-function SelectValue({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Value>) {
-  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
-}
-
-function SelectTrigger({
-  className,
-  size = "default",
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-  size?: "sm" | "default";
-}) {
-  return (
-    <SelectPrimitive.Trigger
-      data-slot="select-trigger"
-      data-size={size}
-      className={cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]: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 dark:hover:bg-input/50 flex w-full items-center justify-between gap-2 rounded-md border bg-input-background px-3 py-2 text-sm whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className="size-4 opacity-50" />
-      </SelectPrimitive.Icon>
-    </SelectPrimitive.Trigger>
-  );
-}
-
-function SelectContent({
-  className,
-  children,
-  position = "popper",
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Content>) {
-  return (
-    <SelectPrimitive.Portal>
-      <SelectPrimitive.Content
-        data-slot="select-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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
-          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,
-        )}
-        position={position}
-        {...props}
-      >
-        <SelectScrollUpButton />
-        <SelectPrimitive.Viewport
-          className={cn(
-            "p-1",
-            position === "popper" &&
-              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
-          )}
-        >
-          {children}
-        </SelectPrimitive.Viewport>
-        <SelectScrollDownButton />
-      </SelectPrimitive.Content>
-    </SelectPrimitive.Portal>
-  );
-}
-
-function SelectLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Label>) {
-  return (
-    <SelectPrimitive.Label
-      data-slot="select-label"
-      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
-      {...props}
-    />
-  );
-}
-
-function SelectItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Item>) {
-  return (
-    <SelectPrimitive.Item
-      data-slot="select-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 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 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-        className,
-      )}
-      {...props}
-    >
-      <span className="absolute right-2 flex size-3.5 items-center justify-center">
-        <SelectPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </SelectPrimitive.ItemIndicator>
-      </span>
-      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-    </SelectPrimitive.Item>
-  );
-}
-
-function SelectSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
-  return (
-    <SelectPrimitive.Separator
-      data-slot="select-separator"
-      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  );
-}
-
-function SelectScrollUpButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
-  return (
-    <SelectPrimitive.ScrollUpButton
-      data-slot="select-scroll-up-button"
-      className={cn(
-        "flex cursor-default items-center justify-center py-1",
-        className,
-      )}
-      {...props}
-    >
-      <ChevronUpIcon className="size-4" />
-    </SelectPrimitive.ScrollUpButton>
-  );
-}
-
-function SelectScrollDownButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
-  return (
-    <SelectPrimitive.ScrollDownButton
-      data-slot="select-scroll-down-button"
-      className={cn(
-        "flex cursor-default items-center justify-center py-1",
-        className,
-      )}
-      {...props}
-    >
-      <ChevronDownIcon className="size-4" />
-    </SelectPrimitive.ScrollDownButton>
-  );
-}
-
-export {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-};