feat(core): show name tooltip for calendar event icon (#12362)

packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/journal/calendar-events.css.ts

@@ -1,3 +1,4 @@
+import { cssVar } from '@toeverything/theme';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { createVar, style } from '@vanilla-extract/css';
 
@@ -69,3 +70,35 @@ export const eventNewDoc = style({
     },
   },
 });
+
+export const nameTooltip = style({
+  backgroundColor: cssVarV2.layer.background.overlayPanel,
+  padding: '8px 6px',
+  boxShadow: cssVar('overlayPanelShadow'),
+});
+export const nameTooltipContent = style({
+  display: 'flex',
+  gap: 8,
+  paddingRight: 8,
+  alignItems: 'center',
+});
+export const nameTooltipIcon = style({
+  width: 24,
+  height: 24,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  ':before': {
+    content: '',
+    width: 14,
+    height: 14,
+    borderRadius: 7,
+    backgroundColor: 'currentColor',
+    display: 'block',
+  },
+});
+export const nameTooltipName = style({
+  fontSize: 14,
+  lineHeight: '22px',
+  color: cssVarV2.text.primary,
+});

packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/journal/calendar-events.tsx

@@ -1,4 +1,4 @@
-import { Loading, toast } from '@affine/component';
+import { Loading, toast, Tooltip } from '@affine/component';
 import { usePageHelper } from '@affine/core/blocksuite/block-suite-page-list/utils';
 import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks';
 import { DocsService } from '@affine/core/modules/doc';
@@ -70,6 +70,7 @@ const CalendarEventRenderer = ({ event }: { event: CalendarEvent }) => {
   const config = useLiveData(
     useMemo(() => subscription?.config$, [subscription?.config$])
   );
+  const name = useLiveData(subscription?.name$) || t['Untitled']();
   const color = config?.color || cssVarV2.button.primary;
 
   const handleClick = useAsyncCallback(async () => {
@@ -116,9 +117,25 @@ const CalendarEventRenderer = ({ event }: { event: CalendarEvent }) => {
       data-all-day={allDay}
       onClick={handleClick}
     >
-      <div className={styles.eventIcon}>
+      <Tooltip
-        {allDay ? <FullDayIcon /> : <PeriodIcon />}
+        align="start"
-      </div>
+        side="top"
+        options={{
+          className: styles.nameTooltip,
+          sideOffset: 12,
+          alignOffset: -4,
+        }}
+        content={
+          <div className={styles.nameTooltipContent}>
+            <div className={styles.nameTooltipIcon} style={{ color }} />
+            <div className={styles.nameTooltipName}>{name}</div>
+          </div>
+        }
+      >
+        <div className={styles.eventIcon}>
+          {allDay ? <FullDayIcon /> : <PeriodIcon />}
+        </div>
+      </Tooltip>
       <div className={styles.eventTitle}>{title}</div>
       {loading ? (
         <Loading />