Add user picture URL to competition members view

components/members/members-table.tsx

@@ -31,6 +31,7 @@ import {
 } from "@/lib/db_actions/competition-members";
 import type { VCompetitionMember } from "@/types/db_types";
 import { cn } from "@/lib/utils";
+import Image from "next/image";
 
 interface MembersTableProps {
   members: VCompetitionMember[];
@@ -126,9 +127,19 @@ function MemberRow({
         )}
       >
         {/* Avatar / Initial */}
-        <div className="h-10 w-10 rounded-full bg-muted flex items-center justify-center text-foreground font-medium shrink-0">
-          {member.user_name.charAt(0).toUpperCase()}
-        </div>
+        {member.user_picture_url ? (
+          <Image
+            src={member.user_picture_url}
+            alt={member.user_name}
+            width={40}
+            height={40}
+            className="h-10 w-10 rounded-full object-cover shrink-0"
+          />
+        ) : (
+          <div className="h-10 w-10 rounded-full bg-muted flex items-center justify-center text-foreground font-medium shrink-0">
+            {member.user_name.charAt(0).toUpperCase()}
+          </div>
+        )}
 
         {/* Name and email */}
         <div className="flex-1 min-w-0">

migrations/1773516227456_add-picture-url-to-competition-members-view.ts

@@ -0,0 +1,48 @@
+import { type Kysely, sql } from "kysely";
+
+export async function up(db: Kysely<any>): Promise<void> {
+  await db.schema.dropView("v_competition_members").execute();
+
+  await sql`
+    CREATE VIEW v_competition_members WITH (security_barrier, security_invoker) AS
+    SELECT
+      cm.id AS membership_id,
+      cm.competition_id,
+      cm.user_id,
+      cm.role,
+      cm.created_at AS membership_created_at,
+      cm.updated_at AS membership_updated_at,
+      c.name AS competition_name,
+      c.is_private AS competition_is_private,
+      u.name AS user_name,
+      u.email AS user_email,
+      u.username AS user_username,
+      u.picture_url AS user_picture_url
+    FROM competition_members cm
+      JOIN competitions c ON cm.competition_id = c.id
+      JOIN users u ON cm.user_id = u.id;
+  `.execute(db);
+}
+
+export async function down(db: Kysely<any>): Promise<void> {
+  await db.schema.dropView("v_competition_members").execute();
+
+  await sql`
+    CREATE VIEW v_competition_members WITH (security_barrier, security_invoker) AS
+    SELECT
+      cm.id AS membership_id,
+      cm.competition_id,
+      cm.user_id,
+      cm.role,
+      cm.created_at AS membership_created_at,
+      cm.updated_at AS membership_updated_at,
+      c.name AS competition_name,
+      c.is_private AS competition_is_private,
+      u.name AS user_name,
+      u.email AS user_email,
+      u.username AS user_username
+    FROM competition_members cm
+      JOIN competitions c ON cm.competition_id = c.id
+      JOIN users u ON cm.user_id = u.id;
+  `.execute(db);
+}

types/db_types.ts

@@ -245,5 +245,6 @@ export interface VCompetitionMembersView {
   user_name: string;
   user_email: string;
   user_username: string | null;
+  user_picture_url: string | null;
 }
 export type VCompetitionMember = Selectable<VCompetitionMembersView>;