From ec8410c3d8213340de35357d85126dd2cf99c54b Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Wed, 29 Apr 2026 17:12:45 -0400
Subject: [PATCH] more futzing

---
 app/(home-pages)/home/Actions/Actions.tsx     |  2 -
 .../home/Actions/CreateNewButton.tsx          | 23 +++++---
 app/(home-pages)/home/HomeLayout.tsx          |  8 +--
 .../looseleafs/LooseleafsLayout.tsx           |  5 +-
 app/(home-pages)/looseleafs/page.tsx          |  4 --
 .../dashboard/NewDraftButton.tsx              | 23 ++++++--
 .../dashboard/PublicationDashboard.tsx        | 27 ++++++---
 .../dashboard/settings/ProSettings.tsx        |  9 ++-
 components/ActionBar/MobileNavigation.tsx     | 58 ++++++++++++-------
 components/Icons/SortSmall.tsx                |  1 +
 components/PageLayouts/DashboardLayout.tsx    | 11 +++-
 .../PageLayouts/DashboardPageLayout.tsx       | 10 ++--
 components/PageLayouts/PageSearch.tsx         | 16 +++--
 13 files changed, 126 insertions(+), 71 deletions(-)

diff --git a/app/(home-pages)/home/Actions/Actions.tsx b/app/(home-pages)/home/Actions/Actions.tsx
index 743e6721..dd300243 100644
--- a/app/(home-pages)/home/Actions/Actions.tsx
+++ b/app/(home-pages)/home/Actions/Actions.tsx
@@ -1,7 +1,5 @@
 "use client";
-import { ThemePopover } from "components/ThemeManager/ThemeSetter";
 import { CreateNewLeafletButton } from "./CreateNewButton";
-import { HelpButton } from "app/[leaflet_id]/actions/HelpButton";
 import { HomeThemeSetter } from "./HomeThemeSetter";
 import { useIdentityData } from "components/IdentityProvider";
 import { useReplicache } from "src/replicache";
diff --git a/app/(home-pages)/home/Actions/CreateNewButton.tsx b/app/(home-pages)/home/Actions/CreateNewButton.tsx
index 732bf847..f3892d58 100644
--- a/app/(home-pages)/home/Actions/CreateNewButton.tsx
+++ b/app/(home-pages)/home/Actions/CreateNewButton.tsx
@@ -2,13 +2,14 @@
 
 import { createNewLeaflet } from "actions/createNewLeaflet";
 import { ActionButton } from "components/ActionBar/ActionButton";
+import { ButtonPrimary } from "components/Buttons";
 import { AddTiny } from "components/Icons/AddTiny";
 import { BlockCanvasPageSmall } from "components/Icons/BlockCanvasPageSmall";
 import { BlockDocPageSmall } from "components/Icons/BlockDocPageSmall";
 import { Menu, MenuItem } from "components/Menu";
 import { useIsMobile } from "src/hooks/isMobile";
 
