From f3108c88a15dd0ff2c4785f3686642fb6768ed39 Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Wed, 14 Jan 2026 19:13:14 -0500
Subject: [PATCH] added move block up and down buttons to the block options
 buttons, refactored moveBlockUp/Down to be utility functions

---
 components/Blocks/Block.tsx           | 54 +++++++++++++++---
 components/Blocks/ImageBlock.tsx      |  3 +-
 components/Icons/DeleteTiny.tsx       | 19 +++++++
 components/SelectionManager/index.tsx | 72 ++----------------------
 components/Toolbar/BlockToolbar.tsx   | 75 ++-----------------------
 src/replicache/mutations.ts           | 39 ++++++++++---
 src/utils/moveBlock.ts                | 81 +++++++++++++++++++++++++++
 7 files changed, 189 insertions(+), 154 deletions(-)
 create mode 100644 components/Icons/DeleteTiny.tsx
 create mode 100644 src/utils/moveBlock.ts

diff --git a/components/Blocks/Block.tsx b/components/Blocks/Block.tsx
index 94f29c67..67f62860 100644
--- a/components/Blocks/Block.tsx
+++ b/components/Blocks/Block.tsx
@@ -34,6 +34,9 @@ import { deepEquals } from "src/utils/deepEquals";
 import { isTextBlock } from "src/utils/isTextBlock";
 import { focusPage } from "src/utils/focusPage";
 import { DeleteTiny } from "components/Icons/DeleteTiny";
