@dxos/plugin-space 0.6.8-main.046e6cf

package/src/components/SpaceMain/SpaceMembersSection.tsx

@@ -0,0 +1,205 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { CaretDown, Check, UserPlus, UsersThree } from '@phosphor-icons/react';
+import React, { useCallback, useState } from 'react';
+
+import { LayoutAction, useIntent } from '@dxos/app-framework';
+import { type Space, useMembers, SpaceMember, useSpaceInvitations } from '@dxos/react-client/echo';
+import { type CancellableInvitationObservable, InvitationEncoder } from '@dxos/react-client/invitations';
+import { Invitation } from '@dxos/react-client/invitations';
+import { Button, ButtonGroup, DropdownMenu, List, useTranslation } from '@dxos/react-ui';
+import { descriptionText, getSize, mx } from '@dxos/react-ui-theme';
+import { InvitationListItem, IdentityListItem } from '@dxos/shell/react';
+
+import { SPACE_PLUGIN } from '../../meta';
+
+// TODO(thure): Sync with shell?
+const activeActionKeyStorageKey = 'dxos:react-shell/space-manager/active-action';
+
+const Presence = SpaceMember.PresenceState;
+
+const handleCreateInvitationUrl = (invitationCode: string) => `${origin}?spaceInvitationCode=${invitationCode}`;
+
+const SpaceMemberList = ({ members }: { members: SpaceMember[] }) => {
+  return members.length > 0 ? (
+    <List classNames='col-start-2 col-end-5 gap-y-1 grid grid-cols-subgrid items-center'>
+      {members.map((member) => (
+        <IdentityListItem
+          classNames='contents'
+          key={member.identity.identityKey.toHex()}
+          identity={member.identity}
+          presence={member.presence}
+        />
+      ))}
+    </List>
+  ) : null;
+};
+
+export const SpaceMembersSection = ({ space }: { space: Space }) => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+  const invitations = useSpaceInvitations(space.key);
+  const { dispatch } = useIntent();
+
+  const handleCloseDialog = () =>
+    dispatch({
+      action: LayoutAction.SET_LAYOUT,
+      data: { element: 'dialog', state: false },
+    });
+
+  const handleInvitationSelect = ({
+    invitation: invitationObservable,
+  }: {
+    invitation: CancellableInvitationObservable;
+  }) => {
+    const invitation = invitationObservable.get();
+    void dispatch({
+      action: LayoutAction.SET_LAYOUT,
+      data: {
+        element: 'dialog',
+        component: 'dxos.org/plugin/space/InvitationManagerDialog',
+        subject: {
+          invitationUrl: handleCreateInvitationUrl(InvitationEncoder.encode(invitation)),
+          send: handleCloseDialog,
+          status: invitation.state,
+          type: invitation.type,
+          authCode: invitation.authCode,
+          id: invitation.invitationId,
+        },
+      },
+    });
+  };
+
+  const inviteActions = {
+    inviteOne: {
+      label: t('invite one label', { ns: 'os' }),
+      description: t('invite one description', { ns: 'os' }),
+      icon: UserPlus,
+      onClick: useCallback(() => {
+        space.share?.({
+          type: Invitation.Type.INTERACTIVE,
+          authMethod: Invitation.AuthMethod.SHARED_SECRET,
+        });
+      }, [space]),
+    },
+    inviteMany: {
+      label: t('invite many label', { ns: 'os' }),
+      description: t('invite many description', { ns: 'os' }),
+      icon: UsersThree,
+      onClick: useCallback(() => {
+        space.share?.({
+          type: Invitation.Type.INTERACTIVE,
+          authMethod: Invitation.AuthMethod.NONE,
+          multiUse: true,
+        });
+      }, [space]),
+    },
+  };
+
+  const [activeActionKey, setInternalActiveActionKey] = useState<keyof typeof inviteActions>(
+    (localStorage.getItem(activeActionKeyStorageKey) as keyof typeof inviteActions) ?? 'inviteOne',
+  );
+  const setActiveActionKey = (nextKey: keyof typeof inviteActions) => {
+    setInternalActiveActionKey(nextKey);
+    localStorage.setItem(activeActionKeyStorageKey, nextKey);
+  };
+
+  const activeAction = inviteActions[activeActionKey as keyof typeof inviteActions] ?? {};
+
+  // TODO(thure): Simplify when Object.groupBy() is supported by Safari
+  //  https://caniuse.com/mdn-javascript_builtins_object_groupby
+  const members = useMembers(space.key).reduce(
+    (acc: Record<SpaceMember.PresenceState, SpaceMember[]>, member) => {
+      acc[member.presence].push(member);
+      return acc;
+    },
+    {
+      [Presence.ONLINE]: [],
+      [Presence.OFFLINE]: [],
+    },
+  );
+
+  return (
+    <section className='mbe-4 col-span-3 grid gap-y-2 grid-cols-subgrid auto-rows-min'>
+      <h2 className='contents'>
+        <UsersThree weight='duotone' className={mx(getSize(5), 'place-self-center')} />
+        <span className='text-lg col-span-2'>{t('space members label')}</span>
+      </h2>
+      <h3 className='col-start-2 col-span-3 text-sm italic fg-description'>{t('invitations heading')}</h3>
+      {invitations.length > 0 && (
+        <List classNames='col-start-2 col-span-2 gap-y-2 grid grid-cols-[var(--rail-size)_1fr_var(--rail-action)_var(--rail-action)]'>
+          {invitations.map((invitation) => (
+            <InvitationListItem
+              reverseEffects
+              classNames='pis-0 pie-0 gap-0 col-span-4 grid grid-cols-subgrid'
+              key={invitation.get().invitationId}
+              invitation={invitation}
+              send={handleInvitationSelect}
+              createInvitationUrl={handleCreateInvitationUrl}
+            />
+          ))}
+        </List>
+      )}
+      <ButtonGroup classNames='col-start-2 col-end-4 grid grid-cols-[1fr_var(--rail-action)] place-self-grow gap-px'>
+        <Button classNames='gap-2' onClick={activeAction.onClick}>
+          <activeAction.icon className={getSize(5)} />
+          <span>{t(activeAction.label, { ns: 'os' })}</span>
+        </Button>
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger asChild>
+            <Button classNames='pli-0'>
+              <CaretDown className={getSize(4)} />
+            </Button>
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Content>
+            <DropdownMenu.Viewport>
+              {Object.entries(inviteActions).map(([id, action]) => {
+                return (
+                  <DropdownMenu.CheckboxItem
+                    key={id}
+                    aria-labelledby={`${id}__label`}
+                    aria-describedby={`${id}__description`}
+                    checked={activeActionKey === id}
+                    onCheckedChange={(checked) => checked && setActiveActionKey(id as keyof typeof inviteActions)}
+                    classNames='gap-2'
+                  >
+                    {action.icon && <action.icon className={getSize(5)} />}
+                    <div role='none' className='flex-1 min-is-0 space-b-1'>
+                      <p id={`${id}__label`}>{t(action.label, { ns: 'os' })}</p>
+                      {action.description && (
+                        <p id={`${id}__description`} className={descriptionText}>
+                          {t(action.description, { ns: 'os' })}
+                        </p>
+                      )}
+                    </div>
+                    <DropdownMenu.ItemIndicator asChild>
+                      <Check className={getSize(4)} />
+                    </DropdownMenu.ItemIndicator>
+                  </DropdownMenu.CheckboxItem>
+                );
+              })}
+            </DropdownMenu.Viewport>
+            <DropdownMenu.Arrow />
+          </DropdownMenu.Content>
+        </DropdownMenu.Root>
+      </ButtonGroup>
+      {members[Presence.ONLINE].length + members[Presence.OFFLINE].length < 1 ? (
+        <p className={mx(descriptionText, 'text-center is-full mlb-2')}>
+          {t('empty space members message', { ns: 'os' })}
+        </p>
+      ) : (
+        <>
+          <h3 className='col-start-2 col-end-5 text-sm italic fg-description'>
+            {t('active space members heading', { count: members[Presence.ONLINE].length })}
+          </h3>
+          <SpaceMemberList members={members[Presence.ONLINE]} />
+          <h3 className='col-start-2 col-end-5 text-sm italic fg-description'>
+            {t('inactive space members heading', { count: members[Presence.OFFLINE].length })}
+          </h3>
+          <SpaceMemberList members={members[Presence.OFFLINE]} />
+        </>
+      )}
+    </section>
+  );
+};

