Improved printer's slot card detail modal "link to spoolman" function

frontend/src/components/FilamentHoverCard.tsx

@@ -14,6 +14,7 @@ interface FilamentData {
 interface SpoolmanConfig {
   enabled: boolean;
   onLinkSpool?: (trayUuid: string) => void;
+  hasUnlinkedSpools?: boolean; // Whether there are spools available to link
 }
 
 interface FilamentHoverCardProps {
@@ -268,9 +269,17 @@ export function FilamentHoverCard({ data, children, disabled, className = '', sp
                     <button
                       onClick={(e) => {
                         e.stopPropagation();
-                        spoolman.onLinkSpool?.(data.trayUuid!);
+                        if (spoolman.hasUnlinkedSpools !== false) {
+                          spoolman.onLinkSpool?.(data.trayUuid!);
+                        }
                       }}
-                      className="w-full flex items-center justify-center gap-1.5 px-2 py-1.5 bg-bambu-green/20 hover:bg-bambu-green/30 text-bambu-green text-xs font-medium rounded transition-colors"
+                      disabled={spoolman.hasUnlinkedSpools === false}
+                      className={`w-full flex items-center justify-center gap-1.5 px-2 py-1.5 text-xs font-medium rounded transition-colors ${
+                        spoolman.hasUnlinkedSpools === false
+                          ? 'bg-bambu-gray/10 text-bambu-gray cursor-not-allowed'
+                          : 'bg-bambu-green/20 hover:bg-bambu-green/30 text-bambu-green'
+                      }`}
+                      title={spoolman.hasUnlinkedSpools === false ? 'No unlinked spools available' : 'Link this spool to a Spoolman spool'}
                     >
                       <Link2 className="w-3.5 h-3.5" />
                       Link to Spoolman

frontend/src/pages/PrintersPage.tsx

@@ -862,6 +862,7 @@ function PrinterCard({
   viewMode = 'expanded',
   amsThresholds,
   spoolmanEnabled = false,
+  hasUnlinkedSpools = false,
 }: {
   printer: Printer;
   hideIfDisconnected?: boolean;
@@ -874,6 +875,7 @@ function PrinterCard({
     tempFair: number;
   };
   spoolmanEnabled?: boolean;
+  hasUnlinkedSpools?: boolean;
 }) {
   const queryClient = useQueryClient();
   const navigate = useNavigate();
@@ -1923,6 +1925,7 @@ function PrinterCard({
                                         data={filamentData}
                                         spoolman={{
                                           enabled: spoolmanEnabled,
+                                          hasUnlinkedSpools,
                                           onLinkSpool: spoolmanEnabled && filamentData.trayUuid ? (uuid) => {
                                             setLinkSpoolModal({
                                               trayUuid: uuid,
@@ -2082,6 +2085,7 @@ function PrinterCard({
                                     data={filamentData}
                                     spoolman={{
                                       enabled: spoolmanEnabled,
+                                      hasUnlinkedSpools,
                                       onLinkSpool: spoolmanEnabled && filamentData.trayUuid ? (uuid) => {
                                         setLinkSpoolModal({
                                           trayUuid: uuid,
@@ -2186,6 +2190,7 @@ function PrinterCard({
                               data={extFilamentData}
                               spoolman={{
                                 enabled: spoolmanEnabled,
+                                hasUnlinkedSpools,
                                 onLinkSpool: spoolmanEnabled && extFilamentData.trayUuid ? (uuid) => {
                                   setLinkSpoolModal({
                                     trayUuid: uuid,
@@ -3372,6 +3377,15 @@ export function PrintersPage() {
   });
   const spoolmanEnabled = spoolmanStatus?.enabled && spoolmanStatus?.connected;
 
+  // Fetch unlinked spools to know if link button should be enabled
+  const { data: unlinkedSpools } = useQuery({
+    queryKey: ['unlinked-spools'],
+    queryFn: api.getUnlinkedSpools,
+    enabled: !!spoolmanEnabled,
+    staleTime: 30 * 1000, // 30 seconds
+  });
+  const hasUnlinkedSpools = unlinkedSpools && unlinkedSpools.length > 0;
+
   // Create a map of printer_id -> maintenance info for quick lookup
   const maintenanceByPrinter = maintenanceOverview?.reduce(
     (acc, overview) => {
@@ -3647,6 +3661,7 @@ export function PrintersPage() {
                       tempFair: Number(settings.ams_temp_fair) || 35,
                     } : undefined}
                     spoolmanEnabled={spoolmanEnabled}
+                    hasUnlinkedSpools={hasUnlinkedSpools}
                   />
                 ))}
               </div>
@@ -3668,6 +3683,7 @@ export function PrintersPage() {
               maintenanceInfo={maintenanceByPrinter[printer.id]}
               viewMode={viewMode}
               spoolmanEnabled={spoolmanEnabled}
+              hasUnlinkedSpools={hasUnlinkedSpools}
               amsThresholds={settings ? {
                 humidityGood: Number(settings.ams_humidity_good) || 40,
                 humidityFair: Number(settings.ams_humidity_fair) || 60,

static/index.html

@@ -23,7 +23,7 @@
 
     <!-- Splash screens for iOS -->
     <link rel="apple-touch-startup-image" href="/img/android-chrome-512x512.png" />
-    <script type="module" crossorigin src="/assets/index-ByHF_LDf.js"></script>
+    <script type="module" crossorigin src="/assets/index-CfJSg4r6.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-j3n1gAEX.css">
   </head>
   <body>