@dxos/plugin-space 0.8.4-main.fffef41 → 0.8.4-staging.60fe92afc8

package/src/containers/CollectionSection/CollectionSection.tsx

@@ -0,0 +1,24 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { type Collection } from '@dxos/echo';
+import { useTranslation } from '@dxos/react-ui';
+
+import { meta } from '#meta';
+
+export type CollectionSectionProps = AppSurface.ObjectSectionProps<Collection.Collection>;
+
+export const CollectionSection = ({ role, subject }: CollectionSectionProps) => {
+  const { t } = useTranslation(meta.id);
+
+  // TODO(wittjosiah): Better placeholder.
+  return (
+    <div role={role} className='min-h-[3.5rem] grid grid-rows-subgrid grid-cols-subgrid items-center'>
+      <span className='truncate'>{subject.name ?? t('unnamed-collection.label')}</span>
+    </div>
+  );
+};

package/src/containers/CollectionSection/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export { CollectionSection as default } from './CollectionSection';

package/src/containers/CreateObjectDialog/CreateObjectDialog.stories.tsx

@@ -0,0 +1,81 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import * as Schema from 'effect/Schema';
+import React, { useState } from 'react';
+
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { type Database } from '@dxos/echo';
+import { type Space } from '@dxos/react-client/echo';
+import { Dialog } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { type CreateObjectOption, type Metadata, CreateObjectPanel } from '#components';
+import { translations } from '#translations';
+
+const mockOptions: CreateObjectOption[] = [
+  { id: 'org.dxos.type.document', label: 'Document', icon: 'ph--file-text--regular' },
+  { id: 'org.dxos.type.table', label: 'Table', icon: 'ph--table--regular' },
+  { id: 'org.dxos.type.canvas', label: 'Canvas', icon: 'ph--paint-brush--regular' },
+  { id: 'org.dxos.type.thread', label: 'Thread', icon: 'ph--chat-circle-text--regular' },
+];
+
+const mockSpaces = [
+  { id: 'space-1', db: {} as Database.Database, displayName: 'Personal Space' },
+  { id: 'space-2', db: {} as Database.Database, displayName: 'Team Space' },
+] as unknown as Space[];
+
+const DefaultStory = () => {
+  const [typename, setTypename] = useState<string | undefined>(undefined);
+
+  return (
+    <Dialog.Root open>
+      <Dialog.Overlay>
+        <Dialog.Content>
+          <Dialog.Body>
+            <CreateObjectPanel
+              options={mockOptions}
+              spaces={mockSpaces}
+              typename={typename}
+              target={{} as Database.Database}
+              resolve={() => mockMetadata}
+              onTypenameChange={setTypename}
+              onCreateObject={async () => {}}
+            />
+          </Dialog.Body>
+        </Dialog.Content>
+      </Dialog.Overlay>
+    </Dialog.Root>
+  );
+};
+
+const mockInputSchema = Schema.Struct({
+  id: Schema.String,
+  name: Schema.String.annotations({ title: 'Name' }),
+  description: Schema.optional(Schema.String.annotations({ title: 'Description' })),
+});
+
+const mockMetadata: Metadata = {
+  id: 'org.dxos.type.document',
+  createObject: () => Effect.succeed({ id: 'mock-id', subject: [], object: {} as any }),
+  inputSchema: mockInputSchema,
+};
+
+const meta = {
+  title: 'plugins/plugin-space/containers/CreateObjectDialog',
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' }), withPluginManager()],
+  parameters: {
+    translations,
+  },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: DefaultStory,
+};

package/src/containers/CreateObjectDialog/CreateObjectDialog.tsx

