From 275442e9e28f4f31b38e8b11e4048bb9c533d829 Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Sun, 25 Oct 2026 01:19:16 +0200
Subject: [PATCH] feat(ui): add circled question mark help button in top header
 rechtsbuendig

---
 frontend/src/App.tsx                          | 27 ++++++++++++++-----
 .../src/features/workspace/WorkspaceView.tsx  | 14 ----------
 2 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index e0f7913..4559960 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -101,6 +101,7 @@ export const App: React.FC = () => {
   const [deck, setDeck] = useState<Thought[]>([]);
   const [lists, setLists] = useState<SharedList[]>([]);
   const [activeTab, setActiveTab] = useState<ActiveTab>('triage');
+  const [previousTab, setPreviousTab] = useState<ActiveTab>('triage');
   const [selectedDocId, setSelectedDocId] = useState<string | null>(null);
   const [captureFocusCount, setCaptureFocusCount] = useState(0);
   const [refreshRevision, setRefreshRevision] = useState(0);
@@ -109,6 +110,13 @@ export const App: React.FC = () => {
   const [showProfileMenu, setShowProfileMenu] = useState(false);
   const dropdownRef = useRef<HTMLDivElement | null>(null);
 
+  const handleOpenHelp = () => {
+    triggerHaptic(10);
+    setPreviousTab((prev) => (activeTab === 'help' ? prev : activeTab));
+    setActiveTab('help');
+    setShowProfileMenu(false);
+  };
+
   const handleChangeTheme = (themeId: ThemeId) => {
     triggerHaptic(10);
     applyTheme(themeId);
@@ -379,11 +387,7 @@ export const App: React.FC = () => {
                   </button>
 
                   <button
-                    onClick={() => {
-                      triggerHaptic(10);
-                      setShowProfileMenu(false);
-                      setActiveTab('help');
-                    }}
+                    onClick={handleOpenHelp}
                     className={`w-full px-3.5 py-2.5 text-left flex items-center gap-2.5 hover:bg-panel-elevated transition-colors ${
                       activeTab === 'help' ? 'text-accent font-semibold' : 'text-main'
                     }`}
@@ -424,6 +428,16 @@ export const App: React.FC = () => {
               </div>
             )}
           </div>
+
+          {/* Circled Question Mark Help Button (Rechtsbündig) */}
+          <button
+            type="button"
+            onClick={handleOpenHelp}
+            className="w-7 h-7 rounded-full border border-border hover:border-strong bg-panel hover:bg-panel-elevated text-muted hover:text-main flex items-center justify-center transition-colors flex-shrink-0"
+            title="Hilfe & Dokumentation"
+          >
+            <HelpCircle className="w-4 h-4 text-muted hover:text-main" />
+          </button>
         </div>
 
         {/* Navigation tabs attached to header */}
@@ -533,12 +547,11 @@ export const App: React.FC = () => {
               <WorkspaceView
                 initialDocId={selectedDocId}
                 onStatsChange={refreshAll}
-                onOpenHelp={() => setActiveTab('help')}
               />
             )}
 
             {activeTab === 'help' && (
-              <HelpView onBack={() => setActiveTab('workspace')} />
+              <HelpView onBack={() => setActiveTab(previousTab || 'triage')} />
             )}
 
             {activeTab === 'lists' && (
diff --git a/frontend/src/features/workspace/WorkspaceView.tsx b/frontend/src/features/workspace/WorkspaceView.tsx
index 2cf88b3..23e7cb4 100644
--- a/frontend/src/features/workspace/WorkspaceView.tsx
+++ b/frontend/src/features/workspace/WorkspaceView.tsx
@@ -46,7 +46,6 @@ import { api, triggerHaptic } from '../../lib/api';
 interface WorkspaceViewProps {
   initialDocId?: string | null;
   onStatsChange: () => void;
-  onOpenHelp?: () => void;
 }
 
 const ICONS = ['📄', '📝', '💡', '🚀', '🏡', '⚡', '🎯', '🍕', '🛠️', '🧠', '🔥', '🏔️', '📦', '📑', '⚙️', '📊'];
@@ -82,7 +81,6 @@ const SLASH_COMMANDS: SlashCommandItem[] = [
 export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
   initialDocId,
   onStatsChange,
-  onOpenHelp,
 }) => {
   // Top Workspace Tab Mode: 'editor' vs 'todos' (Global To-Do Rollup Dashboard)
   const [workspaceMode, setWorkspaceMode] = useState<'editor' | 'todos'>('editor');
@@ -1066,18 +1064,6 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
               </button>
             </>
           )}
-
-          {onOpenHelp && (
-            <button
-              type="button"
-              onClick={onOpenHelp}
-              className="btn-action h-8 px-2.5 text-xs flex items-center gap-1.5"
-              title="Hilfe & Dokumentation öffnen"
-            >
-              <HelpCircle className="w-3.5 h-3.5 text-accent" />
-              <span>Hilfe</span>
-            </button>
-          )}
         </div>
       </div>