@dxos/plugin-simple-layout 0.8.4-main.9735255 → 0.8.4-main.bcb3aa67d6

package/src/components/Dialog/Dialog.tsx

@@ -4,11 +4,11 @@
 
 import React from 'react';
 
-import { Surface } from '@dxos/app-framework/react';
+import { Surface } from '@dxos/app-framework/ui';
 import { AlertDialog, Dialog as NaturalDialog } from '@dxos/react-ui';
+import { ErrorFallback } from '@dxos/react-ui';
 
-import { useSimpleLayoutState } from '../../hooks';
-import { ContentError } from '../ContentError';
+import { useSimpleLayoutState } from '#hooks';
 
 export const Dialog = () => {
   const { state, updateState } = useSimpleLayoutState();
@@ -20,17 +20,17 @@ export const Dialog = () => {
     <DialogRoot
       modal={state.dialogBlockAlign !== 'end'}
       open={state.dialogOpen}
-      onOpenChange={(nextOpen) => updateState((s) => ({ ...s, dialogOpen: nextOpen }))}
+      onOpenChange={(nextOpen) => updateState((state) => ({ ...state, dialogOpen: nextOpen }))}
     >
       {state.dialogBlockAlign === 'end' ? (
-        <Surface role='dialog' data={state.dialogContent} limit={1} fallback={ContentError} />
+        <Surface.Surface role='dialog' data={state.dialogContent} limit={1} fallback={ErrorFallback} />
       ) : (
         <DialogOverlay
           blockAlign={state.dialogBlockAlign}
           classNames={state.dialogOverlayClasses}
           style={state.dialogOverlayStyle}
         >
-          <Surface role='dialog' data={state.dialogContent} limit={1} fallback={ContentError} />
+          <Surface.Surface role='dialog' data={state.dialogContent} limit={1} fallback={ErrorFallback} />
         </DialogOverlay>
       )}
     </DialogRoot>

package/src/components/Home/Home.tsx

@@ -4,17 +4,19 @@
 
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 
-import { Common } from '@dxos/app-framework';
-import { useAppGraph, useOperationInvoker } from '@dxos/app-framework/react';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { Node, useConnections } from '@dxos/plugin-graph';
-import { Avatar, Icon, Toolbar, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { Card, Layout, Mosaic, type StackTileComponent } from '@dxos/react-ui-mosaic';
-import { SearchList, useSearchListItem, useSearchListResults } from '@dxos/react-ui-searchlist';
+import { Avatar, Icon, ScrollArea, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Card } from '@dxos/react-ui';
+import { Mosaic, type MosaicStackTileComponent } from '@dxos/react-ui-mosaic';
+import { SearchPanel, useSearchListItem, useSearchListResults } from '@dxos/react-ui-search';
 import { mx } from '@dxos/ui-theme';
-import { byPosition } from '@dxos/util';
+import { byPosition, getHostPlatform, isTauri } from '@dxos/util';
 
-import { meta } from '../../meta';
-import { useLoadDescendents } from '../hooks';
+import { meta } from '#meta';
+import { useExpandPath } from '../hooks';
 
 export type HomeProps = {};
 
@@ -26,7 +28,7 @@ export const Home = (_: HomeProps) => {
   const userAccountItem = useItemsByDisposition('user-account')[0];
   const pinnedItems = useItemsByDisposition('pin-end', true);
   const workspaceItems = useItemsByDisposition('workspace');
-  useLoadDescendents(Node.RootId);
+  useExpandPath(Node.RootId);
 
   const items = useMemo(
     () => [...(userAccountItem ? [userAccountItem] : []), ...pinnedItems, ...workspaceItems],
@@ -38,44 +40,47 @@ export const Home = (_: HomeProps) => {
     extract: (node) => toLocalizedString(node.properties.label, t),
   });
 
+  const autoFocus = !isTauri() || getHostPlatform() !== 'ios';
+
   return (
-    <Layout.Main toolbar>
-      <SearchList.Root onSearch={handleSearch}>
-        <Toolbar.Root>
-          <SearchList.Input placeholder={t('search placeholder')} autoFocus />
-        </Toolbar.Root>
-        <SearchList.Content>
-          <Mosaic.Container asChild>
-            <Mosaic.Viewport padding>
-              <Mosaic.Stack items={results} getId={(node) => node.id} Tile={WorkspaceTile} />
-            </Mosaic.Viewport>
-          </Mosaic.Container>
-        </SearchList.Content>
-      </SearchList.Root>
-    </Layout.Main>
+    <SearchPanel onSearch={handleSearch}>
+      <Mosaic.Container asChild>
+        <ScrollArea.Root centered padding thin>
+          <ScrollArea.Viewport>
+            <Mosaic.Stack
+              classNames='gap-1'
+              draggable={false}
+              items={results}
+              getId={(item) => item.id}
+              Tile={WorkspaceTile}
+            />
+          </ScrollArea.Viewport>
+        </ScrollArea.Root>
+      </Mosaic.Container>
+    </SearchPanel>
   );
 };
 
-const WorkspaceTile: StackTileComponent<Node.Node> = ({ data }) => {
+const WorkspaceTile: MosaicStackTileComponent<Node.Node> = (props) => {
+  const data = props.data;
   const { t } = useTranslation(meta.id);
   const { invokePromise } = useOperationInvoker();
   const { selectedValue, registerItem, unregisterItem } = useSearchListItem();
-  const ref = useRef<HTMLDivElement>(null);
+  const name = toLocalizedString(data.properties.label, t);
+  const isSelected = selectedValue === data.id;
+  const cardRef = useRef<HTMLDivElement>(null);
+
+  useExpandPath(data.id);
 
   const handleSelect = useCallback(
-    () => invokePromise(Common.LayoutOperation.SwitchWorkspace, { subject: data.id }),
+    () => invokePromise(LayoutOperation.SwitchWorkspace, { subject: data.id }),
     [invokePromise, data.id],
   );
 
-  useLoadDescendents(data.id);
-
-  const name = toLocalizedString(data.properties.label, t);
-  const isSelected = selectedValue === data.id;
-
   // Register this workspace with the search context.
   useEffect(() => {
-    if (ref.current) {
-      registerItem(data.id, ref.current, handleSelect);
+    if (cardRef.current) {
+      registerItem(data.id, cardRef.current, handleSelect);
     }
 
     return () => unregisterItem(data.id);
@@ -83,32 +88,32 @@ const WorkspaceTile: StackTileComponent<Node.Node> = ({ data }) => {
 
   // Scroll into view when selected.
   useEffect(() => {
-    if (isSelected && ref.current) {
-      ref.current.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+    if (isSelected && cardRef.current) {
+      cardRef.current.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
     }
   }, [isSelected]);
 
   return (
     <Card.Root
-      ref={ref}
       role='button'
       fullWidth
       tabIndex={-1} // TODO(burdon): Use Mosaic.Focus.
       data-selected={isSelected}
-      classNames={mx('dx-focus-ring', isSelected && 'bg-hoverOverlay')}
+      classNames={mx('dx-focus-ring', isSelected && 'bg-hover-overlay')}
       onClick={handleSelect}
+      ref={cardRef}
     >
-      <Card.Toolbar density='coarse'>
+      <Card.Toolbar density='fine'>
         <Avatar.Root>
           <Avatar.Content
             icon={data.properties.icon}
             hue={data.properties.hue}
             hueVariant='transparent'
             variant='square'
-            size={12}
+            size={8}
             fallback={name}
           />
-          <Avatar.Label>{name}</Avatar.Label>
+          <Avatar.Label classNames='cursor-pointer'>{name}</Avatar.Label>
           <Icon icon='ph--caret-right--regular' />
         </Avatar.Root>
       </Card.Toolbar>
@@ -124,7 +129,9 @@ const filterItems = (node: Node.Node, disposition: string) => {
 /** Returns root-level items filtered by disposition. */
 const useItemsByDisposition = (disposition: string, sort = false) => {
   const { graph } = useAppGraph();
-  const connections = useConnections(graph, Node.RootId);
-  const filtered = connections.filter((node) => filterItems(node, disposition));
-  return sort ? filtered.toSorted((a, b) => byPosition(a.properties, b.properties)) : filtered;
+  const connections = useConnections(graph, Node.RootId, 'child');
+  return useMemo(() => {
+    const filtered = connections.filter((node) => filterItems(node, disposition));
+    return sort ? filtered.toSorted((a, b) => byPosition(a.properties, b.properties)) : filtered;
+  }, [connections, disposition, sort]);
 };

package/src/components/{ContentLoading.stories.tsx → Loading/Loading.stories.tsx}

@@ -6,16 +6,16 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { withTheme } from '@dxos/react-ui/testing';
 
-import { ContentLoading } from './ContentLoading';
+import { Loading } from './Loading';
 
 const meta = {
-  title: 'plugins/plugin-simple-layout/ContentLoading',
-  component: ContentLoading,
-  decorators: [withTheme],
+  title: 'plugins/plugin-simple-layout/components/Loading',
+  component: Loading,
+  decorators: [withTheme()],
   parameters: {
     layout: 'centered',
   },
-} satisfies Meta<typeof ContentLoading>;
+} satisfies Meta<typeof Loading>;
 
 export default meta;
 

package/src/components/{ContentLoading.tsx → Loading/Loading.tsx}

@@ -5,6 +5,6 @@
 import React from 'react';
 
 // TODO(burdon): Show skeleton: https://github.com/dxos/dxos/issues/8259
-export const ContentLoading = () => {
-  return <div role='none' className='grid place-items-center attention-surface' />;
+export const Loading = () => {
+  return <div role='none' className='grid place-items-center dx-attention-surface' />;
 };

package/src/components/Loading/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './Loading';

package/src/components/MobileLayout/MobileLayout.stories.tsx

@@ -0,0 +1,133 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { type PropsWithChildren, useEffect, useState } from 'react';
+
+import { addEventListener, combine } from '@dxos/async';
+import { Column, Flex, Input, Panel, Splitter, type SplitterMode, Toolbar } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { MobileLayout, type MobileLayoutRootProps } from './MobileLayout';
+
+/**
+ * Simulate ios keyboard.
+ */
+const WithKeyboard = ({ children }: PropsWithChildren) => {
+  const [keyboardOpen, setKeyboardOpen] = useState(false);
+
+  useEffect(() => {
+    return combine(
+      addEventListener(document, 'focusin', (event: FocusEvent) => {
+        const target = event.target as HTMLElement;
+        if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
+          setKeyboardOpen(true);
+        }
+      }),
+      addEventListener(document, 'focusout', (event: FocusEvent) => {
+        const target = event.target as HTMLElement;
+        if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
+          setKeyboardOpen(false);
+        }
+      }),
+    );
+  }, []);
+
+  useEffect(() => {
+    const keyboardHeight = keyboardOpen ? 300 : 0;
+    document.documentElement.style.setProperty('--kb-height', `${keyboardHeight}px`);
+    document.documentElement.style.setProperty('--kb-open', keyboardOpen ? '1' : '0');
+
+    // Dispatch custom keyboard event that useIOSKeyboard listens for.
+    window.dispatchEvent(
+      new CustomEvent('keyboard', {
+        detail: {
+          type: keyboardOpen ? 'show' : 'hide',
+          height: keyboardHeight,
+          duration: 300,
+        },
+      }),
+    );
+  }, [keyboardOpen]);
+
+  return <div className='h-screen relative'>{children}</div>;
+};
+
+const StoryPanel = ({ children, label }: PropsWithChildren<{ label: string }>) => {
+  return (
+    <Panel.Root>
+      <Panel.Toolbar asChild>
+        <Toolbar.Root>
+          {label}
+          <Toolbar.Separator />
+          {children}
+        </Toolbar.Root>
+      </Panel.Toolbar>
+      <Panel.Content asChild>
+        <Column.Root gutter='xs' classNames='py-form-chrome'>
+          <Column.Content>
+            <Flex column>
+              <Input.Root>
+                <Input.TextInput placeholder={label} />
+              </Input.Root>
+            </Flex>
+          </Column.Content>
+        </Column.Root>
+      </Panel.Content>
+    </Panel.Root>
+  );
+};
+
+const DefaultStory = () => {
+  const [splitterMode, setSplitterMode] = useState<SplitterMode>('upper');
+  const [keyboardOpen, setKeyboardOpen] = useState(false);
+
+  useEffect(() => {
+    setSplitterMode(splitterMode === 'both' ? 'lower' : splitterMode);
+  }, [keyboardOpen]);
+
+  return (
+    <WithKeyboard>
+      <MobileLayout.Root onKeyboardOpenChange={setKeyboardOpen}>
+        <MobileLayout.Panel safe={{ top: true, bottom: splitterMode === 'upper' }}>
+          <Splitter.Root mode={splitterMode} ratio={0.5}>
+            <Splitter.Panel position='upper'>
+              <StoryPanel label='Main'>
+                {splitterMode === 'upper' && (
+                  <Toolbar.IconButton icon='ph--plus--regular' label='Open' onClick={() => setSplitterMode('both')} />
+                )}
+              </StoryPanel>
+            </Splitter.Panel>
+            <Splitter.Panel position='lower'>
+              <StoryPanel label='Drawer'>
+                <Toolbar.IconButton
+                  icon={splitterMode === 'lower' ? 'ph--arrow-down--regular' : 'ph--arrow-up--regular'}
+                  label={splitterMode === 'lower' ? 'Collapse' : 'Expand'}
+                  onClick={() => setSplitterMode((splitterMode) => (splitterMode === 'both' ? 'lower' : 'both'))}
+                />
+                <Toolbar.IconButton icon='ph--x--regular' label='Close' onClick={() => setSplitterMode('upper')} />
+              </StoryPanel>
+            </Splitter.Panel>
+          </Splitter.Root>
+        </MobileLayout.Panel>
+      </MobileLayout.Root>
+    </WithKeyboard>
+  );
+};
+
+const meta: Meta<MobileLayoutRootProps> = {
+  title: 'plugins/plugin-simple-layout/components/MobileLayout',
+  component: MobileLayout.Root,
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'column', classNames: 'relative' })],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<MobileLayoutRootProps>;
+
+export const Default: Story = {};