fixed bugs and accesibility warnings

src/lib/navigator/EventNetwork/Legend.svelte

@@ -97,7 +97,13 @@
 </script>
 
 <div class={`leather-legend ${className}`}>
-  <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}>
+  <button 
+    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 w-full text-left border-none bg-none"
+    onclick={toggle}
+    onkeydown={(e) => e.key === 'Enter' || e.key === ' ' ? toggle() : null}
+    aria-expanded={expanded}
+    aria-controls="legend-content"
+  >
     <h3 class="h-leather">Legend</h3>
     <div class="pointer-events-none">
       {#if expanded}
@@ -106,13 +112,19 @@
         <CaretDownOutline />
       {/if}
     </div>
-  </div>
+  </button>
 
   {#if expanded}
-    <div class="space-y-4">
+    <div id="legend-content" class="space-y-4">
       <!-- Node Types Section -->
       <div class="border-b border-gray-200 dark:border-gray-700 pb-4 mb-4 last:border-b-0 last:mb-0">
-        <div class="flex justify-between items-center cursor-pointer px-2 py-2 rounded hover:bg-gray-50 dark:hover:bg-gray-800 mb-3" onclick={toggleNodeTypes}>
+        <button 
+          class="flex justify-between items-center cursor-pointer px-2 py-2 rounded hover:bg-gray-50 dark:hover:bg-gray-800 mb-3 w-full text-left border-none bg-none"
+          onclick={toggleNodeTypes}
+          onkeydown={(e) => e.key === 'Enter' || e.key === ' ' ? toggleNodeTypes() : null}
+          aria-expanded={nodeTypesExpanded}
+          aria-controls="node-types-content"
+        >
           <h4 class="font-semibold text-gray-700 dark:text-gray-300 text-sm m-0">Node Types</h4>
           <div class="pointer-events-none">
             {#if nodeTypesExpanded}
@@ -121,9 +133,10 @@
               <CaretDownOutline class="w-3 h-3" />
             {/if}
           </div>
-        </div>
+        </button>
         
         {#if nodeTypesExpanded}
+          <div id="node-types-content">
             <ul class="space-y-2">
               <!-- Dynamic event kinds -->
               {#each Object.entries(eventCounts).sort(([a], [b]) => Number(a) - Number(b)) as [kindStr, count]}
@@ -196,12 +209,19 @@
                 </li>
               {/if}
             </ul>
+          </div>
         {/if}
       </div>
 
       <!-- Tag Anchor Controls Section -->
       <div class="border-b border-gray-200 dark:border-gray-700 pb-4 mb-4 last:border-b-0 last:mb-0">
-        <div class="flex justify-between items-center cursor-pointer px-2 py-2 rounded hover:bg-gray-50 dark:hover:bg-gray-800 mb-3" onclick={() => tagControlsExpanded = !tagControlsExpanded}>
+        <button 
+          class="flex justify-between items-center cursor-pointer px-2 py-2 rounded hover:bg-gray-50 dark:hover:bg-gray-800 mb-3 w-full text-left border-none bg-none"
+          onclick={() => tagControlsExpanded = !tagControlsExpanded}
+          onkeydown={(e) => e.key === 'Enter' || e.key === ' ' ? (tagControlsExpanded = !tagControlsExpanded) : null}
+          aria-expanded={tagControlsExpanded}
+          aria-controls="tag-controls-content"
+        >
           <h4 class="font-semibold text-gray-700 dark:text-gray-300 text-sm m-0">Tag Anchor Controls</h4>
           <div class="pointer-events-none">
             {#if tagControlsExpanded}
@@ -210,10 +230,10 @@
               <CaretDownOutline class="w-3 h-3" />
             {/if}
           </div>
-        </div>
+        </button>
         
         {#if tagControlsExpanded}
-          <div class="space-y-3">
+          <div id="tag-controls-content" class="space-y-3">
             <!-- Show Tag Anchors Toggle -->
             <div class="flex items-center space-x-2">
               <button
@@ -221,7 +241,9 @@
                   showTagAnchors = !showTagAnchors;
                   onTagSettingsChange();
                 }}
+                onkeydown={(e) => e.key === 'Enter' || e.key === ' ' ? (showTagAnchors = !showTagAnchors, onTagSettingsChange()) : null}
                 class="px-2 py-1 border border-gray-300 dark:border-gray-700 rounded text-xs font-medium cursor-pointer transition min-w-[3rem] hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-500 {showTagAnchors ? 'bg-blue-600 text-white border-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:text-white dark:border-blue-600 dark:hover:bg-blue-700' : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300'}"
+                aria-pressed={showTagAnchors}
               >
                 {showTagAnchors ? 'ON' : 'OFF'}
               </button>
@@ -231,8 +253,9 @@
             {#if showTagAnchors}
               <!-- Tag Type Selection -->
               <div>
-                <label class="text-xs text-gray-600 dark:text-gray-400">Tag Type:</label>
+                <label for="tag-type-select" class="text-xs text-gray-600 dark:text-gray-400">Tag Type:</label>
                 <select
+                  id="tag-type-select"
                   bind:value={selectedTagType}
                   onchange={onTagSettingsChange}
                   class="w-full 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 mt-1"
@@ -253,7 +276,13 @@
       <!-- Tag Anchors section -->
       {#if showTags && tagAnchors.length > 0}
         <div class="border-b border-gray-200 dark:border-gray-700 pb-4 mb-4 last:border-b-0 last:mb-0">
-          <div class="flex justify-between items-center cursor-pointer px-2 py-2 rounded hover:bg-gray-50 dark:hover:bg-gray-800 mb-3" onclick={toggleTagAnchors}>
+          <button 
+            class="flex justify-between items-center cursor-pointer px-2 py-2 rounded hover:bg-gray-50 dark:hover:bg-gray-800 mb-3 w-full text-left border-none bg-none"
+            onclick={toggleTagAnchors}
+            onkeydown={(e) => e.key === 'Enter' || e.key === ' ' ? toggleTagAnchors() : null}
+            aria-expanded={tagAnchorsExpanded}
+            aria-controls="tag-anchors-content"
+          >
             <h4 class="font-semibold text-gray-700 dark:text-gray-300 text-sm m-0">Active Tag Anchors: {tagAnchors[0].type}</h4>
             <div class="pointer-events-none">
               {#if tagAnchorsExpanded}
@@ -262,13 +291,14 @@
                 <CaretDownOutline class="w-3 h-3" />
               {/if}
             </div>
-          </div>
+          </button>
           
           {#if tagAnchorsExpanded}
             {@const sortedAnchors = tagSortMode === 'count' 
               ? [...tagAnchors].sort((a, b) => b.count - a.count)
               : [...tagAnchors].sort((a, b) => a.label.localeCompare(b.label))
             }
+            <div id="tag-anchors-content">
               {#if autoDisabledTags}
                 <div class="text-xs text-amber-600 dark:text-amber-400 mb-2 p-2 bg-amber-50 dark:bg-amber-900/20 rounded">
                   <strong>Note:</strong> All {tagAnchors.length} tags were auto-disabled to prevent graph overload. Click individual tags below to enable them.
@@ -300,59 +330,45 @@
                     <span class="text-xs">Alphabetical</span>
                   </label>
                 </div>
-              
-              <label class="flex items-center gap-1 cursor-pointer">
-                <input
-                  type="checkbox"
-                  onclick={invertTagSelection}
-                  class="w-3 h-3"
-                />
-                <span class="text-xs">Invert Selection</span>
-              </label>
               </div>
               
-            <div
-              class="grid gap-1 {tagAnchors.length > 20 ? 'max-h-96 overflow-y-auto pr-2' : ''}"
-              style="grid-template-columns: repeat({TAG_LEGEND_COLUMNS}, 1fr);"
-            >
-              {#each sortedAnchors as anchor}
-                {@const tagId = `${anchor.type}-${anchor.label}`}
-                {@const isDisabled = disabledTags.has(tagId)}
+              <div class="space-y-1 max-h-48 overflow-y-auto">
+                {#each sortedAnchors as tag}
+                  {@const isDisabled = disabledTags.has(tag.value)}
                   <button
-                    class="flex items-center gap-1 p-1 rounded w-full text-left border-none bg-none cursor-pointer transition hover:bg-black/5 dark:hover:bg-white/5 disabled:opacity-50"
-                    onclick={() => onTagToggle(tagId)}
-                    title={isDisabled ? `Click to show ${anchor.label}` : `Click to hide ${anchor.label}`}
+                    class="flex items-center justify-between w-full p-2 rounded text-left border-none bg-none cursor-pointer transition hover:bg-black/5 dark:hover:bg-white/5 disabled:opacity-50"
+                    onclick={() => onTagToggle(tag.value)}
+                    onkeydown={(e) => e.key === 'Enter' || e.key === ' ' ? onTagToggle(tag.value) : null}
+                    disabled={false}
+                    title={isDisabled ? `Click to show ${tag.label}` : `Click to hide ${tag.label}`}
+                    aria-pressed={!isDisabled}
                   >
+                    <span class="text-xs text-gray-700 dark:text-gray-300" style="opacity: {isDisabled ? 0.5 : 1};">
+                      {tag.label} ({tag.count})
+                    </span>
                     <div class="flex items-center">
                       <span
-                        class="w-4.5 h-4.5 rounded-full border-2 border-white flex items-center justify-center"
-                        style="background-color: {anchor.color}; opacity: {isDisabled ? 0.3 : 1};"
-                      >
-                        <span class="text-xs text-white font-bold">
-                          {anchor.type === "t"
-                            ? "#"
-                            : anchor.type === "author"
-                              ? "A"
-                              : anchor.type.charAt(0).toUpperCase()}
-                        </span>
-                      </span>
+                        class="inline-block w-3.5 h-3.5 rotate-45 border-2 border-white"
+                        style="background-color: {getEventKindColor(30040)}; opacity: {isDisabled ? 0.3 : 1};"
+                      ></span>
                     </div>
-                    <span class="text-xs text-gray-700 dark:text-gray-300 truncate" style="opacity: {isDisabled ? 0.5 : 1};" title={anchor.label}>
-                      {anchor.label.length > 25 ? anchor.label.slice(0, 22) + '...' : anchor.label}
-                      {#if !isDisabled}
-                        <span class="text-gray-500 dark:text-gray-400">({anchor.count})</span>
-                      {/if}
-                    </span>
                   </button>
                 {/each}
               </div>
+            </div>
           {/if}
         </div>
       {/if}
       
       <!-- Person Visualizer Section -->
       <div class="border-b border-gray-200 dark:border-gray-700 pb-4 mb-4 last:border-b-0 last:mb-0">
-        <div class="flex justify-between items-center cursor-pointer px-2 py-2 rounded hover:bg-gray-50 dark:hover:bg-gray-800 mb-3" onclick={() => personVisualizerExpanded = !personVisualizerExpanded}>
+        <button 
+          class="flex justify-between items-center cursor-pointer px-2 py-2 rounded hover:bg-gray-50 dark:hover:bg-gray-800 mb-3 w-full text-left border-none bg-none"
+          onclick={() => personVisualizerExpanded = !personVisualizerExpanded}
+          onkeydown={(e) => e.key === 'Enter' || e.key === ' ' ? (personVisualizerExpanded = !personVisualizerExpanded) : null}
+          aria-expanded={personVisualizerExpanded}
+          aria-controls="person-visualizer-content"
+        >
           <h4 class="font-semibold text-gray-700 dark:text-gray-300 text-sm m-0">Person Visualizer</h4>
           <div class="pointer-events-none">
             {#if personVisualizerExpanded}
@@ -361,10 +377,10 @@
               <CaretDownOutline class="w-3 h-3" />
             {/if}
           </div>
-        </div>
+        </button>
         
         {#if personVisualizerExpanded}
-          <div class="space-y-3">
+          <div id="person-visualizer-content" class="space-y-3">
             <!-- Show Person Nodes Toggle -->
             <div class="flex items-center justify-between">
               <div class="flex items-center space-x-2">
@@ -373,7 +389,9 @@
                     showPersonNodes = !showPersonNodes;
                     onPersonSettingsChange();
                   }}
+                  onkeydown={(e) => e.key === 'Enter' || e.key === ' ' ? (showPersonNodes = !showPersonNodes, onPersonSettingsChange()) : null}
                   class="px-2 py-1 border border-gray-300 dark:border-gray-700 rounded text-xs font-medium cursor-pointer transition min-w-[3rem] hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-500 {showPersonNodes ? 'bg-blue-600 text-white border-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:text-white dark:border-blue-600 dark:hover:bg-blue-700' : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300'}"
+                  aria-pressed={showPersonNodes}
                 >
                   {showPersonNodes ? 'ON' : 'OFF'}
                 </button>
@@ -437,30 +455,23 @@
                         onPersonToggle(person.pubkey);
                       }
                     }}
+                    onkeydown={(e) => e.key === 'Enter' || e.key === ' ' ? (showPersonNodes && onPersonToggle(person.pubkey)) : null}
                     disabled={!showPersonNodes}
                     title={!showPersonNodes ? 'Enable "Show Person Nodes" first' : isDisabled ? `Click to show ${person.displayName || person.pubkey}` : `Click to hide ${person.displayName || person.pubkey}`}
+                    aria-pressed={!isDisabled}
                   >
                     <div class="flex items-center">
                       <span
                         class="inline-block w-3.5 h-3.5 rotate-45 border-2 border-white"
                         style="background-color: {person.isFromFollowList ? getEventKindColor(3) : '#10B981'}; opacity: {isDisabled ? 0.3 : 1};"
-                        />
+                      ></span>
                     </div>
                     <span class="text-xs text-gray-700 dark:text-gray-300" style="opacity: {isDisabled ? 0.5 : 1};">
-                        {person.displayName || person.pubkey.slice(0, 8) + '...'}
-                        {#if !isDisabled}
-                          <span class="text-gray-500 dark:text-gray-400">
-                            ({person.signedByCount || 0}s/{person.referencedCount || 0}r)
-                          </span>
-                        {/if}
+                      {person.displayName || person.pubkey.substring(0, 8)}
                     </span>
                   </button>
                 {/each}
               </div>
-            {:else if showPersonNodes}
-              <p class="text-xs text-gray-500 dark:text-gray-400">
-                No people found in the current events.
-              </p>
             {/if}
           </div>
         {/if}

src/lib/navigator/EventNetwork/Settings.svelte

@@ -42,7 +42,13 @@
 </script>
 
 <div class="leather-legend sm:!right-1 sm:!left-auto">
-  <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}>
+  <button 
+    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 w-full text-left border-none bg-none"
+    onclick={toggle}
+    onkeydown={(e) => e.key === 'Enter' || e.key === ' ' ? toggle() : null}
+    aria-expanded={expanded}
+    aria-controls="settings-content"
+  >
     <h3 class="h-leather">Settings</h3>
     <div class="pointer-events-none">
       {#if expanded}
@@ -51,10 +57,10 @@
         <CaretDownOutline />
       {/if}
     </div>
-  </div>
+  </button>
 
   {#if expanded}
-    <div class="space-y-4">
+    <div id="settings-content" class="space-y-4">
       <span class="leather bg-transparent legend-text">
         Showing {count} of {totalCount} events
       </span>
@@ -63,9 +69,12 @@
       <div
         class="settings-section border-b border-gray-200 dark:border-gray-700 pb-4 mb-4 last:border-b-0 last:mb-0"
       >
-        <div
-          class="settings-section-header flex justify-between items-center cursor-pointer py-2 mb-3 hover:bg-gray-50 dark:hover:bg-white/5 hover:rounded-md hover:px-2"
+        <button
+          class="settings-section-header flex justify-between items-center cursor-pointer py-2 mb-3 hover:bg-gray-50 dark:hover:bg-white/5 hover:rounded-md hover:px-2 w-full text-left border-none bg-none"
           onclick={toggleEventTypes}
+          onkeydown={(e) => e.key === 'Enter' || e.key === ' ' ? toggleEventTypes() : null}
+          aria-expanded={eventTypesExpanded}
+          aria-controls="event-types-content"
         >
           <h4 class="settings-section-title font-semibold text-gray-700 dark:text-gray-300 m-0 text-sm">
             Event Configuration
@@ -77,21 +86,24 @@
               <CaretDownOutline class="w-3 h-3" />
             {/if}
           </div>
-        </div>
+        </button>
         {#if eventTypesExpanded}
+          <div id="event-types-content">
             <EventTypeConfig onReload={onupdate} {eventCounts} {profileStats} />
+          </div>
         {/if}
       </div>
 
-
-
       <!-- Visual Settings Section -->
       <div
         class="settings-section border-b border-gray-200 dark:border-gray-700 pb-4 mb-4 last:border-b-0 last:mb-0"
       >
-        <div
-          class="settings-section-header flex justify-between items-center cursor-pointer py-2 mb-3 hover:bg-gray-50 dark:hover:bg-white/5 hover:rounded-md hover:px-2"
+        <button
+          class="settings-section-header flex justify-between items-center cursor-pointer py-2 mb-3 hover:bg-gray-50 dark:hover:bg-white/5 hover:rounded-md hover:px-2 w-full text-left border-none bg-none"
           onclick={toggleVisualSettings}
+          onkeydown={(e) => e.key === 'Enter' || e.key === ' ' ? toggleVisualSettings() : null}
+          aria-expanded={visualSettingsExpanded}
+          aria-controls="visual-settings-content"
         >
           <h4 class="settings-section-title font-semibold text-gray-700 dark:text-gray-300 m-0 text-sm">
             Visual Settings
@@ -103,9 +115,9 @@
               <CaretDownOutline class="w-3 h-3" />
             {/if}
           </div>
-        </div>
+        </button>
         {#if visualSettingsExpanded}
-        
+          <div id="visual-settings-content">
             <div class="space-y-4">
               <div class="space-y-2">
                 <label
@@ -126,9 +138,8 @@
                   visualization
                 </p>
               </div>
-          
             </div>
-
+          </div>
         {/if}
       </div>
     </div>

src/lib/navigator/EventNetwork/TagTable.svelte

@@ -12,12 +12,12 @@
   }>();
 
   // Computed property for unique tags
-  let uniqueTags = $derived(() => {
-    const tagMap = new Map();
+  let uniqueTags = $derived.by(() => {
+    const tagMap = new Map<string, { value: string; count: number; firstEvent: string }>();
     
-    events.forEach(event => {
+    events.forEach((event: NDKEvent) => {
       const tags = event.tags || [];
-      tags.forEach(tag => {
+      tags.forEach((tag: string[]) => {
         if (tag[0] === selectedTagType) {
           const tagValue = tag[1];
           const count = tagMap.get(tagValue)?.count || 0;

src/lib/navigator/EventNetwork/utils/personNetworkBuilder.ts

@@ -293,13 +293,15 @@ export function createPersonLinks(
         connectionType = 'referenced';
       }
 
-      return {
+      const link: PersonLink = {
         source: anchor,
         target: node,
         isSequential: false,
         connectionType,
       };
-    }).filter(Boolean); // Remove undefineds
+      
+      return link;
+    }).filter((link): link is PersonLink => link !== undefined); // Remove undefineds and type guard
   });
 
   debug("Created person links", { linkCount: links.length });

src/lib/stores/index.ts

@@ -1,2 +0,0 @@
-export * from './relayStore';
-export * from './displayLimits';

src/lib/utils/nostr_identifiers.ts

@@ -1,9 +1,9 @@
 import { VALIDATION } from './search_constants';
-import type { NostrEventId } from './nostr_identifiers';
 
 /**
  * Nostr identifier types
  */
+export type NostrEventId = string; // 64-character hex string
 export type NostrCoordinate = string; // kind:pubkey:d-tag format
 export type NostrIdentifier = NostrEventId | NostrCoordinate;
 

src/lib/utils/websocket_utils.ts

@@ -27,7 +27,7 @@ export async function fetchNostrEvent(filter: NostrFilter): Promise<NostrEvent>
   const ws = await WebSocketPool.instance.acquire("wss://thecitadel.nostr1.com");
   const subId = crypto.randomUUID();
 
-  const res = new Promise<NostrEvent | null>((resolve, reject) => {
+  const res = new Promise<NostrEvent>((resolve, reject) => {
     ws.addEventListener("message", (ev) => {
       const data = JSON.parse(ev.data);
 
@@ -42,7 +42,7 @@ export async function fetchNostrEvent(filter: NostrFilter): Promise<NostrEvent>
           reject(new Error(`[WebSocket Utils]: Subscription ${subId} closed`));
           break;
         case "EOSE":
-          resolve(null);
+          reject(new Error(`[WebSocket Utils]: Event not found`));
           break;
       }
 

src/routes/publication/[type]/[identifier]/+layout.server.ts

@@ -1,6 +1,7 @@
 import { error } from "@sveltejs/kit";
 import type { LayoutServerLoad } from "./$types";
-import { fetchEventByDTag, fetchEventById, fetchEventByNaddr, fetchEventByNevent, NostrEvent } from "../../../../lib/utils/websocket_utils.ts";
+import { fetchEventByDTag, fetchEventById, fetchEventByNaddr, fetchEventByNevent } from "../../../../lib/utils/websocket_utils.ts";
+import type { NostrEvent } from "../../../../lib/utils/websocket_utils.ts";
 
 export const load: LayoutServerLoad = async ({ params, url }) => {
   const { type, identifier } = params;

src/routes/publication/[type]/[identifier]/+page.server.ts

@@ -1,6 +1,7 @@
 import { error } from "@sveltejs/kit";
 import type { PageServerLoad } from "./$types";
-import { fetchEventByDTag, fetchEventById, fetchEventByNaddr, fetchEventByNevent, NostrEvent } from "../../../../lib/utils/websocket_utils.ts";
+import { fetchEventByDTag, fetchEventById, fetchEventByNaddr, fetchEventByNevent } from "../../../../lib/utils/websocket_utils.ts";
+import type { NostrEvent } from "../../../../lib/utils/websocket_utils.ts";
 
 export const load: PageServerLoad = async ({ params }) => {
   const { type, identifier } = params;