feat: implement view paddings management with ViewPaddingsBridge and related components

1 month ago · 7c2316fe0f
10 changed files with 178 additions and 3 deletions
--- a/src/app/globals.css
+++ b/src/app/globals.css
@ -2,6 +2,10 @@

 :root {
  --default-page-background-image: url("/assets/images/home-Checkups-List.svg");
+  --safe-top: 0px;
+  --safe-bottom: 0px;
+  --safe-left: 0px;
+  --safe-right: 0px;
 }

@theme inline {
@ -50,6 +54,8 @@ html:lang(ar) body,
  width: 100%;
  min-height: 100vh;
  padding-inline: 17px;
+  padding-top: var(--safe-top);
+  padding-bottom: var(--safe-bottom);
  box-sizing: border-box;
  background-color: var(--background);
  background-image: var(--default-page-background-image);
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@ -143,6 +143,15 @@ export default function RootLayout({
            `,
          }}
        />
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              if (typeof window !== 'undefined' && window.HabibApp) {
+                window.HabibApp.postMessage(JSON.stringify({ action: 'get_view_paddings' }));
+              }
+            `,
+          }}
+        />
      </head>
      <body className={`${faminela.variable} ${amiri.variable}`}>
        <Providers>
--- a/src/app/providers.tsx
+++ b/src/app/providers.tsx
@ -2,6 +2,7 @@

 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { type ReactNode, useState } from "react";
+import { ViewPaddingsProvider } from "@/components/utils/view-paddings-provider";

 type ProvidersProps = {
  children: ReactNode;
@ -23,6 +24,9 @@ export default function Providers({ children }: ProvidersProps) {
  );

  return (
-    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    <QueryClientProvider client={queryClient}>
+      <ViewPaddingsProvider />
+      {children}
+    </QueryClientProvider>
  );
 }
--- a/src/components/ui/sticky-header.tsx
+++ b/src/components/ui/sticky-header.tsx
@ -1,4 +1,7 @@
+"use client";
+
 import type { ReactNode } from "react";
+import { useViewPaddings } from "@/hooks/use-view-paddings";

 type StickyHeaderProps = {
  children: ReactNode;
@ -9,10 +12,13 @@ export default function StickyHeader({
  children,
  className,
 }: StickyHeaderProps) {
+  const { top } = useViewPaddings();
+
  return (
    <header
+      style={{ paddingTop: `calc(1.75rem + ${top}px)` }}
      className={[
-        "sticky top-0 z-30 rounded-b-[15px] bg-[linear-gradient(135deg,#E03950_0%,#FE6F82_100%)] px-[17px] pt-7 pb-5",
+        "sticky top-0 z-30 rounded-b-[15px] bg-[linear-gradient(135deg,#E03950_0%,#FE6F82_100%)] px-[17px] pb-5",
        className,
      ]
        .filter(Boolean)
--- a/src/components/utils/fixed-bottom.tsx
+++ b/src/components/utils/fixed-bottom.tsx
@ -0,0 +1,22 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { useViewPaddings } from "@/hooks/use-view-paddings";
+
+type FixedBottomProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export function FixedBottom({ children, className }: FixedBottomProps) {
+  const { bottom } = useViewPaddings();
+
+  return (
+    <div
+      style={{ paddingBottom: `${bottom}px` }}
+      className={className}
+    >
+      {children}
+    </div>
+  );
+}
--- a/src/components/utils/view-paddings-provider.tsx
+++ b/src/components/utils/view-paddings-provider.tsx
@ -0,0 +1,12 @@
+"use client";
+
+import { useEffect } from "react";
+import { viewPaddingsBridge } from "@/lib/view-paddings";
+
+export function ViewPaddingsProvider() {
+  useEffect(() => {
+    viewPaddingsBridge;
+  }, []);
+
+  return null;
+}
--- a/src/hooks/use-view-paddings.ts
+++ b/src/hooks/use-view-paddings.ts
@ -0,0 +1,14 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { viewPaddingsBridge } from "@/lib/view-paddings";
+
+export function useViewPaddings() {
+  const [paddings, setPaddings] = useState(() => viewPaddingsBridge.getPaddings());
+
+  useEffect(() => {
+    return viewPaddingsBridge.subscribe(setPaddings);
+  }, []);
+
+  return paddings;
+}
--- a/src/lib/view-paddings.ts
+++ b/src/lib/view-paddings.ts
@ -0,0 +1,92 @@
+interface ViewPaddings {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+}
+
+class ViewPaddingsBridge {
+  private paddings: ViewPaddings = { top: 0, bottom: 0, left: 0, right: 0 };
+  private listeners: Array<(paddings: ViewPaddings) => void> = [];
+  private flutterUnsubscribe?: () => void;
+
+  constructor() {
+    this.init();
+  }
+
+  private init() {
+    if (typeof window === "undefined") return;
+
+    this.setupFlutterListener();
+    this.requestPaddings();
+  }
+
+  private setupFlutterListener() {
+    const win = window as Window & {
+      addFlutterResponseListener?: (
+        listener: (event: any) => void,
+      ) => () => void;
+    };
+
+    const attach = () => {
+      if (typeof win.addFlutterResponseListener !== "function") return false;
+
+      this.flutterUnsubscribe = win.addFlutterResponseListener((event) => {
+        if (event.action === "get_view_paddings" && event.success && event.data) {
+          this.paddings = {
+            top: event.data.top || 0,
+            bottom: event.data.bottom || 0,
+            left: event.data.left || 0,
+            right: event.data.right || 0,
+          };
+          this.applyPaddings();
+          this.notifyListeners();
+        }
+      });
+
+      return true;
+    };
+
+    if (!attach()) {
+      const interval = setInterval(() => {
+        if (attach()) clearInterval(interval);
+      }, 50);
+    }
+  }
+
+  private requestPaddings() {
+    if (typeof window === "undefined") return;
+
+    const app = (window as any).HabibApp;
+    if (app?.postMessage) {
+      app.postMessage(JSON.stringify({ action: "get_view_paddings" }));
+    }
+  }
+
+  private applyPaddings() {
+    if (typeof document === "undefined") return;
+
+    document.documentElement.style.setProperty("--safe-top", `${this.paddings.top}px`);
+    document.documentElement.style.setProperty("--safe-bottom", `${this.paddings.bottom}px`);
+    document.documentElement.style.setProperty("--safe-left", `${this.paddings.left}px`);
+    document.documentElement.style.setProperty("--safe-right", `${this.paddings.right}px`);
+  }
+
+  private notifyListeners() {
+    this.listeners.forEach((listener) => listener(this.paddings));
+  }
+
+  public getPaddings(): ViewPaddings {
+    return { ...this.paddings };
+  }
+
+  public subscribe(listener: (paddings: ViewPaddings) => void): () => void {
+    this.listeners.push(listener);
+    return () => {
+      const index = this.listeners.indexOf(listener);
+      if (index >= 0) this.listeners.splice(index, 1);
+    };
+  }
+}
+
+export const viewPaddingsBridge = new ViewPaddingsBridge();
--- a/src/types/window.d.ts
+++ b/src/types/window.d.ts
@ -2,7 +2,14 @@ declare global {
  interface FlutterResponseEvent {
    action: string;
    success: boolean;
-    data?: { latitude: number; longitude: number };
+    data?: { 
+      latitude?: number; 
+      longitude?: number;
+      top?: number;
+      bottom?: number;
+      left?: number;
+      right?: number;
+    };
  }

  interface Window {
--- a/src/view-paddings.ts
+++ b/src/view-paddings.ts
@ -0,0 +1,3 @@
+export { useViewPaddings } from "./hooks/use-view-paddings";
+export { viewPaddingsBridge } from "./lib/view-paddings";
+export { FixedBottom } from "./components/utils/fixed-bottom";