Improved Help and help chatbot

src/App.tsx

@@ -1,11 +1,11 @@
-import { type Component, createSignal, onMount, onCleanup, createMemo, lazy, Suspense, Show } from 'solid-js';
+import { type Component, createSignal, onMount, onCleanup, createMemo, createEffect, lazy, Suspense, Show } from 'solid-js';
 import { Layout } from './components/Layout';
 import { EmbedLayout } from './components/EmbedLayout';
 import { EmbedAuthWrapper } from './components/EmbedAuthWrapper';
 import { CriticalView } from './views/CriticalView';
 import { AuthCallback } from './components/Auth';
 import { pb } from './lib/pocketbase';
-import { initStore } from './store';
+import { initStore, setStore } from './store';
 
 // const CriticalView = lazy(() => import('./views/CriticalView').then(m => ({ default: m.CriticalView })));
 const UrgencyView = lazy(() => import('./views/UrgencyView').then(m => ({ default: m.UrgencyView })));
@@ -16,19 +16,66 @@ const SnowballView = lazy(() => import('./views/SnowballView').then(m => ({ defa
 const DigInView = lazy(() => import('./views/DigInView').then(m => ({ default: m.DigInView })));
 const ProgressView = lazy(() => import('./views/ProgressView').then(m => ({ default: m.ProgressView })));
 const HelpView = lazy(() => import('./views/HelpView').then(m => ({ default: m.HelpView })));
+const AIHelpView = lazy(() => import('./views/AIHelpView').then(m => ({ default: m.AIHelpView })));
 const NotepadView = lazy(() => import('./views/NotepadView').then(m => ({ default: m.NotepadView })));
 const QuickEntryForm = lazy(() => import('./components/QuickEntryForm').then(m => ({ default: m.QuickEntryForm })));
 
 const App: Component = () => {
   // Basic routing state
   const [currentView, setCurrentView] = createSignal("critical");
+  const [lastNonAIView, setLastNonAIView] = createSignal("critical");
   const [isAuthenticated, setIsAuthenticated] = createSignal(pb.authStore.isValid);
   const [location, setLocation] = createSignal(window.location.href);
+  const [isDesktop, setIsDesktop] = createSignal(window.matchMedia("(min-width: 768px)").matches);
+
+  createEffect(() => {
+    const view = currentView();
+    if (view !== "help_ai") {
+      setLastNonAIView(view);
+    }
+  });
+
+  const effectiveView = createMemo(() =>
+    currentView() === "help_ai" && isDesktop() ? lastNonAIView() : currentView()
+  );
 
   onMount(() => {
-    const handleLocChange = () => setLocation(window.location.href);
+    const mediaQuery = window.matchMedia("(min-width: 768px)");
+    const openHelpGuide = (sectionId?: string) => {
+      const nextHash = sectionId ? `#help/${sectionId}` : "#help";
+      if (window.location.hash !== nextHash) {
+      window.location.hash = nextHash;
+      }
+      setStore('isNotepadMode', false);
+      setCurrentView("help");
+      window.dispatchEvent(new CustomEvent("taskgrid:help-target", { detail: { sectionId } }));
+    };
+
+    const openAIHelp = () => {
+      setStore('isNotepadMode', false);
+      setCurrentView("help_ai");
+    };
+
+    const handleMediaChange = (event: MediaQueryListEvent) => {
+      setIsDesktop(event.matches);
+    };
+
+    const handleLocChange = () => {
+      setLocation(window.location.href);
+
+      const hash = window.location.hash;
+      if (hash === "#help" || hash.startsWith("#help/")) {
+        setCurrentView("help");
+      }
+    };
+
+    (window as any).setCurrentView = setCurrentView;
+    (window as any).openTasGridHelp = openHelpGuide;
+    (window as any).openTasGridAIHelp = openAIHelp;
+
     window.addEventListener('popstate', handleLocChange);
     window.addEventListener('hashchange', handleLocChange);
+    mediaQuery.addEventListener('change', handleMediaChange);
 
     let isFirstRun = true;
     const removeListener = pb.authStore.onChange((token) => {
@@ -43,8 +90,12 @@ const App: Component = () => {
 
     onCleanup(() => {
       removeListener();
+      delete (window as any).setCurrentView;
+      delete (window as any).openTasGridHelp;
+      delete (window as any).openTasGridAIHelp;
       window.removeEventListener('popstate', handleLocChange);
       window.removeEventListener('hashchange', handleLocChange);
+      mediaQuery.removeEventListener('change', handleMediaChange);
     });
 
     // Background preload of other views when idle
@@ -59,6 +110,7 @@ const App: Component = () => {
       import('./views/DigInView');
       import('./views/ProgressView');
       import('./views/HelpView');
+      import('./views/AIHelpView');
 
       // Remove splash screen after high priority work is done
       const splash = document.getElementById('splash');
@@ -67,6 +119,8 @@ const App: Component = () => {
         setTimeout(() => splash.remove(), 500);
       }
     });
+
+    handleLocChange();
   });
 
   // Determine if we are in an embed route (check both path and hash for compatibility)
@@ -96,17 +150,24 @@ const App: Component = () => {
             when={isEmbed()}
             fallback={
                 <Show when={isAuthenticated()} fallback={<AuthCallback onSuccess={() => { }} />}>
-                    <Layout currentView={currentView()} setView={setCurrentView}>
+                    <Layout
+                        currentView={effectiveView()}
+                        setView={setCurrentView}
+                        isAIHelpOpen={currentView() === "help_ai" && isDesktop()}
+                        onToggleAIHelp={() => setCurrentView(currentView() === "help_ai" ? lastNonAIView() : "help_ai")}
+                        hideQuickEntry={currentView() === "help_ai" && !isDesktop()}
+                    >
                         <Suspense fallback={<div class="flex items-center justify-center h-full"><div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div></div>}>
-                            <Show when={currentView() === "critical"}><CriticalView /></Show>
-                            <Show when={currentView() === "urgency"}><UrgencyView /></Show>
-                            <Show when={currentView() === "priority"}><PriorityView /></Show>
-                            <Show when={currentView() === "matrix"}><MatrixView /></Show>
-                            <Show when={currentView() === "snowball"}><SnowballView /></Show>
-                            <Show when={currentView() === "dig_in"}><DigInView /></Show>
-                            <Show when={currentView() === "progress"}><ProgressView /></Show>
-                            <Show when={currentView() === "settings"}><SettingsView setView={setCurrentView} /></Show>
-                            <Show when={currentView() === "help"}><HelpView onBack={() => setCurrentView("settings")} /></Show>
+                            <Show when={effectiveView() === "critical"}><CriticalView /></Show>
+                            <Show when={effectiveView() === "urgency"}><UrgencyView /></Show>
+                            <Show when={effectiveView() === "priority"}><PriorityView /></Show>
+                            <Show when={effectiveView() === "matrix"}><MatrixView /></Show>
+                            <Show when={effectiveView() === "snowball"}><SnowballView /></Show>
+                            <Show when={effectiveView() === "dig_in"}><DigInView /></Show>
+                            <Show when={effectiveView() === "progress"}><ProgressView /></Show>
+                            <Show when={effectiveView() === "settings"}><SettingsView setView={setCurrentView} /></Show>
+                            <Show when={effectiveView() === "help_ai"}><AIHelpView /></Show>
+                            <Show when={effectiveView() === "help"}><HelpView onBack={() => setCurrentView("settings")} /></Show>
                         </Suspense>
                     </Layout>
                 </Show>