binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: app sidebar fixes and improvements (#6630)

Browse source
This commit is contained in:
Anmol Singh Bhatia 2025-02-18 18:14:31 +05:30 • committed by GitHub
parent a49d899ea1
commit 1478e66dc4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 73 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

1
apiserver/plane/db/models/workspace.py
View file

@ -396,7 +396,6 @@ class WorkspaceUserPreference(BaseModel):
ACTIVE_CYCLES = "active_cycles", "Active Cycles"
ANALYTICS = "analytics", "Analytics"
DRAFTS = "drafts", "Drafts"
YOUR_WORK = "your_work", "Your Work"
ARCHIVES = "archives", "Archives"
workspace = models.ForeignKey(

21
packages/constants/src/workspace.ts
View file

@ -259,24 +259,12 @@ export interface IWorkspaceSidebarNavigationItem {
}
export const WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS: Record<string, IWorkspaceSidebarNavigationItem> = {
"your-work": {
key: "your_work",
labelTranslationKey: "your_work",
href: `/profile/`,
access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
},
views: {
key: "views",
labelTranslationKey: "views",
href: `/workspace-views/all-issues/`,
access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
},
"active-cycles": {
key: "active_cycles",
labelTranslationKey: "cycles",
href: `/active-cycles/`,
access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
},
analytics: {
key: "analytics",
labelTranslationKey: "analytics",
@ -298,9 +286,7 @@ export const WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS: Record<string, IWorkspa
};
export const WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS_LINKS: IWorkspaceSidebarNavigationItem[] = [
WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS["views"],
WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS["active-cycles"],
WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS["analytics"],
WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS["your-work"],
WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS["drafts"],
WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS["archives"],
];
@ -312,6 +298,12 @@ export const WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS: Record<string, IWorkspac
href: `/`,
access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
},
"your-work": {
key: "your_work",
labelTranslationKey: "your_work",
href: `/profile/`,
access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
},
notifications: {
key: "notifications",
labelTranslationKey: "notification.label",
@ -328,6 +320,7 @@ export const WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS: Record<string, IWorkspac
export const WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS_LINKS: IWorkspaceSidebarNavigationItem[] = [
WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["home"],
WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["your-work"],
WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["notifications"],
WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["projects"],
];

7
web/app/[workspaceSlug]/(projects)/extended-project-sidebar.tsx
View file

@ -98,7 +98,7 @@ export const ExtendedProjectSidebar = observer(() => {
<div
ref={extendedProjectSidebarRef}
className={cn(
"fixed top-0 h-full z-[19] flex flex-col gap-2 w-[300px] transform transition-all duration-300 ease-in-out bg-custom-sidebar-background-100 border-r border-custom-sidebar-border-200 p-4 shadow-md",
"fixed top-0 h-full z-[19] flex flex-col gap-2 w-[300px] transform transition-all duration-300 ease-in-out bg-custom-sidebar-background-100 border-r border-custom-sidebar-border-200 shadow-md",
{
"translate-x-0 opacity-100": extendedProjectSidebarCollapsed,
"-translate-x-full opacity-0": !extendedProjectSidebarCollapsed,
@ -107,7 +107,7 @@ export const ExtendedProjectSidebar = observer(() => {
}
)}
>
<div className="flex flex-col gap-1 w-full">
<div className="flex flex-col gap-1 w-full sticky top-4 pt-0 px-4">
<div className="flex items-center justify-between">
<span className="text-sm font-semibold text-custom-text-300 py-1.5">Projects</span>
{isAuthorizedUser && (
@ -135,7 +135,7 @@ export const ExtendedProjectSidebar = observer(() => {
/>
</div>
</div>
<div className="flex flex-col gap-0.5">
<div className="flex flex-col gap-0.5 overflow-x-hidden overflow-y-auto vertical-scrollbar scrollbar-sm flex-grow mt-4 px-4">
{filteredProjects.map((projectId, index) => (
<SidebarProjectsListItem
key={projectId}
@ -146,6 +146,7 @@ export const ExtendedProjectSidebar = observer(() => {
disableDrop={false}
isLastChild={index === joinedProjects.length - 1}
handleOnProjectDrop={handleOnProjectDrop}
renderInExtendedSidebar
/>
))}
</div>

2
web/app/[workspaceSlug]/(projects)/extended-sidebar.tsx
View file

@ -104,7 +104,7 @@ export const ExtendedAppSidebar = observer(() => {
<div
ref={extendedSidebarRef}
className={cn(
"fixed top-0 h-full z-[19] flex flex-col w-[300px] transform transition-all duration-300 ease-in-out bg-custom-sidebar-background-100 border-r border-custom-sidebar-border-200 p-4 shadow-md",
"fixed top-0 h-full z-[19] flex flex-col gap-0.5 w-[300px] transform transition-all duration-300 ease-in-out bg-custom-sidebar-background-100 border-r border-custom-sidebar-border-200 p-4 shadow-md",
{
"translate-x-0 opacity-100": extendedSidebarCollapsed,
"-translate-x-full opacity-0": !extendedSidebarCollapsed,

7
web/ce/components/sidebar/project-navigation-root.tsx
View file

@ -7,9 +7,12 @@ import { ProjectNavigation } from "@/components/workspace";
type TProjectItemsRootProps = {
workspaceSlug: string;
projectId: string;
isSidebarCollapsed: boolean;
};
export const ProjectNavigationRoot: FC<TProjectItemsRootProps> = (props) => {
const { workspaceSlug, projectId } = props;
return <ProjectNavigation workspaceSlug={workspaceSlug} projectId={projectId} />;
const { workspaceSlug, projectId, isSidebarCollapsed } = props;
return (
<ProjectNavigation workspaceSlug={workspaceSlug} projectId={projectId} isSidebarCollapsed={isSidebarCollapsed} />
);
};

7
web/ce/components/workspace/sidebar/sidebar-item.tsx
View file

@ -42,7 +42,7 @@ export const SidebarItem: FC<TSidebarItemProps> = observer((props) => {
if (extendedSidebarCollapsed) toggleExtendedSidebar();
};
const staticItems = ["home", "notifications", "pi-chat", "projects"];
const staticItems = ["home", "your-work", "notifications", "pi-chat", "projects"];
if (!allowPermissions(item.access as any, EUserPermissionsLevel.WORKSPACE, workspaceSlug.toString())) {
return null;
@ -79,11 +79,6 @@ export const SidebarItem: FC<TSidebarItemProps> = observer((props) => {
{icon}
{!sidebarCollapsed && <p className="text-sm leading-5 font-medium">{t(item.labelTranslationKey)}</p>}
</div>
{!sidebarCollapsed && item.key === "active_cycles" && (
<div className="flex-shrink-0">
<UpgradeBadge />
</div>
)}
</SidebarNavItem>
</Link>
</Tooltip>

5
web/core/components/workspace/sidebar/project-navigation.tsx
View file

@ -30,13 +30,14 @@ type TProjectItemsProps = {
workspaceSlug: string;
projectId: string;
additionalNavigationItems?: (workspaceSlug: string, projectId: string) => TNavigationItem[];
isSidebarCollapsed: boolean;
};
export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
const { workspaceSlug, projectId, additionalNavigationItems } = props;
const { workspaceSlug, projectId, additionalNavigationItems, isSidebarCollapsed } = props;
// store hooks
const { t } = useTranslation();
const { sidebarCollapsed: isSidebarCollapsed, toggleSidebar } = useAppTheme();
const { toggleSidebar } = useAppTheme();
const { getPartialProjectById } = useProject();
const { isMobile } = usePlatformOS();
const { allowPermissions } = useUserPermissions();

23
web/core/components/workspace/sidebar/projects-list-item.tsx
View file

@ -43,13 +43,22 @@ type Props = {
disableDrag?: boolean;
disableDrop?: boolean;
isLastChild: boolean;
renderInExtendedSidebar?: boolean;
};
export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
const { projectId, handleCopyText, disableDrag, disableDrop, isLastChild, handleOnProjectDrop, projectListType } =
props;
const {
projectId,
handleCopyText,
disableDrag,
disableDrop,
isLastChild,
handleOnProjectDrop,
projectListType,
renderInExtendedSidebar = false,
} = props;
// store hooks
const { sidebarCollapsed: isSidebarCollapsed } = useAppTheme();
const { sidebarCollapsed } = useAppTheme();
const { t } = useTranslation();
const { setTrackElement } = useEventTracker();
const { getPartialProjectById } = useProject();
@ -89,6 +98,8 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
setLeaveProjectModal(true);
};
const isSidebarCollapsed = sidebarCollapsed && !renderInExtendedSidebar;
useEffect(() => {
const element = projectRef.current;
const dragHandleElement = dragHandleRef.current;
@ -390,7 +401,11 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
>
{isProjectListOpen && (
<Disclosure.Panel as="div" className="flex flex-col gap-0.5 mt-1">
<ProjectNavigationRoot workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
<ProjectNavigationRoot
workspaceSlug={workspaceSlug.toString()}
projectId={projectId.toString()}
isSidebarCollapsed={!!isSidebarCollapsed}
/>
</Disclosure.Panel>
)}
</Transition>

60
web/core/components/workspace/sidebar/projects-list.tsx
View file

@ -243,18 +243,39 @@ export const SidebarProjectsList: FC = observer(() => {
})}
static
>
{joinedProjects.slice(0, 7).map((projectId, index) => (
<SidebarProjectsListItem
key={projectId}
projectId={projectId}
handleCopyText={() => handleCopyText(projectId)}
projectListType={"JOINED"}
disableDrag={false}
disableDrop={false}
isLastChild={index === joinedProjects.length - 1}
handleOnProjectDrop={handleOnProjectDrop}
/>
))}
<>
{joinedProjects.slice(0, 7).map((projectId, index) => (
<SidebarProjectsListItem
key={projectId}
projectId={projectId}
handleCopyText={() => handleCopyText(projectId)}
projectListType={"JOINED"}
disableDrag={false}
disableDrop={false}
isLastChild={index === joinedProjects.length - 1}
handleOnProjectDrop={handleOnProjectDrop}
/>
))}
{joinedProjects.length > 7 && (
<SidebarNavItem
className={`${sidebarCollapsed ? "p-0 size-8 aspect-square justify-center mx-auto" : ""}`}
>
<button
onClick={() => toggleExtendedProjectSidebar()}
id="extended-project-sidebar-toggle"
className={cn(
"flex items-center gap-1.5 text-sm font-medium flex-grow text-custom-text-350",
{
"justify-center": sidebarCollapsed,
}
)}
>
<Ellipsis className="size-4" />
{!sidebarCollapsed && <span>More</span>}
</button>
</SidebarNavItem>
)}
</>
</Disclosure.Panel>
)}
</Transition>
@ -278,21 +299,6 @@ export const SidebarProjectsList: FC = observer(() => {
{!isCollapsed && t("add_project")}
</button>
)}
{joinedProjects.length > 7 && (
<SidebarNavItem className={`${sidebarCollapsed ? "p-0 size-8 aspect-square justify-center mx-auto" : ""}`}>
<button
onClick={() => toggleExtendedProjectSidebar()}
id="extended-project-sidebar-toggle"
className={cn("flex items-center gap-1.5 text-sm font-medium flex-grow text-custom-text-350", {
"justify-center": sidebarCollapsed,
})}
>
<Ellipsis className="size-4" />
{!sidebarCollapsed && <span>More</span>}
</button>
</SidebarNavItem>
)}
</div>
</>
);