@dxos/plugin-thread 0.8.4-main.1f223c7 → 0.8.4-main.2244d791bb

package/src/capabilities/repair/repair.ts

@@ -0,0 +1,51 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability } from '@dxos/app-framework';
+import { Obj, Ref, Type } from '@dxos/echo';
+import { SpaceCapabilities } from '@dxos/plugin-space';
+import { type Space } from '@dxos/react-client/echo';
+import { Collection } from '@dxos/schema';
+
+import { Channel } from '../../types';
+
+export default Capability.makeModule(() =>
+  Effect.succeed(
+    Capability.contributes(
+      SpaceCapabilities.Repair,
+      async ({ space, isDefault }: { space: Space; isDefault: boolean }) => {
+        if (isDefault) {
+          return;
+        }
+
+        await ensureSystemCollection(space);
+      },
+    ),
+  ),
+);
+
+/**
+ * Ensure the root collection has a system collection for Channels.
+ */
+const ensureSystemCollection = async (space: Space) => {
+  const rootCollection: Collection.Collection = await space.properties[Collection.Collection.typename]?.load();
+  if (!rootCollection) {
+    return;
+  }
+
+  const objects = await Promise.all(rootCollection.objects.map((ref) => ref.load()));
+  const channels = objects.find(
+    (object) => Obj.instanceOf(Collection.Managed, object) && object.key === Type.getTypename(Channel.Channel),
+  );
+  if (channels) {
+    return;
+  }
+
+  const channelCollectionRef = Ref.make(Collection.makeManaged({ key: Type.getTypename(Channel.Channel) }));
+  Obj.change(rootCollection, (c) => {
+    c.objects.push(channelCollectionRef);
+  });
+};

package/src/capabilities/settings/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+
+export const ThreadSettings = Capability.lazy('ThreadSettings', () => import('./settings'));

package/src/capabilities/settings/settings.ts

@@ -0,0 +1,34 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability } from '@dxos/app-framework';
+import { AppCapabilities } from '@dxos/app-toolkit';
+import { createKvsStore } from '@dxos/effect';
+
+import { meta } from '../../meta';
+import { ThreadSettingsSchema } from '../../types';
+import { ThreadCapabilities } from '../../types/capabilities';
+
+export default Capability.makeModule(() =>
+  Effect.sync(() => {
+    const settingsAtom = createKvsStore({
+      key: meta.id,
+      schema: ThreadSettingsSchema,
+      defaultValue: () => ({}),
+    });
+
+    return [
+      // Expose atom directly for programmatic access.
+      Capability.contributes(ThreadCapabilities.Settings, settingsAtom),
+      // Contribute to common settings for UI discovery.
+      Capability.contributes(AppCapabilities.Settings, {
+        prefix: meta.id,
+        schema: ThreadSettingsSchema,
+        atom: settingsAtom,
+      }),
+    ];
+  }),
+);

package/src/capabilities/state/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+
+export const ThreadState = Capability.lazy('ThreadState', () => import('./state'));

package/src/capabilities/state/state.ts

@@ -0,0 +1,22 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Atom } from '@effect-atom/atom-react';
+import * as Effect from 'effect/Effect';
+
+import { Capability } from '@dxos/app-framework';
+
+import { ThreadCapabilities, type ThreadState, type ViewStore } from '../../types';
+
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    const stateAtom = Atom.make<ThreadState>({ toolbar: {}, drafts: {} }).pipe(Atom.keepAlive);
+    const viewStoreAtom = Atom.make<ViewStore>({}).pipe(Atom.keepAlive);
+
+    return [
+      Capability.contributes(ThreadCapabilities.State, stateAtom),
+      Capability.contributes(ThreadCapabilities.ViewState, viewStoreAtom),
+    ];
+  }),
+);

package/src/components/Call/Call.tsx

@@ -2,13 +2,14 @@
 // Copyright 2025 DXOS.org
 //
 
+import { useAtomValue } from '@effect-atom/atom-react';
 import React, { type FC, type PropsWithChildren } from 'react';
 
-import { useCapability } from '@dxos/app-framework';
+import { useCapability } from '@dxos/app-framework/ui';
 import { type ThemedClassName } from '@dxos/react-ui';
 
