@dxos/plugin-thread 0.8.4-main.72ec0f3 → 0.8.4-main.7996785055

package/src/components/ResponsiveGrid/ResponsiveGrid.tsx

@@ -8,9 +8,9 @@ import { useResizeDetector } from 'react-resize-detector';
 import { invariant } from '@dxos/invariant';
 import { type ThemedClassName } from '@dxos/react-ui';
 import { type Size } from '@dxos/react-ui-dnd';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
-import { ResponsiveContainer } from './ResponsiveContainer';
+import { ResponsivePanel } from './ResponsivePanel';
 import { type ResponsiveGridItemProps } from './ResponsiveGridItem';
 
 const ASPECT_RATIO = 16 / 9;
@@ -18,7 +18,7 @@ const MIN_GALLERY_HEIGHT = 250;
 
 const DEFAULT_GAP = 8;
 
-const maxImageSize = 'is-[2560px] bs-[1440px]';
+const maxImageSize = 'w-[2560px] h-[1440px]';
 
 /**
  * Props for the ResponsiveGrid component.
@@ -136,13 +136,13 @@ export const ResponsiveGrid = <T extends object = any>({
   );
 
   return (
-    <div ref={containerRef} className={mx('relative is-full bs-full', classNames)}>
+    <div ref={containerRef} className={mx('dx-expander relative', classNames)}>
       {/* Placeholder elements to calculate layout. */}
       <div className='absolute inset-0 flex flex-col grow gap-2'>
         {/* Pinned item. */}
         {pinnedItem && (
           <div
-            className={mx('flex grow-[2] shrink overflow-hidden justify-center items-center', hideGallery && 'bs-full')}
+            className={mx('flex grow-[2] shrink overflow-hidden justify-center items-center', hideGallery && 'h-full')}
             style={hideGallery ? {} : { height: dividerHeight }}
           >
             <SoloItem id={getId(pinnedItem)} debug={debug} />
@@ -157,7 +157,7 @@ export const ResponsiveGrid = <T extends object = any>({
             style={hideGallery ? {} : { minHeight: MIN_GALLERY_HEIGHT }}
           >
             {mainItems.length === 1 && (
-              <div style={{ width: cellWidth }} className='flex bs-full'>
+              <div style={{ width: cellWidth }} className='flex h-full'>
                 <SoloItem id={getId(mainItems[0])} debug={debug} />
               </div>
             )}
@@ -176,7 +176,7 @@ export const ResponsiveGrid = <T extends object = any>({
                     key={getId(item)}
                     {...{ 'data-grid-item': getId(item) }}
                     className={mx(
-                      'aspect-video max-bs-full max-is-full is-auto bs-auto',
+                      'aspect-video max-h-full max-w-full w-auto h-auto',
                       debug && 'border border-primary-500',
                     )}
                   />
@@ -206,7 +206,7 @@ export const ResponsiveGrid = <T extends object = any>({
 
 const SoloItem: FC<Pick<ResponsiveGridProps, 'debug'> & { id: string }> = ({ debug, id }) => {
   return (
-    <ResponsiveContainer>
+    <ResponsivePanel>
       <div
         {...{ 'data-grid-item': id }}
         className={mx('aspect-video overflow-hidden', debug && 'z-20 border-2 border-primary-500')}
@@ -214,7 +214,7 @@ const SoloItem: FC<Pick<ResponsiveGridProps, 'debug'> & { id: string }> = ({ deb
         {/* Maximum size placeholder image forces aspect ratio. */}
         <img alt='placeholder video' className={mx('opacity-0', maxImageSize)} />
       </div>
-    </ResponsiveContainer>
+    </ResponsivePanel>
   );
 };
 

package/src/components/ResponsiveGrid/ResponsiveGridItem.tsx

@@ -6,7 +6,7 @@ import React, { type CSSProperties, type PropsWithChildren, useEffect, useState
 
 import { Icon, IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import { Waveform } from '@dxos/react-ui-sfx';
-import { groupHoverControlItemWithTransition, mx } from '@dxos/react-ui-theme';
+import { groupHoverControlItemWithTransition, mx } from '@dxos/ui-theme';
 
 import { meta } from '../../meta';
 
@@ -76,7 +76,7 @@ export const ResponsiveGridItem = <T extends object = any>({
   return (
     <div
       className={mx(
-        'relative is-full bs-full group',
+        'dx-expander relative group',
         'rounded-md outline outline-2 outline-neutral-900 transition-[outline-color] duration-500',
         speakingIndicator ? 'outline-green-500' : !video && 'outline-separator',
         classNames,
@@ -89,7 +89,7 @@ export const ResponsiveGridItem = <T extends object = any>({
       {onClick && (
         <div className='z-10 absolute top-1 right-1 flex'>
           <IconButton
-            classNames={mx('p-1 min-bs-1 rounded', groupHoverControlItemWithTransition)}
+            classNames={mx('p-1 min-h-1 rounded-sm', groupHoverControlItemWithTransition)}
             iconOnly
             icon={pinned ? 'ph--x--regular' : 'ph--arrows-out--regular'}
             size={pinned ? 5 : 4}
@@ -107,8 +107,8 @@ export const ResponsiveGridItem = <T extends object = any>({
           {screenshare && <Icon icon='ph--broadcast--regular' size={pinned ? 5 : 4} />}
           <div
             className={mx(
-              'bg-neutral-800 text-neutral-100 plb-0.5 truncate rounded',
-              pinned ? 'pli-2' : 'pli-1 text-xs',
+              'bg-neutral-800 text-neutral-100 py-0.5 truncate rounded-sm',
+              pinned ? 'px-2' : 'px-1 text-xs',
             )}
           >
             {name}
@@ -121,7 +121,7 @@ export const ResponsiveGridItem = <T extends object = any>({
         {(speaking && <Waveform active size={pinned ? 5 : 4} />) ||
           (props && (
             <IconButton
-              classNames={mx('p-1 min-bs-1 rounded', props?.classNames)}
+              classNames={mx('p-1 min-h-1 rounded-sm', props?.classNames)}
               icon={props?.icon}
               label={props?.label}
               size={pinned ? 5 : 4}

package/src/components/ResponsiveGrid/{ResponsiveContainer.stories.tsx → ResponsivePanel.stories.tsx}

@@ -5,26 +5,26 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { translations } from '../../translations';
 import { VideoObject as VideoObjectComponent } from '../Media';
 
-import { ResponsiveContainer } from './ResponsiveContainer';
+import { ResponsivePanel } from './ResponsivePanel';
 
 const meta = {
-  title: 'plugins/plugin-thread/ResponsiveContainer',
-  component: ResponsiveContainer,
-  decorators: [withTheme],
+  title: 'plugins/plugin-thread/components/ResponsivePanel',
+  component: ResponsivePanel,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
     translations,
   },
-} satisfies Meta<typeof ResponsiveContainer>;
+} satisfies Meta<typeof ResponsivePanel>;
 
 export default meta;
 
-type Story = StoryObj<typeof ResponsiveContainer>;
+type Story = StoryObj<typeof ResponsivePanel>;
 
 export const Image: Story = {
   args: {

package/src/components/ResponsiveGrid/{ResponsiveContainer.tsx → ResponsivePanel.tsx}

@@ -4,25 +4,25 @@
 
 import React, { type PropsWithChildren } from 'react';
 
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 /**
  * A container component that maintains the child's aspect ratio while centering its content.
  * The container will scale to fit within its parent's bounds while preserving the aspect ratio.
  *
  * @example
- * <ResponsiveContainer>
+ * <ResponsivePanel>
  *   <VideoObject />
- * </ResponsiveContainer>
+ * </ResponsivePanel>
  */
-export const ResponsiveContainer = ({ children }: PropsWithChildren) => {
+export const ResponsivePanel = ({ children }: PropsWithChildren) => {
   return (
     // Outer container that takes full size of parent.
-    <div role='none' className='relative flex is-full bs-full'>
+    <div role='none' className='dx-expander relative flex'>
       {/* Absolute positioning layer for centering content. */}
       <div role='none' className='absolute inset-0 flex justify-center items-center'>
         {/* Content container that maintains given aspect ratio and proper scaling. */}
-        <div role='none' className={mx('max-bs-full max-is-full is-auto bs-auto aspect-video')}>
+        <div role='none' className={mx('max-h-full max-w-full w-auto h-auto aspect-video')}>
           {children}
         </div>
       </div>

package/src/components/ResponsiveGrid/index.ts

@@ -2,6 +2,6 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './ResponsiveContainer';
+export * from './ResponsivePanel';
 export * from './ResponsiveGrid';
 export * from './ResponsiveGridItem';

package/src/components/index.ts

@@ -2,17 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import { lazy } from 'react';
-
-// TODO(wittjosiah): Suspense boundary for sidebar?
 export * from './Call';
-export * from './CallDebugPanel';
-export * from './CallSidebar';
-export * from './CommentsContainer';
-export * from './CommentsThreadContainer';
-export * from './MessageContainer';
-export * from './ThreadCompanion';
-export * from './ThreadSettings';
-
-export const ChannelContainer = lazy(() => import('./ChannelContainer'));
-export const ChatContainer = lazy(() => import('./ChatContainer'));
+export * from './CommentsPanel';
+export * from './MessagePanel';

package/src/{components → containers/CallDebugPanel}/CallDebugPanel.tsx

@@ -10,8 +10,8 @@ import { JsonView, Panel } from '@dxos/devtools';
 import { log } from '@dxos/log';
 import { IconButton, Input, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 
-import { type EncodedTrackName, type GlobalState } from '../calls';
-import { meta } from '../meta';
+import { type EncodedTrackName, type GlobalState } from '../../calls';
+import { meta } from '../../meta';
 
 export type CallDebugPanelProps = ThemedClassName<{ state?: GlobalState }>;
 
@@ -74,7 +74,7 @@ export const CallDebugPanel = ({ state }: CallDebugPanelProps) => {
       info={<div className='flex items-center gap-2'> {state?.call.joined ? 'Active' : 'Inactive'}</div>}
       maxHeight={0}
     >
-      <div className='flex flex-col is-full text-xs'>
+      <div className='flex flex-col w-full text-xs'>
         <div className='flex items-center gap-2 items-center'>
           <Input.Root>
             <Input.Switch checked={showDetailedWebRTCStats} onCheckedChange={handleShowDetailedWebRTCStats} />
@@ -158,7 +158,7 @@ export type TableProps = {
 
 export const Table = ({ rows }: TableProps) => {
   return (
-    <div className='is-full text-xs font-mono'>
+    <div className='w-full text-xs font-mono'>
       {rows.map(([prefix, label, value, unit], i) => (
         <div key={i} className='grid grid-cols-[3fr_1fr_1fr_1fr]'>
           <div className='p-1'>{prefix}</div>

package/src/containers/CallDebugPanel/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { CallDebugPanel } from './CallDebugPanel';
+
+export default CallDebugPanel;

package/src/containers/CallSidebar/CallSidebar.tsx

@@ -0,0 +1,17 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useAtomValue } from '@effect-atom/atom-react';
+import React from 'react';
+
+import { useCapability } from '@dxos/app-framework/ui';
+
+import { ThreadCapabilities } from '../../types';
+import ChannelContainer from '../ChannelContainer';
+
+export const CallSidebar = () => {
+  const call = useCapability(ThreadCapabilities.CallManager);
+  const roomId = useAtomValue(call.roomIdAtom);
+  return <ChannelContainer subject={undefined} attendableId={roomId ?? ''} roomId={roomId} />;
+};

package/src/containers/CallSidebar/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { CallSidebar } from './CallSidebar';
+
+export default CallSidebar;

package/src/containers/ChannelContainer/ChannelContainer.stories.tsx

@@ -0,0 +1,59 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { Capability } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { AppCapabilities } from '@dxos/app-toolkit';
+import { Query, useDatabase, useQuery } from '@dxos/react-client/echo';
+import { withLayout, withTheme, Loading } from '@dxos/react-ui/testing';
+import { Message, Thread } from '@dxos/types';
+
+import { createThreadPlugins } from '../../testing';
+import { translations } from '../../translations';
+import { Channel } from '../../types';
+
+import { ChannelContainer, type ChannelContainerProps } from './ChannelContainer';
+
+// TODO(wittjosiah): Channel doesn't render full height.
+const DefaultStory = ({ roomId }: ChannelContainerProps) => {
+  const db = useDatabase();
+  const [channel] = useQuery(db, Query.type(Channel.Channel));
+  if (!channel) {
+    return <Loading data={{ db: !!db, channel: !!channel }} />;
+  }
+
+  return <ChannelContainer subject={channel} roomId={roomId} />;
+};
+
+const meta = {
+  title: 'plugins/plugin-thread/containers/ChannelContainer',
+  component: ChannelContainer,
+  render: DefaultStory,
+  decorators: [
+    withTheme(),
+    withLayout({ layout: 'column' }),
+    withPluginManager({
+      plugins: [...(await createThreadPlugins())],
+      capabilities: [Capability.contributes(AppCapabilities.Schema, [Channel.Channel, Thread.Thread, Message.Message])],
+    }),
+  ],
+  parameters: {
+    translations,
+  },
+} satisfies Meta<typeof ChannelContainer>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    // Fixed room for testing.
+    subject: undefined,
+    roomId: '04a1d1911703b8e929d0649021a965',
+  },
+};

package/src/{components → containers/ChannelContainer}/ChannelContainer.tsx

@@ -2,53 +2,59 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Atom } from '@effect-atom/atom-react';
+import { Atom, useAtomValue } from '@effect-atom/atom-react';
 import React, { type ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react';
 
-import { useCapabilities, useCapability } from '@dxos/app-framework/react';
+import { useCapabilities, useCapability } from '@dxos/app-framework/ui';
+import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
 import { Context } from '@dxos/context';
 import { failUndefined } from '@dxos/debug';
-import { Obj } from '@dxos/echo';
 import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
 import { getSpace } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
-import { ElevationProvider, Input, useTranslation } from '@dxos/react-ui';
-import { ControlGroup, ControlGroupButton, ControlItemInput } from '@dxos/react-ui-form';
-import { MenuProvider, ToolbarMenu, createMenuAction, createMenuItemGroup, useMenuActions } from '@dxos/react-ui-menu';
+import { ElevationProvider, Input, Panel, useTranslation } from '@dxos/react-ui';
+import { Settings } from '@dxos/react-ui-form';
+import { Menu, MenuRootProps, createMenuAction, createMenuItemGroup, useMenuActions } from '@dxos/react-ui-menu';
 import { useSoundEffect } from '@dxos/react-ui-sfx';
-import { StackItem } from '@dxos/react-ui-stack';
-
-import { ThreadCapabilities } from '../capabilities';
-import { meta } from '../meta';
-import { type Channel } from '../types';
-
-import { Call } from './Call';
-import ChatContainer from './ChatContainer';
-
-// TODO(burdon): Create Radix style layout.
-
-export type ChannelContainerProps = {
-  channel?: Channel.Channel;
-  roomId?: string;
-  role?: string;
-  fullscreen?: boolean;
-};
+import { composable, composableProps } from '@dxos/ui-theme';
+
+import { Call } from '../../components';
+import { meta } from '../../meta';
+import { ThreadCapabilities } from '../../types';
+import { type Channel } from '../../types';
+import { ChatContainer } from '../ChatContainer';
+
+export type ChannelContainerProps = SurfaceComponentProps<
+  Channel.Channel | undefined,
+  {
+    roomId?: string;
+    fullscreen?: boolean;
+  }
+>;
 
 /**
  * Renders a call when active, otherwise renders the channel chat.
  */
-export const ChannelContainer = ({ channel, roomId: _roomId, role, fullscreen }: ChannelContainerProps) => {
+// TODO(burdon): Create Radix style layout.
+export const ChannelContainer = ({
+  role,
+  subject: channel,
+  attendableId,
+  roomId: roomIdProp,
+  fullscreen,
+}: ChannelContainerProps) => {
   const space = getSpace(channel);
   const callManager = useCapability(ThreadCapabilities.CallManager);
-  const attendableId = channel ? Obj.getDXN(channel).toString() : undefined;
-  const roomId = _roomId ?? attendableId ?? failUndefined();
+  const extensions = useCapabilities(ThreadCapabilities.CallExtension);
+  const joined = useAtomValue(callManager.joinedAtom);
+  const currentRoomId = useAtomValue(callManager.roomIdAtom);
+  const roomId = roomIdProp ?? attendableId ?? failUndefined();
   const identity = useIdentity();
   const isNamed = !!identity?.profile?.displayName;
   const joinSound = useSoundEffect('JoinCall');
   const leaveSound = useSoundEffect('LeaveCall');
 
-  const extensions = useCapabilities(ThreadCapabilities.CallExtension);
   useEffect(() => {
     const ctx = new Context();
     callManager.left.on(ctx, (roomId) => {
@@ -83,7 +89,7 @@ export const ChannelContainer = ({ channel, roomId: _roomId, role, fullscreen }:
       return;
     }
 
-    if (callManager.joined) {
+    if (joined) {
       await callManager.leave();
     }
 
@@ -96,7 +102,7 @@ export const ChannelContainer = ({ channel, roomId: _roomId, role, fullscreen }:
       // TODO(burdon): Error sound.
       log.catch(err);
     }
-  }, [extensions, channel, roomId]);
+  }, [extensions, channel, roomId, joined]);
 
   /**
    * Leave the call.
@@ -115,29 +121,40 @@ export const ChannelContainer = ({ channel, roomId: _roomId, role, fullscreen }:
     }
   }, [extensions, roomId]);
 
-  const isJoined = callManager.joined && callManager.roomId === roomId;
-
-  return (
-    <StackItem.Content classNames={isJoined && 'bs-full'} toolbar={!isJoined}>
-      {isJoined && !isNamed && <DisplayNameMissing />}
-      {isJoined && isNamed && (
-        <Call.Root>
-          <Call.Grid fullscreen={fullscreen} />
-          <Call.Toolbar channel={channel} onLeave={handleLeave} />
-        </Call.Root>
-      )}
-      {!isJoined && channel && channel.defaultThread.target && space && (
-        <>
+  const isJoined = joined && currentRoomId === roomId;
+  if (isJoined) {
+    return (
+      <Panel.Root>
+        <Panel.Content>
+          {isNamed ? (
+            <Call.Root>
+              <Call.Grid fullscreen={fullscreen} />
+              <Call.Toolbar channel={channel} onLeave={handleLeave} />
+            </Call.Root>
+          ) : (
+            <DisplayNameMissing />
+          )}
+        </Panel.Content>
+      </Panel.Root>
+    );
+  }
+
+  if (channel && channel.defaultThread.target && space) {
+    return (
+      <Panel.Root classNames='dx-document'>
+        <Panel.Toolbar asChild>
           <ChannelToolbar attendableId={attendableId} role={role} onJoinCall={handleJoin} />
-          <ChatContainer space={space} thread={channel.defaultThread.target} classNames='container-max-width' />
-        </>
-      )}
-    </StackItem.Content>
-  );
+        </Panel.Toolbar>
+        <Panel.Content asChild>
+          <ChatContainer space={space} thread={channel.defaultThread.target} />
+        </Panel.Content>
+      </Panel.Root>
+    );
+  }
+
+  return null;
 };
 
-export default ChannelContainer;
-
 const DisplayNameMissing = () => {
   const { t } = useTranslation(meta.id);
   const client = useClient();
@@ -146,19 +163,19 @@ const DisplayNameMissing = () => {
   const handleSave = useCallback(() => client.halo.updateProfile({ displayName }), [client, displayName]);
 
   return (
-    <ControlGroup classNames='p-4 place-content-center'>
-      <ControlItemInput title={t('display name label')} description={t('display name description')}>
+    <Settings.Group classNames='p-4 place-content-center'>
+      <Settings.ItemInput title={t('display name label')} description={t('display name description')}>
         <Input.TextInput
           value={displayName}
           onChange={handleChange}
           placeholder={t('display name input placeholder')}
-          classNames='md:min-is-64'
+          classNames='md:min-w-64'
         />
-      </ControlItemInput>
-      <ControlGroupButton disabled={!displayName} onClick={handleSave}>
+      </Settings.ItemInput>
+      <Settings.GroupButton disabled={!displayName} onClick={handleSave}>
         {t('set display name label')}
-      </ControlGroupButton>
-    </ControlGroup>
+      </Settings.GroupButton>
+    </Settings.Group>
   );
 };
 
@@ -177,7 +194,7 @@ const useChannelToolbarActions = (onJoinCall?: () => void) => {
               type: 'video-call',
             }),
           ],
-          edges: [{ source: 'root', target: 'video-call' }],
+          edges: [{ source: 'root', target: 'video-call', relation: 'child' }],
         };
       }),
     [],
@@ -186,20 +203,20 @@ const useChannelToolbarActions = (onJoinCall?: () => void) => {
   return useMenuActions(creator);
 };
 
-type ChannelToolbarProps = {
-  attendableId?: string;
-  role?: string;
+type ChannelToolbarProps = Pick<MenuRootProps, 'attendableId'> & {
   onJoinCall?: () => void;
 };
 
-const ChannelToolbar = ({ attendableId, role, onJoinCall }: ChannelToolbarProps) => {
-  const menuProps = useChannelToolbarActions(onJoinCall);
-
-  return (
-    <ElevationProvider elevation={role === 'section' ? 'positioned' : 'base'}>
-      <MenuProvider {...menuProps} attendableId={attendableId}>
-        <ToolbarMenu textBlockWidth />
-      </MenuProvider>
-    </ElevationProvider>
-  );
-};
+const ChannelToolbar = composable<HTMLDivElement, ChannelToolbarProps>(
+  ({ attendableId, role, onJoinCall, ...props }, forwardedRef) => {
+    const menuActions = useChannelToolbarActions(onJoinCall);
+
+    return (
+      <ElevationProvider elevation={role === 'section' ? 'positioned' : 'base'}>
+        <Menu.Root {...menuActions} attendableId={attendableId}>
+          <Menu.Toolbar {...composableProps(props)} ref={forwardedRef} />
+        </Menu.Root>
+      </ElevationProvider>
+    );
+  },
+);

package/src/containers/ChannelContainer/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { ChannelContainer } from './ChannelContainer';
+
+export default ChannelContainer;