feat(collab): v4.9.0 Collaboration - commentaires inline, mentions @, notifications in-app + email

app/templates/_page_editor_content.html

@@ -417,6 +417,69 @@
         style="display: none; position: fixed; z-index: 999"
     ></div>
 
+    <!-- ═══════════ @mention autocomplete (v4.9.0) ═══════════ -->
+    <div id="_mentionMenu" class="mention-menu"
+         style="display:none;position:fixed;z-index:1200;min-width:240px;max-height:280px;overflow-y:auto;
+                background:var(--bg-modal,#1f1f1f);border:1px solid var(--border,#333);border-radius:10px;
+                box-shadow:var(--shadow-modal);padding:6px;"></div>
+
+    <!-- ═══════════ Inline comment trigger on selection (v4.9.0) ═══════════ -->
+    <button type="button" id="_commentSelBtn"
+            style="display:none;position:fixed;z-index:1100;padding:7px 12px;font-size:13px;font-weight:600;
+                   color:#fff;background:var(--accent,#2383E2);border:none;border-radius:8px;cursor:pointer;
+                   box-shadow:0 4px 16px rgba(0,0,0,.35);" title="Comment on selection"
+            @click="window.E && window.E.commentOnSelection()">
+        💬 Comment
+    </button>
+
+    <!-- ═══════════ Comments drawer (v4.9.0) ═══════════ -->
+    <div class="comments-drawer" x-show="commentsOpen" x-cloak x-transition
+         style="position:fixed;top:var(--topbar-height,44px);right:0;bottom:0;width:320px;max-width:92vw;
+                background:var(--bg-primary,#1c1c1c);border-left:1px solid var(--border,#333);
+                box-shadow:-8px 0 30px rgba(0,0,0,.25);z-index:900;display:flex;flex-direction:column;">
+        <div class="comments-drawer-header"
+             style="display:flex;align-items:center;justify-content:space-between;padding:12px 16px;
+                    border-bottom:1px solid var(--border,#333);font-weight:600;font-size:14px;">
+            <span>Comments</span>
+            <button type="button" class="topbar-btn" @click="toggleComments()" title="Close">✕</button>
+        </div>
+        <div class="comments-drawer-list" style="flex:1;overflow-y:auto;padding:12px 16px;">
+            <div x-show="comments.length === 0" style="text-align:center;color:var(--text-dim,#999);padding:32px 0;">
+                No comments yet. Select some text and click 💬 Comment.
+            </div>
+            <template x-for="c in comments" :key="c.id">
+                <div class="comment-thread" style="margin-bottom:18px;"
+                     :style="c.anchor_block_id ? 'border-left:3px solid var(--accent);padding-left:10px;' : ''">
+                    <div style="display:flex;align-items:center;gap:8px;margin-bottom:4px;">
+                        <div style="width:22px;height:22px;border-radius:50%;background:#3A3A3A;color:#fff;
+                                    display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;"
+                             :style="{ background: c.author && c.author.avatar_color ? c.author.avatar_color : '#3A3A3A' }">
+                            <span x-text="(c.author ? (c.author.full_name || c.author.login || '?') : '?').charAt(0).toUpperCase()"></span>
+                        </div>
+                        <span style="font-size:12px;font-weight:600;" x-text="c.author ? (c.author.full_name || c.author.login) : 'Unknown'"></span>
+                        <span style="font-size:11px;color:var(--text-dim,#999);margin-left:auto;" x-text="fmtTime(c.created_at)"></span>
+                    </div>
+                    <div style="font-size:13px;white-space:pre-wrap;margin-bottom:6px;" x-text="c.body"></div>
+                    <div style="display:flex;gap:8px;align-items:center;">
+                        <button class="btn-sm" style="font-size:11px;" @click="resolveComment(c.id)"
+                                x-text="c.resolved ? '↪ Reopen' : '✔ Resolve'"></button>
+                        <button class="btn-sm" style="font-size:11px;" x-show="c.user_id === currentUserId"
+                                @click="deleteComment(c.id)">🗑 Delete</button>
+                    </div>
+                </div>
+            </template>
+        </div>
+        <div class="comments-drawer-input" style="border-top:1px solid var(--border,#333);padding:12px 16px;">
+            <textarea x-model="commentDraft" rows="2"
+                      placeholder="Add a comment... Use @ to mention someone."
+                      style="width:100%;background:var(--bg-secondary,#2a2a2a);border:1px solid var(--border,#333);
+                             border-radius:8px;color:var(--text);font-size:13px;padding:8px 10px;resize:none;outline:none;"></textarea>
+            <div style="display:flex;justify-content:flex-end;margin-top:8px;">
+                <button class="btn btn-primary" style="font-size:12px;padding:6px 14px;" @click="addPageComment()">Comment</button>
+            </div>
+        </div>
+    </div>
+
     <div
         class="format-toolbar"
         x-show="fmt.open"