@dxos/plugin-space 0.6.12 → 0.6.13-main.548ca8d

package/src/components/SaveStatus.tsx

@@ -0,0 +1,95 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useEffect, useState } from 'react';
+
+import { type UnsubscribeCallback } from '@dxos/async';
+import { type Client } from '@dxos/client';
+import { type Space, type SpaceId } from '@dxos/client/echo';
+import { Context } from '@dxos/context';
+import { StatusBar } from '@dxos/plugin-status-bar';
+import { useClient } from '@dxos/react-client';
+import { Icon, useTranslation } from '@dxos/react-ui';
+
+import { SPACE_PLUGIN } from '../meta';
+
+export const SaveStatus = () => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+  const client = useClient();
+  const [state, setState] = useState<'saved' | 'saving'>('saved');
+  useEffect(() => {
+    return createClientSaveTracker(client, (state) => {
+      setState(state);
+    });
+  }, []);
+
+  return (
+    <StatusBar.Item title={state === 'saving' ? t('saving label') : t('saved label')}>
+      <Icon icon={state === 'saving' ? 'ph--arrows-clockwise--regular' : 'ph--check-circle--regular'} size={4} />
+    </StatusBar.Item>
+  );
+};
+
+const createClientSaveTracker = (client: Client, cb: (state: 'saved' | 'saving') => void) => {
+  const unsubscribeCallbacks: Record<SpaceId, UnsubscribeCallback> = {};
+  const state: Record<SpaceId, 'saved' | 'saving'> = {};
+
+  const install = (spaces: Space[]) => {
+    for (const space of spaces) {
+      if (state[space.id]) {
+        continue;
+      }
+
+      state[space.id] = 'saved';
+      unsubscribeCallbacks[space.id] = createSpaceSaveTracker(space, (s) => {
+        state[space.id] = s;
+        cb(Object.values(state).some((s) => s === 'saving') ? 'saving' : 'saved');
+      });
+    }
+  };
+  client.spaces.subscribe((spaces) => {
+    install(spaces);
+  });
+  install(client.spaces.get());
+
+  return () => {
+    for (const unsubscribe of Object.values(unsubscribeCallbacks)) {
+      unsubscribe();
+    }
+  };
+};
+
+const createSpaceSaveTracker = (space: Space, cb: (state: 'saved' | 'saving') => void): UnsubscribeCallback => {
+  const ctx = new Context();
+
+  void space.waitUntilReady().then(() => {
+    if (ctx.disposed) {
+      return;
+    }
+
+    let hasUnsavedChanges = false;
+    let lastFlushPromise: Promise<void> | undefined;
+    space.crud.saveStateChanged.on(ctx, ({ unsavedDocuments }) => {
+      hasUnsavedChanges = unsavedDocuments.length > 0;
+    });
+    space.crud.saveStateChanged.debounce(500).on(ctx, () => {
+      if (hasUnsavedChanges) {
+        lastFlushPromise = undefined;
+        cb('saving');
+      } else {
+        const flushPromise = space.crud.flush();
+        lastFlushPromise = flushPromise;
+        void flushPromise.then(() => {
+          if (lastFlushPromise === flushPromise) {
+            cb('saved');
+          }
+        });
+      }
+    });
+  });
+
+  return () => {
+    void ctx.dispose();
+  };
+};

package/src/components/SpaceMain/SpaceMain.tsx

@@ -6,35 +6,14 @@ import { Command } from '@phosphor-icons/react';
 import React from 'react';
 
 import { Surface } from '@dxos/app-framework';
-import { type Action } from '@dxos/plugin-graph';
 import { SpaceState, type Space } from '@dxos/react-client/echo';
-import { Button, Main, useTranslation, toLocalizedString } from '@dxos/react-ui';
+import { Main, useTranslation } from '@dxos/react-ui';
 import { getSize, mx, topbarBlockPaddingStart } from '@dxos/react-ui-theme';
 import { ClipboardProvider } from '@dxos/shell/react';
 
 import { SpaceMembersSection } from './SpaceMembersSection';
 import { SPACE_PLUGIN } from '../../meta';
 
