implement guild bans + ban page

Author: jay3332

src/Entrypoint.tsx

@@ -65,6 +65,7 @@ const GuildSettingsRoleMembers = lazy(() => import('./pages/guilds/settings/Role
 const GuildSettingsEmojis = lazy(() => import('./pages/guilds/settings/EmojiSettings'))
 const GuildSettingsMembers = lazy(() => import('./pages/guilds/settings/MemberSettings'))
 const GuildSettingsInvites = lazy(() => import('./pages/guilds/settings/InviteSettings'))
+const GuildSettingsBans = lazy(() => import('./pages/guilds/settings/BanSettings'))
 
 // Guild Channel Settings
 const GuildChannelSettingsOverview = lazy(() => import('./pages/channels/settings/Overview'))
@@ -192,6 +193,7 @@ const Entrypoint: Component = () => {
                   <Route path="/emojis" component={GuildSettingsEmojis} />
                   <Route path="/members" component={GuildSettingsMembers} />
                   <Route path="/invites" component={GuildSettingsInvites} />
+                  <Route path="/bans" component={GuildSettingsBans} />
                 </Route>
                 <Route path="/guilds/:guildId/settings" component={GuildSettingsRoot} />
                 <Route path="/guilds/:guildId/:channelId/settings" component={GuildChannelSettings}>

src/components/guilds/GuildMemberList.tsx

@@ -3,8 +3,7 @@ import {useNavigate, useParams} from "@solidjs/router";
 import {Accessor, createEffect, createMemo, createSignal, For, Index, onMount, Show} from "solid-js";
 import StatusIndicator from "../users/StatusIndicator";
 import SidebarSection from "../ui/SidebarSection";
-import {ReactiveSet} from "@solid-primitives/set";
-import {displayName, extendedColor, maxIterator, setDifference} from "../../utils";
+import {displayName, extendedColor, maxIterator} from "../../utils";
 import useContextMenu from "../../hooks/useContextMenu";
 import ContextMenu, {ContextMenuButton, DangerContextMenuButton} from "../ui/ContextMenu";
 import UserPlus from "../icons/svg/UserPlus";
@@ -23,6 +22,7 @@ import Crown from "../icons/svg/Crown";
 import Robot from "../icons/svg/Robot";
 import UserMinus from "../icons/svg/UserMinus";
 import {t} from "../../i18n";
+import Gavel from "../icons/svg/Gavel";
 
 export function GuildMemberGroup(props: { members: Iterable<User | bigint>, offline?: boolean }) {
   const api = getApi()!
@@ -41,6 +41,11 @@ export function GuildMemberGroup(props: { members: Iterable<User | bigint>, offl
     if (!response.ok) throw new Error(response.errorJsonOrThrow().message)
   }
 
+  const banMember = async (id: bigint) => {
+    const response = await api.request('PUT', `/guilds/${guildId()}/bans/${id}`)
+    if (!response.ok) throw new Error(response.errorJsonOrThrow().message)
+  }
+
   return (
     <For each={[...props.members]}>
       {(userOrId) => {
@@ -101,6 +106,20 @@ export function GuildMemberGroup(props: { members: Iterable<User | bigint>, offl
                     )}
                   />
                 </Show>
+                <Show when={!isSelf() && canManage() && permissions().has('BAN_MEMBERS')}>
+                  <DangerContextMenuButton
+                    icon={Gavel}
+                    label="Ban Member"
+                    onClick={() => toast.promise(
+                      banMember(user_id),
+                      {
+                        loading: 'Banning user...',
+                        success: 'User banned.',
+                        error: (err) => err.message,
+                      }
+                    )}
+                  />
+                </Show>
               </ContextMenu>
             )}
           >
@@ -180,56 +199,37 @@ export default function GuildMemberList() {
   const params = useParams()
   const guildId = () => BigInt(params.guildId!)
   const guildMemo = createMemo(() => api.cache!.guilds.get(guildId()))
-  if (!guildMemo()) return
 
   const isLoaded = createMemo(() => api.cache!.isGuildLoaded(guildId()))
 
   onMount(() => {
     api.ws?.ensureGuildLoaded(guildId())
   })
 
-  const online = new ReactiveSet<bigint>()
-  const offline = new ReactiveSet<bigint>()
-
-  const membersMemo = createMemo(() => api.cache!.memberReactor.get(guildMemo()!.id))
-  createEffect<Set<bigint> | undefined>((tracked) => {
-    const members = membersMemo()
-    if (members == null) return
-
-    for (const member of members) {
-      if (tracked?.has(member)) continue
-      tracked?.add(member)
-
-      createEffect((prev) => {
-        const status = api.cache!.presences.get(member)?.status
-        if (prev != null && (prev === 'offline') === (status === 'offline'))
-          return status
+  const membersMemo = createMemo(() => {
+    const guild = guildMemo()
+    return guild ? (api.cache!.memberReactor.get(guild.id) ?? []) : []
+  })
 
-        if (status === 'offline' || !status) {
-          online.delete(member);
-          offline.add(member)
-        } else {
-          offline.delete(member);
-          online.add(member)
-        }
-        return status
-      })
+  const onlineOffline = createMemo(() => {
+    const online: bigint[] = []
+    const offline: bigint[] = []
+    for (const member of membersMemo()) {
+      const status = api.cache!.presences.get(member)?.status
+      if (status && status !== 'offline') online.push(member)
+      else offline.push(member)
     }
-    const updated = new Set(members)
-    if (tracked) for (const removed of setDifference(tracked, updated)) {
-      online.delete(removed)
-      offline.delete(removed)
-    }
-    return updated
-  }, new Set<bigint>())
+    return { online, offline }
+  })
+  const online = () => onlineOffline().online
+  const offline = () => onlineOffline().offline
 
-  // TODO: probably inefficient to have this reevaluate every time member presence changes
   const roleGroups = createMemo(() => {
     const roles = api.cache!.roles
     const groups = new Map<bigint, { name: string, position: number, members: bigint[] }>()
     const noRoles = [] as bigint[]
 
-    for (const member of online) {
+    for (const member of online()) {
       const memberRoles = api.cache!.members.get(memberKey(guildId(), member))?.roles?.map(BigInt) ?? []
       const resolved = memberRoles
         .map(r => roles.get(r))
@@ -314,17 +314,17 @@ export default function GuildMemberList() {
                 </Show>
               )}
             </For>
-            <Show when={noRoles().length} keyed={false}>
+            <Show when={noRoles().length}>
               <SidebarSection badge={() => noRoles().length}>
                 {t('status.online')}
               </SidebarSection>
               <GuildMemberGroup members={noRoles()} />
             </Show>
-            <Show when={offline.size} keyed={false}>
-              <SidebarSection badge={() => offline.size}>
+            <Show when={offline().length}>
+              <SidebarSection badge={() => offline().length}>
                 {t('status.offline')}
               </SidebarSection>
-              <GuildMemberGroup members={offline} offline />
+              <GuildMemberGroup members={offline()} offline />
             </Show>
           </>
         }>

src/components/guilds/GuildSideSelect.tsx

@@ -105,8 +105,8 @@ export default function GuildSideSelect() {
           }}
         </For>
         <Separator />
-        <For each={Array.from(cache.guildList.map(g => api.cache!.guilds.get(g)!))}>
-          {(guild: Guild) => guild && (
+        <For each={cache.guildList.map(g => api.cache!.guilds.get(g)).filter(g => !!g)}>
+          {(guild: Guild) => (
             <A href={`/guilds/${guild.id}`} class="flex" onContextMenu={contextMenu.getHandler(
               <GuildContextMenu guild={guild} />
             )}>

src/components/guilds/GuildSidebar.tsx

@@ -1,5 +1,5 @@
 import {A, useNavigate, useParams} from "@solidjs/router";
-import {createMemo, createSignal, For, Match, Show, Switch, onMount, onCleanup, Index} from "solid-js";
+import {createEffect, createMemo, createSignal, For, Match, Show, Switch, onMount, onCleanup, Index} from "solid-js";
 import {getApi} from "../../api/Api";
 import {GuildChannel} from "../../types/channel";
 import {ModalId, useModal} from "../ui/Modal";
@@ -196,16 +196,14 @@ export default function GuildSidebar() {
   const {showModal} = useModal()
 
   const api = getApi()!
-  const guild = createMemo(() => api.cache!.guilds.get(guildId())!)
-  if (!guild()) return
-
-  // Trigger on-demand loading if guild channels aren't available yet
-  onMount(() => {
-    api.ws?.ensureGuildLoaded(guildId())
+  const guild = createMemo(() => api.cache!.guilds.get(guildId()))
+  createEffect(() => {
+    if (!guild()) navigate('/')
   })
+  onMount(() => api.ws?.ensureGuildLoaded(guildId()))
 
   const [dropdownExpanded, setDropdownExpanded] = createSignal(false)
-  const isOwner = createMemo(() => guild().owner_id === api.cache?.clientUser?.id)
+  const isOwner = createMemo(() => guild()?.owner_id === api.cache?.clientUser?.id)
 
   let dropdownRef: HTMLUListElement | undefined
   let toggleRef: HTMLDivElement | undefined
@@ -231,7 +229,7 @@ export default function GuildSidebar() {
         icon={UserPlus}
         label="Invite People"
         buttonClass="hover:bg-accent"
-        onClick={() => showModal(ModalId.CreateInvite, guild())}
+        onClick={() => showModal(ModalId.CreateInvite, guild()!)}
       />
     </Show>
   )
@@ -332,6 +330,7 @@ export default function GuildSidebar() {
   }
 
   return (
+    <Show when={guild()}>
     <div
       class="flex flex-col items-center flex-grow"
       onContextMenu={contextMenu.getHandler(
@@ -356,14 +355,14 @@ export default function GuildSidebar() {
         ref={toggleRef}
         class="box-border flex flex-col justify-end border-b-[1px] border-fg/5
           group hover:bg-2 transition-all duration-200 cursor-pointer relative w-full"
-        classList={{ 'min-h-[150px]': !!guild().banner }}
+        classList={{ 'min-h-[150px]': !!guild()!.banner }}
         onClick={() => setDropdownExpanded(prev => !prev)}
       >
-        <Show when={guild().banner}>
+        <Show when={guild()!.banner}>
           <figure
             class="absolute inset-0 z-0"
             style={{
-              "background-image": `url(${guild().banner})`,
+              "background-image": `url(${guild()!.banner})`,
               "background-size": "cover",
               "background-position": "center",
               "mask-image": "linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0))",
@@ -372,10 +371,10 @@ export default function GuildSidebar() {
         </Show>
         <div classList={{
           "flex justify-between items-center px-3 mt-3": true,
-          "pb-3": !guild().description,
+          "pb-3": !guild()!.description,
         }}>
           <span class="inline-block font-title font-bold text-base truncate min-w-0 pr-2">
-            {guild().name}
+            {guild()!.name}
           </span>
           <label tabIndex={0} classList={{
             "cursor-pointer transition-transform transform": true,
@@ -389,9 +388,9 @@ export default function GuildSidebar() {
             />
           </label>
         </div>
-        {guild().description && (
+        {guild()!.description && (
           <div class="card-body px-3 pt-1 pb-3">
-            <p class="text-xs text-fg/50 truncate min-w-0">{guild().description}</p>
+            <p class="text-xs text-fg/50 truncate min-w-0">{guild()!.description}</p>
           </div>
         )}
         <Show when={dropdownExpanded()}>
@@ -405,7 +404,7 @@ export default function GuildSidebar() {
                 icon={UserPlus}
                 label="Invite People"
                 svgClass="fill-fg"
-                onClick={() => showModal(ModalId.CreateInvite, guild())}
+                onClick={() => showModal(ModalId.CreateInvite, guild()!)}
               />
             </Show>
             <Show when={guildPermissions()?.has('MANAGE_CHANNELS')}>
@@ -438,7 +437,7 @@ export default function GuildSidebar() {
                 groupHoverColor="danger"
                 svgClass="fill-danger group-hover/gdb:fill-fg"
                 labelClass="text-danger group-hover/gdb:text-fg"
-                onClick={() => showModal(ModalId.LeaveGuild, guild())}
+                onClick={() => showModal(ModalId.LeaveGuild, guild()!)}
               />
             </Show>
           </ul>
@@ -453,5 +452,6 @@ export default function GuildSidebar() {
         </Show>
       </div>
     </div>
+    </Show>
   )
 }

src/components/icons/svg/Gavel.tsx

@@ -0,0 +1,10 @@
+import {JSX} from "solid-js";
+
+export default function Gavel(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props}>
+      {/* Font Awesome Pro 6.0.0-alpha2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) */}
+      <path d="M512 216.329C512 210.204 509.656 204.08 504.969 199.395L482.346 176.77C477.658 172.084 471.502 169.741 465.347 169.741S453.035 172.084 448.348 176.77L442.723 182.395L329.605 69.277L335.23 63.652C339.917 58.965 342.26 52.81 342.26 46.654S339.917 34.344 335.23 29.656L312.605 7.031C307.919 2.344 301.794 0 295.67 0S283.42 2.344 278.732 7.031L154.24 131.523C149.553 136.211 147.209 142.336 147.209 148.461S149.553 160.711 154.24 165.398L176.863 188.02C181.551 192.707 187.707 195.051 193.863 195.051S206.175 192.707 210.861 188.02L216.486 182.395L329.605 295.516L323.98 301.137C319.293 305.824 316.949 311.98 316.949 318.136S319.293 330.447 323.98 335.133L346.604 357.758C351.291 362.445 357.416 364.789 363.54 364.789S375.789 362.445 380.477 357.758L504.969 233.266C509.656 228.578 512 222.453 512 216.329ZM227.793 238.957L169.363 297.387C163.113 291.139 154.927 288.015 146.74 288.015S130.367 291.139 124.117 297.387L9.375 412.133C3.125 418.381 0 426.567 0 434.754S3.125 451.127 9.375 457.375L54.621 502.625C60.871 508.875 69.058 512 77.245 512S93.619 508.875 99.869 502.625L214.611 387.883C220.862 381.632 223.987 373.446 223.987 365.259C223.987 357.074 220.863 348.888 214.613 342.637L273.043 284.207L227.793 238.957Z "></path>
+    </svg>
+  )
+}