refactor: added enum NostrKind, remove EventLimitControl

src/lib/components/EventKindFilter.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-  import { visualizationConfig } from '$lib/stores/visualizationConfig';
+  import { visualizationConfig, enabledEventKinds } from '$lib/stores/visualizationConfig';
   import { Button, Badge } from 'flowbite-svelte';
   import { CloseCircleOutline } from 'flowbite-svelte-icons';
   import type { EventCounts } from "$lib/types";
+  import { NostrKind } from '$lib/types';
   
   let {
     onReload = () => {},
@@ -17,7 +18,6 @@
   let inputError = $state('');
 
   function validateKind(value: string | number): number | null {
-    // Convert to string for consistent handling
     const strValue = String(value);
     if (!strValue || strValue.trim() === '') {
       inputError = '';
@@ -32,7 +32,7 @@
       inputError = 'Must be positive';
       return null;
     }
-    if ($visualizationConfig.allowedKinds.includes(kind)) {
+    if ($visualizationConfig.eventConfigs.some(ec => ec.kind === kind)) {
       inputError = 'Already added';
       return null;
     }
@@ -41,16 +41,9 @@
   }
 
   function handleAddKind() {
-    console.log('[EventKindFilter] handleAddKind called with:', newKind);
     const kind = validateKind(newKind);
-    console.log('[EventKindFilter] Validation result:', kind);
     if (kind !== null) {
-      console.log('[EventKindFilter] Before adding, allowedKinds:', $visualizationConfig.allowedKinds);
-      visualizationConfig.addKind(kind);
-      // Force a small delay to ensure store update propagates
-      setTimeout(() => {
-        console.log('[EventKindFilter] After adding, allowedKinds:', $visualizationConfig.allowedKinds);
-      }, 10);
+      visualizationConfig.addEventKind(kind);
       newKind = '';
       showAddInput = false;
       inputError = '';
@@ -68,21 +61,20 @@
   }
 
   function removeKind(kind: number) {
-    visualizationConfig.removeKind(kind);
+    visualizationConfig.removeEventKind(kind);
   }
 
   function toggleKind(kind: number) {
     visualizationConfig.toggleKind(kind);
   }
 
-  // Get kind name for display
   function getKindName(kind: number): string {
     switch (kind) {
-      case 30040: return 'Publication Index';
-      case 30041: return 'Publication Content';
-      case 30818: return 'Wiki';
-      case 1: return 'Text Note';
-      case 0: return 'Metadata';
+      case NostrKind.PublicationIndex: return 'Publication Index';
+      case NostrKind.PublicationContent: return 'Publication Content';
+      case NostrKind.Wiki: return 'Wiki';
+      case NostrKind.TextNote: return 'Text Note';
+      case NostrKind.UserMetadata: return 'Metadata';
       default: return `Kind ${kind}`;
     }
   }
@@ -90,30 +82,30 @@
 
 <div class="space-y-3">
   <div class="flex flex-wrap gap-2 items-center">
-    {#each $visualizationConfig.allowedKinds as kind}
-      {@const isDisabled = $visualizationConfig.disabledKinds.includes(kind)}
-      {@const isLoaded = (eventCounts[kind] || 0) > 0}
+    {#each $visualizationConfig.eventConfigs as ec}
+      {@const isEnabled = ec.enabled !== false}
+      {@const isLoaded = (eventCounts[ec.kind] || 0) > 0}
       {@const borderColor = isLoaded ? 'border-green-500' : 'border-red-500'}
       <button
-        class="badge-container {isDisabled ? 'disabled' : ''} {isLoaded ? 'loaded' : 'not-loaded'}"
-        onclick={() => toggleKind(kind)}
-        title={isDisabled ? `Click to enable ${getKindName(kind)}` : `Click to disable ${getKindName(kind)}`}
+        class="badge-container {isEnabled ? '' : 'disabled'} {isLoaded ? 'loaded' : 'not-loaded'}"
+        onclick={() => toggleKind(ec.kind)}
+        title={isEnabled ? `Click to disable ${getKindName(ec.kind)}` : `Click to enable ${getKindName(ec.kind)}`}
       >
         <Badge 
           color="dark" 
-          class="flex items-center gap-1 px-2 py-1 {isDisabled ? 'opacity-40' : ''} border-2 {borderColor}"
+          class="flex items-center gap-1 px-2 py-1 {isEnabled ? '' : 'opacity-40'} border-2 {borderColor}"
         >
-          <span class="text-xs">{kind}</span>
+          <span class="text-xs">{ec.kind}</span>
           {#if isLoaded}
-            <span class="text-xs text-gray-400">({eventCounts[kind]})</span>
+            <span class="text-xs text-gray-400">({eventCounts[ec.kind]})</span>
           {/if}
           <button
             onclick={(e) => {
               e.stopPropagation();
-              removeKind(kind);
+              removeKind(ec.kind);
             }}
             class="ml-1 text-red-500 hover:text-red-700 transition-colors"
-            title="Remove {getKindName(kind)}"
+            title="Remove {getKindName(ec.kind)}"
           >
             <CloseCircleOutline class="w-3 h-3" />
           </button>
@@ -192,17 +184,6 @@
       <span>Red border = Not loaded (click Reload to fetch)</span>
     </p>
   </div>
-  
-  <label class="flex items-center gap-2 text-xs">
-    <input
-      type="checkbox"
-      checked={$visualizationConfig.allowFreeEvents}
-      onchange={() => visualizationConfig.toggleFreeEvents()}
-      class="rounded dark:bg-gray-700 dark:border-gray-600"
-    />
-    <span>Allow free events <span class="text-orange-500 font-normal">(not tested)</span></span>
-    <span class="text-gray-500 dark:text-gray-400">(not connected to 30040)</span>
-  </label>
 </div>
 
 <style>

src/lib/components/EventLimitControl.svelte

@@ -1,52 +0,0 @@
-<script lang="ts">
-  import { networkFetchLimit } from "$lib/state";
-  import { createEventDispatcher } from "svelte";
-
-  const dispatch = createEventDispatcher<{
-    update: { limit: number };
-  }>();
-
-  let inputValue = $networkFetchLimit;
-
-  function handleInput(event: Event) {
-    const input = event.target as HTMLInputElement;
-    const value = parseInt(input.value);
-    // Ensure value is between 1 and 50
-    if (value >= 1 && value <= 50) {
-      inputValue = value;
-    }
-  }
-
-  function handleUpdate() {
-    $networkFetchLimit = inputValue;
-    dispatch("update", { limit: inputValue });
-  }
-
-  function handleKeyDown(event: KeyboardEvent) {
-    if (event.key === "Enter") {
-      handleUpdate();
-    }
-  }
-</script>
-
-<div class="flex items-center gap-2 mb-4">
-  <label for="event-limit" class="leather bg-transparent text-sm font-medium"
-    >Number of root events:
-  </label>
-  <input
-    type="number"
-    id="event-limit"
-    min="1"
-    max="200"
-    class="w-20 bg-primary-0 dark:bg-primary-1000 border border-gray-300 dark:border-gray-700 rounded-md px-2 py-1 dark:text-white"
-    bind:value={inputValue}
-    on:input={handleInput}
-    on:keydown={handleKeyDown}
-  />
-  <button
-    on:click={handleUpdate}
-    class="btn-leather px-3 py-1 bg-primary-0 dark:bg-primary-1000 border border-gray-400 dark:border-gray-600 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800"
-  >
-    Update
-  </button>
-</div>

src/lib/navigator/EventNetwork/Legend.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { CaretDownOutline, CaretUpOutline } from "flowbite-svelte-icons";
   import { getEventKindColor, getEventKindName } from '$lib/utils/eventColors';
+  import type { EventCounts } from "$lib/types";
 
   const TAG_LEGEND_COLUMNS = 3; // Number of columns for tag anchor table
   let {
@@ -31,7 +32,7 @@
     starMode?: boolean;
     showTags?: boolean;
     tagAnchors?: any[];
-    eventCounts?: { [kind: number]: number };
+    eventCounts?: EventCounts;
     disabledTags?: Set<string>;
     onTagToggle?: (tagId: string) => void;
     autoDisabledTags?: boolean;

src/lib/types.ts

@@ -15,3 +15,19 @@ export type TabType =
   | "editor";
 
 export type EventCounts = { [kind: number]: number };
+
+/**
+ * Enum of Nostr event kinds relevant to Alexandria.
+ */
+export enum NostrKind {
+  /** User metadata event (kind 0) */
+  UserMetadata = 0,
+  /** Text note event (kind 1) */
+  TextNote = 1,
+  /** Publication index event (kind 30040) */
+  PublicationIndex = 30040,
+  /** Publication content event (kind 30041) */
+  PublicationContent = 30041,
+  /** Wiki event (kind 30818) */
+  Wiki = 30818,
+}