fix: dpad focus on pushed screens

close #510

lib/watch_together/screens/watch_together_screen.dart

@@ -6,6 +6,7 @@ import 'package:material_symbols_icons/symbols.dart';
 import 'package:provider/provider.dart';
 
 import '../../i18n/strings.g.dart';
+import '../../focus/focusable_wrapper.dart';
 import '../../utils/app_logger.dart';
 import '../../utils/dialogs.dart';
 import '../../widgets/focused_scroll_scaffold.dart';
@@ -144,24 +145,36 @@ class _NotInSessionViewState extends State<_NotInSessionView> {
               const SizedBox(height: 48),
               SizedBox(
                 width: double.infinity,
-                child: FilledButton.icon(
+                child: FocusableWrapper(
                   autofocus: true,
-                  onPressed: _isCreating || _isJoining ? null : _createSession,
-                  icon: _isCreating
-                      ? const SizedBox(width: 20, height: 20, child: CircularProgressIndicator(strokeWidth: 2))
-                      : const Icon(Symbols.add_rounded),
-                  label: Text(_isCreating ? t.watchTogether.creating : t.watchTogether.createSession),
+                  useBackgroundFocus: true,
+                  disableScale: true,
+                  borderRadius: 100,
+                  onSelect: _isCreating || _isJoining ? null : _createSession,
+                  child: FilledButton.icon(
+                    onPressed: _isCreating || _isJoining ? null : _createSession,
+                    icon: _isCreating
+                        ? const SizedBox(width: 20, height: 20, child: CircularProgressIndicator(strokeWidth: 2))
+                        : const Icon(Symbols.add_rounded),
+                    label: Text(_isCreating ? t.watchTogether.creating : t.watchTogether.createSession),
+                  ),
                 ),
               ),
               const SizedBox(height: 16),
               SizedBox(
                 width: double.infinity,
-                child: OutlinedButton.icon(
-                  onPressed: _isCreating || _isJoining ? null : _joinSession,
-                  icon: _isJoining
-                      ? const SizedBox(width: 20, height: 20, child: CircularProgressIndicator(strokeWidth: 2))
-                      : const Icon(Symbols.group_add_rounded),
-                  label: Text(_isJoining ? t.watchTogether.joining : t.watchTogether.joinSession),
+                child: FocusableWrapper(
+                  useBackgroundFocus: true,
+                  disableScale: true,
+                  borderRadius: 100,
+                  onSelect: _isCreating || _isJoining ? null : _joinSession,
+                  child: OutlinedButton.icon(
+                    onPressed: _isCreating || _isJoining ? null : _joinSession,
+                    icon: _isJoining
+                        ? const SizedBox(width: 20, height: 20, child: CircularProgressIndicator(strokeWidth: 2))
+                        : const Icon(Symbols.group_add_rounded),
+                    label: Text(_isJoining ? t.watchTogether.joining : t.watchTogether.joinSession),
+                  ),
                 ),
               ),
             ],
@@ -200,20 +213,38 @@ class _NotInSessionViewState extends State<_NotInSessionView> {
         title: Text(t.watchTogether.controlMode),
         content: Text(t.watchTogether.controlModeQuestion),
         actions: [
-          TextButton(
+          FocusableWrapper(
             autofocus: true,
-            onPressed: () => Navigator.pop(context),
-            style: TextButton.styleFrom(padding: buttonPadding, shape: buttonShape),
-            child: Text(t.common.cancel),
+            useBackgroundFocus: true,
+            disableScale: true,
+            borderRadius: 100,
+            onSelect: () => Navigator.pop(context),
+            child: TextButton(
+              onPressed: () => Navigator.pop(context),
+              style: TextButton.styleFrom(padding: buttonPadding, shape: buttonShape),
+              child: Text(t.common.cancel),
+            ),
           ),
-          TextButton(
-            onPressed: () => Navigator.pop(context, ControlMode.hostOnly),
-            style: TextButton.styleFrom(padding: buttonPadding, shape: buttonShape),
-            child: Text(t.watchTogether.hostOnly),
+          FocusableWrapper(
+            useBackgroundFocus: true,
+            disableScale: true,
+            borderRadius: 100,
+            onSelect: () => Navigator.pop(context, ControlMode.hostOnly),
+            child: TextButton(
+              onPressed: () => Navigator.pop(context, ControlMode.hostOnly),
+              style: TextButton.styleFrom(padding: buttonPadding, shape: buttonShape),
+              child: Text(t.watchTogether.hostOnly),
+            ),
           ),
-          FilledButton(
-            onPressed: () => Navigator.pop(context, ControlMode.anyone),
-            child: Text(t.watchTogether.anyone),
+          FocusableWrapper(
+            useBackgroundFocus: true,
+            disableScale: true,
+            borderRadius: 100,
+            onSelect: () => Navigator.pop(context, ControlMode.anyone),
+            child: FilledButton(
+              onPressed: () => Navigator.pop(context, ControlMode.anyone),
+              child: Text(t.watchTogether.anyone),
+            ),
           ),
         ],
       ),
@@ -377,15 +408,21 @@ class _ActiveSessionContent extends StatelessWidget {
         // Leave/End Session Button
         SizedBox(
           width: double.infinity,
-          child: OutlinedButton.icon(
+          child: FocusableWrapper(
             autofocus: true,
-            onPressed: () => _leaveSession(context),
-            style: OutlinedButton.styleFrom(
-              foregroundColor: theme.colorScheme.error,
-              side: BorderSide(color: theme.colorScheme.error),
+            useBackgroundFocus: true,
+            disableScale: true,
+            borderRadius: 100,
+            onSelect: () => _leaveSession(context),
+            child: OutlinedButton.icon(
+              onPressed: () => _leaveSession(context),
+              style: OutlinedButton.styleFrom(
+                foregroundColor: theme.colorScheme.error,
+                side: BorderSide(color: theme.colorScheme.error),
+              ),
+              icon: Icon(watchTogether.isHost ? Symbols.close_rounded : Symbols.logout_rounded),
+              label: Text(watchTogether.isHost ? t.watchTogether.endSession : t.watchTogether.leaveSession),
             ),
-            icon: Icon(watchTogether.isHost ? Symbols.close_rounded : Symbols.logout_rounded),
-            label: Text(watchTogether.isHost ? t.watchTogether.endSession : t.watchTogether.leaveSession),
           ),
         ),
       ],
@@ -417,24 +454,30 @@ class _SessionCodeRow extends StatelessWidget {
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
 
-    return InkWell(
-      onTap: () => _copySessionCode(context),
-      borderRadius: const BorderRadius.all(Radius.circular(4)),
-      child: Padding(
-        padding: const EdgeInsets.symmetric(vertical: 2),
-        child: Row(
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            Text(
-              '${t.watchTogether.sessionCode}: $sessionId',
-              style: theme.textTheme.bodySmall?.copyWith(
-                fontFamily: 'monospace',
-                color: theme.colorScheme.onSurfaceVariant,
+    return FocusableWrapper(
+      useBackgroundFocus: true,
+      disableScale: true,
+      borderRadius: 4,
+      onSelect: () => _copySessionCode(context),
+      child: InkWell(
+        onTap: () => _copySessionCode(context),
+        borderRadius: const BorderRadius.all(Radius.circular(4)),
+        child: Padding(
+          padding: const EdgeInsets.symmetric(vertical: 2),
+          child: Row(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Text(
+                '${t.watchTogether.sessionCode}: $sessionId',
+                style: theme.textTheme.bodySmall?.copyWith(
+                  fontFamily: 'monospace',
+                  color: theme.colorScheme.onSurfaceVariant,
+                ),
               ),
-            ),
-            const SizedBox(width: 4),
-            Icon(Symbols.content_copy_rounded, size: 14, color: theme.colorScheme.onSurfaceVariant),
-          ],
+              const SizedBox(width: 4),
+              Icon(Symbols.content_copy_rounded, size: 14, color: theme.colorScheme.onSurfaceVariant),
+            ],
+          ),
         ),
       ),
     );