From a1a2bb1cd9f000f53fbeae752ed5c38f152eadf2 Mon Sep 17 00:00:00 2001
From: Rakshith Bhat <88523594+RakshithBhat03@users.noreply.github.com>
Date: Wed, 2 Sep 2026 09:44:32 +0530
Subject: [PATCH] fix(web): label keybinding condition removal actions (#8664)

---
 .../KeybindingsSettings.logic.test.ts         | 14 ++++
 .../settings/KeybindingsSettings.logic.ts     |  8 ++
 .../settings/KeybindingsSettings.tsx          | 76 +++++++++++--------
 3 files changed, 68 insertions(+), 30 deletions(-)

diff --git a/apps/web/src/components/settings/KeybindingsSettings.logic.test.ts b/apps/web/src/components/settings/KeybindingsSettings.logic.test.ts
index 90eaaef99413fd83689ba5c715fdc2bacb363ffb..dd6750b0c41bb0a5b13bd85f327ffbb961d01570 100644
--- a/apps/web/src/components/settings/KeybindingsSettings.logic.test.ts
+++ b/apps/web/src/components/settings/KeybindingsSettings.logic.test.ts
@@ -12,6 +12,7 @@ import {
   shortcutToKeybindingInput,
   unknownWhenVariables,
   whenAstToExpression,
+  whenNodeRemoveLabel,
 } from "./KeybindingsSettings.logic";
 
 describe("KeybindingsSettings.logic", () => {
@@ -120,6 +121,19 @@ describe("KeybindingsSettings.logic", () => {
     });
   });
 
+  it("describes the scope of each visual expression removal", () => {
+    const condition = { type: "identifier", name: "terminalFocus" } as const;
+    const negatedCondition = { type: "not", node: condition } as const;
+    const group = { type: "and", left: condition, right: negatedCondition } as const;
+    const negatedGroup = { type: "not", node: group } as const;
+
+    expect(whenNodeRemoveLabel(group, 0)).toBe("Clear all conditions");
+    expect(whenNodeRemoveLabel(condition, 1)).toBe("Remove condition");
+    expect(whenNodeRemoveLabel(negatedCondition, 1)).toBe("Remove condition");
+    expect(whenNodeRemoveLabel(group, 1)).toBe("Remove group and its conditions");
+    expect(whenNodeRemoveLabel(negatedGroup, 1)).toBe("Remove group and its conditions");
+  });
+
   it("formats static and project script command labels", () => {
     expect(commandLabel("commandPalette.toggle")).toBe("Command Palette: Toggle");
     expect(commandLabel("themeEditor.toggle")).toBe("Theme Editor: Toggle");
diff --git a/apps/web/src/components/settings/KeybindingsSettings.logic.ts b/apps/web/src/components/settings/KeybindingsSettings.logic.ts
index 8c15111e1969da45e49ae2ae8e87bfffb4a4fc99..d987bc7a83ddf70b5dee91f5be3340bbb6e0b910 100644
--- a/apps/web/src/components/settings/KeybindingsSettings.logic.ts
+++ b/apps/web/src/components/settings/KeybindingsSettings.logic.ts
@@ -68,6 +68,14 @@ export function whenAstToExpression(node: KeybindingWhenNode | undefined): strin
   }
 }
 
+export function whenNodeRemoveLabel(node: KeybindingWhenNode, depth: number): string {
+  if (depth === 0) return "Clear all conditions";
+  if (node.type === "identifier" || (node.type === "not" && node.node.type === "identifier")) {
+    return "Remove condition";
+  }
+  return "Remove group and its conditions";
+}
+
 function wrapWhenExpression(node: KeybindingWhenNode): string {
   if (node.type === "identifier" || node.type === "not") return whenAstToExpression(node);
   return `(${whenAstToExpression(node)})`;
diff --git a/apps/web/src/components/settings/KeybindingsSettings.tsx b/apps/web/src/components/settings/KeybindingsSettings.tsx
index 10a7b7e669fce2c06e81ed668b4017590a4c97d1..d1470a7db78839b020bdc89db62849afb2513a5a 100644
--- a/apps/web/src/components/settings/KeybindingsSettings.tsx
+++ b/apps/web/src/components/settings/KeybindingsSettings.tsx
@@ -67,6 +67,7 @@ import {
   type WhenVariableOption,
   unknownWhenVariables,
   whenAstToExpression,
+  whenNodeRemoveLabel,
 } from "./KeybindingsSettings.logic";
 import { SettingsPageContainer, SettingsRow, SettingsSection } from "./settingsLayout";
 import { searchableSetting } from "./settingsSearch";
@@ -349,6 +350,37 @@ function WhenVariableSelect({
   );
 }
 
+function WhenExpressionRemoveButton({
+  label,
+  className,
+  onRemove,
+}: {
+  label: string;
+  className?: string | undefined;
+  onRemove: () => void;
+}) {
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        delay={200}
+        render={
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon-sm"
+            className={cn("size-7", className)}
+            aria-label={label}
+            onClick={onRemove}
+          />
+        }
+      >
+        <MinusIcon aria-hidden className="size-3.5" />
+      </TooltipTrigger>
+      <TooltipPopup side="top">{label}</TooltipPopup>
+    </Tooltip>
+  );
+}
+
 function WhenExpressionNodeEditor({
   node,
   variables,
@@ -388,16 +420,10 @@ function WhenExpressionNodeEditor({
           onChange={(value) => onChange(setConditionIdentifier(node, value))}
         />
         {onRemove ? (
-          <Button
-            type="button"
-            variant="ghost"
-            size="icon-sm"
-            className="size-7"
-            aria-label="Remove condition"
-            onClick={onRemove}
-          >
-            <MinusIcon className="size-3.5" />
-          </Button>
+          <WhenExpressionRemoveButton
+            label={whenNodeRemoveLabel(node, depth)}
+            onRemove={onRemove}
+          />
         ) : null}
       </div>
     );
@@ -423,16 +449,11 @@ function WhenExpressionNodeEditor({
             Not
           </Toggle>
           {onRemove ? (
-            <Button
-              type="button"
-              variant="ghost"
-              size="icon-sm"
-              className="ml-auto size-7"
-              aria-label="Remove negated group"
-              onClick={onRemove}
-            >
-              <MinusIcon className="size-3.5" />
-            </Button>
+            <WhenExpressionRemoveButton
+              label={whenNodeRemoveLabel(node, depth)}
+              className="ml-auto"
+              onRemove={onRemove}
+            />
           ) : null}
         </div>
         <div className="relative pl-4">
@@ -546,16 +567,11 @@ function WhenExpressionNodeEditor({
           Group
         </Button>
         {onRemove ? (
-          <Button
-            type="button"
-            variant="ghost"
-            size="icon-sm"
-            className="ml-auto size-7"
-            aria-label="Remove group"
-            onClick={onRemove}
-          >
-            <MinusIcon className="size-3.5" />
-          </Button>
+          <WhenExpressionRemoveButton
+            label={whenNodeRemoveLabel(node, depth)}
+            className="ml-auto"
+            onRemove={onRemove}
+          />
         ) : null}
       </div>
       <div className="space-y-2">
-- 
2.54.0