From bdcc82bc3f6738e716d14962e80588998b48c9ea Mon Sep 17 00:00:00 2001
From: brandon <brandon@bbrunson.com>
Date: Sat, 7 Jun 2025 21:08:20 -0700
Subject: [PATCH] design improvments redesigned compose panel added icons added
 read reciept functionality fixed dark mode

---
 icons/inbox.svg |   1 +
 icons/sent.svg  |   1 +
 inbox.html      |  26 ++--
 main.js         | 186 +++++++++++++++++++++++------
 style-v1.css    | 306 ++++++++++++++++++++++++++++++++++++++++++++++++
 style.css       | 225 ++++++++++++++++++++++++++++++++++-
 6 files changed, 688 insertions(+), 57 deletions(-)
 create mode 100644 icons/inbox.svg
 create mode 100644 icons/sent.svg
 create mode 100644 style-v1.css

diff --git a/icons/inbox.svg b/icons/inbox.svg
new file mode 100644
index 0000000..a02e1e7
--- /dev/null
+++ b/icons/inbox.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="#ffffff" d="M121 32C91.6 32 66 52 58.9 80.5L1.9 308.4C.6 313.5 0 318.7 0 323.9L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-92.1c0-5.2-.6-10.4-1.9-15.5l-57-227.9C446 52 420.4 32 391 32L121 32zm0 64l270 0 48 192-51.2 0c-12.1 0-23.2 6.8-28.6 17.7l-14.3 28.6c-5.4 10.8-16.5 17.7-28.6 17.7l-120.4 0c-12.1 0-23.2-6.8-28.6-17.7l-14.3-28.6c-5.4-10.8-16.5-17.7-28.6-17.7L73 288 121 96z"/></svg>
\ No newline at end of file
diff --git a/icons/sent.svg b/icons/sent.svg
new file mode 100644
index 0000000..8ccf0a5
--- /dev/null
+++ b/icons/sent.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="#ffffff" d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480l0-83.6c0-4 1.5-7.8 4.2-10.8L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z"/></svg>
\ No newline at end of file
diff --git a/inbox.html b/inbox.html
index 1c68e0f..bbe005b 100644
--- a/inbox.html
+++ b/inbox.html
@@ -12,11 +12,12 @@
       <h2>bang</h2>
       <nav>
         <ul>
-          <li><button id="sidebar-inbox" class="sidebar-btn active">Inbox</button></li>
-          <li><button id="sidebar-sent" class="sidebar-btn">Sent</button></li>
+          <li><button id="sidebar-inbox" class="sidebar-btn active"><img src="icons/inbox.svg" alt="Inbox" class="sidebar-icon">Inbox</button></li>
+          <li><button id="sidebar-sent" class="sidebar-btn"><img src="icons/sent.svg" alt="Sent" class="sidebar-icon">Sent</button></li>
         </ul>
       </nav>
       <button class="compose-btn" id="openComposeBtn">Compose</button>
+      <button class="darkmode-btn" id="toggleDarkModeBtn">Toggle Dark Mode</button>
       <button class="logout-btn" onclick="logout()">Logout</button>
     </aside>
     <main class="main-content">
@@ -26,18 +27,15 @@
     </main>
   </div>
 
-  <div id="composeOverlay" class="modal-overlay" style="display:none;">
-    <div class="modal-content">
-      <h2>Compose Email</h2>
-      <form id="composeForm">
-        <input type="text" id="composeTo" placeholder="To (person!place.com)" required><br>
-        <input type="text" id="composeSubject" placeholder="Subject" required><br>
-        <textarea id="composeBody" placeholder="Message" required></textarea><br>
-        <button type="submit">Send</button>
-        <button type="button" id="closeComposeBtn">Cancel</button>
-      </form>
-      <p id="composeError" class="error"></p>
-    </div>
+  <div id="composePanel" class="compose-panel" style="display:none;">
+    <button type="button" id="composeCloseXBtn" style="position:absolute;top:8px;right:12px;font-size:1.5em;background:none;border:none;color:#888;cursor:pointer;line-height:1;z-index:10;" aria-label="Close">&times;</button>
+    <form id="composeForm">
+      <input type="text" id="composeTo" placeholder="To (person!place.com)" required spellcheck="false"><br>
+      <input type="text" id="composeSubject" placeholder="Subject" required><br>
+      <textarea id="composeBody" placeholder="Message" required></textarea><br>
+      <button type="submit">Send</button>
+    </form>
+    <p id="composeError" class="error"></p>
   </div>
 
   <script src="main.js"></script>
