fix(app): settings live-apply — font on open terminals, daemon uptime
- Font change now applies to already-open terminals: the WebGL renderer caches glyphs in a texture atlas keyed by the old font/size, so the live re-apply effect now calls webglAddon.clearTextureAtlas() (via a new ref) after updating fontFamily/fontSize, before refitting. - Daemon uptime now reflects a restart: the Settings daemon section ticks every second for live uptime, and Stop/Restart trigger an onReload callback that re-fetches health/status in App so a restarted daemon's new started_at_ms is shown instead of the stale value. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
+10
-4
@@ -5,7 +5,7 @@ import type { ConfigView, DaemonHealth } from "./socketBridge";
|
||||
|
||||
const FONTS = ["JetBrains Mono", "Menlo", "Monaco", "SF Mono", "Fira Code", "Cascadia Code"];
|
||||
|
||||
export function Settings({ config, health, onClose }: { config: ConfigView; health: DaemonHealth | null; onClose: () => void }) {
|
||||
export function Settings({ config, health, onClose, onReload }: { config: ConfigView; health: DaemonHealth | null; onClose: () => void; onReload: () => void }) {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
useEffect(() => { ref.current?.focus(); }, []);
|
||||
|
||||
@@ -57,7 +57,7 @@ export function Settings({ config, health, onClose }: { config: ConfigView; heal
|
||||
<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} />
|
||||
<DaemonSection health={health} onReload={onReload} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -70,8 +70,14 @@ function fmtUptime(ms: number): string {
|
||||
return `${Math.floor(s / 3600)}h ${Math.floor((s % 3600) / 60)}m`;
|
||||
}
|
||||
|
||||
function DaemonSection({ health }: { health: DaemonHealth | null }) {
|
||||
function DaemonSection({ health, onReload }: { health: DaemonHealth | null; onReload: () => void }) {
|
||||
const [confirm, setConfirm] = useState<null | "stop" | "restart">(null);
|
||||
// Tick so uptime counts up live while the modal is open.
|
||||
const [, setTick] = useState(0);
|
||||
useEffect(() => {
|
||||
const t = setInterval(() => setTick((n) => n + 1), 1000);
|
||||
return () => clearInterval(t);
|
||||
}, []);
|
||||
return (
|
||||
<div style={{ marginTop: 8, paddingTop: 16, borderTop: `1px solid ${COLORS.borderSubtle}` }}>
|
||||
<div style={{ fontSize: 12, color: COLORS.textSecondary, marginBottom: 8 }}>Daemon</div>
|
||||
@@ -92,7 +98,7 @@ function DaemonSection({ health }: { health: DaemonHealth | null }) {
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
|
||||
<button onClick={() => setConfirm(null)} style={{ padding: "5px 12px", background: COLORS.bgElevated, color: COLORS.textPrimary, border: `1px solid ${COLORS.borderStrong}`, borderRadius: 6, fontSize: 12 }}>Cancel</button>
|
||||
<button onClick={() => { const c = confirm; setConfirm(null); void (c === "stop" ? shutdownDaemon() : restartDaemon()); }}
|
||||
<button onClick={() => { const c = confirm; setConfirm(null); void (c === "stop" ? shutdownDaemon() : restartDaemon()).then(onReload); }}
|
||||
style={{ padding: "5px 12px", background: COLORS.stError, color: "#fff", border: "none", borderRadius: 6, fontSize: 12, fontWeight: 600 }}>
|
||||
{confirm === "stop" ? "Stop" : "Restart"}
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user