@dxos/plugin-space 0.8.4-main.406dc2a → 0.8.4-main.4a85c3132b

package/src/components/ObjectSettings/BaseObjectSettings.tsx

@@ -1,117 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import * as Function from 'effect/Function';
-import * as Option from 'effect/Option';
-import * as Schema from 'effect/Schema';
-import React, { type PropsWithChildren, useCallback, useMemo } from 'react';
-
-import { DXN, Obj, Tag, Type } from '@dxos/echo';
-import { DescriptionAnnotation } from '@dxos/echo/internal';
-import { invariant } from '@dxos/invariant';
-import { getSpace } from '@dxos/react-client/echo';
-import { type ThemedClassName } from '@dxos/react-ui';
-import { Form, useRefQueryLookupHandler } from '@dxos/react-ui-form';
-
-import { meta as pluginMeta } from '../../meta';
-
-const BaseSchema = Schema.Struct({
-  label: Schema.String.pipe(Schema.optional),
-  // TODO(wittjosiah): Support multiple tags.
-  tag: Type.Ref(Tag.Tag).pipe(Schema.optional),
-});
-
-// TODO(wittjosiah): Use extend but need to be able to control order of fields.
-const BaseSchemaWithDescription = Schema.Struct({
-  label: Schema.String.pipe(Schema.optional),
-  description: Schema.String.pipe(Schema.optional),
-  tag: Type.Ref(Tag.Tag).pipe(Schema.optional),
-});
-
-// TODO(wittjosiah): Better way to support validation of object schemas?
-const TagSchema = Tag.Tag.pipe(Schema.omit('id'));
-
-export type BaseObjectSettingsProps = ThemedClassName<
-  PropsWithChildren<{
-    object: Obj.Any;
-  }>
->;
-
-// TODO(wittjosiah): Reconcile w/ ObjectDetailsPanel.
-export const BaseObjectSettings = ({ classNames, children, object }: BaseObjectSettingsProps) => {
-  const space = getSpace(object);
-  const handleRefQueryLookup = useRefQueryLookupHandler({ space });
-
-  const formSchema = useMemo(() => {
-    const description = Function.pipe(
-      Obj.getSchema(object),
-      Option.fromNullable,
-      Option.flatMap((schema) => DescriptionAnnotation.get(schema)),
-      Option.getOrUndefined,
-    );
-    if (description) {
-      return BaseSchemaWithDescription;
-    } else {
-      return BaseSchema;
-    }
-  }, [object]);
-
-  const meta = Obj.getMeta(object);
-  const tag = meta.tags?.[0] ? space?.db.ref(DXN.parse(meta.tags?.[0])) : undefined;
-  const values = useMemo(
-    () => ({
-      label: Obj.getLabel(object),
-      description: Obj.getDescription(object),
-      tag,
-    }),
-    [object, tag],
-  );
-
-  const handleCreateTag = useCallback((values: Schema.Schema.Type<typeof TagSchema>) => {
-    invariant(space);
-    const tag = space.db.add(Tag.make(values));
-    const meta = Obj.getMeta(object);
-    meta.tags = [Obj.getDXN(tag).toString()];
-  }, []);
-
-  const handleSave = useCallback(
-    (values: Schema.Schema.Type<typeof BaseSchemaWithDescription>) => {
-      if (values.label !== undefined && Obj.getLabel(object) !== values.label) {
-        Obj.setLabel(object, values.label);
-      }
-
-      if (values.description !== undefined && Obj.getDescription(object) !== values.description) {
-        Obj.setDescription(object, values.description);
-      }
-
-      const meta = Obj.getMeta(object);
-      const currentTag = meta.tags?.[0];
-      if (values.tag !== undefined && currentTag !== values.tag?.dxn.toString()) {
-        meta.tags = [values.tag.dxn.toString()];
-      }
-    },
-    [object],
-  );
-
-  // TODO(wittjosiah): The schema for this form should be based on the schema of the object.
-  //  Perhaps with fields filtered down to only those with a specific settings annotation.
-  return (
-    <>
-      <Form
-        outerSpacing={false}
-        autoSave
-        schema={formSchema}
-        values={values}
-        createSchema={TagSchema}
-        createOptionIcon='ph--plus--regular'
-        createOptionLabel={['add tag label', { ns: pluginMeta.id }]}
-        createInitialValuePath='label'
-        onCreate={handleCreateTag}
-        onSave={handleSave}
-        onQueryRefOptions={handleRefQueryLookup}
-      />
-      {children}
-    </>
-  );
-};

