feat(settings): add Stacks section for stack workflow preferences (#1366)

Move the browser-local Deploy progress, Progress style, and Diff preview before save controls out of Appearance into a new Stacks section under the Infrastructure group. These are stack lifecycle and editor workflow preferences, not visual style, so Settings now groups them where operators expect to find them. Add a browser-local masthead scope so these localStorage-backed sections read SCOPE browser instead of the misleading global, and apply it to both Appearance and Stacks. Control behavior, storage keys, and backing hooks are unchanged; this is an information-architecture move only.
2026-09-04 06:35:29 +00:00 · 2026-06-12 18:40:53 -04:00
parent 6cbab661a0
commit ebf66fd92a
14 changed files with 266 additions and 103 deletions
@@ -0,0 +1,80 @@
+import { Checkbox } from '@/components/ui/checkbox';
+import { SegmentedControl } from '@/components/ui/segmented-control';
+import { useDeployFeedbackEnabled } from '@/hooks/use-deploy-feedback-enabled';
+import { useDeployFeedbackStyle, type DeployFeedbackStyle } from '@/hooks/use-deploy-feedback-style';
+import { useComposeDiffPreviewEnabled } from '@/hooks/use-compose-diff-preview-enabled';
+import { SettingsSection } from './SettingsSection';
+import { SettingsField } from './SettingsField';
+
+const DEPLOY_STYLE_OPTIONS: { value: DeployFeedbackStyle; label: string }[] = [
+    { value: 'modal', label: 'Modal' },
+    { value: 'inline', label: 'Inline' },
+];
+
+export function StacksSection() {
+    const [isEnabled, setEnabled] = useDeployFeedbackEnabled();
+    const [feedbackStyle, setFeedbackStyle] = useDeployFeedbackStyle();
+    const [diffPreviewEnabled, setDiffPreviewEnabled] = useComposeDiffPreviewEnabled();
+
+    return (
+        <div className="flex flex-col gap-10">
+            <SettingsSection title="Workflow" kicker="this browser">
+                <SettingsField
+                    label="Deploy progress"
+                    helper="Stream live output for deploy, restart, update, install, and Git operations, with a warning when an operation goes quiet. On by default; turn it off to run operations without it."
+                >
+                    <div className="flex items-center gap-2">
+                        <Checkbox
+                            id="deploy-feedback"
+                            checked={isEnabled}
+                            onCheckedChange={(v) => setEnabled(v === true)}
+                        />
+                        <label
+                            htmlFor="deploy-feedback"
+                            className="text-sm text-stat-value cursor-pointer select-none"
+                        >
+                            {isEnabled ? 'Enabled' : 'Disabled'}
+                        </label>
+                    </div>
+                </SettingsField>
+
+                {isEnabled && (
+                    <SettingsField
+                        label="Progress style"
+                        helper="Modal opens a centered overlay. Inline shows a quiet status on the stack detail with the full log a click away under View output."
+                    >
+                        <SegmentedControl
+                            value={feedbackStyle}
+                            options={DEPLOY_STYLE_OPTIONS}
+                            onChange={setFeedbackStyle}
+                            ariaLabel="Deploy progress style"
+                        />
+                    </SettingsField>
+                )}
+
+                <SettingsField
+                    label="Diff preview before save"
+                    helper="Show a side-by-side diff of compose and env edits before they reach disk."
+                >
+                    <div className="flex items-center gap-2">
+                        <Checkbox
+                            id="compose-diff-preview"
+                            checked={diffPreviewEnabled}
+                            onCheckedChange={(v) => setDiffPreviewEnabled(v === true)}
+                        />
+                        <label
+                            htmlFor="compose-diff-preview"
+                            className="text-sm text-stat-value cursor-pointer select-none"
+                        >
+                            {diffPreviewEnabled ? 'Enabled' : 'Disabled'}
+                        </label>
+                    </div>
+                </SettingsField>
+            </SettingsSection>
+
+            <p className="font-mono text-[10px] leading-3 uppercase tracking-[0.18em] text-stat-subtitle/70">
+                ⓘ saved to this browser only · every device remembers its own choice
+            </p>
+        </div>
+    );
+}