Add "Public" badge to Spot Chat header + clearer privacy note

Makes it unmistakable that Spot Chat messages are public and unencrypted:
- Amber "🌐 Public" badge next to the title with an explanatory tooltip
- Footer note reworded to point users to Direct Messages for private chats

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
This commit is contained in:
shakespeare.diy 2026-07-24 15:12:39 +07:00
parent cf514a7c3f
commit e122ee826b

View file

@ -2,7 +2,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
import { formatDistanceToNowStrict } from 'date-fns'; import { formatDistanceToNowStrict } from 'date-fns';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { nip19 } from 'nostr-tools'; import { nip19 } from 'nostr-tools';
import { MessageCircle, Send, Radio, Info } from 'lucide-react'; import { MessageCircle, Send, Radio, Info, Globe } from 'lucide-react';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
@ -210,6 +210,14 @@ export function SpotChat({
<CardTitle className="text-lg flex items-center gap-2"> <CardTitle className="text-lg flex items-center gap-2">
<MessageCircle className="h-5 w-5 text-orange-500" /> <MessageCircle className="h-5 w-5 text-orange-500" />
Spot Chat Spot Chat
<Badge
variant="outline"
className="gap-1 border-amber-500/40 bg-amber-500/10 text-amber-600 dark:text-amber-400 text-[10px] font-bold uppercase tracking-wide"
title="Anyone can read messages in this channel — it is public and unencrypted."
>
<Globe className="h-3 w-3" />
Public
</Badge>
</CardTitle> </CardTitle>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<TrustFilter value={trustLevel} onChange={setTrustLevel} compact /> <TrustFilter value={trustLevel} onChange={setTrustLevel} compact />
@ -294,8 +302,9 @@ export function SpotChat({
</Button> </Button>
</form> </form>
<p className="mt-1.5 flex items-center gap-1 text-[10px] text-muted-foreground"> <p className="mt-1.5 flex items-center gap-1 text-[10px] text-muted-foreground">
<Info className="h-3 w-3" /> <Info className="h-3 w-3 shrink-0" />
Public &amp; ephemeral — this is here-and-now chat, not stored forever. Anyone can read this — messages are public &amp; ephemeral. For private
chats, use Direct Messages.
</p> </p>
</> </>
) : ( ) : (