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

@@ -12,13 +12,15 @@ export type ChatProps = {
   lobbyMessages: MessageType[];
   friendList: FriendType[];
   roomMessages: MessageType[];
+  maxHeight?: string;
 };
 
 export default function Chat({
   userId,
   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

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>

components/shared/Header.tsx

@@ -20,15 +20,19 @@ 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[] = [
     {
       iconName: "chatDefault",
       type: HeaderActions.CHAT,
       isActive: false,
-      onClick: () => {},
+      onClick: onClickChatButton,
     },
     {
       iconName: "notificationDefault",

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)}

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}

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>
   );
 }

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>

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>
   );
 }
 

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: {