Add publishing progress bar with mock mode support

- Add progress tracking to show n/total events during publishing
- Display progress bar beneath editor controls in ZettelEditor
- Add VITE_MOCK_PUBLISH env variable for testing UI without publishing
- Mock mode simulates network delay (300-500ms) and generates fake event IDs
- Progress updates after each event publishes in both article and scattered notes modes

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

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

.env.example

@@ -0,0 +1,14 @@
+# Alexandria Environment Variables
+
+# Enable mock data for development/testing
+# Set to "true" to use lorem ipsum test comments instead of fetching from relays
+VITE_USE_MOCK_COMMENTS=true
+
+# Set to "true" to use position-based test highlights instead of fetching from relays
+VITE_USE_MOCK_HIGHLIGHTS=true
+
+# Set to "true" to mock event publishing (no actual relay publishing, useful for testing UI)
+VITE_MOCK_PUBLISH=true
+
+# Enable debug logging for relay connections
+DEBUG_RELAYS=false

src/lib/components/ZettelEditor.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Button } from "flowbite-svelte";
+  import { Button, Progressbar } from "flowbite-svelte";
   import {
     EyeOutline,
     QuestionCircleOutline,
@@ -33,6 +33,8 @@
     placeholder = "Start writing your AsciiDoc content here...",
     showPreview = false,
     parseLevel = 2,
+    isPublishing = false,
+    publishProgress = { current: 0, total: 0 },
     onContentChange = (content: string) => {},
     onPreviewToggle = (show: boolean) => {},
     onPublishArticle = (events: any) => {},
@@ -42,6 +44,8 @@
     placeholder?: string;
     showPreview?: boolean;
     parseLevel?: number;
+    isPublishing?: boolean;
+    publishProgress?: { current: number; total: number };
     onContentChange?: (content: string) => void;
     onPreviewToggle?: (show: boolean) => void;
     onPublishArticle?: (events: any) => void;
@@ -874,6 +878,25 @@
     {/if}
   </div>
 
+  <!-- Publishing Progress -->
+  {#if isPublishing && publishProgress.total > 0}
+    <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4 shadow-sm">
+      <div class="mb-2 flex justify-between items-center">
+        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">
+          Publishing events...
+        </span>
+        <span class="text-sm text-gray-600 dark:text-gray-400">
+          {publishProgress.current} of {publishProgress.total}
+        </span>
+      </div>
+      <Progressbar
+        progress={(publishProgress.current / publishProgress.total) * 100}
+        size="h-2.5"
+        color="blue"
+      />
+    </div>
+  {/if}
+
   <div
     class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-6 h-[60vh] min-h-[400px] max-h-[800px]"
   >

src/lib/services/publisher.ts

@@ -124,6 +124,23 @@ export async function publishSingleEvent(
   ndk: NDK,
 ): Promise<PublishResult> {
   const { content, kind, tags, onError } = options;
+
+  // Mock publishing mode for testing UI
+  if (import.meta.env.VITE_MOCK_PUBLISH === "true") {
+    console.log("[MOCK PUBLISH] Simulating event publish:", {
+      kind,
+      titleTag: tags.find((t) => t[0] === "title")?.[1],
+      dTag: tags.find((t) => t[0] === "d")?.[1],
+    });
+    // Simulate network delay
+    await new Promise((resolve) => setTimeout(resolve, 300 + Math.random() * 200));
+    // Generate a fake event ID
+    const fakeEventId = Array.from({ length: 64 }, () =>
+      Math.floor(Math.random() * 16).toString(16),
+    ).join("");
+    return { success: true, eventId: fakeEventId };
+  }
+
   if (!ndk?.activeUser) {
     const error = "Please log in first";
     onError?.(error);

src/routes/new/compose/+page.svelte

@@ -16,6 +16,10 @@
   let showPreview = $state(false);
   let isPublishing = $state(false);
   let publishResults = $state<ProcessedPublishResults | null>(null);
+  let publishProgress = $state<{ current: number; total: number }>({
+    current: 0,
+    total: 0,
+  });
 
   // Handle content changes from ZettelEditor
   function handleContentChange(newContent: string) {
@@ -79,6 +83,11 @@
     isPublishing = true;
     publishResults = null;
 
+    // Initialize progress tracking
+    const totalEvents =
+      (events.indexEvent ? 1 : 0) + events.contentEvents.length;
+    publishProgress = { current: 0, total: totalEvents };
+
     // Debug: Log the first content event to see its structure
     if (events.contentEvents.length > 0) {
       console.log("First content event structure:", {
@@ -106,6 +115,7 @@
           ndk,
         );
         results.push(indexResult);
+        publishProgress.current += 1;
       }
 
       // Publish content events
@@ -126,6 +136,7 @@
           ndk,
         );
         results.push(result);
+        publishProgress.current += 1;
       }
 
       // Process results using shared utility
@@ -149,6 +160,10 @@
     isPublishing = true;
     publishResults = null;
 
+    // Initialize progress tracking
+    const totalEvents = events.contentEvents.length;
+    publishProgress = { current: 0, total: totalEvents };
+
     // Debug: Log the structure of events being published (without content)
     console.log("=== PUBLISHING SCATTERED NOTES ===");
     console.log(`Number of content events: ${events.contentEvents.length}`);
@@ -171,6 +186,7 @@
           ndk,
         );
         results.push(result);
+        publishProgress.current += 1;
       }
 
       // Process results using shared utility
@@ -229,6 +245,8 @@
     <ZettelEditor
       {content}
       {showPreview}
+      {isPublishing}
+      {publishProgress}
       onContentChange={handleContentChange}
       onPreviewToggle={handlePreviewToggle}
       onPublishArticle={handlePublishArticle}