New spool color indication that supports multi colors

client/src/components/column.tsx

@@ -295,7 +295,7 @@ export function ActionsColumn<Obj extends Entity>(actionsFn: (record: Obj) => Ac
 }
 
 interface SpoolIconColumnProps<Obj extends Entity> extends FilteredQueryColumnProps<Obj> {
-  color: (record: Obj) => string | undefined;
+  color: (record: Obj) => string | string[] | undefined;
 }
 
 export function SpoolIconColumn<Obj extends Entity>(props: SpoolIconColumnProps<Obj>) {

client/src/components/spoolIcon.css

@@ -0,0 +1,23 @@
+.spool-icon {
+  display: flex;
+  flex-direction: column;
+  width: 1.5em;
+  height: 2.5em;
+  gap: 2px;
+  margin: 0 0.5em;
+}
+
+.spool-icon * {
+  flex: 1 1 0px;
+  border-radius: 2px;
+}
+
+.spool-icon *:first-child {
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+}
+
+.spool-icon *:last-child {
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
+}

client/src/components/spoolIcon.tsx

@@ -1,15 +1,18 @@
-import Icon from "@ant-design/icons";
-import SpoolSVG from "../icon_spool.svg?react";
+import "./spoolIcon.css";
+
+export default function SpoolIcon(props: { color: string | string[] }) {
+  const cols = Array.isArray(props.color) ? props.color : [props.color];
 
-export default function SpoolIcon(props: { color: string }) {
   return (
-    <Icon
-      component={SpoolSVG}
-      style={{
-        color: "#" + props.color,
-        fontSize: 42,
-        marginRight: 0,
-      }}
-    />
+    <div className="spool-icon">
+      {cols.map((col) => (
+        <div
+          key={col}
+          style={{
+            backgroundColor: "#" + col.replace("#", ""),
+          }}
+        ></div>
+      ))}
+    </div>
   );
 }

client/src/pages/filaments/list.tsx

@@ -240,7 +240,8 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
             ...commonProps,
             id: "name",
             i18ncat: "filament",
-            color: (record: IFilamentCollapsed) => record.color_hex,
+            color: (record: IFilamentCollapsed) =>
+              record.multi_color_hexes ? record.multi_color_hexes.split(",") : record.color_hex,
             filterValueQuery: useSpoolmanFilamentNames(),
           }),
           FilteredQueryColumn({

client/src/pages/filaments/model.tsx

@@ -16,6 +16,8 @@ export interface IFilament {
   settings_extruder_temp?: number;
   settings_bed_temp?: number;
   color_hex?: string;
+  multi_color_hexes?: string;
+  multi_color_direction?: string;
   external_id?: string;
   extra: { [key: string]: string };
 }

client/src/pages/spools/list.tsx

@@ -342,7 +342,10 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
             ...commonProps,
             id: "filament.combined_name",
             i18nkey: "spool.fields.filament_name",
-            color: (record: ISpoolCollapsed) => record.filament.color_hex,
+            color: (record: ISpoolCollapsed) =>
+              record.filament.multi_color_hexes
+                ? record.filament.multi_color_hexes.split(",")
+                : record.filament.color_hex,
             dataId: "filament.combined_name",
             filterValueQuery: useSpoolmanFilamentFilter(),
           }),