experimental-a2 0.20.0 → 0.22.0

package/examples/playground/app/a2slack/ui/Composer.tsx

@@ -0,0 +1,117 @@
+'use client'
+import { useEffect, useRef, useState, type ReactNode } from 'react'
+import { useIdentity } from '../identity'
+import { useWorkspace } from '../sessions'
+
+const TYPING_IDLE_MS = 3000
+
+export function Composer({
+  channel,
+  threadId,
+  placeholder,
+  autoFocus = false,
+  compact = false,
+}: {
+  channel: string
+  threadId?: string
+  placeholder: string
+  autoFocus?: boolean
+  compact?: boolean
+}): ReactNode {
+  const identity = useIdentity()
+  const { push, presence, setPresence } = useWorkspace()
+  const [text, setText] = useState('')
+  const areaRef = useRef<HTMLTextAreaElement>(null)
+  const idleTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+  // The workspace session outlives this channel, so leaving it while typing
+  // has to say so: nothing else would clear the field.
+  const stopRef = useRef<(() => void) | null>(null)
+
+  const stopTyping = (): void => {
+    clearTimeout(idleTimer.current)
+    stopRef.current = null
+    setPresence({ typing: null })
+  }
+
+  useEffect(
+    () => () => {
+      clearTimeout(idleTimer.current)
+      stopRef.current?.()
+    },
+    [],
+  )
+
+  useEffect(() => {
+    const el = areaRef.current
+    if (!el) return
+    el.style.height = 'auto'
+    el.style.height = `${Math.min(el.scrollHeight, 160)}px`
+  }, [text])
+
+  // Everyone typing in this channel but you.
+  const typing = Object.entries(presence)
+    .filter(([participant]) => participant !== identity?.id)
+    .flatMap(([, fields]) => {
+      const value = fields.typing?.value
+      return value?.channel === channel ? [value.name] : []
+    })
+
+  const canSend = identity !== null && text.trim().length > 0
+
+  const send = (): void => {
+    const trimmed = text.trim()
+    if (!identity || !trimmed) return
+    push({
+      type: 'message.posted',
+      payload: {
+        channel,
+        author: identity,
+        text: trimmed,
+        ...(threadId !== undefined ? { threadId } : {}),
+      },
+    }).catch(() => {})
+    setText('')
+    stopTyping()
+  }
+
+  return (
+    <div className="a2slack-composer" data-compact={compact || undefined}>
+      <div className="a2slack-composer-box">
+        <textarea
+          className="a2slack-composer-textarea"
+          ref={areaRef}
+          autoFocus={autoFocus}
+          rows={1}
+          maxLength={2000}
+          placeholder={identity ? placeholder : 'pick a name first'}
+          disabled={!identity}
+          value={text}
+          onChange={(e) => {
+            setText(e.target.value)
+            if (!identity) return
+            setPresence({ typing: { name: identity.name, channel } })
+            stopRef.current = () => setPresence({ typing: null })
+            clearTimeout(idleTimer.current)
+            idleTimer.current = setTimeout(stopTyping, TYPING_IDLE_MS)
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+              e.preventDefault()
+              send()
+            }
+          }}
+        />
+        <div className="a2slack-composer-footer">
+          <span className="a2slack-typing">
+            {!compact &&
+              typing.length > 0 &&
+              `${typing.join(', ')} ${typing.length === 1 ? 'is' : 'are'} typing…`}
+          </span>
+          <button className="a2slack-send" disabled={!canSend} onClick={send}>
+            send ⏎
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/examples/playground/app/a2slack/ui/DotsShadow.tsx

@@ -0,0 +1,42 @@
+'use client'
+import { DotGrid } from '@paper-design/shaders-react'
+import { useEffect, useState, type ReactNode } from 'react'
+
+function useShaderColors(): { background: string; foreground: string } {
+  const [dark, setDark] = useState(
+    () => window.matchMedia('(prefers-color-scheme: dark)').matches,
+  )
+
+  useEffect(() => {
+    const query = window.matchMedia('(prefers-color-scheme: dark)')
+    const onChange = (): void => setDark(query.matches)
+    query.addEventListener('change', onChange)
+    return () => query.removeEventListener('change', onChange)
+  }, [])
+
+  return {
+    background: dark ? '#04040495' : '#fafafa95',
+    foreground: dark ? '#404040' : '#d9d9d9',
+  }
+}
+
+export function DotsShadow(): ReactNode {
+  const colors = useShaderColors()
+
+  return (
+    <div className="a2slack-dots" aria-hidden>
+      <DotGrid
+        colorBack={colors.background}
+        colorFill={colors.foreground}
+        gapX={16}
+        gapY={16}
+        opacityRange={0}
+        scale={0.2}
+        shape="circle"
+        size={5}
+        sizeRange={0.6}
+        style={{ width: '100%', height: '100%' }}
+      />
+    </div>
+  )
+}

package/examples/playground/app/a2slack/ui/Feed.tsx

@@ -0,0 +1,157 @@
+'use client'
+import {
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react'
+import {
+  liveMessages,
+  type ChatMessage,
+  type MessagePage,
+} from '@/app/a2slack/model'
+import { useWorkspace } from '../sessions'
+import { MessageRow } from './MessageRow'
+
+const dayOf = (at: string): string =>
+  new Date(at).toLocaleDateString([], {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  })
+
+/**
+ * The channel's messages: the pages read from `/a2slack/messages` while
+ * scrolling back, then the newest page, each kept live from the workspace's
+ * events. Only the newest page gains new messages.
+ */
+export function Feed({
+  channel,
+  newest,
+  more,
+  onOpenThread,
+}: {
+  channel: string
+  /** The newest page, already live. */
+  newest: ChatMessage[]
+  /** Older messages exist before the newest page. */
+  more: boolean
+  onOpenThread: (rootId: string) => void
+}): ReactNode {
+  const { events } = useWorkspace()
+  // Pages loaded by scrolling back, oldest first.
+  const [older, setOlder] = useState<MessagePage[]>([])
+  const [loading, setLoading] = useState(false)
+  const [failed, setFailed] = useState(false)
+
+  const feed = useMemo(
+    () => [
+      ...older.flatMap((page) =>
+        liveMessages(page, events, { channel, append: false }),
+      ),
+      ...newest,
+    ],
+    [older, events, channel, newest],
+  )
+
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const pinnedRef = useRef(true)
+  // Where the viewport stood when an older page arrived, to keep it there.
+  const anchorRef = useRef<{ height: number; top: number } | null>(null)
+  const lastId = feed.at(-1)?.id
+
+  // Follow new messages while pinned to the bottom.
+  useLayoutEffect(() => {
+    const el = scrollRef.current
+    if (el && pinnedRef.current) el.scrollTop = el.scrollHeight
+  }, [lastId])
+
+  // Keep the viewport anchored when an older page prepends above it.
+  useLayoutEffect(() => {
+    const el = scrollRef.current
+    const anchor = anchorRef.current
+    if (!el || !anchor) return
+    anchorRef.current = null
+    el.scrollTop = anchor.top + el.scrollHeight - anchor.height
+  }, [older])
+
+  const oldest = older[0]?.messages[0] ?? newest[0]
+  const hasMore = older[0]?.more ?? more
+
+  const loadEarlier = async (): Promise<void> => {
+    if (oldest === undefined || loading) return
+    setLoading(true)
+    setFailed(false)
+    pinnedRef.current = false
+    try {
+      const response = await fetch(
+        `/a2slack/messages?channel=${encodeURIComponent(channel)}&before=${oldest.index}`,
+      )
+      if (!response.ok) throw new Error(`messages: ${response.status}`)
+      const page = (await response.json()) as MessagePage
+      const el = scrollRef.current
+      if (el) anchorRef.current = { height: el.scrollHeight, top: el.scrollTop }
+      setOlder((pages) => [page, ...pages])
+    } catch {
+      setFailed(true)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div
+      ref={scrollRef}
+      className="a2slack-feed"
+      onScroll={(e) => {
+        const el = e.currentTarget
+        pinnedRef.current =
+          el.scrollHeight - el.scrollTop - el.clientHeight < 40
+      }}
+    >
+      {hasMore && (
+        <button
+          className="a2slack-older"
+          disabled={loading}
+          onClick={() => void loadEarlier()}
+        >
+          {loading
+            ? 'loading…'
+            : failed
+              ? "↑ earlier messages (didn't load, try again)"
+              : '↑ earlier messages'}
+        </button>
+      )}
+      {feed.length === 0 && (
+        <p className="a2slack-feed-empty">no messages yet — say something</p>
+      )}
+      {feed.map((message, i) => {
+        const prev = feed[i - 1]
+        const newDay =
+          prev === undefined || dayOf(prev.at) !== dayOf(message.at)
+        const grouped =
+          !newDay &&
+          prev !== undefined &&
+          !prev.deleted &&
+          prev.author.id === message.author.id &&
+          Date.parse(message.at) - Date.parse(prev.at) < 5 * 60 * 1000
+        return (
+          <div key={message.id}>
+            {newDay && (
+              <div className="a2slack-day">
+                <span>{dayOf(message.at)}</span>
+                <span className="a2slack-day-line" />
+              </div>
+            )}
+            <MessageRow
+              message={message}
+              grouped={grouped}
+              onOpenThread={onOpenThread}
+            />
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/examples/playground/app/a2slack/ui/InboxContext.tsx

@@ -0,0 +1,63 @@
+/**
+ * The inbox, shared by the sidebar (its row and unread badge), the main
+ * column (the list), and the thread panel (which marks what it shows read).
+ * One page read serves all three.
+ */
+'use client'
+import {
+  createContext,
+  useContext,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react'
+import { useIdentity } from '../identity'
+import { useWorkspace } from '../sessions'
+import { useInbox, type Inbox } from './useInbox'
+
+export type InboxPanel = Inbox & {
+  /** The list shows in the main column. */
+  open: boolean
+  setOpen: (open: boolean) => void
+  /** Marks a thread's notifications read, through its latest one. */
+  markRead: (threadId: string) => void
+}
+
+const InboxContext = createContext<InboxPanel | null>(null)
+
+export function useInboxPanel(): InboxPanel {
+  const inbox = useContext(InboxContext)
+  if (inbox === null) throw new Error('useInboxPanel needs an InboxProvider')
+  return inbox
+}
+
+export function InboxProvider({
+  children,
+}: {
+  children: ReactNode
+}): ReactNode {
+  const identity = useIdentity()
+  const { push } = useWorkspace()
+  const inbox = useInbox(identity?.id ?? null)
+  const [open, setOpen] = useState(false)
+  // What this tab has already marked, so a re-render before the read lands
+  // doesn't send it again.
+  const marked = useRef(new Map<string, number>())
+
+  const markRead = (threadId: string): void => {
+    const item = inbox.items.find((other) => other.threadId === threadId)
+    if (!identity || !item || item.unread === 0) return
+    if ((marked.current.get(threadId) ?? -1) >= item.index) return
+    marked.current.set(threadId, item.index)
+    push({
+      type: 'inbox.read',
+      payload: { by: identity.id, threadId, through: item.index },
+    }).catch(() => {})
+  }
+
+  return (
+    <InboxContext value={{ ...inbox, open, setOpen, markRead }}>
+      {children}
+    </InboxContext>
+  )
+}

package/examples/playground/app/a2slack/ui/InboxView.tsx

@@ -0,0 +1,82 @@
+'use client'
+import type { ReactNode } from 'react'
+import Link from 'next/link'
+import type { InboxItem } from '@/app/a2slack/model'
+import { useInboxPanel } from './InboxContext'
+
+const whenOf = (at: string): string =>
+  new Date(at).toLocaleString([], {
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+
+const REASON: Record<InboxItem['reason'], string> = {
+  mention: 'mentioned you',
+  reply: "replied in a thread you're in",
+}
+
+/** The main column while the inbox is open: one row per thread with news. */
+export function InboxView(): ReactNode {
+  const inbox = useInboxPanel()
+  if (!inbox.open) return null
+
+  const status = inbox.loading
+    ? 'loading…'
+    : inbox.error !== null
+      ? 'unavailable'
+      : `${inbox.unread} unread`
+
+  return (
+    <section
+      className="a2slack-results"
+      aria-label="inbox"
+      onKeyDown={(e) => {
+        if (e.key === 'Escape') inbox.setOpen(false)
+      }}
+    >
+      <header className="a2slack-header">
+        <span className="a2slack-header-name">inbox</span>
+        <span className="a2slack-status" role="status">
+          {status}
+        </span>
+      </header>
+      <div className="a2slack-results-list">
+        {inbox.error !== null ? (
+          <p className="a2slack-results-hint">{inbox.error}</p>
+        ) : (
+          !inbox.loading &&
+          inbox.items.length === 0 && (
+            <p className="a2slack-results-hint">
+              nothing yet — mentions and replies in your threads land here
+            </p>
+          )
+        )}
+        {inbox.items.map((item) => (
+          <Link
+            key={item.threadId}
+            href={`/a2slack/c/${item.channel}?thread=${encodeURIComponent(item.threadId)}`}
+            className="a2slack-result"
+            data-unread={item.unread > 0 || undefined}
+            onClick={() => {
+              inbox.markRead(item.threadId)
+              inbox.setOpen(false)
+            }}
+          >
+            <div className="a2slack-meta">
+              <span className="a2slack-result-channel">#{item.channel}</span>
+              <span className="a2slack-author">{item.from.name}</span>
+              <span className="a2slack-time">{REASON[item.reason]}</span>
+              <span className="a2slack-time">{whenOf(item.at)}</span>
+              {item.unread > 0 && (
+                <span className="a2slack-unread">{item.unread}</span>
+              )}
+            </div>
+            <p className="a2slack-result-text">{item.text}</p>
+          </Link>
+        ))}
+      </div>
+    </section>
+  )
+}

package/examples/playground/app/a2slack/ui/Menu.tsx

@@ -0,0 +1,128 @@
+'use client'
+import { Menu as BaseMenu } from '@base-ui/react/menu'
+import { ContextMenu as BaseContextMenu } from '@base-ui/react/context-menu'
+import { useCallback, useState, type ReactNode } from 'react'
+import { DotsShadow } from './DotsShadow'
+
+/**
+ * Menus portal into the page root, not the body, so they keep a2slack's
+ * tokens. Returns a ref for the trigger and the root it found.
+ */
+function usePageRoot(): [
+  (element: Element | null) => void,
+  HTMLElement | null,
+] {
+  const [root, setRoot] = useState<HTMLElement | null>(null)
+  const ref = useCallback((element: Element | null) => {
+    if (element) setRoot(element.closest<HTMLElement>('.a2slack-page'))
+  }, [])
+  return [ref, root]
+}
+
+function Popup({ children }: { children: ReactNode }): ReactNode {
+  return (
+    <div className="a2slack-menu-wrapper">
+      <BaseMenu.Popup className="a2slack-menu-popup">{children}</BaseMenu.Popup>
+      <DotsShadow />
+    </div>
+  )
+}
+
+export function Menu({
+  trigger,
+  children,
+  onOpenChange,
+  triggerClassName = 'a2slack-menu-trigger',
+}: {
+  trigger: ReactNode
+  children: ReactNode
+  onOpenChange?: (open: boolean) => void
+  /** Replaces the trigger's own look. */
+  triggerClassName?: string
+}): ReactNode {
+  const [ref, root] = usePageRoot()
+  return (
+    <BaseMenu.Root {...(onOpenChange ? { onOpenChange } : {})}>
+      <BaseMenu.Trigger ref={ref} className={triggerClassName}>
+        {trigger}
+      </BaseMenu.Trigger>
+      <BaseMenu.Portal container={root}>
+        <BaseMenu.Positioner
+          className="a2slack-menu-positioner"
+          align="end"
+          sideOffset={4}
+        >
+          <Popup>{children}</Popup>
+        </BaseMenu.Positioner>
+      </BaseMenu.Portal>
+    </BaseMenu.Root>
+  )
+}
+
+export function ContextMenuArea({
+  menu,
+  children,
+  onOpenChange,
+}: {
+  menu: ReactNode
+  children: ReactNode
+  onOpenChange?: (open: boolean) => void
+}): ReactNode {
+  const [ref, root] = usePageRoot()
+  return (
+    <BaseContextMenu.Root {...(onOpenChange ? { onOpenChange } : {})}>
+      <BaseContextMenu.Trigger ref={ref}>{children}</BaseContextMenu.Trigger>
+      <BaseContextMenu.Portal container={root}>
+        <BaseContextMenu.Positioner className="a2slack-menu-positioner">
+          <Popup>{menu}</Popup>
+        </BaseContextMenu.Positioner>
+      </BaseContextMenu.Portal>
+    </BaseContextMenu.Root>
+  )
+}
+
+export function MenuItem({
+  onClick,
+  danger,
+  children,
+}: {
+  onClick: () => void
+  danger?: boolean
+  children: ReactNode
+}): ReactNode {
+  return (
+    <BaseMenu.Item
+      className="a2slack-menu-item"
+      {...(danger === true ? { 'data-danger': '' } : {})}
+      onClick={onClick}
+    >
+      {children}
+    </BaseMenu.Item>
+  )
+}
+
+export function MenuSeparator(): ReactNode {
+  return <BaseMenu.Separator className="a2slack-menu-separator" />
+}
+
+export function MenuEmojiRow({
+  emojis,
+  onPick,
+}: {
+  emojis: readonly string[]
+  onPick: (emoji: string) => void
+}): ReactNode {
+  return (
+    <div className="a2slack-emoji-row">
+      {emojis.map((emoji) => (
+        <BaseMenu.Item
+          key={emoji}
+          className="a2slack-menu-item a2slack-emoji-item"
+          onClick={() => onPick(emoji)}
+        >
+          {emoji}
+        </BaseMenu.Item>
+      ))}
+    </div>
+  )
+}