@dxos/plugin-space 0.8.4-main.1068cf700f → 0.8.4-main.1c7ec43d41

package/src/components/SpacePresence/SpacePresence.tsx

@@ -1,273 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import * as Option from 'effect/Option';
-import React, { forwardRef, useCallback, useEffect, useState } from 'react';
-
-import { useAtomCapability } from '@dxos/app-framework/ui';
-import { useAppGraph } from '@dxos/app-toolkit/ui';
-import { generateName } from '@dxos/display-name';
-import { type Key, Obj } from '@dxos/echo';
-import { PublicKey } from '@dxos/react-client';
-import { type SpaceMember, useMembers, useSpace } from '@dxos/react-client/echo';
-import { type Identity, useIdentity } from '@dxos/react-client/halo';
-import {
-  Avatar,
-  type AvatarContentProps,
-  type DxAvatar,
-  List,
-  ListItem,
-  Popover,
-  type Size,
-  type ThemedClassName,
-  Tooltip,
-  useDefaultValue,
-  useTranslation,
-} from '@dxos/react-ui';
-import { AttentionGlyph, type AttentionGlyphProps, useAttended, useAttention } from '@dxos/react-ui-attention';
-import { ComplexMap, keyToFallback } from '@dxos/util';
-
-import { usePath } from '../../hooks';
-import { meta } from '../../meta';
-import { type ObjectViewerProps, SpaceCapabilities } from '../../types';
-
-// TODO(thure): Get/derive these values from protocol
-const REFRESH_INTERVAL = 5000;
-const ACTIVITY_DURATION = 30_000;
-
-// TODO(thure): This is chiefly meant to satisfy TS & provide an empty map after `deepSignal` interactions.
-const noViewers = new ComplexMap<PublicKey, ObjectViewerProps>(PublicKey.hash);
-
-// TODO(wittjosiah): Factor out?
-const getName = (identity: Identity) => identity.profile?.displayName ?? generateName(identity.identityKey.toHex());
-
-export type SpacePresenceProps = {
-  object: Obj.Unknown;
-  spaceId?: Key.SpaceId;
-};
-
-export const SpacePresence = ({ object, spaceId }: SpacePresenceProps) => {
-  const ephemeral = useAtomCapability(SpaceCapabilities.EphemeralState);
-  const identity = useIdentity();
-  const db = Obj.getDatabase(object);
-  const space = useSpace(spaceId ?? db?.spaceId);
-  const spaceMembers = useMembers(spaceId ?? db?.spaceId);
-
-  const [_moment, setMoment] = useState(Date.now());
-
-  // NOTE(thure): This is necessary so Presence updates without any underlying data updating.
-  useEffect(() => {
-    const interval = setInterval(() => setMoment(Date.now()), REFRESH_INTERVAL);
-    return () => clearInterval(interval);
-  }, []);
-
-  const memberOnline = useCallback((member: SpaceMember) => member.presence === 1, []);
-  const memberIsNotSelf = useCallback(
-    (member: SpaceMember) => !identity?.identityKey.equals(member.identity.identityKey),
-    [identity?.identityKey],
-  );
-
-  // TODO(thure): Could it be a smell to return early when there are interactions with `deepSignal` later, since it
-  //  prevents reactivity?
-  if (!identity || !ephemeral || !space) {
-    return null;
-  }
-
-  const currentObjectViewers = ephemeral.viewersByObject[Obj.getDXN(object).toString()] ?? noViewers;
-
-  const membersForObject = spaceMembers
-    .filter((member) => memberOnline(member) && memberIsNotSelf(member))
-    .filter((member) => currentObjectViewers.has(member.identity.identityKey))
-    .map((member) => {
-      const objectView = currentObjectViewers.get(member.identity.identityKey);
-      const lastSeen = objectView?.lastSeen ?? -Infinity;
-      const currentlyAttended = objectView?.currentlyAttended ?? false;
-
-      return {
-        ...member,
-        currentlyAttended,
-        lastSeen,
-      };
-    })
-    .toSorted((a, b) => a.lastSeen - b.lastSeen);
-
-  return <FullPresence members={membersForObject} />;
-};
-
-export type Member = SpaceMember & {
-  /**
-   * Last time a member was seen on this object.
-   */
-  lastSeen: number;
-  currentlyAttended: boolean;
-};
-
-export type MemberPresenceProps = ThemedClassName<{
-  size?: Size;
-  members?: Member[];
-  showCount?: boolean;
-  onMemberClick?: (member: Member) => void;
-}>;
-
-export const FullPresence = (props: MemberPresenceProps) => {
-  const { size = 9, onMemberClick } = props;
-  const members = useDefaultValue(props.members, () => []);
-
-  if (members.length === 0) {
-    return null;
-  }
-
-  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>
-      ))}
-
-      {members.length > 3 && (
-        <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>
-          </Popover.Trigger>
-          <Popover.Portal>
-            <Popover.Content side='bottom'>
-              <Popover.Arrow />
-              <Popover.Viewport classNames='max-bs-56'>
-                <List>
-                  {members.map((member) => (
-                    <ListItem.Root
-                      key={member.identity.identityKey.toHex()}
-                      classNames='flex gap-2 items-center cursor-pointer mbe-2'
-                      onClick={() => onMemberClick?.(member)}
-                      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}
-                      />
-                    </ListItem.Root>
-                  ))}
-                </List>
-              </Popover.Viewport>
-            </Popover.Content>
-          </Popover.Portal>
-        </Popover.Root>
-      )}
-    </div>
-  );
-};
-
-type PresenceAvatarProps = Pick<AvatarContentProps, 'size'> & {
-  identity: Identity;
-  showName?: boolean;
-  match?: boolean;
-  index?: number;
-  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>
-    );
-  },
-);
-
-export type SmallPresenceLiveProps = {
-  id?: string;
-  open?: boolean;
-  viewers?: ComplexMap<PublicKey, ObjectViewerProps>;
-};
-
-export const SmallPresenceLive = ({ id, open, viewers }: SmallPresenceLiveProps) => {
-  const { hasAttention, isAncestor, isRelated } = useAttention(id);
-  const isAttended = hasAttention || isAncestor || isRelated;
-
-  // TODO(wittjosiah): If the attended node is deep in the graph and the graph is not fully loaded
-  //   this will result in an empty path until the graph is connected.
-  // TODO(wittjosiah): Consider using this indicator for all open nodes instead of just attended.
-  const { graph } = useAppGraph();
-  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 getActiveViewers = (viewers: ComplexMap<PublicKey, ObjectViewerProps>): ObjectViewerProps[] => {
-    const moment = Date.now();
-    return Array.from<ObjectViewerProps>(viewers.values()).filter(
-      (viewer) => moment - viewer.lastSeen < ACTIVITY_DURATION,
-    );
-  };
-
-  const [activeViewers, setActiveViewers] = useState(viewers ? getActiveViewers(viewers) : []);
-
-  useEffect(() => {
-    if (viewers) {
-      setActiveViewers(getActiveViewers(viewers));
-      const interval = setInterval(() => {
-        setActiveViewers(getActiveViewers(viewers));
-      }, REFRESH_INTERVAL);
-      return () => clearInterval(interval);
-    }
-  }, [viewers]);
-
-  return <SmallPresence count={activeViewers.length} attended={isAttended} containsAttended={containsAttended} />;
-};
-
-export type SmallPresenceProps = {
-  count?: number;
-} & Pick<AttentionGlyphProps, 'attended' | 'containsAttended'>;
-
-export const SmallPresence = ({ count = 0, attended, containsAttended }: SmallPresenceProps) => {
-  const { t } = useTranslation(meta.id);
-
-  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>
-  );
-};

