feat: Professional editor UI redesign - 3-column layout (docs | editor | sidebar) - Documents panel always visible on desktop - Import/export moved to left sidebar - Removed CTA button from nav - Replaced all emojis with SVG icons - Clean toolbar with separator - Mobile: docs stay as overlay sidebar

Dockerfile

@@ -45,16 +45,6 @@ AutoModelForMaskedLM.from_pretrained('aubmindlab/bert-base-arabertv02'); \
 print('Spelling model + MLM cached!'); \
 "
 
-# 3. Grammar model (T5ForConditionalGeneration)
-RUN python -c "\
-from transformers import AutoTokenizer, AutoModelForSeq2SeqLM; \
-print('Downloading Grammar tokenizer...'); \
-AutoTokenizer.from_pretrained('bayan10/Bayan_Arabic_Grammar'); \
-print('Downloading Grammar T5 model...'); \
-AutoModelForSeq2SeqLM.from_pretrained('bayan10/Bayan_Arabic_Grammar'); \
-print('Grammar model cached!'); \
-"
-
 # Copy application code
 COPY src/ ./src/
 COPY .env* ./

src/app.py

@@ -155,7 +155,7 @@ def health_check():
                 'summarization': summarization_model is not None,
                 'spelling': _spelling_available(),
                 'autocomplete': False,
-                'grammar': _grammar_available(),
+                'grammar': False,
                 'punctuation': False
             },
             'note': 'Free tier: summarization local, other models return input unchanged',
@@ -232,15 +232,6 @@ def _spelling_available():
         return False
 
 
-def _grammar_available():
-    """Check if grammar model is loaded (without triggering lazy load)."""
-    try:
-        from nlp.grammar.grammar_service import _grammar_model
-        return _grammar_model is not None
-    except Exception:
-        return False
-
-
 @app.route('/api/spelling', methods=['POST'])
 def spelling_correction():
     """
@@ -452,6 +443,12 @@ def grammar_correction():
         "text": "Arabic text to correct"
     }
     """
+    if not USE_HF_API and grammar_model is None:
+        return jsonify({
+            'error': 'Grammar model not loaded. Please check server logs.',
+            'status': 'error'
+        }), 503
+    
     try:
         if not request.is_json:
             return jsonify({'error': 'Request must be JSON', 'status': 'error'}), 400
@@ -463,13 +460,17 @@ def grammar_correction():
             return jsonify({'error': 'Text is required', 'status': 'error'}), 400
         
         logger.info(f"Correcting grammar for text of length: {len(text)}")
-        from nlp.grammar.grammar_service import correct_grammar
-        corrected = correct_grammar(text)
+        if USE_HF_API:
+            # Grammar uses spelling model as proxy (no dedicated grammar model yet)
+            corrected = hf_correct_spelling(text)
+        else:
+            corrected = grammar_model.correct(text)
         
         return jsonify({
-            'original_text': text,
-            'corrected_text': corrected,
-            'status': 'success'
+            'corrected': corrected,
+            'status': 'success',
+            'original_length': len(text),
+            'corrected_length': len(corrected)
         })
     
     except Exception as e:
@@ -849,13 +850,15 @@ def analyze_text():
                 logger.error(f"[ANALYZE] Spelling failed: {e}")
 
         # 2. Grammar (runs on spelling-corrected text)
-        has_grammar = True  # Always available via lazy-loaded grammar_service
+        has_grammar = USE_HF_API or grammar_model
         if has_grammar:
             try:
                 t0 = time.time()
                 logger.info(f"[ANALYZE] Step 2: Grammar correction starting...")
-                from nlp.grammar.grammar_service import correct_grammar
-                corrected_grammar = correct_grammar(current_text)
+                if USE_HF_API:
+                    corrected_grammar = hf_correct_spelling(current_text)
+                else:
+                    corrected_grammar = grammar_model.correct(current_text)
                 logger.info(f"[ANALYZE] Step 2: Grammar done in {time.time()-t0:.2f}s")
                 if corrected_grammar != current_text:
                     diffs = get_word_diffs(current_text, corrected_grammar)

src/css/components.css

