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

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>
</>
);