package/src/components/SpacePresence/index.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-export * from './SpacePresence';

package/src/components/SpaceRenamePopover/SpaceRenamePopover.tsx

@@ -1,54 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { useCallback, useRef, useState } from 'react';
-
-import { useOperationInvoker } from '@dxos/app-framework/ui';
-import { LayoutOperation } from '@dxos/app-toolkit';
-import { type Space } from '@dxos/client/echo';
-import { Obj } from '@dxos/echo';
-import { Button, Input, Popover, useTranslation } from '@dxos/react-ui';
-import { osTranslations } from '@dxos/ui-theme';
-
-import { meta } from '../../meta';
-
-export const SPACE_RENAME_POPOVER = `${meta.id}/SpaceRenamePopover`;
-
-export const SpaceRenamePopover = ({ space }: { space: Space }) => {
-  const { t } = useTranslation(meta.id);
-  const doneButton = useRef<HTMLButtonElement>(null);
-  const [name, setName] = useState(space.properties.name ?? '');
-  const { invokePromise } = useOperationInvoker();
-
-  const handleDone = useCallback(() => {
-    Obj.change(space.properties, (p) => {
-      p.name = name;
-    });
-    void invokePromise(LayoutOperation.UpdatePopover, { anchorId: '', state: false });
-  }, [space, name, invokePromise]);
-
-  // TODO(thure): Why does the input value need to be uncontrolled to work?
-  return (
-    <div role='none' className='p-2 flex gap-2'>
-      <div role='none' className='flex-1'>
-        <Input.Root>
-          <Input.Label srOnly>{t('space name label')}</Input.Label>
-          <Input.TextInput
-            defaultValue={space.properties.name ?? ''}
-            placeholder={t('unnamed space label')}
-            onChange={({ target: { value } }) => setName(value)}
-            // TODO(wittjosiah): Ideally this should access the popover context to close the popover.
-            //   Currently this is not possible because Radix does not expose the popover context.
-            onKeyDown={({ key }) => key === 'Enter' && doneButton.current?.click()}
-          />
-        </Input.Root>
-      </div>
-      <Popover.Close asChild>
-        <Button ref={doneButton} classNames='self-stretch' onClick={handleDone}>
-          {t('done label', { ns: osTranslations })}
-        </Button>
-      </Popover.Close>
-    </div>
-  );
-};

