@dxos/plugin-space 0.8.4-main.bc674ce → 0.8.4-main.bcb3aa67d6

package/src/components/ObjectDetails/BaseObjectSettings.tsx

@@ -7,116 +7,134 @@ import * as Option from 'effect/Option';
 import * as Schema from 'effect/Schema';
 import React, { type PropsWithChildren, useCallback, useMemo } from 'react';
 
-import { DXN, Obj, type Ref, Tag, Type } from '@dxos/echo';
+import { DXN, Obj, Ref, Tag, Type } from '@dxos/echo';
 import { type JsonPath, splitJsonPath } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
-import { type ThemedClassName } from '@dxos/react-ui';
-import { Form, omitId } from '@dxos/react-ui-form';
+import { Form, type FormFieldMap, omitId } from '@dxos/react-ui-form';
+import { HuePicker } from '@dxos/react-ui-pickers';
+import { composable, composableProps } from '@dxos/ui-theme';
 import { isNonNullable } from '@dxos/util';
 
-import { meta as pluginMeta } from '../../meta';
+import { meta as pluginMeta } from '#meta';
+
+const createFieldMap: FormFieldMap = {
+  hue: ({ type, label, layout, getValue, onValueChange }) => {
+    const handleChange = useCallback((nextHue: string) => onValueChange(type, nextHue), [onValueChange, type]);
+    const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
+    return (
+      <>
+        {layout !== 'inline' && <Form.Label label={label} />}
+        <HuePicker value={getValue()} onChange={handleChange} onReset={handleReset} />
+      </>
+    );
+  },
+};
 
 // TODO(wittjosiah): Would be nice to control order when extending so this isn't always first/last.
 const BaseSchema = Schema.Struct({
-  tags: Schema.Array(Type.Ref(Tag.Tag)).pipe(Schema.optional),
+  tags: Schema.Array(Ref.Ref(Tag.Tag)).pipe(Schema.optional),
 });
 
-export type BaseObjectSettingsProps = ThemedClassName<
-  PropsWithChildren<{
-    object: Obj.Unknown;
-  }>
->;
-
-// TODO(wittjosiah): Reconcile w/ ObjectDetailsPanel.
-export const BaseObjectSettings = ({ classNames, children, object }: BaseObjectSettingsProps) => {
-  const db = Obj.getDatabase(object);
-
-  const formSchema = useMemo(() => {
-    return Function.pipe(
-      Obj.getSchema(object),
-      Option.fromNullable,
-      Option.map((schema) => BaseSchema.pipe(Schema.extend(schema))),
-      Option.getOrUndefined,
-    );
-  }, [object]);
-
-  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.Entity.Any, 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 }: Schema.Schema.Type<typeof formSchema>,
-      { isValid, changed }: { isValid: boolean; changed: Record<JsonPath, boolean> },
-    ) => {
-      if (!isValid) {
-        return;
-      }
+export type BaseObjectSettingsProps = PropsWithChildren<{
+  object: Obj.Unknown;
+}>;
 
-      const changedPaths = Object.keys(changed).filter((path) => changed[path as JsonPath]) as JsonPath[];
+// TODO(wittjosiah): Reconcile w/ ObjectForm.
+export const BaseObjectSettings = composable<HTMLDivElement, BaseObjectSettingsProps>(
+  ({ children, object, ...props }, forwardedRef) => {
+    const db = Obj.getDatabase(object);
 
-      // Handle tags separately using Obj.change.
-      const hasTagsChange = changedPaths.some((path) => splitJsonPath(path)[0] === 'tags');
-      if (hasTagsChange) {
+    const formSchema = useMemo(() => {
+      return Function.pipe(
+        Obj.getSchema(object),
+        Option.fromNullable,
+        Option.map((schema) => omitId(BaseSchema.pipe(Schema.extend(schema)))),
+        Option.getOrUndefined,
+      );
+    }, [object]);
+
+    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 = tags?.map((tag: Ref.Ref<Tag.Tag>) => tag.dxn.toString()) ?? [];
+          Obj.getMeta(obj).tags = [...(Obj.getMeta(obj).tags ?? []), Obj.getDXN(newObject).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],
-  );
-
-  if (!formSchema) {
-    return null;
-  }
-
-  return (
-    <Form.Root
-      schema={omitId(formSchema)}
-      values={values}
-      createOptionIcon='ph--plus--regular'
-      createOptionLabel={['add tag label', { ns: pluginMeta.id }]}
-      createInitialValuePath='label'
-      db={db}
-      onValuesChanged={handleChange}
-      onCreate={handleCreate}
-    >
-      <Form.Viewport>
-        <Form.Content classNames={classNames}>
-          <Form.FieldSet />
-          {children}
-        </Form.Content>
-      </Form.Viewport>
-    </Form.Root>
-  );
-};
+    // TODO(wittjosiah): Use FormRootProps type.
+    const handleChange = useCallback(
+      (
+        { tags, ...values }: Schema.Schema.Type<typeof formSchema>,
+        { 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 as any, parts);
+              Obj.setValue(object, parts, value);
+            }
+          });
+        }
+      },
+      [object],
+    );
+
+    if (!formSchema) {
+      return null;
+    }
+
+    const { className } = composableProps(props);
+
+    return (
+      <Form.Root
+        schema={formSchema}
+        defaultValues={values as any}
+        createTypename={Type.getTypename(Tag.Tag)}
+        createOptionIcon='ph--plus--regular'
+        createOptionLabel={['add-tag.label', { ns: pluginMeta.id }]}
+        createInitialValuePath='label'
+        createFieldMap={createFieldMap}
+        db={db}
+        onValuesChanged={handleChange}
+        onCreate={handleCreate}
+      >
+        <Form.Viewport>
+          <Form.Content classNames={className}>
+            <Form.FieldSet />
+            {children}
+          </Form.Content>
+        </Form.Viewport>
+      </Form.Root>
+    );
+  },
+);

