fix: make some more room for download totals

fixes #193

src/components/Button.tsx

@@ -38,6 +38,7 @@ const ButtonText = styled.Text<{ active?: boolean, size: ButtonSize }>`
     color: ${THEME_COLOR};
     font-weight: 500;
     font-size: 14px;
+    flex-shrink: 1;
 
     ${(props) => props.size === 'small' && css`
         font-size: 12px;
@@ -78,7 +79,13 @@ const Button = React.forwardRef<View, ButtonProps>(function Button(props, ref) {
                 />
             }
             {title ? (
-                <ButtonText active={isPressed} size={size}>{title}</ButtonText>
+                <ButtonText
+                    active={isPressed}
+                    size={size}
+                    numberOfLines={1}
+                >
+                    {title}
+                </ButtonText>
             ) : undefined}
         </BaseButton>
     );

src/localisation/lang/en/locale.json

@@ -52,6 +52,7 @@
     "no-downloads": "You have not yet downloaded any tracks",
     "delete-track": "Delete Track",
     "delete-all-tracks": "Delete All Tracks",
+    "confirm-delete-all-tracks": "Are you sure you want to delete all currently downloaded tracks?",
     "delete-album": "Delete Album",
     "delete-playlist": "Delete Playlist",
     "total-download-size": "Total Download Size",
@@ -71,5 +72,7 @@
     "color-scheme-dark": "Dark Mode",
     "artists": "Artists",
     "privacy-policy": "Privacy Policy",
-    "sleep-timer": "Sleep timer"
+    "sleep-timer": "Sleep timer",
+    "delete": "Delete",
+    "cancel": "Cancel"
 }

src/localisation/lang/nl/locale.json

@@ -52,6 +52,7 @@
     "no-downloads": "Je hebt nog geen nummers gedownload",
     "delete-track": "Verwijder Track",
     "delete-all-tracks": "Verwijder alle nummers",
+    "confirm-delete-all-tracks": "Weet je zeker dat je alle eerdere gedownloadede tracks wil verwijderen?",
     "delete-album": "Verwijder Album",
     "delete-playlist": "Verwijder Playlist",
     "total-download-size": "Totale grootte downloads",
@@ -71,5 +72,7 @@
     "color-scheme-light": "Lichte modus",
     "color-scheme-dark": "Donkere modus",
     "privacy-policy": "Privacybeleid",
-    "sleep-timer": "Slaaptimer"
+    "sleep-timer": "Slaaptimer",
+    "delete": "Verwijder",
+    "cancel": "Annuleer"
 }

src/localisation/types.ts

@@ -52,6 +52,7 @@ export type LocaleKeys = 'play-next'
 | 'delete-playlist'
 | 'delete-track'
 | 'delete-all-tracks'
+| 'confirm-delete-all-tracks'
 | 'total-download-size'
 | 'no-downloads'
 | 'retry-failed-downloads'
@@ -70,4 +71,6 @@ export type LocaleKeys = 'play-next'
 | 'color-scheme-dark'
 | 'artists'
 | 'privacy-policy'
-| 'sleep-timer'
+| 'sleep-timer'
+| 'delete'
+| 'cancel'

src/screens/Downloads/index.tsx

@@ -1,6 +1,6 @@
 import useDefaultStyles from '@/components/Colors';
 import React, { useCallback, useMemo } from 'react';
-import { FlatListProps, View } from 'react-native';
+import { Alert, FlatListProps, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useAppDispatch, useTypedSelector } from '@/store';
 import formatBytes from '@/utility/formatBytes';
@@ -59,7 +59,22 @@ function Downloads() {
     }, [dispatch]);
 
     // Delete all downloaded tracks
-    const handleDeleteAllTracks = useCallback(() => ids.forEach(handleDelete), [handleDelete, ids]);
+    const handleDeleteAllTracks = useCallback(() => {
+        Alert.alert(
+            t('delete-all-tracks'),
+            t('confirm-delete-all-tracks'),
+            [{
+                text: t('delete'),
+                style: 'destructive',
+                onPress() {
+                    ids.forEach(handleDelete);
+                }
+            }, {
+                text: t('cancel'),
+                style: 'cancel',
+            }]
+        );
+    }, [handleDelete, ids]);
 
     // Retry a single failed track
     const retryTrack = useCallback((id: string) => {
@@ -78,23 +93,31 @@ function Downloads() {
 
     const ListHeaderComponent = useMemo(() => (
         <View style={[{ paddingHorizontal: 20, paddingBottom: 12, paddingTop: 12, borderBottomWidth: 0.5 }, defaultStyles.border]}>
-            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-                <Text 
-                    style={[
-                        defaultStyles.textHalfOpacity,
-                        { marginRight: 8, flex: 1, fontSize: 12 },
-                    ]}
-                    numberOfLines={1}
-                >
-                    {t('total-download-size')}{': '}{formatBytes(totalDownloadSize)}
-                </Text>
+            <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 24 }}>
+                <View>
+                    <Text style={[
+                        defaultStyles.text,
+                        { fontSize: 16, fontWeight: '600' },
+                    ]}>
+                        {formatBytes(totalDownloadSize)}
+                    </Text>
+                    <Text 
+                        style={[
+                            defaultStyles.textHalfOpacity,
+                            { fontSize: 12 },
+                        ]}
+                        numberOfLines={1}
+                    >
+                        {t('total-download-size')}
+                    </Text>
+                </View>
                 <Button
                     icon={TrashIcon}
-                    title={t('delete-all-tracks')}
                     onPress={handleDeleteAllTracks}
+                    title={t('delete-all-tracks')}
                     disabled={!ids.length}
-                    size="small"
                     testID="delete-all-tracks"
+                    style={{ flexShrink: 1, flexGrow: 0 }}
                 />
             </View>
             {failedIds.length > 0 && (