update UI

ts_web/elements/ops-view-emails.ts

@@ -438,14 +438,28 @@ export class OpsViewEmails extends DeesElement {
     
     await DeesModal.createAndShow({
       heading: forward ? 'Forward Email' : replyTo ? 'Reply to Email' : 'New Email',
+      width: 'large',
       content: html`
-        <div style="width: 700px; max-width: 90vw;">
+        <div>
           <dees-form @formData=${async (e: CustomEvent) => {
             await this.sendEmail(e.detail);
             // Close modal after sending
             const modals = document.querySelectorAll('dees-modal');
             modals.forEach(m => (m as any).destroy?.());
           }}>
+            <dees-input-dropdown
+              key="from"
+              label="From"
+              .options=${[
+                { key: 'admin@dcrouter.local', value: 'Admin <admin@dcrouter.local>' },
+                { key: 'noreply@dcrouter.local', value: 'No Reply <noreply@dcrouter.local>' },
+                { key: 'support@dcrouter.local', value: 'Support <support@dcrouter.local>' },
+                { key: 'alerts@dcrouter.local', value: 'Alerts <alerts@dcrouter.local>' }
+              ]}
+              .selectedKey=${'admin@dcrouter.local'}
+              required
+            ></dees-input-dropdown>
+            
             <dees-input-tags 
               key="to" 
               label="To" 
@@ -475,13 +489,12 @@ export class OpsViewEmails extends DeesElement {
               required
             ></dees-input-text>
             
-            <dees-editor 
+            <dees-input-wysiwyg 
               key="body" 
               label="Message"
-              .mode=${'markdown'}
-              .height=${400}
-              .value=${replyTo && !forward ? `\n\n---\nOn ${new Date(replyTo.date).toLocaleString()}, ${replyTo.from} wrote:\n\n${replyTo.body}` : replyTo && forward ? replyTo.body : ''}
-            ></dees-editor>
+              outputFormat="html"
+              .value=${replyTo && !forward ? `<p></p><hr><p>On ${new Date(replyTo.date).toLocaleString()}, ${replyTo.from} wrote:</p><blockquote>${replyTo.html || `<p>${replyTo.body}</p>`}</blockquote>` : replyTo && forward ? (replyTo.html || `<p>${replyTo.body}</p>`) : ''}
+            ></dees-input-wysiwyg>
             
             <dees-input-fileupload 
               key="attachments" 
@@ -568,12 +581,13 @@ export class OpsViewEmails extends DeesElement {
       // Add to sent folder (mock)
       const newEmail: IEmail = {
         id: `email-${Date.now()}`,
-        from: 'me@dcrouter.local',
+        from: formData.from || 'admin@dcrouter.local',
         to: formData.to || [],
         cc: formData.cc || [],
         bcc: formData.bcc || [],
         subject: formData.subject,
-        body: formData.body,
+        body: formData.body.replace(/<[^>]*>/g, ''), // Strip HTML for plain text version
+        html: formData.body, // Store the HTML version
         date: Date.now(),
         read: true,
         folder: 'sent',

ts_web/elements/ops-view-network.ts

@@ -101,24 +101,12 @@ export class OpsViewNetwork extends DeesElement {
     cssManager.defaultStyles,
     viewHostCss,
     css`
-      :host {
-        display: block;
-        padding: 24px;
-      }
-
       .networkContainer {
         display: flex;
         flex-direction: column;
         gap: 24px;
       }
 
-      dees-statsgrid {
-        margin-bottom: 24px;
-      }
-
-      dees-chart-area {
-        margin-bottom: 24px;
-      }
 
       .protocolBadge {
         display: inline-flex;