feat: add mobile shell and unified search

apps/desktop/src/renderer/components/shared/SearchInput.tsx

@@ -12,8 +12,9 @@ export interface SearchInputProps {
   value: string
   onChange: (value: string) => void
   placeholder: string
-  /** 포커스 단축키. '/' 만 지원. 빈 문자열이면 끈다 */
+  /** 포커스 단축키. '/' 또는 'Ctrl K'. 빈 문자열이면 끈다 */
   shortcut?: string
+  autoFocus?: boolean
 }
 
 function isTypingTarget(target: EventTarget | null): boolean {
@@ -21,17 +22,34 @@ function isTypingTarget(target: EventTarget | null): boolean {
   return target.isContentEditable || ['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName)
 }
 
-export function SearchInput({ value, onChange, placeholder, shortcut = '/' }: SearchInputProps): React.ReactElement {
+export function SearchInput({
+  value,
+  onChange,
+  placeholder,
+  shortcut = '/',
+  autoFocus = false,
+}: SearchInputProps): React.ReactElement {
   const { t } = useI18n()
   const inputRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
-    if (shortcut !== '/') return undefined
     const onKeyDown = (e: KeyboardEvent): void => {
-      if (e.key !== '/' || e.ctrlKey || e.metaKey || e.altKey || isTypingTarget(e.target)) return
+      const slash = shortcut === '/'
+        && e.key === '/'
+        && !e.ctrlKey
+        && !e.metaKey
+        && !e.altKey
+        && !isTypingTarget(e.target)
+      const commandK = shortcut === 'Ctrl K'
+        && (e.ctrlKey || e.metaKey)
+        && !e.altKey
+        && !e.shiftKey
+        && e.key.toLocaleLowerCase() === 'k'
+      if (!slash && !commandK) return
       e.preventDefault()
       inputRef.current?.focus()
     }
+    if (shortcut !== '/' && shortcut !== 'Ctrl K') return undefined
     window.addEventListener('keydown', onKeyDown)
     return () => window.removeEventListener('keydown', onKeyDown)
   }, [shortcut])
@@ -39,6 +57,7 @@ export function SearchInput({ value, onChange, placeholder, shortcut = '/' }: Se
   return (
     <TextField
       inputRef={inputRef}
+      autoFocus={autoFocus}
       placeholder={placeholder}
       value={value}
       onChange={(e) => onChange(e.target.value)}