diff --git a/main.js b/main.js
index 053621c..3a5dcea 100644
--- a/main.js
+++ b/main.js
@@ -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());
 }
diff --git a/style-v1.css b/style-v1.css
new file mode 100644
index 0000000..b8b22eb
--- /dev/null
+++ b/style-v1.css
@@ -0,0 +1,306 @@
+body {
+  font-family: Arial, sans-serif;
+  background: #f4f4f4;
+  margin: 0;
+  padding: 0;
+}
+body.dark-mode {
+  background: #181a1b;
+  color: #e0e0e0;
+}
+.layout {
+  display: flex;
+  min-height: 100vh;
+}
+.sidebar {
+  width: 240px;
+  background: #e0e0e0; /* Changed from #222e3c to a light grey */
+  color: #222e3c;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  padding: 32px 0 0 0;
+  box-shadow: 2px 0 8px rgba(0,0,0,0.04);
+}
+body.dark-mode .sidebar {
+  background: #23272e;
+  color: #e0e0e0;
+  box-shadow: 2px 0 8px rgba(0,0,0,0.18);
+}
+.sidebar h2 {
+  color: #222e3c;
+  text-align: center;
+  margin-bottom: 32px;
+  font-size: 1.5em;
+  letter-spacing: 1px;
+}
+body.dark-mode .sidebar h2,
+body.dark-mode .sidebar-btn,
+body.dark-mode .sidebar-btn.active,
+body.dark-mode .sidebar-btn:hover {
+  color: #e0e0e0;
+  background: #23272e;
+}
+.sidebar nav ul {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 24px 0;
+}
+.sidebar nav li {
+  margin: 0 0 8px 0;
+}
+.sidebar-btn {
+  width: 100%;
+  background: none;
+  border: none;
+  color: #222e3c;
+  padding: 14px 0;
+  font-size: 1.1em;
+  text-align: left;
+  padding-left: 32px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+body.dark-mode .sidebar-btn.active, body.dark-mode .sidebar-btn:hover {
+  background: #2d3138;
+}
+.sidebar-btn.active, .sidebar-btn:hover {
+  background: #cccccc;
+}
+.compose-btn, .logout-btn {
+  margin: 12px 24px 0 24px;
+  padding: 12px 0;
+  border-radius: 4px;
+  border: none;
+  font-size: 1em;
+  font-weight: bold;
+  cursor: pointer;
+}
+.compose-btn {
+  background: #0077cc;
+  color: #fff;
+}
+body.dark-mode .compose-btn {
+  background: #005fa3;
+  color: #fff;
+}
+.compose-btn:hover {
+  background: #005fa3;
+}
+.logout-btn {
+  background: #fff;
+  color: #222e3c;
+  border: 1px solid #eee;
+  margin-bottom: 24px;
+}
+body.dark-mode .logout-btn {
+  background: #23272e;
+  color: #e0e0e0;
+  border: 1px solid #444;
+}
+.logout-btn:hover {
+  background: #f4f4f4;
+}
+body.dark-mode .logout-btn:hover {
+  background: #181a1b;
+}
+.main-content {
+  flex: 1;
+  background: #fff;
+  padding: 40px 32px;
+  display: flex;
+  gap: 32px;
+}
+body.dark-mode .main-content {
+  background: #111317;
+}
+#email-list {
+  width: 340px;
+  border-right: 1px solid #eee;
+  padding-right: 24px;
+  overflow-y: auto;
+  max-height: 70vh;
+}
+body.dark-mode #email-list {
+  border-color: #333;
+}
+.email-list-section {
+  margin-bottom: 32px;
+}
+.email-list-title {
+  font-size: 1.1em;
+  color: #0077cc;
+  margin-bottom: 8px;
+}
+body.dark-mode .email-list-title {
+  color: #fff;
+}
+.email-list-item {
+  padding: 12px 10px;
+  border-radius: 4px;
+  margin-bottom: 6px;
+  cursor: pointer;
+  border: 1px solid transparent;
+  transition: background 0.15s, border 0.15s;
+}
+body.dark-mode .email-list-item {
+  background: #111317;
+  color: #fff;
+}
+.email-list-item.selected, .email-list-item:hover {
+  background: #f0f6fa;
+  border: 1px solid #0077cc;
+}
+body.dark-mode .email-list-item.selected, body.dark-mode .email-list-item:hover {
+  background: #2d3138;
+  border-color: #0077cc;
+}
+.email-list-item .subject {
+  font-weight: bold;
+  color: #222e3c;
+}
+body.dark-mode .email-list-item .subject {
+  color: #fff;
+}
+.email-list-item .fromto {
+  font-size: 0.95em;
+  color: #555;
+}
+.email-detail {
+  flex: 1;
+  min-width: 0;
+  padding-left: 24px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+.email-detail-content {
+  background: #f8fafc;
+  border-radius: 8px;
+  padding: 24px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+}
+body.dark-mode .email-detail-content {
+  background: #181a1b;
+  color: #e0e0e0;
+}
+.email-detail-header {
+  margin-bottom: 16px;
+}
+.email-detail-header strong {
+  color: #0077cc;
+}
+.email-detail-body {
+  margin-top: 16px;
+  white-space: pre-wrap;
+  color: #222e3c;
+}
+body.dark-mode .email-detail-body {
+  color: #fff;
+}
+.error {
+  color: #d8000c;
+  text-align: center;
+}
+body.dark-mode .error {
+  color: #ffb3b3;
+}
+/* Modal overlay for compose */
+.modal-overlay {
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(0,0,0,0.35);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+.modal-content {
+  background: #fff;
+  padding: 32px 32px 24px 32px;
+  border-radius: 10px;
+  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
+  min-width: 340px;
+  max-width: 95vw;
+  max-height: 90vh;
+  overflow-y: auto;
+  position: relative;
+}
+body.dark-mode .modal-content {
+  background: #111317;
+  color: #e0e0e0;
+}
+#composeForm input, #composeForm textarea, #composeForm button {
+  width: 100%;
+  margin: 8px 0;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+body.dark-mode input, body.dark-mode textarea {
+  background: #181a1b;
+  color: #e0e0e0;
+  border: 1px solid #444;
+}
+#composeForm button[type="submit"] {
+  background: #0077cc;
+  color: #fff;
+  border: none;
+  font-weight: bold;
+  margin-bottom: 0;
+}
+#composeForm button[type="submit"]:hover {
+  background: #005fa3;
+}
+#composeForm button[type="button"] {
+  background: #eee;
+  color: #222e3c;
+  border: none;
+  margin-top: 0;
+}
+#composeForm button[type="button"]:hover {
+  background: #ddd;
+}
+body.dark-mode input::placeholder, body.dark-mode textarea::placeholder {
+  color: #aaa;
+}
+.darkmode-btn {
+  margin: 12px 24px 0 24px;
+  padding: 12px 0;
+  border-radius: 4px;
+  border: none;
+  font-size: 1em;
+  font-weight: bold;
+  cursor: pointer;
+  background: #eee;
+  color: #222e3c;
+}
+body.dark-mode .darkmode-btn {
+  background: #444;
+  color: #fff;
+  border: none;
+}
+body.dark-mode .darkmode-btn:hover {
+  background: #222;
+}
+.darkmode-btn:hover {
+  background: #ccc;
+}
+@media (max-width: 900px) {
+  .main-content {
+    flex-direction: column;
+    padding: 24px 8px;
+  }
+  #email-list {
+    width: 100%;
+    max-height: 200px;
+    border-right: none;
+    border-bottom: 1px solid #eee;
+    padding-right: 0;
+    padding-bottom: 16px;
+  }
+  .email-detail {
+    padding-left: 0;
+  }
+}
diff --git a/style.css b/style.css
index ed12549..1e4e7c3 100644
--- a/style.css
+++ b/style.css
@@ -4,6 +4,10 @@ body {
   margin: 0;
   padding: 0;
 }
