Focus Task is heavily inspired by Blitzit, +
Immerse is heavily inspired by Blitzit, a fantastic productivity app that combines task management with focused time tracking.
-This plugin brings similar functionality directly into Obsidian, allowing you to manage tasks, +
This plugin brings similar functionality directly into Obsidian, allowing you to manage tasks, use the Pomodoro technique, and track your productivity without leaving your notes.
`; } diff --git a/manifest.json b/manifest.json index daaaa96..ce06649 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { - "id": "focus-task", - "name": "Focus Task", - "version": "1.0.8", + "id": "immerse", + "name": "Immerse", + "version": "1.0.9", "minAppVersion": "0.15.0", "description": "A Blitzit-inspired task management and focus timer plugin. Plan your day, track time with Pomodoro technique, and crush your tasks with satisfying checkoffs.", "author": "Crib", diff --git a/package.json b/package.json index aa07a6d..2e46df7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "focus-task", - "version": "1.0.8", + "name": "immerse", + "version": "1.0.9", "description": "A Blitzit-inspired task management and focus timer plugin for Obsidian", "main": "main.js", "scripts": { @@ -22,7 +22,7 @@ "license": "MIT", "repository": { "type": "git", - "url": "https://git.cribdev.com/crib/focus-task" + "url": "https://git.cribdev.com/crib/immerse" }, "devDependencies": { "@types/node": "^16.11.6", diff --git a/src/main.ts b/src/main.ts index e24ffb4..fd75067 100644 --- a/src/main.ts +++ b/src/main.ts @@ -14,18 +14,18 @@ import { FocusTaskData, DEFAULT_SETTINGS, DEFAULT_DATA, - VIEW_TYPE_FOCUS_TASK, + VIEW_TYPE_IMMERSE, CELEBRATION_MESSAGES, EARLY_FINISH_MESSAGES, OVERTIME_MESSAGES, } from './types'; -import { FocusTaskView } from './view'; +import { ImmerseView } from './view'; import { QuickAddTaskModal } from './modals'; // ============ Main Plugin Class ============ -export default class FocusTaskPlugin extends Plugin { +export default class ImmersePlugin extends Plugin { settings: FocusTaskSettings; data: FocusTaskData; @@ -63,19 +63,19 @@ export default class FocusTaskPlugin extends Plugin { // Register the main view this.registerView( - VIEW_TYPE_FOCUS_TASK, - (leaf) => new FocusTaskView(leaf, this) + VIEW_TYPE_IMMERSE, + (leaf) => new ImmerseView(leaf, this) ); // Add ribbon icon - this.addRibbonIcon('zap', 'Open Focus Task', () => { + this.addRibbonIcon('zap', 'Open Immerse', () => { this.activateView(); }); // Add commands this.addCommand({ - id: 'open-focus-task', - name: 'Open Focus Task Panel', + id: 'open-immerse', + name: 'Open Immerse Panel', callback: () => this.activateView(), }); @@ -104,7 +104,7 @@ export default class FocusTaskPlugin extends Plugin { }); // Add settings tab - this.addSettingTab(new FocusTaskSettingTab(this.app, this)); + this.addSettingTab(new ImmerseSettingTab(this.app, this)); // Create status bar timer this.createStatusBar(); @@ -165,14 +165,14 @@ export default class FocusTaskPlugin extends Plugin { const { workspace } = this.app; let leaf: WorkspaceLeaf | null = null; - const leaves = workspace.getLeavesOfType(VIEW_TYPE_FOCUS_TASK); + const leaves = workspace.getLeavesOfType(VIEW_TYPE_IMMERSE); if (leaves.length > 0) { leaf = leaves[0]; } else { leaf = workspace.getRightLeaf(false); if (leaf) { - await leaf.setViewState({ type: VIEW_TYPE_FOCUS_TASK, active: true }); + await leaf.setViewState({ type: VIEW_TYPE_IMMERSE, active: true }); } } @@ -599,7 +599,7 @@ export default class FocusTaskPlugin extends Plugin { this.statusBarEl.setText(`⚡ ${icon} ${timeStr} - ${taskName}${task && task.text.length > 20 ? '...' : ''}`); this.statusBarEl.addClass('focus-task-status-active'); } else { - this.statusBarEl.setText('⚡ Focus Task'); + this.statusBarEl.setText('⚡ Immerse'); this.statusBarEl.removeClass('focus-task-status-active'); } } @@ -844,9 +844,9 @@ export default class FocusTaskPlugin extends Plugin { } refreshView() { - const leaves = this.app.workspace.getLeavesOfType(VIEW_TYPE_FOCUS_TASK); + const leaves = this.app.workspace.getLeavesOfType(VIEW_TYPE_IMMERSE); leaves.forEach(leaf => { - if (leaf.view instanceof FocusTaskView) { + if (leaf.view instanceof ImmerseView) { leaf.view.refresh(); } }); @@ -854,9 +854,9 @@ export default class FocusTaskPlugin extends Plugin { // Light refresh - only updates timer display without rebuilding DOM updateTimerDisplay() { - const leaves = this.app.workspace.getLeavesOfType(VIEW_TYPE_FOCUS_TASK); + const leaves = this.app.workspace.getLeavesOfType(VIEW_TYPE_IMMERSE); leaves.forEach(leaf => { - if (leaf.view instanceof FocusTaskView) { + if (leaf.view instanceof ImmerseView) { leaf.view.updateTimerDisplay(); } }); @@ -901,10 +901,10 @@ export default class FocusTaskPlugin extends Plugin { // ============ Settings Tab ============ -class FocusTaskSettingTab extends PluginSettingTab { - plugin: FocusTaskPlugin; +class ImmerseSettingTab extends PluginSettingTab { + plugin: ImmersePlugin; - constructor(app: App, plugin: FocusTaskPlugin) { + constructor(app: App, plugin: ImmersePlugin) { super(app, plugin); this.plugin = plugin; } @@ -913,7 +913,7 @@ class FocusTaskSettingTab extends PluginSettingTab { const { containerEl } = this; containerEl.empty(); - containerEl.createEl('h1', { text: '⚡ Focus Task Settings' }); + containerEl.createEl('h1', { text: '⚡ Immerse Settings' }); // Pomodoro Settings containerEl.createEl('h2', { text: '🍅 Pomodoro Timer' }); @@ -1089,14 +1089,14 @@ class FocusTaskSettingTab extends PluginSettingTab { // About section containerEl.createEl('h2', { text: '📖 About' }); - const aboutDiv = containerEl.createDiv({ cls: 'focus-task-about' }); + const aboutDiv = containerEl.createDiv({ cls: 'immerse-about' }); aboutDiv.innerHTML = ` -Focus Task is heavily inspired by Blitzit, +
Immerse is heavily inspired by Blitzit, a fantastic productivity app that combines task management with focused time tracking.
-This plugin brings similar functionality directly into Obsidian, allowing you to manage tasks, +
This plugin brings similar functionality directly into Obsidian, allowing you to manage tasks, use the Pomodoro technique, and track your productivity without leaving your notes.
`; } diff --git a/src/modals.ts b/src/modals.ts index 834413e..58f8eaa 100644 --- a/src/modals.ts +++ b/src/modals.ts @@ -6,17 +6,17 @@ import { } from 'obsidian'; import { FocusTask } from './types'; -import FocusTaskPlugin from './main'; +import ImmersePlugin from './main'; // ============ Quick Add Task Modal ============ export class QuickAddTaskModal extends Modal { - plugin: FocusTaskPlugin; + plugin: ImmersePlugin; taskText: string = ''; estimatedMinutes: number; selectedList: string = 'work'; - constructor(app: App, plugin: FocusTaskPlugin) { + constructor(app: App, plugin: ImmersePlugin) { super(app); this.plugin = plugin; this.estimatedMinutes = plugin.settings.defaultEstimateMinutes; @@ -27,7 +27,7 @@ export class QuickAddTaskModal extends Modal { onOpen() { const { contentEl } = this; - contentEl.addClass('focus-task-modal'); + contentEl.addClass('immerse-modal'); contentEl.createEl('h2', { text: '⚡ Add New Task' }); @@ -83,12 +83,12 @@ export class QuickAddTaskModal extends Modal { }); // Buttons - const buttonContainer = contentEl.createEl('div', { cls: 'focus-task-modal-buttons' }); + const buttonContainer = contentEl.createEl('div', { cls: 'immerse-modal-buttons' }); - const cancelBtn = buttonContainer.createEl('button', { text: 'Cancel', cls: 'focus-task-btn' }); + const cancelBtn = buttonContainer.createEl('button', { text: 'Cancel', cls: 'immerse-btn' }); cancelBtn.addEventListener('click', () => this.close()); - const addBtn = buttonContainer.createEl('button', { text: 'Add Task', cls: 'focus-task-btn focus-task-btn-primary' }); + const addBtn = buttonContainer.createEl('button', { text: 'Add Task', cls: 'immerse-btn immerse-btn-primary' }); addBtn.addEventListener('click', () => this.submitTask()); } @@ -112,10 +112,10 @@ export class QuickAddTaskModal extends Modal { // ============ Edit Task Modal ============ export class EditTaskModal extends Modal { - plugin: FocusTaskPlugin; + plugin: ImmersePlugin; task: FocusTask; - constructor(app: App, plugin: FocusTaskPlugin, task: FocusTask) { + constructor(app: App, plugin: ImmersePlugin, task: FocusTask) { super(app); this.plugin = plugin; this.task = { ...task }; @@ -123,7 +123,7 @@ export class EditTaskModal extends Modal { onOpen() { const { contentEl } = this; - contentEl.addClass('focus-task-modal'); + contentEl.addClass('immerse-modal'); contentEl.createEl('h2', { text: '✏️ Edit Task' }); @@ -184,12 +184,12 @@ export class EditTaskModal extends Modal { .setDesc(`You've worked on this task for ${this.plugin.formatTimeHuman(this.task.actualMinutes)}`); } - const buttonContainer = contentEl.createEl('div', { cls: 'focus-task-modal-buttons' }); + const buttonContainer = contentEl.createEl('div', { cls: 'immerse-modal-buttons' }); - const cancelBtn = buttonContainer.createEl('button', { text: 'Cancel', cls: 'focus-task-btn' }); + const cancelBtn = buttonContainer.createEl('button', { text: 'Cancel', cls: 'immerse-btn' }); cancelBtn.addEventListener('click', () => this.close()); - const saveBtn = buttonContainer.createEl('button', { text: 'Save', cls: 'focus-task-btn focus-task-btn-primary' }); + const saveBtn = buttonContainer.createEl('button', { text: 'Save', cls: 'immerse-btn immerse-btn-primary' }); saveBtn.addEventListener('click', () => { this.plugin.updateTask(this.task.id, this.task); new Notice('✅ Task updated!'); diff --git a/src/types.ts b/src/types.ts index 771066b..09da4ef 100644 --- a/src/types.ts +++ b/src/types.ts @@ -73,7 +73,7 @@ export const DEFAULT_DATA: FocusTaskData = { pomodorosCompleted: 0, }; -export const VIEW_TYPE_FOCUS_TASK = 'focus-task-view'; +export const VIEW_TYPE_IMMERSE = 'immerse-view'; // ============ Celebration Messages ============ diff --git a/src/view.ts b/src/view.ts index 6308357..ca2f524 100644 --- a/src/view.ts +++ b/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(); diff --git a/styles.css b/styles.css index 9433c12..ac78dd3 100644 --- a/styles.css +++ b/styles.css @@ -1,10 +1,10 @@ /* ============================================ - FOCUS TASK - Obsidian Plugin Styles + IMMERSE - Obsidian Plugin Styles Inspired by https://www.blitzit.app/ ============================================ */ /* ============ CSS Variables ============ */ -.focus-task-container { +.immerse-container { --ft-primary: #6366f1; --ft-primary-light: #818cf8; --ft-primary-dark: #4f46e5; @@ -27,7 +27,7 @@ } /* ============ Container ============ */ -.focus-task-container { +.immerse-container { padding: 16px; font-family: var(--font-interface); overflow-y: auto; @@ -35,7 +35,7 @@ } /* ============ Header ============ */ -.focus-task-header { +.immerse-header { display: flex; justify-content: space-between; align-items: center; @@ -44,13 +44,13 @@ border-bottom: 1px solid var(--ft-border); } -.focus-task-title-section { +.immerse-title-section { display: flex; flex-direction: column; gap: 4px; } -.focus-task-title { +.immerse-title { margin: 0; font-size: 24px; font-weight: 700; @@ -60,18 +60,18 @@ background-clip: text; } -.focus-task-date { +.immerse-date { color: var(--ft-text-muted); font-size: 13px; } -.focus-task-header-actions { +.immerse-header-actions { display: flex; gap: 8px; } /* ============ Buttons ============ */ -.focus-task-btn { +.immerse-btn { display: inline-flex; align-items: center; justify-content: center; @@ -87,48 +87,48 @@ color: var(--ft-text); } -.focus-task-btn:hover { +.immerse-btn:hover { background: var(--ft-border); transform: translateY(-1px); } -.focus-task-btn-primary { +.immerse-btn-primary { background: linear-gradient(135deg, var(--ft-primary) 0%, var(--ft-primary-dark) 100%); color: white; } -.focus-task-btn-primary:hover { +.immerse-btn-primary:hover { background: linear-gradient(135deg, var(--ft-primary-light) 0%, var(--ft-primary) 100%); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4); } -.focus-task-btn-success { +.immerse-btn-success { background: var(--ft-success); color: white; } -.focus-task-btn-success:hover { +.immerse-btn-success:hover { background: #16a34a; } -.focus-task-btn-secondary { +.immerse-btn-secondary { background: var(--ft-bg-secondary); border: 1px solid var(--ft-border); } -.focus-task-btn-danger { +.immerse-btn-danger { background: transparent; color: var(--ft-danger); border: 1px solid var(--ft-danger); } -.focus-task-btn-danger:hover { +.immerse-btn-danger:hover { background: var(--ft-danger); color: white; } /* ============ Stats Bar ============ */ -.focus-task-stats-bar { +.immerse-stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; @@ -136,12 +136,12 @@ } @media (max-width: 600px) { - .focus-task-stats-bar { + .immerse-stats-bar { grid-template-columns: repeat(2, 1fr); } } -.focus-task-stat-item { +.immerse-stat-item { background: var(--ft-bg-secondary); border-radius: var(--ft-radius); padding: 12px; @@ -149,23 +149,23 @@ transition: all 0.2s ease; } -.focus-task-stat-item:hover { +.immerse-stat-item:hover { transform: translateY(-2px); box-shadow: var(--ft-shadow); } -.focus-task-stat-icon { +.immerse-stat-icon { font-size: 20px; margin-bottom: 4px; } -.focus-task-stat-value { +.immerse-stat-value { font-size: 18px; font-weight: 700; color: var(--ft-primary); } -.focus-task-stat-label { +.immerse-stat-label { font-size: 11px; color: var(--ft-text-muted); text-transform: uppercase; @@ -173,11 +173,11 @@ } /* ============ Active Task Section ============ */ -.focus-task-active-section { +.immerse-active-section { margin-bottom: 24px; } -.focus-task-start-prompt { +.immerse-start-prompt { background: linear-gradient(135deg, var(--ft-bg-secondary) 0%, var(--ft-bg-tertiary) 100%); border: 2px dashed var(--ft-border); border-radius: var(--ft-radius); @@ -185,7 +185,7 @@ text-align: center; } -.focus-task-prompt-icon { +.immerse-prompt-icon { font-size: 48px; margin-bottom: 12px; animation: ft-pulse 2s ease-in-out infinite; @@ -196,20 +196,20 @@ 50% { transform: scale(1.1); opacity: 0.8; } } -.focus-task-prompt-text { +.immerse-prompt-text { font-size: 18px; font-weight: 600; color: var(--ft-text); margin-bottom: 4px; } -.focus-task-prompt-hint { +.immerse-prompt-hint { font-size: 14px; color: var(--ft-text-muted); } /* ============ Active Task Card ============ */ -.focus-task-active-card { +.immerse-active-card { background: linear-gradient(135deg, var(--ft-primary) 0%, var(--ft-primary-dark) 100%); border-radius: var(--ft-radius); padding: 24px; @@ -217,11 +217,11 @@ box-shadow: var(--ft-shadow-lg); } -.focus-task-break-card { +.immerse-break-card { background: linear-gradient(135deg, var(--ft-break) 0%, #0891b2 100%); } -.focus-task-active-label { +.immerse-active-label { font-size: 12px; font-weight: 600; text-transform: uppercase; @@ -230,31 +230,31 @@ margin-bottom: 8px; } -.focus-task-active-task-name { +.immerse-active-task-name { font-size: 20px; font-weight: 700; margin-bottom: 16px; word-break: break-word; } -.focus-task-timer-display { +.immerse-timer-display { text-align: center; margin-bottom: 16px; } -.focus-task-timer-time { +.immerse-timer-time { font-size: 48px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 2px; } -.focus-task-timer-time.focus-task-overtime { +.immerse-timer-time.immerse-overtime { color: var(--ft-warning); } /* Progress Bar */ -.focus-task-progress-wrap { +.immerse-progress-wrap { background: rgba(255, 255, 255, 0.2); border-radius: 999px; height: 8px; @@ -262,18 +262,18 @@ margin-bottom: 12px; } -.focus-task-progress-bar { +.immerse-progress-bar { height: 100%; background: rgba(255, 255, 255, 0.9); border-radius: 999px; transition: width 0.3s ease; } -.focus-task-progress-bar.focus-task-overtime { +.immerse-progress-bar.immerse-overtime { background: var(--ft-warning); } -.focus-task-time-info { +.immerse-time-info { display: flex; justify-content: space-between; font-size: 13px; @@ -281,13 +281,13 @@ margin-bottom: 16px; } -.focus-task-active-controls { +.immerse-active-controls { display: flex; gap: 8px; flex-wrap: wrap; } -.focus-task-active-controls .focus-task-btn { +.immerse-active-controls .immerse-btn { flex: 1; min-width: 80px; background: rgba(255, 255, 255, 0.2); @@ -295,33 +295,33 @@ border: none; } -.focus-task-active-controls .focus-task-btn:hover { +.immerse-active-controls .immerse-btn:hover { background: rgba(255, 255, 255, 0.3); } -.focus-task-active-controls .focus-task-btn-success { +.immerse-active-controls .immerse-btn-success { background: var(--ft-success); } -.focus-task-active-controls .focus-task-btn-danger { +.immerse-active-controls .immerse-btn-danger { background: transparent; border: 1px solid rgba(255, 255, 255, 0.4); } /* ============ Task List Section ============ */ -.focus-task-list-section { +.immerse-list-section { flex: 1; } /* Filters */ -.focus-task-filters { +.immerse-filters { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } -.focus-task-filter-btn { +.immerse-filter-btn { padding: 6px 12px; border-radius: 999px; font-size: 13px; @@ -332,49 +332,49 @@ transition: all 0.2s ease; } -.focus-task-filter-btn:hover { +.immerse-filter-btn:hover { background: var(--ft-bg-tertiary); color: var(--ft-text); } -.focus-task-filter-btn.active { +.immerse-filter-btn.active { background: var(--ft-primary); border-color: var(--ft-primary); color: white; } /* Task List */ -.focus-task-task-list { +.immerse-task-list { display: flex; flex-direction: column; gap: 8px; } /* Empty State */ -.focus-task-empty-state { +.immerse-empty-state { text-align: center; padding: 40px 20px; color: var(--ft-text-muted); } -.focus-task-empty-icon { +.immerse-empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.5; } -.focus-task-empty-text { +.immerse-empty-text { font-size: 16px; font-weight: 500; margin-bottom: 4px; } -.focus-task-empty-hint { +.immerse-empty-hint { font-size: 14px; } /* ============ Task Item ============ */ -.focus-task-task-item { +.immerse-task-item { display: flex; align-items: center; gap: 12px; @@ -385,27 +385,27 @@ transition: all 0.2s ease; } -.focus-task-task-item:hover { +.immerse-task-item:hover { border-color: var(--ft-primary); box-shadow: var(--ft-shadow); transform: translateX(4px); } -.focus-task-task-item.active { +.immerse-task-item.active { border-color: var(--ft-primary); background: linear-gradient(90deg, rgba(99, 102, 241, 0.1) 0%, var(--ft-bg-secondary) 100%); } -.focus-task-task-item.completed { +.immerse-task-item.completed { opacity: 0.6; } -.focus-task-task-item.completed .focus-task-task-text { +.immerse-task-item.completed .immerse-task-text { text-decoration: line-through; } /* Checkbox */ -.focus-task-checkbox { +.immerse-checkbox { width: 24px; height: 24px; min-width: 24px; @@ -420,18 +420,18 @@ transition: all 0.2s ease; } -.focus-task-checkbox:hover { +.immerse-checkbox:hover { transform: scale(1.1); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); } /* Task Content */ -.focus-task-task-content { +.immerse-task-content { flex: 1; min-width: 0; } -.focus-task-task-header { +.immerse-task-header { display: flex; align-items: center; gap: 8px; @@ -439,44 +439,44 @@ margin-bottom: 4px; } -.focus-task-task-text { +.immerse-task-text { font-size: 14px; font-weight: 500; color: var(--ft-text); word-break: break-word; } -.focus-task-list-badge { +.immerse-list-badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 500; } -.focus-task-task-meta { +.immerse-task-meta { display: flex; gap: 12px; font-size: 12px; color: var(--ft-text-muted); } -.focus-task-overtime-text { +.immerse-overtime-text { color: var(--ft-warning); } /* Task Actions */ -.focus-task-task-actions { +.immerse-task-actions { display: flex; gap: 4px; opacity: 0; transition: opacity 0.2s ease; } -.focus-task-task-item:hover .focus-task-task-actions { +.immerse-task-item:hover .immerse-task-actions { opacity: 1; } -.focus-task-task-btn { +.immerse-task-btn { width: 32px; height: 32px; border-radius: 6px; @@ -490,18 +490,18 @@ transition: all 0.2s ease; } -.focus-task-task-btn:hover { +.immerse-task-btn:hover { background: var(--ft-primary); color: white; transform: scale(1.1); } -.focus-task-delete-btn:hover { +.immerse-delete-btn:hover { background: var(--ft-danger); } /* ============ Status Bar Timer ============ */ -.focus-task-status-bar { +.immerse-status-bar { cursor: pointer; padding: 0 8px; display: flex; @@ -511,26 +511,26 @@ transition: all 0.2s ease; } -.focus-task-status-bar:hover { +.immerse-status-bar:hover { color: var(--text-accent); } -.focus-task-status-bar.focus-task-status-active { +.immerse-status-bar.immerse-status-active { color: var(--text-accent); font-weight: 500; } /* ============ Modal Styles ============ */ -.focus-task-modal { +.immerse-modal { padding: 20px; } -.focus-task-modal h2 { +.immerse-modal h2 { margin-top: 0; margin-bottom: 20px; } -.focus-task-modal-buttons { +.immerse-modal-buttons { display: flex; justify-content: flex-end; gap: 8px; @@ -540,41 +540,41 @@ } /* About section in settings */ -.focus-task-about { +.immerse-about { background: var(--ft-bg-secondary); border-radius: var(--ft-radius); padding: 16px; margin-top: 8px; } -.focus-task-about p { +.immerse-about p { margin: 0 0 12px 0; line-height: 1.6; } -.focus-task-about p:last-child { +.immerse-about p:last-child { margin-bottom: 0; } -.focus-task-about a { +.immerse-about a { color: var(--ft-primary); } /* ============ Scrollbar Styling ============ */ -.focus-task-container::-webkit-scrollbar { +.immerse-container::-webkit-scrollbar { width: 8px; } -.focus-task-container::-webkit-scrollbar-track { +.immerse-container::-webkit-scrollbar-track { background: transparent; } -.focus-task-container::-webkit-scrollbar-thumb { +.immerse-container::-webkit-scrollbar-thumb { background: var(--ft-border); border-radius: 4px; } -.focus-task-container::-webkit-scrollbar-thumb:hover { +.immerse-container::-webkit-scrollbar-thumb:hover { background: var(--ft-text-muted); } @@ -585,37 +585,37 @@ 100% { transform: scale(1); } } -.focus-task-checkbox.completing { +.immerse-checkbox.completing { animation: ft-checkComplete 0.3s ease; } /* ============ Dark mode adjustments ============ */ -.theme-dark .focus-task-status-bar { +.theme-dark .immerse-status-bar { background: var(--background-secondary); } /* ============ Mobile Responsive ============ */ @media (max-width: 400px) { - .focus-task-header { + .immerse-header { flex-direction: column; align-items: flex-start; gap: 12px; } - .focus-task-active-controls { + .immerse-active-controls { flex-direction: column; } - .focus-task-active-controls .focus-task-btn { + .immerse-active-controls .immerse-btn { flex: none; width: 100%; } - .focus-task-task-item { + .immerse-task-item { flex-wrap: wrap; } - .focus-task-task-actions { + .immerse-task-actions { opacity: 1; width: 100%; justify-content: flex-end; diff --git a/versions.json b/versions.json index cce5136..73a4523 100644 --- a/versions.json +++ b/versions.json @@ -3,5 +3,6 @@ "1.0.5": "0.15.0", "1.0.6": "0.15.0", "1.0.7": "0.15.0", - "1.0.8": "0.15.0" + "1.0.8": "0.15.0", + "1.0.9": "0.15.0" }