@dxos/plugin-space 0.8.4-main.4a85c3132b → 0.8.4-main.4f23b4e393

package/src/components/AwaitingObject/AwaitingObject.tsx

@@ -0,0 +1,114 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useCallback, useEffect, useState } from 'react';
+
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { useLayout } from '@dxos/app-toolkit/ui';
+import { Filter, Obj } from '@dxos/echo';
+import { useClient } from '@dxos/react-client';
+import { useQuery } from '@dxos/react-client/echo';
+import { Button, Icon, Toast, useTranslation } from '@dxos/react-ui';
+import { osTranslations } from '@dxos/ui-theme';
+
+import { meta } from '#meta';
+import { SpaceOperation } from '#operations';
+
+const WAIT_FOR_OBJECT_TIMEOUT = 3 * 60 * 1_000;
+const TOAST_TIMEOUT = 4 * 60 * 1_000;
+
+export const AwaitingObject = ({ id }: { id: string }) => {
+  const { t } = useTranslation(meta.id);
+  const { invokePromise } = useOperationInvoker();
+  const [open, setOpen] = useState(true);
+  const [waiting, setWaiting] = useState(true);
+  const [found, setFound] = useState(false);
+  const layout = useLayout();
+
+  const client = useClient();
+  const objects = useQuery(client.spaces, Filter.everything());
+
+  useEffect(() => {
+    if (!id) {
+      return;
+    }
+
+    const timeout = setTimeout(() => setWaiting(false), WAIT_FOR_OBJECT_TIMEOUT);
+    return () => clearTimeout(timeout);
+  }, [id]);
+
+  useEffect(() => {
+    if (objects.findIndex((object) => Obj.getDXN(object).toString() === id) > -1) {
+      setFound(true);
+      if (layout.active.includes(id)) {
+        setOpen(false);
+      }
+    }
+  }, [id, objects, layout]);
+
+  const handleClose = useCallback(
+    async () => invokePromise(SpaceOperation.WaitForObject, { id: undefined }),
+    [invokePromise],
+  );
+
+  const handleNavigate = useCallback(() => {
+    void invokePromise(LayoutOperation.Open, { subject: [id] });
+    void handleClose();
+  }, [id, handleClose, invokePromise]);
+
+  return (
+    <Toast.Root open={open} duration={TOAST_TIMEOUT} onOpenChange={setOpen}>
+      <Toast.Body>
+        <Toast.Title classNames='flex items-center gap-2'>
+          {found ? (
+            <>
+              <Icon icon='ph--check-circle--regular' />
+              <span>{t('found-object.label')}</span>
+            </>
+          ) : waiting ? (
+            <>
+              <Icon icon='ph--circle-notch--regular' classNames='animate-spin' />
+              <span>{t('waiting-for-object.label')}</span>
+            </>
+          ) : (
+            <>
+              <Icon icon='ph--circle-dashed--regular' />
+              <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: osTranslations })}</Button>
+            </Toast.Close>
+          </>
+        ) : (
+          <Toast.Close asChild>
+            <Button onClick={handleClose}>
+              {t(waiting ? 'close.label' : 'confirm.label', { ns: osTranslations })}
+            </Button>
+          </Toast.Close>
+        )}
+      </Toast.Actions>
+    </Toast.Root>
+  );
+};

package/src/components/AwaitingObject/index.ts

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

package/src/components/CreateDialog/CreateObjectPanel.tsx

@@ -2,21 +2,21 @@
 // Copyright 2024 DXOS.org
 //
 
-import type * as Schema from 'effect/Schema';
 import React, { useCallback, useMemo } from 'react';
 
-import { type Database, Obj } from '@dxos/echo';
-import { type Collection } from '@dxos/echo';
+import { type Collection, type Database, Obj } from '@dxos/echo';
 import { type AnyProperties } from '@dxos/echo/internal';
-import { type Space, type SpaceId } from '@dxos/react-client/echo';
+import { type SpaceId } from '@dxos/keys';
+import { type Space } from '@dxos/react-client/echo';
 import { toLocalizedString, useDefaultValue, useTranslation } from '@dxos/react-ui';
 import { Form, omitId } from '@dxos/react-ui-form';