package/src/components/SpaceRenamePopover/index.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-export * from './SpaceRenamePopover';

package/src/components/SpaceSettings/SpaceSettingsContainer.stories.tsx

@@ -1,46 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React from 'react';
-
-import { OperationPlugin } from '@dxos/app-framework';
-import { withPluginManager } from '@dxos/app-framework/testing';
-import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
-import { withTheme } from '@dxos/react-ui/testing';
-
-import { translations } from '../../translations';
-
-import { SpaceSettingsContainer, type SpaceSettingsContainerProps } from './SpaceSettingsContainer';
-
-const Story = (props: Partial<SpaceSettingsContainerProps>) => {
-  const { space } = useClientStory();
-  return (
-    <div role='none' className='p-2 border border-primary-500 rounded'>
-      <SpaceSettingsContainer {...props} space={space!} />
-    </div>
-  );
-};
-
-const meta = {
-  title: 'plugins/plugin-space/SpaceSettingsContainer',
-  component: SpaceSettingsContainer,
-  render: Story,
-  decorators: [
-    withTheme(),
-    withClientProvider({ createIdentity: true, createSpace: true }),
-    // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
-    withPluginManager({ plugins: [OperationPlugin()] }),
-  ],
-  parameters: {
-    translations,
-    layout: 'centered',
-  },
-} satisfies Meta<typeof SpaceSettingsContainer>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: StoryObj<typeof SpaceSettingsContainer> = {};

package/src/components/SpaceSettings/SpaceSettingsContainer.tsx

