add-ideas/multi-seal-mail-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reloading redesign

Browse Source
This commit is contained in:
Albrecht Degering
2026-06-10 14:36:42 +02:00
parent 4544a89443
commit 7de516c5e3
17 changed files with 149 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/LoadingFrame.tsx Normal file
View File

@@ -0,0 +1,26 @@
import LoadingIndicator from "./LoadingIndicator";
type LoadingFrameProps = {
children: React.ReactNode;
loading?: boolean;
label?: string;
className?: string;
};
export default function LoadingFrame({ children, loading = false, label = "Loading data…", className = "" }: LoadingFrameProps) {
const classNames = ["loading-frame", loading ? "is-loading" : "", className].filter(Boolean).join(" ");
return (
<div className={classNames} aria-busy={loading || undefined}>
{children}
{loading && (
<div className="loading-frame-overlay" role="status" aria-live="polite">
<div className="loading-frame-panel">
<LoadingIndicator label={label} size="md" />
<span>{label}</span>
</div>
</div>
)}
</div>
);
}

10
src/features/campaigns/AttachmentsDataPage.tsx
View File

@@ -4,6 +4,7 @@ import type { ApiSettings } from "../../types";
import Button from "../../components/Button";
import Card from "../../components/Card";
import PageTitle from "../../components/PageTitle";
import LoadingFrame from "../../components/LoadingFrame";
import ToggleSwitch from "../../components/ToggleSwitch";
import { autosaveCampaignVersion } from "../../api/campaigns";
import { useCampaignWorkspaceData } from "./hooks/useCampaignWorkspaceData";
@@ -23,11 +24,12 @@ export default function AttachmentsDataPage({ settings, campaignId }: { settings
const [pathChooser, setPathChooser] = useState<PathChooserState | null>(null);
const version = data.currentVersion;
const locked = isAuditLockedVersion(version);
const attachments = asRecord(draft?.attachments);
const displayDraft = draft ?? ensureCampaignDraft(null);
const attachments = asRecord(displayDraft.attachments);
const basePaths = useMemo(() => normalizeBasePaths(attachments.base_paths, attachments), [attachments]);
const globalRules = useMemo(() => normalizeAttachmentRules(attachments.global), [attachments.global]);
const globalSummary = useMemo(() => summarizeAttachmentRules(globalRules), [globalRules]);
const entries = asRecord(draft?.entries);
const entries = asRecord(displayDraft.entries);
const inlineEntries = asArray(entries.inline).map(asRecord);
const individualRules = inlineEntries.flatMap((entry, index) => asArray(entry.attachments).map((rule) => ({ entry: String(entry.id || index + 1), ...asRecord(rule) })));
@@ -136,7 +138,7 @@ export default function AttachmentsDataPage({ settings, campaignId }: { settings
{localError && <div className="alert danger">{localError}</div>}
{locked && <div className="alert info">This version is read-only. {versionLockReason(version)}</div>}
{draft && (
<LoadingFrame loading={loading || !draft} label="Loading campaign draft…">
<>
<Card
title="Attachment sources"
@@ -213,7 +215,7 @@ export default function AttachmentsDataPage({ settings, campaignId }: { settings
<Button variant="primary" onClick={() => saveDraft("manual")} disabled={!dirty || locked}>Save</Button>
</div>
</>
)}
</LoadingFrame>
{pathChooser && (
<MockPathChooserOverlay

3
src/features/campaigns/CampaignAuditPage.tsx
View File

@@ -2,6 +2,7 @@ import type { ApiSettings } from "../../types";
import Button from "../../components/Button";
import Card from "../../components/Card";
import PageTitle from "../../components/PageTitle";
import LoadingFrame from "../../components/LoadingFrame";
import { useCampaignWorkspaceData } from "./hooks/useCampaignWorkspaceData";
import { formatDateTime } from "./utils/campaignView";
@@ -23,9 +24,11 @@ export default function CampaignAuditPage({ settings, campaignId }: { settings:
{error && <div className="alert danger">{error}</div>}
<LoadingFrame loading={loading} label="Loading audit data…">
<Card title="Recent audit events">
<p className="muted">Campaign-specific audit API integration will be added in the audit section pass.</p>
</Card>
</LoadingFrame>
</div>
);
}

12
src/features/campaigns/CampaignDataPage.tsx
View File

@@ -5,6 +5,7 @@ import Button from "../../components/Button";
import Card from "../../components/Card";
import FormField from "../../components/FormField";
import PageTitle from "../../components/PageTitle";
import LoadingFrame from "../../components/LoadingFrame";
import ToggleSwitch from "../../components/ToggleSwitch";
import EmailAddressInput from "../../components/email/EmailAddressInput";
import { addressesFromValue, collectCampaignAddressSuggestions, type MailboxAddress } from "../../utils/emailAddresses";
@@ -25,12 +26,13 @@ export default function CampaignDataPage({ settings, campaignId }: { settings: A
const version = data.currentVersion;
const locked = isAuditLockedVersion(version);
const campaign = asRecord(draft?.campaign);
const recipients = asRecord(draft?.recipients);
const displayDraft = draft ?? ensureCampaignDraft(null);
const campaign = asRecord(displayDraft.campaign);
const recipients = asRecord(displayDraft.recipients);
const from = asRecord(recipients.from);
const defaultFrom = addressesFromValue(from);
const globalReplyTo = addressesFromValue(recipients.reply_to);
const addressSuggestions = useMemo(() => collectCampaignAddressSuggestions(draft), [draft]);
const addressSuggestions = useMemo(() => collectCampaignAddressSuggestions(displayDraft), [displayDraft]);
useEffect(() => {
if (!version) return;
@@ -97,7 +99,7 @@ export default function CampaignDataPage({ settings, campaignId }: { settings: A
{localError && <div className="alert danger">{localError}</div>}
{locked && <div className="alert info">This version is read-only. {versionLockReason(version)} Copy the campaign before editing general campaign data.</div>}
{draft && (
<LoadingFrame loading={loading || !draft} label="Loading campaign draft…">
<>
<div className="campaign-settings-stack">
<Card title="Campaign identity">
@@ -195,7 +197,7 @@ export default function CampaignDataPage({ settings, campaignId }: { settings: A
<Button variant="primary" onClick={() => saveDraft("manual")} disabled={!dirty || locked}>Save</Button>
</div>
</>
)}
</LoadingFrame>
</div>
);
}

10
src/features/campaigns/CampaignFieldsPage.tsx
View File

@@ -4,6 +4,7 @@ import Button from "../../components/Button";
import Card from "../../components/Card";
import FormField from "../../components/FormField";
import PageTitle from "../../components/PageTitle";
import LoadingFrame from "../../components/LoadingFrame";
import ToggleSwitch from "../../components/ToggleSwitch";
import { autosaveCampaignVersion } from "../../api/campaigns";
import { useCampaignWorkspaceData } from "./hooks/useCampaignWorkspaceData";
@@ -33,8 +34,9 @@ export default function CampaignFieldsPage({ settings, campaignId }: { settings:
const version = data.currentVersion;
const locked = isAuditLockedVersion(version);
const fields = useMemo(() => normalizeFields(draft?.fields), [draft?.fields]);
const globalValues = asRecord(draft?.global_values);
const displayDraft = draft ?? ensureCampaignDraft(null);
const fields = useMemo(() => normalizeFields(displayDraft.fields), [displayDraft.fields]);
const globalValues = asRecord(displayDraft.global_values);
const fieldNameWarning = useMemo(() => describeFieldNameProblem(fields), [fields]);
const canSave = dirty && !locked && Boolean(draft) && !fieldNameWarning;
@@ -193,7 +195,7 @@ export default function CampaignFieldsPage({ settings, campaignId }: { settings:
{fieldNameWarning && <div className="alert warning">{fieldNameWarning}</div>}
{locked && <div className="alert info">This version is read-only. {versionLockReason(version)} Copy the campaign before editing fields.</div>}
{draft && (
<LoadingFrame loading={loading || !draft} label="Loading campaign draft…">
<>
<Card
title="Fields and global values"
@@ -241,7 +243,7 @@ export default function CampaignFieldsPage({ settings, campaignId }: { settings:
<Button variant="primary" onClick={() => saveDraft("manual")} disabled={!canSave}>Save</Button>
</div>
</>
)}
</LoadingFrame>
</div>
);
}

3
src/features/campaigns/CampaignJsonView.tsx
View File

@@ -2,6 +2,7 @@ import type { ApiSettings } from "../../types";
import Card from "../../components/Card";
import Button from "../../components/Button";
import PageTitle from "../../components/PageTitle";
import LoadingFrame from "../../components/LoadingFrame";
import { useCampaignWorkspaceData } from "./hooks/useCampaignWorkspaceData";
import { asRecord, formatDateTime, getCampaignJson } from "./utils/campaignView";
import { downloadJson, safeFileStem } from "./utils/draftEditor";
@@ -26,9 +27,11 @@ export default function CampaignJsonView({ settings, campaignId }: { settings: A
</div>
</div>
{error && <div className="alert danger">{error}</div>}
<LoadingFrame loading={loading} label="Loading JSON…">
<Card>
{!loading || version ? <pre className="code-panel">{JSON.stringify(campaignJson, null, 2)}</pre> : <pre className="code-panel">{"{}"}</pre>}
</Card>
</LoadingFrame>
</div>
);
}

7
src/features/campaigns/CampaignListPage.tsx
View File

@@ -5,6 +5,7 @@ import Card from "../../components/Card";
import Button from "../../components/Button";
import StatusBadge from "../../components/StatusBadge";
import PageTitle from "../../components/PageTitle";
import LoadingFrame from "../../components/LoadingFrame";
import { createNewCampaign, listCampaigns } from "../../api/campaigns";
import type { CampaignListItem } from "../../types";
@@ -72,7 +73,8 @@ export default function CampaignListPage({ settings }: { settings: ApiSettings }
</div>
<Card>
{!loading && campaigns.length === 0 && (
<LoadingFrame loading={loading} label="Loading campaigns…">
{campaigns.length === 0 && (
<div className="empty-state">
<h2>No campaigns yet</h2>
<p>Start with a guided campaign draft. The WebUI will create a portable campaign JSON in the background.</p>
@@ -81,7 +83,7 @@ export default function CampaignListPage({ settings }: { settings: ApiSettings }
</Button>
</div>
)}
{!loading && campaigns.length > 0 && (
{campaigns.length > 0 && (
<div className="app-table-wrap campaign-table-wrap">
<table className="app-table campaign-table">
<thead>
@@ -114,6 +116,7 @@ export default function CampaignListPage({ settings }: { settings: ApiSettings }
</table>
</div>
)}
</LoadingFrame>
</Card>
</div>
);

5
src/features/campaigns/CampaignOverviewPage.tsx
View File

@@ -5,6 +5,7 @@ import Button from "../../components/Button";
import Card from "../../components/Card";
import MetricCard from "../../components/MetricCard";
import PageTitle from "../../components/PageTitle";
import LoadingFrame from "../../components/LoadingFrame";
import { createNewCampaign, publishCampaignVersion, updateCampaignVersion } from "../../api/campaigns";
import { useCampaignWorkspaceData } from "./hooks/useCampaignWorkspaceData";
import {
@@ -106,7 +107,8 @@ export default function CampaignOverviewPage({ settings, campaignId }: { setting
{error && <div className="alert danger">{error}</div>}
{message && <div className="alert success">{message}</div>}
<LoadingFrame loading={loading} label="Loading campaign overview…">
{locked && (
<div className="alert info">
@@ -192,6 +194,7 @@ export default function CampaignOverviewPage({ settings, campaignId }: { setting
</div>
<p className="muted">Review and sending are displayed on their own data pages; use the guided buttons above to change state.</p>
</Card>
</LoadingFrame>
</div>
);
}

3
src/features/campaigns/CampaignReportPage.tsx
View File

@@ -2,6 +2,7 @@ import type { ApiSettings } from "../../types";
import Card from "../../components/Card";
import Button from "../../components/Button";
import PageTitle from "../../components/PageTitle";
import LoadingFrame from "../../components/LoadingFrame";
import { useCampaignWorkspaceData } from "./hooks/useCampaignWorkspaceData";
import { formatDateTime } from "./utils/campaignView";
@@ -22,6 +23,7 @@ export default function CampaignReportPage({ settings, campaignId }: { settings:
</div>
</div>
{error && <div className="alert danger">{error}</div>}
<LoadingFrame loading={loading} label="Loading report data…">
<div className="dashboard-grid">
<Card title="Report summary">
<dl className="detail-list">
@@ -35,6 +37,7 @@ export default function CampaignReportPage({ settings, campaignId }: { settings:
<p className="muted">CSV export and report-emailing buttons will be added once the report section is reviewed.</p>
</Card>
</div>
</LoadingFrame>
</div>
);
}

14
src/features/campaigns/GlobalSettingsPage.tsx
View File

@@ -4,6 +4,7 @@ import Button from "../../components/Button";
import Card from "../../components/Card";
import FormField from "../../components/FormField";
import PageTitle from "../../components/PageTitle";
import LoadingFrame from "../../components/LoadingFrame";
import ToggleSwitch from "../../components/ToggleSwitch";
import { autosaveCampaignVersion } from "../../api/campaigns";
import { useCampaignWorkspaceData } from "./hooks/useCampaignWorkspaceData";
@@ -25,12 +26,13 @@ export default function GlobalSettingsPage({ settings, campaignId }: { settings:
const version = data.currentVersion;
const locked = isAuditLockedVersion(version);
const validationPolicy = asRecord(draft?.validation_policy);
const attachments = asRecord(draft?.attachments);
const delivery = asRecord(draft?.delivery);
const displayDraft = draft ?? ensureCampaignDraft(null);
const validationPolicy = asRecord(displayDraft.validation_policy);
const attachments = asRecord(displayDraft.attachments);
const delivery = asRecord(displayDraft.delivery);
const rateLimit = asRecord(delivery.rate_limit);
const retry = asRecord(delivery.retry);
const statusTracking = asRecord(draft?.status_tracking);
const statusTracking = asRecord(displayDraft.status_tracking);
const optIns = asRecord(editorState.opt_ins);
useEffect(() => {
@@ -108,7 +110,7 @@ export default function GlobalSettingsPage({ settings, campaignId }: { settings:
{localError && <div className="alert danger">{localError}</div>}
{locked && <div className="alert info">This version is read-only. {versionLockReason(version)} Copy the campaign before editing global settings.</div>}
{draft && (
<LoadingFrame loading={loading || !draft} label="Loading campaign draft…">
<>
<div className="dashboard-grid">
<Card title="Validation policy">
@@ -158,7 +160,7 @@ export default function GlobalSettingsPage({ settings, campaignId }: { settings:
<Button variant="primary" onClick={() => saveDraft("manual")} disabled={!dirty || locked}>Save current draft</Button>
</div>
</>
)}
</LoadingFrame>
</div>
);
}

10
src/features/campaigns/MailSettingsPage.tsx
View File

@@ -4,6 +4,7 @@ import Button from "../../components/Button";
import Card from "../../components/Card";
import FormField from "../../components/FormField";
import PageTitle from "../../components/PageTitle";
import LoadingFrame from "../../components/LoadingFrame";
import ToggleSwitch from "../../components/ToggleSwitch";
import { autosaveCampaignVersion } from "../../api/campaigns";
import { listImapFolders, testImapSettings, testSmtpSettings, type MailConnectionTestResponse, type MailImapFolderListResponse, type MailSecurity } from "../../api/mail";
@@ -27,10 +28,11 @@ export default function MailSettingsPage({ settings, campaignId }: { settings: A
const version = data.currentVersion;
const locked = isAuditLockedVersion(version);
const server = asRecord(draft?.server);
const displayDraft = draft ?? ensureCampaignDraft(null);
const server = asRecord(displayDraft.server);
const smtp = asRecord(server.smtp);
const imap = asRecord(server.imap);
const delivery = asRecord(draft?.delivery);
const delivery = asRecord(displayDraft.delivery);
const imapAppend = asRecord(delivery.imap_append_sent);
const imapEnabled = getBool(imap, "enabled");
const imapDisabled = locked || !imapEnabled;
@@ -189,7 +191,7 @@ export default function MailSettingsPage({ settings, campaignId }: { settings: A
{localError && <div className="alert danger">{localError}</div>}
{locked && <div className="alert info">This version is read-only. {versionLockReason(version)} Copy the campaign before editing server settings.</div>}
{draft && (
<LoadingFrame loading={loading || !draft} label="Loading campaign draft…">
<>
<Card title="Mail server settings">
<div className="mail-server-settings-grid">
@@ -245,7 +247,7 @@ export default function MailSettingsPage({ settings, campaignId }: { settings: A
<Button variant="primary" onClick={() => saveDraft("manual")} disabled={!dirty || locked}>Save</Button>
</div>
</>
)}
</LoadingFrame>
</div>
);
}

24
src/features/campaigns/RecipientDataPage.tsx
View File

@@ -4,6 +4,7 @@ import Button from "../../components/Button";
import Card from "../../components/Card";
import FormField from "../../components/FormField";
import PageTitle from "../../components/PageTitle";
import LoadingFrame from "../../components/LoadingFrame";
import ToggleSwitch from "../../components/ToggleSwitch";
import EmailAddressInput from "../../components/email/EmailAddressInput";
import { autosaveCampaignVersion } from "../../api/campaigns";
@@ -41,18 +42,19 @@ export default function RecipientDataPage({ settings, campaignId }: { settings:
const version = data.currentVersion;
const locked = isAuditLockedVersion(version);
const recipientsSection = asRecord(draft?.recipients);
const entries = asRecord(draft?.entries);
const displayDraft = draft ?? ensureCampaignDraft(null);
const recipientsSection = asRecord(displayDraft.recipients);
const entries = asRecord(displayDraft.entries);
const inlineEntries = asArray(entries.inline).map(asRecord);
const source = asRecord(entries.source);
const fieldDefinitions = useMemo(() => getDraftFields(draft), [draft]);
const attachmentSection = asRecord(draft?.attachments);
const attachmentBasePaths = useMemo(() => normalizeAttachmentBasePaths(attachmentSection.base_paths, attachmentSection), [draft?.attachments]);
const fieldDefinitions = useMemo(() => getDraftFields(displayDraft), [displayDraft]);
const attachmentSection = asRecord(displayDraft.attachments);
const attachmentBasePaths = useMemo(() => normalizeAttachmentBasePaths(attachmentSection.base_paths, attachmentSection), [attachmentSection]);
const individualAttachmentBasePaths = useMemo(() => {
const enabled = attachmentBasePaths.filter((basePath) => basePath.allow_individual);
return enabled.length > 0 ? enabled : attachmentBasePaths;
}, [attachmentBasePaths]);
const addressSuggestions = useMemo(() => collectCampaignAddressSuggestions(draft), [draft]);
const addressSuggestions = useMemo(() => collectCampaignAddressSuggestions(displayDraft), [displayDraft]);
const globalRecipientValues: Record<string, MailboxAddress[]> = {
to: addressesFromValue(recipientsSection.to),
cc: addressesFromValue(recipientsSection.cc),
@@ -180,7 +182,7 @@ export default function RecipientDataPage({ settings, campaignId }: { settings:
{localError && <div className="alert danger">{localError}</div>}
{locked && <div className="alert info">This version is read-only. {versionLockReason(version)}</div>}
{draft && (
<LoadingFrame loading={loading || !draft} label="Loading campaign draft…">
<>
<Card title="Global recipient headers">
<div className="campaign-header-stack">
@@ -214,11 +216,11 @@ export default function RecipientDataPage({ settings, campaignId }: { settings:
title="Recipients"
actions={[<Button disabled={true}>Import</Button>, <Button variant="primary" onClick={addRecipient} disabled={locked}>Add recipient</Button>]}
>
{draft && inlineEntries.length === 0 && !source.type && <p className="muted">No recipient data is stored in the current version yet.</p>}
{draft && inlineEntries.length === 0 && Boolean(source.type) && (
{inlineEntries.length === 0 && !source.type && <p className="muted">No recipient data is stored in the current version yet.</p>}
{inlineEntries.length === 0 && Boolean(source.type) && (
<div className="alert info">This campaign references an external recipient source. A parsed preview table will be added when file/source preview support is implemented.</div>
)}
{draft && inlineEntries.length > 0 && (
{inlineEntries.length > 0 && (
<div className="app-table-wrap recipient-table-wrap">
<table className="app-table recipient-table recipient-editor-table">
<thead>
@@ -328,7 +330,7 @@ export default function RecipientDataPage({ settings, campaignId }: { settings:
<Button variant="primary" onClick={() => saveRecipients("manual")} disabled={!dirty || locked}>Save</Button>
</div>
</>
)}
</LoadingFrame>
</div>
);
}

3
src/features/campaigns/ReviewDataPage.tsx
View File

@@ -2,6 +2,7 @@ import { Link } from "react-router-dom";
import type { ApiSettings } from "../../types";
import Button from "../../components/Button";
import PageTitle from "../../components/PageTitle";
import LoadingFrame from "../../components/LoadingFrame";
import Card from "../../components/Card";
import StatusBadge from "../../components/StatusBadge";
import { useCampaignWorkspaceData } from "./hooks/useCampaignWorkspaceData";
@@ -27,6 +28,7 @@ export default function ReviewDataPage({ settings, campaignId }: { settings: Api
{error && <div className="alert danger">{error}</div>}
<LoadingFrame loading={loading} label="Loading review data…">
<div className="dashboard-grid">
<Card title="Validation summary">
<div className="summary-grid">
@@ -74,6 +76,7 @@ export default function ReviewDataPage({ settings, campaignId }: { settings: Api
</div>
)}
</Card>
</LoadingFrame>
</div>
);
}

3
src/features/campaigns/SendDataPage.tsx
View File

@@ -2,6 +2,7 @@ import { Link } from "react-router-dom";
import type { ApiSettings } from "../../types";
import Button from "../../components/Button";
import PageTitle from "../../components/PageTitle";
import LoadingFrame from "../../components/LoadingFrame";
import Card from "../../components/Card";
import MetricCard from "../../components/MetricCard";
import { useCampaignWorkspaceData } from "./hooks/useCampaignWorkspaceData";
@@ -31,6 +32,7 @@ export default function SendDataPage({ settings, campaignId }: { settings: ApiSe
{error && <div className="alert danger">{error}</div>}
<LoadingFrame loading={loading} label="Loading send data…">
<div className="metric-grid">
<MetricCard label="Queueable" value={cards?.queueable ?? "—"} tone="good" detail="Ready or warning" />
<MetricCard label="Needs attention" value={cards?.needs_attention ?? "—"} tone="warning" detail="Review first" />
@@ -63,6 +65,7 @@ export default function SendDataPage({ settings, campaignId }: { settings: ApiSe
SMTP sending and IMAP append-to-Sent remain separate states. A successful SMTP send is still successful even if appending to Sent fails.
</p>
</Card>
</LoadingFrame>
</div>
);
}

23
src/features/campaigns/TemplateDataPage.tsx
View File

@@ -5,9 +5,10 @@ import Button from "../../components/Button";
import Card from "../../components/Card";
import FormField from "../../components/FormField";
import PageTitle from "../../components/PageTitle";
import LoadingFrame from "../../components/LoadingFrame";
import { autosaveCampaignVersion } from "../../api/campaigns";
import { useCampaignWorkspaceData } from "./hooks/useCampaignWorkspaceData";
import { asArray, asRecord, formatDateTime, getTemplateSection, isAuditLockedVersion, versionLockReason } from "./utils/campaignView";
import { asArray, asRecord, formatDateTime, isAuditLockedVersion, versionLockReason } from "./utils/campaignView";
import { cloneJson, ensureCampaignDraft, getBool, getText, updateNested } from "./utils/draftEditor";
import { useRegisterCampaignUnsavedChanges } from "./context/UnsavedChangesContext";
@@ -38,23 +39,23 @@ export default function TemplateDataPage({ settings, campaignId }: { settings: A
const [previewOpen, setPreviewOpen] = useState(false);
const [previewIndex, setPreviewIndex] = useState(0);
const [undefinedDialog, setUndefinedDialog] = useState<UndefinedPlaceholder | null>(null);
const loadedVersionId = useRef<string | null>(null);
const subjectRef = useRef<HTMLInputElement | null>(null);
const textRef = useRef<HTMLTextAreaElement | null>(null);
const htmlRef = useRef<HTMLTextAreaElement | null>(null);
const version = data.currentVersion;
const locked = isAuditLockedVersion(version);
const template = draft ? asRecord(draft.template) : getTemplateSection(version);
const fields = useMemo(() => asArray(draft?.fields).map(asRecord), [draft]);
const displayDraft = draft ?? ensureCampaignDraft(null);
const template = asRecord(displayDraft.template);
const fields = useMemo(() => asArray(displayDraft.fields).map(asRecord), [displayDraft.fields]);
const localFieldNames = useMemo(() => fields.map((field) => String(field.name || field.id || "")).filter(Boolean), [fields]);
const globalFieldNames = useMemo(() => uniqueSorted([...localFieldNames, ...Object.keys(asRecord(draft?.global_values))]), [draft?.global_values, localFieldNames]);
const globalFieldNames = useMemo(() => uniqueSorted([...localFieldNames, ...Object.keys(asRecord(displayDraft.global_values))]), [displayDraft.global_values, localFieldNames]);
const allAvailableNames = useMemo(() => new Set([...localFieldNames, ...globalFieldNames]), [localFieldNames, globalFieldNames]);
const entries = asRecord(draft?.entries);
const entries = asRecord(displayDraft.entries);
const inlineEntries = useMemo(() => asArray(entries.inline).map(asRecord), [entries.inline]);
const previewEntries = inlineEntries.length > 0 ? inlineEntries : [{}];
const previewEntry = previewEntries[Math.min(previewIndex, previewEntries.length - 1)] ?? {};
const ignoreEmptyFields = getBool(asRecord(draft?.validation_policy), "ignore_empty_fields", false);
const ignoreEmptyFields = getBool(asRecord(displayDraft.validation_policy), "ignore_empty_fields", false);
const templateText = `${getText(template, "subject")}\n${getText(template, "text")}\n${getText(template, "html")}`;
const usedPlaceholders = useMemo(() => extractTemplatePlaceholders(templateText), [templateText]);
const invalidNamespacePlaceholders = useMemo(() => uniquePlaceholders(usedPlaceholders.filter((field) => !field.validNamespace)), [usedPlaceholders]);
@@ -64,15 +65,13 @@ export default function TemplateDataPage({ settings, campaignId }: { settings: A
...field,
reason: field.validNamespace ? "missing-field" : "invalid-namespace"
}))), [usedPlaceholders, allAvailableNames]);
const previewContext = useMemo(() => buildPreviewContext(draft, previewEntry), [draft, previewEntry]);
const previewContext = useMemo(() => buildPreviewContext(displayDraft, previewEntry), [displayDraft, previewEntry]);
const previewSubject = renderPreviewText(getText(template, "subject"), previewContext, ignoreEmptyFields);
const previewText = renderPreviewText(getText(template, "text"), previewContext, ignoreEmptyFields);
const previewHtml = renderPreviewText(getText(template, "html"), previewContext, ignoreEmptyFields);
useEffect(() => {
if (!version) return;
if (loadedVersionId.current === version.id) return;
loadedVersionId.current = version.id;
setDraft(ensureCampaignDraft(version));
setDirty(false);
setPreviewIndex(0);
@@ -196,7 +195,7 @@ export default function TemplateDataPage({ settings, campaignId }: { settings: A
{localError && <div className="alert danger">{localError}</div>}
{locked && <div className="alert info">This version is read-only. {versionLockReason(version)}</div>}
{draft && (
<LoadingFrame loading={loading || !draft} label="Loading campaign draft…">
<>
<div className="dashboard-grid template-editor-grid">
<Card title="Editable template" actions={<Button onClick={() => setPreviewOpen(true)}>Preview</Button>}>
@@ -281,7 +280,7 @@ export default function TemplateDataPage({ settings, campaignId }: { settings: A
<Button variant="primary" onClick={() => saveTemplate("manual")} disabled={!dirty || locked || !draft}>Save</Button>
</div>
</>
)}
</LoadingFrame>
{previewOpen && (
<TemplatePreviewOverlay

2
src/styles/campaign-workspace.css
View File

@@ -337,7 +337,7 @@
border-radius: var(--radius);
box-shadow: var(--shadow);
background: var(--panel);
overflow: visible;
overflow: hidden;
}
.campaigns-page .card-header {
position: sticky;

42
src/styles/components.css
View File

@@ -470,4 +470,44 @@
.field-with-action .button {
flex: 0 0 auto;
white-space: nowrap;
}
}
.loading-frame {
position: relative;
}
.loading-frame.is-loading {
min-height: 120px;
}
.loading-frame.is-loading > :not(.loading-frame-overlay) {
pointer-events: none;
user-select: none;
}
.loading-frame-overlay {
position: absolute;
inset: 0;
z-index: 30;
display: grid;
place-items: center;
min-height: 120px;
padding: 1.25rem;
border-radius: var(--radius-lg, 18px);
background: rgba(255, 255, 255, 0.00);
backdrop-filter: blur(1.5px);
margin: -10px;
}
.loading-frame-panel {
display: inline-flex;
align-items: center;
gap: 0.65rem;
padding: 0.75rem 1rem;
border: 1px solid var(--border-soft, rgba(15, 23, 42, 0.12));
border-radius: 999px;
color: var(--text, #172033);
background: rgba(255, 255, 255, 0.86);
box-shadow: var(--shadow-soft, 0 10px 28px rgba(15, 23, 42, 0.12));
font-size: 0.9rem;
font-weight: 600;
}