From 38f2e5178827c593824e15d44016c20a8e2dd138 Mon Sep 17 00:00:00 2001
From: Davide Scaini <davide.scaini@alumni.cern>
Date: Wed, 13 May 2026 19:29:39 +0200
Subject: [PATCH] ideas: add Ideas page, nav link; remove feedback button from
 About

New /ideas/ page with Svelte component: card list sorted by votes,
inline submit form, optimistic vote toggling, delete for own/admin.
Bug report link moved to bottom of Ideas page. Feedback button removed
from About page.
---
 site/src/components/IdeasPage.svelte | 217 +++++++++++++++++++++++++++
 site/src/layouts/Base.astro          |   1 +
 site/src/pages/about/index.astro     |  10 --
 site/src/pages/ideas/index.astro     |   7 +
 4 files changed, 225 insertions(+), 10 deletions(-)
 create mode 100644 site/src/components/IdeasPage.svelte
 create mode 100644 site/src/pages/ideas/index.astro

diff --git a/site/src/components/IdeasPage.svelte b/site/src/components/IdeasPage.svelte
new file mode 100644
index 0000000..c0f95d7
--- /dev/null
+++ b/site/src/components/IdeasPage.svelte
@@ -0,0 +1,217 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  interface Idea {
+    id: string;
+    title: string;
+    body: string;
+    author: string;
+    created_at: number;
+    votes: string[];
+    vote_count: number;
+    my_vote: boolean;
+  }
+
+  let ideas: Idea[] = [];
+  let loading = true;
+  let myHandle = '';
+  let isAdmin = false;
+
+  let showForm = false;
+  let newTitle = '';
+  let newBody = '';
+  let submitting = false;
+  let formError = '';
+
+  function relativeTime(ts: number): string {
+    const diff = Math.floor(Date.now() / 1000) - ts;
+    if (diff < 60)   return 'just now';
+    if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+    if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+    const d = Math.floor(diff / 86400);
+    return d === 1 ? '1 day ago' : `${d} days ago`;
+  }
+
+  async function load() {
+    loading = true;
+    try {
+      const [ideasRes, meRes] = await Promise.all([
+        fetch('/api/ideas', { credentials: 'include' }),
+        fetch('/api/me', { credentials: 'include' }),
+      ]);
+      if (ideasRes.status === 401 || meRes.status === 401) {
+        window.location.href = `/login/?next=${encodeURIComponent(window.location.pathname)}`;
+        return;
+      }
+      if (ideasRes.ok) ideas = (await ideasRes.json()).ideas ?? [];
+      if (meRes.ok) {
+        const me = await meRes.json();
+        myHandle = me.handle ?? '';
+        isAdmin = !!me.is_admin;
+      }
+    } finally {
+      loading = false;
+    }
+  }
+
+  async function vote(idea: Idea) {
+    const prev = { my_vote: idea.my_vote, vote_count: idea.vote_count };
+    idea.my_vote = !idea.my_vote;
+    idea.vote_count += idea.my_vote ? 1 : -1;
+    ideas = ideas;
+    try {
+      const r = await fetch(`/api/ideas/${idea.id}/vote`, {
+        method: 'POST',
+        credentials: 'include',
+      });
+      if (r.ok) {
+        const d = await r.json();
+        idea.vote_count = d.votes;
+        idea.my_vote = d.voted;
+        ideas = [...ideas].sort((a, b) => b.vote_count - a.vote_count || b.created_at - a.created_at);
+      } else {
+        idea.my_vote = prev.my_vote;
+        idea.vote_count = prev.vote_count;
+        ideas = ideas;
+      }
+    } catch {
+      idea.my_vote = prev.my_vote;
+      idea.vote_count = prev.vote_count;
+      ideas = ideas;
+    }
+  }
+
+  async function submit() {
+    formError = '';
+    if (!newTitle.trim()) { formError = 'Title is required.'; return; }
+    submitting = true;
+    try {
+      const r = await fetch('/api/ideas', {
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ title: newTitle.trim(), body: newBody.trim() }),
+      });
+      if (r.ok) {
+        newTitle = '';
+        newBody = '';
+        showForm = false;
+        await load();
+      } else {
+        const d = await r.json().catch(() => ({}));
+        formError = d.detail ?? 'Could not submit idea.';
+      }
+    } catch {
+      formError = 'Network error.';
+    } finally {
+      submitting = false;
+    }
+  }
+
+  async function deleteIdea(idea: Idea) {
+    if (!confirm(`Delete "${idea.title}"?`)) return;
+    const r = await fetch(`/api/ideas/${idea.id}`, {
+      method: 'DELETE',
+      credentials: 'include',
+    });
+    if (r.ok) ideas = ideas.filter(i => i.id !== idea.id);
+  }
+
+  onMount(load);
+</script>
+
+<div class="max-w-2xl mx-auto px-4 py-8">
+  <div class="flex items-center justify-between mb-6">
+    <h1 class="text-2xl font-bold text-white">Ideas</h1>
+    <button
+      on:click={() => { showForm = !showForm; formError = ''; }}
+      class="px-4 py-2 rounded-lg text-sm font-medium transition-colors"
+      style="background: var(--accent-dim); color: var(--accent); border: 1px solid var(--accent)"
+    >
+      {showForm ? 'Cancel' : '+ Submit an idea'}
+    </button>
+  </div>
+
+  {#if showForm}
+    <div class="rounded-xl border p-4 mb-6" style="background: var(--bg-card); border-color: var(--border)">
+      <input
+        bind:value={newTitle}
+        placeholder="Title (required)"
+        maxlength="200"
+        class="w-full rounded-lg px-3 py-2 text-sm mb-3"
+        style="background: var(--bg-elevated); border: 1px solid var(--border-sub); color: var(--text-primary)"
+      />
+      <textarea
+        bind:value={newBody}
+        placeholder="More detail… (optional)"
+        maxlength="2000"
+        rows="3"
+        class="w-full rounded-lg px-3 py-2 text-sm mb-3 resize-none"
+        style="background: var(--bg-elevated); border: 1px solid var(--border-sub); color: var(--text-primary)"
+      ></textarea>
+      {#if formError}
+        <p class="text-red-400 text-xs mb-2">{formError}</p>
+      {/if}
+      <button
+        on:click={submit}
+        disabled={submitting}
+        class="px-4 py-2 rounded-lg text-sm font-medium text-white transition-opacity hover:opacity-90 disabled:opacity-50"
+        style="background: var(--accent)"
+      >
+        {submitting ? 'Submitting…' : 'Submit'}
+      </button>
+    </div>
+  {/if}
+
+  {#if loading}
+    <p class="text-sm" style="color: var(--text-5)">Loading…</p>
+  {: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)}
+        <li class="rounded-xl border px-4 py-3 flex gap-3" style="background: var(--bg-card); border-color: var(--border)">
+          <!-- 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">
+            <div class="flex items-start justify-between gap-2">
+              <p class="font-medium text-sm" style="color: var(--text-primary)">{idea.title}</p>
+              {#if isAdmin || idea.author === myHandle}
+                <button
+                  on:click={() => deleteIdea(idea)}
+                  class="shrink-0 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>
+            {#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>
+          </div>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+
+  <div class="mt-10 pt-6 border-t text-sm" style="border-color: var(--border); color: var(--text-5)">
+    Found a bug? <a href="/feedback/" style="color: var(--accent)" class="hover:underline">Report it here →</a>
+  </div>
+</div>
diff --git a/site/src/layouts/Base.astro b/site/src/layouts/Base.astro
index b1d5297..969d411 100644
--- a/site/src/layouts/Base.astro
+++ b/site/src/layouts/Base.astro
@@ -221,6 +221,7 @@ try {
             <a href={`${baseUrl}convert/`} class="text-sm text-zinc-400 hover:text-white transition-colors shrink-0">Convert</a>
           )}
           <a href={`${baseUrl}segments/`} class="text-sm text-zinc-400 hover:text-white transition-colors shrink-0">Segments</a>
+          <a href={`${baseUrl}ideas/`} class="text-sm text-zinc-400 hover:text-white transition-colors shrink-0">Ideas</a>
           <a id="nav-about" href={`${baseUrl}about/`} class="text-sm text-zinc-400 hover:text-white transition-colors shrink-0">About</a>
           {wikiUrl && (
             <a id="nav-wiki" href={wikiUrl} style="display:none"
diff --git a/site/src/pages/about/index.astro b/site/src/pages/about/index.astro
index 2b43f9d..0614b2e 100644
--- a/site/src/pages/about/index.astro
+++ b/site/src/pages/about/index.astro
@@ -34,14 +34,6 @@ const labels = {
       >
         ☕ Support on Ko-fi
       </a>
-      <a
-        id="feedback-btn"
-        href="/feedback/"
-        style="display:none"
-        class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium border border-zinc-700 text-zinc-300 hover:text-white hover:border-zinc-500 transition-colors"
-      >
-        💬 Send feedback
-      </a>
     </div>
 
     <div class="space-y-8 text-sm text-zinc-400 leading-relaxed">
@@ -152,8 +144,6 @@ const labels = {
   try {
     const me = await fetch('/api/me', { credentials: 'include' });
     if (!me.ok) return;          // not logged in — hide community section
-    const feedbackBtn = document.getElementById('feedback-btn');
-    if (feedbackBtn) feedbackBtn.style.display = '';
   } catch { return; }
   let data;
   try {
diff --git a/site/src/pages/ideas/index.astro b/site/src/pages/ideas/index.astro
new file mode 100644
index 0000000..4411d06
--- /dev/null
+++ b/site/src/pages/ideas/index.astro
@@ -0,0 +1,7 @@
+---
+import Base from '../../layouts/Base.astro';
+import IdeasPage from '../../components/IdeasPage.svelte';
+---
+<Base title="Ideas — BincioActivity">
+  <IdeasPage client:only="svelte" />
+</Base>