From d4e30406748d85f83b0911021a0f8e7d19cf0178 Mon Sep 17 00:00:00 2001
From: Piotr Oleszczyk <piotr@oleszczyk.eu>
Date: Sun, 1 Mar 2026 17:34:00 +0100
Subject: [PATCH] fix(frontend): fix step numbering and client-side API base
 URL

- Step numbers now use each-block index (i+1) instead of order_index+1,
  fixing display when order_index starts from 1 in existing data
- api.ts: browser-side requests use /api (nginx proxy) instead of
  PUBLIC_API_BASE (localhost:8000), fixing PATCH/client calls on remote hosts

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/api.ts                        | 6 +++++-
 frontend/src/routes/routines/[id]/+page.svelte | 4 ++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
index dc0f712..547bae7 100644
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -1,3 +1,4 @@
+import { browser } from '$app/environment';
 import { PUBLIC_API_BASE } from '$env/static/public';
 import type {
 	ActiveIngredient,
@@ -21,7 +22,10 @@ import type {
 // ─── Core fetch helpers ──────────────────────────────────────────────────────
 
 async function request<T>(path: string, init: RequestInit = {}): Promise<T> {
-	const url = `${PUBLIC_API_BASE}${path}`;
+	// Server-side uses PUBLIC_API_BASE (e.g. http://localhost:8000).
+	// Browser-side uses /api so nginx proxies the request on the correct host.
+	const base = browser ? '/api' : PUBLIC_API_BASE;
+	const url = `${base}${path}`;
 	const res = await fetch(url, {
 		headers: { 'Content-Type': 'application/json', ...init.headers },
 		...init
diff --git a/frontend/src/routes/routines/[id]/+page.svelte b/frontend/src/routes/routines/[id]/+page.svelte
index e8cc4e4..d7ac90a 100644
--- a/frontend/src/routes/routines/[id]/+page.svelte
+++ b/frontend/src/routes/routines/[id]/+page.svelte
@@ -180,7 +180,7 @@
 				onfinalize={handleFinalize}
 				class="space-y-2"
 			>
-				{#each steps as step (step.id)}
+				{#each steps as step, i (step.id)}
 					<div class="rounded-md border border-border bg-background">
 						{#if editingStepId === step.id}
 							<!-- ── Edit mode ── -->
@@ -277,7 +277,7 @@
 									class="cursor-grab select-none px-1 text-muted-foreground/60 hover:text-muted-foreground"
 									aria-label="drag to reorder"
 								>⋮⋮</span>
-								<span class="w-5 shrink-0 text-xs text-muted-foreground">{step.order_index + 1}.</span>
+								<span class="w-5 shrink-0 text-xs text-muted-foreground">{i + 1}.</span>
 								<div class="flex-1 min-w-0 px-1">
 									{#if step.product_id}
 										{@const product = products.find((p) => p.id === step.product_id)}