WEBDIENSTE/openswarm
1
0
Fork 0
mirror of https://github.com/openswarm-ai/openswarm.git synced 2026-08-22 12:42:22 +02:00
Code Issues Packages Projects Releases Wiki Activity

[eric] settings: shared toggle/switch styles replace third-copy dupes; styles typed off any

Browse Source
This commit is contained in:
ciregenz
2026-07-28 11:06:54 -07:00
parent 2a9f1e4bf3
commit 8d2ef9b62a
3 changed files with 37 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/pages/Settings/sections/general/GeneralAdvanced.tsx
+3 -9
View File
@@ -22,7 +22,7 @@ const GeneralAdvanced: React.FC<{
const c = useClaudeTokens();
const dispatch = useAppDispatch();
const appVersion = useAppSelector((s) => s.update.appVersion);
const { sectionSx, rowSx, inlineRowSx, inlineRowLastSx, labelSx, descSx } = styles;
const { sectionSx, rowSx, inlineRowSx, inlineRowLastSx, labelSx, descSx, switchSx } = styles;
// Provenance: the exact commit this build was cut from. Surfaced so a support screenshot of Settings is enough to identify the shipped code. Empty in dev / web (no Electron bridge or unknown sha), in which case we hide the row.
const [buildLabel, setBuildLabel] = React.useState<string | null>(null);
@@ -44,10 +44,7 @@ const GeneralAdvanced: React.FC<{
<Switch
checked={form.dev_mode}
onChange={(e) => setForm({ ...form, dev_mode: e.target.checked })}
sx={{
'& .MuiSwitch-switchBase.Mui-checked': { color: c.accent.primary },
'& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { bgcolor: c.accent.primary },
}}
sx={switchSx}
/>
</Box>
@@ -59,10 +56,7 @@ const GeneralAdvanced: React.FC<{
<Switch
checked={form.allow_experimental_updates}
onChange={(e) => setForm({ ...form, allow_experimental_updates: e.target.checked })}
sx={{
'& .MuiSwitch-switchBase.Mui-checked': { color: c.accent.primary },
'& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { bgcolor: c.accent.primary },
}}
sx={switchSx}
/>
</Box>
frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
+7 -62
View File
@@ -24,7 +24,7 @@ const GeneralInterface: React.FC<{
const c = useClaudeTokens();
const { washOpacity, grain, setWashOpacity, setGrain } = useThemeWash();
const [recordingShortcut, setRecordingShortcut] = useState(false);
const { fieldSx, sectionSx, rowSx, rowLastSx, inlineRowSx, inlineRowLastSx, labelSx, descSx } = styles;
const { fieldSx, sectionSx, rowSx, rowLastSx, inlineRowSx, inlineRowLastSx, labelSx, descSx, toggleGroupSx, switchSx } = styles;
return (
<>
@@ -39,23 +39,7 @@ const GeneralInterface: React.FC<{
exclusive
onChange={(_, v) => { if (v) setForm({ ...form, theme: v }); }}
size="small"
sx={{
'& .MuiToggleButton-root': {
color: c.text.muted,
borderColor: c.border.medium,
textTransform: 'none',
px: 2,
py: 0.5,
gap: 0.5,
fontSize: '0.8125rem',
'&.Mui-selected': {
bgcolor: `${c.accent.primary}15`,
color: c.accent.primary,
borderColor: c.accent.primary,
'&:hover': { bgcolor: `${c.accent.primary}20` },
},
},
}}
sx={toggleGroupSx}
>
<ToggleButton value="light">
<LightModeIcon sx={{ fontSize: 16 }} /> Light
@@ -76,22 +60,7 @@ const GeneralInterface: React.FC<{
exclusive
onChange={(_, v) => { if (v) setForm({ ...form, ui_font_scale: v }); }}
size="small"
sx={{
'& .MuiToggleButton-root': {
color: c.text.muted,
borderColor: c.border.medium,
textTransform: 'none',
px: 1.75,
py: 0.5,
fontSize: '0.8125rem',
'&.Mui-selected': {
bgcolor: `${c.accent.primary}15`,
color: c.accent.primary,
borderColor: c.accent.primary,
'&:hover': { bgcolor: `${c.accent.primary}20` },
},
},
}}
sx={toggleGroupSx}
>
<ToggleButton value={0.9}>Small</ToggleButton>
<ToggleButton value={1}>Default</ToggleButton>
@@ -116,22 +85,7 @@ const GeneralInterface: React.FC<{
if (v) void window.openswarm?.voiceRequestHoldPermission?.();
}}
size="small"
sx={{
'& .MuiToggleButton-root': {
color: c.text.muted,
borderColor: c.border.medium,
textTransform: 'none',
px: 1.75,
py: 0.5,
fontSize: '0.8125rem',
'&.Mui-selected': {
bgcolor: `${c.accent.primary}15`,
color: c.accent.primary,
borderColor: c.accent.primary,
'&:hover': { bgcolor: `${c.accent.primary}20` },
},
},
}}
sx={toggleGroupSx}
>
<ToggleButton value={true}>Hold to talk</ToggleButton>
<ToggleButton value={false}>Tap to toggle</ToggleButton>
@@ -245,10 +199,7 @@ const GeneralInterface: React.FC<{
<Switch
checked={form.auto_select_mode_on_new_agent}
onChange={(e) => setForm({ ...form, auto_select_mode_on_new_agent: e.target.checked })}
sx={{
'& .MuiSwitch-switchBase.Mui-checked': { color: c.accent.primary },
'& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { bgcolor: c.accent.primary },
}}
sx={switchSx}
/>
</Box>
@@ -260,10 +211,7 @@ const GeneralInterface: React.FC<{
<Switch
checked={form.expand_new_chats_in_dashboard}
onChange={(e) => setForm({ ...form, expand_new_chats_in_dashboard: e.target.checked })}
sx={{
'& .MuiSwitch-switchBase.Mui-checked': { color: c.accent.primary },
'& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { bgcolor: c.accent.primary },
}}
sx={switchSx}
/>
</Box>
@@ -275,10 +223,7 @@ const GeneralInterface: React.FC<{
<Switch
checked={form.auto_reveal_sub_agents}
onChange={(e) => setForm({ ...form, auto_reveal_sub_agents: e.target.checked })}
sx={{
'& .MuiSwitch-switchBase.Mui-checked': { color: c.accent.primary },
'& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { bgcolor: c.accent.primary },
}}
sx={switchSx}
/>
</Box>
frontend/src/app/pages/Settings/sections/settingsStyles.ts
+27 -2
View File
@@ -1,5 +1,7 @@
import { ClaudeTokens } from '@/shared/styles/claudeTokens';
// Theme-dependent style objects shared across Settings tabs; built from the resolved Claude tokens.
export function makeSettingsStyles(c: any) {
export function makeSettingsStyles(c: ClaudeTokens) {
const fieldSx = {
'& .MuiOutlinedInput-root': {
fontSize: '0.875rem',
@@ -59,7 +61,30 @@ export function makeSettingsStyles(c: any) {
lineHeight: 1.4,
};
return { fieldSx, sectionSx, rowSx, rowLastSx, inlineRowSx, inlineRowLastSx, labelSx, descSx };
const toggleGroupSx = {
'& .MuiToggleButton-root': {
color: c.text.muted,
borderColor: c.border.medium,
textTransform: 'none' as const,
px: 1.75,
py: 0.5,
gap: 0.5,
fontSize: '0.8125rem',
'&.Mui-selected': {
bgcolor: `${c.accent.primary}15`,
color: c.accent.primary,
borderColor: c.accent.primary,
'&:hover': { bgcolor: `${c.accent.primary}20` },
},
},
};
const switchSx = {
'& .MuiSwitch-switchBase.Mui-checked': { color: c.accent.primary },
'& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { bgcolor: c.accent.primary },
};
return { fieldSx, sectionSx, rowSx, rowLastSx, inlineRowSx, inlineRowLastSx, labelSx, descSx, toggleGroupSx, switchSx };
}
export type SettingsStyles = ReturnType<typeof makeSettingsStyles>;