UI enchancements for key customization

Author: elibon99

lib/app/state.dart

@@ -235,6 +235,14 @@ class CurrentAppNotifier extends StateNotifier<Application> {
       // Try switching to saved app
       state = Application.values.firstWhere((app) => app.name == lastAppName);
     }
+    if (state == Application.passkeys &&
+        state.getAvailability(data) != Availability.enabled) {
+      state = Application.webauthn;
+    }
+    if (state == Application.webauthn &&
+        state.getAvailability(data) != Availability.enabled) {
+      state = Application.passkeys;
+    }
     if (state.getAvailability(data) != Availability.unsupported) {
       // Keep current app
       return;

lib/home/views/home_screen.dart

@@ -44,11 +44,8 @@ class HomeScreen extends ConsumerWidget {
     final enabledCapabilities =
         deviceData.info.config.enabledCapabilities[deviceData.node.transport] ??
             0;
-    final image = ProductImage(
-        name: deviceData.name,
-        formFactor: deviceData.info.formFactor,
-        isNfc:
-            deviceData.info.supportedCapabilities.containsKey(Transport.nfc));
+    final primaryColor = ref.watch(defaultColorProvider);
+
     return AppPage(
       title: l10n.s_home,
       keyActionsBuilder: (context) =>
@@ -60,7 +57,6 @@ class HomeScreen extends ConsumerWidget {
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
               _DeviceName(deviceData, keyCustomization),
-              const SizedBox(height: 16.0),
               _DeviceInfoContent(deviceData.info),
               const SizedBox(height: 16.0),
               Row(
@@ -94,7 +90,15 @@ class HomeScreen extends ConsumerWidget {
                     flex: 6,
                     child: ConstrainedBox(
                       constraints: const BoxConstraints(maxWidth: 200),
-                      child: image,
+                      child: _HeroAvatar(
+                        color: keyCustomization?.color ?? primaryColor,
+                        child: ProductImage(
+                          name: deviceData.name,
+                          formFactor: deviceData.info.formFactor,
+                          isNfc: deviceData.info.supportedCapabilities
+                              .containsKey(Transport.nfc),
+                        ),
+                      ),
                     ),
                   )
                 ],
@@ -121,6 +125,7 @@ class _DeviceName extends ConsumerWidget {
     String displayName = label != null ? '$label ($name)' : name;
 
     return Row(
+      crossAxisAlignment: CrossAxisAlignment.start,
       children: [
         Flexible(
             child: Text(
@@ -172,20 +177,20 @@ class _DeviceInfoContent extends StatelessWidget {
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
         if (serial != null)
-          Opacity(
-            opacity: 0.6,
-            child: Text(
-              l10n.l_serial_number(serial),
-              style: Theme.of(context).textTheme.bodySmall,
-            ),
-          ),
-        Opacity(
-          opacity: 0.6,
-          child: Text(
-            l10n.l_firmware_version(version),
-            style: Theme.of(context).textTheme.bodySmall,
+          Text(
+            l10n.l_serial_number(serial),
+            style: Theme.of(context)
+                .textTheme
+                .titleSmall
+                ?.apply(color: Theme.of(context).colorScheme.onSurfaceVariant),
           ),
-        )
+        Text(
+          l10n.l_firmware_version(version),
+          style: Theme.of(context)
+              .textTheme
+              .titleSmall
+              ?.apply(color: Theme.of(context).colorScheme.onSurfaceVariant),
+        ),
       ],
     );
   }
@@ -199,6 +204,7 @@ class _DeviceColor extends ConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    final l10n = AppLocalizations.of(context)!;
     final theme = Theme.of(context);
     final primaryColor = ref.watch(defaultColorProvider);
     final defaultColor =
@@ -208,6 +214,7 @@ class _DeviceColor extends ConsumerWidget {
     final customColor = initialCustomization.color;
 
     return ChoiceFilterChip<Color?>(
+      disableHover: true,
       value: customColor,
       items: const [null],
       selected: customColor != null && customColor != defaultColor,
@@ -246,6 +253,7 @@ class _DeviceColor extends ConsumerWidget {
             fillColor: (isAndroid && ref.read(androidSdkVersionProvider) >= 31)
                 ? theme.colorScheme.onSurface
                 : primaryColor,
+            hoverColor: Colors.black12,
             shape: const CircleBorder(),
             child: Icon(
               Icons.cancel_rounded,
@@ -268,7 +276,7 @@ class _DeviceColor extends ConsumerWidget {
           const SizedBox(
             width: 12,
           ),
-          const Flexible(child: Text('Key color'))
+          Flexible(child: Text(l10n.s_color))
         ],
       ),
       onChanged: (e) {},
@@ -307,6 +315,7 @@ class _ColorButtonState extends State<_ColorButton> {
       onPressed: widget.onPressed,
       constraints: const BoxConstraints(minWidth: 26.0, minHeight: 26.0),
       fillColor: widget.color,
+      hoverColor: Colors.black12,
       shape: const CircleBorder(),
       child: Icon(
         Icons.circle,
@@ -316,3 +325,37 @@ class _ColorButtonState extends State<_ColorButton> {
     );
   }
 }
+
+class _HeroAvatar extends StatelessWidget {
+  final Widget child;
+  final Color color;
+
+  const _HeroAvatar({required this.color, required this.child});
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    return Container(
+      decoration: BoxDecoration(
+        shape: BoxShape.circle,
+        gradient: RadialGradient(
+          colors: [
+            color.withOpacity(0.6),
+            color.withOpacity(0.25),
+            (DialogTheme.of(context).backgroundColor ??
+                    theme.dialogBackgroundColor)
+                .withOpacity(0),
+          ],
+        ),
+      ),
+      padding: const EdgeInsets.all(12),
+      child: Theme(
+        // Give the avatar a transparent background
+        data: theme.copyWith(
+            colorScheme:
+                theme.colorScheme.copyWith(surfaceVariant: Colors.transparent)),
+        child: child,
+      ),
+    );
+  }
+}

lib/home/views/manage_label_dialog.dart

@@ -67,6 +67,7 @@ class _ManageLabelDialogState extends ConsumerState<ManageLabelDialog> {
                 ? l10n.p_set_will_add_custom_name
                 : l10n.p_rename_will_change_custom_name),
             AppTextFormField(
+              autofocus: true,
               initialValue: _label,
               maxLength: 20,
               decoration: AppInputDecoration(

lib/l10n/app_de.arb

@@ -767,6 +767,7 @@
     "s_set_label": null,
     "s_change_label": null,
     "s_theme_color": null,
+    "s_color": null,
     "p_set_will_add_custom_name": null,
     "p_rename_will_change_custom_name": null,
 

lib/l10n/app_en.arb

@@ -767,6 +767,7 @@
     "s_set_label": "Set label",
     "s_change_label": "Change label",
     "s_theme_color": "Theme color",
+    "s_color": "Color",
     "p_set_will_add_custom_name": "This will give your YubiKey a custom name.",
     "p_rename_will_change_custom_name": "This will change the label of your YubiKey.",
 

lib/l10n/app_fr.arb

@@ -767,6 +767,7 @@
     "s_set_label": null,
     "s_change_label": null,
     "s_theme_color": null,
+    "s_color": null,
     "p_set_will_add_custom_name": null,
     "p_rename_will_change_custom_name": null,
 

lib/l10n/app_ja.arb

@@ -767,6 +767,7 @@
     "s_set_label": null,
     "s_change_label": null,
     "s_theme_color": null,
+    "s_color": null,
     "p_set_will_add_custom_name": null,
     "p_rename_will_change_custom_name": null,
 

lib/l10n/app_pl.arb

@@ -767,6 +767,7 @@
     "s_set_label": null,
     "s_change_label": null,
     "s_theme_color": "Kolor motywu",
+    "s_color": null,
     "p_set_will_add_custom_name": null,
     "p_rename_will_change_custom_name": null,
 

lib/widgets/choice_filter_chip.dart

@@ -28,6 +28,7 @@ class ChoiceFilterChip<T> extends StatefulWidget {
   final void Function(T value)? onChanged;
   final Widget? avatar;
   final bool selected;
+  final bool? disableHover;
   const ChoiceFilterChip({
     super.key,
     required this.value,
@@ -37,6 +38,7 @@ class ChoiceFilterChip<T> extends StatefulWidget {
     this.tooltip,
     this.avatar,
     this.selected = false,
+    this.disableHover,
     this.labelBuilder,
   });
 
@@ -69,6 +71,8 @@ class _ChoiceFilterChipState<T> extends State<ChoiceFilterChip<T>> {
       color: Theme.of(context).colorScheme.background,
       items: widget.items
           .map((e) => PopupMenuItem<T>(
+                enabled:
+                    widget.disableHover != null ? !widget.disableHover! : true,
                 value: e,
                 height: chipBox.size.height,
                 textStyle: ChipTheme.of(context).labelStyle,