@dxos/plugin-space 0.8.3 → 0.8.4-main.2e9d522

package/src/components/ObjectDetailsPanel.tsx

@@ -0,0 +1,77 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { type JsonPath, setValue } from '@dxos/echo-schema';
+import { invariant } from '@dxos/invariant';
+import { useClient } from '@dxos/react-client';
+import { getSpace, Filter, useQuery, useSchema } from '@dxos/react-client/echo';
+import { Callout, useTranslation } from '@dxos/react-ui';
+import { useSelected } from '@dxos/react-ui-attention';
+import { Form, useRefQueryLookupHandler } from '@dxos/react-ui-form';
+import { type DataType } from '@dxos/schema';
+import { isNonNullable } from '@dxos/util';
+
+import { SPACE_PLUGIN } from '../meta';
+
+type RowDetailsPanelProps = { objectId: string; view: DataType.View };
+
+const ObjectDetailsPanel = ({ objectId, view }: RowDetailsPanelProps) => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+  const client = useClient();
+  const space = getSpace(view);
+  const schema = useSchema(client, space, view.query?.typename);
+
+  const queriedObjects = useQuery(space, schema ? Filter.type(schema) : Filter.nothing());
+  const selectedRows = useSelected(objectId, 'multi');
+  const selectedObjects = selectedRows.map((id) => queriedObjects.find((obj) => obj.id === id)).filter(isNonNullable);
+
+  const handleRefQueryLookup = useRefQueryLookupHandler({ space });
+
+  const handleSave = useCallback(
+    (values: any, { changed }: { changed: Record<JsonPath, boolean> }) => {
+      const id = values.id;
+      invariant(typeof id === 'string');
+      const object = queriedObjects.find((obj) => obj.id === id);
+      invariant(object);
+
+      const changedPaths = Object.keys(changed).filter((path) => changed[path as JsonPath]) as JsonPath[];
+      for (const path of changedPaths) {
+        const value = values[path];
+        setValue(object, path, value);
+      }
+    },
+    [queriedObjects],
+  );
+
+  if (selectedObjects.length === 0) {
+    return (
+      <div role='none' className='plb-cardSpacingBlock pli-cardSpacingInline'>
+        <Callout.Root classNames='is-full'>
+          <Callout.Title>{t('row details no selection label')}</Callout.Title>
+        </Callout.Root>
+      </div>
+    );
+  }
+
+  return (
+    <div role='none' className='bs-full is-full flex flex-col p-2 gap-1 overflow-y-auto'>
+      {schema &&
+        selectedObjects.map((object) => (
+          <div key={object.id} className='border border-separator rounded'>
+            <Form
+              autoSave
+              schema={schema}
+              values={object}
+              onSave={handleSave}
+              onQueryRefOptions={handleRefQueryLookup}
+            />
+          </div>
+        ))}
+    </div>
+  );
+};
+
+export default ObjectDetailsPanel;

package/src/components/PersistenceStatus.tsx

@@ -2,13 +2,12 @@
 // Copyright 2024 DXOS.org
 //
 
-import { ArrowsCounterClockwise, CheckCircle, Warning } from '@phosphor-icons/react';
 import React, { useEffect, useState } from 'react';
 
 import { debounce } from '@dxos/async';
 import { type EchoDatabase } from '@dxos/react-client/echo';
-import { Tooltip, useTranslation } from '@dxos/react-ui';
-import { getSize, mx, staticPlaceholderText, warningText } from '@dxos/react-ui-theme';
+import { Icon, Tooltip, useTranslation } from '@dxos/react-ui';
+import { mx, staticPlaceholderText, warningText } from '@dxos/react-ui-theme';
 
 import { SPACE_PLUGIN } from '../meta';
 
