@dxos/plugin-registry 0.8.4-main.b97322e → 0.8.4-main.bc674ce

package/src/cli/storage.ts

@@ -0,0 +1,57 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as FileSystem from '@effect/platform/FileSystem';
+import * as Path from '@effect/platform/Path';
+import * as Effect from 'effect/Effect';
+import * as Schema from 'effect/Schema';
+
+import { DX_CONFIG, getProfilePath } from '@dxos/client-protocol';
+
+// TODO(wittjosiah): Factor out to app-framework?
+
+const PLUGINS_FILE = 'plugins.json';
+
+const PluginsSchema = Schema.Array(Schema.String);
+
+/**
+ * Get the path to the plugins configuration file for a profile.
+ */
+const getPluginsPath = (profile: string): Effect.Effect<string, never, Path.Path> =>
+  Effect.gen(function* () {
+    const path = yield* Path.Path;
+    return path.join(getProfilePath(DX_CONFIG, profile), PLUGINS_FILE);
+  });
+
+/**
+ * Load enabled plugins from profile storage.
+ * Returns the list of enabled plugin IDs, or an empty array if the file doesn't exist.
+ */
+export const loadEnabledPlugins = Effect.fn(function* ({ profile }: { profile: string }) {
+  const fs = yield* FileSystem.FileSystem;
+  const pluginsPath = yield* getPluginsPath(profile);
+
+  const content = yield* fs
+    .readFileString(pluginsPath)
+    .pipe(Effect.catchTag('SystemError', () => Effect.succeed('[]')));
+
+  const parsed = yield* Schema.decodeUnknown(Schema.parseJson(PluginsSchema))(content).pipe(
+    Effect.catchAll(() => Effect.succeed([] as string[])),
+  );
+
+  return parsed;
+});
+
+/**
+ * Save enabled plugins to profile storage.
+ */
+export const saveEnabledPlugins = Effect.fn(function* ({ profile, enabled }: { profile: string; enabled: string[] }) {
+  const fs = yield* FileSystem.FileSystem;
+  const pluginsPath = yield* getPluginsPath(profile);
+  const profileDir = getProfilePath(DX_CONFIG, profile);
+
+  yield* fs.makeDirectory(profileDir, { recursive: true });
+  const encoded = Schema.encodeSync(Schema.parseJson(PluginsSchema))(enabled);
+  yield* fs.writeFileString(pluginsPath, encoded + '\n');
+});

package/src/components/PluginDetail.stories.tsx

@@ -2,44 +2,42 @@
 // Copyright 2025 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type StoryObj, type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 
+import { Plugin } from '@dxos/app-framework';
 import { faker } from '@dxos/random';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { PluginDetail, type PluginDetailProps } from './PluginDetail';
 import { translations } from '../translations';
 
-const meta: Meta<PluginDetailProps> = {
+import { PluginDetail } from './PluginDetail';
+
+const meta = {
   title: 'plugins/plugin-registry/PluginDetail',
   component: PluginDetail,
-  decorators: [withTheme, withLayout({ fullscreen: true, classNames: 'justify-center' })],
+  decorators: [withTheme, withLayout({ layout: 'column' })],
   parameters: {
     translations,
   },
-};
+} satisfies Meta<typeof PluginDetail>;
 
 export default meta;
 
-type Story = StoryObj<PluginDetailProps>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    plugin: {
-      meta: {
-        id: 'example.com/plugin/test-plugin',
-        name: 'Test Plugin',
-        description: faker.lorem.paragraphs(2),
-        icon: 'ph--bug--regular',
-        homePage: 'https://example.com',
-        source: 'https://github.com/example/test-plugin',
-        screenshots: [
-          'https://media.gcflearnfree.org/content/55e073de7dd48174331f51b3_01_17_2014/getting_started_interactive2.png',
-        ],
-      },
-      modules: [],
-    },
+    plugin: Plugin.define({
+      id: 'example.com/plugin/test-plugin',
+      name: 'Test Plugin',
+      description: faker.lorem.paragraphs(2),
+      icon: 'ph--bug--regular',
+      iconHue: 'sky',
+      homePage: 'https://example.com',
+      source: 'https://github.com/example/test-plugin',
+      screenshots: [
+        'https://media.gcflearnfree.org/content/55e073de7dd48174331f51b3_01_17_2014/getting_started_interactive2.png',
+      ],
+    }).pipe(Plugin.make)(),
   },
 };

