Finish up app menu + fix drag interaction

3 files changed, 61 insertions, 44 deletions

diff --git a/src/components/AppMenu.tsx b/src/components/AppMenu.tsx
index ec0d684..2319e73 100644
--- a/src/components/AppMenu.tsx
+++ b/src/components/AppMenu.tsx
@@ -2,7 +2,10 @@ import {Text, View, Modal, TouchableOpacity, Pressable} from 'react-native';
 import {AppDetail} from 'react-native-launcher-kit/typescript/Interfaces/InstalledApps';
 import {useFavorites} from '../hooks/useFavorites';
 import React, {useState} from 'react';
+// @ts-expect-error No declaration file
 import IntentLauncher from '@angelkrak/react-native-intent-launcher';
+import {TouchableHighlight} from 'react-native-gesture-handler';
+import {useStableCallback} from '../hooks/useStableCallback';
 
 export const AppMenu: React.FC<React.PropsWithChildren<{app: AppDetail}>> = ({
   app,
@@ -11,24 +14,26 @@ export const AppMenu: React.FC<React.PropsWithChildren<{app: AppDetail}>> = ({
   const [isOpen, setIsOpen] = useState(false);
   const {addToFavorites, isFavorite, removeFromFavorites} = useFavorites();
 
-  const menuPress = (fn: () => Promise<void> | void) => async () => {
+  const openContextMenu = useStableCallback(() => setIsOpen(true));
+  const closeContextMenu = useStableCallback(() => setIsOpen(false));
+
+  const onMenuItemPress = (fn: () => Promise<void> | void) => async () => {
+    closeContextMenu();
     await fn();
-    setIsOpen(false);
   };
-
   const menuItems = [
     isFavorite(app.packageName)
       ? {
           label: 'Remove from favorites',
-          onPress: menuPress(() => removeFromFavorites(app.packageName)),
+          onPress: onMenuItemPress(() => removeFromFavorites(app.packageName)),
         }
       : {
           label: 'Add to favorites',
-          onPress: menuPress(() => addToFavorites(app.packageName)),
+          onPress: onMenuItemPress(() => addToFavorites(app.packageName)),
         },
     {
       label: 'App info',
-      onPress: menuPress(() =>
+      onPress: onMenuItemPress(() =>
         IntentLauncher.startActivity({
           action: 'android.settings.APPLICATION_DETAILS_SETTINGS',
           data: 'package:' + app.packageName,
@@ -37,7 +42,7 @@ export const AppMenu: React.FC<React.PropsWithChildren<{app: AppDetail}>> = ({
     },
     {
       label: 'Uninstall',
-      onPress: menuPress(() =>
+      onPress: onMenuItemPress(() =>
         IntentLauncher.startActivity({
           action: 'android.intent.action.DELETE',
           data: 'package:' + app.packageName,
@@ -46,25 +51,33 @@ export const AppMenu: React.FC<React.PropsWithChildren<{app: AppDetail}>> = ({
     },
   ];
 
+  const openApp = useStableCallback(() =>
+    IntentLauncher.startAppByPackageName(app.packageName),
+  );
+
   return (
     <>
-      <TouchableOpacity onLongPress={() => setIsOpen(true)}>
+      <TouchableHighlight
+        activeOpacity={0.7}
+        underlayColor="#101010"
+        onPress={openApp}
+        onLongPress={openContextMenu}>
         {children}
-      </TouchableOpacity>
+      </TouchableHighlight>
 
       <Modal
         visible={isOpen}
         transparent={true}
         animationType="none"
-        onRequestClose={() => setIsOpen(false)}>
-        <TouchableOpacity className="flex-1" onPress={() => setIsOpen(false)}>
+        onRequestClose={closeContextMenu}>
+        <TouchableOpacity className="flex-1" onPress={closeContextMenu}>
           <View className="flex justify-center items-center h-full">
-            <View className="shadow-lg bg-gray-900 w-2/3">
+            <View className="bg-[#181818] border border-[#222] w-2/3">
               {menuItems.map((menuItem) => (
                 <Pressable
                   key={menuItem.label}
                   onPress={menuItem.onPress}
-                  className="py-3 px-4 border-b border-gray-800 last:border-b-0">
+                  className="py-3 px-4 border-b border-[#222] last:border-b-0 last:border-transparent">
                   <Text className="text-lg text-gray-300">
                     {menuItem.label}
                   </Text>
diff --git a/src/components/Clock.tsx b/src/components/Clock.tsx
index 619a31b..f41a298 100644
--- a/src/components/Clock.tsx
+++ b/src/components/Clock.tsx
@@ -1,7 +1,7 @@
 import React, {useEffect, useMemo, useState} from 'react';
 import {Text, View} from 'react-native';
 
-export const Clock: React.FC = () => {
+export const Clock: React.FC = React.memo(() => {
   const [date, setDate] = useState(() => new Date());
   useEffect(() => {
     const interval = setInterval(() => {
@@ -34,4 +34,4 @@ export const Clock: React.FC = () => {
       <Text className="text-lg">{dateText}</Text>
     </View>
   );
-};
+});
diff --git a/src/components/Favorites.tsx b/src/components/Favorites.tsx
index c2adae7..6ee99cb 100644
--- a/src/components/Favorites.tsx
+++ b/src/components/Favorites.tsx
@@ -9,12 +9,23 @@ import DraggableFlatList, {
 } from 'react-native-draggable-flatlist';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import {AppMenu} from './AppMenu';
+import {useInstalledApps} from '../hooks/useInstalledApps';
 
-export const Favorites: React.FC<{apps: AppDetail[]; active: boolean}> = ({
-  apps,
-  active,
-}) => {
-  const {favoriteAppNames, setFavorites, refreshFavorites} = useFavorites();
+const AppLabel: React.FC<{app: AppDetail}> = React.memo(({app}) => {
+  return (
+    <View className="flex-1">
+      <AppMenu app={app}>
+        <View className="py-3 px-2">
+          <Text className="text-lg">{app.label}</Text>
+        </View>
+      </AppMenu>
+    </View>
+  );
+});
+
+export const Favorites: React.FC<{active: boolean}> = (_) => {
+  const {apps} = useInstalledApps();
+  const {favoriteAppNames, setFavorites} = useFavorites();
 
   const appByName = useMemo(
     () => Object.fromEntries(apps.map((app) => [app.packageName, app])),
@@ -33,40 +44,33 @@ export const Favorites: React.FC<{apps: AppDetail[]; active: boolean}> = ({
     [setFavorites],
   );
 
-  useEffect(() => {
-    if (!active) return;
-    refreshFavorites();
-  }, [active, refreshFavorites]);
-
   return (
     <View className="px-4 py-1">
       <DraggableFlatList
         data={favoriteApps}
         onDragEnd={onDragEnd}
-        keyExtractor={(item) => item.packageName}
+        keyExtractor={(app) => app.packageName}
         renderItem={({item: app, drag, isActive}) => (
-          <ShadowDecorator>
+          <ShadowDecorator key={app.packageName}>
             <OpacityDecorator>
-              <AppMenu app={app}>
-                <View
-                  className={`py-3 px-2 flex-row w-full ${
-                    isActive ? 'bg-gray-950 opacity-60' : ''
-                  }`}>
-                  <Text className="text-lg flex-1">{app.label}</Text>
-                  <TouchableOpacity
-                    onLongPress={drag}
-                    disabled={isActive}
-                    delayLongPress={500}>
-                    <View className="py-1">
-                      <Icon name="drag-indicator" size={21} color="#444" />
-                    </View>
-                  </TouchableOpacity>
-                </View>
-              </AppMenu>
+              <View
+                className={`flex-row justify-stretch items-center ${
+                  isActive ? 'bg-[#181818] opacity-60' : ''
+                }`}>
+                <AppLabel app={app} />
+
+                <TouchableOpacity
+                  onLongPress={drag}
+                  disabled={isActive}
+                  hitSlop={10}
+                  className="p-3">
+                  <Icon name="drag-indicator" size={21} color="#444" />
+                </TouchableOpacity>
+              </View>
             </OpacityDecorator>
           </ShadowDecorator>
         )}
-        renderPlaceholder={() => <View className="flex-1 bg-gray-950" />}
+        renderPlaceholder={() => <View className="flex-1 bg-[#181818]" />}
       />
     </View>
   );