feat: Add inline creation modals for filament and vendor (#1)

When creating a spool, users can now create a new filament directly
from the filament dropdown without leaving the page. Similarly, when
creating a filament, users can create a new vendor inline.

New components:
- VendorCreateModal: Simple modal for quick vendor creation
- FilamentCreateModal: Modal with essential fields + nested vendor creation

Changes:
- Added dropdownRender to filament Select in spool create page
- Added dropdownRender to vendor Select in filament create page
- Added translation keys for success messages and placeholders
- Pre-fills sensible defaults (diameter 1.75mm, density 1.24 g/cm³)

Closes #1

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

client/src/pages/spools/create.tsx

@@ -1,12 +1,13 @@
 import { MinusOutlined, PlusOutlined } from "@ant-design/icons";
 import { Create, useForm } from "@refinedev/antd";
-import { HttpError, IResourceComponentsProps, useTranslate } from "@refinedev/core";
+import { HttpError, IResourceComponentsProps, useInvalidate, useTranslate } from "@refinedev/core";
 import { Alert, Button, 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";
 import { useEffect, useMemo, useState } from "react";
 import { ExtraFieldFormItem, ParsedExtras, StringifiedExtras } from "../../components/extraFields";
+import { FilamentCreateModal } from "../../components/filamentCreateModal";
 import { useSpoolmanLocations } from "../../components/otherModels";
 import { searchMatches } from "../../utils/filtering";
 import "../../utils/overrides.css";
@@ -14,6 +15,7 @@ import { formatNumberOnUserInput, numberParser, numberParserAllowEmpty } from ".
 import { EntityType, useGetFields } from "../../utils/queryFields";
 import { getCurrencySymbol, useCurrency } from "../../utils/settings";
 import { createFilamentFromExternal } from "../filaments/functions";
+import { IFilament } from "../filaments/model";
 import { useGetFilamentSelectOptions } from "./functions";
 import { ISpool, ISpoolParsedExtras, WeightToEnter } from "./model";
 
@@ -31,6 +33,8 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
   const t = useTranslate();
   const extraFields = useGetFields(EntityType.spool);
   const currency = useCurrency();
+  const invalidate = useInvalidate();
+  const [isFilamentModalOpen, setIsFilamentModalOpen] = useState(false);
 
   const { form, formProps, formLoading, onFinish, redirect } = useForm<
     ISpool,
@@ -80,6 +84,17 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
     allExternalFilaments,
   } = useGetFilamentSelectOptions();
 
+  const handleFilamentCreated = async (filament: IFilament) => {
+    // Invalidate filament cache so the select options refresh
+    await invalidate({
+      resource: "filament",
+      invalidates: ["list"],
+    });
+    // Select the newly created filament
+    form.setFieldValue("filament_id", filament.id);
+    setIsFilamentModalOpen(false);
+  };
+
   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.
@@ -268,6 +283,11 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
         </>
       )}
     >
+      <FilamentCreateModal
+        isOpen={isFilamentModalOpen}
+        onSuccess={handleFilamentCreated}
+        onClose={() => setIsFilamentModalOpen(false)}
+      />
       <Form {...formProps} layout="vertical">
         <Form.Item
           label={t("spool.fields.first_used")}
@@ -310,6 +330,20 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
             options={filamentOptions}
             showSearch
             filterOption={(input, option) => typeof option?.label === "string" && searchMatches(input, option?.label)}
+            dropdownRender={(menu) => (
+              <>
+                {menu}
+                <Divider style={{ margin: "8px 0" }} />
+                <Button
+                  type="text"
+                  icon={<PlusOutlined />}
+                  onClick={() => setIsFilamentModalOpen(true)}
+                  style={{ width: "100%", textAlign: "left" }}
+                >
+                  {t("filament.titles.create")}
+                </Button>
+              </>
+            )}
           />
         </Form.Item>
         {selectedFilament?.is_internal === false && (