fixed thread drawer

public/healthz.json

@@ -2,7 +2,7 @@
   "status": "ok",
   "service": "aitherboard",
   "version": "0.1.0",
-  "buildTime": "2026-02-03T15:56:04.366Z",
+  "buildTime": "2026-02-04T04:42:40.028Z",
   "gitCommit": "unknown",
-  "timestamp": 1770134164366
+  "timestamp": 1770180160028
 }

src/lib/components/layout/Header.svelte

@@ -35,24 +35,28 @@
   <!-- Navigation -->
   <nav class="bg-fog-surface/95 dark:bg-fog-dark-surface/95 backdrop-blur-sm border-b border-fog-border dark:border-fog-dark-border px-4 py-3">
     <div class="flex flex-wrap items-center justify-between gap-2 max-w-7xl mx-auto">
-      <a href="/" class="text-xl font-semibold text-fog-text dark:text-fog-dark-text hover:text-fog-text-light dark:hover:text-fog-dark-text-light transition-colors">Aitherboard</a>
       <div class="flex flex-wrap gap-2 sm:gap-4 items-center text-sm">
+        <a href="/" class="text-xl font-semibold text-fog-text dark:text-fog-dark-text hover:text-fog-text-light dark:hover:text-fog-dark-text-light transition-colors">Aitherboard</a>
         <a href="/" class="text-fog-text dark:text-fog-dark-text hover:text-fog-accent dark:hover:text-fog-dark-accent transition-colors">Threads</a>
         <a href="/feed" class="text-fog-text dark:text-fog-dark-text hover:text-fog-accent dark:hover:text-fog-dark-accent transition-colors">Feed</a>
