deepspace 0.26.0 → 0.26.1

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

@@ -1,149 +0,0 @@
-/**
- * InvitationList -- Inline list of pending group invitations.
- * Shown in the sidebar when the user has pending invitations.
- * Accept joins the channel + updates invitation status.
- * Decline updates the invitation status to 'declined'.
- */
-
-import { useState, useCallback } from 'react'
-import { useChannelMembers } from 'deepspace'
-import { useMutations } from 'deepspace'
-import { useUserLookup } from 'deepspace'
-import type { Channel, ChannelInvitation } from 'deepspace'
-import type { RecordData } from 'deepspace'
-
-interface PendingInvitation {
-  invitation: RecordData<ChannelInvitation>
-  channel: RecordData<Channel> | undefined
-}
-
-interface InvitationListProps {
-  invitations: PendingInvitation[]
-  onAccepted: (channelId: string) => void
-}
-
-export function InvitationList({ invitations, onAccepted }: InvitationListProps) {
-  if (invitations.length === 0) return null
-
-  return (
-    <div className="mb-2">
-      <div className="flex items-center gap-1.5 px-2 py-2">
-        <svg
-          className="w-3.5 h-3.5 text-warning"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-          strokeWidth={2}
-        >
-          <path strokeLinecap="round" strokeLinejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-        </svg>
-        <span className="text-[11px] font-bold text-muted-foreground/70 uppercase tracking-widest">
-          Invitations
-        </span>
-        <span className="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full bg-warning/15 text-warning text-[10px] font-bold tabular-nums">
-          {invitations.length}
-        </span>
-      </div>
-      <div className="space-y-1.5 px-0.5">
-        {invitations.map(({ invitation, channel }) => (
-          <InvitationRow
-            key={invitation.recordId}
-            invitation={invitation}
-            channel={channel}
-            onAccepted={onAccepted}
-          />
-        ))}
-      </div>
-    </div>
-  )
-}
-
-function InvitationRow({
-  invitation,
-  channel,
-  onAccepted,
-}: {
-  invitation: RecordData<ChannelInvitation>
-  channel: RecordData<Channel> | undefined
-  onAccepted: (channelId: string) => void
-}) {
-  const { join } = useChannelMembers(invitation.data.channelId)
-  const { put } = useMutations<ChannelInvitation>('channel-invitations')
-  const { getUser } = useUserLookup()
-  const [acting, setActing] = useState<'accept' | 'decline' | null>(null)
-
-  const inviter = getUser(invitation.data.invitedBy)
-  const channelName = channel?.data.name ?? 'Unknown group'
-  const isPrivate = channel?.data.type === 'private'
-
-  const handleAccept = useCallback(async () => {
-    setActing('accept')
-    try {
-      await put(invitation.recordId, {
-        ...invitation.data,
-        status: 'accepted',
-      } as unknown as ChannelInvitation)
-      await join()
-      onAccepted(invitation.data.channelId)
-    } finally {
-      setActing(null)
-    }
-  }, [invitation, put, join, onAccepted])
-
-  const handleDecline = useCallback(async () => {
-    setActing('decline')
-    try {
-      await put(invitation.recordId, {
-        ...invitation.data,
-        status: 'declined',
-      } as unknown as ChannelInvitation)
-    } finally {
-      setActing(null)
-    }
-  }, [invitation, put])
-
-  return (
-    <div
-      data-testid={`invitation-${invitation.recordId}`}
-      className="px-3 py-3 rounded-xl bg-warning/5 border border-warning/10"
-    >
-      <div className="flex items-center gap-2.5 mb-2">
-        <span className="shrink-0 w-8 h-8 rounded-lg bg-warning/10 flex items-center justify-center">
-          {isPrivate ? (
-            <svg className="w-3.5 h-3.5 text-warning" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-              <path strokeLinecap="round" strokeLinejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-            </svg>
-          ) : (
-            <svg className="w-3.5 h-3.5 text-warning" 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>
-          )}
-        </span>
-        <div className="flex-1 min-w-0">
-          <p className="text-sm font-semibold text-foreground truncate">{channelName}</p>
-          <p className="text-[11px] text-muted-foreground/70">
-            from {inviter?.name ?? 'someone'}
-          </p>
-        </div>
-      </div>
-      <div className="flex gap-2">
-        <button
-          data-testid={`accept-invitation-${invitation.recordId}`}
-          onClick={handleAccept}
-          disabled={acting !== null}
-          className="flex-1 px-3 py-1.5 text-xs font-semibold bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 active:bg-primary/80 disabled:opacity-40 transition-colors duration-200 cursor-pointer"
-        >
-          {acting === 'accept' ? 'Joining...' : 'Accept'}
-        </button>
-        <button
-          data-testid={`decline-invitation-${invitation.recordId}`}
-          onClick={handleDecline}
-          disabled={acting !== null}
-          className="flex-1 px-3 py-1.5 text-xs font-semibold text-muted-foreground border border-border/60 rounded-lg hover:bg-muted/50 active:bg-muted disabled:opacity-40 transition-colors duration-200 cursor-pointer"
-        >
-          {acting === 'decline' ? 'Declining...' : 'Decline'}
-        </button>
-      </div>
-    </div>
-  )
-}

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

