refactor(music): move storage clear options

app/(auth)/(tabs)/(home)/settings/music/page.tsx

@@ -1,13 +1,22 @@
 import { Ionicons } from "@expo/vector-icons";
-import { useMemo } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform, ScrollView, View } from "react-native";
 import { Switch } from "react-native-gesture-handler";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { toast } from "sonner-native";
 import { Text } from "@/components/common/Text";
 import { ListGroup } from "@/components/list/ListGroup";
 import { ListItem } from "@/components/list/ListItem";
 import { PlatformDropdown } from "@/components/PlatformDropdown";
+import { useHaptic } from "@/hooks/useHaptic";
+import { useNetworkAwareQueryClient } from "@/hooks/useNetworkAwareQueryClient";
+import {
+  clearCache,
+  clearPermanentDownloads,
+  getStorageStats,
+} from "@/providers/AudioStorage";
 import { useSettings } from "@/utils/atoms/settings";
 
 const CACHE_SIZE_OPTIONS = [
@@ -29,6 +38,40 @@ export default function MusicSettingsPage() {
   const insets = useSafeAreaInsets();
   const { settings, updateSettings, pluginSettings } = useSettings();
   const { t } = useTranslation();
+  const queryClient = useNetworkAwareQueryClient();
+  const successHapticFeedback = useHaptic("success");
+  const errorHapticFeedback = useHaptic("error");
+
+  const { data: musicCacheStats } = useQuery({
+    queryKey: ["musicCacheStats"],
+    queryFn: () => getStorageStats(),
+  });
+
+  const onClearMusicCacheClicked = useCallback(async () => {
+    try {
+      await clearCache();
+      queryClient.invalidateQueries({ queryKey: ["musicCacheStats"] });
+      queryClient.invalidateQueries({ queryKey: ["appSize"] });
+      successHapticFeedback();
+      toast.success(t("home.settings.storage.music_cache_cleared"));
+    } catch (_e) {
+      errorHapticFeedback();
+      toast.error(t("home.settings.toasts.error_deleting_files"));
+    }
+  }, [queryClient, successHapticFeedback, errorHapticFeedback, t]);
+
+  const onDeleteDownloadedSongsClicked = useCallback(async () => {
+    try {
+      await clearPermanentDownloads();
+      queryClient.invalidateQueries({ queryKey: ["musicCacheStats"] });
+      queryClient.invalidateQueries({ queryKey: ["appSize"] });
+      successHapticFeedback();
+      toast.success(t("home.settings.storage.downloaded_songs_deleted"));
+    } catch (_e) {
+      errorHapticFeedback();
+      toast.error(t("home.settings.toasts.error_deleting_files"));
+    }
+  }, [queryClient, successHapticFeedback, errorHapticFeedback, t]);
 
   const cacheSizeOptions = useMemo(
     () => [
@@ -171,6 +214,37 @@ export default function MusicSettingsPage() {
             </ListItem>
           </ListGroup>
         </View>
+
+        {!Platform.isTV && (
+          <View className='mt-4'>
+            <ListGroup
+              title={t("home.settings.storage.music_cache_title")}
+              description={
+                <Text className='text-[#8E8D91] text-xs'>
+                  {t("home.settings.storage.music_cache_description")}
+                </Text>
+              }
+            >
+              <ListItem
+                onPress={onClearMusicCacheClicked}
+                title={t("home.settings.storage.clear_music_cache")}
+                subtitle={t("home.settings.storage.music_cache_size", {
+                  size: (musicCacheStats?.cacheSize ?? 0).bytesToReadable(),
+                })}
+              />
+            </ListGroup>
+            <ListGroup>
+              <ListItem
+                textColor='red'
+                onPress={onDeleteDownloadedSongsClicked}
+                title={t("home.settings.storage.delete_all_downloaded_songs")}
+                subtitle={t("home.settings.storage.downloaded_songs_size", {
+                  size: (musicCacheStats?.permanentSize ?? 0).bytesToReadable(),
+                })}
+              />
+            </ListGroup>
+          </View>
+        )}
       </View>
     </ScrollView>
   );

components/settings/StorageSettings.tsx

@@ -1,17 +1,10 @@
 import { useQuery } from "@tanstack/react-query";
-import { useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform, View } from "react-native";
 import { toast } from "sonner-native";
 import { Text } from "@/components/common/Text";
 import { Colors } from "@/constants/Colors";
 import { useHaptic } from "@/hooks/useHaptic";
-import { useNetworkAwareQueryClient } from "@/hooks/useNetworkAwareQueryClient";
-import {
-  clearCache,
-  clearPermanentDownloads,
-  getStorageStats,
-} from "@/providers/AudioStorage";
 import { useDownload } from "@/providers/DownloadProvider";
 import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
@@ -19,7 +12,6 @@ import { ListItem } from "../list/ListItem";
 export const StorageSettings = () => {
   const { deleteAllFiles, appSizeUsage } = useDownload();
   const { t } = useTranslation();
-  const queryClient = useNetworkAwareQueryClient();
   const successHapticFeedback = useHaptic("success");
   const errorHapticFeedback = useHaptic("error");
 
@@ -37,11 +29,6 @@ export const StorageSettings = () => {
     },
   });
 
-  const { data: musicCacheStats } = useQuery({
-    queryKey: ["musicCacheStats"],
-    queryFn: () => getStorageStats(),
-  });
-
   const onDeleteClicked = async () => {
     try {
       await deleteAllFiles();
@@ -52,32 +39,6 @@ export const StorageSettings = () => {
     }
   };
 
-  const onClearMusicCacheClicked = useCallback(async () => {
-    try {
-      await clearCache();
-      queryClient.invalidateQueries({ queryKey: ["musicCacheStats"] });
-      queryClient.invalidateQueries({ queryKey: ["appSize"] });
-      successHapticFeedback();
-      toast.success(t("home.settings.storage.music_cache_cleared"));
-    } catch (_e) {
-      errorHapticFeedback();
-      toast.error(t("home.settings.toasts.error_deleting_files"));
-    }
-  }, [queryClient, successHapticFeedback, errorHapticFeedback, t]);
-
-  const onDeleteDownloadedSongsClicked = useCallback(async () => {
-    try {
-      await clearPermanentDownloads();
-      queryClient.invalidateQueries({ queryKey: ["musicCacheStats"] });
-      queryClient.invalidateQueries({ queryKey: ["appSize"] });
-      successHapticFeedback();
-      toast.success(t("home.settings.storage.downloaded_songs_deleted"));
-    } catch (_e) {
-      errorHapticFeedback();
-      toast.error(t("home.settings.toasts.error_deleting_files"));
-    }
-  }, [queryClient, successHapticFeedback, errorHapticFeedback, t]);
-
   const calculatePercentage = (value: number, total: number) => {
     return ((value / total) * 100).toFixed(2);
   };
@@ -141,41 +102,13 @@ export const StorageSettings = () => {
         </View>
       </View>
       {!Platform.isTV && (
-        <>
-          <ListGroup
-            title={t("home.settings.storage.music_cache_title")}
-            description={
-              <Text className='text-[#8E8D91] text-xs'>
-                {t("home.settings.storage.music_cache_description")}
-              </Text>
-            }
-          >
-            <ListItem
-              onPress={onClearMusicCacheClicked}
-              title={t("home.settings.storage.clear_music_cache")}
-              subtitle={t("home.settings.storage.music_cache_size", {
-                size: (musicCacheStats?.cacheSize ?? 0).bytesToReadable(),
-              })}
-            />
-          </ListGroup>
-          <ListGroup>
-            <ListItem
-              textColor='red'
-              onPress={onDeleteDownloadedSongsClicked}
-              title={t("home.settings.storage.delete_all_downloaded_songs")}
-              subtitle={t("home.settings.storage.downloaded_songs_size", {
-                size: (musicCacheStats?.permanentSize ?? 0).bytesToReadable(),
-              })}
-            />
-          </ListGroup>
-          <ListGroup>
-            <ListItem
-              textColor='red'
-              onPress={onDeleteClicked}
-              title={t("home.settings.storage.delete_all_downloaded_files")}
-            />
-          </ListGroup>
-        </>
+        <ListGroup>
+          <ListItem
+            textColor='red'
+            onPress={onDeleteClicked}
+            title={t("home.settings.storage.delete_all_downloaded_files")}
+          />
+        </ListGroup>
       )}
     </View>
   );