package/src/components/ObjectDetails/ForeignKeys.tsx

@@ -7,7 +7,7 @@ import React, { useCallback } from 'react';
 import { type Key } from '@dxos/echo';
 import { IconButton, List, ListItem, useTranslation } from '@dxos/react-ui';
 
-import { meta } from '../../meta';
+import { meta } from '#meta';
 
 export type ForeignKeysProps = {
   keys: Key.ForeignKey[];
@@ -38,13 +38,19 @@ 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>
       </ListItem.Heading>
       <ListItem.Endcap>
-        <IconButton iconOnly icon='ph--x--regular' variant='ghost' label={t('delete key')} onClick={handleDelete} />
+        <IconButton
+          iconOnly
+          icon='ph--x--regular'
+          variant='ghost'
+          label={t('delete-key.button')}
+          onClick={handleDelete}
+        />
       </ListItem.Endcap>
     </ListItem.Root>
   );

package/src/components/ObjectDetails/index.ts

@@ -2,6 +2,5 @@
 // Copyright 2025 DXOS.org
 //
 
-import { ObjectDetails } from './ObjectDetails';
-
-export default ObjectDetails;
+export * from './BaseObjectSettings';
+export * from './ForeignKeys';

package/src/components/{ObjectCardStack → ObjectForm}/ObjectForm.tsx

@@ -5,27 +5,43 @@
 import * as Schema from 'effect/Schema';
 import React, { useCallback, useMemo } from 'react';
 
-import { DXN, Obj, type Ref, Tag, Type } from '@dxos/echo';
+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 { Form, type FormFieldMap, omitId } from '@dxos/react-ui-form';
+import { HuePicker } from '@dxos/react-ui-pickers';
 import { isNonNullable } from '@dxos/util';
 
-import { meta as pluginMeta } from '../../meta';
+import { meta as pluginMeta } from '#meta';
 
 export type ObjectFormProps = {
   schema: Schema.Schema.AnyNoContext;
   object: Obj.Unknown;
 };
 
