atash/chronus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 6 Wiki Activity

Adding manual entries + UI cleanup

Browse Source
This commit is contained in:
Atridad Lahiji
2026-01-16 16:28:06 -07:00
parent 38fe0ea9ce
commit 15b903f1af
12 changed files with 817 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/Timer.vue
View File

@@ -127,7 +127,9 @@ async function stopTimer() {
</script>
<template>
<div class="card bg-base-200 shadow-xl border border-base-300 mb-6">
<div
class="card bg-base-200/50 backdrop-blur-sm shadow-lg border border-base-300/50 mb-6 hover:border-base-300 transition-all duration-200"
>
<div class="card-body gap-6">
<!-- Client and Description Row -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
@@ -137,7 +139,7 @@ async function stopTimer() {
</label>
<select
v-model="selectedClientId"
class="select select-bordered w-full"
class="select select-bordered w-full bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors"
:disabled="isRunning"
>
<option value="">Select a client...</option>
@@ -157,7 +159,7 @@ async function stopTimer() {
</label>
<select
v-model="selectedCategoryId"
class="select select-bordered w-full"
class="select select-bordered w-full bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors"
:disabled="isRunning"
>
<option value="">Select a category...</option>
@@ -181,7 +183,7 @@ async function stopTimer() {
v-model="description"
type="text"
placeholder="What are you working on?"
class="input input-bordered w-full"
class="input input-bordered w-full bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors"
:disabled="isRunning"
/>
</div>
@@ -197,8 +199,10 @@ async function stopTimer() {
:key="tag.id"
@click="toggleTag(tag.id)"
:class="[
'badge badge-lg cursor-pointer transition-all',
selectedTags.includes(tag.id) ? 'badge-primary' : 'badge-outline',
'badge badge-lg cursor-pointer transition-all hover:scale-105',
selectedTags.includes(tag.id)
? 'badge-primary shadow-lg shadow-primary/20'
: 'badge-outline hover:bg-base-300/50',
]"
:disabled="isRunning"
type="button"
@@ -211,18 +215,22 @@ async function stopTimer() {
<!-- Timer and Action Row -->
<div class="flex flex-col sm:flex-row items-center gap-6 pt-4">
<div
class="font-mono text-5xl font-bold tabular-nums tracking-tight text-center sm:text-left grow"
class="font-mono text-5xl font-bold tabular-nums tracking-tight text-center sm:text-left grow text-primary"
>
{{ formatTime(elapsedTime) }}
</div>
<button
v-if="!isRunning"
@click="startTimer"
class="btn btn-primary btn-lg min-w-40"
class="btn btn-primary btn-lg min-w-40 shadow-lg shadow-primary/20 hover:shadow-xl hover:shadow-primary/30 transition-all"
>
▶️ Start Timer
</button>
<button v-else @click="stopTimer" class="btn btn-error btn-lg min-w-40">
<button
v-else
@click="stopTimer"
class="btn btn-error btn-lg min-w-40 shadow-lg shadow-error/20 hover:shadow-xl hover:shadow-error/30 transition-all"
>
⏹️ Stop Timer
</button>
</div>