@dxos/plugin-deck 0.6.12-main.5cc132e → 0.6.12-main.78ddbdf

package/src/components/DeckLayout/ComplementarySidebar.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 import { type LayoutParts, SLUG_PATH_SEPARATOR, Surface } from '@dxos/app-framework';
 import { useGraph } from '@dxos/plugin-graph';
 import { Main } from '@dxos/react-ui';
-import { createAttendableAttributes } from '@dxos/react-ui-attention';
+import { createAttendableAttributes, useAttendedIds } from '@dxos/react-ui-attention';
 import { deckGrid } from '@dxos/react-ui-deck';
 import { mx } from '@dxos/react-ui-theme';
 
@@ -18,32 +18,34 @@ import { useNode, useNodeActionExpander } from '../../hooks';
 import { useLayout } from '../LayoutContext';
 
 export type ComplementarySidebarProps = {
-  id?: string;
+  context?: string;
   layoutParts: LayoutParts;
   flatDeck?: boolean;
 };
 
-export const ComplementarySidebar = ({ id, layoutParts, flatDeck }: ComplementarySidebarProps) => {
+export const ComplementarySidebar = ({ context, layoutParts, flatDeck }: ComplementarySidebarProps) => {
   const { popoverAnchorId } = useLayout();
+  const attended = useAttendedIds();
+  const id = attended[0] ? `${attended[0]}${SLUG_PATH_SEPARATOR}${context}` : undefined;
   const { graph } = useGraph();
   const node = useNode(graph, id);
-  // const complementaryAvailable = useMemo(() => id === NAV_ID || !!node, [id, node]);
   const complementaryAttrs = createAttendableAttributes(id?.split(SLUG_PATH_SEPARATOR)[0] ?? 'never');
 
   useNodeActionExpander(node);
 
   return (
     <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}
-          />
+      <div role='none' className={mx(deckGrid, 'grid-cols-1 bs-full')}>
+        <NodePlankHeading
+          node={node}
+          id={id}
+          layoutParts={layoutParts}
+          layoutPart='complementary'
+          popoverAnchorId={popoverAnchorId}
+          flatDeck={flatDeck}
+        />
+        {/* TODO(wittjosiah): Render some placeholder when node is undefined. */}
+        {node && (
           <Surface
             role='article'
             data={{ subject: node.data, part: 'complementary', popoverAnchorId }}
@@ -51,8 +53,8 @@ export const ComplementarySidebar = ({ id, layoutParts, flatDeck }: Complementar
             fallback={PlankContentError}
             placeholder={<PlankLoading />}
           />
-        </div>
-      ) : null}
+        )}
+      </div>
     </Main.ComplementarySidebar>
   );
 };

package/src/components/DeckLayout/DeckLayout.tsx

@@ -3,10 +3,9 @@
 //
 
 import { Sidebar as MenuIcon } from '@phosphor-icons/react';
