Unbreak pagination

src/lib/components/Notifications.svelte

@@ -70,7 +70,7 @@
   let allFromMeNotifications = $state<NDKEvent[]>([]); // All fetched "from-me" notifications
   let allPublicMessages = $state<NDKEvent[]>([]); // All fetched public messages
   let currentPage = $state(1);
-  let itemsPerPage = 20; // Show 20 items per page
+  let itemsPerPage = 10; // Show 20 items per page
   let hasFetchedToMe = $state(false); // Track if we've already fetched "to-me" data
   let hasFetchedFromMe = $state(false); // Track if we've already fetched "from-me" data
   let hasFetchedPublic = $state(false); // Track if we've already fetched public messages
@@ -650,27 +650,13 @@
     }
   }
 
-  // AI-NOTE: Pagination navigation functions
-  function nextPage() {
-    if (hasNextPage) {
-      currentPage++;
-      updateDisplayedItems();
-    }
-  }
-
-  function previousPage() {
-    if (hasPreviousPage) {
-      currentPage--;
-      updateDisplayedItems();
-    }
-  }
-
-  function goToPage(page: number) {
-    if (page >= 1 && page <= totalPages) {
-      currentPage = page;
+  // Pagination navigation
+  $effect (() => {
+    console.log(`[Pagination] Mode: ${notificationMode}, Current Page: ${currentPage}, Total Pages: ${totalPages}`);
     updateDisplayedItems();
-    }
-  }
+    // scroll to top
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  });
 
   // AI-NOTE: Update displayed items based on current page
   function updateDisplayedItems() {
@@ -845,8 +831,6 @@
 </script>
 
 {#if isOwnProfile && $userStore.signedIn}
-  <div class="mb-6 w-full">
-    <div class="flex items-center justify-between mb-4">
     <Heading tag="h3" class="h-leather">Notifications</Heading>
 
     <div class="flex flex-row items-center gap-3">
@@ -873,7 +857,6 @@
       {/each}
       </div>
     </div>
-    </div>
 
     {#if loading}
       <div class="flex items-center justify-center py-8 min-h-96">
@@ -1038,11 +1021,11 @@
       {/if}
     {:else}
       {#if notifications.length === 0}
-        <div class="p-4 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 rounded-lg">
+        <AAlert color="blue">
           <P>No notifications {notificationMode === "to-me" ? "received" : "sent"} found.</P>
-        </div>
+        </AAlert>
       {:else}
-        <div class="max-h-[72rem] overflow-y-auto overflow-x-hidden space-y-4">
+        <div class="space-y-4">
           {#each notifications.slice(0, 100) as notification}
             {@const authorProfile = authorProfiles.get(notification.pubkey)}
             <div class="message-container p-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm">
@@ -1147,7 +1130,6 @@
         </div>
       {/if}
     {/if}
-  </div>
 
   <!-- New Message Modal -->
   <Modal bind:open={showNewMessageModal} size="lg" class="w-full">

src/lib/components/ZettelEditor.svelte

@@ -53,7 +53,8 @@
       ta.selectionStart = ta.selectionEnd = pos;
     });
   }
-  const newNoteTemplate = `\n== Note Title\n:author: \n:version: 1.0\n:published_on: 2024-01-01\n:published_by: Alexandria\n:summary: \n:tags: \n:image: \n\nNote content here...\n`;
+  const today = new Date().toISOString().split('T')[0];
+  const newNoteTemplate = `\n== Note Title\n:author: \n:version: 1.0\n:published_on: ${today}\n:published_by: Alexandria\n:summary: \n:tags: \n:image: \n\nNote content here...\n`;
   function insertNoteTemplate() {
     const ta = getTextarea();
     if (!ta || ta.disabled) return;
@@ -191,7 +192,7 @@
     </div>
   {:else}
     <!-- Informative text about ZettelEditor purpose -->
-    <AAlert color="blue" classes="max-w-lg self-center">
+    <AAlert color="blue" classes="w-full self-center">
       {#snippet title()}Note-Taking Tool{/snippet}
       <p class="text-sm mb-3">
         This editor is for creating individual notes (30041 events) only. Each section becomes a separate note event.

src/lib/components/publications/Publication.svelte

@@ -23,6 +23,7 @@
   import type { SveltePublicationTree } from "./svelte_publication_tree.svelte";
   import TableOfContents from "./TableOfContents.svelte";
   import type { TableOfContents as TocType } from "./table_of_contents.svelte";
+  import ArticleNav from "$components/util/ArticleNav.svelte";
 
   let { rootAddress, publicationType, indexEvent, publicationTree, toc } = $props<{
     rootAddress: string;
@@ -252,25 +253,29 @@
 </script>
 
 <!-- Add gap & items-start so sticky sidebars size correctly -->
-<div class="grid grid-cols-[1fr_3fr_1fr] gap-4 items-start">
+<div class="grid gap-4 items-start grid-cols-[1fr_3fr_1fr] grid-rows-[auto_1fr]">
+  <!-- Full-width ArticleNav row -->
+    <ArticleNav
+      publicationType={publicationType}
+      rootId={indexEvent.id}
+      indexEvent={indexEvent}
+    />
+  <!-- Three-column row -->
+  <div class="contents">
     <!-- Table of contents -->
     {#if publicationType !== "blog" && !isLeaf}
       <Sidebar
-      class="z-10 ml-4 bg-transparent sticky top-24 max-h-[calc(100vh-6rem)] overflow-y-auto
+        class="z-10 ml-4 bg-transparent sticky top-[162px] h-[calc(100vh-165px)] overflow-y-auto
                border border-s-4 rounded border-primary-200 dark:border-primary-800
                dark:bg-primary-1000"
-      position="static"
         activeUrl={`#${activeAddress ?? ""}`}
         classes={{
-        div: 'bg-transparent', /* inner wrapper neutral */
+          div: 'bg-transparent',
           active: 'bg-primary-100 dark:bg-primary-800 p-2 rounded-lg',
           nonactive: 'bg-primary-50 dark:bg-primary-800',
         }}
       >
-      <CloseButton
-        onclick={closeTocSidebar}
-        class="btn-leather hover:bg-primary-50 dark:hover:bg-primary-800"
-      />
+        <SidebarWrapper>
           <TableOfContents
             {rootAddress}
             {toc}
@@ -282,10 +287,11 @@
             }
           }}
             />
+        </SidebarWrapper>
       </Sidebar>
     {/if}
 
-  <div>
+    <div class="mt-[70px]">
       <!-- Default publications -->
       {#if $publicationColumnVisibility.main}
         <!-- Remove overflow-auto so page scroll drives it -->
@@ -365,9 +371,9 @@
 
     {#if $publicationColumnVisibility.discussion}
       <Sidebar
-      position="static"
-      class="sticky top-24 max-h-[calc(100vh-6rem)] overflow-y-auto bg-primary-50 dark:bg-primary-1000
-             border border-primary-200 dark:border-primary-800 rounded"
+        class="z-10 ml-4 bg-transparent sticky top-[162px] h-[calc(100vh-165px)] overflow-y-auto
+               border border-s-4 rounded border-primary-200 dark:border-primary-800
+               dark:bg-primary-1000"
       >
         <SidebarWrapper>
           <SidebarGroup>
@@ -411,5 +417,5 @@
         </SidebarWrapper>
       </Sidebar>
     {/if}
-
+  </div>
 </div>

src/lib/components/util/ArticleNav.svelte

@@ -152,7 +152,7 @@
 </script>
 
 <nav
-  class="Navbar navbar-leather flex fixed top-[100px] sm:top-[92px] w-full min-h-[70px] px-2 sm:px-4 py-2.5 z-10 transition-transform duration-300 {isVisible
+  class="Navbar navbar-leather col-span-3 flex fixed top-[100px] sm:top-[92px] w-full min-h-[70px] px-2 sm:px-4 py-2.5 z-10 transition-transform duration-300 {isVisible
     ? 'translate-y-0'
     : '-translate-y-full'}"
 >

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

@@ -130,8 +130,8 @@
   <title>Compose Note - Alexandria</title>
 </svelte:head>
 
-<!-- Main container with 75% width and centered -->
-<div class="flex flex-col self-center items-center w-full px-2 space-y-4">
+<!-- Main container with max 1024px width and centered -->
+<div class="flex flex-col self-center items-center w-full max-w-[1024px] mx-auto px-2 space-y-4">
     <Heading
       tag="h1" class="h-leather mb-2">
       Compose Notes

src/routes/profile/notifications/+page.svelte

@@ -4,7 +4,7 @@ import { AAlert } from "$lib/a";
 import { userStore } from "$lib/stores/userStore";
 </script>
 
-<div class="w-full max-w-3xl mx-auto mt-10 px-4">
+<div class="flex flex-col w-full max-w-3xl mx-auto px-2 items-center gap-4">
 {#if $userStore?.signedIn}
   <Notifications />
 {:else}