Replace bar settings with inline config panel

2026-05-27 15:11:36 +02:00
parent eef5668d89
commit bc32980cca
24 changed files with 377 additions and 1788 deletions
@@ -0,0 +1,246 @@
+import QtQuick
+import qs.Commons
+import qs.Ui
+
+Panel {
+  id: root
+
+  moduleName: "omarchy.bar-config"
+  manageIpc: false
+
+  property Item anchorItem: null
+  property string focusSection: "transparency"
+  property int positionIndex: 0
+  property bool cursorActive: false
+  property int phraseIndex: 0
+
+  readonly property string currentPosition: bar ? bar.position : "top"
+  readonly property bool transparent: bar ? bar.requestedTransparent === true : false
+  readonly property color foreground: bar ? bar.foreground : Color.foreground
+  readonly property string fontFamily: bar ? bar.fontFamily : Style.font.family
+  readonly property var heroPhrases: [
+    "Picking Sides",
+    "Choose Transparency",
+    "Edge Decisions",
+    "Bar Exam",
+    "Top Shelf Thinking",
+    "Side Quest Settings"
+  ]
+  readonly property string heroPhraseText: heroPhrases[phraseIndex % heroPhrases.length]
+  readonly property var positionOptions: [
+    { value: "top", label: "Top" },
+    { value: "bottom", label: "Bottom" },
+    { value: "left", label: "Left" },
+    { value: "right", label: "Right" }
+  ]
+
+  function normalizePosition(value) {
+    var next = String(value || "")
+    return /^(top|bottom|left|right)$/.test(next) ? next : "top"
+  }
+
+  function positionLabel(value) {
+    var next = normalizePosition(value)
+    return next.charAt(0).toUpperCase() + next.slice(1)
+  }
+
+  function currentPositionIndex() {
+    var current = normalizePosition(currentPosition)
+    for (var i = 0; i < positionOptions.length; i++)
+      if (positionOptions[i].value === current) return i
+    return 0
+  }
+
+  function mutateBarConfig(mutator) {
+    if (!bar || !bar.shell || typeof bar.shell.mutateShellConfig !== "function") return false
+    bar.shell.mutateShellConfig(function(config) {
+      if (!Util.isPlainObject(config.bar)) config.bar = {}
+      mutator(config.bar)
+    })
+    return true
+  }
+
+  function setTransparency(value) {
+    var next = value === true
+    if (mutateBarConfig(function(barConfig) { barConfig.transparent = next })) return
+    if (bar && typeof bar.setRequestedTransparency === "function") bar.setRequestedTransparency(next)
+  }
+
+  function setPosition(value) {
+    var next = normalizePosition(value)
+    if (mutateBarConfig(function(barConfig) { barConfig.position = next })) return
+    if (bar) bar.position = next
+  }
+
+  function moveCursor(dx, dy) {
+    if (!cursorActive) {
+      cursorActive = true
+      return
+    }
+
+    if (dy !== 0) {
+      focusSection = focusSection === "transparency" ? "position" : "transparency"
+      if (focusSection === "position") positionIndex = currentPositionIndex()
+      return
+    }
+
+    if (dx !== 0 && focusSection === "position") {
+      var count = positionOptions.length
+      positionIndex = (positionIndex + (dx > 0 ? 1 : -1) + count) % count
+    }
+  }
+
+  function activateCursor() {
+    if (focusSection === "transparency") {
+      setTransparency(!transparent)
+      return
+    }
+
+    var option = positionOptions[positionIndex]
+    if (option) setPosition(option.value)
+  }
+
+  onOpenedChanged: {
+    if (!opened) return
+    focusSection = "transparency"
+    positionIndex = currentPositionIndex()
+    cursorActive = false
+  }
+
+  onCurrentPositionChanged: if (!cursorActive || focusSection === "position") positionIndex = currentPositionIndex()
+
+  Timer {
+    id: phraseTimer
+    interval: 2200
+    running: root.opened
+    repeat: true
+    onTriggered: phraseSwap.restart()
+  }
+
+  SequentialAnimation {
+    id: phraseSwap
+    PropertyAnimation {
+      target: hero; property: "metaOpacity"
+      to: 0.0; duration: 180; easing.type: Easing.OutQuad
+    }
+    ScriptAction {
+      script: root.phraseIndex = (root.phraseIndex + 1) % root.heroPhrases.length
+    }
+    PropertyAnimation {
+      target: hero; property: "metaOpacity"
+      to: 1.0; duration: 260; easing.type: Easing.InQuad
+    }
+  }
+
+  Component {
+    id: heroIconComponent
+
+    Text {
+      text: ""
+      color: root.foreground
+      font.family: root.fontFamily
+      font.pixelSize: Style.font.display
+    }
+  }
+
+  KeyboardPanel {
+    id: panel
+
+    anchorItem: root.anchorItem
+    owner: root
+    bar: root.bar
+    open: root.opened && root.anchorItem !== null
+    focusTarget: keyCatcher
+    contentWidth: panel.fittedContentWidth(Style.space(380))
+    contentHeight: panel.fittedContentHeight(contentColumn.implicitHeight)
+
+    PanelKeyCatcher {
+      id: keyCatcher
+
+      anchors.fill: parent
+      onMoveRequested: function(dx, dy) { root.moveCursor(dx, dy) }
+      onActivateRequested: root.activateCursor()
+      onCloseRequested: root.close()
+
+      Column {
+        id: contentColumn
+
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+        spacing: Style.space(14)
+
+        PanelHero {
+          id: hero
+
+          width: parent.width
+          iconComponent: heroIconComponent
+          title: "Bar"
+          meta: root.heroPhraseText
+          foreground: root.foreground
+          fontFamily: root.fontFamily
+        }
+
+        Column {
+          width: parent.width
+          spacing: Style.space(8)
+
+          PanelSectionHeader {
+            text: "APPEARANCE"
+            foreground: root.foreground
+            fontFamily: root.fontFamily
+          }
+
+          Toggle {
+            width: parent.width
+            label: "Transparency"
+            description: root.transparent ? "Wallpaper visible" : "Solid background"
+            checked: root.transparent
+            hasCursor: root.cursorActive && root.focusSection === "transparency"
+            foreground: root.foreground
+            accent: Color.accent
+            fontFamily: root.fontFamily
+            onClicked: root.setTransparency(!root.transparent)
+            onHovered: function(h) {
+              if (!h) return
+              root.cursorActive = true
+              root.focusSection = "transparency"
+            }
+          }
+        }
+
+        Column {
+          width: parent.width
+          spacing: Style.space(8)
+
+          PanelSectionHeader {
+            text: "POSITION"
+            foreground: root.foreground
+            fontFamily: root.fontFamily
+          }
+
+          ButtonGroup {
+            id: positionGroup
+
+            width: parent.width
+            options: root.positionOptions
+            value: root.currentPosition
+            foreground: root.foreground
+            background: "transparent"
+            accent: Color.accent
+            fontFamily: root.fontFamily
+            focusable: false
+            cursorIndex: root.cursorActive && root.focusSection === "position" ? root.positionIndex : -1
+            onChanged: function(value) { root.setPosition(value) }
+            onHovered: function(index, hovered) {
+              if (!hovered) return
+              root.cursorActive = true
+              root.focusSection = "position"
+              root.positionIndex = index
+            }
+          }
+        }
+      }
+    }
+  }
+}