Added a punctuation panel and feature to store page state

Author: arverma

README.hi.md

@@ -14,7 +14,7 @@
 - इसी कंप्यूटर/फ़ोन पर दस्तावेज़ों का **इतिहास** रखें
 - ब्राउज़र से **प्रिंट** या **PDF सेव** करें
 - वैकल्पिक **Google Drive बैकअप** (जब आप खुद कनेक्ट और सिंक करें)
-- कंप्यूटर पर: **Hinglish सुझाव** और वैकल्पिक **बोलकर लिखें** माइक
+- कंप्यूटर पर: **Hinglish सुझाव**, **विराम चिह्न पैनल (Punctuation Panel)** और वैकल्पिक **बोलकर लिखें** माइक
 - फ़ोन पर: **कीबोर्ड** (और उसका माइक) — ऐप का माइक जानबूझकर छिपा रहता है
 
 ## कैसे खोलें

README.md

@@ -14,7 +14,7 @@
 - Keep a **history** of documents on this computer or phone
 - **Print** or **Save as PDF** from your browser
 - Optionally **back up to Google Drive** (only when you connect and sync)
-- On a computer: **Hinglish suggestions** and an optional **speak-to-type** microphone
+- On a computer: **Hinglish suggestions**, **Punctuation Panel**, and an optional **speak-to-type** microphone
 - On a phone: use the **keyboard** (including its mic) — the in-app mic is hidden on purpose
 
 ## How to open it

docs/README.md

