add: user permissions level builder ui

crates/app/src/assets.rs

@@ -60,6 +60,7 @@ pub const MOD_AUDIT_LOG: &str = include_str!("./public/html/mod/audit_log.html")
 pub const MOD_REPORTS: &str = include_str!("./public/html/mod/reports.html");
 pub const MOD_FILE_REPORT: &str = include_str!("./public/html/mod/file_report.html");
 pub const MOD_IP_BANS: &str = include_str!("./public/html/mod/ip_bans.html");
+pub const MOD_PROFILE: &str = include_str!("./public/html/mod/profile.html");
 
 // langs
 pub const LANG_EN_US: &str = include_str!("./langs/en-US.toml");
@@ -186,6 +187,7 @@ pub(crate) async fn write_assets(config: &Config) -> PathBufD {
     write_template!(html_path->"mod/reports.html"(crate::assets::MOD_REPORTS) --config=config);
     write_template!(html_path->"mod/file_report.html"(crate::assets::MOD_FILE_REPORT) --config=config);
     write_template!(html_path->"mod/ip_bans.html"(crate::assets::MOD_IP_BANS) --config=config);
+    write_template!(html_path->"mod/profile.html"(crate::assets::MOD_PROFILE) --config=config);
 
     html_path
 }

crates/app/src/langs/en-US.toml

@@ -30,6 +30,7 @@ version = "1.0.0"
 "dialog:action.yes" = "Yes"
 "dialog:action.no" = "No"
 "dialog:action.save_and_close" = "Save and close"
+"dialog:action.close" = "Close"
 
 "auth:action.login" = "Login"
 "auth:action.register" = "Register"
@@ -45,7 +46,6 @@ version = "1.0.0"
 "auth:label.relationship" = "Relationship"
 "auth:label.joined_communities" = "Joined communities"
 "auth:label.recent_posts" = "Recent posts"
-"auth:label.moderation" = "Moderation"
 
 "communities:action.create" = "Create"
 "communities:action.select" = "Select"
@@ -94,3 +94,5 @@ version = "1.0.0"
 "settings:label.change_banner" = "Change banner"
 
 "mod_panel:label.open_reported_content" = "Open reported content"
+"mod_panel:label.manage_profile" = "Manage profile"
+"mod_panel:label.permissions_level_builder" = "Permission level builder"

crates/app/src/public/css/style.css

@@ -406,7 +406,7 @@ table ol {
 }
 
 .card-nest .card {
-    box-shadow: 0;
+    box-shadow: none;
 }
 
 .card-nest > .card:first-child {

crates/app/src/public/html/communities/settings.html

@@ -325,94 +325,23 @@
                     }
 
                     // permissions manager
-                    const permissions = {
+                    const get_permissions_html = trigger(
-                        // https://trisuaso.github.io/tetratto/tetratto/model/communities_permissions/struct.CommunityPermission.html
+                        "ui::generate_permissions_ui",
-                        DEFAULT: 1 << 0,
+                        [
-                        ADMINISTRATOR: 1 << 1,
+                            {
-                        MEMBER: 1 << 2,
+                                // https://trisuaso.github.io/tetratto/tetratto/model/communities_permissions/struct.CommunityPermission.html
-                        MANAGE_POSTS: 1 << 3,
+                                DEFAULT: 1 << 0,
-                        MANAGE_ROLES: 1 << 4,
+                                ADMINISTRATOR: 1 << 1,
-                        BANNED: 1 << 5,
+                                MEMBER: 1 << 2,
-                        REQUESTED: 1 << 6,
+                                MANAGE_POSTS: 1 << 3,
-                        MANAGE_PINS: 1 << 7,
+                                MANAGE_ROLES: 1 << 4,
-                        MANAGE_COMMUNITY: 1 << 8,
+                                BANNED: 1 << 5,
-                    };
+                                REQUESTED: 1 << 6,
-
+                                MANAGE_PINS: 1 << 7,
-                    function all_matching_permissions(role) {
+                                MANAGE_COMMUNITY: 1 << 8,
-                        const matching = [];
+                            },
-                        const not_matching = [];
+                        ],
-
+                    );
-                        for (permission of Object.entries(permissions)) {
-                            if ((role & permission[1]) === permission[1]) {
-                                matching.push(permission[0]);
-                            } else {
-                                not_matching.push(permission[0]);
-                            }
-                        }
-
-                        return [matching, not_matching];
-                    }
-
-                    function rebuild_role(matching) {
-                        let role = 0;
-
-                        for (const permission of matching) {
-                            role = role | permissions[permission];
-                        }
-
-                        document.getElementById("role").value = role;
-                        return role;
-                    }
-
-                    function get_permissions_html(role, id) {
-                        const [matching, not_matching] =
-                            all_matching_permissions(role);
-
-                        globalThis.remove_permission_from_role = (
-                            permission,
-                        ) => {
-                            matching.splice(matching.indexOf(permission), 1);
-                            not_matching.push(permission);
-
-                            document.getElementById(id).innerHTML =
-                                get_permissions_html(
-                                    rebuild_role(matching),
-                                    id,
-                                );
-                        };
-
-                        globalThis.add_permission_to_role = (permission) => {
-                            not_matching.splice(
-                                not_matching.indexOf(permission),
-                                1,
-                            );
-                            matching.push(permission);
-
-                            document.getElementById(id).innerHTML =
-                                get_permissions_html(
-                                    rebuild_role(matching),
-                                    id,
-                                );
-                        };
-
-                        let permissions_html = "";
-
-                        for (const match of matching) {
-                            permissions_html += `<div class="card w-full secondary flex justify-between gap-2">
-                                <span>${match} <code>${permissions[match]}</code></span>
-                                <button class="red quaternary" onclick="remove_permission_from_role('${match}')">Remove</button>
-                            </div>`;
-                        }
-
-                        for (const match of not_matching) {
-                            permissions_html += `<div class="card w-full secondary flex justify-between gap-2">
-                                <span>${match} <code>${permissions[match]}</code></span>
-                                <button class="green quaternary" onclick="add_permission_to_role('${match}')">Add</button>
-                            </div>`;
-                        }
-
-                        return permissions_html;
-                    }
 
                     // ...
                     element.innerHTML = `<div class="flex gap-2 flex-wrap" ui_ident="actions">

crates/app/src/public/html/components.html

@@ -347,4 +347,72 @@ user.settings.private_last_online or is_helper %}
         </svg>
     </div>
 </div>
+{% endif %} {%- endmacro %} {% macro town_square_post_form() -%} {% if
+config.town_square and user %}
+<div class="card-nest">
+    <div class="card small flex flex-col">
+        <div class="flex items-center gap-2">
+            {{ icon "pencil" }}
+            <span>{{ text "communities:label.create_post" }}</span>
+        </div>
+
+        <span class="fade"
+            >Posts created here go to the
+            <a href="/api/v1/communities/find/{{ config.town_square }}"
+                >town square</a
+            >
+            community!</span
+        >
+    </div>
+
+    <form
+        class="card flex flex-col gap-2"
+        onsubmit="create_post_from_form(event)"
+    >
+        <div class="flex flex-col gap-1">
+            <label for="content">{{ text "communities:label.content" }}</label>
+            <textarea
+                type="text"
+                name="content"
+                id="content"
+                placeholder="content"
+                required
+                minlength="2"
+                maxlength="4096"
+            ></textarea>
+        </div>
+
+        <button class="primary">{{ text "communities:action.create" }}</button>
+    </form>
+</div>
+
+<script>
+    async function create_post_from_form(e) {
+        e.preventDefault();
+        await trigger("atto::debounce", ["posts::create"]);
+        fetch("/api/v1/posts", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+                content: e.target.content.value,
+                community: "{{ config.town_square }}",
+            }),
+        })
+            .then((res) => res.json())
+            .then((res) => {
+                trigger("atto::toast", [
+                    res.ok ? "success" : "error",
+                    res.message,
+                ]);
+
+                if (res.ok) {
+                    setTimeout(() => {
+                        window.location.href = `/post/${res.payload}`;
+                    }, 100);
+                }
+            });
+    }
+</script>
 {% endif %} {%- endmacro %}

crates/app/src/public/html/macros.html

@@ -39,6 +39,13 @@ show_lhs=true) -%}
 
         <div class="flex nav_side">
             {% if user %}
+            <button
+                onclick="document.getElementById('town_square_post_dialog').showModal()"
+                title="Create post"
+            >
+                {{ icon "square-pen" }}
+            </button>
+
             <a
                 href="/notifs"
                 class="button {% if selected == 'notifications' %}active{% endif %}"

crates/app/src/public/html/mod/profile.html

@@ -0,0 +1,237 @@
+{% import "macros.html" as macros %} {% extends "root.html" %} {% block head %}
+<title>Manage profile - {{ config.name }}</title>
+{% endblock %} {% block body %} {{ macros::nav(selected="notifications") }}
+<main class="flex flex-col gap-2">
+    <div class="card-nest w-full">
+        <div class="card small flex items-center gap-2">
+            {{ icon "shield" }}
+            <span>{{ text "mod_panel:label.manage_profile" }}</span>
+        </div>
+
+        <div class="card tertiary">
+            <div class="flex flex-col gap-2" id="mod_options">
+                <div
+                    class="card w-full flex flex-wrap gap-2"
+                    ui_ident="actions"
+                >
+                    <a
+                        href="/settings?username={{ profile.username }}"
+                        class="button quaternary"
+                    >
+                        {{ icon "settings" }}
+                        <span>View settings</span>
+                    </a>
+
+                    <button
+                        class="red quaternary"
+                        onclick="delete_account(event)"
+                    >
+                        {{ icon "trash" }}
+                        <span>{{ text "settings:label.delete_account" }}</span>
+                    </button>
+
+                    {% if profile.permissions != 131073 %}
+                    <button
+                        class="red quaternary"
+                        onclick="update_user_role(131073)"
+                    >
+                        Ban
+                    </button>
+                    {% else %}
+                    <button class="quaternary" onclick="update_user_role(1)">
+                        Unban
+                    </button>
+                    {% endif %}
+                </div>
+            </div>
+
+            <script>
+                setTimeout(() => {
+                    const ui = ns("ui");
+                    const element = document.getElementById("mod_options");
+
+                    async function profile_request(do_confirm, path, body) {
+                        if (do_confirm) {
+                            if (
+                                !(await trigger("atto::confirm", [
+                                    "Are you sure you would like to do this?",
+                                ]))
+                            ) {
+                                return;
+                            }
+                        }
+
+                        fetch(`/api/v1/auth/user/{{ profile.id }}/${path}`, {
+                            method: "POST",
+                            headers: {
+                                "Content-Type": "application/json",
+                            },
+                            body: JSON.stringify(body),
+                        })
+                            .then((res) => res.json())
+                            .then((res) => {
+                                trigger("atto::toast", [
+                                    res.ok ? "success" : "error",
+                                    res.message,
+                                ]);
+                            });
+                    }
+
+                    globalThis.delete_account = async (e) => {
+                        e.preventDefault();
+
+                        if (
+                            !(await trigger("atto::confirm", [
+                                "Are you sure you would like to do this?",
+                            ]))
+                        ) {
+                            return;
+                        }
+
+                        fetch("/api/v1/auth/user/{{ profile.id }}", {
+                            method: "DELETE",
+                            headers: {
+                                "Content-Type": "application/json",
+                            },
+                            body: JSON.stringify({
+                                password: "",
+                            }),
+                        })
+                            .then((res) => res.json())
+                            .then((res) => {
+                                trigger("atto::toast", [
+                                    res.ok ? "success" : "error",
+                                    res.message,
+                                ]);
+                            });
+                    };
+
+                    globalThis.update_user_role = async (new_role) => {
+                        if (
+                            !(await trigger("atto::confirm", [
+                                "Are you sure you would like to do this?",
+                            ]))
+                        ) {
+                            return;
+                        }
+
+                        fetch(`/api/v1/auth/user/{{ profile.id }}/role`, {
+                            method: "POST",
+                            headers: {
+                                "Content-Type": "application/json",
+                            },
+                            body: JSON.stringify({
+                                role: Number.parseInt(new_role),
+                            }),
+                        })
+                            .then((res) => res.json())
+                            .then((res) => {
+                                trigger("atto::toast", [
+                                    res.ok ? "success" : "error",
+                                    res.message,
+                                ]);
+                            });
+                    };
+
+                    ui.refresh_container(element, ["actions"]);
+
+                    setTimeout(() => {
+                        ui.refresh_container(element, ["actions"]);
+
+                        ui.generate_settings_ui(
+                            element,
+                            [
+                                [
+                                    ["is_verified", "Is verified"],
+                                    "{{ profile.is_verified }}",
+                                    "checkbox",
+                                ],
+                                [
+                                    ["role", "Permission level"],
+                                    "{{ profile.permissions }}",
+                                    "input",
+                                ],
+                            ],
+                            null,
+                            {
+                                is_verified: (value) => {
+                                    profile_request(false, "verified", {
+                                        is_verified: value,
+                                    });
+                                },
+                                role: (new_role) => {
+                                    return update_user_role(new_role);
+                                },
+                            },
+                        );
+                    }, 100);
+                }, 150);
+            </script>
+        </div>
+    </div>
+
+    <div class="card-nest w-full">
+        <div class="card small flex items-center justify-between gap-2">
+            <div class="flex items-center gap-2">
+                {{ icon "blocks" }}
+                <span
+                    >{{ text "mod_panel:label.permissions_level_builder"
+                    }}</span
+                >
+            </div>
+
+            <button
+                class="small quaternary"
+                onclick="update_user_role(Number.parseInt(document.getElementById('role').value))"
+            >
+                {{ icon "check" }}
+                <span>{{ text "general:action.save" }}</span>
+            </button>
+        </div>
+
+        <div
+            class="card tertiary flex flex-col gap-2"
+            id="permission_builder"
+        ></div>
+    </div>
+
+    <script>
+        setTimeout(() => {
+            const get_permissions_html = trigger(
+                "ui::generate_permissions_ui",
+                [
+                    {
+                        // https://trisuaso.github.io/tetratto/tetratto/model/permissions/struct.FinePermission.html
+                        DEFAULT: 1 << 0,
+                        ADMINISTRATOR: 1 << 1,
+                        MANAGE_COMMUNITIES: 1 << 2,
+                        MANAGE_POSTS: 1 << 3,
+                        MANAGE_POST_REPLIES: 1 << 4,
+                        MANAGE_USERS: 1 << 5,
+                        MANAGE_BANS: 1 << 6,
+                        MANAGE_WARNINGS: 1 << 7,
+                        MANAGE_NOTIFICATIONS: 1 << 8,
+                        VIEW_REPORTS: 1 << 9,
+                        VIEW_AUDIT_LOG: 1 << 10,
+                        MANAGE_MEMBERSHIPS: 1 << 11,
+                        MANAGE_REACTIONS: 1 << 12,
+                        MANAGE_FOLLOWS: 1 << 13,
+                        MANAGE_VERIFIED: 1 << 14,
+                        MANAGE_AUDITLOG: 1 << 15,
+                        MANAGE_REPORTS: 1 << 16,
+                        BANNED: 1 << 17,
+                        INFINITE_COMMUNITIES: 1 << 18,
+                        SUPPORTER: 1 << 19,
+                    },
+                ],
+            );
+
+            document.getElementById("permission_builder").innerHTML =
+                get_permissions_html(
+                    Number.parseInt("{{ profile.permissions }}"),
+                    "permission_builder",
+                );
+        }, 250);
+    </script>
+</main>
+{% endblock %}

crates/app/src/public/html/profile/base.html

@@ -25,6 +25,12 @@
                                     {{ icon "badge-check" }}
                                 </span>
                                 {% endif %}
+
+                                {% if is_supporter %}
+                                <span title="Supporter" style="color: var(--color-primary);" class="flex items-center">
+                                    {{ icon "star" }}
+                                </span>
+                                {% endif %}
                             </h3>
 
                             <span class="fade">{{ profile.username }}</span>
@@ -126,6 +132,14 @@
                             {{ icon "shield-off" }}
                             <span>{{ text "auto:action.unblock" }}</span>
                         </button>
+                        {% endif %} {% if is_helper %}
+                        <a
+                            href="/mod_panel/profile/{{ profile.id }}"
+                            class="button quaternary"
+                        >
+                            {{ icon "shield" }}
+                            <span>{{ text "general:action.manage" }}</span>
+                        </a>
                         {% endif %}
 
                         <script>
@@ -192,206 +206,7 @@
             </div>
 
             <div class="rhs w-full flex flex-col gap-4">
-                {% if is_helper %}
+                {% block content %}{% endblock %}
-                <div class="card-nest">
-                    <div class="card small flex items-center gap-2">
-                        {{ icon "shield" }}
-                        <span>{{ text "auth:label.moderation" }}</span>
-                    </div>
-
-                    <div class="card tertiary">
-                        <div class="flex flex-col gap-2" id="mod_options">
-                            <div
-                                class="card w-full flex flex-wrap gap-2"
-                                ui_ident="actions"
-                            >
-                                <a
-                                    href="/settings?username={{ profile.username }}"
-                                    class="button quaternary"
-                                >
-                                    {{ icon "settings" }}
-                                    <span>View settings</span>
-                                </a>
-
-                                <button
-                                    class="red quaternary"
-                                    onclick="delete_account(event)"
-                                >
-                                    {{ icon "trash" }}
-                                    <span
-                                        >{{ text "settings:label.delete_account"
-                                        }}</span
-                                    >
-                                </button>
-
-                                {% if profile.permissions != 131073 %}
-                                <button
-                                    class="red quaternary"
-                                    onclick="update_user_role(131073)"
-                                >
-                                    Ban
-                                </button>
-                                {% else %}
-                                <button
-                                    class="quaternary"
-                                    onclick="update_user_role(1)"
-                                >
-                                    Unban
-                                </button>
-                                {% endif %}
-                            </div>
-                        </div>
-
-                        <script>
-                            setTimeout(() => {
-                                const ui = ns("ui");
-                                const element =
-                                    document.getElementById("mod_options");
-
-                                async function profile_request(
-                                    do_confirm,
-                                    path,
-                                    body,
-                                ) {
-                                    if (do_confirm) {
-                                        if (
-                                            !(await trigger("atto::confirm", [
-                                                "Are you sure you would like to do this?",
-                                            ]))
-                                        ) {
-                                            return;
-                                        }
-                                    }
-
-                                    fetch(
-                                        `/api/v1/auth/user/{{ profile.id }}/${path}`,
-                                        {
-                                            method: "POST",
-                                            headers: {
-                                                "Content-Type":
-                                                    "application/json",
-                                            },
-                                            body: JSON.stringify(body),
-                                        },
-                                    )
-                                        .then((res) => res.json())
-                                        .then((res) => {
-                                            trigger("atto::toast", [
-                                                res.ok ? "success" : "error",
-                                                res.message,
-                                            ]);
-                                        });
-                                }
-
-                                globalThis.delete_account = async (e) => {
-                                    e.preventDefault();
-
-                                    if (
-                                        !(await trigger("atto::confirm", [
-                                            "Are you sure you would like to do this?",
-                                        ]))
-                                    ) {
-                                        return;
-                                    }
-
-                                    fetch(
-                                        "/api/v1/auth/user/{{ profile.id }}",
-                                        {
-                                            method: "DELETE",
-                                            headers: {
-                                                "Content-Type":
-                                                    "application/json",
-                                            },
-                                            body: JSON.stringify({
-                                                password: "",
-                                            }),
-                                        },
-                                    )
-                                        .then((res) => res.json())
-                                        .then((res) => {
-                                            trigger("atto::toast", [
-                                                res.ok ? "success" : "error",
-                                                res.message,
-                                            ]);
-                                        });
-                                };
-
-                                globalThis.update_user_role = async (
-                                    new_role,
-                                ) => {
-                                    if (
-                                        !(await trigger("atto::confirm", [
-                                            "Are you sure you would like to do this?",
-                                        ]))
-                                    ) {
-                                        return;
-                                    }
-
-                                    fetch(
-                                        `/api/v1/auth/user/{{ profile.id }}/role`,
-                                        {
-                                            method: "POST",
-                                            headers: {
-                                                "Content-Type":
-                                                    "application/json",
-                                            },
-                                            body: JSON.stringify({
-                                                role: Number.parseInt(new_role),
-                                            }),
-                                        },
-                                    )
-                                        .then((res) => res.json())
-                                        .then((res) => {
-                                            trigger("atto::toast", [
-                                                res.ok ? "success" : "error",
-                                                res.message,
-                                            ]);
-                                        });
-                                };
-
-                                ui.refresh_container(element, ["actions"]);
-
-                                setTimeout(() => {
-                                    ui.refresh_container(element, ["actions"]);
-
-                                    ui.generate_settings_ui(
-                                        element,
-                                        [
-                                            [
-                                                ["is_verified", "Is verified"],
-                                                "{{ profile.is_verified }}",
-                                                "checkbox",
-                                            ],
-                                            [
-                                                ["role", "Permission level"],
-                                                "{{ profile.permissions }}",
-                                                "input",
-                                            ],
-                                        ],
-                                        null,
-                                        {
-                                            is_verified: (value) => {
-                                                profile_request(
-                                                    false,
-                                                    "verified",
-                                                    {
-                                                        is_verified: value,
-                                                    },
-                                                );
-                                            },
-                                            role: (new_role) => {
-                                                return update_user_role(
-                                                    new_role,
-                                                );
-                                            },
-                                        },
-                                    );
-                                }, 100);
-                            }, 150);
-                        </script>
-                    </div>
-                </div>
-                {% endif %} {% block content %}{% endblock %}
             </div>
         </div>
     </div>

crates/app/src/public/html/profile/posts.html

@@ -1,73 +1,5 @@
 {% import "macros.html" as macros %} {% extends "profile/base.html" %} {% block
-content %} {% if config.town_square and is_self %}
+content %}
-<div class="card-nest">
-    <div class="card small flex flex-col">
-        <div class="flex items-center gap-2">
-            {{ icon "pencil" }}
-            <span>{{ text "communities:label.create_post" }}</span>
-        </div>
-
-        <span class="fade"
-            >Posts created here go to the
-            <a href="/api/v1/communities/find/{{ config.town_square }}"
-                >town square</a
-            >
-            community!</span
-        >
-    </div>
-
-    <form
-        class="card flex flex-col gap-2"
-        onsubmit="create_post_from_form(event)"
-    >
-        <div class="flex flex-col gap-1">
-            <label for="content">{{ text "communities:label.content" }}</label>
-            <textarea
-                type="text"
-                name="content"
-                id="content"
-                placeholder="content"
-                required
-                minlength="2"
-                maxlength="4096"
-            ></textarea>
-        </div>
-
-        <button class="primary">{{ text "communities:action.create" }}</button>
-    </form>
-</div>
-
-<script>
-    async function create_post_from_form(e) {
-        e.preventDefault();
-        await trigger("atto::debounce", ["posts::create"]);
-        fetch("/api/v1/posts", {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json",
-            },
-            body: JSON.stringify({
-                content: e.target.content.value,
-                community: "{{ config.town_square }}",
-            }),
-        })
-            .then((res) => res.json())
-            .then((res) => {
-                trigger("atto::toast", [
-                    res.ok ? "success" : "error",
-                    res.message,
-                ]);
-
-                if (res.ok) {
-                    setTimeout(() => {
-                        window.location.href = `/post/${res.payload}`;
-                    }, 100);
-                }
-            });
-    }
-</script>
-{% endif %}
-
 <div class="card-nest">
     <div class="card small flex gap-2 items-center">
         {{ icon "clock" }}

crates/app/src/public/html/root.html

@@ -295,6 +295,26 @@
                 </form>
             </div>
         </dialog>
+
+        <dialog id="town_square_post_dialog">
+            <div class="inner flex flex-col gap-2">
+                {{ components::town_square_post_form() }}
+
+                <div class="flex justify-between">
+                    <div></div>
+
+                    <div class="flex gap-2">
+                        <button
+                            class="bold red quaternary"
+                            onclick="document.getElementById('town_square_post_dialog').remove()"
+                            type="button"
+                        >
+                            {{ icon "x" }} {{ text "dialog:action.close" }}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </dialog>
         {% endif %}
     </body>
 </html>

crates/app/src/public/js/atto.js

@@ -810,4 +810,76 @@ ${option.input_element_type === "textarea" ? `${option.value}</textarea>` : ""}
             };
         },
     );
+
+    // permissions ui
+    self.define(
+        "generate_permissions_ui",
+        (_, permissions, field_id = "role") => {
+            function all_matching_permissions(role) {
+                const matching = [];
+                const not_matching = [];
+
+                for (const permission of Object.entries(permissions)) {
+                    if ((role & permission[1]) === permission[1]) {
+                        matching.push(permission[0]);
+                    } else {
+                        not_matching.push(permission[0]);
+                    }
+                }
+
+                return [matching, not_matching];
+            }
+
+            function rebuild_role(matching) {
+                let role = 0;
+
+                for (const permission of matching) {
+                    role = role | permissions[permission];
+                }
+
+                document.getElementById(field_id).value = role;
+                return role;
+            }
+
+            function get_permissions_html(role, id) {
+                const [matching, not_matching] = all_matching_permissions(role);
+
+                globalThis.remove_permission_from_role = (permission) => {
+                    matching.splice(matching.indexOf(permission), 1);
+                    not_matching.push(permission);
+
+                    document.getElementById(id).innerHTML =
+                        get_permissions_html(rebuild_role(matching), id);
+                };
+
+                globalThis.add_permission_to_role = (permission) => {
+                    not_matching.splice(not_matching.indexOf(permission), 1);
+                    matching.push(permission);
+
+                    document.getElementById(id).innerHTML =
+                        get_permissions_html(rebuild_role(matching), id);
+                };
+
+                let permissions_html = "";
+
+                for (const match of matching) {
+                    permissions_html += `<div class="card w-full secondary flex justify-between gap-2">
+                    <span>${match} <code>${permissions[match]}</code></span>
+                    <button class="red quaternary" onclick="remove_permission_from_role('${match}')">Remove</button>
+                </div>`;
+                }
+
+                for (const match of not_matching) {
+                    permissions_html += `<div class="card w-full secondary flex justify-between gap-2">
+                    <span>${match} <code>${permissions[match]}</code></span>
+                    <button class="green quaternary" onclick="add_permission_to_role('${match}')">Add</button>
+                </div>`;
+                }
+
+                return permissions_html;
+            }
+
+            return get_permissions_html;
+        },
+    );
 })();

crates/app/src/routes/pages/mod.rs

@@ -30,6 +30,10 @@ pub fn routes() -> Router {
             get(mod_panel::file_report_request),
         )
         .route("/mod_panel/ip_bans", get(mod_panel::ip_bans_request))
+        .route(
+            "/mod_panel/profile/{id}",
+            get(mod_panel::manage_profile_request),
+        )
         // auth
         .route("/auth/register", get(auth::register_request))
         .route("/auth/login", get(auth::login_request))

crates/app/src/routes/pages/mod_panel.rs

@@ -1,9 +1,9 @@
 use super::{PaginatedQuery, render_error};
 use crate::{State, assets::initial_context, get_lang, get_user_from_token};
 use axum::{
-    Extension,
+    extract::{Path, Query},
-    extract::Query,
     response::{Html, IntoResponse},
+    Extension,
 };
 use axum_extra::extract::CookieJar;
 use serde::Deserialize;
@@ -149,3 +149,38 @@ pub async fn ip_bans_request(
     // return
     Ok(Html(data.1.render("mod/ip_bans.html", &context).unwrap()))
 }
+
+/// `/mod_panel/profile/{id}`
+pub async fn manage_profile_request(
+    jar: CookieJar,
+    Extension(data): Extension<State>,
+    Path(id): Path<usize>,
+) -> impl IntoResponse {
+    let data = data.read().await;
+    let user = match get_user_from_token!(jar, data.0) {
+        Some(ua) => ua,
+        None => {
+            return Err(Html(
+                render_error(Error::NotAllowed, &jar, &data, &None).await,
+            ));
+        }
+    };
+
+    if !user.permissions.check(FinePermission::MANAGE_USERS) {
+        return Err(Html(
+            render_error(Error::NotAllowed, &jar, &data, &None).await,
+        ));
+    }
+
+    let profile = match data.0.get_user_by_id(id).await {
+        Ok(p) => p,
+        Err(e) => return Err(Html(render_error(e, &jar, &data, &Some(user)).await)),
+    };
+
+    let lang = get_lang!(jar, data.0);
+    let mut context = initial_context(&data.0.0, lang, &Some(user)).await;
+    context.insert("profile", &profile);
+
+    // return
+    Ok(Html(data.1.render("mod/profile.html", &context).unwrap()))
+}

crates/app/src/routes/pages/profile.rs

@@ -8,9 +8,7 @@ use axum::{
 use axum_extra::extract::CookieJar;
 use serde::Deserialize;
 use tera::Context;
-use tetratto_core::model::{
+use tetratto_core::model::{Error, auth::User, communities::Community, permissions::FinePermission};
-    Error, auth::User, communities::Community, permissions::FinePermission,
-};
 
 #[derive(Deserialize)]
 pub struct SettingsProps {
@@ -87,6 +85,11 @@ pub fn profile_context(
     context.insert("is_following", &is_following);
     context.insert("is_following_you", &is_following_you);
     context.insert("is_blocking", &is_blocking);
+
+    context.insert(
+        "is_supporter",
+        &profile.permissions.check(FinePermission::SUPPORTER),
+    );
 }
 
 /// `/@{username}`
@@ -121,11 +124,14 @@ pub async fn posts_request(
     // check for private profile
     if other_user.settings.private_profile {
         if let Some(ref ua) = user {
-            if (ua.id != other_user.id) && !ua.permissions.check(FinePermission::MANAGE_USERS) && data
+            if (ua.id != other_user.id)
+                && !ua.permissions.check(FinePermission::MANAGE_USERS)
+                && data
                     .0
                     .get_userfollow_by_initiator_receiver(other_user.id, ua.id)
                     .await
-                    .is_err() {
+                    .is_err()
+            {
                 return Err(Html(
                     render_error(Error::NotAllowed, &jar, &data, &user).await,
                 ));
@@ -243,11 +249,13 @@ pub async fn following_request(
     // check for private profile
     if other_user.settings.private_profile {
         if let Some(ref ua) = user {
-            if ua.id != other_user.id && data
+            if ua.id != other_user.id
+                && data
                     .0
                     .get_userfollow_by_initiator_receiver(other_user.id, ua.id)
                     .await
-                    .is_err() {
+                    .is_err()
+            {
                 return Err(Html(
                     render_error(Error::NotAllowed, &jar, &data, &user).await,
                 ));
@@ -367,11 +375,13 @@ pub async fn followers_request(
     // check for private profile
     if other_user.settings.private_profile {
         if let Some(ref ua) = user {
-            if ua.id != other_user.id && data
+            if ua.id != other_user.id
+                && data
                     .0
                     .get_userfollow_by_initiator_receiver(other_user.id, ua.id)
                     .await
-                    .is_err() {
+                    .is_err()
+            {
                 return Err(Html(
                     render_error(Error::NotAllowed, &jar, &data, &user).await,
                 ));

crates/core/src/database/communities.rs

@@ -183,7 +183,13 @@ impl DataManager {
                 }
             }
 
-            if admin_count >= 5 {
+            let maximum_count = if owner.permissions.check(FinePermission::SUPPORTER) {
+                10
+            } else {
+                5
+            };
+
+            if admin_count >= maximum_count {
                 return Err(Error::MiscError(
                     "You are already owner/co-owner of too many communities to create another"
                         .to_string(),

crates/core/src/model/permissions.rs

@@ -27,6 +27,7 @@ bitflags! {
         const MANAGE_REPORTS = 1 << 16;
         const BANNED = 1 << 17;
         const INFINITE_COMMUNITIES = 1 << 18;
+        const SUPPORTER = 1 << 19;
 
         const _ = !0;
     }