#509: Add Notification Bell and Notification Page#599
#509: Add Notification Bell and Notification Page#599
Conversation
BauZee
commented
Apr 13, 2026
BauZee
commented
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
aura-historia-staging | 8450330 | Commit Preview URL Branch Preview URL |
Apr 15 2026, 06:06 PM |
|
|
Note: I created a completely new branch based on the current develop branch to have a fresh, clean starting point, and moved my changes there. |
| {isLoginEnabled && user && ( | ||
| <div | ||
| className={cn( | ||
| isFloating ? "bg-card backdrop-blur-sm rounded-xl p-1 shadow-sm" : "", |
There was a problem hiding this comment.
No rounded corners please. Also bg color doesn't match to rest of the elements here
| {!seen && ( | ||
| <Tooltip> | ||
| <TooltipTrigger asChild> | ||
| <button |
There was a problem hiding this comment.
Why not use shadcn button here?
| <Tooltip> | ||
| <TooltipTrigger asChild> | ||
| <button | ||
| type="button" | ||
| aria-label={t("notifications.markRead")} | ||
| disabled={markAsSeen.isPending} | ||
| onClick={() => | ||
| markAsSeen.mutate(notification.originEventId) | ||
| } | ||
| className="shrink-0 rounded p-1 text-muted-foreground transition-colors hover:text-primary" | ||
| > | ||
| <Check className="size-3" /> | ||
| </button> | ||
| </TooltipTrigger> | ||
| <TooltipContent>{t("notifications.markRead")}</TooltipContent> | ||
| </Tooltip> | ||
| )} | ||
| <Tooltip> | ||
| <TooltipTrigger asChild> | ||
| <button | ||
| type="button" | ||
| aria-label={t("notifications.delete")} | ||
| disabled={deleteNotification.isPending} | ||
| onClick={() => | ||
| deleteNotification.mutate(notification.originEventId) | ||
| } | ||
| className="-mr-1 shrink-0 rounded p-1 text-muted-foreground transition-colors hover:text-destructive" | ||
| > | ||
| <Trash2 className="size-3" /> | ||
| </button> | ||
| </TooltipTrigger> | ||
| <TooltipContent>{t("notifications.delete")}</TooltipContent> | ||
| </Tooltip> |
There was a problem hiding this comment.
I'd suggest moving the tick and trash can buttons to the bottom right of the notificiation items. That way the top left isn't as crowded anymore.
Also I'd suggest using a single tick button for marking single notifications as read, double tick only for marking all notifications as read.
There was a problem hiding this comment.
I'd rather move the time down. That way, it'll be consistent with the notification page.
Although I didn't think it looked too cluttered when everything was in the top-right corner...
| {!seen && ( | ||
| <Tooltip> | ||
| <TooltipTrigger asChild> | ||
| <button |
There was a problem hiding this comment.
Why not use shadcn button here?
| import { NotificationResults } from "@/components/notification/NotificationResults.tsx"; | ||
| import { generatePageHeadMeta } from "@/lib/seo/pageHeadMeta.ts"; | ||
|
|
||
| export const Route = createFileRoute("/_auth/notifications")({ |
There was a problem hiding this comment.
Please also add the route to vite config, so we exclude it for prerendering. Maybe we should put all of the authenticated routes behind a proper route as well so we can just blacklist everything that comes under that?
Something like \_auth\me\notifications?
Then we can just exclude \me\
There was a problem hiding this comment.
I like that, I'll do it
2 participants
