m/fdbck
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

ui: minimalist /admin/feedback/new

Browse Source 
- Drop the page subtitle ("Set up a feedback form, a live chat session…").
  The H1 + the form below carry meaning on their own.
- Replace the chip-style back-button with a quiet text-only .fb-back-link.
- Replace the inline-checkbox-as-fb-option-row chat toggle with a proper
  .fb-toggle (label-left + hint + native checkbox-right).
- Tuck the JSON-questions textarea + sample button + helper text behind a
  <details> disclosure labelled "Add questions now (advanced)".
  The visual builder on the detail page is the canonical path; the JSON
  paste at creation time is a power-user speed-up that no longer dominates
  the page. Common path now reads as 4 inputs and a button.
- Move the "Insert sample" button inside the disclosure where it belongs.

Backend untouched. /api/admin/feedback POST contract unchanged.
This commit is contained in:
mAi
2026-05-06 12:27:11 +02:00
parent b1ee5530fd
commit 5080f39079
1 changed files with 40 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/routes/admin/feedback/new/+page.svelte
View File

@@ -80,12 +80,12 @@
</svelte:head>
<div class="fb-shell">
<a href="/admin/feedback" class="fb-back-link">
<Icon name="arrow-left" /> Forms
</a>
<header class="fb-header">
<div style="display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;">
<a href="/admin/feedback" class="fb-btn fb-btn--ghost fb-btn--sm"><Icon name="arrow-left" /> All forms</a>
</div>
<h1 style="margin-top: 0.5rem;">Create a new form</h1>
<p>Set up a feedback form, a live chat session, or both. You'll get a private link to share.</p>
<h1>New form</h1>
</header>
<section class="fb-section">
@@ -112,17 +112,23 @@
></textarea>
</div>
<div class="fb-question">
<label class="fb-option-row" style="display:inline-flex;">
<input type="checkbox" bind:checked={chatEnabled} />
<span>Enable live chat</span>
</label>
</div>
<label class="fb-toggle">
<span class="fb-toggle__text">
<span class="fb-toggle__label">Live chat</span>
<span class="fb-toggle__hint">Let participants post messages in real time.</span>
</span>
<input type="checkbox" bind:checked={chatEnabled} />
</label>
<div class="fb-question">
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:0.4rem;">
<label class="fb-question__label" for="fb-new-form">Questions (JSON, optional)</label>
<button type="button" class="fb-btn fb-btn--secondary fb-btn--sm" onclick={pasteSample}><Icon name="plus" /> Insert sample</button>
<details class="fb-question fb-new-advanced">
<summary>Add questions now (advanced)</summary>
<p class="fb-question__help" style="margin-top: 0.6rem;">
You can also edit questions visually after the form is created.
</p>
<div class="fb-save-row" style="margin-top: 0.75rem;">
<button type="button" class="fb-btn fb-btn--secondary fb-btn--sm" onclick={pasteSample}>
<Icon name="plus" /> Insert sample
</button>
</div>
<textarea
id="fb-new-form"
@@ -130,12 +136,9 @@
rows="14"
placeholder={'{\n "questions": [\n { "id": "q1", "type": "short_text", "label": "Your name?" }\n ]\n}'}
bind:value={formJson}
style="font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.85rem;"
style="font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.85rem; margin-top: 0.6rem;"
></textarea>
<div class="fb-question__help">
Leave empty for chat-only feedback. You can edit questions visually after the form is created.
</div>
</div>
</details>
{#if createError}
<div class="fb-banner fb-banner--error">{createError}</div>
@@ -147,3 +150,20 @@
</form>
</section>
</div>
<style>
.fb-new-advanced > summary {
cursor: pointer;
color: var(--color-text-muted);
font-size: 0.875rem;
font-weight: 500;
padding: 0.4rem 0;
user-select: none;
}
.fb-new-advanced > summary:hover {
color: var(--color-text-primary);
}
.fb-new-advanced[open] > summary {
color: var(--color-text-primary);
}
</style>