package/src/components/ObjectSettings/ObjectSettingsContainer.tsx

@@ -1,37 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useMemo } from 'react';
-
-import { Surface } from '@dxos/app-framework';
-import { type Obj } from '@dxos/echo';
-import { Clipboard, Toolbar } from '@dxos/react-ui';
-import { StackItem } from '@dxos/react-ui-stack';
-
-import { BaseObjectSettings } from './BaseObjectSettings';
-
-export type ObjectSettingsContainerProps = {
-  object: Obj.Any;
-  role: string;
-};
-
-export const ObjectSettingsContainer = ({ object, role }: ObjectSettingsContainerProps) => {
-  const data = useMemo(() => ({ subject: object }), [object]);
-
-  return (
-    <Clipboard.Provider>
-      <StackItem.Content toolbar>
-        <Toolbar.Root></Toolbar.Root>
-        <div role='none' className='overflow-y-auto pli-cardSpacingInline plb-cardSpacingBlock'>
-          <BaseObjectSettings object={object}>
-            <Surface role='base-object-settings' data={data} />
-          </BaseObjectSettings>
-          <Surface role='object-settings' data={data} />
-          {/* TODO(wittjosiah): Remove? */}
-          {/* <AdvancedObjectSettings object={object} /> */}
-        </div>
-      </StackItem.Content>
-    </Clipboard.Provider>
-  );
-};

package/src/components/ObjectSettings/index.ts

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

package/src/components/PersistenceStatus.tsx

@@ -1,83 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { useEffect, useState } from 'react';
-
-import { debounce } from '@dxos/async';
-import { type EchoDatabase } from '@dxos/react-client/echo';
-import { Icon, Tooltip, useTranslation } from '@dxos/react-ui';
-import { mx, staticPlaceholderText, warningText } from '@dxos/react-ui-theme';
-
-import { meta } from '../meta';
-
-enum Status {
-  PERSISTED_LOCALLY = 0,
-  PENDING = 1,
-  ERROR = 2,
-}
-
-// TODO(zan): This now has no usages. Remove it?
-export const PersistenceStatus = ({ db }: { db: EchoDatabase }) => {
-  const { t } = useTranslation(meta.id);
-  const [displayMessage, setDisplayMessage] = useState(false);
-  const [status, naturalSetStatus] = useState<Status>(Status.PERSISTED_LOCALLY);
-  const [prevStatus, setPrevStatus] = useState<Status>(Status.PERSISTED_LOCALLY);
-  const _setStatus = debounce(naturalSetStatus, 500);
-
-  // TODO(dmaretskyi): Fix this when we have save status for automerge.
-  // useEffect(() => {
-  //   return db.pendingBatch.on(({ duration, error }) => {
-  //     if (error) {
-  //       setStatus(Status.ERROR);
-  //     } else if (duration === undefined) {
-  //       setStatus(Status.PENDING);
-  //     } else {
-  //       setStatus(Status.PERSISTED_LOCALLY);
-  //     }
-  //   });
-  // }, [db]);
-
-  useEffect(() => {
-    // If this is changed outside the effect it's batched with setStatus and the following condition will never be true.
-    setPrevStatus(status);
-
-    if (prevStatus !== status && status === Status.PERSISTED_LOCALLY) {
-      setDisplayMessage(true);
-      const timeout = setTimeout(() => setDisplayMessage(false), 5000);
-      return () => clearTimeout(timeout);
-    }
-  }, [status]); // `prevStatus` omitted from dependency array to prevent timeout from being reset.
-
-  switch (status) {
-    case Status.ERROR:
-      return (
-        <div className='flex items-center'>
-          <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'>
-          <Icon icon='ph--arrows-counter-clockwise--regular' size={4} classNames='me-1' />
-          <span className={mx('text-sm', staticPlaceholderText)}>{t('persistence pending label')}</span>
-        </div>
-      );
-    case Status.PERSISTED_LOCALLY:
-    default:
-      return (
-        <Tooltip.Trigger
-          delayDuration={400}
-          role='status'
-          content={t('persisted locally message')}
-          className='flex items-center'
-        >
-          <Icon icon='ph--check-circle--regular' size={4} classNames='me-1' />
-          {displayMessage && (
-            <span className={mx('text-sm', staticPlaceholderText)}>{t('persisted locally label')}</span>
-          )}
-        </Tooltip.Trigger>
-      );
-  }
-};

