fix(User component): spinner positioning, level spacing

!nuf

Author: Miodec

frontend/src/ts/components/common/User.tsx

@@ -3,6 +3,7 @@ import { AnimationParams } from "animejs";
 import { createEffect, createSignal, JSXElement, on, Show } from "solid-js";
 
 import {
+  getMatchingFlags,
   SupportsFlags,
   UserFlagOptions,
 } from "../../controllers/user-flag-controller";
@@ -83,23 +84,25 @@ export function User(props: Props): JSXElement {
             show={props.showNotificationBubble ?? false}
             class="z-2 m-0.5"
           />
-          <AnimeConditional
-            exitBeforeEnter
-            if={props.showSpinner ?? false}
-            then={<Fa icon={"fa-circle-notch"} spin={true} />}
-            else={
-              <DiscordAvatar
-                size={64}
-                discordId={props.user.discordId}
-                discordAvatar={props.user.discordAvatar}
-                fallbackIcon={props.avatarFallback ?? "user"}
-                class={cn(
-                  props.avatarColor === "text" && "text-text",
-                  props.avatarColor === "sub" && "text-sub",
-                )}
-              />
-            }
-          />
+          <div class="grid place-items-center">
+            <AnimeConditional
+              exitBeforeEnter
+              if={props.showSpinner ?? false}
+              then={<Fa icon={"fa-circle-notch"} spin={true} />}
+              else={
+                <DiscordAvatar
+                  size={64}
+                  discordId={props.user.discordId}
+                  discordAvatar={props.user.discordAvatar}
+                  fallbackIcon={props.avatarFallback ?? "user"}
+                  class={cn(
+                    props.avatarColor === "text" && "text-text",
+                    props.avatarColor === "sub" && "text-sub",
+                  )}
+                />
+              }
+            />
+          </div>
         </div>
       </Show>
       <div
@@ -122,22 +125,31 @@ export function User(props: Props): JSXElement {
         />
       </div>
 
-      <div
-        class={cn(
-          "flex items-center justify-center gap-[0.5em]",
-          cn(
-            props.flagsColor === "text" && "text-text",
-            props.flagsColor === "sub" && "text-sub",
-          ),
-        )}
+      <Show
+        when={
+          getMatchingFlags({ ...props.user, isFriend: props.isFriend }).length >
+          0
+        }
       >
-        <UserFlags
-          {...props.user}
-          isFriend={props.isFriend}
-          iconsOnly={props.iconsOnly}
-        />
+        <div
+          class={cn(
+            "flex items-center justify-center gap-[0.5em]",
+            cn(
+              props.flagsColor === "text" && "text-text",
+              props.flagsColor === "sub" && "text-sub",
+            ),
+          )}
+        >
+          <UserFlags
+            {...props.user}
+            isFriend={props.isFriend}
+            iconsOnly={props.iconsOnly}
+          />
+        </div>
+      </Show>
+      <Show when={props.user.badgeId !== undefined}>
         <UserBadge id={props.user.badgeId} />
-      </div>
+      </Show>
       <Show when={props.level !== undefined}>
         <Anime
           ref={(el) => (levelEl = el)}

frontend/storybook/stories/User.stories.tsx

@@ -1,4 +1,5 @@
 import preview from "#.storybook/preview";
+import { createSignal, onCleanup } from "solid-js";
 
 import { User } from "../../src/ts/components/common/User";
 
@@ -16,14 +17,69 @@ const meta = preview.meta({
   },
 });
 
+// oxlint-disable-next-line no-unused-vars
+function SpinnerCycleUser(props: {
+  data: Record<string, unknown>;
+}): ReturnType<typeof User> {
+  const [showSpinner, setShowSpinner] = createSignal(false);
+  const interval = setInterval(() => {
+    setShowSpinner((prev) => !prev);
+  }, 2000);
+  onCleanup(() => clearInterval(interval));
+  //@ts-expect-error - just for testing, ignore type issues
+  return <User user={{ ...props.data }} showSpinner={showSpinner()} />;
+}
+
 export const Default = meta.story({
-  args: {
-    user: {
+  // args: {
+  //   user: {
+  //     uid: "user123",
+  //     name: "monkeytyper",
+  //     discordId: undefined,
+  //     discordAvatar: undefined,
+  //   },
+  // },
+
+  render: () => {
+    const data = {
       uid: "user123",
       name: "monkeytyper",
-      discordId: undefined,
-      discordAvatar: undefined,
-    },
+      discordId: "102819690287489024",
+      discordAvatar: "a_af6c0b8ad26fdd6bcb86ed7bb40ee6e5",
+      isPremium: true,
+      banned: true,
+    };
+    return (
+      <div class="grid grid-cols-[auto_1fr] place-items-start gap-4 [--themable-button-text:var(--sub-color)]">
+        <div class="text-sub">With avatar:</div>
+        <User user={{ ...data }} />
+        <div class="text-sub">No avatar:</div>
+        <User user={{ ...data }} showAvatar={false} />
+        <div class="text-sub">Avatar fallback:</div>
+        <User user={{ ...data, discordAvatar: "" }} />
+        <div class="text-sub">Avatar fallback with color:</div>
+        <User
+          user={{ ...data, discordAvatar: "" }}
+          avatarFallback="user-circle"
+          avatarColor="sub"
+        />
+        <div class="text-sub">Flag color:</div>
+        <User user={{ ...data }} flagsColor="sub" />
+        <div class="text-sub">Hide name on small screen:</div>
+        <User user={{ ...data }} hideNameOnSmallScreens={true} />
+        <div class="text-sub">Level:</div>
+        <User user={{ ...data }} level={10} />
+        <div class="text-sub">Level no flags:</div>
+        <User
+          user={{ ...data, isPremium: undefined, banned: undefined }}
+          level={10}
+        />
+        <div class="text-sub">Show spinner (cycling):</div>
+        <SpinnerCycleUser data={data} />
+        <div class="text-sub">Show notification bubble:</div>
+        <User user={{ ...data }} showNotificationBubble={true} />
+      </div>
+    );
   },
 });