collabmd 0.1.40 → 0.1.42

package/src/client/bootstrap/lazy-controller-feature.js

@@ -0,0 +1,434 @@
+function getPathLeaf(filePath = '') {
+  return String(filePath ?? '').split('/').filter(Boolean).pop() || String(filePath ?? '') || 'File';
+}
+
+function createLazyControllerProxy({
+  createController,
+  fallback = {},
+  loadController,
+  onControllerReady = null,
+  shouldLoad = () => true,
+}) {
+  let controller = null;
+  let controllerPromise = null;
+
+  const ensure = async () => {
+    if (controller) {
+      return controller;
+    }
+    if (!controllerPromise) {
+      controllerPromise = loadController()
+        .then((ControllerClass) => {
+          controller = createController(ControllerClass);
+          onControllerReady?.(controller);
+          return controller;
+        })
+        .catch((error) => {
+          controllerPromise = null;
+          throw error;
+        });
+    }
+    return controllerPromise;
+  };
+
+  const proxy = new Proxy({}, {
+    get(_target, prop) {
+      if (prop === 'then' || typeof prop !== 'string') {
+        return undefined;
+      }
+      if (prop === 'ensure') {
+        return ensure;
+      }
+      if (prop === 'current') {
+        return controller;
+      }
+      if (controller && prop in controller) {
+        const value = controller[prop];
+        return typeof value === 'function' ? value.bind(controller) : value;
+      }
+      if (Object.hasOwn(fallback, prop)) {
+        const value = fallback[prop];
+        return typeof value === 'function' ? value.bind(proxy) : value;
+      }
+      return (...args) => {
+        if (!shouldLoad(prop, args)) {
+          return undefined;
+        }
+        return ensure().then((resolvedController) => {
+          const value = resolvedController[prop];
+          return typeof value === 'function' ? value.apply(resolvedController, args) : value;
+        });
+      };
+    },
+  });
+
+  return proxy;
+}
+
+function hasPreviewSelector(previewElement, selector) {
+  return Boolean(previewElement?.querySelector?.(selector));
+}
+
+export const lazyControllerFeature = {
+  reportLazyControllerError(label, error) {
+    console.error(`[lazy-controller] Failed to load ${label}.`, error);
+    this.toastController?.show?.(`Failed to load ${label}. Try again.`, {
+      dismissible: true,
+    });
+  },
+
+  loadBasesPreviewController() {
+    return import('../presentation/bases-preview-controller.js')
+      .then((module) => module.BasesPreviewController);
+  },
+
+  loadDrawioEmbedController() {
+    return import('../presentation/drawio-embed-controller.js')
+      .then((module) => module.DrawioEmbedController);
+  },
+
+  loadExcalidrawEmbedController() {
+    return import('../presentation/excalidraw-embed-controller.js')
+      .then((module) => module.ExcalidrawEmbedController);
+  },
+
+  loadGitPanelController() {
+    return import('../presentation/git-panel-controller.js')
+      .then((module) => module.GitPanelController);
+  },
+
+  loadGitDiffViewController() {
+    return import('../presentation/git-diff-view-controller.js')
+      .then((module) => module.GitDiffViewController);
+  },
+
+  loadFileHistoryViewController() {
+    return import('../presentation/file-history-view-controller.js')
+      .then((module) => module.FileHistoryViewController);
+  },
+
+  createLazyBasesPreviewController() {
+    let proxy;
+    proxy = createLazyControllerProxy({
+      createController: (BasesPreviewController) => new BasesPreviewController({
+        getActiveFilePath: () => this.currentFilePath,
+        getSession: () => this.session,
+        onOpenFile: (filePath) => filePath && this.navigation.navigateToFile(filePath),
+        previewElement: this.elements.previewContent,
+        replaceBaseSource: ({ path, source }) => {
+          if (path && path === this.currentFilePath) {
+            this.session?.replaceText?.(source);
+          }
+        },
+        toastController: this.toastController,
+        vaultApiClient: this.vaultApiClient,
+      }),
+      fallback: {
+        destroy: () => { },
+        reconcileEmbeds: (previewElement = this.elements.previewContent) => {
+          if (!hasPreviewSelector(previewElement, '.bases-embed-placeholder[data-base-key]')) {
+            return;
+          }
+          void proxy.ensure()
+            .then((controller) => controller.reconcileEmbeds(previewElement))
+            .catch((error) => this.reportLazyControllerError('Bases preview', error));
+        },
+        renderStandalone: async (payload) => {
+          const controller = await proxy.ensure();
+          return controller.renderStandalone(payload);
+        },
+      },
+      loadController: () => this.loadBasesPreviewController(),
+      shouldLoad: (methodName) => methodName === 'renderStandalone',
+    });
+    return proxy;
+  },
+
+  createLazyDrawioEmbedController() {
+    const state = {
+      hydrationPaused: false,
+      theme: null,
+    };
+    let proxy;
+    proxy = createLazyControllerProxy({
+      createController: (DrawioEmbedController) => new DrawioEmbedController({
+        getLocalUser: () => this.lobby.getLocalUser(),
+        getTheme: () => this.themeController.getTheme(),
+        onOpenFile: (filePath) => filePath && this.navigation.navigateToFile(filePath),
+        onOpenTextFile: (filePath) => filePath && this.navigation.navigateToFile(filePath, { drawioMode: 'text' }),
+        onToggleQuickSwitcher: () => {
+          void this.toggleQuickSwitcher();
+        },
+        previewContainer: this.elements.previewContainer,
+        previewElement: this.elements.previewContent,
+        toastController: this.toastController,
+      }),
+      fallback: {
+        destroy: () => { },
+        detachForCommit: () => { },
+        hydrateVisibleEmbeds: () => { },
+        reconcileEmbeds: (previewElement = this.elements.previewContent) => {
+          if (!hasPreviewSelector(previewElement, '.drawio-embed-placeholder[data-drawio-key]')) {
+            return;
+          }
+          void proxy.ensure()
+            .then((controller) => {
+              controller.reconcileEmbeds(previewElement);
+              controller.hydrateVisibleEmbeds();
+              controller.syncLayout();
+            })
+            .catch((error) => this.reportLazyControllerError('Draw.io preview', error));
+        },
+        setHydrationPaused: (paused) => {
+          state.hydrationPaused = Boolean(paused);
+        },
+        syncLayout: () => { },
+        updateLocalUser: () => { },
+        updateTheme: (theme) => {
+          state.theme = theme;
+        },
+      },
+      loadController: () => this.loadDrawioEmbedController(),
+      onControllerReady: (controller) => {
+        controller.setHydrationPaused(state.hydrationPaused);
+        if (state.theme) {
+          controller.updateTheme(state.theme);
+        }
+      },
+    });
+    return proxy;
+  },
+
+  createLazyExcalidrawEmbedController() {
+    const state = {
+      hydrationPaused: false,
+      localUser: null,
+      theme: null,
+    };
+    let proxy;
+    proxy = createLazyControllerProxy({
+      createController: (ExcalidrawEmbedController) => new ExcalidrawEmbedController({
+        getLocalUser: () => this.lobby.getLocalUser(),
+        getTheme: () => this.themeController.getTheme(),
+        onOpenFile: (filePath) => filePath && this.navigation.navigateToFile(filePath),
+        onToggleQuickSwitcher: () => {
+          void this.toggleQuickSwitcher();
+        },
+        previewContainer: this.elements.previewContainer,
+        previewElement: this.elements.previewContent,
+        toastController: this.toastController,
+      }),
+      fallback: {
+        destroy: () => { },
+        detachForCommit: () => { },
+        hydrateVisibleEmbeds: () => { },
+        prepareFileDisconnect: async () => false,
+        reconcileEmbeds: (previewElement = this.elements.previewContent, options = {}) => {
+          if (!hasPreviewSelector(previewElement, '.excalidraw-embed-placeholder[data-embed-key]')) {
+            return;
+          }
+          void proxy.ensure()
+            .then((controller) => {
+              controller.reconcileEmbeds(previewElement, options);
+              controller.hydrateVisibleEmbeds();
+              controller.syncLayout();
+            })
+            .catch((error) => this.reportLazyControllerError('Excalidraw preview', error));
+        },
+        setHydrationPaused: (paused) => {
+          state.hydrationPaused = Boolean(paused);
+        },
+        syncLayout: () => { },
+        updateLocalUser: (user) => {
+          state.localUser = user;
+        },
+        updateTheme: (theme) => {
+          state.theme = theme;
+        },
+      },
+      loadController: () => this.loadExcalidrawEmbedController(),
+      onControllerReady: (controller) => {
+        controller.setHydrationPaused(state.hydrationPaused);
+        if (state.theme) {
+          controller.updateTheme(state.theme);
+        }
+        if (state.localUser) {
+          controller.updateLocalUser(state.localUser);
+        }
+      },
+    });
+    return proxy;
+  },
+
+  createLazyGitPanelController() {
+    const state = {
+      active: false,
+      mode: 'changes',
+      selection: {},
+    };
+    let proxy;
+    proxy = createLazyControllerProxy({
+      createController: (GitPanelController) => new GitPanelController({
+        enabled: this.runtimeConfig.gitEnabled !== false,
+        gitApiClient: this.gitApiClient,
+        onCommitStaged: () => this.openGitCommitDialog(),
+        onOpenPullBackup: (filePath) => filePath && this.navigation.navigateToFile(filePath),
+        onPullBranch: () => this.pullGitBranch(),
+        onPushBranch: () => this.pushGitBranch(),
+        onRepoChange: (isGitRepo, status) => this.handleGitRepoChange(isGitRepo, status),
+        onResetFile: (filePath, { scope }) => this.openGitResetDialog(filePath, { scope }),
+        onSelectCommit: (hash, { path }) => this.handleGitCommitSelection(hash, { closeSidebarOnMobile: true, path }),
+        onSelectDiff: (filePath, { scope }) => this.handleGitDiffSelection(filePath, { closeSidebarOnMobile: true, scope }),
+        onStageFile: (filePath, { scope }) => this.stageGitFile(filePath, { scope }),
+        onUnstageFile: (filePath, { scope }) => this.unstageGitFile(filePath, { scope }),
+        onViewAllDiff: () => this.handleGitDiffSelection(null, { closeSidebarOnMobile: true, scope: 'all' }),
+        searchInput: this.elements.gitSearchInput,
+        toastController: this.toastController,
+      }),
+      fallback: {
+        initialize: () => { },
+        refresh: async (options) => {
+          const controller = await proxy.ensure();
+          return controller.refresh(options);
+        },
+        setActive: (active) => {
+          state.active = Boolean(active);
+          if (state.active) {
+            void proxy.ensure().catch((error) => this.reportLazyControllerError('Git panel', error));
+          }
+        },
+        setMode: (mode) => {
+          state.mode = mode;
+          if (state.active) {
+            void proxy.ensure().catch((error) => this.reportLazyControllerError('Git panel', error));
+          }
+        },
+        setSelection: (selection = {}) => {
+          state.selection = selection;
+          if (state.active) {
+            void proxy.ensure().catch((error) => this.reportLazyControllerError('Git panel', error));
+          }
+        },
+        status: null,
+      },
+      loadController: () => this.loadGitPanelController(),
+      onControllerReady: (controller) => {
+        controller.initialize();
+        void controller.setMode(state.mode);
+        controller.setSelection(state.selection);
+        controller.setActive(state.active);
+        if (state.active) {
+          void controller.refresh({ force: true });
+        }
+      },
+    });
+    return proxy;
+  },
+
+  createLazyGitDiffViewController() {
+    const state = {
+      repoStatus: null,
+    };
+    let proxy;
+    proxy = createLazyControllerProxy({
+      createController: (GitDiffViewController) => new GitDiffViewController({
+        gitApiClient: this.gitApiClient,
+        onBackToHistory: ({ historyFilePath } = {}) => {
+          if (historyFilePath) {
+            this.navigation.navigateToGitFileHistory({ filePath: historyFilePath });
+            return;
+          }
+          this.navigation.navigateToGitHistory();
+        },
+        onCommitStaged: () => this.openGitCommitDialog(),
+        onOpenFile: (filePath) => filePath && this.navigation.navigateToFile(filePath),
+        onStageFile: (filePath, { scope }) => this.stageGitFile(filePath, { scope }),
+        onUnstageFile: (filePath, { scope }) => this.unstageGitFile(filePath, { scope }),
+        toastController: this.toastController,
+      }),
+      fallback: {
+        getToolbarTitle: ({ commitHash = null, filePath = null, path = null, scope = 'all', source = 'workspace' } = {}) => {
+          if (source === 'commit') {
+            if (path) return getPathLeaf(path);
+            return commitHash ? `Commit ${String(commitHash).slice(0, 7)}` : 'Commit Diff';
+          }
+          if (filePath) return getPathLeaf(filePath);
+          if (scope === 'staged') return 'Staged Changes';
+          if (scope === 'working-tree') return 'Working Tree Changes';
+          return 'All Changes';
+        },
+        hide: () => { },
+        initialize: () => { },
+        setRepoStatus: (status) => {
+          state.repoStatus = status;
+        },
+      },
+      loadController: () => this.loadGitDiffViewController(),
+      onControllerReady: (controller) => {
+        controller.initialize();
+        controller.setRepoStatus(state.repoStatus);
+      },
+    });
+    return proxy;
+  },
+
+  createLazyFileHistoryViewController() {
+    let proxy;
+    proxy = createLazyControllerProxy({
+      createController: (FileHistoryViewController) => new FileHistoryViewController({
+        diffRenderer: this.gitDiffView,
+        gitApiClient: this.gitApiClient,
+        onOpenCommitDiff: (hash, { historyFilePath, path }) => this.handleGitCommitSelection(hash, {
+          closeSidebarOnMobile: false,
+          historyFilePath,
+          path,
+        }),
+        onOpenFile: (filePath) => filePath && this.navigation.navigateToFile(filePath),
+        onOpenPreview: ({ hash, path, currentFilePath }) => this.handleGitFilePreviewSelection({
+          hash,
+          path,
+          currentFilePath,
+        }),
+        onOpenWorkspaceDiff: (filePath) => this.handleGitDiffSelection(filePath, { closeSidebarOnMobile: false, scope: 'all' }),
+        toastController: this.toastController,
+      }),
+      fallback: {
+        hide: () => { },
+        initialize: () => { },
+      },
+      loadController: () => this.loadFileHistoryViewController(),
+      onControllerReady: (controller) => {
+        controller.initialize();
+      },
+    });
+    return proxy;
+  },
+
+  async ensureGitControllers() {
+    await Promise.all([
+      this.gitPanel.ensure(),
+      this.gitDiffView.ensure(),
+      this.fileHistoryView.ensure(),
+    ]);
+  },
+
+  scheduleGitControllerPrewarm({ timeout = 2500 } = {}) {
+    if (this.runtimeConfig.gitEnabled === false || this._gitControllerPrewarmHandle) {
+      return;
+    }
+
+    const runPrewarm = () => {
+      this._gitControllerPrewarmHandle = null;
+      void this.gitPanel.ensure()
+        .then((controller) => controller.refresh({ force: true }))
+        .catch((error) => this.reportLazyControllerError('Git tools', error));
+    };
+
+    if (typeof window.requestIdleCallback === 'function') {
+      this._gitControllerPrewarmHandle = window.requestIdleCallback(runPrewarm, { timeout });
+      return;
+    }
+
+    this._gitControllerPrewarmHandle = window.setTimeout(runPrewarm, 0);
+  },
+};

