From 4f71dc60970b717b7a1d9fecc2aa52077b7e2555 Mon Sep 17 00:00:00 2001
From: Aleksander <aleksander@oo8.dev>
Date: Sat, 20 Sep 2025 16:54:16 +0200
Subject: [PATCH] dash-frontend: tab titles, home screen username

---
 dash-frontend/assets/gui/dashboard.xml       | 33 ++++++++++++++----
 dash-frontend/assets/gui/t_menu_button.xml   |  2 +-
 dash-frontend/assets/gui/tab/apps.xml        |  4 +--
 dash-frontend/assets/gui/tab/games.xml       |  4 ++-
 dash-frontend/assets/gui/tab/home.xml        | 26 +++++++++------
 dash-frontend/assets/gui/tab/monado.xml      |  4 ++-
 dash-frontend/assets/gui/tab/processes.xml   |  4 ++-
 dash-frontend/assets/gui/tab/settings.xml    |  4 ++-
 dash-frontend/assets/gui/tab/t_tab_title.xml |  9 +++++
 dash-frontend/assets/lang/de.json            |  9 +++++
 dash-frontend/assets/lang/en.json            | 10 +++++-
 dash-frontend/assets/lang/es.json            |  9 +++++
 dash-frontend/assets/lang/ja.json            |  9 +++++
 dash-frontend/assets/lang/pl.json            |  9 +++++
 dash-frontend/src/lib.rs                     |  1 +
 dash-frontend/src/tab/home.rs                | 22 +++++++++++-
 dash-frontend/src/various.rs                 |  6 ++++
 scripts/translator/main.ts                   |  2 +-
 wgui/src/i18n.rs                             | 10 +++---
 wgui/src/parser/mod.rs                       | 35 ++++++++++++++------
 wgui/src/parser/widget_label.rs              | 10 ++++--
 wlx-overlay-s/src/assets/gui/watch.xml       |  4 +--
 22 files changed, 181 insertions(+), 45 deletions(-)
 create mode 100644 dash-frontend/assets/gui/tab/t_tab_title.xml
 create mode 100644 dash-frontend/assets/lang/de.json
 create mode 100644 dash-frontend/assets/lang/es.json
 create mode 100644 dash-frontend/assets/lang/ja.json
 create mode 100644 dash-frontend/assets/lang/pl.json
 create mode 100644 dash-frontend/src/various.rs

diff --git a/dash-frontend/assets/gui/dashboard.xml b/dash-frontend/assets/gui/dashboard.xml
index 60d380a..152ff06 100644
--- a/dash-frontend/assets/gui/dashboard.xml
+++ b/dash-frontend/assets/gui/dashboard.xml
@@ -27,7 +27,13 @@
     <!-- left/right separator (menu and rest) -->
     <div flex_direction="row" gap="8" width="100%" height="100%">
       <!-- LEFT MENU -->
-      <div id="menu" width="~size_size" min_width="~side_size" max_width="~side_size" height="100%" align_items="center" justify_content="center">
+      <div id="menu"
+        width="~size_size"
+        min_width="~side_size"
+        max_width="~side_size"
+        height="100%"
+        align_items="center"
+        justify_content="center">
         <rectangle
           width="100%"
           round="100%"
@@ -48,21 +54,34 @@
       </div>
       <!-- REST -->
       <!-- content/bottom panel separator -->
-      <div flex_direction="column" gap="8" flex_grow="1">
+      <div
+        flex_direction="column"
+        gap="8"
+        width="100%"
+        height="100%"
+        overflow_x="scroll">
         <!-- CONTENT -->
         <rectangle
-          color2="#0d131acc" color="#244179aa" gradient="vertical" round="8" overflow_y="hidden"
-          justify_content="center"
+          color2="#0d131acc"
+          color="#244179aa"
+          gradient="vertical"
+          round="8"
           flex_grow="1"
+          width="100%"
+          overflow_y="scroll"
         >
           <div
             id="content"
             overflow_x="scroll"
             overflow_y="scroll"
-            align_items="center"
-            justify_content="center"
             flex_direction="column"
-            gap="24"
+            padding_top="8"
+            padding_bottom="8"
+            padding_left="16"
+            padding_right="16"
+            gap="8"
+            width="100%"
+            min_height="100%"
           >
             <!-- filled-in at runtime -->
           </div>
