Polish mobile and web experience

apps/mobile/app/(app)/more/expenses/index.tsx

@@ -2,7 +2,6 @@ import { Ionicons } from "@expo/vector-icons";
 import { router } from "expo-router";
 import { useMemo, useState } from "react";
 import {
-  RefreshControl,
   ScrollView,
   StyleSheet,
   Text,
@@ -15,6 +14,7 @@ import { AppBackground } from "@/components/AppBackground";
 import { FilterChip } from "@/components/FilterChip";
 import { LoadingScreen } from "@/components/LoadingScreen";
 import { PageHeader } from "@/components/PageHeader";
+import { PullToRefresh } from "@/components/PullToRefresh";
 import { SwipeableRow } from "@/components/SwipeableRow";
 import { TabPage } from "@/components/TabPage";
 import { TabScrollView } from "@/components/TabScrollView";
@@ -110,9 +110,8 @@ export default function ExpensesScreen() {
             </View>
           }
           refreshControl={
-            <RefreshControl
-              refreshing={expensesQuery.isRefetching}
-              onRefresh={() => void expensesQuery.refetch()}
+            <PullToRefresh
+              onRefresh={() => expensesQuery.refetch()}
               tintColor={colors.primary}
             />
           }

apps/mobile/app/(app)/more/recurring.tsx

@@ -1,8 +1,9 @@
-import { RefreshControl, StyleSheet, Text, View } from "react-native";
+import { StyleSheet, Text, View } from "react-native";
 
 import { AppBackground } from "@/components/AppBackground";
 import { LoadingScreen } from "@/components/LoadingScreen";
 import { PageHeader } from "@/components/PageHeader";
+import { PullToRefresh } from "@/components/PullToRefresh";
 import { SwipeableRow } from "@/components/SwipeableRow";
 import { TabPage } from "@/components/TabPage";
 import { TabScrollView } from "@/components/TabScrollView";
@@ -46,9 +47,8 @@ export default function RecurringScreen() {
             />
           }
           refreshControl={
-            <RefreshControl
-              refreshing={query.isRefetching}
-              onRefresh={() => void query.refetch()}
+            <PullToRefresh
+              onRefresh={() => query.refetch()}
               tintColor={colors.primary}
             />
           }

apps/mobile/app/(app)/more/reports.tsx

@@ -1,8 +1,9 @@
-import { RefreshControl, StyleSheet, Text, View } from "react-native";
+import { StyleSheet, Text, View } from "react-native";
 
 import { AppBackground } from "@/components/AppBackground";
 import { LoadingScreen } from "@/components/LoadingScreen";
 import { PageHeader } from "@/components/PageHeader";
+import { PullToRefresh } from "@/components/PullToRefresh";
 import { StatCard } from "@/components/StatCard";
 import { TabPage } from "@/components/TabPage";
 import { TabScrollView } from "@/components/TabScrollView";
@@ -48,13 +49,14 @@ export default function ReportsScreen() {
         <TabScrollView
           header={<PageHeader title="Reports" subtitle="Business performance snapshot" />}
           refreshControl={
-            <RefreshControl
-              refreshing={statsQuery.isRefetching}
-              onRefresh={() => {
-                void statsQuery.refetch();
-                void expensesQuery.refetch();
-                void summaryQuery.refetch();
-              }}
+            <PullToRefresh
+              onRefresh={() =>
+                Promise.all([
+                  statsQuery.refetch(),
+                  expensesQuery.refetch(),
+                  summaryQuery.refetch(),
+                ])
+              }
               tintColor={colors.primary}
             />
           }

apps/mobile/app/(app)/more/time-entries.tsx

@@ -1,9 +1,10 @@
 import { useMemo, useState } from "react";
-import { RefreshControl, StyleSheet, Text, View } from "react-native";
+import { StyleSheet, Text, View } from "react-native";
 
 import { AppBackground } from "@/components/AppBackground";
 import { LoadingScreen } from "@/components/LoadingScreen";
 import { PageHeader } from "@/components/PageHeader";
+import { PullToRefresh } from "@/components/PullToRefresh";
 import { SwipeableRow } from "@/components/SwipeableRow";
 import { TabPage } from "@/components/TabPage";
 import { TabScrollView } from "@/components/TabScrollView";
@@ -74,9 +75,8 @@ export default function TimeEntriesScreen() {
             <PageHeader title="Time entries" subtitle={`${completed.length} completed entries`} />
           }
           refreshControl={
-            <RefreshControl
-              refreshing={entriesQuery.isRefetching}
-              onRefresh={() => void entriesQuery.refetch()}
+            <PullToRefresh
+              onRefresh={() => entriesQuery.refetch()}
               tintColor={colors.primary}
             />
           }