Team page: weapons in order and show favorite

app/features/team/queries/findByIdentifier.server.ts

@@ -2,6 +2,7 @@ import { sql } from "~/db/sql";
 import type { Team, TeamMember, User } from "~/db/types";
 import { removeDuplicates } from "~/utils/arrays";
 import type { DetailedTeam } from "../team-types";
+import { parseDBJsonArray } from "~/utils/sql";
 
 const teamStm = sql.prepare(/*sql*/ `
   select 
@@ -33,12 +34,18 @@ const membersStm = sql.prepare(/*sql*/ `
     "User"."patronTier",
     "TeamMember"."role",
     "TeamMember"."isOwner",
-    json_group_array("UserWeapon"."weaponSplId") as "weapons"
+    json_group_array(
+      json_object(
+        'weaponSplId', "UserWeapon"."weaponSplId",
+        'isFavorite', "UserWeapon"."isFavorite"
+      )
+    ) as "weapons"
   from "TeamMember"
     join "User" on "User"."id" = "TeamMember"."userId"
     left join "UserWeapon" on "UserWeapon"."userId" = "User"."id"
   where "TeamMember"."teamId" = @teamId
   group by "User"."id"
+  order by "UserWeapon"."order" asc
 `);
 
 type TeamRow =
@@ -91,9 +98,7 @@ export function findByIdentifier(
         patronTier: member.patronTier,
         role: member.role ?? undefined,
         isOwner: Boolean(member.isOwner),
-        weapons: JSON.parse(member.weapons).filter(
-          (value: any) => typeof value === "number",
-        ),
+        weapons: parseDBJsonArray(member.weapons),
       })),
       // results: {
       //   count: 23,

app/features/team/routes/t.$customUrl.tsx

@@ -300,11 +300,11 @@ function MemberRow({
           {member.discordName}
         </Link>
         <div className="stack horizontal md">
-          {member.weapons.map((weapon) => (
+          {member.weapons.map(({ weaponSplId, isFavorite }) => (
             <WeaponImage
-              key={weapon}
-              variant="badge"
-              weaponSplId={weapon}
+              key={weaponSplId}
+              variant={isFavorite ? "badge-5-star" : "badge"}
+              weaponSplId={weaponSplId}
               width={48}
               height={48}
             />
@@ -327,11 +327,11 @@ function MobileMemberCard({ member }: { member: DetailedTeamMember }) {
         </Link>
         {member.weapons.length > 0 ? (
           <div className="stack horizontal md">
-            {member.weapons.map((weapon) => (
+            {member.weapons.map(({ weaponSplId, isFavorite }) => (
               <WeaponImage
-                key={weapon}
-                variant="badge"
-                weaponSplId={weapon}
+                key={weaponSplId}
+                variant={isFavorite ? "badge-5-star" : "badge"}
+                weaponSplId={weaponSplId}
                 width={32}
                 height={32}
               />

app/features/team/team-types.ts

@@ -1,5 +1,4 @@
-import type { MemberRole } from "~/db/types";
-import type { MainWeaponId } from "~/modules/in-game-lists";
+import type { MemberRole, UserWeapon } from "~/db/types";
 
 export interface DetailedTeam {
   id: number;
@@ -21,7 +20,7 @@ export interface DetailedTeamMember {
   discordAvatar: string | null;
   discordDiscriminator: string;
   isOwner: boolean;
-  weapons: MainWeaponId[];
+  weapons: Array<Pick<UserWeapon, "weaponSplId" | "isFavorite">>;
   role?: MemberRole;
   patronTier: number | null;
 }