Ideas: add 'awaiting feedback' status with amber section + admin comment

Status cycles open → awaiting → done → reopen.
Awaiting ideas float to the top in a 'Waiting for your feedback' section
with an amber border (#f59e0b).

Admin can attach an implementation note to any awaiting idea via
POST /api/ideas/{id}/comment. The note appears inside the same card
in a distinct sub-box with a subtle amber tint border, editable inline.
The sub-box is visible to all users once a note exists.

site/src/components/IdeasPage.svelte

@@ -11,6 +11,7 @@
     vote_count: number;
     my_vote: boolean;
     status?: string;
+    admin_comment?: string | null;
   }
 
   let ideas: Idea[] = [];
@@ -29,6 +30,40 @@
   let editBody = '';
   let editSaving = false;
 
+  let editingCommentId: string | null = null;
+  let commentDraft = '';
+  let commentSaving = false;
+
+  function startEditComment(idea: Idea) {
+    editingCommentId = idea.id;
+    commentDraft = idea.admin_comment ?? '';
+  }
+
+  function cancelEditComment() {
+    editingCommentId = null;
+    commentDraft = '';
+  }
+
+  async function saveComment(idea: Idea) {
+    commentSaving = true;
+    try {
+      const r = await fetch(`/api/ideas/${idea.id}/comment`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ comment: commentDraft.trim() }),
+      });
+      if (r.ok) {
+        idea.admin_comment = commentDraft.trim() || null;
+        ideas = ideas;
+        editingCommentId = null;
+        commentDraft = '';
+      }
+    } finally {
+      commentSaving = false;
+    }
+  }
+
   function startEdit(idea: Idea) {
     editingId = idea.id;
     editTitle = idea.title;
@@ -145,6 +180,10 @@
     }
   }
 
