feat: add tag filter

web/src/components/FilterView.tsx

@@ -0,0 +1,28 @@
+import useFilterStore from "../stores/v1/filter";
+import Icon from "./Icon";
+
+const FilterView = () => {
+  const filterStore = useFilterStore();
+  const filter = filterStore.filter;
+  const shouldShowFilters = filter.tag !== undefined;
+
+  if (!shouldShowFilters) {
+    return <></>;
+  }
+
+  return (
+    <div className="w-full flex flex-row justify-start items-center mb-4 pl-2">
+      <span className="text-gray-400">Filters:</span>
+      {filter.tag && (
+        <button
+          className="ml-2 px-2 py-1 flex flex-row justify-center items-center bg-gray-200 rounded-full text-gray-500 text-sm hover:line-through"
+          onClick={() => filterStore.setFilter({ tag: undefined })}
+        >
+          <Icon.Tag className="w-4 h-auto mr-1" />#{filter.tag}
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default FilterView;

web/src/components/ShortcutView.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 import toast from "react-hot-toast";
 import { shortcutService } from "../services";
 import useFaviconStore from "../stores/v1/favicon";
+import useFilterStore from "../stores/v1/filter";
 import useUserStore from "../stores/v1/user";
 import { absolutifyLink } from "../helpers/utils";
 import { showCommonDialog } from "./Alert";
@@ -22,6 +23,7 @@ const ShortcutView = (props: Props) => {
   const { shortcut, handleEdit } = props;
   const { t } = useTranslation();
   const currentUser = useUserStore().getCurrentUser();
+  const filterStore = useFilterStore();
   const faviconStore = useFaviconStore();
   const [favicon, setFavicon] = useState<string | undefined>(undefined);
   const [showQRCodeDialog, setShowQRCodeDialog] = useState<boolean>(false);
@@ -116,11 +118,15 @@ 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-1 flex flex-row justify-start items-start gap-2">
+          <div className="mt-2 ml-1 flex flex-row justify-start items-start gap-2">
             <Icon.Tag className="text-gray-400 w-4 h-auto" />
             {shortcut.tags.map((tag) => {
               return (
-                <span key={tag} className="text-gray-400 text-sm font-mono leading-4">
+                <span
+                  key={tag}
+                  className="text-gray-400 text-sm font-mono leading-4 cursor-pointer hover:text-gray-600"
+                  onClick={() => filterStore.setFilter({ tag: tag })}
+                >
                   #{tag}
                 </span>
               );