From f7e79e6136d3928d83f8dc38332a29b4b24bfeb5 Mon Sep 17 00:00:00 2001
From: Ali Orhun Akkirman <aoakkirman@gmail.com>
Date: Sun, 27 Sep 2026 17:53:38 +0300
Subject: [PATCH 1/2] Add offline status backup restore and debounced saves

---
 README.md  |   7 ++
 index.html | 110 +++++++++++++++++++++++++-
 src/app.js | 224 +++++++++++++++++++++++++++++++++++++++++++++++++++--
 3 files changed, 334 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index bcb0ca4..6b06864 100644
--- a/README.md
+++ b/README.md
@@ -87,6 +87,13 @@ Sağ üstteki **Export** düğmesiyle mevcut sekme içeriği şu biçimlerde dı
 ### Dil Desteği
 Sağ üstteki **EN / TR** geçişiyle arayüz dili değiştirilebilir. Tercih `localStorage`'a kaydedilir.
 
+### Offline durum, yedekleme ve kayıt
+- Alt durum çubuğu tarayıcının çevrimiçi / çevrimdışı durumunu anlık gösterir.
+- **Yedek** düğmesi tüm notebook'ları, aktif sekmeyi ve temel görünüm tercihlerini tek bir sürümlü JSON dosyasında dışa aktarır.
+- Aynı JSON yedeği geri yüklenebilir; dosya biçimi ve notebook kayıtları uygulanmadan önce doğrulanır.
+- Editör yazımları `localStorage`'a 300 ms debounce ile kaydedilir; sekme değişimi, dosya oluşturma/silme ve restore gibi yapısal işlemler anında kalıcılaştırılır.
+- Sayfa arka plana geçerken bekleyen kayıt otomatik olarak flush edilir.
+
 ---
 
 ## Kullanım
diff --git a/index.html b/index.html
index bdfcb8b..a5aa175 100644
--- a/index.html
+++ b/index.html
@@ -66,7 +66,7 @@
   border-radius: 6px;
   padding: 2px;
 }
-#export-btn, #info-btn {
+#export-btn, #backup-btn, #info-btn {
   padding: 4px 10px;
   border: 1px solid #ced4da;
   background: #fff;
@@ -82,7 +82,7 @@
   gap: 4px;
   white-space: nowrap;
 }
-#export-btn:hover, #info-btn:hover {
+#export-btn:hover, #backup-btn:hover, #info-btn:hover {
   background: #f1f3f5;
   border-color: #1A71C2;
   color: #1A71C2;
@@ -313,6 +313,33 @@
   align-items: center;
   gap: 4px;
 }
+
+#connection-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  min-width: 58px;
+  padding: 2px 6px;
+  border-radius: 999px;
+  color: #495057;
+  font-weight: 600;
+  white-space: nowrap;
+}
+#connection-status .connection-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #40c057;
+  box-shadow: 0 0 0 2px rgba(64,192,87,0.12);
+}
+#connection-status.offline {
+  color: #c92a2a;
+  background: #fff5f5;
+}
+#connection-status.offline .connection-dot {
+  background: #fa5252;
+  box-shadow: 0 0 0 2px rgba(250,82,82,0.12);
+}
 .zoom-btn {
   display: inline-flex;
   align-items: center;
@@ -816,6 +843,54 @@
 }
 #modal-confirm:hover, #export-confirm:hover { background: #1864ab; }
 
+.backup-desc {
+  font-size: 12px;
+  line-height: 1.5;
+  color: #6c757d;
+  margin: -2px 0 14px;
+}
+.backup-option {
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 11px 12px;
+  margin: 0 0 8px;
+  border: 1px solid #dee2e6;
+  border-radius: 6px;
+  background: #fff;
+  color: #343a40;
+  cursor: pointer;
+  text-align: left;
+  font-family: inherit;
+  transition: border-color 0.15s, background 0.15s;
+}
+.backup-option:hover {
+  border-color: #74c0fc;
+  background: #f8fbff;
+}
+.backup-option strong {
+  display: block;
+  font-size: 13px;
+  margin-bottom: 2px;
+}
+.backup-option span {
+  display: block;
+  font-size: 11px;
+  color: #868e96;
+  line-height: 1.4;
+}
+.backup-option-icon {
+  flex: 0 0 auto;
+  font-size: 16px;
+  line-height: 1.2;
+}
+#backup-close {
+  background: #f1f3f5;
+  color: #495057;
+}
+#backup-close:hover { background: #e9ecef; }
+
 /* ── Insert FAB ────────────────────────────────────────────── */
 #editor-pane { position: relative; }
 #insert-fab {