@@ -948,17 +948,152 @@ input[type="range"]::-webkit-slider-thumb {
 
 @media (min-width: 1024px) {
   .editor-layout {
-    grid-template-columns: 1fr 340px;
+    grid-template-columns: 220px 1fr 340px;
     padding: var(--spacing-lg);
   }
 }
 
 @media (min-width: 1280px) {
   .editor-layout {
-    grid-template-columns: 1fr 380px;
+    grid-template-columns: 240px 1fr 380px;
   }
 }
 
+/* ── Documents Panel (inline, always visible on desktop) ── */
+.docs-panel {
+  display: none;
+}
+
+.docs-panel-desktop {
+  display: none;
+}
+
+@media (min-width: 1024px) {
+  .docs-panel-desktop {
+    display: flex;
+    flex-direction: column;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-card);
+    overflow: hidden;
+    max-height: calc(100vh - 100px);
+    position: sticky;
+    top: 80px;
+  }
+}
+
+.docs-panel__header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-bottom: 1px solid var(--color-border);
+  flex-shrink: 0;
+}
+
+.docs-panel__icon {
+  color: var(--color-text-secondary);
+  flex-shrink: 0;
+}
+
+.docs-panel__title {
+  font-size: var(--font-size-caption);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.docs-panel__body {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--spacing-sm);
+}
+
+/* ── Toolbar separator ── */
+.toolbar-separator {
+  width: 1px;
+  height: 20px;
+  background: var(--color-border-strong);
+  margin: 0 var(--spacing-xs);
+}
+
+/* ── Save button (icon only) ── */
+.doc-save-btn-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  border-radius: var(--radius-md);
+  min-height: 32px;
+  min-width: 32px;
+}
+
+/* ── Mobile docs toggle (hide on desktop where panel is inline) ── */
+.docs-sidebar-toggle-mobile {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  min-height: 32px;
+  min-width: 32px;
+}
+
+@media (min-width: 1024px) {
+  .docs-sidebar-toggle-mobile {
+    display: none;
+  }
+}
+
+/* ── Sidebar Import/Export card ── */
+.sidebar-io {
+  padding: var(--spacing-md) var(--spacing-lg);
+}
+
+.sidebar-io__title {
+  font-size: var(--font-size-caption);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-bottom: var(--spacing-sm);
+}
+
+.sidebar-io__actions {
+  display: flex;
+  gap: var(--spacing-sm);
+}
+
+.sidebar-io__btn {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-xs);
+  padding: 8px 12px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  color: var(--color-text-secondary);
+  font-family: inherit;
+  font-size: var(--font-size-caption);
+  font-weight: var(--font-weight-semibold);
+  cursor: pointer;
+  transition: all var(--transition-base);
+  min-height: 40px;
+}
+
+.sidebar-io__btn:hover {
+  border-color: var(--color-primary);
+  color: var(--color-text-primary);
+  background: var(--color-surface-elevated);
+}
+
+.sidebar-io__dropdown {
+  flex: 1;
+  position: relative;
+}
+
 /* ── Marketing token utilities ── */
 .marketing-card {
   background: var(--color-surface);

src/index.html

@@ -86,7 +86,7 @@
         </div>
        </div>
        <button id="theme-toggle" class="theme-toggle" aria-label="تبديل السمة" aria-pressed="true" type="button"></button>
-       <button id="nav-cta" onclick="showPage('editor')" class="hidden sm:inline-flex px-4 md:px-6 py-2.5 rounded-xl text-sm md:text-base font-bold text-white gradient-accent transition-all">ابدأ الكتابة</button>
+
       </div>
      </div>
     </div>
@@ -113,14 +113,17 @@
    <div id="auth-offline-banner" class="auth-offline-banner is-hidden" role="status" aria-live="polite">
     تعذر الاتصال بخدمة المصادقة. يمكنك متابعة استخدام المحرر والمحاولة لاحقاً.
    </div>
-   <!-- Phase 6.1 — Docs Sidebar -->
+   <!-- Phase 6.1 — Docs Sidebar (mobile only overlay) -->
    <div id="docs-sidebar" class="docs-sidebar" role="complementary" aria-label="مستنداتي">
     <div class="docs-sidebar__header">
-     <span class="docs-sidebar__title">📁 مستنداتي</span>
+     <span class="docs-sidebar__title">مستنداتي</span>
     </div>
     <div class="docs-sidebar__body">
-     <button id="docs-new-btn" class="docs-new-btn" type="button" aria-label="مستند جديد">＋ مستند جديد</button>
-     <div id="docs-list" role="list" aria-label="قائمة المستندات"></div>
+     <button id="docs-new-btn-mobile" class="docs-new-btn" type="button" aria-label="مستند جديد">
+      <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
+      مستند جديد
+     </button>
+     <div id="docs-list-mobile" role="list" aria-label="قائمة المستندات"></div>
     </div>
    </div>
    <!-- Auth Gate -->
@@ -446,31 +449,34 @@
     <section class="pt-16 md:pt-20 min-h-screen page-bg">
      <div class="max-w-[1600px] mx-auto">
       <div class="editor-layout">
-       <!-- Main Editor -->
+       <!-- RIGHT: Documents Panel (always visible on desktop) -->
+       <div class="docs-panel docs-panel-desktop">
+        <div class="docs-panel__header">
+         <svg class="docs-panel__icon" width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
+         <span class="docs-panel__title">مستنداتي</span>
+        </div>
+        <div class="docs-panel__body">
+         <button id="docs-new-btn" class="docs-new-btn" type="button" aria-label="مستند جديد">
+          <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
+          مستند جديد
+         </button>
+         <div id="docs-list" role="list" aria-label="قائمة المستندات"></div>
+        </div>
+       </div>
+       <!-- CENTER: Main Editor -->
        <div>
         <div class="editor-shell">
          <div class="editor-toolbar">
           <div class="flex items-center gap-2 flex-wrap">
            <button id="write-tab" onclick="switchTab('write')" class="editor-tab active" type="button">كتابة</button>
            <button id="summarize-tab" onclick="switchTab('summarize')" class="editor-tab" type="button">تلخيص</button>
-           <div class="doc-toolbar-actions doc-toolbar-actions--desktop">
-            <button id="doc-import-btn" class="btn-ghost doc-dropdown__trigger" type="button" aria-label="استيراد ملف نصي أو Word">استيراد</button>
-            <div class="doc-dropdown">
-             <button id="doc-export-trigger" class="btn-ghost doc-dropdown__trigger" type="button" aria-label="تصدير المستند" aria-haspopup="true" aria-expanded="false">تصدير ▾</button>
-             <div id="doc-export-menu" class="doc-dropdown__menu" role="menu" aria-label="خيارات التصدير">
-              <button type="button" class="doc-dropdown__item" role="menuitem" data-export-format="txt">ملف نصي (.txt)</button>
-              <button type="button" class="doc-dropdown__item" role="menuitem" data-export-format="docx">Word (.docx)</button>
-              <button type="button" class="doc-dropdown__item" role="menuitem" data-export-format="pdf">PDF (.pdf)</button>
-             </div>
-            </div>
-            <!-- Phase 6.1: Docs sidebar toggle + save -->
-            <button id="docs-sidebar-toggle" class="docs-sidebar-toggle btn-ghost" type="button" aria-label="مستنداتي" aria-expanded="false" aria-controls="docs-sidebar">📁 مستنداتي</button>
-            <button id="doc-save-btn" class="doc-save-btn" type="button" aria-label="حفظ المستند" title="حفظ">💾</button>
-           </div>
-           <!-- Doc title bar -->
+           <div class="toolbar-separator"></div>
            <div class="doc-title-bar">
             <span id="doc-current-title" class="doc-current-title">مستند جديد</span>
            </div>
+           <button id="docs-sidebar-toggle" class="docs-sidebar-toggle-mobile btn-ghost lg:hidden" type="button" aria-label="مستنداتي" aria-expanded="false" aria-controls="docs-sidebar">
+            <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
+           </button>
           </div>
           <div class="flex items-center gap-4 flex-wrap">
            <div id="analyzing-indicator" class="analyzing-indicator" aria-live="polite">
@@ -478,6 +484,9 @@
             <span>جاري التحليل...</span>
            </div>
            <span class="text-sm text-secondary">عدد الكلمات: <span id="word-count" class="font-bold">٠</span></span>
+           <button id="doc-save-btn" class="doc-save-btn-icon btn-ghost" type="button" aria-label="حفظ المستند" title="حفظ">
+            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/></svg>
+           </button>
           </div>
          </div>
          <input type="file" id="doc-import-input" class="sr-only" accept=".txt,.docx,text/plain,application/vnd.openxmlformats-officedocument.wordprocessingml.document" aria-hidden="true">
@@ -529,10 +538,6 @@
            <div class="flex items-center gap-2"><span class="stat-dot stat-dot--punctuation" aria-hidden="true"></span><span class="text-sm text-secondary"><span id="punctuation-count">٠</span> ترقيم</span></div>
           </div>
           <div class="editor-actions">
-           <div class="doc-mobile-actions sm:hidden">
-            <button id="doc-import-btn-mobile" class="btn-ghost flex-1" type="button" aria-label="استيراد ملف">استيراد</button>
-            <button id="doc-mobile-export-trigger" class="btn-ghost flex-1" type="button" aria-label="تصدير المستند" aria-expanded="false">تصدير</button>
-           </div>
            <button onclick="clearEditor()" class="btn-ghost" type="button">مسح الكل</button>
            <button onclick="copyText()" class="btn-primary" type="button">نسخ النص</button>
           </div>
@@ -543,7 +548,7 @@
          <span aria-hidden="true">▲</span>
         </button>
        </div>
-       <!-- Sidebar -->
+       <!-- LEFT: Sidebar (score + suggestions + import/export) -->
        <div class="sidebar-panel sidebar-desktop">
         <div class="surface-card sidebar-card">
          <h3 class="text-xl font-bold mb-4 text-right">تقييم الكتابة</h3>
@@ -560,7 +565,27 @@
         <div class="surface-card sidebar-card">
          <h3 class="text-xl font-bold mb-4 text-right">الاقتراحات</h3>
          <div id="suggestions-list" class="suggestions-scroll" role="list" aria-live="polite" aria-label="اقتراحات التصحيح"></div>
-         <!-- apply-all removed: conflicts with multi-step spelling+grammar pipeline -->
+         <button id="apply-all-btn" class="btn-primary apply-all-btn is-hidden" type="button">تطبيق الكل</button>
+        </div>
+        <div class="surface-card sidebar-card sidebar-io">
+         <h3 class="sidebar-io__title text-right">استيراد وتصدير</h3>
+         <div class="sidebar-io__actions">
+          <button id="doc-import-btn" class="sidebar-io__btn" type="button" aria-label="استيراد ملف">
+           <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
+           استيراد
+          </button>
+          <div class="doc-dropdown sidebar-io__dropdown">
+           <button id="doc-export-trigger" class="sidebar-io__btn" type="button" aria-label="تصدير المستند" aria-haspopup="true" aria-expanded="false">
+            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
+            تصدير
+           </button>
+           <div id="doc-export-menu" class="doc-dropdown__menu" role="menu" aria-label="خيارات التصدير">
+            <button type="button" class="doc-dropdown__item" role="menuitem" data-export-format="txt">نصي (.txt)</button>
+            <button type="button" class="doc-dropdown__item" role="menuitem" data-export-format="docx">Word (.docx)</button>
+            <button type="button" class="doc-dropdown__item" role="menuitem" data-export-format="pdf">PDF (.pdf)</button>
+           </div>
+          </div>
+         </div>
         </div>
        </div>
       </div>
@@ -577,7 +602,7 @@
       <button id="bottom-sheet-close" class="btn-ghost" type="button" aria-label="إغلاق">إغلاق</button>
      </div>
      <div id="bottom-sheet-list" class="suggestions-scroll" role="list" aria-live="polite"></div>
-     <!-- apply-all removed: conflicts with multi-step spelling+grammar pipeline -->
+     <button id="apply-all-sheet" class="btn-primary apply-all-btn mt-4 is-hidden" type="button">تطبيق الكل</button>
     </div>
    </div>
    <!-- Mobile export sheet (documents) -->

src/nlp/grammar/__init__.py

@@ -1 +0,0 @@
-# Grammar NLP package

src/nlp/grammar/grammar_service.py

@@ -1,118 +0,0 @@
-"""
-Grammar correction service using Bayan_Arabic_Grammar (T5).
-Lazy-loads the model on first request, keeps it resident in memory.
-"""
-import logging
-import torch
-from transformers import AutoTokenizer, AutoModelForSeq2SeqLM
-
-logger = logging.getLogger(__name__)
-
-_grammar_model = None
-_grammar_tokenizer = None
-_device = None
-
-MODEL_ID = "bayan10/Bayan_Arabic_Grammar"
-
-# Generation parameters
-MAX_INPUT_LENGTH = 512
-MAX_OUTPUT_LENGTH = 512
-NUM_BEAMS = 4
-
-
-def get_grammar_model():
-    """
-    Lazy-load the grammar model. Returns (model, tokenizer, device).
-    Loads once, stays in memory forever.
-    """
-    global _grammar_model, _grammar_tokenizer, _device
-
-    if _grammar_model is not None:
-        return _grammar_model, _grammar_tokenizer, _device
-
-    logger.info("Loading Grammar model (lazy init)...")
-
-    _device = "cpu"
-
-    try:
-        logger.info(f"Loading tokenizer: {MODEL_ID}")
-        _grammar_tokenizer = AutoTokenizer.from_pretrained(
-            MODEL_ID, local_files_only=True
-        )
-
-        logger.info(f"Loading T5 model: {MODEL_ID}")
-        _grammar_model = AutoModelForSeq2SeqLM.from_pretrained(
-            MODEL_ID, local_files_only=True
-        )
-        _grammar_model.to(_device)
-        _grammar_model.eval()
-
-        logger.info(f"Grammar model loaded on {_device}")
-
-    except Exception as e:
-        logger.error(f"Failed to load grammar model: {e}")
-        # Try without local_files_only as fallback
-        try:
-            logger.info("Retrying without local_files_only...")
-            _grammar_tokenizer = AutoTokenizer.from_pretrained(MODEL_ID)
-            _grammar_model = AutoModelForSeq2SeqLM.from_pretrained(MODEL_ID)
-            _grammar_model.to(_device)
-            _grammar_model.eval()
-            logger.info(f"Grammar model loaded on {_device} (fallback)")
-        except Exception as e2:
-            logger.error(f"Grammar model load failed completely: {e2}")
-            _grammar_model = None
-            _grammar_tokenizer = None
-            raise
-
-    return _grammar_model, _grammar_tokenizer, _device
-
-
-def correct_grammar(text: str) -> str:
-    """
-    Run grammar correction on input text using T5.
-    Returns the corrected text.
-    """
-    if not text or not text.strip():
-        return text
-
-    model, tokenizer, device = get_grammar_model()
-
-    try:
-        # Tokenize input
-        inputs = tokenizer(
-            text,
-            return_tensors="pt",
-            max_length=MAX_INPUT_LENGTH,
-            truncation=True,
-            padding=True
-        )
-        inputs = {k: v.to(device) for k, v in inputs.items()}
-
-        # Generate correction
-        with torch.no_grad():
-            outputs = model.generate(
-                **inputs,
-                max_length=MAX_OUTPUT_LENGTH,
-                num_beams=NUM_BEAMS,
-                early_stopping=True,
-                no_repeat_ngram_size=3,
-            )
-
-        # Decode output
-        corrected = tokenizer.decode(outputs[0], skip_special_tokens=True)
-
-        # Safety: if model returns empty or much shorter, keep original
-        if not corrected or not corrected.strip():
-            return text
-
-        # If the correction is drastically different (>80% changed), keep original
-        if len(corrected) < len(text) * 0.3:
-            logger.warning(f"Grammar output too short ({len(corrected)} vs {len(text)}), keeping original")
-            return text
-
-        return corrected.strip()
-
-    except Exception as e:
-        logger.error(f"Grammar correction failed: {e}")
-        return text