package/src/components/SpaceMain/index.ts

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

package/src/components/SpacePresence.stories.tsx

@@ -0,0 +1,102 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import '@dxosTheme';
+
+import { PublicKey } from '@dxos/keys';
+import { HaloSpaceMember, SpaceMember } from '@dxos/react-client/echo';
+import { Tooltip } from '@dxos/react-ui';
+import { withTheme } from '@dxos/storybook-utils';
+
+import { FullPresence, type MemberPresenceProps, SmallPresence, type Member } from './SpacePresence';
+import translations from '../translations';
+
+export default {
+  title: 'plugin-space/SpacePresence',
+  decorators: [withTheme],
+  parameters: { translations },
+  actions: { argTypesRegex: '^on.*' },
+};
+
+const nViewers = (n: number, currentlyAttended = true): Member[] =>
+  Array.from({ length: n }, () => ({
+    role: HaloSpaceMember.Role.ADMIN,
+    identity: { identityKey: PublicKey.random() },
+    presence: SpaceMember.PresenceState.ONLINE,
+    lastSeen: Date.now(),
+    currentlyAttended,
+  }));
+
+export const Full = (props: MemberPresenceProps) => {
+  const p: MemberPresenceProps = {
+    ...props,
+  };
+
+  return (
+    <Tooltip.Provider>
+      <div className='p-4'>
+        <div className='p-3'>
+          <FullPresence members={nViewers(1)} {...p} />
+        </div>
+        <div className='p-3'>
+          <FullPresence members={nViewers(2)} {...p} />
+        </div>
+        <div className='p-3'>
+          <FullPresence members={nViewers(3)} {...p} />
+        </div>
+        <div className='p-3'>
+          <FullPresence members={nViewers(3, false)} {...p} />
+        </div>
+        <div className='p-3'>
+          <FullPresence members={nViewers(4)} {...p} />
+        </div>
+        <div className='p-3'>
+          <FullPresence members={nViewers(5)} {...p} />
+        </div>
+        <div className='p-3'>
+          <FullPresence members={nViewers(5, false)} {...p} />
+        </div>
+        <div className='p-3'>
+          <FullPresence members={nViewers(10)} {...p} />
+        </div>
+        <div className='p-3'>
+          <FullPresence members={nViewers(100)} {...p} />
+        </div>
+      </div>
+    </Tooltip.Provider>
+  );
+};
+
+export const Small = (props: MemberPresenceProps) => {
+  const p: MemberPresenceProps = {
+    ...props,
+  };
+
+  return (
+    <Tooltip.Provider>
+      <div className='p-4'>
+        <div className='p-3'>
+          <SmallPresence count={0} {...p} />
+        </div>
+        <div className='p-3'>
+          <SmallPresence count={1} {...p} />
+        </div>
+        <div className='p-3'>
+          <SmallPresence count={2} {...p} />
+        </div>
+        <div className='p-3'>
+          <SmallPresence count={3} {...p} />
+        </div>
+        <div className='p-3'>
+          <SmallPresence count={4} {...p} />
+        </div>
+        <div className='p-3'>
+          <SmallPresence count={5} {...p} />
+        </div>
+      </div>
+    </Tooltip.Provider>
+  );
+};

