Add ingredients as rows to the column, and reset the form

Each row in the table can be clicked/tapped to be crossed off to complete
Co-authored-by: june <self@breadone.net>
Co-committed-by: june <self@breadone.net>

Dockerfile.combined

@@ -1,50 +0,0 @@
-# Multi-stage build combining both services
-
-# Stage 1: Build the Node.js/Astro application
-FROM node:24-alpine AS app-builder
-WORKDIR /app
-COPY package*.json ./
-RUN npm i
-COPY . .
-ENV PUBLIC_PB_URL=http://localhost:8080
-ENV PUBLIC_URL=http://localhost:4321
-RUN npm run build
-
-ARG PB_VERSION=0.29.2
-
-WORKDIR /pb
-
-RUN apk add --no-cache \
-    unzip \
-    curl \
-    ca-certificates \
-    bash \
-    nodejs \
-    npm
-
-# Download and unzip PocketBase
-ADD https://github.com/pocketbase/pocketbase/releases/download/v${PB_VERSION}/pocketbase_${PB_VERSION}_linux_amd64.zip /tmp/pb.zip
-RUN unzip /tmp/pb.zip -d /pb/
-
-# Copy PocketBase entrypoint
-COPY api/docker-entrypoint.sh /usr/local/bin/
-RUN chmod +x /usr/local/bin/docker-entrypoint.sh
-
-# # Set environment variables (keeping them as they are)
-# ENV PUBLIC_PB_URL=http://pb:8080
-# ENV PUBLIC_URL=http://localhost:4321
-
-VOLUME [ "/pb/pb_data", "/pb/pb_migrations", "/pb/pb_hooks" ]
-# VOLUME [ "/pb/pb_data" ]
-
-EXPOSE 8080 4321
-
-# Create a startup script that runs both services
-RUN echo '#!/bin/bash' > /usr/local/bin/start-services.sh && \
-    echo 'cd /pb && docker-entrypoint.sh serve --http=0.0.0.0:8080 &' >> /usr/local/bin/start-services.sh && \
-    echo 'cd /app && npm run preview -- --host &' >> /usr/local/bin/start-services.sh && \
-    echo 'wait' >> /usr/local/bin/start-services.sh && \
-    chmod +x /usr/local/bin/start-services.sh
-
-ENTRYPOINT ["start-services.sh"]
-

docker-compose.yml

@@ -1,30 +1,16 @@
-# services:
-#   web:
-#     build: .
-#     env_file: .env
-#     ports:
-#       - "4321:4321"
-
-#   pb:
-#     build: api
-#     env_file: .env
-#     volumes:
-#       - ./api/pb_data:/pb/pb_data
-#       - ./api/pb_migrations:/pb/pb_migrations
-#       - ./api/pb_hooks:/pb/pb_hooks
-#     ports:
-#       - "8080:8080"
-
 services:
-  recipie:
-    build: 
-      context: .
-      dockerfile: Dockerfile.combined
+  web:
+    build: .
     env_file: .env
     ports:
       - "4321:4321"
-      - "8080:8080" # optional, for manual pocketbase access
+
+  pb:
+    build: api
+    env_file: .env
     volumes:
       - ./api/pb_data:/pb/pb_data
       - ./api/pb_migrations:/pb/pb_migrations
-      - ./api/pb_hooks:/pb/pb_hooks
+      - ./api/pb_hooks:/pb/pb_hooks
+    ports:
+      - "8080:8080"

src/components/Detail/IngredientTableView.astro

@@ -19,7 +19,7 @@ const tableView = true
 )}
 
 {tableView && (
-    <table class={`table-auto text-left bg-[#2a2b2c] rounded-lg ${className} w-full`}>
+    <table class={`table-auto text-left bg-[#2a2b2c] rounded-lg ${className}`}>
         <thead>
             <tr>
                 <th class="px-4 py-2">Quantity</th>
@@ -29,9 +29,9 @@ const tableView = true
         </thead>
         <tbody>
             {
-            ingredients.map(ing => (
+            ingredients.map((ing, index) => (
                 <>
-                    <tr class="border-t border-gray-600">
+                    <tr class="border-t border-white/10 cursor-pointer hover:bg-white/10 transition-opacity ingredient-row" data-index={index}>
                         <td class="px-4 py-2">{ing.quantity}</td>
                         <td class="px-4 py-2">{ing.unit}</td>
                         <td class="px-4 py-2">{ing.name}</td>
@@ -41,4 +41,28 @@ const tableView = true
             }
         </tbody>
     </table>
-)}
+)}
+
+<style>
+    .ingredient-row.completed {
+        /* background-color: rgba(0, 0, 0, 0.4) !important; */
+        opacity: 0.6;
+    }
+    
+    .ingredient-row.completed td {
+        text-decoration: line-through;
+        color: rgba(255, 255, 255, 0.5);
+    }
+</style>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const rows = document.querySelectorAll('.ingredient-row');
+        
+        rows.forEach(row => {
+            row.addEventListener('click', function() {
+                this.classList.toggle('completed');
+            });
+        });
+    });
+</script>

