fix: Improve type safety in task editing and update handling of category selection

Author: nannany

CLAUDE.md

@@ -113,6 +113,71 @@ X_INTEGRATION_ID=your_integration_id
 - Edge Functions: Deno test framework
 - Manual testing guide available for task-management function
 
+## Build Requirements and Quality Gates
+
+**CRITICAL**: Before completing any task, ALL of the following must pass:
+
+### 1. TypeScript Compilation
+```bash
+cd ui
+npm run build
+```
+- **Must succeed without errors**
+- **Must not use `any` types** - Use proper TypeScript interfaces
+- **Must not have unsafe type assertions** - Prefer type guards over `as unknown as`
+
+### 2. Code Formatting
+```bash
+npx prettier --check "ui/**/*.{ts,tsx,js,jsx,json,md,yml}"
+```
+- **Must pass without formatting issues**
+
+### 3. Tests
+```bash
+cd ui
+npm test
+```
+- **All tests must pass**
+
+### Common TypeScript Issues to Avoid
+
+1. **Never use `any` types**:
+   ```typescript
+   // ❌ Bad
+   editingField: any;
+   
+   // ✅ Good
+   editingField: EditingField | null;
+   ```
+
+2. **Use proper type imports**:
+   ```typescript
+   // ✅ Import types when needed
+   import { EditingField } from "./types";
+   ```
+
+3. **Avoid unsafe type assertions**:
+   ```typescript
+   // ❌ Avoid this pattern
+   (data as unknown as Category[])
+   
+   // ✅ Prefer type guards or proper types
+   data as Category[]
+   ```
+
+4. **Ensure prop interfaces match usage**:
+   - When adding new props, update both interface definitions and component usage
+   - TaskEditProps should match actual component prop requirements
+
+### Build Failure Recovery
+
+If `npm run build` fails:
+1. Read the TypeScript error carefully
+2. Fix type issues systematically
+3. Never suppress errors with `any` types
+4. Update interfaces to match actual usage
+5. Test the build again before considering task complete
+
 ## Memories
 
 - Be sure to run test as a completion check.

ui/src/components/task/SortableTask.tsx

@@ -11,10 +11,13 @@ import { EndTimeField } from "./EndTimeField";
 import { TaskCategoryField } from "./TaskCategoryField";
 import { TaskMetaInfo } from "./TaskMetaInfo";
 import { Task, Category } from "@/types/task";
+import { EditingField } from "./types";
 
 interface TaskEditActions {
-  editingField: any;
+  editingField: EditingField | null;
   editValue: string;
+  setEditingField: (field: EditingField | null) => void;
+  setEditValue: (value: string) => void;
   handleEditStart: (
     taskId: string,
     field:
@@ -26,10 +29,8 @@ interface TaskEditActions {
     value: string,
   ) => void;
   handleEditChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  handleEditSave: () => void;
+  handleEditSave: (customValue?: string) => void;
   handleKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-  setEditValue: (value: string) => void;
-  setEditingField: (field: any) => void;
 }
 
 interface TaskActions {

ui/src/components/task/TaskCategoryField.tsx

@@ -6,12 +6,9 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import { ChevronDown, Tag } from "lucide-react";
-import { createClient } from "@/lib/supabase/client";
 import { TaskEditProps } from "./types";
 import { Category } from "@/types/task";
 
-const supabase = createClient();
-
 interface TaskCategoryFieldProps extends TaskEditProps {
   categories: Category[];
 }
@@ -21,7 +18,8 @@ export const TaskCategoryField = ({
   editingField,
   onEditStart,
   setEditValue,
-  setEditingField,
+  setEditingField: _setEditingField,
+  handleEditSave,
   categories,
 }: TaskCategoryFieldProps) => {
   const [popoverOpen, setPopoverOpen] = useState(false);
@@ -37,26 +35,9 @@ export const TaskCategoryField = ({
   const handleCategorySelect = (categoryId: string) => {
     setPopoverOpen(false);
     setEditValue(categoryId);
-
-    if (editingField) {
-      const { taskId } = editingField;
-      const updateData = { category_id: categoryId };
-
-      const updateTask = async () => {
-        const { error } = await supabase
-          .from("tasks")
-          .update(updateData)
-          .eq("id", taskId);
-
-        if (error) {
-          console.error("Error updating task category:", error);
-        } else {
-          setEditingField(null);
-        }
-      };
-
-      updateTask();
-    }
+    
+    // useTaskEditのhandleEditSaveを使用してグローバル状態も更新
+    handleEditSave(categoryId);
   };
 
   // カテゴリの色を取得

ui/src/hooks/useTaskEdit.ts

@@ -57,6 +57,8 @@ export const useTaskEdit = (dispatch: React.Dispatch<TaskAction>) => {
       updateData[field] = valueToSave
         ? new Date(valueToSave).toISOString()
         : null;
+    } else if (field === "category_id") {
+      updateData.category_id = valueToSave || null;
     }
 
     const { error } = await supabase