Skip to content

fix(sidebar): Move Alpha and Beta badges next to labels #3456

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
charlesvien merged 2 commits into from
Jul 15, 2026
+20 −10
Merged

fix(sidebar): Move Alpha and Beta badges next to labels #3456

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8fa6352
move alpha and beta badges next to labels
charlesvien Jul 15, 2026
3c616ee
keep stage badges visible when labels truncate
charlesvien Jul 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 17 additions & 3 deletions packages/ui/src/features/sidebar/components/SidebarItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand All @@ -44,7 +52,7 @@ function SidebarItemLabel({ label }: { label: React.ReactNode }) {
}, []);

const span = (
<span ref={measureRef} className="min-w-0 flex-1 truncate">
<span ref={measureRef} className={cn("min-w-0 truncate", grow && "flex-1")}>
{label}
</span>
);
Expand Down Expand Up @@ -76,6 +84,7 @@ export function SidebarItem({
onClick,
onDoubleClick,
onContextMenu,
badge,
endContent,
disabled,
}: SidebarItemProps) {
Expand Down Expand Up @@ -108,7 +117,12 @@ export function SidebarItem({
) : null}
<span className="flex min-w-0 flex-1 flex-col">
<span className="flex min-h-[18px] items-center gap-1">
<SidebarItemLabel label={label} />
<SidebarItemLabel label={label} grow={!badge} />
{badge ? (
<span className="mr-auto ml-1 flex shrink-0 items-center">
{badge}
</span>
) : null}
{endContent}
</span>
{subtitle ? (
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/features/sidebar/components/items/HomeItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,9 @@ export function HomeItem({
/>
</>
}
badge={<Badge variant="info">Alpha</Badge>}
isActive={isActive}
onClick={onClick}
endContent={<Badge variant="info">Alpha</Badge>}
/>
);
}
8 changes: 2 additions & 6 deletions packages/ui/src/features/sidebar/components/items/InboxItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,14 +41,10 @@ export function InboxItem({
/>
</>
}
badge={<Badge variant="warning">Beta</Badge>}
isActive={isActive}
onClick={onClick}
endContent={
<>
<Badge variant="warning">Beta</Badge>
<SidebarKbdHint keys={SHORTCUTS.INBOX} />
</>
}
endContent={<SidebarKbdHint keys={SHORTCUTS.INBOX} />}
/>
</div>
</Tooltip>
Expand Down
Loading