feat: enhance PantryList and BaslagerPage to support inventory display and improve recipe grid layout

frontend/app/baslager/PantryList.tsx

@@ -8,11 +8,18 @@ type PantryItem = {
   product: { id: number; name: string; canonicalName: string | null; category: string | null };
 };
 
-type Props = {
-  items: PantryItem[];
+type InventoryItem = {
+  productId: number;
+  quantity: string;
+  unit: string;
 };
 
-export default function PantryList({ items }: Props) {
+type Props = {
+  items: PantryItem[];
+  inventoryByProductId: Record<number, InventoryItem[]>;
+};
+
+export default function PantryList({ items, inventoryByProductId }: Props) {
   const [isPending, startTransition] = useTransition();
 
   function handleRemove(id: number, name: string) {
@@ -54,6 +61,19 @@ export default function PantryList({ items }: Props) {
           <div style={{ display: 'grid', gap: '0.4rem' }}>
             {grouped[category].map((item) => {
               const displayName = item.product.canonicalName || item.product.name;
+              const invItems = inventoryByProductId[item.product.id] || [];
+              const hasInventory = invItems.length > 0;
+
+              // Summera per enhet för visning
+              const unitSummary = invItems.reduce<Record<string, number>>((acc, inv) => {
+                const u = inv.unit || '?';
+                acc[u] = (acc[u] || 0) + parseFloat(inv.quantity || '0');
+                return acc;
+              }, {});
+              const inventoryText = Object.entries(unitSummary)
+                .map(([u, q]) => `${q % 1 === 0 ? q : q.toFixed(1)} ${u}`)
+                .join(', ');
+
               return (
                 <div
                   key={item.id}
@@ -67,7 +87,37 @@ export default function PantryList({ items }: Props) {
                     background: '#fafafa',
                   }}
                 >
-                  <span>{displayName}</span>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '0.6rem', minWidth: 0 }}>
+                    <span style={{ minWidth: '1.1rem', textAlign: 'center', fontSize: '1rem' }}>
+                      {hasInventory ? '✓' : '○'}
+                    </span>
+                    <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{displayName}</span>
+                    {hasInventory ? (
+                      <span style={{
+                        fontSize: '0.78rem',
+                        color: '#1f5f2c',
+                        background: '#ecf8ee',
+                        border: '1px solid #b9e0bf',
+                        borderRadius: '4px',
+                        padding: '0.1rem 0.45rem',
+                        whiteSpace: 'nowrap',
+                      }}>
+                        {inventoryText}
+                      </span>
+                    ) : (
+                      <span style={{
+                        fontSize: '0.78rem',
+                        color: '#888',
+                        background: '#f5f5f5',
+                        border: '1px solid #ddd',
+                        borderRadius: '4px',
+                        padding: '0.1rem 0.45rem',
+                        whiteSpace: 'nowrap',
+                      }}>
+                        Saknas i inventariet
+                      </span>
+                    )}
+                  </div>
                   <button
                     type="button"
                     onClick={() => handleRemove(item.id, displayName)}
@@ -80,6 +130,7 @@ export default function PantryList({ items }: Props) {
                       fontSize: '1.1rem',
                       padding: '0.2rem 0.5rem',
                       lineHeight: 1,
+                      flexShrink: 0,
                     }}
                     title="Ta bort från baslagret"
                   >