turn most modals into inline modals

frontend/src/components/ChannelTopBar.svelte

@@ -30,7 +30,7 @@
         <span class="unread-indicator">{$totalUnreadsStore}</span>
     {/if}
     <span class="material-icons-outlined" class:tag-icon-has-sidebar-button="{ !$showSidebar }" class:has-unreads="{ $totalUnreadsStore > 0 }">tag</span>
-    <span class="text-small top-bar-heading accent" on:click="{ () => overlayStore.push(OverlayType.EditChannel, {channel}) }">{ channel.name }</span>
+    <span class="text-small top-bar-heading accent" on:click|stopPropagation="{ ({ pageX, pageY }) => overlayStore.pushAbsolute(OverlayType.EditChannel, pageX, pageY, {channel}) }">{ channel.name }</span>
     <div class="right-buttons">
         <button class="icon-button" on:click="{ () => showPresenceSidebar.set(!showPresenceSidebar.value) }" aria-label="Toggle user list">
             <span class="material-icons-outlined">people</span>

frontend/src/components/ChipBar.svelte

@@ -9,14 +9,14 @@
         onSelect(selectedOptionId);
     }
 
-    const optionClick = (option) => {
+    const optionClick = (option, event) => {
         if (option) {
             if (doHighlight) {
                 selectedOptionId = option.id;
             }
             onSelect(selectedOptionId);
             if (option.handle) {
-                option.handle();
+                option.handle(event);
             }
         }
     };
@@ -45,6 +45,12 @@
         font-weight: 500;
     }
 
+    .smaller button {
+        font-size: 0.85em;
+        background-color: transparent;
+        border: 1px solid var(--background-color-3);
+    }
+
     button:hover {
         background-color: var(--background-color-3);
     }
@@ -65,17 +71,13 @@
     .has-text .material-icons-outlined {
         margin-right: var(--space-xxs);
     }
