feat(note_actions): group development options

apps/client/src/stylesheets/style.css

@@ -1321,6 +1321,11 @@ body.desktop li.dropdown-submenu:hover > ul.dropdown-menu {
     overflow: auto;
 }
 
+.dropdown-submenu.dropstart > .dropdown-menu {
+    inset-inline-start: auto;
+    inset-inline-end: calc(100% - 2px);
+}
+
 body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
     inset-inline-start: calc(-100% + 10px);
 }

apps/client/src/stylesheets/theme-next/base.css

@@ -89,13 +89,13 @@
      * the color is adjusted based on the current color scheme (light or dark). The lightness
      * component of the color represented in the CIELAB color space, will be
      * constrained to a certain percentage defined below.
-     * 
+     *
      * Note: the tree background may vary when background effects are enabled, so it is recommended
      * to maintain a higher contrast margin than on the usual note tree solid background. */
 
     /* The maximum perceptual lightness for the custom color in the light theme (%): */
     --tree-item-light-theme-max-color-lightness: 60;
-    
+
     /* The minimum perceptual lightness for the custom color in the dark theme (%): */
     --tree-item-dark-theme-min-color-lightness: 65;
 }
@@ -165,7 +165,7 @@ body.desktop .dropdown-submenu .dropdown-menu {
     --menu-item-start-padding: 8px;
     --menu-item-end-padding: 22px;
     --menu-item-vertical-padding: 2px;
-    
+
     padding-top: var(--menu-item-vertical-padding) !important;
     padding-bottom: var(--menu-item-vertical-padding) !important;
     padding-inline-start: var(--menu-item-start-padding) !important;
@@ -176,6 +176,11 @@ body.desktop .dropdown-submenu .dropdown-menu {
     cursor: default !important;
 }
 
+.dropdown-menu:has(> .dropdown-submenu.dropstart) > .dropdown-item {
+    padding-inline-end: var(--menu-item-start-padding) !important;
+    padding-inline-start: var(--menu-item-end-padding) !important;
+}
+
 :root .dropdown-item:focus-visible {
     outline: 2px solid var(--input-focus-outline-color) !important;
     background-color: transparent;
@@ -249,7 +254,7 @@ html body .dropdown-item[disabled] {
 }
 
 /* Menu item arrow */
-.dropdown-menu .dropdown-toggle::after {
+.dropdown-submenu:not(.dropstart) .dropdown-toggle::after {
     content: "\ed3b" !important;
     position: absolute;
     display: flex !important;
@@ -265,6 +270,22 @@ html body .dropdown-item[disabled] {
     color: var(--menu-item-arrow-color) !important;
 }
 
+.dropdown-submenu.dropstart .dropdown-toggle::before {
+    content: "\ea4d" !important;
+    position: absolute;
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
+    top: 0;
+    inset-inline-start: 0;
+    margin: unset !important;
+    border: unset !important;
+    padding: 0 4px;
+    font-family: boxicons;
+    font-size: 1.2em;
+    color: var(--menu-item-arrow-color) !important;
+}
+
 body[dir=rtl] .dropdown-menu:not([data-popper-placement="bottom-start"]) .dropdown-toggle::after {
     content: "\ea4d" !important;
 }
@@ -339,7 +360,7 @@ body.mobile .dropdown-menu {
     font-size: 1em !important;
     backdrop-filter: var(--dropdown-backdrop-filter);
     position: relative;
-    
+
     .dropdown-toggle::after {
         top: 0.5em;
         right: var(--dropdown-menu-padding-horizontal);
@@ -356,7 +377,7 @@ body.mobile .dropdown-menu {
         padding: var(--dropdown-menu-padding-vertical) var(--dropdown-menu-padding-horizontal) !important;
         background: var(--card-background-color);
         border-bottom: 1px solid var(--menu-item-delimiter-color) !important;
-        border-radius: 0;        
+        border-radius: 0;
     }
 
     .dropdown-item:first-of-type,
@@ -367,9 +388,9 @@ body.mobile .dropdown-menu {
         border-top-right-radius: 6px;
     }
 
-    .dropdown-item:last-of-type,    
+    .dropdown-item:last-of-type,
     .dropdown-item:has(+ .dropdown-divider),
-    .dropdown-custom-item:last-of-type,    
+    .dropdown-custom-item:last-of-type,
     .dropdown-custom-item:has(+ .dropdown-divider) {
         border-bottom-left-radius: 6px;
         border-bottom-right-radius: 6px;
@@ -392,10 +413,10 @@ body.mobile .dropdown-menu {
             --menu-background-color: --menu-submenu-mobile-background-color;
             --bs-dropdown-divider-margin-y: 0.25rem;
             border-radius: 0;
-            max-height: 0;            
+            max-height: 0;
             transition: max-height 100ms ease-in;
-            display: block !important;            
-            
+            display: block !important;
+
             &.show {
                 max-height: 1000px;
                 padding: 0.5rem 0.75rem !important;
@@ -405,7 +426,7 @@ body.mobile .dropdown-menu {
         &.submenu-open {
             .dropdown-toggle {
                 padding-bottom: var(--dropdown-menu-padding-vertical);
-            }            
+            }
         }
     }
 
@@ -743,4 +764,4 @@ li.dropdown-item a.dropdown-item-button:focus-visible {
 .note-detail-empty .aa-suggestions div.aa-cursor {
     background: var(--hover-item-background-color);
     color: var(--hover-item-text-color);
-}
+}

apps/client/src/widgets/react/FormList.tsx

@@ -161,11 +161,16 @@ export function FormDropdownDivider() {
     return <div className="dropdown-divider" />;
 }
 
-export function FormDropdownSubmenu({ icon, title, children }: { icon: string, title: ComponentChildren, children: ComponentChildren }) {
+export function FormDropdownSubmenu({ icon, title, children, dropStart }: {
+    icon: string,
+    title: ComponentChildren,
+    children: ComponentChildren,
+    dropStart?: boolean
+}) {
     const [ openOnMobile, setOpenOnMobile ] = useState(false);
 
     return (
-        <li className={`dropdown-item dropdown-submenu ${openOnMobile ? "submenu-open" : ""}`}>
+        <li className={clsx("dropdown-item dropdown-submenu", { "submenu-open": openOnMobile, "dropstart": dropStart })}>
             <span
                 className="dropdown-toggle"
                 onClick={(e) => {
@@ -184,5 +189,5 @@ export function FormDropdownSubmenu({ icon, title, children }: { icon: string, t
                 {children}
             </ul>
         </li>
-    )
+    );
 }

apps/client/src/widgets/ribbon/NoteActions.tsx

@@ -13,7 +13,7 @@ import { isElectron as getIsElectron, isMac as getIsMac } from "../../services/u
 import ws from "../../services/ws";
 import ActionButton from "../react/ActionButton";
 import Dropdown from "../react/Dropdown";
-import { FormDropdownDivider, FormListHeader, FormListItem } from "../react/FormList";
+import { FormDropdownDivider, FormDropdownSubmenu, FormListItem } from "../react/FormList";
 import { useIsNoteReadOnly, useNoteContext, useNoteLabel, useNoteProperty, useTriliumOption } from "../react/hooks";
 import { ParentComponent } from "../react/react_utils";
 import { isExperimentalFeatureEnabled } from "../../services/experimental_features";
@@ -114,23 +114,22 @@ function NoteContextMenu({ note, noteContext }: { note: FNote, noteContext?: Not
 
 function DevelopmentActions({ note, noteContext }: { note: FNote, noteContext?: NoteContext }) {
     return (
-        <>
-            <FormListHeader text="Development-only Actions" />
+        <FormDropdownSubmenu title="Development Actions" icon="bx bx-wrench" dropStart>
             <FormListItem
                 icon="bx bx-printer"
                 onClick={() => window.open(`/?print=#root/${note.noteId}`, "_blank")}
             >Open print page</FormListItem>
-            {note.type === "text" && (
-                <FormListItem
-                    icon="bx bx-error"
-                    onClick={() => {
-                        noteContext?.getTextEditor(editor => {
-                            editor.editing.view.change(() => {
-                                throw new Error("Editor crashed.");
-                            });
+            <FormListItem
+                icon="bx bx-error"
+                disabled={note.type !== "text"}
+                onClick={() => {
+                    noteContext?.getTextEditor(editor => {
+                        editor.editing.view.change(() => {
+                            throw new Error("Editor crashed.");
                         });
-                    }}>Crash editor</FormListItem>)}
-        </>
+                    });
+                }}>Crash editor</FormListItem>
+        </FormDropdownSubmenu>
     );
 }