From 0a0680065a0d5589b9b6ceacaf8c72e8968b988f Mon Sep 17 00:00:00 2001
From: Junyi Hou <hji200914@gmail.com>
Date: Thu, 19 Feb 2026 01:44:53 +0800
Subject: [PATCH] refactor: enhance accessibility and code consistency across
 components

- Improved accessibility by standardizing `onKeyDown` event handlers to use consistent formatting for key checks across multiple components.
- Refactored layout of JSX elements for better readability in `chat.pb.go`, `embed-sidebar`, and various components in the message entry container.
- General code cleanup to enhance maintainability and readability.
---
 pkg/gen/api/chat/v2/chat.pb.go                |  7 ++++---
 .../message-entry-container/assistant.tsx     | 12 +++++++++++-
 .../message-entry-container/tools/general.tsx | 12 +++++++++++-
 .../paper-score-comment/filter-controls.tsx   |  6 +++++-
 .../tools/xtramcp/generate-citations.tsx      | 12 ++++++++++--
 .../tools/xtramcp/online-search-papers.tsx    | 12 ++++++++++--
 .../tools/xtramcp/review-paper.tsx            | 12 ++++++++++--
 .../tools/xtramcp/search-relevant-papers.tsx  | 12 ++++++++++--
 .../tools/xtramcp/verify-citations.tsx        | 12 ++++++++++--
 .../tools/xtramcp/xtramcp-generic-card.tsx    | 18 +++++++++++++++---
 .../src/components/onboarding-guide.tsx       | 12 ++++++++++--
 webapp/_webapp/src/components/tabs.tsx        |  8 +++++++-
 webapp/_webapp/src/libs/inline-suggestion.ts  | 19 +++++++++++--------
 webapp/_webapp/src/views/chat/body/index.tsx  |  2 +-
 .../views/chat/footer/toolbar/selection.tsx   | 10 ++++++++--
 .../src/views/chat/header/chat-button.tsx     |  2 +-
 webapp/_webapp/src/views/devtools/index.tsx   |  4 +++-
 webapp/_webapp/src/views/embed-sidebar.tsx    |  8 +++++++-
 webapp/_webapp/src/views/login/index.tsx      |  6 +++++-
 .../src/views/login/login-with-overleaf.tsx   |  6 +++++-
 webapp/_webapp/src/views/office/app.tsx       |  2 ++
 .../src/views/settings/sections/footer.tsx    |  2 +-
 22 files changed, 157 insertions(+), 39 deletions(-)

diff --git a/pkg/gen/api/chat/v2/chat.pb.go b/pkg/gen/api/chat/v2/chat.pb.go
index 485bfd0f..0d312c55 100644
--- a/pkg/gen/api/chat/v2/chat.pb.go
+++ b/pkg/gen/api/chat/v2/chat.pb.go
@@ -7,12 +7,13 @@
 package chatv2
 
 import (
-	_ "google.golang.org/genproto/googleapis/api/annotations"
-	protoreflect "google.golang.org/protobuf/reflect/protoreflect"
-	protoimpl "google.golang.org/protobuf/runtime/protoimpl"
 	reflect "reflect"
 	sync "sync"
 	unsafe "unsafe"
+
+	_ "google.golang.org/genproto/googleapis/api/annotations"
+	protoreflect "google.golang.org/protobuf/reflect/protoreflect"
+	protoimpl "google.golang.org/protobuf/runtime/protoimpl"
 )
 
 const (
diff --git a/webapp/_webapp/src/components/message-entry-container/assistant.tsx b/webapp/_webapp/src/components/message-entry-container/assistant.tsx
index ca692d44..92f30492 100644
--- a/webapp/_webapp/src/components/message-entry-container/assistant.tsx
+++ b/webapp/_webapp/src/components/message-entry-container/assistant.tsx
@@ -147,7 +147,17 @@ export const AssistantMessageContainer = ({
           {((parsedMessage.regularContent?.length || 0) > 0 || parsedMessage.paperDebuggerContent.length > 0) && (
             <div className="actions rnd-cancel noselect">
               <Tooltip content="Copy" placement="bottom" size="sm" delay={1000}>
-                <span onClick={handleCopy} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { handleCopy(); } }} tabIndex={0} role="button" aria-label="Copy message">
+                <span
+                  onClick={handleCopy}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      handleCopy();
+                    }
+                  }}
+                  tabIndex={0}
+                  role="button"
+                  aria-label="Copy message"
+                >
                   <Icon icon={copySuccess ? "tabler:copy-check" : "tabler:copy"} className="icon" />
                 </span>
               </Tooltip>
