Mod pane: preview badges

Nerimity · Jan 24, 2025 · f5f8f18 · f5f8f18
1 parent 2cfb298
commit f5f8f18
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 13 deletions.
diff --git a/src/components/moderation-pane/UserPage.tsx b/src/components/moderation-pane/UserPage.tsx
@@ -1,4 +1,10 @@
-import { USER_BADGES, addBit, hasBit, removeBit } from "@/chat-api/Bitwise";
+import {
+  Bitwise,
+  USER_BADGES,
+  addBit,
+  hasBit,
+  removeBit,
+} from "@/chat-api/Bitwise";
 import {
   ModerationUser,
   getUser,
@@ -30,6 +36,7 @@ import { RawServer, RawUser } from "@/chat-api/RawData";
 import { AuditLogPane, Server, User } from "./ModerationPane";
 import EditUserSuspensionModal from "./EditUserSuspensionModal";
 import WarnUserModal from "./WarnUserModal";
+import { UserDetails } from "@/chat-api/services/UserService";
 
 const UserPageContainer = styled(FlexColumn)`
   height: 100%;
@@ -258,16 +265,12 @@ export default function UserPage() {
           <FlexColumn gap={1}>
             <For each={Object.values(USER_BADGES)}>
               {(badge) => (
-                <SettingsBlock
-                  class={BadgeItemStyles}
-                  label={badge.name}
-                  description={badge.description}
-                >
-                  <Checkbox
-                    checked={hasBit(inputValues().badges, badge.bit)}
-                    onChange={(checked) => onBadgeUpdate(checked, badge.bit)}
-                  />
-                </SettingsBlock>
+                <BadgeItem
+                  badge={badge}
+                  user={user()!}
+                  badges={inputValues().badges}
+                  onBadgeUpdate={onBadgeUpdate}
+                />
               )}
             </For>
           </FlexColumn>
@@ -330,6 +333,36 @@ export default function UserPage() {
   );
 }
 
+const BadgeItem = (props: {
+  badge: Bitwise;
+  user: RawUser;
+  badges: number;
+  onBadgeUpdate: (checked: boolean, badgeBit: number) => void;
+}) => {
+  const [hovered, setHovered] = createSignal(false);
+  return (
+    <SettingsBlock
+      onMouseOver={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      class={BadgeItemStyles}
+      label={props.badge.name}
+      description={props.badge.description}
+      icon={
+        <Avatar
+          user={{ ...props.user, badges: props.badge.bit }}
+          size={42}
+          animate={hovered()}
+        />
+      }
+    >
+      <Checkbox
+        checked={hasBit(props.badges, props.badge.bit)}
+        onChange={(checked) => props.onBadgeUpdate(checked, props.badge.bit)}
+      />
+    </SettingsBlock>
+  );
+};
+
 const UsersWithSameIPAddressContainer = styled(FlexColumn)`
   background: rgba(255, 255, 255, 0.05);
   margin-bottom: 10px;

diff --git a/src/components/ui/settings-block/SettingsBlock.tsx b/src/components/ui/settings-block/SettingsBlock.tsx
@@ -8,7 +8,7 @@ import { CustomLink } from "../CustomLink";
 
 interface BlockProps {
   label: string;
-  icon?: string;
+  icon?: string | JSXElement;
   iconSrc?: string;
   description?: string | JSXElement;
   children?: JSX.Element | undefined;
@@ -21,12 +21,16 @@ interface BlockProps {
   href?: string;
   hrefBlank?: boolean;
   historyState?: any;
+  onMouseOver?: () => void;
+  onMouseLeave?: () => void;
 }
 
 export default function SettingsBlock(props: BlockProps) {
   const child = children(() => props.children);
   return (
     <Dynamic
+      onmouseleave={props.onMouseLeave}
+      onmouseover={props.onMouseOver}
       component={props.href ? CustomLink : "div"}
       {...(props.hrefBlank
         ? { target: "_blank", rel: "noopener noreferrer" }
@@ -72,7 +76,13 @@ export default function SettingsBlock(props: BlockProps) {
       <div class={styles.outerContainer}>
         <Show
           when={props.iconSrc}
-          fallback={<Icon name={props.icon || "texture"} />}
+          fallback={
+            !props.icon || typeof props.icon === "string" ? (
+              <Icon name={props.icon || "texture"} />
+            ) : (
+              props.icon
+            )
+          }
         >
           <img class={styles.icon} src={props.iconSrc} alt="" />
         </Show>