chore: fix create shortcut view activity

frontend/web/src/components/CreateCollectionDrawer.tsx

@@ -11,7 +11,6 @@ import { Shortcut } from "@/types/proto/api/v2/shortcut_service";
 import { convertVisibilityFromPb } from "@/utils/visibility";
 import useLoading from "../hooks/useLoading";
 import Icon from "./Icon";
-import ResourceNameInput from "./ResourceNameInput";
 import ShortcutView from "./ShortcutView";
 
 interface Props {
@@ -83,10 +82,10 @@ const CreateCollectionDrawer: React.FC<Props> = (props: Props) => {
     });
   };
 
-  const handleNameChange = (name: string) => {
+  const handleNameInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setPartialState({
       collectionCreate: Object.assign(state.collectionCreate, {
-        name: name.replace(/\s+/g, "-"),
+        name: e.target.value.replace(/\s+/g, "-"),
       }),
     });
   };
@@ -162,7 +161,18 @@ const CreateCollectionDrawer: React.FC<Props> = (props: Props) => {
       <ModalClose />
       <DialogContent className="max-w-full sm:max-w-sm">
         <div className="overflow-y-auto w-full mt-2 px-3 pb-4">
-          <ResourceNameInput name={state.collectionCreate.name} onChange={handleNameChange} />
+          <div className="w-full flex flex-col justify-start items-start mb-3">
+            <span className="mb-2">
+              Name <span className="text-red-600">*</span>
+            </span>
+            <Input
+              className="w-full"
+              type="text"
+              placeholder="The memorable name of the collection"
+              value={state.collectionCreate.name}
+              onChange={handleNameInputChange}
+            />
+          </div>
           <div className="w-full flex flex-col justify-start items-start mb-3">
             <span className="mb-2">
               Title <span className="text-red-600">*</span>
@@ -206,7 +216,7 @@ const CreateCollectionDrawer: React.FC<Props> = (props: Props) => {
             <p className="mb-2">
               <span>Shortcuts</span>
               <span className="opacity-60">({selectedShortcuts.length})</span>
-              {selectedShortcuts.length === 0 && <span className="ml-2 italic opacity-80 text-sm">Select a shortcut first</span>}
+              {selectedShortcuts.length === 0 && <span className="ml-2 italic opacity-80 text-sm">(Select a shortcut first)</span>}
             </p>
             <div className="w-full py-1 px-px flex flex-row justify-start items-start flex-wrap overflow-hidden gap-2">
               {selectedShortcuts.map((shortcut) => {

frontend/web/src/components/CreateShortcutDrawer.tsx

@@ -22,7 +22,6 @@ import { Shortcut } from "@/types/proto/api/v2/shortcut_service";
 import { convertVisibilityFromPb } from "@/utils/visibility";
 import useLoading from "../hooks/useLoading";
 import Icon from "./Icon";
-import ResourceNameInput from "./ResourceNameInput";
 
 interface Props {
   shortcutId?: number;
@@ -90,10 +89,10 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
     });
   };
 
-  const handleNameChange = (name: string) => {
+  const handleNameInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setPartialState({
       shortcutCreate: Object.assign(state.shortcutCreate, {
-        name: name.replace(/\s+/g, "-"),
+        name: e.target.value.replace(/\s+/g, "-"),
       }),
     });
   };
@@ -177,24 +176,25 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
   };
 
   const handleSaveBtnClick = async () => {
-    if (!state.shortcutCreate.name || !state.shortcutCreate.title || !state.shortcutCreate.link) {
+    if (!state.shortcutCreate.name || !state.shortcutCreate.link) {
       toast.error("Please fill in required fields.");
       return;
     }
 
     try {
+      const tags = tag.split(" ").filter(Boolean);
       if (shortcutId) {
         const originShortcut = shortcutStore.getShortcutById(shortcutId);
         const updatingShortcut = {
           ...state.shortcutCreate,
           id: shortcutId,
-          tags: tag.split(" ").filter(Boolean),
+          tags,
         };
         await shortcutStore.updateShortcut(updatingShortcut, getShortcutUpdateMask(originShortcut, updatingShortcut));
       } else {
         await shortcutStore.createShortcut({
           ...state.shortcutCreate,
-          tags: tag.split(" ").filter(Boolean),
+          tags,
         });
       }
 
@@ -213,9 +213,20 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
     <Drawer anchor="right" open={true} onClose={onClose}>
       <DialogTitle>{isCreating ? "Create Shortcut" : "Edit Shortcut"}</DialogTitle>
       <ModalClose />
-      <DialogContent className="max-w-full sm:max-w-sm">
+      <DialogContent className="w-full">
         <div className="overflow-y-auto w-full mt-2 px-3 pb-4">
-          <ResourceNameInput name={state.shortcutCreate.name} onChange={handleNameChange} />
+          <div className="w-full flex flex-col justify-start items-start mb-3">
+            <span className="mb-2">
+              Name <span className="text-red-600">*</span>
+            </span>
+            <Input
+              className="w-full"
+              type="text"
+              placeholder="The memorable name of the shortcut"
+              value={state.shortcutCreate.name}
+              onChange={handleNameInputChange}
+            />
+          </div>
           <div className="w-full flex flex-col justify-start items-start mb-3">
             <span className="mb-2">
               Link <span className="text-red-600">*</span>
@@ -229,9 +240,7 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
             />
           </div>
           <div className="w-full flex flex-col justify-start items-start mb-3">
-            <span className="mb-2">
-              Title <span className="text-red-600">*</span>
-            </span>
+            <span className="mb-2">Title</span>
             <Input
               className="w-full"
               type="text"

frontend/web/src/pages/MemoDashboard.tsx

@@ -0,0 +1,96 @@
+import { Button, Input } from "@mui/joy";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import CollectionView from "@/components/CollectionView";
+import CreateCollectionDrawer from "@/components/CreateCollectionDrawer";
+import useCollectionStore from "@/stores/v1/collection";
+import FilterView from "../components/FilterView";
+import Icon from "../components/Icon";
+import useLoading from "../hooks/useLoading";
+
+interface State {
+  showCreateCollectionDrawer: boolean;
+}
+
+const MemoDashboard: React.FC = () => {
+  const { t } = useTranslation();
+  const loadingState = useLoading();
+  const collectionStore = useCollectionStore();
+  const [state, setState] = useState<State>({
+    showCreateCollectionDrawer: false,
+  });
+  const [search, setSearch] = useState<string>("");
+  const filteredCollections = collectionStore.getCollectionList().filter((collection) => {
+    return (
+      collection.name.toLowerCase().includes(search.toLowerCase()) ||
+      collection.title.toLowerCase().includes(search.toLowerCase()) ||
+      collection.description.toLowerCase().includes(search.toLowerCase())
+    );
+  });
+
+  useEffect(() => {
+    Promise.all([collectionStore.fetchCollectionList()]).finally(() => {
+      loadingState.setFinish();
+    });
+  }, []);
+
+  const setShowCreateCollectionDrawer = (show: boolean) => {
+    setState({
+      ...state,
+      showCreateCollectionDrawer: show,
+    });
+  };
+
+  return (
+    <>
+      <div className="mx-auto max-w-8xl w-full px-3 md:px-12 pt-4 pb-6 flex flex-col justify-start items-start">
+        <div className="w-full flex flex-row justify-between items-center mb-4">
+          <div>
+            <Input
+              className="w-32 mr-2"
+              type="text"
+              size="sm"
+              placeholder={t("common.search")}
+              startDecorator={<Icon.Search className="w-4 h-auto" />}
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+            />
+          </div>
+          <div className="flex flex-row justify-start items-center">
+            <Button className="hover:shadow" variant="soft" size="sm" onClick={() => setShowCreateCollectionDrawer(true)}>
+              <Icon.Plus className="w-5 h-auto" />
+              <span className="ml-0.5">{t("common.create")}</span>
+            </Button>
+          </div>
+        </div>
+        <FilterView />
+        {loadingState.isLoading ? (
+          <div className="py-12 w-full flex flex-row justify-center items-center opacity-80 dark:text-gray-500">
+            <Icon.Loader className="mr-2 w-5 h-auto animate-spin" />
+            {t("common.loading")}
+          </div>
+        ) : filteredCollections.length === 0 ? (
+          <div className="py-16 w-full flex flex-col justify-center items-center text-gray-400">
+            <Icon.PackageOpen className="w-16 h-auto" strokeWidth="1" />
+            <p className="mt-4">No collections found.</p>
+          </div>
+        ) : (
+          <div className="w-full flex flex-col justify-start items-start gap-3">
+            {filteredCollections.map((collection) => {
+              return <CollectionView key={collection.id} collection={collection} />;
+            })}
+          </div>
+        )}
+      </div>
+
+      {state.showCreateCollectionDrawer && (
+        <CreateCollectionDrawer
+          onClose={() => setShowCreateCollectionDrawer(false)}
+          onConfirm={() => setShowCreateCollectionDrawer(false)}
+        />
+      )}
+    </>
+  );
+};
+
+export default MemoDashboard;

frontend/web/src/stores/v1/shortcut.ts

@@ -34,7 +34,7 @@ const useShortcutStore = create(
       }
       return shortcut;
     },
-    getOrFetchShortcutById: async (id: number, recordView = false) => {
+    getOrFetchShortcutById: async (id: number) => {
       const shortcutMap = get().shortcutMapById;
       if (shortcutMap[id]) {
         return shortcutMap[id] as Shortcut;
@@ -42,7 +42,6 @@ const useShortcutStore = create(
 
       const { shortcut } = await shortcutServiceClient.getShortcut({
         id,
-        recordView,
       });
       if (!shortcut) {
         throw new Error(`Shortcut with id ${id} not found`);