feat: chat panel redesigned ui

app/components/Screen/index.tsx

@@ -0,0 +1,71 @@
+import { useLocation } from "react-router-dom";
+import { useMemo, ReactNode, useLayoutEffect } from "react";
+import { DEFAULT_SIDEBAR_WIDTH, Path, SlotID } from "@/app/constant";
+import { getLang } from "@/app/locales";
+
+import useMobileScreen from "@/app/hooks/useMobileScreen";
+import { isIOS } from "@/app/utils";
+
+import backgroundUrl from "!url-loader!@/app/icons/background.svg";
+import useListenWinResize from "@/app/hooks/useListenWinResize";
+
+interface ScreenProps {
+  children: ReactNode;
+  noAuth: ReactNode;
+  sidebar: ReactNode;
+}
+
+export default function Screen(props: ScreenProps) {
+  const location = useLocation();
+  const isAuth = location.pathname === Path.Auth;
+  const isHome = location.pathname === Path.Home;
+
+  const isMobileScreen = useMobileScreen();
+  const isIOSMobile = useMemo(
+    () => isIOS() && isMobileScreen,
+    [isMobileScreen],
+  );
+
+  useListenWinResize();
+
+  let containerClassName = "flex h-[100%] w-[100%]";
+  let pageClassName = "flex-1 h-[100%]";
+  let sidebarClassName = "basis-sidebar h-[100%]";
+
+  if (isMobileScreen) {
+    containerClassName = "h-[100%] w-[100%] relative bg-center";
+    pageClassName = `absolute top-0 h-[100%] w-[100%] ${
+      !isHome ? "left-0" : "left-[101%]"
+    } z-10`;
+    sidebarClassName = `h-[100%] w-[100%]`;
+  }
+
+  return (
+    <div
+      className={containerClassName}
+      style={{
+        backgroundImage: `url(${backgroundUrl})`,
+        direction: getLang() === "ar" ? "rtl" : "ltr",
+      }}
+    >
+      {isAuth ? (
+        props.noAuth
+      ) : (
+        <>
+          <div className={sidebarClassName}>{props.sidebar}</div>
+
+          <div
+            className={pageClassName}
+            id={SlotID.AppBody}
+            style={{
+              // #3016 disable transition on ios mobile screen
+              transition: isMobileScreen && isIOSMobile ? "none" : undefined,
+            }}
+          >
+            {props.children}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}