From fa2f8c66d1f385aa9b33e776d4bd5e9476f45225 Mon Sep 17 00:00:00 2001
From: Dean-YZG <butterfly@bogon.com>
Date: Mon, 6 May 2024 22:23:21 +0800
Subject: [PATCH] feat: old page dark mode compatible

---
 app/components/MenuLayout/index.tsx           |  1 +
 app/components/mask.tsx                       |  9 ++--
 app/components/new-chat.tsx                   |  9 ++--
 .../Chat/components/ModelSelect.tsx           |  8 +++-
 app/containers/Chat/components/PromptHint.tsx | 17 ++++---
 app/containers/Chat/index.module.scss         | 47 +++++++++----------
 app/containers/index.tsx                      | 26 +++++++++-
 app/hooks/useSwitchTheme.ts                   | 28 +++++++++++
 8 files changed, 98 insertions(+), 47 deletions(-)

diff --git a/app/components/MenuLayout/index.tsx b/app/components/MenuLayout/index.tsx
index 8145690c8..57f4c0c20 100644
--- a/app/components/MenuLayout/index.tsx
+++ b/app/components/MenuLayout/index.tsx
@@ -61,6 +61,7 @@ export default function MenuLayout<
       <div
         className={`
           w-[100%] relative bg-center
+          max-md:h-[100%]
           md:flex md:my-2.5
         `}
       >
diff --git a/app/components/mask.tsx b/app/components/mask.tsx
index 82d980686..2a6cd3984 100644
--- a/app/components/mask.tsx
+++ b/app/components/mask.tsx
@@ -398,7 +398,7 @@ export function ContextPrompts(props: {
   );
 }
 
