canban

src/context/AchievementNotificationContext.jsx

@@ -131,7 +131,7 @@ const resetDownstreamNodesBackground = (startNodeId, nodes, edges) => {
           ...node,
           data: {
             ...node.data,
-            status: 'Pending'
+            status: 'Todo'
           }
         };
       }
@@ -307,7 +307,7 @@ export const AchievementNotificationProvider = ({ children }) => {
                           ...n,
                           data: {
                             ...n.data,
-                            status: 'Pending',
+                            status: 'Todo',
                             lastResetTime: new Date().toISOString()
                           }
                         };
@@ -315,7 +315,7 @@ export const AchievementNotificationProvider = ({ children }) => {
                       return n;
                     });
                     updatedNodes = resetDownstreamNodesBackground(nodeId, updatedNodes, edges);
-                    knownHabitStatuses.current.set(nodeId, 'Pending');
+                    knownHabitStatuses.current.set(nodeId, 'Todo');
                     newlyRechargedHabits.push(node.data?.label || t('canvas.habit'));
                   }
                 }
@@ -339,7 +339,7 @@ export const AchievementNotificationProvider = ({ children }) => {
                         ...n,
                         data: {
                           ...n.data,
-                          status: 'Pending',
+                          status: 'Todo',
                           lastResetTime: new Date().toISOString()
                         }
                       };
@@ -350,17 +350,17 @@ export const AchievementNotificationProvider = ({ children }) => {
                   // 2. Reset downstream nodes
                   updatedNodes = resetDownstreamNodesBackground(nodeId, updatedNodes, edges);
 
-                  knownHabitStatuses.current.set(nodeId, 'Pending');
+                  knownHabitStatuses.current.set(nodeId, 'Todo');
                   newlyRechargedHabits.push(node.data?.label || t('canvas.habit'));
                 } else {
                   knownHabitStatuses.current.set(nodeId, 'Done');
                 }
-              } else if (currentStatus === 'Pending') {
+              } else if (currentStatus === 'Pending' || currentStatus === 'Todo') {
                 if (prevStatus === 'Done') {
-                  console.log(`[HabitTrackerBackground] Habit transitioned to Pending externally: "${node.data.label}"`);
+                  console.log(`[HabitTrackerBackground] Habit transitioned to Todo/Pending externally: "${node.data.label}"`);
                   newlyRechargedHabits.push(node.data?.label || t('canvas.habit'));
                 }
-                knownHabitStatuses.current.set(nodeId, 'Pending');
+                knownHabitStatuses.current.set(nodeId, currentStatus);
               }
             }
           }

src/features/canvas/components/nodes/HabitNode.jsx

