@dxos/plugin-space 0.9.1-main.c7dcc2e112 → 0.9.1-staging.ee54ba693a

package/src/containers/SchemaContainer/SchemaContainer.tsx

@@ -8,7 +8,7 @@ import { AppSurface } from '@dxos/app-toolkit/ui';
 import { Type } from '@dxos/echo';
 import { type Space } from '@dxos/react-client/echo';
 import { useTranslation } from '@dxos/react-ui';
-import { Settings } from '@dxos/react-ui-form';
+import { Form } from '@dxos/react-ui-form';
 import { mx } from '@dxos/ui-theme';
 
 import { meta } from '#meta';
@@ -18,22 +18,26 @@ export const SchemaContainer = ({ space }: AppSurface.SpaceArticleProps) => {
   const types = useQuerySpaceTypes(space);
 
   return (
-    <Settings.Viewport>
-      <Settings.Section title={t('schema-verbose.label')} description={t('schema.description')}>
-        <div
-          className={mx([
-            'grid md:col-span-2 grid-cols-subgrid gap-trim-sm items-center',
-            '*:first:mt-0! *:last:mb-0! px-trim-md py-trim-md',
-            'border border-separator rounded-md',
-          ])}
-        >
-          {types.length === 0 && <div className='text-center py-4'>{t('no-schemas-found.message')}</div>}
-          {types.map((type) => (
-            <div key={type.id}>{Type.getTypename(type)}</div>
-          ))}
-        </div>
-      </Settings.Section>
-    </Settings.Viewport>
+    <Form.Root variant='settings'>
+      <Form.Viewport scroll>
+        <Form.Content>
+          <Form.Section title={t('schema-verbose.label')} description={t('schema.description')}>
+            <div
+              className={mx([
+                'grid md:col-span-2 grid-cols-subgrid gap-trim-sm items-center',
+                '*:first:mt-0! *:last:mb-0! px-trim-md py-trim-md',
+                'border border-separator rounded-md',
+              ])}
+            >
+              {types.length === 0 && <div className='text-center py-4'>{t('no-schemas-found.message')}</div>}
+              {types.map((type) => (
+                <div key={type.id}>{Type.getTypename(type)}</div>
+              ))}
+            </div>
+          </Form.Section>
+        </Form.Content>
+      </Form.Viewport>
+    </Form.Root>
   );
 };
 

package/src/containers/SpaceHomeArticle/SpaceHomeArticle.tsx

@@ -46,7 +46,7 @@ export const SpaceHomeArticle = ({ role, attendableId, space }: SpaceHomeArticle
         <Column.Root style={{ gridTemplateRows: 'minmax(0,1fr) auto' }}>
           <ScrollArea.Root orientation='vertical' centered padding>
             <ScrollArea.Viewport>
-              <div className='dx-document flex flex-col gap-4 py-4'>
+              <div className='dx-document flex flex-col gap-4 pb-12'>
                 <Surface.Surface type={SpaceHomeContent} data={{ space }} />
               </div>
             </ScrollArea.Viewport>

package/src/containers/SpaceHomeRecent/SpaceHomeRecent.tsx

@@ -52,21 +52,23 @@ export const SpaceHomeRecent = ({ space }: SpaceScopedProps) => {
         .limit(RECENT_LIMIT),
     [filter],
   );
-  const recent = useQuery(filter && space ? space.db : undefined, query);
 
+  const recent = useQuery(filter && space ? space.db : undefined, query);
   if (recent.length === 0) {
     return null;
   }
 
   return (
-    <>
-      <h2 className='text-sm font-medium text-description'>{t('space-home.recent.heading')}</h2>
-      <Masonry.Root Tile={RecentObjectTile}>
-        <Masonry.Content padding={false}>
-          <Masonry.Viewport classNames='py-2' items={recent} getId={(object) => object.id} />
-        </Masonry.Content>
-      </Masonry.Root>
-    </>
+    <div className='flex justify-center w-full'>
+      <div className='flex flex-col w-full max-w-[40rem]'>
+        <h2 className='text-sm font-medium text-description'>{t('space-home.recent.heading')}</h2>
+        <Masonry.Root Tile={RecentObjectTile}>
+          <Masonry.Content classNames='pt-trim-sm' padding={false} scrollbars={false}>
+            <Masonry.Viewport items={recent} getId={(object) => object.id} />
+          </Masonry.Content>
+        </Masonry.Root>
+      </div>
+    </div>
   );
 };
 
