aykhans/slash-e
1
0
Fork 0
mirror of https://github.com/aykhans/slash-e.git synced 2025-07-07 05:32:35 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add collection views

Browse Source
This commit is contained in:
Steven
2023-11-12 10:47:49 +08:00
parent 626b0df21c
commit 83970d5d55
18 changed files with 887 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
frontend/web/src/components/ShortcutsNavigator.tsx Normal file
View File

@ -0,0 +1,70 @@
import classNames from "classnames";
import { useTranslation } from "react-i18next";
import { useAppSelector } from "../stores";
import useViewStore from "../stores/v1/view";
import Icon from "./Icon";
const ShortcutsNavigator = () => {
const { t } = useTranslation();
const viewStore = useViewStore();
const { shortcutList } = useAppSelector((state) => state.shortcut);
const tags = shortcutList.map((shortcut) => shortcut.tags).flat();
const currentTab = viewStore.filter.tab || `tab:all`;
const sortedTagMap = sortTags(tags);
return (
<div className="w-full flex flex-row justify-start items-center mb-4 gap-1 sm:flex-wrap overflow-x-auto no-scrollbar">
<button
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"
: "hover:bg-gray-200 dark:hover:bg-zinc-700"
)}
onClick={() => viewStore.setFilter({ tab: "tab:all" })}
>
<Icon.CircleSlash className="w-4 h-auto mr-1" />
<span className="font-normal">{t("filter.all")}</span>
</button>
<button
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"
: "hover:bg-gray-200 dark:hover:bg-zinc-700"
)}
onClick={() => viewStore.setFilter({ tab: "tab:mine" })}
>
<Icon.User className="w-4 h-auto mr-1" />
<span className="font-normal">{t("filter.mine")}</span>
</button>
{Array.from(sortedTagMap.keys()).map((tag) => (
<button
key={tag}
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"
: "hover:bg-gray-200 dark:hover:bg-zinc-700"
)}
onClick={() => viewStore.setFilter({ tab: `tag:${tag}`, tag: undefined })}
>
<Icon.Hash className="w-4 h-auto mr-0.5" />
<span className="max-w-[8rem] truncate font-normal">{tag}</span>
</button>
))}
</div>
);
};
const sortTags = (tags: string[]): Map<string, number> => {
const map = new Map<string, number>();
for (const tag of tags) {
const count = map.get(tag) || 0;
map.set(tag, count + 1);
}
const sortedMap = new Map([...map.entries()].sort((a, b) => b[1] - a[1]));
return sortedMap;
};
export default ShortcutsNavigator;