mirror of
https://github.com/Mintplex-Labs/anything-llm.git
synced 2024-11-19 12:40:09 +01:00
Refactor workspace sidebar component styles (#2380)
rely on css for conditional styles
This commit is contained in:
Sean Hatfield
GitHub
parent
30d2f0914a
commit
4eb3ded7e2
@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import * as Skeleton from "react-loading-skeleton";
|
||||
import "react-loading-skeleton/dist/skeleton.css";
|
||||
import Workspace from "@/models/workspace";
|
||||
@ -8,7 +8,6 @@ import ManageWorkspace, {
|
||||
import paths from "@/utils/paths";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { GearSix, SquaresFour, UploadSimple } from "@phosphor-icons/react";
|
||||
import truncate from "truncate";
|
||||
import useUser from "@/hooks/useUser";
|
||||
import ThreadContainer from "./ThreadContainer";
|
||||
import { Link, useMatch } from "react-router-dom";
|
||||
@ -18,9 +17,6 @@ export default function ActiveWorkspaces() {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [workspaces, setWorkspaces] = useState([]);
|
||||
const [selectedWs, setSelectedWs] = useState(null);
|
||||
const [hoverStates, setHoverStates] = useState({});
|
||||
const [gearHover, setGearHover] = useState({});
|
||||
const [uploadHover, setUploadHover] = useState({});
|
||||
const { showing, showModal, hideModal } = useManageWorkspaceModal();
|
||||
const { user } = useUser();
|
||||
const isInWorkspaceSettings = !!useMatch("/workspace/:slug/settings/:tab");
|
||||
@ -33,41 +29,17 @@ export default function ActiveWorkspaces() {
|
||||
}
|
||||
getWorkspaces();
|
||||
}, []);
|
||||
const handleMouseEnter = useCallback((workspaceId) => {
|
||||
setHoverStates((prev) => ({ ...prev, [workspaceId]: true }));
|
||||
}, []);
|
||||
|
||||
const handleMouseLeave = useCallback((workspaceId) => {
|
||||
setHoverStates((prev) => ({ ...prev, [workspaceId]: false }));
|
||||
}, []);
|
||||
const handleGearMouseEnter = useCallback((workspaceId) => {
|
||||
setGearHover((prev) => ({ ...prev, [workspaceId]: true }));
|
||||
}, []);
|
||||
|
||||
const handleGearMouseLeave = useCallback((workspaceId) => {
|
||||
setGearHover((prev) => ({ ...prev, [workspaceId]: false }));
|
||||
}, []);
|
||||
|
||||
const handleUploadMouseEnter = useCallback((workspaceId) => {
|
||||
setUploadHover((prev) => ({ ...prev, [workspaceId]: true }));
|
||||
}, []);
|
||||
|
||||
const handleUploadMouseLeave = useCallback((workspaceId) => {
|
||||
setUploadHover((prev) => ({ ...prev, [workspaceId]: false }));
|
||||
}, []);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<>
|
||||
<Skeleton.default
|
||||
height={36}
|
||||
width="100%"
|
||||
count={3}
|
||||
baseColor="#292524"
|
||||
highlightColor="#4c4948"
|
||||
enableAnimation={true}
|
||||
/>
|
||||
</>
|
||||
<Skeleton.default
|
||||
height={36}
|
||||
width="100%"
|
||||
count={3}
|
||||
baseColor="#292524"
|
||||
highlightColor="#4c4948"
|
||||
enableAnimation={true}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@ -75,81 +47,59 @@ export default function ActiveWorkspaces() {
|
||||
<div role="list" aria-label="Workspaces" className="flex flex-col gap-y-2">
|
||||
{workspaces.map((workspace) => {
|
||||
const isActive = workspace.slug === slug;
|
||||
const isHovered = hoverStates[workspace.id];
|
||||
return (
|
||||
<div
|
||||
className="flex flex-col w-full"
|
||||
onMouseEnter={() => handleMouseEnter(workspace.id)}
|
||||
onMouseLeave={() => handleMouseLeave(workspace.id)}
|
||||
className="flex flex-col w-full group"
|
||||
key={workspace.id}
|
||||
role="listitem"
|
||||
>
|
||||
<div
|
||||
key={workspace.id}
|
||||
className="flex gap-x-2 items-center justify-between"
|
||||
>
|
||||
<div className="flex gap-x-2 items-center justify-between">
|
||||
<a
|
||||
href={isActive ? null : paths.workspace.chat(workspace.slug)}
|
||||
aria-current={isActive ? "page" : ""}
|
||||
className={`
|
||||
transition-all duration-[200ms]
|
||||
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 font-bold"
|
||||
: ""
|
||||
}`}
|
||||
transition-all duration-[200ms]
|
||||
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 font-bold" : ""}
|
||||
`}
|
||||
>
|
||||
<div className="flex flex-row justify-between w-full">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="flex items-center space-x-2 overflow-hidden">
|
||||
<SquaresFour
|
||||
weight={isActive ? "fill" : "regular"}
|
||||
className="flex-shrink-0"
|
||||
size={24}
|
||||
/>
|
||||
<p
|
||||
className={`text-[14px] leading-loose whitespace-nowrap overflow-hidden ${
|
||||
isActive ? "text-white " : "text-zinc-200"
|
||||
}`}
|
||||
className={`
|
||||
text-[14px] leading-loose whitespace-nowrap overflow-hidden
|
||||
${isActive ? "text-white" : "text-zinc-200 group-hover:w-[120px]"} truncate
|
||||
w-[130px] transition-all duration-200
|
||||
`}
|
||||
>
|
||||
{isActive || isHovered
|
||||
? truncate(workspace.name, 15)
|
||||
: truncate(workspace.name, 20)}
|
||||
{workspace.name}
|
||||
</p>
|
||||
</div>
|
||||
{(isActive || isHovered || gearHover[workspace.id]) &&
|
||||
user?.role !== "default" ? (
|
||||
<div className="flex items-center gap-x-[2px]">
|
||||
<div
|
||||
className={`flex hover:bg-[#646768] p-[2px] rounded-[4px] text-[#A7A8A9] hover:text-white ${
|
||||
uploadHover[workspace.id] ? "bg-[#646768]" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setSelectedWs(workspace);
|
||||
showModal();
|
||||
}}
|
||||
onMouseEnter={() =>
|
||||
handleUploadMouseEnter(workspace.id)
|
||||
}
|
||||
onMouseLeave={() =>
|
||||
handleUploadMouseLeave(workspace.id)
|
||||
}
|
||||
className="rounded-md flex items-center justify-center ml-auto"
|
||||
>
|
||||
<UploadSimple
|
||||
className="h-[20px] w-[20px]"
|
||||
weight="bold"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
{user?.role !== "default" && (
|
||||
<div
|
||||
className={`flex items-center gap-x-[2px] transition-opacity duration-200 ${isActive ? "opacity-100" : "opacity-0 group-hover:opacity-100"}`}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setSelectedWs(workspace);
|
||||
showModal();
|
||||
}}
|
||||
className="rounded-md flex items-center justify-center ml-auto p-[2px] hover:bg-[#646768] text-[#A7A8A9] hover:text-white"
|
||||
>
|
||||
<UploadSimple
|
||||
className="h-[20px] w-[20px]"
|
||||
weight="bold"
|
||||
/>
|
||||
</button>
|
||||
<Link
|
||||
to={
|
||||
isInWorkspaceSettings
|
||||
? paths.workspace.chat(workspace.slug)
|
||||
@ -157,27 +107,21 @@ export default function ActiveWorkspaces() {
|
||||
workspace.slug
|
||||
)
|
||||
}
|
||||
onMouseEnter={() => handleGearMouseEnter(workspace.id)}
|
||||
onMouseLeave={() => handleGearMouseLeave(workspace.id)}
|
||||
className="rounded-md flex items-center justify-center text-[#A7A8A9] hover:text-white ml-auto"
|
||||
className="rounded-md flex items-center justify-center text-[#A7A8A9] hover:text-white ml-auto p-[2px] hover:bg-[#646768]"
|
||||
aria-label="General appearance settings"
|
||||
>
|
||||
<div className="flex hover:bg-[#646768] p-[2px] rounded-[4px]">
|
||||
<GearSix
|
||||
color={
|
||||
isInWorkspaceSettings && workspace.slug === slug
|
||||
? "#46C8FF"
|
||||
: gearHover[workspace.id]
|
||||
? "#FFFFFF"
|
||||
: "#A7A8A9"
|
||||
}
|
||||
weight="bold"
|
||||
className="h-[20px] w-[20px]"
|
||||
/>
|
||||
</div>
|
||||
<GearSix
|
||||
color={
|
||||
isInWorkspaceSettings && workspace.slug === slug
|
||||
? "#46C8FF"
|
||||
: undefined
|
||||
}
|
||||
weight="bold"
|
||||
className="h-[20px] w-[20px]"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
) : null}
|
||||
)}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user