WPB-29385: Preview moving selected Drive items

apps/webapp/src/i18n/en-US.json

@@ -388,6 +388,13 @@
   "cameraStatusOff": "off",
   "cameraStatusOn": "on",
   "cells.breadcrumb.files": "{conversationName} files",
+  "cells.bulkMove.currentDestination": "Current destination: {destination}",
+  "cells.bulkMove.currentLocation": "Current location",
+  "cells.bulkMove.drive": "Drive",
+  "cells.bulkMove.previewDescription": "Preview only. No items will be moved. Destinations stay within this conversation’s Drive.",
+  "cells.bulkMove.previewTitle": "Preview move of {count} items",
+  "cells.bulkMove.selected": "Selected",
+  "cells.bulkMove.selectedItems": "Selected items",
   "cells.clearFilters.button": "Clear all",
   "cells.deleteModal.description": "This will permanently delete the file {name} for all participants.",
   "cells.deleteModal.error": "Something went wrong, please try again later and refresh the list.",
@@ -442,6 +449,7 @@
   "cells.moveNodeModal.loading": "Loading folders…",
   "cells.moveNodeModal.moveButton": "Move 1 Item Here",
   "cells.moveNodeModal.moveTitle": "Move to folder",
+  "cells.moveNodeModal.openFolder": "Open {folderName}",
   "cells.moveToRecycleBinModal.button": "Delete",
   "cells.moveToRecycleBinModal.file.description": "The file {name} will move to this conversation's recycling bin.",
   "cells.newItemMenu.button": "New",
@@ -521,6 +529,7 @@
   "cells.search.results": "Search results",
   "cells.search.resultsIn": "Search results in {folderName}",
   "cells.selection.clear": "Clear selection",
+  "cells.selection.move": "Move",
   "cells.selection.selectItem": "Select {name}",
   "cells.selection.selectedCount": "{count} selected",
   "cells.selfDeletingMessage.info": "The feature is not available for conversations with a shared Drive.",

apps/webapp/src/script/components/conversation/conversationCells/cellsTable/cellsBulkMovePreviewModal/cellsBulkMovePreviewModal.tsx