package/src/components/PluginDetail.tsx

@@ -6,58 +6,74 @@ import React from 'react';
 
 import { type Plugin } from '@dxos/app-framework';
 import { Icon, Input, Link, useTranslation } from '@dxos/react-ui';
-import { DeprecatedFormContainer } from '@dxos/react-ui-form';
+import { Layout } from '@dxos/react-ui-mosaic';
+import { getStyles, mx } from '@dxos/ui-theme';
 
-import { REGISTRY_PLUGIN } from '../meta';
+import { meta } from '../meta';
 
 export type PluginDetailProps = {
-  plugin: Plugin;
+  plugin: Plugin.Plugin;
   enabled?: boolean;
-  onEnable?: () => void;
+  onEnabledChange?: (enabled: boolean) => void;
 };
 
-export const PluginDetail = ({ plugin, enabled, onEnable }: PluginDetailProps) => {
-  const { t } = useTranslation(REGISTRY_PLUGIN);
-  const { id, name, description, homePage, source, screenshots } = plugin.meta;
+export const PluginDetail = ({ plugin, enabled, onEnabledChange }: PluginDetailProps) => {
+  const { t } = useTranslation(meta.id);
+  const {
+    id,
+    name,
+    description,
+    homePage,
+    source,
+    screenshots,
+    icon = 'ph--circle--regular',
+    iconHue = 'neutral',
+  } = plugin.meta;
+  const styles = getStyles(iconHue);
 
   return (
-    <DeprecatedFormContainer classNames='gap-6'>
-      <div role='none' className='flex justify-between items-center'>
-        <p>{id}</p>
-        <Input.Root>
-          <Input.Switch classNames='self-center' checked={enabled} onClick={onEnable} />
-        </Input.Root>
-      </div>
-
-      {screenshots && screenshots.length > 0 && (
+    <Layout.Container scrollable>
+      <div role='none' className='grid grid-cols-[min-content_1fr] gap-4 container-max-width p-4'>
         <div role='none'>
-          <h1 className='text-lg mb-2'>Preview</h1>
-          <img src={screenshots[0]} alt={name} className='aspect-video object-fit' />
+          <Icon classNames={mx('p-1 rounded', styles.bg, styles.icon)} icon={icon} size={14} />
         </div>
-      )}
-
-      <div role='none'>
-        <p>{description}</p>
-      </div>
-
-      <div role='none'>
-        <h1 className='text-lg mb-2'>Resources</h1>
-        <div className='flex gap-2'>
-          {homePage && (
-            <Link href={homePage} target='_blank' rel='noreferrer' classNames='text-sm text-description'>
-              {t('home page label')}
-              <Icon icon='ph--arrow-square-out--bold' size={3} classNames='inline-block leading-none mli-1' />
-            </Link>
+        <div role='none' className='flex flex-col gap-6'>
+          <div role='none' className='grid grid-cols-[1fr_min-content] gap-x-3 is-full pbs-1'>
+            <h2 className='text-xl'>{name}</h2>
+            <Input.Root>
+              <Input.Switch classNames='self-center' checked={enabled} onCheckedChange={onEnabledChange} />
+            </Input.Root>
+            <p className='pbs-0.5 text-sm text-description'>{id}</p>
+          </div>
+          <div role='none'>
+            <p className='text-description'>{description}</p>
+          </div>
+          {screenshots && screenshots.length > 0 && (
+            <div role='none' className='flex flex-col gap-2'>
+              <h2>Preview</h2>
+              <img src={screenshots[0]} alt={name} className='aspect-video object-fit' />
+            </div>
           )}
+          <div role='none' className='flex flex-col gap-2'>
+            <h2>Resources</h2>
+            <div className='flex gap-2'>
+              {homePage && (
+                <Link href={homePage} target='_blank' rel='noreferrer' classNames='text-sm text-description'>
+                  {t('home page label')}
+                  <Icon icon='ph--arrow-square-out--bold' size={3} classNames='inline-block leading-none mli-1' />
+                </Link>
+              )}
 
-          {source && (
-            <Link href={source} target='_blank' rel='noreferrer' classNames='text-sm text-description'>
-              {t('source label')}
-              <Icon icon='ph--arrow-square-out--bold' size={3} classNames='inline-block leading-none mli-1' />
-            </Link>
-          )}
+              {source && (
+                <Link href={source} target='_blank' rel='noreferrer' classNames='text-sm text-description'>
+                  {t('source label')}
+                  <Icon icon='ph--arrow-square-out--bold' size={3} classNames='inline-block leading-none mli-1' />
+                </Link>
+              )}
+            </div>
+          </div>
         </div>
       </div>
-    </DeprecatedFormContainer>
+    </Layout.Container>
   );
 };

package/src/components/PluginItem.tsx

@@ -5,13 +5,15 @@
 import React, { type MouseEvent, useCallback } from 'react';
 
 import { type Plugin } from '@dxos/app-framework';
-import { Icon, IconButton, Input, Link, ListItem, Tag, useTranslation } from '@dxos/react-ui';
-import { descriptionText, mx } from '@dxos/react-ui-theme';
+import { type ChromaticPalette, Icon, IconButton, Input, Link, ListItem, Tag, useTranslation } from '@dxos/react-ui';
+import { descriptionText, mx } from '@dxos/ui-theme';
+import { getStyles } from '@dxos/ui-theme';
 
-import { REGISTRY_PLUGIN } from '../meta';
+import { meta } from '../meta';
+import { type RegistryTagType } from '../types';
 
 export type PluginItemProps = {
-  plugin: Plugin;
+  plugin: Plugin.Plugin;
   installed?: readonly string[];
   enabled?: readonly string[];
   onClick?: (id: string) => void;
@@ -25,11 +27,11 @@ export const PluginItem = ({
   enabled = [],
   onClick,
   onChange,
-  hasSettings: _hasSettings,
+  hasSettings: hasSettingsProp,
   onSettings,
 }: PluginItemProps) => {
-  const { t } = useTranslation(REGISTRY_PLUGIN);
-  const { id, name, description, tags, icon = 'ph--circle--regular' } = plugin.meta;
+  const { t } = useTranslation(meta.id);
+  const { id, name, description, tags, icon = 'ph--circle--regular', iconHue = 'neutral' } = plugin.meta;
   const isEnabled = enabled.includes(id);
   const inputId = `${id}-input`;
   const labelId = `${id}-label`;
@@ -44,8 +46,11 @@ export const PluginItem = ({
     [id, isEnabled, onChange],
   );
 
-  const hasSettings = _hasSettings?.(id) ?? false;
+  const hasSettings = hasSettingsProp?.(id) ?? false;
   const handleSettings = useCallback(() => onSettings?.(id), [id, onSettings]);
+  const styles = getStyles(iconHue);
+  const gridCols = 'grid grid-cols-[5rem_1fr]';
+  const gridRows = 'grid grid-rows-[40px_1fr_min-content_40px]';
 
   return (
     <ListItem.Root
@@ -53,67 +58,63 @@ export const PluginItem = ({
       labelId={labelId}
       data-testid={`pluginList.${id}`}
       aria-describedby={descriptionId}
-      // TODO(burdon): Use Rail vars.
-      classNames='is-full bs-full grid grid-cols-[48px_1fr_48px] grid-rows-[40px_1fr_32px] p-1 border border-separator rounded-md'
+      classNames={mx(gridCols, 'bs-[12rem] is-full gap-3 pie-2 border border-separator rounded-md overflow-hidden')}
     >
-      {/* Header. */}
-      <div className='flex flex-col grow justify-center items-center'>
-        <Icon icon={icon} size={6} onClick={handleClick} classNames='text-subdued cursor-pointer' />
-      </div>
-      <div className='flex items-center overflow-hidden cursor-pointer' onClick={handleClick}>
-        <span className='truncate'>{name ?? id}</span>
-      </div>
-      <div className='flex justify-center items-center'>
-        <Input.Root id={inputId}>
-          <Input.Switch classNames='self-center' checked={isEnabled} onClick={handleChange} />
-        </Input.Root>
+      <div className={mx(gridRows, 'justify-center rounded-l-md', styles.bg)}>
+        <div />
+        <Icon classNames={mx('cursor-pointer', styles.icon)} icon={icon} size={14} onClick={handleClick} />
       </div>
 
-      {/* Body. */}
-      <div />
-      {(description || tags) && (
-        <div id={descriptionId} className='col-span-2 flex flex-col w-full justify-between gap-2 pb-2'>
-          <div className='grow'>
-            <p className={mx(descriptionText, 'line-clamp-3 min-w-0 pie-2')}>{description}</p>
-          </div>
-          {tags && tags.length > 0 && (
-            <div>
-              {tags.map((tag) => (
-                <Tag key={tag} palette={'indigo'} classNames='text-xs capitalize'>
-                  {tag}
-                </Tag>
-              ))}
-            </div>
-          )}
+      <div className={mx(gridRows)}>
+        <div className='flex items-center overflow-hidden cursor-pointer' onClick={handleClick}>
+          <span className='text-lg truncate'>{name ?? id}</span>
         </div>
-      )}
 
-      {/* Footer. */}
-      <div />
-      <div className='flex gap-2 items-center pie-1'>
-        <Link
-          aria-describedby={descriptionId}
-          classNames='text-sm text-description cursor-pointer'
-          onClick={handleClick}
-        >
-          {t('details label')}
-        </Link>
+        <div>
+          <p className={mx(descriptionText, 'line-clamp-4 min-is-0')}>{description}</p>
+        </div>
 
-        <div className='flex-1' />
-      </div>
-      <div className='flex justify-center items-center'>
-        {hasSettings && (
+        <div className='flex -mis-0.5 overflow-x-auto scrollbar-none'>
+          {tags?.map((tag) => (
+            <Tag key={tag} palette={tagColors[tag as RegistryTagType]} classNames='text-xs uppercase font-thin'>
+              {tag}
+            </Tag>
+          ))}
+        </div>
+
+        <div className='flex gap-2 items-center text-sm'>
           <IconButton
             aria-describedby={descriptionId}
-            classNames='text-sm text-description cursor-pointer'
+            classNames='cursor-pointer'
             icon='ph--gear--regular'
             label={t('settings label')}
             iconOnly
             size={4}
             onClick={handleSettings}
+            disabled={!hasSettings}
           />
-        )}
+
+          <Link aria-describedby={descriptionId} classNames='text-description cursor-pointer' onClick={handleClick}>
+            {t('details label')}
+          </Link>
+
+          <div className='grow' />
+          <div className='pie-1'>
+            <Input.Root id={inputId}>
+              <Input.Switch classNames='self-center' checked={isEnabled} onClick={handleChange} />
+            </Input.Root>
+          </div>
+        </div>
       </div>
     </ListItem.Root>
   );
 };
+
+const tagColors: Record<RegistryTagType, ChromaticPalette> = {
+  new: 'rose',
+  beta: 'teal',
+  labs: 'blue',
+  popular: 'green',
+  featured: 'pink',
+  experimental: 'amber',
+};

package/src/components/PluginList.stories.tsx

@@ -2,19 +2,18 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
 
-import { definePlugin, type Plugin } from '@dxos/app-framework';
+import { type Plugin, Plugin as PluginNS } from '@dxos/app-framework';
 import { faker } from '@dxos/random';
-import { type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-import { withTheme, withLayout } from '@dxos/storybook-utils';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { getHashHue } from '@dxos/ui-theme';
 
-import { PluginList } from './PluginList';
 import { translations } from '../translations';
+import { RegistryTagType } from '../types';
+
+import { PluginList } from './PluginList';
 
 faker.seed(1);
 
@@ -27,25 +26,21 @@ const icons = [
   'ph--github-logo--regular',
 ];
 
-const DefaultStory = ({ classNames }: ThemedClassName<{}>) => {
-  const [plugins] = useState<Plugin[]>(
+const DefaultStory = () => {
+  const [plugins] = useState<Plugin.Plugin[]>(
     faker.helpers.multiple(
       () =>
-        definePlugin(
-          {
-            id: `dxos.org/plugin/plugin-${faker.string.uuid()}`,
-            name: `${faker.commerce.productName()}`,
-            description: faker.lorem.sentences(Math.ceil(Math.random() * 3)),
-            tags: faker.datatype.boolean({ probability: 0.6 })
-              ? [faker.helpers.arrayElement(['labs', 'beta', 'alpha', 'stable', 'new', '新発売'])]
-              : undefined,
-            icon: faker.helpers.arrayElement(icons),
-            homePage: faker.datatype.boolean({ probability: 0.5 }) ? faker.internet.url() : undefined,
-            source: faker.internet.url(),
-          },
-          [],
-        ),
-      { count: 16 },
+        PluginNS.define({
+          id: `dxos.org/plugin/plugin-${faker.string.uuid()}`,
+          name: `${faker.commerce.productName()}`,
+          description: faker.lorem.sentences(Math.ceil(Math.random() * 3)),
+          tags: faker.helpers.uniqueArray(RegistryTagType.literals as any, Math.floor(Math.random() * 3)),
+          icon: faker.helpers.arrayElement(icons),
+          iconHue: getHashHue(faker.string.uuid()),
+          homePage: faker.datatype.boolean({ probability: 0.5 }) ? faker.internet.url() : undefined,
+          source: faker.internet.url(),
+        }).pipe(PluginNS.make)(),
+      { count: 32 },
     ),
   );
   const [enabled, setEnabled] = useState<string[]>([]);
@@ -54,29 +49,29 @@ const DefaultStory = ({ classNames }: ThemedClassName<{}>) => {
     setEnabled((plugins) => (enabled ? [...plugins, id] : plugins.filter((plugin) => plugin === id)));
   };
 
-  return (
-    <div className={mx('flex overflow-hidden', classNames)}>
-      <PluginList plugins={plugins} enabled={enabled} onChange={handleChange} hasSettings={() => true} />
-    </div>
-  );
+  return <PluginList plugins={plugins} enabled={enabled} onChange={handleChange} hasSettings={() => true} />;
 };
 
-const meta: Meta = {
+const meta = {
   title: 'plugins/plugin-registry/PluginList',
   component: PluginList,
   render: DefaultStory,
-  decorators: [withTheme, withLayout({ fullscreen: true, classNames: 'justify-center' })],
   parameters: {
     translations,
   },
-};
+} satisfies Meta<typeof PluginList>;
 
 export default meta;
 
-export const Default = {};
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  decorators: [withTheme, withLayout({ layout: 'column', scroll: true })],
+};
 
-export const Column = {
-  args: {
-    classNames: 'w-[30rem]',
+export const FullScreen: Story = {
+  decorators: [withTheme, withLayout({ scroll: true })],
+  parameters: {
+    layout: 'fullscreen',
   },
 };

package/src/components/PluginList.tsx

@@ -10,16 +10,14 @@ import { List } from '@dxos/react-ui';
 import { PluginItem, type PluginItemProps } from './PluginItem';
 
 export type PluginListProps = Omit<PluginItemProps, 'plugin'> & {
-  plugins?: readonly Plugin[];
+  plugins?: readonly Plugin.Plugin[];
 };
 
 export const PluginList = ({ plugins = [], ...props }: PluginListProps) => {
   return (
-    <List classNames='grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] auto-rows-[12rem] gap-3 p-3'>
+    <List classNames='grid grid-cols-[repeat(auto-fill,minmax(18rem,1fr))] auto-rows-[max-content] gap-4 p-4'>
       {plugins.map((plugin) => (
-        <div key={plugin.meta.id} className='flex'>
-          <PluginItem plugin={plugin} {...props} />
-        </div>
+        <PluginItem key={plugin.meta.id} plugin={plugin} {...props} />
       ))}
     </List>
   );

package/src/components/RegistryContainer.tsx

@@ -2,83 +2,82 @@
 // Copyright 2023 DXOS.org
 //
 
+import { useAtomValue } from '@effect-atom/atom-react';
+import * as Effect from 'effect/Effect';
 import React, { useCallback, useMemo } from 'react';
 
-import {
-  Capabilities,
-  createIntent,
-  LayoutAction,
-  type Plugin,
-  SettingsAction,
-  useCapability,
-  useIntentDispatcher,
-  usePluginManager,
-} from '@dxos/app-framework';
-import { ObservabilityAction } from '@dxos/plugin-observability/types';
-import { StackItem } from '@dxos/react-ui-stack';
+import { Common, type Plugin, SettingsOperation } from '@dxos/app-framework';
+import { useCapabilities, useOperationInvoker, usePluginManager } from '@dxos/app-framework/react';
+import { runAndForwardErrors } from '@dxos/effect';
+import { ObservabilityOperation } from '@dxos/plugin-observability/types';
+import { Layout } from '@dxos/react-ui-mosaic';
 
 import { PluginList } from './PluginList';
 
-const sortByPluginMeta = ({ meta: { name: a = '' } }: Plugin, { meta: { name: b = '' } }: Plugin) => a.localeCompare(b);
+const sortByPluginMeta = ({ meta: { name: a = '' } }: Plugin.Plugin, { meta: { name: b = '' } }: Plugin.Plugin) =>
+  a.localeCompare(b);
 
-export const RegistryContainer = ({ id, plugins: _plugins }: { id: string; plugins: Plugin[] }) => {
+export type RegistryContainerProps = {
+  id: string;
+  plugins: Plugin.Plugin[];
+};
+
+export const RegistryContainer = ({ id, plugins: pluginsProp }: RegistryContainerProps) => {
   const manager = usePluginManager();
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const plugins = useMemo(() => _plugins.sort(sortByPluginMeta), [_plugins]);
-  const settingsStore = useCapability(Capabilities.SettingsStore);
+  const { invoke, invokePromise } = useOperationInvoker();
+  const plugins = useMemo(() => pluginsProp.sort(sortByPluginMeta), [pluginsProp]);
+  const enabled = useAtomValue(manager.enabled);
+  const allSettings = useCapabilities(Common.Capability.Settings);
 
   // TODO(wittjosiah): Factor out to an intent?
   const handleChange = useCallback(
-    async (id: string, enabled: boolean) => {
-      if (enabled) {
-        await manager.enable(id);
-      } else {
-        await manager.disable(id);
-      }
+    (id: string, enabled: boolean) =>
+      Effect.gen(function* () {
+        if (enabled) {
+          yield* manager.enable(id);
+        } else {
+          yield* manager.disable(id);
+        }
 
-      await dispatch(
-        createIntent(ObservabilityAction.SendEvent, {
+        yield* invoke(ObservabilityOperation.SendEvent, {
           name: 'plugins.toggle',
           properties: {
             plugin: id,
             enabled,
           },
-        }),
-      );
-    },
-    [dispatch, manager],
+        });
+      }).pipe(runAndForwardErrors),
+    [invoke, manager],
   );
 
   const handleClick = useCallback(
     (pluginId: string) =>
-      dispatch(
-        createIntent(LayoutAction.Open, {
-          part: 'main',
-          // TODO(wittjosiah): `/` currently is not supported in ids.
-          subject: [pluginId.replaceAll('/', ':')],
-          options: { pivotId: id, positioning: 'end' },
-        }),
-      ),
-    [dispatch, id],
+      invokePromise(Common.LayoutOperation.Open, {
+        // TODO(wittjosiah): `/` currently is not supported in ids.
+        subject: [pluginId.replaceAll('/', ':')],
+        pivotId: id,
+        positioning: 'end',
+      }),
+    [invokePromise, id],
   );
 
-  const hasSettings = useCallback((pluginId: string) => !!settingsStore.getStore(pluginId), [settingsStore]);
+  const hasSettings = useCallback((pluginId: string) => allSettings.some((s) => s.prefix === pluginId), [allSettings]);
 
   const handleSettings = useCallback(
-    (pluginId: string) => dispatch(createIntent(SettingsAction.Open, { plugin: pluginId })),
-    [dispatch],
+    (pluginId: string) => invokePromise(SettingsOperation.Open, { plugin: pluginId }),
+    [invokePromise],
   );
 
   return (
-    <StackItem.Content classNames='min-bs-0 overflow-y-auto scrollbar-thin contain-layout'>
+    <Layout.Container scrollable>
       <PluginList
         plugins={plugins}
-        enabled={manager.enabled}
+        enabled={enabled}
         onClick={handleClick}
         onChange={handleChange}
         hasSettings={hasSettings}
         onSettings={handleSettings}
       />
-    </StackItem.Content>
+    </Layout.Container>
   );
 };