Visual Guide: Create Tasks from Kanban (dash-9)

🎨 User Interface Changes

BEFORE (Without Feature)

┌─────────────────────────────────────────┐
│ Kanban Modal                            │
├─────────────────────────────────────────┤
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │💡 Предло │ │🕐 Одобре │ │✓ Сделано │ │
│ │  жения   │ │   но     │ │          │ │
│ │   [3]    │ │   [5]    │ │   [2]    │ │  ← Only count badge
│ ├──────────┤ ├──────────┤ ├──────────┤ │
│ │ Task 1   │ │ Task 4   │ │ Task 7   │ │
│ │ Task 2   │ │ Task 5   │ │ Task 8   │ │
│ │ Task 3   │ │ Task 6   │ │          │ │
│ └──────────┘ └──────────┘ └──────────┘ │
└─────────────────────────────────────────┘

AFTER (With Feature)

┌─────────────────────────────────────────┐
│ Kanban Modal                            │
├─────────────────────────────────────────┤
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │💡 Предло │ │🕐 Одобре │ │✓ Сделано │ │
│ │  жения   │ │   но     │ │          │ │
│ │  [+] [3] │ │  [+] [5] │ │  [+] [2] │ │  ← NEW: "+" button added!
│ ├──────────┤ ├──────────┤ ├──────────┤ │
│ │ Task 1   │ │ Task 4   │ │ Task 7   │ │
│ │ Task 2   │ │ Task 5   │ │ Task 8   │ │
│ │ Task 3   │ │ Task 6   │ │          │ │
│ └──────────┘ └──────────┘ └──────────┘ │
└─────────────────────────────────────────┘

---

🖱️ User Interaction Flow

Step 1: Click "+" Button

User clicks "+" in "Одобрено" column
         ↓
┌─────────────────┐
│ 🕐 Одобрено     │
│   [+] [5] ←────── Click here
└─────────────────┘

Step 2: Modal Opens

┌──────────────────────────────────────┐
│ + Новая задача                   [X] │
├──────────────────────────────────────┤
│                                      │
│ Колонка: Одобрено                    │ ← Status pre-filled
│                                      │
│ Название задачи *                    │
│ ┌──────────────────────────────────┐ │ ← Auto-focused
│ │ Fix API bug                      │ │
│ └──────────────────────────────────┘ │
│                                      │
│ Описание                             │
│ ┌──────────────────────────────────┐ │
│ │ API returns 500 on user login    │ │
│ └──────────────────────────────────┘ │
│                                      │
│ Приоритет                            │
│ ┌──────────────────────────────────┐ │
│ │ Высокий ▼                        │ │
│ └──────────────────────────────────┘ │
│                                      │
│ Теги                                 │
│ ┌──────────────────────────────────┐ │
│ │ bug, api, urgent                 │ │
│ └──────────────────────────────────┘ │
│ Разделяйте теги запятыми             │
│                                      │
│ ┌────────────────┐  ┌──────────┐    │
│ │ Создать задачу │  │ Отмена   │    │
│ └────────────────┘  └──────────┘    │
│                                      │
│ Ctrl+Enter для быстрого создания     │
└──────────────────────────────────────┘

Step 3: Click "Создать задачу"

Button changes to loading state:
┌────────────────────┐
│ ⟳ Создание...     │ ← Spinner + disabled
└────────────────────┘

Step 4: Success!

Toast notification appears:
┌────────────────────────────────────┐
│ ✓ Задача создана                   │
│ "Fix API bug" добавлена в колонку  │
│ "Одобрено"                         │
└────────────────────────────────────┘
         +
Task appears in column:
┌──────────────────┐
│ 🕐 Одобрено      │
│   [+] [6] ←──────── Count increased!
├──────────────────┤
│ Task 4           │
│ Task 5           │
│ Task 6           │
│ ┌──────────────┐ │
│ │ Fix API bug  │ │ ← NEW task added!
│ │ 🔴 Высокий   │ │
│ └──────────────┘ │
└──────────────────┘

---

🎨 Component Breakdown

CreateTaskModal Component

CreateTaskModal.tsx
├── Dialog wrapper
├── Header
│   ├── Title: "Новая задача"
│   └── Close button [X]
├── Body
│   ├── Status info box (read-only)
│   ├── Title input (required, auto-focused)
│   ├── Description textarea (optional)
│   ├── Priority select (dropdown)
│   ├── Tags input (comma-separated)
│   ├── Action buttons
│   │   ├── Create button (primary)
│   │   └── Cancel button (secondary)
│   └── Keyboard hint
└── Form handlers
    ├── onSubmit → POST to API
    ├── onSuccess → Optimistic update + toast
    └── onError → Toast + keep form open

---

🔄 Data Flow

User clicks "+"
    ↓
handleOpenCreateModal(status)
    ↓
Set createModalOpen = true
Set createModalStatus = 'approved' (example)
    ↓
CreateTaskModal renders
    ↓
User fills form
    ↓
User clicks "Создать задачу"
    ↓
handleSubmit()
    ↓
