@dxos/plugin-deck 0.7.5-labs.c0e040f → 0.7.5-labs.d199c0f

package/src/components/DeckLayout/ComplementarySidebar.tsx

@@ -2,49 +2,65 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useCallback, useEffect, useMemo, useState, type MouseEvent } from 'react';
+import React, {
+  type PropsWithChildren,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  type MouseEvent,
+  Fragment,
+} from 'react';
 
 import {
   createIntent,
   LayoutAction,
   Surface,
   useAppGraph,
+  useCapabilities,
   useCapability,
   useIntentDispatcher,
 } from '@dxos/app-framework';
-import { Main, useTranslation, toLocalizedString, IconButton, ScrollArea } from '@dxos/react-ui';
+import { Main, useTranslation, toLocalizedString, IconButton, ScrollArea as NaturalScrollArea } from '@dxos/react-ui';
 import { useAttended } from '@dxos/react-ui-attention';
 import { Tabs } from '@dxos/react-ui-tabs';
+import { byPosition } from '@dxos/util';
 
 import { PlankContentError } from './PlankError';
 import { PlankLoading } from './PlankLoading';
 import { ToggleComplementarySidebarButton } from './SidebarButton';
 import { DeckCapabilities } from '../../capabilities';
-import { useNode, useNodeActionExpander } from '../../hooks';
+import { useNode } from '../../hooks';
 import { DECK_PLUGIN } from '../../meta';
-import { SLUG_PATH_SEPARATOR, type Panel } from '../../types';
+import { type Panel } from '../../types';
 import { layoutAppliesTopbar, useBreakpoints, useHoistStatusbar } from '../../util';
 
 export type ComplementarySidebarProps = {
-  panels: Panel[];
   current?: string;
 };
 
