feat(manufacturers): add logo-aware UI and label workflows on top of export

- Add manufacturer logo management (upload, delete, organization)
- Integrate logos into label print dialogs (positioning, sizing)
- Add vendor logo components and utilities
- Support logo source toggle (color/print profile)
- Add i18n strings for logo UI elements
- Extend vendor database with logo support

This commit layers vendor logo features on top of the export workflow.
All export functionality is preserved; logos are optional additions to print/export dialogs.

Author: akira69

.playwright-cli/page-2026-03-14T13-03-08-306Z.yml

@@ -0,0 +1 @@
+- generic [ref=e2]: loading

.playwright-cli/page-2026-03-14T13-04-28-164Z.yml

@@ -65,21 +65,12 @@
             "helpMargin": "Margins should be configured to match your label paper and printer, changing these will affect the size of the entire grid.",
             "helpPrinterMargin": "Safe-Zone should be set to how close to the paper edge your printer can print, changing these will not affect the entire grid.",
             "print": "Print",
-            "exportLabels": "Export Labels",
             "columns": "Columns",
             "rows": "Rows",
             "paperSize": "Paper Size",
             "customSize": "Custom",
             "dimensions": "Dimensions",
             "amlLabelSize": "AML Label Size",
-            "exportFormat": "Export Format",
-            "exportFormatOptions": {
-                "png": "PNG",
-                "aml": "AML"
-            },
-            "exportAsZip": "Export as .zip",
-            "exportDpi": "Export DPI",
-            "exportDpiHelp": "Higher DPI makes sharper PNG/AML exports but increases file size and export time.",
             "showBorder": "Show Border",
             "previewScale": "Preview Scale",
             "skipItems": "Skip Items",
@@ -102,10 +93,6 @@
                 "grid": "Grid"
             },
             "settings": "Presets",
-            "spoolPrintPresets": "Spool Print Presets",
-            "filamentPrintPresets": "Filament Print Presets",
-            "spoolImagePresets": "Spool Image Presets",
-            "filamentImagePresets": "Filament Image Presets",
             "defaultSettings": "Default",
             "addSettings": "Add New Preset",
             "newSetting": "New",
@@ -114,27 +101,76 @@
             "deleteSettingsConfirm": "Are you sure you want to delete this preset?",
             "settingsName": "Preset Name",
             "saveSetting": "Save Presets",
+            "savePreset": "Save Preset",
             "saveAsImage": "Save as Image",
