Fix ideas for header back button bug and add debug logging

client/src/components/header/HeaderBackButton.vue

@@ -4,7 +4,7 @@
   <div class="back-button-container">
     <ion-button
       fill="clear"
-      @click="routerGoBack()"
+      @click="onBackClick()"
       class="back-button"
     >
       <ion-icon
@@ -27,7 +27,8 @@
 </template>
 
 <script setup lang="ts">
-import { routerGoBack } from '@/router';
+import { Path } from '@/parsec';
+import { currentRouteIs, getDocumentPath, getWorkspaceHandle, navigateTo, routerGoBack, Routes } from '@/router';
 import { IonButton, IonIcon, IonLabel } from '@ionic/vue';
 import { chevronBack } from 'ionicons/icons';
 import { useWindowSize } from 'megashark-lib';
@@ -37,6 +38,29 @@
 defineProps<{
   short: boolean;
 }>();
+
+async function onBackClick(): Promise<void> {
+  console.log('[DEBUG] HeaderBackButton clicked');
+  routerGoBack();
+
+  // Possible fix for issue #11344
+  // if (!currentRouteIs(Routes.FileHandler)) {
+  //   routerGoBack();
+  // } else {
+  //   console.log('[DEBUG] FileHandler back navigation - navigating to documents');
+  //   const workspaceHandle = getWorkspaceHandle();
+  //   const path = getDocumentPath();
+  //   if (workspaceHandle && path) {
+  //     const parentPath = await Path.parent(path);
+  //     await navigateTo(Routes.Documents, {
+  //       query: {
+  //         workspaceHandle: workspaceHandle,
+  //         documentPath: parentPath,
+  //       },
+  //     });
+  //   }
+  // }
+}
 </script>
 
 <style scoped lang="scss">

client/src/locales/en-US.json

@@ -514,7 +514,8 @@
             "myProfile": "My profile",
             "recoveryExport": "Recovery file",
             "history": "History",
