Merge pull request #70 from Volumetrics-io/mobile-sync

Mobile sync

Author: a-type

admin/src/services/fetch.ts

@@ -3,6 +3,7 @@ import { AlefError } from '@alef/common';
 
 export const fetch = createFetch({
 	refreshSessionEndpoint: `${import.meta.env.VITE_PUBLIC_API_ORIGIN}/auth/refresh`,
+	logoutEndpoint: `${import.meta.env.VITE_PUBLIC_API_ORIGIN}/auth/logout`,
 	isSessionExpired: (res) => {
 		const asAlefError = AlefError.fromResponse(res);
 		if (asAlefError) {

app/src/components/desktop/DesktopUI.module.css

@@ -10,21 +10,21 @@
 	width: 100%;
 	background-color: var(--track);
 
-	--main-width: 400px;
-	--secondary-width: 300px;
+	--main-size: 400px;
+	--secondary-size: 300px;
 }
 
 .main {
 	grid-area: main;
 	max-height: 100%;
 	min-height: 0;
-	width: var(--main-width);
+	width: var(--main-size);
 	padding-top: 0.5rem;
 }
 
 .content {
 	grid-area: content;
-	min-width: var(--secondary-width);
+	min-width: var(--secondary-size);
 	border-left: var(--border);
 	border-right: var(--border);
 }
@@ -35,24 +35,36 @@
 
 .secondaryContent {
 	width: 0px;
-	transition: width var(--animation-duration) var(--bounce);
+	transition:
+		width var(--animation-duration) var(--bounce),
+		height var(--animation-duration) var(--bounce);
 	overflow: hidden;
 	position: relative;
 }
 
 .secondaryContentInner {
-	width: var(--secondary-width);
+	width: var(--secondary-size);
 	position: absolute;
 	top: 3rem;
 	left: 0;
 	height: calc(100% - 3rem);
 }
 
 .secondaryContentOpen {
-	width: var(--secondary-width);
+	width: var(--secondary-size);
 }
 
 .secondaryToggle {
+	left: -38px;
+	padding: 0.25rem;
+	position: absolute;
+	top: 0.75rem;
+}
+.secondaryContentOpen > .secondaryToggle {
+	left: auto;
+}
+.secondaryContentToggleLabel {
+	display: none;
 }
 
 .tabs {
@@ -64,23 +76,62 @@
 	.root {
 		grid-template-areas: 'main content' 'secondary content';
 		grid-template-columns: auto 1fr;
-		grid-template-rows: 1fr 1fr;
+		grid-template-rows: 1fr auto;
+		align-items: stretch;
+		--main-size: 100%;
+	}
+
+	.main {
+		padding-bottom: calc(46px + env(safe-area-inset-bottom, 0px));
 	}
 
 	.secondary {
 		border-top: var(--border);
 	}
 
 	.secondaryContent {
-		width: var(--secondary-width);
+		height: 0;
+		width: 100%;
+	}
+
+	.secondaryContentOpen {
+		height: var(--secondary-size);
 	}
 
 	.secondaryToggle {
-		display: none;
+		left: 0;
+		right: 0;
+		top: calc(-34px - env(safe-area-inset-bottom, 0px));
+		z-index: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.5rem;
+		border-radius: 0;
+		background-color: var(--paper);
+	}
+	.secondaryContentToggleLabel {
+		display: block;
+	}
+	.secondaryContentToggleIcon {
+		transform: rotate(90deg);
 	}
 
 	.secondaryContentInner {
-		height: 100%;
+		width: 100%;
+		height: var(--secondary-size);
 		top: 0;
 	}
 }
+
+@media (max-width: 768px) {
+	.root {
+		grid-template-areas: 'main' 'secondary';
+		grid-template-columns: 1fr;
+		grid-template-rows: 1fr auto;
+	}
+
+	.content {
+		display: none;
+	}
+}

app/src/components/desktop/DesktopUI.tsx

@@ -1,29 +1,43 @@
-import { StageMode, useDetailsOpen, useEditorStageMode } from '@/stores/editorStore';
+import { useMedia } from '@/hooks/useMedia';
+import { useDetailsOpen } from '@/stores/editorStore';
+import { useUndo } from '@/stores/roomStore';
+import { useEditorMode, useOnSelectionChanged } from '@/stores/roomStore/hooks/editing';
+import { EditorMode } from '@alef/common';
 import { Box, Frame, Icon, Tabs } from '@alef/sys';
 import clsx from 'clsx';
 import { ReactNode, Suspense } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
 import cls from './DesktopUI.module.css';
 import { DesktopAddFurniture } from './furniture/DesktopAddFurniture';
 import { DesktopFurnitureEditor } from './furniture/DesktopFurnitureEditor';
+import { DesktopFurnitureMobileInstructions } from './furniture/DesktopFurnitureMobileInstructions';
 import { DesktopPlacedFurnitureList } from './furniture/DesktopPlacedFurnitureList';
 import { DesktopAddLayout } from './layouts/DesktopAddLayout';
 import { DesktopLayoutEditor } from './layouts/DesktopLayoutEditor';
 import { DesktopLayoutsPicker } from './layouts/DesktopLayoutsPicker';
 import { DesktopLightEditor } from './lighting/DesktopLightEditor';
 import { DesktopLightsMainEditor } from './lighting/DesktopLightsMainEditor';
+import { HeadsetConnectedIndicator } from './presence/HeadsetConnectedIndicator';
 
 export interface DesktopUIProps {
 	children?: ReactNode;
 }
 
 export function DesktopUI({ children }: DesktopUIProps) {
-	const [mode, setMode] = useEditorStageMode();
+	const [mode, setMode] = useEditorMode();
+	// don't bother rendering content, it won't be visible.
+	const isMobile = useMedia('(max-width: 768px)');
+
+	// bind ctrl+z to undo, ctrl+shift+z to redo
+	const { undo, redo } = useUndo();
+	useHotkeys('mod+z', undo);
+	useHotkeys('mod+shift+z, mod+y', redo);
 
 	return (
 		<Box asChild className={cls.root}>
-			<Tabs value={mode || 'layouts'} onValueChange={(m) => setMode(m as StageMode)}>
+			<Tabs value={mode || 'layouts'} onValueChange={(m) => setMode(m as EditorMode)}>
 				<DesktopUIMain />
-				<Box className={cls.content}>{children}</Box>
+				{!isMobile && <Box className={cls.content}>{children}</Box>}
 				<DesktopUISecondary />
 			</Tabs>
 		</Box>
@@ -33,6 +47,9 @@ export function DesktopUI({ children }: DesktopUIProps) {
 function DesktopUIMain() {
 	return (
 		<Box className={cls.main} stacked>
+			<Box p="small" layout="center center">
+				<HeadsetConnectedIndicator />
+			</Box>
 			<Tabs.List className={cls.tabs}>
 				<Tabs.Trigger value="layouts">
 					<Icon name="house" />
@@ -55,7 +72,10 @@ function DesktopUIMain() {
 			<Tabs.Content value="furniture">
 				<Suspense>
 					<Box p="small" full stacked justify="between">
-						<DesktopPlacedFurnitureList />
+						<Box stacked gapped>
+							<DesktopFurnitureMobileInstructions />
+							<DesktopPlacedFurnitureList />
+						</Box>
 						<DesktopAddFurniture />
 					</Box>
 				</Suspense>
@@ -69,10 +89,13 @@ function DesktopUIMain() {
 
 function DesktopUISecondary() {
 	const [open, setOpen] = useDetailsOpen();
+	// open details panel when selection changes
+	useOnSelectionChanged(() => setOpen(true));
 	return (
 		<Box className={cls.secondary}>
-			<Frame float="top-left" style={{ left: open ? undefined : -38, padding: '0.25rem' }} className={cls.secondaryToggle}>
-				<Icon name={open ? 'panel-right-close' : 'panel-right-open'} onClick={() => setOpen(!open)} />
+			<Frame float="top-left" className={cls.secondaryToggle} onClick={() => setOpen(!open)} aria-label="Toggle details panel" tabIndex={0} role="button">
+				<Icon name={open ? 'panel-right-close' : 'panel-right-open'} className={cls.secondaryContentToggleIcon} />
+				<span className={cls.secondaryContentToggleLabel}>Details</span>
 			</Frame>
 			<Box className={clsx(cls.secondaryContent, open && cls.secondaryContentOpen)}>
 				<Box className={cls.secondaryContentInner}>

app/src/components/desktop/furniture/DesktopAddFurniture.tsx

@@ -1,9 +1,15 @@
+import { useSetPlacingFurniture } from '@/stores/roomStore/hooks/editing';
 import { Button, Dialog, Icon } from '@alef/sys';
 import { useState } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
 import { DesktopOnlineFurniturePicker } from './DesktopOnlineFurniturePicker';
 
 export function DesktopAddFurniture() {
 	const [open, setOpen] = useState(false);
+	const setSelectedModelId = useSetPlacingFurniture();
+	useHotkeys('esc', () => {
+		setSelectedModelId(null);
+	});
 
 	return (
 		<>

app/src/components/desktop/furniture/DesktopFurnitureCollection.tsx

@@ -1,8 +1,7 @@
 import { FurnitureItem } from '@/services/publicApi/furnitureHooks';
-import { useSetSelectedModelId } from '@/stores/editorStore';
+import { useSetPlacingFurniture } from '@/stores/roomStore/hooks/editing';
 import { PrefixedId } from '@alef/common';
 import { Button, Card, CardGrid, Icon, ScrollArea } from '@alef/sys';
-import { useHotkeys } from 'react-hotkeys-hook';
 import cls from './DesktopFurnitureCollection.module.css';
 
 export interface DesktopFurnitureCollectionProps {
@@ -13,11 +12,6 @@ export interface DesktopFurnitureCollectionProps {
 }
 
 export function DesktopFurnitureCollection({ furniture, hasMore, onLoadMore, onSelect }: DesktopFurnitureCollectionProps) {
-	const setSelectedModelId = useSetSelectedModelId();
-	useHotkeys('esc', () => {
-		setSelectedModelId(null);
-	});
-
 	return (
 		<ScrollArea>
 			<CardGrid p="small">
@@ -36,7 +30,7 @@ export function DesktopFurnitureCollection({ furniture, hasMore, onLoadMore, onS
 }
 
 function DesktopFurnitureCard({ item, onSelect }: { item: FurnitureItem; onSelect?: (id: PrefixedId<'f'>) => void }) {
-	const setSelectedModelId = useSetSelectedModelId();
+	const setSelectedModelId = useSetPlacingFurniture();
 
 	const add = () => {
 		setSelectedModelId(item.id);

app/src/components/desktop/furniture/DesktopFurnitureEditor.tsx

@@ -1,12 +1,12 @@
-import { useEditorStore } from '@/stores/editorStore';
 import { useDeleteFurniturePlacement, useFurniturePlacement, useFurnitureQuickSwap } from '@/stores/roomStore';
-import { isPrefixedId, RoomFurniturePlacement } from '@alef/common';
+import { useSelectedFurniturePlacementId } from '@/stores/roomStore/hooks/editing';
+import { RoomFurniturePlacement } from '@alef/common';
 import { Box, Button, Heading, Icon, Text } from '@alef/sys';
 import { Suspense } from 'react';
 import { FurnitureName } from './FurnitureName';
 
 export function DesktopFurnitureEditor() {
-	const selectedId = useEditorStore((s) => (s.selectedId && isPrefixedId(s.selectedId, 'fp') ? s.selectedId : null));
+	const selectedId = useSelectedFurniturePlacementId();
 	const placement = useFurniturePlacement(selectedId || 'fp-none');
 
 	if (!placement) {

app/src/components/desktop/furniture/DesktopFurnitureMobileInstructions.module.css

@@ -0,0 +1,8 @@
+.root {
+	flex-shrink: 0;
+}
+@media (min-width: 768px) {
+	.root {
+		display: none;
+	}
+}

app/src/components/desktop/furniture/DesktopFurnitureMobileInstructions.tsx

@@ -0,0 +1,26 @@
+import { usePlacingFurnitureId } from '@/stores/roomStore/hooks/editing';
+import { Box, Frame, Heading, Icon, Text } from '@alef/sys';
+import { useIsHeadsetConnected } from '../presence/hooks';
+import cls from './DesktopFurnitureMobileInstructions.module.css';
+
+export interface DesktopFurnitureMobileInstructionsProps {}
+
+export function DesktopFurnitureMobileInstructions({}: DesktopFurnitureMobileInstructionsProps) {
+	const isHeadsetConnected = useIsHeadsetConnected();
+	const placingFurniture = !!usePlacingFurnitureId();
+
+	if (!isHeadsetConnected || !placingFurniture) {
+		// advice is not relevant...
+		return null;
+	}
+
+	return (
+		<Frame p="small" stacked gapped color="primary" className={cls.root}>
+			<Box gapped>
+				<Icon name="glasses" />
+				<Heading level={4}>Continue in headset</Heading>
+			</Box>
+			<Text>Use your controller or hand to point and place this furniture</Text>
+		</Frame>
+	);
+}

app/src/components/desktop/furniture/DesktopPlacedFurnitureList.tsx

@@ -1,6 +1,6 @@
 import { useFurnitureDetails } from '@/services/publicApi/furnitureHooks';
-import { useIsSelected, useSelect } from '@/stores/editorStore';
 import { useFurniturePlacement, useFurniturePlacementIds } from '@/stores/roomStore';
+import { useIsSelected, useSelect } from '@/stores/roomStore/hooks/editing';
 import { PrefixedId } from '@alef/common';
 import { Box, BoxProps, Button, Icon, ScrollArea } from '@alef/sys';
 import { Suspense } from 'react';

app/src/components/desktop/lighting/DesktopLightEditor.tsx

@@ -1,10 +1,10 @@
-import { useEditorStore } from '@/stores/editorStore';
 import { useDeleteLightPlacement, useLightPlacement } from '@/stores/roomStore';
-import { isPrefixedId, RoomLightPlacement } from '@alef/common';
+import { useSelectedLightPlacementId } from '@/stores/roomStore/hooks/editing';
+import { RoomLightPlacement } from '@alef/common';
 import { Box, Button, Heading, Icon } from '@alef/sys';
 
 export function DesktopLightEditor() {
-	const selectedId = useEditorStore((s) => (s.selectedId && isPrefixedId(s.selectedId, 'lp') ? s.selectedId : null));
+	const selectedId = useSelectedLightPlacementId();
 	const placement = useLightPlacement(selectedId || 'lp-none');
 
 	if (!placement) {