@dxos/plugin-space 0.7.2 → 0.7.3-staging.0905f03

package/src/components/CreateDialog/CreateObjectDialog.stories.tsx

@@ -0,0 +1,83 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta, type StoryObj } from '@storybook/react';
+import React, { useEffect } from 'react';
+
+import { create, Filter, useQuery, useSpace } from '@dxos/react-client/echo';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { Dialog } from '@dxos/react-ui';
+import { osTranslations } from '@dxos/shell/react';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { CreateObjectDialog, type CreateObjectDialogProps } from './CreateObjectDialog';
+import translations from '../../translations';
+import { CollectionType } from '../../types';
+
+const Story = (args: CreateObjectDialogProps) => {
+  return (
+    <Dialog.Root open>
+      <Dialog.Overlay blockAlign='start'>
+        <CreateObjectDialog {...args} />
+      </Dialog.Overlay>
+    </Dialog.Root>
+  );
+};
+
+// TODO(wittjosiah): Story should be for CreateObjectPanel.
+const meta: Meta<typeof CreateObjectDialog> = {
+  title: 'plugins/plugin-space/CreateObjectDialog',
+  component: CreateObjectDialog,
+  render: Story,
+  decorators: [
+    withClientProvider({ createIdentity: true, createSpace: true, types: [CollectionType] }),
+    withTheme,
+    withLayout({ tooltips: true }),
+  ],
+  parameters: { translations: [...translations, osTranslations] },
+  args: {
+    schemas: [CollectionType],
+  },
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof CreateObjectDialog> = {};
+
+export const Typename: StoryObj<typeof CreateObjectDialog> = {
+  args: { typename: CollectionType.typename },
+};
+
+export const TargetSpace: StoryObj<typeof CreateObjectDialog> = {
+  render: (args) => {
+    const space = useSpace();
+
+    if (!space) {
+      return <></>;
+    }
+
+    return <Story {...args} target={space} />;
+  },
+};
+
+export const TargetCollection: StoryObj<typeof CreateObjectDialog> = {
+  render: (args) => {
+    const space = useSpace();
+    const [collection] = useQuery(space, Filter.schema(CollectionType));
+
+    useEffect(() => {
+      if (space) {
+        space.db.add(create(CollectionType, { name: 'My Collection', objects: [], views: {} }));
+      }
+    }, [space]);
+
+    if (!collection) {
+      return <></>;
+    }
+
+    return <Story {...args} target={collection} />;
+  },
+};

package/src/components/CreateDialog/CreateObjectDialog.tsx

@@ -0,0 +1,98 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback, useRef } from 'react';
+
+import { type MetadataResolver, NavigationAction, useIntentDispatcher } from '@dxos/app-framework';
+import { useClient } from '@dxos/react-client';
+import { type AbstractTypedObject, getSpace, isReactiveObject, isSpace, useSpaces } from '@dxos/react-client/echo';
+import { Button, Dialog, Icon, useTranslation } from '@dxos/react-ui';
+
+import { CreateObjectPanel, type CreateObjectPanelProps } from './CreateObjectPanel';
+import { SPACE_PLUGIN, SpaceAction } from '../../meta';
+import { CollectionType } from '../../types';
+
+export type CreateObjectDialogProps = Pick<CreateObjectPanelProps, 'schemas' | 'target' | 'typename' | 'name'> & {
+  resolve?: MetadataResolver;
+  navigableCollections?: boolean;
+};
+
+export const CreateObjectDialog = ({
+  schemas,
+  target,
+  typename,
+  name,
+  navigableCollections,
+  resolve,
+}: CreateObjectDialogProps) => {
+  const closeRef = useRef<HTMLButtonElement | null>(null);
+  const { t } = useTranslation(SPACE_PLUGIN);
+  const client = useClient();
+  const spaces = useSpaces();
+  const dispatch = useIntentDispatcher();
+
+  const handleCreateObject = useCallback(
+    async ({
+      schema,
+      target: _target,
+      name,
+    }: {
+      schema: AbstractTypedObject;
+      target: CreateObjectPanelProps['target'];
+      name?: string;
+    }) => {
+      const target = isSpace(_target) ? (_target.properties[CollectionType.typename] as CollectionType) : _target;
+      const createObjectAction = resolve?.(schema.typename)?.createObject;
+      if (!createObjectAction || !target) {
+        // TODO(wittjosiah): UI feedback.
+        return;
+      }
+
+      // NOTE: Must close before navigating or attention won't follow object.
+      closeRef.current?.click();
+
+      const space = isSpace(target) ? target : getSpace(target);
+      const result = await dispatch({ action: createObjectAction, data: { name, space } });
+      const object = result?.data;
+      if (isReactiveObject(object)) {
+        await dispatch([
+          {
+            plugin: SPACE_PLUGIN,
+            action: SpaceAction.ADD_OBJECT,
+            data: { target, object },
+          },
+          ...(!(object instanceof CollectionType) || navigableCollections ? [{ action: NavigationAction.OPEN }] : []),
+        ]);
+      }
+    },
+    [dispatch, resolve],
+  );
+
+  return (
+    // TODO(wittjosiah): The tablist dialog pattern is copied from @dxos/plugin-manager.
+    //  Consider factoring it out to the tabs package.
+    <Dialog.Content classNames='p-0 bs-content min-bs-[15rem] max-bs-full md:max-is-[40rem] overflow-hidden'>
+      <div role='none' className='flex justify-between pbs-3 pis-2 pie-3 @md:pbs-4 @md:pis-4 @md:pie-5'>
+        <Dialog.Title>{t('create object dialog title')}</Dialog.Title>
+        <Dialog.Close asChild>
+          <Button ref={closeRef} density='fine' variant='ghost' autoFocus>
+            <Icon icon='ph--x--regular' size={4} />
+          </Button>
+        </Dialog.Close>
+      </div>
+      <div className='p-4'>
+        <CreateObjectPanel
+          schemas={schemas}
+          spaces={spaces}
+          target={target}
+          typename={typename}
+          name={name}
+          defaultSpaceId={client.spaces.default.id}
+          resolve={resolve}
+          onCreateObject={handleCreateObject}
+        />
+      </div>
+    </Dialog.Content>
+  );
+};

