From 17716a730b8550bab3c7a14fd5baee6302f945f3 Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Tue, 3 Mar 2026 18:28:00 +0000
Subject: [PATCH] chore(ui): use Kbd hints in bulk delete toolbar

---
 .../ui/src/components/message-section.tsx     | 14 +++++++++----
 .../ui/src/lib/i18n/messages/en/messaging.ts  |  4 +++-
 .../ui/src/lib/i18n/messages/es/messaging.ts  |  4 +++-
 .../ui/src/lib/i18n/messages/fr/messaging.ts  |  4 +++-
 .../ui/src/lib/i18n/messages/ja/messaging.ts  |  4 +++-
 .../ui/src/lib/i18n/messages/ru/messaging.ts  |  4 +++-
 .../lib/i18n/messages/zh-Hans/messaging.ts    |  4 +++-
 .../styles/messaging/message-selection.css    | 20 ++++++++++++++++---
 8 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/packages/ui/src/components/message-section.tsx b/packages/ui/src/components/message-section.tsx
index baa012b9..d1bf0eac 100644
--- a/packages/ui/src/components/message-section.tsx
+++ b/packages/ui/src/components/message-section.tsx
@@ -16,7 +16,6 @@ import type { InstanceMessageStore } from "../stores/message-v2/instance-store"
 import type { DeleteHoverState } from "../types/delete-hover"
 import { buildRecordDisplayData } from "../stores/message-v2/record-display-cache"
 import { getPartCharCount } from "../lib/token-utils"
-import { isMac } from "../lib/keyboard-utils"
 const SCROLL_SCOPE = "session"
 const SCROLL_SENTINEL_MARGIN_PX = 48
 const USER_SCROLL_INTENT_WINDOW_MS = 600
