fix: web linter issues

apps/web/components/kanban-board.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState, useSyncExternalStore } from 'react';
 import {
   DndContext,
   DragEndEvent,
@@ -73,13 +73,14 @@ export function KanbanBoard() {
   const [tasks, setTasks] = useState<Task[]>(initialTasks);
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [activeTaskId, setActiveTaskId] = useState<string | null>(null);
-  const [isMounted, setIsMounted] = useState(false);
   const [activeViewId, setActiveViewId] = useState('team');
   const [editingTaskId, setEditingTaskId] = useState<string | null>(null);
 
-  useEffect(() => {
-    setIsMounted(true);
-  }, []);
+  const isMounted = useSyncExternalStore(
+    () => () => {},
+    () => true,
+    () => false
+  );
 
   const sensors = useSensors(
     useSensor(PointerSensor, {
@@ -188,6 +189,7 @@ export function KanbanBoard() {
         </div>
       </header>
       <TaskCreateDialog
+        key={`${editingTaskId ?? 'new'}-${isDialogOpen ? 'open' : 'closed'}`}
         open={isDialogOpen}
         onOpenChange={(open) => {
           setIsDialogOpen(open);

apps/web/components/kanban-column.tsx

@@ -42,7 +42,7 @@ export function KanbanColumn({ column, tasks, onEditTask }: KanbanColumnProps) {
       </div>
 
       {/* Tasks */}
-      <div className="flex-1 min-h-0 overflow-y-auto overflow-x-hidden space-y-2 px-2 pt-2">
+      <div className="flex-1 min-h-0 overflow-y-auto overflow-x-hidden space-y-2 px-2 pt-3">
         {tasks.length === 0 ? (
           <p className="text-sm text-muted-foreground text-center mt-8">No tasks yet</p>
         ) : (

apps/web/components/task-create-dialog.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState, FormEvent } from 'react';
+import { useState, FormEvent } from 'react';
 import {
   AlertDialog,
   AlertDialogContent,
@@ -32,14 +32,8 @@ export function TaskCreateDialog({
   initialValues,
   submitLabel = 'Create',
 }: TaskCreateDialogProps) {
-  const [title, setTitle] = useState('');
-  const [description, setDescription] = useState('');
-
-  useEffect(() => {
-    if (!open) return;
-    setTitle(initialValues?.title ?? '');
-    setDescription(initialValues?.description ?? '');
-  }, [open, initialValues]);
+  const [title, setTitle] = useState(initialValues?.title ?? '');
+  const [description, setDescription] = useState(initialValues?.description ?? '');
 
   const handleSubmit = (e: FormEvent) => {
     e.preventDefault();

apps/web/components/theme-toggle.tsx

@@ -3,15 +3,15 @@
 import { useTheme } from 'next-themes';
 import { IconMoon, IconSun } from '@tabler/icons-react';
 import { Button } from '@/components/ui/button';
-import { useEffect, useState } from 'react';
+import { useSyncExternalStore } from 'react';
 
 export function ThemeToggle() {
   const { theme, setTheme } = useTheme();
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
+  const mounted = useSyncExternalStore(
+    () => () => {},
+    () => true,
+    () => false
+  );
 
   if (!mounted) {
     return null;