@dxos/plugin-space 0.8.4-main.7ace549 → 0.8.4-main.8360d9e660

package/src/components/{ObjectSettings → ObjectDetails}/ForeignKeys.tsx

@@ -38,7 +38,7 @@ const KeyItem = ({ forignKey, onDelete }: KeyItemProps) => {
   }, [forignKey, onDelete]);
 
   return (
-    <ListItem.Root classNames='pli-2'>
+    <ListItem.Root classNames='px-2'>
       <ListItem.Heading classNames='flex flex-col grow truncate'>
         <div>{forignKey.source}</div>
         <div className='text-description text-sm truncate'>{forignKey.id}</div>

package/src/components/ObjectDetails/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './BaseObjectSettings';
+export * from './ForeignKeys';

package/src/components/ObjectForm/ObjectForm.tsx

@@ -0,0 +1,99 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+import React, { useCallback, useMemo } from 'react';
+
+import { DXN, Obj, Ref, Tag, Type } from '@dxos/echo';
+import { type JsonPath, splitJsonPath } from '@dxos/echo/internal';
+import { invariant } from '@dxos/invariant';
+import { Form, omitId } from '@dxos/react-ui-form';
+import { isNonNullable } from '@dxos/util';
+
+import { meta as pluginMeta } from '../../meta';
+
+export type ObjectFormProps = {
+  schema: Schema.Schema.AnyNoContext;
+  object: Obj.Unknown;
+};
+
+export const ObjectForm = ({ object, schema }: ObjectFormProps) => {
+  const db = Obj.getDatabase(object);
+
+  const formSchema = useMemo(
+    () =>
+      omitId(
+        Schema.Struct({
+          tags: Schema.Array(Ref.Ref(Tag.Tag)).pipe(Schema.optional),
+        }).pipe(Schema.extend(schema)),
+      ),
+    [schema],
+  );
+
+  const meta = Obj.getMeta(object);
+  const tags = (meta.tags ?? []).map((tag) => db?.makeRef(DXN.parse(tag))).filter(isNonNullable);
+  const values = useMemo(() => ({ tags, ...object }), [object, tags]);
+
+  const handleCreate = useCallback((schema: Type.AnyEntity, values: any) => {
+    invariant(db);
+    invariant(Type.isObjectSchema(schema));
+    const newObject = db.add(Obj.make(schema, values));
+    if (Obj.instanceOf(Tag.Tag, newObject)) {
+      Obj.change(object, (obj) => {
+        Obj.getMeta(obj).tags = [...(Obj.getMeta(obj).tags ?? []), Obj.getDXN(newObject).toString()];
+      });
+    }
+  }, []);
+
+  // TODO(wittjosiah): Use FormRootProps type.
+  const handleChange = useCallback(
+    ({ tags, ...values }: any, { isValid, changed }: { isValid: boolean; changed: Record<JsonPath, boolean> }) => {
+      if (!isValid) {
+        return;
+      }
+
+      const changedPaths = Object.keys(changed).filter((path) => changed[path as JsonPath]) as JsonPath[];
+
+      // Handle tags separately using Obj.change.
+      const hasTagsChange = changedPaths.some((path) => splitJsonPath(path)[0] === 'tags');
+      if (hasTagsChange) {
+        Obj.change(object, (obj) => {
+          Obj.getMeta(obj).tags = tags?.map((tag: Ref.Ref<Tag.Tag>) => tag.dxn.toString()) ?? [];
+        });
+      }
+
+      // Handle other property changes.
+      const nonTagPaths = changedPaths.filter((path) => splitJsonPath(path)[0] !== 'tags');
+      if (nonTagPaths.length > 0) {
+        Obj.change(object, () => {
+          for (const path of nonTagPaths) {
+            const parts = splitJsonPath(path);
+            const value = Obj.getValue(values, parts);
+            Obj.setValue(object, parts, value);
+          }
+        });
+      }
+    },
+    [object],
+  );
+
+  return (
+    <Form.Root
+      schema={formSchema}
+      defaultValues={values}
+      createOptionIcon='ph--plus--regular'
+      createOptionLabel={['add tag label', { ns: pluginMeta.id }]}
+      createInitialValuePath='label'
+      db={db}
+      onValuesChanged={handleChange}
+      onCreate={handleCreate}
+    >
+      <Form.Viewport>
+        <Form.Content>
+          <Form.FieldSet />
+        </Form.Content>
+      </Form.Viewport>
+    </Form.Root>
+  );
+};

package/src/components/ObjectForm/index.ts

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

package/src/components/SyncStatus/index.ts

@@ -2,5 +2,5 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './InlineSyncStatus';
-export * from './SyncStatus';
+export * from './save-tracker';
+export * from './status';

package/src/components/SyncStatus/save-tracker.ts

@@ -46,10 +46,10 @@ const createSpaceSaveTracker = (space: Space, cb: (state: 'saved' | 'saving') =>
 
     let hasUnsavedChanges = false;
     let lastFlushPromise: Promise<void> | undefined;
-    space.db.saveStateChanged.on(ctx, ({ unsavedDocuments }) => {
+    space.internal.db.saveStateChanged.on(ctx, ({ unsavedDocuments }) => {
       hasUnsavedChanges = unsavedDocuments.length > 0;
     });
-    space.db.saveStateChanged.debounce(500).on(ctx, () => {
+    space.internal.db.saveStateChanged.debounce(500).on(ctx, () => {
       if (hasUnsavedChanges) {
         lastFlushPromise = undefined;
         cb('saving');

package/src/components/index.ts

@@ -2,24 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type ComponentType, lazy } from 'react';
-
 export * from './AwaitingObject';
 export * from './CreateDialog';
-export * from './CollectionSection';
-export * from './JoinDialog';
-export * from './MembersContainer';
-export * from './MenuFooter';
-export * from './ObjectRenamePopover';
-export * from './SpaceRenamePopover';
-export * from './SchemaContainer';
-export * from './SpacePresence';
-export * from './SpacePluginSettings';
-export * from './SpaceSettings';
+export * from './ObjectDetails';
+export * from './ObjectForm';
 export * from './SyncStatus';
-export * from './ViewEditor';
-
-export const CollectionArticle = lazy(() => import('./CollectionArticle'));
-export const ObjectDetailsPanel: ComponentType<any> = lazy(() => import('./ObjectDetailsPanel'));
-export const ObjectSettingsContainer = lazy(() => import('./ObjectSettings'));
-export const RecordArticle = lazy(() => import('./RecordArticle'));

package/src/constants.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { meta } from './meta';
+
+export const CREATE_OBJECT_DIALOG = `${meta.id}.CreateObjectDialog`;
+export const CREATE_SPACE_DIALOG = `${meta.id}.CreateSpaceDialog`;
+export const JOIN_DIALOG = `${meta.id}.JoinDialog`;
+export const OBJECT_RENAME_POPOVER = `${meta.id}.ObjectRenamePopover`;
+export const SPACE_RENAME_POPOVER = `${meta.id}.SpaceRenamePopover`;

package/src/containers/CollectionArticle/CollectionArticle.tsx

@@ -0,0 +1,139 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback, useMemo } from 'react';
+
+import { useCapabilities, useOperationInvoker } from '@dxos/app-framework/ui';
+import { AppCapabilities, LayoutOperation, getCollectionObjectPath, getObjectPathFromObject } from '@dxos/app-toolkit';
+import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
+import { Obj } from '@dxos/echo';
+import { type Collection } from '@dxos/echo';
+import { Panel, ScrollArea, Toolbar, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Card } from '@dxos/react-ui';
+import { Mosaic, type MosaicStackTileComponent } from '@dxos/react-ui-mosaic';
+import { SearchList, useSearchListResults } from '@dxos/react-ui-searchlist';
+import { getStyles } from '@dxos/ui-theme';
+
+import { meta } from '../../meta';
+
+/**
+ * Hook to resolve metadata (icon, iconHue, etc.) for objects based on their typename.
+ */
+const useMetadataResolver = () => {
+  const allMetadata = useCapabilities(AppCapabilities.Metadata);
+  return useCallback((typename: string) => allMetadata.find((m) => m.id === typename)?.metadata ?? {}, [allMetadata]);
+};
+
+/**
+ * Article view for collections.
+ */
+export const CollectionArticle = ({ subject, attendableId }: SurfaceComponentProps<Collection.Collection>) => {
+  const { t } = useTranslation(meta.id);
+  const resolveMetadata = useMetadataResolver();
+  const { items, handleSearch } = useCollectionItems(subject, resolveMetadata, attendableId);
+
+  return (
+    <SearchList.Root onSearch={handleSearch}>
+      <Panel.Root className='dx-document'>
+        <Panel.Toolbar asChild>
+          <Toolbar.Root>
+            <SearchList.Input placeholder={t('search placeholder')} />
+          </Toolbar.Root>
+        </Panel.Toolbar>
+        <Panel.Content asChild>
+          <SearchList.Content>
+            <Mosaic.Container asChild>
+              <ScrollArea.Root orientation='vertical'>
+                <ScrollArea.Viewport classNames='p-2'>
+                  <Mosaic.Stack items={items} getId={(item) => item.id} Tile={ObjectTile} />
+                </ScrollArea.Viewport>
+              </ScrollArea.Root>
+            </Mosaic.Container>
+          </SearchList.Content>
+        </Panel.Content>
+      </Panel.Root>
+    </SearchList.Root>
+  );
+};
+
+type ObjectItem = {
+  id: string;
+  object: Obj.Unknown;
+  targetPath: string;
+  icon: string;
+  iconHue?: string;
+};
+
+const ObjectTile: MosaicStackTileComponent<ObjectItem> = ({ data: item }) => {
+  const { t } = useTranslation(meta.id);
+  const { invokePromise } = useOperationInvoker();
+
+  const typename = Obj.getTypename(item.object) ?? '';
+  const label =
+    Obj.getLabel(item.object) ??
+    toLocalizedString(['object name placeholder', { ns: typename, defaultValue: item.id }], t);
+  const styles = item.iconHue ? getStyles(item.iconHue) : undefined;
+
+  const handleClick = useCallback(
+    () => void invokePromise(LayoutOperation.Open, { subject: [item.targetPath] }),
+    [invokePromise, item.targetPath],
+  );
+
+  return (
+    <Card.Root fullWidth role='button' classNames='cursor-pointer' onClick={handleClick}>
+      <Card.Toolbar>
+        <Card.ToolbarIconButton
+          variant='ghost'
+          label={label}
+          icon={item.icon}
+          iconOnly
+          iconClassNames={styles?.surfaceText}
+        />
+        <Card.Title>{label}</Card.Title>
+        <Card.Menu />
+      </Card.Toolbar>
+    </Card.Root>
+  );
+};
+
+type MetadataResolver = (typename: string) => { icon?: string; iconHue?: string };
+
+/**
+ * Combined hook to get collection items with search/filter support.
+ */
+const useCollectionItems = (
+  collection: Collection.Collection,
+  resolveMetadata: MetadataResolver,
+  attendableId?: string,
+) => {
+  const objects = useMemo(
+    () => (collection.objects ?? []).map((ref) => ref.target).filter((obj): obj is Obj.Unknown => Obj.isObject(obj)),
+    [collection.objects],
+  );
+
+  const items = useMemo(
+    () =>
+      objects.map((obj) => {
+        const typename = Obj.getTypename(obj);
+        const metadata = typename ? resolveMetadata(typename) : {};
+        const targetPath = attendableId ? getCollectionObjectPath(attendableId, obj.id) : getObjectPathFromObject(obj);
+
+        return {
+          id: Obj.getDXN(obj).toString(),
+          object: obj,
+          targetPath,
+          icon: metadata.icon ?? 'ph--placeholder--regular',
+          iconHue: metadata.iconHue,
+        } satisfies ObjectItem;
+      }),
+    [objects, resolveMetadata, attendableId],
+  );
+
+  const { results, handleSearch } = useSearchListResults({
+    items,
+    extract: (item) => Obj.getLabel(item.object) ?? item.id,
+  });
+
+  return { items: results, handleSearch };
+};

package/src/containers/CollectionArticle/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { CollectionArticle } from './CollectionArticle';
+
+export default CollectionArticle;

package/src/{components → containers/CollectionSection}/CollectionSection.tsx

@@ -4,18 +4,18 @@
 
 import React from 'react';
 
-import { type SurfaceComponentProps } from '@dxos/app-framework/react';
+import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
+import { type Collection } from '@dxos/echo';
 import { useTranslation } from '@dxos/react-ui';
-import { type Collection } from '@dxos/schema';
 
-import { meta } from '../meta';
+import { meta } from '../../meta';
 
 export const CollectionSection = ({ role, subject }: SurfaceComponentProps<Collection.Collection>) => {
   const { t } = useTranslation(meta.id);
 
   // TODO(wittjosiah): Better placeholder.
   return (
-    <div role={role} className='min-bs-[3.5rem] grid grid-rows-subgrid grid-cols-subgrid items-center'>
+    <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,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { CollectionSection } from './CollectionSection';
+
+export default CollectionSection;

package/src/containers/CreateObjectDialog/CreateObjectDialog.tsx

@@ -0,0 +1,164 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+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 { AppCapabilities, LayoutOperation, getObjectPath } from '@dxos/app-toolkit';
+import { Collection, Database, Obj, Type } from '@dxos/echo';
+import { runAndForwardErrors } from '@dxos/effect';
+import { invariant } from '@dxos/invariant';
+import { Operation } from '@dxos/operation';
+import { useClient } from '@dxos/react-client';
+import { useSpaces } from '@dxos/react-client/echo';
+import { Dialog, useTranslation } from '@dxos/react-ui';
+import { ViewAnnotation } from '@dxos/schema';
+
+import {
+  type CreateObjectOption,
+  CreateObjectPanel,
+  type CreateObjectPanelProps,
+  type Metadata,
+} from '../../components';
+import { meta } from '../../meta';
+import { SpaceOperation } from '../../types';
+
+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 manager = usePluginManager();
+  const { t } = useTranslation(meta.id);
+  const operationInvoker = useOperationInvoker();
+  const [target, setTarget] = useState<Database.Database | Collection.Collection | undefined>(initialTarget);
+  const [typename, setTypename] = useState<string | undefined>(initialTypename);
+  const client = useClient();
+  const spaces = useSpaces();
+  const closeRef = useRef<HTMLButtonElement | null>(null);
+
+  const resolve = useCallback<NonNullable<CreateObjectPanelProps['resolve']>>(
+    (id) => {
+      const metadata = manager.capabilities
+        .getAll(AppCapabilities.Metadata)
+        .find(({ id: entryId }) => entryId === id)?.metadata;
+      return metadata?.createObject ? (metadata as Metadata) : undefined;
+    },
+    [manager],
+  );
+
+  const db = Database.isDatabase(target) ? target : target && Obj.getDatabase(target);
+  // TODO(wittjosiah): Support database schemas.
+  const schemas = db?.schemaRegistry.query({ location: ['runtime'], includeSystem: false }).runSync();
+
+  const viewTypenames = useMemo(() => {
+    const set = new Set<string>();
+    for (const schema of schemas ?? []) {
+      if (ViewAnnotation.get(schema).pipe(Option.getOrElse(() => false))) {
+        set.add(Type.getTypename(schema));
+      }
+    }
+    return set;
+  }, [schemas]);
+
+  const options = useMemo<CreateObjectOption[]>(
+    () =>
+      manager.capabilities
+        .getAll(AppCapabilities.Metadata)
+        .filter((entry) => entry.metadata?.createObject)
+        .filter((entry) => (views === true ? viewTypenames.has(entry.id) : true))
+        .map((entry) => ({
+          id: entry.id,
+          label: t('typename label', { ns: entry.id, defaultValue: entry.id }),
+          icon: entry.metadata?.icon,
+        })),
+    [manager, views, viewTypenames, t],
+  );
+
+  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 object = yield* metadata.createObject(data, { db });
+        if (Obj.isObject(object) && !Obj.instanceOf(Type.PersistentType, object)) {
+          const { subject } = yield* operationInvoker.invoke(SpaceOperation.AddObject, {
+            target,
+            object,
+            hidden: !Obj.instanceOf(Collection.Collection, object),
+            targetNodeId,
+          });
+          const shouldNavigate = _shouldNavigate ?? (() => true);
+          if (shouldNavigate(object)) {
+            yield* operationInvoker.invoke(LayoutOperation.Open, {
+              subject,
+            });
+          }
+
+          onCreateObject?.(object);
+        }
+      }).pipe(
+        Effect.provideService(Capability.Service, manager.capabilities),
+        Effect.provideService(Operation.Service, operationInvoker),
+        runAndForwardErrors,
+      ),
+    [target, _shouldNavigate, onCreateObject, manager.capabilities, operationInvoker],
+  );
+
+  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.CloseIconButton ref={closeRef} />
+        </Dialog.Close>
+      </Dialog.Header>
+      <Dialog.Body>
+        <CreateObjectPanel
+          options={options}
+          spaces={spaces}
+          target={target}
+          typename={typename}
+          initialFormValues={initialFormValues}
+          defaultSpaceId={client.spaces.default.id}
+          resolve={resolve}
+          onTargetChange={setTarget}
+          onTypenameChange={setTypename}
+          onCreateObject={handleCreateObject}
+        />
+      </Dialog.Body>
+    </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.tsx

@@ -0,0 +1,72 @@
+//
+// 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, getSpacePath } from '@dxos/app-toolkit';
+import { runAndForwardErrors } from '@dxos/effect';
+import { Dialog, useTranslation } from '@dxos/react-ui';
+import { Form } from '@dxos/react-ui-form';
+
+import { useInputSurfaceLookup } from '../../hooks';
+import { meta } from '../../meta';
+import { SpaceForm, SpaceOperation } 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.SwitchWorkspace, { subject: getSpacePath(result.space.id) }),
+          );
+          yield* Effect.promise(() => invokePromise(LayoutOperation.UpdateDialog, { state: false }));
+        }
+      });
+      await runAndForwardErrors(program);
+    },
+    [invokePromise],
+  );
+
+  return (
+    <Dialog.Content>
+      <Dialog.Header>
+        <Dialog.Title>{t('create space dialog title')}</Dialog.Title>
+        <Dialog.Close asChild>
+          <Dialog.CloseIconButton ref={closeRef} />
+        </Dialog.Close>
+      </Dialog.Header>
+      <Form.Root
+        testId='create-space-form'
+        autoFocus
+        schema={SpaceForm}
+        defaultValues={initialValues}
+        fieldProvider={inputSurfaceLookup}
+        onSave={handleCreateSpace}
+      >
+        <Form.Viewport>
+          <Form.Content>
+            <Form.FieldSet />
+            <Form.Submit />
+          </Form.Content>
+        </Form.Viewport>
+      </Form.Root>
+    </Dialog.Content>
+  );
+};

