panelheader

This commit is contained in:
2025-10-31 13:12:09 +01:00
parent 6b4a4af5f1
commit 321b0d84ae
6 changed files with 305 additions and 202 deletions
+116 -85
View File
@@ -9,6 +9,7 @@ import {
WindowMaximizeIcon,
TextScanIcon,
} from '../ui/icons';
import PanelHeader from '../ui/PanelHeader';
import { getTagColorStyle } from '../utils/colors';
import { formatFileSize } from '../utils/format';
import { resolveDocumentAssetUrl, createAssetView } from '../asset_manager';
@@ -1239,95 +1240,125 @@ const DetailPanel = ({
const isBulkSelection = selectedCount > 1;
const showOcrAction = Boolean(singleDoc && singleHasOcr);
const headerLeading = [
(
<button
key="close"
type="button"
className="icon-button"
onClick={onClose}
aria-label="Close detail panel"
title="Close detail panel"
>
<ChevronsRightIcon />
</button>
),
];
if (singleDoc) {
headerLeading.push(
<button
key="preview"
type="button"
className="icon-button"
onClick={(event) => {
event.stopPropagation();
onOpenPreview(singleDoc.id);
}}
aria-label="Open preview"
title="Open preview"
disabled={!singleHasPreview}
>
<WindowMaximizeIcon />
</button>,
);
}
const headerActions = [];
if (isBulkSelection && onBulkReanalyze) {
headerActions.push(
<button
key="bulk-reanalyze"
type="button"
className="icon-button"
onClick={(event) => {
event.stopPropagation();
onBulkReanalyze(bulkDocumentIds);
}}
aria-label="Re-run analysis for selection"
title="Re-run analysis for selection"
>
<AnalyzeIcon />
</button>,
);
}
if (singleDoc && singleDownloadHref) {
headerActions.push(
<a
key="download"
className="icon-button"
href={singleDownloadHref}
target="_blank"
rel="noopener noreferrer"
aria-label="Download document"
title="Download document"
onClick={(event) => event.stopPropagation()}
>
<DownloadIcon />
</a>,
);
}
if (showOcrAction) {
headerActions.push(
<button
key="ocr"
type="button"
className="icon-button"
onClick={(event) => {
event.stopPropagation();
openOcr().catch(() => {});
}}
aria-label="View OCR text"
title="View OCR text"
>
<TextScanIcon />
</button>,
);
}
if (singleDoc) {
headerActions.push(
<button
key="reanalyze"
type="button"
className="icon-button"
onClick={(event) => {
event.stopPropagation();
onRegenerateThumbnails(singleDoc.id);
}}
aria-label="Re-run analysis"
title="Re-run analysis"
>
<AnalyzeIcon />
</button>,
);
}
return (
<>
<aside className="detail-panel panel">
<div className="panel-header">
<button
type="button"
className="icon-button"
onClick={onClose}
aria-label="Close detail panel"
title="Close detail panel"
>
<ChevronsRightIcon />
</button>
{singleDoc ? (
<button
type="button"
className="icon-button"
onClick={(event) => {
event.stopPropagation();
onOpenPreview(singleDoc.id);
}}
aria-label="Open preview"
title="Open preview"
disabled={!singleHasPreview}
>
<WindowMaximizeIcon />
</button>
) : null}
<h3 className="panel-header__title">{headerTitle}</h3>
<div className="panel-actions__spacer" />
{isBulkSelection && onBulkReanalyze ? (
<button
type="button"
className="icon-button"
onClick={(event) => {
event.stopPropagation();
onBulkReanalyze(bulkDocumentIds);
}}
aria-label="Re-run analysis for selection"
title="Re-run analysis for selection"
>
<AnalyzeIcon />
</button>
) : null}
{singleDoc && singleDownloadHref ? (
<a
className="icon-button"
href={singleDownloadHref}
target="_blank"
rel="noopener noreferrer"
aria-label="Download document"
title="Download document"
onClick={(event) => event.stopPropagation()}
>
<DownloadIcon />
</a>
) : null}
{showOcrAction ? (
<button
type="button"
className="icon-button"
onClick={(event) => {
event.stopPropagation();
openOcr().catch(() => {});
}}
aria-label="View OCR text"
title="View OCR text"
>
<TextScanIcon />
</button>
) : null}
{singleDoc ? (
<button
type="button"
className="icon-button"
onClick={(event) => {
event.stopPropagation();
onRegenerateThumbnails(singleDoc.id);
}}
aria-label="Re-run analysis"
title="Re-run analysis"
>
<AnalyzeIcon />
</button>
) : null}
<PanelHeader
leading={headerLeading}
title={headerTitle}
titleTag="h3"
actions={headerActions.length ? headerActions : null}
/>
<div className="panel-body">
{selectedCount <= 1 ? renderSingle() : renderBulk()}
</div>
<div className="panel-body">
{selectedCount <= 1 ? renderSingle() : renderBulk()}
</div>
</aside>
<PreviewZoomOverlay
open={Boolean(zoomDisplay?.url)}