move customize action to picker menu

lib/app/views/device_picker.dart

@@ -24,6 +24,7 @@ import '../../core/state.dart';
 import '../../management/models.dart';
 import '../key_customization.dart';
 import '../models.dart';
+import '../shortcuts.dart';
 import '../state.dart';
 import 'device_avatar.dart';
 import 'keys.dart' as keys;
@@ -192,6 +193,7 @@ class _DeviceRow extends StatelessWidget {
   final bool extended;
   final bool selected;
   final Color? background;
+  final Widget? trailing;
   final void Function() onTap;
 
   const _DeviceRow({
@@ -202,6 +204,7 @@ class _DeviceRow extends StatelessWidget {
     required this.extended,
     required this.selected,
     this.background,
+    this.trailing,
     required this.onTap,
   });
 
@@ -238,6 +241,7 @@ class _DeviceRow extends StatelessWidget {
                 const EdgeInsets.symmetric(horizontal: 8, vertical: 0),
             horizontalTitleGap: 8,
             leading: leading,
+            trailing: trailing,
             title: Text(
               title,
               overflow: TextOverflow.fade,
@@ -326,6 +330,33 @@ _DeviceRow _buildDeviceRow(
   );
 }
 
+Future<void> _showDeviceRowMenu(
+    BuildContext context, TapDownDetails details, String serialNumber) async {
+  final l10n = AppLocalizations.of(context)!;
+  await showMenu(
+    context: context,
+    position: RelativeRect.fromLTRB(
+      details.globalPosition.dx,
+      details.globalPosition.dy,
+      details.globalPosition.dx,
+      0,
+    ),
+    items: [
+      PopupMenuItem(
+        enabled: true,
+        onTap: () {
+          Actions.maybeInvoke(context, const KeyCustomizationIntent());
+        },
+        child: ListTile(
+            title: Text(l10n.s_customize_key_action),
+            dense: true,
+            contentPadding: EdgeInsets.zero,
+            enabled: true),
+      ),
+    ],
+  );
+}
+
 _DeviceRow _buildCurrentDeviceRow(
   BuildContext context,
   WidgetRef ref,
@@ -340,15 +371,13 @@ _DeviceRow _buildCurrentDeviceRow(
   }
   final title = messages.removeAt(0);
   final subtitle = messages.join('\n');
+  final serialNumber = data.value?.info.serial?.toString();
 
   String displayName = title;
   Color? displayColor;
-  if (node is UsbYubiKeyNode) {
+  if (serialNumber != null && serialNumber.isNotEmpty) {
-    if (node.info?.serial != null) {
+    final properties =
-      final properties = ref
+        ref.read(keyCustomizationManagerProvider).get(serialNumber)?.properties;
-          .read(keyCustomizationManagerProvider)
-          .get(node.info?.serial.toString())
-          ?.properties;
     var customName = properties?['display_name'];
     if (customName != null && customName != '') {
       displayName = customName;
@@ -358,7 +387,6 @@ _DeviceRow _buildCurrentDeviceRow(
       displayColor = Color(int.parse(customColor, radix: 16));
     }
   }
-  }
 
   return _DeviceRow(
     key: keys.deviceInfoListTile,
@@ -374,6 +402,20 @@ _DeviceRow _buildCurrentDeviceRow(
     background: displayColor,
     selected: true,
     onTap: () {},
+    trailing: (serialNumber != null && serialNumber.isNotEmpty)
+        ? GestureDetector(
+            onTapDown: (TapDownDetails details) async {
+              await _showDeviceRowMenu(context, details, serialNumber);
+            },
+            onSecondaryTapDown: (TapDownDetails details) async {
+              await _showDeviceRowMenu(context, details, serialNumber);
+            },
+            child: IconButton(
+              icon: const Icon(Icons.more_vert_outlined),
+              onPressed: () {},
+            ),
+          )
+        : null,
   );
 }
 

lib/app/views/navigation.dart

@@ -182,20 +182,6 @@ class NavigationContent extends ConsumerWidget {
                       },
                     ),
                   ],
-                  if (data.info.serial != null) ...[
-                    NavigationItem(
-                      leading: const Icon(Icons.settings_applications_sharp),
-                      title: 'Customize',
-                      collapsed: !extended,
-                      onTap: () {
-                        if (shouldPop) {
-                          Navigator.of(context).pop();
-                        }
-                        Actions.maybeInvoke(
-                            context, const KeyCustomizationIntent());
-                      },
-                    )
-                  ],
                   const SizedBox(height: 32),
                 ],
               ],

lib/l10n/app_de.arb

@@ -725,6 +725,7 @@
     "p_ndef_set_clip_failure": null,
 
     "@_key_customization": {},
+    "s_customize_key_action": null,
     "s_custom_key_name": null,
     "s_custom_key_color": null,
 

lib/l10n/app_en.arb

@@ -725,6 +725,7 @@
     "p_ndef_set_clip_failure": "Failed to access clipboard when trying to copy OTP code from YubiKey.",
 
     "@_key_customization": {},
+    "s_customize_key_action": "Customize key",
     "s_custom_key_name": "Custom key name",
     "s_custom_key_color": "Color for YubiKey",
 

lib/l10n/app_fr.arb

@@ -725,6 +725,7 @@
     "p_ndef_set_clip_failure": null,
 
     "@_key_customization": {},
+    "s_customize_key_action": null,
     "s_custom_key_name": null,
     "s_custom_key_color": null,
 

lib/l10n/app_ja.arb

@@ -725,6 +725,7 @@
     "p_ndef_set_clip_failure": null,
 
     "@_key_customization": {},
+    "s_customize_key_action": null,
     "s_custom_key_name": null,
     "s_custom_key_color": null,
 

lib/l10n/app_pl.arb

@@ -725,6 +725,7 @@
     "p_ndef_set_clip_failure": "Błąd kopiowania OTP do schowka.",
 
     "@_key_customization": {},
+    "s_customize_key_action": null,
     "s_custom_key_name": null,
     "s_custom_key_color": null,