package/src/components/CreateDialog/CreateObjectPanel.tsx

@@ -0,0 +1,169 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback, useState } from 'react';
+
+import { type MetadataResolver } from '@dxos/app-framework';
+import { type AbstractTypedObject, getObjectAnnotation, S } from '@dxos/echo-schema';
+import { type SpaceId, type Space, isSpace } from '@dxos/react-client/echo';
+import { Icon, IconButton, Input, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Form, InputHeader } from '@dxos/react-ui-form';
+import { SearchList } from '@dxos/react-ui-searchlist';
+import { nonNullable, type MaybePromise } from '@dxos/util';
+
+import { SPACE_PLUGIN } from '../../meta';
+import { type CollectionType } from '../../types';
+import { getSpaceDisplayName } from '../../util';
+
+export type CreateObjectPanelProps = {
+  schemas: AbstractTypedObject[];
+  spaces: Space[];
+  typename?: string;
+  target?: Space | CollectionType;
+  name?: string;
+  defaultSpaceId?: SpaceId;
+  resolve?: MetadataResolver;
+  onCreateObject?: (params: {
+    schema: AbstractTypedObject;
+    target: Space | CollectionType;
+    name?: string;
+  }) => MaybePromise<void>;
+};
+
+export const CreateObjectPanel = ({
+  schemas,
+  spaces,
+  typename: initialTypename,
+  target: initialTarget,
+  name: initialName,
+  defaultSpaceId,
+  resolve,
+  onCreateObject,
+}: CreateObjectPanelProps) => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+  const [typename, setTypename] = useState<string | undefined>(initialTypename);
+  const [target, setTarget] = useState<Space | CollectionType | undefined>(initialTarget);
+  const schema = schemas.find((schema) => getObjectAnnotation(schema)?.typename === typename);
+  const options = schemas.map(getObjectAnnotation).filter(nonNullable);
+
+  const handleClearSchema = useCallback(() => setTypename(undefined), []);
+  const handleClearTarget = useCallback(() => setTarget(undefined), []);
+
+  const handleCreateObject = useCallback(
+    async ({ name }: { name?: string }) => {
+      if (!schema || !target) {
+        return;
+      }
+
+      await onCreateObject?.({ schema, target, name });
+    },
+    [onCreateObject, schema, target],
+  );
+
+  // TODO(wittjosiah): All of these inputs should be rolled into a `Form` once it supports the necessary variants.
+  const schemaInput = (
+    <SearchList.Root label={t('schema input label')} classNames='flex flex-col grow overflow-hidden my-2 px-2'>
+      <SearchList.Input
+        autoFocus
+        data-testid='create-object-form.schema-input'
+        placeholder={t('schema input placeholder')}
+        classNames='px-1 my-2'
+      />
+      <SearchList.Content classNames='max-bs-[24rem] overflow-auto'>
+        {options.map((option) => (
+          <SearchList.Item
+            key={option.typename}
+            value={t('typename label', { ns: option.typename, defaultValue: option.typename })}
+            onSelect={() => setTypename(option.typename)}
+            classNames='flex items-center gap-2'
+          >
+            <span className='flex gap-2 items-center grow truncate'>
+              <Icon icon={resolve?.(option.typename).icon ?? 'ph--placeholder--regular'} size={5} />
+              {t('typename label', { ns: option.typename, defaultValue: option.typename })}
+            </span>
+          </SearchList.Item>
+        ))}
+      </SearchList.Content>
+    </SearchList.Root>
+  );
+
+  const spaceInput = (
+    <SearchList.Root label={t('space input label')} classNames='flex flex-col grow overflow-hidden my-2 px-2'>
+      <SearchList.Input
+        autoFocus
+        data-testid='create-object-form.space-input'
+        placeholder={t('space input placeholder')}
+        classNames='px-1 my-2'
+      />
+      <SearchList.Content classNames='max-bs-[24rem] overflow-auto'>
+        {spaces.map((space) => (
+          <SearchList.Item
+            key={space.id}
+            value={toLocalizedString(getSpaceDisplayName(space, { personal: space.id === defaultSpaceId }), t)}
+            onSelect={() => setTarget(space)}
+            classNames='flex items-center gap-2'
+          >
+            <span className='grow truncate'>
+              {toLocalizedString(getSpaceDisplayName(space, { personal: space.id === defaultSpaceId }), t)}
+            </span>
+          </SearchList.Item>
+        ))}
+      </SearchList.Content>
+    </SearchList.Root>
+  );
+
+  const form = (
+    <Form
+      autoFocus
+      values={{ name: initialName }}
+      schema={S.Struct({ name: S.optional(S.String) })}
+      testId='create-object-form'
+      onSave={handleCreateObject}
+    />
+  );
+
+  return (
+    <div role='form' className='flex flex-col gap-2'>
+      {target && (
+        <div role='none' className='px-2'>
+          <Input.Root>
+            <InputHeader>
+              <Input.Label>
+                {t(isSpace(target) ? 'creating in space label' : 'creating in collection label')}
+              </Input.Label>
+            </InputHeader>
+            <div role='none' className='flex gap-2'>
+              <Input.TextInput
+                disabled
+                value={
+                  isSpace(target)
+                    ? toLocalizedString(getSpaceDisplayName(target, { personal: target.id === defaultSpaceId }), t)
+                    : target.name || t('unnamed collection label')
+                }
+              />
+              <IconButton iconOnly icon='ph--x--regular' label={t('clear input label')} onClick={handleClearTarget} />
+            </div>
+          </Input.Root>
+        </div>
+      )}
+      {schema && (
+        <div role='none' className='px-2'>
+          <Input.Root>
+            <InputHeader>
+              <Input.Label>{t('creating object type label')}</Input.Label>
+            </InputHeader>
+            <div role='none' className='flex gap-2'>
+              <Input.TextInput
+                disabled
+                value={t('typename label', { ns: schema.typename, defaultValue: schema.typename })}
+              />
+              <IconButton iconOnly icon='ph--x--regular' label={t('clear input label')} onClick={handleClearSchema} />
+            </div>
+          </Input.Root>
+        </div>
+      )}
+      {!schema ? schemaInput : !target ? spaceInput : form}
+    </div>
+  );
+};

