frontend/aria/hotkey: improve dialog …

Author: haraldschilly

src/packages/frontend/app/hotkey/_hotkey.sass

@@ -0,0 +1,30 @@
+// Quick Navigation Dialog Styles
+// This file is part of CoCalc: Copyright © 2025 Sagemath, Inc.
+// License: MS-RSL – see LICENSE.md for details
+
+@use '../../colors'
+
+// CSS ellipsis style for tree node titles
+// Truncates text with ellipsis while preserving full text for search and hover
+.tree-node-ellipsis
+  display: inline-block
+  white-space: nowrap
+  overflow: hidden
+  text-overflow: ellipsis
+  max-width: 350px
+
+.quick-nav-tree
+  // Prevent tree node content from wrapping to multiple lines
+  .ant-tree-node-content-wrapper
+    white-space: nowrap
+    overflow: hidden
+    text-overflow: ellipsis
+
+    &.ant-tree-node-selected
+      background-color: colors.$COL_BLUE_L
+
+  // Highlight the entire node content wrapper when selected
+  .ant-tree-node-selected .ant-tree-title
+    display: inline-block
+    padding: 0 2px
+    border-radius: 2px

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

@@ -12,10 +12,9 @@ import {
 import AIAvatar from "@cocalc/frontend/components/ai-avatar";
 import { Icon, IconName } from "@cocalc/frontend/components";
 import { filenameIcon } from "@cocalc/frontend/file-associations";
-import { FIXED_PROJECT_TABS } from "@cocalc/frontend/project/page/file-tab";
 import type { FixedTab } from "@cocalc/frontend/project/page/file-tab";
+import { FIXED_PROJECT_TABS } from "@cocalc/frontend/project/page/file-tab";
 import { COLORS } from "@cocalc/util/theme";
-import { trunc_middle } from "@cocalc/util/misc";
 import type { NavigationTreeNode } from "./dialog";
 
 /**
@@ -202,7 +201,11 @@ export function buildNavigationTree(
 
     tree.push({
       key: "current-file",
-      title: trunc_middle(activeFileName, 50),
+      title: (
+        <span className="tree-node-ellipsis" title={activeFileName}>
+          {activeFileName}
+        </span>
+      ),
       defaultExpanded: true, // Always expand the current file
       children,
     });
@@ -335,7 +338,11 @@ function buildProjectNode(project: ProjectInfo): NavigationTreeNode {
       const fileIcon = filenameIcon(file.path);
       const fileNode: NavigationTreeNode = {
         key: `file-${file.path}`,
-        title: trunc_middle(file.name, 30),
+        title: (
+          <span className="tree-node-ellipsis" title={file.path}>
+            {file.name}
+          </span>
+        ),
         icon: <Icon name={fileIcon} />,
         navigationData: {
           type: "file",
@@ -381,7 +388,11 @@ function buildProjectNode(project: ProjectInfo): NavigationTreeNode {
         const fileIcon = filenameIcon(filePath);
         return {
           key: `starred-file-${filePath}`,
-          title: trunc_middle(fileName, 30),
+          title: (
+            <span className="tree-node-ellipsis" title={filePath}>
+              {fileName}
+            </span>
+          ),
           icon: <Icon name={fileIcon} />,
           navigationData: {
             type: "file",

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

@@ -525,7 +525,6 @@ export const QuickNavigationDialog: React.FC<QuickNavigationDialogProps> = ({
     // Then, transform for visual highlighting
     const transform = (nodes: NavigationTreeNode[]): NavigationTreeNode[] => {
       return nodes.map((node) => {
-        const isSelected = node.key === selectedKey;
         const titleText = extractTextFromTitle(node.title);
         const isLeaf = !node.children || node.children.length === 0;
 
@@ -534,23 +533,29 @@ export const QuickNavigationDialog: React.FC<QuickNavigationDialogProps> = ({
         // Apply search term highlighting only to leaf nodes (files, not container labels)
         if (searchValue && titleText.length > 0 && isLeaf) {
           const highlighted = highlightSearchMatches(titleText, searchValue);
-          title = <span>{highlighted}</span>;
+          // Preserve tree-node-ellipsis styling when wrapping highlighted content
+          const hasEllipsisClass =
+            React.isValidElement(node.title) &&
+            typeof node.title.props === "object" &&
+            node.title.props !== null &&
+            "className" in node.title.props &&
+            typeof node.title.props.className === "string" &&
+            node.title.props.className.includes("tree-node-ellipsis");
+
+          if (hasEllipsisClass) {
+            // Preserve the ellipsis class with highlighted content
+            title = (
+              <span className="tree-node-ellipsis" title={titleText}>
+                {highlighted}
+              </span>
+            );
+          } else {
+            title = <span>{highlighted}</span>;
+          }
         }
 
-        // Apply selection styling with pale blue background (not bold to preserve search highlighting)
-        if (isSelected) {
-          title = (
-            <span
-              style={{
-                backgroundColor: "rgba(13, 110, 253, 0.15)",
-                padding: "0 2px",
-                borderRadius: "2px",
-              }}
-            >
-              {title}
-            </span>
-          );
-        }
+        // Note: Selection styling is handled by CSS in _hotkey.sass via .ant-tree-node-selected class
+        // Ant Design's Tree component applies this class when node key is in selectedKeys prop
 
         return {
           ...node,
@@ -633,14 +638,6 @@ export const QuickNavigationDialog: React.FC<QuickNavigationDialogProps> = ({
           }}
           className="quick-nav-tree"
         >
-          <style>{`
-            .quick-nav-tree .ant-tree-node-selected {
-              background-color: transparent !important;
-            }
-            .quick-nav-tree .ant-tree-node-selected > span[class*="content"] {
-              outline: none !important;
-            }
-          `}</style>
           <Tree
             treeData={transformedTreeData}
             expandedKeys={expandedKeys}

src/packages/frontend/index.sass

@@ -27,6 +27,7 @@
 @use 'notifications/_style' as notifications-style
 @use 'account-button'
 @use 'admin/_style' as admin-style
+@use 'app/hotkey/_hotkey' as hotkey-style
 @use 'antd_fix'
 
 @font-face