Feature: Basic Export to Text

.gitignore

@@ -5,8 +5,10 @@ packages/sidebar/styles.css
 packages/sidebar/script.js
 packages/sidebar/icon.svg
 packages/sidebar/preload.js
+packages/sidebar/export.js
 packages/newtab/styles.css
 packages/newtab/script.js
 packages/newtab/icon.svg
 packages/newtab/preload.js
+packages/newtab/export.js
 web-ext-artifacts

packages/newtab/newtab.html

@@ -71,6 +71,16 @@
                 </select>
             </div>
 
+            <!-- Export Button -->
+            <button id="export-button" aria-label="Export notes">
+                <svg xmlns="http://www.w3.org/2000/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="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                    <polyline points="7 10 12 15 17 10"></polyline>
+                    <line x1="12" y1="15" x2="12" y2="3"></line>
+                </svg>
+            </button>
+
             <!-- Settings Trigger -->
             <button id="settings-toggle" aria-label="Open settings" aria-expanded="false">
                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
@@ -90,6 +100,7 @@
     </footer>
 
     <script type="text/javascript" src="script.js"></script>
+    <script type="text/javascript" src="export.js"></script>
 </body>
 
 </html>

packages/sidebar/panel.html

@@ -71,6 +71,16 @@
                 </select>
             </div>
 
+            <!-- Export Button -->
+            <button id="export-button" aria-label="Export notes">
+                <svg xmlns="http://www.w3.org/2000/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="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                    <polyline points="7 10 12 15 17 10"></polyline>
+                    <line x1="12" y1="15" x2="12" y2="3"></line>
+                </svg>
+            </button>
+
             <!-- Settings Trigger -->
             <button id="settings-toggle" aria-label="Open settings" aria-expanded="false">
                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
@@ -90,6 +100,7 @@
     </footer>
 
     <script type="text/javascript" src="script.js"></script>
+    <script type="text/javascript" src="export.js"></script>
 </body>
 
 </html>

scripts/copy-shared.js

@@ -6,7 +6,7 @@ const path = require('path');
 // Configuration
 const sharedDir = path.join(__dirname, '../shared');
 const packagesDir = path.join(__dirname, '../packages');
-const sharedFiles = ['script.js', 'styles.css', 'icon.svg', 'preload.js'];
+const sharedFiles = ['script.js', 'styles.css', 'icon.svg', 'preload.js', 'export.js'];
 const targets = ['newtab', 'sidebar'];
 
 // Colors for console output

scripts/watch-shared.js

@@ -8,7 +8,7 @@ const { build } = require('./copy-shared.js');
 
 // Configuration
 const sharedDir = path.join(__dirname, '../shared');
-const sharedFiles = ['script.js', 'styles.css', 'icon.svg'];
+const sharedFiles = ['script.js', 'styles.css', 'icon.svg', 'preload.js', 'export.js'];
 
 // Colors for console output
 const colors = {

shared/export.js

@@ -0,0 +1,61 @@
+// Export functionality for NoteKeeper
+const exportEls = {
+  exportButton: document.getElementById("export-button"),
+  notes: document.getElementById("notes"),
+  status: document.getElementById("save-status"),
+};
+
+// Generate timestamped filename: YYYYMMDDThhmm-notekeeper.txt
+const generateFilename = () => {
+  const now = new Date();
+  const year = now.getFullYear();
+  const month = String(now.getMonth() + 1).padStart(2, "0");
+  const day = String(now.getDate()).padStart(2, "0");
+  const hours = String(now.getHours()).padStart(2, "0");
+  const minutes = String(now.getMinutes()).padStart(2, "0");
+
+  return `${year}${month}${day}T${hours}${minutes}-notekeeper.txt`;
+};
+
+// Export notes to local file
+const exportNotes = () => {
+  const content = exportEls.notes.value;
+
+  if (!content.trim()) {
+    exportEls.status.textContent = "Nothing to export";
+    setTimeout(() => {
+      exportEls.status.textContent = "Ready";
+    }, 2000);
+    return;
+  }
+
+  try {
+    const filename = generateFilename();
+    const blob = new Blob([content], { type: "text/plain;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+
+    exportEls.status.textContent = "Exported";
+    setTimeout(() => {
+      exportEls.status.textContent = "Ready";
+    }, 2000);
+  } catch (error) {
+    console.error("Export error:", error);
+    exportEls.status.textContent = "Export failed";
+    setTimeout(() => {
+      exportEls.status.textContent = "Ready";
+    }, 2000);
+  }
+};
+
+// Initialize export functionality
+if (exportEls.exportButton && exportEls.notes && exportEls.status) {
+  exportEls.exportButton.addEventListener("click", exportNotes);
+}

shared/styles.css

@@ -126,7 +126,8 @@ textarea:focus {
 
 /* Buttons (Shared for Theme & Settings) */
 #theme-toggle,
-#settings-toggle {
+#settings-toggle,
+#export-button {
   background: none;
   border: none;
   padding: 6px;
@@ -138,6 +139,7 @@ textarea:focus {
 
 #theme-toggle:hover,
 #settings-toggle:hover,
+#export-button:hover,
 #settings-toggle[aria-expanded="true"] {
   background: rgba(127, 127, 127, 0.1);
   color: var(--fg);