From 55a12e9bec9dc196b7264da2ea5949ea7873de99 Mon Sep 17 00:00:00 2001 From: Dorian Date: Tue, 10 Mar 2026 23:58:33 +0000 Subject: [PATCH] fix: replace path-option-card with glass-card in Settings.vue Also fix TypeScript errors in test files. Co-Authored-By: Claude Opus 4.6 --- loop/plan.md | 2 +- neode-ui/src/api/__tests__/rpc-client.test.ts | 8 ++++---- neode-ui/src/router/__tests__/guards.test.ts | 2 +- neode-ui/src/stores/__tests__/container.test.ts | 8 ++++---- neode-ui/src/views/Settings.vue | 10 +++++----- 5 files changed, 15 insertions(+), 15 deletions(-) diff --git a/loop/plan.md b/loop/plan.md index 7dc72e93..4b284981 100644 --- a/loop/plan.md +++ b/loop/plan.md @@ -36,7 +36,7 @@ #### Sprint 2: Fix Broken UI (Week 3-4) -- [ ] **UI-01** — Fix Settings.vue: replace .path-option-card with .glass-card. In `neode-ui/src/views/Settings.vue`, change all section containers from `class="path-option-card cursor-default"` to `class="glass-card"`. There are approximately 5 sections (Account, Security, Network Diagnostics, Danger Zone, About). Keep all internal layout, sub-cards (`bg-black/20 rounded-xl border border-white/10`), and content unchanged. Only the outer container class changes. **Acceptance**: Settings page renders with no hover-lift on sections; glass-card backdrop blur visible. Deploy and verify at http://192.168.1.228/dashboard/settings. +- [x] **UI-01** — Fix Settings.vue: replace .path-option-card with .glass-card. In `neode-ui/src/views/Settings.vue`, change all section containers from `class="path-option-card cursor-default"` to `class="glass-card"`. There are approximately 5 sections (Account, Security, Network Diagnostics, Danger Zone, About). Keep all internal layout, sub-cards (`bg-black/20 rounded-xl border border-white/10`), and content unchanged. Only the outer container class changes. **Acceptance**: Settings page renders with no hover-lift on sections; glass-card backdrop blur visible. Deploy and verify at http://192.168.1.228/dashboard/settings. - [ ] **UI-02** — Fix Web5.vue top bar: use proper glass sub-card pattern. In `neode-ui/src/views/Web5.vue` lines 10-119, the 5 quick-action cards inside the `.glass-card` container use `bg-white/5 rounded-lg`. This is the correct pattern for info sub-cards inside a glass container per CLAUDE.md CSS hierarchy (`bg-white/5` = "Simple read-only info rows"). However, verify alignment with the Server.vue quick-actions bar (lines 10-96) which uses the identical pattern. Confirm both pages are visually consistent. If Web5 cards lack `data-controller-container` and `tabindex="0"` attributes, add them for keyboard/gamepad navigation parity. **Acceptance**: Web5 and Server quick-action bars visually match. No animation changes. Deploy and verify. diff --git a/neode-ui/src/api/__tests__/rpc-client.test.ts b/neode-ui/src/api/__tests__/rpc-client.test.ts index 707b4f32..d5fd1bd5 100644 --- a/neode-ui/src/api/__tests__/rpc-client.test.ts +++ b/neode-ui/src/api/__tests__/rpc-client.test.ts @@ -49,7 +49,7 @@ describe('RPCClient', () => { expect(result).toEqual({ did: 'did:key:z123' }) expect(mockFetch).toHaveBeenCalledOnce() - const [url, init] = mockFetch.mock.calls[0] + const [url, init] = mockFetch.mock.calls[0]! expect(url).toBe('/rpc/v1') expect(init.method).toBe('POST') expect(init.credentials).toBe('include') @@ -61,7 +61,7 @@ describe('RPCClient', () => { await rpcClient.call({ method: 'test', params: {} }) - const [, init] = mockFetch.mock.calls[0] + const [, init] = mockFetch.mock.calls[0]! expect(init.credentials).toBe('include') }) @@ -150,7 +150,7 @@ describe('RPCClient', () => { await rpcClient.call({ method: 'test' }) - const body = JSON.parse(mockFetch.mock.calls[0][1].body) + const body = JSON.parse(mockFetch.mock.calls[0]![1].body) expect(body.params).toEqual({}) }) @@ -159,7 +159,7 @@ describe('RPCClient', () => { await rpcClient.call({ method: 'test', timeout: 5000 }) - const [, init] = mockFetch.mock.calls[0] + const [, init] = mockFetch.mock.calls[0]! expect(init.signal).toBeInstanceOf(AbortSignal) }) }) diff --git a/neode-ui/src/router/__tests__/guards.test.ts b/neode-ui/src/router/__tests__/guards.test.ts index 914e7d8e..66e797b3 100644 --- a/neode-ui/src/router/__tests__/guards.test.ts +++ b/neode-ui/src/router/__tests__/guards.test.ts @@ -1,5 +1,5 @@ import { describe, it, expect, vi, beforeEach } from 'vitest' -import { createRouter, createWebHistory, type RouteLocationNormalized } from 'vue-router' +import { createRouter, createWebHistory } from 'vue-router' import { setActivePinia, createPinia } from 'pinia' import { defineComponent } from 'vue' diff --git a/neode-ui/src/stores/__tests__/container.test.ts b/neode-ui/src/stores/__tests__/container.test.ts index 6fae57c0..ff5a5f98 100644 --- a/neode-ui/src/stores/__tests__/container.test.ts +++ b/neode-ui/src/stores/__tests__/container.test.ts @@ -22,9 +22,9 @@ import { containerClient } from '@/api/container-client' const mockedClient = vi.mocked(containerClient) const mockContainers = [ - { name: 'bitcoin-knots', state: 'running', status: 'Up 2 hours', image: 'bitcoinknots:29', lan_address: 'http://localhost:8332' }, - { name: 'lnd', state: 'stopped', status: 'Exited (0)', image: 'lnd:v0.18.4', lan_address: undefined }, - { name: 'mempool', state: 'running', status: 'Up 1 hour', image: 'mempool:latest', lan_address: 'http://localhost:8080' }, + { id: '1', name: 'bitcoin-knots', state: 'running' as const, status: 'Up 2 hours', image: 'bitcoinknots:29', created: '2026-01-01', ports: ['8332'], lan_address: 'http://localhost:8332' }, + { id: '2', name: 'lnd', state: 'stopped' as const, status: 'Exited (0)', image: 'lnd:v0.18.4', created: '2026-01-01', ports: ['9735'], lan_address: undefined }, + { id: '3', name: 'mempool', state: 'running' as const, status: 'Up 1 hour', image: 'mempool:latest', created: '2026-01-01', ports: ['8080'], lan_address: 'http://localhost:8080' }, ] describe('useContainerStore', () => { @@ -71,7 +71,7 @@ describe('useContainerStore', () => { await store.fetchContainers() expect(store.stoppedContainers).toHaveLength(1) - expect(store.stoppedContainers[0].name).toBe('lnd') + expect(store.stoppedContainers[0]!.name).toBe('lnd') }) it('startContainer calls client and refreshes', async () => { diff --git a/neode-ui/src/views/Settings.vue b/neode-ui/src/views/Settings.vue index 3e07c77a..1228a78a 100644 --- a/neode-ui/src/views/Settings.vue +++ b/neode-ui/src/views/Settings.vue @@ -12,7 +12,7 @@ -
+

Account

@@ -385,7 +385,7 @@
-
+

Interface Mode

Choose how you want to interact with your node.

@@ -416,7 +416,7 @@
-
+

Claude Authentication

Connect your Claude Max account to enable AI chat features.

@@ -475,7 +475,7 @@ -
+

AI Data Access

@@ -543,7 +543,7 @@
-
+

Network

Network connectivity, UPnP, and diagnostics