Skip to content

fix(desktop): align sidebar unread pills #1138

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
thomaspblock merged 5 commits into from
Jun 19, 2026
Merged

fix(desktop): align sidebar unread pills #1138

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bd4f8ba
fix(desktop): lower sidebar unread overflow pill
thomaspblock Jun 19, 2026
d944732
fix(desktop): align unread pill styling
thomaspblock Jun 19, 2026
96f9323
fix(desktop): align sidebar unread pill with footer
thomaspblock Jun 19, 2026
2d1bf44
fix(desktop): anchor sidebar unread pill to footer
thomaspblock Jun 19, 2026
df29c39
Merge origin/main into sidebar unread pill fix
thomaspblock Jun 19, 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
123 changes: 58 additions & 65 deletions desktop/src/features/sidebar/ui/AppSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,15 +229,6 @@ export function AppSidebar({
React.useState(false);
const showSidebarUpdateCard =
canShowSidebarUpdateCard && !isSidebarUpdateCardDismissed;
const sidebarFooterCardCount =
(sidebarRelayConnectionCard.showSidebarRelayConnectionCard ? 1 : 0) +
(showSidebarUpdateCard ? 1 : 0);
const unreadBelowBottomClass =
sidebarFooterCardCount >= 2
? "bottom-56"
: sidebarFooterCardCount >= 1
? "bottom-44"
: "bottom-24";
const [isNewDmOpenInternal, setIsNewDmOpenInternal] = React.useState(false);
const isNewDmOpen = isNewDmOpenProp ?? isNewDmOpenInternal;
const setIsNewDmOpen = onNewDmOpenChange ?? setIsNewDmOpenInternal;
Expand Down Expand Up @@ -776,64 +767,66 @@ export function AppSidebar({
) : null}
</SidebarContent>

{unreadBelowCount > 0 ? (
<MoreUnreadButton
bottomClassName={unreadBelowBottomClass}
count={unreadBelowCount}
onClick={scrollToNextBelow}
position="bottom"
testId="sidebar-more-unread-below"
/>
) : null}
<div className="relative z-30 shrink-0">
{unreadBelowCount > 0 ? (
<MoreUnreadButton
bottomClassName="bottom-full"
count={unreadBelowCount}
onClick={scrollToNextBelow}
position="bottom"
testId="sidebar-more-unread-below"
/>
) : null}

<SidebarFooter className="z-30 shrink-0 bg-sidebar/55 backdrop-blur-xl supports-[backdrop-filter]:bg-sidebar/45 dark:bg-sidebar/45 dark:supports-[backdrop-filter]:bg-sidebar/35">
<AnimatePresence>
{sidebarRelayConnectionCard.showSidebarRelayConnectionCard ? (
<SidebarRelayConnectionCard
className="mb-2 group-data-[collapsible=icon]:hidden"
isConnected={
sidebarRelayConnectionCard.isRelayConnectionSuccess
}
isReconnectPending={
sidebarRelayConnectionCard.isRelayReconnectPending
}
onDismiss={
sidebarRelayConnectionCard.onDismissRelayConnectionCard
}
onReconnect={sidebarRelayConnectionCard.onReconnectRelay}
key="sidebar-relay-connection-card"
/>
<SidebarFooter className="bg-sidebar/55 backdrop-blur-xl supports-[backdrop-filter]:bg-sidebar/45 dark:bg-sidebar/45 dark:supports-[backdrop-filter]:bg-sidebar/35">
<AnimatePresence>
{sidebarRelayConnectionCard.showSidebarRelayConnectionCard ? (
<SidebarRelayConnectionCard
className="mb-2 group-data-[collapsible=icon]:hidden"
isConnected={
sidebarRelayConnectionCard.isRelayConnectionSuccess
}
isReconnectPending={
sidebarRelayConnectionCard.isRelayReconnectPending
}
onDismiss={
sidebarRelayConnectionCard.onDismissRelayConnectionCard
}
onReconnect={sidebarRelayConnectionCard.onReconnectRelay}
key="sidebar-relay-connection-card"
/>
) : null}
</AnimatePresence>
{showSidebarUpdateCard ? (
<div className="mb-2 group-data-[collapsible=icon]:hidden">
<SidebarUpdateCard
onDismiss={() => setIsSidebarUpdateCardDismissed(true)}
/>
</div>
) : null}
</AnimatePresence>
{showSidebarUpdateCard ? (
<div className="mb-2 group-data-[collapsible=icon]:hidden">
<SidebarUpdateCard
onDismiss={() => setIsSidebarUpdateCardDismissed(true)}
/>
</div>
) : null}
<SidebarMenu>
<SidebarMenuItem>
<SidebarProfileCard
activeWorkspace={activeWorkspace}
isPresencePending={isPresencePending}
onOpenAddWorkspace={onOpenAddWorkspace}
onOpenSettings={onSelectSettings}
onRemoveWorkspace={onRemoveWorkspace}
onSetPresenceStatus={onSetPresenceStatus}
onSetUserStatus={onSetUserStatus}
onClearUserStatus={onClearUserStatus}
onSwitchWorkspace={onSwitchWorkspace}
onUpdateWorkspace={onUpdateWorkspace}
profile={profile}
resolvedDisplayName={resolvedDisplayName}
selfPresenceStatus={selfPresenceStatus}
selfUserStatus={selfUserStatus}
workspaces={workspaces}
/>
</SidebarMenuItem>
</SidebarMenu>
</SidebarFooter>
<SidebarMenu>
<SidebarMenuItem>
<SidebarProfileCard
activeWorkspace={activeWorkspace}
isPresencePending={isPresencePending}
onOpenAddWorkspace={onOpenAddWorkspace}
onOpenSettings={onSelectSettings}
onRemoveWorkspace={onRemoveWorkspace}
onSetPresenceStatus={onSetPresenceStatus}
onSetUserStatus={onSetUserStatus}
onClearUserStatus={onClearUserStatus}
onSwitchWorkspace={onSwitchWorkspace}
onUpdateWorkspace={onUpdateWorkspace}
profile={profile}
resolvedDisplayName={resolvedDisplayName}
selfPresenceStatus={selfPresenceStatus}
selfUserStatus={selfUserStatus}
workspaces={workspaces}
/>
</SidebarMenuItem>
</SidebarMenu>
</SidebarFooter>
</div>
</div>

<CreateChannelDialog
Expand Down
5 changes: 4 additions & 1 deletion desktop/src/features/sidebar/ui/MoreUnreadButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,12 @@ export function MoreUnreadButton({
position: "top" | "bottom";
testId: string;
}) {
const positionClassName =
position === "top" ? topChromeInset.top : bottomClassName;

return (
<div
className={`pointer-events-none absolute inset-x-0 z-10 flex justify-center py-1 ${position === "top" ? topChromeInset.top : bottomClassName}`}
className={`pointer-events-none absolute inset-x-0 z-10 flex justify-center py-1 ${positionClassName}`}
>
<UnreadPill
direction={position === "top" ? "up" : "down"}
Expand Down
2 changes: 1 addition & 1 deletion desktop/src/shared/ui/UnreadPill.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { ArrowDown, ArrowUp } from "lucide-react";
import { Button } from "@/shared/ui/button";

const UNREAD_PILL_CLASS =
"pointer-events-auto h-7 min-h-7 gap-1.5 rounded-full border-primary/40 bg-primary/10 px-2.5 text-2xs font-medium text-primary shadow-xs backdrop-blur-sm hover:bg-primary/20 [&_svg]:size-4";
"pointer-events-auto h-7 min-h-7 gap-1.5 rounded-full border-border/70 bg-background/95 px-2 py-1 text-2xs font-medium tracking-[0.02em] text-muted-foreground/70 shadow-xs backdrop-blur-sm hover:bg-muted/70 hover:text-foreground [&_svg]:size-4";

export function unreadCountLabel(count: number) {
return `${count} new message${count === 1 ? "" : "s"}`;
Expand Down