@@ -26,7 +26,7 @@ const HabitNode = ({ id, data, selected }) => {
     
     if (data.updateNodeData) {
       data.updateNodeData(id, {
-        status: 'Pending',
+        status: 'Todo',
         lastResetTime: new Date().toISOString()
       });
     } else {
@@ -37,7 +37,7 @@ const HabitNode = ({ id, data, selected }) => {
               ...node,
               data: {
                 ...node.data,
-                status: 'Pending',
+                status: 'Todo',
                 lastResetTime: new Date().toISOString()
               }
             };
@@ -50,7 +50,7 @@ const HabitNode = ({ id, data, selected }) => {
 
   const toggleDone = (e) => {
     e.stopPropagation();
-    const newStatus = data.status === 'Done' ? 'Pending' : 'Done';
+    const newStatus = data.status === 'Done' ? 'Todo' : 'Done';
     if (data.updateNodeData) {
       data.updateNodeData(id, { status: newStatus });
     } else {
@@ -245,7 +245,7 @@ const HabitNode = ({ id, data, selected }) => {
                 ? 'bg-green-500/10 text-success border-success/30' 
                 : 'bg-amber-500/10 text-[#f59e0b] border-[#f59e0b]/30'
             }`}>
-              {isDone ? t('canvas.habit_status_done') : t('canvas.habit_status_pending')}
+              {isDone ? t('canvas.habit_status_done', 'Done') : t('canvas.habit_status_todo', 'Todo')}
             </span>
           </div>
 

src/features/canvas/components/nodes/SketchNode.jsx

@@ -61,7 +61,7 @@ const SketchNode = ({ id, data, selected }) => {
       return;
     }
 
-    const newStatus = data.status === 'Done' ? 'Pending' : 'Done';
+    const newStatus = data.status === 'Done' ? 'Todo' : 'Done';
     const newProgress = newStatus === 'Done' ? 100 : 0;
     
     if (data.updateNodeData) {
@@ -97,12 +97,12 @@ const SketchNode = ({ id, data, selected }) => {
         setShowWarning(false);
       }, 3000);
       
-      // Cap progress at 99% and status to Pending
-      updateProgress(99, 'Pending');
+      // Cap progress at 99% and status to In Progress
+      updateProgress(99, 'In Progress');
       return;
     }
 
-    const newStatus = val === 100 ? 'Done' : 'Pending';
+    const newStatus = val === 100 ? 'Done' : (val === 0 ? 'Todo' : 'In Progress');
     updateProgress(val, newStatus);
   };
 
@@ -127,7 +127,10 @@ const SketchNode = ({ id, data, selected }) => {
     switch (status) {
       case 'Done': return 'bg-green-500/10 text-success border-success/30';
       case 'Blocked': return 'bg-red-500/10 text-error border-error/30';
-      case 'Pending': return 'bg-blue-500/10 text-secondary border-secondary/30';
+      case 'In Progress': return 'bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/30';
+      case 'Review': return 'bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/30';
+      case 'Todo':
+      case 'Pending': return 'bg-secondary/15 text-primary/70 border-primary/20';
       default: return 'bg-surface-container-lowest text-primary border-primary';
     }
   };

src/features/canvas/hooks/useCanvasLogic.js

@@ -312,9 +312,52 @@ export const useCanvasLogic = (projectId, user) => {
     setNodes((nds) => {
       return nds.map((n) => {
         if (n.id === nodeId) {
-          const updated = { ...n, data: { ...n.data, ...newData } };
-          if (newData.isPinned !== undefined) {
-            updated.draggable = !newData.isPinned;
+          // Automatic status and progress coupling
+          let coupledData = { ...newData };
+          const currentStatus = n.data?.status || 'Todo';
+          const currentProgress = n.data?.progress !== undefined ? n.data.progress : 0;
+          
+          if (coupledData.status !== undefined || coupledData.progress !== undefined) {
+            const nextStatus = coupledData.status !== undefined ? coupledData.status : currentStatus;
+            const nextProgress = coupledData.progress !== undefined ? Number(coupledData.progress) : currentProgress;
+            
+            if (coupledData.status !== undefined && coupledData.progress === undefined) {
+              // Status changed, progress was not
+              if (nextStatus === 'Done') {
+                coupledData.progress = 100;
+              } else if (nextStatus === 'Todo' || nextStatus === 'Pending') {
+                coupledData.progress = 0;
+              } else if (nextStatus === 'In Progress' && (currentProgress === 0 || currentProgress === 100)) {
+                coupledData.progress = 50;
+              } else if (nextStatus === 'Review' && (currentProgress === 0 || currentProgress === 100)) {
+                coupledData.progress = 90;
+              }
+            } else if (coupledData.progress !== undefined && coupledData.status === undefined) {
+              // Progress changed, status was not
+              if (nextProgress === 100) {
+                coupledData.status = 'Done';
+              } else if (nextProgress === 0) {
+                coupledData.status = 'Todo';
+              } else if (currentStatus === 'Done' || currentStatus === 'Todo' || currentStatus === 'Pending') {
+                coupledData.status = 'In Progress';
+              }
+            } else if (coupledData.progress !== undefined && coupledData.status !== undefined) {
+              // Both changed, align them
+              if (coupledData.status === 'Done') {
+                coupledData.progress = 100;
+              } else if (coupledData.status === 'Todo' || coupledData.status === 'Pending') {
+                coupledData.progress = 0;
+              } else if (coupledData.progress === 100) {
+                coupledData.status = 'Done';
+              } else if (coupledData.progress === 0) {
+                coupledData.status = 'Todo';
+              }
+            }
+          }
+
+          const updated = { ...n, data: { ...n.data, ...coupledData } };
+          if (coupledData.isPinned !== undefined) {
+            updated.draggable = !coupledData.isPinned;
           }
           return updated;
         }
@@ -578,6 +621,8 @@ export const useCanvasLogic = (projectId, user) => {
             let height = n.height;
             let nodeData = n.data || '';
             let assignees = [];
+            let tags = [];
+            let status = n.state === 1 ? 'Done' : 'Todo';
 
             if (n.type === 'condition') {
               if (n.decision && n.decision.startsWith('{')) {
@@ -610,6 +655,8 @@ export const useCanvasLogic = (projectId, user) => {
                   lastResetTime = parsed.lastResetTime;
                   createdAt = parsed.createdAt || createdAt;
                   description = parsed.description || description;
+                  tags = parsed.tags || [];
+                  status = parsed.status || (n.state === 1 ? 'Done' : 'Todo');
                   decision = undefined;
                 } catch (e) {
                   console.error('Failed to parse habit decision JSON', e);
@@ -627,6 +674,8 @@ export const useCanvasLogic = (projectId, user) => {
                   isPinned = parsed.isPinned !== undefined ? !!parsed.isPinned : isPinned;
                   width = parsed.width || width;
                   height = parsed.height || height;
+                  tags = parsed.tags || [];
+                  status = parsed.status || (n.state === 1 ? 'Done' : 'Todo');
                   if (parsed.assignees && Array.isArray(parsed.assignees)) {
                     assignees = parsed.assignees;
                   } else if (parsed.assignee) {
@@ -640,7 +689,8 @@ export const useCanvasLogic = (projectId, user) => {
 
             const dataObj = { 
               label: n.label, 
-              status: n.state === 1 ? 'Done' : 'Pending',
+              status: status,
+              tags: tags,
               decision,
               options,
               selectedOptions,
@@ -797,7 +847,10 @@ export const useCanvasLogic = (projectId, user) => {
                   resetRule: n.data.resetRule || { type: 'daily', time: '00:00' },
                   lastResetTime: n.data.lastResetTime,
                   createdAt: n.data.createdAt || new Date().toISOString(),
-                  description: n.data.description || ''
+                  description: n.data.description || '',
+                  tags: n.data.tags || [],
+                  status: n.data.status || 'Todo',
+                  progress: n.data.progress || 0
                 })
               : n.type === 'sketch'
                 ? JSON.stringify({
@@ -807,7 +860,9 @@ export const useCanvasLogic = (projectId, user) => {
                     decision: n.data.decision || 'bottom',
                     assignees: n.data.assignees || [],
                     color: n.data.color,
-                    isPinned: !!n.data.isPinned
+                    isPinned: !!n.data.isPinned,
+                    tags: n.data.tags || [],
+                    status: n.data.status || 'Todo'
                   })
               : n.type === 'comment'
                 ? JSON.stringify({
@@ -1194,8 +1249,9 @@ export const useCanvasLogic = (projectId, user) => {
     const id = crypto.randomUUID();
     const nodeData = {
       label: '',
-      status: 'Pending',
+      status: 'Todo',
       description: '',
+      tags: [],
       ...initialData
     };
 
@@ -1486,7 +1542,8 @@ export const useCanvasLogic = (projectId, user) => {
             position: { x: n.posX, y: n.posY },
             data: {
               label: n.label,
-              status: n.state === 1 ? 'Done' : 'Pending',
+              status: n.state === 1 ? 'Done' : 'Todo',
+              tags: [],
               decision,
               options,
               selectedOptions,
@@ -1575,7 +1632,7 @@ export const useCanvasLogic = (projectId, user) => {
               ...node,
               data: {
                 ...node.data,
-                status: 'Pending'
+                status: 'Todo'
               }
             };
           }
@@ -1624,7 +1681,7 @@ export const useCanvasLogic = (projectId, user) => {
                       ...n, 
                       data: { 
                         ...n.data, 
-                        status: 'Pending', 
+                        status: 'Todo', 
                         lastResetTime: new Date().toISOString() 
                       } 
                     } 

src/pages/CanvasPage.jsx

@@ -83,7 +83,7 @@ const getTransformForBoundsCustom = (bounds, width, height, minZoom, maxZoom, pa
 import Sidebar from '../components/Sidebar';
 import { useAuth } from '../context/AuthContext';
 import { useTheme } from '../context/ThemeContext';
-import { Maximize2, Play, Settings, Save, ChevronLeft, ChevronDown, ChevronUp, Loader2, Trash2, Target, GitFork, Image, X, Plus, Timer, Milestone, Share2, User, Copy, Scissors, Clipboard, Check, StickyNote, Pin, Type } from 'lucide-react';
+import { Maximize2, Play, Settings, Save, ChevronLeft, ChevronDown, ChevronUp, Loader2, Trash2, Target, GitFork, Image, X, Plus, Timer, Milestone, Share2, User, Copy, Scissors, Clipboard, Check, StickyNote, Pin, Type, Tag, Search, ListTodo, Map } from 'lucide-react';
 
 // Feature components
 import SketchNode from '../features/canvas/components/nodes/SketchNode';
@@ -515,6 +515,10 @@ const SketchSettingsModal = ({ node, onClose, onSave, collaborators = [] }) => {
   const [description, setDescription] = useState(node.data.description || '');
   const [showProgress, setShowProgress] = useState(!!node.data.showProgress);
   const [progress, setProgress] = useState(node.data.progress || 0);
+  const [status, setStatus] = useState(node.data.status || 'Todo');
+  const [tags, setTags] = useState(node.data.tags || []);
+  const [customTagInput, setCustomTagInput] = useState('');
+  const [isTagsExpanded, setIsTagsExpanded] = useState(false);
   const [assignees, setAssignees] = useState(node.data.assignees || []);
   const [isAssigneesExpanded, setIsAssigneesExpanded] = useState(false);
   const [color, setColor] = useState(node.data.color || (node.type === 'comment' ? 'yellow' : 'default'));
@@ -530,13 +534,40 @@ const SketchSettingsModal = ({ node, onClose, onSave, collaborators = [] }) => {
     white: { light: '#f5f5f4', dark: '#1c1917', borderLight: '#d6d3d1', borderDark: '#44403c' }
   };
 
+  const handleStatusChange = (newStatus) => {
+    setStatus(newStatus);
+    if (newStatus === 'Done') {
+      setProgress(100);
+    } else if (newStatus === 'Todo') {
+      setProgress(0);
+    } else {
+      if (progress === 100 || progress === 0) {
+        setProgress(newStatus === 'Review' ? 90 : 10);
+      }
+    }
+  };
+
+  const handleProgressChange = (newVal) => {
+    const numericVal = Number(newVal);
+    setProgress(numericVal);
+    if (numericVal === 100) {
+      setStatus('Done');
+    } else if (numericVal === 0) {
+      setStatus('Todo');
+    } else {
+      if (status === 'Done' || status === 'Todo') {
+        setStatus('In Progress');
+      }
+    }
+  };
+
   const handleSave = () => {
     let finalProgress = Number(progress);
-    let status = finalProgress === 100 ? 'Done' : 'Pending';
+    let finalStatus = status;
     
     if (node.type === 'sketch' && finalProgress === 100 && node.data.subgoals && node.data.subgoals.done < node.data.subgoals.total) {
       finalProgress = 99;
-      status = 'Pending';
+      finalStatus = 'In Progress';
       alert(t('canvas.subgoal_warning', 'Виконайте всі підцілі перед завершенням головної цілі!'));
     }
 
@@ -545,9 +576,10 @@ const SketchSettingsModal = ({ node, onClose, onSave, collaborators = [] }) => {
       description,
       showProgress: node.type === 'comment' ? false : showProgress,
       progress: node.type === 'comment' ? 0 : finalProgress,
-      status: node.type === 'comment' ? 'Pending' : status,
+      status: node.type === 'comment' ? 'Pending' : finalStatus,
       assignees,
-      color
+      color,
+      tags
     });
   };
 
@@ -630,7 +662,33 @@ const SketchSettingsModal = ({ node, onClose, onSave, collaborators = [] }) => {
             </div>
           </div>
 
-
+          {/* Goal Status Selector */}
+          {node.type !== 'comment' && (
+            <div>
+              <label className="block text-[11px] font-bold uppercase tracking-widest text-primary/60 mb-2">
+                {t('canvas.goal_status_label', 'Статус цілі')}
+              </label>
+              <div className="grid grid-cols-4 gap-1.5 bg-secondary/5 border-2 border-primary rounded-xl p-1.5">
+                {['Todo', 'In Progress', 'Review', 'Done'].map((st) => {
+                  const isSelected = status === st;
+                  let btnClass = isSelected 
+                    ? 'bg-primary text-on-primary shadow-[2px_2px_0px_0px_var(--color-primary)]'
+                    : 'text-primary/70 hover:bg-secondary/10 hover:text-primary';
+                  
+                  return (
+                    <button
+                      key={st}
+                      type="button"
+                      onClick={() => handleStatusChange(st)}
+                      className={`py-2 text-[10px] font-extrabold uppercase rounded-lg border border-transparent transition-all cursor-pointer ${btnClass}`}
+                    >
+                      {st === 'In Progress' ? 'Progress' : st}
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          )}
 
           {/* Assignees Input (Collapsible custom visual list) */}
           {node.type !== 'comment' && (
@@ -725,6 +783,117 @@ const SketchSettingsModal = ({ node, onClose, onSave, collaborators = [] }) => {
             </div>
           )}
 
+          {/* Goal Tags Editor */}
+          {node.type !== 'comment' && (
+            <div className="border-2 border-primary rounded-2xl p-4 bg-secondary/5 space-y-2">
+              <div 
+                onClick={() => setIsTagsExpanded(!isTagsExpanded)}
+                className="flex items-center justify-between cursor-pointer select-none"
+              >
+                <label className="block text-[11px] font-bold uppercase tracking-widest text-primary/60 cursor-pointer">
+                  {t('canvas.tags_label', 'Теги цілі')}
+                </label>
+                <div className="flex items-center gap-2">
+                  {!isTagsExpanded && tags.length > 0 && (
+                    <div className="flex flex-wrap gap-1 items-center max-w-[150px] justify-end">
+                      {tags.slice(0, 2).map((tg, i) => (
+                        <span key={i} className="text-[8px] font-extrabold px-1.5 py-0.5 rounded border border-primary/20 bg-secondary/15 text-primary">
+                          {tg}
+                        </span>
+                      ))}
+                      {tags.length > 2 && <span className="text-[8px] font-bold">+{tags.length - 2}</span>}
+                    </div>
+                  )}
+                  {isTagsExpanded ? <ChevronUp size={16} className="text-primary" /> : <ChevronDown size={16} className="text-primary" />}
+                </div>
+              </div>
+
+              {isTagsExpanded && (
+                <div className="space-y-3 pt-2 animate-fade-in">
+                  {/* Current Tags */}
+                  {tags.length > 0 ? (
+                    <div className="flex flex-wrap gap-1.5">
+                      {tags.map((tg, idx) => (
+                        <span
+                          key={idx}
+                          className="flex items-center gap-1.5 text-[10px] font-extrabold px-2.5 py-0.5 rounded-lg border-2 border-primary bg-surface-container-lowest text-primary shadow-[1px_1px_0px_0px_var(--color-primary)]"
+                        >
+                          <span>{tg}</span>
+                          <button
+                            type="button"
+                            onClick={() => setTags(tags.filter(t => t !== tg))}
+                            className="hover:text-red-500 font-extrabold ml-1 cursor-pointer"
+                          >
+                            &times;
+                          </button>
+                        </span>
+                      ))}
+                    </div>
+                  ) : (
+                    <p className="text-[10px] text-primary/40 italic">{t('canvas.no_tags', 'Немає тегів')}</p>
+                  )}
+
+                  {/* Quick default tags selector */}
+                  <div className="space-y-1">
+                    <span className="block text-[8px] font-bold uppercase tracking-wider text-primary/50">{t('canvas.quick_add_tags', 'Швидкі теги')}</span>
+                    <div className="flex flex-wrap gap-1 max-h-[70px] overflow-y-auto pr-1">
+                      {['Todo', 'In Progress', 'Done', 'Feature', 'Bug', 'Refactor', 'High', 'Medium', 'Low'].map(tg => {
+                        const isAdded = tags.includes(tg);
+                        return (
+                          <button
+                            key={tg}
+                            type="button"
+                            disabled={isAdded}
+                            onClick={() => setTags([...tags, tg])}
+                            className={`text-[9px] font-extrabold px-2 py-1 rounded-lg border-2 border-primary/20 transition-all ${
+                              isAdded 
+                                ? 'bg-secondary/20 text-primary/40 cursor-not-allowed border-transparent' 
+                                : 'bg-surface-container-lowest text-primary border-primary/40 hover:border-primary cursor-pointer'
+                            }`}
+                          >
+                            +{tg}
+                          </button>
+                        );
+                      })}
+                    </div>
+                  </div>
+
+                  {/* Add Custom Tag */}
+                  <div className="flex gap-2">
+                    <input
+                      type="text"
+                      value={customTagInput}
+                      onChange={(e) => setCustomTagInput(e.target.value)}
+                      placeholder={t('canvas.custom_tag_placeholder', 'Свій тег')}
+                      className="flex-grow px-3 py-1.5 bg-secondary/10 border-2 border-primary rounded-xl text-xs font-bold text-primary focus:outline-none focus:bg-surface-container-lowest transition-all"
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter') {
+                          e.preventDefault();
+                          if (customTagInput.trim() && !tags.includes(customTagInput.trim())) {
+                            setTags([...tags, customTagInput.trim()]);
+                            setCustomTagInput('');
+                          }
+                        }
+                      }}
+                    />
+                    <button
+                      type="button"
+                      onClick={() => {
+                        if (customTagInput.trim() && !tags.includes(customTagInput.trim())) {
+                          setTags([...tags, customTagInput.trim()]);
+                          setCustomTagInput('');
+                        }
+                      }}
+                      className="px-3 py-1.5 bg-primary text-on-primary font-bold text-xs rounded-xl border-2 border-primary cursor-pointer hover:scale-105 transition-all shadow-[2px_2px_0px_0px_var(--color-primary)] active:translate-y-0.5"
+                    >
+                      +
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
           {/* Show Progress Toggle */}
           {node.type !== 'comment' && (
             <div className="flex items-center justify-between bg-secondary/5 border-2 border-primary rounded-xl p-4">
@@ -762,7 +931,7 @@ const SketchSettingsModal = ({ node, onClose, onSave, collaborators = [] }) => {
                 min="0"
                 max="100"
                 value={progress}
-                onChange={(e) => setProgress(Number(e.target.value))}
+                onChange={(e) => handleProgressChange(e.target.value)}
                 className="w-full h-2 rounded-lg appearance-none cursor-pointer focus:outline-none transition-all accent-emerald-500"
                 style={{
                   background: `linear-gradient(to right, #10b981 ${progress}%, var(--color-border, #e2e8f0) ${progress}%)`
@@ -1228,6 +1397,505 @@ const ShareModal = ({ projectId, onClose }) => {
   );
 };
 
+const TaskListView = ({ 
+  nodes, edges, updateNodeData, collaborators = [], permission, t, isDarkMode, 
+  searchQuery, setSearchQuery, filterActive, setFilterActive, filterCollaborator, 
+  setFilterCollaborator, filterTag, setFilterTag, expandedNodes, setExpandedNodes,
+  setEditingSketchNodeId, setEditingHabitNodeId
+}) => {
+  const [addingTagNodeId, setAddingTagNodeId] = useState(null);
+  const [inlineTagText, setInlineTagText] = useState('');
+
+  // 1. Identify subgoals & build dependency structures
+  const subgoalEdges = useMemo(() => edges.filter(e => e.sourceHandle?.startsWith('subgoals-source')), [edges]);
+  
+  const subtaskTargetIds = useMemo(() => new Set(subgoalEdges.map(e => e.target)), [subgoalEdges]);
+  
+  const getSubtasks = useCallback((parentId) => {
+    return subgoalEdges
+      .filter(e => e.source === parentId)
+      .map(e => nodes.find(n => n.id === e.target))
+      .filter(Boolean)
+      .filter(n => n.type === 'sketch' || n.type === 'habit');
+  }, [subgoalEdges, nodes]);
+
+  // 2. Extract tags & filter matching
+  const allUniqueTags = useMemo(() => {
+    const defaultTags = ['Todo', 'In Progress', 'Done', 'Feature', 'Bug', 'Refactor', 'High', 'Medium', 'Low'];
+    const set = new Set(defaultTags);
+    nodes.forEach(n => {
+      n.data?.tags?.forEach(tg => {
+        if (tg && typeof tg === 'string') {
+          set.add(tg.trim());
+        }
+      });
+    });
+    return Array.from(set);
+  }, [nodes]);
+
+  const matchesFilters = useCallback((node) => {
+    // 1. Active filter: те к которым мы подошли и еще не выполнили
+    if (filterActive && !(node.data?.isReached && node.data?.status !== 'Done')) {
+      return false;
+    }
+    
+    // 2. Collaborator filter: чисто задания конкретного участника
+    if (filterCollaborator !== 'all') {
+      const assignees = node.data?.assignees || [];
+      const isAssigned = assignees.some(a => (a.sharedWithUserId || 'owner') === filterCollaborator);
+      if (!isAssigned) return false;
+    }
+    
+    // 3. Tag filter
+    if (filterTag !== 'all') {
+      if (!node.data?.tags?.includes(filterTag)) {
+        return false;
+      }
+    }
+    
+    // 4. Search query
+    if (searchQuery.trim() !== '') {
+      const q = searchQuery.toLowerCase();
+      const l = (node.data?.label || '').toLowerCase();
+      const d = (node.data?.description || '').toLowerCase();
+      const tgs = (node.data?.tags || []).map(tg => tg.toLowerCase());
+      if (!l.includes(q) && !d.includes(q) && !tgs.some(tg => tg.includes(q))) {
+        return false;
+      }
+    }
+    
+    return true;
+  }, [filterActive, filterCollaborator, filterTag, searchQuery]);
+
+  const nodeOrDescendantMatches = useCallback((node) => {
+    if (matchesFilters(node)) return true;
+    return getSubtasks(node.id).some(s => nodeOrDescendantMatches(s));
+  }, [matchesFilters, getSubtasks]);
+
+  const orderedRootTasks = useMemo(() => {
+    const rootTasks = nodes.filter(n => (n.type === 'sketch' || n.type === 'habit') && !subtaskTargetIds.has(n.id));
+    const normalEdges = edges.filter(e => !e.sourceHandle?.startsWith('subgoals-source'));
+    
+    // Build adj list and inDegrees for standard edges (sequence flow)
+    const adj = {};
+    const inDegree = {};
+    rootTasks.forEach(t => {
+      adj[t.id] = [];
+      inDegree[t.id] = 0;
+    });
+    
+    normalEdges.forEach(e => {
+      if (adj[e.source] && adj[e.target] !== undefined) {
+        adj[e.source].push(e.target);
+        inDegree[e.target]++;
+      }
+    });
+    
+    const queue = rootTasks.filter(t => inDegree[t.id] === 0).map(t => t.id);
+    const orderedIds = [];
+    
+    while (queue.length > 0) {
+      queue.sort((a, b) => {
+        const nodeA = nodes.find(n => n.id === a);
+        const nodeB = nodes.find(n => n.id === b);
+        return (nodeA?.position?.y || 0) - (nodeB?.position?.y || 0);
+      });
+      
+      const curr = queue.shift();
+      orderedIds.push(curr);
+      
+      adj[curr]?.forEach(neigh => {
+        inDegree[neigh]--;
+        if (inDegree[neigh] === 0) {
+          queue.push(neigh);
+        }
+      });
+    }
+    
+    rootTasks.forEach(t => {
+      if (!orderedIds.includes(t.id)) {
+        orderedIds.push(t.id);
+      }
+    });
+    
+    return orderedIds
+      .map(id => nodes.find(n => n.id === id))
+      .filter(Boolean)
+      .filter(nodeOrDescendantMatches);
+  }, [nodes, edges, subtaskTargetIds, nodeOrDescendantMatches]);
+
+  const toggleExpanded = (nodeId) => {
+    const newExpanded = new Set(expandedNodes);
+    if (newExpanded.has(nodeId)) {
+      newExpanded.delete(nodeId);
+    } else {
+      newExpanded.add(nodeId);
+    }
+    setExpandedNodes(newExpanded);
+  };
+
+  const handleToggleStatus = (nodeId, currentStatus) => {
+    if (permission === 'Read') return;
+    const isDone = currentStatus === 'Done';
+    const newStatus = isDone ? 'Todo' : 'Done';
+    const newProgress = isDone ? 0 : 100;
+    
+    updateNodeData(nodeId, {
+      status: newStatus,
+      progress: newProgress
+    });
+  };
+
+  const handleDropdownStatusChange = (nodeId, newStatus) => {
+    if (permission === 'Read') return;
+    let newProgress = 0;
+    if (newStatus === 'Done') {
+      newProgress = 100;
+    } else if (newStatus === 'Todo') {
+      newProgress = 0;
+    } else if (newStatus === 'Review') {
+      newProgress = 90;
+    } else {
+      newProgress = 50;
+    }
+    
+    updateNodeData(nodeId, {
+      status: newStatus,
+      progress: newProgress
+    });
+  };
+
+  const renderTaskCard = (node, depth = 0) => {
+    const subtasks = getSubtasks(node.id).filter(nodeOrDescendantMatches);
+    const isExpanded = expandedNodes.has(node.id);
+    const hasSubtasks = subtasks.length > 0;
+    
+    const isDone = node.data?.status === 'Done';
+    const status = node.data?.status || 'Todo';
+    const progress = node.data?.progress || 0;
+    
+    const pastelColor = node.data?.color || 'default';
+    const bgColors = {
+      default: 'bg-surface-container-lowest border-primary',
+      yellow: 'bg-yellow-50 dark:bg-yellow-950/20 border-yellow-400 dark:border-yellow-600',
+      blue: 'bg-blue-50 dark:bg-blue-950/20 border-blue-400 dark:border-blue-600',
+      green: 'bg-emerald-50 dark:bg-emerald-950/20 border-emerald-400 dark:border-emerald-600',
+      pink: 'bg-pink-50 dark:bg-pink-950/20 border-pink-400 dark:border-pink-600',
+      purple: 'bg-purple-50 dark:bg-purple-950/20 border-purple-400 dark:border-purple-600',
+      orange: 'bg-orange-50 dark:bg-orange-950/20 border-orange-400 dark:border-orange-600',
+      white: 'bg-stone-50 dark:bg-stone-900/20 border-stone-300 dark:border-stone-700'
+    };
+    const cardBg = bgColors[pastelColor] || bgColors.default;
+    
+    return (
+      <div key={node.id} className="space-y-3">
+        <div 
+          className={`p-4 border-2 rounded-2xl flex flex-col md:flex-row md:items-center justify-between gap-4 transition-all shadow-[3px_3px_0px_0px_var(--color-primary)] hover:shadow-[5px_5px_0px_0px_var(--color-primary)] ${cardBg} ${
+            !node.data?.isReached ? 'opacity-65' : ''
+          }`}
+        >
+          <div className="flex items-start gap-3 flex-1 min-w-0">
+            <button
+              disabled={permission === 'Read'}
+              onClick={() => handleToggleStatus(node.id, status)}
+              className={`mt-1 flex-shrink-0 w-5.5 h-5.5 rounded-lg border-2 border-primary transition-all flex items-center justify-center cursor-pointer ${
+                isDone 
+                  ? 'bg-success border-success text-black' 
+                  : 'bg-surface-container-lowest hover:bg-secondary/15'
+              }`}
+            >
+              {isDone && <Check size={14} strokeWidth={4} className="text-black" />}
+            </button>
+            
+            {hasSubtasks ? (
+              <button
+                onClick={() => toggleExpanded(node.id)}
+                className="mt-1 flex-shrink-0 p-0.5 border-2 border-primary rounded-md bg-surface-container-lowest hover:bg-secondary/10 text-primary transition-all cursor-pointer shadow-[1px_1px_0px_0px_var(--color-primary)]"
+              >
+                {isExpanded ? <ChevronUp size={12} strokeWidth={3} /> : <ChevronDown size={12} strokeWidth={3} />}
+              </button>
+            ) : (
+              <div className="w-5.5" />
+            )}
+            
+            <div className="min-w-0 flex-1">
+              <div className="flex flex-wrap items-center gap-2">
+                <span className={`font-display-md text-base text-primary leading-snug break-words ${isDone ? 'line-through opacity-50' : ''}`}>
+                  {node.data?.label || (node.type === 'habit' ? t('canvas.new_habit', 'Нова звичка') : t('canvas.goal_node', 'Ціль'))}
+                </span>
+                
+                <span className="text-[8px] font-extrabold uppercase px-1.5 py-0.5 rounded border border-primary/20 bg-secondary/10 text-primary/70 tracking-wider shadow-[0.5px_0.5px_0px_0px_rgba(0,0,0,0.05)]">
+                  {node.type === 'habit' ? 'Звичка' : 'Ціль'}
+                </span>
+
+                {!node.data?.isReached && (
+                  <span className="text-[8px] font-extrabold uppercase px-1.5 py-0.5 rounded border border-amber-500 bg-amber-500/10 text-amber-500 tracking-wider">
+                    Заблоковано
+                  </span>
+                )}
+              </div>
+              
+              {node.data?.description && (
+                <p className={`text-xs text-primary/70 font-bold uppercase tracking-wide mt-1 leading-normal max-w-2xl break-words ${isDone ? 'opacity-40' : ''}`}>
+                  {node.data.description}
+                </p>
+              )}
+              
+              <div className="flex flex-wrap items-center gap-1.5 mt-2.5">
+                {(node.data?.tags || []).map((tg, idx) => (
+                  <span
+                    key={idx}
+                    className="flex items-center gap-1 text-[9px] font-extrabold px-1.5 py-0.5 rounded border border-primary bg-secondary/15 text-primary shadow-[1.5px_1.5px_0px_0px_rgba(0,0,0,0.05)]"
+                  >
+                    <span>{tg}</span>
+                    {permission !== 'Read' && (
+                      <button
+                        onClick={() => {
+                          const currentTags = node.data?.tags || [];
+                          updateNodeData(node.id, { tags: currentTags.filter(t => t !== tg) });
+                        }}
+                        className="hover:text-red-500 font-extrabold ml-0.5 text-[8px] cursor-pointer"
+                      >
+                        &times;
+                      </button>
+                    )}
+                  </span>
+                ))}
+                
+                {addingTagNodeId === node.id ? (
+                  <div className="flex items-center gap-1.5 animate-fade-in">
+                    <input
+                      type="text"
+                      autoFocus
+                      value={inlineTagText}
+                      onChange={(e) => setInlineTagText(e.target.value)}
+                      placeholder="Новий тег..."
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter') {
+                          e.preventDefault();
+                          if (inlineTagText.trim()) {
+                            const currentTags = node.data?.tags || [];
+                            if (!currentTags.includes(inlineTagText.trim())) {
+                              updateNodeData(node.id, { tags: [...currentTags, inlineTagText.trim()] });
+                            }
+                          }
+                          setAddingTagNodeId(null);
+                          setInlineTagText('');
+                        } else if (e.key === 'Escape') {
+                          setAddingTagNodeId(null);
+                          setInlineTagText('');
+                        }
+                      }}
+                      className="px-2 py-0.5 border border-primary rounded bg-surface-container-lowest text-[10px] font-bold text-primary focus:outline-none w-20"
+                    />
+                    <button
+                      onClick={() => {
+                        if (inlineTagText.trim()) {
+                          const currentTags = node.data?.tags || [];
+                          if (!currentTags.includes(inlineTagText.trim())) {
+                            updateNodeData(node.id, { tags: [...currentTags, inlineTagText.trim()] });
+                          }
+                        }
+                        setAddingTagNodeId(null);
+                        setInlineTagText('');
+                      }}
+                      className="text-[10px] font-extrabold text-green-600 hover:text-green-700 cursor-pointer"
+                    >
+                      ✓
+                    </button>
+                    <button
+                      onClick={() => {
+                        setAddingTagNodeId(null);
+                        setInlineTagText('');
+                      }}
+                      className="text-[10px] font-extrabold text-red-500 hover:text-red-600 cursor-pointer"
+                    >
+                      ×
+                    </button>
+                  </div>
+                ) : (
+                  permission !== 'Read' && (
+                    <button
+                      onClick={() => {
+                        setAddingTagNodeId(node.id);
+                        setInlineTagText('');
+                      }}
+                      className="text-[9px] font-extrabold px-1.5 py-0.5 rounded border-2 border-dashed border-primary/40 hover:border-primary text-primary bg-secondary/5 hover:bg-secondary/10 transition-colors flex items-center gap-0.5 cursor-pointer shadow-[1px_1px_0px_0px_rgba(0,0,0,0.05)]"
+                    >
+                      <Plus size={8} />
+                      <span>Тег</span>
+                    </button>
+                  )
+                )}
+              </div>
+            </div>
+          </div>
+          
+          <div className="flex items-center gap-4 flex-wrap shrink-0 justify-end">
+            {node.type === 'sketch' && node.data?.showProgress && (
+              <div className="flex flex-col gap-1 w-24">
+                <div className="flex items-center justify-between text-[9px] font-extrabold text-primary/60">
+                  <span>Прогрес</span>
+                  <span>{progress}%</span>
+                </div>
+                <div className="w-full bg-secondary/20 h-1.5 rounded-full overflow-hidden border border-primary/10">
+                  <div className="bg-emerald-500 h-full transition-all" style={{ width: `${progress}%` }} />
+                </div>
+              </div>
+            )}
+            
+            {node.data?.assignees && node.data.assignees.length > 0 && (
+              <div className="flex items-center -space-x-1 flex-row-reverse">
+                {node.data.assignees.slice(0, 3).reverse().map((a, i) => (
+                  <div 
+                    key={a.sharedWithUserId || a.email || i}
+                    title={a.displayName || a.email}
+                    className="w-6.5 h-6.5 rounded-full border border-primary bg-secondary/15 text-primary flex items-center justify-center text-[9px] font-extrabold shadow-[1px_1px_0px_0px_var(--color-primary)]"
+                  >
+                    {getAssigneeInitials(a.displayName, a.email)}
+                  </div>
+                ))}
+                {node.data.assignees.length > 3 && (
+                  <span className="text-[9px] font-extrabold text-primary mr-1">+{node.data.assignees.length - 3}</span>
+                )}
+              </div>
+            )}
+            
+            {node.type !== 'comment' && (
+              <select
+                disabled={permission === 'Read'}
+                value={status}
+                onChange={(e) => handleDropdownStatusChange(node.id, e.target.value)}
+                className={`px-2.5 py-1.5 rounded-xl border-2 border-primary font-bold text-xs uppercase cursor-pointer transition-all shadow-[2px_2px_0px_0px_var(--color-primary)] focus:outline-none focus:translate-y-0.5 focus:shadow-[1px_1px_0px_0px_var(--color-primary)] ${
+                  status === 'Done' 
+                    ? 'bg-success/20 text-success' 
+                    : status === 'Review'
+                    ? 'bg-blue-500/20 text-blue-600 dark:text-blue-400'
+                    : status === 'In Progress'
+                    ? 'bg-amber-500/20 text-amber-600 dark:text-amber-400'
+                    : 'bg-secondary/10 text-primary/70'
+                }`}
+              >
+                <option value="Todo" className="bg-surface-container-lowest text-primary">Todo</option>
+                <option value="In Progress" className="bg-surface-container-lowest text-primary">In Progress</option>
+                <option value="Review" className="bg-surface-container-lowest text-primary">Review</option>
+                <option value="Done" className="bg-surface-container-lowest text-primary">Done</option>
+              </select>
+            )}
+            
+            {permission !== 'Read' && (
+              <button
+                onClick={() => {
+                  if (node.type === 'habit') {
+                    setEditingHabitNodeId(node.id);
+                  } else {
+                    setEditingSketchNodeId(node.id);
+                  }
+                }}
+                className="p-2 border-2 border-primary rounded-xl bg-surface-container-lowest hover:bg-secondary/10 text-primary transition-all cursor-pointer shadow-[2px_2px_0px_0px_var(--color-primary)] active:translate-y-0.5 active:shadow-[1px_1px_0px_0px_var(--color-primary)]"
+                title="Налаштування ноди"
+              >
+                <Settings size={14} />
+              </button>
+            )}
+          </div>
+        </div>
+        
+        {hasSubtasks && isExpanded && (
+          <div className="pl-6 border-l-2 border-dashed border-primary/20 ml-4 space-y-4 pt-1 pb-2">
+            {subtasks.map(sub => renderTaskCard(sub, depth + 1))}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div className="flex-grow flex flex-col bg-background overflow-y-auto p-8 graph-paper-bg sketch-flow">
+      <div className="bg-surface-container-lowest border-4 border-primary rounded-3xl p-6 shadow-[5px_5px_0px_0px_var(--color-primary)] mb-8 flex flex-col gap-4 max-w-5xl w-full mx-auto">
+        <div className="flex items-center gap-3">
+          <ListTodo size={24} className="text-primary animate-pulse" />
+          <h3 className="text-xl font-display-lg text-primary">Список завдань та прогресу</h3>
+        </div>
+        
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-4 items-center">
+          <div className="lg:col-span-6 relative">
+            <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 text-primary/40" size={16} />
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="Шукати за назвою, описом або тегами..."
+              className="w-full pl-10 pr-4 py-2.5 bg-secondary/10 border-2 border-primary rounded-xl font-bold text-xs text-primary focus:outline-none focus:bg-surface-container-lowest transition-all shadow-[2px_2px_0px_0px_rgba(0,0,0,0.05)]"
+            />
+          </div>
+          
+          <div className="lg:col-span-2">
+            <button
+              onClick={() => setFilterActive(!filterActive)}
+              className={`w-full py-2.5 px-3 rounded-xl border-2 font-bold text-xs uppercase transition-all cursor-pointer text-center flex items-center justify-center gap-1.5 shadow-[2px_2px_0px_0px_var(--color-primary)] active:translate-y-0.5 active:shadow-[1px_1px_0px_0px_var(--color-primary)] ${
+                filterActive 
+                  ? 'bg-primary text-white border-primary' 
+                  : 'bg-surface-container-lowest text-primary border-primary hover:bg-secondary/5'
+              }`}
+            >
+              <Target size={14} />
+              <span>Лише активні</span>
+            </button>
+          </div>
+          
+          <div className="lg:col-span-2">
+            <select
+              value={filterCollaborator}
+              onChange={(e) => setFilterCollaborator(e.target.value)}
+              className="w-full py-2.5 px-3 rounded-xl border-2 border-primary font-bold text-xs text-primary bg-surface-container-lowest cursor-pointer shadow-[2px_2px_0px_0px_var(--color-primary)] focus:outline-none"
+            >
+              <option value="all">Усі виконавці</option>
+              <option value="owner">Власник</option>
+              {collaborators.map(c => (
+                <option key={c.sharedWithUserId || c.email} value={c.sharedWithUserId || 'owner'}>
+                  {c.displayName || c.email}
+                </option>
+              ))}
+            </select>
+          </div>
+          
+          <div className="lg:col-span-2">
+            <select
+              value={filterTag}
+              onChange={(e) => setFilterTag(e.target.value)}
+              className="w-full py-2.5 px-3 rounded-xl border-2 border-primary font-bold text-xs text-primary bg-surface-container-lowest cursor-pointer shadow-[2px_2px_0px_0px_var(--color-primary)] focus:outline-none"
+            >
+              <option value="all">Усі теги</option>
+              {allUniqueTags.map(tg => (
+                <option key={tg} value={tg}>
+                  {tg}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+      </div>
+      
+      <div className="flex-1 space-y-4 max-w-5xl w-full mx-auto pb-12">
+        {orderedRootTasks.length === 0 ? (
+          <div className="bg-surface-container-lowest border-4 border-primary rounded-3xl p-12 text-center shadow-[6px_6px_0px_0px_var(--color-primary)]">
+            <div className="flex justify-center mb-4">
+              <StickyNote size={48} className="text-primary/30 animate-bounce" />
+            </div>
+            <h4 className="text-lg font-display-md text-primary mb-2">Немає завдань</h4>
+            <p className="text-xs font-bold uppercase tracking-widest text-primary/50 max-w-md mx-auto leading-relaxed">
+              Створіть цілі або звички на холсті або змініть налаштування фільтрації у верхній панелі!
+            </p>
+          </div>
+        ) : (
+          orderedRootTasks.map(node => renderTaskCard(node, 0))
+        )}
+      </div>
+    </div>
+  );
+};
+
 const CanvasInner = () => {
   const { t } = useTranslation();
   const { id } = useParams();
@@ -1285,6 +1953,13 @@ const CanvasInner = () => {
     updateProjectMetadata
   } = useCanvasLogic(id, user);
 
+  const [activeTab, setActiveTab] = useState('canvas'); // 'canvas' | 'list'
+  const [searchQuery, setSearchQuery] = useState('');
+  const [filterActive, setFilterActive] = useState(false);
+  const [filterCollaborator, setFilterCollaborator] = useState('all');
+  const [filterTag, setFilterTag] = useState('all');
+  const [expandedNodes, setExpandedNodes] = useState(new Set());
+
   const lastCursorSendRef = useRef(0);
   const broadcastRef = useRef(broadcastMessage);
   
@@ -1837,12 +2512,12 @@ const CanvasInner = () => {
     <div className="flex h-screen bg-background overflow-hidden" onMouseUp={handleMouseUp}>
       <Sidebar />
 
-      <main className="flex-grow flex flex-col relative">
+      <main className="flex-grow flex flex-col relative text-primary">
         <div className="relative h-24 bg-surface-container-lowest border-b-4 border-primary px-8 flex items-center justify-between z-30 shadow-sm">
           <div className="flex items-center gap-6">
             <button 
               onClick={() => navigate('/dashboard')}
-              className="p-2 hover:bg-surface-variant rounded-xl transition-colors"
+              className="p-2 hover:bg-surface-variant rounded-xl transition-colors text-primary"
             >
               <ChevronLeft size={28} />
             </button>
@@ -1873,6 +2548,34 @@ const CanvasInner = () => {
                 {projectData?.description || t('canvas.strategic_goal_map')}
               </p>
             </div>
+
+            {/* Styled Notebook Tabs Segmented Control */}
+            <div className="flex items-center bg-secondary/5 border-2 border-primary rounded-xl p-1 shadow-[2px_2px_0px_0px_var(--color-primary)] ml-4">
+              <button
+                type="button"
+                onClick={() => setActiveTab('canvas')}
+                className={`flex items-center gap-2 px-4 py-2 rounded-lg font-bold text-xs uppercase tracking-wider transition-all cursor-pointer select-none ${
+                  activeTab === 'canvas'
+                    ? 'bg-primary text-white shadow-[1px_1px_0px_0px_var(--color-primary)]'
+                    : 'text-primary hover:bg-secondary/10'
+                }`}
+              >
+                <Map size={16} />
+                <span>{t('canvas.tabs.canvas', 'Карта')}</span>
+              </button>
+              <button
+                type="button"
+                onClick={() => setActiveTab('list')}
+                className={`flex items-center gap-2 px-4 py-2 rounded-lg font-bold text-xs uppercase tracking-wider transition-all cursor-pointer select-none ${
+                  activeTab === 'list'
+                    ? 'bg-primary text-white shadow-[1px_1px_0px_0px_var(--color-primary)]'
+                    : 'text-primary hover:bg-secondary/10'
+                }`}
+              >
+                <ListTodo size={16} />
+                <span>{t('canvas.tabs.list', 'Завдання')}</span>
+              </button>
+            </div>
           </div>
 
           <div className="flex items-center gap-4">
@@ -1931,434 +2634,459 @@ const CanvasInner = () => {
           </div>
         </div>
 
-        {permission !== 'Read' && (
-          <CanvasToolbar 
-            handleAIRequest={handleAIRequest} 
-            isAIActive={isAIActive} 
-            user={user}
-            addNewNodeAt={addNewNodeAt}
-            handleCopy={handleCopy}
-            handleCut={handleCut}
-            handlePaste={() => handlePaste(mousePosRef.current)}
-            exportToPng={exportToPng}
-            onDeleteSelected={() => {
-              const selectedNodeIds = nodes.filter(n => n.selected).map(n => n.id);
-              const selectedEdgeIds = edges.filter(e => e.selected).map(e => e.id);
-              requestDeletion(selectedNodeIds, selectedEdgeIds);
-            }}
-            hasSelectedNodes={nodes.some(n => n.selected)}
-            hasClipboardContent={hasClipboardContent}
-            undo={undo}
-            redo={redo}
-            canUndo={canUndo}
-            canRedo={canRedo}
-            drawingMode={drawingMode}
-            setDrawingMode={setDrawingMode}
-          />
-        )}
-
-        {/* React Flow Canvas */}
+        {/* React Flow Canvas Wrapper with visibility toggled via display style */}
         <div 
-          ref={reactFlowWrapper} 
-          className="flex-grow graph-paper-bg relative" 
-          onMouseDown={drawingMode ? undefined : handleMouseDown}
-          onPointerDown={onPointerDown}
-          onPointerMove={onPointerMove}
-          onPointerUp={onPointerUp}
+          className="flex-grow flex flex-col relative"
+          style={{ display: activeTab === 'canvas' ? 'flex' : 'none' }}
         >
-          <ReactFlow
-            nodes={nodes}
-            edges={edges}
-            onNodesChange={onNodesChange}
-            onEdgesChange={onEdgesChange}
-            onConnect={permission === 'Read' ? undefined : onConnect}
-            onEdgesDelete={permission === 'Read' ? undefined : (eds) => requestDeletion([], eds.map(e => e.id))}
-            onEdgeClick={permission === 'Read' ? undefined : (_, edge) => requestDeletion([], [edge.id])}
-            onNodesDelete={permission === 'Read' ? undefined : (nds) => requestDeletion(nds.map(n => n.id), [])}
-            onNodeDragStart={permission === 'Read' ? undefined : () => takeHistorySnapshot()}
-            onNodeContextMenu={handleNodeContextMenu}
-            onPaneClick={() => setContextMenu(null)}
-            onPaneContextMenu={handlePaneContextMenu}
-            onDrop={onDrop}
-            onDragOver={onDragOver}
-            onConnectStart={(event, params) => {
-              connectionStartRef.current = params;
-            }}
-            onConnectEnd={onConnectEnd}
-            nodesDraggable={!drawingMode && permission !== 'Read'}
-            nodesConnectable={!drawingMode && permission !== 'Read'}
-            panOnDrag={!drawingMode}
-            selectionOnDrag={!drawingMode}
-            nodeTypes={nodeTypes}
-            edgeTypes={edgeTypes}
-            connectionLineType={ConnectionLineType.SmoothStep}
-            fitView
-            className="sketch-flow"
-          >
-            <Background variant="dots" gap={20} size={1} color={isDarkMode ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.06)'} />
-            <Controls className="!bottom-8 !left-28 !overflow-hidden" />
-            <MiniMap 
-              className="!bottom-8 !right-8 !overflow-hidden" 
-              nodeStrokeColor={isDarkMode ? '#e2e3e4' : '#31363F'}
-              nodeColor={isDarkMode ? '#222326' : '#EEEEEE'}
-              maskColor={isDarkMode ? 'rgba(0,0,0,0.6)' : 'rgba(255,255,255,0.6)'}
-            />
-            {/* Collaborative cursors of active participants */}
-            <CollaborativeCursors cursors={cursors} />
-          </ReactFlow>
-
-          {/* Active Drawing Overlay */}
-          {activeStroke && (
-            <svg 
-              className="absolute inset-0 pointer-events-none z-[1000]"
-              style={{ width: '100%', height: '100%' }}
-            >
-              <path 
-                d={activeStroke.path}
-                fill="none"
-                stroke={isDarkMode ? '#ffffff' : '#31363F'}
-                strokeWidth={3}
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
-          )}
-
-          <AIHintOverlay 
-            isAIActive={isAIActive} 
-            setIsAIActive={setIsAIActive} 
-            aiLoading={aiLoading} 
-            submitAICanvasPrompt={submitAICanvasPrompt} 
-          />
-          <PaywallModal showPaywall={showPaywall} setShowPaywall={setShowPaywall} />
-
-          {editingNode && (
-            <ConditionSettingsModal 
-              node={editingNode} 
-              onClose={() => setEditingConditionNodeId(null)} 
-              onSave={handleSaveConditionConfig} 
+          {permission !== 'Read' && (
+            <CanvasToolbar 
+              handleAIRequest={handleAIRequest} 
+              isAIActive={isAIActive} 
+              user={user}
+              addNewNodeAt={addNewNodeAt}
+              handleCopy={handleCopy}
+              handleCut={handleCut}
+              handlePaste={() => handlePaste(mousePosRef.current)}
+              exportToPng={exportToPng}
+              onDeleteSelected={() => {
+                const selectedNodeIds = nodes.filter(n => n.selected).map(n => n.id);
+                const selectedEdgeIds = edges.filter(e => e.selected).map(e => e.id);
+                requestDeletion(selectedNodeIds, selectedEdgeIds);
+              }}
+              hasSelectedNodes={nodes.some(n => n.selected)}
+              hasClipboardContent={hasClipboardContent}
+              undo={undo}
+              redo={redo}
+              canUndo={canUndo}
+              canRedo={canRedo}
+              drawingMode={drawingMode}
+              setDrawingMode={setDrawingMode}
             />
           )}
 
-          {editingHabitNode && (
-            <HabitSettingsModal 
-              node={editingHabitNode} 
-              onClose={() => setEditingHabitNodeId(null)} 
-              onSave={handleSaveHabitConfig} 
-            />
-          )}
-
-          {editingSketchNode && (
-            <SketchSettingsModal 
-              node={editingSketchNode} 
-              onClose={() => setEditingSketchNodeId(null)} 
-              onSave={handleSaveSketchConfig} 
-              collaborators={collaborators}
-            />
-          )}
+          <div 
+            ref={reactFlowWrapper} 
+            className="flex-grow graph-paper-bg relative" 
+            onMouseDown={drawingMode ? undefined : handleMouseDown}
+            onPointerDown={onPointerDown}
+            onPointerMove={onPointerMove}
+            onPointerUp={onPointerUp}
+          >
+            <ReactFlow
+              nodes={nodes}
+              edges={edges}
+              onNodesChange={onNodesChange}
+              onEdgesChange={onEdgesChange}
+              onConnect={permission === 'Read' ? undefined : onConnect}
+              onEdgesDelete={permission === 'Read' ? undefined : (eds) => requestDeletion([], eds.map(e => e.id))}
+              onEdgeClick={permission === 'Read' ? undefined : (_, edge) => requestDeletion([], [edge.id])}
+              onNodesDelete={permission === 'Read' ? undefined : (nds) => requestDeletion(nds.map(n => n.id), [])}
+              onNodeDragStart={permission === 'Read' ? undefined : () => takeHistorySnapshot()}
+              onNodeContextMenu={handleNodeContextMenu}
+              onPaneClick={() => setContextMenu(null)}
+              onPaneContextMenu={handlePaneContextMenu}
+              onDrop={onDrop}
+              onDragOver={onDragOver}
+              onConnectStart={(event, params) => {
+                connectionStartRef.current = params;
+              }}
+              onConnectEnd={onConnectEnd}
+              nodesDraggable={!drawingMode && permission !== 'Read'}
+              nodesConnectable={!drawingMode && permission !== 'Read'}
+              panOnDrag={!drawingMode}
+              selectionOnDrag={!drawingMode}
+              nodeTypes={nodeTypes}
+              edgeTypes={edgeTypes}
+              connectionLineType={ConnectionLineType.SmoothStep}
+              fitView
+              className="sketch-flow"
+            >
+              <Background variant="dots" gap={20} size={1} color={isDarkMode ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.06)'} />
+              <Controls className="!bottom-8 !left-28 !overflow-hidden" />
+              <MiniMap 
+                className="!bottom-8 !right-8 !overflow-hidden" 
+                nodeStrokeColor={isDarkMode ? '#e2e3e4' : '#31363F'}
+                nodeColor={isDarkMode ? '#222326' : '#EEEEEE'}
+                maskColor={isDarkMode ? 'rgba(0,0,0,0.6)' : 'rgba(255,255,255,0.6)'}
+              />
+              <CollaborativeCursors cursors={cursors} />
+            </ReactFlow>
 
-          {isEditingMetadata && (
-            <ProjectMetadataModal 
-              title={projectTitle} 
-              description={projectData?.description || ''} 
-              onClose={() => setIsEditingMetadata(false)} 
-              onSave={(newTitle, newDesc) => {
-                updateProjectMetadata(newTitle, newDesc);
-                setIsEditingMetadata(false);
-              }} 
-            />
-          )}
+            {activeStroke && (
+              <svg 
+                className="absolute inset-0 pointer-events-none z-[1000]"
+                style={{ width: '100%', height: '100%' }}
+              >
+                <path 
+                  d={activeStroke.path}
+                  fill="none"
+                  stroke={isDarkMode ? '#ffffff' : '#31363F'}
+                  strokeWidth={3}
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            )}
 
-          {isShareModalOpen && (
-            <ShareModal 
-              projectId={id} 
-              onClose={() => {
-                setIsShareModalOpen(false);
-                fetchCollaborators();
-              }} 
+            <AIHintOverlay 
+              isAIActive={isAIActive} 
+              setIsAIActive={setIsAIActive} 
+              aiLoading={aiLoading} 
+              submitAICanvasPrompt={submitAICanvasPrompt} 
             />
-          )}
+            <PaywallModal showPaywall={showPaywall} setShowPaywall={setShowPaywall} />
 
-          {contextMenu && contextMenu.type === 'node' && (
-            <div
-              style={{ top: contextMenu.y, left: contextMenu.x }}
-              className="absolute bg-surface-container-lowest border-2 border-primary shadow-[2px_2px_0px_0px_var(--color-primary)] py-1.5 px-1 z-50 min-w-[135px] rounded-lg transition-all flex flex-col gap-0.5"
-              onClick={(e) => e.stopPropagation()}
-            >
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  // Ensure node is selected for copy if it isn't already
-                  const targetNode = nodes.find(n => n.id === contextMenu.nodeId);
-                  if (targetNode) {
-                    const isSelected = targetNode.selected;
-                    if (!isSelected) {
-                      setNodes(nds => nds.map(n => n.id === contextMenu.nodeId ? { ...n, selected: true } : n));
-                    }
-                    // Copy node(s)
-                    const selectedNodes = nodes.filter(n => n.selected || n.id === contextMenu.nodeId);
-                    const selectedEdges = edges.filter(edge =>
-                      selectedNodes.some(n => n.id === edge.source) &&
-                      selectedNodes.some(n => n.id === edge.target)
-                    );
-                    const clipboardPayload = {
-                      nodes: selectedNodes.map(n => ({ ...n, originalPosition: { ...n.position } })),
-                      edges: selectedEdges
-                    };
-                    window.__flowClipboard = clipboardPayload;
-                    triggerClipboardUpdate();
-                    try {
-                      navigator.clipboard.writeText('FLOWWEB_NODES_DATA:' + JSON.stringify(clipboardPayload)).catch(() => {});
-                    } catch (err) {}
-                  }
-                  setContextMenu(null);
-                }}
-                className="w-full text-left px-2.5 py-1.5 hover:bg-surface-variant text-primary font-bold rounded-md transition-colors flex items-center gap-2 text-xs"
+            {contextMenu && contextMenu.type === 'node' && (
+              <div
+                style={{ top: contextMenu.y, left: contextMenu.x }}
+                className="absolute bg-surface-container-lowest border-2 border-primary shadow-[2px_2px_0px_0px_var(--color-primary)] py-1.5 px-1 z-50 min-w-[135px] rounded-lg transition-all flex flex-col gap-0.5"
+                onClick={(e) => e.stopPropagation()}
               >
-                <Copy size={14} className="text-primary" />
-                <span>{t('canvas.context_menu.copy', 'Копіювати')}</span>
-              </button>
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    const targetNode = nodes.find(n => n.id === contextMenu.nodeId);
+                    if (targetNode) {
+                      const isSelected = targetNode.selected;
+                      if (!isSelected) {
+                        setNodes(nds => nds.map(n => n.id === contextMenu.nodeId ? { ...n, selected: true } : n));
+                      }
+                      const selectedNodes = nodes.filter(n => n.selected || n.id === contextMenu.nodeId);
+                      const selectedEdges = edges.filter(edge =>
+                        selectedNodes.some(n => n.id === edge.source) &&
+                        selectedNodes.some(n => n.id === edge.target)
+                      );
+                      const clipboardPayload = {
+                        nodes: selectedNodes.map(n => ({ ...n, originalPosition: { ...n.position } })),
+                        edges: selectedEdges
+                      };
+                      window.__flowClipboard = clipboardPayload;
+                      triggerClipboardUpdate();
+                      try {
+                        navigator.clipboard.writeText('FLOWWEB_NODES_DATA:' + JSON.stringify(clipboardPayload)).catch(() => {});
+                      } catch (err) {}
+                    }
+                    setContextMenu(null);
+                  }}
+                  className="w-full text-left px-2.5 py-1.5 hover:bg-surface-variant text-primary font-bold rounded-md transition-colors flex items-center gap-2 text-xs"
+                >
+                  <Copy size={14} className="text-primary" />
+                  <span>{t('canvas.context_menu.copy', 'Копіювати')}</span>
+                </button>
+
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    const targetNode = nodes.find(n => n.id === contextMenu.nodeId);
+                    if (targetNode) {
+                      const selectedNodes = nodes.filter(n => n.selected || n.id === contextMenu.nodeId);
+                      const selectedEdges = edges.filter(edge =>
+                        selectedNodes.some(n => n.id === edge.source) &&
+                        selectedNodes.some(n => n.id === edge.target)
+                      );
+                      const clipboardPayload = {
+                        nodes: selectedNodes.map(n => ({ ...n, originalPosition: { ...n.position } })),
+                        edges: selectedEdges
+                      };
+                      window.__flowClipboard = clipboardPayload;
+                      triggerClipboardUpdate();
+                      try {
+                        navigator.clipboard.writeText('FLOWWEB_NODES_DATA:' + JSON.stringify(clipboardPayload)).catch(() => {});
+                      } catch (err) {}
+                      selectedNodes.forEach(n => deleteNode(n.id));
+                    }
+                    setContextMenu(null);
+                  }}
+                  className="w-full text-left px-2.5 py-1.5 hover:bg-surface-variant text-primary font-bold rounded-md transition-colors flex items-center gap-2 text-xs"
+                >
+                  <Scissors size={14} className="text-primary" />
+                  <span>{t('canvas.context_menu.cut', 'Вирізати')}</span>
+                </button>
+
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    const targetNode = nodes.find(n => n.id === contextMenu.nodeId);
+                    if (targetNode) {
+                      const newPinnedState = !targetNode.data?.isPinned;
+                      updateNodeData(contextMenu.nodeId, { isPinned: newPinnedState });
+                    }
+                    setContextMenu(null);
+                  }}
+                  className="w-full text-left px-2.5 py-1.5 hover:bg-surface-variant text-primary font-bold rounded-md transition-colors flex items-center gap-2 text-xs"
+                >
+                  <Pin 
+                    size={14} 
+                    className={`text-primary transition-transform ${
+                      nodes.find(n => n.id === contextMenu.nodeId)?.data?.isPinned 
+                        ? 'rotate-45 text-amber-500 fill-amber-500' 
+                        : ''
+                    }`} 
+                  />
+                  <span>
+                    {nodes.find(n => n.id === contextMenu.nodeId)?.data?.isPinned 
+                      ? t('canvas.context_menu.unpin', 'Відкріпити') 
+                      : t('canvas.context_menu.pin', 'Закріпити')}
+                  </span>
+                </button>
+
+                <div className="border-t border-primary/10 my-0.5"></div>
+
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    requestDeletion([contextMenu.nodeId], []);
+                    setContextMenu(null);
+                  }}
+                  className="w-full text-left px-2.5 py-1.5 hover:bg-red-500/20 text-red-600 hover:text-red-700 font-bold rounded-md transition-colors flex items-center gap-2 text-xs"
+                >
+                  <Trash2 size={14} />
+                  <span>{t('canvas.context_menu.delete')}</span>
+                </button>
+              </div>
+            )}
 
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  // Cut node(s)
-                  const targetNode = nodes.find(n => n.id === contextMenu.nodeId);
-                  if (targetNode) {
-                    const selectedNodes = nodes.filter(n => n.selected || n.id === contextMenu.nodeId);
-                    const selectedEdges = edges.filter(edge =>
-                      selectedNodes.some(n => n.id === edge.source) &&
-                      selectedNodes.some(n => n.id === edge.target)
-                    );
-                    const clipboardPayload = {
-                      nodes: selectedNodes.map(n => ({ ...n, originalPosition: { ...n.position } })),
-                      edges: selectedEdges
-                    };
-                    window.__flowClipboard = clipboardPayload;
-                    triggerClipboardUpdate();
-                    try {
-                      navigator.clipboard.writeText('FLOWWEB_NODES_DATA:' + JSON.stringify(clipboardPayload)).catch(() => {});
-                    } catch (err) {}
-                    // Delete selected nodes
-                    selectedNodes.forEach(n => deleteNode(n.id));
-                  }
-                  setContextMenu(null);
-                }}
-                className="w-full text-left px-2.5 py-1.5 hover:bg-surface-variant text-primary font-bold rounded-md transition-colors flex items-center gap-2 text-xs"
+            {contextMenu && contextMenu.type === 'pane' && (
+              <div
+                style={{ top: contextMenu.y, left: contextMenu.x }}
+                className="absolute bg-surface-container-lowest border-2 border-primary shadow-[2px_2px_0px_0px_var(--color-primary)] py-1.5 px-1 z-50 min-w-[170px] rounded-lg transition-all flex flex-col gap-0.5"
+                onClick={(e) => e.stopPropagation()}
               >
-                <Scissors size={14} className="text-primary" />
-                <span>{t('canvas.context_menu.cut', 'Вирізати')}</span>
-              </button>
+                {permission !== 'Read' && (
+                  <>
+                    <div className="px-2.5 py-1 text-[9px] font-bold uppercase tracking-widest text-on-surface-variant/40 border-b border-primary/10">
+                      {t('canvas.context_menu.create_node')}
+                    </div>
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        addNewNodeAt(contextMenu.clientX, contextMenu.clientY, 'sketch');
+                        setContextMenu(null);
+                      }}
+                      className="w-full text-left px-2.5 py-1.5 hover:bg-surface-variant text-primary font-bold rounded-md transition-colors flex items-center gap-2 text-xs"
+                    >
+                      <Target size={15} className="text-primary" />
+                      <span>{t('canvas.context_menu.goal_node')}</span>
+                    </button>
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        addNewNodeAt(contextMenu.clientX, contextMenu.clientY, 'comment');
+                        setContextMenu(null);
+                      }}
+                      className="w-full text-left px-2.5 py-1.5 hover:bg-surface-variant text-primary font-bold rounded-md transition-colors flex items-center gap-2 text-xs"
+                    >
+                      <StickyNote size={15} className="text-secondary" />
+                      <span>Стікер</span>
+                    </button>
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        addNewNodeAt(contextMenu.clientX, contextMenu.clientY, 'condition');
+                        setContextMenu(null);
+                      }}
+                      className="w-full text-left px-2.5 py-1.5 hover:bg-surface-variant text-primary font-bold rounded-md transition-colors flex items-center gap-2 text-xs"
+                    >
+                      <GitFork size={15} className="text-primary" />
+                      <span>{t('canvas.context_menu.condition_node')}</span>
+                    </button>
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        addNewNodeAt(contextMenu.clientX, contextMenu.clientY, 'habit');
+                        setContextMenu(null);
+                      }}
+                      className="w-full text-left px-2.5 py-1.5 hover:bg-surface-variant text-primary font-bold rounded-md transition-colors flex items-center gap-2 text-xs"
+                    >
+                      <Timer size={15} className="text-secondary" />
+                      <span>{t('canvas.context_menu.habit_node')}</span>
+                    </button>
+
+                    {window.__flowClipboard && window.__flowClipboard.nodes && window.__flowClipboard.nodes.length > 0 && (
+                      <>
+                        <div className="border-t border-primary/10 my-0.5"></div>
+                        <button
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            handlePaste({ x: contextMenu.clientX, y: contextMenu.clientY });
+                            setContextMenu(null);
+                          }}
+                          className="w-full text-left px-2.5 py-1.5 hover:bg-surface-variant text-primary font-bold rounded-md transition-colors flex items-center gap-2 text-xs"
+                        >
+                          <Clipboard size={15} className="text-primary" />
+                          <span>{t('canvas.context_menu.paste', 'Вставити')}</span>
+                        </button>
+                      </>
+                    )}
 
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  const targetNode = nodes.find(n => n.id === contextMenu.nodeId);
-                  if (targetNode) {
-                    const newPinnedState = !targetNode.data?.isPinned;
-                    updateNodeData(contextMenu.nodeId, { isPinned: newPinnedState });
-                  }
-                  setContextMenu(null);
-                }}
-                className="w-full text-left px-2.5 py-1.5 hover:bg-surface-variant text-primary font-bold rounded-md transition-colors flex items-center gap-2 text-xs"
-              >
-                <Pin 
-                  size={14} 
-                  className={`text-primary transition-transform ${
-                    nodes.find(n => n.id === contextMenu.nodeId)?.data?.isPinned 
-                      ? 'rotate-45 text-amber-500 fill-amber-500' 
-                      : ''
-                  }`} 
-                />
-                <span>
-                  {nodes.find(n => n.id === contextMenu.nodeId)?.data?.isPinned 
-                    ? t('canvas.context_menu.unpin', 'Відкріпити') 
-                    : t('canvas.context_menu.pin', 'Закріпити')}
-                </span>
-              </button>
+                    <div className="border-t border-primary/10 my-0.5"></div>
+                  </>
+                )}
 