@@ -18,6 +18,7 @@ Architecture and how the pieces fit together. For everyday use (opening the app,
 | [Local storage](components/storage.md) | Autosave in IndexedDB |
 | [Drive backup](components/drive-backup.md) | Optional Google Drive sync |
 | [Hinglish typing](components/typing.md) | Transliteration suggestions |
+| Punctuation Panel | Draggable panel with common Hindi/English punctuation |
 | [Dictation](components/dictation.md) | In-app microphone (desktop/tablet) |
 | [Page preview](components/page-preview.md) | On-screen fit / pinch zoom |
 | [Deploy](components/deploy.md) | GitHub Pages and local preview |

editor/css/overlays-responsive.css

@@ -46,7 +46,8 @@
 /* Mobile keyboards already expose a mic — hide in-app dictation chrome */
 @media (max-width: 768px) {
     .dictation-fab,
-    .dictation-interim {
+    .dictation-interim,
+    .punctuation-panel {
         display: none !important;
     }
 

editor/css/style.css

@@ -2042,6 +2042,153 @@ span.diary-dotted-flow:focus {
     }
 }
 
+/* ── Punctuation Panel ── */
+.punctuation-panel {
+    position: fixed;
+    right: 16px;
+    top: 50%;
+    transform: translateY(-50%) translateX(calc(100% + 16px));
+    transition: transform 0.3s cubic-bezier(.4, 0, .2, 1);
+    z-index: 1050;
+    display: flex;
+    align-items: center;
+}
+
+.punctuation-panel.is-open {
+    transform: translateY(-50%) translateX(0);
+}
+
+.punctuation-toggle {
+    position: absolute;
+    left: -48px;
+    width: 40px;
+    height: 40px;
+    background: var(--brand-white);
+    border: 1px solid var(--color-border-light);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    box-shadow: var(--shadow-medium);
+    color: var(--color-text-secondary);
+    font-size: 1rem;
+    transition: opacity 0.2s, color 0.2s, background 0.2s;
+}
+
+.punctuation-toggle:hover {
+    color: var(--brand-primary);
+    background: var(--color-background-soft);
+}
+
+.punctuation-panel.is-open .punctuation-toggle {
+    opacity: 0;
+    pointer-events: none;
+    transform: scale(0.9);
+}
+
+.punctuation-content {
+    background: var(--brand-white);
+    border: 1px solid var(--color-border-light);
+    border-radius: 12px;
+    padding: 12px;
+    box-shadow: var(--shadow-popup);
+    width: fit-content;
+    max-width: 260px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.punctuation-footer {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-height: 24px;
+    padding-top: 8px;
+    border-top: 1px solid var(--color-border-light);
+}
+
+.punctuation-close {
+    background: var(--brand-white);
+    border: 1px solid var(--color-border-medium);
+    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
+    cursor: pointer;
+    color: var(--color-text-primary);
+    font-size: 0.85rem;
+    padding: 4px 8px;
+    border-radius: 6px;
+    flex: 0 0 auto;
+    line-height: 1;
+    transition: all 0.15s ease;
+}
+
+.punctuation-close:hover {
+    color: var(--color-error);
+    border-color: rgba(220, 53, 69, 0.4);
+    background: #fffafa;
+    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.1);
+}
+
+.punctuation-close:active {
+    transform: translateY(1px);
+    box-shadow: none;
+}
+
+.punctuation-grid {
+    display: grid;
+    grid-template-columns: repeat(5, 38px);
+    grid-auto-rows: 38px;
+    gap: 4px;
+    justify-content: center;
+}
+
+.punctuation-tile {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    border-radius: 6px;
+    background: transparent;
+    cursor: pointer;
+    font-size: 1.1rem;
+    color: var(--color-text-primary);
+    transition: background 0.15s, color 0.15s, transform 0.1s;
+    user-select: none;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.punctuation-tile:hover {
+    background: #e9ecef;
+    color: var(--color-text-primary);
+    transform: translateY(-2px) scale(1.05);
+    box-shadow: 0 2px 5px rgba(0,0,0,0.06);
+}
+
+.punctuation-tile:active {
+    background: #dee2e6;
+    transform: translateY(0) scale(0.95);
+    box-shadow: none;
+}
+
+.punctuation-tile.is-copied {
+    background: var(--brand-primary);
+    color: var(--brand-white);
+}
+
+.punctuation-tooltip {
+    flex: 1 1 auto;
+    text-align: left;
+    font-size: 0.75rem;
+    line-height: 1.25;
+    color: var(--color-text-secondary);
+    min-height: 0;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+}
+
 @media print {
     .modal-overlay {
         position: static;

editor/help.html

@@ -370,6 +370,7 @@ <h3>Your rights (GDPR)</h3>
                 </p>
                 <ul>
                     <li><strong>Letter</strong> and <strong>Diary</strong> templates with print-ready layout</li>
+                    <li><strong>Punctuation panel</strong> for quick insertion of standard marks</li>
                     <li>Document history stored locally in your browser (IndexedDB)</li>
                     <li>
                         Optional Google Drive backup — <strong>Sync all</strong> (pull + push) or

editor/index.html

@@ -283,6 +283,21 @@ <h3>History</h3>
         <div class="dictation-sheet-body"></div>
     </dialog>
 
+    <aside id="punctuationPanel" class="punctuation-panel">
+        <button id="punctuationToggle" class="punctuation-toggle" title="विराम चिह्न (Punctuation)">
+            <i class="fas fa-quote-right"></i>
+        </button>
+        <div class="punctuation-content">
+            <div id="punctuationGrid" class="punctuation-grid"></div>
+            <div class="punctuation-footer">
+                <button id="punctuationClose" class="punctuation-close" title="Close" aria-label="Close">
+                    <i class="fas fa-times"></i>
+                </button>
+                <div id="punctuationTooltip" class="punctuation-tooltip">Hover over a mark</div>
+            </div>
+        </div>
+    </aside>
+
     <div id="suggestions" class="suggestions-box"></div>
     <script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
     <script type="module" src="js/main.js"></script>

editor/js/drive-sync.js

@@ -281,58 +281,6 @@ async function uploadDocFile(doc, folderId, fileId) {
     return createMultipart();
 }
 
-/**
- * Push one document (live or tombstone).
- * @param {'letter'|'diary'} type
- * @param {number} id
- */
-export async function pushDocById(type, id) {
-    return enqueue(async () => {
-        if (!isConnected()) return { ok: false, reason: 'disconnected' };
-        setSyncState('syncing');
-        try {
-            const doc = await getDocumentById(type, id);
-            if (!doc || !doc.uuid) {
-                setSyncState('idle');
-                return { ok: false, reason: 'missing' };
-            }
-            if (!needsBackup(doc)) {
-                setSyncState('idle');
-                return { ok: true, skipped: true };
-            }
-
-            const folderId = await ensureFolder();
-            let fileId = doc.driveFileId || null;
-            if (!fileId) {
-                const found = await findFileByUuid(folderId, doc.uuid);
-                fileId = found?.id || null;
-            }
-
-            const newId = await uploadDocFile(doc, folderId, fileId);
-            const syncedAt = new Date().toISOString();
-            await markSynced(type, id, {
-                driveFileId: newId,
-                syncedAt,
-                syncError: null,
-            });
-
-            if (doc.deletedAt) {
-                await hardDeleteById(type, id);
-            }
-
-            setSyncState('idle');
-            return { ok: true, driveFileId: newId };
-        } catch (err) {
-            const message = err?.message || String(err);
-            try {
-                await markSynced(type, id, { syncError: message });
-            } catch (_) { /* ignore */ }
-            setSyncState('error', message);
-            return { ok: false, error: message };
-        }
-    });
-}
-
 export async function pushPending(type) {
     return enqueue(async () => {
         if (!isConnected()) return { ok: false, reason: 'disconnected' };