chore(frontend): real ESLint instead of a placeholder; fix hook order (FLAW-19)

eslint.config.js with the recommended JS/TypeScript rules and the React
hooks rules; npm run lint runs ESLint and is part of the image build.
Errors fail the build, the 24 exhaustive-deps findings stay warnings.

It found two real bugs: TaskDetailModal and ManageColumnsModal called
their hooks after 'if (!isOpen) return null', so the hook count changed
whenever the dialog opened or closed. Both are now a thin wrapper plus a
content component. Also removes unused imports and dead code (old task
list share handlers, an unused realtime status, an unused rollup).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Dockerfile

@@ -8,7 +8,7 @@ RUN npm install --no-audit --no-fund
 COPY frontend/ ./
 # Version shown in the header: the git tag for releases (set by CI), otherwise "<package version>-dev"
 ARG APP_VERSION=""
-RUN npx tsc --noEmit && npm run test:run && APP_VERSION="${APP_VERSION}" npm run build
+RUN npx tsc --noEmit && npm run lint && npm run test:run && APP_VERSION="${APP_VERSION}" npm run build
 
 # ==============================================================================
 # Stage 2: Go Backend Lint, Unit Tests & Binary Build (Cached Go module & sqlite layer)

frontend/eslint.config.js

@@ -0,0 +1,30 @@
+// Lint rules for the frontend (FLAW-19): real mistakes are errors, style is left to the code.
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  { ignores: ['dist', 'node_modules', 'coverage'] },
+  {
+    files: ['src/**/*.{ts,tsx}'],
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    languageOptions: {
+      ecmaVersion: 2022,
+      globals: globals.browser,
+    },
+    plugins: { 'react-hooks': reactHooks },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      // Error payloads and browser APIs without types are handled as any on purpose
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_', varsIgnorePattern: '^_', caughtErrors: 'none' }],
+      'no-empty': ['error', { allowEmptyCatch: true }],
+    },
+  },
+  {
+    files: ['public/sw.js'],
+    languageOptions: { globals: globals.serviceworker },
+    extends: [js.configs.recommended],
+  },
+);

frontend/package.json

@@ -8,7 +8,7 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "lint": "echo 'Linting passed'",
+    "lint": "eslint .",
     "test": "vitest",
     "test:run": "vitest run"
   },
@@ -22,17 +22,22 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@eslint/js": "9.17.0",
     "@testing-library/dom": "^10.4.2",
     "@testing-library/react": "^16.3.3",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.20",
+    "eslint": "9.17.0",
+    "eslint-plugin-react-hooks": "5.1.0",
     "fake-indexeddb": "^6.2.6",
+    "globals": "15.14.0",
     "jsdom": "^25.0.1",
     "postcss": "^8.4.49",
     "tailwindcss": "^3.4.17",
     "typescript": "^5.6.3",
+    "typescript-eslint": "8.18.2",
     "vite": "^5.4.11",
     "vitest": "^2.1.9"
   }

frontend/src/App.tsx

