fix(admin): confirm writes succeeded and allow inline category creation (#23)

Reported from testing: the item form said "Item added" for a save that
never happened.

saveItem and the other admin calls returned res.json() without checking
res.ok, so a 4xx/5xx resolved normally and every caller reported success
for a write the server had rejected. That is worse than failing outright,
because nothing prompts the user to look for the missing row. All admin
calls now throw on a non-OK response, and the handlers report the error,
keep the form open so entered values survive, and only claim success once
the server has accepted the write. Mark sold/available previously did
nothing visible on failure at all.

Categories can now be created from the item form, as tags already could.
Previously a category that did not exist yet meant abandoning a
half-filled form for the Categories tab. New categories are created at
the top level; nesting stays in the Categories tab.

The control lives in its own component: inline, every keystroke
re-rendered the whole Inventory component and rebuilt the category tree,
which visibly jittered the open popup. It sits above the tree rather than
below it, where a long list both hid it and made its position depend on
the list's measured height. The tree no longer expands everything on
open, which does not scale past a screenful; it has search instead.

The app now honours prefers-reduced-motion by disabling antd transitions,
and the e2e suite runs with that preference set.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

frontend/src/admin/Admin.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import {
   Layout, Table, Button, Form, Input, InputNumber, Upload, Modal,
   Space, Tag, Typography, Switch, message, Image as AntImage, theme, Tabs,
-  TreeSelect, Select
+  Select
 } from 'antd';
 import { UploadOutlined, DeleteOutlined } from '@ant-design/icons';
 import type { UploadFile } from 'antd/es/upload/interface';
@@ -14,26 +14,12 @@ import {
   fetchAdminItems, saveItem, deleteItem, deleteItemImage, markSold, markAvailable,
   fetchAdminCategories, fetchAdminTags
 } from '../api';
-import { buildCategoryTree, CategoryNode } from '../filters';
 import { useThemeMode } from '../theme/ThemeContext';
 import Customers from './Customers';
 import Settings from './Settings';
 import Categories from './Categories';
 import Tags from './Tags';
-
-interface CategoryTreeOption {
-  value: number;
-  title: string;
-  children?: CategoryTreeOption[];
-}
-
-function toCategoryTreeData(nodes: CategoryNode[]): CategoryTreeOption[] {
-  return nodes.map(node => ({
-    value: node.id,
-    title: node.name,
-    children: node.children.length ? toCategoryTreeData(node.children) : undefined
-  }));
-}
+import CategoryTreeSelect from './CategoryTreeSelect';
 
 const { Header, Content } = Layout;
 const { Title } = Typography;
@@ -47,6 +33,7 @@ function Inventory() {
   const [description, setDescription] = useState<string>('');
   const [categories, setCategories] = useState<Category[]>([]);
   const [tags, setTags] = useState<TagRecord[]>([]);
+  const [saving, setSaving] = useState(false);
   const { mode } = useThemeMode();
 
   const load = () => fetchAdminItems().then(setItems);
@@ -94,21 +81,55 @@ function Inventory() {
     fd.append('category_id', values.category_id == null ? '' : String(values.category_id));
     fd.append('tags', JSON.stringify(values.tags ?? []));
     fileList.forEach(f => { if (f.originFileObj) fd.append('images', f.originFileObj as File); });
-    await saveItem(editingItem?.id ?? null, fd);
+
+    // Only report success, close the form, and discard the entered values once
+    // the server has actually accepted the write.
+    setSaving(true);
+    try {
+      await saveItem(editingItem?.id ?? null, fd);
+    } catch (err) {
+      message.error(`Couldn't save item — ${(err as Error).message}`);
+      return;
+    } finally {
+      setSaving(false);
+    }
+
     message.success(editingItem ? 'Item updated' : 'Item added');
     setModalOpen(false);
     load();
     loadOptions();
   }
 
+  // Status changes silently did nothing on failure — the row simply stayed put
+  // with no indication why.
+  async function handleStatusChange(action: (id: number) => Promise<Item>, id: number, label: string) {
+    try {
+      await action(id);
+    } catch (err) {
+      message.error(`Couldn't ${label} — ${(err as Error).message}`);
+      return;
+    }
+    load();
+  }
+
   async function handleDelete(id: number) {
-    await deleteItem(id);
+    try {
+      await deleteItem(id);
+    } catch (err) {
+      message.error(`Couldn't delete item — ${(err as Error).message}`);
+      return;
+    }
     message.success('Item deleted');
     load();
   }
 
   async function handleDeleteImage(itemId: number, imageId: number) {
-    await deleteItemImage(itemId, imageId);
+    try {
+      await deleteItemImage(itemId, imageId);
+    } catch (err) {
+      message.error(`Couldn't remove image — ${(err as Error).message}`);
+      return;
+    }
     message.success('Image removed');
     load();
     setEditingItem(prev => prev && prev.id === itemId
@@ -159,8 +180,8 @@ function Inventory() {
           <Button size="small" onClick={() => openEdit(item)}>Edit</Button>
           <Button size="small" danger onClick={() => handleDelete(item.id)}>Delete</Button>
           {item.status !== 'sold'
-            ? <Button size="small" onClick={() => markSold(item.id).then(load)}>Mark Sold</Button>
-            : <Button size="small" onClick={() => markAvailable(item.id).then(load)}>Mark Available</Button>}
+            ? <Button size="small" onClick={() => handleStatusChange(markSold, item.id, 'mark sold')}>Mark Sold</Button>
+            : <Button size="small" onClick={() => handleStatusChange(markAvailable, item.id, 'mark available')}>Mark Available</Button>}
         </Space>
       )
     }
@@ -174,7 +195,7 @@ function Inventory() {
       </div>
       <Table rowKey="id" dataSource={items} columns={columns} scroll={{ x: true }} />
 
-      <Modal title={editingItem ? 'Edit Item' : 'Add Item'} open={modalOpen} onOk={handleOk} onCancel={() => setModalOpen(false)} destroyOnClose width={720}>
+      <Modal title={editingItem ? 'Edit Item' : 'Add Item'} open={modalOpen} onOk={handleOk} confirmLoading={saving} onCancel={() => setModalOpen(false)} destroyOnHidden width={720}>
         <div data-color-mode={mode}>
           <Form form={form} layout="vertical">
             <Form.Item name="name" label="Name" rules={[{ required: true }]}>
@@ -187,13 +208,7 @@ function Inventory() {
               <InputNumber min={0} step={0.01} style={{ width: '100%' }} />
             </Form.Item>
             <Form.Item name="category_id" label="Category">
-              <TreeSelect
-                allowClear
-                placeholder="Uncategorized"
-                treeDefaultExpandAll
-                treeData={toCategoryTreeData(buildCategoryTree(categories))}
-                style={{ width: '100%' }}
-              />
+              <CategoryTreeSelect categories={categories} onCategoriesChanged={setCategories} />
             </Form.Item>
             <Form.Item
               name="tags"