这是indexloc提供的服务,不要输入任何密码
Skip to content

Conversation

@shatfield4
Copy link
Collaborator

resolves #409

Have gear icon appear when hovering over sidebar item and open the modal when clicked.

@shatfield4 shatfield4 self-assigned this Dec 5, 2023
@shatfield4 shatfield4 linked an issue Dec 5, 2023 that may be closed by this pull request
@review-agent-prime
Copy link

frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx

Currently, the handleMouseEnter, handleMouseLeave, handleGearMouseEnter, and handleGearMouseLeave functions are re-created on every render of the component. This can lead to unnecessary re-renders and performance issues, especially if the component is re-rendered frequently. To avoid this, you can use the useCallback hook to memoize these functions.
Create Issue
See the diff
Checkout the fix

    const handleMouseEnter = useCallback((workspaceId) => {
      setHoverStates((prev) => ({ ...prev, [workspaceId]: true }));
    }, []);

    const handleMouseLeave = useCallback((workspaceId) => {
      setHoverStates((prev) => ({ ...prev, [workspaceId]: false }));
    }, []);

    const handleGearMouseEnter = useCallback((workspaceId) => {
      setSettingHover((prev) => ({ ...prev, [workspaceId]: true }));
    }, []);

    const handleGearMouseLeave = useCallback((workspaceId) => {
      setSettingHover((prev) => ({ ...prev, [workspaceId]: false }));
    }, []);
git fetch origin && git checkout -b ReviewBot/Impro-4ays36h origin/ReviewBot/Impro-4ays36h

The className logic inside the a tag is quite complex and hard to read. It would be better to extract this logic into a separate function or variable to improve readability.
Create Issue
See the diff
Checkout the fix

    const getClassName = (isActive) => {
      let baseClass = "transition-all duration-[200ms] flex flex-grow w-[75%] gap-x-2 py-[6px] px-[12px] rounded-lg text-slate-200 justify-start items-center border hover:bg-workspace-item-selected-gradient hover:border-slate-100 hover:border-opacity-50";
      return isActive ? `${baseClass} bg-workspace-item-selected-gradient border-slate-100 border-opacity-50` : `${baseClass} bg-workspace-item-gradient bg-opacity-60 border-transparent`;
    }

    // Inside the render method
    <a
      href={isActive ? null : paths.workspace.chat(workspace.slug)}
      className={getClassName(isActive)}
    >
git fetch origin && git checkout -b ReviewBot/Impro-2ucyboz origin/ReviewBot/Impro-2ucyboz

@timothycarambat timothycarambat merged commit 48764d6 into master Dec 5, 2023
@timothycarambat timothycarambat deleted the 409-have-gear-icon-appear-on-hover-for-workspace branch December 5, 2023 23:58
cabwds pushed a commit to cabwds/anything-llm that referenced this pull request Jul 3, 2025
* gear icon appear on hover for workspace

* put back user role check for default

* wrap in callback

---------

Co-authored-by: timothycarambat <rambat1010@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Have gear icon appear on hover for workspace

3 participants