[MOB-116] Fix Drawer appearing & visual improvements (#2691)

* Fixes, visual improvements, and more

* rename const

apps/mobile/src/components/explorer/FileRow.tsx

@@ -36,16 +36,14 @@ const FileRow = ({ data, onLongPress, onPress, renameHandler }: FileRowProps) =>
 				<View
 					style={tw`mx-2 flex-1 flex-row items-center justify-between border-b border-white/10 pb-3`}
 				>
-					<Pressable onLongPress={renameHandler}>
-						<View style={twStyle(tags.length === 0 ? 'w-full' : 'max-w-[85%]')}>
-							<Text
-								numberOfLines={1}
-								style={tw`text-left text-sm font-medium text-ink`}
-							>
-								{filePath?.name}
-								{filePath?.extension && `.${filePath.extension}`}
-							</Text>
-						</View>
+					<Pressable
+						style={twStyle(tags.length === 0 ? 'w-full' : 'max-w-[85%]')}
+						onLongPress={renameHandler}
+					>
+						<Text numberOfLines={1} style={tw`text-left text-sm font-medium text-ink`}>
+							{filePath?.name}
+							{filePath?.extension && `.${filePath.extension}`}
+						</Text>
 					</Pressable>
 					<View
 						style={twStyle(`mr-1 flex-row`, {

apps/mobile/src/components/locations/GridLocation.tsx

@@ -47,7 +47,7 @@ const GridLocation: React.FC<GridLocationProps> = ({ location, modalRef }: GridL
 				</Text>
 			</View>
 			<View style={tw`rounded-md border border-app-box/70 bg-app/70 px-1 py-0.5`}>
-				<Text style={tw`text-xs font-bold text-ink-dull`} numberOfLines={1}>
+				<Text style={tw`text-xs font-medium text-ink-dull`} numberOfLines={1}>
 					{`${humanizeSize(location.size_in_bytes)}`}
 				</Text>
 			</View>

apps/mobile/src/components/overview/Locations.tsx

@@ -68,6 +68,7 @@ const Locations = () => {
 								>
 									<StatCard
 										connectionType={null}
+										type="location"
 										totalSpace={item.size_in_bytes || [0]}
 										name={item.name || ''}
 										color="#0362FF"

apps/mobile/src/components/overview/StatCard.tsx

@@ -14,9 +14,12 @@ type StatCardProps = {
 	freeSpace?: string | number[];
 	color: string;
 	connectionType: 'lan' | 'p2p' | 'cloud' | null;
+	type?: 'location' | 'device'; //for layout purposes
 };
 
-const StatCard = ({ icon, name, connectionType, ...stats }: StatCardProps) => {
+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) => (
+							{() => (
 								<View
 									style={tw`absolute flex-row items-end gap-0.5 text-lg font-semibold`}
 								>
 									<Text style={tw`mx-auto text-md font-semibold text-ink`}>
-										{fill.toFixed(0)}
+										{usedSpaceSpace.value}
 									</Text>
 									<Text style={tw`text-xs font-bold text-ink-dull opacity-60`}>
 										{usedSpaceSpace.unit}
@@ -70,22 +82,30 @@ const StatCard = ({ icon, name, connectionType, ...stats }: StatCardProps) => {
 				)}
 				<View style={tw`flex-col overflow-hidden`}>
 					<Icon style={tw`-ml-1`} name={icon} size={60} />
-					<Text numberOfLines={1} style={tw`max-w-[130px] py-1 font-medium text-ink`}>
+					<Text numberOfLines={1} style={tw`max-w-[150px] py-1 font-medium text-ink`}>
 						{name}
 					</Text>
-					<Text numberOfLines={1} style={tw`max-w-[130px] text-ink-faint`}>
-						{freeSpace.value}
-						{freeSpace.unit} free of {totalSpace.value}
-						{totalSpace.unit}
-					</Text>
+					{type !== 'location' && (
+						<Text numberOfLines={1} style={tw`max-w-[150px] text-xs text-ink-faint`}>
+							{freeSpace.value}
+							{freeSpace.unit} free of {totalSpace.value}
+							{totalSpace.unit}
+						</Text>
+					)}
 				</View>
 			</View>
 			<View
 				style={tw`flex h-10 flex-row items-center gap-1.5  border-t border-app-cardborder px-2`}
 			>
-				<View
-					style={tw`rounded border border-app-lightborder bg-app-highlight px-1.5 py-px`}
-				>
+				{type === 'location' && (
+					<View style={infoBox}>
+						<Text style={tw`text-xs font-medium uppercase text-ink-dull`}>
+							{totalSpace.value}
+							{totalSpace.unit}
+						</Text>
+					</View>
+				)}
+				<View style={infoBox}>
 					<Text style={tw`text-xs font-medium uppercase text-ink-dull`}>
 						{connectionType || 'Local'}
 					</Text>

apps/mobile/src/navigation/DrawerNavigator.tsx

@@ -26,7 +26,7 @@ export default function DrawerNavigator() {
 				drawerType: 'slide',
 				swipeEdgeWidth: 50
 			}}
-			drawerContent={(props) => <DrawerContent {...(props as any)} />}
+			drawerContent={(props) => <DrawerContent {...props} />}
 		>
 			<Drawer.Screen name="Home" component={TabNavigator} />
 		</Drawer.Navigator>

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,

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",

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: