feat: add leaderboard router, gamification backfill, and shared content creation helpers

Introduce a new `/leaderboard` endpoint ranking top 50 members by total stars, wire it into the app router and documentation. Implement `_backfill_gamification()` in `database.py` to compute XP/levels for existing accounts from prior posts, comments, votes, and follows. Extract `is_owner()`, `create_content_item()`, and `detail_context()` into `content.py` to centralize content creation, reward awarding, mention notifications, and attachment linking. Update comment creation/deletion in `comments.py` to use `award_rewards()` with `XP_COMMENT` and the new `is_owner()` helper. Add shared template partials documentation for vote bars, star buttons, post headers, and topic selectors to `AGENTS.md`.

devplacepy/static/js/DomUtils.js

@@ -8,49 +8,63 @@ export class DomUtils {
         this.initStopPropagation();
     }
 
+    static onDataAttr(attr, event, handler) {
+        document.querySelectorAll(`[data-${attr}]`).forEach((el) => {
+            el.addEventListener(event, (e) => handler(el, e));
+        });
+    }
+
+    static show(el) {
+        el.style.display = "block";
+    }
+
+    static hide(el) {
+        el.style.display = "none";
+    }
+
+    static toggle(el) {
+        el.style.display = el.style.display === "none" ? "block" : "none";
+    }
+
+    static isShown(el) {
+        return el.style.display === "block";
+    }
+
     initClipboardCopy() {
-        document.querySelectorAll("[data-copy]").forEach((btn) => {
-            btn.addEventListener("click", async () => {
-                const source = document.getElementById(btn.dataset.copy);
-                if (!source) return;
-                try {
-                    await navigator.clipboard.writeText(source.textContent);
-                    Toast.flash(btn, "Copied!", 2000);
-                } catch {
-                    // silently fail
-                }
-            });
+        DomUtils.onDataAttr("copy", "click", async (btn) => {
+            const source = document.getElementById(btn.dataset.copy);
+            if (!source) return;
+            try {
+                await navigator.clipboard.writeText(source.textContent);
+                Toast.flash(btn, "Copied!", 2000);
+            } catch {
+                // silently fail
+            }
         });
     }
 
     initShareButtons() {
-        document.querySelectorAll("[data-share]").forEach((btn) => {
-            btn.addEventListener("click", async (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                const url = new URL(btn.dataset.share || window.location.href, window.location.href).href;
-                try {
-                    await navigator.clipboard.writeText(url);
-                    Toast.flash(btn, "Copied!", 1000);
-                } catch {
-                    // silently fail
-                }
-            });
+        DomUtils.onDataAttr("share", "click", async (btn, e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            const url = new URL(btn.dataset.share || window.location.href, window.location.href).href;
+            try {
+                await navigator.clipboard.writeText(url);
+                Toast.flash(btn, "Copied!", 1000);
+            } catch {
+                // silently fail
+            }
         });
     }
 
     initTogglers() {
-        document.querySelectorAll("[data-toggle]").forEach((btn) => {
-            btn.addEventListener("click", () => {
-                const target = document.getElementById(btn.dataset.toggle);
-                if (target) target.classList.toggle("hidden");
-            });
+        DomUtils.onDataAttr("toggle", "click", (btn) => {
+            const target = document.getElementById(btn.dataset.toggle);
+            if (target) target.classList.toggle("hidden");
         });
     }
 
     initStopPropagation() {
-        document.querySelectorAll("[data-stop-propagation]").forEach((el) => {
-            el.addEventListener("click", (e) => e.stopPropagation());
-        });
+        DomUtils.onDataAttr("stop-propagation", "click", (el, e) => e.stopPropagation());
     }
 }

devplacepy/static/js/EmojiPicker.js

@@ -1,4 +1,5 @@
 import { TextInput } from "./TextInput.js";
+import { DomUtils } from "./DomUtils.js";
 
 export class EmojiPicker {
     constructor(textarea) {
@@ -41,15 +42,11 @@ export class EmojiPicker {
     }
 
     toggle() {
-        if (this.wrapper.style.display === "none") {
-            this.wrapper.style.display = "block";
-        } else {
-            this.wrapper.style.display = "none";
-        }
+        DomUtils.toggle(this.wrapper);
     }
 
     hide() {
-        this.wrapper.style.display = "none";
+        DomUtils.hide(this.wrapper);
     }
 }
 window.EmojiPicker = EmojiPicker;

devplacepy/static/js/Http.js

@@ -4,6 +4,33 @@ export class Http {
         return response.json();
     }
 
+    static async sendForm(url, params = {}) {
+        const response = await fetch(url, {
+            method: "POST",
+            headers: {
+                "X-Requested-With": "fetch",
+                "Content-Type": "application/x-www-form-urlencoded",
+            },
+            body: new URLSearchParams(params),
+        });
+        if (!response.ok) {
+            throw new Error(`request failed with status ${response.status}`);
+        }
+        return response.json();
+    }
+
+    static async postJson(url, body) {
+        const response = await fetch(url, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(body),
+        });
+        if (!response.ok) {
+            throw new Error(`request failed with status ${response.status}`);
+        }
+        return response.json();
+    }
+
     static postForm(action, data = {}) {
         const form = document.createElement("form");
         form.method = "POST";

devplacepy/static/js/MentionInput.js

@@ -1,6 +1,7 @@
 import { Http } from "./Http.js";
 import { Avatar } from "./Avatar.js";
 import { TextInput } from "./TextInput.js";
+import { DomUtils } from "./DomUtils.js";
 
 export class MentionInput {
     constructor(element) {
@@ -25,7 +26,7 @@ export class MentionInput {
         this.input.addEventListener("input", () => this.onInput());
         this.input.addEventListener("keydown", (e) => this.onKeydown(e));
         this.input.addEventListener("blur", () => {
-            setTimeout(() => { this.dropdown.style.display = "none"; }, 200);
+            setTimeout(() => DomUtils.hide(this.dropdown), 200);
         });
     }
 
@@ -36,7 +37,7 @@ export class MentionInput {
         let match = text.match(/(?:^|\s|\x28)@([a-zA-Z0-9_-]*)$/);
 
         if (!match) {
-            this.dropdown.style.display = "none";
+            DomUtils.hide(this.dropdown);
             this.lastMatch = null;
             return;
         }
@@ -45,7 +46,7 @@ export class MentionInput {
         this.lastMatch = { query, index: match.index + (text[match.index] === "@" ? 0 : 1) };
 
         if (query.length < 1) {
-            this.dropdown.style.display = "none";
+            DomUtils.hide(this.dropdown);
             return;
         }
 
@@ -57,12 +58,12 @@ export class MentionInput {
             const data = await Http.getJson("/profile/search?q=" + encodeURIComponent(query));
             const results = data.results || [];
             if (results.length === 0) {
-                this.dropdown.style.display = "none";
+                DomUtils.hide(this.dropdown);
                 return;
             }
             this.render(results);
         } catch (e) {
-            this.dropdown.style.display = "none";
+            DomUtils.hide(this.dropdown);
         }
     }
 
@@ -81,12 +82,12 @@ export class MentionInput {
             });
             this.dropdown.appendChild(item);
         }
-        this.dropdown.style.display = "block";
+        DomUtils.show(this.dropdown);
     }
 
     onKeydown(e) {
         const items = this.dropdown.querySelectorAll(".mention-dropdown-item");
-        if (this.dropdown.style.display !== "block" || items.length === 0) {
+        if (!DomUtils.isShown(this.dropdown) || items.length === 0) {
             return;
         }
 
@@ -104,7 +105,7 @@ export class MentionInput {
                 this.insert(items[this.selectedIndex].dataset.username);
             }
         } else if (e.key === "Escape") {
-            this.dropdown.style.display = "none";
+            DomUtils.hide(this.dropdown);
         }
     }
 
@@ -125,7 +126,7 @@ export class MentionInput {
         before = before.replace(/@+$/, "");
         after = after.replace(/^@+/, "");
         TextInput.applyValue(this.input, before + "@" + username + " " + after, before.length + username.length + 2);
-        this.dropdown.style.display = "none";
+        DomUtils.hide(this.dropdown);
         this.lastMatch = null;
     }
 }

devplacepy/static/js/MessageSearch.js

@@ -1,5 +1,6 @@
 import { Http } from "./Http.js";
 import { Avatar } from "./Avatar.js";
+import { DomUtils } from "./DomUtils.js";
 
 export class MessageSearch {
     constructor() {
@@ -24,7 +25,7 @@ export class MessageSearch {
             const q = searchInput.value.trim();
             if (q.length < 1) {
                 dropdown.innerHTML = "";
-                dropdown.style.display = "none";
+                DomUtils.hide(dropdown);
                 return;
             }
             debounceTimer = setTimeout(async () => {
@@ -32,7 +33,7 @@ export class MessageSearch {
                     const data = await Http.getJson(`/messages/search?q=${encodeURIComponent(q)}`);
                     const results = data.results || [];
                     if (results.length === 0) {
-                        dropdown.style.display = "none";
+                        DomUtils.hide(dropdown);
                         return;
                     }
                     dropdown.innerHTML = "";
@@ -43,7 +44,7 @@ export class MessageSearch {
                         item.innerHTML = `${Avatar.imgHtml(r.username)}<span>${r.username}</span>`;
                         dropdown.appendChild(item);
                     }
-                    dropdown.style.display = "block";
+                    DomUtils.show(dropdown);
                 } catch (e) {
                     // silently fail - no suggestions
                 }
@@ -61,7 +62,7 @@ export class MessageSearch {
 
         document.addEventListener("click", (e) => {
             if (!wrap.contains(e.target)) {
-                dropdown.style.display = "none";
+                DomUtils.hide(dropdown);
             }
         });
     }

devplacepy/static/js/PushManager.js

@@ -1,5 +1,7 @@
 // retoor <retoor@molodetz.nl>
 
+import { Http } from "./Http.js";
+
 export class PushManager {
     constructor() {
         this.supported = "serviceWorker" in navigator && "PushManager" in window && "Notification" in window;
@@ -46,8 +48,7 @@ export class PushManager {
                 return;
             }
 
-            const keyResponse = await fetch("/push.json");
-            const keyData = await keyResponse.json();
+            const keyData = await Http.getJson("/push.json");
             const applicationServerKey = Uint8Array.from(atob(keyData.publicKey), (c) => c.charCodeAt(0));
 
             const subscription = await registration.pushManager.subscribe({
@@ -55,15 +56,7 @@ export class PushManager {
                 applicationServerKey: applicationServerKey,
             });
 
-            const response = await fetch("/push.json", {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify(subscription.toJSON()),
-            });
-
-            if (!response.ok) {
-                throw new Error("Bad status code from server.");
-            }
+            await Http.postJson("/push.json", subscription.toJSON());
 
             this.refreshTriggerVisibility();
         } catch (error) {

devplacepy/static/js/VoteManager.js

@@ -1,4 +1,5 @@
 import { Toast } from "./Toast.js";
+import { Http } from "./Http.js";
 
 export class VoteManager {
     constructor() {
@@ -20,18 +21,7 @@ export class VoteManager {
         const action = form.getAttribute("action");
         const value = form.querySelector('input[name="value"]').value;
         try {
-            const response = await fetch(action, {
-                method: "POST",
-                headers: {
-                    "X-Requested-With": "fetch",
-                    "Content-Type": "application/x-www-form-urlencoded",
-                },
-                body: new URLSearchParams({ value }),
-            });
-            if (!response.ok) {
-                throw new Error(`vote failed with status ${response.status}`);
-            }
-            const result = await response.json();
+            const result = await Http.sendForm(action, { value });
             this.render(action, result);
         } catch (error) {
             console.error("vote failed", error);