From 76b1e08a9df49ab4808adf289d62b564001f150b Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Sat, 31 Jan 2026 00:52:33 -0500
Subject: [PATCH] added pagetitle to looseleaf and pub, added shortcut if you
 only have one pub or looseleaf

---
 app/(home-pages)/home/HomeLayout.tsx          |  62 +--------
 .../looseleafs/LooseleafsLayout.tsx           |  12 +-
 .../dashboard/PublicationDashboard.tsx        |  15 +--
 components/ActionBar/Publications.tsx         | 118 +++++++++++++++++-
 components/PageHeader.tsx                     |   2 +-
 5 files changed, 136 insertions(+), 73 deletions(-)

diff --git a/app/(home-pages)/home/HomeLayout.tsx b/app/(home-pages)/home/HomeLayout.tsx
index c8f834c4..95d22e60 100644
--- a/app/(home-pages)/home/HomeLayout.tsx
+++ b/app/(home-pages)/home/HomeLayout.tsx
@@ -29,12 +29,7 @@ import {
   HomeEmptyState,
   PublicationBanner,
 } from "./HomeEmpty/HomeEmpty";
-import { Popover } from "components/Popover";
-import { PubIcon, PublicationButtons } from "components/ActionBar/Publications";
-import { normalizePublicationRecord } from "src/utils/normalizeRecords";
-import { ButtonPrimary } from "components/Buttons";
-import { LooseLeafSmall } from "components/Icons/LooseleafSmall";
-import { HomeButton } from "components/ActionBar/NavigationButtons";
+import { PublicationNavigation } from "components/ActionBar/Publications";
 
 export type Leaflet = {
   added_at: string;
@@ -83,43 +78,6 @@ export const HomeLayout = (props: {
       (leaflet) => leaflet.archived === true,
     ).length > 0;
 
-  function getPubIcons() {
-    let hasLooseleafs = !!identity?.permission_token_on_homepage.find(
-      (f) =>
-        f.permission_tokens.leaflets_to_documents &&
-        f.permission_tokens.leaflets_to_documents[0]?.document,
-    );
-
-    if (identity && identity.publications.length >= 1) {
-      return (
-        <div className="flex gap-1">
-          {identity.publications.map((pub, index) => {
-            if (index <= 3)
-              return (
-                <PubIcon
-                  key={pub.uri}
-                  record={normalizePublicationRecord(pub.record)}
-                  uri={pub.uri}
-                />
-              );
-          })}
-        </div>
-      );
-    }
-    if (identity && hasLooseleafs) {
-      return (
-        <div className="bg-bg-leaflet rounded-full  ">
-          <LooseLeafSmall className="scale-[75%]" />
-        </div>
-      );
-    } else
-      return (
-        <ButtonPrimary compact className="text-sm!">
-          Create a Publication!
-        </ButtonPrimary>
-      );
-  }
-
   return (
     <DashboardLayout
       id="home"
@@ -150,21 +108,7 @@ export const HomeLayout = (props: {
       pageTitle={
         <PageTitle
           pageTitle={"Home"}
-          controls={
-            <Popover
-              trigger={<div>{getPubIcons()}</div>}
-              className="pt-1 px-2!"
-            >
-              <HomeButton current className="flex-row-reverse! justify-end!" />
-              <hr className="my-1 border-border-light" />
-              <PublicationButtons
-                currentPage={"home"}
-                currentPubUri={undefined}
-                className="justify-end!"
-                optionClassName=" flex-row-reverse!"
-              />
-            </Popover>
-          }
+          controls={<PublicationNavigation currentPage="home" />}
         />
       }
     />
@@ -268,7 +212,7 @@ export function LeafletList(props: {
       className={`
         leafletList
         w-full
-        ${display === "grid" ? "grid auto-rows-max md:grid-cols-4 sm:grid-cols-3 grid-cols-2 gap-y-4 gap-x-4 sm:gap-x-6 sm:gap-y-5 grow" : "flex flex-col gap-2 pt-2"} `}
+        ${display === "grid" ? "grid auto-rows-max md:grid-cols-4 sm:grid-cols-3 grid-cols-2 gap-y-4 gap-x-4 sm:gap-x-6 sm:gap-y-5 grow" : "flex flex-col gap-2"} `}
     >
       {props.leaflets.map(({ token: leaflet, added_at, archived }, index) => (
         <ReplicacheProvider
diff --git a/app/(home-pages)/looseleafs/LooseleafsLayout.tsx b/app/(home-pages)/looseleafs/LooseleafsLayout.tsx
index 5f0c12b3..6c2c982d 100644
--- a/app/(home-pages)/looseleafs/LooseleafsLayout.tsx
+++ b/app/(home-pages)/looseleafs/LooseleafsLayout.tsx
@@ -1,5 +1,8 @@
 "use client";
-import { DashboardLayout } from "components/PageLayouts/DashboardLayout";
+import {
+  DashboardLayout,
+  PageTitle,
+} from "components/PageLayouts/DashboardLayout";
 import { useState } from "react";
 import { useDebouncedEffect } from "src/hooks/useDebouncedEffect";
 import { Fact, PermissionToken } from "src/replicache";
@@ -10,6 +13,7 @@ import { useIdentityData } from "components/IdentityProvider";
 import useSWR from "swr";
 import { getHomeDocs } from "../home/storage";
 import { Leaflet, LeafletList } from "../home/HomeLayout";
+import { PublicationNavigation } from "components/ActionBar/Publications";
 
 export const LooseleafsLayout = (props: {
   entityID: string | null;
@@ -47,6 +51,12 @@ export const LooseleafsLayout = (props: {
           ),
         },
       }}
+      pageTitle={
+        <PageTitle
+          pageTitle={"Looseleafs"}
+          controls={<PublicationNavigation currentPage="looseleafs" />}
+        />
+      }
     />
   );
 };
diff --git a/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx b/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx
index af910e54..505092e4 100644
--- a/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx
+++ b/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx
@@ -13,8 +13,7 @@ import {
 } from "components/PageLayouts/DashboardLayout";
 import { useDebouncedEffect } from "src/hooks/useDebouncedEffect";
 import { type NormalizedPublication } from "src/utils/normalizeRecords";
-import { PublicationButtons } from "components/ActionBar/Publications";
-import { Popover } from "components/Popover";
+import { PublicationNavigation } from "components/ActionBar/Publications";
 
 export default function PublicationDashboard({
   publication,
@@ -83,14 +82,10 @@ export default function PublicationDashboard({
         <PageTitle
           pageTitle={record.name}
           controls={
-            <Popover trigger={<div>pubs</div>} className="pt-1 px-2!">
-              <PublicationButtons
-                currentPage={"pub"}
-                currentPubUri={publication.uri}
-                className="justify-end!"
-                optionClassName=" flex-row-reverse!"
-              />
-            </Popover>
+            <PublicationNavigation
+              currentPage="pub"
+              currentPubUri={publication.uri}
+            />
           }
         />
       }
diff --git a/components/ActionBar/Publications.tsx b/components/ActionBar/Publications.tsx
index f0b87d0d..1a98dd9f 100644
--- a/components/ActionBar/Publications.tsx
+++ b/components/ActionBar/Publications.tsx
@@ -15,12 +15,15 @@ import { SpeedyLink } from "components/SpeedyLink";
 import { PublishSmall } from "components/Icons/PublishSmall";
 import { Popover } from "components/Popover";
 import { BlueskyLogin } from "app/login/LoginForm";
-import { ButtonSecondary } from "components/Buttons";
+import { ButtonPrimary, ButtonSecondary } from "components/Buttons";
 import { useIsMobile } from "src/hooks/isMobile";
 import { useState } from "react";
 import { LooseLeafSmall } from "components/Icons/LooseleafSmall";
-import type { navPages } from "./NavigationButtons";
+import { HomeButton, type navPages } from "./NavigationButtons";
 import { AddTiny } from "components/Icons/AddTiny";
+import { HomeSmall } from "components/Icons/HomeSmall";
+import { HomeTiny } from "components/Icons/HomeTiny";
+import { LooseleafTiny } from "components/Icons/LooseleafTiny";
 
 export const PublicationButtons = (props: {
   currentPage: navPages;
@@ -225,6 +228,117 @@ export const PubIcon = (props: {
   );
 };
 
+export const PublicationNavigation = (props: {
+  currentPage: navPages;
+  currentPubUri?: string;
+}) => {
+  let { identity } = useIdentityData();
+
+  let hasLooseleafs = !!identity?.permission_token_on_homepage.find(
+    (f) =>
+      f.permission_tokens.leaflets_to_documents &&
+      f.permission_tokens.leaflets_to_documents[0]?.document,
+  );
+
+  let pubCount = identity?.publications.length ?? 0;
+  let onlyOnePub = pubCount === 1 && !hasLooseleafs;
+  let onlyLooseleafs = pubCount === 0 && hasLooseleafs;
+
+  function getTriggerIcons() {
+    if (identity && pubCount >= 1) {
+      return (
+        <div className="flex gap-1">
+          {identity.publications.map((pub, index) => {
+            if (index <= 2)
+              return (
+                <PubIcon
+                  key={pub.uri}
+                  record={normalizePublicationRecord(pub.record)}
+                  uri={pub.uri}
+                />
+              );
+          })}
+        </div>
+      );
+    }
+    if (identity && hasLooseleafs) {
+      return (
+        <div className="bg-bg-leaflet rounded-full">
+          <LooseLeafSmall className="scale-[75%]" />
+        </div>
+      );
+    } else
+      return (
+        <ButtonPrimary compact className="text-sm!">
+          Create a Publication!
+        </ButtonPrimary>
+      );
+  }
+
+  // Single pub, no looseleafs - just link to that pub
+  if (onlyOnePub && identity) {
+    let pub = identity.publications[0];
+    if (props.currentPage === "pub")
+      return (
+        <SpeedyLink
+          href={`/home`}
+          className="hover:no-underline! text-tertiary text-bold flex gap-2 text-sm border border-border-light rounded-md px-1 py-[px] items-center"
+        >
+          Home <HomeTiny />
+        </SpeedyLink>
+      );
+    return (
+      <SpeedyLink
+        href={`${getBasePublicationURL(pub)}/dashboard`}
+        className="hover:no-underline! text-tertiary text-bold flex gap-2 text-sm border border-border-light rounded-md px-1 py-[px] items-center max-w-32 "
+      >
+        <div className="truncate">{pub.name}</div>
+        <PubIcon
+          small
+          record={normalizePublicationRecord(pub.record)}
+          uri={pub.uri}
+        />
+      </SpeedyLink>
+    );
+  }
+
+  // Only looseleafs, no pubs - just link to looseleafs
+  if (!onlyLooseleafs) {
+    if (props.currentPage === "looseleafs")
+      return (
+        <SpeedyLink
+          href={`/home`}
+          className="hover:no-underline! text-tertiary text-bold flex gap-2 text-sm border border-border-light rounded-md px-1 py-[px] items-center"
+        >
+          Home <HomeTiny />
+        </SpeedyLink>
+      );
+    return (
+      <SpeedyLink href="/looseleafs" className="hover:no-underline!">
+        <div className="hover:no-underline! text-tertiary text-bold flex gap-2 text-sm border border-border-light rounded-md px-1 py-[px] items-center max-w-32 ">
+          Looseleafs <LooseleafTiny />
+        </div>
+      </SpeedyLink>
+    );
+  }
+
+  return (
+    <Popover trigger={<div>{getTriggerIcons()}</div>} className="pt-1 px-2!">
+      <HomeButton
+        current={props.currentPage === "home"}
+        className="flex-row-reverse! justify-end!"
+      />
+      <hr className="my-1 border-border-light" />
+      <PublicationButtons
+        currentPage={props.currentPage}
+        currentPubUri={props.currentPubUri}
+        className="justify-end!"
+        optionClassName=" flex-row-reverse!"
+      />
+    </Popover>
+  );
+};
+
 export const PubListEmptyIllo = () => {
   return (
     <svg
diff --git a/components/PageHeader.tsx b/components/PageHeader.tsx
index 446b24b2..0e61a9f2 100644
--- a/components/PageHeader.tsx
+++ b/components/PageHeader.tsx
@@ -29,7 +29,7 @@ export const Header = (props: { children: React.ReactNode }) => {
     <div
       className={`
       headerWrapper
-      sticky top-0 z-10
+      sticky top-0 z-20
       w-full bg-transparent
       `}
     >
-- 
2.51.2