full tour

src/routes/share/+page.svelte

@@ -4,6 +4,9 @@
     let status = $state('idle');
     let logs = $state<string[]>([]);
     let recipe = $state<any>(null);
+    let tandoorEnabled = $state(false);
+    let tandoorImporting = $state(false);
+    let tandoorError = $state<string | null>(null);
     
     // URL param parsing for Share Target
     // Instagram typically shares text that contains the URL, so we might need to parse it out
@@ -17,6 +20,22 @@
 
     let targetUrl = $derived(sharedUrl || extractUrl(sharedText));
 
+    $effect.pre(() => {
+        loadTandoorConfig();
+    });
+
+    // Load Tandoor config on mount
+    async function loadTandoorConfig() {
+        try {
+            const res = await fetch('/api/tandoor-config');
+            const config = await res.json();
+            tandoorEnabled = config.enabled;
+            logs = [...logs, `Tandoor integration ${config.enabled ? 'enabled' : 'disabled'}`];
+        } catch(e) {
+            logs = [...logs, 'Failed to load Tandoor config'];
+        }
+    }
+
     async function process() {
         if(!targetUrl) return;
         status = 'extracting';
@@ -33,6 +52,7 @@
             if (data.recipe) {
                 recipe = data.recipe;
                 status = 'done';
+                logs = [...logs, 'Recipe extraction successful'];
             } else {
                 logs = [...logs, 'Error: ' + JSON.stringify(data)];
                 status = 'error';
@@ -42,6 +62,38 @@
              status = 'error';
         }
     }
+
+    async function importToTandoor() {
+        if (!recipe) return;
+        
+        tandoorImporting = true;
+        tandoorError = null;
+        logs = [...logs, 'Importing recipe to Tandoor...'];
+
+        try {
+            const res = await fetch('/api/tandoor', {
+                method: 'POST',
+                body: JSON.stringify({ recipe }),
+                headers: { 'Content-Type': 'application/json' }
+            });
+
+            const data = await res.json();
+
+            if (data.success) {
+                logs = [...logs, `✓ Recipe imported successfully (ID: ${data.recipeId})`];
+                tandoorError = null;
+            } else {
+                logs = [...logs, `✗ Import failed: ${data.error}`];
+                tandoorError = data.error;
+            }
+        } catch(e) {
+            const errorMsg = e instanceof Error ? e.message : 'Unknown error';
+            logs = [...logs, `✗ Network error: ${errorMsg}`];
+            tandoorError = errorMsg;
+        } finally {
+            tandoorImporting = false;
+        }
+    }
 </script>
 
 <div class="p-8 max-w-lg mx-auto space-y-4">
@@ -68,12 +120,37 @@
         <div class="border rounded p-4 bg-green-50 space-y-2">
             <h2 class="font-bold text-xl">{recipe.name}</h2>
             <p class="text-sm">{recipe.description}</p>
+            <p class="text-muted"><strong>Servings:</strong> {recipe.servings}</p>
             <h3 class="font-bold mt-2">Ingredients</h3>
             <ul class="list-disc pl-5 text-sm">
                 {#each recipe.ingredients as ing}
                     <li>{ing.amount} {ing.unit} {ing.item}</li>
                 {/each}
             </ul>
+            <h3 class="font-bold mt-2">Steps</h3>
+            <ol class="list-decimal pl-5 text-sm">
+                {#each recipe.steps as step}
+                    <li>{step}</li>
+                {/each}
+            </ol>
+
+            {#if tandoorEnabled}
+                <div class="mt-4 pt-4 border-t space-y-2">
+                    <h3 class="font-bold">Tandoor Integration</h3>
+                    {#if tandoorError}
+                        <div class="bg-red-100 text-red-800 p-2 rounded text-sm">
+                            Error: {tandoorError}
+                        </div>
+                    {/if}
+                    <button 
+                        onclick={importToTandoor}
+                        disabled={tandoorImporting}
+                        class="bg-orange-600 text-white px-4 py-2 rounded shadow hover:bg-orange-700 w-full disabled:bg-gray-400 disabled:cursor-not-allowed"
+                    >
+                        {tandoorImporting ? 'Importing...' : 'Import to Tandoor'}
+                    </button>
+                </div>
+            {/if}
         </div>
     {/if}