@dxos/plugin-space 0.8.2-staging.7ac8446 → 0.8.2

package/src/components/SpacePresence.tsx

@@ -2,7 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { useCallback, useEffect, useState } from 'react';
+import { Option } from 'effect';
+import React, { forwardRef, useCallback, useEffect, useState } from 'react';
 
 import { useAppGraph, useCapability } from '@dxos/app-framework';
 import { generateName } from '@dxos/display-name';
@@ -16,10 +17,12 @@ import {
   type Size,
   type ThemedClassName,
   Tooltip,
+  Popover,
   useTranslation,
   List,
   ListItem,
   useDefaultValue,
+  type DxAvatar,
 } from '@dxos/react-ui';
 import { AttentionGlyph, useAttended, useAttention, type AttentionGlyphProps } from '@dxos/react-ui-attention';
 import { ComplexMap, keyToFallback } from '@dxos/util';
@@ -114,40 +117,38 @@ export const FullPresence = (props: MemberPresenceProps) => {
   return (
     <div className='dx-avatar-group' data-testid='spacePlugin.presence'>
       {members.slice(0, 3).map((member, i) => (
-        <Tooltip.Root key={member.identity.identityKey.toHex()}>
-          <Tooltip.Trigger>
-            <PrensenceAvatar
-              identity={member.identity}
-              match={member.currentlyAttended} // TODO(Zan): Match always true now we're showing 'members viewing current object'.
-              index={members.length - i}
-              onClick={() => onMemberClick?.(member)}
-              size={size}
-            />
-          </Tooltip.Trigger>
-          <Tooltip.Portal>
-            <Tooltip.Content side='bottom'>
-              <span>{getName(member.identity)}</span>
-              <Tooltip.Arrow />
-            </Tooltip.Content>
-          </Tooltip.Portal>
-        </Tooltip.Root>
+        <Tooltip.Trigger
+          key={member.identity.identityKey.toHex()}
+          side='bottom'
+          content={getName(member.identity)}
+          className='grid focus:outline-none'
+        >
+          <PresenceAvatar
+            identity={member.identity}
+            match={member.currentlyAttended} // TODO(Zan): Match always true now we're showing 'members viewing current object'.
+            index={members.length - i}
+            onClick={() => onMemberClick?.(member)}
+            size={size}
+          />
+        </Tooltip.Trigger>
       ))}
 
       {members.length > 3 && (
-        <Tooltip.Root>
-          <Tooltip.Trigger>
+        <Popover.Root>
+          <Popover.Trigger className='grid focus:outline-none'>
             <Avatar.Root>
               {/* TODO(wittjosiah): Make text fit. */}
               <Avatar.Content
                 status='inactive'
                 style={{ zIndex: members.length - 4 }}
                 fallback={`+${members.length - 3}`}
+                size={size}
               />
             </Avatar.Root>
-          </Tooltip.Trigger>
-          <Tooltip.Portal>
-            <Tooltip.Content side='bottom'>
-              <Tooltip.Arrow />
+          </Popover.Trigger>
+          <Popover.Portal>
+            <Popover.Content side='bottom'>
+              <Popover.Arrow />
               <List classNames='max-h-56 overflow-y-auto'>
                 {members.map((member) => (
                   <ListItem.Root
@@ -157,13 +158,13 @@ export const FullPresence = (props: MemberPresenceProps) => {
                     data-testid='identity-list-item'
                   >
                     {/* TODO(Zan): Match always true now we're showing 'members viewing current object'. */}
-                    <PrensenceAvatar identity={member.identity} size={size} showName match={member.currentlyAttended} />
+                    <PresenceAvatar identity={member.identity} size={size} showName match={member.currentlyAttended} />
                   </ListItem.Root>
                 ))}
               </List>
-            </Tooltip.Content>
-          </Tooltip.Portal>
-        </Tooltip.Root>
+            </Popover.Content>
+          </Popover.Portal>
+        </Popover.Root>
       )}
     </div>
   );
@@ -177,26 +178,28 @@ type PresenceAvatarProps = Pick<AvatarContentProps, 'size'> & {
   onClick?: () => void;
 };
 
-const PrensenceAvatar = ({ identity, showName, match, index, onClick, size }: PresenceAvatarProps) => {
-  const status = match ? 'current' : 'active';
-  const fallbackValue = keyToFallback(identity.identityKey);
-  return (
-    <Avatar.Root>
-      <Avatar.Content
-        status={status}
-        hue={identity.profile?.data?.hue || fallbackValue.hue}
-        data-testid='spacePlugin.presence.member'
-        data-status={status}
-        size={size}
-        classNames='mbs-2 mie-4'
-        {...(index ? { style: { zIndex: index } } : {})}
-        onClick={() => onClick?.()}
-        fallback={identity.profile?.data?.emoji || fallbackValue.emoji}
-      />
-      <Avatar.Label classNames={showName ? 'text-sm truncate pli-2' : 'sr-only'}>{getName(identity)}</Avatar.Label>
-    </Avatar.Root>
-  );
-};
+const PresenceAvatar = forwardRef<DxAvatar, PresenceAvatarProps>(
+  ({ identity, showName, match, index, onClick, size }, forwardedRef) => {
+    const status = match ? 'current' : 'active';
+    const fallbackValue = keyToFallback(identity.identityKey);
+    return (
+      <Avatar.Root>
+        <Avatar.Content
+          status={status}
+          hue={identity.profile?.data?.hue || fallbackValue.hue}
+          data-testid='spacePlugin.presence.member'
+          data-status={status}
+          size={size}
+          {...(index ? { style: { zIndex: index } } : {})}
+          onClick={onClick}
+          fallback={identity.profile?.data?.emoji || fallbackValue.emoji}
+          ref={forwardedRef}
+        />
+        <Avatar.Label classNames={showName ? 'text-sm truncate pli-2' : 'sr-only'}>{getName(identity)}</Avatar.Label>
+      </Avatar.Root>
+    );
+  },
+);
 
 export type SmallPresenceLiveProps = {
   id?: string;
@@ -215,7 +218,7 @@ export const SmallPresenceLive = ({ id, open, viewers }: SmallPresenceLiveProps)
   const attended = useAttended();
   const startOfAttention = attended.at(-1);
   const path = usePath(graph, startOfAttention);
-  const containsAttended = !open && !isAttended && id && path ? path.includes(id) : false;
+  const containsAttended = !open && !isAttended && id && Option.isSome(path) ? path.value.includes(id) : false;
 
   const getActiveViewers = (viewers: ComplexMap<PublicKey, ObjectViewerProps>): ObjectViewerProps[] => {
     const moment = Date.now();
@@ -247,21 +250,13 @@ export const SmallPresence = ({ count = 0, attended, containsAttended }: SmallPr
   const { t } = useTranslation(SPACE_PLUGIN);
 
   return (
-    <Tooltip.Root>
-      <Tooltip.Trigger asChild>
-        <AttentionGlyph
-          attended={attended}
-          containsAttended={containsAttended}
-          presence={count > 1 ? 'many' : count === 1 ? 'one' : 'none'}
-          classNames='self-center mie-1'
-        />
-      </Tooltip.Trigger>
-      <Tooltip.Portal>
-        <Tooltip.Content side='bottom'>
-          <span>{t('presence label', { count })}</span>
-          <Tooltip.Arrow />
-        </Tooltip.Content>
-      </Tooltip.Portal>
-    </Tooltip.Root>
+    <Tooltip.Trigger asChild content={t('presence label', { count })} side='bottom'>
+      <AttentionGlyph
+        attended={attended}
+        containsAttended={containsAttended}
+        presence={count > 1 ? 'many' : count === 1 ? 'one' : 'none'}
+        classNames='self-center mie-1'
+      />
+    </Tooltip.Trigger>
   );
 };

package/src/components/SpaceSettings/{SpacePropertiesForm.stories.tsx → SpaceSettingsContainer.stories.tsx}

@@ -10,21 +10,21 @@ import React from 'react';
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
 import { withTheme } from '@dxos/storybook-utils';
 
-import { SpacePropertiesForm, type SpacePropertiesFormProps } from './SpacePropertiesForm';
+import { SpaceSettingsContainer, type SpaceSettingsContainerProps } from './SpaceSettingsContainer';
 import translations from '../../translations';
 
-const Story = (args: Partial<SpacePropertiesFormProps>) => {
+const Story = (args: Partial<SpaceSettingsContainerProps>) => {
   const { space } = useClientProvider();
   return (
     <div role='none' className='p-2 border border-primary-500 rounded'>
-      <SpacePropertiesForm {...args} space={space!} />
+      <SpaceSettingsContainer {...args} space={space!} />
     </div>
   );
 };
 
 const meta: Meta = {
-  title: 'plugins/plugin-space/SpacePropertiesForm',
-  component: SpacePropertiesForm,
+  title: 'plugins/plugin-space/SpaceSettingsContainer',
+  component: SpaceSettingsContainer,
   render: Story,
   decorators: [withClientProvider({ createIdentity: true, createSpace: true }), withTheme],
   parameters: {
@@ -35,4 +35,4 @@ const meta: Meta = {
 
 export default meta;
 
-export const Default: StoryObj<typeof SpacePropertiesForm> = {};
+export const Default: StoryObj<typeof SpaceSettingsContainer> = {};

package/src/components/SpaceSettings/SpaceSettingsContainer.tsx

@@ -2,62 +2,182 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useCallback, useMemo } from 'react';
+import { pipe, Schema } from 'effect';
+import React, { type ChangeEvent, useCallback, useMemo, useState } from 'react';
 
-import { Surface, useCapabilities, useCapability } from '@dxos/app-framework';
-import { type Space } from '@dxos/react-client/echo';
-import { toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { ControlSectionHeading } from '@dxos/react-ui-form';
-import { Accordion } from '@dxos/react-ui-list';
+import { chain, createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
+import { log } from '@dxos/log';
+import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
+import { useClient } from '@dxos/react-client';
+import { SpaceState, type Space } from '@dxos/react-client/echo';
+import { Button, Input, useMulticastObservable, useTranslation } from '@dxos/react-ui';
+import {
+  Form,
+  type InputComponent,
+  ControlItem,
+  ControlItemInput,
+  ControlSection,
+  ControlPage,
+} from '@dxos/react-ui-form';
+import { HuePicker, IconPicker } from '@dxos/react-ui-pickers';
 import { StackItem } from '@dxos/react-ui-stack';
-import { byPosition } from '@dxos/util';
 
-import { SpaceCapabilities } from '../../capabilities';
 import { SPACE_PLUGIN } from '../../meta';
+import { SpaceAction, SpaceForm } from '../../types';
 
-export const SPACE_SETTINGS_DIALOG = `${SPACE_PLUGIN}/SpaceSettingsDialog`;
-
-export type SpaceSettingsTab = 'members' | 'settings';
+const FormSchema = SpaceForm.pipe(
+  Schema.extend(Schema.Struct({ archived: Schema.Boolean.annotations({ title: 'Archive space' }) })),
+);
 
 export type SpaceSettingsContainerProps = {
   space: Space;
 };
 
+// TODO(wittjosiah): Handle space migrations here?
 export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) => {
   const { t } = useTranslation(SPACE_PLUGIN);
-  const state = useCapability(SpaceCapabilities.MutableState);
-  const items = useCapabilities(SpaceCapabilities.SettingsSection).toSorted(byPosition);
-  const data = useMemo(() => ({ subject: space }), [space]);
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const client = useClient();
+  const archived = useMulticastObservable(space.state) === SpaceState.SPACE_INACTIVE;
+  const [edgeReplication, setEdgeReplication] = useState(
+    space.internal.data.edgeReplication === EdgeReplicationSetting.ENABLED,
+  );
+  const toggleEdgeReplication = useCallback(
+    async (next: boolean) => {
+      setEdgeReplication(next);
+      await space?.internal
+        .setEdgeReplicationPreference(next ? EdgeReplicationSetting.ENABLED : EdgeReplicationSetting.DISABLED)
+        .catch((err: unknown) => {
+          log.catch(err);
+          setEdgeReplication(!next);
+        });
+    },
+    [space],
+  );
 
-  const handleOpenSectionChange = useCallback(
-    (sections: string[]) => {
-      state.spaceSettingsOpenSections.splice(0, state.spaceSettingsOpenSections.length, ...sections);
+  const handleSave = useCallback(
+    (properties: Schema.Schema.Type<typeof FormSchema>) => {
+      void toggleEdgeReplication(properties.edgeReplication);
+      if (properties.name !== space.properties.name) {
+        space.properties.name = properties.name;
+      }
+      if (properties.icon !== space.properties.icon) {
+        space.properties.icon = properties.icon;
+      }
+      if (properties.hue !== space.properties.hue) {
+        space.properties.hue = properties.hue;
+      }
+      if (properties.archived && !archived) {
+        void dispatch(
+          pipe(
+            createIntent(SpaceAction.Close, { space }),
+            chain(LayoutAction.SwitchWorkspace, { part: 'workspace', subject: client.spaces.default.id }),
+          ),
+        );
+      } else if (!properties.archived && archived) {
+        void dispatch(createIntent(SpaceAction.Open, { space }));
+      }
     },
-    [state],
+    [space, toggleEdgeReplication, archived],
+  );
+
+  const values = useMemo(
+    () => ({
+      name: space.properties.name,
+      icon: space.properties.icon,
+      hue: space.properties.hue,
+      edgeReplication,
+      archived,
+    }),
+    [space.properties.name, space.properties.icon, space.properties.hue, edgeReplication, archived],
+  );
+
+  const customElements: Partial<Record<string, InputComponent>> = useMemo(
+    () => ({
+      name: ({ type, label, getValue, onValueChange }) => {
+        const handleChange = useCallback(
+          ({ target: { value } }: ChangeEvent<HTMLInputElement>) => onValueChange(type, value),
+          [onValueChange, type],
+        );
+        return (
+          <ControlItemInput title={label} description={t('display name description')}>
+            <Input.TextInput
+              value={getValue()}
+              onChange={handleChange}
+              placeholder={t('display name input placeholder')}
+              classNames='min-is-64'
+            />
+          </ControlItemInput>
+        );
+      },
+      icon: ({ type, label, getValue, onValueChange }) => {
+        const handleChange = useCallback((nextEmoji: string) => onValueChange(type, nextEmoji), [onValueChange, type]);
+        const handleEmojiReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
+        return (
+          <ControlItem title={label} description={t('icon description')}>
+            <IconPicker
+              value={getValue()}
+              onChange={handleChange}
+              onReset={handleEmojiReset}
+              classNames='justify-self-end'
+              iconSize={5}
+            />
+          </ControlItem>
+        );
+      },
+      hue: ({ type, label, getValue, onValueChange }) => {
+        const handleChange = useCallback((nextHue: string) => onValueChange(type, nextHue), [onValueChange, type]);
+        const handleHueReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
+        return (
+          <ControlItem title={label} description={t('hue description')}>
+            <HuePicker
+              value={getValue()}
+              onChange={handleChange}
+              onReset={handleHueReset}
+              classNames='[--hue-preview-size:1.25rem] justify-self-end'
+            />
+          </ControlItem>
+        );
+      },
+      edgeReplication: ({ type, label, getValue, onValueChange }) => {
+        const handleChange = useCallback((checked: boolean) => onValueChange(type, checked), [onValueChange, type]);
+        return (
+          <ControlItemInput title={label} description={t('edge replication description')}>
+            <Input.Switch checked={getValue()} onCheckedChange={handleChange} classNames='justify-self-end' />
+          </ControlItemInput>
+        );
+      },
+      archived: ({ type, label, getValue, onValueChange }) => {
+        const handleChange = useCallback(() => onValueChange(type, !getValue()), [onValueChange, type, getValue]);
+        return (
+          <ControlItemInput title={label} description={t('archive space description')}>
+            <Button disabled={space === client.spaces.default} onClick={handleChange}>
+              {getValue() ? t('unarchive space label') : t('archive space label')}
+            </Button>
+          </ControlItemInput>
+        );
+      },
+    }),
+    [t, space],
   );
 
   return (
-    <StackItem.Content classNames='p-2 block overflow-y-auto'>
-      <Accordion.Root<SpaceCapabilities.SettingsSection>
-        items={items}
-        value={state.spaceSettingsOpenSections}
-        onValueChange={handleOpenSectionChange}
-      >
-        {({ items }) => (
-          <>
-            {items.map((item) => (
-              <Accordion.Item key={item.id} item={item} classNames='container-max-width'>
-                <Accordion.ItemHeader classNames='pie-6' asChild>
-                  <ControlSectionHeading title={toLocalizedString(item.label, t)} />
-                </Accordion.ItemHeader>
-                <Accordion.ItemBody>
-                  <Surface role={`space-settings--${item.id}`} data={data} />
-                </Accordion.ItemBody>
-              </Accordion.Item>
-            ))}
-          </>
-        )}
-      </Accordion.Root>
+    <StackItem.Content classNames='block overflow-y-auto pli-2'>
+      <ControlPage>
+        <ControlSection
+          title={t('space properties settings verbose label', { ns: SPACE_PLUGIN })}
+          description={t('space properties settings description', { ns: SPACE_PLUGIN })}
+        >
+          <Form
+            schema={FormSchema}
+            values={values}
+            autoSave
+            onSave={handleSave}
+            Custom={customElements}
+            classNames='p-0 container-max-width [&_[role="form"]]:grid [&_[role="form"]]:grid-cols-1 md:[&_[role="form"]]:grid-cols-[1fr_min-content] [&_[role="form"]]:gap-4'
+          />
+        </ControlSection>
+      </ControlPage>
     </StackItem.Content>
   );
 };

package/src/components/SpaceSettings/index.ts

@@ -2,5 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './SpacePropertiesForm';
 export * from './SpaceSettingsContainer';

package/src/components/SyncStatus/InlineSyncStatus.tsx

@@ -2,24 +2,23 @@
 // Copyright 2024 DXOS.org
 //
 
+import { Option } from 'effect';
 import React, { useEffect, useState } from 'react';
 
 import { useAppGraph } from '@dxos/app-framework';
-import { QueryEdgeStatusResponse } from '@dxos/protocols/proto/dxos/client/services';
+import { EdgeStatus } from '@dxos/protocols/proto/dxos/client/services';
 import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
 import { useClient } from '@dxos/react-client';
-import { type Space } from '@dxos/react-client/echo';
+import { type Space, useSpaceSyncState } from '@dxos/react-client/echo';
 import { Tooltip, useTranslation } from '@dxos/react-ui';
 import { AttentionGlyph, useAttended, useAttention } from '@dxos/react-ui-attention';
 
-import { useSpaceSyncState } from './sync-state';
 import { usePath } from '../../hooks';
 import { SPACE_PLUGIN } from '../../meta';
 
-const useEdgeStatus = (): QueryEdgeStatusResponse.EdgeStatus => {
-  const [status, setStatus] = useState(QueryEdgeStatusResponse.EdgeStatus.NOT_CONNECTED);
+const useEdgeStatus = (): EdgeStatus => {
+  const [status, setStatus] = useState(EdgeStatus.NOT_CONNECTED);
   const client = useClient();
-
   useEffect(() => {
     client.services.services.EdgeAgentService?.queryEdgeStatus().subscribe(({ status }) => {
       setStatus(status);
@@ -42,30 +41,22 @@ export const InlineSyncStatus = ({ space, open }: { space: Space; open?: boolean
   const attended = useAttended();
   const startOfAttention = attended.at(-1);
   const path = usePath(graph, startOfAttention);
-  const containsAttended = !open && !isAttended && id && path ? path.includes(id) : false;
+  const containsAttended = !open && !isAttended && id && Option.isSome(path) ? path.value.includes(id) : false;
 
-  const connectedToEdge = useEdgeStatus() === QueryEdgeStatusResponse.EdgeStatus.CONNECTED;
+  const connectedToEdge = useEdgeStatus() === EdgeStatus.CONNECTED;
   // TODO(wittjosiah): This is not reactive.
   const edgeSyncEnabled = space.internal.data.edgeReplication === EdgeReplicationSetting.ENABLED;
   const syncState = useSpaceSyncState(space);
   const syncing = connectedToEdge && edgeSyncEnabled && syncState && syncState.missingOnLocal > 0;
 
   return (
-    <Tooltip.Root>
-      <Tooltip.Trigger asChild>
-        <AttentionGlyph
-          syncing={syncing}
-          attended={isAttended}
-          containsAttended={containsAttended}
-          classNames='self-center mie-1'
-        />
-      </Tooltip.Trigger>
-      <Tooltip.Portal>
-        <Tooltip.Content side='bottom' classNames='z-[70]'>
-          <span>{t('syncing label')}</span>
-          <Tooltip.Arrow />
-        </Tooltip.Content>
-      </Tooltip.Portal>
-    </Tooltip.Root>
+    <Tooltip.Trigger asChild content={t('syncing label')} side='bottom'>
+      <AttentionGlyph
+        syncing={syncing}
+        attended={isAttended}
+        containsAttended={containsAttended}
+        classNames='self-center mie-1'
+      />
+    </Tooltip.Trigger>
   );
 };

package/src/components/SyncStatus/SyncStatus.tsx

@@ -2,22 +2,19 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { StatusBar } from '@dxos/plugin-status-bar';
 import { useClient } from '@dxos/react-client';
-import { type SpaceId } from '@dxos/react-client/echo';
-import { Icon, Input, Popover, useTranslation } from '@dxos/react-ui';
-import { type ThemedClassName } from '@dxos/react-ui';
-import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
-import { mx } from '@dxos/react-ui-theme';
+import { getSyncSummary, type SpaceSyncStateMap, useSyncState } from '@dxos/react-client/echo';
+import { Icon, useTranslation } from '@dxos/react-ui';
 
-import { SpaceRowContainer, SYNC_STALLED_TIMEOUT } from './Space';
 import { createClientSaveTracker } from './save-tracker';
 import { getIcon, getStatus } from './status';
-import { type PeerSyncState, type SpaceSyncStateMap, getSyncSummary, useSyncState } from './sync-state';
 import { SPACE_PLUGIN } from '../../meta';
 
+const SYNC_STALLED_TIMEOUT = 5_000;
+
 export const SyncStatus = () => {
   const client = useClient();
   const state = useSyncState();
@@ -57,65 +54,5 @@ export const SyncStatusIndicator = ({ state, saved }: { state: SpaceSyncStateMap
   const title = t(`${status} label`);
   const icon = <Icon icon={getIcon(status)} size={4} classNames={classNames} />;
 
-  if (offline) {
-    return <StatusBar.Item title={title}>{icon}</StatusBar.Item>;
-  } else {
-    return (
-      <Popover.Root>
-        <Popover.Trigger asChild>
-          <StatusBar.Button title={title}>{icon}</StatusBar.Button>
-        </Popover.Trigger>
-        <Popover.Portal>
-          <Popover.Content>
-            <SyncStatusDetail state={state} summary={summary} debug={false} />
-            <Popover.Arrow />
-          </Popover.Content>
-        </Popover.Portal>
-      </Popover.Root>
-    );
-  }
-};
-
-export type SyncStatusDetailProps = ThemedClassName<{
-  state: SpaceSyncStateMap;
-  summary: PeerSyncState;
-  debug?: boolean;
-}>;
-
-// TODO(wittjosiah): This currently does not show `differentDocuments` at all.
-export const SyncStatusDetail = ({ classNames, state, summary, debug }: SyncStatusDetailProps) => {
-  const [showAll, setShowAll] = useState(false);
-  const { t } = useTranslation(SPACE_PLUGIN);
-  const entries = Object.entries(state)
-    .filter(([_, value]) => showAll || value.missingOnLocal + value.missingOnRemote > 0)
-    .toSorted(([a], [b]) => (a < b ? -1 : a > b ? 1 : 0));
-
-  const handleCheckedChange = useCallback((state: boolean) => setShowAll(state), [setShowAll]);
-
-  // TODO(burdon): Normalize to max document count?
-  return (
-    <div className={mx('flex flex-col gap-3 p-2 text-xs min-w-[400px]', classNames)}>
-      <div role='none' className='flex items-center'>
-        <h1 className='flex-1'>{t('sync status title')}</h1>
-        <div className='flex items-center gap-2'>
-          <Input.Root>
-            <Input.Label classNames='text-xs'>{t('show all label')}</Input.Label>
-            <Input.Checkbox checked={showAll} onCheckedChange={handleCheckedChange} />
-          </Input.Root>
-        </div>
-      </div>
-      <div className='flex flex-col gap-2'>
-        {entries.length === 0 && (
-          <div role='none' className='flex justify-center'>
-            {/* TODO(wittjosiah): This text should be updated once status includes different documents. */}
-            {t('no sync status label')}
-          </div>
-        )}
-        {entries.map(([spaceId, state]) => (
-          <SpaceRowContainer key={spaceId} spaceId={spaceId as SpaceId} state={state} />
-        ))}
-      </div>
-      {debug && <SyntaxHighlighter language='json'>{JSON.stringify(summary, null, 2)}</SyntaxHighlighter>}
-    </div>
-  );
+  return <StatusBar.Item title={title}>{icon}</StatusBar.Item>;
 };

package/src/components/index.ts

@@ -9,12 +9,11 @@ export * from './CollectionSection';
 export * from './JoinDialog';
 export * from './MembersContainer';
 export * from './MenuFooter';
-export * from './ObjectSettingsContainer';
+export * from './ObjectSettings';
 export * from './PersistenceStatus';
-export * from './PopoverAddSpace';
 export * from './PopoverRenameObject';
 export * from './PopoverRenameSpace';
-export * from './ShareSpaceButton';
+export * from './SchemaContainer';
 export * from './SpacePresence';
 export * from './SpacePluginSettings';
 export * from './SpaceSettings';

package/src/hooks/index.ts

@@ -2,4 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
+export * from './useActiveSpace';
+export * from './useInputSurfaceLookup';
 export * from './usePath';