-              <div className="border-t border-primary/10 my-0.5"></div>
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    exportToPng();
+                    setContextMenu(null);
+                  }}
+                  className="w-full text-left px-2.5 py-1.5 hover:bg-green-50 text-green-600 hover:text-green-700 font-bold rounded-md transition-colors flex items-center gap-2 text-xs"
+                >
+                  <Image size={15} className="text-green-600" />
+                  <span>{t('canvas.context_menu.export_png')}</span>
+                </button>
+              </div>
+            )}
 
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  requestDeletion([contextMenu.nodeId], []);
-                  setContextMenu(null);
-                }}
-                className="w-full text-left px-2.5 py-1.5 hover:bg-red-500/20 text-red-600 hover:text-red-700 font-bold rounded-md transition-colors flex items-center gap-2 text-xs"
+            {contextMenu && contextMenu.type === 'connect-pane' && (
+              <div
+                style={{ top: contextMenu.y, left: contextMenu.x }}
+                className="absolute bg-surface-container-lowest border-2 border-primary shadow-[2px_2px_0px_0px_var(--color-primary)] py-1.5 px-1 z-50 min-w-[170px] rounded-lg transition-all flex flex-col gap-0.5"
+                onClick={(e) => e.stopPropagation()}
               >
-                <Trash2 size={14} />
-                <span>{t('canvas.context_menu.delete')}</span>
-              </button>
-            </div>
-          )}
+                <div className="px-2.5 py-1 text-[9px] font-bold uppercase tracking-widest text-secondary border-b border-primary/10">
+                  Зв'язати з новою:
+                </div>
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    const newNodeId = addNewNodeAt(contextMenu.clientX, contextMenu.clientY, 'sketch');
+                    if (contextMenu.connectionSource && newNodeId) {
+                      const { nodeId, handleId, handleType } = contextMenu.connectionSource;
+                      const isSource = handleType === 'source';
+                      onConnect({
+                        source: isSource ? nodeId : newNodeId,
+                        target: isSource ? newNodeId : nodeId,
+                        sourceHandle: isSource ? handleId : 'main-source',
+                        targetHandle: isSource ? 'main-target' : handleId
+                      });
+                    }
+                    setContextMenu(null);
+                  }}
+                  className="w-full text-left px-2.5 py-1.5 hover:bg-surface-variant text-primary font-bold rounded-md transition-colors flex items-center gap-2 text-xs"
+                >
+                  <Target size={15} className="text-primary" />
+                  <span>{t('canvas.context_menu.goal_node')}</span>
+                </button>
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    const newNodeId = addNewNodeAt(contextMenu.clientX, contextMenu.clientY, 'condition');
+                    if (contextMenu.connectionSource && newNodeId) {
+                      const { nodeId, handleId, handleType } = contextMenu.connectionSource;
+                      const isSource = handleType === 'source';
+                      onConnect({
+                        source: isSource ? nodeId : newNodeId,
+                        target: isSource ? newNodeId : nodeId,
+                        sourceHandle: isSource ? handleId : null,
+                        targetHandle: isSource ? null : handleId
+                      });
+                    }
+                    setContextMenu(null);
+                  }}
+                  className="w-full text-left px-2.5 py-1.5 hover:bg-surface-variant text-primary font-bold rounded-md transition-colors flex items-center gap-2 text-xs"
+                >
+                  <GitFork size={15} className="text-primary" />
+                  <span>{t('canvas.context_menu.condition_node')}</span>
+                </button>
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    const newNodeId = addNewNodeAt(contextMenu.clientX, contextMenu.clientY, 'habit');
+                    if (contextMenu.connectionSource && newNodeId) {
+                      const { nodeId, handleId, handleType } = contextMenu.connectionSource;
+                      const isSource = handleType === 'source';
+                      onConnect({
+                        source: isSource ? nodeId : newNodeId,
+                        target: isSource ? newNodeId : nodeId,
+                        sourceHandle: isSource ? handleId : null,
+                        targetHandle: isSource ? null : handleId
+                      });
+                    }
+                    setContextMenu(null);
+                  }}
+                  className="w-full text-left px-2.5 py-1.5 hover:bg-surface-variant text-primary font-bold rounded-md transition-colors flex items-center gap-2 text-xs"
+                >
+                  <Timer size={15} className="text-secondary" />
+                  <span>{t('canvas.context_menu.habit_node')}</span>
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
 
