chore: add favorite project from sidebar (#1909)

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

@@ -42,6 +42,7 @@ import { NETWORK_CHOICES } from "constants/project";
 type Props = {
   isOpen: boolean;
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  setToFavorite?: boolean;
   user: ICurrentUserResponse | undefined;
 };
 
@@ -74,7 +75,12 @@ const IsGuestCondition: React.FC<{
   return null;
 };
 
-export const CreateProjectModal: React.FC<Props> = ({ isOpen, setIsOpen, user }) => {
+export const CreateProjectModal: React.FC<Props> = ({
+  isOpen,
+  setIsOpen,
+  setToFavorite = false,
+  user,
+}) => {
   const [isChangeInIdentifierRequired, setIsChangeInIdentifierRequired] = useState(true);
 
   const { setToastAlert } = useToast();
@@ -104,6 +110,29 @@ export const CreateProjectModal: React.FC<Props> = ({ isOpen, setIsOpen, user })
     reset(defaultValues);
   };
 
+  const handleAddToFavorites = (projectId: string) => {
+    if (!workspaceSlug) return;
+
+    mutate<IProject[]>(
+      PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }),
+      (prevData) =>
+        (prevData ?? []).map((p) => (p.id === projectId ? { ...p, is_favorite: true } : p)),
+      false
+    );
+
+    projectServices
+      .addProjectToFavorites(workspaceSlug as string, {
+        project: projectId,
+      })
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't remove the project from favorites. Please try again.",
+        })
+      );
+  };
+
   const onSubmit = async (formData: IProject) => {
     if (!workspaceSlug) return;
 
@@ -125,6 +154,9 @@ export const CreateProjectModal: React.FC<Props> = ({ isOpen, setIsOpen, user })
           title: "Success!",
           message: "Project created successfully.",
         });
+        if (setToFavorite) {
+          handleAddToFavorites(res.id);
+        }
         handleClose();
       })
       .catch((err) => {

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

@@ -13,7 +13,7 @@ import useTheme from "hooks/use-theme";
 import useUserAuth from "hooks/use-user-auth";
 import useProjects from "hooks/use-projects";
 // components
-import { DeleteProjectModal, SingleSidebarProject } from "components/project";
+import { CreateProjectModal, DeleteProjectModal, SingleSidebarProject } from "components/project";
 // services
 import projectService from "services/project.service";
 // icons
@@ -32,6 +32,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
 export const ProjectSidebarList: FC = () => {
   const store: any = useMobxStore();
 
+  const [isProjectModalOpen, setIsProjectModalOpen] = useState(false);
   const [deleteProjectModal, setDeleteProjectModal] = useState(false);
   const [projectToDelete, setProjectToDelete] = useState<IProject | null>(null);
 
@@ -151,6 +152,12 @@ export const ProjectSidebarList: FC = () => {
 
   return (
     <>
+      <CreateProjectModal
+        isOpen={isProjectModalOpen}
+        setIsOpen={setIsProjectModalOpen}
+        setToFavorite
+        user={user}
+      />
       <DeleteProjectModal
         isOpen={deleteProjectModal}
         onClose={() => setDeleteProjectModal(false)}
@@ -172,17 +179,25 @@ export const ProjectSidebarList: FC = () => {
                     {({ open }) => (
                       <>
                         {!store?.theme?.sidebarCollapsed && (
-                          <Disclosure.Button
+                          <div className="group flex justify-between items-center text-xs px-1.5 rounded text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80 w-full">
-                            as="button"
+                            <Disclosure.Button
-                            type="button"
+                              as="button"
-                            className="group flex items-center gap-1 px-1.5 text-xs font-semibold text-custom-sidebar-text-400 text-left hover:bg-custom-sidebar-background-80 rounded w-full whitespace-nowrap"
+                              type="button"
-                          >
+                              className="group flex items-center gap-1 px-1.5 text-xs font-semibold text-custom-sidebar-text-400 text-left hover:bg-custom-sidebar-background-80 rounded w-full whitespace-nowrap"
-                            Favorites
+                            >
-                            <Icon
+                              Favorites
-                              iconName={open ? "arrow_drop_down" : "arrow_right"}
+                              <Icon
-                              className="group-hover:opacity-100 opacity-0 !text-lg"
+                                iconName={open ? "arrow_drop_down" : "arrow_right"}
-                            />
+                                className="group-hover:opacity-100 opacity-0 !text-lg"
-                          </Disclosure.Button>
+                              />
+                            </Disclosure.Button>
+                            <button
+                              className="group-hover:opacity-100 opacity-0"
+                              onClick={() => setIsProjectModalOpen(true)}
+                            >
+                              <Icon iconName="add" />
+                            </button>
+                          </div>
                         )}
                         <Disclosure.Panel as="div" className="space-y-2">
                           {orderedFavProjects.map((project, index) => (
@@ -241,10 +256,7 @@ export const ProjectSidebarList: FC = () => {
                             </Disclosure.Button>
                             <button
                               className="group-hover:opacity-100 opacity-0"
-                              onClick={() => {
+                              onClick={() => setIsProjectModalOpen(true)}
-                                const e = new KeyboardEvent("keydown", { key: "p" });
-                                document.dispatchEvent(e);
-                              }}
                             >
                               <Icon iconName="add" />
                             </button>