@@ -893,6 +968,7 @@
   <span id="app-logo">mathnote</span>
   <div id="topbar-right">
     <button id="info-btn" title="Information / Bilgi">Info</button>
+    <button id="backup-btn" title="Backup / Restore">Backup</button>
     <button id="export-btn">&#8593; Export</button>
     <div id="lang-switcher">
       <button class="lang-btn" data-lang="en">EN</button>
@@ -918,6 +994,11 @@
         <span class="status-item" id="st-eqs">0 denklem</span>
       </div>
       <div id="statusbar-right">
+        <span id="connection-status" role="status" aria-live="polite">
+          <span class="connection-dot" aria-hidden="true"></span>
+          <span id="connection-status-text">Online</span>
+        </span>
+        <span class="status-sep"></span>
         <button class="zoom-btn" id="zoom-out" title="Küçült (Ctrl+-)">&minus;</button>
         <span id="zoom-level">100%</span>
         <button class="zoom-btn" id="zoom-in" title="Büyüt (Ctrl++)">&plus;</button>
@@ -969,6 +1050,31 @@
   </div>
 </div>
 
+<div id="backup-modal" class="modal-overlay">
+  <div class="modal" style="width:380px;max-width:92vw">
+    <div class="modal-title" id="backup-modal-title">Backup & Restore</div>
+    <div class="backup-desc" id="backup-modal-desc">Back up or restore all notebooks in one JSON file.</div>
+    <button class="backup-option" id="backup-export-btn" type="button">
+      <span class="backup-option-icon" aria-hidden="true">↓</span>
+      <span>
+        <strong id="backup-export-title">Download backup</strong>
+        <span id="backup-export-desc">Save all notebooks and basic preferences as JSON.</span>
+      </span>
+    </button>
+    <button class="backup-option" id="backup-import-btn" type="button">
+      <span class="backup-option-icon" aria-hidden="true">↑</span>
+      <span>
+        <strong id="backup-import-title">Restore backup</strong>
+        <span id="backup-import-desc">Replace current notebooks from a MathNote JSON backup.</span>
+      </span>
+    </button>
+    <input id="backup-file-input" type="file" accept=".json,application/json" hidden>
+    <div class="modal-actions" style="margin-top:12px">
+      <button id="backup-close">Close</button>
+    </div>
+  </div>
+</div>
+
 <div id="insert-modal" class="modal-overlay">
   <div class="modal" style="width:620px;max-width:95vw">
     <div class="modal-title" id="insert-modal-title"></div>