diff --git a/webapp/_webapp/src/components/message-entry-container/tools/general.tsx b/webapp/_webapp/src/components/message-entry-container/tools/general.tsx
index c381ff03..db3aa39b 100644
--- a/webapp/_webapp/src/components/message-entry-container/tools/general.tsx
+++ b/webapp/_webapp/src/components/message-entry-container/tools/general.tsx
@@ -95,7 +95,17 @@ export const GeneralToolCard = ({
   // When there is a message, show the compact card with collapsible content
   return (
     <div className={cn("tool-card noselect compact", { animated: animated })}>
-      <div className="flex items-center gap-1 cursor-pointer" role="button" tabIndex={0} onClick={toggleCollapse} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { toggleCollapse(); } }}>
+      <div
+        className="flex items-center gap-1 cursor-pointer"
+        role="button"
+        tabIndex={0}
+        onClick={toggleCollapse}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            toggleCollapse();
+          }
+        }}
+      >
         <button
           className="text-gray-400 hover:text-gray-600 transition-colors duration-200 rounded flex"
           aria-label={isCollapsed ? "Expand" : "Collapse"}
diff --git a/webapp/_webapp/src/components/message-entry-container/tools/paper-score-comment/filter-controls.tsx b/webapp/_webapp/src/components/message-entry-container/tools/paper-score-comment/filter-controls.tsx
index 36104dfd..42d07040 100644
--- a/webapp/_webapp/src/components/message-entry-container/tools/paper-score-comment/filter-controls.tsx
+++ b/webapp/_webapp/src/components/message-entry-container/tools/paper-score-comment/filter-controls.tsx
@@ -41,7 +41,11 @@ export const FilterControls = ({
         role="button"
         tabIndex={0}
         onClick={() => setIsSuggestionsExpanded(!isSuggestionsExpanded)}
-        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setIsSuggestionsExpanded(!isSuggestionsExpanded); } }}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            setIsSuggestionsExpanded(!isSuggestionsExpanded);
+          }
+        }}
       >
         <button className="!flex !items-center !gap-2 !text-sm !font-semibold !text-gray-800 hover:!text-gray-600 !transition-colors truncate">
           <Icon
diff --git a/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/generate-citations.tsx b/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/generate-citations.tsx
index 90a24f6a..8be32933 100644
--- a/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/generate-citations.tsx
+++ b/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/generate-citations.tsx
@@ -43,7 +43,11 @@ export const GenerateCitationsCard = ({ functionName, message, preparing, animat
           role="button"
           tabIndex={0}
           onClick={() => setIsMetadataCollapsed(!isMetadataCollapsed)}
-          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setIsMetadataCollapsed(!isMetadataCollapsed); } }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              setIsMetadataCollapsed(!isMetadataCollapsed);
+            }
+          }}
         >
           <h3 className="tool-card-title">{functionName}</h3>
           <div className="flex items-center gap-2">
