kamp/anything-llm
1
0
Fork 0
mirror of https://github.com/Mintplex-Labs/anything-llm.git synced 2024-11-15 02:50:10 +01:00
Code Issues Packages Projects Releases Wiki Activity

main and settings sidebar UI updates & improve performance using Link instead of <a>

Browse Source
This commit is contained in:
shatfield4 2024-02-26 21:05:31 -08:00
parent d66d541986
commit 613611cea3
5 changed files with 59 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/components/Footer/index.jsx
View File

@ -1,6 +1,5 @@
import System from "@/models/system"; import System from "@/models/system";
import paths from "@/utils/paths"; import paths from "@/utils/paths";
import { safeJsonParse } from "@/utils/request";
import { import {
BookOpen, BookOpen,
DiscordLogo, DiscordLogo,

24
frontend/src/components/SettingsButton/index.jsx
View File

@ -1,17 +1,29 @@
import useUser from "@/hooks/useUser"; import useUser from "@/hooks/useUser";
import paths from "@/utils/paths"; 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() { export default function SettingsButton() {
const isInSettings = !!useMatch("/settings/*");
const { user } = useUser(); const { user } = useUser();
if (isInSettings)
return ( return (
<a <Link
href={ to={paths.home()}
!!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"
} >
<ArrowUUpLeft className="h-5 w-5" weight="fill" />
</Link>
);
return (
<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" 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" /> <Wrench className="h-5 w-5" weight="fill" />
</a> </Link>
); );
} }

57
frontend/src/components/SettingsSidebar/index.jsx
View File

@ -13,7 +13,6 @@ import {
Database, Database,
Lock, Lock,
House, House,
X,
List, List,
FileCode, FileCode,
Plugs, Plugs,
@ -25,6 +24,7 @@ import useUser from "@/hooks/useUser";
import { USER_BACKGROUND_COLOR } from "@/utils/constants"; import { USER_BACKGROUND_COLOR } from "@/utils/constants";
import { isMobile } from "react-device-detect"; import { isMobile } from "react-device-detect";
import Footer from "../Footer"; import Footer from "../Footer";
import { Link } from "react-router-dom";
export default function SettingsSidebar() { export default function SettingsSidebar() {
const { logo } = useLogo(); const { logo } = useLogo();
@ -124,50 +124,40 @@ export default function SettingsSidebar() {
} }
return ( return (
<> <div>
<div <Link
ref={sidebarRef} to={paths.home()}
style={{ height: "calc(100% - 32px)" }} className="flex shrink-0 max-w-[55%] items-center justify-start mx-[38px] my-[18px]"
className="transition-all duration-500 relative m-[16px] rounded-[26px] bg-sidebar border-4 border-accent min-w-[250px] p-[18px]"
> >
<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 <img
src={logo} src={logo}
alt="Logo" alt="Logo"
className="rounded max-h-[40px]" className="rounded max-h-[24px]"
style={{ objectFit: "contain" }} style={{ objectFit: "contain" }}
/> />
</div> </Link>
<div className="flex gap-x-2 items-center text-slate-500"> <div
<a ref={sidebarRef}
href={paths.home()} style={{ height: "calc(100% - 76px)" }}
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" className="transition-all duration-500 relative m-[16px] rounded-[16px] bg-sidebar border-2 border-outline min-w-[250px] p-[10px]"
> >
<X className="h-4 w-4" /> <div className="w-full h-full flex flex-col overflow-x-hidden items-between min-w-[235px]">
</a> <div className="text-white text-opacity-60 text-sm font-medium uppercase mt-[4px] mb-0 ml-2">
Instance Settings
</div> </div>
</div> <div className="relative h-full flex flex-col w-full justify-between pt-[10px] overflow-y-scroll no-scroll">
<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="h-auto sidebar-items"> <div className="h-auto sidebar-items">
{/* Options */}
<div className="flex flex-col gap-y-2 h-full pb-8 overflow-y-scroll no-scroll"> <div className="flex flex-col gap-y-2 h-full pb-8 overflow-y-scroll no-scroll">
<SidebarOptions user={user} /> <SidebarOptions user={user} />
</div> </div>
</div> </div>
<div> <div className="mb-2">
<Footer /> <Footer />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</> </div>
); );
} }
@ -196,15 +186,16 @@ const Option = ({
return ( return (
<> <>
<div className="flex gap-x-2 items-center justify-between text-white"> <div className="flex gap-x-2 items-center justify-between text-white">
<a <Link
href={href} to={href}
className={` className={`
transition-all duration-[200ms] 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 isActive
? "bg-menu-item-selected-gradient border-slate-100 border-opacity-50 font-medium" ? "bg-menu-item-selected-gradient font-bold border-outline"
: "hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent" : "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 "> <p className="text-sm leading-loose text-opacity-60 whitespace-nowrap overflow-hidden ">
{btnText} {btnText}
</p> </p>
</a> </Link>
</div> </div>
{!!subOptions && (isActive || hasActiveChild) && ( {!!subOptions && (isActive || hasActiveChild) && (
<div <div

13
frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
View File

@ -23,8 +23,7 @@ export default function ActiveWorkspaces() {
const [uploadHover, setUploadHover] = useState({}); const [uploadHover, setUploadHover] = useState({});
const { showing, showModal, hideModal } = useManageWorkspaceModal(); const { showing, showModal, hideModal } = useManageWorkspaceModal();
const { user } = useUser(); const { user } = useUser();
const match = useMatch("/workspace/:slug/settings/:tab"); const isInWorkspaceSettings = !!useMatch("/workspace/:slug/settings/:tab");
const isInWorkspaceSettings = !!match;
useEffect(() => { useEffect(() => {
async function getWorkspaces() { async function getWorkspaces() {
@ -92,12 +91,12 @@ export default function ActiveWorkspaces() {
href={isActive ? null : paths.workspace.chat(workspace.slug)} href={isActive ? null : paths.workspace.chat(workspace.slug)}
className={` className={`
transition-all duration-[200ms] 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 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:bg-workspace-item-selected-gradient hover:font-bold border-2 border-outline
${ ${
isActive isActive
? "bg-workspace-item-selected-gradient" ? "bg-workspace-item-selected-gradient font-bold"
: "border-[2px] border-outline" : ""
}`} }`}
> >
<div className="flex flex-row justify-between w-full"> <div className="flex flex-row justify-between w-full">
@ -108,7 +107,7 @@ export default function ActiveWorkspaces() {
size={24} size={24}
/> />
<p <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" isActive ? "" : "text-opacity-80"
}`} }`}
> >

9
frontend/src/components/Sidebar/index.jsx
View File

@ -9,6 +9,8 @@ import useLogo from "@/hooks/useLogo";
import useUser from "@/hooks/useUser"; import useUser from "@/hooks/useUser";
import Footer from "../Footer"; import Footer from "../Footer";
import SettingsButton from "../SettingsButton"; import SettingsButton from "../SettingsButton";
import { Link } from "react-router-dom";
import paths from "@/utils/paths";
export default function Sidebar() { export default function Sidebar() {
const { user } = useUser(); const { user } = useUser();
@ -22,14 +24,17 @@ export default function Sidebar() {
return ( return (
<div> <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 <img
src={logo} src={logo}
alt="Logo" alt="Logo"
className="rounded max-h-[24px]" className="rounded max-h-[24px]"
style={{ objectFit: "contain" }} style={{ objectFit: "contain" }}
/> />
</div> </Link>
<div <div
ref={sidebarRef} ref={sidebarRef}
style={{ height: "calc(100% - 76px)" }} style={{ height: "calc(100% - 76px)" }}