@dxos/plugin-deck 0.6.13-main.ed424a1 → 0.6.13

package/src/DeckPlugin.tsx

@@ -2,7 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
-import { batch } from '@preact/signals-core';
+import { ArrowsOut, type IconProps } from '@phosphor-icons/react';
+import { batch, effect } from '@preact/signals-core';
 import { setAutoFreeze } from 'immer';
 import React, { type PropsWithChildren } from 'react';
 
@@ -32,7 +33,6 @@ import {
 } from '@dxos/app-framework';
 import { type UnsubscribeCallback } from '@dxos/async';
 import { create, getTypename, isReactiveObject } from '@dxos/echo-schema';
-import { scheduledEffect } from '@dxos/echo-signals/core';
 import { LocalStorageStore } from '@dxos/local-storage';
 import { log } from '@dxos/log';
 import { parseAttentionPlugin, type AttentionPluginProvides } from '@dxos/plugin-attention';
@@ -41,6 +41,7 @@ import { createExtension, type Node } from '@dxos/plugin-graph';
 import { ObservabilityAction } from '@dxos/plugin-observability/meta';
 import { fullyQualifiedId } from '@dxos/react-client/echo';
 import { translations as deckTranslations } from '@dxos/react-ui-deck';
+import { Mosaic } from '@dxos/react-ui-mosaic';
 
 import {
   DeckLayout,
@@ -70,7 +71,7 @@ const isSocket = !!(globalThis as any).__args;
 // TODO(mjamesderocher): Can we get this directly from Socket?
 const appScheme = 'composer://';
 
-// TODO(burdon): Evolve into customizable prefs.
+// TODO(burdon): Evolve into customizable prefs,.
 const customSlots: DeckLayoutProps['slots'] = {
   wallpaper: {
     classNames:
@@ -111,7 +112,7 @@ export const DeckPlugin = ({
   let handleNavigation: () => Promise<void> | undefined;
 
   const settings = new LocalStorageStore<DeckSettingsProps>('dxos.org/settings/layout', {
-    showHints: true,
+    showFooter: false,
     customSlots: false,
     flatDeck: false,
     enableNativeRedirect: false,
@@ -189,28 +190,6 @@ export const DeckPlugin = ({
     }
   };
 
-  /**
-   * Update the active state and ensure that attention is on an active element.
-   */
-  const handleSetLocation = (next: LayoutParts) => {
-    if (attentionPlugin) {
-      const attended = attentionPlugin.provides.attention.attended;
-      const [attendedId] = Array.from(attended);
-      const ids = (layout.values.layoutMode === 'deck' ? next.main : next.solo)?.map(({ id }) => id) ?? [];
-      const isAttendedAvailable = !!attendedId && ids.includes(attendedId);
-      if (!isAttendedAvailable) {
-        // Allow new plank to render before focusing.
-        requestAnimationFrame(() => {
-          const nextAttended = layout.values.layoutMode === 'solo' ? next.solo?.[0].id : next.main?.[0]?.id;
-          const article = document.querySelector<HTMLElement>(`article[data-attendable-id="${nextAttended}"]`);
-          article?.focus();
-        });
-      }
-    }
-
-    location.values.active = next;
-  };
-
   return {
     meta,
     ready: async (plugins) => {
@@ -219,21 +198,16 @@ export const DeckPlugin = ({
       attentionPlugin = resolvePlugin(plugins, parseAttentionPlugin);
       clientPlugin = resolvePlugin(plugins, parseClientPlugin);
 
+      // prettier-ignore
       layout
         .prop({ key: 'layoutMode', storageKey: 'layout-mode', type: LocalStorageStore.enum<LayoutMode>() })
         .prop({ key: 'sidebarOpen', storageKey: 'sidebar-open', type: LocalStorageStore.bool() })
-        .prop({
-          key: 'complementarySidebarOpen',
-          storageKey: 'complementary-sidebar-open',
-          type: LocalStorageStore.bool(),
-        });
-
-      deck.prop({
-        key: 'plankSizing',
-        storageKey: 'plank-sizing',
-        type: LocalStorageStore.json<Record<string, number>>(),
-      });
+        .prop({ key: 'complementarySidebarOpen', storageKey: 'complementary-sidebar-open', type: LocalStorageStore.bool() });
 
+      // prettier-ignore
+      deck.prop({ key: 'plankSizing', storageKey: 'plank-sizing', type: LocalStorageStore.json<Record<string, number>>() });
+
+      // prettier-ignore
       location
         .prop({ key: 'active', storageKey: 'active', type: LocalStorageStore.json<LayoutParts>() })
         .prop({ key: 'closed', storageKey: 'closed', type: LocalStorageStore.json<string[]>() });
@@ -246,17 +220,14 @@ export const DeckPlugin = ({
         }),
       );
 
+      // prettier-ignore
       settings
-        .prop({ key: 'showHints', storageKey: 'show-hints', type: LocalStorageStore.bool() })
+        .prop({ key: 'showFooter', storageKey: 'show-footer', type: LocalStorageStore.bool() })
         .prop({ key: 'customSlots', storageKey: 'customSlots', type: LocalStorageStore.bool() })
         .prop({ key: 'flatDeck', storageKey: 'flatDeck', type: LocalStorageStore.bool() })
         .prop({ key: 'enableNativeRedirect', storageKey: 'enable-native-redirect', type: LocalStorageStore.bool() })
         .prop({ key: 'disableDeck', storageKey: 'disable-deck', type: LocalStorageStore.bool() }) // Deprecated.
-        .prop({
-          key: 'newPlankPositioning',
-          storageKey: 'newPlankPositioning',
-          type: LocalStorageStore.enum<NewPlankPositioning>(),
-        })
+        .prop({ key: 'newPlankPositioning', storageKey: 'newPlankPositioning', type: LocalStorageStore.enum<NewPlankPositioning>() })
         .prop({ key: 'overscroll', storageKey: 'overscroll', type: LocalStorageStore.enum<Overscroll>() });
 
       if (!isSocket && settings.values.enableNativeRedirect) {
@@ -266,7 +237,7 @@ export const DeckPlugin = ({
       handleNavigation = async () => {
         const pathname = window.location.pathname;
         if (pathname === '/reset') {
-          handleSetLocation({ sidebar: [{ id: NAV_ID }] });
+          location.values.active = { sidebar: [{ id: NAV_ID }] };
           location.values.closed = [];
           layout.values.layoutMode = 'solo';
           window.location.pathname = '/';
@@ -279,7 +250,7 @@ export const DeckPlugin = ({
         }
 
         const startingLayout = removePart(location.values.active, 'solo');
-        handleSetLocation(mergeLayoutParts(layoutFromUri, startingLayout));
+        location.values.active = mergeLayoutParts(layoutFromUri, startingLayout);
         layout.values.layoutMode = 'solo';
       };
 
@@ -287,13 +258,23 @@ export const DeckPlugin = ({
       window.addEventListener('popstate', handleNavigation);
 
       unsubscriptionCallbacks.push(
-        scheduledEffect(
-          () => ({ selectedPath: soloPartToUri(location.values.active) }),
-          ({ selectedPath }) => {
-            // TODO(thure): In some browsers, this only preserves the most recent state change, even though this is not `history.replace`…
-            history.pushState(null, '', `/${selectedPath}${window.location.search}`);
-          },
-        ),
+        effect(() => {
+          const selectedPath = soloPartToUri(location.values.active);
+          // TODO(thure): In some browsers, this only preserves the most recent state change, even though this is not `history.replace`…
+          history.pushState(null, '', `/${selectedPath}${window.location.search}`);
+        }),
+      );
+
+      unsubscriptionCallbacks.push(
+        effect(() => {
+          const soloId = location.values.active.solo?.[0].id;
+          if (layout.values.layoutMode === 'solo' && soloId && layout.values.scrollIntoView !== soloId) {
+            void intentPlugin?.provides.intent.dispatch({
+              action: LayoutAction.SCROLL_INTO_VIEW,
+              data: { id: soloId },
+            });
+          }
+        }),
       );
 
       layoutModeHistory.values.push(`${layout.values.layoutMode}`);
@@ -329,7 +310,8 @@ export const DeckPlugin = ({
                 },
                 properties: {
                   label: ['toggle fullscreen label', { ns: DECK_PLUGIN }],
-                  icon: 'ph--arrows-out--regular',
+                  icon: (props: IconProps) => <ArrowsOut {...props} />,
+                  iconSymbol: 'ph--arrows-out--regular',
                   keyBinding: {
                     macos: 'ctrl+meta+f',
                     windows: 'shift+ctrl+f',
@@ -347,27 +329,31 @@ export const DeckPlugin = ({
       ),
       root: () => {
         return (
-          <DeckLayout
-            layoutParts={location.values.active}
-            showHints={settings.values.showHints}
-            overscroll={settings.values.overscroll}
-            flatDeck={settings.values.flatDeck}
-            slots={settings.values.customSlots ? customSlots : undefined}
-            toasts={layout.values.toasts}
-            onDismissToast={(id) => {
-              const index = layout.values.toasts.findIndex((toast) => toast.id === id);
-              if (index !== -1) {
-                // Allow time for the toast to animate out.
-                // TODO(burdon): Factor out and unregister timeout.
-                setTimeout(() => {
-                  if (layout.values.toasts[index].id === currentUndoId) {
-                    currentUndoId = undefined;
-                  }
-                  layout.values.toasts.splice(index, 1);
-                }, 1_000);
-              }
-            }}
-          />
+          <Mosaic.Root>
+            <DeckLayout
+              attention={attentionPlugin?.provides.attention ?? { attended: new Set() }}
+              layoutParts={location.values.active}
+              showHintsFooter={settings.values.showFooter}
+              overscroll={settings.values.overscroll}
+              flatDeck={settings.values.flatDeck}
+              slots={settings.values.customSlots ? customSlots : undefined}
+              toasts={layout.values.toasts}
+              onDismissToast={(id) => {
+                const index = layout.values.toasts.findIndex((toast) => toast.id === id);
+                if (index !== -1) {
+                  // Allow time for the toast to animate out.
+                  // TODO(burdon): Factor out and unregister timeout.
+                  setTimeout(() => {
+                    if (layout.values.toasts[index].id === currentUndoId) {
+                      currentUndoId = undefined;
+                    }
+                    layout.values.toasts.splice(index, 1);
+                  }, 1_000);
+                }
+              }}
+            />
+            <Mosaic.DragOverlay />
+          </Mosaic.Root>
         );
       },
       surface: {
@@ -486,7 +472,7 @@ export const DeckPlugin = ({
                   }
                 });
 
-                handleSetLocation(newLayout);
+                location.values.active = newLayout;
               });
 
               const ids = openIds(location.values.active);
@@ -536,12 +522,10 @@ export const DeckPlugin = ({
               const layoutEntry = { id: data.id };
               const effectivePart = getEffectivePart(data.part, layout.values.layoutMode);
 
-              handleSetLocation(
-                openEntry(location.values.active, effectivePart, layoutEntry, {
-                  positioning: data.positioning ?? settings.values.newPlankPositioning,
-                  pivotId: data.pivotId,
-                }),
-              );
+              location.values.active = openEntry(location.values.active, effectivePart, layoutEntry, {
+                positioning: data.positioning ?? settings.values.newPlankPositioning,
+                pivotId: data.pivotId,
+              });
 
               const intents = [];
               if (data.scrollIntoView && layout.values.layoutMode === 'deck') {
@@ -577,11 +561,7 @@ export const DeckPlugin = ({
                   }
                 });
 
-                handleSetLocation(newLayout);
-                // TODO(wittjosiah): This needs to also set the closed state.
-                //   The closed state should be the existing closed state plus the newly closed ids.
-                //   The closed state should also be updated when opening entries to remove the id from closed.
-                //   When SET is called the closed ids should also be calculated and set.
+                location.values.active = newLayout;
                 return { data: true };
               });
             }
@@ -590,7 +570,7 @@ export const DeckPlugin = ({
             case NavigationAction.SET: {
               return batch(() => {
                 if (isLayoutParts(intent.data?.activeParts)) {
-                  handleSetLocation(intent.data!.activeParts);
+                  location.values.active = intent.data!.activeParts;
                 }
                 return { data: true };
               });
@@ -601,12 +581,10 @@ export const DeckPlugin = ({
                 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,
-                      }),
-                    );
+                    location.values.active = incrementPlank(location.values.active, {
+                      type: adjustment.type,
+                      layoutCoordinate: adjustment.layoutCoordinate,
+                    });
                   }
 
                   if (adjustment.type === 'solo') {

package/src/components/DeckLayout/ComplementarySidebar.tsx

@@ -2,18 +2,12 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useMemo } from 'react';
+import React from 'react';
 
-import {
-  type LayoutParts,
-  NavigationAction,
-  SLUG_PATH_SEPARATOR,
-  Surface,
-  useIntentDispatcher,
-} from '@dxos/app-framework';
+import { type LayoutParts, SLUG_PATH_SEPARATOR, Surface } from '@dxos/app-framework';
 import { useGraph } from '@dxos/plugin-graph';
 import { Main } from '@dxos/react-ui';
-import { useAttended } from '@dxos/react-ui-attention';
+import { createAttendableAttributes } from '@dxos/react-ui-attention';
 import { deckGrid } from '@dxos/react-ui-deck';
 import { mx } from '@dxos/react-ui-theme';
 
@@ -21,83 +15,44 @@ import { NodePlankHeading } from './NodePlankHeading';
 import { PlankContentError } from './PlankError';
 import { PlankLoading } from './PlankLoading';
 import { useNode, useNodeActionExpander } from '../../hooks';
-import { DECK_PLUGIN } from '../../meta';
 import { useLayout } from '../LayoutContext';
 
 export type ComplementarySidebarProps = {
-  context?: string;
+  id?: string;
   layoutParts: LayoutParts;
   flatDeck?: boolean;
 };
 
-const panels = ['comments', 'settings', 'debug'] as const;
-
-const nodes = [
-  { id: 'comments', icon: 'ph--chat-text--regular' },
-  { id: 'settings', icon: 'ph--gear--regular' },
-  { id: 'debug', icon: 'ph--bug--regular' },
-];
-
-type Panel = (typeof panels)[number];
-const getPanel = (part?: string): Panel => {
-  if (part && panels.findIndex((panel) => panel === part) !== -1) {
-    return part as Panel;
-  } else {
-    return 'settings';
-  }
-};
-
-export const ComplementarySidebar = ({ layoutParts, flatDeck }: ComplementarySidebarProps) => {
+export const ComplementarySidebar = ({ id, layoutParts, flatDeck }: ComplementarySidebarProps) => {
   const { popoverAnchorId } = useLayout();
-  const attended = useAttended();
-  const part = getPanel(layoutParts.complementary?.[0].id);
-  const id = attended[0] ? `${attended[0]}${SLUG_PATH_SEPARATOR}${part}` : undefined;
   const { graph } = useGraph();
   const node = useNode(graph, id);
-  const dispatch = useIntentDispatcher();
-  useNodeActionExpander(node);
+  // const complementaryAvailable = useMemo(() => id === NAV_ID || !!node, [id, node]);
+  const complementaryAttrs = createAttendableAttributes(id?.split(SLUG_PATH_SEPARATOR)[0] ?? 'never');
 
-  const actions = useMemo(
-    () =>
-      nodes.map(({ id, icon }) => ({
-        id: `complementary-${id}`,
-        data: () => {
-          void dispatch({ action: NavigationAction.OPEN, data: { activeParts: { complementary: id } } });
-        },
-        properties: {
-          label: [`${id} label`, { ns: DECK_PLUGIN }],
-          icon,
-          menuItemType: 'toggle',
-          isChecked: part === id,
-        },
-      })),
-    [part],
-  );
+  useNodeActionExpander(node);
 
   return (
-    <Main.ComplementarySidebar>
-      <div role='none' className={mx(deckGrid, 'grid-cols-1 bs-full')}>
-        <NodePlankHeading
-          node={node}
-          id={id}
-          layoutParts={layoutParts}
-          layoutPart='complementary'
-          popoverAnchorId={popoverAnchorId}
-          flatDeck={flatDeck}
-          actions={actions}
-        />
-        {/* TODO(wittjosiah): Render some placeholder when node is undefined. */}
-        <div className='row-span-2'>
-          {node && (
-            <Surface
-              role={`complementary--${part}`}
-              data={{ subject: node.properties.object, popoverAnchorId }}
-              fallback={PlankContentError}
-              placeholder={<PlankLoading />}
-            />
-          )}
+    <Main.ComplementarySidebar {...complementaryAttrs}>
+      {node ? (
+        <div role='none' className={mx(deckGrid, 'grid-cols-1 bs-full')}>
+          <NodePlankHeading
+            node={node}
+            id={id}
+            layoutParts={layoutParts}
+            layoutPart='complementary'
+            popoverAnchorId={popoverAnchorId}
+            flatDeck={flatDeck}
+          />
+          <Surface
+            role='article'
+            data={{ subject: node.data, part: 'complementary', popoverAnchorId }}
+            limit={1}
+            fallback={PlankContentError}
+            placeholder={<PlankLoading />}
+          />
         </div>
-      </div>
+      ) : null}
     </Main.ComplementarySidebar>
   );
 };