gentelella
Version:
Gentelella v4 — free admin template. 60 pages, 20 chart variants, fully interactive inbox & kanban, live theme generator, component playground, PWA-ready. Vite 8, vanilla JS, no Bootstrap, no jQuery.
1 lines • 23 kB
JavaScript
import{t as e}from"./toast-DgCSlJPv.js";import{n as t}from"./modal-MTuCfURV.js";import{r as n,t as r}from"./data-adapter-B-GF0xCf.js";var o=1;function a(e){return{id:"msg-"+o++,folder:e.folder,trashed:!!e.trashed,unread:!!e.unread,starred:!!e.starred,label:e.label||null,from:e.from,fromEmail:e.fromEmail||"",to:e.to||"",subject:e.subject||"(no subject)",preview:e.preview||"",body:e.body||"",time:e.time}}var s={messages:[a({folder:"inbox",unread:!0,starred:!0,label:"work",from:"Sarah K.",fromEmail:"sarah@design.co",subject:"Re: Q1 design review",preview:"I've added comments to the figma file. The hero section…",body:"Hey,\n\nI've added comments to the figma file. The hero section needs a tighter type scale, and the donut on the dashboard could use a 2px border to lift it off the surface.\n\nLet me know what you think — I'm around all afternoon.\n\nSarah",time:"9:42 AM"}),a({folder:"inbox",unread:!0,starred:!1,label:"work",from:"GitHub",fromEmail:"noreply@github.com",subject:"PR #248 ready for review",preview:"feat(dashboard): wire chart tabs to data source",body:"Pull request #248 by @aigars is ready for your review.\n\nfeat(dashboard): wire chart tabs to data source\n\n3 files changed, 47 additions, 12 deletions.\n\nView on GitHub →",time:"8:14 AM"}),a({folder:"inbox",unread:!0,starred:!1,label:"work",from:"Stripe",fromEmail:"invoicing@stripe.com",subject:"Your invoice is ready",preview:"Invoice #INV-04812 for $499.00 has been generated.",body:"Invoice #INV-04812\nAmount: $499.00 USD\nDue: Apr 30, 2026\n\nView and pay invoice →\n\nThanks for using Stripe.",time:"7:30 AM"}),a({folder:"inbox",unread:!1,starred:!1,label:"personal",from:"Michael R.",fromEmail:"mike@somewhere.io",subject:"Lunch tomorrow?",preview:"Hey, are you free for lunch tomorrow at the new place?",body:"Hey,\n\nAre you free for lunch tomorrow at the new place on 4th?\n\n12:30 work?\n\n— Mike",time:"Yesterday"}),a({folder:"inbox",unread:!1,starred:!0,label:"work",from:"Emily W.",fromEmail:"emily@design.co",subject:"Sprint retro notes",preview:"Posted the action items from yesterday's retro.",body:"Posted the retro notes — three action items:\n\n1. Move standup to 9:30 (was 9:00)\n2. Add a 'blocked' column to the board\n3. Pair up on the perf work\n\nLink in the channel.",time:"Yesterday"}),a({folder:"inbox",unread:!1,starred:!1,label:"work",from:"Linear",fromEmail:"notifications@linear.app",subject:"You were assigned 3 issues",preview:"GEN-128, GEN-129, GEN-131 are now assigned to you.",body:"Three issues assigned to you:\n\nGEN-128 · Wire empty state on file manager search\nGEN-129 · Fix focus trap on nested modals\nGEN-131 · Migrate icons.html to inline SVG\n\nView in Linear →",time:"Tue"}),a({folder:"inbox",unread:!1,starred:!1,label:null,from:"Vercel",fromEmail:"updates@vercel.com",subject:"Deployment succeeded",preview:"gentelella-v4.vercel.app deployed in 28s",body:"Production deployment for gentelella-v4 succeeded.\n\nDuration: 28s\nCommit: e08f69c — Release 2.2.0 — fresh for 2026\n\nView deployment →",time:"Tue"}),a({folder:"inbox",unread:!1,starred:!1,label:"work",from:"Aigars S.",fromEmail:"aigars@colorlib.com",subject:"Draft for landing copy",preview:"Take a look when you get a chance — happy to iterate.",body:"First pass at the landing copy:\n\n> The free Bootstrap admin template, redesigned for 2026.\n> Fresh design system. Real ECharts. Real DataTables. Vite 8, vanilla JS, zero jQuery.\n\nHappy to iterate. — A.",time:"Mon"}),a({folder:"inbox",unread:!1,starred:!1,label:null,from:"Notion",fromEmail:"team@notion.com",subject:"Mentioned in Q2 OKRs",preview:"@you was mentioned in the new Q2 OKRs document.",body:"You were mentioned in:\n\nQ2 OKRs — 2026\n > … @aigars to drive the v4 release and migration playbook.\n\nView document →",time:"Apr 23"}),a({folder:"inbox",unread:!1,starred:!1,label:"work",from:"Diego R.",fromEmail:"diego@research.co",subject:"Customer feedback summary",preview:"Compiled the top 10 feature requests from interviews.",body:"Compiled the top 10 feature requests from the last 12 customer interviews:\n\n1. Dark mode (8 mentions) ✓ shipped\n2. Mobile drawer (6) ✓ shipped\n3. Command palette (5) ✓ shipped\n4. Multi-tenant theming\n5. Print-friendly invoice\n…\n\nFull doc linked.",time:"Apr 22"}),a({folder:"inbox",unread:!1,starred:!1,label:"promotions",from:"Figma",fromEmail:"team@figma.com",subject:"🎁 Your design tools, refreshed",preview:"New plugins, faster autosave, and AI features.",body:"Hi Aigars,\n\nWe shipped a bunch of stuff this month — autosave got 4× faster, plugins now run in a sandboxed worker, and our AI assist is in open beta.\n\nWhat's new →",time:"Apr 20"}),a({folder:"inbox",unread:!1,starred:!1,label:"urgent",from:"Security",fromEmail:"security@colorlib.com",subject:"Action required: 2FA reset",preview:"Please confirm your 2FA codes have been backed up.",body:"We rotated the 2FA seed for your account on Apr 19.\n\nIf you haven't done so already, please confirm your backup codes are saved somewhere safe. Without them you may be locked out if you lose your device.\n\nReview backup codes →",time:"Apr 19"}),a({folder:"sent",unread:!1,starred:!1,label:"work",from:"Me",to:"sarah@design.co",subject:"Q1 design review",preview:"Sharing the figma link — comments welcome.",body:"Hey Sarah,\n\nSharing the figma link for Q1. Annotated the open questions.\n\nLet me know if anything looks off.\n\n— A.",time:"Yesterday"}),a({folder:"sent",unread:!1,starred:!1,label:"work",from:"Me",to:"team@colorlib.com",subject:"v4 release plan",preview:"Cutting the beta tag tomorrow if no blockers come in.",body:"Quick update — cutting v4.0.0-beta.1 tomorrow morning unless something blocks. PR list and release notes in the doc.\n\n— A.",time:"Mon"}),a({folder:"sent",unread:!1,starred:!1,label:"personal",from:"Me",to:"mike@somewhere.io",subject:"Re: Lunch tomorrow?",preview:"12:30 works for me. See you there.",body:"12:30 works. See you there.",time:"Yesterday"}),a({folder:"drafts",unread:!1,starred:!1,label:null,from:"Me",to:"aigars@colorlib.com",subject:"Re: Draft for landing copy",preview:"Two suggestions on the subhead — instead of …",body:'Two suggestions on the subhead:\n\n1. Lead with the year-anchor ("redesigned for 2026") earlier — it\'s the strongest signal.\n2. "Real charts. Real tables." reads stronger as one beat.',time:"Today"}),a({folder:"drafts",unread:!1,starred:!1,label:null,from:"Me",to:"",subject:"",preview:"",body:"",time:"Today"}),a({folder:"drafts",unread:!1,starred:!1,label:null,from:"Me",to:"diego@research.co",subject:"Re: Customer feedback summary",preview:"",body:"",time:"Apr 22"}),a({folder:"trash",trashed:!0,unread:!1,starred:!1,label:"promotions",from:"AppSumo",fromEmail:"deals@appsumo.com",subject:"90% off lifetime deals — today only",preview:"Don't miss out…",body:"Today only — 90% off our top admin templates and dashboards.\n\nUnsubscribe",time:"Apr 18"})].slice(),view:"inbox",selectedId:null,query:""},i=[{key:"inbox",label:"Inbox",icon:'<path d="M2 6l6 4 6-4"/><rect x="2" y="4" width="12" height="9" rx="1.5"/>'},{key:"sent",label:"Sent",icon:'<path d="M2 14L14 2M14 2H6M14 2v8"/>'},{key:"drafts",label:"Drafts",icon:'<path d="M3 3h10v10H3zM6 7l2 2 2-2"/>'},{key:"starred",label:"Starred",icon:'<path d="M8 1l2 5 5 .5-4 3.5 1 5-4-2.5-4 2.5 1-5-4-3.5 5-.5z"/>'},{key:"trash",label:"Trash",icon:'<path d="M3 5h10l-1 9H4z"/><path d="M5 5V3h6v2"/>'}],d=[{key:"work",label:"Work",color:"var(--primary)"},{key:"personal",label:"Personal",color:"var(--blue)"},{key:"promotions",label:"Promotions",color:"var(--yellow)"},{key:"urgent",label:"Urgent",color:"var(--red)"}];function l(e){if("inbox"===s.view)return"inbox"===e.folder&&!e.trashed;if("sent"===s.view)return"sent"===e.folder&&!e.trashed;if("drafts"===s.view)return"drafts"===e.folder&&!e.trashed;if("starred"===s.view)return e.starred&&!e.trashed;if("trash"===s.view)return e.trashed;if(s.view.startsWith("label:")){const t=s.view.slice(6);return e.label===t&&!e.trashed}return!1}function c(e){if(!s.query)return!0;const t=s.query.toLowerCase();return e.subject.toLowerCase().includes(t)||e.body.toLowerCase().includes(t)||e.from.toLowerCase().includes(t)||(e.to||"").toLowerCase().includes(t)}function b(){return s.messages.filter(l).filter(c)}function u(e){return s.messages.filter(t=>"inbox"===e?"inbox"===t.folder&&!t.trashed&&t.unread:"starred"===e&&t.starred&&!t.trashed&&t.unread).length}function m(e){return s.messages.filter(t=>"inbox"===e?"inbox"===t.folder&&!t.trashed:"sent"===e?"sent"===t.folder&&!t.trashed:"drafts"===e?"drafts"===t.folder&&!t.trashed:"starred"===e?t.starred&&!t.trashed:"trash"===e?t.trashed:!!e.startsWith("label:")&&t.label===e.slice(6)&&!t.trashed).length}function f(e){return String(e??"").replace(/[&<>"']/g,e=>({"&":"&","<":"<",">":">",'"':""","'":"'"}[e]))}function p(){const e=document.getElementById("inbox-sidebar");e&&(e.innerHTML=`\n ${i.map(e=>(e=>{const t=i.find(t=>t.key===e),n="inbox"===e||"starred"===e?u(e):m(e);return`\n <a class="inbox-folder${s.view===e?" active":""}" href="#" data-view="${e}">\n <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">${t.icon}</svg>\n ${t.label}\n ${n>0||"inbox"===e?`<span class="count">${n}</span>`:""}\n </a>\n `})(e.key)).join("")}\n <div class="inbox-sidebar-label">Labels</div>\n ${d.map(e=>{const t=m(`label:${e.key}`);return`\n <a class="inbox-folder${s.view===`label:${e.key}`?" active":""}" href="#" data-view="label:${e.key}">\n <span class="inbox-label-dot" style="background:${e.color}"></span>\n ${e.label}\n ${t>0?`<span class="count">${t}</span>`:""}\n </a>\n `}).join("")}\n `)}function v(){const e=document.getElementById("inbox-list");if(!e)return;const t=b();e.innerHTML=t.length?t.map(e=>`\n <div class="inbox-item${e.unread?" unread":""}${e.id===s.selectedId?" selected":""}" data-id="${e.id}" role="option" aria-selected="${e.id===s.selectedId}" tabindex="0">\n <button type="button" class="inbox-star-btn" data-star="${e.id}" aria-label="${e.starred?"Unstar":"Star"}" aria-pressed="${e.starred}">\n <svg class="star ${e.starred?"on":""}" viewBox="0 0 16 16" fill="${e.starred?"currentColor":"none"}" stroke="currentColor" stroke-width="1.5"><path d="M8 1l2 5 5 .5-4 3.5 1 5-4-2.5-4 2.5 1-5-4-3.5 5-.5z"/></svg>\n </button>\n <div class="inbox-item-body">\n <div class="sender">${f("sent"===e.folder||"drafts"===e.folder?`To: ${e.to||"(no recipient)"}`:e.from)}</div>\n <div class="subject">${f(e.subject)}${e.label?`<span class="inbox-label-pill" data-label="${e.label}">${f(e.label)}</span>`:""}</div>\n <div class="preview">${f(e.preview||e.body.split("\n")[0]||"")}</div>\n </div>\n <div class="meta">${f(e.time)}</div>\n </div>\n `).join(""):`\n <div class="empty-state">\n <div class="empty-state-icon">\n <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 8l9 6 9-6"/></svg>\n </div>\n <div class="empty-state-title">${s.query?"No matches":"Nothing here"}</div>\n <div class="empty-state-text">${s.query?"Try a different search term.":"New messages will appear here."}</div>\n </div>\n `}function h(){const e=document.getElementById("inbox-reader");if(!e)return;const t=s.messages.find(e=>e.id===s.selectedId);var n;e.innerHTML=t?`\n <div class="inbox-reader-toolbar">\n <button type="button" class="btn btn-outline btn-sm" data-action="back" aria-label="Back to list">\n <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M10 3L4 8l6 5"/></svg>\n </button>\n ${"drafts"===t.folder?'\n <button type="button" class="btn btn-primary btn-sm" data-action="edit-draft">Edit draft</button>\n ':'\n <button type="button" class="btn btn-outline btn-sm" data-action="reply">Reply</button>\n <button type="button" class="btn btn-outline btn-sm" data-action="forward">Forward</button>\n '}\n <div class="inbox-reader-spacer"></div>\n <button type="button" class="btn btn-ghost btn-sm" data-action="star" aria-pressed="${t.starred}">\n <svg width="14" height="14" viewBox="0 0 16 16" fill="${t.starred?"currentColor":"none"}" stroke="currentColor" stroke-width="1.5"><path d="M8 1l2 5 5 .5-4 3.5 1 5-4-2.5-4 2.5 1-5-4-3.5 5-.5z"/></svg>\n ${t.starred?"Starred":"Star"}\n </button>\n ${t.trashed?'\n <button type="button" class="btn btn-ghost btn-sm" data-action="restore">Restore</button>\n <button type="button" class="btn btn-danger btn-sm" data-action="delete-forever">Delete forever</button>\n ':'\n <button type="button" class="btn btn-ghost btn-sm" data-action="trash" aria-label="Move to trash">\n <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 5h10l-1 9H4z"/><path d="M5 5V3h6v2"/></svg>\n </button>\n '}\n </div>\n <div class="inbox-reader-content">\n <h2 class="inbox-reader-subject">${f(t.subject)}</h2>\n <div class="inbox-reader-meta">\n <div class="inbox-reader-avatar" style="background:${function(e){const t=["var(--primary)","var(--blue)","var(--purple)","var(--yellow)","var(--green)","var(--cyan)","var(--pink)","var(--orange)"];let n=0;for(let r=0;e.length>r;r+=1)n=31*n+e.charCodeAt(r)>>>0;return t[n%t.length]}(t.from)}">${n=t.from,n?n.trim().split(/\s+/).slice(0,2).map(e=>e[0]).join("").toUpperCase():"?"}</div>\n <div class="inbox-reader-meta-text">\n <div><strong>${f(t.from)}</strong>${t.fromEmail?` <span class="inbox-reader-email"><${f(t.fromEmail)}></span>`:""}</div>\n <div class="inbox-reader-to">${t.to?`to ${f(t.to)}`:""}</div>\n </div>\n <div class="inbox-reader-time">${f(t.time)}</div>\n </div>\n ${t.label?`<div class="inbox-label-pill inbox-label-pill-lg" data-label="${t.label}">${f(t.label)}</div>`:""}\n <div class="inbox-reader-body">${f(t.body||"(empty draft)").replace(/\n/g,"<br>")}</div>\n </div>\n `:'\n <div class="empty-state inbox-reader-empty">\n <div class="empty-state-icon">\n <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 8l9 6 9-6"/></svg>\n </div>\n <div class="empty-state-title">Select a message</div>\n <div class="empty-state-text">Click a message in the list to read it here.</div>\n </div>\n '}function y(){p(),v(),h(),g()}function g(){const e=document.getElementById("inbox-root");e&&e.classList.toggle("reader-open",!!s.selectedId)}function w(e){const t=s.messages.find(t=>t.id===e);t&&(t.unread&&(t.unread=!1),s.selectedId=e,p(),v(),h(),g(),j())}function x(e){const t=s.messages.find(t=>t.id===e);t&&(t.starred=!t.starred,p(),v(),s.selectedId===e&&h())}function k(t){const n=s.messages.find(e=>e.id===t);n&&(n.trashed=!0,s.selectedId===t&&(s.selectedId=null),y(),e("Moved to Trash",{variant:"success"}))}function $(){let t=0;s.messages.forEach(e=>{l(e)&&e.unread&&(e.unread=!1,t+=1)}),p(),v(),j(),e(`Marked ${t} as read`)}function j(){const e=u("inbox");document.querySelectorAll("[data-inbox-count]").forEach(t=>{t.textContent=e})}function E(n={},r=null){const o=document.createElement("div");o.className="compose-form",o.innerHTML=`\n <div class="form-group">\n <label class="form-label" for="compose-to">To</label>\n <input type="email" id="compose-to" class="form-control" placeholder="recipient@example.com" value="${f(n.to||"")}" autocomplete="off">\n </div>\n <div class="form-group">\n <label class="form-label" for="compose-subject">Subject</label>\n <input type="text" id="compose-subject" class="form-control" placeholder="Subject" value="${f(n.subject||"")}" autocomplete="off">\n </div>\n <div class="form-group">\n <label class="form-label" for="compose-body">Message</label>\n <textarea id="compose-body" class="form-control" rows="8" placeholder="Write your message…">${f(n.body||"")}</textarea>\n </div>\n `;const i=()=>({to:o.querySelector("#compose-to").value.trim(),subject:o.querySelector("#compose-subject").value.trim(),body:o.querySelector("#compose-body").value});t({title:r?"Edit draft":"New message",body:o,size:"lg",actions:[{label:"Discard",variant:"ghost",action:()=>{if(r){const e=s.messages.findIndex(e=>e.id===r.id);0>e||s.messages.splice(e,1),s.selectedId===r.id&&(s.selectedId=null),y()}e("Discarded")}},{label:"Save draft",variant:"outline",action:()=>{const t=i();t.to||t.subject||t.body?(r?Object.assign(r,{to:t.to,subject:t.subject||"(no subject)",body:t.body,preview:t.body.split("\n")[0].slice(0,140),time:"Just now"}):s.messages.unshift(a({folder:"drafts",from:"Me",to:t.to,subject:t.subject||"(no subject)",preview:t.body.split("\n")[0].slice(0,140),body:t.body,time:"Just now"})),y(),e("Draft saved",{variant:"success"})):e("Empty draft discarded")}},{label:"Send",variant:"primary",action:()=>{const t=i();if(!t.to)return e("Add a recipient",{variant:"error"}),!1;if(r){const e=s.messages.findIndex(e=>e.id===r.id);0>e||s.messages.splice(e,1),s.selectedId===r.id&&(s.selectedId=null)}s.messages.unshift(a({folder:"sent",from:"Me",to:t.to,subject:t.subject||"(no subject)",preview:t.body.split("\n")[0].slice(0,140),body:t.body,time:"Just now"})),y(),e("Message sent",{variant:"success"})}}]}),setTimeout(()=>o.querySelector("#compose-to")?.focus(),50)}function M(e){E({to:e.fromEmail||e.from,subject:e.subject.startsWith("Re: ")?e.subject:`Re: ${e.subject}`,body:`\n\n--- On ${e.time}, ${e.from} wrote:\n${e.body.split("\n").map(e=>`> ${e}`).join("\n")}`})}async function I(){const t=document.getElementById("inbox-root");t&&(function(e){e.innerHTML='\n <div class="inbox-layout">\n <aside class="inbox-sidebar" id="inbox-sidebar"></aside>\n <div class="inbox-list-pane">\n <div class="inbox-list-toolbar">\n <input type="text" class="inbox-search" placeholder="Search this folder…" aria-label="Search messages">\n <button type="button" class="btn btn-outline btn-sm" id="inbox-mark-read">Mark all read</button>\n </div>\n <div class="inbox-list" id="inbox-list" role="listbox" aria-label="Messages"></div>\n </div>\n <div class="inbox-reader" id="inbox-reader"></div>\n </div>\n '}(t),function(t){t.addEventListener("click",e=>{const t=e.target.closest("[data-view]");t&&(e.preventDefault(),function(e){s.view=e,s.selectedId=null,s.query="";const t=document.querySelector(".inbox-search");t&&(t.value=""),y()}(t.dataset.view))}),t.addEventListener("click",e=>{const t=e.target.closest("[data-star]");if(t)return e.stopPropagation(),void x(t.dataset.star);const n=e.target.closest(".inbox-item");n&&w(n.dataset.id)}),t.addEventListener("click",t=>{const n=t.target.closest("[data-action]");if(!n||!n.dataset.action)return;const r=s.messages.find(e=>e.id===s.selectedId);switch(n.dataset.action){case"back":s.selectedId=null,v(),h(),g();break;case"reply":r&&M(r);break;case"forward":r&&function(e){E({to:"",subject:e.subject.startsWith("Fwd: ")?e.subject:`Fwd: ${e.subject}`,body:`\n\n--- Forwarded message ---\nFrom: ${e.from}${e.fromEmail?` <${e.fromEmail}>`:""}\nDate: ${e.time}\nSubject: ${e.subject}\n\n${e.body}`})}(r);break;case"edit-draft":r&&E({to:r.to,subject:"(no subject)"===r.subject?"":r.subject,body:r.body},r);break;case"star":r&&x(r.id);break;case"trash":r&&k(r.id);break;case"restore":r&&function(t){const n=s.messages.find(e=>e.id===t);n&&(n.trashed=!1,y(),e("Restored",{variant:"success"}))}(r.id);break;case"delete-forever":r&&function(t){const n=s.messages.findIndex(e=>e.id===t);0>n||(s.messages.splice(n,1),s.selectedId===t&&(s.selectedId=null),y(),e("Deleted forever",{variant:"success"}))}(r.id)}}),t.addEventListener("input",e=>{e.target.matches(".inbox-search")&&(s.query=e.target.value.trim(),v())}),t.addEventListener("click",e=>{e.target.closest("#inbox-mark-read")&&$()}),document.querySelectorAll(".page-actions .btn").forEach(e=>{const t=e.textContent.trim().toLowerCase();"mark all read"===t?e.addEventListener("click",e=>{e.preventDefault(),$()}):"compose"===t&&e.addEventListener("click",e=>{e.preventDefault(),E()})}),document.addEventListener("keydown",e=>{if(!document.getElementById("inbox-root"))return;if(e.target.matches("input, textarea"))return;const t=b(),n=t.findIndex(e=>e.id===s.selectedId);if("j"===e.key||"ArrowDown"===e.key){if(e.preventDefault(),0===t.length)return;w((t[Math.min(t.length-1,n+1)]||t[0]).id)}else if("k"===e.key||"ArrowUp"===e.key){if(e.preventDefault(),0===t.length)return;w((t[Math.max(0,n-1)]||t[t.length-1]).id)}else if("r"===e.key&&s.selectedId){const t=s.messages.find(e=>e.id===s.selectedId);t&&"drafts"!==t.folder&&(e.preventDefault(),M(t))}else"#"===e.key&&s.selectedId?(e.preventDefault(),k(s.selectedId)):"s"===e.key&&s.selectedId?(e.preventDefault(),x(s.selectedId)):"c"!==e.key||e.metaKey||e.ctrlKey||(e.preventDefault(),E())})}(t),y(),j(),n()&&await S(t))}async function S(t){const n=t.querySelector("#inbox-list");n&&(n.innerHTML='\n <div class="empty-state inbox-loading">\n <div class="empty-state-icon">\n <span class="spinner-dots" aria-hidden="true"><span></span><span></span><span></span></span>\n </div>\n <div class="empty-state-title">Loading messages…</div>\n </div>');const o=r("/api/messages",{listKey:"messages"});try{const t=await o.list({folder:s.view});s.messages=t.map(e=>({id:`api-${e.id}`,folder:e.folder,trashed:"trash"===e.folder,unread:!!e.unread,starred:!!e.starred,label:e.label||null,from:e.fromName,fromEmail:e.fromEmail||"",to:e.toEmail||"",subject:e.subject,preview:e.preview||"",body:e.body||"",time:e.createdAt?new Date(e.createdAt).toLocaleDateString("en-US",{month:"short",day:"numeric"}):""})),y(),j(),e(`Loaded ${t.length} from API`,{variant:"success"})}catch(a){n&&(n.innerHTML=`\n <div style="padding:16px">\n <div class="banner banner-danger">\n <svg class="banner-icon" width="18" height="18" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="6"/><path d="M5 5l6 6M11 5l-6 6"/></svg>\n <div class="banner-body"><strong>Couldn't load messages.</strong> ${a.message||a}</div>\n <div class="banner-actions">\n <button class="btn btn-outline btn-sm" id="inbox-retry">Retry</button>\n <button class="btn btn-ghost btn-sm" id="inbox-fallback">Use seed</button>\n </div>\n </div>\n </div>`,document.getElementById("inbox-retry")?.addEventListener("click",()=>S(t)),document.getElementById("inbox-fallback")?.addEventListener("click",()=>y()))}}export{I as initInbox};