package/src/components/RecordMain.tsx

@@ -1,87 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { useCallback, useMemo } from 'react';
-
-import { Surface } from '@dxos/app-framework';
-import { Filter, Obj, Ref, Relation } from '@dxos/echo';
-import { type JsonPath, setValue } from '@dxos/echo/internal';
-import { invariant } from '@dxos/invariant';
-import { getSpace, useQuery } from '@dxos/react-client/echo';
-import { useTranslation } from '@dxos/react-ui';
-import { Form, useRefQueryLookupHandler } from '@dxos/react-ui-form';
-import { Masonry } from '@dxos/react-ui-masonry';
-import { isNonNullable } from '@dxos/util';
-
-import { meta } from '../meta';
-
-const getReferencesFromObject = (obj: Obj.Any): Ref.Any[] => {
-  return Object.getOwnPropertyNames(obj)
-    .map((name) => obj[name as keyof Obj.Any])
-    .filter((value) => Ref.isRef(value)) as Ref.Any[];
-};
-
-const Card = ({ data: subject }: { data: Obj.Any }) => {
-  const data = useMemo(() => ({ subject }), [subject]);
-  return <Surface role='card' data={data} limit={1} />;
-};
-
-export const RecordMain = ({ record }: { record: Obj.Any }) => {
-  const { t } = useTranslation(meta.id);
-  const space = getSpace(record);
-  const schema = Obj.getSchema(record);
-
-  // TODO(wittjosiah): This is a hack. ECHO needs to have a back reference index to easily query for related objects.
-  const objects = useQuery(space, Filter.everything());
-  const related = useMemo(() => {
-    const relations = objects.filter((obj) => Relation.isRelation(obj));
-    const targetObjects = relations
-      .filter((relation) => Relation.getSource(relation) === record)
-      .map((relation) => Relation.getTarget(relation));
-    const sourceObjects = relations
-      .filter((relation) => Relation.getTarget(relation) === record)
-      .map((relation) => Relation.getSource(relation));
-
-    const references = getReferencesFromObject(record);
-    const referencedObjects = references.map((ref) => ref.target).filter(isNonNullable);
-    const referencingObjects = objects.filter((obj) => {
-      const refs = getReferencesFromObject(obj);
-      return refs.some((ref) => ref.target === record);
-    });
-
-    return [...referencedObjects, ...referencingObjects, ...targetObjects, ...sourceObjects];
-  }, [record, objects]);
-
-  const handleRefQueryLookup = useRefQueryLookupHandler({ space });
-
-  const handleSave = useCallback(
-    (values: any, { changed }: { changed: Record<JsonPath, boolean> }) => {
-      const id = values.id;
-      invariant(typeof id === 'string');
-
-      const changedPaths = Object.keys(changed).filter((path) => changed[path as JsonPath]) as JsonPath[];
-      for (const path of changedPaths) {
-        const value = values[path];
-        setValue(record, path, value);
-      }
-    },
-    [record],
-  );
-
-  if (!schema) {
-    return null;
-  }
-
-  return (
-    <div role='none' className='container-max-width flex flex-col p-2 gap-1 overflow-y-auto'>
-      <div key={record.id} className='border border-separator rounded'>
-        <Form autoSave schema={schema} values={record} onSave={handleSave} onQueryRefOptions={handleRefQueryLookup} />
-      </div>
-      <h2>{t('related objects label')}</h2>
-      <Masonry.Root<Obj.Any> items={related} render={Card} intrinsicHeight />
-    </div>
-  );
-};
-
-export default RecordMain;

package/src/components/SchemaContainer.tsx

