deepspace 0.3.10 → 0.4.0

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

@@ -0,0 +1,149 @@
+/**
+ * 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

@@ -0,0 +1,159 @@
+/**
+ * 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/useChatChannel.ts

@@ -0,0 +1,64 @@
+/**
+ * useChatChannel — Find or create a default chat channel, and auto-join.
+ *
+ * Encapsulates all channel logic so consuming components never need to
+ * know about the channels collection. On first mount (when no channel
+ * exists yet) it creates a "general" public channel automatically and
+ * joins the current user.
+ *
+ * Usage:
+ *   const { channelId, status } = useChatChannel()
+ *   if (!channelId) return <Loading />
+ *   return <MessageList channelId={channelId} />
+ */
+
+import { useEffect, useRef } from 'react'
+import { useUser } from 'deepspace'
+import { useChannels } from 'deepspace'
+import { useChannelMembers } from 'deepspace'
+import type { Channel } from 'deepspace'
+import type { RecordData } from 'deepspace'
+
+const DEFAULT_CHANNEL_NAME = 'general'
+
+export function useChatChannel(channelName: string = DEFAULT_CHANNEL_NAME) {
+  const { user } = useUser()
+  const { channels, status, create } = useChannels()
+  const hasInitialized = useRef(false)
+
+  const defaultChannel = channels.find(
+    (c: RecordData<Channel>) =>
+      c.data.name === channelName &&
+      c.data.type === 'public' &&
+      !c.data.archived
+  )
+
+  const { isMember, join, status: membersStatus } = useChannelMembers(defaultChannel?.recordId)
+
+  // One-shot initialization: create the default channel if it doesn't exist.
+  useEffect(() => {
+    if (!user || status !== 'ready' || hasInitialized.current) return
+    hasInitialized.current = true
+
+    if (!defaultChannel) {
+      create({
+        name: channelName,
+        type: 'public',
+        description: 'Default chat channel',
+      })
+    }
+  }, [user, status]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Wait for the members query to be ready before auto-joining.
+  useEffect(() => {
+    if (!user || !defaultChannel || isMember || membersStatus !== 'ready') return
+    join()
+  }, [user, defaultChannel, isMember, membersStatus, join])
+
+  return {
+    channelId: defaultChannel?.recordId,
+    status,
+    isMember,
+    join,
+  }
+}

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

@@ -0,0 +1,74 @@
+/**
+ * useLongPress — Touch-based long-press detection for web.
+ *
+ * Returns event handlers (onTouchStart, onTouchEnd, onTouchMove) to
+ * attach to any element. Fires the callback after `delay` ms of
+ * sustained touch. Cancels if the finger moves beyond `threshold` px
+ * or lifts before the timer fires.
+ *
+ * Only active on touch devices — mouse events are not intercepted,
+ * so desktop hover behavior is unaffected.
+ */
+
+import { useRef, useCallback } from 'react'
+
+interface UseLongPressOptions {
+  delay?: number
+  threshold?: number
+}
+
+export function useLongPress(
+  callback: () => void,
+  { delay = 500, threshold = 10 }: UseLongPressOptions = {}
+) {
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const startPos = useRef<{ x: number; y: number } | null>(null)
+  const firedRef = useRef(false)
+
+  const clear = useCallback(() => {
+    if (timerRef.current !== null) {
+      clearTimeout(timerRef.current)
+      timerRef.current = null
+    }
+    startPos.current = null
+  }, [])
+
+  const onTouchStart = useCallback(
+    (e: React.TouchEvent) => {
+      firedRef.current = false
+      const touch = e.touches[0]
+      startPos.current = { x: touch.clientX, y: touch.clientY }
+      timerRef.current = setTimeout(() => {
+        firedRef.current = true
+        callback()
+        timerRef.current = null
+      }, delay)
+    },
+    [callback, delay]
+  )
+
+  const onTouchMove = useCallback(
+    (e: React.TouchEvent) => {
+      if (!startPos.current || timerRef.current === null) return
+      const touch = e.touches[0]
+      const dx = touch.clientX - startPos.current.x
+      const dy = touch.clientY - startPos.current.y
+      if (Math.sqrt(dx * dx + dy * dy) > threshold) {
+        clear()
+      }
+    },
+    [threshold, clear]
+  )
+
+  const onTouchEnd = useCallback(
+    (e: React.TouchEvent) => {
+      if (firedRef.current) {
+        e.preventDefault()
+      }
+      clear()
+    },
+    [clear]
+  )
+
+  return { onTouchStart, onTouchMove, onTouchEnd }
+}

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

@@ -0,0 +1,142 @@
+/**
+ * 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,
+  }
+}

package/features/messaging/src/messaging-schema.ts

@@ -0,0 +1,25 @@
+/**
+ * Messaging Feature — Schema
+ *
+ * Re-exports the SDK's pre-built messaging collection schemas.
+ * Spread into the app's schemas array: ...messagingSchemas
+ */
+
+import type { CollectionSchema } from 'deepspace/worker'
+import {
+  CHANNELS_SCHEMA,
+  MESSAGES_SCHEMA,
+  REACTIONS_SCHEMA,
+  CHANNEL_MEMBERS_SCHEMA,
+  CHANNEL_INVITATIONS_SCHEMA,
+  READ_RECEIPTS_SCHEMA,
+} from 'deepspace/worker'
+
+export const messagingSchemas: CollectionSchema[] = [
+  CHANNELS_SCHEMA,
+  MESSAGES_SCHEMA,
+  REACTIONS_SCHEMA,
+  CHANNEL_MEMBERS_SCHEMA,
+  CHANNEL_INVITATIONS_SCHEMA,
+  READ_RECEIPTS_SCHEMA,
+]

package/features/presence-test/feature.json

@@ -0,0 +1,21 @@
+{
+  "id": "presence-test",
+  "name": "Presence Test",
+  "category": "data",
+  "description": "E2E test page for real-time presence tracking via PresenceRoom DO",
+  "details": "Test page used by Playwright e2e tests. Connects to a PresenceRoom scope and displays peers, state updates, and connection status with data-testid attributes.",
+  "files": [
+    {
+      "src": "src/PresenceTestPage.tsx",
+      "dest": "src/pages/presence-test.tsx"
+    }
+  ],
+  "schema": null,
+  "route": {
+    "path": "/presence-test",
+    "protected": false
+  },
+  "requires": [],
+  "instructions": [],
+  "patterns": []
+}