From 686156ad6e44c17609e7903f7d99e12c8a940af6 Mon Sep 17 00:00:00 2001
From: Akshay Nair <phenax5@gmail.com>
Date: Sat, 5 Oct 2024 22:14:23 +0530
Subject: Add autofocus when clear button is clicked + ui changes

---
 android/gradle/wrapper/gradle-wrapper.properties |   2 +-
 bun.lockb                                        | Bin 399052 -> 475552 bytes
 package.json                                     |  18 +++++++++---------
 src/components/AppMenu.tsx                       |   4 ++++
 src/screens/AppList.tsx                          |  20 ++++++++++++++------
 5 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/android/gradle/wrapper/gradle-wrapper.properties b/android/gradle/wrapper/gradle-wrapper.properties
index 2ea3535..e7646de 100644
--- a/android/gradle/wrapper/gradle-wrapper.properties
+++ b/android/gradle/wrapper/gradle-wrapper.properties
@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.6-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.7-all.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME
diff --git a/bun.lockb b/bun.lockb
index 7ca9ec0..f639efb 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 35311b7..b7280fc 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@angelkrak/react-native-intent-launcher": "^1.0.2",
-    "@react-native-async-storage/async-storage": "^1.23.1",
+    "@react-native-async-storage/async-storage": "^1.24.0",
     "jotai": "^2.10.0",
     "match-sorter": "^6.3.4",
     "nativewind": "^2.0.11",
@@ -26,19 +26,19 @@
     "tailwindcss": "3.3.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0",
-    "@babel/preset-env": "^7.20.0",
-    "@babel/runtime": "^7.20.0",
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.4",
+    "@babel/runtime": "^7.25.6",
     "@react-native/babel-preset": "0.74.83",
     "@react-native/eslint-config": "0.74.83",
     "@react-native/metro-config": "0.74.83",
     "@react-native/typescript-config": "0.74.83",
-    "@types/react": "^18.2.6",
+    "@types/react": "^18.3.10",
     "@types/react-native-vector-icons": "^6.4.18",
-    "@types/react-test-renderer": "^18.0.0",
-    "babel-jest": "^29.6.3",
-    "eslint": "^8.19.0",
-    "jest": "^29.6.3",
+    "@types/react-test-renderer": "^18.3.0",
+    "babel-jest": "^29.7.0",
+    "eslint": "^8.57.1",
+    "jest": "^29.7.0",
     "prettier": "2.8.8",
     "react-test-renderer": "18.2.0",
     "typescript": "5.0.4"
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} />
-- 
cgit v1.3.1