feat(pages): bind backspace to go backwards

Author: gustavotoyota

apps/client/src/code/pages/composables/use-keyboard-shortcuts.ts

@@ -149,6 +149,10 @@ export function useKeyboardShortcuts() {
         return true;
       }
 
+      if (event.code === 'Backspace' && activeElem == null) {
+        await internals.pages.goBackward();
+        return true;
+      }
       if (event.code === 'Backspace' && activeElem != null) {
         await page.editing.start(activeElem);
         page.editing.react.editor?.commands.deleteSelection();

apps/client/src/code/pages/pages.ts

@@ -109,7 +109,7 @@ export class Pages {
   }
 
   async setupPage(pageId: string) {
-    internals.pages.react.page?.deactivate();
+    this.react.page?.deactivate();
 
     let page;
 
@@ -121,7 +121,7 @@ export class Pages {
       this.pageCache.add(page);
     }
 
-    internals.pages.react.page = page;
+    this.react.page = page;
 
     pagesStore().loading = false;
 
@@ -231,6 +231,22 @@ export class Pages {
     }
   }
 
+  async goBackward() {
+    await this.goToPage(
+      this.react.pathPageIds[
+        this.react.pathPageIds.indexOf(this.react.pageId!) - 1
+      ],
+    );
+  }
+
+  async goForward() {
+    await this.goToPage(
+      this.react.pathPageIds[
+        this.react.pathPageIds.indexOf(this.react.pageId!) + 1
+      ],
+    );
+  }
+
   destroy() {
     for (const page of this.pageCache.react.cache) {
       page.destroy();

apps/client/src/layouts/PagesLayout/MainContent/DisplayUI/DisplayLeftBtns.vue

@@ -7,7 +7,7 @@
       :disable="
         internals.pages.react.pageId === internals.pages.react.pathPageIds[0]
       "
-      @click="goBackward()"
+      @click="internals.pages.goBackward()"
     >
       <q-tooltip
         anchor="center right"
@@ -29,7 +29,7 @@
         internals.pages.react.pageId ===
         internals.pages.react.pathPageIds.at(-1)
       "
-      @click="goForward()"
+      @click="internals.pages.goForward()"
     >
       <q-tooltip
         anchor="center right"
@@ -88,24 +88,6 @@
 import TakeScreenshotDialog from '../../MainToolbar/TakeScreenshotDialog.vue';
 
 const page = computed(() => internals.pages.react.page);
-
-async function goBackward() {
-  await internals.pages.goToPage(
-    internals.pages.react.pathPageIds[
-      internals.pages.react.pathPageIds.indexOf(internals.pages.react.pageId!) -
-        1
-    ],
-  );
-}
-
-async function goForward() {
-  await internals.pages.goToPage(
-    internals.pages.react.pathPageIds[
-      internals.pages.react.pathPageIds.indexOf(internals.pages.react.pageId!) +
-        1
-    ],
-  );
-}
 </script>
 
 <style lang="scss" scoped>