diff --git a/src/app.js b/src/app.js
index d2d43a7..3bcdbe3 100644
--- a/src/app.js
+++ b/src/app.js
@@ -33,6 +33,10 @@ const translations = {
     equations: 'equations',
     zoomIn: 'Zoom in (Ctrl++)',
     zoomOut: 'Zoom out (Ctrl+-)',
+    online: 'Online',
+    offline: 'Offline',
+    onlineTitle: 'Network connection available',
+    offlineTitle: 'Offline — MathNote continues from local cache',
     
     // Alerts
     atLeastOneFile: 'At least one file must remain open.',
@@ -143,6 +147,21 @@ const translations = {
     exportConfirm: 'Export',
     exportPdfHint: '(browser print)',
 
+    // Backup / restore
+    backupBtn: 'Backup',
+    backupTitle: 'Backup & Restore',
+    backupDesc: 'Back up or restore all notebooks in one JSON file.',
+    backupExportTitle: 'Download backup',
+    backupExportDesc: 'Save all notebooks and basic preferences as JSON.',
+    backupImportTitle: 'Restore backup',
+    backupImportDesc: 'Replace current notebooks from a MathNote JSON backup.',
+    backupClose: 'Close',
+    backupFileName: 'mathnote-backup',
+    backupInvalid: 'This file is not a valid MathNote backup.',
+    backupReadError: 'The backup file could not be read.',
+    backupConfirmRestore: 'Restore this backup? Current notebooks will be replaced.',
+    backupRestored: 'Backup restored successfully.',
+
     // Info modal
     infoBtn: 'Info',
     infoTitle: 'About MathNote',
@@ -203,6 +222,10 @@ const translations = {
     equations: 'denklem',
     zoomIn: 'Büyüt (Ctrl++)',
     zoomOut: 'Küçült (Ctrl+-)',
+    online: 'Çevrimiçi',
+    offline: 'Çevrimdışı',
+    onlineTitle: 'Ağ bağlantısı kullanılabilir',
+    offlineTitle: 'Çevrimdışı — MathNote yerel önbellekten çalışmaya devam eder',
     
     // Alerts
     atLeastOneFile: 'En az bir dosya açık kalmalı.',
@@ -313,6 +336,21 @@ const translations = {
     exportConfirm: 'Dışa Aktar',
     exportPdfHint: '(tarayıcı yazdır)',
 
+    // Yedek / geri yükleme
+    backupBtn: 'Yedek',
+    backupTitle: 'Yedekle & Geri Yükle',
+    backupDesc: 'Tüm not defterlerini tek bir JSON dosyasıyla yedekleyin veya geri yükleyin.',
+    backupExportTitle: 'Yedeği indir',
+    backupExportDesc: 'Tüm not defterlerini ve temel tercihleri JSON olarak kaydedin.',
+    backupImportTitle: 'Yedeği geri yükle',
+    backupImportDesc: 'Mevcut not defterlerini bir MathNote JSON yedeğiyle değiştirin.',
+    backupClose: 'Kapat',
+    backupFileName: 'mathnote-yedek',
+    backupInvalid: 'Bu dosya geçerli bir MathNote yedeği değil.',
+    backupReadError: 'Yedek dosyası okunamadı.',
+    backupConfirmRestore: 'Bu yedek geri yüklensin mi? Mevcut not defterleri değiştirilecek.',
+    backupRestored: 'Yedek başarıyla geri yüklendi.',
+
     // Info modal
     infoBtn: 'Bilgi',
     infoTitle: 'MathNote Hakkında',
@@ -394,6 +432,18 @@ function updateUILanguage() {
   document.getElementById('export-confirm').textContent = t('exportConfirm');
   document.getElementById('export-pdf-label').innerHTML = `PDF <small>${t('exportPdfHint')}</small>`;
 
+  // Update backup / restore UI
+  document.getElementById('backup-btn').textContent = t('backupBtn');
+  document.getElementById('backup-btn').title = t('backupTitle');
+  document.getElementById('backup-modal-title').textContent = t('backupTitle');
+  document.getElementById('backup-modal-desc').textContent = t('backupDesc');
+  document.getElementById('backup-export-title').textContent = t('backupExportTitle');
+  document.getElementById('backup-export-desc').textContent = t('backupExportDesc');
+  document.getElementById('backup-import-title').textContent = t('backupImportTitle');
+  document.getElementById('backup-import-desc').textContent = t('backupImportDesc');
+  document.getElementById('backup-close').textContent = t('backupClose');
+  updateConnectivityStatus();
+
   // Update insert modal
   document.getElementById('insert-modal-title').textContent = t('insertTitle');
   document.getElementById('insert-fab').title = t('insertTitle');
@@ -522,10 +572,34 @@ let files = loadFiles();
 let activeIdx = 0;
 let view = null;
 
-function save() {
+const SAVE_DEBOUNCE_MS = 300;
+let saveTimer = null;
+
+function saveNow() {
+  if (saveTimer !== null) {
+    clearTimeout(saveTimer);
+    saveTimer = null;
+  }
   localStorage.setItem(STORAGE_KEY, JSON.stringify(files));
 }
 
+function scheduleSave() {
+  if (saveTimer !== null) clearTimeout(saveTimer);
+  saveTimer = window.setTimeout(() => {
+    saveTimer = null;
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(files));
+  }, SAVE_DEBOUNCE_MS);
+}
+
+function flushPendingSave() {
+  if (saveTimer !== null) saveNow();
+}
+
+window.addEventListener('pagehide', flushPendingSave);
+document.addEventListener('visibilitychange', () => {
+  if (document.visibilityState === 'hidden') flushPendingSave();
+});
+
 function esc(s) {
   return String(s)
     .replace(/&/g, '&amp;')
@@ -565,7 +639,7 @@ function renderTabs() {
 function switchTo(idx) {
   if (view) {
     files[activeIdx].content = view.state.doc.toString();
-    save();
+    saveNow();
   }
   activeIdx = idx;
   renderTabs();
@@ -590,7 +664,7 @@ function confirmNewFile() {
   if (name) {
     files.push({ name, content: pendingNewFileContent });
     pendingNewFileContent = '';
-    save();
+    saveNow();
     switchTo(files.length - 1);
   }
   document.getElementById('new-file-modal').classList.remove('active');
@@ -641,6 +715,146 @@ function downloadBlob(content, filename, mime) {
   setTimeout(() => { URL.revokeObjectURL(a.href); a.remove(); }, 500);
 }
 
+// ── Connectivity status ────────────────────────────────────────────────────────
+function updateConnectivityStatus() {
+  const status = document.getElementById('connection-status');
+  const label = document.getElementById('connection-status-text');
+  if (!status || !label) return;
+
+  const online = navigator.onLine;
+  status.classList.toggle('offline', !online);
+  status.title = t(online ? 'onlineTitle' : 'offlineTitle');
+  label.textContent = t(online ? 'online' : 'offline');
+}
+
+window.addEventListener('online', updateConnectivityStatus);
+window.addEventListener('offline', updateConnectivityStatus);
+updateConnectivityStatus();
+
+// ── Full backup / restore ─────────────────────────────────────────────────────
+const BACKUP_FORMAT = 'mathnote-backup';
+const BACKUP_VERSION = 1;
+
+function createBackupPayload() {
+  if (view && files[activeIdx]) {
+    files[activeIdx].content = view.state.doc.toString();
+  }
+  saveNow();
+
+  return {
+    format: BACKUP_FORMAT,
+    version: BACKUP_VERSION,
+    exportedAt: new Date().toISOString(),
+    files: files.map(file => ({ name: file.name, content: file.content })),
+    activeIndex: activeIdx,
+    preferences: {
+      language: currentLang,
+      zoom: localStorage.getItem('mathnotebook_zoom'),
+      sidebarWidth: localStorage.getItem('mathnotebook_sidebar_width')
+    }
+  };
+}
+
+function exportFullBackup() {
+  const payload = createBackupPayload();
+  const date = payload.exportedAt.slice(0, 10);
+  const filename = `${t('backupFileName')}-${date}.json`;
+  downloadBlob(JSON.stringify(payload, null, 2), filename, 'application/json;charset=utf-8');
+  document.getElementById('backup-modal').classList.remove('active');
+}
+
+function normalizeBackup(raw) {
+  if (!raw || typeof raw !== 'object' || Array.isArray(raw)) return null;
+  if (raw.format !== BACKUP_FORMAT || raw.version !== BACKUP_VERSION) return null;
+  if (!Array.isArray(raw.files) || raw.files.length === 0) return null;
+
+  const restoredFiles = [];
+  for (const file of raw.files) {
+    if (!file || typeof file !== 'object') return null;
+    if (typeof file.name !== 'string' || typeof file.content !== 'string') return null;
+    const name = file.name.trim();
+    if (!name || name.length > 255) return null;
+    restoredFiles.push({ name, content: file.content });
+  }
+
+  const requestedIndex = Number.isInteger(raw.activeIndex) ? raw.activeIndex : 0;
+  return {
+    files: restoredFiles,
+    activeIndex: Math.max(0, Math.min(requestedIndex, restoredFiles.length - 1)),
+    preferences: raw.preferences && typeof raw.preferences === 'object' ? raw.preferences : {}
+  };
+}
+
+function applyBackup(backup) {
+  files = backup.files;
+  activeIdx = backup.activeIndex;
+
+  const prefs = backup.preferences;
+  if (prefs.language && translations[prefs.language]) {
+    currentLang = prefs.language;
+    localStorage.setItem(LANG_KEY, currentLang);
+  }
+  if (typeof prefs.zoom === 'string' && /^\d+$/.test(prefs.zoom)) {
+    localStorage.setItem('mathnotebook_zoom', prefs.zoom);
+  }
+  if (typeof prefs.sidebarWidth === 'string' && /^\d+(?:\.\d+)?$/.test(prefs.sidebarWidth)) {
+    localStorage.setItem('mathnotebook_sidebar_width', prefs.sidebarWidth);
+  }
+
+  saveNow();
+  renderTabs();
+  replaceEditorContent(files[activeIdx].content);
+  setLanguage(currentLang);
+
+  document.getElementById('backup-modal').classList.remove('active');
+  alert(t('backupRestored'));
+}
+
+function importFullBackup(file) {
+  const reader = new FileReader();
+  reader.addEventListener('load', () => {
+    try {
+      const parsed = JSON.parse(String(reader.result || ''));
+      const backup = normalizeBackup(parsed);
+      if (!backup) {
+        alert(t('backupInvalid'));
+        return;
+      }
+      if (!confirm(t('backupConfirmRestore'))) return;
+      applyBackup(backup);
+    } catch {
+      alert(t('backupInvalid'));
+    } finally {
+      document.getElementById('backup-file-input').value = '';
+    }
+  });
+  reader.addEventListener('error', () => {
+    alert(t('backupReadError'));
+    document.getElementById('backup-file-input').value = '';
+  });
+  reader.readAsText(file);
+}
+
+document.getElementById('backup-btn').addEventListener('click', () => {
+  document.getElementById('backup-modal').classList.add('active');
+});
+document.getElementById('backup-close').addEventListener('click', () => {
+  document.getElementById('backup-modal').classList.remove('active');
+});
+document.getElementById('backup-modal').addEventListener('click', event => {
+  if (event.target === document.getElementById('backup-modal')) {
+    document.getElementById('backup-modal').classList.remove('active');
+  }
+});
+document.getElementById('backup-export-btn').addEventListener('click', exportFullBackup);
+document.getElementById('backup-import-btn').addEventListener('click', () => {
+  document.getElementById('backup-file-input').click();
+});
+document.getElementById('backup-file-input').addEventListener('change', event => {
+  const [file] = event.target.files || [];
+  if (file) importFullBackup(file);
+});
+
 function editorContentToMarkdown(raw) {
   const lines = raw.split('\n');
   const out = [];
@@ -743,7 +957,7 @@ function closeFile(idx) {
   if (!confirm(`"${files[idx].name}" ${t('confirmDelete')}`)) return;
   files.splice(idx, 1);
   activeIdx = Math.min(activeIdx, files.length - 1);
-  save();
+  saveNow();
   renderTabs();
   replaceEditorContent(files[activeIdx].content);
 }
@@ -4329,7 +4543,7 @@ function initEditor(initialContent) {
 
         const content = upd.state.doc.toString();
         files[activeIdx].content = content;
-        save();
+        scheduleSave();
 
         const result = evalAll(content);
         renderSidebar(result.vars, result.funcs, result.plots);

From 1e4a8abc77a32dc4e8875fab1cd37612a558f8bd Mon Sep 17 00:00:00 2001
From: Ali Orhun Akkirman <aoakkirman@gmail.com>
Date: Sun, 27 Sep 2026 17:54:23 +0300
Subject: [PATCH 2/2] Apply restored view preferences immediately

---
 src/app.js | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/app.js b/src/app.js
index 3bcdbe3..0133cc3 100644
--- a/src/app.js
+++ b/src/app.js
@@ -792,13 +792,6 @@ function applyBackup(backup) {
   const prefs = backup.preferences;
   if (prefs.language && translations[prefs.language]) {
     currentLang = prefs.language;
-    localStorage.setItem(LANG_KEY, currentLang);
-  }
-  if (typeof prefs.zoom === 'string' && /^\d+$/.test(prefs.zoom)) {
-    localStorage.setItem('mathnotebook_zoom', prefs.zoom);
-  }
-  if (typeof prefs.sidebarWidth === 'string' && /^\d+(?:\.\d+)?$/.test(prefs.sidebarWidth)) {
-    localStorage.setItem('mathnotebook_sidebar_width', prefs.sidebarWidth);
   }
 
   saveNow();
@@ -806,6 +799,24 @@ function applyBackup(backup) {
   replaceEditorContent(files[activeIdx].content);
   setLanguage(currentLang);
 
+  if (typeof prefs.zoom === 'string' && /^\d+$/.test(prefs.zoom)) {
+    const restoredZoom = parseInt(prefs.zoom, 10);
+    if (Number.isFinite(restoredZoom)) {
+      zoomLevel = Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, restoredZoom));
+      applyZoom();
+    }
+  }
+
+  if (typeof prefs.sidebarWidth === 'string' && /^\d+(?:\.\d+)?$/.test(prefs.sidebarWidth)) {
+    const restoredWidth = parseFloat(prefs.sidebarWidth);
+    const maxWidth = Math.floor(document.body.clientWidth / 2);
+    if (Number.isFinite(restoredWidth) && maxWidth > 150) {
+      const width = Math.max(151, Math.min(restoredWidth, maxWidth - 1));
+      sidebar.style.width = width + 'px';
+      localStorage.setItem(SIDEBAR_WIDTH_KEY, String(width));
+    }
+  }
+
   document.getElementById('backup-modal').classList.remove('active');
   alert(t('backupRestored'));
 }