package/src/client/infrastructure/vault-api-client.js

@@ -82,6 +82,11 @@ export class VaultApiClient {
     return parseApiResponse(response, 'Failed to load file tree');
   }
 
+  async readCommentOverview() {
+    const response = await fetch(resolveApiUrl('/comments/overview'));
+    return parseApiResponse(response, 'Failed to load comment overview');
+  }
+
   async readFile(path) {
     const response = await fetch(resolveApiUrl(`/file?path=${encodeURIComponent(path)}`));
     return parseApiResponse(response, 'Failed to read file');

package/src/client/presentation/app-shell-template.js

@@ -52,21 +52,33 @@ export function appShellTemplate() {
             </button>
           </div>
         </div>
-        <div class="ui-nav-tabs hidden" id="sidebarTabs">
+        <div class="ui-nav-tabs" id="sidebarTabs">
           <button class="ui-nav-tab active" id="filesSidebarTab" type="button">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
-              <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
-            </svg>
-            Files
+            <span class="ui-nav-tab-icon" aria-hidden="true">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+                <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
+              </svg>
+            </span>
+            <span class="ui-nav-tab-label">Files</span>
+          </button>
+          <button class="ui-nav-tab" id="commentsSidebarTab" type="button">
+            <span class="ui-nav-tab-icon" aria-hidden="true">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+              </svg>
+            </span>
+            <span class="ui-nav-tab-label">Comments</span>
           </button>
           <button class="ui-nav-tab hidden" id="gitSidebarTab" type="button">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-              <circle cx="18" cy="18" r="3"></circle>
-              <circle cx="6" cy="6" r="3"></circle>
-              <path d="M13 6h3a2 2 0 0 1 2 2v7"></path>
-              <path d="M6 9v12"></path>
-            </svg>
-            Git
+            <span class="ui-nav-tab-icon" aria-hidden="true">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="18" cy="18" r="3"></circle>
+                <circle cx="6" cy="6" r="3"></circle>
+                <path d="M13 6h3a2 2 0 0 1 2 2v7"></path>
+                <path d="M6 9v12"></path>
+              </svg>
+            </span>
+            <span class="ui-nav-tab-label">Git</span>
           </button>
         </div>
         <div class="sidebar-search" id="fileSearch">
@@ -92,9 +104,19 @@ export function appShellTemplate() {
           >
         </div>
         <nav id="fileTree" class="file-tree" aria-label="File explorer"></nav>
+        <section id="commentOverviewPanel" class="comment-overview-panel hidden" aria-label="Open comments"></section>
         <div id="gitPanel" class="git-panel hidden" aria-label="Git changes"></div>
       </aside>
 
+      <button
+        type="button"
+        class="sidebar-backdrop"
+        id="sidebarBackdrop"
+        aria-label="Close navigation"
+        aria-hidden="true"
+        hidden
+      ></button>
+
       <main class="main-area" id="mainContent">
         <header class="toolbar" role="banner">
           <div class="toolbar-left">
@@ -107,16 +129,6 @@ export function appShellTemplate() {
             </button>
             <div class="toolbar-room-info">
               <span class="toolbar-room-name" id="activeFileName">CollabMD</span>
-              <button
-                type="button"
-                class=${badgeClassNames({ tone: 'accent', extra: ['toolbar-badge', 'toolbar-badge-button'] })}
-                id="userCount"
-                aria-controls="presencePanel"
-                aria-expanded="false"
-                data-presence-panel-trigger="true"
-              ></button>
-              <span class=${badgeClassNames({ tone: 'accent', hidden: true, extra: 'toolbar-badge' })} id="toolbarDiffBadge">Diff</span>
-              <span class=${badgeClassNames({ tone: 'accent', hidden: true, extra: 'toolbar-badge' })} id="gitOperationStatus" aria-live="polite" aria-atomic="true"></span>
             </div>
           </div>
 
@@ -154,6 +166,19 @@ export function appShellTemplate() {
               <span class="ui-toolbar-button-label">Preview</span>
             </button>
 
+            <div class="toolbar-status-cluster" aria-label="Workspace status">
+              <span class=${badgeClassNames({ tone: 'accent', hidden: true, extra: 'toolbar-badge' })} id="toolbarDiffBadge">Diff</span>
+              <span class=${badgeClassNames({ tone: 'muted', hidden: true, extra: 'toolbar-badge' })} id="gitOperationStatus" aria-live="polite" aria-atomic="true"></span>
+              <button
+                type="button"
+                class=${badgeClassNames({ tone: 'muted', extra: ['toolbar-badge', 'toolbar-badge-button'] })}
+                id="userCount"
+                aria-controls="presencePanel"
+                aria-expanded="false"
+                data-presence-panel-trigger="true"
+              ></button>
+            </div>
+
             <div class="user-avatars toolbar-presence-cluster" id="userAvatars"></div>
 
             <section class="presence-panel hidden" id="presencePanel" aria-label="Online users" aria-hidden="true">
@@ -324,7 +349,7 @@ export function appShellTemplate() {
             <h2 class="empty-state-title">Welcome to CollabMD</h2>
             <p class="empty-state-desc">Open a file from the sidebar, or get started quickly:</p>
             <div class="empty-state-actions">
-              <button class=${buttonClassNames({ variant: 'secondary', extra: 'empty-state-btn' })} id="emptyStateNewFileBtn">
+              <button class=${buttonClassNames({ variant: 'primary', extra: 'empty-state-btn' })} id="emptyStateNewFileBtn">
                 <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
                   <line x1="12" y1="5" x2="12" y2="19"></line>
                   <line x1="5" y1="12" x2="19" y2="12"></line>
@@ -413,7 +438,7 @@ export function appShellTemplate() {
                     </svg>
                     <span class="ui-action-label">Comments</span>
                   </button>
-                  <button class=${buttonClassNames({ variant: 'ghost', size: 'compact', toggle: true })} id="outlineToggle" aria-label="Toggle outline" title="Toggle outline">
+                  <button class=${buttonClassNames({ variant: 'ghost', size: 'compact', toggle: true })} id="outlineToggle" aria-label="Toggle outline" aria-controls="outlinePanel" aria-expanded="false" title="Toggle outline">
                     <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
                       <line x1="3" y1="6" x2="21" y2="6"></line>
                       <line x1="3" y1="12" x2="15" y2="12"></line>
@@ -456,14 +481,21 @@ export function appShellTemplate() {
                   <div class="comments-drawer-header">
                     <span class="comments-drawer-title">Comments</span>
                   </div>
-                  <div id="commentsDrawerEmpty" class="comments-drawer-empty">
-                    Add a comment from the editor or the preview bubbles.
+                  <div id="commentsDrawerEmpty" class="comments-drawer-empty ui-empty-state ui-empty-state--compact">
+                    <p class="ui-empty-state-title">No comments yet</p>
+                    <p class="ui-empty-state-copy">Select text in the editor or use a preview bubble to start a thread.</p>
                   </div>
                   <div id="commentsDrawerList" class="comments-drawer-list"></div>
                 </aside>
-                <aside id="outlinePanel" class="outline-panel hidden" aria-label="Document outline">
+                <aside id="outlinePanel" class="outline-panel hidden" aria-label="Document outline" aria-hidden="true">
                   <div class="outline-header">
                     <span class="outline-title">Outline</span>
+                    <button class=${iconButtonClassNames({ extra: 'outline-close-btn' })} id="outlineClose" type="button" aria-label="Close outline" title="Close outline">
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                        <line x1="18" y1="6" x2="6" y2="18"></line>
+                        <line x1="6" y1="6" x2="18" y2="18"></line>
+                      </svg>
+                    </button>
                   </div>
                   <nav id="outlineNav" class="outline-nav"></nav>
                 </aside>
@@ -632,6 +664,11 @@ export function appShellTemplate() {
         </div>
         <div class="qs-results" id="quickSwitcherResults"></div>
         <div class="qs-hint" id="quickSwitcherHint">Type to search files</div>
+        <div class="qs-footer" aria-hidden="true">
+          <span><kbd>↑</kbd><kbd>↓</kbd> Navigate</span>
+          <span><kbd>↵</kbd> Open</span>
+          <span><kbd>Tab</kbd> Switch mode</span>
+        </div>
       </div>
     </div>
   `;