From 4a8480f35afe12c2703f07a19579e06ec3f509fb Mon Sep 17 00:00:00 2001
From: Jared Pereira <jared@awarm.space>
Date: Thu, 5 Mar 2026 18:58:14 -0500
Subject: [PATCH] add toolbar stuff

---
 app/[leaflet_id]/Footer.tsx                   | 12 +++
 app/globals.css                               |  6 +-
 components/DesktopFooter.tsx                  | 15 ++++
 components/Footnotes/FootnoteContext.tsx      |  2 +
 components/Footnotes/FootnoteEditor.tsx       | 88 ++++++++++++++++++-
 .../Footnotes/FootnoteSideColumnLayout.tsx    |  8 +-
 components/Footnotes/usePageFootnotes.ts      |  4 +-
 components/Toolbar/FootnoteTextToolbar.tsx    | 71 +++++++++++++++
 components/Toolbar/FootnoteToolbarWrapper.tsx | 77 ++++++++++++++++
 src/useUIState.ts                             |  2 +
 10 files changed, 278 insertions(+), 7 deletions(-)
 create mode 100644 components/Toolbar/FootnoteTextToolbar.tsx
 create mode 100644 components/Toolbar/FootnoteToolbarWrapper.tsx

diff --git a/app/[leaflet_id]/Footer.tsx b/app/[leaflet_id]/Footer.tsx
index ad063f02..f8ff45fa 100644
--- a/app/[leaflet_id]/Footer.tsx
+++ b/app/[leaflet_id]/Footer.tsx
@@ -4,6 +4,7 @@ import { Footer } from "components/ActionBar/Footer";
 import { Media } from "components/Media";
 import { ThemePopover } from "components/ThemeManager/ThemeSetter";
 import { Toolbar } from "components/Toolbar";
+import { FootnoteToolbar } from "components/Toolbar/FootnoteToolbarWrapper";
 import { ShareOptions } from "app/[leaflet_id]/actions/ShareOptions";
 import { HomeButton } from "app/[leaflet_id]/actions/HomeButton";
 import { PublishButton } from "./actions/PublishButton";