@@ -87,7 +89,7 @@ const RecentObjectTile = ({ data }: { data: Obj.Unknown; index: number }) => {
   }, [invokePromise, data]);
 
   return (
-    <Card.Root role='button' classNames='cursor-pointer' onClick={handleClick}>
+    <Card.Root role='button' fullWidth classNames='cursor-pointer' onClick={handleClick}>
       <Card.Header>
         <Card.Block>
           <Icon icon={icon} classNames={iconStyles?.text} />

package/src/containers/SpacePresence/SpacePresence.tsx

@@ -14,8 +14,6 @@ import {
   Avatar,
   type AvatarContentProps,
   type DxAvatar,
-  List,
-  ListItem,
   Popover,
   type Size,
   type ThemedClassName,
@@ -24,6 +22,7 @@ import {
   useTranslation,
 } from '@dxos/react-ui';
 import { AttentionGlyph, type AttentionGlyphProps, useAttention } from '@dxos/react-ui-attention';
+import { Listbox } from '@dxos/react-ui-list';
 import { ComplexMap, keyToFallback } from '@dxos/util';
 
 import { meta } from '#meta';
@@ -151,24 +150,27 @@ export const FullPresence = (props: MemberPresenceProps) => {
             <Popover.Content side='bottom'>
               <Popover.Arrow />
               <Popover.Viewport classNames='max-h-56'>
-                <List>
-                  {members.map((member) => (
-                    <ListItem.Root
-                      key={member.identity.identityKey.toHex()}
-                      classNames='flex gap-2 items-center cursor-pointer mb-2'
-                      onClick={() => onMemberClick?.(member)}
-                      data-testid='identity-list-item'
-                    >
-                      {/* TODO(Zan): Match always true now we're showing 'members viewing current object'. */}
-                      <PresenceAvatar
-                        identity={member.identity}
-                        size={size}
-                        showName
-                        match={member.currentlyAttended}
-                      />
-                    </ListItem.Root>
-                  ))}
-                </List>
+                <Listbox.Root>
+                  <Listbox.Content aria-label='members'>
+                    {members.map((member) => (
+                      <Listbox.Item
+                        key={member.identity.identityKey.toHex()}
+                        id={member.identity.identityKey.toHex()}
+                        classNames='flex gap-2 items-center cursor-pointer mb-2'
+                        onClick={() => onMemberClick?.(member)}
+                        data-testid='identity-list-item'
+                      >
+                        {/* TODO(Zan): Match always true now we're showing 'members viewing current object'. */}
+                        <PresenceAvatar
+                          identity={member.identity}
+                          size={size}
+                          showName
+                          match={member.currentlyAttended}
+                        />
+                      </Listbox.Item>
+                    ))}
+                  </Listbox.Content>
+                </Listbox.Root>
               </Popover.Viewport>
             </Popover.Content>
           </Popover.Portal>

package/src/containers/SpacePresence/index.ts

@@ -2,5 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
-export { SpacePresence, SmallPresenceLive } from './SpacePresence';
+export { SmallPresenceLive, SpacePresence } from './SpacePresence';
 export { SpacePresence as default } from './SpacePresence';

package/src/{components → containers}/SpaceSettings/SpaceSettings.stories.tsx

@@ -11,7 +11,7 @@ import { translations } from '#translations';
 import { SpaceSettings } from './SpaceSettings';
 
 const meta = {
-  title: 'plugins/plugin-space/components/SpaceSettings',
+  title: 'plugins/plugin-space/containers/SpaceSettings',
   component: SpaceSettings,
   tags: ['settings'],
   decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],

package/src/containers/SpaceSettings/SpaceSettings.tsx

@@ -0,0 +1,75 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { AppSpace } from '@dxos/app-toolkit';
+import { type Space } from '@dxos/react-client/echo';
+import { IconButton, Input, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Form } from '@dxos/react-ui-form';
+import { Listbox } from '@dxos/react-ui-list';
+
+import { meta } from '#meta';
+import { type Settings } from '#types';
+
+import { getSpaceDisplayName } from '../../util';
+
+export type SpaceSettingsProps = {
+  spaces?: Space[];
+  onOpenSpaceSettings?: (space: Space) => void;
+  settings?: Settings.Settings;
+  onSettingsChange?: (updater: (prev: Settings.Settings) => Settings.Settings) => void;
+};
+
+export const SpaceSettings = ({ spaces, onOpenSpaceSettings, settings, onSettingsChange }: SpaceSettingsProps) => {
+  const { t } = useTranslation(meta.profile.key);
+
+  return (
+    <Form.Root variant='settings'>
+      <Form.Viewport scroll>
+        <Form.Content>
+          <Form.Section title={t('plugin.name')}>
+            <Form.Row label={t('settings.show-hidden.label')} description={t('settings.show-hidden.description')}>
+              <Input.Root>
+                <Input.Switch
+                  disabled={!onSettingsChange}
+                  checked={settings?.showHidden}
+                  onCheckedChange={(checked) => onSettingsChange?.((s) => ({ ...s, showHidden: !!checked }))}
+                />
+              </Input.Root>
+            </Form.Row>
+          </Form.Section>
+          <Form.Section title={t('space-settings.label')} description={t('space-settings.description')}>
+            <Form.Row label={t('settings.space-list.label')} description={t('settings.space-list.description')}>
+              <Listbox.Root>
+                <Listbox.Content aria-label={t('settings.space-list.label')} classNames='w-full gap-trim-sm'>
+                  {spaces?.map((space) => (
+                    <Listbox.Item key={space.id} id={space.id} classNames='w-full items-center'>
+                      {/* TODO(burdon): Should auto center and truncate; NOTE truncate doesn't work with flex grow. */}
+                      <Listbox.ItemLabel classNames='min-h-0!'>
+                        {toLocalizedString(
+                          getSpaceDisplayName(space, {
+                            personal: AppSpace.isPersonalSpace(space),
+                          }),
+                          t,
+                        )}
+                      </Listbox.ItemLabel>
+                      <IconButton
+                        icon='ph--faders--regular'
+                        iconOnly
+                        label={t('settings.open-settings.label')}
+                        disabled={!onOpenSpaceSettings}
+                        onClick={() => onOpenSpaceSettings?.(space)}
+                      />
+                    </Listbox.Item>
+                  ))}
+                </Listbox.Content>
+              </Listbox.Root>
+            </Form.Row>
+          </Form.Section>
+        </Form.Content>
+      </Form.Viewport>
+    </Form.Root>
+  );
+};

package/src/containers/SpaceSettingsContainer/SpaceSettingsContainer.tsx

@@ -6,7 +6,7 @@ import * as Schema from 'effect/Schema';
 import React, { type ChangeEvent, useCallback, useMemo, useState } from 'react';
 
 import { useCapabilities, useOperationInvoker } from '@dxos/app-framework/ui';
-import { AppSpace, Paths, LayoutOperation } from '@dxos/app-toolkit';
+import { AppSpace, LayoutOperation, Paths } from '@dxos/app-toolkit';
 import { AppSurface } from '@dxos/app-toolkit/ui';
 import { Obj } from '@dxos/echo';
 import { log } from '@dxos/log';
@@ -14,7 +14,7 @@ import { SpaceArchive } from '@dxos/protocols/proto/dxos/client/services';
 import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
 import { useClient } from '@dxos/react-client';
 import { Button, Dialog, DropdownMenu, Icon, IconButton, Input, useTranslation } from '@dxos/react-ui';
-import { Form, type FormFieldMap, Settings } from '@dxos/react-ui-form';
+import { Form, type FormFieldMap } from '@dxos/react-ui-form';
 import { HuePicker, IconPicker } from '@dxos/react-ui-pickers';
 
 import { meta } from '#meta';
@@ -90,14 +90,16 @@ export const SpaceSettingsContainer = ({ space }: AppSurface.SpaceArticleProps)
               [onValueChange, type],
             );
             return (
-              <Settings.Item title={label} description={t('display-name.description')}>
-                <Input.TextInput
-                  value={getValue()}
-                  onChange={handleChange}
-                  placeholder={t('display-name-input.placeholder')}
-                  classNames='min-w-64'
-                />
-              </Settings.Item>
+              <Form.Row label={label} description={t('display-name.description')}>
+                <Input.Root>
+                  <Input.TextInput
+                    value={getValue()}
+                    onChange={handleChange}
+                    placeholder={t('display-name-input.placeholder')}
+                    classNames='min-w-64'
+                  />
+                </Input.Root>
+              </Form.Row>
             );
           },
       icon: personal
@@ -106,31 +108,33 @@ export const SpaceSettingsContainer = ({ space }: AppSurface.SpaceArticleProps)
             const handleChange = useCallback((icon: string) => onValueChange(type, icon), [onValueChange, type]);
             const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
             return (
-              <Settings.Item title={label} description={t('icon.description')}>
+              <Form.Row label={label} description={t('icon.description')}>
                 <IconPicker
                   value={getValue()}
                   onChange={handleChange}
                   onReset={handleReset}
                   classNames='justify-self-end'
                 />
-              </Settings.Item>
+              </Form.Row>
             );
           },
       hue: ({ type, label, getValue, onValueChange }) => {
         const handleChange = useCallback((nextHue: string) => onValueChange(type, nextHue), [onValueChange, type]);
         const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
         return (
-          <Settings.Item title={label} description={t('hue.description')}>
+          <Form.Row label={label} description={t('hue.description')}>
             <HuePicker value={getValue()} onChange={handleChange} onReset={handleReset} classNames='justify-self-end' />
-          </Settings.Item>
+          </Form.Row>
         );
       },
       edgeReplication: ({ type, label, getValue, onValueChange }) => {
         const handleChange = useCallback((checked: boolean) => onValueChange(type, checked), [onValueChange, type]);
         return (
-          <Settings.Item title={label} description={t('edge-replication.description')}>
-            <Input.Switch checked={getValue()} onCheckedChange={handleChange} classNames='justify-self-end' />
-          </Settings.Item>
+          <Form.Row label={label} description={t('edge-replication.description')}>
+            <Input.Root>
+              <Input.Switch checked={getValue()} onCheckedChange={handleChange} classNames='justify-self-end' />
+            </Input.Root>
+          </Form.Row>
         );
       },
     }),