-            "viewer": "File viewer"
+            "viewer": "File viewer",
+            "editor": "File editor"
         },
         "previous": "Go back",
         "invitations": {

client/src/locales/fr-FR.json

@@ -513,7 +513,8 @@
             "myProfile": "Mon profil",
             "recoveryExport": "Fichier de récupération",
             "history": "Historique",
-            "viewer": "Aperçu du fichier"
+            "viewer": "Aperçu du fichier",
+            "editor": "Édition du fichier"
         },
         "previous": "Précédent",
         "invitations": {

client/src/router/navigation.ts

@@ -52,7 +52,7 @@ export async function navigateToWorkspace(
 
 export async function routerGoBack(): Promise<void> {
   const router = getRouter();
-  router.go(-1);
+  router.back();
 }
 
 const routesBackup: Array<RouteBackup> = [];

client/src/router/types.ts

@@ -259,6 +259,10 @@ router.beforeEach((to, from, next) => {
   next();
 });
 
+router.afterEach((to, from) => {
+  console.log('[DEBUG]', '(afterEach)', { from: from.fullPath, to: to.fullPath });
+});
+
 export function getRouter(): Router {
   return router;
 }

client/src/services/fileOpener.ts

@@ -35,6 +35,7 @@ interface OpenPathOptions {
   atTime?: DateTime;
   useEditor?: boolean;
   readOnly?: boolean;
+  replaceHistory?: boolean; // #11344 Could be used replace history on routing
 }
 
 // Uncomment here to enable file viewers on desktop; should be removed when all file viewers are implemented
@@ -215,10 +216,12 @@ async function openInEditor(
             timestamp: options.atTime?.toMillis().toString(),
             fileTypeInfo: Base64.fromObject(contentType),
             readOnly: options.readOnly,
+            _t: Date.now(), // #11344 Cache buster to force routing to be unique
           },
           params: {
             mode: FileHandlerMode.Edit,
           },
+          replace: options.replaceHistory,
         });
       } else {
         await openFileOpenFallbackModal(entry, workspaceHandle, path, informationManager, fileOperationManager, options, {

client/src/views/files/handler/FileHandler.vue

@@ -244,9 +244,11 @@ import { link, informationCircle, open, chevronUp, chevronDown, ellipsisHorizont
 import { Information, InformationLevel, InformationManager, InformationManagerKey, PresentationMode } from '@/services/informationManager';
 import {
   currentRouteIs,
+  getCurrentRoute,
   getCurrentRouteQuery,
   getDocumentPath,
   getFileHandlerMode,
+  getRouter,
   getWorkspaceHandle,
   navigateTo,
   routerGoBack,
@@ -295,7 +297,9 @@ const showSaveStateText = ref(true);
 const readOnly = ref(false);
 
 const cancelRouteWatch = watchRoute(async () => {
+  console.log('[DEBUG]', '(cancelRouteWatch)', getCurrentRoute().value);
   if (!currentRouteIs(Routes.FileHandler)) {
+    console.log('[DEBUG]', '(cancelRouteWatch) not FileHandler route anymore');
     return;
   }
 
@@ -305,6 +309,11 @@ const cancelRouteWatch = watchRoute(async () => {
   const fileHandlerMode = getFileHandlerMode();
 
   // Same file, no need to reload
+  console.log('[DEBUG]', '(cancelRouteWatch) contentInfo:', contentInfo.value);
+  console.log('[DEBUG]', '(cancelRouteWatch) atDateTime:', atDateTime.value);
+  console.log('[DEBUG]', '(cancelRouteWatch) fileHandlerMode:', fileHandlerMode);
+  console.log('[DEBUG]', '(cancelRouteWatch) handlerMode:', handlerMode.value);
+  console.log('[DEBUG]', '(cancelRouteWatch) readOnly:', Boolean(query.readOnly), readOnly.value);
   if (
     contentInfo.value &&
     contentInfo.value.path === getDocumentPath() &&
@@ -448,6 +457,10 @@ async function _getFileInfo(
 }
 
 async function loadFile(): Promise<void> {
+  console.log('[DEBUG] loadFile called');
+  console.log('[DEBUG] loadFile - current route:', getCurrentRoute().value.fullPath);
+  console.log('[DEBUG] loadFile - handlerMode:', handlerMode.value);
+
   loaded.value = false;
   contentInfo.value = undefined;
   detectedFileType.value = null;
@@ -456,37 +469,48 @@ async function loadFile(): Promise<void> {
   handlerReadyRef.value = false;
   const workspaceHandle = getWorkspaceHandle();
   if (!workspaceHandle) {
+    console.log('[DEBUG] loadFile - no workspace handle');
     window.electronAPI.log('error', 'Failed to retrieve workspace handle');
     return;
   }
   const path = getDocumentPath();
   if (!path) {
+    console.log('[DEBUG] loadFile - no document path');
     window.electronAPI.log('error', 'Failed to retrieve document path');
   }
+  console.log('[DEBUG] loadFile - path:', path);
+
   const fileName = await Path.filename(path);
   if (!fileName) {
+    console.log('[DEBUG] loadFile - no file name');
     window.electronAPI.log('error', 'Failed to retrieve the file name');
     return;
   }
+  console.log('[DEBUG] loadFile - fileName:', fileName);
 
   const timestamp = Number(getCurrentRouteQuery().timestamp);
   if (!Number.isNaN(timestamp)) {
     atDateTime.value = DateTime.fromMillis(timestamp);
   }
+  console.log('[DEBUG] loadFile - timestamp:', timestamp, 'atDateTime:', atDateTime.value);
 
   const fileInfoSerialized = getCurrentRouteQuery().fileTypeInfo;
   if (!fileInfoSerialized) {
+    console.log('[DEBUG] loadFile - no file type info');
     window.electronAPI.log('error', 'Failed to retrieve file type info');
     return;
   }
   const fileInfo: DetectedFileType = Base64.toObject(fileInfoSerialized) as DetectedFileType;
   detectedFileType.value = fileInfo;
+  console.log('[DEBUG] loadFile - fileInfo:', fileInfo);
 
+  console.log('[DEBUG] loadFile - starting file read...');
   const info = timestamp
     ? await _getFileInfoAt(workspaceHandle, path, DateTime.fromMillis(timestamp), fileInfo, fileName)
     : await _getFileInfo(workspaceHandle, path, fileInfo, fileName);
 
   if (!info) {
+    console.log('[DEBUG] loadFile - failed to get file info');
     contentInfo.value = undefined;
     handlerComponent.value = null;
     handlerReadyRef.value = false;
@@ -504,15 +528,18 @@ async function loadFile(): Promise<void> {
     return;
   }
 
+  console.log('[DEBUG] loadFile - file info retrieved, size:', info.data.length);
   contentInfo.value = info;
   if (timestamp) {
     atDateTime.value = DateTime.fromMillis(timestamp);
   }
 
   // Load the appropriate component after file content is ready
+  console.log('[DEBUG] loadFile - loading component...');
   loadComponent();
 
   loaded.value = true;
+  console.log('[DEBUG] loadFile - complete, loaded:', loaded.value);
 }
 
 function loadComponent(): void {
@@ -546,15 +573,21 @@ async function checkSaved(): Promise<boolean> {
   return true;
 }
 
-onBeforeRouteLeave(async () => {
+onBeforeRouteLeave(async (to, from) => {
+  console.log('[DEBUG]', '(onBeforeRouteLeave)', 'from:', from.fullPath, 'to:', to.fullPath);
   return await checkSaved();
 });
 
-onBeforeRouteUpdate(async () => {
+onBeforeRouteUpdate(async (to, from) => {
+  console.log('[DEBUG]', '(onBeforeRouteUpdate)', 'from:', from.fullPath, 'to:', to.fullPath);
   return await checkSaved();
 });
 
 onMounted(async () => {
+  console.log('[DEBUG]', '(onMounted)');
+  getRouter().onError((err) => {
+    console.log('[DEBUG]', '(onError)', err);
+  });
   handlerMode.value = getFileHandlerMode();
   const query = getCurrentRouteQuery();
   readOnly.value = Boolean(query.readOnly);
@@ -668,6 +701,10 @@ async function showDetails(): Promise<void> {
 }
 
 async function openEditor(path: FsPath): Promise<void> {
+  // Here we want to ensure the router goes back to documents page
+  // before opening the editor for routing purposes (history stack)
+  // Could probably be improved with better routing management
+  // maybe avoiding routing between viewer and editor by loading components directly
   await routerGoBack();
   const workspaceHandle = getWorkspaceHandle();
   if (workspaceHandle) {

client/src/views/header/HeaderPage.vue

@@ -170,6 +170,7 @@ import {
   routerGoBack,
   watchRoute,
   currentRouteIsLoggedRoute,
+  getFileHandlerMode,
 } from '@/router';
 import { HotkeyGroup, HotkeyManager, HotkeyManagerKey, Modifiers, Platforms } from '@/services/hotkeyManager';
 import { InformationManager, InformationManagerKey } from '@/services/informationManager';
@@ -394,8 +395,10 @@ function getTitleForRoute(): Translatable {
       return 'HeaderPage.titles.myProfile';
     case Routes.History:
       return 'HeaderPage.titles.history';
-    case Routes.FileHandler:
-      return 'HeaderPage.titles.viewer';
+    case Routes.FileHandler: {
+      const mode = getFileHandlerMode();
+      return mode === 'edit' ? 'HeaderPage.titles.editor' : 'HeaderPage.titles.viewer';
+    }
     case null:
       return '';
   }