@@ -1496,9 +1495,16 @@ export default function MessageSection(props: MessageSectionProps) {
                 <X class="w-4 h-4" aria-hidden="true" />
               </button>
 
-              <span class="message-delete-mode-hint keyboard-hints" aria-hidden="true">
-                {t("messageSection.bulkDelete.selectionHint", { modifier: isMac() ? "Cmd" : "Ctrl" })}
-              </span>
+              <div class="message-delete-mode-hint-row keyboard-hints" aria-hidden="true">
+                <Kbd shortcut="cmd+click" />
+                <span class="message-delete-mode-hint-text">{t("messageSection.bulkDelete.selectionHint.toggle")}</span>
+                <span class="message-delete-mode-hint-sep">·</span>
+                <Kbd shortcut="shift+click" />
+                <span class="message-delete-mode-hint-text">{t("messageSection.bulkDelete.selectionHint.range")}</span>
+                <span class="message-delete-mode-hint-sep">·</span>
+                <Kbd shortcut="esc" />
+                <span class="message-delete-mode-hint-text">{t("messageSection.bulkDelete.selectionHint.clear")}</span>
+              </div>
             </div>
           </Show>
         </div>
diff --git a/packages/ui/src/lib/i18n/messages/en/messaging.ts b/packages/ui/src/lib/i18n/messages/en/messaging.ts
index 9ede1577..b3acbd32 100644
--- a/packages/ui/src/lib/i18n/messages/en/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/en/messaging.ts
@@ -90,7 +90,9 @@ export const messagingMessages = {
   "messageSection.bulkDelete.selectionModeLabel": "Selection",
   "messageSection.bulkDelete.selectionModeAll": "All",
   "messageSection.bulkDelete.selectionModeTools": "Tools only",
-  "messageSection.bulkDelete.selectionHint": "{modifier}+Click toggle · Shift+Click range · Esc clear",
+  "messageSection.bulkDelete.selectionHint.toggle": "toggle",
+  "messageSection.bulkDelete.selectionHint.range": "range",
+  "messageSection.bulkDelete.selectionHint.clear": "clear",
   "messageSection.bulkDelete.cancelTitle": "Cancel selection",
   "messageSection.bulkDelete.failedTitle": "Delete failed",
   "messageSection.bulkDelete.failedMessage": "Failed to delete selected items",
diff --git a/packages/ui/src/lib/i18n/messages/es/messaging.ts b/packages/ui/src/lib/i18n/messages/es/messaging.ts
index 7778869c..cd2473e5 100644
--- a/packages/ui/src/lib/i18n/messages/es/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/es/messaging.ts
@@ -92,7 +92,9 @@ export const messagingMessages = {
   "messageSection.bulkDelete.selectionModeLabel": "Selección",
   "messageSection.bulkDelete.selectionModeAll": "Todo",
   "messageSection.bulkDelete.selectionModeTools": "Solo herramientas",
-  "messageSection.bulkDelete.selectionHint": "{modifier}+Click para alternar · Shift+Click rango · Esc limpiar",
+  "messageSection.bulkDelete.selectionHint.toggle": "alternar",
+  "messageSection.bulkDelete.selectionHint.range": "rango",
+  "messageSection.bulkDelete.selectionHint.clear": "limpiar",
   "messageSection.bulkDelete.cancelTitle": "Cancelar selección",
   "messageSection.bulkDelete.failedTitle": "Error al eliminar",
   "messageSection.bulkDelete.failedMessage": "No se pudieron eliminar los elementos seleccionados",
diff --git a/packages/ui/src/lib/i18n/messages/fr/messaging.ts b/packages/ui/src/lib/i18n/messages/fr/messaging.ts
index 2a7928fc..b2b5b50a 100644
--- a/packages/ui/src/lib/i18n/messages/fr/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/fr/messaging.ts
@@ -92,7 +92,9 @@ export const messagingMessages = {
   "messageSection.bulkDelete.selectionModeLabel": "Sélection",
   "messageSection.bulkDelete.selectionModeAll": "Tous",
   "messageSection.bulkDelete.selectionModeTools": "Outils uniquement",
-  "messageSection.bulkDelete.selectionHint": "{modifier}+clic pour basculer · Maj+clic pour la plage · Échap effacer",
+  "messageSection.bulkDelete.selectionHint.toggle": "basculer",
+  "messageSection.bulkDelete.selectionHint.range": "plage",
+  "messageSection.bulkDelete.selectionHint.clear": "effacer",
   "messageSection.bulkDelete.cancelTitle": "Annuler la sélection",
   "messageSection.bulkDelete.failedTitle": "Échec de suppression",
   "messageSection.bulkDelete.failedMessage": "Impossible de supprimer les éléments sélectionnés",
diff --git a/packages/ui/src/lib/i18n/messages/ja/messaging.ts b/packages/ui/src/lib/i18n/messages/ja/messaging.ts
index acd0d766..3ed2f3e1 100644
--- a/packages/ui/src/lib/i18n/messages/ja/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/ja/messaging.ts
@@ -92,7 +92,9 @@ export const messagingMessages = {
   "messageSection.bulkDelete.selectionModeLabel": "選択",
   "messageSection.bulkDelete.selectionModeAll": "すべて",
   "messageSection.bulkDelete.selectionModeTools": "ツールのみ",
-  "messageSection.bulkDelete.selectionHint": "{modifier}+クリックで切り替え · Shift+クリックで範囲選択 · Esc でクリア",
+  "messageSection.bulkDelete.selectionHint.toggle": "切り替え",
+  "messageSection.bulkDelete.selectionHint.range": "範囲",
+  "messageSection.bulkDelete.selectionHint.clear": "クリア",
   "messageSection.bulkDelete.cancelTitle": "選択をキャンセル",
   "messageSection.bulkDelete.failedTitle": "削除に失敗しました",
   "messageSection.bulkDelete.failedMessage": "選択した項目の削除に失敗しました",
diff --git a/packages/ui/src/lib/i18n/messages/ru/messaging.ts b/packages/ui/src/lib/i18n/messages/ru/messaging.ts
index fa90a60a..0e122df0 100644
--- a/packages/ui/src/lib/i18n/messages/ru/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/ru/messaging.ts
@@ -92,7 +92,9 @@ export const messagingMessages = {
   "messageSection.bulkDelete.selectionModeLabel": "Выбор",
   "messageSection.bulkDelete.selectionModeAll": "Все",
   "messageSection.bulkDelete.selectionModeTools": "Только инструменты",
-  "messageSection.bulkDelete.selectionHint": "{modifier}+клик переключить · Shift+клик диапазон · Esc очистить",
+  "messageSection.bulkDelete.selectionHint.toggle": "переключить",
+  "messageSection.bulkDelete.selectionHint.range": "диапазон",
+  "messageSection.bulkDelete.selectionHint.clear": "очистить",
   "messageSection.bulkDelete.cancelTitle": "Отменить выбор",
   "messageSection.bulkDelete.failedTitle": "Ошибка удаления",
   "messageSection.bulkDelete.failedMessage": "Не удалось удалить выбранные элементы",
diff --git a/packages/ui/src/lib/i18n/messages/zh-Hans/messaging.ts b/packages/ui/src/lib/i18n/messages/zh-Hans/messaging.ts
index f62976b9..24c0b418 100644
--- a/packages/ui/src/lib/i18n/messages/zh-Hans/messaging.ts
+++ b/packages/ui/src/lib/i18n/messages/zh-Hans/messaging.ts
@@ -92,7 +92,9 @@ export const messagingMessages = {
   "messageSection.bulkDelete.selectionModeLabel": "选择",
   "messageSection.bulkDelete.selectionModeAll": "全部",
   "messageSection.bulkDelete.selectionModeTools": "仅工具",
-  "messageSection.bulkDelete.selectionHint": "{modifier}+点击切换 · Shift+点击范围 · Esc 清除",
+  "messageSection.bulkDelete.selectionHint.toggle": "切换",
+  "messageSection.bulkDelete.selectionHint.range": "范围",
+  "messageSection.bulkDelete.selectionHint.clear": "清除",
   "messageSection.bulkDelete.cancelTitle": "取消选择",
   "messageSection.bulkDelete.failedTitle": "删除失败",
   "messageSection.bulkDelete.failedMessage": "无法删除已选择的项目",
diff --git a/packages/ui/src/styles/messaging/message-selection.css b/packages/ui/src/styles/messaging/message-selection.css
index 80a5d2cf..c2a2489b 100644
--- a/packages/ui/src/styles/messaging/message-selection.css
+++ b/packages/ui/src/styles/messaging/message-selection.css
@@ -14,6 +14,7 @@
   right: 5rem;
   bottom: 1rem;
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 6px;
   padding: 6px 10px;
@@ -200,10 +201,23 @@
   box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent-primary) 45%, transparent);
 }
 
-.message-delete-mode-hint {
-  margin-left: 2px;
+.message-delete-mode-hint-row {
+  flex: 1 0 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding-top: 2px;
   font-size: 10px;
   color: var(--text-muted);
-  white-space: nowrap;
+  user-select: none;
+}
+
+.message-delete-mode-hint-text {
+  white-space: nowrap;
+}
+
+.message-delete-mode-hint-sep {
+  color: var(--text-muted);
   user-select: none;
 }