@dxos/plugin-space 0.6.14-main.8b352a0 → 0.6.14-staging.54a8bab

package/src/SpacePlugin.tsx

@@ -6,9 +6,11 @@ import { signal } from '@preact/signals-core';
 import React from 'react';
 
 import {
+  type GraphProvides,
   type IntentDispatcher,
   type IntentPluginProvides,
   LayoutAction,
+  type LayoutProvides,
   type LocationProvides,
   NavigationAction,
   type Plugin,
@@ -18,6 +20,7 @@ import {
   openIds,
   parseGraphPlugin,
   parseIntentPlugin,
+  parseLayoutPlugin,
   parseMetadataResolverPlugin,
   parseNavigationPlugin,
   resolvePlugin,
@@ -48,6 +51,7 @@ import {
   isSpace,
   loadObjectReferences,
   parseId,
+  FQ_ID_LENGTH,
 } from '@dxos/react-client/echo';
 import { Dialog } from '@dxos/react-ui';
 import { ClipboardProvider, InvitationManager, type InvitationManagerProps, osTranslations } from '@dxos/shell/react';
@@ -59,10 +63,8 @@ import {
   CollectionSection,
   DefaultObjectSettings,
   MenuFooter,
-  MissingObject,
   PopoverRenameObject,
   PopoverRenameSpace,
-  SaveStatus,
   ShareSpaceButton,
   SmallPresence,
   SmallPresenceLive,
@@ -91,7 +93,6 @@ import {
 } from './util';
 
 const ACTIVE_NODE_BROADCAST_INTERVAL = 30_000;
-const OBJECT_ID_LENGTH = 60; // 33 (space id) + 26 (object id) + 1 (separator).
 const SPACE_MAX_OBJECTS = 500;
 // https://stackoverflow.com/a/19016910
 const DIRECTORY_TYPE = 'text/directory';
@@ -138,17 +139,22 @@ export const SpacePlugin = ({
   const graphSubscriptions = new Map<string, UnsubscribeCallback>();
 
   let clientPlugin: Plugin<ClientPluginProvides> | undefined;
+  let graphPlugin: Plugin<GraphProvides> | undefined;
   let intentPlugin: Plugin<IntentPluginProvides> | undefined;
+  let layoutPlugin: Plugin<LayoutProvides> | undefined;
   let navigationPlugin: Plugin<LocationProvides> | undefined;
   let attentionPlugin: Plugin<AttentionPluginProvides> | undefined;
 
   const onSpaceReady = async () => {
-    if (!clientPlugin || !navigationPlugin || !attentionPlugin) {
+    if (!clientPlugin || !intentPlugin || !graphPlugin || !navigationPlugin || !layoutPlugin || !attentionPlugin) {
       return;
     }
 
     const client = clientPlugin.provides.client;
+    const dispatch = intentPlugin.provides.intent.dispatch;
+    const graph = graphPlugin.provides.graph;
     const location = navigationPlugin.provides.location;
+    const layout = layoutPlugin.provides.layout;
     const attention = attentionPlugin.provides.attention;
     const defaultSpace = client.spaces.default;
 
@@ -166,6 +172,26 @@ export const SpacePlugin = ({
       defaultSpace.db.add(create({ key: SHARED, order: [] }));
     }
 
+    // Await missing objects.
+    subscriptions.add(
+      scheduledEffect(
+        () => ({
+          layoutMode: layout.layoutMode,
+          soloPart: location.active.solo?.[0],
+        }),
+        ({ layoutMode, soloPart }) => {
+          if (layoutMode !== 'solo' || !soloPart) {
+            return;
+          }
+
+          const node = graph.findNode(soloPart.id);
+          if (!node && soloPart.id.length === FQ_ID_LENGTH) {
+            void dispatch({ plugin: SPACE_PLUGIN, action: SpaceAction.WAIT_FOR_OBJECT, data: { id: soloPart.id } });
+          }
+        },
+      ),
+    );
+
     // Cache space names.
     subscriptions.add(
       client.spaces.subscribe(async (spaces) => {
@@ -289,6 +315,8 @@ export const SpacePlugin = ({
       settings.prop({ key: 'showHidden', type: LocalStorageStore.bool({ allowUndefined: true }) });
       state.prop({ key: 'spaceNames', type: LocalStorageStore.json<Record<string, string>>() });
 
+      graphPlugin = resolvePlugin(plugins, parseGraphPlugin);
+      layoutPlugin = resolvePlugin(plugins, parseLayoutPlugin);
       navigationPlugin = resolvePlugin(plugins, parseNavigationPlugin);
       attentionPlugin = resolvePlugin(plugins, parseAttentionPlugin);
       clientPlugin = resolvePlugin(plugins, parseClientPlugin);
@@ -311,19 +339,20 @@ export const SpacePlugin = ({
         await onFirstRun?.({ client, dispatch });
       };
 
-      // No need to unsubscribe because this observable completes when spaces are ready.
-      client.spaces.isReady.subscribe(async (ready) => {
-        if (ready) {
-          await clientPlugin?.provides.client.spaces.default.waitUntilReady();
-          if (firstRun) {
-            void firstRun?.wait().then(handleFirstRun);
-          } else {
-            await handleFirstRun();
-          }
+      subscriptions.add(
+        client.spaces.isReady.subscribe(async (ready) => {
+          if (ready) {
+            await clientPlugin?.provides.client.spaces.default.waitUntilReady();
+            if (firstRun) {
+              void firstRun?.wait().then(handleFirstRun);
+            } else {
+              await handleFirstRun();
+            }
 
-          await onSpaceReady();
-        }
-      });
+            await onSpaceReady();
+          }
+        }).unsubscribe,
+      );
     },
     unload: async () => {
       settings.close();
@@ -336,6 +365,11 @@ export const SpacePlugin = ({
       space: state.values,
       settings: settings.values,
       translations: [...translations, osTranslations],
+      complementary: {
+        panels: [
+          { id: 'settings', label: ['open settings panel label', { ns: SPACE_PLUGIN }], icon: 'ph--gear--regular' },
+        ],
+      },
       root: () => (state.values.awaiting ? <AwaitingObject id={state.values.awaiting} /> : null),
       metadata: {
         records: {
@@ -356,24 +390,20 @@ export const SpacePlugin = ({
       },
       surface: {
         component: ({ data, role, ...rest }) => {
-          const primary = data.active ?? data.object;
           switch (role) {
             case 'article':
-            case 'main':
               // TODO(wittjosiah): Need to avoid shotgun parsing space state everywhere.
-              return isSpace(primary) && primary.state.get() === SpaceState.SPACE_READY ? (
+              return isSpace(data.object) && data.object.state.get() === SpaceState.SPACE_READY ? (
                 <Surface
-                  data={{ active: primary.properties[CollectionType.typename], id: primary.id }}
+                  data={{ object: data.object.properties[CollectionType.typename], id: data.object.id }}
                   role={role}
                   {...rest}
                 />
-              ) : primary instanceof CollectionType ? (
+              ) : data.object instanceof CollectionType ? (
                 {
-                  node: <CollectionMain collection={primary} />,
+                  node: <CollectionMain collection={data.object} />,
                   disposition: 'fallback',
                 }
-              ) : typeof primary === 'string' && primary.length === OBJECT_ID_LENGTH ? (
-                <MissingObject id={primary} />
               ) : null;
             case 'complementary--settings':
               return isSpace(data.subject) ? (
@@ -450,12 +480,7 @@ export const SpacePlugin = ({
                 return null;
               }
             case 'status': {
-              return (
-                <>
-                  <SyncStatus />
-                  <SaveStatus />
-                </>
-              );
+              return <SyncStatus />;
             }
             default:
               return null;

package/src/components/SpaceSettings.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 
 import { useIntentDispatcher, useResolvePlugins } from '@dxos/app-framework';
 import { Input, Select, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { FormInput } from '@dxos/react-ui-data';
+import { DeprecatedFormInput } from '@dxos/react-ui-data';
 
 import { SpaceAction, SPACE_PLUGIN } from '../meta';
 import { parseSpaceInitPlugin, type SpaceSettingsProps } from '../types';
@@ -18,7 +18,7 @@ export const SpaceSettings = ({ settings }: { settings: SpaceSettingsProps }) =>
 
   return (
     <>
-      <FormInput label={t('show hidden spaces label')}>
+      <DeprecatedFormInput label={t('show hidden spaces label')}>
         <Input.Switch
           checked={settings.showHidden}
           onCheckedChange={(checked) =>
@@ -29,9 +29,9 @@ export const SpaceSettings = ({ settings }: { settings: SpaceSettingsProps }) =>
             })
           }
         />
-      </FormInput>
+      </DeprecatedFormInput>
 
-      <FormInput label={t('default on space create label')}>
+      <DeprecatedFormInput label={t('default on space create label')}>
         <Select.Root
           value={settings.onSpaceCreate}
           onValueChange={(value) => {
@@ -57,7 +57,7 @@ export const SpaceSettings = ({ settings }: { settings: SpaceSettingsProps }) =>
             </Select.Content>
           </Select.Portal>
         </Select.Root>
-      </FormInput>
+      </DeprecatedFormInput>
     </>
   );
 };

package/src/components/SpaceSettingsPanel.tsx

@@ -6,7 +6,9 @@ import React, { useCallback, useState } from 'react';
 
 import { log } from '@dxos/log';
 import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
+import { useClient } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
+import { DeviceType, useDevices } from '@dxos/react-client/halo';
 import { Input, useTranslation } from '@dxos/react-ui';
 
 import { SPACE_PLUGIN } from '../meta';
@@ -17,10 +19,16 @@ export type SpaceSettingsPanelProps = {
 
 export const SpaceSettingsPanel = ({ space }: SpaceSettingsPanelProps) => {
   const { t } = useTranslation(SPACE_PLUGIN);
+
+  const client = useClient();
+  const devices = useDevices();
+  const managedDeviceAvailable = devices.find((device) => device.profile?.type === DeviceType.AGENT_MANAGED);
+  const edgeAgents = Boolean(client.config.values.runtime?.client?.edgeFeatures?.agents);
+  const edgeReplicationAvailable = edgeAgents && managedDeviceAvailable;
+
   const [edgeReplication, setEdgeReplication] = useState(
     space.internal.data.edgeReplication === EdgeReplicationSetting.ENABLED,
   );
-
   const toggleEdgeReplication = useCallback(
     async (next: boolean) => {
       setEdgeReplication(next);
@@ -41,19 +49,21 @@ export const SpaceSettingsPanel = ({ space }: SpaceSettingsPanelProps) => {
           <Input.Label>{t('name label')}</Input.Label>
           <Input.TextInput
             placeholder={t('name placeholder')}
-            value={space.properties.name}
+            value={space.properties.name ?? ''}
             onChange={(event) => {
               space.properties.name = event.target.value;
             }}
           />
         </div>
       </Input.Root>
-      <Input.Root>
-        <div role='none' className='flex justify-between'>
-          <Input.Label>{t('edge replication label')}</Input.Label>
-          <Input.Switch checked={edgeReplication} onCheckedChange={toggleEdgeReplication} />
-        </div>
-      </Input.Root>
+      {edgeReplicationAvailable && (
+        <Input.Root>
+          <div role='none' className='flex justify-between'>
+            <Input.Label>{t('edge replication label')}</Input.Label>
+            <Input.Switch checked={edgeReplication} onCheckedChange={toggleEdgeReplication} />
+          </div>
+        </Input.Root>
+      )}
     </div>
   );
 };

package/src/components/SyncStatus/Space.tsx

@@ -0,0 +1,109 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { type HTMLAttributes, useEffect, useState } from 'react';
+
+import { Icon } from '@dxos/react-ui';
+import { type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+import { type Progress, type PeerSyncState } from './sync-state';
+
+export const SYNC_STALLED_TIMEOUT = 5_000;
+
+// TODO(wittjosiah): Define sematic color tokens.
+const styles = {
+  barBg: 'bg-neutral-50 dark:bg-green-900 text-black',
+  barFg: 'bg-neutral-100 bg-green-500',
+  barHover: 'dark:hover:bg-green-500',
+};
+
+const useActive = (count: number) => {
+  const [current, setCurrent] = useState(count);
+  const [active, setActive] = useState(false);
+  useEffect(() => {
+    let t: NodeJS.Timeout | undefined;
+    if (count !== current) {
+      setActive(true);
+      setCurrent(count);
+      t && clearTimeout(t);
+      t = setTimeout(() => {
+        setActive(false);
+      }, SYNC_STALLED_TIMEOUT);
+    }
+
+    return () => {
+      setActive(false);
+      clearTimeout(t);
+    };
+  }, [count, current]);
+  return active;
+};
+
+export const SpaceRow = ({
+  spaceId,
+  state: { localDocumentCount, remoteDocumentCount, missingOnLocal, missingOnRemote },
+}: {
+  spaceId: string;
+  state: PeerSyncState;
+}) => {
+  const downActive = useActive(localDocumentCount);
+  const upActive = useActive(remoteDocumentCount);
+
+  return (
+    <div
+      className={mx('flex items-center mx-[2px] gap-[2px] cursor-pointer', styles.barHover)}
+      title={spaceId}
+      onClick={() => {
+        void navigator.clipboard.writeText(spaceId);
+      }}
+    >
+      <Icon
+        icon='ph--arrow-fat-line-left--regular'
+        size={3}
+        classNames={mx(downActive && 'animate-[pulse_1s_infinite]')}
+      />
+      <Candle
+        up={{ count: remoteDocumentCount, total: remoteDocumentCount + missingOnRemote }}
+        down={{ count: localDocumentCount, total: localDocumentCount + missingOnLocal }}
+        title={spaceId}
+      />
+      <Icon
+        icon='ph--arrow-fat-line-right--regular'
+        size={3}
+        classNames={mx(upActive && 'animate-[pulse_1s_step-start_infinite]')}
+      />
+    </div>
+  );
+};
+
+type CandleProps = ThemedClassName<Pick<HTMLAttributes<HTMLDivElement>, 'title'>> & { up: Progress; down: Progress };
+
+const Candle = ({ classNames, up, down }: CandleProps) => {
+  return (
+    <div className={mx('grid grid-cols-[1fr_2rem_1fr] w-full h-3', classNames)}>
+      <Bar classNames='justify-end' {...up} />
+      <div className='relative'>
+        <div className={mx('absolute inset-0 flex items-center justify-center text-xs', styles.barBg)}>{up.total}</div>
+      </div>
+      <Bar {...down} />
+    </div>
+  );
+};
+
+const Bar = ({ classNames, count, total }: ThemedClassName<Progress>) => {
+  let p = (count / total) * 100;
+  if (count < total) {
+    p = Math.min(p, 95);
+  }
+
+  return (
+    <div className={mx('relative flex w-full', styles.barBg, classNames)}>
+      <div className={mx('shrink-0', styles.barFg)} style={{ width: `${p}%` }}></div>
+      {count !== total && (
+        <div className='absolute top-0 bottom-0 flex items-center mx-0.5 text-black text-xs'>{count}</div>
+      )}
+    </div>
+  );
+};

package/src/components/SyncStatus/SyncStatus.stories.tsx

@@ -4,14 +4,14 @@
 
 import '@dxos-theme';
 
-import { type Meta } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import React from 'react';
 
 import { SpaceId } from '@dxos/keys';
 import { withTheme, withLayout } from '@dxos/storybook-utils';
 
 import { SyncStatusDetail, SyncStatusIndicator } from './SyncStatus';
-import { getSyncSummary, type SpaceSyncStateMap } from './types';
+import { getSyncSummary, type SpaceSyncStateMap } from './sync-state';
 import translations from '../../translations';
 
 const DefaultStory = (props: any) => {
@@ -39,13 +39,22 @@ const state: SpaceSyncStateMap = Array.from({ length: 5 }).reduce<SpaceSyncState
   return map;
 }, {});
 
-export const Default = {
+export const Default: StoryObj<typeof SyncStatusIndicator> = {
   args: {
     state,
+    saved: true,
   },
 };
 
-export const Detail = {
+export const Saving: StoryObj<typeof SyncStatusIndicator> = {
+  args: {
+    state,
+    saved: false,
+  },
+};
+
+// TODO(wittjosiah): Separate story path for separate component.
+export const Detail: StoryObj<typeof SyncStatusDetail> = {
   render: SyncStatusDetail,
   args: {
     state,

package/src/components/SyncStatus/SyncStatus.tsx

@@ -2,73 +2,76 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { type HTMLAttributes, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { StatusBar } from '@dxos/plugin-status-bar';
+import { useClient } from '@dxos/react-client';
 import { Icon, Popover, useTranslation } from '@dxos/react-ui';
 import { type ThemedClassName } from '@dxos/react-ui';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { mx } from '@dxos/react-ui-theme';
 
-import { type Progress, type PeerSyncState, type SpaceSyncStateMap, getSyncSummary, useSyncState } from './types';
+import { SpaceRow, SYNC_STALLED_TIMEOUT } from './Space';
+import { createClientSaveTracker } from './save-tracker';
+import { getIcon, getStatus } from './status';
+import { type PeerSyncState, type SpaceSyncStateMap, getSyncSummary, useSyncState } from './sync-state';
 import { SPACE_PLUGIN } from '../../meta';
 
-const SYNC_STALLED_TIMEOUT = 5_000;
-
-const styles = {
-  barBg: 'bg-neutral-50 dark:bg-green-900 text-black',
-  barFg: 'bg-neutral-100 bg-green-500',
-  barHover: 'dark:hover:bg-green-500',
-};
-
 export const SyncStatus = () => {
+  const client = useClient();
   const state = useSyncState();
-  return <SyncStatusIndicator state={state} />;
+  const [saved, setSaved] = useState(true);
+
+  useEffect(() => {
+    return createClientSaveTracker(client, (state) => {
+      setSaved(state === 'saved');
+    });
+  }, []);
+
+  return <SyncStatusIndicator state={state} saved={saved} />;
 };
 
-export const SyncStatusIndicator = ({ state }: { state: SpaceSyncStateMap }) => {
+export const SyncStatusIndicator = ({ state, saved }: { state: SpaceSyncStateMap; saved: Boolean }) => {
+  const { t } = useTranslation(SPACE_PLUGIN);
   const summary = getSyncSummary(state);
-  const offline = false;
-
+  const offline = Object.values(state).length === 0;
   const needsToUpload = summary.differentDocuments > 0 || summary.missingOnRemote > 0;
   const needsToDownload = summary.differentDocuments > 0 || summary.missingOnLocal > 0;
+  const status = getStatus({ offline, saved, needsToUpload, needsToDownload });
+
   const [classNames, setClassNames] = useState<string>();
   useEffect(() => {
     setClassNames(undefined);
-    if (!needsToUpload && !needsToDownload) {
+    if (offline || (!needsToUpload && !needsToDownload)) {
       return;
     }
 
     const t = setTimeout(() => {
+      // TODO(wittjosiah): Use semantic color tokens.
       setClassNames('text-orange-500');
     }, SYNC_STALLED_TIMEOUT);
     return () => clearTimeout(t);
-  }, [needsToUpload, needsToDownload]);
+  }, [offline, needsToUpload, needsToDownload]);
 
-  return (
-    <StatusBar.Item>
+  const title = t(`${status} label`);
+  const icon = <Icon icon={getIcon(status)} size={4} classNames={classNames} />;
+
+  if (offline) {
+    return <StatusBar.Item title={title}>{icon}</StatusBar.Item>;
+  } else {
+    return (
       <Popover.Root>
-        <Popover.Trigger>
-          <Icon
-            icon={
-              offline
-                ? 'ph--cloud-x--regular'
-                : needsToUpload
-                  ? 'ph--cloud-arrow-up--regular'
-                  : needsToDownload
-                    ? 'ph--cloud-arrow-down--regular'
-                    : 'ph--cloud-check--regular'
-            }
-            size={4}
-            classNames={classNames}
-          />
+        <Popover.Trigger asChild>
+          <StatusBar.Button title={title}>{icon}</StatusBar.Button>
         </Popover.Trigger>
-        <Popover.Content sideOffset={16}>
-          <SyncStatusDetail state={state} summary={summary} debug={false} />
-        </Popover.Content>
+        <Popover.Portal>
+          <Popover.Content sideOffset={16}>
+            <SyncStatusDetail state={state} summary={summary} debug={false} />
+          </Popover.Content>
+        </Popover.Portal>
       </Popover.Root>
-    </StatusBar.Item>
-  );
+    );
+  }
 };
 
 export const SyncStatusDetail = ({
@@ -86,9 +89,9 @@ export const SyncStatusDetail = ({
 
   // TODO(burdon): Normalize to max document count?
   return (
-    <div className={mx('flex flex-col text-xs min-w-[16rem]', classNames)}>
-      <h1 className='p-2'>{t('sync status title')}</h1>
-      <div className='flex flex-col gap-[2px] my-[2px]'>
+    <div className={mx('flex flex-col gap-3 p-2 text-xs min-w-[16rem]', classNames)}>
+      <h1>{t('sync status title')}</h1>
+      <div className='flex flex-col gap-2'>
         {entries.map(([spaceId, state]) => (
           <SpaceRow key={spaceId} spaceId={spaceId} state={state} />
         ))}
@@ -97,92 +100,3 @@ export const SyncStatusDetail = ({
     </div>
   );
 };
-
-const useActive = (count: number) => {
-  const [current, setCurrent] = useState(count);
-  const [active, setActive] = useState(false);
-  useEffect(() => {
-    let t: NodeJS.Timeout | undefined;
-    if (count !== current) {
-      setActive(true);
-      setCurrent(count);
-      t && clearTimeout(t);
-      t = setTimeout(() => {
-        setActive(false);
-      }, SYNC_STALLED_TIMEOUT);
-    }
-
-    return () => {
-      setActive(false);
-      clearTimeout(t);
-    };
-  }, [count, current]);
-  return active;
-};
-
-const SpaceRow = ({
-  spaceId,
-  state: { localDocumentCount, remoteDocumentCount, missingOnLocal, missingOnRemote },
-}: {
-  spaceId: string;
-  state: PeerSyncState;
-}) => {
-  const downActive = useActive(localDocumentCount);
-  const upActive = useActive(remoteDocumentCount);
-
-  return (
-    <div
-      className={mx('flex items-center mx-[2px] gap-[2px] cursor-pointer', styles.barHover)}
-      title={spaceId}
-      onClick={() => {
-        void navigator.clipboard.writeText(spaceId);
-      }}
-    >
-      <Icon
-        icon='ph--arrow-fat-line-left--regular'
-        size={3}
-        classNames={mx(downActive && 'animate-[pulse_1s_infinite]')}
-      />
-      <Candle
-        up={{ count: remoteDocumentCount, total: remoteDocumentCount + missingOnRemote }}
-        down={{ count: localDocumentCount, total: localDocumentCount + missingOnLocal }}
-        title={spaceId}
-      />
-      <Icon
-        icon='ph--arrow-fat-line-right--regular'
-        size={3}
-        classNames={mx(upActive && 'animate-[pulse_1s_step-start_infinite]')}
-      />
-    </div>
-  );
-};
-
-type CandleProps = ThemedClassName<Pick<HTMLAttributes<HTMLDivElement>, 'title'>> & { up: Progress; down: Progress };
-
-const Candle = ({ classNames, up, down }: CandleProps) => {
-  return (
-    <div className={mx('grid grid-cols-[1fr_2rem_1fr] w-full h-3', classNames)}>
-      <Bar classNames='justify-end' {...up} />
-      <div className='relative'>
-        <div className={mx('absolute inset-0 flex items-center justify-center text-xs', styles.barBg)}>{up.total}</div>
-      </div>
-      <Bar {...down} />
-    </div>
-  );
-};
-
-const Bar = ({ classNames, count, total }: ThemedClassName<Progress>) => {
-  let p = (count / total) * 100;
-  if (count < total) {
-    p = Math.min(p, 95);
-  }
-
-  return (
-    <div className={mx('relative flex w-full', styles.barBg, classNames)}>
-      <div className={mx('shrink-0', styles.barFg)} style={{ width: `${p}%` }}></div>
-      {count !== total && (
-        <div className='absolute top-0 bottom-0 flex items-center mx-0.5 text-black text-xs'>{count}</div>
-      )}
-    </div>
-  );
-};