update docker compose

docker-compose.yml

@@ -1,5 +1,4 @@
 version: '3.8'
-
 services:
   chefbible:
     image: git.redbackpack.ca/taogaetz/chefbible:latest
@@ -15,10 +14,14 @@ services:
       - ORIGIN=${ORIGIN}
       - ACCESS_PIN=${ACCESS_PIN}
     volumes:
-      - /home/chefbible/data:/app/data
+      - chefbible-data:/app/data
     healthcheck:
       test: [ "CMD", "wget", "--quiet", "--tries=1", "--spider", "http://127.0.0.1:3000/health" ]
       interval: 30s
       timeout: 10s
       retries: 3
       start_period: 40s
+
+volumes:
+  chefbible-data:
+

src/lib/components/RecipeCard.svelte

@@ -111,6 +111,9 @@
 				<span class="badge badge-sm badge-success">
 					{recipe.station || 'Pans'}
 				</span>
+				<span class="badge badge-outline badge-sm">
+					{recipe.type || 'Dish'}
+				</span>
 				{#if authenticated}
 					<button
 						class="btn btn-outline btn-xs btn-primary"

src/routes/+page.svelte

@@ -54,18 +54,96 @@
 
 	{#if data.authenticated}
 		<section class="mx-auto max-w-7xl p-10 lg:p-6">
-			<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+			<div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
-				{#each data.recipes as recipe}
+				<a
-					<RecipeCard {recipe} authenticated={data.authenticated} />
+					href="/ingredients"
-				{/each}
+					class="card border border-base-200 bg-white p-8 shadow-lg transition-shadow hover:shadow-xl"
+				>
+					<div class="flex flex-col items-center gap-4 text-center">
+						<svg
+							width="48"
+							height="48"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="1.5"
+							class="text-primary"
+						>
+							<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
+						</svg>
+						<h2 class="text-2xl font-bold">Ingredients</h2>
+						<p class="text-base-content/70">View all ingredient recipes</p>
+					</div>
+				</a>
+
+				<a
+					href="/dishes"
+					class="card border border-base-200 bg-white p-8 shadow-lg transition-shadow hover:shadow-xl"
+				>
+					<div class="flex flex-col items-center gap-4 text-center">
+						<svg
+							width="48"
+							height="48"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="1.5"
+							class="text-secondary"
+						>
+							<circle cx="12" cy="12" r="10" />
+							<path d="M12 6v6l4 2" />
+						</svg>
+						<h2 class="text-2xl font-bold">Dishes</h2>
+						<p class="text-base-content/70">View all dish recipes</p>
+					</div>
+				</a>
 			</div>
 		</section>
 	{:else}
 		<section class="mx-auto max-w-7xl p-10 lg:p-6">
-			<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+			<div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
-				{#each data.recipes as recipe}
+				<a
-					<RecipeCard {recipe} authenticated={data.authenticated} />
+					href="/ingredients"
-				{/each}
+					class="card border border-base-200 bg-white p-8 shadow-lg transition-shadow hover:shadow-xl"
+				>
+					<div class="flex flex-col items-center gap-4 text-center">
+						<svg
+							width="48"
+							height="48"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="1.5"
+							class="text-primary"
+						>
+							<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
+						</svg>
+						<h2 class="text-2xl font-bold">Ingredients</h2>
+						<p class="text-base-content/70">View all ingredient recipes</p>
+					</div>
+				</a>
+
+				<a
+					href="/dishes"
+					class="card border border-base-200 bg-white p-8 shadow-lg transition-shadow hover:shadow-xl"
+				>
+					<div class="flex flex-col items-center gap-4 text-center">
+						<svg
+							width="48"
+							height="48"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="1.5"
+							class="text-secondary"
+						>
+							<circle cx="12" cy="12" r="10" />
+							<path d="M12 6v6l4 2" />
+						</svg>
+						<h2 class="text-2xl font-bold">Dishes</h2>
+						<p class="text-base-content/70">View all dish recipes</p>
+					</div>
+				</a>
 			</div>
 		</section>
 	{/if}

src/routes/recipe/[id]/edit/+page.svelte

@@ -514,6 +514,14 @@
 					<option value="Grill" selected={data.recipe?.station === 'Grill'}>Grill</option>
 				</select>
 			</label>
+
+			<label class="form-control min-w-0">
+				<span class="label"><span class="label-text font-bold">Type</span></span>
+				<select name="type" class="select-bordered select w-full min-w-0">
+					<option value="Dish" selected={data.recipe?.type === 'Dish'}>Dish</option>
+					<option value="Ingredient" selected={data.recipe?.type === 'Ingredient'}>Ingredient</option>
+				</select>
+			</label>
 		</div>
 
 		<label class="form-control min-w-0">

src/routes/recipe/new/+page.svelte

@@ -469,6 +469,14 @@
 						<option>Grill</option>
 					</select>
 				</label>
+
+				<label class="form-control">
+					<span class="label"><span class="label-text font-bold">Type</span></span>
+					<select name="type" class="select-bordered select w-full min-w-0">
+						<option value="Dish" selected>Dish</option>
+						<option value="Ingredient">Ingredient</option>
+					</select>
+				</label>
 			</div>
 
 			<label class="form-control min-w-0">