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

frontend/app/baslager/page.tsx

@@ -1,5 +1,5 @@
 import { fetchJson } from '../../lib/api';
-import type { Product } from '../../features/inventory/types';
+import type { Product, InventoryItem } from '../../features/inventory/types';
 import Navigation from '../Navigation';
 import AddToPantryForm from './AddToPantryForm';
 import PantryList from './PantryList';
@@ -13,13 +13,21 @@ type PantryItem = {
 };
 
 export default async function BaslagerPage() {
-  const [pantryItems, products] = await Promise.all([
+  const [pantryItems, products, inventoryItems] = await Promise.all([
     fetchJson<PantryItem[]>('/api/pantry'),
     fetchJson<Product[]>('/api/products'),
+    fetchJson<InventoryItem[]>('/api/inventory').catch(() => [] as InventoryItem[]),
   ]);
 
   const pantryProductIds = new Set(pantryItems.map((i) => i.productId));
 
+  // Bygg upp en map productId → inventarieposter
+  const inventoryByProductId = inventoryItems.reduce<Record<number, InventoryItem[]>>((acc, item) => {
+    if (!acc[item.productId]) acc[item.productId] = [];
+    acc[item.productId].push(item);
+    return acc;
+  }, {});
+
   return (
     <main style={{ padding: '1rem', maxWidth: '700px', margin: '0 auto' }}>
       <Navigation />
@@ -37,7 +45,7 @@ export default async function BaslagerPage() {
         <h2 style={{ fontSize: '1.1rem', marginBottom: '0.75rem' }}>
           {pantryItems.length} {pantryItems.length === 1 ? 'produkt' : 'produkter'} i baslagret
         </h2>
-        <PantryList items={pantryItems} />
+        <PantryList items={pantryItems} inventoryByProductId={inventoryByProductId} />
       </section>
     </main>
   );