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/use-screen-ready.ts

@@ -0,0 +1,20 @@
+/**
+ * Unified screen-readiness signal for ReadyGate.
+ * Marks app content as ready once when condition becomes true.
+ */
+
+"use client";
+
+import { useEffect, useRef } from "react";
+import { useAppStore } from "@/store/app-store";
+
+export function useScreenReady(ready: boolean) {
+  const setAppContentReady = useAppStore((s) => s.setAppContentReady);
+  const markedRef = useRef(false);
+
+  useEffect(() => {
+    if (!ready || markedRef.current) return;
+    markedRef.current = true;
+    setAppContentReady(true);
+  }, [ready, setAppContentReady]);
+}