feat: Optimize UI details for prompt and Prompt Market

LTopx · Jun 10, 2023 · 91875fd · 91875fd · vercel · Jun 10, 2023
1 parent a5a02c9
commit 91875fd
Show file tree

Hide file tree

Showing 15 changed files with 56 additions and 121 deletions.
diff --git a/CHANGE_LOG.md b/CHANGE_LOG.md
@@ -16,6 +16,7 @@
 
 - Optimized the display effect when the username is missing.
 - Numerous other minor optimizations.
+- Optimize UI details for prompt and Prompt Market
 
 ## v0.5.3
 

diff --git a/CHANGE_LOG.zh_CN.md b/CHANGE_LOG.zh_CN.md
@@ -16,6 +16,7 @@
 
 - 优化用户名缺失时的显示效果
 - 其他大量细节优化
+- 优化 prompt 和 Prompt Market 的 UI 细节
 
 ## v0.5.3
 

diff --git a/package.json b/package.json
@@ -24,15 +24,13 @@
     "@radix-ui/react-popover": "1.0.6",
     "@radix-ui/react-select": "1.2.2",
     "@radix-ui/react-slider": "1.1.2",
-    "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-tabs": "1.0.4",
     "@radix-ui/react-toast": "1.1.4",
-    "@react-email/button": "^0.0.8",
-    "@react-email/components": "^0.0.6",
-    "@react-email/html": "^0.0.4",
-    "@react-email/render": "^0.0.7",
+    "@react-email/components": "0.0.6",
+    "@react-email/render": "0.0.7",
     "@sentry/nextjs": "7.54.0",
     "@svgr/webpack": "8.0.1",
-    "@types/node": "20.2.5",
+    "@types/node": "20.2.6",
     "@types/react": "18.2.9",
     "@types/react-dom": "18.2.4",
     "@upstash/redis": "1.21.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/chatSection/chatList/configure.tsx b/src/components/chatSection/chatList/configure.tsx
