deepspace 0.3.10 → 0.4.0

package/features/messaging/src/components/chat/ThreadPanel.tsx

@@ -0,0 +1,107 @@
+/**
+ * ThreadPanel -- Side panel for threaded replies on a parent message.
+ * Renders the parent message preview, a scrollable reply list, and a composer.
+ */
+
+import { useEffect, useRef } from 'react'
+import { useMessages } from 'deepspace'
+import { useReactions } from 'deepspace'
+import { useUserLookup } from 'deepspace'
+import type { Message } from 'deepspace'
+import type { RecordData } from 'deepspace'
+import { MessageItem } from './MessageItem'
+import { MessageInput } from './MessageInput'
+
+interface ThreadPanelProps {
+  channelId: string
+  parentMessageId: string
+  onClose: () => void
+}
+
+export function ThreadPanel({ channelId, parentMessageId, onClose }: ThreadPanelProps) {
+  const { messages: allMessages } = useMessages(channelId)
+  const { messages: replies, send, edit, remove } = useMessages(channelId, {
+    parentMessageId,
+  })
+  const { getReactionsForMessage, toggle: toggleReaction } = useReactions(channelId)
+  const { getUser } = useUserLookup()
+  const bottomRef = useRef<HTMLDivElement>(null)
+
+  const parentMessage = allMessages.find(
+    (m: RecordData<Message>) => m.recordId === parentMessageId
+  )
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [replies.length])
+
+  const parentAuthor = parentMessage
+    ? getUser(parentMessage.data.authorId || parentMessage.createdBy)
+    : null
+
+  const parentTime = parentMessage
+    ? new Date(parentMessage.createdAt).toLocaleTimeString([], {
+        hour: 'numeric',
+        minute: '2-digit',
+      })
+    : ''
+
+  return (
+    <div
+      data-testid="thread-panel"
+      className="w-full md:w-80 md:border-l border-border flex flex-col h-full bg-card md:shrink-0"
+    >
+      <div className="shrink-0 h-12 border-b border-border px-4 flex items-center justify-between">
+        <h3 className="font-semibold text-sm text-foreground">Thread</h3>
+        <button
+          data-testid="close-thread-btn"
+          onClick={onClose}
+          className="p-1 rounded-md hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+        >
+          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+
+      {parentMessage && (
+        <div className="shrink-0 px-4 py-3 border-b border-border bg-muted/30">
+          <div className="flex items-baseline gap-2 mb-1">
+            <span className="font-semibold text-sm text-foreground">
+              {parentAuthor?.name ?? 'Unknown'}
+            </span>
+            <span className="text-xs text-muted-foreground">{parentTime}</span>
+          </div>
+          <p className="text-sm text-foreground/90 whitespace-pre-wrap break-words" data-testid="thread-parent-content">
+            {parentMessage.data.content}
+          </p>
+          <div className="mt-1.5 text-xs text-muted-foreground">
+            {replies.length} {replies.length === 1 ? 'reply' : 'replies'}
+          </div>
+        </div>
+      )}
+
+      <div className="flex-1 overflow-y-auto" data-testid="thread-replies">
+        {replies.map((msg: RecordData<Message>) => (
+          <MessageItem
+            key={msg.recordId}
+            message={msg}
+            reactions={getReactionsForMessage(msg.recordId)}
+            threadCount={0}
+            onToggleReaction={(emoji) => toggleReaction(msg.recordId, emoji)}
+            onOpenThread={() => {}}
+            onEdit={(newContent) => edit(msg.recordId, newContent)}
+            onDelete={() => remove(msg.recordId)}
+            isFirstInGroup
+          />
+        ))}
+        <div ref={bottomRef} />
+      </div>
+
+      <MessageInput
+        onSend={(content) => send(content, parentMessageId)}
+        placeholder="Reply..."
+      />
+    </div>
+  )
+}

package/features/messaging/src/components/chat/UserProfilePopover.tsx

