add tabs component

CMakeLists.txt

@@ -25,6 +25,8 @@ qt_add_qml_module(apparchpack
     qml/style/Theme.qml
     qml/buttons/Settings.qml
     qml/components/Title.qml
+    qml/components/Line.qml
+    qml/components/Tabs.qml
   SOURCES
     cpp/utils/utils.hpp
     cpp/utils/utils.cpp

Main.qml

@@ -1,5 +1,5 @@
 import QtQuick
-import QtQuick.Controls.Basic
+import QtQuick.Controls
 import QtQuick.Layouts
 
 import archpack
@@ -8,7 +8,6 @@ import "qml/buttons" as Buttons
 
 ApplicationWindow {
   id: root
-
   title: "Arch Linux Updater"
   width: 740
   height: 960
@@ -27,17 +26,30 @@ ApplicationWindow {
 
     RowLayout {
       id: headerLayout
-      Layout.alignment: Qt.AlignTop
       Layout.maximumWidth: Number.POSITIVE_INFINITY
 
       Components.Title {
         id: title
         Layout.maximumWidth: Number.POSITIVE_INFINITY
+        Layout.alignment: Qt.AlignBottom
       }
 
       Buttons.Settings {
         id: settingsButton
-      }
+        Layout.alignment: Qt.AlignBottom
+      }
+    }
+
+    Components.Line { id: line }
+
+    Components.Tabs {
+      id: tabs
+      Layout.alignment: Qt.AlignTop
+      parentWidth: mainLayout.width
+    }
+
+    Item {
+      Layout.fillHeight: true
     }
   }
 }

qml/components/Line.qml

@@ -0,0 +1,9 @@
+import QtQuick
+import QtQuick.Layouts
+
+Rectangle {
+  id: root
+  Layout.fillWidth: true
+  implicitHeight: 1
+  color: Theme.color4
+}

qml/components/Tabs.qml

@@ -0,0 +1,67 @@
+import QtQuick
+import QtQuick.Controls
+
+TabBar {
+  id: root
+
+  property int parentWidth: 0
+
+  // Общее подчеркивание всех табов
+  background: Rectangle {
+    color: Theme.colorTransparent
+
+    Rectangle {
+      anchors.left: parent.left
+      anchors.right: parent.right
+      anchors.bottom: parent.bottom
+      height: 1
+      color: Theme.color4
+    }
+  }
+
+  component TabElement: TabButton {
+    id: tabElement
+    padding: 10
+
+    contentItem: Text {
+      text: tabElement.text
+      color: tabElement.checked ? "#cdd6f4" : "#a6adc8"
+      font.pixelSize: 13
+      font.bold: tabElement.checked
+      horizontalAlignment: Text.AlignHCenter
+      verticalAlignment: Text.AlignVCenter
+    }
+
+    background: Rectangle {
+      radius: 3
+      color: Theme.colorTransparent
+
+      // Подчёркивание активного таба
+      Rectangle {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        anchors.margins: 0
+        height: 1
+        radius: 1
+        color: "#89b4fa"
+        visible: tabElement.checked
+      }
+    }
+  }
+
+  TabElement {
+    text: "Обновление"
+    width: root.parentWidth / 3
+  }
+
+  TabElement {
+    text: "Установка"
+    width: root.parentWidth / 3
+  }
+
+  TabElement {
+    text: "Удаление"
+    width: root.parentWidth / 3
+  }
+}