@dxos/plugin-deck 0.6.8-staging.77f93a3 → 0.6.8-staging.dec6b33

package/src/components/DeckLayout/DeckLayout.tsx

@@ -3,11 +3,12 @@
 //
 
 import { Sidebar as MenuIcon } from '@phosphor-icons/react';
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 
 import {
   SLUG_PATH_SEPARATOR,
   type Attention,
+  type LayoutEntry,
   type LayoutParts,
   Surface,
   type Toast as ToastSchema,
@@ -32,28 +33,27 @@ import { useDeckContext } from '../DeckContext';
 import { useLayout } from '../LayoutContext';
 
 export type DeckLayoutProps = {
-  showHintsFooter: boolean;
-  overscroll: Overscroll;
-  flatDeck?: boolean;
-  toasts: ToastSchema[];
-  onDismissToast: (id: string) => void;
-  // TODO(burdon): Rename planks or just items?
   layoutParts: LayoutParts;
   attention: Attention;
+  toasts: ToastSchema[];
+  flatDeck?: boolean;
+  overscroll: Overscroll;
+  showHintsFooter: boolean;
   slots?: {
     wallpaper?: { classNames?: string };
   };
+  onDismissToast: (id: string) => void;
 };
 
 export const DeckLayout = ({
-  showHintsFooter,
+  layoutParts,
+  attention,
   toasts,
-  onDismissToast,
   flatDeck,
-  attention,
-  layoutParts,
-  slots,
   overscroll,
+  showHintsFooter,
+  slots,
+  onDismissToast,
 }: DeckLayoutProps) => {
   const context = useLayout();
   const {
@@ -69,9 +69,7 @@ export const DeckLayout = ({
   } = context;
   const { t } = useTranslation(DECK_PLUGIN);
   const { plankSizing } = useDeckContext();
-
-  const searchEnabled = !!usePlugin('dxos.org/plugin/search');
-
+  const searchPlugin = usePlugin('dxos.org/plugin/search');
   const fullScreenSlug = useMemo(() => firstIdInPart(layoutParts, 'fullScreen'), [layoutParts]);
 
   const complementarySlug = useMemo(() => {
@@ -83,19 +81,37 @@ export const DeckLayout = ({
 
   const activeId = useMemo(() => Array.from(attention.attended ?? [])[0], [attention.attended]);
 
-  // TODO(burdon): Very specific args (move local to file or create struct?)
-  const overscrollAmount = calculateOverscroll(
-    layoutMode,
-    layoutParts,
-    plankSizing,
-    sidebarOpen,
-    complementarySidebarOpen,
-    overscroll,
-  );
+  const deckRef = useRef<HTMLDivElement | null>(null);
+  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' && activeId) {
+      // setTimeout(() => {
+      // const el = deckRef.current?.querySelector(`article[data-attendable-id="${activeId}"]`);
+      // el?.scrollIntoView({ behavior: 'smooth', inline: 'center' });
+      // }, 0);
+    }
+  }, [layoutMode, activeId]);
+
+  // TODO(burdon): Needs cleaning up.
+  const parts: LayoutEntry[] = useMemo(() => {
+    const parts = [...(layoutParts.main ?? [])];
+    for (const part of layoutParts.solo ?? []) {
+      if (!parts.find((entry) => entry.id === part.id)) {
+        parts.push(part);
+      }
+    }
+    return parts;
+  }, [layoutParts.main, layoutParts.solo]);
+
+  const showPlank = (part: LayoutEntry) => {
+    return layoutMode === 'deck' || layoutParts.solo?.find((entry) => entry.id === part.id);
+  };
 
-  const isEmpty =
-    (layoutMode === 'solo' && (!layoutParts.solo || layoutParts.solo.length === 0)) ||
-    (layoutMode === 'deck' && (!layoutParts.main || layoutParts.main.length === 0));
+  const padding =
+    layoutMode === 'deck' && overscroll === 'centering'
+      ? calculateOverscroll(layoutParts.main, plankSizing, sidebarOpen, complementarySidebarOpen)
+      : {};
 
   if (layoutMode === 'fullscreen') {
     return <Fullscreen id={fullScreenSlug} />;
@@ -114,7 +130,7 @@ export const DeckLayout = ({
         }
       }}
     >
-      {/* TODO(burdon): Document this. */}
+      {/* TODO(burdon): Factor out hook to set document title. */}
       <ActiveNode id={activeId} />
 
       <Main.Root
@@ -149,73 +165,63 @@ export const DeckLayout = ({
           <Surface role='notch-end' />
         </Main.Notch>
 
-        {/* Sidebars */}
+        {/* Left sidebar. */}
         <Sidebar attention={attention} layoutParts={layoutParts} />
 
+        {/* Right sidebar. */}
         <ComplementarySidebar id={complementarySlug} layoutParts={layoutParts} flatDeck={flatDeck} />
 
         {/* Dialog overlay to dismiss dialogs. */}
         <Main.Overlay />
 
         {/* No content. */}
-        {isEmpty && (
-          <Main.Content>
+        {parts.length === 0 && (
+          <Main.Content handlesFocus>
             <ContentEmpty />
           </Main.Content>
         )}
 
         {/* Solo/deck mode. */}
-        {!isEmpty && (
-          <Main.Content bounce classNames={['grid', 'block-end-[--statusbar-size]']}>
-            <Deck.Root
-              classNames={[
-                !flatDeck && 'surface-deck',
-                layoutMode === 'deck' && [
-                  'absolute inset-0',
-                  'transition-[padding] duration-200 ease-in-out',
-                  slots?.wallpaper?.classNames,
-                ],
-              ]}
-              solo={layoutMode === 'solo'}
-              style={{ ...overscrollAmount }}
-            >
-              {layoutMode === 'solo' &&
-                layoutParts.solo?.map((layoutEntry) => {
-                  return (
-                    <Plank
-                      key={layoutEntry.id}
-                      entry={layoutEntry}
-                      layoutParts={layoutParts}
-                      part='solo'
-                      flatDeck={flatDeck}
-                    />
-                  );
-                })}
-              {layoutMode === 'deck' &&
-                layoutParts.main?.map((layoutEntry) => {
-                  return (
-                    <Plank
-                      key={layoutEntry.id}
-                      entry={layoutEntry}
-                      layoutParts={layoutParts}
-                      part='main'
-                      resizeable
-                      flatDeck={flatDeck}
-                      searchEnabled={searchEnabled}
-                    />
-                  );
-                })}
-            </Deck.Root>
+        {parts.length !== 0 && (
+          <Main.Content bounce classNames='grid block-end-[--statusbar-size]' handlesFocus>
+            <div role='none' className={layoutMode === 'solo' ? 'contents' : 'relative'}>
+              <Deck.Root
+                ref={deckRef}
+                solo={layoutMode === 'solo'}
+                style={padding}
+                classNames={[
+                  !flatDeck && 'surface-deck',
+                  layoutMode === 'deck' && [
+                    'absolute inset-0',
+                    'transition-[padding] duration-200 ease-in-out',
+                    slots?.wallpaper?.classNames,
+                  ],
+                ]}
+              >
+                {parts.map((layoutEntry) => (
+                  <Plank
+                    key={layoutEntry.id}
+                    entry={layoutEntry}
+                    layoutParts={layoutParts}
+                    part={layoutMode === 'solo' && layoutEntry.id === activeId ? 'solo' : 'main'}
+                    flatDeck={flatDeck}
+                    searchEnabled={!!searchPlugin}
+                    resizeable={layoutMode === 'deck'}
+                    classNames={showPlank(layoutEntry) ? '' : 'hidden'}
+                  />
+                ))}
+              </Deck.Root>
+            </div>
           </Main.Content>
         )}
 
-        {/* Note: This is not Main.Content */}
-        <Main.Content role='none' classNames={['fixed inset-inline-0 block-end-0 z-[2]']}>
+        {/* TODO(burdon): Why Main.Content? */}
+        <Main.Content role='none' classNames='fixed inset-inline-0 block-end-0 z-[2]'>
           <Surface role='status-bar' limit={1} />
         </Main.Content>
 
         {/* Help hints. */}
-        {/* TODO(burdon): Make surface roles/names fully-qualified? */}
+        {/* TODO(burdon): Need to make room for this in status bar. */}
         {showHintsFooter && (
           <div className='fixed bottom-0 left-0 right-0 h-[32px] z-[1] flex justify-center'>
             <Surface role='hints' limit={1} />

package/src/components/DeckLayout/Plank.tsx

@@ -3,7 +3,7 @@
 //
 
 import { Plus } from '@phosphor-icons/react';
-import React, { useCallback, useLayoutEffect, useRef } from 'react';
+import React, { type KeyboardEvent, useCallback, useLayoutEffect, useRef } from 'react';
 
 import {
   LayoutAction,
@@ -48,8 +48,10 @@ export const Plank = ({ entry, layoutParts, part, resizeable, flatDeck, searchEn
   const { plankSizing } = useDeckContext();
   const { graph } = useGraph();
   const node = useNode(graph, entry.id);
+  const rootElement = useRef<HTMLDivElement | null>(null);
 
   const attendableAttrs = createAttendableAttributes(entry.id);
+  const coordinate: LayoutCoordinate = { part, entryId: entry.id };
 
   const size = plankSizing?.[entry.id] as number | undefined;
   const setSize = useCallback(
@@ -59,18 +61,29 @@ export const Plank = ({ entry, layoutParts, part, resizeable, flatDeck, searchEn
     [dispatch, entry.id],
   );
 
-  const coordinate: LayoutCoordinate = { part, entryId: entry.id };
+  // TODO(thure): Tabster’s focus group should handle moving focus to Main, but something is blocking it.
+  const handleKeyDown = useCallback((event: KeyboardEvent) => {
+    if (event.target === event.currentTarget && event.key === 'Escape') {
+      rootElement.current?.closest('main')?.focus();
+    }
+  }, []);
 
-  const ref = useRef<HTMLDivElement | null>(null);
   useLayoutEffect(() => {
     if (scrollIntoView === entry.id) {
-      ref.current?.scrollIntoView({ behavior: 'smooth', inline: 'center' });
+      rootElement.current?.scrollIntoView({ behavior: 'smooth', inline: 'center' });
     }
   }, [scrollIntoView]);
 
   return (
-    <NaturalPlank.Root size={size} setSize={setSize}>
-      <NaturalPlank.Content {...attendableAttrs} ref={ref} classNames={[!flatDeck && 'surface-base', classNames]}>
+    <NaturalPlank.Root
+      size={size}
+      setSize={setSize}
+      classNames={classNames}
+      {...attendableAttrs}
+      onKeyDown={handleKeyDown}
+      ref={rootElement}
+    >
+      <NaturalPlank.Content classNames={[!flatDeck && 'surface-base']}>
         {node ? (
           <>
             <NodePlankHeading

package/src/layout.ts

@@ -7,12 +7,12 @@ import {
   type LayoutAdjustment,
   type LayoutCoordinate,
   type LayoutEntry,
+  type LayoutPart,
   type LayoutParts,
   SLUG_ENTRY_SEPARATOR,
   SLUG_KEY_VALUE_SEPARATOR,
   SLUG_LIST_SEPARATOR,
   SLUG_PATH_SEPARATOR,
-  type LayoutPart,
 } from '@dxos/app-framework';
 
 import { type NewPlankPositioning } from './types';
@@ -161,7 +161,9 @@ export const mergeLayoutParts = (...layoutParts: LayoutParts[]): LayoutParts =>
 };
 
 //
-// --- URI Projection ---------------------------------------------------------
+// URI Projection
+//
+
 const parseLayoutEntry = (itemString: string): LayoutEntry => {
   // Layout entries are in the form of 'id~path' or just 'id'
   const [id, path] = itemString.split(SLUG_PATH_SEPARATOR);

package/src/util/overscroll.ts

@@ -2,96 +2,89 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type LayoutMode, type LayoutParts } from '@dxos/app-framework';
-import { PLANK_DEFAULTS } from '@dxos/react-ui-deck';
+import type { CSSProperties } from 'react';
 
-import { type Overscroll } from '../types';
+import { type LayoutEntry } from '@dxos/app-framework';
+import { PLANK_DEFAULTS } from '@dxos/react-ui-deck';
 
+/**
+ * ┌────────────────────────────────────────────────────────────────────────────────────────────────────┐
+ * | Overscroll Padding Calculation for Centering Planks on Screen.                                     │
+ * ├────────────────────────────────────────────────────────────────────────────────────────────────────┤
+ * │ NOTE(Zan): I found the way you calculate the overscroll padding to center a plank on the screen    │
+ * │ at the edges of the scroll context a bit confusing, so I've diagrammed it here.                    │
+ * │                                                                                                    │
+ * │ Multiple Planks:                                                                                   │
+ * │ ───────────────                                                                                    │
+ * | Use the following overscroll padding calculation centering the boundary planks on the SCREEN.      │
+ * │                                                                                                    │
+ * │ Left Padding:                           Right Padding:                                             │
+ * │ ┌───┬────┬──────────────────┬──────┐    ┌──────┬──────────────────┬────┬───┐                       │
+ * │ │   │████│     Ideal        │      │    │      │      Ideal       │████│   │                       │
+ * │ │ S │█PL█│     first        │      │    │      │      last        │█PR█│ C │                       │
+ * │ │   │████│     plank        │      │    │      │      plank       │████│   │                       │
+ * │ └───┴────┴──────────────────┴──────┘    └──────┴──────────────────┴────┴───┘                       │
+ * │ <--------- screen width ----------->    <---------- screen width ---------->                       │
+ * │                                                                                                    │
+ * │ PL = ((screen width - Plank Width) / 2) - S                                                        │
+ * │ PR = ((screen width - Plank Width) / 2) - C                                                        │
+ * │                                                                                                    │
+ * │ S  = Sidebar width                     C  = Complementary sidebar width                            │
+ * │ PL = Padding Left                      PR = Padding Right                                          │
+ * │                                                                                                    │
+ * │ Single Plank:                                                                                      │
+ * │ ─────────────                                                                                      │
+ * │ For a single plank we use the following overscroll padding calculation to center the plank in      │
+ * │ the content area:                                                                                  │
+ * │                                                                                                    │
+ * │ ┌───┬───────────────────────┬───┬───────────────────────┬───┐                                      │
+ * │ │   │███████████████████████│   │███████████████████████│   │                                      │
+ * │ │ S │█████ Left Padding ████│ P │████ Right Padding ████│ C │                                      │
+ * │ │   │███████████████████████│   │███████████████████████│   │                                      │
+ * │ └───┴───────────────────────┴───┴───────────────────────┴───┘                                      │
+ * │ <------------------------ screen width --------------------->                                      │
+ * │                                                                                                    │
+ * │ Left/Right Padding Width = (screen width - S - P - C) / 2                                          │
+ * │                                                                                                    │
+ * │ S = Sidebar width (may be 0)                                                                       │
+ * │ P = Plank width (centered)                                                                         │
+ * │ C = Complementary sidebar width (may be 0)                                                         │
+ * └────────────────────────────────────────────────────────────────────────────────────────────────────┘
+ */
 export const calculateOverscroll = (
-  layoutMode: LayoutMode,
-  layoutParts: LayoutParts,
+  planks: LayoutEntry[] | undefined,
   plankSizing: Record<string, number>,
   sidebarOpen: boolean,
   complementarySidebarOpen: boolean,
-  overscroll: Overscroll,
-) => {
-  if (!(layoutMode === 'deck' && overscroll === 'centering')) {
-    return;
-  }
-  if (!layoutParts.main || layoutParts.main.length === 0) {
+): Pick<CSSProperties, 'paddingLeft' | 'paddingRight'> | undefined => {
+  if (!planks?.length) {
     return;
   }
 
-  /**
-   * ┌────────────────────────────────────────────────────────────────────────────────────────────────────┐
-   * | Overscroll Padding Calculation for Centering Planks on Screen.                                     │
-   * ├────────────────────────────────────────────────────────────────────────────────────────────────────┤
-   * │ NOTE(Zan): I found the way you calculate the overscroll padding to center a plank on the screen    │
-   * │ at the edges of the scroll context a bit confusing, so I've diagrammed it here.                    │
-   * │                                                                                                    │
-   * │ Multiple Planks:                                                                                   │
-   * │ ───────────────                                                                                    │
-   * | Use the following overscroll padding calculation centering the boundary planks on the SCREEN.      │
-   * │                                                                                                    │
-   * │ Left Padding:                           Right Padding:                                             │
-   * │ ┌───┬────┬──────────────────┬──────┐    ┌──────┬──────────────────┬────┬───┐                       │
-   * │ │   │████│     Ideal        │      │    │      │      Ideal       │████│   │                       │
-   * │ │ S │█PL█│     first        │      │    │      │      last        │█PR█│ C │                       │
-   * │ │   │████│     plank        │      │    │      │      plank       │████│   │                       │
-   * │ └───┴────┴──────────────────┴──────┘    └──────┴──────────────────┴────┴───┘                       │
-   * │ <--------- screen width ----------->    <---------- screen width ---------->                       │
-   * │                                                                                                    │
-   * │ PL = ((screen width - Plank Width) / 2) - S                                                        │
-   * │ PR = ((screen width - Plank Width) / 2) - C                                                        │
-   * │                                                                                                    │
-   * │ S  = Sidebar width                     C  = Complementary sidebar width                            │
-   * │ PL = Padding Left                      PR = Padding Right                                          │
-   * │                                                                                                    │
-   * │ Single Plank:                                                                                      │
-   * │ ─────────────                                                                                      │
-   * │ For a single plank we use the following overscroll padding calculation to center the plank in      │
-   * │ the content area:                                                                                  │
-   * │                                                                                                    │
-   * │ ┌───┬───────────────────────┬───┬───────────────────────┬───┐                                      │
-   * │ │   │███████████████████████│   │███████████████████████│   │                                      │
-   * │ │ S │█████ Left Padding ████│ P │████ Right Padding ████│ C │                                      │
-   * │ │   │███████████████████████│   │███████████████████████│   │                                      │
-   * │ └───┴───────────────────────┴───┴───────────────────────┴───┘                                      │
-   * │ <------------------------ screen width --------------------->                                      │
-   * │                                                                                                    │
-   * │ Left/Right Padding Width = (screen width - S - P - C) / 2                                          │
-   * │                                                                                                    │
-   * │ S = Sidebar width (may be 0)                                                                       │
-   * │ P = Plank width (centered)                                                                         │
-   * │ C = Complementary sidebar width (may be 0)                                                         │
-   * └────────────────────────────────────────────────────────────────────────────────────────────────────┘
-   */
-
   // TODO(Zan): Move complementary sidebar size (360px), sidebar size (270px), plank resize handle size (20px) to CSS variables.
   const sidebarWidth = sidebarOpen ? '270px' : '0px';
   const complementarySidebarWidth = complementarySidebarOpen ? '360px' : '0px';
 
   const getPlankSize = (id: string) => (plankSizing[id] ?? PLANK_DEFAULTS.size).toFixed(2) + 'rem';
 
-  if (layoutParts.main.length === 1) {
+  if (planks.length === 1) {
     // Center the plank in the content area.
-
-    const plank = layoutParts.main[0];
+    const plank = planks[0];
     const plankSize = getPlankSize(plank.id);
     const overscrollPadding = `max(0px, calc(((100dvw - ${sidebarWidth} - ${complementarySidebarWidth} - (${plankSize} + 20px)) / 2)))`;
 
     return { paddingLeft: overscrollPadding, paddingRight: overscrollPadding };
   } else {
     // Center the plank on the screen.
+    const first = planks[0];
+    const firstSize = getPlankSize(first.id);
 
-    const firstPlank = layoutParts.main[0];
-    const firstPlankInlineSize = getPlankSize(firstPlank.id);
-    const paddingLeft = `max(0px, calc(((100dvw - (${firstPlankInlineSize} + 20px)) / 2) - ${sidebarWidth}))`;
-
-    const lastPlank = layoutParts.main[layoutParts.main.length - 1];
-    const lastPlankInlineSize = getPlankSize(lastPlank.id);
-    const paddingRight = `max(0px, calc(((100dvw - (${lastPlankInlineSize} + 20px)) / 2) - ${complementarySidebarWidth}))`;
+    const last = planks[planks.length - 1];
+    const lastSize = getPlankSize(last.id);
 
-    return { paddingLeft, paddingRight };
+    return {
+      paddingLeft: `max(0px, calc(((100dvw - (${firstSize} + 20px)) / 2) - ${sidebarWidth}))`,
+      paddingRight: `max(0px, calc(((100dvw - (${lastSize} + 20px)) / 2) - ${complementarySidebarWidth}))`,
+    };
   }
 };