feat: redesign Timer - amber Start, colon pulse, toast
This commit is contained in:
Your Name
235
src/views/Timer.vue
Normal file
235
src/views/Timer.vue
Normal file
@@ -0,0 +1,235 @@
|
|||||||
|
<template>
|
||||||
|
<div class="p-6">
|
||||||
|
<!-- Hero timer display -->
|
||||||
|
<div class="text-center pt-4 pb-8">
|
||||||
|
<p class="text-[3rem] font-mono font-medium tracking-wider mb-6">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<button
|
||||||
|
@click="toggleTimer"
|
||||||
|
class="px-10 py-3 text-sm font-medium rounded transition-colors duration-150"
|
||||||
|
:class="timerStore.isRunning
|
||||||
|
? 'bg-status-error text-white hover:bg-status-error/80'
|
||||||
|
: 'bg-accent text-bg-base hover:bg-accent-hover'"
|
||||||
|
>
|
||||||
|
{{ timerStore.isRunning ? 'Stop' : 'Start' }}
|
||||||
|
</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>
|
||||||
|
<select
|
||||||
|
v-model="selectedProject"
|
||||||
|
:disabled="timerStore.isRunning"
|
||||||
|
class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible disabled:opacity-40 disabled:cursor-not-allowed"
|
||||||
|
>
|
||||||
|
<option :value="null">Select project</option>
|
||||||
|
<option
|
||||||
|
v-for="project in activeProjects"
|
||||||
|
:key="project.id"
|
||||||
|
:value="project.id"
|
||||||
|
>
|
||||||
|
{{ project.name }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Task</label>
|
||||||
|
<select
|
||||||
|
v-model="selectedTask"
|
||||||
|
:disabled="timerStore.isRunning || !selectedProject"
|
||||||
|
class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible disabled:opacity-40 disabled:cursor-not-allowed"
|
||||||
|
>
|
||||||
|
<option :value="null">Select task</option>
|
||||||
|
<option
|
||||||
|
v-for="task in projectTasks"
|
||||||
|
:key="task.id"
|
||||||
|
:value="task.id"
|
||||||
|
>
|
||||||
|
{{ task.name }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</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.isRunning"
|
||||||
|
class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded 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="text-right">
|
||||||
|
<p class="text-[0.75rem] font-mono text-text-primary">{{ formatDuration(entry.duration) }}</p>
|
||||||
|
<p class="text-[0.6875rem] text-text-tertiary">{{ formatDate(entry.start_time) }}</p>
|
||||||
|
</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>
|
||||||
|
</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 { useToastStore } from '../stores/toast'
|
||||||
|
import { Timer as TimerIcon } from 'lucide-vue-next'
|
||||||
|
|
||||||
|
const timerStore = useTimerStore()
|
||||||
|
const projectsStore = useProjectsStore()
|
||||||
|
const entriesStore = useEntriesStore()
|
||||||
|
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)
|
||||||
|
})
|
||||||
|
|
||||||
|
// 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)
|
||||||
|
})
|
||||||
|
|
||||||
|
// Toggle timer
|
||||||
|
function toggleTimer() {
|
||||||
|
if (timerStore.isRunning) {
|
||||||
|
timerStore.stop()
|
||||||
|
entriesStore.fetchEntries()
|
||||||
|
} else {
|
||||||
|
if (!selectedProject.value) {
|
||||||
|
toastStore.info('Please select a project before starting the timer')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
timerStore.start()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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`
|
||||||
|
}
|
||||||
|
|
||||||
|
// Format date
|
||||||
|
function formatDate(dateString: string): string {
|
||||||
|
const date = new Date(dateString)
|
||||||
|
return date.toLocaleDateString('en-US', {
|
||||||
|
month: 'short',
|
||||||
|
day: 'numeric',
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// Load data on mount
|
||||||
|
onMounted(async () => {
|
||||||
|
await Promise.all([
|
||||||
|
projectsStore.fetchProjects(),
|
||||||
|
entriesStore.fetchEntries()
|
||||||
|
])
|
||||||
|
|
||||||
|
// Restore timer state
|
||||||
|
selectedProject.value = timerStore.selectedProjectId
|
||||||
|
selectedTask.value = timerStore.selectedTaskId
|
||||||
|
description.value = timerStore.description
|
||||||
|
})
|
||||||
|
</script>
|
||||||
Reference in New Issue
Block a user