pub/spaceshell
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(app): settings review — startup theme default, slider/shell input UX, dedupe accents, memoize palette

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Vassiliy Yegorov
2026-06-14 19:10:19 +07:00
parent 9ca1ff3bc5
commit 5e6cf4d982
4 changed files with 29 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/App.tsx
+3 -3
View File
@@ -138,8 +138,8 @@ export function App() {
const effectiveFocus = focusedId && leaves.includes(focusedId) ? focusedId : leaves[0] ?? null;
effectiveFocusRef.current = effectiveFocus;
const termFont = config ? { family: config.font_family, size: config.font_size } : null;
const termPalette = config ? resolvePalette(config.theme, config.accent) : null;
const termPalette = useMemo(() => (config ? resolvePalette(config.theme, config.accent) : null), [config?.theme, config?.accent]);
const termFont = useMemo(() => (config ? { family: config.font_family, size: config.font_size } : null), [config?.font_family, config?.font_size]);
function selectWorkspace(id: string) {
setActiveId(id);
@@ -149,7 +149,7 @@ export function App() {
return (
<div style={{ display: "flex", flexDirection: "column", height: "100vh", background: COLORS.bgApp }}>
<TopBar active={active} eventsOpen={eventsOpen} onToggleEvents={() => setEventsOpen((v) => !v)} onShowEvents={() => setEventsOpen(true)} sidebarOpen={sidebarOpen} onToggleSidebar={() => setSidebarOpen((v) => !v)} unread={unread} onOpenSettings={() => setSettingsOpen(true)} />
<TopBar active={active} eventsOpen={eventsOpen} onToggleEvents={() => setEventsOpen((v) => !v)} onShowEvents={() => setEventsOpen(true)} sidebarOpen={sidebarOpen} onToggleSidebar={() => setSidebarOpen((v) => !v)} unread={unread} onOpenSettings={() => { if (config) setSettingsOpen(true); }} />
<div style={{ flex: 1, display: "flex", minHeight: 0 }}>
{sidebarOpen && <Sidebar groups={groups} workspaces={workspaces} activeId={activeId} onSelect={selectWorkspace} onNew={() => setWizard(true)} onDelete={setDeleteTarget} health={health} connected={connected} />}
<div style={{ flex: 1, display: "flex", flexDirection: "column", minWidth: 0 }}>
app/src/Settings.tsx
+19 -12
View File
@@ -1,17 +1,21 @@
import { useEffect, useRef, useState } from "react";
import { COLORS, FONT } from "./theme";
import { COLORS, FONT, ACCENTS } from "./theme";
import { setConfig, shutdownDaemon, restartDaemon } from "./socketBridge";
import type { ConfigView, DaemonHealth } from "./socketBridge";
const FONTS = ["JetBrains Mono", "Menlo", "Monaco", "SF Mono", "Fira Code", "Cascadia Code"];
const ACCENTS: { id: string; hex: string }[] = [
{ id: "blue", hex: "#4C8DFF" }, { id: "teal", hex: "#34D3C2" }, { id: "purple", hex: "#9B7BFF" },
{ id: "green", hex: "#3FB950" }, { id: "orange", hex: "#F2934B" },
];
export function Settings({ config, health, onClose }: { config: ConfigView; health: DaemonHealth | null; onClose: () => void }) {
const ref = useRef<HTMLDivElement>(null);
useEffect(() => { ref.current?.focus(); }, []);
// Fix 2: local state for font-size slider — committed only on pointer release.
const [sizeLocal, setSizeLocal] = useState(config.font_size);
useEffect(() => { setSizeLocal(config.font_size); }, [config.font_size]);
// Fix 3: controlled shell input — synced from config, committed on blur.
const [shellLocal, setShellLocal] = useState(config.default_shell);
useEffect(() => { setShellLocal(config.default_shell); }, [config.default_shell]);
return (
<div onMouseDown={onClose} style={{ position: "fixed", inset: 0, zIndex: 2000, background: "#000A", display: "flex", alignItems: "center", justifyContent: "center" }}>
<div ref={ref} tabIndex={-1} onMouseDown={(e) => e.stopPropagation()} onKeyDown={(e) => { e.stopPropagation(); if (e.key === "Escape") onClose(); }}
@@ -24,8 +28,11 @@ export function Settings({ config, health, onClose }: { config: ConfigView; heal
{FONTS.map((f) => <option key={f} value={f}>{f}</option>)}
</select>
<div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18 }}>
<span style={{ fontSize: 12, color: COLORS.textSecondary }}>Size {config.font_size}</span>
<input type="range" min={10} max={20} value={config.font_size} onChange={(e) => void setConfig({ font_size: Number(e.target.value) })} style={{ flex: 1 }} />
<span style={{ fontSize: 12, color: COLORS.textSecondary }}>Size {sizeLocal}</span>
<input type="range" min={10} max={20} value={sizeLocal}
onChange={(e) => setSizeLocal(Number(e.target.value))}
onPointerUp={() => void setConfig({ font_size: sizeLocal })}
style={{ flex: 1 }} />
</div>
<div style={{ fontSize: 12, color: COLORS.textSecondary, marginBottom: 6 }}>Theme</div>
@@ -39,15 +46,15 @@ export function Settings({ config, health, onClose }: { config: ConfigView; heal
</div>
<div style={{ fontSize: 12, color: COLORS.textSecondary, marginBottom: 6 }}>Accent</div>
<div style={{ display: "flex", gap: 10, marginBottom: 18 }}>
{ACCENTS.map((a) => (
<button key={a.id} onClick={() => void setConfig({ accent: a.id })} aria-label={a.id}
style={{ width: 26, height: 26, borderRadius: "50%", background: a.hex, cursor: "pointer",
border: config.accent === a.id ? `2px solid ${COLORS.textPrimary}` : "2px solid transparent" }} />
{Object.entries(ACCENTS).map(([id, hex]) => (
<button key={id} onClick={() => void setConfig({ accent: id })} aria-label={id}
style={{ width: 26, height: 26, borderRadius: "50%", background: hex, cursor: "pointer",
border: config.accent === id ? `2px solid ${COLORS.textPrimary}` : "2px solid transparent" }} />
))}
</div>
<div style={{ fontSize: 12, color: COLORS.textSecondary, marginBottom: 6 }}>Default shell (empty = auto)</div>
<input defaultValue={config.default_shell} onBlur={(e) => void setConfig({ default_shell: e.target.value })}
<input value={shellLocal} onChange={(e) => setShellLocal(e.target.value)} onBlur={() => void setConfig({ default_shell: shellLocal })}
style={{ width: "100%", padding: 8, marginBottom: 18, background: COLORS.bgPanel, color: COLORS.textPrimary, border: `1px solid ${COLORS.borderStrong}`, borderRadius: 8 }} />
<DaemonSection health={health} />
app/src/TerminalView.tsx
+2 -5
View File
@@ -103,10 +103,7 @@ export function TerminalView({ surfaceId, font, palette }: { surfaceId: string;
}, [surfaceId]); // eslint-disable-line react-hooks/exhaustive-deps
// Live re-apply font and theme when config changes without remounting.
// palette is a new object each render so we depend on a stable key instead.
const paletteKey = palette
? `${palette["bg-panel"]}|${palette["text-primary"]}|${palette["search-match"]}`
: null;
// font and palette are memoized in App.tsx so stable identity = no spurious re-applies.
useEffect(() => {
const t = termRef.current;
if (!t) return;
@@ -116,7 +113,7 @@ export function TerminalView({ surfaceId, font, palette }: { surfaceId: string;
}
if (palette) t.options.theme = xtermTheme(palette);
requestAnimationFrame(() => { try { fitRef.current?.fit(); } catch { /* ignore */ } });
}, [font?.family, font?.size, paletteKey]); // eslint-disable-line react-hooks/exhaustive-deps
}, [font, palette]); // eslint-disable-line react-hooks/exhaustive-deps
return <div ref={ref} style={{ width: "100%", height: "100%" }} />;
}
app/src/main.tsx
+5
View File
@@ -1,6 +1,7 @@
import React from "react";
import ReactDOM from "react-dom/client";
import { App } from "./App";
import { applyTheme } from "./theme";
import "@fontsource/inter/400.css";
import "@fontsource/inter/500.css";
import "@fontsource/inter/600.css";
@@ -9,6 +10,10 @@ import "@fontsource-variable/jetbrains-mono";
import "@xterm/xterm/css/xterm.css";
import "./styles.css";
// Apply default theme before React renders so CSS vars are never unset,
// even if the daemon is slow or offline. getConfig() overrides this later.
applyTheme("dark", "blue");
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<App />