diff --git a/dash-frontend/assets/gui/t_menu_button.xml b/dash-frontend/assets/gui/t_menu_button.xml
index cdede05..74c3da4 100644
--- a/dash-frontend/assets/gui/t_menu_button.xml
+++ b/dash-frontend/assets/gui/t_menu_button.xml
@@ -16,7 +16,7 @@
         justify_content="center"
         flex_direction="column">
         <sprite src="${icon}" width="32" height="32" />
-        <label weight="bold" size="18" text="${text}" />
+        <label weight="bold" size="18" text="${text}" translation="${translation}" />
       </div>
     </Button>
   </template>
diff --git a/dash-frontend/assets/gui/tab/apps.xml b/dash-frontend/assets/gui/tab/apps.xml
index fb1034e..48a83a2 100644
--- a/dash-frontend/assets/gui/tab/apps.xml
+++ b/dash-frontend/assets/gui/tab/apps.xml
@@ -1,7 +1,7 @@
 <layout>
+  <include src="t_tab_title.xml" />
 
   <elements>
-    <label text="Apps" size="64" weight="bold" />
-    <label text="bottom text" size="16" weight="bold" color="#FFFFFF88" />
+    <TabTitle translation="APPLICATIONS" icon="dashboard/apps.svg" />
   </elements>
 </layout>
\ No newline at end of file
diff --git a/dash-frontend/assets/gui/tab/games.xml b/dash-frontend/assets/gui/tab/games.xml
index 819988a..4a1fde2 100644
--- a/dash-frontend/assets/gui/tab/games.xml
+++ b/dash-frontend/assets/gui/tab/games.xml
@@ -1,5 +1,7 @@
 <layout>
+  <include src="t_tab_title.xml" />
+
   <elements>
-    <label text="Games" size="32" weight="bold" />
+    <TabTitle translation="GAMES" icon="dashboard/games.svg" />
   </elements>
 </layout>
\ No newline at end of file
diff --git a/dash-frontend/assets/gui/tab/home.xml b/dash-frontend/assets/gui/tab/home.xml
index fe914f9..7a9d2ff 100644
--- a/dash-frontend/assets/gui/tab/home.xml
+++ b/dash-frontend/assets/gui/tab/home.xml
@@ -2,17 +2,23 @@
   <include src="../t_menu_button.xml" />
 
   <elements>
-    <sprite src="dashboard/wayvr_dashboard.svg" min_width="96" min_height="96" />
-    <label text="Hello, user!" size="32" weight="bold" />
-    <label text="Connected to wlx-overlay-s" size="16" weight="bold" color="#bbffbb" />
+    <div
+      flex_direction="column"
+      justify_content="center"
+      align_items="center"
+      flex_grow="1"
+      gap="24">
+      <sprite src="dashboard/wayvr_dashboard.svg" width="96" height="96" />
+      <label id="label_hello" size="32" weight="bold" />
 
-    <!-- main button list -->
-    <div flex_direction="row" gap="8" margin_top="32">
-      <MenuButton id="btn_apps" icon="dashboard/apps.svg" text="Apps" />
-      <MenuButton id="btn_games" icon="dashboard/games.svg" text="Games" />
-      <MenuButton id="btn_monado" icon="dashboard/monado.svg" text="Monado" />
-      <MenuButton id="btn_processes" icon="dashboard/window.svg" text="Processes" />
-      <MenuButton id="btn_settings" icon="dashboard/settings.svg" text="Settings" />
+      <!-- main button list -->
+      <div flex_direction="row" gap="8">
+        <MenuButton id="btn_apps" icon="dashboard/apps.svg" translation="APPLICATIONS" />
+        <MenuButton id="btn_games" icon="dashboard/games.svg" translation="GAMES" />
+        <MenuButton id="btn_monado" icon="dashboard/monado.svg" text="Monado" />
+        <MenuButton id="btn_processes" icon="dashboard/window.svg" translation="PROCESSES" />
+        <MenuButton id="btn_settings" icon="dashboard/settings.svg" translation="SETTINGS" />
+      </div>
     </div>
   </elements>
 </layout>
\ No newline at end of file
diff --git a/dash-frontend/assets/gui/tab/monado.xml b/dash-frontend/assets/gui/tab/monado.xml
index e5fa8a3..729f356 100644
--- a/dash-frontend/assets/gui/tab/monado.xml
+++ b/dash-frontend/assets/gui/tab/monado.xml
@@ -1,5 +1,7 @@
 <layout>
