Fix all-items page refreshing entire list on item edit

Use createResource's mutate() for surgical local updates instead of
refetching the full item list, preserving scroll position and context.

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

Author: garyo

src/components/all-items/AllItemsPage.tsx

@@ -30,7 +30,9 @@ export function AllItemsPage() {
   });
 
   // Fetch all items
-  const [items, { refetch: refetchItems }] = createResource<MasterItemWithCategory[]>(async () => {
+  const [items, { refetch: refetchItems, mutate: mutateItems }] = createResource<
+    MasterItemWithCategory[]
+  >(async () => {
     return fetchWithErrorHandling(
       () => api.get<MasterItemWithCategory[]>(endpoints.masterItems),
       'Failed to load items'
@@ -77,12 +79,21 @@ export function AllItemsPage() {
     const response = await api.delete(endpoints.masterItem(id));
     if (response.success) {
       showToast('success', 'Item deleted successfully');
-      refetchItems();
+      mutateItems((prev) => prev?.filter((item) => item.id !== id));
     } else {
       showToast('error', response.error || 'Failed to delete item');
     }
   };
 
+  const handleItemUpdated = (updatedItem: MasterItemWithCategory) => {
+    mutateItems((prev) => prev?.map((item) => (item.id === updatedItem.id ? updatedItem : item)));
+  };
+
+  const handleItemAdded = () => {
+    // New items need a full refetch since we don't have the server-generated id/category data
+    refetchItems();
+  };
+
   const handleDataChanged = () => {
     refetchCategories();
     refetchItems();
@@ -184,7 +195,8 @@ export function AllItemsPage() {
               categories={categories}
               bagTemplates={bagTemplates}
               onDeleteItem={handleDeleteItem}
-              onItemSaved={refetchItems}
+              onItemUpdated={handleItemUpdated}
+              onItemAdded={handleItemAdded}
               onCategoriesSaved={handleDataChanged}
               onBagTemplatesSaved={handleBagTemplatesChanged}
             />

src/components/all-items/AllItemsPageTabs.tsx

@@ -10,7 +10,8 @@ interface AllItemsPageTabsProps {
   categories: Accessor<Category[] | undefined>;
   bagTemplates: Accessor<BagTemplate[] | undefined>;
   onDeleteItem: (id: string) => void;
-  onItemSaved: () => void;
+  onItemUpdated: (item: MasterItemWithCategory) => void;
+  onItemAdded: () => void;
   onCategoriesSaved: () => void;
   onBagTemplatesSaved: () => void;
 }
@@ -50,7 +51,8 @@ export function AllItemsPageTabs(props: AllItemsPageTabsProps) {
           items={props.items}
           categories={props.categories}
           onDeleteItem={props.onDeleteItem}
-          onItemSaved={props.onItemSaved}
+          onItemUpdated={props.onItemUpdated}
+          onItemAdded={props.onItemAdded}
         />
       </TabPanel>
 

src/components/all-items/ItemsList.tsx

@@ -5,7 +5,7 @@
  * Extracted from AllItemsPage for better separation of concerns
  */
 
-import { createSignal, createResource, createMemo, For, Show, type Accessor } from 'solid-js';
+import { createSignal, createMemo, For, Show, type Accessor } from 'solid-js';
 import { Input } from '../ui/Input';
 import { Button } from '../ui/Button';
 import { Combobox, type ComboboxItem } from '../ui/Combobox';
@@ -20,7 +20,8 @@ interface ItemsListProps {
   items: Accessor<MasterItemWithCategory[] | undefined>;
   categories: Accessor<Category[] | undefined>;
   onDeleteItem: (id: string) => void;
-  onItemSaved?: () => void;
+  onItemUpdated: (item: MasterItemWithCategory) => void;
+  onItemAdded: () => void;
 }
 
 export function ItemsList(props: ItemsListProps) {
@@ -113,7 +114,7 @@ export function ItemsList(props: ItemsListProps) {
       setNewCategoryId('');
       setNewQuantity(1);
       setNewIsContainer(false);
-      props.onItemSaved?.();
+      props.onItemAdded();
     } else {
       showToast('error', response.error || 'Failed to add item');
     }
@@ -145,22 +146,34 @@ export function ItemsList(props: ItemsListProps) {
       return;
     }
 
-    setUpdating(true);
+    const itemId = editingItemId()!;
+    const originalItem = props.items()?.find((i) => i.id === itemId);
+    if (!originalItem) return;
 
-    const response = await api.put(endpoints.masterItem(editingItemId()!), {
+    const patchData = {
       name: editName().trim(),
       description: editDescription().trim() || null,
       category_id: editCategoryId() || null,
       default_quantity: editQuantity(),
       is_container: editIsContainer(),
-    });
+    };
+
+    setUpdating(true);
+
+    const response = await api.put(endpoints.masterItem(itemId), patchData);
 
     setUpdating(false);
 
     if (response.success) {
       showToast('success', 'Item updated');
+      const category = props.categories()?.find((c) => c.id === patchData.category_id);
+      const updatedItem: MasterItemWithCategory = {
+        ...originalItem,
+        ...patchData,
+        category_name: category?.name || null,
+      };
       cancelEdit();
-      props.onItemSaved?.();
+      props.onItemUpdated(updatedItem);
     } else {
       showToast('error', response.error || 'Failed to update item');
     }