@dxos/plugin-space 0.6.8-main.046e6cf

package/src/components/AwaitingObject.tsx

@@ -0,0 +1,118 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { CheckCircle, CircleDashed, CircleNotch } from '@phosphor-icons/react';
+import React, { useEffect, useState } from 'react';
+
+import { parseIntentPlugin, useResolvePlugin, parseNavigationPlugin, NavigationAction } from '@dxos/app-framework';
+import { useClient } from '@dxos/react-client';
+import { fullyQualifiedId, useQuery } from '@dxos/react-client/echo';
+import { Button, Toast, useTranslation } from '@dxos/react-ui';
+import { getSize, mx } from '@dxos/react-ui-theme';
+
+import { SpaceAction, SPACE_PLUGIN } from '../meta';
+
+const WAIT_FOR_OBJECT_TIMEOUT = 180e3; // 3 minutes
+const TOAST_TIMEOUT = 240e3; // 4 minutes
+
+export const AwaitingObject = ({ id }: { id: string }) => {
+  const [open, setOpen] = useState(true);
+  const [waiting, setWaiting] = useState(true);
+  const [found, setFound] = useState(false);
+  const { t } = useTranslation(SPACE_PLUGIN);
+  const intentPlugin = useResolvePlugin(parseIntentPlugin);
+  const navigationPlugin = useResolvePlugin(parseNavigationPlugin);
+
+  const client = useClient();
+  const objects = useQuery(client.spaces);
+
+  useEffect(() => {
+    if (!id) {
+      return;
+    }
+
+    const timeout = setTimeout(() => {
+      setWaiting(false);
+    }, WAIT_FOR_OBJECT_TIMEOUT);
+
+    () => clearTimeout(timeout);
+  }, [id]);
+
+  useEffect(() => {
+    if (objects.findIndex((object) => fullyQualifiedId(object) === id) > -1) {
+      setFound(true);
+
+      if (navigationPlugin?.provides.location.active === id) {
+        setOpen(false);
+      }
+    }
+  }, [id, objects, intentPlugin]);
+
+  const handleClose = async () =>
+    intentPlugin?.provides.intent.dispatch({
+      plugin: SPACE_PLUGIN,
+      action: SpaceAction.WAIT_FOR_OBJECT,
+      data: { id: undefined },
+    });
+
+  const handleNavigate = () => {
+    void intentPlugin?.provides.intent.dispatch({
+      action: NavigationAction.OPEN,
+      data: { activeParts: { main: [id] } },
+    });
+    void handleClose();
+  };
+
+  return (
+    <Toast.Root open={open} duration={TOAST_TIMEOUT} onOpenChange={setOpen}>
+      <Toast.Body>
+        <Toast.Title classNames='flex items-center gap-2'>
+          {found ? (
+            <>
+              <CheckCircle className={getSize(5)} />
+              <span>{t('found object label')}</span>
+            </>
+          ) : waiting ? (
+            <>
+              <CircleNotch className={mx(getSize(5), 'animate-spin')} />
+              <span>{t('waiting for object label')}</span>
+            </>
+          ) : (
+            <>
+              <CircleDashed className={getSize(5)} />
+              <span>{t('object not found label')}</span>
+            </>
+          )}
+        </Toast.Title>
+        <Toast.Description>
+          {t(
+            found
+              ? 'found object description'
+              : waiting
+                ? 'waiting for object description'
+                : 'object not found description',
+          )}
+        </Toast.Description>
+      </Toast.Body>
+      <Toast.Actions>
+        {found ? (
+          <>
+            <Toast.Action altText={t('go to object alt')} asChild>
+              <Button variant='primary' onClick={handleNavigate}>
+                {t('go to object label')}
+              </Button>
+            </Toast.Action>
+            <Toast.Close asChild>
+              <Button onClick={handleClose}>{t('close label', { ns: 'appkit' })}</Button>
+            </Toast.Close>
+          </>
+        ) : (
+          <Toast.Close asChild>
+            <Button onClick={handleClose}>{t(waiting ? 'close label' : 'confirm label', { ns: 'appkit' })}</Button>
+          </Toast.Close>
+        )}
+      </Toast.Actions>
+    </Toast.Root>
+  );
+};

