Skip to content

Commit 1478e66

Browse files
anmolsinghbhatiaanmolsinghbhatia
authored
fix: app sidebar fixes and improvements (#6630)
1 parent a49d899 commit 1478e66

File tree

9 files changed

+73
-60
lines changed

9 files changed

+73
-60
lines changed

‎apiserver/plane/db/models/workspace.py‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -396,7 +396,6 @@ class UserPreferenceKeys(models.TextChoices):
396396
ACTIVE_CYCLES = "active_cycles", "Active Cycles"
397397
ANALYTICS = "analytics", "Analytics"
398398
DRAFTS = "drafts", "Drafts"
399-
YOUR_WORK = "your_work", "Your Work"
400399
ARCHIVES = "archives", "Archives"
401400

402401
workspace = models.ForeignKey(

‎packages/constants/src/workspace.ts‎

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -259,24 +259,12 @@ export interface IWorkspaceSidebarNavigationItem {
259259
}
260260

261261
export const WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS: Record<string, IWorkspaceSidebarNavigationItem> = {
262-
"your-work": {
263-
key: "your_work",
264-
labelTranslationKey: "your_work",
265-
href: `/profile/`,
266-
access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
267-
},
268262
views: {
269263
key: "views",
270264
labelTranslationKey: "views",
271265
href: `/workspace-views/all-issues/`,
272266
access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
273267
},
274-
"active-cycles": {
275-
key: "active_cycles",
276-
labelTranslationKey: "cycles",
277-
href: `/active-cycles/`,
278-
access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
279-
},
280268
analytics: {
281269
key: "analytics",
282270
labelTranslationKey: "analytics",
@@ -298,9 +286,7 @@ export const WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS: Record<string, IWorkspa
298286
};
299287
export const WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS_LINKS: IWorkspaceSidebarNavigationItem[] = [
300288
WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS["views"],
301-
WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS["active-cycles"],
302289
WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS["analytics"],
303-
WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS["your-work"],
304290
WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS["drafts"],
305291
WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS["archives"],
306292
];
@@ -312,6 +298,12 @@ export const WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS: Record<string, IWorkspac
312298
href: `/`,
313299
access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
314300
},
301+
"your-work": {
302+
key: "your_work",
303+
labelTranslationKey: "your_work",
304+
href: `/profile/`,
305+
access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
306+
},
315307
notifications: {
316308
key: "notifications",
317309
labelTranslationKey: "notification.label",
@@ -328,6 +320,7 @@ export const WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS: Record<string, IWorkspac
328320

329321
export const WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS_LINKS: IWorkspaceSidebarNavigationItem[] = [
330322
WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["home"],
323+
WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["your-work"],
331324
WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["notifications"],
332325
WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["projects"],
333326
];

‎web/app/[workspaceSlug]/(projects)/extended-project-sidebar.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ export const ExtendedProjectSidebar = observer(() => {
9898
<div
9999
ref={extendedProjectSidebarRef}
100100
className={cn(
101-
"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",
101+
"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",
102102
{
103103
"translate-x-0 opacity-100": extendedProjectSidebarCollapsed,
104104
"-translate-x-full opacity-0": !extendedProjectSidebarCollapsed,
@@ -107,7 +107,7 @@ export const ExtendedProjectSidebar = observer(() => {
107107
}
108108
)}
109109
>
110-
<div className="flex flex-col gap-1 w-full">
110+
<div className="flex flex-col gap-1 w-full sticky top-4 pt-0 px-4">
111111
<div className="flex items-center justify-between">
112112
<span className="text-sm font-semibold text-custom-text-300 py-1.5">Projects</span>
113113
{isAuthorizedUser && (
@@ -135,7 +135,7 @@ export const ExtendedProjectSidebar = observer(() => {
135135
/>
136136
</div>
137137
</div>
138-
<div className="flex flex-col gap-0.5">
138+
<div className="flex flex-col gap-0.5 overflow-x-hidden overflow-y-auto vertical-scrollbar scrollbar-sm flex-grow mt-4 px-4">
139139
{filteredProjects.map((projectId, index) => (
140140
<SidebarProjectsListItem
141141
key={projectId}
@@ -146,6 +146,7 @@ export const ExtendedProjectSidebar = observer(() => {
146146
disableDrop={false}
147147
isLastChild={index === joinedProjects.length - 1}
148148
handleOnProjectDrop={handleOnProjectDrop}
149+
renderInExtendedSidebar
149150
/>
150151
))}
151152
</div>

‎web/app/[workspaceSlug]/(projects)/extended-sidebar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ export const ExtendedAppSidebar = observer(() => {
104104
<div
105105
ref={extendedSidebarRef}
106106
className={cn(
107-
"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",
107+
"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",
108108
{
109109
"translate-x-0 opacity-100": extendedSidebarCollapsed,
110110
"-translate-x-full opacity-0": !extendedSidebarCollapsed,

‎web/ce/components/sidebar/project-navigation-root.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,12 @@ import { ProjectNavigation } from "@/components/workspace";
77
type TProjectItemsRootProps = {
88
workspaceSlug: string;
99
projectId: string;
10+
isSidebarCollapsed: boolean;
1011
};
1112

1213
export const ProjectNavigationRoot: FC<TProjectItemsRootProps> = (props) => {
13-
const { workspaceSlug, projectId } = props;
14-
return <ProjectNavigation workspaceSlug={workspaceSlug} projectId={projectId} />;
14+
const { workspaceSlug, projectId, isSidebarCollapsed } = props;
15+
return (
16+
<ProjectNavigation workspaceSlug={workspaceSlug} projectId={projectId} isSidebarCollapsed={isSidebarCollapsed} />
17+
);
1518
};

‎web/ce/components/workspace/sidebar/sidebar-item.tsx‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export const SidebarItem: FC<TSidebarItemProps> = observer((props) => {
4242
if (extendedSidebarCollapsed) toggleExtendedSidebar();
4343
};
4444

45-
const staticItems = ["home", "notifications", "pi-chat", "projects"];
45+
const staticItems = ["home", "your-work", "notifications", "pi-chat", "projects"];
4646

4747
if (!allowPermissions(item.access as any, EUserPermissionsLevel.WORKSPACE, workspaceSlug.toString())) {
4848
return null;
@@ -79,11 +79,6 @@ export const SidebarItem: FC<TSidebarItemProps> = observer((props) => {
7979
{icon}
8080
{!sidebarCollapsed && <p className="text-sm leading-5 font-medium">{t(item.labelTranslationKey)}</p>}
8181
</div>
82-
{!sidebarCollapsed && item.key === "active_cycles" && (
83-
<div className="flex-shrink-0">
84-
<UpgradeBadge />
85-
</div>
86-
)}
8782
</SidebarNavItem>
8883
</Link>
8984
</Tooltip>

‎web/core/components/workspace/sidebar/project-navigation.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,13 +30,14 @@ type TProjectItemsProps = {
3030
workspaceSlug: string;
3131
projectId: string;
3232
additionalNavigationItems?: (workspaceSlug: string, projectId: string) => TNavigationItem[];
33+
isSidebarCollapsed: boolean;
3334
};
3435

3536
export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
36-
const { workspaceSlug, projectId, additionalNavigationItems } = props;
37+
const { workspaceSlug, projectId, additionalNavigationItems, isSidebarCollapsed } = props;
3738
// store hooks
3839
const { t } = useTranslation();
39-
const { sidebarCollapsed: isSidebarCollapsed, toggleSidebar } = useAppTheme();
40+
const { toggleSidebar } = useAppTheme();
4041
const { getPartialProjectById } = useProject();
4142
const { isMobile } = usePlatformOS();
4243
const { allowPermissions } = useUserPermissions();

‎web/core/components/workspace/sidebar/projects-list-item.tsx‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,13 +43,22 @@ type Props = {
4343
disableDrag?: boolean;
4444
disableDrop?: boolean;
4545
isLastChild: boolean;
46+
renderInExtendedSidebar?: boolean;
4647
};
4748

4849
export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
49-
const { projectId, handleCopyText, disableDrag, disableDrop, isLastChild, handleOnProjectDrop, projectListType } =
50-
props;
50+
const {
51+
projectId,
52+
handleCopyText,
53+
disableDrag,
54+
disableDrop,
55+
isLastChild,
56+
handleOnProjectDrop,
57+
projectListType,
58+
renderInExtendedSidebar = false,
59+
} = props;
5160
// store hooks
52-
const { sidebarCollapsed: isSidebarCollapsed } = useAppTheme();
61+
const { sidebarCollapsed } = useAppTheme();
5362
const { t } = useTranslation();
5463
const { setTrackElement } = useEventTracker();
5564
const { getPartialProjectById } = useProject();
@@ -89,6 +98,8 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
8998
setLeaveProjectModal(true);
9099
};
91100

101+
const isSidebarCollapsed = sidebarCollapsed && !renderInExtendedSidebar;
102+
92103
useEffect(() => {
93104
const element = projectRef.current;
94105
const dragHandleElement = dragHandleRef.current;
@@ -390,7 +401,11 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
390401
>
391402
{isProjectListOpen && (
392403
<Disclosure.Panel as="div" className="flex flex-col gap-0.5 mt-1">
393-
<ProjectNavigationRoot workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
404+
<ProjectNavigationRoot
405+
workspaceSlug={workspaceSlug.toString()}
406+
projectId={projectId.toString()}
407+
isSidebarCollapsed={!!isSidebarCollapsed}
408+
/>
394409
</Disclosure.Panel>
395410
)}
396411
</Transition>

‎web/core/components/workspace/sidebar/projects-list.tsx‎

Lines changed: 33 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -243,18 +243,39 @@ export const SidebarProjectsList: FC = observer(() => {
243243
})}
244244
static
245245
>
246-
{joinedProjects.slice(0, 7).map((projectId, index) => (
247-
<SidebarProjectsListItem
248-
key={projectId}
249-
projectId={projectId}
250-
handleCopyText={() => handleCopyText(projectId)}
251-
projectListType={"JOINED"}
252-
disableDrag={false}
253-
disableDrop={false}
254-
isLastChild={index === joinedProjects.length - 1}
255-
handleOnProjectDrop={handleOnProjectDrop}
256-
/>
257-
))}
246+
<>
247+
{joinedProjects.slice(0, 7).map((projectId, index) => (
248+
<SidebarProjectsListItem
249+
key={projectId}
250+
projectId={projectId}
251+
handleCopyText={() => handleCopyText(projectId)}
252+
projectListType={"JOINED"}
253+
disableDrag={false}
254+
disableDrop={false}
255+
isLastChild={index === joinedProjects.length - 1}
256+
handleOnProjectDrop={handleOnProjectDrop}
257+
/>
258+
))}
259+
{joinedProjects.length > 7 && (
260+
<SidebarNavItem
261+
className={`${sidebarCollapsed ? "p-0 size-8 aspect-square justify-center mx-auto" : ""}`}
262+
>
263+
<button
264+
onClick={() => toggleExtendedProjectSidebar()}
265+
id="extended-project-sidebar-toggle"
266+
className={cn(
267+
"flex items-center gap-1.5 text-sm font-medium flex-grow text-custom-text-350",
268+
{
269+
"justify-center": sidebarCollapsed,
270+
}
271+
)}
272+
>
273+
<Ellipsis className="size-4" />
274+
{!sidebarCollapsed && <span>More</span>}
275+
</button>
276+
</SidebarNavItem>
277+
)}
278+
</>
258279
</Disclosure.Panel>
259280
)}
260281
</Transition>
@@ -278,21 +299,6 @@ export const SidebarProjectsList: FC = observer(() => {
278299
{!isCollapsed && t("add_project")}
279300
</button>
280301
)}
281-
282-
{joinedProjects.length > 7 && (
283-
<SidebarNavItem className={`${sidebarCollapsed ? "p-0 size-8 aspect-square justify-center mx-auto" : ""}`}>
284-
<button
285-
onClick={() => toggleExtendedProjectSidebar()}
286-
id="extended-project-sidebar-toggle"
287-
className={cn("flex items-center gap-1.5 text-sm font-medium flex-grow text-custom-text-350", {
288-
"justify-center": sidebarCollapsed,
289-
})}
290-
>
291-
<Ellipsis className="size-4" />
292-
{!sidebarCollapsed && <span>More</span>}
293-
</button>
294-
</SidebarNavItem>
295-
)}
296302
</div>
297303
</>
298304
);

0 commit comments

Comments
 (0)