feat: add search box in collection dashboard

frontend/web/src/components/ShortcutsNavigator.tsx

@@ -18,7 +18,7 @@ const ShortcutsNavigator = () => {
         className={classNames(
           "flex flex-row justify-center items-center px-2 leading-7 text-sm dark:text-gray-400 rounded-md",
           currentTab === "tab:all"
-            ? "bg-gray-600 dark:bg-zinc-700 text-white dark:text-gray-400 shadow"
+            ? "bg-blue-700 dark:bg-blue-800 text-white dark:text-gray-400 shadow"
             : "hover:bg-gray-200 dark:hover:bg-zinc-700"
         )}
         onClick={() => viewStore.setFilter({ tab: "tab:all" })}
@@ -30,7 +30,7 @@ const ShortcutsNavigator = () => {
         className={classNames(
           "flex flex-row justify-center items-center px-2 leading-7 text-sm dark:text-gray-400 rounded-md",
           currentTab === "tab:mine"
-            ? "bg-gray-600 dark:bg-zinc-700 text-white dark:text-gray-400 shadow"
+            ? "bg-blue-700 dark:bg-blue-800 text-white dark:text-gray-400 shadow"
             : "hover:bg-gray-200 dark:hover:bg-zinc-700"
         )}
         onClick={() => viewStore.setFilter({ tab: "tab:mine" })}
@@ -44,7 +44,7 @@ const ShortcutsNavigator = () => {
           className={classNames(
             "flex flex-row justify-center items-center px-2 leading-7 text-sm dark:text-gray-400 rounded-md",
             currentTab === `tag:${tag}`
-              ? "bg-gray-600 dark:bg-zinc-700 text-white dark:text-gray-400 shadow"
+              ? "bg-blue-700 dark:bg-blue-800 text-white dark:text-gray-400 shadow"
               : "hover:bg-gray-200 dark:hover:bg-zinc-700"
           )}
           onClick={() => viewStore.setFilter({ tab: `tag:${tag}`, tag: undefined })}

frontend/web/src/pages/CollectionDashboard.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@mui/joy";
+import { Button, Input } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import CollectionView from "@/components/CollectionView";
@@ -17,10 +17,17 @@ const CollectionDashboard: React.FC = () => {
   const { t } = useTranslation();
   const loadingState = useLoading();
   const collectionStore = useCollectionStore();
-  const collections = collectionStore.getCollectionList();
   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([shortcutService.getMyAllShortcuts(), collectionStore.fetchCollectionList()]).finally(() => {
@@ -52,7 +59,17 @@ const CollectionDashboard: React.FC = () => {
           </div>
         </div>
         <div className="w-full flex flex-row justify-between items-center mb-4">
-          <div></div>
+          <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" />
@@ -66,14 +83,14 @@ const CollectionDashboard: React.FC = () => {
             <Icon.Loader className="mr-2 w-5 h-auto animate-spin" />
             {t("common.loading")}
           </div>
-        ) : collections.length === 0 ? (
+        ) : 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">
-            {collections.map((collection) => {
+            {filteredCollections.map((collection) => {
               return <CollectionView key={collection.id} collection={collection} />;
             })}
           </div>