package/src/components/CollectionMain.tsx

@@ -0,0 +1,33 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { useTranslation } from '@dxos/react-ui';
+import { baseSurface, descriptionText, mx } from '@dxos/react-ui-theme';
+
+import { SPACE_PLUGIN } from '../meta';
+import type { CollectionType } from '../types';
+
+export const CollectionMain = ({ collection }: { collection: CollectionType }) => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+
+  return (
+    <div
+      role='none'
+      className={mx(baseSurface, 'min-bs-screen is-full flex items-center justify-center p-8')}
+      data-testid='composer.firstRunMessage'
+    >
+      <p
+        role='alert'
+        className={mx(
+          descriptionText,
+          'border border-dashed border-neutral-400/50 rounded-lg p-8 font-normal text-lg max-is-[24rem] break-words',
+        )}
+      >
+        {collection.name ?? t('unnamed collection label')}
+      </p>
+    </div>
+  );
+};

package/src/components/CollectionSection.tsx

@@ -0,0 +1,20 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { useTranslation } from '@dxos/react-ui';
+
+import { SPACE_PLUGIN } from '../meta';
+import type { CollectionType } from '../types';
+
+export const CollectionSection = ({ collection }: { collection: CollectionType }) => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+  // TODO(wittjosiah): Better placeholder.
+  return (
+    <div className='min-bs-[3.5rem] grid grid-rows-subgrid grid-cols-subgrid items-center'>
+      <span className='truncate'>{collection.name ?? t('unnamed collection label')}</span>
+    </div>
+  );
+};

package/src/components/EmptySpace.tsx

@@ -0,0 +1,25 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { useTranslation } from '@dxos/react-ui';
+import { descriptionText, mx } from '@dxos/react-ui-theme';
+
+import { SPACE_PLUGIN } from '../meta';
+
+export const EmptySpace = () => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+  return (
+    <div
+      role='none'
+      className={mx(
+        'p-2 mli-2 mbe-2 text-center border border-dashed border-neutral-400/50 rounded-lg',
+        descriptionText,
+      )}
+    >
+      {t('empty space message')}
+    </div>
+  );
+};

package/src/components/EmptyTree.tsx

@@ -0,0 +1,25 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { useTranslation } from '@dxos/react-ui';
+import { descriptionText, mx } from '@dxos/react-ui-theme';
+
+import { SPACE_PLUGIN } from '../meta';
+
+export const EmptyTree = () => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+  return (
+    <div
+      role='none'
+      className={mx(
+        'p-2 mli-2 mbe-2 text-center border border-dashed border-neutral-400/50 rounded-lg',
+        descriptionText,
+      )}
+    >
+      {t('empty tree message')}
+    </div>
+  );
+};

package/src/components/MenuFooter.tsx

@@ -0,0 +1,33 @@
+//
+// Copyright 2024 DXOS.org
+//
+import { Planet } from '@phosphor-icons/react';
+import React from 'react';
+
+import { getSpace } from '@dxos/client/echo';
+import type { EchoReactiveObject } from '@dxos/echo-schema';
+import { useClient } from '@dxos/react-client';
+import { DropdownMenu, toLocalizedString, useTranslation } from '@dxos/react-ui';
+
+import { SPACE_PLUGIN } from '../meta';
+import { getSpaceDisplayName } from '../util';
+
+export const MenuFooter = ({ object }: { object: EchoReactiveObject<any> }) => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+  const client = useClient();
+  const space = getSpace(object);
+  const spaceName = space ? getSpaceDisplayName(space, { personal: client.spaces.default === space }) : '';
+  return space ? (
+    <>
+      <DropdownMenu.Separator />
+      <DropdownMenu.GroupLabel>{t('menu footer label')}</DropdownMenu.GroupLabel>
+      <dl className='pis-2 mbe-2 text-xs grid grid-cols-[max-content_1fr] gap-2'>
+        <dt className='uppercase text-[.75em] tracking-wide font-medium mbs-px self-start'>{t('location label')}</dt>
+        <dd className='line-clamp-3'>
+          <Planet className='inline-block mie-1' />
+          {toLocalizedString(spaceName, t)}
+        </dd>
+      </dl>
+    </>
+  ) : null;
+};

