User experience improvements to the focused mode

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>