package/src/components/CreateDialog/CreateSpaceDialog.tsx

@@ -0,0 +1,57 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback, useRef } from 'react';
+
+import { useIntentDispatcher } from '@dxos/app-framework';
+import { type S } from '@dxos/echo-schema';
+import { Button, Dialog, Icon, useTranslation } from '@dxos/react-ui';
+import { Form } from '@dxos/react-ui-form';
+
+import { SPACE_PLUGIN, SpaceAction } from '../../meta';
+import { SpaceForm } from '../../types';
+
+type FormValues = S.Schema.Type<typeof SpaceForm>;
+const initialValues: FormValues = { edgeReplication: true };
+
+export const CreateSpaceDialog = () => {
+  const closeRef = useRef<HTMLButtonElement | null>(null);
+  const { t } = useTranslation(SPACE_PLUGIN);
+  const dispatch = useIntentDispatcher();
+
+  const handleCreateSpace = useCallback(
+    async (data: FormValues) => {
+      const result = await dispatch({
+        action: SpaceAction.CREATE,
+        data,
+      });
+      const target = result?.data.space;
+      if (target) {
+        await dispatch({
+          action: SpaceAction.OPEN_CREATE_OBJECT,
+          data: { target },
+        });
+      }
+    },
+    [dispatch],
+  );
+
+  return (
+    // TODO(wittjosiah): The tablist dialog pattern is copied from @dxos/plugin-manager.
+    //  Consider factoring it out to the tabs package.
+    <Dialog.Content classNames='p-0 bs-content min-bs-[15rem] max-bs-full md:max-is-[40rem] overflow-hidden'>
+      <div role='none' className='flex justify-between pbs-3 pis-2 pie-3 @md:pbs-4 @md:pis-4 @md:pie-5'>
+        <Dialog.Title>{t('create space dialog title')}</Dialog.Title>
+        <Dialog.Close asChild>
+          <Button ref={closeRef} density='fine' variant='ghost' autoFocus>
+            <Icon icon='ph--x--regular' size={4} />
+          </Button>
+        </Dialog.Close>
+      </div>
+      <div className='p-4'>
+        <Form testId='create-space-form' values={initialValues} schema={SpaceForm} onSave={handleCreateSpace} />
+      </div>
+    </Dialog.Content>
+  );
+};