+  function statusOrder(s: string | undefined) {
+    return s === 'awaiting' ? 0 : s === 'done' ? 2 : 1;
+  }
+
   async function toggleStatus(idea: Idea) {
     const r = await fetch(`/api/ideas/${idea.id}/status`, {
       method: 'POST',
@@ -154,13 +193,16 @@
       const d = await r.json();
       idea.status = d.status;
       ideas = [...ideas].sort((a, b) =>
-        (a.status === 'done' ? 1 : 0) - (b.status === 'done' ? 1 : 0) ||
+        statusOrder(a.status) - statusOrder(b.status) ||
         b.vote_count - a.vote_count ||
         b.created_at - a.created_at
       );
     }
   }
 
+  $: awaitingIdeas = ideas.filter(i => i.status === 'awaiting');
+  $: otherIdeas    = ideas.filter(i => i.status !== 'awaiting');
+
   async function deleteIdea(idea: Idea) {
     if (!confirm(`Delete "${idea.title}"?`)) return;
     const r = await fetch(`/api/ideas/${idea.id}`, {
@@ -228,97 +270,171 @@
   {:else if ideas.length === 0}
     <p class="text-sm" style="color: var(--text-5)">No ideas yet. Be the first!</p>
   {:else}
-    <ul class="space-y-3">
-      {#each ideas as idea (idea.id)}
-        {@const done = idea.status === 'done'}
-        <li
-          class="rounded-xl border px-4 py-3 flex gap-3 transition-opacity"
-          style="background: var(--bg-card); border-color: var(--border); opacity: {done ? '0.55' : '1'}"
-        >
-          <!-- Vote button -->
-          <div class="flex flex-col items-center shrink-0 pt-0.5">
-            <button
-              on:click={() => vote(idea)}
-              class="w-10 h-10 rounded-lg text-sm font-semibold flex flex-col items-center justify-center gap-0 leading-none transition-colors"
-              style={idea.my_vote
-                ? 'background: var(--accent-dim); border: 1px solid var(--accent); color: var(--accent)'
-                : 'background: transparent; border: 1px solid var(--border-sub); color: var(--text-5)'}
-              title={idea.my_vote ? 'Remove vote' : '+1 this idea'}
+    {#if awaitingIdeas.length > 0}
+      <div class="mb-2">
+        <p class="text-xs font-semibold uppercase tracking-wide mb-2" style="color: #f59e0b">
+          🕐 Waiting for your feedback
+        </p>
+        <ul class="space-y-3">
+          {#each awaitingIdeas as idea (idea.id)}
+            <li
+              class="rounded-xl border px-4 py-3 flex gap-3"
+              style="background: var(--bg-card); border-color: #f59e0b; border-width: 1.5px"
             >
-              <span class="text-xs leading-none">▲</span>
-              <span class="text-xs leading-none">{idea.vote_count}</span>
-            </button>
-          </div>
+              {@render ideaContent(idea)}
+            </li>
+          {/each}
+        </ul>
+      </div>
+    {/if}
 
-          <!-- Content -->
-          <div class="flex-1 min-w-0">
-            {#if editingId === idea.id}
-              <input
-                bind:value={editTitle}
-                class="w-full rounded-lg px-3 py-1.5 text-sm mb-2"
-                style="background: var(--bg-elevated); border: 1px solid var(--border-sub); color: var(--text-primary)"
-              />
-              <textarea
-                bind:value={editBody}
-                rows="2"
-                class="w-full rounded-lg px-3 py-1.5 text-sm mb-2 resize-none"
-                style="background: var(--bg-elevated); border: 1px solid var(--border-sub); color: var(--text-primary)"
-              ></textarea>
-              <div class="flex gap-2">
-                <button
-                  on:click={() => saveEdit(idea)}
-                  disabled={editSaving || !editTitle.trim()}
-                  class="px-3 py-1 rounded-lg text-xs font-medium text-white transition-opacity hover:opacity-90 disabled:opacity-50"
-                  style="background: var(--accent)"
-                >{editSaving ? 'Saving…' : 'Save'}</button>
-                <button
-                  on:click={cancelEdit}
-                  class="px-3 py-1 rounded-lg text-xs transition-colors"
-                  style="color: var(--text-5)"
-                >Cancel</button>
-              </div>
-            {:else}
-              <div class="flex items-start justify-between gap-2">
-                <p class="font-medium text-sm" style="color: var(--text-primary)">
-                  {#if done}<span class="mr-1.5 text-green-500">✓</span>{/if}{idea.title}
-                </p>
-                <div class="flex items-center gap-1 shrink-0">
-                  {#if isAdmin}
-                    <button
-                      on:click={() => toggleStatus(idea)}
-                      class="text-xs px-1.5 py-0.5 rounded transition-colors"
-                      style="color: {done ? 'var(--text-5)' : 'var(--accent)'}; border: 1px solid {done ? 'var(--border-sub)' : 'var(--accent)'}"
-                      title={done ? 'Mark as open' : 'Mark as done'}
-                    >{done ? 'reopen' : 'done'}</button>
-                  {/if}
-                  {#if isAdmin || idea.author === myHandle}
-                    <button
-                      on:click={() => startEdit(idea)}
-                      class="text-xs px-1.5 py-0.5 rounded transition-colors hover:text-white"
-                      style="color: var(--text-5)"
-                      title="Edit"
-                    >✎</button>
-                    <button
-                      on:click={() => deleteIdea(idea)}
-                      class="text-xs px-1.5 py-0.5 rounded transition-colors hover:text-red-400"
-                      style="color: var(--text-5)"
-                      title="Delete"
-                    >×</button>
-                  {/if}
-                </div>
-              </div>
-              {#if idea.body}
-                <p class="text-xs mt-1" style="color: var(--text-4)">{idea.body}</p>
-              {/if}
-              <p class="text-xs mt-1.5" style="color: var(--text-5)">
-                @{idea.author} · {relativeTime(idea.created_at)}
-              </p>
+    {#if otherIdeas.length > 0}
+      <ul class="space-y-3">
+        {#each otherIdeas as idea (idea.id)}
+          {@const done = idea.status === 'done'}
+          <li
+            class="rounded-xl border px-4 py-3 flex gap-3 transition-opacity"
+            style="background: var(--bg-card); border-color: var(--border); opacity: {done ? '0.55' : '1'}"
+          >
+            {@render ideaContent(idea)}
+          </li>
+        {/each}
+      </ul>
+    {/if}
+  {/if}
+
+  {#snippet ideaContent(idea: Idea)}
+    {@const done = idea.status === 'done'}
+    {@const awaiting = idea.status === 'awaiting'}
+    <!-- Vote button -->
+    <div class="flex flex-col items-center shrink-0 pt-0.5">
+      <button
+        on:click={() => vote(idea)}
+        class="w-10 h-10 rounded-lg text-sm font-semibold flex flex-col items-center justify-center gap-0 leading-none transition-colors"
+        style={idea.my_vote
+          ? 'background: var(--accent-dim); border: 1px solid var(--accent); color: var(--accent)'
+          : 'background: transparent; border: 1px solid var(--border-sub); color: var(--text-5)'}
+        title={idea.my_vote ? 'Remove vote' : '+1 this idea'}
+      >
+        <span class="text-xs leading-none">▲</span>
+        <span class="text-xs leading-none">{idea.vote_count}</span>
+      </button>
+    </div>
+
+    <!-- Content -->
+    <div class="flex-1 min-w-0">
+      {#if editingId === idea.id}
+        <input
+          bind:value={editTitle}
+          class="w-full rounded-lg px-3 py-1.5 text-sm mb-2"
+          style="background: var(--bg-elevated); border: 1px solid var(--border-sub); color: var(--text-primary)"
+        />
+        <textarea
+          bind:value={editBody}
+          rows="2"
+          class="w-full rounded-lg px-3 py-1.5 text-sm mb-2 resize-none"
+          style="background: var(--bg-elevated); border: 1px solid var(--border-sub); color: var(--text-primary)"
+        ></textarea>
+        <div class="flex gap-2">
+          <button
+            on:click={() => saveEdit(idea)}
+            disabled={editSaving || !editTitle.trim()}
+            class="px-3 py-1 rounded-lg text-xs font-medium text-white transition-opacity hover:opacity-90 disabled:opacity-50"
+            style="background: var(--accent)"
+          >{editSaving ? 'Saving…' : 'Save'}</button>
+          <button
+            on:click={cancelEdit}
+            class="px-3 py-1 rounded-lg text-xs transition-colors"
+            style="color: var(--text-5)"
+          >Cancel</button>
+        </div>
+      {:else}
+        <div class="flex items-start justify-between gap-2">
+          <p class="font-medium text-sm" style="color: var(--text-primary)">
+            {#if done}<span class="mr-1.5 text-green-500">✓</span>{/if}{idea.title}
+          </p>
+          <div class="flex items-center gap-1 shrink-0">
+            {#if isAdmin}
+              {@const nextLabel = done ? 'reopen' : awaiting ? 'done' : 'awaiting'}
+              {@const btnColor = done ? 'var(--text-5)' : awaiting ? 'var(--accent)' : '#f59e0b'}
+              {@const borderColor = done ? 'var(--border-sub)' : awaiting ? 'var(--accent)' : '#f59e0b'}
+              <button
+                on:click={() => toggleStatus(idea)}
+                class="text-xs px-1.5 py-0.5 rounded transition-colors"
+                style="color: {btnColor}; border: 1px solid {borderColor}"
+                title="Cycle status"
+              >{nextLabel}</button>
+            {/if}
+            {#if isAdmin || idea.author === myHandle}
+              <button
+                on:click={() => startEdit(idea)}
+                class="text-xs px-1.5 py-0.5 rounded transition-colors hover:text-white"
+                style="color: var(--text-5)"
+                title="Edit"
+              >✎</button>
+              <button
+                on:click={() => deleteIdea(idea)}
+                class="text-xs px-1.5 py-0.5 rounded transition-colors hover:text-red-400"
+                style="color: var(--text-5)"
+                title="Delete"
+              >×</button>
             {/if}
           </div>
-        </li>
-      {/each}
-    </ul>
-  {/if}
+        </div>
+        {#if idea.body}
+          <p class="text-xs mt-1" style="color: var(--text-4)">{idea.body}</p>
+        {/if}
+        <p class="text-xs mt-1.5" style="color: var(--text-5)">
+          @{idea.author} · {relativeTime(idea.created_at)}
+        </p>
+      {/if}
+
+      {#if idea.admin_comment || (isAdmin && awaiting)}
+        <div class="mt-3 rounded-lg px-3 py-2.5" style="background: var(--bg-elevated); border: 1px solid rgba(245,158,11,0.25)">
+          {#if editingCommentId === idea.id}
+            <textarea
+              bind:value={commentDraft}
+              rows="3"
+              placeholder="Add an implementation note…"
+              class="w-full rounded px-2 py-1.5 text-xs resize-none mb-2"
+              style="background: var(--bg-card); border: 1px solid var(--border-sub); color: var(--text-primary)"
+            ></textarea>
+            <div class="flex gap-2">
+              <button
+                on:click={() => saveComment(idea)}
+                disabled={commentSaving}
+                class="px-3 py-1 rounded-lg text-xs font-medium text-white transition-opacity hover:opacity-90 disabled:opacity-50"
+                style="background: var(--accent)"
+              >{commentSaving ? 'Saving…' : 'Save'}</button>
+              <button
+                on:click={cancelEditComment}
+                class="px-3 py-1 rounded-lg text-xs transition-colors"
+                style="color: var(--text-5)"
+              >Cancel</button>
+            </div>
+          {:else}
+            <div class="flex items-start justify-between gap-2">
+              <div class="flex-1 min-w-0">
+                {#if idea.admin_comment}
+                  <p class="text-xs leading-relaxed" style="color: var(--text-4)">{idea.admin_comment}</p>
+                {:else}
+                  <p class="text-xs italic" style="color: var(--text-5)">Add an implementation note…</p>
+                {/if}
+              </div>
+              {#if isAdmin}
+                <button
+                  on:click={() => startEditComment(idea)}
+                  class="text-xs shrink-0 transition-colors hover:text-white"
+                  style="color: var(--text-5)"
+                  title="Edit note"
+                >✎</button>
+              {/if}
+            </div>
+          {/if}
+        </div>
+      {/if}
+    </div>
+  {/snippet}
 
   <div class="mt-10 pt-6 border-t text-sm" style="border-color: var(--border); color: var(--text-5)">
     <a href="/feedback/" style="color: var(--accent)" class="hover:underline">Found a bug? Have feedback to share? Click here.</a>