pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-03-05 10:16:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

💄 button for mark as read

Browse Source
This commit is contained in:
Fred KISSIE
2025-11-06 23:26:13 +01:00
parent a62299c387
commit 45fb0a4156
1 changed files with 40 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/ProductUpdates.tsx
View File

@@ -8,6 +8,7 @@ import { useQueries } from "@tanstack/react-query";
import { import {
ArrowRight, ArrowRight,
BellIcon, BellIcon,
CheckIcon,
ChevronRightIcon, ChevronRightIcon,
RocketIcon, RocketIcon,
XIcon XIcon
@@ -19,6 +20,12 @@ import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
import { Button } from "./ui/button"; import { Button } from "./ui/button";
import { Badge } from "./ui/badge"; import { Badge } from "./ui/badge";
import { timeAgoFormatter } from "@app/lib/timeAgoFormatter"; import { timeAgoFormatter } from "@app/lib/timeAgoFormatter";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger
} from "./ui/tooltip";
export default function ProductUpdates({ export default function ProductUpdates({
isCollapsed isCollapsed
@@ -164,25 +171,51 @@ function ProductUpdatesListPopup({
<PopoverContent <PopoverContent
side="right" side="right"
align="end" align="end"
className="p-0 flex flex-col w-80" sideOffset={10}
className="p-0 flex flex-col w-85"
> >
<div className="p-3 flex justify-between border-b items-center"> <div className="p-3 flex justify-between border-b items-center">
<span className="text-sm inline-flex gap-2 items-center font-medium"> <span className="text-sm inline-flex gap-2 items-center font-medium">
{t("productUpdateTitle")} {t("productUpdateTitle")}
<Badge variant="secondary">{updates.length}</Badge> <Badge variant="secondary">{updates.length}</Badge>
</span> </span>
<Button variant="ghost">{t("dismissAll")}</Button> <Button variant="outline">{t("dismissAll")}</Button>
</div> </div>
<ol className="p-3 flex flex-col gap-1 max-h-112 overflow-y-auto"> <ol className="p-3 flex flex-col gap-1 max-h-112 overflow-y-auto">
{updates.map((update) => ( {updates.map((update) => (
<li <li
key={update.id} key={update.id}
className="border rounded-md flex flex-col p-4 gap-2" className="border rounded-md flex flex-col p-4 gap-2.5 group hover:bg-accent relative"
> >
<h4 className="text-sm font-medium inline-flex items-start gap-1"> <div className="flex justify-between gap-2 items-start">
<span>{update.title}</span> <h4 className="text-sm font-medium inline-flex items-start gap-1">
<Badge variant="secondary">New</Badge> <span>{update.title}</span>
</h4> <Badge
variant="secondary"
className="bg-black text-white dark:bg-white dark:text-black"
>
New
</Badge>
</h4>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="outline"
className="p-1 py-1 opacity-100 h-auto group-hover:opacity-100"
>
<CheckIcon className="flex-none size-4" />
</Button>
</TooltipTrigger>
<TooltipContent
side="right"
sideOffset={8}
>
Mark as read
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<small className="text-muted-foreground"> <small className="text-muted-foreground">
{update.contents} {update.contents}
</small> </small>