diff --git a/apps/mobile/src/components/explorer/FileRow.tsx b/apps/mobile/src/components/explorer/FileRow.tsx index 4d0d0f940..4ce21d22a 100644 --- a/apps/mobile/src/components/explorer/FileRow.tsx +++ b/apps/mobile/src/components/explorer/FileRow.tsx @@ -36,16 +36,14 @@ const FileRow = ({ data, onLongPress, onPress, renameHandler }: FileRowProps) => - - - - {filePath?.name} - {filePath?.extension && `.${filePath.extension}`} - - + + + {filePath?.name} + {filePath?.extension && `.${filePath.extension}`} + = ({ location, modalRef }: GridL - + {`${humanizeSize(location.size_in_bytes)}`} diff --git a/apps/mobile/src/components/overview/Locations.tsx b/apps/mobile/src/components/overview/Locations.tsx index 1eb65a449..f6e58bc1f 100644 --- a/apps/mobile/src/components/overview/Locations.tsx +++ b/apps/mobile/src/components/overview/Locations.tsx @@ -68,6 +68,7 @@ const Locations = () => { > { +const infoBox = tw`rounded border border-app-lightborder/50 bg-app-highlight/50 px-1.5 py-px`; + +const StatCard = ({ icon, name, connectionType, type, ...stats }: StatCardProps) => { const [mounted, setMounted] = useState(false); const { totalSpace, freeSpace, usedSpaceSpace } = useMemo(() => { @@ -35,7 +38,8 @@ const StatCard = ({ icon, name, connectionType, ...stats }: StatCardProps) => { const progress = useMemo(() => { if (!mounted || totalSpace.bytes === 0n) return 0; - return Math.floor((usedSpaceSpace.value / totalSpace.value) * 100); + // Calculate progress using raw bytes to avoid unit conversion issues + return Math.floor((Number(usedSpaceSpace.bytes) / Number(totalSpace.bytes)) * 100); }, [mounted, totalSpace, usedSpaceSpace]); return ( @@ -47,18 +51,26 @@ const StatCard = ({ icon, name, connectionType, ...stats }: StatCardProps) => { size={90} width={7} rotation={0} - fill={usedSpaceSpace.value} + fill={progress} lineCap="round" backgroundColor={tw.color('ink-light/5')} - tintColor={progress > 90 ? '#E14444' : '#2599FF'} + tintColor={ + progress >= 90 + ? '#E14444' + : progress >= 75 + ? 'darkorange' + : progress >= 60 + ? 'yellow' + : '#2599FF' + } style={tw`flex items-center justify-center`} > - {(fill) => ( + {() => ( - {fill.toFixed(0)} + {usedSpaceSpace.value} {usedSpaceSpace.unit} @@ -70,22 +82,30 @@ const StatCard = ({ icon, name, connectionType, ...stats }: StatCardProps) => { )} - + {name} - - {freeSpace.value} - {freeSpace.unit} free of {totalSpace.value} - {totalSpace.unit} - + {type !== 'location' && ( + + {freeSpace.value} + {freeSpace.unit} free of {totalSpace.value} + {totalSpace.unit} + + )} - + {type === 'location' && ( + + + {totalSpace.value} + {totalSpace.unit} + + + )} + {connectionType || 'Local'} diff --git a/apps/mobile/src/navigation/DrawerNavigator.tsx b/apps/mobile/src/navigation/DrawerNavigator.tsx index 51d191b6e..a72b4b867 100644 --- a/apps/mobile/src/navigation/DrawerNavigator.tsx +++ b/apps/mobile/src/navigation/DrawerNavigator.tsx @@ -26,7 +26,7 @@ export default function DrawerNavigator() { drawerType: 'slide', swipeEdgeWidth: 50 }} - drawerContent={(props) => } + drawerContent={(props) => } > diff --git a/apps/mobile/src/screens/browse/Location.tsx b/apps/mobile/src/screens/browse/Location.tsx index 2018ffade..81f9a152c 100644 --- a/apps/mobile/src/screens/browse/Location.tsx +++ b/apps/mobile/src/screens/browse/Location.tsx @@ -59,7 +59,7 @@ export default function LocationScreen({ navigation, route }: BrowseStackScreenP const paths = usePathsExplorerQuery({ arg: { - filters: [...defaultFilters, ...layoutFilter].filter(Boolean) as any, + filters: [...defaultFilters, ...layoutFilter].filter(Boolean), take: 30 }, order, diff --git a/package.json b/package.json index 99700424d..c8e4eb4ba 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,8 @@ "@remix-run/router@1.13.1": "patches/@remix-run__router@1.13.1.patch", "@contentlayer/cli@0.3.4": "patches/@contentlayer__cli@0.3.4.patch", "@oscartbeaumont-sd/rspc-tauri@0.0.0-main-dc31e5b2": "patches/@oscartbeaumont-sd__rspc-tauri@0.0.0-main-dc31e5b2.patch", - "tailwindcss-animate@1.0.7": "patches/tailwindcss-animate@1.0.7.patch" + "tailwindcss-animate@1.0.7": "patches/tailwindcss-animate@1.0.7.patch", + "@react-navigation/drawer@6.6.15": "patches/@react-navigation__drawer@6.6.15.patch" }, "overrides": { "@types/node": ">18.18.x", diff --git a/patches/@react-navigation__drawer@6.6.15.patch b/patches/@react-navigation__drawer@6.6.15.patch new file mode 100644 index 000000000..fa4c115a9 --- /dev/null +++ b/patches/@react-navigation__drawer@6.6.15.patch @@ -0,0 +1,71 @@ +diff --git a/src/views/modern/Drawer.tsx b/src/views/modern/Drawer.tsx +index 9909e9698e51379de6469eb2053a1432636d0c7d..220fa07f6784c5da13e6949e9c4893e015a5d1f8 100644 +--- a/src/views/modern/Drawer.tsx ++++ b/src/views/modern/Drawer.tsx +@@ -1,26 +1,27 @@ + import * as React from 'react'; + import { +- I18nManager, +- InteractionManager, +- Keyboard, +- Platform, +- StatusBar, +- StyleSheet, +- View, ++ Dimensions, ++ I18nManager, ++ InteractionManager, ++ Keyboard, ++ Platform, ++ StatusBar, ++ StyleSheet, ++ View, + } from 'react-native'; + import { +- PanGestureHandler, +- PanGestureHandlerGestureEvent, +- State as GestureState, ++ PanGestureHandler, ++ PanGestureHandlerGestureEvent, ++ State as GestureState, + } from 'react-native-gesture-handler'; + import Animated, { +- interpolate, +- runOnJS, +- useAnimatedGestureHandler, +- useAnimatedStyle, +- useDerivedValue, +- useSharedValue, +- withSpring, ++ interpolate, ++ runOnJS, ++ useAnimatedGestureHandler, ++ useAnimatedStyle, ++ useDerivedValue, ++ useSharedValue, ++ withSpring, + } from 'react-native-reanimated'; + + import type { DrawerProps } from '../../types'; +@@ -72,7 +73,8 @@ export default function Drawer({ + const percentage = Number(width.replace(/%$/, '')); + + if (Number.isFinite(percentage)) { +- return dimensions.width * (percentage / 100); ++ const dimensionsWidth = Dimensions.get("screen").width ++ return dimensionsWidth * (percentage / 100); + } + } + +@@ -283,9 +285,10 @@ export default function Drawer({ + return translateX; + }); + ++ const dimensionsWidth = Dimensions.get("screen").width; + const isRTL = I18nManager.getConstants().isRTL; + const drawerAnimatedStyle = useAnimatedStyle(() => { +- const distanceFromEdge = dimensions.width - drawerWidth; ++ const distanceFromEdge = dimensionsWidth - drawerWidth; + + return { + transform: diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5589091fc..04cae94f1 100644 Binary files a/pnpm-lock.yaml and b/pnpm-lock.yaml differ