feat: redesign dashboard stats cards with sparklines, icons, and period selection

- Replace horizontal scrolling stats list on native with a 2×2 grid layout; each card gets a color-coded icon, tint background, and an inline sparkline
- Add `Sparkline` component to `apps/native/src/components/ui/` (path-based SVG rendered via `react-native-svg`)
- Upgrade `StatsCard` (native) to support `icon`, `color`/`tintColor`/`bgColor` theming, `sparklineData`, and a `zeego` dropdown menu for switching the time period (today / this week / this month / this year)
- Wire `moviePeriod` / `episodePeriod` state in the home screen and fetch `dashboard.watchHistory` for each so counts and sparklines react to the selected period
- Rewrite `apps/web/src/components/dashboard/sparkline.tsx` as a self-contained SVG sparkline (no Recharts), and update `stats-display.tsx` accordingly
- Remove `apps/web/src/components/ui/chart.tsx` (Recharts wrapper) and drop the `recharts` dependency from `apps/web/package.json`

apps/native/src/app/(tabs)/(settings)/index.tsx

@@ -385,24 +385,6 @@ export default function SettingsScreen() {
             icon={IconLanguage}
             onPress={() => setLanguageModalOpen(true)}
           />
-          <SelectModal
-            open={languageModalOpen}
-            onOpenChange={setLanguageModalOpen}
-            label={t`Language`}
-            icon={IconLanguage}
-            selection={i18n.locale}
-            options={LOCALE_INFO.map((info) => ({
-              value: info.code,
-              label: info.nativeName,
-            }))}
-            onSelect={(locale) => {
-              setLanguageModalOpen(false);
-              activateLocale(locale as SupportedLocale).then(
-                () => setPersistedLocale(locale as SupportedLocale),
-                () => {},
-              );
-            }}
-          />
           <SettingsRow
             label={t`Anonymous usage reporting`}
             icon={IconChartBar}
@@ -517,6 +499,26 @@ export default function SettingsScreen() {
         </SettingsSection>
       </Animated.View>
 
+      {/* Language Modal */}
+      <SelectModal
+        open={languageModalOpen}
+        onOpenChange={setLanguageModalOpen}
+        label={t`Language`}
+        icon={IconLanguage}
+        selection={i18n.locale}
+        options={LOCALE_INFO.map((info) => ({
+          value: info.code,
+          label: info.nativeName,
+        }))}
+        onSelect={(locale) => {
+          setLanguageModalOpen(false);
+          activateLocale(locale as SupportedLocale).then(
+            () => setPersistedLocale(locale as SupportedLocale),
+            () => {},
+          );
+        }}
+      />
+
       {/* Version */}
       <Animated.View entering={FadeInDown.duration(300).delay(400)} className="mt-6 items-center">
         <Text className="text-muted-foreground text-xs">

apps/native/src/app/(tabs)/_layout.tsx

@@ -4,6 +4,10 @@ import { NativeTabBar } from "@/components/navigation/native-tab-bar";
 import { orpc } from "@/lib/orpc";
 import { authClient } from "@/lib/server";
 
+export const unstable_settings = {
+  initialRouteName: "(home)",
+};
+
 export default function TabLayout() {
   const { data: session } = authClient.useSession();
   const isAdmin = session?.user?.role === "admin";

apps/native/src/components/settings/settings-section.tsx

@@ -1,6 +1,6 @@
 import type { Icon } from "@tabler/icons-react-native";
 import { Children, Fragment, isValidElement, type ReactNode } from "react";
-import { View } from "react-native";
+import { StyleSheet, View } from "react-native";
 
 import { SectionHeader } from "@/components/ui/section-header";
 import { Text } from "@/components/ui/text";
@@ -55,7 +55,7 @@ export function SettingsSection({
 
           return (
             <Fragment key={key}>
-              {i > 0 && <View className="border-border border-t" style={{ borderTopWidth: 0.5 }} />}
+              {i > 0 && <View className="bg-border" style={styles.separator} />}
               {child}
             </Fragment>
           );
@@ -64,3 +64,9 @@ export function SettingsSection({
     </View>
   );
 }
+
+const styles = StyleSheet.create({
+  separator: {
+    height: StyleSheet.hairlineWidth,
+  },
+});