mAi 80f2f82ac1 ui: minimalist /admin/feedback list — cards + ⋯ menu + status pill toggle
m chose cards over a spacious-list pattern. They're MINIMALIST cards: subtle
.fb-card bg on the gradient page bg, no border + shadow stack, generous
internal padding, plenty of negative space between cards (1.5rem mobile,
2rem desktop). 2-up at ≥640px so they breathe without widening the shell.

Per-row simplifications:

- Drop the H2 "Your forms (N)" — the cards are the count.
- Drop the descriptive paragraph in the header — single primary CTA on the
  right is the entire header.
- Card title is the link to detail. The "Edit" button becomes implicit.
- Subtitle merges mode + counts on one muted line; the "created DATE" line
  and the raw "/f/<slug>" line both go away (slug is in the menu, date is
  available on the detail page).
- Right side: a clickable .fb-status-pill that flips status optimistically,
  next to a .fb-menu (⋯ trigger + native <details> panel) holding Copy link
  / Open / Edit / ────── / Delete.
- Optimistic status toggle: pill flips instantly, PATCH fires in background,
  reverts to server state on failure. Status is reversible so this is safe.
- Delete still uses the existing confirm() modal (m's override — no undo
  toast, deletion remains a deliberate two-step action).
- All inline style="..." removed except a tiny hoisted .fb-list-head style
  block for the header layout.

Click-outside-and-Escape close any open ⋯ menu — added via document-level
listener in onMount, cleaned up in onDestroy.

Empty state gets generous whitespace + a primary "Create your first form"
CTA in the .fb-empty container.
2026-05-06 12:28:21 +02:00
2026-05-05 11:38:11 +02:00

fdbck.msbls.de

Per-link feedback forms and live-chat masks. Anonymous, slug-gated, no auth required for participants.

Spun out from m/flexsiebels.de issue #63 — full design at docs/plans/feedback-feature.md.

Stack

SvelteKit 5 + Svelte 5 + bun + @sveltejs/adapter-node. Postgres + Supabase auth. Schema: fdbck.feedback_{instances,submissions,posts} on supa.flexsiebels.de (msupabase).

Run locally

cp .env.example .env  # fill SUPABASE_*
bun install
bun run dev

Test + check

bun run test    # rate-limit + public-scope unit tests
bun run check   # svelte-check (type errors / a11y)
bun run build   # adapter-node production build → ./build

Deploy

Dockerfile uses oven/bun:latest. Dokploy app: fdbck.msbls.de. DNS via Hostinger (handled out of band).

Structure

src/
  hooks.server.ts        — auth + public-scope policy gate
  lib/server/
    auth.ts              — cookie JWT + Supabase refresh
    fdb.ts               — Postgres `fdbck` schema accessor
    feedback.ts          — slug generator + DB helpers + rate-limit constants
    public-scope.ts      — anonymous-DB-access fail-closed gate
    rate-limit.ts        — in-memory token bucket
    schemas.ts           — Zod request validation
    supabase.ts          — admin + anon client singletons
  routes/
    +page.svelte         — landing
    f/[slug]/            — public participant page (form + live chat)
    admin/feedback/      — m's admin (list + detail + create)
    api/
      auth/              — sign-in / sign-out
      public/feedback/   — anonymous slug-gated endpoints
      admin/feedback/    — owner-scoped admin endpoints

Data model (canonical: design doc §5)

  • fdbck.feedback_instances — slug, title, description, owner_user_id, form_definition (jsonb), chat_enabled, status (open | closed), closed_at
  • fdbck.feedback_submissions — instance_id, display_name (nullable = anonymous), client_session_id, answers (jsonb), client_ip, user_agent
  • fdbck.feedback_posts — instance_id, display_name, client_session_id, body, hidden (m soft-moderate), client_ip, user_agent

Anti-abuse layers

  • 32-char base62 slugs (~190 bits entropy)
  • in-memory rate-limit (30 posts / 5 min, 10 submits / 5 min, per IP+slug)
  • honeypot field on forms + chat (silently dropped)
  • body length caps + closing kill-switch
  • noindex meta + robots.txt Disallow: /

Out of scope (v1)

Drag-drop form-builder · post reactions · realtime/SSE · CAPTCHA · trusted-tier owner sharing · branding/theming · auto-notifications. All have a clean upgrade path on the existing schema.

Issue origin

m/flexsiebels.de#63 — m PWA-voice 2026-05-05: "Im Wesentlichen quasi Microsoft Forms und Teams-Feedback in einem auf einer Webseite."

Description
fdbck.msbls.de — standalone anonymous feedback (forms + live chat) per-link app
Readme 344 KiB
Languages
TypeScript 48%
Svelte 37.9%
CSS 13.5%
HTML 0.3%
Dockerfile 0.2%