Refactor Time Selector and Scheduler UI; Implement TimePickerPopover Component

- Updated TimeSelector.vue styles for smaller dimensions and font sizes.
- Added new API proxy for '/events' in vite.config.ts.
- Created bug specifications for various UI issues and fixes in bugs-1.0.5-001.md and bugs-1.0.5-002.md.
- Introduced TimePickerPopover.vue for a new time selection interface in the chore scheduler.
- Refactored ScheduleModal.vue to replace checkbox rows with a chip-based design for selecting specific days.
- Enhanced chore scheduling logic to ensure proper handling of time extensions and UI updates.

frontend/vue-app/src/components/child/ChildView.vue

@@ -348,7 +348,7 @@ function choreDueLabel(item: ChildTask): string | null {
   const due = getDueTimeToday(item.schedule, today)
   if (!due) return null
   if (item.extension_date && isExtendedToday(item.extension_date, today)) return null
-  return formatDueTimeLabel(due.hour, due.minute)
+  return `Due by ${formatDueTimeLabel(due.hour, due.minute)}`
 }
 
 function clearExpiryTimers() {
@@ -470,7 +470,7 @@ onUnmounted(() => {
           :filter-fn="(item: ChildTask) => item.is_good && isChoreScheduledToday(item)"
         >
           <template #item="{ item }: { item: ChildTask }">
-            <span v-if="isChoreExpired(item)" class="pending">TOO LATE</span>
+            <span v-if="isChoreExpired(item)" class="chore-stamp">TOO LATE</span>
             <div class="item-name">{{ item.name }}</div>
             <img v-if="item.image_url" :src="item.image_url" alt="Task Image" class="item-image" />
             <div
@@ -668,14 +668,46 @@ onUnmounted(() => {
   filter: grayscale(0.7);
 }
 :deep(.chore-inactive) {
-  opacity: 0.45;
-  filter: grayscale(0.6);
+  position: relative;
+}
+:deep(.chore-inactive::before) {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: rgba(160, 160, 160, 0.45);
+  filter: grayscale(80%);
+  z-index: 1;
+  pointer-events: none;
+  border-radius: inherit;
+}
+
+.chore-stamp {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 80%;
+  background: rgba(34, 34, 34, 0.65);
+  color: var(--text-bad-color, #ef4444);
+  text-shadow: var(--item-points-shadow);
+  font-weight: 700;
+  font-size: 1.05rem;
+  text-align: center;
+  border-radius: 6px;
+  padding: 0.4rem 0;
+  letter-spacing: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  opacity: 0.95;
+  pointer-events: none;
 }
 
 .due-label {
-  font-size: 0.72rem;
+  font-size: 0.85rem;
   font-weight: 600;
-  color: var(--due-label-color, #aaa);
+  color: var(--text-bad-color, #ef4444);
   margin-top: 0.15rem;
   letter-spacing: 0.3px;
 }