package/src/components/MissingObject.tsx

@@ -0,0 +1,54 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useEffect, useState } from 'react';
+
+import { parseIntentPlugin, useResolvePlugin } from '@dxos/app-framework';
+import { Status, useTranslation } from '@dxos/react-ui';
+import { baseSurface, descriptionText, mx } from '@dxos/react-ui-theme';
+
+import { SpaceAction, SPACE_PLUGIN } from '../meta';
+
+const WAIT_FOR_OBJECT_TIMEOUT = 1_000;
+
+export const MissingObject = ({ id }: { id: string }) => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+  const [waiting, setWaiting] = useState(false);
+  const intentPlugin = useResolvePlugin(parseIntentPlugin);
+
+  useEffect(() => {
+    if (!intentPlugin) {
+      return;
+    }
+
+    const timeout = setTimeout(async () => {
+      setWaiting(true);
+      await intentPlugin.provides.intent.dispatch({
+        plugin: SPACE_PLUGIN,
+        action: SpaceAction.WAIT_FOR_OBJECT,
+        data: { id },
+      });
+    }, WAIT_FOR_OBJECT_TIMEOUT);
+
+    return () => clearTimeout(timeout);
+  }, [intentPlugin, id]);
+
+  return (
+    <div role='none' className={mx(baseSurface, 'min-bs-screen is-full flex items-center justify-center p-8')}>
+      {waiting ? (
+        <p
+          role='alert'
+          className={mx(
+            descriptionText,
+            'border border-dashed border-neutral-400/50 rounded-lg flex items-center justify-center p-8 font-normal text-lg',
+          )}
+        >
+          {t('missing object message')}
+        </p>
+      ) : (
+        <Status indeterminate aria-label='Initializing' />
+      )}
+    </div>
+  );
+};

package/src/components/PersistenceStatus.tsx

@@ -0,0 +1,87 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { ArrowsCounterClockwise, CheckCircle, Warning } from '@phosphor-icons/react';
+import React, { useEffect, useState } from 'react';
+
+import { debounce } from '@dxos/async';
+import { type EchoDatabase } from '@dxos/react-client/echo';
+import { Tooltip, useTranslation } from '@dxos/react-ui';
+import { getSize, mx, staticPlaceholderText, warningText } from '@dxos/react-ui-theme';
+
+import { SPACE_PLUGIN } 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(SPACE_PLUGIN);
+  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'>
+          <Warning className={mx(getSize(4), 'me-1')} />
+          <span className={mx('text-sm', warningText)}>{t('persistence error label')}</span>
+        </div>
+      );
+    case Status.PENDING:
+      return (
+        <div className='flex items-center'>
+          <ArrowsCounterClockwise className={mx(getSize(4), 'me-1')} />
+          <span className={mx('text-sm', staticPlaceholderText)}>{t('persistence pending label')}</span>
+        </div>
+      );
+    case Status.PERSISTED_LOCALLY:
+    default:
+      return (
+        <Tooltip.Root delayDuration={400}>
+          <Tooltip.Trigger role='status' className='flex items-center'>
+            <CheckCircle className={mx(getSize(4), 'me-1')} />
+            {displayMessage && (
+              <span className={mx('text-sm', staticPlaceholderText)}>{t('persisted locally label')}</span>
+            )}
+          </Tooltip.Trigger>
+          <Tooltip.Portal>
+            <Tooltip.Content classNames='z-10'>
+              {t('persisted locally message')}
+              <Tooltip.Arrow />
+            </Tooltip.Content>
+          </Tooltip.Portal>
+        </Tooltip.Root>
+      );
+  }
+};

