make config use json instead of shitty qt implementation

modules/bar/#Bat.qml#

@@ -0,0 +1,52 @@
+import Quickshell.Services.UPower
+import Quickshell
+import Quickshell.Widgets
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Effects
+import qs
+import qs.widgets
+import qs.settings
+
+BarComponent {
+    id: root
+    visible: UPower.displayDevice.isLaptopBattery
+    property double percent: UPower.displayDevice.percentage * 100
+    property bool hasBattery: UPower.displayDevice.isLaptopBattery
+    property bool charging: UPower.displayDevice.state === UPowerDeviceState.Charging
+    implicitWidth: batLayout.implicitWidth + 16
+
+    function batteryIcon() {
+        let charging = root.charging;
+        let percent = root.percent;
+        if (percent <= 10)
+            return charging ? "battery-empty-charging" : "battery-empty";
+        if (percent < 40)
+            return charging ? "battery-level-30-charging" : "battery-level-30";
+        if (percent < 50)
+            return charging ? "battery-level-40-charging" : "battery-level-40";
+        if (percent < 60)
+            return charging ? "battery-level-50-charging" : "battery-level-50";
+        if (percent < 70)
+            return charging ? "battery-level-60-charging" : "battery-level-60";
+        if (percent < 80)
+            return charging ? "battery-level-70-charging" : "battery-level-70";
+        if (percent < 90)
+            return charging ? "battery-level-80-charging" : "battery-level-80";
+        if (percent > 90)
+            return charging ? "battery-level-90-charging" : "battery-level-90";
+        if (percent == 100)
+            return charging ? "battery-level-100-charging" : "battery-level-100";
+    }
+    RowLayout {
+        id: batLayout
+        anchors.centerIn: root
+        StyledIcon {
+            iconName: root.batteryIcon()
+        }
+
+        StyledText {
+            text: Math.floor(root.percent, root.charging) + "%"
+        }
+    }
+}