-
-    .smaller button {
-        font-size: 0.85em;
-    }
 </style>
 
 
 <div class:smaller={smaller}>
     {#each options as option (option.id)}
         {#if !option.hidden}
-            <button class="button" class:selected={ selectedOptionId === option.id } class:has-text={!!option.text} on:click={ optionClick(option) }>
+            <button class="button" class:selected={ selectedOptionId === option.id } class:has-text={!!option.text} on:click|stopPropagation="{ e => optionClick(option, e) }">
                 {#if option.icon}
                     <span class="material-icons-outlined">{ option.icon }</span>
                 {/if}

frontend/src/components/EditableText.svelte

@@ -0,0 +1,54 @@
+<script>
+    export let value = "";
+    export let fieldName = "Text";
+    export let onSave = (_) => {};
+
+    export let disabled = false;
+
+    let showEditButton = false;
+    let currentValue = value;
+
+    $: showEditButton = (value !== currentValue);
+</script>
+
+<style>
+    input {
+        display: block;
+        font-size: var(--h4);
+        line-height: inherit;
+        background-color: transparent;
+        border-radius: var(--radius-xs);
+        color: currentColor;
+        padding: var(--space-xxs);
+        outline: none;
+        border: none;
+        flex: 1;
+        min-width: 20ch;
+    }
+
+    input:focus-visible {
+        outline: 1px solid var(--background-color-3);
+    }
+
+    div {
+        display: flex;
+        align-items: center;
+        width: 100%;
+    }
+
+    .icon-button {
+        margin-left: var(--space-xxs);
+    }
+</style>
+
+<div>
+    <input bind:value={ currentValue } type="text" name="{ fieldName }" disabled={ disabled }>
+    {#if !disabled && showEditButton}
+        <button class="icon-button material-icons-outlined" on:click="{ () => onSave(currentValue) }" aria-label="Save">
+            edit
+        </button>
+        <button class="icon-button material-icons-outlined" on:click="{ () => currentValue = value }" aria-label="Reset">
+            refresh
+        </button>
+    {/if}
+</div>

frontend/src/components/FetchedUserView.svelte

@@ -0,0 +1,29 @@
+<script>
+    import { getGrantFor } from "../permissions";
+    import { methods, remoteCall, responseOk } from "../request";
+    import UserView from "./UserView.svelte";
+
+    export let userId;
+    export let capabilityType = 0;
+    export let capabilityResource = null;
+    export let showBadges = true;
+
+    let grant = 0;
+
+    let userInfoPromise = remoteCall(methods.getUser, userId).then(response => {
+        if (!responseOk(response)) {
+            throw new Error("Failed to get user info");
+        }
+        grant = capabilityType && capabilityResource ? getGrantFor(response.data, capabilityType, capabilityResource) : 0;
+        return response.data;
+    });
+</script>
+
+
+{#await userInfoPromise}
+    <span class="text-fg-3 text-bold text-small">Loading...</span>
+{:then user}
+    <UserView size="28" {user} {grant} {showBadges} />
+{:catch}
+    <span class="text-fg-3 text-bold text-small">Failed to load user info</span>
+{/await}

frontend/src/components/PresenceSidebar.svelte

@@ -23,6 +23,10 @@
         min-width: 248px;
         max-width: 248px;
     }
+
+    .sidebar-button {
+        color: var(--foreground-color-2);
+    }
 </style>
 
 <div class="sidebar-container" class:presence-sidebar-limited="{ !$smallViewport }" in:maybeFly="{{ duration: 175, easing: quadInOut, x: 10 }}" out:maybeFlyIf="{{ _condition: !smallViewport.value, duration: 175, easing: quadInOut, x: -10 }}">

frontend/src/components/Sidebar.svelte

@@ -91,7 +91,7 @@
                 {/if}
             </button>
         {/each}
-        <button class="button" on:click={() => overlayStore.push(OverlayType.AddCommunity)}>
+        <button class="button" on:click|stopPropagation={({ pageX, pageY }) => overlayStore.pushAbsolute(OverlayType.AddCommunity, pageX, pageY)}>
             <span class="material-icons-outlined">add</span>
         </button>
         <button class="button" on:click={() => overlayStore.push(OverlayType.Settings)}>
@@ -109,11 +109,9 @@
                         {#if $unreadStore.get(channel.id)}
                             <div class="unread-indicator">{ $unreadStore.get(channel.id) }</div>
                         {/if}
-                        {#if $userInfoStore && (channel.owner_id === $userInfoStore.id || $userInfoStore.is_superuser)}
+                        <button class="icon-button" on:click|stopPropagation="{ ({ pageX, pageY }) => overlayStore.pushAbsolute(OverlayType.EditChannel, pageX, pageY, { channel }) }" aria-label="Edit Channel">
-                            <button class="icon-button" on:click|stopPropagation="{ () => overlayStore.push(OverlayType.EditChannel, { channel }) }" aria-label="Edit Channel">
+                            <span class="material-icons-outlined">more_vert</span>
-                                <span class="material-icons-outlined">more_vert</span>
+                        </button>
-                            </button>
-                        {/if}
                     </div>
                 </button>
             {/each}

frontend/src/components/SidebarCommunity.svelte

@@ -1,4 +1,5 @@
 <script>
+    import { CapabilityType, getGrantFor } from "../permissions";
     import { avatarUrl } from "../storage";
     import { OverlayType, overlayStore, userInfoStore } from "../stores";
     import ChipBar from "./ChipBar.svelte";
@@ -17,18 +18,18 @@
         },
         {
             id: "EDIT_COMMUNITY",
-            icon: "edit",
+            icon: "more_vert",
-            hidden: !(!isUser && communityLike && $userInfoStore && communityLike.owner_id === $userInfoStore.id),
+            hidden: isUser || !communityLike,
-            handle() {
+            handle({ pageX, pageY }) {
-                overlayStore.push(OverlayType.EditCommunity, { community: communityLike });
+                overlayStore.pushAbsolute(OverlayType.EditCommunity, pageX, pageY, { community: communityLike });
             }
         },
         {
             id: "NEW_CHANNEL",
             icon: "add",
             hidden: (!$userInfoStore || !$userInfoStore.permissions.create_channel),
-            handle() {
+            handle({ pageX, pageY }) {
-                overlayStore.push(OverlayType.CreateChannel, { community: isUser ? { id: -1 } : communityLike });
+                overlayStore.pushAbsolute(OverlayType.CreateChannel, pageX, pageY, { community: isUser ? { id: -1 } : communityLike });
             }
         }
     ];

frontend/src/components/UserView.svelte

@@ -1,16 +1,20 @@
 <script>
+    import { CapabilityGrant } from "../permissions";
     import { avatarUrl } from "../storage";
 
 
     export let user = null;
     export let size = 32;
+    export let showBadges = true;
+    export let grant = CapabilityGrant.None;
 </script>
 
 <style>
     div {
         display: flex;
         align-items: center;
-        justify-content: center;
+        font-size: var(--h6);
+        font-weight: 600;
     }
 
     img {
@@ -30,9 +34,19 @@
 
 <div>
     {#if user && user.avatar}
-        <img src={avatarUrl(user.avatar, size)} alt=" ">
+        <img src={avatarUrl(user.avatar, size)} width={size} height={size} alt=" ">
     {:else}
-        <span class="material-icons-outlined circled-icon">alternate_email</span>
+        <span class="material-icons-outlined circled-icon" style="width: {size}px; height: {size}px;">alternate_email</span>
     {/if}
     <span class="username">{ user ? user.username : "" }</span>
+    {#if showBadges}
+        {#if user.is_superuser}
+            <span class="user-badge secondary">Superuser</span>
+        {/if}
+        {#if grant === CapabilityGrant.ResourceOwner}
+            <span class="user-badge secondary">Owner</span>
+        {:else if grant === CapabilityGrant.ResourceManager}
+            <span class="user-badge secondary">Manager</span>
+        {/if}
+    {/if}
 </div>

frontend/src/components/overlays/AddCommunity.svelte

@@ -7,6 +7,7 @@
     let createButtonEnabled = true;
     let response;
     export let close = () => {};
+    export let place = null;
 
     const create = async () => {
         createButtonEnabled = false;
@@ -17,7 +18,7 @@
     };
 </script>
 
-<Modal {close} enter={create}>
+<Modal {place} {close} enter={create} showCloseButton={false}>
     <span class="h4" slot="header">Create Community</span>
 
     <svelte:fragment slot="content">
@@ -30,7 +31,6 @@
     </svelte:fragment>
 
     <svelte:fragment slot="footer">
-        <button class="button modal-secondary-action" on:click="{ close }">Cancel</button>
         <button class="button button-accent modal-primary-action" on:click="{ create }" disabled="{ !createButtonEnabled }">Create</button>
     </svelte:fragment>
 </Modal>

frontend/src/components/overlays/CreateAccount.svelte

@@ -38,7 +38,7 @@
     }
 </style>
 
-<Modal opaque close={loginInstead} {outroEnd} enter={create}>
+<Modal opaque {outroEnd} enter={create} showCloseButton={false}>
     <span class="h4" slot="header">Create an Account</span>
 
     <svelte:fragment slot="content">

frontend/src/components/overlays/CreateChannel.svelte

@@ -8,6 +8,7 @@
     let response;
     export let close = () => {};
     export let community = null;
+    export let place = null;
 
     const create = async () => {
         createButtonEnabled = false;
@@ -18,12 +19,14 @@
     };
 </script>
 
-<Modal {close} enter={create}>
+<Modal {place} {close} enter={create} showCloseButton={false}>
     <svelte:fragment slot="header">
-        <span class="h4">Create Channel</span>
+        <div>
-        {#if community.id !== -1}
+            <span class="h4">Create Channel</span>
-            <span class="text-fg-3 text-small">in <span class="text-fg-2">{ community.name }</span></span>
+            {#if community.id !== -1}
-        {/if}
+                <span class="text-fg-3 text-small">in <span class="text-fg-2">{ community.name }</span></span>
+            {/if}
+        </div>
     </svelte:fragment>
 
     <svelte:fragment slot="content">
@@ -36,7 +39,6 @@
     </svelte:fragment>
 
     <svelte:fragment slot="footer">
-        <button class="button modal-secondary-action" on:click="{ close }">Cancel</button>
         <button class="button button-accent modal-primary-action" on:click="{ create }" disabled="{ !createButtonEnabled }">Create</button>
     </svelte:fragment>
 </Modal>

frontend/src/components/overlays/EditChannel.svelte

@@ -1,22 +1,26 @@
 <script>
-    import { overlayStore } from "../../stores";
+    import { overlayStore, userInfoStore } from "../../stores";
-    import { getMessageFromResponse, methods, remoteSignal, responseOk } from "../../request";
+    import { getGrantFor, CapabilityType } from "../../permissions";
+    import { getMessageFromResponse, methods, remoteCall, remoteSignal, responseOk } from "../../request";
     import Modal from "./Modal.svelte";
     import RpcErrorDisplay from "../rpc/RpcErrorDisplay.svelte";
+    import EditableText from "../EditableText.svelte";
+    import FetchedUserView from "../FetchedUserView.svelte";
 
     export let channel;
+    export let place = null;
 
-    let channelName = channel.name;
     let buttonsEnabled = true;
     let response;
+    $: grant = getGrantFor($userInfoStore, CapabilityType.ManageChannel, channel);
     export let close = () => {};
 
-    const save = async () => {
+    const save = async (newName) => {
         buttonsEnabled = false;
-        response = await remoteSignal(methods.updateChannelName, channel.id, channelName);
+        response = await remoteSignal(methods.updateChannelName, channel.id, newName);
         buttonsEnabled = true;
         if (responseOk(response)) {
-            close();
+            channel.name = newName;
         }
     };
     const deleteChannel = async () => {
@@ -30,26 +34,26 @@
 </script>
 
 <style>
-    .delete-button {
+    .created-by {
-        color: var(--red-2);
+        margin-bottom: var(--space-md);
     }
 </style>
 
-<Modal {close} enter={save}>
+<Modal {close} {place} enter={save} showCloseButton={false}>
-    <span class="h4" slot="header">Edit Channel</span>
+    <svelte:fragment slot="header">
+        <EditableText slot="header" value="{ channel.name }" disabled={ !buttonsEnabled || !grant } onSave={ save }></EditableText>
+    </svelte:fragment>
 
     <svelte:fragment slot="content">
         <RpcErrorDisplay response={response} />
         <RpcErrorDisplay validationIndex={1} response={response} />
-        <label class="input-label">
-            <span>Channel Name</span>
-            <input class="input full-width" minlength="1" maxlength="32" bind:value={ channelName } />
-        </label>
-    </svelte:fragment>
 
-    <svelte:fragment slot="footer">
+        <div class="created-by">
-        <button class="button modal-secondary-action" on:click="{ close }">Cancel</button>
+            <FetchedUserView userId={ channel.owner_id } capabilityType={ CapabilityType.ManageChannel } capabilityResource={ channel } />
-        <button class="button modal-secondary-action delete-button" on:click="{ deleteChannel }" disabled="{ !buttonsEnabled }">Delete</button>
+        </div>
-        <button class="button button-accent modal-primary-action" on:click="{ save }" disabled="{ !buttonsEnabled }">Save</button>
+
-</svelte:fragment>
+        {#if grant}
+            <button class="hyperlink-button button-danger" on:click="{ deleteChannel }" disabled="{ !buttonsEnabled }">Delete</button>
+        {/if}
+    </svelte:fragment>
 </Modal>

frontend/src/components/overlays/EditCommunity.svelte

@@ -1,22 +1,26 @@
 <script>
-    import { overlayStore } from "../../stores";
+    import { overlayStore, userInfoStore } from "../../stores";
-    import { getMessageFromResponse, methods, remoteSignal, responseOk } from "../../request";
+    import { getGrantFor, CapabilityType } from "../../permissions";
+    import { getMessageFromResponse, methods, remoteCall, remoteSignal, responseOk } from "../../request";
     import Modal from "./Modal.svelte";
     import RpcErrorDisplay from "../rpc/RpcErrorDisplay.svelte";
+    import EditableText from "../EditableText.svelte";
+    import FetchedUserView from "../FetchedUserView.svelte";
 
     export let community;
+    export let place = null;
 
-    let communityName = community.name;
     let buttonsEnabled = true;
     let response;
+    $: grant = getGrantFor($userInfoStore, CapabilityType.ManageCommunity, community);
     export let close = () => {};
 
-    const save = async () => {
+    const save = async (newName) => {
         buttonsEnabled = false;
-        response = await remoteSignal(methods.updateCommunityName, community.id, communityName);
+        response = await remoteSignal(methods.updateCommunityName, community.id, newName);
         buttonsEnabled = true;
         if (responseOk(response)) {
-            close();
+            community.name = newName;
         }
     };
     const deleteCommunity = async () => {
@@ -30,26 +34,26 @@
 </script>
 
 <style>
-    .delete-button {
+    .created-by {
-        color: var(--red-2);
+        margin-bottom: var(--space-md);
     }
 </style>
 
-<Modal {close} enter={save}>
+<Modal {close} {place} enter={save} showCloseButton={false}>
-    <span class="h4" slot="header">Edit Community</span>
+    <svelte:fragment slot="header">
+        <EditableText slot="header" value="{ community.name }" disabled={ !buttonsEnabled || !grant } onSave={ save }></EditableText>
+    </svelte:fragment>
 
     <svelte:fragment slot="content">
         <RpcErrorDisplay response={response} />
         <RpcErrorDisplay validationIndex={1} response={response} />
-        <label class="input-label">
-            <span>Community Name</span>
-            <input class="input full-width" minlength="1" maxlength="32" bind:value={ communityName } />
-        </label>
-    </svelte:fragment>
 
-    <svelte:fragment slot="footer">
+        <div class="created-by">
-        <button class="button modal-secondary-action" on:click="{ close }">Cancel</button>
+            <FetchedUserView userId={ community.owner_id } capabilityType={ CapabilityType.ManageCommunity } capabilityResource={ community } />
-        <button class="button modal-secondary-action delete-button" on:click="{ deleteCommunity }" disabled="{ !buttonsEnabled }">Delete</button>
+        </div>
-        <button class="button button-accent modal-primary-action" on:click="{ save }" disabled="{ !buttonsEnabled }">Save</button>
+
-</svelte:fragment>
+        {#if grant}
+            <button class="hyperlink-button button-danger" on:click="{ deleteCommunity }" disabled="{ !buttonsEnabled }">Delete</button>
+        {/if}
+    </svelte:fragment>
 </Modal>

frontend/src/components/overlays/EditMessage.svelte

@@ -47,7 +47,6 @@
     </svelte:fragment>
 
     <svelte:fragment slot="footer">
-        <button class="button modal-secondary-action" on:click="{ close }">Cancel</button>
         <button class="button modal-secondary-action delete-button" on:click="{ deleteMessage }" disabled="{ !buttonsEnabled }">Delete</button>
         <button class="button button-accent modal-primary-action" on:click="{ save }" disabled="{ !buttonsEnabled }">Save</button>
     </svelte:fragment>

frontend/src/components/overlays/Login.svelte

@@ -39,7 +39,7 @@
     }
 </style>
 
-<Modal opaque close={createAccountInstead} {outroEnd} enter={login}>
+<Modal opaque {outroEnd} enter={login} showCloseButton={false}>
     <span class="h4" slot="header">Welcome back!</span>
 
     <svelte:fragment slot="content">

frontend/src/components/overlays/Modal.svelte

@@ -1,14 +1,19 @@
 <script>
     import { onMount } from "svelte";
     import { maybeModalFade, maybeModalFadeIf, maybeModalScale } from "../../animations";
+    import { OverlayType, overlayStore } from "../../stores";
 
     export let close = () => {};
     export let enter = () => {};
     export let outroEnd = () => {};
     export let className = "";
     export let opaque = false;
+    export let place = null;
+    export let showCloseButton = true;
     let modal;
     let blur = false;
+    
+    $: backdropStyle = !!place ? `top: ${place.y || 0}px; left: ${place.x || 0}px;` : "";
 
     const onKeydown = ({ code }) => {
         if (code === "Enter") {
@@ -31,14 +36,25 @@
     });
 </script>
 
+<style>
+    .close-modal {
+        margin-left: auto;
+    }
+</style>
+
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-<div class="modal-backdrop" class:modal-backdrop-opaque={opaque} class:blur={blur} transition:maybeModalFadeIf="{{ _condition: !opaque }}" on:click="{ close }" on:keydown="{ onKeydown }" on:introend={backdropIntroEnd} on:outrostart={backdropOutroStart}>
+<div class="modal-backdrop" style="{backdropStyle}" class:positioned={!!place} class:modal-backdrop-opaque={opaque} class:blur={blur} transition:maybeModalFadeIf="{{ _condition: !opaque }}" on:click="{ close }" on:keydown="{ onKeydown }" on:introend={backdropIntroEnd} on:outrostart={backdropOutroStart}>
-    <div bind:this={modal} role="alertdialog" tabindex="-1" aria-modal="true" class={className + " modal"} transition:maybeModalScale on:click|stopPropagation on:outroend={outroEnd}>
+    <div bind:this={modal} class:positioned={!!place} role="alertdialog" tabindex="-1" aria-modal="true" class={className + " modal"} transition:maybeModalScale on:click|stopPropagation on:outroend={outroEnd}>
         {#if $$slots.header}
             <div class="modal-header">
                 <slot name="header" />
+                {#if showCloseButton}
+                    <button class="icon-button material-icons-outlined close-modal" on:click="{ close }" aria-label="Close">
+                        close
+                    </button>
+                {/if}
             </div>
         {/if}
 

frontend/src/components/overlays/OverlayProvider.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { overlayStore } from "../../stores";
+    import { overlayStore, smallViewport } from "../../stores";
 
     import EditChannel from "./EditChannel.svelte";
     import CreateChannel from "./CreateChannel.svelte";
@@ -29,5 +29,5 @@
 </script>
 
 {#each $overlayStore as overlay (overlay.id)}
-    <svelte:component this={ OverlayComponent[overlay.type] } {...overlay.props} />
+    <svelte:component this={ OverlayComponent[overlay.type] } {...overlay.props} place={ $smallViewport ? undefined : overlay.props.place } />
 {/each}

frontend/src/components/overlays/Prompt.svelte

@@ -30,7 +30,6 @@
     </label>
 
     <svelte:fragment slot="footer">
-        <button class="button modal-secondary-action" on:click="{ closePrompt }">Cancel</button>
         <button class="button button-accent modal-primary-action" on:click="{ save }" disabled="{ !buttonsEnabled }">Submit</button>
     </svelte:fragment>
 </Modal>

frontend/src/permissions.js

@@ -0,0 +1,49 @@
+export const CapabilityGrant = {
+    None: 0,
+    ResourceOwner: 1,
+    ResourceManager: 2,
+    GlobalSuperuser: 3
+};
+
+export const CapabilityType = {
+    None: 0,
+    ManageChannel: 1,
+    ManageCommunity: 2,
+    ManageMessage: 3
+};
+
+
+export function getGrantFor(user, capability, resource) {
+    let resourceOwnerId = -1;
+
+    switch (capability) {
+        case CapabilityType.ManageChannel: {
+            resourceOwnerId = resource.owner_id;
+            break;
+        }
+
+        case CapabilityType.ManageCommunity: {
+            resourceOwnerId = resource.owner_id;
+            break;
+        }
+
+        case CapabilityType.ManageMessage: {
+            resourceOwnerId = resource.author_id;
+            break;
+        }
+
+        default: {
+            return CapabilityGrant.None;
+        }
+    }
+
+    if (user && user.id === resourceOwnerId) {
+        return CapabilityGrant.ResourceOwner;
+    }
+
+    if (user && user.is_superuser) {
+        return CapabilityGrant.GlobalSuperuser;
+    }
+
+    return CapabilityGrant.None;
+}

frontend/src/request.js

@@ -10,6 +10,7 @@ export const methods = {
     getUserSelf: withCacheable(method(102, true)),
     promoteUserSelf: method(103, true),
     putUserAvatar: method(104, true),
+    getUser: withCacheable(method(105, true)),
     createChannel: method(200, true),
     updateChannelName: method(201, true),
     deleteChannel: method(202, true),

frontend/src/responsive.js

@@ -1,5 +1,5 @@
 import { getItem } from "./storage";
-import { showSidebar, smallViewport, theme, usesKeyboardNavigation } from "./stores";
+import { showSidebar, smallViewport, theme, usesKeyboardNavigation, overlayStore } from "./stores";
 
 function initViewportSizeHandler() {
     const root = document.querySelector(':root');
@@ -33,22 +33,30 @@ function updateTheme(themeName) {
     classes.add(`theme--${themeName}`);
 }
 
-function initKeyboardNavigationDetection() {
+export function initResponsiveHandlers() {
+    // Keyboard navigation detection
     document.addEventListener("keydown", ({ key }) => {
         if (key === "Tab") {
             usesKeyboardNavigation.set(true);
         }
     });
 
-    document.addEventListener("click", e => {
+    const keyboardClickHandler = (e) => {
         // screenX and screenY are 0 when a user presses enter for navigation
         usesKeyboardNavigation.set(!e.screenX && !e.screenY);
-    });
+    };
-}
+
+    const overlayClickHandler = () => {
+        overlayStore.closeAllAbsolute();
+    };
+
+    document.addEventListener("click", e => {
+        keyboardClickHandler(e);
+        overlayClickHandler();
+    });
+
 
-export function initResponsiveHandlers() {
     initViewportSizeHandler();
-    initKeyboardNavigationDetection();
 
     const mediaQuery = window.matchMedia('(min-width: 768px)');
 

frontend/src/stores.js

@@ -1,5 +1,6 @@
 import gateway, { GatewayEventType, GatewayPayloadType, GatewayPresenceStatus } from "./gateway";
 import logger from "./logging";
+import { CapabilityType, getGrantFor } from "./permissions";
 import { getMessageFromResponse, methods, remoteCall, remoteSignal, responseOk } from "./request";
 import { getItem, setItem } from "./storage";
 
@@ -236,7 +237,7 @@ class MessageStore extends Store {
         if (userInfoStore.value && message.content.includes("@" + userInfoStore.value.username)) {
             message._mentions = true;
         }
-        if (userInfoStore.value && (message.author_id === userInfoStore.value.id || userInfoStore.value.is_superuser)) {
+        if (getGrantFor(userInfoStore.value, CapabilityType.ManageMessage, message)) {
             message._editable = true;
         }
         if (previous && (message._createdAtDate.getTime() - previous._createdAtDate.getTime()) <= 100 * 1000 && message.author_id === previous.author_id && message._effectiveAuthor === previous._effectiveAuthor && message._viaBadge === previous._viaBadge) {
@@ -409,10 +410,31 @@ class OverlayStore extends Store {
         super([], "OverlayStore");
     }
 
+    closeAllAbsolute() {
+        const toRemove = [];
+        for (let i = 0; i < this.value.length; i++) {
+            const e = this.value[i];
+            if (e.props && e.props.place) {
+                toRemove.push(e.id);
+            }
+        }
+        toRemove.forEach(id => this.popId(id));
+    }
+
     isOverlayPresent() {
         return !!this.value.length;
     }
 
+    pushAbsolute(type, x=0, y=0, props={}) {
+        this.closeAllAbsolute();
+        return this.push(type, {
+            ...props,
+            place: {
+                x, y
+            }
+        });
+    }
+
     push(type, props={}) {
         const id = Math.floor(Math.random() * 9999999);
 

frontend/src/styles/global.css

@@ -178,6 +178,15 @@ body {
 	backdrop-filter: blur(1.5px);
 }
 
+.modal-backdrop.positioned {
+	display: block;
+	width: fit-content;
+	height: fit-content;
+	background-color: transparent;
+	backdrop-filter: unset;
+	contain: content;
+}
+
 .modal-backdrop-opaque {
 	background-color: var(--background-color-1);
 	backdrop-filter: unset;
@@ -193,6 +202,8 @@ body {
 }
 
 .modal-header {
+	display: flex;
+	align-items: center;
 	font-weight: 650;
 	padding: var(--space-md);
 }
@@ -210,6 +221,21 @@ body {
 	border-bottom-left-radius: var(--radius-lg);
 }
 
+.modal.positioned {
+	background-color: hsla(0, 0%, 8%, 85%);
+	backdrop-filter: blur(1.5px);
+	width: 325px;
+}
+
+.theme--light .modal.positioned {
+	background-color: var(--background-color-0);
+}
+
+.modal.positioned .modal-footer {
+	background-color: transparent;
+	padding-top: var(--space-xxs);
+}
+
 .modal-primary-action {
 	float: right;
 }
@@ -272,6 +298,21 @@ body {
 
 /* button */
 
+.hyperlink-button {
+	color: var(--foreground-color-1);
+	background: none;
+	border: none;
+	font: inherit;
+	user-select: none;
+	font-weight: 650;
+	cursor: pointer;
+	font-size: var(--h6);
+}
+
+.hyperlink-button:hover {
+	color: var(--foreground-color-0);
+}
+
 .button {
 	color: var(--foreground-color-1);
 	background: none;
@@ -283,7 +324,7 @@ body {
 	border-radius: 9999px;
 	font: inherit;
 	user-select: none;
-	font-weight: 550;
+	font-weight: 600;
 }
 
 .button:hover {
@@ -292,34 +333,25 @@ body {
 
 .button-accent {
 	color: var(--colored-element-text-color);
-	background-color: var(--purple-2);
-}
-
-.button-accent:hover {
 	background-color: var(--purple-1);
 }
 
-.button-accent:disabled {
+.button-accent:hover {
 	background-color: var(--purple-2);
 }
 
-.button-red {
+.button-accent:disabled {
-	color: var(--colored-element-text-color);
+	background-color: var(--purple-1);
-	background-color: var(--red-2);
-}
-
-.button-red:hover {
-	background-color: var(--red-1);
-}
-
-.button-red:disabled {
-	background-color: var(--red-2);
 }
 
 .button-danger {
 	color: var(--red-2);
 }
 
+.button-danger:hover {
+	color: var(--red-1);
+}
+
 /* icon buttons */
 
 .icon-button {
@@ -531,7 +563,11 @@ body {
 	border-radius: 9999px;
 	font-size: x-small;
 	margin-left: var(--space-sm);
-	cursor: pointer;
+}
+
+.user-badge.secondary {
+	background-color: var(--background-color-1);
+	border: 1px solid var(--background-color-2);
 }
 
 /* util */

src/rpc/apis/users.ts

@@ -2,7 +2,7 @@ import { errors } from "../../errors";
 import { query } from "../../database";
 import { compare, hash } from "bcrypt";
 import { getPublicUserObject, loginAttempt } from "../../auth";
-import { RPCContext, bufferSlice, method, methodButWarningDoesNotAuthenticate, string, usernameRegex, withRegexp } from "./../rpc";
+import { RPCContext, bufferSlice, method, methodButWarningDoesNotAuthenticate, string, uint, usernameRegex, withRegexp } from "./../rpc";
 import sharp from "sharp";
 import { randomBytes } from "crypto";
 import { unlink } from "fs/promises";
@@ -165,3 +165,19 @@ method(
         return filenames;
     }
 );
+
+method(
+    "getUser",
+    [uint("id", "ID of the user to get")],
+    async (_: User, id: number) => {
+        const getUserResult = await query("SELECT * FROM users WHERE id = $1", [id]);
+        if (!getUserResult) {
+            return errors.GOT_NO_DATABASE_DATA;
+        }
+        if (getUserResult.rowCount < 1) {
+            return errors.NOT_FOUND;
+        }
+
+        return getPublicUserObject(getUserResult.rows[0]);
+    }
+);