+      </div>
+      <div class="flex flex-wrap gap-2 sm:gap-4 items-center text-sm">
         {#if isLoggedIn && currentPubkey}
+          <UserPreferences />
+          <ThemeToggle />
+          <ProfileBadge pubkey={currentPubkey} />
           <button 
             onclick={() => sessionManager.clearSession()}
-            class="px-3 py-1 rounded border border-fog-border dark:border-fog-dark-border bg-fog-post dark:bg-fog-dark-post hover:bg-fog-highlight dark:hover:bg-fog-dark-highlight text-fog-text dark:text-fog-dark-text transition-colors"
+            class="px-3 py-1 rounded border border-fog-border dark:border-fog-dark-border bg-fog-post dark:bg-fog-dark-post text-fog-text dark:text-fog-dark-text hover:bg-fog-highlight dark:hover:bg-fog-dark-highlight transition-colors"
+            title="Logout"
+            aria-label="Logout"
           >
-            Logout
+            <span class="emoji emoji-grayscale">🚪</span>
           </button>
         {:else}
           <a href="/login" class="text-fog-text dark:text-fog-dark-text hover:text-fog-accent dark:hover:text-fog-dark-accent transition-colors">Login</a>
-        {/if}
           <UserPreferences />
           <ThemeToggle />
-        {#if isLoggedIn && currentPubkey}
-          <ProfileBadge pubkey={currentPubkey} />
         {/if}
       </div>
     </div>
@@ -68,6 +72,20 @@
     min-width: 0; /* Allow flex items to shrink */
   }
   
+  .emoji {
+    font-size: 1rem;
+    line-height: 1;
+    opacity: 0.7;
+  }
+
+  .emoji-grayscale {
+    filter: grayscale(100%);
+  }
+
+  button:hover .emoji-grayscale {
+    filter: grayscale(80%);
+  }
+
   @media (max-width: 768px) {
     nav {
       padding: 0.5rem 0.75rem; /* Smaller padding on mobile */

src/lib/components/preferences/ThemeToggle.svelte

@@ -33,5 +33,15 @@
   aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
   title={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
 >
-  <span class="emoji">{#if isDark}☀️{:else}🌙{/if}</span>
+  <span class="emoji emoji-grayscale">{#if isDark}☀️{:else}🌙{/if}</span>
 </button>
+
+<style>
+  .emoji-grayscale {
+    filter: grayscale(100%);
+  }
+
+  button:hover .emoji-grayscale {
+    filter: grayscale(80%);
+  }
+</style>

src/lib/components/preferences/UserPreferences.svelte

@@ -196,6 +196,11 @@
     font-size: 1rem;
     line-height: 1;
     opacity: 0.7;
+    filter: grayscale(100%);
+  }
+
+  button:hover .emoji {
+    filter: grayscale(80%);
   }
 
   .preferences-modal {

src/lib/modules/feed/FeedPage.svelte

@@ -37,14 +37,17 @@
   let observer: IntersectionObserver | null = null;
   let subscriptionId: string | null = $state(null);
   let refreshInterval: ReturnType<typeof setInterval> | null = null;
+  let subscriptionSetup = $state(false); // Track if subscription is already set up
 
   onMount(async () => {
     await nostrClient.initialize();
     await loadFeed();
-    // Set up persistent subscription for new events
+    // Set up persistent subscription for new events (only once)
+    if (!subscriptionSetup) {
       setupSubscription();
-    // Also set up periodic refresh as fallback (every 30 seconds)
       setupPeriodicRefresh();
+      subscriptionSetup = true;
+    }
   });
   
   // Cleanup subscription on unmount
@@ -54,6 +57,11 @@
         nostrClient.unsubscribe(subscriptionId);
         subscriptionId = null;
       }
+      if (refreshInterval) {
+        clearInterval(refreshInterval);
+        refreshInterval = null;
+      }
+      subscriptionSetup = false;
     };
   });
 
@@ -196,7 +204,7 @@
       const config = nostrClient.getConfig();
       const relays = relayManager.getFeedReadRelays();
       
-      // Load initial feed - use cache for fast initial load, but also query relays
+      // Load initial feed - use cache for fast initial load
       const filters = [{ kinds: [1], limit: 20 }];
       const events = await nostrClient.fetchEvents(
         filters,
@@ -204,23 +212,32 @@
         {
           useCache: true, // Use cache for fast initial display
           cacheResults: true,
-          onUpdate: handleUpdate, // This will be called when new events arrive from subscription
+          // Don't use onUpdate here - subscriptions handle updates
           timeout: 10000
         }
       );
 
-      // Also immediately query relays to ensure we get fresh data
-      // This runs in parallel and updates via onUpdate callback
+      // Also immediately query relays to ensure we get fresh data in background
+      // This runs in parallel but doesn't use onUpdate to avoid loops
       nostrClient.fetchEvents(
         filters,
         relays,
         {
           useCache: false, // Force query relays
           cacheResults: true,
-          onUpdate: handleUpdate,
+          // Don't use onUpdate - let subscriptions handle it
           timeout: 10000
         }
-      ).catch(error => {
+      ).then((newEvents) => {
+        // Only update if we got new events that aren't already in posts
+        if (newEvents.length > 0) {
+          const existingIds = new Set(posts.map(p => p.id));
+          const trulyNew = newEvents.filter(e => !existingIds.has(e.id));
+          if (trulyNew.length > 0) {
+            handleUpdate(trulyNew);
+          }
+        }
+      }).catch(error => {
         console.debug('[FeedPage] Background relay query error:', error);
       });
 
@@ -314,52 +331,65 @@
     }
   }
 
-  // Debounced update handler to prevent rapid re-renders
+  // Debounced update handler to prevent rapid re-renders and loops
   function handleUpdate(updated: NostrEvent[]) {
-    console.log(`[FeedPage] handleUpdate called with ${updated.length} events, current posts: ${posts.length}`);
+    if (!updated || updated.length === 0) return;
     
     // Deduplicate incoming updates before adding to pending
     const existingIds = new Set(posts.map(p => p.id));
-    const newUpdates = updated.filter(e => !existingIds.has(e.id));
+    const newUpdates = updated.filter(e => e && e.id && !existingIds.has(e.id));
     
     if (newUpdates.length === 0) {
-      console.debug(`[FeedPage] All ${updated.length} events were duplicates, skipping`);
-      return;
+      return; // All duplicates, skip silently
     }
     
     // Also deduplicate within pendingUpdates
     const pendingIds = new Set(pendingUpdates.map(e => e.id));
     const trulyNew = newUpdates.filter(e => !pendingIds.has(e.id));
+    
+    if (trulyNew.length === 0) {
+      return; // Already in pending, skip silently
+    }
+    
     pendingUpdates.push(...trulyNew);
     
     if (updateTimeout) {
       clearTimeout(updateTimeout);
     }
     
-    // Batch updates every 500ms
+    // Batch updates every 500ms to prevent rapid re-renders
     updateTimeout = setTimeout(() => {
-      if (pendingUpdates.length === 0) return;
+      if (pendingUpdates.length === 0) {
+        return;
+      }
       
-      // Final deduplication check against current posts
+      // Final deduplication check against current posts (posts may have changed)
       const currentIds = new Set(posts.map(p => p.id));
-      const newEvents = pendingUpdates.filter(e => !currentIds.has(e.id));
+      const newEvents = pendingUpdates.filter(e => e && e.id && !currentIds.has(e.id));
+      
+      if (newEvents.length === 0) {
+        pendingUpdates = [];
+        return;
+      }
       
       console.log(`[FeedPage] Processing ${newEvents.length} new events, existing: ${posts.length}`);
       
-      if (newEvents.length > 0) {
       // Merge and sort, then deduplicate by ID
       const merged = [...posts, ...newEvents];
       // Deduplicate by ID (keep first occurrence)
       const uniqueMap = new Map<string, NostrEvent>();
       for (const event of merged) {
-          if (!uniqueMap.has(event.id)) {
+        if (event && event.id && !uniqueMap.has(event.id)) {
           uniqueMap.set(event.id, event);
         }
       }
       const unique = Array.from(uniqueMap.values());
       const sorted = unique.sort((a, b) => b.created_at - a.created_at);
-        console.log(`[FeedPage] Setting posts to ${sorted.length} events (deduplicated from ${merged.length})`);
+      
+      // Only update if we actually have new events to prevent loops
+      if (sorted.length > posts.length || sorted.some((e, i) => e.id !== posts[i]?.id)) {
         posts = sorted;
+        console.debug(`[FeedPage] Updated posts to ${sorted.length} events`);
       }
       
       pendingUpdates = [];

src/lib/modules/feed/ThreadDrawer.svelte

@@ -1,325 +1,127 @@
 <script lang="ts">
-  import { fade, slide } from 'svelte/transition';
   import FeedPost from './FeedPost.svelte';
   import CommentThread from '../comments/CommentThread.svelte';
   import { nostrClient } from '../../services/nostr/nostr-client.js';
   import { relayManager } from '../../services/nostr/relay-manager.js';
+  import { onMount } from 'svelte';
   import type { NostrEvent } from '../../types/nostr.js';
 
   interface Props {
-    opEvent: NostrEvent | null; // The event that was clicked
+    opEvent: NostrEvent | null;
     isOpen: boolean;
     onClose: () => void;
   }
 
   let { opEvent, isOpen, onClose }: Props = $props();
 
+  let drawerElement: HTMLElement | null = $state(null);
   let loading = $state(false);
-  let rootEvent = $state<NostrEvent | null>(null);
-  let rootReactions = $state<NostrEvent[]>([]); // Reactions for the root event
+  let subscriptionId: string | null = $state(null);
+  let isInitialized = $state(false);
 
-  // Load root event and subscribe to updates when drawer opens
-  $effect(() => {
-    if (isOpen && opEvent) {
-      // Hide main page scrollbar when drawer is open
-      const originalOverflow = document.body.style.overflow;
-      document.body.style.overflow = 'hidden';
-      
-      loadRootEvent().then(() => {
-        // Only subscribe after rootEvent is loaded
-        if (rootEvent) {
-          subscribeToUpdates();
+  // Initialize nostr client once
+  onMount(async () => {
+    if (!isInitialized) {
+      await nostrClient.initialize();
+      isInitialized = true;
     }
   });
 
-      // Cleanup on close
-      return () => {
-        document.body.style.overflow = originalOverflow;
-        rootEvent = null;
-        rootReactions = [];
-      };
-    } else {
-      // Reset when closed and restore scrollbar
-      document.body.style.overflow = '';
-      rootEvent = null;
-      rootReactions = [];
-    }
-  });
-
-  /**
-   * Find the root OP event by traversing up the reply chain
-   * Uses a visited set to prevent infinite loops
-   * Optimized to use cache-first lookup for speed
-   */
-  async function findRootEvent(event: NostrEvent, visited: Set<string> = new Set()): Promise<NostrEvent> {
-    // Prevent infinite loops
-    if (visited.has(event.id)) {
-      return event;
-    }
-    visited.add(event.id);
-
-    // Check for 'root' tag first (NIP-10) - this directly points to the root
-    const rootTag = event.tags.find((t) => t[0] === 'root');
-    if (rootTag && rootTag[1]) {
-      // If root tag points to self, we're already at root
-      if (rootTag[1] === event.id) {
-        return event;
-      }
-      
-      // Use getEventById which checks cache first, only hits network if not found
-      const relays = relayManager.getFeedReadRelays();
-      const rootEvent = await nostrClient.getEventById(rootTag[1], relays);
-      if (rootEvent) {
-        return rootEvent;
-      }
-    }
-
-    // Check if this event has a parent 'e' tag (NIP-10)
-    // Look for 'e' tag with 'reply' marker, or any 'e' tag that's not self
-    const eTags = event.tags.filter((t) => t[0] === 'e' && t[1] && t[1] !== event.id);
-    
-    // Prefer 'e' tag with 'reply' marker (NIP-10)
-    let parentId: string | undefined;
-    const replyTag = eTags.find((t) => t[3] === 'reply');
-    if (replyTag) {
-      parentId = replyTag[1];
-    } else if (eTags.length > 0) {
-      // Use first 'e' tag if no explicit reply marker
-      parentId = eTags[0][1];
-    }
-
-    if (!parentId) {
-      // No parent - this is the root
-      return event;
-    }
-
-    // Use getEventById which checks cache first, only hits network if not found
-    const relays = relayManager.getFeedReadRelays();
-    const parent = await nostrClient.getEventById(parentId, relays);
-
-    if (!parent) {
-      // Parent not found - treat current event as root
-      return event;
-    }
-    
-    // Recursively find root
-    return findRootEvent(parent, visited);
-  }
-
-  async function loadRootEvent() {
-    if (!opEvent) return;
-    
-    // Always set loading initially to prevent empty panel
-    loading = true;
-    
-    try {
-      // Find the root OP event by traversing up the chain
-      rootEvent = await findRootEvent(opEvent);
-      
-      if (!rootEvent) {
-        // Fallback to opEvent if root not found
-        rootEvent = opEvent;
-      }
-      
-      // Try to load reactions from cache first
-      const reactionRelays = relayManager.getProfileReadRelays();
-      try {
-        const cachedReactions = await nostrClient.fetchEvents(
-          [{ kinds: [7], '#e': [rootEvent.id] }],
-          reactionRelays,
-          { useCache: true, cacheResults: false, timeout: 100 }
-        );
-        if (cachedReactions.length > 0) {
-          rootReactions = cachedReactions;
-          loading = false; // Show content immediately with cached reactions
-          // Load fresh reactions in background
-          loadRootReactions();
-          return;
-        }
-      } catch (error) {
-        // Cache check failed, continue to full load
-      }
-      
-      // No cached reactions - load fresh
-      await loadRootReactions();
-      loading = false;
-    } catch (error) {
-      console.error('Error loading root event:', error);
-      // Ensure we have at least the opEvent to show
-      if (!rootEvent && opEvent) {
-        rootEvent = opEvent;
-      }
+  // Handle drawer open/close - only load when opening
+  $effect(() => {
+    if (isOpen && opEvent && isInitialized) {
+      // Drawer opened - reset loading state
       loading = false;
-    }
-  }
-
-  async function loadRootReactions() {
-    if (!rootEvent) return;
-    
-    try {
-      const reactionRelays = relayManager.getProfileReadRelays();
-      const initialReactions = await nostrClient.fetchEvents(
-        [{ kinds: [7], '#e': [rootEvent.id] }],
-        reactionRelays,
-        { useCache: true, cacheResults: true }
-      );
-      rootReactions = initialReactions;
-    } catch (error) {
-      console.error('Error loading root reactions:', error);
-    }
-  }
-
-  function subscribeToUpdates() {
-    if (!rootEvent) return;
-    
-    const reactionRelays = relayManager.getProfileReadRelays();
-    const commentRelays = relayManager.getCommentReadRelays();
-    const zapRelays = relayManager.getZapReceiptReadRelays();
       
-    // Subscribe to reactions for the root event
-    nostrClient.fetchEvents(
-      [{ kinds: [7], '#e': [rootEvent.id] }],
-      reactionRelays,
-      {
-        useCache: true,
-        cacheResults: true,
-        onUpdate: (updated: NostrEvent[]) => {
-          // Batch updates to prevent flickering
-          requestAnimationFrame(() => {
-            // Add new reactions and update existing ones
-            const existingIds = new Set(rootReactions.map(r => r.id));
-            const hasNew = updated.some(r => !existingIds.has(r.id));
-            
-            if (hasNew) {
-              // Only update if there are actual changes
-              const updatedMap = new Map(rootReactions.map(r => [r.id, r]));
-              for (const reaction of updated) {
-                updatedMap.set(reaction.id, reaction);
-              }
-              rootReactions = Array.from(updatedMap.values());
+      // Cleanup subscription when drawer closes
+      return () => {
+        if (subscriptionId) {
+          nostrClient.unsubscribe(subscriptionId);
+          subscriptionId = null;
         }
-          });
+      };
+    } else if (!isOpen) {
+      // Drawer closed - cleanup
+      if (subscriptionId) {
+        nostrClient.unsubscribe(subscriptionId);
+        subscriptionId = null;
       }
     }
-    ).catch(error => {
-      console.error('Error subscribing to reactions:', error);
-    });
-    
-    // Subscribe to zap receipts for the root event
-    nostrClient.fetchEvents(
-      [{ kinds: [9735], '#e': [rootEvent.id] }],
-      zapRelays,
-      {
-        useCache: true,
-        cacheResults: true,
-        onUpdate: (updated: NostrEvent[]) => {
-          // Zap receipts are handled by FeedPost's internal subscription
-          // This subscription ensures we get updates
-        }
-      }
-    ).catch(error => {
-      console.error('Error subscribing to zap receipts:', error);
   });
 
-    // Subscribe to comments/replies for the thread
-    // CommentThread will handle its own updates, but we can also subscribe here
-    nostrClient.fetchEvents(
-      [
-        { kinds: [1111], '#e': [rootEvent.id] },
-        { kinds: [1111], '#E': [rootEvent.id] },
-        { kinds: [1], '#e': [rootEvent.id] },
-        { kinds: [1244], '#e': [rootEvent.id] },
-        { kinds: [9735], '#e': [rootEvent.id] }
-      ],
-      commentRelays,
-      {
-        useCache: true,
-        cacheResults: true,
-        onUpdate: (updated: NostrEvent[]) => {
-          // CommentThread will handle these updates via its own subscription
-          // This ensures we get updates even if CommentThread hasn't loaded yet
-        }
-      }
-    ).catch(error => {
-      console.error('Error subscribing to comments:', error);
-    });
-  }
-
-  function handleBackdropClick(e: MouseEvent) {
-    if (e.target === e.currentTarget) {
+  // Handle keyboard events
+  function handleKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Escape' && isOpen) {
       onClose();
     }
   }
 
-  function handleEscape(e: KeyboardEvent) {
-    if (e.key === 'Escape') {
+  // Handle backdrop click
+  function handleBackdropClick(e: MouseEvent) {
+    if (e.target === e.currentTarget) {
       onClose();
     }
   }
 
-  function handleBackdropWheel(e: WheelEvent) {
-    // Only prevent scrolling if the event target is the backdrop itself
-    // Allow scrolling on the drawer content
-    const target = e.target as HTMLElement;
-    if (target && target.classList.contains('drawer-backdrop')) {
-      e.preventDefault();
-      e.stopPropagation();
-    }
-  }
-  
-  function handleBackdropTouchMove(e: TouchEvent) {
-    // Only prevent touch scrolling if the event target is the backdrop itself
-    const target = e.target as HTMLElement;
-    if (target && target.classList.contains('drawer-backdrop')) {
-      e.preventDefault();
-      e.stopPropagation();
-    }
+  // Prevent body scroll when drawer is open
+  $effect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+      return () => {
+        document.body.style.overflow = '';
+      };
     }
+  });
 </script>
 
-<svelte:window onkeydown={handleEscape} />
-
-{#if isOpen}
+{#if isOpen && opEvent}
   <div 
     class="drawer-backdrop" 
     onclick={handleBackdropClick}
-    onwheel={handleBackdropWheel}
-    ontouchmove={handleBackdropTouchMove}
-    onkeydown={(e) => {
-      if (e.key === 'Escape') {
-        onClose();
-      }
-    }}
+    onkeydown={handleKeyDown}
     role="button"
     tabindex="0"
-    aria-label="Close drawer"
-    transition:fade={{ duration: 200 }}
+    aria-label="Close thread drawer"
+  ></div>
+  <div 
+    class="thread-drawer drawer-right" 
+    bind:this={drawerElement}
+    onkeydown={handleKeyDown}
+    role="dialog"
+    aria-modal="true"
+    aria-label="Thread drawer"
+    tabindex="-1"
   >
-    <div class="drawer" transition:slide={{ axis: 'x', duration: 300 }}>
     <div class="drawer-header">
-        <h2 class="drawer-title">Thread</h2>
-        <button class="close-button" onclick={onClose} aria-label="Close drawer">
+      <h3 class="drawer-title">Thread</h3>
+      <button
+        onclick={onClose}
+        class="drawer-close"
+        aria-label="Close thread drawer"
+        title="Close"
+      >
         ×
       </button>
     </div>
     
     <div class="drawer-content">
-        {#if loading && !rootEvent}
+      {#if loading}
+        <div class="loading-state">
           <p class="text-fog-text-light dark:text-fog-dark-text-light">Loading thread...</p>
-        {:else if rootEvent}
-          <!-- Display the root OP event -->
-          <div class="op-section">
-            <FeedPost post={rootEvent} reactions={rootReactions} />
+        </div>
+      {:else}
+        <div class="thread-content">
+          <!-- Display the OP event -->
+          <div class="op-post">
+            <FeedPost post={opEvent} />
           </div>
 
-          <!-- Display all replies using CommentThread -->
-          <div class="replies-section">
-            <CommentThread threadId={rootEvent.id} event={rootEvent} />
+          <!-- Display comments/replies -->
+          <div class="comments-section">
+            <CommentThread threadId={opEvent.id} event={opEvent} />
           </div>
-        {:else}
-          <p class="text-fog-text-light dark:text-fog-dark-text-light">Unable to load thread.</p>
-        {/if}
         </div>
+      {/if}
     </div>
   </div>
 {/if}
@@ -332,36 +134,42 @@
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.5);
-    z-index: 1000;
-    display: flex;
-    justify-content: flex-end;
-    overflow: hidden;
-    overscroll-behavior: contain;
+    z-index: 999;
+    animation: fadeIn 0.3s ease-out;
   }
   
-  /* Allow scrolling on drawer content */
-  .drawer-content {
-    touch-action: auto;
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
     }
-
-  :global(.dark) .drawer-backdrop {
-    background: rgba(0, 0, 0, 0.7);
   }
 
-  .drawer {
-    width: var(--content-width, 800px);
-    max-width: 100vw;
-    height: 100%;
+  .thread-drawer {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: min(600px, 90vw);
+    max-width: 600px;
     background: var(--fog-post, #ffffff);
-    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
+    border-left: 2px solid var(--fog-border, #cbd5e1);
+    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);
+    padding: 0;
+    z-index: 1000;
     display: flex;
     flex-direction: column;
     overflow: hidden;
+    animation: slideInRight 0.3s ease-out;
+    transform: translateX(0);
   }
   
-  :global(.dark) .drawer {
+  :global(.dark) .thread-drawer {
     background: var(--fog-dark-post, #1f2937);
-    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.3);
+    border-left-color: var(--fog-dark-border, #475569);
+    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.5);
   }
   
   .drawer-header {
@@ -370,6 +178,7 @@
     align-items: center;
     padding: 1rem;
     border-bottom: 1px solid var(--fog-border, #e5e7eb);
+    flex-shrink: 0;
   }
   
   :global(.dark) .drawer-header {
@@ -377,56 +186,81 @@
   }
   
   .drawer-title {
-    font-size: 1.25rem;
-    font-weight: 600;
     margin: 0;
-    color: var(--fog-text, #111827);
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: var(--fog-text, #1f2937);
   }
   
   :global(.dark) .drawer-title {
     color: var(--fog-dark-text, #f9fafb);
   }
   
-  .close-button {
-    background: none;
+  .drawer-close {
+    background: transparent;
     border: none;
-    font-size: 2rem;
+    font-size: 1.5rem;
     line-height: 1;
     cursor: pointer;
-    color: var(--fog-text-light, #6b7280);
-    padding: 0;
-    width: 2rem;
-    height: 2rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    color: var(--fog-text-light, #9ca3af);
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+    transition: all 0.2s;
+  }
+  
+  .drawer-close:hover {
+    background: var(--fog-highlight, #f3f4f6);
+    color: var(--fog-text, #1f2937);
   }
   
-  .close-button:hover {
-    color: var(--fog-text, #111827);
+  :global(.dark) .drawer-close {
+    color: var(--fog-dark-text-light, #6b7280);
   }
   
-  :global(.dark) .close-button:hover {
+  :global(.dark) .drawer-close:hover {
+    background: var(--fog-dark-highlight, #374151);
     color: var(--fog-dark-text, #f9fafb);
   }
   
+  @keyframes slideInRight {
+    from {
+      transform: translateX(100%);
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
+  
   .drawer-content {
-    flex: 1;
     overflow-y: auto;
-    padding: 1rem;
+    overflow-x: hidden;
+    flex: 1;
+    padding: 0;
+  }
+  
+  .loading-state {
+    padding: 2rem;
+    text-align: center;
   }
   
-  .op-section {
-    margin-bottom: 2rem;
-    padding-bottom: 1rem;
+  .thread-content {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .op-post {
+    padding: 1rem;
     border-bottom: 2px solid var(--fog-border, #e5e7eb);
+    flex-shrink: 0;
   }
   
-  :global(.dark) .op-section {
+  :global(.dark) .op-post {
     border-bottom-color: var(--fog-dark-border, #374151);
   }
   
-  .replies-section {
-    margin-top: 2rem;
+  .comments-section {
+    padding: 1rem;
+    flex: 1;
+    min-height: 0;
   }
 </style>

src/lib/modules/profiles/ProfilePage.svelte

@@ -20,7 +20,11 @@
   let interactionsWithMe = $state<NostrEvent[]>([]);
   let loading = $state(true);
   let activeTab = $state<'posts' | 'responses' | 'interactions'>('posts');
-  let nip05Validations = $state<Map<string, boolean | null>>(new Map()); // null = checking, true = valid, false = invalid
+  let nip05Validations = $state<Record<string, boolean | null>>({}); // null = checking, true = valid, false = invalid
+  
+  // Cache for NIP-05 validation results (nip05+pubkey -> result)
+  // This prevents re-validating the same NIP-05 address repeatedly
+  const nip05ValidationCache = new Map<string, boolean>();
   
   // Get current logged-in user's pubkey
   let currentUserPubkey = $state<string | null>(sessionManager.getCurrentPubkey());
@@ -65,22 +69,33 @@
     
     try {
       const interactionRelays = relayManager.getFeedResponseReadRelays();
-      // Fetch current user's posts to find replies
+      
+      // Fetch current user's posts from cache first (fast)
       const currentUserPosts = await nostrClient.fetchEvents(
         [{ kinds: [1], authors: [currentUserPubkey], limit: 50 }],
         interactionRelays,
-        { useCache: true, cacheResults: true }
+        { useCache: true, cacheResults: true, timeout: 2000 } // Short timeout for cache
       );
       const currentUserPostIds = new Set(currentUserPosts.map(p => p.id));
       
-      const interactionEvents = await nostrClient.fetchEvents(
+      // Only fetch interactions if we have some posts to check against
+      if (currentUserPostIds.size === 0) {
+        interactionsWithMe = [];
+        return;
+      }
+      
+      // Fetch interactions with timeout to prevent blocking
+      const interactionEvents = await Promise.race([
+        nostrClient.fetchEvents(
           [
-          { kinds: [1], authors: [profilePubkey], '#e': Array.from(currentUserPostIds), limit: 20 }, // Replies to current user's posts
-          { kinds: [1], authors: [profilePubkey], '#p': [currentUserPubkey], limit: 20 } // Mentions of current user
+            { kinds: [1], authors: [profilePubkey], '#e': Array.from(currentUserPostIds).slice(0, 20), limit: 20 }, // Limit IDs to avoid huge queries
+            { kinds: [1], authors: [profilePubkey], '#p': [currentUserPubkey], limit: 20 }
           ],
           interactionRelays,
-        { useCache: true, cacheResults: true }
-      );
+          { useCache: true, cacheResults: true, timeout: 5000 }
+        ),
+        new Promise<NostrEvent[]>((resolve) => setTimeout(() => resolve([]), 5000)) // 5s timeout
+      ]);
       
       // Deduplicate and filter to only include actual interactions
       const seenIds = new Set<string>();
@@ -101,7 +116,7 @@
         })
         .sort((a, b) => b.created_at - a.created_at);
     } catch (error) {
-      console.error('Error loading interactions with me:', error);
+      console.debug('Error loading interactions with me:', error);
       interactionsWithMe = [];
     }
   }
@@ -162,52 +177,127 @@
     return null;
   }
 
+  /**
+   * Get well-known.json URL for a NIP-05 address
+   * Uses URL constructor like jumble for proper URL building
+   */
+  function getNIP05WellKnownUrl(nip05: string): string | null {
+    const [localPart, domain] = nip05.split('@');
+    if (!localPart || !domain) {
+      return null;
+    }
+    const url = new URL('/.well-known/nostr.json', `https://${domain}`);
+    url.searchParams.set('name', localPart);
+    return url.toString();
+  }
+
   /**
    * Validate NIP-05 address against well-known.json
+   * Uses caching like jumble to avoid repeated lookups
    */
   async function validateNIP05(nip05: string, expectedPubkey: string) {
+    console.log(`[NIP-05] Starting validation for ${nip05} with pubkey ${expectedPubkey.substring(0, 8)}...`);
+    
+    // Check cache first (like jumble does)
+    const cacheKey = `${nip05}:${expectedPubkey}`;
+    if (nip05ValidationCache.has(cacheKey)) {
+      const cachedResult = nip05ValidationCache.get(cacheKey)!;
+      console.log(`[NIP-05] Cache hit for ${nip05}: ${cachedResult}`);
+      nip05Validations[nip05] = cachedResult;
+      return;
+    }
+    
     // Mark as checking
-    nip05Validations.set(nip05, null);
+    console.log(`[NIP-05] Cache miss, fetching for ${nip05}`);
+    nip05Validations[nip05] = null;
     
     try {
       // Parse NIP-05: format is "local@domain.com"
       const [localPart, domain] = nip05.split('@');
       if (!localPart || !domain) {
-        nip05Validations.set(nip05, false);
+        console.log(`[NIP-05] Invalid format for ${nip05}`);
+        nip05Validations[nip05] = false;
+        nip05ValidationCache.set(cacheKey, false);
+        return;
+      }
+
+      // Build URL using URL constructor (like jumble)
+      const url = getNIP05WellKnownUrl(nip05);
+      if (!url) {
+        console.log(`[NIP-05] Failed to build URL for ${nip05}`);
+        nip05Validations[nip05] = false;
+        nip05ValidationCache.set(cacheKey, false);
         return;
       }
       
-      // Fetch well-known JSON
-      // NIP-05 spec: https://[domain]/.well-known/nostr.json?name=[local]
-      const url = `https://${domain}/.well-known/nostr.json?name=${encodeURIComponent(localPart)}`;
+      console.log(`[NIP-05] Fetching ${url}`);
       
+      // Add timeout to prevent hanging
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => {
+        console.log(`[NIP-05] Timeout reached for ${nip05}`);
+        controller.abort();
+      }, 5000); // 5 second timeout
+      
+      try {
         const response = await fetch(url, {
           method: 'GET',
           headers: {
             'Accept': 'application/json'
-        }
+          },
+          signal: controller.signal
         });
 
+        clearTimeout(timeoutId);
+        console.log(`[NIP-05] Response status for ${nip05}: ${response.status}`);
+
         if (!response.ok) {
-        nip05Validations.set(nip05, false);
+          console.log(`[NIP-05] Response not OK for ${nip05}: ${response.status}`);
+          nip05Validations[nip05] = false;
+          nip05ValidationCache.set(cacheKey, false);
           return;
         }
 
-      const data = await response.json();
+        let data;
+        try {
+          data = await response.json();
+          console.log(`[NIP-05] Parsed JSON for ${nip05}:`, data);
+        } catch (jsonError) {
+          console.error(`[NIP-05] Failed to parse JSON for ${nip05}:`, jsonError);
+          nip05Validations[nip05] = false;
+          nip05ValidationCache.set(cacheKey, false);
+          return;
+        }
         
         // Check if the response contains the expected pubkey
         // NIP-05 format: { "names": { "local": "hex-pubkey" } }
-      if (data.names && data.names[localPart]) {
-        const verifiedPubkey = data.names[localPart].toLowerCase();
-        const expected = expectedPubkey.toLowerCase();
-        nip05Validations.set(nip05, verifiedPubkey === expected);
+        const verifiedPubkey = data.names?.[localPart];
+        const isValid = verifiedPubkey && typeof verifiedPubkey === 'string' 
+          ? verifiedPubkey.toLowerCase() === expectedPubkey.toLowerCase()
+          : false;
+        
+        console.log(`[NIP-05] Validation result for ${nip05}: ${isValid} (verified: ${verifiedPubkey}, expected: ${expectedPubkey.substring(0, 8)}...)`);
+        nip05Validations[nip05] = isValid;
+        nip05ValidationCache.set(cacheKey, isValid);
+      } catch (fetchError) {
+        clearTimeout(timeoutId);
+        // Check if it was aborted due to timeout
+        if (fetchError instanceof Error && fetchError.name === 'AbortError') {
+          console.log(`[NIP-05] Timeout/abort for ${nip05}`);
+          nip05Validations[nip05] = false;
+          nip05ValidationCache.set(cacheKey, false);
         } else {
-        nip05Validations.set(nip05, false);
+          console.error(`[NIP-05] Fetch error for ${nip05}:`, fetchError);
+          throw fetchError; // Re-throw other errors
+        }
       }
     } catch (error) {
-      console.error('Error validating NIP-05:', nip05, error);
-      nip05Validations.set(nip05, false);
+      console.error(`[NIP-05] Error validating ${nip05}:`, error);
+      nip05Validations[nip05] = false;
+      nip05ValidationCache.set(cacheKey, false);
     }
+    
+    console.log(`[NIP-05] Validation complete for ${nip05}`);
   }
 
   async function loadProfile() {
@@ -230,73 +320,71 @@
 
     loading = true;
     try {
-      console.log('Loading profile for pubkey:', pubkey, '(decoded from:', param + ')');
+      // Step 1: Load profile and status first (fast from cache) - display immediately
+      const [profileData, status] = await Promise.all([
+        fetchProfile(pubkey),
+        fetchUserStatus(pubkey)
+      ]);
       
-      // Load profile
-      const profileData = await fetchProfile(pubkey);
       profile = profileData;
-      console.log('Profile loaded:', profileData);
+      userStatus = status;
+      loading = false; // Show profile immediately, even if posts are still loading
       
-      // Validate NIP-05 addresses (async, don't wait)
+      // Validate NIP-05 addresses in background (non-blocking)
       if (profileData?.nip05 && profileData.nip05.length > 0) {
         for (const nip05 of profileData.nip05) {
-          // Validate in background - don't block page load
           validateNIP05(nip05, pubkey).catch(err => {
-            console.error('NIP-05 validation error:', err);
+            console.error('[NIP-05] Unhandled validation error:', nip05, err);
+            // Ensure state is set even on unhandled errors
+            nip05Validations[nip05] = false;
+            const cacheKey = `${nip05}:${pubkey}`;
+            nip05ValidationCache.set(cacheKey, false);
           });
         }
       }
 
-      // Load user status
-      const status = await fetchUserStatus(pubkey);
-      userStatus = status;
-
-      // Load kind 1 posts
+      // Step 2: Load posts and responses in parallel (non-blocking, update when ready)
       const profileRelays = relayManager.getProfileReadRelays();
+      const responseRelays = relayManager.getFeedResponseReadRelays();
+      
+      // Load posts first (needed for response filtering)
       const feedEvents = await nostrClient.fetchEvents(
         [{ kinds: [1], authors: [pubkey], limit: 20 }],
         profileRelays,
-        { useCache: true, cacheResults: true }
+        { useCache: true, cacheResults: true, timeout: 5000 }
       );
       posts = feedEvents.sort((a, b) => b.created_at - a.created_at);
 
-      // Load kind 1 responses (replies to this user's posts)
-      const responseRelays = relayManager.getFeedResponseReadRelays();
+      // Load responses in parallel with posts (but filter after posts are loaded)
+      const userPostIds = new Set(posts.map(p => p.id));
       const responseEvents = await nostrClient.fetchEvents(
-        [{ kinds: [1], '#p': [pubkey], limit: 20 }],
+        [{ kinds: [1], '#p': [pubkey], limit: 50 }], // Fetch more to account for filtering
         responseRelays,
-        { useCache: true, cacheResults: true }
+        { useCache: true, cacheResults: true, timeout: 5000 }
       );
-      // Filter to only include actual replies (have e tag pointing to user's posts)
-      // AND exclude self-replies (where author is the same as the profile owner)
-      const userPostIds = new Set(posts.map(p => p.id));
+      
+      // Filter responses (exclude self-replies, only include replies to user's posts)
       responses = responseEvents
         .filter(e => {
-          // Exclude self-replies
-          if (e.pubkey === pubkey) {
-            return false;
-          }
+          if (e.pubkey === pubkey) return false; // Exclude self-replies
           const eTag = e.tags.find(t => t[0] === 'e');
           return eTag && userPostIds.has(eTag[1]);
         })
-        .sort((a, b) => b.created_at - a.created_at);
+        .sort((a, b) => b.created_at - a.created_at)
+        .slice(0, 20); // Limit to 20 after filtering
 
-      // Load "Interactions with me" if user is logged in and viewing another user's profile
+      // Step 3: Load interactions in background (non-blocking)
       if (currentUserPubkey && currentUserPubkey !== pubkey) {
-        await loadInteractionsWithMe(pubkey, currentUserPubkey);
+        loadInteractionsWithMe(pubkey, currentUserPubkey).catch(err => {
+          console.debug('Error loading interactions:', err);
+        });
       } else {
         interactionsWithMe = [];
       }
     } catch (error) {
       console.error('Error loading profile:', error);
-      // Set loading to false even on error so UI can show error state
       loading = false;
-      profile = null; // Clear profile on error
-    } finally {
-      // Ensure loading is always set to false
-      if (loading) {
-      loading = false;
-      }
+      profile = null;
     }
   }
 </script>
@@ -339,13 +427,25 @@
       {#if profile.nip05 && profile.nip05.length > 0}
         <div class="nip05 mb-2">
           {#each profile.nip05 as nip05}
-            {@const isValid = nip05Validations.get(nip05)}
+            {@const isValid = nip05Validations[nip05]}
+            {@const wellKnownUrl = getNIP05WellKnownUrl(nip05)}
             <span class="text-sm text-fog-text-light dark:text-fog-dark-text-light mr-2">
               {nip05}
               {#if isValid === true}
                 <span class="nip05-valid" title="NIP-05 verified">✓</span>
               {:else if isValid === false}
+                {#if wellKnownUrl}
+                  <button
+                    onclick={() => window.open(wellKnownUrl, '_blank', 'noopener,noreferrer')}
+                    class="nip05-invalid-button"
+                    title="NIP-05 verification failed - Click to view well-known.json"
+                    aria-label="Open well-known.json for verification"
+                  >
+                    ✗
+                  </button>
+                {:else}
                   <span class="nip05-invalid" title="NIP-05 verification failed">✗</span>
+                {/if}
               {:else}
                 <span class="nip05-checking" title="Verifying NIP-05...">⟳</span>
               {/if}
@@ -481,6 +581,28 @@
     font-weight: bold;
   }
   
+  .nip05-invalid-button {
+    color: #ef4444;
+    margin-left: 0.25rem;
+    font-weight: bold;
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    font-size: inherit;
+    line-height: inherit;
+    transition: opacity 0.2s;
+  }
+  
+  .nip05-invalid-button:hover {
+    opacity: 0.7;
+    text-decoration: underline;
+  }
+  
+  .nip05-invalid-button:active {
+    opacity: 0.5;
+  }
+  
   .nip05-checking {
     color: #9ca3af;
     margin-left: 0.25rem;

src/lib/services/nostr/nostr-client.ts

@@ -292,9 +292,10 @@ class NostrClient {
       const limited = sorted.slice(0, limit);
       
       const filtered = filterEvents(limited);
-      // Only log cache queries that return results to reduce console noise
-      if (filtered.length > 0) {
-        console.log(`[nostr-client] Cache query: ${limited.length} events before filter, ${filtered.length} after filter`);
+      // Only log cache queries at debug level to reduce console noise
+      // Only log if we got multiple events or if it's an interesting query
+      if (filtered.length > 5 || (filtered.length > 0 && limited.length > filtered.length * 2)) {
+        console.debug(`[nostr-client] Cache query: ${limited.length} events before filter, ${filtered.length} after filter`);
       }
       
       return filtered;

src/lib/types/kind-lookup.ts

@@ -26,7 +26,8 @@ export const KIND_LOOKUP: Record<number, KindInfo> = {
   9802: { number: 9802, description: 'Highlighted Article', showInFeed: true, isReplaceable: false, isSecondaryKind: false },
 
   // Threads and comments
-  11: { number: 11, description: 'Thread', showInFeed: false, isReplaceable: false, isSecondaryKind: false },
+  11: { number: 11, description: 'Discussion Thread', showInFeed: false, isReplaceable: false, isSecondaryKind: false },
+  34550: { number: 34550, description: 'Community', showInFeed: false, isReplaceable: false, isSecondaryKind: true },
   1111: { number: 1111, description: 'Comment', showInFeed: true, isReplaceable: false, isSecondaryKind: true },
 
   // Media