package/src/containers/CreateSpaceDialog/index.ts

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

package/src/{components/SyncStatus → containers/InlineSyncStatus}/InlineSyncStatus.tsx

@@ -2,18 +2,16 @@
 // Copyright 2024 DXOS.org
 //
 
-import * as Option from 'effect/Option';
 import React, { useEffect, useState } from 'react';
 
-import { useAppGraph } from '@dxos/app-framework/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, useAttended, useAttention } from '@dxos/react-ui-attention';
+import { AttentionGlyph, useAttention } from '@dxos/react-ui-attention';
 
-import { usePath } from '../../hooks';
 import { meta } from '../../meta';
 
 const useEdgeStatus = (): EdgeStatus.ConnectionState => {
@@ -30,19 +28,10 @@ const useEdgeStatus = (): EdgeStatus.ConnectionState => {
 
 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 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;
@@ -53,9 +42,9 @@ export const InlineSyncStatus = ({ space, open }: { space: Space; open?: boolean
     <Tooltip.Trigger asChild content={t('syncing label')} side='bottom'>
       <AttentionGlyph
         syncing={syncing}
-        attended={isAttended}
+        attended={attended}
         containsAttended={containsAttended}
-        classNames='self-center mie-1'
+        classNames='self-center mx-1'
       />
     </Tooltip.Trigger>
   );