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.
This commit is contained in:
Davide Scaini
@@ -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>
|
||||
@@ -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"
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user