sync: update from private repo (e62f5c7)

ui/src/components/command/CommandPalette.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   buildCommands, filterCommands, groupCommands,
   type CommandContext, type CommandItem,
@@ -11,6 +12,7 @@ interface Props {
 }
 
 export function CommandPalette({ open, onClose, ctx }: Props) {
+  const { t } = useTranslation('layout');
   const dialogRef = useRef<HTMLDialogElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
   const openerRef = useRef<Element | null>(null);
@@ -71,7 +73,7 @@ export function CommandPalette({ open, onClose, ctx }: Props) {
   return (
     <dialog
       ref={dialogRef}
-      aria-label="コマンドパレット"
+      aria-label={t('commandPalette.label')}
       className="m-0 mt-[12vh] mx-auto w-[min(560px,92vw)] rounded-xl border border-hairline bg-surface text-ink shadow-2xl p-0 backdrop:bg-black/40"
     >
       <div className="p-2 border-b border-hairline">
@@ -80,17 +82,17 @@ export function CommandPalette({ open, onClose, ctx }: Props) {
           role="combobox"
           aria-expanded="true"
           aria-controls="cmdk-listbox"
-          aria-label="コマンド・タスクを検索"
+          aria-label={t('commandPalette.searchLabel')}
           aria-activedescendant={highlightedId ? `cmdk-opt-${highlightedId}` : undefined}
           value={query}
           onChange={(e) => setQuery(e.target.value)}
           onKeyDown={onKeyDown}
-          placeholder="コマンド・タスクを検索…"
+          placeholder={t('commandPalette.searchPlaceholder')}
           className="w-full h-9 px-2 bg-transparent outline-none text-sm"
         />
       </div>
       <div id="cmdk-listbox" role="listbox" className="max-h-[52vh] overflow-y-auto p-1">
-        {flat.length === 0 && <div role="status" className="px-3 py-6 text-center text-sm text-muted">該当なし</div>}
+        {flat.length === 0 && <div role="status" className="px-3 py-6 text-center text-sm text-muted">{t('commandPalette.empty')}</div>}
         {groups.map((g) => (
           <div key={g.group} role="group" aria-label={g.label}>
             <div className="section-label px-2 pt-2 pb-1">{g.label}</div>