From cbe6678cd5eb5423ab6725dff2b904701a6ff8e3 Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Wed, 14 Jan 2026 22:57:17 -0500
Subject: [PATCH] don't show the toolbar on blocks without toolbar actions

---
 app/[leaflet_id]/Footer.tsx                | 18 ++++++++-
 app/lish/[did]/[publication]/icon/route.ts |  1 -
 components/DesktopFooter.tsx               |  7 ++++
 components/Toolbar/BlockToolbar.tsx        | 39 --------------------
 components/Toolbar/ImageToolbar.tsx        | 29 ++++++++++++++-
 components/Toolbar/index.tsx               | 43 +++++++---------------
 6 files changed, 66 insertions(+), 71 deletions(-)
 delete mode 100644 components/Toolbar/BlockToolbar.tsx

diff --git a/app/[leaflet_id]/Footer.tsx b/app/[leaflet_id]/Footer.tsx
index 94a5a9a3..d51cff0d 100644
--- a/app/[leaflet_id]/Footer.tsx
+++ b/app/[leaflet_id]/Footer.tsx
@@ -8,22 +8,37 @@ import { ShareOptions } from "app/[leaflet_id]/actions/ShareOptions";
 import { HomeButton } from "app/[leaflet_id]/actions/HomeButton";
 import { PublishButton } from "./actions/PublishButton";
 import { useEntitySetContext } from "components/EntitySetProvider";
-import { HelpButton } from "app/[leaflet_id]/actions/HelpButton";
 import { Watermark } from "components/Watermark";
 import { BackToPubButton } from "./actions/BackToPubButton";
 import { useLeafletPublicationData } from "components/PageSWRDataProvider";
 import { useIdentityData } from "components/IdentityProvider";
+import { useEntity } from "src/replicache";
+import { block } from "sharp";
 