@@ -54,14 +53,14 @@ export const PersistenceStatus = ({ db }: { db: EchoDatabase }) => {
     case Status.ERROR:
       return (
         <div className='flex items-center'>
-          <Warning className={mx(getSize(4), 'me-1')} />
+          <Icon icon='ph--warning--regular' size={4} classNames='me-1' />
           <span className={mx('text-sm', warningText)}>{t('persistence error label')}</span>
         </div>
       );
     case Status.PENDING:
       return (
         <div className='flex items-center'>
-          <ArrowsCounterClockwise className={mx(getSize(4), 'me-1')} />
+          <Icon icon='ph--arrows-counter-clockwise--regular' size={4} classNames='me-1' />
           <span className={mx('text-sm', staticPlaceholderText)}>{t('persistence pending label')}</span>
         </div>
       );
@@ -74,7 +73,7 @@ export const PersistenceStatus = ({ db }: { db: EchoDatabase }) => {
           content={t('persisted locally message')}
           className='flex items-center'
         >
-          <CheckCircle className={mx(getSize(4), 'me-1')} />
+          <Icon icon='ph--check-circle--regular' size={4} classNames='me-1' />
           {displayMessage && (
             <span className={mx('text-sm', staticPlaceholderText)}>{t('persisted locally label')}</span>
           )}

package/src/components/PopoverRenameObject.tsx

@@ -25,10 +25,10 @@ export const PopoverRenameObject = ({ object: obj }: { object: Live<any> }) => {
   const handleDone = useCallback(() => {
     try {
       object.name = name;
-    } catch {
+    } catch (err) {
       try {
         object.title = name;
-      } catch (err) {
+      } catch {
         log.error('Failed to rename object', { err });
       }
     }

package/src/components/SpacePresence.stories.tsx

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { type Meta } from '@storybook/react';
+import { type Meta } from '@storybook/react-vite';
 import React from 'react';
 
 import { IdentityDid, PublicKey } from '@dxos/keys';
@@ -12,7 +12,7 @@ import { HaloSpaceMember, SpaceMember } from '@dxos/react-client/echo';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { FullPresence, type MemberPresenceProps, SmallPresence, type Member } from './SpacePresence';
-import translations from '../translations';
+import { translations } from '../translations';
 
 const nViewers = (n: number, currentlyAttended = true): Member[] =>
   Array.from({ length: n }, () => ({

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

@@ -4,14 +4,14 @@
 
 import '@dxos-theme';
 
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { SpaceSettingsContainer, type SpaceSettingsContainerProps } from './SpaceSettingsContainer';
-import translations from '../../translations';
+import { translations } from '../../translations';
 
 const Story = (args: Partial<SpaceSettingsContainerProps>) => {
   const { space } = useClientProvider();

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

@@ -4,28 +4,21 @@
 
 import '@dxos-theme';
 
-import { type Meta, type StoryObj } from '@storybook/react';
-import React from 'react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 
-import { withTheme, withLayout } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/storybook-utils';
 
 import { SyncStatusIndicator } from './SyncStatus';
-import translations from '../../translations';
-
-const DefaultStory = (props: any) => {
-  return (
-    <div className='flex flex-col-reverse p-4'>
-      <SyncStatusIndicator {...props} />
-    </div>
-  );
-};
+import { translations } from '../../translations';
 
 const meta: Meta = {
   title: 'plugins/plugin-space/SyncStatusIndicator',
   component: SyncStatusIndicator,
-  render: DefaultStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  parameters: { translations },
+  decorators: [withTheme],
+  parameters: {
+    translations,
+    layout: 'centered',
+  },
 };
 
 export default meta;

package/src/components/SyncStatus/SyncStatus.tsx

@@ -29,7 +29,7 @@ export const SyncStatus = () => {
   return <SyncStatusIndicator state={state} saved={saved} />;
 };
 
-export const SyncStatusIndicator = ({ state, saved }: { state: SpaceSyncStateMap; saved: Boolean }) => {
+export const SyncStatusIndicator = ({ state, saved }: { state: SpaceSyncStateMap; saved: boolean }) => {
   const { t } = useTranslation(SPACE_PLUGIN);
   const summary = getSyncSummary(state);
   const offline = Object.values(state).length === 0;

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

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

package/src/components/SyncStatus/status.ts

@@ -10,10 +10,10 @@ export const getStatus = ({
   needsToUpload,
   needsToDownload,
 }: {
-  offline: Boolean;
-  saved: Boolean;
-  needsToUpload: Boolean;
-  needsToDownload: Boolean;
+  offline: boolean;
+  saved: boolean;
+  needsToUpload: boolean;
+  needsToDownload: boolean;
 }): Status => {
   if (!saved) {
     return 'saving locally';

package/src/components/ViewEditor.tsx

@@ -0,0 +1,64 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useCallback, useMemo } from 'react';
+
+import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { Type } from '@dxos/echo';
+import { invariant } from '@dxos/invariant';
+import { useClient } from '@dxos/react-client';
+import { Filter, getSpace, useQuery, useSchema } from '@dxos/react-client/echo';
+import { ViewEditor as NativeViewEditor } from '@dxos/react-ui-form';
+import { DataType } from '@dxos/schema';
+
+import { SpaceAction } from '../types';
+
+type ViewEditorProps = { view: DataType.View };
+
+export const ViewEditor = ({ view }: ViewEditorProps) => {
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const client = useClient();
+  const space = getSpace(view);
+  const schema = useSchema(client, space, view.query.typename);
+
+  const views = useQuery(space, Filter.type(DataType.View));
+  const currentTypename = useMemo(() => view.query?.typename, [view.query?.typename]);
+
+  const handleUpdateTypename = useCallback(
+    (typename: string) => {
+      invariant(schema);
+      invariant(Type.isMutable(schema));
+
+      const matchingViews = views.filter((view) => view.query.typename === currentTypename);
+      for (const view of matchingViews) {
+        view.query.typename = typename;
+      }
+
+      schema.updateTypename(typename);
+    },
+    [views, schema],
+  );
+
+  const handleDelete = useCallback(
+    (fieldId: string) => {
+      void dispatch(createIntent(SpaceAction.DeleteField, { view, fieldId }));
+    },
+    [dispatch, view],
+  );
+
+  if (!space || !schema) {
+    return null;
+  }
+
+  return (
+    <NativeViewEditor
+      registry={space.db.schemaRegistry}
+      schema={schema}
+      view={view}
+      onTypenameChanged={Type.isMutable(schema) ? handleUpdateTypename : undefined}
+      onDelete={Type.isMutable(schema) ? handleDelete : undefined}
+      outerSpacing={false}
+    />
+  );
+};

package/src/components/index.ts

@@ -2,9 +2,10 @@
 // Copyright 2023 DXOS.org
 //
 
+import { lazy } from 'react';
+
 export * from './AwaitingObject';
 export * from './CreateDialog';
-export * from './CollectionMain';
 export * from './CollectionSection';
 export * from './JoinDialog';
 export * from './MembersContainer';
@@ -18,3 +19,7 @@ export * from './SpacePresence';
 export * from './SpacePluginSettings';
 export * from './SpaceSettings';
 export * from './SyncStatus';
+export * from './ViewEditor';
+
+export const CollectionMain = lazy(() => import('./CollectionMain'));
+export const ObjectDetailsPanel = lazy(() => import('./ObjectDetailsPanel'));

package/src/events.ts

@@ -11,4 +11,5 @@ export namespace SpaceEvents {
   export const SetupSettingsPanel = defineEvent(`${SPACE_PLUGIN}/event/setup-settings-panel`);
   export const DefaultSpaceReady = defineEvent(`${SPACE_PLUGIN}/event/default-space-ready`);
   export const SpaceCreated = defineEvent(`${SPACE_PLUGIN}/event/space-created`);
+  export const SchemaAdded = defineEvent(`${SPACE_PLUGIN}/event/schema-added`);
 }

package/src/translations.ts

@@ -2,29 +2,88 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Type } from '@dxos/echo';
+import { StoredSchema } from '@dxos/echo-schema';
+import { type Resource } from '@dxos/react-ui';
 import { DataType } from '@dxos/schema';
 
-import { SPACE_PLUGIN } from './meta';
+import { meta } from './meta';
 
-export default [
+// TODO(burdon): Change to single Resource?
+export const translations = [
   {
     'en-US': {
-      [Type.getTypename(DataType.Collection)]: {
+      [DataType.Collection.typename]: {
         'typename label': 'Collection',
         'typename label_zero': 'Collections',
         'typename label_one': 'Collection',
         'typename label_other': 'Collections',
         'object name placeholder': 'New collection',
+        'rename object label': 'Rename collection',
+        'delete object label': 'Delete collection',
       },
-      [Type.getTypename(DataType.QueryCollection)]: {
+      [DataType.QueryCollection.typename]: {
         'typename label': 'Smart Collection',
         'typename label_zero': 'Smart Collections',
         'typename label_one': 'Smart Collection',
         'typename label_other': 'Smart Collections',
         'object name placeholder': 'New smart collection',
+        'rename object label': 'Rename smart collection',
+        'delete object label': 'Delete smart collection',
       },
-      [SPACE_PLUGIN]: {
+      [StoredSchema.typename]: {
+        'typename label': 'Record',
+        'typename label_zero': 'Records',
+        'typename label_one': 'Record',
+        'typename label_other': 'Records',
+        'object name placeholder': 'New record type',
+        'rename object label': 'Rename record type',
+        'delete object label': 'Delete record type',
+      },
+      [DataType.View.typename]: {
+        'typename label': 'View',
+        'typename label_zero': 'Views',
+        'typename label_one': 'View',
+        'typename label_other': 'Views',
+        'object name placeholder': 'New view',
+        'rename object label': 'Rename view',
+        'delete object label': 'Delete view',
+      },
+      [DataType.Event.typename]: {
+        'typename label': 'Event',
+        'typename label_zero': 'Events',
+        'typename label_one': 'Event',
+        'typename label_other': 'Events',
+        'object name placeholder': 'New event',
+      },
+      [DataType.Organization.typename]: {
+        'typename label': 'Organization',
+        'typename label_zero': 'Organizations',
+        'typename label_one': 'Organization',
+        'typename label_other': 'Organizations',
+        'object name placeholder': 'New organization',
+      },
+      [DataType.Person.typename]: {
+        'typename label': 'Person',
+        'typename label_zero': 'People',
+        'typename label_one': 'Person',
+        'typename label_other': 'People',
+        'object name placeholder': 'New person',
+      },
+      [DataType.Project.typename]: {
+        'typename label': 'Project',
+        'typename label_zero': 'Projects',
+        'typename label_one': 'Project',
+        'typename label_other': 'Projects',
+        'object name placeholder': 'New project',
+      },
+      [DataType.Task.typename]: {
+        'typename label': 'Task',
+        'typename label_zero': 'Tasks',
+        'typename label_one': 'Task',
+        'typename label_other': 'Tasks',
+        'object name placeholder': 'New task',
+      },
+      [meta.id]: {
         'plugin name': 'Spaces',
         'first run message': 'Nothing selected.',
         'create space label': 'Create space',
@@ -51,6 +110,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 name placeholder': 'Object',
         'object placeholder': 'Type a title here…',
         'personal space label': 'Personal Space',
         'spaces label': 'Spaces',
@@ -134,6 +194,10 @@ export default [
         'add key': 'Add Key',
         'open space settings label': 'Open settings',
 
+        'row details no selection label': 'No objects selected',
+        'companion selected objects label': 'Selected',
+        'field deleted label': 'Field deleted',
+
         '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.',
@@ -167,4 +231,4 @@ export default [
       },
     },
   },
-];
+] as const satisfies Resource[];

package/src/types/types.ts

@@ -5,13 +5,13 @@
 import { Schema } from 'effect';
 
 import { type AnyIntentChain } from '@dxos/app-framework';
-import { Type, type Obj } from '@dxos/echo';
-import { type BaseObject, type TypedObject } from '@dxos/echo-schema';
+import { type Obj, Type } from '@dxos/echo';
+import { EchoSchema, StoredSchema, type TypedObject, type BaseObject } 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';
 import { CancellableInvitationObservable, Invitation } from '@dxos/react-client/invitations';
-import { DataType, TypenameAnnotationId } from '@dxos/schema';
+import { DataType, FieldSchema, TypenameAnnotationId } from '@dxos/schema';
 import { type ComplexMap } from '@dxos/util';
 
 import { SPACE_PLUGIN } from '../meta';
@@ -217,11 +217,63 @@ export namespace SpaceAction {
     output: Schema.Boolean,
   }) {}
 
+  export const StoredSchemaForm = Schema.Struct({
+    name: Schema.optional(Schema.String),
+    typename: Schema.optional(
+      Schema.String.annotations({
+        [TypenameAnnotationId]: ['unused-static'],
+      }),
+    ),
+  });
+
+  export class UseStaticSchema extends Schema.TaggedClass<UseStaticSchema>()(`${SPACE_ACTION}/use-static-schema`, {
+    input: Schema.Struct({
+      space: SpaceSchema,
+      typename: Schema.String,
+    }),
+    output: Schema.Struct({}),
+  }) {}
+
+  export class AddSchema extends Schema.TaggedClass<AddSchema>()(`${SPACE_ACTION}/add-schema`, {
+    input: Schema.Struct({
+      space: SpaceSchema,
+      name: Schema.optional(Schema.String),
+      // TODO(wittjosiah): Schema for schema?
+      schema: Schema.Any,
+    }),
+    output: Schema.Struct({
+      // TODO(wittjosiah): ObjectId.
+      id: Schema.String,
+      object: StoredSchema,
+      schema: Schema.instanceOf(EchoSchema),
+    }),
+  }) {}
+
+  export class DeleteField extends Schema.TaggedClass<DeleteField>()(`${SPACE_ACTION}/delete-field`, {
+    input: Schema.Struct({
+      view: DataType.View,
+      fieldId: Schema.String,
+      // TODO(wittjosiah): Separate fields for undo data?
+      deletionData: Schema.optional(
+        Schema.Struct({
+          field: FieldSchema,
+          // TODO(wittjosiah): This creates a type error.
+          // props: PropertySchema,
+          props: Schema.Any,
+          index: Schema.Number,
+        }),
+      ),
+    }),
+    output: Schema.Void,
+  }) {}
+
   export class OpenCreateObject extends Schema.TaggedClass<OpenCreateObject>()(`${SPACE_ACTION}/open-create-object`, {
     input: Schema.Struct({
       target: Schema.Union(SpaceSchema, DataType.Collection),
       typename: Schema.optional(Schema.String),
       navigable: Schema.optional(Schema.Boolean),
+      // TODO(wittjosiah): This is a function, is there a better way to handle this?
+      onCreateObject: Schema.optional(Schema.Any),
     }),
     output: Schema.Void,
   }) {}
@@ -233,6 +285,7 @@ export namespace SpaceAction {
       hidden: Schema.optional(Schema.Boolean),
     }),
     output: Schema.Struct({
+      // TODO(wittjosiah): ObjectId.
       id: Schema.String,
       subject: Schema.Array(Schema.String),
       object: EchoObjectSchema,