-            "saveAsAmlLabels": "Save as AML (Labels)"
+            "saveAsAmlLabels": "Save as AML (Labels)",
+            "saveAsAmlPages": "Save as AML (Pages)",
+            "spoolImagePresets": "Spool Image Presets",
+            "filamentImagePresets": "Filament Image Presets",
+            "exportFormat": "Export Format",
+            "exportFormatOptions": {
+                "png": "PNG",
+                "aml": "AML"
+            },
+            "exportAsZip": "Export as .zip",
+            "exportDpi": "Export DPI",
+            "exportDpiHelp": "Higher DPI improves image quality for exports but increases file size.",
+            "exportLabels": "Export Labels",
+            "filenamePreview": "Filename Preview",
+            "filenamePreviewAdditional": "Additional Example",
+            "zipFilenamePreview": "ZIP Filename"
         },
         "qrcode": {
             "button": "Print Labels",
+            "selectButton": "Print / Export Labels",
             "exportButton": "Export Labels",
+            "selectTitle": "Export / Print Labels",
             "exportFilamentTitle": "Export Filament Labels",
             "exportSpoolTitle": "Export Spool Labels",
             "printFilamentTitle": "Print Filament Labels",
             "printSpoolTitle": "Print Spool Labels",
-            "selectButton": "Export/Print",
-            "selectTitle": "Export / Print Labels",
             "title": "Label Printing",
+            "sectionLogo": "Logo",
+            "sectionTitle": "Title",
+            "sectionQRCode": "QR Code",
+            "sectionInformation": "Information",
             "template": "Label Template",
-            "filenameTemplate": "Filename Template",
-            "filenameTemplateTooltipSpool": "Use {} to insert values of the spool object as text. Refer to the label template rules and available tags for more details.",
-            "filenameTemplateTooltipFilament": "Use {} to insert values of the filament object as text. Refer to the label template rules and available tags for more details.",
-            "templateHelp": "Use {} to insert values of the spool object as text. For example, {id} will be replaced with the spool id, or {filament.material} will be replaced with the material of the spool. if a value is missing it will be replaced with \"?\". A second set of {} can be used to remove this. In addition, any text between the sets of {} will be removed if the value is missing. For example, {Lot Nr: {lot_nr}} will only show the label if the spool has a lot number. Enclose text with double asterix ** to make it bold. Click the button to view a list of all available tags.",
-            "templateHelpFilament": "Use {} to insert values of the filament object as text. For example, {id} will be replaced with the filament id, or {vendor.name} will be replaced with the vendor name. If a value is missing it will be replaced with \"?\". A second set of {} can be used to remove this. In addition, any text between the sets of {} will be removed if the value is missing. For example, {Article: {article_number}} will only show the label if a filament has an article number. Enclose text with double asterix ** to make it bold. Click the button to view a list of all available tags.",
+            "titleTemplate": "Title Template",
+            "infoTemplate": "Information Template",
+            "templateHelp": "Use {} to insert values of the spool object as text. For example, {id} will be replaced with the spool id, or {filament.material} will be replaced with the material of the spool. if a value is missing it will be replaced with \"?\". A second set of {} can be used to remove this. In addition, any text between the sets of {} will be removed if the value is missing. For example, {Lot Nr: {lot_nr}} will only show the label if the spool has a lot number. Enclose text with double asterix ** to make it bold, and use ==text== to invert text. Click the button to view a list of all available tags.",
+            "templateHelpFilament": "Use {} to insert values of the filament object as text. For example, {id} will be replaced with the filament id, or {vendor.name} will be replaced with the vendor name. If a value is missing it will be replaced with \"?\". A second set of {} can be used to remove this. In addition, any text between the sets of {} will be removed if the value is missing. For example, {Article: {article_number}} will only show the label if a filament has an article number. Enclose text with double asterix ** to make it bold, and use ==text== to invert text. Click the button to view a list of all available tags.",
             "textSize": "Label Text Size",
-            "showContent": "Print Label",
+            "infoTextSize": "Information Text Size",
+            "titleTextSize": "Title Text Size",
+            "titleMaxTextSize": "Title Max Text Size",
+            "titleAreaHeight": "Title Area Height",
+            "showContent": "Show Information on label",
+            "showManufacturerLogo": "Show Manufacturer Logo",
+            "logoSource": "Logo Source",
+            "logoSourceOptions": {
+                "print": "Print Logo",
+                "color": "Color Logo"
+            },
+            "showTitle": "Show Title",
+            "titleFitToWidth": "Fit Title to Width",
+            "titleFitToWidthOptions": {
+                "on": "On",
+                "off": "Off"
+            },
+            "appliedTextSize": "Applied Size",
+            "logoSize": "Logo Size",
+            "logoAlign": "Logo Horizontal Align",
+            "titleAlign": "Title Horizontal Align",
+            "qrCodePosition": "QR Code Position",
+            "qrCodePositionLeft": "Left",
+            "qrCodePositionRight": "Right",
+            "qrCodeAlign": "QR Code Vertical Align",
+            "qrCodeAlignTop": "Top",
+            "qrCodeAlignCenter": "Center",
+            "qrCodeAlignBottom": "Bottom",
+            "qrCodeSize": "QR Code Size",
+            "infoAlign": "Information Horizontal Align",
+            "infoVerticalAlign": "Information Vertical Align",
             "useHTTPUrl": {
                 "label": "QR code link",
                 "tooltip": "Will use proprietary link that will work only if scanned from Spoolman's scanning feature (default). URL uses either the base URL specified in settings, or the current page URL if not set.",
@@ -149,12 +185,17 @@
                 "no": "No",
                 "simple": "Simple",
                 "withIcon": "With Icon"
-            }
+            },
+            "filenameTemplate": "Filename Template",
+            "filenameTemplateTooltipSpool": "Use {} to insert values of the spool object as text. Refer to the label template rules and available tags for details.",
+            "filenameTemplateTooltipFilament": "Use {} to insert values of the filament object as text. Refer to the label template rules and available tags for details.",
+            "titleTemplateTooltipSpool": "Use {} to insert values of the spool object as text. Refer to the label template rules and available tags for details.",
+            "titleTemplateTooltipFilament": "Use {} to insert values of the filament object as text. Refer to the label template rules and available tags for details."
         },
         "spoolSelect": {
             "title": "Select Spools",
-            "description": "Select spools to export or print labels for.",
-            "searchPlaceholder": "Search vendor, filament, material, location, lot #",
+            "description": "Select spools to print labels for.",
+            "searchPlaceholder": "Search vendor, name, material, lot #",
             "showArchived": "Show Archived",
             "noSpoolsSelected": "You have not selected any spools.",
             "selectAll": "Select/Unselect All",
@@ -163,7 +204,7 @@
         },
         "filamentSelect": {
             "title": "Select Filaments",
-            "description": "Select filaments to export or print labels for.",
+            "description": "Select filaments to print labels for.",
             "searchPlaceholder": "Search vendor, name, material, article #",
             "noFilamentsSelected": "You have not selected any filaments.",
             "selectAll": "Select/Unselect All",
@@ -305,14 +346,27 @@
         "vendor": "Manufacturers",
         "fields": {
             "id": "ID",
+            "logo": "Logo",
+            "logo_url": "Logo URL",
+            "print_logo_url": "Print Logo URL",
+            "logo_preview": "Logo Preview",
+            "print_logo_preview": "Print Logo Preview",
             "name": "Name",
             "empty_spool_weight": "Empty Spool Weight",
             "external_id": "External ID",
             "registered": "Registered",
-            "comment": "Comment"
+            "comment": "Comment",
+            "logo_suggestions": "Logo Suggestions",
+            "print_logo_suggestions": "Print Logo Suggestions",
+            "logo_suggestions_placeholder": "Select a suggested logo path",
+            "logo_suggestions_none": "None"
         },
         "fields_help": {
-            "empty_spool_weight": "The weight of an empty spool from this manufacturer."
+            "empty_spool_weight": "The weight of an empty spool from this manufacturer.",
+            "logo_url": "Optional custom logo used in the UI. Supports absolute URLs or local paths like /vendor-logos/web/bambu-lab-web.png. Use any image your browser can display from that path or URL.",
+            "print_logo_url": "Optional custom logo used for label rendering. Supports absolute URLs or local paths like /vendor-logos/print/bambu-lab.png. Use any image your browser can display from that path or URL.",
+            "logo_suggestions": "Checks available logo files in /vendor-logos/web for names similar to this manufacturer.",
+            "print_logo_suggestions": "Checks available logo files in /vendor-logos/print for names similar to this manufacturer."
         },
         "titles": {
             "create": "Create Manufacturer",
@@ -322,8 +376,27 @@
             "show": "Show Manufacturer",
             "show_title": "[Manufacturer #{{id}}] {{name}}"
         },
+        "buttons": {
+            "sync_logos": "Sync Logos",
+            "clear_logo_url": "Clear URL",
+            "convert_logo_to_print": "Convert Logo to Print",
+            "convert_logo_to_print_help": "Creates a black-and-white print logo from the current Logo URL and stores it as a separate local print logo file.",
+            "convert_logo_to_print_help_locked": "A Print Logo URL is already set. Clear Print Logo URL to enable creating a new print logo from the current Logo URL."
+        },
+        "logo_filter": {
+            "has_logo": "Has Logo",
+            "no_logo": "No Logo"
+        },
         "form": {
-            "vendor_updated": "This manufacturer has been updated by someone/something else since you opened this page. Saving will overwrite those changes!"
+            "vendor_updated": "This manufacturer has been updated by someone/something else since you opened this page. Saving will overwrite those changes!",
+            "logo_sync_no_match": "No matching logos found for this manufacturer name.",
+            "logo_sync_applied": "Suggested logo paths applied.",
+            "logo_preview_auto_notice": "using auto-matched logo from available logo files",
+            "logo_preview_default_notice": "no logo defined, using default generated text logo",
+            "logo_convert_requires_web_logo": "Set a Logo URL first.",
+            "logo_convert_requires_empty_print_logo": "Clear Print Logo URL first to generate a new print logo.",
+            "logo_convert_success": "Generated print logo from web logo.",
+            "logo_convert_error": "Could not generate a print logo from this Logo URL."
         }
     },
     "home": {
@@ -358,6 +431,16 @@
             "round_prices": {
                 "label": "Round prices",
                 "tooltip": "Round prices to the nearest whole number."
+            },
+            "logo_sync": {
+                "title": "Global Manufacturer Logo Sync",
+                "description": "Syncs missing logo URLs across the whole manufacturer database using the bundled logo manifest. Existing logo URLs are not overwritten.",
+                "where": "Source: /vendor-logos/manifest.json (bundled static web/print logo files). Matching ignores minor punctuation/case differences in names.",
+                "button": "Sync Logos Now",
+                "not_ready": "Logo manifest is not available yet.",
+                "load_error": "Could not load manufacturers for logo sync.",
+                "done": "Logo sync complete. Matched {{matched}}, updated {{updated}}.",
+                "scope_note": "This action syncs the whole manufacturer database. You can sync a single manufacturer from its Edit page."
             }
         },
         "extra_fields": {

client/public/locales/en/common.json

@@ -17,8 +17,7 @@ const QRCodeScannerModal = () => {
     }
     const result = detectedCodes[0].rawValue;
 
-    // Accept both compact WEB+SPOOLMAN payloads and full show-page URLs so
-    // exported and printed labels keep scanning after base URL changes.
+    // Check for the spoolman ID format
     const spoolMatch = result.match(/^web\+spoolman:s-(?<id>[0-9]+)$/i);
     if (spoolMatch && spoolMatch.groups) {
       setVisible(false);
@@ -57,8 +56,6 @@ const QRCodeScannerModal = () => {
             onScan={onScan}
             formats={["qr_code"]}
             onError={(err: unknown) => {
-              // Map browser/scanner-library failures onto translated messages instead of
-              // exposing raw exception names in the modal.
               const error = err as Error;
               console.error(error);
               if (error.name === "NotAllowedError") {

client/src/components/qrCodeScanner.tsx

@@ -0,0 +1,53 @@
+import { CSSProperties, useEffect, useMemo, useState } from "react";
+import { IVendor } from "../pages/vendors/model";
+import { getVendorLogoCandidates } from "../utils/vendorLogo";
+
+interface VendorLogoProps {
+  vendor?: IVendor;
+  usePrintLogo?: boolean;
+  showFallbackText?: boolean;
+  imgStyle?: CSSProperties;
+  fallbackStyle?: CSSProperties;
+}
+
+// Walk the vendor's candidate logo URLs in order, then optionally fall back to plain vendor text.
+export function VendorLogo({
+  vendor,
+  usePrintLogo = false,
+  showFallbackText = false,
+  imgStyle,
+  fallbackStyle,
+}: VendorLogoProps) {
+  const candidates = useMemo(() => getVendorLogoCandidates(vendor, usePrintLogo), [vendor, usePrintLogo]);
+  const [currentCandidateIndex, setCurrentCandidateIndex] = useState(0);
+  useEffect(() => {
+    // Reset to the highest-priority candidate whenever the vendor or logo mode changes.
+    setCurrentCandidateIndex(0);
+  }, [vendor, usePrintLogo]);
+
+  const currentSrc = candidates[currentCandidateIndex];
+  const fallbackText = vendor?.name ?? "";
+
+  if (currentSrc) {
+    return (
+      <img
+        src={currentSrc}
+        alt={vendor?.name ? `${vendor.name} logo` : "Manufacturer logo"}
+        style={imgStyle}
+        onError={() => {
+          // Try the next candidate before giving up so a stale saved path can still fall
+          // back to the local runtime logo filenames inferred from the vendor name.
+          setCurrentCandidateIndex((idx) => idx + 1);
+        }}
+      />
+    );
+  }
+
+  if (showFallbackText && fallbackText) {
+    return <div style={fallbackStyle}>{fallbackText}</div>;
+  }
+
+  return null;
+}
+
+export default VendorLogo;