@dxos/plugin-space 0.8.4-main.72ec0f3 → 0.8.4-main.7996785055

package/src/components/SpacePresence/SpacePresence.tsx

@@ -1,274 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import * as Option from 'effect/Option';
-import React, { forwardRef, useCallback, useEffect, useState } from 'react';
-
-import { useAppGraph, useCapability } from '@dxos/app-framework/react';
-import { generateName } from '@dxos/display-name';
-import { Obj, type Type } from '@dxos/echo';
-import { PublicKey, useClient } from '@dxos/react-client';
-import { type SpaceMember, getSpace, useMembers } from '@dxos/react-client/echo';
-import { type Identity, useIdentity } from '@dxos/react-client/halo';
-import {
-  Avatar,
-  type AvatarContentProps,
-  type DxAvatar,
-  List,
-  ListItem,
-  Popover,
-  type Size,
-  type ThemedClassName,
-  Tooltip,
-  useDefaultValue,
-  useTranslation,
-} from '@dxos/react-ui';
-import { AttentionGlyph, type AttentionGlyphProps, useAttended, useAttention } from '@dxos/react-ui-attention';
-import { ComplexMap, keyToFallback } from '@dxos/util';
-
-import { SpaceCapabilities } from '../../capabilities';
-import { usePath } from '../../hooks';
-import { meta } from '../../meta';
-import { type ObjectViewerProps } 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 type SpacePresenceProps = {
-  object: Type.Expando;
-  spaceKey?: PublicKey;
-};
-
-export const SpacePresence = ({ object, spaceKey }: SpacePresenceProps) => {
-  // TODO(wittjosiah): Doesn't need to be mutable but readonly type messes with ComplexMap.
-  const spaceState = useCapability(SpaceCapabilities.MutableState);
-  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 || !spaceState || !space) {
-    return null;
-  }
-
-  const currentObjectViewers = spaceState.viewersByObject[Obj.getDXN(object).toString()] ?? 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 <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 (
-    <div className='dx-avatar-group' data-testid='spacePlugin.presence'>
-      {members.slice(0, 3).map((member, i) => (
-        <Tooltip.Trigger
-          key={member.identity.identityKey.toHex()}
-          side='bottom'
-          content={getName(member.identity)}
-          className='grid focus:outline-none'
-        >
-          <PresenceAvatar
-            identity={member.identity}
-            match={member.currentlyAttended} // TODO(Zan): Match always true now we're showing 'members viewing current object'.
-            index={members.length - i}
-            onClick={() => onMemberClick?.(member)}
-            size={size}
-          />
-        </Tooltip.Trigger>
-      ))}
-
-      {members.length > 3 && (
-        <Popover.Root>
-          <Popover.Trigger className='grid focus:outline-none'>
-            <Avatar.Root>
-              {/* TODO(wittjosiah): Make text fit. */}
-              <Avatar.Content
-                status='inactive'
-                style={{ zIndex: members.length - 4 }}
-                fallback={`+${members.length - 3}`}
-                size={size}
-              />
-            </Avatar.Root>
-          </Popover.Trigger>
-          <Popover.Portal>
-            <Popover.Content side='bottom'>
-              <Popover.Arrow />
-              <Popover.Viewport classNames='max-bs-56'>
-                <List>
-                  {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'. */}
-                      <PresenceAvatar
-                        identity={member.identity}
-                        size={size}
-                        showName
-                        match={member.currentlyAttended}
-                      />
-                    </ListItem.Root>
-                  ))}
-                </List>
-              </Popover.Viewport>
-            </Popover.Content>
-          </Popover.Portal>
-        </Popover.Root>
-      )}
-    </div>
-  );
-};
-
-type PresenceAvatarProps = Pick<AvatarContentProps, 'size'> & {
-  identity: Identity;
-  showName?: boolean;
-  match?: boolean;
-  index?: number;
-  onClick?: () => void;
-};
-
-const PresenceAvatar = forwardRef<DxAvatar, PresenceAvatarProps>(
-  ({ identity, showName, match, index, onClick, size }, forwardedRef) => {
-    const status = match ? 'current' : 'active';
-    const fallbackValue = keyToFallback(identity.identityKey);
-    return (
-      <Avatar.Root>
-        <Avatar.Content
-          status={status}
-          hue={identity.profile?.data?.hue || fallbackValue.hue}
-          data-testid='spacePlugin.presence.member'
-          data-status={status}
-          size={size}
-          {...(index ? { style: { zIndex: index } } : {})}
-          onClick={onClick}
-          fallback={identity.profile?.data?.emoji || fallbackValue.emoji}
-          ref={forwardedRef}
-        />
-        <Avatar.Label classNames={showName ? 'text-sm truncate pli-2' : 'sr-only'}>{getName(identity)}</Avatar.Label>
-      </Avatar.Root>
-    );
-  },
-);
-
-export type SmallPresenceLiveProps = {
-  id?: string;
-  open?: boolean;
-  viewers?: ComplexMap<PublicKey, ObjectViewerProps>;
-};
-
-export const SmallPresenceLive = ({ id, open, viewers }: SmallPresenceLiveProps) => {
-  const { hasAttention, isAncestor, isRelated } = useAttention(id);
-  const isAttended = hasAttention || isAncestor || isRelated;
-
-  // TODO(wittjosiah): If the attended node is deep in the graph and the graph is not fully loaded
-  //   this will result in an empty path until the graph is connected.
-  // TODO(wittjosiah): Consider using this indicator for all open nodes instead of just attended.
-  const { graph } = useAppGraph();
-  const attended = useAttended();
-  const startOfAttention = attended.at(-1);
-  const path = usePath(graph, startOfAttention);
-  const containsAttended = !open && !isAttended && id && Option.isSome(path) ? path.value.includes(id) : false;
-
-  const getActiveViewers = (viewers: ComplexMap<PublicKey, ObjectViewerProps>): ObjectViewerProps[] => {
-    const moment = Date.now();
-    return Array.from<ObjectViewerProps>(viewers.values()).filter(
-      (viewer) => moment - viewer.lastSeen < ACTIVITY_DURATION,
-    );
-  };
-
-  const [activeViewers, setActiveViewers] = useState(viewers ? getActiveViewers(viewers) : []);
-
-  useEffect(() => {
-    if (viewers) {
-      setActiveViewers(getActiveViewers(viewers));
-      const interval = setInterval(() => {
-        setActiveViewers(getActiveViewers(viewers));
-      }, REFRESH_INTERVAL);
-      return () => clearInterval(interval);
-    }
-  }, [viewers]);
-
-  return <SmallPresence count={activeViewers.length} attended={isAttended} containsAttended={containsAttended} />;
-};
-
-export type SmallPresenceProps = {
-  count?: number;
-} & Pick<AttentionGlyphProps, 'attended' | 'containsAttended'>;
-
-export const SmallPresence = ({ count = 0, attended, containsAttended }: SmallPresenceProps) => {
-  const { t } = useTranslation(meta.id);
-
-  return (
-    <Tooltip.Trigger asChild content={t('presence label', { count })} side='bottom'>
-      <AttentionGlyph
-        attended={attended}
-        containsAttended={containsAttended}
-        presence={count > 1 ? 'many' : count === 1 ? 'one' : 'none'}
-        classNames='self-center mie-1'
-      />
-    </Tooltip.Trigger>
-  );
-};

