@dxos/plugin-status-bar 0.7.5-main.9d2a38b → 0.7.5-main.e9bb01b

package/src/StatusBarPlugin.tsx

@@ -4,10 +4,19 @@
 
 import React from 'react';
 
-import { Capabilities, contributes, createSurface, defineModule, definePlugin, Events } from '@dxos/app-framework';
+import {
+  Capabilities,
+  contributes,
+  createSurface,
+  defineModule,
+  definePlugin,
+  Events,
+  Surface,
+} from '@dxos/app-framework';
 
-import { StatusBarPanel } from './components';
-import { meta } from './meta';
+import { StatusBarActions, StatusBarPanel } from './components';
+import { VersionNumber } from './components/VersionNumber';
+import { meta, STATUS_BAR_PLUGIN } from './meta';
 import translations from './translations';
 
 export const StatusBarPlugin = () =>
@@ -19,7 +28,7 @@ export const StatusBarPlugin = () =>
     }),
     defineModule({
       id: `${meta.id}/module/react-surface`,
-      activatesOn: Events.Startup,
+      activatesOn: Events.SetupSurfaces,
       activate: () =>
         contributes(Capabilities.ReactSurface, [
           createSurface({
@@ -29,8 +38,18 @@ export const StatusBarPlugin = () =>
           }),
           createSurface({
             id: meta.id,
-            role: 'status-bar--sidebar-footer',
-            component: () => <StatusBarPanel />,
+            role: 'status-bar--r0-footer',
+            component: () => <Surface role='status' />,
+          }),
+          createSurface({
+            id: meta.id,
+            role: 'status-bar--r1-footer',
+            component: () => <StatusBarActions />,
+          }),
+          createSurface({
+            id: `${STATUS_BAR_PLUGIN}/header-end`,
+            role: 'header-end',
+            component: () => <VersionNumber />,
           }),
         ]),
     }),

package/src/components/StatusBar.stories.tsx

