From 72c620029dc8008719eb9a278eed6e3b3bd58d06 Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Sat, 26 Sep 2026 21:03:44 +0200
Subject: [PATCH] feat(app): lay out the Usage screen like a settings page

The title moves from the header bar into the page on desktop; compact gets the
settings back header, which returns home when the screen was opened by URL.
---
 packages/app/src/usage/usage-screen.tsx | 52 +++++++++----------------
 1 file changed, 19 insertions(+), 33 deletions(-)

diff --git a/packages/app/src/usage/usage-screen.tsx b/packages/app/src/usage/usage-screen.tsx
index 8fc4c429db..b37c377c8d 100644
--- a/packages/app/src/usage/usage-screen.tsx
+++ b/packages/app/src/usage/usage-screen.tsx
@@ -1,36 +1,39 @@
 import { useCallback } from "react";
-import { ScrollView, View } from "react-native";
 import { useIsFocused } from "@react-navigation/native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { StyleSheet } from "react-native-unistyles";
-import { MenuHeader } from "@/components/headers/menu-header";
+import { router } from "expo-router";
+import { PageLayout } from "@/components/page-layout";
 import { usageCopy } from "./copy";
 import type { UsageHostGroup } from "./model";
 import { useUsageByHost } from "./queries";
 import { UsageMessage, UsageSection } from "./usage-section";
 
+// The screen is reachable by URL, so there may be no history to go back to.
+function leaveUsage(): void {
+  if (router.canGoBack()) {
+    router.back();
+    return;
+  }
+  router.replace("/");
+}
+
 export function UsageScreen() {
   const isFocused = useIsFocused();
   return (
-    <View style={styles.container}>
-      <MenuHeader title={usageCopy.title} />
+    <PageLayout title={usageCopy.title} onBack={leaveUsage} testID="usage-screen">
       {isFocused ? <UsageScreenContent /> : null}
-    </View>
+    </PageLayout>
   );
 }
 
 function UsageScreenContent() {
-  const insets = useSafeAreaInsets();
   const { groups, refresh } = useUsageByHost();
   return (
-    <ScrollView style={styles.scroll} testID="usage-screen">
-      <View style={[styles.content, { paddingBottom: insets.bottom }]}>
-        {groups.length === 0 ? <UsageMessage text={usageCopy.noHosts} /> : null}
-        {groups.map((group) => (
-          <HostUsageGroup key={group.serverId} group={group} onRefresh={refresh} />
-        ))}
-      </View>
-    </ScrollView>
+    <>
+      {groups.length === 0 ? <UsageMessage text={usageCopy.noHosts} /> : null}
+      {groups.map((group) => (
+        <HostUsageGroup key={group.serverId} group={group} onRefresh={refresh} />
+      ))}
+    </>
   );
 }
 
@@ -51,20 +54,3 @@ function HostUsageGroup({
     />
   );
 }
-
-const styles = StyleSheet.create((theme) => ({
-  container: {
-    flex: 1,
-    backgroundColor: theme.colors.surface0,
-  },
-  scroll: {
-    flex: 1,
-  },
-  content: {
-    padding: theme.spacing[4],
-    paddingTop: theme.spacing[6],
-    width: "100%",
-    maxWidth: 720,
-    alignSelf: "center",
-  },
-}));