v1.2.0 — focus mode, export as .txt, dark theme restyle

Author: saneeshnp

CHANGELOG.md

@@ -2,6 +2,23 @@
 
 All notable changes to Writelo will be documented in this file.
 
+## [1.2.0] - 2026-03-23
+
+### New Features
+
+- **Focus Mode** — A new toolbar button (⤢) hides the header, sidebar, and bottom links, leaving the editor as a full-viewport writing surface. Exit by pressing `Escape` or clicking the "Exit focus" button that appears in the top-right corner.
+- **Export as .txt** — Right-click any tab to download its content as a plain `.txt` file named after the tab. Works on background tabs too (no need to switch first). Available in the tab context menu alongside Duplicate and Close.
+
+### Visual Improvements
+
+- **Dark theme redesigned** — The default dark theme now uses charcoal gray tones (inspired by Notion's dark palette) instead of the previous blue-navy gradient. Backgrounds, surfaces, modals, and toasts all updated for a warmer, less blue-tinted feel.
+- **Default accent color changed to Blue** — The out-of-the-box accent is now Blue (`#3b82f6`) instead of Teal. Existing users with a saved preference are unaffected.
+- **Editor focus border removed** — The purple glow that appeared around the editor on focus has been removed for a cleaner look.
+
+### Bug Fixes
+
+- **Light theme toggle switches** — Toggle switch tracks in the Settings modal were nearly invisible on the light theme. They now have a visible inset border when off, which clears cleanly when toggled on.
+
 ## [1.1.0] - 2026-03-21
 
 ### Improvements

README.md

@@ -37,14 +37,15 @@ Download the files and open `index.html` in any modern browser. That's it.
 ### Viewing & Copying
 - **Markdown Preview** — render your text as formatted Markdown in a modal overlay
 - **Copy All** — copy everything in the current tab to your clipboard in one click
+- **Focus Mode** — click the ⤢ icon in the toolbar to hide all chrome (header, sidebar, footer links) and write distraction-free. Press `Escape` or click "Exit focus" to return.
 
 ### Customization
 Open Settings (gear icon) to choose:
 
 | Option | Choices |
 |--------|---------|
 | Theme | Dark, Light, Ultra Dark |
-| Accent color | Purple, Blue, Green, Rose, Amber, **Teal** (default) |
+| Accent color | Purple, **Blue** (default), Green, Rose, Amber, Teal |
 
 The header logo, title gradient, and subtitle all update to match the chosen accent color.
 
@@ -54,6 +55,7 @@ Back up and restore your notes from the **Settings → Data** section.
 - **Export** — downloads a `writelo-backup-YYYY-MM-DD.json` file containing all your tabs
 - **Import** — opens a file picker; after confirmation, replaces all current tabs with the backup's content
 - **Include app settings** toggle — when checked, the export file also contains your theme, accent color, and feature flags, and import will restore them too
+- **Export as .txt** — right-click any tab and choose **Export as .txt** to download that tab's content as a plain text file
 
 Exported JSON format:
 ```json
@@ -81,6 +83,7 @@ If you open Writelo in more than one browser tab, they stay in sync automaticall
 | Ctrl+F / Cmd+F | Open Find & Replace (when enabled) |
 | Enter | Next match (in find panel) |
 | Shift+Enter | Previous match (in find panel) |
+| Escape | Exit Focus Mode |
 
 ---
 
@@ -92,7 +95,7 @@ If you open Writelo in more than one browser tab, they stay in sync automaticall
 | Switch tab | Click the tab |
 | Rename tab | Double-click the tab name |
 | Close tab | Click × on the tab (requires more than one tab) |
-| Duplicate / Close | Right-click the tab for a context menu |
+| Duplicate / Close / Export .txt | Right-click the tab for a context menu |
 
 ---
 

app.js

@@ -1021,4 +1021,58 @@ document.addEventListener('DOMContentLoaded', () => {
     localStorage.setItem(WELCOME_KEY, '1');
     setTimeout(() => welcomeModal.classList.add('show'), 400);
   }
+
+  // Export as .txt (context menu)
+  const menuExportTxt = document.getElementById('menu-export-txt');
+  if (menuExportTxt) {
+    menuExportTxt.addEventListener('click', () => {
+      const targetTab = tabs.find(t => t.id === contextMenuTargetId);
+      tabContextMenu.style.display = 'none';
+      contextMenuTargetId = null;
+      if (!targetTab) return;
+
+      // Flush textarea content if this is the active tab
+      if (targetTab.id === activeTabId) targetTab.content = textarea.value;
+
+      if (!targetTab.content.trim()) {
+        showToast('Nothing to export — tab is empty', false);
+        return;
+      }
+
+      const safeName = targetTab.name.replace(/[/\\?%*:|"<>]/g, '-').trim() || 'note';
+      const blob = new Blob([targetTab.content], { type: 'text/plain' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `${safeName}.txt`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+      showToast(`Exported "${targetTab.name}" as .txt`, true);
+    });
+  }
+
+  // Focus Mode
+  const focusBtn = document.getElementById('focus-btn');
+  const focusExitBtn = document.getElementById('focus-exit-btn');
+
+  function enterFocusMode() {
+    document.body.classList.add('focus-mode');
+    textarea.focus();
+  }
+
+  function exitFocusMode() {
+    document.body.classList.remove('focus-mode');
+    textarea.focus();
+  }
+
+  if (focusBtn) focusBtn.addEventListener('click', enterFocusMode);
+  if (focusExitBtn) focusExitBtn.addEventListener('click', exitFocusMode);
+
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && document.body.classList.contains('focus-mode')) {
+      exitFocusMode();
+    }
+  });
 });

index.css

@@ -1764,4 +1764,64 @@ kbd {
 
 [data-accent="grey"] .tab-item.active .close-tab-btn {
     color: #e2e8f0;
+}
+
+/* Focus Mode */
+body.focus-mode {
+    padding: 0;
+}
+
+body.focus-mode .app-container {
+    height: 100dvh;
+    max-width: 100%;
+    gap: 0;
+}
+
+body.focus-mode header,
+body.focus-mode .app-bottom-links {
+    display: none;
+}
+
+body.focus-mode .tabs-bar {
+    display: none;
+}
+
+body.focus-mode .editor-container {
+    border-radius: 0;
+    border-left: none;
+    border-right: none;
+    border-top: none;
+    box-shadow: none;
+}
+
+.focus-exit-btn {
+    position: fixed;
+    top: 1rem;
+    right: 1rem;
+    z-index: 200;
+    display: none;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.35rem 0.75rem 0.35rem 0.6rem;
+    background: var(--glass-bg);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid var(--glass-border);
+    border-radius: 8px;
+    color: var(--text-muted);
+    font-size: 0.75rem;
+    font-family: inherit;
+    cursor: pointer;
+    transition: color 0.2s;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+body.focus-mode .focus-exit-btn {
+    display: flex;
+}
+
+.focus-exit-btn:hover {
+    color: var(--text-main);
+    transform: none;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }

index.html

@@ -86,6 +86,12 @@ <h1>Writelo</h1>
               <line x1="14" y1="11" x2="14" y2="17"></line>
             </svg>
           </button>
+          <button id="focus-btn" title="Focus Mode">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+              stroke-linecap="round" stroke-linejoin="round">
+              <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path>
+            </svg>
+          </button>
         </div>
 
         <!-- Always visible -->
@@ -202,6 +208,14 @@ <h1>Writelo</h1>
     <button id="about-btn" class="bottom-link">About</button>
   </div>
 
+  <button id="focus-exit-btn" class="focus-exit-btn" title="Exit Focus Mode">
+    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+      stroke-linecap="round" stroke-linejoin="round">
+      <path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"></path>
+    </svg>
+    Exit focus
+  </button>
+
   <div id="settings-modal" class="modal-overlay">
     <div class="modal">
       <div class="modal-header">
@@ -332,6 +346,16 @@ <h2>Preview</h2>
       </svg>
       Duplicate
     </div>
+    <div class="menu-item" id="menu-export-txt">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+        stroke-linecap="round" stroke-linejoin="round">
+        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+        <polyline points="14 2 14 8 20 8"></polyline>
+        <line x1="16" y1="13" x2="8" y2="13"></line>
+        <line x1="16" y1="17" x2="8" y2="17"></line>
+      </svg>
+      Export as .txt
+    </div>
     <div class="menu-item menu-item-danger" id="menu-close">
       <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
         stroke-linecap="round" stroke-linejoin="round">
@@ -371,7 +395,7 @@ <h3>Tabs</h3>
             <li><strong>Switch</strong> — click any tab name.</li>
             <li><strong>Rename</strong> — double-click a tab name, type, then press Enter.</li>
             <li><strong>Close</strong> — click the × on a tab (requires confirmation). You need at least two tabs for × to appear.</li>
-            <li><strong>Duplicate / Close</strong> — right-click a tab to open the context menu.</li>
+            <li><strong>Duplicate / Export as .txt / Close</strong> — right-click a tab to open the context menu.</li>
           </ul>
         </div>
 
@@ -401,6 +425,14 @@ <h3>Markdown Preview</h3>
           </ul>
         </div>
 
+        <div class="help-section">
+          <h3>Focus Mode</h3>
+          <ul>
+            <li>Click the ⤢ icon in the toolbar to enter Focus Mode — hides the header, sidebar, and footer for distraction-free writing.</li>
+            <li>Press <kbd>Escape</kbd> or click <strong>Exit focus</strong> (top-right corner) to return to normal view.</li>
+          </ul>
+        </div>
+
         <div class="help-section">
           <h3>Copy &amp; Clear</h3>
           <ul>
@@ -435,6 +467,7 @@ <h3>Keyboard Shortcuts</h3>
             <div class="help-shortcut-row"><kbd>Ctrl+F</kbd><span>Open Find &amp; Replace (when enabled)</span></div>
             <div class="help-shortcut-row"><kbd>Enter</kbd><span>Next match (in Find input)</span></div>
             <div class="help-shortcut-row"><kbd>Shift+Enter</kbd><span>Previous match (in Find input)</span></div>
+            <div class="help-shortcut-row"><kbd>Escape</kbd><span>Exit Focus Mode</span></div>
           </div>
         </div>
       </div>
@@ -549,7 +582,7 @@ <h2>About Writelo</h2>
           <div>
             <p class="about-name">Writelo</p>
             <p class="about-tagline">Simple Text Editor</p>
-            <p class="about-version">v1.1.0</p>
+            <p class="about-version">v1.2.0</p>
           </div>
         </div>