chore: update dependencies

web/package.json

@@ -17,8 +17,9 @@
     "@github/relative-time-element": "^4.4.3",
     "@matejmazur/react-katex": "^3.1.3",
     "@mui/joy": "5.0.0-beta.48",
-    "@radix-ui/react-popover": "^1.1.1",
-    "@reduxjs/toolkit": "^2.2.7",
+    "@radix-ui/react-popover": "^1.1.2",
+    "@reduxjs/toolkit": "^2.3.0",
+    "@usememos/mui": "0.0.1-alpha.6",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "copy-to-clipboard": "^3.3.3",
@@ -26,59 +27,59 @@
     "dompurify": "^3.1.7",
     "fuse.js": "^7.0.0",
     "highlight.js": "^11.10.0",
-    "i18next": "^23.15.1",
+    "i18next": "^23.16.3",
     "katex": "^0.16.11",
     "leaflet": "^1.9.4",
     "lodash-es": "^4.17.21",
-    "lucide-react": "^0.437.0",
-    "mermaid": "^11.2.1",
+    "lucide-react": "^0.453.0",
+    "mermaid": "^11.3.0",
     "react": "^18.3.1",
     "react-datepicker": "^7.5.0",
     "react-dom": "^18.3.1",
-    "react-force-graph-2d": "^1.25.6",
+    "react-force-graph-2d": "^1.25.7",
     "react-hot-toast": "^2.4.1",
-    "react-i18next": "^15.0.2",
+    "react-i18next": "^15.1.0",
     "react-leaflet": "^4.2.1",
     "react-redux": "^9.1.2",
-    "react-router-dom": "^6.26.2",
+    "react-router-dom": "^6.27.0",
     "react-use": "^17.5.1",
-    "tailwind-merge": "^2.5.2",
-    "tailwindcss": "^3.4.12",
+    "tailwind-merge": "^2.5.4",
+    "tailwindcss": "^3.4.14",
     "tailwindcss-animate": "^1.0.7",
     "textarea-caret": "^3.1.0",
     "uuid": "^10.0.0",
     "zustand": "^4.5.5"
   },
   "devDependencies": {
-    "@bufbuild/buf": "^1.42.0",
-    "@bufbuild/protobuf": "^2.1.0",
+    "@bufbuild/buf": "^1.45.0",
+    "@bufbuild/protobuf": "^2.2.0",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/d3": "^7.4.3",
     "@types/dompurify": "^3.0.5",
     "@types/katex": "^0.16.7",
-    "@types/leaflet": "^1.9.12",
+    "@types/leaflet": "^1.9.14",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.7.4",
+    "@types/node": "^22.8.0",
     "@types/qs": "^6.9.16",
-    "@types/react": "^18.3.8",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@types/textarea-caret": "^3.0.3",
     "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
-    "@vitejs/plugin-react": "^4.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
     "autoprefixer": "^10.4.20",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.36.1",
+    "eslint-plugin-react": "^7.37.2",
     "less": "^4.2.0",
     "long": "^5.2.3",
     "nice-grpc-web": "^3.3.5",
     "postcss": "^8.4.47",
     "prettier": "^3.3.3",
     "protobufjs": "^7.4.0",
-    "typescript": "^5.6.2",
-    "vite": "^5.4.8"
+    "typescript": "^5.6.3",
+    "vite": "^5.4.10"
   }
 }

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

