From ce7ddf7be365bca5b61a60a56cc7c3928b92a512 Mon Sep 17 00:00:00 2001
From: Johnson Mao <86179381+JohnsonMao@users.noreply.github.com>
Date: Sat, 27 Jul 2024 20:26:17 +0800
Subject: [PATCH] feature: update layout v2 (#401)

* chore: update web style and tailwind config

* feature: add search bar and chat component to layout
---
 components/shared/Chat/v2/Chat.tsx        |  4 ++-
 components/shared/Chat/v2/ChatHeader.tsx  |  2 +-
 components/shared/Header.tsx              |  8 ++++--
 components/shared/SearchBar/SearchBar.tsx |  2 +-
 components/shared/Sidebar.tsx             |  2 +-
 containers/layout/AppLayout.tsx           | 34 +++++++++++++++++------
 pages/_document.tsx                       |  2 +-
 pages/index.tsx                           | 15 ++++++++--
 tailwind.config.js                        |  1 +
 9 files changed, 51 insertions(+), 19 deletions(-)

diff --git a/components/shared/Chat/v2/Chat.tsx b/components/shared/Chat/v2/Chat.tsx
index bd4c8f3f..5f05911f 100644
--- a/components/shared/Chat/v2/Chat.tsx
+++ b/components/shared/Chat/v2/Chat.tsx
@@ -12,6 +12,7 @@ export type ChatProps = {
   lobbyMessages: MessageType[];
   friendList: FriendType[];
   roomMessages: MessageType[];
+  maxHeight?: string;
 };
 
 export default function Chat({
@@ -19,6 +20,7 @@ export default function Chat({
   lobbyMessages,
   friendList,
   roomMessages,
+  maxHeight = "calc(100vh - 10rem)",
 }: Readonly<ChatProps>) {
   const [messages, setMessages] = useState(lobbyMessages);
   const [target, setTarget] = useState<[ChatTab["id"], string | null]>([
@@ -70,7 +72,7 @@ export default function Chat({
   return (
     <div
       className="w-[308px] h-[var(--chat-height))] gradient-purple rounded-lg"
-      style={{ "--chat-height": "calc(100vh - 10rem)" } as CSSProperties}
+      style={{ "--chat-height": maxHeight } as CSSProperties}
     >
       <div className="h-full body-bg border border-transparent bg-clip-padding rounded-lg overflow-hidden">
         <ChatHeader
diff --git a/components/shared/Chat/v2/ChatHeader.tsx b/components/shared/Chat/v2/ChatHeader.tsx
index aed32e00..e5d04ad5 100644
--- a/components/shared/Chat/v2/ChatHeader.tsx
+++ b/components/shared/Chat/v2/ChatHeader.tsx
@@ -32,7 +32,7 @@ export default function ChatHeader({
             )}
             onClick={toggleTab(id)}
           >
-            {notifications && (
+            {Number(notifications) > 0 && (
               <span className="absolute right-0 -top-2 fz-12 w-4 h-4 leading-4 rounded-full bg-secondary-500 text-basic-white">
                 {notifications}
               </span>
diff --git a/components/shared/Header.tsx b/components/shared/Header.tsx
index ef341948..d0cd3111 100644
--- a/components/shared/Header.tsx
+++ b/components/shared/Header.tsx
@@ -20,7 +20,11 @@ interface ButtonProps {
   onClick: () => void;
 }
 
-export default function Header() {
+interface HeaderProps {
+  onClickChatButton: () => void;
+}
+
+export default function Header({ onClickChatButton }: Readonly<HeaderProps>) {
   const [openProfile, setOpenProfile] = useState(false);
 
   const buttons: ButtonProps[] = [
@@ -28,7 +32,7 @@ export default function Header() {
       iconName: "chatDefault",
       type: HeaderActions.CHAT,
       isActive: false,
-      onClick: () => {},
+      onClick: onClickChatButton,
     },
     {
       iconName: "notificationDefault",
diff --git a/components/shared/SearchBar/SearchBar.tsx b/components/shared/SearchBar/SearchBar.tsx
index 57747926..3ad93817 100644
--- a/components/shared/SearchBar/SearchBar.tsx
+++ b/components/shared/SearchBar/SearchBar.tsx
@@ -38,7 +38,7 @@ export const SearchBar = ({
           {leftSlot}
           <input
             role="search"
-            className="py-2.5 px-4 leading-normal rounded-full bg-white/8 flex-1 text-primary-200"
+            className="py-2.5 px-4 leading-normal rounded-full bg-white/8 flex-1 text-primary-200 focus-within:outline-0"
             placeholder={placeholder}
             value={value}
             onChange={(e) => setValue(e.target.value)}
diff --git a/components/shared/Sidebar.tsx b/components/shared/Sidebar.tsx
index 477852e5..2a54d719 100644
--- a/components/shared/Sidebar.tsx
+++ b/components/shared/Sidebar.tsx
@@ -30,7 +30,7 @@ export default function Sidebar() {
   ];
 
   return (
-    <nav className="flex flex-col shrink-0 justify-start bg-white/8 glass-shadow my-6 ms-1.5 py-6 rounded-2xl w-18 gap-5">
+    <nav className="flex flex-col justify-start bg-white/8 glass-shadow py-6 rounded-2xl w-18 h-full gap-5">
       {buttons.map((ButtonProps) => (
         <Link
           href={ButtonProps.route}
diff --git a/containers/layout/AppLayout.tsx b/containers/layout/AppLayout.tsx
index af19e560..4204dfdf 100644
--- a/containers/layout/AppLayout.tsx
+++ b/containers/layout/AppLayout.tsx
@@ -1,17 +1,33 @@
+import { PropsWithChildren, useReducer } from "react";
 import Header from "@/components/shared/Header";
 import Sidebar from "@/components/shared/Sidebar";
-import Footer from "@/components/shared/Footer";
-import { cn } from "@/lib/utils";
+import Chat from "@/components/shared/Chat/v2/Chat";
+
+export default function Layout({ children }: PropsWithChildren) {
+  const [isChatVisible, toggleChatVisibility] = useReducer(
+    (preState) => !preState,
+    false
+  );
 
-export default function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="wrap__ flex flex-col w-full h-full">
-      <Header />
-      <div className="container__ flex flex-grow gap-5">
-        <Sidebar />
-        <main className="flex-grow">{children}</main>
+    <div className="inset-0 flex flex-col w-full h-full">
+      <Header onClickChatButton={toggleChatVisibility} />
+      <div className="ml-2 mr-4 my-6 flex grow max-w-[100vw]">
+        <div className="shrink-0">
+          <Sidebar />
+        </div>
+        <main className="grow overflow-x-hidden">{children}</main>
+        {isChatVisible && (
+          <div className="shrink-0">
+            <Chat
+              userId=""
+              friendList={[]}
+              lobbyMessages={[]}
+              roomMessages={[]}
+            />
+          </div>
+        )}
       </div>
-      <Footer />
     </div>
   );
 }
diff --git a/pages/_document.tsx b/pages/_document.tsx
index b62948be..181899f6 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -12,7 +12,7 @@ export default function Document() {
         <meta name="og:title" content={siteTitle} />
         <meta name="twitter:card" content="summary_large_image" />
       </Head>
-      <body className="body-bg">
+      <body className="body-bg overflow-hidden">
         <Main />
         <NextScript />
       </body>
diff --git a/pages/index.tsx b/pages/index.tsx
index 043cbfa3..861d5d89 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -7,12 +7,21 @@ import { useTranslation } from "next-i18next";
 
 import Carousel, { mockCarouselItems } from "@/components/shared/Carousel";
 import FastJoinButton from "@/components/lobby/FastJoinButton";
+import SearchBar from "@/components/shared/SearchBar";
 
 export default function Home() {
   const { t } = useTranslation("rooms");
   return (
-    <>
-      <h1 className="text-white">遊戲大廳！</h1>
+    <div>
+      <div className="flex justify-center">
+        <SearchBar
+          leftSlot={
+            <button type="button" className="pl-5 pr-2.5 px-4 text-primary-300">
+              類型
+            </button>
+          }
+        />
+      </div>
       <div className="px-[18px] mt-[12px] mb-[22px] w-[calc(100vw-100px)]">
         <Carousel
           itemWidth={332}
@@ -27,7 +36,7 @@ export default function Home() {
         {t("rooms_list")}
       </Button>
       <FastJoinButton />
-    </>
+    </div>
   );
 }
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 30dd5f66..6af164fd 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,6 +5,7 @@ module.exports = {
   content: [
     "./pages/**/*.{js,ts,jsx,tsx}",
     "./components/**/*.{js,ts,jsx,tsx}",
+    "./containers/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     fontFamily: {