@@ -1,202 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import * as Schema from 'effect/Schema';
-import React, { type ChangeEvent, useCallback, useMemo, useState } from 'react';
-
-import { useCapabilities, useOperationInvoker } from '@dxos/app-framework/ui';
-import { LayoutOperation } from '@dxos/app-toolkit';
-import { Obj } from '@dxos/echo';
-import { log } from '@dxos/log';
-import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
-import { useClient } from '@dxos/react-client';
-import { type Space, SpaceState } from '@dxos/react-client/echo';
-import { Button, Input, useFileDownload, useMulticastObservable, useTranslation } from '@dxos/react-ui';
-import { Form, type FormFieldMap, Settings } from '@dxos/react-ui-form';
-import { HuePicker, IconPicker } from '@dxos/react-ui-pickers';
-
-import { meta } from '../../meta';
-import { SpaceCapabilities, SpaceForm, SpaceOperation } from '../../types';
-
-const SpaceFormSchema = 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(meta.id);
-  const { invokePromise } = useOperationInvoker();
-  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 handleValuesChanged = useCallback(
-    (newValues: Partial<Schema.Schema.Type<typeof SpaceFormSchema>>, meta: { changed?: Record<string, boolean> }) => {
-      const changed = meta.changed ?? {};
-      if (changed['edgeReplication']) {
-        void toggleEdgeReplication(newValues.edgeReplication ?? false);
-      }
-
-      if (changed['name'] || changed['icon'] || changed['hue']) {
-        Obj.change(space.properties, (p) => {
-          if (changed['name'] && newValues.name !== undefined) {
-            p.name = newValues.name;
-          }
-          if (changed['icon']) {
-            p.icon = newValues.icon;
-          }
-          if (changed['hue']) {
-            p.hue = newValues.hue;
-          }
-        });
-      }
-
-      if (changed['archived']) {
-        if (newValues.archived && !archived) {
-          void invokePromise(SpaceOperation.Close, { space });
-          void invokePromise(LayoutOperation.SwitchWorkspace, {
-            subject: client.spaces.default.id,
-          });
-        } else if (!newValues.archived && archived) {
-          void invokePromise(SpaceOperation.Open, { space });
-        }
-      }
-    },
-    [space, client, archived, invokePromise, toggleEdgeReplication],
-  );
-
-  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 fieldMap = useMemo<FormFieldMap>(
-    () => ({
-      name: ({ type, label, getValue, onValueChange }) => {
-        const handleChange = useCallback(
-          ({ target: { value } }: ChangeEvent<HTMLInputElement>) => onValueChange(type, value),
-          [onValueChange, type],
-        );
-        return (
-          <Settings.ItemInput title={label} description={t('display name description')}>
-            <Input.TextInput
-              value={getValue()}
-              onChange={handleChange}
-              placeholder={t('display name input placeholder')}
-              classNames='min-is-64'
-            />
-          </Settings.ItemInput>
-        );
-      },
-      icon: ({ type, label, getValue, onValueChange }) => {
-        const handleChange = useCallback((icon: string) => onValueChange(type, icon), [onValueChange, type]);
-        const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
-        return (
-          <Settings.Item title={label} description={t('icon description')}>
-            <IconPicker
-              value={getValue()}
-              onChange={handleChange}
-              onReset={handleReset}
-              classNames='justify-self-end'
-            />
-          </Settings.Item>
-        );
-      },
-      hue: ({ type, label, getValue, onValueChange }) => {
-        const handleChange = useCallback((nextHue: string) => onValueChange(type, nextHue), [onValueChange, type]);
-        const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
-        return (
-          <Settings.Item title={label} description={t('hue description')}>
-            <HuePicker value={getValue()} onChange={handleChange} onReset={handleReset} classNames='justify-self-end' />
-          </Settings.Item>
-        );
-      },
-      edgeReplication: ({ type, label, getValue, onValueChange }) => {
-        const handleChange = useCallback((checked: boolean) => onValueChange(type, checked), [onValueChange, type]);
-        return (
-          <Settings.ItemInput title={label} description={t('edge replication description')}>
-            <Input.Switch checked={getValue()} onCheckedChange={handleChange} classNames='justify-self-end' />
-          </Settings.ItemInput>
-        );
-      },
-      archived: ({ type, label, getValue, onValueChange }) => {
-        const handleChange = useCallback(() => onValueChange(type, !getValue()), [onValueChange, type, getValue]);
-        return (
-          <Settings.ItemInput title={label} description={t('archive space description')}>
-            <Button
-              disabled={space === client.spaces.default}
-              variant={getValue() ? 'default' : 'destructive'}
-              onClick={handleChange}
-            >
-              {getValue() ? t('unarchive space label') : t('archive space label')}
-            </Button>
-          </Settings.ItemInput>
-        );
-      },
-    }),
-    [t, space, client],
-  );
-
-  const download = useFileDownload();
-  const handleBackup = useCallback(async () => {
-    const archive = await space.internal.export();
-    download(new Blob([archive.contents as Uint8Array<ArrayBuffer>]), archive.filename);
-  }, [space, download]);
-
-  const repairs = useCapabilities(SpaceCapabilities.Repair);
-  const handleRepair = useCallback(async () => {
-    await Promise.all(repairs.map((repair) => repair({ space, isDefault: client.spaces.default === space })));
-  }, [client, space, repairs]);
-
-  return (
-    <Settings.Root>
-      <Settings.Section
-        title={t('space properties settings verbose label')}
-        description={t('space properties settings description', { ns: meta.id })}
-      >
-        <Form.Root fieldMap={fieldMap} schema={SpaceFormSchema} values={values} onValuesChanged={handleValuesChanged}>
-          <Form.FieldSet classNames='space-y-trimMd' />
-        </Form.Root>
-      </Settings.Section>
-      <Settings.Section title={t('space controls title')} description={t('space controls description')}>
-        <Settings.ItemInput title={t('backup space title')} description={t('backup space description')}>
-          <Button onClick={handleBackup}>{t('download backup label')}</Button>
-        </Settings.ItemInput>
-        <Settings.ItemInput title={t('repair space title')} description={t('repair space description')}>
-          <Button onClick={handleRepair}>{t('repair space label')}</Button>
-        </Settings.ItemInput>
-      </Settings.Section>
-    </Settings.Root>
-  );
-};
-
-SpaceSettingsContainer.displayName = 'SpaceSettingsContainer';

