From c0ac60de7135d19a9583373615cd81e142e5244a Mon Sep 17 00:00:00 2001
From: Pedro Bonamin <pedrobonamin@gmail.com>
Date: Thu, 2 Nov 2023 09:15:19 +0100
Subject: [PATCH] fix(facelift): refactor workspace preview to use large menu
 item

---
 .../navbar/workspace/WorkspaceMenuButton.tsx  | 22 +++++-------
 .../navbar/workspace/WorkspacePreview.tsx     | 34 ++++++++++++++-----
 2 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx b/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx
index 45a6f467f417..335d39a90fdb 100644
--- a/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx
@@ -1,5 +1,5 @@
 import {SelectIcon} from '@sanity/icons'
-import {Button, MenuButton, Menu, MenuButtonProps, Box, Label, Stack} from '@sanity/ui'
+import {Button, MenuButton, Menu, MenuButtonProps, Box, Label, Stack, Card} from '@sanity/ui'
 import React, {useCallback, useMemo, useState} from 'react'
 import styled from 'styled-components'
 import {useActiveWorkspace} from '../../../activeWorkspaceMatcher'
@@ -7,7 +7,7 @@ import {useColorScheme} from '../../../colorScheme'
 import {useWorkspaces} from '../../../workspaces'
 import {Tooltip, MenuItem} from '../../../../../ui'
 import {useWorkspaceAuthStates} from './hooks'
-import {WorkspacePreview} from './WorkspacePreview'
+import {STATE_TITLES, WorkspacePreviewIcon} from './WorkspacePreview'
 import {useRouter} from 'sanity/router'
 
 const StyledMenu = styled(Menu)`
@@ -95,21 +95,17 @@ export function WorkspaceMenuButton(props: WorkspaceMenuButtonProps) {
 
                   return (
                     <MenuItem
+                      size="large"
                       key={workspace.name}
                       // eslint-disable-next-line react/jsx-no-bind
                       onClick={handleSelectWorkspace}
                       pressed={workspace.name === activeWorkspace.name}
-                    >
-                      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-                      {/* @ts-ignore - Workspace preview hasn't been redesigned for facelift */}
-                      <WorkspacePreview
-                        icon={workspace?.icon}
-                        selected={workspace.name === activeWorkspace.name}
-                        state={state}
-                        subtitle={workspace?.subtitle}
-                        title={workspace?.title || workspace.name}
-                      />
-                    </MenuItem>
+                      selected={workspace.name === activeWorkspace.name}
+                      badgeText={STATE_TITLES[state]}
+                      avatar={<WorkspacePreviewIcon icon={workspace.icon} size="large" />}
+                      text={workspace?.title || workspace.name}
+                      subText={workspace?.subtitle}
+                    />
                   )
                 })}
             </StyledMenu>
diff --git a/packages/sanity/src/core/studio/components/navbar/workspace/WorkspacePreview.tsx b/packages/sanity/src/core/studio/components/navbar/workspace/WorkspacePreview.tsx
index 8ea2e464a531..843f347ab74b 100644
--- a/packages/sanity/src/core/studio/components/navbar/workspace/WorkspacePreview.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/workspace/WorkspacePreview.tsx
@@ -4,15 +4,20 @@ import React, {createElement, isValidElement, useMemo} from 'react'
 import {isValidElementType} from 'react-is'
 import styled from 'styled-components'
 
-const STATE_TITLES = {
+export const STATE_TITLES = {
   'logged-in': '',
   'logged-out': 'Signed out',
   'no-access': '',
 }
 
-export const MediaCard = styled(Card)`
-  width: 35px;
-  height: 35px;
+type PreviewIconSize = 'small' | 'large'
+interface MediaCardProps {
+  $size: PreviewIconSize
+}
+
+export const MediaCard = styled(Card)<MediaCardProps>`
+  width: ${(props) => (props.$size === 'small' ? '35px' : '41px')};
+  height: ${(props) => (props.$size === 'small' ? '35px' : '41px')};
 
   svg {
     width: 100%;
@@ -20,6 +25,22 @@ export const MediaCard = styled(Card)`
   }
 `
 
+export const WorkspacePreviewIcon = ({
+  icon,
+  size = 'small',
+}: {
+  icon: React.ComponentType | React.ReactNode
+  size: PreviewIconSize
+}) => {
+  const iconComponent = useMemo(() => createIcon(icon), [icon])
+
+  return (
+    <MediaCard radius={2} tone="transparent" $size={size}>
+      {iconComponent}
+    </MediaCard>
+  )
+}
+
 const createIcon = (icon: React.ComponentType | React.ReactNode) => {
   if (isValidElementType(icon)) return createElement(icon)
   if (isValidElement(icon)) return icon
@@ -38,14 +59,11 @@ export interface WorkspacePreviewProps {
 export function WorkspacePreview(props: WorkspacePreviewProps) {
   const {state, subtitle, selected, title, icon, iconRight} = props
 
-  const iconComponent = useMemo(() => createIcon(icon), [icon])
   const iconRightComponent = useMemo(() => createIcon(iconRight), [iconRight])
 
   return (
     <Flex align="center" flex="none" gap={3}>
-      <MediaCard radius={2} tone="transparent">
-        {iconComponent}
-      </MediaCard>
+      <WorkspacePreviewIcon icon={icon} size="small" />
 
       <Stack flex={1} space={2}>
         <Text textOverflow="ellipsis" weight="medium">