@@ -0,0 +1,61 @@
+/*
+ * Wire
+ * Copyright (C) 2026 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {QualifiedId} from '@wireapp/api-client/lib/user/';
+
+import {CellsRepository} from 'Repositories/cells/cellsRepository';
+import {CellNode} from 'src/script/types/cellNode';
+
+import {CellsBulkMovePreviewPresentation} from './cellsBulkMovePreviewPresentation';
+import {useBulkMoveDestinationSelection} from './useBulkMoveDestinationSelection';
+
+interface CellsBulkMovePreviewModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  selectedNodes: CellNode[];
+  cellsRepository: CellsRepository;
+  conversationQualifiedId: QualifiedId;
+  conversationName: string;
+}
+
+export const CellsBulkMovePreviewModal = ({
+  isOpen,
+  onClose,
+  selectedNodes,
+  cellsRepository,
+  conversationQualifiedId,
+  conversationName,
+}: CellsBulkMovePreviewModalProps) => {
+  const destination = useBulkMoveDestinationSelection({
+    isOpen,
+    selectedNodes,
+    cellsRepository,
+    conversationQualifiedId,
+  });
+
+  return (
+    <CellsBulkMovePreviewPresentation
+      isOpen={isOpen}
+      onClose={onClose}
+      selectedNodes={selectedNodes}
+      conversationName={conversationName}
+      destination={destination}
+    />
+  );
+};

apps/webapp/src/script/components/conversation/conversationCells/cellsTable/cellsBulkMovePreviewModal/cellsBulkMovePreviewPresentation.tsx

@@ -0,0 +1,79 @@
+/*
+ * Wire
+ * Copyright (C) 2026 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {CellsModal} from 'Components/conversation/conversationCells/common/cellsModal/cellsModal';
+import {useApplicationContext} from 'src/script/page/rootProvider';
+import {CellNode} from 'src/script/types/cellNode';
+
+import {BulkMoveDestinationSelection} from './useBulkMoveDestinationSelection';
+
+import {CellsFoldersListModalContent} from '../cellsTableColumns/cellsTableRowOptions/cellsMoveNodeModal/cellsFoldersListModalContent/cellsFoldersListModalContent';
+
+interface CellsBulkMovePreviewPresentationProps {
+  isOpen: boolean;
+  onClose: () => void;
+  selectedNodes: CellNode[];
+  conversationName: string;
+  destination: BulkMoveDestinationSelection;
+}
+
+export const CellsBulkMovePreviewPresentation = ({
+  isOpen,
+  onClose,
+  selectedNodes,
+  conversationName,
+  destination,
+}: CellsBulkMovePreviewPresentationProps) => {
+  const {translate} = useApplicationContext();
+
+  return (
+    <CellsModal isOpen={isOpen} onClose={onClose} size="large">
+      <CellsModal.Header>{translate('cells.bulkMove.previewTitle', {count: selectedNodes.length})}</CellsModal.Header>
+      <p>{translate('cells.bulkMove.previewDescription')}</p>
+      <section aria-labelledby="bulk-move-selected-items-heading">
+        <h3 id="bulk-move-selected-items-heading">{translate('cells.bulkMove.selectedItems')}</h3>
+        <ul>
+          {selectedNodes.map(node => {
+            return <li key={node.id}>{node.name}</li>;
+          })}
+        </ul>
+      </section>
+      <p aria-live="polite">
+        {translate('cells.bulkMove.currentDestination', {destination: destination.currentDestination})}
+      </p>
+      <CellsFoldersListModalContent
+        items={destination.folders}
+        status={destination.status}
+        shouldShowLoadingSpinner={destination.shouldShowLoadingSpinner}
+        conversationName={conversationName}
+        currentPath={destination.currentPath}
+        onPathChange={destination.handlePathChange}
+        onSelectDestination={destination.handleDestinationSelect}
+        selectedDestinationPath={destination.selectedDestinationPath}
+        disabledDestinationPaths={destination.disabledDestinationPaths}
+        disabledDestinationLabels={destination.disabledDestinationLabels}
+      />
+      <CellsModal.Actions>
+        <CellsModal.SecondaryButton onClick={onClose}>
+          {translate('cells.moveNodeModal.cancelButton')}
+        </CellsModal.SecondaryButton>
+      </CellsModal.Actions>
+    </CellsModal>
+  );
+};

apps/webapp/src/script/components/conversation/conversationCells/cellsTable/cellsBulkMovePreviewModal/useBulkMoveDestinationSelection.ts

@@ -0,0 +1,138 @@
+/*
+ * Wire
+ * Copyright (C) 2026 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {useMemo, useState} from 'react';
+
+import {QualifiedId} from '@wireapp/api-client/lib/user/';
+
+import {getCellsFilesPath} from 'Components/conversation/conversationCells/common/getCellsFilesPath/getCellsFilesPath';
+import {CellsRepository} from 'Repositories/cells/cellsRepository';
+import {useApplicationContext} from 'src/script/page/rootProvider';
+import {CellNode, CellNodeType} from 'src/script/types/cellNode';
+
+import {useGetCellsFolders} from '../cellsTableColumns/cellsTableRowOptions/cellsMoveNodeModal/useGetCellsFolders/useGetCellsFolders';
+
+interface UseBulkMoveDestinationSelectionProps {
+  isOpen: boolean;
+  selectedNodes: CellNode[];
+  cellsRepository: CellsRepository;
+  conversationQualifiedId: QualifiedId;
+}
+
+export interface BulkMoveDestinationSelection {
+  currentDestination: string;
+  currentPath: string;
+  disabledDestinationLabels: Readonly<Record<string, string>>;
+  disabledDestinationPaths: readonly string[];
+  folders: {id: string; name: string; path: string}[];
+  handleDestinationSelect: (path: string) => void;
+  handlePathChange: (path: string) => void;
+  selectedDestinationPath: string;
+  shouldShowLoadingSpinner: boolean;
+  status: 'idle' | 'loading' | 'success' | 'error';
+}
+
+const normalizeDestinationPath = (path: string, rootPath: string): string => {
+  const normalizedRootPath = rootPath.replace(/\/+$/, '');
+  const normalizedPath = path.replace(/^\/+|\/+$/g, '');
+  if (normalizedPath === normalizedRootPath) {
+    return '';
+  }
+
+  if (normalizedRootPath.length > 0 && normalizedPath.startsWith(`${normalizedRootPath}/`)) {
+    return normalizedPath.slice(normalizedRootPath.length + 1);
+  }
+
+  return normalizedPath;
+};
+
+const getDestinationPath = (path: string, rootPath: string): string => {
+  const normalizedRootPath = rootPath.replace(/\/+$/, '');
+  const relativePath = normalizeDestinationPath(path, rootPath);
+  return relativePath.length > 0 ? [normalizedRootPath, relativePath].filter(Boolean).join('/') : rootPath;
+};
+
+export const useBulkMoveDestinationSelection = ({
+  isOpen,
+  selectedNodes,
+  cellsRepository,
+  conversationQualifiedId,
+}: UseBulkMoveDestinationSelectionProps): BulkMoveDestinationSelection => {
+  const {clock, fireAndForgetInvoker, translate} = useApplicationContext();
+  const rootPath = getCellsFilesPath();
+  const [currentPath, setCurrentPath] = useState(rootPath);
+  const [selectedDestinationPath, setSelectedDestinationPath] = useState(rootPath);
+  const {folders, status, shouldShowLoadingSpinner} = useGetCellsFolders({
+    cellsRepository,
+    conversationQualifiedId,
+    currentPath,
+    enabled: isOpen,
+    fireAndForgetInvoker,
+    clock,
+  });
+
+  const selectedFolderPaths = useMemo(() => {
+    return selectedNodes
+      .filter(node => {
+        return node.type === CellNodeType.FOLDER;
+      })
+      .map(node => {
+        return node.path;
+      });
+  }, [selectedNodes]);
+  const disabledDestinationPaths = useMemo(() => {
+    return [...selectedFolderPaths, currentPath];
+  }, [selectedFolderPaths, currentPath]);
+  const disabledDestinationLabels = useMemo(() => {
+    return Object.fromEntries([
+      ...selectedFolderPaths.map(path => {
+        return [path, translate('cells.bulkMove.selected')];
+      }),
+      [currentPath, translate('cells.bulkMove.currentLocation')],
+    ]);
+  }, [selectedFolderPaths, currentPath, translate]);
+
+  const handlePathChange = (path: string): void => {
+    setCurrentPath(path);
+    setSelectedDestinationPath(getDestinationPath(path, rootPath));
+  };
+  const handleDestinationSelect = (path: string): void => {
+    setSelectedDestinationPath(getDestinationPath(path, rootPath));
+  };
+
+  const driveLabel = translate('cells.bulkMove.drive');
+  const relativeDestinationPath = normalizeDestinationPath(selectedDestinationPath, rootPath);
+  const currentDestination =
+    relativeDestinationPath.length > 0
+      ? `${driveLabel} / ${relativeDestinationPath.split('/').filter(Boolean).join(' / ')}`
+      : driveLabel;
+
+  return {
+    currentDestination,
+    currentPath,
+    disabledDestinationLabels,
+    disabledDestinationPaths,
+    folders,
+    handleDestinationSelect,
+    handlePathChange,
+    selectedDestinationPath,
+    shouldShowLoadingSpinner,
+    status,
+  };
+};

apps/webapp/src/script/components/conversation/conversationCells/cellsTable/cellsTable.styles.ts

@@ -32,6 +32,34 @@ export const wrapperWithRowsStyles: CSSObject = {
   marginBottom: 'auto',
 };
 
+export const selectionBarContainerStyles: CSSObject = {
+  position: 'relative',
+  width: '100%',
+  height: '32px',
+
+  '& > div': {
+    paddingRight: '88px',
+  },
+};
+
+export const bulkMoveButtonStyles: CSSObject = {
+  position: 'absolute',
+  zIndex: 2,
+  top: '2px',
+  right: '8px',
+  minHeight: '28px',
+  padding: '0 12px',
+  border: '1px solid var(--border-color)',
+  borderRadius: '16px',
+  background: 'var(--modal-bg)',
+  color: 'var(--main-color)',
+  cursor: 'pointer',
+
+  '&:hover, &:focus-visible': {
+    backgroundColor: 'var(--foreground-fade-8)',
+  },
+};
+
 export const tableStyles: CSSObject = {
   width: '100%',
   borderCollapse: 'collapse',