@@ -126,7 +126,7 @@ const Configure = React.memo(() => {
 
   return (
     <>
-      <div className="flex flex-col h-full w-full pt-16 pb-24 top-0 left-0 gap-8 absolute">
+      <div className="flex flex-col h-full w-full pt-16 pb-24 top-0 left-0 gap-6 absolute">
         {isShow && (
           <motion.div
             className="flex flex-col items-center justify-center"
@@ -190,7 +190,7 @@ const Configure = React.memo(() => {
                   )}
                   Prompt
                 </div>
-                <div className="text-neutral-800 dark:text-neutral-100 text-sm line-clamp-3">
+                <div className="text-neutral-800 dark:text-neutral-100 text-sm line-clamp-6 hover:line-clamp-none">
                   {findChannel?.channel_prompt}
                 </div>
               </div>
@@ -202,6 +202,27 @@ const Configure = React.memo(() => {
           </motion.div>
         )}
 
+        {isShow && recentPrompt.length && (
+          <motion.div
+            className="flex justify-center"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.5 }}
+          >
+            <div className="bg-neutral-300 w-48 h-[1px] relative">
+              <span
+                className={cn(
+                  "absolute text-sm px-3 left-[50%] translate-x-[-50%] translate-y-[-50%] select-none whitespace-nowrap",
+                  "bg-[#f8f8fa] dark:bg-[#181818]",
+                  "text-gray-500 dark:text-gray-300"
+                )}
+              >
+                {t("recently-used")}
+              </span>
+            </div>
+          </motion.div>
+        )}
+
         {isShow && (
           <motion.div
             className="px-6 flex justify-center"

diff --git a/src/components/menu/index.tsx b/src/components/menu/index.tsx
@@ -10,7 +10,7 @@ import {
   AiOutlineSetting,
 } from "react-icons/ai";
 import { MdOutlineLightMode, MdDarkMode } from "react-icons/md";
-import { HiLightBulb, HiOutlineTranslate } from "react-icons/hi";
+import { HiOutlineTranslate } from "react-icons/hi";
 import { RiFeedbackLine } from "react-icons/ri";
 import { useDateFormat } from "l-hooks";
 import { v4 as uuidv4 } from "uuid";
@@ -151,8 +151,6 @@ const Menu: React.FC = () => {
 
   const onToggleTheme = () => setTheme(nowTheme === "light" ? "dark" : "light");
 
-  const onOpenPrompt = () => alert("Prompt Manage ToDo...");
-
   const onLocaleChange = (value: string) => {
     if (value === locale) return;
     router.replace(value);
@@ -314,18 +312,6 @@ const Menu: React.FC = () => {
               <AiFillGithub size={20} />
             </a>
           </div>
-          <div className="flex flex-1 justify-center">
-            <div
-              onClick={onOpenPrompt}
-              className={cn(
-                "w-8 h-8 flex justify-center items-center cursor-pointer transition-colors rounded-md",
-                "hover:bg-gray-200/60",
-                "dark:hover:bg-slate-700/70"
-              )}
-            >
-              <HiLightBulb size={20} />
-            </div>
-          </div>
           <Dropdown
             selectable
             options={lans}

diff --git a/src/components/menu/mobile.tsx b/src/components/menu/mobile.tsx
@@ -10,7 +10,7 @@ import {
   AiOutlineSetting,
 } from "react-icons/ai";
 import { MdOutlineLightMode, MdDarkMode } from "react-icons/md";
-import { HiLightBulb, HiOutlineTranslate } from "react-icons/hi";
+import { HiOutlineTranslate } from "react-icons/hi";
 import { RiFeedbackLine } from "react-icons/ri";
 import { v4 as uuidv4 } from "uuid";
 import { cn } from "@/lib";
@@ -114,8 +114,6 @@ const MobileMenu: React.FC = () => {
 
   const onToggleTheme = () => setTheme(nowTheme === "light" ? "dark" : "light");
 
-  const onOpenPrompt = () => alert("Prompt Manage ToDo...");
-
   const onLocaleChange = (value: string) => {
     if (value === locale) return;
     onClose();
@@ -284,18 +282,6 @@ const MobileMenu: React.FC = () => {
                 <AiFillGithub size={20} />
               </a>
             </div>
-            <div className="flex-1 flex justify-center">
-              <div
-                onClick={onOpenPrompt}
-                className={cn(
-                  "w-8 h-8 flex justify-center items-center cursor-pointer transition-colors rounded-md",
-                  "hover:bg-gray-200/60",
-                  "dark:hover:bg-slate-700/70"
-                )}
-              >
-                <HiLightBulb size={20} />
-              </div>
-            </div>
             <Dropdown
               selectable
               options={lans}

diff --git a/src/components/prompt/add/index.tsx b/src/components/prompt/add/index.tsx
@@ -142,7 +142,7 @@ const Add = React.forwardRef((_, forwardedRef) => {
       onClose={onClose}
       onOk={onOk}
     >
-      <div className="flex flex-col gap-3">
+      <div className="flex flex-col gap-4">
         <div>
           <div className="text-sm mb-1">{t("title")}</div>
           <div className="flex gap-2 items-center">

diff --git a/src/components/prompt/market/index.tsx b/src/components/prompt/market/index.tsx
@@ -130,35 +130,35 @@ const PromptMarket: React.FC = () => {
         footer={null}
       >
         <Tabs.Root value={type} onValueChange={onChangeTab}>
-          <div className="flex mb-2 justify-between items-center">
+          <div className="flex gap-4 mb-2 justify-between items-center">
             <Tabs.List
               className={cn(
-                "rounded-md flex text-sm w-auto p-1 text-[hsl(215.4,16.3%,56.9%)]",
+                "flex-1 flex rounded-md text-sm w-auto p-1 text-[hsl(215.4,16.3%,56.9%)]",
                 "bg-neutral-200/70 dark:bg-slate-900"
               )}
             >
               <Tabs.Trigger
                 value="market"
                 className={cn(
-                  "rounded-md py-1.5 px-3 transition-colors",
+                  "rounded-md py-1.5 px-3 transition-colors flex-1",
                   "data-[state=active]:bg-white data-[state=active]:text-neutral-950",
                   "dark:data-[state=active]:bg-slate-700 dark:data-[state=active]:text-[hsl(213,31%,91%)]"
                 )}
               >
-                <div className="flex gap-2 items-center">
+                <div className="flex gap-2 items-center justify-center">
                   <LuStore size={16} />
                   <span className="hidden lg:block">{t("market")}</span>
                 </div>
               </Tabs.Trigger>
               <Tabs.Trigger
                 value="awesome-chatgpt-prompts"
                 className={cn(
-                  "rounded-md py-1.5 px-3 transition-colors",
+                  "rounded-md py-1.5 px-3 transition-colors flex-1",
                   "data-[state=active]:bg-white data-[state=active]:text-neutral-950",
                   "dark:data-[state=active]:bg-slate-700 dark:data-[state=active]:text-[hsl(213,31%,91%)]"
                 )}
               >
-                <div className="flex gap-2 items-center">
+                <div className="flex gap-2 items-center justify-center">
                   <MdOutlineAutoAwesome size={16} />
                   <span className="hidden lg:block">
                     Awesome ChatGPT Prompts
@@ -170,25 +170,25 @@ const PromptMarket: React.FC = () => {
                   <Tabs.Trigger
                     value="custom"
                     className={cn(
-                      "rounded-md py-1.5 px-3 transition-colors",
+                      "rounded-md py-1.5 px-3 transition-colors flex-1",
                       "data-[state=active]:bg-white data-[state=active]:text-neutral-950",
                       "dark:data-[state=active]:bg-slate-700 dark:data-[state=active]:text-[hsl(213,31%,91%)]"
                     )}
                   >
-                    <div className="flex gap-2 items-center">
+                    <div className="flex gap-2 items-center justify-center">
                       <BiCustomize size={16} />
                       <span className="hidden lg:block">{t("custom")}</span>
                     </div>
                   </Tabs.Trigger>
                   <Tabs.Trigger
                     value="review"
                     className={cn(
-                      "rounded-md py-1.5 px-3 transition-colors",
+                      "rounded-md py-1.5 px-3 transition-colors flex-1",
                       "data-[state=active]:bg-white data-[state=active]:text-neutral-950",
                       "dark:data-[state=active]:bg-slate-700 dark:data-[state=active]:text-[hsl(213,31%,91%)]"
                     )}
                   >
-                    <div className="flex gap-2 items-center">
+                    <div className="flex gap-2 items-center justify-center">
                       <SiCodereview size={16} />
                       <span className="hidden lg:block">
                         {t("under-review")}
@@ -198,13 +198,13 @@ const PromptMarket: React.FC = () => {
                 </>
               )}
             </Tabs.List>
-            <div className="flex gap-2">
-              {type === "custom" && (
+            {type === "custom" && (
+              <div className="flex gap-2">
                 <Button type="primary" onClick={onAdd}>
                   {tCommon("add")}
                 </Button>
-              )}
-            </div>
+              </div>
+            )}
           </div>
           <Tabs.Content
             value="market"

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -102,6 +102,7 @@
     "model": "Model",
     "no-data": "No Data",
     "prompt-market": "Prompt Market",
+    "recently-used": "Recently used",
     "release": "Release",
     "release-prompt": "Release Prompt",
     "release-success": "Release successfully",

diff --git a/src/locales/zh-CN.json b/src/locales/zh-CN.json
@@ -102,6 +102,7 @@
     "model": "语言模型",
     "no-data": "暂无数据",
     "prompt-market": "Prompt 集市",
+    "recently-used": "最近使用",
     "release": "发布",
     "release-prompt": "发布 Prompt",
     "release-success": "发布成功",

diff --git a/src/prompt/default.ts b/src/prompt/default.ts
diff --git a/src/prompt/index.ts b/src/prompt/index.ts
diff --git a/src/prompt/market.ts b/src/prompt/market.ts
diff --git a/src/prompt/types.ts b/src/prompt/types.ts