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">
+          <div className="mt-2 flex flex-row justify-start items-start flex-wrap gap-2">
-            <Icon.Tag className="text-gray-400 w-4 h-auto" />
             {shortcut.tags.map((tag) => {
               return (
                 <span

web/src/pages/Home.tsx

@@ -1,4 +1,4 @@
-import { Button, Input, Tab, TabList, Tabs } from "@mui/joy";
+import { Button, Input } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { shortcutService } from "../services";
 import { useAppSelector } from "../stores";
@@ -10,6 +10,7 @@ import ShortcutListView from "../components/ShortcutListView";
 import CreateShortcutDialog from "../components/CreateShortcutDialog";
 import FilterView from "../components/FilterView";
 import OrderSetting from "../components/OrderSetting";
+import Navigator from "../components/Navigator";
 
 interface State {
   showCreateShortcutDialog: boolean;
@@ -23,8 +24,6 @@ const Home: React.FC = () => {
   const [state, setState] = useState<State>({
     showCreateShortcutDialog: false,
   });
-  const [selectedTab, setSelectedTab] = useState<string>("ALL");
-  const tags = shortcutList.map((shortcut) => shortcut.tags).flat();
   const filter = viewStore.filter;
   const filteredShortcutList = getFilteredShortcutList(shortcutList, filter, currentUser);
   const orderedShortcutList = getOrderedShortcutList(filteredShortcutList, viewStore.order);
@@ -45,44 +44,31 @@ const Home: React.FC = () => {
   return (
     <>
       <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start">
-        <div className="w-full flex flex-row justify-between items-center mb-4">
+        <Navigator />
-          <span className="font-mono text-gray-400 mr-2">Shortcuts</span>
-          <Input
-            className="w-32"
-            type="text"
-            size="sm"
-            placeholder="Search"
-            startDecorator={<Icon.Search className="w-4 h-auto" />}
-            endDecorator={
-              filter.search && <Icon.X className="w-4 h-auto cursor-pointer" onClick={() => viewStore.setFilter({ search: "" })} />
-            }
-            value={filter.search}
-            onChange={(e) => viewStore.setFilter({ search: e.target.value })}
-          />
-        </div>
         <div className="w-full flex flex-row justify-between items-center mb-4">
           <div className="flex flex-row justify-start items-center">
+            <span className="font-mono text-gray-400 mr-2">Shortcuts</span>
             <Button className="hover:shadow" variant="soft" size="sm" onClick={() => setShowCreateShortcutDialog(true)}>
-              <Icon.Plus className="w-5 h-auto" /> New
+              <Icon.Plus className="w-5 h-auto" />
             </Button>
           </div>
           <div className="flex flex-row justify-end items-center">
             <OrderSetting />
-            <Tabs
+            <Input
-              value={filter.mineOnly ? "PRIVATE" : "ALL"}
+              className="w-32"
+              type="text"
               size="sm"
-              onChange={(_, value) => viewStore.setFilter({ mineOnly: value !== "ALL" })}
+              placeholder="Search"
-            >
+              startDecorator={<Icon.Search className="w-4 h-auto" />}
-              <TabList>
+              endDecorator={
-                <Tab value={"ALL"}>All</Tab>
+                filter.search && <Icon.X className="w-4 h-auto cursor-pointer" onClick={() => viewStore.setFilter({ search: "" })} />
-                <Tab value={"PRIVATE"}>My Own</Tab>
+              }
-              </TabList>
+              value={filter.search}
-            </Tabs>
+              onChange={(e) => viewStore.setFilter({ search: e.target.value })}
+            />
           </div>
         </div>
-
         <FilterView />
-
         {loadingState.isLoading ? (
           <div className="py-12 w-full flex flex-row justify-center items-center opacity-80">
             <Icon.Loader className="mr-2 w-5 h-auto animate-spin" />

web/src/stores/v1/view.ts

@@ -2,8 +2,8 @@ import { create } from "zustand";
 import { persist } from "zustand/middleware";
 
 export interface Filter {
+  tab?: string;
   tag?: string;
-  mineOnly?: boolean;
   visibility?: Visibility;
   search?: string;
 }
@@ -49,18 +49,13 @@ const useViewStore = create<ViewState>()(
 );
 
 export const getFilteredShortcutList = (shortcutList: Shortcut[], filter: Filter, currentUser: User) => {
-  const { tag, mineOnly, visibility, search } = filter;
+  const { tab, tag, visibility, search } = filter;
   const filteredShortcutList = shortcutList.filter((shortcut) => {
     if (tag) {
       if (!shortcut.tags.includes(tag)) {
         return false;
       }
     }
-    if (mineOnly) {
-      if (shortcut.creatorId !== currentUser.id) {
-        return false;
-      }
-    }
     if (visibility) {
       if (shortcut.visibility !== visibility) {
         return false;
@@ -76,6 +71,14 @@ export const getFilteredShortcutList = (shortcutList: Shortcut[], filter: Filter
         return false;
       }
     }
+    if (tab) {
+      if (tab === "tab:mine") {
+        return shortcut.creatorId === currentUser.id;
+      } else if (tab.startsWith("tag:")) {
+        const tag = tab.split(":")[1];
+        return shortcut.tags.includes(tag);
+      }
+    }
     return true;
   });
   return filteredShortcutList;