From 39792f5d98ea6b82c799a07f27acf24015c9daac Mon Sep 17 00:00:00 2001
From: pedrobonamin <pedrobonamin@gmail.com>
Date: Fri, 6 Sep 2024 14:10:22 +0200
Subject: [PATCH] wip

---
 .../timeline/expandableTimelineItemMenu.tsx   | 35 ++++---------------
 .../panes/document/timeline/timelineItem.tsx  | 19 +++++++---
 2 files changed, 21 insertions(+), 33 deletions(-)

diff --git a/packages/sanity/src/structure/panes/document/timeline/expandableTimelineItemMenu.tsx b/packages/sanity/src/structure/panes/document/timeline/expandableTimelineItemMenu.tsx
index 45139114fde5..14e2d6524732 100644
--- a/packages/sanity/src/structure/panes/document/timeline/expandableTimelineItemMenu.tsx
+++ b/packages/sanity/src/structure/panes/document/timeline/expandableTimelineItemMenu.tsx
@@ -2,10 +2,11 @@ import {Menu, usePortal} from '@sanity/ui'
 import {type MouseEvent, useCallback} from 'react'
 import {ContextMenuButton, useTranslation} from 'sanity'
 
-import {MenuButton, MenuItem} from '../../../../ui-components'
+import {Button, MenuButton, MenuItem} from '../../../../ui-components'
 import {structureLocaleNamespace} from '../../../i18n'
 import {TIMELINE_LIST_WRAPPER_ID} from './timeline'
 import {TIMELINE_MENU_PORTAL} from './timelineMenu'
+import {ChevronDownIcon, LaunchIcon, LinkIcon} from '@sanity/icons'
 
 /**
  * This is a hack to force the scrollbar to not appear when the list is expanding,
@@ -56,33 +57,9 @@ export function ExpandableTimelineItemMenu({
   )
 
   return (
-    <MenuButton
-      id={`timeline-item-menu-button-${chunkId}`}
-      button={
-        <ContextMenuButton
-          aria-label={t('timeline-item.menu-button.aria-label')}
-          size="large"
-          tooltipProps={{content: t('timeline-item.menu-button.tooltip')}}
-        />
-      }
-      menu={
-        <Menu padding={1}>
-          <MenuItem
-            text={t(
-              isExpanded
-                ? 'timeline-item.menu.action-collapse'
-                : 'timeline-item.menu.action-expand',
-            )}
-            onClick={handleExpandClick}
-          />
-        </Menu>
-      }
-      popover={{
-        // when used inside the timeline menu we want to keep the element inside the popover, to avoid closing the popover when clicking expand.
-        portal: portalContext.elements?.[TIMELINE_MENU_PORTAL] ? TIMELINE_MENU_PORTAL : true,
-        placement: 'bottom-end',
-        fallbackPlacements: ['left', 'left-end', 'left-start'],
-      }}
-    />
+    <>
+      <Button icon={ChevronDownIcon} mode="bleed" />
+      <Button icon={LaunchIcon} mode="bleed" />
+    </>
   )
 }
diff --git a/packages/sanity/src/structure/panes/document/timeline/timelineItem.tsx b/packages/sanity/src/structure/panes/document/timeline/timelineItem.tsx
index 67042e285f9c..d41e795fd79a 100644
--- a/packages/sanity/src/structure/panes/document/timeline/timelineItem.tsx
+++ b/packages/sanity/src/structure/panes/document/timeline/timelineItem.tsx
@@ -1,4 +1,4 @@
-import {Card, Flex, Stack, Text} from '@sanity/ui'
+import {Badge, Box, Card, Flex, Stack, Text} from '@sanity/ui'
 // eslint-disable-next-line camelcase
 import {getTheme_v2, type ThemeColorAvatarColorKey} from '@sanity/ui/theme'
 import {createElement, type MouseEvent, useCallback, useMemo} from 'react'
@@ -59,6 +59,13 @@ const RELATIVE_TIME_OPTIONS: RelativeTimeOptions = {
   useTemporalPhrase: true,
 }
 
+const TextBadge = styled.span`
+  border-radius: 0.0625rem;
+  --card-bg-color: var(--card-badge-caution-bg-color);
+  --card-fg-color: var(--card-badge-caution-fg-color);
+  background-color: var(--card-bg-color);
+  cursor: default;
+`
 export function TimelineItem({
   chunk,
   isSelected,
@@ -116,9 +123,13 @@ export function TimelineItem({
             </IconBox>
           </div>
           <Stack space={2}>
-            <Text size={1} weight="medium">
-              {t(TIMELINE_ITEM_I18N_KEY_MAPPING[type]) || <code>{type}</code>}
-            </Text>
+            <Box as="p">
+              <Text size={1} weight="medium">
+                {t(TIMELINE_ITEM_I18N_KEY_MAPPING[type]) || <code>{type}</code>}{' '}
+                <TextBadge>Summer drop</TextBadge>
+              </Text>
+              {/* <Badge mode="outline" tone={'caution'} radius={1}></Badge> */}
+            </Box>
 
             <Text as="time" size={1} muted dateTime={timestamp} title={formattedTimestamp}>
               {updatedTimeAgo}