frontend/aria/hotkey: recent files and bugfixes

Author: haraldschilly

src/packages/frontend/app/hotkey/build-tree.tsx

@@ -58,6 +58,7 @@ export interface ProjectInfo {
   files: FileInfo[];
   pages: PageInfo[];
   starredFiles?: string[]; // Paths to starred files in this project
+  recentFiles?: string[]; // Paths to recently opened files in this project (limit 10)
 }
 
 export type AppPageAction = "tab" | "toggle-file-use";
@@ -355,7 +356,46 @@ function buildProjectNode(
     });
   }
 
-  // 3. Pages section with nested pages list
+  // 3. Recent files section (if any)
+  if (project.recentFiles && project.recentFiles.length > 0) {
+    const recentFileChildren: NavigationTreeNode[] = project.recentFiles.map(
+      (filePath) => {
+        const fileName = filePath.split("/").pop() || filePath;
+        const fileIcon = filenameIcon(filePath);
+        return {
+          key: `recent-file-${project.id}-${filePath}`,
+          title: (
+            <span className="tree-node-ellipsis" title={filePath}>
+              {fileName}
+            </span>
+          ),
+          icon: <Icon name={fileIcon} />,
+          navigationData: {
+            type: "file",
+            id: filePath,
+            projectId: project.id,
+            filePath,
+            searchText: filePath,
+            action: async () => {
+              // Will be set by caller with actual actions
+            },
+          },
+        };
+      },
+    );
+
+    children.push({
+      key: `project-${project.id}-recent-files`,
+      title: (
+        <>
+          <Icon name="history" /> Recent
+        </>
+      ),
+      children: recentFileChildren,
+    });
+  }
+
+  // 4. Pages section with nested pages list
   if (project.pages.length > 0) {
     const pageChildren: NavigationTreeNode[] = [];
 

src/packages/frontend/app/hotkey/dialog.tsx

@@ -806,13 +806,12 @@ export const QuickNavigationDialog: React.FC<QuickNavigationDialogProps> = ({
 
         <div
           ref={treeContainerRef}
+          onClick={(e) => e.stopPropagation()}
           style={{
             flex: 1,
             overflow: "auto",
             minHeight: 0,
             minWidth: 0,
-            // Suppress Ant Design Tree's default selection styling (border/background)
-            // We only use bold text for selection
           }}
           className="quick-nav-tree"
         >
@@ -828,7 +827,7 @@ export const QuickNavigationDialog: React.FC<QuickNavigationDialogProps> = ({
             onSelect={async (keys, info) => {
               const newKey = keys[0] || null;
 
-              // Search in transformedTreeData (full tree with parents) not searchList (only leaves)
+              // Search in transformedTreeData (full tree with parents) to check if leaf
               const findNode = (
                 nodes: NavigationTreeNode[],
               ): NavigationTreeNode | undefined => {
@@ -842,11 +841,11 @@ export const QuickNavigationDialog: React.FC<QuickNavigationDialogProps> = ({
                 return undefined;
               };
 
-              const targetNode = findNode(transformedTreeData);
+              const treeNode = findNode(transformedTreeData);
 
               // Check if this is a leaf node (no children)
               const isLeaf =
-                !targetNode?.children || targetNode.children.length === 0;
+                !treeNode?.children || treeNode.children.length === 0;
 
               // Only allow selection and interaction for leaf nodes
               if (!isLeaf) {
@@ -876,9 +875,16 @@ export const QuickNavigationDialog: React.FC<QuickNavigationDialogProps> = ({
 
               // If selected via mouse click on a leaf node, activate it immediately
               // The info.event object is only present when user clicks
-              if (info.event && targetNode?.navigationData) {
-                await triggerAction(targetNode.navigationData.action);
-                onClose();
+              if (info.event) {
+                // Use filteredSearchList (same source as Return key handler)
+                // This ensures navigationData is properly populated
+                const listNode = filteredSearchList.find(
+                  (item) => item.key === newKey,
+                );
+                if (listNode?.node.navigationData) {
+                  await triggerAction(listNode.node.navigationData.action);
+                  onClose();
+                }
               }
             }}
           />

src/packages/frontend/app/hotkey/use-navigation-data.ts

@@ -5,7 +5,7 @@
 
 declare var DEBUG: boolean;
 
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import { useIntl } from "react-intl";
 
 import { switchAccountPage } from "@cocalc/frontend/account/util";
@@ -41,6 +41,7 @@ import {
   focusFrameWithRetry,
   resolveSpecLabel,
 } from "./util";
+import { getRecentFilesList } from "@cocalc/frontend/projects/util";
 
 const PROJECT_PAGE_INFOS: PageInfo[] = Object.entries(FIXED_PROJECT_TABS)
   .filter(([tabId]) => tabId !== "active")
@@ -210,6 +211,10 @@ export function useNavigationTreeData(
     { project_id: project_id ?? "" },
     "starred_files",
   );
+  const project_log = useTypedRedux(
+    { project_id: project_id ?? "" },
+    "project_log",
+  );
 
   // Only use these if we're in a project view
   const starred_files = isProjectView ? starred_files_raw : undefined;
@@ -315,7 +320,7 @@ export function useNavigationTreeData(
           if (starred_files) {
             const allStarred = Array.isArray(starred_files)
               ? starred_files
-              : starred_files.toArray?.() ?? [];
+              : (starred_files.toArray?.() ?? []);
             starredFiles = allStarred.filter(
               (path) => !openFilePaths.has(path),
             );
@@ -328,20 +333,43 @@ export function useNavigationTreeData(
             if (otherStarredFiles) {
               const allStarred = Array.isArray(otherStarredFiles)
                 ? otherStarredFiles
-                : otherStarredFiles.toArray?.() ?? [];
+                : (otherStarredFiles.toArray?.() ?? []);
               starredFiles = allStarred.filter(
                 (path) => !openFilePaths.has(path),
               );
             }
           }
         }
 
+        // Get recent files for this project (excluding already-open files)
+        let recentFiles: string[] = [];
+        if (isCurrentProject) {
+          // Current project: get from Redux project_log
+          if (project_log) {
+            const allRecent = getRecentFilesList(project_log, 10);
+            recentFiles = allRecent.filter((path) => !openFilePaths.has(path));
+          }
+        } else {
+          // Other projects: get from their project store if available
+          const otherProjectStore = redux.getProjectStore(projectId);
+          if (otherProjectStore) {
+            const otherProjectLog = otherProjectStore.get("project_log");
+            if (otherProjectLog) {
+              const allRecent = getRecentFilesList(otherProjectLog, 10);
+              recentFiles = allRecent.filter(
+                (path) => !openFilePaths.has(path),
+              );
+            }
+          }
+        }
+
         return {
           id: projectId,
           title: proj.get("title") || projectId,
           files,
           pages: PROJECT_PAGE_INFOS,
           starredFiles,
+          recentFiles,
         } as ProjectInfo;
       })
       .filter((p): p is ProjectInfo => p !== null);
@@ -353,6 +381,7 @@ export function useNavigationTreeData(
     open_files,
     open_files_order,
     starred_files,
+    project_log,
   ]);
 
   // Get bookmarked projects
@@ -374,14 +403,15 @@ export function useNavigationTreeData(
           return null;
         }
 
-        // For bookmarked projects, we don't need open files, pages, or starred files
+        // For bookmarked projects, we don't need open files, pages, starred files, or recent files
         // (they're not open, so those are unavailable)
         return {
           id: projectId,
           title: proj.get("title") || projectId,
           files: [],
           pages: [],
           starredFiles: [],
+          recentFiles: [],
         } as ProjectInfo;
       })
       .filter((p): p is ProjectInfo => p !== null);
@@ -426,6 +456,32 @@ export function useNavigationTreeData(
     return pages;
   }, [skip, intl, is_logged_in, is_anonymous]);
 
+  // Initialize project_log for all open projects so recent files are available
+  // This needs to happen in useEffect (not useMemo) because init_table is a side effect
+  useEffect(() => {
+    if (skip || !open_projects) {
+      return;
+    }
+
+    // Initialize project_log for the current project
+    if (project_id) {
+      const store = redux.getProjectStore(project_id);
+      if (store) {
+        store.init_table("project_log");
+      }
+    }
+
+    // Initialize project_log for all other open projects
+    open_projects.forEach((projectId: string) => {
+      if (projectId !== project_id) {
+        const store = redux.getProjectStore(projectId);
+        if (store) {
+          store.init_table("project_log");
+        }
+      }
+    });
+  }, [skip, project_id, open_projects]);
+
   // Build the complete navigation tree
   const treeData = useMemo(() => {
     if (skip) {
@@ -719,15 +775,9 @@ export function useEnhancedNavigationTreeData(
                 case "tab":
                   page_actions?.set_active_tab(navData.id);
                   break;
-                case "toggle-file-use": {
-                  const showFileUse = redux
-                    .getStore("page")
-                    ?.get("show_file_use");
-                  if (!showFileUse) {
-                    page_actions?.toggle_show_file_use();
-                  }
+                case "toggle-file-use":
+                  page_actions?.toggle_show_file_use();
                   break;
-                }
                 default:
                   unreachable(navData.appPageAction);
               }

src/packages/frontend/projects/util.tsx

@@ -251,24 +251,19 @@ export interface OpenedFile {
 }
 
 /**
- * React hook to get recent files from project log with deduplication and optional search filtering
+ * Core helper to get sorted, deduplicated entries from project log
+ * Used by both getRecentFilesList and useRecentFiles to avoid duplication
  *
- * @param project_log - The project log from redux store
- * @param max - Maximum number of files to return (default: 100)
- * @param searchTerm - Optional search term to filter filenames (case-insensitive)
- * @returns Array of recent opened files
+ * @param projectLog - The project log from redux store (Immutable structure)
+ * @returns Sorted and deduplicated project log entries
  */
-export function useRecentFiles(
-  project_log: any,
-  max: number = 100,
-  searchTerm: string = "",
-): OpenedFile[] {
-  return useMemo(() => {
-    if (project_log == null || max === 0) return [];
+function getSortedRecentEntries(projectLog: any): any[] {
+  if (projectLog == null) return [];
 
-    const dedupe: string[] = [];
+  const dedupe: Set<string> = new Set();
 
-    return project_log
+  try {
+    return projectLog
       .valueSeq()
       .filter(
         (entry: EventRecordMap) =>
@@ -278,23 +273,74 @@ export function useRecentFiles(
       .sort((a, b) => getTime(b) - getTime(a))
       .filter((entry: EventRecordMap) => {
         const fn = entry.getIn(["event", "filename"]);
-        if (dedupe.includes(fn)) return false;
-        dedupe.push(fn);
+        if (!fn || dedupe.has(fn)) return false;
+        dedupe.add(fn);
         return true;
       })
-      .filter((entry: EventRecordMap) =>
-        entry
-          .getIn(["event", "filename"], "")
-          .toLowerCase()
-          .includes(searchTerm.toLowerCase()),
-      )
+      .toArray();
+  } catch (err) {
+    console.log("Error sorting recent entries", err);
+    return [];
+  }
+}
+
+/**
+ * Extract recent files from project log (non-hook utility for use across the codebase)
+ * Returns only filenames for quick navigation use
+ *
+ * @param projectLog - The project log from redux store (Immutable structure)
+ * @param max - Maximum number of files to return (default: 10)
+ * @returns Array of filenames in reverse chronological order
+ */
+export function getRecentFilesList(
+  projectLog: any,
+  max: number = 10,
+): string[] {
+  try {
+    return getSortedRecentEntries(projectLog)
       .slice(0, max)
-      .map((entry: EventRecordMap) => ({
-        filename: entry.getIn(["event", "filename"]),
-        time: entry.get("time"),
-        account_id: entry.get("account_id"),
-      }))
-      .toJS() as OpenedFile[];
+      .map((entry: EventRecordMap) => entry.getIn(["event", "filename"]))
+      .filter((fn: string) => !!fn) as string[];
+  } catch (err) {
+    console.log("Error extracting recent files list", err);
+    return [];
+  }
+}
+
+/**
+ * React hook to get recent files from project log with deduplication and optional search filtering
+ *
+ * @param project_log - The project log from redux store
+ * @param max - Maximum number of files to return (default: 100)
+ * @param searchTerm - Optional search term to filter filenames (case-insensitive)
+ * @returns Array of recent opened files
+ */
+export function useRecentFiles(
+  project_log: any,
+  max: number = 100,
+  searchTerm: string = "",
+): OpenedFile[] {
+  return useMemo(() => {
+    if (project_log == null || max === 0) return [];
+
+    try {
+      return getSortedRecentEntries(project_log)
+        .filter((entry: EventRecordMap) =>
+          entry
+            .getIn(["event", "filename"], "")
+            .toLowerCase()
+            .includes(searchTerm.toLowerCase()),
+        )
+        .slice(0, max)
+        .map((entry: EventRecordMap) => ({
+          filename: entry.getIn(["event", "filename"]),
+          time: entry.get("time"),
+          account_id: entry.get("account_id"),
+        })) as OpenedFile[];
+    } catch (err) {
+      console.log("Error extracting recent files", err);
+      return [];
+    }
   }, [project_log, max, searchTerm]);
 }