wip(handoff): start issue cleanup plan sections 1 and 2

Co-Authored-By: Codex <noreply@openai.com>

frontend/src/components/library/AddToFolderMenu.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from 'react'
+import { useCallback, useState, useEffect, useRef } from 'react'
 import { FolderPlus, Check, Plus } from 'lucide-react'
 import { foldersApi } from '@/api/folders'
 import type { FolderListItem } from '@/types'
@@ -16,26 +16,7 @@ export function AddToFolderMenu({ treeId, onFolderCreated }: AddToFolderMenuProp
   const [isLoading, setIsLoading] = useState(false)
   const menuRef = useRef<HTMLDivElement>(null)
 
-  useEffect(() => {
-    if (isOpen) {
-      loadFoldersAndAssignments()
-    }
-  }, [isOpen, treeId])
-
-  // Close on outside click
-  useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
-        setIsOpen(false)
-      }
-    }
-    if (isOpen) {
-      document.addEventListener('mousedown', handleClickOutside)
-    }
-    return () => document.removeEventListener('mousedown', handleClickOutside)
-  }, [isOpen])
-
-  const loadFoldersAndAssignments = async () => {
+  const loadFoldersAndAssignments = useCallback(async () => {
     setIsLoading(true)
     try {
       const foldersData = await foldersApi.list()
@@ -59,7 +40,26 @@ export function AddToFolderMenu({ treeId, onFolderCreated }: AddToFolderMenuProp
     } finally {
       setIsLoading(false)
     }
-  }
+  }, [treeId])
+
+  useEffect(() => {
+    if (isOpen) {
+      loadFoldersAndAssignments()
+    }
+  }, [isOpen, loadFoldersAndAssignments])
+
+  // Close on outside click
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        setIsOpen(false)
+      }
+    }
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside)
+    }
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [isOpen])
 
   const toggleFolder = async (folderId: string) => {
     try {

frontend/src/components/library/FolderEditModal.tsx

@@ -56,6 +56,14 @@ function getIndentedName(folders: FolderListItem[], folderId: string): string {
   return indent + (depth > 1 ? '└ ' : '') + (folder?.name || '')
 }
 
+// Get path string for sorting
+function getPath(allFolders: FolderListItem[], folderId: string): string {
+  const f = allFolders.find((x) => x.id === folderId)
+  if (!f) return ''
+  if (!f.parent_id) return f.name
+  return getPath(allFolders, f.parent_id) + '/' + f.name
+}
+
 export function FolderEditModal({
   folder,
   parentId: initialParentId,
@@ -110,14 +118,6 @@ export function FolderEditModal({
       })
   }, [folder, folders])
 
-  // Get path string for sorting
-  function getPath(allFolders: FolderListItem[], folderId: string): string {
-    const f = allFolders.find((x) => x.id === folderId)
-    if (!f) return ''
-    if (!f.parent_id) return f.name
-    return getPath(allFolders, f.parent_id) + '/' + f.name
-  }
-
   useEffect(() => {
     if (folder) {
       setName(folder.name)

frontend/src/components/library/ShareTreeModal.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useCallback, useState, useEffect } from 'react'
 import { X, Copy, Check, Link2, Users, Lock, Globe } from 'lucide-react'
 import type { TreeListItem, TreeShare, TreeVisibility } from '@/types'
 import { treesApi } from '@/api/trees'
@@ -20,16 +20,7 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
   const [allowForking, setAllowForking] = useState(true)
   const [visibility, setVisibility] = useState<TreeVisibility>('private')
 
-  useEffect(() => {
-    if (isOpen) {
-      loadShares()
-      // Reset state
-      setCopied(false)
-      setAllowForking(true)
-    }
-  }, [isOpen, tree.id])
-
-  const loadShares = async () => {
+  const loadShares = useCallback(async () => {
     try {
       const sharesData = await treesApi.listShares(tree.id)
       setShares(sharesData)
@@ -40,7 +31,16 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
     } catch (err) {
       console.error('Failed to load shares:', err)
     }
-  }
+  }, [tree.id])
+
+  useEffect(() => {
+    if (isOpen) {
+      loadShares()
+      // Reset state
+      setCopied(false)
+      setAllowForking(true)
+    }
+  }, [isOpen, loadShares])
 
   const handleGenerateLink = async () => {
     setIsGenerating(true)