deepspace 0.3.10 → 0.4.0

package/features/messaging/src/ChatMultiPage.tsx

@@ -0,0 +1,300 @@
+/**
+ * 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/worker'
+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[]
+  appId?: string
+  className?: string
+}
+
+export default function ChatMultiPage({
+  schemas = messagingSchemas,
+  appId = '',
+  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} appId={appId}>
+            {/* 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/ChatPage.tsx

@@ -0,0 +1,75 @@
+/**
+ * ChatPage -- Routable messaging page with header and MessageList.
+ * Parent container must have a definite height (h-full / flex-1).
+ */
+
+import { useEffect, useRef } from 'react'
+import { useChatChannel } from '../components/messaging/hooks/useChatChannel'
+import { useReadReceipts } from 'deepspace'
+import { RecordScope } from 'deepspace'
+import type { CollectionSchema } from 'deepspace/worker'
+import { messagingSchemas } from '../schemas/messaging-schema'
+import { ChatHeader } from '../components/messaging/chat/ChatHeader'
+import { MessageList } from '../components/messaging/chat/MessageList'
+
+interface ChatPageProps {
+  schemas?: CollectionSchema[]
+  appId?: string
+  channelName?: string
+  className?: string
+}
+
+export default function ChatPage({
+  schemas = messagingSchemas,
+  appId = '',
+  channelName = 'general',
+  className,
+}: ChatPageProps) {
+  const { channelId, status, isMember, join } = useChatChannel(channelName)
+  const { markAsRead } = useReadReceipts()
+  const lastMarkedRef = useRef<string | null>(null)
+
+  useEffect(() => {
+    if (!channelId || !isMember) return
+    if (lastMarkedRef.current === channelId) return
+    lastMarkedRef.current = channelId
+    markAsRead(channelId)
+  }, [channelId, isMember, markAsRead])
+
+  if (status !== 'ready' || !channelId) {
+    return (
+      <div className={`flex items-center justify-center h-full ${className ?? ''}`}>
+        <div className="text-muted-foreground text-sm">Loading chat...</div>
+      </div>
+    )
+  }
+
+  if (!isMember) {
+    return (
+      <div className={`flex flex-col h-full ${className ?? ''}`} data-testid="chat-page">
+        <ChatHeader channelId={channelId} />
+        <div className="flex-1 flex items-center justify-center">
+          <div className="text-center">
+            <p className="text-foreground mb-3">You're not a member of this channel</p>
+            <button
+              data-testid="join-channel-btn"
+              onClick={join}
+              className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors"
+            >
+              Join Channel
+            </button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className={`flex flex-col h-full ${className ?? ''}`} data-testid="chat-page">
+      <ChatHeader channelId={channelId} />
+      <RecordScope roomId={`chat:${channelId}`} schemas={schemas} appId={appId}>
+        <MessageList channelId={channelId} />
+      </RecordScope>
+    </div>
+  )
+}

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

@@ -0,0 +1,76 @@
+/**
+ * ChatHeader -- Channel header showing name, description, and member count.
+ * Generic styling (no Slack-specific prefixes like #).
+ */
+
+import { useChannels } from 'deepspace'
+import { useChannelMembers } from 'deepspace'
+import type { Channel } from 'deepspace'
+import type { RecordData } from 'deepspace'
+
+interface ChatHeaderProps {
+  channelId: string
+  onToggleThread?: () => void
+  threadOpen?: boolean
+}
+
+export function ChatHeader({ channelId, onToggleThread, threadOpen }: ChatHeaderProps) {
+  const { channels } = useChannels()
+  const { members } = useChannelMembers(channelId)
+
+  const channel = channels.find((c: RecordData<Channel>) => c.recordId === channelId)
+
+  return (
+    <div
+      data-testid="chat-header"
+      className="shrink-0 px-4 py-3 border-b border-border bg-card/80 backdrop-blur-sm flex items-center justify-between gap-3"
+    >
+      <div className="flex items-center gap-3 min-w-0">
+        <h1
+          className="text-base font-semibold text-foreground truncate"
+          data-testid="chat-header-name"
+        >
+          {channel?.data.name ?? 'Chat'}
+        </h1>
+        {channel?.data.description && (
+          <>
+            <div className="w-px h-4 bg-border shrink-0" />
+            <span className="text-sm text-muted-foreground truncate">
+              {channel.data.description}
+            </span>
+          </>
+        )}
+      </div>
+
+      <div className="flex items-center gap-2 shrink-0">
+        <span
+          className="text-xs text-muted-foreground"
+          data-testid="chat-header-member-count"
+        >
+          {members.length} {members.length === 1 ? 'member' : 'members'}
+        </span>
+        {onToggleThread && (
+          <button
+            data-testid="toggle-thread-btn"
+            onClick={onToggleThread}
+            className={`p-1.5 rounded-md transition-colors ${
+              threadOpen
+                ? 'text-primary bg-primary/10'
+                : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+            }`}
+            title="Threads"
+          >
+            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={1.5}
+                d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"
+              />
+            </svg>
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,168 @@
+/**
+ * MessageActionSheet -- Mobile long-press context menu.
+ * Dims the screen, highlights the message in-place, and shows
+ * an action bar with edit/delete + emoji reactions.
+ */
+
+import { useEffect, useCallback, useState } from 'react'
+import { EMOJI_LIST } from './ReactionPicker'
+import type { MessageRect } from './MessageItem'
+
+interface MessageActionSheetProps {
+  visible: boolean
+  onClose: () => void
+  isOwn: boolean
+  onReaction: (emoji: string) => void
+  onEdit: () => void
+  onDelete: () => void
+  onReply: () => void
+  messageContent: string
+  messageRect: MessageRect | null
+}
+
+const ACTION_BAR_HEIGHT = 44
+const VIEWPORT_PADDING = 12
+
+export function MessageActionSheet({
+  visible,
+  onClose,
+  isOwn,
+  onReaction,
+  onEdit,
+  onDelete,
+  onReply,
+  messageContent,
+  messageRect,
+}: MessageActionSheetProps) {
+  const [layout, setLayout] = useState<'above' | 'below'>('above')
+
+  const handleAction = useCallback(
+    (action: () => void) => {
+      action()
+      onClose()
+    },
+    [onClose]
+  )
+
+  useEffect(() => {
+    if (!visible || !messageRect) return
+    const spaceAbove = messageRect.top
+    const needed = ACTION_BAR_HEIGHT + VIEWPORT_PADDING
+    setLayout(spaceAbove >= needed ? 'above' : 'below')
+  }, [visible, messageRect])
+
+  useEffect(() => {
+    if (!visible) return
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', handleKeyDown)
+    document.body.style.overflow = 'hidden'
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+      document.body.style.overflow = ''
+    }
+  }, [visible, onClose])
+
+  if (!visible || !messageRect) return null
+
+  const actionBar = (
+    <div
+      data-testid="context-action-bar"
+      data-context-bar
+      className="flex items-center gap-0.5 bg-card border border-border rounded-xl shadow-lg px-1 py-1 overflow-x-auto"
+      style={{
+        scrollbarWidth: 'none',
+        width: messageRect.width,
+      }}
+    >
+      {isOwn && (
+        <>
+          <button
+            data-testid="action-sheet-edit"
+            onClick={() => handleAction(onEdit)}
+            className="shrink-0 p-1.5 rounded-lg active:bg-muted text-muted-foreground active:text-foreground transition-colors"
+            title="Edit"
+          >
+            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+            </svg>
+          </button>
+          <button
+            data-testid="action-sheet-delete"
+            onClick={() => handleAction(onDelete)}
+            className="shrink-0 p-1.5 rounded-lg active:bg-destructive/10 text-muted-foreground active:text-destructive transition-colors"
+            title="Delete"
+          >
+            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+            </svg>
+          </button>
+          <div className="shrink-0 w-px h-6 bg-border mx-0.5" />
+        </>
+      )}
+      <button
+        data-testid="action-sheet-reply"
+        onClick={() => handleAction(onReply)}
+        className="shrink-0 p-1.5 rounded-lg active:bg-muted text-muted-foreground active:text-foreground transition-colors"
+        title="Reply"
+      >
+        <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" />
+        </svg>
+      </button>
+      <div className="shrink-0 w-px h-6 bg-border mx-0.5" />
+      {EMOJI_LIST.map((emoji) => (
+        <button
+          key={emoji}
+          data-testid={`context-emoji-${emoji}`}
+          onClick={() => handleAction(() => onReaction(emoji))}
+          className="shrink-0 w-8 h-8 rounded-lg flex items-center justify-center text-base active:scale-110 active:bg-muted transition-all"
+        >
+          {emoji}
+        </button>
+      ))}
+    </div>
+  )
+
+  return (
+    <div
+      data-testid="message-action-sheet-backdrop"
+      className="fixed inset-0 z-[9999]"
+      onClick={onClose}
+    >
+      <div className="absolute inset-0 bg-black/40 animate-in fade-in duration-150" />
+
+      <div
+        className="absolute animate-in fade-in zoom-in-95 duration-150"
+        style={{
+          top: messageRect.top,
+          left: messageRect.left,
+          width: messageRect.width,
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {layout === 'above' && (
+          <div className="absolute bottom-full mb-2 left-0 w-full">
+            {actionBar}
+          </div>
+        )}
+
+        <div
+          data-testid="highlighted-message"
+          className="bg-card rounded-lg shadow-xl border border-border px-4 py-2.5"
+        >
+          <p className="text-sm text-foreground/90 whitespace-pre-wrap break-words leading-relaxed">
+            {messageContent}
+          </p>
+        </div>
+
+        {layout === 'below' && (
+          <div className="mt-2 w-full">
+            {actionBar}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,65 @@
+/** MessageInput -- Auto-resizing chat composer. Enter sends, Shift+Enter newlines. */
+
+import { useState, useRef, useCallback } from 'react'
+
+interface MessageInputProps {
+  onSend: (content: string) => void
+  placeholder?: string
+}
+
+export function MessageInput({ onSend, placeholder = 'Type a message...' }: MessageInputProps) {
+  const [value, setValue] = useState('')
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+
+  const handleSend = useCallback(() => {
+    const trimmed = value.trim()
+    if (!trimmed) return
+    onSend(trimmed)
+    setValue('')
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto'
+    }
+  }, [value, onSend])
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault()
+      handleSend()
+    }
+  }
+
+  const handleInput = () => {
+    const el = textareaRef.current
+    if (!el) return
+    el.style.height = 'auto'
+    el.style.height = Math.min(el.scrollHeight, 160) + 'px'
+  }
+
+  return (
+    <div className="px-4 py-3 bg-background" data-testid="message-input-container">
+      <div className="flex items-end gap-2 bg-muted/50 border border-border rounded-lg focus-within:border-primary/40 transition-colors">
+        <textarea
+          ref={textareaRef}
+          data-testid="message-input"
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          onInput={handleInput}
+          placeholder={placeholder}
+          rows={1}
+          className="flex-1 bg-transparent px-4 py-2.5 text-sm text-foreground placeholder:text-muted-foreground resize-none outline-none max-h-40"
+        />
+        <button
+          data-testid="send-message-btn"
+          onClick={handleSend}
+          disabled={!value.trim()}
+          className="shrink-0 px-3 py-2 mr-1 mb-0.5 rounded-md flex items-center justify-center text-muted-foreground disabled:opacity-30 disabled:cursor-not-allowed hover:text-foreground transition-colors"
+        >
+          <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M3.478 2.405a.75.75 0 00-.926.94l2.432 7.905H13.5a.75.75 0 010 1.5H4.984l-2.432 7.905a.75.75 0 00.926.94 60.519 60.519 0 0018.445-8.986.75.75 0 000-1.218A60.517 60.517 0 003.478 2.405z" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  )
+}