From dab9fc705d234882fa59fc5d1439f899e76269ec Mon Sep 17 00:00:00 2001
From: jerremyng <jerrremyng@gmail.com>
Date: Thu, 8 Jan 2026 19:18:30 +0000
Subject: [PATCH] feat: preview polling url tabs

---
 resources/css/app.css                         | 26 ++++++++
 .../views/livewire/plugins/recipe.blade.php   | 60 ++++++++++++++++---
 2 files changed, 78 insertions(+), 8 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index 30cb7a1..3cb1026 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -72,3 +72,29 @@ select:focus[data-flux-control] {
 /* \[:where(&)\]:size-4 {
     @apply size-4;
 } */
+
+.tab-button {
+    @apply flex items-center gap-2 px-4 py-2 text-sm font-medium transition-all;
+    @apply rounded-t-lg border-t border-x border-transparent;
+
+    /* This makes the button sit slightly over the box border */
+    margin-bottom: -1px;
+    position: relative;
+    z-index: 1;
+}
+
+.tab-button.is-active {
+    @apply text-white border-zinc-700;
+    /* Z-index 10 ensures the bottom border of the tab hides the top border of the box */
+    z-index: 10;
+    border-bottom: 1px solid theme('colors.zinc.800');
+}
+
+.tab-button:not(.is-active) {
+    @apply text-zinc-500;
+}
+
+.tab-button:not(.is-active):hover {
+    @apply bg-zinc-700/50 text-zinc-300 border-zinc-700/50;
+    cursor: pointer;
+}
diff --git a/resources/views/livewire/plugins/recipe.blade.php b/resources/views/livewire/plugins/recipe.blade.php
index 38fecc9..309b839 100644
--- a/resources/views/livewire/plugins/recipe.blade.php
+++ b/resources/views/livewire/plugins/recipe.blade.php
@@ -733,15 +733,62 @@ HTML;
                     </div>
 
                     @if($data_strategy === 'polling')
-                        <div class="mb-4">
-                            <flux:textarea label="Polling URL" description="You can use configuration variables with Liquid syntax. Supports multiple requests via line break separation" wire:model="polling_url" id="polling_url"
+                    <flux:label>Polling URL</flux:label>
+
+                    <div x-data="{ subTab: 'settings' }" class="mt-2 mb-4">
+                        <div class="flex">
+                            <button
+                                @click="subTab = 'settings'"
+                                class="tab-button"
+                                :class="subTab === 'settings' ? 'is-active' : ''"
+                            >
+                                <flux:icon.cog-6-tooth class="size-4"/>
+                                Settings
+                            </button>
+
+                            <button
+                                @click="subTab = 'preview'"
+                                class="tab-button"
+                                :class="subTab === 'preview' ? 'is-active' : ''"
+                            >
+                                <flux:icon.eye class="size-4" />
+                                Preview URL
+                            </button>
+                        </div>
+
+                        <div class="flex-col p-4 border border-zinc-700 rounded-b-xl rounded-tr-xl shadow-2xl">
+                            <div x-show="subTab === 'settings'" x-transition:enter.opacity.duration.150ms>
+                                <flux:field>
+                                    <flux:description>Enter the URL(s) to poll for data:</flux:description>
+                                    <flux:textarea
+                                        wire:model.live="polling_url"
                                         placeholder="https://example.com/api"
-                                        class="block w-full" type="text" name="polling_url" autofocus>
-                            </flux:input>
-                            <flux:button icon="cloud-arrow-down" wire:click="updateData" class="block mt-2 w-full">
+                                        rows="5"
+                                    />
+                                    <flux:description>
+                                        {!! 'Hint: Supports multiple requests via line break separation. You can also use configuration variables with <a href="https://help.usetrmnl.com/en/articles/12689499-dynamic-polling-urls">Liquid syntax</a>. ' !!}
+                                    </flux:description>
+                                </flux:field>
+                            </div>
+
+                            <div x-show="subTab === 'preview'" x-cloak x-transition:enter.opacity.duration.150ms>
+                                <flux:field>
+                                    <flux:description>Preview computed URLs here (readonly):</flux:description>
+                                    <flux:textarea
+                                        readonly
+                                        placeholder="Nothing to show..."
+                                        rows="5"
+                                    >
+                                        {{ $this->plugin->resolveLiquidVariables($this->polling_url) }}
+                                    </flux:textarea>
+                                </flux:field>
+                            </div>
+
+                            <flux:button variant="primary" icon="cloud-arrow-down" wire:click="updateData" class="w-full mt-4">
                                 Fetch data now
                             </flux:button>
                         </div>
+                    </div>
 
                         <div class="mb-4">
                             <flux:radio.group wire:model.live="polling_verb" label="Polling Verb" variant="segmented">
@@ -905,9 +952,6 @@ HTML;
                         </div>
                     </flux:field>
 
-
-
-
                 </div>
             @else
             <div class="flex items-center gap-6 mb-4 mt-4">