diff --git a/frontend/src/pages/PrintersPage.tsx b/frontend/src/pages/PrintersPage.tsx index 0785b87a3..e15de0a2e 100644 --- a/frontend/src/pages/PrintersPage.tsx +++ b/frontend/src/pages/PrintersPage.tsx @@ -37,6 +37,7 @@ import { Fan, Wind, AirVent, + Minus, } from 'lucide-react'; // Custom Skip Objects icon - arrow jumping over boxes @@ -2236,12 +2237,9 @@ function PrinterCard({ }`} > {plugStatus.state || '?'} - - )} - {/* Power consumption display */} - {plugStatus?.energy?.power != null && plugStatus.state === 'ON' && ( - - {plugStatus.energy.power}W + {plugStatus.state === 'ON' && plugStatus.energy?.power != null && ( + · {plugStatus.energy.power}W + )} )} @@ -3343,6 +3341,11 @@ export function PrintersPage() { const [viewMode, setViewMode] = useState(() => { return (localStorage.getItem('printerViewMode') as ViewMode) || 'expanded'; }); + // Card size: 1=small, 2=medium, 3=large, 4=xl + const [cardSize, setCardSize] = useState(() => { + const saved = localStorage.getItem('printerCardSize'); + return saved ? parseInt(saved, 10) : 2; // Default to medium + }); const queryClient = useQueryClient(); const { data: printers, isLoading } = useQuery({ @@ -3452,6 +3455,25 @@ export function PrintersPage() { localStorage.setItem('printerViewMode', newMode); }; + const changeCardSize = (delta: number) => { + const newSize = Math.max(1, Math.min(4, cardSize + delta)); + setCardSize(newSize); + localStorage.setItem('printerCardSize', String(newSize)); + }; + + // Grid classes based on card size (1=small, 2=medium, 3=large, 4=xl) + const getGridClasses = () => { + switch (cardSize) { + case 1: return 'grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5'; + case 2: return 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3'; + case 3: return 'grid-cols-1 md:grid-cols-2'; + case 4: return 'grid-cols-1 max-w-3xl'; + default: return 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3'; + } + }; + + const cardSizeLabels = ['S', 'M', 'L', 'XL']; + // Sort printers based on selected option const sortedPrinters = useMemo(() => { if (!printers) return []; @@ -3558,6 +3580,29 @@ export function PrintersPage() { )} + {/* Card size control */} +
+ + + {cardSizeLabels[cardSize - 1]} + + +
+