@dxos/plugin-deck 0.6.14-main.7bd9c89 → 0.6.14-staging.934c9de

package/src/components/DeckLayout/DeckLayout.tsx

@@ -3,11 +3,12 @@
 //
 
 import { Sidebar as MenuIcon } from '@phosphor-icons/react';
+import { untracked } from '@preact/signals-core';
 import React, { useCallback, useEffect, useMemo, useRef, type UIEvent } from 'react';
 
 import { type LayoutParts, Surface, type Toast as ToastSchema, firstIdInPart, usePlugin } from '@dxos/app-framework';
+import { type AttentionPluginProvides } from '@dxos/plugin-attention';
 import { Button, Dialog, Main, Popover, useOnTransition, useTranslation } from '@dxos/react-ui';
-import { useAttended } from '@dxos/react-ui-attention';
 import { Deck } from '@dxos/react-ui-deck';
 import { getSize, mainPaddingTransitions } from '@dxos/react-ui-theme';
 
@@ -60,7 +61,8 @@ export const DeckLayout = ({
   } = context;
   const { t } = useTranslation(DECK_PLUGIN);
   const { plankSizing } = useDeckContext();
-  const attended = useAttended();
+  // NOTE: Not `useAttended` so that the layout component is not re-rendered when the attended list changes.
+  const attentionPlugin = usePlugin<AttentionPluginProvides>('dxos.org/plugin/attention');
   const searchPlugin = usePlugin('dxos.org/plugin/search');
   const fullScreenSlug = useMemo(() => firstIdInPart(layoutParts, 'fullScreen'), [layoutParts]);
 
@@ -69,6 +71,7 @@ export const DeckLayout = ({
 
   // Ensure the first plank is attended when the deck is first rendered.
   useEffect(() => {
+    const attended = untracked(() => attentionPlugin?.provides.attention.attended ?? []);
     const firstId = layoutMode === 'solo' ? firstIdInPart(layoutParts, 'solo') : firstIdInPart(layoutParts, 'main');
     if (attended.length === 0 && firstId) {
       // TODO(wittjosiah): Focusing the type button is a workaround.
@@ -109,18 +112,6 @@ export const DeckLayout = ({
     [layoutMode],
   );
 
-  const firstAttendedId = attended[0];
-  useEffect(() => {
-    // TODO(burdon): Can we prevent the need to re-scroll since the planks are preserved?
-    //  E.g., hide the deck and just move the solo article?
-    if (layoutMode === 'deck' && firstAttendedId) {
-      // setTimeout(() => {
-      // const el = deckRef.current?.querySelector(`article[data-attendable-id="${firstAttendedId}"]`);
-      // el?.scrollIntoView({ behavior: 'smooth', inline: 'center' });
-      // }, 0);
-    }
-  }, [layoutMode, firstAttendedId]);
-
   const isEmpty = layoutParts.main?.length === 0 && layoutParts.solo?.length === 0;
 
   const padding = useMemo(() => {
@@ -147,8 +138,7 @@ export const DeckLayout = ({
         }
       }}
     >
-      {/* TODO(burdon): Factor out hook to set document title. */}
-      <ActiveNode id={firstAttendedId} />
+      <ActiveNode />
 
       <Main.Root
         navigationSidebarOpen={context.sidebarOpen}
@@ -178,8 +168,7 @@ export const DeckLayout = ({
         <Sidebar layoutParts={layoutParts} />
 
         {/* Right sidebar. */}
-        {/* TODO(wittjosiah): Get context from layout parts. */}
-        <ComplementarySidebar context='comments' layoutParts={layoutParts} flatDeck={flatDeck} />
+        <ComplementarySidebar panel={layoutParts.complementary?.[0].id} flatDeck={flatDeck} />
 
         {/* Dialog overlay to dismiss dialogs. */}
         <Main.Overlay />

package/src/components/DeckLayout/NodePlankHeading.tsx

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { Fragment, useEffect } from 'react';
+import React, { Fragment, memo, useEffect, useMemo } from 'react';
 
 import {
   LayoutAction,
@@ -10,10 +10,7 @@ import {
   SLUG_PATH_SEPARATOR,
   Surface,
   useIntentDispatcher,
-  indexInPart,
-  partLength,
-  type LayoutParts,
-  type LayoutPart,
+  type LayoutCoordinate,
 } from '@dxos/app-framework';
 import { type Node, useGraph } from '@dxos/plugin-graph';
 import { Icon, Popover, toLocalizedString, useMediaQuery, useTranslation } from '@dxos/react-ui';
@@ -22,137 +19,143 @@ import { TextTooltip } from '@dxos/react-ui-text-tooltip';
 
 import { DECK_PLUGIN } from '../../meta';
 
-export const NodePlankHeading = ({
-  node,
-  id,
-  layoutParts,
-  layoutPart,
-  popoverAnchorId,
-  pending,
-  flatDeck,
-  actions = [],
-}: {
+export type NodePlankHeadingProps = {
+  coordinate: LayoutCoordinate;
   node?: Node;
-  id?: string;
-  layoutParts?: LayoutParts;
-  layoutPart?: LayoutPart;
+  canIncrementStart?: boolean;
+  canIncrementEnd?: boolean;
   popoverAnchorId?: string;
   pending?: boolean;
   flatDeck?: boolean;
   actions?: PlankHeadingAction[];
-}) => {
-  const { t } = useTranslation(DECK_PLUGIN);
-  const { graph } = useGraph();
-  const icon = node?.properties?.icon ?? 'ph--placeholder--regular';
-  const label = pending
-    ? t('pending heading')
-    : toLocalizedString(node?.properties?.label ?? ['plank heading fallback label', { ns: DECK_PLUGIN }], t);
-  const dispatch = useIntentDispatcher();
-  const ActionRoot = node && popoverAnchorId === `dxos.org/ui/${DECK_PLUGIN}/${node.id}` ? Popover.Anchor : Fragment;
-  const [isNotMobile] = useMediaQuery('md');
-
-  useEffect(() => {
-    const frame = requestAnimationFrame(() => {
-      // Load actions for the node.
-      node && graph.actions(node);
-    });
+};
 
-    return () => cancelAnimationFrame(frame);
-  }, [node]);
+export const NodePlankHeading = memo(
+  ({
+    coordinate,
+    node,
+    canIncrementStart,
+    canIncrementEnd,
+    popoverAnchorId,
+    pending,
+    flatDeck,
+    actions = [],
+  }: NodePlankHeadingProps) => {
+    const { t } = useTranslation(DECK_PLUGIN);
+    const { graph } = useGraph();
+    const icon = node?.properties?.icon ?? 'ph--placeholder--regular';
+    const label = pending
+      ? t('pending heading')
+      : toLocalizedString(node?.properties?.label ?? ['plank heading fallback label', { ns: DECK_PLUGIN }], t);
+    const dispatch = useIntentDispatcher();
+    const ActionRoot = node && popoverAnchorId === `dxos.org/ui/${DECK_PLUGIN}/${node.id}` ? Popover.Anchor : Fragment;
+    const [isNotMobile] = useMediaQuery('md');
 
-  // NOTE(Zan): Node ids may now contain a path like `${space}:${id}~comments`
-  const attendableId = id?.split(SLUG_PATH_SEPARATOR).at(0);
+    useEffect(() => {
+      const frame = requestAnimationFrame(() => {
+        // Load actions for the node.
+        node && graph.actions(node);
+      });
 
-  const layoutCoordinate = layoutPart !== undefined && id !== undefined ? { part: layoutPart, entryId: id } : undefined;
-  const index = indexInPart(layoutParts, layoutCoordinate);
-  const length = partLength(layoutParts, layoutPart);
+      return () => cancelAnimationFrame(frame);
+    }, [node]);
 
-  const canIncrementStart =
-    layoutPart === 'main' && index !== undefined && index > 0 && length !== undefined && length > 1;
-  const canIncrementEnd = layoutPart === 'main' && index !== undefined && index < length - 1 && length !== undefined;
+    const layoutPart = coordinate.part;
+    // NOTE(Zan): Node ids may now contain a path like `${space}:${id}~comments`
+    const attendableId = coordinate.entryId.split(SLUG_PATH_SEPARATOR).at(0);
+    const capabilities = useMemo(
+      () => ({
+        solo: (layoutPart === 'solo' || layoutPart === 'main') && isNotMobile,
+        incrementStart: canIncrementStart,
+        incrementEnd: canIncrementEnd,
+      }),
+      [isNotMobile, layoutPart, canIncrementStart, canIncrementEnd],
+    );
 
-  return (
-    <PlankHeading.Root {...((layoutPart !== 'main' || !flatDeck) && { classNames: 'pie-1 border-b border-separator' })}>
-      <ActionRoot>
-        {node ? (
-          <PlankHeading.ActionsMenu
-            icon={icon}
-            related={layoutPart === 'complementary'}
+    return (
+      <PlankHeading.Root
+        {...((layoutPart !== 'main' || !flatDeck) && { classNames: 'pie-1 border-b border-separator' })}
+      >
+        <ActionRoot>
+          {node ? (
+            <PlankHeading.ActionsMenu
+              icon={icon}
+              related={layoutPart === 'complementary'}
+              attendableId={attendableId}
+              triggerLabel={t('actions menu label')}
+              actions={[actions, graph.actions(node)].filter((a) => a.length > 0)}
+              onAction={(action) =>
+                typeof action.data === 'function' && action.data?.({ node: action as Node, caller: DECK_PLUGIN })
+              }
+            >
+              <Surface role='menu-footer' data={{ object: node.data }} />
+            </PlankHeading.ActionsMenu>
+          ) : (
+            <PlankHeading.Button>
+              <span className='sr-only'>{label}</span>
+              <Icon icon={icon} size={5} />
+            </PlankHeading.Button>
+          )}
+        </ActionRoot>
+        <TextTooltip text={label} onlyWhenTruncating>
+          <PlankHeading.Label
             attendableId={attendableId}
-            triggerLabel={t('actions menu label')}
-            actions={[actions, graph.actions(node)].filter((a) => a.length > 0)}
-            onAction={(action) =>
-              typeof action.data === 'function' && action.data?.({ node: action as Node, caller: DECK_PLUGIN })
-            }
+            related={layoutPart === 'complementary'}
+            {...(pending && { classNames: 'text-description' })}
           >
-            <Surface role='menu-footer' data={{ object: node.data }} />
-          </PlankHeading.ActionsMenu>
-        ) : (
-          <PlankHeading.Button>
-            <span className='sr-only'>{label}</span>
-            <Icon icon={icon} size={5} />
-          </PlankHeading.Button>
+            {label}
+          </PlankHeading.Label>
+        </TextTooltip>
+        {node && layoutPart !== 'complementary' && (
+          // TODO(Zan): What are we doing with layout coordinate here?
+          <Surface role='navbar-end' direction='inline-reverse' data={{ object: node.data }} />
         )}
-      </ActionRoot>
-      <TextTooltip text={label} onlyWhenTruncating>
-        <PlankHeading.Label
-          attendableId={attendableId}
-          related={layoutPart === 'complementary'}
-          {...(pending && { classNames: 'text-description' })}
-        >
-          {label}
-        </PlankHeading.Label>
-      </TextTooltip>
-      {node && layoutPart !== 'complementary' && (
-        // TODO(Zan): What are we doing with layout coordinate here?
-        <Surface role='navbar-end' direction='inline-reverse' data={{ object: node.data }} />
-      )}
-      {/* NOTE(thure): Pinning & unpinning are temporarily disabled */}
-      <PlankHeading.Controls
-        capabilities={{
-          solo: (layoutPart === 'solo' || layoutPart === 'main') && isNotMobile,
-          incrementStart: canIncrementStart,
-          incrementEnd: canIncrementEnd,
-        }}
-        isSolo={layoutPart === 'solo'}
-        onClick={(eventType) => {
-          if (!layoutPart) {
-            return;
-          }
-
-          if (eventType === 'solo') {
-            return dispatch([
-              {
-                action: NavigationAction.ADJUST,
-                data: { type: eventType, layoutCoordinate: { part: 'main', entryId: id } },
-              },
-            ]);
-          }
+        {/* NOTE(thure): Pinning & unpinning are temporarily disabled */}
+        <PlankHeading.Controls
+          capabilities={capabilities}
+          isSolo={layoutPart === 'solo'}
+          onClick={(eventType) => {
+            if (!layoutPart) {
+              return;
+            }
 
-          // TODO(Zan): Update this to use the new layout actions.
-          return dispatch(
-            eventType === 'close'
-              ? layoutPart === 'complementary'
-                ? {
-                    action: LayoutAction.SET_LAYOUT,
-                    data: {
-                      element: 'complementary',
-                      state: false,
-                    },
-                  }
-                : {
-                    action: NavigationAction.CLOSE,
-                    data: {
-                      activeParts: {
-                        [layoutPart]: [id],
-                      },
+            // TODO(Zan): Update this to use the new layout actions.
+            if (eventType === 'solo') {
+              return dispatch([
+                {
+                  action: NavigationAction.ADJUST,
+                  data: { type: eventType, layoutCoordinate: { part: 'main', entryId: coordinate.entryId } },
+                },
+              ]);
+            } else if (eventType === 'close') {
+              if (layoutPart === 'complementary') {
+                return dispatch({
+                  action: LayoutAction.SET_LAYOUT,
+                  data: {
+                    element: 'complementary',
+                    state: false,
+                  },
+                });
+              } else {
+                return dispatch({
+                  action: NavigationAction.CLOSE,
+                  data: {
+                    activeParts: {
+                      [layoutPart]: [coordinate.entryId],
                     },
-                  }
-              : { action: NavigationAction.ADJUST, data: { type: eventType, layoutCoordinate } },
-          );
-        }}
-        close={layoutPart === 'complementary' ? 'minify-end' : true}
-      />
-    </PlankHeading.Root>
-  );
-};
+                  },
+                });
+              }
+            } else {
+              return dispatch({
+                action: NavigationAction.ADJUST,
+                data: { type: eventType, layoutCoordinate: coordinate },
+              });
+            }
+          }}
+          close={layoutPart === 'complementary' ? 'minify-end' : true}
+        />
+      </PlankHeading.Root>
+    );
+  },
+);

package/src/components/DeckLayout/Plank.tsx

@@ -3,7 +3,7 @@
 //
 
 import { Plus } from '@phosphor-icons/react';
-import React, { type KeyboardEvent, useCallback, useLayoutEffect, useRef } from 'react';
+import React, { type KeyboardEvent, memo, useCallback, useLayoutEffect, useMemo, useRef } from 'react';
 
 import {
   LayoutAction,
@@ -15,6 +15,8 @@ import {
   Surface,
   useIntentDispatcher,
   type Layout,
+  indexInPart,
+  partLength,
 } from '@dxos/app-framework';
 import { debounce } from '@dxos/async';
 import { useGraph } from '@dxos/plugin-graph';
@@ -42,7 +44,7 @@ export type PlankProps = {
   searchEnabled?: boolean;
 };
 
-export const Plank = ({ entry, layoutParts, part, flatDeck, searchEnabled, layoutMode }: PlankProps) => {
+export const Plank = memo(({ entry, layoutParts, part, flatDeck, searchEnabled, layoutMode }: PlankProps) => {
   const { t } = useTranslation(DECK_PLUGIN);
   const dispatch = useIntentDispatcher();
   const { popoverAnchorId, scrollIntoView } = useLayout();
@@ -53,7 +55,11 @@ export const Plank = ({ entry, layoutParts, part, flatDeck, searchEnabled, layou
   const resizeable = layoutMode === 'deck';
 
   const attendableAttrs = useAttendableAttributes(entry.id);
-  const coordinate: LayoutCoordinate = { part, entryId: entry.id };
+  const coordinate: LayoutCoordinate = useMemo(() => ({ part, entryId: entry.id }), [entry.id, part]);
+  const index = indexInPart(layoutParts, coordinate);
+  const length = partLength(layoutParts, part);
+  const canIncrementStart = part === 'main' && index !== undefined && index > 0 && length !== undefined && length > 1;
+  const canIncrementEnd = part === 'main' && index !== undefined && index < length - 1 && length !== undefined;
 
   const size = plankSizing?.[entry.id] as number | undefined;
   const setSize = useCallback(
@@ -82,6 +88,19 @@ export const Plank = ({ entry, layoutParts, part, flatDeck, searchEnabled, layou
 
   const sizeAttrs = useMainSize();
 
+  const data = useMemo(
+    () =>
+      node && {
+        ...(entry.path ? { subject: node.data, path: entry.path } : { object: node.data }),
+        coordinate,
+        popoverAnchorId,
+      },
+    [node],
+  );
+
+  // TODO(wittjosiah): Change prop to accept a component.
+  const placeholder = useMemo(() => <PlankLoading />, []);
+
   return (
     <NaturalPlank.Root
       size={size}
@@ -100,27 +119,17 @@ export const Plank = ({ entry, layoutParts, part, flatDeck, searchEnabled, layou
         {node ? (
           <>
             <NodePlankHeading
-              id={entry.id}
+              coordinate={coordinate}
               node={node}
-              layoutPart={coordinate.part}
-              layoutParts={layoutParts}
+              canIncrementStart={canIncrementStart}
+              canIncrementEnd={canIncrementEnd}
               popoverAnchorId={popoverAnchorId}
               flatDeck={flatDeck}
             />
-            <Surface
-              role='article'
-              data={{
-                ...(entry.path ? { subject: node.data, path: entry.path } : { object: node.data }),
-                coordinate,
-                popoverAnchorId,
-              }}
-              limit={1}
-              fallback={PlankContentError}
-              placeholder={<PlankLoading />}
-            />
+            <Surface role='article' data={data} limit={1} fallback={PlankContentError} placeholder={placeholder} />
           </>
         ) : (
-          <PlankError layoutCoordinate={coordinate} id={entry.id} flatDeck={flatDeck} />
+          <PlankError layoutCoordinate={coordinate} flatDeck={flatDeck} />
         )}
       </NaturalPlank.Content>
       {searchEnabled && resizeable ? (
@@ -166,4 +175,4 @@ export const Plank = ({ entry, layoutParts, part, flatDeck, searchEnabled, layou
       ) : null}
     </NaturalPlank.Root>
   );
-};
+});

package/src/components/DeckLayout/PlankError.tsx

@@ -34,13 +34,11 @@ export const PlankContentError = ({ error }: { error?: Error }) => {
 
 export const PlankError = ({
   layoutCoordinate,
-  id,
   node,
   error,
   flatDeck,
 }: {
   layoutCoordinate: LayoutCoordinate;
-  id: string;
   node?: Node;
   error?: Error;
   flatDeck?: boolean;
@@ -51,13 +49,7 @@ export const PlankError = ({
   }, []);
   return (
     <>
-      <NodePlankHeading
-        node={node}
-        id={id}
-        layoutPart={layoutCoordinate.part}
-        pending={!timedOut}
-        flatDeck={flatDeck}
-      />
+      <NodePlankHeading coordinate={layoutCoordinate} node={node} pending={!timedOut} flatDeck={flatDeck} />
       {timedOut ? <PlankContentError error={error} /> : <PlankLoading />}
     </>
   );

package/src/components/DeckLayout/Sidebar.tsx

@@ -6,7 +6,6 @@ import React, { useMemo } from 'react';
 
 import { type LayoutParts, openIds, Surface } from '@dxos/app-framework';
 import { Main } from '@dxos/react-ui';
-import { useAttended } from '@dxos/react-ui-attention';
 
 import { useLayout } from '../LayoutContext';
 
@@ -16,25 +15,24 @@ export type SidebarProps = {
 
 export const Sidebar = ({ layoutParts }: SidebarProps) => {
   const { layoutMode, popoverAnchorId } = useLayout();
-  const attended = useAttended();
 
+  // TODO(wittjosiah): The activeIds should be path-based to avoid conflicts.
   const activeIds = useMemo(() => {
     if (layoutMode === 'solo') {
-      return new Set<string>(layoutParts?.solo?.map((e) => e.id) ?? []);
+      return Array.from(new Set<string>(layoutParts?.solo?.map((e) => e.id) ?? []));
     } else if (layoutMode === 'deck') {
-      return new Set<string>(layoutParts?.main?.map((e) => e.id) ?? []);
+      return Array.from(new Set<string>(layoutParts?.main?.map((e) => e.id) ?? []));
     }
 
-    return new Set<string>(openIds(layoutParts));
+    return Array.from(new Set<string>(openIds(layoutParts)));
   }, [layoutParts, layoutMode]);
 
   const navigationData = useMemo(
     () => ({
       popoverAnchorId,
       activeIds,
-      attended,
     }),
-    [popoverAnchorId, activeIds, attended],
+    [popoverAnchorId, activeIds],
   );
   return (
     <Main.NavigationSidebar>

package/src/components/LayoutSettings.tsx

@@ -4,8 +4,8 @@
 
 import React from 'react';
 
-import { SettingsValue } from '@dxos/plugin-settings';
 import { Input, Select, useTranslation } from '@dxos/react-ui';
+import { FormInput } from '@dxos/react-ui-data';
 
 import { DECK_PLUGIN } from '../meta';
 import {
@@ -23,7 +23,7 @@ export const LayoutSettings = ({ settings }: { settings: DeckSettingsProps }) =>
 
   return (
     <>
-      <SettingsValue label={t('select new plank positioning label')}>
+      <FormInput label={t('select new plank positioning label')}>
         <Select.Root
           value={settings.newPlankPositioning ?? 'start'}
           onValueChange={(value) => (settings.newPlankPositioning = value as NewPlankPositioning)}
@@ -41,8 +41,8 @@ export const LayoutSettings = ({ settings }: { settings: DeckSettingsProps }) =>
             </Select.Content>
           </Select.Portal>
         </Select.Root>
-      </SettingsValue>
-      <SettingsValue label={t('settings overscroll label')}>
+      </FormInput>
+      <FormInput label={t('settings overscroll label')}>
         <Select.Root
           value={settings.overscroll ?? 'none'}
           onValueChange={(value) => (settings.overscroll = value as Overscroll)}
@@ -60,24 +60,24 @@ export const LayoutSettings = ({ settings }: { settings: DeckSettingsProps }) =>
             </Select.Content>
           </Select.Portal>
         </Select.Root>
-      </SettingsValue>
-      <SettingsValue label={t('settings show hints label')}>
+      </FormInput>
+      <FormInput label={t('settings show hints label')}>
         <Input.Switch checked={settings.showHints} onCheckedChange={(checked) => (settings.showHints = checked)} />
-      </SettingsValue>
+      </FormInput>
       {!isSocket && (
-        <SettingsValue label={t('settings native redirect label')}>
+        <FormInput label={t('settings native redirect label')}>
           <Input.Switch
             checked={settings.enableNativeRedirect}
             onCheckedChange={(checked) => (settings.enableNativeRedirect = checked)}
           />
-        </SettingsValue>
+        </FormInput>
       )}
-      <SettingsValue label={t('settings custom slots')}>
+      <FormInput label={t('settings custom slots')}>
         <Input.Switch checked={settings.customSlots} onCheckedChange={(checked) => (settings.customSlots = checked)} />
-      </SettingsValue>
-      <SettingsValue label={t('settings flat deck')}>
+      </FormInput>
+      <FormInput label={t('settings flat deck')}>
         <Input.Switch checked={settings.flatDeck} onCheckedChange={(checked) => (settings.flatDeck = checked)} />
-      </SettingsValue>
+      </FormInput>
     </>
   );
 };