@@ -0,0 +1,224 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useAtomValue } from '@effect-atom/atom-react';
+import * as Effect from 'effect/Effect';
+import * as Option from 'effect/Option';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+
+import { Capability } from '@dxos/app-framework';
+import { useOperationInvoker, usePluginManager } from '@dxos/app-framework/ui';
+import { allTypesQuery, getPersonalSpace, LayoutOperation } from '@dxos/app-toolkit';
+import { PluginRegistryButton, useLayout } from '@dxos/app-toolkit/ui';
+import { Operation } from '@dxos/compute';
+import { Annotation, Collection, Database, Obj, Type } from '@dxos/echo';
+import { EffectEx } from '@dxos/effect';
+import { invariant } from '@dxos/invariant';
+import { useClient } from '@dxos/react-client';
+import { useQuery, useSpaces } from '@dxos/react-client/echo';
+import { Dialog, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { ViewAnnotation } from '@dxos/schema';
+
+import { makeCreateObjectEntryForDatabaseType } from '#capabilities';
+import { type CreateObjectOption, CreateObjectPanel, type CreateObjectPanelProps } from '#components';
+import { meta } from '#meta';
+import { SpaceCapabilities } from '#types';
+
+import { getSpaceDisplayName } from '../../util';
+
+export const CREATE_OBJECT_DIALOG = `${meta.id}.CreateObjectDialog`;
+
+export type CreateObjectDialogProps = Pick<CreateObjectPanelProps, 'target' | 'typename' | 'initialFormValues'> & {
+  views?: boolean;
+  onCreateObject?: (object: Obj.Unknown) => void;
+  shouldNavigate?: (object: Obj.Unknown) => boolean;
+  targetNodeId?: string;
+};
+
+export const CreateObjectDialog = ({
+  target: initialTarget,
+  typename: initialTypename,
+  views,
+  initialFormValues,
+  onCreateObject,
+  shouldNavigate: _shouldNavigate,
+  targetNodeId,
+}: CreateObjectDialogProps) => {
+  const { t } = useTranslation(meta.id);
+  const manager = usePluginManager();
+  const operationInvoker = useOperationInvoker();
+  const { invoke } = operationInvoker;
+  const [target, setTarget] = useState<Database.Database | Collection.Collection | undefined>(initialTarget);
+  const [typename, setTypename] = useState<string | undefined>(initialTypename);
+  const client = useClient();
+  const spaces = useSpaces();
+  const layout = useLayout();
+  const closeRef = useRef<HTMLButtonElement | null>(null);
+
+  const db = Database.isDatabase(target) ? target : target && Obj.getDatabase(target);
+  const allTypes = useQuery(db, allTypesQuery);
+  const space = useMemo(() => spaces.find((s) => s.db === db), [spaces, db]);
+  const spaceLabel = useMemo(
+    () =>
+      space &&
+      toLocalizedString(getSpaceDisplayName(space, { personal: space.id === getPersonalSpace(client)?.id }), t),
+    [space, client, t],
+  );
+
+  // Index all types by typename for label/icon lookups.
+  const typeByTypename = useMemo(() => {
+    const map = new Map<string, Type.AnyEntity>();
+    for (const type of allTypes) {
+      map.set(Type.getTypename(type), type);
+    }
+    return map;
+  }, [allTypes]);
+
+  const entriesByModule = useAtomValue(manager.capabilities.atomByModule(SpaceCapabilities.CreateObjectEntry));
+
+  const { capabilityEntries, pluginNameByEntryId } = useMemo(() => {
+    const entries: SpaceCapabilities.CreateObjectEntry[] = [];
+    const pluginByEntryId = new Map<string, string>();
+    const plugins = manager.getPlugins();
+    for (const [moduleId, contributions] of Object.entries(entriesByModule)) {
+      const owningPlugin = plugins.find((plugin) => plugin.modules.some((module) => module.id === moduleId));
+      for (const entry of contributions) {
+        entries.push(entry);
+        if (owningPlugin) {
+          pluginByEntryId.set(entry.id, owningPlugin.meta.name);
+        }
+      }
+    }
+    return { capabilityEntries: entries, pluginNameByEntryId: pluginByEntryId };
+  }, [entriesByModule, manager]);
+
+  // Synthesize entries for database-persisted object schemas that have no registered capability.
+  const createObjectEntries = useMemo(() => {
+    const registeredIds = new Set(capabilityEntries.map((e) => e.id));
+    // allTypesQuery returns meta-schema entities which may be any entity kind at runtime,
+    // but the query's TypeScript type is conservatively AnyType[]; widen to enable kind narrowing below.
+    const dbEntries = (allTypes as Type.AnyEntity[])
+      .filter((type): type is Type.AnyObj => Type.isObject(type) && Type.getDatabase(type) != null)
+      .filter((type) => !registeredIds.has(Type.getTypename(type)))
+      .map((type) => makeCreateObjectEntryForDatabaseType(type));
+    return [...capabilityEntries, ...dbEntries];
+  }, [capabilityEntries, allTypes]);
+
+  const resolve = useCallback<NonNullable<CreateObjectPanelProps['resolve']>>(
+    (id) => createObjectEntries.find((entry) => entry.id === id),
+    [createObjectEntries],
+  );
+
+  // The type selector is shown while no type has been resolved; the registry button is only relevant then.
+  const showTypeSelector = !(typename && resolve(typename));
+
+  const viewTypenames = useMemo(() => {
+    const set = new Set<string>();
+    for (const [name, type] of typeByTypename) {
+      if (ViewAnnotation.has(type)) {
+        set.add(name);
+      }
+    }
+    return set;
+  }, [typeByTypename]);
+
+  const options = useMemo<CreateObjectOption[]>(
+    () =>
+      createObjectEntries
+        .filter((entry) => (views === true ? viewTypenames.has(entry.id) : true))
+        .map((entry) => {
+          const type = typeByTypename.get(entry.id);
+          const schema = type && Type.getSchema(type);
+          const iconAnnotation = schema ? Annotation.IconAnnotation.get(schema).pipe(Option.getOrUndefined) : undefined;
+          const isDatabase = type ? Type.getDatabase(type) != null : false;
+          return {
+            id: entry.id,
+            label:
+              (isDatabase && type ? Type.getLabel(type) : undefined) ??
+              t('typename.label', { ns: entry.id, defaultValue: entry.id }),
+            icon: iconAnnotation?.icon,
+            iconHue: iconAnnotation?.hue,
+            plugin: pluginNameByEntryId.get(entry.id),
+            description: isDatabase ? spaceLabel : undefined,
+          };
+        }),
+    [createObjectEntries, views, viewTypenames, typeByTypename, t, pluginNameByEntryId, spaceLabel],
+  );
+
+  const handleCreateObject = useCallback<NonNullable<CreateObjectPanelProps['onCreateObject']>>(
+    ({ metadata, data = {} }) =>
+      Effect.gen(function* () {
+        if (!target) {
+          // TODO(wittjosiah): UI feedback.
+          return;
+        }
+
+        // NOTE: Must close before navigating or attention won't follow object.
+        closeRef.current?.click();
+
+        const db = Database.isDatabase(target) ? target : target && Obj.getDatabase(target);
+        invariant(db, 'Missing database');
+        const result = yield* metadata.createObject(data, { db, target, targetNodeId });
+        const shouldNavigate = _shouldNavigate ?? (() => true);
+        if (result.subject.length > 0 && shouldNavigate(result.object)) {
+          if (layout.mode === 'multi') {
+            yield* invoke(LayoutOperation.Set, {
+              subject: [...result.subject],
+            });
+            yield* invoke(LayoutOperation.Expose, {
+              subject: result.subject[0],
+            });
+          } else {
+            yield* invoke(LayoutOperation.Open, {
+              subject: [...result.subject],
+              navigation: 'immediate',
+            });
+          }
+        }
+
+        onCreateObject?.(result.object);
+      }).pipe(
+        Effect.provideService(Capability.Service, manager.capabilities),
+        Effect.provideService(Operation.Service, operationInvoker),
+        EffectEx.runAndForwardErrors,
+      ),
+    [target, _shouldNavigate, onCreateObject, manager.capabilities, invoke, layout.mode],
+  );
+
+  return (
+    <Dialog.Content>
+      <Dialog.Header>
+        <Dialog.Title>
+          {t('create-object-dialog.title', {
+            object: t('typename.label', { ns: typename, defaultValue: views ? 'View' : 'Object' }),
+          })}
+        </Dialog.Title>
+        <Dialog.Close asChild>
+          <Dialog.ActionIconButton action='close' ref={closeRef} />
+        </Dialog.Close>
+      </Dialog.Header>
+      <Dialog.Body>
+        <CreateObjectPanel
+          options={options}
+          spaces={spaces}
+          target={target}
+          typename={typename}
+          initialFormValues={initialFormValues}
+          defaultSpaceId={getPersonalSpace(client)?.id ?? client.spaces.get()[0]?.id}
+          resolve={resolve}
+          onCreateObject={handleCreateObject}
+          onTargetChange={setTarget}
+          onTypenameChange={setTypename}
+        />
+      </Dialog.Body>
+      {showTypeSelector && (
+        <Dialog.ActionBar>
+          <Dialog.Close asChild>
+            <PluginRegistryButton />
+          </Dialog.Close>
+        </Dialog.ActionBar>
+      )}
+    </Dialog.Content>
+  );
+};

package/src/containers/CreateObjectDialog/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export { CreateObjectDialog, type CreateObjectDialogProps } from './CreateObjectDialog';
+export { CreateObjectDialog as default } from './CreateObjectDialog';

package/src/containers/CreateSpaceDialog/CreateSpaceDialog.stories.tsx

@@ -0,0 +1,46 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { ProcessManagerPlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { ClientPlugin } from '@dxos/plugin-client/testing';
+import { Dialog } from '@dxos/react-ui';
+import { withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '#translations';
+
+import { CreateSpaceDialog } from './CreateSpaceDialog';
+
+const DefaultStory = () => (
+  <Dialog.Root defaultOpen>
+    <Dialog.Overlay>
+      <CreateSpaceDialog />
+    </Dialog.Overlay>
+  </Dialog.Root>
+);
+
+const meta = {
+  title: 'plugins/plugin-space/containers/CreateSpaceDialog',
+  component: CreateSpaceDialog,
+  render: DefaultStory,
+  decorators: [
+    withTheme(),
+    withPluginManager({
+      plugins: [ProcessManagerPlugin(), ClientPlugin({})],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof CreateSpaceDialog>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/containers/CreateSpaceDialog/CreateSpaceDialog.tsx

@@ -0,0 +1,81 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import type * as Schema from 'effect/Schema';
+import React, { useCallback, useRef } from 'react';
+
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation, getSpaceHomePath, getSpacePath } from '@dxos/app-toolkit';
+import { EffectEx } from '@dxos/effect';
+import { Column, Dialog, useTranslation } from '@dxos/react-ui';
+import { Form } from '@dxos/react-ui-form';
+
+import { useInputSurfaceLookup } from '#hooks';
+import { meta } from '#meta';
+import { SpaceOperation } from '#operations';
+import { SpaceForm } from '#types';
+
+export const CREATE_SPACE_DIALOG = `${meta.id}.CreateSpaceDialog`;
+
+type FormValues = Schema.Schema.Type<typeof SpaceForm>;
+const initialValues: FormValues = { edgeReplication: true };
+
+export const CreateSpaceDialog = () => {
+  const closeRef = useRef<HTMLButtonElement | null>(null);
+  const { t } = useTranslation(meta.id);
+  const { invokePromise } = useOperationInvoker();
+
+  const inputSurfaceLookup = useInputSurfaceLookup();
+
+  const handleCreateSpace = useCallback(
+    async (data: FormValues) => {
+      const program = Effect.gen(function* () {
+        const { data: result } = yield* Effect.promise(() => invokePromise(SpaceOperation.Create, data));
+        if (result?.space) {
+          yield* Effect.promise(() =>
+            invokePromise(LayoutOperation.Open, {
+              subject: [getSpaceHomePath(result.space.id)],
+              workspace: getSpacePath(result.space.id),
+              navigation: 'immediate',
+            }),
+          );
+          yield* Effect.promise(() => invokePromise(LayoutOperation.UpdateDialog, { state: false }));
+        }
+      });
+      await EffectEx.runAndForwardErrors(program);
+    },
+    [invokePromise],
+  );
+
+  return (
+    <Dialog.Content>
+      <Dialog.Header>
+        <Dialog.Title>{t('create-space-dialog.title')}</Dialog.Title>
+        <Dialog.Close asChild>
+          <Dialog.ActionIconButton action='close' ref={closeRef} />
+        </Dialog.Close>
+      </Dialog.Header>
+      <Dialog.Body>
+        <Form.Root
+          testId='create-space-form'
+          autoFocus
+          schema={SpaceForm}
+          defaultValues={initialValues}
+          fieldProvider={inputSurfaceLookup}
+          onSave={handleCreateSpace}
+        >
+          {/* Dialog.Body owns the gutter Column; place the form in its center column via Column.Center
+              (not Form.Viewport's own Column.Root, which double-insets) so it aligns with the title. */}
+          <Column.Center>
+            <Form.Content>
+              <Form.FieldSet />
+              <Form.Submit />
+            </Form.Content>
+          </Column.Center>
+        </Form.Root>
+      </Dialog.Body>
+    </Dialog.Content>
+  );
+};

package/src/containers/CreateSpaceDialog/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export { CreateSpaceDialog as default } from './CreateSpaceDialog';

package/src/containers/EntityRenamePopover/EntityRenamePopover.tsx

@@ -0,0 +1,52 @@
+//
+// 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 { Entity } from '@dxos/echo';
+import { log } from '@dxos/log';
+import { Button, Input, useTranslation } from '@dxos/react-ui';
+import { osTranslations } from '@dxos/ui-theme';
+
+import { meta } from '#meta';
+
+export const ENTITY_RENAME_POPOVER = `${meta.id}.EntityRenamePopover`;
+
+export const EntityRenamePopover = ({ entity }: { entity: Entity.Unknown }) => {
+  const { t } = useTranslation(meta.id);
+  const doneButton = useRef<HTMLButtonElement>(null);
+  const [name, setName] = useState(Entity.getLabel(entity));
+  const { invokePromise } = useOperationInvoker();
+
+  const handleDone = useCallback(() => {
+    try {
+      name && Entity.update(entity, () => Entity.setLabel(entity, name));
+    } catch (err) {
+      log.error('Failed to rename entity', { err });
+    }
+    void invokePromise(LayoutOperation.UpdatePopover, { anchorId: '', state: false });
+  }, [entity, name, invokePromise]);
+
+  return (
+    <div className='p-2 flex gap-2'>
+      <div className='flex-1'>
+        <Input.Root>
+          <Input.Label srOnly>{t('object-name.label')}</Input.Label>
+          <Input.TextInput
+            placeholder={t('object.placeholder')}
+            value={name}
+            data-testid='spacePlugin.renameObject.input'
+            onChange={({ target: { value } }) => setName(value)}
+            onKeyDown={({ key }) => key === 'Enter' && doneButton.current?.click()}
+          />
+        </Input.Root>
+      </div>
+      <Button ref={doneButton} classNames='self-stretch' onClick={handleDone}>
+        {t('done.label', { ns: osTranslations })}
+      </Button>
+    </div>
+  );
+};

package/src/containers/EntityRenamePopover/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export { EntityRenamePopover as default } from './EntityRenamePopover';

package/src/containers/ImportSpaceDialog/ImportSpaceDialog.tsx

@@ -0,0 +1,62 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+import { FileUploader } from 'react-drag-drop-files';
+
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation, getSpacePath } from '@dxos/app-toolkit';
+import { Button, Dialog, Icon, useTranslation } from '@dxos/react-ui';
+
+import { meta } from '#meta';
+import { SpaceOperation } from '#operations';
+
+export const ImportSpaceDialog = () => {
+  const { t } = useTranslation(meta.id);
+  const { invokePromise } = useOperationInvoker();
+
+  const handleFile = useCallback(
+    async (file: File) => {
+      const contents = new Uint8Array(await file.arrayBuffer());
+      const { data: result } = await invokePromise(SpaceOperation.ImportSpace, {
+        archive: { filename: file.name, contents },
+      });
+      await invokePromise(LayoutOperation.UpdateDialog, { state: false });
+      if (result?.space) {
+        await invokePromise(LayoutOperation.SwitchWorkspace, { subject: getSpacePath(result.space.id) });
+      }
+    },
+    [invokePromise],
+  );
+
+  return (
+    <Dialog.Content>
+      <Dialog.Header>
+        <Dialog.Title>{t('import-space-dialog.title')}</Dialog.Title>
+        <Dialog.Close asChild>
+          <Dialog.ActionIconButton action='close' />
+        </Dialog.Close>
+      </Dialog.Header>
+      <Dialog.Body>
+        <p className='my-4'>{t('import-space-dialog.description')}</p>
+        <FileUploader
+          types={['json', 'tar']}
+          classes='block my-4 p-8 border-2 border-dashed border-neutral-500/50 rounded-sm flex items-center justify-center gap-2 cursor-pointer'
+          dropMessageStyle={{ border: 'none', backgroundColor: '#EEE' }}
+          handleChange={(file: File) => {
+            void handleFile(file);
+          }}
+        >
+          <Icon icon='ph--file-plus--duotone' size={8} />
+          <span>{t('import-space-dialog.upload.label')}</span>
+        </FileUploader>
+      </Dialog.Body>
+      <Dialog.ActionBar>
+        <Dialog.Close asChild>
+          <Button variant='primary'>{t('cancel.label')}</Button>
+        </Dialog.Close>
+      </Dialog.ActionBar>
+    </Dialog.Content>
+  );
+};

package/src/containers/ImportSpaceDialog/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export { ImportSpaceDialog as default } from './ImportSpaceDialog';

package/src/containers/InlineSyncStatus/InlineSyncStatus.tsx

@@ -0,0 +1,51 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useEffect, useState } from 'react';
+
+import { getSpacePath } from '@dxos/app-toolkit';
+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, useAttention } from '@dxos/react-ui-attention';
+
+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 qualifiedId = getSpacePath(space.id);
+  const { hasAttention, isAncestor, isRelated } = useAttention(qualifiedId);
+  const attended = hasAttention || isRelated;
+  const containsAttended = isAncestor && !open;
+  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={attended}
+        containsAttended={containsAttended}
+        classNames='self-center mx-1'
+      />
+    </Tooltip.Trigger>
+  );
+};

package/src/containers/InlineSyncStatus/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export { InlineSyncStatus as default } from './InlineSyncStatus';