feat: feedback form for Mentell

.env.example

@@ -5,8 +5,11 @@ VITE_WEEKLY_AI_ENDPOINT=
 VITE_WEEKLY_AI_TOKEN=
 
 # Optional Web Push (same Cloudflare Worker — see AGENTS.md)
-VITE_VAPID_PUBLIC_KEY=
-VITE_PUSH_API_BASE=
+VITE_VAPID_PUBLIC_KEY=
+VITE_PUSH_API_BASE=
+VITE_FEEDBACK_FORM_ENDPOINT=
+# Cloudflare Turnstile site key (public, optional override)
+VITE_FEEDBACK_TURNSTILE_SITE_KEY=
 
 # Optional Firebase sync + share links (Spark free tier — see docs/FIREBASE.md)
 VITE_ENABLE_FIREBASE=0

.env.local.example

@@ -5,9 +5,11 @@
 # VITE_WEEKLY_AI_ENDPOINT=http://127.0.0.1:8787/weekly-summary
 # VITE_WEEKLY_AI_TOKEN="dev-local-token"
 
-# Web Push (optional — same worker origin as weekly AI)
-# VITE_VAPID_PUBLIC_KEY=<public key from npx web-push generate-vapid-keys>
-# VITE_PUSH_API_BASE=http://127.0.0.1:8787
+# Web Push (optional — same worker origin as weekly AI)
+# VITE_VAPID_PUBLIC_KEY=<public key from npx web-push generate-vapid-keys>
+# VITE_PUSH_API_BASE=http://127.0.0.1:8787
+# VITE_FEEDBACK_FORM_ENDPOINT=https://sillylittle.workflows.okta.com/api/flo/f76fd87ce1bcd200569e2e10fc636fae/invoke
+# VITE_FEEDBACK_TURNSTILE_SITE_KEY=0x4AAAAAADfOpVgdUWD5E_c1
 
 # Firebase (optional) — project men-tell-prod
 # VITE_ENABLE_FIREBASE=1

VERSION

@@ -1 +1 @@
-1.12.0
+1.13.7

package.json

@@ -1,7 +1,7 @@
 {
   "name": "mentell",
   "private": true,
-  "version": "1.12.0",
+  "version": "1.13.7",
   "type": "module",
   "scripts": {
     "sync:assets": "node scripts/sync-assets.mjs",

src/App.tsx

@@ -28,11 +28,13 @@ import { publicUrl } from './shared/publicUrl'
 import { SCORE_CHANGED_EVENT } from './features/score/scoreEvents'
 import { ShareDashboardPage } from './features/share/ShareDashboardPage'
 import { SyncOnboardingBanner } from './features/settings/SyncOnboardingBanner'
-import { AppLegalFooter } from './components/AppLegalFooter'
-import { PrivacyPolicyPage } from './features/legal/PrivacyPolicyPage'
-import { CharacterLabPage } from './features/character/CharacterLabPage'
-import { CharacterNavIcon } from './features/character/CharacterNavIcon'
-import { DeskCharacterLayout } from './features/character/DeskCharacterLayout'
+import { AppLegalFooter } from './components/AppLegalFooter'
+import { PrivacyPolicyPage } from './features/legal/PrivacyPolicyPage'
+import { FeedbackPage, FeedbackThankYouPage } from './features/feedback/FeedbackPage'
+import { SpeechBubbleIcon } from './components/SpeechBubbleIcon'
+import { CharacterLabPage } from './features/character/CharacterLabPage'
+import { CharacterNavIcon } from './features/character/CharacterNavIcon'
+import { DeskCharacterLayout } from './features/character/DeskCharacterLayout'
 import { LeftDeskMascot } from './features/character/LeftDeskMascot'
 import { MobileHeaderMascot } from './features/character/MobileHeaderMascot'
 import { CharacterTabIconSync } from './features/character/CharacterTabIconSync'
@@ -198,12 +200,14 @@ function App() {
             path="/shop"
             element={<ShopPlaceholder onScoreChange={handleScoreChange} />}
           />
-          <Route path="/settings" element={<SettingsPage />} />
-          <Route path="/character-lab" element={<CharacterLabPage />} />
-          <Route path="/privacy" element={<PrivacyPolicyPage />} />
-          {isShareLinksEnabled() ? (
-            <Route path="/share/:code" element={<ShareDashboardPage />} />
-          ) : null}
+          <Route path="/settings" element={<SettingsPage />} />
+          <Route path="/character-lab" element={<CharacterLabPage />} />
+          <Route path="/privacy" element={<PrivacyPolicyPage />} />
+          <Route path="/feedback" element={<FeedbackPage />} />
+          <Route path="/feedback/thanks" element={<FeedbackThankYouPage />} />
+          {isShareLinksEnabled() ? (
+            <Route path="/share/:code" element={<ShareDashboardPage />} />
+          ) : null}
           <Route path="/archive" element={<ArchivePlaceholder />} />
           <Route path="*" element={<Navigate to="/" replace />} />
         </AnimatedRoutes>
@@ -279,23 +283,32 @@ function TopBar({
               </div>
             </div>
 
-            {!settings.disablePoints ? (
-              <div className="paper flex flex-wrap items-center gap-2 rounded-2xl px-3 py-2">
-                <ScoreTicker
-                  total={score.total}
-                  streak={score.streak}
+            {!settings.disablePoints ? (
+              <div className="paper flex flex-wrap items-center gap-2 rounded-2xl px-3 py-2">
+                <ScoreTicker
+                  total={score.total}
+                  streak={score.streak}
                   streakFreezes={score.streakFreezes}
                   hint={incomingHint}
                   streakOutcome={streakOutcome}
-                />
-                <MobileHeaderMascot />
-              </div>
-            ) : (
-              <div className="paper flex items-center rounded-2xl px-2 py-1 md:hidden">
-                <MobileHeaderMascot />
-              </div>
-            )}
-          </div>
+                />
+                <MobileHeaderMascot />
+              </div>
+            ) : (
+              <div className="paper flex items-center rounded-2xl px-2 py-1 md:hidden">
+                <MobileHeaderMascot />
+              </div>
+            )}
+
+            <Link
+              to="/feedback"
+              className="paper focus-ring flex h-12 w-12 items-center justify-center rounded-2xl transition hover:-translate-y-[1px] hover:shadow-[0_16px_26px_rgba(0,0,0,0.14)]"
+              aria-label="Open feedback form"
+              title="Feedback form"
+            >
+              <SpeechBubbleIcon className="h-5 w-5" />
+            </Link>
+          </div>
 
           <div className="flex items-center gap-2 md:hidden">
             <button

src/components/SpeechBubbleIcon.tsx

@@ -0,0 +1,20 @@
+export function SpeechBubbleIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      aria-hidden="true"
+      className={className}
+    >
+      <path
+        d="M6 5.75h12a3.25 3.25 0 0 1 3.25 3.25v5a3.25 3.25 0 0 1-3.25 3.25h-4.9l-4.1 3.25v-3.25H6A3.25 3.25 0 0 1 2.75 14v-5A3.25 3.25 0 0 1 6 5.75Z"
+        stroke="currentColor"
+        strokeWidth="1.7"
+        strokeLinejoin="round"
+      />
+      <circle cx="9" cy="11.5" r="1.15" fill="currentColor" />
+      <circle cx="12" cy="11.5" r="1.15" fill="currentColor" />
+      <circle cx="15" cy="11.5" r="1.15" fill="currentColor" />
+    </svg>
+  )
+}