From 202feb1f411474753015ecf7a10ef5179695a7ec Mon Sep 17 00:00:00 2001
From: nyagami <hoangquan05112002@gmail.com>
Date: Sun, 10 Mar 2024 00:23:34 +0700
Subject: [PATCH] Fix chapters logic & Rework Plugins management (UI) (#993)

* fix: not download/remove local chapters

* fix: deleteChapters callback

* remove plugin id: no sense fot user

* rework plugin management
---
 src/hooks/persisted/useNovel.ts               |   2 +-
 src/hooks/persisted/usePlugins.ts             |  45 +-
 src/screens/browse/BrowseScreen.tsx           | 101 +---
 src/screens/browse/components/BrowseTabs.tsx  | 430 ++++++++++++++++++
 src/screens/browse/components/PluginCard.tsx  | 177 -------
 .../browse/components/PluginSection.tsx       | 135 ------
 src/screens/novel/NovelScreen.tsx             |   4 +-
 7 files changed, 463 insertions(+), 431 deletions(-)
 create mode 100644 src/screens/browse/components/BrowseTabs.tsx
 delete mode 100644 src/screens/browse/components/PluginCard.tsx
 delete mode 100644 src/screens/browse/components/PluginSection.tsx

diff --git a/src/hooks/persisted/useNovel.ts b/src/hooks/persisted/useNovel.ts
index cb00f6bcb..df59a6f2f 100644
--- a/src/hooks/persisted/useNovel.ts
+++ b/src/hooks/persisted/useNovel.ts
@@ -312,7 +312,7 @@ export const useNovel = (novelPath: string, pluginId: string) => {
         });
       }
     },
