@dxos/plugin-space 0.8.4-main.70d3990 → 0.8.4-main.7996785055

package/src/components/SpaceSettings/SpaceSettingsContainer.tsx

@@ -1,224 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import * as Function from 'effect/Function';
-import * as Schema from 'effect/Schema';
-import React, { type ChangeEvent, useCallback, useMemo, useState } from 'react';
-
-import { LayoutAction, chain, createIntent } from '@dxos/app-framework';
-import { useCapabilities, useIntentDispatcher } from '@dxos/app-framework/react';
-import { log } from '@dxos/log';
-import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
-import { useClient } from '@dxos/react-client';
-import { type Space, SpaceState } from '@dxos/react-client/echo';
-import { Button, Input, useFileDownload, useMulticastObservable, useTranslation } from '@dxos/react-ui';
-import {
-  ControlItem,
-  ControlItemInput,
-  ControlPage,
-  ControlSection,
-  Form,
-  type InputComponent,
-} from '@dxos/react-ui-form';
-import { HuePicker, IconPicker } from '@dxos/react-ui-pickers';
-import { StackItem } from '@dxos/react-ui-stack';
-
-import { SpaceCapabilities } from '../../capabilities';
-import { meta } from '../../meta';
-import { SpaceAction, SpaceForm } from '../../types';
-
-const FormSchema = SpaceForm.pipe(
-  Schema.extend(
-    Schema.Struct({
-      archived: Schema.Boolean.annotations({ title: 'Archive Space' }),
-    }),
-  ),
-);
-
-export type SpaceSettingsContainerProps = {
-  space: Space;
-};
-
-// TODO(wittjosiah): Handle space migrations here?
-export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) => {
-  const { t } = useTranslation(meta.id);
-  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 handleSave = useCallback(
-    (properties: Schema.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(
-          Function.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 }));
-      }
-    },
-    [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((icon: string) => onValueChange(type, icon), [onValueChange, type]);
-        const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
-        return (
-          <ControlItem title={label} description={t('icon description')}>
-            <IconPicker
-              value={getValue()}
-              onChange={handleChange}
-              onReset={handleReset}
-              classNames='justify-self-end'
-            />
-          </ControlItem>
-        );
-      },
-      hue: ({ type, label, getValue, onValueChange }) => {
-        const handleChange = useCallback((nextHue: string) => onValueChange(type, nextHue), [onValueChange, type]);
-        const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
-        return (
-          <ControlItem title={label} description={t('hue description')}>
-            <HuePicker value={getValue()} onChange={handleChange} onReset={handleReset} classNames='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}
-              variant={getValue() ? 'default' : 'destructive'}
-              onClick={handleChange}
-            >
-              {getValue() ? t('unarchive space label') : t('archive space label')}
-            </Button>
-          </ControlItemInput>
-        );
-      },
-    }),
-    [t, space],
-  );
-
-  const download = useFileDownload();
-  const handleBackup = useCallback(async () => {
-    const archive = await space.internal.export();
-    download(new Blob([archive.contents as Uint8Array<ArrayBuffer>]), archive.filename);
-  }, [space, download]);
-
-  const repairs = useCapabilities(SpaceCapabilities.Repair);
-  const handleRepair = useCallback(async () => {
-    await Promise.all(repairs.map((repair) => repair({ space, isDefault: client.spaces.default === space })));
-  }, [client, space, repairs]);
-
-  return (
-    <StackItem.Content scrollable>
-      <ControlPage>
-        <ControlSection
-          title={t('space properties settings verbose label', { ns: meta.id })}
-          description={t('space properties settings description', {
-            ns: meta.id,
-          })}
-        >
-          <Form
-            schema={FormSchema}
-            values={values}
-            autoSave
-            onSave={handleSave}
-            Custom={customElements}
-            outerSpacing={false}
-            classNames='container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content]'
-          />
-        </ControlSection>
-        <ControlSection
-          title={t('space controls title', { ns: meta.id })}
-          description={t('space controls description', { ns: meta.id })}
-        >
-          <div role='none' className='container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content]'>
-            <ControlItemInput
-              title={t('backup space title', { ns: meta.id })}
-              description={t('backup space description', { ns: meta.id })}
-            >
-              <Button onClick={handleBackup}>{t('download backup label')}</Button>
-            </ControlItemInput>
-            <ControlItemInput
-              title={t('repair space title', { ns: meta.id })}
-              description={t('repair space description', { ns: meta.id })}
-            >
-              <Button onClick={handleRepair}>{t('repair space label')}</Button>
-            </ControlItemInput>
-          </div>
-        </ControlSection>
-      </ControlPage>
-    </StackItem.Content>
-  );
-};

