fix(keymap): clear shortcuts when a focused tree is removed (#1940)

src/features/database/DatabaseView.tsx

@@ -7,7 +7,6 @@
  */
 import { useEffect, useMemo, useRef, type CSSProperties } from "react";
 import type { DbDatabases, DbTableDetails } from "@/platform/ipc";
-import { setContext } from "@/platform/context";
 import { executeAction } from "@/platform/actions";
 import { shortcutLabel } from "@/platform/keymap";
 import {
@@ -378,13 +377,10 @@ export function DatabaseView() {
   return (
     <div className={styles.dbView}>
       <DatabaseToolbar />
-      <div
-        className={styles.treeHost}
-        onFocus={(e) => setContext(DB_VIEW_FOCUS, (e.target as HTMLElement).getAttribute("role") === "tree")}
-        onBlur={() => setContext(DB_VIEW_FOCUS, false)}
-      >
+      <div className={styles.treeHost}>
         <Tree<Node>
           aria-label="Data sources"
+          focusContext={DB_VIEW_FOCUS}
           roots={roots}
           handleRef={tree}
           expanded={st.treeExpanded}

src/features/project-tree/ProjectView.tsx

@@ -20,7 +20,6 @@ import { createPortal } from "react-dom";
 import clsx from "clsx";
 import { revealRange, useEditorRegistry } from "@/editor/api";
 import { executeAction } from "@/platform/actions";
-import { setContext } from "@/platform/context";
 import { tx, useTxTemplate } from "@/platform/i18n";
 import { isTauri } from "@/platform/ipc";
 import { nativeDropPoint } from "@/platform/nativeDrop";
@@ -779,8 +778,6 @@ export function ProjectView() {
       onCopy={(e) => onClipboard(e, "project.copy")}
       onCut={(e) => onClipboard(e, "project.cut")}
       onPaste={(e) => onClipboard(e, "project.paste")}
-      onFocus={(e) => setContext("projectViewFocus", (e.target as HTMLElement).getAttribute("role") === "tree")}
-      onBlur={() => setContext("projectViewFocus", false)}
     >
       {mode === "unity" && unity && !unity.projects.length && (
         <div className={styles.unityNotice} role="status">
@@ -795,6 +792,7 @@ export function ProjectView() {
       <Tree<ProjectNode>
         horizontalScroll
         aria-label="Project"
+        focusContext="projectViewFocus"
         handleRef={setTreeHandle}
         roots={model.roots}
         getKey={getKey}

src/features/services/ServicesTree.tsx

@@ -5,7 +5,6 @@
  */
 import { useEffect, useMemo, useRef } from "react";
 import clsx from "clsx";
-import { setContext } from "@/platform/context";
 import { useTxTemplate, tx } from "@/platform/i18n";
 import { shortcutLabel } from "@/platform/keymap";
 import { useProject } from "@/platform/project";
@@ -208,15 +207,10 @@ export function ServicesTreeView() {
       ) : (
         <SplitGroup orientation="horizontal" className={styles.split}>
           <SplitPanel defaultSize="40%" minSize="160px">
-            <div
-              className={styles.tree}
-              onFocus={(e) =>
-                setContext(SERVICES_VIEW_FOCUS, (e.target as HTMLElement).getAttribute("role") === "tree")
-              }
-              onBlur={() => setContext(SERVICES_VIEW_FOCUS, false)}
-            >
+            <div className={styles.tree}>
               <Tree<ServiceTreeItem>
                 key={location}
+                focusContext={SERVICES_VIEW_FOCUS}
                 reorder={reorder}
                 roots={roots}
                 getKey={(n) => n.key}