-          {contextMenu && contextMenu.type === 'pane' && (
-            <div
-              style={{ top: contextMenu.y, left: contextMenu.x }}
-              className="absolute bg-surface-container-lowest border-2 border-primary shadow-[2px_2px_0px_0px_var(--color-primary)] py-1.5 px-1 z-50 min-w-[170px] rounded-lg transition-all flex flex-col gap-0.5"
-              onClick={(e) => e.stopPropagation()}
-            >
-              {permission !== 'Read' && (
-                <>
-                  <div className="px-2.5 py-1 text-[9px] font-bold uppercase tracking-widest text-on-surface-variant/40 border-b border-primary/10">
-                    {t('canvas.context_menu.create_node')}
-                  </div>
-                  <button
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      addNewNodeAt(contextMenu.clientX, contextMenu.clientY, 'sketch');
-                      setContextMenu(null);
-                    }}
-                    className="w-full text-left px-2.5 py-1.5 hover:bg-surface-variant text-primary font-bold rounded-md transition-colors flex items-center gap-2 text-xs"
-                  >
-                    <Target size={15} className="text-primary" />
-                    <span>{t('canvas.context_menu.goal_node')}</span>
-                  </button>
-                  <button
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      addNewNodeAt(contextMenu.clientX, contextMenu.clientY, 'comment');
-                      setContextMenu(null);
-                    }}
-                    className="w-full text-left px-2.5 py-1.5 hover:bg-surface-variant text-primary font-bold rounded-md transition-colors flex items-center gap-2 text-xs"
-                  >
-                    <StickyNote size={15} className="text-secondary" />
-                    <span>Стікер</span>
-                  </button>
-                  <button
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      addNewNodeAt(contextMenu.clientX, contextMenu.clientY, 'condition');
-                      setContextMenu(null);
-                    }}
-                    className="w-full text-left px-2.5 py-1.5 hover:bg-surface-variant text-primary font-bold rounded-md transition-colors flex items-center gap-2 text-xs"
-                  >
-                    <GitFork size={15} className="text-primary" />
-                    <span>{t('canvas.context_menu.condition_node')}</span>
-                  </button>
-                  <button
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      addNewNodeAt(contextMenu.clientX, contextMenu.clientY, 'habit');
-                      setContextMenu(null);
-                    }}
-                    className="w-full text-left px-2.5 py-1.5 hover:bg-surface-variant text-primary font-bold rounded-md transition-colors flex items-center gap-2 text-xs"
-                  >
-                    <Timer size={15} className="text-secondary" />
-                    <span>{t('canvas.context_menu.habit_node')}</span>
-                  </button>
+        {/* Task List Tab content */}
+        {activeTab === 'list' && (
+          <TaskListView 
+            nodes={nodes}
+            edges={edges}
+            updateNodeData={updateNodeData}
+            collaborators={collaborators}
+            permission={permission}
+            t={t}
+            isDarkMode={isDarkMode}
+            searchQuery={searchQuery}
+            setSearchQuery={setSearchQuery}
+            filterActive={filterActive}
+            setFilterActive={setFilterActive}
+            filterCollaborator={filterCollaborator}
+            setFilterCollaborator={setFilterCollaborator}
+            filterTag={filterTag}
+            setFilterTag={setFilterTag}
+            expandedNodes={expandedNodes}
+            setExpandedNodes={setExpandedNodes}
+            setEditingSketchNodeId={setEditingSketchNodeId}
+            setEditingHabitNodeId={setEditingHabitNodeId}
+          />
+        )}
 
