Add autofocus when clear button is clicked + ui changes

2 files changed, 18 insertions, 6 deletions

diff --git a/src/components/AppMenu.tsx b/src/components/AppMenu.tsx
index 8938bb9..ebc6dae 100644
--- a/src/components/AppMenu.tsx
+++ b/src/components/AppMenu.tsx
@@ -78,6 +78,10 @@ export const AppMenu: React.FC<React.PropsWithChildren<{app: AppDetail}>> = ({
         <TouchableOpacity className="flex-1" onPress={closeContextMenu}>
           <View className="flex justify-center items-center h-full">
             <View className="bg-[#181818] border border-[#222] w-2/3">
+              <Text className="text-slate-500 text-xs text-center border-b border-slate-500">
+                {app.label}
+              </Text>
+
               {menuItems.map((menuItem) => (
                 <Pressable
                   key={menuItem.label}
diff --git a/src/screens/AppList.tsx b/src/screens/AppList.tsx
index 4ef5ec3..5af2c55 100644
--- a/src/screens/AppList.tsx
+++ b/src/screens/AppList.tsx
@@ -17,7 +17,7 @@ const AppListItem: React.FC<{app: AppDetail}> = React.memo(({app}) => {
   return (
     <AppMenu app={app}>
       <View className="p-2">
-        <Text className="text-md font-bold">{app.label}</Text>
+        <Text className="text-base">{app.label}</Text>
         <Text className="text-xs text-gray-600">{app.packageName}</Text>
       </View>
     </AppMenu>
@@ -29,7 +29,11 @@ export const AppList: React.FC<{active: boolean}> = React.memo(({active}) => {
   const textInputRef = useRef<TextInput>(null);
   const [searchText, setSearchText] = useState('');
 
-  const clearSearchInput = useStableCallback(() => setSearchText(''));
+  const clearSearchInput = useStableCallback(() => {
+    setSearchText('');
+    if (active)
+      TextInput.State.focusTextInput(textInputRef.current ?? undefined);
+  });
 
   const filteredApps = useMemo(() => {
     if (searchText === '') return apps;
@@ -45,8 +49,8 @@ export const AppList: React.FC<{active: boolean}> = React.memo(({active}) => {
 
   return (
     <View className="px-2">
-      <View className="flex justify-between flex-row items-center gap-2 px-2">
-        <Icon name="search" size={21} color="#555" className="py-2" />
+      <View className="flex justify-between flex-row items-center gap-2 px-2 border-b border-slate-800">
+        <Icon name="search" size={21} color="#666" className="py-2" />
         <TextInput
           ref={textInputRef}
           autoFocus={false}
@@ -59,11 +63,15 @@ export const AppList: React.FC<{active: boolean}> = React.memo(({active}) => {
           underlayColor="#222"
           onPress={clearSearchInput}
           className="p-2">
-          <Icon name="close" size={21} color="#aaa" />
+          <Icon name="close" size={17} color="#666" />
         </TouchableHighlight>
       </View>
 
-      <ScrollView contentInsetAdjustmentBehavior="automatic">
+      <ScrollView
+        contentInsetAdjustmentBehavior="automatic"
+        keyboardShouldPersistTaps="always"
+        keyboardDismissMode="on-drag"
+        className="pt-2">
         <View className="flex-1">
           {filteredApps.map((app, index) => (
             <AppListItem app={app} key={app.packageName + index} />