feat: implement archive and bulk archive functionality with confirmation dialogs

webapp/src/components/VaultPage.tsx

@@ -79,7 +79,9 @@ export default function VaultPage(props: VaultPageProps) {
   const [fieldLabel, setFieldLabel] = useState('');
   const [fieldValue, setFieldValue] = useState('');
   const [localError, setLocalError] = useState('');
+  const [pendingArchive, setPendingArchive] = useState<Cipher | null>(null);
   const [pendingDelete, setPendingDelete] = useState<Cipher | null>(null);
+  const [bulkArchiveOpen, setBulkArchiveOpen] = useState(false);
   const [bulkDeleteOpen, setBulkDeleteOpen] = useState(false);
   const [moveOpen, setMoveOpen] = useState(false);
   const [moveFolderId, setMoveFolderId] = useState('__none__');
@@ -684,6 +686,20 @@ function folderName(id: string | null | undefined): string {
     }
   }
 
+  async function confirmArchiveSelected(): Promise<void> {
+    if (!pendingArchive) return;
+    setBusy(true);
+    try {
+      await props.onArchive(pendingArchive);
+      setPendingArchive(null);
+      if (isMobileLayout && selectedCipherId === pendingArchive.id) {
+        setMobilePanel('list');
+      }
+    } finally {
+      setBusy(false);
+    }
+  }
+
   async function confirmBulkArchive(): Promise<void> {
     const ids = Object.entries(selectedMap)
       .filter(([, selected]) => selected)
@@ -693,6 +709,7 @@ function folderName(id: string | null | undefined): string {
     try {
       await props.onBulkArchive(ids);
       setSelectedMap({});
+      setBulkArchiveOpen(false);
     } finally {
       setBusy(false);
     }
@@ -795,7 +812,7 @@ function folderName(id: string | null | undefined): string {
           onToggleCreateMenu={() => setCreateMenuOpen((open) => !open)}
           onStartCreate={startCreate}
           onBulkRestore={() => void confirmBulkRestore()}
-          onBulkArchive={() => void confirmBulkArchive()}
+          onBulkArchive={() => setBulkArchiveOpen(true)}
           onBulkUnarchive={() => void confirmBulkUnarchive()}
           onOpenMove={() => {
             setMoveFolderId('__none__');
@@ -888,7 +905,7 @@ function folderName(id: string | null | undefined): string {
               attachmentDownloadPercent={props.attachmentDownloadPercent}
               onStartEdit={startEdit}
               onDelete={setPendingDelete}
-              onArchive={props.onArchive}
+              onArchive={(cipher) => setPendingArchive(cipher)}
               onUnarchive={props.onUnarchive}
             />
           )}
@@ -902,6 +919,8 @@ function folderName(id: string | null | undefined): string {
         fieldType={fieldType}
         fieldLabel={fieldLabel}
         fieldValue={fieldValue}
+        archiveConfirmOpen={!!pendingArchive}
+        bulkArchiveOpen={bulkArchiveOpen}
         pendingDeleteOpen={!!pendingDelete}
         bulkDeleteOpen={bulkDeleteOpen}
         sidebarTrashMode={sidebarFilter.kind === 'trash'}
@@ -944,6 +963,10 @@ function folderName(id: string | null | undefined): string {
         onFieldTypeChange={setFieldType}
         onFieldLabelChange={setFieldLabel}
         onFieldValueChange={setFieldValue}
+        onConfirmArchive={() => void confirmArchiveSelected()}
+        onCancelArchive={() => setPendingArchive(null)}
+        onConfirmBulkArchive={() => void confirmBulkArchive()}
+        onCancelBulkArchive={() => setBulkArchiveOpen(false)}
         onConfirmDelete={() => void deleteSelected()}
         onCancelDelete={() => setPendingDelete(null)}
         onConfirmBulkDelete={() => void confirmBulkDelete()}

webapp/src/components/vault/VaultDialogs.tsx

@@ -8,6 +8,8 @@ interface VaultDialogsProps {
   fieldType: CustomFieldType;
   fieldLabel: string;
   fieldValue: string;
+  archiveConfirmOpen: boolean;
+  bulkArchiveOpen: boolean;
   pendingDeleteOpen: boolean;
   bulkDeleteOpen: boolean;
   sidebarTrashMode: boolean;
@@ -26,6 +28,10 @@ interface VaultDialogsProps {
   onFieldTypeChange: (value: CustomFieldType) => void;
   onFieldLabelChange: (value: string) => void;
   onFieldValueChange: (value: string) => void;
+  onConfirmArchive: () => void;
+  onCancelArchive: () => void;
+  onConfirmBulkArchive: () => void;
+  onCancelBulkArchive: () => void;
   onConfirmDelete: () => void;
   onCancelDelete: () => void;
   onConfirmBulkDelete: () => void;
@@ -88,6 +94,26 @@ export default function VaultDialogs(props: VaultDialogsProps) {
         )}
       </ConfirmDialog>
 
+      <ConfirmDialog
+        open={props.archiveConfirmOpen}
+        title={t('txt_archive_item')}
+        message={t('txt_archive_item_message')}
+        confirmText={t('txt_archive')}
+        cancelText={t('txt_cancel')}
+        onConfirm={props.onConfirmArchive}
+        onCancel={props.onCancelArchive}
+      />
+
+      <ConfirmDialog
+        open={props.bulkArchiveOpen}
+        title={t('txt_archive_selected_items')}
+        message={t('txt_archive_selected_items_message', { count: props.selectedCount })}
+        confirmText={t('txt_archive')}
+        cancelText={t('txt_cancel')}
+        onConfirm={props.onConfirmBulkArchive}
+        onCancel={props.onCancelBulkArchive}
+      />
+
       <ConfirmDialog open={props.pendingDeleteOpen} title={t('txt_delete_item')} message={t('txt_are_you_sure_you_want_to_delete_this_item')} danger onConfirm={props.onConfirmDelete} onCancel={props.onCancelDelete} />
 
       <ConfirmDialog