-export const ComplementarySidebar = ({ panels, current }: ComplementarySidebarProps) => {
+export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) => {
+  const { t } = useTranslation(DECK_PLUGIN);
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
   const layout = useCapability(DeckCapabilities.MutableDeckState);
   const attended = useAttended();
-  const panelIds = useMemo(() => panels.map((panel) => panel.id), [panels]);
-  const activePanelId = panelIds.find((panelId) => panelId === current) ?? panels[0].id;
-  const activeEntryId = attended[0] ? `${attended[0]}${SLUG_PATH_SEPARATOR}${activePanelId}` : undefined;
   const { graph } = useAppGraph();
-  const node = useNode(graph, activeEntryId);
-  const { t } = useTranslation(DECK_PLUGIN);
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  useNodeActionExpander(node);
+  const node = useNode(graph, attended[0]);
   const breakpoint = useBreakpoints();
   const topbar = layoutAppliesTopbar(breakpoint);
   const hoistStatusbar = useHoistStatusbar(breakpoint);
 
+  const panels = useCapabilities(DeckCapabilities.ComplementaryPanel);
+  const availablePanels = panels
+    .filter((panel) => {
+      if (!node || !panel.filter) {
+        return true;
+      }
+
+      return panel.filter(node);
+    })
+    .toSorted(byPosition);
+  const activePanelId = availablePanels.find((panel) => panel.id === current)?.id ?? availablePanels[0]?.id;
   const [internalValue, setInternalValue] = useState(activePanelId);
 
   useEffect(() => {
@@ -65,6 +81,17 @@ export const ComplementarySidebar = ({ panels, current }: ComplementarySidebarPr
     [layout, activePanelId, dispatch],
   );
 
+  const data = useMemo(
+    () =>
+      node && {
+        id: node.id,
+        subject: node.data,
+        workspace: layout.activeDeck,
+        popoverAnchorId: layout.popoverAnchorId,
+      },
+    [node, layout.popoverAnchorId],
+  );
+
   // TODO(burdon): Scroll area should be controlled by surface.
   return (
     <Main.ComplementarySidebar
@@ -82,10 +109,10 @@ export const ComplementarySidebar = ({ panels, current }: ComplementarySidebarPr
       >
         <div
           role='none'
-          className='absolute z-[1] inset-block-0 inline-end-0 !is-[--r0-size] border-is border-separator grid grid-cols-1 grid-rows-[1fr_min-content] bg-baseSurface contain-layout app-drag'
+          className='absolute z-[1] inset-block-0 inline-end-0 !is-[--r0-size] pbs-[env(safe-area-inset-top)] pbe-[env(safe-area-inset-bottom)] border-is border-separator grid grid-cols-1 grid-rows-[1fr_min-content] bg-baseSurface contain-layout app-drag'
         >
           <Tabs.Tablist classNames='grid grid-cols-1 auto-rows-[--rail-action] p-1 gap-1 !overflow-y-auto'>
-            {panels.map((panel) => (
+            {availablePanels.map((panel) => (
               <Tabs.Tab key={panel.id} value={panel.id} asChild>
                 <IconButton
                   label={toLocalizedString(panel.label, t)}
@@ -115,49 +142,79 @@ export const ComplementarySidebar = ({ panels, current }: ComplementarySidebarPr
             <ToggleComplementarySidebarButton />
           </div>
         </div>
-        {panels.map((panel) => (
+        {availablePanels.map((panel) => (
           <Tabs.Tabpanel
             key={panel.id}
             value={panel.id}
-            classNames='absolute data-[state="inactive"]:-z-[1] inset-block-0 inline-start-0 is-[calc(100%-var(--r0-size))] lg:is-[--r1-size] grid grid-cols-1 grid-rows-[var(--rail-size)_1fr_min-content]'
+            classNames='absolute data-[state="inactive"]:-z-[1] inset-block-0 inline-start-0 is-[calc(100%-var(--r0-size))] lg:is-[--r1-size] grid grid-cols-1 grid-rows-[var(--rail-size)_1fr_min-content] pbs-[env(safe-area-inset-top)]'
             {...(layout.complementarySidebarState !== 'expanded' && { inert: 'true' })}
           >
-            {panel.id === activePanelId && node && (
-              <>
-                <h2 className='flex items-center pli-2 border-separator border-be'>
-                  {toLocalizedString(panel.label, t)}
-                </h2>
-                <ScrollArea.Root>
-                  <ScrollArea.Viewport>
-                    <Surface
-                      key={activeEntryId}
-                      role={`complementary--${activePanelId}`}
-                      data={{
-                        id: activeEntryId,
-                        subject: node.properties.object ?? node.properties.space,
-                        popoverAnchorId: layout.popoverAnchorId,
-                      }}
-                      fallback={PlankContentError}
-                      placeholder={<PlankLoading />}
-                    />
-                  </ScrollArea.Viewport>
-                  <ScrollArea.Scrollbar orientation='vertical'>
-                    <ScrollArea.Thumb />
-                  </ScrollArea.Scrollbar>
-                </ScrollArea.Root>
-                {!hoistStatusbar && (
-                  <div
-                    role='contentinfo'
-                    className='flex flex-wrap justify-center items-center border-bs border-separator plb-1'
-                  >
-                    <Surface role='status-bar--r1-footer' limit={1} />
-                  </div>
-                )}
-              </>
-            )}
+            <ComplementarySidebarPanel
+              panel={panel}
+              activePanelId={activePanelId}
+              data={data}
+              hoistStatusbar={hoistStatusbar}
+            />
           </Tabs.Tabpanel>
         ))}
       </Tabs.Root>
     </Main.ComplementarySidebar>
   );
 };
+
+type ComplementarySidebarPanelProps = {
+  panel: Panel;
+  activePanelId: string;
+  data?: {
+    id: string;
+    subject: any;
+    workspace: string;
+    popoverAnchorId?: string;
+  };
+  hoistStatusbar: boolean;
+};
+
+const ScrollArea = ({ children }: PropsWithChildren) => {
+  return (
+    <NaturalScrollArea.Root>
+      <NaturalScrollArea.Viewport>{children}</NaturalScrollArea.Viewport>
+      <NaturalScrollArea.Scrollbar orientation='vertical'>
+        <NaturalScrollArea.Thumb />
+      </NaturalScrollArea.Scrollbar>
+    </NaturalScrollArea.Root>
+  );
+};
+
+const ComplementarySidebarPanel = ({ panel, activePanelId, data, hoistStatusbar }: ComplementarySidebarPanelProps) => {
+  const { t } = useTranslation(DECK_PLUGIN);
+
+  if (panel.id !== activePanelId || !data) {
+    return null;
+  }
+
+  const Wrapper = panel.fixed ? Fragment : ScrollArea;
+
+  return (
+    <>
+      <h2 className='flex items-center pli-2 border-separator border-be font-medium'>
+        {toLocalizedString(panel.label, t)}
+      </h2>
+      <Wrapper>
+        <Surface
+          role={`complementary--${activePanelId}`}
+          data={data}
+          fallback={PlankContentError}
+          placeholder={<PlankLoading />}
+        />
+      </Wrapper>
+      {!hoistStatusbar && (
+        <div
+          role='contentinfo'
+          className='flex flex-wrap justify-center items-center border-bs border-separator pbs-1 pbe-[max(env(safe-area-inset-bottom),0.25rem)]'
+        >
+          <Surface role='status-bar--r1-footer' limit={1} />
+        </div>
+      )}
+    </>
+  );
+};

package/src/components/DeckLayout/DeckLayout.tsx

@@ -3,7 +3,7 @@
 //
 
 import { untracked } from '@preact/signals-core';
-import React, { useCallback, useEffect, useMemo, useRef, type UIEvent, Fragment } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, type UIEvent, Fragment, useState } from 'react';
 
 import {
   LayoutAction,
@@ -27,7 +27,7 @@ import { Stack, StackContext, DEFAULT_HORIZONTAL_SIZE } from '@dxos/react-ui-sta
 import { mainPaddingTransitions } from '@dxos/react-ui-theme';
 
 import { ActiveNode } from './ActiveNode';
-import { ComplementarySidebar, type ComplementarySidebarProps } from './ComplementarySidebar';
+import { ComplementarySidebar } from './ComplementarySidebar';
 import { ContentEmpty } from './ContentEmpty';
 import { Fullscreen } from './Fullscreen';
 import { Plank } from './Plank';
@@ -45,12 +45,12 @@ export type DeckLayoutProps = {
   overscroll: Overscroll;
   showHints: boolean;
   onDismissToast: (id: string) => void;
-} & Pick<ComplementarySidebarProps, 'panels'>;
+};
 
 const PlankSeparator = ({ index }: { index: number }) =>
   index > 0 ? <span role='separator' className='row-span-2 bg-deck is-4' style={{ gridColumn: index * 2 }} /> : null;
 
-export const DeckLayout = ({ overscroll, showHints, panels, onDismissToast }: DeckLayoutProps) => {
+export const DeckLayout = ({ overscroll, showHints, onDismissToast }: DeckLayoutProps) => {
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const context = useCapability(DeckCapabilities.MutableDeckState);
   const {
@@ -76,6 +76,13 @@ export const DeckLayout = ({ overscroll, showHints, panels, onDismissToast }: De
   const scrollLeftRef = useRef<number | null>();
   const deckRef = useRef<HTMLDivElement>(null);
 
+  // TODO(thure): This is a workaround for the difference in `React`ion time between displaying a Popover and rendering
+  //  the anchor further down the tree. Refactor to use VirtualTrigger or some other approach which does not cause a lag.
+  const [delayedPopoverVisibility, setDelayedPopoverVisibility] = useState(false);
+  useEffect(() => {
+    popoverOpen ? setTimeout(() => setDelayedPopoverVisibility(true), 40) : setDelayedPopoverVisibility(false);
+  }, [popoverOpen]);
+
   // Ensure the first plank is attended when the deck is first rendered.
   useEffect(() => {
     // NOTE: Not `useAttended` so that the layout component is not re-rendered when the attended list changes.
@@ -165,19 +172,22 @@ export const DeckLayout = ({ overscroll, showHints, panels, onDismissToast }: De
 
   const Dialog = dialogType === 'alert' ? AlertDialog : NaturalDialog;
 
+  const handlePopoverOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      if (nextOpen && popoverAnchorId) {
+        context.popoverOpen = true;
+      } else {
+        context.popoverOpen = false;
+        context.popoverAnchorId = undefined;
+        context.popoverSide = undefined;
+      }
+    },
+    [context],
+  );
+  const handlePopoverClose = useCallback(() => handlePopoverOpenChange(false), [handlePopoverOpenChange]);
+
   return (
-    <Popover.Root
-      modal
-      open={!!(popoverAnchorId && popoverOpen)}
-      onOpenChange={(nextOpen) => {
-        if (nextOpen && popoverAnchorId) {
-          context.popoverOpen = true;
-        } else {
-          context.popoverOpen = false;
-          context.popoverAnchorId = undefined;
-        }
-      }}
-    >
+    <Popover.Root modal open={!!(popoverAnchorId && delayedPopoverVisibility)} onOpenChange={handlePopoverOpenChange}>
       <ActiveNode />
 
       {fullscreen && <Fullscreen id={solo} />}
@@ -193,7 +203,7 @@ export const DeckLayout = ({ overscroll, showHints, panels, onDismissToast }: De
           <Sidebar />
 
           {/* Right sidebar. */}
-          <ComplementarySidebar panels={panels} current={complementarySidebarPanel} />
+          <ComplementarySidebar current={complementarySidebarPanel} />
 
           {/* Dialog overlay to dismiss dialogs. */}
           <Main.Overlay />
@@ -276,12 +286,7 @@ export const DeckLayout = ({ overscroll, showHints, panels, onDismissToast }: De
 
       {/* Global popovers. */}
       <Popover.Portal>
-        <Popover.Content
-          onEscapeKeyDown={() => {
-            context.popoverOpen = false;
-            context.popoverAnchorId = undefined;
-          }}
-        >
+        <Popover.Content side={context.popoverSide} onEscapeKeyDown={handlePopoverClose}>
           <Popover.Viewport>
             <Surface role='popover' data={popoverContent} limit={1} />
           </Popover.Viewport>

package/src/components/DeckLayout/Plank.tsx

@@ -50,12 +50,13 @@ export const Plank = memo(({ id = UNKNOWN_ID, part, path, order, active, layoutM
   const canIncrementStart = active && index !== undefined && index > 0 && length !== undefined && length > 1;
   const canIncrementEnd = active && index !== undefined && index < length - 1 && length !== undefined;
 
-  const size = deck.plankSizing[id] as number | undefined;
+  const key = id.split('+')[0];
+  const size = deck.plankSizing[key] as number | undefined;
   const setSize = useCallback(
     debounce((nextSize: number) => {
-      return dispatch(createIntent(DeckAction.UpdatePlankSize, { id, size: nextSize }));
+      return dispatch(createIntent(DeckAction.UpdatePlankSize, { id: key, size: nextSize }));
     }, 200),
-    [dispatch, id],
+    [dispatch, key],
   );
 
   // TODO(thure): Tabster’s focus group should handle moving focus to Main, but something is blocking it.

package/src/components/DeckLayout/PlankControls.tsx

@@ -40,7 +40,7 @@ const PlankControl = ({ icon, label, ...props }: Omit<ButtonProps, 'children'> &
       <Tooltip.Trigger asChild>
         <Button variant='ghost' {...props}>
           <span className='sr-only'>{label}</span>
-          <Icon icon={icon} size={4} />
+          <Icon icon={icon} size={5} />
         </Button>
       </Tooltip.Trigger>
       <Tooltip.Portal>

package/src/events.ts

@@ -7,5 +7,6 @@ import { Events } from '@dxos/app-framework';
 import { DECK_PLUGIN } from './meta';
 
 export namespace DeckEvents {
+  export const SetupComplementaryPanels = Events.createStateEvent(`${DECK_PLUGIN}/setup-complementary-panels`);
   export const StateReady = Events.createStateEvent(`${DECK_PLUGIN}/state-ready`);
 }

package/src/layout.ts

@@ -20,7 +20,7 @@ export const openEntry = (deck: string[], entryId: string, options?: OpenLayoutE
     const pivotId = options?.pivotId;
 
     if (key) {
-      const index = draft.findIndex((id) => id.startsWith(key));
+      const index = draft.findIndex((id) => id.split('+')[0] === key);
       if (index !== -1) {
         draft.splice(index, 1, entryId);
         return;

package/src/types.ts

@@ -4,7 +4,9 @@
 
 import { LayoutAction } from '@dxos/app-framework';
 import { S } from '@dxos/echo-schema';
+import { type Node } from '@dxos/plugin-graph';
 import { type Label } from '@dxos/react-ui';
+import { type Position } from '@dxos/util';
 
 import { DECK_PLUGIN } from './meta';
 
@@ -15,8 +17,17 @@ export type NewPlankPositioning = (typeof NewPlankPositions)[number];
 export const OverscrollOptions = ['none', 'centering'] as const;
 export type Overscroll = (typeof OverscrollOptions)[number];
 
-// TODO(wittjosiah): Include a predicate for whether the panel is visible for the current subject.
-export type Panel = { id: string; label: Label; icon: string };
+export type Panel = {
+  id: string;
+  label: Label;
+  icon: string;
+  position?: Position;
+  /**
+   * If true, the panel will now be wrapped in a scroll area.
+   */
+  fixed?: boolean;
+  filter?: (node: Node) => boolean;
+};
 
 export const DeckSettingsSchema = S.mutable(
   S.Struct({
@@ -64,6 +75,7 @@ export const DeckState = S.mutable(
     dialogType: S.optional(S.Literal('default', 'alert')),
 
     popoverOpen: S.Boolean,
+    popoverSide: S.optional(S.Literal('top', 'right', 'bottom', 'left')),
     /**
      * Data to be passed to the popover Surface.
      */
@@ -74,6 +86,7 @@ export const DeckState = S.mutable(
     currentUndoId: S.optional(S.String),
 
     activeDeck: S.String,
+    previousDeck: S.String,
     decks: S.mutable(S.Record({ key: S.String, value: S.mutable(Deck) })),
     previousMode: S.mutable(S.Record({ key: S.String, value: LayoutMode })),
     deck: S.mutable(Deck),

package/src/util/index.ts

@@ -3,6 +3,7 @@
 //
 
 export * from './overscroll';
+export * from './set-active';
 export * from './useBreakpoints';
 export * from './layoutAppliesTopbar';
 export * from './useHoistStatusbar';

package/src/util/useHoistStatusbar.ts

@@ -5,6 +5,7 @@
 import { useMemo } from 'react';
 
 import { Capabilities, useCapability } from '@dxos/app-framework';
+import { useThemeContext } from '@dxos/react-ui';
 
 import { DECK_PLUGIN } from '../meta';
 import type { DeckSettingsProps } from '../types';
@@ -12,13 +13,8 @@ import type { DeckSettingsProps } from '../types';
 export const useHoistStatusbar = (breakpoint: string) => {
   const enableIdeStyleStatusbar = useCapability(Capabilities.SettingsStore).getStore<DeckSettingsProps>(DECK_PLUGIN)!
     .value.enableIdeStyleStatusbar;
+  const { safeAreaPadding } = useThemeContext();
   return useMemo(() => {
-    return (
-      breakpoint === 'desktop' &&
-      enableIdeStyleStatusbar &&
-      // NOTE(thure): this last predicate depends on a head script that measures `env(safe-area-bottom)` on resize;
-      // see that of composer-app for an example.
-      document.body.getAttribute('data-safe-area-bottom') === '0'
-    );
-  }, [enableIdeStyleStatusbar, breakpoint]);
+    return breakpoint === 'desktop' && enableIdeStyleStatusbar && safeAreaPadding?.bottom === 0;
+  }, [enableIdeStyleStatusbar, breakpoint, safeAreaPadding?.bottom]);
 };