chore: update tag selector

web/src/components/MemoEditor.tsx

@@ -254,7 +254,7 @@ const MemoEditor: React.FC<Props> = () => {
 
   const handleTagSeletorClick = useCallback((event: React.MouseEvent) => {
     if (tagSeletorRef.current !== event.target && tagSeletorRef.current?.contains(event.target as Node)) {
-      editorRef.current?.insertText((event.target as HTMLElement).textContent ?? "");
+      editorRef.current?.insertText((event.target as HTMLElement).textContent + " " ?? "");
       toggleTagSeletor(false);
     }
   }, []);

web/src/components/TagList.tsx

@@ -77,7 +77,7 @@ const TagList: React.FC<Props> = () => {
         ))}
         <Only when={tags.length < 5 && memoService.initialized}>
           <p className="tag-tip-container">
-            Enter <span className="code-text"># Tag </span> to create a tag
+            Enter <span className="code-text">#Tag </span> to create a tag
           </p>
         </Only>
       </div>

web/src/components/UserBanner.tsx

@@ -28,9 +28,10 @@ const UserBanner: React.FC<Props> = () => {
 
   return (
     <div className="user-banner-container">
-      <p className="username-text" onClick={handleUsernameClick}>
+      <div className="username-container" onClick={handleUsernameClick}>
-        {username}
+        <span className="username-text">{username}</span>
-      </p>
+        {user?.role === "OWNER" ? <span className="tag">MOD</span> : null}
+      </div>
       <span className="action-btn menu-popup-btn" onClick={handlePopupBtnClick}>
         <img src="/icons/more.svg" className="icon-img" />
       </span>

web/src/less/user-banner.less

@@ -4,8 +4,16 @@
   .flex(row, space-between, center);
   @apply w-full h-auto px-6 flex-nowrap mb-1;
 
+  > .username-container {
+    @apply shrink flex flex-row justify-start items-center flex-nowrap truncate;
+
     > .username-text {
-    @apply font-bold text-lg pr-2 text-slate-800 cursor-pointer shrink truncate;
+      @apply font-bold text-lg pr-1 text-slate-800 cursor-pointer shrink truncate;
+    }
+
+    > .tag {
+      @apply text-xs px-1 bg-blue-500 rounded text-white;
+    }
   }
 
   > .action-btn {