@@ -56,6 +57,17 @@ export function LeafletFooter(props: { entityID: string }) {
             blockType={blockType}
           />
         </div>
+      ) : focusedBlock &&
+        focusedBlock.entityType === "footnote" &&
+        entity_set.permissions.write ? (
+        <div
+          className="w-full z-10 p-2 flex bg-bg-page pwa-padding-bottom"
+          onMouseDown={(e) => {
+            if (e.currentTarget === e.target) e.preventDefault();
+          }}
+        >
+          <FootnoteToolbar pageID={focusedBlock.parent} />
+        </div>
       ) : entity_set.permissions.write ? (
         <Footer>
           {pub?.publications &&
diff --git a/app/globals.css b/app/globals.css
index 8a475218..1b8b939a 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -544,10 +544,12 @@ pre.shiki {
   transition: opacity 200ms ease;
 }
 .footnote-side-item:hover,
-.footnote-side-item:focus-within {
+.footnote-side-item:focus-within,
+.footnote-side-item.footnote-side-focused {
   max-height: 40em;
 }
 .footnote-side-item:hover::after,
-.footnote-side-item:focus-within::after {
+.footnote-side-item:focus-within::after,
+.footnote-side-item.footnote-side-focused::after {
   opacity: 0;
 }
diff --git a/components/DesktopFooter.tsx b/components/DesktopFooter.tsx
index f8937218..976b47b7 100644
--- a/components/DesktopFooter.tsx
+++ b/components/DesktopFooter.tsx
@@ -2,6 +2,7 @@
 import { useUIState } from "src/useUIState";
 import { Media } from "./Media";
 import { Toolbar } from "./Toolbar";
+import { FootnoteToolbar } from "./Toolbar/FootnoteToolbarWrapper";
 import { useEntitySetContext } from "./EntitySetProvider";
 import { focusBlock } from "src/utils/focusBlock";
 import { hasBlockToolbar } from "app/[leaflet_id]/Footer";
@@ -18,6 +19,10 @@ export function DesktopPageFooter(props: { pageID: string }) {
   let blockType = useEntity(focusedEntity?.entityID || null, "block/type")?.data
     .value;
 
+  let isFootnoteFocused =
+    focusedEntity?.entityType === "footnote" &&
+    focusedEntity.parent === props.pageID;
+
   return (
     <Media
       mobile={false}
@@ -41,6 +46,16 @@ export function DesktopPageFooter(props: { pageID: string }) {
             />
           </div>
         )}
+      {isFootnoteFocused && entity_set.permissions.write && (
+        <div
+          className="pointer-events-auto w-fit mx-auto py-1 px-3 h-9 bg-bg-page border border-border rounded-full shadow-sm"
+          onMouseDown={(e) => {
+            if (e.currentTarget === e.target) e.preventDefault();
+          }}
+        >
+          <FootnoteToolbar pageID={props.pageID} />
+        </div>
+      )}
     </Media>
   );
 }
diff --git a/components/Footnotes/FootnoteContext.tsx b/components/Footnotes/FootnoteContext.tsx
index c656d7e2..918c7461 100644
--- a/components/Footnotes/FootnoteContext.tsx
+++ b/components/Footnotes/FootnoteContext.tsx
@@ -2,11 +2,13 @@ import { createContext, useContext } from "react";
 import type { FootnoteInfo } from "./usePageFootnotes";
 
 type FootnoteContextValue = {
+  pageID: string;
   footnotes: FootnoteInfo[];
   indexMap: Record<string, number>;
 };
 
 export const FootnoteContext = createContext<FootnoteContextValue>({
+  pageID: "",
   footnotes: [],
   indexMap: {},
 });
diff --git a/components/Footnotes/FootnoteEditor.tsx b/components/Footnotes/FootnoteEditor.tsx
index 1b56edcc..e2e5e907 100644
--- a/components/Footnotes/FootnoteEditor.tsx
+++ b/components/Footnotes/FootnoteEditor.tsx
@@ -1,5 +1,5 @@
 import { useLayoutEffect, useRef } from "react";
-import { EditorState } from "prosemirror-state";
+import { EditorState, TextSelection } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
 import { baseKeymap, toggleMark } from "prosemirror-commands";
 import { keymap } from "prosemirror-keymap";
@@ -7,12 +7,16 @@ import { ySyncPlugin } from "y-prosemirror";
 import { schema } from "components/Blocks/TextBlock/schema";
 import { useReplicache } from "src/replicache";
 import { autolink } from "components/Blocks/TextBlock/autolink-plugin";
+import { betterIsUrl } from "src/utils/isURL";
 import {
   useYJSValue,
   trackUndoRedo,
 } from "components/Blocks/TextBlock/mountProsemirror";
 import { CloseTiny } from "components/Icons/CloseTiny";
 import { FootnoteItemLayout } from "./FootnoteItemLayout";
+import { useEditorStates } from "src/state/useEditorState";
+import { useUIState } from "src/useUIState";
+import { useFootnoteContext } from "./FootnoteContext";
 
 export function FootnoteEditor(props: {
   footnoteEntityID: string;
@@ -25,6 +29,7 @@ export function FootnoteEditor(props: {
   let rep = useReplicache();
   let value = useYJSValue(props.footnoteEntityID);
   let actionTimeout = useRef<number | null>(null);
+  let { pageID } = useFootnoteContext();
 
   useLayoutEffect(() => {
     if (!mountRef.current || !value) return;
@@ -66,11 +71,54 @@ export function FootnoteEditor(props: {
       {
         state,
         editable: () => props.editable,
+        handlePaste: (view, e) => {
+          let text = e.clipboardData?.getData("text");
+          if (text && betterIsUrl(text)) {
+            let selection = view.state.selection as TextSelection;
+            let tr = view.state.tr;
+            let { from, to } = selection;
+            if (selection.empty) {
+              tr.insertText(text, selection.from);
+              tr.addMark(
+                from,
+                from + text.length,
+                schema.marks.link.create({ href: text }),
+              );
+            } else {
+              tr.addMark(from, to, schema.marks.link.create({ href: text }));
+            }
+            view.dispatch(tr);
+            return true;
+          }
+        },
+        handleClickOn: (_view, _pos, node, _nodePos, _event, direct) => {
+          if (!direct) return;
+          if (node.nodeSize - 2 <= _pos) return;
+          const nodeAt1 = node.nodeAt(_pos - 1);
+          const nodeAt2 = node.nodeAt(Math.max(_pos - 2, 0));
+          let linkMark =
+            nodeAt1?.marks.find((f) => f.type === schema.marks.link) ||
+            nodeAt2?.marks.find((f) => f.type === schema.marks.link);
+          if (linkMark) {
+            window.open(linkMark.attrs.href, "_blank");
+            return;
+          }
+        },
         dispatchTransaction(this: EditorView, tr) {
           let oldState = this.state;
           let newState = this.state.apply(tr);
           this.updateState(newState);
 
+          useEditorStates.setState((s) => ({
+            editorStates: {
+              ...s.editorStates,
+              [props.footnoteEntityID]: {
+                editor: newState,
+                view: this,
+              },
+            },
+          }));
+
           trackUndoRedo(
             tr,
             rep.undoManager,
@@ -88,14 +136,50 @@ export function FootnoteEditor(props: {
       },
     );
 
+    // Register editor state
+    useEditorStates.setState((s) => ({
+      editorStates: {
+        ...s.editorStates,
+        [props.footnoteEntityID]: {
+          editor: view.state,
+          view,
+        },
+      },
+    }));
+
+    // Subscribe to external state changes (e.g. link toolbar)
+    let unsubscribe = useEditorStates.subscribe((s) => {
+      let editorState = s.editorStates[props.footnoteEntityID];
+      if (editorState?.editor)
+        editorState.view?.updateState(editorState.editor);
+    });
+
+    // Set focusedEntity on focus
+    let handleFocus = () => {
+      useUIState.setState({
+        focusedEntity: {
+          entityType: "footnote",
+          entityID: props.footnoteEntityID,
+          parent: pageID,
+        },
+      });
+    };
+    view.dom.addEventListener("focus", handleFocus);
+
     if (props.autoFocus) {
       setTimeout(() => view.focus(), 50);
     }
 
     return () => {
+      unsubscribe();
+      view.dom.removeEventListener("focus", handleFocus);
       view.destroy();
+      useEditorStates.setState((s) => {
+        let { [props.footnoteEntityID]: _, ...rest } = s.editorStates;
+        return { editorStates: rest };
+      });
     };
-  }, [props.footnoteEntityID, value, props.editable, props.autoFocus, rep.undoManager]);
+  }, [props.footnoteEntityID, value, props.editable, props.autoFocus, rep.undoManager, pageID]);
 
   return (
     <FootnoteItemLayout
diff --git a/components/Footnotes/FootnoteSideColumnLayout.tsx b/components/Footnotes/FootnoteSideColumnLayout.tsx
index 8379f057..2f326f40 100644
--- a/components/Footnotes/FootnoteSideColumnLayout.tsx
+++ b/components/Footnotes/FootnoteSideColumnLayout.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useRef, useState, useCallback, ReactNode } from "react";
+import { useUIState } from "src/useUIState";
 
 export type FootnoteSideItem = {
   id: string;
@@ -131,6 +132,11 @@ function SideItem(props: {
 }) {
   let ref = useRef<HTMLDivElement>(null);
   let [overflows, setOverflows] = useState(false);
+  let isFocused = useUIState(
+    (s) =>
+      s.focusedEntity?.entityType === "footnote" &&
+      s.focusedEntity.entityID === props.id,
+  );
 
   useEffect(() => {
     let el = ref.current;
@@ -158,7 +164,7 @@ function SideItem(props: {
     <div
       ref={ref}
       data-footnote-side-id={props.id}
-      className={`absolute left-0 right-0 text-xs footnote-side-enter footnote-side-item${overflows ? " has-overflow" : ""}`}
+      className={`absolute left-0 right-0 text-xs footnote-side-enter footnote-side-item${overflows ? " has-overflow" : ""}${isFocused ? " footnote-side-focused" : ""}`}
       style={{ top: props.top }}
     >
       {props.children}
diff --git a/components/Footnotes/usePageFootnotes.ts b/components/Footnotes/usePageFootnotes.ts
index 3f5038e6..164c517c 100644
--- a/components/Footnotes/usePageFootnotes.ts
+++ b/components/Footnotes/usePageFootnotes.ts
@@ -39,10 +39,10 @@ export function usePageFootnotes(pageID: string) {
         }
       }
 
-      return { footnotes, indexMap };
+      return { pageID, footnotes, indexMap };
     },
     { dependencies: [pageID] },
   );
 
-  return data || { footnotes: [], indexMap: {} as Record<string, number> };
+  return data || { pageID, footnotes: [], indexMap: {} as Record<string, number> };
 }
diff --git a/components/Toolbar/FootnoteTextToolbar.tsx b/components/Toolbar/FootnoteTextToolbar.tsx
new file mode 100644
index 00000000..5c11aa5d
--- /dev/null
+++ b/components/Toolbar/FootnoteTextToolbar.tsx
@@ -0,0 +1,71 @@
+import { Separator, ShortcutKey } from "components/Layout";
+import { metaKey } from "src/utils/metaKey";
+import { LinkButton } from "./InlineLinkToolbar";
+import { TextDecorationButton } from "./TextDecorationButton";
+import { schema } from "components/Blocks/TextBlock/schema";
+import { BoldSmall, ItalicSmall, StrikethroughSmall } from "./TextToolbar";
+import { isMac } from "src/utils/isDevice";
+import { ToolbarTypes } from ".";
+
+export const FootnoteTextToolbar = (props: {
+  setToolbarState: (s: ToolbarTypes) => void;
+}) => {
+  return (
+    <>
+      <TextDecorationButton
+        tooltipContent={
+          <div className="flex flex-col gap-1 justify-center">
+            <div className="text-center">Bold </div>
+            <div className="flex gap-1">
+              <ShortcutKey>{metaKey()}</ShortcutKey> +{" "}
+              <ShortcutKey> B </ShortcutKey>
+            </div>
+          </div>
+        }
+        mark={schema.marks.strong}
+        icon={<BoldSmall />}
+      />
+      <TextDecorationButton
+        tooltipContent={
+          <div className="flex flex-col gap-1 justify-center">
+            <div className="italic font-normal text-center">Italic</div>
+            <div className="flex gap-1">
+              <ShortcutKey>{metaKey()}</ShortcutKey> +{" "}
+              <ShortcutKey> I </ShortcutKey>
+            </div>
+          </div>
+        }
+        mark={schema.marks.em}
+        icon={<ItalicSmall />}
+      />
+      <TextDecorationButton
+        tooltipContent={
+          <div className="flex flex-col gap-1 justify-center">
+            <div className="text-center font-normal line-through">
+              Strikethrough
+            </div>
+            <div className="flex gap-1">
+              {isMac() ? (
+                <>
+                  <ShortcutKey>⌘</ShortcutKey> +{" "}
+                  <ShortcutKey> Ctrl </ShortcutKey> +{" "}
+                  <ShortcutKey> X </ShortcutKey>
+                </>
+              ) : (
+                <>
+                  <ShortcutKey> Ctrl </ShortcutKey> +{" "}
+                  <ShortcutKey> Meta </ShortcutKey> +{" "}
+                  <ShortcutKey> X </ShortcutKey>
+                </>
+              )}
+            </div>
+          </div>
+        }
+        mark={schema.marks.strikethrough}
+        icon={<StrikethroughSmall />}
+      />
+      <Separator classname="h-6!" />
+      <LinkButton setToolbarState={props.setToolbarState} />
+    </>
+  );
+};
diff --git a/components/Toolbar/FootnoteToolbarWrapper.tsx b/components/Toolbar/FootnoteToolbarWrapper.tsx
new file mode 100644
index 00000000..22ec52a3
--- /dev/null
+++ b/components/Toolbar/FootnoteToolbarWrapper.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { InlineLinkToolbar } from "./InlineLinkToolbar";
+import { useEditorStates } from "src/state/useEditorState";
+import { useUIState } from "src/useUIState";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { addShortcut } from "src/shortcuts";
+import { FootnoteTextToolbar } from "./FootnoteTextToolbar";
+import { useIsMobile } from "src/hooks/isMobile";
+import { CloseTiny } from "components/Icons/CloseTiny";
+
+type FootnoteToolbarState = "default" | "link";
+
+export const FootnoteToolbar = (props: { pageID: string }) => {
+  let [toolbarState, setToolbarState] = useState<FootnoteToolbarState>("default");
+  let focusedEntity = useUIState((s) => s.focusedEntity);
+  let activeEditor = useEditorStates((s) =>
+    focusedEntity ? s.editorStates[focusedEntity.entityID] : null,
+  );
+
+  useEffect(() => {
+    if (toolbarState !== "default") return;
+    let removeShortcut = addShortcut({
+      metaKey: true,
+      key: "k",
+      handler: () => {
+        setToolbarState("link");
+      },
+    });
+    return () => {
+      removeShortcut();
+    };
+  }, [toolbarState]);
+
+  let isMobile = useIsMobile();
+  return (
+    <Tooltip.Provider>
+      <div
+        className={`toolbar flex gap-2 items-center justify-between w-full
+        ${isMobile ? "h-[calc(15px+var(--safe-padding-bottom))]" : "h-[26px]"}`}
+      >
+        <div className="toolbarOptions flex gap-1 sm:gap-[6px] items-center grow">
+          {toolbarState === "default" ? (
+            <FootnoteTextToolbar setToolbarState={setToolbarState} />
+          ) : toolbarState === "link" ? (
+            <InlineLinkToolbar
+              onClose={() => {
+                activeEditor?.view?.focus();
+                setToolbarState("default");
+              }}
+            />
+          ) : null}
+        </div>
+        <button
+          className="toolbarBackToDefault hover:text-accent-contrast"
+          onMouseDown={(e) => {
+            e.preventDefault();
+            if (toolbarState === "default") {
+              useUIState.setState(() => ({
+                focusedEntity: {
+                  entityType: "page",
+                  entityID: props.pageID,
+                },
+                selectedBlocks: [],
+              }));
+            } else {
+              setToolbarState("default");
+            }
+          }}
+        >
+          <CloseTiny />
+        </button>
+      </div>
+    </Tooltip.Provider>
+  );
+};
diff --git a/src/useUIState.ts b/src/useUIState.ts
index a205c794..713fe980 100644
--- a/src/useUIState.ts
+++ b/src/useUIState.ts
@@ -10,6 +10,7 @@ export const useUIState = create(
       focusedEntity: null as
         | { entityType: "page"; entityID: string }
         | { entityType: "block"; entityID: string; parent: string }
+        | { entityType: "footnote"; entityID: string; parent: string }
         | null,
       foldedBlocks: [] as string[],
       openPages: [] as string[],
@@ -47,6 +48,7 @@ export const useUIState = create(
         b:
           | { entityType: "page"; entityID: string }
           | { entityType: "block"; entityID: string; parent: string }
+          | { entityType: "footnote"; entityID: string; parent: string }
           | null,
       ) => set(() => ({ focusedEntity: b })),
       setSelectedBlock: (block: SelectedBlock) =>
-- 
2.51.2