src/components/Detail/StepIngredientSideView.astro

@@ -10,7 +10,7 @@ const ings = await Promise.all(
 
 <div class={className}>
     {ings.map(i => (
-        <div>
+        <div class="text-sm">
             <p>• {i.quantity} {i.unit || " "}  {i.name}</p>
         </div>
     ))}

src/components/Detail/StepView.astro

@@ -3,10 +3,10 @@ import { record } from "astro:schema"
 import client from "@/data/pocketbase"
 import StepIngredientSideView from "./StepIngredientSideView.astro"
 
-const { steps } = Astro.props
+const { steps, class: className } = Astro.props
 ---
 
-<div class="md:ml-5 mt-2 md:mt-0">
+<div class={className}>
     <p class="text-[22pt] font-bold md:hidden">Steps</p>
     { steps.map(s => (
         <div class="bg-[#2a2b2c] rounded-lg mb-2 p-3">
@@ -15,7 +15,7 @@ const { steps } = Astro.props
             <div class="flex flex-col md:flex-row md:items-stretch">
                 <p class="w-full md:flex-2/3 pr-1 text-left">{s.instruction}</p>
                 {s.ingredients && s.ingredients.length > 0 && (
-                    <div class="w-full md:w-auto md:flex-1/3 mt-2 md:mt-0 md:ml-2 md:pl-3 md:border-l text-white/70 border-white/70">
+                    <div class="w-full md:w-auto md:flex-2/5 mt-2 md:mt-0 md:ml-2 md:pl-3 md:border-l text-white/70 border-white/70">
                         <StepIngredientSideView class="text-left" ingredients={s.ingredients} />
                     </div>
                 )}

src/components/Header.astro

@@ -7,8 +7,8 @@
     </a>
 
     <div class="ml-auto space-x-5">
-        <a>new</a>
-        <a>tags</a>
-        <a>search</a>
+        <a class="hover:underline underline-offset-4 "  href="/recipe/new">new</a>
+        <a class="hover:underline underline-offset-4 " >tags</a>
+        <a class="hover:underline underline-offset-4 " >search</a>
     </div>
 </div>

src/pages/recipe/[recipeid].astro

@@ -28,10 +28,10 @@ const ingredients = await Promise.all(
 ---
 
 <SiteLayout>
-    <div class="flex flex-col md:flex-row">
-        <div class="flex flex-col mt-2 md:mt-4 sticky">
+    <div class="flex flex-col md:flex-row mx-auto justify-center w-full lg:max-w-3/4 xl:max-w-2/3 2xl:max-w-1/2">
+        <div class="flex md:flex-1/3 flex-col mt-2 md:mt-4 sticky">
             <ImageCarousel class="w-full" recipe={re} />
-            <p class=" md:hidden text-[28pt] font-bold leading-none mt-2">{re.name}</p>
+            <p class="text-[28pt] font-bold leading-11 mt-2">{re.name}</p>
 
             <!-- Details -->
             <InfoView re={re} />
@@ -40,11 +40,9 @@ const ingredients = await Promise.all(
             <IngredientTableView class:list={['md:w-80', 'px-4']} ingredients={ingredients}  />
         </div>
         
-        <div class="flex w-full flex-col">
-            <p class="hidden md:block text-[28pt] font-bold pl-5">{re.name}</p>
-
+        <div class="flex mt-4 md:flex-2/3 w-full flex-col">
             <!-- Steps -->
-            <StepView steps={steps} />
+            <StepView class="md:ml-3" steps={steps} />
         </div>
 
     </div>

src/pages/recipe/new.astro

@@ -0,0 +1,124 @@
+---
+import SiteLayout from "@/layouts/base";
+
+const { recipeid } = Astro.params;
+
+// Actually post the recipe with the stored variables
+async function submitRecipe() {
+    
+}
+
+---
+
+<script>
+    let ingredientFields: HTMLInputElement[] = []
+    let ingredientTable: HTMLTableSectionElement = document.querySelector('#ingredient-table')!
+    let ingredientAddButton: HTMLButtonElement = document.querySelector('#add-ingredient-btn')!
+    
+    document.addEventListener('DOMContentLoaded', function() {
+        
+        ingredientFields.push(
+            document.querySelector('#ing-qty')!,
+            document.querySelector('#ing-unit')!,
+            document.querySelector('#ing-name')!
+        )
+        
+        // show plus button once the user clicks off one of the text fields
+        ingredientFields.forEach(f => f.addEventListener('beforeinput', showAddIngredientButton))
+        // onclick for add button
+        document.querySelector('#add-ingredient-btn')?.addEventListener('click', addIngredient);
+    });
+    
+    let ingredients: {qty: string, unit: string, name: string}[] = []
+    function addIngredient() {
+        const ing = {
+            qty: ingredientFields[0].value,
+            unit: ingredientFields[1].value,
+            name: ingredientFields[2].value
+        }
+
+        ingredients.push(ing)
+        
+        // Create the table row HTML directly
+        const newRow = document.createElement('tr')
+        newRow.innerHTML = `
+            <td class="px-2 py-1 border-t border-white/10">${ing.qty}</td>
+            <td class="px-2 py-1 border-t border-white/10">${ing.unit}</td>
+            <td class="px-2 py-1 border-t border-white/10">${ing.name}</td>
+        `
+        
+        ingredientTable.appendChild(newRow)
+
+        ingredientFields.forEach(f => f.value = "")
+        ingredientAddButton.style.display = 'none'
+    }
+
+    function showAddIngredientButton() {
+        // only show if there is text in the field
+
+        if (ingredientFields[0].value && ingredientFields[2].value) {
+            ingredientAddButton.style.display = 'block'
+        } else {
+            ingredientAddButton.style.display = 'hidden'
+        }
+    }
+</script>
+
+<SiteLayout>
+    <div class="flex flex-col md:flex-row mx-auto justify-center w-full lg:max-w-3/4 xl:max-w-2/3 2xl:max-w-1/2">
+        <div class="flex md:flex-1/3 flex-col mt-2 md:mt-4 sticky">
+            <div class="w-full bg-white/20 rounded-lg h-50">
+                Image Upload
+            </div>
+            <!-- <ImageCarousel class="w-full" recipe={re} /> -->
+            <textarea
+                id="rec-name"
+                name="name"
+                rows="1"
+                placeholder="Name"
+                class="text-[28pt] font-bold p-1 leading-none mt-2 bg-white/20 rounded-lg resize-none overflow-hidden"
+                oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'"
+            />
+                <!-- if it works :3  -->
+
+            <!-- Details -->
+            <!-- <InfoView re={re} /> -->
+
+            <div class="flex flex-row align-middle items-center">
+                <p class="mt-4 text-[22pt] font-bold 'mt-4'">Ingredients</p>
+                <button class="hidden" id="add-ingredient-btn">add</button>
+            </div>
+            <table class={`table-fixed  text-left bg-[#2a2b2c] rounded-lg w-full`}>
+                <thead>
+                    <tr>
+                        <th class="px-4 py-2 w-18">Qty</th>
+                        <th class="px-4 py-2 w-20">Unit</th>
+                        <th class="px-4 py-2">Ingredient</th>
+                    </tr>
+                </thead>
+                <tbody id="ingredient-table" class="w-full border-t px-4 py-2 border-gray-600">
+                    <tr id="ingredient-input" class="">
+                        <td class="px-2 py-1">
+                            <input id="ing-qty" class="w-full h-11 bg-white/20 rounded-lg px-2 py-2" type="text" placeholder="Qty">
+                        </td>
+                        <td class="px-2 py-1">
+                            <input id="ing-unit" class="w-full h-11 bg-white/20 rounded-lg px-2 py-2" type="text" placeholder="Unit">
+                        </td>
+                        <td class="px-2 py-1">
+                            <!-- <textarea id="ing-name" class="w-full h-11 bg-white/20 rounded-lg px-2 py-3 mt-1 resize-none leading-tight" placeholder="Ingredient" rows="1"/> -->
+                             <input id="ing-name" class="w-full h-11 bg-white/20 rounded-lg px-2 py-2" type="text" placeholder="Ingredient">
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        
+        <div class="flex mt-4 md:flex-2/3 w-full flex-col">
+            <!-- <p class="hidden md:block text-[28pt] font-bold pl-5">Helloi</p> -->
+
+            <!-- Steps -->
+            <!-- <StepView steps={steps} /> -->
+        </div>
+
+    </div>
+</SiteLayout>