add friend user flag

frontend/src/ts/controllers/user-flag-controller.ts

@@ -21,6 +21,13 @@ const flags: UserFlag[] = [
   },
 ];
 
+const friendFlag: UserFlag = {
+  name: "Friend",
+  description: "Friend :)",
+  icon: "fa-user-friends",
+  test: () => true,
+};
+
 export type SupportsFlags = {
   isPremium?: boolean;
   banned?: boolean;
@@ -39,6 +46,7 @@ type UserFlag = {
 
 type UserFlagOptions = {
   iconsOnly?: boolean;
+  isFriend?: boolean;
 };
 
 const USER_FLAG_OPTIONS_DEFAULT: UserFlagOptions = {
@@ -77,7 +85,10 @@ export function getHtmlByUserFlags(
   options?: UserFlagOptions
 ): string {
   const formatOptions = { ...USER_FLAG_OPTIONS_DEFAULT, ...options };
-  return getMatchingFlags(source)
-    .map((it) => toHtml(it, formatOptions))
-    .join("");
+  const flags = getMatchingFlags(source);
+  if (options?.isFriend) {
+    flags.push(friendFlag);
+  }
+  const result = flags.map((it) => toHtml(it, formatOptions)).join("");
+  return result;
 }

frontend/src/ts/elements/profile.ts

@@ -71,7 +71,9 @@ export async function update(
   }
 
   details.find(".name").text(profile.name);
-  details.find(".userFlags").html(getHtmlByUserFlags(profile));
+  details
+    .find(".userFlags")
+    .html(getHtmlByUserFlags(profile, { isFriend: isFriend(profile.uid) }));
 
   if (profile.lbOptOut === true) {
     if (where === "profile") {
@@ -431,6 +433,14 @@ export function updateNameFontSize(where: ProfileViewPaths): void {
   nameField.style.fontSize = `${finalFontSize}px`;
 }
 
+function isFriend(uid: string | undefined): boolean {
+  if (uid === undefined || uid === getAuthenticatedUser()?.uid) return false;
+
+  return Object.entries(DB.getSnapshot()?.friends ?? []).some(
+    ([friendUid, status]) => friendUid === uid && status === "accepted"
+  );
+}
+
 export function updateFriendRequestButton(): void {
   const myUid = getAuthenticatedUser()?.uid;
   const profileUid = document

frontend/src/ts/pages/leaderboards.ts

@@ -434,7 +434,7 @@ function buildTableRow(entry: LeaderboardEntry, me = false): HTMLElement {
     entry.uid
   }?isUid" class="entryName" uid=${entry.uid} router-link>${entry.name}</a>
           <div class="flagsAndBadge">
-            ${getHtmlByUserFlags(entry)}
+            ${getHtmlByUserFlags(entry, { isFriend: isFriend(entry.uid) })}
             ${
               isSafeNumber(entry.badgeId) ? getBadgeHTMLbyId(entry.badgeId) : ""
             }
@@ -489,7 +489,7 @@ function buildWeeklyTableRow(
     entry.uid
   }?isUid" class="entryName" uid=${entry.uid} router-link>${entry.name}</a>
           <div class="flagsAndBadge">
-            ${getHtmlByUserFlags(entry)}
+            ${getHtmlByUserFlags(entry, { isFriend: isFriend(entry.uid) })}
             ${
               isSafeNumber(entry.badgeId) ? getBadgeHTMLbyId(entry.badgeId) : ""
             }
@@ -1435,6 +1435,14 @@ export const page = new PageWithUrlParams({
   },
 });
 
+function isFriend(uid: string): boolean {
+  if (uid === getAuthenticatedUser()?.uid) return false;
+
+  return Object.entries(DB.getSnapshot()?.friends ?? []).some(
+    ([friendUid, status]) => friendUid === uid && status === "accepted"
+  );
+}
+
 $(async () => {
   Skeleton.save("pageLeaderboards");
 });