more features

src/lib/modules/comments/CommentForm.svelte

@@ -106,7 +106,7 @@
       {/if}
       <button
         onclick={publish}
-        class="px-4 py-2 text-sm bg-fog-accent dark:bg-fog-dark-accent text-fog-text dark:text-fog-dark-text rounded hover:opacity-90 disabled:opacity-50"
+        class="px-4 py-2 text-sm bg-fog-accent dark:bg-fog-dark-accent text-white rounded hover:opacity-90 disabled:opacity-50"
         disabled={publishing || !content.trim()}
       >
         {publishing ? 'Publishing...' : parentEvent ? 'Reply' : 'Comment'}

src/lib/modules/feed/CreateKind1Form.svelte

@@ -122,7 +122,7 @@
       {/if}
       <button
         onclick={publish}
-        class="px-4 py-2 text-sm bg-fog-accent dark:bg-fog-dark-accent text-fog-text dark:text-fog-dark-text rounded hover:opacity-90 disabled:opacity-50"
+        class="px-4 py-2 text-sm bg-fog-accent dark:bg-fog-dark-accent text-white rounded hover:opacity-90 disabled:opacity-50"
         disabled={publishing || !content.trim()}
       >
         {publishing ? 'Publishing...' : parentEvent ? 'Reply' : 'Post'}

src/lib/modules/feed/Kind1FeedPage.svelte

@@ -206,7 +206,7 @@
     <h1 class="text-2xl font-bold mb-4">Feed</h1>
     <button
       onclick={() => (showNewPostForm = !showNewPostForm)}
-      class="px-4 py-2 bg-fog-accent dark:bg-fog-dark-accent text-fog-text dark:text-fog-dark-text rounded hover:opacity-90"
+      class="px-4 py-2 bg-fog-accent dark:bg-fog-dark-accent text-white rounded hover:opacity-90"
     >
       {showNewPostForm ? 'Cancel' : 'New Post'}
     </button>
@@ -234,7 +234,7 @@
       <div class="new-posts-indicator mb-4">
         <button
           onclick={handleShowNewPosts}
-          class="px-4 py-2 bg-fog-accent dark:bg-fog-dark-accent text-fog-text dark:text-fog-dark-text rounded hover:opacity-90 text-sm"
+          class="px-4 py-2 bg-fog-accent dark:bg-fog-dark-accent text-white rounded hover:opacity-90 text-sm"
         >
           {newPostsCount} new {newPostsCount === 1 ? 'post' : 'posts'} - Click to view
         </button>

src/lib/modules/feed/ReplyToKind1Form.svelte

@@ -115,7 +115,7 @@
       {/if}
       <button
         onclick={publish}
-        class="px-4 py-2 text-sm bg-fog-accent dark:bg-fog-dark-accent text-fog-text dark:text-fog-dark-text rounded hover:opacity-90 disabled:opacity-50"
+        class="px-4 py-2 text-sm bg-fog-accent dark:bg-fog-dark-accent text-white rounded hover:opacity-90 disabled:opacity-50"
         disabled={publishing || !content.trim()}
       >
         {publishing ? 'Publishing...' : 'Reply'}

src/lib/modules/threads/CreateThreadForm.svelte

@@ -168,7 +168,7 @@
     </div>
   </div>
 
-  <button type="submit" disabled={publishing || selectedRelays.size === 0} class="px-4 py-2 bg-fog-accent dark:bg-fog-dark-accent hover:bg-fog-text dark:hover:bg-fog-dark-text text-fog-text dark:text-fog-dark-text disabled:opacity-50 transition-colors rounded">
+  <button type="submit" disabled={publishing || selectedRelays.size === 0} class="px-4 py-2 bg-fog-accent dark:bg-fog-dark-accent text-white hover:opacity-90 disabled:opacity-50 transition-colors rounded">
     {publishing ? 'Publishing...' : 'Create Thread'}
   </button>
 </form>

src/lib/modules/threads/ThreadCard.svelte

@@ -16,6 +16,7 @@
   let commentCount = $state(0);
   let zapTotal = $state(0);
   let zapCount = $state(0);
