From f394b17537202026e9e1b34cbf299faeed5a6d07 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Mon, 21 Oct 2024 20:49:07 +0800
Subject: [PATCH] fix: update viewTransition to react router links

---
 frontend/web/src/components/CollectionView.tsx |  2 +-
 frontend/web/src/components/Header.tsx         | 10 +++++-----
 frontend/web/src/components/ShortcutCard.tsx   |  4 ++--
 frontend/web/src/pages/SignIn.tsx              |  2 +-
 frontend/web/src/pages/SignUp.tsx              |  2 +-
 frontend/web/src/pages/WorkspaceSetting.tsx    |  2 +-
 6 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/frontend/web/src/components/CollectionView.tsx b/frontend/web/src/components/CollectionView.tsx
index cf36f6b..644debf 100644
--- a/frontend/web/src/components/CollectionView.tsx
+++ b/frontend/web/src/components/CollectionView.tsx
@@ -66,7 +66,7 @@ const CollectionView = (props: Props) => {
         <div className="bg-gray-100 dark:bg-zinc-800 px-3 py-2 w-full flex flex-row justify-between items-center rounded-t-lg">
           <div className="w-auto flex flex-col justify-start items-start mr-2">
             <div className="w-full truncate">
-              <Link className="leading-6 font-medium dark:text-gray-400" to={`/c/${collection.name}`} unstable_viewTransition>
+              <Link className="leading-6 font-medium dark:text-gray-400" to={`/c/${collection.name}`} viewTransition>
                 {collection.title}
               </Link>
               <span className="ml-1 leading-6 text-gray-500 dark:text-gray-400" onClick={handleCopyCollectionLink}>
diff --git a/frontend/web/src/components/Header.tsx b/frontend/web/src/components/Header.tsx
index 760e14c..1cbe5c4 100644
--- a/frontend/web/src/components/Header.tsx
+++ b/frontend/web/src/components/Header.tsx
@@ -31,7 +31,7 @@ const Header: React.FC = () => {
       <div className="w-full bg-gray-50 dark:bg-black border-b border-b-gray-200 dark:border-b-zinc-800">
         <div className="w-full max-w-8xl mx-auto px-4 sm:px-6 md:px-12 py-3 flex flex-row justify-between items-center">
           <div className="flex flex-row justify-start items-center shrink mr-2">
-            <Link to="/" className="cursor-pointer flex flex-row justify-start items-center dark:text-gray-400" unstable_viewTransition>
+            <Link to="/" className="cursor-pointer flex flex-row justify-start items-center dark:text-gray-400" viewTransition>
               <Logo className="mr-2" />
               Slash
             </Link>
@@ -57,14 +57,14 @@ const Header: React.FC = () => {
                       <Link
                         className="w-full px-2 flex flex-row justify-start items-center text-left dark:text-gray-400 leading-8 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
                         to="/shortcuts"
-                        unstable_viewTransition
+                        viewTransition
                       >
                         <Icon.SquareSlash className="w-5 h-auto mr-2 opacity-70" /> Shortcuts
                       </Link>
                       <Link
                         className="w-full px-2 flex flex-row justify-start items-center text-left dark:text-gray-400 leading-8 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
                         to="/collections"
-                        unstable_viewTransition
+                        viewTransition
                       >
                         <Icon.LibrarySquare className="w-5 h-auto mr-2 opacity-70" /> Collections
                       </Link>
@@ -88,7 +88,7 @@ const Header: React.FC = () => {
                   <Link
                     className="w-full px-2 flex flex-row justify-start items-center text-left dark:text-gray-400 leading-8 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
                     to="/setting/general"
-                    unstable_viewTransition
+                    viewTransition
                   >
                     <Icon.User className="w-5 h-auto mr-2 opacity-70" /> {t("user.profile")}
                   </Link>
@@ -96,7 +96,7 @@ const Header: React.FC = () => {
                     <Link
                       className="w-full px-2 flex flex-row justify-start items-center text-left dark:text-gray-400 leading-8 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
                       to="/setting/workspace"
-                      unstable_viewTransition
+                      viewTransition
                     >
                       <Icon.Settings className="w-5 h-auto mr-2 opacity-70" /> {t("settings.self")}
                     </Link>
diff --git a/frontend/web/src/components/ShortcutCard.tsx b/frontend/web/src/components/ShortcutCard.tsx
index 1253e87..b27d4a4 100644
--- a/frontend/web/src/components/ShortcutCard.tsx
+++ b/frontend/web/src/components/ShortcutCard.tsx
@@ -45,7 +45,7 @@ const ShortcutCard = (props: Props) => {
           <Link
             className={classNames("w-8 h-8 flex justify-center items-center overflow-clip shrink-0")}
             to={`/shortcut/${shortcut.id}`}
-            unstable_viewTransition
+            viewTransition
           >
             <LinkFavicon url={shortcut.link} />
           </Link>
@@ -129,7 +129,7 @@ const ShortcutCard = (props: Props) => {
           <Link
             className="w-auto leading-5 flex flex-row justify-start items-center flex-nowrap whitespace-nowrap cursor-pointer text-gray-400 text-sm"
             to={`/shortcut/${shortcut.id}#analytics`}
-            unstable_viewTransition
+            viewTransition
           >
             <Icon.BarChart2 className="w-4 h-auto mr-1 opacity-70" />
             {t("shortcut.visits", { count: shortcut.viewCount })}
diff --git a/frontend/web/src/pages/SignIn.tsx b/frontend/web/src/pages/SignIn.tsx
index cdd3990..f492efa 100644
--- a/frontend/web/src/pages/SignIn.tsx
+++ b/frontend/web/src/pages/SignIn.tsx
@@ -47,7 +47,7 @@ const SignIn: React.FC = () => {
           {!workspaceStore.setting.disallowUserRegistration && !workspaceStore.setting.disallowPasswordAuth && (
             <p className="w-full mt-4 text-sm">
               <span className="dark:text-gray-500">{"Don't have an account yet?"}</span>
-              <Link className="cursor-pointer ml-2 text-blue-600 hover:underline" to="/auth/signup" unstable_viewTransition>
+              <Link className="cursor-pointer ml-2 text-blue-600 hover:underline" to="/auth/signup" viewTransition>
                 {t("auth.sign-up")}
               </Link>
             </p>
diff --git a/frontend/web/src/pages/SignUp.tsx b/frontend/web/src/pages/SignUp.tsx
index 4163b6b..d7b1722 100644
--- a/frontend/web/src/pages/SignUp.tsx
+++ b/frontend/web/src/pages/SignUp.tsx
@@ -118,7 +118,7 @@ const SignUp: React.FC = () => {
           ) : (
             <p className="w-full mt-4 text-sm">
               <span className="dark:text-gray-500">{"Already has an account?"}</span>
-              <Link className="cursor-pointer ml-2 text-blue-600 hover:underline" to="/auth" unstable_viewTransition>
+              <Link className="cursor-pointer ml-2 text-blue-600 hover:underline" to="/auth" viewTransition>
                 {t("auth.sign-in")}
               </Link>
             </p>
diff --git a/frontend/web/src/pages/WorkspaceSetting.tsx b/frontend/web/src/pages/WorkspaceSetting.tsx
index 70cdd8b..b7a115e 100644
--- a/frontend/web/src/pages/WorkspaceSetting.tsx
+++ b/frontend/web/src/pages/WorkspaceSetting.tsx
@@ -34,7 +34,7 @@ const WorkspaceSetting = () => {
         <div className="mt-2">
           <span className="text-gray-500 mr-2">Current plan:</span>
           <span className="text-2xl mr-4 dark:text-gray-400">{stringifyPlanType(workspaceStore.getSubscription().plan)}</span>
-          <Link to="/setting/subscription" unstable_viewTransition>
+          <Link to="/setting/subscription" viewTransition>
             <Button size="sm" variant="outlined" startDecorator={<Icon.Settings className="w-4 h-auto" />}>
               Manage
             </Button>