feat: implement navigator

web/src/components/Navigator.tsx

@@ -0,0 +1,49 @@
+import { uniq } from "lodash-es";
+import { Button } from "@mui/joy";
+import { useAppSelector } from "../stores";
+import useViewStore from "../stores/v1/view";
+import Icon from "./Icon";
+
+const Navigator = () => {
+  const viewStore = useViewStore();
+  const { shortcutList } = useAppSelector((state) => state.shortcut);
+  const tags = uniq(shortcutList.map((shortcut) => shortcut.tags).flat());
+  const currentTab = viewStore.filter.tab || `tab:all`;
+
+  return (
+    <div className="w-full flex flex-row justify-start items-center gap-1 flex-wrap mb-4">
+      <Button
+        variant={currentTab === "tab:all" ? "solid" : "plain"}
+        color="neutral"
+        size="sm"
+        onClick={() => viewStore.setFilter({ tab: "tab:all" })}
+      >
+        <Icon.CircleSlash className="w-4 h-auto mr-1" />
+        <span>All</span>
+      </Button>
+      <Button
+        variant={currentTab === "tab:mine" ? "solid" : "plain"}
+        color="neutral"
+        size="sm"
+        onClick={() => viewStore.setFilter({ tab: "tab:mine" })}
+      >
+        <Icon.User className="w-4 h-auto mr-1" />
+        <span>Mine</span>
+      </Button>
+      {tags.map((tag) => (
+        <Button
+          key={tag}
+          variant={currentTab === `tag:${tag}` ? "solid" : "plain"}
+          color="neutral"
+          size="sm"
+          onClick={() => viewStore.setFilter({ tab: `tag:${tag}` })}
+        >
+          <Icon.Hash className="w-4 h-auto mr-1" />
+          <span className="max-w-[8rem] truncate">{tag}</span>
+        </Button>
+      ))}
+    </div>
+  );
+};
+
+export default Navigator;

web/src/components/ShortcutView.tsx

@@ -130,8 +130,7 @@ const ShortcutView = (props: Props) => {
         </div>
         {shortcut.description && <p className="mt-1 text-gray-400 text-sm">{shortcut.description}</p>}
         {shortcut.tags.length > 0 && (
-          <div className="mt-2 ml-1 flex flex-row justify-start items-start flex-wrap gap-2">
-            <Icon.Tag className="text-gray-400 w-4 h-auto" />
+          <div className="mt-2 flex flex-row justify-start items-start flex-wrap gap-2">
             {shortcut.tags.map((tag) => {
               return (
                 <span