feat: enhance Mini App design guidelines and refactor layout components

- Updated Mini App design guidelines to include detailed instructions on UI changes, accessibility rules, and verification processes.
- Refactored multiple components to utilize `MiniAppScreen` and `MiniAppScreenContent` for consistent layout structure across the application.
- Improved error handling in `GlobalError` and `NotFound` components by integrating new layout components for better user experience.
- Introduced new hooks for admin functionality, streamlining access checks and data loading processes.
- Enhanced documentation to reflect changes in design policies and component usage, ensuring clarity for future development.

webapp-next/src/hooks/telegram/use-telegram-interaction-policy.ts

@@ -0,0 +1,80 @@
+/**
+ * Telegram interaction policy hooks.
+ * Policy defaults: keep vertical swipes enabled; enable closing confirmation only
+ * for stateful flows where user input can be lost.
+ */
+
+"use client";
+
+import { useEffect } from "react";
+
+function getTelegramWebApp(): {
+  enableVerticalSwipes?: () => void;
+  disableVerticalSwipes?: () => void;
+  enableClosingConfirmation?: () => void;
+  disableClosingConfirmation?: () => void;
+} | null {
+  if (typeof window === "undefined") return null;
+  return (window as unknown as { Telegram?: { WebApp?: unknown } }).Telegram
+    ?.WebApp as {
+    enableVerticalSwipes?: () => void;
+    disableVerticalSwipes?: () => void;
+    enableClosingConfirmation?: () => void;
+    disableClosingConfirmation?: () => void;
+  } | null;
+}
+
+/**
+ * Keep Telegram vertical swipes enabled by default.
+ * Disable only for screens with conflicting in-app gestures.
+ */
+export function useTelegramVerticalSwipePolicy(disableVerticalSwipes: boolean) {
+  useEffect(() => {
+    const webApp = getTelegramWebApp();
+    if (!webApp) return;
+    try {
+      if (disableVerticalSwipes) {
+        webApp.disableVerticalSwipes?.();
+      } else {
+        webApp.enableVerticalSwipes?.();
+      }
+    } catch {
+      // Ignore unsupported clients.
+    }
+    return () => {
+      if (!disableVerticalSwipes) return;
+      try {
+        webApp.enableVerticalSwipes?.();
+      } catch {
+        // Ignore unsupported clients.
+      }
+    };
+  }, [disableVerticalSwipes]);
+}
+
+/**
+ * Enable confirmation before closing Mini App for stateful flows.
+ */
+export function useTelegramClosingConfirmation(enabled: boolean) {
+  useEffect(() => {
+    const webApp = getTelegramWebApp();
+    if (!webApp) return;
+    try {
+      if (enabled) {
+        webApp.enableClosingConfirmation?.();
+      } else {
+        webApp.disableClosingConfirmation?.();
+      }
+    } catch {
+      // Ignore unsupported clients.
+    }
+    return () => {
+      if (!enabled) return;
+      try {
+        webApp.disableClosingConfirmation?.();
+      } catch {
+        // Ignore unsupported clients.
+      }
+    };
+  }, [enabled]);
+}