@@ -13,7 +13,7 @@ import { withTheme } from '@dxos/storybook-utils';
 import { StatusBar } from './StatusBar';
 
 export const DefaultStory = () => (
-  <StatusBar.Container>
+  <div>
     <StatusBar.EndContent>
       <StatusBar.Button>
         <Icon icon='ph--mailbox--regular' size={4} />
@@ -30,7 +30,7 @@ export const DefaultStory = () => (
         <StatusBar.Text>Online</StatusBar.Text>
       </StatusBar.Item>
     </StatusBar.EndContent>
-  </StatusBar.Container>
+  </div>
 );
 
 export const Default = {};

package/src/components/StatusBar.tsx

@@ -2,9 +2,8 @@
 // Copyright 2024 DXOS.org
 //
 
-import { useFocusableGroup } from '@fluentui/react-tabster';
 import { Slot } from '@radix-ui/react-slot';
-import React, { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import React, { type ComponentPropsWithRef, forwardRef, type PropsWithChildren, type ReactNode } from 'react';
 
 import { type ThemedClassName } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
@@ -17,14 +16,13 @@ const StatusBarText = forwardRef<HTMLSpanElement, StatusBarTextProps>(({ classNa
   </span>
 ));
 
-type StatusBarButtonProps = ThemedClassName<{ children: ReactNode; asChild?: boolean }> &
-  HTMLAttributes<HTMLButtonElement>;
+type StatusBarButtonProps = ThemedClassName<ComponentPropsWithRef<'button'> & { asChild?: boolean }>;
 
 const StatusBarButton = forwardRef<HTMLButtonElement, StatusBarButtonProps>(
   ({ classNames, children, asChild, ...props }, forwardedRef) => {
     const classes = mx(
-      'flex items-center gap-2 p-1 px-2 rounded-sm',
-      'select-none cursor-pointer ch-focus-ring',
+      'flex items-center justify-center gap-2 p-1 px-2 rounded-sm',
+      'select-none cursor-pointer dx-focus-ring text-description text-xs',
       'hover:bg-neutral-75 active:bg-neutral-150 dark:hover:bg-neutral-750 dark:active:bg-neutral-700',
       classNames,
     );
@@ -43,13 +41,13 @@ const StatusBarButton = forwardRef<HTMLButtonElement, StatusBarButtonProps>(
 
 export default StatusBarButton;
 
-type StatusBarItemProps = ThemedClassName<{ children: ReactNode }> & HTMLAttributes<HTMLDivElement>;
+type StatusBarItemProps = ThemedClassName<ComponentPropsWithRef<'div'>>;
 
 const StatusBarItem = forwardRef<HTMLDivElement, StatusBarItemProps>(
   ({ classNames, children, ...props }, forwardedRef) => (
     <div
       role='menuitem'
-      className={mx('flex items-center gap-2 p-1 px-2 rounded-sm select-none', classNames)}
+      className={mx('flex items-center justify-center gap-2 p-1 px-2 rounded-sm select-none', classNames)}
       ref={forwardedRef}
       {...props}
     >
@@ -58,30 +56,7 @@ const StatusBarItem = forwardRef<HTMLDivElement, StatusBarItemProps>(
   ),
 );
 
-type StatusBarContainerProps = ThemedClassName<{ children: ReactNode }>;
-
-// TODO(zan): tabable group with tabster.
-const StatusBarContainer = forwardRef<HTMLDivElement, StatusBarContainerProps>(
-  ({ classNames, children }, forwardedRef) => {
-    const groupAttrs = useFocusableGroup({ tabBehavior: 'limited' });
-    return (
-      <div
-        role='menubar'
-        tabIndex={0}
-        {...groupAttrs}
-        className={mx(
-          'bs-[--statusbar-size] flex justify-end items-center gap-2 bg-base text-description text-lg pointer-fine:text-xs ch-focus-ring-inset',
-          classNames,
-        )}
-        ref={forwardedRef}
-      >
-        {children}
-      </div>
-    );
-  },
-);
-
-type StartContentProps = ThemedClassName<{ children: ReactNode }>;
+type StartContentProps = ThemedClassName<PropsWithChildren<{}>>;
 
 const StartContent = forwardRef<HTMLDivElement, StartContentProps>(({ classNames, children }, forwardedRef) => (
   <div role='none' className={mx('flex-grow flex items-center space-x-2', classNames)} ref={forwardedRef}>
@@ -89,7 +64,7 @@ const StartContent = forwardRef<HTMLDivElement, StartContentProps>(({ classNames
   </div>
 ));
 
-type EndContentProps = ThemedClassName<{ children: ReactNode }>;
+type EndContentProps = ThemedClassName<PropsWithChildren<{}>>;
 
 const EndContent = forwardRef<HTMLDivElement, EndContentProps>(({ classNames, children }, forwardedRef) => (
   <div role='none' className={mx('flex-grow flex items-center justify-end', classNames)} ref={forwardedRef}>
@@ -98,7 +73,6 @@ const EndContent = forwardRef<HTMLDivElement, EndContentProps>(({ classNames, ch
 ));
 
 export const StatusBar = {
-  Container: StatusBarContainer,
   Text: StatusBarText,
   Item: StatusBarItem,
   Button: StatusBarButton,

package/src/components/StatusBarPanel.tsx

@@ -5,39 +5,48 @@
 import React, { useState } from 'react';
 
 import { Surface } from '@dxos/app-framework';
-import { Icon, Popover } from '@dxos/react-ui';
+import { Icon, Popover, useTranslation } from '@dxos/react-ui';
 
 import { FeedbackForm } from './FeedbackForm';
 import { StatusBar } from './StatusBar';
+import { VersionNumber } from './VersionNumber';
+import { STATUS_BAR_PLUGIN } from '../meta';
 
-export const StatusBarPanel = () => {
+export const StatusBarActions = () => {
+  const { t } = useTranslation(STATUS_BAR_PLUGIN);
   const [open, setOpen] = useState(false);
-
-  // TODO(wittjosiah): Factor out feedback and discord buttons.
   return (
     <Popover.Root open={open} onOpenChange={setOpen}>
-      <StatusBar.Container>
-        <StatusBar.EndContent>
-          <Surface role='status' />
-          <Popover.Trigger asChild>
-            <StatusBar.Button aria-label='Give feedback about composer' data-joyride='welcome/feedback'>
-              <Icon icon='ph--paper-plane-tilt--regular' size={4} />
-              <StatusBar.Text classNames='hidden sm:block'>Feedback</StatusBar.Text>
-            </StatusBar.Button>
-          </Popover.Trigger>
-          {/* TODO(zan): Configure this label? */}
-          <StatusBar.Button aria-label='Open DXOS Discord' asChild>
-            <a href='https://dxos.org/discord' target='_blank' rel='noopener noreferrer'>
-              <Icon icon='ph--discord-logo--regular' size={4} />
-              <StatusBar.Text classNames='hidden sm:block'>Discord</StatusBar.Text>
-            </a>
-          </StatusBar.Button>
-        </StatusBar.EndContent>
-      </StatusBar.Container>
-      <Popover.Content classNames='shadow-lg'>
-        <FeedbackForm onClose={() => setOpen(false)} />
-        <Popover.Arrow />
-      </Popover.Content>
+      <Popover.Trigger asChild>
+        <StatusBar.Button data-joyride='welcome/feedback'>
+          <Icon icon='ph--paper-plane-tilt--regular' size={4} />
+          <StatusBar.Text classNames='hidden sm:block'>{t('feedback label')}</StatusBar.Text>
+        </StatusBar.Button>
+      </Popover.Trigger>
+      {/* TODO(zan): Configure this label? */}
+      <StatusBar.Button asChild>
+        <a href='https://dxos.org/discord' target='_blank' rel='noopener noreferrer'>
+          <Icon icon='ph--discord-logo--regular' size={4} />
+          <StatusBar.Text classNames='hidden sm:block'>{t('discord label')}</StatusBar.Text>
+        </a>
+      </StatusBar.Button>
+      <VersionNumber />
+      <Popover.Portal>
+        <Popover.Content classNames='shadow-lg'>
+          <FeedbackForm onClose={() => setOpen(false)} />
+          <Popover.Arrow />
+        </Popover.Content>
+      </Popover.Portal>
     </Popover.Root>
   );
 };
+
+export const StatusBarPanel = () => {
+  return (
+    <>
+      <StatusBarActions />
+      <span role='separator' className='grow' />
+      <Surface role='status' />
+    </>
+  );
+};

package/src/components/VersionNumber.tsx

@@ -0,0 +1,86 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { formatDistance } from 'date-fns/formatDistance';
+import React from 'react';
+
+import { useConfig } from '@dxos/react-client';
+import { Link, Message, Popover, Trans, useTranslation, Icon } from '@dxos/react-ui';
+
+import { StatusBar } from './StatusBar';
+import { STATUS_BAR_PLUGIN } from '../meta';
+
+const repo = 'https://github.com/dxos/dxos';
+
+const VERSION_REGEX = /([\d.]+)/;
+
+export const VersionNumber = () => {
+  const config = useConfig();
+  const { t } = useTranslation(STATUS_BAR_PLUGIN);
+  const { version, timestamp, commitHash } = config.values.runtime?.app?.build ?? {};
+  const [_, v] = version?.match(VERSION_REGEX) ?? [];
+
+  const releaseUrl =
+    config.values.runtime?.app?.env?.DX_ENVIRONMENT === 'production'
+      ? `${repo}/releases/tag/v${version}`
+      : `${repo}/commit/${commitHash}`;
+
+  const previewUrl = 'https://docs.dxos.org/composer#technology-preview';
+
+  return (
+    <Popover.Root>
+      <Popover.Trigger asChild>
+        <StatusBar.Button classNames='text-xs'>v{v}</StatusBar.Button>
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content
+          side='top'
+          role='message'
+          classNames='z-[12] bg-warning-500 max-is-[min(calc(100vw-16px),40ch)]'
+        >
+          <Message.Root valence='warning' className='rounded-be-none p-5'>
+            <Message.Title>
+              <Icon icon='ph--warning--duotone' size={6} classNames='inline mie-2' />
+              <span>{t('warning title')}</span>
+            </Message.Title>
+            <Message.Body>
+              {t('technology preview message')}
+              <br />
+              <Link href={previewUrl} target='_blank' rel='noreferrer' variant='neutral'>
+                {t('learn more label')}
+                <Icon icon='ph--arrow-square-out--bold' classNames='inline mis-1' />
+              </Link>
+            </Message.Body>
+          </Message.Root>
+          <div role='none' className='plb-4 pli-5 space-b-2 text-baseText'>
+            {timestamp && (
+              <p>
+                {t('released message', {
+                  released: formatDistance(new Date(timestamp), new Date(), { addSuffix: true }),
+                })}
+                <br />
+                <Link href={releaseUrl} target='_blank' rel='noreferrer' variant='neutral'>
+                  {t('see release label')}
+                  <Icon icon='ph--arrow-square-out--bold' classNames='inline mis-1' />
+                </Link>
+              </p>
+            )}
+            <p>
+              <Trans
+                {...{
+                  t,
+                  i18nKey: 'powered by dxos message',
+                  components: {
+                    dxos: <Link href='https://dxos.org' target='_blank' rel='noreferrer' variant='neutral' />,
+                  },
+                }}
+              />
+            </p>
+          </div>
+          <Popover.Arrow />
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+};

package/src/translations.ts

@@ -14,7 +14,15 @@ type StatusBarTranslationKeys =
   | 'feedback text area placeholder'
   | 'send feedback label'
   | 'name label'
-  | 'name placeholder';
+  | 'name placeholder'
+  | 'warning title'
+  | 'technology preview message'
+  | 'learn more label'
+  | 'released message'
+  | 'see release label'
+  | 'powered by dxos message'
+  | 'discord label'
+  | 'feedback label';
 
 type RequiredTranslation = { [key in StatusBarTranslationKeys]: string };
 type TranslationEntry = { [STATUS_BAR_PLUGIN]: RequiredTranslation };
@@ -34,6 +42,14 @@ const translations: Record<Language, TranslationEntry> = {
     'feedback text area label': 'Feedback',
     'feedback text area placeholder': 'Found a bug? Have a suggestion? Let us know!',
     'send feedback label': 'Send Feedback',
+    'warning title': 'WARNING',
+    'technology preview message': 'Composer is still in technology preview.',
+    'learn more label': 'Learn more',
+    'released message': 'This version released {{released}}.',
+    'see release label': 'See release on GitHub',
+    'powered by dxos message': 'Powered by <dxos>DXOS</dxos>',
+    'discord label': 'Discord',
+    'feedback label': 'Feedback',
   }),
 };