{initials}
;
}
function IBtn({icon,title,onClick,C,danger=false,active=false,size=16,label=""}){
const[h,setH]=useState(false);
return ;
}
function Sep({C}){return ;}
function Toggle({on,onChange,C}){
const[v,setV]=useState(on??false);
return {setV(x=>!x);onChange&&onChange(!v);}}
style={{width:36,height:20,borderRadius:10,background:v?C.accent:C.muted,cursor:"pointer",position:"relative",transition:"background 0.2s",flexShrink:0}}>
;
}
function PanelHeader({title,onClose,C}){
return
{title}
;
}
// ── Full Settings Modal ───────────────────────────────────────────────────────
const SETTINGS_NAV=[
{id:"general", icon:"ti-settings", label:"General"},
{id:"theme", icon:"ti-palette", label:"Appearance"},
{id:"notifications",icon:"ti-bell", label:"Notifications"},
{id:"accounts", icon:"ti-user-circle", label:"Accounts"},
{id:"rules", icon:"ti-filter", label:"Filters & Rules"},
{id:"privacy", icon:"ti-eye", label:"Privacy"},
{id:"emailaddr", icon:"ti-at", label:"Email addresses"},
{id:"encryption", icon:"ti-key", label:"Encryption"},
{id:"spam", icon:"ti-trash", label:"Spam & Trash"},
{id:"backup", icon:"ti-database", label:"Backup"},
{id:"advanced", icon:"ti-adjustments", label:"Advanced",keywords:"security smb share server"},
];
// ── Email Addresses Settings ──────────────────────────────────────────────────
const ACCT_STATS={
"alex@example-corp.com":{count:1842,size:"312 MB"},
"sales@example-corp.com":{count:234,size:"41 MB"},
"j.doe@mailbox.org":{count:89,size:"14 MB"},
"default":{count:12,size:"2 MB"},
};
// Mock: extra folder on the share not yet imported
const MOCK_NEW_FOLDERS=["invoices@example-corp.com"];
function SettingsEmailAddr({accounts,C,smbConfig,onDiscoverMore}){
const[scanning,setScanning]=useState(false);
const[scanResult,setScanResult]=useState(null);
function runScan(){
setScanning(true);setScanResult(null);
setTimeout(()=>{
setScanning(false);
const known=new Set(accounts.map(a=>a.email||a.id));
const newOnes=MOCK_NEW_FOLDERS.filter(e=>!known.has(e));
setScanResult({found:newOnes.length,folders:newOnes});
},2000);
}
return Email addresses
Folders imported from your mail server. The SMB share is never modified.
{/* Imported accounts */}
{accounts.map(acct=>{
const stats=ACCT_STATS[acct.email||acct.id]||{count:0,size:"—"};
return
;
})}
{/* Discover more */}
}
{scanResult&&scanResult.found===0&&
;
}
function FullSettings({profile,onSave,onClose,C,accounts,updateAccount,rules,setRules,allFolders,smbConfig,setSmbConfig,loginBg,setLoginBg,loginDark,setLoginDark,onSetupNew}){
const[section,setSection]=useState("general");
const[search,setSearch]=useState("");
const[ls,setLS]=useState({...profile.settings});
const[profName,setProfName]=useState(profile.name);
const[profInitials,setProfInitials]=useState(profile.initials);
const[profColor,setProfColor]=useState(profile.color);
const[advancedTab,setAdvancedTab]=useState("security");
const filtered=search
?SETTINGS_NAV.filter(n=>
n.label.toLowerCase().includes(search.toLowerCase())||
(n.keywords&&n.keywords.toLowerCase().includes(search.toLowerCase())))
:SETTINGS_NAV;
function save(){onSave({...profile,name:profName,initials:profInitials,color:profColor,settings:{...ls}});}
// Derive a local theme from ls (for live preview inside settings)
const lC=mkTheme(ls.isDark,ls.accent);
return
{acct.av}
{acct.email||acct.id}
{acct.display&&acct.display!==(acct.email||acct.id)&&
{acct.display}}
{stats.count.toLocaleString()} emails • {stats.size}
Active
Discover more accounts
Scan your mail server for new folders added since your last import.
{!scanResult&&}
{scanResult&&scanResult.found>0&&
{scanResult.found} new folder{scanResult.found!==1?"s":""} found
{scanResult.folders.join(", ")}
No new folders found. Your account list is up to date.
}
{/* Header */}
Settings
{/* Left nav */}
{/* Content area */}
}
{section==="theme"&&}
{section==="notifications"&&}
{section==="accounts"&&}
{section==="rules"&&}
{section==="privacy"&&}
{section==="backup"&&}
{section==="spam"&&}
{section==="emailaddr"&&{onClose();onSetupNew?.();}}/>}
{section==="encryption"&&}
{advancedTab==="smb"&&}
}
{/* Footer */}
setSearch(e.target.value)} placeholder="Search"
style={{width:"100%",boxSizing:"border-box",padding:"7px 9px 7px 28px",border:`1px solid ${C.inBorder}`,
borderRadius:6,fontSize:13,fontFamily:FONT,background:C.inputBg,color:C.text,outline:"none"}}/>
{filtered.map(n=>{
const sel=section===n.id;
return
{setSection(n.id);setSearch("");}}
style={{display:"flex",alignItems:"center",gap:9,padding:"8px 10px",borderRadius:7,cursor:"pointer",marginBottom:1,
background:sel?C.selectedBg:"transparent",borderLeft:`3px solid ${sel?C.accent:"transparent"}`}}
onMouseEnter={e=>{if(!sel)e.currentTarget.style.background=C.hover;}}
onMouseLeave={e=>{if(!sel)e.currentTarget.style.background="transparent";}}>
{n.label}
;
})}
{section==="advanced" ?SETTINGS_NAV.find(n=>n.id==="advanced")?.label :SETTINGS_NAV.find(n=>n.id===section)?.label}
{section==="general"&&
This section will be available in a future update.
}
{section==="advanced"&&<>
{/* Sub-tab bar */}
{[{id:"security",icon:"ti-lock",label:"Security"},{id:"smb",icon:"ti-server",label:"SMB Share"}].map(t=>(
))}
{advancedTab==="security"&&{e.currentTarget.style.background=C.hover;}:undefined}
onMouseLeave={onClick?e=>{e.currentTarget.style.background="transparent";}:undefined}>
{children}
;
}
function SCard({children,C}){
return {label}
{sub&&{sub}
}
{children}
;
}
function SectionHead({label,C}){
return {label}
;
}
function SettingsGeneral({ls,setLS,profile,profName,setProfName,profInitials,setProfInitials,profColor,setProfColor,C}){
const[pdOpen,setPdOpen]=useState(false);
const[firstName,setFirstName]=useState(()=>profName.split(" ")[0]||"");
const[lastName,setLastName]=useState(()=>profName.split(" ").slice(1).join(" ")||"");
const[company,setCompany]=useState("");
const[street,setStreet]=useState("");
const[zip,setZip]=useState("");
const[city,setCity]=useState("");
const[country,setCountry]=useState("United States of America");
const[phone,setPhone]=useState("");
const[pdSaved,setPdSaved]=useState(false);
const COUNTRIES=["United States of America","Canada","United Kingdom","Australia","Germany","France","Netherlands","New Zealand","Other"];
const fieldSt={width:"100%",boxSizing:"border-box",padding:"7px 10px",border:`1px solid ${C.inBorder}`,
borderRadius:5,fontSize:13,fontFamily:FONT,outline:"none",color:C.text,background:C.inputBg};
const lbSt={display:"block",fontSize:12,fontWeight:600,color:C.muted,marginBottom:4};
function savePD(){
const full=(firstName+" "+lastName).trim();
if(full)setProfName(full);
setPdSaved(true);
setTimeout(()=>setPdSaved(false),2500);
}
return <>
{/* Name row */}
{/* Initials + Avatar color */}
{/* Avatar preview */}
{/* Company */}
{/* Country */}
{/* Phone */}
}
setLS(p=>({...p,autoMark:v}))} C={C}/>
;
}
function SettingsTheme({ls,setLS,lC,C,loginBg,setLoginBg,loginDark,setLoginDark}){
const loginBgRef=useRef();
const customAccent=!ACCENTS.includes(ls.accent);
const customBg=ls.bg&&ls.bg.startsWith("#")&&!BG_SOLID.some(s=>s.preview.toLowerCase()===ls.bg.toLowerCase());
function bgIsDarkHex(hex){
if(!/^#[0-9a-f]{6}$/i.test(hex))return false;
const r=parseInt(hex.slice(1,3),16),g=parseInt(hex.slice(3,5),16),b=parseInt(hex.slice(5,7),16);
return (r*0.299+g*0.587+b*0.114)<128;
}
return <>
{/* Accent colors */}
setFirstName(e.target.value)} style={fieldSt}/>
setLastName(e.target.value)} style={fieldSt}/>
setProfInitials(e.target.value.toUpperCase().slice(0,2))} maxLength={2}
style={{...fieldSt,width:"100%",textAlign:"center",fontWeight:700,letterSpacing:"0.05em"}}/>
{ACCENTS.map(a=>(
setProfColor(a)} style={{width:24,height:24,borderRadius:5,background:a,
border:`2.5px solid ${a===profColor?"#fff":"transparent"}`,outline:a===profColor?`2px solid ${a}`:"none",
cursor:"pointer",transition:"transform 0.1s"}}
onMouseEnter={e=>e.currentTarget.style.transform="scale(1.15)"}
onMouseLeave={e=>e.currentTarget.style.transform="scale(1)"}/>
))}
{(firstName+" "+lastName).trim()||"Your name"}
{profile.accountIds?.[0]||""}
setCompany(e.target.value)} style={fieldSt}/>
{/* Street */}
setStreet(e.target.value)} style={fieldSt}/>
{/* ZIP + City */}
setZip(e.target.value)} style={fieldSt}/>
setCity(e.target.value)} style={fieldSt}/>
setPhone(e.target.value)} style={fieldSt}/>
{/* Save */}
{pdSaved&&
Saved
}
{ACCENTS.map(a=>(
setLS(p=>({...p,notifications:v}))} C={C}/> setLS(p=>({...p,sound:v}))} C={C}/> ;
}
function SettingsAccounts({accounts,profile,updateAccount,C}){
const[editingId,setEditingId]=useState(null);
const[draft,setDraft]=useState({});
const[emailErr,setEmailErr]=useState("");
function startEdit(acc){
setEditingId(acc.id);
setEmailErr("");
setDraft({display:acc.display,av:acc.av,avColor:acc.avColor,email:acc.email??acc.id});
}
function cancelEdit(){setEditingId(null);setDraft({});setEmailErr("");}
function saveEdit(id){
const trimmed=draft.email.trim();
if(trimmed&&!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmed)){
setEmailErr("Enter a valid email address.");return;
}
updateAccount(id,{display:draft.display,av:draft.av,avColor:draft.avColor,email:trimmed||null});
setEditingId(null);setDraft({});setEmailErr("");
}
return <>
setLS(p=>({...p,accent:a}))}
style={{width:36,height:36,borderRadius:"50%",background:a,cursor:"pointer",
border:`3px solid ${a===ls.accent?"#fff":"transparent"}`,
outline:a===ls.accent?`2.5px solid ${a}`:"none",transition:"transform 0.1s",boxSizing:"border-box"}}
onMouseEnter={e=>e.currentTarget.style.transform="scale(1.15)"}
onMouseLeave={e=>e.currentTarget.style.transform="scale(1)"}/>
))}
{/* Custom accent picker */}
Current accent:
{/* Backgrounds */}
{ls.accent.toUpperCase()}
{customAccent&&· custom}
{BG_SOLID.map(bg=>(
{/* Live preview strip */}
setLS(p=>({...p,bg:bg.id,isDark:bg.dark}))}
style={{display:"flex",flexDirection:"column",alignItems:"center",gap:7,cursor:"pointer"}}>
))}
{/* Custom background picker */}
{bg.dark&&
}
{bg.label}
Reading pane preview
{/* Login background */}
{[{v:true,icon:"ti-moon",label:"Dark"},{v:false,icon:"ti-sun",label:"Light"}].map(opt=>(
))}
{/* Thumbnail */}
;
}
function SettingsNotifications({ls,setLS,C}){
return {loginBg?"Custom image":"Default mountain photo"}
{
const file=e.target.files?.[0];
if(!file)return;
const reader=new FileReader();
reader.onload=ev=>setLoginBg(ev.target.result);
reader.readAsDataURL(file);
e.target.value="";
}}/>
{loginBg&&}
JPG, PNG, WEBP · shown on the login screen right panel
Accounts in this profile: {profile.accountIds.length}. All accounts read from .Mails/ on the SMB share.
{/* Row header */}
{!isEditing&&startEdit(acc)}/>}
{isEditing&&}
{/* Inline edit form */}
{isEditing&&
;
})}
;
}
function SettingsSecurity({ls,setLS,C,profile}){
const pinEnabled=!!(ls.pin);
const[flow,setFlow]=useState(null); // null | "setup" | "disable"
const[newPin,setNewPin]=useState("");
const[confirmPin,setConfirmPin]=useState("");
const[currentPin,setCurrentPin]=useState("");
const[pinErr,setPinErr]=useState("");
const[showDeleteDialog,setShowDeleteDialog]=useState(false);
const[deleteStep,setDeleteStep]=useState(1); // 1=warn, 2=confirm type name, 3=done
const[deleteInput,setDeleteInput]=useState("");
const CONFIRM_WORD="DELETE";
function handleToggle(v){
if(v){setFlow("setup");setNewPin("");setConfirmPin("");setPinErr("");}
else{setFlow("disable");setCurrentPin("");setPinErr("");}
}
function submitSetup(){
if(!/^\d{4,6}$/.test(newPin)){setPinErr("PIN must be 4–6 digits.");return;}
if(newPin!==confirmPin){setPinErr("PINs don't match.");return;}
setLS(p=>({...p,pin:newPin}));
setFlow(null);setNewPin("");setConfirmPin("");setPinErr("");
}
function submitDisable(){
if(currentPin!==ls.pin){setPinErr("Incorrect PIN.");return;}
setLS(p=>({...p,pin:null}));
setFlow(null);setCurrentPin("");setPinErr("");
}
function cancelFlow(){setFlow(null);setNewPin("");setConfirmPin("");setCurrentPin("");setPinErr("");}
const pinInputSt={padding:"8px 12px",border:`1px solid ${C.inBorder}`,borderRadius:5,
fontSize:18,fontFamily:"monospace",outline:"none",color:C.text,background:C.inputBg,
width:150,boxSizing:"border-box",letterSpacing:6,textAlign:"center"};
return <>
{flow==="setup"&&
}
{flow==="disable"&&
}
{/* ── Danger Zone ── */}
setLS(p=>({...p,readReceipts:v}))} C={C}/> ;
}
function SettingsSMB({smbConfig,setSmbConfig,C}){
const[status,setStatus]=useState(null); // null | "testing" | "ok" | "err"
const[errMsg,setErrMsg]=useState("");
function set(k,v){setSmbConfig(p=>({...p,[k]:v}));}
function testConn(){
setStatus("testing");setErrMsg("");
setTimeout(()=>{
if(smbConfig.host.trim()&&smbConfig.share.trim()){setStatus("ok");}
else{setStatus("err");setErrMsg("Host and share name are required.");}
},1400);
}
const inputSt={width:"100%",boxSizing:"border-box",padding:"7px 10px",border:`1px solid ${C.inBorder}`,
borderRadius:5,fontSize:13.5,fontFamily:FONT,outline:"none",color:C.text,background:C.inputBg};
return <>
{/* Empty trash now */}
{trashAfter!=="never"&&
{paths.map((p,i)=>(
{schedule==="weekly"&&
}
{schedule!=="manual"&&
setScheduleTime(e.target.value)}
style={{...selSt,width:110}}/>
}
{schedule!=="manual"&&
Active
}
{/* ── Backup type ──────────────────────────────────────────── */}
{[
{id:"smart", label:"Smart (recommended)", sub:"Incremental daily, full every 30 days or 10 incrementals"},
{id:"full", label:"Always full", sub:"Every backup is a complete copy — safer, uses more storage"},
{id:"inc", label:"Always incremental", sub:"Only new/changed emails backed up each time"},
].map(opt=>(
{isEditing?draft.display:acc.display}
{isEditing?(draft.email||"No email set"):(acc.email??("Default account · .Mails/default/"))}
{setDraft(p=>({...p,email:e.target.value}));setEmailErr("");}}
placeholder="you@example.com" type="email"
style={{width:"100%",boxSizing:"border-box",padding:"7px 10px",
border:`1px solid ${emailErr?C.danger??'#c50f1f':C.inBorder}`,borderRadius:5,
fontSize:13.5,fontFamily:FONT,outline:"none",color:C.text,background:C.inputBg}}/>
{emailErr&&
{emailErr}
}
setDraft(p=>({...p,display:e.target.value}))}
style={{width:"100%",boxSizing:"border-box",padding:"7px 10px",border:`1px solid ${C.inBorder}`,borderRadius:5,fontSize:13.5,fontFamily:FONT,outline:"none",color:C.text,background:C.inputBg}}/>
setDraft(p=>({...p,av:e.target.value.toUpperCase().slice(0,2)}))} maxLength={2}
style={{width:56,padding:"7px 10px",border:`1px solid ${C.inBorder}`,borderRadius:5,fontSize:13.5,fontFamily:FONT,outline:"none",color:C.text,background:C.inputBg,textAlign:"center",fontWeight:700,boxSizing:"border-box"}}/>
{ACCENTS.map(a=>(
}
setDraft(p=>({...p,avColor:a}))}
style={{width:24,height:24,borderRadius:5,background:a,cursor:"pointer",
border:`2.5px solid ${a===draft.avColor?"#fff":"transparent"}`,
outline:a===draft.avColor?`2px solid ${a}`:"none",transition:"transform 0.1s"}}
onMouseEnter={e=>e.currentTarget.style.transform="scale(1.15)"}
onMouseLeave={e=>e.currentTarget.style.transform="scale(1)"}/>
))}
Set up PIN
{setNewPin(e.target.value.replace(/\D/g,""));setPinErr("");}}
style={pinInputSt} placeholder="••••"/>
{setConfirmPin(e.target.value.replace(/\D/g,""));setPinErr("");}}
style={pinInputSt} placeholder="••••"/>
{pinErr&&{pinErr}
}
Enter current PIN to disable
{setCurrentPin(e.target.value.replace(/\D/g,""));setPinErr("");}}
style={pinInputSt} placeholder="••••"/>
{pinErr&&{pinErr}
}
{/* Header */}
{/* ── Delete confirmation dialog ── */}
{showDeleteDialog&&
Danger Zone
{/* Delete profile row */}
Delete this profile
Permanently removes this profile and all locally cached email data.
The SMB share and its files are never modified.
The SMB share and its files are never modified.
{if(e.target===e.currentTarget){setShowDeleteDialog(false);setDeleteStep(1);setDeleteInput("");}}}>
}
;
}
function SettingsPrivacy({ls,setLS,C}){
return
{deleteStep===1&&<>
}
{deleteStep===2&&<>
}
{deleteStep===3&&<>
}
Delete profile?
You are about to permanently delete the profile "{profile?.name||"this profile"}" and all its locally cached email data, settings, and search index.
Your emails on the SMB share are completely untouched — no files will be deleted, moved, or modified.
Local DashMail database, cached attachments, and profile settings will be permanently deleted.
This action cannot be undone. Create a backup first if you want to restore later.
Confirm deletion
Type {CONFIRM_WORD} to permanently delete this profile.
setDeleteInput(e.target.value.toUpperCase())} placeholder={CONFIRM_WORD} style={{width:"100%",boxSizing:"border-box",padding:"9px 12px",border:`1.5px solid ${deleteInput===CONFIRM_WORD?"#c50f1f":C.inBorder}`, borderRadius:6,fontSize:14,fontFamily:"monospace",outline:"none",color:"#c50f1f", background:deleteInput===CONFIRM_WORD?"#fef2f2":C.inputBg,letterSpacing:2,marginBottom:18, textAlign:"center",fontWeight:700}}/>Profile deleted
The profile and all local data have been removed.
Your emails on the SMB share remain untouched.
You will be signed out now.
Your emails on the SMB share remain untouched.
You will be signed out now.
Configure the SMB network share where your mailbox folders are stored.
DashMail reads mail from \\HOST\SHARE\SUBFOLDER.
set("host",e.target.value)} placeholder="192.168.1.100 or mailserver.local" style={inputSt}/>
set("share",e.target.value)} placeholder="mail" style={inputSt}/>
set("subfolder",e.target.value)} placeholder=".Mails" style={inputSt}/>
set("username",e.target.value)} placeholder="domain\\user or user@domain" style={inputSt} autoComplete="off"/>
set("password",e.target.value)} style={inputSt} autoComplete="new-password"/>
{status==="ok"&&
Connected
}
{status==="err"&&
{errMsg||"Connection failed"}
}
;
}
// ── Spam & Trash settings ─────────────────────────────────────────────────────
function SettingsSpamTrash({C}){
const[trashAfter,setTrashAfter]=useState("30");
const[spamAfter,setSpamAfter]=useState("30");
const[confirmDelete,setConfirmDelete]=useState(true);
const[emptyingTrash,setEmptyingTrash]=useState(false);
const[emptyDone,setEmptyDone]=useState(false);
function emptyNow(){
setEmptyingTrash(true);setEmptyDone(false);
setTimeout(()=>{setEmptyingTrash(false);setEmptyDone(true);setTimeout(()=>setEmptyDone(false),3000);},1600);
}
const TRASH_OPTS=[
{v:"never", label:"Never (manual only)"},
{v:"1", label:"After 1 day"},
{v:"7", label:"After 7 days"},
{v:"14", label:"After 14 days"},
{v:"30", label:"After 30 days"},
{v:"60", label:"After 60 days"},
{v:"90", label:"After 90 days"},
];
const SPAM_OPTS=[
{v:"never", label:"Never (manual only)"},
{v:"7", label:"After 7 days"},
{v:"14", label:"After 14 days"},
{v:"30", label:"After 30 days"},
{v:"60", label:"After 60 days"},
];
const selSt={background:C.inputBg,border:`1px solid ${C.inBorder}`,borderRadius:5,
padding:"5px 9px",color:C.text,fontFamily:FONT,fontSize:13,outline:"none"};
return <>
{emptyDone&&
Trash emptied
}
Trash items older than {TRASH_OPTS.find(o=>o.v===trashAfter)?.label.replace("After ","")} will be permanently deleted from your local database. The SMB share is never modified.
}
;
}
// ── Backup settings ───────────────────────────────────────────────────────────
const MOCK_BACKUP_HISTORY=[
{id:"bk-001",type:"full", date:"2026-05-24 22:00",emails:1842,size:"48.3 MB",status:"ok",incrementals:[
{id:"bk-002",type:"inc",date:"2026-05-25 22:00",emails:12,size:"1.1 MB",status:"ok"},
{id:"bk-003",type:"inc",date:"2026-05-26 22:00",emails:8, size:"0.7 MB",status:"ok"},
{id:"bk-004",type:"inc",date:"2026-05-27 22:00",emails:19,size:"2.4 MB",status:"ok"},
]},
{id:"bk-005",type:"full", date:"2026-04-24 22:00",emails:1803,size:"46.1 MB",status:"ok",incrementals:[]},
];
function SettingsBackup({C}){
const[paths,setPaths]=useState(["C:\\Users\\User\\DashMailBackups"]);
const[newPath,setNewPath]=useState("");
const[schedule,setSchedule]=useState("daily");
const[scheduleDay,setScheduleDay]=useState("1"); // 0=Sun..6=Sat
const[scheduleTime,setScheduleTime]=useState("22:00");
const[bkType,setBkType]=useState("smart");
const[retention,setRetention]=useState("5");
const[history,setHistory]=useState(MOCK_BACKUP_HISTORY);
const[expanded,setExpanded]=useState({"bk-001":true});
const[running,setRunning]=useState(false);
const[runType,setRunType]=useState(null); // "full"|"inc"
const[runMsg,setRunMsg]=useState("");
const[showDropdown,setShowDropdown]=useState(false);
const[showRestore,setShowRestore]=useState(false);
const[restoreFile,setRestoreFile]=useState("");
const[restoreConfirm,setRestoreConfirm]=useState(false);
const[restoreRunning,setRestoreRunning]=useState(false);
const[restoreDone,setRestoreDone]=useState(false);
const dropRef=useRef();
const folderInputRef=useRef();
useEffect(()=>{
function handleClick(e){if(dropRef.current&&!dropRef.current.contains(e.target))setShowDropdown(false);}
document.addEventListener("mousedown",handleClick);
return()=>document.removeEventListener("mousedown",handleClick);
},[]);
async function browseForFolder(){
// Use File System Access API if available (Edge / Chrome on Windows)
if(window.showDirectoryPicker){
try{
const dir=await window.showDirectoryPicker({mode:"read"});
// API gives folder name only (full path blocked by browser security)
// Prefix with a common root so user can correct it in the text field
setNewPath(dir.name);
}catch(e){/* user cancelled */}
} else {
// Fallback: hidden file input with webkitdirectory
folderInputRef.current?.click();
}
}
function addPath(){
const p=newPath.trim();
if(p&&!paths.includes(p)){setPaths(prev=>[...prev,p]);}
setNewPath("");
}
function removePath(i){setPaths(prev=>prev.filter((_,idx)=>idx!==i));}
function startBackup(type){
setRunning(true);setRunType(type);setRunMsg("");setShowDropdown(false);
const label=type==="full"?"Full backup":"Incremental backup";
setTimeout(()=>{
const now=new Date().toISOString().replace("T"," ").slice(0,16);
const newEntry=type==="full"
?{id:"bk-new-f",type:"full",date:now,emails:1860,size:"49.1 MB",status:"ok",incrementals:[]}
:{id:"bk-new-i",type:"inc",date:now,emails:7,size:"0.6 MB",status:"ok"};
if(type==="full"){
setHistory(prev=>[newEntry,...prev]);
} else {
setHistory(prev=>prev.map((b,i)=>i===0?{...b,incrementals:[newEntry,...(b.incrementals||[])]}:b));
}
setRunning(false);setRunMsg(`${label} completed successfully.`);
setTimeout(()=>setRunMsg(""),6000);
},2400);
}
function doRestore(){
setRestoreRunning(true);
setTimeout(()=>{setRestoreRunning(false);setRestoreDone(true);},2800);
}
const inputSt={width:"100%",boxSizing:"border-box",padding:"7px 10px",border:`1px solid ${C.inBorder}`,
borderRadius:5,fontSize:13,fontFamily:FONT,outline:"none",color:C.text,background:C.inputBg};
const selSt={...inputSt,width:"auto"};
return <>
{/* ── Backup locations ─────────────────────────────────────── */}
{p}
))}
{/* Hidden folder picker fallback for browsers without showDirectoryPicker */}
{
const files=e.target.files;
if(files&&files.length>0){
const folderName=files[0].webkitRelativePath.split("/")[0];
setNewPath(folderName);
}
e.target.value="";
}}/>
setNewPath(e.target.value)}
onKeyDown={e=>{if(e.key==="Enter")addPath();}}
placeholder="Add backup path, e.g. D:\Backups\DashMail"
style={{...inputSt,flex:1}}/>
{/* ── Schedule ─────────────────────────────────────────────── */}
setBkType(opt.id)}
style={{display:"flex",alignItems:"flex-start",gap:10,padding:"10px 0",
borderBottom:opt.id!=="inc"?`1px solid ${C.border}`:"none",cursor:"pointer"}}>
{/* ── Back Up Now ──────────────────────────────────────────── */}
{showDropdown&&
{runMsg&&
{runMsg}
}
{/* ── Backup history ───────────────────────────────────────── */}
{history.length===0
?
;
}
function ContactForm({contact,onSave,onCancel,C}){
const[name,setName]=useState(contact?.name??"");
const[email,setEmail]=useState(contact?.email??"");
const[phone,setPhone]=useState(contact?.phone??"");
const[address,setAddress]=useState(contact?.address??"");
const[av,setAv]=useState(contact?.av??"");
const[avColor,setAvColor]=useState(contact?.avColor??ACCENTS[0]);
const[emailErr,setEmailErr]=useState("");
function autoInitials(n){
const parts=n.trim().split(/\s+/);
return parts.length>=2?(parts[0][0]+parts[parts.length-1][0]).toUpperCase():n.slice(0,2).toUpperCase();
}
function handleName(v){
setName(v);
if(!av||av===autoInitials(name))setAv(autoInitials(v));
}
function handleSave(){
if(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim())){setEmailErr("Enter a valid email address.");return;}
onSave({name:name.trim(),email:email.trim(),phone:phone.trim(),address:address.trim(),av:av.slice(0,2)||"?",avColor});
}
const inputSt={width:"100%",boxSizing:"border-box",padding:"7px 10px",border:`1px solid ${C.inBorder}`,
borderRadius:5,fontSize:13.5,fontFamily:FONT,outline:"none",color:C.text,background:C.inputBg};
return
{bkType===opt.id&&
))}
{/* ── Retention ────────────────────────────────────────────── */}
}
{opt.label}
{opt.sub}
{[{t:"full",label:"Full backup",icon:"ti-database"},
{t:"inc", label:"Incremental backup",icon:"ti-database-plus"}].map(o=>(
}
startBackup(o.t)}
style={{display:"flex",alignItems:"center",gap:8,padding:"9px 14px",
cursor:"pointer",fontSize:13,color:C.text}}
onMouseEnter={e=>e.currentTarget.style.background=C.hover}
onMouseLeave={e=>e.currentTarget.style.background="transparent"}>
{o.label}
))}
No backups yet.
:
{history.map(b=>{
const open=!!expanded[b.id];
return
}
{/* ── Restore dialog ───────────────────────────────────────── */}
{showRestore&&
{/* Full row */}
;
})}
setExpanded(p=>({...p,[b.id]:!p[b.id]}))}
style={{display:"flex",alignItems:"center",gap:10,padding:"9px 12px",cursor:"pointer"}}
onMouseEnter={e=>e.currentTarget.style.background=C.hover}
onMouseLeave={e=>e.currentTarget.style.background="transparent"}>
{b.status==="ok"?"OK":"Error"}
{/* Incrementals */}
{open&&b.incrementals?.length>0&&
FULL
{b.date}
{b.incrementals?.length>0&&+{b.incrementals.length} incremental{b.incrementals.length!==1?"s":""}}
{b.emails.toLocaleString()} emails · {b.size}
{b.incrementals.map(inc=>(
}
e.currentTarget.style.background=C.hover}
onMouseLeave={e=>e.currentTarget.style.background="transparent"}>
OK
))}
INC
{inc.date}
{inc.emails} new/changed · {inc.size}
{if(e.target===e.currentTarget){setShowRestore(false);setRestoreRunning(false);setRestoreDone(false);}}}>
}
;
}
// ── Contacts ──────────────────────────────────────────────────────────────────
function RecipientInput({value,onChange,contacts,fieldSt,C}){
const toChips=v=>v?v.split(",").map(s=>s.trim()).filter(Boolean):[];
const[chips,setChips]=useState(()=>toChips(value));
const[inputVal,setInputVal]=useState("");
const[open,setOpen]=useState(false);
const[candidates,setCandidates]=useState([]);
const inputRef=useRef();
const internal=useRef(false);
useEffect(()=>{
if(internal.current){internal.current=false;return;}
setChips(toChips(value));
},[value]);
function syncUp(newChips){
internal.current=true;
setChips(newChips);
onChange(newChips.join(", "));
}
function addChip(str){
const s=str.trim();
if(!s)return;
syncUp([...chips,s]);
setInputVal("");setOpen(false);
}
function removeChip(i){syncUp(chips.filter((_,idx)=>idx!==i));}
function handleKey(e){
if((e.key===","||e.key==="Enter"||e.key==="Tab")&&inputVal.trim()){
e.preventDefault();addChip(inputVal);
}
if(e.key==="Backspace"&&!inputVal&&chips.length>0) syncUp(chips.slice(0,-1));
}
function filter(v){
if(!v.trim()){setOpen(false);return;}
const m=contacts.filter(c=>
c.name.toLowerCase().includes(v.toLowerCase())||
c.email.toLowerCase().includes(v.toLowerCase())
).slice(0,6);
setCandidates(m);setOpen(m.length>0);
}
function pick(c){addChip(c.name+" <"+c.email+">");inputRef.current?.focus();}
return
{restoreDone
?<>
:!restoreConfirm
?<>
:<>
}
Restore complete
DashMail has been restored to the selected backup point. Please restart the application to apply all changes.
Restore from backup
{restoreFile}
A safety backup will be created first. Your current data will be saved before anything is overwritten. The SMB share is never modified.
setRestoreFile(e.target.value)} placeholder="C:\Backups\dashmail-2026-05-24.zip" style={inputSt}/>
Confirm restore
This will replace your local DashMail database with data from:
{restoreFile}
{restoreFile}
Your current local database will be overwritten. A safety backup will be saved to your first backup location before restore begins. The SMB share will not be touched.
inputRef.current?.focus()}>
{chips.map((chip,i)=>(
))}
{setInputVal(e.target.value);filter(e.target.value);}}
onKeyDown={handleKey}
onBlur={()=>{setTimeout(()=>setOpen(false),150);if(inputVal.trim())addChip(inputVal);}}
style={{...fieldSt,flex:"1 1 80px",minWidth:60,padding:0}}/>
{open&&
;
}
function ContactPickerModal({contacts,onClose,onAdd,C}){
const[search,setSearch]=useState("");
const[sel,setSel]=useState(new Set());
const filtered=search?contacts.filter(c=>
c.name.toLowerCase().includes(search.toLowerCase())||
c.email.toLowerCase().includes(search.toLowerCase())
):contacts;
function toggle(id){setSel(s=>{const n=new Set(s);n.has(id)?n.delete(id):n.add(id);return n;});}
return
{candidates.map(c=>(
}
{e.preventDefault();pick(c);}}
style={{display:"flex",alignItems:"center",gap:9,padding:"8px 12px",cursor:"pointer"}}
onMouseEnter={e=>e.currentTarget.style.background=C.hover}
onMouseLeave={e=>e.currentTarget.style.background="transparent"}>
))}
{c.name}
{c.email}
Add from Contacts
setSearch(e.target.value)} placeholder="Search contacts…"
style={{width:"100%",boxSizing:"border-box",padding:"7px 10px",border:`1px solid ${C.inBorder}`,
borderRadius:6,fontSize:13,fontFamily:FONT,outline:"none",color:C.text,background:C.inputBg}}/>
{filtered.map(c=>{
const on=sel.has(c.id);
return
toggle(c.id)}
style={{display:"flex",alignItems:"center",gap:10,padding:"10px 14px",cursor:"pointer",
background:on?C.accentBg:"transparent"}}
onMouseEnter={e=>{if(!on)e.currentTarget.style.background=C.hover;}}
onMouseLeave={e=>{if(!on)e.currentTarget.style.background="transparent";}}>
;
})}
{filtered.length===0&&{c.name}
{c.email}
{on&&}
No contacts found
}
handleName(e.target.value)} placeholder="Sarah Chen" style={inputSt}/>
setAv(e.target.value.toUpperCase().slice(0,2))} maxLength={2}
style={{width:56,padding:"7px 10px",border:`1px solid ${C.inBorder}`,borderRadius:5,
fontSize:13.5,fontFamily:FONT,outline:"none",color:C.text,background:C.inputBg,
textAlign:"center",fontWeight:700,boxSizing:"border-box"}}/>
{setEmail(e.target.value);setEmailErr("");}} placeholder="sarah@example.com" type="email"
style={{...inputSt,border:`1px solid ${emailErr?"#c50f1f":C.inBorder}`}}/>
{emailErr&&
{emailErr}
}
setPhone(e.target.value)} placeholder="+1 555 000 0000" type="tel" style={inputSt}/>