@dxos/app-framework 0.3.10-main.ec4f2f4 → 0.3.10-main.f460bb8

package/src/plugins/components/CommandsDialog.tsx

@@ -0,0 +1,100 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { DotOutline } from '@phosphor-icons/react';
+import React, { useMemo, useRef } from 'react';
+
+import { type Action, type Graph, type Label } from '@dxos/app-graph';
+import { Keyboard, keySymbols } from '@dxos/keyboard';
+import { Button, Dialog, useTranslation } from '@dxos/react-ui';
+import { SearchList } from '@dxos/react-ui-searchlist';
+import { descriptionText, getSize, mx } from '@dxos/react-ui-theme';
+
+export const CommandsDialogContent = ({ graph }: { graph?: Graph }) => {
+  const { t } = useTranslation('os');
+
+  // TODO(burdon): Factor out.
+  // TODO(burdon): How to access all translations across plugins?
+  const toString = (label: Label) => (Array.isArray(label) ? t(...label) : label);
+
+  // Traverse graph.
+  // TODO(burdon): Factor out commonality with shortcut dialog.
+  const actions = useMemo(() => {
+    // TODO(burdon): Get from navtree (not keyboard).
+    const current = Keyboard.singleton.getCurrentContext();
+    const actionMap = new Set<string>();
+    const actions: Action[] = [];
+    graph?.traverse({
+      visitor: (node, path) => {
+        if (current.startsWith(path.join('/'))) {
+          node.actions.forEach((action) => {
+            if (!actionMap.has(action.id)) {
+              actionMap.add(action.id);
+              actions.push(action);
+            }
+          });
+        }
+      },
+    });
+
+    actions.sort(({ label: a }, { label: b }) => {
+      return toString(a)?.toLowerCase().localeCompare(toString(b)?.toLowerCase());
+    });
+
+    // console.log(JSON.stringify(actions, undefined, 2));
+    return actions;
+  }, [graph]);
+
+  // TODO(burdon): Remove.
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  return (
+    <Dialog.Content classNames={['md:max-is-[30rem] overflow-hidden']}>
+      <Dialog.Title>{t('commands dialog title', { ns: 'os' })}</Dialog.Title>
+
+      {/* TODO(burdon): BUG: Overscrolls container. */}
+      <SearchList.Root label={t('commandlist input placeholder')} classNames='flex flex-col grow overflow-hidden my-2'>
+        <SearchList.Input placeholder={t('commandlist input placeholder')} classNames={mx('px-1 my-2')} />
+        <SearchList.Content classNames={['max-bs-[30rem] overflow-auto']}>
+          {actions?.map((action) => {
+            const label = toString(action.label);
+            const Icon = action.icon ?? DotOutline;
+            return (
+              <SearchList.Item
+                value={label}
+                key={action.id}
+                onSelect={() => {
+                  if (action.properties.disabled) {
+                    return;
+                  }
+
+                  // TODO(burdon): Remove hack to close dialog (via hook?)
+                  buttonRef.current?.click();
+                  setTimeout(() => {
+                    void action.invoke();
+                  });
+                }}
+                classNames='flex items-center gap-2'
+                disabled={action.properties.disabled}
+                {...(action.properties?.testId && { 'data-testid': action.properties.testId })}
+              >
+                <Icon className={mx(getSize(4), 'shrink-0', !action.icon && 'invisible')} />
+                <span className='grow truncate'>{label}</span>
+                {action.keyBinding && (
+                  <span className={mx('shrink-0', descriptionText)}>{keySymbols(action.keyBinding).join('')}</span>
+                )}
+              </SearchList.Item>
+            );
+          })}
+        </SearchList.Content>
+      </SearchList.Root>
+
+      <Dialog.Close asChild>
+        <Button ref={buttonRef} variant='primary' classNames='mbs-2'>
+          {t('close label', { ns: 'os' })}
+        </Button>
+      </Dialog.Close>
+    </Dialog.Content>
+  );
+};

package/src/plugins/components/SettingsDialog.tsx

@@ -4,16 +4,18 @@
 
 import React, { useState } from 'react';
 
-import { Button, DensityProvider, Dialog, List, ListItem, useTranslation } from '@dxos/react-ui';
+import { Button, Dialog, List, ListItem, useTranslation } from '@dxos/react-ui';
 import { ghostHover, ghostSelected, groupBorder, mx } from '@dxos/react-ui-theme';
 
 import { type Plugin, usePlugins } from '../PluginHost';
 import { Surface } from '../SurfacePlugin';
 