package/src/components/SpacePresence.tsx

@@ -0,0 +1,244 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useCallback, useEffect, useState } from 'react';
+
+import { usePlugin } from '@dxos/app-framework';
+import { generateName } from '@dxos/display-name';
+import { type Expando } from '@dxos/echo-schema';
+import { PublicKey, useClient } from '@dxos/react-client';
+import { getSpace, useMembers, type SpaceMember, fullyQualifiedId } from '@dxos/react-client/echo';
+import { type Identity, useIdentity } from '@dxos/react-client/halo';
+import {
+  Avatar,
+  AvatarGroup,
+  AvatarGroupItem,
+  type Size,
+  type ThemedClassName,
+  Tooltip,
+  useDensityContext,
+  useTranslation,
+  List,
+  ListItem,
+  useDefaultValue,
+} from '@dxos/react-ui';
+import { AttentionGlyphCloseButton } from '@dxos/react-ui-attention';
+import { ComplexMap, keyToFallback } from '@dxos/util';
+
+import { SPACE_PLUGIN } from '../meta';
+import type { ObjectViewerProps, SpacePluginProvides } from '../types';
+
+// TODO(thure): Get/derive these values from protocol
+const REFRESH_INTERVAL = 5000;
+const ACTIVITY_DURATION = 30_000;
+
+// TODO(thure): This is chiefly meant to satisfy TS & provide an empty map after `deepSignal` interactions.
+const noViewers = new ComplexMap<PublicKey, ObjectViewerProps>(PublicKey.hash);
+
+// TODO(wittjosiah): Factor out?
+const getName = (identity: Identity) => identity.profile?.displayName ?? generateName(identity.identityKey.toHex());
+
+export const SpacePresence = ({ object, spaceKey }: { object: Expando; spaceKey?: PublicKey }) => {
+  const density = useDensityContext();
+  const spacePlugin = usePlugin<SpacePluginProvides>(SPACE_PLUGIN);
+  const client = useClient();
+  const identity = useIdentity();
+  const space = spaceKey ? client.spaces.get(spaceKey) : getSpace(object);
+  const spaceMembers = useMembers(space?.key);
+
+  const [_moment, setMoment] = useState(Date.now());
+
+  // NOTE(thure): This is necessary so Presence updates without any underlying data updating.
+  useEffect(() => {
+    const interval = setInterval(() => setMoment(Date.now()), REFRESH_INTERVAL);
+    return () => clearInterval(interval);
+  }, []);
+
+  const memberOnline = useCallback((member: SpaceMember) => member.presence === 1, []);
+  const memberIsNotSelf = useCallback(
+    (member: SpaceMember) => !identity?.identityKey.equals(member.identity.identityKey),
+    [identity?.identityKey],
+  );
+
+  // TODO(thure): Could it be a smell to return early when there are interactions with `deepSignal` later, since it
+  //  prevents reactivity?
+  if (!identity || !spacePlugin || !space) {
+    return null;
+  }
+
+  const spaceState = spacePlugin.provides.space;
+  const currentObjectViewers = spaceState.viewersByObject[fullyQualifiedId(object)] ?? noViewers;
+
+  const membersForObject = spaceMembers
+    .filter((member) => memberOnline(member) && memberIsNotSelf(member))
+    .filter((member) => currentObjectViewers.has(member.identity.identityKey))
+    .map((member) => {
+      const objectView = currentObjectViewers.get(member.identity.identityKey);
+      const lastSeen = objectView?.lastSeen ?? -Infinity;
+      const currentlyAttended = objectView?.currentlyAttended ?? false;
+
+      return {
+        ...member,
+        currentlyAttended,
+        lastSeen,
+      };
+    })
+    .toSorted((a, b) => a.lastSeen - b.lastSeen);
+
+  return density === 'fine' ? (
+    <SmallPresence count={membersForObject.length} />
+  ) : (
+    <FullPresence members={membersForObject} />
+  );
+};
+
+export type Member = SpaceMember & {
+  /**
+   * Last time a member was seen on this object.
+   */
+  lastSeen: number;
+  currentlyAttended: boolean;
+};
+
+export type MemberPresenceProps = ThemedClassName<{
+  size?: Size;
+  members?: Member[];
+  showCount?: boolean;
+  onMemberClick?: (member: Member) => void;
+}>;
+
+export const FullPresence = (props: MemberPresenceProps) => {
+  const { size = 9, onMemberClick } = props;
+  const members = useDefaultValue(props.members, []);
+
+  if (members.length === 0) {
+    return null;
+  }
+
+  return (
+    <AvatarGroup.Root size={size} classNames='mbs-2 mie-4' data-testid='spacePlugin.presence'>
+      {members.slice(0, 3).map((member, i) => (
+        <Tooltip.Root key={member.identity.identityKey.toHex()}>
+          <Tooltip.Trigger>
+            <PrensenceAvatar
+              identity={member.identity}
+              group
+              match={member.currentlyAttended} // TODO(Zan): Match always true now we're showing 'members viewing current object'.
+              index={members.length - i}
+              onClick={() => onMemberClick?.(member)}
+            />
+          </Tooltip.Trigger>
+          <Tooltip.Portal>
+            <Tooltip.Content side='bottom'>
+              <span>{getName(member.identity)}</span>
+              <Tooltip.Arrow />
+            </Tooltip.Content>
+          </Tooltip.Portal>
+        </Tooltip.Root>
+      ))}
+
+      {members.length > 3 && (
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            <AvatarGroupItem.Root status='inactive'>
+              <Avatar.Frame style={{ zIndex: members.length - 4 }}>
+                {/* TODO(wittjosiah): Make text fit. */}
+                <Avatar.Fallback text={`+${members.length - 3}`} />
+              </Avatar.Frame>
+            </AvatarGroupItem.Root>
+          </Tooltip.Trigger>
+          <Tooltip.Portal>
+            <Tooltip.Content side='bottom'>
+              <Tooltip.Arrow />
+              <List classNames='max-h-56 overflow-y-auto'>
+                {members.map((member) => (
+                  <ListItem.Root
+                    key={member.identity.identityKey.toHex()}
+                    classNames='flex gap-2 items-center cursor-pointer mbe-2'
+                    onClick={() => onMemberClick?.(member)}
+                    data-testid='identity-list-item'
+                  >
+                    {/* TODO(Zan): Match always true now we're showing 'members viewing current object'. */}
+                    <PrensenceAvatar identity={member.identity} showName match={member.currentlyAttended} />
+                  </ListItem.Root>
+                ))}
+              </List>
+            </Tooltip.Content>
+          </Tooltip.Portal>
+        </Tooltip.Root>
+      )}
+    </AvatarGroup.Root>
+  );
+};
+
+type PresenceAvatarProps = {
+  identity: Identity;
+  showName?: boolean;
+  match?: boolean;
+  group?: boolean;
+  index?: number;
+  onClick?: () => void;
+};
+
+const PrensenceAvatar = ({ identity, showName, match, group, index, onClick }: PresenceAvatarProps) => {
+  const Root = group ? AvatarGroupItem.Root : Avatar.Root;
+  const status = match ? 'current' : 'active';
+  const fallbackValue = keyToFallback(identity.identityKey);
+  return (
+    <Root status={status} hue={identity.profile?.data?.hue || fallbackValue.hue}>
+      <Avatar.Frame
+        data-testid='spacePlugin.presence.member'
+        data-status={status}
+        {...(index ? { style: { zIndex: index } } : {})}
+        onClick={() => onClick?.()}
+      >
+        <Avatar.Fallback text={identity.profile?.data?.emoji || fallbackValue.emoji} />
+      </Avatar.Frame>
+      {showName && <Avatar.Label classNames='text-sm truncate pli-2'>{getName(identity)}</Avatar.Label>}
+    </Root>
+  );
+};
+
+export const SmallPresenceLive = ({
+  viewers,
+  onCloseClick,
+}: {
+  viewers?: ComplexMap<PublicKey, ObjectViewerProps>;
+  onCloseClick?: () => void;
+}) => {
+  const [moment, setMoment] = useState(Date.now());
+
+  // NOTE(thure): This is necessary so Presence updates without any underlying data updating.
+  useEffect(() => {
+    const interval = setInterval(() => setMoment(Date.now()), REFRESH_INTERVAL);
+    return () => clearInterval(interval);
+  }, []);
+
+  const activeViewers = viewers
+    ? Array.from(viewers.values()).filter(({ lastSeen }) => moment - lastSeen < ACTIVITY_DURATION)
+    : [];
+
+  return <SmallPresence count={activeViewers.length} onCloseClick={onCloseClick} />;
+};
+
+export const SmallPresence = ({ count, onCloseClick }: { count: number; onCloseClick?: () => void }) => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <AttentionGlyphCloseButton
+          presence={count > 1 ? 'many' : count === 1 ? 'one' : 'none'}
+          classNames='self-center mie-1'
+          onClick={onCloseClick}
+        />
+      </Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content side='bottom' classNames='z-[70]'>
+          <span>{t('presence label', { count })}</span>
+          <Tooltip.Arrow />
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  );
+};