-import { SearchList, useSearchListResults } from '@dxos/react-ui-searchlist';
+import { SearchList, useSearchListResults } from '@dxos/react-ui-search';
 import { type MaybePromise } from '@dxos/util';
 
-import { useInputSurfaceLookup } from '../../hooks';
-import { meta } from '../../meta';
-import { type CreateObject } from '../../types';
+import { useInputSurfaceLookup } from '#hooks';
+import { meta } from '#meta';
+import { type SpaceCapabilities } from '#types';
+
 import { getSpaceDisplayName } from '../../util';
 
 /** Display-ready option for the create object search list. */
@@ -26,12 +26,7 @@ export type CreateObjectOption = {
   icon?: string;
 };
 
-export type Metadata = {
-  createObject: CreateObject;
-  inputSchema?: Schema.Schema.AnyNoContext;
-  addToCollectionOnCreate?: boolean;
-  icon?: string;
-};
+export type Metadata = SpaceCapabilities.CreateObjectEntry;
 
 export type CreateObjectPanelProps = {
   options: CreateObjectOption[];
@@ -76,7 +71,7 @@ export const CreateObjectPanel = ({
   const handleSelectOption = useCallback(
     async (id: string) => {
       const metadata = resolve?.(id);
-      if (metadata && !metadata.inputSchema) {
+      if (metadata && !metadata.inputSchema && !metadata.customPanel) {
         await onCreateObject?.({ metadata });
       } else {
         onTypenameChange?.(id);
@@ -85,9 +80,14 @@ export const CreateObjectPanel = ({
     [resolve, onCreateObject],
   );
 
+  const inputSchema = useMemo(
+    () => (metadata && typeof metadata === 'object' && metadata.inputSchema ? omitId(metadata.inputSchema) : undefined),
+    [metadata],
+  );
   const inputSurfaceLookup = useInputSurfaceLookup({ target });
 
-  // TODO(wittjosiah): These inputs should be rolled into a `Form` once it supports the necessary variants.
+  // TODO(wittjosiah): Extends and use react-ui-form to handle variants.
+
   if (!metadata) {
     return <SelectType options={sortedOptions} onChange={handleSelectOption} />;
   }
@@ -96,16 +96,27 @@ export const CreateObjectPanel = ({
     return <SelectSpace spaces={spaces} defaultSpaceId={defaultSpaceId} onChange={onTargetChange} />;
   }
 
+  if (metadata.customPanel) {
+    const CustomPanel = metadata.customPanel;
+    return (
+      <CustomPanel
+        target={target}
+        initialFormValues={initialFormValues}
+        onCreateObject={(data) => handleCreateObject(data)}
+      />
+    );
+  }
+
   if (metadata.inputSchema) {
     return (
       <Form.Root
-        testId='create-object-form'
         autoFocus
-        schema={omitId(metadata.inputSchema)}
+        schema={inputSchema}
         defaultValues={initialFormValues}
-        db={Obj.isObject(target) ? Obj.getDatabase(target) : target}
         fieldProvider={inputSurfaceLookup}
+        db={Obj.isObject(target) ? Obj.getDatabase(target) : target}
         onSave={handleCreateObject}
+        testId='create-object-form'
       >
         <Form.Viewport>
           <Form.Content>
@@ -122,11 +133,46 @@ export const CreateObjectPanel = ({
 
 CreateObjectPanel.displayName = 'CreateObjectPanel';
 
-const SelectSpace = ({
-  spaces,
-  defaultSpaceId,
-  onChange,
-}: { onChange?: (db: Database.Database) => void } & Pick<CreateObjectPanelProps, 'spaces' | 'defaultSpaceId'>) => {
+type SelectTypeProps = Pick<CreateObjectPanelProps, 'options'> & {
+  onChange: (id: string) => void;
+};
+
+const SelectType = ({ options, onChange }: SelectTypeProps) => {
+  const { t } = useTranslation(meta.id);
+
+  const { results, handleSearch } = useSearchListResults({
+    items: options,
+    extract: (option) => option.label,
+  });
+
+  return (
+    <SearchList.Root onSearch={handleSearch}>
+      <SearchList.Input
+        classNames='mb-form-gap'
+        autoFocus
+        data-testid='create-object-form.schema-input'
+        placeholder={t('schema-input.placeholder')}
+      />
+      <SearchList.Viewport>
+        {results.map((option) => (
+          <SearchList.Item
+            key={option.id}
+            value={option.id}
+            label={option.label}
+            icon={option.icon ?? 'ph--placeholder--regular'}
+            onSelect={() => onChange(option.id)}
+          />
+        ))}
+      </SearchList.Viewport>
+    </SearchList.Root>
+  );
+};
+
+type SelectSpaceProps = Pick<CreateObjectPanelProps, 'spaces' | 'defaultSpaceId'> & {
+  onChange?: (db: Database.Database) => void;
+};
+
+const SelectSpace = ({ spaces, defaultSpaceId, onChange }: SelectSpaceProps) => {
   const { t } = useTranslation(meta.id);
 
   const sortedSpaces = useMemo(
@@ -162,62 +208,24 @@ const SelectSpace = ({
 
   return (
     <SearchList.Root onSearch={handleSearch}>
-      <SearchList.Content>
-        <SearchList.Input
-          autoFocus
-          data-testid='create-object-form.space-input'
-          placeholder={t('space input placeholder')}
-        />
-        <SearchList.Viewport>
-          {results.map((space) => (
+      <SearchList.Input
+        classNames='mb-form-gap'
+        autoFocus
+        data-testid='create-object-form.space-input'
+        placeholder={t('space-input.placeholder')}
+      />
+      <SearchList.Viewport>
+        {results.map((space) => {
+          return (
             <SearchList.Item
               key={space.id}
               value={space.id}
-              label={toLocalizedString(
-                getSpaceDisplayName(space, {
-                  personal: space.id === defaultSpaceId,
-                }),
-                t,
-              )}
+              label={toLocalizedString(getSpaceDisplayName(space, { personal: space.id === defaultSpaceId }), t)}
               onSelect={() => onChange?.(space.db)}
-              classNames='flex items-center gap-2'
-            />
-          ))}
-        </SearchList.Viewport>
-      </SearchList.Content>
-    </SearchList.Root>
-  );
-};
-
-const SelectType = ({ options, onChange }: { options: CreateObjectOption[]; onChange: (id: string) => void }) => {
-  const { t } = useTranslation(meta.id);
-
-  const { results, handleSearch } = useSearchListResults({
-    items: options,
-    extract: (option) => option.label,
-  });
-
-  return (
-    <SearchList.Root onSearch={handleSearch}>
-      <SearchList.Content>
-        <SearchList.Input
-          autoFocus
-          data-testid='create-object-form.schema-input'
-          placeholder={t('schema input placeholder')}
-        />
-        <SearchList.Viewport>
-          {results.map((option) => (
-            <SearchList.Item
-              key={option.id}
-              value={option.id}
-              label={option.label}
-              icon={option.icon ?? 'ph--placeholder--regular'}
-              classNames='flex items-center gap-2'
-              onSelect={() => onChange(option.id)}
             />
-          ))}
-        </SearchList.Viewport>
-      </SearchList.Content>
+          );
+        })}
+      </SearchList.Viewport>
     </SearchList.Root>
   );
 };

package/src/components/ForeignKeys/ForeignKeys.tsx

@@ -0,0 +1,57 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { type Key } from '@dxos/echo';
+import { IconButton, List, ListItem, useTranslation } from '@dxos/react-ui';
+
+import { meta } from '#meta';
+
+export type ForeignKeysProps = {
+  keys: Key.ForeignKey[];
+  onDelete?: (key: Key.ForeignKey) => void;
+};
+
+// TODO(wittjosiah): This is a clone of `TokenManager`. Consider a form variant for arrays of read-only objects.
+export const ForeignKeys = ({ keys, onDelete }: ForeignKeysProps) => {
+  return (
+    <List classNames='flex flex-col gap-2'>
+      {keys.map((key) => (
+        <KeyItem key={key.id} forignKey={key} onDelete={onDelete} />
+      ))}
+    </List>
+  );
+};
+
+type KeyItemProps = {
+  forignKey: Key.ForeignKey;
+  onDelete?: (key: Key.ForeignKey) => void;
+};
+
+const KeyItem = ({ forignKey, onDelete }: KeyItemProps) => {
+  const { t } = useTranslation(meta.id);
+
+  const handleDelete = useCallback(() => {
+    onDelete?.(forignKey);
+  }, [forignKey, onDelete]);
+
+  return (
+    <ListItem.Root classNames='px-2'>
+      <ListItem.Heading classNames='flex flex-col grow truncate'>
+        <div>{forignKey.source}</div>
+        <div className='text-description text-sm truncate'>{forignKey.id}</div>
+      </ListItem.Heading>
+      <ListItem.Endcap>
+        <IconButton
+          iconOnly
+          icon='ph--x--regular'
+          variant='ghost'
+          label={t('delete-key.button')}
+          onClick={handleDelete}
+        />
+      </ListItem.Endcap>
+    </ListItem.Root>
+  );
+};

package/src/components/ForeignKeys/index.ts

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

package/src/components/SpaceSettings/SpaceSettings.stories.tsx

@@ -0,0 +1,34 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '#translations';
+
+import { SpaceSettings } from './SpaceSettings';
+
+const meta = {
+  title: 'plugins/plugin-space/components/SpaceSettings',
+  component: SpaceSettings,
+  tags: ['settings'],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof SpaceSettings>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    settings: {
+      showHidden: false,
+    },
+  },
+};

package/src/components/SpaceSettings/SpaceSettings.tsx

@@ -0,0 +1,69 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { isPersonalSpace } from '@dxos/app-toolkit';
+import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { type Space } from '@dxos/react-client/echo';
+import { IconButton, Input, List, ListItem, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Settings as SettingsForm } from '@dxos/react-ui-form';
+
+import { meta } from '#meta';
+import { type Settings } from '#types';
+
+import { getSpaceDisplayName } from '../../util';
+
+export type SpaceSettingsProps = AppSurface.SettingsArticleProps<
+  Settings.Settings,
+  {
+    spaces?: Space[];
+    onOpenSpaceSettings?: (space: Space) => void;
+  }
+>;
+
+export const SpaceSettings = ({ settings, onSettingsChange, spaces, onOpenSpaceSettings }: SpaceSettingsProps) => {
+  const { t } = useTranslation(meta.id);
+
+  return (
+    <SettingsForm.Viewport>
+      <SettingsForm.Section title={t('space-settings.label')} description={t('space-settings.description')}>
+        <SettingsForm.Item title={t('show-hidden-spaces.label')} description={t('show-hidden-spaces.description')}>
+          <Input.Switch
+            disabled={!onSettingsChange}
+            checked={settings.showHidden}
+            onCheckedChange={(checked) => onSettingsChange?.((state) => ({ ...state, showHidden: !!checked }))}
+          />
+        </SettingsForm.Item>
+
+        <SettingsForm.Panel>
+          <Input.Root>
+            <Input.Label>{t('settings.space-list.label')}</Input.Label>
+          </Input.Root>
+          <List classNames='flex flex-col gap-trim-sm'>
+            {spaces?.map((space) => (
+              <ListItem.Root key={space.id} classNames='w-full items-center'>
+                {/* TODO(burdon): Should auto center and truncate; NOTE truncate doesn't work with flex grow. */}
+                <ListItem.Heading classNames='grow truncate min-h-0!'>
+                  {toLocalizedString(
+                    getSpaceDisplayName(space, {
+                      personal: isPersonalSpace(space),
+                    }),
+                    t,
+                  )}
+                </ListItem.Heading>
+                <IconButton
+                  icon='ph--faders--regular'
+                  label={t('settings.open-settings.label')}
+                  disabled={!onOpenSpaceSettings}
+                  onClick={() => onOpenSpaceSettings?.(space)}
+                />
+              </ListItem.Root>
+            ))}
+          </List>
+        </SettingsForm.Panel>
+      </SettingsForm.Section>
+    </SettingsForm.Viewport>
+  );
+};

package/src/components/SpaceSettings/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export { SpaceSettings as default } from './SpaceSettings';

package/src/components/SyncStatus/save-tracker.ts

@@ -4,8 +4,9 @@
 
 import { type CleanupFn } from '@dxos/async';
 import { type Client } from '@dxos/client';
-import { type Space, type SpaceId } from '@dxos/client/echo';
+import { type Space } from '@dxos/client/echo';
 import { Context } from '@dxos/context';
+import { type SpaceId } from '@dxos/keys';
 
 export const createClientSaveTracker = (client: Client, cb: (state: 'saved' | 'saving') => void) => {
   const CleanupFns: Record<SpaceId, CleanupFn> = {};

package/src/components/SyncStatus/status.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-export type Status = 'saving locally' | 'downloading' | 'uploading' | 'offline persisted' | 'remote synced';
+export type Status = 'saving-locally' | 'downloading' | 'uploading' | 'offline-persisted' | 'remote-synced';
 
 export const getStatus = ({
   offline,
@@ -16,29 +16,29 @@ export const getStatus = ({
   needsToDownload: boolean;
 }): Status => {
   if (!saved) {
-    return 'saving locally';
+    return 'saving-locally';
   } else if (!offline && needsToDownload) {
     return 'downloading';
   } else if (!offline && needsToUpload) {
     return 'uploading';
   } else if (offline && !needsToUpload && !needsToDownload) {
-    return 'offline persisted';
+    return 'offline-persisted';
   } else {
-    return 'remote synced';
+    return 'remote-synced';
   }
 };
 
 export const getIcon = (status: Status) => {
   switch (status) {
-    case 'saving locally':
+    case 'saving-locally':
       return 'ph--download--regular';
     case 'downloading':
       return 'ph--cloud-arrow-down--regular';
     case 'uploading':
       return 'ph--cloud-arrow-up--regular';
-    case 'offline persisted':
+    case 'offline-persisted':
       return 'ph--check-circle--regular';
-    case 'remote synced':
+    case 'remote-synced':
       return 'ph--cloud-check--regular';
   }
 };

package/src/components/index.ts

@@ -2,8 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
+import { type ComponentType, lazy } from 'react';
+
 export * from './AwaitingObject';
 export * from './CreateDialog';
-export * from './ObjectDetails';
-export * from './ObjectForm';
+export * from './ForeignKeys';
 export * from './SyncStatus';
+
+export const SpaceSettings: ComponentType<any> = lazy(() => import('./SpaceSettings'));

package/src/constants.ts

@@ -2,10 +2,11 @@
 // Copyright 2025 DXOS.org
 //
 
-import { meta } from './meta';
+import { meta } from '#meta';
 
-export const CREATE_OBJECT_DIALOG = `${meta.id}/CreateObjectDialog`;
-export const CREATE_SPACE_DIALOG = `${meta.id}/CreateSpaceDialog`;
-export const JOIN_DIALOG = `${meta.id}/JoinDialog`;
-export const OBJECT_RENAME_POPOVER = `${meta.id}/ObjectRenamePopover`;
-export const SPACE_RENAME_POPOVER = `${meta.id}/SpaceRenamePopover`;
+export const CREATE_OBJECT_DIALOG = `${meta.id}.CreateObjectDialog`;
+export const CREATE_SPACE_DIALOG = `${meta.id}.CreateSpaceDialog`;
+export const IMPORT_SPACE_DIALOG = `${meta.id}.ImportSpaceDialog`;
+export const JOIN_DIALOG = `${meta.id}.JoinDialog`;
+export const OBJECT_RENAME_POPOVER = `${meta.id}.ObjectRenamePopover`;
+export const SPACE_RENAME_POPOVER = `${meta.id}.SpaceRenamePopover`;