feat(desktop): add recently closed projects to home (#34926)

packages/ui/src/v2/components/project-avatar-v2.css

@@ -81,6 +81,13 @@
   --project-avatar-border: var(--v2-avatar-border-gray);
 }
 
+[data-slot="project-avatar-surface"][data-variant="outline"] {
+  --project-avatar-bg: var(--v2-background-bg-base);
+  --project-avatar-border: var(--v2-border-border-strong);
+  color: var(--v2-text-text-muted);
+  text-shadow: none;
+}
+
 [data-slot="project-avatar-surface"][data-has-image] {
   background: var(--project-avatar-bg);
 }

packages/ui/src/v2/components/project-avatar-v2.stories.tsx

@@ -11,6 +11,7 @@ Saturated 16px project avatar with color variants and optional unread dot.
 
 ### Variants
 - Color: orange, yellow, cyan, green, red, pink, blue, purple, gray.
+- Outline: neutral, muted style for de-emphasized projects (e.g. recently closed).
 - Image vs initial content state.
 - Unread dot with corner mask when \`unread\` is set.
 
@@ -33,7 +34,7 @@ export default {
   argTypes: {
     variant: {
       control: "select",
-      options: [...PROJECT_AVATAR_VARIANTS],
+      options: [...PROJECT_AVATAR_VARIANTS, "outline"],
     },
   },
   args: {
@@ -62,6 +63,13 @@ export const AllVariants = {
   ),
 }
 
+export const Outline = {
+  args: {
+    fallback: "O",
+    variant: "outline",
+  },
+}
+
 export const Unread = {
   args: {
     fallback: "O",

packages/ui/src/v2/components/project-avatar-v2.tsx

@@ -26,10 +26,13 @@ export const PROJECT_AVATAR_VARIANTS = [
 
 export type ProjectAvatarVariant = (typeof PROJECT_AVATAR_VARIANTS)[number]
 
+// "outline" is a neutral, muted style (e.g. recently closed projects) and is not part of the color rotation.
+export type ProjectAvatarStyle = ProjectAvatarVariant | "outline"
+
 export interface ProjectAvatarProps extends ComponentProps<"div"> {
   fallback: string
   src?: string
-  variant?: ProjectAvatarVariant
+  variant?: ProjectAvatarStyle
   unread?: boolean
 }