Release v1.0.9: Rename plugin from Focus Task to Immerse
This commit is contained in:
142
src/view.ts
142
src/view.ts
@@ -3,33 +3,33 @@ import {
|
||||
WorkspaceLeaf,
|
||||
} from 'obsidian';
|
||||
|
||||
import { VIEW_TYPE_FOCUS_TASK, FocusTask } from './types';
|
||||
import { VIEW_TYPE_IMMERSE, FocusTask } from './types';
|
||||
import { QuickAddTaskModal, EditTaskModal } from './modals';
|
||||
import FocusTaskPlugin from './main';
|
||||
import ImmersePlugin from './main';
|
||||
|
||||
// ============ Main View ============
|
||||
|
||||
export class FocusTaskView extends ItemView {
|
||||
plugin: FocusTaskPlugin;
|
||||
export class ImmerseView extends ItemView {
|
||||
plugin: ImmersePlugin;
|
||||
currentFilter: string = 'all';
|
||||
|
||||
|
||||
// References to elements that need frequent updates
|
||||
private timerTimeEl: HTMLElement | null = null;
|
||||
private progressBarEl: HTMLElement | null = null;
|
||||
private actualTimeEl: HTMLElement | null = null;
|
||||
private pauseBtnEl: HTMLElement | null = null;
|
||||
|
||||
constructor(leaf: WorkspaceLeaf, plugin: FocusTaskPlugin) {
|
||||
constructor(leaf: WorkspaceLeaf, plugin: ImmersePlugin) {
|
||||
super(leaf);
|
||||
this.plugin = plugin;
|
||||
}
|
||||
|
||||
getViewType(): string {
|
||||
return VIEW_TYPE_FOCUS_TASK;
|
||||
return VIEW_TYPE_IMMERSE;
|
||||
}
|
||||
|
||||
getDisplayText(): string {
|
||||
return 'Focus Task';
|
||||
return 'Immerse';
|
||||
}
|
||||
|
||||
getIcon(): string {
|
||||
@@ -74,7 +74,7 @@ export class FocusTaskView extends ItemView {
|
||||
refresh() {
|
||||
const container = this.containerEl.children[1];
|
||||
container.empty();
|
||||
container.addClass('focus-task-container');
|
||||
container.addClass('immerse-container');
|
||||
|
||||
// Reset element references
|
||||
this.timerTimeEl = null;
|
||||
@@ -96,18 +96,18 @@ export class FocusTaskView extends ItemView {
|
||||
}
|
||||
|
||||
renderHeader(container: Element) {
|
||||
const header = container.createEl('div', { cls: 'focus-task-header' });
|
||||
const header = container.createEl('div', { cls: 'immerse-header' });
|
||||
|
||||
const titleSection = header.createEl('div', { cls: 'focus-task-title-section' });
|
||||
titleSection.createEl('h2', { text: '⚡ Focus Task', cls: 'focus-task-title' });
|
||||
const titleSection = header.createEl('div', { cls: 'immerse-title-section' });
|
||||
titleSection.createEl('h2', { text: '⚡ Immerse', cls: 'immerse-title' });
|
||||
|
||||
const today = new Date();
|
||||
const dateStr = today.toLocaleDateString('en-US', { weekday: 'long', month: 'short', day: 'numeric' });
|
||||
titleSection.createEl('div', { text: dateStr, cls: 'focus-task-date' });
|
||||
titleSection.createEl('div', { text: dateStr, cls: 'immerse-date' });
|
||||
|
||||
const actions = header.createEl('div', { cls: 'focus-task-header-actions' });
|
||||
const actions = header.createEl('div', { cls: 'immerse-header-actions' });
|
||||
|
||||
const addBtn = actions.createEl('button', { cls: 'focus-task-btn focus-task-btn-primary' });
|
||||
const addBtn = actions.createEl('button', { cls: 'immerse-btn immerse-btn-primary' });
|
||||
addBtn.innerHTML = '+ Add Task';
|
||||
addBtn.addEventListener('click', () => {
|
||||
new QuickAddTaskModal(this.app, this.plugin).open();
|
||||
@@ -116,7 +116,7 @@ export class FocusTaskView extends ItemView {
|
||||
|
||||
renderStatsBar(container: Element) {
|
||||
const stats = this.plugin.getStats();
|
||||
const statsBar = container.createEl('div', { cls: 'focus-task-stats-bar' });
|
||||
const statsBar = container.createEl('div', { cls: 'immerse-stats-bar' });
|
||||
|
||||
const statItems = [
|
||||
{ label: 'Pending', value: stats.pendingCount.toString(), icon: '📋' },
|
||||
@@ -126,44 +126,44 @@ export class FocusTaskView extends ItemView {
|
||||
];
|
||||
|
||||
statItems.forEach(stat => {
|
||||
const item = statsBar.createEl('div', { cls: 'focus-task-stat-item' });
|
||||
item.createEl('div', { cls: 'focus-task-stat-icon', text: stat.icon });
|
||||
item.createEl('div', { cls: 'focus-task-stat-value', text: stat.value });
|
||||
item.createEl('div', { cls: 'focus-task-stat-label', text: stat.label });
|
||||
const item = statsBar.createEl('div', { cls: 'immerse-stat-item' });
|
||||
item.createEl('div', { cls: 'immerse-stat-icon', text: stat.icon });
|
||||
item.createEl('div', { cls: 'immerse-stat-value', text: stat.value });
|
||||
item.createEl('div', { cls: 'immerse-stat-label', text: stat.label });
|
||||
});
|
||||
}
|
||||
|
||||
renderActiveTask(container: Element) {
|
||||
const activeSection = container.createEl('div', { cls: 'focus-task-active-section' });
|
||||
const activeSection = container.createEl('div', { cls: 'immerse-active-section' });
|
||||
|
||||
if (this.plugin.activeTaskId) {
|
||||
const task = this.plugin.data.tasks.find(t => t.id === this.plugin.activeTaskId);
|
||||
if (task) {
|
||||
activeSection.addClass('focus-task-has-active');
|
||||
activeSection.addClass('immerse-has-active');
|
||||
|
||||
const activeCard = activeSection.createEl('div', { cls: 'focus-task-active-card' });
|
||||
const activeCard = activeSection.createEl('div', { cls: 'immerse-active-card' });
|
||||
|
||||
if (this.plugin.isBreakMode) {
|
||||
activeCard.addClass('focus-task-break-card');
|
||||
activeCard.addClass('immerse-break-card');
|
||||
const breakLabel = this.plugin.currentTimerSeconds > 0 ? '☕ BREAK TIME' : '✨ BREAK COMPLETE';
|
||||
activeCard.createEl('div', { cls: 'focus-task-active-label', text: breakLabel });
|
||||
activeCard.createEl('div', { cls: 'immerse-active-label', text: breakLabel });
|
||||
} else {
|
||||
const workLabel = this.plugin.currentTimerSeconds > 0 ? '🎯 FOCUSING ON' : '🍅 POMODORO COMPLETE';
|
||||
activeCard.createEl('div', { cls: 'focus-task-active-label', text: workLabel });
|
||||
activeCard.createEl('div', { cls: 'immerse-active-label', text: workLabel });
|
||||
}
|
||||
|
||||
activeCard.createEl('div', { cls: 'focus-task-active-task-name', text: task.text });
|
||||
activeCard.createEl('div', { cls: 'immerse-active-task-name', text: task.text });
|
||||
|
||||
// Timer display - store reference for updates
|
||||
const timerDisplay = activeCard.createEl('div', { cls: 'focus-task-timer-display' });
|
||||
const timerDisplay = activeCard.createEl('div', { cls: 'immerse-timer-display' });
|
||||
this.timerTimeEl = timerDisplay.createEl('span', {
|
||||
cls: 'focus-task-timer-time',
|
||||
cls: 'immerse-timer-time',
|
||||
text: this.plugin.formatTime(this.plugin.currentTimerSeconds)
|
||||
});
|
||||
|
||||
// Progress bar - store reference for updates
|
||||
const progressWrap = activeCard.createEl('div', { cls: 'focus-task-progress-wrap' });
|
||||
this.progressBarEl = progressWrap.createEl('div', { cls: 'focus-task-progress-bar' });
|
||||
const progressWrap = activeCard.createEl('div', { cls: 'immerse-progress-wrap' });
|
||||
this.progressBarEl = progressWrap.createEl('div', { cls: 'immerse-progress-bar' });
|
||||
|
||||
let progressPercent = 0;
|
||||
if (this.plugin.isBreakMode) {
|
||||
@@ -177,34 +177,34 @@ export class FocusTaskView extends ItemView {
|
||||
}
|
||||
|
||||
this.progressBarEl.style.width = `${Math.min(Math.max(progressPercent, 0), 100)}%`;
|
||||
if (progressPercent >= 100) this.progressBarEl.addClass('focus-task-overtime');
|
||||
if (progressPercent >= 100) this.progressBarEl.addClass('immerse-overtime');
|
||||
|
||||
// Time info - store reference for actual time updates
|
||||
if (!this.plugin.isBreakMode) {
|
||||
const timeInfo = activeCard.createEl('div', { cls: 'focus-task-time-info' });
|
||||
const timeInfo = activeCard.createEl('div', { cls: 'immerse-time-info' });
|
||||
timeInfo.createEl('span', { text: `Est: ${this.plugin.formatTimeHuman(task.estimatedMinutes)}` });
|
||||
this.actualTimeEl = timeInfo.createEl('span', { text: `Actual: ${this.plugin.formatTimeHuman(task.actualMinutes)}` });
|
||||
}
|
||||
|
||||
// Controls
|
||||
const controls = activeCard.createEl('div', { cls: 'focus-task-active-controls' });
|
||||
const controls = activeCard.createEl('div', { cls: 'immerse-active-controls' });
|
||||
|
||||
if (this.plugin.isBreakMode) {
|
||||
// Break mode controls
|
||||
if (this.plugin.currentTimerSeconds > 0) {
|
||||
// Break is still counting down
|
||||
this.pauseBtnEl = controls.createEl('button', { cls: 'focus-task-btn focus-task-btn-secondary' });
|
||||
this.pauseBtnEl = controls.createEl('button', { cls: 'immerse-btn immerse-btn-secondary' });
|
||||
this.pauseBtnEl.innerHTML = this.plugin.isTimerRunning ? '⏸ Pause' : '▶ Resume';
|
||||
this.pauseBtnEl.addEventListener('click', () => this.plugin.toggleTimer());
|
||||
|
||||
const skipBreakBtn = controls.createEl('button', { cls: 'focus-task-btn focus-task-btn-primary' });
|
||||
const skipBreakBtn = controls.createEl('button', { cls: 'immerse-btn immerse-btn-primary' });
|
||||
skipBreakBtn.innerHTML = '⏭ Skip Break';
|
||||
skipBreakBtn.addEventListener('click', () => {
|
||||
this.plugin.isBreakMode = false;
|
||||
this.plugin.startPomodoro(task.id);
|
||||
});
|
||||
|
||||
const stopBtn = controls.createEl('button', { cls: 'focus-task-btn focus-task-btn-danger' });
|
||||
const stopBtn = controls.createEl('button', { cls: 'immerse-btn immerse-btn-danger' });
|
||||
stopBtn.innerHTML = '✕ Stop';
|
||||
stopBtn.addEventListener('click', () => {
|
||||
this.plugin.isBreakMode = false;
|
||||
@@ -212,14 +212,14 @@ export class FocusTaskView extends ItemView {
|
||||
});
|
||||
} else {
|
||||
// Break timer finished - show resume button
|
||||
const resumeWorkBtn = controls.createEl('button', { cls: 'focus-task-btn focus-task-btn-success' });
|
||||
const resumeWorkBtn = controls.createEl('button', { cls: 'immerse-btn immerse-btn-success' });
|
||||
resumeWorkBtn.innerHTML = '▶ Resume Work';
|
||||
resumeWorkBtn.addEventListener('click', () => {
|
||||
this.plugin.isBreakMode = false;
|
||||
this.plugin.startPomodoro(task.id);
|
||||
});
|
||||
|
||||
const stopBtn = controls.createEl('button', { cls: 'focus-task-btn focus-task-btn-danger' });
|
||||
const stopBtn = controls.createEl('button', { cls: 'immerse-btn immerse-btn-danger' });
|
||||
stopBtn.innerHTML = '✕ Stop';
|
||||
stopBtn.addEventListener('click', () => {
|
||||
this.plugin.isBreakMode = false;
|
||||
@@ -230,32 +230,32 @@ export class FocusTaskView extends ItemView {
|
||||
// Work mode controls
|
||||
if (this.plugin.currentTimerSeconds > 0) {
|
||||
// Work session still running
|
||||
this.pauseBtnEl = controls.createEl('button', { cls: 'focus-task-btn focus-task-btn-secondary' });
|
||||
this.pauseBtnEl = controls.createEl('button', { cls: 'immerse-btn immerse-btn-secondary' });
|
||||
this.pauseBtnEl.innerHTML = this.plugin.isTimerRunning ? '⏸ Pause' : '▶ Resume';
|
||||
this.pauseBtnEl.addEventListener('click', () => this.plugin.toggleTimer());
|
||||
|
||||
const completeBtn = controls.createEl('button', { cls: 'focus-task-btn focus-task-btn-success' });
|
||||
const completeBtn = controls.createEl('button', { cls: 'immerse-btn immerse-btn-success' });
|
||||
completeBtn.innerHTML = '✓ Complete';
|
||||
completeBtn.addEventListener('click', () => this.plugin.completeTask(task.id));
|
||||
|
||||
const stopBtn = controls.createEl('button', { cls: 'focus-task-btn focus-task-btn-danger' });
|
||||
const stopBtn = controls.createEl('button', { cls: 'immerse-btn immerse-btn-danger' });
|
||||
stopBtn.innerHTML = '✕ Stop';
|
||||
stopBtn.addEventListener('click', () => this.plugin.stopTimer());
|
||||
} else {
|
||||
// Work session finished - show break and completion options
|
||||
const startBreakBtn = controls.createEl('button', { cls: 'focus-task-btn focus-task-btn-secondary' });
|
||||
const startBreakBtn = controls.createEl('button', { cls: 'immerse-btn immerse-btn-secondary' });
|
||||
startBreakBtn.innerHTML = '☕ Start Break';
|
||||
startBreakBtn.addEventListener('click', () => this.plugin.startBreak());
|
||||
|
||||
const continueBtn = controls.createEl('button', { cls: 'focus-task-btn focus-task-btn-primary' });
|
||||
const continueBtn = controls.createEl('button', { cls: 'immerse-btn immerse-btn-primary' });
|
||||
continueBtn.innerHTML = '▶ Continue Working';
|
||||
continueBtn.addEventListener('click', () => this.plugin.startPomodoro(task.id));
|
||||
|
||||
const completeBtn = controls.createEl('button', { cls: 'focus-task-btn focus-task-btn-success' });
|
||||
const completeBtn = controls.createEl('button', { cls: 'immerse-btn immerse-btn-success' });
|
||||
completeBtn.innerHTML = '✓ Complete';
|
||||
completeBtn.addEventListener('click', () => this.plugin.completeTask(task.id));
|
||||
|
||||
const stopBtn = controls.createEl('button', { cls: 'focus-task-btn focus-task-btn-danger' });
|
||||
const stopBtn = controls.createEl('button', { cls: 'immerse-btn immerse-btn-danger' });
|
||||
stopBtn.innerHTML = '✕ Stop';
|
||||
stopBtn.addEventListener('click', () => this.plugin.stopTimer());
|
||||
}
|
||||
@@ -263,18 +263,18 @@ export class FocusTaskView extends ItemView {
|
||||
}
|
||||
} else {
|
||||
// No active task - show start focus prompt
|
||||
const startPrompt = activeSection.createEl('div', { cls: 'focus-task-start-prompt' });
|
||||
startPrompt.createEl('div', { cls: 'focus-task-prompt-icon', text: '⚡' });
|
||||
startPrompt.createEl('div', { cls: 'focus-task-prompt-text', text: 'Ready to focus?' });
|
||||
startPrompt.createEl('div', { cls: 'focus-task-prompt-hint', text: 'Click ▶ on a task to start a Pomodoro session' });
|
||||
const startPrompt = activeSection.createEl('div', { cls: 'immerse-start-prompt' });
|
||||
startPrompt.createEl('div', { cls: 'immerse-prompt-icon', text: '⚡' });
|
||||
startPrompt.createEl('div', { cls: 'immerse-prompt-text', text: 'Ready to focus?' });
|
||||
startPrompt.createEl('div', { cls: 'immerse-prompt-hint', text: 'Click ▶ on a task to start a Pomodoro session' });
|
||||
}
|
||||
}
|
||||
|
||||
renderTaskList(container: Element) {
|
||||
const listSection = container.createEl('div', { cls: 'focus-task-list-section' });
|
||||
const listSection = container.createEl('div', { cls: 'immerse-list-section' });
|
||||
|
||||
// Filters
|
||||
const filters = listSection.createEl('div', { cls: 'focus-task-filters' });
|
||||
const filters = listSection.createEl('div', { cls: 'immerse-filters' });
|
||||
|
||||
const filterOptions = [
|
||||
{ id: 'all', label: 'All Tasks' },
|
||||
@@ -285,7 +285,7 @@ export class FocusTaskView extends ItemView {
|
||||
|
||||
filterOptions.forEach(opt => {
|
||||
const btn = filters.createEl('button', {
|
||||
cls: `focus-task-filter-btn ${this.currentFilter === opt.id ? 'active' : ''}`,
|
||||
cls: `immerse-filter-btn ${this.currentFilter === opt.id ? 'active' : ''}`,
|
||||
text: opt.label,
|
||||
});
|
||||
btn.addEventListener('click', () => {
|
||||
@@ -295,7 +295,7 @@ export class FocusTaskView extends ItemView {
|
||||
});
|
||||
|
||||
// Task items
|
||||
const taskList = listSection.createEl('div', { cls: 'focus-task-task-list' });
|
||||
const taskList = listSection.createEl('div', { cls: 'immerse-task-list' });
|
||||
|
||||
let tasks = this.plugin.data.tasks;
|
||||
|
||||
@@ -315,10 +315,10 @@ export class FocusTaskView extends ItemView {
|
||||
});
|
||||
|
||||
if (tasks.length === 0) {
|
||||
const emptyState = taskList.createEl('div', { cls: 'focus-task-empty-state' });
|
||||
emptyState.createEl('div', { cls: 'focus-task-empty-icon', text: '📝' });
|
||||
emptyState.createEl('div', { cls: 'focus-task-empty-text', text: 'No tasks yet' });
|
||||
emptyState.createEl('div', { cls: 'focus-task-empty-hint', text: 'Add a task to get started!' });
|
||||
const emptyState = taskList.createEl('div', { cls: 'immerse-empty-state' });
|
||||
emptyState.createEl('div', { cls: 'immerse-empty-icon', text: '📝' });
|
||||
emptyState.createEl('div', { cls: 'immerse-empty-text', text: 'No tasks yet' });
|
||||
emptyState.createEl('div', { cls: 'immerse-empty-hint', text: 'Add a task to get started!' });
|
||||
} else {
|
||||
tasks.forEach(task => this.renderTaskItem(taskList, task));
|
||||
}
|
||||
@@ -328,11 +328,11 @@ export class FocusTaskView extends ItemView {
|
||||
const list = this.plugin.settings.lists.find(l => l.id === task.list);
|
||||
|
||||
const taskEl = container.createEl('div', {
|
||||
cls: `focus-task-task-item ${task.completed ? 'completed' : ''} ${task.isActive ? 'active' : ''}`
|
||||
cls: `immerse-task-item ${task.completed ? 'completed' : ''} ${task.isActive ? 'active' : ''}`
|
||||
});
|
||||
|
||||
// Checkbox
|
||||
const checkbox = taskEl.createEl('div', { cls: 'focus-task-checkbox' });
|
||||
const checkbox = taskEl.createEl('div', { cls: 'immerse-checkbox' });
|
||||
checkbox.innerHTML = task.completed ? '✓' : '';
|
||||
checkbox.style.borderColor = list?.color || '#6366f1';
|
||||
if (task.completed) {
|
||||
@@ -347,37 +347,37 @@ export class FocusTaskView extends ItemView {
|
||||
});
|
||||
|
||||
// Task content
|
||||
const content = taskEl.createEl('div', { cls: 'focus-task-task-content' });
|
||||
const content = taskEl.createEl('div', { cls: 'immerse-task-content' });
|
||||
|
||||
const taskHeader = content.createEl('div', { cls: 'focus-task-task-header' });
|
||||
taskHeader.createEl('span', { cls: 'focus-task-task-text', text: task.text });
|
||||
const taskHeader = content.createEl('div', { cls: 'immerse-task-header' });
|
||||
taskHeader.createEl('span', { cls: 'immerse-task-text', text: task.text });
|
||||
|
||||
if (list) {
|
||||
const listBadge = taskHeader.createEl('span', {
|
||||
cls: 'focus-task-list-badge',
|
||||
cls: 'immerse-list-badge',
|
||||
text: `${list.icon} ${list.name}`,
|
||||
});
|
||||
listBadge.style.backgroundColor = list.color + '20';
|
||||
listBadge.style.color = list.color;
|
||||
}
|
||||
|
||||
const taskMeta = content.createEl('div', { cls: 'focus-task-task-meta' });
|
||||
const taskMeta = content.createEl('div', { cls: 'immerse-task-meta' });
|
||||
taskMeta.createEl('span', { text: `Est: ${this.plugin.formatTimeHuman(task.estimatedMinutes)}` });
|
||||
|
||||
if (task.actualMinutes > 0) {
|
||||
const actualSpan = taskMeta.createEl('span');
|
||||
actualSpan.setText(`Actual: ${this.plugin.formatTimeHuman(task.actualMinutes)}`);
|
||||
if (task.actualMinutes > task.estimatedMinutes) {
|
||||
actualSpan.addClass('focus-task-overtime-text');
|
||||
actualSpan.addClass('immerse-overtime-text');
|
||||
}
|
||||
}
|
||||
|
||||
// Actions
|
||||
const actions = taskEl.createEl('div', { cls: 'focus-task-task-actions' });
|
||||
const actions = taskEl.createEl('div', { cls: 'immerse-task-actions' });
|
||||
|
||||
if (!task.completed) {
|
||||
// Start pomodoro button
|
||||
const startBtn = actions.createEl('button', { cls: 'focus-task-task-btn', attr: { 'aria-label': 'Start Pomodoro' } });
|
||||
const startBtn = actions.createEl('button', { cls: 'immerse-task-btn', attr: { 'aria-label': 'Start Pomodoro' } });
|
||||
startBtn.innerHTML = '▶';
|
||||
startBtn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
@@ -385,7 +385,7 @@ export class FocusTaskView extends ItemView {
|
||||
});
|
||||
|
||||
// Stopwatch mode button
|
||||
const stopwatchBtn = actions.createEl('button', { cls: 'focus-task-task-btn', attr: { 'aria-label': 'Start Stopwatch' } });
|
||||
const stopwatchBtn = actions.createEl('button', { cls: 'immerse-task-btn', attr: { 'aria-label': 'Start Stopwatch' } });
|
||||
stopwatchBtn.innerHTML = '⏱';
|
||||
stopwatchBtn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
@@ -394,7 +394,7 @@ export class FocusTaskView extends ItemView {
|
||||
}
|
||||
|
||||
// Edit button
|
||||
const editBtn = actions.createEl('button', { cls: 'focus-task-task-btn', attr: { 'aria-label': 'Edit' } });
|
||||
const editBtn = actions.createEl('button', { cls: 'immerse-task-btn', attr: { 'aria-label': 'Edit' } });
|
||||
editBtn.innerHTML = '✏️';
|
||||
editBtn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
@@ -402,7 +402,7 @@ export class FocusTaskView extends ItemView {
|
||||
});
|
||||
|
||||
// Delete button
|
||||
const deleteBtn = actions.createEl('button', { cls: 'focus-task-task-btn focus-task-delete-btn', attr: { 'aria-label': 'Delete' } });
|
||||
const deleteBtn = actions.createEl('button', { cls: 'immerse-task-btn immerse-delete-btn', attr: { 'aria-label': 'Delete' } });
|
||||
deleteBtn.innerHTML = '🗑';
|
||||
deleteBtn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
|
||||
Reference in New Issue
Block a user