restructure bar components layout

Modules/Bar/Components/NotifBell.qml

@@ -0,0 +1,47 @@
+import Quickshell
+import QtQuick
+import ZShell.Config
+import qs.Modules.Bar.Popouts
+import qs.Daemons
+import qs.Components
+import qs.Services
+
+CustomRect {
+	id: root
+
+	required property bool horizontal
+	required property Wrapper popouts
+	required property PersistentProperties visibilities
+
+	color: visibilities.sidebar ? Colors.palette.m3primary : Colors.tPalette.m3surfaceContainer
+	implicitHeight: horizontal ? Math.max(Config.bar.height, Tokens.bar.innerSize) : width
+	implicitWidth: horizontal ? height : Math.max(Config.bar.height, Tokens.bar.innerSize)
+	radius: Tokens.rounding.full
+
+	MaterialIcon {
+		id: notificationCenterIcon
+
+		anchors.centerIn: parent
+		color: root.visibilities.sidebar ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
+		fill: root.visibilities.sidebar ? 1 : 0
+		font.pointSize: Tokens.font.size.larger
+		text: NotifServer.list.length ? "\uf4fe" : "\ue7f4"
+
+		Behavior on color {
+			CAnim {
+			}
+		}
+		Behavior on fill {
+			Anim {
+			}
+		}
+	}
+
+	StateLayer {
+		color: root.visibilities.sidebar ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
+
+		onClicked: {
+			root.visibilities.sidebar = !root.visibilities.sidebar;
+		}
+	}
+}