337 lines
11 KiB
Vue
337 lines
11 KiB
Vue
<template>
|
|
<div class="p-6">
|
|
<!-- Hero timer display -->
|
|
<div class="text-center pt-4 pb-8">
|
|
<p class="text-[3.5rem] font-medium font-[family-name:var(--font-heading)] tracking-tighter mb-2">
|
|
<span class="text-text-primary">{{ timerParts.hours }}</span>
|
|
<span :class="timerStore.isRunning ? 'text-accent-text animate-pulse-colon' : 'text-text-primary'">:</span>
|
|
<span class="text-text-primary">{{ timerParts.minutes }}</span>
|
|
<span :class="timerStore.isRunning ? 'text-accent-text animate-pulse-colon' : 'text-text-primary'">:</span>
|
|
<span class="text-text-primary">{{ timerParts.seconds }}</span>
|
|
</p>
|
|
|
|
<!-- Paused indicator -->
|
|
<p
|
|
v-if="timerStore.isPaused"
|
|
class="text-[0.75rem] font-medium mb-4"
|
|
:class="timerStore.timerState === 'PAUSED_IDLE' ? 'text-status-warning' : 'text-status-info'"
|
|
>
|
|
{{ timerStore.timerState === 'PAUSED_IDLE' ? 'Paused (idle)' : 'Paused (app not visible)' }}
|
|
</p>
|
|
<div v-else class="mb-4" />
|
|
|
|
<button
|
|
@click="toggleTimer"
|
|
class="px-10 py-3 text-sm font-medium rounded-lg transition-colors duration-150"
|
|
:class="buttonClass"
|
|
>
|
|
{{ buttonLabel }}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Inputs -->
|
|
<div class="max-w-[36rem] mx-auto mb-8">
|
|
<div class="grid grid-cols-2 gap-4 mb-4">
|
|
<div>
|
|
<label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Project</label>
|
|
<AppSelect
|
|
v-model="selectedProject"
|
|
:options="activeProjects"
|
|
label-key="name"
|
|
value-key="id"
|
|
placeholder="Select project"
|
|
:placeholder-value="null"
|
|
:disabled="!timerStore.isStopped"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Task</label>
|
|
<AppSelect
|
|
v-model="selectedTask"
|
|
:options="projectTasks"
|
|
label-key="name"
|
|
value-key="id"
|
|
placeholder="Select task"
|
|
:placeholder-value="null"
|
|
:disabled="!timerStore.isStopped || !selectedProject"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Description</label>
|
|
<input
|
|
v-model="description"
|
|
type="text"
|
|
:disabled="!timerStore.isStopped"
|
|
class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary placeholder-text-tertiary focus:outline-none focus:border-border-visible disabled:opacity-40 disabled:cursor-not-allowed"
|
|
placeholder="What are you working on?"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent entries -->
|
|
<div class="max-w-[36rem] mx-auto">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<h2 class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em]">Recent</h2>
|
|
<router-link v-if="recentEntries.length > 0" to="/entries" class="text-xs text-text-tertiary hover:text-text-secondary transition-colors">View all</router-link>
|
|
</div>
|
|
|
|
<div v-if="recentEntries.length > 0">
|
|
<div
|
|
v-for="(entry, index) in recentEntries"
|
|
:key="entry.id"
|
|
class="flex items-center justify-between py-3 border-b border-border-subtle last:border-0"
|
|
:class="index === 0 ? 'border-l-2 border-l-accent pl-3' : ''"
|
|
>
|
|
<div class="flex items-center gap-3">
|
|
<div
|
|
class="w-2 h-2 rounded-full shrink-0"
|
|
:style="{ backgroundColor: getProjectColor(entry.project_id) }"
|
|
/>
|
|
<div>
|
|
<p class="text-[0.75rem] text-text-primary">{{ getProjectName(entry.project_id) }}</p>
|
|
<p class="text-[0.6875rem] text-text-tertiary">{{ entry.description || 'No description' }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<div class="text-right">
|
|
<p class="text-[0.75rem] font-mono text-text-primary">{{ formatDuration(entry.duration) }}</p>
|
|
<p class="text-[0.6875rem] text-text-tertiary">{{ formatDateTime(entry.start_time) }}</p>
|
|
</div>
|
|
<button
|
|
v-if="timerStore.isStopped"
|
|
@click="repeatEntry(entry)"
|
|
class="p-1 text-text-tertiary hover:text-text-secondary transition-colors"
|
|
title="Repeat"
|
|
>
|
|
<RotateCcw class="w-3 h-3" :stroke-width="2" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Empty state -->
|
|
<div v-else class="flex flex-col items-center py-8">
|
|
<TimerIcon class="w-10 h-10 text-text-tertiary" :stroke-width="1.5" />
|
|
<p class="text-sm text-text-secondary mt-3">No entries today</p>
|
|
<p class="text-xs text-text-tertiary mt-1">Select a project and hit Start to begin tracking</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Idle Prompt Dialog -->
|
|
<IdlePromptDialog
|
|
:show="timerStore.showIdlePrompt"
|
|
:idle-seconds="timerStore.idleDurationSeconds"
|
|
@continue-keep="onIdleContinueKeep"
|
|
@continue-subtract="onIdleContinueSubtract"
|
|
@stop-timer="onIdleStop"
|
|
/>
|
|
|
|
<!-- App Tracking Prompt Dialog -->
|
|
<AppTrackingPromptDialog
|
|
:show="timerStore.showAppPrompt"
|
|
@continue-timer="onAppContinue"
|
|
@stop-timer="onAppStop"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed, watch, onMounted } from 'vue'
|
|
import { useTimerStore } from '../stores/timer'
|
|
import { useProjectsStore, type Task } from '../stores/projects'
|
|
import { useEntriesStore } from '../stores/entries'
|
|
import { useSettingsStore } from '../stores/settings'
|
|
import { useToastStore } from '../stores/toast'
|
|
import { Timer as TimerIcon, RotateCcw } from 'lucide-vue-next'
|
|
import AppSelect from '../components/AppSelect.vue'
|
|
import IdlePromptDialog from '../components/IdlePromptDialog.vue'
|
|
import AppTrackingPromptDialog from '../components/AppTrackingPromptDialog.vue'
|
|
import { formatDateTime } from '../utils/locale'
|
|
|
|
const timerStore = useTimerStore()
|
|
const projectsStore = useProjectsStore()
|
|
const entriesStore = useEntriesStore()
|
|
const settingsStore = useSettingsStore()
|
|
const toastStore = useToastStore()
|
|
|
|
// Local state for inputs
|
|
const selectedProject = ref<number | null>(timerStore.selectedProjectId)
|
|
const selectedTask = ref<number | null>(timerStore.selectedTaskId)
|
|
const description = ref(timerStore.description)
|
|
const projectTasks = ref<Task[]>([])
|
|
|
|
// Split timer into parts for colon animation
|
|
const timerParts = computed(() => {
|
|
const time = timerStore.formattedTime
|
|
const parts = time.split(':')
|
|
return {
|
|
hours: parts[0] || '00',
|
|
minutes: parts[1] || '00',
|
|
seconds: parts[2] || '00'
|
|
}
|
|
})
|
|
|
|
// Active (non-archived) projects
|
|
const activeProjects = computed(() => {
|
|
return projectsStore.projects.filter(p => !p.archived)
|
|
})
|
|
|
|
// Recent entries (last 5)
|
|
const recentEntries = computed(() => {
|
|
return entriesStore.entries.slice(0, 5)
|
|
})
|
|
|
|
// Button appearance
|
|
const buttonLabel = computed(() => {
|
|
if (timerStore.isStopped) return 'Start'
|
|
if (timerStore.isPaused) return 'Stop'
|
|
return 'Stop'
|
|
})
|
|
|
|
const buttonClass = computed(() => {
|
|
if (timerStore.isStopped) return 'bg-accent text-bg-base hover:bg-accent-hover'
|
|
return 'bg-status-error text-white hover:bg-status-error/80'
|
|
})
|
|
|
|
// Watch project selection and fetch tasks
|
|
watch(selectedProject, async (newProjectId) => {
|
|
timerStore.setProject(newProjectId)
|
|
selectedTask.value = null
|
|
projectTasks.value = []
|
|
|
|
if (newProjectId) {
|
|
projectTasks.value = await projectsStore.fetchTasks(newProjectId)
|
|
}
|
|
})
|
|
|
|
// Watch task selection
|
|
watch(selectedTask, (newTaskId) => {
|
|
timerStore.setTask(newTaskId)
|
|
})
|
|
|
|
// Watch description
|
|
watch(description, (newDesc) => {
|
|
timerStore.setDescription(newDesc)
|
|
})
|
|
|
|
// Bring window to front when prompts appear
|
|
async function bringToFront() {
|
|
try {
|
|
const { getCurrentWindow } = await import('@tauri-apps/api/window')
|
|
const win = getCurrentWindow()
|
|
await win.show()
|
|
await win.setFocus()
|
|
} catch (e) {
|
|
// Ignore if not in Tauri context
|
|
}
|
|
}
|
|
|
|
watch(() => timerStore.showIdlePrompt, (show) => {
|
|
if (show) bringToFront()
|
|
})
|
|
|
|
watch(() => timerStore.showAppPrompt, (show) => {
|
|
if (show) bringToFront()
|
|
})
|
|
|
|
// Send OS notification when entering PAUSED_APP in "notify" mode
|
|
watch(() => timerStore.timerState, async (newState, oldState) => {
|
|
if (newState === 'PAUSED_APP' && oldState === 'RUNNING') {
|
|
const mode = settingsStore.settings.app_tracking_mode || 'auto'
|
|
if (mode === 'notify') {
|
|
try {
|
|
const { sendNotification } = await import('@tauri-apps/plugin-notification')
|
|
sendNotification({
|
|
title: 'ZeroClock',
|
|
body: 'Tracked app is no longer visible. Timer paused.',
|
|
})
|
|
} catch (e) {
|
|
// Ignore
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
// Toggle timer
|
|
function toggleTimer() {
|
|
if (timerStore.isStopped) {
|
|
if (!selectedProject.value) {
|
|
toastStore.info('Please select a project before starting the timer')
|
|
return
|
|
}
|
|
timerStore.start()
|
|
} else {
|
|
timerStore.stop()
|
|
entriesStore.fetchEntries()
|
|
}
|
|
}
|
|
|
|
// Idle prompt handlers
|
|
function onIdleContinueKeep() {
|
|
timerStore.handleIdleContinueKeep()
|
|
}
|
|
|
|
function onIdleContinueSubtract() {
|
|
timerStore.handleIdleContinueSubtract()
|
|
}
|
|
|
|
async function onIdleStop() {
|
|
await timerStore.handleIdleStop()
|
|
entriesStore.fetchEntries()
|
|
}
|
|
|
|
// App prompt handlers
|
|
function onAppContinue() {
|
|
timerStore.handleAppContinue()
|
|
}
|
|
|
|
async function onAppStop() {
|
|
await timerStore.handleAppStop()
|
|
entriesStore.fetchEntries()
|
|
}
|
|
|
|
// Repeat an entry (fill in project/task/description)
|
|
function repeatEntry(entry: { project_id: number; task_id?: number; description?: string }) {
|
|
selectedProject.value = entry.project_id
|
|
selectedTask.value = entry.task_id || null
|
|
description.value = entry.description || ''
|
|
}
|
|
|
|
// Get project name by ID
|
|
function getProjectName(projectId: number): string {
|
|
const project = projectsStore.projects.find(p => p.id === projectId)
|
|
return project?.name || 'Unknown Project'
|
|
}
|
|
|
|
// Get project color by ID
|
|
function getProjectColor(projectId: number): string {
|
|
const project = projectsStore.projects.find(p => p.id === projectId)
|
|
return project?.color || '#6B7280'
|
|
}
|
|
|
|
// Format duration from seconds to readable format
|
|
function formatDuration(seconds: number): string {
|
|
const hours = Math.floor(seconds / 3600)
|
|
const minutes = Math.floor((seconds % 3600) / 60)
|
|
if (hours > 0) {
|
|
return `${hours}h ${minutes}m`
|
|
}
|
|
return `${minutes}m`
|
|
}
|
|
|
|
// Load data on mount
|
|
onMounted(async () => {
|
|
await Promise.all([
|
|
projectsStore.fetchProjects(),
|
|
entriesStore.fetchEntries(),
|
|
settingsStore.fetchSettings()
|
|
])
|
|
|
|
// Restore timer state
|
|
selectedProject.value = timerStore.selectedProjectId
|
|
selectedTask.value = timerStore.selectedTaskId
|
|
description.value = timerStore.description
|
|
})
|
|
</script>
|