deepspace 0.26.0 → 0.26.1

package/features/messaging/src/ChatMultiPage.tsx

@@ -1,298 +0,0 @@
-/**
- * ChatMultiPage -- Full-featured messaging page with sidebar navigation.
- *
- * Layout:
- *   Desktop: [Sidebar 280px] | [Chat Area flex-1] | [Settings/Thread Panel]
- *   Mobile:  Sidebar (full) or Chat (full) -- only one visible at a time.
- *
- * Reuses MessageList from the same messaging feature.
- * Parent container must have a definite height (h-full / flex-1).
- */
-
-import { useState, useCallback, useEffect, useRef, type ReactNode } from 'react'
-import { useMultiChannel } from '../components/messaging/hooks/useMultiChannel'
-import { useUser } from 'deepspace'
-import { useChannelMembers } from 'deepspace'
-import { useChannels } from 'deepspace'
-import { useReadReceipts } from 'deepspace'
-import { useMutations } from 'deepspace'
-import { RecordScope } from 'deepspace'
-import type { Channel, ChannelMember } from 'deepspace'
-import type { RecordData } from 'deepspace'
-import type { CollectionSchema } from 'deepspace/schema'
-import { messagingSchemas } from '../schemas/messaging-schema'
-import { ChannelSidebar } from '../components/messaging/chat-multi/ChannelSidebar'
-import { MessageList } from '../components/messaging/chat/MessageList'
-import { ChannelSettingsPanel } from '../components/messaging/chat-multi/ChannelSettingsPanel'
-
-interface ChatMultiPageProps {
-  schemas?: CollectionSchema[]
-  className?: string
-}
-
-export default function ChatMultiPage({
-  schemas = messagingSchemas,
-  className,
-}: ChatMultiPageProps) {
-  const {
-    activeChannelId,
-    selectChannel,
-    channels,
-    groups,
-    dms,
-    pendingInvitations,
-    status,
-    hasUnread,
-    getDMDisplayName,
-  } = useMultiChannel()
-
-  const { user } = useUser()
-  const { channels: allChannels, create: createChannel } = useChannels()
-  const { create: createMembership } = useMutations<ChannelMember>('channel-members')
-  const { isMember, join, status: memberStatus } = useChannelMembers(activeChannelId ?? undefined)
-  const { markAsRead } = useReadReceipts()
-
-  const [showSettings, setShowSettings] = useState(false)
-  const [mobileView, setMobileView] = useState<'sidebar' | 'chat'>('sidebar')
-  const lastMarkedRef = useRef<string | null>(null)
-
-  useEffect(() => {
-    if (!activeChannelId || !isMember) return
-    if (lastMarkedRef.current === activeChannelId) return
-    lastMarkedRef.current = activeChannelId
-    markAsRead(activeChannelId)
-  }, [activeChannelId, isMember, markAsRead])
-
-  const handleSelectChannel = useCallback(
-    (channelId: string) => {
-      selectChannel(channelId)
-      setShowSettings(false)
-      setMobileView('chat')
-    },
-    [selectChannel]
-  )
-
-  const handleBack = useCallback(() => {
-    setMobileView('sidebar')
-    setShowSettings(false)
-  }, [])
-
-  const handleLeave = useCallback(() => {
-    setShowSettings(false)
-    setMobileView('sidebar')
-  }, [])
-
-  const handleStartDM = useCallback(
-    async (targetUserId: string) => {
-      if (!user) return
-      const ids = [user.id, targetUserId].sort()
-      const dmChannelName = `dm-${ids[0]}-${ids[1]}`
-
-      const existingDM = allChannels.find(
-        (c: RecordData<Channel>) => c.data.type === 'dm' && c.data.name === dmChannelName
-      )
-
-      if (existingDM) {
-        handleSelectChannel(existingDM.recordId)
-        return
-      }
-
-      const channelId = await createChannel({
-        name: dmChannelName,
-        type: 'dm',
-        description: '',
-      })
-      if (channelId && user) {
-        await createMembership({
-          channelId,
-          userId: user.id,
-          joinedAt: new Date().toISOString(),
-        } as unknown as ChannelMember)
-        handleSelectChannel(channelId)
-      }
-    },
-    [user, allChannels, createChannel, createMembership, handleSelectChannel]
-  )
-
-  const activeChannelData = channels.find(
-    (c: RecordData<Channel>) => c.recordId === activeChannelId
-  )
-  const isDM = activeChannelData?.data.type === 'dm'
-  const isPrivate = activeChannelData?.data.type === 'private'
-
-  if (status !== 'ready') {
-    return (
-      <div className={`flex items-center justify-center h-full ${className ?? ''}`}>
-        <div className="text-muted-foreground text-sm">Loading...</div>
-      </div>
-    )
-  }
-
-  return (
-    <div className={`flex h-full ${className ?? ''}`} data-testid="chat-multi-page">
-      {/* Sidebar -- visible on desktop always; on mobile only when mobileView='sidebar' */}
-      <div
-        className={`w-full md:w-72 lg:w-80 shrink-0 border-r border-border/40 ${
-          mobileView === 'sidebar' ? 'flex' : 'hidden md:flex'
-        }`}
-      >
-        <div className="w-full">
-          <ChannelSidebar
-            groups={groups}
-            dms={dms}
-            pendingInvitations={pendingInvitations}
-            activeChannelId={activeChannelId}
-            onSelectChannel={handleSelectChannel}
-            hasUnread={hasUnread}
-            getDMDisplayName={getDMDisplayName}
-          />
-        </div>
-      </div>
-
-      {/* Chat area -- on mobile only when mobileView='chat' */}
-      <div
-        className={`flex-1 flex flex-col min-w-0 ${
-          mobileView === 'chat' ? 'flex' : 'hidden md:flex'
-        }`}
-      >
-        {activeChannelId ? (
-          <RecordScope key={activeChannelId} roomId={`chat:${activeChannelId}`} schemas={schemas}>
-            {/* Multi-channel header with back button on mobile */}
-            <div
-              data-testid="multi-chat-header"
-              className="shrink-0 px-4 py-3 border-b border-border bg-card/80 backdrop-blur-sm flex items-center gap-3"
-            >
-              {/* Mobile back button */}
-              <button
-                data-testid="back-to-sidebar"
-                onClick={handleBack}
-                className="md:hidden p-1 -ml-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
-              >
-                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
-                </svg>
-              </button>
-
-              <div className="flex-1 min-w-0">
-                <h1 className="text-base font-semibold text-foreground truncate">
-                  {isDM && activeChannelData
-                    ? getDMDisplayName(activeChannelData)
-                    : activeChannelData?.data.name ?? 'Chat'}
-                </h1>
-                {activeChannelData?.data.description && !isDM && (
-                  <p className="text-xs text-muted-foreground truncate">
-                    {activeChannelData.data.description}
-                  </p>
-                )}
-              </div>
-
-              {/* Settings button for groups (not DMs) */}
-              {!isDM && isMember && (
-                <button
-                  data-testid="toggle-settings-btn"
-                  onClick={() => setShowSettings((prev) => !prev)}
-                  className={`p-1.5 rounded-md transition-colors ${
-                    showSettings
-                      ? 'text-primary bg-primary/10'
-                      : 'text-muted-foreground hover:bg-muted hover:text-foreground'
-                  }`}
-                  title="Group settings"
-                >
-                  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
-                    <path strokeLinecap="round" strokeLinejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                  </svg>
-                </button>
-              )}
-            </div>
-
-            {/* Channel content */}
-            {memberStatus === 'ready' && !isMember ? (
-              isDM ? (
-                <DmAutoJoin join={join} channelId={activeChannelId}>
-                  <div className="flex flex-1 min-h-0">
-                    <div className={`flex flex-col flex-1 min-w-0 ${showSettings ? 'hidden md:flex' : 'flex'}`}>
-                      <MessageList channelId={activeChannelId} onStartDM={handleStartDM} />
-                    </div>
-                  </div>
-                </DmAutoJoin>
-              ) : (
-                <div className="flex-1 flex items-center justify-center">
-                  <div className="text-center">
-                    {isPrivate ? (
-                      <>
-                        <p className="text-foreground mb-1">This is a private group</p>
-                        <p className="text-sm text-muted-foreground">
-                          You need an invitation to join.
-                        </p>
-                      </>
-                    ) : (
-                      <>
-                        <p className="text-foreground mb-3">You're not a member of this group</p>
-                        <button
-                          data-testid="join-channel-btn"
-                          onClick={join}
-                          className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors"
-                        >
-                          Join Group
-                        </button>
-                      </>
-                    )}
-                  </div>
-                </div>
-              )
-            ) : (
-              <div className="flex flex-1 min-h-0">
-                <div className={`flex flex-col flex-1 min-w-0 ${showSettings ? 'hidden md:flex' : 'flex'}`}>
-                  <MessageList channelId={activeChannelId} onStartDM={handleStartDM} />
-                </div>
-                {showSettings && activeChannelId && (
-                  <ChannelSettingsPanel
-                    channelId={activeChannelId}
-                    onClose={() => setShowSettings(false)}
-                    onLeave={handleLeave}
-                  />
-                )}
-              </div>
-            )}
-          </RecordScope>
-        ) : (
-          <div className="flex-1 flex items-center justify-center">
-            <div className="text-center text-muted-foreground">
-              <div className="w-16 h-16 rounded-2xl bg-muted/60 flex items-center justify-center mx-auto mb-4">
-                <svg className="w-8 h-8 text-muted-foreground/50" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
-                  <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>
-              </div>
-              <p className="text-base font-medium mb-1">Select a conversation</p>
-              <p className="text-sm">Choose a group or message from the sidebar</p>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
-
-/**
- * Auto-joins the current user to a DM channel and renders children immediately.
- * DMs don't require an explicit join gate -- if you can see the DM, you belong in it.
- */
-function DmAutoJoin({
-  join,
-  channelId,
-  children,
-}: {
-  join: () => void
-  channelId: string
-  children: ReactNode
-}) {
-  const joined = useRef<string | null>(null)
-
-  useEffect(() => {
-    if (joined.current === channelId) return
-    joined.current = channelId
-    join()
-  }, [channelId, join])
-
-  return <>{children}</>
-}

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

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

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