+// TODO(burdon): Move into separate plugin.
 export const SettingsDialogContent = () => {
+  const { t } = useTranslation('os');
+
   // TODO(burdon): Store preview tab.
   const [plugin, setPlugin] = useState<string>('dxos.org/plugin/registry');
-  const { t } = useTranslation('os');
   const { plugins, enabled } = usePlugins();
 
   const core = [
@@ -29,41 +31,39 @@ export const SettingsDialogContent = () => {
     .map((plugin) => plugin!.meta)
     .sort(({ name: a }, { name: b }) => a?.localeCompare(b ?? '') ?? 0);
 
-  // TODO(burdon): Vertical layout if mobile.
+  // TODO(burdon): Common treatment for dialogs (e.g., shrink height to fit, mobile, etc.)
   return (
-    <DensityProvider density='fine'>
-      <Dialog.Content classNames={['h-[90%] md:max-is-[40rem] overflow-hidden']}>
-        <Dialog.Title>{t('settings dialog title', { ns: 'os' })}</Dialog.Title>
+    <Dialog.Content classNames={['h-full md:max-is-[40rem] overflow-hidden']}>
+      <Dialog.Title>{t('settings dialog title', { ns: 'os' })}</Dialog.Title>
 
-        <div className='flex grow mlb-4 overflow-hidden'>
-          <div className={mx('flex flex-col w-[200px] space-y-4 pr-4 border-r overflow-y-auto', groupBorder)}>
-            <PluginList
-              title='Options'
-              plugins={core.map((id) => plugins.find((p) => p.meta.id === id)!.meta)}
-              selected={plugin}
-              onSelect={(plugin) => setPlugin(plugin)}
-            />
+      <div className='flex grow mlb-4 overflow-hidden'>
+        <div className={mx('flex flex-col w-[200px] space-y-4 pr-4 border-r overflow-y-auto', groupBorder)}>
+          <PluginList
+            title='Options'
+            plugins={core.map((id) => plugins.find((p) => p.meta.id === id)!.meta)}
+            selected={plugin}
+            onSelect={(plugin) => setPlugin(plugin)}
+          />
 
-            <PluginList
-              title='Plugins'
-              plugins={filteredPlugins}
-              selected={plugin}
-              onSelect={(plugin) => setPlugin(plugin)}
-            />
-          </div>
+          <PluginList
+            title='Plugins'
+            plugins={filteredPlugins}
+            selected={plugin}
+            onSelect={(plugin) => setPlugin(plugin)}
+          />
+        </div>
 
-          <div className={mx('flex flex-col w-full md:px-4 divide-y overflow-y-auto', groupBorder)}>
-            <Surface role='settings' data={{ plugin }} />
-          </div>
+        <div className={mx('flex flex-col w-full md:px-4 divide-y overflow-y-auto', groupBorder)}>
+          <Surface role='settings' data={{ plugin }} />
         </div>
+      </div>
 
-        <Dialog.Close asChild>
-          <Button variant='primary' classNames='mbs-2'>
-            {t('done label', { ns: 'os' })}
-          </Button>
-        </Dialog.Close>
-      </Dialog.Content>
-    </DensityProvider>
+      <Dialog.Close asChild>
+        <Button variant='primary' classNames='mbs-2' autoFocus>
+          {t('done label', { ns: 'os' })}
+        </Button>
+      </Dialog.Close>
+    </Dialog.Content>
   );
 };
 

package/src/plugins/components/index.ts

@@ -2,5 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
+export * from './CommandsDialog';
 export * from './SettingsDialog';
 export * from './SettingsValue';

package/tsconfig.json

@@ -26,6 +26,9 @@
     {
       "path": "../../common/invariant"
     },
+    {
+      "path": "../../common/keyboard"
+    },
     {
       "path": "../../common/local-storage"
     },
@@ -35,9 +38,15 @@
     {
       "path": "../../ui/react-ui"
     },
+    {
+      "path": "../../ui/react-ui-searchlist"
+    },
     {
       "path": "../../ui/react-ui-theme"
     },
+    {
+      "path": "../../ui/storybook-utils"
+    },
     {
       "path": "../app-graph"
     }