diff --git a/src/components/PageComponents/Messages/MessageItem.tsx b/src/components/PageComponents/Messages/MessageItem.tsx index d90579e8..056002c4 100644 --- a/src/components/PageComponents/Messages/MessageItem.tsx +++ b/src/components/PageComponents/Messages/MessageItem.tsx @@ -87,14 +87,20 @@ export const MessageItem = ({ message }: MessageItemProps) => { }, [getNode, message.from]); const myNodeNum = useMemo(() => getMyNodeNum(), [getMyNodeNum]); - const { displayName, shortName } = useMemo(() => { + const { displayName, shortName, isFavorite } = useMemo(() => { const userIdHex = message.from.toString(16).toUpperCase().padStart(2, "0"); const last4 = userIdHex.slice(-4); const fallbackName = `Meshtastic ${last4}`; const longName = messageUser?.user?.longName; const derivedShortName = messageUser?.user?.shortName || fallbackName; const derivedDisplayName = longName || derivedShortName; - return { displayName: derivedDisplayName, shortName: derivedShortName }; + const isFavorite = messageUser?.num !== myNodeNum && + messageUser?.isFavorite; + return { + displayName: derivedDisplayName, + shortName: derivedShortName, + isFavorite: isFavorite, + }; }, [messageUser, message.from]); const messageStatusInfo = getMessageStatusInfo(message.state); @@ -140,7 +146,12 @@ export const MessageItem = ({ message }: MessageItemProps) => { return (
  • - +
    diff --git a/src/components/UI/Avatar.tsx b/src/components/UI/Avatar.tsx index a1a32186..7450e421 100644 --- a/src/components/UI/Avatar.tsx +++ b/src/components/UI/Avatar.tsx @@ -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; + showFavourite?: boolean; } class ColorUtils { @@ -62,6 +70,7 @@ export const Avatar = ({ text, size = "sm", showError = false, + showFavourite = false, className, }: AvatarProps) => { const sizes = { @@ -88,12 +97,43 @@ export const Avatar = ({ color: textColor, }} > + {showFavourite + ? ( + + + + + + Favourite + + + + + ) + : null} {showError ? ( -