-    [novel],
+    [novel, chapters],
   );
 
   const getNovel = useCallback(async () => {
diff --git a/src/hooks/persisted/usePlugins.ts b/src/hooks/persisted/usePlugins.ts
index b522fb16b..0455db005 100644
--- a/src/hooks/persisted/usePlugins.ts
+++ b/src/hooks/persisted/usePlugins.ts
@@ -130,35 +130,34 @@ export default function usePlugins() {
   };
 
   const uninstallPlugin = (plugin: PluginItem) => {
-    return _uninstall(plugin).then(() => {
-      if (lastUsedPlugin?.id === plugin.id) {
-        MMKVStorage.delete(LAST_USED_PLUGIN);
-      }
-      const installedPlugins =
-        getMMKVObject<PluginItem[]>(INSTALLED_PLUGINS) || [];
-      const availablePlugins =
-        getMMKVObject<PluginsMap>(AVAILABLE_PLUGINS) || ({} as PluginsMap);
+    if (lastUsedPlugin?.id === plugin.id) {
+      MMKVStorage.delete(LAST_USED_PLUGIN);
+    }
+    const installedPlugins =
+      getMMKVObject<PluginItem[]>(INSTALLED_PLUGINS) || [];
+    const availablePlugins =
+      getMMKVObject<PluginsMap>(AVAILABLE_PLUGINS) || ({} as PluginsMap);
 
-      // safe
-      if (!availablePlugins[plugin.lang]?.some(_plg => _plg.id === plugin.id)) {
-        availablePlugins[plugin.lang] = [
-          ...(availablePlugins[plugin.lang] || []),
-          plugin,
-        ];
-        setMMKVObject(AVAILABLE_PLUGINS, availablePlugins);
-      }
-      setMMKVObject(
-        INSTALLED_PLUGINS,
-        installedPlugins.filter(plg => plg.id !== plugin.id),
-      );
-      filterPlugins(languagesFilter);
-    });
+    // safe
+    if (!availablePlugins[plugin.lang]?.some(_plg => _plg.id === plugin.id)) {
+      availablePlugins[plugin.lang] = [
+        ...(availablePlugins[plugin.lang] || []),
+        plugin,
+      ];
+      setMMKVObject(AVAILABLE_PLUGINS, availablePlugins);
+    }
+    setMMKVObject(
+      INSTALLED_PLUGINS,
+      installedPlugins.filter(plg => plg.id !== plugin.id),
+    );
+    filterPlugins(languagesFilter);
+    return _uninstall(plugin).then(() => {});
   };
 
   const updatePlugin = (plugin: PluginItem) => {
     return _update(plugin).then(_plg => {
       if (plugin.version === _plg?.version) {
-        throw new Error(getString('browseScreen.tryAgain'));
+        throw new Error('No update found!');
       }
       if (_plg) {
         const installedPlugins =
diff --git a/src/screens/browse/BrowseScreen.tsx b/src/screens/browse/BrowseScreen.tsx
index 92a722992..279b2c562 100644
--- a/src/screens/browse/BrowseScreen.tsx
+++ b/src/screens/browse/BrowseScreen.tsx
@@ -4,41 +4,17 @@ import { TabView, TabBar } from 'react-native-tab-view';
 import color from 'color';
 
 import { useSearch } from '@hooks';
-import { useBrowseSettings, usePlugins, useTheme } from '@hooks/persisted';
+import { usePlugins, useTheme } from '@hooks/persisted';
 import { getString } from '@strings/translations';
 
-import { Language } from '@utils/constants/languages';
 import { EmptyView, SearchbarV2 } from '@components';
 import { BrowseScreenProps } from '@navigators/types';
-import { PluginsMap } from '@hooks/persisted/usePlugins';
-import PluginSection from './components/PluginSection';
+import { AvailableTab, InstalledTab } from './components/BrowseTabs';
 
 const BrowseScreen = ({ navigation }: BrowseScreenProps) => {
   const theme = useTheme();
   const { searchText, setSearchText, clearSearchbar } = useSearch();
-  const {
-    filteredAvailablePlugins,
-    filteredInstalledPlugins,
-    languagesFilter,
-    lastUsedPlugin,
-  } = usePlugins();
-
-  const searchedInstalledPlugins = useMemo(() => {
-    return filteredInstalledPlugins.filter(plg =>
-      plg.name.toLocaleLowerCase().includes(searchText.toLocaleLowerCase()),
-    );
-  }, [searchText, filteredInstalledPlugins]);
-
-  const searchedAvailablePlugins = useMemo(() => {
-    return languagesFilter.reduce((pre, cur) => {
-      pre[cur] = filteredAvailablePlugins[cur]?.filter(plg =>
-        plg.name.toLocaleLowerCase().includes(searchText.toLocaleLowerCase()),
-      );
-      return pre;
-    }, {} as PluginsMap);
-  }, [searchText, filteredAvailablePlugins]);
-
-  const { showMyAnimeList, showAniList } = useBrowseSettings();
+  const { languagesFilter } = usePlugins();
 
   const searchbarActions = useMemo(
     () => [
@@ -58,58 +34,6 @@ const BrowseScreen = ({ navigation }: BrowseScreenProps) => {
     [],
   );
 
-  const availableSections = useMemo(() => {
-    const list = [];
-    if (searchText) {
-      list.push({
-        header: getString('common.searchResults'),
-        data: [],
-      });
-      languagesFilter.forEach(lang => {
-        const plugins = searchedAvailablePlugins[lang as Language];
-        if (plugins?.length) {
-          list.push({
-            header: lang,
-            data: plugins,
-          });
-        }
-      });
-    } else {
-      languagesFilter.forEach(lang => {
-        const plugins = filteredAvailablePlugins[lang as Language];
-        if (plugins?.length) {
-          list.push({
-            header: lang,
-            data: plugins,
-          });
-        }
-      });
-    }
-    return list;
-  }, [searchedAvailablePlugins]);
-
-  const installedSections = useMemo(() => {
-    const list = [];
-    if (searchText) {
-      list.push({
-        header: getString('common.searchResults'),
-        data: searchedInstalledPlugins,
-      });
-    } else if (filteredInstalledPlugins.length) {
-      if (lastUsedPlugin) {
-        list.push({
-          header: getString('browseScreen.lastUsed'),
-          data: [lastUsedPlugin],
-        });
-      }
-      list.push({
-        header: getString('browseScreen.installedPlugins'),
-        data: filteredInstalledPlugins,
-      });
-    }
-    return list;
-  }, [lastUsedPlugin, searchedInstalledPlugins]);
-
   const [index, setIndex] = React.useState(0);
   const [routes] = React.useState([
     { key: 'installedRoute', title: getString('browseScreen.installed') },
@@ -141,23 +65,13 @@ const BrowseScreen = ({ navigation }: BrowseScreenProps) => {
           }
           switch (route.key) {
             case 'availableRoute':
-              return (
-                <PluginSection
-                  sections={availableSections}
-                  installedTab={false}
-                  theme={theme}
-                  navigation={navigation}
-                />
-              );
+              return <AvailableTab theme={theme} searchText={searchText} />;
             default:
               return (
-                <PluginSection
-                  sections={installedSections}
-                  installedTab={true}
-                  showMyAnimeList={showMyAnimeList}
-                  showAnilist={showAniList}
-                  theme={theme}
+                <InstalledTab
                   navigation={navigation}
+                  theme={theme}
+                  searchText={searchText}
                 />
               );
           }
@@ -182,6 +96,7 @@ const BrowseScreen = ({ navigation }: BrowseScreenProps) => {
             android_ripple={{ color: theme.rippleColor }}
           />
         )}
+        swipeEnabled={false}
       />
     </>
   );
diff --git a/src/screens/browse/components/BrowseTabs.tsx b/src/screens/browse/components/BrowseTabs.tsx
new file mode 100644
index 000000000..61b17d599
--- /dev/null
+++ b/src/screens/browse/components/BrowseTabs.tsx
@@ -0,0 +1,430 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import {
+  Pressable,
+  Image,
+  View,
+  Text,
+  StyleSheet,
+  SectionList,
+  RefreshControl,
+  ListRenderItem,
+} from 'react-native';
+import { useBrowseSettings, usePlugins } from '@hooks/persisted';
+import { PluginItem } from '@plugins/types';
+import {
+  FlashList,
+  ListRenderItem as FlashListRenderItem,
+  ListRenderItemInfo,
+} from '@shopify/flash-list';
+import { coverPlaceholderColor } from '@theme/colors';
+import { ThemeColors } from '@theme/types';
+import { Swipeable } from 'react-native-gesture-handler';
+import { languages } from '@utils/constants/languages';
+import { getString } from '@strings/translations';
+import { BrowseScreenProps } from '@navigators/types';
+import { Button, IconButtonV2 } from '@components';
+import TrackerCard from '../discover/TrackerCard';
+import { showToast } from '@utils/showToast';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+interface AvailableTabProps {
+  searchText: string;
+  theme: ThemeColors;
+}
+
+interface InstalledTabProps {
+  navigation: BrowseScreenProps['navigation'];
+  theme: ThemeColors;
+  searchText: string;
+}
+
+export function InstalledTab({
+  navigation,
+  theme,
+  searchText,
+}: InstalledTabProps) {
+  const {
+    filteredInstalledPlugins,
+    lastUsedPlugin,
+    setLastUsedPlugin,
+    uninstallPlugin,
+    updatePlugin,
+  } = usePlugins();
+  const { showMyAnimeList, showAniList } = useBrowseSettings();
+  const navigateToSource = useCallback(
+    (plugin: PluginItem, showLatestNovels?: boolean) => {
+      navigation.navigate('SourceScreen', {
+        pluginId: plugin.id,
+        pluginName: plugin.name,
+        site: plugin.site,
+        showLatestNovels,
+      });
+      setLastUsedPlugin(plugin);
+    },
+    [],
+  );
+
+  const searchedPlugins = useMemo(() => {
+    if (searchText) {
+      return filteredInstalledPlugins.filter(plg =>
+        plg.name.toLocaleLowerCase().includes(searchText.toLocaleLowerCase()),
+      );
+    } else {
+      return filteredInstalledPlugins;
+    }
+  }, [searchText, filteredInstalledPlugins]);
+
+  const renderItem: FlashListRenderItem<PluginItem> = ({ item }) => {
+    return (
+      <Swipeable
+        renderLeftActions={(progress, dragX, ref) => {
+          return (
+            <View
+              style={[
+                styles.buttonGroup,
+                { backgroundColor: theme.surfaceVariant },
+              ]}
+            >
+              <IconButtonV2
+                name="update"
+                size={22}
+                color={theme.onSurfaceVariant}
+                onPress={() => {
+                  ref.close();
+                  updatePlugin(item)
+                    .then(version =>
+                      showToast(
+                        getString('browseScreen.updatedTo', { version }),
+                      ),
+                    )
+                    .catch((error: Error) => showToast(error.message));
+                }}
+                theme={theme}
+              />
+              <IconButtonV2
+                name="earth"
+                size={22}
+                color={theme.onSurfaceVariant}
+                onPress={() => {
+                  ref.close();
+                  navigation.navigate('WebviewScreen', {
+                    name: item.name,
+                    url: item.site,
+                    pluginId: item.id,
+                  });
+                }}
+                theme={theme}
+              />
+            </View>
+          );
+        }}
+        renderRightActions={(progress, dragX, ref) => (
+          <View style={[styles.buttonGroup, { backgroundColor: theme.error }]}>
+            <IconButtonV2
+              name="delete"
+              size={22}
+              color={theme.onError}
+              onPress={() => {
+                ref.close();
+                uninstallPlugin(item).then(() =>
+                  showToast(
+                    getString('browseScreen.uninstalledPlugin', {
+                      name: item.name,
+                    }),
+                  ),
+                );
+              }}
+              theme={theme}
+            />
+          </View>
+        )}
+      >
+        <Pressable
+          style={[styles.container, { backgroundColor: theme.surface }]}
+          android_ripple={{ color: theme.rippleColor }}
+          onPress={() => navigateToSource(item)}
+        >
+          <View style={{ flexDirection: 'row' }}>
+            <Image source={{ uri: item.iconUrl }} style={styles.icon} />
+            <View style={styles.details}>
+              <Text
+                numberOfLines={1}
+                style={[
+                  {
+                    color: item.hasUpdate
+                      ? theme.onSurfaceDisabled
+                      : theme.onSurface,
+                  },
+                  styles.name,
+                ]}
+              >
+                {item.name}
+              </Text>
+              <Text
+                numberOfLines={1}
+                style={[{ color: theme.onSurfaceVariant }, styles.addition]}
+              >
+                {`${languages[item.lang]} - ${item.version}`}
+              </Text>
+            </View>
+          </View>
+          <Button
+            title={getString('browseScreen.latest')}
+            textColor={theme.primary}
+            onPress={() => navigateToSource(item, true)}
+          />
+        </Pressable>
+      </Swipeable>
+    );
+  };
+
+  return (
+    <FlashList
+      estimatedItemSize={64}
+      data={searchedPlugins}
+      extraData={theme}
+      renderItem={renderItem}
+      removeClippedSubviews={true}
+      showsVerticalScrollIndicator={false}
+      ListHeaderComponent={
+        <>
+          {showMyAnimeList || showAniList ? (
+            <>
+              <Text
+                style={[styles.listHeader, { color: theme.onSurfaceVariant }]}
+              >
+                {getString('browseScreen.discover')}
+              </Text>
+              {showAniList ? (
+                <TrackerCard
+                  theme={theme}
+                  icon={require('../../../../assets/anilist.png')}
+                  trackerName="Anilist"
+                  onPress={() => navigation.navigate('BrowseAL')}
+                />
+              ) : null}
+              {showMyAnimeList ? (
+                <TrackerCard
+                  theme={theme}
+                  icon={require('../../../../assets/mal.png')}
+                  trackerName="MyAnimeList"
+                  onPress={() => navigation.navigate('BrowseMal')}
+                />
+              ) : null}
+            </>
+          ) : null}
+          {lastUsedPlugin ? (
+            <>
+              <Text
+                style={[styles.listHeader, { color: theme.onSurfaceVariant }]}
+              >
+                {getString('browseScreen.lastUsed')}
+              </Text>
+              {renderItem({
+                item: lastUsedPlugin,
+                index: 0,
+              } as ListRenderItemInfo<PluginItem>)}
+            </>
+          ) : null}
+          <Text style={[styles.listHeader, { color: theme.onSurfaceVariant }]}>
+            {getString('browseScreen.installedPlugins')}
+          </Text>
+        </>
+      }
+    />
+  );
+}
+
+interface AvailablePluginCardProps {
+  plugin: PluginItem;
+  theme: ThemeColors;
+  installPlugin: (plugin: PluginItem) => Promise<void>;
+}
+
+const AvailablePluginCard = ({
+  plugin,
+  theme,
+  installPlugin,
+}: AvailablePluginCardProps) => {
+  const ratio = useSharedValue(1);
+  const imageStyles = useAnimatedStyle(() => ({
+    height: ratio.value * 40,
+  }));
+  const viewStyles = useAnimatedStyle(() => ({
+    height: ratio.value * 64,
+    paddingVertical: ratio.value * 12,
+  }));
+  const textStyles = useAnimatedStyle(() => ({
+    lineHeight: ratio.value * 20,
+  }));
+  return (
+    <Animated.View
+      style={[styles.container, { backgroundColor: theme.surface }, viewStyles]}
+    >
+      <Animated.View style={{ flexDirection: 'row' }}>
+        <Animated.Image
+          source={{ uri: plugin.iconUrl }}
+          style={[styles.icon, imageStyles]}
+        />
+        <Animated.View style={styles.details}>
+          <Animated.Text
+            numberOfLines={1}
+            style={[
+              {
+                color: theme.onSurface,
+              },
+              styles.name,
+              textStyles,
+            ]}
+          >
+            {plugin.name}
+          </Animated.Text>
+          <Animated.Text
+            numberOfLines={1}
+            style={[
+              { color: theme.onSurfaceVariant },
+              styles.addition,
+              textStyles,
+            ]}
+          >
+            {`${languages[plugin.lang]} - ${plugin.version}`}
+          </Animated.Text>
+        </Animated.View>
+      </Animated.View>
+      <IconButtonV2
+        name="download"
+        color={theme.primary}
+        onPress={() => {
+          ratio.value = withTiming(0, { duration: 500 });
+          installPlugin(plugin)
+            .then(() => {
+              showToast(
+                getString('browseScreen.installedPlugin', {
+                  name: plugin.name,
+                }),
+              );
+            })
+            .catch((error: Error) => {
+              showToast(error.message);
+              ratio.value = 1;
+            });
+        }}
+        size={22}
+        theme={theme}
+      />
+    </Animated.View>
+  );
+};
+
+export function AvailableTab({ searchText, theme }: AvailableTabProps) {
+  const [refreshing, setRefreshing] = useState(false);
+  const {
+    filteredAvailablePlugins,
+    languagesFilter,
+    refreshPlugins,
+    installPlugin,
+  } = usePlugins();
+
+  const sections = useMemo(() => {
+    const list = [];
+    for (const language of languagesFilter) {
+      if (filteredAvailablePlugins[language]) {
+        const plugins = filteredAvailablePlugins[language]?.filter(plg =>
+          plg.name.toLocaleLowerCase().includes(searchText.toLowerCase()),
+        );
+        if (plugins) {
+          list.push({
+            header: language,
+            data: plugins,
+          });
+        }
+      }
+    }
+    return list;
+  }, [searchText, filteredAvailablePlugins]);
+
+  const renderItem: ListRenderItem<PluginItem> = ({ item }) => {
+    return (
+      <AvailablePluginCard
+        plugin={item}
+        theme={theme}
+        installPlugin={installPlugin}
+      />
+    );
+  };
+
+  return (
+    <SectionList
+      sections={sections}
+      removeClippedSubviews={true}
+      refreshControl={
+        <RefreshControl
+          refreshing={refreshing}
+          onRefresh={() => {
+            setRefreshing(true);
+            refreshPlugins()
+              .finally(() => setRefreshing(false))
+              .catch(e => {
+                showToast(e);
+              });
+          }}
+          colors={[theme.onPrimary]}
+          progressBackgroundColor={theme.primary}
+        />
+      }
+      renderItem={renderItem}
+      renderSectionHeader={({ section: { header, data } }) =>
+        data.length ? (
+          <Text style={[styles.listHeader, { color: theme.onSurfaceVariant }]}>
+            {header}
+          </Text>
+        ) : null
+      }
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    justifyContent: 'space-between',
+  },
+  listHeader: {
+    fontSize: 14,
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+  },
+  icon: {
+    height: 40,
+    width: 40,
+    borderRadius: 4,
+    backgroundColor: coverPlaceholderColor,
+  },
+  details: {
+    marginLeft: 16,
+  },
+  addition: {
+    fontSize: 12,
+    lineHeight: 20,
+  },
+  name: {
+    fontWeight: 'bold',
+    lineHeight: 20,
+  },
+  buttonGroup: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+  },
+  spinner: {
+    marginRight: 12,
+    marginLeft: -1,
+  },
+});
diff --git a/src/screens/browse/components/PluginCard.tsx b/src/screens/browse/components/PluginCard.tsx
deleted file mode 100644
index a17dca1a0..000000000
--- a/src/screens/browse/components/PluginCard.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-import React, { useState } from 'react';
-import {
-  StyleSheet,
-  Text,
-  View,
-  Pressable,
-  ActivityIndicator,
-} from 'react-native';
-
-import { Button, IconButtonV2 } from '@components';
-
-import { coverPlaceholderColor } from '@theme/colors';
-import { ThemeColors } from '@theme/types';
-
-import { PluginItem } from '@plugins/types';
-import { Image } from 'react-native';
-import { showToast } from '@utils/showToast';
-import { getString } from '@strings/translations';
-import { languages } from '@utils/constants/languages';
-
-interface Props {
-  installed: boolean;
-  plugin: PluginItem;
-  theme: ThemeColors;
-  navigateToSource: (plugin: PluginItem, showLatestNovels?: boolean) => void;
-  installPlugin: (plugin: PluginItem) => Promise<void>;
-  uninstallPlugin: (plugin: PluginItem) => Promise<void>;
-  updatePlugin: (plugin: PluginItem) => Promise<string>;
-}
-
-const PluginCard: React.FC<Props> = ({
-  installed,
-  plugin,
-  navigateToSource,
-  theme,
-  installPlugin,
-  uninstallPlugin,
-  updatePlugin,
-}) => {
-  const [isLoading, setIsLoading] = useState(false);
-  return (
-    <>
-      <Pressable
-        style={styles.container}
-        onPress={() => installed && navigateToSource(plugin)}
-        android_ripple={{ color: theme.rippleColor }}
-        onLongPress={() => {
-          setIsLoading(true);
-          updatePlugin(plugin)
-            .then(version =>
-              showToast(getString('browseScreen.updatedTo', { version })),
-            )
-            .catch((error: Error) => showToast(error.message))
-            .finally(() => setIsLoading(false));
-        }}
-      >
-        <View style={[styles.flexRow]}>
-          <Image source={{ uri: plugin.iconUrl }} style={styles.icon} />
-          <View style={styles.details}>
-            <Text
-              numberOfLines={1}
-              style={[
-                {
-                  color: plugin.hasUpdate
-                    ? theme.onSurfaceDisabled
-                    : theme.onSurface,
-                },
-                styles.name,
-              ]}
-            >
-              {plugin.name}
-            </Text>
-            <Text
-              numberOfLines={1}
-              style={[{ color: theme.onSurfaceVariant }, styles.addition]}
-            >
-              {`ID: ${plugin.id}`}
-            </Text>
-            <Text
-              numberOfLines={1}
-              style={[{ color: theme.onSurfaceVariant }, styles.addition]}
-            >
-              {`${languages[plugin.lang]} - ${plugin.version}`}
-            </Text>
-          </View>
-        </View>
-        <View style={styles.buttonGroup}>
-          {installed ? (
-            <Button
-              title={getString('browseScreen.latest')}
-              textColor={theme.primary}
-              onPress={() => navigateToSource(plugin, true)}
-            />
-          ) : null}
-          {!isLoading ? (
-            <IconButtonV2
-              name={installed ? 'delete' : 'download'}
-              size={22}
-              color={theme.primary}
-              onPress={() => {
-                setIsLoading(true);
-                if (installed) {
-                  uninstallPlugin(plugin)
-                    .then(() =>
-                      showToast(
-                        getString('browseScreen.uninstalledPlugin', {
-                          name: plugin.name,
-                        }),
-                      ),
-                    )
-                    .finally(() => setIsLoading(false));
-                } else {
-                  installPlugin(plugin)
-                    .then(() =>
-                      showToast(
-                        getString('browseScreen.installedPlugin', {
-                          name: plugin.name,
-                        }),
-                      ),
-                    )
-                    .catch((error: Error) => showToast(error.message))
-                    .finally(() => setIsLoading(false));
-                }
-              }}
-              theme={theme}
-            />
-          ) : (
-            <ActivityIndicator
-              color={theme.primary}
-              size={27}
-              style={styles.spinner}
-              renderToHardwareTextureAndroid={true}
-            />
-          )}
-        </View>
-      </Pressable>
-    </>
-  );
-};
-
-export default PluginCard;
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-  },
-  icon: {
-    height: 40,
-    width: 40,
-    borderRadius: 4,
-    backgroundColor: coverPlaceholderColor,
-  },
-  details: {
-    marginLeft: 16,
-  },
-  addition: {
-    fontSize: 12,
-  },
-  name: {
-    fontWeight: 'bold',
-  },
-  flexRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  buttonGroup: {
-    flexDirection: 'row',
-  },
-  spinner: {
-    marginRight: 12,
-    marginLeft: -1,
-  },
-});
diff --git a/src/screens/browse/components/PluginSection.tsx b/src/screens/browse/components/PluginSection.tsx
deleted file mode 100644
index 27a68358b..000000000
--- a/src/screens/browse/components/PluginSection.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-import React, { memo, useCallback, useState } from 'react';
-import { PluginItem } from '@plugins/types';
-import { getString } from '@strings/translations';
-import { ThemeColors } from '@theme/types';
-import { RefreshControl, SectionList, StyleSheet, Text } from 'react-native';
-import PluginCard from './PluginCard';
-import { usePlugins } from '@hooks/persisted';
-import { BrowseScreenProps } from '@navigators/types';
-import TrackerCard from '../discover/TrackerCard';
-import { showToast } from '@utils/showToast';
-
-interface PluginSectionProps {
-  sections: { header: string; data: PluginItem[] }[];
-  showMyAnimeList?: boolean;
-  showAnilist?: boolean;
-  installedTab: boolean;
-  theme: ThemeColors;
-  navigation: BrowseScreenProps['navigation'];
-}
-
-const PluginSection = ({
-  sections,
-  showMyAnimeList,
-  showAnilist,
-  installedTab,
-  theme,
-  navigation,
-}: PluginSectionProps) => {
-  const [refreshing, setRefreshing] = useState(false);
-  const {
-    refreshPlugins,
-    installPlugin,
-    uninstallPlugin,
-    updatePlugin,
-    setLastUsedPlugin,
-  } = usePlugins();
-  const navigateToSource = useCallback(
-    (plugin: PluginItem, showLatestNovels?: boolean) => {
-      navigation.navigate('SourceScreen', {
-        pluginId: plugin.id,
-        pluginName: plugin.name,
-        site: plugin.site,
-        showLatestNovels,
-      });
-      setLastUsedPlugin(plugin);
-    },
-    [],
-  );
-
-  return (
-    <SectionList
-      sections={sections}
-      ListHeaderComponent={
-        showMyAnimeList && installedTab ? (
-          <>
-            <Text
-              style={[styles.sectionHeader, { color: theme.onSurfaceVariant }]}
-            >
-              {getString('browseScreen.discover')}
-            </Text>
-            {showAnilist ? (
-              <TrackerCard
-                theme={theme}
-                icon={require('../../../../assets/anilist.png')}
-                trackerName="Anilist"
-                onPress={() => navigation.navigate('BrowseAL')}
-              />
-            ) : null}
-            {showMyAnimeList ? (
-              <TrackerCard
-                theme={theme}
-                icon={require('../../../../assets/mal.png')}
-                trackerName="MyAnimeList"
-                onPress={() => navigation.navigate('BrowseMal')}
-              />
-            ) : null}
-          </>
-        ) : null
-      }
-      keyExtractor={(_, index) => index.toString() + installedTab}
-      renderSectionHeader={({ section: { header, data } }) => (
-        <Text
-          style={[
-            styles.sectionHeader,
-            {
-              color: data.length === 0 ? theme.primary : theme.onSurfaceVariant,
-            },
-          ]}
-        >
-          {header}
-        </Text>
-      )}
-      renderItem={({ item }) => (
-        <PluginCard
-          installed={installedTab}
-          plugin={item}
-          navigateToSource={navigateToSource}
-          installPlugin={installPlugin}
-          uninstallPlugin={uninstallPlugin}
-          updatePlugin={updatePlugin}
-          theme={theme}
-        />
-      )}
-      refreshControl={
-        installedTab ? (
-          <></>
-        ) : (
-          <RefreshControl
-            refreshing={refreshing}
-            onRefresh={() => {
-              setRefreshing(true);
-              refreshPlugins()
-                .finally(() => setRefreshing(false))
-                .catch(e => {
-                  showToast(e);
-                });
-            }}
-            colors={[theme.onPrimary]}
-            progressBackgroundColor={theme.primary}
-          />
-        )
-      }
-    />
-  );
-};
-
-export default memo(PluginSection);
-
-const styles = StyleSheet.create({
-  sectionHeader: {
-    fontSize: 14,
-    paddingVertical: 8,
-    paddingHorizontal: 16,
-  },
-});
diff --git a/src/screens/novel/NovelScreen.tsx b/src/screens/novel/NovelScreen.tsx
index bcd68cfc8..394bf1d38 100644
--- a/src/screens/novel/NovelScreen.tsx
+++ b/src/screens/novel/NovelScreen.tsx
@@ -154,7 +154,7 @@ const Novel = ({ route, navigation }: NovelScreenProps) => {
   const actions = useMemo(() => {
     const list = [];
 
-    if (selected.some(obj => !obj.isDownloaded)) {
+    if (!novel?.isLocal && selected.some(obj => !obj.isDownloaded)) {
       list.push({
         icon: 'download-outline',
         onPress: () => {
@@ -168,7 +168,7 @@ const Novel = ({ route, navigation }: NovelScreenProps) => {
         },
       });
     }
-    if (selected.some(obj => obj.isDownloaded)) {
+    if (!novel?.isLocal && selected.some(obj => obj.isDownloaded)) {
       list.push({
         icon: 'trash-can-outline',
         onPress: () => {