@@ -0,0 +1,158 @@
+/**
+ * UserProfilePopover -- Click avatar/name to view a lightweight profile card.
+ * Positioned below the trigger by default, flips above if insufficient space.
+ */
+
+import { useState, useRef, useEffect, useCallback, type ReactNode } from 'react'
+import { useUserLookup } from 'deepspace'
+import { useUser } from 'deepspace'
+import { usePresence } from 'deepspace'
+
+interface UserProfilePopoverProps {
+  userId: string
+  children: ReactNode
+  onStartDM?: (userId: string) => void
+}
+
+function formatLastSeen(lastSeenAt: string | undefined): string {
+  if (!lastSeenAt) return 'Never seen'
+  const diff = Date.now() - new Date(lastSeenAt).getTime()
+  const minutes = Math.floor(diff / 60000)
+  if (minutes < 1) return 'Just now'
+  if (minutes < 60) return `${minutes}m ago`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours}h ago`
+  const days = Math.floor(hours / 24)
+  return `${days}d ago`
+}
+
+const POPOVER_HEIGHT_ESTIMATE = 180
+
+export function UserProfilePopover({ userId, children, onStartDM }: UserProfilePopoverProps) {
+  const { getUser } = useUserLookup()
+  const { user: currentUser } = useUser()
+  const { isOnline, users } = usePresence()
+  const [open, setOpen] = useState(false)
+  const [placement, setPlacement] = useState<'below' | 'above'>('below')
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const popoverRef = useRef<HTMLDivElement>(null)
+
+  const user = getUser(userId)
+  const roomUser = users.find((u) => u.id === userId)
+  const online = isOnline(userId)
+
+  const close = useCallback(() => setOpen(false), [])
+
+  const handleToggle = useCallback(() => {
+    setOpen((prev) => {
+      if (!prev && triggerRef.current) {
+        const rect = triggerRef.current.getBoundingClientRect()
+        const spaceBelow = window.innerHeight - rect.bottom
+        const inBottomHalf = rect.top > window.innerHeight / 2
+        setPlacement(
+          spaceBelow < POPOVER_HEIGHT_ESTIMATE || inBottomHalf ? 'above' : 'below'
+        )
+      }
+      return !prev
+    })
+  }, [])
+
+  useEffect(() => {
+    if (!open) return
+    function handleClickOutside(e: MouseEvent) {
+      if (
+        popoverRef.current && !popoverRef.current.contains(e.target as Node) &&
+        triggerRef.current && !triggerRef.current.contains(e.target as Node)
+      ) {
+        close()
+      }
+    }
+    function handleEscape(e: KeyboardEvent) {
+      if (e.key === 'Escape') close()
+    }
+    const timer = setTimeout(() => {
+      document.addEventListener('mousedown', handleClickOutside)
+      document.addEventListener('keydown', handleEscape)
+    }, 0)
+    return () => {
+      clearTimeout(timer)
+      document.removeEventListener('mousedown', handleClickOutside)
+      document.removeEventListener('keydown', handleEscape)
+    }
+  }, [open, close])
+
+  const positionClass = placement === 'above'
+    ? 'bottom-full mb-2 left-0'
+    : 'top-full mt-2 left-0'
+
+  return (
+    <span className="relative inline-flex">
+      <button
+        ref={triggerRef}
+        type="button"
+        onClick={handleToggle}
+        className="cursor-pointer text-left"
+      >
+        {children}
+      </button>
+
+      {open && user && (
+        <div
+          ref={popoverRef}
+          data-testid="user-profile-popover"
+          className={`absolute ${positionClass} z-50 w-60 bg-card border border-border rounded-lg shadow-lg p-4 animate-in fade-in zoom-in-95 duration-150`}
+        >
+          <div className="flex items-start gap-3">
+            <div className="relative shrink-0">
+              {user.imageUrl ? (
+                <img src={user.imageUrl} alt="" className="w-12 h-12 rounded-full" />
+              ) : (
+                <div className="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center text-base font-semibold text-primary">
+                  {(user.name ?? '?')[0]?.toUpperCase()}
+                </div>
+              )}
+              <span
+                className={`absolute bottom-0 right-0 w-3 h-3 rounded-full border-2 border-card ${
+                  online ? 'bg-success' : 'bg-muted-foreground/30'
+                }`}
+              />
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-semibold text-foreground truncate">{user.name ?? 'Unknown'}</p>
+              {roomUser?.role && (
+                <span className="inline-block mt-0.5 px-1.5 py-0.5 text-[10px] font-medium rounded bg-muted text-muted-foreground">
+                  {roomUser.role}
+                </span>
+              )}
+            </div>
+          </div>
+
+          <div className="mt-3 pt-3 border-t border-border space-y-1.5">
+            {roomUser?.email && (
+              <p className="text-xs text-muted-foreground truncate">{roomUser.email}</p>
+            )}
+            <p className="text-xs text-muted-foreground">
+              {online ? 'Online' : `Last seen ${formatLastSeen(roomUser?.lastSeenAt)}`}
+            </p>
+          </div>
+
+          {onStartDM && currentUser?.id !== userId && (
+            <button
+              data-testid={`dm-from-profile-${userId}`}
+              onClick={() => {
+                onStartDM(userId)
+                close()
+              }}
+              className="mt-3 w-full flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs font-medium bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors"
+            >
+              <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+              </svg>
+              Message
+            </button>
+          )}
+        </div>
+      )}
+    </span>
+  )
+}

package/features/messaging/src/components/chat-multi/AddMemberModal.tsx

@@ -0,0 +1,188 @@
+/**
+ * AddMemberModal -- Invite users to a private group.
+ * Creates invitation records (status: 'pending') that the invitee
+ * must accept before becoming a member. Filters out current members
+ * and users who already have a pending invitation.
+ */
+
+import { useState, useCallback, useEffect, useMemo } from 'react'
+import { useUsers } from 'deepspace'
+import { useUser } from 'deepspace'
+import { useChannelMembers } from 'deepspace'
+import { useMutations } from 'deepspace'
+import { useQuery } from 'deepspace'
+import type { ChannelInvitation } from 'deepspace'
+import type { RecordData, RoomUser } from 'deepspace'
+
+interface AddMemberModalProps {
+  channelId: string
+  onClose: () => void
+}
+
+export function AddMemberModal({ channelId, onClose }: AddMemberModalProps) {
+  const { users } = useUsers()
+  const { user: currentUser } = useUser()
+  const { members } = useChannelMembers(channelId)
+  const { create: createInvitation, put: updateInvitation } = useMutations<ChannelInvitation>('channel-invitations')
+  const { records: allChannelInvitations } = useQuery<ChannelInvitation>('channel-invitations', {
+    where: { channelId },
+  })
+  const [search, setSearch] = useState('')
+  const [invitingUserId, setInvitingUserId] = useState<string | null>(null)
+  const [justInvitedIds, setJustInvitedIds] = useState<Set<string>>(new Set())
+
+  useEffect(() => {
+    function handleEscape(e: KeyboardEvent) {
+      if (e.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', handleEscape)
+    return () => document.removeEventListener('keydown', handleEscape)
+  }, [onClose])
+
+  const memberIds = useMemo(
+    () => new Set(members.map((m) => m.data.userId)),
+    [members]
+  )
+
+  const pendingInviteUserIds = useMemo(
+    () => new Set(
+      allChannelInvitations
+        .filter((inv: RecordData<ChannelInvitation>) => inv.data.status === 'pending')
+        .map((inv: RecordData<ChannelInvitation>) => inv.data.invitedUserId)
+    ),
+    [allChannelInvitations]
+  )
+
+  const availableUsers = useMemo(() => {
+    const lowerSearch = search.toLowerCase()
+    return users.filter(
+      (u: RoomUser) =>
+        u.id !== currentUser?.id &&
+        !memberIds.has(u.id) &&
+        !pendingInviteUserIds.has(u.id) &&
+        !justInvitedIds.has(u.id) &&
+        (lowerSearch === '' ||
+          u.name?.toLowerCase().includes(lowerSearch) ||
+          u.email?.toLowerCase().includes(lowerSearch))
+    )
+  }, [users, currentUser, memberIds, pendingInviteUserIds, justInvitedIds, search])
+
+  const handleInvite = useCallback(
+    async (userId: string) => {
+      if (invitingUserId) return
+      setInvitingUserId(userId)
+      try {
+        const existingDeclined = allChannelInvitations.find(
+          (inv: RecordData<ChannelInvitation>) =>
+            inv.data.invitedUserId === userId && inv.data.status === 'declined'
+        )
+        if (existingDeclined) {
+          await updateInvitation(existingDeclined.recordId, {
+            ...existingDeclined.data,
+            status: 'pending',
+          } as unknown as ChannelInvitation)
+        } else {
+          await createInvitation({
+            channelId,
+            invitedUserId: userId,
+            status: 'pending',
+          } as unknown as ChannelInvitation)
+        }
+        setJustInvitedIds((prev) => new Set(prev).add(userId))
+      } finally {
+        setInvitingUserId(null)
+      }
+    },
+    [invitingUserId, createInvitation, updateInvitation, channelId, allChannelInvitations]
+  )
+
+  return (
+    <>
+      <div className="fixed inset-0 bg-black/40 z-50 animate-in fade-in duration-150" onClick={onClose} />
+      <div className="fixed inset-0 z-50 flex items-center justify-center p-4" onClick={onClose}>
+        <div
+          data-testid="add-member-modal"
+          className="bg-card border border-border rounded-2xl shadow-2xl w-full max-w-md animate-in fade-in zoom-in-95 duration-200"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <div className="px-6 pt-6 pb-0">
+            <h2 className="text-lg font-semibold text-foreground">Invite Members</h2>
+            <p className="text-sm text-muted-foreground mt-1">
+              Send an invitation to join this group. They'll need to accept before joining.
+            </p>
+          </div>
+
+          <div className="px-6 pt-4 pb-2">
+            <div className="relative">
+              <svg className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+              </svg>
+              <input
+                data-testid="add-member-search"
+                type="text"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                placeholder="Search by name or email..."
+                className="w-full bg-background border border-border rounded-lg pl-9 pr-3.5 py-2.5 text-sm text-foreground placeholder:text-muted-foreground outline-none focus:border-primary/50 focus:ring-2 focus:ring-primary/20 transition-shadow"
+                autoFocus
+              />
+            </div>
+          </div>
+
+          <div className="px-3 pb-3 max-h-64 overflow-y-auto">
+            <p className="text-xs text-muted-foreground px-3 pb-2">
+              Only users who have visited the app are shown.
+            </p>
+            {availableUsers.length === 0 ? (
+              <p className="text-sm text-muted-foreground text-center py-8">
+                {search
+                  ? 'No matching users found'
+                  : 'No users available to invite'}
+              </p>
+            ) : (
+              <div className="py-1 space-y-0.5">
+                {availableUsers.map((u: RoomUser) => (
+                  <div
+                    key={u.id}
+                    className="flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-muted/40 transition-colors"
+                  >
+                    {u.imageUrl ? (
+                      <img src={u.imageUrl} alt="" className="w-9 h-9 rounded-full object-cover" />
+                    ) : (
+                      <div className="w-9 h-9 rounded-full bg-primary/15 flex items-center justify-center text-sm font-semibold text-primary">
+                        {u.name?.[0]?.toUpperCase() ?? '?'}
+                      </div>
+                    )}
+                    <div className="flex-1 min-w-0">
+                      <div className="text-sm font-medium text-foreground truncate">{u.name}</div>
+                      {u.email && (
+                        <div className="text-xs text-muted-foreground truncate">{u.email}</div>
+                      )}
+                    </div>
+                    <button
+                      data-testid={`invite-member-${u.id}`}
+                      onClick={() => handleInvite(u.id)}
+                      disabled={invitingUserId === u.id}
+                      className="shrink-0 px-3 py-1.5 text-xs font-medium bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 disabled:opacity-40 transition-colors"
+                    >
+                      {invitingUserId === u.id ? 'Inviting...' : 'Invite'}
+                    </button>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+
+          <div className="px-6 pb-6 pt-2 border-t border-border">
+            <button
+              onClick={onClose}
+              className="w-full px-4 py-2 text-sm text-muted-foreground hover:text-foreground rounded-lg border border-border hover:bg-muted transition-colors"
+            >
+              Done
+            </button>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

package/features/messaging/src/components/chat-multi/BrowseGroupsModal.tsx

@@ -0,0 +1,163 @@
+/**
+ * BrowseGroupsModal -- Discover and join public groups.
+ * Shows a searchable list of public channels with join/open actions.
+ */
+
+import { useState, useEffect } from 'react'
+import { useChannels } from 'deepspace'
+import { useChannelMembers } from 'deepspace'
+import type { Channel } from 'deepspace'
+import type { RecordData } from 'deepspace'
+
+interface BrowseGroupsModalProps {
+  onClose: () => void
+  onSelected: (channelId: string) => void
+}
+
+export function BrowseGroupsModal({ onClose, onSelected }: BrowseGroupsModalProps) {
+  const { channels } = useChannels()
+  const [search, setSearch] = useState('')
+
+  useEffect(() => {
+    function handleEscape(e: KeyboardEvent) {
+      if (e.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', handleEscape)
+    return () => document.removeEventListener('keydown', handleEscape)
+  }, [onClose])
+
+  const publicGroups = channels.filter(
+    (c: RecordData<Channel>) =>
+      c.data.type === 'public' &&
+      !c.data.archived &&
+      c.data.name.toLowerCase().includes(search.toLowerCase())
+  )
+
+  return (
+    <>
+      <div className="fixed inset-0 bg-black/40 z-50 animate-in fade-in duration-150" onClick={onClose} />
+      <div className="fixed inset-0 z-50 flex items-center justify-center p-4" onClick={onClose}>
+        <div
+          data-testid="browse-groups-modal"
+          className="bg-card border border-border rounded-2xl shadow-2xl w-full max-w-lg animate-in fade-in zoom-in-95 duration-200"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <div className="px-6 pt-6 pb-0">
+            <h2 className="text-lg font-semibold text-foreground">Browse Groups</h2>
+            <p className="text-sm text-muted-foreground mt-1">
+              Discover public groups and join the conversation.
+            </p>
+          </div>
+
+          <div className="px-6 pt-4 pb-2">
+            <div className="relative">
+              <svg className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+              </svg>
+              <input
+                data-testid="browse-search-input"
+                type="text"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                placeholder="Search groups..."
+                className="w-full bg-background border border-border rounded-lg pl-9 pr-3.5 py-2.5 text-sm text-foreground placeholder:text-muted-foreground outline-none focus:border-primary/50 focus:ring-2 focus:ring-primary/20 transition-shadow"
+                autoFocus
+              />
+            </div>
+          </div>
+
+          <div className="px-3 pb-3 max-h-80 overflow-y-auto">
+            {publicGroups.length === 0 ? (
+              <p className="text-sm text-muted-foreground text-center py-8">
+                {search ? 'No groups found' : 'No public groups yet'}
+              </p>
+            ) : (
+              <div className="py-1 space-y-1">
+                {publicGroups.map((ch: RecordData<Channel>) => (
+                  <BrowseGroupRow
+                    key={ch.recordId}
+                    channel={ch}
+                    onSelect={() => onSelected(ch.recordId)}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+
+          <div className="px-6 pb-6 pt-2 border-t border-border">
+            <button
+              onClick={onClose}
+              className="w-full px-4 py-2 text-sm text-muted-foreground hover:text-foreground rounded-lg border border-border hover:bg-muted transition-colors"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+function BrowseGroupRow({
+  channel,
+  onSelect,
+}: {
+  channel: RecordData<Channel>
+  onSelect: () => void
+}) {
+  const { members, isMember, join, status } = useChannelMembers(channel.recordId)
+  const [joining, setJoining] = useState(false)
+
+  const handleJoin = async () => {
+    setJoining(true)
+    try {
+      await join()
+      onSelect()
+    } finally {
+      setJoining(false)
+    }
+  }
+
+  const loading = status !== 'ready'
+
+  return (
+    <div
+      data-testid={`browse-group-${channel.data.name}`}
+      className="flex items-center gap-3 px-3 py-3 rounded-lg hover:bg-muted/40 transition-colors"
+    >
+      <div className="w-9 h-9 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
+        <svg className="w-4 h-4 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
+        </svg>
+      </div>
+      <div className="flex-1 min-w-0">
+        <div className="text-sm font-medium text-foreground truncate">{channel.data.name}</div>
+        {channel.data.description && (
+          <div className="text-xs text-muted-foreground truncate mt-0.5">{channel.data.description}</div>
+        )}
+        <div className="text-xs text-muted-foreground mt-0.5">
+          {members.length} {members.length === 1 ? 'member' : 'members'}
+        </div>
+      </div>
+      {loading ? (
+        <span className="shrink-0 px-3 py-1.5 text-xs text-muted-foreground">...</span>
+      ) : isMember ? (
+        <button
+          onClick={onSelect}
+          className="shrink-0 px-3 py-1.5 text-xs font-medium bg-muted text-foreground rounded-lg border border-border hover:bg-muted/80 transition-colors"
+        >
+          Open
+        </button>
+      ) : (
+        <button
+          data-testid={`join-group-${channel.data.name}`}
+          onClick={handleJoin}
+          disabled={joining}
+          className="shrink-0 px-3 py-1.5 text-xs font-medium bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 disabled:opacity-40 transition-colors"
+        >
+          {joining ? 'Joining...' : 'Join'}
+        </button>
+      )}
+    </div>
+  )
+}