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

package/src/components/SpacePresence.tsx

@@ -2,8 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Option } from 'effect';
-import React, { forwardRef, useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 import { useAppGraph, useCapability } from '@dxos/app-framework';
 import { generateName } from '@dxos/display-name';
@@ -17,12 +16,10 @@ 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';
@@ -117,38 +114,40 @@ export const FullPresence = (props: MemberPresenceProps) => {
   return (
     <div className='dx-avatar-group' data-testid='spacePlugin.presence'>
       {members.slice(0, 3).map((member, i) => (
-        <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>
+        <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>
       ))}
 
       {members.length > 3 && (
-        <Popover.Root>
-          <Popover.Trigger className='grid focus:outline-none'>
+        <Tooltip.Root>
+          <Tooltip.Trigger>
             <Avatar.Root>
               {/* TODO(wittjosiah): Make text fit. */}
               <Avatar.Content
                 status='inactive'
                 style={{ zIndex: members.length - 4 }}
                 fallback={`+${members.length - 3}`}
-                size={size}
               />
             </Avatar.Root>
-          </Popover.Trigger>
-          <Popover.Portal>
-            <Popover.Content side='bottom'>
-              <Popover.Arrow />
+          </Tooltip.Trigger>
+          <Tooltip.Portal>
+            <Tooltip.Content side='bottom'>
+              <Tooltip.Arrow />
               <List classNames='max-h-56 overflow-y-auto'>
                 {members.map((member) => (
                   <ListItem.Root
@@ -158,13 +157,13 @@ export const FullPresence = (props: MemberPresenceProps) => {
                     data-testid='identity-list-item'
                   >
                     {/* TODO(Zan): Match always true now we're showing 'members viewing current object'. */}
-                    <PresenceAvatar identity={member.identity} size={size} showName match={member.currentlyAttended} />
+                    <PrensenceAvatar identity={member.identity} size={size} showName match={member.currentlyAttended} />
                   </ListItem.Root>
                 ))}
               </List>
-            </Popover.Content>
-          </Popover.Portal>
-        </Popover.Root>
+            </Tooltip.Content>
+          </Tooltip.Portal>
+        </Tooltip.Root>
       )}
     </div>
   );
@@ -178,28 +177,26 @@ type PresenceAvatarProps = Pick<AvatarContentProps, 'size'> & {
   onClick?: () => void;
 };
 
-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>
-    );
-  },
-);
+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>
+  );
+};
 
 export type SmallPresenceLiveProps = {
   id?: string;
@@ -218,7 +215,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 && Option.isSome(path) ? path.value.includes(id) : false;
+  const containsAttended = !open && !isAttended && id && path ? path.includes(id) : false;
 
   const getActiveViewers = (viewers: ComplexMap<PublicKey, ObjectViewerProps>): ObjectViewerProps[] => {
     const moment = Date.now();
@@ -250,13 +247,21 @@ export const SmallPresence = ({ count = 0, attended, containsAttended }: SmallPr
   const { t } = useTranslation(SPACE_PLUGIN);
 
   return (
-    <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>
+    <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>
   );
 };

package/src/components/SpaceSettings/{SpaceSettingsContainer.stories.tsx → SpacePropertiesForm.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 { SpaceSettingsContainer, type SpaceSettingsContainerProps } from './SpaceSettingsContainer';
+import { SpacePropertiesForm, type SpacePropertiesFormProps } from './SpacePropertiesForm';
 import translations from '../../translations';
 
-const Story = (args: Partial<SpaceSettingsContainerProps>) => {
+const Story = (args: Partial<SpacePropertiesFormProps>) => {
   const { space } = useClientProvider();
   return (
     <div role='none' className='p-2 border border-primary-500 rounded'>
-      <SpaceSettingsContainer {...args} space={space!} />
+      <SpacePropertiesForm {...args} space={space!} />
     </div>
   );
 };
 
 const meta: Meta = {
-  title: 'plugins/plugin-space/SpaceSettingsContainer',
-  component: SpaceSettingsContainer,
+  title: 'plugins/plugin-space/SpacePropertiesForm',
+  component: SpacePropertiesForm,
   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 SpaceSettingsContainer> = {};
+export const Default: StoryObj<typeof SpacePropertiesForm> = {};

package/src/components/SpaceSettings/SpacePropertiesForm.tsx

@@ -0,0 +1,136 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Schema as S } from 'effect';
+import React, { type ChangeEvent, useCallback, useMemo, useState } from 'react';
+
+import { log } from '@dxos/log';
+import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
+import { type Space } from '@dxos/react-client/echo';
+import { Input, useTranslation } from '@dxos/react-ui';
+import { Form, type InputComponent, ControlItem, ControlItemInput } from '@dxos/react-ui-form';
+import { HuePicker, IconPicker } from '@dxos/react-ui-pickers';
+
+import { SPACE_PLUGIN } from '../../meta';
+import { SpaceForm } from '../../types';
+
+export type SpacePropertiesFormProps = {
+  space: Space;
+};
+
+export const SpacePropertiesForm = ({ space }: SpacePropertiesFormProps) => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+
+  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 handleSave = useCallback(
+    (properties: S.Schema.Type<typeof SpaceForm>) => {
+      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;
+      }
+    },
+    [space, toggleEdgeReplication],
+  );
+
+  const values = useMemo(
+    () => ({
+      name: space.properties.name,
+      icon: space.properties.icon,
+      hue: space.properties.hue,
+      edgeReplication,
+    }),
+    [space.properties.name, space.properties.icon, space.properties.hue, edgeReplication],
+  );
+
+  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>
+        );
+      },
+    }),
+    [t],
+  );
+
+  return (
+    <Form
+      schema={SpaceForm}
+      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'
+    />
+  );
+};

