feat: Implement Topbar Autohide options

Common/SettingsData.qml

@@ -90,6 +90,7 @@ Singleton {
   property bool dockAutoHide: false
   property real cornerRadius: 12
   property bool notificationOverlayEnabled: false
+  property bool topBarAutoHide: false
 
   readonly property string defaultFontFamily: "Inter Variable"
   readonly property string defaultMonoFontFamily: "Fira Code"
@@ -255,6 +256,7 @@ Singleton {
         dockAutoHide = settings.dockAutoHide !== undefined ? settings.dockAutoHide : false
         cornerRadius = settings.cornerRadius !== undefined ? settings.cornerRadius : 12
         notificationOverlayEnabled = settings.notificationOverlayEnabled !== undefined ? settings.notificationOverlayEnabled : false
+        topBarAutoHide = settings.topBarAutoHide !== undefined ? settings.topBarAutoHide : false
         applyStoredTheme()
         detectAvailableIconThemes()
         detectQtTools()
@@ -324,7 +326,8 @@ Singleton {
                                           "showDock": showDock,
                                           "dockAutoHide": dockAutoHide,
                                           "cornerRadius": cornerRadius,
-                                          "notificationOverlayEnabled": notificationOverlayEnabled
+                                          "notificationOverlayEnabled": notificationOverlayEnabled,
+                                          "topBarAutoHide": topBarAutoHide
                                         }, null, 2))
   }
 
@@ -746,6 +749,11 @@ Singleton {
     saveSettings()
   }
 
+  function setTopBarAutoHide(enabled) {
+    topBarAutoHide = enabled
+    saveSettings()
+  }
+
   function _shq(s) {
     return "'" + String(s).replace(/'/g, "'\\''") + "'"
   }

Modules/Settings/PersonalizationTab.qml

@@ -46,6 +46,11 @@ Item {
         sourceComponent: dynamicThemeComponent
       }
 
+      Loader {
+        width: parent.width
+        sourceComponent: topBarAutoHideComponent
+      }
+
       Loader {
         width: parent.width
         sourceComponent: notificationOverlayComponent
@@ -949,4 +954,69 @@ Item {
       }
     }
   }
+
+  // TopBar Auto-hide Component
+  Component {
+    id: topBarAutoHideComponent
+
+    StyledRect {
+      width: parent.width
+      height: topBarAutoHideSection.implicitHeight + Theme.spacingL * 2
+      radius: Theme.cornerRadius
+      color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
+                     Theme.surfaceVariant.b, 0.3)
+      border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
+                            Theme.outline.b, 0.2)
+      border.width: 1
+
+      Column {
+        id: topBarAutoHideSection
+
+        anchors.fill: parent
+        anchors.margins: Theme.spacingL
+        spacing: Theme.spacingM
+
+        Row {
+          width: parent.width
+          spacing: Theme.spacingM
+
+          DankIcon {
+            name: "visibility_off"
+            size: Theme.iconSize
+            color: Theme.primary
+            anchors.verticalCenter: parent.verticalCenter
+          }
+
+          Column {
+            width: parent.width - Theme.iconSize - Theme.spacingM - autoHideToggle.width - Theme.spacingM
+            spacing: Theme.spacingXS
+            anchors.verticalCenter: parent.verticalCenter
+
+            StyledText {
+              text: "TopBar Auto-hide"
+              font.pixelSize: Theme.fontSizeLarge
+              font.weight: Font.Medium
+              color: Theme.surfaceText
+            }
+
+            StyledText {
+              text: "Automatically hide the top bar to expand screen real estate"
+              font.pixelSize: Theme.fontSizeSmall
+              color: Theme.surfaceVariantText
+              wrapMode: Text.WordWrap
+              width: parent.width
+            }
+          }
+
+          DankToggle {
+            id: autoHideToggle
+
+            anchors.verticalCenter: parent.verticalCenter
+            checked: SettingsData.topBarAutoHide
+            onToggled: toggled => SettingsData.setTopBarAutoHide(toggled)
+          }
+        }
+      }
+    }
+  }
 }

Modules/TopBar/TopBar.qml

@@ -20,6 +20,8 @@ PanelWindow {
     property string screenName: modelData.name
     property real backgroundTransparency: SettingsData.topBarTransparency
     readonly property int notificationCount: NotificationService.notifications.length
+    property bool autoHide: SettingsData.topBarAutoHide
+    property bool reveal: !autoHide || topBarMouseArea.containsMouse
 
     screen: modelData
     implicitHeight: Theme.barHeight - 4
@@ -117,6 +119,45 @@ PanelWindow {
         right: true
     }
 
+    exclusiveZone: autoHide ? -1 : Theme.barHeight - 4
+
+    mask: Region {
+        item: topBarMouseArea
+    }
+
+    MouseArea {
+        id: topBarMouseArea
+        height: root.reveal ? Theme.barHeight - 4 : 4
+        anchors {
+            top: parent.top
+            left: parent.left
+            right: parent.right
+        }
+        hoverEnabled: true
+
+        Behavior on height {
+            NumberAnimation {
+                duration: 200
+                easing.type: Easing.OutCubic
+            }
+        }
+
+        Item {
+            id: topBarContainer
+            anchors.fill: parent
+
+            transform: Translate {
+                id: topBarSlide
+                y: root.reveal ? 0 : -(Theme.barHeight - 8)
+
+                Behavior on y {
+                    NumberAnimation {
+                        duration: 200
+                        easing.type: Easing.OutCubic
+                    }
+                }
+            }
+
             Item {
                 anchors.fill: parent
                 anchors.margins: 2
@@ -871,3 +912,5 @@ PanelWindow {
                 }
             }
         }
+    }
+}