Skip to content

CreatorTrack , Workspace React Rebuild + UI Kit (foundation)

URL: https://mkdocs.justinsforge.com/memory/plans/suite-workspace-react-rebuild-2026-06-17/

CANON UPDATE (2026-06-18) , renamed to CreatorTrack. The product formerly called "The Suite" / "Workspace" is now CreatorTrack, built and previewed at dev.creatortrack.ai. Build order: reusable UI components first (one shared kit), then a Notion-class workspace/page framework as the foundation, then apps (finance, clips, CRM, etc.) that plug into that page framework as configs/modules; we iterate back-and-forth across kit, framework, and apps until each aspect's features fully work. The data layer formerly "lifeos" is now the core database (core); "workspace" survives only as the internal RLS data-tenant term. Full canon (with tech-stack overview): creator-suite-vision-strategy.

Date 2026-06-17. Author [Claude Code]. The committed foundation: one unified React app (The Suite), the Workspace (Notion clone) is the home shell, and Finance / Fitness / Clips are modules rendered as sections inside it. Build the UI kit by building the Workspace shell (don't build the kit in the abstract). Parity target = the live Flask workspace.justinsforge.com (forge_workspace_ui_*.py).

Architecture (locked)

  • One app = forge-suite (Next 15 / React / TS, App Router). It already has the bones: the (suite) route group + /n/[id] node renderer + the finance module.
  • Nested layouts: outer Workspace shell (sidebar) + inner module nav (e.g. finance's Dashboard/Net Worth tabs). Workspace sidebar is collapsible to focus on a module (Notion UX).
  • Modules are sections, not separate sites. finances.justinsforge.com etc. become redirects into theSuite/<module>, not separate codebases.
  • Data: lifeos Postgres + RLS (already the source of truth). finance.db retirement still pending.
  • Naming (locked earlier): product = The Suite; per-user container = workspace; tool = module (named by what it is: finance/fitness/clips); UI page = page; schema row = node; collection.

Flask Workspace feature inventory (the parity target)

Core Notion engine: - nodes (_ui_nodes.py, 94KB) , the page/node tree: create/rename/move/nest/delete, icons, covers, drag-reorder, favorites, trash. The spine. - page (_ui_page.py, 37KB) , page rendering: cover image, icon, H1 title, and the block system (text, headings, lists, toggle, callout, quote, divider, code, image, embed, etc.). - database (_ui_database.py, 102KB) , inline databases: views (table/board/list/calendar/ gallery), properties (text/select/status/date/number/relation/…), filters, sorts, New row, Add property, the view toolbar (expand/search/sort/filter/properties). - account (32KB), iconpicker (emoji/upload), calendar (10KB). Modules already in the Flask workspace (each becomes a Suite module): tasks/tasksapp, habits/habitsapp, meals, timetracker, docs, inbox, projects. (Finance is separate, already rebuilt in React; Fitness/Clips are new.)

Shell anatomy (from screenshots + forge_workspace_ui_base.py)

  • Sidebar (--panel #202020, width --sbw 218px, resizable): profile + workspace switcher (dropdown), Home / Chat / search row (static top), then scrollable page tree with Favorites
  • Private sections (uppercase --mut labels), page rows with icon + title (hover --sel, selected --sel), Trash; "JustinsForge.com" pill pinned bottom; gradient fades top/bottom.
  • Topbar: breadcrumb (icon + title), right side "Edited Nm ago" (--mut2), Share, star, copy-link, "…".
  • Main: cover image (full-bleed), page icon (overlapping cover), H1 title, body blocks; max content width, generous padding (48px 56px).
  • Inline database: title + toolbar (expand / search / sort / filter / properties / New), column headers with type icons, rows, "+ Add property", "+ New page".
  • Tokens/font already extracted → app/theme.css + memory [[reference_workspace_palette]] / [[reference_workspace_font]].

React rebuild approach + Notion/Linear best practices

  • UI kit grows from the shell build: Sidebar, NavItem, WorkspaceSwitcher, PageRow, Topbar, Cover, PageIcon, Card, Button, Pill, Menu, Input → all into components/ui on the tokens.
  • Block + view renderer registries (same pattern as the node registry already in the app): blockType → component, viewType → component. A new block/view = add a type + component.
  • Editor: use BlockNote (Notion-style React block editor) for rich-text/blocks , do NOT hand- roll contenteditable. (This was the original Suite stack pick.) Tiptap is the fallback.
  • Optimistic UI: edits update local state instantly, persist via route handler in the background (Notion/Linear feel instant). Server components for reads, client components for edits.
  • Drag + reorder: dnd-kit for the page tree + board views.
  • Keyboard-first + "/" slash menu for inserting blocks; cmd-K command palette (Linear).
  • Single source of truth: nodes/blocks/properties in Postgres under RLS; no client-side store of record. Mutations are RLS-scoped route handlers (the lifeos write pattern).
  • Structure: app/(suite)/ shell + per-module route groups; lib/<module>.ts data layer; components/ui shared kit; components/<module>/ module-specific. One migration-number range per agent when parallelizing.

Staged build order

  1. Shell to parity (harvest the kit): sidebar (switcher, Home/Chat/search, Favorites/Private tree, trash, pinned home), topbar, collapsible. = the kit's core.
  2. Page + blocks (BlockNote): cover, icon, title, text/heading/list/toggle/callout/etc.
  3. Inline database: table view first (properties, add row/property), then board/list/calendar.
  4. Re-home Finance as a module section inside the shell (reuse lib/finance.ts + area pages; drop the standalone /finances shell; re-skin onto the kit).
  5. Fan out: port the existing modules (tasks/habits/meals/etc.) + new (Fitness/Clips) as sections, each on the shared shell + kit (parallel agents, worktrees, claimed migration ranges).

Capture method (no more 2-day back-and-forth)

Per build slice: screenshot the live Flask state(s) for that piece + read only that piece's forge_workspace_ui_*.py, build to it, self-verify in the browser against the live app. Done for the shell here; deepen per slice.

[Claude Code]