@@ -1,59 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useEffect, useState } from 'react';
-
-import { type Type } from '@dxos/echo';
-import { type Space } from '@dxos/react-client/echo';
-import { useTranslation } from '@dxos/react-ui';
-import { ControlPage, ControlSection, controlItemClasses } from '@dxos/react-ui-form';
-import { StackItem } from '@dxos/react-ui-stack';
-
-import { meta } from '../meta';
-
-type SchemaPanelProps = { space: Space };
-
-// TODO(ZaymonFC):
-//   - Support deleting Schema. This should tie in to some sort of
-//     'DangerZone™️' / 'Are you really sure?' / 'this might have consequences' component.
-
-/**
- * Subscribe to and retrieve all schemas from a space's schema registry.
- */
-export const useQuerySpaceSchemas = (space: Space): Type.Schema[] => {
-  const [schemas, setSchemas] = useState<Type.Schema[]>([]);
-
-  useEffect(() => {
-    const query = space.db.schemaRegistry.query();
-    const initialResults = query.runSync();
-    setSchemas(initialResults);
-
-    const unsubscribe = query.subscribe(() => setSchemas(query.results));
-    return () => unsubscribe();
-  }, [space]);
-
-  return schemas;
-};
-
-export const SchemaContainer = ({ space }: SchemaPanelProps) => {
-  const { t } = useTranslation(meta.id);
-  const schemas = useQuerySpaceSchemas(space);
-
-  return (
-    <StackItem.Content scrollable>
-      <ControlPage>
-        <ControlSection title={t('schema verbose label')} description={t('schema description')}>
-          <div role='none' className={controlItemClasses}>
-            {schemas.length === 0 && <div className='text-center plb-4'>{t('no schemas found message')}</div>}
-            {schemas.map((schema) => (
-              <div key={schema.id}>
-                <div>{schema.typename}</div>
-              </div>
-            ))}
-          </div>
-        </ControlSection>
-      </ControlPage>
-    </StackItem.Content>
-  );
-};

package/src/components/SpacePluginSettings.tsx