+  let latestResponseTime = $state<number | null>(null);
   let loadingStats = $state(true);
 
   onMount(async () => {
@@ -24,9 +25,19 @@
 
   async function loadStats() {
     loadingStats = true;
+    const timeout = 30000; // 30 seconds
+    
     try {
       const config = nostrClient.getConfig();
       
+      // Create a timeout promise
+      const timeoutPromise = new Promise<never>((_, reject) => {
+        setTimeout(() => reject(new Error('Stats loading timeout')), timeout);
+      });
+      
+      // Race between loading and timeout
+      await Promise.race([
+        (async () => {
           // Load reactions (kind 7)
           const reactionRelays = relayManager.getThreadReadRelays();
           const reactionEvents = await nostrClient.fetchEvents(
@@ -76,8 +87,34 @@
               }
             }
           }
+          
+          // Find latest response time (most recent comment, reaction, or zap)
+          let latestTime = thread.created_at;
+          if (commentEvents.length > 0) {
+            const latestComment = commentEvents.sort((a, b) => b.created_at - a.created_at)[0];
+            latestTime = Math.max(latestTime, latestComment.created_at);
+          }
+          if (reactionEvents.length > 0) {
+            const latestReaction = reactionEvents.sort((a, b) => b.created_at - a.created_at)[0];
+            latestTime = Math.max(latestTime, latestReaction.created_at);
+          }
+          if (zapReceipts.length > 0) {
+            const latestZap = zapReceipts.sort((a, b) => b.created_at - a.created_at)[0];
+            latestTime = Math.max(latestTime, latestZap.created_at);
+          }
+          latestResponseTime = latestTime > thread.created_at ? latestTime : null;
+        })(),
+        timeoutPromise
+      ]);
     } catch (error) {
       console.error('Error loading thread stats:', error);
+      // On timeout or error, show zero stats instead of loading forever
+      upvotes = 0;
+      downvotes = 0;
+      commentCount = 0;
+      zapTotal = 0;
+      zapCount = 0;
+      latestResponseTime = null;
     } finally {
       loadingStats = false;
     }
@@ -109,6 +146,20 @@
     return 'just now';
   }
 
