Revises Slint menu (#1119)

gui/ui/main.slint

@@ -2,6 +2,7 @@ import { Tabs } from "main/tabs.slint";
 import { Actions } from "main/actions.slint";
 import { Wizard, FileValidationResult } from "wizard.slint";
 import { Globals } from "globals.slint";
+import { VerticalBox } from "std-widgets.slint";
 
 export { Wizard, FileValidationResult, Globals }
 
@@ -24,7 +25,7 @@ export component MainWindow inherits Window {
     pure callback open_system_folder();
     pure callback quit();
 
-    VerticalLayout {
+    VerticalBox {
         Tabs {
             devices: devices;
         }

gui/ui/main/actions.slint

@@ -6,6 +6,8 @@ export component Actions {
     pure callback start_game();
 
     HorizontalBox {
+        padding: 0;
+
         ComboBox {
             model: profiles;
             horizontal-stretch: 1;

gui/ui/main/menu.slint

@@ -1,52 +1,97 @@
 import { Button, StandardButton, AboutSlint, HorizontalBox, Palette, VerticalBox } from "std-widgets.slint";
 import { Globals } from "../globals.slint";
 
-component MenuItem inherits Rectangle {
-    background: Palette.background;
+enum Page {
+    Help,
+    About
+}
 
-    in property <string> title;
+component SideBarItem {
+    in property <bool> selected;
+    in-out property <string> text <=> label.text;
 
-    Button {
-        text: title;
-        clicked => {
-            submenu.show();
+    callback clicked <=> touch.clicked;
+
+    min-height: l.preferred-height;
+
+    states [
+        pressed when touch.pressed: {
+            state.opacity: 0.8;
         }
+        hover when touch.has-hover: {
+            state.opacity: 0.6;
+        }
+        selected when root.selected: {
+            state.opacity: 1;
+        }
+    ]
+
+    state := Rectangle {
+        opacity: 0;
+        background: Palette.background;
+
+        animate opacity { duration: 150ms; }
     }
 
-    submenu := PopupWindow {
-        x: parent.x + parent.width;
+    l := HorizontalBox {
+        label := Text { }
+    }
 
-        VerticalLayout {
-            spacing: 0;
-
-            @children
-        }
+    touch := TouchArea {
+        width: 100%;
+        height: 100%;
     }
 }
 
-component BaseDialog inherits PopupWindow {
+component SideBar {
+    out property <Page> current-page;
+
+    width: 180px;
+
     Rectangle {
-        background: Palette.background;
+        background: Palette.background.darker(0.2);
+    }
 
-        VerticalBox {
-            @children
+    VerticalLayout {
+        alignment: start;
 
-            HorizontalBox {
-                StandardButton {
-                    kind: ok;
-                }
+        SideBarItem {
+            text: "Help";
+            selected: root.current-page == Page.Help;
+            clicked => {
+                root.current-page = Page.Help;
+            }
+        }
+
+        SideBarItem {
+            text: "About";
+            selected: root.current-page == Page.About;
+            clicked => {
+                root.current-page = Page.About;
             }
         }
     }
 }
 
-component AboutDialog inherits BaseDialog {
-    Text {
-        text: "Obliteration is a free and open-source software for playing your PlayStation 4 titles on PC.";
+component Help {
+    Button {
+        text: "Report an Issue";
+        clicked => {
+            Globals.open_url("https://github.com/obhq/obliteration/issues/new");
+        }
     }
 }
 
-component LogsDialog inherits BaseDialog { }
+component About {
+    VerticalLayout {
+        Text {
+            text: "Obliteration is a free and open-source software for playing your PlayStation 4 titles on PC.";
+            horizontal-alignment: center;
+        }
+
+        AboutSlint { }
+    }
+}
 
 export component Menu {
     in property <length> popup_width;
@@ -54,101 +99,12 @@ export component Menu {
     in property <length> popup_x;
     in property <length> popup_y;
 
-    pure callback quit();
-    pure callback open_new_issue_link();
-    pure callback open_system_folder();
-
-    about_dialog := AboutDialog {
-        width: popup_width;
-        height: popup_height;
-        x: popup_x;
-        y: popup_y;
-    }
-
-    about_slint := PopupWindow {
-        width: popup_width;
-        height: popup_height;
-        x: popup_x;
-        y: popup_y;
-
-        Rectangle {
-            background: Palette.background;
-
-            AboutSlint { }
-        }
-    }
-
-    logs := LogsDialog {
-        width: popup_width;
-        height: popup_height;
-        x: popup_x;
-        y: popup_y;
-    }
-
     HorizontalBox {
-        alignment: start;
+        padding: 0;
 
-        Rectangle {
-            background: Palette.background;
+        nav := SideBar { }
 
-            VerticalLayout {
-                alignment: start;
-                spacing: 0;
-
-                MenuItem {
-                    title: "File";
-
-                    Button {
-                        text: "Open System Folder";
-                        clicked => {
-                            open_system_folder();
-                        }
-                    }
-
-                    Button {
-                        text: "Quit";
-                        clicked => {
-                            quit()
-                        }
-                    }
-                }
-
-                MenuItem {
-                    title: "View";
-
-                    Button {
-                        text: "Logs";
-                        clicked => {
-                            logs.show();
-                        }
-                    }
-                }
-
-                MenuItem {
-                    title: "Help";
-
-                    Button {
-                        text: "Report an Issue";
-                        clicked => {
-                            Globals.open_url("https://github.com/obhq/obliteration/issues/new");
-                        }
-                    }
-
-                    Button {
-                        text: "About Slint";
-                        clicked => {
-                            about_slint.show();
-                        }
-                    }
-
-                    Button {
-                        text: "About Obliteration";
-                        clicked => {
-                            about_dialog.show();
-                        }
-                    }
-                }
-            }
-        }
+        if nav.current-page == Page.Help: Help { }
+        if nav.current-page == Page.About: About { }
     }
 }

gui/ui/main/tabs.slint

@@ -1,5 +1,4 @@
-
-import { TabWidget, Button, HorizontalBox } from "std-widgets.slint";
+import { Button, HorizontalBox, VerticalBox } from "std-widgets.slint";
 import { DisplayTab } from "tabs/display.slint";
 import { CpuTab } from "tabs/cpu.slint";
 import { Menu } from "menu.slint";
@@ -15,8 +14,12 @@ export component Tabs {
 
     property <Tab> tab: Tab.Display;
 
-    VerticalLayout {
+    VerticalBox {
+        padding: 0;
+
         HorizontalBox {
+            padding: 0;
+
             Button {
                 icon: @image-url("menu.svg");
                 primary: root.tab == Tab.Menu;

gui/ui/main/tabs/cpu.slint

@@ -2,6 +2,8 @@ import { Button, Slider, LineEdit, HorizontalBox, VerticalBox } from "std-widget
 
 export component CpuTab {
     HorizontalBox {
+        padding: 0;
+
         VerticalBox {
             alignment: start;
 

gui/ui/main/tabs/display.slint

@@ -4,6 +4,8 @@ export component DisplayTab {
     in property <[string]> devices: [];
 
     HorizontalBox {
+        padding: 0;
+
         VerticalBox {
             alignment: start;