@@ -1,52 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React from 'react';
-
-import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
-import { useClient } from '@dxos/react-client';
-import { useSpaces } from '@dxos/react-client/echo';
-import { IconButton, Input, List, ListItem, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { ControlGroup, ControlItemInput, ControlPage, ControlSection, controlItemClasses } from '@dxos/react-ui-form';
-
-import { meta } from '../meta';
-import { SpaceAction, type SpaceSettingsProps } from '../types';
-import { getSpaceDisplayName } from '../util';
-
-export const SpacePluginSettings = ({ settings }: { settings: SpaceSettingsProps }) => {
-  const { t } = useTranslation(meta.id);
-  const client = useClient();
-  const spaces = useSpaces({ all: settings.showHidden });
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-
-  return (
-    <ControlPage>
-      <ControlSection title={t('space settings label')} description={t('space settings description')}>
-        <ControlGroup>
-          <ControlItemInput title={t('show hidden spaces label')}>
-            <Input.Switch
-              checked={settings.showHidden}
-              onCheckedChange={(checked) => (settings.showHidden = !!checked)}
-            />
-          </ControlItemInput>
-        </ControlGroup>
-        <List classNames={[controlItemClasses, 'flex flex-col gap-trimSm']}>
-          {spaces.map((space) => (
-            <ListItem.Root key={space.id} classNames='is-full items-center'>
-              {/* TODO(burdon): Should auto center and truncate; NOTE truncate doesn't work with flex grow. */}
-              <ListItem.Heading classNames='grow truncate !min-bs-0'>
-                {toLocalizedString(getSpaceDisplayName(space, { personal: space === client.spaces.default }), t)}
-              </ListItem.Heading>
-              <IconButton
-                icon='ph--faders--regular'
-                onClick={() => dispatch(createIntent(SpaceAction.OpenSettings, { space }))}
-                label={t('open space settings label')}
-              />
-            </ListItem.Root>
-          ))}
-        </List>
-      </ControlSection>
-    </ControlPage>
-  );
-};

package/src/components/SpaceSettings/SpaceSettingsContainer.tsx

@@ -1,185 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import * as Function from 'effect/Function';
-import * as Schema from 'effect/Schema';
-import React, { type ChangeEvent, useCallback, useMemo, useState } from 'react';
-
-import { LayoutAction, chain, createIntent, useIntentDispatcher } from '@dxos/app-framework';
-import { log } from '@dxos/log';
-import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
-import { useClient } from '@dxos/react-client';
-import { type Space, SpaceState } from '@dxos/react-client/echo';
-import { Button, Input, useMulticastObservable, useTranslation } from '@dxos/react-ui';
-import {
-  ControlItem,
-  ControlItemInput,
-  ControlPage,
-  ControlSection,
-  Form,
-  type InputComponent,
-} from '@dxos/react-ui-form';
-import { HuePicker, IconPicker } from '@dxos/react-ui-pickers';
-import { StackItem } from '@dxos/react-ui-stack';
-
-import { meta } from '../../meta';
-import { SpaceAction, SpaceForm } from '../../types';
-
-const FormSchema = SpaceForm.pipe(
-  Schema.extend(Schema.Struct({ archived: Schema.Boolean.annotations({ title: 'Archive space' }) })),
-);
-
-export type SpaceSettingsContainerProps = {
-  space: Space;
-};
-
-// TODO(wittjosiah): Handle space migrations here?
-export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) => {
-  const { t } = useTranslation(meta.id);
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const client = useClient();
-  const archived = useMulticastObservable(space.state) === SpaceState.SPACE_INACTIVE;
-  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: Schema.Schema.Type<typeof FormSchema>) => {
-      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;
-      }
-      if (properties.archived && !archived) {
-        void dispatch(
-          Function.pipe(
-            createIntent(SpaceAction.Close, { space }),
-            chain(LayoutAction.SwitchWorkspace, { part: 'workspace', subject: client.spaces.default.id }),
-          ),
-        );
-      } else if (!properties.archived && archived) {
-        void dispatch(createIntent(SpaceAction.Open, { space }));
-      }
-    },
-    [space, toggleEdgeReplication, archived],
-  );
-
-  const values = useMemo(
-    () => ({
-      name: space.properties.name,
-      icon: space.properties.icon,
-      hue: space.properties.hue,
-      edgeReplication,
-      archived,
-    }),
-    [space.properties.name, space.properties.icon, space.properties.hue, edgeReplication, archived],
-  );
-
-  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((icon: string) => onValueChange(type, icon), [onValueChange, type]);
-        const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
-        return (
-          <ControlItem title={label} description={t('icon description')}>
-            <IconPicker
-              value={getValue()}
-              onChange={handleChange}
-              onReset={handleReset}
-              classNames='justify-self-end'
-              iconSize={5}
-            />
-          </ControlItem>
-        );
-      },
-      hue: ({ type, label, getValue, onValueChange }) => {
-        const handleChange = useCallback((nextHue: string) => onValueChange(type, nextHue), [onValueChange, type]);
-        const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
-        return (
-          <ControlItem title={label} description={t('hue description')}>
-            <HuePicker
-              value={getValue()}
-              onChange={handleChange}
-              onReset={handleReset}
-              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>
-        );
-      },
-      archived: ({ type, label, getValue, onValueChange }) => {
-        const handleChange = useCallback(() => onValueChange(type, !getValue()), [onValueChange, type, getValue]);
-        return (
-          <ControlItemInput title={label} description={t('archive space description')}>
-            <Button disabled={space === client.spaces.default} onClick={handleChange}>
-              {getValue() ? t('unarchive space label') : t('archive space label')}
-            </Button>
-          </ControlItemInput>
-        );
-      },
-    }),
-    [t, space],
-  );
-
-  return (
-    <StackItem.Content scrollable>
-      <ControlPage>
-        <ControlSection
-          title={t('space properties settings verbose label', { ns: meta.id })}
-          description={t('space properties settings description', { ns: meta.id })}
-        >
-          <Form
-            schema={FormSchema}
-            values={values}
-            autoSave
-            onSave={handleSave}
-            Custom={customElements}
-            outerSpacing={false}
-            classNames='container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content]'
-          />
-        </ControlSection>
-      </ControlPage>
-    </StackItem.Content>
-  );
-};

package/src/components/SpaceSettings/index.ts

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