@dxos/plugin-deck 0.6.12-main.15a606f → 0.6.12-main.2d19bf1

package/src/components/DeckLayout/ComplementarySidebar.tsx

@@ -2,12 +2,18 @@
 // Copyright 2024 DXOS.org
 //
 
-import React from 'react';
+import React, { useMemo } from 'react';
 
-import { type LayoutParts, SLUG_PATH_SEPARATOR, Surface } from '@dxos/app-framework';
+import {
+  type LayoutParts,
+  NavigationAction,
+  SLUG_PATH_SEPARATOR,
+  Surface,
+  useIntentDispatcher,
+} from '@dxos/app-framework';
 import { useGraph } from '@dxos/plugin-graph';
 import { Main } from '@dxos/react-ui';
-import { createAttendableAttributes, useAttendedIds } from '@dxos/react-ui-attention';
+import { useAttended } from '@dxos/react-ui-attention';
 import { deckGrid } from '@dxos/react-ui-deck';
 import { mx } from '@dxos/react-ui-theme';
 
@@ -15,6 +21,7 @@ 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 = {
@@ -23,18 +30,59 @@ export type ComplementarySidebarProps = {
   flatDeck?: boolean;
 };
 
-export const ComplementarySidebar = ({ context, layoutParts, flatDeck }: ComplementarySidebarProps) => {
+const panels = ['comments', 'settings'] as const;
+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) => {
   const { popoverAnchorId } = useLayout();
-  const attended = useAttendedIds();
-  const id = attended[0] ? `${attended[0]}${SLUG_PATH_SEPARATOR}${context}` : undefined;
+  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 complementaryAttrs = createAttendableAttributes(id?.split(SLUG_PATH_SEPARATOR)[0] ?? 'never');
+  const dispatch = useIntentDispatcher();
 
   useNodeActionExpander(node);
 
+  const actions = useMemo(
+    () => [
+      {
+        id: 'complementary-settings',
+        data: () => {
+          void dispatch({ action: NavigationAction.OPEN, data: { activeParts: { complementary: 'settings' } } });
+        },
+        properties: {
+          label: ['settings label', { ns: DECK_PLUGIN }],
+          icon: 'ph--gear--regular',
+          menuItemType: 'toggle',
+          isChecked: part === 'settings',
+        },
+      },
+      {
+        id: 'complementary-comments',
+        data: () => {
+          void dispatch({ action: NavigationAction.OPEN, data: { activeParts: { complementary: 'comments' } } });
+        },
+        properties: {
+          label: ['comments label', { ns: DECK_PLUGIN }],
+          icon: 'ph--chat-text--regular',
+          menuItemType: 'toggle',
+          isChecked: part === 'comments',
+        },
+      },
+    ],
+    [part],
+  );
+
   return (
-    <Main.ComplementarySidebar {...complementaryAttrs}>
+    <Main.ComplementarySidebar>
       <div role='none' className={mx(deckGrid, 'grid-cols-1 bs-full')}>
         <NodePlankHeading
           node={node}
@@ -43,12 +91,13 @@ export const ComplementarySidebar = ({ context, layoutParts, flatDeck }: Complem
           layoutPart='complementary'
           popoverAnchorId={popoverAnchorId}
           flatDeck={flatDeck}
+          actions={actions}
         />
         {/* TODO(wittjosiah): Render some placeholder when node is undefined. */}
         {node && (
           <Surface
-            role='article'
-            data={{ subject: node.data, part: 'complementary', popoverAnchorId }}
+            role={`complementary--${part}`}
+            data={{ subject: node.properties.object, popoverAnchorId }}
             limit={1}
             fallback={PlankContentError}
             placeholder={<PlankLoading />}

package/src/components/DeckLayout/DeckLayout.tsx

@@ -6,7 +6,6 @@ import { Sidebar as MenuIcon } from '@phosphor-icons/react';
 import React, { useCallback, useEffect, useMemo, useRef, type UIEvent } from 'react';
 
 import {
-  type Attention,
   type LayoutEntry,
   type LayoutParts,
   Surface,
@@ -15,6 +14,7 @@ import {
   usePlugin,
 } from '@dxos/app-framework';
 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 } from '@dxos/react-ui-theme';
 
@@ -34,11 +34,10 @@ import { useLayout } from '../LayoutContext';
 
 export type DeckLayoutProps = {
   layoutParts: LayoutParts;
-  attention: Attention;
   toasts: ToastSchema[];
   flatDeck?: boolean;
   overscroll: Overscroll;
-  showHintsFooter: boolean;
+  showHints: boolean;
   slots?: {
     wallpaper?: { classNames?: string };
   };
@@ -47,11 +46,10 @@ export type DeckLayoutProps = {
 
 export const DeckLayout = ({
   layoutParts,
-  attention,
   toasts,
   flatDeck,
   overscroll,
-  showHintsFooter,
+  showHints,
   slots,
   onDismissToast,
 }: DeckLayoutProps) => {
@@ -69,6 +67,7 @@ export const DeckLayout = ({
   } = context;
   const { t } = useTranslation(DECK_PLUGIN);
   const { plankSizing } = useDeckContext();
+  const attended = useAttended();
   const searchPlugin = usePlugin('dxos.org/plugin/search');
   const fullScreenSlug = useMemo(() => firstIdInPart(layoutParts, 'fullScreen'), [layoutParts]);
 
@@ -78,7 +77,7 @@ export const DeckLayout = ({
   // 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) {
+    if (attended.length === 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();
@@ -117,8 +116,7 @@ export const DeckLayout = ({
     [layoutMode],
   );
 
-  const firstAttendedId = useMemo(() => Array.from(attention.attended ?? [])[0], [attention.attended]);
-
+  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?
@@ -193,7 +191,7 @@ export const DeckLayout = ({
         </Main.Notch>
 
         {/* Left sidebar. */}
-        <Sidebar attention={attention} layoutParts={layoutParts} />
+        <Sidebar layoutParts={layoutParts} />
 
         {/* Right sidebar. */}
         {/* TODO(wittjosiah): Get context from layout parts. */}
@@ -236,15 +234,8 @@ export const DeckLayout = ({
           </Main.Content>
         )}
 
-        <StatusBar />
-
-        {/* Help hints. */}
-        {/* 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} />
-          </div>
-        )}
+        {/* Footer status. */}
+        <StatusBar showHints={showHints} />
 
         {/* Global popovers. */}
         <Popover.Portal>

package/src/components/DeckLayout/NodePlankHeading.tsx

@@ -14,11 +14,10 @@ import {
   partLength,
   type LayoutParts,
   type LayoutPart,
-  type LayoutEntry,
 } from '@dxos/app-framework';
 import { type Node, useGraph } from '@dxos/plugin-graph';
 import { Icon, Popover, toLocalizedString, useMediaQuery, useTranslation } from '@dxos/react-ui';
-import { PlankHeading } from '@dxos/react-ui-deck';
+import { PlankHeading, type PlankHeadingAction } from '@dxos/react-ui-deck';
 import { TextTooltip } from '@dxos/react-ui-text-tooltip';
 
 import { DECK_PLUGIN } from '../../meta';
@@ -28,20 +27,19 @@ export const NodePlankHeading = ({
   id,
   layoutParts,
   layoutPart,
-  // TODO(wittjosiah): Unused?
-  layoutEntry,
   popoverAnchorId,
   pending,
   flatDeck,
+  actions = [],
 }: {
   node?: Node;
   id?: string;
   layoutParts?: LayoutParts;
   layoutPart?: LayoutPart;
-  layoutEntry?: LayoutEntry;
   popoverAnchorId?: string;
   pending?: boolean;
   flatDeck?: boolean;
+  actions?: PlankHeadingAction[];
 }) => {
   const { t } = useTranslation(DECK_PLUGIN);
   const { graph } = useGraph();
@@ -79,9 +77,10 @@ export const NodePlankHeading = ({
         {node ? (
           <PlankHeading.ActionsMenu
             icon={icon}
+            related={layoutPart === 'complementary'}
             attendableId={attendableId}
             triggerLabel={t('actions menu label')}
-            actions={graph.actions(node)}
+            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 })
             }
@@ -96,7 +95,11 @@ export const NodePlankHeading = ({
         )}
       </ActionRoot>
       <TextTooltip text={label} onlyWhenTruncating>
-        <PlankHeading.Label attendableId={node?.id} {...(pending && { classNames: 'text-description' })}>
+        <PlankHeading.Label
+          attendableId={attendableId}
+          related={layoutPart === 'complementary'}
+          {...(pending && { classNames: 'text-description' })}
+        >
           {label}
         </PlankHeading.Label>
       </TextTooltip>

package/src/components/DeckLayout/Plank.tsx

@@ -19,7 +19,7 @@ import {
 import { debounce } from '@dxos/async';
 import { useGraph } from '@dxos/plugin-graph';
 import { Button, Tooltip, useTranslation } from '@dxos/react-ui';
-import { createAttendableAttributes } from '@dxos/react-ui-attention';
+import { useAttendableAttributes } from '@dxos/react-ui-attention';
 import { Plank as NaturalPlank } from '@dxos/react-ui-deck';
 import { mainIntrinsicSize } from '@dxos/react-ui-theme';
 
@@ -52,7 +52,7 @@ export const Plank = ({ entry, layoutParts, part, flatDeck, searchEnabled, layou
   const rootElement = useRef<HTMLDivElement | null>(null);
   const resizeable = layoutMode === 'deck';
 
-  const attendableAttrs = createAttendableAttributes(entry.id);
+  const attendableAttrs = useAttendableAttributes(entry.id);
   const coordinate: LayoutCoordinate = { part, entryId: entry.id };
 
   const size = plankSizing?.[entry.id] as number | undefined;

package/src/components/DeckLayout/Sidebar.tsx

@@ -4,18 +4,19 @@
 
 import React, { useMemo } from 'react';
 
-import { type Attention, type LayoutParts, openIds, Surface } from '@dxos/app-framework';
+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';
 
 export type SidebarProps = {
-  attention: Attention;
   layoutParts: LayoutParts;
 };
 
-export const Sidebar = ({ attention, layoutParts }: SidebarProps) => {
+export const Sidebar = ({ layoutParts }: SidebarProps) => {
   const { layoutMode, popoverAnchorId } = useLayout();
+  const attended = useAttended();
 
   const activeIds = useMemo(() => {
     if (layoutMode === 'solo') {
@@ -31,9 +32,9 @@ export const Sidebar = ({ attention, layoutParts }: SidebarProps) => {
     () => ({
       popoverAnchorId,
       activeIds,
-      attended: attention.attended,
+      attended,
     }),
-    [popoverAnchorId, activeIds, attention.attended],
+    [popoverAnchorId, activeIds, attended],
   );
   return (
     <Main.NavigationSidebar>

package/src/components/DeckLayout/StatusBar.tsx

@@ -9,10 +9,18 @@ import { mainPadding, mx } from '@dxos/react-ui-theme';
 
 import { useMainSize } from '../../hooks';
 
-export const StatusBar = () => {
+export const StatusBar = ({ showHints }: { showHints?: boolean }) => {
   const sizeAttrs = useMainSize();
   return (
-    <div role='none' {...sizeAttrs} className={mx('fixed block-end-0 inset-inline-0 z-[2]', mainPadding)}>
+    <div
+      role='none'
+      {...sizeAttrs}
+      className={mx(
+        'fixed flex justify-between block-end-0 inset-inline-0 items-center border-bs border-separator z-[2]',
+        mainPadding,
+      )}
+    >
+      <div role='none'>{showHints && <Surface role='hints' limit={1} />}</div>
       <Surface role='status-bar' limit={1} />
     </div>
   );

package/src/components/LayoutSettings.tsx

@@ -61,25 +61,22 @@ export const LayoutSettings = ({ settings }: { settings: DeckSettingsProps }) =>
           </Select.Portal>
         </Select.Root>
       </SettingsValue>
-      <SettingsValue label={t('settings show footer label')}>
-        <Input.Switch checked={settings.showFooter} onCheckedChange={(checked) => (settings.showFooter = !!checked)} />
+      <SettingsValue label={t('settings show hints label')}>
+        <Input.Switch checked={settings.showHints} onCheckedChange={(checked) => (settings.showHints = checked)} />
       </SettingsValue>
       {!isSocket && (
         <SettingsValue label={t('settings native redirect label')}>
           <Input.Switch
             checked={settings.enableNativeRedirect}
-            onCheckedChange={(checked) => (settings.enableNativeRedirect = !!checked)}
+            onCheckedChange={(checked) => (settings.enableNativeRedirect = checked)}
           />
         </SettingsValue>
       )}
       <SettingsValue label={t('settings custom slots')}>
-        <Input.Switch
-          checked={settings.customSlots}
-          onCheckedChange={(checked) => (settings.customSlots = !!checked)}
-        />
+        <Input.Switch checked={settings.customSlots} onCheckedChange={(checked) => (settings.customSlots = checked)} />
       </SettingsValue>
       <SettingsValue label={t('settings flat deck')}>
-        <Input.Switch checked={settings.flatDeck} onCheckedChange={(checked) => (settings.flatDeck = !!checked)} />
+        <Input.Switch checked={settings.flatDeck} onCheckedChange={(checked) => (settings.flatDeck = checked)} />
       </SettingsValue>
     </>
   );

package/src/meta.ts

@@ -2,9 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
+import { type PluginMeta } from '@dxos/app-framework';
+
 export const DECK_PLUGIN = 'dxos.org/plugin/deck';
 
 export default {
   id: DECK_PLUGIN,
   name: 'Deck',
-};
+} satisfies PluginMeta;

package/src/translations.ts

@@ -16,7 +16,7 @@ export default [
         'content fallback description':
           'No plugin had a response for the address you navigated to. Double-check the URL, and ensure you’ve enabled a plugin that supports the object.',
         'toggle fullscreen label': 'Toggle fullscreen',
-        'settings show footer label': 'Show footer (experimental)',
+        'settings show hints label': 'Show hints',
         'settings native redirect label': 'Enable native url redirect (experimental)',
         'settings custom slots': 'Theme option (experimental)',
         'settings new plank position start label': 'Start',
@@ -41,6 +41,8 @@ export default [
         'settings overscroll centering label': 'Centering',
         'settings overscroll none label': 'None',
         'settings flat deck': 'Flatten deck appearance',
+        'comments label': 'Show Comments',
+        'settings label': 'Show Settings',
       },
     },
   },

package/src/types.ts

@@ -20,7 +20,7 @@ export const OverscrollOptions = ['none', 'centering'] as const;
 export type Overscroll = (typeof OverscrollOptions)[number];
 
 export type DeckSettingsProps = {
-  showFooter: boolean;
+  showHints: boolean;
   customSlots: boolean;
   flatDeck: boolean;
   enableNativeRedirect: boolean;

package/dist/lib/browser/chunk-YVHGFQQR.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/meta.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nexport const DECK_PLUGIN = 'dxos.org/plugin/deck';\n\nexport default {\n  id: DECK_PLUGIN,\n  name: 'Deck',\n};\n"],
-  "mappings": ";AAIO,IAAMA,cAAc;AAE3B,IAAA,eAAe;EACbC,IAAID;EACJE,MAAM;AACR;",
-  "names": ["DECK_PLUGIN", "id", "name"]
-}