chore: replace classnames with clsx

web/package.json

@@ -14,7 +14,7 @@
     "@matejmazur/react-katex": "^3.1.3",
     "@mui/joy": "5.0.0-beta.32",
     "@reduxjs/toolkit": "^2.2.3",
-    "classnames": "^2.5.1",
+    "clsx": "^2.1.1",
     "copy-to-clipboard": "^3.3.3",
     "fuse.js": "^7.0.0",
     "highlight.js": "^11.9.0",
@@ -49,7 +49,7 @@
     "@types/textarea-caret": "^3.0.3",
     "@types/uuid": "^9.0.8",
     "@typescript-eslint/eslint-plugin": "^7.7.0",
-    "@typescript-eslint/parser": "^6.21.0",
+    "@typescript-eslint/parser": "^7.0.0",
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",

web/src/components/ActivityCalendar.tsx

 import { Tooltip } from "@mui/joy";
-import classNames from "classnames";
+import clsx from "clsx";
 import { getNormalizedDateString, getDateWithOffset } from "@/helpers/datetime";
 import { useTranslate } from "@/utils/i18n";
 
@@ -47,7 +47,7 @@ const ActivityCalendar = (props: Props) => {
   }
 
   return (
-    <div className={classNames("w-36 h-auto p-0.5 shrink-0 grid grid-cols-7 grid-flow-row gap-1")}>
+    <div className={clsx("w-36 h-auto p-0.5 shrink-0 grid grid-cols-7 grid-flow-row gap-1")}>
       {days.map((day, index) => {
         const date = getNormalizedDateString(
           getDateWithOffset(`${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`),
@@ -58,7 +58,7 @@ const ActivityCalendar = (props: Props) => {
         return day ? (
           <Tooltip className="shrink-0" key={`${date}-${index}`} title={tooltipText} placement="top" arrow>
             <div
-              className={classNames(
+              className={clsx(
                 "w-4 h-4 text-[9px] rounded-md flex justify-center items-center border border-transparent",
                 getCellAdditionalStyles(count, maxCount),
                 isToday && "border-gray-600 dark:!border-gray-500",
@@ -71,7 +71,7 @@ const ActivityCalendar = (props: Props) => {
         ) : (
           <div
             key={`${date}-${index}`}
-            className={classNames(
+            className={clsx(
               "shrink-0 opacity-30 w-4 h-4 rounded-md flex justify-center items-center border border-transparent",
               getCellAdditionalStyles(count, maxCount),
             )}

web/src/components/Dialog/BaseDialog.tsx

 import { CssVarsProvider } from "@mui/joy";
-import classNames from "classnames";
+import clsx from "clsx";
 import { useEffect, useRef } from "react";
 import { createRoot } from "react-dom/client";
 import { Provider } from "react-redux";
@@ -56,8 +56,8 @@ const BaseDialog: React.FC<Props> = (props: Props) => {
   };
 
   return (
-    <div className={classNames("dialog-wrapper", className)} onMouseDown={handleSpaceClicked}>
-      <div ref={dialogContainerRef} className={classNames("dialog-container")} onMouseDown={(e) => e.stopPropagation()}>
+    <div className={clsx("dialog-wrapper", className)} onMouseDown={handleSpaceClicked}>
+      <div ref={dialogContainerRef} className={clsx("dialog-container")} onMouseDown={(e) => e.stopPropagation()}>
         {children}
       </div>
     </div>

web/src/components/ExploreSidebar/ExploreSidebar.tsx

-import classNames from "classnames";
+import clsx from "clsx";
 import SearchBar from "@/components/SearchBar";
 import UsersSection from "./UsersSection";
 
@@ -9,7 +9,7 @@ interface Props {
 const ExploreSidebar = (props: Props) => {
   return (
     <aside
-      className={classNames(
+      className={clsx(
         "relative w-full h-auto max-h-screen overflow-auto hide-scrollbar flex flex-col justify-start items-start",
         props.className,
       )}

web/src/components/HomeSidebar/HomeSidebar.tsx

-import classNames from "classnames";
+import clsx from "clsx";
 import SearchBar from "@/components/SearchBar";
 import UserStatisticsView from "@/components/UserStatisticsView";
 import useCurrentUser from "@/hooks/useCurrentUser";
@@ -13,7 +13,7 @@ const HomeSidebar = (props: Props) => {
 
   return (
     <aside
-      className={classNames(
+      className={clsx(
         "relative w-full h-auto max-h-screen overflow-auto hide-scrollbar flex flex-col justify-start items-start",
         props.className,
       )}

web/src/components/Inbox/MemoCommentMessage.tsx

 import { Tooltip } from "@mui/joy";
-import classNames from "classnames";
+import clsx from "clsx";
 import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import { activityServiceClient } from "@/grpcweb";
@@ -73,7 +73,7 @@ const MemoCommentMessage = ({ inbox }: Props) => {
   return (
     <div className="w-full flex flex-row justify-start items-start gap-3">
       <div
-        className={classNames(
+        className={clsx(
           "shrink-0 mt-2 p-2 rounded-full border",
           inbox.status === Inbox_Status.UNREAD
             ? "border-blue-600 text-blue-600 bg-blue-50 dark:bg-zinc-800"
@@ -85,7 +85,7 @@ const MemoCommentMessage = ({ inbox }: Props) => {
         </Tooltip>
       </div>
       <div
-        className={classNames(
+        className={clsx(
           "border w-full p-3 px-4 rounded-lg flex flex-col justify-start items-start gap-2 dark:border-zinc-700 hover:bg-gray-100 dark:hover:bg-zinc-700",
           inbox.status !== Inbox_Status.UNREAD && "opacity-60",
         )}

web/src/components/Inbox/VersionUpdateMessage.tsx

 import { Tooltip } from "@mui/joy";
-import classNames from "classnames";
+import clsx from "clsx";
 import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import { activityServiceClient } from "@/grpcweb";
@@ -58,7 +58,7 @@ const VersionUpdateMessage = ({ inbox }: Props) => {
   return (
     <div className="w-full flex flex-row justify-start items-start gap-3">
       <div
-        className={classNames(
+        className={clsx(
           "shrink-0 mt-2 p-2 rounded-full border",
           inbox.status === Inbox_Status.UNREAD
             ? "border-blue-600 text-blue-600 bg-blue-50 dark:bg-zinc-800"
@@ -70,7 +70,7 @@ const VersionUpdateMessage = ({ inbox }: Props) => {
         </Tooltip>
       </div>
       <div
-        className={classNames(
+        className={clsx(
           "border w-full p-3 px-4 rounded-lg flex flex-col justify-start items-start gap-2 dark:border-zinc-700 hover:bg-gray-100 dark:hover:bg-zinc-700",
           inbox.status !== Inbox_Status.UNREAD && "opacity-60",
         )}

web/src/components/MemoActionMenu.tsx

 import { Dropdown, Menu, MenuButton, MenuItem } from "@mui/joy";
-import classNames from "classnames";
+import clsx from "clsx";
 import toast from "react-hot-toast";
 import { useLocation } from "react-router-dom";
 import Icon from "@/components/Icon";
@@ -108,7 +108,7 @@ const MemoActionMenu = (props: Props) => {
   return (
     <Dropdown>
       <MenuButton slots={{ root: "div" }}>
-        <span className={classNames("flex justify-center items-center rounded-full hover:opacity-70", props.className)}>
+        <span className={clsx("flex justify-center items-center rounded-full hover:opacity-70", props.className)}>
           <Icon.MoreVertical className="w-4 h-4 mx-auto text-gray-500 dark:text-gray-400" />
         </span>
       </MenuButton>

web/src/components/MemoContent/CodeBlock.tsx

 import { Checkbox } from "@mui/joy";
-import classNames from "classnames";
+import clsx from "clsx";
 import copy from "copy-to-clipboard";
 import hljs from "highlight.js";
 import { useCallback, useMemo, useState } from "react";
@@ -65,11 +65,9 @@ const CodeBlock: React.FC<Props> = ({ language, content }: Props) => {
       </div>
 
       <div className="overflow-auto">
-        <pre
-          className={classNames(wrap ? "whitespace-pre-wrap" : "no-wrap overflow-auto", "w-full p-2 bg-amber-50 dark:bg-zinc-700 relative")}
-        >
+        <pre className={clsx(wrap ? "whitespace-pre-wrap" : "no-wrap overflow-auto", "w-full p-2 bg-amber-50 dark:bg-zinc-700 relative")}>
           <code
-            className={classNames(`language-${formatedLanguage}`, "block text-sm leading-5")}
+            className={clsx(`language-${formatedLanguage}`, "block text-sm leading-5")}
             dangerouslySetInnerHTML={{ __html: highlightedCode }}
           ></code>
         </pre>

web/src/components/MemoContent/EmbeddedContent/EmbeddedResource.tsx

-import classNames from "classnames";
+import clsx from "clsx";
 import { useEffect } from "react";
 import MemoResourceListView from "@/components/MemoResourceListView";
 import useLoading from "@/hooks/useLoading";
@@ -53,7 +53,7 @@ const EmbeddedResource = ({ resourceId, params: paramsStr }: Props) => {
   }
 
   return (
-    <div className={classNames("max-w-full", getAdditionalClassNameWithParams(params))}>
+    <div className={clsx("max-w-full", getAdditionalClassNameWithParams(params))}>
       <MemoResourceListView resources={[resource]} />
     </div>
   );

web/src/components/MemoContent/Spoiler.tsx

-import classNames from "classnames";
+import clsx from "clsx";
 import { useState } from "react";
 
 interface Props {
@@ -10,10 +10,10 @@ const Spoiler: React.FC<Props> = ({ content }: Props) => {
 
   return (
     <span
-      className={classNames("inline cursor-pointer select-none", isRevealed ? "" : "bg-gray-200 dark:bg-zinc-700")}
+      className={clsx("inline cursor-pointer select-none", isRevealed ? "" : "bg-gray-200 dark:bg-zinc-700")}
       onClick={() => setIsRevealed(!isRevealed)}
     >
-      <span className={classNames(isRevealed ? "opacity-100" : "opacity-0")}>{content}</span>
+      <span className={clsx(isRevealed ? "opacity-100" : "opacity-0")}>{content}</span>
     </span>
   );
 };

web/src/components/MemoContent/Tag.tsx

-import classNames from "classnames";
+import clsx from "clsx";
 import { useContext } from "react";
 import { useFilterStore } from "@/store/module";
 import { RendererContext } from "./types";
@@ -26,7 +26,7 @@ const Tag: React.FC<Props> = ({ content }: Props) => {
 
   return (
     <span
-      className={classNames(
+      className={clsx(
         "inline-block w-auto text-blue-600 dark:text-blue-400",
         context.disableFilter ? "" : "cursor-pointer hover:opacity-80",
       )}

web/src/components/MemoContent/TaskList.tsx

 import { Checkbox } from "@mui/joy";
-import classNames from "classnames";
+import clsx from "clsx";
 import { repeat } from "lodash-es";
 import { useContext, useState } from "react";
 import { useMemoStore } from "@/store/v1";
@@ -58,7 +58,7 @@ const TaskList: React.FC<Props> = ({ index, indent, complete, children }: Props)
           <div className="w-7 h-6 flex justify-center items-center">
             <Checkbox size="sm" checked={checked} disabled={context.readonly} onChange={(e) => handleCheckboxChange(e.target.checked)} />
           </div>
-          <div className={classNames(complete && "line-through opacity-80")}>
+          <div className={clsx(complete && "line-through opacity-80")}>
             {children.map((child, index) => (
               <Renderer key={`${child.type}-${index}`} index={String(index)} node={child} />
             ))}

web/src/components/MemoContent/index.tsx

-import classNames from "classnames";
+import clsx from "clsx";
 import { memo, useEffect, useRef, useState } from "react";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import { useMemoStore } from "@/store/v1";
@@ -71,7 +71,7 @@ const MemoContent: React.FC<Props> = (props: Props) => {
         <div className={`w-full flex flex-col justify-start items-start text-gray-800 dark:text-gray-400 ${className || ""}`}>
           <div
             ref={memoContentContainerRef}
-            className={classNames(
+            className={clsx(
               "w-full max-w-full word-break text-base leading-snug space-y-2 whitespace-pre-wrap",
               showCompactMode && "line-clamp-6",
             )}

web/src/components/MemoEditor/Editor/TagSuggestions.tsx

-import classNames from "classnames";
+import clsx from "clsx";
 import Fuse from "fuse.js";
 import { useEffect, useRef, useState } from "react";
 import getCaretCoordinates from "textarea-caret";
@@ -110,7 +110,7 @@ const TagSuggestions = ({ editorRef, editorActions }: Props) => {
         <div
           key={tag}
           onMouseDown={() => autocomplete(tag)}
-          className={classNames(
+          className={clsx(
             "rounded p-1 px-2 w-full truncate text-sm dark:text-gray-300 cursor-pointer hover:bg-zinc-200 dark:hover:bg-zinc-800",
             i === selected ? "bg-zinc-300 dark:bg-zinc-600" : "",
           )}

web/src/components/MemoEditor/Editor/index.tsx

-import classNames from "classnames";
+import clsx from "clsx";
 import { last } from "lodash-es";
 import { forwardRef, ReactNode, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { NodeType, OrderedListNode, TaskListNode, UnorderedListNode } from "@/types/node";
@@ -178,7 +178,7 @@ const Editor = forwardRef(function Editor(props: Props, ref: React.ForwardedRef<
 
   return (
     <div
-      className={classNames(
+      className={clsx(
         "flex flex-col justify-start items-start relative w-full h-auto max-h-[256px] bg-inherit dark:text-gray-300",
         className,
       )}

web/src/components/MemoFilter.tsx

-import classNames from "classnames";
+import clsx from "clsx";
 import { useEffect } from "react";
 import { useLocation } from "react-router-dom";
 import { useFilterStore } from "@/store/module";
@@ -27,7 +27,7 @@ const MemoFilter = (props: Props) => {
 
   return (
     <div
-      className={classNames(
+      className={clsx(
         `w-full flex flex-row justify-start items-start flex-wrap gap-2 text-sm leading-7 dark:text-gray-400`,
         props.className,
       )}

web/src/components/MemoView.tsx

 import { Tooltip } from "@mui/joy";
-import classNames from "classnames";
+import clsx from "clsx";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { Link, useLocation } from "react-router-dom";
 import useCurrentUser from "@/hooks/useCurrentUser";
@@ -77,7 +77,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
 
   return (
     <div
-      className={classNames(
+      className={clsx(
         "group relative flex flex-col justify-start items-start w-full px-4 py-3 mb-2 gap-2 bg-white dark:bg-zinc-800 rounded-lg border border-white dark:border-zinc-800 hover:border-gray-200 dark:hover:border-zinc-700",
         props.showPinned && memo.pinned && "border-gray-200 border dark:border-zinc-700",
         className,
@@ -126,7 +126,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
           </div>
           {!isInMemoDetailPage && (
             <Link
-              className={classNames(
+              className={clsx(
                 "flex flex-row justify-start items-center hover:opacity-70",
                 commentAmount === 0 && "invisible group-hover:visible",
               )}

web/src/components/MobileHeader.tsx

-import classNames from "classnames";
+import clsx from "clsx";
 import { useState } from "react";
 import useWindowScroll from "react-use/lib/useWindowScroll";
 import useResponsiveWidth from "@/hooks/useResponsiveWidth";
@@ -17,7 +17,7 @@ const MobileHeader = (props: Props) => {
 
   return (
     <div
-      className={classNames(
+      className={clsx(
         "sticky top-0 pt-3 pb-2 sm:pt-2 px-4 sm:px-6 sm:mb-1 bg-zinc-100 dark:bg-zinc-900 bg-opacity-80 backdrop-blur-lg flex md:hidden flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-1",
         offsetTop > 0 && "shadow-md",
         className,

web/src/components/Navigation.tsx

 import { Tooltip } from "@mui/joy";
-import classNames from "classnames";
+import clsx from "clsx";
 import { useEffect } from "react";
 import { NavLink } from "react-router-dom";
 import useCurrentUser from "@/hooks/useCurrentUser";
@@ -122,17 +122,14 @@ const Navigation = (props: Props) => {
 
   return (
     <header
-      className={classNames(
-        "w-full h-full overflow-auto flex flex-col justify-start items-start py-4 md:pt-6 z-30 hide-scrollbar",
-        className,
-      )}
+      className={clsx("w-full h-full overflow-auto flex flex-col justify-start items-start py-4 md:pt-6 z-30 hide-scrollbar", className)}
     >
       <UserBanner collapsed={collapsed} />
       <div className="w-full px-1 py-2 flex flex-col justify-start items-start shrink-0 space-y-2">
         {navLinks.map((navLink) => (
           <NavLink
             className={({ isActive }) =>
-              classNames(
+              clsx(
                 "px-2 py-2 rounded-2xl border flex flex-row items-center text-lg text-gray-800 dark:text-gray-400 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-700 dark:hover:bg-zinc-800",
                 collapsed ? "" : "w-full px-4",
                 isActive ? "bg-white drop-shadow-sm dark:bg-zinc-800 border-gray-200 dark:border-zinc-700" : "border-transparent",

web/src/components/ReactionSelector.tsx

 import { Dropdown, Menu, MenuButton } from "@mui/joy";
-import classNames from "classnames";
+import clsx from "clsx";
 import { useRef, useState } from "react";
 import useClickAway from "react-use/lib/useClickAway";
 import Icon from "@/components/Icon";
@@ -74,10 +74,7 @@ const ReactionSelector = (props: Props) => {
     <Dropdown open={open} onOpenChange={(_, isOpen) => setOpen(isOpen)}>
       <MenuButton slots={{ root: "div" }}>
         <span
-          className={classNames(
-            "h-7 w-7 flex justify-center items-center rounded-full border dark:border-zinc-700 hover:opacity-70",
-            className,
-          )}
+          className={clsx("h-7 w-7 flex justify-center items-center rounded-full border dark:border-zinc-700 hover:opacity-70", className)}
         >
           <Icon.SmilePlus className="w-4 h-4 mx-auto text-gray-500 dark:text-gray-400" />
         </span>
@@ -89,7 +86,7 @@ const ReactionSelector = (props: Props) => {
               return (
                 <span
                   key={reactionType}
-                  className={classNames(
+                  className={clsx(
                     "inline-flex w-auto cursor-pointer rounded text-lg px-1 text-gray-500 dark:text-gray-400 hover:opacity-80",
                     hasReacted(reactionType) && "bg-blue-100 dark:bg-zinc-800",
                   )}

web/src/components/ReactionView.tsx

 import { Tooltip } from "@mui/joy";
-import classNames from "classnames";
+import clsx from "clsx";
 import { memoServiceClient } from "@/grpcweb";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import { useMemoStore } from "@/store/v1";
@@ -97,7 +97,7 @@ const ReactionView = (props: Props) => {
   return (
     <Tooltip title={stringifyUsers(users, reactionType)} placement="top">
       <div
-        className={classNames(
+        className={clsx(
           "h-7 border px-2 py-0.5 rounded-full font-memo flex flex-row justify-center items-center gap-1 dark:border-zinc-700",
           currentUser && "cursor-pointer",
           hasReaction && "bg-blue-100 border-blue-200 dark:bg-zinc-900",

web/src/components/ResourceIcon.tsx

-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { Resource } from "@/types/proto/api/v1/resource_service";
 import { getResourceType, getResourceUrl } from "@/utils/resource";
@@ -16,7 +16,7 @@ const ResourceIcon = (props: Props) => {
   const { resource } = props;
   const resourceType = getResourceType(resource);
   const resourceUrl = getResourceUrl(resource);
-  const className = classNames("w-full h-auto", props.className);
+  const className = clsx("w-full h-auto", props.className);
   const strokeWidth = props.strokeWidth;
 
   const previewResource = () => {
@@ -25,7 +25,7 @@ const ResourceIcon = (props: Props) => {
 
   if (resourceType === "image/*") {
     return (
-      <SquareDiv className={classNames(className, "flex items-center justify-center overflow-clip")}>
+      <SquareDiv className={clsx(className, "flex items-center justify-center overflow-clip")}>
         <img
           className="min-w-full min-h-full object-cover border rounded dark:border-none"
           src={resource.externalLink ? resourceUrl : resourceUrl + "?thumbnail=1"}
@@ -63,7 +63,7 @@ const ResourceIcon = (props: Props) => {
   };
 
   return (
-    <div onClick={previewResource} className={classNames(className, "max-w-[4rem] opacity-50")}>
+    <div onClick={previewResource} className={clsx(className, "max-w-[4rem] opacity-50")}>
       {getResourceIcon()}
     </div>
   );

web/src/components/TimelineSidebar/TimelineSidebar.tsx

-import classNames from "classnames";
+import clsx from "clsx";
 import TagsSection from "../HomeSidebar/TagsSection";
 import SearchBar from "../SearchBar";
 
@@ -9,7 +9,7 @@ interface Props {
 const TimelineSidebar = (props: Props) => {
   return (
     <aside
-      className={classNames(
+      className={clsx(
         "relative w-full h-auto max-h-screen overflow-auto hide-scrollbar flex flex-col justify-start items-start",
         props.className,
       )}

web/src/components/UserAvatar.tsx

-import classNames from "classnames";
+import clsx from "clsx";
 
 interface Props {
   avatarUrl?: string;
@@ -8,7 +8,7 @@ interface Props {
 const UserAvatar = (props: Props) => {
   const { avatarUrl, className } = props;
   return (
-    <div className={classNames(`w-8 h-8 overflow-clip rounded-xl`, className)}>
+    <div className={clsx(`w-8 h-8 overflow-clip rounded-xl`, className)}>
       <img
         className="w-full h-auto shadow min-w-full min-h-full object-cover dark:opacity-80"
         src={avatarUrl || "/full-logo.webp"}

web/src/components/UserBanner.tsx

 import { Dropdown, Menu, MenuButton, MenuItem } from "@mui/joy";
-import classNames from "classnames";
+import clsx from "clsx";
 import { authServiceClient } from "@/grpcweb";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import useNavigateTo from "@/hooks/useNavigateTo";
@@ -30,7 +30,7 @@ const UserBanner = (props: Props) => {
       <Dropdown>
         <MenuButton disabled={!user} slots={{ root: "div" }}>
           <div
-            className={classNames(
+            className={clsx(
               "py-1 my-1 w-auto flex flex-row justify-start items-center cursor-pointer rounded-2xl border border-transparent text-gray-800 dark:text-gray-400",
               collapsed ? "px-1" : "px-3",
             )}

web/src/components/VisibilityIcon.tsx

-import classNames from "classnames";
+import clsx from "clsx";
 import { Visibility } from "@/types/proto/api/v1/memo_service";
 import Icon from "./Icon";
 
@@ -21,7 +21,7 @@ const VisibilityIcon = (props: Props) => {
     return null;
   }
 
-  return <VIcon className={classNames("w-4 h-auto text-gray-500 dark:text-gray-400")} />;
+  return <VIcon className={clsx("w-4 h-auto text-gray-500 dark:text-gray-400")} />;
 };
 
 export default VisibilityIcon;

web/src/components/kit/OverflowTip.tsx

 import { Tooltip } from "@mui/joy";
-import classNames from "classnames";
+import clsx from "clsx";
 import { useRef, useState, useEffect } from "react";
 
 interface Props {
@@ -21,7 +21,7 @@ const OverflowTip = ({ children, className }: Props) => {
 
   return (
     <Tooltip title={children} placement="top" arrow disableHoverListener={!isOverflowed}>
-      <div ref={textElementRef} className={classNames("truncate", className)}>
+      <div ref={textElementRef} className={clsx("truncate", className)}>
         {children}
       </div>
     </Tooltip>

web/src/layouts/HomeLayout.tsx

 import { Button, IconButton, Tooltip } from "@mui/joy";
-import classNames from "classnames";
+import clsx from "clsx";
 import { Suspense, useEffect } from "react";
 import { Outlet, useLocation } from "react-router-dom";
 import useLocalStorage from "react-use/lib/useLocalStorage";
@@ -32,23 +32,18 @@ const HomeLayout = () => {
 
   return (
     <div className="w-full min-h-full">
-      <div
-        className={classNames(
-          "w-full transition-all mx-auto flex flex-row justify-center items-start",
-          collapsed ? "sm:pl-16" : "sm:pl-56",
-        )}
-      >
+      <div className={clsx("w-full transition-all mx-auto flex flex-row justify-center items-start", collapsed ? "sm:pl-16" : "sm:pl-56")}>
         {sm && (
           <div
-            className={classNames(
+            className={clsx(
               "group flex flex-col justify-start items-start fixed top-0 left-0 select-none border-r dark:border-zinc-800 h-full bg-zinc-50 dark:bg-zinc-800 dark:bg-opacity-40 transition-all hover:shadow-xl z-2",
               collapsed ? "w-16 px-2" : "w-56 px-4",
             )}
           >
             <Navigation className="!h-auto" collapsed={collapsed} />
-            <div className={classNames("w-full grow h-auto flex flex-col justify-end", collapsed ? "items-center" : "items-start")}>
+            <div className={clsx("w-full grow h-auto flex flex-col justify-end", collapsed ? "items-center" : "items-start")}>
               <div
-                className={classNames("hidden py-3 group-hover:flex flex-col justify-center items-center")}
+                className={clsx("hidden py-3 group-hover:flex flex-col justify-center items-center")}
                 onClick={() => setCollapsed(!collapsed)}
               >
                 {!collapsed ? (

web/src/pages/Explore.tsx

 import { Button } from "@mui/joy";
-import classNames from "classnames";
+import clsx from "clsx";
 import { useEffect, useRef, useState } from "react";
 import Empty from "@/components/Empty";
 import { ExploreSidebar, ExploreSidebarDrawer } from "@/components/ExploreSidebar";
@@ -61,8 +61,8 @@ const Explore = () => {
           <ExploreSidebarDrawer />
         </MobileHeader>
       )}
-      <div className={classNames("w-full flex flex-row justify-start items-start px-4 sm:px-6 gap-4")}>
-        <div className={classNames(md ? "w-[calc(100%-15rem)]" : "w-full")}>
+      <div className={clsx("w-full flex flex-row justify-start items-start px-4 sm:px-6 gap-4")}>
+        <div className={clsx(md ? "w-[calc(100%-15rem)]" : "w-full")}>
           <div className="flex flex-col justify-start items-start w-full max-w-full">
             <MemoFilter className="px-2 pb-2" />
             {sortedMemos.map((memo) => (

web/src/pages/Home.tsx

 import { Button } from "@mui/joy";
-import classNames from "classnames";
+import clsx from "clsx";
 import { useCallback, useEffect, useRef, useState } from "react";
 import Empty from "@/components/Empty";
 import { HomeSidebar, HomeSidebarDrawer } from "@/components/HomeSidebar";
@@ -75,8 +75,8 @@ const Home = () => {
           <HomeSidebarDrawer />
         </MobileHeader>
       )}
-      <div className={classNames("w-full flex flex-row justify-start items-start px-4 sm:px-6 gap-4")}>
-        <div className={classNames(md ? "w-[calc(100%-15rem)]" : "w-full")}>
+      <div className={clsx("w-full flex flex-row justify-start items-start px-4 sm:px-6 gap-4")}>
+        <div className={clsx(md ? "w-[calc(100%-15rem)]" : "w-full")}>
           <MemoEditor className="mb-2" cacheKey="home-memo-editor" onEditPrevious={handleEditPrevious} />
           <div className="flex flex-col justify-start items-start w-full max-w-full">
             <MemoFilter className="px-2 pb-2" />

web/src/pages/Timeline.tsx

 import { Button, Divider, IconButton } from "@mui/joy";
-import classNames from "classnames";
+import clsx from "clsx";
 import { Fragment, useEffect, useRef, useState } from "react";
 import ActivityCalendar from "@/components/ActivityCalendar";
 import Empty from "@/components/Empty";
@@ -125,8 +125,8 @@ const Timeline = () => {
           <TimelineSidebarDrawer />
         </MobileHeader>
       )}
-      <div className={classNames("w-full flex flex-row justify-start items-start px-4 sm:px-6 gap-4")}>
-        <div className={classNames(md ? "w-[calc(100%-15rem)]" : "w-full")}>
+      <div className={clsx("w-full flex flex-row justify-start items-start px-4 sm:px-6 gap-4")}>
+        <div className={clsx(md ? "w-[calc(100%-15rem)]" : "w-full")}>
           <div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-800 text-black dark:text-gray-300">
             <div className="relative w-full flex flex-row justify-between items-center">
               <div>
@@ -149,9 +149,9 @@ const Timeline = () => {
 
               {groupedByMonth.map((group, index) => (
                 <Fragment key={group.month}>
-                  <div className={classNames("flex flex-col justify-start items-start w-full mt-2 last:mb-4")}>
-                    <div className={classNames("flex shrink-0 flex-row w-full pl-1 mt-2 mb-2")}>
-                      <div className={classNames("w-full flex flex-col")}>
+                  <div className={clsx("flex flex-col justify-start items-start w-full mt-2 last:mb-4")}>
+                    <div className={clsx("flex shrink-0 flex-row w-full pl-1 mt-2 mb-2")}>
+                      <div className={clsx("w-full flex flex-col")}>
                         <span className="font-medium text-3xl leading-tight mb-1">
                           {new Date(group.month).toLocaleString(i18n.language, { month: "short", timeZone: "UTC" })}
                         </span>
@@ -160,11 +160,11 @@ const Timeline = () => {
                       <ActivityCalendar month={group.month} data={group.data} onClick={(date) => setSelectedDay(date)} />
                     </div>
 
-                    <div className={classNames("w-full flex flex-col justify-start items-start")}>
+                    <div className={clsx("w-full flex flex-col justify-start items-start")}>
                       {group.memos.map((memo, index) => (
                         <div
                           key={`${memo.name}-${memo.displayTime}`}
-                          className={classNames("relative w-full flex flex-col justify-start items-start pl-4 sm:pl-10 pt-0")}
+                          className={clsx("relative w-full flex flex-col justify-start items-start pl-4 sm:pl-10 pt-0")}
                         >
                           <MemoView className="!border max-w-full !border-gray-100 dark:!border-zinc-700" memo={memo} />
                           <div className="absolute -left-2 sm:left-2 top-4 h-full">