Add bar position

Commons/Settings.qml

@@ -74,6 +74,7 @@ Singleton {
       property JsonObject bar
 
       bar: JsonObject {
+        property string barPosition: "top"  // Possible values: "top", "bottom", "left", "right"
         property bool showActiveWindow: true
         property bool showSystemInfo: false
         property bool showMedia: false

Modules/Background/ScreenCorners.qml

@@ -44,7 +44,11 @@ NLoader {
 
       margins {
         top: (Settings.data.bar.monitors.includes(modelData.name)
-              || (Settings.data.bar.monitors.length === 0)) ? Math.floor(Style.barHeight * scaling) : 0
+              || (Settings.data.bar.monitors.length === 0)) && Settings.data.bar.barPosition === "top" 
+              ? Math.floor(Style.barHeight * scaling) : 0
+        bottom: (Settings.data.bar.monitors.includes(modelData.name)
+              || (Settings.data.bar.monitors.length === 0)) && Settings.data.bar.barPosition === "bottom" 
+              ? Math.floor(Style.barHeight * scaling) : 0
       }
 
       // Source we want to show only as a ring

Modules/Bar/Bar.qml

@@ -25,7 +25,8 @@ Variants {
                           || (Settings.data.bar.monitors.length === 0)) : false
 
     anchors {
-      top: true
+      top: Settings.data.bar.barPosition === "top"
+      bottom: Settings.data.bar.barPosition === "bottom"
       left: true
       right: true
     }

Modules/Bar/BluetoothMenu.qml

@@ -73,10 +73,14 @@ NLoader {
         border.width: Math.max(1, Style.borderS * scaling)
         width: 380 * scaling
         height: 500 * scaling
-        anchors.top: parent.top
+        anchors {
-        anchors.right: parent.right
+          right: parent.right
-        anchors.topMargin: Style.marginXS * scaling
+          rightMargin: Style.marginXS * scaling
-        anchors.rightMargin: Style.marginXS * scaling
+          top: Settings.data.bar.barPosition === "top" ? parent.top : undefined
+          bottom: Settings.data.bar.barPosition === "bottom" ? parent.bottom : undefined
+          topMargin: Settings.data.bar.barPosition === "top" ? Style.marginXS * scaling : undefined
+          bottomMargin: Settings.data.bar.barPosition === "bottom" ? Style.barHeight * scaling + Style.marginXS * scaling : undefined
+        }
 
         // Animation properties
         property real scaleValue: 0.8

Modules/Bar/Clock.qml

@@ -20,6 +20,7 @@ Rectangle {
       id: tooltip
       text: Time.dateString
       target: clock
+      positionAbove: Settings.data.bar.barPosition === "bottom"
     }
 
     onEntered: {

Modules/Bar/Tray.qml

@@ -119,6 +119,7 @@ Rectangle {
           id: trayTooltip
           target: trayIcon
           text: modelData.tooltipTitle || modelData.name || modelData.id || "Tray Item"
+          positionAbove: Settings.data.bar.barPosition === "bottom"
         }
       }
     }

Modules/Bar/WiFiMenu.qml

@@ -88,10 +88,14 @@ NLoader {
         border.width: Math.max(1, Style.borderS * scaling)
         width: 340 * scaling
         height: 500 * scaling
-        anchors.top: parent.top
+        anchors {
-        anchors.right: parent.right
+          right: parent.right
-        anchors.topMargin: Style.marginXS * scaling
+          rightMargin: Style.marginXS * scaling
-        anchors.rightMargin: Style.marginXS * scaling
+          top: Settings.data.bar.barPosition === "top" ? parent.top : undefined
+          bottom: Settings.data.bar.barPosition === "bottom" ? parent.bottom : undefined
+          topMargin: Settings.data.bar.barPosition === "top" ? Style.marginXS * scaling : undefined
+          bottomMargin: Settings.data.bar.barPosition === "bottom" ? Style.barHeight * scaling + Style.marginXS * scaling : undefined
+        }
 
         // Animation properties
         property real scaleValue: 0.8

Modules/SettingsPanel/Tabs/BarTab.qml

@@ -40,6 +40,44 @@ ColumnLayout {
           color: Color.mOnSurface
         }
 
+        ColumnLayout {
+          spacing: Style.marginXXS * scaling
+          Layout.fillWidth: true
+
+          NText {
+            text: "Bar Position"
+            font.pointSize: Style.fontSizeL * scaling
+            font.weight: Style.fontWeightBold
+            color: Color.mOnSurface
+          }
+
+          NText {
+            text: "Choose where to place the bar on the screen"
+            font.pointSize: Style.fontSizeXS * scaling
+            color: Color.mOnSurfaceVariant
+            wrapMode: Text.WordWrap
+            Layout.fillWidth: true
+          }
+
+          NComboBox {
+            Layout.fillWidth: true
+            model: ListModel {
+              ListElement {
+                key: "top"
+                name: "Top"
+              }
+              ListElement {
+                key: "bottom"
+                name: "Bottom"
+              }
+            }
+            currentKey: Settings.data.bar.barPosition
+            onSelected: function (key) {
+              Settings.data.bar.barPosition = key
+            }
+          }
+        }
+
         NToggle {
           label: "Show Active Window"
           description: "Display the title of the currently focused window on the left side of the bar."

Modules/SidePanel/SidePanel.qml

@@ -90,8 +90,12 @@ NLoader {
         property real innerMargin: sidePanel.cardSpacing
         // Height scales to content plus vertical padding
         height: content.implicitHeight + innerMargin * 2
-        // Place the panel just below the bar (overlay content starts below bar due to topMargin)
+        // Place the panel relative to the bar based on its position
-        y: Style.marginS * scaling
+        y: Settings.data.bar.barPosition === "top" ? Style.marginS * scaling : undefined
+        anchors {
+          bottom: Settings.data.bar.barPosition === "bottom" ? parent.bottom : undefined
+          bottomMargin: Settings.data.bar.barPosition === "bottom" ? Style.barHeight * scaling + Style.marginS * scaling : undefined
+        }
         // Center horizontally under the anchorX, clamped to the screen bounds
         x: Math.max(Style.marginS * scaling, Math.min(parent.width - width - Style.marginS * scaling,
                                                       Math.round(anchorX - width / 2)))

Widgets/NIconButton.qml

@@ -51,7 +51,7 @@ Rectangle {
   NTooltip {
     id: tooltip
     target: root
-    positionAbove: false
+    positionAbove: Settings.data.bar.barPosition === "bottom"
     text: root.tooltipText
   }
 

Widgets/NPill.qml

@@ -168,7 +168,7 @@ Item {
 
   NTooltip {
     id: tooltip
-    positionAbove: false
+    positionAbove: Settings.data.bar.barPosition === "bottom"
     target: pill
     delay: Style.tooltipDelayLong
     text: root.tooltipText