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>
   );
 }