package/src/components/SpaceSettings/index.ts

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

package/src/components/SyncStatus/InlineSyncStatus.tsx

@@ -1,62 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import * as Option from 'effect/Option';
-import React, { useEffect, useState } from 'react';
-
-import { useAppGraph } from '@dxos/app-framework/react';
-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, useSpaceSyncState } from '@dxos/react-client/echo';
-import { Tooltip, useTranslation } from '@dxos/react-ui';
-import { AttentionGlyph, useAttended, useAttention } from '@dxos/react-ui-attention';
-
-import { usePath } from '../../hooks';
-import { meta } from '../../meta';
-
-const useEdgeStatus = (): EdgeStatus.ConnectionState => {
-  const [status, setStatus] = useState(EdgeStatus.ConnectionState.NOT_CONNECTED);
-  const client = useClient();
-  useEffect(() => {
-    client.services.services.EdgeAgentService?.queryEdgeStatus().subscribe(({ status }) => {
-      setStatus(status.state);
-    });
-  }, [client]);
-
-  return status;
-};
-
-export const InlineSyncStatus = ({ space, open }: { space: Space; open?: boolean }) => {
-  const { t } = useTranslation(meta.id);
-  const id = space.id;
-  const { hasAttention, isAncestor, isRelated } = useAttention(id);
-  const isAttended = hasAttention || isAncestor || isRelated;
-
-  // TODO(wittjosiah): If the attended node is deep in the graph and the graph is not fully loaded
-  //   this will result in an empty path until the graph is connected.
-  // TODO(wittjosiah): Consider using this indicator for all open nodes instead of just attended.
-  const { graph } = useAppGraph();
-  const attended = useAttended();
-  const startOfAttention = attended.at(-1);
-  const path = usePath(graph, startOfAttention);
-  const containsAttended = !open && !isAttended && id && Option.isSome(path) ? path.value.includes(id) : false;
-
-  const connectedToEdge = useEdgeStatus() === EdgeStatus.ConnectionState.CONNECTED;
-  // TODO(wittjosiah): This is not reactive.
-  const edgeSyncEnabled = space.internal.data.edgeReplication === EdgeReplicationSetting.ENABLED;
-  const syncState = useSpaceSyncState(space);
-  const syncing = connectedToEdge && edgeSyncEnabled && syncState && syncState.missingOnLocal > 0;
-
-  return (
-    <Tooltip.Trigger asChild content={t('syncing label')} side='bottom'>
-      <AttentionGlyph
-        syncing={syncing}
-        attended={isAttended}
-        containsAttended={containsAttended}
-        classNames='self-center mie-1'
-      />
-    </Tooltip.Trigger>
-  );
-};

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

@@ -1,40 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-
-import { withClientProvider } from '@dxos/react-client/testing';
-import { withTheme } from '@dxos/react-ui/testing';
-
-import { translations } from '../../translations';
-
-import { SyncStatusIndicator } from './SyncStatus';
-
-const meta = {
-  title: 'plugins/plugin-space/SyncStatusIndicator',
-  component: SyncStatusIndicator,
-  decorators: [withTheme, withClientProvider({ createIdentity: true })],
-  parameters: {
-    layout: 'centered',
-    translations,
-  },
-} satisfies Meta<typeof SyncStatusIndicator>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    state: {},
-    saved: true,
-  },
-};
-
-export const Saving: Story = {
-  args: {
-    state: {},
-    saved: false,
-  },
-};

package/src/components/SyncStatus/SyncStatus.tsx

