feat: commentaires façon Notion — ancres jaunes, tiroir refondu, réactions emoji sur texte (v7.64.0)

- Réaction sur texte : bouton 🙂+ (« React to selected text ») dans la toolbar de sélection → sélecteur d'émoji EXISTANT en mode réaction (en-tête = texte sélectionné + ✋, onglets masqués, ligne Recent au-dessus de la grille People, Filter… et barre de catégories avec + custom inchangés) - Backend : migration 37 text_reactions (UNIQUE plage × emoji × utilisateur → POST idempotent) + GET/POST /api/pages/{id}/reactions (GET groupé par plage emoji/count/mine, POST toggle, 400 sur plage vide) - Affichage : plage commentée/réagie peinte en jaune (_paintAnchors après render/loadComments/loadReactions), pastille 😀+compte après la plage, clic pastille = rouvrir le sélecteur, clic ancre = ouvrir et centrer le fil - Pastilles = annotations : gtTok/gtMd les ignorent (y compris le chemin rapide innerText) et les offsets _srcOffset/_srcNodeLen les excluent → le texte sauvé est identique (vérifié dans le e2e) - Tiroir refondu : carte de fil (avatar, nom, horodatage, ✓ toggle resolve/reopen, ⋯ → Copy link #cmt-<id>/Delete), saisie « Add a comment... » avec @ et envoi ↑/Entrée ; #cmt-<id> ouvre et centre le fil au chargement ; loadComments + loadReactions à l'ouverture (commentCount enfin renseigné) - Fixes : resolveComment ne pouvait pas rouvrir (toujours resolved:true) ; showCommentBtn ignorait les sélections à ancre élément (bouton 💬 jamais affiché) - Tests : tests/test_v764_comments_reactions.py (8, dont toggle API réel), e2e/v764_comments_reactions.spec.js (8 étapes) — 3/3 specs e2e verts, suite complète 1383 passed / 0 failed, ruff OK, OpenAPI 7.64.0 (526 chemins)
2026-10-08 10:46:14 -04:00
parent 699165469d
commit 400a827e3f
15 changed files with 920 additions and 39 deletions
@@ -186,7 +186,7 @@ async def lifespan(_app: FastAPI):

 app = FastAPI(
    title="FlowDeck",
-    version="7.63.0",
+    version="7.64.0",
    docs_url="/docs",
    redoc_url="/redoc",
    lifespan=lifespan,
@@ -1680,6 +1680,32 @@ def _migration_agent_memory(conn: sqlite3.Connection) -> None:
    )


