feat(web): implements projects functionalities

web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectGridViewItem.tsx

@@ -9,10 +9,8 @@ import { ProjectProps } from "./types";
 const ProjectGridViewItem: FC<ProjectProps> = ({
   project,
   selectedProjectId,
-  isStarred,
   onProjectOpen,
   onProjectSelect,
-  onProjectStarClick,
   onProjectUpdate,
 }) => {
   const theme = useTheme();
@@ -22,10 +20,13 @@ const ProjectGridViewItem: FC<ProjectProps> = ({
     popupMenu,
     isEditing,
     isHovered,
+    isStarred,
+    publishStatus,
     handleProjectNameChange,
     handleProjectNameBlur,
     handleProjectHover,
     handleProjectNameDoubleClick,
+    handleProjectStarClick,
   } = useHooks({
     project,
     selectedProjectId,
@@ -50,13 +51,14 @@ const ProjectGridViewItem: FC<ProjectProps> = ({
           <Button
             iconButton
             icon={isStarred ? "starFilled" : "star"}
-            onClick={e => onProjectStarClick?.(e, project.id)}
+            onClick={e => handleProjectStarClick?.(e)}
             iconColor={isStarred ? theme.warning.main : theme.content.main}
             appearance="simple"
           />
         </StarButtonWrapper>
       </CardImage>
       <CardFooter>
+        {publishStatus && <PublishStatus />}
         <CardTitleWrapper>
           {!isEditing ? (
             <CardTitle onDoubleClick={handleProjectNameDoubleClick}>{projectName}</CardTitle>
@@ -94,16 +96,14 @@ const CardImage = styled("div")<{
   backgroundImage?: string | null;
   isSelected: boolean;
   isHovered: boolean;
-}>(({ theme, backgroundImage, isSelected, isHovered }) => ({
+}>(({ theme, backgroundImage, isHovered }) => ({
   flex: 1,
   position: "relative",
   background: backgroundImage ? `url(${backgroundImage}) center/cover` : theme.bg[1],
   borderRadius: theme.radius.normal,
   boxSizing: "border-box",
   cursor: "pointer",
-  border: `1px solid ${
-    isSelected ? theme.select.main : isHovered ? theme.outline.weak : "transparent"
-  }`,
+  border: `1px solid ${isHovered ? theme.outline.weak : "transparent"}`,
 }));
 
 const StarButtonWrapper = styled("div")<{
@@ -117,9 +117,18 @@ const StarButtonWrapper = styled("div")<{
   opacity: isSelected || isStarred || isHovered ? 1 : 0,
 }));
 
-const CardFooter = styled("div")(() => ({
+const CardFooter = styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
+  gap: theme.spacing.smallest,
+  padding: `0 ${theme.spacing.smallest}`,
+}));
+
+const PublishStatus = styled("div")(({ theme }) => ({
+  height: "12px",
+  width: "12px",
+  borderRadius: "50%",
+  background: theme.publish.main,
 }));
 
 const CardTitleWrapper = styled("div")(() => ({