import { useState, useEffect } from "react"; import { useTranslation } from "react-i18next"; import { cn } from "@/shared/lib/cn"; import { Button, buttonVariants } from "@/shared/ui/button"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "@/shared/ui/alert-dialog"; import { Mic, Minimize2, Palette, Settings2, FolderKanban, Info, MessageSquare, Stethoscope, X, } from "lucide-react"; import { IconPlug, IconPuzzle } from "@tabler/icons-react"; import { AppearanceSettings } from "./AppearanceSettings"; import { DoctorSettings } from "./DoctorSettings"; import { ProvidersSettings } from "./ProvidersSettings"; import { ExtensionsSettings } from "@/features/extensions/ui/ExtensionsSettings"; import { VoiceInputSettings } from "./VoiceInputSettings"; import { GeneralSettings } from "./GeneralSettings"; import { CompactionSettings } from "./CompactionSettings"; import { listArchivedProjects, restoreProject, deleteProject, type ProjectInfo, } from "@/features/projects/api/projects"; import { ProjectIcon } from "@/features/projects/ui/ProjectIcon"; import { useChatSessionStore } from "@/features/chat/stores/chatSessionStore"; import { useProjectStore } from "@/features/projects/stores/projectStore"; import { getDisplaySessionTitle } from "@/features/chat/lib/sessionTitle"; import type { Session } from "@/shared/types/chat"; const NAV_ITEMS = [ { id: "appearance", labelKey: "nav.appearance", icon: Palette }, { id: "providers", labelKey: "nav.providers", icon: IconPlug }, { id: "compaction", labelKey: "nav.compaction", icon: Minimize2 }, { id: "extensions", labelKey: "nav.extensions", icon: IconPuzzle }, { id: "voice", labelKey: "nav.voice", icon: Mic }, { id: "general", labelKey: "nav.general", icon: Settings2 }, { id: "projects", labelKey: "nav.projects", icon: FolderKanban }, { id: "chats", labelKey: "nav.chats", icon: MessageSquare }, { id: "doctor", labelKey: "nav.doctor", icon: Stethoscope }, { id: "about", labelKey: "nav.about", icon: Info }, ] as const; export type SectionId = (typeof NAV_ITEMS)[number]["id"]; interface SettingsModalProps { onClose: () => void; initialSection?: SectionId; } export function SettingsModal({ onClose, initialSection = "appearance", }: SettingsModalProps) { const { t } = useTranslation(["settings", "common"]); const [activeSection, setActiveSection] = useState(initialSection); const [isLoaded, setIsLoaded] = useState(false); const [isTransitioning, setIsTransitioning] = useState(false); const [archivedProjects, setArchivedProjects] = useState([]); const [archivedChats, setArchivedChats] = useState([]); const [loadingArchived, setLoadingArchived] = useState(true); const [loadingArchivedChats, setLoadingArchivedChats] = useState(true); const [deletingProject, setDeletingProject] = useState( null, ); // Trigger entrance animations after mount useEffect(() => { const timer = setTimeout(() => setIsLoaded(true), 50); return () => clearTimeout(timer); }, []); // Load archived projects on mount useEffect(() => { listArchivedProjects() .then(setArchivedProjects) .catch(() => setArchivedProjects([])) .finally(() => setLoadingArchived(false)); }, []); // Load archived chats from the session store (persisted in localStorage) useEffect(() => { const archived = useChatSessionStore.getState().getArchivedSessions(); setArchivedChats(archived as unknown as Session[]); setLoadingArchivedChats(false); }, []); const handleRestoreProject = async (id: string) => { try { await restoreProject(id); await useProjectStore.getState().fetchProjects(); setArchivedProjects((prev) => prev.filter((p) => p.id !== id)); } catch { // best-effort } }; const handleRestoreChat = async (id: string) => { await useChatSessionStore.getState().unarchiveSession(id); setArchivedChats((prev) => prev.filter((session) => session.id !== id)); }; const handleDelete = async (id: string) => { try { await deleteProject(id); setArchivedProjects((prev) => prev.filter((p) => p.id !== id)); } catch { // best-effort } }; // Content transition on section change // biome-ignore lint/correctness/useExhaustiveDependencies: activeSection triggers the transition effect intentionally useEffect(() => { setIsTransitioning(true); const timer = setTimeout(() => setIsTransitioning(false), 150); return () => clearTimeout(timer); }, [activeSection]); const navItems = NAV_ITEMS.map((item) => ({ ...item, label: t(item.labelKey), })); return ( ); }

{t("title")}

{t("projects.title")}

{t("projects.sectionTitle")}

{t("chats.title")}

{t("chats.sectionTitle")}

{t("about.title")}