From 2cb5eff0f826d2b4a2818bbda662b07a73a866a2 Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Sat, 31 Jan 2026 00:02:04 -0500
Subject: [PATCH] Added a page title to the home layout

---
 app/(home-pages)/home/HomeLayout.tsx          | 64 +++++++++++++++++++
 .../dashboard/PublicationDashboard.tsx        | 18 ++++++
 components/ActionBar/ActionButton.tsx         |  2 +-
 components/ActionBar/DesktopNavigation.tsx    | 12 ++--
 components/ActionBar/NavigationButtons.tsx    | 30 ++++-----
 components/ActionBar/Publications.tsx         | 23 +++++--
 components/PageLayouts/DashboardLayout.tsx    | 22 ++++++-
 7 files changed, 139 insertions(+), 32 deletions(-)

diff --git a/app/(home-pages)/home/HomeLayout.tsx b/app/(home-pages)/home/HomeLayout.tsx
index 7ba4b9b6..c8f834c4 100644
--- a/app/(home-pages)/home/HomeLayout.tsx
+++ b/app/(home-pages)/home/HomeLayout.tsx
@@ -18,6 +18,7 @@ import {
   DashboardLayout,
   DashboardState,
   useDashboardState,
+  PageTitle,
 } from "components/PageLayouts/DashboardLayout";
 import { Actions } from "./Actions/Actions";
 import { GetLeafletDataReturnType } from "app/api/rpc/[command]/get_leaflet_data";
@@ -28,6 +29,12 @@ 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";
 
 export type Leaflet = {
   added_at: string;
@@ -76,6 +83,43 @@ 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"
@@ -103,6 +147,26 @@ 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>
+          }
+        />
+      }
     />
   );
 };