-export const CreateNewLeafletButton = (props: {}) => {
+export const CreateNewLeafletButton = (props: { compact?: boolean }) => {
   let isMobile = useIsMobile();
   let openNewLeaflet = (id: string) => {
     if (isMobile) {
@@ -23,13 +24,19 @@ export const CreateNewLeafletButton = (props: {}) => {
       side={isMobile ? "top" : "right"}
       align={isMobile ? "center" : "start"}
       trigger={
-        <ActionButton
-          labelOnMobile
-          id="new-leaflet-button"
-          primary
-          icon=<AddTiny className="m-1" />
-          label="New"
-        />
+        props.compact ? (
+          <ButtonPrimary compact className="text-sm!">
+            <AddTiny className="scale-90" /> New Doc
+          </ButtonPrimary>
+        ) : (
+          <ActionButton
+            labelOnMobile
+            id="new-leaflet-button"
+            primary
+            icon=<AddTiny className="m-1" />
+            label="New"
+          />
+        )
       }
     >
       <MenuItem
diff --git a/app/(home-pages)/home/HomeLayout.tsx b/app/(home-pages)/home/HomeLayout.tsx
index 68d35e5a..7ed879c6 100644
--- a/app/(home-pages)/home/HomeLayout.tsx
+++ b/app/(home-pages)/home/HomeLayout.tsx
@@ -27,7 +27,7 @@ import { useDebouncedEffect } from "src/hooks/useDebouncedEffect";
 import { HomeEmptyState } from "./HomeEmpty/HomeEmpty";
 import { PageTitle } from "components/ActionBar/DesktopNavigation";
 import { HomeSmall } from "components/Icons/HomeSmall";
-import { HomeTiny } from "components/Icons/HomeTiny";
+import { CreateNewLeafletButton } from "./Actions/CreateNewButton";
 
 export type Leaflet = {
   added_at: string;
@@ -82,15 +82,15 @@ export const HomeLayout = (props: {
       currentPage="home"
       defaultTab="home"
       actions={<Actions />}
-      pageTitle={<PageTitle icon={<HomeTiny />} pageTitle="Home" />}
+      pageTitle={<PageTitle icon={<HomeSmall />} pageTitle="Home" />}
       tabs={{
         home: {
           content: (
             <DashboardPageLayout
               scrollKey="dashboard-home"
               pageTitle="Home"
-              actions={<Actions />}
-              controls={
+              mobileActions={<CreateNewLeafletButton compact />}
+              search={
                 <PageSearch
                   defaultDisplay={"grid"}
                   searchValue={searchValue}
diff --git a/app/(home-pages)/looseleafs/LooseleafsLayout.tsx b/app/(home-pages)/looseleafs/LooseleafsLayout.tsx
index ff7aa140..47015094 100644
--- a/app/(home-pages)/looseleafs/LooseleafsLayout.tsx
+++ b/app/(home-pages)/looseleafs/LooseleafsLayout.tsx
@@ -9,11 +9,10 @@ import { Actions } from "../home/Actions/Actions";
 import { callRPC } from "app/api/rpc/client";
 import { useIdentityData } from "components/IdentityProvider";
 import useSWR from "swr";
-import { getHomeDocs } from "../home/storage";
 import { Leaflet, LeafletList } from "../home/HomeLayout";
 import { PageTitle } from "components/ActionBar/DesktopNavigation";
-import { LooseLeafSmall } from "components/Icons/LooseleafSmall";
 import { LooseleafTiny } from "components/Icons/LooseleafTiny";
+import { CreateNewLeafletButton } from "../home/Actions/CreateNewButton";
 
 export const LooseleafsLayout = (props: {
   entityID: string | null;
@@ -48,7 +47,7 @@ export const LooseleafsLayout = (props: {
             <DashboardPageLayout
               scrollKey="dashboard-looseleafs-home"
               pageTitle="Looseleafs"
-              actions={<Actions />}
+              mobileActions={<CreateNewLeafletButton compact />}
               showHeader={false}
             >
               <LooseleafList
diff --git a/app/(home-pages)/looseleafs/page.tsx b/app/(home-pages)/looseleafs/page.tsx
index 9ae9f7b3..49e61614 100644
--- a/app/(home-pages)/looseleafs/page.tsx
+++ b/app/(home-pages)/looseleafs/page.tsx
@@ -1,8 +1,4 @@
 import { getIdentityData } from "actions/getIdentityData";
-import { DashboardLayout } from "components/PageLayouts/DashboardLayout";
-import { Actions } from "../home/Actions/Actions";
-import { Fact } from "src/replicache";
-import { Attribute } from "src/replicache/attributes";
 import { getFactsFromHomeLeaflets } from "app/api/rpc/[command]/getFactsFromHomeLeaflets";
 import { supabaseServerClient } from "supabase/serverClient";
 import { LooseleafsLayout } from "./LooseleafsLayout";
diff --git a/app/lish/[did]/[publication]/dashboard/NewDraftButton.tsx b/app/lish/[did]/[publication]/dashboard/NewDraftButton.tsx
index f6ae4a0e..ce79ef3c 100644
--- a/app/lish/[did]/[publication]/dashboard/NewDraftButton.tsx
+++ b/app/lish/[did]/[publication]/dashboard/NewDraftButton.tsx
@@ -1,21 +1,32 @@
 "use client";
 import { createPublicationDraft } from "actions/createPublicationDraft";
 import { ActionButton } from "components/ActionBar/ActionButton";
-import { ButtonSecondary } from "components/Buttons";
+import { ButtonPrimary, ButtonSecondary } from "components/Buttons";
 import { AddTiny } from "components/Icons/AddTiny";
 import { useRouter } from "next/navigation";
 
-export function NewDraftActionButton(props: { publication: string }) {
+export function NewDraftActionButton(props: {
+  publication: string;
+  compact?: boolean;
+}) {
   let router = useRouter();
 
+  async function handleOnClick() {
+    let newLeaflet = await createPublicationDraft(props.publication);
+    router.push(`/${newLeaflet}`);
+  }
+
+  if (props.compact)
+    return (
+      <ButtonPrimary compact className="text-sm!" onClick={handleOnClick}>
+        <AddTiny className="scale-90" /> Draft
+      </ButtonPrimary>
+    );
   return (
     <ActionButton
       id="new-leaflet-button"
       primary
-      onClick={async () => {
-        let newLeaflet = await createPublicationDraft(props.publication);
-        router.push(`/${newLeaflet}`);
-      }}
+      onClick={handleOnClick}
       icon=<AddTiny className="m-1" />
       className="w-full"
       label="Draft"
diff --git a/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx b/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx
index 6185098c..7b2fbd4e 100644
--- a/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx
+++ b/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx
@@ -13,10 +13,11 @@ import { type NormalizedPublication } from "src/utils/normalizeRecords";
 import { PublicationAnalytics } from "./PublicationAnalytics";
 import { useCanSeePro } from "src/hooks/useEntitlement";
 import { SettingsContent } from "./settings/SettingsContent";
-import { SettingsTiny } from "components/Icons/SettingsTiny";
 import { PageSearch } from "components/PageLayouts/PageSearch";
 import { PubIcon } from "components/ActionBar/Publications";
 import { PageTitle } from "components/ActionBar/DesktopNavigation";
+import { NewDraftActionButton } from "./NewDraftButton";
+import { SettingsSmall } from "components/Icons/SettingsSmall";
 
 export default function PublicationDashboard({
   publication,
@@ -62,8 +63,10 @@ export default function PublicationDashboard({
             <DashboardPageLayout
               scrollKey={`dashboard-${pubUri}-Drafts`}
               pageTitle="Drafts"
-              actions={<Actions publication={pubUri} />}
-              controls={
+              mobileActions={
+                <NewDraftActionButton publication={pubUri} compact />
+              }
+              search={
                 <PageSearch
                   defaultDisplay={"list"}
                   hasBackgroundImage={!!record?.theme?.backgroundImage}
@@ -86,7 +89,9 @@ export default function PublicationDashboard({
             <DashboardPageLayout
               scrollKey={`dashboard-${pubUri}-Posts`}
               pageTitle={"Posts"}
-              actions={<Actions publication={pubUri} />}
+              mobileActions={
+                <NewDraftActionButton publication={pubUri} compact />
+              }
               publication={pubUri}
               showHeader={false}
             >
@@ -102,7 +107,9 @@ export default function PublicationDashboard({
             <DashboardPageLayout
               scrollKey={`dashboard-${pubUri}-Subs`}
               pageTitle={"Subscribers"}
-              actions={<Actions publication={pubUri} />}
+              mobileActions={
+                <NewDraftActionButton publication={pubUri} compact />
+              }
               publication={pubUri}
               showHeader={false}
             >
@@ -117,7 +124,9 @@ export default function PublicationDashboard({
                   <DashboardPageLayout
                     scrollKey={`dashboard-${pubUri}-Analytics`}
                     pageTitle={"Analytics"}
-                    actions={<Actions publication={pubUri} />}
+                    mobileActions={
+                      <NewDraftActionButton publication={pubUri} compact />
+                    }
                     publication={pubUri}
                     showHeader={false}
                   >
@@ -130,12 +139,14 @@ export default function PublicationDashboard({
             }
           : {}),
         Settings: {
-          icon: <SettingsTiny />,
+          icon: <SettingsSmall />,
           content: (
             <DashboardPageLayout
               scrollKey={`dashboard-${pubUri}-Settings`}
               pageTitle={"Settings"}
-              actions={<Actions publication={pubUri} />}
+              mobileActions={
+                <NewDraftActionButton publication={pubUri} compact />
+              }
               publication={pubUri}
               showHeader={false}
             >
diff --git a/app/lish/[did]/[publication]/dashboard/settings/ProSettings.tsx b/app/lish/[did]/[publication]/dashboard/settings/ProSettings.tsx
index a5b79c5a..0bca697e 100644
--- a/app/lish/[did]/[publication]/dashboard/settings/ProSettings.tsx
+++ b/app/lish/[did]/[publication]/dashboard/settings/ProSettings.tsx
@@ -147,13 +147,16 @@ export const NewsletterSettings = () => {
         </div>
 
         <div className="flex flex-col gap-1">
-          <label className="text-secondary font-bold" htmlFor="newsletterReplyTo">
+          <label
+            className="text-secondary font-bold"
+            htmlFor="newsletterReplyTo"
+          >
             Reply-to Email{" "}
             <span className="font-normal text-tertiary">(optional)</span>
           </label>
           <p className="text-tertiary text-sm leading-snug">
-            Where subscriber replies are sent. Leave blank to use the
-            no-reply address ({NO_REPLY_EMAIL}).
+            Where subscriber replies are sent. Leave blank to use the no-reply
+            address ({NO_REPLY_EMAIL}).
           </p>
           <div className="flex gap-2 items-stretch max-w-prose">
             <Input
diff --git a/components/ActionBar/MobileNavigation.tsx b/components/ActionBar/MobileNavigation.tsx
index 273b0caf..420b8015 100644
--- a/components/ActionBar/MobileNavigation.tsx
+++ b/components/ActionBar/MobileNavigation.tsx
@@ -10,8 +10,8 @@ import { SearchTiny } from "components/Icons/SearchTiny";
 import { useCardBorderHidden } from "components/Pages/useCardBorderHidden";
 
 export const MobileNavigation = (props: {
-  controls?: React.ReactNode;
-  actions?: React.ReactNode;
+  search?: React.ReactNode;
+  mobileActions?: React.ReactNode;
   pageTitle: string;
 }) => {
   let [state, setState] = useState<"search" | "default">("default");
@@ -79,43 +79,59 @@ export const MobileNavigation = (props: {
         }
       >
         <div
-          className={`mobilePageHeaderContent border rounded-lg border-border-light flex gap-4 justify-between items-center p-1 w-full`}
+          className={`mobilePageHeaderContent rounded-lg  text-secondary flex gap-2 border justify-between items-center py-1 w-full ${cardBorderHidden && scrollPos < 20 ? "border-transparent" : " border-border-light"}`}
           style={
             scrollPos < 20
               ? {
+                  paddingLeft: cardBorderHidden
+                    ? `calc(${scrollPos / 20}*8px)`
+                    : "8px",
+                  paddingRight: cardBorderHidden
+                    ? `calc(${scrollPos / 20}*8px)`
+                    : "8px",
                   backgroundColor: !cardBorderHidden
                     ? `rgba(${headerBGColor}, ${scrollPos / 60 + 0.75})`
                     : `rgba(${headerBGColor}, ${scrollPos / 20})`,
                 }
-              : { backgroundColor: `rgb(${headerBGColor})` }
+              : {
+                  paddingLeft: "8px",
+                  paddingRight: "8px",
+                  backgroundColor: cardBorderHidden
+                    ? "color-mix(in oklab, rgb(var(--primary)), rgb(var(--bg-page)) 95%)"
+                    : `rgb(var(--bg-page))`,
+                }
           }
         >
-          {props.controls && state === "search" ? (
+          {state === "default" ? (
             <>
-              {props.controls}
-              <Separator classname="h-6" />
-              <button
-                onClick={() => {
-                  setState("default");
-                }}
-              >
-                <CloseTiny />
-              </button>
+              <MobileSidebarTrigger pageTitle={props.pageTitle} />
+              <div className="flex-1" />
+
+              {props.search && (
+                <button
+                  onClick={() => {
+                    setState("search");
+                  }}
+                >
+                  <SearchTiny />
+                </button>
+              )}
+              <div className="flex flex-row-reverse! gap-1">
+                {props.mobileActions}
+              </div>
             </>
           ) : (
             <>
-              <MobileSidebarTrigger pageTitle={props.pageTitle} />
-              <div className="flex-1" />
+              {props.search}
+              <Separator classname="h-6!" />
               <button
+                className="text-secondary"
                 onClick={() => {
-                  setState("search");
+                  setState("default");
                 }}
               >
-                <SearchTiny />
+                <CloseTiny />
               </button>
-              <div className="flex flex-row-reverse! gap-1">
-                {props.actions}
-              </div>
             </>
           )}
         </div>
diff --git a/components/Icons/SortSmall.tsx b/components/Icons/SortSmall.tsx
index 795a59c7..e80b5c24 100644
--- a/components/Icons/SortSmall.tsx
+++ b/components/Icons/SortSmall.tsx
@@ -8,6 +8,7 @@ export const SortSmall = (props: Props) => {
       viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      {...props}
     >
       <path
         d="M6.67186 18.5V8.74805L4.70408 10.7002C4.31199 11.089 3.67892 11.0863 3.29002 10.6943C2.90107 10.3023 2.90381 9.66923 3.29588 9.28027L6.96776 5.6377L7.04295 5.56934C7.43471 5.25182 8.01037 5.27501 8.37596 5.6377L12.0478 9.28027C12.4399 9.66924 12.4427 10.3023 12.0537 10.6943C11.6648 11.0863 11.0317 11.089 10.6396 10.7002L8.67186 8.74805V18.5C8.67186 19.0523 8.22414 19.5 7.67186 19.5C7.1196 19.5 6.67186 19.0523 6.67186 18.5ZM15.3281 5.5C15.3281 4.94772 15.7758 4.5 16.3281 4.5C16.8804 4.50003 17.3281 4.94774 17.3281 5.5V15.1016L19.2959 13.1504C19.688 12.7616 20.321 12.7642 20.7099 13.1562C21.0988 13.5483 21.0961 14.1814 20.7041 14.5703L17.0322 18.2129C16.6423 18.5997 16.0139 18.5997 15.624 18.2129L11.9521 14.5703C11.5601 14.1814 11.5573 13.5483 11.9463 13.1562C12.3352 12.7642 12.9683 12.7615 13.3603 13.1504L15.3281 15.1016V5.5Z"
diff --git a/components/PageLayouts/DashboardLayout.tsx b/components/PageLayouts/DashboardLayout.tsx
index cf9d1704..f440da1e 100644
--- a/components/PageLayouts/DashboardLayout.tsx
+++ b/components/PageLayouts/DashboardLayout.tsx
@@ -167,7 +167,16 @@ export function DashboardLayout<
         <Dialog.Root open={open} onOpenChange={setOpen}>
           <Dialog.Portal>
             <Dialog.Overlay className="fixed z-50 inset-0 bg-primary opacity-60 data-[state=open]:animate-overlayShow" />
-            <Dialog.Content className="mobile-sidebar-content fixed z-50 left-0 top-0 h-dvh outline-none">
+            <Dialog.Content
+              className="mobile-sidebar-content fixed z-50 left-0 top-0 h-dvh outline-none"
+              onClick={(e) => {
+                const target = e.target as HTMLElement;
+                const interactive = target.closest("a, button");
+                if (!interactive) return;
+                if (interactive.getAttribute("aria-haspopup")) return;
+                setOpen(false);
+              }}
+            >
               <Dialog.Title className="sr-only">Navigation</Dialog.Title>
               <Sidebar
                 mobile
diff --git a/components/PageLayouts/DashboardPageLayout.tsx b/components/PageLayouts/DashboardPageLayout.tsx
index 7880336d..08cbc186 100644
--- a/components/PageLayouts/DashboardPageLayout.tsx
+++ b/components/PageLayouts/DashboardPageLayout.tsx
@@ -6,8 +6,8 @@ import { usePreserveScroll } from "src/hooks/usePreserveScroll";
 export function DashboardPageLayout(props: {
   scrollKey: string;
   pageTitle: string;
-  actions?: React.ReactNode;
-  controls?: React.ReactNode;
+  mobileActions?: React.ReactNode;
+  search?: React.ReactNode;
   publication?: string;
   showHeader?: boolean;
   children: React.ReactNode;
@@ -21,15 +21,15 @@ export function DashboardPageLayout(props: {
       id="home-content"
     >
       <MobileNavigation
-        controls={props.controls}
-        actions={props.actions}
+        search={props.search}
+        mobileActions={props.mobileActions}
         pageTitle={props.pageTitle}
       />
 
       {props.showHeader && (
         <PageHeader>
           <div className={`sm:block ${props.publication && "hidden"} grow`}>
-            {props.controls}
+            {props.search}
           </div>
         </PageHeader>
       )}
diff --git a/components/PageLayouts/PageSearch.tsx b/components/PageLayouts/PageSearch.tsx
index 22b474c4..7b8a652f 100644
--- a/components/PageLayouts/PageSearch.tsx
+++ b/components/PageLayouts/PageSearch.tsx
@@ -27,7 +27,7 @@ export const PageSearch = (props: {
   let { identity } = useIdentityData();
 
   return (
-    <div className="dashboardControls w-full flex sm:gap-4 gap-2">
+    <div className="searchControls w-full flex sm:gap-4 gap-2">
       {identity && (
         <SearchInput
           searchValue={props.searchValue}
@@ -35,7 +35,7 @@ export const PageSearch = (props: {
           hasBackgroundImage={props.hasBackgroundImage}
         />
       )}
-      <div className="hidden sm:flex gap-2 w-max shrink-0 items-center text-sm text-tertiary">
+      <div className="desktopSearchControls hidden sm:flex gap-2 w-max shrink-0 items-center text-sm text-tertiary">
         <DisplayToggle setState={setState} display={display} />
         <Separator classname="h-4 min-h-4!" />
         {props.hasPubs || props.hasArchived ? (
@@ -201,9 +201,13 @@ const MobileSearchControls = (props: {
   return (
     <Popover
       align="end"
-      className="text-sm w-48"
+      className={`text-sm w-48`}
       trigger={
-        <SortSmall className={filterCount > 0 ? "text-accent-contrast" : ""} />
+        <div
+          className={`${filterCount > 0 ? "text-accent-2 bg-accent-1 rounded-md" : "text-secondary"}`}
+        >
+          <SortSmall />
+        </div>
       }
     >
       <button
@@ -259,7 +263,7 @@ const SearchInput = (props: {
           appearance-none! outline-hidden!
           w-full min-w-0 text-primary relative pl-7 pr-1 -my-px
           border rounded-md border-border-light focus-within:border-border
-          bg-transparent ${props.hasBackgroundImage ? "focus-within:bg-bg-page" : "focus-within:bg-bg-leaflet"} `}
+          bg-transparent focus-within:bg-bg-page`}
         type="text"
         id="pubName"
         size={1}
@@ -269,7 +273,7 @@ const SearchInput = (props: {
           props.setSearchValue(e.currentTarget.value);
         }}
       />
-      <div className="absolute left-[6px] top-[4px] text-tertiary">
+      <div className="absolute left-[6px] top-[4px] text-secondary">
         <SearchTiny />
       </div>
     </div>
-- 
2.51.2