feat: enhance theme handling and layout components for Telegram Mini App

- Updated theme resolution logic to utilize a shared inline script for consistent theme application across routes.
- Introduced `AppShell` and `ReadyGate` components to manage app readiness and theme synchronization, improving user experience.
- Enhanced `GlobalError` and `NotFound` pages with a unified full-screen layout for better accessibility and visual consistency.
- Refactored CSS to implement safe area insets for sticky headers and content safety, ensuring proper layout on various devices.
- Added unit tests for new functionality and improved existing tests for better coverage and reliability.

webapp-next/src/hooks/use-auto-refresh.ts

@@ -10,7 +10,8 @@ import { useEffect, useRef } from "react";
 const AUTO_REFRESH_INTERVAL_MS = 60000;
 
 /**
- * When isCurrentMonth is true, calls refresh() immediately, then every 60 seconds.
+ * When isCurrentMonth is true, starts a 60-second interval to refresh. Does not call refresh()
+ * immediately so the initial load is handled only by useMonthData (avoids duplicate first fetch).
  * When isCurrentMonth becomes false or on unmount, the interval is cleared.
  */
 export function useAutoRefresh(
@@ -22,7 +23,6 @@ export function useAutoRefresh(
 
   useEffect(() => {
     if (!isCurrentMonth) return;
-    refreshRef.current();
     const id = setInterval(() => refreshRef.current(), AUTO_REFRESH_INTERVAL_MS);
     return () => clearInterval(id);
   }, [isCurrentMonth]);