[WEB-1685] chore: page and view list page improvement (#4906)

* chore: logo picker removed from page and view list page

* chore: admin sidebar improvement

* chore: minor improvement in app sidebar help section.

---------

Co-authored-by: Prateek Shourya <prateekshourya29@gmail.com>

admin/core/components/admin-sidebar/root.tsx

@@ -8,7 +8,7 @@ import { useTheme } from "@/hooks/store";
 import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 // components
 
-export interface IInstanceSidebar { }
+export interface IInstanceSidebar {}
 
 export const InstanceSidebar: FC<IInstanceSidebar> = observer(() => {
   // store
@@ -41,10 +41,10 @@ export const InstanceSidebar: FC<IInstanceSidebar> = observer(() => {
     <div
       className={`inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-custom-sidebar-border-200 bg-custom-sidebar-background-100 duration-300
         fixed md:relative
-        ${isSidebarCollapsed ? "-ml-[250px]" : ""}
-        sm:${isSidebarCollapsed ? "-ml-[250px]" : ""}
-        md:ml-0 ${isSidebarCollapsed ? "w-[70px]" : "w-[250px]"}
-        lg:ml-0 ${isSidebarCollapsed ? "w-[70px]" : "w-[250px]"}
+        ${isSidebarCollapsed ? "-ml-[280px]" : ""}
+        sm:${isSidebarCollapsed ? "-ml-[280px]" : ""}
+        md:ml-0 ${isSidebarCollapsed ? "w-[70px]" : "w-[280px]"}
+        lg:ml-0 ${isSidebarCollapsed ? "w-[70px]" : "w-[280px]"}
       `}
     >
       <div ref={ref} className="flex h-full w-full flex-1 flex-col">

web/core/components/pages/list/block.tsx

@@ -1,18 +1,13 @@
 "use client";
 
-import { FC, useRef, useState } from "react";
+import { FC, useRef } from "react";
 import { observer } from "mobx-react";
 import { FileText } from "lucide-react";
-// types
-import { TLogoProps } from "@plane/types";
-// ui
-import { EmojiIconPicker, EmojiIconPickerTypes, TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { Logo } from "@/components/common";
 import { ListItem } from "@/components/core/list";
 import { BlockItemAction } from "@/components/pages/list";
 // helpers
-import { convertHexEmojiToDecimal } from "@/helpers/emoji.helper";
 import { getPageName } from "@/helpers/page.helper";
 // hooks
 import { usePage } from "@/hooks/store";
@@ -28,72 +23,19 @@ export const PageListBlock: FC<TPageListBlock> = observer((props) => {
   const { workspaceSlug, projectId, pageId } = props;
   // refs
   const parentRef = useRef(null);
-  // state
-  const [isOpen, setIsOpen] = useState(false);
   // hooks
-  const { name, logo_props, updatePageLogo } = usePage(pageId);
+  const { name, logo_props } = usePage(pageId);
   const { isMobile } = usePlatformOS();
 
-  const handlePageLogoUpdate = async (data: TLogoProps) => {
-    if (data) {
-      updatePageLogo(data)
-        .then(() => {
-          setToast({
-            type: TOAST_TYPE.SUCCESS,
-            title: "Success!",
-            message: "Logo Updated successfully.",
-          });
-        })
-        .catch(() => {
-          setToast({
-            type: TOAST_TYPE.ERROR,
-            title: "Error!",
-            message: "Something went wrong. Please try again.",
-          });
-        });
-    }
-  };
-
   return (
     <ListItem
       prependTitleElement={
         <>
-          <EmojiIconPicker
-            isOpen={isOpen}
-            handleToggle={(val: boolean) => setIsOpen(val)}
-            className="flex items-center justify-center"
-            buttonClassName="flex items-center justify-center"
-            label={
-              <>
-                {logo_props?.in_use ? (
-                  <Logo logo={logo_props} size={16} type="lucide" />
-                ) : (
-                  <FileText className="h-4 w-4 text-custom-text-300" />
-                )}
-              </>
-            }
-            onChange={(val) => {
-              let logoValue = {};
-
-              if (val?.type === "emoji")
-                logoValue = {
-                  value: convertHexEmojiToDecimal(val.value.unified),
-                  url: val.value.imageUrl,
-                };
-              else if (val?.type === "icon") logoValue = val.value;
-
-              handlePageLogoUpdate({
-                in_use: val?.type,
-                [val?.type]: logoValue,
-              }).finally(() => setIsOpen(false));
-            }}
-            defaultIconColor={logo_props?.in_use && logo_props.in_use === "icon" ? logo_props?.icon?.color : undefined}
-            defaultOpen={
-              logo_props?.in_use && logo_props?.in_use === "emoji"
-                ? EmojiIconPickerTypes.EMOJI
-                : EmojiIconPickerTypes.ICON
-            }
-          />
+          {logo_props?.in_use ? (
+            <Logo logo={logo_props} size={16} type="lucide" />
+          ) : (
+            <FileText className="h-4 w-4 text-custom-text-300" />
+          )}
         </>
       }
       title={getPageName(name)}
@@ -103,7 +45,6 @@ export const PageListBlock: FC<TPageListBlock> = observer((props) => {
       }
       isMobile={isMobile}
       parentRef={parentRef}
-      disableLink={isOpen}
     />
   );
 });

web/core/components/views/view-list-item.tsx

@@ -1,20 +1,17 @@
 "use client";
 
-import { FC, useRef, useState } from "react";
+import { FC, useRef } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // types
-import { IProjectView, TLogoProps } from "@plane/types";
+import { IProjectView } from "@plane/types";
 // ui
-import { EmojiIconPicker, EmojiIconPickerTypes, PhotoFilterIcon, TOAST_TYPE, setToast } from "@plane/ui";
+import { PhotoFilterIcon } from "@plane/ui";
 // components
 import { Logo } from "@/components/common";
 import { ListItem } from "@/components/core/list";
 import { ViewListItemAction } from "@/components/views";
-// helpers
-import { convertHexEmojiToDecimal } from "@/helpers/emoji.helper";
 // hooks
-import { useProjectView } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 
 type Props = {
@@ -25,78 +22,20 @@ export const ProjectViewListItem: FC<Props> = observer((props) => {
   const { view } = props;
   // refs
   const parentRef = useRef(null);
-  // state
-  const [isOpen, setIsOpen] = useState(false);
   // router
   const { workspaceSlug, projectId } = useParams();
   // store hooks
   const { isMobile } = usePlatformOS();
-  const { updateView } = useProjectView();
-
-  const handleViewLogoUpdate = async (data: TLogoProps) => {
-    if (!workspaceSlug || !projectId || !view.id || !data) return;
-
-    updateView(workspaceSlug.toString(), projectId.toString(), view.id.toString(), {
-      logo_props: data,
-    })
-      .then(() => {
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: "Success!",
-          message: "Logo Updated successfully.",
-        });
-      })
-      .catch(() => {
-        setToast({
-          type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: "Something went wrong. Please try again.",
-        });
-      });
-  };
 
   return (
     <ListItem
       prependTitleElement={
         <>
-          <EmojiIconPicker
-            isOpen={isOpen}
-            handleToggle={(val: boolean) => setIsOpen(val)}
-            className="flex items-center justify-center"
-            buttonClassName="flex items-center justify-center"
-            label={
-              <>
-                {view?.logo_props?.in_use ? (
-                  <Logo logo={view?.logo_props} size={16} type="lucide" />
-                ) : (
-                  <PhotoFilterIcon className="h-4 w-4 text-custom-text-300" />
-                )}
-              </>
-            }
-            onChange={(val) => {
-              let logoValue = {};
-
-              if (val?.type === "emoji")
-                logoValue = {
-                  value: convertHexEmojiToDecimal(val.value.unified),
-                  url: val.value.imageUrl,
-                };
-              else if (val?.type === "icon") logoValue = val.value;
-
-              handleViewLogoUpdate({
-                in_use: val?.type,
-                [val?.type]: logoValue,
-              }).finally(() => setIsOpen(false));
-            }}
-            defaultIconColor={
-              view?.logo_props?.in_use && view?.logo_props.in_use === "icon" ? view?.logo_props?.icon?.color : undefined
-            }
-            defaultOpen={
-              view?.logo_props?.in_use && view?.logo_props?.in_use === "emoji"
-                ? EmojiIconPickerTypes.EMOJI
-                : EmojiIconPickerTypes.ICON
-            }
-          />
+          {view?.logo_props?.in_use ? (
+            <Logo logo={view?.logo_props} size={16} type="lucide" />
+          ) : (
+            <PhotoFilterIcon className="h-4 w-4 text-custom-text-300" />
+          )}
         </>
       }
       title={view.name}
@@ -104,7 +43,6 @@ export const ProjectViewListItem: FC<Props> = observer((props) => {
       actionableItems={<ViewListItemAction parentRef={parentRef} view={view} />}
       isMobile={isMobile}
       parentRef={parentRef}
-      disableLink={isOpen}
     />
   );
 });

web/core/components/workspace/help-section.tsx

@@ -70,12 +70,14 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
           }
         )}
       >
-        {!isCollapsed && (
-          <div className="w-1/2">
-            <WorkspaceEditionBadge />
-          </div>
-        )}
-        <div className={`flex items-center gap-1 ${isCollapsed ? "flex-col justify-center" : "w-1/2 justify-evenly"}`}>
+        <div
+          className={cn("w-3/5", {
+            hidden: isCollapsed,
+          })}
+        >
+          <WorkspaceEditionBadge />
+        </div>
+        <div className={`flex items-center gap-1 ${isCollapsed ? "flex-col justify-center" : "w-2/5 justify-evenly"}`}>
           <Tooltip tooltipContent="Shortcuts" isMobile={isMobile}>
             <button
               type="button"