@dxos/plugin-space 0.8.1-main.ba2dec9 → 0.8.1-staging.31c3ee1

package/src/components/SpaceSettings/{SpaceSettingsPanel.stories.tsx → SpacePropertiesForm.stories.tsx}

@@ -10,21 +10,21 @@ import React from 'react';
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
 import { withTheme } from '@dxos/storybook-utils';
 
-import { SpaceSettingsPanel, type SpaceSettingsPanelProps } from './SpaceSettingsPanel';
+import { SpacePropertiesForm, type SpacePropertiesFormProps } from './SpacePropertiesForm';
 import translations from '../../translations';
 
-const Story = (args: Partial<SpaceSettingsPanelProps>) => {
+const Story = (args: Partial<SpacePropertiesFormProps>) => {
   const { space } = useClientProvider();
   return (
     <div role='none' className='p-2 border border-primary-500 rounded'>
-      <SpaceSettingsPanel {...args} space={space!} />
+      <SpacePropertiesForm {...args} space={space!} />
     </div>
   );
 };
 
 const meta: Meta = {
-  title: 'plugins/plugin-space/SpaceSettingsPanel',
-  component: SpaceSettingsPanel,
+  title: 'plugins/plugin-space/SpacePropertiesForm',
+  component: SpacePropertiesForm,
   render: Story,
   decorators: [withClientProvider({ createIdentity: true, createSpace: true }), withTheme],
   parameters: {
@@ -35,4 +35,4 @@ const meta: Meta = {
 
 export default meta;
 
-export const Default: StoryObj<typeof SpaceSettingsPanel> = {};
+export const Default: StoryObj<typeof SpacePropertiesForm> = {};

package/src/components/SpaceSettings/SpacePropertiesForm.tsx

@@ -0,0 +1,136 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Schema as S } from 'effect';
+import React, { type ChangeEvent, useCallback, useMemo, useState } from 'react';
+
+import { log } from '@dxos/log';
+import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
+import { type Space } from '@dxos/react-client/echo';
+import { Input, useTranslation } from '@dxos/react-ui';
+import { Form, type InputComponent, ControlItem, ControlItemInput } from '@dxos/react-ui-form';
+import { HuePicker, IconPicker } from '@dxos/react-ui-pickers';
+
+import { SPACE_PLUGIN } from '../../meta';
+import { SpaceForm } from '../../types';
+
+export type SpacePropertiesFormProps = {
+  space: Space;
+};
+
+export const SpacePropertiesForm = ({ space }: SpacePropertiesFormProps) => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+
+  const [edgeReplication, setEdgeReplication] = useState(
+    space.internal.data.edgeReplication === EdgeReplicationSetting.ENABLED,
+  );
+  const toggleEdgeReplication = useCallback(
+    async (next: boolean) => {
+      setEdgeReplication(next);
+      await space?.internal
+        .setEdgeReplicationPreference(next ? EdgeReplicationSetting.ENABLED : EdgeReplicationSetting.DISABLED)
+        .catch((err: unknown) => {
+          log.catch(err);
+          setEdgeReplication(!next);
+        });
+    },
+    [space],
+  );
+
+  const handleSave = useCallback(
+    (properties: S.Schema.Type<typeof SpaceForm>) => {
+      void toggleEdgeReplication(properties.edgeReplication);
+      if (properties.name !== space.properties.name) {
+        space.properties.name = properties.name;
+      }
+      if (properties.icon !== space.properties.icon) {
+        space.properties.icon = properties.icon;
+      }
+      if (properties.hue !== space.properties.hue) {
+        space.properties.hue = properties.hue;
+      }
+    },
+    [space, toggleEdgeReplication],
+  );
+
+  const values = useMemo(
+    () => ({
+      name: space.properties.name,
+      icon: space.properties.icon,
+      hue: space.properties.hue,
+      edgeReplication,
+    }),
+    [space.properties.name, space.properties.icon, space.properties.hue, edgeReplication],
+  );
+
+  const customElements: Partial<Record<string, InputComponent>> = useMemo(
+    () => ({
+      name: ({ type, label, getValue, onValueChange }) => {
+        const handleChange = useCallback(
+          ({ target: { value } }: ChangeEvent<HTMLInputElement>) => onValueChange(type, value),
+          [onValueChange, type],
+        );
+        return (
+          <ControlItemInput title={label} description={t('display name description')}>
+            <Input.TextInput
+              value={getValue()}
+              onChange={handleChange}
+              placeholder={t('display name input placeholder')}
+              classNames='min-is-64'
+            />
+          </ControlItemInput>
+        );
+      },
+      icon: ({ type, label, getValue, onValueChange }) => {
+        const handleChange = useCallback((nextEmoji: string) => onValueChange(type, nextEmoji), [onValueChange, type]);
+        const handleEmojiReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
+        return (
+          <ControlItem title={label} description={t('icon description')}>
+            <IconPicker
+              value={getValue()}
+              onChange={handleChange}
+              onReset={handleEmojiReset}
+              classNames='justify-self-end'
+              iconSize={5}
+            />
+          </ControlItem>
+        );
+      },
+      hue: ({ type, label, getValue, onValueChange }) => {
+        const handleChange = useCallback((nextHue: string) => onValueChange(type, nextHue), [onValueChange, type]);
+        const handleHueReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
+        return (
+          <ControlItem title={label} description={t('hue description')}>
+            <HuePicker
+              value={getValue()}
+              onChange={handleChange}
+              onReset={handleHueReset}
+              classNames='[--hue-preview-size:1.25rem] justify-self-end'
+            />
+          </ControlItem>
+        );
+      },
+      edgeReplication: ({ type, label, getValue, onValueChange }) => {
+        const handleChange = useCallback((checked: boolean) => onValueChange(type, checked), [onValueChange, type]);
+        return (
+          <ControlItemInput title={label} description={t('edge replication description')}>
+            <Input.Switch checked={getValue()} onCheckedChange={handleChange} classNames='justify-self-end' />
+          </ControlItemInput>
+        );
+      },
+    }),
+    [t],
+  );
+
+  return (
+    <Form
+      schema={SpaceForm}
+      values={values}
+      autoSave
+      onSave={handleSave}
+      Custom={customElements}
+      classNames='p-0 container-max-width [&_[role="form"]]:grid [&_[role="form"]]:grid-cols-1 md:[&_[role="form"]]:grid-cols-[1fr_min-content] [&_[role="form"]]:gap-4'
+    />
+  );
+};

package/src/components/SpaceSettings/SpaceSettingsContainer.tsx

@@ -0,0 +1,63 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback, useMemo } from 'react';
+
+import { Surface, useCapabilities, useCapability } from '@dxos/app-framework';
+import { type Space } from '@dxos/react-client/echo';
+import { toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { ControlSectionHeading } from '@dxos/react-ui-form';
+import { Accordion } from '@dxos/react-ui-list';
+import { StackItem } from '@dxos/react-ui-stack';
+import { byPosition } from '@dxos/util';
+
+import { SpaceCapabilities } from '../../capabilities';
+import { SPACE_PLUGIN } from '../../meta';
+
+export const SPACE_SETTINGS_DIALOG = `${SPACE_PLUGIN}/SpaceSettingsDialog`;
+
+export type SpaceSettingsTab = 'members' | 'settings';
+
+export type SpaceSettingsContainerProps = {
+  space: Space;
+};
+
+export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+  const state = useCapability(SpaceCapabilities.MutableState);
+  const items = useCapabilities(SpaceCapabilities.SettingsSection).toSorted(byPosition);
+  const data = useMemo(() => ({ subject: space }), [space]);
+
+  const handleOpenSectionChange = useCallback(
+    (sections: string[]) => {
+      state.spaceSettingsOpenSections.splice(0, state.spaceSettingsOpenSections.length, ...sections);
+    },
+    [state],
+  );
+
+  return (
+    <StackItem.Content classNames='p-2 block overflow-y-auto'>
+      <Accordion.Root<SpaceCapabilities.SettingsSection>
+        items={items}
+        value={state.spaceSettingsOpenSections}
+        onValueChange={handleOpenSectionChange}
+      >
+        {({ items }) => (
+          <>
+            {items.map((item) => (
+              <Accordion.Item key={item.id} item={item} classNames='container-max-width'>
+                <Accordion.ItemHeader classNames='pie-6' asChild>
+                  <ControlSectionHeading title={toLocalizedString(item.label, t)} />
+                </Accordion.ItemHeader>
+                <Accordion.ItemBody>
+                  <Surface role={`space-settings--${item.id}`} data={data} />
+                </Accordion.ItemBody>
+              </Accordion.Item>
+            ))}
+          </>
+        )}
+      </Accordion.Root>
+    </StackItem.Content>
+  );
+};

package/src/components/SpaceSettings/index.ts

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

package/src/components/SyncStatus/SyncStatus.tsx

@@ -94,7 +94,7 @@ export const SyncStatusDetail = ({ classNames, state, summary, debug }: SyncStat
 
   // TODO(burdon): Normalize to max document count?
   return (
-    <div className={mx('flex flex-col gap-3 p-2 text-xs min-w-96', classNames)}>
+    <div className={mx('flex flex-col gap-3 p-2 text-xs min-w-[400px]', classNames)}>
       <div role='none' className='flex items-center'>
         <h1 className='flex-1'>{t('sync status title')}</h1>
         <div className='flex items-center gap-2'>

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

@@ -2,13 +2,13 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type UnsubscribeCallback } from '@dxos/async';
+import { type CleanupFn } from '@dxos/async';
 import { type Client } from '@dxos/client';
 import { type Space, type SpaceId } from '@dxos/client/echo';
 import { Context } from '@dxos/context';
 
 export const createClientSaveTracker = (client: Client, cb: (state: 'saved' | 'saving') => void) => {
-  const unsubscribeCallbacks: Record<SpaceId, UnsubscribeCallback> = {};
+  const CleanupFns: Record<SpaceId, CleanupFn> = {};
   const state: Record<SpaceId, 'saved' | 'saving'> = {};
 
   const install = (spaces: Space[]) => {
@@ -18,7 +18,7 @@ export const createClientSaveTracker = (client: Client, cb: (state: 'saved' | 's
       }
 
       state[space.id] = 'saved';
-      unsubscribeCallbacks[space.id] = createSpaceSaveTracker(space, (s) => {
+      CleanupFns[space.id] = createSpaceSaveTracker(space, (s) => {
         state[space.id] = s;
         cb(Object.values(state).some((s) => s === 'saving') ? 'saving' : 'saved');
       });
@@ -30,13 +30,13 @@ export const createClientSaveTracker = (client: Client, cb: (state: 'saved' | 's
   install(client.spaces.get());
 
   return () => {
-    for (const unsubscribe of Object.values(unsubscribeCallbacks)) {
+    for (const unsubscribe of Object.values(CleanupFns)) {
       unsubscribe();
     }
   };
 };
 
-const createSpaceSaveTracker = (space: Space, cb: (state: 'saved' | 'saving') => void): UnsubscribeCallback => {
+const createSpaceSaveTracker = (space: Space, cb: (state: 'saved' | 'saving') => void): CleanupFn => {
   const ctx = new Context();
 
   void space.waitUntilReady().then(() => {

package/src/components/index.ts

@@ -2,14 +2,14 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './AdvancedObjectSettings';
 export * from './AwaitingObject';
-export * from './BaseObjectSettings';
 export * from './CreateDialog';
 export * from './CollectionMain';
 export * from './CollectionSection';
 export * from './JoinDialog';
+export * from './MembersContainer';
 export * from './MenuFooter';
+export * from './ObjectSettingsContainer';
 export * from './PersistenceStatus';
 export * from './PopoverAddSpace';
 export * from './PopoverRenameObject';

package/src/events.ts

@@ -2,13 +2,13 @@
 // Copyright 2025 DXOS.org
 //
 
-import { defineEvent } from '@dxos/app-framework';
+import { defineEvent, Events } from '@dxos/app-framework';
 
 import { SPACE_PLUGIN } from './meta';
 
 export namespace SpaceEvents {
+  export const StateReady = Events.createStateEvent(`${SPACE_PLUGIN}/event/state-ready`);
   export const SetupSettingsPanel = defineEvent(`${SPACE_PLUGIN}/event/setup-settings-panel`);
-  export const StateReady = defineEvent(`${SPACE_PLUGIN}/event/state-ready`);
   export const DefaultSpaceReady = defineEvent(`${SPACE_PLUGIN}/event/default-space-ready`);
 }
 

package/src/meta.ts

@@ -6,8 +6,8 @@ import { type PluginMeta } from '@dxos/app-framework';
 
 export const SPACE_PLUGIN = 'dxos.org/plugin/space';
 
-export const meta = {
+export const meta: PluginMeta = {
   id: SPACE_PLUGIN,
   name: 'Spaces',
   icon: 'ph--planet--regular',
-} satisfies PluginMeta;
+};

package/src/translations.ts

@@ -10,6 +10,7 @@ export default [
     'en-US': {
       [CollectionType.typename]: {
         'typename label': 'Collection',
+        'object name placeholder': 'New collection',
       },
       [SPACE_PLUGIN]: {
         'plugin name': 'Spaces',
@@ -39,7 +40,7 @@ export default [
         'confirm restore title': 'Overwrite files in this space?',
         'confirm restore body': 'Restoring from a backup will overwrite the contents of any documents that match.',
         'upload file message': 'Drag file here or click to browse',
-        'object title placeholder': 'Type a title here…',
+        'object placeholder': 'Type a title here…',
         'personal space label': 'Personal Space',
         'spaces label': 'Spaces',
         'show hidden spaces label': 'Show closed spaces',
@@ -64,9 +65,6 @@ export default [
         'missing object message': 'Object not available.',
         'missing object description':
           'The requested object has not been found yet. Ensure there are enough peers online in the space with an updated copy.',
-        'create collection label': 'Create collection',
-        'unnamed object label': 'New object',
-        'unnamed collection label': 'New collection',
         'create object in space label': 'Add to space',
         'create object in collection label': 'Add to collection',
         'share space label': 'Share',
@@ -98,18 +96,13 @@ export default [
         'join success label': 'Successfully joined space',
         'name label': 'Name',
         'name placeholder': 'Name',
-        'unnamed object settings label': 'Settings',
+        'object settings label': 'Settings',
         'edge replication label': 'Enable EDGE Replication',
         'saving locally label': 'Writing to disk',
         'downloading label': 'Replicating from peers',
         'uploading label': 'Replicating to peers',
         'offline persisted label': 'Saved to disk (offline)',
         'remote synced label': 'Synced with peers',
-        'open settings panel label': 'Show Settings',
-        'settings panel label': 'Settings',
-        'open space settings label': 'Space Settings',
-        'members tab label': 'Members',
-        'settings tab label': 'Settings',
         'syncing label': 'Space syncing',
         'show all label': 'Show all',
         'no sync status label': 'No space with missing objects.',
@@ -125,8 +118,24 @@ export default [
         'advanced settings label': 'Advanced',
         'foreign keys': 'Foreign Keys',
         'add key': 'Add Key',
-        'icon label': 'Icon',
-        'hue label': 'Color',
+
+        'members panel label': 'Members',
+        'members verbose label': 'Manage space members',
+        'members description': 'You can view the current status of space members here as well as invite new members.',
+        'members label': 'Members',
+        'invitations label': 'Invitations',
+        'space invitation description': 'Manage invitations to the space.',
+        'qr code description': 'Share this QR code, or copy the URL and share it with the person you want to invite.',
+
+        'settings panel label': 'Space Settings',
+        'open space settings label': 'Space Settings',
+        'space settings properties label': 'General',
+        'display name input placeholder': 'Space name',
+        'display name description': 'Name of the space as it appears in the app.',
+        'icon description': 'Icon used to represent the space in the app.',
+        'hue description': 'Color used to represent the space in the app.',
+        'edge replication description':
+          "Only change this if you know what you're doing. Disabling this will prevent the space from replicating through Composer's EDGE services, and relies solely on peer-to-peer sync.",
       },
     },
   },

package/src/types/thread.ts

@@ -3,65 +3,11 @@
 //
 
 import { Expando, Ref, S, TypedObject } from '@dxos/echo-schema';
+import { MessageType } from '@dxos/schema';
 
 // TODO(wittjosiah): These types were placed here rather than in @dxos/plugin-thread
 //   in order to avoid a circular dependency between threads and other objects that use threads.
 
-// TODO(wittjosiah): Factor out to halo?
-export class ContactType extends TypedObject({ typename: 'dxos.org/type/Contact', version: '0.1.0' })({
-  name: S.optional(S.String),
-  identifiers: S.mutable(
-    S.Array(
-      S.Struct({
-        type: S.String,
-        value: S.String,
-      }),
-    ),
-  ),
-}) {}
-
-export const ActorSchema = S.mutable(
-  S.Struct({
-    contact: S.optional(Ref(ContactType)),
-    // TODO(wittjosiah): Should the below fields just be the contact schema?
-    //  i.e. it should either be a reference to an existing contact or an inline contact schema.
-    identityKey: S.optional(S.String),
-    // TODO(burdon): Generalize to handle/identifier?
-    email: S.optional(S.String),
-    name: S.optional(S.String),
-  }),
-);
-
-export type ActorType = S.Schema.Type<typeof ActorSchema>;
-
-export enum MessageState {
-  NONE = 0,
-  ARCHIVED = 1,
-  DELETED = 2,
-  SPAM = 3,
-}
-
-export class MessageType extends TypedObject({ typename: 'dxos.org/type/Message', version: '0.1.0' })({
-  /** ISO date string when the message was sent. */
-  timestamp: S.String,
-  /** Message state. */
-  state: S.optional(S.Enums(MessageState)),
-  /** Identity of the message sender. */
-  sender: ActorSchema,
-  /** Text content of the message. */
-  text: S.String,
-  /** Non-text content sent with a message (e.g., files, polls, etc.) */
-  parts: S.optional(S.mutable(S.Array(Ref(Expando)))),
-  /** Custom properties for specific message types (e.g. email subject or cc fields). */
-  properties: S.optional(S.mutable(S.Record({ key: S.String, value: S.Any }))),
-  // TODO(wittjosiah): Add read status:
-  //  - Read receipts need to be per space member.
-  //  - Read receipts don't need to be added to schema until they being implemented.
-  /** Context of the application when message was created. */
-  // TODO(burdon): Evolve "attention object" to be current UX state? E.g., of Deck?
-  context: S.optional(Ref(Expando)),
-}) {}
-
 export const ThreadStatus = S.Union(S.Literal('staged'), S.Literal('active'), S.Literal('resolved'));
 
 export class ThreadType extends TypedObject({ typename: 'dxos.org/type/Thread', version: '0.1.0' })({
@@ -74,5 +20,5 @@ export class ThreadType extends TypedObject({ typename: 'dxos.org/type/Thread',
 
 export class ChannelType extends TypedObject({ typename: 'dxos.org/type/Channel', version: '0.1.0' })({
   name: S.optional(S.String),
-  threads: S.mutable(S.Array(Ref(ThreadType))),
+  queue: Ref(Expando),
 }) {}

package/src/types/types.ts

@@ -3,7 +3,7 @@
 //
 
 import { type AnyIntentChain } from '@dxos/app-framework';
-import { AST, S, type Expando, type BaseObject, type TypedObject } from '@dxos/echo-schema';
+import { S, type Expando, type BaseObject, type TypedObject } from '@dxos/echo-schema';
 import { type PublicKey } from '@dxos/react-client';
 // TODO(wittjosiah): This pulls in full client.
 import { EchoObjectSchema, ReactiveObjectSchema, type Space, SpaceSchema } from '@dxos/react-client/echo';
@@ -42,6 +42,11 @@ export type PluginState = {
    */
   spaceNames: Record<string, string>;
 
+  /**
+   * Which sections of the space settings are open.
+   */
+  spaceSettingsOpenSections: string[];
+
   /**
    * Which spaces have an SDK migration running currently.
    */
@@ -88,14 +93,18 @@ export interface TypedObjectSerializer<T extends Expando = Expando> {
 }
 
 export const SpaceForm = S.Struct({
-  name: S.optional(S.String.annotations({ [AST.TitleAnnotationId]: 'Name' })),
+  name: S.optional(S.String.annotations({ title: 'Name' })),
+  icon: S.optional(S.String.annotations({ title: 'Icon' })),
+  hue: S.optional(S.String.annotations({ title: 'Color' })),
   // TODO(wittjosiah): Make optional with default value.
-  edgeReplication: S.Boolean.annotations({ [AST.TitleAnnotationId]: 'Enable EDGE Replication' }),
+  edgeReplication: S.Boolean.annotations({ title: 'Enable EDGE Replication' }),
 });
 
 export type ObjectForm<T extends BaseObject = BaseObject> = {
+  // TODO(dmaretskyi): Change to S.Schema.AnyNoContext
   objectSchema: TypedObject;
   formSchema?: S.Schema<T, any>;
+  hidden?: boolean;
   getIntent: (props: T, options: { space: Space }) => AnyIntentChain;
 };
 
@@ -165,10 +174,9 @@ export namespace SpaceAction {
     output: S.Void,
   }) {}
 
+  // TODO(wittjosiah): Handle scrolling to section.
   export class OpenSettings extends S.TaggedClass<OpenSettings>()(`${SPACE_ACTION}/open-settings`, {
-    input: S.Struct({
-      space: SpaceSchema,
-    }),
+    input: S.Struct({ space: SpaceSchema }),
     output: S.Void,
   }) {}
 
@@ -206,6 +214,7 @@ export namespace SpaceAction {
     input: S.Struct({
       object: ReactiveObjectSchema,
       target: S.Union(SpaceSchema, CollectionType),
+      hidden: S.optional(S.Boolean),
     }),
     output: S.Struct({
       id: S.String,

package/src/util.tsx

@@ -3,10 +3,11 @@
 //
 
 import { createIntent, type PromiseIntentDispatcher, LayoutAction } from '@dxos/app-framework';
-import { EXPANDO_TYPENAME, getObjectAnnotation, getTypename, type Expando } from '@dxos/echo-schema';
+import { EXPANDO_TYPENAME, getTypeAnnotation, getTypename, type Expando } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { getSchema, isReactiveObject, makeRef } from '@dxos/live-object';
 import { Migrations } from '@dxos/migrations';
+import { ATTENDABLE_PATH_SEPARATOR } from '@dxos/plugin-deck/types';
 import {
   ACTION_GROUP_TYPE,
   ACTION_TYPE,
@@ -101,7 +102,6 @@ const getCollectionGraphNodePartials = ({
   resolve: (typename: string) => Record<string, any>;
 }) => {
   return {
-    disabled: !navigable,
     acceptPersistenceClass: new Set(['echo']),
     acceptPersistenceKey: new Set([space.id]),
     role: 'branch',
@@ -213,6 +213,28 @@ export const constructSpaceNode = ({
       disabled: !navigable || space.state.get() !== SpaceState.SPACE_READY || hasPendingMigration,
       testId: 'spacePlugin.space',
     },
+    nodes: [
+      {
+        id: `${space.id}${ATTENDABLE_PATH_SEPARATOR}members`,
+        type: `${SPACE_PLUGIN}/members`,
+        data: space,
+        properties: {
+          label: ['members panel label', { ns: SPACE_PLUGIN }],
+          icon: 'ph--users--regular',
+          disposition: 'hidden',
+        },
+      },
+      {
+        id: `${space.id}${ATTENDABLE_PATH_SEPARATOR}settings`,
+        type: `${SPACE_PLUGIN}/settings`,
+        data: space,
+        properties: {
+          label: ['settings panel label', { ns: SPACE_PLUGIN }],
+          icon: 'ph--gear--regular',
+          disposition: 'hidden',
+        },
+      },
+    ],
   };
 };
 
@@ -242,7 +264,7 @@ export const constructSpaceActions = ({
       properties: {
         label: ['migrate space label', { ns: SPACE_PLUGIN }],
         icon: 'ph--database--regular',
-        disposition: 'toolbar',
+        disposition: 'list-item-primary',
         disabled: migrating || Migrations.running(space),
       },
     });
@@ -277,7 +299,7 @@ export const constructSpaceActions = ({
           label: ['share space label', { ns: SPACE_PLUGIN }],
           icon: 'ph--users--regular',
           disabled: locked,
-          disposition: 'toolbar',
+          disposition: 'list-item-primary',
           iconOnly: false,
           variant: 'default',
           testId: 'spacePlugin.shareSpace',
@@ -357,7 +379,7 @@ export const constructSpaceActions = ({
       properties: {
         label: ['open space label', { ns: SPACE_PLUGIN }],
         icon: 'ph--clock-counter-clockwise--regular',
-        disposition: 'toolbar',
+        disposition: 'list-item-primary',
       },
     });
   }
@@ -399,8 +421,7 @@ export const createObjectNode = ({
     properties: {
       ...partials,
       label: metadata.label?.(object) ||
-        object.name ||
-        metadata.placeholder || ['unnamed object label', { ns: SPACE_PLUGIN }],
+        object.name || ['object name placeholder', { ns: type, default: 'New object' }],
       icon: metadata.icon ?? 'ph--placeholder--regular',
       testId: 'spacePlugin.object',
       persistenceClass: 'echo',
@@ -434,7 +455,7 @@ export const constructObjectActions = ({
             properties: {
               label: ['create object in collection label', { ns: SPACE_PLUGIN }],
               icon: 'ph--plus--regular',
-              disposition: 'toolbar',
+              disposition: 'list-item-primary',
               testId: 'spacePlugin.createObject',
             },
           },
@@ -561,7 +582,7 @@ export const cloneObject = async (
   newSpace: Space,
 ): Promise<Expando> => {
   const schema = getSchema(object);
-  const typename = schema ? getObjectAnnotation(schema)?.typename ?? EXPANDO_TYPENAME : EXPANDO_TYPENAME;
+  const typename = schema ? getTypeAnnotation(schema)?.typename ?? EXPANDO_TYPENAME : EXPANDO_TYPENAME;
   const metadata = resolve(typename);
   const serializer = metadata.serializer;
   invariant(serializer, `No serializer for type: ${typename}`);