+const createFieldMap: FormFieldMap = {
+  hue: ({ type, label, layout, getValue, onValueChange }) => {
+    const handleChange = useCallback((nextHue: string) => onValueChange(type, nextHue), [onValueChange, type]);
+    const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
+    return (
+      <>
+        {layout !== 'inline' && <Form.Label label={label} />}
+        <HuePicker value={getValue()} onChange={handleChange} onReset={handleReset} />
+      </>
+    );
+  },
+};
+
 export const ObjectForm = ({ object, schema }: ObjectFormProps) => {
   const db = Obj.getDatabase(object);
 
   const formSchema = useMemo(
     () =>
-      Schema.Struct({
-        tags: Schema.Array(Type.Ref(Tag.Tag)).pipe(Schema.optional),
-      }).pipe(Schema.extend(omitId(schema))),
+      omitId(
+        Schema.Struct({
+          tags: Schema.Array(Ref.Ref(Tag.Tag)).pipe(Schema.optional),
+        }).pipe(Schema.extend(schema)),
+      ),
     [schema],
   );
 
@@ -33,7 +49,7 @@ export const ObjectForm = ({ object, schema }: ObjectFormProps) => {
   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.Entity.Any, values: any) => {
+  const handleCreate = useCallback((schema: Type.AnyEntity, values: any) => {
     invariant(db);
     invariant(Type.isObjectSchema(schema));
     const newObject = db.add(Obj.make(schema, values));
@@ -78,11 +94,13 @@ export const ObjectForm = ({ object, schema }: ObjectFormProps) => {
 
   return (
     <Form.Root
-      schema={omitId(formSchema)}
-      values={values}
+      schema={formSchema}
+      defaultValues={values}
+      createTypename={Type.getTypename(Tag.Tag)}
       createOptionIcon='ph--plus--regular'
-      createOptionLabel={['add tag label', { ns: pluginMeta.id }]}
+      createOptionLabel={['add-tag.label', { ns: pluginMeta.id }]}
       createInitialValuePath='label'
+      createFieldMap={createFieldMap}
       db={db}
       onValuesChanged={handleChange}
       onCreate={handleCreate}

package/src/components/{JoinDialog → ObjectForm}/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './JoinDialog';
+export * from './ObjectForm';

package/src/components/SpacePluginSettings/SpacePluginSettings.stories.tsx

@@ -0,0 +1,34 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '../../translations';
+
+import { SpacePluginSettings } from './SpacePluginSettings';
+
+const meta = {
+  title: 'plugins/plugin-space/components/SpacePluginSettings',
+  component: SpacePluginSettings,
+  tags: ['settings'],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof SpacePluginSettings>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    settings: {
+      showHidden: false,
+    },
+  },
+};

package/src/components/SpacePluginSettings/SpacePluginSettings.tsx

@@ -0,0 +1,73 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { isPersonalSpace } from '@dxos/app-toolkit';
+import { type SettingsSurfaceProps } from '@dxos/app-toolkit/ui';
+import { type Space } from '@dxos/react-client/echo';
+import { IconButton, Input, List, ListItem, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Settings as SettingsForm } from '@dxos/react-ui-form';
+
+import { meta } from '#meta';
+import { type Settings } from '#types';
+import { getSpaceDisplayName } from '../../util';
+
+export type SpacePluginSettingsProps = SettingsSurfaceProps<
+  Settings.Settings,
+  {
+    spaces?: Space[];
+    onOpenSpaceSettings?: (space: Space) => void;
+  }
+>;
+
+export const SpacePluginSettings = ({
+  settings,
+  onSettingsChange,
+  spaces,
+  onOpenSpaceSettings,
+}: SpacePluginSettingsProps) => {
+  const { t } = useTranslation(meta.id);
+
+  return (
+    <SettingsForm.Viewport>
+      <SettingsForm.Section title={t('space-settings.label')} description={t('space-settings.description')}>
+        <SettingsForm.Item title={t('show-hidden-spaces.label')} description={t('show-hidden-spaces.description')}>
+          <Input.Switch
+            disabled={!onSettingsChange}
+            checked={settings.showHidden}
+            onCheckedChange={(checked) => onSettingsChange?.((state) => ({ ...state, showHidden: !!checked }))}
+          />
+        </SettingsForm.Item>
+
+        <SettingsForm.Panel>
+          <Input.Root>
+            <Input.Label>{t('settings.space-list.label')}</Input.Label>
+          </Input.Root>
+          <List classNames='flex flex-col gap-trim-sm'>
+            {spaces?.map((space) => (
+              <ListItem.Root key={space.id} classNames='w-full items-center'>
+                {/* TODO(burdon): Should auto center and truncate; NOTE truncate doesn't work with flex grow. */}
+                <ListItem.Heading classNames='grow truncate min-h-0!'>
+                  {toLocalizedString(
+                    getSpaceDisplayName(space, {
+                      personal: isPersonalSpace(space),
+                    }),
+                    t,
+                  )}
+                </ListItem.Heading>
+                <IconButton
+                  icon='ph--faders--regular'
+                  label={t('settings.open-settings.label')}
+                  disabled={!!onOpenSpaceSettings}
+                  onClick={() => onOpenSpaceSettings?.(space)}
+                />
+              </ListItem.Root>
+            ))}
+          </List>
+        </SettingsForm.Panel>
+      </SettingsForm.Section>
+    </SettingsForm.Viewport>
+  );
+};

package/src/components/SpacePluginSettings/index.ts

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

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/status.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-export type Status = 'saving locally' | 'downloading' | 'uploading' | 'offline persisted' | 'remote synced';
+export type Status = 'saving-locally' | 'downloading' | 'uploading' | 'offline-persisted' | 'remote-synced';
 
 export const getStatus = ({
   offline,
@@ -16,29 +16,29 @@ export const getStatus = ({
   needsToDownload: boolean;
 }): Status => {
   if (!saved) {
-    return 'saving locally';
+    return 'saving-locally';
   } else if (!offline && needsToDownload) {
     return 'downloading';
   } else if (!offline && needsToUpload) {
     return 'uploading';
   } else if (offline && !needsToUpload && !needsToDownload) {
-    return 'offline persisted';
+    return 'offline-persisted';
   } else {
-    return 'remote synced';
+    return 'remote-synced';
   }
 };
 
 export const getIcon = (status: Status) => {
   switch (status) {
-    case 'saving locally':
+    case 'saving-locally':
       return 'ph--download--regular';
     case 'downloading':
       return 'ph--cloud-arrow-down--regular';
     case 'uploading':
       return 'ph--cloud-arrow-up--regular';
-    case 'offline persisted':
+    case 'offline-persisted':
       return 'ph--check-circle--regular';
-    case 'remote synced':
+    case 'remote-synced':
       return 'ph--cloud-check--regular';
   }
 };

package/src/components/index.ts

@@ -2,24 +2,12 @@
 // Copyright 2023 DXOS.org
 //
 
-import { lazy } from 'react';
+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 './SchemaContainer';
-export * from './SpacePluginSettings';
-export * from './SpacePresence';
-export * from './SpaceRenamePopover';
-export * from './SpaceSettings';
+export * from './ObjectDetails';
+export * from './ObjectForm';
 export * from './SyncStatus';
-export * from './ViewEditor';
 
-export const CollectionArticle = lazy(() => import('./CollectionArticle'));
-export const ObjectCardStack = lazy(() => import('./ObjectCardStack'));
-export const ObjectDetails = lazy(() => import('./ObjectDetails'));
-export const RecordArticle = lazy(() => import('./RecordArticle'));
+export const SpacePluginSettings: ComponentType<any> = lazy(() => import('./SpacePluginSettings'));

package/src/constants.ts

@@ -2,10 +2,10 @@
 // Copyright 2025 DXOS.org
 //
 
-import { meta } from './meta';
+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`;
+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`;