From 1f243b63b6001961eeef45308655f50ba5666047 Mon Sep 17 00:00:00 2001
From: chatlanin <zimin@chatlanin.su>
Date: Sat, 14 Nov 2026 10:59:48 +0300
Subject: [PATCH] add tabs component

---
 CMakeLists.txt          |  2 ++
 Main.qml                | 18 +++++++++--
 qml/components/Line.qml |  9 ++++++
 qml/components/Tabs.qml | 67 +++++++++++++++++++++++++++++++++++++++++
 4 files changed, 93 insertions(+), 3 deletions(-)
 create mode 100644 qml/components/Line.qml
 create mode 100644 qml/components/Tabs.qml

diff --git a/CMakeLists.txt b/CMakeLists.txt
index 0c7c6b8..7ab2dab 100644
--- a/CMakeLists.txt
+++ b/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
diff --git a/Main.qml b/Main.qml
index a1a915e..4fd1c5e 100644
--- a/Main.qml
+++ b/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
+    }
   }
 }
diff --git a/qml/components/Line.qml b/qml/components/Line.qml
new file mode 100644
index 0000000..9bb8334
--- /dev/null
+++ b/qml/components/Line.qml
@@ -0,0 +1,9 @@
+import QtQuick
+import QtQuick.Layouts
+
+Rectangle {
+  id: root
+  Layout.fillWidth: true
+  implicitHeight: 1
+  color: Theme.color4
+}
diff --git a/qml/components/Tabs.qml b/qml/components/Tabs.qml
new file mode 100644
index 0000000..1f3a5fe
--- /dev/null
+++ b/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
+  }
+}