From 70d9956059c47fb4dba442e0014b0fd51d20b139 Mon Sep 17 00:00:00 2001
From: Hugh Kaznowski <hughkaznowski@Hughs-MacBook-Pro.local>
Date: Sat, 5 Sep 2026 18:35:24 +0100
Subject: [PATCH] Lay out ntfy sink server URL and topic inputs on one line

Combines the ntfy server URL and topic fields into a single flex row
separated by a "/" to visually communicate that they compose into one
destination (server + topic), instead of stacking as two full-width
rows.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XFUNZwCvz3kcod3352ZR2o
---
 .../013-ntfy-sink-inline-url-topic-fields.md  |  8 -----
 webapp/src/components/NavMenu.tsx             | 35 ++++++++++---------
 2 files changed, 19 insertions(+), 24 deletions(-)
 delete mode 100644 tickets/013-ntfy-sink-inline-url-topic-fields.md

diff --git a/tickets/013-ntfy-sink-inline-url-topic-fields.md b/tickets/013-ntfy-sink-inline-url-topic-fields.md
deleted file mode 100644
index 8ff47c0..0000000
--- a/tickets/013-ntfy-sink-inline-url-topic-fields.md
+++ /dev/null
@@ -1,8 +0,0 @@
-# Combine ntfy sink URL and topic into one line
-
-The ntfy sink should not be 2 input fields stacked per line. Instead the URL input and topic input should sit on the same line, formatted like `<url-input>/<topic-input>` (not literally that string, but visually structured that way), with a clear separator between them indicating how the two values will be combined/used.
-
-## Acceptance criteria
-- The ntfy sink's URL and topic inputs are laid out on a single line instead of one per line.
-- A clear visual separator (e.g. a `/`) sits between the two inputs, indicating they combine into one destination (server URL + topic).
-- Existing saved URL/topic values still populate correctly into the two inputs.
diff --git a/webapp/src/components/NavMenu.tsx b/webapp/src/components/NavMenu.tsx
index 7a1aa31..5f11f7f 100644
--- a/webapp/src/components/NavMenu.tsx
+++ b/webapp/src/components/NavMenu.tsx
@@ -456,22 +456,25 @@ function SettingsPanel({ panel }: { panel: ReturnType<typeof useSettingsPanel> }
           <HelpIcon sectionId="alerts" label="Help: Ntfy sink" />
         </div>
         <div className="flex flex-col gap-2">
-          <input
-            type="text"
-            placeholder="topic"
-            value={ntfyTopicInput}
-            onChange={(e) => setNtfyTopicInput(e.target.value)}
-            onBlur={handleNtfyTopicBlur}
-            className="rounded border border-border-soft bg-surface-1 px-2 py-1 text-xs text-text placeholder:text-text-subtle focus:border-border-strong focus:outline-none"
-          />
-          <input
-            type="text"
-            placeholder="https://ntfy.sh"
-            value={ntfyServerInput}
-            onChange={(e) => setNtfyServerInput(e.target.value)}
-            onBlur={handleNtfyServerBlur}
-            className="rounded border border-border-soft bg-surface-1 px-2 py-1 text-xs text-text placeholder:text-text-subtle focus:border-border-strong focus:outline-none"
-          />
+          <div className="flex items-center gap-1.5">
+            <input
+              type="text"
+              placeholder="https://ntfy.sh"
+              value={ntfyServerInput}
+              onChange={(e) => setNtfyServerInput(e.target.value)}
+              onBlur={handleNtfyServerBlur}
+              className="min-w-0 flex-[2] rounded border border-border-soft bg-surface-1 px-2 py-1 text-xs text-text placeholder:text-text-subtle focus:border-border-strong focus:outline-none"
+            />
+            <span className="shrink-0 text-xs text-text-faint" aria-hidden="true">/</span>
+            <input
+              type="text"
+              placeholder="topic"
+              value={ntfyTopicInput}
+              onChange={(e) => setNtfyTopicInput(e.target.value)}
+              onBlur={handleNtfyTopicBlur}
+              className="min-w-0 flex-1 rounded border border-border-soft bg-surface-1 px-2 py-1 text-xs text-text placeholder:text-text-subtle focus:border-border-strong focus:outline-none"
+            />
+          </div>
           {ntfyTestError && <div className="text-xs text-danger-text-strong">{ntfyTestError}</div>}
           {ntfyTestSuccess && <div className="text-xs text-text-secondary">Test notification sent.</div>}
           <button