Make mentions and pings have the user's color

package.json

@@ -18,6 +18,7 @@
     "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-toggle": "^1.1.0",
     "@williamhorning/cloudlink": "==4.1.1",
+    "color2k": "^2.0.3",
     "immer": "^10.1.1",
     "lucide-react": "^0.414.0",
     "marked-react": "^2.0.0",

src/components/Mention.tsx

@@ -3,6 +3,7 @@ import { twMerge } from "tailwind-merge";
 import { ProfilePicture } from "./ProfilePicture";
 import { User } from "./User";
 import { Username } from "./Username";
+import { UserColor } from "./UserColor";
 
 export type MentionProps = {
   username: string;
@@ -17,8 +18,8 @@ export const Mention = (props: MentionProps) => {
         className={twMerge(
           "inline-flex items-center gap-1 align-top font-bold",
           props.username === credentials?.username ?
-            "text-yellow-600"
-          : "text-lime-600",
+            "[--fallback:theme(colors.yellow.600)]"
+          : "[--fallback:theme(text-lime-600)]",
         )}
       >
         <span className="inline-block align-text-top">
@@ -32,7 +33,9 @@ export const Mention = (props: MentionProps) => {
         </span>
         <span className="inline-block">
           <span className="sr-only">@</span>
-          <Username username={props.username} />
+          <UserColor username={props.username}>
+            <Username username={props.username} />
+          </UserColor>
         </span>
       </button>
     </User>

src/components/Post.tsx

@@ -25,6 +25,7 @@ import { EmojiPicker } from "./EmojiPicker";
 import { DiscordEmoji } from "../lib/discordEmoji";
 import { IconButton } from "./IconButton";
 import { REPORT_REASONS } from "../lib/reportReasons";
+import { UserColor } from "./UserColor";
 
 export type PostProps = {
   id: string;
@@ -213,15 +214,17 @@ const PostBase = memo((props: PostBaseProps) => {
                   <Mention username={props.post.u} />
                 : <div className="space-x-2">
                     <User username={props.post.u}>
-                      <button
-                        className={twMerge(
-                          "text-nowrap text-left font-bold",
-                          props.reply ? "" : "text-sm",
-                        )}
-                      >
-                        {props.post.u}
-                        {props.post.u === "noodles" ? " 🧀" : undefined}
-                      </button>
+                      <UserColor username={props.post.u}>
+                        <button
+                          className={twMerge(
+                            "text-nowrap text-left font-bold",
+                            props.reply ? "" : "text-sm",
+                          )}
+                        >
+                          {props.post.u}
+                          {props.post.u === "noodles" ? " 🧀" : undefined}
+                        </button>
+                      </UserColor>
                     </User>
                     <span className="text-sm opacity-70">
                       <RelativeTime time={props.post.t.e} />

src/components/UserColor.tsx

@@ -0,0 +1,39 @@
+import { CSSProperties, ReactNode } from "react";
+import { useAPI } from "../lib/api";
+import { useShallow } from "zustand/react/shallow";
+import { hsla, parseToHsla } from "color2k";
+
+export type UserColorProps = {
+  children: ReactNode;
+  username: string;
+};
+export const UserColor = (props: UserColorProps) => {
+  const [users, loadUser] = useAPI(
+    useShallow((state) => [state.users, state.loadUser]),
+  );
+  loadUser(props.username);
+  const user = users[props.username];
+
+  if (!user || user.error) {
+    return <span>{props.children}</span>;
+  }
+
+  try {
+    const [h, s, _l, a] = parseToHsla(`#${user.avatar_color}`);
+    return (
+      <span
+        className="text-[var(--dark,--fallback)] dark:text-[var(--light,--fallback)]"
+        style={
+          {
+            "--light": hsla(h, s, 0.8, a),
+            "--dark": hsla(h, s, 0.4, a),
+          } as CSSProperties
+        }
+      >
+        {props.children}
+      </span>
+    );
+  } catch {
+    return <span>{props.children}</span>;
+  }
+};