package/src/components/PopoverRenameObject.tsx

@@ -0,0 +1,54 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useCallback, useRef, useState } from 'react';
+
+import { type ReactiveObject } from '@dxos/echo-schema';
+import { log } from '@dxos/log';
+import { Button, Input, Popover, useTranslation } from '@dxos/react-ui';
+
+import { SPACE_PLUGIN } from '../meta';
+
+export const PopoverRenameObject = ({ object: obj }: { object: ReactiveObject<any> }) => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+  const doneButton = useRef<HTMLButtonElement>(null);
+  // TODO(wittjosiah): Use schema here.
+  const object = obj as any;
+  // TODO(burdon): Field should not be hardcoded field.
+  const [name, setName] = useState(object.name || object.title || '');
+
+  const handleDone = useCallback(() => {
+    try {
+      object.name = name;
+    } catch {
+      try {
+        object.title = name;
+      } catch (err) {
+        log.error('Failed to rename object', { err });
+      }
+    }
+  }, [object, name]);
+
+  return (
+    <div role='none' className='p-1 flex gap-2'>
+      <div role='none' className='flex-1'>
+        <Input.Root>
+          <Input.Label srOnly>{t('object name label')}</Input.Label>
+          <Input.TextInput
+            placeholder={t('object title placeholder')}
+            value={name}
+            data-testid='spacePlugin.renameObject.input'
+            onChange={({ target: { value } }) => setName(value)}
+            onKeyDown={({ key }) => key === 'Enter' && doneButton.current?.click()}
+          />
+        </Input.Root>
+      </div>
+      <Popover.Close asChild>
+        <Button ref={doneButton} classNames='self-stretch' onClick={handleDone}>
+          {t('done label', { ns: 'os' })}
+        </Button>
+      </Popover.Close>
+    </div>
+  );
+};

package/src/components/PopoverRenameSpace.tsx

@@ -0,0 +1,44 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useCallback, useRef, useState } from 'react';
+
+import { type Space } from '@dxos/react-client/echo';
+import { Button, Input, Popover, useTranslation } from '@dxos/react-ui';
+
+import { SPACE_PLUGIN } from '../meta';
+
+export const PopoverRenameSpace = ({ space }: { space: Space }) => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+  const doneButton = useRef<HTMLButtonElement>(null);
+  const [name, setName] = useState(space.properties.name ?? '');
+
+  const handleDone = useCallback(() => {
+    space.properties.name = name;
+  }, [space, name]);
+
+  // TODO(thure): Why does the input value need to be uncontrolled to work?
+  return (
+    <div role='none' className='p-1 flex gap-2'>
+      <div role='none' className='flex-1'>
+        <Input.Root>
+          <Input.Label srOnly>{t('space name label')}</Input.Label>
+          <Input.TextInput
+            defaultValue={space.properties.name ?? ''}
+            placeholder={t('unnamed space label')}
+            onChange={({ target: { value } }) => setName(value)}
+            // TODO(wittjosiah): Ideally this should access the popover context to close the popover.
+            //   Currently this is not possible because Radix does not expose the popover context.
+            onKeyDown={({ key }) => key === 'Enter' && doneButton.current?.click()}
+          />
+        </Input.Root>
+      </div>
+      <Popover.Close asChild>
+        <Button ref={doneButton} classNames='self-stretch' onClick={handleDone}>
+          {t('done label', { ns: 'os' })}
+        </Button>
+      </Popover.Close>
+    </div>
+  );
+};

package/src/components/ShareSpaceButton.stories.tsx

