@dxos/plugin-space 0.6.13-main.548ca8d → 0.6.13-staging.1e988a3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-space",
-  "version": "0.6.13-main.548ca8d",
+  "version": "0.6.13-staging.1e988a3",
   "description": "DXOS Surface plugin for DXOS ECHO Spaces",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,24 +10,21 @@
     ".": {
       "browser": "./dist/lib/browser/index.mjs",
       "node": {
-        "require": "./dist/lib/node/index.cjs",
-        "default": "./dist/lib/node-esm/index.mjs"
+        "default": "./dist/lib/node/index.cjs"
       },
       "types": "./dist/types/src/index.d.ts"
     },
     "./meta": {
       "browser": "./dist/lib/browser/meta.mjs",
       "node": {
-        "require": "./dist/lib/node/meta.cjs",
-        "default": "./dist/lib/node-esm/meta.mjs"
+        "default": "./dist/lib/node/meta.cjs"
       },
       "types": "./dist/types/src/meta.d.ts"
     },
     "./types": {
       "browser": "./dist/lib/browser/types/index.mjs",
       "node": {
-        "require": "./dist/lib/node/types/index.cjs",
-        "default": "./dist/lib/node-esm/types/index.mjs"
+        "default": "./dist/lib/node/types/index.cjs"
       },
       "types": "./dist/types/src/types/index.d.ts"
     }
@@ -48,40 +45,34 @@
     "src"
   ],
   "dependencies": {
-    "@effect/schema": "^0.75.1",
     "@preact/signals-core": "^1.6.0",
     "jszip": "^3.10.1",
     "localforage": "^1.10.0",
     "lodash.get": "^4.4.2",
     "react-drag-drop-files": "^2.3.8",
     "react-is": "~18.2.0",
-    "@dxos/app-framework": "0.6.13-main.548ca8d",
-    "@dxos/async": "0.6.13-main.548ca8d",
-    "@dxos/client": "0.6.13-main.548ca8d",
-    "@dxos/automerge": "0.6.13-main.548ca8d",
-    "@dxos/context": "0.6.13-main.548ca8d",
-    "@dxos/display-name": "0.6.13-main.548ca8d",
-    "@dxos/invariant": "0.6.13-main.548ca8d",
-    "@dxos/echo-schema": "0.6.13-main.548ca8d",
-    "@dxos/echo-signals": "0.6.13-main.548ca8d",
-    "@dxos/local-storage": "0.6.13-main.548ca8d",
-    "@dxos/keys": "0.6.13-main.548ca8d",
-    "@dxos/migrations": "0.6.13-main.548ca8d",
-    "@dxos/log": "0.6.13-main.548ca8d",
-    "@dxos/plugin-attention": "0.6.13-main.548ca8d",
-    "@dxos/plugin-client": "0.6.13-main.548ca8d",
-    "@dxos/plugin-metadata": "0.6.13-main.548ca8d",
-    "@dxos/plugin-observability": "0.6.13-main.548ca8d",
-    "@dxos/plugin-graph": "0.6.13-main.548ca8d",
-    "@dxos/plugin-status-bar": "0.6.13-main.548ca8d",
-    "@dxos/plugin-settings": "0.6.13-main.548ca8d",
-    "@dxos/react-client": "0.6.13-main.548ca8d",
-    "@dxos/protocols": "0.6.13-main.548ca8d",
-    "@dxos/react-ui-attention": "0.6.13-main.548ca8d",
-    "@dxos/react-ui-syntax-highlighter": "0.6.13-main.548ca8d",
-    "@dxos/react-ui-editor": "0.6.13-main.548ca8d",
-    "@dxos/shell": "0.6.13-main.548ca8d",
-    "@dxos/util": "0.6.13-main.548ca8d"
+    "@dxos/app-framework": "0.6.13-staging.1e988a3",
+    "@dxos/async": "0.6.13-staging.1e988a3",
+    "@dxos/automerge": "0.6.13-staging.1e988a3",
+    "@dxos/client": "0.6.13-staging.1e988a3",
+    "@dxos/display-name": "0.6.13-staging.1e988a3",
+    "@dxos/echo-schema": "0.6.13-staging.1e988a3",
+    "@dxos/keys": "0.6.13-staging.1e988a3",
+    "@dxos/invariant": "0.6.13-staging.1e988a3",
+    "@dxos/local-storage": "0.6.13-staging.1e988a3",
+    "@dxos/log": "0.6.13-staging.1e988a3",
+    "@dxos/migrations": "0.6.13-staging.1e988a3",
+    "@dxos/plugin-attention": "0.6.13-staging.1e988a3",
+    "@dxos/plugin-graph": "0.6.13-staging.1e988a3",
+    "@dxos/plugin-client": "0.6.13-staging.1e988a3",
+    "@dxos/plugin-metadata": "0.6.13-staging.1e988a3",
+    "@dxos/plugin-observability": "0.6.13-staging.1e988a3",
+    "@dxos/plugin-settings": "0.6.13-staging.1e988a3",
+    "@dxos/react-client": "0.6.13-staging.1e988a3",
+    "@dxos/react-ui-attention": "0.6.13-staging.1e988a3",
+    "@dxos/react-ui-editor": "0.6.13-staging.1e988a3",
+    "@dxos/shell": "0.6.13-staging.1e988a3",
+    "@dxos/util": "0.6.13-staging.1e988a3"
   },
   "devDependencies": {
     "@babel/core": "^7.18.13",
@@ -91,17 +82,18 @@
     "@types/react-dom": "~18.2.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "vite": "5.4.7",
-    "@dxos/react-ui-theme": "0.6.13-main.548ca8d",
-    "@dxos/react-ui": "0.6.13-main.548ca8d",
-    "@dxos/storybook-utils": "0.6.13-main.548ca8d"
+    "vite": "^5.3.4",
+    "@dxos/react-ui": "0.6.13-staging.1e988a3",
+    "@dxos/react-ui-theme": "0.6.13-staging.1e988a3",
+    "@dxos/storybook-utils": "0.6.13-staging.1e988a3"
   },
