Adds delight to project list

src/features/sidebar/view/internal/sidebar/projects/ProjectAvatar.tsx

@@ -1,6 +1,5 @@
 import { SxProps } from "@mui/system"
-import { Avatar, Box } from "@mui/material"
-import { alpha, useTheme } from "@mui/material/styles"
+import { Avatar } from "@mui/material"
 import { Project } from "@/features/projects/domain"
 import ProjectAvatarSquircle from "./ProjectAvatarSquircle"
 
@@ -13,39 +12,21 @@ function ProjectAvatar({
   width: number,
   height: number
 }) {
-  const theme = useTheme()
-  const borderRadius = 1
   return (
-    <Box sx={{
-      width: width + borderRadius * 2,
-      height: height + borderRadius * 2,
-      position: "relative"
-    }}>
-      <ProjectAvatarSquircle
-        width={width + borderRadius * 2}
-        height={height + borderRadius * 2}
-        sx={{
-          position: "absolute",
-          left: borderRadius * -1,
-          top: borderRadius * -1,
-          background: alpha(theme.palette.divider, 0.07)
-        }}
+    <ProjectAvatarSquircle width={width} height={height} sx={{ position: "relative" }}>
+      <PlaceholderAvatar
+        text={project.displayName}
+        sx={{ position: "absolute", zIndex: 500 }}
       />
-      <ProjectAvatarSquircle width={width} height={height} sx={{ position: "relative" }}>
-        <PlaceholderAvatar
-          text={project.displayName}
-          sx={{ position: "absolute", zIndex: 500 }}
+      {project.imageURL &&
+        /* eslint-disable-next-line @next/next/no-img-element */
+        <img 
+          src={project.imageURL}
+          alt={project.displayName}
+          style={{ position: "absolute", zIndex: 1000 }}
         />
-        {project.imageURL &&
-          /* eslint-disable-next-line @next/next/no-img-element */
-          <img 
-            src={project.imageURL}
-            alt={project.displayName}
-            style={{ position: "absolute", zIndex: 1000 }}
-          />
-        }
-      </ProjectAvatarSquircle>
-    </Box>
+      }
+    </ProjectAvatarSquircle>
   )
 }
 
@@ -58,4 +39,3 @@ const PlaceholderAvatar = ({ text, sx }: { text: string, sx?: SxProps }) => {
     </Avatar>
   )
 }
-

src/features/sidebar/view/internal/sidebar/projects/ProjectAvatarSquircle.tsx

@@ -16,12 +16,19 @@ const ProjectAvatarSquircle = ({
   const svgPath = getSvgPath({
     width,
     height,
-    cornerRadius: 10,
+    cornerRadius: 12,
     cornerSmoothing: 0.8
   })
   return (
-    <Box sx={{ ...sx, width, height, clipPath: `path('${svgPath}')` }}>
-      {children}
+    <Box sx={{ filter: "drop-shadow(0 2px 3px rgba(0, 0, 0, 0.1))" }}>
+      <Box sx={{
+        width,
+        height,
+        clipPath: `path('${svgPath}')`,
+        ...sx,
+      }}>
+        {children}
+      </Box>
     </Box>
   )
 }

src/features/sidebar/view/internal/sidebar/projects/ProjectList.tsx

@@ -17,13 +17,16 @@ const ProjectList = () => {
             <ProjectListItemPlaceholder key={index}/>
           ))
         }
-        {!isLoading && projects.map(project => (
-          <ProjectListItem
-            key={project.id}
-            project={project}
-            isSelected={project.id === projectSelection.project?.id}
-            onSelectProject={projectSelection.selectProject}
-          />
+        {!isLoading && projects.map((project, idx) => (
+          <Box key={project.id} sx={{
+            marginBottom: idx < projects.length - 1 ? 0.5 : 0
+          }}>
+            <ProjectListItem
+              project={project}
+              isSelected={project.id === projectSelection.project?.id}
+              onSelectProject={projectSelection.selectProject}
+            />
+          </Box>
         ))}
       </List>
     )

src/features/sidebar/view/internal/sidebar/projects/ProjectListItem.tsx

@@ -1,4 +1,5 @@
 import {
+  Box,
   ListItem,
   ListItemButton,
   ListItemText,
@@ -26,16 +27,27 @@ const ProjectListItem = ({
         disableGutters
         sx={{ padding: 0 }}
       >
-        <MenuItemHover sx={{ marginTop: 0.5, marginBottom: 0.5 }}>
-          <Stack direction="row" alignItems="center" spacing={1}>
-            <ProjectAvatar project={project} width={40} height={40} />
+        <MenuItemHover
+          sx={{
+            ".avatar": {
+              transform: "scale(1)",
+              transition: "transform 0.3s ease-in-out"
+            },
+            "&:hover .avatar": {
+              transform: "scale(1.08)"
+            }
+          }}>
+          <Stack direction="row" alignItems="center" spacing={1.5}>
+            <Box className="avatar">
+              <ProjectAvatar project={project} width={40} height={40} />
+            </Box>
             <ListItemText
               primary={
                 <Typography
                   style={{
                     fontSize: "1.1em",
                     fontWeight: isSelected ? 800 : 500,
-                    letterSpacing: 0.3,
+                    letterSpacing: 0.1,
                     whiteSpace: "nowrap",
                     overflow: "hidden",
                     textOverflow: "ellipsis"