collabmd 0.1.47 → 0.1.49

package/src/client/application/app-shell/presence-feature.js

@@ -84,12 +84,10 @@ export const presenceFeature = {
     const effectiveConnectionState = getConnectedPresenceState(this);
     const hasUsers = this.globalUsers.length > 0;
     if (effectiveConnectionState.status !== 'connected') {
-      this.presencePanelOpen = false;
+      this.closePresencePanel();
     }
 
     badge.type = 'button';
-    badge.setAttribute('aria-controls', 'presencePanel');
-    badge.setAttribute('aria-expanded', String(this.presencePanelOpen));
     badge.classList.toggle('is-active', this.presencePanelOpen);
 
     if (effectiveConnectionState.status === 'connected') {
@@ -173,12 +171,9 @@ export const presenceFeature = {
       overflow.className = 'user-avatar user-avatar-button user-avatar-overflow-trigger';
       overflow.style.backgroundColor = 'var(--color-surface-dynamic)';
       overflow.style.color = 'var(--color-text-muted)';
-      overflow.setAttribute('aria-controls', 'presencePanel');
-      overflow.setAttribute('aria-expanded', String(this.presencePanelOpen));
+      overflow.setAttribute('popovertarget', 'presencePanel');
       overflow.setAttribute('aria-label', `Show ${visibleUsers.length} online users`);
-      overflow.setAttribute('data-presence-panel-trigger', 'true');
       overflow.title = `Show ${visibleUsers.length} online users`;
-      overflow.addEventListener('click', () => this.openPresencePanel());
       const overflowLabel = document.createElement('span');
       overflowLabel.className = 'user-avatar-initial';
       overflowLabel.textContent = `+${visibleUsers.length - MAX_INLINE_AVATARS}`;
@@ -194,29 +189,19 @@ export const presenceFeature = {
     }
 
     this.presencePanelOpen = true;
-    this.closeChatPanel?.();
-    this.closeToolbarOverflowMenu?.();
+    if (!this.elements.presencePanel?.matches(':popover-open')) {
+      this.elements.presencePanel?.showPopover();
+    }
     this.renderAvatars();
     this.renderPresence();
   },
 
   closePresencePanel() {
-    if (!this.presencePanelOpen) {
-      return;
+    if (this.elements.presencePanel?.matches(':popover-open')) {
+      this.elements.presencePanel.hidePopover();
     }
-
     this.presencePanelOpen = false;
-    this.renderAvatars();
-    this.renderPresence();
-  },
-
-  togglePresencePanel() {
-    if (this.presencePanelOpen) {
-      this.closePresencePanel();
-      return;
-    }
-
-    this.openPresencePanel();
+    this.renderAvatars?.();
   },
 
   renderPresencePanel() {
@@ -225,8 +210,6 @@ export const presenceFeature = {
     const status = this.elements.presencePanelStatus;
     if (!panel || !list) return;
 
-    panel.classList.toggle('hidden', !this.presencePanelOpen);
-    panel.setAttribute('aria-hidden', String(!this.presencePanelOpen));
     if (!this.presencePanelOpen) {
       return;
     }

package/src/client/application/app-shell/ui-feature-identity.js

@@ -44,6 +44,7 @@ function openDisplayNameDialog({ mode = 'edit' } = {}) {
   if (!dialog || !input) return;
 
   const isOnboarding = mode === 'onboarding';
+  this._displayNameDialogMode = mode;
   if (title) {
     title.textContent = isOnboarding ? 'Choose your display name' : 'Update display name';
   }
@@ -88,6 +89,17 @@ function promptForDisplayNameIfNeeded() {
   });
 }
 
+/** @this {UiIdentityContext} */
+function handleDisplayNameCancel() {
+  if (this._displayNameDialogMode === 'onboarding' && !this.getStoredUserName()) {
+    const guestName = this.getCurrentUserName();
+    if (guestName) {
+      this.preferences.setUserName(guestName);
+    }
+  }
+  this.elements.displayNameDialog?.close();
+}
+
 /** @this {UiIdentityContext} */
 function handleDisplayNameSubmit() {
   if (this.isIdentityManagedByAuth()) {
@@ -164,6 +176,7 @@ export const uiFeatureIdentityMethods = {
   getCurrentUser,
   getCurrentUserName,
   getStoredUserName,
+  handleDisplayNameCancel,
   handleDisplayNameSubmit,
   isIdentityManagedByAuth,
   openDisplayNameDialog,

package/src/client/application/app-shell/ui-feature-shell.js

@@ -1,4 +1,4 @@
-import { supportsBacklinksForFilePath } from '../../../domain/file-kind.js';
+import { getVaultFileKind, supportsBacklinksForFilePath } from '../../../domain/file-kind.js';
 import { isPlainQuickSwitcherShortcut } from '../../domain/keyboard-shortcuts.js';
 import { createFileRouteHash, isCollabMdHashRoute } from '../../domain/hash-routes.js';
 
@@ -189,6 +189,13 @@ function bindToolbarEvents() {
     this.closeToolbarOverflowMenu?.();
   });
 
+  this.elements.reviewFileChangesButton?.addEventListener('click', () => {
+    this.handleGitDiffSelection(this.currentFilePath, {
+      closeSidebarOnMobile: true,
+      scope: 'all',
+    });
+  });
+
   this.elements.fileHistoryButton?.addEventListener('click', () => {
     const route = this.navigation.getHashRoute();
     if (route.type === 'git-file-preview') {
@@ -210,7 +217,7 @@ function bindToolbarEvents() {
 /** @this {UiShellContext} */
 function bindDialogEvents() {
   this.elements.displayNameCancel?.addEventListener('click', () => {
-    this.elements.displayNameDialog?.close();
+    this.handleDisplayNameCancel();
   });
 
   this.elements.gitCommitCancel?.addEventListener('click', () => {
@@ -230,7 +237,7 @@ function bindDialogEvents() {
       this.elements.gitCommitInput.value = '';
     }
     if (this.elements.gitCommitSubmit) {
-      this.elements.gitCommitSubmit.textContent = 'Commit staged changes';
+      this.elements.gitCommitSubmit.textContent = 'Commit included files';
     }
   });
 
@@ -240,7 +247,7 @@ function bindDialogEvents() {
       this.elements.gitResetFileName.value = '';
     }
     if (this.elements.gitResetSubmit) {
-      this.elements.gitResetSubmit.textContent = 'Reset File';
+      this.elements.gitResetSubmit.textContent = 'Reset file';
     }
   });
 
@@ -255,6 +262,19 @@ function bindDialogEvents() {
   });
 }
 
+/** @this {UiShellContext} */
+function focusEditor(event) {
+  event?.preventDefault?.();
+  const container = this.elements.editorContainer;
+  if (!container) return;
+
+  const target = container.querySelector('.cm-content, iframe, [contenteditable="true"]') ?? container;
+  if (target === container && !container.hasAttribute('tabindex')) {
+    container.setAttribute('tabindex', '-1');
+  }
+  target.focus();
+}
+
 /** @this {UiShellContext} */
 function bindEvents() {
   const stopFollowing = () => this.stopFollowingUser?.();
@@ -263,6 +283,7 @@ function bindEvents() {
   this.elements.editorContainer?.addEventListener('wheel', stopFollowing, { passive: true });
   this.elements.previewContainer?.addEventListener('pointerdown', stopFollowing);
   this.elements.previewContainer?.addEventListener('wheel', stopFollowing, { passive: true });
+  this.elements.skipToEditor?.addEventListener('click', (event) => this.focusEditor(event));
 
   this.elements.emptyStateNewFileBtn?.addEventListener('click', () => {
     this.fileExplorer.actionController.openRootCreateMenu({
@@ -273,13 +294,24 @@ function bindEvents() {
   this.elements.emptyStateSearchBtn?.addEventListener('click', () => {
     void this.toggleQuickSwitcher();
   });
+  this.elements.presencePanel?.addEventListener('toggle', (event) => {
+    this.presencePanelOpen = event.newState === 'open';
+    this.renderAvatars?.();
+    this.renderPresence?.();
+  });
 
-  this.elements.chatToggleButton?.addEventListener('click', () => {
-    this.closePresencePanel?.();
-    this.toggleChatPanel();
-    this.closeToolbarOverflowMenu?.();
+  this.elements.chatPanel?.addEventListener('toggle', (event) => {
+    this.chatIsOpen = event.newState === 'open';
+    if (this.chatIsOpen) {
+      this.chatUnreadCount = 0;
+    }
+    this.renderChat?.({ messagesChanged: this.chatIsOpen, stickToBottom: this.chatIsOpen });
+    if (this.chatIsOpen) {
+      requestAnimationFrame(() => this.elements.chatInput?.focus());
+    }
   });
 
+
   this.elements.chatNotificationButton?.addEventListener('click', () => {
     void this.handleChatNotificationToggle();
   });
@@ -288,9 +320,6 @@ function bindEvents() {
     this.toggleChatNotificationMute();
   });
 
-  this.elements.chatCloseButton?.addEventListener('click', () => {
-    this.closeChatPanel({ restoreFocus: true });
-  });
 
   this.elements.chatForm?.addEventListener('submit', (event) => {
     event.preventDefault();
@@ -320,21 +349,16 @@ function bindEvents() {
     this.toggleVimMode();
   });
 
-  this.elements.userCount?.addEventListener('click', (event) => {
-    event.preventDefault();
-    this.togglePresencePanel?.();
-  });
 
   this.elements.editorFindButton?.addEventListener('click', () => {
     this.runEditorCommand?.('openSearch');
   });
 
-  this.elements.toolbarOverflowToggle?.addEventListener('click', (event) => {
-    event.preventDefault();
-    this.closePresencePanel?.();
-    this.toggleToolbarOverflowMenu();
+  this.elements.editorFormatButton?.addEventListener('click', () => {
+    void this.formatCurrentDocument();
   });
 
+
   this.elements.toolbarOverflowMenu?.addEventListener('click', (event) => {
     const button = event.target instanceof Element ? event.target.closest('button') : null;
     if (button && button !== this.elements.toggleVimModeButton) {
@@ -342,6 +366,14 @@ function bindEvents() {
     }
   });
 
+  this.elements.toolbarOverflowMenu?.addEventListener('toggle', (event) => {
+    if (event.newState === 'closed') {
+      this.elements.toolbarOverflowMenu.querySelectorAll('details[open]').forEach((detail) => {
+        detail.removeAttribute('open');
+      });
+    }
+  });
+
   this.elements.previewContent?.addEventListener('click', (event) => {
     this.handlePreviewContentClick?.(event);
   });
@@ -374,47 +406,16 @@ function bindEvents() {
     this.setSidebarTab('comments');
   });
 
-  document.addEventListener('pointerdown', (event) => {
-    this.handleDocumentPointerDown(event);
+  this.elements.sidebarTabs?.addEventListener('keydown', (event) => {
+    this.handleSidebarTabsKeydown(event);
   });
 
+
   document.addEventListener('keydown', (event) => {
     this.handleDocumentKeydown(event);
   }, { capture: true });
 }
 
-/** @this {UiShellContext} */
-function handleDocumentPointerDown(event) {
-  this.handleMarkdownToolbarDocumentPointerDown?.(event);
-
-  const target = event.target instanceof Element ? event.target : null;
-
-  if (
-    this.toolbarOverflowOpen
-    && !this.elements.toolbarOverflowMenu?.contains(target)
-    && !this.elements.toolbarOverflowToggle?.contains(target)
-  ) {
-    this.closeToolbarOverflowMenu();
-  }
-
-  if (
-    this.presencePanelOpen
-    && !this.elements.presencePanel?.contains(target)
-    && !target?.closest?.('[data-presence-panel-trigger="true"]')
-  ) {
-    this.closePresencePanel?.();
-  }
-
-  if (!this.chatIsOpen) {
-    return;
-  }
-
-  if (this.elements.chatContainer?.contains(target)) {
-    return;
-  }
-
-  this.closeChatPanel({ restoreFocus: false });
-}
 
 /** @this {UiShellContext} */
 function handleDocumentKeydown(event) {
@@ -422,20 +423,6 @@ function handleDocumentKeydown(event) {
     this.stopFollowingUser?.();
   }
 
-  if (event.key === 'Escape' && this.toolbarOverflowOpen) {
-    this.closeToolbarOverflowMenu();
-    return;
-  }
-
-  if (event.key === 'Escape' && this.presencePanelOpen) {
-    this.closePresencePanel?.();
-    return;
-  }
-
-  if (event.key === 'Escape' && this.chatIsOpen) {
-    this.closeChatPanel({ restoreFocus: true });
-    return;
-  }
 
   if (isPlainQuickSwitcherShortcut(event)) {
     event.preventDefault();
@@ -508,7 +495,7 @@ function getHeadingLinkLabel(heading) {
     return heading.textContent.trim();
   }
 
-  headingClone.querySelectorAll('.preview-heading-link-button').forEach((button) => button.remove());
+  headingClone.querySelectorAll('.preview-heading-fold-button, .preview-heading-link-button').forEach((button) => button.remove());
   return headingClone.textContent.replace(/\s+/g, ' ').trim();
 }
 
@@ -549,6 +536,7 @@ function createPreviewHeadingLinkUrl(anchorId) {
     return '';
   }
 
+  // pi-lens-ignore: unchecked-throwing-call-js
   const url = new URL(window.location.href);
   url.hash = createFileRouteHash(this.currentFilePath, {
     anchor: anchorId,
@@ -594,6 +582,7 @@ function syncPreviewCodeCopyButtons() {
     const pre = code.parentElement;
     const wrapper = document.createElement('div');
     wrapper.className = 'preview-code-block';
+    // pi-lens-ignore: no-inner-html-js
     wrapper.innerHTML = `
       <div class="preview-code-actions">
         <button type="button" class="ui-button ui-button--secondary ui-button--compact preview-code-copy-button" aria-label="Copy code" title="Copy code">
@@ -605,6 +594,90 @@ function syncPreviewCodeCopyButtons() {
   });
 }
 
+function applyPreviewHeadingFolds(previewContent) {
+  const parents = new Set(Array.from(previewContent?.querySelectorAll?.('.preview-heading-fold-button') ?? [])
+    .map((button) => button.closest('h1, h2, h3, h4, h5, h6')?.parentElement)
+    .filter(Boolean));
+
+  parents.forEach((parent) => {
+    const collapsedLevels = [];
+    Array.from(parent.children).forEach((child) => {
+      const level = /^H([1-6])$/.exec(child.tagName)?.[1];
+      if (level) {
+        const headingLevel = Number(level);
+        while (collapsedLevels.at(-1) >= headingLevel) {
+          collapsedLevels.pop();
+        }
+        child.hidden = collapsedLevels.length > 0;
+        if (child.dataset.previewHeadingCollapsed === 'true') {
+          collapsedLevels.push(headingLevel);
+        }
+      } else {
+        child.hidden = collapsedLevels.length > 0;
+      }
+    });
+  });
+}
+
+/** @this {UiShellContext} */
+function unfoldPreviewHeading(target) {
+  if (!(target instanceof HTMLElement) || !/^H[1-6]$/.test(target.tagName)) {
+    return false;
+  }
+
+  const collapsedHeadings = [];
+  let ancestorLevel = Number(target.tagName[1]) + 1;
+  for (let heading = target; heading; heading = heading.previousElementSibling) {
+    const level = Number(/^H([1-6])$/.exec(heading.tagName)?.[1]);
+    if (!level || level >= ancestorLevel) {
+      continue;
+    }
+
+    ancestorLevel = level;
+    if (heading.dataset.previewHeadingCollapsed === 'true') {
+      collapsedHeadings.push(heading);
+    }
+  }
+
+  if (collapsedHeadings.length === 0) {
+    return false;
+  }
+
+  collapsedHeadings.forEach((heading) => delete heading.dataset.previewHeadingCollapsed);
+  this.syncPreviewHeadingFoldButtons();
+  this.scrollSyncController?.invalidatePreviewBlocks?.();
+  this.schedulePreviewLayoutSync?.({ delayMs: 0 });
+  this.refreshCommentUiLayout?.();
+  return true;
+}
+
+/** @this {UiShellContext} */
+function syncPreviewHeadingFoldButtons() {
+  const headings = this.elements.previewContent?.querySelectorAll?.('h1, h2, h3, h4, h5, h6') ?? [];
+
+  Array.from(headings).forEach((heading) => {
+    if (!(heading instanceof HTMLElement)) {
+      return;
+    }
+
+    const headingLabel = getHeadingLinkLabel(heading);
+    let button = heading.querySelector(':scope > .preview-heading-fold-button');
+    if (!(button instanceof HTMLButtonElement)) {
+      button = document.createElement('button');
+      button.type = 'button';
+      button.className = 'ui-icon-button preview-heading-fold-button';
+      heading.prepend(button);
+    }
+
+    const collapsed = heading.dataset.previewHeadingCollapsed === 'true';
+    button.setAttribute('aria-expanded', String(!collapsed));
+    button.setAttribute('aria-label', `${collapsed ? 'Expand' : 'Collapse'} ${headingLabel}`);
+    button.setAttribute('title', `${collapsed ? 'Expand' : 'Collapse'} section`);
+  });
+
+  applyPreviewHeadingFolds(this.elements.previewContent);
+}
+
 /** @this {UiShellContext} */
 function syncPreviewHeadingLinkButtons() {
   const headings = this.elements.previewContent?.querySelectorAll?.('h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]') ?? [];
@@ -620,6 +693,7 @@ function syncPreviewHeadingLinkButtons() {
       button = document.createElement('button');
       button.type = 'button';
       button.className = 'ui-icon-button preview-heading-link-button';
+      // pi-lens-ignore: no-inner-html-js
       button.innerHTML = PREVIEW_HEADING_LINK_ICON;
       heading.appendChild(button);
     }
@@ -693,6 +767,18 @@ function handlePreviewContentClick(event) {
     return;
   }
 
+  const foldButton = event.target.closest('button.preview-heading-fold-button');
+  const heading = foldButton?.closest('h1, h2, h3, h4, h5, h6');
+  if (foldButton instanceof HTMLButtonElement && heading instanceof HTMLElement) {
+    event.preventDefault();
+    heading.dataset.previewHeadingCollapsed = String(heading.dataset.previewHeadingCollapsed !== 'true');
+    this.syncPreviewHeadingFoldButtons();
+    this.scrollSyncController?.invalidatePreviewBlocks?.();
+    this.schedulePreviewLayoutSync?.({ delayMs: 0 });
+    this.refreshCommentUiLayout?.();
+    return;
+  }
+
   const codeCopyButton = event.target.closest('button.preview-code-copy-button');
   if (codeCopyButton instanceof HTMLButtonElement) {
     event.preventDefault();
@@ -759,20 +845,6 @@ function handlePreviewContentClick(event) {
   this.session?.toggleTaskListItem?.(sourceLine);
 }
 
-/** @this {UiShellContext} */
-function setToolbarOverflowOpen(nextState) {
-  this.toolbarOverflowOpen = Boolean(nextState);
-  this.elements.toolbarOverflowToggle?.setAttribute('aria-expanded', String(this.toolbarOverflowOpen));
-  this.elements.toolbarOverflowToggle?.classList.toggle('active', this.toolbarOverflowOpen);
-  this.elements.toolbarOverflowToggle?.closest('.toolbar-right')?.classList.toggle('is-overflow-open', this.toolbarOverflowOpen);
-
-  if (!this.toolbarOverflowOpen) {
-    this.elements.toolbarOverflowMenu?.querySelectorAll('details[open]').forEach((detail) => {
-      detail.removeAttribute('open');
-    });
-  }
-}
-
 /** @this {UiShellContext} */
 function syncToolbarOverflowVisibility() {
   const toggle = this.elements.toolbarOverflowToggle;
@@ -787,12 +859,9 @@ function syncToolbarOverflowVisibility() {
 
 /** @this {UiShellContext} */
 function closeToolbarOverflowMenu() {
-  this.setToolbarOverflowOpen(false);
-}
-
-/** @this {UiShellContext} */
-function toggleToolbarOverflowMenu() {
-  this.setToolbarOverflowOpen(!this.toolbarOverflowOpen);
+  if (this.elements.toolbarOverflowMenu?.matches(':popover-open')) {
+    this.elements.toolbarOverflowMenu.hidePopover();
+  }
 }
 
 /** @this {UiShellContext} */
@@ -846,6 +915,29 @@ function getStoredLineWrapping() {
   return this.preferences.getLineWrappingEnabled();
 }
 
+/** @this {UiShellContext} */
+async function formatCurrentDocument() {
+  const button = this.elements.editorFormatButton;
+  button?.setAttribute('disabled', '');
+
+  try {
+    const result = await this.session?.formatDocument?.(this.currentFilePath);
+    const messages = {
+      changed: 'Document changed while formatting. Try again.',
+      formatted: getVaultFileKind(this.currentFilePath) === 'plantuml'
+        ? 'PlantUML indentation applied'
+        : 'Document formatted',
+      unchanged: 'Document is already formatted',
+      unsupported: 'Formatting is unavailable for this file type',
+    };
+    this.toastController.show(messages[result] ?? messages.unsupported);
+  } catch (error) {
+    this.toastController.show(`Formatting failed: ${error?.message || 'Unknown error'}`, 5000);
+  } finally {
+    button?.removeAttribute('disabled');
+  }
+}
+
 /** @this {UiShellContext} */
 function toggleVimMode() {
   const currentState = this.session?.isVimModeEnabled?.() ?? this.getStoredVimMode();
@@ -902,9 +994,12 @@ function showEditorLoading() {
   if (!this.elements.editorContainer) return;
   this.elements.editorContainer.classList.add('is-loading-editor');
   this.elements.editorContainer.innerHTML = `
-      <div class="editor-loading" id="editorLoading">
-        <div class="loading-spinner"></div>
-        <span class="loading-text">Loading file...</span>
+      <div class="editor-loading" id="editorLoading" role="status" aria-live="polite" aria-label="Loading file…">
+        <div class="skeleton-line skeleton-line--title skeleton-line--break"></div>
+        <div class="skeleton-line skeleton-line--full"></div>
+        <div class="skeleton-line skeleton-line--ninety"></div>
+        <div class="skeleton-line skeleton-line--ninety-five"></div>
+        <div class="skeleton-line skeleton-line--eighty"></div>
       </div>`;
 }
 
@@ -916,13 +1011,17 @@ function hideEditorLoading() {
 }
 
 /** @this {UiShellContext} */
-function showEditorLoadError() {
+function showEditorLoadError(message = 'Failed to load file') {
   if (!this.elements.editorContainer) return;
+  const loading = document.createElement('div');
+  const text = document.createElement('span');
+  loading.className = 'editor-loading';
+  loading.id = 'editorLoading';
+  text.className = 'loading-text';
+  text.textContent = message;
+  loading.appendChild(text);
   this.elements.editorContainer.classList.remove('is-loading-editor');
-  this.elements.editorContainer.innerHTML = `
-      <div class="editor-loading" id="editorLoading">
-        <span class="loading-text">Failed to load file</span>
-      </div>`;
+  this.elements.editorContainer.replaceChildren(loading);
 }
 
 /** @this {UiShellContext} */
@@ -938,11 +1037,12 @@ export const uiFeatureShellMethods = {
   copyPreviewCodeBlock,
   copyPreviewHeadingLink,
   createPreviewHeadingLinkUrl,
+  focusEditor,
+  formatCurrentDocument,
   getStoredLineWrapping,
   getStoredVimMode,
   handleConnectionChange,
   handleDocumentKeydown,
-  handleDocumentPointerDown,
   handlePreviewContentClick,
   handleThemeChange,
   hideEditorLoading,
@@ -954,16 +1054,16 @@ export const uiFeatureShellMethods = {
   promptForVersionReload,
   requestPreviewRouteAnchor,
   scheduleBacklinkRefresh,
-  setToolbarOverflowOpen,
   showEditorLoadError,
   showEditorLoading,
   syncPreviewCodeCopyButtons,
+  syncPreviewHeadingFoldButtons,
   syncPreviewHeadingLinkButtons,
   syncVisualViewportBounds,
   syncToolbarOverflowVisibility,
   syncVimModeToggle,
   syncWrapToggle,
-  toggleToolbarOverflowMenu,
   toggleLineWrapping,
+  unfoldPreviewHeading,
   toggleVimMode,
 };

package/src/client/application/app-shell/ui-feature-sidebar.js

@@ -153,6 +153,26 @@ function applySidebarVisibility(showSidebar) {
   }
 }
 
+/** @this {UiSidebarContext} */
+function handleSidebarTabsKeydown(event) {
+  if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return;
+
+  const tabs = [
+    this.elements.filesSidebarTab,
+    this.elements.commentsSidebarTab,
+    this.elements.gitSidebarTab,
+  ].filter((tab) => tab && !tab.classList.contains('hidden'));
+  const currentIndex = Math.max(0, tabs.indexOf(event.target));
+  const nextIndex = event.key === 'Home'
+    ? 0
+    : event.key === 'End'
+      ? tabs.length - 1
+      : (currentIndex + (event.key === 'ArrowRight' ? 1 : -1) + tabs.length) % tabs.length;
+  event.preventDefault();
+  tabs[nextIndex]?.click();
+  tabs[nextIndex]?.focus();
+}
+
 /** @this {UiSidebarContext} */
 function setSidebarTab(tab) {
   const nextTab = tab === 'git' && this.gitRepoAvailable
@@ -162,15 +182,30 @@ function setSidebarTab(tab) {
       : 'files';
   this.activeSidebarTab = nextTab;
 
-  this.elements.filesSidebarTab?.classList.toggle('active', nextTab === 'files');
-  this.elements.commentsSidebarTab?.classList.toggle('active', nextTab === 'comments');
-  this.elements.gitSidebarTab?.classList.toggle('active', nextTab === 'git');
-  document.getElementById('fileTree')?.classList.toggle('hidden', nextTab !== 'files');
+  [
+    [this.elements.filesSidebarTab, 'files'],
+    [this.elements.commentsSidebarTab, 'comments'],
+    [this.elements.gitSidebarTab, 'git'],
+  ].forEach(([button, buttonTab]) => {
+    const selected = nextTab === buttonTab;
+    button?.classList.toggle('active', selected);
+    button?.setAttribute('aria-selected', String(selected));
+    button?.setAttribute('tabindex', selected ? '0' : '-1');
+  });
+  const filePanel = document.getElementById('fileTree');
+  const commentPanel = this.elements.commentOverviewPanel;
+  const gitPanelElement = document.getElementById('gitPanel');
+  [
+    [filePanel, nextTab === 'files'],
+    [commentPanel, nextTab === 'comments'],
+    [gitPanelElement, nextTab === 'git'],
+  ].forEach(([panel, selected]) => {
+    panel?.classList.toggle('hidden', !selected);
+    panel?.setAttribute('aria-hidden', String(!selected));
+  });
   this.elements.fileSearch?.classList.toggle('hidden', nextTab !== 'files');
-  this.elements.commentOverviewPanel?.classList.toggle('hidden', nextTab !== 'comments');
   this.elements.gitSearch?.classList.toggle('hidden', nextTab !== 'git');
-  document.getElementById('gitPanel')?.classList.toggle('active', nextTab === 'git');
-  document.getElementById('gitPanel')?.classList.toggle('hidden', nextTab !== 'git');
+  gitPanelElement?.classList.toggle('active', nextTab === 'git');
   this.gitPanel.setActive(nextTab === 'git');
   if (nextTab === 'comments') {
     this.refreshCommentOverviewForSidebarOpen?.();
@@ -180,6 +215,7 @@ function setSidebarTab(tab) {
 export const uiFeatureSidebarMethods = {
   applySidebarVisibility,
   closeSidebarOnMobile,
+  handleSidebarTabsKeydown,
   initializeSidebarResizer,
   isMobileViewport,
   restoreSidebarState,