feat: Add Donation Flair Settings Page

frontend/css/flairs.less

@@ -0,0 +1,5 @@
+.donation-flairs-settings {
+  .flair-select {
+    width: 300px;
+  }
+}

frontend/css/main.less

@@ -41,6 +41,7 @@
 @import "donors-page.less";
 @import "donations.less";
 @import "scroll-container.less";
+@import "flairs.less";
 
 @icon-font-path: "/static/fonts/";
 

frontend/js/src/settings/Settings.tsx

@@ -6,10 +6,23 @@ import { Helmet } from "react-helmet";
 import { ToastMsg } from "../notifications/Notifications";
 import GlobalAppContext from "../utils/GlobalAppContext";
 
+const flairOptions = [
+  { label: "Default", value: "default", className: "default" },
+  { label: "Fire", value: "fire", className: "fire" },
+  { label: "Water", value: "water", className: "water" },
+  { label: "Air", value: "air", className: "air" },
+  { label: "Disabled", value: "disabled", className: "disabled" },
+];
+
 export default function Settings() {
-  const { currentUser } = React.useContext(GlobalAppContext);
+  const globalContext = React.useContext(GlobalAppContext);
+  const { currentUser, APIService, flair: currentFlair } = globalContext;
+
   const { auth_token: authToken, name } = currentUser;
 
+  const [selectedFlair, setSelectedFlair] = React.useState<Flair>(
+    currentFlair || "default"
+  );
   const [showToken, setShowToken] = React.useState(false);
   const [copied, setCopied] = React.useState(false);
 
@@ -50,13 +63,82 @@ export default function Settings() {
     setShowToken(!showToken);
   };
 
+  const submitFlairPreferences = async () => {
+    if (!currentUser?.auth_token) {
+      toast.error("You must be logged in to update your preferences");
+      return;
+    }
+    try {
+      const response = await APIService.submitFlairPreferences(
+        currentUser?.auth_token,
+        selectedFlair
+      );
+      toast.success("Flair preferences updated successfully");
+      globalContext.flair = selectedFlair;
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error("Failed to update flair preferences:", error);
+      toast.error("Failed to update flair preferences. Please try again.");
+    }
+  };
+
   return (
     <>
       <Helmet>
-        <title>User {currentUser?.name}</title>
+        <title>User {name}</title>
       </Helmet>
       <div id="user-profile">
-        <h2 className="page-title">{name}</h2>
+        <h2 className="page-title">User Settings</h2>
+        <div>
+          <h4>Username: {name}</h4>
+          <a
+            href={`https://musicbrainz.org/user/${name}`}
+            aria-label="Edit Profile on MusicBrainz"
+            title="Edit Profile on MusicBrainz"
+            className="btn btn-outline"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <img
+              src="/static/img/meb-icons/MusicBrainz.svg"
+              width="18"
+              height="18"
+              alt="MusicBrainz"
+              style={{ verticalAlign: "bottom" }}
+            />{" "}
+            Edit Profile on MusicBrainz
+          </a>
+        </div>
+
+        <div className="mb-15 donation-flairs-settings">
+          <div className="form-group">
+            <h3>Flair Settings</h3>
+            <p>
+              Choose which flair you want your username to show to let other
+              users know you donated. ListenBrainz.
+            </p>
+            <select
+              id="flairs"
+              name="flairs"
+              className="form-control flair-select"
+              value={selectedFlair}
+              onChange={(e) => setSelectedFlair(e.target.value as Flair)}
+            >
+              {flairOptions.map((option) => (
+                <option key={option.value} value={option.value}>
+                  {option.label}
+                </option>
+              ))}
+            </select>
+            <button
+              onClick={submitFlairPreferences}
+              className="btn btn-lg btn-info"
+              type="button"
+            >
+              Submit
+            </button>
+          </div>
+        </div>
 
         <h3>User token</h3>
         <p>

frontend/js/src/settings/layout.tsx

@@ -25,6 +25,7 @@ const sections: Section[] = [
   {
     title: "Account",
     links: [
+      { to: "./", label: "User settings" },
       { to: "select_timezone/", label: "Timezone" },
       { to: "troi/", label: "Playlist preferences" },
       { to: "export/", label: "Export data" },

frontend/js/src/utils/APIService.ts

@@ -1455,6 +1455,23 @@ export default class APIService {
     return response.status;
   };
 
+  submitFlairPreferences = async (
+    userToken: string,
+    flair: Flair
+  ): Promise<any> => {
+    const url = `${this.APIBaseURI}/settings/flair`;
+    const response = await fetch(url, {
+      method: "POST",
+      headers: {
+        Authorization: `Token ${userToken}`,
+        "Content-Type": "application/json;charset=UTF-8",
+      },
+      body: JSON.stringify({ flair }),
+    });
+    await this.checkStatus(response);
+    return response.status;
+  };
+
   exportPlaylistToSpotify = async (
     userToken: string,
     playlist_mbid: string
@@ -1765,4 +1782,11 @@ export default class APIService {
     await this.checkStatus(response);
     return response.json();
   };
+
+  getUserFlairs = async (): Promise<Record<string, Flair>> => {
+    const url = `${this.APIBaseURI}/donors/all-flairs`;
+    const response = await fetch(url);
+    await this.checkStatus(response);
+    return response.json();
+  };
 }

frontend/js/src/utils/FlairLoader.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { QueryObserverResult, useQuery } from "@tanstack/react-query";
+import GlobalAppContext from "./GlobalAppContext";
+
+export default function useUserFlairs() {
+  const { APIService } = React.useContext(GlobalAppContext);
+  const data = useQuery({
+    queryKey: ["flair"],
+    queryFn: () => APIService.getUserFlairs().catch(() => ({})),
+    staleTime: Infinity,
+  });
+
+  return data as QueryObserverResult<Record<string, Flair>>;
+}

frontend/js/src/utils/GlobalAppContext.tsx

@@ -17,6 +17,7 @@ export type GlobalAppContextT = {
   userPreferences?: UserPreferences;
   musicbrainzGenres?: string[];
   recordingFeedbackManager: RecordingFeedbackManager;
+  flair?: Flair;
 };
 const apiService = new APIService(`${window.location.origin}/1`);
 
@@ -37,6 +38,7 @@ export const defaultGlobalContext: GlobalAppContextT = {
   userPreferences: {},
   musicbrainzGenres: [],
   recordingFeedbackManager: new RecordingFeedbackManager(apiService),
+  flair: "default",
 };
 
 const GlobalAppContext = createContext<GlobalAppContextT>(defaultGlobalContext);

frontend/js/src/utils/types.d.ts

@@ -657,6 +657,8 @@ declare type BrainzPlayerSettings = {
   >;
 };
 
+declare type Flair = "default" | "air" | "fire" | "water" | "disabled";
+
 declare type UserPreferences = {
   saveData?: boolean;
   brainzplayer?: BrainzPlayerSettings;

frontend/js/src/utils/utils.tsx

@@ -541,6 +541,7 @@ type GlobalAppProps = {
   musicbrainz?: MetaBrainzProjectUser;
   appleMusic?: AppleMusicUser;
   user_preferences?: UserPreferences;
+  flair?: Flair;
 };
 type GlobalProps = GlobalAppProps & SentryProps;
 
@@ -590,6 +591,7 @@ const getPageProps = async (): Promise<{
       sentry_traces_sample_rate,
       sentry_dsn,
       user_preferences,
+      flair,
     } = globalReactProps;
 
     const userPreferences = {
@@ -639,6 +641,7 @@ const getPageProps = async (): Promise<{
         apiService,
         current_user
       ),
+      flair,
     };
     sentryProps = {
       sentry_dsn,