chore: tweak route enum

web/src/components/MemoContent/index.tsx

@@ -4,7 +4,6 @@ import useCurrentUser from "@/hooks/useCurrentUser";
 import { useMemoStore } from "@/store/v1";
 import { Node, NodeType } from "@/types/node";
 import { useTranslate } from "@/utils/i18n";
-import Icon from "../Icon";
 import Renderer from "./Renderer";
 import { RendererContext } from "./types";
 
@@ -89,15 +88,14 @@ const MemoContent: React.FC<Props> = (props: Props) => {
               return <Renderer key={`${node.type}-${index}`} index={String(index)} node={node} />;
             })}
           </div>
-          {memo && showCompactMode && (
+          {showCompactMode && (
             <div className="w-full mt-1">
-              <div
-                className="w-auto inline-flex flex-row justify-start items-center cursor-pointer text-sm text-blue-600 dark:text-blue-400 hover:opacity-80"
+              <span
+                className="w-auto flex flex-row justify-start items-center cursor-pointer text-sm text-blue-600 dark:text-blue-400 hover:opacity-80"
                 onClick={() => setShowCompactMode(false)}
               >
                 <span>{t("memo.show-more")}</span>
-                <Icon.ChevronRight className="w-4 h-auto" />
-              </div>
+              </span>
             </div>
           )}
         </div>

web/src/components/MemoFilter.tsx

@@ -45,7 +45,7 @@ const MemoFilter = (props: Props) => {
           filterStore.setTagFilter(undefined);
         }}
       >
-        <Icon.Tag className="w-4 h-auto mr-1 text-gray-500 dark:text-gray-400" /> {tagQuery}
+        <Icon.Hash className="w-4 h-auto mr-1 text-gray-500 dark:text-gray-400" /> {tagQuery}
         <Icon.X className="w-4 h-auto ml-1 opacity-40" />
       </div>
       <div

web/src/components/Navigation.tsx

@@ -3,6 +3,7 @@ import classNames from "classnames";
 import { useEffect } from "react";
 import { NavLink } from "react-router-dom";
 import useCurrentUser from "@/hooks/useCurrentUser";
+import { Routes } from "@/router";
 import { useInboxStore } from "@/store/v1";
 import { Inbox_Status } from "@/types/proto/api/v2/inbox_service";
 import { useTranslate } from "@/utils/i18n";
@@ -49,25 +50,25 @@ const Navigation = (props: Props) => {
 
   const homeNavLink: NavLinkItem = {
     id: "header-home",
-    path: "/",
+    path: Routes.HOME,
     title: t("common.home"),
     icon: <Icon.Home className="w-6 h-auto opacity-70" />,
   };
   const timelineNavLink: NavLinkItem = {
     id: "header-timeline",
-    path: "/timeline",
+    path: Routes.TIMELINE,
     title: t("timeline.title"),
     icon: <Icon.GanttChartSquare className="w-6 h-auto opacity-70" />,
   };
   const resourcesNavLink: NavLinkItem = {
     id: "header-resources",
-    path: "/resources",
+    path: Routes.RESOURCES,
     title: t("common.resources"),
     icon: <Icon.Paperclip className="w-6 h-auto opacity-70" />,
   };
   const exploreNavLink: NavLinkItem = {
     id: "header-explore",
-    path: "/explore",
+    path: Routes.EXPLORE,
     title: t("common.explore"),
     icon: <Icon.Globe2 className="w-6 h-auto opacity-70" />,
   };
@@ -79,7 +80,7 @@ const Navigation = (props: Props) => {
   };
   const inboxNavLink: NavLinkItem = {
     id: "header-inbox",
-    path: "/inbox",
+    path: Routes.INBOX,
     title: t("common.inbox"),
     icon: (
       <>
@@ -92,25 +93,25 @@ const Navigation = (props: Props) => {
   };
   const archivedNavLink: NavLinkItem = {
     id: "header-archived",
-    path: "/archived",
+    path: Routes.ARCHIVED,
     title: t("common.archived"),
     icon: <Icon.Archive className="w-6 h-auto opacity-70" />,
   };
   const settingNavLink: NavLinkItem = {
     id: "header-setting",
-    path: "/setting",
+    path: Routes.SETTING,
     title: t("common.settings"),
     icon: <Icon.Settings className="w-6 h-auto opacity-70" />,
   };
   const signInNavLink: NavLinkItem = {
     id: "header-auth",
-    path: "/auth",
+    path: Routes.AUTH,
     title: t("common.sign-in"),
     icon: <Icon.LogIn className="w-6 h-auto opacity-70" />,
   };
   const aboutNavLink: NavLinkItem = {
     id: "header-about",
-    path: "/about",
+    path: Routes.ABOUT,
     title: t("common.about"),
     icon: <Icon.Smile className="w-6 h-auto opacity-70" />,
   };

web/src/components/ShareMemoDialog.tsx

@@ -26,14 +26,14 @@ interface Props extends DialogProps {
 const ShareMemoDialog: React.FC<Props> = (props: Props) => {
   const { memoId, destroy } = props;
   const t = useTranslate();
+  const currentUser = useCurrentUser();
   const userStore = useUserStore();
+  const memoStore = useMemoStore();
   const downloadingImageState = useLoading(false);
   const loadingState = useLoading();
-  const memoElRef = useRef<HTMLDivElement>(null);
-  const memoStore = useMemoStore();
+  const memoContainerRef = useRef<HTMLDivElement>(null);
   const memo = memoStore.getMemoById(memoId);
   const user = userStore.getUserByUsername(extractUsernameFromName(memo.creator));
-  const currentUser = useCurrentUser();
   const readonly = memo?.creatorId !== currentUser?.id;
 
   useEffect(() => {
@@ -48,12 +48,12 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
   };
 
   const handleDownloadImageBtnClick = () => {
-    if (!memoElRef.current) {
+    if (!memoContainerRef.current) {
       return;
     }
 
     downloadingImageState.setLoading();
-    toImage(memoElRef.current, {
+    toImage(memoContainerRef.current, {
       pixelRatio: window.devicePixelRatio * 2,
     })
       .then((url) => {
@@ -151,10 +151,10 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
         <div className="w-full border-t dark:border-zinc-700 overflow-clip">
           <div
             className="w-full h-auto select-none relative flex flex-col justify-start items-start bg-white dark:bg-zinc-800"
-            ref={memoElRef}
+            ref={memoContainerRef}
           >
             <span className="w-full px-6 pt-5 pb-2 text-sm text-gray-500">{getDateTimeString(memo.displayTime)}</span>
-            <div className="w-full px-6 text-base pb-4">
+            <div className="w-full px-6 text-base pb-4 space-y-2">
               <MemoContent memoId={memo.id} content={memo.content} readonly={true} disableFilter />
               <MemoResourceListView resources={memo.resources} />
             </div>

web/src/components/TagList.tsx

@@ -83,7 +83,7 @@ const TagList = () => {
           <Icon.Plus className="w-4 h-4 text-gray-400" />
         </button>
       </div>
-      <div className="flex flex-col justify-start items-start relative w-full h-auto flex-nowrap">
+      <div className="flex flex-col justify-start items-start relative w-full h-auto flex-nowrap gap-1 mt-1">
         {tags.map((t, idx) => (
           <TagItemContainer key={t.text + "-" + idx} tag={t} tagQuery={filter.tag} />
         ))}
@@ -133,7 +133,7 @@ const TagItemContainer: React.FC<TagItemContainerProps> = (props: TagItemContain
 
   return (
     <>
-      <div className="relative group flex flex-row justify-between items-center w-full h-8 py-0 mt-px first:mt-1 rounded-lg text-base sm:text-sm cursor-pointer select-none shrink-0 hover:opacity-80">
+      <div className="relative flex flex-row justify-between items-center w-full leading-6 py-0 mt-px rounded-lg text-base select-none shrink-0">
         <div
           className={`flex flex-row justify-start items-center truncate shrink leading-5 mr-1 text-gray-600 dark:text-gray-400 ${
             isActive && "!text-blue-600"
@@ -141,11 +141,12 @@ const TagItemContainer: React.FC<TagItemContainerProps> = (props: TagItemContain
         >
           <Dropdown>
             <MenuButton slots={{ root: "div" }}>
-              <div className="shrink-0">
-                <Icon.Hash className="w-4 h-auto shrink-0 opacity-60 mr-1" />
+              <div className="shrink-0 group">
+                <Icon.Hash className="group-hover:hidden w-4 h-auto shrink-0 opacity-60 mr-1" />
+                <Icon.MoreVertical className="hidden group-hover:block w-4 h-auto shrink-0 opacity-60 mr-1" />
               </div>
             </MenuButton>
-            <Menu size="sm" placement="bottom-start">
+            <Menu size="sm" placement="bottom">
               <MenuItem onClick={() => showRenameTagDialog({ tag: tag.text })}>
                 <Icon.Edit3 className="w-4 h-auto" />
                 {t("common.rename")}
@@ -156,7 +157,7 @@ const TagItemContainer: React.FC<TagItemContainerProps> = (props: TagItemContain
               </MenuItem>
             </Menu>
           </Dropdown>
-          <span className="truncate" onClick={handleTagClick}>
+          <span className="truncate cursor-pointer hover:opacity-80" onClick={handleTagClick}>
             {tag.key}
           </span>
         </div>
@@ -166,7 +167,7 @@ const TagItemContainer: React.FC<TagItemContainerProps> = (props: TagItemContain
               className={`flex flex-row justify-center items-center w-6 h-6 shrink-0 transition-all rotate-0 ${showSubTags && "rotate-90"}`}
               onClick={handleToggleBtnClick}
             >
-              <Icon.ChevronRight className="w-5 h-5 opacity-40 dark:text-gray-400" />
+              <Icon.ChevronRight className="w-5 h-5 cursor-pointer opacity-40 dark:text-gray-400" />
             </span>
           ) : null}
         </div>

web/src/layouts/HomeLayout.tsx

@@ -26,7 +26,7 @@ const HomeLayout = () => {
         location.pathname,
       )
     ) {
-      navigateTo("/explore");
+      navigateTo(Routes.EXPLORE);
     }
   }, []);
 

web/src/router/index.tsx

@@ -27,6 +27,9 @@ export enum Routes {
   INBOX = "/inbox",
   ARCHIVED = "/archived",
   SETTING = "/setting",
+  EXPLORE = "/explore",
+  ABOUT = "/about",
+  AUTH = "/auth",
 }
 
 const router = createBrowserRouter([
@@ -35,7 +38,7 @@ const router = createBrowserRouter([
     element: <App />,
     children: [
       {
-        path: "/auth",
+        path: Routes.AUTH,
         element: <SuspenseWrapper />,
         children: [
           {
@@ -81,7 +84,7 @@ const router = createBrowserRouter([
             element: <Setting />,
           },
           {
-            path: "explore",
+            path: Routes.EXPLORE,
             element: <Explore />,
           },
           {
@@ -93,7 +96,7 @@ const router = createBrowserRouter([
             element: <UserProfile />,
           },
           {
-            path: "about",
+            path: Routes.ABOUT,
             element: <About />,
           },
           {