From 1d205c1791d6778684cd27838a7b88e9b87145c9 Mon Sep 17 00:00:00 2001 From: CarterPerez-dev Date: Sun, 17 May 2026 13:12:24 -0400 Subject: [PATCH] chore(canary): white-canvas frontend design layer pre-operator UI MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Strip the inherited template aesthetic so the next AI/designer starts from a true blank canvas. AI tunnel-vision pattern: when there's an existing layout/sidebar/color palette, the model tends to redesign in place rather than truly start fresh. Removing the visual scaffold forces fresh-canvas thinking when operator-driven UI work begins. Removed: - pages/dashboard, pages/settings — template "Welcome / Available Stores / Suggested Features" stubs that have no canary purpose. - pages/landing/landing.module.scss, core/app/{shell,toast}.module.scss — empty header stubs imported only for side effects. - core/lib/shell.ui.store.ts — zustand store for sidebar open/ collapsed/theme state; entirely template-coupled. core/lib/index.ts reduced to an empty barrel ready for canary stores. - core/app/shell.tsx sidebar+nav+header layout; replaced with bare ErrorBoundary > Suspense > Outlet. Keeps robustness pattern, drops the navbar template a designer would otherwise inherit. - App.tsx hardcoded dark Toaster theme + wrapping .app div. - styles/_tokens.scss color palette ($bg-page, $text-default, etc.) — biased toward a specific dark aesthetic. Spacing, typography, weights, line heights, letter spacing, radius, z-index, transitions, breakpoints, container widths all KEPT — neutral design primitives, not aesthetic choices. - styles/_reset.scss body bg-color: #fff / color: #000 defaults. Designer chooses the palette; reset stays purely structural. - styles.scss .app class wrapper. - config.ts USERS endpoints, USERS query keys, STORAGE_KEYS, HTTP_STATUS, PAGINATION — template constants with no canary consumer. Reduced to ROUTES.HOME and QUERY_CONFIG (consumed by query.config.ts). Designer adds back what they actually need. Kept (logic / infrastructure / Phase 14 work): - Full api/ and core/api/ — Zod schemas, axios client, hooks, ApiError, QueryClient, retry strategies. - main.tsx, index.html (already canary-titled with favicons in public/asset). - QueryClientProvider + RouterProvider + bare Toaster + ReactQuery Devtools provider stack. - Lazy-route + Suspense + ErrorBoundary pattern in shell. - styles/_index.scss, _fonts.scss (system font stacks), _mixins.scss (breakpoint utilities, flex helpers, sr-only, truncate, etc.) — all neutral. Gate: pnpm typecheck, pnpm biome check, pnpm lint:scss, pnpm build all clean. Production bundle: 140-byte landing chunk (the
), ~37 KB index chunk (api/core/router/zod machinery), no leftover template CSS. --- .../frontend/src/App.tsx | 19 +-- .../frontend/src/config.ts | 44 +------ .../frontend/src/core/app/routers.tsx | 16 +-- .../frontend/src/core/app/shell.module.scss | 4 - .../frontend/src/core/app/shell.tsx | 116 ++---------------- .../frontend/src/core/app/toast.module.scss | 4 - .../frontend/src/core/lib/index.ts | 2 - .../frontend/src/core/lib/shell.ui.store.ts | 63 ---------- .../src/pages/dashboard/dashboard.module.scss | 4 - .../frontend/src/pages/dashboard/index.tsx | 62 ---------- .../frontend/src/pages/landing/index.tsx | 4 +- .../src/pages/landing/landing.module.scss | 4 - .../frontend/src/pages/settings/index.tsx | 56 --------- .../src/pages/settings/settings.module.scss | 4 - .../frontend/src/styles.scss | 8 -- .../frontend/src/styles/_reset.scss | 2 - .../frontend/src/styles/_tokens.scss | 38 ------ 17 files changed, 19 insertions(+), 431 deletions(-) delete mode 100644 PROJECTS/beginner/canary-token-generator/frontend/src/core/app/shell.module.scss delete mode 100644 PROJECTS/beginner/canary-token-generator/frontend/src/core/app/toast.module.scss delete mode 100644 PROJECTS/beginner/canary-token-generator/frontend/src/core/lib/shell.ui.store.ts delete mode 100644 PROJECTS/beginner/canary-token-generator/frontend/src/pages/dashboard/dashboard.module.scss delete mode 100644 PROJECTS/beginner/canary-token-generator/frontend/src/pages/dashboard/index.tsx delete mode 100644 PROJECTS/beginner/canary-token-generator/frontend/src/pages/landing/landing.module.scss delete mode 100644 PROJECTS/beginner/canary-token-generator/frontend/src/pages/settings/index.tsx delete mode 100644 PROJECTS/beginner/canary-token-generator/frontend/src/pages/settings/settings.module.scss diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/App.tsx b/PROJECTS/beginner/canary-token-generator/frontend/src/App.tsx index a7d82d6a..2c1e918b 100644 --- a/PROJECTS/beginner/canary-token-generator/frontend/src/App.tsx +++ b/PROJECTS/beginner/canary-token-generator/frontend/src/App.tsx @@ -7,29 +7,14 @@ import { QueryClientProvider } from '@tanstack/react-query' import { ReactQueryDevtools } from '@tanstack/react-query-devtools' import { RouterProvider } from 'react-router-dom' import { Toaster } from 'sonner' - import { queryClient } from '@/core/api' import { router } from '@/core/app/routers' -import '@/core/app/toast.module.scss' export default function App(): React.ReactElement { return ( -
- - -
+ + ) diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/config.ts b/PROJECTS/beginner/canary-token-generator/frontend/src/config.ts index 5013c41b..c323d473 100644 --- a/PROJECTS/beginner/canary-token-generator/frontend/src/config.ts +++ b/PROJECTS/beginner/canary-token-generator/frontend/src/config.ts @@ -2,31 +2,12 @@ // ©AngelaMos | 2026 // config.ts // =================== -const API_VERSION = 'v1' - -export const API_ENDPOINTS = { - USERS: { - BASE: `/${API_VERSION}/users`, - BY_ID: (id: string) => `/${API_VERSION}/users/${id}`, - }, -} as const - -export const QUERY_KEYS = { - USERS: { - ALL: ['users'] as const, - BY_ID: (id: string) => [...QUERY_KEYS.USERS.ALL, 'detail', id] as const, - }, -} as const export const ROUTES = { HOME: '/', - DASHBOARD: '/dashboard', - SETTINGS: '/settings', } as const -export const STORAGE_KEYS = { - UI: 'ui-storage', -} as const +export type Route = typeof ROUTES export const QUERY_CONFIG = { STALE_TIME: { @@ -43,26 +24,3 @@ export const QUERY_CONFIG = { NONE: 0, }, } as const - -export const HTTP_STATUS = { - OK: 200, - CREATED: 201, - NO_CONTENT: 204, - BAD_REQUEST: 400, - UNAUTHORIZED: 401, - FORBIDDEN: 403, - NOT_FOUND: 404, - CONFLICT: 409, - TOO_MANY_REQUESTS: 429, - INTERNAL_SERVER: 500, -} as const - -export const PAGINATION = { - DEFAULT_PAGE: 1, - DEFAULT_SIZE: 20, - MAX_SIZE: 100, -} as const - -export type ApiEndpoint = typeof API_ENDPOINTS -export type QueryKey = typeof QUERY_KEYS -export type Route = typeof ROUTES diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/core/app/routers.tsx b/PROJECTS/beginner/canary-token-generator/frontend/src/core/app/routers.tsx index 58f7c319..84ae0096 100644 --- a/PROJECTS/beginner/canary-token-generator/frontend/src/core/app/routers.tsx +++ b/PROJECTS/beginner/canary-token-generator/frontend/src/core/app/routers.tsx @@ -8,27 +8,19 @@ import { ROUTES } from '@/config' import { Shell } from './shell' const routes: RouteObject[] = [ - { - path: ROUTES.HOME, - lazy: () => import('@/pages/landing'), - }, { element: , children: [ { - path: ROUTES.DASHBOARD, - lazy: () => import('@/pages/dashboard'), + path: ROUTES.HOME, + lazy: () => import('@/pages/landing'), }, { - path: ROUTES.SETTINGS, - lazy: () => import('@/pages/settings'), + path: '*', + lazy: () => import('@/pages/landing'), }, ], }, - { - path: '*', - lazy: () => import('@/pages/landing'), - }, ] export const router = createBrowserRouter(routes) diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/core/app/shell.module.scss b/PROJECTS/beginner/canary-token-generator/frontend/src/core/app/shell.module.scss deleted file mode 100644 index 46687aef..00000000 --- a/PROJECTS/beginner/canary-token-generator/frontend/src/core/app/shell.module.scss +++ /dev/null @@ -1,4 +0,0 @@ -// =================== -// ©AngelaMos | 2026 -// shell.module.scss -// =================== diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/core/app/shell.tsx b/PROJECTS/beginner/canary-token-generator/frontend/src/core/app/shell.tsx index 3296f38f..cf21c94c 100644 --- a/PROJECTS/beginner/canary-token-generator/frontend/src/core/app/shell.tsx +++ b/PROJECTS/beginner/canary-token-generator/frontend/src/core/app/shell.tsx @@ -1,116 +1,22 @@ -/** - * ©AngelaMos | 2026 - * shell.tsx - */ +// =================== +// ©AngelaMos | 2026 +// shell.tsx +// =================== import { Suspense } from 'react' import { ErrorBoundary } from 'react-error-boundary' -import { GiCardAceClubs, GiCardJoker } from 'react-icons/gi' -import { LuChevronLeft, LuChevronRight, LuMenu } from 'react-icons/lu' -import { NavLink, Outlet, useLocation } from 'react-router-dom' -import { ROUTES } from '@/config' -import { useUIStore } from '@/core/lib' -import styles from './shell.module.scss' - -const NAV_ITEMS = [ - { path: ROUTES.DASHBOARD, label: 'Dashboard', icon: GiCardJoker }, - { path: ROUTES.SETTINGS, label: 'Settings', icon: GiCardAceClubs }, -] +import { Outlet } from 'react-router-dom' function ShellErrorFallback({ error }: { error: Error }): React.ReactElement { - return ( -
-

Something went wrong

- 
{error.message}
-
- ) -} - -function ShellLoading(): React.ReactElement { - return
Loading...
-} - -function getPageTitle(pathname: string): string { - const item = NAV_ITEMS.find((i) => i.path === pathname) - return item?.label ?? 'Dashboard' + return 
{error.message}
} export function Shell(): React.ReactElement { - const location = useLocation() - const { sidebarOpen, sidebarCollapsed, toggleSidebar, toggleSidebarCollapsed } = - useUIStore() - - const pageTitle = getPageTitle(location.pathname) - return ( -
- - - {sidebarOpen && ( - -

{pageTitle}

-
- - -
- - }> - - - -
-
- + + + + + ) } diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/core/app/toast.module.scss b/PROJECTS/beginner/canary-token-generator/frontend/src/core/app/toast.module.scss deleted file mode 100644 index 62e90ee9..00000000 --- a/PROJECTS/beginner/canary-token-generator/frontend/src/core/app/toast.module.scss +++ /dev/null @@ -1,4 +0,0 @@ -// =================== -// ©AngelaMos | 2026 -// toast.module.scss -// =================== diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/core/lib/index.ts b/PROJECTS/beginner/canary-token-generator/frontend/src/core/lib/index.ts index fddc1db7..88da7857 100644 --- a/PROJECTS/beginner/canary-token-generator/frontend/src/core/lib/index.ts +++ b/PROJECTS/beginner/canary-token-generator/frontend/src/core/lib/index.ts @@ -2,5 +2,3 @@ // ©AngelaMos | 2026 // index.ts // =================== - -export * from './shell.ui.store' diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/core/lib/shell.ui.store.ts b/PROJECTS/beginner/canary-token-generator/frontend/src/core/lib/shell.ui.store.ts deleted file mode 100644 index 7b81a71c..00000000 --- a/PROJECTS/beginner/canary-token-generator/frontend/src/core/lib/shell.ui.store.ts +++ /dev/null @@ -1,63 +0,0 @@ -/** - * ©AngelaMos | 2026 - * ui.store.ts - */ - -import { create } from 'zustand' -import { devtools, persist } from 'zustand/middleware' - -type Theme = 'light' | 'dark' | 'system' - -interface UIState { - theme: Theme - sidebarOpen: boolean - sidebarCollapsed: boolean - setTheme: (theme: Theme) => void - toggleSidebar: () => void - setSidebarOpen: (open: boolean) => void - toggleSidebarCollapsed: () => void -} - -export const useUIStore = create()( - devtools( - persist( - (set) => ({ - theme: 'dark', - sidebarOpen: false, - sidebarCollapsed: false, - - setTheme: (theme) => set({ theme }, false, 'ui/setTheme'), - - toggleSidebar: () => - set( - (state) => ({ sidebarOpen: !state.sidebarOpen }), - false, - 'ui/toggleSidebar' - ), - - setSidebarOpen: (open) => - set({ sidebarOpen: open }, false, 'ui/setSidebarOpen'), - - toggleSidebarCollapsed: () => - set( - (state) => ({ sidebarCollapsed: !state.sidebarCollapsed }), - false, - 'ui/toggleSidebarCollapsed' - ), - }), - { - name: 'ui-storage', - partialize: (state) => ({ - theme: state.theme, - sidebarCollapsed: state.sidebarCollapsed, - }), - } - ), - { name: 'UIStore' } - ) -) - -export const useTheme = (): Theme => useUIStore((s) => s.theme) -export const useSidebarOpen = (): boolean => useUIStore((s) => s.sidebarOpen) -export const useSidebarCollapsed = (): boolean => - useUIStore((s) => s.sidebarCollapsed) diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/pages/dashboard/dashboard.module.scss b/PROJECTS/beginner/canary-token-generator/frontend/src/pages/dashboard/dashboard.module.scss deleted file mode 100644 index 13c333f1..00000000 --- a/PROJECTS/beginner/canary-token-generator/frontend/src/pages/dashboard/dashboard.module.scss +++ /dev/null @@ -1,4 +0,0 @@ -// =================== -// ©AngelaMos | 2026 -// dashboard.module.scss -// =================== diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/pages/dashboard/index.tsx b/PROJECTS/beginner/canary-token-generator/frontend/src/pages/dashboard/index.tsx deleted file mode 100644 index ca908891..00000000 --- a/PROJECTS/beginner/canary-token-generator/frontend/src/pages/dashboard/index.tsx +++ /dev/null @@ -1,62 +0,0 @@ -/** - * ©AngelaMos | 2026 - * index.tsx - */ - -import styles from './dashboard.module.scss' - -const AVAILABLE_STORES = [ - { - name: 'useUIStore()', - file: 'core/lib/shell.ui.store.ts', - description: 'Theme, sidebar open/collapsed state', - }, -] - -const SUGGESTED_FEATURES = [ - 'Stats and metrics', - 'Recent activity feed', - 'Quick actions', - 'Charts and analytics', - 'Notifications overview', - 'Task/project summary', -] - -export function Component(): React.ReactElement { - return ( -
-
-
-

Welcome

-

- Template page — build your dashboard here -

-
- -
-

Available Stores

-
- {AVAILABLE_STORES.map((store) => ( -
- {store.name} -

{store.description}

- {store.file} -
- ))} -
-
- -
-

Suggested Features

-
    - {SUGGESTED_FEATURES.map((feature) => ( -
  • {feature}
    • - ))} -
-
-
-
- ) -} - -Component.displayName = 'Dashboard' diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/pages/landing/index.tsx b/PROJECTS/beginner/canary-token-generator/frontend/src/pages/landing/index.tsx index b0537d42..3c3ecdea 100644 --- a/PROJECTS/beginner/canary-token-generator/frontend/src/pages/landing/index.tsx +++ b/PROJECTS/beginner/canary-token-generator/frontend/src/pages/landing/index.tsx @@ -3,10 +3,8 @@ // index.tsx // =================== -import styles from './landing.module.scss' - export function Component(): React.ReactElement { - return
+ return
} Component.displayName = 'Landing' diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/pages/landing/landing.module.scss b/PROJECTS/beginner/canary-token-generator/frontend/src/pages/landing/landing.module.scss deleted file mode 100644 index 25d0641c..00000000 --- a/PROJECTS/beginner/canary-token-generator/frontend/src/pages/landing/landing.module.scss +++ /dev/null @@ -1,4 +0,0 @@ -// =================== -// ©AngelaMos | 2026 -// landing.module.scss -// =================== diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/pages/settings/index.tsx b/PROJECTS/beginner/canary-token-generator/frontend/src/pages/settings/index.tsx deleted file mode 100644 index 9c8dc9a5..00000000 --- a/PROJECTS/beginner/canary-token-generator/frontend/src/pages/settings/index.tsx +++ /dev/null @@ -1,56 +0,0 @@ -/** - * ©AngelaMos | 2026 - * index.tsx - */ - -import styles from './settings.module.scss' - -const AVAILABLE_STORES = [ - { - name: 'useUIStore()', - file: 'core/lib/shell.ui.store.ts', - description: 'Theme, sidebar open/collapsed state', - }, -] - -export function Component(): React.ReactElement { - return ( -
-
-
-

