feat: add view mode toggle with compact/cozy/comfortable options

Implemented message density control with three view modes:
- Compact: Tight spacing (10px gaps), smaller text (13px), small avatars (24px)
- Cozy: Balanced spacing (16px gaps), default text (14px) - default mode
- Comfortable: Spacious layout (24px gaps), larger text (15px), larger avatars (32px)

Features:
- View mode selector in Appearance tab
- Persistent preference saved to localStorage
- Dynamic CSS classes applied to body element
- Adjusts message padding, gaps, font sizes, avatar sizes
- Scales headings, code blocks, and all UI elements proportionally

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

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

src/index.html

@@ -359,6 +359,16 @@
               <small style="color: var(--text-secondary); margin-top: 4px; display: block;">Choose your preferred color scheme</small>
             </div>
 
+            <div class="form-group">
+              <label for="view-mode-select">View Mode</label>
+              <select id="view-mode-select" class="view-mode-select">
+                <option value="compact">Compact - Tight spacing, smaller text</option>
+                <option value="cozy">Cozy - Balanced spacing (Default)</option>
+                <option value="comfortable">Comfortable - Spacious layout</option>
+              </select>
+              <small style="color: var(--text-secondary); margin-top: 4px; display: block;">Adjust message density and spacing</small>
+            </div>
+
             <div class="theme-preview-container">
               <div class="theme-preview-label">Preview</div>
               <div class="theme-preview">

src/main.js

@@ -146,6 +146,30 @@ function loadSavedTheme() {
   applyTheme(savedTheme);
 }
 
+// Apply view mode
+function applyViewMode(mode) {
+  const body = document.body;
+
+  // Remove all view mode classes
+  body.classList.remove('view-compact', 'view-cozy', 'view-comfortable');
+
+  // Add the selected mode
+  body.classList.add(`view-${mode}`);
+
+  // Store preference
+  localStorage.setItem('claudia-view-mode', mode);
+}
+
+// Load saved view mode
+function loadSavedViewMode() {
+  const savedMode = localStorage.getItem('claudia-view-mode') || 'cozy';
+  const viewModeSelect = document.getElementById('view-mode-select');
+  if (viewModeSelect) {
+    viewModeSelect.value = savedMode;
+  }
+  applyViewMode(savedMode);
+}
+
 // Helper function to get avatar URL
 async function getAvatarUrl(avatarFilename) {
   if (!avatarFilename) return null;
@@ -1179,6 +1203,14 @@ function setupAppControls() {
       applyTheme(e.target.value);
     });
   }
+
+  // Setup view mode selector
+  const viewModeSelect = document.getElementById('view-mode-select');
+  if (viewModeSelect) {
+    viewModeSelect.addEventListener('change', (e) => {
+      applyViewMode(e.target.value);
+    });
+  }
 }
 
 // Keyboard shortcuts
@@ -1573,8 +1605,9 @@ window.addEventListener('DOMContentLoaded', () => {
   messageInput.focus();
   setStatus('Ready');
 
-  // Load saved theme before anything else
+  // Load saved preferences before anything else
   loadSavedTheme();
+  loadSavedViewMode();
 
   loadExistingConfig();
 });

src/styles.css

@@ -1324,6 +1324,128 @@ body {
   cursor: pointer;
 }
 
+/* View Mode Styles */
+
+/* Compact Mode */
+body.view-compact .messages-list {
+  gap: 10px;
+  padding: 16px;
+}
+
+body.view-compact .message-content {
+  padding: 8px 12px;
+  font-size: 13px;
+  line-height: 1.5;
+  border-radius: 10px;
+}
+
+body.view-compact .avatar-circle {
+  width: 24px;
+  height: 24px;
+}
+
+body.view-compact .character-name-indicator {
+  font-size: 10px;
+  margin-bottom: 2px;
+}
+
+body.view-compact .message-timestamp {
+  font-size: 9px;
+  margin-top: 2px;
+}
+
+body.view-compact .swipe-controls {
+  margin-top: 6px;
+  padding: 3px 6px;
+}
+
+body.view-compact .message-content h1 {
+  font-size: 1.3em;
+}
+
+body.view-compact .message-content h2 {
+  font-size: 1.2em;
+}
+
+body.view-compact .message-content h3 {
+  font-size: 1.05em;
+}
+
+body.view-compact .message-content code {
+  font-size: 0.85em;
+}
+
+/* Cozy Mode (Default) - Already defined in base styles */
+body.view-cozy .messages-list {
+  gap: 16px;
+  padding: 20px;
+}
+
+/* Comfortable Mode */
+body.view-comfortable .messages-list {
+  gap: 24px;
+  padding: 24px;
+}
+
+body.view-comfortable .message-content {
+  padding: 16px 20px;
+  font-size: 15px;
+  line-height: 1.7;
+  border-radius: 14px;
+}
+
+body.view-comfortable .avatar-circle {
+  width: 32px;
+  height: 32px;
+}
+
+body.view-comfortable .character-name-indicator {
+  font-size: 12px;
+  margin-bottom: 6px;
+}
+
+body.view-comfortable .message-timestamp {
+  font-size: 11px;
+  margin-top: 6px;
+}
+
+body.view-comfortable .swipe-controls {
+  margin-top: 10px;
+  padding: 5px 10px;
+}
+
+body.view-comfortable .message-content h1 {
+  font-size: 1.6em;
+  margin-top: 20px;
+  margin-bottom: 12px;
+}
+
+body.view-comfortable .message-content h2 {
+  font-size: 1.4em;
+  margin-top: 18px;
+  margin-bottom: 10px;
+}
+
+body.view-comfortable .message-content h3 {
+  font-size: 1.2em;
+  margin-top: 16px;
+  margin-bottom: 8px;
+}
+
+body.view-comfortable .message-content p + p {
+  margin-top: 16px;
+}
+
+body.view-comfortable .message-content code {
+  font-size: 0.95em;
+  padding: 3px 8px;
+}
+
+body.view-comfortable .message-content pre {
+  padding: 16px;
+  margin: 12px 0;
+}
+
 /* Responsive */
 @media (max-width: 600px) {
   .messages-list {