detail panel

frontend/src/detail/DetailPanel.jsx

@@ -1,6 +1,12 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { DownloadIcon, EditIcon, ArrowLeftIcon, ArrowRightIcon } from '../ui/icons';
+import {
+  DownloadIcon,
+  EditIcon,
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  ChevronsRightIcon,
+} from '../ui/icons';
 import { getTagColorStyle } from '../utils/colors';
 import { formatFileSize } from '../utils/format';
 import { resolveDocumentAssetUrl, createAssetView } from '../asset_manager';
@@ -297,6 +303,7 @@ const DetailPanel = ({
   onCorrespondentAdd,
   onCorrespondentRemove,
   resolveApiPath,
+  onClose = () => {},
 }) => {
   const selectedCount = selectedDocuments.length;
   const singleDoc = selectedCount === 1 ? selectedDocuments[0] : null;
@@ -1086,8 +1093,20 @@ const DetailPanel = ({
   };
 
   return (
-    <aside className="detail-panel">
-      <div className="column-body scrollable">
+    <aside className="detail-panel panel">
+      <div className="panel-header">
+        <div className="panel-actions">
+          <button
+            type="button"
+            className="icon-button ghost"
+            onClick={onClose}
+            aria-label="Close detail panel"
+          >
+            <ChevronsRightIcon />
+          </button>
+        </div>
+      </div>
+      <div className="panel-body">
         {selectedCount <= 1 ? renderSingle() : renderBulk()}
       </div>
     </aside>