package/src/components/SpaceSettings.tsx

@@ -0,0 +1,34 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { useIntentDispatcher } from '@dxos/app-framework';
+import { SettingsValue } from '@dxos/plugin-settings';
+import { Input, useTranslation } from '@dxos/react-ui';
+
+import { SpaceAction, SPACE_PLUGIN } from '../meta';
+import { type SpaceSettingsProps } from '../types';
+
+export const SpaceSettings = ({ settings }: { settings: SpaceSettingsProps }) => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+  const dispatch = useIntentDispatcher();
+
+  return (
+    <>
+      <SettingsValue label={t('show hidden spaces label')}>
+        <Input.Switch
+          checked={settings.showHidden}
+          onCheckedChange={(checked) =>
+            dispatch({
+              plugin: SPACE_PLUGIN,
+              action: SpaceAction.TOGGLE_HIDDEN,
+              data: { state: !!checked },
+            })
+          }
+        />
+      </SettingsValue>
+    </>
+  );
+};

package/src/components/index.ts

@@ -0,0 +1,18 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './AwaitingObject';
+export * from './CollectionMain';
+export * from './CollectionSection';
+export * from './EmptySpace';
+export * from './EmptyTree';
+export * from './MenuFooter';
+export * from './MissingObject';
+export * from './PersistenceStatus';
+export * from './PopoverRenameObject';
+export * from './PopoverRenameSpace';
+export * from './ShareSpaceButton';
+export * from './SpaceMain';
+export * from './SpacePresence';
+export * from './SpaceSettings';