-export function MaskPage() {
+export function MaskPage(props: { className?: string }) {
   const navigate = useNavigate();
 
   const maskStore = useMaskStore();
@@ -470,9 +470,10 @@ export function MaskPage() {
   return (
     <>
       <div
-        className={`${styles["mask-page"]} !bg-gray-50 ${
-          isMobileScreen ? "pb-chat-panel-mobile" : ""
-        }`}
+        className={`
+          ${styles["mask-page"]} 
+          ${props.className}
+          `}
       >
         <div className="window-header">
           <div className="window-header-title">
diff --git a/app/components/new-chat.tsx b/app/components/new-chat.tsx
index aba3c5b1c..59a26ca32 100644
--- a/app/components/new-chat.tsx
+++ b/app/components/new-chat.tsx
@@ -72,7 +72,7 @@ function useMaskGroup(masks: Mask[]) {
   return groups;
 }
 
-export function NewChat() {
+export function NewChat(props: { className?: string }) {
   const chatStore = useChatStore();
   const maskStore = useMaskStore();
 
@@ -115,9 +115,10 @@ export function NewChat() {
 
   return (
     <div
-      className={`${styles["new-chat"]} !bg-gray-50 px-1 ${
-        isMobileScreen ? "pb-chat-panel-mobile" : ""
-      }`}
+      className={`
+      ${styles["new-chat"]}
+      ${props.className}
+      `}
     >
       <div className={styles["mask-header"]}>
         <IconButton
diff --git a/app/containers/Chat/components/ModelSelect.tsx b/app/containers/Chat/components/ModelSelect.tsx
index c3d44fafe..4091a77ea 100644
--- a/app/containers/Chat/components/ModelSelect.tsx
+++ b/app/containers/Chat/components/ModelSelect.tsx
@@ -124,13 +124,17 @@ const ModelSelect = () => {
 
   return (
     <Popover
-      content={content({ close: () => {} })}
+      content={
+        <div className="max-h-chat-actions-select-model-popover overflow-y-auto">
+          {content({ close: () => {} })}
+        </div>
+      }
       trigger="click"
       noArrow
       placement={
         position?.poi.relativePosition[1] !== Orientation.bottom ? "lb" : "lt"
       }
-      popoverClassName="border border-select-popover rounded-lg shadow-select-popover-shadow w-actions-popover  bg-model-select-popover-panel max-h-chat-actions-select-model-popover  w-[280px]"
+      popoverClassName="border border-select-popover rounded-lg shadow-select-popover-shadow w-actions-popover  bg-model-select-popover-panel w-[280px]"
       onShow={(e) => {
         if (e) {
           autoScrollToSelectedModal();
diff --git a/app/containers/Chat/components/PromptHint.tsx b/app/containers/Chat/components/PromptHint.tsx
index ca7d59857..f956ebc43 100644
--- a/app/containers/Chat/components/PromptHint.tsx
+++ b/app/containers/Chat/components/PromptHint.tsx
@@ -67,15 +67,14 @@ export default function PromptHints(props: {
   return (
     <div
       className={`
-      ${styles["prompt-hints"]} 
-      transition-all duration-300 shadow-prompt-hint-container rounded-none w-[100%] flex flex-col-reverse overflow-auto
-      ${
-        notShowPrompt
-          ? "max-h-[0vh] border-none"
-          : "border-b pt-2.5 max-h-[50vh]"
-      } 
-      ${props.className}
-    `}
+        transition-all duration-300 shadow-prompt-hint-container rounded-none  flex flex-col-reverse overflow-x-hidden
+        ${
+          notShowPrompt
+            ? "max-h-[0vh] border-none"
+            : "border-b pt-2.5 max-h-[50vh]"
+        } 
+        ${props.className}
+      `}
     >
       {internalPrompts.map((prompt, i) => (
         <div
diff --git a/app/containers/Chat/index.module.scss b/app/containers/Chat/index.module.scss
index e4478a487..b8ee44d32 100644
--- a/app/containers/Chat/index.module.scss
+++ b/app/containers/Chat/index.module.scss
@@ -525,38 +525,33 @@
   text-overflow: ellipsis;
 }
 
-.prompt-hints {
-  .prompt-hint {
-    color:var(--btn-default-text);
-    padding: 6px 10px;
-    // animation: slide-in ease 0.3s;
-    // cursor: pointer;
-    // transition: all ease 0.3s;
-    border: transparent 1px solid;
-    margin: 4px;
-    border-radius: 8px;
+.prompt-hint {
+  color:var(--btn-default-text);
+  padding: 6px 10px;
+  border: transparent 1px solid;
+  margin: 4px;
+  border-radius: 8px;
 
-    &:not(:last-child) {
-      margin-top: 0;
-    }
+  &:not(:last-child) {
+    margin-top: 0;
+  }
 
-    .hint-title {
-      font-size: 12px;
-      font-weight: bolder;
+  .hint-title {
+    font-size: 12px;
+    font-weight: bolder;
 
-      @include single-line();
-    }
+    @include single-line();
+  }
 
-    .hint-content {
-      font-size: 12px;
+  .hint-content {
+    font-size: 12px;
 
-      @include single-line();
-    }
+    @include single-line();
+  }
 
-    &-selected,
-    &:hover {
-      border-color: var(--primary);
-    }
+  &-selected,
+  &:hover {
+    border-color: var(--primary);
   }
 }
 
diff --git a/app/containers/index.tsx b/app/containers/index.tsx
index a8e8bf5b2..7552d31b1 100644
--- a/app/containers/index.tsx
+++ b/app/containers/index.tsx
@@ -111,8 +111,30 @@ export default function Home() {
           <ErrorBoundary>
             <Routes>
               <Route path={Path.Home} element={<Chat />} />
-              <Route path={Path.NewChat} element={<NewChat />} />
-              <Route path={Path.Masks} element={<MaskPage />} />
+              <Route
+                path={Path.NewChat}
+                element={
+                  <NewChat
+                    className={`
+              md:w-[100%] px-1
+              ${config.theme === "dark" ? "" : "bg-gray-50"}
+              ${config.isMobileScreen ? "pb-chat-panel-mobile" : ""}
+              `}
+                  />
+                }
+              />
+              <Route
+                path={Path.Masks}
+                element={
+                  <MaskPage
+                    className={`
+                md:w-[100%]
+                ${config.theme === "dark" ? "" : "bg-gray-50"}
+                ${config.isMobileScreen ? "pb-chat-panel-mobile" : ""}
+              `}
+                  />
+                }
+              />
               <Route path={Path.Chat} element={<Chat />} />
               <Route path={Path.Settings} element={<Settings />} />
             </Routes>
diff --git a/app/hooks/useSwitchTheme.ts b/app/hooks/useSwitchTheme.ts
index 4fb094946..ac8132d62 100644
--- a/app/hooks/useSwitchTheme.ts
+++ b/app/hooks/useSwitchTheme.ts
@@ -1,5 +1,6 @@
 import { useLayoutEffect } from "react";
 import { Theme, useAppConfig } from "@/app/store/config";
+import { getCSSVar } from "../utils";
 
 const DARK_CLASS = "dark-new";
 const LIGHT_CLASS = "light-new";
@@ -17,4 +18,31 @@ export function useSwitchTheme() {
       document.body.classList.add(LIGHT_CLASS);
     }
   }, [config.theme]);
+
+  useLayoutEffect(() => {
+    document.body.classList.remove("light");
+    document.body.classList.remove("dark");
+
+    if (config.theme === "dark") {
+      document.body.classList.add("dark");
+    } else if (config.theme === "light") {
+      document.body.classList.add("light");
+    }
+
+    const metaDescriptionDark = document.querySelector(
+      'meta[name="theme-color"][media*="dark"]',
+    );
+    const metaDescriptionLight = document.querySelector(
+      'meta[name="theme-color"][media*="light"]',
+    );
+
+    if (config.theme === "auto") {
+      metaDescriptionDark?.setAttribute("content", "#151515");
+      metaDescriptionLight?.setAttribute("content", "#fafafa");
+    } else {
+      const themeColor = getCSSVar("--theme-color");
+      metaDescriptionDark?.setAttribute("content", themeColor);
+      metaDescriptionLight?.setAttribute("content", themeColor);
+    }
+  }, [config.theme]);
 }