@dxos/plugin-deck 0.7.4-staging.f7e8224 → 0.7.5-main.499c70c

package/src/DeckPlugin.tsx

@@ -3,18 +3,18 @@
 //
 
 import { batch } from '@preact/signals-core';
+import { pipe } from 'effect';
 import { setAutoFreeze } from 'immer';
 import React, { type PropsWithChildren } from 'react';
 
 import {
+  chain,
+  createIntent,
+  createResolver,
+  createSurface,
   filterPlugins,
-  type GraphProvides,
   IntentAction,
-  type IntentData,
   type IntentPluginProvides,
-  isLayoutAdjustment,
-  isLayoutMode,
-  isLayoutParts,
   type Layout,
   LayoutAction,
   type LayoutEntry,
@@ -32,15 +32,15 @@ import {
   Toast as ToastSchema,
 } from '@dxos/app-framework';
 import { type UnsubscribeCallback } from '@dxos/async';
-import { getTypename } from '@dxos/echo-schema';
+import { getTypename, S } from '@dxos/echo-schema';
 import { scheduledEffect } from '@dxos/echo-signals/core';
+import { invariant } from '@dxos/invariant';
 import { create, isReactiveObject } from '@dxos/live-object';
 import { LocalStorageStore } from '@dxos/local-storage';
 import { log } from '@dxos/log';
 import { type AttentionPluginProvides, parseAttentionPlugin } from '@dxos/plugin-attention';
-import { createExtension, type Node } from '@dxos/plugin-graph';
-import { ObservabilityAction } from '@dxos/plugin-observability/meta';
-import { fullyQualifiedId } from '@dxos/react-client/echo';
+import { createExtension, ROOT_ID, type Node } from '@dxos/plugin-graph';
+import { ObservabilityAction } from '@dxos/plugin-observability/types';
 import { translations as stackTranslations } from '@dxos/react-ui-stack';
 
 import { DeckContext, type DeckContextType, DeckLayout, LayoutContext, LayoutSettings, NAV_ID } from './components';
@@ -56,6 +56,7 @@ import {
 import meta, { DECK_PLUGIN } from './meta';
 import translations from './translations';
 import {
+  DeckAction,
   type DeckPluginProvides,
   type DeckSettingsProps,
   type NewPlankPositioning,
@@ -75,25 +76,11 @@ const appScheme = 'composer://';
 // TODO(Zan): Move this to a more global location if we use immer more broadly.
 setAutoFreeze(false);
 
-//
-// Intents
-//
-const DECK_ACTION = 'dxos.org/plugin/deck';
-
-export enum DeckAction {
-  UPDATE_PLANK_SIZE = `${DECK_ACTION}/update-plank-size`,
-}
-
-export namespace DeckAction {
-  export type UpdatePlankSize = IntentData<{ id: string; size: number }>;
-}
-
 export const DeckPlugin = ({
   observability,
 }: {
   observability?: boolean;
 } = {}): PluginDefinition<DeckPluginProvides> => {
-  let graphPlugin: Plugin<GraphProvides> | undefined;
   let intentPlugin: Plugin<IntentPluginProvides> | undefined;
   let attentionPlugin: Plugin<AttentionPluginProvides> | undefined;
   const unsubscriptionCallbacks = [] as (UnsubscribeCallback | undefined)[];
@@ -149,18 +136,18 @@ export const DeckPlugin = ({
     anchorId,
     dialogBlockAlign,
     dialogType,
-  }: LayoutAction.SetLayout) => {
+  }: LayoutAction.SetLayout['input']) => {
     switch (element) {
       case 'sidebar': {
         layout.values.sidebarOpen = state ?? !layout.values.sidebarOpen;
-        return { data: true };
+        break;
       }
 
       case 'complementary': {
         layout.values.complementarySidebarOpen = !!state;
         // TODO(thure): Hoist content into the c11y sidebar of Deck.
         // layout.values.complementarySidebarContent = component || subject ? { component, subject } : null;
-        return { data: true };
+        break;
       }
 
       case 'dialog': {
@@ -168,32 +155,39 @@ export const DeckPlugin = ({
         layout.values.dialogContent = component ? { component, subject } : null;
         layout.values.dialogBlockAlign = dialogBlockAlign ?? 'center';
         layout.values.dialogType = dialogType;
-        return { data: true };
+        break;
       }
 
       case 'popover': {
         layout.values.popoverOpen = state ?? Boolean(component);
         layout.values.popoverContent = component ? { component, subject } : null;
         layout.values.popoverAnchorId = anchorId;
-        return { data: true };
+        break;
       }
 
       case 'toast': {
-        if (ToastSchema.safeParse(subject).success) {
+        if (S.is(ToastSchema)(subject)) {
           layout.values.toasts = [...layout.values.toasts, subject];
-          return { data: true };
         }
+        break;
       }
     }
   };
 
   /**
-   * Update the active state and ensure that attention is on an active element.
+   * Update the active state and returns the id of the next attended plank.
    */
   const handleSetLocation = (next: LayoutParts) => {
     const part = layout.values.layoutMode === 'solo' ? 'solo' : 'main';
     const ids = openIds(next, [part]);
 
+    const current = openIds(location.values.active, [part]);
+    const removed = current.filter((id) => !ids.includes(id));
+    const closed = Array.from(new Set([...location.values.closed.filter((id) => !ids.includes(id)), ...removed]));
+
+    location.values.closed = closed;
+    location.values.active = next;
+
     if (attentionPlugin) {
       const attended = attentionPlugin.provides.attention.attended;
       const [attendedId] = Array.from(attended);
@@ -203,28 +197,17 @@ export const DeckPlugin = ({
         const attendedIndex = currentIds.indexOf(attendedId);
         // If outside of bounds, focus on the first/last plank, otherwise focus on the new plank in the same position.
         const index = attendedIndex === -1 ? 0 : attendedIndex >= ids.length ? ids.length - 1 : attendedIndex;
-        const nextAttended = next[part]?.[index].id;
-        void intentPlugin?.provides.intent.dispatch({
-          action: LayoutAction.SCROLL_INTO_VIEW,
-          data: { id: nextAttended },
-        });
+        return next[part]?.[index].id;
       }
     }
-
-    const current = openIds(location.values.active, [part]);
-    const removed = current.filter((id) => !ids.includes(id));
-    const closed = Array.from(new Set([...location.values.closed.filter((id) => !ids.includes(id)), ...removed]));
-
-    location.values.closed = closed;
-    location.values.active = next;
   };
 
   return {
     meta,
-    ready: async (plugins) => {
-      intentPlugin = resolvePlugin(plugins, parseIntentPlugin);
-      graphPlugin = resolvePlugin(plugins, parseGraphPlugin);
+    ready: async ({ plugins }) => {
       attentionPlugin = resolvePlugin(plugins, parseAttentionPlugin);
+      intentPlugin = resolvePlugin(plugins, parseIntentPlugin);
+      const dispatch = intentPlugin?.provides.intent.dispatchPromise;
 
       layout
         .prop({ key: 'layoutMode', type: LocalStorageStore.enum<LayoutMode>() })
@@ -267,13 +250,15 @@ export const DeckPlugin = ({
         const startingLayout = removePart(location.values.active, 'solo');
         const layoutFromUri = uriToSoloPart(pathname);
         if (!layoutFromUri) {
-          handleSetLocation(startingLayout);
+          const toAttend = handleSetLocation(startingLayout);
           layout.values.layoutMode = 'deck';
+          await dispatch?.(createIntent(LayoutAction.ScrollIntoView, { id: toAttend }));
           return;
         }
 
-        handleSetLocation(mergeLayoutParts(layoutFromUri, startingLayout));
+        const toAttend = handleSetLocation(mergeLayoutParts(layoutFromUri, startingLayout));
         layout.values.layoutMode = 'solo';
+        await dispatch?.(createIntent(LayoutAction.ScrollIntoView, { id: toAttend }));
       };
 
       await handleNavigation();
@@ -303,22 +288,24 @@ export const DeckPlugin = ({
       location: location.values,
       translations: [...translations, ...stackTranslations],
       graph: {
-        builder: () => {
+        builder: (plugins) => {
+          const dispatch = resolvePlugin(plugins, parseIntentPlugin)?.provides.intent.dispatchPromise;
+          const attention = resolvePlugin(plugins, parseAttentionPlugin)?.provides.attention;
+
+          invariant(dispatch, 'Intent plugin is required for deck plugin.');
+          invariant(attention, 'Attention plugin is required for deck plugin.');
+
           // TODO(burdon): Root menu isn't visible so nothing bound.
           return createExtension({
             id: DECK_PLUGIN,
-            // NOTE(Zan): This is currently disabled.
-            // TODO(Zan): Fullscreen needs to know the active node and provide that to the layout part.
-            filter: (node): node is Node<null> => false,
-            actions: () => [
-              {
-                id: `${LayoutAction.SET_LAYOUT_MODE}/fullscreen`,
+            filter: (node): node is Node<null> => node.id === ROOT_ID,
+            actions: () => {
+              // NOTE(Zan): This is currently disabled.
+              // TODO(Zan): Fullscreen needs to know the active node and provide that to the layout part.
+              const _fullscreen = {
+                id: `${LayoutAction.SetLayoutMode._tag}/fullscreen`,
                 data: async () => {
-                  await intentPlugin?.provides.intent.dispatch({
-                    plugin: DECK_PLUGIN,
-                    action: LayoutAction.SET_LAYOUT_MODE,
-                    data: { layoutMode: 'fullscreen' },
-                  });
+                  await dispatch(createIntent(LayoutAction.SetLayoutMode, { layoutMode: 'fullscreen' }));
                 },
                 properties: {
                   label: ['toggle fullscreen label', { ns: DECK_PLUGIN }],
@@ -328,8 +315,56 @@ export const DeckPlugin = ({
                     windows: 'shift+ctrl+f',
                   },
                 },
-              },
-            ],
+              };
+
+              const closeCurrent = {
+                id: `${NavigationAction.Close._tag}/current`,
+                data: async () => {
+                  const attended = attention.attended.at(-1);
+                  if (attended) {
+                    await dispatch(createIntent(NavigationAction.Close, { activeParts: { main: [attended] } }));
+                  }
+                },
+                properties: {
+                  label: ['close current label', { ns: DECK_PLUGIN }],
+                  icon: 'ph--x--regular',
+                },
+              };
+
+              const closeOthers = {
+                id: `${NavigationAction.Close._tag}/others`,
+                data: async () => {
+                  const attended = attention.attended.at(-1);
+                  const ids = openIds(location.values.active, ['main']).filter((id) => id !== attended);
+                  await dispatch(
+                    createIntent(NavigationAction.Close, {
+                      activeParts: { main: ids },
+                    }),
+                  );
+                },
+                properties: {
+                  label: ['close others label', { ns: DECK_PLUGIN }],
+                  icon: 'ph--x-square--regular',
+                },
+              };
+
+              const closeAll = {
+                id: `${NavigationAction.Close._tag}/all`,
+                data: async () => {
+                  await dispatch(
+                    createIntent(NavigationAction.Close, {
+                      activeParts: { main: openIds(location.values.active, ['main']) },
+                    }),
+                  );
+                },
+                properties: {
+                  label: ['close all label', { ns: DECK_PLUGIN }],
+                  icon: 'ph--x-circle--regular',
+                },
+              };
+
+              return layout.values.layoutMode === 'deck' ? [closeCurrent, closeOthers, closeAll] : [];
+            },
           });
         },
       },
@@ -363,22 +398,43 @@ export const DeckPlugin = ({
         );
       },
       surface: {
-        component: ({ data, role }) => {
-          switch (role) {
-            case 'settings':
-              return data.plugin === meta.id ? <LayoutSettings settings={settings.values} /> : null;
-          }
-          return null;
-        },
+        definitions: () =>
+          createSurface({
+            id: DECK_PLUGIN,
+            role: 'settings',
+            filter: (data): data is any => data.subject === DECK_PLUGIN,
+            component: () => <LayoutSettings settings={settings.values} />,
+          }),
       },
       intent: {
-        resolver: (intent) => {
-          switch (intent.action) {
-            case LayoutAction.SET_LAYOUT: {
-              return intent.data && handleSetLayout(intent.data as LayoutAction.SetLayout);
-            }
-
-            case LayoutAction.SET_LAYOUT_MODE: {
+        resolvers: ({ plugins }) => {
+          const graph = resolvePlugin(plugins, parseGraphPlugin)?.provides.graph;
+
+          return [
+            createResolver(DeckAction.UpdatePlankSize, (data) => {
+              deck.values.plankSizing[data.id] = data.size;
+            }),
+            createResolver(IntentAction.ShowUndo, (data) => {
+              // TODO(wittjosiah): Support undoing further back than the last action.
+              if (currentUndoId) {
+                layout.values.toasts = layout.values.toasts.filter((toast) => toast.id !== currentUndoId);
+              }
+              currentUndoId = `${IntentAction.ShowUndo._tag}-${Date.now()}`;
+              layout.values.toasts = [
+                ...layout.values.toasts,
+                {
+                  id: currentUndoId,
+                  title: data.message ?? ['undo available label', { ns: DECK_PLUGIN }],
+                  duration: 10_000,
+                  actionLabel: ['undo action label', { ns: DECK_PLUGIN }],
+                  actionAlt: ['undo action alt', { ns: DECK_PLUGIN }],
+                  closeLabel: ['undo close label', { ns: DECK_PLUGIN }],
+                  onAction: () => intentPlugin?.provides.intent.undoPromise?.(),
+                },
+              ];
+            }),
+            createResolver(LayoutAction.SetLayout, handleSetLayout),
+            createResolver(LayoutAction.SetLayoutMode, (data) => {
               const setMode = (mode: LayoutMode) => {
                 const main = openIds(location.values.active, ['main']);
                 const solo = openIds(location.values.active, ['solo']);
@@ -394,72 +450,25 @@ export const DeckPlugin = ({
                 layout.values.layoutMode = mode;
               };
 
-              // TODO(wittjosiah): Update closed state.
               return batch(() => {
-                if (!intent.data) {
-                  return;
-                }
-
-                if (intent.data?.revert) {
-                  setMode(layoutModeHistory.values.pop() ?? 'solo');
-                  return { data: true };
-                }
-
-                if (isLayoutMode(intent?.data?.layoutMode)) {
+                if ('layoutMode' in data) {
                   layoutModeHistory.values.push(layout.values.layoutMode);
-                  setMode(intent.data.layoutMode);
+                  setMode(data.layoutMode);
+                } else if (data.revert) {
+                  setMode(layoutModeHistory.values.pop() ?? 'solo');
                 } else {
-                  log.warn('Invalid layout mode', intent?.data?.layoutMode);
+                  log.warn('Invalid layout mode', data);
                 }
-
-                return { data: true };
               });
-            }
-
-            case LayoutAction.SCROLL_INTO_VIEW: {
-              layout.values.scrollIntoView = intent.data?.id ?? undefined;
-              return { data: true };
-            }
-
-            case DeckAction.UPDATE_PLANK_SIZE: {
-              const { id, size } = intent.data as DeckAction.UpdatePlankSize;
-              deck.values.plankSizing[id] = size;
-              return { data: true };
-            }
-
-            case IntentAction.SHOW_UNDO: {
-              // TODO(wittjosiah): Support undoing further back than the last action.
-              if (currentUndoId) {
-                layout.values.toasts = layout.values.toasts.filter((toast) => toast.id !== currentUndoId);
-              }
-              currentUndoId = `${IntentAction.SHOW_UNDO}-${Date.now()}`;
-              const title =
-                // TODO(wittjosiah): How to handle chains better?
-                intent.data?.results?.[0]?.result?.undoable?.message ??
-                translations[0]['en-US']['dxos.org/plugin/deck']['undo available label'];
-              layout.values.toasts = [
-                ...layout.values.toasts,
-                {
-                  id: currentUndoId,
-                  title,
-                  duration: 10_000,
-                  actionLabel: translations[0]['en-US']['dxos.org/plugin/deck']['undo action label'],
-                  actionAlt: translations[0]['en-US']['dxos.org/plugin/deck']['undo action alt'],
-                  closeLabel: translations[0]['en-US']['dxos.org/plugin/deck']['undo close label'],
-                  onAction: () => intentPlugin?.provides.intent.undo?.(),
-                },
-              ];
-              return { data: true };
-            }
-
-            case NavigationAction.OPEN: {
+            }),
+            createResolver(LayoutAction.ScrollIntoView, ({ id }) => {
+              layout.values.scrollIntoView = id;
+            }),
+            // TODO(wittjosiah): Factor out navgiation from deck plugin.
+            createResolver(NavigationAction.Open, (data) => {
               const previouslyOpenIds = new Set<string>(openIds(location.values.active));
               const layoutMode = layout.values.layoutMode;
-              batch(() => {
-                if (!intent.data || !intent.data?.activeParts) {
-                  return;
-                }
-
+              const toAttend = batch(() => {
                 const processLayoutEntry = (partName: string, entryString: string, currentLayout: any) => {
                   // TODO(burdon): Option to toggle?
                   const toggle = false;
@@ -471,7 +480,7 @@ export const DeckPlugin = ({
                     layoutMode === 'deck' &&
                     effectivePart === 'main' &&
                     currentLayout[effectivePart]?.some((entry: LayoutEntry) => entry.id === id) &&
-                    !intent.data?.noToggle
+                    !data?.noToggle
                   ) {
                     // If we're in deck mode and the main part is already open, toggle it closed.
                     return closeEntry(currentLayout, { part: effectivePart as LayoutPart, entryId: id });
@@ -483,7 +492,7 @@ export const DeckPlugin = ({
                 };
 
                 let newLayout = location.values.active;
-                Object.entries(intent.data.activeParts).forEach(([partName, layoutEntries]) => {
+                Object.entries(data.activeParts).forEach(([partName, layoutEntries]) => {
                   if (Array.isArray(layoutEntries)) {
                     layoutEntries.forEach((activePartEntry: string) => {
                       newLayout = processLayoutEntry(partName, activePartEntry, newLayout);
@@ -494,53 +503,34 @@ export const DeckPlugin = ({
                   }
                 });
 
-                handleSetLocation(newLayout);
+                return handleSetLocation(newLayout);
               });
 
               const ids = openIds(location.values.active);
               const newlyOpen = ids.filter((i) => !previouslyOpenIds.has(i));
 
               return {
-                data: { ids },
+                data: { open: ids },
                 intents: [
-                  newlyOpen.length > 0
-                    ? [
-                        {
-                          action: LayoutAction.SCROLL_INTO_VIEW,
-                          data: { id: newlyOpen[0] },
-                        },
-                      ]
-                    : [],
-                  intent.data?.object
-                    ? [
-                        {
-                          action: NavigationAction.EXPOSE,
-                          data: { id: fullyQualifiedId(intent.data.object) },
-                        },
-                      ]
-                    : [],
-                  observability
+                  createIntent(LayoutAction.ScrollIntoView, { id: newlyOpen[0] ?? toAttend }),
+                  ...(toAttend ? [createIntent(NavigationAction.Expose, { id: toAttend })] : []),
+                  ...(observability
                     ? newlyOpen.map((id) => {
-                        const active = graphPlugin?.provides.graph.findNode(id)?.data;
+                        const active = graph?.findNode(id)?.data;
                         const typename = isReactiveObject(active) ? getTypename(active) : undefined;
-                        return {
-                          action: ObservabilityAction.SEND_EVENT,
-                          data: {
-                            name: 'navigation.activate',
-                            properties: {
-                              id,
-                              typename,
-                            },
+                        return createIntent(ObservabilityAction.SendEvent, {
+                          name: 'navigation.activate',
+                          properties: {
+                            id,
+                            typename,
                           },
-                        };
+                        });
                       })
-                    : [],
+                    : []),
                 ],
               };
-            }
-
-            case NavigationAction.ADD_TO_ACTIVE: {
-              const data = intent.data as NavigationAction.AddToActive;
+            }),
+            createResolver(NavigationAction.AddToActive, (data) => {
               const layoutEntry = { id: data.id };
               const effectivePart = getEffectivePart(data.part, layout.values.layoutMode);
 
@@ -553,103 +543,79 @@ export const DeckPlugin = ({
 
               const intents = [];
               if (data.scrollIntoView && layout.values.layoutMode === 'deck') {
-                intents.push([
-                  {
-                    action: LayoutAction.SCROLL_INTO_VIEW,
-                    data: { id: data.id },
-                  },
-                ]);
+                intents.push(createIntent(LayoutAction.ScrollIntoView, { id: data.id }));
               }
 
-              return { data: true, intents };
-            }
-
-            case NavigationAction.CLOSE: {
-              return batch(() => {
-                if (!intent.data) {
-                  return;
+              return { intents };
+            }),
+            createResolver(NavigationAction.Close, (data) => {
+              let newLayout = location.values.active;
+              const layoutMode = layout.values.layoutMode;
+              const intentParts = data.activeParts;
+              Object.keys(intentParts).forEach((partName: string) => {
+                const effectivePart = getEffectivePart(partName as LayoutPart, layoutMode);
+                const ids = intentParts[partName];
+                if (Array.isArray(ids)) {
+                  ids.forEach((id: string) => {
+                    newLayout = closeEntry(newLayout, { part: effectivePart, entryId: id });
+                  });
+                } else {
+                  // Legacy single string entry
+                  newLayout = closeEntry(newLayout, { part: effectivePart, entryId: ids });
                 }
-                let newLayout = location.values.active;
-                const layoutMode = layout.values.layoutMode;
-                const intentParts = intent.data.activeParts;
-                Object.keys(intentParts).forEach((partName: string) => {
-                  const effectivePart = getEffectivePart(partName as LayoutPart, layoutMode);
-                  const ids = intentParts[partName];
-                  if (Array.isArray(ids)) {
-                    ids.forEach((id: string) => {
-                      newLayout = closeEntry(newLayout, { part: effectivePart, entryId: id });
-                    });
-                  } else {
-                    // Legacy single string entry
-                    newLayout = closeEntry(newLayout, { part: effectivePart, entryId: ids });
-                  }
-                });
-
-                handleSetLocation(newLayout);
-                return { data: true };
               });
-            }
 
-            // TODO(wittjosiah): Factor out.
-            case NavigationAction.SET: {
+              const toAttend = handleSetLocation(newLayout);
+              return { intents: [createIntent(LayoutAction.ScrollIntoView, { id: toAttend })] };
+            }),
+            createResolver(NavigationAction.Set, (data) => {
               return batch(() => {
-                if (isLayoutParts(intent.data?.activeParts)) {
-                  handleSetLocation(intent.data!.activeParts);
-                }
-                return { data: true };
+                const toAttend = handleSetLocation(data.activeParts);
+                return { intents: [createIntent(LayoutAction.ScrollIntoView, { id: toAttend })] };
               });
-            }
-
-            case NavigationAction.ADJUST: {
+            }),
+            createResolver(NavigationAction.Adjust, (adjustment) => {
               return batch(() => {
-                if (isLayoutAdjustment(intent.data)) {
-                  const adjustment = intent.data;
-                  if (adjustment.type === 'increment-end' || adjustment.type === 'increment-start') {
-                    handleSetLocation(
-                      incrementPlank(location.values.active, {
-                        type: adjustment.type,
-                        layoutCoordinate: adjustment.layoutCoordinate,
-                      }),
-                    );
-                  }
+                if (adjustment.type === 'increment-end' || adjustment.type === 'increment-start') {
+                  handleSetLocation(
+                    incrementPlank(location.values.active, {
+                      type: adjustment.type,
+                      layoutCoordinate: adjustment.layoutCoordinate,
+                    }),
+                  );
+                }
 
-                  if (adjustment.type === 'solo') {
-                    const entryId = adjustment.layoutCoordinate.entryId;
-                    if (layout.values.layoutMode !== 'solo') {
-                      // Solo the entry.
-                      return {
-                        data: true,
-                        intents: [
-                          // NOTE: The order of these is important.
-                          [
-                            { action: NavigationAction.OPEN, data: { activeParts: { solo: [entryId] } } },
-                            { action: LayoutAction.SET_LAYOUT_MODE, data: { layoutMode: 'solo' } },
-                          ],
-                        ],
-                      };
-                    } else {
-                      // Un-solo the current entry.
-                      return {
-                        data: true,
-                        intents: [
-                          // NOTE: The order of these is important.
-                          [
-                            { action: LayoutAction.SET_LAYOUT_MODE, data: { layoutMode: 'deck' } },
-                            { action: NavigationAction.CLOSE, data: { activeParts: { solo: [entryId] } } },
-                            {
-                              action: NavigationAction.OPEN,
-                              data: { noToggle: true, activeParts: { main: [entryId] } },
-                            },
-                            { action: LayoutAction.SCROLL_INTO_VIEW, data: { id: entryId } },
-                          ],
-                        ],
-                      };
-                    }
+                if (adjustment.type === 'solo') {
+                  const entryId = adjustment.layoutCoordinate.entryId;
+                  if (layout.values.layoutMode !== 'solo') {
+                    // Solo the entry.
+                    return {
+                      intents: [
+                        // NOTE: The order of these is important.
+                        pipe(
+                          createIntent(NavigationAction.Open, { activeParts: { solo: [entryId] } }),
+                          chain(LayoutAction.SetLayoutMode, { layoutMode: 'solo' }),
+                        ),
+                      ],
+                    };
+                  } else {
+                    // Un-solo the current entry.
+                    return {
+                      intents: [
+                        // NOTE: The order of these is important.
+                        pipe(
+                          createIntent(LayoutAction.SetLayoutMode, { layoutMode: 'deck' }),
+                          chain(NavigationAction.Close, { activeParts: { solo: [entryId] } }),
+                          chain(NavigationAction.Open, { activeParts: { main: [entryId] }, noToggle: true }),
+                          chain(LayoutAction.ScrollIntoView, { id: entryId }),
+                        ),
+                      ],
+                    };
                   }
                 }
               });
-            }
-          }
+            }),
+          ];
         },
       },
     },