POST /api/projects/system/tasks
    {
      title: "Fix API bug",
      description: "API returns 500...",
      priority: "high",
      status: "approved",
      tags: ["bug", "api", "urgent"]
    }
    ↓
Backend validates & saves
    ↓
Response 201:
    {
      success: true,
      task: {
        id: "system-1772041680234-891",
        title: "Fix API bug",
        ...
        createdAt: "2026-02-25T17:47:00.123Z",
        updatedAt: "2026-02-25T17:47:00.123Z"
      }
    }
    ↓
onTaskCreated(newTask)
    ↓
Optimistic UI update:
queryClient.setQueryData(...) → Add task to list
    ↓
Query invalidation:
queryClient.invalidateQueries(...) → Refetch from server
    ↓
Toast success notification
    ↓
Close modal, reset form

---

🎯 Key Features Illustrated

1. Auto-Focus

Modal opens → Title input auto-focused
┌─────────────────────┐
│ Название задачи *   │
│ ┌─────────────────┐ │
│ │ [cursor here]   │ │ ← Ready to type immediately
│ └─────────────────┘ │
└─────────────────────┘

2. Status Pre-Fill

Click "+" in "Одобрено" column
         ↓
Modal shows:
┌────────────────────────┐
│ Колонка: Одобрено      │ ← Status auto-set
└────────────────────────┘
(User doesn't select status manually)

3. Priority Dropdown

┌──────────────────┐
│ Приоритет        │
│ ┌──────────────┐ │
│ │ Средний   ▼  │ │ ← Default: medium
│ └──────────────┘ │
└──────────────────┘
      ↓ (click)
┌──────────────────┐
│ Низкий           │
│ Средний        ← │ (selected)
│ Высокий          │
│ Критичный        │
└──────────────────┘

4. Tags Input

Input:
┌──────────────────────────┐
│ bug, api, urgent         │
└──────────────────────────┘

Parsed to:
["bug", "api", "urgent"]

5. Keyboard Shortcuts

Ctrl + Enter → Submit form
Esc          → Close modal
Tab          → Navigate fields

---

🔍 Validation Examples

Valid Input ✅

Title:       "Fix login bug"     (≥ 3 chars)
Description: "Users can't log..." (optional)
Priority:    "high"              (valid option)
Status:      "approved"          (auto-set)
Tags:        ["bug", "login"]    (valid array)

Result: Task created successfully

Invalid Input ❌

Title:       "Ab"                (< 3 chars)
Description: ""
Priority:    "medium"
Status:      "approved"
Tags:        []

Result: Toast error
"Название должно содержать минимум 3 символа"
Submit button disabled

---

🎨 Visual States

Idle State

┌────────────────┐
│ Создать задачу │ ← Enabled, clickable
└────────────────┘

Loading State

┌────────────────┐
│ ⟳ Создание... │ ← Spinner, disabled, opacity 50%
└────────────────┘

Success State

(Modal closes)
    +
┌─────────────────────────┐
│ ✓ Задача создана        │ ← Toast notification
│ "..." добавлена в "..." │   (green, 3 seconds)
└─────────────────────────┘

Error State

(Modal stays open)
    +
┌──────────────────────────┐
│ ✗ Ошибка создания        │ ← Toast notification
│ Failed to save task      │   (red, 4 seconds)
└──────────────────────────┘

---

📱 Responsive Behavior

Desktop (Wide Screen)

┌─────────────────────────────────────────┐
│  Modal: 2xl (max-width: 48rem)          │
│  Form: Full width                       │
│  Buttons: Flex row (Create | Cancel)    │
└─────────────────────────────────────────┘

Mobile (Narrow Screen)

┌──────────────────┐
│  Modal: 90% vw   │
│  Form: Stacked   │
│  Buttons: Stack  │
│  ┌────────────┐  │
│  │ Создать    │  │
│  └────────────┘  │
│  ┌────────────┐  │
│  │ Отмена     │  │
│  └────────────┘  │
└──────────────────┘

---

🎯 Accessibility

• ✅ Auto-focus on primary input
• ✅ Tab navigation between fields
• ✅ Enter/Escape keyboard shortcuts
• ✅ ARIA labels on inputs
• ✅ Required field markers (*)
• ✅ Error messages visible
• ✅ Loading states announced
• ✅ Success feedback via toast

---

🚀 Performance

• ⚡ Optimistic UI updates (instant feedback)
• ⚡ Background query invalidation (fresh data)
• ⚡ Minimal re-renders (React Query cache)
• ⚡ Form reset on close (no memory leaks)
• ⚡ Debounced API calls (not implemented but possible)

---

📊 Before/After Comparison

Feature	Before	After
Create task	Edit JSON manually	Click "+" button
User steps	5+ steps (find file, edit, save, reload)	3 steps (click "+", fill form, submit)
Error prone	High (JSON syntax errors)	Low (form validation)
Speed	Slow (manual editing)	Fast (one-click modal)
UX	Developer-only	User-friendly
Validation	None	Built-in

---

Visual guide complete! Feature is fully documented and ready for demo. 🎨