refactor: reduce model and focus boilerplate

lib/watch_together/services/recent_rooms_service.dart

@@ -1,32 +1,26 @@
 import 'dart:convert';
 
+import 'package:json_annotation/json_annotation.dart';
+
 import '../../services/settings_service.dart';
 import '../models/watch_session.dart';
 
+part 'recent_rooms_service.g.dart';
+
+@JsonSerializable(includeIfNull: false)
 class RecentRoom {
   final String code;
   final String? name;
+  @JsonKey(fromJson: _dateTimeFromMillis, toJson: _dateTimeToMillis)
   final DateTime lastUsed;
+  @JsonKey(fromJson: _controlModeFromIndex, toJson: _controlModeToIndex)
   final ControlMode? controlMode;
 
   const RecentRoom({required this.code, this.name, required this.lastUsed, this.controlMode});
 
-  Map<String, dynamic> toJson() => {
-    'code': code,
-    if (name != null) 'name': name,
-    'lastUsed': lastUsed.millisecondsSinceEpoch,
-    if (controlMode != null) 'controlMode': controlMode!.index,
-  };
+  Map<String, dynamic> toJson() => _$RecentRoomToJson(this);
 
-  factory RecentRoom.fromJson(Map<String, dynamic> json) {
-    final modeIndex = json['controlMode'] as int?;
-    return RecentRoom(
-      code: json['code'] as String,
-      name: json['name'] as String?,
-      lastUsed: DateTime.fromMillisecondsSinceEpoch(json['lastUsed'] as int),
-      controlMode: modeIndex != null ? ControlMode.values[modeIndex] : null,
-    );
-  }
+  factory RecentRoom.fromJson(Map<String, dynamic> json) => _$RecentRoomFromJson(json);
 
   RecentRoom copyWith({
     String? code,
@@ -42,6 +36,17 @@ class RecentRoom {
   );
 }
 
+DateTime _dateTimeFromMillis(int value) => DateTime.fromMillisecondsSinceEpoch(value);
+
+int _dateTimeToMillis(DateTime value) => value.millisecondsSinceEpoch;
+
+ControlMode? _controlModeFromIndex(int? index) {
+  if (index == null || index < 0 || index >= ControlMode.values.length) return null;
+  return ControlMode.values[index];
+}
+
+int? _controlModeToIndex(ControlMode? value) => value?.index;
+
 class RecentRoomsService {
   static const int _maxRooms = 20;
 

lib/watch_together/services/recent_rooms_service.g.dart

@@ -0,0 +1,21 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'recent_rooms_service.dart';
+
+// **************************************************************************
+// JsonSerializableGenerator
+// **************************************************************************
+
+RecentRoom _$RecentRoomFromJson(Map<String, dynamic> json) => RecentRoom(
+  code: json['code'] as String,
+  name: json['name'] as String?,
+  lastUsed: _dateTimeFromMillis((json['lastUsed'] as num).toInt()),
+  controlMode: _controlModeFromIndex((json['controlMode'] as num?)?.toInt()),
+);
+
+Map<String, dynamic> _$RecentRoomToJson(RecentRoom instance) => <String, dynamic>{
+  'code': instance.code,
+  'name': ?instance.name,
+  'lastUsed': _dateTimeToMillis(instance.lastUsed),
+  'controlMode': ?_controlModeToIndex(instance.controlMode),
+};

lib/watch_together/widgets/watch_together_overlay.dart

@@ -343,6 +343,7 @@ class _ParticipantNotificationOverlayState extends State<ParticipantNotification
               ParticipantEventType.buffering => t.watchTogether.participantBuffering(name: n.event.displayName),
             };
             return Container(
+              key: ValueKey(n.id),
               margin: const EdgeInsets.only(bottom: 4),
               padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
               decoration: const BoxDecoration(