ui: change title when showing mnemonic to include number of words

`1 of 24`, `2 of 24`, ... instead of `01`, `02`, ...

More explicit, harder to make mistakes.

The label is offset to the left a bit, otherwise it intersects with
`Continue` that appears in the top right on the last word.

The xoffset/yoffset are converted to signed ints so a negative offset
is possible.

Author: benma

src/rust/bitbox02-rust/src/workflow/mnemonic.rs

@@ -138,7 +138,7 @@ pub async fn show_and_confirm_mnemonic(
 
     // Part 2) Confirm words
     for (word_idx, word) in words.iter().enumerate() {
-        let title = format!("{:02}", word_idx + 1);
+        let title = format!("{} of {}", word_idx + 1, words.len());
         let (correct_idx, choices) = create_random_unique_words(word, NUM_RANDOM_WORDS);
         let mut choices: Vec<&str> = choices.iter().map(|c| c.as_ref()).collect();
         choices.push("Back to\nrecovery words");

src/ui/components/label.c

@@ -37,8 +37,8 @@ typedef struct {
     float slider_position_diff;
     int16_t text_position;
     int16_t text_position_last;
-    uint8_t xoffset;
-    uint8_t yoffset;
+    int16_t xoffset;
+    int16_t yoffset;
 } data_t;
 
 static void _measure_label_dimensions(component_t* label);
@@ -219,8 +219,8 @@ static component_t* _label_create(
     const bool upside_down,
     const UG_FONT* font,
     enum screen_position_t position,
-    uint8_t xoffset,
-    uint8_t yoffset,
+    int16_t xoffset,
+    int16_t yoffset,
     bool scrollable,
     component_t* parent)
 {
@@ -266,8 +266,8 @@ component_t* label_create_offset(
     const char* text,
     const UG_FONT* font,
     enum screen_position_t position,
-    uint8_t xoffset,
-    uint8_t yoffset,
+    int16_t xoffset,
+    int16_t yoffset,
     component_t* parent)
 {
     return _label_create(text, false, font, position, xoffset, yoffset, false, parent);
@@ -286,8 +286,8 @@ component_t* label_create_scrollable_offset(
     const char* text,
     const UG_FONT* font,
     enum screen_position_t position,
-    uint8_t xoffset,
-    uint8_t yoffset,
+    int16_t xoffset,
+    int16_t yoffset,
     component_t* parent)
 {
     return _label_create(text, false, font, position, xoffset, yoffset, true, parent);

src/ui/components/label.h

@@ -57,8 +57,8 @@ component_t* label_create_offset(
     const char* text,
     const UG_FONT* font,
     enum screen_position_t position,
-    uint8_t xoffset,
-    uint8_t yoffset,
+    int16_t xoffset,
+    int16_t yoffset,
     component_t* parent);
 
 /**
@@ -87,8 +87,8 @@ component_t* label_create_scrollable_offset(
     const char* text,
     const UG_FONT* font,
     enum screen_position_t position,
-    uint8_t xoffset,
-    uint8_t yoffset,
+    int16_t xoffset,
+    int16_t yoffset,
     component_t* parent);
 
 #endif

src/ui/components/menu.c

@@ -77,8 +77,8 @@ static void _cancel(component_t* component)
 static void _display_index(component_t* menu)
 {
     menu_data_t* data = (menu_data_t*)menu->data;
-    char index_str[4];
-    snprintf(index_str, sizeof(index_str), "%02u", (data->index + 1U));
+    char index_str[11];
+    snprintf(index_str, sizeof(index_str), "%u of %u", data->index + 1U, data->length);
     label_update(data->index_label, index_str);
 }
 
@@ -283,7 +283,7 @@ component_t* menu_create(
         ui_util_add_sub_component(menu, label);
         labels[i] = label;
     }
-    data->index_label = label_create("", NULL, CENTER_TOP, menu);
+    data->index_label = label_create_offset("", NULL, CENTER_TOP, -10, 0, menu);
     ui_util_add_sub_component(menu, data->index_label);
     if (data->show_index) {
         _display_index(menu);