+export function hasBlockToolbar(blockType: string | null | undefined) {
+  return (
+    blockType === "text" ||
+    blockType === "heading" ||
+    blockType === "blockquote" ||
+    blockType === "button" ||
+    blockType === "datetime" ||
+    blockType === "image"
+  );
+}
 export function LeafletFooter(props: { entityID: string }) {
   let focusedBlock = useUIState((s) => s.focusedEntity);
+
   let entity_set = useEntitySetContext();
   let { identity } = useIdentityData();
   let { data: pub } = useLeafletPublicationData();
+  let blockType = useEntity(focusedBlock?.entityID || null, "block/type")?.data
+    .value;
 
   return (
     <Media mobile className="mobileFooter w-full z-10 touch-none -mt-[54px] ">
       {focusedBlock &&
       focusedBlock.entityType == "block" &&
+      hasBlockToolbar(blockType) &&
       entity_set.permissions.write ? (
         <div
           className="w-full z-10 p-2 flex bg-bg-page pwa-padding-bottom"
@@ -34,6 +49,7 @@ export function LeafletFooter(props: { entityID: string }) {
           <Toolbar
             pageID={focusedBlock.parent}
             blockID={focusedBlock.entityID}
+            blockType={blockType}
           />
         </div>
       ) : entity_set.permissions.write ? (
diff --git a/app/lish/[did]/[publication]/icon/route.ts b/app/lish/[did]/[publication]/icon/route.ts
index 80d8921e..f435dda0 100644
--- a/app/lish/[did]/[publication]/icon/route.ts
+++ b/app/lish/[did]/[publication]/icon/route.ts
@@ -14,7 +14,6 @@ export async function GET(
   request: NextRequest,
   props: { params: Promise<{ did: string; publication: string }> },
 ) {
-  console.log("are we getting here?");
   const params = await props.params;
   try {
     let did = decodeURIComponent(params.did);
diff --git a/components/DesktopFooter.tsx b/components/DesktopFooter.tsx
index 3675dd3a..f8937218 100644
--- a/components/DesktopFooter.tsx
+++ b/components/DesktopFooter.tsx
@@ -4,6 +4,8 @@ import { Media } from "./Media";
 import { Toolbar } from "./Toolbar";
 import { useEntitySetContext } from "./EntitySetProvider";
 import { focusBlock } from "src/utils/focusBlock";
+import { hasBlockToolbar } from "app/[leaflet_id]/Footer";
+import { useEntity } from "src/replicache";
 
 export function DesktopPageFooter(props: { pageID: string }) {
   let focusedEntity = useUIState((s) => s.focusedEntity);
@@ -13,6 +15,9 @@ export function DesktopPageFooter(props: { pageID: string }) {
       : focusedEntity?.parent;
   let entity_set = useEntitySetContext();
 
+  let blockType = useEntity(focusedEntity?.entityID || null, "block/type")?.data
+    .value;
+
   return (
     <Media
       mobile={false}
@@ -20,6 +25,7 @@ export function DesktopPageFooter(props: { pageID: string }) {
     >
       {focusedEntity &&
         focusedEntity.entityType === "block" &&
+        hasBlockToolbar(blockType) &&
         entity_set.permissions.write &&
         focusedBlockParentID === props.pageID && (
           <div
@@ -29,6 +35,7 @@ export function DesktopPageFooter(props: { pageID: string }) {
             }}
           >
             <Toolbar
+              blockType={blockType}
               pageID={focusedBlockParentID}
               blockID={focusedEntity.entityID}
             />
diff --git a/components/Toolbar/BlockToolbar.tsx b/components/Toolbar/BlockToolbar.tsx
deleted file mode 100644
index aea80bab..00000000
--- a/components/Toolbar/BlockToolbar.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { useEntity } from "src/replicache";
-import { Separator } from "components/Layout";
-import { useUIState } from "src/useUIState";
-import { TextAlignmentButton } from "./TextAlignmentToolbar";
-import {
-  ImageFullBleedButton,
-  ImageAltTextButton,
-  ImageCoverButton,
-} from "./ImageToolbar";
-
-export const ImageToolbar = (props: {
-  setToolbarState: (state: "image" | "text-alignment") => void;
-}) => {
-  let focusedEntity = useUIState((s) => s.focusedEntity);
-  let focusedEntityType = useEntity(
-    focusedEntity?.entityType === "page"
-      ? focusedEntity.entityID
-      : focusedEntity?.parent || null,
-    "page/type",
-  );
-  let blockType = useEntity(
-    focusedEntity?.entityType === "block" ? focusedEntity?.entityID : null,
-    "block/type",
-  )?.data.value;
-
-  return (
-    <div className="flex items-center gap-2 justify-between w-full">
-      <div className="flex items-center gap-2">
-        <TextAlignmentButton setToolbarState={props.setToolbarState} />
-        <ImageFullBleedButton />
-        <ImageAltTextButton />
-        <ImageCoverButton />
-        {focusedEntityType?.data.value !== "canvas" && (
-          <Separator classname="h-6!" />
-        )}
-      </div>
-    </div>
-  );
-};
diff --git a/components/Toolbar/ImageToolbar.tsx b/components/Toolbar/ImageToolbar.tsx
index 7016ffa2..4991047f 100644
--- a/components/Toolbar/ImageToolbar.tsx
+++ b/components/Toolbar/ImageToolbar.tsx
@@ -7,6 +7,34 @@ import { ImageAltSmall, ImageRemoveAltSmall } from "components/Icons/ImageAlt";
 import { useLeafletPublicationData } from "components/PageSWRDataProvider";
 import { useSubscribe } from "src/replicache/useSubscribe";
 import { ImageCoverImage } from "components/Icons/ImageCoverImage";
+import { Separator } from "components/Layout";
+import { TextAlignmentButton } from "./TextAlignmentToolbar";
+
+export const ImageToolbar = (props: {
+  setToolbarState: (state: "image" | "text-alignment") => void;
+}) => {
+  let focusedEntity = useUIState((s) => s.focusedEntity);
+  let focusedEntityType = useEntity(
+    focusedEntity?.entityType === "page"
+      ? focusedEntity.entityID
+      : focusedEntity?.parent || null,
+    "page/type",
+  );
+
+  return (
+    <div className="flex items-center gap-2 justify-between w-full">
+      <div className="flex items-center gap-2">
+        <TextAlignmentButton setToolbarState={props.setToolbarState} />
+        <ImageAltTextButton />
+        <ImageFullBleedButton />
+        <ImageCoverButton />
+        {focusedEntityType?.data.value !== "canvas" && (
+          <Separator classname="h-6!" />
+        )}
+      </div>
+    </div>
+  );
+};
 
 export const ImageFullBleedButton = (props: {}) => {
   let { rep } = useReplicache();
@@ -46,7 +74,6 @@ export const ImageAltTextButton = (props: {}) => {
   let altEditorOpen = useUIState((s) => s.openPopover === focusedBlock);
   let hasSrc = useEntity(focusedBlock, "block/image")?.data;
   if (!hasSrc) return null;
-  console.log("alt: " + altText);
   return (
     <ToolbarButton
       active={altText !== undefined}
diff --git a/components/Toolbar/index.tsx b/components/Toolbar/index.tsx
index f8d764fd..061d213d 100644
--- a/components/Toolbar/index.tsx
+++ b/components/Toolbar/index.tsx
@@ -11,10 +11,8 @@ import { addShortcut } from "src/shortcuts";
 import { ListToolbar } from "./ListToolbar";
 import { HighlightToolbar } from "./HighlightToolbar";
 import { TextToolbar } from "./TextToolbar";
-import { ImageToolbar } from "./BlockToolbar";
+import { ImageToolbar } from "./ImageToolbar";
 import { MultiselectToolbar } from "./MultiSelectToolbar";
-import { AreYouSure } from "components/Blocks/DeleteBlock";
-import { deleteBlock } from "src/utils/deleteBlock";
 import { TooltipButton } from "components/Buttons";
 import { TextAlignmentToolbar } from "./TextAlignmentToolbar";
 import { useIsMobile } from "src/hooks/isMobile";
@@ -32,17 +30,15 @@ export type ToolbarTypes =
   | "img-alt-text"
   | "image";
 
-export const Toolbar = (props: { pageID: string; blockID: string }) => {
-  let { rep } = useReplicache();
-
+export const Toolbar = (props: {
+  pageID: string;
+  blockID: string;
+  blockType: string | null | undefined;
+}) => {
   let [toolbarState, setToolbarState] = useState<ToolbarTypes>("default");
 
-  let focusedEntity = useUIState((s) => s.focusedEntity);
-  let selectedBlocks = useUIState((s) => s.selectedBlocks);
   let activeEditor = useEditorStates((s) => s.editorStates[props.blockID]);
 
-  let blockType = useEntity(props.blockID, "block/type")?.data.value;
-
   let lastUsedHighlight = useUIState((s) => s.lastUsedHighlight);
   let setLastUsedHighlight = (color: "1" | "2" | "3") =>
     useUIState.setState({
@@ -64,34 +60,23 @@ export const Toolbar = (props: { pageID: string; blockID: string }) => {
   }, [toolbarState]);
 
   let isTextBlock =
-    blockType === "heading" ||
-    blockType === "text" ||
-    blockType === "blockquote";
+    props.blockType === "heading" ||
+    props.blockType === "text" ||
+    props.blockType === "blockquote";
 
   useEffect(() => {
     if (isTextBlock) {
       setToolbarState("default");
     }
-    if (blockType === "image") {
+    if (props.blockType === "image") {
       setToolbarState("image");
     }
-    if (blockType === "button" || blockType === "datetime") {
+    if (props.blockType === "button" || props.blockType === "datetime") {
       setToolbarState("text-alignment");
-    } else return;
-  }, [blockType]);
+    } else null;
+  }, [props.blockType]);
 
-  useEffect(() => {
-    if (
-      selectedBlocks.length > 1 &&
-      !["areYousure", "text-alignment"].includes(toolbarState)
-    ) {
-      setToolbarState("multiselect");
-    } else if (toolbarState === "multiselect") {
-      setToolbarState("default");
-    }
-  }, [selectedBlocks.length, toolbarState]);
   let isMobile = useIsMobile();
-
   return (
     <Tooltip.Provider>
       <div
@@ -154,7 +139,7 @@ export const Toolbar = (props: { pageID: string; blockID: string }) => {
                 selectedBlocks: [],
               }));
             } else {
-              if (blockType === "image") {
+              if (props.blockType === "image") {
                 setToolbarState("image");
               }
               if (isTextBlock) {
-- 
2.51.2