From aef40078d0313250e6c03a5d4828a855f55f8399 Mon Sep 17 00:00:00 2001 From: chihlasm Date: Thu, 19 Feb 2026 22:10:47 -0500 Subject: [PATCH] =?UTF-8?q?fix:=20UX=20deep=20dive=20=E2=80=94=2028=20fixe?= =?UTF-8?q?s=20across=20authoring,=20navigation,=20consistency,=20and=20cl?= =?UTF-8?q?eanup=20(#86)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: tree editor authoring blockers - scroll trap, form density, branching hint - Replace fixed viewport height with flex layout in NodeEditorPanel - Make footer sticky so Save/Cancel always reachable - Compact root node banner to single-line with InfoTip tooltip - Reduce resolution note from callout box to inline text - Add answer-first branching hint below options label Co-Authored-By: Claude Opus 4.6 * fix: broken functionality - auth errors, toast logic, role update, routing, step library - Extract backend error detail in auth store login/register - Fix inverted 4xx toast logic and add 429 rate limit handling - Send account_role field to match backend schema in role update - Use type-aware routing for Repeat Last Session button - Add step library placeholder page and route, remove dot badge Co-Authored-By: Claude Opus 4.6 * fix: navigation correctness - back buttons, exit dialog, dedup nav, redirects - Standardize all procedural back/exit paths to /trees (not /my-trees) - Add exit button with ConfirmDialog to procedural session top bar - Consolidate duplicate account links in sidebar and topbar - Auto-redirect non-owners to personal analytics - Add toast feedback before silent permission redirects in tree editor - Delete orphaned AdminCategoriesPage Co-Authored-By: Claude Opus 4.6 * refactor: shared components, ConfirmDialog migration, pinned flow fixes - Create shared Spinner component with sm/md/lg sizes - Migrate 13 page-level spinners to shared Spinner - Promote EmptyState to shared component, adopt in MyShares and SessionHistory - Replace window.confirm with ConfirmDialog in 3 files - Fix PinnedFlow.tree_type to include maintenance, update emoji display - Verify sidebar unpin handler already correct (no-op) Co-Authored-By: Claude Opus 4.6 * fix: visual consistency - toasts, typography, focus rings, container padding - Remove richColors from Sonner toasts, limit stacking to 3 - Add font-heading to all page H1s (7 files) - Add font-label (Outfit) to TagBadges component - Fix focus ring tokens on analytics pages - Replace deprecated glass-stat with design system tokens - Standardize container padding on analytics pages Co-Authored-By: Claude Opus 4.6 * fix: backend alignment - remove drafts toggle, clean dead code, truncation indicator - Remove non-functional drafts toggle and clean TreeFilters type - Fix AccountInvite type to match backend schema - Remove dead API methods: pinnedFlows.pin/reorder, trees.getSharedTree - Remove unused types: SessionListResponse, RatingCreate.is_verified_use - Add session list truncation indicator with size=51 lookahead Co-Authored-By: Claude Opus 4.6 * fix: remove bg-black from PageLoader and RouteError, fix PageLoader height PageLoader used h-screen inside a grid cell, causing it to overflow. Changed to h-full so it fits within the main-content area. Removed bg-black from both PageLoader and RouteError in favor of theme-aware bg-background to prevent black flash during lazy loading. Co-Authored-By: Claude Opus 4.6 * fix: guard against Pydantic validation error objects in toast/error messages FastAPI returns `detail` as an array of objects for 422 validation errors, not a string. Passing these objects to toast.error() or rendering them in JSX crashes React with Error #31 ("Objects are not valid as a React child"). Now checks typeof detail === 'string' before using it. Co-Authored-By: Claude Opus 4.6 * fix: toast styling, node editor first-click, action node placeholder pattern 1. Toast fixes: Add theme="dark" to Sonner, use !important CSS overrides instead of zero-specificity :where() selectors, suppress noisy 4xx global toasts (pages handle their own errors) 2. Node editor first-click: Add node.type to draft initialization useEffect deps so draft resets when answer stub converts to real type 3. Action node redesign: Remove NodePicker dropdown, auto-create answer placeholder on save (matching decision node pattern). Users click the placeholder on canvas to choose type and fill in details. Co-Authored-By: Claude Opus 4.6 * fix: auto-seed test users when release command fails on PR envs The background seeder now creates users directly via DB if login fails, instead of silently aborting. This handles Railway PR environments where the releaseCommand may not execute properly. Co-Authored-By: Claude Opus 4.6 * fix: remove categories/tags from sidebar to prevent footer clipping Categories and Tags sections were pushing Feedback, Account, and Collapse off-screen when All Flows expanded its children. These filters already exist on the TreeLibraryPage, so the sidebar duplicates were removed. Co-Authored-By: Claude Opus 4.6 --------- Co-authored-by: Claude Opus 4.6 --- backend/app/main.py | 25 +- .../ResolutionFlow_UX_Deep_Dive_Final_Plan.md | 441 ++++++++++++++++++ frontend/src/api/accounts.ts | 2 +- frontend/src/api/client.ts | 22 +- frontend/src/api/pinnedFlows.ts | 12 +- frontend/src/api/sessions.ts | 8 - frontend/src/api/trees.ts | 7 +- frontend/src/components/admin/EmptyState.tsx | 27 +- frontend/src/components/admin/PageHeader.tsx | 2 +- frontend/src/components/common/EmptyState.tsx | 25 + frontend/src/components/common/PageLoader.tsx | 6 +- frontend/src/components/common/RouteError.tsx | 2 +- frontend/src/components/common/Spinner.tsx | 26 ++ frontend/src/components/common/TagBadges.tsx | 4 +- frontend/src/components/layout/Sidebar.tsx | 88 +--- frontend/src/components/layout/TopBar.tsx | 12 +- .../src/components/library/FolderSidebar.tsx | 23 +- .../components/sidebar/PinnedFlowsSection.tsx | 2 +- .../tree-editor/NodeEditorPanel.tsx | 37 +- .../components/tree-editor/NodeFormAction.tsx | 25 +- .../tree-editor/NodeFormDecision.tsx | 20 +- .../tree-editor/NodeFormResolution.tsx | 7 +- frontend/src/index.css | 106 ++--- frontend/src/main.tsx | 7 +- frontend/src/pages/AccountSettingsPage.tsx | 7 +- frontend/src/pages/AdminCategoriesPage.tsx | 242 ---------- frontend/src/pages/FeedbackPage.tsx | 2 +- frontend/src/pages/MyAnalyticsPage.tsx | 11 +- frontend/src/pages/MySharesPage.tsx | 57 ++- frontend/src/pages/MyTreesPage.tsx | 5 +- frontend/src/pages/ProceduralEditorPage.tsx | 9 +- .../src/pages/ProceduralNavigationPage.tsx | 35 +- frontend/src/pages/SessionDetailPage.tsx | 6 +- frontend/src/pages/SessionHistoryPage.tsx | 51 +- frontend/src/pages/SharedSessionPage.tsx | 5 +- frontend/src/pages/StepLibraryPage.tsx | 25 + frontend/src/pages/TeamAnalyticsPage.tsx | 32 +- frontend/src/pages/TreeEditorPage.tsx | 6 +- frontend/src/pages/TreeLibraryPage.tsx | 32 +- frontend/src/pages/TreeNavigationPage.tsx | 3 +- .../src/pages/account/TeamCategoriesPage.tsx | 2 +- frontend/src/pages/index.ts | 1 - frontend/src/router.tsx | 9 + frontend/src/store/authStore.ts | 8 +- frontend/src/types/account.ts | 4 +- frontend/src/types/step.ts | 1 - frontend/src/types/tree.ts | 1 - 47 files changed, 864 insertions(+), 626 deletions(-) create mode 100644 docs/plans/ResolutionFlow_UX_Deep_Dive_Final_Plan.md create mode 100644 frontend/src/components/common/EmptyState.tsx create mode 100644 frontend/src/components/common/Spinner.tsx delete mode 100644 frontend/src/pages/AdminCategoriesPage.tsx create mode 100644 frontend/src/pages/StepLibraryPage.tsx diff --git a/backend/app/main.py b/backend/app/main.py index 91b34c91..01ccb65f 100644 --- a/backend/app/main.py +++ b/backend/app/main.py @@ -27,8 +27,20 @@ def _configure_seed_module(mod: object, api_url: str, email: str, password: str) mod.ADMIN_PASSWORD = password # type: ignore[attr-defined] +async def _seed_users_directly() -> None: + """Seed test users directly via DB if they don't exist yet.""" + try: + from scripts.seed_test_users import main as seed_users + logger.info("[seed] Seeding test users directly via DB...") + await seed_users() + logger.info("[seed] Test users seeded!") + except Exception as e: + logger.warning(f"[seed] User seeding failed: {e}") + raise + + async def _seed_trees_background() -> None: - """Background task: seed all flows via HTTP API after server is ready.""" + """Background task: seed test users + all flows after server is ready.""" await asyncio.sleep(5) # Wait for server to be fully ready port = os.environ.get("PORT", "8000") api_url = f"http://127.0.0.1:{port}/api/v1" @@ -37,12 +49,17 @@ async def _seed_trees_background() -> None: try: import httpx - # Login to verify admin user exists + # Try to login — if it fails, seed users first async with httpx.AsyncClient(base_url=api_url, timeout=30) as client: login_resp = await client.post("/auth/login/json", json={"email": email, "password": password}) if login_resp.status_code != 200: - logger.warning("[seed] Could not login as admin — skipping flow seeding") - return + logger.warning("[seed] Admin login failed — seeding users first") + await _seed_users_directly() + # Retry login after seeding users + login_resp = await client.post("/auth/login/json", json={"email": email, "password": password}) + if login_resp.status_code != 200: + logger.error(f"[seed] Admin login still failing after user seed (status={login_resp.status_code}) — aborting") + return token = login_resp.json()["access_token"] # Check if trees already exist diff --git a/docs/plans/ResolutionFlow_UX_Deep_Dive_Final_Plan.md b/docs/plans/ResolutionFlow_UX_Deep_Dive_Final_Plan.md new file mode 100644 index 00000000..b20701b8 --- /dev/null +++ b/docs/plans/ResolutionFlow_UX_Deep_Dive_Final_Plan.md @@ -0,0 +1,441 @@ +# ResolutionFlow UX Deep Dive — Final Merged Implementation Plan + +**Date:** 2026-02-19 +**Author:** Michael Chihlas +**Purpose:** Comprehensive frontend UX sweep merging the original 35-issue audit with Codex-revised plan. Ordered by user impact, covering broken functionality, navigation, shared components, visual consistency, and backend alignment. + +--- + +## Locked Decisions + +These decisions are finalized and should not be revisited: + +1. **Canonical post-editor/post-session destination:** `/trees` (the full flow library). `/my-trees` remains available for creator-specific management but is not a navigation target from editors or sessions. +2. **Step Library handling:** Add a placeholder route now. Not hidden, not fully built. +3. **Cleanup strategy:** Immediate removal of dead code and unused types. No staged deprecation. One final `grep` sweep before each deletion to confirm zero references. + +--- + +## Phase 0 — Tree Editor Authoring Blockers (Immediate) + +**Goal:** Remove "can't reach bottom / too busy form" friction before the broader UX sweep. This phase was absent from the original audit and added by the Codex review. + +### 0.1 Fix node editor scroll trap and bottom clipping + +**File:** `NodeEditorPanel.tsx` + +- Replace fixed viewport math (`h-[calc(100vh-105px)]`) with `h-full min-h-0` +- Keep body as the only scroll container (`min-h-0 flex-1 overflow-y-auto`) +- Make footer sticky (`sticky bottom-0`) so Save/Cancel are always reachable +- Add `scroll-pb-24` on form body to prevent bottom fields hiding behind footer + +### 0.2 Reduce instruction density in decision/action/resolution forms + +**Files:** `NodeFormDecision.tsx`, `NodeFormAction.tsx`, `NodeFormResolution.tsx` + +- Convert long instructional copy to compact labels + InfoTip tooltips +- Keep one short contextual hint per form section +- Remove large always-visible prose blocks + +### 0.3 Keep answer-first branching flow explicit + +**File:** `NodeEditorPanel.tsx` + +- Preserve existing behavior: saving decision options without `next_node_id` auto-creates answer stubs +- Add UI hint in decision form: "Options become answer placeholders you type later." + +### Phase 0 Verification + +- Open a long decision form → verify full vertical scroll to footer fields/buttons +- Focus bottom fields → confirm they are visible (not clipped behind footer) +- Decision instructions are compact with info tooltips (no walls of text) +- Save a decision with two new options → two answer placeholders are auto-created + +--- + +## Phase 1 — Broken Functionality (Critical) + +**Goal:** Fix features that are actively broken or silently wrong right now. + +### 1.1 Register /step-library route + +Sidebar links to `/step-library` but no route exists — users hit a blank page. + +**Changes:** + +- `router.tsx` — add route with lazy-loaded `StepLibraryPage.tsx` placeholder shell +- `StepLibraryPage.tsx` — create placeholder page (e.g., "Step Library — Coming Soon" with consistent layout) +- `Sidebar.tsx` — remove `badge="dot"` while placeholder is live (no false "new feature" signal) + +### 1.2 Preserve backend auth error detail in login/register flows + +Login failures show "Request failed with status code 401" instead of "Invalid credentials." + +**File:** `authStore.ts` (lines ~50-54, 63-67) + +- Extract `error.response?.data?.detail` before falling back to generic message +- Apply to both login and register error paths + +### 1.3 Fix inverted 4xx toast logic and add 429 handling + +**File:** `client.ts` (lines ~36-43) + +4xx errors with a `detail` message currently suppress the toast entirely (inverted condition). No 429 handler exists. + +**Behavior after fix:** + +| Status | Action | +|--------|--------| +| 401 | Suppressed (handled by token refresh flow) | +| 429 | Always toast: backend detail or "Rate limit exceeded, please retry shortly." | +| Other 4xx | Toast `detail` if present, else "Invalid request." | +| 5xx | Existing generic server error toast (unchanged) | + +### 1.4 Fix role update payload contract mismatch + +**File:** `accounts.ts` (line ~28) + +Sends `{ role }` but backend schema expects `{ account_role }`. Role changes silently fail with 422. + +- Change to `{ account_role: role }` + +### 1.5 Fix "Repeat Last Session" broken for non-troubleshooting flows + +**File:** `TreeLibraryPage.tsx` (line ~453) + +Currently hardcodes `/trees/:id/navigate` — loses prefill state via safety redirect for procedural/maintenance flows. + +- Use `getSessionResumePath()` instead of hardcoded path + +### Phase 1 Verification + +- Step Library nav opens placeholder page from Sidebar, AppLayout mobile nav, and Quick Launch +- Login with bad credentials shows backend detail string (e.g., "Invalid credentials"), not axios error +- Force a 429 response and verify toast appears +- Change a team member's role in Account Settings → confirm it actually saves (requires `team_admin` user) +- Repeat Last Session works correctly for troubleshooting, procedural, and maintenance flow types + +--- + +## Phase 2 — Navigation Correctness (Medium Scope) + +**Goal:** Fix cases where users end up at unexpected pages or lack navigation affordances. + +### 2.1 Standardize editor/session back and exit targets to /trees + +**Files:** + +- `ProceduralEditorPage.tsx` (lines ~86, 92, 157) — change `/my-trees` → `/trees` +- `ProceduralNavigationPage.tsx` (lines ~120, 180, 304, 330) — error, cancel, completion, and intake cancel paths all → `/trees` + +### 2.2 Add explicit exit affordance during procedural session execution + +Currently there is no way to leave a procedural session mid-execution except the browser back button. + +**File:** `ProceduralNavigationPage.tsx` (top bar, ~line 345) + +- Add an Exit button to the top bar +- If session has progress, exit opens a `ConfirmDialog` before navigating to `/trees` +- If no progress, navigate directly + +### 2.3 Remove duplicate account links in global nav + +"Team" and "Settings" both point to `/account`. Same duplication in TopBar dropdown. + +**Files:** + +- `Sidebar.tsx` (lines ~206-207) — consolidate footer to single "Account" item +- `TopBar.tsx` — consolidate dropdown to single "Account" entry + +### 2.4 Improve analytics routing for non-owners + +Non-owners click Analytics, hit an access-denied wall, then must click through to personal stats. + +**File:** `TeamAnalyticsPage.tsx` (lines ~48-65) + +- Auto-redirect non-owner/non-admin users to `/analytics/me` +- Show an informational toast explaining the redirect (e.g., "Viewing your personal analytics") + +### 2.5 Add feedback before permission redirects in tree editor + +`TreeEditorPage` silently redirects when users lack permission — no feedback shown. + +**File:** `TreeEditorPage.tsx` (lines ~143-146, 157-159) + +- Add `toast.error("You don't have permission to edit this flow")` before each `navigate()` call + +### 2.6 Delete orphaned AdminCategoriesPage + +Not connected to any route, superseded by `admin/GlobalCategoriesPage.tsx`. + +- Delete `AdminCategoriesPage.tsx` +- Remove its export from `index.ts` if present + +### Phase 2 Verification + +- Procedural editor Back button → `/trees` (not `/my-trees`) +- Procedural session cancel, exit, error, and completion → all route to `/trees` +- Exit button is visible during procedural execution and prompts confirmation if session has progress +- Sidebar footer shows one "Account" item (not "Team" + "Settings") +- Non-owner clicks Analytics → auto-redirects to `/analytics/me` with toast +- Unauthorized tree edit attempt → toast shown, then redirect + +--- + +## Phase 3 — Shared Components & Quick Consistency Wins (Medium Scope) + +**Goal:** Build reusable infrastructure and fix small but important consistency issues. + +### 3.1 Create shared Spinner component + +Currently 4 different spinner implementations across 20+ files. + +**Create:** `Spinner.tsx` with `sm | md | lg` sizes, default `border-t-primary` + +**Migrate page-level loading states in:** + +- `ProceduralNavigationPage.tsx` +- `ProceduralEditorPage.tsx` +- `TreeEditorPage.tsx` +- `TreeNavigationPage.tsx` +- `SessionHistoryPage.tsx` +- `SessionDetailPage.tsx` +- `MySharesPage.tsx` +- `MyTreesPage.tsx` +- `AccountSettingsPage.tsx` +- `SharedSessionPage.tsx` +- `PageLoader.tsx` + +**Deferred:** Leave tiny inline button spinners for later to avoid churn. + +### 3.2 Promote EmptyState to shared component + +Admin has a well-designed EmptyState; main app uses 3+ ad hoc patterns. + +- Move/create `common/EmptyState.tsx` +- Re-export from admin's `EmptyState.tsx` for backward compatibility +- Adopt in: `MySharesPage.tsx`, `SessionHistoryPage.tsx`, `TreeLibraryPage.tsx` + +### 3.3 Replace native window.confirm() with design-system ConfirmDialog + +3 places use native browser dialogs that break the design system. + +**Files:** + +- `MySharesPage.tsx` (line ~81) +- `NodeEditorPanel.tsx` (line ~87) +- `FolderSidebar.tsx` (line ~286) + +### 3.4 Fix sidebar optimistic unpin bug + +State is removed immediately even if API call fails — the flow disappears permanently until page refresh. + +**File:** `Sidebar.tsx` (lines ~105-113) + +- Move `setPinnedFlows` update to after successful `await` (not before) + +### 3.5 Fix PinnedFlow.tree_type missing 'maintenance' + +Maintenance flows can be pinned but navigation will use the wrong path. + +**Files:** + +- `pinnedFlows.ts` (line ~7) — add `'maintenance'` to the `PinnedFlow.tree_type` union type +- `PinnedFlowsSection.tsx` — validate icon/path logic via `getTreeNavigatePath` handles maintenance correctly + +### Phase 3 Verification + +- All page-level loading states use the shared `Spinner` component (visual consistency) +- Empty states in MyShares, SessionHistory, TreeLibrary use the shared `EmptyState` component +- Deleting a share, removing a node, removing a folder → all show styled dialog (not browser native) +- Unpin a flow while network is down → flow should NOT disappear (reverts on failure) +- Pin a maintenance flow → clicking it navigates to the correct path + +--- + +## Phase 4 — Visual Consistency Sweep (Large Scope — Many Small Changes) + +**Goal:** Design system compliance fixes. Each change is small but there are many files. + +### 4.1 Fix Sonner toast styling + +The `richColors` prop overrides custom CSS with garish built-in green/red backgrounds. Existing custom CSS in `index.css` (lines ~201-251) already defines themed toasts (`bg-card`, `border-border`, colored border accents) but `richColors` overrides them. + +**File:** `main.tsx` + +- Remove `richColors` prop +- Add `visibleToasts={3}` and `gap={8}` +- Keep existing custom toast CSS in `index.css`; patch only if needed to ensure themed styles fully apply + +### 4.2 Typography: Add font-heading to all page H1s + +Missing from approximately half the pages. + +**Files to update:** + +- `MyTreesPage.tsx` +- `TeamAnalyticsPage.tsx` +- `MyAnalyticsPage.tsx` +- `FeedbackPage.tsx` +- `AccountSettingsPage.tsx` +- `TeamCategoriesPage.tsx` +- `admin/PageHeader.tsx` + +### 4.3 Typography: Add font-label to TagBadges component + +Design system requires Outfit font for tags/badges. + +**File:** `TagBadges.tsx` + +### 4.4 Fix hardcoded light-mode button in TeamAnalyticsPage + +Only hardcoded `bg-white text-black` button in the app — breaks in dark mode. + +**File:** `TeamAnalyticsPage.tsx` (line ~59) + +- Replace with `bg-gradient-brand text-white` + +### 4.5 Fix non-standard focus ring tokens + +Analytics selects use `focus:ring-ring` instead of the standard token. + +**Files:** `TeamAnalyticsPage.tsx`, `MyAnalyticsPage.tsx` + +- Change `focus:ring-ring` → `focus:ring-primary/20` + +### 4.6 Replace deprecated glass-stat style + +**File:** `AccountSettingsPage.tsx` (line ~588) + +- Replace `glass-stat` with `bg-card border border-border` + +### 4.7 Standardize container/padding on analytics pages + +Missing responsive padding. + +**Files:** `TeamAnalyticsPage.tsx`, `MyAnalyticsPage.tsx` + +- Add `container mx-auto px-4 py-6 sm:px-6 sm:py-8` + +### Phase 4 Verification + +- Toast colors/borders follow custom theme (not Sonner rich presets) — check success, error, and info toasts +- All page H1s use `font-heading` (Plus Jakarta Sans) +- Tag badges use `font-label` (Outfit) +- TeamAnalytics CTA button renders correctly in both light and dark mode +- Focus rings on analytics selects use subtle `primary/20` glow +- No `glass-stat` class remains in the codebase +- Analytics pages have consistent container spacing matching rest of app + +--- + +## Phase 5 — Backend Alignment & Cleanup (Immediate Removals) + +**Goal:** API contract fixes and dead code removal. All removals are immediate (per locked decision #3), with a final `grep` sweep before each deletion. + +### 5.1 Remove non-functional drafts toggle from library UI + +Backend has no `include_drafts` parameter — the toggle does nothing. + +**Files:** + +- `TreeLibraryPage.tsx` — remove `showDrafts` state and drafts filter UI +- `tree.ts` (`TreeFilters` type) — remove `include_drafts` field + +### 5.2 Align invite types with backend schema + +`invited_by_id` and `accepted_by_id` not in backend response — always `undefined`. + +**File:** `account.ts` — remove `invited_by_id` and `accepted_by_id` from `AccountInvite` type + +### 5.3 Remove dead/unused client code + +Before deleting each item, run a global `grep` to confirm zero consumers: + +| Item | File | What to Remove | +|------|------|----------------| +| `pinnedFlowsApi.pin()` | `pinnedFlows.ts` | Dead method (never called) | +| `pinnedFlowsApi.reorder()` | `pinnedFlows.ts` | Dead method (never called) | +| `treesApi.getSharedTree()` | `trees.ts` | Dead method (no route/consumer) | +| `SessionListResponse` | `sessions.ts` | Unused type | +| `RatingCreate.is_verified_use` | `step.ts` | Field ignored by backend | +| `AdminCategoriesPage.tsx` | — | Orphaned file + export (if not already deleted in Phase 2) | + +### 5.4 Add session list truncation indicator + +Session history silently truncates at the backend limit with no indication to the user. + +**File:** `SessionHistoryPage.tsx` + +- Request `size=51` from backend +- If result length is 51: show "Showing first 50 sessions" indicator, render only first 50 +- If result length ≤ 50: show "Showing X sessions" +- No backend API contract changes required (frontend lookahead strategy) + +### Phase 5 Verification + +- No drafts toggle visible in TreeLibrary UI +- `grep -r "include_drafts" frontend/src/` returns zero results +- `grep -r "invited_by_id\|accepted_by_id" frontend/src/` returns zero results for `AccountInvite` usage +- `grep` for each removed method/type confirms zero references +- Session history shows truncation indicator at 50+ results +- Session history shows "Showing X sessions" at fewer than 50 results +- `cd frontend && npm run build` passes with zero errors + +--- + +## Items Explicitly Deferred + +| Item | Reason | +|------|--------| +| Migrate 14+ custom modals to shared Modal component | Very high effort, low breakage risk. Migrate incrementally on new work. | +| Standardize input border radius app-wide | Cosmetic, low user impact | +| Standardize icon sizing method (`className` vs `size` prop) | No visual difference | +| Session pagination (full load-more) | Larger feature, beyond UX sweep scope | +| Inline button spinners | Leave for later to avoid churn (Phase 3 note) | +| Full Step Library feature build | Intentionally placeholder-only this cycle | + +--- + +## Public APIs / Interfaces / Types Changed + +**Frontend routing:** + +- Add new route `/step-library` in `router.tsx` + +**Type/interface updates:** + +- `TreeFilters` in `tree.ts`: remove `include_drafts` +- `AccountInvite` in `account.ts`: remove `invited_by_id`, `accepted_by_id` +- `PinnedFlow.tree_type` in `pinnedFlows.ts`: add `'maintenance'` +- `RatingCreate` in `step.ts`: remove `is_verified_use` +- Remove unused `SessionListResponse` in `sessions.ts` + +**Shared component surface:** + +- Add `Spinner` component in `Spinner.tsx` +- Add common `EmptyState` component in `EmptyState.tsx` + +--- + +## Cross-Phase Verification Checklist + +Run after each phase is complete: + +1. **Build:** `cd frontend && npm run build` — must pass with zero errors +2. **Navigation:** Test all sidebar items, back buttons, editor → library flow, procedural navigation exit +3. **Auth:** Intentional wrong password → shows backend error detail +4. **Role change:** Test in Account Settings (requires `team_admin` user) +5. **Visual spot-check:** H1 fonts, spinner consistency, empty states, toast styling, dark mode +6. **Grep sweep:** Before merging each phase, confirm no dead references remain for removed items + +--- + +## Assumptions + +- `/trees` is the canonical destination for broad flow browsing and all post-task returns +- `/my-trees` remains available but is not a default navigation target +- Step Library is placeholder-only this cycle — no full feature work +- No backend API contract changes are required for any item in this plan +- Session truncation uses the frontend lookahead strategy (`size=51`) +- All cleanup is immediate with pre-deletion reference verification diff --git a/frontend/src/api/accounts.ts b/frontend/src/api/accounts.ts index 943d4481..3e1e3b04 100644 --- a/frontend/src/api/accounts.ts +++ b/frontend/src/api/accounts.ts @@ -25,7 +25,7 @@ export const accountsApi = { async updateMemberRole(userId: string, role: string): Promise { const response = await apiClient.patch( `/accounts/me/members/${userId}/role`, - { role } + { account_role: role } ) return response.data }, diff --git a/frontend/src/api/client.ts b/frontend/src/api/client.ts index cf57d557..07b6bd36 100644 --- a/frontend/src/api/client.ts +++ b/frontend/src/api/client.ts @@ -25,20 +25,28 @@ function handleGlobalError(error: AxiosError) { } const status = error.response.status - const data = error.response.data as { detail?: string } + const data = error.response.data as { detail?: string | unknown[] } + + // Extract a displayable error message from the response. + // FastAPI returns `detail` as a string for most errors, but 422 validation + // errors return an array of objects — we must not pass those to toast. + const detail = typeof data?.detail === 'string' ? data.detail : undefined // Don't show toast for 401 (handled by refresh interceptor) if (status === 401) { return } - // Client errors (4xx) + // Rate limit — always worth notifying + if (status === 429) { + toast.error(detail || 'Too many requests — please try again shortly') + return + } + + // Client errors (4xx) — don't toast globally. + // Pages handle their own 4xx errors (permission checks, validation, not-found) + // and many are caught silently. Global toasts here cause noisy duplicates. if (status >= 400 && status < 500) { - const message = data?.detail || 'Invalid request' - // Only show generic messages - pages handle specific errors - if (!data?.detail) { - toast.error(message) - } return } diff --git a/frontend/src/api/pinnedFlows.ts b/frontend/src/api/pinnedFlows.ts index 41b3754a..38823178 100644 --- a/frontend/src/api/pinnedFlows.ts +++ b/frontend/src/api/pinnedFlows.ts @@ -4,7 +4,7 @@ export interface PinnedFlow { id: string tree_id: string tree_name: string - tree_type: 'troubleshooting' | 'procedural' + tree_type: 'troubleshooting' | 'procedural' | 'maintenance' category_emoji?: string category_name?: string pinned_at: string @@ -22,19 +22,9 @@ export const pinnedFlowsApi = { return data }, - pin: async (treeId: string): Promise => { - const { data } = await apiClient.post(`/trees/${treeId}/pin`) - return data - }, - unpin: async (treeId: string): Promise => { await apiClient.delete(`/trees/${treeId}/pin`) }, - - reorder: async (order: { tree_id: string; display_order: number }[]): Promise => { - const { data } = await apiClient.patch('/trees/pinned/reorder', { order }) - return data - }, } export default pinnedFlowsApi diff --git a/frontend/src/api/sessions.ts b/frontend/src/api/sessions.ts index 635d593a..ffda6080 100644 --- a/frontend/src/api/sessions.ts +++ b/frontend/src/api/sessions.ts @@ -15,14 +15,6 @@ export interface SessionListParams { completed_before?: string } -export interface SessionListResponse { - items: Session[] - total: number - page: number - size: number - pages: number -} - export const sessionsApi = { async list(params?: SessionListParams): Promise { const response = await apiClient.get('/sessions', { params }) diff --git a/frontend/src/api/trees.ts b/frontend/src/api/trees.ts index f8c8375a..8b21840c 100644 --- a/frontend/src/api/trees.ts +++ b/frontend/src/api/trees.ts @@ -1,5 +1,5 @@ import apiClient from './client' -import type { Tree, TreeListItem, TreeCreate, TreeUpdate, TreeFilters, TreeShareCreate, TreeShare, TreeVisibilityUpdate, SharedTree, TreeValidationResponse } from '@/types' +import type { Tree, TreeListItem, TreeCreate, TreeUpdate, TreeFilters, TreeShareCreate, TreeShare, TreeVisibilityUpdate, TreeValidationResponse } from '@/types' export const treesApi = { async list(params?: TreeFilters): Promise { @@ -60,11 +60,6 @@ export const treesApi = { return response.data }, - async getSharedTree(shareToken: string): Promise { - const response = await apiClient.get(`/shared/${shareToken}`) - return response.data - }, - // Tree validation async canPublish(id: string): Promise { const response = await apiClient.post(`/trees/${id}/can-publish`) diff --git a/frontend/src/components/admin/EmptyState.tsx b/frontend/src/components/admin/EmptyState.tsx index 22e4a266..4e58f7a8 100644 --- a/frontend/src/components/admin/EmptyState.tsx +++ b/frontend/src/components/admin/EmptyState.tsx @@ -1,25 +1,2 @@ -import type { ReactNode } from 'react' -import { cn } from '@/lib/utils' - -interface EmptyStateProps { - icon?: ReactNode - title: string - description?: string - action?: ReactNode - className?: string -} - -export function EmptyState({ icon, title, description, action, className }: EmptyStateProps) { - return ( -
- {icon &&
{icon}
} -

{title}

- {description && ( -

{description}

- )} - {action &&
{action}
} -
- ) -} - -export default EmptyState +export { EmptyState } from '@/components/common/EmptyState' +export { default } from '@/components/common/EmptyState' diff --git a/frontend/src/components/admin/PageHeader.tsx b/frontend/src/components/admin/PageHeader.tsx index a388f00f..d282bcdc 100644 --- a/frontend/src/components/admin/PageHeader.tsx +++ b/frontend/src/components/admin/PageHeader.tsx @@ -12,7 +12,7 @@ export function PageHeader({ title, description, action, className }: PageHeader return (
-

{title}

+

{title}

{description && (

{description}

)} diff --git a/frontend/src/components/common/EmptyState.tsx b/frontend/src/components/common/EmptyState.tsx new file mode 100644 index 00000000..22e4a266 --- /dev/null +++ b/frontend/src/components/common/EmptyState.tsx @@ -0,0 +1,25 @@ +import type { ReactNode } from 'react' +import { cn } from '@/lib/utils' + +interface EmptyStateProps { + icon?: ReactNode + title: string + description?: string + action?: ReactNode + className?: string +} + +export function EmptyState({ icon, title, description, action, className }: EmptyStateProps) { + return ( +
+ {icon &&
{icon}
} +

{title}

+ {description && ( +

{description}

+ )} + {action &&
{action}
} +
+ ) +} + +export default EmptyState diff --git a/frontend/src/components/common/PageLoader.tsx b/frontend/src/components/common/PageLoader.tsx index 90621223..04c54daa 100644 --- a/frontend/src/components/common/PageLoader.tsx +++ b/frontend/src/components/common/PageLoader.tsx @@ -1,8 +1,10 @@ +import { Spinner } from '@/components/common/Spinner' + export function PageLoader() { return ( -
+
-
+

Loading...

diff --git a/frontend/src/components/common/RouteError.tsx b/frontend/src/components/common/RouteError.tsx index 0fa4e7e9..e06c3082 100644 --- a/frontend/src/components/common/RouteError.tsx +++ b/frontend/src/components/common/RouteError.tsx @@ -17,7 +17,7 @@ export function RouteError() { } return ( -
+

Oops!

{errorMessage}

diff --git a/frontend/src/components/common/Spinner.tsx b/frontend/src/components/common/Spinner.tsx new file mode 100644 index 00000000..4222704d --- /dev/null +++ b/frontend/src/components/common/Spinner.tsx @@ -0,0 +1,26 @@ +import { cn } from '@/lib/utils' + +const SIZES = { + sm: 'h-4 w-4 border-2', + md: 'h-8 w-8 border-4', + lg: 'h-12 w-12 border-4', +} as const + +interface SpinnerProps { + size?: keyof typeof SIZES + className?: string +} + +export function Spinner({ size = 'md', className }: SpinnerProps) { + return ( +
+ ) +} + +export default Spinner diff --git a/frontend/src/components/common/TagBadges.tsx b/frontend/src/components/common/TagBadges.tsx index bd93cbc6..95d850b2 100644 --- a/frontend/src/components/common/TagBadges.tsx +++ b/frontend/src/components/common/TagBadges.tsx @@ -34,7 +34,7 @@ export function TagBadges({ }} disabled={!onTagClick} className={cn( - 'rounded-full transition-colors', + 'rounded-full font-label transition-colors', size === 'sm' ? 'px-2 py-0.5 text-xs' : 'px-2.5 py-1 text-sm', variant === 'default' ? 'bg-accent text-muted-foreground hover:bg-accent' @@ -48,7 +48,7 @@ export function TagBadges({ {hiddenCount > 0 && ( s.sidebarCollapsed) const toggleSidebar = useUserPreferencesStore(s => s.toggleSidebar) - const [categories, setCategories] = useState([]) - const [tags, setTags] = useState([]) - const [activeCategoryId, setActiveCategoryId] = useState(null) - const [activeTags, setActiveTags] = useState([]) const [activeSessionCount, setActiveSessionCount] = useState(0) const [pinnedFlows, setPinnedFlows] = useState([]) const [treeCounts, setTreeCounts] = useState({ total: 0, troubleshooting: 0, procedural: 0, maintenance: 0 }) @@ -35,20 +21,11 @@ export function Sidebar() { useEffect(() => { const fetchData = async () => { try { - const [cats, tagList, activeSessions, allTrees, pinnedData] = await Promise.all([ - categoriesApi.list(), - tagsApi.list().catch(() => []), + const [activeSessions, allTrees, pinnedData] = await Promise.all([ sessionsApi.list({ completed: false, size: 50 }).catch(() => []), treesApi.list({ sort_by: 'name' }).catch(() => []), pinnedFlowsApi.list().catch(() => ({ items: [], count: 0 })), ]) - setCategories(cats.map(c => ({ - id: c.id, - name: c.name, - color: c.color || '#3b82f6', - count: c.tree_count || 0, - }))) - setTags(tagList.map((t: { name: string }) => t.name).slice(0, 15)) setActiveSessionCount(activeSessions.length) setPinnedFlows(pinnedData.items) @@ -64,44 +41,6 @@ export function Sidebar() { fetchData() }, []) - const navigate = useNavigate() - const location = useLocation() - - // Sync active filters from URL when on /trees page - useEffect(() => { - if (location.pathname === '/trees') { - const params = new URLSearchParams(location.search) - setActiveCategoryId(params.get('category') || null) - const tagsParam = params.get('tags') - setActiveTags(tagsParam ? tagsParam.split(',') : []) - } - }, [location.pathname, location.search]) - - const handleCategorySelect = (id: string | null) => { - setActiveCategoryId(id) - const params = new URLSearchParams(location.search) - if (id) { - params.set('category', id) - } else { - params.delete('category') - } - navigate(`/trees?${params.toString()}`) - } - - const handleTagClick = (tag: string) => { - const next = activeTags.includes(tag) - ? activeTags.filter(t => t !== tag) - : [...activeTags, tag] - setActiveTags(next) - const params = new URLSearchParams(location.search) - if (next.length > 0) { - params.set('tags', next.join(',')) - } else { - params.delete('tags') - } - navigate(`/trees?${params.toString()}`) - } - const handleUnpin = async (treeId: string) => { try { await pinnedFlowsApi.unpin(treeId) @@ -172,27 +111,13 @@ export function Sidebar() { - +
- -
- - {/* Categories */} - - -
- - {/* Tags */} - )} - {/* Spacer */} + {/* Spacer — pushes footer to bottom */}
{/* Footer */} @@ -203,8 +128,7 @@ export function Sidebar() { {!sidebarCollapsed && ( <> - - + )}
- setUserMenuOpen(false)} - className="flex items-center gap-2 rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground" - > - - Account - setUserMenuOpen(false)} className="flex items-center gap-2 rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground" > - Settings + Account {isSuperAdmin && ( (null) const [expandedIds, setExpandedIds] = useState>(new Set()) const [contextMenu, setContextMenu] = useState(null) + const [pendingDelete, setPendingDelete] = useState<{ id: string; message: string } | null>(null) const loadFolders = useCallback(async () => { setIsLoading(true) @@ -277,15 +279,19 @@ export function FolderSidebar({ }) } - const handleDeleteFolder = async (folderId: string, folderHasChildren: boolean) => { + const handleDeleteFolder = (folderId: string, folderHasChildren: boolean) => { const descendantCount = getDescendantIds(folders, folderId).length const message = folderHasChildren ? `Are you sure you want to delete this folder and its ${descendantCount} subfolder(s)? The trees in them will not be deleted.` : 'Are you sure you want to delete this folder? The trees in it will not be deleted.' - if (!confirm(message)) { - return - } + setPendingDelete({ id: folderId, message }) + } + + const confirmDeleteFolder = async () => { + if (!pendingDelete) return + const folderId = pendingDelete.id + setPendingDelete(null) try { await foldersApi.delete(folderId) // Remove folder and all descendants from local state @@ -494,6 +500,15 @@ export function FolderSidebar({
)} + + setPendingDelete(null)} + onConfirm={confirmDeleteFolder} + title="Delete Folder" + message={pendingDelete?.message || ''} + confirmLabel="Delete" + /> ) } diff --git a/frontend/src/components/sidebar/PinnedFlowsSection.tsx b/frontend/src/components/sidebar/PinnedFlowsSection.tsx index 0dbacbf4..0e1ae165 100644 --- a/frontend/src/components/sidebar/PinnedFlowsSection.tsx +++ b/frontend/src/components/sidebar/PinnedFlowsSection.tsx @@ -46,7 +46,7 @@ export function PinnedFlowsSection({ flows, onUnpin }: PinnedFlowsSectionProps) title={`${flow.tree_name} (right-click to unpin)`} > - {flow.tree_type === 'procedural' ? '📋' : '🔧'} + {flow.tree_type === 'procedural' ? '📋' : flow.tree_type === 'maintenance' ? '🛠️' : '🔧'} {flow.tree_name} diff --git a/frontend/src/components/tree-editor/NodeEditorPanel.tsx b/frontend/src/components/tree-editor/NodeEditorPanel.tsx index ba085d28..a6d76349 100644 --- a/frontend/src/components/tree-editor/NodeEditorPanel.tsx +++ b/frontend/src/components/tree-editor/NodeEditorPanel.tsx @@ -4,6 +4,7 @@ import { useTreeEditorStore, findNodeInTree } from '@/store/treeEditorStore' import { NodeFormDecision } from './NodeFormDecision' import { NodeFormAction } from './NodeFormAction' import { NodeFormResolution } from './NodeFormResolution' +import { ConfirmDialog } from '@/components/common/ConfirmDialog' import { cn } from '@/lib/utils' import type { TreeStructure, NodeType } from '@/types' @@ -36,16 +37,18 @@ export function NodeEditorPanel({ nodeId, onClose, onSelectType }: NodeEditorPan const [draft, setDraft] = useState(null) const [isDirty, setIsDirty] = useState(false) const [showDeleteConfirm, setShowDeleteConfirm] = useState(false) + const [showDiscardConfirm, setShowDiscardConfirm] = useState(false) const panelRef = useRef(null) - // Initialize/reset draft when nodeId changes + // Initialize/reset draft when nodeId changes or when node type changes + // (e.g., answer stub → decision/action/solution via type picker) useEffect(() => { if (node) { setDraft(cloneWithoutChildren(node)) setIsDirty(false) setShowDeleteConfirm(false) } - }, [nodeId]) // eslint-disable-line react-hooks/exhaustive-deps + }, [nodeId, node?.type]) // eslint-disable-line react-hooks/exhaustive-deps const handleDraftUpdate = useCallback((updates: Partial) => { setDraft(prev => prev ? { ...prev, ...updates } : prev) @@ -58,7 +61,7 @@ export function NodeEditorPanel({ nodeId, onClose, onSelectType }: NodeEditorPan updateNode(nodeId, draftWithoutChildren) // Auto-create answer stubs for new decision options without next_node_id - if (draft.options) { + if (draft.type === 'decision' && draft.options) { const options = draft.options.filter(o => o.label.trim()) const stubsCreated: Array<{ optId: string; stubId: string }> = [] @@ -79,12 +82,20 @@ export function NodeEditorPanel({ nodeId, onClose, onSelectType }: NodeEditorPan } } + // Auto-create answer stub for action node without next_node_id + if (draft.type === 'action' && !draft.next_node_id) { + const stubId = addNode(nodeId, 'answer') + updateNode(stubId, { title: 'Next Step' }) + updateNode(nodeId, { next_node_id: stubId }) + } + setIsDirty(false) }, [draft, node, nodeId, updateNode, addNode]) const handleClose = useCallback(() => { if (isDirty) { - if (!window.confirm('You have unsaved changes. Discard them?')) return + setShowDiscardConfirm(true) + return } onClose() }, [isDirty, onClose]) @@ -162,7 +173,7 @@ export function NodeEditorPanel({ nodeId, onClose, onSelectType }: NodeEditorPan const isRoot = treeStructure?.id === nodeId return ( -
+
{/* Header */}
@@ -175,14 +186,14 @@ export function NodeEditorPanel({ nodeId, onClose, onSelectType }: NodeEditorPan
{/* Body — scrollable form area */} -
+
{draft.type === 'decision' && } {draft.type === 'action' && } {draft.type === 'solution' && }
{/* Footer */} -
+
+ + setShowDiscardConfirm(false)} + onConfirm={() => { + setShowDiscardConfirm(false) + onClose() + }} + title="Discard Changes" + message="You have unsaved changes. Discard them?" + confirmLabel="Discard" + />
) } diff --git a/frontend/src/components/tree-editor/NodeFormAction.tsx b/frontend/src/components/tree-editor/NodeFormAction.tsx index 90fcd1cf..2cd5b837 100644 --- a/frontend/src/components/tree-editor/NodeFormAction.tsx +++ b/frontend/src/components/tree-editor/NodeFormAction.tsx @@ -1,6 +1,5 @@ import { useState } from 'react' import { DynamicArrayField } from './DynamicArrayField' -import { NodePicker } from './NodePicker' import { useTreeEditorStore } from '@/store/treeEditorStore' import { MarkdownContent } from '@/components/ui/MarkdownContent' import { InfoTip } from '@/components/common/InfoTip' @@ -20,9 +19,7 @@ export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) { e => e.nodeId === node.id && e.field === 'title' ) - const nextNodeError = validationErrors.find( - e => e.nodeId === node.id && e.field === 'next_node_id' - ) + const hasNextNode = !!node.next_node_id const handleAddCommand = () => { onUpdate({ @@ -161,16 +158,16 @@ export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) { />
- {/* Next Node */} - onUpdate({ next_node_id: nodeId })} - parentNodeId={node.id} - excludeNodeId={node.id} - label="Next Node (after action)" - placeholder="Select or create next node..." - error={nextNodeError?.message} - /> + {/* Next step hint */} + {hasNextNode ? ( +

+ Next step is linked — click it on the canvas to edit. +

+ ) : ( +

+ Save to create a placeholder for the next step. +

+ )}
) } diff --git a/frontend/src/components/tree-editor/NodeFormDecision.tsx b/frontend/src/components/tree-editor/NodeFormDecision.tsx index c9570167..3d20ae98 100644 --- a/frontend/src/components/tree-editor/NodeFormDecision.tsx +++ b/frontend/src/components/tree-editor/NodeFormDecision.tsx @@ -82,21 +82,10 @@ export function NodeFormDecision({ node, onUpdate }: NodeFormDecisionProps) {
{/* Root node banner */} {isRootNode && ( -
-
-
- -
-
-

- Starting Question -

-

- This is the first question users will see when they start this troubleshooting tree. - Each option below creates a different troubleshooting path. -

-
-
+
+ + Starting Question +
)} @@ -150,6 +139,7 @@ export function NodeFormDecision({ node, onUpdate }: NodeFormDecisionProps) { ? "Add as many options as needed (A, B, C, D...). Each option leads to a different troubleshooting path." : "Each option can branch to a different next step."} /> +

Options become answer placeholders you can fill in later.

{optionsError && (

{optionsError.message}

)} diff --git a/frontend/src/components/tree-editor/NodeFormResolution.tsx b/frontend/src/components/tree-editor/NodeFormResolution.tsx index 2e1503e1..77d3ff79 100644 --- a/frontend/src/components/tree-editor/NodeFormResolution.tsx +++ b/frontend/src/components/tree-editor/NodeFormResolution.tsx @@ -143,10 +143,9 @@ Document what was done and the outcome.
{/* Note about terminal node */} -
- Note: Solution nodes are terminal - they end the troubleshooting flow. - The session will be marked complete when the user reaches this node. -
+

+ Solution nodes are terminal — the session completes when users reach this node. +

) } diff --git a/frontend/src/index.css b/frontend/src/index.css index e521169c..06bc9aee 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -198,59 +198,61 @@ } } -/* Sonner Toast Customization */ +/* Sonner Toast Customization — outside @layer for higher specificity */ +[data-sonner-toast] { + background-color: hsl(var(--card)) !important; + color: hsl(var(--card-foreground)) !important; + border: 1px solid hsl(var(--border)) !important; + box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3) !important; + border-radius: 0.75rem; + font-family: 'Inter', system-ui, sans-serif; +} + +[data-sonner-toast] [data-title] { + font-family: 'Inter', system-ui, sans-serif; + font-weight: 600; +} + +[data-sonner-toast][data-type="success"] { + border-color: rgba(52, 211, 153, 0.3) !important; +} +[data-sonner-toast][data-type="success"] [data-icon] { + color: #34d399; +} + +[data-sonner-toast][data-type="error"] { + border-color: rgba(248, 113, 113, 0.3) !important; +} +[data-sonner-toast][data-type="error"] [data-icon] { + color: #f87171; +} + +[data-sonner-toast][data-type="info"] { + border-color: hsl(var(--border)) !important; +} +[data-sonner-toast][data-type="info"] [data-icon] { + color: hsl(var(--muted-foreground)); +} + +[data-sonner-toast][data-type="warning"] { + border-color: rgba(251, 191, 36, 0.3) !important; +} +[data-sonner-toast][data-type="warning"] [data-icon] { + color: #fbbf24; +} + +[data-sonner-toast] [data-close-button] { + color: hsl(var(--muted-foreground)); + border-radius: 0.375rem; + transition: color 150ms, background-color 150ms; +} +[data-sonner-toast] [data-close-button]:hover { + background-color: hsl(var(--accent)); + color: hsl(var(--accent-foreground)); +} + +/* React Day Picker Customization */ @layer components { - :where([data-sonner-toast]) { - @apply bg-card text-card-foreground; - @apply border border-border shadow-lg; - @apply rounded-xl; - font-family: 'Inter', system-ui, sans-serif; - backdrop-filter: blur(10px); - } - - :where([data-sonner-toast]) [data-title] { - font-family: 'Inter', system-ui, sans-serif; - font-weight: 600; - } - - :where([data-sonner-toast][data-type="success"]) { - border-color: rgba(52, 211, 153, 0.3); - } - :where([data-sonner-toast][data-type="success"]) [data-icon] { - color: #34d399; - } - - :where([data-sonner-toast][data-type="error"]) { - border-color: rgba(248, 113, 113, 0.3); - } - :where([data-sonner-toast][data-type="error"]) [data-icon] { - color: #f87171; - } - - :where([data-sonner-toast][data-type="info"]) { - @apply border-border; - } - :where([data-sonner-toast][data-type="info"]) [data-icon] { - @apply text-muted-foreground; - } - - :where([data-sonner-toast][data-type="warning"]) { - border-color: rgba(251, 191, 36, 0.3); - } - :where([data-sonner-toast][data-type="warning"]) [data-icon] { - color: #fbbf24; - } - - :where([data-sonner-toast]) [data-close-button] { - @apply text-muted-foreground hover:bg-accent hover:text-accent-foreground; - @apply rounded-md transition-colors; - } - - :where([data-sonner-toast]) [data-icon][data-loading] { - @apply text-white; - } - - /* React Day Picker Customization */ .rdp-custom { @apply text-foreground; } diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx index b739ee18..bdb2d697 100644 --- a/frontend/src/main.tsx +++ b/frontend/src/main.tsx @@ -10,8 +10,13 @@ createRoot(document.getElementById('root')!).render( , diff --git a/frontend/src/pages/AccountSettingsPage.tsx b/frontend/src/pages/AccountSettingsPage.tsx index a3e0084b..6266f44c 100644 --- a/frontend/src/pages/AccountSettingsPage.tsx +++ b/frontend/src/pages/AccountSettingsPage.tsx @@ -3,6 +3,7 @@ import { Link } from 'react-router-dom' import { Building2, Users, Mail, Crown, Loader2, AlertCircle, Check, X, Settings, FolderTree, Server, RefreshCw, MessageSquareText } from 'lucide-react' import { accountsApi } from '@/api/accounts' import type { Account, AccountMember, AccountInvite } from '@/types' +import { Spinner } from '@/components/common/Spinner' import { cn } from '@/lib/utils' import { usePermissions } from '@/hooks/usePermissions' import { useSubscription } from '@/hooks/useSubscription' @@ -130,7 +131,7 @@ export function AccountSettingsPage() { if (isLoading) { return (
-
+
) } @@ -155,7 +156,7 @@ export function AccountSettingsPage() {
-

Account Settings

+

Account Settings

Manage your account, subscription, and team @@ -585,7 +586,7 @@ function UsageStat({ const isAtLimit = !isUnlimited && current >= max return ( -

+

{label}

([]) - const [allSteps, setAllSteps] = useState<{ category_id?: string }[]>([]) - const [isLoading, setIsLoading] = useState(true) - const [showCreateModal, setShowCreateModal] = useState(false) - const [showEditModal, setShowEditModal] = useState(false) - const [editingCategory, setEditingCategory] = useState(null) - const [isSaving, setIsSaving] = useState(false) - const [includeArchived, setIncludeArchived] = useState(false) - - useEffect(() => { - loadData() - }, [includeArchived]) - - const loadData = async () => { - setIsLoading(true) - try { - const [categoriesData, stepsData] = await Promise.all([ - stepCategoriesApi.list({ include_inactive: includeArchived }), - stepsApi.list({}) - ]) - setCategories(categoriesData) - setAllSteps(stepsData) - } catch (err) { - console.error('Failed to load categories:', err) - toast.error('Failed to load categories') - } finally { - setIsLoading(false) - } - } - - const getStepCount = (categoryId: string) => { - return allSteps?.filter(s => s.category_id === categoryId).length || 0 - } - - const handleCreate = async (data: { name: string; description: string }) => { - setIsSaving(true) - try { - await stepCategoriesApi.create({ - name: data.name, - description: data.description || undefined - }) - toast.success('Category created successfully') - setShowCreateModal(false) - await loadData() - } catch (err) { - console.error('Failed to create category:', err) - toast.error('Failed to create category') - throw err - } finally { - setIsSaving(false) - } - } - - const handleEdit = async (data: { name: string; description: string }) => { - if (!editingCategory) return - setIsSaving(true) - try { - await stepCategoriesApi.update(editingCategory.id, { - name: data.name, - description: data.description || undefined - }) - toast.success('Category updated successfully') - setShowEditModal(false) - setEditingCategory(null) - await loadData() - } catch (err) { - console.error('Failed to update category:', err) - toast.error('Failed to update category') - throw err - } finally { - setIsSaving(false) - } - } - - const handleArchive = async (id: string) => { - try { - await stepCategoriesApi.archive(id) - toast.success('Category archived') - await loadData() - } catch (err) { - console.error('Failed to archive category:', err) - toast.error('Failed to archive category') - } - } - - const handleRestore = async (id: string) => { - try { - await stepCategoriesApi.restore(id) - toast.success('Category restored') - await loadData() - } catch (err) { - console.error('Failed to restore category:', err) - toast.error('Failed to restore category') - } - } - - const handleDragEnd = async (event: DragEndEvent) => { - const { active, over } = event - if (!over || active.id === over.id) return - - const oldIndex = categories.findIndex(c => c.id === active.id) - const newIndex = categories.findIndex(c => c.id === over.id) - - const reordered = arrayMove(categories, oldIndex, newIndex) - - // Optimistic update - setCategories(reordered) - - try { - // Update display_order for all affected categories - const updates = reordered.map((cat, index) => ({ - id: cat.id, - display_order: index - })) - await stepCategoriesApi.updateOrder(updates) - toast.success('Categories reordered') - } catch (err) { - console.error('Failed to reorder categories:', err) - toast.error('Failed to save order') - // Revert on error - await loadData() - } - } - - const openEditModal = (category: StepCategoryListItem) => { - setEditingCategory(category) - setShowEditModal(true) - } - - if (isLoading) { - return ( -

-
-
- ) - } - - return ( -
- {/* Header */} -
-
-

- Step Categories -

-

- Manage categories for organizing step library -

-
- -
- - {/* Filter Toggle */} -
- -
- - {/* Categories List */} - {categories.length === 0 ? ( -
-

- No categories found. Create your first category to get started. -

-
- ) : ( - - c.id)} - strategy={verticalListSortingStrategy} - > -
- {categories.map(category => ( - - ))} -
- - - )} - - {/* Create Modal */} - setShowCreateModal(false)} - onSubmit={handleCreate} - isSaving={isSaving} - /> - - {/* Edit Modal */} - { - setShowEditModal(false) - setEditingCategory(null) - }} - onSubmit={handleEdit} - category={editingCategory} - isSaving={isSaving} - /> -
- ) -} - -export default AdminCategoriesPage diff --git a/frontend/src/pages/FeedbackPage.tsx b/frontend/src/pages/FeedbackPage.tsx index 5812f4da..b1f1ff63 100644 --- a/frontend/src/pages/FeedbackPage.tsx +++ b/frontend/src/pages/FeedbackPage.tsx @@ -135,7 +135,7 @@ export function FeedbackPage() {
-

Send Feedback

+

Send Feedback

Help us improve ResolutionFlow. Report bugs, request features, or share your thoughts. diff --git a/frontend/src/pages/MyAnalyticsPage.tsx b/frontend/src/pages/MyAnalyticsPage.tsx index 3670d601..a7b7d88a 100644 --- a/frontend/src/pages/MyAnalyticsPage.tsx +++ b/frontend/src/pages/MyAnalyticsPage.tsx @@ -1,6 +1,6 @@ import { useState, useEffect } from 'react' import { Link } from 'react-router-dom' -import { BarChart3, Loader2, Target, Clock, TrendingUp, CheckCircle } from 'lucide-react' +import { BarChart3, Target, Clock, TrendingUp, CheckCircle } from 'lucide-react' import { AreaChart, Area, @@ -10,6 +10,7 @@ import { Tooltip, ResponsiveContainer, } from 'recharts' +import { Spinner } from '@/components/common/Spinner' import { analyticsApi } from '@/api' import { usePermissions } from '@/hooks/usePermissions' import type { PersonalAnalyticsResponse, AnalyticsPeriod } from '@/types' @@ -45,7 +46,7 @@ export default function MyAnalyticsPage() { if (loading) { return (

- +
) } @@ -62,14 +63,14 @@ export default function MyAnalyticsPage() { const outcomeBreakdown = summary.outcome_breakdown return ( -
+
{/* Header */}
-

My Analytics

+

My Analytics

@@ -84,7 +85,7 @@ export default function MyAnalyticsPage() { setPeriod(e.target.value as AnalyticsPeriod)} - className="rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-ring" + className="rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-primary/20" > {PERIOD_OPTIONS.map((opt) => (