chore: add shortcut space routes

frontend/web/src/components/AnalyticsView.tsx

@@ -6,18 +6,18 @@ import { GetShortcutAnalyticsResponse } from "@/types/proto/api/v2/shortcut_serv
 import Icon from "./Icon";
 
 interface Props {
-  shortcutId: number;
+  shortcutName: string;
   className?: string;
 }
 
 const AnalyticsView: React.FC<Props> = (props: Props) => {
-  const { shortcutId, className } = props;
+  const { shortcutName, className } = props;
   const { t } = useTranslation();
   const [analytics, setAnalytics] = useState<GetShortcutAnalyticsResponse | null>(null);
   const [selectedDeviceTab, setSelectedDeviceTab] = useState<"os" | "browser">("browser");
 
   useEffect(() => {
-    shortcutServiceClient.getShortcutAnalytics({ id: shortcutId }).then((response) => {
+    shortcutServiceClient.getShortcutAnalytics({ name: shortcutName }).then((response) => {
       setAnalytics(response);
     });
   }, []);

frontend/web/src/components/CreateShortcutDrawer.tsx

@@ -25,7 +25,7 @@ import Icon from "./Icon";
 import ResourceNameInput from "./ResourceNameInput";
 
 interface Props {
-  shortcutId?: number;
+  shortcutName?: string;
   initialShortcut?: Partial<Shortcut>;
   onClose: () => void;
   onConfirm?: () => void;
@@ -36,7 +36,7 @@ interface State {
 }
 
 const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
-  const { onClose, onConfirm, shortcutId, initialShortcut } = props;
+  const { onClose, onConfirm, shortcutName, initialShortcut } = props;
   const { t } = useTranslation();
   const [state, setState] = useState<State>({
     shortcutCreate: Shortcut.fromPartial({
@@ -54,13 +54,13 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
   const shortcutList = shortcutStore.getShortcutList();
   const [tag, setTag] = useState<string>("");
   const tagSuggestions = uniq(shortcutList.map((shortcut) => shortcut.tags).flat());
-  const isCreating = isUndefined(shortcutId);
+  const isCreating = isUndefined(shortcutName);
   const loadingState = useLoading(!isCreating);
   const requestState = useLoading(false);
 
   useEffect(() => {
-    if (shortcutId) {
-      const shortcut = shortcutStore.getShortcutById(shortcutId);
+    if (shortcutName) {
+      const shortcut = shortcutStore.getShortcutByName(shortcutName);
       if (shortcut) {
         setState({
           ...state,
@@ -77,7 +77,7 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
         loadingState.setFinish();
       }
     }
-  }, [shortcutId]);
+  }, [shortcutName]);
 
   if (loadingState.isLoading) {
     return null;
@@ -183,15 +183,15 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
     }
 
     try {
-      if (shortcutId) {
+      if (shortcutName) {
         const updatingShortcut = {
           ...state.shortcutCreate,
-          id: shortcutId,
+          name: shortcutName,
           tags: tag.split(" ").filter(Boolean),
         };
         await shortcutStore.updateShortcut(
           updatingShortcut,
-          getShortcutUpdateMask(shortcutStore.getShortcutById(updatingShortcut.id), updatingShortcut)
+          getShortcutUpdateMask(shortcutStore.getShortcutByName(updatingShortcut.name), updatingShortcut)
         );
       } else {
         await shortcutStore.createShortcut({

frontend/web/src/components/ShortcutActionsDropdown.tsx

@@ -31,7 +31,7 @@ const ShortcutActionsDropdown = (props: Props) => {
       content: `Are you sure to delete shortcut \`${shortcut.name}\`? You cannot undo this action.`,
       style: "danger",
       onConfirm: async () => {
-        await shortcutStore.deleteShortcut(shortcut.id);
+        await shortcutStore.deleteShortcut(shortcut.name);
       },
     });
   };
@@ -82,7 +82,7 @@ const ShortcutActionsDropdown = (props: Props) => {
 
       {showEditDrawer && (
         <CreateShortcutDrawer
-          shortcutId={shortcut.id}
+          shortcutName={shortcut.name}
           onClose={() => setShowEditDrawer(false)}
           onConfirm={() => setShowEditDrawer(false)}
         />

frontend/web/src/components/ShortcutCard.tsx

@@ -37,7 +37,10 @@ const ShortcutCard = (props: Props) => {
       >
         <div className="w-full flex flex-row justify-between items-center">
           <div className="w-[calc(100%-16px)] flex flex-row justify-start items-center mr-1 shrink-0">
-            <Link to={`/shortcut/${shortcut.id}`} className={classNames("w-8 h-8 flex justify-center items-center overflow-clip shrink-0")}>
+            <Link
+              to={`/shortcut/${shortcut.name}`}
+              className={classNames("w-8 h-8 flex justify-center items-center overflow-clip shrink-0")}
+            >
               {favicon ? (
                 <img className="w-full h-auto rounded" src={favicon} decoding="async" loading="lazy" />
               ) : (
@@ -120,7 +123,7 @@ const ShortcutCard = (props: Props) => {
           </Tooltip>
           <Tooltip title="View count" variant="solid" placement="top" arrow>
             <Link
-              to={`/shortcut/${shortcut.id}#analytics`}
+              to={`/shortcut/${shortcut.name}#analytics`}
               className="w-auto leading-5 flex flex-row justify-start items-center flex-nowrap whitespace-nowrap cursor-pointer text-gray-400 text-sm"
             >
               <Icon.BarChart2 className="w-4 h-auto mr-1 opacity-70" />