fix widget more

shared/chat/inbox/filter-row.tsx

@@ -75,35 +75,39 @@ const ConversationFilterInput = React.memo(function ConversationFilterInput(ownP
     appendNewChatBuilder()
   }, [appendNewChatBuilder])
   Kb.useHotKey('mod+n', onHotKeys)
+  Kb.useHotKey('mod+k', onStartSearch)
 
   React.useEffect(() => {
     if (isSearching) {
       inputRef.current?.focus()
     }
   }, [isSearching])
 
-  const searchInput = (
+  const searchInput = isSearching ? (
     <Kb.SearchFilter
       ref={inputRef}
       size="full-width"
       style={styles.searchBox}
       icon="iconfont-search"
       placeholderText="Search"
-      hotkey="k"
-      showXOverride={isSearching ? true : undefined}
+      showXOverride={true}
       value={filter}
       valueControlled={true}
-      // On mobile SearchFilter is re-mounted when toggling isSearching. (See chat/inbox/index.native.tsx:render's use of isSearching)
-      // Simple props would cause the keyboard to appear and then disappear on dismount.
-      // Take care instead to only launch the keyboard from the isSearching=true mountpoint.
-      dummyInput={Kb.Styles.isMobile && !isSearching}
-      focusOnMount={Kb.Styles.isMobile && isSearching}
+      focusOnMount={Kb.Styles.isMobile}
       onChange={onChange}
       onCancel={onStopSearch}
-      onFocus={onStartSearch}
       onKeyDown={onKeyDown}
       onEnterKeyDown={onEnterKeyDown}
     />
+  ) : (
+    <Kb.Box2 direction="horizontal" style={styles.searchPlaceholderOuter} alignItems="center">
+      <Kb.ClickableBox2 onClick={onStartSearch} style={styles.searchPlaceholder}>
+        <Kb.Icon type="iconfont-search" sizeType={Kb.Styles.isMobile ? 'Small' : 'Default'} color={Kb.Styles.globalColors.black_50} style={styles.searchPlaceholderIcon} />
+        <Kb.Text type="BodySemibold" style={styles.searchPlaceholderText}>
+          {Kb.Styles.isMobile ? 'Search' : `Search (\u2318K)`}
+        </Kb.Text>
+      </Kb.ClickableBox2>
+    </Kb.Box2>
   )
   return (
     <Kb.Box2
@@ -148,6 +152,34 @@ const styles = Kb.Styles.styleSheetCreate(
         // hacky, redo the layout of this component later
         isTablet: {maxWidth: 270 - 16 * 2},
       }),
+      searchPlaceholder: {
+        ...Kb.Styles.globalStyles.flexBoxRow,
+        ...Kb.Styles.globalStyles.flexGrow,
+        alignItems: 'center',
+        backgroundColor: Kb.Styles.globalColors.black_10,
+        borderRadius: Kb.Styles.borderRadius,
+        flex: 1,
+        flexShrink: 1,
+        height: 32,
+        paddingLeft: Kb.Styles.globalMargins.xsmall,
+        paddingRight: Kb.Styles.globalMargins.xsmall,
+      },
+      searchPlaceholderIcon: Kb.Styles.platformStyles({
+        isElectron: {marginRight: Kb.Styles.globalMargins.tiny, marginTop: 2},
+        isMobile: {marginRight: Kb.Styles.globalMargins.tiny},
+      }),
+      searchPlaceholderOuter: Kb.Styles.platformStyles({
+        common: {flex: 1},
+        isElectron: Kb.Styles.desktopStyles.windowDraggingClickable,
+        isMobile: {
+          paddingBottom: Kb.Styles.globalMargins.tiny,
+          paddingLeft: Kb.Styles.globalMargins.small,
+          paddingRight: Kb.Styles.globalMargins.small,
+          paddingTop: Kb.Styles.globalMargins.tiny,
+        },
+        isTablet: {paddingLeft: 0, paddingRight: 0},
+      }),
+      searchPlaceholderText: {color: Kb.Styles.globalColors.black_50},
       whiteBg: {backgroundColor: Kb.Styles.globalColors.white},
     }) as const
 )

shared/common-adapters/plain-input.d.ts

@@ -98,7 +98,6 @@ export type Props = {
   onKeyDown?: (event: React.KeyboardEvent) => void
   onKeyUp?: (event: React.KeyboardEvent) => void
   spellCheck?: boolean
-  tabIndex?: number // desktop only
   // Mobile only
   children?: React.ReactNode
   allowFontScaling?: boolean

shared/common-adapters/plain-input.desktop.tsx

@@ -40,7 +40,7 @@ const PlainInput = React.memo(
     const {growAndScroll, multiline, onFocus: _onFocus, selectTextOnFocus, onChangeText} = p
     const {maxBytes, globalCaptureKeypress, onBlur, onClick, style, resize, maxLength} = p
     const {rowsMin, rowsMax, textType, padding, flexable = true, type} = p
-    const {autoFocus, allowKeyboardEvents, placeholder, spellCheck, disabled, value, className, tabIndex} = p
+    const {autoFocus, allowKeyboardEvents, placeholder, spellCheck, disabled, value, className} = p
     const inputRef = React.useRef<NativeTextRef>(null)
     const isComposingIMERef = React.useRef(false)
     const mountedRef = React.useRef(true)
@@ -216,7 +216,6 @@ const PlainInput = React.memo(
         placeholder,
         ref: inputRef,
         spellCheck,
-        tabIndex,
         value,
         ...(maxLength ? {maxLength} : {}),
         ...(disabled ? {readOnly: true} : {}),

shared/common-adapters/search-filter.tsx

@@ -57,7 +57,6 @@ type Props = {
   onKeyDown?: (event: React.KeyboardEvent) => void
   onKeyUp?: (event: React.KeyboardEvent) => void
   onKeyPress?: (event: NativeSyntheticEvent<{key: string}>) => void
-  tabIndex?: number // desktop only
   measureRef?: React.RefObject<MeasureRef | null>
 }
 
@@ -202,7 +201,6 @@ const SearchFilter = React.forwardRef<SearchFilterRef, Props>(function SearchFil
         onKeyUp={props.onKeyUp}
         onKeyPress={props.onKeyPress}
         onEnterKeyDown={props.onEnterKeyDown}
-        tabIndex={props.tabIndex}
         ref={inputRef}
         hideBorder={true}
         containerStyle={styles.inputContainer}