+  <include src="t_tab_title.xml" />
+
   <elements>
-    <label text="Monado" size="32" weight="bold" />
+    <TabTitle translation="MONADO_RUNTIME" icon="dashboard/monado.svg" />
   </elements>
 </layout>
\ No newline at end of file
diff --git a/dash-frontend/assets/gui/tab/processes.xml b/dash-frontend/assets/gui/tab/processes.xml
index d3107c9..0330d48 100644
--- a/dash-frontend/assets/gui/tab/processes.xml
+++ b/dash-frontend/assets/gui/tab/processes.xml
@@ -1,5 +1,7 @@
 <layout>
+  <include src="t_tab_title.xml" />
+
   <elements>
-    <label text="Processes" size="32" weight="bold" />
+    <TabTitle translation="PROCESSES" icon="dashboard/window.svg" />
   </elements>
 </layout>
\ No newline at end of file
diff --git a/dash-frontend/assets/gui/tab/settings.xml b/dash-frontend/assets/gui/tab/settings.xml
index 6593125..a3c31fe 100644
--- a/dash-frontend/assets/gui/tab/settings.xml
+++ b/dash-frontend/assets/gui/tab/settings.xml
@@ -1,5 +1,7 @@
 <layout>
+  <include src="t_tab_title.xml" />
+
   <elements>
-    <label text="Settings" size="32" weight="bold" />
+    <TabTitle translation="SETTINGS" icon="dashboard/settings.svg" />
   </elements>
 </layout>
