From cd1900583152f3371fe613e21869b396f7157140 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Wed, 18 Feb 2026 17:59:33 -0500
Subject: [PATCH] feat: add feedback route, sidebar nav item, and account link
 card

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/layout/Sidebar.tsx |  4 +++-
 frontend/src/pages/AccountSettingsPage.tsx | 17 ++++++++++++++++-
 frontend/src/router.tsx                    |  9 +++++++++
 3 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
index 9008b106..da359cb8 100644
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { useNavigate, useLocation } from 'react-router-dom'
-import { LayoutGrid, Box, PenLine, Clock, FileText, Bookmark, BarChart3, Users, Settings, PanelLeftClose, PanelLeftOpen } from 'lucide-react'
+import { LayoutGrid, Box, PenLine, Clock, FileText, Bookmark, BarChart3, Users, Settings, PanelLeftClose, PanelLeftOpen, MessageSquareText } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { useUserPreferencesStore } from '@/store/userPreferencesStore'
 import { CategoryList } from '@/components/sidebar/CategoryList'
@@ -144,6 +144,7 @@ export function Sidebar() {
             <NavItem href="/shares" icon={FileText} label="Exports" collapsed />
             <NavItem href="/step-library" icon={Bookmark} label="Step Library" collapsed />
             <NavItem href="/analytics" icon={BarChart3} label="Analytics" collapsed />
+            <NavItem href="/feedback" icon={MessageSquareText} label="Feedback" collapsed />
           </div>
         </>
       ) : (
@@ -201,6 +202,7 @@ export function Sidebar() {
       )}>
         {!sidebarCollapsed && (
           <>
+            <NavItem href="/feedback" icon={MessageSquareText} label="Feedback" />
             <NavItem href="/account" icon={Users} label="Team" />
             <NavItem href="/account" icon={Settings} label="Settings" />
           </>
diff --git a/frontend/src/pages/AccountSettingsPage.tsx b/frontend/src/pages/AccountSettingsPage.tsx
index a15b5bc5..a3e0084b 100644
--- a/frontend/src/pages/AccountSettingsPage.tsx
+++ b/frontend/src/pages/AccountSettingsPage.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { Link } from 'react-router-dom'
-import { Building2, Users, Mail, Crown, Loader2, AlertCircle, Check, X, Settings, FolderTree, Server, RefreshCw } from 'lucide-react'
+import { Building2, Users, Mail, Crown, Loader2, AlertCircle, Check, X, Settings, FolderTree, Server, RefreshCw, MessageSquareText } from 'lucide-react'
 import { accountsApi } from '@/api/accounts'
 import type { Account, AccountMember, AccountInvite } from '@/types'
 import { cn } from '@/lib/utils'
@@ -513,6 +513,21 @@ export function AccountSettingsPage() {
           </Link>
         )}
 
+        {/* Feedback Link (all users) */}
+        <Link
+          to="/feedback"
+          className="bg-card border border-border rounded-xl p-4 sm:p-6 flex items-center justify-between group hover:border-border transition-all"
+        >
+          <div className="flex items-center gap-3">
+            <MessageSquareText className="h-5 w-5 text-muted-foreground" />
+            <div>
+              <h2 className="text-lg font-semibold text-foreground">Send Feedback</h2>
+              <p className="text-sm text-muted-foreground">Report bugs, request features, or share your thoughts</p>
+            </div>
+          </div>
+          <span className="text-muted-foreground group-hover:text-foreground transition-colors">&rarr;</span>
+        </Link>
+
         {/* Preferences Section */}
         <div className="bg-card border border-border rounded-xl p-4 sm:p-6">
           <div className="flex items-center gap-2">
diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx
index 00e61ed7..2a282460 100644
--- a/frontend/src/router.tsx
+++ b/frontend/src/router.tsx
@@ -30,6 +30,7 @@ const SessionDetailPage = lazy(() => import('@/pages/SessionDetailPage'))
 const MySharesPage = lazy(() => import('@/pages/MySharesPage'))
 const TeamAnalyticsPage = lazy(() => import('@/pages/TeamAnalyticsPage'))
 const MyAnalyticsPage = lazy(() => import('@/pages/MyAnalyticsPage'))
+const FeedbackPage = lazy(() => import('@/pages/FeedbackPage'))
 const AccountSettingsPage = lazy(() => import('@/pages/AccountSettingsPage'))
 // Admin pages
 const AdminLayout = lazy(() => import('@/components/admin/AdminLayout'))
@@ -226,6 +227,14 @@ export const router = createBrowserRouter([
           </Suspense>
         ),
       },
+      {
+        path: 'feedback',
+        element: (
+          <Suspense fallback={<PageLoader />}>
+            <FeedbackPage />
+          </Suspense>
+        ),
+      },
       // Admin routes
       {
         path: 'admin',