fix: update shortcut

frontend/web/src/pages/CollectionSpace.tsx

@@ -36,7 +36,7 @@ const CollectionSpace = () => {
         setShortcuts([]);
         for (const shortcutId of collection.shortcutIds) {
           try {
-            const shortcut = await shortcutStore.fetchShortcutById(shortcutId);
+            const shortcut = await shortcutStore.getOrFetchShortcutById(shortcutId);
             setShortcuts((shortcuts) => {
               return [...shortcuts, shortcut];
             });

frontend/web/src/pages/ShortcutDetail.tsx

@@ -28,11 +28,11 @@ interface State {
 const ShortcutDetail = () => {
   const { t } = useTranslation();
   const params = useParams();
-  const shortcutName = params["*"] || "";
+  const shortcutId = Number(params["shortcutId"]);
   const navigateTo = useNavigateTo();
   const shortcutStore = useShortcutStore();
   const userStore = useUserStore();
-  const shortcut = shortcutStore.getShortcutByName(shortcutName);
+  const shortcut = shortcutStore.getShortcutById(shortcutId);
   const currentUser = useUserStore().getCurrentUser();
   const [state, setState] = useState<State>({
     showEditDrawer: false,
@@ -46,11 +46,11 @@ const ShortcutDetail = () => {
 
   useEffect(() => {
     (async () => {
-      const shortcut = await shortcutStore.getOrFetchShortcutByName(shortcutName);
+      const shortcut = await shortcutStore.getOrFetchShortcutById(shortcutId);
       await userStore.getOrFetchUserById(shortcut.creatorId);
       loadingState.setFinish();
     })();
-  }, [shortcutName]);
+  }, [shortcutId]);
 
   if (loadingState.isLoading) {
     return null;
@@ -67,7 +67,7 @@ const ShortcutDetail = () => {
       content: `Are you sure to delete shortcut \`${shortcut.name}\`? You cannot undo this action.`,
       style: "danger",
       onConfirm: async () => {
-        await shortcutStore.deleteShortcut(shortcut.name);
+        await shortcutStore.deleteShortcut(shortcut.id);
         navigateTo("/", {
           replace: true,
         });
@@ -198,7 +198,7 @@ const ShortcutDetail = () => {
             <Icon.BarChart2 className="w-6 h-auto mr-1" />
             {t("analytics.self")}
           </h3>
-          <AnalyticsView className="mt-4 w-full grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-4" shortcutName={shortcut.name} />
+          <AnalyticsView className="mt-4 w-full grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-4" shortcutId={shortcut.id} />
         </div>
       </div>
 
@@ -206,7 +206,7 @@ const ShortcutDetail = () => {
 
       {state.showEditDrawer && (
         <CreateShortcutDrawer
-          shortcutName={shortcut.name}
+          shortcutId={shortcut.id}
           onClose={() =>
             setState({
               ...state,

frontend/web/src/pages/ShortcutSpace.tsx

@@ -1,19 +1,21 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import { useParams } from "react-router-dom";
 import { isURL } from "@/helpers/utils";
 import useShortcutStore from "@/stores/v1/shortcut";
+import { Shortcut } from "@/types/proto/api/v2/shortcut_service";
 
 const ShortcutSpace = () => {
   const params = useParams();
   const shortcutName = params["*"] || "";
   const shortcutStore = useShortcutStore();
-  const shortcut = shortcutStore.getShortcutByName(shortcutName);
+  const [shortcut, setShortcut] = useState<Shortcut>();
 
   useEffect(() => {
     (async () => {
       try {
-        await shortcutStore.getOrFetchShortcutByName(shortcutName, true);
+        const shortcut = await shortcutStore.fetchShortcutByName(shortcutName);
+        setShortcut(shortcut);
       } catch (error: any) {
         console.error(error);
         toast.error(error.details);

frontend/web/src/pages/SignIn.tsx

@@ -100,7 +100,7 @@ const SignIn: React.FC = () => {
           {workspaceStore.profile.enableSignup && (
             <p className="w-full mt-4 text-sm">
               <span className="dark:text-gray-500">{"Don't have an account yet?"}</span>
-              <Link to="/auth/signup" className="cursor-pointer ml-2 text-blue-600 hover:underline">
+              <Link className="cursor-pointer ml-2 text-blue-600 hover:underline" to="/auth/signup" unstable_viewTransition>
                 {t("auth.sign-up")}
               </Link>
             </p>

frontend/web/src/pages/SignUp.tsx

@@ -115,7 +115,7 @@ const SignUp: React.FC = () => {
           </form>
           <p className="w-full mt-4 text-sm">
             <span className="dark:text-gray-500">{"Already has an account?"}</span>
-            <Link to="/auth" className="cursor-pointer ml-2 text-blue-600 hover:underline">
+            <Link className="cursor-pointer ml-2 text-blue-600 hover:underline" to="/auth" unstable_viewTransition>
               {t("auth.sign-in")}
             </Link>
           </p>

frontend/web/src/pages/SubscriptionSetting.tsx

@@ -73,7 +73,10 @@ const SubscriptionSetting: React.FC = () => {
           <div className="max-w-4xl mx-auto mb-12">
             <Alert className="!inline-block mb-12">
               Slash is open source bookmarks and link sharing platform. Our source code is available and accessible on{" "}
-              <Link href="https://github.com/yourselfhosted/slash">GitHub</Link> so anyone can get it, inspect it and review it.
+              <Link href="https://github.com/yourselfhosted/slash" target="_blank">
+                GitHub
+              </Link>{" "}
+              so anyone can get it, inspect it and review it.
             </Alert>
           </div>
           <div className="w-full grid grid-cols-1 gap-6 lg:gap-12 mt-8 md:grid-cols-3 md:max-w-4xl mx-auto">

frontend/web/src/pages/WorkspaceSetting.tsx

@@ -35,7 +35,7 @@ const WorkspaceSetting: React.FC = () => {
         <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(profile.plan)}</span>
-          <Link to="/setting/subscription">
+          <Link to="/setting/subscription" unstable_viewTransition>
             <Button size="sm" variant="outlined" startDecorator={<Icon.Settings className="w-4 h-auto" />}>
               Manage
             </Button>