+@register(37, "v7.64.0: réactions emoji sur un texte sélectionné")
+def _migration_text_reactions(conn: sqlite3.Connection) -> None:
+    """Réactions emoji ancrées sur une plage de texte (façon Notion) : miroir des
+    ancres de commentaires (block_id + offsets dans le texte rendu). Une ligne par
+    (plage, emoji, utilisateur) → le POST agit comme un toggle et le GET regroupe
+    par plage pour afficher la pastille d'émojis."""
+    conn.execute(
+        """
+        CREATE TABLE IF NOT EXISTS text_reactions (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            page_id INTEGER NOT NULL REFERENCES pages(id) ON DELETE CASCADE,
+            block_id TEXT NOT NULL,
+            anchor_start INTEGER NOT NULL,
+            anchor_end INTEGER NOT NULL,
+            emoji TEXT NOT NULL,
+            user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+            created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+            UNIQUE(page_id, block_id, anchor_start, anchor_end, emoji, user_id)
+        )
+        """
+    )
+    conn.execute(
+        "CREATE INDEX IF NOT EXISTS idx_text_reactions_page ON text_reactions(page_id)"
+    )
+
+
@register(36, "v7.59.1: mistral — modèles par défaut hors plan basique")
 def _migration_mistral_default_model(conn: sqlite3.Connection) -> None:
    """mistral-large-latest / pixtral-large-latest renvoient 403
@@ -206,3 +206,67 @@ def delete_comment(request: Request, comment_id: int):
        conn.execute("DELETE FROM comments WHERE id=? OR parent_id=?", (comment_id, comment_id))
        conn.commit()
    return {"id": comment_id, "status": "deleted"}
+
+
+# ── v7.64.0 : réactions emoji sur un texte sélectionné ──────────────────────
+
+@router.get("/pages/{page_id}/reactions")
+def list_reactions(request: Request, page_id: int):
+    """Réactions regroupées par plage de texte : {block_id, start, end, emoji, count, mine}."""
+    user = _current_user(request)
+    with get_conn() as conn:
+        if not conn.execute("SELECT id FROM pages WHERE id=?", (page_id,)).fetchone():
+            raise HTTPException(404, "Page not found")
+        rows = conn.execute(
+            """SELECT block_id, anchor_start, anchor_end, emoji,
+                      COUNT(*) AS count,
+                      MAX(CASE WHEN user_id=? THEN 1 ELSE 0 END) AS mine
+               FROM text_reactions
+               WHERE page_id=?
+               GROUP BY block_id, anchor_start, anchor_end, emoji
+               ORDER BY MIN(id)""",
+            (user["id"], page_id),
+        ).fetchall()
+    return {"page_id": page_id, "reactions": [dict(r) for r in rows]}
+
+
+@router.post("/pages/{page_id}/reactions")
+def toggle_reaction(request: Request, page_id: int, body: dict = Body(default={})):
+    """Ajoute ou retire la réaction de l'utilisateur sur une plage de texte (toggle)."""
+    user = _current_user(request)
+    block = (body.get("block_id") or "").strip()
+    emoji = (body.get("emoji") or "").strip()
+    try:
+        start = int(body.get("anchor_start"))
+        end = int(body.get("anchor_end"))
+    except (TypeError, ValueError):
+        raise HTTPException(400, "anchor offsets required") from None
+    if not block or not emoji or start < 0 or end <= start:
+        raise HTTPException(400, "block_id, emoji and a non-empty range are required")
+    uid = user["id"]
+    with get_conn() as conn:
+        if not conn.execute("SELECT id FROM pages WHERE id=?", (page_id,)).fetchone():
+            raise HTTPException(404, "Page not found")
+        conn.execute(
+            "INSERT OR IGNORE INTO users (id, login, full_name, is_admin) VALUES (?,?,?,1)",
+            (uid, user.get("login", "admin"), user.get("full_name", "Admin")),
+        )
+        existing = conn.execute(
+            """SELECT id FROM text_reactions
+               WHERE page_id=? AND block_id=? AND anchor_start=? AND anchor_end=?
+                 AND emoji=? AND user_id=?""",
+            (page_id, block, start, end, emoji, uid),
+        ).fetchone()
+        if existing:
+            conn.execute("DELETE FROM text_reactions WHERE id=?", (existing["id"],))
+            status = "removed"
+        else:
+            conn.execute(
+                """INSERT INTO text_reactions
+                   (page_id, block_id, anchor_start, anchor_end, emoji, user_id)
+                   VALUES (?,?,?,?,?,?)""",
+                (page_id, block, start, end, emoji, uid),
+            )
+            status = "added"
+        conn.commit()
+    return {"status": status, "emoji": emoji}
@@ -16,6 +16,9 @@

 <style>
 .fd-icon-picker{position:fixed;top:0;left:0;width:344px;background:var(--bg-modal);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,.28);z-index:2200;display:flex;flex-direction:column;max-height:440px;overflow:hidden;padding:0;}
+.fd-icon-picker .fdip-title{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border);}
+.fd-icon-picker .fdip-title-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600;color:var(--text-primary);}
+.fd-icon-picker .fdip-title-grip{opacity:.6;font-size:14px;}
 .fd-icon-picker .fdip-tabs{display:flex;align-items:center;gap:2px;padding:8px 10px 6px;border-bottom:1px solid var(--border);}
 .fd-icon-picker .fdip-tab{background:transparent;border:none;color:var(--text-secondary);font-size:13px;padding:5px 10px;border-radius:6px;cursor:pointer;}
 .fd-icon-picker .fdip-tab:hover{background:var(--bg-hover);}
@@ -70,7 +73,11 @@
       @click.outside="$store.fdIconPicker.customModal || $store.fdIconPicker.close()"
       @keydown.escape.window="$store.fdIconPicker.close()"
       :style="'top:' + $store.fdIconPicker.y + 'px;left:' + $store.fdIconPicker.x + 'px'">
-    <div class="fdip-tabs">
+    <div class="fdip-title" x-show="$store.fdIconPicker.title" x-cloak>
+      <span class="fdip-title-text" x-text="$store.fdIconPicker.title"></span>
+      <span class="fdip-title-grip" title="Drag">✋</span>
+    </div>
+    <div class="fdip-tabs" x-show="!$store.fdIconPicker.title">
      <button class="fdip-tab" :class="{ active: $store.fdIconPicker.tab === 'emoji' }" @click="$store.fdIconPicker.setTab('emoji')">Emoji</button>
      <button class="fdip-tab" :class="{ active: $store.fdIconPicker.tab === 'icons' }" @click="$store.fdIconPicker.setTab('icons')">Icons</button>
      <button class="fdip-tab" :class="{ active: $store.fdIconPicker.tab === 'upload' }" @click="$store.fdIconPicker.setTab('upload')">Upload</button>
