Feature: Node favourites (and ignores) (#618)

* Add favourite icon to node Avatar

* Favourites WIP

* Save isFavorite and isIgnored to device

* Fix spelling

* Clean up

* Always sort favorites first

* Add unread count to "Messages" top level menu

* Renaming, UI tweaks

* Add hook tests

* Handle undefined node better
This commit is contained in:
philon-
2025-05-13 08:45:24 -04:00
committed by GitHub
parent b2bb3baa01
commit 513a285fee
15 changed files with 699 additions and 256 deletions
+45 -5
View File
@@ -1,5 +1,12 @@
import { cn } from "@core/utils/cn.ts";
import { LockKeyholeOpenIcon } from "lucide-react";
import { LockKeyholeOpenIcon, StarIcon } from "lucide-react";
import {
Tooltip,
TooltipArrow,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@components/UI/Tooltip.tsx";
type RGBColor = {
r: number;
@@ -13,6 +20,7 @@ interface AvatarProps {
size?: "sm" | "lg";
className?: string;
showError?: boolean;
showFavorite?: boolean;
}
class ColorUtils {
@@ -62,6 +70,7 @@ export const Avatar = ({
text,
size = "sm",
showError = false,
showFavorite = false,
className,
}: AvatarProps) => {
const sizes = {
@@ -88,12 +97,43 @@ export const Avatar = ({
color: textColor,
}}
>
{showFavorite
? (
<TooltipProvider delayDuration={300}>
<Tooltip>
<TooltipTrigger asChild>
<StarIcon
className="absolute -top-0.5 -right-0.5 z-10 size-4 stroke-1 fill-yellow-400"
aria-hidden="true"
style={{
color: `rgb(${bgColor.r}, ${bgColor.g}, ${bgColor.b})`,
}}
/>
</TooltipTrigger>
<TooltipContent className="bg-slate-800 dark:bg-slate-600 text-white px-4 py-1 rounded text-xs">
Favorite
<TooltipArrow className="fill-slate-800 dark:fill-slate-600" />
</TooltipContent>
</Tooltip>
</TooltipProvider>
)
: null}
{showError
? (
<LockKeyholeOpenIcon
className="absolute bottom-0 right-0 z-10 size-4 text-red-500 stroke-3"
aria-hidden="true"
/>
<TooltipProvider delayDuration={300}>
<Tooltip>
<TooltipTrigger asChild>
<LockKeyholeOpenIcon
className="absolute -bottom-0.5 -right-0.5 z-10 size-4 text-red-500 stroke-3"
aria-hidden="true"
/>
</TooltipTrigger>
<TooltipContent className="bg-slate-800 dark:bg-slate-600 text-white px-4 py-1 rounded text-xs">
Node error
<TooltipArrow className="fill-slate-800 dark:fill-slate-600" />
</TooltipContent>
</Tooltip>
</TooltipProvider>
)
: null}
<p className="p-1">