@dxos/plugin-space 0.7.3-staging.cc8dd3e → 0.7.3

package/src/components/CreateDialog/CreateObjectDialog.tsx

@@ -6,7 +6,7 @@ import React, { useCallback, useRef } from 'react';
 
 import { type MetadataResolver, NavigationAction, useIntentDispatcher } from '@dxos/app-framework';
 import { useClient } from '@dxos/react-client';
-import { type AbstractTypedObject, isReactiveObject, isSpace, useSpaces } from '@dxos/react-client/echo';
+import { type AbstractTypedObject, getSpace, isReactiveObject, isSpace, useSpaces } from '@dxos/react-client/echo';
 import { Button, Dialog, Icon, useTranslation } from '@dxos/react-ui';
 
 import { CreateObjectPanel, type CreateObjectPanelProps } from './CreateObjectPanel';
@@ -52,7 +52,8 @@ export const CreateObjectDialog = ({
       // NOTE: Must close before navigating or attention won't follow object.
       closeRef.current?.click();
 
-      const result = await dispatch({ action: createObjectAction, data: { name } });
+      const space = isSpace(target) ? target : getSpace(target);
+      const result = await dispatch({ action: createObjectAction, data: { name, space } });
       const object = result?.data;
       if (isReactiveObject(object)) {
         await dispatch([

package/src/components/JoinDialog.tsx

@@ -18,7 +18,7 @@ export type JoinDialogProps = JoinPanelProps & {
   navigableCollections?: boolean;
 };
 
-export const JoinDialog = ({ navigableCollections, ...props }: JoinDialogProps) => {
+export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialogProps) => {
   const { t } = useTranslation(SPACE_PLUGIN);
   const dispatch = useIntentDispatcher();
   const spaces = useSpaces();
@@ -75,6 +75,8 @@ export const JoinDialog = ({ navigableCollections, ...props }: JoinDialogProps)
         ]);
       }
 
+      await onDone?.(result);
+
       if (space) {
         await dispatch({
           action: ObservabilityAction.SEND_EVENT,

package/src/components/SpaceSettings/SpaceSettingsDialog.tsx

@@ -5,9 +5,9 @@
 import React, { useState } from 'react';
 
 import { useClient } from '@dxos/react-client';
-import { Button, Dialog, Icon, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Button, Clipboard, Dialog, Icon, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { Tabs, type TabsRootProps, type TabsActivePart } from '@dxos/react-ui-tabs';
-import { ClipboardProvider, SpacePanel, type SpacePanelProps } from '@dxos/shell/react';
+import { SpacePanel, type SpacePanelProps } from '@dxos/shell/react';
 
 import { SpaceSettingsPanel, type SpaceSettingsPanelProps } from './SpaceSettingsPanel';
 import { SPACE_PLUGIN } from '../../meta';
@@ -92,9 +92,9 @@ export const SpaceSettingsDialog = ({
 
           {/* TODO(wittjosiah): Weird focus ring when tabpanel is focused. */}
           <Tabs.Tabpanel value='members' classNames='pli-3 @md:pli-5 max-bs-dvh overflow-y-auto'>
-            <ClipboardProvider>
+            <Clipboard.Provider>
               <SpacePanel space={space} hideHeading target={target} createInvitationUrl={createInvitationUrl} />
-            </ClipboardProvider>
+            </Clipboard.Provider>
           </Tabs.Tabpanel>
         </Tabs.Viewport>
       </Tabs.Root>

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

@@ -0,0 +1,57 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta } from '@storybook/react';
+import React, { useEffect, useState } from 'react';
+
+import { withTheme, withLayout } from '@dxos/storybook-utils';
+import { range } from '@dxos/util';
+
+import { InlineSyncStatusIndicator } from './InlineSyncStatus';
+import translations from '../../translations';
+
+const DefaultStory = () => {
+  const [spaces, setSpaces] = useState(
+    new Map<string, boolean>(range(8).map((i) => [`space-${i + 1}`, Math.random() > 0.5])),
+  );
+
+  useEffect(() => {
+    const t = setInterval(
+      () => {
+        setSpaces((spaces) => {
+          const space = Array.from(spaces.keys())[Math.floor(Math.random() * spaces.size)];
+          spaces.set(space, !spaces.get(space));
+          return new Map(spaces);
+        });
+      },
+      2_000 + Math.random() * 3_000,
+    );
+    return () => clearInterval(t);
+  });
+
+  return (
+    <div className='flex flex-col p-2 w-[200px]'>
+      {Array.from(spaces.entries()).map(([space, sync]) => (
+        <div key={space} className='flex items-center'>
+          <div className='grow'>{space}</div>
+          {sync && <InlineSyncStatusIndicator />}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const meta: Meta = {
+  title: 'plugins/plugin-space/InlineSyncStatusIndicator',
+  component: InlineSyncStatusIndicator,
+  render: DefaultStory,
+  decorators: [withTheme, withLayout({ fullscreen: true })],
+  parameters: { translations },
+};
+
+export default meta;
+
+export const Default = {};

package/src/components/SyncStatus/InlineSyncStatus.tsx

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useEffect, useState } from 'react';
+import React, { type CSSProperties, useEffect, useMemo, useState } from 'react';
 
 import { QueryEdgeStatusResponse } from '@dxos/protocols/proto/dxos/client/services';
 import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
@@ -27,8 +27,6 @@ const useEdgeStatus = (): QueryEdgeStatusResponse.EdgeStatus => {
 };
 
 export const InlineSyncStatus = ({ space }: { space: Space }) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
-
   const connectedToEdge = useEdgeStatus() === QueryEdgeStatusResponse.EdgeStatus.CONNECTED;
   // TODO(wittjosiah): This is not reactive.
   const edgeSyncEnabled = space.internal.data.edgeReplication === EdgeReplicationSetting.ENABLED;
@@ -37,9 +35,27 @@ export const InlineSyncStatus = ({ space }: { space: Space }) => {
     return null;
   }
 
+  return <InlineSyncStatusIndicator />;
+};
+
+export const InlineSyncStatusIndicator = () => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+  const animationProps = useMemo<CSSProperties>(
+    () => ({
+      // Synchronize animations.
+      animationDelay: `-${Date.now() % 2_000}ms`,
+    }),
+    [],
+  );
+
   return (
     <div role='status' aria-label={t('syncing message')} className='flex items-center'>
-      <Icon icon='ph--arrows-clockwise--regular' size={3} classNames='animate-spin' />
+      <Icon
+        icon='ph--circle-notch--regular'
+        size={3}
+        style={animationProps}
+        classNames='text-subdued animate-[spin_2s_linear_infinite]'
+      />
     </div>
   );
 };

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

@@ -14,32 +14,34 @@ import translations from '../../translations';
 
 const DefaultStory = (props: any) => {
   return (
-    <div className='flex flex-col-reverse p-4 '>
+    <div className='flex flex-col-reverse p-4'>
       <SyncStatusIndicator {...props} />
     </div>
   );
 };
 
-export const Default: StoryObj<typeof SyncStatusIndicator> = {
+const meta: Meta = {
+  title: 'plugins/plugin-space/SyncStatusIndicator',
+  component: SyncStatusIndicator,
+  render: DefaultStory,
+  decorators: [withTheme, withLayout({ fullscreen: true })],
+  parameters: { translations },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SyncStatusIndicator>;
+
+export const Default: Story = {
   args: {
     state: {},
     saved: true,
   },
 };
 
-export const Saving: StoryObj<typeof SyncStatusIndicator> = {
+export const Saving: Story = {
   args: {
     state: {},
     saved: false,
   },
 };
-
-const meta: Meta = {
-  title: 'plugins/plugin-space/SyncStatusIndicator',
-  component: SyncStatusIndicator,
-  render: DefaultStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  parameters: { translations },
-};
-
-export default meta;

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

@@ -17,14 +17,6 @@ import translations from '../../translations';
 
 const random = ({ min, max }: { min: number; max: number }) => min + Math.floor(Math.random() * (max - min));
 
-export const Default: StoryObj<typeof SyncStatusDetail> = {};
-
-export const Empty: StoryObj<typeof SyncStatusDetail> = {
-  render: (args) => {
-    return <SyncStatusDetail {...args} state={{}} />;
-  },
-};
-
 const meta: Meta = {
   title: 'plugins/plugin-space/SyncStatusDetail',
   component: SyncStatusDetail,
@@ -81,3 +73,13 @@ const meta: Meta = {
 };
 
 export default meta;
+
+type Story = StoryObj<typeof SyncStatusDetail>;
+
+export const Default: Story = {};
+
+export const Empty: Story = {
+  render: (args) => {
+    return <SyncStatusDetail {...args} state={{}} />;
+  },
+};