Fixed a issue while deleting categories - Polishing UI

main.ts

@@ -1,4 +1,4 @@
-import { Plugin } from "obsidian";
+import { Plugin, Notice } from "obsidian";
 import { TaskWeaverView, VIEW_TYPE_TASKWEAVER } from "./view";
 import { TaskWeaverSettingTab } from "./settings";
 import { TaskWeaverSettings, DEFAULT_SETTINGS, Task, Category } from "./types";
@@ -91,6 +91,7 @@ export default class TaskWeaverPlugin extends Plugin {
 	async deleteCategory(categoryId: string): Promise<void> {
 		const hasTasks = this.settings.tasks.some(t => t.categoryId === categoryId);
 		if (hasTasks) {
+			new Notice("Cannot delete category: it still contains tasks. Please delete or move all tasks first.");
 			return;
 		}
 

styles.css

@@ -364,3 +364,54 @@
 	border: none;
 	border-radius: var(--radius-s);
 }
+
+.taskweaver-modal-section {
+	margin: var(--size-4-4) 0;
+}
+
+.taskweaver-modal-label {
+	display: block;
+	color: var(--text-normal);
+	font-weight: var(--font-semibold);
+	font-size: var(--font-ui-small);
+	margin-bottom: var(--size-4-2);
+}
+
+.taskweaver-categories-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+	gap: var(--size-4-2);
+	margin-bottom: var(--size-4-3);
+}
+
+.taskweaver-category-btn {
+	display: flex;
+	align-items: center;
+	gap: var(--size-4-2);
+	padding: var(--size-4-3);
+	border: 2px solid var(--background-modifier-border);
+	border-radius: var(--radius-m);
+	background-color: var(--background-secondary);
+	cursor: pointer;
+	transition: all 0.2s;
+}
+
+.taskweaver-category-btn:hover {
+	transform: translateY(-2px);
+	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.taskweaver-category-btn.selected {
+	border-width: 3px;
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.taskweaver-category-btn-emoji {
+	font-size: var(--font-ui-large);
+}
+
+.taskweaver-category-btn-name {
+	color: var(--text-normal);
+	font-weight: var(--font-semibold);
+	font-size: var(--font-ui-small);
+}

view.ts

@@ -285,17 +285,34 @@ class AddTaskModal extends Modal {
 						new ManageCategoriesModal(this.app, this.plugin).open();
 					}));
 		} else {
-			new Setting(contentEl)
+			const categorySection = contentEl.createDiv({ cls: "taskweaver-modal-section" });
-				.setName("Category")
+			categorySection.createEl("label", { text: "Category", cls: "taskweaver-modal-label" });
-				.addDropdown(dropdown => {
+
+			const categoriesGrid = categorySection.createDiv({ cls: "taskweaver-categories-grid" });
+
 			this.plugin.settings.categories.forEach(cat => {
-						const label = cat.emoji ? `${cat.emoji} ${cat.name}` : cat.name;
+				const categoryBtn = categoriesGrid.createDiv({ cls: "taskweaver-category-btn" });
-						dropdown.addOption(cat.id, label);
+				categoryBtn.style.borderColor = cat.color;
-					});
+
-					dropdown.setValue(selectedCategoryId);
+				if (cat.id === selectedCategoryId) {
-					dropdown.onChange(value => {
+					categoryBtn.addClass("selected");
-						selectedCategoryId = value;
+					categoryBtn.style.backgroundColor = cat.color + "20";
+				}
+
+				if (cat.emoji) {
+					categoryBtn.createSpan({ text: cat.emoji, cls: "taskweaver-category-btn-emoji" });
+				}
+				categoryBtn.createSpan({ text: cat.name, cls: "taskweaver-category-btn-name" });
+
+				categoryBtn.onclick = () => {
+					selectedCategoryId = cat.id;
+					categoriesGrid.querySelectorAll(".taskweaver-category-btn").forEach(btn => {
+						btn.removeClass("selected");
+						(btn as HTMLElement).style.backgroundColor = "";
 					});
+					categoryBtn.addClass("selected");
+					categoryBtn.style.backgroundColor = cat.color + "20";
+				};
 			});
 
 			new Setting(contentEl)