desktop: bring back leap

packages/app/features/top/ChatListScreen.tsx

@@ -20,6 +20,8 @@ import {
   ScreenHeader,
   View,
   WelcomeSheet,
+  useGlobalSearch,
+  useIsWindowNarrow,
 } from '@tloncorp/ui';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ColorTokens, useTheme } from 'tamagui';
@@ -56,6 +58,7 @@ export function ChatListScreenView({
   const [inviteSheetGroup, setInviteSheetGroup] = useState<db.Group | null>();
   const personalInvite = db.personalInviteLink.useValue();
   const viewedPersonalInvite = db.hasViewedPersonalInvite.useValue();
+  const { isOpen, setIsOpen } = useGlobalSearch();
   const theme = useTheme();
   const inviteButtonColor = useMemo(
     () =>
@@ -229,12 +232,18 @@ export function ChatListScreenView({
 
   const [searchQuery, setSearchQuery] = useState('');
 
+  const isWindowNarrow = useIsWindowNarrow();
+
   const handleSearchInputToggled = useCallback(() => {
-    if (showSearchInput) {
-      setSearchQuery('');
+    if (isWindowNarrow) {
+      if (showSearchInput) {
+        setSearchQuery('');
+      }
+      setShowSearchInput(!showSearchInput);
+    } else {
+      setIsOpen(!isOpen);
     }
-    setShowSearchInput(!showSearchInput);
-  }, [showSearchInput]);
+  }, [showSearchInput, isWindowNarrow, isOpen, setIsOpen]);
 
   const handleGroupAction = useCallback(
     (action: GroupPreviewAction, group: db.Group) => {

packages/app/navigation/desktop/TopLevelDrawer.tsx

@@ -3,12 +3,20 @@ import {
   createDrawerNavigator,
 } from '@react-navigation/drawer';
 import * as store from '@tloncorp/shared/store';
-import { AvatarNavIcon, NavIcon, YStack, useWebAppUpdate } from '@tloncorp/ui';
+import {
+  AvatarNavIcon,
+  GlobalSearch,
+  GlobalSearchProvider,
+  NavIcon,
+  YStack,
+  useWebAppUpdate,
+} from '@tloncorp/ui';
 import { getVariableValue, useTheme } from 'tamagui';
 
 import { ActivityScreen } from '../../features/top/ActivityScreen';
 import { useCurrentUserId } from '../../hooks/useCurrentUser';
 import { RootDrawerParamList } from '../types';
+import { useRootNavigation } from '../utils';
 import { HomeNavigator } from './HomeNavigator';
 import { ProfileScreenNavigator } from './ProfileScreenNavigator';
 
@@ -68,25 +76,33 @@ const DrawerContent = (props: DrawerContentComponentProps) => {
 };
 
 export const TopLevelDrawer = () => {
+  const { navigateToGroup, navigateToChannel } = useRootNavigation();
+
   return (
-    <Drawer.Navigator
-      drawerContent={(props: DrawerContentComponentProps) => {
-        return <DrawerContent {...props} />;
-      }}
-      initialRouteName="Home"
-      screenOptions={{
-        drawerType: 'permanent',
-        headerShown: false,
-        drawerStyle: {
-          width: 48,
-          backgroundColor: getVariableValue(useTheme().background),
-          borderRightColor: getVariableValue(useTheme().border),
-        },
-      }}
-    >
-      <Drawer.Screen name="Home" component={HomeNavigator} />
-      <Drawer.Screen name="Activity" component={ActivityScreen} />
-      <Drawer.Screen name="Contacts" component={ProfileScreenNavigator} />
-    </Drawer.Navigator>
+    <GlobalSearchProvider>
+      <GlobalSearch
+        navigateToGroup={navigateToGroup}
+        navigateToChannel={navigateToChannel}
+      />
+      <Drawer.Navigator
+        drawerContent={(props: DrawerContentComponentProps) => {
+          return <DrawerContent {...props} />;
+        }}
+        initialRouteName="Home"
+        screenOptions={{
+          drawerType: 'permanent',
+          headerShown: false,
+          drawerStyle: {
+            width: 48,
+            backgroundColor: getVariableValue(useTheme().background),
+            borderRightColor: getVariableValue(useTheme().border),
+          },
+        }}
+      >
+        <Drawer.Screen name="Home" component={HomeNavigator} />
+        <Drawer.Screen name="Activity" component={ActivityScreen} />
+        <Drawer.Screen name="Contacts" component={ProfileScreenNavigator} />
+      </Drawer.Navigator>
+    </GlobalSearchProvider>
   );
 };

packages/ui/src/components/BareChatInput/index.tsx

@@ -36,6 +36,7 @@ import {
   UploadedImageAttachment,
   useAttachmentContext,
 } from '../../contexts';
+import { useGlobalSearch } from '../../contexts/globalSearch';
 import { DEFAULT_MESSAGE_INPUT_HEIGHT } from '../MessageInput';
 import { AttachmentPreviewList } from '../MessageInput/AttachmentPreviewList';
 import {
@@ -642,10 +643,35 @@ export default function BareChatInput({
     }
   };
 
+  const { setIsOpen } = useGlobalSearch();
+
   const handleBlur = useCallback(() => {
     setShouldBlur(true);
   }, [setShouldBlur]);
 
+  const handleKeyPress = useCallback(
+    (e: any) => {
+      const keyEvent = e.nativeEvent as unknown as KeyboardEvent;
+      if (!isWeb) return;
+
+      if (
+        (keyEvent.metaKey || keyEvent.ctrlKey) &&
+        keyEvent.key.toLowerCase() === 'k'
+      ) {
+        e.preventDefault();
+        inputRef.current?.blur();
+        setIsOpen(true);
+        return;
+      }
+
+      if (keyEvent.key === 'Enter' && !keyEvent.shiftKey) {
+        e.preventDefault();
+        handleSend();
+      }
+    },
+    [setIsOpen, handleSend]
+  );
+
   return (
     <MessageInputContainer
       onPressSend={handleSend}
@@ -682,15 +708,7 @@ export default function BareChatInput({
           onChange={isWeb ? adjustTextInputSize : undefined}
           onLayout={isWeb ? adjustTextInputSize : undefined}
           onBlur={handleBlur}
-          onKeyPress={(e) => {
-            if (isWeb && e.nativeEvent.key === 'Enter') {
-              const keyEvent = e.nativeEvent as unknown as KeyboardEvent;
-              if (!keyEvent.shiftKey) {
-                e.preventDefault();
-                handleSend();
-              }
-            }
-          }}
+          onKeyPress={handleKeyPress}
           multiline
           placeholder={placeholder}
           {...(!isWeb ? placeholderTextColor : {})}

packages/ui/src/components/ChatList.tsx

@@ -31,7 +31,7 @@ import { Tabs } from './Tabs';
 export type TabName = 'all' | 'groups' | 'messages';
 
 type SectionHeaderData = { type: 'sectionHeader'; title: string };
-type ChatListItemData = db.Chat | SectionHeaderData;
+export type ChatListItemData = db.Chat | SectionHeaderData;
 
 export const ChatList = React.memo(function ChatListComponent({
   pinned,
@@ -187,15 +187,15 @@ export const ChatList = React.memo(function ChatListComponent({
   );
 });
 
-function getItemType(item: ChatListItemData) {
+export function getItemType(item: ChatListItemData) {
   return isSectionHeader(item) ? 'sectionHeader' : item.type;
 }
 
-function isSectionHeader(data: ChatListItemData): data is SectionHeaderData {
+export function isSectionHeader(data: ChatListItemData): data is SectionHeaderData {
   return 'type' in data && data.type === 'sectionHeader';
 }
 
-function getChatKey(chatItem: ChatListItemData) {
+export function getChatKey(chatItem: ChatListItemData) {
   if (!chatItem || typeof chatItem !== 'object') {
     return 'invalid-item';
   }
@@ -309,7 +309,7 @@ const ChatListSearch = React.memo(function ChatListSearchComponent({
   );
 });
 
-function useFilteredChats({
+export function useFilteredChats({
   pinned,
   unpinned,
   pending,

packages/ui/src/components/Form/inputs.tsx

@@ -304,40 +304,41 @@ interface TextInputWithIconAndButtonProps
 }
 
 export const TextInputWithIconAndButton = React.memo(
-  function TextInputWithIconAndButtonRaw({
-    icon,
-    buttonText,
-    onButtonPress,
-    ...textInputProps
-  }: TextInputWithIconAndButtonProps) {
-    return (
-      <XStack
-        borderWidth={1}
-        borderColor="$border"
-        borderRadius="$l"
-        paddingHorizontal="$xl"
-        alignItems="center"
-        gap="$l"
-      >
-        <Icon type={icon} customSize={['$2xl', '$2xl']} />
-        <TextInput
-          paddingLeft={0}
-          borderWidth={0}
-          borderRadius={0}
-          flex={1}
-          {...textInputProps}
-        />
-        <Button
-          padding="$l"
-          onPress={onButtonPress}
-          backgroundColor="$secondaryBackground"
-          marginLeft="$-2xl"
+  React.forwardRef<RNTextInput, TextInputWithIconAndButtonProps>(
+    function TextInputWithIconAndButtonRaw(
+      { icon, buttonText, onButtonPress, ...textInputProps },
+      ref
+    ) {
+      return (
+        <XStack
+          borderWidth={1}
+          borderColor="$border"
+          borderRadius="$l"
+          paddingHorizontal="$xl"
+          alignItems="center"
+          gap="$l"
         >
-          <Button.Text size="$label/m">{buttonText}</Button.Text>
-        </Button>
-      </XStack>
-    );
-  }
+          <Icon type={icon} customSize={['$2xl', '$2xl']} />
+          <TextInput
+            paddingLeft={0}
+            borderWidth={0}
+            borderRadius={0}
+            flex={1}
+            ref={ref}
+            {...textInputProps}
+          />
+          <Button
+            padding="$l"
+            onPress={onButtonPress}
+            backgroundColor="$secondaryBackground"
+            marginLeft="$-2xl"
+          >
+            <Button.Text size="$label/m">{buttonText}</Button.Text>
+          </Button>
+        </XStack>
+      );
+    }
+  )
 );
 
 // Toggle group