package/src/index.ts

@@ -0,0 +1,15 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { SpacePlugin } from './SpacePlugin';
+
+export default SpacePlugin;
+
+export * from './components';
+export * from './meta';
+export * from './types';
+export * from './util';
+export { default as translations } from './translations';
+
+export * from './SpacePlugin';

package/src/meta.ts

@@ -0,0 +1,31 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export const SPACE_PLUGIN = 'dxos.org/plugin/space';
+export const SPACE_PLUGIN_SHORT_ID = 'space';
+
+export default {
+  id: SPACE_PLUGIN,
+  shortId: SPACE_PLUGIN_SHORT_ID,
+  name: 'Spaces',
+};
+
+const SPACE_ACTION = `${SPACE_PLUGIN}/action`;
+export enum SpaceAction {
+  CREATE = `${SPACE_ACTION}/create`,
+  JOIN = `${SPACE_ACTION}/join`,
+  SHARE = `${SPACE_ACTION}/share`,
+  LOCK = `${SPACE_ACTION}/lock`,
+  UNLOCK = `${SPACE_ACTION}/unlock`,
+  RENAME = `${SPACE_ACTION}/rename`,
+  OPEN = `${SPACE_ACTION}/open`,
+  CLOSE = `${SPACE_ACTION}/close`,
+  MIGRATE = `${SPACE_ACTION}/migrate`,
+  ADD_OBJECT = `${SPACE_ACTION}/add-object`,
+  REMOVE_OBJECT = `${SPACE_ACTION}/remove-object`,
+  RENAME_OBJECT = `${SPACE_ACTION}/rename-object`,
+  DUPLICATE_OBJECT = `${SPACE_ACTION}/duplicate-object`,
+  WAIT_FOR_OBJECT = `${SPACE_ACTION}/wait-for-object`,
+  TOGGLE_HIDDEN = `${SPACE_ACTION}/toggle-hidden`,
+}