chore: update create tag dialog style (#818)

* chore: update create tag dialog

* chore: update

web/src/components/CreateTagDialog.tsx

@@ -1,5 +1,5 @@
 import { TextField } from "@mui/joy";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useTagStore } from "../store/module";
 import { getTagSuggestionList } from "../helpers/api";
 import Tag from "../labs/marked/parser/Tag";
@@ -31,8 +31,14 @@ const CreateTagDialog: React.FC<Props> = (props: Props) => {
     });
   }, []);
 
-  const handleTagNameChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleTagNameInputKeyDown = (event: React.KeyboardEvent) => {
-    const tagName = e.target.value as string;
+    if (event.key === "Enter") {
+      handleSaveBtnClick();
+    }
+  };
+
+  const handleTagNameChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const tagName = event.target.value;
     setTagName(tagName.trim());
   };
 
@@ -48,6 +54,7 @@ const CreateTagDialog: React.FC<Props> = (props: Props) => {
 
     try {
       await tagStore.upsertTag(tagName);
+      setTagName("");
     } catch (error: any) {
       console.error(error);
       toastHelper.error(error.response.data.message);
@@ -80,9 +87,10 @@ const CreateTagDialog: React.FC<Props> = (props: Props) => {
           placeholder="TAG_NAME"
           value={tagName}
           onChange={handleTagNameChanged}
+          onKeyDown={handleTagNameInputKeyDown}
           fullWidth
           startDecorator={<Icon.Hash className="w-4 h-auto" />}
-          endDecorator={<Icon.CheckCircle onClick={handleSaveBtnClick} className="w-4 h-auto" />}
+          endDecorator={<Icon.Check onClick={handleSaveBtnClick} className="w-4 h-auto cursor-pointer hover:opacity-80" />}
         />
         {tagNameList.length > 0 && (
           <>
@@ -90,7 +98,7 @@ const CreateTagDialog: React.FC<Props> = (props: Props) => {
             <div className="w-full flex flex-row justify-start items-start flex-wrap">
               {tagNameList.map((tag) => (
                 <span
-                  className="text-sm mr-2 mt-1 font-mono cursor-pointer truncate hover:opacity-60 hover:line-through"
+                  className="max-w-[120px] text-sm mr-2 mt-1 font-mono cursor-pointer truncate dark:text-gray-300 hover:opacity-60 hover:line-through"
                   key={tag}
                   onClick={() => handleDeleteTag(tag)}
                 >
@@ -107,7 +115,7 @@ const CreateTagDialog: React.FC<Props> = (props: Props) => {
             <div className="w-full flex flex-row justify-start items-start flex-wrap">
               {shownSuggestTagNameList.map((tag) => (
                 <span
-                  className="text-sm mr-2 mt-1 font-mono cursor-pointer truncate hover:opacity-60"
+                  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)}
                 >
@@ -116,7 +124,7 @@ const CreateTagDialog: React.FC<Props> = (props: Props) => {
               ))}
             </div>
             <button
-              className="mt-2 text-sm border px-2 leading-6 rounded cursor-pointer hover:opacity-80 hover:shadow"
+              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

web/src/components/Sidebar.tsx

@@ -46,8 +46,12 @@ const Sidebar = () => {
             </>
           )}
         </div>
-        {!userStore.isVisitorMode() && <ShortcutList />}
+        {!userStore.isVisitorMode() && (
-        <TagList />
+          <>
+            <ShortcutList />
+            <TagList />
+          </>
+        )}
       </aside>
     </>
   );

web/src/components/TagList.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useLocationStore, useTagStore, useUserStore } from "../store/module";
+import { useLocationStore, useTagStore } from "../store/module";
 import useToggle from "../hooks/useToggle";
 import Icon from "./Icon";
 import showCreateTagDialog from "./CreateTagDialog";
@@ -15,7 +15,6 @@ interface Tag {
 const TagList = () => {
   const { t } = useTranslation();
   const locationStore = useLocationStore();
-  const userStore = useUserStore();
   const tagStore = useTagStore();
   const tagsText = tagStore.state.tags;
   const query = locationStore.state.query;
@@ -84,7 +83,7 @@ const TagList = () => {
         {tags.map((t, idx) => (
           <TagItemContainer key={t.text + "-" + idx} tag={t} tagQuery={query?.tag} />
         ))}
-        {!userStore.isVisitorMode() && tags.length === 0 && <p className="tip-text">{t("tag-list.tip-text")}</p>}
+        {tags.length < 3 && <p className="tip-text">{t("tag-list.tip-text")}</p>}
       </div>
     </div>
   );

web/src/less/tag-list.less

@@ -54,7 +54,7 @@
     }
 
     > .tip-text {
-      @apply w-full bg-gray-50 dark:bg-zinc-700 mt-2 pl-4 leading-8 rounded text-sm text-gray-400 font-mono;
+      @apply w-full bg-gray-50 dark:bg-zinc-700 mt-2 px-4 py-1 leading-5 rounded text-sm text-gray-400 font-mono;
     }
   }
 }

web/src/locales/en.json

@@ -141,7 +141,7 @@
     "text-placeholder": "Starts with ^ to use regex"
   },
   "tag-list": {
-    "tip-text": "Enter `#tag ` to create"
+    "tip-text": "Click the '+' button or input `#tag ` to create a new tag."
   },
   "search": {
     "quickly-filter": "Quickly filter"