@@ -74,7 +78,11 @@ export const GenerateCitationsCard = ({ functionName, message, preparing, animat
             role="button"
             tabIndex={0}
             onClick={() => setIsMetadataCollapsed(!isMetadataCollapsed)}
-            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setIsMetadataCollapsed(!isMetadataCollapsed); } }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                setIsMetadataCollapsed(!isMetadataCollapsed);
+              }
+            }}
           >
             <button
               className="text-gray-400 hover:text-gray-600 transition-colors duration-200 rounded flex"
diff --git a/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/online-search-papers.tsx b/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/online-search-papers.tsx
index b493596e..1bb5844e 100644
--- a/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/online-search-papers.tsx
+++ b/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/online-search-papers.tsx
@@ -43,7 +43,11 @@ export const OnlineSearchPapersCard = ({ functionName, message, preparing, anima
           role="button"
           tabIndex={0}
           onClick={() => setIsMetadataCollapsed(!isMetadataCollapsed)}
-          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setIsMetadataCollapsed(!isMetadataCollapsed); } }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              setIsMetadataCollapsed(!isMetadataCollapsed);
+            }
+          }}
         >
           <h3 className="tool-card-title">{functionName}</h3>
           <div className="flex items-center gap-2">
@@ -78,7 +82,11 @@ export const OnlineSearchPapersCard = ({ functionName, message, preparing, anima
             role="button"
             tabIndex={0}
             onClick={() => setIsMetadataCollapsed(!isMetadataCollapsed)}
-            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setIsMetadataCollapsed(!isMetadataCollapsed); } }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                setIsMetadataCollapsed(!isMetadataCollapsed);
+              }
+            }}
           >
             <h3 className="tool-card-title">{functionName}</h3>
             <CollapseArrowButton
diff --git a/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/review-paper.tsx b/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/review-paper.tsx
index 14aec0ef..b28cf1c6 100644
--- a/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/review-paper.tsx
+++ b/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/review-paper.tsx
@@ -84,7 +84,11 @@ export const ReviewPaperCard = ({ functionName, message, preparing, animated }:
           role="button"
           tabIndex={0}
           onClick={() => setIsMetadataCollapsed(!isMetadataCollapsed)}
-          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setIsMetadataCollapsed(!isMetadataCollapsed); } }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              setIsMetadataCollapsed(!isMetadataCollapsed);
+            }
+          }}
         >
           <h3 className="tool-card-title">{functionName}</h3>
           <div className="flex items-center gap-2">
@@ -119,7 +123,11 @@ export const ReviewPaperCard = ({ functionName, message, preparing, animated }:
             role="button"
             tabIndex={0}
             onClick={() => setIsMetadataCollapsed(!isMetadataCollapsed)}
-            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setIsMetadataCollapsed(!isMetadataCollapsed); } }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                setIsMetadataCollapsed(!isMetadataCollapsed);
+              }
+            }}
           >
             <h3 className="tool-card-title">{functionName}</h3>
             <CollapseArrowButton
diff --git a/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/search-relevant-papers.tsx b/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/search-relevant-papers.tsx
index c73ce21d..50837243 100644
--- a/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/search-relevant-papers.tsx
+++ b/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/search-relevant-papers.tsx
@@ -51,7 +51,11 @@ export const SearchRelevantPapersCard = ({ functionName, message, preparing, ani
           role="button"
           tabIndex={0}
           onClick={() => setIsMetadataCollapsed(!isMetadataCollapsed)}
-          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setIsMetadataCollapsed(!isMetadataCollapsed); } }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              setIsMetadataCollapsed(!isMetadataCollapsed);
+            }
+          }}
         >
           <h3 className="tool-card-title">{functionName}</h3>
           <div className="flex items-center gap-2">
@@ -86,7 +90,11 @@ export const SearchRelevantPapersCard = ({ functionName, message, preparing, ani
             role="button"
             tabIndex={0}
             onClick={() => setIsMetadataCollapsed(!isMetadataCollapsed)}
-            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setIsMetadataCollapsed(!isMetadataCollapsed); } }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                setIsMetadataCollapsed(!isMetadataCollapsed);
+              }
+            }}
           >
             <h3 className="tool-card-title">{functionName}</h3>
             <CollapseArrowButton
