@dxos/plugin-space 0.8.1 → 0.8.2-main.12df754

package/src/components/SpaceSettings/SpaceSettingsContainer.tsx

@@ -2,62 +2,180 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useCallback, useMemo } from 'react';
+import { pipe, Schema as S } 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(S.extend(S.Struct({ archived: S.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: S.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,11 +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 './SchemaContainer';
 export * from './ShareSpaceButton';
 export * from './SpacePresence';
 export * from './SpacePluginSettings';

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 as S } 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: S.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/types.ts

@@ -13,6 +13,7 @@ import { CollectionType } from './collection';
 import { SPACE_PLUGIN } from '../meta';
 
 export const SPACE_DIRECTORY_HANDLE = 'dxos.org/plugin/space/directory';
+export const SPACE_TYPE = 'dxos.org/type/Space';
 
 export type ObjectViewerProps = {
   lastSeen: number;
@@ -42,11 +43,6 @@ 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.
    */
@@ -92,10 +88,14 @@ export interface TypedObjectSerializer<T extends Expando = Expando> {
   deserialize(params: { content: string; space: Space; newId?: boolean }): Promise<T>;
 }
 
+// TODO(burdon): Move to FormatEnum or SDK.
+export const IconAnnotationId = Symbol.for('@dxos/plugin-space/annotation/Icon');
+export const HueAnnotationId = Symbol.for('@dxos/plugin-space/annotation/Hue');
+
 export const SpaceForm = S.Struct({
   name: S.optional(S.String.annotations({ title: 'Name' })),
-  icon: S.optional(S.String.annotations({ title: 'Icon' })),
-  hue: S.optional(S.String.annotations({ title: 'Color' })),
+  icon: S.optional(S.String.annotations({ title: 'Icon', [IconAnnotationId]: true })),
+  hue: S.optional(S.String.annotations({ title: 'Color', [HueAnnotationId]: true })),
   // TODO(wittjosiah): Make optional with default value.
   edgeReplication: S.Boolean.annotations({ title: 'Enable EDGE Replication' }),
 });
@@ -175,6 +175,7 @@ export namespace SpaceAction {
   }) {}
 
   // TODO(wittjosiah): Handle scrolling to section.
+  //   This maybe motivates making the space settings its own deck?
   export class OpenSettings extends S.TaggedClass<OpenSettings>()(`${SPACE_ACTION}/open-settings`, {
     input: S.Struct({ space: SpaceSchema }),
     output: S.Void,