+body.dark-mode {
+  background: #181a1b;
+  color: #e0e0e0;
+}
 .layout {
   display: flex;
   min-height: 100vh;
@@ -18,6 +22,11 @@ body {
   padding: 32px 0 0 0;
   box-shadow: 2px 0 8px rgba(0,0,0,0.04);
 }
+body.dark-mode .sidebar {
+  background: #23272e;
+  color: #e0e0e0;
+  box-shadow: 2px 0 8px rgba(0,0,0,0.18);
+}
 .sidebar h2 {
   color: #222e3c;
   text-align: center;
@@ -25,6 +34,13 @@ body {
   font-size: 1.5em;
   letter-spacing: 1px;
 }
+body.dark-mode .sidebar h2,
+body.dark-mode .sidebar-btn,
+body.dark-mode .sidebar-btn.active,
+body.dark-mode .sidebar-btn:hover {
+  color: #e0e0e0;
+  background: #23272e;
+}
 .sidebar nav ul {
   list-style: none;
   padding: 0;
@@ -45,6 +61,9 @@ body {
   cursor: pointer;
   transition: background 0.2s;
 }
+body.dark-mode .sidebar-btn.active, body.dark-mode .sidebar-btn:hover {
+  background: #2d3138;
+}
 .sidebar-btn.active, .sidebar-btn:hover {
   background: #cccccc;
 }
@@ -61,6 +80,10 @@ body {
   background: #0077cc;
   color: #fff;
 }
+body.dark-mode .compose-btn {
+  background: #005fa3;
+  color: #fff;
+}
 .compose-btn:hover {
   background: #005fa3;
 }
@@ -70,9 +93,17 @@ body {
   border: 1px solid #eee;
   margin-bottom: 24px;
 }
+body.dark-mode .logout-btn {
+  background: #23272e;
+  color: #e0e0e0;
+  border: 1px solid #444;
+}
 .logout-btn:hover {
   background: #f4f4f4;
 }
+body.dark-mode .logout-btn:hover {
+  background: #181a1b;
+}
 .main-content {
   flex: 1;
   background: #fff;
@@ -80,6 +111,9 @@ body {
   display: flex;
   gap: 32px;
 }
+body.dark-mode .main-content {
+  background: #111317;
+}
 #email-list {
   width: 340px;
   border-right: 1px solid #eee;
@@ -87,6 +121,9 @@ body {
   overflow-y: auto;
   max-height: 70vh;
 }
+body.dark-mode #email-list {
+  border-color: #333;
+}
 .email-list-section {
   margin-bottom: 32px;
 }
@@ -95,6 +132,9 @@ body {
   color: #0077cc;
   margin-bottom: 8px;
 }
+body.dark-mode .email-list-title {
+  color: #fff;
+}
 .email-list-item {
   padding: 12px 10px;
   border-radius: 4px;
@@ -103,14 +143,25 @@ body {
   border: 1px solid transparent;
   transition: background 0.15s, border 0.15s;
 }
+body.dark-mode .email-list-item {
+  background: #111317;
+  color: #fff;
+}
 .email-list-item.selected, .email-list-item:hover {
   background: #f0f6fa;
   border: 1px solid #0077cc;
 }
+body.dark-mode .email-list-item.selected, body.dark-mode .email-list-item:hover {
+  background: #2d3138;
+  border-color: #0077cc;
+}
 .email-list-item .subject {
   font-weight: bold;
   color: #222e3c;
 }
+body.dark-mode .email-list-item .subject {
+  color: #fff;
+}
 .email-list-item .fromto {
   font-size: 0.95em;
   color: #555;
@@ -129,6 +180,10 @@ body {
   padding: 24px;
   box-shadow: 0 2px 8px rgba(0,0,0,0.04);
 }
+body.dark-mode .email-detail-content {
+  background: #181a1b;
+  color: #e0e0e0;
+}
 .email-detail-header {
   margin-bottom: 16px;
 }
@@ -140,10 +195,16 @@ body {
   white-space: pre-wrap;
   color: #222e3c;
 }
+body.dark-mode .email-detail-body {
+  color: #fff;
+}
 .error {
   color: #d8000c;
   text-align: center;
 }
+body.dark-mode .error {
+  color: #ffb3b3;
+}
 /* Modal overlay for compose */
 .modal-overlay {
   position: fixed;
@@ -153,6 +214,7 @@ body {
   align-items: center;
   justify-content: center;
   z-index: 1000;
+  pointer-events: none;
 }
 .modal-content {
   background: #fff;
@@ -165,24 +227,138 @@ body {
   overflow-y: auto;
   position: relative;
 }
-#composeForm input, #composeForm textarea, #composeForm button {
+body.dark-mode .modal-content {
+  background: #111317;
+  color: #e0e0e0;
+}
+/* Compose panel for bottom right, non-blocking */
+.compose-panel {
+  position: fixed;
+  right: 32px;
+  bottom: 32px;
+  z-index: 2000;
+  min-width: 340px;
+  max-width: 95vw;
+  max-height: 90vh;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
+  padding: 32px 32px 0 32px;
+  display: none;
+  flex-direction: column;
+  overflow-y: auto;
+}
+body.dark-mode .compose-panel {
+  background: #111317;
+  color: #e0e0e0;
+}
+/* Remove all borders and spacing from compose fields, only a line between them */
+.compose-panel input,
+.compose-panel textarea {
+  border: none;
+  border-bottom: 2px solid #d0d0d0;
+  border-radius: 0;
+  background: transparent;
+  outline: none;
+  box-shadow: none;
+  margin: 0;
+  padding: 10px 0 6px 0;
+  font-size: 1em;
+  transition: border-color 0.2s;
   width: 100%;
-  margin: 8px 0;
-  padding: 10px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
   box-sizing: border-box;
 }
+.compose-panel input:first-child {
+  margin-top: 0;
+}
+.compose-panel input + input,
+.compose-panel input + textarea,
+.compose-panel textarea + input,
+.compose-panel textarea + textarea {
+  margin-top: 0;
+}
+.compose-panel input:focus,
+.compose-panel textarea:focus {
+  border-bottom: 2px solid #0077cc;
+  background: transparent;
+}
+body.dark-mode .compose-panel input,
+body.dark-mode .compose-panel textarea {
+  background: transparent;
+  color: #e0e0e0;
+  border-bottom: 2px solid #444;
+}
+body.dark-mode .compose-panel input:focus,
+body.dark-mode .compose-panel textarea:focus {
+  border-bottom: 2px solid #4da3ff;
+}
+.compose-panel input::placeholder,
+.compose-panel textarea::placeholder {
+  color: #888;
+  opacity: 1;
+}
+body.dark-mode .compose-panel input::placeholder,
+body.dark-mode .compose-panel textarea::placeholder {
+  color: #aaa;
+}
+#composeForm input, #composeForm textarea {
+  border: none !important;
+  border-bottom: 2px solid #d0d0d0 !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  margin: 0 !important;
+  padding: 10px 0 6px 0 !important;
+  width: 100%;
+  box-sizing: border-box;
+}
+body.dark-mode #composeForm input, body.dark-mode #composeForm textarea {
+  border-bottom: 2px solid #444 !important;
+  color: #e0e0e0;
+}
+#composeForm input:focus, #composeForm textarea:focus {
+  border-bottom: 2px solid #0077cc !important;
+}
+body.dark-mode #composeForm input:focus, body.dark-mode #composeForm textarea:focus {
+  border-bottom: 2px solid #4da3ff !important;
+}
+#composeForm input::placeholder, #composeForm textarea::placeholder {
+  color: #888;
+}
+body.dark-mode #composeForm input::placeholder, body.dark-mode #composeForm textarea::placeholder {
+  color: #aaa;
+}
+#composeForm {
+  display: flex;
+  flex-direction: column;
+  height: auto;
+  position: static;
+}
 #composeForm button[type="submit"] {
