Add Crew Chat: private E2E-encrypted group chat for crew members

Built on the existing NIP-17 gift-wrapped group DM system (useGroupConversation
+ useSendDirectMessage), so the relay only ever sees encrypted blobs.

- New CrewChat component: message list w/ author profiles, composer
  (Enter to send), auto-scroll, skeleton/empty states
- Participants = founder + all listed members (deduped)
- Only crew members can read/write (others see a locked "ask to join" state);
  warns if the signer lacks NIP-44
- "Private" lock badge makes the E2E-encrypted nature unmistakable
- Surfaced as a card on the crew detail page under the Crew Feed

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>

src/components/CrewChat.tsx

@@ -0,0 +1,244 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { nip19 } from 'nostr-tools';
+import { formatDistanceToNow } from 'date-fns';
+import { Lock, Send, Loader2, ShieldCheck, MessageSquare } from 'lucide-react';
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+import { Skeleton } from '@/components/ui/skeleton';
+
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useAuthor } from '@/hooks/useAuthor';
+import { useToast } from '@/hooks/useToast';
+import {
+  useGroupConversation,
+  useSendDirectMessage,
+  type DirectMessage,
+} from '@/hooks/useDirectMessages';
+import { genUserName } from '@/lib/genUserName';
+import { cn } from '@/lib/utils';
+
+interface CrewChatProps {
+  crewName: string;
+  /** The crew founder pubkey. */
+  founderPubkey: string;
+  /** All listed member pubkeys (hex). */
+  members: string[];
+}
+
+/** One message bubble, resolving the author's profile. */
+function CrewMessageBubble({
+  message,
+  isOwn,
+}: {
+  message: DirectMessage;
+  isOwn: boolean;
+}) {
+  const author = useAuthor(message.pubkey);
+  const meta = author.data?.metadata;
+  const name = meta?.name ?? genUserName(message.pubkey);
+  const npub = useMemo(() => nip19.npubEncode(message.pubkey), [message.pubkey]);
+  const timeAgo = formatDistanceToNow(new Date(message.createdAt * 1000), { addSuffix: true });
+
+  return (
+    <div className={cn('flex gap-2.5', isOwn && 'flex-row-reverse')}>
+      <Link to={`/${npub}`} className="shrink-0">
+        <Avatar className="h-8 w-8">
+          <AvatarImage src={meta?.picture} alt={name} />
+          <AvatarFallback className="text-xs bg-teal-900/40 text-teal-300">
+            {name.slice(0, 2).toUpperCase()}
+          </AvatarFallback>
+        </Avatar>
+      </Link>
+      <div className={cn('flex max-w-[78%] flex-col gap-0.5', isOwn && 'items-end')}>
+        <div className={cn('flex items-baseline gap-2', isOwn && 'flex-row-reverse')}>
+          <Link to={`/${npub}`} className="text-xs font-semibold hover:underline truncate max-w-[10rem]">
+            {name}
+          </Link>
+          <span className="text-[10px] text-muted-foreground shrink-0">{timeAgo}</span>
+        </div>
+        <div
+          className={cn(
+            'rounded-2xl px-3 py-2 text-sm break-words whitespace-pre-wrap',
+            isOwn ? 'bg-teal-500 text-black rounded-tr-sm' : 'bg-muted rounded-tl-sm',
+          )}
+        >
+          {message.content}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function CrewChat({ crewName, founderPubkey, members }: CrewChatProps) {
+  const { user } = useCurrentUser();
+  const { toast } = useToast();
+  const [draft, setDraft] = useState('');
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  // The chat participants = founder + all listed members (deduped).
+  const participants = useMemo(
+    () => Array.from(new Set([founderPubkey, ...members])),
+    [founderPubkey, members],
+  );
+
+  // Only crew members (founder or a listed member) can read/write the chat,
+  // because NIP-17 group messages are end-to-end encrypted to the participants.
+  const isMember = !!user && participants.includes(user.pubkey);
+
+  const { data: messages, isLoading } = useGroupConversation(isMember ? participants : []);
+  const { mutateAsync: sendMessage, isPending } = useSendDirectMessage();
+
+  // Auto-scroll to newest message when the list grows.
+  const lastCount = useRef(0);
+  useEffect(() => {
+    const count = messages?.length ?? 0;
+    if (count !== lastCount.current) {
+      lastCount.current = count;
+      scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: 'smooth' });
+    }
+  }, [messages]);
+
+  const canSendNip44 = !!user?.signer?.nip44;
+
+  const handleSend = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const text = draft.trim();
+    if (!text || !user) return;
+
+    if (!canSendNip44) {
+      toast({
+        title: 'Encryption unavailable',
+        description: 'Your signer does not support NIP-44 encryption. Please upgrade your extension.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    // Recipients = everyone except yourself (the hook also wraps a copy to self).
+    const recipients = participants.filter((p) => p !== user.pubkey);
+    if (recipients.length === 0) {
+      toast({
+        title: 'No one to message yet',
+        description: 'This crew has no other members to chat with.',
+      });
+      return;
+    }
+
+    try {
+      await sendMessage({
+        recipients,
+        content: text,
+        subject: `${crewName} crew chat`,
+      });
+      setDraft('');
+    } catch (err) {
+      toast({
+        title: 'Message failed',
+        description: err instanceof Error ? err.message : 'Could not send message.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <Card className="bg-black/90 border-2 border-teal-500/20 flex flex-col overflow-hidden">
+      <CardHeader className="pb-3 border-b border-white/5">
+        <div className="flex items-center justify-between gap-3">
+          <CardTitle className="flex items-center gap-2 text-lg font-black uppercase text-white">
+            <MessageSquare className="h-5 w-5 text-teal-400" /> Crew Chat
+          </CardTitle>
+          <Badge
+            variant="outline"
+            className="gap-1 border-teal-500/40 bg-teal-500/10 text-teal-400 text-[10px] font-bold uppercase tracking-wide"
+            title="End-to-end encrypted — only crew members can read these messages."
+          >
+            <Lock className="h-3 w-3" />
+            Private
+          </Badge>
+        </div>
+        <p className="text-xs text-muted-foreground flex items-center gap-1 pt-0.5">
+          <ShieldCheck className="h-3 w-3 text-teal-400 shrink-0" />
+          Encrypted group chat for the founder &amp; all listed crew members.
+        </p>
+      </CardHeader>
+
+      <CardContent className="p-0 flex flex-col flex-1 min-h-0">
+        {!user ? (
+          <div className="flex flex-col items-center justify-center gap-2 py-10 px-6 text-center">
+            <Lock className="h-8 w-8 text-teal-400/40" />
+            <p className="text-sm text-muted-foreground">Log in to see if you can join the crew chat.</p>
+          </div>
+        ) : !isMember ? (
+          <div className="flex flex-col items-center justify-center gap-2 py-10 px-6 text-center">
+            <Lock className="h-8 w-8 text-teal-400/40" />
+            <p className="text-sm text-muted-foreground max-w-xs">
+              This chat is private to crew members. Ask the founder to add you to the crew to join
+              the conversation.
+            </p>
+          </div>
+        ) : (
+          <>
+            <div
+              ref={scrollRef}
+              className="flex-1 overflow-y-auto px-4 py-3 space-y-3 min-h-[280px] max-h-[440px]"
+            >
+              {isLoading &&
+                Array.from({ length: 3 }).map((_, i) => (
+                  <div key={i} className="flex gap-2.5">
+                    <Skeleton className="h-8 w-8 rounded-full" />
+                    <div className="space-y-1.5">
+                      <Skeleton className="h-3 w-24" />
+                      <Skeleton className="h-8 w-40 rounded-2xl" />
+                    </div>
+                  </div>
+                ))}
+              {!isLoading && (!messages || messages.length === 0) && (
+                <div className="flex h-full flex-col items-center justify-center text-center gap-2 py-8">
+                  <MessageSquare className="h-8 w-8 text-muted-foreground/40" />
+                  <p className="text-sm text-muted-foreground max-w-[16rem]">
+                    No messages yet. Kick off the crew chat — plan a session, share a spot, hype a clip.
+                  </p>
+                </div>
+              )}
+              {messages?.map((m) => (
+                <CrewMessageBubble key={m.id} message={m} isOwn={m.pubkey === user.pubkey} />
+              ))}
+            </div>
+
+            <div className="border-t border-white/5 p-3">
+              <form onSubmit={handleSend} className="flex items-end gap-2">
+                <Textarea
+                  value={draft}
+                  onChange={(e) => setDraft(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' && !e.shiftKey) {
+                      e.preventDefault();
+                      handleSend(e);
+                    }
+                  }}
+                  placeholder="Message your crew…"
+                  maxLength={2000}
+                  rows={1}
+                  className="flex-1 resize-none min-h-[40px] max-h-32"
+                />
+                <Button
+                  type="submit"
+                  size="icon"
+                  disabled={isPending || !draft.trim()}
+                  className="bg-teal-500 hover:bg-teal-600 text-black shrink-0"
+                >
+                  {isPending ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
+                </Button>
+              </form>
+            </div>
+          </>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

src/pages/CrewDetailPage.tsx

@@ -11,6 +11,7 @@ import { ZapButton } from '@/components/ZapButton';
 import { ZapCrewDialog } from '@/components/ZapCrewDialog';
 import { ClinkPayButton } from '@/components/ClinkPayButton';
 import { CollectiveMembers } from '@/components/CollectiveMembers';
+import { CrewChat } from '@/components/CrewChat';
 import { ConfirmMembershipCard } from '@/components/ConfirmMembershipCard';
 import { LinkedLabCard } from '@/components/CrossLinkCards';
 import { useCollectiveMembers } from '@/hooks/useCollectiveMembers';
@@ -216,6 +217,13 @@ export default function CrewDetailPage() {
                 )}
               </CardContent>
             </Card>
+
+            {/* Crew Chat — private E2E-encrypted group chat for members */}
+            <CrewChat
+              crewName={crew.name}
+              founderPubkey={crew.pubkey}
+              members={crew.members}
+            />
           </div>
 
           {/* Sidebar */}