Add context menu for apps (fav,settings,uninstall)

1 files changed, 30 insertions, 19 deletions

diff --git a/src/components/Favorites.tsx b/src/components/Favorites.tsx
index 85ab3c2..c2adae7 100644
--- a/src/components/Favorites.tsx
+++ b/src/components/Favorites.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useMemo} from 'react';
+import React, {useCallback, useEffect, useMemo} from 'react';
 import {Text, TouchableOpacity, View} from 'react-native';
 import {AppDetail} from 'react-native-launcher-kit/typescript/Interfaces/InstalledApps';
 import {useFavorites} from '../hooks/useFavorites';
@@ -8,9 +8,13 @@ import DraggableFlatList, {
   ShadowDecorator,
 } from 'react-native-draggable-flatlist';
 import Icon from 'react-native-vector-icons/MaterialIcons';
+import {AppMenu} from './AppMenu';
 
-export const Favorites: React.FC<{apps: AppDetail[]}> = ({apps}) => {
-  const {favoriteAppNames, setFavorites} = useFavorites();
+export const Favorites: React.FC<{apps: AppDetail[]; active: boolean}> = ({
+  apps,
+  active,
+}) => {
+  const {favoriteAppNames, setFavorites, refreshFavorites} = useFavorites();
 
   const appByName = useMemo(
     () => Object.fromEntries(apps.map((app) => [app.packageName, app])),
@@ -29,8 +33,13 @@ export const Favorites: React.FC<{apps: AppDetail[]}> = ({apps}) => {
     [setFavorites],
   );
 
+  useEffect(() => {
+    if (!active) return;
+    refreshFavorites();
+  }, [active, refreshFavorites]);
+
   return (
-    <View className="px-4">
+    <View className="px-4 py-1">
       <DraggableFlatList
         data={favoriteApps}
         onDragEnd={onDragEnd}
@@ -38,24 +47,26 @@ export const Favorites: React.FC<{apps: AppDetail[]}> = ({apps}) => {
         renderItem={({item: app, drag, isActive}) => (
           <ShadowDecorator>
             <OpacityDecorator>
-              <View
-                className={`py-2 px-2 flex-row w-full ${
-                  isActive ? 'bg-gray-200 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="#aaa" />
-                  </View>
-                </TouchableOpacity>
-              </View>
+              <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>
             </OpacityDecorator>
           </ShadowDecorator>
         )}
-        renderPlaceholder={() => <View className="flex-1 bg-gray-200" />}
+        renderPlaceholder={() => <View className="flex-1 bg-gray-950" />}
       />
     </View>
   );