diff --git a/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/verify-citations.tsx b/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/verify-citations.tsx
index 245daefd..8e8d4a47 100644
--- a/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/verify-citations.tsx
+++ b/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/verify-citations.tsx
@@ -43,7 +43,11 @@ export const VerifyCitationsCard = ({ functionName, message, preparing, animated
           role="button"
           tabIndex={0}
           onClick={() => setIsMetadataCollapsed(!isMetadataCollapsed)}
-          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setIsMetadataCollapsed(!isMetadataCollapsed); } }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              setIsMetadataCollapsed(!isMetadataCollapsed);
+            }
+          }}
         >
           <h3 className="tool-card-title">{functionName}</h3>
           <div className="flex items-center gap-2">
@@ -78,7 +82,11 @@ export const VerifyCitationsCard = ({ functionName, message, preparing, animated
             role="button"
             tabIndex={0}
             onClick={() => setIsMetadataCollapsed(!isMetadataCollapsed)}
-            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setIsMetadataCollapsed(!isMetadataCollapsed); } }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                setIsMetadataCollapsed(!isMetadataCollapsed);
+              }
+            }}
           >
             <h3 className="tool-card-title">{functionName}</h3>
             <CollapseArrowButton
diff --git a/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/xtramcp-generic-card.tsx b/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/xtramcp-generic-card.tsx
index d2d54216..ab0ec785 100644
--- a/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/xtramcp-generic-card.tsx
+++ b/webapp/_webapp/src/components/message-entry-container/tools/xtramcp/xtramcp-generic-card.tsx
@@ -43,7 +43,11 @@ export const XtraMcpGenericCard = ({ functionName, message, preparing, animated
           role="button"
           tabIndex={0}
           onClick={() => setIsMetadataCollapsed(!isMetadataCollapsed)}
-          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setIsMetadataCollapsed(!isMetadataCollapsed); } }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              setIsMetadataCollapsed(!isMetadataCollapsed);
+            }
+          }}
         >
           <h3 className="tool-card-title">{functionName}</h3>
           <div className="flex items-center gap-2">
@@ -77,7 +81,11 @@ export const XtraMcpGenericCard = ({ functionName, message, preparing, animated
             role="button"
             tabIndex={0}
             onClick={() => setIsMetadataCollapsed(!isMetadataCollapsed)}
-            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setIsMetadataCollapsed(!isMetadataCollapsed); } }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                setIsMetadataCollapsed(!isMetadataCollapsed);
+              }
+            }}
           >
             <h3 className="tool-card-title">{functionName}</h3>
             <CollapseArrowButton
@@ -148,7 +156,11 @@ export const XtraMcpGenericCard = ({ functionName, message, preparing, animated
           role="button"
           tabIndex={0}
           onClick={() => setIsMetadataCollapsed(!isMetadataCollapsed)}
-          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setIsMetadataCollapsed(!isMetadataCollapsed); } }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              setIsMetadataCollapsed(!isMetadataCollapsed);
+            }
+          }}
         >
           <h3 className="tool-card-title">{functionName}</h3>
         </div>
diff --git a/webapp/_webapp/src/components/onboarding-guide.tsx b/webapp/_webapp/src/components/onboarding-guide.tsx
index 14a3382f..0161a401 100644
--- a/webapp/_webapp/src/components/onboarding-guide.tsx
+++ b/webapp/_webapp/src/components/onboarding-guide.tsx
@@ -205,7 +205,11 @@ function OnboardingStep({ step, imageUrl, imageError, onImageClick, onImageError
             role="button"
             tabIndex={0}
             onClick={onImageClick}
-            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { onImageClick(); } }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                onImageClick();
+              }
+            }}
             onError={onImageError}
           />
         </div>
