@dxos/plugin-space 0.8.1 → 0.8.2-main.2f9c567

package/src/components/SpaceSettings/SpaceSettingsContainer.tsx

@@ -2,62 +2,182 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useCallback, useMemo } from 'react';
+import { pipe, Schema } from 'effect';
+import React, { type ChangeEvent, useCallback, useMemo, useState } 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 { chain, createIntent, LayoutAction, 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 { SpaceState, type Space } from '@dxos/react-client/echo';
+import { Button, Input, useMulticastObservable, useTranslation } from '@dxos/react-ui';
+import {
+  Form,
+  type InputComponent,
+  ControlItem,
+  ControlItemInput,
+  ControlSection,
+  ControlPage,
+} from '@dxos/react-ui-form';
+import { HuePicker, IconPicker } from '@dxos/react-ui-pickers';
 import { StackItem } from '@dxos/react-ui-stack';
-import { byPosition } from '@dxos/util';
 
-import { SpaceCapabilities } from '../../capabilities';
 import { SPACE_PLUGIN } from '../../meta';
+import { SpaceAction, SpaceForm } from '../../types';
 
-export const SPACE_SETTINGS_DIALOG = `${SPACE_PLUGIN}/SpaceSettingsDialog`;
-
-export type SpaceSettingsTab = 'members' | 'settings';
+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(SPACE_PLUGIN);
-  const state = useCapability(SpaceCapabilities.MutableState);
-  const items = useCapabilities(SpaceCapabilities.SettingsSection).toSorted(byPosition);
-  const data = useMemo(() => ({ subject: space }), [space]);
+  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 handleOpenSectionChange = useCallback(
-    (sections: string[]) => {
-      state.spaceSettingsOpenSections.splice(0, state.spaceSettingsOpenSections.length, ...sections);
+  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(
+          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 }));
+      }
     },
-    [state],
+    [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((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>
+        );
+      },
+      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 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 classNames='block overflow-y-auto pli-2'>
+      <ControlPage>
+        <ControlSection
+          title={t('space properties settings verbose label', { ns: SPACE_PLUGIN })}
+          description={t('space properties settings description', { ns: SPACE_PLUGIN })}
+        >
+          <Form
+            schema={FormSchema}
+            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'
+          />
+        </ControlSection>
+      </ControlPage>
     </StackItem.Content>
   );
 };

package/src/components/SpaceSettings/index.ts

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

package/src/components/SyncStatus/InlineSyncStatus.tsx

@@ -5,21 +5,19 @@
 import React, { useEffect, useState } from 'react';
 
 import { useAppGraph } from '@dxos/app-framework';
-import { QueryEdgeStatusResponse } from '@dxos/protocols/proto/dxos/client/services';
+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 } from '@dxos/react-client/echo';
+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 { useSpaceSyncState } from './sync-state';
 import { usePath } from '../../hooks';
 import { SPACE_PLUGIN } from '../../meta';
 