-const _InFlowSpaceActions = ({ actionsMap }: { actionsMap: Record<string, Action> }) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
-  return (
-    <section className='mbe-4 col-start-2 col-end-4 md:col-end-7 grid gap-2 auto-rows-min grid-cols-[repeat(auto-fill,minmax(8rem,1fr))]'>
-      {Object.entries(actionsMap)
-        .filter(([_, { properties }]) => properties?.mainAreaDisposition === 'in-flow')
-        .map(([actionId, { data: invoke, properties }]) => {
-          const Icon = properties?.icon;
-          const label = properties?.label;
-          return (
-            <Button key={actionId} classNames='block text-center plb-2 font-normal'>
-              {Icon && <Icon size={5} className='mli-auto' />}
-              <p>{toLocalizedString(label, t)}</p>
-            </Button>
-          );
-        })}
-    </section>
-  );
-};
-
 const KeyShortcuts = () => {
   const { t } = useTranslation(SPACE_PLUGIN);
   return (

package/src/components/SpacePresence.tsx

@@ -110,7 +110,7 @@ export type MemberPresenceProps = ThemedClassName<{
 
 export const FullPresence = (props: MemberPresenceProps) => {
   const { size = 9, onMemberClick } = props;
-  const members = useDefaultValue(props.members, []);
+  const members = useDefaultValue(props.members, () => []);
 
   if (members.length === 0) {
     return null;

package/src/components/SpaceSettings.tsx

@@ -4,16 +4,17 @@
 
 import React from 'react';
 
-import { useIntentDispatcher } from '@dxos/app-framework';
+import { useIntentDispatcher, useResolvePlugins } from '@dxos/app-framework';
 import { SettingsValue } from '@dxos/plugin-settings';
-import { Input, useTranslation } from '@dxos/react-ui';
+import { Input, Select, toLocalizedString, useTranslation } from '@dxos/react-ui';
 
 import { SpaceAction, SPACE_PLUGIN } from '../meta';
-import { type SpaceSettingsProps } from '../types';
+import { parseSpaceInitPlugin, type SpaceSettingsProps } from '../types';
 
 export const SpaceSettings = ({ settings }: { settings: SpaceSettingsProps }) => {
   const { t } = useTranslation(SPACE_PLUGIN);
   const dispatch = useIntentDispatcher();
+  const plugins = useResolvePlugins(parseSpaceInitPlugin);
 
   return (
     <>
@@ -29,6 +30,34 @@ export const SpaceSettings = ({ settings }: { settings: SpaceSettingsProps }) =>
           }
         />
       </SettingsValue>
+
+      <SettingsValue label={t('default on space create label')}>
+        <Select.Root
+          value={settings.onSpaceCreate}
+          onValueChange={(value) => {
+            settings.onSpaceCreate = value;
+          }}
+        >
+          <Select.TriggerButton />
+          <Select.Portal>
+            <Select.Content>
+              <Select.Viewport>
+                {plugins.map(
+                  ({
+                    provides: {
+                      space: { onSpaceCreate },
+                    },
+                  }) => (
+                    <Select.Option key={onSpaceCreate.action} value={onSpaceCreate.action}>
+                      {toLocalizedString(onSpaceCreate.label, t)}
+                    </Select.Option>
+                  ),
+                )}
+              </Select.Viewport>
+            </Select.Content>
+          </Select.Portal>
+        </Select.Root>
+      </SettingsValue>
     </>
   );
 };

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

@@ -0,0 +1,62 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import React from 'react';
+
+import { SpaceId } from '@dxos/keys';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
+
+import { SyncStatusDetail, SyncStatusIndicator } from './SyncStatus';
+import { getSyncSummary, type SpaceSyncStateMap } from './types';
+import translations from '../../translations';
+
+const Story = (props: any) => {
+  return (
+    <div className='flex flex-col-reverse p-4 '>
+      <SyncStatusIndicator {...props} />
+    </div>
+  );
+};
+
+export default {
+  title: 'plugin-space/SyncStatusIndicator',
+  decorators: [withTheme, withLayout({ fullscreen: true })],
+  component: SyncStatusIndicator,
+  parameters: { translations },
+  render: Story,
+};
+
+const random = ({ min, max }: { min: number; max: number }) => min + Math.floor(Math.random() * (max - min));
+
+const state: SpaceSyncStateMap = Array.from({ length: 5 }).reduce<SpaceSyncStateMap>((map) => {
+  const total = random({ min: 10, max: 500 });
+  const haveLocal = random({ min: 0, max: total });
+  const haveRemote = random({ min: 0, max: total });
+  map[SpaceId.random()] = {
+    localDocumentCount: haveLocal,
+    remoteDocumentCount: haveRemote,
+    missingOnLocal: total - haveLocal,
+    missingOnRemote: total - haveRemote,
+    differentDocuments: 0,
+  };
+
+  return map;
+}, {});
+
+export const Default = {
+  args: {
+    state,
+  },
+};
+
+export const Detail = {
+  render: SyncStatusDetail,
+  args: {
+    state,
+    summary: getSyncSummary(state),
+    classNames: 'm-2 w-[200px] border border-separator rounded-md',
+  },
+};

package/src/components/SyncStatus/SyncStatus.tsx

@@ -0,0 +1,188 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { type HTMLAttributes, useEffect, useState } from 'react';
+
+import { StatusBar } from '@dxos/plugin-status-bar';
+import { Icon, 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 { type Progress, type PeerSyncState, type SpaceSyncStateMap, getSyncSummary, useSyncState } from './types';
+import { SPACE_PLUGIN } from '../../meta';
+
+const SYNC_STALLED_TIMEOUT = 5_000;
+
+const styles = {
+  barBg: 'bg-neutral-50 dark:bg-green-900 text-black',
+  barFg: 'bg-neutral-100 bg-green-500',
+  barHover: 'dark:hover:bg-green-500',
+};
+
+export const SyncStatus = () => {
+  const state = useSyncState();
+  return <SyncStatusIndicator state={state} />;
+};
+
+export const SyncStatusIndicator = ({ state }: { state: SpaceSyncStateMap }) => {
+  const summary = getSyncSummary(state);
+  const offline = false;
+
+  const needsToUpload = summary.differentDocuments > 0 || summary.missingOnRemote > 0;
+  const needsToDownload = summary.differentDocuments > 0 || summary.missingOnLocal > 0;
+  const [classNames, setClassNames] = useState<string>();
+  useEffect(() => {
+    setClassNames(undefined);
+    if (!needsToUpload && !needsToDownload) {
+      return;
+    }
+
+    const t = setTimeout(() => {
+      setClassNames('text-orange-500');
+    }, SYNC_STALLED_TIMEOUT);
+    return () => clearTimeout(t);
+  }, [needsToUpload, needsToDownload]);
+
+  return (
+    <StatusBar.Item>
+      <Popover.Root>
+        <Popover.Trigger>
+          <Icon
+            icon={
+              offline
+                ? 'ph--cloud-x--regular'
+                : needsToUpload
+                  ? 'ph--cloud-arrow-up--regular'
+                  : needsToDownload
+                    ? 'ph--cloud-arrow-down--regular'
+                    : 'ph--cloud-check--regular'
+            }
+            size={4}
+            classNames={classNames}
+          />
+        </Popover.Trigger>
+        <Popover.Content>
+          <SyncStatusDetail state={state} summary={summary} debug={false} />
+        </Popover.Content>
+      </Popover.Root>
+    </StatusBar.Item>
+  );
+};
+
+export const SyncStatusDetail = ({
+  classNames,
+  state,
+  summary,
+  debug,
+}: ThemedClassName<{
+  state: SpaceSyncStateMap;
+  summary: PeerSyncState;
+  debug?: boolean;
+}>) => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+  const entries = Object.entries(state).sort(([a], [b]) => (a < b ? -1 : a > b ? 1 : 0));
+
+  // TODO(burdon): Normalize to max document count?
+  return (
+    <div className={mx('flex flex-col text-xs min-w-[16rem]', classNames)}>
+      <h1 className='p-2'>{t('sync status title')}</h1>
+      <div className='flex flex-col gap-[2px] my-[2px]'>
+        {entries.map(([spaceId, state]) => (
+          <SpaceRow key={spaceId} spaceId={spaceId} state={state} />
+        ))}
+      </div>
+      {debug && <SyntaxHighlighter language='json'>{JSON.stringify(summary, null, 2)}</SyntaxHighlighter>}
+    </div>
+  );
+};
+
+const useActive = (count: number) => {
+  const [current, setCurrent] = useState(count);
+  const [active, setActive] = useState(false);
+  useEffect(() => {
+    let t: NodeJS.Timeout | undefined;
+    if (count !== current) {
+      setActive(true);
+      setCurrent(count);
+      t && clearTimeout(t);
+      t = setTimeout(() => {
+        setActive(false);
+      }, SYNC_STALLED_TIMEOUT);
+    }
+
+    return () => {
+      setActive(false);
+      clearTimeout(t);
+    };
+  }, [count, current]);
+  return active;
+};
+
+const SpaceRow = ({
+  spaceId,
+  state: { localDocumentCount, remoteDocumentCount, missingOnLocal, missingOnRemote },
+}: {
+  spaceId: string;
+  state: PeerSyncState;
+}) => {
+  const downActive = useActive(localDocumentCount);
+  const upActive = useActive(remoteDocumentCount);
+
+  return (
+    <div
+      className={mx('flex items-center mx-[2px] gap-[2px] cursor-pointer', styles.barHover)}
+      title={spaceId}
+      onClick={() => {
+        void navigator.clipboard.writeText(spaceId);
+      }}
+    >
+      <Icon
+        icon='ph--arrow-fat-line-left--regular'
+        size={3}
+        classNames={mx(downActive && 'animate-[pulse_1s_infinite]')}
+      />
+      <Candle
+        up={{ count: remoteDocumentCount, total: remoteDocumentCount + missingOnRemote }}
+        down={{ count: localDocumentCount, total: localDocumentCount + missingOnLocal }}
+        title={spaceId}
+      />
+      <Icon
+        icon='ph--arrow-fat-line-right--regular'
+        size={3}
+        classNames={mx(upActive && 'animate-[pulse_1s_step-start_infinite]')}
+      />
+    </div>
+  );
+};
+
+type CandleProps = ThemedClassName<Pick<HTMLAttributes<HTMLDivElement>, 'title'>> & { up: Progress; down: Progress };
+
+const Candle = ({ classNames, up, down }: CandleProps) => {
+  return (
+    <div className={mx('grid grid-cols-[1fr_2rem_1fr] w-full h-3', classNames)}>
+      <Bar classNames='justify-end' {...up} />
+      <div className='relative'>
+        <div className={mx('absolute inset-0 flex items-center justify-center text-xs', styles.barBg)}>{up.total}</div>
+      </div>
+      <Bar {...down} />
+    </div>
+  );
+};
+
+const Bar = ({ classNames, count, total }: ThemedClassName<Progress>) => {
+  let p = (count / total) * 100;
+  if (count < total) {
+    p = Math.min(p, 95);
+  }
+
+  return (
+    <div className={mx('relative flex w-full', styles.barBg, classNames)}>
+      <div className={mx('shrink-0', styles.barFg)} style={{ width: `${p}%` }}></div>
+      {count !== total && (
+        <div className='absolute top-0 bottom-0 flex items-center mx-0.5 text-black text-xs'>{count}</div>
+      )}
+    </div>
+  );
+};

package/src/components/SyncStatus/index.ts

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

package/src/components/SyncStatus/types.ts

@@ -0,0 +1,77 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useEffect, useState } from 'react';
+
+import { type Space, type SpaceId, type SpaceSyncState } from '@dxos/client/echo';
+import { Context } from '@dxos/context';
+import { EdgeService } from '@dxos/protocols';
+import { useClient } from '@dxos/react-client';
+
+export type Progress = { count: number; total: number };
+
+export type PeerSyncState = Omit<SpaceSyncState.PeerState, 'peerId'>;
+
+export type SpaceSyncStateMap = Record<SpaceId, PeerSyncState>;
+
+export const createEmptyEdgeSyncState = (): PeerSyncState => ({
+  missingOnLocal: 0,
+  missingOnRemote: 0,
+  localDocumentCount: 0,
+  remoteDocumentCount: 0,
+  differentDocuments: 0,
+});
+
+export const getSyncSummary = (syncMap: SpaceSyncStateMap): PeerSyncState => {
+  return Object.entries(syncMap).reduce<PeerSyncState>((summary, [_spaceId, peerState]) => {
+    summary.missingOnLocal += peerState.missingOnLocal;
+    summary.missingOnRemote += peerState.missingOnRemote;
+    summary.localDocumentCount += peerState.localDocumentCount;
+    summary.remoteDocumentCount += peerState.remoteDocumentCount;
+    summary.differentDocuments += peerState.differentDocuments;
+    return summary;
+  }, createEmptyEdgeSyncState());
+};
+
+const isEdgePeerId = (peerId: string, spaceId: SpaceId) =>
+  peerId.startsWith(`${EdgeService.AUTOMERGE_REPLICATOR}:${spaceId}`);
+
+/**
+ * Hook Subscribes to sync state for each space.
+ */
+export const useSyncState = (): SpaceSyncStateMap => {
+  const client = useClient();
+  const [spaceState, setSpaceState] = useState<SpaceSyncStateMap>({});
+
+  useEffect(() => {
+    const ctx = new Context();
+    const createSubscriptions = (spaces: Space[]) => {
+      for (const space of spaces) {
+        if (spaceState[space.id]) {
+          continue;
+        }
+
+        ctx.onDispose(
+          space.crud.subscribeToSyncState(ctx, ({ peers = [] }) => {
+            const syncState = peers.find((state) => isEdgePeerId(state.peerId, space.id));
+            if (syncState) {
+              setSpaceState((spaceState) => ({ ...spaceState, [space.id]: syncState }));
+            }
+          }),
+        );
+      }
+    };
+
+    createSubscriptions(client.spaces.get());
+    client.spaces.subscribe((spaces) => {
+      createSubscriptions(spaces);
+    });
+
+    return () => {
+      void ctx.dispose();
+    };
+  }, [client]);
+
+  return spaceState;
+};

package/src/components/index.ts

@@ -5,8 +5,7 @@
 export * from './AwaitingObject';
 export * from './CollectionMain';
 export * from './CollectionSection';
-export * from './EmptySpace';
-export * from './EmptyTree';
+export * from './FallbackSettings';
 export * from './MenuFooter';
 export * from './MissingObject';
 export * from './PersistenceStatus';
@@ -16,3 +15,5 @@ export * from './ShareSpaceButton';
 export * from './SpaceMain';
 export * from './SpacePresence';
 export * from './SpaceSettings';
+export * from './SaveStatus';
+export * from './SyncStatus';

package/src/meta.ts

@@ -2,6 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
+import { type PluginMeta } from '@dxos/app-framework';
+
 export const SPACE_PLUGIN = 'dxos.org/plugin/space';
 export const SPACE_PLUGIN_SHORT_ID = 'space';
 
@@ -9,7 +11,7 @@ export default {
   id: SPACE_PLUGIN,
   shortId: SPACE_PLUGIN_SHORT_ID,
   name: 'Spaces',
-};
+} satisfies PluginMeta;
 
 const SPACE_ACTION = `${SPACE_PLUGIN}/action`;
 export enum SpaceAction {

package/src/translations.ts

@@ -86,6 +86,10 @@ export default [
         'remove deleted objects label': 'Cleanup',
         'remove deleted objects alt': 'Permanently remove deleted objects to free up space.',
         'copy link label': 'Copy link',
+        'default on space create label': 'On space create',
+        'sync status title': 'Sync status',
+        'name label': 'Name',
+        'name placeholder': 'Name',
       },
     },
   },

package/src/types/collection.ts

@@ -12,5 +12,5 @@ export class CollectionType extends TypedObject({ typename: 'dxos.org/type/Colle
   // 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(S.String, ref(Expando))),
+  views: S.mutable(S.Record({ key: S.String, value: ref(Expando) })),
 }) {}

package/src/types/thread.ts

@@ -34,9 +34,18 @@ export const ActorSchema = S.mutable(
 
 export type ActorType = S.Schema.Type<typeof ActorSchema>;
 
+export enum MessageState {
+  NONE = 0,
+  ARCHIVED = 1,
+  DELETED = 2,
+  SPAM = 3,
+}
+
 export class MessageType extends TypedObject({ typename: 'dxos.org/type/Message', version: '0.1.0' })({
   /** ISO date string when the message was sent. */
   timestamp: S.String,
+  /** Message state. */
+  state: S.optional(S.Enums(MessageState)),
   /** Identity of the message sender. */
   sender: ActorSchema,
   /** Text content of the message. */
@@ -44,7 +53,7 @@ export class MessageType extends TypedObject({ typename: 'dxos.org/type/Message'
   /** Non-text content sent with a message (e.g. files, polls, etc.) */
   parts: S.optional(S.mutable(S.Array(ref(Expando)))),
   /** Custom properties for specific message types (e.g. email subject or cc fields). */
-  properties: S.optional(S.mutable(S.Record(S.String, S.Any))),
+  properties: S.optional(S.mutable(S.Record({ key: S.String, value: S.Any }))),
   // TODO(wittjosiah): Add read status:
   //  - Read receipts need to be per space member.
   //  - Read receipts don't need to be added to schema until they being implemented.
@@ -57,6 +66,7 @@ export const ThreadStatus = S.Union(S.Literal('staged'), S.Literal('active'), S.
 
 export class ThreadType extends TypedObject({ typename: 'dxos.org/type/Thread', version: '0.1.0' })({
   name: S.optional(S.String),
+  /** AM cursor-range: 'from:to'. */
   anchor: S.optional(S.String),
   status: S.optional(ThreadStatus),
   messages: S.mutable(S.Array(ref(MessageType))),

package/src/types/types.ts

@@ -10,10 +10,12 @@ import type {
   SettingsProvides,
   SurfaceProvides,
   TranslationsProvides,
+  Plugin,
 } from '@dxos/app-framework';
 import { type Expando } from '@dxos/echo-schema';
 import { type SchemaProvides } from '@dxos/plugin-client';
 import { type PublicKey } from '@dxos/react-client';
+import { type Label } from '@dxos/react-ui';
 import { type ComplexMap } from '@dxos/util';
 
 export const SPACE_DIRECTORY_HANDLE = 'dxos.org/plugin/space/directory';
@@ -53,7 +55,29 @@ export type PluginState = {
   sdkMigrationRunning: Record<string, boolean>;
 };
 
-export type SpaceSettingsProps = { showHidden?: boolean };
+export type SpaceSettingsProps = {
+  /**
+   * Show closed spaces.
+   */
+  showHidden?: boolean;
+
+  /**
+   * Action to perform when a space is created.
+   */
+  onSpaceCreate?: string;
+};
+
+export type SpaceInitProvides = {
+  space: {
+    onSpaceCreate: {
+      label: Label;
+      action: string;
+    };
+  };
+};
+
+export const parseSpaceInitPlugin = (plugin: Plugin) =>
+  typeof (plugin.provides as any).space?.onSpaceCreate === 'object' ? (plugin as Plugin<SpaceInitProvides>) : undefined;
 
 export type SpacePluginProvides = SurfaceProvides &
   IntentResolverProvides &