package/src/components/SpacePresence/index.ts

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

package/src/components/SpaceRenamePopover/SpaceRenamePopover.tsx

@@ -1,55 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { useCallback, useRef, useState } from 'react';
-
-import { LayoutAction, createIntent } from '@dxos/app-framework';
-import { useIntentDispatcher } from '@dxos/app-framework/react';
-import { type Space } from '@dxos/client/echo';
-import { Button, Input, Popover, useTranslation } from '@dxos/react-ui';
-
-import { meta } from '../../meta';
-
-export const SPACE_RENAME_POPOVER = `${meta.id}/SpaceRenamePopover`;
-
-export const SpaceRenamePopover = ({ space }: { space: Space }) => {
-  const { t } = useTranslation(meta.id);
-  const doneButton = useRef<HTMLButtonElement>(null);
-  const [name, setName] = useState(space.properties.name ?? '');
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-
-  const handleDone = useCallback(() => {
-    space.properties.name = name;
-    void dispatch(
-      createIntent(LayoutAction.UpdatePopover, {
-        part: 'popover',
-        options: { variant: 'react', anchorId: '', state: false },
-      }),
-    );
-  }, [space, name]);
-
-  // TODO(thure): Why does the input value need to be uncontrolled to work?
-  return (
-    <div role='none' className='p-2 flex gap-2'>
-      <div role='none' className='flex-1'>
-        <Input.Root>
-          <Input.Label srOnly>{t('space name label')}</Input.Label>
-          <Input.TextInput
-            defaultValue={space.properties.name ?? ''}
-            placeholder={t('unnamed space label')}
-            onChange={({ target: { value } }) => setName(value)}
-            // TODO(wittjosiah): Ideally this should access the popover context to close the popover.
-            //   Currently this is not possible because Radix does not expose the popover context.
-            onKeyDown={({ key }) => key === 'Enter' && doneButton.current?.click()}
-          />
-        </Input.Root>
-      </div>
-      <Popover.Close asChild>
-        <Button ref={doneButton} classNames='self-stretch' onClick={handleDone}>
-          {t('done label', { ns: 'os' })}
-        </Button>
-      </Popover.Close>
-    </div>
-  );
-};