@@ -0,0 +1,23 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import { withTheme } from '@dxos/storybook-utils';
+
+import { ShareSpaceButtonImpl } from './ShareSpaceButton';
+import translations from '../translations';
+
+export default {
+  title: 'plugin-space/ShareSpaceButton',
+  component: ShareSpaceButtonImpl,
+  decorators: [withTheme],
+  parameters: { translations },
+};
+
+export const Default = {
+  args: {
+    onClick: () => console.log('clicked'),
+  },
+};

package/src/components/ShareSpaceButton.tsx

@@ -0,0 +1,27 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { useIntentDispatcher } from '@dxos/app-framework';
+import { Button, useTranslation } from '@dxos/react-ui';
+
+import { SPACE_PLUGIN, SpaceAction } from '../meta';
+
+export const ShareSpaceButton = ({ spaceId }: { spaceId: string }) => {
+  const dispatch = useIntentDispatcher();
+
+  return <ShareSpaceButtonImpl onClick={() => dispatch({ action: SpaceAction.SHARE, data: { spaceId } })} />;
+};
+
+// TODO(wittjosiah): Better way to name pure/impure components?
+export const ShareSpaceButtonImpl = ({ onClick }: { onClick: () => void }) => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+
+  return (
+    <Button data-testid='spacePlugin.shareSpaceButton' onClick={onClick} classNames='mli-1'>
+      {t('share space label')}
+    </Button>
+  );
+};

package/src/components/SpaceMain/SpaceMain.tsx

@@ -0,0 +1,81 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+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 { 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 className={mx(getSize(5), 'mli-auto')} />}
+              <p>{toLocalizedString(label, t)}</p>
+            </Button>
+          );
+        })}
+    </section>
+  );
+};
+
+const KeyShortcuts = () => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+  return (
+    <section className='mbe-4 col-span-4 md:col-start-5 md:col-end-7 grid grid-cols-subgrid gap-y-2 auto-rows-min'>
+      <h2 className='contents'>
+        <Command weight='duotone' className={mx(getSize(5), 'place-self-center')} />
+        <span className='text-lg col-span-2 md:col-span-1'>{t('keyshortcuts label')}</span>
+      </h2>
+      <div role='none' className='col-start-2 col-end-4 md:col-end-5 pie-2'>
+        <Surface role='keyshortcuts' />
+      </div>
+    </section>
+  );
+};
+
+const spaceMainLayout =
+  'grid gap-y-2 auto-rows-min before:bs-2 before:col-span-5 grid-cols-[var(--rail-size)_var(--rail-size)_1fr_var(--rail-size)] md:grid-cols-[var(--rail-size)_var(--rail-size)_minmax(max-content,1fr)_var(--rail-size)_var(--rail-size)_minmax(max-content,2fr)_var(--rail-size)]';
+
+/**
+ * @deprecated
+ */
+// TODO(wittjosiah): Remove this and re-use space members section as a deck column.
+export const SpaceMain = ({ space, role }: { space: Space; role: 'main' | 'article' }) => {
+  // const { graph } = useGraph();
+  // const _actionsMap = graph.findNode(space.key.toHex())?.actionsMap;
+  const state = space.state.get();
+  const ready = state === SpaceState.SPACE_READY;
+  const Root = role === 'main' ? Main.Content : 'div';
+  return (
+    <ClipboardProvider>
+      <Root
+        {...(role === 'main'
+          ? { classNames: [topbarBlockPaddingStart, 'min-bs-dvh', spaceMainLayout] }
+          : { role: 'none', className: mx(topbarBlockPaddingStart, 'row-span-2', spaceMainLayout) })}
+        data-testid={`spacePlugin.${role}`}
+        data-isready={ready ? 'true' : 'false'}
+      >
+        {/* {actionsMap && <InFlowSpaceActions actionsMap={actionsMap} />} */}
+        {ready && <SpaceMembersSection space={space} />}
+        <KeyShortcuts />
+      </Root>
+    </ClipboardProvider>
+  );
+};