refactor(settings): move sidebar settings into a modal

Clicking Settings now opens a dialog with the status-check interval and canvas snap options plus Save/Cancel, replacing the inline left-panel view. Removes the 'settings' Sidebar view and SettingsPanel component. ha-relevant: maybe
2026-06-05 10:00:39 +02:00
parent 6e17a2afc6
commit fa8f949b45
6 changed files with 217 additions and 221 deletions
@@ -0,0 +1,128 @@
+import { useState, useEffect } from 'react'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { settingsApi } from '@/api/client'
+import { toast } from 'sonner'
+import {
+  type AlignmentSettings,
+  readAlignmentSettings,
+  writeAlignmentSettings,
+  subscribeAlignmentSettings,
+} from '@/utils/alignmentSettings'
+
+interface SettingsModalProps {
+  open: boolean
+  onClose: () => void
+}
+
+export function SettingsModal({ open, onClose }: SettingsModalProps) {
+  const [interval, setIntervalValue] = useState(60)
+  const [saving, setSaving] = useState(false)
+  const [alignment, setAlignment] = useState<AlignmentSettings>(readAlignmentSettings)
+
+  useEffect(() => {
+    if (!open) return
+    settingsApi.get()
+      .then((res) => setIntervalValue(res.data.interval_seconds))
+      .catch(() => {/* use default */})
+  }, [open])
+
+  useEffect(() => subscribeAlignmentSettings(setAlignment), [])
+
+  const updateAlignment = (patch: Partial<AlignmentSettings>) => {
+    const next = { ...alignment, ...patch }
+    setAlignment(next)
+    writeAlignmentSettings(next)
+  }
+
+  const handleSave = async () => {
+    setSaving(true)
+    try {
+      await settingsApi.save({ interval_seconds: interval })
+      toast.success('Settings saved')
+      onClose()
+    } catch {
+      toast.error('Failed to save settings')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
+      <DialogContent className="bg-[#161b22] border-border max-w-md">
+        <DialogHeader>
+          <DialogTitle className="text-foreground">Settings</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-5 py-2">
+          {/* Status checker */}
+          <div className="space-y-1.5">
+            <label className="text-xs text-muted-foreground">Status check interval (s)</label>
+            <div className="flex items-center gap-2">
+              <input
+                type="number"
+                min={10}
+                max={3600}
+                value={interval}
+                onChange={(e) => { const v = Number(e.target.value); if (!isNaN(v)) setIntervalValue(v) }}
+                className="w-24 px-2 py-1 rounded-md text-xs font-mono bg-[#0d1117] border border-border text-foreground focus:outline-none focus:border-[#00d4ff]"
+              />
+              <span className="text-xs text-muted-foreground">seconds</span>
+            </div>
+            <p className="text-[10px] text-muted-foreground leading-tight">
+              How often node health is polled (ping, HTTP, SSH…)
+            </p>
+          </div>
+
+          {/* Canvas */}
+          <div className="pt-3 border-t border-border space-y-3">
+            <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Canvas</span>
+
+            <label className="flex items-center justify-between gap-2 cursor-pointer">
+              <span className="text-xs text-foreground">Snap to nodes</span>
+              <input
+                type="checkbox"
+                checked={alignment.enabled}
+                onChange={(e) => updateAlignment({ enabled: e.target.checked })}
+                className="cursor-pointer accent-[#00d4ff]"
+                aria-label="Toggle alignment guides"
+              />
+            </label>
+
+            <div className={alignment.enabled ? 'space-y-1.5' : 'space-y-1.5 opacity-50 pointer-events-none'}>
+              <label className="text-xs text-muted-foreground">Snap distance</label>
+              <div className="flex items-center gap-2">
+                <input
+                  type="range"
+                  min={2}
+                  max={16}
+                  step={1}
+                  value={alignment.threshold}
+                  onChange={(e) => updateAlignment({ threshold: Number(e.target.value) })}
+                  className="flex-1 cursor-pointer accent-[#00d4ff]"
+                  aria-label="Alignment snap threshold"
+                />
+                <span className="font-mono text-[11px] text-foreground w-8 text-right">{alignment.threshold}px</span>
+              </div>
+              <p className="text-[10px] text-muted-foreground leading-tight">
+                Distance at which dragged nodes snap to neighbours. Hold Alt while dragging to disable.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter className="gap-2">
+          <Button variant="ghost" onClick={onClose}>Cancel</Button>
+          <Button
+            onClick={handleSave}
+            disabled={saving}
+            style={{ background: '#00d4ff', color: '#0d1117' }}
+          >
+            {saving ? 'Saving…' : 'Save'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
@@ -0,0 +1,74 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import { SettingsModal } from '../SettingsModal'
+
+vi.mock('sonner', () => ({ toast: { success: vi.fn(), error: vi.fn() } }))
+vi.mock('@/api/client', () => ({
+  settingsApi: {
+    get: vi.fn(),
+    save: vi.fn(),
+  },
+}))
+
+import { settingsApi } from '@/api/client'
+import { toast } from 'sonner'
+
+describe('SettingsModal', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(settingsApi.get).mockResolvedValue({ data: { interval_seconds: 60 } } as never)
+    vi.mocked(settingsApi.save).mockResolvedValue({ data: { interval_seconds: 60 } } as never)
+    vi.mocked(toast.success).mockReset()
+    vi.mocked(toast.error).mockReset()
+  })
+
+  it('loads interval from API when opened', async () => {
+    render(<SettingsModal open onClose={vi.fn()} />)
+    await waitFor(() => expect(settingsApi.get).toHaveBeenCalledOnce())
+    expect(screen.getByText('Status check interval (s)')).toBeDefined()
+  })
+
+  it('does not fetch when closed', () => {
+    render(<SettingsModal open={false} onClose={vi.fn()} />)
+    expect(settingsApi.get).not.toHaveBeenCalled()
+  })
+
+  it('displays interval loaded from API', async () => {
+    vi.mocked(settingsApi.get).mockResolvedValue({ data: { interval_seconds: 120 } } as never)
+    render(<SettingsModal open onClose={vi.fn()} />)
+    expect(await screen.findByDisplayValue('120')).toBeDefined()
+  })
+
+  it('saves interval and closes on Save click', async () => {
+    const onClose = vi.fn()
+    render(<SettingsModal open onClose={onClose} />)
+    const input = await screen.findByDisplayValue('60')
+    fireEvent.change(input, { target: { value: '180' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }))
+    await waitFor(() => {
+      expect(settingsApi.save).toHaveBeenCalledWith({ interval_seconds: 180 })
+      expect(toast.success).toHaveBeenCalledWith('Settings saved')
+      expect(onClose).toHaveBeenCalled()
+    })
+  })
+
+  it('shows error toast and stays open when save fails', async () => {
+    vi.mocked(settingsApi.save).mockRejectedValue(new Error('network'))
+    const onClose = vi.fn()
+    render(<SettingsModal open onClose={onClose} />)
+    await screen.findByDisplayValue('60')
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }))
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith('Failed to save settings')
+    })
+    expect(onClose).not.toHaveBeenCalled()
+  })
+
+  it('calls onClose on Cancel', async () => {
+    const onClose = vi.fn()
+    render(<SettingsModal open onClose={onClose} />)
+    await screen.findByDisplayValue('60')
+    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }))
+    expect(onClose).toHaveBeenCalledOnce()
+  })
+})