@dxos/plugin-deck 0.6.14-main.8b352a0 → 0.6.14-staging.54a8bab

package/src/components/DeckLayout/Plank.tsx

@@ -34,10 +34,12 @@ import { DECK_PLUGIN } from '../../meta';
 import { useDeckContext } from '../DeckContext';
 import { useLayout } from '../LayoutContext';
 
+const UNKNOWN_ID = 'unknown_id';
+
 export type PlankProps = {
-  entry: LayoutEntry;
+  entry?: LayoutEntry;
   layoutParts: LayoutParts;
-  // TODO(wittjosiah): Remove.
+  // TODO(wittjosiah): Remove. Pass in LayoutCoordinate instead of LayoutEntry.
   part: LayoutPart;
   layoutMode: Layout['layoutMode'];
   flatDeck?: boolean;
@@ -47,26 +49,28 @@ export type PlankProps = {
 export const Plank = memo(({ entry, layoutParts, part, flatDeck, searchEnabled, layoutMode }: PlankProps) => {
   const { t } = useTranslation(DECK_PLUGIN);
   const dispatch = useIntentDispatcher();
+  const coordinate: LayoutCoordinate = useMemo(() => ({ part, entryId: entry?.id ?? UNKNOWN_ID }), [entry?.id, part]);
   const { popoverAnchorId, scrollIntoView } = useLayout();
   const { plankSizing } = useDeckContext();
   const { graph } = useGraph();
-  const node = useNode(graph, entry.id);
+  const node = useNode(graph, entry?.id);
   const rootElement = useRef<HTMLDivElement | null>(null);
   const resizeable = layoutMode === 'deck';
 
-  const attendableAttrs = useAttendableAttributes(entry.id);
-  const coordinate: LayoutCoordinate = useMemo(() => ({ part, entryId: entry.id }), [entry.id, part]);
+  const attendableAttrs = useAttendableAttributes(coordinate.entryId);
   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 size = plankSizing?.[coordinate.entryId] as number | undefined;
   const setSize = useCallback(
-    debounce((newSize: number) => {
-      void dispatch({ action: DeckAction.UPDATE_PLANK_SIZE, data: { id: entry.id, size: newSize } });
-    }, 200),
-    [dispatch, entry.id],
+    debounce(
+      (newSize: number) =>
+        dispatch({ action: DeckAction.UPDATE_PLANK_SIZE, data: { id: coordinate.entryId, size: newSize } }),
+      200,
+    ),
+    [dispatch, coordinate.entryId],
   );
 
   // TODO(thure): Tabster’s focus group should handle moving focus to Main, but something is blocking it.
@@ -77,25 +81,28 @@ export const Plank = memo(({ entry, layoutParts, part, flatDeck, searchEnabled,
   }, []);
 
   useLayoutEffect(() => {
-    if (scrollIntoView === entry.id) {
+    if (scrollIntoView === coordinate.entryId) {
       rootElement.current?.focus({ preventScroll: true });
       layoutMode === 'deck' && rootElement.current?.scrollIntoView({ behavior: 'smooth', inline: 'center' });
     }
-  }, [scrollIntoView, layoutMode]);
+  }, [coordinate.entryId, scrollIntoView, layoutMode]);
 
   const isSolo = layoutMode === 'solo' && part === 'solo';
-  const isSuppressed = (layoutMode === 'solo' && part !== 'solo') || (layoutMode === 'deck' && part === 'solo');
+  const isSuppressed =
+    (layoutMode === 'solo' && part !== 'solo') ||
+    (layoutMode === 'deck' && part === 'solo') ||
+    coordinate.entryId === UNKNOWN_ID;
 
   const sizeAttrs = useMainSize();
 
   const data = useMemo(
     () =>
       node && {
-        ...(entry.path ? { subject: node.data, path: entry.path } : { object: node.data }),
+        ...(entry?.path ? { subject: node.data, path: entry.path } : { object: node.data }),
         coordinate,
         popoverAnchorId,
       },
-    [node],
+    [node, node?.data, entry?.path, coordinate, popoverAnchorId],
   );
 
   // TODO(wittjosiah): Change prop to accept a component.

package/src/components/LayoutSettings.tsx

@@ -5,7 +5,7 @@
 import React from 'react';
 
 import { Input, Select, useTranslation } from '@dxos/react-ui';
-import { FormInput } from '@dxos/react-ui-data';
+import { DeprecatedFormInput } from '@dxos/react-ui-data';
 
 import { DECK_PLUGIN } from '../meta';
 import {
@@ -23,7 +23,7 @@ export const LayoutSettings = ({ settings }: { settings: DeckSettingsProps }) =>
 
   return (
     <>
-      <FormInput label={t('select new plank positioning label')}>
+      <DeprecatedFormInput 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>
-      </FormInput>
-      <FormInput label={t('settings overscroll label')}>
+      </DeprecatedFormInput>
+      <DeprecatedFormInput 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>
-      </FormInput>
-      <FormInput label={t('settings show hints label')}>
+      </DeprecatedFormInput>
+      <DeprecatedFormInput label={t('settings show hints label')}>
         <Input.Switch checked={settings.showHints} onCheckedChange={(checked) => (settings.showHints = checked)} />
-      </FormInput>
+      </DeprecatedFormInput>
       {!isSocket && (
-        <FormInput label={t('settings native redirect label')}>
+        <DeprecatedFormInput label={t('settings native redirect label')}>
           <Input.Switch
             checked={settings.enableNativeRedirect}
             onCheckedChange={(checked) => (settings.enableNativeRedirect = checked)}
           />
-        </FormInput>
+        </DeprecatedFormInput>
       )}
-      <FormInput label={t('settings custom slots')}>
+      <DeprecatedFormInput label={t('settings custom slots')}>
         <Input.Switch checked={settings.customSlots} onCheckedChange={(checked) => (settings.customSlots = checked)} />
-      </FormInput>
-      <FormInput label={t('settings flat deck')}>
+      </DeprecatedFormInput>
+      <DeprecatedFormInput label={t('settings flat deck')}>
         <Input.Switch checked={settings.flatDeck} onCheckedChange={(checked) => (settings.flatDeck = checked)} />
-      </FormInput>
+      </DeprecatedFormInput>
     </>
   );
 };

package/src/translations.ts

@@ -39,12 +39,6 @@ export default [
         'settings overscroll centering label': 'Centering',
         'settings overscroll none label': 'None',
         'settings flat deck': 'Flatten deck appearance',
-
-        // ComplementarySidebar
-        'open settings label': 'Show settings',
-        'open comments label': 'Show Comments',
-        'open automation label': 'Show Automation',
-        'open debug label': 'Show Debug',
       },
     },
   },

package/src/types.ts

@@ -3,6 +3,7 @@
 //
 
 import type {
+  Plugin,
   GraphBuilderProvides,
   IntentResolverProvides,
   LayoutProvides,
@@ -11,6 +12,7 @@ import type {
   SurfaceProvides,
   TranslationsProvides,
 } from '@dxos/app-framework';
+import { type Label } from '@dxos/react-ui';
 
 // TODO(Zan): In the future we should consider adding new planks adjacent to the attended plank.
 export const NewPlankPositions = ['start', 'end'] as const;
@@ -19,6 +21,19 @@ 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 };
+
+// TODO(wittjosiah): Is this generic enough to be in the app framework?
+export type PanelProvides = {
+  complementary: {
+    panels: Panel[];
+  };
+};
+
+export const parsePanelPlugin = (plugin?: Plugin) =>
+  Array.isArray((plugin?.provides as any).complementary?.panels) ? (plugin as Plugin<PanelProvides>) : undefined;
+
 export type DeckSettingsProps = {
   showHints: boolean;
   customSlots: boolean;