68 lines
2.0 KiB
TypeScript
68 lines
2.0 KiB
TypeScript
import { useEffect, useRef } from "react";
|
||
|
||
export function HelpDialog({
|
||
open,
|
||
onClose,
|
||
}: {
|
||
open: boolean;
|
||
onClose: () => void;
|
||
}) {
|
||
const dialog = useRef<HTMLDialogElement>(null);
|
||
useEffect(() => {
|
||
const node = dialog.current;
|
||
if (!node) return;
|
||
if (open && !node.open) node.showModal();
|
||
if (!open && node.open) node.close();
|
||
}, [open]);
|
||
return (
|
||
<dialog
|
||
ref={dialog}
|
||
className="help-dialog"
|
||
onClose={onClose}
|
||
onCancel={onClose}
|
||
aria-labelledby="help-title"
|
||
>
|
||
<div className="dialog-heading">
|
||
<div>
|
||
<p className="eyebrow">Local-first help</p>
|
||
<h2 id="help-title">About Archive Tools</h2>
|
||
</div>
|
||
<button type="button" onClick={onClose} aria-label="Close help">
|
||
×
|
||
</button>
|
||
</div>
|
||
<div className="help-copy">
|
||
<p>
|
||
Inspect ZIP/ZIP64, TAR/USTAR/PAX, gzip and tar.gz files without
|
||
uploading them.
|
||
</p>
|
||
<h3>Safe repackaging</h3>
|
||
<p>
|
||
Select regular entries and Archive Tools verifies their content before
|
||
placing it in a newly created ZIP. It never restores archive paths
|
||
directly onto your filesystem.
|
||
</p>
|
||
<h3>Intentional boundaries</h3>
|
||
<p>
|
||
Encryption, split ZIPs, nested archive expansion, GNU TAR extensions,
|
||
symlinks, hardlinks, device nodes and FIFOs are unsupported. Unsafe
|
||
paths, duplicates, excessive sizes and suspicious compression ratios
|
||
are blocked.
|
||
</p>
|
||
<h3>Previews and comparison</h3>
|
||
<p>
|
||
Plain UTF-8 text, bounded hexadecimal data and static JPEG/PNG/WebP
|
||
images can be previewed. Comparisons use normalized path, type,
|
||
expanded size and CRC-32.
|
||
</p>
|
||
<h3>Deterministic creation</h3>
|
||
<p>
|
||
Creation sorts files by path and normalizes timestamps, ownership and
|
||
permissions. ZIP compression is pinned to a fixed implementation and
|
||
level.
|
||
</p>
|
||
</div>
|
||
</dialog>
|
||
);
|
||
}
|