url/homelable
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(settings): move Hide IP toggle into Settings modal, persist it

Browse Source 
Hide-IP was a sidebar button held only in memory, so it reset on reload.
Moved it into the Settings modal Canvas section and persist it to
localStorage (new ipDisplay util); the canvas store now seeds hideIp from
storage and writes through on toggleHideIp/setHideIp. Settings is now also
reachable in standalone (no-backend) builds, with the backend-only status
interval guarded so the modal still works there.

ha-relevant: yes
This commit is contained in:
Pouzor
2026-06-05 11:26:28 +02:00
parent c67b1775a5
commit b52bbc6d9f
8 changed files with 124 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/modals/SettingsModal.tsx
+25 -1
View File
@@ -2,6 +2,7 @@ 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 { useCanvasStore } from '@/stores/canvasStore'
import { toast } from 'sonner'
import {
type AlignmentSettings,
@@ -10,6 +11,8 @@ import {
subscribeAlignmentSettings,
} from '@/utils/alignmentSettings'
const STANDALONE = import.meta.env.VITE_STANDALONE === 'true'
interface SettingsModalProps {
open: boolean
onClose: () => void
@@ -19,9 +22,11 @@ export function SettingsModal({ open, onClose }: SettingsModalProps) {
const [interval, setIntervalValue] = useState(60)
const [saving, setSaving] = useState(false)
const [alignment, setAlignment] = useState<AlignmentSettings>(readAlignmentSettings)
const hideIp = useCanvasStore((s) => s.hideIp)
const setHideIp = useCanvasStore((s) => s.setHideIp)
useEffect(() => {
if (!open) return
if (!open || STANDALONE) return
settingsApi.get()
.then((res) => setIntervalValue(res.data.interval_seconds))
.catch(() => {/* use default */})
@@ -36,6 +41,12 @@ export function SettingsModal({ open, onClose }: SettingsModalProps) {
}
const handleSave = async () => {
// Canvas prefs (alignment, hide-IP) persist on change; only the backend
// status-check interval needs an API round-trip.
if (STANDALONE) {
onClose()
return
}
setSaving(true)
try {
await settingsApi.save({ interval_seconds: interval })
@@ -57,6 +68,7 @@ export function SettingsModal({ open, onClose }: SettingsModalProps) {
<div className="space-y-5 py-2">
{/* Status checker */}
{!STANDALONE && (
<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">
@@ -74,6 +86,7 @@ export function SettingsModal({ open, onClose }: SettingsModalProps) {
How often node health is polled (ping, HTTP, SSH…)
</p>
</div>
)}
{/* Canvas */}
<div className="pt-3 border-t border-border space-y-3">
@@ -90,6 +103,17 @@ export function SettingsModal({ open, onClose }: SettingsModalProps) {
/>
</label>
<label className="flex items-center justify-between gap-2 cursor-pointer">
<span className="text-xs text-foreground">Hide IP addresses</span>
<input
type="checkbox"
checked={hideIp}
onChange={(e) => setHideIp(e.target.checked)}
className="cursor-pointer accent-[#00d4ff]"
aria-label="Toggle IP address masking"
/>
</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">
frontend/src/components/modals/__tests__/SettingsModal.test.tsx
+12
View File
@@ -12,6 +12,7 @@ vi.mock('@/api/client', () => ({
import { settingsApi } from '@/api/client'
import { toast } from 'sonner'
import { useCanvasStore } from '@/stores/canvasStore'
describe('SettingsModal', () => {
beforeEach(() => {
@@ -64,6 +65,17 @@ describe('SettingsModal', () => {
expect(onClose).not.toHaveBeenCalled()
})
it('reflects and persists the hide-IP preference', async () => {
useCanvasStore.setState({ hideIp: false })
localStorage.removeItem('homelable.hideIp')
render(<SettingsModal open onClose={vi.fn()} />)
const checkbox = screen.getByLabelText('Toggle IP address masking') as HTMLInputElement
expect(checkbox.checked).toBe(false)
fireEvent.click(checkbox)
expect(useCanvasStore.getState().hideIp).toBe(true)
expect(localStorage.getItem('homelable.hideIp')).toBe('true')
})
it('calls onClose on Cancel', async () => {
const onClose = vi.fn()
render(<SettingsModal open onClose={onClose} />)
frontend/src/components/panels/Sidebar.tsx
+8 -17
View File
@@ -1,5 +1,5 @@
import { useState, useCallback, useEffect, useRef } from 'react'
import { Plus, Save, ScanLine, ChevronLeft, ChevronRight, LayoutDashboard, Clock, EyeOff, RefreshCw, Loader2, Square, Eye, Settings, StopCircle, LogOut, Network, Type, PlusCircle, Pencil, Trash2 } from 'lucide-react'
import { Plus, Save, ScanLine, ChevronLeft, ChevronRight, LayoutDashboard, Clock, EyeOff, RefreshCw, Loader2, Square, Settings, StopCircle, LogOut, Network, Type, PlusCircle, Pencil, Trash2 } from 'lucide-react'
import { Logo } from '@/components/ui/Logo'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import { useCanvasStore } from '@/stores/canvasStore'
@@ -90,7 +90,7 @@ export function Sidebar({ onAddNode, onAddGroupRect, onAddText, onScan, onZigbee
}
}
const { nodes, hasUnsavedChanges, hideIp, toggleHideIp } = useCanvasStore()
const { nodes, hasUnsavedChanges } = useCanvasStore()
const networkNodes = nodes.filter((n) => n.data.type !== 'groupRect' && n.data.type !== 'text')
const onlineCount = networkNodes.filter((n) => n.data.status === 'online').length
@@ -253,13 +253,6 @@ export function Sidebar({ onAddNode, onAddGroupRect, onAddText, onScan, onZigbee
<SidebarItem icon={Type} label="Add Text" collapsed={collapsed} onClick={onAddText} />
{!STANDALONE && <SidebarItem icon={ScanLine} label="Scan Network" collapsed={collapsed} onClick={handleScan} />}
{!STANDALONE && <SidebarItem icon={Network} label="Zigbee Import" collapsed={collapsed} onClick={onZigbeeImport} />}
<SidebarItem
icon={hideIp ? EyeOff : Eye}
label={hideIp ? 'Show IPs' : 'Hide IPs'}
collapsed={collapsed}
onClick={toggleHideIp}
active={hideIp}
/>
<SidebarItem
icon={Save}
label="Save Canvas"
@@ -268,14 +261,12 @@ export function Sidebar({ onAddNode, onAddGroupRect, onAddText, onScan, onZigbee
badge={hasUnsavedChanges}
accent
/>
{!STANDALONE && (
<SidebarItem
icon={Settings}
label="Settings"
collapsed={collapsed}
onClick={onOpenSettings}
/>
)}
<SidebarItem
icon={Settings}
label="Settings"
collapsed={collapsed}
onClick={onOpenSettings}
/>
{!STANDALONE && (
<SidebarItem
icon={LogOut}
frontend/src/components/panels/__tests__/Sidebar.test.tsx
+3 -12
View File
@@ -46,15 +46,12 @@ const makeNode = (id: string, status: NodeData['status'], type: NodeData['type']
data: { label: id, type, status, services: [] },
})
const mockToggleHideIp = vi.fn()
const mockLogout = vi.fn()
function mockStore(overrides: Partial<ReturnType<typeof useCanvasStore>> = {}) {
vi.mocked(useCanvasStore).mockReturnValue({
nodes: [],
hasUnsavedChanges: false,
hideIp: false,
toggleHideIp: mockToggleHideIp,
addNode: vi.fn(),
scanEventTs: 0,
...overrides,
@@ -191,16 +188,10 @@ describe('Sidebar', () => {
expect(defaultProps.onSave).toHaveBeenCalledOnce()
})
it('calls toggleHideIp when Hide IPs is clicked', () => {
it('calls onOpenSettings when Settings is clicked', () => {
render(<Sidebar {...defaultProps} />)
fireEvent.click(screen.getByText('Hide IPs'))
expect(mockToggleHideIp).toHaveBeenCalledOnce()
})
it('shows Show IPs label when hideIp is true', () => {
mockStore({ hideIp: true })
render(<Sidebar {...defaultProps} />)
expect(screen.getByText('Show IPs')).toBeInTheDocument()
fireEvent.click(screen.getByText('Settings'))
expect(defaultProps.onOpenSettings).toHaveBeenCalledOnce()
})
// ── Unsaved changes badge ──────────────────────────────────────────────────
frontend/src/stores/__tests__/canvasStore.test.ts
+20
View File
@@ -800,6 +800,26 @@ describe('canvasStore', () => {
expect(useCanvasStore.getState().nodes).toHaveLength(1)
})
// --- Hide IP preference (persisted to localStorage) ---
it('toggleHideIp flips the flag and persists it', () => {
localStorage.removeItem('homelable.hideIp')
useCanvasStore.setState({ hideIp: false })
useCanvasStore.getState().toggleHideIp()
expect(useCanvasStore.getState().hideIp).toBe(true)
expect(localStorage.getItem('homelable.hideIp')).toBe('true')
useCanvasStore.getState().toggleHideIp()
expect(useCanvasStore.getState().hideIp).toBe(false)
expect(localStorage.getItem('homelable.hideIp')).toBe('false')
})
it('setHideIp sets the flag and persists it', () => {
localStorage.removeItem('homelable.hideIp')
useCanvasStore.getState().setHideIp(true)
expect(useCanvasStore.getState().hideIp).toBe(true)
expect(localStorage.getItem('homelable.hideIp')).toBe('true')
})
// --- Node resizing (width / height) ---
it('addNode preserves explicit width and height', () => {
frontend/src/stores/canvasStore.ts
+13 -2
View File
@@ -13,6 +13,7 @@ import type { NodeData, EdgeData, NodeType, EdgeType, NodeTypeStyle, EdgeTypeSty
import { generateUUID } from '@/utils/uuid'
import { normalizeHandle, removedBottomHandleIds } from '@/utils/handleUtils'
import { applyOpacity } from '@/utils/colorUtils'
import { readHideIp, writeHideIp } from '@/utils/ipDisplay'
type HistoryEntry = { nodes: Node<NodeData>[]; edges: Edge<EdgeData>[] }
type Clipboard = { nodes: Node<NodeData>[]; edges: Edge<EdgeData>[] }
@@ -69,6 +70,7 @@ interface CanvasState {
notifyScanDeviceFound: () => void
hideIp: boolean
toggleHideIp: () => void
setHideIp: (value: boolean) => void
applyTypeNodeStyle: (nodeType: NodeType, style: NodeTypeStyle) => void
applyTypeEdgeStyle: (edgeType: EdgeType, style: EdgeTypeStyle) => void
applyAllCustomStyles: (def: CustomStyleDef) => void
@@ -82,7 +84,7 @@ export const useCanvasStore = create<CanvasState>((set) => ({
selectedNodeIds: [],
editingGroupRectId: null,
editingTextId: null,
hideIp: false,
hideIp: readHideIp(),
scanEventTs: 0,
fitViewPending: false,
@@ -579,7 +581,16 @@ export const useCanvasStore = create<CanvasState>((set) => ({
notifyScanDeviceFound: () => set({ scanEventTs: Date.now() }),
toggleHideIp: () => set((s) => ({ hideIp: !s.hideIp })),
toggleHideIp: () => set((s) => {
const hideIp = !s.hideIp
writeHideIp(hideIp)
return { hideIp }
}),
setHideIp: (value) => {
writeHideIp(value)
set({ hideIp: value })
},
loadCanvas: (nodes, edges) => {
// React Flow requires parents before children in the array
frontend/src/utils/__tests__/ipDisplay.test.ts
+22
View File
@@ -0,0 +1,22 @@
import { describe, it, expect, beforeEach } from 'vitest'
import { readHideIp, writeHideIp } from '@/utils/ipDisplay'
describe('ipDisplay persistence', () => {
beforeEach(() => localStorage.clear())
it('defaults to false when nothing is stored', () => {
expect(readHideIp()).toBe(false)
})
it('round-trips true', () => {
writeHideIp(true)
expect(localStorage.getItem('homelable.hideIp')).toBe('true')
expect(readHideIp()).toBe(true)
})
it('round-trips false', () => {
writeHideIp(true)
writeHideIp(false)
expect(readHideIp()).toBe(false)
})
})
frontend/src/utils/ipDisplay.ts
+21
View File
@@ -0,0 +1,21 @@
// Persisted client-side preference for masking IP addresses on the canvas.
// Kept in localStorage (per-user UI preference, not canvas data) so it
// survives a page reload.
const KEY = 'homelable.hideIp'
export function readHideIp(): boolean {
try {
return localStorage.getItem(KEY) === 'true'
} catch {
return false
}
}
export function writeHideIp(value: boolean): void {
try {
localStorage.setItem(KEY, String(value))
} catch {
/* quota / SSR */
}
}