chore: update create tag dialog (#881)

web/src/components/CreateTagDialog.tsx

@@ -22,6 +22,7 @@ const CreateTagDialog: React.FC<Props> = (props: Props) => {
   const tagStore = useTagStore();
   const [tagName, setTagName] = useState<string>("");
   const [suggestTagNameList, setSuggestTagNameList] = useState<string[]>([]);
+  const [showTagSuggestions, setShowTagSuggestions] = useState<boolean>(false);
   const tagNameList = tagStore.state.tags;
   const shownSuggestTagNameList = suggestTagNameList.filter((tag) => !tagNameList.includes(tag));
 
@@ -42,10 +43,14 @@ const CreateTagDialog: React.FC<Props> = (props: Props) => {
     setTagName(tagName.trim());
   };
 
-  const handleUpsertSuggestTag = async (tagName: string) => {
+  const handleUpsertTag = async (tagName: string) => {
     await tagStore.upsertTag(tagName);
   };
 
+  const handleToggleShowSuggestionTags = () => {
+    setShowTagSuggestions((state) => !state);
+  };
+
   const handleSaveBtnClick = async () => {
     if (!validateTagName(tagName)) {
       toastHelper.error("Invalid tag name");
@@ -111,24 +116,30 @@ const CreateTagDialog: React.FC<Props> = (props: Props) => {
 
         {shownSuggestTagNameList.length > 0 && (
           <>
-            <p className="w-full mt-2 mb-1 text-sm text-gray-400">Tag suggestions</p>
-            <div className="w-full flex flex-row justify-start items-start flex-wrap">
-              {shownSuggestTagNameList.map((tag) => (
-                <span
-                  className="max-w-[120px] text-sm mr-2 mt-1 font-mono cursor-pointer truncate dark:text-gray-300 hover:opacity-60"
-                  key={tag}
-                  onClick={() => handleUpsertSuggestTag(tag)}
-                >
-                  #{tag}
-                </span>
-              ))}
+            <div className="mt-4 mb-1 text-sm w-full flex flex-row justify-start items-center">
+              <span className="text-gray-400">Tag suggestions</span>
+              <button className="btn-normal ml-2 px-2 py-0 leading-6 font-mono" onClick={handleToggleShowSuggestionTags}>
+                {showTagSuggestions ? "hide" : "show"}
+              </button>
             </div>
-            <button
-              className="mt-2 text-sm border px-2 leading-6 rounded cursor-pointer dark:border-gray-400 dark:text-gray-300 hover:opacity-80 hover:shadow"
-              onClick={handleSaveSuggestTagList}
-            >
-              Save all
-            </button>
+            {showTagSuggestions && (
+              <>
+                <div className="w-full flex flex-row justify-start items-start flex-wrap">
+                  {shownSuggestTagNameList.map((tag) => (
+                    <span
+                      className="max-w-[120px] text-sm mr-2 mt-1 font-mono cursor-pointer truncate dark:text-gray-300 hover:opacity-60"
+                      key={tag}
+                      onClick={() => handleUpsertTag(tag)}
+                    >
+                      #{tag}
+                    </span>
+                  ))}
+                </div>
+                <button className="btn-normal mt-2 px-2 py-0 leading-6 font-mono" onClick={handleSaveSuggestTagList}>
+                  Save all
+                </button>
+              </>
+            )}
           </>
         )}
       </div>

web/src/components/UpdateCustomizedProfileDialog.tsx

-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useGlobalStore } from "../store/module";
 import * as api from "../helpers/api";
@@ -15,11 +15,7 @@ const UpdateCustomizedProfileDialog: React.FC<Props> = ({ destroy }: Props) => {
   const globalStore = useGlobalStore();
   const [state, setState] = useState<CustomizedProfile>(globalStore.state.systemStatus.customizedProfile);
 
-  useEffect(() => {
-    // do nth
-  }, []);
-
-  const handleCloseBtnClick = () => {
+  const handleCloseButtonClick = () => {
     destroy();
   };
 
@@ -68,9 +64,20 @@ const UpdateCustomizedProfileDialog: React.FC<Props> = ({ destroy }: Props) => {
     });
   };
 
-  const handleSaveBtnClick = async () => {
-    if (state.name === "" || state.logoUrl === "") {
-      toastHelper.error(t("message.fill-all"));
+  const handleRestoreButtonClick = () => {
+    setState({
+      name: "memos",
+      logoUrl: "/logo.png",
+      description: "",
+      locale: "en",
+      appearance: "system",
+      externalUrl: "",
+    });
+  };
+
+  const handleSaveButtonClick = async () => {
+    if (state.name === "") {
+      toastHelper.error("Please fill server name");
       return;
     }
 
@@ -92,7 +99,7 @@ const UpdateCustomizedProfileDialog: React.FC<Props> = ({ destroy }: Props) => {
     <>
       <div className="dialog-header-container">
         <p className="title-text">{t("setting.system-section.customize-server.title")}</p>
-        <button className="btn close-btn" onClick={handleCloseBtnClick}>
+        <button className="btn close-btn" onClick={handleCloseButtonClick}>
           <Icon.X />
         </button>
       </div>
@@ -110,13 +117,20 @@ const UpdateCustomizedProfileDialog: React.FC<Props> = ({ destroy }: Props) => {
         <LocaleSelect className="w-full" value={state.locale} onChange={handleLocaleSelectChange} />
         <p className="text-sm mb-1 mt-2">Server appearance</p>
         <AppearanceSelect className="w-full" value={state.appearance} onChange={handleAppearanceSelectChange} />
-        <div className="mt-4 w-full flex flex-row justify-end items-center space-x-2">
-          <span className="btn-text" onClick={handleCloseBtnClick}>
-            {t("common.cancel")}
-          </span>
-          <span className="btn-primary" onClick={handleSaveBtnClick}>
-            {t("common.save")}
-          </span>
+        <div className="mt-4 w-full flex flex-row justify-between items-center space-x-2">
+          <div className="flex flex-row justify-start items-center">
+            <button className="btn-normal" onClick={handleRestoreButtonClick}>
+              {t("common.restore")}
+            </button>
+          </div>
+          <div className="flex flex-row justify-end items-center">
+            <button className="btn-text" onClick={handleCloseButtonClick}>
+              {t("common.cancel")}
+            </button>
+            <button className="btn-primary" onClick={handleSaveButtonClick}>
+              {t("common.save")}
+            </button>
+          </div>
         </div>
       </div>
     </>