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/filaments/create.tsx

@@ -1,12 +1,14 @@
 import { Create, useForm, useSelect } from "@refinedev/antd";
 import { HttpError, IResourceComponentsProps, useInvalidate, useTranslate } from "@refinedev/core";
-import { Button, ColorPicker, Form, Input, InputNumber, Radio, Select, Typography } from "antd";
+import { Button, ColorPicker, Divider, Form, Input, InputNumber, Radio, Select, Typography } from "antd";
+import { PlusOutlined } from "@ant-design/icons";
 import TextArea from "antd/es/input/TextArea";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import { useEffect, useState } from "react";
 import { ExtraFieldFormItem, ParsedExtras, StringifiedExtras } from "../../components/extraFields";
 import { FilamentImportModal } from "../../components/filamentImportModal";
+import { VendorCreateModal } from "../../components/vendorCreateModal";
 import { MultiColorPicker } from "../../components/multiColorPicker";
 import { formatNumberOnUserInput, numberParser, numberParserAllowEmpty } from "../../utils/parsing";
 import { ExternalFilament } from "../../utils/queryExternalDB";
@@ -31,6 +33,7 @@ export const FilamentCreate: React.FC<IResourceComponentsProps & CreateOrClonePr
   const extraFields = useGetFields(EntityType.filament);
   const currency = useCurrency();
   const [isImportExtOpen, setIsImportExtOpen] = useState(false);
+  const [isVendorModalOpen, setIsVendorModalOpen] = useState(false);
   const invalidate = useInvalidate();
   const [colorType, setColorType] = useState<"single" | "multi">("single");
 
@@ -66,6 +69,16 @@ export const FilamentCreate: React.FC<IResourceComponentsProps & CreateOrClonePr
     optionLabel: "name",
   });
 
+  const handleVendorCreated = async (vendor: IVendor) => {
+    // Invalidate vendor cache so select options refresh
+    await invalidate({
+      resource: "vendor",
+      invalidates: ["list"],
+    });
+    form.setFieldValue("vendor_id", vendor.id);
+    setIsVendorModalOpen(false);
+  };
+
   const importFilament = async (filament: ExternalFilament) => {
     const vendor = await getOrCreateVendorFromExternal(filament.manufacturer);
     await invalidate({
@@ -132,6 +145,11 @@ export const FilamentCreate: React.FC<IResourceComponentsProps & CreateOrClonePr
         }}
         onClose={() => setIsImportExtOpen(false)}
       />
+      <VendorCreateModal
+        isOpen={isVendorModalOpen}
+        onSuccess={handleVendorCreated}
+        onClose={() => setIsVendorModalOpen(false)}
+      />
       <Form {...formProps} layout="vertical">
         <Form.Item
           label={t("filament.fields.name")}
@@ -165,6 +183,20 @@ export const FilamentCreate: React.FC<IResourceComponentsProps & CreateOrClonePr
             filterOption={(input, option) =>
               typeof option?.label === "string" && option?.label.toLowerCase().includes(input.toLowerCase())
             }
+            dropdownRender={(menu) => (
+              <>
+                {menu}
+                <Divider style={{ margin: "8px 0" }} />
+                <Button
+                  type="text"
+                  icon={<PlusOutlined />}
+                  onClick={() => setIsVendorModalOpen(true)}
+                  style={{ width: "100%", textAlign: "left" }}
+                >
+                  {t("vendor.titles.create")}
+                </Button>
+              </>
+            )}
           />
         </Form.Item>
         <Form.Item label={t("filament.fields.color_hex")}>