Remove graph traversal and expansion depth from settings panels

- Remove entire Graph Traversal section from Settings panel including:
  - "Search through already fetched" toggle
  - "Append mode" toggle and clear graph button
- Remove expansion depth control from Tag Anchor Controls in Legend
- Make entire header sections clickable for better accessibility:
  - Main panel headers (Legend/Settings) are fully clickable
  - Section headers within panels are fully clickable
  - Add hover effects for visual feedback
  - Use pointer-events-none on arrow icons

This simplifies the UI by removing unused features and improves
accessibility by making larger click targets for toggling panels.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/lib/navigator/EventNetwork/Legend.svelte

@@ -17,7 +17,6 @@
     autoDisabledTags = false,
     showTagAnchors = $bindable(false),
     selectedTagType = $bindable("t"),
-    tagExpansionDepth = $bindable(0),
     onTagSettingsChange = () => {},
     showPersonNodes = $bindable(false),
     personAnchors = [],
@@ -40,7 +39,6 @@
     autoDisabledTags?: boolean;
     showTagAnchors?: boolean;
     selectedTagType?: string;
-    tagExpansionDepth?: number;
     onTagSettingsChange?: () => void;
     showPersonNodes?: boolean;
     personAnchors?: any[];
@@ -79,21 +77,15 @@
 </script>
 
 <div class={`leather-legend ${className}`}>
-  <div class="flex items-center justify-between space-x-3">
+  <div class="flex items-center justify-between space-x-3 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md px-2 py-1 -mx-2 -my-1" onclick={toggle}>
     <h3 class="h-leather">Legend</h3>