-                  {window.__flowClipboard && window.__flowClipboard.nodes && window.__flowClipboard.nodes.length > 0 && (
-                    <>
-                      <div className="border-t border-primary/10 my-0.5"></div>
-                      <button
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          handlePaste({ x: contextMenu.clientX, y: contextMenu.clientY });
-                          setContextMenu(null);
-                        }}
-                        className="w-full text-left px-2.5 py-1.5 hover:bg-surface-variant text-primary font-bold rounded-md transition-colors flex items-center gap-2 text-xs"
-                      >
-                        <Clipboard size={15} className="text-primary" />
-                        <span>{t('canvas.context_menu.paste', 'Вставити')}</span>
-                      </button>
-                    </>
-                  )}
+        {/* Globally rendered settings modals accessible from both views */}
+        {editingNode && (
+          <ConditionSettingsModal 
+            node={editingNode} 
+            onClose={() => setEditingConditionNodeId(null)} 
+            onSave={handleSaveConditionConfig} 
+          />
+        )}
 
-                  <div className="border-t border-primary/10 my-0.5"></div>
-                </>
-              )}
+        {editingHabitNode && (
+          <HabitSettingsModal 
+            node={editingHabitNode} 
+            onClose={() => setEditingHabitNodeId(null)} 
+            onSave={handleSaveHabitConfig} 
+          />
+        )}
 
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  exportToPng();
-                  setContextMenu(null);
-                }}
-                className="w-full text-left px-2.5 py-1.5 hover:bg-green-50 text-green-600 hover:text-green-700 font-bold rounded-md transition-colors flex items-center gap-2 text-xs"
-              >
-                <Image size={15} className="text-green-600" />
-                <span>{t('canvas.context_menu.export_png')}</span>
-              </button>
-            </div>
-          )}
+        {editingSketchNode && (
+          <SketchSettingsModal 
+            node={editingSketchNode} 
+            onClose={() => setEditingSketchNodeId(null)} 
+            onSave={handleSaveSketchConfig} 
+            collaborators={collaborators}
+          />
+        )}
 
