User experience improvements to the focused mode

bicorder-app/src/App.svelte

@@ -8,6 +8,7 @@
   import HelpModal from './components/HelpModal.svelte';
   import FormRecommendation from './components/FormRecommendation.svelte';
   import AnalysisTransitionBanner from './components/AnalysisTransitionBanner.svelte';
+  import HamburgerMenu from './components/HamburgerMenu.svelte';
   import { BicorderClassifier } from './bicorder-classifier';
 
   // Load bicorder data and model from build-time constants
@@ -97,6 +98,32 @@
     viewMode = viewMode === 'focused' ? 'list' : 'focused';
   }
 
+  function toggleFormMode() {
+    data = {
+      ...data,
+      metadata: {
+        ...data.metadata,
+        shortform: !data.metadata.shortform
+      }
+    };
+    // Force refresh of components
+    refreshKey++;
+    // Reset to first screen when toggling
+    currentScreen = 0;
+  }
+
+  function showAnalysis() {
+    // Find the first analysis screen
+    const firstAnalysisIndex = screens.findIndex(s => s.type === 'analysis');
+    if (firstAnalysisIndex !== -1) {
+      currentScreen = firstAnalysisIndex;
+      // Switch to focused mode if in list mode
+      if (viewMode === 'list') {
+        viewMode = 'focused';
+      }
+    }
+  }
+
   // Generate ASCII progress bar
   function generateProgressBar(current: number, total: number): string {
     const filled = '#';
@@ -412,7 +439,7 @@
         class="toolbar-btn help-btn"
         on:click={openHelp}
         aria-label="About the Bicorder"
-        title="Help & Instructions"
+        title="About"
       >
         ?
       </button>
@@ -424,20 +451,13 @@
     </div>
 
     <div class="header-right">
-      <FormRecommendation
-        recommendation={formRecommendation}
-        hasEnoughData={hasEnoughDataForRecommendation}
+      <HamburgerMenu
+        {viewMode}
         isShortForm={data.metadata.shortform}
-        on:switchToLongForm={handleSwitchToLongForm}
+        on:toggleViewMode={toggleViewMode}
+        on:toggleFormMode={toggleFormMode}
+        on:showAnalysis={showAnalysis}
       />
-      <button
-        class="toolbar-btn mode-toggle"
-        on:click={toggleViewMode}
-        aria-label="Toggle view mode"
-        title={viewMode === 'focused' ? 'Switch to list view' : 'Switch to focused view'}
-      >
-        {viewMode === 'focused' ? '☰' : '⊡'}
-      </button>
     </div>
   </div>
 
@@ -654,10 +674,6 @@
       </div>
     </div>
   {/if}
-
-  <footer class="footer">
-    <p>Initiated by <a href="https://nathanschneider.info" rel="nofollow">Nathan Schneider</a>; <a href="https://git.medlab.host/ntnsndr/protocol-bicorder/src/branch/main/bicorder-app" rel="nofollow">source code</a> licensed under the <a href="https://firstdonoharm.dev/" rel="nofollow">Hippocratic License</a> (do no harm!).</p>
-  </footer>
 </main>
 
 <style>
@@ -733,10 +749,6 @@
     background-color: var(--input-bg);
   }
 
-  .mode-toggle {
-    font-size: 0.9rem;
-  }
-
   .description {
     text-align: center;
     padding: 1rem;
@@ -751,19 +763,6 @@
     margin: 0;
   }
 
-  .footer {
-    margin-top: auto;
-    padding: 2rem 1rem 1rem;
-    border-top: 2px solid var(--border-color);
-    text-align: center;
-    font-size: 0.85rem;
-    opacity: 0.7;
-  }
-
-  .footer p {
-    margin: 0.5rem 0;
-  }
-
   .diagnostic-set, .analysis-section {
     margin: 2rem 0;
     padding: 1rem 0;
@@ -793,6 +792,7 @@
     justify-content: center;
     min-height: 400px;
     padding: 2rem 0;
+    padding-bottom: 180px; /* Space for fixed navigation */
   }
 
   .focused-screen {
@@ -859,16 +859,22 @@
   }
 
   .focused-navigation {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: var(--bg-color);
+    border-top: 2px solid var(--border-color);
+    padding: 1rem;
     display: flex;
     flex-direction: column;
-    gap: 1.5rem;
-    padding: 1.5rem 0;
-    margin-top: auto;
-    border-top: 2px solid var(--border-color);
+    gap: 1rem;
+    z-index: 100;
+    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
   }
 
   .focused-navigation.no-border {
-    border-top: none;
+    border-top: 2px solid var(--border-color);
   }
 
   .nav-buttons {
@@ -876,12 +882,15 @@
     justify-content: space-between;
     align-items: center;
     gap: 1rem;
+    max-width: 800px;
+    margin: 0 auto;
+    width: 100%;
   }
 
   .nav-btn {
     padding: 0.75rem 1.5rem;
     font-size: 1rem;
-    min-width: 120px;
+    flex: 1;
   }
 
   .nav-btn:disabled {
@@ -895,6 +904,9 @@
     flex-direction: column;
     align-items: center;
     gap: 0.5rem;
+    max-width: 800px;
+    margin: 0 auto;
+    width: 100%;
   }
 
   .progress-bar {
@@ -957,32 +969,15 @@
       font-size: 0.9rem;
     }
 
-    .mode-toggle {
-      font-size: 0.75rem;
-    }
-
     .description {
       padding: 0.75rem;
       font-size: 0.85rem;
       margin-bottom: 1.5rem;
     }
 
-    .footer {
-      padding: 1.5rem 0.5rem 0.5rem;
-      font-size: 0.8rem;
-    }
-
-    .progress-bar {
-      font-size: 0.85rem;
-      letter-spacing: 0.05rem;
-    }
-
-    .progress-numbers {
-      font-size: 0.8rem;
-    }
-
     .focused-container {
       padding: 1rem 0;
+      padding-bottom: 160px; /* Adjust for smaller mobile nav */
     }
 
     .gradient-focused {
@@ -990,10 +985,22 @@
       gap: 1.5rem;
     }
 
+    .focused-navigation {
+      padding: 0.75rem;
+    }
+
     .nav-btn {
-      min-width: 80px;
+      flex: 1;
       padding: 0.5rem 1rem;
       font-size: 0.9rem;
     }
+
+    .progress-bar {
+      font-size: 0.85rem;
+    }
+
+    .progress-numbers {
+      font-size: 0.8rem;
+    }
   }
 </style>