Make each sidebar page it's own "panel", and provide shortcuts for

navigating between sidebar panels

Author: tntmarket

src/ts/core/features/vim-mode/commands/panel-commands.ts

@@ -15,7 +15,9 @@ const closeSidebarPage = () => {
 
 export const PanelCommands = [
     // Need to wrap in function to preserve the `this` reference inside of RoamPanel
-    nmap('h', 'Select Panel Left', () => RoamPanel.previousPanel().select()),
-    nmap('l', 'Select Panel Right', () => RoamPanel.nextPanel().select()),
+    nmap('h', 'Select Main Panel', () => RoamPanel.mainPanel().select()),
+    nmap('l', 'Select Prior Sidebar Panel', () => RoamPanel.previousSidebarPanel().select()),
+    nmap('ctrl+k', 'Select Previous Panel', () => RoamPanel.previousPanel().select()),
+    nmap('ctrl+j', 'Select Next Panel', () => RoamPanel.nextPanel().select()),
     map('ctrl+w', 'Close Page in Side Bar', closeSidebarPage),
 ]

src/ts/core/features/vim-mode/roam/roam-panel.ts

@@ -9,12 +9,14 @@ type BlockNavigationState = {
     panelOrder: PanelId[]
     panels: Map<PanelId, RoamPanel>
     focusedPanel: PanelIndex
+    lastFocusedSidebarPanel: PanelIndex
 }
 
 const state: BlockNavigationState = {
     panelOrder: [],
     panels: new Map(),
     focusedPanel: 0,
+    lastFocusedSidebarPanel: 1,
 }
 
 /**
@@ -26,7 +28,7 @@ type PanelIndex = number
 type PanelElement = HTMLElement
 
 const PANEL_CSS_CLASS = 'roam-toolkit--panel'
-const PANEL_SELECTOR = `.${PANEL_CSS_CLASS}, ${Selectors.sidebarContent}`
+const PANEL_SELECTOR = `.${PANEL_CSS_CLASS}, ${Selectors.sidebarPage}`
 
 /**
  * A "Panel" is a viewport that contains blocks. For now, there is just
@@ -121,8 +123,11 @@ export class RoamPanel {
     }
 
     select() {
+        if (state.focusedPanel > 0) {
+            state.lastFocusedSidebarPanel = state.focusedPanel
+        }
         state.focusedPanel = state.panelOrder.indexOf(this.element)
-        this.element.scrollIntoView({behavior: 'smooth'})
+        this.element.scrollIntoView()
     }
 
     static selected(): RoamPanel {
@@ -144,6 +149,10 @@ export class RoamPanel {
         return RoamPanel.at(0)
     }
 
+    static previousSidebarPanel(): RoamPanel {
+        return RoamPanel.at(state.lastFocusedSidebarPanel)
+    }
+
     static previousPanel(): RoamPanel {
         return RoamPanel.at(state.focusedPanel - 1)
     }

src/ts/core/roam/selectors.ts

@@ -10,7 +10,7 @@ export const Selectors = {
     mainPanel: '.roam-body-main',
 
     sidebarContent: '#roam-right-sidebar-content',
-    sidebarPage: '#right-sidebar > div',
+    sidebarPage: `#roam-right-sidebar-content > div`,
     sidebar: '#right-sidebar',
 
     leftPanel: '.roam-sidebar-container',