-  "peerDependencies": {
+  "optionalDependencies": {
+    "@babel/core": "^7.18.13",
     "@phosphor-icons/react": "^2.1.5",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.6.13-main.548ca8d",
-    "@dxos/react-ui-theme": "0.6.13-main.548ca8d"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "@dxos/react-ui-theme": "0.6.13-staging.1e988a3",
+    "@dxos/react-ui": "0.6.13-staging.1e988a3"
   },
   "publishConfig": {
     "access": "public"

package/src/SpacePlugin.tsx

@@ -2,76 +2,74 @@
 // Copyright 2024 DXOS.org
 //
 
-import { signal } from '@preact/signals-core';
+import { type IconProps, Plus, SignIn, CardsThree, Warning } from '@phosphor-icons/react';
+import { effect, signal } from '@preact/signals-core';
 import React from 'react';
 
 import {
   type IntentDispatcher,
   type IntentPluginProvides,
   LayoutAction,
+  Surface,
   type LocationProvides,
   NavigationAction,
   type Plugin,
   type PluginDefinition,
-  Surface,
-  firstIdInPart,
   openIds,
-  parseGraphPlugin,
+  firstIdInPart,
   parseIntentPlugin,
-  parseMetadataResolverPlugin,
   parseNavigationPlugin,
+  parseMetadataResolverPlugin,
   resolvePlugin,
+  parseGraphPlugin,
 } from '@dxos/app-framework';
 import { EventSubscriptions, type Trigger, type UnsubscribeCallback } from '@dxos/async';
-import { type EchoReactiveObject, type Identifiable, isReactiveObject } from '@dxos/echo-schema';
-import { scheduledEffect } from '@dxos/echo-signals/core';
+import { type Identifiable, isReactiveObject, type EchoReactiveObject } from '@dxos/echo-schema';
 import { LocalStorageStore } from '@dxos/local-storage';
 import { log } from '@dxos/log';
 import { Migrations } from '@dxos/migrations';
 import { type AttentionPluginProvides, parseAttentionPlugin } from '@dxos/plugin-attention';
 import { type ClientPluginProvides, parseClientPlugin } from '@dxos/plugin-client';
-import { type Node, createExtension, memoize, toSignal } from '@dxos/plugin-graph';
+import { createExtension, isGraphNode, memoize, type Node, toSignal } from '@dxos/plugin-graph';
 import { ObservabilityAction } from '@dxos/plugin-observability/meta';
 import { type Client, PublicKey } from '@dxos/react-client';
 import {
-  Expando,
-  Filter,
   type PropertiesTypeProps,
   type Space,
-  SpaceState,
   create,
+  Expando,
+  Filter,
   fullyQualifiedId,
   getSpace,
   getTypename,
   isEchoObject,
   isSpace,
   loadObjectReferences,
-  parseFullyQualifiedId,
+  SpaceState,
 } from '@dxos/react-client/echo';
 import { Dialog } from '@dxos/react-ui';
-import { ClipboardProvider, InvitationManager, type InvitationManagerProps, osTranslations } from '@dxos/shell/react';
+import { InvitationManager, type InvitationManagerProps, osTranslations, ClipboardProvider } from '@dxos/shell/react';
 import { ComplexMap, nonNullable, reduceGroupBy } from '@dxos/util';
 
 import {
   AwaitingObject,
   CollectionMain,
   CollectionSection,
-  FallbackSettings,
+  EmptySpace,
+  EmptyTree,
   MenuFooter,
   MissingObject,
   PopoverRenameObject,
   PopoverRenameSpace,
-  SaveStatus,
   ShareSpaceButton,
   SmallPresence,
   SmallPresenceLive,
   SpacePresence,
   SpaceSettings,
-  SyncStatus,
 } from './components';
 import meta, { SPACE_PLUGIN, SpaceAction } from './meta';
 import translations from './translations';
-import { CollectionType, type PluginState, type SpacePluginProvides, type SpaceSettingsProps } from './types';
+import { CollectionType, type SpacePluginProvides, type SpaceSettingsProps, type PluginState } from './types';
 import {
   COMPOSER_SPACE_LOCK,
   SHARED,
@@ -120,9 +118,7 @@ export const SpacePlugin = ({
   firstRun,
   onFirstRun,
 }: SpacePluginOptions = {}): PluginDefinition<SpacePluginProvides> => {
-  const settings = new LocalStorageStore<SpaceSettingsProps>(SPACE_PLUGIN, {
-    onSpaceCreate: 'dxos.org/plugin/markdown/action/create',
-  });
+  const settings = new LocalStorageStore<SpaceSettingsProps>(SPACE_PLUGIN);
   const state = new LocalStorageStore<PluginState>(SPACE_PLUGIN, {
     awaiting: undefined,
     spaceNames: {},
@@ -175,10 +171,9 @@ export const SpacePlugin = ({
           .filter((space) => space.state.get() === SpaceState.SPACE_READY)
           .forEach((space) => {
             subscriptions.add(
-              scheduledEffect(
-                () => ({ name: space.properties.name }),
-                ({ name }) => (state.values.spaceNames[space.id] = name),
-              ),
+              effect(() => {
+                state.values.spaceNames[space.id] = space.properties.name;
+              }),
             );
           });
       }).unsubscribe,
@@ -186,56 +181,54 @@ export const SpacePlugin = ({
 
     // Broadcast active node to other peers in the space.
     subscriptions.add(
-      scheduledEffect(
-        () => ({
-          ids: openIds(location.active),
-          removed: location.closed ? [location.closed].flat() : [],
-        }),
-        ({ ids, removed }) => {
-          const send = () => {
-            const spaces = client.spaces.get();
-            const identity = client.halo.identity.get();
-            if (identity && location.active) {
-              // Group parts by space for efficient messaging.
-              const idsBySpace = reduceGroupBy(ids, (id) => {
-                const [spaceId] = id.split(':'); // TODO(burdon): Factor out.
-                return spaceId;
-              });
-
-              // NOTE: Ensure all spaces are included so that we send the correct `removed` object arrays.
-              for (const space of spaces) {
-                if (!idsBySpace.has(space.id)) {
-                  idsBySpace.set(space.id, []);
-                }
+      effect(() => {
+        const send = () => {
+          const spaces = client.spaces.get();
+          const identity = client.halo.identity.get();
+          if (identity && location.active) {
+            const ids = openIds(location.active);
+
+            // Group parts by space for efficient messaging.
+            const idsBySpace = reduceGroupBy(ids, (id) => {
+              const [spaceId] = id.split(':'); // TODO(burdon): Factor out.
+              return spaceId;
+            });
+
+            // NOTE: Ensure all spaces are included so that we send the correct `removed` object arrays.
+            for (const space of spaces) {
+              if (!idsBySpace.has(space.id)) {
+                idsBySpace.set(space.id, []);
               }
+            }
 
-              for (const [spaceId, ids] of idsBySpace) {
-                const space = spaces.find((space) => space.id === spaceId);
-                if (!space) {
-                  continue;
-                }
-
-                void space
-                  .postMessage('viewing', {
-                    identityKey: identity.identityKey.toHex(),
-                    attended: attention.attended ? [...attention.attended] : [],
-                    added: ids,
-                    // TODO(Zan): When we re-open a part, we should remove it from the removed list in the navigation plugin.
-                    removed: removed.filter((id) => !ids.includes(id)),
-                  })
-                  // TODO(burdon): This seems defensive; why would this fail? Backoff interval.
-                  .catch((err) => {
-                    log.warn('Failed to broadcast active node for presence.', { err: err.message });
-                  });
+            for (const [spaceId, ids] of idsBySpace) {
+              const space = spaces.find((space) => space.id === spaceId);
+              if (!space) {
+                continue;
               }
+
+              const removed = location.closed ? [location.closed].flat() : [];
+
+              void space
+                .postMessage('viewing', {
+                  identityKey: identity.identityKey.toHex(),
+                  attended: attention.attended ? [...attention.attended] : [],
+                  added: ids,
+                  // TODO(Zan): When we re-open a part, we should remove it from the removed list in the navigation plugin.
+                  removed: removed.filter((id) => !ids.includes(id)),
+                })
+                // TODO(burdon): This seems defensive; why would this fail? Backoff interval.
+                .catch((err) => {
+                  log.warn('Failed to broadcast active node for presence.', { err: err.message });
+                });
             }
-          };
+          }
+        };
 
-          send();
-          const interval = setInterval(() => send(), ACTIVE_NODE_BROADCAST_INTERVAL);
-          return () => clearInterval(interval);
-        },
-      ),
+        send();
+        const interval = setInterval(() => send(), ACTIVE_NODE_BROADCAST_INTERVAL);
+        return () => clearInterval(interval);
+      }),
     );
 
     // Listen for active nodes from other peers in the space.
@@ -347,7 +340,8 @@ export const SpacePlugin = ({
         records: {
           [CollectionType.typename]: {
             placeholder: ['unnamed collection label', { ns: SPACE_PLUGIN }],
-            icon: 'ph--cards-three--regular',
+            icon: (props: IconProps) => <CardsThree {...props} />,
+            iconSymbol: 'ph--cards-three--regular',
             // TODO(wittjosiah): Move out of metadata.
             loadReferences: (collection: CollectionType) =>
               loadObjectReferences(collection, (collection) => [
@@ -368,18 +362,22 @@ export const SpacePlugin = ({
             case 'main':
               // TODO(wittjosiah): Need to avoid shotgun parsing space state everywhere.
               return isSpace(primary) && primary.state.get() === SpaceState.SPACE_READY ? (
-                <Surface
-                  data={{ active: primary.properties[CollectionType.typename], id: primary.id }}
-                  role={role}
-                  {...rest}
-                />
+                <Surface data={{ active: primary.properties[CollectionType.typename] }} role={role} {...rest} />
               ) : primary instanceof CollectionType ? (
                 { node: <CollectionMain collection={primary} />, disposition: 'fallback' }
               ) : typeof primary === 'string' && primary.length === OBJECT_ID_LENGTH ? (
                 <MissingObject id={primary} />
               ) : null;
-            case 'complementary--settings':
-              return isEchoObject(data.subject) ? <FallbackSettings object={data.subject} /> : null;
+            // TODO(burdon): Add role name syntax to minimal plugin docs.
+            case 'tree--empty':
+              switch (true) {
+                case data.plugin === SPACE_PLUGIN:
+                  return <EmptyTree />;
+                case isGraphNode(data.activeNode) && isSpace(data.activeNode.data):
+                  return <EmptySpace />;
+                default:
+                  return null;
+              }
             case 'dialog':
               if (data.component === 'dxos.org/plugin/space/InvitationManagerDialog') {
                 return (
@@ -400,7 +398,6 @@ export const SpacePlugin = ({
                 return <PopoverRenameObject object={data.subject} />;
               }
               return null;
-            // TODO(burdon): Add role name syntax to minimal plugin docs.
             case 'presence--glyph': {
               return isReactiveObject(data.object) ? (
                 <SmallPresenceLive viewers={state.values.viewersByObject[fullyQualifiedId(data.object)]} />
@@ -444,14 +441,6 @@ export const SpacePlugin = ({
               } else {
                 return <MenuFooter object={data.object} />;
               }
-            case 'status': {
-              return (
-                <>
-                  <SyncStatus />
-                  <SaveStatus />
-                </>
-              );
-            }
             default:
               return null;
           }
@@ -551,7 +540,8 @@ export const SpacePlugin = ({
                   },
                   properties: {
                     label: ['create space label', { ns: SPACE_PLUGIN }],
-                    icon: 'ph--plus--regular',
+                    icon: (props: IconProps) => <Plus {...props} />,
+                    iconSymbol: 'ph--plus--regular',
                     disposition: 'toolbar',
                     testId: 'spacePlugin.createSpace',
                   },
@@ -571,7 +561,8 @@ export const SpacePlugin = ({
                   },
                   properties: {
                     label: ['join space label', { ns: SPACE_PLUGIN }],
-                    icon: 'ph--sign-in--regular',
+                    icon: (props: IconProps) => <SignIn {...props} />,
+                    iconSymbol: 'ph--sign-in--regular',
                     testId: 'spacePlugin.joinSpace',
                   },
                 },
@@ -716,52 +707,6 @@ export const SpacePlugin = ({
                   .filter(nonNullable);
               },
             }),
-
-            // Create nodes for object settings.
-            createExtension({
-              id: `${SPACE_PLUGIN}/settings-for-subject`,
-              resolver: ({ id }) => {
-                // TODO(Zan): Find util (or make one).
-                if (!id.endsWith('~settings')) {
-                  return;
-                }
-
-                const [subjectId] = id.split('~');
-                const [spaceId, objectId] = parseFullyQualifiedId(subjectId);
-                const space = client.spaces.get().find((space) => space.id === spaceId);
-                const object = toSignal(
-                  (onChange) => {
-                    const timeout = setTimeout(async () => {
-                      await space?.db.loadObjectById(objectId);
-                      onChange();
-                    });
-
-                    return () => clearTimeout(timeout);
-                  },
-                  () => space?.db.getObjectById(objectId),
-                  subjectId,
-                );
-                if (!object || !subjectId) {
-                  return;
-                }
-
-                const meta = resolve(getTypename(object) ?? '');
-                const label = meta.label?.(object) ||
-                  object.name ||
-                  meta.placeholder || ['unnamed object settings label', { ns: SPACE_PLUGIN }];
-
-                return {
-                  id,
-                  type: 'orphan-settings-for-subject',
-                  data: null,
-                  properties: {
-                    icon: 'ph--gear--regular',
-                    label,
-                    object,
-                  },
-                };
-              },
-            }),
           ];
         },
         serializer: (plugins) => {
@@ -860,15 +805,6 @@ export const SpacePlugin = ({
                 data: { space, id: space.id, activeParts: { main: [space.id] } },
 
                 intents: [
-                  ...(settings.values.onSpaceCreate
-                    ? [
-                        [
-                          { action: settings.values.onSpaceCreate, data: { space } },
-                          { action: SpaceAction.ADD_OBJECT, data: { target: space } },
-                          { action: NavigationAction.EXPOSE },
-                        ],
-                      ]
-                    : []),
                   [
                     {
                       action: ObservabilityAction.SEND_EVENT,
@@ -1084,7 +1020,8 @@ export const SpacePlugin = ({
                             title: translations[0]['en-US'][SPACE_PLUGIN]['space limit label'],
                             description: translations[0]['en-US'][SPACE_PLUGIN]['space limit description'],
                             duration: 5_000,
-                            icon: 'ph--warning--regular',
+                            icon: (props: IconProps) => <Warning {...props} />,
+                            iconSymbol: 'ph--warning--regular',
                             actionLabel: translations[0]['en-US'][SPACE_PLUGIN]['remove deleted objects label'],
                             actionAlt: translations[0]['en-US'][SPACE_PLUGIN]['remove deleted objects alt'],
                             // TODO(wittjosiah): Use OS namespace.
@@ -1123,7 +1060,7 @@ export const SpacePlugin = ({
               }
 
               return {
-                data: { id: fullyQualifiedId(object), object, activeParts: { main: [fullyQualifiedId(object)] } },
+                data: { id: object.id, object, activeParts: { main: [fullyQualifiedId(object)] } },
                 intents: [
                   [
                     {
@@ -1178,6 +1115,7 @@ export const SpacePlugin = ({
                       activeParts: {
                         main: deletionData.wasActive,
                         sidebar: deletionData.wasActive,
+                        complementary: deletionData.wasActive,
                       },
                     },
                   });

package/src/components/EmptySpace.tsx

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

package/src/components/EmptyTree.tsx

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

package/src/components/MenuFooter.tsx

@@ -1,7 +1,6 @@
 //
 // Copyright 2024 DXOS.org
 //
-
 import { Planet } from '@phosphor-icons/react';
 import React from 'react';
 

package/src/components/SpaceMain/SpaceMain.tsx

@@ -6,14 +6,35 @@ import { Command } from '@phosphor-icons/react';
 import React from 'react';
 
 import { Surface } from '@dxos/app-framework';
+import { type Action } from '@dxos/plugin-graph';
 import { SpaceState, type Space } from '@dxos/react-client/echo';
-import { Main, useTranslation } from '@dxos/react-ui';
+import { Button, Main, useTranslation, toLocalizedString } from '@dxos/react-ui';
 import { getSize, mx, topbarBlockPaddingStart } from '@dxos/react-ui-theme';
 import { ClipboardProvider } from '@dxos/shell/react';
 
 import { SpaceMembersSection } from './SpaceMembersSection';
 import { SPACE_PLUGIN } from '../../meta';
 
+const _InFlowSpaceActions = ({ actionsMap }: { actionsMap: Record<string, Action> }) => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+  return (
+    <section className='mbe-4 col-start-2 col-end-4 md:col-end-7 grid gap-2 auto-rows-min grid-cols-[repeat(auto-fill,minmax(8rem,1fr))]'>
+      {Object.entries(actionsMap)
+        .filter(([_, { properties }]) => properties?.mainAreaDisposition === 'in-flow')
+        .map(([actionId, { data: invoke, properties }]) => {
+          const Icon = properties?.icon;
+          const label = properties?.label;
+          return (
+            <Button key={actionId} classNames='block text-center plb-2 font-normal'>
+              {Icon && <Icon size={5} className='mli-auto' />}
+              <p>{toLocalizedString(label, t)}</p>
+            </Button>
+          );
+        })}
+    </section>
+  );
+};
+
 const KeyShortcuts = () => {
   const { t } = useTranslation(SPACE_PLUGIN);
   return (

package/src/components/SpacePresence.tsx

@@ -110,7 +110,7 @@ export type MemberPresenceProps = ThemedClassName<{
 
 export const FullPresence = (props: MemberPresenceProps) => {
   const { size = 9, onMemberClick } = props;
-  const members = useDefaultValue(props.members, () => []);
+  const members = useDefaultValue(props.members, []);
 
   if (members.length === 0) {
     return null;