fix(mobile): auto-refresh Home & Tags on focus / app foreground

The Home (notes) and Tags tabs loaded data only once on mount, so
items/tags created on another device (e.g. the web app) didn't appear
until a manual pull-to-refresh or app restart. Add useRefreshOnFocus
(refetch on screen focus + return from background), matching the
existing checklists tab pattern. No data was ever lost — the records
are in the DB; the tabs just showed a stale cached list.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: johnfire

packages/mobile/app/(tabs)/index.tsx

@@ -15,6 +15,7 @@ import { useTranslation } from "react-i18next";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { listItems, archiveItem } from "../../src/api/items";
 import { reportClientError } from "../../src/api/report";
+import { useRefreshOnFocus } from "../../src/lib/useRefreshOnFocus";
 import { ItemCard } from "../../src/components/ItemCard";
 import { useAuth } from "../../src/store/auth";
 import { colors, spacing, radius, font } from "../../src/theme";
@@ -79,6 +80,14 @@ export default function ItemsScreen() {
     load(1, search);
   }, [search, filter]);
 
+  // Silently refresh page 1 when the tab is re-focused or the app returns to the
+  // foreground, so items added on another device show up. Initial mount load is
+  // handled by the effect above, so the first focus is skipped.
+  useRefreshOnFocus(() => {
+    setPage(1);
+    load(1, search);
+  });
+
   function onRefresh() {
     setRefreshing(true);
     setPage(1);

packages/mobile/app/(tabs)/tags.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import {
   View,
   Text,
@@ -23,6 +23,7 @@ import {
   setTagColor,
 } from "../../src/api/tags";
 import { reportClientError } from "../../src/api/report";
+import { useRefreshOnFocus } from "../../src/lib/useRefreshOnFocus";
 import { colors, spacing, radius, font } from "../../src/theme";
 import type { TagWithCount } from "@notes-world/shared";
 
@@ -67,9 +68,9 @@ export default function TagsScreen() {
     }
   }
 
-  useEffect(() => {
-    load();
-  }, []);
+  // Load on first focus and refresh whenever the tab is re-focused or the app
+  // returns to the foreground, so tags created on another device appear.
+  useRefreshOnFocus(load, { immediate: true });
 
   function onRefresh() {
     setRefreshing(true);

packages/mobile/src/lib/useRefreshOnFocus.ts

@@ -0,0 +1,40 @@
+import { useCallback, useEffect, useRef } from "react";
+import { AppState } from "react-native";
+import { useFocusEffect } from "expo-router";
+
+/**
+ * Refetch when the screen regains focus (tab switch / returning from a detail
+ * screen) and when the app returns to the foreground, so data created on another
+ * device (e.g. the web app) shows up without a manual pull-to-refresh.
+ *
+ * The latest callback is held in a ref so callers can pass an inline function
+ * without re-subscribing every render. The first focus (initial mount) is
+ * skipped by default so screens that already load on mount don't double-fetch;
+ * pass { immediate: true } to also run on that first focus.
+ */
+export function useRefreshOnFocus(
+  refetch: () => void,
+  opts: { immediate?: boolean } = {},
+): void {
+  const cb = useRef(refetch);
+  cb.current = refetch;
+  const firstFocus = useRef(true);
+  const immediate = opts.immediate ?? false;
+
+  useFocusEffect(
+    useCallback(() => {
+      if (firstFocus.current) {
+        firstFocus.current = false;
+        if (!immediate) return;
+      }
+      cb.current();
+    }, [immediate]),
+  );
+
+  useEffect(() => {
+    const sub = AppState.addEventListener("change", (state) => {
+      if (state === "active") cb.current();
+    });
+    return () => sub.remove();
+  }, []);
+}