diff --git a/components/settings/downloads-settings.tsx b/components/settings/downloads-settings.tsx index eabf46e3..5fc9b4f4 100644 --- a/components/settings/downloads-settings.tsx +++ b/components/settings/downloads-settings.tsx @@ -8,9 +8,12 @@ import { RotateCcw } from "lucide-react"; import { cn } from "@/lib/utils"; import { DEFAULT_ATTACHMENT_TEMPLATE, + DEFAULT_BUNDLE_TEMPLATE, DEFAULT_EMAIL_TEMPLATE, EMAIL_TOKENS, ATTACHMENT_TOKENS, + BUNDLE_TOKENS, + bundleExportFilename, emailExportFilename, attachmentDownloadFilename, buildSampleEmail, @@ -130,6 +133,7 @@ export function DownloadsSettings() { const { emailDownloadTemplate, attachmentDownloadTemplate, + bundleDownloadTemplate, filenameSpaceReplacement, filenameLowercase, filenameStripDiacritics, @@ -158,6 +162,10 @@ export function DownloadsSettings() { () => ({ ...transform, template: attachmentDownloadTemplate || DEFAULT_ATTACHMENT_TEMPLATE }), [transform, attachmentDownloadTemplate], ); + const bundleOptions: EmailFilenameOptions = useMemo( + () => ({ ...transform, template: bundleDownloadTemplate || DEFAULT_BUNDLE_TEMPLATE }), + [transform, bundleDownloadTemplate], + ); const emlPreview = useMemo( () => emailExportFilename(sampleEmail, emailOptions), @@ -167,6 +175,12 @@ export function DownloadsSettings() { () => attachmentDownloadFilename(sampleEmail, sampleAttachment, attachmentOptions), [sampleEmail, sampleAttachment, attachmentOptions], ); + const bundlePreview = useMemo( + // Render with the email's fixed sample date so the preview is stable as the + // user types in the template field. + () => bundleExportFilename(3, bundleOptions, sampleEmail.receivedAt ?? undefined), + [bundleOptions, sampleEmail], + ); return ( @@ -194,6 +208,18 @@ export function DownloadsSettings() { previewLabel={t("preview")} placeholder={DEFAULT_ATTACHMENT_TEMPLATE} /> + updateSetting("bundleDownloadTemplate", next)} + resetLabel={t("reset")} + previewLabel={t("preview")} + placeholder={DEFAULT_BUNDLE_TEMPLATE} + />