+  function getLatestResponseTime(): string {
+    if (!latestResponseTime) return '';
+    const now = Math.floor(Date.now() / 1000);
+    const diff = now - latestResponseTime;
+    const hours = Math.floor(diff / 3600);
+    const days = Math.floor(diff / 86400);
+    const minutes = Math.floor(diff / 60);
+
+    if (days > 0) return `${days}d ago`;
+    if (hours > 0) return `${hours}h ago`;
+    if (minutes > 0) return `${minutes}m ago`;
+    return 'just now';
+  }
+
   function getClientName(): string | null {
     const clientTag = thread.tags.find((t) => t[0] === 'client');
     return clientTag?.[1] || null;
@@ -140,18 +191,23 @@
     </div>
   {/if}
 
-  <div class="flex items-center justify-between text-xs text-fog-text-light dark:text-fog-dark-text-light">
-    <div class="flex items-center gap-4">
-      {#if !loadingStats}
-        <span>↑ {upvotes}</span>
-        <span>↓ {downvotes}</span>
-        <span>{commentCount} {commentCount === 1 ? 'comment' : 'comments'}</span>
+  <div class="flex items-center justify-between text-xs text-fog-text dark:text-fog-dark-text">
+    <div class="flex items-center gap-4 flex-wrap">
+      {#if loadingStats}
+        <span class="text-fog-text-light dark:text-fog-dark-text-light">Loading stats...</span>
+      {:else}
+        <span class="font-medium">↑ {upvotes}</span>
+        <span class="font-medium">↓ {downvotes}</span>
+        <span class="font-medium">{commentCount} {commentCount === 1 ? 'comment' : 'comments'}</span>
+        {#if latestResponseTime}
+          <span class="text-fog-text-light dark:text-fog-dark-text-light">Last: {getLatestResponseTime()}</span>
+        {/if}
         {#if zapCount > 0}
-          <span>⚡ {zapTotal.toLocaleString()} sats ({zapCount})</span>
+          <span class="font-medium">⚡ {zapTotal.toLocaleString()} sats ({zapCount})</span>
         {/if}
       {/if}
     </div>
-    <a href="/thread/{thread.id}">View thread →</a>
+    <a href="/thread/{thread.id}" class="ml-2 text-fog-accent dark:text-fog-dark-accent hover:underline">View thread →</a>
   </div>
 </article>
 

src/lib/modules/threads/ThreadList.svelte

@@ -251,7 +251,7 @@
         <button
           onclick={() => (selectedTopic = null)}
           class="px-3 py-1 rounded border transition-colors {selectedTopic === null
-            ? 'bg-fog-accent dark:bg-fog-dark-accent text-fog-text dark:text-fog-dark-text border-fog-accent dark:border-fog-dark-accent'
+            ? 'bg-fog-accent dark:bg-fog-dark-accent text-white border-fog-accent dark:border-fog-dark-accent'
             : 'bg-fog-post dark:bg-fog-dark-post text-fog-text dark:text-fog-dark-text border-fog-border dark:border-fog-dark-border hover:bg-fog-highlight dark:hover:bg-fog-dark-highlight'}"
         >
           All ({filterByAge(threads).length})
@@ -260,7 +260,7 @@
         <button
           onclick={() => (selectedTopic = topic === null ? undefined : topic)}
           class="px-3 py-1 rounded border transition-colors {selectedTopic === (topic === null ? undefined : topic)
-            ? 'bg-fog-accent dark:bg-fog-dark-accent text-fog-text dark:text-fog-dark-text border-fog-accent dark:border-fog-dark-accent'
+            ? 'bg-fog-accent dark:bg-fog-dark-accent text-white border-fog-accent dark:border-fog-dark-accent'
             : 'bg-fog-post dark:bg-fog-dark-post text-fog-text dark:text-fog-dark-text border-fog-border dark:border-fog-dark-border hover:bg-fog-highlight dark:hover:bg-fog-dark-highlight'}"
         >
           {topic === null ? 'General' : topic} ({count})

src/lib/modules/zaps/ZapInvoiceModal.svelte

@@ -58,7 +58,7 @@
         ></textarea>
         <button
           onclick={copyInvoice}
-          class="mt-2 px-4 py-2 bg-fog-accent dark:bg-fog-dark-accent text-fog-text dark:text-fog-dark-text rounded hover:opacity-90"
+          class="mt-2 px-4 py-2 bg-fog-accent dark:bg-fog-dark-accent text-white rounded hover:opacity-90"
         >
           Copy Invoice
         </button>

src/lib/modules/zaps/ZapReceipt.svelte

@@ -21,12 +21,19 @@
 
   async function loadZapReceipts() {
     loading = true;
+    const timeout = 30000; // 30 seconds
+    
     try {
       const config = nostrClient.getConfig();
       const threshold = config.zapThreshold;
 
+      // Create a timeout promise
+      const timeoutPromise = new Promise<never>((_, reject) => {
+        setTimeout(() => reject(new Error('Zap loading timeout')), timeout);
+      });
+
       // Fetch zap receipts (kind 9735) for this event
-      const filters = [
+      const filters: any[] = [
         {
           kinds: [9735],
           '#e': [eventId]
@@ -37,17 +44,24 @@
         filters[0]['#p'] = [pubkey];
       }
 
-      const receipts = await nostrClient.fetchEvents(
+      // Race between loading and timeout
+      const receipts = await Promise.race([
+        nostrClient.fetchEvents(
           filters,
           [...config.defaultRelays],
           { useCache: true, cacheResults: true, onUpdate: (updated) => {
             processReceipts(updated);
           }}
-      );
+        ),
+        timeoutPromise
+      ]);
 
       processReceipts(receipts);
     } catch (error) {
       console.error('Error loading zap receipts:', error);
+      // On timeout or error, show empty state
+      zapReceipts = [];
+      totalAmount = 0;
     } finally {
       loading = false;
     }
@@ -101,6 +115,8 @@
         ({zapReceipts.length} {zapReceipts.length === 1 ? 'zap' : 'zaps'})
       </span>
     </div>
+  {:else}
+    <span class="text-xs text-fog-text-light dark:text-fog-dark-text-light">No zaps</span>
   {/if}
 </div>
 

src/routes/+page.svelte

@@ -34,7 +34,7 @@
     {#if isLoggedIn}
       <button
         onclick={() => (showCreateForm = !showCreateForm)}
-        class="px-4 py-2 bg-fog-accent dark:bg-fog-dark-accent text-fog-text dark:text-fog-dark-text rounded hover:opacity-90"
+        class="px-4 py-2 bg-fog-accent dark:bg-fog-dark-accent text-white rounded hover:opacity-90"
       >
         {showCreateForm ? 'Cancel' : 'Create Thread'}
       </button>

src/routes/login/+page.svelte

@@ -45,7 +45,7 @@
     <button
       onclick={loginWithNIP07}
       disabled={loading}
-      class="w-full px-4 py-2 bg-fog-accent dark:bg-fog-dark-accent hover:bg-fog-text dark:hover:bg-fog-dark-text text-fog-text dark:text-fog-dark-text disabled:opacity-50 transition-colors rounded"
+      class="w-full px-4 py-2 bg-fog-accent dark:bg-fog-dark-accent text-white hover:opacity-90 disabled:opacity-50 transition-colors rounded"
     >
       {loading ? 'Connecting...' : 'Login with NIP-07'}
     </button>