@@ -93,6 +100,15 @@
    <div class="fdip-body">
      <template x-if="$store.fdIconPicker.tab === 'emoji'">
        <div>
+          <!-- v7.64 : mode réaction — les récents au-dessus de la grille (façon Notion) -->
+          <div x-show="$store.fdIconPicker.title && $store.fdIconPicker.category !== 'recent' && !$store.fdIconPicker.query && $store.fdIconPicker.recent.length">
+            <div class="fdip-section">Recent</div>
+            <div class="fdip-grid">
+              <template x-for="e in $store.fdIconPicker.recent.slice(0, 8)" :key="'rt' + e">
+                <button class="fdip-emoji" @click="$store.fdIconPicker.pick($store.fdIconPicker.withTone(e))" x-text="$store.fdIconPicker.withTone(e)"></button>
+              </template>
+            </div>
+          </div>
          <div class="fdip-section" x-show="$store.fdIconPicker.category === 'recent' && !$store.fdIconPicker.query">Recent</div>
          <div class="fdip-grid">
            <template x-for="e in $store.fdIconPicker.items()" :key="e">
@@ -587,15 +587,15 @@
        💬 Comment
    </button>

-    <!-- ═══════════ Comments drawer (v4.9.0) ═══════════ -->
+    <!-- ═══════════ Comments drawer (v4.9.0 · refonte v7.64 façon Notion) ═══════════ -->
    <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;
+         style="position:fixed;top:var(--topbar-height,44px);right:0;bottom:0;width:340px;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>
+            <span>Comments <span style="color:var(--text-dim);font-weight:400;" x-text="'(' + commentCount + ')'"></span></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;">
@@ -603,34 +603,43 @@
                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;"
+                <div class="comment-thread" :data-thread="c.id"
+                     :class="{ 'is-resolved': c.resolved, 'has-anchor': !!c.anchor_block_id }">
+                    <div class="ct-head">
+                        <div class="ct-avatar"
                             :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>
+                        <span class="ct-name" x-text="c.author ? (c.author.full_name || c.author.login) : 'Unknown'"></span>
+                        <span class="ct-time" x-text="fmtTime(c.created_at)"></span>
+                        <div class="ct-actions">
+                            <button type="button" class="ct-act" :title="c.resolved ? 'Reopen' : 'Resolve'"
+                                    @click="resolveComment(c)"
+                                    :class="{ 'is-on': c.resolved }">✓</button>
+                            <button type="button" class="ct-act" title="More"
+                                    x-show="c.user_id === currentUserId"
+                                    @click.stop="commentMenu = commentMenu === c.id ? null : c.id">⋯</button>
+                        </div>
+                        <div class="ct-menu" x-cloak x-show="commentMenu === c.id" @click.outside="commentMenu = null">
+                            <button type="button" class="ct-menu-item" @click="copyCommentLink(c.id)">🔗 Copy link</button>
+                            <button type="button" class="ct-menu-item is-danger" @click="deleteComment(c.id)">🗑 Delete</button>
+                        </div>
                    </div>
+                    <div class="ct-body" x-text="c.body"></div>
+                    <div class="ct-anchor-label" x-show="!!c.anchor_block_id && !c.resolved">💬 on selected text</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 class="comments-drawer-input">
+            <div class="ct-input-row">
+                <textarea x-model="commentDraft" rows="1"
+                          placeholder="Add a comment..."
+                          @keydown.enter.exact.prevent="addPageComment()"></textarea>
+                <div class="ct-input-actions">
+                    <button type="button" class="ct-act" title="Mention" @click="commentAt()">@</button>
+                    <button type="button" class="ct-send" title="Send"
+                            :disabled="!(commentDraft || '').trim()" @click="addPageComment()">↑</button>
+                </div>
            </div>
        </div>
    </div>
@@ -666,6 +675,7 @@
        <div class="ft-row">
            <button type="button" class="ft-item" @click="fmtLink()" data-tooltip="Link">{{ fd_icon("link",15) }}</button>
            <button type="button" class="ft-item" @click="fmtHighlight()" data-tooltip="Highlight"><span class="ft-hl">S</span></button>
+            <button type="button" class="ft-item ft-react" @click="fmtReact()" data-tooltip="React to selected text"><span class="ft-react-ico">🙂<span class="ft-react-plus">+</span></span></button>
            <button type="button" class="ft-item ft-code-ico" @click="fmtCodeBlock()" data-tooltip="Code block">&lt;/&gt;</button>
            <button type="button" class="ft-item" @click="fmtEquation()" data-tooltip="Equation">√x</button>
            <button type="button" class="ft-item ft-more" @click="fmtMore($event)" data-tooltip="More actions">…</button>