diff --git a/packages/ui/src/features/sidebar/components/SidebarItem.tsx b/packages/ui/src/features/sidebar/components/SidebarItem.tsx index de90cc6d33..b11117f09e 100644 --- a/packages/ui/src/features/sidebar/components/SidebarItem.tsx +++ b/packages/ui/src/features/sidebar/components/SidebarItem.tsx @@ -25,11 +25,19 @@ interface SidebarItemProps { onDoubleClick?: () => void; onContextMenu?: (e: React.MouseEvent) => void; action?: SidebarItemAction; + /** Hugs the label but never truncates with it; pushes endContent right. */ + badge?: React.ReactNode; endContent?: React.ReactNode; disabled?: boolean; } -function SidebarItemLabel({ label }: { label: React.ReactNode }) { +function SidebarItemLabel({ + label, + grow, +}: { + label: React.ReactNode; + grow: boolean; +}) { const canTooltip = typeof label === "string" || typeof label === "number"; const measureRef = useCallback((el: HTMLSpanElement | null) => { @@ -44,7 +52,7 @@ function SidebarItemLabel({ label }: { label: React.ReactNode }) { }, []); const span = ( - + {label} ); @@ -76,6 +84,7 @@ export function SidebarItem({ onClick, onDoubleClick, onContextMenu, + badge, endContent, disabled, }: SidebarItemProps) { @@ -108,7 +117,12 @@ export function SidebarItem({ ) : null} - + + {badge ? ( + + {badge} + + ) : null} {endContent} {subtitle ? ( diff --git a/packages/ui/src/features/sidebar/components/items/HomeItem.tsx b/packages/ui/src/features/sidebar/components/items/HomeItem.tsx index c8c2ccb8eb..8b9c66c9f5 100644 --- a/packages/ui/src/features/sidebar/components/items/HomeItem.tsx +++ b/packages/ui/src/features/sidebar/components/items/HomeItem.tsx @@ -27,9 +27,9 @@ export function HomeItem({ /> } + badge={Alpha} isActive={isActive} onClick={onClick} - endContent={Alpha} /> ); } diff --git a/packages/ui/src/features/sidebar/components/items/InboxItem.tsx b/packages/ui/src/features/sidebar/components/items/InboxItem.tsx index f05e183499..d99e9a78a1 100644 --- a/packages/ui/src/features/sidebar/components/items/InboxItem.tsx +++ b/packages/ui/src/features/sidebar/components/items/InboxItem.tsx @@ -41,14 +41,10 @@ export function InboxItem({ /> } + badge={Beta} isActive={isActive} onClick={onClick} - endContent={ - <> - Beta - - - } + endContent={} />