850 lines
No EOL
32 KiB
Markdown
850 lines
No EOL
32 KiB
Markdown
# Taskboard — Figma AI Designer Prompt
|
||
|
||
> Use this document as a design brief for generating UI flows, wireframes, and high-fidelity mockups in Figma with AI assistance.
|
||
|
||
---
|
||
|
||
## 1. Application Overview
|
||
|
||
**Taskboard** is a Trello-like Kanban project management web application. Users create Boards containing Lists (columns) and Cards (tasks). Cards support labels, checklists, comments, file attachments, due dates, card-to-card linking, and epic grouping. Boards also have **Epics** (large features spanning multiple cards) and **Wikis** (rich-text documentation pages).
|
||
|
||
### Tech Stack
|
||
- **Frontend**: React 18 + TypeScript, Tailwind CSS (dark theme), React Router, @dnd-kit (drag-and-drop), Slate.js (rich text editor)
|
||
- **Backend**: Flask + SQLAlchemy + PostgreSQL
|
||
- **Auth**: JWT-based authentication
|
||
|
||
### Design System Basics
|
||
- **Theme**: Dark mode by default
|
||
- **Background**: `gray-900` (#111827) for page backgrounds, `gray-800` (#1f2937) for card/panel surfaces, `gray-700` (#374151) for inputs and hover states
|
||
- **Accent color**: `blue-600` (#2563eb) primary, `blue-500` hover, `blue-400` for text links
|
||
- **Text**: `white` for headings, `gray-300` for body text, `gray-400` for secondary/muted text, `gray-500` for placeholders
|
||
- **Borders**: `gray-700` for subtle dividers
|
||
- **Destructive**: `red-500`/`red-600` for delete/danger actions
|
||
- **Success**: `green-500`/`green-600`
|
||
- **Border radius**: `rounded-lg` (8px) for cards and inputs, `rounded-md` (6px) for buttons, `rounded-full` for badges/chips
|
||
- **Spacing**: Tailwind's 4px base unit (p-4 = 16px, gap-6 = 24px)
|
||
- **Typography**: System font stack; headings bold (font-bold), body medium (font-medium)
|
||
|
||
---
|
||
|
||
## 2. Navigation & Information Architecture
|
||
|
||
### Global Navigation Bar (Navbar)
|
||
- **Logo**: "Taskboard" wordmark + icon (left side), links to `/boards`
|
||
- **Nav links** (desktop): "Home" → `/home`, "Boards" → `/boards` (only when logged in)
|
||
- **Auth section** (right side):
|
||
- Logged out: "Login" link + "Register" button (blue-600 filled)
|
||
- Logged in: Username display + "Logout" button
|
||
- **Mobile**: Hamburger menu icon that expands to show same links vertically
|
||
- **Height**: 64px (h-16), bg-gray-800 with bottom border-gray-700
|
||
|
||
### Board-Level Sidebar (BoardSidebar)
|
||
- Fixed position on the **right edge** of the viewport, vertically centered
|
||
- Contains links for the current board context:
|
||
- 📋 **Epics** → `/boards/:id/epics`
|
||
- 📚 **Wikis** → `/boards/:id/wikis`
|
||
- 📜 **History** → `/boards/:id/history`
|
||
- Active item has blue-600 background; inactive has gray-800 with hover-gray-700
|
||
- Pill-shaped tabs with rounded-l-lg (left rounded only, flush to right edge)
|
||
|
||
### Full Route Map
|
||
|
||
| Route | Page | Auth Required |
|
||
|-------|------|---------------|
|
||
| `/home` | Landing/Marketing page | No |
|
||
| `/login` | Login page | No |
|
||
| `/register` | Registration page | No |
|
||
| `/boards` | Board listing | Yes |
|
||
| `/boards/new` | Create new board | Yes |
|
||
| `/boards/:id` | Board detail (Kanban board view) | Yes |
|
||
| `/boards/:id/edit` | Edit board settings | Yes |
|
||
| `/boards/:id/epics` | Epics listing for board | Yes |
|
||
| `/boards/:id/epics/new` | Create new epic | Yes |
|
||
| `/boards/:id/epics/:epicId` | Epic detail page | Yes |
|
||
| `/boards/:id/epics/:epicId/edit` | Edit epic | Yes |
|
||
| `/boards/:id/wikis` | Wikis listing for board | Yes |
|
||
| `/boards/:id/wikis/new` | Create new wiki | Yes |
|
||
| `/boards/:id/wikis/:wikiId` | Wiki detail page | Yes |
|
||
| `/boards/:id/wikis/:wikiId/edit` | Edit wiki | Yes |
|
||
| `/boards/:id/cards/:cardId` | Card detail page | Yes |
|
||
|
||
---
|
||
|
||
## 3. Data Models & Their Fields
|
||
|
||
### User
|
||
| Field | Type | Display Notes |
|
||
|-------|------|---------------|
|
||
| `id` | integer | Internal |
|
||
| `email` | string (120) | Shown in auth forms |
|
||
| `username` | string (80) | Displayed in navbar, comments |
|
||
| `password_hash` | string | Never displayed |
|
||
| `first_name` | string (50) | Optional display |
|
||
| `last_name` | string (50) | Optional display |
|
||
| `is_active` | boolean | Account status |
|
||
| `is_admin` | boolean | Admin badge |
|
||
| `created_at` | datetime | Account creation date |
|
||
| `updated_at` | datetime | Last update |
|
||
|
||
### Board
|
||
| Field | Type | Display Notes |
|
||
|-------|------|---------------|
|
||
| `id` | integer | Internal |
|
||
| `name` | string (200) | Board title — prominent heading |
|
||
| `description` | text | Subtitle/brief shown below title |
|
||
| `closed` | boolean | Archived indicator (badge or dimmed card) |
|
||
| `url` | string (500) | External URL reference |
|
||
| `short_link` | string (10) | Shareable short link |
|
||
| `short_url` | string (500) | Full short URL |
|
||
| `user_id` | FK → User | Board owner |
|
||
| `prefs` | JSONB | Board preferences (background, etc.) |
|
||
| `label_names` | JSONB | Label color→name mapping |
|
||
| `limits` | JSONB | Card/list limits |
|
||
| `date_last_activity` | datetime | "Last active" display |
|
||
| `date_last_view` | datetime | "Last viewed" display |
|
||
| `created_at` | datetime | Creation date |
|
||
| `updated_at` | datetime | Last update |
|
||
|
||
### List (Column)
|
||
| Field | Type | Display Notes |
|
||
|-------|------|---------------|
|
||
| `id` | integer | Internal |
|
||
| `name` | string (200) | Column header title |
|
||
| `closed` | boolean | Archived indicator |
|
||
| `pos` | float | Horizontal sort order |
|
||
| `board_id` | FK → Board | Parent board |
|
||
| `created_at` | datetime | — |
|
||
| `updated_at` | datetime | — |
|
||
|
||
### Card (Task)
|
||
| Field | Type | Display Notes |
|
||
|-------|------|---------------|
|
||
| `id` | integer | Internal |
|
||
| `name` | string (200) | Card title — main heading on detail page |
|
||
| `description` | text | Multi-line description; editable inline |
|
||
| `closed` | boolean | Archived indicator |
|
||
| `due` | datetime | Due date — shown as badge on card, date picker in editor |
|
||
| `due_complete` | boolean | Checkbox to mark due as done |
|
||
| `pos` | float | Sort position within list |
|
||
| `id_short` | integer | Short ID for display |
|
||
| `board_id` | FK → Board | Parent board |
|
||
| `list_id` | FK → List | Current list (shown as "In list [name]") |
|
||
| `epic_id` | FK → Epic | Assigned epic (nullable) |
|
||
| `badges` | JSONB | Stats (checklist count, comment count, attachment count) |
|
||
| `cover` | JSONB | Cover image settings |
|
||
| `desc_data` | JSONB | Rich description data |
|
||
| `date_last_activity` | datetime | — |
|
||
| `created_at` | datetime | "Created [date]" display |
|
||
| `updated_at` | datetime | — |
|
||
|
||
### Label
|
||
| Field | Type | Display Notes |
|
||
|-------|------|---------------|
|
||
| `id` | integer | Internal |
|
||
| `name` | string (100) | Label text (shown on hover) |
|
||
| `color` | string (50) | Color name (green, red, blue, etc.) — rendered as colored chip/badge |
|
||
| `uses` | integer | Usage count |
|
||
| `board_id` | FK → Board | Parent board |
|
||
|
||
### Checklist
|
||
| Field | Type | Display Notes |
|
||
|-------|------|---------------|
|
||
| `id` | integer | Internal |
|
||
| `name` | string (200) | Checklist heading |
|
||
| `pos` | float | Sort order among checklists |
|
||
| `card_id` | FK → Card | Parent card |
|
||
| `board_id` | FK → Board | Parent board |
|
||
|
||
### CheckItem
|
||
| Field | Type | Display Notes |
|
||
|-------|------|---------------|
|
||
| `id` | integer | Internal |
|
||
| `name` | string (500) | Item text with checkbox |
|
||
| `pos` | float | Sort order |
|
||
| `state` | "complete" / "incomplete" | Checkbox state |
|
||
| `due` | datetime | Optional due date |
|
||
| `checklist_id` | FK → Checklist | Parent checklist |
|
||
| `user_id` | FK → User | Assigned user |
|
||
|
||
### Comment
|
||
| Field | Type | Display Notes |
|
||
|-------|------|---------------|
|
||
| `id` | integer | Internal |
|
||
| `text` | text | Comment body text |
|
||
| `card_id` | FK → Card | Parent card |
|
||
| `user_id` | FK → User | Author (display username + timestamp) |
|
||
| `created_at` | datetime | "Posted [relative time]" |
|
||
| `updated_at` | datetime | "Edited" indicator |
|
||
|
||
### FileAttachment
|
||
| Field | Type | Display Notes |
|
||
|-------|------|---------------|
|
||
| `id` | integer | Internal |
|
||
| `uuid` | string (36) | Public identifier |
|
||
| `filename` | string (255) | Storage filename |
|
||
| `original_name` | string (255) | Display name |
|
||
| `file_type` | string (50) | "image", "pdf", "document" — determines icon/preview |
|
||
| `mime_type` | string (100) | MIME type |
|
||
| `file_size` | integer | Display as "KB", "MB" |
|
||
| `attachable_type` | string (50) | "Card", "Comment", "Epic" — polymorphic parent |
|
||
| `attachable_id` | integer | ID of parent entity |
|
||
| `uploaded_by` | FK → User | Uploader |
|
||
| `thumbnail_url` | string | Thumbnail for images |
|
||
| `created_at` | datetime | Upload date |
|
||
|
||
### Epic
|
||
| Field | Type | Display Notes |
|
||
|-------|------|---------------|
|
||
| `id` | integer | Internal |
|
||
| `name` | string (200) | Epic title |
|
||
| `description` | text | Brief description |
|
||
| `content` | JSONB | Rich text content (Slate.js JSON) |
|
||
| `color` | string (7) | Hex color for epic badge (e.g., "#FF5733") |
|
||
| `closed` | boolean | Completed/archived indicator |
|
||
| `pos` | float | Sort order |
|
||
| `depth_limit` | integer | Max nesting depth (default 5) |
|
||
| `board_id` | FK → Board | Parent board |
|
||
| `parent_epic_id` | FK → Epic (nullable) | Parent epic for hierarchy |
|
||
| `completed_list_id` | FK → List (nullable) | Which list counts as "done" |
|
||
| `metrics` | JSONB | `{ card_count: 10, completed_cards_count: 7 }` — progress bar |
|
||
| `date_last_activity` | datetime | — |
|
||
| `created_at` | datetime | — |
|
||
| `updated_at` | datetime | — |
|
||
|
||
### Wiki
|
||
| Field | Type | Display Notes |
|
||
|-------|------|---------------|
|
||
| `id` | integer | Internal |
|
||
| `name` | string (200) | Wiki page title |
|
||
| `slug` | string (255) | URL-friendly identifier |
|
||
| `content` | JSONB | Rich text content (Slate.js JSON) |
|
||
| `summary` | text | Brief description/abstract |
|
||
| `category` | string (100) | Category grouping label |
|
||
| `board_id` | FK → Board | Parent board |
|
||
| `created_by` | FK → User | Author |
|
||
| `updated_by` | FK → User | Last editor |
|
||
| `tags` | JSONB | Array of tag strings: `["security", "api"]` |
|
||
| `created_at` | datetime | — |
|
||
| `updated_at` | datetime | — |
|
||
|
||
### CardLink (Card-to-Card Relationship)
|
||
| Field | Type | Display Notes |
|
||
|-------|------|---------------|
|
||
| `id` | integer | Internal |
|
||
| `parent_card_id` | FK → Card | Parent card |
|
||
| `child_card_id` | FK → Card | Child card |
|
||
| `created_by` | FK → User | Who linked them |
|
||
| `created_at` | datetime | When linked |
|
||
|
||
---
|
||
|
||
## 4. Page-by-Page UI Specifications
|
||
|
||
---
|
||
|
||
### PAGE 1: Landing / Home Page (`/home`)
|
||
|
||
**Purpose**: Marketing landing page introducing Taskboard. Visible to all visitors.
|
||
|
||
**Layout**: Full-width centered layout
|
||
|
||
**Elements**:
|
||
- **Hero Section**
|
||
- Large heading: "Taskboard" with tagline (e.g., "Organize your work, your way")
|
||
- Two CTA buttons: "Get Started" → `/register` (blue-600 filled), "Login" → `/login` (outline/ghost)
|
||
- Optional illustration or screenshot mockup
|
||
- **Features Section** (optional)
|
||
- 3-4 feature cards in a grid: Kanban boards, Epics, Wikis, Card linking
|
||
- **Footer** with basic links
|
||
|
||
**Interactions**: Click CTAs to navigate to auth pages
|
||
|
||
---
|
||
|
||
### PAGE 2: Login Page (`/login`)
|
||
|
||
**Purpose**: User authentication
|
||
|
||
**Layout**: Narrow centered card on dark background
|
||
|
||
**Elements**:
|
||
- "Taskboard" logo/wordmark at top
|
||
- Heading: "Sign in to your account"
|
||
- **Form fields**:
|
||
- **Email** — text input with label, placeholder "you@example.com"
|
||
- **Password** — password input with label, placeholder "••••••••"
|
||
- **Submit button**: "Sign In" (full width, blue-600)
|
||
- **Link**: "Don't have an account? Register" → `/register`
|
||
- Error message area (red text, shown on failed login)
|
||
|
||
---
|
||
|
||
### PAGE 3: Register Page (`/register`)
|
||
|
||
**Purpose**: New user registration
|
||
|
||
**Layout**: Narrow centered card on dark background
|
||
|
||
**Elements**:
|
||
- "Taskboard" logo/wordmark at top
|
||
- Heading: "Create your account"
|
||
- **Form fields**:
|
||
- **Username** — text input, placeholder "Choose a username"
|
||
- **Email** — text input, placeholder "you@example.com"
|
||
- **Password** — password input, placeholder "Create a password"
|
||
- **Confirm Password** — password input, placeholder "Confirm your password"
|
||
- **Submit button**: "Create Account" (full width, blue-600)
|
||
- **Link**: "Already have an account? Sign in" → `/login`
|
||
- Validation error messages per field
|
||
|
||
---
|
||
|
||
### PAGE 4: Boards List (`/boards`)
|
||
|
||
**Purpose**: View all boards the user owns/participates in
|
||
|
||
**Layout**: Wide page layout with padding
|
||
|
||
**Elements**:
|
||
- **Page header**:
|
||
- Heading: "My Boards"
|
||
- Button: "+ New Board" (blue-600) → navigates to `/boards/new`
|
||
- **Board grid** (responsive: 1 col mobile, 2 col tablet, 3-4 col desktop):
|
||
- Each **Board card** shows:
|
||
- Board name (bold, white text)
|
||
- Description snippet (gray-400, truncated)
|
||
- Metadata: "Last active: [relative date]" or "Created [date]"
|
||
- Card count indicator (optional badge)
|
||
- Closed/archived boards shown dimmed or with "Archived" badge
|
||
- Click on board card → navigates to `/boards/:id`
|
||
- **Empty state**: "No boards yet. Create your first board to get started!" with CTA button
|
||
|
||
---
|
||
|
||
### PAGE 5: Create Board (`/boards/new`)
|
||
|
||
**Purpose**: Create a new Kanban board
|
||
|
||
**Layout**: Narrow centered form
|
||
|
||
**Elements**:
|
||
- Breadcrumb: "← Back to Boards" → `/boards`
|
||
- Heading: "Create New Board"
|
||
- **Form fields**:
|
||
- **Board Name** — text input (required), placeholder "Enter board name"
|
||
- **Description** — textarea, placeholder "Describe your board (optional)"
|
||
- **Buttons**: "Create Board" (blue-600), "Cancel" (gray-600, navigates back)
|
||
|
||
---
|
||
|
||
### PAGE 6: Edit Board (`/boards/:id/edit`)
|
||
|
||
**Purpose**: Edit board settings
|
||
|
||
**Layout**: Narrow centered form
|
||
|
||
**Elements**:
|
||
- Breadcrumb: "← Back to Board" → `/boards/:id`
|
||
- Heading: "Edit Board"
|
||
- **Form fields**:
|
||
- **Board Name** — text input (pre-filled)
|
||
- **Description** — textarea (pre-filled)
|
||
- **Closed** — toggle/checkbox "Archive this board"
|
||
- **Buttons**: "Save Changes" (blue-600), "Cancel" (gray-600)
|
||
|
||
---
|
||
|
||
### PAGE 7: Board Detail — Kanban View (`/boards/:id`) ★ PRIMARY PAGE
|
||
|
||
**Purpose**: The main Kanban board interface. This is the core of the application.
|
||
|
||
**Layout**: Full-width, horizontally scrollable. BoardSidebar on right edge.
|
||
|
||
**Elements**:
|
||
- **Top bar**:
|
||
- Breadcrumb: "← Back to Boards" → `/boards`
|
||
- Board name (h1, large, bold)
|
||
- Board description (gray-400, below name)
|
||
- Action buttons (right aligned):
|
||
- "Edit Board" (gray-700 button) → `/boards/:id/edit`
|
||
- "+ Add List" (blue-600 button)
|
||
- **Kanban board area** (horizontal flex container, scrollable):
|
||
- **List/Column** (each ~300px wide, bg-gray-800, rounded-lg):
|
||
- **Column header**: List name (bold), with dropdown menu (⋮) for: Rename list, Delete list
|
||
- **Card list** (vertical, scrollable):
|
||
- Each **KanbanCard** shows:
|
||
- Card name (white, medium weight)
|
||
- Label chips (colored dots or small pills below name)
|
||
- Badges row: checklist icon + count, comment icon + count, attachment icon + count
|
||
- Due date badge (if set): date text, red if overdue, green if complete
|
||
- Epic badge (if assigned): colored pill with epic name
|
||
- Parent card indicator: "Linked from: [card name]" (gray-400 text)
|
||
- **"Add card" button** at bottom of list: "+ Add a card" (text button, gray-400)
|
||
- **"Add another list" card**: Dashed border placeholder at end of columns
|
||
- **Drag & Drop**: Cards can be dragged between lists and reordered within lists. Lists can be reordered horizontally. Show ghost/overlay of dragged item.
|
||
|
||
**Interactions**:
|
||
- Click card → opens Card Preview Modal OR navigates to Card Detail
|
||
- Click "+ Add a card" → opens Create Card Modal
|
||
- Click "+ Add List" → opens Create List Modal
|
||
- Drag card/column to reorder
|
||
|
||
---
|
||
|
||
### PAGE 8: Card Detail Page (`/boards/:id/cards/:cardId`) ★ KEY PAGE
|
||
|
||
**Purpose**: Full detailed view and editing of a single card
|
||
|
||
**Layout**: Narrow centered layout (max-width ~900px). Two-column grid: main content (2/3) + sidebar (1/3).
|
||
|
||
**Elements**:
|
||
|
||
**Top Section**:
|
||
- Breadcrumb: "← Back to Board" → `/boards/:id`
|
||
- Card name (h1, 3xl bold, inline-editable — click edit icon to rename)
|
||
- Subtitle: "In list [list name] • Created [date]"
|
||
- **Action dropdown** (⋮ icon, top-right): Edit Name, Delete Card, Create Linked Card, Link Existing Card
|
||
|
||
**Main Content (left 2/3)**:
|
||
|
||
1. **Description Section** (bg-gray-800 card)
|
||
- Heading "Description" + "Edit" button
|
||
- Display mode: rendered text or "No description added yet." placeholder
|
||
- Edit mode: textarea with Save/Cancel buttons
|
||
|
||
2. **Labels Section**
|
||
- Colored label chips attached to this card
|
||
- Button to add/remove labels (opens label picker dropdown)
|
||
- Label picker: list of board labels as colored rows, click to toggle
|
||
|
||
3. **Epic Section**
|
||
- If assigned: colored epic badge with name, click to navigate to epic
|
||
- Button to assign/change epic (opens epic picker dropdown)
|
||
|
||
4. **Linked Cards Section**
|
||
- List of linked parent/child cards with name and link icon
|
||
- Each link has "Unlink" button (×)
|
||
- Empty state: "No linked cards"
|
||
|
||
5. **Checklists Section**
|
||
- Multiple checklists, each with:
|
||
- Checklist name heading + delete button (trash icon)
|
||
- Progress bar (percentage of completed items)
|
||
- List of CheckItems, each with:
|
||
- Checkbox (complete/incomplete)
|
||
- Item name (strikethrough when complete)
|
||
- Due date (if set)
|
||
- Action menu: Edit, Convert to Card, Delete
|
||
- "Add item" input at bottom
|
||
- "Add Checklist" button
|
||
|
||
6. **Attachments Section**
|
||
- File upload area (drag & drop or click to browse)
|
||
- List of uploaded files:
|
||
- Image preview (thumbnail) for images
|
||
- File icon + name for documents/PDFs
|
||
- File name, size, upload date
|
||
- Actions: View, Download, Delete
|
||
|
||
7. **Comments Section**
|
||
- Comment input: textarea + "Save" button
|
||
- List of comments (newest first):
|
||
- Author username + avatar placeholder
|
||
- Comment text
|
||
- Timestamp (relative: "2h ago")
|
||
- Actions: Edit (pencil icon), Delete (trash icon)
|
||
- Edit mode: inline textarea with Save/Cancel
|
||
|
||
**Sidebar (right 1/3)** — CardSidebar component:
|
||
- **Due Date**: Date display, "Mark complete" checkbox, date picker to change
|
||
- **List**: Current list name, dropdown to move card to another list
|
||
- **Epic**: Current epic or "None", link to epic detail
|
||
- **Created Date**: Full datetime
|
||
- **Last Activity**: Relative datetime
|
||
- **Card ID**: Short ID display
|
||
|
||
**Modals accessible from this page**:
|
||
- Delete Card Modal
|
||
- Create Linked Card Modal (name + description fields)
|
||
- Link Existing Card Modal (search/select from board cards)
|
||
- Unlink Card Modal (confirmation)
|
||
- Create Checklist Modal
|
||
- Delete Checklist Modal
|
||
- Edit Check Item Modal
|
||
|
||
---
|
||
|
||
### PAGE 9: Board Epics (`/boards/:id/epics`)
|
||
|
||
**Purpose**: View and manage all epics for a board
|
||
|
||
**Layout**: Wide page layout with BoardSidebar
|
||
|
||
**Elements**:
|
||
- Breadcrumb: "← Back to Board" → `/boards/:id`
|
||
- Heading: "Epics"
|
||
- Button: "+ New Epic" (blue-600) → `/boards/:id/epics/new`
|
||
- **Epics list/table**:
|
||
- Each epic row/card shows:
|
||
- **Color dot** (epic color)
|
||
- **Epic name** (bold, links to detail page)
|
||
- **Description** snippet (truncated)
|
||
- **Progress bar**: `completed_cards_count / card_count` with percentage
|
||
- **Status**: Open/Closed badge
|
||
- **Last activity**: Relative date
|
||
- **Actions**: Edit (pencil), Delete (trash)
|
||
- Nested epics shown indented under parent
|
||
- **Empty state**: "No epics yet. Create an epic to group related cards."
|
||
|
||
---
|
||
|
||
### PAGE 10: Create Epic (`/boards/:id/epics/new`)
|
||
|
||
**Purpose**: Create a new epic
|
||
|
||
**Layout**: Narrow centered form
|
||
|
||
**Elements**:
|
||
- Breadcrumb: "← Back to Epics" → `/boards/:id/epics`
|
||
- Heading: "Create New Epic"
|
||
- **Form fields**:
|
||
- **Name** — text input (required), placeholder "Epic name"
|
||
- **Description** — textarea, placeholder "Brief description"
|
||
- **Color** — color picker or preset color swatches (hex input)
|
||
- **Rich Text Content** — Slate.js rich text editor with toolbar (bold, italic, lists, headings, links, images)
|
||
- **Parent Epic** — dropdown select (nullable, "None" option)
|
||
- **Completed List** — dropdown select (which list means "done")
|
||
- **Buttons**: "Create Epic" (blue-600), "Cancel" (gray-600)
|
||
|
||
---
|
||
|
||
### PAGE 11: Edit Epic (`/boards/:id/epics/:epicId/edit`)
|
||
|
||
**Purpose**: Edit an existing epic
|
||
|
||
**Layout**: Same as Create Epic, pre-filled with existing data
|
||
|
||
**Additional fields**:
|
||
- **Closed** — toggle "Mark epic as completed/closed"
|
||
|
||
---
|
||
|
||
### PAGE 12: Epic Detail (`/boards/:id/epics/:epicId`)
|
||
|
||
**Purpose**: View full epic details with progress and linked cards
|
||
|
||
**Layout**: Narrow centered layout
|
||
|
||
**Elements**:
|
||
- Breadcrumb: "← Back to Epics"
|
||
- **Header**:
|
||
- Epic name (h1) with color dot
|
||
- Description (gray-300)
|
||
- Status badge: Open/Closed
|
||
- "Edit" button → edit page
|
||
- **Progress Section**:
|
||
- Progress bar showing `completed_cards_count / card_count`
|
||
- Percentage text
|
||
- **Rich Text Content**: Rendered Slate.js content (formatted text, images, links)
|
||
- **Linked Cards**:
|
||
- List of cards assigned to this epic
|
||
- Each card shows: name, current list, labels, due date
|
||
- Click card → navigates to card detail
|
||
- **Child Epics** (if any):
|
||
- Nested list of sub-epics with same info
|
||
- **Attachments** (if any):
|
||
- File list with preview/download
|
||
|
||
---
|
||
|
||
### PAGE 13: Board Wikis (`/boards/:id/wikis`)
|
||
|
||
**Purpose**: View and manage all wiki pages for a board
|
||
|
||
**Layout**: Wide page layout with BoardSidebar
|
||
|
||
**Elements**:
|
||
- Breadcrumb: "← Back to Board" → `/boards/:id`
|
||
- Heading: "Wikis"
|
||
- Button: "+ New Wiki" (blue-600) → `/boards/:id/wikis/new`
|
||
- **Wiki list/grid**:
|
||
- Each wiki card shows:
|
||
- **Wiki name** (bold, links to detail)
|
||
- **Summary** (truncated, gray-400)
|
||
- **Category** badge (if set)
|
||
- **Tags** as small pills/chips
|
||
- **Author**: Created by [username]
|
||
- **Last updated**: Relative date
|
||
- **Actions**: Edit (pencil), Delete (trash)
|
||
- **Empty state**: "No wiki pages yet. Create a wiki to document your project."
|
||
|
||
---
|
||
|
||
### PAGE 14: Create Wiki (`/boards/:id/wikis/new`)
|
||
|
||
**Purpose**: Create a new wiki page
|
||
|
||
**Layout**: Wide page layout (to accommodate rich text editor)
|
||
|
||
**Elements**:
|
||
- Breadcrumb: "← Back to Wikis" → `/boards/:id/wikis`
|
||
- Heading: "Create New Wiki"
|
||
- **Form fields**:
|
||
- **Name** — text input (required), placeholder "Wiki page title"
|
||
- **Slug** — text input, auto-generated from name, editable, placeholder "url-friendly-slug"
|
||
- **Summary** — textarea, placeholder "Brief description"
|
||
- **Category** — text input, placeholder "Category (optional)"
|
||
- **Tags** — tag input (add/remove tags, shown as chips)
|
||
- **Content** — Slate.js rich text editor (full width):
|
||
- Toolbar: Bold, Italic, Underline, Strikethrough, Headings (H1-H3), Bulleted List, Numbered List, Link, Image, Code Block, Quote
|
||
- Large editable area
|
||
- **Buttons**: "Create Wiki" (blue-600), "Cancel" (gray-600)
|
||
|
||
---
|
||
|
||
### PAGE 15: Edit Wiki (`/boards/:id/wikis/:wikiId/edit`)
|
||
|
||
**Purpose**: Edit an existing wiki page
|
||
|
||
**Layout**: Same as Create Wiki, pre-filled with existing data
|
||
|
||
---
|
||
|
||
### PAGE 16: Wiki Detail (`/boards/:id/wikis/:wikiId`)
|
||
|
||
**Purpose**: View a wiki page's content
|
||
|
||
**Layout**: Narrow centered layout
|
||
|
||
**Elements**:
|
||
- Breadcrumb: "← Back to Wikis"
|
||
- **Header**:
|
||
- Wiki name (h1)
|
||
- Category badge (if set)
|
||
- Tags as colored chips
|
||
- Summary text (gray-300, italic)
|
||
- Metadata: "Created by [author] on [date] • Last updated [date] by [editor]"
|
||
- "Edit" button → edit page
|
||
- **Content**: Rendered Slate.js rich text (headings, paragraphs, lists, images, links, code blocks, quotes)
|
||
- **Linked Entities** (if any):
|
||
- "Linked Cards" section: list of linked cards with name and link
|
||
- "Linked Epics" section: list of linked epics with name and link
|
||
|
||
---
|
||
|
||
## 5. Modal Catalog
|
||
|
||
### Create List Modal
|
||
- **Triggered**: "+ Add List" button on board detail
|
||
- **Fields**: List Name (text input)
|
||
- **Actions**: "Create List" (blue-600), "Cancel"
|
||
|
||
### Edit List Modal
|
||
- **Triggered**: Rename option from list dropdown menu
|
||
- **Fields**: List Name (text input, pre-filled)
|
||
- **Actions**: "Save" (blue-600), "Cancel"
|
||
|
||
### Delete List Modal
|
||
- **Triggered**: Delete option from list dropdown menu
|
||
- **Content**: "Are you sure you want to delete '[list name]'? All cards in this list will be permanently deleted."
|
||
- **Actions**: "Delete" (red-600), "Cancel"
|
||
|
||
### Create Card Modal
|
||
- **Triggered**: "+ Add a card" button at bottom of a list
|
||
- **Fields**: Card Name (text input, required), Description (textarea, optional)
|
||
- **Actions**: "Create Card" (blue-600), "Cancel"
|
||
|
||
### Edit Card Modal
|
||
- **Triggered**: Edit action on card
|
||
- **Fields**: Card Name (text input), Description (textarea)
|
||
- **Actions**: "Save" (blue-600), "Cancel"
|
||
|
||
### Delete Card Modal
|
||
- **Triggered**: Delete action from card dropdown
|
||
- **Content**: "Are you sure you want to delete '[card name]'? This action cannot be undone."
|
||
- **Actions**: "Delete" (red-600), "Cancel"
|
||
|
||
### Card Preview Modal
|
||
- **Triggered**: Clicking a card on the Kanban board
|
||
- **Content**: Compact card view with name, description, labels, badges
|
||
- **Actions**: "View Full Details" (navigates to card detail), "Close"
|
||
|
||
### Create Linked Card Modal
|
||
- **Triggered**: "Create Linked Card" from card action dropdown
|
||
- **Purpose**: Create a new card and automatically link it as a child
|
||
- **Fields**: Card Name (text input), Description (textarea)
|
||
- **Actions**: "Create & Link" (blue-600), "Cancel"
|
||
|
||
### Link Existing Card Modal
|
||
- **Triggered**: "Link Existing Card" from card action dropdown
|
||
- **Purpose**: Search and select an existing card on the board to link
|
||
- **Fields**: Search input, list of matching cards with radio buttons
|
||
- **Actions**: "Link Card" (blue-600), "Cancel"
|
||
|
||
### Unlink Card Modal
|
||
- **Triggered**: "Unlink" button on a linked card
|
||
- **Content**: "Are you sure you want to unlink '[card name]' from '[parent card name]'?"
|
||
- **Actions**: "Unlink" (red-600), "Cancel"
|
||
|
||
### Create Checklist Modal
|
||
- **Triggered**: "Add Checklist" button in card checklists section
|
||
- **Fields**: Checklist Name (text input)
|
||
- **Actions**: "Add" (blue-600), "Cancel"
|
||
|
||
### Delete Checklist Modal
|
||
- **Triggered**: Delete button on a checklist
|
||
- **Content**: "Are you sure you want to delete the checklist '[name]'? All items will be removed."
|
||
- **Actions**: "Delete" (red-600), "Cancel"
|
||
|
||
### Edit Check Item Modal
|
||
- **Triggered**: Edit action on a checklist item
|
||
- **Fields**: Item Name (text input)
|
||
- **Actions**: "Save" (blue-600), "Cancel"
|
||
|
||
### Create Label Modal
|
||
- **Triggered**: "Create new label" option in label picker
|
||
- **Fields**: Label Name (text input), Color (color swatches picker)
|
||
- **Actions**: "Create" (blue-600), "Cancel"
|
||
|
||
---
|
||
|
||
## 6. Key User Flows
|
||
|
||
### Flow 1: Registration & First Board
|
||
1. User visits `/home` → clicks "Get Started"
|
||
2. Fills registration form on `/register` → submits
|
||
3. Auto-logged in → redirected to `/boards`
|
||
4. Empty state shown → clicks "+ New Board"
|
||
5. Enters board name + description → clicks "Create Board"
|
||
6. Redirected to new board `/boards/:id` → empty board with no lists
|
||
7. Clicks "+ Add List" → enters list name (e.g., "To Do", "In Progress", "Done")
|
||
8. Repeats for more lists
|
||
|
||
### Flow 2: Creating and Managing Cards
|
||
1. On board view, clicks "+ Add a card" in a list
|
||
2. Enters card name → creates card
|
||
3. Clicks card → card preview modal opens
|
||
4. Clicks "View Full Details" → navigates to Card Detail page
|
||
5. Adds description, assigns labels, sets due date
|
||
6. Adds checklist with items, checks off items
|
||
7. Adds comments
|
||
8. Uploads file attachments
|
||
9. Returns to board → sees updated card with badges
|
||
|
||
### Flow 3: Card Linking
|
||
1. On Card Detail page, clicks action dropdown (⋮)
|
||
2. Selects "Create Linked Card" → enters name/description → creates
|
||
3. OR selects "Link Existing Card" → searches board cards → selects one → links
|
||
4. Linked cards shown in "Linked Cards" section
|
||
5. Can unlink via × button → confirms in Unlink Card Modal
|
||
|
||
### Flow 4: Epic Management
|
||
1. From board sidebar, clicks "Epics"
|
||
2. On epics page, clicks "+ New Epic"
|
||
3. Fills in name, description, color, rich content, assigns completed list
|
||
4. On board view, opens a card → assigns the epic
|
||
5. Epic metrics auto-update (card count, completion progress)
|
||
|
||
### Flow 5: Wiki Documentation
|
||
1. From board sidebar, clicks "Wikis"
|
||
2. Clicks "+ New Wiki"
|
||
3. Enters title, summary, category, tags
|
||
4. Writes rich text content in editor
|
||
5. Saves → views rendered wiki page
|
||
6. Can link wiki to cards/epics
|
||
|
||
### Flow 6: Drag & Drop on Board
|
||
1. User hovers over a card → cursor changes to grab
|
||
2. Drags card to new position in same list OR to different list
|
||
3. Ghost overlay follows cursor
|
||
4. On drop, card moves to new position/list
|
||
5. Lists can also be reordered by dragging column headers
|
||
|
||
---
|
||
|
||
## 7. Component Inventory
|
||
|
||
### Reusable UI Components
|
||
| Component | Description |
|
||
|-----------|-------------|
|
||
| **Navbar** | Top navigation with logo, links, auth controls |
|
||
| **BoardSidebar** | Fixed right-side nav for board sections |
|
||
| **KanbanColumn** | Vertical list container with header and card list |
|
||
| **SortableKanbanColumn** | Drag-enabled version of KanbanColumn |
|
||
| **KanbanCard** | Card summary shown in columns (name, badges, labels) |
|
||
| **BoardCard** | Board summary card for the boards listing page |
|
||
| **CardPreviewModal** | Quick card preview popup |
|
||
| **CardSidebar** | Right sidebar on card detail (due date, list, etc.) |
|
||
| **CardLabels** | Label chips display + picker |
|
||
| **LabelDropdown** | Dropdown for selecting/toggling labels |
|
||
| **CardEpics** | Epic assignment display + picker |
|
||
| **CardLinks** | Linked cards display with unlink action |
|
||
| **CardChecklists** | Checklists with checkable items, progress bars |
|
||
| **CardComments** | Comment thread with add/edit/delete |
|
||
| **CardAttachments** | File upload area + attachment list |
|
||
| **CardActionDropdown** | Context menu (⋮) for card actions |
|
||
| **RichTextEditor** | Slate.js rich text editor with formatting toolbar |
|
||
| **RichTextContent** | Read-only rich text renderer |
|
||
| **SecureImage** | Authenticated image component (MinIO-backed) |
|
||
| **WidePageLayout** | Full-width page wrapper with standard padding |
|
||
| **NarrowPageLayout** | Centered narrow content wrapper (~900px max) |
|
||
| **DeleteCardModal** | Confirmation dialog for card deletion |
|
||
| **DeleteListModal** | Confirmation dialog for list deletion |
|
||
| **CreateListModal** | Form modal for creating a new list |
|
||
| **EditListModal** | Form modal for editing a list name |
|
||
| **CreateCardModal** | Form modal for creating a new card |
|
||
| **EditCardModal** | Form modal for editing card name/description |
|
||
| **CreateLinkedCardModal** | Form modal for creating + linking a card |
|
||
| **LinkExistingCardModal** | Search/select modal for linking existing cards |
|
||
| **UnlinkCardModal** | Confirmation modal for unlinking cards |
|
||
| **CreateChecklistModal** | Form modal for adding a checklist |
|
||
| **DeleteChecklistModal** | Confirmation modal for deleting a checklist |
|
||
| **EditCheckItemModal** | Form modal for editing a checklist item |
|
||
| **CreateLabelModal** | Form modal for creating a new label |
|
||
| **ProtectedRoute** | Auth guard wrapper component |
|
||
|
||
---
|
||
|
||
## 8. States to Design
|
||
|
||
For each page, please design these states:
|
||
|
||
1. **Loading state**: Skeleton/spinner while data loads
|
||
2. **Empty state**: Helpful message + CTA when no data exists
|
||
3. **Populated state**: Normal data display
|
||
4. **Error state**: Error message display (toast notification pattern)
|
||
5. **Mobile responsive**: Stack layouts vertically, hamburger nav, full-width cards
|
||
|
||
### Special States
|
||
- **Card dragging**: Ghost overlay of card at cursor position
|
||
- **Column dragging**: Ghost overlay of column at cursor position
|
||
- **Inline editing**: Input fields replacing display text (card name, description)
|
||
- **Modal overlay**: Dark backdrop with centered modal card
|
||
- **Toast notifications**: Top-right corner, auto-dismiss, types: success (green), error (red), info (blue)
|
||
- **Archived items**: Dimmed with "Archived" badge
|
||
|
||
---
|
||
|
||
## 9. Responsive Breakpoints
|
||
|
||
| Breakpoint | Width | Layout Changes |
|
||
|-----------|-------|----------------|
|
||
| Mobile | < 640px | Single column, hamburger nav, stacked cards, full-width modals |
|
||
| Tablet | 640-1024px | 2-column grids, collapsible sidebar |
|
||
| Desktop | > 1024px | Full kanban horizontal scroll, 3-column card detail, sidebar visible |
|
||
|
||
---
|
||
|
||
## 10. Design Priorities
|
||
|
||
1. **Board Detail (Kanban View)** — This is the most-used page; prioritize its drag-and-drop UX
|
||
2. **Card Detail** — Second most important; dense information layout
|
||
3. **Card Detail Modals** — Many user workflows happen through modals
|
||
4. **Boards List** — Entry point after login
|
||
5. **Epic Detail & Wiki Detail** — Supporting features
|
||
6. **Auth Pages** — Simple but must look polished
|
||
7. **Forms (Create/Edit)** — Standard patterns, focus on rich text editor UX
|
||
|
||
---
|
||
|
||
*End of design brief. Use this document to generate complete UI flows and page designs for the Taskboard application.* |