diff --git a/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx b/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx
index 184f4e25..af910e54 100644
--- a/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx
+++ b/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx
@@ -8,10 +8,13 @@ import { PublishedPostsList } from "./PublishedPostsLists";
 import { PublicationSubscribers } from "./PublicationSubscribers";
 import {
   DashboardLayout,
+  PageTitle,
   PublicationDashboardControls,
 } 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";
 
 export default function PublicationDashboard({
   publication,
@@ -76,6 +79,21 @@ export default function PublicationDashboard({
       actions={<Actions publication={publication.uri} />}
       currentPage="pub"
       publication={publication.uri}
+      pageTitle={
+        <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>
+          }
+        />
+      }
     />
   );
 }
diff --git a/components/ActionBar/ActionButton.tsx b/components/ActionBar/ActionButton.tsx
index fa7f210b..5355a62c 100644
--- a/components/ActionBar/ActionButton.tsx
+++ b/components/ActionBar/ActionButton.tsx
@@ -71,7 +71,7 @@ export const ActionButton = (
     >
       <div className="shrink-0 flex flex-row gap-0.5">{icon}</div>
       <div
-        className={`flex flex-col pr-1 ${subtext && "leading-snug"} max-w-full min-w-0  ${sidebar.open ? "block" : showLabelOnMobile ? "sm:hidden block" : "hidden"}`}
+        className={`flex flex-col ${subtext && "leading-snug"} max-w-full min-w-0  ${sidebar.open ? "block" : showLabelOnMobile ? "sm:hidden block" : "hidden"}`}
       >
         <div className="truncate text-left">{label}</div>
         {subtext && (
diff --git a/components/ActionBar/DesktopNavigation.tsx b/components/ActionBar/DesktopNavigation.tsx
index 453aac63..b27cc7c6 100644
--- a/components/ActionBar/DesktopNavigation.tsx
+++ b/components/ActionBar/DesktopNavigation.tsx
@@ -8,6 +8,7 @@ import {
 } from "./NavigationButtons";
 import { PublicationButtons } from "./Publications";
 import { Sidebar } from "./Sidebar";
+import { LoginActionButton, LoginButton } from "components/LoginButton";
 
 export const DesktopNavigation = (props: {
   currentPage: navPages;
@@ -24,11 +25,14 @@ export const DesktopNavigation = (props: {
     props.currentPage === "pub";
   return (
     <div className="flex flex-col gap-3">
-      {identity?.atp_did && (
-        <Sidebar alwaysOpen>
+      <Sidebar alwaysOpen>
+        {identity?.atp_did ? (
           <NotificationButton current={props.currentPage === "notifications"} />
-        </Sidebar>
-      )}
+        ) : (
+          <LoginActionButton />
+        )}
+      </Sidebar>
+
       <Sidebar alwaysOpen>
         <ReaderButton
           current={props.currentPage === "reader"}
diff --git a/components/ActionBar/NavigationButtons.tsx b/components/ActionBar/NavigationButtons.tsx
index 8344c369..ae3a7c27 100644
--- a/components/ActionBar/NavigationButtons.tsx
+++ b/components/ActionBar/NavigationButtons.tsx
@@ -23,16 +23,20 @@ export type navPages =
   | "notifications"
   | "looseleafs"
   | "tag"
-  | "profile";
+  | "profile"
+  | "discover";
 
-export const HomeButton = (props: { current?: boolean }) => {
+export const HomeButton = (props: {
+  current?: boolean;
+  className?: string;
+}) => {
   return (
     <SpeedyLink href={"/home"} className="hover:!no-underline">
       <ActionButton
         nav
         icon={<HomeSmall />}
-        label="Writer Home"
-        className={props.current ? "bg-bg-page! border-border-light!" : ""}
+        label="Write"
+        className={`${props.current ? "bg-bg-page! border-border-light!" : ""} ${props.className}`}
       />
     </SpeedyLink>
   );
@@ -82,14 +86,7 @@ export const WriterButton = (props: {
             nav
             labelOnMobile={true}
             icon={<WriterSmall />}
-            label=<div className="flex flex-row gap-1">
-              Writer
-              {current && (
-                <>
-                  <Divider /> {currentIcon}
-                </>
-              )}
-            </div>
+            label=<div className="flex flex-row gap-1">Write</div>
             className={current ? "bg-bg-page! border-border-light!" : ""}
           />
         ) : (
@@ -99,11 +96,6 @@ export const WriterButton = (props: {
             icon={
               <>
                 <WriterSmall />
-                {current && (
-                  <>
-                    <Divider /> {currentIcon}
-                  </>
-                )}
               </>
             }
             label=<div className="flex flex-row gap-1">Writer</div>
@@ -116,7 +108,7 @@ export const WriterButton = (props: {
         <ActionButton
           nav
           icon={<HomeSmall />}
-          label="Writer Home"
+          label="Write"
           className={
             props.currentPage === "home"
               ? "bg-bg-page! border-border-light!"
@@ -145,7 +137,7 @@ export const ReaderButton = (props: {
         nav
         labelOnMobile={props.compactOnMobile}
         icon={<ReaderUnreadSmall />}
-        label="Reader"
+        label="Read"
         className={props.current ? "bg-bg-page! border-border-light!" : ""}
       />
     </SpeedyLink>
diff --git a/components/ActionBar/Publications.tsx b/components/ActionBar/Publications.tsx
index 7cc59f31..f0b87d0d 100644
--- a/components/ActionBar/Publications.tsx
+++ b/components/ActionBar/Publications.tsx
@@ -20,10 +20,13 @@ import { useIsMobile } from "src/hooks/isMobile";
 import { useState } from "react";
 import { LooseLeafSmall } from "components/Icons/LooseleafSmall";
 import type { navPages } from "./NavigationButtons";
+import { AddTiny } from "components/Icons/AddTiny";
 
 export const PublicationButtons = (props: {
   currentPage: navPages;
   currentPubUri: string | undefined;
+  className?: string;
+  optionClassName?: string;
 }) => {
   let { identity } = useIdentityData();
   let hasLooseleafs = !!identity?.permission_token_on_homepage.find(
@@ -38,12 +41,14 @@ export const PublicationButtons = (props: {
     return <PubListEmpty />;
 
   return (
-    <div className="pubListWrapper w-full  flex flex-col sm:bg-transparent sm:border-0">
+    <div
+      className={`pubListWrapper w-full  flex flex-col sm:bg-transparent sm:border-0 ${props.className}`}
+    >
       {hasLooseleafs && (
         <>
           <SpeedyLink
             href={`/looseleafs`}
-            className="flex gap-2 items-start text-secondary font-bold hover:no-underline! hover:text-accent-contrast w-full"
+            className={`flex gap-2 items-start text-secondary font-bold hover:no-underline! hover:text-accent-contrast w-full `}
           >
             {/*TODO How should i get if this is the current page or not?
               theres not "pub" to check the uri for. Do i need to add it as an option to NavPages? thats kinda annoying*/}
@@ -51,11 +56,12 @@ export const PublicationButtons = (props: {
               label="Looseleafs"
               icon={<LooseLeafSmall />}
               nav
-              className={
+              className={`${
                 props.currentPage === "looseleafs"
                   ? "bg-bg-page! border-border!"
                   : ""
               }
+                ${props.optionClassName}`}
             />
           </SpeedyLink>
         </>
@@ -68,14 +74,16 @@ export const PublicationButtons = (props: {
             key={d.uri}
             record={d.record}
             current={d.uri === props.currentPubUri}
+            className={props.optionClassName}
           />
         );
       })}
       <Link
         href={"/lish/createPub"}
-        className="pubListCreateNew  text-accent-contrast text-sm place-self-end hover:text-accent-contrast"
+        className={`pubListCreateNew group/new-pub text-tertiary hover:text-accent-contrast flex gap-2 items-center p-1 no-underline! ${props.optionClassName}`}
       >
-        New
+        <div className="group-hover/new-pub:border-accent-contrast w-6 h-6 border-border-light border-2 border-dashed rounded-full" />
+        New Publication
       </Link>
     </div>
   );
@@ -86,6 +94,7 @@ export const PublicationOption = (props: {
   name: string;
   record: Json;
   current?: boolean;
+  className?: string;
 }) => {
   let record = normalizePublicationRecord(props.record);
   if (!record) return;
@@ -93,13 +102,13 @@ export const PublicationOption = (props: {
   return (
     <SpeedyLink
       href={`${getBasePublicationURL(props)}/dashboard`}
-      className="flex gap-2 items-start text-secondary font-bold hover:no-underline! hover:text-accent-contrast w-full"
+      className={`flex gap-2 items-start text-secondary font-bold hover:no-underline! hover:text-accent-contrast w-full `}
     >
       <ActionButton
         label={record.name}
         icon={<PubIcon record={record} uri={props.uri} />}
         nav
-        className={props.current ? "bg-bg-page! border-border!" : ""}
+        className={`${props.current ? "bg-bg-page! border-border!" : ""} ${props.className}`}
       />
     </SpeedyLink>
   );
diff --git a/components/PageLayouts/DashboardLayout.tsx b/components/PageLayouts/DashboardLayout.tsx
index 8096c2b0..c33256f5 100644
--- a/components/PageLayouts/DashboardLayout.tsx
+++ b/components/PageLayouts/DashboardLayout.tsx
@@ -27,6 +27,7 @@ import Link from "next/link";
 import { ExternalLinkTiny } from "components/Icons/ExternalLinkTiny";
 import { usePreserveScroll } from "src/hooks/usePreserveScroll";
 import { Tab } from "components/Tab";
+import { PubIcon, PublicationButtons } from "components/ActionBar/Publications";
 
 export type DashboardState = {
   display?: "grid" | "list";
@@ -141,6 +142,7 @@ export function DashboardLayout<
   publication?: string;
   profileDid?: string;
   actions: React.ReactNode;
+  pageTitle?: React.ReactNode;
 }) {
   const searchParams = useSearchParams();
   const tabParam = searchParams.get("tab");
@@ -167,6 +169,7 @@ export function DashboardLayout<
   let [headerState, setHeaderState] = useState<"default" | "controls">(
     "default",
   );
+
   return (
     <DashboardIdContext.Provider value={props.id}>
       <div
@@ -186,6 +189,8 @@ export function DashboardLayout<
           ref={ref}
           id="home-content"
         >
+          {props.pageTitle}
+
           {Object.keys(props.tabs).length <= 1 && !controls ? null : (
             <>
               <Header>
@@ -256,6 +261,21 @@ export function DashboardLayout<
   );
 }
 
+export const PageTitle = (props: {
+  pageTitle: string;
+  controls: React.ReactNode;
+}) => {
+  return (
+    <MediaContents
+      mobile={true}
+      className="flex justify-between items-center px-1 mt-1 -mb-1 w-full "
+    >
+      <h4 className="grow truncate">{props.pageTitle}</h4>
+      <div className="shrink-0 h-6">{props.controls}</div>
+    </MediaContents>
+  );
+};
+
 export const HomeDashboardControls = (props: {
   searchValue: string;
   setSearchValueAction: (searchValue: string) => void;
@@ -449,7 +469,7 @@ const SearchInput = (props: {
         className={`dashboardSearchInput
           appearance-none! outline-hidden!
           w-full min-w-0 text-primary relative pl-7  pr-1 -my-px
-          border rounded-md border-transparent focus-within:border-border
+          border rounded-md border-border-light focus-within:border-border
           bg-transparent ${props.hasBackgroundImage ? "focus-within:bg-bg-page" : "focus-within:bg-bg-leaflet"} `}
         type="text"
         id="pubName"
-- 
2.51.2