Settings

-

- Template page — available stores for building your settings UI -

-
- -
-

Available Stores

-
- {AVAILABLE_STORES.map((store) => ( -
- {store.name} -

{store.description}

-
- {store.file} -
-
- ))} -
-
- -
-

Suggested Features

-
    -
  • Profile form
    • -
  • Theme toggle (dark/light)
    • -
  • Notification settings
    • -
  • Application preferences
    • -
-
-
-
- ) -} - -Component.displayName = 'Settings' diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/pages/settings/settings.module.scss b/PROJECTS/beginner/canary-token-generator/frontend/src/pages/settings/settings.module.scss deleted file mode 100644 index 44cc7af6..00000000 --- a/PROJECTS/beginner/canary-token-generator/frontend/src/pages/settings/settings.module.scss +++ /dev/null @@ -1,4 +0,0 @@ -// =================== -// ©AngelaMos | 2026 -// settings.module.scss -// =================== diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/styles.scss b/PROJECTS/beginner/canary-token-generator/frontend/src/styles.scss index 0881c47d..71d5d98d 100644 --- a/PROJECTS/beginner/canary-token-generator/frontend/src/styles.scss +++ b/PROJECTS/beginner/canary-token-generator/frontend/src/styles.scss @@ -12,12 +12,4 @@ #root { min-height: 100vh; min-height: 100dvh; - display: flex; - flex-direction: column; -} - -.app { - flex: 1; - display: flex; - flex-direction: column; } diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/styles/_reset.scss b/PROJECTS/beginner/canary-token-generator/frontend/src/styles/_reset.scss index 51c3237b..5eded1e9 100644 --- a/PROJECTS/beginner/canary-token-generator/frontend/src/styles/_reset.scss +++ b/PROJECTS/beginner/canary-token-generator/frontend/src/styles/_reset.scss @@ -38,8 +38,6 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; - background-color: #fff; - color: #000; } h1, diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/styles/_tokens.scss b/PROJECTS/beginner/canary-token-generator/frontend/src/styles/_tokens.scss index 4eda05cc..88921cc9 100644 --- a/PROJECTS/beginner/canary-token-generator/frontend/src/styles/_tokens.scss +++ b/PROJECTS/beginner/canary-token-generator/frontend/src/styles/_tokens.scss @@ -71,44 +71,6 @@ $tracking-normal: 0; $tracking-wide: 0.025em; $tracking-wider: 0.05em; -// ============================================================================ -// COLORS -// ============================================================================ -$white: hsl(0, 0%, 100%); -$black: hsl(0, 0%, 0%); - -// Auth -$bg-page: hsl(0, 0%, 10.5%); -$bg-card: hsl(0, 0%, 6.2%); - -// Home/landing -$bg-landing: hsl(0, 0%, 10.8%); - -$bg-default: hsl(0, 0%, 7.1%); -$bg-alternative: hsl(0, 0%, 5.9%); -$bg-surface-75: hsl(0, 0%, 9%); -$bg-surface-100: hsl(0, 0%, 12.2%); -$bg-surface-200: hsl(0, 0%, 14.1%); -$bg-surface-300: hsl(0, 0%, 16.1%); -$bg-control: hsl(0, 0%, 10%); -$bg-selection: hsl(0, 0%, 19.2%); -$bg-overlay: hsl(0, 0%, 14.1%); -$bg-overlay-hover: hsl(0, 0%, 18%); - -$border-muted: hsl(0, 0%, 11.1%); -$border-default: hsl(0, 0%, 18%); -$border-strong: hsl(0, 0%, 22.4%); -$border-stronger: hsl(0, 0%, 27.1%); -$border-control: hsl(0, 0%, 22.4%); - -$text-default: hsl(0, 0%, 98%); -$text-light: hsl(0, 0%, 70.6%); -$text-lighter: hsl(0, 0%, 53.7%); -$text-muted: hsl(0, 0%, 30.2%); - -$error-default: hsl(0, 72%, 51%); -$error-light: hsl(0, 72%, 65%); - // ============================================================================ // BORDER RADIUS // ============================================================================