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:
Your Name
2026-02-18 10:39:08 +02:00
parent 838cb55c8e
commit 46ce6d119d
5 changed files with 822 additions and 1 deletions

27
src/views/MiniTimer.vue Normal file
View 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>