feat: add Calendar, Timesheet, and MiniTimer views
Calendar shows weekly time-block layout with hour rows, entry positioning, current time indicator, and week navigation. Timesheet provides a weekly grid with project/task rows, day columns, totals, and add-row functionality. MiniTimer is a minimal always-on-top timer display for the floating window.
This commit is contained in:
27
src/views/MiniTimer.vue
Normal file
27
src/views/MiniTimer.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div class="mini-timer flex items-center justify-center h-screen bg-bg-base select-none" style="-webkit-app-region: drag">
|
||||
<div class="text-center">
|
||||
<p class="text-[2rem] font-medium font-[family-name:var(--font-heading)] tracking-tighter text-text-primary">
|
||||
{{ timerStore.formattedTime }}
|
||||
</p>
|
||||
<p v-if="projectName" class="text-[0.6875rem] text-text-tertiary mt-1 truncate max-w-[180px]">
|
||||
{{ projectName }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useTimerStore } from '../stores/timer'
|
||||
import { useProjectsStore } from '../stores/projects'
|
||||
|
||||
const timerStore = useTimerStore()
|
||||
const projectsStore = useProjectsStore()
|
||||
|
||||
const projectName = computed(() => {
|
||||
if (!timerStore.selectedProjectId) return ''
|
||||
const project = projectsStore.projects.find(p => p.id === timerStore.selectedProjectId)
|
||||
return project?.name || ''
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user