synced/coder
1
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2025-07-21 01:28:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: make notifications header sticky (#17005)

Browse Source 
When having a bunch of notifications and the user is scrolling down the
content it is helpful to keep the header visible so the user can easily
mark all of them as read if they want to.
This commit is contained in:
Bruno Quaresma
2025-03-19 16:02:45 -03:00
committed by GitHub
parent c88d86bf50
commit 4ea5ef925f
2 changed files with 7 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
site/src/modules/notifications/NotificationsInbox/InboxPopover.stories.tsx
View File

@ -1,5 +1,5 @@
import type { Meta, StoryObj } from "@storybook/react";
import { expect, fn, userEvent, within } from "@storybook/test";
import { expect, fn, userEvent, waitFor, within } from "@storybook/test";
import { MockNotifications } from "testHelpers/entities";
import { InboxPopover } from "./InboxPopover";
@ -30,13 +30,6 @@ export const Default: Story = {
},
};
export const Scrollable: Story = {
args: {
unreadCount: 2,
notifications: MockNotifications,
},
};
export const Loading: Story = {
args: {
unreadCount: 0,

7
site/src/modules/notifications/NotificationsInbox/InboxPopover.tsx
View File

@ -47,7 +47,12 @@ export const InboxPopover: FC<InboxPopoverProps> = ({
* https://github.com/shadcn-ui/ui/issues/542#issuecomment-2339361283
*/}
<ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(var(--radix-popover-content-available-height)-24px)]">
<div className="flex items-center justify-between p-3 border-0 border-b border-solid border-border">
<div
className={cn([
"flex items-center justify-between p-3 border-0 border-b border-solid border-border",
"sticky top-0 bg-surface-primary z-10 rounded-t",
])}
>
<div className="flex items-center gap-2">
<span className="text-xl font-semibold">Inbox</span>
{unreadCount > 0 && <UnreadBadge count={unreadCount} />}