-          {contextMenu && contextMenu.type === 'connect-pane' && (
-            <div
-              style={{ top: contextMenu.y, left: contextMenu.x }}
-              className="absolute bg-surface-container-lowest border-2 border-primary shadow-[2px_2px_0px_0px_var(--color-primary)] py-1.5 px-1 z-50 min-w-[170px] rounded-lg transition-all flex flex-col gap-0.5"
-              onClick={(e) => e.stopPropagation()}
-            >
-              <div className="px-2.5 py-1 text-[9px] font-bold uppercase tracking-widest text-secondary border-b border-primary/10">
-                Зв'язати з новою:
-              </div>
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  const newNodeId = addNewNodeAt(contextMenu.clientX, contextMenu.clientY, 'sketch');
-                  if (contextMenu.connectionSource && newNodeId) {
-                    const { nodeId, handleId, handleType } = contextMenu.connectionSource;
-                    const isSource = handleType === 'source';
-                    onConnect({
-                      source: isSource ? nodeId : newNodeId,
-                      target: isSource ? newNodeId : nodeId,
-                      sourceHandle: isSource ? handleId : 'main-source',
-                      targetHandle: isSource ? 'main-target' : handleId
-                    });
-                  }
-                  setContextMenu(null);
-                }}
-                className="w-full text-left px-2.5 py-1.5 hover:bg-surface-variant text-primary font-bold rounded-md transition-colors flex items-center gap-2 text-xs"
-              >
-                <Target size={15} className="text-primary" />
-                <span>{t('canvas.context_menu.goal_node')}</span>
-              </button>
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  const newNodeId = addNewNodeAt(contextMenu.clientX, contextMenu.clientY, 'condition');
-                  if (contextMenu.connectionSource && newNodeId) {
-                    const { nodeId, handleId, handleType } = contextMenu.connectionSource;
-                    const isSource = handleType === 'source';
-                    onConnect({
-                      source: isSource ? nodeId : newNodeId,
-                      target: isSource ? newNodeId : nodeId,
-                      sourceHandle: isSource ? handleId : null,
-                      targetHandle: isSource ? null : handleId
-                    });
-                  }
-                  setContextMenu(null);
-                }}
-                className="w-full text-left px-2.5 py-1.5 hover:bg-surface-variant text-primary font-bold rounded-md transition-colors flex items-center gap-2 text-xs"
-              >
-                <GitFork size={15} className="text-primary" />
-                <span>{t('canvas.context_menu.condition_node')}</span>
-              </button>
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  const newNodeId = addNewNodeAt(contextMenu.clientX, contextMenu.clientY, 'habit');
-                  if (contextMenu.connectionSource && newNodeId) {
-                    const { nodeId, handleId, handleType } = contextMenu.connectionSource;
-                    const isSource = handleType === 'source';
-                    onConnect({
-                      source: isSource ? nodeId : newNodeId,
-                      target: isSource ? newNodeId : nodeId,
-                      sourceHandle: isSource ? handleId : null,
-                      targetHandle: isSource ? null : handleId
-                    });
-                  }
-                  setContextMenu(null);
-                }}
-                className="w-full text-left px-2.5 py-1.5 hover:bg-surface-variant text-primary font-bold rounded-md transition-colors flex items-center gap-2 text-xs"
-              >
-                <Timer size={15} className="text-secondary" />
-                <span>{t('canvas.context_menu.habit_node')}</span>
-              </button>
-            </div>
-          )}
-        </div>
+        {isEditingMetadata && (
+          <ProjectMetadataModal 
+            title={projectTitle} 
+            description={projectData?.description || ''} 
+            onClose={() => setIsEditingMetadata(false)} 
+            onSave={(newTitle, newDesc) => {
+              updateProjectMetadata(newTitle, newDesc);
+              setIsEditingMetadata(false);
+            }} 
+          />
+        )}
+
+        {isShareModalOpen && (
+          <ShareModal 
+            projectId={id} 
+            onClose={() => {
+              setIsShareModalOpen(false);
+              fetchCollaborators();
+            }} 
+          />
+        )}
       </main>
     </div>
   );