package/src/components/SpaceSettings/SpaceSettingsContainer.tsx

@@ -2,182 +2,62 @@
 // Copyright 2024 DXOS.org
 //
 
-import { pipe, Schema } from 'effect';
-import React, { type ChangeEvent, useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
-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 { 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 { 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';
 
-const FormSchema = SpaceForm.pipe(
-  Schema.extend(Schema.Struct({ archived: Schema.Boolean.annotations({ title: 'Archive space' }) })),
-);
+export const SPACE_SETTINGS_DIALOG = `${SPACE_PLUGIN}/SpaceSettingsDialog`;
+
+export type SpaceSettingsTab = 'members' | 'settings';
 
 export type SpaceSettingsContainerProps = {
   space: Space;
 };
 
-// TODO(wittjosiah): Handle space migrations here?
 export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) => {
   const { t } = useTranslation(SPACE_PLUGIN);
-  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 state = useCapability(SpaceCapabilities.MutableState);
+  const items = useCapabilities(SpaceCapabilities.SettingsSection).toSorted(byPosition);
+  const data = useMemo(() => ({ subject: space }), [space]);
 
-  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 }));
-      }
+  const handleOpenSectionChange = useCallback(
+    (sections: string[]) => {
+      state.spaceSettingsOpenSections.splice(0, state.spaceSettingsOpenSections.length, ...sections);
     },
-    [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],
+    [state],
   );
 
   return (
-    <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 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>
   );
 };

package/src/components/SpaceSettings/index.ts

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

package/src/components/SyncStatus/InlineSyncStatus.tsx

@@ -2,23 +2,24 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Option } from 'effect';
 import React, { useEffect, useState } from 'react';
 
 import { useAppGraph } from '@dxos/app-framework';
-import { EdgeStatus } from '@dxos/protocols/proto/dxos/client/services';
+import { QueryEdgeStatusResponse } 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, useSpaceSyncState } from '@dxos/react-client/echo';
+import { type Space } 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 = (): EdgeStatus => {
-  const [status, setStatus] = useState(EdgeStatus.NOT_CONNECTED);
+const useEdgeStatus = (): QueryEdgeStatusResponse.EdgeStatus => {
+  const [status, setStatus] = useState(QueryEdgeStatusResponse.EdgeStatus.NOT_CONNECTED);
   const client = useClient();
+
   useEffect(() => {
     client.services.services.EdgeAgentService?.queryEdgeStatus().subscribe(({ status }) => {
       setStatus(status);
@@ -41,22 +42,30 @@ 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 && Option.isSome(path) ? path.value.includes(id) : false;
+  const containsAttended = !open && !isAttended && id && path ? path.includes(id) : false;
 
-  const connectedToEdge = useEdgeStatus() === EdgeStatus.CONNECTED;
+  const connectedToEdge = useEdgeStatus() === QueryEdgeStatusResponse.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.Trigger asChild content={t('syncing label')} side='bottom'>
-      <AttentionGlyph
-        syncing={syncing}
-        attended={isAttended}
-        containsAttended={containsAttended}
-        classNames='self-center mie-1'
-      />
-    </Tooltip.Trigger>
+    <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>
   );
 };