@dxos/plugin-status-bar 0.8.1-main.ae460ac → 0.8.1-staging.31c3ee1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-status-bar",
-  "version": "0.8.1-main.ae460ac",
+  "version": "0.8.1-staging.31c3ee1",
   "description": "Status bar plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -24,19 +24,19 @@
     "src"
   ],
   "dependencies": {
-    "@fluentui/react-tabster": "9.23.3",
+    "@fluentui/react-tabster": "^9.24.2",
     "@preact/signals-core": "^1.6.0",
     "@radix-ui/react-slot": "1.1.2",
     "date-fns": "^3.3.1",
-    "effect": "^3.12.3",
+    "effect": "3.13.3",
     "react-resize-detector": "^11.0.1",
-    "@dxos/app-framework": "0.8.1-main.ae460ac",
-    "@dxos/async": "0.8.1-main.ae460ac",
-    "@dxos/echo-schema": "0.8.1-main.ae460ac",
-    "@dxos/plugin-observability": "0.8.1-main.ae460ac",
-    "@dxos/react-client": "0.8.1-main.ae460ac",
-    "@dxos/react-ui-form": "0.8.1-main.ae460ac",
-    "@dxos/schema": "0.8.1-main.ae460ac"
+    "@dxos/app-framework": "0.8.1-staging.31c3ee1",
+    "@dxos/async": "0.8.1-staging.31c3ee1",
+    "@dxos/echo-schema": "0.8.1-staging.31c3ee1",
+    "@dxos/react-client": "0.8.1-staging.31c3ee1",
+    "@dxos/plugin-observability": "0.8.1-staging.31c3ee1",
+    "@dxos/schema": "0.8.1-staging.31c3ee1",
+    "@dxos/react-ui-form": "0.8.1-staging.31c3ee1"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -45,16 +45,16 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/react-ui": "0.8.1-main.ae460ac",
-    "@dxos/react-ui-theme": "0.8.1-main.ae460ac",
-    "@dxos/storybook-utils": "0.8.1-main.ae460ac"
+    "@dxos/react-ui": "0.8.1-staging.31c3ee1",
+    "@dxos/storybook-utils": "0.8.1-staging.31c3ee1",
+    "@dxos/react-ui-theme": "0.8.1-staging.31c3ee1"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.1-main.ae460ac",
-    "@dxos/react-ui-theme": "0.8.1-main.ae460ac"
+    "@dxos/react-ui": "0.8.1-staging.31c3ee1",
+    "@dxos/react-ui-theme": "0.8.1-staging.31c3ee1"
   },
   "publishConfig": {
     "access": "public"

package/src/components/StatusBarPanel.tsx

@@ -7,7 +7,6 @@ import React, { useState } from 'react';
 import { Surface } from '@dxos/app-framework';
 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';
@@ -15,14 +14,9 @@ import { STATUS_BAR_PLUGIN } from '../meta';
 export const StatusBarActions = () => {
   const { t } = useTranslation(STATUS_BAR_PLUGIN);
   const [open, setOpen] = useState(false);
+
   return (
     <Popover.Root open={open} onOpenChange={setOpen}>
-      <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'>
@@ -30,13 +24,13 @@ export const StatusBarActions = () => {
           <StatusBar.Text classNames='hidden sm:block'>{t('discord label')}</StatusBar.Text>
         </a>
       </StatusBar.Button>
+      <StatusBar.Button asChild>
+        <a href='https://github.com/dxos/dxos' target='_blank' rel='noopener noreferrer'>
+          <Icon icon='ph--github-logo--regular' size={4} />
+          <StatusBar.Text classNames='hidden sm:block'>{t('github 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>
   );
 };

package/src/components/VersionNumber.tsx

@@ -20,6 +20,7 @@ export const VersionNumber = () => {
   const { t } = useTranslation(STATUS_BAR_PLUGIN);
   const { version, timestamp, commitHash } = config.values.runtime?.app?.build ?? {};
   const [_, v] = version?.match(VERSION_REGEX) ?? [];
+  const isLabs = config.values.runtime?.app?.env?.DX_LABS;
 
   const releaseUrl =
     config.values.runtime?.app?.env?.DX_ENVIRONMENT === 'production'
@@ -31,7 +32,7 @@ export const VersionNumber = () => {
   return (
     <Popover.Root>
       <Popover.Trigger asChild>
-        <StatusBar.Button classNames='text-xs'>v{v}</StatusBar.Button>
+        <StatusBar.Button classNames='text-xs'>{isLabs ? version : v}</StatusBar.Button>
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Content

package/src/meta.ts

@@ -6,9 +6,9 @@ import { type PluginMeta } from '@dxos/app-framework';
 
 export const STATUS_BAR_PLUGIN = 'dxos.org/plugin/status-bar';
 
-export const meta = {
+export const meta: PluginMeta = {
   id: STATUS_BAR_PLUGIN,
   name: 'Status Bar',
   description: 'Display a bar with status and actions.',
   icon: 'ph--info--regular',
-} satisfies PluginMeta;
+};

package/src/translations.ts

@@ -6,15 +6,10 @@ import { type useTranslation } from '@dxos/react-ui';
 
 import { STATUS_BAR_PLUGIN } from './meta';
 
+// TODO(wittjosiah): There's got to be a better way to do typesafe translations, this is too much boilerplate.
+
 type StatusBarTranslationKeys =
   | 'plugin name'
-  | 'email input label'
-  | 'email input placeholder'
-  | 'feedback text area label'
-  | 'feedback text area placeholder'
-  | 'send feedback label'
-  | 'name label'
-  | 'name placeholder'
   | 'warning title'
   | 'technology preview message'
   | 'learn more label'
@@ -22,6 +17,7 @@ type StatusBarTranslationKeys =
   | 'see release label'
   | 'powered by dxos message'
   | 'discord label'
+  | 'github label'
   | 'feedback label';
 
 type RequiredTranslation = { [key in StatusBarTranslationKeys]: string };
@@ -35,20 +31,14 @@ export const mkTranslation = (t: ReturnType<typeof useTranslation>['t']) => (key
 const translations: Record<Language, TranslationEntry> = {
   'en-US': entry({
     'plugin name': 'Status Bar',
-    'name label': 'Name',
-    'name placeholder': 'Preferred name',
-    'email input label': 'Email',
-    'email input placeholder': 'hello@example.com',
-    'feedback text area label': 'Feedback',
-    'feedback text area placeholder': 'Please describe your issue or suggestion.',
-    'send feedback label': 'Send Feedback',
     'warning title': 'WARNING',
-    'technology preview message': 'Composer is still in technology preview.',
+    'technology preview message': 'Composer is currently in beta.',
     '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',
+    'github label': 'GitHub',
     'feedback label': 'Feedback',
   }),
 };

package/dist/types/src/components/FeedbackForm.d.ts

@@ -1,4 +0,0 @@
-export declare const FeedbackForm: ({ onClose }: {
-    onClose: () => void;
-}) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=FeedbackForm.d.ts.map

package/dist/types/src/components/FeedbackForm.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FeedbackForm.d.ts","sourceRoot":"","sources":["../../../../src/components/FeedbackForm.tsx"],"names":[],"mappings":"AAkBA,eAAO,MAAM,YAAY,gBAAiB;IAAE,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,4CAwFhE,CAAC"}

package/src/components/FeedbackForm.tsx

@@ -1,107 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { PaperPlaneTilt, X } from '@phosphor-icons/react';
-import React, { useCallback } from 'react';
-
-import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
-import { ObservabilityAction, UserFeedback } from '@dxos/plugin-observability/types';
-import { Button, Input, Popover, useTranslation } from '@dxos/react-ui';
-import { useForm } from '@dxos/react-ui-form';
-import { getSize } from '@dxos/react-ui-theme';
-
-import { STATUS_BAR_PLUGIN } from '../meta';
-import { mkTranslation } from '../translations';
-
-const initialValues: UserFeedback = { name: '', email: '', message: '' };
-
-export const FeedbackForm = ({ onClose }: { onClose: () => void }) => {
-  const { t } = useTranslation(STATUS_BAR_PLUGIN);
-  const translation = mkTranslation(t);
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-
-  const onSave = useCallback(
-    (values: UserFeedback) => {
-      void dispatch(createIntent(ObservabilityAction.CaptureUserFeedback, values));
-      onClose();
-    },
-    [dispatch, onClose],
-  );
-
-  const { handleSave, canSave, getStatus, ...inputProps } = useForm<UserFeedback>({
-    initialValues,
-    schema: UserFeedback,
-    onSave,
-  });
-
-  return (
-    <div role='form' className='p-3 flex flex-col gap-2'>
-      <div role='none' className='space-b-1'>
-        <Input.Root validationValence={getStatus('name').status}>
-          <Input.Label>{translation('name label')}</Input.Label>
-          <Input.TextInput
-            classNames={'text-sm'}
-            placeholder={translation('name placeholder')}
-            autoFocus
-            {...inputProps}
-          />
-          <Input.DescriptionAndValidation>
-            <Input.Validation>{getStatus('name').error}</Input.Validation>
-          </Input.DescriptionAndValidation>
-        </Input.Root>
-      </div>
-
-      <div role='none' className='space-b-1'>
-        <Input.Root validationValence={getStatus('email').status}>
-          <Input.Label>{translation('email input label')}</Input.Label>
-          <Input.TextInput
-            classNames={'text-sm'}
-            placeholder={translation('email input placeholder')}
-            {...inputProps}
-          />
-          <Input.DescriptionAndValidation>
-            <Input.Validation>{getStatus('email').error}</Input.Validation>
-          </Input.DescriptionAndValidation>
-        </Input.Root>
-      </div>
-
-      <div role='none' className='space-b-1'>
-        <Input.Root validationValence={getStatus('message').status}>
-          <Input.Label>{translation('feedback text area label')}</Input.Label>
-          <Input.TextArea
-            classNames={'text-sm'}
-            rows={5}
-            cols={30}
-            placeholder={translation('feedback text area placeholder')}
-            {...inputProps}
-          />
-          <Input.DescriptionAndValidation>
-            <Input.Validation>{getStatus('message').error}</Input.Validation>
-          </Input.DescriptionAndValidation>
-        </Input.Root>
-      </div>
-
-      <div role='none' className='space-b-2'>
-        <Button
-          type='submit'
-          variant='primary'
-          classNames='is-full flex gap-2'
-          disabled={!canSave}
-          onClick={handleSave}
-        >
-          <span>{translation('send feedback label')}</span>
-          <div className='grow' />
-          <PaperPlaneTilt className={getSize(5)} />
-        </Button>
-        <Popover.Close asChild>
-          <Button classNames='is-full flex gap-2'>
-            <span>{t('cancel label', { ns: 'os' })}</span>
-            <div className='grow' />
-            <X className={getSize(5)} />
-          </Button>
-        </Popover.Close>
-      </div>
-    </div>
-  );
-};