feat(mind map): offer the downward layout in the direction bar

Mind Elixir 5.15 added a fourth way to lay a map out — the root at the top
with its branches hanging below (`direction: 3`, `initDown()`) — but left it
out of its own toolbar, so nothing offered it.

The direction bar carries it now, beside the three it already had. Its mark
is the rightward one turned a quarter turn, which is what the layout itself
is: Mind Elixir ships no mark for a direction its bar never showed.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BuQw511c5ZdCHkvGzSwvyR

Author: claude

apps/client/src/translations/en/translation.json

@@ -3775,7 +3775,8 @@
     "exit-fullscreen": "Exit fullscreen",
     "direction-left": "Branches to the left",
     "direction-right": "Branches to the right",
-    "direction-side": "Branches to both sides"
+    "direction-side": "Branches to both sides",
+    "direction-down": "Branches downwards"
   },
   "llm": {
     "disabled_placeholder": "AI features are turned off. Enable them to configure providers and MCP.",

apps/client/src/widgets/type_widgets/mind_map/MapToolbar.css

@@ -22,13 +22,13 @@
 }
 
 /*
- * The three marks a direction is chosen by, which are Mind Elixir's own (MIT, © 2019 DjZhou): each
+ * The four marks a direction is chosen by, which are Mind Elixir's own (MIT, © 2019 DjZhou): each
  * draws the very layout it sets, and Trilium's icon set has nothing that says it. They are drawn as
  * a mask filled with the button's own color rather than as pictures, so that they take the color a
  * boxicon would — including the one a pressed or hovered button lends its icon.
  *
- * Sized in `em` against the font size the theme gives an icon button's mark, so that the three sit
- * at the size the four beside them do and follow that setting wherever it is changed.
+ * Sized in `em` against the font size the theme gives an icon button's mark, so that the four sit
+ * at the size the ones beside them do and follow that setting wherever it is changed.
  */
 .mind-map-container .mind-map-direction-icon::before {
     content: "";
@@ -60,3 +60,10 @@
     -webkit-mask-image: url("./direction-side.svg");
     mask-image: url("./direction-side.svg");
 }
+
+/* The layout Mind Elixir added last came without a mark of its own, its own bar never having offered
+   it. Drawn here from the rightward one turned a quarter turn, which is what the layout itself is. */
+.mind-map-container .mind-map-direction-down::before {
+    -webkit-mask-image: url("./direction-down.svg");
+    mask-image: url("./direction-down.svg");
+}

apps/client/src/widgets/type_widgets/mind_map/MapToolbar.spec.tsx

@@ -27,7 +27,7 @@ function buildMind({ scaleVal = 1, direction = 1, isFocusMode = false } = {}) {
     });
 
     // As the map does: it is laid out afresh, and says only that its branches have been drawn.
-    const relayOut = (value: 0 | 1 | 2) => vi.fn(() => {
+    const relayOut = (value: 0 | 1 | 2 | 3) => vi.fn(() => {
         mind.direction = value;
         fire("linkDiv");
     });
@@ -48,6 +48,7 @@ function buildMind({ scaleVal = 1, direction = 1, isFocusMode = false } = {}) {
         initLeft: relayOut(0),
         initRight: relayOut(1),
         initSide: relayOut(2),
+        initDown: relayOut(3),
         // As the map does: it is laid out afresh, showing all it has again.
         cancelFocus: vi.fn(() => {
             mind.isFocusMode = false;
@@ -79,6 +80,7 @@ const FULLSCREEN = 4;
 const LEFT = 0;
 const RIGHT = 1;
 const SIDE = 2;
+const DOWN = 3;
 
 /** Builds a bar and settles it, so that what it listens to is listened to before it is spoken to. */
 function renderBar(bar: ComponentChild) {
@@ -260,13 +262,16 @@ describe("MapToolbar", () => {
 });
 
 describe("DirectionToolbar", () => {
-    it("offers the three layouts the map's own bar did, each wearing its own mark", () => {
+    // The three the map's own bar offered, and the downward one Mind Elixir added without ever
+    // putting it in that bar.
+    it("offers every layout the map can take, each wearing its own mark", () => {
         const container = renderDirections(buildMind());
 
         expect(buttons(container).map((button) => button.className)).toEqual([
             expect.stringContaining("mind-map-direction-left"),
             expect.stringContaining("mind-map-direction-right"),
-            expect.stringContaining("mind-map-direction-side")
+            expect.stringContaining("mind-map-direction-side"),
+            expect.stringContaining("mind-map-direction-down")
         ]);
     });
 
@@ -280,6 +285,9 @@ describe("DirectionToolbar", () => {
         press(container, SIDE);
         expect(mind.initSide).toHaveBeenCalled();
 
+        press(container, DOWN);
+        expect(mind.initDown).toHaveBeenCalled();
+
         press(container, RIGHT);
         expect(mind.initRight).toHaveBeenCalled();
     });
@@ -289,12 +297,17 @@ describe("DirectionToolbar", () => {
         const container = renderDirections(mind);
 
         expect(buttons(container).map((button) => button.classList.contains("active")))
-            .toEqual([ false, true, false ]);
+            .toEqual([ false, true, false, false ]);
 
         press(container, SIDE);
 
         expect(buttons(container).map((button) => button.classList.contains("active")))
-            .toEqual([ false, false, true ]);
+            .toEqual([ false, false, true, false ]);
+
+        press(container, DOWN);
+
+        expect(buttons(container).map((button) => button.classList.contains("active")))
+            .toEqual([ false, false, false, true ]);
     });
 
     it("catches up with a map that took a direction from the content it was filled with", () => {
@@ -306,6 +319,6 @@ describe("DirectionToolbar", () => {
         act(() => mind.bus.fire("linkDiv"));
 
         expect(buttons(container).map((button) => button.classList.contains("active")))
-            .toEqual([ true, false, false ]);
+            .toEqual([ true, false, false, false ]);
     });
 });

apps/client/src/widgets/type_widgets/mind_map/MapToolbar.tsx

@@ -127,9 +127,9 @@ export default function MapToolbar({ mind }: MapToolbarProps) {
 
 /**
  * The bar standing in the top corner opposite: which way the map's branches run from its root —
- * to the left of it, to the right of it, or to either side.
+ * to the left of it, to the right of it, to either side, or below it.
  *
- * The three are a choice rather than three things to do, so the one the map is laid out by is shown
+ * The four are a choice rather than four things to do, so the one the map is laid out by is shown
  * pressed. Their marks are Mind Elixir's own, kept because they draw the very thing they set and
  * nothing in Trilium's icon set says it (see MapToolbar.css).
  */
@@ -153,7 +153,8 @@ export function DirectionToolbar({ mind }: MapToolbarProps) {
 }
 
 /**
- * The ways a map is laid out, in the order Mind Elixir offered them: each with the value
+ * The ways a map is laid out, in the order Mind Elixir offered them — the downward one last, being
+ * the one it added last, and the only one its own bar never carried: each with the value
  * `mind.direction` reads as, the mark it wears, and the call that lays the map out that way.
  *
  * Named afresh on every render, which follows a change of locale.
@@ -177,6 +178,12 @@ function buildDirections() {
             icon: "mind-map-direction-side",
             label: t("mind-map.direction-side"),
             apply: (mind: MindElixirInstance) => mind.initSide()
+        },
+        {
+            value: 3,
+            icon: "mind-map-direction-down",
+            label: t("mind-map.direction-down"),
+            apply: (mind: MindElixirInstance) => mind.initDown()
         }
     ];
 }