@@ -1,159 +0,0 @@
-/**
- * NewMessageModal -- Start a direct message with another user.
- * Finds existing DM channels to avoid duplicates.
- */
-
-import { useState, useCallback, useEffect } from 'react'
-import { useUser } from 'deepspace'
-import { useUsers } from 'deepspace'
-import { useChannels } from 'deepspace'
-import { useMutations } from 'deepspace'
-import type { Channel, ChannelMember } from 'deepspace'
-import type { RecordData } from 'deepspace'
-
-interface NewMessageModalProps {
-  onClose: () => void
-  onSelected: (channelId: string) => void
-}
-
-export function NewMessageModal({ onClose, onSelected }: NewMessageModalProps) {
-  const { user } = useUser()
-  const { users } = useUsers()
-  const { channels, create } = useChannels()
-  const { create: createMembership } = useMutations<ChannelMember>('channel-members')
-  const [search, setSearch] = useState('')
-  const [isCreating, setIsCreating] = useState(false)
-
-  useEffect(() => {
-    function handleEscape(e: KeyboardEvent) {
-      if (e.key === 'Escape') onClose()
-    }
-    document.addEventListener('keydown', handleEscape)
-    return () => document.removeEventListener('keydown', handleEscape)
-  }, [onClose])
-
-  const filteredUsers = users.filter(
-    (u) =>
-      u.id !== user?.id &&
-      (u.name?.toLowerCase().includes(search.toLowerCase()) ||
-        u.email?.toLowerCase().includes(search.toLowerCase()))
-  )
-
-  const handleSelectUser = useCallback(
-    async (targetUserId: string, targetName: string) => {
-      if (!user || isCreating) return
-
-      const ids = [user.id, targetUserId].sort()
-      const dmChannelName = `dm-${ids[0]}-${ids[1]}`
-
-      const existingDM = channels.find(
-        (c: RecordData<Channel>) => c.data.type === 'dm' && c.data.name === dmChannelName
-      )
-
-      if (existingDM) {
-        onSelected(existingDM.recordId)
-        onClose()
-        return
-      }
-
-      setIsCreating(true)
-      try {
-        const channelId = await create({
-          name: dmChannelName,
-          type: 'dm',
-          description: targetName,
-        })
-        if (channelId && user) {
-          await createMembership({
-            channelId,
-            userId: user.id,
-            joinedAt: new Date().toISOString(),
-          } as unknown as ChannelMember)
-          onSelected(channelId)
-        }
-        onClose()
-      } finally {
-        setIsCreating(false)
-      }
-    },
-    [user, isCreating, channels, create, createMembership, onSelected, onClose]
-  )
-
-  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="new-message-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">New Message</h2>
-            <p className="text-sm text-muted-foreground mt-1">Send a direct message to someone.</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="dm-search-input"
-                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">
-            {filteredUsers.length === 0 ? (
-              <p className="text-sm text-muted-foreground text-center py-8">
-                {search ? 'No users found' : 'No other users available'}
-              </p>
-            ) : (
-              <div className="py-1 space-y-0.5">
-                {filteredUsers.map((u) => (
-                  <button
-                    key={u.id}
-                    data-testid={`dm-user-${u.id}`}
-                    onClick={() => handleSelectUser(u.id, u.name)}
-                    disabled={isCreating}
-                    className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-muted/60 text-left transition-colors disabled:opacity-50"
-                  >
-                    {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="min-w-0 flex-1">
-                      <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>
-                ))}
-              </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"
-            >
-              Cancel
-            </button>
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}

package/features/messaging/src/hooks/useMultiChannel.ts

@@ -1,142 +0,0 @@
-/**
- * useMultiChannel — Multi-channel state management.
- *
- * Manages the active channel selection. Provides channel lists filtered
- * by type and helpers for DM display names and unread.
- *
- * DM visibility: DM channels use a `dm-{id1}-{id2}` naming convention.
- * A DM appears in a user's sidebar if their ID is embedded in the channel
- * name, regardless of whether a membership record exists yet.
- */
-
-import { useState, useCallback, useMemo } from 'react'
-import { useUser } from 'deepspace'
-import { useUsers } from 'deepspace'
-import { useChannels } from 'deepspace'
-import { useReadReceipts } from 'deepspace'
-import { useQuery } from 'deepspace'
-import type { Channel, ChannelMember, ChannelInvitation } from 'deepspace'
-import type { RecordData } from 'deepspace'
-
-const CHANNEL_TYPES = {
-  PUBLIC: 'public',
-  PRIVATE: 'private',
-  DM: 'dm',
-} as const
-
-export type ChannelType = (typeof CHANNEL_TYPES)[keyof typeof CHANNEL_TYPES]
-
-export { CHANNEL_TYPES }
-
-export function useMultiChannel() {
-  const { user } = useUser()
-  const { users } = useUsers()
-  const { channels, status } = useChannels()
-  const { receipts, markAsRead } = useReadReceipts()
-  const [activeChannelId, setActiveChannelId] = useState<string | null>(null)
-
-  const { records: myMemberships } = useQuery<ChannelMember>('channel-members', {
-    where: user ? { userId: user.id } : { userId: '__none__' },
-  })
-
-  const myChannelIds = useMemo(
-    () => new Set(
-      myMemberships.map((m: RecordData<ChannelMember>) => m.data.channelId)
-    ),
-    [myMemberships]
-  )
-
-  const liveChannels = useMemo(
-    () => channels.filter((c: RecordData<Channel>) => !c.data.archived),
-    [channels]
-  )
-
-  const groups = useMemo(
-    () => {
-      if (!user) return []
-      return liveChannels.filter(
-        (c: RecordData<Channel>) =>
-          (c.data.type === CHANNEL_TYPES.PUBLIC || c.data.type === CHANNEL_TYPES.PRIVATE) &&
-          myChannelIds.has(c.recordId)
-      )
-    },
-    [liveChannels, myChannelIds, user]
-  )
-
-  /** DMs visible to the current user -- matched by user ID in channel name, not membership */
-  const dms = useMemo(
-    () => {
-      if (!user) return []
-      return liveChannels.filter(
-        (c: RecordData<Channel>) =>
-          c.data.type === CHANNEL_TYPES.DM &&
-          c.data.name.includes(user.id)
-      )
-    },
-    [liveChannels, user]
-  )
-
-  // Use `where` for the immutable `invitedUserId` field so the SDK filters
-  // at query-time and gates real-time creates. `status` is mutable (pending ->
-  // accepted/declined), so we filter it client-side in the `useMemo` below.
-  const { records: myInvitations } = useQuery<ChannelInvitation>('channel-invitations', {
-    where: user ? { invitedUserId: user.id } : { invitedUserId: '__none__' },
-  })
-
-  const pendingInvitations = useMemo(
-    () => {
-      return myInvitations
-        .filter((inv: RecordData<ChannelInvitation>) => inv.data.status === 'pending')
-        .filter((inv: RecordData<ChannelInvitation>) => {
-          const ch = liveChannels.find((c: RecordData<Channel>) => c.recordId === inv.data.channelId)
-          return ch && !ch.data.archived
-        })
-        .map((inv: RecordData<ChannelInvitation>) => {
-          const ch = liveChannels.find((c: RecordData<Channel>) => c.recordId === inv.data.channelId)
-          return { invitation: inv, channel: ch }
-        })
-    },
-    [myInvitations, liveChannels]
-  )
-
-  const hasUnread = useCallback(
-    (channelId: string): boolean => {
-      if (channelId === activeChannelId) return false
-      const receipt = receipts.find((r) => r.data.channelId === channelId)
-      return !receipt
-    },
-    [receipts, activeChannelId]
-  )
-
-  const getDMDisplayName = useCallback(
-    (channel: RecordData<Channel>): string => {
-      if (!user) return channel.data.name
-      const dmName = channel.data.name
-      const parts = dmName.replace('dm-', '').split('-')
-      const otherId = parts.find((id) => id !== user.id) ?? parts[0]
-      const otherUser = users.find((u) => u.id === otherId)
-      return otherUser?.name ?? channel.data.description ?? 'Direct Message'
-    },
-    [user, users]
-  )
-
-  const selectChannel = useCallback(
-    (id: string) => {
-      setActiveChannelId(id)
-      markAsRead(id)
-    },
-    [markAsRead]
-  )
-
-  return {
-    activeChannelId,
-    selectChannel,
-    channels: liveChannels,
-    groups,
-    dms,
-    pendingInvitations,
-    status,
-    hasUnread,
-    getDMDisplayName,
-  }
-}