package/src/components/SpaceRenamePopover/index.ts

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

package/src/components/SpaceSettings/SpaceSettingsContainer.stories.tsx

@@ -1,46 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React from 'react';
-
-import { IntentPlugin } from '@dxos/app-framework';
-import { withPluginManager } from '@dxos/app-framework/testing';
-import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
-import { withTheme } from '@dxos/react-ui/testing';
-
-import { translations } from '../../translations';
-
-import { SpaceSettingsContainer, type SpaceSettingsContainerProps } from './SpaceSettingsContainer';
-
-const Story = (props: Partial<SpaceSettingsContainerProps>) => {
-  const { space } = useClientProvider();
-  return (
-    <div role='none' className='p-2 border border-primary-500 rounded'>
-      <SpaceSettingsContainer {...props} space={space!} />
-    </div>
-  );
-};
-
-const meta = {
-  title: 'plugins/plugin-space/SpaceSettingsContainer',
-  component: SpaceSettingsContainer,
-  render: Story,
-  decorators: [
-    withTheme,
-    withClientProvider({ createIdentity: true, createSpace: true }),
-    // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
-    withPluginManager({ plugins: [IntentPlugin()] }),
-  ],
-  parameters: {
-    translations,
-    layout: 'centered',
-  },
-} satisfies Meta<typeof SpaceSettingsContainer>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: StoryObj<typeof SpaceSettingsContainer> = {};

package/src/components/SpaceSettings/SpaceSettingsContainer.tsx