+  align-self: flex-end;
+  margin-top: 16px;
+  margin-bottom: 0;
+  margin-right: 0;
+  position: static;
+  min-width: 100px;
+  min-height: 40px;
   background: #0077cc;
   color: #fff;
   border: none;
   font-weight: bold;
-  margin-bottom: 0;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+  transition: background 0.2s;
 }
 #composeForm button[type="submit"]:hover {
   background: #005fa3;
 }
+body.dark-mode #composeForm button[type="submit"] {
+  background: #005fa3;
+  color: #fff;
+}
+body.dark-mode #composeForm button[type="submit"]:hover {
+  background: #0077cc;
+}
 #composeForm button[type="button"] {
   background: #eee;
   color: #222e3c;
@@ -192,6 +368,38 @@ body {
 #composeForm button[type="button"]:hover {
   background: #ddd;
 }
+body.dark-mode input::placeholder, body.dark-mode textarea::placeholder {
+  color: #aaa;
+}
+.darkmode-btn {
+  margin: 12px 24px 0 24px;
+  padding: 12px 0;
+  border-radius: 4px;
+  border: none;
+  font-size: 1em;
+  font-weight: bold;
+  cursor: pointer;
+  background: #eee;
+  color: #222e3c;
+}
+body.dark-mode .darkmode-btn {
+  background: #444;
+  color: #fff;
+  border: none;
+}
+body.dark-mode .darkmode-btn:hover {
+  background: #222;
+}
+.darkmode-btn:hover {
+  background: #ccc;
+}
+.sidebar-icon {
+  width: 15px;
+  height: 15px;
+  vertical-align: middle;
+  margin-right: 12px;
+  margin-bottom: 2px;
+}
 @media (max-width: 900px) {
   .main-content {
     flex-direction: column;
@@ -209,3 +417,8 @@ body {
     padding-left: 0;
   }
 }
+.compose-panel textarea,
+#composeForm textarea {
+  min-height: 120px !important;
+  resize: vertical;
+}