From 1103f747b73f1add04ba997e1e338af0688fe6d7 Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Wed, 3 Dec 2025 14:49:40 -0500
Subject: [PATCH] new doc button update

---
 .../home/Actions/CreateNewButton.tsx          | 79 +++++++++++++++++--
 .../looseleafs/LooseleafsLayout.tsx           |  8 +-
 components/ActionBar/ActionButton.tsx         | 24 +++---
 components/ActionBar/Publications.tsx         |  1 +
 components/PageLayouts/DashboardLayout.tsx    |  7 +-
 5 files changed, 90 insertions(+), 29 deletions(-)

diff --git a/app/(home-pages)/home/Actions/CreateNewButton.tsx b/app/(home-pages)/home/Actions/CreateNewButton.tsx
index bfd7dfe7..8d2203be 100644
--- a/app/(home-pages)/home/Actions/CreateNewButton.tsx
+++ b/app/(home-pages)/home/Actions/CreateNewButton.tsx
@@ -1,12 +1,21 @@
 "use client";
 
+import { Action } from "@vercel/sdk/esm/models/userevent";
 import { createNewLeaflet } from "actions/createNewLeaflet";
 import { ActionButton } from "components/ActionBar/ActionButton";
 import { AddTiny } from "components/Icons/AddTiny";
+import { ArrowDownTiny } from "components/Icons/ArrowDownTiny";
 import { BlockCanvasPageSmall } from "components/Icons/BlockCanvasPageSmall";
 import { BlockDocPageSmall } from "components/Icons/BlockDocPageSmall";
-import { Menu, MenuItem } from "components/Layout";
+import { LooseLeafSmall } from "components/Icons/LooseleafSmall";
+import { Menu, MenuItem, Separator } from "components/Layout";
 import { useIsMobile } from "src/hooks/isMobile";
+import { useIdentityData } from "components/IdentityProvider";
+import { PubIcon } from "components/ActionBar/Publications";
+import { PubLeafletPublication } from "lexicons/api";
+import { createPublicationDraft } from "actions/createPublicationDraft";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
 
 export const CreateNewLeafletButton = (props: {}) => {
   let isMobile = useIsMobile();
@@ -17,21 +26,51 @@ export const CreateNewLeafletButton = (props: {}) => {
       window.open(`/${id}?focusFirstBlock`, "_blank");
     }
   };
