mirror of
https://github.com/Mintplex-Labs/anything-llm.git
synced 2024-11-14 18:40:11 +01:00
main and settings sidebar UI updates & improve performance using Link instead of <a>
This commit is contained in:
shatfield4
parent
d66d541986
commit
613611cea3
@ -1,6 +1,5 @@
|
||||
import System from "@/models/system";
|
||||
import paths from "@/utils/paths";
|
||||
import { safeJsonParse } from "@/utils/request";
|
||||
import {
|
||||
BookOpen,
|
||||
DiscordLogo,
|
||||
|
||||
@ -1,17 +1,29 @@
|
||||
import useUser from "@/hooks/useUser";
|
||||
import paths from "@/utils/paths";
|
||||
import { Wrench } from "@phosphor-icons/react";
|
||||
import { ArrowUUpLeft, Wrench } from "@phosphor-icons/react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { useMatch } from "react-router-dom";
|
||||
|
||||
export default function SettingsButton() {
|
||||
const isInSettings = !!useMatch("/settings/*");
|
||||
const { user } = useUser();
|
||||
|
||||
if (isInSettings)
|
||||
return (
|
||||
<Link
|
||||
to={paths.home()}
|
||||
className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
|
||||
>
|
||||
<ArrowUUpLeft className="h-5 w-5" weight="fill" />
|
||||
</Link>
|
||||
);
|
||||
|
||||
return (
|
||||
<a
|
||||
href={
|
||||
!!user?.role ? paths.settings.system() : paths.settings.appearance()
|
||||
}
|
||||
<Link
|
||||
to={!!user?.role ? paths.settings.system() : paths.settings.appearance()}
|
||||
className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
|
||||
>
|
||||
<Wrench className="h-5 w-5" weight="fill" />
|
||||
</a>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
@ -13,7 +13,6 @@ import {
|
||||
Database,
|
||||
Lock,
|
||||
House,
|
||||
X,
|
||||
List,
|
||||
FileCode,
|
||||
Plugs,
|
||||
@ -25,6 +24,7 @@ import useUser from "@/hooks/useUser";
|
||||
import { USER_BACKGROUND_COLOR } from "@/utils/constants";
|
||||
import { isMobile } from "react-device-detect";
|
||||
import Footer from "../Footer";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
export default function SettingsSidebar() {
|
||||
const { logo } = useLogo();
|
||||
@ -124,50 +124,40 @@ export default function SettingsSidebar() {
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<Link
|
||||
to={paths.home()}
|
||||
className="flex shrink-0 max-w-[55%] items-center justify-start mx-[38px] my-[18px]"
|
||||
>
|
||||
<img
|
||||
src={logo}
|
||||
alt="Logo"
|
||||
className="rounded max-h-[24px]"
|
||||
style={{ objectFit: "contain" }}
|
||||
/>
|
||||
</Link>
|
||||
<div
|
||||
ref={sidebarRef}
|
||||
style={{ height: "calc(100% - 32px)" }}
|
||||
className="transition-all duration-500 relative m-[16px] rounded-[26px] bg-sidebar border-4 border-accent min-w-[250px] p-[18px]"
|
||||
style={{ height: "calc(100% - 76px)" }}
|
||||
className="transition-all duration-500 relative m-[16px] rounded-[16px] bg-sidebar border-2 border-outline min-w-[250px] p-[10px]"
|
||||
>
|
||||
<div className="w-full h-full flex flex-col overflow-x-hidden items-between">
|
||||
{/* Header Information */}
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<div className="flex shrink-0 max-w-[65%] items-center justify-start ml-2">
|
||||
<img
|
||||
src={logo}
|
||||
alt="Logo"
|
||||
className="rounded max-h-[40px]"
|
||||
style={{ objectFit: "contain" }}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-x-2 items-center text-slate-500">
|
||||
<a
|
||||
href={paths.home()}
|
||||
className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</a>
|
||||
</div>
|
||||
<div className="w-full h-full flex flex-col overflow-x-hidden items-between min-w-[235px]">
|
||||
<div className="text-white text-opacity-60 text-sm font-medium uppercase mt-[4px] mb-0 ml-2">
|
||||
Instance Settings
|
||||
</div>
|
||||
<div className="text-white text-opacity-60 text-sm font-medium uppercase mt-4 mb-0 ml-2">
|
||||
Settings
|
||||
</div>
|
||||
{/* Primary Body */}
|
||||
<div className="h-full flex flex-col w-full justify-between pt-4 overflow-y-scroll no-scroll">
|
||||
<div className="relative h-full flex flex-col w-full justify-between pt-[10px] overflow-y-scroll no-scroll">
|
||||
<div className="h-auto sidebar-items">
|
||||
{/* Options */}
|
||||
<div className="flex flex-col gap-y-2 h-full pb-8 overflow-y-scroll no-scroll">
|
||||
<SidebarOptions user={user} />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="mb-2">
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -196,15 +186,16 @@ const Option = ({
|
||||
return (
|
||||
<>
|
||||
<div className="flex gap-x-2 items-center justify-between text-white">
|
||||
<a
|
||||
href={href}
|
||||
<Link
|
||||
to={href}
|
||||
className={`
|
||||
transition-all duration-[200ms]
|
||||
flex flex-grow w-[75%] h-[36px] gap-x-2 py-[5px] px-4 rounded justify-start items-center border
|
||||
flex flex-grow w-[75%] gap-x-2 py-[6px] px-[12px] rounded-[4px] text-white justify-start items-center
|
||||
hover:bg-workspace-item-selected-gradient hover:text-white hover:font-bold
|
||||
${
|
||||
isActive
|
||||
? "bg-menu-item-selected-gradient border-slate-100 border-opacity-50 font-medium"
|
||||
: "hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent"
|
||||
? "bg-menu-item-selected-gradient font-bold border-outline"
|
||||
: "hover:bg-menu-item-selected-gradient text-white/30"
|
||||
}
|
||||
`}
|
||||
>
|
||||
@ -212,7 +203,7 @@ const Option = ({
|
||||
<p className="text-sm leading-loose text-opacity-60 whitespace-nowrap overflow-hidden ">
|
||||
{btnText}
|
||||
</p>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
{!!subOptions && (isActive || hasActiveChild) && (
|
||||
<div
|
||||
|
||||
@ -23,8 +23,7 @@ export default function ActiveWorkspaces() {
|
||||
const [uploadHover, setUploadHover] = useState({});
|
||||
const { showing, showModal, hideModal } = useManageWorkspaceModal();
|
||||
const { user } = useUser();
|
||||
const match = useMatch("/workspace/:slug/settings/:tab");
|
||||
const isInWorkspaceSettings = !!match;
|
||||
const isInWorkspaceSettings = !!useMatch("/workspace/:slug/settings/:tab");
|
||||
|
||||
useEffect(() => {
|
||||
async function getWorkspaces() {
|
||||
@ -92,12 +91,12 @@ export default function ActiveWorkspaces() {
|
||||
href={isActive ? null : paths.workspace.chat(workspace.slug)}
|
||||
className={`
|
||||
transition-all duration-[200ms]
|
||||
flex flex-grow w-[75%] gap-x-2 py-[6px] px-[12px] rounded-[4px] text-slate-200 justify-start items-center
|
||||
hover:bg-workspace-item-selected-gradient
|
||||
flex flex-grow w-[75%] gap-x-2 py-[6px] px-[12px] rounded-[4px] text-white justify-start items-center
|
||||
hover:bg-workspace-item-selected-gradient hover:font-bold border-2 border-outline
|
||||
${
|
||||
isActive
|
||||
? "bg-workspace-item-selected-gradient"
|
||||
: "border-[2px] border-outline"
|
||||
? "bg-workspace-item-selected-gradient font-bold"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<div className="flex flex-row justify-between w-full">
|
||||
@ -108,7 +107,7 @@ export default function ActiveWorkspaces() {
|
||||
size={24}
|
||||
/>
|
||||
<p
|
||||
className={`text-white text-[14px] leading-loose font-bold whitespace-nowrap overflow-hidden ${
|
||||
className={`text-white text-[14px] leading-loose whitespace-nowrap overflow-hidden ${
|
||||
isActive ? "" : "text-opacity-80"
|
||||
}`}
|
||||
>
|
||||
|
||||
@ -9,6 +9,8 @@ import useLogo from "@/hooks/useLogo";
|
||||
import useUser from "@/hooks/useUser";
|
||||
import Footer from "../Footer";
|
||||
import SettingsButton from "../SettingsButton";
|
||||
import { Link } from "react-router-dom";
|
||||
import paths from "@/utils/paths";
|
||||
|
||||
export default function Sidebar() {
|
||||
const { user } = useUser();
|
||||
@ -22,14 +24,17 @@ export default function Sidebar() {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex shrink-0 max-w-[55%] items-center justify-start mx-[38px] my-[18px]">
|
||||
<Link
|
||||
to={paths.home()}
|
||||
className="flex shrink-0 max-w-[55%] items-center justify-start mx-[38px] my-[18px]"
|
||||
>
|
||||
<img
|
||||
src={logo}
|
||||
alt="Logo"
|
||||
className="rounded max-h-[24px]"
|
||||
style={{ objectFit: "contain" }}
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
<div
|
||||
ref={sidebarRef}
|
||||
style={{ height: "calc(100% - 76px)" }}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user