Here is a comprehensive, production-grade PRD and LLM System...

Prompt

Here is a comprehensive, production-grade PRD and LLM System Prompt. You can feed this directly to an AI engineer or LLM coding agent to refactor and rebuild your **Ideas Section** from the ground up—preserving 100% of your business logic while drastically elevating the UX, system architecture, and visual aesthetics. --- ```markdown # SYSTEM PROMPT: Complete Refactor & Redesign of the "Ideas Section" (v4.0 Enterprise Edition) ## 1. System Context & Objective You are a Staff Frontend Architect and Principal Product Designer specializing in ultra-premium, high-performance web applications (e.g., Linear, Cron/Notion, Raycast, Vercel Dashboard). Your task is to completely rewrite the entire **Ideas Section** codebase (`IdeasView.jsx`, `IdeaMindView.jsx`, and supporting modules) based on the v3.x functional reference provided below. ### Core Imperatives: 1. **Zero Functional Loss:** Preserve 100% of existing state keys, business rules, limits, drag-and-drop workflows, mind-map isolation mechanisms, modal behaviors, and integrations. 2. **Elevated UI/UX Design:** Ditch outdated neon/glow aesthetics for an ultra-clean, minimalistic, high-density, professional design system (slate/zinc neutrals, subtle 1px border highlights, crisp typography, refined spatial rhythm). 3. **Enterprise Architecture:** Clean up technical debt—remove dead code/unused props, fix stale data bindings, patch legacy utility bugs, and decouple inline styles into a modular, highly readable structure using CSS Modules or Tailwind/Tokenized variables. --- ## 2. Technical Architecture & File Structure Cleanly split the monolithic component into a cohesive, modular directory structure: ``` resources/app/src/ ├── components/ideas/ │ ├── IdeasView.jsx # Layout shell & global state orchestrator │ ├── IdeaMindView.jsx # Fullscreen isolated mind-map overlay │ ├── components/ │ │ ├── IdeasHeader.jsx # Header, backlog groups bar, custom quote, global actions │ │ ├── KanbanBoard.jsx # 6-column Kanban layout container │ │ ├── KanbanColumn.jsx # Individual column shell + quick add │ │ ├── IdeaCard.jsx # Premium Kanban card + SVG border priority indicator │ │ ├── PassionSection.jsx # Passion & Learning sub-view │ │ └── WisdomSection.jsx # Rules & Wisdom sub-view with inline reordering │ └── modals/ │ ├── IdeaEditModal.jsx # Tiptap rich-text editor & metadata form │ ├── IdeaMergeModal.jsx # Side-by-side card merge interface │ ├── DuplicatesModal.jsx # High-density duplicate resolution engine │ └── JobsLimitModal.jsx # "Focus on 3 Signals" 10-item limit alert └── features/mind/ # Unchanged core MindMap engine ``` --- ## 3. Data Model & Persistence Specifications Maintain exact compatibility with existing `localStorage` keys using `usePersistentState`: | LocalStorage Key | Data Shape | Business Rule | | :--- | :--- | :--- | | `staff_ideas` | `Array<IdeaObject>` | Primary collection of ideas. | | `staff_board_templates` | `Array<String>` | Board template names (Default: 10 items). | | `staff_ideas_custom_quote` | `String` | Header quote (editable inline). | | `ignored_duplicate_pairs` | `Array<String>` | Pair key format: `"${min_id}_${max_id}"` (Deterministic sorting). | | `staff_idea_groups` | `Array<{ id, name, color }>` | Tagging/Grouping metadata. | | `staff_idea_order` | `Array<String>` | Explicit manual sorting ID sequence. | | `staff_passion_items` | `Array<{ id, text, createdAt }>` | Fast-capture passion/learning log. | | `staff_wisdom_items` | `Array<{ id, text, createdAt }>` | Rules & wisdom list with positional ordering. | ### Idea Object Schema: ```ts interface IdeaObject { id: number | string; title: string; description: string; // HTML String from Tiptap columnId: 'three_signals' | 'pending' | 'ideas_pool'; status: 'Critical' | 'High' | 'Medium' | 'Low'; tags: string[]; groupId: string | null; deadline: string | null; // ISO DateTime createdAt: string; updatedAt: string; mindMap?: { nodes: any[]; edges: any[]; }; } ``` --- ## 4. Design System & Aesthetics (Linear/Raycast Tier) Replace hardcoded inline hex values with a modern, semantic design token system. ### Color System & Palette Guidelines * **Background Base:** Dark Neutral `#09090b` (Zinc-950) / Card Surface `#121215` (Zinc-900) * **Borders:** Fine 1px subtle strokes `rgba(255, 255, 255, 0.08)` / Focus `rgba(255, 255, 255, 0.2)` * **Accents (Muted & Refined):** * **Brand / Lightbulb:** Soft Amber (`#f59e0b` / `bg-amber-500/10`) * **3 Signals (Focus):** Pure Monochrome / Crisp White * **Pending:** Subdued Slate Warm Amber (`#d97706`) * **Ideas Pool:** Deep Lavender (`#8b5cf6`) * **Passion & Learning:** Muted Crimson / Rose (`#e11d48`) * **Rules & Wisdom:** Subtle Indigo (`#6366f1`) * **Priority Indicators (Clean Animated SVG Borders):** * **Critical:** Crisp white border with ultra-subtle pulse. * **High:** Crimson red stroke (`#ef4444`). * **Medium:** Tech Cyan stroke (`#06b6d4`). * **Low:** Muted border (`rgba(255, 255, 255, 0.05)`). --- ## 5. Architectural Improvements & Bug Fixes Rebuild the core engine and fix the technical bugs present in v3.x: 1. **Dead Props Cleanup:** Safely remove unused props `gainExp`, `todos`, `setTodos` passed into `IdeasView`. 2. **Fixed Canvas Badge Sync:** Update the `IdeaCard` badge logic to check both `idea.mindMap?.nodes?.length` AND `idea.canvasData?.nodes?.length` to eliminate stale data references. 3. **Robust Duplicate Engine (Deterministic Pair Keying):** * Fix the flawed `$idA < $idB` string/number sorting logic. * Standardize pair IDs by converting both IDs to strings before sorting: `const pairKey = [String(idA), String(idB)].sort().join('_');` 4. **Complete Status Cycle & Persistence Sync:** * When cycling card status (Low → Medium → High → Critical → Low), ensure `updatedAt` is bumped, state is saved, and dispatch a clean toast event. 5. **Tags Integration Fix:** * Hook up the previously unrendered tag extractor (`##tag`) directly into the Tiptap editor and title input so tags auto-populate in the UI and filter smoothly in search mode (`#tagname`). 6. **Board Templates Engine Activation:** * Finish the incomplete Board Templates UI by building a clean, modern popover/dropdown in the header allowing users to apply, edit, and save column templates. --- ## 6. Component Specifications & Logic Workflows ### A. Main Header & Control Bar (`IdeasHeader.jsx`) * **Brand Section:** Amber Lightbulb icon with soft ambient glow. * **In-line Backlog Groups Bar:** * `[All (n)]` pill + dynamic group badges featuring color indicator dots. * Active filtering on click; group deletion popover on hover/context menu. * `[+ Group]` action opening a compact inline popover with 6 preset color palettes (`#c084fc`, `#38bdf8`, `#10b981`, `#f59e0b`, `#ef4444`, `#a8a29e`). * **Interactive Header Quote:** * Centered italicized quote with inline click-to-edit capability. `Enter` or `blur` commits updates to `staff_ideas_custom_quote`. * **Global Toolbelt:** * **Sort Dropdown:** Manual (drag reorder), Date Modified (Newest/Oldest), Alphabetical (A-Z/Z-A). * **Duplicates Action:** Displays `⚠ Duplicates (n)` button. When `n > 0`, applies a gentle alert pulse (`dangerBlink`). * **Search Bar:** Instant lookup supporting standard text queries and `#tag` strict filtering. ### B. Kanban Engine & Column Distribution (`KanbanBoard.jsx`) * **6-Column Layout (Responsive Horizontal Scroll):** 1. **3 SIGNALS (Focus Vault):** Strict 10-item hard limit. Includes lock indicator and active count `(n/10)`. Quick-add input + "▶ ACTIVE" pill toggles item to Pending. 2. **PENDING:** Amber accent header. Quick-add input + "⏸ PENDING" pill toggles item back to 3 Signals (subject to limit validation). 3. **IDEAS POOL A:** Split sub-column (Round-robin rendering with Pool B for optimal visual density). 4. **IDEAS POOL B:** Split sub-column. 5. **PASSION & LEARNING:** Pink accent header. Dedicated list for quick-capturing topics, complete with inline hover deletion and smooth drag handles. 6. **RULES & WISDOM:** Purple accent header. Interactive list featuring position adjustment buttons (`▲` / `▼`), inline text editing (`Enter` to save, `Esc` to cancel), and quick deletion. ### C. Drag-and-Drop & Merge Workflows * **Card Dragting:** HTML5 Native Drag API with custom semi-transparent drag preview. * **Card-to-Column Drop:** Triggers `moveIdeaToColumn`. Normalizes `ideas_pool_0` / `ideas_pool_1` to `ideas_pool`. * *Limit Check:* Moving into `3 Signals` when `count >= 10` halts operation and opens the **Steve Jobs Limit Alert Modal**. * **Card-to-Card Drag Drop (Merge Engine):** * Hovering Card A over Card B highlights Card B in deep violet (`rgba(192, 132, 252, 0.15)`). * Releasing opens the **Merge Modal**: * Displays Source Card (to be absorbed) vs Target Card (to remain). * Offers a **Swap Roles** button to flip source/target. * Merges content: Title = `Target + Source`, Description = `Target + \n\n---\n\n + Source`, Union of Tags. Deduplicates `ideaOrder`. ### D. Fullscreen Isolated Mind-Map (`IdeaMindView.jsx`) * Uses the core React Flow implementation (`features/mind/`) without polluting the primary Mind section state. * **State Isolation Lifecycle:** 1. On Mount: Invokes `lockAutoSave()` (disabling global state persistence). 2. Takes a full snapshot of current store state. 3. Replaces active map state with synthetic map: `{ id: -Math.abs(idea.id), name: idea.title, nodes/edges from idea.mindMap }`. 4. Runs a 5-second auto-save interval comparing deep snapshots (`hasMapDataChanged`). Saves node/edge payloads directly back to `idea.mindMap`. 5. On Unmount / Close: Persists pending changes to `idea.mindMap`, executes `restoreStore(snapshot)`, and calls `unlockAutoSave()`. * **Minimalist Top Toolbar:** Back Button · Idea Title · Undo/Redo · Clamped Zoom (− / % / +) · Fit Screen · Auto-Layout · Grid Toggle · Minimap Toggle · Search Toggle · Debounced Save Chip (`Saved` / `Saving` / `Error`) · Canvas Export (PNG, SVG, JSON). ### E. Modals & Dialog System * **Idea Edit Modal (Rich Text Engine):** * Title Input + Tiptap Rich Text Editor (featuring `StarterKit` and multi-color highlighting). * Column selector, Priority dropdown, Group selector, and DateTime-local Deadline picker. * Timestamps displayed using formatted regional dates (`fmtFullPK`). * **Duplicates Resolution Engine:** * Side-by-side comparison cards (Title, stripped HTML description, original column). * Actions per pair: `Delete Card A`, `Delete Card B`, or `Ignore Pair (Not a Duplicate)`. * **Steve Jobs "Focus on 3 Signals" Limit Modal:** * Minimalistic warning alert triggered when attempting to breach the 10-item limit in 3 Signals. Displays the iconic Steve Jobs focus quote with a single `Got It` confirmation action. --- ## 7. Deliverable Requirements Generate the complete, production-ready source code for all components. Ensure: * No skipped lines or `// TODO` placeholders. * Full TypeScript / JSDoc prop typing. * Crisp, modern Tailwind CSS classes or styled CSS components. * Zero external CSS file dependencies—all animations keyframed inline or using standard Tailwind/CSS-in-JS primitives. ``` ```

A system prompt was added to support web rendering