User experience improvements to the focused mode

2026-01-18 16:59:56 -07:00
parent 56d1f7e11e
commit f53ada8196
4 changed files with 279 additions and 69 deletions
--- a/bicorder-app/src/App.svelte
+++ b/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>
--- a/bicorder-app/src/components/AnalysisTransitionBanner.svelte
+++ b/bicorder-app/src/components/AnalysisTransitionBanner.svelte
@@ -71,7 +71,7 @@
    <!-- Action Buttons -->
    <div class="action-buttons">
      <button class="action-btn view-analysis-btn" on:click={toggleAllAnalysis}>
-        {showAllAnalysis ? '▼' : '▶'} {showAllAnalysis ? 'Hide' : 'View'} All Analysis
+        {showAllAnalysis ? '▼' : '▶'} {showAllAnalysis ? 'Hide' : 'View'} Analysis
      </button>
      <button class="action-btn export-btn" on:click={handleJumpToExport}>
        Export Readings →
@@ -86,7 +86,7 @@
    <!-- All Analysis Gradients (expandable) -->
    {#if showAllAnalysis}
      <div class="all-analysis-section">
-        <div class="analysis-header">All Analysis Gradients</div>
+        <div class="analysis-header">Analysis Gradients</div>
        {#each allAnalysisGradients as gradient, index}
          {#if index !== 3}
            <div class="analysis-item">
--- a/bicorder-app/src/components/HamburgerMenu.svelte
+++ b/bicorder-app/src/components/HamburgerMenu.svelte
@@ -0,0 +1,186 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  export let viewMode: 'focused' | 'list' = 'focused';
+  export let isShortForm: boolean = true;
+
+  const dispatch = createEventDispatcher();
+
+  let isOpen = false;
+
+  function toggleMenu() {
+    isOpen = !isOpen;
+  }
+
+  function closeMenu() {
+    isOpen = false;
+  }
+
+  function handleToggleViewMode() {
+    dispatch('toggleViewMode');
+    closeMenu();
+  }
+
+  function handleToggleFormMode() {
+    dispatch('toggleFormMode');
+    closeMenu();
+  }
+
+  function handleShowAnalysis() {
+    dispatch('showAnalysis');
+    closeMenu();
+  }
+
+  // Close menu when clicking outside
+  function handleClickOutside(event: MouseEvent) {
+    const target = event.target as HTMLElement;
+    if (!target.closest('.hamburger-menu')) {
+      closeMenu();
+    }
+  }
+</script>
+
+<svelte:window on:click={handleClickOutside} />
+
+<div class="hamburger-menu">
+  <button
+    class="toolbar-btn hamburger-btn"
+    on:click|stopPropagation={toggleMenu}
+    aria-label="Menu"
+    title="Menu"
+  >
+    ☰
+  </button>
+
+  {#if isOpen}
+    <div class="menu-dropdown">
+      <button class="menu-item" on:click={handleToggleViewMode}>
+        <span class="menu-icon">{viewMode === 'focused' ? '☰' : '⊡'}</span>
+        <span class="menu-text">
+          {viewMode === 'focused' ? 'List mode' : 'Focused mode'}
+        </span>
+      </button>
+
+      <button class="menu-item" on:click={handleToggleFormMode}>
+        <span class="menu-icon">{isShortForm ? '📋' : '📄'}</span>
+        <span class="menu-text">
+          {isShortForm ? 'Long form' : 'Short form'}
+        </span>
+      </button>
+
+      <button class="menu-item" on:click={handleShowAnalysis}>
+        <span class="menu-icon">📊</span>
+        <span class="menu-text">Show analysis</span>
+      </button>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .hamburger-menu {
+    position: relative;
+  }
+
+  .toolbar-btn {
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    font-size: 1rem;
+    font-weight: bold;
+    cursor: pointer;
+    background: var(--bg-color);
+    color: var(--fg-color);
+    border: 1px solid var(--border-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.4;
+    transition: opacity 0.2s, background-color 0.2s;
+    min-height: auto;
+    flex-shrink: 0;
+    border-radius: 3px;
+  }
+
+  .toolbar-btn:hover {
+    opacity: 0.8;
+    background-color: var(--input-bg);
+  }
+
+  .hamburger-btn {
+    font-size: 0.9rem;
+  }
+
+  .menu-dropdown {
+    position: absolute;
+    top: calc(100% + 0.5rem);
+    right: 0;
+    background: var(--bg-color);
+    border: 1px solid var(--border-color);
+    border-radius: 3px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    min-width: 200px;
+    z-index: 1000;
+    overflow: hidden;
+  }
+
+  .menu-item {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem 1rem;
+    border: none;
+    background: var(--bg-color);
+    color: var(--fg-color);
+    cursor: pointer;
+    font-size: 0.9rem;
+    transition: background-color 0.2s;
+    text-align: left;
+  }
+
+  .menu-item:hover {
+    background-color: var(--input-bg);
+  }
+
+  .menu-item:not(:last-child) {
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  .menu-icon {
+    font-size: 1rem;
+    min-width: 1.2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .menu-text {
+    flex: 1;
+  }
+
+  @media (max-width: 768px) {
+    .toolbar-btn {
+      width: 1.5rem;
+      height: 1.5rem;
+      font-size: 0.85rem;
+    }
+
+    .hamburger-btn {
+      font-size: 0.75rem;
+    }
+
+    .menu-dropdown {
+      min-width: 180px;
+    }
+
+    .menu-item {
+      padding: 0.6rem 0.85rem;
+      font-size: 0.85rem;
+    }
+
+    .menu-icon {
+      font-size: 0.9rem;
+      min-width: 1rem;
+    }
+  }
+</style>
--- a/bicorder-app/src/components/HelpModal.svelte
+++ b/bicorder-app/src/components/HelpModal.svelte
@@ -18,19 +18,22 @@
  <div class="modal-backdrop" on:click={closeModal} on:keydown={() => {}} role="button" tabindex="-1">
    <div class="modal-content" on:click|stopPropagation on:keydown={() => {}} role="dialog" aria-modal="true">
      <div class="modal-header">
-        <h2>Help & Instructions</h2>
-        <button class="close-btn" on:click={closeModal} aria-label="Close help">×</button>
+        <h2>About</h2>
+        <button class="close-btn" on:click={closeModal} aria-label="Close">×</button>
      </div>

      <div class="modal-body">
-      <p>The Protocol Bicorder is a diagnostic tool for the study of protocols. It allows a human or machine user to evaluate protocol characteristics along a series of gradients between opposing terms.</p>    
+      <p>The Protocol Bicorder is a diagnostic tool for the study of protocols. It allows a human or machine user to evaluate protocol characteristics along a series of gradients between opposing terms.</p>
      <p>The name is a tribute to the tricorder, a fictional device in the Star Trek universe that the characters can use to obtain all manner of empirical data about their surroundings.</p>
-      <p>To carry out the diagnostic, the analyst should consider the protocol from the perspective of one of the <code>gradients</code> at a time. The gradients invite the analyst to determine where the protocol lies between two terms.</p>
-      <p>This is inevitably an interpretive exercise, but do your best to identify the most accurate <code>value</code>, with <code>1</code> being closest to <code>term_left</code> and <code>9</code> being closest to <code>term_right</code>.</p>
-      <p>Choosing a <code>value</code> in the middle, such as <code>5</code>, can mean "a bit of both." Leaving the gradient <code>value</code> as <code>null</code> means "not applicable."</p>
-      <p>There is a <code>notes</code> field for the analyst to add additional context or explanation.</p>
-<p>The <code>shortform</code> option allows the use of an abbreviated version of the bicorder, including only the most salient gradients.</p>
+      <p>To carry out the diagnostic, consider the protocol from the perspective of one gradient at a time. Determine where the protocol lies between two terms, with <code>1</code> closest to <code>term_left</code> and <code>9</code> closest to <code>term_right</code>.</p>
+      <p>A middle <code>value</code> like <code>5</code> means "a bit of both." Leaving the gradient <code>value</code> as <code>null</code> means "not applicable."</p>
+      <p>Use the <code>notes</code> field to add context or explanation.</p>
+      <p>Use the menu (☰) to toggle between focused/list modes and short/long forms. Short form includes only the most salient gradients.</p>
      <p>Happy protocol watching!</p>
+
+      <hr class="divider" />
+
+      <p class="credits">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>
      </div>
    </div>
  </div>
@@ -126,6 +129,20 @@
    color: var(--accent-color);
  }

+  .divider {
+    margin: 2rem 0 1.5rem 0;
+    border: none;
+    border-top: 1px solid var(--border-color);
+    opacity: 0.5;
+  }
+
+  .credits {
+    font-size: 0.85rem;
+    opacity: 0.7;
+    text-align: center;
+    line-height: 1.6;
+  }
+
  @media (max-width: 768px) {
    .modal-content {
      max-height: 90vh;