+  return (
+    <div className="flex gap-0 flex-row w-full">
+      <ActionButton
+        id="new-leaflet-button"
+        primary
+        icon=<AddTiny className="m-1 shrink-0" />
+        label="New"
+        className="grow rounded-r-none sm:ml-0! sm:mr-0! ml-1! mr-0!"
+      />
+      <Separator />
+      <CreateNewMoreOptionsButton />
+    </div>
+  );
+};
+
+export const CreateNewMoreOptionsButton = (props: {}) => {
+  let { identity } = useIdentityData();
+
+  let isMobile = useIsMobile();
+  let openNewLeaflet = (id: string) => {
+    if (isMobile) {
+      window.location.href = `/${id}?focusFirstBlock`;
+    } else {
+      window.open(`/${id}?focusFirstBlock`, "_blank");
+    }
+  };
+
   return (
     <Menu
       asChild
       side={isMobile ? "top" : "right"}
       align={isMobile ? "center" : "start"}
+      className="py-2"
       trigger={
         <ActionButton
-          id="new-leaflet-button"
+          id="new-leaflet-more-options"
           primary
-          icon=<AddTiny className="m-1 shrink-0" />
-          label="New"
+          icon=<ArrowDownTiny className="m-1 shrink-0 sm:-rotate-90 rotate-180" />
+          className="shrink-0 rounded-l-none w-[34px]! sm:mr-0! sm:ml-0! mr-1! ml-0!"
         />
       }
     >
+      <div className="mx-2 text-sm text-tertiary ">New Leaflet</div>
       <MenuItem
+        className="pt-0.5!"
         onSelect={async () => {
           let id = await createNewLeaflet({
             pageType: "doc",
@@ -40,15 +79,16 @@ export const CreateNewLeafletButton = (props: {}) => {
           openNewLeaflet(id);
         }}
       >
-        <BlockDocPageSmall />{" "}
+        <BlockDocPageSmall />
         <div className="flex flex-col">
-          <div>New Doc</div>
+          <div>Doc</div>
           <div className="text-tertiary text-sm font-normal">
             A good ol&apos; text document
           </div>
         </div>
       </MenuItem>
       <MenuItem
+        className="pt-0.5!"
         onSelect={async () => {
           let id = await createNewLeaflet({
             pageType: "canvas",
@@ -59,12 +99,37 @@ export const CreateNewLeafletButton = (props: {}) => {
       >
         <BlockCanvasPageSmall />
         <div className="flex flex-col">
-          New Canvas
+          Canvas
           <div className="text-tertiary text-sm font-normal">
             A digital whiteboard
           </div>
         </div>
       </MenuItem>
+      <div className="mx-2 text-sm text-tertiary mt-2">New Draft</div>
+
+      {identity?.publications.map((pub) => {
+        let router = useRouter();
+        return (
+          <MenuItem
+            onSelect={async () => {
+              let newLeaflet = await createPublicationDraft(pub.uri);
+              router.push(`/${newLeaflet}`);
+            }}
+          >
+            <PubIcon
+              record={pub.record as PubLeafletPublication.Record}
+              uri={pub.uri}
+            />
+            {pub.name}
+          </MenuItem>
+        );
+      })}
+
+      <hr className="border-border-light border-dashed mx-2 my-0.5" />
+      <MenuItem onSelect={async () => {}}>
+        <LooseLeafSmall />
+        Looseleaf
+      </MenuItem>
     </Menu>
   );
 };
diff --git a/app/(home-pages)/looseleafs/LooseleafsLayout.tsx b/app/(home-pages)/looseleafs/LooseleafsLayout.tsx
index dc567eb9..fd1ba95b 100644
--- a/app/(home-pages)/looseleafs/LooseleafsLayout.tsx
+++ b/app/(home-pages)/looseleafs/LooseleafsLayout.tsx
@@ -75,12 +75,8 @@ const LooseleafDraftList = (props: { empty: boolean }) => {
   if (props.empty)
     return (
       <EmptyState className="pt-2">
-        <div className="italic">
-          You haven't written any looseleaf drafts yet.
-        </div>
-        <ButtonPrimary className="mx-auto">
-          Start a Looseleaf Draft
-        </ButtonPrimary>
+        <div className="italic">You don't have any looseleaf drafts yet…</div>
+        <ButtonPrimary className="mx-auto">New Draft</ButtonPrimary>
       </EmptyState>
     );
   return (
diff --git a/components/ActionBar/ActionButton.tsx b/components/ActionBar/ActionButton.tsx
index ed7bded2..66306371 100644
--- a/components/ActionBar/ActionButton.tsx
+++ b/components/ActionBar/ActionButton.tsx
@@ -11,7 +11,7 @@ export const ActionButton = (
   _props: ButtonProps & {
     id?: string;
     icon: React.ReactNode;
-    label: React.ReactNode;
+    label?: React.ReactNode;
     primary?: boolean;
     secondary?: boolean;
     nav?: boolean;
@@ -69,16 +69,18 @@ export const ActionButton = (
       `}
     >
       <div className="shrink-0">{icon}</div>
-      <div
-        className={`flex flex-col pr-1 leading-snug max-w-full min-w-0  ${sidebar.open ? "block" : showLabelOnMobile ? "sm:hidden block" : "hidden"}`}
-      >
-        <div className="truncate text-left pt-[1px]">{label}</div>
-        {subtext && (
-          <div className="text-xs text-tertiary font-normal text-left">
-            {subtext}
-          </div>
-        )}
-      </div>
+      {label && (
+        <div
+          className={`flex flex-col pr-1 leading-snug max-w-full min-w-0  ${sidebar.open ? "block" : showLabelOnMobile ? "sm:hidden block" : "hidden"}`}
+        >
+          <div className="truncate text-left pt-[1px]">{label}</div>
+          {subtext && (
+            <div className="text-xs text-tertiary font-normal text-left">
+              {subtext}
+            </div>
+          )}
+        </div>
+      )}
     </button>
   );
 };
diff --git a/components/ActionBar/Publications.tsx b/components/ActionBar/Publications.tsx
index fa5a55fe..ffedd5a4 100644
--- a/components/ActionBar/Publications.tsx
+++ b/components/ActionBar/Publications.tsx
@@ -26,6 +26,7 @@ export const PublicationButtons = (props: {
   let hasLooseleafs = !!identity?.permission_token_on_homepage.find(
     (f) => f.permission_tokens.leaflets_to_documents,
   );
+  console.log(hasLooseleafs);
 
   // don't show pub list button if not logged in or no pub list
   // we show a "start a pub" banner instead
diff --git a/components/PageLayouts/DashboardLayout.tsx b/components/PageLayouts/DashboardLayout.tsx
index 9fcd52df..5177f8ac 100644
--- a/components/PageLayouts/DashboardLayout.tsx
+++ b/components/PageLayouts/DashboardLayout.tsx
@@ -372,10 +372,7 @@ function Tab(props: {
   );
 }
 
-const FilterOptions = (props: {
-  hasPubs: boolean;
-  hasArchived: boolean;
-}) => {
+const FilterOptions = (props: { hasPubs: boolean; hasArchived: boolean }) => {
   let { filter } = useDashboardState();
   let setState = useSetDashboardState();
   let filterCount = Object.values(filter).filter(Boolean).length;
@@ -472,7 +469,7 @@ const SearchInput = (props: {
         type="text"
         id="pubName"
         size={1}
-        placeholder="search..."
+        placeholder="search…"
         value={props.searchValue}
         onChange={(e) => {
           props.setSearchValue(e.currentTarget.value);
-- 
2.51.2