package/src/components/SyncStatus/InlineSyncStatus.tsx

@@ -1,62 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import * as Option from 'effect/Option';
-import React, { useEffect, useState } from 'react';
-
-import { useAppGraph } from '@dxos/app-toolkit/ui';
-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, useSpaceSyncState } from '@dxos/react-client/echo';
-import { Tooltip, useTranslation } from '@dxos/react-ui';
-import { AttentionGlyph, useAttended, useAttention } from '@dxos/react-ui-attention';
-
-import { usePath } from '../../hooks';
-import { meta } from '../../meta';
-
-const useEdgeStatus = (): EdgeStatus.ConnectionState => {
-  const [status, setStatus] = useState(EdgeStatus.ConnectionState.NOT_CONNECTED);
-  const client = useClient();
-  useEffect(() => {
-    client.services.services.EdgeAgentService?.queryEdgeStatus().subscribe(({ status }) => {
-      setStatus(status.state);
-    });
-  }, [client]);
-
-  return status;
-};
-
-export const InlineSyncStatus = ({ space, open }: { space: Space; open?: boolean }) => {
-  const { t } = useTranslation(meta.id);
-  const id = space.id;
-  const { hasAttention, isAncestor, isRelated } = useAttention(id);
-  const isAttended = hasAttention || isAncestor || isRelated;
-
-  // TODO(wittjosiah): If the attended node is deep in the graph and the graph is not fully loaded
-  //   this will result in an empty path until the graph is connected.
-  // TODO(wittjosiah): Consider using this indicator for all open nodes instead of just attended.
-  const { graph } = useAppGraph();
-  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 connectedToEdge = useEdgeStatus() === EdgeStatus.ConnectionState.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>
-  );
-};