Fix off-by-one when moving node

gdn-app/src/components/CNote.vue

@@ -143,10 +143,10 @@ function onInsertEditorMove(): void {
   if (insertIndex.value === undefined) return;
 
   if (ui.pinned.parentId) {
-    notes.removeChild(ui.pinned.parentId, ui.pinned.segment);
+    notes.moveChild(ui.pinned.parentId, ui.pinned.segment, segment.id, insertIndex.value);
-  }
+  } else {
-
     notes.addChild(segment.id, ui.pinned.segment.id, insertIndex.value);
+  }
 
   onInsertEditorClose();
   ui.unsetPinned();
@@ -208,28 +208,6 @@ function onInsertEditorCopy(): void {
 
       <!-- Controls -->
       <div v-show="!editing" class="absolute right-0 flex h-6 items-center gap-0.5">
-        <!-- Maybe this should be two separate fullsize buttons so they're easier to click. -->
-        <!-- Maybe I should reorder/group the buttons, especially once I add a delete button. -->
-        <div class="flex h-5 w-5 flex-col">
-          <button
-            class="flex h-0 grow select-none items-center justify-center rounded-t-sm border border-b-0 border-black bg-white p-0.5 text-black transition hover:bg-neutral-200 active:scale-95"
-            :class="{ invisible: !hovering }"
-            @click.stop="onInsertSiblingBeforeButtonClick"
-          >
-            <RiArrowUpWideLine size="16px" />
-          </button>
-          <button
-            class="flex h-0 grow select-none items-center justify-center rounded-b-sm border border-t-0 border-black bg-white p-0.5 text-black transition hover:bg-neutral-200 active:scale-95"
-            :class="{ invisible: !hovering }"
-            @click.stop="onInsertSiblingAfterButtonClick"
-          >
-            <RiArrowDownWideLine size="16px" />
-          </button>
-        </div>
-        <CNoteButton :visible="hovering" @click.stop="onInsertChildButtonClick">
-          <RiCornerDownRightLine size="16px" />
-        </CNoteButton>
-        <div class="w-0.5"></div>
         <CNoteButton :visible="hovering">
           <RiDeleteBinLine size="16px" />
         </CNoteButton>
@@ -237,6 +215,16 @@ function onInsertEditorCopy(): void {
           <RiEditLine size="16px" />
         </CNoteButton>
         <div class="w-0.5"></div>
+        <CNoteButton :visible="hovering" @click.stop="onInsertSiblingBeforeButtonClick">
+          <RiArrowUpWideLine size="16px" />
+        </CNoteButton>
+        <CNoteButton :visible="hovering" @click.stop="onInsertSiblingAfterButtonClick">
+          <RiArrowDownWideLine size="16px" />
+        </CNoteButton>
+        <CNoteButton :visible="hovering" @click.stop="onInsertChildButtonClick">
+          <RiCornerDownRightLine size="16px" />
+        </CNoteButton>
+        <div class="w-0.5"></div>
         <CNoteButton
           :visible="hovering || pinned"
           :inverted="pinned"

gdn-app/src/stores/notes.ts

@@ -62,6 +62,27 @@ export const useNotesStore = defineStore("notes", () => {
     note.children.splice(index, 1);
   }
 
+  function moveChild(fromId: string, segment: Segment, toId: string, toIndex: number): void {
+    const from = getNote(fromId);
+    if (!from) return;
+
+    const to = getNote(toId);
+    if (!to) return;
+
+    // Find child index
+    let fromIndex = from.children.indexOf(segment.id);
+    for (let i = 0; i < segment.iteration; i++) {
+      fromIndex = from.children.indexOf(segment.id, fromIndex + 1);
+    }
+    if (fromIndex < 0) return;
+
+    // Fix off-by-one caused by the deletion
+    if (fromId === toId && fromIndex < toIndex) toIndex--;
+
+    from.children.splice(fromIndex, 1);
+    to.children.splice(toIndex, 0, segment.id);
+  }
+
   return {
     getNote,
     getParents,
@@ -69,5 +90,6 @@ export const useNotesStore = defineStore("notes", () => {
     clearNotes,
     addChild,
     removeChild,
+    moveChild,
   };
 });