mardausdennis
fde7bd83db
ProxyStatusWidget sits outside the sidebar ScrollArea, so every row it renders is taken from the provider list. With the proxy running and pool routing on it renders ten stacked blocks, and the only Collapsible covers version management, which is already closed in that state. Add a chevron that collapses the whole widget in local and remote mode, keeping the status row, version row and action buttons visible. The preference is stored in localStorage and defaults to expanded, so existing setups are unchanged. Opening version settings from a collapsed widget expands it again.
CCS Dashboard UI
React, TypeScript, and Vite frontend for the local dashboard served by the CCS web server through:
ccs config
Development
From the repository root, build the server and open the integrated dashboard:
bun run dev
Pass a host explicitly when testing network access:
bun run dev -- --host 0.0.0.0
bun run dev -- --host 127.0.0.1
For the frontend-only Vite server:
cd ui
bun run dev
Root and UI scripts are defined in
../package.json and package.json.
Source Ownership
| Area | Path |
|---|---|
| Route-level pages | src/pages/ |
| Domain and shared components | src/components/ |
| Server-state hooks | src/hooks/ |
| Cross-page context/providers | src/contexts/ and src/providers/ |
| API, localization, catalogs, helpers | src/lib/ |
| UI tests | tests/ and colocated tests |
Follow the owning domain's existing import pattern. Barrel exports are optional, not required at every directory level.
Quality Commands
cd ui
bun run format
bun run typecheck
bun run lint
bun run validate
bun run test:run
bun run validate currently runs typecheck, lint with fixes, and the format
check. UI tests run with Vitest; use test, test:run, test:coverage, or
test:ui as defined in package.json.
Localization
Dashboard localization uses react-i18next.
| Concern | Source |
|---|---|
| Supported locales, normalization, fallback, persistence | src/lib/locales.ts |
| i18next setup and translation resources | src/lib/i18n.ts |
| Language switcher | src/components/layout/language-switcher.tsx |
English is the fallback. The selected locale is stored in browser local storage
under ccs-ui-locale. Treat src/lib/locales.ts as the complete source of
truth for supported locale codes. When adding or removing a locale, update the
translation resources, switcher, tests, and
dashboard i18n guide in the same change.