@@ -171,97 +175,102 @@ export const SpaceSettingsContainer = ({ space }: AppSurface.SpaceArticleProps)
   }, [space, client, invokePromise, t]);
 
   return (
-    <Settings.Viewport>
-      <Settings.Section
-        title={t('space-properties-settings-verbose.label')}
-        description={t('space-properties-settings.description', { ns: meta.profile.key })}
-      >
-        <Form.Root
-          key={space.id}
-          fieldMap={fieldMap}
-          schema={SpaceFormSchema}
-          defaultValues={defaultValues}
-          onValuesChanged={handleValuesChanged}
-        >
-          <Form.FieldSet />
-        </Form.Root>
-      </Settings.Section>
+    <Form.Root
+      variant='settings'
+      key={space.id}
+      fieldMap={fieldMap}
+      schema={SpaceFormSchema}
+      defaultValues={defaultValues}
+      onValuesChanged={handleValuesChanged}
+    >
+      <Form.Viewport scroll>
+        <Form.Content>
+          <Form.Section
+            title={t('space-properties-settings-verbose.label')}
+            description={t('space-properties-settings.description', { ns: meta.profile.key })}
+          >
+            <Form.FieldSet />
+          </Form.Section>
 
-      <Settings.Section title={t('space-controls.title')} description={t('space-controls.description')}>
-        <Settings.Item title={t('space-key.title')} description={t('space-key.description')}>
-          <div className='flex items-center gap-2'>
-            <Input.Root>
-              <Input.TextInput value={space.key.toHex()} disabled classNames='flex-1 font-mono text-xs' />
-            </Input.Root>
-            <IconButton
-              icon='ph--copy--regular'
-              iconOnly
-              label={t('copy-space-key.label')}
-              onClick={() => {
-                void navigator.clipboard.writeText(space.key.toHex());
-              }}
-            />
-          </div>
-        </Settings.Item>
-        <Settings.Item title={t('backup-space.title')} description={t('backup-space.description')}>
-          <DropdownMenu.Root>
-            <DropdownMenu.Trigger asChild>
-              <Button>
-                {t('download-backup.label')}
-                <Icon icon='ph--caret-down--regular' size={4} classNames='mis-2' />
-              </Button>
-            </DropdownMenu.Trigger>
-            <DropdownMenu.Content>
-              <DropdownMenu.Viewport>
-                <DropdownMenu.Item onClick={handleBackupBinary}>{t('download-backup-binary.label')}</DropdownMenu.Item>
-                <DropdownMenu.Item onClick={handleBackupJson}>{t('download-backup-json.label')}</DropdownMenu.Item>
-              </DropdownMenu.Viewport>
-            </DropdownMenu.Content>
-          </DropdownMenu.Root>
-        </Settings.Item>
-        <Settings.Item title={t('repair-space.title')} description={t('repair-space.description')}>
-          <Button onClick={handleRepair}>{t('repair-space.label')}</Button>
-        </Settings.Item>
-      </Settings.Section>
+          <Form.Section title={t('space-controls.title')} description={t('space-controls.description')}>
+            <Form.Row label={t('space-id.title')} description={t('space-id.description')}>
+              <div className='flex items-center gap-2'>
+                <Input.Root>
+                  <Input.TextInput value={space.id} disabled classNames='flex-1 font-mono text-xs' />
+                </Input.Root>
+                <IconButton
+                  icon='ph--copy--regular'
+                  iconOnly
+                  label={t('copy-space-id.label')}
+                  onClick={() => {
+                    void navigator.clipboard.writeText(space.id);
+                  }}
+                />
+              </div>
+            </Form.Row>
+            <Form.Row label={t('backup-space.title')} description={t('backup-space.description')}>
+              <DropdownMenu.Root>
+                <DropdownMenu.Trigger asChild>
+                  <Button>
+                    {t('download-backup.label')}
+                    <Icon icon='ph--caret-down--regular' size={4} classNames='mis-2' />
+                  </Button>
+                </DropdownMenu.Trigger>
+                <DropdownMenu.Content>
+                  <DropdownMenu.Viewport>
+                    <DropdownMenu.Item onClick={handleBackupBinary}>
+                      {t('download-backup-binary.label')}
+                    </DropdownMenu.Item>
+                    <DropdownMenu.Item onClick={handleBackupJson}>{t('download-backup-json.label')}</DropdownMenu.Item>
+                  </DropdownMenu.Viewport>
+                </DropdownMenu.Content>
+              </DropdownMenu.Root>
+            </Form.Row>
+            <Form.Row label={t('repair-space.title')} description={t('repair-space.description')}>
+              <Button onClick={handleRepair}>{t('repair-space.label')}</Button>
+            </Form.Row>
+          </Form.Section>
 
-      <Settings.Section title={t('danger-zone.title')} description={t('danger-zone.description')}>
-        {!personal && (
-          <Settings.Item title={t('delete-space.title')} description={t('delete-space.description')}>
-            <Dialog.Root open={deleteConfirmOpen} onOpenChange={setDeleteConfirmOpen}>
-              <Dialog.Trigger asChild>
-                <Button variant='destructive' data-testid='spaceSettings.deleteSpace'>
-                  {t('delete-space.label')}
-                </Button>
-              </Dialog.Trigger>
-              <Dialog.Portal>
-                <Dialog.Overlay>
-                  <Dialog.Content>
-                    <Dialog.Header>
-                      <Dialog.Title>{t('delete-space-confirm.title')}</Dialog.Title>
-                    </Dialog.Header>
-                    <Dialog.Body>
-                      <Dialog.Description>{t('delete-space-confirm.description')}</Dialog.Description>
-                      <div className='flex justify-end gap-2 mbs-4'>
-                        <Dialog.Close asChild>
-                          <Button>{t('cancel.label')}</Button>
-                        </Dialog.Close>
-                        <Button
-                          variant='destructive'
-                          onClick={handleDelete}
-                          data-testid='spaceSettings.deleteSpaceConfirm'
-                        >
-                          {t('delete-space.label')}
-                        </Button>
-                      </div>
-                    </Dialog.Body>
-                  </Dialog.Content>
-                </Dialog.Overlay>
-              </Dialog.Portal>
-            </Dialog.Root>
-          </Settings.Item>
-        )}
-      </Settings.Section>
-    </Settings.Viewport>
+          {!personal && (
+            <Form.Section title={t('danger-zone.title')} description={t('danger-zone.description')}>
+              <Form.Row label={t('delete-space.title')} description={t('delete-space.description')}>
+                <Dialog.Root open={deleteConfirmOpen} onOpenChange={setDeleteConfirmOpen}>
+                  <Dialog.Trigger asChild>
+                    <Button variant='destructive' data-testid='spaceSettings.deleteSpace'>
+                      {t('delete-space.label')}
+                    </Button>
+                  </Dialog.Trigger>
+                  <Dialog.Portal>
+                    <Dialog.Overlay>
+                      <Dialog.Content>
+                        <Dialog.Header>
+                          <Dialog.Title>{t('delete-space-confirm.title')}</Dialog.Title>
+                        </Dialog.Header>
+                        <Dialog.Body>
+                          <Dialog.Description>{t('delete-space-confirm.description')}</Dialog.Description>
+                          <div className='flex justify-end gap-2 mbs-4'>
+                            <Dialog.Close asChild>
+                              <Button>{t('cancel.label')}</Button>
+                            </Dialog.Close>
+                            <Button
+                              variant='destructive'
+                              onClick={handleDelete}
+                              data-testid='spaceSettings.deleteSpaceConfirm'
+                            >
+                              {t('delete-space.label')}
+                            </Button>
+                          </div>
+                        </Dialog.Body>
+                      </Dialog.Content>
+                    </Dialog.Overlay>
+                  </Dialog.Portal>
+                </Dialog.Root>
+              </Form.Row>
+            </Form.Section>
+          )}
+        </Form.Content>
+      </Form.Viewport>
+    </Form.Root>
   );
 };