-import { ThreadCapabilities } from '../../capabilities';
 import { useDebugMode } from '../../hooks';
+import { ThreadCapabilities } from '../../types';
 import { AudioStream } from '../Media';
 import { ParticipantGrid } from '../Participant';
 
@@ -34,8 +35,9 @@ type CallAudioProps = {};
 
 const CallAudio: FC<CallAudioProps> = () => {
   const call = useCapability(ThreadCapabilities.CallManager);
+  const audioTracksToPlay = useAtomValue(call.audioTracksToPlayAtom);
 
-  return <AudioStream tracks={call.audioTracksToPlay} />;
+  return <AudioStream tracks={audioTracksToPlay} />;
 };
 
 CallAudio.displayName = 'CallAudio';
@@ -51,10 +53,12 @@ type CallGridProps = {
 const CallGrid: FC<CallGridProps> = ({ fullscreen }) => {
   const debug = useDebugMode();
   const call = useCapability(ThreadCapabilities.CallManager);
+  const self = useAtomValue(call.selfAtom);
+  const users = useAtomValue(call.usersAtom);
 
   return (
     <div className='grid grow p-4 dark:bg-neutral-900'>
-      <ParticipantGrid self={call.self} users={call.users} debug={debug} fullscreen={fullscreen} />
+      <ParticipantGrid self={self} users={users} debug={debug} fullscreen={fullscreen} />
     </div>
   );
 };

package/src/components/Call/Toolbar.tsx

@@ -2,11 +2,14 @@
 // Copyright 2024 DXOS.org
 //
 
+import { useAtomValue } from '@effect-atom/atom-react';
 import React from 'react';
 
-import { useAppGraph, useCapability } from '@dxos/app-framework';
+import { useCapability } from '@dxos/app-framework/ui';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
+import { Obj } from '@dxos/echo';
+import { Node, useActionRunner } from '@dxos/plugin-graph';
 import { useActions, useNode } from '@dxos/plugin-graph';
-import { fullyQualifiedId } from '@dxos/react-client/echo';
 import {
   Icon,
   IconButton,
@@ -16,14 +19,14 @@ import {
   toLocalizedString,
   useTranslation,
 } from '@dxos/react-ui';
-import { groupHoverControlItemWithTransition, mx } from '@dxos/react-ui-theme';
+import { groupHoverControlItemWithTransition, mx } from '@dxos/ui-theme';
 
-import { ThreadCapabilities } from '../../capabilities';
 import { meta } from '../../meta';
-import { type ChannelType } from '../../types';
+import { ThreadCapabilities } from '../../types';
+import { type Channel } from '../../types';
 
 export type ToolbarProps = ThemedClassName<{
-  channel?: ChannelType;
+  channel?: Channel.Channel;
   participants?: number;
   autoHideControls?: boolean;
   isInRoom?: boolean;
@@ -42,14 +45,18 @@ export const Toolbar = ({
 }: ToolbarProps) => {
   const { t } = useTranslation(meta.id);
   const { graph } = useAppGraph();
+  const runAction = useActionRunner();
   const call = useCapability(ThreadCapabilities.CallManager);
+  const media = useAtomValue(call.mediaAtom);
+  const joined = useAtomValue(call.joinedAtom);
+  const raisedHand = useAtomValue(call.raisedHandAtom);
 
   // Channel app graph node.
-  const node = useNode(graph, channel && fullyQualifiedId(channel));
+  const node = useNode(graph, channel && Obj.getDXN(channel).toString());
   const actions = useActions(graph, node?.id).filter((action) => action.properties.disposition === 'toolbar');
 
   // Screen sharing.
-  const isScreensharing = call.media.screenshareTrack !== undefined;
+  const isScreensharing = media.screenshareTrack !== undefined;
   const canSharescreen =
     typeof navigator.mediaDevices !== 'undefined' && navigator.mediaDevices.getDisplayMedia !== undefined;
 
@@ -58,7 +65,7 @@ export const Toolbar = ({
     <div className={mx('z-20 flex justify-center m-8', autoHideControls && groupHoverControlItemWithTransition)}>
       <NaturalToolbar.Root classNames={['p-2 bg-modalSurface rounded-md shadow-md', classNames]}>
         <ToggleButton
-          active={call.media.audioEnabled}
+          active={media.audioEnabled}
           state={{
             on: {
               icon: 'ph--microphone--regular',
@@ -70,12 +77,12 @@ export const Toolbar = ({
               icon: 'ph--microphone-slash--duotone',
               label: t('mic on'),
               onClick: () => call.turnAudioOn(),
-              classNames: [call.joined && 'bg-callAlert'],
+              classNames: [joined && 'bg-callAlert'],
             },
           }}
         />
         <ToggleButton
-          active={call.media.videoEnabled}
+          active={media.videoEnabled}
           state={{
             on: {
               icon: 'ph--video-camera--regular',
@@ -97,7 +104,7 @@ export const Toolbar = ({
           </div>
         )) || <NaturalToolbar.Separator variant='gap' />}
 
-        {call.joined && (
+        {joined && (
           <>
             <ToggleButton
               disabled={!canSharescreen}
@@ -117,25 +124,27 @@ export const Toolbar = ({
             />
 
             {/* Companion actions. */}
-            {actions.map((action) => (
-              <IconButton
-                key={action.id}
-                {...defaultButtonProps}
-                icon={action.properties.icon}
-                label={toLocalizedString(action.properties.label, t)}
-                classNames={action.properties.classNames}
-                onClick={() => action.data({ node })}
-              />
-            ))}
+            {actions
+              .filter((action): action is Node.Action => Node.isAction(action))
+              .map((action) => (
+                <IconButton
+                  key={action.id}
+                  {...defaultButtonProps}
+                  icon={action.properties.icon}
+                  label={toLocalizedString(action.properties.label, t)}
+                  classNames={action.properties.classNames}
+                  onClick={() => node && void runAction(action, { parent: node })}
+                />
+              ))}
 
             <ToggleButton
-              active={call.raisedHand}
+              active={raisedHand}
               state={{
                 on: {
                   icon: 'ph--hand-waving--regular',
                   label: t('lower hand'),
                   onClick: () => call.setRaisedHand(false),
-                  classNames: [call.joined && 'bg-callAlert'],
+                  classNames: [joined && 'bg-callAlert'],
                 },
                 off: {
                   icon: 'ph--hand-palm--duotone',
@@ -146,7 +155,7 @@ export const Toolbar = ({
             />
           </>
         )}
-        {call.joined ? (
+        {joined ? (
           <IconButton variant='destructive' icon='ph--phone-x--regular' label={t('leave call')} onClick={onLeave} />
         ) : (
           <IconButton variant='primary' icon='ph--phone-incoming--regular' label={t('join call')} onClick={onJoin} />

package/src/components/CallDebugPanel.tsx

@@ -13,9 +13,7 @@ import { IconButton, Input, type ThemedClassName, useTranslation } from '@dxos/r
 import { type EncodedTrackName, type GlobalState } from '../calls';
 import { meta } from '../meta';
 
-export type CallDebugPanelProps = ThemedClassName<{
-  state?: GlobalState;
-}>;
+export type CallDebugPanelProps = ThemedClassName<{ state?: GlobalState }>;
 
 export const CallDebugPanel = ({ state }: CallDebugPanelProps) => {
   const { t } = useTranslation(meta.id);
@@ -73,24 +71,24 @@ export const CallDebugPanel = ({ state }: CallDebugPanelProps) => {
       open={open}
       onToggle={handleToggle}
       title={t('meeting status title')}
-      maxHeight={false}
       info={<div className='flex items-center gap-2'> {state?.call.joined ? 'Active' : 'Inactive'}</div>}
+      maxHeight={0}
     >
-      <div className='flex flex-col w-full gap-2 text-xs'>
-        <div className='flex items-center gap-2'>
+      <div className='flex flex-col is-full text-xs'>
+        <div className='flex items-center gap-2 items-center'>
           <Input.Root>
-            <Input.Label classNames={'text-sm'}>{t('show webrtc stats title')}</Input.Label>
-            <Input.Checkbox checked={showDetailedWebRTCStats} onCheckedChange={handleShowDetailedWebRTCStats} />
+            <Input.Switch checked={showDetailedWebRTCStats} onCheckedChange={handleShowDetailedWebRTCStats} />
+            <Input.Label>{t('show webrtc stats title')}</Input.Label>
           </Input.Root>
         </div>
-        <div className='flex items-center gap-2'>
+        <div className='flex items-center gap-2 items-center'>
           <Input.Root>
-            <Input.Label classNames={'text-sm'}>{t('show calls history title')}</Input.Label>
-            <Input.Checkbox checked={showServiceHistory} onCheckedChange={handleToggleServiceHistory} />
+            <Input.Switch checked={showServiceHistory} onCheckedChange={handleToggleServiceHistory} />
+            <Input.Label>{t('show calls history title')}</Input.Label>
           </Input.Root>
         </div>
-        <div className='flex items-center gap-2'>
-          <IconButton classNames={'text-sm'} icon='ph--copy--regular' label={'copy raw'} onClick={handleCopyRaw} />
+        <div className='flex items-center gap-2 items-center'>
+          <IconButton icon='ph--copy--regular' label={'copy raw'} onClick={handleCopyRaw} />
         </div>
         <Table rows={rows} />
         {showDetailedWebRTCStats && <JsonView data={{ stats }} />}
@@ -160,7 +158,7 @@ export type TableProps = {
 
 export const Table = ({ rows }: TableProps) => {
   return (
-    <div className='w-full text-xs font-mono'>
+    <div className='is-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/components/CallSidebar.tsx

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

package/src/components/ChannelContainer.stories.tsx

@@ -2,45 +2,45 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { contributes } from '@dxos/app-framework';
+import { Capability } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { ClientCapabilities } from '@dxos/plugin-client';
-import { Query, useQuery, useSpace } from '@dxos/react-client/echo';
-import { DataType } from '@dxos/schema';
-import { ColumnContainer, withLayout } from '@dxos/storybook-utils';
+import { AppCapabilities } from '@dxos/app-toolkit';
+import { Query, useDatabase, useQuery } from '@dxos/react-client/echo';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { render } from '@dxos/storybook-utils';
+import { Message, Thread } from '@dxos/types';
 
 import { createThreadPlugins } from '../testing';
 import { translations } from '../translations';
-import { ChannelType, ThreadType } from '../types';
+import { Channel } from '../types';
 
 import { ChannelContainer, type ChannelContainerProps } from './ChannelContainer';
 
 // TODO(wittjosiah): Channel doesn't render full height.
-const Story = ({ roomId }: ChannelContainerProps) => {
-  const space = useSpace();
-  const [channel] = useQuery(space, Query.type(ChannelType));
+const DefaultStory = ({ roomId }: ChannelContainerProps) => {
+  const db = useDatabase();
+  const [channel] = useQuery(db, Query.type(Channel.Channel));
   if (!channel) {
     return null;
   }
 
-  return <ChannelContainer channel={channel} roomId={roomId} />;
+  return <ChannelContainer subject={channel} roomId={roomId} />;
 };
 
 const meta = {
   title: 'plugins/plugin-thread/ChannelContainer',
   component: ChannelContainer,
-  render: (args) => <Story {...args} />,
+  render: render(DefaultStory),
   decorators: [
+    withTheme(),
+    withLayout({ layout: 'column' }),
     withPluginManager({
       plugins: [...(await createThreadPlugins())],
-      capabilities: [contributes(ClientCapabilities.Schema, [ChannelType, ThreadType, DataType.Message])],
+      capabilities: [Capability.contributes(AppCapabilities.Schema, [Channel.Channel, Thread.Thread, Message.Message])],
     }),
-    withLayout({ Container: ColumnContainer, classNames: 'w-[40rem] overflow-hidden' }),
   ],
   parameters: {
     translations,
@@ -54,6 +54,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     // Fixed room for testing.
+    subject: undefined,
     roomId: '04a1d1911703b8e929d0649021a965',
   },
 };

package/src/components/ChannelContainer.tsx

@@ -2,43 +2,50 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Rx } from '@effect-rx/rx-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';
+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 { fullyQualifiedId, getSpace } from '@dxos/react-client/echo';
+import { getSpace } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
-import { ElevationProvider, Input, type ThemedClassName, useTranslation } from '@dxos/react-ui';
-import { ControlGroup, ControlGroupButton, ControlItemInput } from '@dxos/react-ui-form';
+import { ElevationProvider, Input, useTranslation } from '@dxos/react-ui';
+import { Settings } from '@dxos/react-ui-form';
 import { MenuProvider, ToolbarMenu, 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 ChannelType } from '../types';
+import { ThreadCapabilities } from '../types';
+import { type Channel } from '../types';
 
 import { Call } from './Call';
 import ChatContainer from './ChatContainer';
 
-export type ChannelContainerProps = {
-  channel?: ChannelType;
-  roomId?: string;
-  role?: string;
-  fullscreen?: boolean;
-};
+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, roomId: roomIdProp, fullscreen }: ChannelContainerProps) => {
   const space = getSpace(channel);
   const callManager = useCapability(ThreadCapabilities.CallManager);
-  const roomId = _roomId ?? (channel ? fullyQualifiedId(channel) : failUndefined());
+  const joined = useAtomValue(callManager.joinedAtom);
+  const currentRoomId = useAtomValue(callManager.roomIdAtom);
+  const attendableId = channel ? Obj.getDXN(channel).toString() : undefined;
+  const roomId = roomIdProp ?? attendableId ?? failUndefined();
   const identity = useIdentity();
   const isNamed = !!identity?.profile?.displayName;
   const joinSound = useSoundEffect('JoinCall');
@@ -79,7 +86,7 @@ export const ChannelContainer = ({ channel, roomId: _roomId, role, fullscreen }:
       return;
     }
 
-    if (callManager.joined) {
+    if (joined) {
       await callManager.leave();
     }
 
@@ -92,7 +99,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.
@@ -111,10 +118,10 @@ export const ChannelContainer = ({ channel, roomId: _roomId, role, fullscreen }:
     }
   }, [extensions, roomId]);
 
-  const isJoined = callManager.joined && callManager.roomId === roomId;
+  const isJoined = joined && currentRoomId === roomId;
 
   return (
-    <StackItem.Content toolbar={!isJoined} classNames={isJoined && 'h-full'}>
+    <StackItem.Content classNames={isJoined && 'bs-full'} toolbar={!isJoined}>
       {isJoined && !isNamed && <DisplayNameMissing />}
       {isJoined && isNamed && (
         <Call.Root>
@@ -124,8 +131,8 @@ export const ChannelContainer = ({ channel, roomId: _roomId, role, fullscreen }:
       )}
       {!isJoined && channel && channel.defaultThread.target && space && (
         <>
-          <ChannelToolbar attendableId={fullyQualifiedId(channel)} role={role} onJoinCall={handleJoin} />
-          <ChatContainer space={space} thread={channel.defaultThread.target} />
+          <ChannelToolbar attendableId={attendableId} role={role} onJoinCall={handleJoin} />
+          <ChatContainer space={space} thread={channel.defaultThread.target} classNames='container-max-width' />
         </>
       )}
     </StackItem.Content>
@@ -142,26 +149,26 @@ 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'
         />
-      </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>
   );
 };
 
 const useChannelToolbarActions = (onJoinCall?: () => void) => {
   const creator = useMemo(
     () =>
-      Rx.make(() => {
+      Atom.make(() => {
         return {
           nodes: [
             createMenuItemGroup('root', {
@@ -182,19 +189,19 @@ const useChannelToolbarActions = (onJoinCall?: () => void) => {
   return useMenuActions(creator);
 };
 
-type ChannelToolbarProps = ThemedClassName<{
+type ChannelToolbarProps = {
   attendableId?: string;
   role?: string;
   onJoinCall?: () => void;
-}>;
+};
 
-const ChannelToolbar = ({ attendableId, role, onJoinCall, classNames }: ChannelToolbarProps) => {
+const ChannelToolbar = ({ attendableId, role, onJoinCall }: ChannelToolbarProps) => {
   const menuProps = useChannelToolbarActions(onJoinCall);
 
   return (
     <ElevationProvider elevation={role === 'section' ? 'positioned' : 'base'}>
       <MenuProvider {...menuProps} attendableId={attendableId}>
-        <ToolbarMenu classNames={classNames} />
+        <ToolbarMenu textBlockWidth />
       </MenuProvider>
     </ElevationProvider>
   );