+import { ArrowDownTiny } from "components/Icons/ArrowDownTiny";
+import { Separator } from "components/Layout";
+import { moveBlockUp, moveBlockDown } from "src/utils/moveBlock";
 
 export type Block = {
   factID: string;
@@ -395,7 +398,9 @@ export const BlockLayout = (props: {
 }) => {
   // this is used to wrap non-text blocks in consistent selected styling, spacing, and top level options like delete
   return (
-    <div className={`relative ${props.hasAlignment ? "w-fit" : "w-full"}`}>
+    <div
+      className={`nonTextBlockAndControls relative ${props.hasAlignment ? "w-fit" : "w-full"}`}
+    >
       <div
         className={`nonTextBlock ${props.className} p-2 sm:p-3 overflow-hidden
           ${props.hasAlignment ? "w-fit" : "w-full"}
@@ -412,18 +417,51 @@ export const BlockLayout = (props: {
       >
         {props.children}
       </div>
-      {props.isSelected && <DeleteBlock />}
+      {props.isSelected && <NonTextBlockOptions />}
     </div>
   );
 };
 
-const DeleteBlock = () => {
+const NonTextBlockOptions = (props: { isCanvas?: boolean }) => {
+  let { rep } = useReplicache();
+  let entity_set = useEntitySetContext();
+  let focusedEntity = useUIState((s) => s.focusedEntity);
+
+  let focusedEntityType = useEntity(
+    focusedEntity?.entityType === "page"
+      ? focusedEntity.entityID
+      : focusedEntity?.parent || null,
+    "page/type",
+  );
+
+  let isMultiselected = useUIState((s) => s.selectedBlocks.length > 1);
+
+  if (isMultiselected) return;
+
   return (
-    <div className="absolute -top-4 right-2">
-      <button
-        className="bg-border border-2 border-bg-page rounded-full p-1 text-bg-page"
-        onClick={() => {}}
-      >
+    <div className="flex gap-1 absolute -top-[25px] right-2 pb-0.5 pt-1 px-1 rounded-t-md bg-border text-bg-page">
+      {focusedEntityType?.data.value !== "canvas" && (
+        <>
+          <button
+            onClick={async () => {
+              if (!rep) return;
+              await moveBlockDown(rep, entity_set.set);
+            }}
+          >
+            <ArrowDownTiny />
+          </button>
+          <button
+            onClick={async () => {
+              if (!rep) return;
+              await moveBlockUp(rep);
+            }}
+          >
+            <ArrowDownTiny className="rotate-180" />
+          </button>
+          <Separator classname="border-bg-page! h-4! mx-0.5" />
+        </>
+      )}
+      <button onClick={() => {}}>
         <DeleteTiny />
       </button>
     </div>
diff --git a/components/Blocks/ImageBlock.tsx b/components/Blocks/ImageBlock.tsx
index b374de53..e7cb3bab 100644
--- a/components/Blocks/ImageBlock.tsx
+++ b/components/Blocks/ImageBlock.tsx
@@ -90,10 +90,9 @@ export function ImageBlock(props: BlockProps & { preview?: boolean }) {
       >
         <label
           className={`
-
             w-full h-full hover:cursor-pointer
             flex flex-col items-center justify-center
-            ${props.pageType === "canvas" && "bg-bg-page"}`}
+           `}
           onMouseDown={(e) => e.preventDefault()}
           onDragOver={(e) => {
             e.preventDefault();
diff --git a/components/Icons/DeleteTiny.tsx b/components/Icons/DeleteTiny.tsx
new file mode 100644
index 00000000..d77693e8
--- /dev/null
+++ b/components/Icons/DeleteTiny.tsx
@@ -0,0 +1,19 @@
+import { Props } from "./Props";
+
+export const DeleteTiny = (props: Props) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M4.84013 0.946324C5.45222 0.762486 6.19573 0.729124 6.97782 0.820347C7.32039 0.860495 7.56546 1.1711 7.52568 1.51371C7.48568 1.85656 7.17517 2.10252 6.83232 2.06253C6.16005 1.98415 5.5998 2.02378 5.20048 2.14359C4.79524 2.26531 4.64378 2.43772 4.59599 2.56351C4.34149 3.23723 5.58865 4.19255 6.08232 4.51761C6.54562 4.82266 7.09489 5.10483 7.70536 5.33597C8.80491 5.75229 9.85164 5.90795 10.6409 5.84769C11.4848 5.78311 11.8008 5.50429 11.8714 5.31839C11.9189 5.19263 11.9202 4.96386 11.6976 4.60453C11.478 4.25029 11.0842 3.84861 10.5286 3.46195C10.2455 3.26479 10.1754 2.87508 10.3724 2.59183C10.5696 2.30876 10.9592 2.23946 11.2425 2.43656C11.8885 2.88612 12.4235 3.40237 12.7601 3.94535C13.0932 4.48275 13.2786 5.13116 13.0403 5.76078C12.9083 6.10935 12.6779 6.37566 12.3909 6.57621C12.366 6.82447 12.311 7.37448 12.2425 8.01957C12.1491 8.89816 12.0306 9.96291 11.9329 10.6856C11.809 11.602 11.638 12.5144 11.4153 13.4121C11.237 14.0305 10.6957 14.4725 10.0989 14.75C9.43935 15.0567 8.58506 15.2285 7.63212 15.2285C5.83513 15.2285 4.30017 14.7464 3.83818 13.3604C3.76287 13.0881 3.70695 12.8096 3.6497 12.5332C3.55128 12.058 3.42826 11.4025 3.33134 10.6856C3.23301 9.95806 3.11264 8.74578 3.01689 7.72562C2.96878 7.21315 2.92679 6.74483 2.89677 6.40531C2.87398 6.14754 2.83052 5.88349 2.86454 5.62503C2.95213 4.95974 3.29709 4.69093 3.98271 4.32035C3.46821 3.68093 3.13499 2.89278 3.42704 2.12113C3.66559 1.49131 4.23434 1.12831 4.84013 0.946324ZM4.26103 7.60843C4.35712 8.63219 4.47618 9.82018 4.5706 10.5186C4.66257 11.1989 4.7799 11.8245 4.87431 12.2803C4.92135 12.5074 4.9622 12.6916 4.9915 12.8184C5.24073 13.8967 6.74216 13.9785 7.63212 13.9785C8.44689 13.9785 9.11364 13.8297 9.57255 13.6162C9.98848 13.4227 10.1815 13.2132 10.2727 12.8184C10.3608 12.4373 10.5558 11.538 10.6936 10.5186C10.7887 9.81541 10.9059 8.76587 10.9993 7.88675C11.027 7.62595 11.0512 7.38071 11.0735 7.16507C10.278 7.59273 9.18805 7.88086 7.96318 7.88089C7.26324 7.88089 6.60019 7.80834 6.0081 7.67875C5.37465 7.54007 4.79262 7.29359 4.20732 7.02347C4.22408 7.20782 4.24189 7.4046 4.26103 7.60843ZM5.65849 9.89847C5.93369 9.87744 6.17434 10.0843 6.1956 10.3594C6.21921 10.6683 6.24342 10.9585 6.26396 11.1602C6.29655 11.4801 6.34417 11.7883 6.38407 12.0176C6.40539 12.1401 6.4278 12.2622 6.45341 12.3838C6.51991 12.6498 6.33262 12.9262 6.06962 12.9825C5.79972 13.0399 5.55695 12.8734 5.47587 12.5977C5.43009 12.442 5.42115 12.3183 5.39872 12.1895C5.3563 11.9458 5.30461 11.6127 5.26884 11.2618C5.24694 11.0467 5.22223 10.7457 5.19853 10.4356C5.17773 10.1606 5.38354 9.91976 5.65849 9.89847ZM5.59208 8.40238C6.25224 8.40238 6.25244 9.45121 5.59208 9.45121C4.93177 9.4506 4.93197 8.40299 5.59208 8.40238ZM9.06767 1.26566C9.29634 1.00742 9.69106 0.983602 9.9495 1.21195C10.2079 1.44072 10.2319 1.83535 10.0032 2.09378L9.137 3.07132L8.9622 3.54496C8.84186 3.86848 8.48103 4.03346 8.15751 3.91312C7.83456 3.79265 7.67047 3.43357 7.79032 3.11039L8.00614 2.52738C8.03292 2.45553 8.07353 2.38952 8.12431 2.33207L9.06767 1.26566Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
diff --git a/components/SelectionManager/index.tsx b/components/SelectionManager/index.tsx
index c822ac0a..274b4444 100644
--- a/components/SelectionManager/index.tsx
+++ b/components/SelectionManager/index.tsx
@@ -17,6 +17,7 @@ import { deleteBlock } from "src/utils/deleteBlock";
 import { schema } from "../Blocks/TextBlock/schema";
 import { MarkType } from "prosemirror-model";
 import { useSelectingMouse, getSortedSelection } from "./selectionState";
+import { moveBlockUp, moveBlockDown } from "src/utils/moveBlock";
 
 //How should I model selection? As ranges w/ a start and end? Store *blocks* so that I can just construct ranges?
 // How does this relate to *when dragging* ?
@@ -240,35 +241,8 @@ export function SelectionManager() {
         shift: true,
         key: ["ArrowDown", "J"],
         handler: async () => {
-          let [sortedBlocks, siblings] = await getSortedSelectionBound();
-          let block = sortedBlocks[0];
-          let nextBlock = siblings
-            .slice(siblings.findIndex((s) => s.value === block.value) + 1)
-            .find(
-              (f) =>
-                f.listData &&
-                block.listData &&
-                !f.listData.path.find((f) => f.entity === block.value),
-            );
-          if (
-            nextBlock?.listData &&
-            block.listData &&
-            nextBlock.listData.depth === block.listData.depth - 1
-          ) {
-            if (useUIState.getState().foldedBlocks.includes(nextBlock.value))
-              useUIState.getState().toggleFold(nextBlock.value);
-            await rep?.mutate.moveBlock({
-              block: block.value,
-              oldParent: block.listData?.parent,
-              newParent: nextBlock.value,
-              position: { type: "first" },
-            });
-          } else {
-            await rep?.mutate.moveBlockDown({
-              entityID: block.value,
-              parent: block.listData?.parent || block.parent,
-            });
-          }
+          if (!rep) return;
+          await moveBlockDown(rep, entity_set.set);
         },
       },
       {
@@ -276,44 +250,8 @@ export function SelectionManager() {
         shift: true,
         key: ["ArrowUp", "K"],
         handler: async () => {
-          let [sortedBlocks, siblings] = await getSortedSelectionBound();
-          let block = sortedBlocks[0];
-          let previousBlock =
-            siblings?.[siblings.findIndex((s) => s.value === block.value) - 1];
-          if (previousBlock.value === block.listData?.parent) {
-            previousBlock =
-              siblings?.[
-                siblings.findIndex((s) => s.value === block.value) - 2
-              ];
-          }
-
-          if (
-            previousBlock?.listData &&
-            block.listData &&
-            block.listData.depth > 1 &&
-            !previousBlock.listData.path.find(
-              (f) => f.entity === block.listData?.parent,
-            )
-          ) {
-            let depth = block.listData.depth;
-            let newParent = previousBlock.listData.path.find(
-              (f) => f.depth === depth - 1,
-            );
-            if (!newParent) return;
-            if (useUIState.getState().foldedBlocks.includes(newParent.entity))
-              useUIState.getState().toggleFold(newParent.entity);
-            rep?.mutate.moveBlock({
-              block: block.value,
-              oldParent: block.listData?.parent,
-              newParent: newParent.entity,
-              position: { type: "end" },
-            });
-          } else {
-            rep?.mutate.moveBlockUp({
-              entityID: block.value,
-              parent: block.listData?.parent || block.parent,
-            });
-          }
+          if (!rep) return;
+          await moveBlockUp(rep);
         },
       },
 
diff --git a/components/Toolbar/BlockToolbar.tsx b/components/Toolbar/BlockToolbar.tsx
index fb97e302..29e3864c 100644
--- a/components/Toolbar/BlockToolbar.tsx
+++ b/components/Toolbar/BlockToolbar.tsx
@@ -11,7 +11,8 @@ import {
   ImageCoverButton,
 } from "./ImageToolbar";
 import { DeleteSmall } from "components/Icons/DeleteSmall";
-import { getSortedSelection } from "components/SelectionManager/selectionState";
+import { moveBlockUp, moveBlockDown } from "src/utils/moveBlock";
+import { useEntitySetContext } from "components/EntitySetProvider";
 
 export const BlockToolbar = (props: {
   setToolbarState: (
@@ -71,51 +72,14 @@ export const BlockToolbar = (props: {
 
 const MoveBlockButtons = () => {
   let { rep } = useReplicache();
+  let entity_set = useEntitySetContext();
   return (
     <>
       <ToolbarButton
         hiddenOnCanvas
         onClick={async () => {
           if (!rep) return;
-          let [sortedBlocks, siblings] = await getSortedSelection(rep);
-          if (sortedBlocks.length > 1) return;
-          let block = sortedBlocks[0];
-          let previousBlock =
-            siblings?.[siblings.findIndex((s) => s.value === block.value) - 1];
-          if (previousBlock.value === block.listData?.parent) {
-            previousBlock =
-              siblings?.[
-                siblings.findIndex((s) => s.value === block.value) - 2
-              ];
-          }
-
-          if (
-            previousBlock?.listData &&
-            block.listData &&
-            block.listData.depth > 1 &&
-            !previousBlock.listData.path.find(
-              (f) => f.entity === block.listData?.parent,
-            )
-          ) {
-            let depth = block.listData.depth;
-            let newParent = previousBlock.listData.path.find(
-              (f) => f.depth === depth - 1,
-            );
-            if (!newParent) return;
-            if (useUIState.getState().foldedBlocks.includes(newParent.entity))
-              useUIState.getState().toggleFold(newParent.entity);
-            rep?.mutate.moveBlock({
-              block: block.value,
-              oldParent: block.listData?.parent,
-              newParent: newParent.entity,
-              position: { type: "end" },
-            });
-          } else {
-            rep?.mutate.moveBlockUp({
-              entityID: block.value,
-              parent: block.listData?.parent || block.parent,
-            });
-          }
+          await moveBlockUp(rep);
         }}
         tooltipContent={
           <div className="flex flex-col gap-1 justify-center">
@@ -135,36 +99,7 @@ const MoveBlockButtons = () => {
         hiddenOnCanvas
         onClick={async () => {
           if (!rep) return;
-          let [sortedBlocks, siblings] = await getSortedSelection(rep);
-          if (sortedBlocks.length > 1) return;
-          let block = sortedBlocks[0];
-          let nextBlock = siblings
-            .slice(siblings.findIndex((s) => s.value === block.value) + 1)
-            .find(
-              (f) =>
-                f.listData &&
-                block.listData &&
-                !f.listData.path.find((f) => f.entity === block.value),
-            );
-          if (
-            nextBlock?.listData &&
-            block.listData &&
-            nextBlock.listData.depth === block.listData.depth - 1
-          ) {
-            if (useUIState.getState().foldedBlocks.includes(nextBlock.value))
-              useUIState.getState().toggleFold(nextBlock.value);
-            rep?.mutate.moveBlock({
-              block: block.value,
-              oldParent: block.listData?.parent,
-              newParent: nextBlock.value,
-              position: { type: "first" },
-            });
-          } else {
-            rep?.mutate.moveBlockDown({
-              entityID: block.value,
-              parent: block.listData?.parent || block.parent,
-            });
-          }
+          await moveBlockDown(rep, entity_set.set);
         }}
         tooltipContent={
           <div className="flex flex-col gap-1 justify-center">
diff --git a/src/replicache/mutations.ts b/src/replicache/mutations.ts
index 20d915f7..4b57d64b 100644
--- a/src/replicache/mutations.ts
+++ b/src/replicache/mutations.ts
@@ -4,6 +4,7 @@ import type { Attribute, Attributes, FilterAttributes } from "./attributes";
 import { SupabaseClient } from "@supabase/supabase-js";
 import { Database } from "supabase/database.types";
 import { generateKeyBetween } from "fractional-indexing";
+import { v7 } from "uuid";
 
 export type MutationContext = {
   permission_token_id: string;
@@ -427,17 +428,42 @@ const moveBlockUp: Mutation<{ entityID: string; parent: string }> = async (
     },
   });
 };
-const moveBlockDown: Mutation<{ entityID: string; parent: string }> = async (
-  args,
-  ctx,
-) => {
+const moveBlockDown: Mutation<{
+  entityID: string;
+  parent: string;
+  permission_set?: string;
+}> = async (args, ctx) => {
   let children = (await ctx.scanIndex.eav(args.parent, "card/block")).toSorted(
     (a, b) => (a.data.position > b.data.position ? 1 : -1),
   );
   let index = children.findIndex((f) => f.data.value === args.entityID);
   if (index === -1) return;
   let next = children[index + 1];
-  if (!next) return;
+  if (!next) {
+    // If this is the last block, create a new empty block above it using the addBlock helper
+    if (!args.permission_set) return; // Can't create block without permission_set
+
+    let newEntityID = v7();
+    let previousBlock = children[index - 1];
+    let position = generateKeyBetween(
+      previousBlock?.data.position || null,
+      children[index].data.position,
+    );
+
+    // Call the addBlock mutation helper directly
+    await addBlock(
+      {
+        parent: args.parent,
+        permission_set: args.permission_set,
+        factID: v7(),
+        type: "text",
+        newEntityID: newEntityID,
+        position: position,
+      },
+      ctx,
+    );
+    return;
+  }
   await ctx.retractFact(children[index].id);
   await ctx.assertFact({
     id: children[index].id,
@@ -670,8 +696,7 @@ const updatePublicationDraft: Mutation<{
     }
   });
   await ctx.runOnClient(async ({ tx }) => {
-    if (args.title !== undefined)
-      await tx.set("publication_title", args.title);
+    if (args.title !== undefined) await tx.set("publication_title", args.title);
     if (args.description !== undefined)
       await tx.set("publication_description", args.description);
     if (args.tags !== undefined) await tx.set("publication_tags", args.tags);
diff --git a/src/utils/moveBlock.ts b/src/utils/moveBlock.ts
new file mode 100644
index 00000000..06b1de3e
--- /dev/null
+++ b/src/utils/moveBlock.ts
@@ -0,0 +1,81 @@
+import { Replicache } from "replicache";
+import { ReplicacheMutators } from "src/replicache";
+import { getSortedSelection } from "components/SelectionManager/selectionState";
+import { useUIState } from "src/useUIState";
+
+export const moveBlockUp = async (rep: Replicache<ReplicacheMutators>) => {
+  let [sortedBlocks, siblings] = await getSortedSelection(rep);
+  if (sortedBlocks.length > 1) return;
+  let block = sortedBlocks[0];
+  let previousBlock =
+    siblings?.[siblings.findIndex((s) => s.value === block.value) - 1];
+  if (previousBlock.value === block.listData?.parent) {
+    previousBlock =
+      siblings?.[siblings.findIndex((s) => s.value === block.value) - 2];
+  }
+
+  if (
+    previousBlock?.listData &&
+    block.listData &&
+    block.listData.depth > 1 &&
+    !previousBlock.listData.path.find(
+      (f) => f.entity === block.listData?.parent,
+    )
+  ) {
+    let depth = block.listData.depth;
+    let newParent = previousBlock.listData.path.find(
+      (f) => f.depth === depth - 1,
+    );
+    if (!newParent) return;
+    if (useUIState.getState().foldedBlocks.includes(newParent.entity))
+      useUIState.getState().toggleFold(newParent.entity);
+    rep?.mutate.moveBlock({
+      block: block.value,
+      oldParent: block.listData?.parent,
+      newParent: newParent.entity,
+      position: { type: "end" },
+    });
+  } else {
+    rep?.mutate.moveBlockUp({
+      entityID: block.value,
+      parent: block.listData?.parent || block.parent,
+    });
+  }
+};
+
+export const moveBlockDown = async (
+  rep: Replicache<ReplicacheMutators>,
+  permission_set: string,
+) => {
+  let [sortedBlocks, siblings] = await getSortedSelection(rep);
+  if (sortedBlocks.length > 1) return;
+  let block = sortedBlocks[0];
+  let nextBlock = siblings
+    .slice(siblings.findIndex((s) => s.value === block.value) + 1)
+    .find(
+      (f) =>
+        f.listData &&
+        block.listData &&
+        !f.listData.path.find((f) => f.entity === block.value),
+    );
+  if (
+    nextBlock?.listData &&
+    block.listData &&
+    nextBlock.listData.depth === block.listData.depth - 1
+  ) {
+    if (useUIState.getState().foldedBlocks.includes(nextBlock.value))
+      useUIState.getState().toggleFold(nextBlock.value);
+    rep?.mutate.moveBlock({
+      block: block.value,
+      oldParent: block.listData?.parent,
+      newParent: nextBlock.value,
+      position: { type: "first" },
+    });
+  } else {
+    rep?.mutate.moveBlockDown({
+      entityID: block.value,
+      parent: block.listData?.parent || block.parent,
+      permission_set: permission_set,
+    });
+  }
+};
-- 
2.51.2