@@ -75,7 +75,7 @@ const EmbeddedMemo = ({ resourceId: uid, params: paramsStr }: Props) => {
           <span className="text-xs opacity-60 leading-5 cursor-pointer hover:opacity-80" onClick={() => copyMemoUid(memo.uid)}>
             {memo.uid.slice(0, 6)}
           </span>
-          <Link className="opacity-60 hover:opacity-80" to={`/m/${memo.uid}`} unstable_viewTransition>
+          <Link className="opacity-60 hover:opacity-80" to={`/m/${memo.uid}`} viewTransition>
             <ArrowUpRightIcon className="w-5 h-auto" />
           </Link>
         </div>

web/src/components/MemoRelationListView.tsx

@@ -64,7 +64,7 @@ const MemoRelationListView = (props: Props) => {
                 key={memo.name}
                 className="w-auto max-w-full flex flex-row justify-start items-center text-sm leading-5 text-gray-600 dark:text-gray-400 dark:border-zinc-700 dark:bg-zinc-900 hover:underline"
                 to={`/m/${memo.uid}`}
-                unstable_viewTransition
+                viewTransition
               >
                 <span className="text-xs opacity-60 leading-4 border font-mono px-1 rounded-full mr-1 dark:border-zinc-700">
                   {memo.uid.slice(0, 6)}
@@ -83,7 +83,7 @@ const MemoRelationListView = (props: Props) => {
                 key={memo.name}
                 className="w-auto max-w-full flex flex-row justify-start items-center text-sm leading-5 text-gray-600 dark:text-gray-400 dark:border-zinc-700 dark:bg-zinc-900 hover:underline"
                 to={`/m/${memo.uid}`}
-                unstable_viewTransition
+                viewTransition
               >
                 <span className="text-xs opacity-60 leading-4 border font-mono px-1 rounded-full mr-1 dark:border-zinc-700">
                   {memo.uid.slice(0, 6)}

web/src/components/MemoView.tsx

@@ -139,14 +139,14 @@ const MemoView: React.FC<Props> = (props: Props) => {
             <div className="w-auto max-w-[calc(100%-8rem)] grow flex flex-row justify-start items-center">
               {props.showCreator && creator ? (
                 <div className="w-full flex flex-row justify-start items-center">
-                  <Link className="w-auto hover:opacity-80" to={`/u/${encodeURIComponent(creator.username)}`} unstable_viewTransition>
+                  <Link className="w-auto hover:opacity-80" to={`/u/${encodeURIComponent(creator.username)}`} viewTransition>
                     <UserAvatar className="mr-2 shrink-0" avatarUrl={creator.avatarUrl} />
                   </Link>
                   <div className="w-full flex flex-col justify-center items-start">
                     <Link
                       className="w-full block leading-tight hover:opacity-80 truncate text-gray-600 dark:text-gray-400"
                       to={`/u/${encodeURIComponent(creator.username)}`}
-                      unstable_viewTransition
+                      viewTransition
                     >
                       {creator.nickname || creator.username}
                     </Link>
@@ -185,7 +185,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
                     commentAmount === 0 && "invisible group-hover:visible",
                   )}
                   to={`/m/${memo.uid}#comments`}
-                  unstable_viewTransition
+                  viewTransition
                 >
                   <MessageCircleMoreIcon className="w-4 h-4 mx-auto text-gray-500 dark:text-gray-400" />
                   {commentAmount > 0 && <span className="text-xs text-gray-500 dark:text-gray-400">{commentAmount}</span>}

web/src/components/Navigation.tsx

@@ -132,7 +132,7 @@ const Navigation = (props: Props) => {
             key={navLink.id}
             to={navLink.path}
             id={navLink.id}
-            unstable_viewTransition
+            viewTransition
           >
             {props.collapsed ? (
               <Tooltip title={navLink.title} placement="right" arrow>

web/src/pages/MemoDetail.tsx

@@ -96,7 +96,7 @@ const MemoDetail = () => {
               <Link
                 className="px-3 py-1 border rounded-lg max-w-xs w-auto text-sm flex flex-row justify-start items-center flex-nowrap text-gray-600 dark:text-gray-400 dark:border-gray-500 hover:shadow hover:opacity-80"
                 to={`/m/${parentMemo.uid}`}
-                unstable_viewTransition
+                viewTransition
               >
                 <ArrowUpLeftFromCircleIcon className="w-4 h-auto shrink-0 opacity-60 mr-2" />
                 <span className="truncate">{parentMemo.content}</span>

web/src/pages/SignIn.tsx

@@ -84,7 +84,7 @@ const SignIn = () => {
         {!workspaceGeneralSetting.disallowUserRegistration && !workspaceGeneralSetting.disallowPasswordAuth && (
           <p className="w-full mt-4 text-sm">
             <span className="dark:text-gray-500">{t("auth.sign-up-tip")}</span>
-            <Link to="/auth/signup" className="cursor-pointer ml-2 text-blue-600 hover:underline" unstable_viewTransition>
+            <Link to="/auth/signup" className="cursor-pointer ml-2 text-blue-600 hover:underline" viewTransition>
               {t("common.sign-up")}
             </Link>
           </p>

web/src/pages/SignUp.tsx

@@ -139,7 +139,7 @@ const SignUp = () => {
         ) : (
           <p className="w-full mt-4 text-sm">
             <span className="dark:text-gray-500">{t("auth.sign-in-tip")}</span>
-            <Link to="/auth" className="cursor-pointer ml-2 text-blue-600 hover:underline" unstable_viewTransition>
+            <Link to="/auth" className="cursor-pointer ml-2 text-blue-600 hover:underline" viewTransition>
               {t("common.sign-in")}
             </Link>
           </p>