Compare commits
6 Commits
v0.1.0
...
cdb3a8dbb3
| Author | SHA1 | Date | |
|---|---|---|---|
 sean
|
cdb3a8dbb3 | ||
|
sean
|
0e4c49928b | ||
|
sean
|
82a38a7a15 | ||
|
sean
|
ca292c4782 | ||
|
sean
|
e77e6e4e6d | ||
|
sean
|
98c2b12340 |
@@ -0,0 +1 @@
|
||||
{"reason":"idle timeout","timestamp":1774884294221}
|
||||
@@ -0,0 +1,10 @@
|
||||
{"type":"server-started","port":63304,"host":"127.0.0.1","url_host":"localhost","url":"http://localhost:63304","screen_dir":"/Users/sean/Dev/battl/gunbuilder-prototype/.superpowers/brainstorm/20960-1774881654"}
|
||||
{"type":"screen-added","file":"/Users/sean/Dev/battl/gunbuilder-prototype/.superpowers/brainstorm/20960-1774881654/waiting.html"}
|
||||
{"type":"screen-added","file":"/Users/sean/Dev/battl/gunbuilder-prototype/.superpowers/brainstorm/20960-1774881654/waiting-2.html"}
|
||||
{"type":"screen-added","file":"/Users/sean/Dev/battl/gunbuilder-prototype/.superpowers/brainstorm/20960-1774881654/changelog-layout.html"}
|
||||
{"type":"screen-added","file":"/Users/sean/Dev/battl/gunbuilder-prototype/.superpowers/brainstorm/20960-1774881654/roadmap-tab.html"}
|
||||
{"type":"screen-added","file":"/Users/sean/Dev/battl/gunbuilder-prototype/.superpowers/brainstorm/20960-1774881654/roadmap-votes.html"}
|
||||
{"type":"screen-added","file":"/Users/sean/Dev/battl/gunbuilder-prototype/.superpowers/brainstorm/20960-1774881654/feedback-form.html"}
|
||||
{"type":"screen-added","file":"/Users/sean/Dev/battl/gunbuilder-prototype/.superpowers/brainstorm/20960-1774881654/feedback-form-v2.html"}
|
||||
{"type":"screen-added","file":"/Users/sean/Dev/battl/gunbuilder-prototype/.superpowers/brainstorm/20960-1774881654/waiting-3.html"}
|
||||
{"type":"server-stopped","reason":"idle timeout"}
|
||||
@@ -0,0 +1 @@
|
||||
20969
|
||||
@@ -0,0 +1,113 @@
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { background: #09090b; color: #f4f4f5; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; padding: 32px 24px; }
|
||||
.wrap { max-width: 900px; margin: 0 auto; }
|
||||
|
||||
h2 { font-size: 13px; font-weight: 600; color: #a1a1aa; margin-bottom: 20px; letter-spacing: 0.05em; text-transform: uppercase; }
|
||||
|
||||
/* ── Tabs ── */
|
||||
.tabs { display: flex; gap: 0; border-bottom: 1px solid #27272a; margin-bottom: 40px; }
|
||||
.tab { padding: 10px 20px; font-size: 13px; font-weight: 500; color: #71717a; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
|
||||
.tab.active { color: #fbbf24; border-bottom-color: #fbbf24; }
|
||||
|
||||
/* ── Changelog entries ── */
|
||||
.entries { display: flex; flex-direction: column; gap: 0; }
|
||||
.entry { display: grid; grid-template-columns: 120px 1fr; gap: 0 32px; border-bottom: 1px solid #18181b; padding: 32px 0; }
|
||||
.entry:last-child { border-bottom: none; }
|
||||
.entry-meta { padding-top: 4px; }
|
||||
.entry-version { font-size: 12px; font-weight: 700; color: #fbbf24; font-family: monospace; margin-bottom: 4px; }
|
||||
.entry-date { font-size: 11px; color: #3f3f46; }
|
||||
.entry-title { font-size: 17px; font-weight: 600; color: #fff; margin-bottom: 8px; }
|
||||
.entry-body { font-size: 13px; color: #71717a; line-height: 1.7; }
|
||||
.entry-tags { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
|
||||
.tag { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 99px; letter-spacing: 0.05em; text-transform: uppercase; }
|
||||
.tag-feature { background: rgba(251,191,36,0.1); color: #fbbf24; border: 1px solid rgba(251,191,36,0.25); }
|
||||
.tag-fix { background: rgba(74,222,128,0.1); color: #4ade80; border: 1px solid rgba(74,222,128,0.2); }
|
||||
.tag-improvement { background: rgba(147,197,253,0.1); color: #93c5fd; border: 1px solid rgba(147,197,253,0.2); }
|
||||
|
||||
/* ── Roadmap items ── */
|
||||
.roadmap { display: flex; flex-direction: column; gap: 12px; }
|
||||
.roadmap-item { display: flex; align-items: flex-start; gap: 16px; padding: 20px; border: 1px solid #1c1c1f; border-radius: 10px; background: #0d0d0f; }
|
||||
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
|
||||
.status-planned { background: #3f3f46; }
|
||||
.status-inprogress { background: #fbbf24; box-shadow: 0 0 8px rgba(251,191,36,0.4); }
|
||||
.status-shipped { background: #4ade80; }
|
||||
.roadmap-item-title { font-size: 14px; font-weight: 600; color: #e4e4e7; margin-bottom: 4px; }
|
||||
.roadmap-item-desc { font-size: 12px; color: #52525b; line-height: 1.6; }
|
||||
.status-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 99px; letter-spacing: 0.06em; text-transform: uppercase; margin-left: auto; flex-shrink: 0; }
|
||||
.badge-planned { background: rgba(63,63,70,0.4); color: #71717a; border: 1px solid #27272a; }
|
||||
.badge-inprogress { background: rgba(251,191,36,0.1); color: #fbbf24; border: 1px solid rgba(251,191,36,0.3); }
|
||||
.badge-shipped { background: rgba(74,222,128,0.1); color: #4ade80; border: 1px solid rgba(74,222,128,0.2); }
|
||||
|
||||
.page-header { margin-bottom: 40px; }
|
||||
.page-label { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #52525b; margin-bottom: 8px; }
|
||||
.page-title { font-size: 28px; font-weight: 700; color: #fff; letter-spacing: -0.02em; margin-bottom: 6px; }
|
||||
.page-sub { font-size: 14px; color: #52525b; }
|
||||
|
||||
/* ── Section separators for roadmap ── */
|
||||
.roadmap-group-label { font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: #3f3f46; margin: 24px 0 10px; }
|
||||
.roadmap-group-label:first-child { margin-top: 0; }
|
||||
</style>
|
||||
|
||||
<div class="wrap">
|
||||
<div class="page-header">
|
||||
<p class="page-label">Battl Builders</p>
|
||||
<h1 class="page-title">Updates</h1>
|
||||
<p class="page-sub">What we've shipped and what's coming next.</p>
|
||||
</div>
|
||||
|
||||
<div class="tabs">
|
||||
<div class="tab active">What's New</div>
|
||||
<div class="tab">What's Next</div>
|
||||
<div class="tab">Give Feedback</div>
|
||||
</div>
|
||||
|
||||
<!-- WHAT'S NEW -->
|
||||
<div id="whats-new">
|
||||
<div class="entries">
|
||||
<div class="entry">
|
||||
<div class="entry-meta">
|
||||
<div class="entry-version">v0.4</div>
|
||||
<div class="entry-date">Mar 28, 2026</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="entry-tags">
|
||||
<span class="tag tag-feature">Feature</span>
|
||||
<span class="tag tag-improvement">Improvement</span>
|
||||
</div>
|
||||
<div class="entry-title">Homepage redesign + open access</div>
|
||||
<div class="entry-body">Removed the beta gate. New landing page explains what Battl does without the jargon. Compatibility conflict warnings now surface inline while you build.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="entry">
|
||||
<div class="entry-meta">
|
||||
<div class="entry-version">v0.3</div>
|
||||
<div class="entry-date">Mar 14, 2026</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="entry-tags">
|
||||
<span class="tag tag-feature">Feature</span>
|
||||
<span class="tag tag-fix">Fix</span>
|
||||
</div>
|
||||
<div class="entry-title">Shareable build links + vault</div>
|
||||
<div class="entry-body">Save and share builds with a single link. Anyone can view the parts list without an account. Fixed gas system validation that was incorrectly flagging mid-length configs.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="entry">
|
||||
<div class="entry-meta">
|
||||
<div class="entry-version">v0.2</div>
|
||||
<div class="entry-date">Feb 28, 2026</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="entry-tags">
|
||||
<span class="tag tag-feature">Feature</span>
|
||||
</div>
|
||||
<div class="entry-title">Live pricing from real retailers</div>
|
||||
<div class="entry-body">AvantLink feed integration. Running total updates as you add parts. Prices are pulled daily — no estimated MSRP, no sponsored rankings.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,88 @@
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { background: #09090b; color: #f4f4f5; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; padding: 32px 24px; }
|
||||
.wrap { max-width: 900px; margin: 0 auto; }
|
||||
|
||||
.tabs { display: flex; gap: 0; border-bottom: 1px solid #27272a; margin-bottom: 40px; }
|
||||
.tab { padding: 10px 20px; font-size: 13px; font-weight: 500; color: #71717a; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
|
||||
.tab.active { color: #fbbf24; border-bottom-color: #fbbf24; }
|
||||
|
||||
.page-header { margin-bottom: 40px; }
|
||||
.page-label { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #52525b; margin-bottom: 8px; }
|
||||
.page-title { font-size: 28px; font-weight: 700; color: #fff; letter-spacing: -0.02em; margin-bottom: 6px; }
|
||||
.page-sub { font-size: 14px; color: #52525b; }
|
||||
|
||||
.feedback-header { margin-bottom: 28px; }
|
||||
.feedback-header h2 { font-size: 20px; font-weight: 700; color: #fff; letter-spacing: -0.015em; margin-bottom: 6px; }
|
||||
.feedback-header p { font-size: 13px; color: #52525b; line-height: 1.6; }
|
||||
|
||||
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
|
||||
.form-field { margin-bottom: 20px; }
|
||||
.form-label { font-size: 11px; font-weight: 600; color: #71717a; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 8px; display: block; }
|
||||
.form-input, .form-select, .form-textarea {
|
||||
width: 100%; padding: 10px 14px; font-size: 13px; font-family: inherit;
|
||||
background: #0d0d0f; border: 1px solid #27272a; border-radius: 8px;
|
||||
color: #e4e4e7; outline: none;
|
||||
}
|
||||
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: rgba(251,191,36,0.4); }
|
||||
.form-textarea { resize: vertical; min-height: 160px; line-height: 1.6; }
|
||||
.form-select { appearance: none; cursor: pointer; }
|
||||
.form-hint { font-size: 11px; color: #3f3f46; margin-top: 6px; }
|
||||
.char-count { font-size: 11px; color: #3f3f46; text-align: right; margin-top: 6px; }
|
||||
|
||||
.form-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
|
||||
.form-footer-note { font-size: 11px; color: #3f3f46; }
|
||||
|
||||
.btn-submit {
|
||||
display: inline-flex; align-items: center; gap: 8px;
|
||||
background: rgba(251,191,36,0.9); color: #000; font-size: 13px; font-weight: 700;
|
||||
padding: 10px 28px; border-radius: 8px; border: none; cursor: pointer;
|
||||
letter-spacing: 0.02em; font-family: inherit;
|
||||
}
|
||||
.btn-submit:hover { background: #fbbf24; }
|
||||
</style>
|
||||
|
||||
<div class="wrap">
|
||||
<div class="page-header">
|
||||
<p class="page-label">Battl Builders</p>
|
||||
<h1 class="page-title">Updates</h1>
|
||||
<p class="page-sub">What we've shipped and what's coming next.</p>
|
||||
</div>
|
||||
|
||||
<div class="tabs">
|
||||
<div class="tab">What's New</div>
|
||||
<div class="tab">What's Next</div>
|
||||
<div class="tab active">Give Feedback</div>
|
||||
</div>
|
||||
|
||||
<div class="feedback-header">
|
||||
<h2>Tell us what you think.</h2>
|
||||
<p>Bug, feature idea, or general thought — we read everything. Rough language welcome.</p>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-field">
|
||||
<label class="form-label">Category</label>
|
||||
<select class="form-select">
|
||||
<option>Bug report</option>
|
||||
<option>Feature request</option>
|
||||
<option>General feedback</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label class="form-label">Email <span style="color:#3f3f46; font-weight:400; text-transform:none; letter-spacing:0;">(optional — if you want a reply)</span></label>
|
||||
<input class="form-input" type="email" placeholder="you@email.com" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-field">
|
||||
<label class="form-label">Message</label>
|
||||
<textarea class="form-textarea" placeholder="What's on your mind?"></textarea>
|
||||
<div class="char-count">0 / 1000</div>
|
||||
</div>
|
||||
|
||||
<div class="form-footer">
|
||||
<span class="form-footer-note">We'll only use your email to follow up on your feedback.</span>
|
||||
<button class="btn-submit">Send Feedback →</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,160 @@
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { background: #09090b; color: #f4f4f5; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; padding: 32px 24px; }
|
||||
.wrap { max-width: 900px; margin: 0 auto; }
|
||||
|
||||
.tabs { display: flex; gap: 0; border-bottom: 1px solid #27272a; margin-bottom: 40px; }
|
||||
.tab { padding: 10px 20px; font-size: 13px; font-weight: 500; color: #71717a; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
|
||||
.tab.active { color: #fbbf24; border-bottom-color: #fbbf24; }
|
||||
|
||||
.page-header { margin-bottom: 40px; }
|
||||
.page-label { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #52525b; margin-bottom: 8px; }
|
||||
.page-title { font-size: 28px; font-weight: 700; color: #fff; letter-spacing: -0.02em; margin-bottom: 6px; }
|
||||
.page-sub { font-size: 14px; color: #52525b; }
|
||||
|
||||
/* ── Shared form styles ── */
|
||||
.form-label { font-size: 11px; font-weight: 600; color: #71717a; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 8px; display: block; }
|
||||
.form-field { margin-bottom: 20px; }
|
||||
.form-input, .form-select, .form-textarea {
|
||||
width: 100%; padding: 10px 14px; font-size: 13px; font-family: inherit;
|
||||
background: #0d0d0f; border: 1px solid #27272a; border-radius: 8px;
|
||||
color: #e4e4e7; outline: none;
|
||||
}
|
||||
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: rgba(251,191,36,0.4); }
|
||||
.form-textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
|
||||
.form-select { appearance: none; cursor: pointer; }
|
||||
.form-hint { font-size: 11px; color: #3f3f46; margin-top: 6px; }
|
||||
.btn-submit {
|
||||
display: inline-flex; align-items: center; gap-8px; gap: 8px;
|
||||
background: rgba(251,191,36,0.9); color: #000; font-size: 13px; font-weight: 700;
|
||||
padding: 10px 24px; border-radius: 8px; border: none; cursor: pointer;
|
||||
letter-spacing: 0.02em; font-family: inherit;
|
||||
}
|
||||
.btn-submit:hover { background: #fbbf24; }
|
||||
|
||||
/* ── Split view ── */
|
||||
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
|
||||
|
||||
/* ── Page form (tab) ── */
|
||||
.feedback-page { max-width: 560px; }
|
||||
.feedback-page-header { margin-bottom: 28px; }
|
||||
.feedback-page-header h2 { font-size: 20px; font-weight: 700; color: #fff; letter-spacing: -0.015em; margin-bottom: 6px; }
|
||||
.feedback-page-header p { font-size: 13px; color: #52525b; line-height: 1.6; }
|
||||
|
||||
/* ── Modal ── */
|
||||
.modal-wrap { position: relative; }
|
||||
.modal-label { font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: #52525b; margin-bottom: 12px; text-align: center; }
|
||||
.modal {
|
||||
background: #111113; border: 1px solid #27272a; border-radius: 14px;
|
||||
padding: 28px; width: 100%;
|
||||
box-shadow: 0 24px 80px rgba(0,0,0,0.6);
|
||||
}
|
||||
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
|
||||
.modal-title { font-size: 16px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
|
||||
.modal-close { font-size: 18px; color: #3f3f46; cursor: pointer; background: none; border: none; font-family: inherit; padding: 0; line-height: 1; }
|
||||
.modal-close:hover { color: #71717a; }
|
||||
|
||||
/* Nav trigger button (shown for context) */
|
||||
.nav-context { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #18181b; }
|
||||
.nav-context-label { font-size: 10px; color: #3f3f46; letter-spacing: 0.05em; }
|
||||
.btn-feedback-nav {
|
||||
padding: 6px 12px; border-radius: 6px; font-size: 11px; font-weight: 600;
|
||||
border: 1px solid #27272a; color: #71717a; background: transparent;
|
||||
cursor: pointer; font-family: inherit; letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.divider { width: 1px; background: #18181b; align-self: stretch; }
|
||||
|
||||
.char-count { font-size: 11px; color: #3f3f46; text-align: right; margin-top: 6px; }
|
||||
</style>
|
||||
|
||||
<div class="wrap">
|
||||
<div class="page-header">
|
||||
<p class="page-label">Battl Builders</p>
|
||||
<h1 class="page-title">Updates</h1>
|
||||
<p class="page-sub">What we've shipped and what's coming next.</p>
|
||||
</div>
|
||||
|
||||
<div class="tabs">
|
||||
<div class="tab">What's New</div>
|
||||
<div class="tab">What's Next</div>
|
||||
<div class="tab active">Give Feedback</div>
|
||||
</div>
|
||||
|
||||
<div class="split">
|
||||
|
||||
<!-- LEFT: Tab / page form -->
|
||||
<div>
|
||||
<p class="modal-label" style="text-align:left; margin-bottom: 20px;">Give Feedback tab (full page)</p>
|
||||
<div class="feedback-page">
|
||||
<div class="feedback-page-header">
|
||||
<h2>Tell us what you think.</h2>
|
||||
<p>Bug, feature idea, or general thought — we read everything. Rough language welcome.</p>
|
||||
</div>
|
||||
|
||||
<div class="form-field">
|
||||
<label class="form-label">Category</label>
|
||||
<select class="form-select">
|
||||
<option>Bug report</option>
|
||||
<option>Feature request</option>
|
||||
<option>General feedback</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-field">
|
||||
<label class="form-label">Message</label>
|
||||
<textarea class="form-textarea" placeholder="What's on your mind?"></textarea>
|
||||
<div class="char-count">0 / 1000</div>
|
||||
</div>
|
||||
|
||||
<div class="form-field">
|
||||
<label class="form-label">Email <span style="color:#3f3f46; font-weight:400; text-transform:none; letter-spacing:0;">(optional — if you want a reply)</span></label>
|
||||
<input class="form-input" type="email" placeholder="you@email.com" />
|
||||
<p class="form-hint">We'll only use this to follow up on your feedback.</p>
|
||||
</div>
|
||||
|
||||
<button class="btn-submit">Send Feedback →</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- RIGHT: Modal (triggered from nav/footer) -->
|
||||
<div>
|
||||
<div class="nav-context">
|
||||
<span class="nav-context-label">Triggered from nav/footer →</span>
|
||||
<button class="btn-feedback-nav">Send Feedback</button>
|
||||
</div>
|
||||
<p class="modal-label">Modal</p>
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<span class="modal-title">Send Feedback</span>
|
||||
<button class="modal-close">✕</button>
|
||||
</div>
|
||||
|
||||
<div class="form-field">
|
||||
<label class="form-label">Category</label>
|
||||
<select class="form-select">
|
||||
<option>Bug report</option>
|
||||
<option>Feature request</option>
|
||||
<option>General feedback</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-field">
|
||||
<label class="form-label">Message</label>
|
||||
<textarea class="form-textarea" style="min-height:100px;" placeholder="What's on your mind?"></textarea>
|
||||
<div class="char-count">0 / 1000</div>
|
||||
</div>
|
||||
|
||||
<div class="form-field">
|
||||
<label class="form-label">Email <span style="color:#3f3f46; font-weight:400; text-transform:none; letter-spacing:0;">(optional)</span></label>
|
||||
<input class="form-input" type="email" placeholder="you@email.com" />
|
||||
</div>
|
||||
|
||||
<button class="btn-submit" style="width:100%; justify-content:center;">Send Feedback →</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,104 @@
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { background: #09090b; color: #f4f4f5; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; padding: 32px 24px; }
|
||||
.wrap { max-width: 900px; margin: 0 auto; }
|
||||
|
||||
.tabs { display: flex; gap: 0; border-bottom: 1px solid #27272a; margin-bottom: 40px; }
|
||||
.tab { padding: 10px 20px; font-size: 13px; font-weight: 500; color: #71717a; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
|
||||
.tab.active { color: #fbbf24; border-bottom-color: #fbbf24; }
|
||||
|
||||
.page-header { margin-bottom: 40px; }
|
||||
.page-label { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #52525b; margin-bottom: 8px; }
|
||||
.page-title { font-size: 28px; font-weight: 700; color: #fff; letter-spacing: -0.02em; margin-bottom: 6px; }
|
||||
.page-sub { font-size: 14px; color: #52525b; }
|
||||
|
||||
.roadmap { display: flex; flex-direction: column; gap: 10px; }
|
||||
.roadmap-item { display: flex; align-items: flex-start; gap: 16px; padding: 20px; border: 1px solid #1c1c1f; border-radius: 10px; background: #0d0d0f; }
|
||||
.dot-col { display: flex; flex-direction: column; align-items: center; gap: 0; padding-top: 5px; flex-shrink: 0; }
|
||||
.status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
|
||||
.status-planned .status-dot { background: #3f3f46; }
|
||||
.status-inprogress .status-dot { background: #fbbf24; box-shadow: 0 0 10px rgba(251,191,36,0.5); }
|
||||
.status-shipped .status-dot { background: #4ade80; }
|
||||
.roadmap-body { flex: 1; }
|
||||
.roadmap-item-title { font-size: 14px; font-weight: 600; color: #e4e4e7; margin-bottom: 4px; }
|
||||
.roadmap-item-desc { font-size: 12px; color: #52525b; line-height: 1.65; }
|
||||
.status-badge { font-size: 10px; font-weight: 700; padding: 2px 9px; border-radius: 99px; letter-spacing: 0.06em; text-transform: uppercase; flex-shrink: 0; margin-top: 2px; }
|
||||
.status-planned .status-badge { background: rgba(63,63,70,0.4); color: #52525b; border: 1px solid #27272a; }
|
||||
.status-inprogress .status-badge { background: rgba(251,191,36,0.08); color: #fbbf24; border: 1px solid rgba(251,191,36,0.25); }
|
||||
.status-shipped .status-badge { background: rgba(74,222,128,0.08); color: #4ade80; border: 1px solid rgba(74,222,128,0.2); }
|
||||
|
||||
.group-label { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #3f3f46; margin: 28px 0 10px; }
|
||||
.group-label:first-child { margin-top: 0; }
|
||||
|
||||
.roadmap-note { margin-top: 32px; padding: 16px 20px; border: 1px solid #18181b; border-radius: 8px; font-size: 12px; color: #3f3f46; line-height: 1.6; }
|
||||
.roadmap-note a { color: #52525b; text-decoration: underline; text-underline-offset: 3px; }
|
||||
</style>
|
||||
|
||||
<div class="wrap">
|
||||
<div class="page-header">
|
||||
<p class="page-label">Battl Builders</p>
|
||||
<h1 class="page-title">Updates</h1>
|
||||
<p class="page-sub">What we've shipped and what's coming next.</p>
|
||||
</div>
|
||||
|
||||
<div class="tabs">
|
||||
<div class="tab">What's New</div>
|
||||
<div class="tab active">What's Next</div>
|
||||
<div class="tab">Give Feedback</div>
|
||||
</div>
|
||||
|
||||
<div class="roadmap">
|
||||
<div class="group-label">In Progress</div>
|
||||
|
||||
<div class="roadmap-item status-inprogress">
|
||||
<div class="dot-col"><span class="status-dot"></span></div>
|
||||
<div class="roadmap-body">
|
||||
<div class="roadmap-item-title">Compatibility engine — gas system + buffer</div>
|
||||
<div class="roadmap-item-desc">Automatic warnings when barrel length and gas system length don't match, and when buffer weight conflicts with your stock/brace selection.</div>
|
||||
</div>
|
||||
<span class="status-badge">In Progress</span>
|
||||
</div>
|
||||
|
||||
<div class="roadmap-item status-inprogress">
|
||||
<div class="dot-col"><span class="status-dot"></span></div>
|
||||
<div class="roadmap-body">
|
||||
<div class="roadmap-item-title">Mobile builder experience</div>
|
||||
<div class="roadmap-item-desc">Full 375px breakpoint pass on the builder, parts browser, and build summary. Lighthouse score target ≥70.</div>
|
||||
</div>
|
||||
<span class="status-badge">In Progress</span>
|
||||
</div>
|
||||
|
||||
<div class="group-label">Planned</div>
|
||||
|
||||
<div class="roadmap-item status-planned">
|
||||
<div class="dot-col"><span class="status-dot"></span></div>
|
||||
<div class="roadmap-body">
|
||||
<div class="roadmap-item-title">Expanded parts catalog</div>
|
||||
<div class="roadmap-item-desc">50–75 SKUs across all 10 slots, 3–5 options per category, with live AvantLink pricing.</div>
|
||||
</div>
|
||||
<span class="status-badge">Planned</span>
|
||||
</div>
|
||||
|
||||
<div class="roadmap-item status-planned">
|
||||
<div class="dot-col"><span class="status-dot"></span></div>
|
||||
<div class="roadmap-body">
|
||||
<div class="roadmap-item-title">Build guides — first wave</div>
|
||||
<div class="roadmap-item-desc">Three long-form guides targeting "AR-15 build planner" and related keywords. Written for the ICP: experienced shooter, not an expert builder.</div>
|
||||
</div>
|
||||
<span class="status-badge">Planned</span>
|
||||
</div>
|
||||
|
||||
<div class="roadmap-item status-planned">
|
||||
<div class="dot-col"><span class="status-dot"></span></div>
|
||||
<div class="roadmap-body">
|
||||
<div class="roadmap-item-title">Caliber cross-compatibility checks</div>
|
||||
<div class="roadmap-item-desc">Flag mismatches between upper and lower when mixing calibers (e.g., .300 Blackout upper on a 5.56 lower).</div>
|
||||
</div>
|
||||
<span class="status-badge">Planned</span>
|
||||
</div>
|
||||
|
||||
<div class="roadmap-note">
|
||||
Have something you want to see? <a href="#">Give us feedback →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,150 @@
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { background: #09090b; color: #f4f4f5; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; padding: 32px 24px; }
|
||||
.wrap { max-width: 900px; margin: 0 auto; }
|
||||
|
||||
.tabs { display: flex; gap: 0; border-bottom: 1px solid #27272a; margin-bottom: 40px; }
|
||||
.tab { padding: 10px 20px; font-size: 13px; font-weight: 500; color: #71717a; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
|
||||
.tab.active { color: #fbbf24; border-bottom-color: #fbbf24; }
|
||||
|
||||
.page-header { margin-bottom: 40px; }
|
||||
.page-label { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #52525b; margin-bottom: 8px; }
|
||||
.page-title { font-size: 28px; font-weight: 700; color: #fff; letter-spacing: -0.02em; margin-bottom: 6px; }
|
||||
.page-sub { font-size: 14px; color: #52525b; }
|
||||
|
||||
.roadmap { display: flex; flex-direction: column; gap: 10px; }
|
||||
|
||||
.roadmap-item {
|
||||
display: grid;
|
||||
grid-template-columns: 52px 1fr auto;
|
||||
gap: 0 16px;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
border: 1px solid #1c1c1f;
|
||||
border-radius: 10px;
|
||||
background: #0d0d0f;
|
||||
}
|
||||
|
||||
/* Upvote button */
|
||||
.upvote {
|
||||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||||
gap: 3px; width: 44px; height: 52px;
|
||||
border: 1px solid #27272a; border-radius: 8px; background: transparent;
|
||||
cursor: pointer; color: #52525b; transition: all 0.15s;
|
||||
font-size: 11px; font-weight: 700; font-family: inherit;
|
||||
}
|
||||
.upvote:hover { border-color: #fbbf24; color: #fbbf24; background: rgba(251,191,36,0.06); }
|
||||
.upvote.voted { border-color: rgba(251,191,36,0.4); color: #fbbf24; background: rgba(251,191,36,0.08); }
|
||||
.upvote svg { width: 14px; height: 14px; }
|
||||
|
||||
.roadmap-body { }
|
||||
.roadmap-item-title { font-size: 14px; font-weight: 600; color: #e4e4e7; margin-bottom: 4px; }
|
||||
.roadmap-item-desc { font-size: 12px; color: #52525b; line-height: 1.65; }
|
||||
|
||||
.right-col { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
|
||||
.status-badge { font-size: 10px; font-weight: 700; padding: 2px 9px; border-radius: 99px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
|
||||
.badge-planned { background: rgba(63,63,70,0.4); color: #52525b; border: 1px solid #27272a; }
|
||||
.badge-inprogress { background: rgba(251,191,36,0.08); color: #fbbf24; border: 1px solid rgba(251,191,36,0.25); }
|
||||
|
||||
.group-label { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #3f3f46; margin: 28px 0 10px; }
|
||||
.group-label:first-child { margin-top: 0; }
|
||||
|
||||
.roadmap-note { margin-top: 32px; padding: 16px 20px; border: 1px solid #18181b; border-radius: 8px; font-size: 12px; color: #3f3f46; line-height: 1.6; }
|
||||
.roadmap-note a { color: #52525b; text-decoration: underline; text-underline-offset: 3px; }
|
||||
|
||||
.auth-hint { font-size: 10px; color: #3f3f46; margin-top: 4px; }
|
||||
</style>
|
||||
|
||||
<div class="wrap">
|
||||
<div class="page-header">
|
||||
<p class="page-label">Battl Builders</p>
|
||||
<h1 class="page-title">Updates</h1>
|
||||
<p class="page-sub">What we've shipped and what's coming next.</p>
|
||||
</div>
|
||||
|
||||
<div class="tabs">
|
||||
<div class="tab">What's New</div>
|
||||
<div class="tab active">What's Next</div>
|
||||
<div class="tab">Give Feedback</div>
|
||||
</div>
|
||||
|
||||
<div class="roadmap">
|
||||
<div class="group-label">In Progress</div>
|
||||
|
||||
<div class="roadmap-item">
|
||||
<button class="upvote voted" title="Remove vote">
|
||||
<svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 2l5 7H3z"/></svg>
|
||||
24
|
||||
</button>
|
||||
<div class="roadmap-body">
|
||||
<div class="roadmap-item-title">Compatibility engine — gas system + buffer</div>
|
||||
<div class="roadmap-item-desc">Automatic warnings when barrel length and gas system length don't match, and when buffer weight conflicts with your stock or brace selection.</div>
|
||||
</div>
|
||||
<div class="right-col">
|
||||
<span class="status-badge badge-inprogress">In Progress</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="roadmap-item">
|
||||
<button class="upvote" title="Upvote">
|
||||
<svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 2l5 7H3z"/></svg>
|
||||
11
|
||||
</button>
|
||||
<div class="roadmap-body">
|
||||
<div class="roadmap-item-title">Mobile builder experience</div>
|
||||
<div class="roadmap-item-desc">Full 375px breakpoint pass on the builder, parts browser, and build summary. Lighthouse score target ≥70.</div>
|
||||
</div>
|
||||
<div class="right-col">
|
||||
<span class="status-badge badge-inprogress">In Progress</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group-label">Planned</div>
|
||||
|
||||
<div class="roadmap-item">
|
||||
<button class="upvote" title="Upvote">
|
||||
<svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 2l5 7H3z"/></svg>
|
||||
38
|
||||
</button>
|
||||
<div class="roadmap-body">
|
||||
<div class="roadmap-item-title">Expanded parts catalog</div>
|
||||
<div class="roadmap-item-desc">50–75 SKUs across all 10 slots, 3–5 options per category, with live AvantLink pricing.</div>
|
||||
</div>
|
||||
<div class="right-col">
|
||||
<span class="status-badge badge-planned">Planned</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="roadmap-item">
|
||||
<button class="upvote" title="Upvote">
|
||||
<svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 2l5 7H3z"/></svg>
|
||||
17
|
||||
</button>
|
||||
<div class="roadmap-body">
|
||||
<div class="roadmap-item-title">Caliber cross-compatibility checks</div>
|
||||
<div class="roadmap-item-desc">Flag mismatches between upper and lower when mixing calibers (e.g., .300 Blackout upper on a 5.56 lower).</div>
|
||||
</div>
|
||||
<div class="right-col">
|
||||
<span class="status-badge badge-planned">Planned</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="roadmap-item">
|
||||
<button class="upvote" title="Upvote">
|
||||
<svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 2l5 7H3z"/></svg>
|
||||
9
|
||||
</button>
|
||||
<div class="roadmap-body">
|
||||
<div class="roadmap-item-title">Build guides — first wave</div>
|
||||
<div class="roadmap-item-desc">Three long-form guides targeting "AR-15 build planner" and related keywords. Written for the ICP: experienced shooter, not an expert builder.</div>
|
||||
</div>
|
||||
<div class="right-col">
|
||||
<span class="status-badge badge-planned">Planned</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="roadmap-note">
|
||||
Don't see what you need? <a href="#">Give us feedback →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,3 @@
|
||||
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
|
||||
<p class="subtitle">Continuing in terminal...</p>
|
||||
</div>
|
||||
@@ -0,0 +1,3 @@
|
||||
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
|
||||
<p class="subtitle">Continuing in terminal...</p>
|
||||
</div>
|
||||
@@ -0,0 +1,3 @@
|
||||
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
|
||||
<p class="subtitle">Continuing in terminal...</p>
|
||||
</div>
|
||||
@@ -0,0 +1,27 @@
|
||||
import type { Metadata } from 'next'
|
||||
import { FeedbackForm } from '@/components/FeedbackForm'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Send Feedback — Battl Builders',
|
||||
description:
|
||||
'Report a bug, suggest a feature, or share a thought with the Battl Builders team.',
|
||||
}
|
||||
|
||||
export default function FeedbackPage() {
|
||||
return (
|
||||
<main className="mx-auto max-w-4xl px-4 py-10">
|
||||
<header className="mb-10">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-zinc-500">
|
||||
Battl Builders
|
||||
</p>
|
||||
<h1 className="mt-2 text-3xl font-semibold tracking-tight">
|
||||
Send Feedback
|
||||
</h1>
|
||||
<p className="mt-2 text-sm text-zinc-400">
|
||||
Bug, feature idea, or general thought — we read everything.
|
||||
</p>
|
||||
</header>
|
||||
<FeedbackForm />
|
||||
</main>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,194 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useAuth } from '@/context/AuthContext'
|
||||
|
||||
type FeedbackSubmission = {
|
||||
id: string
|
||||
category: 'BUG' | 'FEATURE_REQUEST' | 'GENERAL'
|
||||
message: string
|
||||
email: string | null
|
||||
// ipAddress is returned by the API but not displayed in the table (privacy/noise)
|
||||
reviewed: boolean
|
||||
createdAt: string
|
||||
}
|
||||
|
||||
const CATEGORY_LABELS: Record<string, string> = {
|
||||
BUG: 'Bug',
|
||||
FEATURE_REQUEST: 'Feature Request',
|
||||
GENERAL: 'General',
|
||||
}
|
||||
|
||||
const CATEGORY_STYLES: Record<string, string> = {
|
||||
BUG: 'bg-red-500/10 text-red-400 border border-red-500/20',
|
||||
FEATURE_REQUEST: 'bg-amber-500/10 text-amber-400 border border-amber-500/20',
|
||||
GENERAL: 'bg-zinc-800 text-zinc-400 border border-zinc-700',
|
||||
}
|
||||
|
||||
function formatDate(iso: string) {
|
||||
return new Date(iso).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
})
|
||||
}
|
||||
|
||||
export default function AdminFeedbackPage() {
|
||||
const { getAuthHeaders } = useAuth()
|
||||
const [items, setItems] = useState<FeedbackSubmission[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [categoryFilter, setCategoryFilter] = useState('ALL')
|
||||
const [reviewedFilter, setReviewedFilter] = useState('ALL')
|
||||
|
||||
async function load() {
|
||||
try {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
const res = await fetch('/api/admin/feedback', {
|
||||
headers: getAuthHeaders(),
|
||||
credentials: 'include',
|
||||
})
|
||||
if (!res.ok) throw new Error(`Failed to load feedback (${res.status})`)
|
||||
setItems(await res.json())
|
||||
} catch (e: unknown) {
|
||||
setError(e instanceof Error ? e.message : 'Failed to load')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
load()
|
||||
}, []) // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
async function toggleReviewed(item: FeedbackSubmission) {
|
||||
const prev = items
|
||||
setItems((cur) =>
|
||||
cur.map((i) => (i.id === item.id ? { ...i, reviewed: !i.reviewed } : i))
|
||||
)
|
||||
try {
|
||||
const res = await fetch(`/api/admin/feedback/${item.id}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json', ...getAuthHeaders() },
|
||||
credentials: 'include',
|
||||
body: JSON.stringify({ reviewed: !item.reviewed }),
|
||||
})
|
||||
if (!res.ok) setItems(prev)
|
||||
} catch {
|
||||
setItems(prev)
|
||||
}
|
||||
}
|
||||
|
||||
const filtered = items.filter((i) => {
|
||||
if (categoryFilter !== 'ALL' && i.category !== categoryFilter) return false
|
||||
if (reviewedFilter === 'REVIEWED' && !i.reviewed) return false
|
||||
if (reviewedFilter === 'UNREVIEWED' && i.reviewed) return false
|
||||
return true
|
||||
})
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="mb-6 flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-xl font-semibold tracking-tight">Feedback</h1>
|
||||
<p className="mt-1 text-sm text-zinc-400">
|
||||
User-submitted feedback. Mark items reviewed to track triage.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={load}
|
||||
className="rounded-md border border-zinc-800 px-3 py-1.5 text-xs text-zinc-400 hover:text-zinc-200"
|
||||
>
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mb-6 flex gap-3">
|
||||
<select
|
||||
value={categoryFilter}
|
||||
onChange={(e) => setCategoryFilter(e.target.value)}
|
||||
className="rounded-md border border-zinc-800 bg-zinc-950 px-3 py-1.5 text-xs text-zinc-300"
|
||||
>
|
||||
<option value="ALL">All categories</option>
|
||||
<option value="BUG">Bug</option>
|
||||
<option value="FEATURE_REQUEST">Feature Request</option>
|
||||
<option value="GENERAL">General</option>
|
||||
</select>
|
||||
<select
|
||||
value={reviewedFilter}
|
||||
onChange={(e) => setReviewedFilter(e.target.value)}
|
||||
className="rounded-md border border-zinc-800 bg-zinc-950 px-3 py-1.5 text-xs text-zinc-300"
|
||||
>
|
||||
<option value="ALL">All statuses</option>
|
||||
<option value="UNREVIEWED">Unreviewed</option>
|
||||
<option value="REVIEWED">Reviewed</option>
|
||||
</select>
|
||||
<span className="ml-auto self-center text-xs text-zinc-600">
|
||||
{filtered.length} of {items.length} submissions
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{loading && <p className="text-sm text-zinc-500">Loading…</p>}
|
||||
{error && <p className="text-sm text-red-400">{error}</p>}
|
||||
|
||||
{!loading && !error && filtered.length === 0 && (
|
||||
<p className="text-sm text-zinc-500">No submissions match your filters.</p>
|
||||
)}
|
||||
|
||||
{!loading && !error && filtered.length > 0 && (
|
||||
<div className="overflow-x-auto rounded-xl border border-zinc-800">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-zinc-800 text-left text-[11px] font-semibold uppercase tracking-wider text-zinc-500">
|
||||
<th className="px-4 py-3">Date</th>
|
||||
<th className="px-4 py-3">Category</th>
|
||||
<th className="px-4 py-3">Message</th>
|
||||
<th className="px-4 py-3">Email</th>
|
||||
<th className="px-4 py-3">Reviewed</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-zinc-900">
|
||||
{filtered.map((item) => (
|
||||
<tr key={item.id} className="hover:bg-zinc-950/60">
|
||||
<td className="whitespace-nowrap px-4 py-3 text-xs text-zinc-500">
|
||||
{formatDate(item.createdAt)}
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span
|
||||
className={`rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide ${
|
||||
CATEGORY_STYLES[item.category]
|
||||
}`}
|
||||
>
|
||||
{CATEGORY_LABELS[item.category]}
|
||||
</span>
|
||||
</td>
|
||||
<td className="max-w-sm px-4 py-3 text-xs text-zinc-300">
|
||||
{item.message.length > 120
|
||||
? `${item.message.slice(0, 120)}…`
|
||||
: item.message}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-xs text-zinc-500">
|
||||
{item.email ?? '—'}
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<button
|
||||
onClick={() => toggleReviewed(item)}
|
||||
className={`rounded px-2 py-0.5 text-[10px] font-semibold transition-colors ${
|
||||
item.reviewed
|
||||
? 'bg-green-500/10 text-green-400 hover:bg-red-500/10 hover:text-red-400'
|
||||
: 'bg-zinc-800 text-zinc-500 hover:bg-green-500/10 hover:text-green-400'
|
||||
}`}
|
||||
>
|
||||
{item.reviewed ? 'Reviewed' : 'Mark reviewed'}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -19,6 +19,7 @@ import {
|
||||
Wand2,
|
||||
FolderKanban,
|
||||
Shield,
|
||||
MessageSquare,
|
||||
} from "lucide-react";
|
||||
|
||||
const navGroups: AdminNavGroup[] = [
|
||||
@@ -89,6 +90,11 @@ const navGroups: AdminNavGroup[] = [
|
||||
href: "/admin/email/send",
|
||||
icon: <Mail className="h-4 w-4" />,
|
||||
},
|
||||
{
|
||||
label: "Feedback",
|
||||
href: "/admin/feedback",
|
||||
icon: <MessageSquare className="h-4 w-4" />,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@@ -373,6 +373,9 @@ export default function HomePage() {
|
||||
<div className="mx-auto flex max-w-5xl items-center justify-between border-t border-zinc-900/60 px-4 py-4 text-[11px] text-zinc-700">
|
||||
<span>© {new Date().getFullYear()} BATTL BUILDERS™</span>
|
||||
<div className="flex gap-4">
|
||||
<Link href="/feedback" className="hover:text-zinc-500">
|
||||
Send Feedback
|
||||
</Link>
|
||||
<Link href="/privacy" className="hover:text-zinc-500">
|
||||
Privacy
|
||||
</Link>
|
||||
|
||||
@@ -10,7 +10,7 @@ const CATEGORIES = [
|
||||
{ value: 'GENERAL', label: 'General feedback' },
|
||||
]
|
||||
|
||||
export function FeedbackForm({ onSuccess }: { onSuccess?: () => void }) {
|
||||
export function FeedbackForm({ onSuccess, autoFocus = false }: { onSuccess?: () => void; autoFocus?: boolean }) {
|
||||
const [category, setCategory] = useState('BUG')
|
||||
const [message, setMessage] = useState('')
|
||||
const [email, setEmail] = useState('')
|
||||
@@ -56,13 +56,15 @@ export function FeedbackForm({ onSuccess }: { onSuccess?: () => void }) {
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
<div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
|
||||
<div>
|
||||
<label className="mb-2 block text-[11px] font-semibold uppercase tracking-wider text-zinc-500">
|
||||
<label htmlFor="feedback-category" className="mb-2 block text-[11px] font-semibold uppercase tracking-wider text-zinc-500">
|
||||
Category
|
||||
</label>
|
||||
<select
|
||||
id="feedback-category"
|
||||
value={category}
|
||||
onChange={(e) => setCategory(e.target.value)}
|
||||
disabled={status === 'loading'}
|
||||
autoFocus={autoFocus}
|
||||
className="w-full appearance-none rounded-lg border border-zinc-800 bg-zinc-950 px-3 py-2.5 text-sm text-zinc-200 focus:border-amber-500/40 focus:outline-none disabled:opacity-50"
|
||||
>
|
||||
{CATEGORIES.map((c) => (
|
||||
@@ -73,13 +75,14 @@ export function FeedbackForm({ onSuccess }: { onSuccess?: () => void }) {
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="mb-2 block text-[11px] font-semibold uppercase tracking-wider text-zinc-500">
|
||||
<label htmlFor="feedback-email" className="mb-2 block text-[11px] font-semibold uppercase tracking-wider text-zinc-500">
|
||||
Email{' '}
|
||||
<span className="font-normal normal-case tracking-normal text-zinc-600">
|
||||
(optional — if you want a reply)
|
||||
</span>
|
||||
</label>
|
||||
<input
|
||||
id="feedback-email"
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
@@ -91,10 +94,11 @@ export function FeedbackForm({ onSuccess }: { onSuccess?: () => void }) {
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-2 block text-[11px] font-semibold uppercase tracking-wider text-zinc-500">
|
||||
<label htmlFor="feedback-message" className="mb-2 block text-[11px] font-semibold uppercase tracking-wider text-zinc-500">
|
||||
Message
|
||||
</label>
|
||||
<textarea
|
||||
id="feedback-message"
|
||||
value={message}
|
||||
onChange={(e) => setMessage(e.target.value.slice(0, 1000))}
|
||||
placeholder="What's on your mind?"
|
||||
|
||||
@@ -27,6 +27,7 @@ export function FeedbackModal({
|
||||
className="fixed inset-0 z-50 flex items-center justify-center p-4"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="feedback-modal-title"
|
||||
>
|
||||
<div
|
||||
className="absolute inset-0 bg-black/70 backdrop-blur-sm"
|
||||
@@ -35,7 +36,7 @@ export function FeedbackModal({
|
||||
/>
|
||||
<div className="relative z-10 w-full max-w-lg rounded-2xl border border-zinc-800 bg-zinc-950 p-7 shadow-2xl">
|
||||
<div className="mb-5 flex items-center justify-between">
|
||||
<h2 className="text-base font-bold text-white">Send Feedback</h2>
|
||||
<h2 id="feedback-modal-title" className="text-base font-bold text-white">Send Feedback</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-zinc-500 hover:text-zinc-300"
|
||||
@@ -44,7 +45,7 @@ export function FeedbackModal({
|
||||
<XMarkIcon className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
<FeedbackForm onSuccess={onClose} />
|
||||
<FeedbackForm onSuccess={onClose} autoFocus />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -3,9 +3,11 @@
|
||||
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { useState } from "react";
|
||||
import { usePathname } from "next/navigation";
|
||||
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
import { FeedbackModal } from "@/components/FeedbackModal";
|
||||
|
||||
function NavLink({
|
||||
href,
|
||||
@@ -38,8 +40,10 @@ function NavLink({
|
||||
export function TopNav() {
|
||||
const { user, logout, loading } = useAuth();
|
||||
const isAuthenticated = !!user;
|
||||
const [feedbackOpen, setFeedbackOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<header className="border-b border-zinc-200 bg-white/95 dark:border-zinc-800 dark:bg-black/95 backdrop-blur">
|
||||
<div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-2">
|
||||
{/* Left: Brand / Home */}
|
||||
@@ -65,6 +69,13 @@ export function TopNav() {
|
||||
|
||||
{/* Right side actions */}
|
||||
<div className="flex items-center justify-end gap-3 sm:gap-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setFeedbackOpen(true)}
|
||||
className="hidden text-xs font-medium text-zinc-500 hover:text-zinc-300 transition-colors sm:inline"
|
||||
>
|
||||
Send Feedback
|
||||
</button>
|
||||
{loading ? (
|
||||
<span className="text-xs text-zinc-500">Checking session…</span>
|
||||
) : isAuthenticated ? (
|
||||
@@ -103,6 +114,8 @@ export function TopNav() {
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<FeedbackModal open={feedbackOpen} onClose={() => setFeedbackOpen(false)} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default TopNav;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user