Polished timer and UI

view.ts

@@ -63,6 +63,12 @@ export class TaskWeaverView extends ItemView {
 
 		const categoriesMap = new Map(this.plugin.settings.categories.map(c => [c.id, c]));
 
+		const activeTask = this.plugin.settings.tasks.find(t => t.startTime !== null);
+		if (activeTask) {
+			const category = categoriesMap.get(activeTask.categoryId);
+			this.renderActiveTimer(container, activeTask, category);
+		}
+
 		this.plugin.settings.categories.forEach(category => {
 			const categoryTasks = this.plugin.settings.tasks.filter(t => t.categoryId === category.id && !t.completed);
 
@@ -84,6 +90,55 @@ export class TaskWeaverView extends ItemView {
 		}
 	}
 
+	renderActiveTimer(container: HTMLElement, task: Task, category?: Category): void {
+		const timerSection = container.createDiv({ cls: "taskweaver-active-timer" });
+
+		if (category) {
+			timerSection.style.borderColor = category.color;
+		}
+
+		const timerHeader = timerSection.createDiv({ cls: "taskweaver-active-timer-header" });
+		timerHeader.createEl("span", { text: "Active Task", cls: "taskweaver-active-timer-label" });
+
+		const taskTitleDiv = timerSection.createDiv({ cls: "taskweaver-active-timer-title" });
+		if (category?.emoji) {
+			taskTitleDiv.createSpan({ text: `${category.emoji} `, cls: "taskweaver-emoji" });
+		}
+		taskTitleDiv.createSpan({ text: task.title });
+
+		const timerDisplay = timerSection.createDiv({
+			cls: "taskweaver-active-timer-display",
+			attr: { "data-task-id": task.id }
+		});
+		timerDisplay.setText(formatDuration(this.plugin.getTaskElapsed(task)));
+
+		const timerControls = timerSection.createDiv({ cls: "taskweaver-active-timer-controls" });
+
+		const pauseBtn = timerControls.createEl("button", {
+			text: "Pause",
+			cls: "taskweaver-timer-control-btn pause"
+		});
+		pauseBtn.onclick = async () => {
+			await this.plugin.toggleTaskTimer(task.id);
+		};
+
+		const stopBtn = timerControls.createEl("button", {
+			text: "Stop",
+			cls: "taskweaver-timer-control-btn stop"
+		});
+		stopBtn.onclick = async () => {
+			await this.plugin.toggleTaskTimer(task.id);
+		};
+
+		const completeBtn = timerControls.createEl("button", {
+			text: "Complete",
+			cls: "taskweaver-timer-control-btn complete"
+		});
+		completeBtn.onclick = async () => {
+			await this.plugin.toggleTaskComplete(task.id);
+		};
+	}
+
 	renderCategory(container: HTMLElement, category: Category, tasks: Task[]): void {
 		const categoryDiv = container.createDiv({ cls: "taskweaver-category" });
 
@@ -104,14 +159,11 @@ export class TaskWeaverView extends ItemView {
 	renderTask(container: HTMLElement, task: Task, category?: Category): void {
 		const taskDiv = container.createDiv({ cls: "taskweaver-task" });
 
-		const taskInfo = taskDiv.createDiv({ cls: "taskweaver-task-info" });
+		if (task.startTime) {
+			taskDiv.addClass("taskweaver-task-running");
+		}
 
-		const checkbox = taskInfo.createEl("input", { type: "checkbox" });
-		checkbox.checked = task.completed;
-		checkbox.addClass("taskweaver-checkbox");
-		checkbox.onclick = async () => {
-			await this.plugin.toggleTaskComplete(task.id);
-		};
+		const taskInfo = taskDiv.createDiv({ cls: "taskweaver-task-info" });
 
 		const taskTitle = taskInfo.createSpan({
 			text: task.title,
@@ -121,34 +173,54 @@ export class TaskWeaverView extends ItemView {
 		const taskControls = taskDiv.createDiv({ cls: "taskweaver-task-controls" });
 
 		const timerSpan = taskControls.createSpan({
-			cls: "taskweaver-timer",
+			cls: "taskweaver-timer-small",
 			attr: { "data-task-id": task.id }
 		});
 		timerSpan.setText(formatDuration(this.plugin.getTaskElapsed(task)));
 
 		if (!task.completed) {
-			const timerBtn = taskControls.createEl("button", {
-				text: task.startTime ? "⏸" : "▶",
-				cls: "taskweaver-timer-btn"
-			});
-			timerBtn.onclick = async () => {
-				await this.plugin.toggleTaskTimer(task.id);
-			};
+			if (!task.startTime) {
+				const startBtn = taskControls.createEl("button", {
+					text: "Start",
+					cls: "taskweaver-start-btn"
+				});
+				startBtn.onclick = async () => {
+					await this.plugin.toggleTaskTimer(task.id);
+				};
+			}
 
 			const deleteBtn = taskControls.createEl("button", {
-				text: "🗑",
+				text: "Delete",
 				cls: "taskweaver-delete-btn"
 			});
 			deleteBtn.onclick = async () => {
 				await this.plugin.deleteTask(task.id);
 			};
+		} else {
+			const checkbox = taskControls.createEl("input", { type: "checkbox" });
+			checkbox.checked = true;
+			checkbox.addClass("taskweaver-checkbox");
+			checkbox.onclick = async () => {
+				await this.plugin.toggleTaskComplete(task.id);
+			};
 		}
 	}
 
 	updateTimers(): void {
 		const container = this.containerEl.children[1] as HTMLElement;
-		const timerElements = container.querySelectorAll(".taskweaver-timer");
 
+		const activeTimerDisplay = container.querySelector(".taskweaver-active-timer-display");
+		if (activeTimerDisplay) {
+			const taskId = activeTimerDisplay.getAttribute("data-task-id");
+			if (taskId) {
+				const task = this.plugin.settings.tasks.find(t => t.id === taskId);
+				if (task) {
+					activeTimerDisplay.setText(formatDuration(this.plugin.getTaskElapsed(task)));
+				}
+			}
+		}
+
+		const timerElements = container.querySelectorAll(".taskweaver-timer-small");
 		timerElements.forEach((element) => {
 			const taskId = element.getAttribute("data-task-id");
 			if (taskId) {