@@ -470,7 +470,7 @@ export const App: React.FC = () => {
       .getThemes()
       .then((themes) => handleCustomThemesChange(themes))
       .catch(() => {});
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+     
   }, [user?.id]);
 
   const refreshAll = useCallback(async () => {

frontend/src/components/CommandPalette.tsx

@@ -6,7 +6,6 @@ import {
   ShoppingCart,
   X,
   Loader2,
-  ArrowRight,
   CornerDownLeft,
 } from 'lucide-react';
 import { SearchHit } from '../lib/types';

frontend/src/features/help/HelpView.tsx

@@ -6,7 +6,6 @@ import {
   CheckSquare,
   Keyboard,
   Pin,
-  FolderTree,
   Sparkles,
   Command,
   Users,
@@ -19,14 +18,10 @@ import {
   Lock,
   ArrowLeft,
   X,
-  Smartphone,
-  RotateCcw,
   Heading1,
   ListTodo,
   Code,
   Download,
-  Flame,
-  Check,
 } from 'lucide-react';
 import { AboutModal } from '../../components/AboutModal';
 

frontend/src/features/lists/SharedListsView.tsx

@@ -7,10 +7,9 @@ import {
   Radio,
   Sparkles,
   X,
-  Hash,
   ShoppingCart,
 } from 'lucide-react';
-import { ListItem, SharedList, ListShare, Team, User, WSMessage } from '../../lib/types';
+import { ListItem, SharedList, Team, User, WSMessage } from '../../lib/types';
 import { api, triggerHaptic, createRealtimeConnection, RealtimeTransport } from '../../lib/api';
 import { UnifiedShareModal } from '../../components/UnifiedShareModal';
 import { AvatarStack, AvatarPerson } from '../../components/AvatarStack';
@@ -502,7 +501,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
     if (!sourceItem) return;
 
     const targetCatNormalized = targetCategory.trim();
-    let newCategory = targetCatNormalized;
+    const newCategory = targetCatNormalized;
     let newContent = sourceItem.content;
 
     if (!targetCatNormalized) {

frontend/src/features/settings/UserSettingsView.tsx

@@ -14,7 +14,6 @@ import {
   AlertCircle,
   Palette,
   Upload,
-  Camera,
   Pencil,
   Copy,
 } from 'lucide-react';

frontend/src/features/triage/ManageColumnsModal.tsx

@@ -8,7 +8,6 @@ import {
   RotateCcw,
   Check,
   Columns,
-  Layers,
 } from 'lucide-react';
 import { KanbanColumn } from '../../lib/types';
 import { triggerHaptic } from '../../lib/api';
@@ -28,15 +27,17 @@ export const DEFAULT_KANBAN_COLUMNS: KanbanColumn[] = [
   { id: 'done', name: 'Erledigt', isDone: true, color: 'emerald' },
 ];
 
-export const ManageColumnsModal: React.FC<ManageColumnsModalProps> = ({
+// Wrapper and content split so the hooks always run in the same number (see TaskDetailModal)
+export const ManageColumnsModal: React.FC<ManageColumnsModalProps> = (props) =>
+  props.isOpen ? <ManageColumnsModalContent {...props} /> : null;
+
+const ManageColumnsModalContent: React.FC<ManageColumnsModalProps> = ({
   isOpen,
   onClose,
   initialColumns,
   onSave,
   listTitle,
 }) => {
-  if (!isOpen) return null;
-
   const [columns, setColumns] = useState<KanbanColumn[]>(() => {
     return initialColumns && initialColumns.length > 0 ? initialColumns : DEFAULT_KANBAN_COLUMNS;
   });

frontend/src/features/triage/TaskDetailModal.tsx

@@ -7,19 +7,16 @@ import {
   FileText,
   Plus,
   CheckSquare,
-  Clock,
-  Layers,
   Hash,
   AlertTriangle,
   Flame,
-  ChevronRight,
   Folder,
   Webhook,
   Lock,
   UserPlus,
   Repeat,
 } from 'lucide-react';
-import { Thought, SubTask, TaskList, TaskListMember, KanbanColumn, User, Recurrence } from '../../lib/types';
+import { Thought, TaskList, TaskListMember, KanbanColumn, User, Recurrence } from '../../lib/types';
 import { UserAvatar } from '../../components/UserAvatar';
 import { UserAutocomplete } from '../UserAutocomplete';
 import { triggerHaptic } from '../../lib/api';
@@ -51,9 +48,13 @@ interface TaskDetailModalProps {
   readOnly?: boolean; // Task belongs to a list shared with "viewer" permission
 }
 
-export const TaskDetailModal: React.FC<TaskDetailModalProps> = ({
+// The wrapper decides whether the dialog is shown; the content holds all hooks, so their number never
+// changes between renders (hooks after an early return break React when isOpen flips)
+export const TaskDetailModal: React.FC<TaskDetailModalProps> = (props) =>
+  props.isOpen && props.task ? <TaskDetailModalContent {...props} task={props.task} /> : null;
+
+const TaskDetailModalContent: React.FC<TaskDetailModalProps & { task: Thought }> = ({
   task,
-  isOpen,
   onClose,
   activeColumns,
   taskLists,
@@ -75,8 +76,6 @@ export const TaskDetailModal: React.FC<TaskDetailModalProps> = ({
   onDeleteTask,
   readOnly = false,
 }) => {
-  if (!isOpen || !task) return null;
-
   const [titleDraft, setTitleDraft] = useState(task.content);
   const [isEditingTitle, setIsEditingTitle] = useState(false);
 
@@ -144,7 +143,7 @@ export const TaskDetailModal: React.FC<TaskDetailModalProps> = ({
 
   const handleAddTagSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    let cleaned = newTagDraft.trim().replace(/^#+/, '').toLowerCase();
+    const cleaned = newTagDraft.trim().replace(/^#+/, '').toLowerCase();
     if (!cleaned) return;
     const currentTags = Array.isArray(task.tags) ? [...task.tags] : [];
     if (!currentTags.includes(cleaned)) {
@@ -177,11 +176,6 @@ export const TaskDetailModal: React.FC<TaskDetailModalProps> = ({
     onUpdateDueDate(task, joinDue(addDays(daysOffset), splitDue(task.dueDate).time));
   };
 
-  const currentColumn = activeColumns.find((c) => c.id === task.kanbanStatus) ||
-    (task.isCompleted
-      ? activeColumns.find((c) => c.isDone) || activeColumns[activeColumns.length - 1]
-      : activeColumns.find((c) => !c.isDone) || activeColumns[0]);
-
   const subtasks = Array.isArray(task.subtasks) ? task.subtasks : [];
   const completedSubtasks = subtasks.filter((s) => s.isCompleted).length;
   const subtasksPercent = subtasks.length > 0 ? Math.round((completedSubtasks / subtasks.length) * 100) : 0;

frontend/src/features/triage/TasksView.tsx

@@ -15,19 +15,18 @@ import {
   Layers,
   Users,
   CheckSquare,
-  User as UserIcon,
+  User as 
   Lock,
   Hash,
   AlertTriangle,
   Flame,
   Settings,
-  ChevronDown,
   Folder,
   Filter,
   Webhook,
   Repeat,
 } from 'lucide-react';
-import { TaskList, Thought, SubTask, Team, User, TaskListShare, TaskListMember, KanbanColumn, PriorityLevel, Recurrence, RECURRENCE_LABELS } from '../../lib/types';
+import { TaskList, Thought, SubTask, Team, User, TaskListMember, KanbanColumn, PriorityLevel, Recurrence, RECURRENCE_LABELS } from '../../lib/types';
 import { formatDue, isDueToday, isOverdue, localDay, splitDue } from '../../lib/due';
 import { api, triggerHaptic } from '../../lib/api';
 import { UnifiedShareModal } from '../../components/UnifiedShareModal';
@@ -92,10 +91,6 @@ export const TasksView: React.FC<TasksViewProps> = ({
   // Share TaskList modal state
   const [showShareListModal, setShowShareListModal] = useState(false);
   const [sharingTaskList, setSharingTaskList] = useState<TaskList | null>(null);
-  const [addShareType, setAddShareType] = useState<'team' | 'user'>('team');
-  const [selectedShareTargetId, setSelectedShareTargetId] = useState('');
-  const [selectedShareUser, setSelectedShareUser] = useState<User | null>(null);
-  const [shareLoading, setShareLoading] = useState(false);
 
   // Detail modal state
   const [detailTaskId, setDetailTaskId] = useState<string | null>(null);
@@ -854,8 +849,6 @@ export const TasksView: React.FC<TasksViewProps> = ({
 
   const handleOpenShareModal = async (tl: TaskList) => {
     setSharingTaskList(tl);
-    setSelectedShareTargetId('');
-    setSelectedShareUser(null);
     setShowShareListModal(true);
     try {
       const [freshTeams, freshUsers, freshShares] = await Promise.all([
@@ -871,60 +864,6 @@ export const TasksView: React.FC<TasksViewProps> = ({
     }
   };
 
-  const handleAddShare = async () => {
-    if (!sharingTaskList) return;
-    const targetId = addShareType === 'team' ? selectedShareTargetId : selectedShareUser?.id;
-    if (!targetId) return;
-    setShareLoading(true);
-    triggerHaptic(15);
-    try {
-      await api.addTaskListShare(sharingTaskList.id, {
-        targetType: addShareType,
-        targetId: targetId,
-      });
-      const [freshLists, freshShares] = await Promise.all([
-        api.getTaskLists(),
-        api.getTaskListShares(sharingTaskList.id).catch(() => []),
-      ]);
-      setTaskLists(freshLists);
-      const updated = freshLists.find((l) => l.id === sharingTaskList.id);
-      if (updated) {
-        setSharingTaskList({ ...updated, shares: freshShares });
-      }
-      setSelectedShareTargetId('');
-      setSelectedShareUser(null);
-      await loadData();
-    } catch (err: any) {
-      alert(err.message || 'Fehler beim Hinzufügen der Freigabe');
-    } finally {
-      setShareLoading(false);
-    }
-  };
-
-  const handleRemoveShare = async (shareId: string) => {
-    if (!sharingTaskList) return;
-    if (!window.confirm('Freigabe wirklich aufheben?')) return;
-    setShareLoading(true);
-    triggerHaptic(15);
-    try {
-      await api.removeTaskListShare(sharingTaskList.id, shareId);
-      const [freshLists, freshShares] = await Promise.all([
-        api.getTaskLists(),
-        api.getTaskListShares(sharingTaskList.id).catch(() => []),
-      ]);
-      setTaskLists(freshLists);
-      const updated = freshLists.find((l) => l.id === sharingTaskList.id);
-      if (updated) {
-        setSharingTaskList({ ...updated, shares: freshShares });
-      }
-      await loadData();
-    } catch (err: any) {
-      alert(err.message || 'Fehler beim Entfernen der Freigabe');
-    } finally {
-      setShareLoading(false);
-    }
-  };
-
   const handleSaveColumns = async (newColumns: KanbanColumn[]) => {
     triggerHaptic(15);
     if (currentSelectedList && selectedListId !== 'all') {

frontend/src/features/workspace/CodeBlockItem.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useRef, useEffect } from 'react';
+import React, { useState, useMemo, useRef } from 'react';
 import Prism from 'prismjs';
 import 'prismjs/components/prism-python';
 import 'prismjs/components/prism-typescript';

frontend/src/features/workspace/DocumentEditor.tsx

@@ -14,7 +14,6 @@ import {
   Minimize2,
   Sparkles,
   Plus,
-  Search,
   Check,
   CloudOff,
   AlertTriangle,

frontend/src/features/workspace/OutlinerBlock.tsx

@@ -97,7 +97,6 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
   block,
   index,
   isLast,
-  maxAllowedLevel,
   hasChildren,
   isFocused,
   canEdit,

frontend/src/features/workspace/OutlinerTree.tsx

@@ -402,7 +402,7 @@ export const OutlinerTree = forwardRef<OutlinerTreeHandle, OutlinerTreeProps>(({
 
         // Explicit bullet or numbered list: - item, * item, • item, 1. item, 1) item
         const bulletMatch = strippedLine.match(/^[-*•]\s+(.*)$/);
-        const numMatch = strippedLine.match(/^\d+[\.\)]\s+(.*)$/);
+        const numMatch = strippedLine.match(/^\d+[.)]\s+(.*)$/);
         if (bulletMatch || numMatch) {
           pushCurrentItem();
           afterHeading = false;

frontend/src/features/workspace/WorkspaceView.tsx

@@ -18,15 +18,11 @@ import {
   ExternalLink,
   Sparkles,
   ArrowLeft,
-  CheckSquare,
   PanelLeftClose,
   PanelLeftOpen,
-  ChevronLeft,
-  Radio,
   Clock,
   AlertTriangle,
   Loader2,
-  Lock,
 } from 'lucide-react';
 import {
   Document,
@@ -44,10 +40,6 @@ import {
   api,
   onWebSocketMessage,
   triggerHaptic,
-  onRealtimeStatus,
-  isRealtimeConnected,
-  getRealtimeTransport,
-  RealtimeTransport,
 } from '../../lib/api';
 import { UnifiedShareModal } from '../../components/UnifiedShareModal';
 import { FormSheet } from '../../components/FormSheet';
@@ -347,7 +339,6 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
   const [newFolderCoords, setNewFolderCoords] = useState<{ x: number; y: number } | null>(null);
   const [newFolderParentPath, setNewFolderParentPath] = useState<string>('');
   const [newFolderName, setNewFolderName] = useState<string>('');
-  const [newFolderIsShared, setNewFolderIsShared] = useState<boolean>(false);
 
   const handleOpenNewFolder = (parentPath = '', e?: React.MouseEvent) => {
     setNewFolderParentPath(parentPath);
@@ -381,19 +372,9 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
     });
   }, []);
 
-  // Realtime connection status for top header indicator (identical to SharedListsView)
-  const [realtimeConnected, setRealtimeConnected] = useState<boolean>(() => isRealtimeConnected());
-  const [realtimeTransport, setRealtimeTransport] = useState<RealtimeTransport>(() => getRealtimeTransport());
   const [docSaveStatus, setDocSaveStatus] = useState<DocSaveStatus>('saved');
   const [docSaveError, setDocSaveError] = useState<string | null>(null);
 
-  useEffect(() => {
-    const unsub = onRealtimeStatus((connected, transport) => {
-      setRealtimeConnected(connected);
-      setRealtimeTransport(transport);
-    });
-    return unsub;
-  }, []);
 
   // Drag and Drop state
   const [draggingDocId, setDraggingDocId] = useState<string | null>(null);
@@ -960,22 +941,6 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
     return map;
   }, [allRollupTodos]);
 
-  const rollupTodosByNote = useMemo(() => {
-    const map = new Map<
-      string,
-      { doc: Document; items: { doc: Document; blockId: string; content: string; checked: boolean }[] }
-    >();
-    for (const item of allRollupTodos) {
-      const existing = map.get(item.doc.id);
-      if (existing) {
-        existing.items.push(item);
-      } else {
-        map.set(item.doc.id, { doc: item.doc, items: [item] });
-      }
-    }
-    return map;
-  }, [allRollupTodos]);
-
   const totalOpenTodos = useMemo(() => {
     let count = 0;
     for (const d of docs) {

frontend/src/lib/api.ts

@@ -17,7 +17,6 @@ import {
   SharedFolder,
   FolderShare,
   Space,
-  SpaceMember,
   SpaceShare,
   SystemSettings,
   SharingMode,
@@ -1544,7 +1543,7 @@ export async function connectWebSocket(): Promise<void> {
       }
     };
 
-    ws.onerror = (e) => {
+    ws.onerror = () => {
       clearTimeout(wsConnectionWatchdog);
       switchToSSE('WebSocket Fehler (Handshake/Verbindung verweigert)');
     };

frontend/src/lib/docSync/__tests__/diff.test.ts

@@ -49,7 +49,7 @@ describe('diffFlat', () => {
       return Math.floor((seed / 2147483648) * n);
     };
     let current: DocumentBlock[] = [B('x0', 0)];
-    let d = build(current);
+    const d = build(current);
     for (let step = 0; step < 300; step++) {
       const next = current.map((b) => ({ ...b }));
       const i = rnd(next.length);