v1.9: settings pane + per-project defaults + bulk archive + themes lift
Adds a singleton, ephemeral 'settings' pane kind to the workspace. Opened via a new bottom-pinned button in ProjectSidebar (emits an open_settings_pane event when a session is mounted; navigates to /settings otherwise). Pane has three sections — Session, Project, Theme — and a maximize toggle that hides sibling pane columns via display:none on desktop only. Settings panes don't count toward MAX_PANES and are filtered out of the localStorage persistence layer so reload always restores a clean workspace. Schema (additive): - projects.default_system_prompt TEXT NOT NULL DEFAULT '' - projects.default_web_search_enabled BOOLEAN NOT NULL DEFAULT false - sessions.web_search_enabled BOOLEAN (nullable; null = inherit) Inference resolves user_prompt = session.system_prompt.trim() || project.default_system_prompt.trim() — empty/whitespace at either layer means "no override". Keeps the columns NOT NULL and matches the existing inherit semantics. Server routes: - GET /api/projects/:id (new; settings pane refetches on project_updated) - PATCH /api/projects/:id accepts default_system_prompt, default_web_search_enabled - PATCH /api/sessions/:id accepts web_search_enabled (tri-state) - POST /api/projects/:id/sessions/archive-all + GET /api/projects/:id/sessions/open-count - POST /api/sessions/:id/chats/archive-all + GET /api/sessions/:id/chats/open-count - PATCH /api/sessions/:id now broadcasts session_updated on every successful PATCH (was rename-only). Lets SettingsPane open in another tab pick up edits without a refetch. Bulk-archive publishes one session_archived / chat_archived frame per affected id so useSidebar's existing reducer cases handle them incrementally — no new frame type, no payload widening. ModelPicker refactored: shared ModelList inside a responsive shell. Desktop = labeled trigger + DropdownMenu, mobile = icon-only Cpu button + BottomSheet. Header in Session.tsx drops the pill wrap on mobile since the new trigger is the visual. ChatInput gains an icon-only '+' DropdownMenu next to AgentPicker when sessionId + webSearchEnabled props are provided. One item for now — Web search — with a checkmark reflecting the stored value (true), not the effective one. Click PATCHes the override; to restore inherit-from-project the user opens SettingsPane. ThemePicker lifted out of pages/Settings.tsx into a reusable component. The standalone /settings route is now a thin wrapper that mounts <ThemePicker /> with a Back button on top (navigate(-1) with fallback to '/'); the SettingsPane Theme tab renders the same picker bare. Project section delete-flow removed (button + confirm dialog + handler). Replaced with "Archive all sessions" using the same two-step count → confirm → fire pattern as "Archive all chats" in the Session section. api.projects.remove() stays in the client because useProjects.ts still uses it. Hand-rolled Switch primitive in SettingsPane (no shadcn switch in the project; spec said no new deps). Section nav is plain buttons (no shadcn Tabs). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -47,6 +47,11 @@ export function Home() {
|
||||
last_session_id: null,
|
||||
status: 'archived' as const,
|
||||
gitea_remote: fromSidebar.gitea_remote,
|
||||
// v1.9: synthesized stub for an archived project that only the
|
||||
// sidebar cache has — defaults match the schema NOT NULL DEFAULT
|
||||
// values. The full row gets re-fetched on unarchive.
|
||||
default_system_prompt: '',
|
||||
default_web_search_enabled: false,
|
||||
},
|
||||
...prev,
|
||||
];
|
||||
|
||||
@@ -116,9 +116,32 @@ function SessionInner({ sessionId }: { sessionId: string }) {
|
||||
event.session_id === sessionId
|
||||
) {
|
||||
navigate(`/project/${event.project_id}`);
|
||||
return;
|
||||
}
|
||||
// v1.9: any session_updated for this session triggers a full refetch so
|
||||
// SettingsPane (mounted in a workspace pane) picks up system_prompt /
|
||||
// web_search_enabled / model edits made from another tab.
|
||||
if (event.type === 'session_updated' && event.session_id === sessionId) {
|
||||
void api.sessions.get(sessionId).then((s) => {
|
||||
setSession(s);
|
||||
setName((prev) => (editingName ? prev : s.name));
|
||||
}).catch(() => {});
|
||||
return;
|
||||
}
|
||||
// v1.9: project_updated → refetch project so the Project section in
|
||||
// SettingsPane reflects the new defaults.
|
||||
if (event.type === 'project_updated' && project && event.project_id === project.id) {
|
||||
void api.projects.get(project.id).then(setProject).catch(() => {});
|
||||
return;
|
||||
}
|
||||
// v1.9: sidebar Settings button broadcasts this when a session is
|
||||
// mounted; we own the workspace pane state, so we open/focus the
|
||||
// singleton settings pane here.
|
||||
if (event.type === 'open_settings_pane') {
|
||||
panesHook.openOrFocusSettingsPane();
|
||||
}
|
||||
});
|
||||
}, [sessionId, editingName, navigate]);
|
||||
}, [sessionId, editingName, navigate, project, panesHook]);
|
||||
|
||||
// v1.8: URL ?pane= sync (mobile only). Lifted from Workspace.tsx so
|
||||
// MobileTabSwitcher's onSwitchPane can push the same URL state and the
|
||||
@@ -211,15 +234,13 @@ function SessionInner({ sessionId }: { sessionId: string }) {
|
||||
</div>
|
||||
|
||||
{session && (
|
||||
<div className="inline-flex items-center rounded-full bg-muted/40 hover:bg-muted/70 px-1 shrink-0">
|
||||
<ModelPicker
|
||||
value={session.model}
|
||||
onChange={async (model) => {
|
||||
const updated = await api.sessions.update(session.id, { model });
|
||||
setSession(updated);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<ModelPicker
|
||||
value={session.model}
|
||||
onChange={async (model) => {
|
||||
const updated = await api.sessions.update(session.id, { model });
|
||||
setSession(updated);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<button
|
||||
@@ -337,6 +358,8 @@ function SessionInner({ sessionId }: { sessionId: string }) {
|
||||
}}
|
||||
panesHook={panesHook}
|
||||
chatsHook={chatsHook}
|
||||
session={session}
|
||||
project={project}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,124 +1,46 @@
|
||||
import { useState } from 'react';
|
||||
import { Check } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
|
||||
import { THEMES, setTheme, useTheme, type ThemeId, type ThemeMode } from '@/lib/theme';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const MODES: { value: ThemeMode; label: string; hint: string }[] = [
|
||||
{ value: 'dark', label: 'Dark', hint: 'Use the dark variant.' },
|
||||
{ value: 'light', label: 'Light', hint: 'Use the light variant.' },
|
||||
{ value: 'system', label: 'System', hint: 'Follow OS preference.' },
|
||||
];
|
||||
import { ArrowLeft } from 'lucide-react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { ThemePicker } from '@/components/ThemePicker';
|
||||
|
||||
// v1.9: thin wrapper around <ThemePicker />. The picker itself moved to a
|
||||
// reusable component (also rendered in the workspace SettingsPane Theme tab).
|
||||
// This page-level shell adds the back affordance + heading chrome that's
|
||||
// appropriate when the picker is the entire route.
|
||||
export function Settings() {
|
||||
const { id: currentId, mode: currentMode } = useTheme();
|
||||
// Track the most recent in-flight pick so the picker can show a subtle
|
||||
// "applying…" state on the targeted card while the PATCH is in flight.
|
||||
const [pending, setPending] = useState<{ kind: 'theme'; id: ThemeId } | { kind: 'mode'; mode: ThemeMode } | null>(null);
|
||||
const navigate = useNavigate();
|
||||
|
||||
async function pickTheme(id: ThemeId) {
|
||||
if (id === currentId || pending) return;
|
||||
setPending({ kind: 'theme', id });
|
||||
try {
|
||||
await setTheme(id, currentMode);
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : 'failed to apply theme');
|
||||
} finally {
|
||||
setPending(null);
|
||||
}
|
||||
}
|
||||
|
||||
async function pickMode(mode: ThemeMode) {
|
||||
if (mode === currentMode || pending) return;
|
||||
setPending({ kind: 'mode', mode });
|
||||
try {
|
||||
await setTheme(currentId, mode);
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : 'failed to apply mode');
|
||||
} finally {
|
||||
setPending(null);
|
||||
function handleBack() {
|
||||
// History-aware: jump back to where the user came from when possible.
|
||||
// Direct loads of /settings (no history) land on Home so the button
|
||||
// always does *something* useful.
|
||||
if (window.history.length > 1) {
|
||||
navigate(-1);
|
||||
} else {
|
||||
navigate('/');
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<div className="max-w-[1000px] mx-auto w-full px-6 py-6 space-y-8">
|
||||
<header>
|
||||
<h1 className="text-xl font-semibold">Settings</h1>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Theme appearance. Saved on change, applies immediately.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<section className="space-y-3">
|
||||
<h2 className="text-sm font-medium">Mode</h2>
|
||||
<RadioGroup
|
||||
value={currentMode}
|
||||
onValueChange={(v) => void pickMode(v as ThemeMode)}
|
||||
className="flex flex-wrap gap-4"
|
||||
<header className="space-y-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleBack}
|
||||
className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground -ml-1 px-1 py-0.5 rounded"
|
||||
aria-label="Back"
|
||||
>
|
||||
{MODES.map((m) => (
|
||||
<div key={m.value} className="flex items-center gap-2">
|
||||
<RadioGroupItem id={`mode-${m.value}`} value={m.value} />
|
||||
<Label htmlFor={`mode-${m.value}`} className="cursor-pointer">
|
||||
<span className="font-medium">{m.label}</span>
|
||||
<span className="ml-2 text-xs text-muted-foreground">{m.hint}</span>
|
||||
</Label>
|
||||
</div>
|
||||
))}
|
||||
</RadioGroup>
|
||||
</section>
|
||||
|
||||
<section className="space-y-3">
|
||||
<h2 className="text-sm font-medium">Theme</h2>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
|
||||
{THEMES.map((t) => {
|
||||
const isActive = t.id === currentId;
|
||||
const isPending = pending?.kind === 'theme' && pending.id === t.id;
|
||||
const isLightOnly = !t.supportsDark;
|
||||
return (
|
||||
<Card
|
||||
key={t.id}
|
||||
onClick={() => void pickTheme(t.id)}
|
||||
className={cn(
|
||||
'p-3 cursor-pointer transition-colors',
|
||||
'hover:bg-accent/10',
|
||||
isActive && 'ring-2 ring-ring',
|
||||
isPending && 'opacity-60',
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="min-w-0">
|
||||
<div className="font-mono text-sm truncate">{t.name}</div>
|
||||
<div className="text-xs text-muted-foreground">{t.family}</div>
|
||||
</div>
|
||||
{isActive && (
|
||||
<span className="inline-flex items-center gap-1 text-xs text-primary shrink-0">
|
||||
<Check className="size-3" /> Selected
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex mt-2 rounded overflow-hidden border border-border/40">
|
||||
{t.anchors.map((hex, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex-1 h-6"
|
||||
style={{ backgroundColor: hex }}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
{isLightOnly && (
|
||||
<div className="mt-2 text-xs text-muted-foreground italic">Light only</div>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
<ArrowLeft className="size-4" />
|
||||
<span>Back</span>
|
||||
</button>
|
||||
<div>
|
||||
<h1 className="text-xl font-semibold">Settings</h1>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Theme appearance. Saved on change, applies immediately.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</header>
|
||||
<ThemePicker />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user