Add optional spool location display on dashboard (#56)

Add a Dashboard Display setting to show the Spoolman location field
on spool cards. Off by default, users opt in via Settings page.
Only displays for spools that have a location value set.

Author: gibz104

app/src/app/api/settings/route.ts

@@ -45,8 +45,9 @@ export async function GET() {
         }
       }
 
-      // Fetch optional QR base URL override
+      // Fetch optional settings
       const qrBaseUrlSetting = await prisma.settings.findUnique({ where: { key: 'qr_base_url' } });
+      const showLocationSetting = await prisma.settings.findUnique({ where: { key: 'show_spool_location' } });
 
       return NextResponse.json({
         embeddedMode: false,
@@ -61,6 +62,7 @@ export async function GET() {
           connected: true,
         } : null,
         qrBaseUrl: qrBaseUrlSetting?.value || '',
+        showSpoolLocation: showLocationSetting?.value === 'true',
       });
     }
 
@@ -238,8 +240,9 @@ export async function GET() {
     }
     // else: null — HA hasn't been set up yet (first startup)
 
-    // Fetch optional QR base URL override
+    // Fetch optional settings
     const qrBaseUrlSetting = await prisma.settings.findUnique({ where: { key: 'qr_base_url' } });
+    const showLocationSetting = await prisma.settings.findUnique({ where: { key: 'show_spool_location' } });
 
     return NextResponse.json({
       embeddedMode,
@@ -250,6 +253,7 @@ export async function GET() {
         connected: true,
       } : null,
       qrBaseUrl: qrBaseUrlSetting?.value || '',
+      showSpoolLocation: showLocationSetting?.value === 'true',
     });
   } catch (error) {
     console.error('Error fetching settings:', error);
@@ -323,6 +327,16 @@ export async function POST(request: NextRequest) {
       return NextResponse.json({ success: true });
     }
 
+    if (type === 'show_spool_location') {
+      const enabled = body.enabled === true;
+      await prisma.settings.upsert({
+        where: { key: 'show_spool_location' },
+        create: { key: 'show_spool_location', value: String(enabled) },
+        update: { value: String(enabled) },
+      });
+      return NextResponse.json({ success: true });
+    }
+
     if (type === 'qr_base_url') {
       // Save QR code base URL override
       const qrBaseUrl = (url || '').trim().replace(/\/+$/, '');

app/src/app/page.tsx

@@ -40,6 +40,7 @@ interface PrinterWithSpools extends HAPrinter {
 interface Settings {
   homeassistant: { url: string; connected: boolean } | null;
   spoolman: { url: string; connected: boolean } | null;
+  showSpoolLocation?: boolean;
 }
 
 export default function Dashboard() {
@@ -474,6 +475,7 @@ export default function Dashboard() {
                 spools={spools}
                 onSpoolAssign={handleSpoolAssign}
                 onSpoolUnassign={handleSpoolUnassign}
+                showSpoolLocation={settings?.showSpoolLocation}
               />
             ))}
           </div>

app/src/app/settings/page.tsx

@@ -78,6 +78,9 @@ function SettingsContent() {
   const [enabledFilters, setEnabledFilters] = useState<string[]>([]);
   const [savingFilters, setSavingFilters] = useState(false);
 
+  // Dashboard display settings
+  const [showSpoolLocation, setShowSpoolLocation] = useState(false);
+
   // QR base URL state
   const [qrBaseUrl, setQrBaseUrl] = useState('');
   const [savingQrUrl, setSavingQrUrl] = useState(false);
@@ -158,6 +161,9 @@ function SettingsContent() {
       if (data.qrBaseUrl !== undefined) {
         setQrBaseUrl(data.qrBaseUrl);
       }
+      if (data.showSpoolLocation !== undefined) {
+        setShowSpoolLocation(data.showSpoolLocation);
+      }
     } catch {
       toast.error('Failed to load settings');
     } finally {
@@ -810,6 +816,53 @@ function SettingsContent() {
             </CardContent>
           </Card>
 
+          {/* Dashboard Display Settings */}
+          {settings?.spoolman && (
+            <>
+              <Separator />
+              <Card>
+                <CardHeader>
+                  <CardTitle>Dashboard Display</CardTitle>
+                  <CardDescription>
+                    Configure what information is shown on the dashboard spool cards.
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="flex items-center space-x-3">
+                    <Checkbox
+                      id="show-spool-location"
+                      checked={showSpoolLocation}
+                      onCheckedChange={async (checked) => {
+                        const enabled = checked === true;
+                        setShowSpoolLocation(enabled);
+                        try {
+                          const res = await fetch('/api/settings', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ type: 'show_spool_location', enabled }),
+                          });
+                          if (!res.ok) throw new Error();
+                          toast.success(enabled ? 'Spool location enabled on dashboard' : 'Spool location hidden on dashboard');
+                        } catch {
+                          setShowSpoolLocation(!enabled);
+                          toast.error('Failed to save setting');
+                        }
+                      }}
+                    />
+                    <div>
+                      <Label htmlFor="show-spool-location" className="text-sm font-medium cursor-pointer">
+                        Show spool location
+                      </Label>
+                      <p className="text-xs text-muted-foreground">
+                        Display the Spoolman location field on each spool card (e.g., shelf, dry box, bin number)
+                      </p>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            </>
+          )}
+
           {/* Spool Filter Configuration */}
           {settings?.spoolman && (
             <>

app/src/components/dashboard/printer-card.tsx

@@ -42,9 +42,10 @@ interface PrinterCardProps {
   spools: Spool[];
   onSpoolAssign: (trayId: string, spoolId: number) => void;
   onSpoolUnassign: (spoolId: number) => void;
+  showSpoolLocation?: boolean;
 }
 
-export function PrinterCard({ printer, spools, onSpoolAssign, onSpoolUnassign }: PrinterCardProps) {
+export function PrinterCard({ printer, spools, onSpoolAssign, onSpoolUnassign, showSpoolLocation }: PrinterCardProps) {
   return (
     <Card className="w-full">
       <CardHeader className="pb-3">
@@ -69,6 +70,7 @@ export function PrinterCard({ printer, spools, onSpoolAssign, onSpoolUnassign }:
                   onAssign={(spoolId) => onSpoolAssign(tray.unique_id || tray.entity_id, spoolId)}
                   onUnassign={onSpoolUnassign}
                   mismatch={tray.mismatch}
+                  showLocation={showSpoolLocation}
                 />
               ))}
             </div>
@@ -92,6 +94,7 @@ export function PrinterCard({ printer, spools, onSpoolAssign, onSpoolUnassign }:
                     onSpoolAssign(extSpool.unique_id || extSpool.entity_id, spoolId);
                   }}
                   onUnassign={onSpoolUnassign}
+                  showLocation={showSpoolLocation}
                 />
               ))}
             </div>

app/src/components/dashboard/tray-slot.tsx

@@ -61,6 +61,7 @@ interface TraySlotProps {
   onAssign: (spoolId: number) => void;
   onUnassign?: (spoolId: number) => void;
   mismatch?: MismatchInfo;
+  showLocation?: boolean;
 }
 
 /**
@@ -101,7 +102,7 @@ function sortSpools(spools: Spool[], sortBy: SortBy): Spool[] {
   });
 }
 
-export function TraySlot({ tray, assignedSpool, spools, onAssign, onUnassign, mismatch }: TraySlotProps) {
+export function TraySlot({ tray, assignedSpool, spools, onAssign, onUnassign, mismatch, showLocation }: TraySlotProps) {
   const [open, setOpen] = useState(false);
   const [filters, setFilters] = useState<Record<string, string | null>>({});
   const [enabledFields, setEnabledFields] = useState<FilterField[]>([]);
@@ -233,6 +234,12 @@ export function TraySlot({ tray, assignedSpool, spools, onAssign, onUnassign, mi
                   <span className="text-[9px] font-medium text-muted-foreground uppercase">Vendor:</span>
                   <span className="text-xs font-medium truncate">{assignedSpool.filament.vendor?.name || 'Unknown'}</span>
                 </div>
+                {showLocation && assignedSpool.location && (
+                  <div className="flex items-baseline gap-1">
+                    <span className="text-[9px] font-medium text-muted-foreground uppercase">Location:</span>
+                    <span className="text-xs font-medium truncate">{assignedSpool.location}</span>
+                  </div>
+                )}
               </div>
 
               {/* Footer: spool ID and weight */}