@dxos/app-framework 0.3.10-main.dcfebef → 0.3.10-main.e948ee0

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,7 +4,7 @@
 
 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';
@@ -31,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 (pattern).
+  // 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,6 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
+export * from './CommandsDialog';
 export * from './SettingsDialog';
 export * from './SettingsValue';
-export * from './ShortcutsDialog';

package/tsconfig.json

@@ -38,6 +38,9 @@
     {
       "path": "../../ui/react-ui"
     },
+    {
+      "path": "../../ui/react-ui-searchlist"
+    },
     {
       "path": "../../ui/react-ui-theme"
     },

package/dist/types/src/plugins/components/ShortcutsDialog.d.ts

@@ -1,2 +0,0 @@
-export declare const ShortcutsDialogContent: () => JSX.Element;
-//# sourceMappingURL=ShortcutsDialog.d.ts.map

package/dist/types/src/plugins/components/ShortcutsDialog.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ShortcutsDialog.d.ts","sourceRoot":"","sources":["../../../../../src/plugins/components/ShortcutsDialog.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,sBAAsB,mBAiDlC,CAAC"}

package/src/plugins/components/ShortcutsDialog.tsx

@@ -1,61 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React from 'react';
-
-import { type Label } from '@dxos/app-graph';
-import { Keyboard, keySymbols } from '@dxos/keyboard';
-import { Button, Dialog, DensityProvider, useTranslation } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-
-export const ShortcutsDialogContent = () => {
-  const { t } = useTranslation('os');
-
-  const bindings = Keyboard.singleton.getBindings();
-
-  // TODO(burdon): Factor out.
-  // TODO(burdon): How to access all translations across plugins?
-  const getLabel = (label: Label) => (Array.isArray(label) ? t(...label) : label);
-
-  return (
-    <DensityProvider density='fine'>
-      <Dialog.Content classNames={['md:max-is-[30rem] overflow-hidden']}>
-        <Dialog.Title>{t('shortcuts dialog title', { ns: 'os' })}</Dialog.Title>
-
-        <table className='table-fixed border-collapse my-4'>
-          <tbody>
-            {bindings.map((binding, i) => (
-              <tr key={i}>
-                <td className='p-1 w-[120px]'>
-                  <div className='flex gap-1'>
-                    {keySymbols(binding.binding).map((c, i) => (
-                      <span
-                        key={i}
-                        className={mx(
-                          'inline-flex w-[24px] h-[24px] justify-center items-center text-xs',
-                          'rounded border border-neutral-300 dark:border-neutral-600 bg-neutral-50 dark:bg-neutral-850',
-                        )}
-                      >
-                        {c}
-                      </span>
-                    ))}
-                  </div>
-                </td>
-                <td className='p-1'>
-                  <span className='grow truncate'>{getLabel(binding.data as Label)}</span>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-
-        <Dialog.Close asChild>
-          <Button variant='primary' classNames='mbs-2'>
-            {t('close label', { ns: 'os' })}
-          </Button>
-        </Dialog.Close>
-      </Dialog.Content>
-    </DensityProvider>
-  );
-};