Show real photos for people instead of scene art

Your avatar is your photo, picked from the device by tapping it on Home or
from a new Profile photo row in Settings, shrunk to 256 px and kept on the
phone (there is no upload endpoint yet). Group members show the photo the
server sends in a new `photo` field, everywhere avatars appear. Without a
photo, an initial on a neutral disc. Mock mode bundles free Unsplash
portraits for the sample people.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KhQh614DMeYoQEH9SoMRUw

frontend/lib/Grounded/designs/MemberAvatar.dart

@@ -2,47 +2,19 @@ import 'package:flutter/material.dart';
 
 import '../about/internal/application/TextType.dart';
 import '../utils/Colors.dart';
-import '../utils/CommonUtils.dart';
-import 'scene/SceneArt.dart';
+import 'Portrait.dart';
 import 'text/Text.dart';
 
-/// A member's round portrait: a landscape picked from their name with the
-/// initial on it, so everyone is recognisable without a photo.
-Widget memberAvatar(String name, double size, {Color? border}) {
-  const List<List<Color>> palettes = <List<Color>>[
-    sceneWorkout,
-    sceneMeditation,
-    sceneMustDo,
-  ];
-  final int seed = sceneSeed(name.isEmpty ? "?" : name);
-  final String initial =
-      name.isEmpty ? "?" : name.substring(0, 1).toUpperCase();
-
-  return Container(
-    width: size,
-    height: size,
-    decoration: BoxDecoration(
-      shape: BoxShape.circle,
-      border: Border.all(color: border ?? colorWhite, width: 2),
-    ),
-    child: ClipOval(
-      child: Stack(
-        fit: StackFit.expand,
-        children: [
-          SceneArt(palette: palettes[seed % palettes.length], seed: seed),
-          Center(
-            child:
-                text(initial, size * 0.42, TextType.Medium, color: colorWhite),
-          ),
-        ],
-      ),
-    ),
-  );
+/// A member's round photo, or their initial when they have none.
+Widget memberAvatar(String name, double size,
+    {String photo = "", Color? border}) {
+  return portrait(photo, name, size, border: border);
 }
 
 /// Several portraits overlapping, with "+N" once there are more than fit.
+/// [photos] lines up with [names]; missing entries fall back to initials.
 Widget avatarStack(List<String> names, double size,
-    {int max = 4, Color? border}) {
+    {List<String> photos = const <String>[], int max = 4, Color? border}) {
   final List<String> shown = names.take(max).toList();
   final int extra = names.length - shown.length;
   final double step = size * 0.68;
@@ -56,7 +28,9 @@ Widget avatarStack(List<String> names, double size,
         for (int index = 0; index < shown.length; index++)
           Positioned(
             left: step * index,
-            child: memberAvatar(shown[index], size, border: border),
+            child: memberAvatar(shown[index], size,
+                photo: index < photos.length ? photos[index] : "",
+                border: border),
           ),
         if (extra > 0)
           Positioned(