-const useEdgeStatus = (): QueryEdgeStatusResponse.EdgeStatus => {
-  const [status, setStatus] = useState(QueryEdgeStatusResponse.EdgeStatus.NOT_CONNECTED);
+const useEdgeStatus = (): EdgeStatus => {
+  const [status, setStatus] = useState(EdgeStatus.NOT_CONNECTED);
   const client = useClient();
-
   useEffect(() => {
     client.services.services.EdgeAgentService?.queryEdgeStatus().subscribe(({ status }) => {
       setStatus(status);
@@ -44,7 +42,7 @@ export const InlineSyncStatus = ({ space, open }: { space: Space; open?: boolean
   const path = usePath(graph, startOfAttention);
   const containsAttended = !open && !isAttended && id && path ? path.includes(id) : false;
 
-  const connectedToEdge = useEdgeStatus() === QueryEdgeStatusResponse.EdgeStatus.CONNECTED;
+  const connectedToEdge = useEdgeStatus() === EdgeStatus.CONNECTED;
   // TODO(wittjosiah): This is not reactive.
   const edgeSyncEnabled = space.internal.data.edgeReplication === EdgeReplicationSetting.ENABLED;
   const syncState = useSpaceSyncState(space);

package/src/components/SyncStatus/SyncStatus.tsx

@@ -2,22 +2,19 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { StatusBar } from '@dxos/plugin-status-bar';
 import { useClient } from '@dxos/react-client';
-import { type SpaceId } from '@dxos/react-client/echo';
-import { Icon, Input, Popover, useTranslation } from '@dxos/react-ui';
-import { type ThemedClassName } from '@dxos/react-ui';
-import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
-import { mx } from '@dxos/react-ui-theme';
+import { getSyncSummary, type SpaceSyncStateMap, useSyncState } from '@dxos/react-client/echo';
+import { Icon, useTranslation } from '@dxos/react-ui';
 
-import { SpaceRowContainer, SYNC_STALLED_TIMEOUT } from './Space';
 import { createClientSaveTracker } from './save-tracker';
 import { getIcon, getStatus } from './status';
-import { type PeerSyncState, type SpaceSyncStateMap, getSyncSummary, useSyncState } from './sync-state';
 import { SPACE_PLUGIN } from '../../meta';
 
+const SYNC_STALLED_TIMEOUT = 5_000;
+
 export const SyncStatus = () => {
   const client = useClient();
   const state = useSyncState();
@@ -57,65 +54,5 @@ export const SyncStatusIndicator = ({ state, saved }: { state: SpaceSyncStateMap
   const title = t(`${status} label`);
   const icon = <Icon icon={getIcon(status)} size={4} classNames={classNames} />;
 
-  if (offline) {
-    return <StatusBar.Item title={title}>{icon}</StatusBar.Item>;
-  } else {
-    return (
-      <Popover.Root>
-        <Popover.Trigger asChild>
-          <StatusBar.Button title={title}>{icon}</StatusBar.Button>
-        </Popover.Trigger>
-        <Popover.Portal>
-          <Popover.Content>
-            <SyncStatusDetail state={state} summary={summary} debug={false} />
-            <Popover.Arrow />
-          </Popover.Content>
-        </Popover.Portal>
-      </Popover.Root>
-    );
-  }
-};
-
-export type SyncStatusDetailProps = ThemedClassName<{
-  state: SpaceSyncStateMap;
-  summary: PeerSyncState;
-  debug?: boolean;
-}>;
-
-// TODO(wittjosiah): This currently does not show `differentDocuments` at all.
-export const SyncStatusDetail = ({ classNames, state, summary, debug }: SyncStatusDetailProps) => {
-  const [showAll, setShowAll] = useState(false);
-  const { t } = useTranslation(SPACE_PLUGIN);
-  const entries = Object.entries(state)
-    .filter(([_, value]) => showAll || value.missingOnLocal + value.missingOnRemote > 0)
-    .toSorted(([a], [b]) => (a < b ? -1 : a > b ? 1 : 0));
-
-  const handleCheckedChange = useCallback((state: boolean) => setShowAll(state), [setShowAll]);
-
-  // TODO(burdon): Normalize to max document count?
-  return (
-    <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'>
-          <Input.Root>
-            <Input.Label classNames='text-xs'>{t('show all label')}</Input.Label>
-            <Input.Checkbox checked={showAll} onCheckedChange={handleCheckedChange} />
-          </Input.Root>
-        </div>
-      </div>
-      <div className='flex flex-col gap-2'>
-        {entries.length === 0 && (
-          <div role='none' className='flex justify-center'>
-            {/* TODO(wittjosiah): This text should be updated once status includes different documents. */}
-            {t('no sync status label')}
-          </div>
-        )}
-        {entries.map(([spaceId, state]) => (
-          <SpaceRowContainer key={spaceId} spaceId={spaceId as SpaceId} state={state} />
-        ))}
-      </div>
-      {debug && <SyntaxHighlighter language='json'>{JSON.stringify(summary, null, 2)}</SyntaxHighlighter>}
-    </div>
-  );
+  return <StatusBar.Item title={title}>{icon}</StatusBar.Item>;
 };

package/src/components/index.ts

@@ -9,12 +9,12 @@ export * from './CollectionSection';
 export * from './JoinDialog';
 export * from './MembersContainer';
 export * from './MenuFooter';
-export * from './ObjectSettingsContainer';
+export * from './ObjectSettings';
 export * from './PersistenceStatus';
 export * from './PopoverAddSpace';
 export * from './PopoverRenameObject';
 export * from './PopoverRenameSpace';
-export * from './ShareSpaceButton';
+export * from './SchemaContainer';
 export * from './SpacePresence';
 export * from './SpacePluginSettings';
 export * from './SpaceSettings';

package/src/hooks/index.ts

@@ -2,4 +2,5 @@
 // Copyright 2024 DXOS.org
 //
 
+export * from './useInputSurfaceLookup';
 export * from './usePath';

package/src/hooks/useInputSurfaceLookup.tsx

@@ -0,0 +1,31 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Schema } from 'effect';
+import React, { useCallback } from 'react';
+
+import { usePluginManager, isSurfaceAvailable, Surface } from '@dxos/app-framework';
+import { type InputProps } from '@dxos/react-ui-form';
+
+// TODO(ZaymonFC): Move this if you find yourself needing it elsewhere.
+/**
+ * Creates a surface input component based on plugin context.
+ * @param baseData Additional data that will be merged with form data and passed to the surface.
+ * This allows providing more context to the surface than what's available from the form itself.
+ */
+export const useInputSurfaceLookup = (baseData?: Record<string, any>) => {
+  const pluginManager = usePluginManager();
+
+  return useCallback(
+    ({ prop, schema, inputProps }: { prop: string; schema: Schema.Schema<any>; inputProps: InputProps }) => {
+      const composedData = { prop, schema, ...baseData };
+      if (!isSurfaceAvailable(pluginManager.context, { role: 'form-input', data: composedData })) {
+        return undefined;
+      }
+
+      return <Surface role='form-input' data={composedData} {...inputProps} />;
+    },
+    [pluginManager, baseData],
+  );
+};

package/src/translations.ts

@@ -34,7 +34,7 @@ export default [
         'export data label': 'Export data',
         'import data label': 'Import data',
         'migrate space label': 'Migrate space',
-        'share space': 'Share space',
+        'share space label': 'Share current space',
         'save space to disk label': 'Save to disk',
         'load space from disk label': 'Load from disk',
         'confirm restore title': 'Overwrite files in this space?',
@@ -43,7 +43,7 @@ export default [
         'object placeholder': 'Type a title here…',
         'personal space label': 'Personal Space',
         'spaces label': 'Spaces',
-        'show hidden spaces label': 'Show closed spaces',
+        'show hidden spaces label': 'Show archived spaces',
         'save files to directory label': 'Save files to disk',
         'select path label': 'Select path',
         'rename collection label': 'Rename collection',
@@ -67,7 +67,6 @@ export default [
           'The requested object has not been found yet. Ensure there are enough peers online in the space with an updated copy.',
         'create object in space label': 'Add to space',
         'create object in collection label': 'Add to collection',
-        'share space label': 'Share',
         'space members label': 'Space members',
         'active space members heading': 'Online ({{count}})',
         'inactive space members heading': 'Offline ({{count}})',
@@ -118,6 +117,7 @@ export default [
         'advanced settings label': 'Advanced',
         'foreign keys': 'Foreign Keys',
         'add key': 'Add Key',
+        'open space settings label': 'Open',
 
         'members panel label': 'Members',
         'members verbose label': 'Manage space members',
@@ -126,16 +126,29 @@ export default [
         '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.',
+        'locked space description': 'This space is locked, unlock it to invite new members.',
+        'space locked label': 'Lock space',
+        'space locked description': 'Locking a space prevents new members from being invited to the space.',
 
         'settings panel label': 'Space Settings',
-        'open space settings label': 'Space Settings',
-        'space settings properties label': 'General',
+        'open current space settings label': 'Open current space settings',
+        'space settings properties label': 'General settings',
+        'space properties settings verbose label': 'Manage space properties',
+        'space properties settings description': 'You can configure how this space is displayed in the app here.',
+        'space settings schema label': 'Schema',
+        'schema verbose label': 'Manage schema',
+        'schema description': 'You can manage all of the schema stored within this space here.',
+        'no schemas found message': 'No schemas found',
         '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.",
+        'archive space description':
+          'Archiving a space will remove it from the sidebar and stop replicating updates, but will not delete the data. You can unarchive it by enabling archived spaces in the app settings.',
+        'archive space label': 'Archive',
+        'unarchive space label': 'Unarchive',
       },
     },
   },

package/src/types/collection.ts

@@ -2,15 +2,17 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Expando, Ref, S, TypedObject } from '@dxos/echo-schema';
+import { Schema } from 'effect';
+
+import { Expando, Ref, TypedObject } from '@dxos/echo-schema';
 
 export class CollectionType extends TypedObject({ typename: 'dxos.org/type/Collection', version: '0.1.0' })({
-  name: S.optional(S.String),
-  objects: S.mutable(S.Array(Ref(Expando))),
+  name: Schema.optional(Schema.String),
+  objects: Schema.mutable(Schema.Array(Ref(Expando))),
   // Key is schema typename and value is reference to a view object of the associated schema.
   // Having collection reference the views rather than vice versa ensures that the state converges to a single view per key (i.e. type).
   // This also leaves open a future where this key could be changed to allow for multiple stack views per section.
   // TODO(wittjosiah): Any way to make this more type safe?
   // TODO(wittjosiah): Should the views be separate objects or just be schemas for view data in this record?
-  views: S.mutable(S.Record({ key: S.String, value: Ref(Expando) })),
+  views: Schema.mutable(Schema.Record({ key: Schema.String, value: Ref(Expando) })),
 }) {}

package/src/types/thread.ts

@@ -2,23 +2,29 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Expando, Ref, S, TypedObject } from '@dxos/echo-schema';
-import { MessageType } from '@dxos/schema';
+import { Schema } from 'effect';
+
+import { Expando, Ref, TypedObject } from '@dxos/echo-schema';
+import { DataType } 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.
 
-export const ThreadStatus = S.Union(S.Literal('staged'), S.Literal('active'), S.Literal('resolved'));
+export const ThreadStatus = Schema.Union(
+  Schema.Literal('staged'),
+  Schema.Literal('active'),
+  Schema.Literal('resolved'),
+);
 
 export class ThreadType extends TypedObject({ typename: 'dxos.org/type/Thread', version: '0.1.0' })({
-  name: S.optional(S.String),
+  name: Schema.optional(Schema.String),
   /** AM cursor-range: 'from:to'. */
-  anchor: S.optional(S.String),
-  status: S.optional(ThreadStatus),
-  messages: S.mutable(S.Array(Ref(MessageType))),
+  anchor: Schema.optional(Schema.String),
+  status: Schema.optional(ThreadStatus),
+  messages: Schema.mutable(Schema.Array(Ref(DataType.Message))),
 }) {}
 
 export class ChannelType extends TypedObject({ typename: 'dxos.org/type/Channel', version: '0.1.0' })({
-  name: S.optional(S.String),
+  name: Schema.optional(Schema.String),
   queue: Ref(Expando),
 }) {}