@dxos/plugin-space 0.9.0 → 0.9.1-staging.ee54ba693a

package/src/containers/SpaceHomeRecent/SpaceHomeRecent.tsx

@@ -0,0 +1,103 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import * as Option from 'effect/Option';
+import React, { useCallback, useMemo } from 'react';
+
+import { useCapabilities, useOperationInvoker } from '@dxos/app-framework/ui';
+import { AppCapabilities, LayoutOperation, Paths } from '@dxos/app-toolkit';
+import { Collection, Filter, Obj, Order, Query, Type } from '@dxos/echo';
+import { HiddenAnnotation, getTypeAnnotation } from '@dxos/echo/Annotation';
+import { Kind as EntityKind } from '@dxos/echo/Entity';
+import { type Space, useQuery } from '@dxos/react-client/echo';
+import { Card, Icon, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Masonry } from '@dxos/react-ui-masonry';
+import { getStyles } from '@dxos/ui-theme';
+
+import { meta } from '#meta';
+
+/** Number of recently-modified objects to surface as cards. */
+const RECENT_LIMIT = 10;
+
+type SpaceScopedProps = {
+  space?: Space;
+};
+
+/**
+ * Recent-objects region for the Home article. Queries the most-recently-modified objects of
+ * registered, non-hidden, non-relation, non-collection types and renders them as a Masonry of
+ * tiles. Renders nothing (no heading) when the space has no recent objects — the starter-prompt
+ * contributor (plugin-assistant) fills the empty state instead.
+ */
+export const SpaceHomeRecent = ({ space }: SpaceScopedProps) => {
+  const { t } = useTranslation(meta.profile.key);
+
+  const schemas = useCapabilities(AppCapabilities.Schema);
+  const filter = useMemo(() => {
+    const collectionTypename = Type.getTypename(Collection.Collection);
+    const types = schemas
+      .flat()
+      .filter(Type.isType)
+      .filter((type) => getTypeAnnotation(Type.getSchema(type))?.kind !== EntityKind.Relation)
+      .filter((type) => !HiddenAnnotation.get(Type.getSchema(type)).pipe(Option.getOrElse(() => false)))
+      .filter((type) => Type.getTypename(type) !== collectionTypename);
+    return types.length > 0 ? Filter.or(...types.map((type) => Filter.type(type))) : undefined;
+  }, [schemas]);
+
+  const query = useMemo(
+    () =>
+      Query.select(filter ?? Filter.everything())
+        .orderBy(Order.updated('desc'))
+        .limit(RECENT_LIMIT),
+    [filter],
+  );
+
+  const recent = useQuery(filter && space ? space.db : undefined, query);
+  if (recent.length === 0) {
+    return null;
+  }
+
+  return (
+    <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>
+  );
+};
+
+const RecentObjectTile = ({ data }: { data: Obj.Unknown; index: number }) => {
+  const { invokePromise } = useOperationInvoker();
+  const { t } = useTranslation(meta.profile.key);
+  const typename = Obj.getTypename(data);
+  const label = toLocalizedString(
+    Obj.getLabel(data) ?? (typename ? ['object-name.placeholder', { ns: typename, defaultValue: 'New item' }] : ''),
+    t,
+  );
+  const iconAnnotation = Obj.getIcon(data);
+  const icon = iconAnnotation?.icon ?? 'ph--circle-dashed--regular';
+  const iconStyles = iconAnnotation?.hue ? getStyles(iconAnnotation.hue) : undefined;
+
+  const handleClick = useCallback(() => {
+    void invokePromise(LayoutOperation.Open, { subject: [Paths.getObjectPathFromObject(data)] });
+  }, [invokePromise, data]);
+
+  return (
+    <Card.Root role='button' fullWidth classNames='cursor-pointer' onClick={handleClick}>
+      <Card.Header>
+        <Card.Block>
+          <Icon icon={icon} classNames={iconStyles?.text} />
+        </Card.Block>
+        <Card.Title>{label}</Card.Title>
+      </Card.Header>
+    </Card.Root>
+  );
+};
+
+RecentObjectTile.displayName = 'RecentObjectTile';

package/src/containers/SpaceHomeRecent/index.ts

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

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>
@@ -246,7 +248,7 @@ export type SmallPresenceProps = {
 } & Pick<AttentionGlyphProps, 'attended' | 'containsAttended'>;
 
 export const SmallPresence = ({ count = 0, attended, containsAttended }: SmallPresenceProps) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
 
   return (
     <Tooltip.Trigger asChild content={t('presence.label', { count })} side='bottom'>

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 { getPersonalSpace, getSpacePath, isPersonalSpace, 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';
@@ -25,7 +25,7 @@ const SpaceFormSchema = SpaceForm;
 
 // TODO(wittjosiah): Handle space migrations here?
 export const SpaceSettingsContainer = ({ space }: AppSurface.SpaceArticleProps) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const { invokePromise } = useOperationInvoker();
   const client = useClient();
   const [edgeReplication, setEdgeReplication] = useState(
@@ -78,7 +78,7 @@ export const SpaceSettingsContainer = ({ space }: AppSurface.SpaceArticleProps)
     [space.properties.name, space.properties.icon, space.properties.hue, edgeReplication],
   );
 
-  const personal = isPersonalSpace(space);
+  const personal = AppSpace.isPersonalSpace(space);
 
   const fieldMap = useMemo<FormFieldMap>(
     () => ({
@@ -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>
         );
       },
     }),
@@ -146,7 +150,7 @@ export const SpaceSettingsContainer = ({ space }: AppSurface.SpaceArticleProps)
 
   const repairs = useCapabilities(SpaceCapabilities.Repair);
   const handleRepair = useCallback(async () => {
-    await Promise.all(repairs.map((repair) => repair({ space, isDefault: isPersonalSpace(space) })));
+    await Promise.all(repairs.map((repair) => repair({ space, isDefault: AppSpace.isPersonalSpace(space) })));
   }, [space, repairs]);
 
   const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
@@ -155,9 +159,9 @@ export const SpaceSettingsContainer = ({ space }: AppSurface.SpaceArticleProps)
     try {
       await invokePromise(SpaceOperation.Delete, { space });
       setDeleteConfirmOpen(false);
-      const personalSpace = getPersonalSpace(client);
+      const personalSpace = AppSpace.getPersonalSpace(client);
       if (personalSpace) {
-        void invokePromise(LayoutOperation.SwitchWorkspace, { subject: getSpacePath(personalSpace.id) });
+        void invokePromise(LayoutOperation.SwitchWorkspace, { subject: Paths.getSpacePath(personalSpace.id) });
       }
     } catch (err) {
       log.catch(err, { stage: 'delete: invocation rejected', spaceId: space.id });
@@ -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.id })}
-      >
-        <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>
   );
 };
 

package/src/containers/SyncStatus/SyncStatus.tsx

@@ -30,7 +30,7 @@ export const SyncStatus = () => {
 };
 
 export const SyncStatusIndicator = ({ state, saved }: { state: SpaceSyncStateMap; saved: boolean }) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const summary = getSyncSummary(state);
   const offline = Object.values(state).length === 0;
   const needsToUpload = summary.differentDocuments > 0 || summary.missingOnRemote > 0;
@@ -79,7 +79,7 @@ export const SyncStatusIndicator = ({ state, saved }: { state: SpaceSyncStateMap
 };
 
 const EdgeConnectionPopover = () => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const client = useClient();
   const { status } = useStream(
     () => client.services.services.EdgeAgentService!.queryEdgeStatus(),