package/src/components/CreateDialog/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './CreateObjectDialog';
+export * from './CreateSpaceDialog';

package/src/components/PopoverRenameObject.tsx

@@ -4,7 +4,7 @@
 
 import React, { useCallback, useRef, useState } from 'react';
 
-import { type ReactiveObject } from '@dxos/echo-schema';
+import { type ReactiveObject } from '@dxos/live-object';
 import { log } from '@dxos/log';
 import { Button, Input, Popover, useTranslation } from '@dxos/react-ui';
 

package/src/components/SpacePluginSettings.tsx

@@ -4,17 +4,16 @@
 
 import React from 'react';
 
-import { useIntentDispatcher, useResolvePlugins } from '@dxos/app-framework';
-import { Input, Select, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { useIntentDispatcher } from '@dxos/app-framework';
+import { Input, useTranslation } from '@dxos/react-ui';
 import { DeprecatedFormInput } from '@dxos/react-ui-form';
 
 import { SpaceAction, SPACE_PLUGIN } from '../meta';
-import { parseSpaceInitPlugin, type SpaceSettingsProps } from '../types';
+import { type SpaceSettingsProps } from '../types';
 
 export const SpacePluginSettings = ({ settings }: { settings: SpaceSettingsProps }) => {
   const { t } = useTranslation(SPACE_PLUGIN);
   const dispatch = useIntentDispatcher();
-  const plugins = useResolvePlugins(parseSpaceInitPlugin);
 
   return (
     <>
@@ -30,34 +29,6 @@ export const SpacePluginSettings = ({ settings }: { settings: SpaceSettingsProps
           }
         />
       </DeprecatedFormInput>
-
-      <DeprecatedFormInput label={t('default on space create label')}>
-        <Select.Root
-          value={settings.onSpaceCreate}
-          onValueChange={(value) => {
-            settings.onSpaceCreate = value;
-          }}
-        >
-          <Select.TriggerButton />
-          <Select.Portal>
-            <Select.Content>
-              <Select.Viewport>
-                {plugins.map(
-                  ({
-                    provides: {
-                      space: { onSpaceCreate },
-                    },
-                  }) => (
-                    <Select.Option key={onSpaceCreate.action} value={onSpaceCreate.action}>
-                      {toLocalizedString(onSpaceCreate.label, t)}
-                    </Select.Option>
-                  ),
-                )}
-              </Select.Viewport>
-            </Select.Content>
-          </Select.Portal>
-        </Select.Root>
-      </DeprecatedFormInput>
     </>
   );
 };

package/src/components/SpaceSettings/SpaceSettingsDialog.tsx

@@ -5,9 +5,9 @@
 import React, { useState } from 'react';
 
 import { useClient } from '@dxos/react-client';
-import { Button, Dialog, Icon, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Button, Clipboard, Dialog, Icon, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { Tabs, type TabsRootProps, type TabsActivePart } from '@dxos/react-ui-tabs';
-import { ClipboardProvider, SpacePanel, type SpacePanelProps } from '@dxos/shell/react';
+import { SpacePanel, type SpacePanelProps } from '@dxos/shell/react';
 
 import { SpaceSettingsPanel, type SpaceSettingsPanelProps } from './SpaceSettingsPanel';
 import { SPACE_PLUGIN } from '../../meta';
@@ -62,7 +62,7 @@ export const SpaceSettingsDialog = ({
         </Dialog.Title>
         <Dialog.Close asChild>
           <Button density='fine' variant='ghost' autoFocus>
-            <Icon icon='ph--x--regular' size={3} />
+            <Icon icon='ph--x--regular' size={4} />
           </Button>
         </Dialog.Close>
       </div>
@@ -92,9 +92,9 @@ export const SpaceSettingsDialog = ({
 
           {/* TODO(wittjosiah): Weird focus ring when tabpanel is focused. */}
           <Tabs.Tabpanel value='members' classNames='pli-3 @md:pli-5 max-bs-dvh overflow-y-auto'>
-            <ClipboardProvider>
+            <Clipboard.Provider>
               <SpacePanel space={space} hideHeading target={target} createInvitationUrl={createInvitationUrl} />
-            </ClipboardProvider>
+            </Clipboard.Provider>
           </Tabs.Tabpanel>
         </Tabs.Viewport>
       </Tabs.Root>

package/src/components/SpaceSettings/SpaceSettingsPanel.tsx

@@ -8,7 +8,6 @@ import { log } from '@dxos/log';
 import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
 import { useClient } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
-import { DeviceType, useDevices } from '@dxos/react-client/halo';
 import { Input, useTranslation } from '@dxos/react-ui';
 import { DeprecatedFormInput } from '@dxos/react-ui-form';
 
@@ -22,10 +21,7 @@ export const SpaceSettingsPanel = ({ space }: SpaceSettingsPanelProps) => {
   const { t } = useTranslation(SPACE_PLUGIN);
 
   const client = useClient();
-  const devices = useDevices();
-  const managedDeviceAvailable = devices.find((device) => device.profile?.type === DeviceType.AGENT_MANAGED);
-  const edgeAgents = Boolean(client.config.values.runtime?.client?.edgeFeatures?.agents);
-  const edgeReplicationAvailable = edgeAgents && managedDeviceAvailable;
+  const edgeEnabled = Boolean(client.config.values.runtime?.client?.edgeFeatures?.echoReplicator);
 
   const [edgeReplication, setEdgeReplication] = useState(
     space.internal.data.edgeReplication === EdgeReplicationSetting.ENABLED,
@@ -54,7 +50,7 @@ export const SpaceSettingsPanel = ({ space }: SpaceSettingsPanelProps) => {
           }}
         />
       </DeprecatedFormInput>
-      {edgeReplicationAvailable && (
+      {edgeEnabled && (
         <DeprecatedFormInput label={t('edge replication label')}>
           <Input.Switch checked={edgeReplication} onCheckedChange={toggleEdgeReplication} />
         </DeprecatedFormInput>

package/src/components/SyncStatus/InlineSyncStatus.stories.tsx

@@ -0,0 +1,57 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta } from '@storybook/react';
+import React, { useEffect, useState } from 'react';
+
+import { withTheme, withLayout } from '@dxos/storybook-utils';
+import { range } from '@dxos/util';
+
+import { InlineSyncStatusIndicator } from './InlineSyncStatus';
+import translations from '../../translations';
+
+const DefaultStory = () => {
+  const [spaces, setSpaces] = useState(
+    new Map<string, boolean>(range(8).map((i) => [`space-${i + 1}`, Math.random() > 0.5])),
+  );
+
+  useEffect(() => {
+    const t = setInterval(
+      () => {
+        setSpaces((spaces) => {
+          const space = Array.from(spaces.keys())[Math.floor(Math.random() * spaces.size)];
+          spaces.set(space, !spaces.get(space));
+          return new Map(spaces);
+        });
+      },
+      2_000 + Math.random() * 3_000,
+    );
+    return () => clearInterval(t);
+  });
+
+  return (
+    <div className='flex flex-col p-2 w-[200px]'>
+      {Array.from(spaces.entries()).map(([space, sync]) => (
+        <div key={space} className='flex items-center'>
+          <div className='grow'>{space}</div>
+          {sync && <InlineSyncStatusIndicator />}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const meta: Meta = {
+  title: 'plugins/plugin-space/InlineSyncStatusIndicator',
+  component: InlineSyncStatusIndicator,
+  render: DefaultStory,
+  decorators: [withTheme, withLayout({ fullscreen: true })],
+  parameters: { translations },
+};
+
+export default meta;
+
+export const Default = {};

package/src/components/SyncStatus/InlineSyncStatus.tsx

@@ -0,0 +1,61 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { type CSSProperties, useEffect, useMemo, useState } from 'react';
+
+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 } from '@dxos/react-client/echo';
+import { Icon, useTranslation } from '@dxos/react-ui';
+
+import { useSpaceSyncState } from './sync-state';
+import { SPACE_PLUGIN } from '../../meta';
+
+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);
+    });
+  }, [client]);
+
+  return status;
+};
+
+export const InlineSyncStatus = ({ space }: { space: Space }) => {
+  const connectedToEdge = useEdgeStatus() === QueryEdgeStatusResponse.EdgeStatus.CONNECTED;
+  // TODO(wittjosiah): This is not reactive.
+  const edgeSyncEnabled = space.internal.data.edgeReplication === EdgeReplicationSetting.ENABLED;
+  const syncState = useSpaceSyncState(space);
+  if (!connectedToEdge || !edgeSyncEnabled || !syncState || syncState.missingOnLocal === 0) {
+    return null;
+  }
+
+  return <InlineSyncStatusIndicator />;
+};
+
+export const InlineSyncStatusIndicator = () => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+  const animationProps = useMemo<CSSProperties>(
+    () => ({
+      // Synchronize animations.
+      animationDelay: `-${Date.now() % 2_000}ms`,
+    }),
+    [],
+  );
+
+  return (
+    <div role='status' aria-label={t('syncing message')} className='flex items-center'>
+      <Icon
+        icon='ph--circle-notch--regular'
+        size={3}
+        style={animationProps}
+        classNames='text-subdued animate-[spin_2s_linear_infinite]'
+      />
+    </div>
+  );
+};