refactor: Unify channel and DM interface styling

- Change DM message input from input to textarea (rows=2) for consistency
- Increase DM form padding (p-2 → p-3) to match channel view
- Increase DM status bar padding (p-1 → p-2) with larger font
- Replace "Last refresh:" with "Updated:" in both views
- Update DM status to show connection states (Connected/Connecting/Disconnected) instead of "Ready"
- Add loadStatus() function to DM page for proper connection monitoring
- Unify message input area height and status bar appearance across both pages

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

app/static/js/app.js

@@ -574,7 +574,7 @@ function updateStatus(status) {
 function updateLastRefresh() {
     const now = new Date();
     const timeStr = now.toLocaleTimeString();
-    document.getElementById('lastRefresh').textContent = `Last refresh: ${timeStr}`;
+    document.getElementById('lastRefresh').textContent = `Updated: ${timeStr}`;
 }
 
 /**

app/static/js/dm.js

@@ -36,6 +36,9 @@ document.addEventListener('DOMContentLoaded', async function() {
     // Load conversations into dropdown
     await loadConversations();
 
+    // Load connection status
+    await loadStatus();
+
     // Check for initial conversation from URL parameter
     if (window.MC_CONFIG && window.MC_CONFIG.initialConversation) {
         const convId = window.MC_CONFIG.initialConversation;
@@ -45,8 +48,6 @@ document.addEventListener('DOMContentLoaded', async function() {
 
     // Setup auto-refresh
     setupAutoRefresh();
-
-    updateStatus('connected', 'Ready');
 });
 
 // Handle page restoration from cache (PWA back/forward navigation)
@@ -484,6 +485,9 @@ function setupAutoRefresh() {
         // Reload conversations to update unread indicators
         await loadConversations();
 
+        // Update connection status
+        await loadStatus();
+
         // If viewing a conversation, check for new messages
         if (currentConversationId) {
             await checkForNewMessages();
@@ -659,21 +663,37 @@ async function markAsRead(conversationId, timestamp) {
     populateConversationSelector();
 }
 
+/**
+ * Load connection status
+ */
+async function loadStatus() {
+    try {
+        const response = await fetch('/api/status');
+        const data = await response.json();
+
+        if (data.success) {
+            updateStatus(data.connected ? 'connected' : 'disconnected');
+        }
+    } catch (error) {
+        console.error('Error loading status:', error);
+        updateStatus('disconnected');
+    }
+}
+
 /**
  * Update status indicator
  */
-function updateStatus(status, message) {
+function updateStatus(status) {
     const statusEl = document.getElementById('dmStatusText');
     if (!statusEl) return;
 
-    const statusColors = {
+    const icons = {
-        'connected': 'success',
+        connected: '<i class="bi bi-circle-fill status-connected"></i> Connected',
-        'disconnected': 'danger',
+        disconnected: '<i class="bi bi-circle-fill status-disconnected"></i> Disconnected',
-        'connecting': 'warning'
+        connecting: '<i class="bi bi-circle-fill status-connecting"></i> Connecting...'
     };
 
-    const color = statusColors[status] || 'secondary';
+    statusEl.innerHTML = icons[status] || icons.connecting;
-    statusEl.innerHTML = `<i class="bi bi-circle-fill text-${color}"></i> ${message}`;
 }
 
 /**

app/templates/dm.html

@@ -109,15 +109,17 @@
             <!-- Send Message Form -->
             <div class="row border-top bg-light">
                 <div class="col-12">
-                    <form id="dmSendForm" class="p-2">
+                    <form id="dmSendForm" class="p-3">
                         <div class="emoji-picker-container">
                             <div class="input-group">
-                                <input type="text"
+                                <textarea
-                                       id="dmMessageInput"
+                                    id="dmMessageInput"
-                                       class="form-control"
+                                    class="form-control"
-                                       placeholder="Type a message..."
+                                    placeholder="Type a message..."
-                                       maxlength="200"
+                                    rows="2"
-                                       disabled>
+                                    maxlength="500"
+                                    disabled
+                                ></textarea>
                                 <button type="button" class="btn btn-outline-secondary" id="dmEmojiBtn" title="Insert emoji">
                                     <i class="bi bi-emoji-smile"></i>
                                 </button>
@@ -138,11 +140,11 @@
             <!-- Status Bar -->
             <div class="row border-top">
                 <div class="col-12">
-                    <div class="p-1 small text-muted d-flex justify-content-between align-items-center">
+                    <div class="p-2 small text-muted d-flex justify-content-between align-items-center">
                         <span id="dmStatusText">
-                            <i class="bi bi-circle-fill text-secondary"></i> Ready
+                            <i class="bi bi-circle-fill text-secondary"></i> Connecting...
                         </span>
-                        <span id="dmLastRefresh">-</span>
+                        <span id="dmLastRefresh">Updated: Never</span>
                     </div>
                 </div>
             </div>

app/templates/index.html

@@ -100,7 +100,7 @@
                 <span id="statusText">
                     <i class="bi bi-circle-fill text-secondary"></i> Connecting...
                 </span>
-                <span id="lastRefresh">Last refresh: Never</span>
+                <span id="lastRefresh">Updated: Never</span>
             </div>
         </div>
     </div>