brandon/bang-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

design improvments

Browse Source 
redesigned compose panel
added icons
added read reciept functionality
fixed dark mode
This commit is contained in:
Brandon Brunson
2025-06-07 21:08:20 -07:00
parent f2503d5ec9
commit bdcc82bc3f
6 changed files with 688 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
main.js
View File

@@ -92,27 +92,60 @@ if (document.getElementById('email-list')) {
const fromFull = email.domain ? `${email.from}!${email.domain}` : email.from;
return fromFull === userFull;
});
// Sort emails by timestamp descending (newest first)
inboxEmails.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
sentEmails.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
let currentFolder = 'inbox';
let selectedEmail = null;
function renderList() {
const list = currentFolder === 'inbox' ? inboxEmails : sentEmails;
let html = `<div class="email-list-section"><div class="email-list-title">${currentFolder === 'inbox' ? 'Inbox' : 'Sent'}</div>`;
if (list.length === 0) {
html += '<p>No emails.</p>';
function formatDate(iso) {
if (!iso) return '';
const date = new Date(iso);
if (isNaN(date)) return '';
const now = new Date();
const isToday = date.toDateString() === now.toDateString();
const diffMs = now - date;
const diffDays = diffMs / (1000 * 60 * 60 * 24);
if (isToday) {
// Show time (e.g. 2:30pm or 4pm)
let hour = date.getHours();
let minute = date.getMinutes();
let ampm = hour >= 12 ? 'pm' : 'am';
hour = hour % 12;
if (hour === 0) hour = 12;
if (minute === 0) {
return hour + ampm;
} else {
return hour + ':' + String(minute).padStart(2, '0') + ampm;
}
} else if (diffDays < 7) {
// Show day of week (e.g. Mon)
return date.toLocaleDateString(undefined, { weekday: 'short' });
} else {
html += list.map((email, idx) => {
const display = currentFolder === 'inbox'
? (email.domain ? `${email.from}!${email.domain}` : email.from)
: (email.domain ? `${email.to}!${email.domain}` : email.to);
const fromto = currentFolder === 'inbox' ? `From: ${display}` : `To: ${display}`;
return `<div class="email-list-item${selectedEmail === idx ? ' selected' : ''}" data-idx="${idx}">
<div class="subject">${email.subject}</div>
<div class="fromto">${fromto}</div>
</div>`;
}).join('');
// Show month and day (e.g. Jun 7)
return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
}
html += '</div>';
document.getElementById('email-list').innerHTML = html;
}
function renderList() {
const listDiv = document.getElementById('email-list');
if (!listDiv) return;
let emailsToShow = currentFolder === 'inbox' ? inboxEmails : sentEmails;
emailsToShow = filterEmails(emailsToShow);
let html = '';
emailsToShow.forEach((email, idx) => {
const isSelected = selectedEmail === idx;
const subject = email.subject || '(No Subject)';
const fromFull = email.from && email.domain ? `${email.from}!${email.domain}` : email.from || '';
const toFull = email.to && email.domain ? `${email.to}!${email.domain}` : email.to || '';
const dateStr = formatDate(email.timestamp);
html += `<div class="email-list-item${isSelected ? ' selected' : ''}" data-idx="${idx}" style="display:flex;align-items:center;justify-content:space-between;">
<div style="flex:1;min-width:0;">
<div class="subject" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">${subject}</div>
<div class="fromto" style="font-size:0.95em;">${currentFolder === 'inbox' ? 'From: ' + fromFull : 'To: ' + toFull}</div>
</div>
<div style="margin-left:12px;white-space:nowrap;font-size:0.85em;color:#888;">${dateStr}</div>
</div>`;
});
listDiv.innerHTML = html;
// Add click listeners
document.querySelectorAll('.email-list-item').forEach(item => {
item.onclick = function() {
@@ -123,25 +156,71 @@ if (document.getElementById('email-list')) {
});
}
function renderDetail() {
const list = currentFolder === 'inbox' ? inboxEmails : sentEmails;
if (selectedEmail == null || !list[selectedEmail]) {
document.getElementById('email-detail').innerHTML = '';
const detailDiv = document.getElementById('email-detail');
if (!detailDiv) return;
let emailsToShow = currentFolder === 'inbox' ? inboxEmails : sentEmails;
if (selectedEmail == null || !emailsToShow[selectedEmail]) {
detailDiv.innerHTML = '<div class="email-detail-content">Select an email to view details.</div>';
return;
}
const email = list[selectedEmail];
const fromDisplay = email.domain ? `${email.from}!${email.domain}` : email.from;
const toDisplay = email.domain ? `${email.to}!${email.domain}` : email.to;
document.getElementById('email-detail').innerHTML = `
<div class="email-detail-content">
const email = emailsToShow[selectedEmail];
const fromFull = email.from && email.domain ? `${email.from}!${email.domain}` : email.from || '';
const toFull = email.to && email.domain ? `${email.to}!${email.domain}` : email.to || '';
const dateStr = formatDate(email.timestamp);
function formatFullDate(iso) {
if (!iso) return '';
const date = new Date(iso);
if (isNaN(date)) return '';
let month = String(date.getMonth() + 1).padStart(2, '0');
let day = String(date.getDate()).padStart(2, '0');
let year = date.getFullYear();
let hour = date.getHours();
let minute = date.getMinutes();
let ampm = hour >= 12 ? 'pm' : 'am';
hour = hour % 12;
if (hour === 0) hour = 12;
let timeStr = minute === 0 ? `${hour}${ampm}` : `${hour}:${String(minute).padStart(2, '0')}${ampm}`;
return `${month}/${day}/${year} @ ${timeStr}`;
}
const fullDateStr = formatFullDate(email.timestamp);
// Send POST to /mailbox/open to indicate message was opened
const { username, password } = getCredentials();
if (username && password && email.id) {
fetch('http://localhost:8080/mailbox/open', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Basic ' + btoa(username + ':' + password)
},
body: JSON.stringify({ user: username, id: email.id })
});
}
// Show 'Read' if in sent folder and email.read is true
let readHtml = '';
if (currentFolder === 'sent' && email.read === true) {
readHtml = '<span style="margin-right:12px;color:#2e7d32;font-weight:bold;font-size:0.95em;">Read</span>';
}
detailDiv.innerHTML = `
<div class="email-detail-content" style="position:relative;">
<div class="email-detail-header">
<div><strong>From:</strong> ${fromDisplay}</div>
<div><strong>To:</strong> ${toDisplay}</div>
<div><strong>Subject:</strong> ${email.subject}</div>
<div style="font-size:1.5em;font-weight:bold;margin-bottom:8px;">${email.subject || '(No Subject)'}</div>
<div><strong>From:</strong> ${fromFull}</div>
<div><strong>To:</strong> ${toFull}</div>
</div>
<div class="email-detail-body">
<div style="position:absolute;top:24px;right:32px;font-size:0.95em;color:#888;display:flex;align-items:center;gap:8px;" title="${fullDateStr}">${readHtml}${dateStr}</div>
${email.body || ''}
</div>
<div class="email-detail-body">${email.body}</div>
</div>
`;
}
// Helper to filter emails (no-op for now, can add search/filter later)
function filterEmails(emails) {
return emails;
}
// Sidebar folder switching
document.getElementById('sidebar-inbox').onclick = function() {
currentFolder = 'inbox';
@@ -164,6 +243,7 @@ if (document.getElementById('email-list')) {
})
.catch(err => {
document.getElementById('inboxError').innerText = 'Failed to load inbox.';
console.error('Inbox load error:', err);
});
}
}
@@ -208,21 +288,23 @@ if (document.getElementById('sendForm')) {
};
}
// Compose Overlay logic
// Compose Panel logic (bottom right, non-blocking)
if (document.getElementById('openComposeBtn')) {
const overlay = document.getElementById('composeOverlay');
const panel = document.getElementById('composePanel');
const openBtn = document.getElementById('openComposeBtn');
const closeBtn = document.getElementById('closeComposeBtn');
const closeXBtn = document.getElementById('composeCloseXBtn');
const form = document.getElementById('composeForm');
const errorP = document.getElementById('composeError');
openBtn.onclick = function() {
overlay.style.display = 'flex';
panel.style.display = 'flex';
form.reset();
errorP.innerText = '';
};
closeBtn.onclick = function() {
overlay.style.display = 'none';
};
if (closeXBtn) {
closeXBtn.onclick = function() {
panel.style.display = 'none';
};
}
form.onsubmit = async function(e) {
e.preventDefault();
const { username, password } = getCredentials();
@@ -252,11 +334,41 @@ if (document.getElementById('openComposeBtn')) {
body: JSON.stringify(email)
});
if (res.ok) {
overlay.style.display = 'none';
panel.style.display = 'none';
location.reload();
} else {
const err = await res.text();
errorP.innerText = err;
}
};
// Ensure dark mode is applied on load for inbox.html
applyDarkMode(getDarkModePref());
}
// Dark mode toggle logic
function applyDarkMode(isDark) {
if (isDark) {
document.body.classList.add('dark-mode');
} else {
document.body.classList.remove('dark-mode');
}
}
function getDarkModePref() {
return localStorage.getItem('darkMode') === 'true';
}
function setDarkModePref(val) {
localStorage.setItem('darkMode', val ? 'true' : 'false');
}
if (document.getElementById('toggleDarkModeBtn')) {
const btn = document.getElementById('toggleDarkModeBtn');
btn.onclick = function() {
const isDark = !getDarkModePref();
setDarkModePref(isDark);
applyDarkMode(isDark);
};
// Apply on load
applyDarkMode(getDarkModePref());
} else {
// Apply dark mode on other pages too
applyDarkMode(getDarkModePref());
}