@@ -1,205 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import * as Function from 'effect/Function';
-import * as Schema from 'effect/Schema';
-import React, { type ChangeEvent, useCallback, useMemo, useState } from 'react';
-
-import { LayoutAction, chain, createIntent } from '@dxos/app-framework';
-import { useIntentDispatcher } from '@dxos/app-framework/react';
-import { log } from '@dxos/log';
-import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
-import { useClient } from '@dxos/react-client';
-import { type Space, SpaceState } from '@dxos/react-client/echo';
-import { Button, Input, useFileDownload, useMulticastObservable, useTranslation } from '@dxos/react-ui';
-import {
-  ControlItem,
-  ControlItemInput,
-  ControlPage,
-  ControlSection,
-  Form,
-  type InputComponent,
-} from '@dxos/react-ui-form';
-import { HuePicker, IconPicker } from '@dxos/react-ui-pickers';
-import { StackItem } from '@dxos/react-ui-stack';
-
-import { meta } from '../../meta';
-import { SpaceAction, SpaceForm } from '../../types';
-
-const FormSchema = SpaceForm.pipe(
-  Schema.extend(
-    Schema.Struct({
-      archived: Schema.Boolean.annotations({ title: 'Archive Space' }),
-    }),
-  ),
-);
-
-export type SpaceSettingsContainerProps = {
-  space: Space;
-};
-
-// TODO(wittjosiah): Handle space migrations here?
-export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) => {
-  const { t } = useTranslation(meta.id);
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const client = useClient();
-  const archived = useMulticastObservable(space.state) === SpaceState.SPACE_INACTIVE;
-  const [edgeReplication, setEdgeReplication] = useState(
-    space.internal.data.edgeReplication === EdgeReplicationSetting.ENABLED,
-  );
-  const toggleEdgeReplication = useCallback(
-    async (next: boolean) => {
-      setEdgeReplication(next);
-      await space?.internal
-        .setEdgeReplicationPreference(next ? EdgeReplicationSetting.ENABLED : EdgeReplicationSetting.DISABLED)
-        .catch((err: unknown) => {
-          log.catch(err);
-          setEdgeReplication(!next);
-        });
-    },
-    [space],
-  );
-
-  const handleSave = useCallback(
-    (properties: Schema.Schema.Type<typeof FormSchema>) => {
-      void toggleEdgeReplication(properties.edgeReplication);
-      if (properties.name !== space.properties.name) {
-        space.properties.name = properties.name;
-      }
-      if (properties.icon !== space.properties.icon) {
-        space.properties.icon = properties.icon;
-      }
-      if (properties.hue !== space.properties.hue) {
-        space.properties.hue = properties.hue;
-      }
-      if (properties.archived && !archived) {
-        void dispatch(
-          Function.pipe(
-            createIntent(SpaceAction.Close, { space }),
-            chain(LayoutAction.SwitchWorkspace, {
-              part: 'workspace',
-              subject: client.spaces.default.id,
-            }),
-          ),
-        );
-      } else if (!properties.archived && archived) {
-        void dispatch(createIntent(SpaceAction.Open, { space }));
-      }
-    },
-    [space, toggleEdgeReplication, archived],
-  );
-
-  const values = useMemo(
-    () => ({
-      name: space.properties.name,
-      icon: space.properties.icon,
-      hue: space.properties.hue,
-      edgeReplication,
-      archived,
-    }),
-    [space.properties.name, space.properties.icon, space.properties.hue, edgeReplication, archived],
-  );
-
-  const customElements: Partial<Record<string, InputComponent>> = useMemo(
-    () => ({
-      name: ({ type, label, getValue, onValueChange }) => {
-        const handleChange = useCallback(
-          ({ target: { value } }: ChangeEvent<HTMLInputElement>) => onValueChange(type, value),
-          [onValueChange, type],
-        );
-        return (
-          <ControlItemInput title={label} description={t('display name description')}>
-            <Input.TextInput
-              value={getValue()}
-              onChange={handleChange}
-              placeholder={t('display name input placeholder')}
-              classNames='min-is-64'
-            />
-          </ControlItemInput>
-        );
-      },
-      icon: ({ type, label, getValue, onValueChange }) => {
-        const handleChange = useCallback((icon: string) => onValueChange(type, icon), [onValueChange, type]);
-        const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
-        return (
-          <ControlItem title={label} description={t('icon description')}>
-            <IconPicker
-              value={getValue()}
-              onChange={handleChange}
-              onReset={handleReset}
-              classNames='justify-self-end'
-            />
-          </ControlItem>
-        );
-      },
-      hue: ({ type, label, getValue, onValueChange }) => {
-        const handleChange = useCallback((nextHue: string) => onValueChange(type, nextHue), [onValueChange, type]);
-        const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
-        return (
-          <ControlItem title={label} description={t('hue description')}>
-            <HuePicker value={getValue()} onChange={handleChange} onReset={handleReset} classNames='justify-self-end' />
-          </ControlItem>
-        );
-      },
-      edgeReplication: ({ type, label, getValue, onValueChange }) => {
-        const handleChange = useCallback((checked: boolean) => onValueChange(type, checked), [onValueChange, type]);
-        return (
-          <ControlItemInput title={label} description={t('edge replication description')}>
-            <Input.Switch checked={getValue()} onCheckedChange={handleChange} classNames='justify-self-end' />
-          </ControlItemInput>
-        );
-      },
-      archived: ({ type, label, getValue, onValueChange }) => {
-        const handleChange = useCallback(() => onValueChange(type, !getValue()), [onValueChange, type, getValue]);
-        return (
-          <ControlItemInput title={label} description={t('archive space description')}>
-            <Button
-              disabled={space === client.spaces.default}
-              variant={getValue() ? 'default' : 'destructive'}
-              onClick={handleChange}
-            >
-              {getValue() ? t('unarchive space label') : t('archive space label')}
-            </Button>
-          </ControlItemInput>
-        );
-      },
-    }),
-    [t, space],
-  );
-
-  const download = useFileDownload();
-  const handleBackup = useCallback(async () => {
-    const archive = await space.internal.export();
-    download(new Blob([archive.contents as Uint8Array<ArrayBuffer>]), archive.filename);
-  }, [space, download]);
-
-  return (
-    <StackItem.Content scrollable>
-      <ControlPage>
-        <ControlSection
-          title={t('space properties settings verbose label', { ns: meta.id })}
-          description={t('space properties settings description', {
-            ns: meta.id,
-          })}
-        >
-          <Form
-            schema={FormSchema}
-            values={values}
-            autoSave
-            onSave={handleSave}
-            Custom={customElements}
-            outerSpacing={false}
-            classNames='container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content]'
-          />
-        </ControlSection>
-        <ControlItemInput
-          title={t('backup space label', { ns: meta.id })}
-          description={t('backup space description', { ns: meta.id })}
-        >
-          <Button onClick={handleBackup}>{t('download backup')}</Button>
-        </ControlItemInput>
-      </ControlPage>
-    </StackItem.Content>
-  );
-};

package/src/components/SpaceSettings/index.ts

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

package/src/components/SyncStatus/InlineSyncStatus.tsx

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