Added color options

view.ts

@@ -306,14 +306,45 @@ class ManageCategoriesModal extends Modal {
 					categoryName = value;
 				}));
 
-		new Setting(contentEl)
-			.setName("Color")
-			.addText(text => text
-				.setValue(categoryColor)
-				.setPlaceholder("#4a9eff")
-				.onChange(value => {
-					categoryColor = value;
-				}));
+		const colorSetting = new Setting(contentEl)
+			.setName("Color");
+
+		const colorContainer = colorSetting.settingEl.createDiv({ cls: "taskweaver-color-picker-container" });
+
+		const presetColors = [
+			"#4a9eff", "#ff6b6b", "#51cf66", "#ffd43b",
+			"#ff8787", "#cc5de8", "#339af0", "#ff922b",
+			"#20c997", "#e599f7", "#74c0fc", "#a9e34b"
+		];
+
+		const presetContainer = colorContainer.createDiv({ cls: "taskweaver-preset-colors" });
+
+		presetColors.forEach(color => {
+			const colorOption = presetContainer.createDiv({ cls: "taskweaver-color-option" });
+			colorOption.style.backgroundColor = color;
+			if (color === categoryColor) {
+				colorOption.addClass("selected");
+			}
+			colorOption.onclick = () => {
+				categoryColor = color;
+				presetContainer.querySelectorAll(".taskweaver-color-option").forEach(el =>
+					el.removeClass("selected")
+				);
+				colorOption.addClass("selected");
+				colorPicker.value = color;
+			};
+		});
+
+		const customColorContainer = colorContainer.createDiv({ cls: "taskweaver-custom-color" });
+		customColorContainer.createEl("label", { text: "Custom: " });
+		const colorPicker = customColorContainer.createEl("input", { type: "color" });
+		colorPicker.value = categoryColor;
+		colorPicker.oninput = () => {
+			categoryColor = colorPicker.value;
+			presetContainer.querySelectorAll(".taskweaver-color-option").forEach(el =>
+				el.removeClass("selected")
+			);
+		};
 
 		new Setting(contentEl)
 			.setName("Emoji (optional)")