@@ -1,155 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { useEffect, useState } from 'react';
-
-import { StatusBar } from '@dxos/plugin-status-bar';
-import { EdgeStatus } from '@dxos/protocols/proto/dxos/client/services';
-import { type QueryEdgeStatusResponse } from '@dxos/protocols/proto/dxos/client/services';
-import { useClient } from '@dxos/react-client';
-import { useStream } from '@dxos/react-client/devtools';
-import { type SpaceSyncStateMap, getSyncSummary, useSyncState } from '@dxos/react-client/echo';
-import { Icon, Popover, useTranslation } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-import { Unit, type UnitFormat } from '@dxos/util';
-
-import { meta } from '../../meta';
-
-import { createClientSaveTracker } from './save-tracker';
-import { getIcon, getStatus } from './status';
-
-const SYNC_STALLED_TIMEOUT = 5_000;
-
-export const SyncStatus = () => {
-  const client = useClient();
-  const state = useSyncState();
-  const [saved, setSaved] = useState(true);
-  useEffect(() => createClientSaveTracker(client, (state) => setSaved(state === 'saved')), []);
-
-  return <SyncStatusIndicator state={state} saved={saved} />;
-};
-
-export const SyncStatusIndicator = ({ state, saved }: { state: SpaceSyncStateMap; saved: boolean }) => {
-  const { t } = useTranslation(meta.id);
-  const summary = getSyncSummary(state);
-  const offline = Object.values(state).length === 0;
-  const needsToUpload = summary.differentDocuments > 0 || summary.missingOnRemote > 0;
-  const needsToDownload = summary.differentDocuments > 0 || summary.missingOnLocal > 0;
-  const status = getStatus({ offline, saved, needsToUpload, needsToDownload });
-
-  const [classNames, setClassNames] = useState<string>();
-  useEffect(() => {
-    setClassNames(undefined);
-    if (offline || (!needsToUpload && !needsToDownload)) {
-      return;
-    }
-
-    const t = setTimeout(() => {
-      // TODO(wittjosiah): Use semantic color tokens.
-      setClassNames('text-orange-500');
-    }, SYNC_STALLED_TIMEOUT);
-    return () => clearTimeout(t);
-  }, [offline, needsToUpload, needsToDownload]);
-
-  const title = t(`${status} label`);
-  const icon = <Icon icon={getIcon(status)} classNames={classNames} />;
-
-  return (
-    <Popover.Root>
-      <Popover.Trigger asChild>
-        <StatusBar.Item title={title}>{icon}</StatusBar.Item>
-      </Popover.Trigger>
-      <Popover.Portal>
-        <Popover.Content>
-          <EdgeConnectionPopover />
-          <Popover.Arrow />
-        </Popover.Content>
-      </Popover.Portal>
-    </Popover.Root>
-  );
-};
-
-const useEdgeStatus = (): EdgeStatus | undefined => {
-  const client = useClient();
-  const { status } = useStream(
-    () => client.services.services.EdgeAgentService!.queryEdgeStatus(),
-    {} as QueryEdgeStatusResponse,
-  );
-  return status;
-};
-
-const EdgeConnectionPopover = () => {
-  const status = useEdgeStatus();
-  const { t } = useTranslation(meta.id);
-
-  const isConnected = status?.state === EdgeStatus.ConnectionState.CONNECTED;
-
-  return (
-    <div className='min-is-[240px] p-2'>
-      {/* Connection Status Header */}
-      <div className='flex items-center gap-2 mbe-2'>
-        <Icon
-          icon={isConnected ? 'ph--check-circle--regular' : 'ph--warning-circle--regular'}
-          classNames={mx(isConnected ? 'text-successText' : 'text-errorText animate-pulse')}
-        />
-        <span className='font-medium text-sm'>
-          {isConnected ? t('sync edge connected label') : t('sync edge disconnected label')}
-        </span>
-      </div>
-
-      {/* Connection Details */}
-      {status?.state === EdgeStatus.ConnectionState.NOT_CONNECTED && (
-        <div className='flex items-center gap-2 text-sm text-description'>
-          <Icon icon='ph--cloud-x--regular' />
-          <span>{t('sync no connection label')}</span>
-        </div>
-      )}
-
-      {status?.state === EdgeStatus.ConnectionState.CONNECTED && (
-        <div className='space-y-2'>
-          {/* Latency */}
-          <div className='flex items-center justify-between text-sm'>
-            <div className='flex items-center gap-2 text-description'>
-              <Icon icon='ph--timer--regular' />
-              <span>{t('sync latency label')}</span>
-            </div>
-            <UnitValue value={status.rtt} format={Unit.Millisecond} />
-          </div>
-
-          {/* Upload Speed */}
-          <div className='flex items-center justify-between text-sm'>
-            <div className='flex items-center gap-2 text-description'>
-              <Icon icon='ph--arrow-up--regular' />
-              <span>{t('sync upload label')}</span>
-            </div>
-            <UnitValue value={status.rateBytesUp} format={Unit.Kilobyte} suffix='/s' />
-          </div>
-
-          {/* Download Speed */}
-          <div className='flex items-center justify-between text-sm'>
-            <div className='flex items-center gap-2 text-sm text-description'>
-              <Icon icon='ph--arrow-down--regular' />
-              <span>{t('sync download label')}</span>
-            </div>
-            <UnitValue value={status.rateBytesDown} format={Unit.Kilobyte} suffix='/s' />
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-// TODO(burdon): Factor out.
-const UnitValue = ({ value: input, format, suffix }: { value: number; format: UnitFormat; suffix?: string }) => {
-  const { formattedValue, unit } = format(input);
-  return (
-    <span className='font-mono'>
-      {formattedValue}
-      <span className='mis-1 text-subdued'>
-        {unit.symbol}
-        {suffix}
-      </span>
-    </span>
-  );
-};

package/src/components/ViewEditor.tsx

@@ -1,98 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import * as Schema from 'effect/Schema';
-import React, { useCallback, useState } from 'react';
-
-import { createIntent } from '@dxos/app-framework';
-import { useIntentDispatcher } from '@dxos/app-framework/react';
-import { DXN, Filter, Obj, Query, type QueryAST, Tag, Type } from '@dxos/echo';
-import { useClient } from '@dxos/react-client';
-import { getSpace, useQuery } from '@dxos/react-client/echo';
-import { useAsyncEffect } from '@dxos/react-ui';
-import { ViewEditor as NaturalViewEditor } from '@dxos/react-ui-form';
-import { View } from '@dxos/schema';
-
-import { resolveSchemaWithClientAndSpace } from '../helpers';
-import { useTypeOptions } from '../hooks';
-import { SpaceAction } from '../types';
-
-export type ViewEditorProps = { view: View.View };
-
-export const ViewEditor = ({ view }: ViewEditorProps) => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const client = useClient();
-  const space = getSpace(view);
-  const [schema, setSchema] = useState<Schema.Schema.AnyNoContext>(() => Schema.Struct({}));
-  const tags = useQuery(space, Filter.type(Tag.Tag));
-  const types = useTypeOptions({
-    space,
-    annotation: {
-      location: ['database', 'runtime'],
-      kind: ['user'],
-      registered: ['registered'],
-    },
-  });
-
-  useAsyncEffect(async () => {
-    if (!view?.query || !space) {
-      return;
-    }
-
-    const foundSchema = await resolveSchemaWithClientAndSpace(client, space, view.query.ast);
-    if (foundSchema && foundSchema !== schema) {
-      setSchema(() => foundSchema);
-    }
-  }, [client, space, view, schema]);
-
-  const handleQueryChanged = useCallback(
-    async (newQuery: QueryAST.Query, target?: string) => {
-      if (!view || !space) {
-        return;
-      }
-
-      const queue = target && DXN.tryParse(target) ? target : undefined;
-      const query = queue ? Query.fromAst(newQuery).options({ queues: [queue] }) : Query.fromAst(newQuery);
-      view.query.ast = query.ast;
-      const newSchema = await resolveSchemaWithClientAndSpace(client, space, query.ast);
-      if (!newSchema) {
-        return;
-      }
-
-      const newView = View.make({
-        query,
-        jsonSchema: Type.toJsonSchema(newSchema),
-      });
-      view.projection = Obj.getSnapshot(newView).projection;
-
-      setSchema(() => newSchema);
-    },
-    [view, schema],
-  );
-
-  const handleDelete = useCallback(
-    (fieldId: string) => {
-      void dispatch(createIntent(SpaceAction.DeleteField, { view, fieldId }));
-    },
-    [dispatch, view],
-  );
-
-  if (!space || !schema) {
-    return null;
-  }
-
-  return (
-    <NaturalViewEditor
-      registry={space.db.schemaRegistry}
-      schema={schema}
-      view={view}
-      mode='tag'
-      outerSpacing={false}
-      tags={tags}
-      types={types}
-      onQueryChanged={handleQueryChanged}
-      onDelete={Type.isMutable(schema) ? handleDelete : undefined}
-    />
-  );
-};

package/src/events.ts

@@ -1,15 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Events, defineEvent } from '@dxos/app-framework';
-
-import { meta } from './meta';
-
-export namespace SpaceEvents {
-  export const StateReady = Events.createStateEvent(`${meta.id}/event/state-ready`);
-  export const SetupSettingsPanel = defineEvent(`${meta.id}/event/setup-settings-panel`);
-  export const DefaultSpaceReady = defineEvent(`${meta.id}/event/default-space-ready`);
-  export const SpaceCreated = defineEvent(`${meta.id}/event/space-created`);
-  export const SchemaAdded = defineEvent(`${meta.id}/event/schema-added`);
-}