Add tags settings in UI

src/qml/AppIcon.qml

@@ -11,5 +11,12 @@ import Mirai
 Button {
 	icon.color: MiraiColorPalette.buttonIcon
 
-	background: Rectangle { color: "transparent" }
+	background: Rectangle {
+		color: "transparent"
+		HoverHandler {
+			id: mouse
+			acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
+			cursorShape: Qt.PointingHandCursor
+		}
+	}
 }

src/qml/SideMenu.qml

@@ -7,6 +7,7 @@
 import QtQuick
 import QtQuick.Window
 import QtQuick.Layouts
+import QtQuick.Controls
 import Mirai
 
 ColumnLayout {
@@ -50,9 +51,20 @@ ColumnLayout {
 
 	Item { Layout.preferredHeight: 16 }
 
-	AppText {
-		text: "Tags"
-		font.pixelSize: 32
+	RowLayout {
+		AppText {
+			text: "Tags"
+			font.pixelSize: 32
+		}
+		Item { Layout.fillWidth: true }
+		AppIcon {
+			icon.source: "qrc:/qt/qml/Mirai/src/images/settings.png"
+			icon.color: colorPalette.selected.textPlaceholder
+			onClicked: {
+				tagsForm.reset();
+				tagsFormPopup.open();
+			}
+		}
 	}
 
 	Item { Layout.preferredHeight: 16 }
@@ -62,25 +74,26 @@ ColumnLayout {
 		Rectangle {
 			Layout.preferredHeight: childrenRect.height
 			Layout.fillWidth: true
-			color: backend.activeTagsFilter.includes(modelData) ? MiraiColorPalette.filterSelected : mouse.hovered ? MiraiColorPalette.filterHovered : "transparent"
+			color: backend.activeTagsFilter.includes(modelData.name) ? MiraiColorPalette.filterSelected : mouse.hovered ? MiraiColorPalette.filterHovered : "transparent"
 			radius: 4
 			QtObject {
 				id: internal
-				property string configTagColor: backend.getTagColor(modelData)
 			}
 			AppText {
-				
-				text: modelData
-				color: internal.configTagColor != "" ? internal.configTagColor : MiraiColorPalette.text
+				text: modelData.name
+				color: {
+					console.log("ttagg", modelData.name, modelData.color)
+					return modelData.color
+				}
 				padding: 4
 			}
 			MouseArea {
 				anchors.fill: parent
 				onClicked: {
-					if (backend.activeTagsFilter.includes(modelData)) {
-						backend.removeTagFilter(modelData)
+					if (backend.activeTagsFilter.includes(modelData.name)) {
+						backend.removeTagFilter(modelData.name)
 					} else {
-						backend.addTagFilter(modelData)
+						backend.addTagFilter(modelData.name)
 					}
 				}
 				HoverHandler {
@@ -104,10 +117,27 @@ ColumnLayout {
 		}
 	}
 
-	/*AppButton {
-		text: `Settings`
-		onClicked: {
-			root.openSettings()
+	Popup {
+		parent: Overlay.overlay
+		id: tagsFormPopup
+		width: parent.width * 0.75
+		implicitHeight: tagsForm.height + padding * 2
+		x: Math.round((parent.width - width) / 2)
+		y: Math.round((parent.height * 0.4) / 2)
+		padding: 8
+		background: Rectangle {
+			border.color: colorPalette.selected.modalBorder
+			border.width: 2
+			color: colorPalette.selected.pane
+			radius: 4
 		}
-	}*/
+		TagsConfigForm {
+			id: tagsForm
+			width: parent.width
+			onConfirmed: (tags) => {
+				tagsFormPopup.close()
+				backend.saveTagsColor(tags)
+			}
+		}
+	}
 }

src/qml/components/Tag.qml

@@ -20,11 +20,10 @@ Rectangle {
 
 	QtObject {
 		id: internal
-		property string configTagColor: backend.getTagColor(control.text)
 	}
 
 	AppText {
-		color: internal.configTagColor != "" ? internal.configTagColor : control.textColor
+		color: backend.getTagColor(control.text)
 		padding: 2
 		leftPadding: 6
 		rightPadding: 6

src/qml/forms/TagsConfigForm.qml

@@ -0,0 +1,77 @@
+/* 
+ * Mirai. Copyright (C) 2024 Vyn
+ * This file is licensed under version 3 of the GNU General Public License (GPL-3.0-only)
+ * The license can be found in the LICENSE file or at https://www.gnu.org/licenses/gpl-3.0.txt
+ */
+
+import QtQuick
+import QtQuick.Window
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Dialogs
+import Mirai
+
+ColumnLayout {
+	id: form
+	spacing: 6
+	signal confirmed(tags: var)
+
+	function reset() {
+		internal.tags = Qt.binding(function () { return [] })
+		internal.tags = Qt.binding(function () { return backend.tags.map(tag => {
+			return {name: tag.name, color: tag.color}
+		})})
+	}
+
+	QtObject {
+		id: internal
+		property var tags: []
+	}
+
+	Repeater {
+		id: tagsList
+		model: internal.tags
+		RowLayout {
+			Rectangle {
+				id: newTagColor
+				color: colorDialog.selectedColor
+				Layout.fillHeight: true
+				Layout.preferredWidth: 32
+
+				MouseArea {
+					anchors.fill: parent
+					onClicked: {
+						colorDialog.open()
+					}
+					HoverHandler {
+						id: mouse
+						acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
+						cursorShape: Qt.PointingHandCursor
+					}
+				}
+			}
+
+			ColorDialog {
+				id: colorDialog
+				selectedColor: modelData.color
+				onAccepted: {
+					colorDialog.selectedColor = selectedColor
+					internal.tags[index].color = selectedColor
+				}
+			}
+
+			AppText {
+				text: modelData.name
+				color: colorDialog.selectedColor
+			}
+		}
+	}
+
+	AppButton {
+		text: "Save"
+		onClicked: {
+			form.confirmed(internal.tags)
+		}
+	}
+}
+