Polish mobile and web experience

apps/mobile/app/(app)/invoices/index.tsx

@@ -2,7 +2,6 @@ import { router } from "expo-router";
 import { useState } from "react";
 import {
   Alert,
-  RefreshControl,
   ScrollView,
   StyleSheet,
   Text,
@@ -15,6 +14,7 @@ import { FloatingActionButton } from "@/components/FloatingActionButton";
 import { GlassSurface } from "@/components/GlassSurface";
 import { LoadingScreen } from "@/components/LoadingScreen";
 import { PageHeader } from "@/components/PageHeader";
+import { PullToRefresh } from "@/components/PullToRefresh";
 import { SwipeableRow } from "@/components/SwipeableRow";
 import { StatusBadge } from "@/components/StatusBadge";
 import { TabPage } from "@/components/TabPage";
@@ -121,8 +121,7 @@ export default function InvoicesScreen() {
             <PageHeader title="Invoices" subtitle="Review status, amounts, and due dates" />
           }
           refreshControl={
-            <RefreshControl
-              refreshing={invoicesQuery.isRefetching}
+            <PullToRefresh
               onRefresh={() => invoicesQuery.refetch()}
               tintColor={colors.primary}
             />