-    <Button
-      color="none"
-      outline
-      size="xs"
-      onclick={toggle}
-      class="rounded-full"
-    >
+    <div class="pointer-events-none">
       {#if expanded}
         <CaretUpOutline />
       {:else}
         <CaretDownOutline />
       {/if}
-    </Button>
+    </div>
   </div>
 
   {#if expanded}
@@ -102,18 +94,13 @@
       <div class="legend-section">
         <div class="legend-section-header" onclick={toggleNodeTypes}>
           <h4 class="legend-section-title">Node Types</h4>
-          <Button
-            color="none"
-            outline
-            size="xs"
-            class="rounded-full p-1"
-          >
+          <div class="pointer-events-none">
             {#if nodeTypesExpanded}
               <CaretUpOutline class="w-3 h-3" />
             {:else}
               <CaretDownOutline class="w-3 h-3" />
             {/if}
-          </Button>
+          </div>
         </div>
         
         {#if nodeTypesExpanded}
@@ -195,18 +182,13 @@
       <div class="legend-section">
         <div class="legend-section-header" onclick={() => tagControlsExpanded = !tagControlsExpanded}>
           <h4 class="legend-section-title">Tag Anchor Controls</h4>
-          <Button
-            color="none"
-            outline
-            size="xs"
-            class="rounded-full p-1"
-          >
+          <div class="pointer-events-none">
             {#if tagControlsExpanded}
               <CaretUpOutline class="w-3 h-3" />
             {:else}
               <CaretDownOutline class="w-3 h-3" />
             {/if}
-          </Button>
+          </div>
         </div>
         
         {#if tagControlsExpanded}
@@ -242,25 +224,6 @@
                 </select>
                 
               </div>
-              
-              <!-- Expansion Depth -->
-              <div>
-                <div class="flex items-center gap-2">
-                  <label class="text-xs text-gray-600 dark:text-gray-400">Expansion Depth:</label>
-                  <input
-                    type="number"
-                    min="0"
-                    max="10"
-                    bind:value={tagExpansionDepth}
-                    onchange={onTagSettingsChange}
-                    class="w-16 text-xs bg-primary-0 dark:bg-primary-1000 border border-gray-300 dark:border-gray-700 rounded-md px-2 py-1 dark:text-white"
-                  />
-                  <span class="text-xs text-gray-500 dark:text-gray-400">(0-10)</span>
-                </div>
-                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                  Fetch publications sharing tags
-                </p>
-              </div>
             {/if}
           </div>
         {/if}
@@ -271,18 +234,13 @@
         <div class="legend-section">
           <div class="legend-section-header" onclick={toggleTagAnchors}>
             <h4 class="legend-section-title">Active Tag Anchors: {tagAnchors[0].type}</h4>
-            <Button
-              color="none"
-              outline
-              size="xs"
-              class="rounded-full p-1"
-            >
+            <div class="pointer-events-none">
               {#if tagAnchorsExpanded}
                 <CaretUpOutline class="w-3 h-3" />
               {:else}
                 <CaretDownOutline class="w-3 h-3" />
               {/if}
-            </Button>
+            </div>
           </div>
           
           {#if tagAnchorsExpanded}
@@ -334,18 +292,13 @@
       <div class="legend-section">
         <div class="legend-section-header" onclick={() => personVisualizerExpanded = !personVisualizerExpanded}>
           <h4 class="legend-section-title">Person Visualizer</h4>
-          <Button
-            color="none"
-            outline
-            size="xs"
-            class="rounded-full p-1"
-          >
+          <div class="pointer-events-none">
             {#if personVisualizerExpanded}
               <CaretUpOutline class="w-3 h-3" />
             {:else}
               <CaretDownOutline class="w-3 h-3" />
             {/if}
-          </Button>
+          </div>
         </div>
         
         {#if personVisualizerExpanded}

src/lib/navigator/EventNetwork/Settings.svelte

@@ -30,7 +30,6 @@
 
   let expanded = $state(false);
   let eventTypesExpanded = $state(true);
-  let graphTraversalExpanded = $state(true);
   let visualSettingsExpanded = $state(true);
 
   function toggle() {
@@ -41,10 +40,6 @@
     eventTypesExpanded = !eventTypesExpanded;
   }
   
-  function toggleGraphTraversal() {
-    graphTraversalExpanded = !graphTraversalExpanded;
-  }
-  
   function toggleVisualSettings() {
     visualSettingsExpanded = !visualSettingsExpanded;
   }
@@ -57,21 +52,15 @@
 </script>
 
 <div class="leather-legend sm:!right-1 sm:!left-auto">
-  <div class="flex items-center justify-between space-x-3">
+  <div class="flex items-center justify-between space-x-3 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md px-2 py-1 -mx-2 -my-1" onclick={toggle}>
     <h3 class="h-leather">Settings</h3>
-    <Button
-      color="none"
-      outline
-      size="xs"
-      onclick={toggle}
-      class="rounded-full"
-    >
+    <div class="pointer-events-none">
       {#if expanded}
         <CaretUpOutline />
       {:else}
         <CaretDownOutline />
       {/if}
-    </Button>
+    </div>
   </div>
 
   {#if expanded}
@@ -84,18 +73,13 @@
       <div class="settings-section">
         <div class="settings-section-header" onclick={toggleEventTypes}>
           <h4 class="settings-section-title">Event Configuration</h4>
-          <Button
-            color="none"
-            outline
-            size="xs"
-            class="rounded-full p-1"
-          >
+          <div class="pointer-events-none">
             {#if eventTypesExpanded}
               <CaretUpOutline class="w-3 h-3" />
             {:else}
               <CaretDownOutline class="w-3 h-3" />
             {/if}
-          </Button>
+          </div>
         </div>
         {#if eventTypesExpanded}
           <EventTypeConfig onReload={onupdate} {eventCounts} {profileStats} />
@@ -103,82 +87,18 @@
       </div>
 
 
-      <!-- Graph Traversal Section -->
-      <div class="settings-section">
-        <div class="settings-section-header" onclick={toggleGraphTraversal}>
-          <h4 class="settings-section-title">Graph Traversal <span class="text-orange-500 text-xs font-normal">(not tested)</span></h4>
-          <Button
-            color="none"
-            outline
-            size="xs"
-            class="rounded-full p-1"
-          >
-            {#if graphTraversalExpanded}
-              <CaretUpOutline class="w-3 h-3" />
-            {:else}
-              <CaretDownOutline class="w-3 h-3" />
-            {/if}
-          </Button>
-        </div>
-        {#if graphTraversalExpanded}
-        
-        <label class="flex items-center space-x-2">
-          <Toggle 
-            checked={$visualizationConfig.searchThroughFetched} 
-            onclick={() => visualizationConfig.toggleSearchThroughFetched()}
-            class="text-xs" 
-          />
-          <span class="text-xs text-gray-600 dark:text-gray-400">Search through already fetched</span>
-        </label>
-        <p class="text-xs text-gray-500 dark:text-gray-400 ml-6">
-          When enabled, graph expansion will only use events already loaded
-        </p>
-        
-        <label class="flex items-center space-x-2 mt-3">
-          <Toggle 
-            checked={$visualizationConfig.appendMode} 
-            onclick={() => visualizationConfig.toggleAppendMode()}
-            class="text-xs" 
-          />
-          <span class="text-xs text-gray-600 dark:text-gray-400">Append mode (accumulate events)</span>
-        </label>
-        <p class="text-xs text-gray-500 dark:text-gray-400 ml-6">
-          When enabled, new fetches will add to existing graph instead of replacing it
-        </p>
-        
-        {#if $visualizationConfig.appendMode && count > 0}
-          <Button 
-            size="xs" 
-            color="red" 
-            onclick={onclear}
-            class="gap-1 mt-3"
-            title="Clear all accumulated events"
-          >
-            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
-            </svg>
-            <span>Clear Graph ({count} events)</span>
-          </Button>
-        {/if}
-        {/if}
-      </div>
 
       <!-- Visual Settings Section -->
       <div class="settings-section">
         <div class="settings-section-header" onclick={toggleVisualSettings}>
           <h4 class="settings-section-title">Visual Settings</h4>
-          <Button
-            color="none"
-            outline
-            size="xs"
-            class="rounded-full p-1"
-          >
+          <div class="pointer-events-none">
             {#if visualSettingsExpanded}
               <CaretUpOutline class="w-3 h-3" />
             {:else}
               <CaretDownOutline class="w-3 h-3" />
             {/if}
-          </Button>
+          </div>
         </div>
         {#if visualSettingsExpanded}