desktop selection

frontend/src/DesktopWorkspace.jsx

@@ -11,6 +11,7 @@ import { useAssetNavigator } from './hooks/useAssetNavigator';
 import { ArrowLeftIcon, ArrowRightIcon } from './ui/icons';
 import { createDocumentsTableHeaderActions } from './documents/DocumentsPanel';
 import createWorkspaceSurfaceConfig from './documents/workspaceHeader';
+import DetailPanel from './detail/DetailPanel';
 import { clamp, formatTransform } from './desktop/math';
 import { preventAll } from './desktop/events';
 import useDocumentDrag from './desktop/useDocumentDrag';
@@ -565,11 +566,15 @@ const DesktopWorkspace = ({
   documents = [],
   searchResults = null,
   onDocumentOpen,
+  onInspectDocument = null,
+  onDocumentPointerSelect = null,
   onAssignTagToDocument = null,
   onRemoveTagFromDocument = null,
   ensureAssetUrl = null,
   getDocumentAsset = () => null,
   activeTagIds = [],
+  selectedDocumentIds = [],
+  onClearSelection = null,
 }) => {
   const items = useMemo(() => (searchResults ? searchResults : documents), [documents, searchResults]);
 
@@ -1708,6 +1713,8 @@ const syncLayoutSnapshot = useCallback(() => {
       pendingTagDocId,
       pendingRemovalTag,
       onDocumentOpen,
+      onInspectDocument,
+      onDocumentPointerSelect,
       ensureAssetUrl,
       getDocumentAsset,
       handleNavigatorSnapshot,
@@ -1724,6 +1731,8 @@ const syncLayoutSnapshot = useCallback(() => {
       closeOverlay,
       overlayOriginRect,
       overlayOriginTransform,
+      selectedDocumentIds,
+      onClearSelection,
     }),
     [
       activeTagSet,
@@ -1753,6 +1762,8 @@ const syncLayoutSnapshot = useCallback(() => {
       layoutSnapshot,
       docSizeVersion,
       onDocumentOpen,
+      onInspectDocument,
+      onDocumentPointerSelect,
       openOverlayForDoc,
       overlayDisplay,
       overlayOriginRect,
@@ -1766,6 +1777,8 @@ const syncLayoutSnapshot = useCallback(() => {
       tagDropTargetId,
       visibleDocIds,
       documentLookup,
+      selectedDocumentIds,
+      onClearSelection,
     ],
   );
 
@@ -1809,6 +1822,9 @@ const DesktopWorkspaceView = () => {
     closeOverlay,
     overlayOriginRect,
     overlayOriginTransform,
+    onDocumentPointerSelect,
+    selectedDocumentIds,
+    onClearSelection,
   } = useDesktopContext();
 
   const { handlePointerDown, handlePointerMove, handlePointerUp, handlePointerCancel } =
@@ -1818,13 +1834,25 @@ const DesktopWorkspaceView = () => {
 
   return (
     <>
-      <div className="desk-shell">
+      <div
+        className="desk-shell"
+        onPointerDown={(event) => {
+          if (event.target === event.currentTarget && typeof onClearSelection === 'function') {
+            onClearSelection();
+          }
+        }}
+      >
         <div
           className="desk-canvas"
           ref={containerRef}
           onDragOver={handleCanvasDragOver}
           onDragLeave={handleCanvasDragLeave}
           onDrop={handleCanvasDrop}
+          onPointerDown={(event) => {
+            if (event.target === event.currentTarget && typeof onClearSelection === 'function') {
+              onClearSelection();
+            }
+          }}
         >
           {!allSizesReady ? (
             <div className="desk-empty">
@@ -1882,6 +1910,8 @@ const DesktopWorkspaceView = () => {
               if (dropActive) itemClasses.push('is-tag-target');
               if (dropPending) itemClasses.push('is-tag-pending');
               if (!matchesFilter) itemClasses.push('is-filtered-out');
+              const isSelected = selectedDocumentIds.includes(doc.id);
+              if (isSelected) itemClasses.push('is-selected');
               const docTagTokens = docTagKeys.join(' ');
               return (
                 <div
@@ -1899,7 +1929,12 @@ const DesktopWorkspaceView = () => {
                       itemRefs.current.delete(doc.id);
                     }
                   }}
-                  onPointerDown={(event) => handlePointerDown(event, doc.id)}
+                  onPointerDown={(event) => {
+                    if (typeof onDocumentPointerSelect === 'function') {
+                      onDocumentPointerSelect(doc.id, event);
+                    }
+                    handlePointerDown(event, doc.id);
+                  }}
                   onPointerMove={handlePointerMove}
                   onPointerUp={handlePointerUp}
                   onPointerCancel={handlePointerCancel}
@@ -1983,6 +2018,8 @@ export const createDesktopSurface = ({
   renderSidebarToggle,
   parentBreadcrumb,
   onNavigateParent,
+  detailProps = null,
+  detailOpen = false,
 }) => {
   if (!workspaceProps) {
     return null;
@@ -2007,6 +2044,7 @@ export const createDesktopSurface = ({
   });
 
   const sidebarToggle = renderSidebarToggle ? renderSidebarToggle() : null;
+  const detail = detailOpen && detailProps ? <DetailPanel {...detailProps} /> : null;
   const surfaceConfig = createWorkspaceSurfaceConfig({
     key: 'workspace',
     variant: 'workspace',
@@ -2018,10 +2056,11 @@ export const createDesktopSurface = ({
     actions,
     breadcrumbs: workspaceProps?.breadcrumbs || null,
     content: <DesktopWorkspace {...workspaceProps} />,
+    detail,
   });
 
   return {
     ...surfaceConfig,
-    supportsDetail: false,
+    supportsDetail: Boolean(detailProps),
   };
 };