Initial commit

src/views/todo-item-component.ts

@@ -0,0 +1,55 @@
+import { Menu, setIcon } from 'obsidian';
+import type { TodoItem } from '../core/types';
+
+export interface TodoItemCallbacks {
+	onToggle: () => void;
+	onMoveClick: () => void;
+}
+
+/**
+ * Creates a DOM element for a todo item with checkbox and menu.
+ */
+export function createTodoItemEl(
+	container: HTMLElement,
+	todo: TodoItem,
+	callbacks: TodoItemCallbacks
+): HTMLElement {
+	const itemEl = container.createEl('li', { cls: 'todo-tracker-item' });
+
+	// Checkbox
+	const checkboxEl = itemEl.createEl('input', { type: 'checkbox' });
+	checkboxEl.checked = todo.completed;
+	checkboxEl.addEventListener('change', () => {
+		callbacks.onToggle();
+	});
+
+	// Text content
+	const textEl = itemEl.createEl('span', { cls: 'todo-tracker-item-text' });
+	textEl.setText(todo.text);
+	if (todo.completed) {
+		textEl.addClass('todo-tracker-item-completed');
+	}
+
+	// Menu button (ellipsis)
+	const menuBtn = itemEl.createEl('button', { cls: 'todo-tracker-menu-btn' });
+	setIcon(menuBtn, 'more-vertical');
+	menuBtn.setAttribute('aria-label', 'Todo options');
+
+	menuBtn.addEventListener('click', (evt) => {
+		evt.stopPropagation();
+
+		const menu = new Menu();
+		menu.addItem((item) => {
+			item
+				.setTitle('Move to...')
+				.setIcon('arrow-right')
+				.onClick(() => {
+					callbacks.onMoveClick();
+				});
+		});
+
+		menu.showAtMouseEvent(evt);
+	});
+
+	return itemEl;
+}