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

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

frontend/src/stores/__tests__/canvasStore.test.ts

@@ -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,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