dash-frontend: Top panel title

dash-frontend/assets/gui/dashboard.xml

@@ -3,6 +3,7 @@
 
   <theme>
     <var key="side_size" value="48" />
+    <var key="top_size" value="40" />
     <var key="side_sprite_size" value="26" />
     <var key="side_button_size" value="48" />
   </theme>
@@ -25,13 +26,6 @@
   </template>
 
   <elements>
-    <div position="absolute" width="100%" justify_content="space_between">
-      <div />
-      <div padding="6">
-        <Button id="btn_close" sprite_src_builtin="dashboard/close.svg" color="#000000" border="2" border_color="~color_faded" />
-      </div>
-    </div>
-
     <!-- left/right separator (menu and rest) -->
     <div flex_direction="row" gap="8" width="100%" height="100%" padding="4" interactable="0">
       <!-- LEFT MENU -->
@@ -60,15 +54,29 @@
         </rectangle>
       </div>
       <!-- REST -->
-      <!-- content/bottom panel separator -->
+      <!-- top/content/bottom panel separator -->
       <div
         flex_direction="column"
         gap="8"
         width="100%"
         height="100%"
         overflow_x="scroll">
-        <!-- CONTENT -->
+        <!-- TOP PANEL -->
+        <div position="relative" width="100%" height="~top_size" min_height="~top_size" max_height="~top_size" justify_content="end">
+          <!-- Title bar -->
+          <div width="100%" align_items="center" justify_content="center">
+            <rectangle min_width="300" height="100%" consume_mouse_events="1" round="100%" color="~color_top_panel" align_items="center" justify_content="center" gap="8">
+              <sprite id="sprite_titlebar_icon" width="28" height="28" />
+              <label id="label_titlebar_title" weight="bold" size="16" text="Title" />
+            </rectangle>
+          </div>
+          <!-- Close button -->
+          <Button position="absolute" id="btn_close" color="~color_top_panel" round="100%" width="~top_size" height="~top_size" tooltip="CLOSE_WINDOW" tooltip_side="left">
+            <sprite src_builtin="dashboard/close.svg" width="32" height="32" />
+          </Button>
+        </div>
 
+        <!-- CONTENT -->
         <!-- color and color2 alpha will be modified at runtime -->
         <rectangle
           id="rect_content"

dash-frontend/assets/gui/tab/apps.xml

@@ -1,5 +1,4 @@
 <layout>
-  <include src="t_tab_title.xml" />
   <include src="../theme.xml" />
 
   <template name="AppEntry">
@@ -25,7 +24,6 @@
   </template>
 
   <elements>
-    <TabTitle translation="APPLICATIONS" icon="dashboard/apps.svg" />
     <!-- placeholders for now -->
     <!--
     <div gap="4" align_items="center">

dash-frontend/assets/gui/tab/games.xml

@@ -1,9 +1,7 @@
 <layout>
-  <include src="t_tab_title.xml" />
   <include src="../t_group_box.xml" />
 
   <elements>
-    <TabTitle translation="GAMES" icon="dashboard/games.svg" />
     <rectangle macro="group_box" id="running_games_list_parent" align_self="center" />
     <div id="game_list_parent" align_items="center" />
   </elements>

dash-frontend/assets/gui/tab/monado.xml

@@ -1,8 +1,6 @@
 <layout>
-  <include src="t_tab_title.xml" />
   <include src="../t_group_box.xml" />
 
-
   <!-- key: str, value: str -->
   <template name="BoolFlag">
     <div flex_direction="row" gap="4">
@@ -27,7 +25,6 @@
   </template>
 
   <elements>
-    <TabTitle translation="MONADO_RUNTIME" icon="dashboard/monado.svg" />
     <label translation="DISPLAY_BRIGHTNESS" />
     <Slider id="slider_brightness" width="300" height="24" min_value="0" max_value="140" />
 

dash-frontend/assets/gui/tab/settings.xml

@@ -1,5 +1,4 @@
 <layout>
-  <include src="t_tab_title.xml" />
   <include src="../t_group_box.xml" />
   <include src="../t_dropdown_button.xml" />
 
@@ -46,7 +45,6 @@
   </template>
 
   <elements>
-    <TabTitle translation="SETTINGS" icon="dashboard/settings.svg" />
     <div gap="4">
       <Tabs id="tabs">
         <Tab name="look_and_feel" translation="APP_SETTINGS.LOOK_AND_FEEL" sprite_src_builtin="dashboard/palette.svg" />

dash-frontend/assets/gui/tab/t_tab_title.xml

@@ -1,9 +0,0 @@
-<layout>
-  <!-- translation, icon -->
-  <template name="TabTitle">
-    <div gap="8" align_items="center">
-      <sprite src_builtin="${icon}" width="24" height="24" />
-      <label translation="${translation}" size="18" weight="bold" />
-    </div>
-  </template>
-</layout>

dash-frontend/assets/gui/theme.xml

@@ -2,6 +2,7 @@
   <theme>
     <var key="color_menu_dark" value="#0A0A0ACC" />
     <var key="color_accent" value="#008cff" />
+    <var key="color_top_panel" value="#00000099" />
     <var key="color_bottom_panel" value="#141e28" />
   </theme>
 </layout>