feat: Allow direct icon upload when updating an item in the item form.

web/src/components/item-form.tsx

@@ -32,7 +32,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
 import { ImageUploader } from "@/components/image-uploader";
 import { EffectEditor } from "@/components/effect-editor";
-import { useCreateItem, useUpdateItem, type ItemWithUsage, type CreateItemData } from "@/hooks/use-items";
+import { useCreateItem, useUpdateItem, useUploadItemIcon, type ItemWithUsage, type CreateItemData } from "@/hooks/use-items";
 import { Loader2, Coins, FileText, Image, Zap } from "lucide-react";
 
 // Form schema
@@ -72,6 +72,7 @@ export function ItemForm({ initialData, onSuccess, onCancel }: ItemFormProps) {
     const isEditMode = !!initialData;
     const { createItem, loading: createLoading } = useCreateItem();
     const { updateItem, loading: updateLoading } = useUpdateItem();
+    const { uploadIcon, loading: uploadIconLoading } = useUploadItemIcon();
     const [imageFile, setImageFile] = useState<File | null>(null);
     const [existingImageUrl, setExistingImageUrl] = useState<string | null>(null);
 
@@ -123,7 +124,12 @@ export function ItemForm({ initialData, onSuccess, onCancel }: ItemFormProps) {
 
         if (isEditMode && initialData) {
             const result = await updateItem(initialData.id, itemData);
+
+            // If update was successful and we have a new image, upload it
             if (result) {
+                if (imageFile) {
+                    await uploadIcon(initialData.id, imageFile);
+                }
                 onSuccess();
             }
         } else {
@@ -134,7 +140,7 @@ export function ItemForm({ initialData, onSuccess, onCancel }: ItemFormProps) {
         }
     };
 
-    const isLoading = createLoading || updateLoading;
+    const isLoading = createLoading || updateLoading || uploadIconLoading;
 
     return (
         <Form {...form}>
@@ -288,13 +294,7 @@ export function ItemForm({ initialData, onSuccess, onCancel }: ItemFormProps) {
                         <ImageUploader
                             existingUrl={existingImageUrl}
                             onFileSelect={setImageFile}
-                            disabled={isEditMode}
                         />
-                        {isEditMode && (
-                            <p className="text-xs text-muted-foreground mt-2">
-                                To update the image, use the icon upload in the items table after saving.
-                            </p>
-                        )}
                     </CardContent>
                 </Card>