fix(ui,server): Fix project icon updates and image upload issues

- Fix setProjectCustomIcon using wrong property name (customIcon -> customIconPath)
- Add currentProject state update to setProjectIcon and setProjectCustomIcon
- Fix data URL regex to handle all formats (e.g., charset=utf-8 in GIFs)
- Increase project icon size limit from 2MB to 5MB for animated GIFs
- Add toast notifications for upload validation errors
- Add image error fallback to folder icon in project switcher
- Make HttpApiClient get/put methods public for store access
- Fix TypeScript errors in app-store.ts (trashedAt type, font properties)

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

apps/ui/src/components/layout/project-switcher/components/edit-project-dialog.tsx

@@ -15,6 +15,7 @@ import { getAuthenticatedImageUrl } from '@/lib/api-fetch';
 import { getHttpApiClient } from '@/lib/http-api-client';
 import type { Project } from '@/lib/electron';
 import { IconPicker } from './icon-picker';
+import { toast } from 'sonner';
 
 interface EditProjectDialogProps {
   project: Project;
@@ -52,11 +53,18 @@ export function EditProjectDialog({ project, open, onOpenChange }: EditProjectDi
     // Validate file type
     const validTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
     if (!validTypes.includes(file.type)) {
+      toast.error(
+        `Invalid file type: ${file.type || 'unknown'}. Please use JPG, PNG, GIF or WebP.`
+      );
       return;
     }
 
-    // Validate file size (max 2MB for icons)
-    if (file.size > 2 * 1024 * 1024) {
+    // Validate file size (max 5MB for icons - allows animated GIFs)
+    const maxSize = 5 * 1024 * 1024;
+    if (file.size > maxSize) {
+      toast.error(
+        `File too large (${(file.size / 1024 / 1024).toFixed(2)} MB). Maximum size is 5 MB.`
+      );
       return;
     }
 
@@ -72,15 +80,24 @@ export function EditProjectDialog({ project, open, onOpenChange }: EditProjectDi
           file.type,
           project.path
         );
+
         if (result.success && result.path) {
           setCustomIconPath(result.path);
           // Clear the Lucide icon when custom icon is set
           setIcon(null);
+          toast.success('Icon uploaded successfully');
+        } else {
+          toast.error('Failed to upload icon');
         }
         setIsUploadingIcon(false);
       };
+      reader.onerror = () => {
+        toast.error('Failed to read file');
+        setIsUploadingIcon(false);
+      };
       reader.readAsDataURL(file);
     } catch {
+      toast.error('Failed to upload icon');
       setIsUploadingIcon(false);
     }
   };
@@ -162,7 +179,7 @@ export function EditProjectDialog({ project, open, onOpenChange }: EditProjectDi
                     {isUploadingIcon ? 'Uploading...' : 'Upload Custom Icon'}
                   </Button>
                   <p className="text-xs text-muted-foreground mt-1">
-                    PNG, JPG, GIF or WebP. Max 2MB.
+                    PNG, JPG, GIF or WebP. Max 5MB.
                   </p>
                 </div>
               </div>

apps/ui/src/components/layout/project-switcher/components/project-context-menu.tsx

@@ -59,7 +59,7 @@ interface ThemeButtonProps {
   /** Handler for pointer leave events (used to clear preview) */
   onPointerLeave: (e: React.PointerEvent) => void;
   /** Handler for click events (used to select theme) */
-  onClick: () => void;
+  onClick: (e: React.MouseEvent) => void;
 }
 
 /**
@@ -77,6 +77,7 @@ const ThemeButton = memo(function ThemeButton({
   const Icon = option.icon;
   return (
     <button
+      type="button"
       onPointerEnter={onPointerEnter}
       onPointerLeave={onPointerLeave}
       onClick={onClick}
@@ -145,7 +146,10 @@ const ThemeColumn = memo(function ThemeColumn({
             isSelected={selectedTheme === option.value}
             onPointerEnter={() => onPreviewEnter(option.value)}
             onPointerLeave={onPreviewLeave}
-            onClick={() => onSelect(option.value)}
+            onClick={(e) => {
+              e.stopPropagation();
+              onSelect(option.value);
+            }}
           />
         ))}
       </div>
@@ -193,7 +197,6 @@ export function ProjectContextMenu({
   const {
     moveProjectToTrash,
     theme: globalTheme,
-    setTheme,
     setProjectTheme,
     setPreviewTheme,
   } = useAppStore();
@@ -316,13 +319,24 @@ export function ProjectContextMenu({
 
   const handleThemeSelect = useCallback(
     (value: ThemeMode | typeof USE_GLOBAL_THEME) => {
+      // Clear any pending close timeout to prevent race conditions
+      if (closeTimeoutRef.current) {
+        clearTimeout(closeTimeoutRef.current);
+        closeTimeoutRef.current = null;
+      }
+
+      // Close menu first
+      setShowThemeSubmenu(false);
+      onClose();
+
+      // Then apply theme changes
       setPreviewTheme(null);
       const isUsingGlobal = value === USE_GLOBAL_THEME;
-      setTheme(isUsingGlobal ? globalTheme : value);
+      // Only set project theme - don't change global theme
+      // The UI uses getEffectiveTheme() which handles: previewTheme ?? projectTheme ?? globalTheme
       setProjectTheme(project.id, isUsingGlobal ? null : value);
-      setShowThemeSubmenu(false);
     },
-    [globalTheme, project.id, setPreviewTheme, setProjectTheme, setTheme]
+    [onClose, project.id, setPreviewTheme, setProjectTheme]
   );
 
   const handleConfirmRemove = useCallback(() => {
@@ -426,9 +440,13 @@ export function ProjectContextMenu({
                   <div className="p-2">
                     {/* Use Global Option */}
                     <button