@@ -241,7 +245,11 @@ function ImageModal({
             role="button"
             tabIndex={0}
             onClick={onClose}
-            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { onClose(); } }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                onClose();
+              }
+            }}
             onError={onImageError}
           />
         )}
diff --git a/webapp/_webapp/src/components/tabs.tsx b/webapp/_webapp/src/components/tabs.tsx
index fffc0a1d..6bb88d3a 100644
--- a/webapp/_webapp/src/components/tabs.tsx
+++ b/webapp/_webapp/src/components/tabs.tsx
@@ -151,7 +151,13 @@ export const Tabs = forwardRef<TabRef, TabProps>(({ items }, ref) => {
     <>
       <div className="pd-app-tab-items noselect relative" style={{ width: `${tabItemsWidth}px` }}>
         {/* Resize handle on the right edge */}
-        <div ref={resizeHandleRef} className="pd-tab-items-resize-handle" role="separator" aria-label="Resize tabs" onMouseDown={handleMouseDown}>
+        <div
+          ref={resizeHandleRef}
+          className="pd-tab-items-resize-handle"
+          role="separator"
+          aria-label="Resize tabs"
+          onMouseDown={handleMouseDown}
+        >
           {/* Visual indicator line */}
           <div className="resize-handle-indicator" />
         </div>
diff --git a/webapp/_webapp/src/libs/inline-suggestion.ts b/webapp/_webapp/src/libs/inline-suggestion.ts
index 6610ca7a..3191da9b 100644
--- a/webapp/_webapp/src/libs/inline-suggestion.ts
+++ b/webapp/_webapp/src/libs/inline-suggestion.ts
@@ -52,9 +52,7 @@ async function completeCitationKeys(state: EditorState, triggerText: string): Pr
   const textBefore = state.doc.sliceString(textBeforeStart, cursorPos - triggerText.length);
 
   // Split by sentence-ending punctuation and get the last sentence
-  const sentences = textBefore
-    .split(/(?<=[.!?])\s+/)
-    .filter((s) => s.trim().length > 0);
+  const sentences = textBefore.split(/(?<=[.!?])\s+/).filter((s) => s.trim().length > 0);
   // Fall back to the bounded window if no sentence boundary found
   const lastSentence = sentences.length > 0 ? sentences[sentences.length - 1] : textBefore.trim();
   if (!lastSentence) {
@@ -636,8 +634,7 @@ export function createAutocompleteSuppressor(
         this.handleKeydown = (e: KeyboardEvent) => {
           if (e.key !== "Tab") return;
 
-          const suggestion =
-            this.view.state.field<SuggestionState>(suggestionState);
+          const suggestion = this.view.state.field<SuggestionState>(suggestionState);
           if (!suggestion?.suggestion) return;
 
           e.preventDefault();
@@ -663,8 +660,7 @@ export function createAutocompleteSuppressor(
       }
 
       update(update: ViewUpdate) {
-        const suggestion =
-          update.state.field<SuggestionState>(suggestionState);
+        const suggestion = update.state.field<SuggestionState>(suggestionState);
         if (suggestion?.suggestion || isTriggerAtCursor(update.state)) {
           suppress();
         } else {
@@ -703,5 +699,12 @@ export function createSuggestionExtension(overleafCm: OverleafCodeMirror, config
   const keymapBindingExtension = createExtensionKeymapBinding(overleafCm, suggestionAcceptanceEffect, suggestionState);
   const autocompleteSuppressor = createAutocompleteSuppressor(overleafCm, suggestionState, suggestionAcceptanceEffect);
 
-  return [suggestionState, pluginConfigState, suggestionFetchPlugin, suggestionRenderingPlugin, keymapBindingExtension, autocompleteSuppressor];
+  return [
+    suggestionState,
+    pluginConfigState,
+    suggestionFetchPlugin,
+    suggestionRenderingPlugin,
+    keymapBindingExtension,
+    autocompleteSuppressor,
+  ];
 }
diff --git a/webapp/_webapp/src/views/chat/body/index.tsx b/webapp/_webapp/src/views/chat/body/index.tsx
index af307b0b..b2c4952c 100644
--- a/webapp/_webapp/src/views/chat/body/index.tsx
+++ b/webapp/_webapp/src/views/chat/body/index.tsx
@@ -134,7 +134,7 @@ export const ChatBody = ({ conversation }: ChatBodyProps) => {
                 }
               }}
               onKeyDown={async (e) => {
-                if (e.key === 'Enter' || e.key === ' ') {
+                if (e.key === "Enter" || e.key === " ") {
                   try {
                     const response = await getConversation({ conversationId: conversation?.id ?? "" });
                     if (!response.conversation) {
diff --git a/webapp/_webapp/src/views/chat/footer/toolbar/selection.tsx b/webapp/_webapp/src/views/chat/footer/toolbar/selection.tsx
index 71062f8d..2e91bf5b 100644
--- a/webapp/_webapp/src/views/chat/footer/toolbar/selection.tsx
+++ b/webapp/_webapp/src/views/chat/footer/toolbar/selection.tsx
@@ -27,7 +27,13 @@ export function Selection<T>({ items, initialValue, onSelect, onClose }: Selecti
   const { user } = useAuthStore();
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const [{ selectedIdx, isKeyboardNavigation }, dispatchSelection] = useReducer(
-    (state: { selectedIdx: number; isKeyboardNavigation: boolean }, action: { type: "SET_IDX"; idx: number } | { type: "SET_KEYBOARD_NAV"; value: boolean } | { type: "SET_IDX_WITH_KEYBOARD_NAV"; idx: number }) => {
+    (
+      state: { selectedIdx: number; isKeyboardNavigation: boolean },
+      action:
+        | { type: "SET_IDX"; idx: number }
+        | { type: "SET_KEYBOARD_NAV"; value: boolean }
+        | { type: "SET_IDX_WITH_KEYBOARD_NAV"; idx: number },
+    ) => {
       switch (action.type) {
         case "SET_IDX":
           return { ...state, selectedIdx: action.idx };
@@ -182,7 +188,7 @@ export function Selection<T>({ items, initialValue, onSelect, onClose }: Selecti
             onSelect?.(item);
           }}
           onKeyDown={(e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
+            if (e.key === "Enter" || e.key === " ") {
               if (item.disabled) return;
               googleAnalytics.fireEvent(user?.id, `select_${normalizeName(item.title)}`, {});
               onSelect?.(item);
diff --git a/webapp/_webapp/src/views/chat/header/chat-button.tsx b/webapp/_webapp/src/views/chat/header/chat-button.tsx
index a7824846..9cf4240a 100644
--- a/webapp/_webapp/src/views/chat/header/chat-button.tsx
+++ b/webapp/_webapp/src/views/chat/header/chat-button.tsx
@@ -74,7 +74,7 @@ export const ChatButton = ({
         onClick?.();
       }}
       onKeyDown={(e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
+        if (e.key === "Enter" || e.key === " ") {
           if (disabled) return;
           googleAnalytics.fireEvent(user?.id, "click_chat_button_" + normalizeName(text ?? alt ?? icon), {});
           onClick?.();
diff --git a/webapp/_webapp/src/views/devtools/index.tsx b/webapp/_webapp/src/views/devtools/index.tsx
index 1376acba..9350c18d 100644
--- a/webapp/_webapp/src/views/devtools/index.tsx
+++ b/webapp/_webapp/src/views/devtools/index.tsx
@@ -310,7 +310,9 @@ export const DevTools = () => {
 
             {/* Preparing delay */}
             <div className="flex flex-row gap-2 items-center pt-2 border-t !border-orange-200">
-              <label htmlFor="preparing-delay-input" className="text-sm text-gray-700 whitespace-nowrap">Preparing delay (seconds):</label>
+              <label htmlFor="preparing-delay-input" className="text-sm text-gray-700 whitespace-nowrap">
+                Preparing delay (seconds):
+              </label>
               <Input
                 id="preparing-delay-input"
                 size="sm"
diff --git a/webapp/_webapp/src/views/embed-sidebar.tsx b/webapp/_webapp/src/views/embed-sidebar.tsx
index 3b29f81c..72cf1c9e 100644
--- a/webapp/_webapp/src/views/embed-sidebar.tsx
+++ b/webapp/_webapp/src/views/embed-sidebar.tsx
@@ -264,7 +264,13 @@ export const EmbedSidebar = () => {
       }}
     >
       {/* Resize handle on the left */}
-      <div ref={resizeHandleRef} className="pd-embed-resize-handle" role="separator" aria-label="Resize sidebar" onMouseDown={handleMouseDown}>
+      <div
+        ref={resizeHandleRef}
+        className="pd-embed-resize-handle"
+        role="separator"
+        aria-label="Resize sidebar"
+        onMouseDown={handleMouseDown}
+      >
         {/* Visual indicator line */}
         <div className="resize-handle-indicator" />
       </div>
diff --git a/webapp/_webapp/src/views/login/index.tsx b/webapp/_webapp/src/views/login/index.tsx
index cc3f3fd0..9df4693d 100644
--- a/webapp/_webapp/src/views/login/index.tsx
+++ b/webapp/_webapp/src/views/login/index.tsx
@@ -91,7 +91,11 @@ export const Login = () => {
         onClick={() => {
           setShowEndpointSettings(!showEndpointSettings);
         }}
-        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setShowEndpointSettings(!showEndpointSettings); } }}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            setShowEndpointSettings(!showEndpointSettings);
+          }
+        }}
       >
         Advanced Options
       </div>
diff --git a/webapp/_webapp/src/views/login/login-with-overleaf.tsx b/webapp/_webapp/src/views/login/login-with-overleaf.tsx
index 1bfb3a37..2c8489ff 100644
--- a/webapp/_webapp/src/views/login/login-with-overleaf.tsx
+++ b/webapp/_webapp/src/views/login/login-with-overleaf.tsx
@@ -59,7 +59,11 @@ export default function LoginWithOverleaf({
       role="button"
       tabIndex={0}
       onClick={() => onOverleafLogin()}
-      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { onOverleafLogin(); } }}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          onOverleafLogin();
+        }
+      }}
       style={{
         cursor: isLoginLoading ? "wait" : "pointer",
       }}
diff --git a/webapp/_webapp/src/views/office/app.tsx b/webapp/_webapp/src/views/office/app.tsx
index 351b495c..af029fb0 100644
--- a/webapp/_webapp/src/views/office/app.tsx
+++ b/webapp/_webapp/src/views/office/app.tsx
@@ -34,6 +34,8 @@ const PaperDebugger = ({ displayMode = "fullscreen", adapterId }: PaperDebuggerP
     setDisplayMode(displayMode);
   }
 
+  useThemeSync();
+
   // Initialize stores from storage on mount
   // This must happen before the main UI renders to restore login state and settings
   useEffect(() => {
diff --git a/webapp/_webapp/src/views/settings/sections/footer.tsx b/webapp/_webapp/src/views/settings/sections/footer.tsx
index 6e7c8d12..29b8877b 100644
--- a/webapp/_webapp/src/views/settings/sections/footer.tsx
+++ b/webapp/_webapp/src/views/settings/sections/footer.tsx
@@ -39,7 +39,7 @@ export const SettingsFooter = () => {
             setVersionClickTimeout(timeout);
           }}
           onKeyDown={(e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
+            if (e.key === "Enter" || e.key === " ") {
               setVersionClickCount((prev: number) => {
                 const next = prev + 1;
                 if (next >= 5) {