From 30a30ceb0f7f3c3f62b826ef2f17feaf09c7ec17 Mon Sep 17 00:00:00 2001 From: saravanakumardb1 Date: Sat, 23 May 2026 00:05:49 -0700 Subject: [PATCH] feat(web/ui5): migrate settings page + 4 modals to @bytelyst/ui primitives MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Completes the high-leverage half of UI5 by migrating the most form-heavy authenticated screens off the legacy 'input-shell' / inline-style pattern onto Input, Textarea, Select, and AlertBanner primitives. Migrated: - web/src/app/(app)/settings/page.tsx — change-password form, feedback form, MCP/API-tokens/offline-queue cards. Replaces 'surface-card' sections with Card components, 'input-shell' inputs/selects/textareas with Input/Select/Textarea, and inline error/success divs with AlertBanner. - web/src/components/CreateNoteModal.tsx — template/workspace/title/body/tags fields. Select primitive uses options=[{value,label}]. - web/src/components/LinkNoteModal.tsx — search input + relationship-type select + alert banner for errors. - web/src/components/ShareDialog.tsx — user-id input, permission select, collaborator/public-link rows now use AlertBanner (tone='neutral') for the muted-surface look. Web Share API unsupported message is now a proper tone='warning' banner. - web/src/components/PromptTemplateEditor.tsx — full form (name, slug, description, 3 selects, 2 textareas) migrated. All existing tests continue to pass without modification because @testing-library queries (getByLabel, getByPlaceholder, getByText) are robust against the underlying HTML structure changes. Verified: - pnpm --filter @notelett/web run typecheck: passes - pnpm --filter @notelett/web run test: 96/96 (existing CreateNoteModal, LinkNoteModal, ShareDialog suites all green) - pnpm run verify: end-to-end (backend 380/380, web 96/96, mobile 97/97) - Legacy class matches in web/src dropped from 89 to 69 over the UI5 slice; remaining matches are in UI6/UI7 territory (dashboard, search, workspaces list, notes detail, chat, palace, NoteEditor). --- web/src/app/(app)/settings/page.tsx | 134 +++++++++++++------- web/src/components/CreateNoteModal.tsx | 112 ++++++---------- web/src/components/LinkNoteModal.tsx | 78 +++++------- web/src/components/PromptTemplateEditor.tsx | 120 ++++++++++-------- web/src/components/ShareDialog.tsx | 110 +++++++--------- 5 files changed, 274 insertions(+), 280 deletions(-) diff --git a/web/src/app/(app)/settings/page.tsx b/web/src/app/(app)/settings/page.tsx index 08efacf..fa90b1f 100644 --- a/web/src/app/(app)/settings/page.tsx +++ b/web/src/app/(app)/settings/page.tsx @@ -4,7 +4,7 @@ import { useState } from "react"; import { useTheme } from "@/lib/use-theme"; import { useAuth } from "@/lib/auth"; import { AppShell } from "@/components/AppShell"; -import { Button, Card } from "@/components/ui/Primitives"; +import { AlertBanner, Button, Card, Input, Select, Textarea } from "@/components/ui/Primitives"; import { getFeedbackClient } from "@/lib/feedback-client"; import { toast } from "@/lib/toast"; import { NOTES_API_URL, PLATFORM_SERVICE_URL, MCP_SERVER_URL, PRODUCT_ID } from "@/lib/product-config"; @@ -65,25 +65,30 @@ export default function SettingsPage() { title="Settings" description="Account, preferences, feedback, and session management." actions={ - } > -
+
{/* Profile */} - + Profile -
+
{user?.name ?? "—"} · {user?.email ?? "—"} · {user?.role ?? "—"}
{/* Appearance */} - -
+ +
Appearance -
Switch between dark and light mode
+
Switch between dark and light mode
 {/* Danger zone */} - + Danger zone -
-
+ Connect your agent (MCP) -

+

Use your platform access token with the shared MCP server on port 4007. Point tools at the NoteLett backend and product id{" "} {PRODUCT_ID}.

- 
+        
           {`Notes API base: ${NOTES_API_URL}
 Platform API: ${PLATFORM_SERVICE_URL}
 MCP API base: ${MCP_SERVER_URL}
@@ -137,29 +166,29 @@ MCP API base: ${MCP_SERVER_URL}
 #   "notelett": { "url": "${MCP_SERVER_URL}" }
 # }`}
         

-        

+        

           Deep links for tools: see docs/DEEP_LINKS.md in the repo.
         

-
+ -
+ API tokens for automation -

+

Scoped tokens for MCP or CI are provisioned through the ByteLyst platform when your tenant enables them. This web app does not yet expose create/revoke; use the platform admin or CLI when available.

-
+ -
+ Offline queue -

+

Failed writes are retried from local storage via @bytelyst/offline-queue (storage key{" "} {`${PRODUCT_ID}_offline_queue`}). Reload or return online to flush.

-
+ {/* Feedback */} -
+ Send feedback -
- - setFeedbackTitle(e.target.value)} /> +
+ setFeedbackTitle(e.target.value)} + />
-