dash-frontend: tab titles, home screen username

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>

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>

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>

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>

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>

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>

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>

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>

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>