Delegate most ribbon actions to sidebar

src/becca/similarity.ts

@@ -36,6 +36,12 @@ interface DateLimits {
     maxDate: string;
 }
 
+interface SimilarNote {
+    score: number;
+    notePath: string[];
+    noteId: string;
+}
+
 function filterUrlValue(value: string) {
     return value
         .replace(/https?:\/\//gi, "")
@@ -247,7 +253,7 @@ function hasConnectingRelation(sourceNote: BNote, targetNote: BNote) {
     return sourceNote.getAttributes().find((attr) => attr.type === "relation" && ["includenotelink", "imagelink"].includes(attr.name) && attr.value === targetNote.noteId);
 }
 
-async function findSimilarNotes(noteId: string) {
+async function findSimilarNotes(noteId: string): Promise<SimilarNote[] | undefined> {
     const results = [];
     let i = 0;
 
@@ -417,6 +423,7 @@ async function findSimilarNotes(noteId: string) {
 
             // this takes care of note hoisting
             if (!notePath) {
+                // TODO: This return is suspicious, it should probably be continue
                 return;
             }
 

src/public/app/components/app_context.ts

@@ -102,6 +102,10 @@ export type CommandMappings = {
     openNoteInNewTab: CommandData;
     openNoteInNewSplit: CommandData;
     openNoteInNewWindow: CommandData;
+    hideLeftPane: CommandData;
+    showLeftPane: CommandData;
+    toggleLeftPane: CommandData;
+    toggleRightPane: CommandData;
 
     openInTab: ContextMenuCommandData;
     openNoteInSplit: ContextMenuCommandData;

src/public/app/components/component.ts

@@ -46,7 +46,7 @@ export class TypedComponent<ChildT extends TypedComponent<ChildT>> {
         return this;
     }
 
-    handleEvent<T extends EventNames>(name: T, data: EventData<T>): Promise<unknown[] | unknown> | null {
+    handleEvent<T extends EventNames>(name: T, data: EventData<T>): Promise<unknown[] | unknown> | null | undefined {
         try {
             const callMethodPromise = this.initialized ? this.initialized.then(() => this.callMethod((this as any)[`${name}Event`], data)) : this.callMethod((this as any)[`${name}Event`], data);
 

src/public/app/components/root_command_executor.ts

@@ -86,6 +86,10 @@ export default class RootCommandExecutor extends Component {
         options.toggle("leftPaneVisible");
     }
 
+    toggleRightPaneCommand() {
+        options.toggle("rightPaneVisible");
+    }
+
     async showBackendLogCommand() {
         await appContext.tabManager.openTabWithNoteWithHoisting("_backendLog", { activate: true });
     }

src/public/app/entities/fnote.ts

@@ -35,12 +35,12 @@ const NOTE_TYPE_ICONS = {
  * end user. Those types should be used only for checking against, they are
  * not for direct use.
  */
-type NoteType = "file" | "image" | "search" | "noteMap" | "launcher" | "doc" | "contentWidget" | "text" | "relationMap" | "render" | "canvas" | "mermaid" | "book" | "webView" | "code" | "mindMap";
+export type NoteType = "file" | "image" | "search" | "noteMap" | "launcher" | "doc" | "contentWidget" | "text" | "relationMap" | "render" | "canvas" | "mermaid" | "book" | "webView" | "code" | "mindMap";
 
-interface NotePathRecord {
+export interface NotePathRecord {
     isArchived: boolean;
     isInHoistedSubTree: boolean;
-    isSearch: boolean;
+    isSearch?: boolean;
     notePath: string[];
     isHidden: boolean;
 }
@@ -401,14 +401,14 @@ class FNote {
         return notePaths;
     }
 
-    getSortedNotePathRecords(hoistedNoteId = "root") {
+    getSortedNotePathRecords(hoistedNoteId = "root"): NotePathRecord[] {
         const isHoistedRoot = hoistedNoteId === "root";
 
-        const notePaths = this.getAllNotePaths().map((path) => ({
+        const notePaths: NotePathRecord[] = this.getAllNotePaths().map((path) => ({
             notePath: path,
             isInHoistedSubTree: isHoistedRoot || path.includes(hoistedNoteId),
             isArchived: path.some((noteId) => froca.notes[noteId].isArchived),
-            isSearch: path.find((noteId) => froca.notes[noteId].type === "search"),
+            isSearch: path.some((noteId) => froca.notes[noteId].type === "search"),
             isHidden: path.includes("_hidden")
         }));
 

src/public/app/layouts/desktop_layout.js

@@ -85,6 +85,7 @@ import ScrollPaddingWidget from "../widgets/scroll_padding.js";
 import ClassicEditorToolbar from "../widgets/ribbon_widgets/classic_editor_toolbar.js";
 import options from "../services/options.js";
 import utils from "../services/utils.js";
+import RightPaneToggleWidget from "../widgets/buttons/right_pane_toggle.js";
 
 export default class DesktopLayout {
     constructor(customWidgets) {
@@ -118,6 +119,7 @@ export default class DesktopLayout {
                     .child(new FlexContainer("row").id("tab-row-left-spacer"))
                     .optChild(launcherPaneIsHorizontal, new LeftPaneToggleWidget(true))
                     .child(new TabRowWidget().class("full-width"))
+                    .child(new RightPaneToggleWidget())
                     .optChild(customTitleBarButtons, new TitleBarButtonsWidget())
                     .css("height", "40px")
                     .css("background-color", "var(--launcher-pane-background-color)")
@@ -139,7 +141,11 @@ export default class DesktopLayout {
                         new FlexContainer("column")
                             .id("rest-pane")
                             .css("flex-grow", "1")
-                            .optChild(!fullWidthTabBar, new FlexContainer("row").child(new TabRowWidget()).optChild(customTitleBarButtons, new TitleBarButtonsWidget()).css("height", "40px"))
+                            .optChild(!fullWidthTabBar, new FlexContainer("row")
+                                .child(new TabRowWidget())
+                                .optChild(customTitleBarButtons, new TitleBarButtonsWidget())
+                                .child(new RightPaneToggleWidget())
+                                .css("height", "40px"))
                             .child(
                                 new FlexContainer("row")
                                     .filling()
@@ -184,10 +190,6 @@ export default class DesktopLayout {
                                                                 .ribbon(new BasicPropertiesWidget())
                                                                 .ribbon(new OwnedAttributeListWidget())
                                                                 .ribbon(new InheritedAttributesWidget())
-                                                                .ribbon(new NotePathsWidget())
-                                                                .ribbon(new NoteMapRibbonWidget())
-                                                                .ribbon(new SimilarNotesWidget())
-                                                                .ribbon(new NoteInfoWidget())
                                                                 .button(new RevisionsButton())
                                                                 .button(new NoteActionsWidget())
                                                         )
@@ -202,7 +204,6 @@ export default class DesktopLayout {
                                                                 .child(new RelationMapButtons())
                                                                 .child(new CopyImageReferenceButton())
                                                                 .child(new SvgExportButton())
-                                                                .child(new BacklinksWidget())
                                                                 .child(new HideFloatingButtonsButton())
                                                         )
                                                         .child(new MermaidWidget())
@@ -229,9 +230,14 @@ export default class DesktopLayout {
                                     )
                                     .child(
                                         new RightPaneContainer()
+                                            .child(new NotePathsWidget())
                                             .child(new TocWidget())
                                             .child(new HighlightsListWidget())
+                                            .child(new SimilarNotesWidget())
+                                            .child(new BacklinksWidget())
+                                            .child(new NoteMapRibbonWidget())
                                             .child(...this.customWidgets.get("right-pane"))
+                                            .child(new NoteInfoWidget())
                                     )
                             )
                     )

src/public/app/services/load_results.ts

@@ -1,3 +1,4 @@
+import type { OptionNames } from "../../../services/options_interface.js";
 import type { AttributeType } from "../entities/fattribute.js";
 import type { EntityChange } from "../server_types.js";
 
@@ -8,6 +9,7 @@ interface NoteRow {
 }
 
 interface BranchRow {
+    noteId?: string;
     branchId: string;
     componentId: string;
     parentNoteId?: string;
@@ -182,7 +184,7 @@ export default class LoadResults {
         this.optionNames.push(name);
     }
 
-    isOptionReloaded(name: string) {
+    isOptionReloaded(name: OptionNames) {
         return this.optionNames.includes(name);
     }
 

src/public/app/services/resizer.ts

@@ -31,14 +31,12 @@ function setupLeftPaneResizer(leftPaneVisible: boolean) {
     }
 }
 
-function setupRightPaneResizer() {
+function setupRightPaneResizer(rightPaneVisible: boolean) {
     if (rightInstance) {
         rightInstance.destroy();
         rightInstance = null;
     }
 
-    const rightPaneVisible = $("#right-pane").is(":visible");
-
     if (!rightPaneVisible) {
         $("#center-pane").css("width", "100%");
 

src/public/app/widgets/buttons/left_pane_toggle.js → src/public/app/widgets/buttons/left_pane_toggle.ts

@@ -2,9 +2,11 @@ import options from "../../services/options.js";
 import splitService from "../../services/resizer.js";
 import CommandButtonWidget from "./command_button.js";
 import { t } from "../../services/i18n.js";
+import type { EventData } from "../../components/app_context.js";
 
 export default class LeftPaneToggleWidget extends CommandButtonWidget {
-    constructor(isHorizontalLayout) {
+
+    constructor(isHorizontalLayout: boolean) {
         super();
 
         this.class(isHorizontalLayout ? "toggle-button" : "launcher-button");
@@ -32,7 +34,7 @@ export default class LeftPaneToggleWidget extends CommandButtonWidget {
         splitService.setupLeftPaneResizer(options.is("leftPaneVisible"));
     }
 
-    entitiesReloadedEvent({ loadResults }) {
+    entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
         if (loadResults.isOptionReloaded("leftPaneVisible")) {
             this.refreshIcon();
         }

src/public/app/widgets/buttons/right_pane_toggle.ts

@@ -0,0 +1,29 @@
+import splitService from "../../services/resizer.js";
+import options from "../../services/options.js";
+import CommandButtonWidget from "./command_button.js";
+import type { EventData } from "../../components/app_context.js";
+
+export default class RightPaneToggleWidget extends CommandButtonWidget {
+
+    constructor() {
+        super();
+
+        this.class("toggle-button");
+        this.css("transform", "scaleX(-1)");
+        this.settings.icon = "bx-sidebar";
+        this.settings.command = "toggleRightPane";
+    }
+
+    refreshIcon(): void {
+        super.refreshIcon();
+
+        splitService.setupRightPaneResizer(options.is("rightPaneVisible"));
+    }
+
+    entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
+        if (loadResults.isOptionReloaded("rightPaneVisible")) {
+            this.refreshIcon();
+        }
+    }
+
+}