refactor: favorite projects fetch function, chore: update tooltip design (#1526)

* chore: update tooltip design

* fix: due date popup overflow

* fix: build error

* fix: build error

* chore: add key to map return value

* refactor: favorite projects sidebar list

apps/app/components/core/board-view/single-board.tsx

@@ -60,6 +60,10 @@ export const SingleBoard: React.FC<Props> = ({
 
   const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
 
+  // Check if it has at least 4 tickets since it is enough to accommodate the Calendar height
+  const issuesLength = groupedByIssues?.[groupTitle].length;
+  const hasMinimumNumberOfCards = issuesLength ? issuesLength >= 4 : false;
+
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer || isCompleted;
 
   return (
@@ -103,7 +107,11 @@ export const SingleBoard: React.FC<Props> = ({
                   </div>
                 </>
               )}
-              <div className="pt-3 overflow-hidden overflow-y-scroll">
+              <div
+                className={`pt-3 ${
+                  hasMinimumNumberOfCards ? "overflow-hidden overflow-y-scroll" : ""
+                } `}
+              >
                 {groupedByIssues?.[groupTitle].map((issue, index) => (
                   <Draggable
                     key={issue.id}

apps/app/components/core/filters/issues-view-filter.tsx

@@ -11,7 +11,7 @@ import useEstimateOption from "hooks/use-estimate-option";
 // components
 import { SelectFilters } from "components/views";
 // ui
-import { CustomMenu, Icon, ToggleSwitch } from "components/ui";
+import { CustomMenu, Icon, ToggleSwitch, Tooltip } from "components/ui";
 // icons
 import {
   ChevronDownIcon,
@@ -82,18 +82,25 @@ export const IssuesFilterView: React.FC = () => {
       {!isArchivedIssues && (
         <div className="flex items-center gap-x-1">
           {issueViewOptions.map((option) => (
-            <button
+            <Tooltip
               key={option.type}
-              type="button"
+              tooltipContent={
-              className={`grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80 duration-300 ${
+                <span className="capitalize">{replaceUnderscoreIfSnakeCase(option.type)} View</span>
-                issueView === option.type
+              }
-                  ? "bg-custom-sidebar-background-80"
+              position="bottom"
-                  : "text-custom-sidebar-text-200"
-              }`}
-              onClick={() => setIssueView(option.type)}
             >
-              {option.icon}
+              <button
-            </button>
+                type="button"
+                className={`grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80 duration-300 ${
+                  issueView === option.type
+                    ? "bg-custom-sidebar-background-80"
+                    : "text-custom-sidebar-text-200"
+                }`}
+                onClick={() => setIssueView(option.type)}
+              >
+                {option.icon}
+              </button>
+            </Tooltip>
           ))}
         </div>
       )}

apps/app/components/issues/attachments.tsx

@@ -69,13 +69,12 @@ export const IssueAttachments = () => {
                   <div className="h-7 w-7">{getFileIcon(getFileExtension(file.asset))}</div>
                   <div className="flex flex-col gap-1">
                     <div className="flex items-center gap-2">
-                      <Tooltip theme="dark" tooltipContent={getFileName(file.attributes.name)}>
+                      <Tooltip tooltipContent={getFileName(file.attributes.name)}>
                         <span className="text-sm">
                           {truncateText(`${getFileName(file.attributes.name)}`, 10)}
                         </span>
                       </Tooltip>
                       <Tooltip
-                        theme="dark"
                         tooltipContent={`${
                           people?.find((person) => person.member.id === file.updated_by)?.member
                             .first_name ?? ""

apps/app/components/pages/single-page-detailed-item.tsx

@@ -141,7 +141,6 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
                       ? "This page is only visible to you."
                       : "This page can be viewed by anyone in the project."
                   }`}
-                  theme="dark"
                 >
                   <button
                     type="button"
@@ -160,7 +159,6 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
                 </Tooltip>
               )}
               <Tooltip
-                theme="dark"
                 position="top-right"
                 tooltipContent={`Created by ${
                   people?.find((person) => person.member.id === page.created_by)?.member

apps/app/components/pages/single-page-list-item.tsx

@@ -140,7 +140,6 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
                           ? "This page is only visible to you."
                           : "This page can be viewed by anyone in the project."
                       }`}
-                      theme="dark"
                     >
                       <button
                         type="button"
@@ -159,7 +158,6 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
                     </Tooltip>
                   )}
                   <Tooltip
-                    theme="dark"
                     position="top-right"
                     tooltipContent={`Created by ${
                       people?.find((person) => person.member.id === page.created_by)?.member

apps/app/components/project/delete-project-modal.tsx

@@ -71,13 +71,6 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
 
     setIsDeleteLoading(true);
 
-    if (data.is_favorite)
-      mutate<IProject[]>(
-        PROJECTS_LIST(workspaceSlug as string, { is_favorite: true }),
-        (prevData) => prevData?.filter((project: IProject) => project.id !== data.id),
-        false
-      );
-
     mutate<IProject[]>(
       PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }),
       (prevData) => prevData?.filter((project: IProject) => project.id !== data.id),

apps/app/components/project/sidebar-list.tsx

@@ -29,8 +29,8 @@ export const ProjectSidebarList: FC = () => {
   const { collapsed: sidebarCollapse } = useTheme();
   const { setToastAlert } = useToast();
 
-  const { projects: favoriteProjects } = useProjects(true);
   const { projects: allProjects } = useProjects();
+  const favoriteProjects = allProjects?.filter((p) => p.is_favorite);
 
   const handleDeleteProject = (project: IProject) => {
     setProjectToDelete(project);

apps/app/components/project/single-project-card.tsx

@@ -55,11 +55,6 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
   const handleAddToFavorites = () => {
     if (!workspaceSlug) return;
 
-    mutate<IProject[]>(
-      PROJECTS_LIST(workspaceSlug as string, { is_favorite: true }),
-      (prevData) => [...(prevData ?? []), { ...project, is_favorite: true }],
-      false
-    );
     mutate<IProject[]>(
       PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }),
       (prevData) =>
@@ -90,11 +85,6 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
   const handleRemoveFromFavorites = () => {
     if (!workspaceSlug || !project) return;
 
-    mutate<IProject[]>(
-      PROJECTS_LIST(workspaceSlug as string, { is_favorite: true }),
-      (prevData) => (prevData ?? []).filter((p) => p.id !== project.id),
-      false
-    );
     mutate<IProject[]>(
       PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }),
       (prevData) =>
@@ -203,7 +193,6 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
               <Tooltip
                 tooltipContent={`Created at ${renderShortDateWithYearFormat(project.created_at)}`}
                 position="bottom"
-                theme="dark"
               >
                 <div className="flex cursor-default items-center gap-1.5 text-xs">
                   <CalendarDaysIcon className="h-4 w-4" />

apps/app/components/project/single-sidebar-project.tsx

@@ -77,11 +77,6 @@ export const SingleSidebarProject: React.FC<Props> = ({
   const handleAddToFavorites = () => {
     if (!workspaceSlug) return;
 
-    mutate<IProject[]>(
-      PROJECTS_LIST(workspaceSlug as string, { is_favorite: true }),
-      (prevData) => [...(prevData ?? []), { ...project, is_favorite: true }],
-      false
-    );
     mutate<IProject[]>(
       PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }),
       (prevData) =>
@@ -105,11 +100,6 @@ export const SingleSidebarProject: React.FC<Props> = ({
   const handleRemoveFromFavorites = () => {
     if (!workspaceSlug) return;
 
-    mutate<IProject[]>(
-      PROJECTS_LIST(workspaceSlug as string, { is_favorite: true }),
-      (prevData) => (prevData ?? []).filter((p) => p.id !== project.id),
-      false
-    );
     mutate<IProject[]>(
       PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }),
       (prevData) =>

apps/app/components/ui/tooltip.tsx

@@ -1,11 +1,13 @@
 import React from "react";
 
+// next-themes
+import { useTheme } from "next-themes";
+// tooltip2
 import { Tooltip2 } from "@blueprintjs/popover2";
 
 type Props = {
   tooltipHeading?: string;
-  tooltipContent: string | JSX.Element;
+  tooltipContent: string | React.ReactNode;
-  triangle?: boolean;
   position?:
     | "top"
     | "right"
@@ -25,7 +27,8 @@ type Props = {
   children: JSX.Element;
   disabled?: boolean;
   className?: string;
-  theme?: "light" | "dark";
+  openDelay?: number;
+  closeDelay?: number;
 };
 
 export const Tooltip: React.FC<Props> = ({
@@ -35,24 +38,40 @@ export const Tooltip: React.FC<Props> = ({
   children,
   disabled = false,
   className = "",
-  theme = "light",
+  openDelay = 500,
-  triangle,
+  closeDelay,
-}) => (
+}) => {
-  <Tooltip2
+  const { theme } = useTheme();
-    disabled={disabled}
+
-    content={
+  return (
-      <div
+    <Tooltip2
-        className={`${className} relative z-50 flex max-w-[600px] flex-col items-start justify-center gap-1 rounded-md p-2 text-left text-xs shadow-md ${
+      disabled={disabled}
-          theme === "light" ? "text-custom-text-200 bg-custom-background-80" : "bg-black text-white"
+      hoverOpenDelay={openDelay}
-        }`}
+      hoverCloseDelay={closeDelay}
-      >
+      content={
-        {tooltipHeading && <h5 className="font-medium">{tooltipHeading}</h5>}
+        <div
-        {tooltipContent}
+          className={`relative z-50 max-w-xs gap-1 rounded-md p-2 text-xs shadow-md ${
-      </div>
+            theme === "custom"
-    }
+              ? "bg-custom-background-100 text-custom-text-200"
-    position={position}
+              : "bg-black text-gray-400"
-    renderTarget={({ isOpen: isTooltipOpen, ref: eleReference, ...tooltipProps }) =>
+          } break-words overflow-hidden ${className}`}
-      React.cloneElement(children, { ref: eleReference, ...tooltipProps, ...children.props })
+        >
-    }
+          {tooltipHeading && (
-  />
+            <h5
-);
+              className={`font-medium ${
+                theme === "custom" ? "text-custom-text-100" : "text-white"
+              }`}
+            >
+              {tooltipHeading}
+            </h5>
+          )}
+          {tooltipContent}
+        </div>
+      }
+      position={position}
+      renderTarget={({ isOpen: isTooltipOpen, ref: eleReference, ...tooltipProps }) =>
+        React.cloneElement(children, { ref: eleReference, ...tooltipProps, ...children.props })
+      }
+    />
+  );
+};

apps/app/components/workspace/activity-graph.tsx

@@ -110,7 +110,6 @@ export const ActivityGraph: React.FC<Props> = ({ activities }) => {
                   tooltipContent={`${
                     isActive ? isActive.activity_count : 0
                   } activities on ${renderShortDateWithYearFormat(date)}`}
-                  theme="dark"
                 >
                   <div
                     className={`${

apps/app/layouts/app-layout/app-sidebar.tsx

@@ -20,7 +20,7 @@ const Sidebar: React.FC<SidebarProps> = ({ toggleSidebar, setToggleSidebar }) =>
   return (
     <div
       className={`fixed md:relative inset-y-0 flex flex-col bg-custom-sidebar-background-100 h-full flex-shrink-0 flex-grow-0 border-r border-custom-sidebar-border-100 z-20 duration-300 ${
-        sidebarCollapse ? "" : "md:w-72"
+        sidebarCollapse ? "" : "md:w-[280px]"
       } ${toggleSidebar ? "left-0" : "-left-full md:left-0"}`}
     >
       <div className="flex h-full w-full flex-1 flex-col">

apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx

@@ -482,7 +482,6 @@ const SinglePage: NextPage = () => {
                           ? "This page is only visible to you."
                           : "This page can be viewed by anyone in the project."
                       }`}
-                      theme="dark"
                     >
                       {pageDetails.access ? (
                         <button onClick={() => partialUpdatePage({ access: 0 })} className="z-10">

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx

@@ -33,24 +33,24 @@ const AutomationsSettings: NextPage = () => {
   const { projectDetails } = useProjectDetails();
 
   const handleChange = async (formData: Partial<IProject>) => {
-    if (!workspaceSlug || !projectId) return;
+    if (!workspaceSlug || !projectId || !projectDetails) return;
 
     mutate<IProject>(
       PROJECT_DETAILS(projectId as string),
       (prevData) => ({ ...(prevData as IProject), ...formData }),
       false
     );
+
+    mutate<IProject[]>(
+      PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }),
+      (prevData) =>
+        (prevData ?? []).map((p) => (p.id === projectDetails.id ? { ...p, ...formData } : p)),
+      false
+    );
+
     await projectService
       .updateProject(workspaceSlug as string, projectId as string, formData, user)
-      .then(() => {
+      .then(() => {})
-        mutate<IProject[]>(
-          PROJECTS_LIST(workspaceSlug as string),
-          (prevData) =>
-            (prevData ?? []).map((p) => (p.id === projectDetails?.id ? { ...p, ...formData } : p)),
-          false
-        );
-        mutate(PROJECT_DETAILS(projectId as string));
-      })
       .catch(() => {
         setToastAlert({
           type: "error",

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx

@@ -71,13 +71,6 @@ const ControlSettings: NextPage = () => {
       .then((res) => {
         mutate(PROJECT_DETAILS(projectId as string));
 
-        if (projectDetails.is_favorite)
-          mutate(
-            PROJECTS_LIST(workspaceSlug as string, {
-              is_favorite: true,
-            })
-          );
-
         mutate(
           PROJECTS_LIST(workspaceSlug as string, {
             is_favorite: "all",

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx

@@ -99,44 +99,21 @@ const FeaturesSettings: NextPage = () => {
   const handleSubmit = async (formData: Partial<IProject>) => {
     if (!workspaceSlug || !projectId || !projectDetails) return;
 
-    if (projectDetails.is_favorite)
-      mutate<IProject[]>(
-        PROJECTS_LIST(workspaceSlug.toString(), {
-          is_favorite: true,
-        }),
-        (prevData) =>
-          prevData?.map((p) => {
-            if (p.id === projectId)
-              return {
-                ...p,
-                ...formData,
-              };
-
-            return p;
-          }),
-        false
-      );
-
     mutate<IProject[]>(
       PROJECTS_LIST(workspaceSlug.toString(), {
         is_favorite: "all",
       }),
-      (prevData) =>
+      (prevData) => prevData?.map((p) => (p.id === projectId ? { ...p, ...formData } : p)),
-        prevData?.map((p) => {
-          if (p.id === projectId)
-            return {
-              ...p,
-              ...formData,
-            };
-
-          return p;
-        }),
       false
     );
 
     mutate<IProject>(
       PROJECT_DETAILS(projectId as string),
-      (prevData) => ({ ...(prevData as IProject), ...formData }),
+      (prevData) => {
+        if (!prevData) return prevData;
+
+        return { ...prevData, ...formData };
+      },
       false
     );
 

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx

@@ -95,13 +95,6 @@ const GeneralSettings: NextPage = () => {
           false
         );
 
-        if (projectDetails.is_favorite)
-          mutate(
-            PROJECTS_LIST(workspaceSlug as string, {
-              is_favorite: true,
-            })
-          );
-
         mutate(
           PROJECTS_LIST(workspaceSlug as string, {
             is_favorite: "all",

apps/app/styles/globals.css

@@ -1,5 +1,5 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0");
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0&display=swap");
 
 @tailwind base;
 @tailwind components;