Add cross-platform mobile usage dashboard (#5743)

Author: juliusmarminge

apps/mobile/src/Stack.tsx

@@ -48,6 +48,7 @@ import { SettingsAuthRouteScreen } from "./features/settings/SettingsAuthRouteSc
 import { SettingsEnvironmentsRouteScreen } from "./features/settings/SettingsEnvironmentsRouteScreen";
 import { SettingsLegalRouteScreen } from "./features/settings/SettingsLegalRouteScreen";
 import { SettingsProjectGroupingRouteScreen } from "./features/settings/SettingsProjectGroupingRouteScreen";
+import { UsageRouteScreen } from "./features/usage/UsageRouteScreen";
 import { SettingsRouteScreen } from "./features/settings/SettingsRouteScreen";
 import { ShowcaseCaptureCoordinator } from "./features/showcase/ShowcaseCaptureCoordinator";
 import {
@@ -190,6 +191,13 @@ const SettingsSheetStack = createNativeStackNavigator({
         title: "Client Storage",
       },
     }),
+    SettingsUsage: createNativeStackScreen({
+      screen: UsageRouteScreen,
+      linking: "usage",
+      options: {
+        title: "Usage",
+      },
+    }),
     SettingsAuth: createNativeStackScreen({
       screen: SettingsAuthRouteScreen,
       linking: "auth",

apps/mobile/src/components/AppSymbol.tsx

@@ -14,6 +14,7 @@ import {
   IconBellRinging,
   IconBolt,
   IconCamera,
+  IconChartBar,
   IconCheck,
   IconChevronDown,
   IconCode,
@@ -97,6 +98,7 @@ const ANDROID_ICON_BY_SF_SYMBOL: Partial<Record<SFSymbol, Icon>> = {
   "bolt.circle": IconBolt,
   "bolt.horizontal.circle": IconBolt,
   camera: IconCamera,
+  "chart.bar.xaxis": IconChartBar,
   checkmark: IconCheck,
   "checkmark.circle": IconCircleCheck,
   clock: IconClock,

apps/mobile/src/features/settings/SettingsRouteScreen.tsx

@@ -533,6 +533,7 @@ function GeneralSettingsSection() {
   return (
     <SettingsSection title="General">
       <SettingsRow icon="folder" label="Project Grouping" target="SettingsProjectGrouping" />
+      <SettingsRow icon="chart.bar.xaxis" label="Usage" target="SettingsUsage" />
     </SettingsSection>
   );
 }

apps/mobile/src/features/settings/components/settings-sheet-targets.ts

@@ -3,6 +3,7 @@ export type SettingsSheetTarget =
   | "SettingsArchive"
   | "SettingsAppearance"
   | "SettingsProjectGrouping"
-  | "SettingsClientStorage";
+  | "SettingsClientStorage"
+  | "SettingsUsage";
 
 export type SettingsLegalDocumentTarget = "SettingsLegal";

apps/mobile/src/features/usage/UsageDailyChart.ios.tsx

@@ -0,0 +1,50 @@
+import { Chart, Host, type ChartDataPoint } from "@expo/ui/swift-ui";
+import { frame } from "@expo/ui/swift-ui/modifiers";
+import { useMemo } from "react";
+
+import type { DailyTotals } from "@t3tools/shared/usageMerge";
+
+import { buildChartDays, type UsageChartMetric } from "./usageChartData";
+import { useProviderColors } from "./usageProviders";
+
+export interface UsageDailyChartProps {
+  readonly days: readonly string[];
+  readonly daily: readonly DailyTotals[];
+  readonly metric: UsageChartMetric;
+  readonly height: number;
+}
+
+/**
+ * Native Swift Charts daily bars. Points sharing an x value stack, so emitting
+ * one point per provider per day yields per-provider bands whose stack height
+ * is the day's total; changes animate natively.
+ *
+ * Axes are hidden: 30-90 categorical day labels cannot fit on a phone, so the
+ * screen renders its own edge labels under the chart instead.
+ */
+export function UsageDailyChart({ days, daily, metric, height }: UsageDailyChartProps) {
+  const colors = useProviderColors();
+
+  const data = useMemo((): ChartDataPoint[] => {
+    return buildChartDays(days, daily, metric).flatMap((day) =>
+      day.values.map((entry) => ({
+        x: day.day,
+        y: entry.value,
+        color: colors[entry.provider],
+      })),
+    );
+  }, [days, daily, metric, colors]);
+
+  return (
+    <Host style={{ height, width: "100%" }}>
+      <Chart
+        type="bar"
+        data={data}
+        animate
+        showGrid={false}
+        barStyle={{ cornerRadius: 2 }}
+        modifiers={[frame({ height })]}
+      />
+    </Host>
+  );
+}

apps/mobile/src/features/usage/UsageDailyChart.tsx

@@ -0,0 +1,44 @@
+import { useMemo } from "react";
+import { View } from "react-native";
+
+import type { DailyTotals } from "@t3tools/shared/usageMerge";
+
+import { buildChartDays, type UsageChartMetric } from "./usageChartData";
+import { useProviderColors } from "./usageProviders";
+
+export interface UsageDailyChartProps {
+  readonly days: readonly string[];
+  readonly daily: readonly DailyTotals[];
+  readonly metric: UsageChartMetric;
+  readonly height: number;
+}
+
+/**
+ * Stacked daily bars drawn with plain views. Android and any platform without
+ * Swift Charts land here; iOS resolves `UsageDailyChart.ios.tsx` instead.
+ */
+export function UsageDailyChart({ days, daily, metric, height }: UsageDailyChartProps) {
+  const colors = useProviderColors();
+  const chartDays = useMemo(() => buildChartDays(days, daily, metric), [days, daily, metric]);
+  const max = chartDays.reduce((peak, day) => Math.max(peak, day.total), 0);
+
+  return (
+    <View style={{ height }} className="flex-row items-end gap-px">
+      {/* column-reverse stacks the bottom-first provider values upward
+          without reversing the array (Hermes lacks Array#toReversed). */}
+      {chartDays.map((day) => (
+        <View key={day.day} className="h-full flex-1 flex-col-reverse overflow-hidden rounded-sm">
+          {day.values.map((entry) => (
+            <View
+              key={entry.provider}
+              style={{
+                height: max === 0 ? 0 : (entry.value / max) * height,
+                backgroundColor: colors[entry.provider],
+              }}
+            />
+          ))}
+        </View>
+      ))}
+    </View>
+  );
+}