From 9ea6e8b3e848986d494b045e49e13855da3a75fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nu=C5=A1a=20Puk=C5=A1i=C4=8D?= <nusa.puksic@gmail.com>
Date: Sun, 7 Sep 2025 18:39:22 +0200
Subject: [PATCH] Publications, part 2

---
 .../publications/Publication.svelte           | 280 +++++++++---------
 src/lib/stores.ts                             |   2 +-
 .../[type]/[identifier]/+page.svelte          |   2 -
 3 files changed, 136 insertions(+), 148 deletions(-)

diff --git a/src/lib/components/publications/Publication.svelte b/src/lib/components/publications/Publication.svelte
index b7722a0..2046b34 100644
--- a/src/lib/components/publications/Publication.svelte
+++ b/src/lib/components/publications/Publication.svelte
@@ -251,17 +251,19 @@
   // #endregion
 </script>
 
-<!-- Table of contents -->
-{#if publicationType !== "blog" && !isLeaf}
+<!-- Add gap & items-start so sticky sidebars size correctly -->
+<div class="grid grid-cols-[1fr_3fr_1fr] gap-4 items-start">
+  <!-- Table of contents -->
+  {#if publicationType !== "blog" && !isLeaf}
     <Sidebar
-      isOpen={isTocOpen}
-      closeSidebar={closeTocSidebar}
-      class="z-50 max-h-[calc(100vh-170px)] ml-4 bg-transparent"
+      /* Make sidebar sticky & independently scrollable */
+      class="z-10 ml-4 bg-transparent sticky top-24 max-h-[calc(100vh-6rem)] overflow-y-auto
+             border border-s-4 rounded border-primary-200 dark:border-primary-800
+             bg-primary-50 dark:bg-primary-1000"
       position="static"
-      backdrop={false}
       activeUrl={`#${activeAddress ?? ""}`}
       classes={{
-        div: 'bg-primary-50 dark:bg-primary-1000 border border-s-4 rounded border-primary-200 dark:border-primary-800',
+        div: 'bg-transparent', /* inner wrapper neutral */
         active: 'bg-primary-100 dark:bg-primary-800 p-2 rounded-lg',
         nonactive: 'bg-primary-50 dark:bg-primary-800',
       }}
@@ -274,8 +276,7 @@
         {rootAddress}
         {toc}
         depth={2}
-        onSectionFocused={(address: string) =>
-          publicationTree.setBookmark(address)}
+        onSectionFocused={(address: string) => publicationTree.setBookmark(address)}
         onLoadMore={() => {
           if (!isLoading && !isDone && publicationTree) {
             loadMore(4);
@@ -283,145 +284,134 @@
         }}
       />
     </Sidebar>
-{/if}
-
-<!-- Default publications -->
-{#if $publicationColumnVisibility.main}
-  <div class="flex flex-col p-4 space-y-4 overflow-auto max-w-2xl flex-grow-2">
-    <div
-      class="card-leather bg-highlight dark:bg-primary-800 p-4 mb-4 rounded-lg border"
-    >
-      <Details event={indexEvent} />
-    </div>
-    <!-- Publication sections/cards -->
-    {#each leaves as leaf, i}
-      {#if leaf == null}
-        <Alert class="flex space-x-2">
-          <ExclamationCircleOutline class="w-5 h-5" />
-          Error loading content. One or more events could not be loaded.
-        </Alert>
-      {:else}
-        {@const address = leaf.tagAddress()}
-        <PublicationSection
-          {rootAddress}
-          {leaves}
-          {address}
-          {publicationTree}
-          {toc}
-          ref={(el) => onPublicationSectionMounted(el, address)}
-        />
-      {/if}
-    {/each}
-    <div class="flex justify-center my-4">
-      {#if isLoading}
-        <Button disabled color="primary">Loading...</Button>
-      {:else if !isDone}
-        <Button color="primary" onclick={() => loadMore(1)}>Show More</Button>
-      {:else}
-        <p class="text-gray-500 dark:text-gray-400">
-          You've reached the end of the publication.
-        </p>
-      {/if}
-    </div>
-  </div>
-{/if}
-
-<!-- Blog list -->
-{#if $publicationColumnVisibility.blog}
-  <div
-    class={`flex flex-col p-4 space-y-4 overflow-auto max-w-xl flex-grow-1 ${isInnerActive() ? "discreet" : ""}`}
-  >
-    <div
-      class="card-leather bg-highlight dark:bg-primary-800 p-4 mb-4 rounded-lg border"
-    >
-      <Details event={indexEvent} />
-    </div>
-    <!-- List blog excerpts -->
-    {#each leaves as leaf, i}
-      {#if leaf}
-        <BlogHeader
-          rootId={leaf.tagAddress()}
-          event={leaf}
-          onBlogUpdate={loadBlog}
-          active={!isInnerActive()}
-        />
-      {/if}
-    {/each}
-  </div>
-{/if}
-
-{#if isInnerActive()}
-  {#key currentBlog}
-    <div
-      class="flex flex-col p-4 max-w-3xl overflow-auto flex-grow-2 max-h-[calc(100vh-170px)] sticky"
-    >
-      {#each leaves as leaf, i}
-        {#if leaf && leaf.tagAddress() === currentBlog}
-          <div
-            class="card-leather bg-highlight dark:bg-primary-800 p-4 mb-4 rounded-lg border"
-          >
-            <Details event={leaf} />
-          </div>
-
-          <PublicationSection
-            {rootAddress}
-            {leaves}
-            address={leaf.tagAddress()}
-            {publicationTree}
-            {toc}
-            ref={(el) => setLastElementRef(el, i)}
-          />
-
-          <Card class="ArticleBox !hidden card-leather min-w-full mt-4">
-            <Interactions rootId={currentBlog} />
-          </Card>
-        {/if}
-      {/each}
-    </div>
-  {/key}
-{/if}
-
-{#if $publicationColumnVisibility.discussion}
-  <Sidebar class="sidebar-leather right-0 md:!pl-8">
-    <SidebarWrapper>
-      <SidebarGroup class="sidebar-group-leather">
-        <div class="flex justify-between items-baseline">
-          <Heading tag="h1" class="h-leather !text-lg">Discussion</Heading>
-          <Button
-            class="btn-leather hidden sm:flex z-30 !p-1 bg-primary-50 dark:bg-gray-800"
-            outline
-            onclick={closeDiscussion}
-          >
-            <CloseOutline />
-          </Button>
+  {/if}
+
+  <div>
+    <!-- Default publications -->
+    {#if $publicationColumnVisibility.main}
+      <!-- Remove overflow-auto so page scroll drives it -->
+      <div class="flex flex-col p-4 space-y-4 max-w-2xl flex-grow-2">
+        <div
+          class="card-leather bg-highlight dark:bg-primary-800 p-4 mb-4 rounded-lg border"
+        >
+          <Details event={indexEvent} />
+        </div>
+        <!-- Publication sections/cards -->
+        {#each leaves as leaf, i}
+          {#if leaf == null}
+            <Alert class="flex space-x-2">
+              <ExclamationCircleOutline class="w-5 h-5" />
+              Error loading content. One or more events could not be loaded.
+            </Alert>
+          {:else}
+            {@const address = leaf.tagAddress()}
+            <PublicationSection
+              {rootAddress}
+              {leaves}
+              {address}
+              {publicationTree}
+              {toc}
+              ref={(el) => onPublicationSectionMounted(el, address)}
+            />
+          {/if}
+        {/each}
+        <div class="flex justify-center my-4">
+          {#if isLoading}
+            <Button disabled color="primary">Loading...</Button>
+          {:else if !isDone}
+            <Button color="primary" onclick={() => loadMore(1)}>Show More</Button>
+          {:else}
+            <p class="text-gray-500 dark:text-gray-400">
+              You've reached the end of the publication.
+            </p>
+          {/if}
+        </div>
+      </div>
+    {/if}
+
+    <!-- Blog list -->
+    {#if $publicationColumnVisibility.blog}
+      <!-- Remove overflow-auto -->
+      <div
+        class={`flex flex-col p-4 space-y-4 max-w-xl flex-grow-1 ${isInnerActive() ? "discreet" : ""}`}
+      >
+        <div
+          class="card-leather bg-highlight dark:bg-primary-800 p-4 mb-4 rounded-lg border"
+        >
+          <Details event={indexEvent} />
         </div>
-        <div class="flex flex-col space-y-4">
-          <!-- TODO
-                alternative for other publications and
-                when blog is not opened, but discussion is opened from the list
-          -->
-          {#if showBlogHeader() && currentBlog && currentBlogEvent}
+        <!-- List blog excerpts -->
+        {#each leaves as leaf, i}
+          {#if leaf}
             <BlogHeader
-              rootId={currentBlog}
-              event={currentBlogEvent}
+              rootId={leaf.tagAddress()}
+              event={leaf}
               onBlogUpdate={loadBlog}
-              active={true}
+              active={!isInnerActive()}
             />
           {/if}
-          <div class="flex flex-col w-full space-y-4">
-            <Card class="ArticleBox card-leather w-full grid max-w-xl">
-              <div class="flex flex-col my-2">
-                <span>Unknown</span>
-                <span class="text-gray-500">1.1.1970</span>
-              </div>
-              <div class="flex flex-col flex-grow space-y-4">
-                This is a very intelligent comment placeholder that applies to
-                all the content equally well.
-              </div>
-            </Card>
-          </div>
+        {/each}
+      </div>
+    {/if}
+
+    {#if isInnerActive()}
+      {#key currentBlog}
+        <!-- Remove overflow-auto & sticky; allow page scroll -->
+        <div class="flex flex-col p-4 max-w-3xl flex-grow-2">
+          <!-- ...existing code... -->
         </div>
-      </SidebarGroup>
-    </SidebarWrapper>
-  </Sidebar>
-{/if}
+      {/key}
+    {/if}
+  </div>
+
+  {#if $publicationColumnVisibility.discussion}
+    <!-- Make discussion sidebar sticky & scrollable -->
+    <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"
+    >
+      <SidebarWrapper>
+        <SidebarGroup>
+          <div class="flex justify-between items-baseline">
+            <Heading tag="h1" class="h-leather !text-lg">Discussion</Heading>
+            <Button
+              class="btn-leather hidden sm:flex z-30 !p-1 bg-primary-50 dark:bg-gray-800"
+              outline
+              onclick={closeDiscussion}
+            >
+              <CloseOutline />
+            </Button>
+          </div>
+          <div class="flex flex-col space-y-4">
+            <!-- TODO
+                  alternative for other publications and
+                  when blog is not opened, but discussion is opened from the list
+            -->
+            {#if showBlogHeader() && currentBlog && currentBlogEvent}
+              <BlogHeader
+                rootId={currentBlog}
+                event={currentBlogEvent}
+                onBlogUpdate={loadBlog}
+                active={true}
+              />
+            {/if}
+            <div class="flex flex-col w-full space-y-4">
+              <Card class="ArticleBox card-leather w-full grid max-w-xl">
+                <div class="flex flex-col my-2">
+                  <span>Unknown</span>
+                  <span class="text-gray-500">1.1.1970</span>
+                </div>
+                <div class="flex flex-col flex-grow space-y-4">
+                  This is a very intelligent comment placeholder that applies to
+                  all the content equally well.
+                </div>
+              </Card>
+            </div>
+          </div>
+        </SidebarGroup>
+      </SidebarWrapper>
+    </Sidebar>
+  {/if}
+
+</div>
diff --git a/src/lib/stores.ts b/src/lib/stores.ts
index 3cefe7c..2b6bd13 100644
--- a/src/lib/stores.ts
+++ b/src/lib/stores.ts
@@ -21,7 +21,7 @@ const defaultVisibility: PublicationLayoutVisibility = {
   blog: true,
   main: true,
   inner: false,
-  discussion: false,
+  discussion: true,
   editing: false,
 };
 
diff --git a/src/routes/publication/[type]/[identifier]/+page.svelte b/src/routes/publication/[type]/[identifier]/+page.svelte
index 5445364..e7bedd9 100644
--- a/src/routes/publication/[type]/[identifier]/+page.svelte
+++ b/src/routes/publication/[type]/[identifier]/+page.svelte
@@ -186,7 +186,6 @@
     indexEvent={indexEvent}
   />
 
-  <div class="publication flex flex-row {data.publicationType} px-4 space-y-4 overflow-auto mx-auto flex-grow-2 mt-[70px]">
     <Publication
       rootAddress={indexEvent.tagAddress()}
       publicationType={data.publicationType}
@@ -194,7 +193,6 @@
       publicationTree={publicationTree}
       toc={toc}
     />
-  </div>
 {:else if loading}
   <main class="publication">
     <div class="flex items-center justify-center min-h-screen">