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/see/settings/SettingsState.dart

@@ -8,12 +8,14 @@ import '../../about/internal/application/ToneLevel.dart';
 import '../../about/internal/application/UserDetails.dart';
 import '../../configs/Navigator.dart';
 import '../../designs/Component.dart';
+import '../../designs/Portrait.dart';
 import '../../designs/Responsive.dart';
 import '../../designs/Shell.dart';
 import '../../designs/buttons/Buttons.dart';
 import '../../designs/input/InputFields.dart';
 import '../../designs/text/Text.dart';
 import '../../utils/Colors.dart';
+import '../../utils/PhotoPicker.dart';
 import '../../utils/Thresholds.dart';
 import '../../utils/Validators.dart';
 import '../login/Login.dart';
@@ -59,9 +61,19 @@ class SettingsState extends State<Settings> implements ConnectSettings {
     Navigator.pop(context);
   }
 
+  void _onChangePhoto() async {
+    final String? pic = await PhotoPicker.pickPortrait();
+    if (pic != null) {
+      _model?.savePhoto(pic);
+    }
+  }
+
+  void _onRemovePhoto() {
+    _model?.savePhoto("");
+  }
+
   void _onOpenTargets() {
-    GroundedNavigation()
-        .navigateToPageWithData(const TargetSetup(), context);
+    GroundedNavigation().navigateToPageWithData(const TargetSetup(), context);
   }
 
   void _onToneSelected(ToneLevel tone) {
@@ -184,6 +196,50 @@ class SettingsState extends State<Settings> implements ConnectSettings {
         crossAxisAlignment: CrossAxisAlignment.stretch,
         mainAxisSize: MainAxisSize.min,
         children: [
+          sectionBreak("Profile photo", caption: "kept on this phone"),
+          card(
+            child: Row(
+              children: [
+                portrait(_user.pic, _user.name, 64),
+                const SizedBox(width: 16),
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    mainAxisSize: MainAxisSize.min,
+                    children: [
+                      text(_user.name.isEmpty ? "You" : _user.name, 16,
+                          TextType.Medium,
+                          color: colorPrimaryDark),
+                      const SizedBox(height: 8),
+                      Row(
+                        children: [
+                          GestureDetector(
+                            onTap: _onChangePhoto,
+                            child: text(
+                                _user.pic.isEmpty
+                                    ? "Add a photo"
+                                    : "Change photo",
+                                13,
+                                TextType.Medium,
+                                color: colorAccent),
+                          ),
+                          if (_user.pic.isNotEmpty) ...[
+                            const SizedBox(width: 18),
+                            GestureDetector(
+                              onTap: _onRemovePhoto,
+                              child: text("Remove", 13, TextType.Regular,
+                                  color: colorGrey2),
+                            ),
+                          ],
+                        ],
+                      ),
+                    ],
+                  ),
+                ),
+              ],
+            ),
+          ),
+          const SizedBox(height: 28),
           sectionBreak("Tone", caption: "how it speaks to you"),
           segmentedSelector<ToneLevel>(
             options: ToneLevel.values,
@@ -270,8 +326,7 @@ class SettingsState extends State<Settings> implements ConnectSettings {
                     ],
                   ),
                 ),
-                Icon(CupertinoIcons.chevron_right,
-                    size: 18, color: colorGrey2),
+                Icon(CupertinoIcons.chevron_right, size: 18, color: colorGrey2),
               ],
             ),
           ),
@@ -327,8 +382,8 @@ class SettingsState extends State<Settings> implements ConnectSettings {
           ),
           const SizedBox(height: 20),
           Center(
-            child: text("Grounded 1.0.0", 11, TextType.Regular,
-                color: colorGrey),
+            child:
+                text("Grounded 1.0.0", 11, TextType.Regular, color: colorGrey),
           ),
         ],
       ),

frontend/lib/Grounded/see/settings/ViewSettings.dart

@@ -24,6 +24,14 @@ class ViewSettings extends ParentViewModel {
     );
   }
 
+  /// A new profile photo (or "" to remove it), kept on the device.
+  void savePhoto(String pic) async {
+    final UserDetails details = await getDataManager().getUserDetails();
+    details.pic = pic;
+    await getDataManager().setUserDetails(details);
+    initialise();
+  }
+
   /// The tone slider is capped: it changes register, never cruelty.
   void changeTone(ToneLevel tone) async {
     if (!await hasNetwork(() => changeTone(tone))) return;
@@ -66,8 +74,8 @@ class ViewSettings extends ParentViewModel {
 
       connection.onSickModeChanged(details);
     } catch (e) {
-      handleError(e, () => setSickMode(enabled, reason), () => dismissError(),
-          "Retry");
+      handleError(
+          e, () => setSickMode(enabled, reason), () => dismissError(), "Retry");
     }
   }