feat(time-tracking) : redesign calendar blocks and view mode switcher

Restyle time entry blocks with title on top, project below, tags
bottom-left, duration bottom-right. Checkerboard pattern for entries
without project. Pill-style view mode switcher. Link DateFilter mode
to main view mode and remove redundant toggle.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/components/ui/DateFilter.vue

@@ -15,22 +15,6 @@
         >
             <template #trigger>
                 <div class="flex items-center gap-1">
-                    <div class="flex shrink-0 overflow-hidden rounded-md border border-neutral-300">
-                        <button
-                            class="px-2 py-[7px] text-xs font-medium transition"
-                            :class="mode === 'day' ? 'bg-primary-500 text-white' : 'text-neutral-500 hover:bg-neutral-100'"
-                            @click.stop="switchMode('day')"
-                        >
-                            {{ t('common.day') }}
-                        </button>
-                        <button
-                            class="px-2 py-[7px] text-xs font-medium transition"
-                            :class="mode === 'week' ? 'bg-primary-500 text-white' : 'text-neutral-500 hover:bg-neutral-100'"
-                            @click.stop="switchMode('week')"
-                        >
-                            {{ t('common.weekShort') }}
-                        </button>
-                    </div>
                     <div class="relative cursor-pointer">
                         <input
                             :value="displayValue"
@@ -85,6 +69,7 @@ const { t } = useI18n()
 const props = defineProps<{
     modelValue?: Date | [Date, Date] | null
     placeholder?: string
+    pickerMode?: 'day' | 'week'
 }>()
 
 const emit = defineEmits<{
@@ -92,7 +77,7 @@ const emit = defineEmits<{
 }>()
 
 const datepicker = ref<InstanceType<typeof VueDatePicker> | null>(null)
-const mode = ref<'day' | 'week'>('week')
+const mode = computed(() => props.pickerMode ?? 'week')
 const internalValue = ref<Date | Date[] | null>(null)
 
 const displayValue = computed(() => {
@@ -133,13 +118,6 @@ function formatShortDate(d: Date): string {
     return `${day}/${month}`
 }
 
-function switchMode(newMode: 'day' | 'week') {
-    if (mode.value === newMode) return
-    mode.value = newMode
-    internalValue.value = null
-    emit('update:modelValue', null)
-}
-
 function onUpdate(value: Date | Date[] | null) {
     if (!value) {
         emit('update:modelValue', null)
@@ -163,7 +141,6 @@ function onClear() {
 }
 
 function selectToday() {
-    mode.value = 'day'
     const today = new Date()
     today.setHours(0, 0, 0, 0)
     internalValue.value = today
@@ -171,7 +148,6 @@ function selectToday() {
 }
 
 function selectThisWeek() {
-    mode.value = 'week'
     const now = new Date()
     const day = now.getDay()
     const monday = new Date(now)