@dxos/plugin-thread 0.8.4-main.3eb6e50203 → 0.8.4-main.4a85c3132b

package/src/components/ResponsiveGrid/ResponsiveGrid.stories.tsx

@@ -6,7 +6,7 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useEffect, useState } from 'react';
 
 import { faker } from '@dxos/random';
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { translations } from '../../translations';
 
@@ -41,7 +41,7 @@ const TestCell = ({ item, ...props }: ResponsiveGridItemProps<TestItem>) => {
       {item.type === 'image' && <img className='aspect-video object-contain' src={item.imageUrl} />}
       {item.type === 'video' && (
         <video
-          className='is-full aspect-video object-cover rounded-md'
+          className='w-full aspect-video object-cover rounded-md'
           src={item.videoUrl}
           playsInline
           autoPlay
@@ -89,10 +89,10 @@ const DefaultStory = (props: StoryProps) => {
 };
 
 const meta = {
-  title: 'plugins/plugin-thread/ResponsiveGrid',
+  title: 'plugins/plugin-thread/components/ResponsiveGrid',
   component: ResponsiveGrid as any,
   render: DefaultStory,
-  decorators: [withTheme()],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
     translations,

package/src/components/ResponsiveGrid/ResponsiveGrid.tsx

@@ -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('relative w-full h-full', 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',
                     )}
                   />

package/src/components/ResponsiveGrid/ResponsiveGridItem.tsx

@@ -76,7 +76,7 @@ export const ResponsiveGridItem = <T extends object = any>({
   return (
     <div
       className={mx(
-        'relative is-full bs-full group',
+        'relative w-full h-full 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/command-extension.ts

@@ -29,7 +29,7 @@ const parser = StreamLanguage.define<{ count: number }>({
 const styles = HighlightStyle.define([
   {
     tag: tags.tagName,
-    class: mx('dx-tag dx-tag--indigo text-baseText font-medium'),
+    class: mx('dx-tag dx-tag--indigo text-base-surface-text font-medium'),
   },
 ]);
 

package/src/components/index.ts

@@ -3,13 +3,6 @@
 //
 
 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 { ChannelContainer } from './ChannelContainer';
-export { ChatContainer } from './ChatContainer';

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/{components → containers/CallSidebar}/CallSidebar.tsx

@@ -7,14 +7,11 @@ import React from 'react';
 
 import { useCapability } from '@dxos/app-framework/ui';
 
-import { ThreadCapabilities } from '../types';
-
-import { ChannelContainer } from './ChannelContainer';
+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} roomId={roomId} />;
 };
-
-export default CallSidebar;

package/src/containers/CallSidebar/index.ts

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

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

@@ -13,9 +13,9 @@ 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 { Channel } from '../types';
+import { createThreadPlugins } from '../../testing';
+import { translations } from '../../translations';
+import { Channel } from '../../types';
 
 import { ChannelContainer, type ChannelContainerProps } from './ChannelContainer';
 
@@ -31,7 +31,7 @@ const DefaultStory = ({ roomId }: ChannelContainerProps) => {
 };
 
 const meta = {
-  title: 'plugins/plugin-thread/ChannelContainer',
+  title: 'plugins/plugin-thread/containers/ChannelContainer',
   component: ChannelContainer,
   render: render(DefaultStory),
   decorators: [

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

@@ -14,18 +14,16 @@ 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 { ElevationProvider, Input, Panel, useTranslation } from '@dxos/react-ui';
 import { Settings } from '@dxos/react-ui-form';
-import { MenuProvider, ToolbarMenu, createMenuAction, createMenuItemGroup, useMenuActions } from '@dxos/react-ui-menu';
+import { Menu, createMenuAction, createMenuItemGroup, useMenuActions } from '@dxos/react-ui-menu';
 import { useSoundEffect } from '@dxos/react-ui-sfx';
-import { StackItem } from '@dxos/react-ui-stack';
 
-import { meta } from '../meta';
-import { ThreadCapabilities } from '../types';
-import { type Channel } from '../types';
-
-import { Call } from './Call';
-import ChatContainer from './ChatContainer';
+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,
@@ -42,6 +40,7 @@ export type ChannelContainerProps = SurfaceComponentProps<
 export const ChannelContainer = ({ role, subject: channel, roomId: roomIdProp, fullscreen }: ChannelContainerProps) => {
   const space = getSpace(channel);
   const callManager = useCapability(ThreadCapabilities.CallManager);
+  const extensions = useCapabilities(ThreadCapabilities.CallExtension);
   const joined = useAtomValue(callManager.joinedAtom);
   const currentRoomId = useAtomValue(callManager.roomIdAtom);
   const attendableId = channel ? Obj.getDXN(channel).toString() : undefined;
@@ -51,7 +50,6 @@ export const ChannelContainer = ({ role, subject: channel, roomId: roomIdProp, f
   const joinSound = useSoundEffect('JoinCall');
   const leaveSound = useSoundEffect('LeaveCall');
 
-  const extensions = useCapabilities(ThreadCapabilities.CallExtension);
   useEffect(() => {
     const ctx = new Context();
     callManager.left.on(ctx, (roomId) => {
@@ -119,27 +117,38 @@ export const ChannelContainer = ({ role, subject: channel, roomId: roomIdProp, f
   }, [extensions, roomId]);
 
   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>
+    );
+  }
 
-  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 && (
-        <>
+  if (channel && channel.defaultThread.target && space) {
+    return (
+      <Panel.Root classNames='dx-article'>
+        <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>
+    );
+  }
 
-export default ChannelContainer;
+  return null;
+};
 
 const DisplayNameMissing = () => {
   const { t } = useTranslation(meta.id);
@@ -155,7 +164,7 @@ const DisplayNameMissing = () => {
           value={displayName}
           onChange={handleChange}
           placeholder={t('display name input placeholder')}
-          classNames='md:min-is-64'
+          classNames='md:min-w-64'
         />
       </Settings.ItemInput>
       <Settings.GroupButton disabled={!displayName} onClick={handleSave}>
@@ -180,7 +189,7 @@ const useChannelToolbarActions = (onJoinCall?: () => void) => {
               type: 'video-call',
             }),
           ],
-          edges: [{ source: 'root', target: 'video-call' }],
+          edges: [{ source: 'root', target: 'video-call', relation: 'child' }],
         };
       }),
     [],
@@ -200,9 +209,9 @@ const ChannelToolbar = ({ attendableId, role, onJoinCall }: ChannelToolbarProps)
 
   return (
     <ElevationProvider elevation={role === 'section' ? 'positioned' : 'base'}>
-      <MenuProvider {...menuProps} attendableId={attendableId}>
-        <ToolbarMenu textBlockWidth />
-      </MenuProvider>
+      <Menu.Root {...menuProps} attendableId={attendableId}>
+        <Menu.Toolbar textBlockWidth />
+      </Menu.Root>
     </ElevationProvider>
   );
 };

package/src/containers/ChannelContainer/index.ts

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

package/src/{components/Chat.stories.tsx → containers/ChatContainer/ChatContainer.stories.tsx}

@@ -5,7 +5,7 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
 
-import { Capabilities, Capability, OperationPlugin } from '@dxos/app-framework';
+import { Capabilities, Capability, OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Surface } from '@dxos/app-framework/ui';
 import { faker } from '@dxos/random';
@@ -14,13 +14,13 @@ import { type Space } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { useAsyncEffect } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { Thread as ThreadComponent } from '@dxos/react-ui-thread';
 import { render } from '@dxos/storybook-utils';
 import { Message, Thread } from '@dxos/types';
 
-import { translations } from '../translations';
-import { Channel } from '../types';
+import { translations } from '../../translations';
+import { Channel } from '../../types';
 
 import { ChatContainer } from './ChatContainer';
 
@@ -45,21 +45,20 @@ const DefaultStory = () => {
     return null;
   }
 
-  return (
-    <main className='is-full max-is-proseMaxWidth mli-auto bs-full overflow-hidden'>
-      <ChatContainer space={space} thread={channel.defaultThread.target} />
-    </main>
-  );
+  return <ChatContainer space={space} thread={channel.defaultThread.target} />;
 };
 
 const meta = {
-  title: 'plugins/plugin-thread/Chat',
+  title: 'plugins/plugin-thread/containers/ChatContainer',
   component: ThreadComponent.Root as any,
   render: render(DefaultStory),
   decorators: [
     withTheme(),
+    withLayout({ layout: 'column' }),
+    // TODO(wittjosiah): This shouldn't depend on app framework (use withClientProvider instead).
+    //  Currently this is required due to useOnEditAnalytics.
     withPluginManager({
-      plugins: [OperationPlugin()],
+      plugins: [OperationPlugin(), RuntimePlugin()],
       capabilities: [
         Capability.contributes(
           Capabilities.ReactSurface,
@@ -71,7 +70,10 @@ const meta = {
         ),
       ],
     }),
-    withClientProvider({ createSpace: true, types: [Thread.Thread, Channel.Channel, Message.Message] }),
+    withClientProvider({
+      createSpace: true,
+      types: [Thread.Thread, Channel.Channel, Message.Message],
+    }),
   ],
   parameters: {
     layout: 'fullscreen',

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

@@ -21,12 +21,11 @@ import { createBasicExtensions, createThemeExtensions, listener } from '@dxos/ui
 import { mx } from '@dxos/ui-theme';
 import { isNonNullable } from '@dxos/util';
 
-import { useStatus } from '../hooks';
-import { meta } from '../meta';
-import { getMessageMetadata } from '../util';
-
-import { command } from './command-extension';
-import { MessageContainer } from './MessageContainer';
+import { MessageContainer } from '../../components';
+import { command } from '../../components/command-extension';
+import { useStatus } from '../../hooks';
+import { meta } from '../../meta';
+import { getMessageMetadata } from '../../util';
 
 export const ChatHeading = ({ attendableId }: { attendableId?: string }) => {
   const { t } = useTranslation(meta.id);
@@ -58,16 +57,18 @@ export const ChatContainer = ({
   autoFocusTextbox,
 }: ChatContainerProps) => {
   const { t } = useTranslation(meta.id);
+  const { themeMode } = useThemeContext();
+
   const id = Obj.getDXN(thread).toString();
   const identity = useIdentity()!;
   const members = useMembers(space?.id);
   const activity = useStatus(space, id);
+  const [autoFocus, setAutoFocus] = useState(autoFocusTextbox);
+  const threadScrollRef = useRef<HTMLDivElement | null>(null);
+
   // TODO(wittjosiah): This is a hack to reset the editor after a message is sent.
   const [_count, _setCount] = useState(0);
   const rerenderEditor = () => _setCount((count) => count + 1);
-  const [autoFocus, setAutoFocus] = useState(autoFocusTextbox);
-  const threadScrollRef = useRef<HTMLDivElement | null>(null);
-  const { themeMode } = useThemeContext();
 
   const textboxMetadata = getMessageMetadata(id, identity);
   const messageRef = useRef('');
@@ -123,13 +124,13 @@ export const ChatContainer = ({
       current={current}
       id={id}
       classNames={[
-        'bs-full grid-rows-[1fr_min-content_min-content] overflow-hidden',
-        'transition-[padding-block-end] [[data-sidebar-inline-start-state=open]_&]:lg:pbe-0',
+        'h-full grid-rows-[1fr_min-content_min-content] overflow-hidden',
+        'transition-[padding-h-end] [[data-sidebar-left-state=open]_&]:lg:pb-0',
         classNames,
       ]}
     >
-      <ScrollArea.Root orientation='vertical'>
-        <ScrollArea.Viewport classNames='col-span-2'>
+      <ScrollArea.Root classNames='col-span-2' orientation='vertical'>
+        <ScrollArea.Viewport ref={threadScrollRef}>
           <div role='none' className={mx(threadLayout, 'place-self-end')}>
             {thread.messages
               .map((message) => message.target)
@@ -138,8 +139,6 @@ export const ChatContainer = ({
                 <MessageContainer key={message.id} message={message} members={members} />
               ))}
           </div>
-          {/* NOTE(thure): This can't also be the `overflow-anchor` because `ScrollArea` injects an interceding node that contains this necessary ref'd element. */}
-          <div role='none' className='bs-px -mbs-px' ref={threadScrollRef} />
         </ScrollArea.Viewport>
       </ScrollArea.Root>
 
@@ -148,5 +147,3 @@ export const ChatContainer = ({
     </ThreadComponent.Root>
   );
 };
-
-export default ChatContainer;

package/src/containers/ChatContainer/index.ts

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

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

@@ -11,16 +11,14 @@ import { AppCapabilities, CollaborationOperation, LayoutOperation } from '@dxos/
 import { Filter, Obj, Query, Relation } from '@dxos/echo';
 import { Ref, useQuery } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
-import { useTranslation } from '@dxos/react-ui';
-import { Layout } from '@dxos/react-ui';
+import { Panel, ScrollArea, Toolbar, useTranslation } from '@dxos/react-ui';
 import { useAttended } from '@dxos/react-ui-attention';
 import { Tabs } from '@dxos/react-ui-tabs';
 import { AnchoredTo, Thread } from '@dxos/types';
-import { mx } from '@dxos/ui-theme';
 
-import { CommentsContainer, type CommentsContainerProps } from '../components';
-import { meta } from '../meta';
-import { ThreadCapabilities, ThreadOperation, type ViewState } from '../types';
+import { CommentsContainer, type CommentsContainerProps } from '../../components';
+import { meta } from '../../meta';
+import { ThreadCapabilities, ThreadOperation, type ViewState } from '../../types';
 
 const initialViewState: ViewState = { showResolvedThreads: false };
 
@@ -165,30 +163,35 @@ export const ThreadCompanion = ({ subject }: { subject: any }) => {
     />
   );
 
+  // TODO(burdon): Root should be headless.
   return (
-    <Layout.Main toolbar>
-      <Tabs.Root
-        value={showResolvedThreads ? 'all' : 'unresolved'}
-        orientation='horizontal'
-        classNames={[
-          'contents [&_[role="tabpanel"]]:min-bs-0 [&_[role="tabpanel"]]:overflow-y-auto [&_[role="tabpanel"]]:scrollbar-thin',
-        ]}
-        onValueChange={onChangeViewState}
-      >
-        {/* TODO(burdon): Standardize (like Tollbar). */}
-        <Tabs.Tablist classNames={mx('bg-toolbarSurface border-be border-subduedSeparator')}>
-          <Tabs.Tab value='unresolved' classNames='text-sm'>
-            {t('show unresolved label')}
-          </Tabs.Tab>
-          <Tabs.Tab value='all' classNames='text-sm'>
-            {t('show all label')}
-          </Tabs.Tab>
-        </Tabs.Tablist>
-        <div className='overflow-y-auto'>
-          <Tabs.Tabpanel value='all'>{showResolvedThreads && comments}</Tabs.Tabpanel>
-          <Tabs.Tabpanel value='unresolved'>{!showResolvedThreads && comments}</Tabs.Tabpanel>
-        </div>
-      </Tabs.Root>
-    </Layout.Main>
+    <Tabs.Root
+      value={showResolvedThreads ? 'all' : 'unresolved'}
+      orientation='horizontal'
+      onValueChange={onChangeViewState}
+    >
+      <Panel.Root>
+        <Panel.Toolbar asChild>
+          <Toolbar.Root>
+            <Tabs.Tablist>
+              <Tabs.Tab value='unresolved' classNames='text-sm'>
+                {t('show unresolved label')}
+              </Tabs.Tab>
+              <Tabs.Tab value='all' classNames='text-sm'>
+                {t('show all label')}
+              </Tabs.Tab>
+            </Tabs.Tablist>
+          </Toolbar.Root>
+        </Panel.Toolbar>
+        <Panel.Content asChild>
+          <ScrollArea.Root thin>
+            <ScrollArea.Viewport>
+              <Tabs.Tabpanel value='all'>{showResolvedThreads && comments}</Tabs.Tabpanel>
+              <Tabs.Tabpanel value='unresolved'>{!showResolvedThreads && comments}</Tabs.Tabpanel>
+            </ScrollArea.Viewport>
+          </ScrollArea.Root>
+        </Panel.Content>
+      </Panel.Root>
+    </Tabs.Root>
   );
 };

package/src/containers/ThreadCompanion/index.ts

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

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

@@ -7,8 +7,8 @@ import React from 'react';
 import { useTranslation } from '@dxos/react-ui';
 import { Settings } from '@dxos/react-ui-form';
 
-import { meta } from '../meta';
-import type { ThreadSettingsProps } from '../types';
+import { meta } from '../../meta';
+import type { ThreadSettingsProps } from '../../types';
 
 export type ThreadSettingsComponentProps = {
   settings: ThreadSettingsProps;

package/src/containers/ThreadSettings/index.ts

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

package/src/containers/index.ts

@@ -0,0 +1,12 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type ComponentType, lazy } from 'react';
+
+export const CallDebugPanel: ComponentType<any> = lazy(() => import('./CallDebugPanel'));
+export const CallSidebar: ComponentType<any> = lazy(() => import('./CallSidebar'));
+export const ChannelContainer: ComponentType<any> = lazy(() => import('./ChannelContainer'));
+export const ChatContainer: ComponentType<any> = lazy(() => import('./ChatContainer'));
+export const ThreadCompanion: ComponentType<any> = lazy(() => import('./ThreadCompanion'));
+export const ThreadSettings: ComponentType<any> = lazy(() => import('./ThreadSettings'));