feat: add visibility filter

web/src/components/AnalyticsDialog.tsx

@@ -85,7 +85,7 @@ const AnalyticsDialog: React.FC<Props> = (props: Props) => {
                     <thead>
                       <tr>
                         <th scope="col" className="py-2 px-2 text-left text-sm font-semibold text-gray-500">
-                          Devices
+                          Operating system
                         </th>
                         <th scope="col" className="py-2 pr-2 text-right text-sm font-semibold text-gray-500">
                           Visitors

web/src/components/FilterView.tsx

@@ -1,10 +1,13 @@
-import useViewStore from "../stores/v1/filter";
+import { useTranslation } from "react-i18next";
+import useViewStore from "../stores/v1/view";
 import Icon from "./Icon";
+import VisibilityIcon from "./VisibilityIcon";
 
 const FilterView = () => {
+  const { t } = useTranslation();
   const viewStore = useViewStore();
   const filter = viewStore.filter;
-  const shouldShowFilters = filter.tag !== undefined;
+  const shouldShowFilters = filter.tag !== undefined || filter.visibility !== undefined;
 
   if (!shouldShowFilters) {
     return <></>;
@@ -15,10 +18,21 @@ const FilterView = () => {
       <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"
+          className="ml-2 px-2 py-1 flex flex-row justify-center items-center bg-gray-100 rounded-full text-gray-500 text-sm hover:line-through"
           onClick={() => viewStore.setFilter({ tag: undefined })}
         >
           <Icon.Tag className="w-4 h-auto mr-1" />#{filter.tag}
+          <Icon.X className="w-4 h-auto ml-1" />
+        </button>
+      )}
+      {filter.visibility && (
+        <button
+          className="ml-2 px-2 py-1 flex flex-row justify-center items-center bg-gray-100 rounded-full text-gray-500 text-sm hover:line-through"
+          onClick={() => viewStore.setFilter({ visibility: undefined })}
+        >
+          <VisibilityIcon className="w-4 h-auto mr-1" visibility={filter.visibility} />
+          {t(`shortcut.visibility.${filter.visibility.toLowerCase()}.self`)}
+          <Icon.X className="w-4 h-auto ml-1" />
         </button>
       )}
     </div>

web/src/components/ShortcutView.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next";
 import toast from "react-hot-toast";
 import { shortcutService } from "../services";
 import useFaviconStore from "../stores/v1/favicon";
-import useViewStore from "../stores/v1/filter";
+import useViewStore from "../stores/v1/view";
 import useUserStore from "../stores/v1/user";
 import { absolutifyLink } from "../helpers/utils";
 import { showCommonDialog } from "./Alert";
@@ -143,14 +143,17 @@ const ShortcutView = (props: Props) => {
             </div>
           </Tooltip>
           <Tooltip title={t(`shortcut.visibility.${shortcut.visibility.toLowerCase()}.description`)} variant="solid" placement="top" arrow>
-            <div className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 text-sm">
+            <div
+              className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full cursor-pointer text-gray-500 text-sm"
+              onClick={() => viewStore.setFilter({ visibility: shortcut.visibility })}
+            >
               <VisibilityIcon className="w-4 h-auto mr-1" visibility={shortcut.visibility} />
               {t(`shortcut.visibility.${shortcut.visibility.toLowerCase()}.self`)}
             </div>
           </Tooltip>
           <Tooltip title="View count" variant="solid" placement="top" arrow>
             <div
-              className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 text-sm"
+              className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full cursor-pointer text-gray-500 text-sm"
               onClick={() => setShowAnalyticsDialog(true)}
             >
               <Icon.BarChart2 className="w-4 h-auto mr-1" />

web/src/pages/Home.tsx

@@ -2,7 +2,7 @@ import { Button, Tab, TabList, Tabs } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { shortcutService } from "../services";
 import { useAppSelector } from "../stores";
-import useViewStore, { Filter } from "../stores/v1/filter";
+import useViewStore, { Filter } from "../stores/v1/view";
 import useUserStore from "../stores/v1/user";
 import useLoading from "../hooks/useLoading";
 import Icon from "../components/Icon";
@@ -15,7 +15,7 @@ interface State {
 }
 
 const getFilteredShortcutList = (shortcutList: Shortcut[], filter: Filter, currentUser: User) => {
-  const { tag, mineOnly } = filter;
+  const { tag, mineOnly, visibility } = filter;
   const filteredShortcutList = shortcutList.filter((shortcut) => {
     if (tag) {
       if (!shortcut.tags.includes(tag)) {
@@ -27,6 +27,11 @@ const getFilteredShortcutList = (shortcutList: Shortcut[], filter: Filter, curre
         return false;
       }
     }
+    if (visibility) {
+      if (shortcut.visibility !== visibility) {
+        return false;
+      }
+    }
     return true;
   });
   return filteredShortcutList;

web/src/stores/v1/view.ts

@@ -4,6 +4,7 @@ import { persist } from "zustand/middleware";
 export interface Filter {
   tag?: string;
   mineOnly?: boolean;
+  visibility?: Visibility;
 }
 
 interface ViewState {