-import React, { useCallback, useEffect, useMemo, useRef, useState, useLayoutEffect, type UIEvent } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, type UIEvent } from 'react';
 
 import {
-  SLUG_PATH_SEPARATOR,
   type Attention,
   type LayoutEntry,
   type LayoutParts,
@@ -15,7 +14,7 @@ import {
   firstIdInPart,
   usePlugin,
 } from '@dxos/app-framework';
-import { Button, Dialog, Main, Popover, useTranslation } from '@dxos/react-ui';
+import { Button, Dialog, Main, Popover, useOnTransition, useTranslation } from '@dxos/react-ui';
 import { Deck } from '@dxos/react-ui-deck';
 import { getSize } from '@dxos/react-ui-theme';
 
@@ -73,33 +72,38 @@ export const DeckLayout = ({
   const searchPlugin = usePlugin('dxos.org/plugin/search');
   const fullScreenSlug = useMemo(() => firstIdInPart(layoutParts, 'fullScreen'), [layoutParts]);
 
-  const [scrollLeft, setScrollLeft] = useState<number | null>(null);
-  const deckRef = useRef<HTMLDivElement | null>(null);
-  const restoreScrollRef = useRef<boolean>(false);
+  const scrollLeftRef = useRef<number | null>();
+  const deckRef = useRef<HTMLDivElement>(null);
+
+  // Ensure the first plank is attended when the deck is first rendered.
+  useEffect(() => {
+    const firstId = layoutMode === 'solo' ? firstIdInPart(layoutParts, 'solo') : firstIdInPart(layoutParts, 'main');
+    if (attention.attended.size === 0 && firstId) {
+      // TODO(wittjosiah): Focusing the type button is a workaround.
+      //   If the plank is directly focused on first load the focus ring appears.
+      document.querySelector<HTMLElement>(`article[data-attendable-id="${firstId}"] button`)?.focus();
+    }
+  }, []);
 
   /**
    * Clear scroll restoration state if the window is resized
    */
   const handleResize = useCallback(() => {
-    setScrollLeft(null);
+    scrollLeftRef.current = null;
   }, []);
+
   useEffect(() => {
     window.addEventListener('resize', handleResize);
     return () => window.removeEventListener('resize', handleResize);
   }, [handleResize]);
 
-  /**
-   * Restore scroll when returning to deck mode
-   */
-  useLayoutEffect(() => {
-    if (layoutMode !== 'deck') {
-      restoreScrollRef.current = true;
-    } else if (restoreScrollRef.current && deckRef.current && scrollLeft) {
-      // console.log('[restoring scrollLeft]', scrollLeft);
-      deckRef.current.scrollLeft = scrollLeft;
-      restoreScrollRef.current = false;
+  const restoreScroll = useCallback(() => {
+    if (deckRef.current && scrollLeftRef.current != null) {
+      deckRef.current.scrollLeft = scrollLeftRef.current;
     }
-  }, [layoutMode, deckRef.current, scrollLeft]);
+  }, []);
+
+  useOnTransition(layoutMode, (mode) => mode !== 'deck', 'deck', restoreScroll);
 
   /**
    * Save scroll position as the user scrolls
@@ -107,20 +111,12 @@ export const DeckLayout = ({
   const handleScroll = useCallback(
     (event: UIEvent) => {
       if (layoutMode === 'deck' && event.currentTarget === event.target) {
-        // console.log('[save scroll left]', (event.target as HTMLDivElement).scrollLeft);
-        setScrollLeft((event.target as HTMLDivElement).scrollLeft);
+        scrollLeftRef.current = (event.target as HTMLDivElement).scrollLeft;
       }
     },
     [layoutMode],
   );
 
-  const complementarySlug = useMemo(() => {
-    const entry = layoutParts.complementary?.at(0);
-    if (entry) {
-      return entry.path ? `${entry.id}${SLUG_PATH_SEPARATOR}${entry.path}` : entry.id;
-    }
-  }, [layoutParts]);
-
   const firstAttendedId = useMemo(() => Array.from(attention.attended ?? [])[0], [attention.attended]);
 
   useEffect(() => {
@@ -145,10 +141,12 @@ export const DeckLayout = ({
     return parts;
   }, [layoutParts.main, layoutParts.solo]);
 
-  const padding =
-    layoutMode === 'deck' && overscroll === 'centering'
-      ? calculateOverscroll(layoutParts.main, plankSizing, sidebarOpen, complementarySidebarOpen)
-      : {};
+  const padding = useMemo(() => {
+    if (layoutMode === 'deck' && overscroll === 'centering') {
+      return calculateOverscroll(layoutParts.main, plankSizing, sidebarOpen, complementarySidebarOpen);
+    }
+    return {};
+  }, [layoutMode, overscroll, layoutParts.main, plankSizing, sidebarOpen, complementarySidebarOpen]);
 
   if (layoutMode === 'fullscreen') {
     return <Fullscreen id={fullScreenSlug} />;
@@ -173,25 +171,17 @@ export const DeckLayout = ({
       <Main.Root
         navigationSidebarOpen={context.sidebarOpen}
         onNavigationSidebarOpenChange={(next) => (context.sidebarOpen = next)}
-        {...(complementarySidebarOpen !== null && {
-          complementarySidebarOpen: /* complementaryAvailable && */ context.complementarySidebarOpen as boolean,
-          onComplementarySidebarOpenChange: (next) => (context.complementarySidebarOpen = next),
-        })}
+        complementarySidebarOpen={context.complementarySidebarOpen}
+        onComplementarySidebarOpenChange={(next) => (context.complementarySidebarOpen = next)}
       >
         {/* Notch */}
         <Main.Notch classNames='z-[21]'>
           <Surface role='notch-start' />
-          <Button
-            // disabled={!sidebarAvailable}
-            onClick={() => (context.sidebarOpen = !context.sidebarOpen)}
-            variant='ghost'
-            classNames='p-1'
-          >
+          <Button onClick={() => (context.sidebarOpen = !context.sidebarOpen)} variant='ghost' classNames='p-1'>
             <span className='sr-only'>{t('open navigation sidebar label')}</span>
             <MenuIcon weight='light' className={getSize(5)} />
           </Button>
           <Button
-            // disabled={!complementaryAvailable}
             onClick={() => (context.complementarySidebarOpen = !context.complementarySidebarOpen)}
             variant='ghost'
             classNames='p-1'
@@ -206,7 +196,8 @@ export const DeckLayout = ({
         <Sidebar attention={attention} layoutParts={layoutParts} />
 
         {/* Right sidebar. */}
-        <ComplementarySidebar id={complementarySlug} layoutParts={layoutParts} flatDeck={flatDeck} />
+        {/* TODO(wittjosiah): Get context from layout parts. */}
+        <ComplementarySidebar context='comments' layoutParts={layoutParts} flatDeck={flatDeck} />
 
         {/* Dialog overlay to dismiss dialogs. */}
         <Main.Overlay />

package/src/components/DeckLayout/NodePlankHeading.tsx

@@ -2,13 +2,11 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Placeholder } from '@phosphor-icons/react';
 import React, { Fragment, useEffect } from 'react';
 
 import {
   LayoutAction,
   NavigationAction,
-  SLUG_COLLECTION_INDICATOR,
   SLUG_PATH_SEPARATOR,
   Surface,
   useIntentDispatcher,
@@ -19,8 +17,8 @@ import {
   type LayoutEntry,
 } from '@dxos/app-framework';
 import { type Node, useGraph } from '@dxos/plugin-graph';
-import { Popover, toLocalizedString, useMediaQuery, useTranslation } from '@dxos/react-ui';
-import { PlankHeading, plankHeadingIconProps } from '@dxos/react-ui-deck';
+import { Icon, Popover, toLocalizedString, useMediaQuery, useTranslation } from '@dxos/react-ui';
+import { PlankHeading } from '@dxos/react-ui-deck';
 import { TextTooltip } from '@dxos/react-ui-text-tooltip';
 
 import { DECK_PLUGIN } from '../../meta';
@@ -47,7 +45,7 @@ export const NodePlankHeading = ({
 }) => {
   const { t } = useTranslation(DECK_PLUGIN);
   const { graph } = useGraph();
-  const Icon = node?.properties?.icon ?? Placeholder;
+  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);
@@ -80,7 +78,7 @@ export const NodePlankHeading = ({
       <ActionRoot>
         {node ? (
           <PlankHeading.ActionsMenu
-            Icon={Icon}
+            icon={icon}
             attendableId={attendableId}
             triggerLabel={t('actions menu label')}
             actions={graph.actions(node)}
@@ -93,7 +91,7 @@ export const NodePlankHeading = ({
         ) : (
           <PlankHeading.Button>
             <span className='sr-only'>{label}</span>
-            <Icon {...plankHeadingIconProps} />
+            <Icon icon={icon} size={5} />
           </PlankHeading.Button>
         )}
       </ActionRoot>
@@ -143,7 +141,6 @@ export const NodePlankHeading = ({
                     action: NavigationAction.CLOSE,
                     data: {
                       activeParts: {
-                        complementary: [`${id}${SLUG_PATH_SEPARATOR}comments${SLUG_COLLECTION_INDICATOR}`],
                         [layoutPart]: [id],
                       },
                     },
@@ -151,7 +148,7 @@ export const NodePlankHeading = ({
               : { action: NavigationAction.ADJUST, data: { type: eventType, layoutCoordinate } },
           );
         }}
-        close={layoutCoordinate?.part === 'complementary' ? 'minify-end' : true}
+        close={layoutPart === 'complementary' ? 'minify-end' : true}
       />
     </PlankHeading.Root>
   );

package/src/hooks/useNode.ts

@@ -16,9 +16,13 @@ import { type Graph, type Node } from '@dxos/plugin-graph';
  */
 // TODO(wittjosiah): Factor out.
 export const useNode = <T = any>(graph: Graph, id?: string, timeout?: number): Node<T> | undefined => {
-  const [nodeState, setNodeState] = useState<Node<T> | undefined>(id ? graph.findNode(id) : undefined);
+  const [nodeState, setNodeState] = useState<Node<T> | undefined>(id ? graph.findNode(id, false) : undefined);
 
   useEffect(() => {
+    if (!id && nodeState) {
+      setNodeState(undefined);
+    }
+
     if (nodeState?.id === id || !id) {
       return;
     }