\ No newline at end of file
diff --git a/dash-frontend/assets/gui/tab/t_tab_title.xml b/dash-frontend/assets/gui/tab/t_tab_title.xml
new file mode 100644
index 0000000..fc7e2b0
--- /dev/null
+++ b/dash-frontend/assets/gui/tab/t_tab_title.xml
@@ -0,0 +1,9 @@
+<layout>
+  <!-- translation, icon -->
+  <template name="TabTitle">
+    <div gap="8" align_items="center">
+      <sprite src="${icon}" width="24" height="24" />
+      <label translation="${translation}" size="18" weight="bold" />
+    </div>
+  </template>
+</layout>
\ No newline at end of file
diff --git a/dash-frontend/assets/lang/de.json b/dash-frontend/assets/lang/de.json
new file mode 100644
index 0000000..418be81
--- /dev/null
+++ b/dash-frontend/assets/lang/de.json
@@ -0,0 +1,9 @@
+{
+  "HOME_SCREEN": "Startbildschirm",
+  "MONADO_RUNTIME": "„Monado”-Laufzeitumgebung",
+  "APPLICATIONS": "Anwendungen",
+  "GAMES": "Spiele",
+  "SETTINGS": "Einstellungen",
+  "PROCESSES": "Prozesse",
+  "HELLO_USER": "Hallo, {USER}!"
+}
\ No newline at end of file
diff --git a/dash-frontend/assets/lang/en.json b/dash-frontend/assets/lang/en.json
index 0967ef4..d51ce4d 100644
--- a/dash-frontend/assets/lang/en.json
+++ b/dash-frontend/assets/lang/en.json
@@ -1 +1,9 @@
-{}
+{
+	"HOME_SCREEN": "Home",
+	"MONADO_RUNTIME": "„Monado” runtime",
+	"APPLICATIONS": "Applications",
+	"GAMES": "Games",
+	"SETTINGS": "Settings",
+	"PROCESSES": "Processes",
+	"HELLO_USER": "Hello, {USER}!"
+}
diff --git a/dash-frontend/assets/lang/es.json b/dash-frontend/assets/lang/es.json
new file mode 100644
index 0000000..74f2571
--- /dev/null
+++ b/dash-frontend/assets/lang/es.json
@@ -0,0 +1,9 @@
+{
+  "HOME_SCREEN": "Inicio",
+  "MONADO_RUNTIME": "„Monado” tiempo de ejecución",
+  "APPLICATIONS": "Aplicaciones",
+  "GAMES": "Juegos",
+  "SETTINGS": "Ajustes",
+  "PROCESSES": "Procesos",
+  "HELLO_USER": "¡Hola, {USER}!"
+}
\ No newline at end of file
diff --git a/dash-frontend/assets/lang/ja.json b/dash-frontend/assets/lang/ja.json
new file mode 100644
index 0000000..4ee2402
--- /dev/null
+++ b/dash-frontend/assets/lang/ja.json
@@ -0,0 +1,9 @@
+{
+  "HOME_SCREEN": "ホーム",
+  "MONADO_RUNTIME": "「Monado」ランタイム",
+  "APPLICATIONS": "アプリケーション",
+  "GAMES": "ゲーム",
+  "SETTINGS": "設定",
+  "PROCESSES": "プロセス",
+  "HELLO_USER": "こんにちは、{USER}！"
+}
\ No newline at end of file
diff --git a/dash-frontend/assets/lang/pl.json b/dash-frontend/assets/lang/pl.json
new file mode 100644
index 0000000..0f0db08
--- /dev/null
+++ b/dash-frontend/assets/lang/pl.json
@@ -0,0 +1,9 @@
+{
+  "HOME_SCREEN": "Ekran główny",
+  "MONADO_RUNTIME": "„Monado” środowisko uruchomieniowe",
+  "APPLICATIONS": "Aplikacje",
+  "GAMES": "Gry",
+  "SETTINGS": "Ustawienia",
+  "PROCESSES": "Procesy",
+  "HELLO_USER": "Witaj, {USER}!"
+}
\ No newline at end of file
diff --git a/dash-frontend/src/lib.rs b/dash-frontend/src/lib.rs
index a62c2e6..94e9d90 100644
--- a/dash-frontend/src/lib.rs
+++ b/dash-frontend/src/lib.rs
@@ -20,6 +20,7 @@ use crate::tab::{
 
 mod assets;
 mod tab;
+mod various;
 
 pub struct Frontend {
 	pub layout: RcLayout,
diff --git a/dash-frontend/src/tab/home.rs b/dash-frontend/src/tab/home.rs
index 0ddadf5..3844711 100644
--- a/dash-frontend/src/tab/home.rs
+++ b/dash-frontend/src/tab/home.rs
@@ -1,9 +1,14 @@
 use wgui::{
 	components::button::ComponentButton,
+	i18n::Translation,
 	parser::{ParseDocumentParams, ParserState},
+	widget::label::WidgetLabel,
 };
 
-use crate::tab::{Tab, TabParams, TabType};
+use crate::{
+	tab::{Tab, TabParams, TabType},
+	various,
+};
 
 pub struct TabHome {
 	#[allow(dead_code)]
@@ -16,6 +21,18 @@ impl Tab for TabHome {
 	}
 }
 
+fn configure_label_hello(label_hello: &mut WidgetLabel, i18n: &mut wgui::i18n::I18n) {
+	let mut username = various::get_username();
+	// first character as uppercase
+	if let Some(first) = username.chars().next() {
+		let first = first.to_uppercase().to_string();
+		username.replace_range(0..1, &first);
+	}
+
+	let translated = i18n.translate_and_replace("HELLO_USER", ("{USER}", &username));
+	label_hello.set_text_simple(i18n, Translation::from_raw_text(&translated));
+}
+
 impl TabHome {
 	pub fn new(params: TabParams) -> anyhow::Result<Self> {
 		let state = wgui::parser::parse_from_assets(
@@ -29,6 +46,9 @@ impl TabHome {
 			params.parent_id,
 		)?;
 
+		let mut label_hello = state.fetch_widget_as::<WidgetLabel>(&params.layout.state, "label_hello")?;
+		configure_label_hello(&mut label_hello, &mut params.globals.i18n());
+
 		let btn_apps = state.fetch_component_as::<ComponentButton>("btn_apps")?;
 		let btn_games = state.fetch_component_as::<ComponentButton>("btn_games")?;
 		let btn_monado = state.fetch_component_as::<ComponentButton>("btn_monado")?;
diff --git a/dash-frontend/src/various.rs b/dash-frontend/src/various.rs
new file mode 100644
index 0000000..7f48cee
--- /dev/null
+++ b/dash-frontend/src/various.rs
@@ -0,0 +1,6 @@
+pub fn get_username() -> String {
+	match std::env::var("USER") {
+		Ok(user) => user,
+		Err(_) => String::from("anonymous"),
+	}
+}
diff --git a/scripts/translator/main.ts b/scripts/translator/main.ts
index 1a6cdcf..082f24d 100644
--- a/scripts/translator/main.ts
+++ b/scripts/translator/main.ts
@@ -19,7 +19,7 @@ if (template_name === undefined) {
 }
 
 if (lang_path === undefined) {
-  console.log("LANG_PATH not set. Try \"LANG_PATH=../../uidev/assets/lang/ ./run.sh\"");
+  console.log("LANG_PATH is not set. Try one of these:\n\nLANG_PATH=../../uidev/assets/lang/ ./run.sh\nLANG_PATH=../../dash-frontend/assets/lang/ ./run.sh\n");
   exit(-1);
 }
 
diff --git a/wgui/src/i18n.rs b/wgui/src/i18n.rs
index a61cc02..eb22b63 100644
--- a/wgui/src/i18n.rs
+++ b/wgui/src/i18n.rs
@@ -77,10 +77,7 @@ impl I18n {
 		match lang.as_str() {
 			"en" | "pl" | "it" | "ja" | "es" => {}
 			_ => {
-				log::warn!(
-					"Unsupported language \"{}\", defaulting to \"en\".",
-					lang.as_str()
-				);
+				log::warn!("Unsupported language \"{}\", defaulting to \"en\".", lang.as_str());
 
 				lang = String::from("en");
 			}
@@ -111,4 +108,9 @@ impl I18n {
 		log::error!("missing translation for key \"{translation_key}\"");
 		Rc::from(translation_key) // show translation key as a fallback
 	}
+
+	pub fn translate_and_replace(&mut self, translation_key: &str, to_replace: (&str, &str)) -> String {
+		let translated = self.translate(translation_key);
+		translated.replace(to_replace.0, to_replace.1)
+	}
 }
diff --git a/wgui/src/parser/mod.rs b/wgui/src/parser/mod.rs
index 0c774ba..d042164 100644
--- a/wgui/src/parser/mod.rs
+++ b/wgui/src/parser/mod.rs
@@ -68,11 +68,11 @@ pub struct ParserState {
 impl ParserState {
 	pub fn fetch_component_by_id(&self, id: &str) -> anyhow::Result<Component> {
 		let Some(weak) = self.components_by_id.get(id) else {
-			anyhow::bail!("Component by ID \"{}\" doesn't exist", id);
+			anyhow::bail!("Component by ID \"{id}\" doesn't exist");
 		};
 
 		let Some(component) = weak.upgrade() else {
-			anyhow::bail!("Component by ID \"{}\" doesn't exist", id);
+			anyhow::bail!("Component by ID \"{id}\" doesn't exist");
 		};
 
 		Ok(Component(component))
@@ -80,11 +80,11 @@ impl ParserState {
 
 	pub fn fetch_component_by_widget_id(&self, widget_id: WidgetID) -> anyhow::Result<Component> {
 		let Some(weak) = self.components_by_widget_id.get(&widget_id) else {
-			anyhow::bail!("Component by widget ID \"{:?}\" doesn't exist", widget_id);
+			anyhow::bail!("Component by widget ID \"{widget_id:?}\" doesn't exist");
 		};
 
 		let Some(component) = weak.upgrade() else {
-			anyhow::bail!("Component by widget ID \"{:?}\" doesn't exist", widget_id);
+			anyhow::bail!("Component by widget ID \"{widget_id:?}\" doesn't exist");
 		};
 
 		Ok(Component(component))
@@ -94,7 +94,7 @@ impl ParserState {
 		let component = self.fetch_component_by_id(id)?;
 
 		if !(*component.0).as_any().is::<T>() {
-			anyhow::bail!("fetch_component_as({}): type not matching", id);
+			anyhow::bail!("fetch_component_as({id}): type not matching");
 		}
 
 		// safety: we already checked it above, should be safe to directly cast it
@@ -105,7 +105,7 @@ impl ParserState {
 		let component = self.fetch_component_by_widget_id(widget_id)?;
 
 		if !(*component.0).as_any().is::<T>() {
-			anyhow::bail!("fetch_component_by_widget_id({:?}): type not matching", widget_id);
+			anyhow::bail!("fetch_component_by_widget_id({widget_id:?}): type not matching");
 		}
 
 		// safety: we already checked it above, should be safe to directly cast it
@@ -115,22 +115,37 @@ impl ParserState {
 	pub fn get_widget_id(&self, id: &str) -> anyhow::Result<WidgetID> {
 		match self.ids.get(id) {
 			Some(id) => Ok(*id),
-			None => anyhow::bail!("Widget by ID \"{}\" doesn't exist", id),
+			None => anyhow::bail!("Widget by ID \"{id}\" doesn't exist"),
 		}
 	}
 
+	// returns widget and its id at once
 	pub fn fetch_widget(&self, state: &LayoutState, id: &str) -> anyhow::Result<WidgetPair> {
 		let widget_id = self.get_widget_id(id)?;
 		let widget = state
 			.widgets
 			.get(widget_id)
-			.ok_or_else(|| anyhow::anyhow!("fetch_widget({}): widget not found", id))?;
+			.ok_or_else(|| anyhow::anyhow!("fetch_widget({id}): widget not found"))?;
 		Ok(WidgetPair {
 			id: widget_id,
 			widget: widget.clone(),
 		})
 	}
 
+	pub fn fetch_widget_as<'a, T: 'static>(&self, state: &'a LayoutState, id: &str) -> anyhow::Result<RefMut<'a, T>> {
+		let widget_id = self.get_widget_id(id)?;
+		let widget = state
+			.widgets
+			.get(widget_id)
+			.ok_or_else(|| anyhow::anyhow!("fetch_widget_as({id}): widget not found"))?;
+
+		let casted = widget
+			.get_as_mut::<T>()
+			.ok_or_else(|| anyhow::anyhow!("fetch_widget_as({id}): failed to cast"))?;
+
+		Ok(casted)
+	}
+
 	pub fn process_template<U1, U2>(
 		&mut self,
 		doc_params: &ParseDocumentParams,
@@ -141,7 +156,7 @@ impl ParserState {
 		template_parameters: HashMap<Rc<str>, Rc<str>>,
 	) -> anyhow::Result<()> {
 		let Some(template) = self.templates.get(template_name) else {
-			anyhow::bail!("no template named \"{}\" found", template_name);
+			anyhow::bail!("no template named \"{template_name}\" found");
 		};
 
 		let mut ctx = ParserContext {
@@ -231,7 +246,7 @@ fn get_tag_by_name<'a>(node: &roxmltree::Node<'a, 'a>, name: &str) -> Option<rox
 }
 
 fn require_tag_by_name<'a>(node: &roxmltree::Node<'a, 'a>, name: &str) -> anyhow::Result<roxmltree::Node<'a, 'a>> {
-	get_tag_by_name(node, name).ok_or_else(|| anyhow::anyhow!("Tag \"{}\" not found", name))
+	get_tag_by_name(node, name).ok_or_else(|| anyhow::anyhow!("Tag \"{name}\" not found"))
 }
 
 fn print_invalid_attrib(key: &str, value: &str) {
diff --git a/wgui/src/parser/widget_label.rs b/wgui/src/parser/widget_label.rs
index 4f17cd5..b554e01 100644
--- a/wgui/src/parser/widget_label.rs
+++ b/wgui/src/parser/widget_label.rs
@@ -23,9 +23,15 @@ pub fn parse_widget_label<'a, U1, U2>(
 	for (key, value) in attribs {
 		match &*key {
 			"text" => {
-				params.content = Translation::from_raw_text(&value);
+				if !value.is_empty() {
+					params.content = Translation::from_raw_text(&value);
+				}
+			}
+			"translation" => {
+				if !value.is_empty() {
+					params.content = Translation::from_translation_key(&value);
+				}
 			}
-			"translation" => params.content = Translation::from_translation_key(&value),
 			_ => {}
 		}
 	}
diff --git a/wlx-overlay-s/src/assets/gui/watch.xml b/wlx-overlay-s/src/assets/gui/watch.xml
index 9ae2183..79f9af8 100644
--- a/wlx-overlay-s/src/assets/gui/watch.xml
+++ b/wlx-overlay-s/src/assets/gui/watch.xml
@@ -25,7 +25,7 @@
   <template name="Set">
     <Button macro="button_style" _press="::OverlayToggle ${handle}">
       <sprite width="40" height="40" color="~set_color" src="watch/set2.svg" />
-      <div position="absolute" margin_top="11" >
+      <div position="absolute" margin_top="11">
         <label text="${display}" size="24" color="#000000" weight="bold" />
       </div>
     </Button>
@@ -74,4 +74,4 @@
       </rectangle>
     </div>
   </elements>
-</layout>
+</layout>
\ No newline at end of file