@dxos/plugin-deck 0.8.1 → 0.8.2-main.f081794

package/src/components/Plank/PlankControls.tsx

@@ -17,7 +17,7 @@ import {
 } from '@dxos/react-ui';
 
 import { DECK_PLUGIN } from '../../meta';
-import { DeckAction } from '../../types';
+import { DeckAction, type LayoutMode } from '../../types';
 
 export type PlankControlHandler = (event: DeckAction.PartAdjustment) => void;
 
@@ -34,7 +34,7 @@ export type PlankControlsProps = Omit<ButtonGroupProps, 'onClick'> & {
   variant?: 'hide-disabled' | 'default';
   close?: boolean | 'minify-start' | 'minify-end';
   capabilities: PlankCapabilities;
-  isSolo?: boolean;
+  layoutMode?: LayoutMode;
   pin?: 'start' | 'end' | 'both';
 };
 
@@ -73,7 +73,6 @@ export const PlankCompanionControls = forwardRef<HTMLDivElement, PlankCompliment
         <PlankControl
           label={t('close companion label')}
           variant='ghost'
-          // icon='ph--minus--regular'
           icon='ph--caret-left--regular'
           onClick={handleCloseCompanion}
           classNames={plankControlSpacing}
@@ -88,35 +87,45 @@ export const PlankCompanionControls = forwardRef<HTMLDivElement, PlankCompliment
 // NOTE(thure): Pinning & unpinning are disabled indefinitely.
 export const PlankControls = forwardRef<HTMLDivElement, PlankControlsProps>(
   (
-    { children, classNames, variant = 'default', capabilities, isSolo, pin, close = false, onClick, ...props },
+    { children, classNames, variant = 'default', capabilities, layoutMode, pin, close = false, onClick, ...props },
     forwardedRef,
   ) => {
     const { t } = useTranslation(DECK_PLUGIN);
     const buttonClassNames =
       variant === 'hide-disabled' ? `disabled:hidden ${plankControlSpacing}` : plankControlSpacing;
 
+    const layoutIsAnySolo = !!layoutMode?.startsWith('solo');
+
     return (
       <ButtonGroup {...props} classNames={['app-no-drag', classNames]} ref={forwardedRef}>
-        {/* {pin && !isSolo && ['both', 'start'].includes(pin) && (
-          <PlankControl
-            label={t('pin start label')}
-            variant='ghost'
-            classNames={buttonClassNames}
-            onClick={() => onClick?.('pin-start')}
-            icon='ph--caret-line-left--regular'
-          />
-        )} */}
-
-        {capabilities.deck && capabilities.solo && (
+        {capabilities.deck && (
           <>
-            <PlankControl
-              label={isSolo ? t('show deck plank label') : t('show solo plank label')}
-              classNames={buttonClassNames}
-              icon={isSolo ? 'ph--corners-in--regular' : 'ph--corners-out--regular'}
-              onClick={() => onClick?.('solo')}
-            />
-
-            {!isSolo && (
+            {capabilities.solo && (
+              <>
+                {layoutMode === 'solo' && (
+                  <PlankControl
+                    label={t('show fullscreen plank label')}
+                    classNames={buttonClassNames}
+                    icon='ph--corners-out--regular'
+                    onClick={() => onClick?.('solo--fullscreen')}
+                  />
+                )}
+                <PlankControl
+                  label={t(
+                    layoutMode === 'solo--fullscreen'
+                      ? 'exit fullscreen label'
+                      : !layoutIsAnySolo
+                        ? 'show solo plank label'
+                        : 'show deck plank label',
+                  )}
+                  classNames={buttonClassNames}
+                  icon={layoutIsAnySolo ? 'ph--corners-in--regular' : 'ph--corners-out--regular'}
+                  onClick={() => onClick?.(layoutMode === 'solo--fullscreen' ? 'solo--fullscreen' : 'solo')}
+                />
+              </>
+            )}
+
+            {!layoutIsAnySolo && (
               <>
                 <PlankControl
                   label={t('increment start label')}
@@ -137,16 +146,7 @@ export const PlankControls = forwardRef<HTMLDivElement, PlankControlsProps>(
           </>
         )}
 
-        {/* {pin && !isSolo && ['both', 'end'].includes(pin) && (
-          <PlankControl
-            label={t('pin end label')}
-            classNames={buttonClassNames}
-            icon='ph--caret-line-right--regular'
-            onClick={() => onClick?.('pin-end')}
-          />
-        )} */}
-
-        {close && !isSolo && (
+        {close && !layoutIsAnySolo && (
           <PlankControl
             label={t(`${typeof close === 'string' ? 'minify' : 'close'} label`)}
             classNames={buttonClassNames}

package/src/components/Plank/PlankHeading.tsx

@@ -13,13 +13,14 @@ import { TextTooltip } from '@dxos/react-ui-text-tooltip';
 import { PlankCompanionControls, PlankControls } from './PlankControls';
 import { parseEntryId } from '../../layout';
 import { DECK_PLUGIN } from '../../meta';
-import { PLANK_COMPANION_TYPE, DeckAction, type ResolvedPart } from '../../types';
+import { PLANK_COMPANION_TYPE, DeckAction, type ResolvedPart, type LayoutMode } from '../../types';
 import { useBreakpoints } from '../../util';
 import { soloInlinePadding } from '../fragments';
 
 export type PlankHeadingProps = {
   id: string;
   part: ResolvedPart;
+  layoutMode?: LayoutMode;
   node?: Node;
   deckEnabled?: boolean;
   canIncrementStart?: boolean;
@@ -45,6 +46,7 @@ export const PlankHeading = memo(
     pending,
     companioned,
     companions,
+    layoutMode,
     actions = [],
   }: PlankHeadingProps) => {
     const { t } = useTranslation(DECK_PLUGIN);
@@ -96,7 +98,7 @@ export const PlankHeading = memo(
 
     const handlePlankAction = useCallback(
       (eventType: DeckAction.PartAdjustment) => {
-        if (eventType === 'solo') {
+        if (eventType.startsWith('solo')) {
           return dispatch(createIntent(DeckAction.Adjust, { type: eventType, id }));
         } else if (eventType === 'close') {
           if (part === 'complementary') {
@@ -139,7 +141,7 @@ export const PlankHeading = memo(
     return (
       <StackItem.Heading
         classNames={[
-          'plb-1 border-be border-separator items-stretch gap-1 sticky inline-start-12 app-drag min-is-0 layout-contain',
+          'plb-1 border-be border-separator items-stretch gap-1 sticky inline-start-12 app-drag min-is-0 contain-layout',
           part === 'solo' ? soloInlinePadding : 'pli-1',
         ]}
       >
@@ -196,7 +198,7 @@ export const PlankHeading = memo(
         ) : (
           <PlankControls
             capabilities={capabilities}
-            isSolo={part === 'solo'}
+            layoutMode={layoutMode}
             close={part === 'complementary' ? 'minify-end' : true}
             onClick={handlePlankAction}
           />

package/src/components/Sidebar/ComplementarySidebar.tsx

@@ -28,7 +28,7 @@ import { byPosition, type Position } from '@dxos/util';
 import { ToggleComplementarySidebarButton } from './SidebarButton';
 import { DeckCapabilities } from '../../capabilities';
 import { DECK_PLUGIN } from '../../meta';
-import { ATTENDABLE_PATH_SEPARATOR, DECK_COMPANION_TYPE } from '../../types';
+import { ATTENDABLE_PATH_SEPARATOR, DECK_COMPANION_TYPE, getMode } from '../../types';
 import { layoutAppliesTopbar, useBreakpoints, useHoistStatusbar } from '../../util';
 import { PlankContentError, PlankLoading } from '../Plank';
 
@@ -65,13 +65,14 @@ export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) =>
   const { t } = useTranslation(DECK_PLUGIN);
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const layout = useCapability(DeckCapabilities.MutableDeckState);
+  const layoutMode = getMode(layout.deck);
   const breakpoint = useBreakpoints();
-  const topbar = layoutAppliesTopbar(breakpoint);
-  const hoistStatusbar = useHoistStatusbar(breakpoint);
+  const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
+  const hoistStatusbar = useHoistStatusbar(breakpoint, layoutMode);
 
   const companions = useDeckCompanions();
-  const activeCompanion = companions.find((companion) => getCompanionId(companion.id) === current) ?? companions.at(0);
-  const activeId = getCompanionId(activeCompanion?.id ?? 'never');
+  const activeCompanion = companions.find((companion) => getCompanionId(companion.id) === current);
+  const activeId = activeCompanion && getCompanionId(activeCompanion.id);
   const [internalValue, setInternalValue] = useState(activeId);
 
   useEffect(() => {
@@ -101,6 +102,14 @@ export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) =>
     [activeCompanion?.id, activeCompanion?.data],
   );
 
+  useEffect(() => {
+    if (!activeId) {
+      void dispatch(
+        createIntent(LayoutAction.UpdateComplementary, { part: 'complementary', options: { state: 'collapsed' } }),
+      );
+    }
+  }, [activeId, dispatch]);
+
   return (
     <Main.ComplementarySidebar
       label={label}
@@ -145,21 +154,22 @@ export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) =>
             <ToggleComplementarySidebarButton />
           </div>
         </div>
-        {companions.map((companion) => (
-          <Tabs.Tabpanel
-            key={getCompanionId(companion.id)}
-            value={getCompanionId(companion.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] pbs-[env(safe-area-inset-top)]'
-            {...(layout.complementarySidebarState !== 'expanded' && { inert: 'true' })}
-          >
-            <ComplementarySidebarPanel
-              companion={companion}
-              activeId={activeId}
-              data={data}
-              hoistStatusbar={hoistStatusbar}
-            />
-          </Tabs.Tabpanel>
-        ))}
+        {activeId &&
+          companions.map((companion) => (
+            <Tabs.Tabpanel
+              key={getCompanionId(companion.id)}
+              value={getCompanionId(companion.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] pbs-[env(safe-area-inset-top)]'
+              {...(layout.complementarySidebarState !== 'expanded' && { inert: 'true' })}
+            >
+              <ComplementarySidebarPanel
+                companion={companion}
+                activeId={activeId}
+                data={data}
+                hoistStatusbar={hoistStatusbar}
+              />
+            </Tabs.Tabpanel>
+          ))}
       </Tabs.Root>
     </Main.ComplementarySidebar>
   );

package/src/components/Sidebar/Sidebar.tsx

@@ -9,15 +9,17 @@ import { type Label, Main } from '@dxos/react-ui';
 
 import { DeckCapabilities } from '../../capabilities';
 import { DECK_PLUGIN } from '../../meta';
+import { getMode } from '../../types';
 import { layoutAppliesTopbar, useBreakpoints, useHoistStatusbar } from '../../util';
 
 const label = ['sidebar title', { ns: DECK_PLUGIN }] satisfies Label;
 
 export const Sidebar = () => {
-  const { popoverAnchorId, activeDeck: current } = useCapability(DeckCapabilities.DeckState);
+  const { popoverAnchorId, activeDeck: current, deck } = useCapability(DeckCapabilities.DeckState);
   const breakpoint = useBreakpoints();
-  const topbar = layoutAppliesTopbar(breakpoint);
-  const hoistStatusbar = useHoistStatusbar(breakpoint);
+  const layoutMode = getMode(deck);
+  const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
+  const hoistStatusbar = useHoistStatusbar(breakpoint, layoutMode);
 
   const navigationData = useMemo(
     () => ({ popoverAnchorId, topbar, hoistStatusbar, current }),

package/src/translations.ts

@@ -45,6 +45,8 @@ export default [
         'increment end label': 'Move to the right',
         'show deck plank label': 'Return to deck',
         'show solo plank label': 'Maximize',
+        'exit fullscreen label': 'Exit fullscreen',
+        'show fullscreen plank label': 'Fullscreen',
         'close label': 'Close',
         'minify label': 'Minify',
         'open companion label': 'Open companion',

package/src/types.ts

@@ -4,6 +4,7 @@
 
 import { LayoutAction } from '@dxos/app-framework';
 import { S } from '@dxos/echo-schema';
+import { type DeepReadonly } from '@dxos/util';
 
 import { DECK_PLUGIN } from './meta';
 
@@ -61,13 +62,13 @@ export const defaultDeck: DeckState = {
   companionFrameSizing: {},
 };
 
-const LayoutMode = S.Literal('deck', 'solo', 'fullscreen');
+const LayoutMode = S.Literal('deck', 'solo', 'solo--fullscreen');
 export type LayoutMode = S.Schema.Type<typeof LayoutMode>;
 export const isLayoutMode = (value: any): value is LayoutMode => S.is(LayoutMode)(value);
 
-export const getMode = (deck: DeckState): LayoutMode => {
+export const getMode = (deck: DeckState | DeepReadonly<DeckState>): LayoutMode => {
   if (deck.solo) {
-    return deck.fullscreen ? 'fullscreen' : 'solo';
+    return deck.fullscreen ? 'solo--fullscreen' : 'solo';
   }
 
   return 'deck';
@@ -80,16 +81,17 @@ export const DeckPluginState = S.Struct({
   complementarySidebarPanel: S.optional(S.String),
 
   dialogOpen: S.Boolean,
-  /** Data to be passed to the dialog Surface. */
-  dialogContent: S.optional(S.Any),
   dialogBlockAlign: S.optional(S.Literal('start', 'center', 'end')),
   dialogType: S.optional(S.Literal('default', 'alert')),
+  /** Data to be passed to the dialog Surface. */
+  dialogContent: S.optional(S.Any),
 
   popoverOpen: S.Boolean,
   popoverSide: S.optional(S.Literal('top', 'right', 'bottom', 'left')),
+  popoverAnchor: S.optional(S.Any),
+  popoverAnchorId: S.optional(S.String),
   /** Data to be passed to the popover Surface. */
   popoverContent: S.optional(S.Any),
-  popoverAnchorId: S.optional(S.String),
 
   toasts: S.mutable(S.Array(LayoutAction.Toast)),
   currentUndoId: S.optional(S.String),
@@ -113,6 +115,7 @@ export namespace DeckAction {
     S.Literal('close').annotations({ description: 'Close the plank.' }),
     S.Literal('companion').annotations({ description: 'Open the companion plank.' }),
     S.Literal('solo').annotations({ description: 'Solo the plank.' }),
+    S.Literal('solo--fullscreen').annotations({ description: 'Fullscreen the plank.' }),
     S.Literal('increment-start').annotations({ description: 'Move the plank towards the start of the deck.' }),
     S.Literal('increment-end').annotations({ description: 'Move the plank towards the end of the deck.' }),
   );

package/src/util/layoutAppliesTopbar.ts

@@ -2,6 +2,12 @@
 // Copyright 2025 DXOS.org
 //
 
-export const layoutAppliesTopbar = (breakpoint: string) => {
-  return document.body.getAttribute('data-platform') === 'win' && breakpoint === 'desktop';
+import { type LayoutMode } from '../types';
+
+export const layoutAppliesTopbar = (breakpoint: string, layoutMode?: LayoutMode) => {
+  return (
+    document.body.getAttribute('data-platform') === 'win' &&
+    breakpoint === 'desktop' &&
+    layoutMode !== 'solo--fullscreen'
+  );
 };

package/src/util/useHoistStatusbar.ts

@@ -8,13 +8,18 @@ import { Capabilities, useCapability } from '@dxos/app-framework';
 import { useThemeContext } from '@dxos/react-ui';
 
 import { DECK_PLUGIN } from '../meta';
-import type { DeckSettingsProps } from '../types';
+import type { DeckSettingsProps, LayoutMode } from '../types';
 
-export const useHoistStatusbar = (breakpoint: string): boolean => {
+export const useHoistStatusbar = (breakpoint: string, layoutMode?: LayoutMode): boolean => {
   const enableStatusbar = useCapability(Capabilities.SettingsStore).getStore<DeckSettingsProps>(DECK_PLUGIN)!.value
     .enableStatusbar;
   const { safeAreaPadding } = useThemeContext();
   return useMemo(() => {
-    return breakpoint === 'desktop' && !!enableStatusbar && safeAreaPadding?.bottom === 0;
-  }, [enableStatusbar, breakpoint, safeAreaPadding?.bottom]);
+    return (
+      breakpoint === 'desktop' &&
+      layoutMode !== 'solo--fullscreen' &&
+      !!enableStatusbar &&
+      safeAreaPadding?.bottom === 0
+    );
+  }, [enableStatusbar, breakpoint, safeAreaPadding?.bottom, layoutMode]);
 };