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

fix(app): add a close (X) button to the settings modal

Browse Source 
Esc and click-outside already closed it, but there was no visible affordance.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Vassiliy Yegorov
2026-06-15 13:38:35 +07:00
parent 3dc3da072c
commit bcc88b6be7
1 changed files with 8 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/Settings.tsx
+8 -1
View File
@@ -1,4 +1,5 @@
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { X } from "lucide-react";
import { COLORS, FONT, ACCENTS } from "./theme"; import { COLORS, FONT, ACCENTS } from "./theme";
import { setConfig, restartDaemon } from "./socketBridge"; import { setConfig, restartDaemon } from "./socketBridge";
import type { ConfigView, DaemonHealth } from "./socketBridge"; import type { ConfigView, DaemonHealth } from "./socketBridge";
@@ -20,7 +21,13 @@ export function Settings({ config, health, onClose, onReload }: { config: Config
<div onMouseDown={onClose} style={{ position: "fixed", inset: 0, zIndex: 2000, background: "#000A", display: "flex", alignItems: "center", justifyContent: "center" }}> <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(); }} <div ref={ref} tabIndex={-1} onMouseDown={(e) => e.stopPropagation()} onKeyDown={(e) => { e.stopPropagation(); if (e.key === "Escape") onClose(); }}
style={{ width: 520, maxHeight: "80vh", overflowY: "auto", background: COLORS.bgApp, border: `1px solid ${COLORS.borderStrong}`, borderRadius: 14, padding: 24, color: COLORS.textPrimary, fontFamily: FONT.ui }}> style={{ width: 520, maxHeight: "80vh", overflowY: "auto", background: COLORS.bgApp, border: `1px solid ${COLORS.borderStrong}`, borderRadius: 14, padding: 24, color: COLORS.textPrimary, fontFamily: FONT.ui }}>
<div style={{ fontWeight: 700, fontSize: 16, marginBottom: 16 }}>Settings</div> <div style={{ display: "flex", alignItems: "center", marginBottom: 16 }}>
<span style={{ fontWeight: 700, fontSize: 16, flex: 1 }}>Settings</span>
<button onClick={onClose} aria-label="Close" title="Close (Esc)"
style={{ display: "flex", alignItems: "center", justifyContent: "center", width: 26, height: 26, borderRadius: 6, background: "transparent", border: "none", color: COLORS.textMuted, cursor: "pointer" }}>
<X size={16} />
</button>
</div>
<div style={{ fontSize: 12, color: COLORS.textSecondary, marginBottom: 6 }}>Terminal font</div> <div style={{ fontSize: 12, color: COLORS.textSecondary, marginBottom: 6 }}>Terminal font</div>
<select value={config.font_family} onChange={(e) => void setConfig({ font_family: e.target.value })} <select value={config.font_family} onChange={(e) => void setConfig({ font_family: e.target.value })}