fix: improve export filename and import confirmation UX (#232)

Export filename:
- Include username for multi-user/instance distinction
- Include timestamp with time (YYYYMMDD-HHMM) instead of date only
- Example: medassist-export-daniel-20260216-2108.json

Import confirmation:
- Show friendly 'Import Data?' dialog on empty instances instead of
  scary 'Replace All Data?' warning with danger button
- Only show destructive warning when there is existing data to replace
- Use primary button style for empty-state import

Closes #231
This commit is contained in:
Daniel Volz
2026-02-16 22:20:20 +01:00
committed by GitHub
parent e41efdf98b
commit 08a18fc14a
6 changed files with 30 additions and 10 deletions
+14 -7
View File
@@ -30,8 +30,11 @@ export function SettingsPage() {
handleImportConfirm,
importResult,
setImportResult,
meds,
} = useAppContext();
const hasExistingData = meds.length > 0;
return (
<section className="grid">
{settingsLoading ? (
@@ -799,21 +802,25 @@ export function SettingsPage() {
{/* Import Confirmation Modal */}
{showImportConfirm && (
<ConfirmModal
title={t("exportImport.confirmImport")}
title={t(hasExistingData ? "exportImport.confirmImport" : "exportImport.confirmImportEmpty")}
message={
<>
<p style={{ marginBottom: "12px" }}>{t("exportImport.confirmImportMessage")}</p>
<p className="warning-text"> {t("exportImport.confirmImportWarning")}</p>
</>
hasExistingData ? (
<>
<p style={{ marginBottom: "12px" }}>{t("exportImport.confirmImportMessage")}</p>
<p className="warning-text"> {t("exportImport.confirmImportWarning")}</p>
</>
) : (
<p>{t("exportImport.confirmImportEmptyMessage")}</p>
)
}
confirmLabel={t("exportImport.confirmButton")}
confirmLabel={t(hasExistingData ? "exportImport.confirmButton" : "exportImport.confirmButtonEmpty")}
cancelLabel={t("exportImport.cancelButton")}
onConfirm={handleImportConfirm}
onCancel={() => {
setShowImportConfirm(false);
setPendingImportData(null);
}}
confirmVariant="danger"
confirmVariant={hasExistingData ? "danger" : "primary"}
/>
)}