From d6e8b5b80e0ea1372712d2e5470efdd6c51c9244 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20St=C3=B8vring?= <mail@simonbs.dk>
Date: Tue, 13 Aug 2024 10:08:39 +0200
Subject: [PATCH 1/6] Ensures project placeholders align with projects

---
 .../internal/sidebar/projects/ProjectList.tsx | 11 ++++++---
 .../projects/ProjectListItemPlaceholder.tsx   | 23 +++----------------
 2 files changed, 11 insertions(+), 23 deletions(-)

diff --git a/src/features/sidebar/view/internal/sidebar/projects/ProjectList.tsx b/src/features/sidebar/view/internal/sidebar/projects/ProjectList.tsx
index d96def6b..a0c0dcbb 100644
--- a/src/features/sidebar/view/internal/sidebar/projects/ProjectList.tsx
+++ b/src/features/sidebar/view/internal/sidebar/projects/ProjectList.tsx
@@ -9,17 +9,22 @@ const ProjectList = () => {
   const { projects, isLoading } = useContext(ProjectsContainerContext)
   const projectSelection = useProjectSelection()
   const loadingItemCount = 6
+  const itemSpacing = 1
   if (isLoading || projects.length > 0) {
     return (
       <List disablePadding sx={{ margin: 0 }}>
         {isLoading && 
-          [...new Array(loadingItemCount)].map((_, index) => (
-            <ProjectListItemPlaceholder key={index}/>
+          [...new Array(loadingItemCount)].map((_, idx) => (
+            <Box key={idx} sx={{
+              marginBottom: idx < loadingItemCount - 1 ? itemSpacing : 0
+            }}>
+              <ProjectListItemPlaceholder/>
+            </Box>
           ))
         }
         {!isLoading && projects.map((project, idx) => (
           <Box key={project.id} sx={{
-            marginBottom: idx < projects.length - 1 ? 0.5 : 0
+            marginBottom: idx < projects.length - 1 ? itemSpacing : 0
           }}>
             <ProjectListItem
               project={project}
diff --git a/src/features/sidebar/view/internal/sidebar/projects/ProjectListItemPlaceholder.tsx b/src/features/sidebar/view/internal/sidebar/projects/ProjectListItemPlaceholder.tsx
index 77de983a..5b50c81f 100644
--- a/src/features/sidebar/view/internal/sidebar/projects/ProjectListItemPlaceholder.tsx
+++ b/src/features/sidebar/view/internal/sidebar/projects/ProjectListItemPlaceholder.tsx
@@ -6,29 +6,12 @@ const ProjectListItemPlaceholder = () => {
   return (
     <ListItem>
       <MenuItemHover disabled>
-        <Stack
-          direction="row" alignItems="center" spacing={1}
-          sx={{
-            padding: 0,
-            marginTop: 0.5,
-            marginBottom: 0.5
-          }}
-        >
-          <ProjectAvatarSquircle
-            width={42}
-            height={42}
-            sx={{
-              // Offset the squircle to make it align with
-              // the border of the actual avatar when loaded.
-              position: "relative",
-              left: "-1px",
-              top: "-1px"
-          }}
-          >
+        <Stack direction="row" alignItems="center" spacing={1.5}>
+          <ProjectAvatarSquircle width={40} height={40}>
             <Skeleton
               variant="rectangular"
               animation="wave"
-              sx={{ width: 42, height: 42 }}
+              sx={{ width: 40, height: 40 }}
             />
           </ProjectAvatarSquircle>
           <ListItemText

From 2664932c44e3caff636625a2657e8dd9a8ba69b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20St=C3=B8vring?= <mail@simonbs.dk>
Date: Tue, 13 Aug 2024 10:23:08 +0200
Subject: [PATCH 2/6] Extracts SpacedList to separate file

---
 src/common/ui/SpacedList.tsx                  | 24 +++++++++++
 .../internal/sidebar/projects/ProjectList.tsx | 43 +++++++++----------
 2 files changed, 44 insertions(+), 23 deletions(-)
 create mode 100644 src/common/ui/SpacedList.tsx

diff --git a/src/common/ui/SpacedList.tsx b/src/common/ui/SpacedList.tsx
new file mode 100644
index 00000000..799af698
--- /dev/null
+++ b/src/common/ui/SpacedList.tsx
@@ -0,0 +1,24 @@
+import React from "react"
+import { List, Box } from "@mui/material"
+
+const SpacedList = ({
+  children,
+  itemSpacing
+}: {
+  children: React.ReactNode
+  itemSpacing: number
+}) => {
+  return (
+    <List disablePadding sx={{ margin: 0 }}>
+      {React.Children.map(children, (child, idx) => (
+        <Box sx={{
+          marginBottom: idx < React.Children.count(children) - 1 ? itemSpacing : 0
+        }}>
+          {child}
+        </Box>
+      ))}
+    </List>
+  )
+}
+
+export default SpacedList
diff --git a/src/features/sidebar/view/internal/sidebar/projects/ProjectList.tsx b/src/features/sidebar/view/internal/sidebar/projects/ProjectList.tsx
index a0c0dcbb..82bdec1f 100644
--- a/src/features/sidebar/view/internal/sidebar/projects/ProjectList.tsx
+++ b/src/features/sidebar/view/internal/sidebar/projects/ProjectList.tsx
@@ -1,6 +1,7 @@
 import { useContext } from "react"
-import { List, Box, Typography } from "@mui/material"
-import { ProjectsContainerContext } from "@/common"
+import { Box, Typography } from "@mui/material"
+import {  ProjectsContainerContext } from "@/common"
+import SpacedList from "@/common/ui/SpacedList"
 import { useProjectSelection } from "@/features/projects/data"
 import ProjectListItem from "./ProjectListItem"
 import ProjectListItemPlaceholder from "./ProjectListItemPlaceholder"
@@ -8,32 +9,28 @@ import ProjectListItemPlaceholder from "./ProjectListItemPlaceholder"
 const ProjectList = () => {
   const { projects, isLoading } = useContext(ProjectsContainerContext)
   const projectSelection = useProjectSelection()
-  const loadingItemCount = 6
   const itemSpacing = 1
-  if (isLoading || projects.length > 0) {
+  if (isLoading) {
     return (
-      <List disablePadding sx={{ margin: 0 }}>
-        {isLoading && 
-          [...new Array(loadingItemCount)].map((_, idx) => (
-            <Box key={idx} sx={{
-              marginBottom: idx < loadingItemCount - 1 ? itemSpacing : 0
-            }}>
-              <ProjectListItemPlaceholder/>
-            </Box>
+      <SpacedList itemSpacing={itemSpacing}>
+        {
+          [...new Array(6)].map((_, idx) => (
+            <ProjectListItemPlaceholder key={idx} />
           ))
         }
-        {!isLoading && projects.map((project, idx) => (
-          <Box key={project.id} sx={{
-            marginBottom: idx < projects.length - 1 ? itemSpacing : 0
-          }}>
-            <ProjectListItem
-              project={project}
-              isSelected={project.id === projectSelection.project?.id}
-              onSelectProject={projectSelection.selectProject}
-            />
-          </Box>
+      </SpacedList>
+    )
+  } else if (projects.length > 0) {
+    return (
+      <SpacedList itemSpacing={itemSpacing}>
+        {projects.map(project => (
+          <ProjectListItem
+            project={project}
+            isSelected={project.id === projectSelection.project?.id}
+            onSelectProject={projectSelection.selectProject}
+          />
         ))}
-      </List>
+      </SpacedList>
     )
   } else {
     return (

From 3fbcb21c5b7477eb0fbdfb53aab8a0f55fda9303 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20St=C3=B8vring?= <mail@simonbs.dk>
Date: Tue, 13 Aug 2024 10:27:41 +0200
Subject: [PATCH 3/6] Adds missing key prop

---
 .../sidebar/view/internal/sidebar/projects/ProjectList.tsx       | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/features/sidebar/view/internal/sidebar/projects/ProjectList.tsx b/src/features/sidebar/view/internal/sidebar/projects/ProjectList.tsx
index 82bdec1f..9832ce18 100644
--- a/src/features/sidebar/view/internal/sidebar/projects/ProjectList.tsx
+++ b/src/features/sidebar/view/internal/sidebar/projects/ProjectList.tsx
@@ -25,6 +25,7 @@ const ProjectList = () => {
       <SpacedList itemSpacing={itemSpacing}>
         {projects.map(project => (
           <ProjectListItem
+            key={project.id}
             project={project}
             isSelected={project.id === projectSelection.project?.id}
             onSelectProject={projectSelection.selectProject}

From f20475b6142163c68e33ec4103ea7ac8d6bfc894 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20St=C3=B8vring?= <mail@simonbs.dk>
Date: Tue, 13 Aug 2024 11:28:56 +0200
Subject: [PATCH 4/6] Simplifies ProjectListItem skeleton

---
 .../internal/sidebar/projects/ProjectList.tsx |  11 +-
 .../sidebar/projects/ProjectListItem.tsx      | 153 +++++++++++++-----
 .../projects/ProjectListItemPlaceholder.tsx   |  36 -----
 3 files changed, 118 insertions(+), 82 deletions(-)
 delete mode 100644 src/features/sidebar/view/internal/sidebar/projects/ProjectListItemPlaceholder.tsx

diff --git a/src/features/sidebar/view/internal/sidebar/projects/ProjectList.tsx b/src/features/sidebar/view/internal/sidebar/projects/ProjectList.tsx
index 9832ce18..87ea22e9 100644
--- a/src/features/sidebar/view/internal/sidebar/projects/ProjectList.tsx
+++ b/src/features/sidebar/view/internal/sidebar/projects/ProjectList.tsx
@@ -1,10 +1,9 @@
 import { useContext } from "react"
 import { Box, Typography } from "@mui/material"
-import {  ProjectsContainerContext } from "@/common"
+import { ProjectsContainerContext } from "@/common"
 import SpacedList from "@/common/ui/SpacedList"
 import { useProjectSelection } from "@/features/projects/data"
-import ProjectListItem from "./ProjectListItem"
-import ProjectListItemPlaceholder from "./ProjectListItemPlaceholder"
+import ProjectListItem, { Skeleton as ProjectListItemSkeleton } from "./ProjectListItem"
 
 const ProjectList = () => {
   const { projects, isLoading } = useContext(ProjectsContainerContext)
@@ -15,7 +14,7 @@ const ProjectList = () => {
       <SpacedList itemSpacing={itemSpacing}>
         {
           [...new Array(6)].map((_, idx) => (
-            <ProjectListItemPlaceholder key={idx} />
+            <ProjectListItemSkeleton key={idx} />
           ))
         }
       </SpacedList>
@@ -27,8 +26,8 @@ const ProjectList = () => {
           <ProjectListItem
             key={project.id}
             project={project}
-            isSelected={project.id === projectSelection.project?.id}
-            onSelectProject={projectSelection.selectProject}
+            selected={project.id === projectSelection.project?.id}
+            onSelect={() => projectSelection.selectProject(project)}
           />
         ))}
       </SpacedList>
diff --git a/src/features/sidebar/view/internal/sidebar/projects/ProjectListItem.tsx b/src/features/sidebar/view/internal/sidebar/projects/ProjectListItem.tsx
index ba9c7291..1f7a9b60 100644
--- a/src/features/sidebar/view/internal/sidebar/projects/ProjectListItem.tsx
+++ b/src/features/sidebar/view/internal/sidebar/projects/ProjectListItem.tsx
@@ -1,67 +1,140 @@
 import {
   Box,
   ListItem,
-  ListItemButton,
   ListItemText,
+  ListItemButton,
+  Skeleton as MuiSkeleton,
   Stack,
   Typography
 } from "@mui/material"
 import MenuItemHover from "@/common/ui/MenuItemHover"
 import { Project } from "@/features/projects/domain"
 import ProjectAvatar from "./ProjectAvatar"
+import ProjectAvatarSquircle from "./ProjectAvatarSquircle"
+
+const AVATAR_SIZE = { width: 40, height: 40 }
 
 const ProjectListItem = ({
   project,
-  isSelected,
-  onSelectProject
+  selected,
+  onSelect
 }: {
   project: Project
-  isSelected: boolean
-  onSelectProject: (project: Project) => void
+  selected: boolean
+  onSelect: () => void
+}) => {
+  return (
+    <Template
+      selected={selected}
+      onSelect={onSelect}
+      avatar={<ProjectAvatar project={project} width={40} height={40} />}
+    >
+      <ListItemText
+        primary={
+          <Typography
+            style={{
+              fontSize: "1.1em",
+              fontWeight: selected ? 800 : 500,
+              letterSpacing: 0.1,
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis"
+            }}
+          >
+            {project.displayName}
+          </Typography>
+        }
+      /> 
+    </Template>
+  )
+}
+
+export default ProjectListItem
+
+export const Skeleton = () => {
+  return (
+    <Template disabled avatar={
+      <MuiSkeleton
+        variant="rectangular"
+        animation="wave"
+        sx={{ width: "100%", height: "100%" }}
+      />
+    }>
+      <MuiSkeleton variant="text" animation="wave" width={100} />
+    </Template>
+  )
+}
+
+const Template = ({
+  disabled,
+  selected,
+  onSelect,
+  avatar,
+  children
+}: {
+  disabled?: boolean
+  selected?: boolean
+  onSelect?: () => void
+  avatar: React.ReactNode
+  children?: React.ReactNode
 }) => {
   return (
     <ListItem disablePadding>
+      {disabled &&
+        <ButtonLabel disabled={disabled} avatar={avatar}>
+          {children}
+        </ButtonLabel>
+      }
+      {!disabled &&
       <ListItemButton
-        onClick={() => onSelectProject(project)}
-        selected={isSelected}
+        disabled={disabled}
+        onClick={onSelect}
+        selected={selected}
         disableGutters
         sx={{ padding: 0 }}
       >
-        <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.1,
-                    whiteSpace: "nowrap",
-                    overflow: "hidden",
-                    textOverflow: "ellipsis"
-                  }}
-                >
-                  {project.displayName}
-                </Typography>
-              }
-            /> 
-          </Stack>
-        </MenuItemHover>
+        <ButtonLabel disabled={disabled} avatar={avatar}>
+          {children}
+        </ButtonLabel>
       </ListItemButton>
+      }
     </ListItem>
   )
 }
 
-export default ProjectListItem
+const ButtonLabel = ({
+  disabled,
+  avatar,
+  children
+}: {
+  disabled?: boolean
+  avatar: React.ReactNode
+  children?: React.ReactNode
+}) => {
+  return (
+    <MenuItemHover
+      disabled={disabled}
+      sx={{
+        ".avatar": {
+          transform: "scale(1)",
+          transition: "transform 0.3s ease-in-out"
+        },
+        "&:hover .avatar": {
+          transform: `scale(${disabled ? 1 : 1.08})`
+        }
+      }}>
+      <Stack direction="row" alignItems="center" spacing={1.5}>
+        <Box className="avatar">
+          <ProjectAvatarSquircle
+            width={AVATAR_SIZE.width}
+            height={AVATAR_SIZE.height}
+            sx={{ position: "relative" }}
+          >
+            {avatar}
+          </ProjectAvatarSquircle>
+        </Box>
+        {children}
+      </Stack>
+    </MenuItemHover>
+  )
+}
diff --git a/src/features/sidebar/view/internal/sidebar/projects/ProjectListItemPlaceholder.tsx b/src/features/sidebar/view/internal/sidebar/projects/ProjectListItemPlaceholder.tsx
deleted file mode 100644
index 5b50c81f..00000000
--- a/src/features/sidebar/view/internal/sidebar/projects/ProjectListItemPlaceholder.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { ListItem, ListItemText, Stack, Skeleton } from "@mui/material"
-import MenuItemHover from "@/common/ui/MenuItemHover"
-import ProjectAvatarSquircle from "./ProjectAvatarSquircle"
-
-const ProjectListItemPlaceholder = () => {
-  return (
-    <ListItem>
-      <MenuItemHover disabled>
-        <Stack direction="row" alignItems="center" spacing={1.5}>
-          <ProjectAvatarSquircle width={40} height={40}>
-            <Skeleton
-              variant="rectangular"
-              animation="wave"
-              sx={{ width: 40, height: 40 }}
-            />
-          </ProjectAvatarSquircle>
-          <ListItemText
-            sx={{
-              position: "relative",
-              top: "-2px"
-            }}
-            primary={
-              <Skeleton
-                variant="text"
-                animation="wave"
-                width={100}
-              />
-            }
-          />
-        </Stack>
-      </MenuItemHover>
-    </ListItem>
-  )
-}
-
-export default ProjectListItemPlaceholder
\ No newline at end of file

From b466dd9c71228b41ec6edcfa1732b7a49ac7d87a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20St=C3=B8vring?= <mail@simonbs.dk>
Date: Tue, 13 Aug 2024 11:38:32 +0200
Subject: [PATCH 5/6] Uses AVATAR_SIZE

---
 .../view/internal/sidebar/projects/ProjectListItem.tsx   | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/features/sidebar/view/internal/sidebar/projects/ProjectListItem.tsx b/src/features/sidebar/view/internal/sidebar/projects/ProjectListItem.tsx
index 1f7a9b60..e5a33418 100644
--- a/src/features/sidebar/view/internal/sidebar/projects/ProjectListItem.tsx
+++ b/src/features/sidebar/view/internal/sidebar/projects/ProjectListItem.tsx
@@ -27,8 +27,13 @@ const ProjectListItem = ({
     <Template
       selected={selected}
       onSelect={onSelect}
-      avatar={<ProjectAvatar project={project} width={40} height={40} />}
-    >
+      avatar={
+        <ProjectAvatar
+          project={project}
+          width={AVATAR_SIZE.width}
+          height={AVATAR_SIZE.height}
+        />
+    }>
       <ListItemText
         primary={
           <Typography

From d32b662b1ece46a01762f8dbe8e15f784f6467d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20St=C3=B8vring?= <mail@simonbs.dk>
Date: Wed, 14 Aug 2024 11:07:59 +0200
Subject: [PATCH 6/6] Fixes compile error

---
 .../view/internal/sidebar/projects/ProjectListItem.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/features/sidebar/view/internal/sidebar/projects/ProjectListItem.tsx b/src/features/sidebar/view/internal/sidebar/projects/ProjectListItem.tsx
index b159e637..3e8e8989 100644
--- a/src/features/sidebar/view/internal/sidebar/projects/ProjectListItem.tsx
+++ b/src/features/sidebar/view/internal/sidebar/projects/ProjectListItem.tsx
@@ -39,11 +39,11 @@ const ProjectListItem = ({
           <Typography
             variant="body2"
             style={{
-                fontWeight: isSelected ? 800 : 500,
-                letterSpacing: 0.1,
-                whiteSpace: "nowrap",
-                overflow: "hidden",
-                textOverflow: "ellipsis"
+              fontWeight: selected ? 800 : 500,
+              letterSpacing: 0.1,
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis"
             }}
           >
             {project.displayName}