aykhans/slash-e
1
0
Fork 0
mirror of https://github.com/aykhans/slash-e.git synced 2025-07-06 21:22:36 +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

40
frontend/web/src/components/Header.tsx
View File

@ -1,7 +1,7 @@
import { Avatar } from "@mui/joy";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { Link, useLocation } from "react-router-dom";
import useWorkspaceStore from "@/stores/v1/workspace";
import { PlanType } from "@/types/proto/api/v2/subscription_service";
import * as api from "../helpers/api";
@ -12,11 +12,13 @@ import Dropdown from "./common/Dropdown";
const Header: React.FC = () => {
const { t } = useTranslation();
const location = useLocation();
const workspaceStore = useWorkspaceStore();
const currentUser = useUserStore().getCurrentUser();
const [showAboutDialog, setShowAboutDialog] = useState<boolean>(false);
const profile = workspaceStore.profile;
const isAdmin = currentUser.role === "ADMIN";
const shouldShowRouterSwitch = location.pathname === "/" || location.pathname === "/collections";
const handleSignOutButtonClick = async () => {
await api.signout();
@ -26,10 +28,10 @@ const Header: React.FC = () => {
return (
<>
<div className="w-full bg-gray-50 dark:bg-zinc-800 border-b border-b-gray-200 dark:border-b-zinc-800">
<div className="w-full max-w-8xl mx-auto px-3 md:px-12 py-5 flex flex-row justify-between items-center">
<div className="w-full max-w-8xl mx-auto px-3 md:px-12 py-3 sm:py-5 flex flex-row justify-between items-center">
<div className="flex flex-row justify-start items-center shrink mr-2">
<Link to="/" className="text-lg cursor-pointer flex flex-row justify-start items-center dark:text-gray-400">
<img id="logo-img" src="/logo.png" className="w-8 h-auto mr-2 -mt-0.5 dark:opacity-80 rounded-full shadow" alt="" />
<Link to="/" className="sm:text-lg cursor-pointer flex flex-row justify-start items-center dark:text-gray-400">
<img id="logo-img" src="/logo.png" className="w-6 sm:w-8 h-auto mr-2 -mt-0.5 dark:opacity-80 rounded-full shadow" alt="" />
Slash
</Link>
{profile.plan === PlanType.PRO && (
@ -37,6 +39,36 @@ const Header: React.FC = () => {
PRO
</span>
)}
{shouldShowRouterSwitch && (
<>
<span className="font-mono opacity-60 mx-2">/</span>
<Dropdown
trigger={
<button className="sm:text-lg flex flex-row justify-end items-center cursor-pointer">
<span className="dark:text-gray-400">{location.pathname === "/" ? "Shortcuts" : "Collections"}</span>
<Icon.ChevronsUpDown className="ml-1 w-4 h-auto text-gray-600 dark:text-gray-400" />
</button>
}
actionsClassName="!w-36 -left-4"
actions={
<>
<Link
to="/"
className="w-full px-2 flex flex-row justify-start items-center text-left dark:text-gray-400 leading-8 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
>
<Icon.SquareSlash className="w-5 h-auto mr-2" /> Shortcuts
</Link>
<Link
to="/collections"
className="w-full px-2 flex flex-row justify-start items-center text-left dark:text-gray-400 leading-8 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
>
<Icon.LibrarySquare className="w-5 h-auto mr-2" /> Collections
</Link>
</>
}
></Dropdown>
</>
)}
</div>
<div className="relative flex-shrink-0">
<Dropdown