+                      type="button"
                       onPointerEnter={() => handlePreviewEnter(globalTheme)}
                       onPointerLeave={handlePreviewLeave}
-                      onClick={() => handleThemeSelect(USE_GLOBAL_THEME)}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleThemeSelect(USE_GLOBAL_THEME);
+                      }}
                       className={cn(
                         'w-full flex items-center gap-2 px-3 py-2 rounded-md',
                         'text-sm font-medium text-left',

apps/ui/src/components/layout/project-switcher/components/project-switcher-item.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Folder, LucideIcon } from 'lucide-react';
 import * as LucideIcons from 'lucide-react';
 import { cn, sanitizeForTestId } from '@/lib/utils';
@@ -19,6 +20,8 @@ export function ProjectSwitcherItem({
   onClick,
   onContextMenu,
 }: ProjectSwitcherItemProps) {
+  const [imageError, setImageError] = useState(false);
+
   // Convert index to hotkey label: 0 -> "1", 1 -> "2", ..., 8 -> "9", 9 -> "0"
   const hotkeyLabel =
     hotkeyIndex !== undefined && hotkeyIndex >= 0 && hotkeyIndex <= 9
@@ -35,7 +38,7 @@ export function ProjectSwitcherItem({
   };
 
   const IconComponent = getIconComponent();
-  const hasCustomIcon = !!project.customIconPath;
+  const hasCustomIcon = !!project.customIconPath && !imageError;
 
   // Combine project.id with sanitized name for uniqueness and readability
   // Format: project-switcher-{id}-{sanitizedName}
@@ -74,6 +77,7 @@ export function ProjectSwitcherItem({
             'w-8 h-8 rounded-lg object-cover transition-all duration-200',
             isActive ? 'ring-1 ring-brand-500/50' : 'group-hover:scale-110'
           )}
+          onError={() => setImageError(true)}
         />
       ) : (
         <IconComponent

apps/ui/src/components/layout/sidebar/components/project-selector-with-options.tsx

@@ -100,14 +100,8 @@ export function ProjectSelectorWithOptions({
 
   const { sensors, handleDragEnd } = useDragAndDrop({ projects, reorderProjects });
 
-  const {
-    globalTheme,
-    setTheme,
-    setProjectTheme,
-    setPreviewTheme,
-    handlePreviewEnter,
-    handlePreviewLeave,
-  } = useProjectTheme();
+  const { globalTheme, setProjectTheme, setPreviewTheme, handlePreviewEnter, handlePreviewLeave } =
+    useProjectTheme();
 
   if (!sidebarOpen || projects.length === 0) {
     return null;
@@ -281,11 +275,8 @@ export function ProjectSelectorWithOptions({
                   onValueChange={(value) => {
                     if (currentProject) {
                       setPreviewTheme(null);
-                      if (value !== '') {
-                        setTheme(value as ThemeMode);
-                      } else {
-                        setTheme(globalTheme);
-                      }
+                      // Only set project theme - don't change global theme
+                      // The UI uses getEffectiveTheme() which handles: previewTheme ?? projectTheme ?? globalTheme
                       setProjectTheme(
                         currentProject.id,
                         value === '' ? null : (value as ThemeMode)

apps/ui/src/components/layout/sidebar/components/theme-menu-item.tsx

@@ -9,19 +9,15 @@ export const ThemeMenuItem = memo(function ThemeMenuItem({
 }: ThemeMenuItemProps) {
   const Icon = option.icon;
   return (
-    <div
-      key={option.value}
+    <DropdownMenuRadioItem
+      value={option.value}
+      data-testid={`project-theme-${option.value}`}
+      className="text-xs py-1.5"
       onPointerEnter={() => onPreviewEnter(option.value)}
       onPointerLeave={onPreviewLeave}
     >
-      <DropdownMenuRadioItem
-        value={option.value}
-        data-testid={`project-theme-${option.value}`}
-        className="text-xs py-1.5"
-      >
-        <Icon className="w-3.5 h-3.5 mr-1.5" style={{ color: option.color }} />
-        <span>{option.label}</span>
-      </DropdownMenuRadioItem>
-    </div>
+      <Icon className="w-3.5 h-3.5 mr-1.5" style={{ color: option.color }} />
+      <span>{option.label}</span>
+    </DropdownMenuRadioItem>
   );
 });

apps/ui/src/components/views/project-settings-view/project-identity-section.tsx

@@ -68,10 +68,10 @@ export function ProjectIdentitySection({ project }: ProjectIdentitySectionProps)
       return;
     }
 
-    // Validate file size (max 2MB for icons)
-    if (file.size > 2 * 1024 * 1024) {
+    // Validate file size (max 5MB for icons - allows animated GIFs)
+    if (file.size > 5 * 1024 * 1024) {
       toast.error('File too large', {
-        description: 'Please upload an image smaller than 2MB.',
+        description: 'Please upload an image smaller than 5MB.',
       });
       return;
     }
@@ -208,7 +208,7 @@ export function ProjectIdentitySection({ project }: ProjectIdentitySectionProps)
                   {isUploadingIcon ? 'Uploading...' : 'Upload Custom Icon'}
                 </Button>
                 <p className="text-xs text-muted-foreground mt-1">
-                  PNG, JPG, GIF or WebP. Max 2MB.
+                  PNG, JPG, GIF or WebP. Max 5MB.
                 </p>
               </div>
             </div>