coder · BrunoQuaresma · Mar 12, 2025 · Mar 5, 2025 · Mar 5, 2025 · Mar 11, 2025
diff --git a/site/package.json b/site/package.json
@@ -56,6 +56,7 @@
 		"@radix-ui/react-dropdown-menu": "2.1.4",
 		"@radix-ui/react-label": "2.1.0",
 		"@radix-ui/react-popover": "1.1.5",
+		"@radix-ui/react-scroll-area": "1.2.3",
 		"@radix-ui/react-select": "2.1.4",
 		"@radix-ui/react-slider": "1.2.2",
 		"@radix-ui/react-slot": "1.1.1",

diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
diff --git a/site/src/components/Button/Button.tsx b/site/src/components/Button/Button.tsx
@@ -31,6 +31,7 @@ export const buttonVariants = cva(
 				lg: "min-w-20 h-10 px-3 py-2 [&_svg]:size-icon-lg",
 				sm: "min-w-20 h-8 px-2 py-1.5 text-xs [&_svg]:size-icon-sm",
 				icon: "size-8 px-1.5 [&_svg]:size-icon-sm",
+				"icon-lg": "size-10 px-2 [&_svg]:size-icon-lg",
 			},
 		},
 		defaultVariants: {

diff --git a/site/src/components/ScrollArea/ScrollArea.tsx b/site/src/components/ScrollArea/ScrollArea.tsx
@@ -0,0 +1,46 @@
+/**
+ * Copied from shadc/ui on 03/05/2025
+ * @see {@link https://ui.shadcn.com/docs/components/scroll-area}
+ */
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import * as React from "react";
+import { cn } from "utils/cn";
+
+export const ScrollArea = React.forwardRef<
+	React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+	<ScrollAreaPrimitive.Root
+		ref={ref}
+		className={cn("relative overflow-hidden", className)}
+		{...props}
+	>
+		<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+			{children}
+		</ScrollAreaPrimitive.Viewport>
+		<ScrollBar />
+		<ScrollAreaPrimitive.Corner />
+	</ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+export const ScrollBar = React.forwardRef<
+	React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+	React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+	<ScrollAreaPrimitive.ScrollAreaScrollbar
+		ref={ref}
+		orientation={orientation}
+		className={cn(
+			"border-0 border-solid border-border flex touch-none select-none transition-colors",
+			orientation === "vertical" &&
+				"h-full w-2.5 border-l border-l-transparent p-[1px]",
+			orientation === "horizontal" &&
+				"h-2.5 flex-col border-t border-t-transparent p-[1px]",
+			className,
+		)}
+		{...props}
+	>
+		<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+	</ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
diff --git a/site/src/modules/notifications/NotificationsInbox/InboxButton.stories.tsx b/site/src/modules/notifications/NotificationsInbox/InboxButton.stories.tsx
@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { InboxButton } from "./InboxButton";
+
+const meta: Meta<typeof InboxButton> = {
+	title: "modules/notifications/NotificationsInbox/InboxButton",
+	component: InboxButton,
+};
+
+export default meta;
+type Story = StoryObj<typeof InboxButton>;
+
+export const AllRead: Story = {};
+
+export const Unread: Story = {
+	args: {
+		unreadCount: 3,
+	},
+};
diff --git a/site/src/modules/notifications/NotificationsInbox/InboxButton.tsx b/site/src/modules/notifications/NotificationsInbox/InboxButton.tsx
@@ -0,0 +1,30 @@
+import { Button, type ButtonProps } from "components/Button/Button";
+import { BellIcon } from "lucide-react";
+import { type FC, forwardRef } from "react";
+import { UnreadBadge } from "./UnreadBadge";
+
+type InboxButtonProps = {
+	unreadCount: number;
+} & ButtonProps;
+
+export const InboxButton = forwardRef<HTMLButtonElement, InboxButtonProps>(
+	({ unreadCount, ...props }, ref) => {
+		return (
+			<Button
+				size="icon-lg"
+				variant="outline"
+				className="relative"
+				ref={ref}
+				{...props}
+			>
+				<BellIcon />
+				{unreadCount > 0 && (
+					<UnreadBadge
+						count={unreadCount}
+						className="absolute top-0 right-0 -translate-y-1/2 translate-x-1/2"
+					/>
+				)}
+			</Button>
+		);
+	},
+);
diff --git a/site/src/modules/notifications/NotificationsInbox/InboxItem.stories.tsx b/site/src/modules/notifications/NotificationsInbox/InboxItem.stories.tsx
@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, fn, userEvent, within } from "@storybook/test";
+import { MockNotification } from "testHelpers/entities";
+import { InboxItem } from "./InboxItem";
+
+const meta: Meta<typeof InboxItem> = {
+	title: "modules/notifications/NotificationsInbox/InboxItem",
+	component: InboxItem,
+	render: (args) => {
+		return (
+			<div className="max-w-[460px] border-solid border-border rounded">
+				<InboxItem {...args} />
+			</div>
+		);
+	},
+};
+
+export default meta;
+type Story = StoryObj<typeof InboxItem>;
+
+export const Read: Story = {
+	args: {
+		notification: {
+			...MockNotification,
+			read_status: "read",
+		},
+	},
+};
+
+export const Unread: Story = {
+	args: {
+		notification: {
+			...MockNotification,
+			read_status: "unread",
+		},
+	},
+};
+
+export const UnreadFocus: Story = {
+	args: {
+		notification: {
+			...MockNotification,
+			read_status: "unread",
+		},
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const notification = canvas.getByRole("menuitem");
+		await userEvent.click(notification);
+	},
+};
+
+export const OnMarkNotificationAsRead: Story = {
+	args: {
+		notification: {
+			...MockNotification,
+			read_status: "unread",
+		},
+		onMarkNotificationAsRead: fn(),
+	},
+	play: async ({ canvasElement, args }) => {
+		const canvas = within(canvasElement);
+		const notification = canvas.getByRole("menuitem");
+		await userEvent.click(notification);
+		const markButton = canvas.getByRole("button", { name: /mark as read/i });
+		await userEvent.click(markButton);
+		await expect(args.onMarkNotificationAsRead).toHaveBeenCalledTimes(1);
+		await expect(args.onMarkNotificationAsRead).toHaveBeenCalledWith(
+			args.notification.id,
+		);
+	},
+	parameters: {
+		chromatic: {
+			disableSnapshot: true,
+		},
+	},
+};
diff --git a/site/src/modules/notifications/NotificationsInbox/InboxItem.tsx b/site/src/modules/notifications/NotificationsInbox/InboxItem.tsx
@@ -0,0 +1,68 @@
+import { Avatar } from "components/Avatar/Avatar";
+import { Button } from "components/Button/Button";
+import { SquareCheckBig } from "lucide-react";
+import type { FC } from "react";
+import { Link as RouterLink } from "react-router-dom";
+import { relativeTime } from "utils/time";
+import type { Notification } from "./types";
+
+type InboxItemProps = {
+	notification: Notification;
+	onMarkNotificationAsRead: (notificationId: string) => void;
+};
+
+export const InboxItem: FC<InboxItemProps> = ({
+	notification,
+	onMarkNotificationAsRead,
+}) => {
+	return (
+		<div
+			className="flex items-stretch gap-3 p-3 group"
+			role="menuitem"
+			tabIndex={-1}
+		>
+			<div className="flex-shrink-0">
+				<Avatar fallback="AR" />
+			</div>
+
+			<div className="flex flex-col gap-3">
+				<span className="text-content-secondary text-sm font-medium">
+					{notification.content}
+				</span>
+				<div className="flex items-center gap-1">
+					{notification.actions.map((action) => {
+						return (
+							<Button variant="outline" size="sm" key={action.label} asChild>
+								<RouterLink to={action.url}>{action.label}</RouterLink>
+							</Button>
+						);
+					})}
+				</div>
+			</div>
+
+			<div className="w-12 flex flex-col items-end flex-shrink-0">
+				{notification.read_status === "unread" && (
+					<>
+						<div className="group-focus:hidden group-hover:hidden size-2.5 rounded-full bg-highlight-sky">
+							<span className="sr-only">Unread</span>
+						</div>
+
+						<Button
+							onClick={() => onMarkNotificationAsRead(notification.id)}
+							className="hidden group-focus:flex group-hover:flex bg-surface-primary"
+							variant="outline"
+							size="sm"
+						>
+							<SquareCheckBig />
+							mark as read
+						</Button>
+					</>
+				)}
+
+				<span className="mt-auto text-content-secondary text-xs font-medium whitespace-nowrap">
+					{relativeTime(new Date(notification.created_at))}
+				</span>
+			</div>
+		</div>
+	);
+};