feat: Add quick wins batch (#42, #43, #25, #35, #20, #36, #39)

- #42: Allow spools heavier than theoretical max (remove weight clamps)
- #43: Show filament custom fields on spool detail page
- #25: Sort spools by custom fields and remaining weight
- #35: Global search box for spool list
- #20: Gallery view for spools (color grid with progress bars)
- #36: Spool-level color override with ColorPicker
- #39: Cost analytics endpoint, total spent & avg cost/kg stats
- Fix: Filament select refresh after inline creation
- Fix: Parse temperatures from filament comments

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

client/src/pages/spools/create.tsx

@@ -1,7 +1,7 @@
 import { MinusOutlined, PlusOutlined } from "@ant-design/icons";
 import { Create, useForm } from "@refinedev/antd";
 import { HttpError, IResourceComponentsProps, useTranslate } from "@refinedev/core";
-import { Alert, Button, DatePicker, Divider, Form, Input, InputNumber, Radio, Select, Typography } from "antd";
+import { Alert, Button, ColorPicker, DatePicker, Divider, Form, Input, InputNumber, Radio, Select, Typography } from "antd";
 import TextArea from "antd/es/input/TextArea";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
@@ -86,14 +86,23 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
     refetch: refetchFilaments,
   } = useGetFilamentSelectOptions();
 
+  // Track pending filament selection after inline creation
+  const [pendingFilamentId, setPendingFilamentId] = useState<number | null>(null);
+
   const handleFilamentCreated = async (filament: IFilament) => {
-    // Refetch filament list so the select options include the new filament
+    setPendingFilamentId(filament.id);
     await refetchFilaments();
-    // Select the newly created filament
-    form.setFieldValue("filament_id", filament.id);
     setIsFilamentModalOpen(false);
   };
 
+  // Set the filament_id once the new filament appears in the options
+  useEffect(() => {
+    if (pendingFilamentId !== null && internalSelectOptions?.some((opt) => opt.value === pendingFilamentId)) {
+      form.setFieldValue("filament_id", pendingFilamentId);
+      setPendingFilamentId(null);
+    }
+  }, [pendingFilamentId, internalSelectOptions]);
+
   const selectedFilamentID = Form.useWatch("filament_id", form);
   const selectedFilament = useMemo(() => {
     // id is a number of it's an internal filament, and a string of it's an external filament.
@@ -423,6 +432,15 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
           <InputNumber addonAfter="g" precision={1} />
         </Form.Item>
 
+        <Form.Item
+          label={t("spool.fields.color_hex")}
+          help={t("spool.fields_help.color_hex")}
+          name={["color_hex"]}
+          getValueFromEvent={(e) => e?.toHex()}
+        >
+          <ColorPicker allowClear format="hex" />
+        </Form.Item>
+
         <Form.Item hidden={true} name={["used_weight"]} initialValue={0}>
           <InputNumber value={usedWeight} />
         </Form.Item>