refactor: enhance components modularity and introduce new UI componenets (#6192)

* feat: add navigation dropdown component

* chore: enhance title/ description loader and componenet modularity

* chore: issue store filter update

* chore: added few icons to ui package

* chore: improvements for tabs componenet

* chore: enhance sidebar modularity

* chore: update issue and router store to add support for additional issue layouts

* chore: enhanced cycle componenets modularity

* feat: added project grouping header for cycles list

* chore: enhanced project dropdown componenet by adding multiple selection functionality

* chore: enhanced rich text editor modularity by taking members ids as props for mentions

* chore: added functionality to filter disabled layouts in issue-layout dropdown

* chore: added support to pass project ids as props in project card list

* feat: multi select project modal

* chore: seperate out project componenet for reusability

* chore: command pallete store improvements

* fix: build errors

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx

@@ -77,7 +77,12 @@ const CycleDetailPage = observer(() => {
                     "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
                 }}
               >
-                <CycleDetailsSidebar handleClose={toggleSidebar} />
+                <CycleDetailsSidebar
+                  handleClose={toggleSidebar}
+                  cycleId={cycleId.toString()}
+                  projectId={projectId.toString()}
+                  workspaceSlug={workspaceSlug.toString()}
+                />
               </div>
             )}
           </div>

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

@@ -21,6 +21,7 @@ import { useFavorite } from "@/hooks/store/use-favorite";
 import useSize from "@/hooks/use-window-size";
 // plane web components
 import { SidebarAppSwitcher } from "@/plane-web/components/sidebar";
+import { SidebarTeamsList } from "@/plane-web/components/workspace/sidebar/teams-sidebar-list";
 import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 export const AppSidebar: FC = observer(() => {
@@ -47,7 +48,7 @@ export const AppSidebar: FC = observer(() => {
   });
 
   useEffect(() => {
-    if (windowSize[0] < 768) !sidebarCollapsed && toggleSidebar();
+    if (windowSize[0] < 768 && !sidebarCollapsed) toggleSidebar();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [windowSize]);
 
@@ -73,9 +74,12 @@ export const AppSidebar: FC = observer(() => {
             "px-4": !sidebarCollapsed,
           })}
         >
+          {/* Workspace switcher and settings */}
           <SidebarDropdown />
           <div className="flex-shrink-0 h-4" />
-          <SidebarAppSwitcher />
+          {/* App switcher */}
+          {canPerformWorkspaceMemberActions && <SidebarAppSwitcher />}
+          {/* Quick actions */}
           <SidebarQuickActions />
         </div>
         <hr
@@ -88,18 +92,23 @@ export const AppSidebar: FC = observer(() => {
             "vertical-scrollbar px-4": !sidebarCollapsed,
           })}
         >
+          {/* User Menu */}
           <SidebarUserMenu />
-
+          {/* Workspace Menu */}
           <SidebarWorkspaceMenu />
           <hr
             className={cn("flex-shrink-0 border-custom-sidebar-border-300 h-[0.5px] w-3/5 mx-auto my-1", {
               "opacity-0": !sidebarCollapsed,
             })}
           />
+          {/* Favorites Menu */}
           {canPerformWorkspaceMemberActions && !isFavoriteEmpty && <SidebarFavoritesMenu />}
-
+          {/* Teams List */}
+          <SidebarTeamsList />
+          {/* Projects List */}
           <SidebarProjectsList />
         </div>
+        {/* Help Section */}
         <SidebarHelpSection />
       </div>
     </div>