Add up down arrows to section and children (#560)

* Add up down arrows to section and children

* show up down arrows on hover

Author: sid597

apps/roam/src/components/settings/LeftSidebarGlobalSettings.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState, memo } from "react";
-import { Button, Collapse } from "@blueprintjs/core";
+import { Button, ButtonGroup, Collapse } from "@blueprintjs/core";
 import FlagPanel from "roamjs-components/components/ConfigPanels/FlagPanel";
 import AutocompleteInput from "roamjs-components/components/AutocompleteInput";
 import getAllPageNames from "roamjs-components/queries/getAllPageNames";
@@ -19,22 +19,47 @@ import { refreshAndNotify } from "~/components/LeftSidebarView";
 const PageItem = memo(
   ({
     page,
+    index,
+    isFirst,
+    isLast,
+    onMove,
     onRemove,
   }: {
     page: RoamBasicNode;
+    index: number;
+    isFirst: boolean;
+    isLast: boolean;
+    onMove: (index: number, direction: "up" | "down") => void;
     onRemove: (page: RoamBasicNode) => void;
   }) => {
     return (
-      <div className="flex items-center justify-between rounded bg-gray-50 p-2 hover:bg-gray-100">
-        <span className="flex-grow truncate">{page.text}</span>
-        <Button
-          icon="trash"
-          minimal
-          small
-          intent="danger"
-          onClick={() => onRemove(page)}
-          title="Remove page"
-        />
+      <div className="group flex items-center justify-between rounded bg-gray-50 p-2 hover:bg-gray-100">
+        <div className="mr-2 flex-grow truncate">{page.text}</div>
+        <ButtonGroup minimal>
+          <Button
+            icon="arrow-up"
+            small
+            disabled={isFirst}
+            onClick={() => onMove(index, "up")}
+            title="Move up"
+            className="opacity-0 transition-opacity group-hover:opacity-100"
+          />
+          <Button
+            icon="arrow-down"
+            small
+            disabled={isLast}
+            onClick={() => onMove(index, "down")}
+            title="Move down"
+            className="opacity-0 transition-opacity group-hover:opacity-100"
+          />
+          <Button
+            icon="trash"
+            small
+            intent="danger"
+            onClick={() => onRemove(page)}
+            title="Remove page"
+          />
+        </ButtonGroup>
       </div>
     );
   },
@@ -116,6 +141,35 @@ const LeftSidebarGlobalSectionsContent = ({
     void initialize();
   }, [leftSidebar]);
 
+  const movePage = useCallback(
+    (index: number, direction: "up" | "down") => {
+      if (direction === "up" && index === 0) return;
+      if (direction === "down" && index === pages.length - 1) return;
+
+      const newPages = [...pages];
+      const [removed] = newPages.splice(index, 1);
+      const newIndex = direction === "up" ? index - 1 : index + 1;
+      newPages.splice(newIndex, 0, removed);
+
+      setPages(newPages);
+
+      if (childrenUid) {
+        const order = direction === "down" ? newIndex + 1 : newIndex;
+
+        void window.roamAlphaAPI
+          /* eslint-disable @typescript-eslint/naming-convention */
+          .moveBlock({
+            location: { "parent-uid": childrenUid, order },
+            block: { uid: removed.uid },
+          })
+          .then(() => {
+            refreshAndNotify();
+          });
+      }
+    },
+    [pages, childrenUid],
+  );
+
   const addPage = useCallback(
     async (pageName: string) => {
       if (!pageName || !childrenUid) return;
@@ -274,10 +328,14 @@ const LeftSidebarGlobalSectionsContent = ({
             </div>
             {pages.length > 0 ? (
               <div className="space-y-1">
-                {pages.map((page) => (
+                {pages.map((page, index) => (
                   <PageItem
                     key={page.uid}
                     page={page}
+                    index={index}
+                    isFirst={index === 0}
+                    isLast={index === pages.length - 1}
+                    onMove={movePage}
                     onRemove={() => void removePage(page)}
                   />
                 ))}

apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx

@@ -2,7 +2,13 @@ import discourseConfigRef from "~/utils/discourseConfigRef";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import AutocompleteInput from "roamjs-components/components/AutocompleteInput";
 import getAllPageNames from "roamjs-components/queries/getAllPageNames";
-import { Button, Dialog, Collapse, InputGroup, Icon } from "@blueprintjs/core";
+import {
+  Button,
+  ButtonGroup,
+  Collapse,
+  Dialog,
+  InputGroup,
+} from "@blueprintjs/core";
 import createBlock from "roamjs-components/writes/createBlock";
 import deleteBlock from "roamjs-components/writes/deleteBlock";
 import type { RoamBasicNode } from "roamjs-components/types";
@@ -26,11 +32,19 @@ const SectionItem = memo(
     setSettingsDialogSectionUid,
     pageNames,
     setSections,
+    index,
+    isFirst,
+    isLast,
+    onMoveSection,
   }: {
     section: LeftSidebarPersonalSectionConfig;
     setSections: Dispatch<SetStateAction<LeftSidebarPersonalSectionConfig[]>>;
     setSettingsDialogSectionUid: (uid: string | null) => void;
     pageNames: string[];
+    index: number;
+    isFirst: boolean;
+    isLast: boolean;
+    onMoveSection: (index: number, direction: "up" | "down") => void;
   }) => {
     const ref = extractRef(section.text);
     const blockText = getTextByBlockUid(ref);
@@ -203,6 +217,51 @@ const SectionItem = memo(
       [setSections],
     );
 
+    const moveChild = useCallback(
+      (
+        section: LeftSidebarPersonalSectionConfig,
+        index: number,
+        direction: "up" | "down",
+      ) => {
+        if (!section.children) return;
+        if (direction === "up" && index === 0) return;
+        if (direction === "down" && index === section.children.length - 1)
+          return;
+
+        const newChildren = [...section.children];
+        const [removed] = newChildren.splice(index, 1);
+        const newIndex = direction === "up" ? index - 1 : index + 1;
+        newChildren.splice(newIndex, 0, removed);
+
+        setSections((prev) =>
+          prev.map((s) => {
+            if (s.uid === section.uid) {
+              return {
+                ...s,
+                children: newChildren,
+              };
+            }
+            return s;
+          }),
+        );
+
+        if (section.childrenUid) {
+          const order = direction === "down" ? newIndex + 1 : newIndex;
+
+          void window.roamAlphaAPI
+            /* eslint-disable @typescript-eslint/naming-convention */
+            .moveBlock({
+              location: { "parent-uid": section.childrenUid, order },
+              block: { uid: removed.uid },
+            })
+            .then(() => {
+              refreshAndNotify();
+            });
+        }
+      },
+      [setSections],
+    );
+
     const handleAddChild = useCallback(async () => {
       if (childInput && section.childrenUid) {
         await addChildToSection(section, section.childrenUid, childInput);
@@ -224,7 +283,7 @@ const SectionItem = memo(
           border: "1px solid rgba(51, 51, 51, 0.2)",
         }}
       >
-        <div className="flex items-center">
+        <div className="group flex items-center">
           {!sectionWithoutSettingsAndChildren && (
             <Button
               icon={isExpanded ? "chevron-down" : "chevron-right"}
@@ -245,27 +304,43 @@ const SectionItem = memo(
           >
             <span className="font-medium">{originalName}</span>
           </div>
-          <Button
-            icon={sectionWithoutSettingsAndChildren ? "plus" : "settings"}
-            minimal
-            title={
-              sectionWithoutSettingsAndChildren
-                ? "Add children"
-                : "Edit section settings"
-            }
-            onClick={() =>
-              sectionWithoutSettingsAndChildren
-                ? void convertToComplexSection(section)
-                : void setSettingsDialogSectionUid(section.uid)
-            }
-          />
-          <Button
-            icon="trash"
-            minimal
-            intent="danger"
-            onClick={() => void removeSection(section)}
-            title="Remove section"
-          />
+          <ButtonGroup minimal>
+            <Button
+              icon="arrow-up"
+              small
+              disabled={isFirst}
+              onClick={() => onMoveSection(index, "up")}
+              title="Move section up"
+              className="opacity-0 transition-opacity group-hover:opacity-100"
+            />
+            <Button
+              icon="arrow-down"
+              small
+              disabled={isLast}
+              onClick={() => onMoveSection(index, "down")}
+              title="Move section down"
+              className="opacity-0 transition-opacity group-hover:opacity-100"
+            />
+            <Button
+              icon={sectionWithoutSettingsAndChildren ? "plus" : "settings"}
+              title={
+                sectionWithoutSettingsAndChildren
+                  ? "Add children"
+                  : "Edit section settings"
+              }
+              onClick={() =>
+                sectionWithoutSettingsAndChildren
+                  ? void convertToComplexSection(section)
+                  : void setSettingsDialogSectionUid(section.uid)
+              }
+            />
+            <Button
+              icon="trash"
+              intent="danger"
+              onClick={() => void removeSection(section)}
+              title="Remove section"
+            />
+          </ButtonGroup>
         </div>
 
         {!sectionWithoutSettingsAndChildren && (
@@ -301,20 +376,41 @@ const SectionItem = memo(
 
               {(section.children || []).length > 0 && (
                 <div className="space-y-1">
-                  {(section.children || []).map((child) => (
+                  {(section.children || []).map((child, index) => (
                     <div
                       key={child.uid}
-                      className="flex items-center justify-between rounded bg-gray-50 p-2 hover:bg-gray-100"
+                      className="group flex items-center justify-between rounded bg-gray-50 p-2 hover:bg-gray-100"
                     >
-                      <span className="flex-grow">{child.text}</span>
-                      <Button
-                        icon="trash"
-                        minimal
-                        small
-                        intent="danger"
-                        onClick={() => void removeChild(section, child)}
-                        title="Remove child"
-                      />
+                      <div className="mr-2 min-w-0 flex-1 truncate">
+                        {child.text}
+                      </div>
+                      <ButtonGroup minimal className="flex-shrink-0">
+                        <Button
+                          icon="arrow-up"
+                          small
+                          disabled={index === 0}
+                          onClick={() => moveChild(section, index, "up")}
+                          title="Move child up"
+                          className="opacity-0 transition-opacity group-hover:opacity-100"
+                        />
+                        <Button
+                          icon="arrow-down"
+                          small
+                          disabled={
+                            index === (section.children || []).length - 1
+                          }
+                          onClick={() => moveChild(section, index, "down")}
+                          title="Move child down"
+                          className="opacity-0 transition-opacity group-hover:opacity-100"
+                        />
+                        <Button
+                          icon="trash"
+                          small
+                          intent="danger"
+                          onClick={() => void removeChild(section, child)}
+                          title="Remove child"
+                        />
+                      </ButtonGroup>
                     </div>
                   ))}
                 </div>
@@ -424,6 +520,35 @@ const LeftSidebarPersonalSectionsContent = ({
     setNewSectionInput(value);
   }, []);
 
+  const moveSection = useCallback(
+    (index: number, direction: "up" | "down") => {
+      if (direction === "up" && index === 0) return;
+      if (direction === "down" && index === sections.length - 1) return;
+
+      const newSections = [...sections];
+      const [removed] = newSections.splice(index, 1);
+      const newIndex = direction === "up" ? index - 1 : index + 1;
+      newSections.splice(newIndex, 0, removed);
+
+      setSections(newSections);
+
+      if (personalSectionUid) {
+        const order = direction === "down" ? newIndex + 1 : newIndex;
+
+        void window.roamAlphaAPI
+          /* eslint-disable @typescript-eslint/naming-convention */
+          .moveBlock({
+            location: { "parent-uid": personalSectionUid, order },
+            block: { uid: removed.uid },
+          })
+          .then(() => {
+            refreshAndNotify();
+          });
+      }
+    },
+    [sections, personalSectionUid],
+  );
+
   const activeDialogSection = useMemo(() => {
     return sections.find((s) => s.uid === settingsDialogSectionUid) || null;
   }, [sections, settingsDialogSectionUid]);
@@ -470,13 +595,17 @@ const LeftSidebarPersonalSectionsContent = ({
       </div>
 
       <div className="mt-2 space-y-2">
-        {sections.map((section) => (
+        {sections.map((section, index) => (
           <div key={section.uid}>
             <SectionItem
               section={section}
               setSettingsDialogSectionUid={setSettingsDialogSectionUid}
               pageNames={pageNames}
               setSections={setSections}
+              index={index}
+              isFirst={index === 0}
+              isLast={index === sections.length - 1}
+              onMoveSection={moveSection}
             />
           </div>
         ))}