From 5cb13862ef0cf908e37808bfbcda5722a6686757 Mon Sep 17 00:00:00 2001
From: mohamad <mohamad>
Date: Sun, 1 Jun 2025 22:00:11 +0200
Subject: [PATCH] Enhance ChoresPage accessibility and functionality

- Added ARIA roles and attributes to buttons and modals for improved accessibility.
- Updated chore types and properties in the Chore interface to allow for null values.
- Refactored chore loading and filtering logic to handle edge cases and improve performance.
- Enhanced calendar and list views with better user feedback for empty states and loading indicators.
- Improved styling for mobile responsiveness and dark mode support.

These changes aim to enhance user experience, accessibility, and maintainability of the ChoresPage component.
---
 fe/src/pages/ChoresPage.vue | 1513 +++++++++++++++++++++++++----------
 fe/src/types/chore.ts       |   37 +-
 2 files changed, 1085 insertions(+), 465 deletions(-)

diff --git a/fe/src/pages/ChoresPage.vue b/fe/src/pages/ChoresPage.vue
index c4603db..8019483 100644
--- a/fe/src/pages/ChoresPage.vue
+++ b/fe/src/pages/ChoresPage.vue
@@ -3,31 +3,31 @@
     <div class="neo-list-header">
       <div class="header-left">
         <h1 class="neo-title">Chores</h1>
-        <div class="view-tabs">
+        <div class="view-tabs" role="tablist">
           <button class="neo-tab-btn" :class="{ active: activeView === 'overdue' }" @click="activeView = 'overdue'"
-            :disabled="isLoading">
+            :disabled="isLoading" role="tab" :aria-selected="activeView === 'overdue'">
             <span class="material-icons">warning</span>
             Overdue
             <span v-if="counts.overdue > 0" class="neo-tab-count">{{ counts.overdue }}</span>
           </button>
           <button class="neo-tab-btn" :class="{ active: activeView === 'today' }" @click="activeView = 'today'"
-            :disabled="isLoading">
+            :disabled="isLoading" role="tab" :aria-selected="activeView === 'today'">
             <span class="material-icons">today</span>
             Today
             <span v-if="counts.today > 0" class="neo-tab-count">{{ counts.today }}</span>
           </button>
           <button class="neo-tab-btn" :class="{ active: activeView === 'upcoming' }" @click="activeView = 'upcoming'"
-            :disabled="isLoading">
+            :disabled="isLoading" role="tab" :aria-selected="activeView === 'upcoming'">
             <span class="material-icons">upcoming</span>
             Upcoming
           </button>
           <button class="neo-tab-btn" :class="{ active: activeView === 'all' }" @click="activeView = 'all'"
-            :disabled="isLoading">
+            :disabled="isLoading" role="tab" :aria-selected="activeView === 'all'">
             <span class="material-icons">list</span>
             All Pending
           </button>
           <button class="neo-tab-btn" :class="{ active: activeView === 'completed' }" @click="activeView = 'completed'"
-            :disabled="isLoading">
+            :disabled="isLoading" role="tab" :aria-selected="activeView === 'completed'">
             <span class="material-icons">check_circle</span>
             Completed
           </button>
@@ -36,19 +36,20 @@
       <div class="header-right">
         <div class="neo-view-toggle">
           <button class="neo-toggle-btn" :class="{ active: viewMode === 'calendar' }" @click="viewMode = 'calendar'"
-            :disabled="isLoading">
+            :disabled="isLoading" :aria-pressed="viewMode === 'calendar'" aria-label="Calendar View">
             <span class="material-icons">calendar_month</span>
-            Calendar
+            <span class="btn-text hide-text-on-mobile">Calendar</span>
           </button>
           <button class="neo-toggle-btn" :class="{ active: viewMode === 'list' }" @click="viewMode = 'list'"
-            :disabled="isLoading">
+            :disabled="isLoading" :aria-pressed="viewMode === 'list'" aria-label="List View">
             <span class="material-icons">view_list</span>
-            List
+            <span class="btn-text hide-text-on-mobile">List</span>
           </button>
         </div>
-        <button class="neo-action-button" @click="openCreateChoreModal(null)" :disabled="isLoading">
+        <button class="neo-action-button" @click="openCreateChoreModal(null)" :disabled="isLoading"
+          aria-label="New Chore">
           <span class="material-icons">add</span>
-          New Chore
+          <span class="btn-text hide-text-on-mobile-sm">New Chore</span>
         </button>
       </div>
     </div>
@@ -62,43 +63,56 @@
     <!-- Calendar View -->
     <div v-else-if="viewMode === 'calendar'" class="calendar-view">
       <div class="calendar-header">
-        <button class="btn btn-icon" @click="previousMonth">
+        <button class="btn btn-icon" @click="previousMonth" aria-label="Previous month">
           <span class="material-icons">chevron_left</span>
         </button>
         <h2>{{ currentMonthYear }}</h2>
-        <button class="btn btn-icon" @click="nextMonth">
+        <button class="btn btn-icon" @click="nextMonth" aria-label="Next month">
           <span class="material-icons">chevron_right</span>
         </button>
       </div>
-      <div class="calendar-grid">
-        <div class="calendar-weekdays">
-          <div v-for="day in weekDays" :key="day" class="weekday">{{ day }}</div>
-        </div>
-        <div class="calendar-days">
-          <div v-for="(day, index) in calendarDays" :key="index" class="calendar-day" :class="{
-            'other-month': !day.isCurrentMonth,
-            'today': day.isToday,
-            'has-chores': day.chores.length > 0
-          }">
-            <div class="day-header">
-              <span class="day-number">{{ day.date.getDate() }}</span>
-              <div v-if="!day.isOtherMonth" class="add-chore-indicator"
-                @click.stop="openCreateChoreModal(null, day.date)">+</div>
-            </div>
-            <div class="day-chores">
-              <div v-for="chore in day.chores" :key="chore.id" class="calendar-chore-item"
-                :class="{ 'is-completed': chore.is_completed }" @click="openEditChoreModal(chore)">
-                <div class="chore-status" :class="getStatusClass(chore)"></div>
-                <span class="chore-name">{{ chore.name }}</span>
+      <div v-if="calendarDays.length > 0">
+        <div class="calendar-grid">
+          <div class="calendar-weekdays">
+            <div v-for="day in weekDays" :key="day" class="weekday">{{ day }}</div>
+          </div>
+          <div class="calendar-days">
+            <div v-for="(day, index) in calendarDays" :key="index" class="calendar-day" :class="{
+              'other-month': !day.isCurrentMonth,
+              'today': day.isToday,
+              'has-chores': day.chores.length > 0
+            }" tabindex="0" @keydown.enter="openCreateChoreModal(null, day.date)"
+              @keydown.space="openCreateChoreModal(null, day.date)">
+              <div class="day-header">
+                <span class="day-number">{{ day.date.getDate() }}</span>
+                <button v-if="!day.isOtherMonth" class="add-chore-indicator"
+                  @click.stop="openCreateChoreModal(null, day.date)" aria-label="Add chore to this day">
+                  <span class="material-icons">add_circle_outline</span>
+                </button>
+              </div>
+              <div class="day-chores">
+                <div v-for="chore in day.chores" :key="chore.id" class="calendar-chore-item"
+                  :class="{ 'is-completed': chore.is_completed }" @click="openEditChoreModal(chore)" tabindex="0"
+                  @keydown.enter="openEditChoreModal(chore)" @keydown.space="openEditChoreModal(chore)">
+                  <div class="chore-status" :class="getStatusClass(chore)"></div>
+                  <span class="chore-name">{{ chore.name }}</span>
+                </div>
+                <div v-if="day.chores.length === 0 && day.isCurrentMonth" class="no-chores-in-day">
+                  <!-- Optionally, a subtle indicator for no chores -->
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
+      <div v-else class="empty-state">
+        <span class="material-icons empty-icon">calendar_today</span>
+        <p>No chores to display for this period.</p>
+      </div>
     </div>
 
     <!-- List View -->
-    <div v-else class="chores-grid">
+    <div v-else class="chores-list-container">
       <transition-group name="chore-list" tag="div" class="chores-grid">
         <div v-for="chore in filteredChores" :key="chore.id" class="chore-card"
           :class="{ 'is-overdue': !chore.is_completed && isOverdue(chore), 'is-completed': chore.is_completed }">
@@ -139,24 +153,35 @@
                 title="Mark as Not Done">
                 <span class="material-icons">undo</span> Undo
               </button>
-              <button class="btn btn-icon" @click="openEditChoreModal(chore)" title="Edit">
+              <button class="btn btn-icon" @click="openEditChoreModal(chore)" title="Edit" aria-label="Edit chore">
                 <span class="material-icons">edit</span>
+                <span class="btn-text hide-text-on-mobile">Edit</span>
               </button>
-              <button class="btn btn-icon btn-danger-icon" @click="confirmDeleteChore(chore)" title="Delete">
+              <button class="btn btn-icon btn-danger-icon" @click="confirmDeleteChore(chore)" title="Delete"
+                aria-label="Delete chore">
                 <span class="material-icons">delete</span>
+                <span class="btn-text hide-text-on-mobile">Delete</span>
               </button>
             </div>
           </div>
         </div>
       </transition-group>
+      <div v-if="!isLoading && filteredChores.length === 0" class="empty-state">
+        <span class="material-icons empty-icon"> Rtask_alt</span>
+        <p>No chores in this view. Well done!</p>
+        <button v-if="activeView !== 'all'" class="btn btn-sm btn-outline" @click="activeView = 'all'">View All
+          Pending</button>
+      </div>
     </div>
 
     <!-- Create/Edit Chore Modal -->
-    <div v-if="showChoreModal" class="modal-backdrop open" @click.self="showChoreModal = false">
+    <div v-if="showChoreModal" class="modal-backdrop open" @click.self="showChoreModal = false" role="dialog"
+      aria-modal="true" :aria-labelledby="isEditing ? 'editChoreModalTitle' : 'newChoreModalTitle'">
       <div class="modal-container">
         <div class="modal-header">
-          <h3>{{ isEditing ? 'Edit Chore' : 'New Chore' }}</h3>
-          <button class="btn btn-icon" @click="showChoreModal = false">
+          <h3 :id="isEditing ? 'editChoreModalTitle' : 'newChoreModalTitle'">{{ isEditing ? 'Edit Chore' : 'New Chore'
+          }}</h3>
+          <button class="btn btn-icon" @click="showChoreModal = false" aria-label="Close modal">
             <span class="material-icons">close</span>
           </button>
         </div>
@@ -171,12 +196,13 @@
             <label>Type</label>
             <div class="type-selector">
               <button type="button" class="type-btn" :class="{ active: choreForm.type === 'personal' }"
-                @click="choreForm.type = 'personal'; choreForm.group_id = undefined">
+                @click="choreForm.type = 'personal'; choreForm.group_id = undefined"
+                :aria-pressed="choreForm.type === 'personal' ? 'true' : 'false'">
                 <span class="material-icons">person</span>
                 Personal
               </button>
               <button type="button" class="type-btn" :class="{ active: choreForm.type === 'group' }"
-                @click="choreForm.type = 'group'">
+                @click="choreForm.type = 'group'" :aria-pressed="choreForm.type === 'group' ? 'true' : 'false'">
                 <span class="material-icons">group</span>
                 Group
               </button>
@@ -212,7 +238,7 @@
             <div v-if="choreForm.frequency === 'custom'" class="form-group">
               <label for="interval">Interval (days)</label>
               <input id="interval" v-model.number="choreForm.custom_interval_days" type="number" class="form-input"
-                min="1" required />
+                min="1" placeholder="e.g. 3" required />
             </div>
           </div>
 
@@ -237,11 +263,12 @@
     </div>
 
     <!-- Delete Confirmation Dialog -->
-    <div v-if="showDeleteDialog" class="modal-backdrop open" @click.self="showDeleteDialog = false">
+    <div v-if="showDeleteDialog" class="modal-backdrop open" @click.self="showDeleteDialog = false" role="dialog"
+      aria-modal="true" aria-labelledby="deleteDialogTitle">
       <div class="modal-container delete-confirm">
         <div class="modal-header">
-          <h3>Delete Chore</h3>
-          <button class="btn btn-icon" @click="showDeleteDialog = false">
+          <h3 id="deleteDialogTitle">Delete Chore</h3>
+          <button class="btn btn-icon" @click="showDeleteDialog = false" aria-label="Close modal">
             <span class="material-icons">close</span>
           </button>
         </div>
@@ -256,11 +283,12 @@
     </div>
 
     <!-- Keyboard Shortcuts Modal -->
-    <div v-if="showShortcutsModal" class="modal-backdrop open" @click.self="showShortcutsModal = false">
+    <div v-if="showShortcutsModal" class="modal-backdrop open" @click.self="showShortcutsModal = false" role="dialog"
+      aria-modal="true" aria-labelledby="shortcutsModalTitle">
       <div class="modal-container shortcuts-modal">
         <div class="modal-header">
-          <h3>Keyboard Shortcuts</h3>
-          <button class="btn btn-icon" @click="showShortcutsModal = false">
+          <h3 id="shortcutsModalTitle">Keyboard Shortcuts</h3>
+          <button class="btn btn-icon" @click="showShortcutsModal = false" aria-label="Close modal">
             <span class="material-icons">close</span>
           </button>
         </div>
@@ -300,52 +328,48 @@
 <script setup lang="ts">
 import { ref, onMounted, computed, onUnmounted, watch, onBeforeUnmount } from 'vue'
 import { format, startOfDay, addDays, addWeeks, isBefore, isEqual, startOfMonth, endOfMonth, eachDayOfInterval, isSameMonth, isToday as isTodayDate } from 'date-fns'
-import { choreService } from '../services/choreService' // Assuming choreService exists
+import { choreService } from '../services/choreService'
 import { useNotificationStore } from '../stores/notifications'
-import type { Chore as OriginalChore, ChoreCreate as OriginalChoreCreate, ChoreUpdate, ChoreFrequency } from '../types/chore' // Assuming these types exist
+import type { Chore, ChoreCreate, ChoreUpdate, ChoreFrequency } from '../types/chore'
 import { useRoute } from 'vue-router'
-import { groupService } from '../services/groupService' // Assuming groupService exists
+import { groupService } from '../services/groupService'
 import { useStorage } from '@vueuse/core'
 
-// Extend Chore type to include completion status
-interface Chore extends OriginalChore {
-  is_completed: boolean;
-  completed_at: string | null; // ISO string date when completed
-}
-interface ChoreCreate extends OriginalChoreCreate {
+// Types
+interface ChoreWithCompletion extends Chore {
   is_completed: boolean;
   completed_at: string | null;
 }
 
+interface ChoreCreateWithCompletion extends Omit<ChoreCreate, 'created_by_id' | 'created_at' | 'updated_at'> {
+  is_completed: boolean;
+  completed_at: string | null;
+}
 
 const notificationStore = useNotificationStore()
 const route = useRoute()
 
 // State
-const chores = ref<Chore[]>([])
+const chores = ref<ChoreWithCompletion[]>([])
 const groups = ref<{ id: number, name: string }[]>([])
 const showChoreModal = ref(false)
 const showDeleteDialog = ref(false)
 const isEditing = ref(false)
-const selectedChore = ref<Chore | null>(null)
+const selectedChore = ref<ChoreWithCompletion | null>(null)
 const showShortcutsModal = ref(false)
 
-const cachedChores = useStorage<Chore[]>('cached-chores-v2', []) // Changed key to avoid conflicts with old cache
+const cachedChores = useStorage<ChoreWithCompletion[]>('cached-chores-v2', [])
 const cachedTimestamp = useStorage<number>('cached-chores-timestamp-v2', 0)
-const CACHE_DURATION = 5 * 60 * 1000;
+const CACHE_DURATION = 5 * 60 * 1000; // 5 minutes
 
 const loadCachedData = () => {
   const now = Date.now();
-  if (cachedChores.value.length > 0 && (now - cachedTimestamp.value) < CACHE_DURATION) {
-    chores.value = cachedChores.value.map(c => ({ // Ensure cached items have new properties
-      ...c,
-      is_completed: c.is_completed || false,
-      completed_at: c.completed_at || null
-    }));
+  if (cachedChores.value && cachedChores.value.length > 0 && (now - cachedTimestamp.value) < CACHE_DURATION) {
+    chores.value = cachedChores.value;
   }
 };
 
-const choreForm = ref<ChoreCreate>({
+const choreForm = ref<ChoreCreateWithCompletion>({
   name: '',
   description: '',
   frequency: 'daily',
@@ -362,66 +386,71 @@ const getGroupName = (groupId?: number | null): string | undefined => {
   return groups.value.find(g => g.id === groupId)?.name;
 };
 
-const frequencyOptions = [
-  { label: 'One Time', value: 'one_time' as ChoreFrequency },
-  { label: 'Daily', value: 'daily' as ChoreFrequency },
-  { label: 'Weekly', value: 'weekly' as ChoreFrequency },
-  { label: 'Monthly', value: 'monthly' as ChoreFrequency },
-  { label: 'Custom', value: 'custom' as ChoreFrequency }
-]
+const frequencyOptions: { label: string; value: ChoreFrequency }[] = [
+  { label: 'One Time', value: 'one_time' },
+  { label: 'Daily', value: 'daily' },
+  { label: 'Weekly', value: 'weekly' },
+  { label: 'Monthly', value: 'monthly' },
+  { label: 'Custom', value: 'custom' }
+];
 
-// Add loading state
 const isLoading = ref(true)
 
 const loadChores = async () => {
   isLoading.value = true
   try {
-    const fetchedChores = await choreService.getAllChores() as OriginalChore[]
+    const fetchedChores = await choreService.getAllChores()
     chores.value = fetchedChores.map(c => ({
       ...c,
-      is_completed: (c as Chore).is_completed || false,
-      completed_at: (c as Chore).completed_at || null,
+      is_completed: c.is_completed || false,
+      completed_at: c.completed_at || null,
     }))
     cachedChores.value = chores.value
     cachedTimestamp.value = Date.now()
   } catch (error) {
     console.error('Failed to load all chores:', error)
     notificationStore.addNotification({ message: 'Failed to load chores', type: 'error' })
-    if (cachedChores.value.length === 0) chores.value = []
+    if (!cachedChores.value || cachedChores.value.length === 0) chores.value = []
   } finally {
     isLoading.value = false
   }
 }
 
-// Calendar state
 const viewMode = ref<'calendar' | 'list'>('calendar')
 const currentDate = ref(new Date())
 
 const weekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+// For smaller screens, you might use: const weekDays = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+
 
 const currentMonthYear = computed(() => {
   return format(currentDate.value, 'MMMM yyyy')
 })
 
 const calendarDays = computed(() => {
+  if (isLoading.value) return []; // Don't compute if chores are not loaded
   const start = startOfMonth(currentDate.value)
   const end = endOfMonth(currentDate.value)
 
-  // Get the first day of the month and adjust to start from Sunday
-  const firstDay = start.getDay()
-  const startDate = addDays(start, -firstDay)
+  const firstDayOfMonth = start.getDay()
+  const startDate = addDays(start, -firstDayOfMonth)
 
-  // Get the last day of the month and adjust to end on Saturday
-  const lastDay = end.getDay()
-  const endDate = addDays(end, 6 - lastDay)
+  const lastDayOfMonth = end.getDay()
+  const endDate = addDays(end, 6 - lastDayOfMonth)
 
   const days = eachDayOfInterval({ start: startDate, end: endDate })
 
   return days.map(date => {
     const dayChores = chores.value.filter(chore => {
-      if (chore.is_completed) return false
-      const choreDate = startOfDay(new Date(chore.next_due_date))
-      return isEqual(choreDate, startOfDay(date))
+      if (chore.is_completed && activeView.value !== 'completed') return false; // Don't show completed in calendar unless completed view is active (edge case)
+      if (!chore.next_due_date) return false;
+      try {
+        const choreDate = startOfDay(new Date(chore.next_due_date.replace(/-/g, '/'))); // More robust date parsing
+        return isEqual(choreDate, startOfDay(date))
+      } catch (e) {
+        console.warn("Invalid date for chore:", chore.name, chore.next_due_date);
+        return false;
+      }
     })
 
     return {
@@ -443,14 +472,14 @@ const nextMonth = () => {
 }
 
 const openCreateChoreModal = (groupId: number | null, date?: Date) => {
-  console.log('Opening create modal', { groupId, date }) // Debug log
   isEditing.value = false
+  selectedChore.value = null
   choreForm.value = {
     name: '',
     description: '',
     frequency: 'daily',
     custom_interval_days: undefined,
-    next_due_date: date ? format(date, 'yyyy-MM-dd') : format(new Date(), 'yyyy-MM-dd'),
+    next_due_date: date ? format(startOfDay(date), 'yyyy-MM-dd') : format(new Date(), 'yyyy-MM-dd'),
     type: groupId ? 'group' : 'personal',
     group_id: groupId ?? undefined,
     is_completed: false,
@@ -459,16 +488,15 @@ const openCreateChoreModal = (groupId: number | null, date?: Date) => {
   showChoreModal.value = true
 }
 
-const openEditChoreModal = (chore: Chore) => {
-  console.log('Opening edit modal', chore) // Debug log
+const openEditChoreModal = (chore: ChoreWithCompletion) => {
   isEditing.value = true
   selectedChore.value = chore
   choreForm.value = {
     name: chore.name,
-    description: chore.description,
+    description: chore.description || '',
     frequency: chore.frequency,
     custom_interval_days: chore.custom_interval_days,
-    next_due_date: chore.next_due_date ? format(new Date(chore.next_due_date), 'yyyy-MM-dd') : format(new Date(), 'yyyy-MM-dd'),
+    next_due_date: chore.next_due_date ? format(new Date(chore.next_due_date.replace(/-/g, '/')), 'yyyy-MM-dd') : format(new Date(), 'yyyy-MM-dd'),
     type: chore.type,
     group_id: chore.group_id,
     is_completed: chore.is_completed,
@@ -480,63 +508,78 @@ const openEditChoreModal = (chore: Chore) => {
 const onSubmit = async () => {
   if (!validateForm()) return
 
+  isLoading.value = true;
   try {
-    const choreData: ChoreCreate | ChoreUpdate = { ...choreForm.value }
+    const choreDataSubmit: Partial<ChoreCreateWithCompletion> = { ...choreForm.value }
 
-    if (choreData.frequency !== 'custom') {
-      choreData.custom_interval_days = undefined
+    if (choreDataSubmit.frequency !== 'custom') {
+      choreDataSubmit.custom_interval_days = undefined
+    }
+    if (choreDataSubmit.next_due_date) {
+      choreDataSubmit.next_due_date = format(new Date(choreDataSubmit.next_due_date.replace(/-/g, '/')), 'yyyy-MM-dd');
     }
 
     let notificationMessage = ''
 
     if (isEditing.value && selectedChore.value) {
-      await choreService.updateChore(selectedChore.value.id, choreData as ChoreUpdate)
-      notificationMessage = `Chore updated successfully`
+      await choreService.updateChore(selectedChore.value.id, choreDataSubmit as ChoreUpdate)
+      notificationMessage = `Chore '${choreForm.value.name}' updated successfully`
     } else {
-      await choreService.createChore(choreData as ChoreCreate)
-      notificationMessage = `Chore created successfully`
+      await choreService.createChore(choreDataSubmit as ChoreCreate)
+      notificationMessage = `Chore '${choreForm.value.name}' created successfully`
     }
 
     notificationStore.addNotification({ message: notificationMessage, type: 'success' })
     showChoreModal.value = false
-    loadChores()
+    hasUnsavedChanges.value = false;
+    await loadChores()
   } catch (error) {
     console.error('Failed to save chore:', error)
     notificationStore.addNotification({ message: `Failed to ${isEditing.value ? 'update' : 'create'} chore`, type: 'error' })
+  } finally {
+    isLoading.value = false;
   }
 }
 
-const confirmDeleteChore = (chore: Chore) => {
+const confirmDeleteChore = (chore: ChoreWithCompletion) => {
   selectedChore.value = chore
   showDeleteDialog.value = true
 }
 
 const deleteChore = async () => {
   if (!selectedChore.value) return;
+  isLoading.value = true;
   try {
-    await choreService.deleteChore(selectedChore.value.id, selectedChore.value.type, selectedChore.value.group_id);
+    await choreService.deleteChore(
+      selectedChore.value.id,
+      selectedChore.value.type,
+      selectedChore.value.group_id ?? undefined
+    );
     showDeleteDialog.value = false;
-    notificationStore.addNotification({ message: `Chore deleted successfully`, type: 'success' })
-    loadChores()
+    notificationStore.addNotification({ message: `Chore '${selectedChore.value.name}' deleted successfully`, type: 'success' })
+    await loadChores()
   } catch (error) {
     console.error('Failed to delete chore:', error);
     notificationStore.addNotification({ message: 'Failed to delete chore', type: 'error' })
+  } finally {
+    isLoading.value = false;
+    selectedChore.value = null;
   }
 }
 
 const formatDate = (dateString: string | null): string => {
   if (!dateString) return 'N/A';
   try {
-    // Handle 'yyyy-MM-dd' or full ISO string
-    return format(new Date(dateString.replace(/-/g, '/')), 'MMM d, yyyy'); // Replace for cross-browser date parsing
+    return format(new Date(dateString.replace(/-/g, '/')), 'MMM d, yyyy');
   } catch (e) {
     return 'Invalid Date';
   }
 }
 
-const formatFrequency = (frequency: ChoreFrequency) => {
+const formatFrequency = (frequency?: ChoreFrequency) => {
+  if (!frequency) return '';
   const option = frequencyOptions.find(opt => opt.value === frequency)
-  return option ? option.label : frequency
+  return option ? option.label : frequency.charAt(0).toUpperCase() + frequency.slice(1);
 }
 
 const loadGroups = async () => {
@@ -544,26 +587,36 @@ const loadGroups = async () => {
     groups.value = await groupService.getUserGroups();
   } catch (error) {
     console.error('Failed to load groups:', error);
-    notificationStore.addNotification({ message: 'Failed to load groups', type: 'error' });
+    // notificationStore.addNotification({ message: 'Failed to load groups', type: 'error' }); // Optional: can be noisy
   }
 };
 
-const activeView = ref('today') // Default to 'today' or 'overdue' might be better
-
+const activeView = ref('today')
 const today = computed(() => startOfDay(new Date()));
 
-const isOverdue = (chore: Chore) => {
-  if (chore.is_completed) return false;
-  const dueDate = startOfDay(new Date(chore.next_due_date.replace(/-/g, '/')));
-  return isBefore(dueDate, today.value);
+const isOverdue = (chore: ChoreWithCompletion) => {
+  if (chore.is_completed || !chore.next_due_date) return false;
+  try {
+    const dueDate = startOfDay(new Date(chore.next_due_date.replace(/-/g, '/')));
+    return isBefore(dueDate, today.value);
+  } catch { return false; }
 };
 
 const filteredChores = computed(() => {
-  let result: Chore[];
-  const pendingChores = chores.value.filter(c => !c.is_completed)
-    .sort((a, b) => new Date(a.next_due_date).getTime() - new Date(b.next_due_date).getTime());
-  const completedChoresList = chores.value.filter(c => c.is_completed)
-    .sort((a, b) => new Date(b.completed_at || 0).getTime() - new Date(a.completed_at || 0).getTime());
+  let result: ChoreWithCompletion[];
+  const pendingChores = chores.value
+    .filter(c => !c.is_completed)
+    .sort((a, b) => {
+      try { return new Date(a.next_due_date.replace(/-/g, '/')).getTime() - new Date(b.next_due_date.replace(/-/g, '/')).getTime(); }
+      catch { return 0; }
+    });
+  const completedChoresList = chores.value
+    .filter(c => c.is_completed)
+    .sort((a, b) => {
+      try { return new Date(b.completed_at || 0).getTime() - new Date(a.completed_at || 0).getTime(); }
+      catch { return 0; }
+    });
+
 
   switch (activeView.value) {
     case 'overdue':
@@ -571,14 +624,20 @@ const filteredChores = computed(() => {
       break;
     case 'today':
       result = pendingChores.filter(chore => {
-        const dueDate = startOfDay(new Date(chore.next_due_date.replace(/-/g, '/')));
-        return isEqual(dueDate, today.value);
+        if (!chore.next_due_date) return false;
+        try {
+          const dueDate = startOfDay(new Date(chore.next_due_date.replace(/-/g, '/')));
+          return isEqual(dueDate, today.value);
+        } catch { return false; }
       });
       break;
     case 'upcoming':
       result = pendingChores.filter(chore => {
-        const dueDate = startOfDay(new Date(chore.next_due_date.replace(/-/g, '/')));
-        return isBefore(today.value, dueDate);
+        if (!chore.next_due_date) return false;
+        try {
+          const dueDate = startOfDay(new Date(chore.next_due_date.replace(/-/g, '/')));
+          return isBefore(today.value, dueDate);
+        } catch { return false; }
       });
       break;
     case 'completed':
@@ -595,73 +654,88 @@ const counts = computed(() => {
   return {
     overdue: pending.filter(chore => isOverdue(chore)).length,
     today: pending.filter(chore => {
-      const dueDate = startOfDay(new Date(chore.next_due_date.replace(/-/g, '/')));
-      return isEqual(dueDate, today.value);
+      if (!chore.next_due_date) return false;
+      try {
+        const dueDate = startOfDay(new Date(chore.next_due_date.replace(/-/g, '/')));
+        return isEqual(dueDate, today.value);
+      } catch { return false; }
     }).length,
   };
 });
 
-const getStatusClass = (chore: Chore) => {
+const getStatusClass = (chore: ChoreWithCompletion) => {
   if (chore.is_completed) return 'completed';
   if (isOverdue(chore)) return 'overdue';
-  const dueDate = startOfDay(new Date(chore.next_due_date.replace(/-/g, '/')));
-  if (isEqual(dueDate, today.value)) return 'today';
+  if (!chore.next_due_date) return 'upcoming'; // Default if no due date
+  try {
+    const dueDate = startOfDay(new Date(chore.next_due_date.replace(/-/g, '/')));
+    if (isEqual(dueDate, today.value)) return 'today';
+  } catch { /* fall through */ }
   return 'upcoming';
 }
 
-const getDueDateClass = (chore: Chore) => {
+const getDueDateClass = (chore: ChoreWithCompletion) => {
   if (chore.is_completed) return '';
-  if (isOverdue(chore)) return 'overdue';
-  const dueDate = startOfDay(new Date(chore.next_due_date.replace(/-/g, '/')));
-  if (isEqual(dueDate, today.value)) return 'today';
-  return 'upcoming';
+  if (isOverdue(chore)) return 'overdue-text'; // Use a different class for text color if needed
+  if (!chore.next_due_date) return '';
+  try {
+    const dueDate = startOfDay(new Date(chore.next_due_date.replace(/-/g, '/')));
+    if (isEqual(dueDate, today.value)) return 'today-text';
+  } catch { /* fall through */ }
+  return 'upcoming-text';
 }
 
-const formatDueDate = (dateString: string) => {
-  const dueDate = startOfDay(new Date(dateString.replace(/-/g, '/')));
-  if (isEqual(dueDate, today.value)) return 'Due Today';
+const formatDueDate = (dateString: string | null) => {
+  if (!dateString) return 'No due date';
+  try {
+    const dueDate = startOfDay(new Date(dateString.replace(/-/g, '/')));
+    if (isEqual(dueDate, today.value)) return 'Due Today';
 
-  const tomorrow = addDays(today.value, 1);
-  if (isEqual(dueDate, tomorrow)) return 'Due Tomorrow';
+    const tomorrow = addDays(today.value, 1);
+    if (isEqual(dueDate, tomorrow)) return 'Due Tomorrow';
 
-  if (isBefore(dueDate, today.value)) return `Overdue: ${formatDate(dateString)}`;
+    if (isBefore(dueDate, today.value)) return `Overdue: ${formatDate(dateString)}`;
 
-  return `Due ${formatDate(dateString)}`;
-}
-
-const toggleChoreCompletion = async (choreToToggle: Chore) => {
-  choreToToggle.is_completed = !choreToToggle.is_completed;
-  if (choreToToggle.is_completed) {
-    choreToToggle.completed_at = new Date().toISOString();
-    // For recurring chores, choreService.completeChore would ideally update next_due_date.
-    // For this example, we'll just toggle the status.
-    // await choreService.completeChore(choreToToggle.id, choreToToggle.type, choreToToggle.group_id); // Placeholder
-    notificationStore.addNotification({ message: `${choreToToggle.name} marked as done.`, type: 'success' });
-
-  } else {
-    choreToToggle.completed_at = null;
-    // If un-completing, you might need a service call to revert next_due_date if it was advanced.
-    // await choreService.undoCompleteChore(choreToToggle.id, choreToToggle.type, choreToToggle.group_id); // Placeholder
-    notificationStore.addNotification({ message: `${choreToToggle.name} marked as not done.`, type: 'info' });
+    return `Due ${formatDate(dateString)}`;
+  } catch {
+    return 'Invalid date'
   }
-  // Optimistically update local state, then persist
+}
+
+const toggleChoreCompletion = async (choreToToggle: ChoreWithCompletion) => {
+  const originalStatus = choreToToggle.is_completed;
+  const originalCompletedAt = choreToToggle.completed_at;
+
+  choreToToggle.is_completed = !choreToToggle.is_completed;
+  choreToToggle.completed_at = choreToToggle.is_completed ? new Date().toISOString() : null;
+
+  // Optimistic update locally
   const index = chores.value.findIndex(c => c.id === choreToToggle.id);
   if (index !== -1) {
-    chores.value[index] = { ...choreToToggle }; // Ensure reactivity
+    chores.value.splice(index, 1, { ...choreToToggle });
   }
-  // Persist the change (if your service expects the whole object)
+  cachedChores.value = [...chores.value];
+
   try {
-    await choreService.updateChore(choreToToggle.id, choreToToggle as ChoreUpdate); // This service might need adjustment
-    // No need to call loadChores() if updateChore returns the updated chore or if optimistic update is enough
+    await choreService.updateChore(choreToToggle.id, {
+      is_completed: choreToToggle.is_completed,
+      completed_at: choreToToggle.completed_at,
+    } as ChoreUpdate);
+
+    notificationStore.addNotification({
+      message: `${choreToToggle.name} marked as ${choreToToggle.is_completed ? 'done' : 'not done'}.`,
+      type: choreToToggle.is_completed ? 'success' : 'info'
+    });
   } catch (error) {
     console.error("Failed to update chore completion status:", error);
     // Revert optimistic update on error
-    choreToToggle.is_completed = !choreToToggle.is_completed;
-    choreToToggle.completed_at = choreToToggle.is_completed ? new Date().toISOString() : null;
-    if (index !== -1) chores.value[index] = { ...choreToToggle };
+    choreToToggle.is_completed = originalStatus;
+    choreToToggle.completed_at = originalCompletedAt;
+    if (index !== -1) chores.value.splice(index, 1, { ...choreToToggle });
+    cachedChores.value = [...chores.value];
+
     notificationStore.addNotification({ message: 'Failed to update chore status.', type: 'error' });
   }
-  cachedChores.value = [...chores.value]; // Update cache after toggle
 };
 
 
@@ -672,142 +746,137 @@ const setQuickDueDate = (when: 'today' | 'tomorrow' | 'next_week') => {
   choreForm.value.next_due_date = format(date, 'yyyy-MM-dd');
 };
 
-// Modify handleKeyPress to include shortcuts modal toggle
 const handleKeyPress = (event: KeyboardEvent) => {
-  // Only handle shortcuts when not in an input field
-  if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) {
-    return
+  const target = event.target as HTMLElement;
+  if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.tagName === 'SELECT') {
+    return;
   }
 
-  // Ctrl/Cmd + N for new chore
   if ((event.ctrlKey || event.metaKey) && event.key === 'n') {
-    event.preventDefault()
-    openCreateChoreModal(null)
+    event.preventDefault();
+    if (!showChoreModal.value) openCreateChoreModal(null);
   }
-
-  // Ctrl/Cmd + / to toggle view mode
   if ((event.ctrlKey || event.metaKey) && event.key === '/') {
-    event.preventDefault()
-    viewMode.value = viewMode.value === 'calendar' ? 'list' : 'calendar'
+    event.preventDefault();
+    viewMode.value = viewMode.value === 'calendar' ? 'list' : 'calendar';
   }
-
-  // Ctrl/Cmd + ? to toggle shortcuts modal
-  if ((event.ctrlKey || event.metaKey) && event.key === '?') {
-    event.preventDefault()
-    showShortcutsModal.value = !showShortcutsModal.value
+  if ((event.ctrlKey || event.metaKey) && (event.key === '?' || event.key === '-')) { // Often ? is Shift + /
+    event.preventDefault();
+    showShortcutsModal.value = !showShortcutsModal.value;
   }
-
-  // Escape to close modals
   if (event.key === 'Escape') {
-    if (showChoreModal.value) {
-      showChoreModal.value = false
-    }
-    if (showDeleteDialog.value) {
-      showDeleteDialog.value = false
-    }
-    if (showShortcutsModal.value) {
-      showShortcutsModal.value = false
-    }
+    if (showChoreModal.value) showChoreModal.value = false;
+    else if (showDeleteDialog.value) showDeleteDialog.value = false;
+    else if (showShortcutsModal.value) showShortcutsModal.value = false;
   }
-}
+};
 
-// Add keyboard event listeners
 onMounted(() => {
   window.addEventListener('keydown', handleKeyPress)
-  loadCachedData()
-  loadChores()
-  loadGroups()
+  loadCachedData() // Load from cache first for perceived speed
+  Promise.all([loadChores(), loadGroups()]); // Then fetch fresh data
 })
 
 onUnmounted(() => {
   window.removeEventListener('keydown', handleKeyPress)
 })
 
-// Improve form validation
 const validateForm = () => {
   if (!choreForm.value.name.trim()) {
-    notificationStore.addNotification({ message: 'Please enter a chore name', type: 'error' })
-    return false
+    notificationStore.addNotification({ message: 'Chore name is required.', type: 'error' }); return false;
   }
-
   if (choreForm.value.type === 'group' && !choreForm.value.group_id) {
-    notificationStore.addNotification({ message: 'Please select a group', type: 'error' })
-    return false
+    notificationStore.addNotification({ message: 'Please select a group for group chores.', type: 'error' }); return false;
   }
-
   if (choreForm.value.frequency === 'custom' && (!choreForm.value.custom_interval_days || choreForm.value.custom_interval_days < 1)) {
-    notificationStore.addNotification({ message: 'Please enter a valid interval', type: 'error' })
-    return false
+    notificationStore.addNotification({ message: 'Custom interval must be at least 1 day.', type: 'error' }); return false;
   }
-
-  return true
+  if (!choreForm.value.next_due_date) {
+    notificationStore.addNotification({ message: 'Due date is required.', type: 'error' }); return false;
+  }
+  try {
+    new Date(choreForm.value.next_due_date.replace(/-/g, '/')); // check if valid date
+  } catch {
+    notificationStore.addNotification({ message: 'Invalid due date format.', type: 'error' }); return false;
+  }
+  return true;
 }
 
-// Add auto-save functionality for form
+// Auto-save functionality (commented out as the previous implementation was risky)
+// A more robust auto-save would save to localStorage/drafts, not directly submit.
+/*
 let autoSaveTimeout: number | null = null
-
 const autoSaveForm = () => {
   if (autoSaveTimeout) {
     clearTimeout(autoSaveTimeout)
   }
   autoSaveTimeout = window.setTimeout(() => {
-    if (isEditing.value && selectedChore.value) {
-      onSubmit()
-    }
-  }, 2000) // Auto-save after 2 seconds of inactivity
+    // This logic should be revised. Auto-submitting a form is usually not desired.
+    // Consider saving to a local draft instead.
+    // if (isEditing.value && selectedChore.value) {
+    //   console.log("Attempting auto-save (currently disabled logic)");
+    //   // onSubmit() // This is risky; onSubmit usually makes an API call
+    // }
+  }, 3000) // Auto-save after 3 seconds of inactivity
 }
 
-// Modify choreForm to trigger auto-save
 watch(choreForm, () => {
   if (isEditing.value) {
-    autoSaveForm()
+    hasUnsavedChanges.value = true; // Mark changes for onBeforeUnload prompt
+    // autoSaveForm() // Trigger auto-save logic if re-enabled
   }
 }, { deep: true })
+*/
 
-// Add confirmation before leaving with unsaved changes
 const hasUnsavedChanges = ref(false)
 
-watch(choreForm, () => {
-  hasUnsavedChanges.value = true
-}, { deep: true })
+watch(choreForm, (newValue, oldValue) => {
+  // Set hasUnsavedChanges only if the modal is open and it's not the initial population
+  if (showChoreModal.value && oldValue.name !== '') { // Basic check to avoid triggering on modal open
+    hasUnsavedChanges.value = true;
+  }
+}, { deep: true });
+
+watch(showChoreModal, (isOpen) => {
+  if (!isOpen) {
+    hasUnsavedChanges.value = false; // Reset when modal is closed
+  } else {
+    // When modal opens for a new chore, or for editing,
+    // we don't consider it "unsaved" until the user makes a change.
+    // The watch on choreForm handles detecting actual changes.
+    // Resetting here might be too early if form is pre-filled.
+  }
+});
+
 
 onBeforeUnmount(() => {
-  if (hasUnsavedChanges.value) {
-    const confirm = window.confirm('You have unsaved changes. Are you sure you want to leave?')
-    if (!confirm) {
-      // Prevent navigation
-      return false
+  if (hasUnsavedChanges.value && showChoreModal.value) { // Only prompt if modal is open with changes
+    const confirmLeave = window.confirm('You have unsaved changes in the chore form. Are you sure you want to leave?')
+    if (!confirmLeave) {
+      return false // This typically doesn't prevent component unmount in Vue 3 composition API directly
+      // but is a common pattern. For SPA, router guards are better.
     }
   }
 })
 
-// Watch for modal state changes
-watch(showChoreModal, (newVal) => {
-  console.log('Chore modal visibility changed:', newVal)
-})
-
-watch(showDeleteDialog, (newVal) => {
-  console.log('Delete dialog visibility changed:', newVal)
-})
-
-watch(showShortcutsModal, (newVal) => {
-  console.log('Shortcuts modal visibility changed:', newVal)
-})
 </script>
 
 <style>
-/* Modal styles - not scoped to allow for fixed positioning */
+/* Modal styles - (global, as before) */
 .modal-backdrop {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.6);
+  /* Slightly darker backdrop */
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1000;
+  padding: 1rem;
+  /* Add padding for small screens so modal doesn't touch edges */
 }
 
 .modal-container {
@@ -815,11 +884,15 @@ watch(showShortcutsModal, (newVal) => {
   border-radius: 12px;
   border: 3px solid #111;
   box-shadow: 6px 6px 0 #111;
-  width: 90%;
+  width: 100%;
+  /* Let padding on backdrop control spacing */
   max-width: 600px;
   max-height: 90vh;
   overflow-y: auto;
-  position: relative;
+  display: flex;
+  /* Added for flex column layout */
+  flex-direction: column;
+  /* Added */
 }
 
 .modal-header {
@@ -828,6 +901,8 @@ watch(showShortcutsModal, (newVal) => {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  flex-shrink: 0;
+  /* Prevent shrinking */
 }
 
 .modal-header h3 {
@@ -838,6 +913,10 @@ watch(showShortcutsModal, (newVal) => {
 
 .modal-body {
   padding: 1.5rem;
+  overflow-y: auto;
+  /* Allow body to scroll if content overflows */
+  flex-grow: 1;
+  /* Allow body to take available space */
 }
 
 .modal-footer {
@@ -846,11 +925,13 @@ watch(showShortcutsModal, (newVal) => {
   display: flex;
   justify-content: flex-end;
   gap: 1rem;
+  flex-shrink: 0;
+  /* Prevent shrinking */
 }
 
-/* Form styles */
+/* Form styles (global, as before) */
 .modal-form {
-  padding: 1.5rem;
+  /* padding: 1.5rem; No longer needed if modal-body has padding */
 }
 
 .form-group {
@@ -859,12 +940,15 @@ watch(showShortcutsModal, (newVal) => {
 
 .form-row {
   display: flex;
+  flex-wrap: wrap;
+  /* Allow wrapping on small screens */
   gap: 1rem;
   margin-bottom: 1.5rem;
 }
 
 .form-row .form-group {
-  flex: 1;
+  flex: 1 1 200px;
+  /* Allow items to grow and shrink, base size 200px */
   margin-bottom: 0;
 }
 
@@ -883,12 +967,15 @@ watch(showShortcutsModal, (newVal) => {
   font-size: 1rem;
   transition: all 0.2s ease;
   background: white;
+  box-sizing: border-box;
+  /* Ensure padding and border are inside width */
 }
 
 .form-input:focus {
   outline: none;
   border-color: #007bff;
-  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
+  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
+  /* Softer focus */
 }
 
 .form-input::placeholder {
@@ -900,6 +987,7 @@ watch(showShortcutsModal, (newVal) => {
   display: flex;
   gap: 1rem;
   margin-bottom: 1rem;
+  /* Was form-group, consistent */
 }
 
 .type-btn {
@@ -915,6 +1003,8 @@ watch(showShortcutsModal, (newVal) => {
   justify-content: center;
   gap: 0.5rem;
   transition: all 0.2s ease;
+  min-width: 120px;
+  /* Ensure buttons don't get too small */
 }
 
 .type-btn:hover {
@@ -929,8 +1019,11 @@ watch(showShortcutsModal, (newVal) => {
 /* Quick due dates styles */
 .quick-due-dates {
   display: flex;
+  flex-wrap: wrap;
+  /* Allow wrapping */
   gap: 0.5rem;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.75rem;
+  /* Increased margin */
 }
 
 .btn-outline {
@@ -941,13 +1034,15 @@ watch(showShortcutsModal, (newVal) => {
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s ease;
+  font-size: 0.9rem;
+  /* Slightly smaller for tertiary actions */
 }
 
 .btn-outline:hover {
   background: #f8f9fa;
 }
 
-/* Button styles */
+/* Button styles (global, as before) */
 .btn {
   padding: 0.75rem 1.5rem;
   border-radius: 8px;
@@ -958,22 +1053,25 @@ watch(showShortcutsModal, (newVal) => {
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
+  border: 2px solid transparent;
+  /* Base border */
 }
 
 .btn-primary {
   background: #111;
   color: white;
-  border: 2px solid #111;
+  border-color: #111;
 }
 
 .btn-primary:hover {
   background: #333;
+  border-color: #333;
 }
 
 .btn-neutral {
   background: white;
   color: #333;
-  border: 2px solid #111;
+  border-color: #111;
 }
 
 .btn-neutral:hover {
@@ -986,44 +1084,92 @@ watch(showShortcutsModal, (newVal) => {
   background: transparent;
   color: #666;
   cursor: pointer;
+  border-radius: 50%;
+  /* Make icon buttons round for better touch target */
   transition: all 0.2s ease;
+  line-height: 1;
+  /* Ensure icon is centered */
+}
+
+.btn-icon .material-icons {
+  font-size: 1.5rem;
+  /* Slightly larger icons */
 }
 
 .btn-icon:hover {
   color: #333;
+  background-color: rgba(0, 0, 0, 0.05);
+  /* Subtle hover background */
 }
 
-/* Dark mode support for modals and forms */
+.btn-danger {
+  background-color: #dc3545;
+  color: white;
+  border-color: #dc3545;
+}
+
+.btn-danger:hover {
+  background-color: #c82333;
+  border-color: #bd2130;
+}
+
+.btn-danger-icon {
+  /* For icon buttons that are dangerous */
+  color: #dc3545;
+}
+
+.btn-danger-icon:hover {
+  color: #c82333;
+  background-color: rgba(220, 53, 69, 0.1);
+}
+
+
+/* Dark mode support for modals and forms (as before, with minor tweaks if needed) */
 @media (prefers-color-scheme: dark) {
   .modal-container {
-    background: #1a1a1a;
-    border-color: #fff;
-    box-shadow: 6px 6px 0 #fff;
+    background: #1e1e1e;
+    /* Slightly different dark */
+    border-color: #f0f0f0;
+    /* Lighter border for dark */
+    box-shadow: 6px 6px 0 #f0f0f0;
   }
 
   .modal-header,
   .modal-footer {
-    border-color: #fff;
+    border-color: #444;
+    /* Darker separator */
+  }
+
+  .modal-header h3 {
+    color: #f0f0f0;
   }
 
   .form-group label {
-    color: #fff;
+    color: #ccc;
+    /* Lighter label */
   }
 
   .form-input {
     background: #2a2a2a;
-    border-color: #fff;
-    color: #fff;
+    border-color: #555;
+    /* Mid-tone border */
+    color: #f0f0f0;
+  }
+
+  .form-input:focus {
+    border-color: #0095ff;
+    /* Brighter focus for dark */
+    box-shadow: 0 0 0 3px rgba(0, 149, 255, 0.25);
   }
 
   .form-input::placeholder {
-    color: #666;
+    color: #777;
   }
 
   .type-btn {
     background: #2a2a2a;
-    border-color: #fff;
-    color: #fff;
+    border-color: #555;
+    color: #ccc;
   }
 
   .type-btn:hover {
@@ -1031,14 +1177,15 @@ watch(showShortcutsModal, (newVal) => {
   }
 
   .type-btn.active {
-    background: #fff;
+    background: #f0f0f0;
     color: #111;
+    border-color: #f0f0f0;
   }
 
   .btn-outline {
     background: #2a2a2a;
-    border-color: #fff;
-    color: #fff;
+    border-color: #555;
+    color: #ccc;
   }
 
   .btn-outline:hover {
@@ -1047,26 +1194,84 @@ watch(showShortcutsModal, (newVal) => {
 
   .btn-neutral {
     background: #2a2a2a;
-    color: #fff;
-    border-color: #fff;
+    color: #ccc;
+    border-color: #555;
   }
 
   .btn-neutral:hover {
     background: #333;
   }
 
+  .btn-primary {
+    /* Ensure primary button is distinct in dark mode */
+    background: #007bff;
+    color: white;
+    border-color: #007bff;
+  }
+
+  .btn-primary:hover {
+    background: #0056b3;
+    border-color: #0056b3;
+  }
+
   .btn-icon {
     color: #999;
   }
 
   .btn-icon:hover {
-    color: #fff;
+    color: #f0f0f0;
+    background-color: rgba(255, 255, 255, 0.08);
+  }
+
+  .btn-danger {
+    background-color: #d9534f;
+    border-color: #d9534f;
+  }
+
+  .btn-danger:hover {
+    background-color: #c9302c;
+    border-color: #c9302c;
+  }
+
+  .btn-danger-icon {
+    color: #d9534f;
+  }
+
+  .btn-danger-icon:hover {
+    color: #c9302c;
+    background-color: rgba(217, 83, 79, 0.1);
   }
 }
 </style>
 
 <style scoped>
-/* Base container styles */
+/* Utility classes */
+.hide-text-on-mobile {
+  display: inline;
+}
+
+.hide-text-on-mobile-sm {
+  display: inline;
+}
+
+@media (max-width: 480px) {
+
+  /* Stricter breakpoint for hiding text */
+  .hide-text-on-mobile {
+    display: none;
+  }
+}
+
+@media (max-width: 380px) {
+
+  /* Even Stricter breakpoint for New Chore */
+  .hide-text-on-mobile-sm {
+    display: none;
+  }
+}
+
+
+/* Base container styles (as before) */
 .neo-container {
   padding: 1rem;
   max-width: 1200px;
@@ -1074,9 +1279,8 @@ watch(showShortcutsModal, (newVal) => {
 }
 
 .page-padding {
-  padding: 1rem;
-  max-width: 1200px;
-  margin: 0 auto;
+  /* This class seems redundant if neo-container is always used */
+  /* padding: 1rem; max-width: 1200px; margin: 0 auto; */
 }
 
 /* Header styles */
@@ -1084,7 +1288,11 @@ watch(showShortcutsModal, (newVal) => {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  gap: 2rem;
+  /* Align items to the start of the cross axis */
+  flex-wrap: wrap;
+  /* Allow wrapping for very narrow screens if necessary */
+  gap: 1.5rem;
+  /* Adjusted gap */
   margin-bottom: 2rem;
   padding: 1.5rem;
   background: white;
@@ -1095,7 +1303,8 @@ watch(showShortcutsModal, (newVal) => {
 
 .header-left {
   flex: 1;
-  min-width: 0;
+  min-width: 280px;
+  /* Ensure it has some minimum width before wrapping */
 }
 
 .header-right {
@@ -1118,7 +1327,16 @@ watch(showShortcutsModal, (newVal) => {
   display: flex;
   gap: 0.5rem;
   flex-wrap: wrap;
+  /* Allow tabs to wrap if they don't fit */
+  /* Removed overflow-x: auto; flex-wrap is usually preferred if space allows items to stack */
+  /* If horizontal scrolling is desired over wrapping:
+  overflow-x: auto;
+  white-space: nowrap;
+  padding-bottom: 8px; // for scrollbar visibility
+  flex-wrap: nowrap;
+  */
   margin-bottom: 0.5rem;
+  /* if wrapped, needs some margin */
 }
 
 .neo-tab-btn {
@@ -1141,26 +1359,36 @@ watch(showShortcutsModal, (newVal) => {
   font-size: 1.1rem;
 }
 
-.neo-tab-btn:hover {
+.neo-tab-btn:hover:not(:disabled) {
   transform: translateY(-1px);
   box-shadow: 3px 3px 0 #111;
 }
 
+.neo-tab-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
 .neo-tab-btn.active {
   background: #111;
   color: white;
   box-shadow: 3px 3px 0 #111;
+  /* Ensure active shadow is consistent */
 }
 
 .neo-tab-count {
   background: rgba(255, 255, 255, 0.2);
   color: white;
+  /* Assuming active tab has dark background */
   padding: 0.1em 0.5em;
   border-radius: 1rem;
   font-size: 0.8rem;
   font-weight: 600;
   min-width: 1.5rem;
+  /* Ensure it's circular even for 1 digit */
   text-align: center;
+  line-height: normal;
+  /* Adjust if text is not centered vertically */
 }
 
 .neo-tab-btn:not(.active) .neo-tab-count {
@@ -1171,7 +1399,8 @@ watch(showShortcutsModal, (newVal) => {
 /* View toggle styles */
 .neo-view-toggle {
   display: flex;
-  gap: 0.5rem;
+  gap: 0.25rem;
+  /* Reduced gap for tighter packing */
   background: #f5f5f5;
   padding: 0.25rem;
   border-radius: 8px;
@@ -1182,7 +1411,8 @@ watch(showShortcutsModal, (newVal) => {
   border: none;
   background: transparent;
   color: #333;
-  padding: 0.5rem 1rem;
+  padding: 0.5rem 0.75rem;
+  /* Adjusted padding */
   font-weight: 600;
   border-radius: 6px;
   cursor: pointer;
@@ -1192,10 +1422,20 @@ watch(showShortcutsModal, (newVal) => {
   gap: 0.5rem;
 }
 
-.neo-toggle-btn:hover {
+.neo-toggle-btn .material-icons {
+  font-size: 1.2rem;
+}
+
+
+.neo-toggle-btn:hover:not(.active):not(:disabled) {
   background: #e9ecef;
 }
 
+.neo-toggle-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
 .neo-toggle-btn.active {
   background: #111;
   color: white;
@@ -1216,21 +1456,29 @@ watch(showShortcutsModal, (newVal) => {
   transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
 }
 
-.neo-action-button:hover {
-  transform: translateY(-2px);
-  box-shadow: 3px 5px 0 #111;
-}
-
-.neo-action-button:active {
-  transform: translateY(0);
-  box-shadow: 2px 2px 0 #111;
-}
-
 .neo-action-button .material-icons {
   font-size: 1.2rem;
 }
 
-/* Loading state styles */
+
+.neo-action-button:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 3px 5px 0 #111;
+}
+
+.neo-action-button:active:not(:disabled) {
+  transform: translateY(0);
+  box-shadow: 2px 2px 0 #111;
+}
+
+.neo-action-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: 3px 3px 0 #111;
+}
+
+/* Loading state styles (as before) */
 .neo-loading-state {
   text-align: center;
   padding: 3rem 1rem;
@@ -1241,52 +1489,113 @@ watch(showShortcutsModal, (newVal) => {
   box-shadow: 6px 6px 0 #111;
 }
 
-/* Responsive styles */
+.loading-spinner {
+  /* Basic spinner */
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #111;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  animation: spin 1s linear infinite;
+  margin: 0 auto 1rem;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* Empty State Styles */
+.empty-state {
+  text-align: center;
+  padding: 2rem 1rem;
+  margin: 2rem auto;
+  /* Centered if inside a flex/grid container */
+  border: 2px dashed #ccc;
+  border-radius: 12px;
+  background: #f9f9f9;
+  color: #555;
+  max-width: 500px;
+}
+
+.empty-state .empty-icon {
+  font-size: 3rem;
+  margin-bottom: 0.5rem;
+  color: #aaa;
+}
+
+.empty-state p {
+  font-size: 1.1rem;
+  margin-bottom: 1rem;
+}
+
+
+/* Responsive styles for header */
 @media (max-width: 768px) {
   .neo-list-header {
     flex-direction: column;
-    gap: 1rem;
+    gap: 1.5rem;
+    /* Consistent gap */
     padding: 1rem;
   }
 
+  .header-left {
+    width: 100%;
+    /* Take full width when stacked */
+  }
+
   .header-right {
     width: 100%;
     justify-content: space-between;
+    /* Spread items */
   }
 
   .neo-title {
-    font-size: 1.8rem;
+    font-size: 2rem;
+    /* Slightly smaller title on mobile */
   }
 
   .view-tabs {
-    overflow-x: auto;
-    padding-bottom: 0.5rem;
-    margin: 0 -0.5rem;
-    padding: 0 0.5rem;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: none;
+    /* If choosing scroll over wrap for tabs: */
+    /* overflow-x: auto; white-space: nowrap; padding-bottom: 8px; flex-wrap: nowrap; */
+    /* -webkit-overflow-scrolling: touch; scrollbar-width: thin; */
   }
 
-  .view-tabs::-webkit-scrollbar {
-    display: none;
-  }
+  /* .view-tabs::-webkit-scrollbar { display: block; height: 5px; } */
+  /* .view-tabs::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px;} */
+
 
   .neo-tab-btn {
-    white-space: nowrap;
+    font-size: 0.85rem;
+    /* Slightly smaller tab text */
+    padding: 0.5rem 0.75rem;
   }
 
   .neo-view-toggle {
-    flex: 1;
-    justify-content: center;
+    /* flex: 1; Ensure it can take space if New Chore btn shrinks more */
   }
 
+  .neo-toggle-btn {
+    padding: 0.5rem 0.6rem;
+  }
+
+  /* More compact toggle buttons */
+
+
   .neo-action-button {
-    flex: 1;
-    justify-content: center;
+    /* flex-grow: 1; /* Allows it to grow if space available */
+    /* justify-content: center; /* Center content if text is hidden */
+    padding: 0.6rem 0.8rem;
+    /* More compact */
   }
 }
 
-/* Dark mode support */
+/* Dark mode support (as before) */
 @media (prefers-color-scheme: dark) {
   .neo-list-header {
     background: #1a1a1a;
@@ -1305,7 +1614,7 @@ watch(showShortcutsModal, (newVal) => {
     box-shadow: 2px 2px 0 #fff;
   }
 
-  .neo-tab-btn:hover {
+  .neo-tab-btn:hover:not(:disabled) {
     box-shadow: 3px 3px 0 #fff;
   }
 
@@ -1328,7 +1637,7 @@ watch(showShortcutsModal, (newVal) => {
     color: #fff;
   }
 
-  .neo-toggle-btn:hover {
+  .neo-toggle-btn:hover:not(.active):not(:disabled) {
     background: #333;
   }
 
@@ -1338,14 +1647,29 @@ watch(showShortcutsModal, (newVal) => {
   }
 
   .neo-action-button {
-    background: #2a2a2a;
+    background: #1a1a1a;
     border-color: #fff;
     color: #fff;
     box-shadow: 3px 3px 0 #fff;
   }
 
-  .neo-action-button:hover {
+  .neo-action-button:hover:not(:disabled) {
     box-shadow: 3px 5px 0 #fff;
+    background: #2c2c2c;
+  }
+
+  .empty-state {
+    background: #222;
+    border-color: #444;
+    color: #aaa;
+  }
+
+  .empty-state .empty-icon {
+    color: #555;
+  }
+
+  .loading-spinner {
+    border-top-color: #fff;
   }
 }
 
@@ -1370,8 +1694,15 @@ watch(showShortcutsModal, (newVal) => {
   font-size: 1.5rem;
   font-weight: 700;
   margin: 0;
+  text-align: center;
+  flex-grow: 1;
 }
 
+.calendar-header .btn-icon {
+  flex-shrink: 0;
+}
+
+
 .calendar-grid {
   display: flex;
   flex-direction: column;
@@ -1381,7 +1712,8 @@ watch(showShortcutsModal, (newVal) => {
 .calendar-weekdays {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-  gap: 0.5rem;
+  gap: 0.25rem;
+  /* Smaller gap for weekdays */
   margin-bottom: 0.5rem;
 }
 
@@ -1389,7 +1721,8 @@ watch(showShortcutsModal, (newVal) => {
   text-align: center;
   font-weight: 600;
   color: #666;
-  padding: 0.5rem;
+  padding: 0.5rem 0.25rem;
+  font-size: 0.85rem;
 }
 
 .calendar-days {
@@ -1399,99 +1732,96 @@ watch(showShortcutsModal, (newVal) => {
 }
 
 .calendar-day {
-  aspect-ratio: 1;
+  /* aspect-ratio: 1; /* Can make cells too large or small. Consider min-height. */
+  min-height: 100px;
+  /* Ensure a minimum height for usability */
   border: 2px solid #111;
   border-radius: 12px;
   padding: 0.5rem;
   background: #f5f5f5;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.25rem;
+  /* Reduced gap inside day cell */
   transition: all 0.2s ease;
+  position: relative;
+  /* For positioning add button */
+  overflow: hidden;
+  /* Prevent content overflow */
 }
 
-.calendar-day:hover {
+.calendar-day:focus-within {
+  /* Highlight when day or its content is focused */
+  border-color: #007bff;
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, .25), 3px 3px 0 #111;
+}
+
+
+.calendar-day:hover:not(:focus-within) {
   transform: translateY(-2px);
   box-shadow: 3px 3px 0 #111;
 }
 
 .calendar-day.other-month {
-  opacity: 0.5;
+  opacity: 0.6;
   background: #eee;
 }
 
 .calendar-day.today {
-  background: #fff;
-  border-color: #007bff;
+  background: #fff0b3;
+  border-color: #ffc107;
 }
 
-.calendar-day.has-chores {
-  background: #fff;
+/* Highlight today */
+.calendar-day.has-chores:not(.today) {
+  background: #e9f5ff;
 }
 
+/* Subtle bg for days with chores */
+
+
 .day-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  position: relative;
 }
 
 .day-number {
   font-weight: 600;
-  font-size: 1.1rem;
+  font-size: 1rem;
 }
 
 .add-chore-indicator {
-  position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--primary);
-  font-size: 1.2rem;
-  font-weight: 300;
-  opacity: 0;
-  transition: all 0.2s ease;
+  /* visibility: hidden; Replaced with subtle always visible */
+  opacity: 0.6;
+  padding: 0.1rem;
+  background: transparent;
+  border: none;
+  color: #007bff;
   cursor: pointer;
+  border-radius: 50%;
+  transition: all 0.2s ease;
+  line-height: 1;
 }
 
-.calendar-day:hover .add-chore-indicator {
-  opacity: 0.7;
+.add-chore-indicator .material-icons {
+  font-size: 1.3rem;
+}
+
+.calendar-day:hover .add-chore-indicator,
+.calendar-day:focus-within .add-chore-indicator,
+/* Show on focus as well */
+.add-chore-indicator:focus {
+  opacity: 1;
+  color: #0056b3;
+  transform: scale(1.1);
 }
 
 .add-chore-indicator:hover {
   color: #f57c00;
-  opacity: 1;
-  transform: translateY(-50%) scale(1.1);
+  /* Distinct hover for the button itself */
 }
 
-.btn-sm {
-  padding: 0.2rem;
-  min-width: 28px;
-  height: 28px;
-  background: transparent;
-  border: 1px solid #ddd;
-  color: #666;
-  transition: all 0.2s ease;
-}
-
-.btn-sm:hover {
-  background: #f8f9fa;
-  border-color: #ccc;
-  color: #333;
-}
-
-.btn-sm .material-icons {
-  font-size: 1.1rem;
-}
-
-.calendar-day:hover .btn-sm {
-  border-color: #ccc;
-}
 
 .day-chores {
   flex: 1;
@@ -1499,22 +1829,39 @@ watch(showShortcutsModal, (newVal) => {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
+  scrollbar-width: thin;
+  /* For Firefox */
 }
 
+.day-chores::-webkit-scrollbar {
+  width: 5px;
+}
+
+.day-chores::-webkit-scrollbar-thumb {
+  background: #ccc;
+  border-radius: 3px;
+}
+
+
 .calendar-chore-item {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  padding: 0.25rem 0.5rem;
+  gap: 0.3rem;
+  /* Smaller gap */
+  padding: 0.2rem 0.4rem;
+  /* Compact padding */
   background: white;
   border: 1px solid #ddd;
   border-radius: 6px;
   cursor: pointer;
   transition: all 0.2s ease;
+  font-size: 0.8rem;
+  /* Smaller font for chore items */
+  line-height: 1.3;
 }
 
 .calendar-chore-item:hover {
-  background: #f8f9fa;
+  background: #f0f8ff;
   transform: translateX(2px);
 }
 
@@ -1523,10 +1870,19 @@ watch(showShortcutsModal, (newVal) => {
   text-decoration: line-through;
 }
 
+.calendar-chore-item .chore-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-grow: 1;
+}
+
+
 .chore-status {
   width: 8px;
   height: 8px;
   border-radius: 50%;
+  flex-shrink: 0;
 }
 
 .chore-status.overdue {
@@ -1545,11 +1901,161 @@ watch(showShortcutsModal, (newVal) => {
   background: #6c757d;
 }
 
+@media (max-width: 768px) {
+  .calendar-view {
+    padding: 1rem;
+  }
+
+  .calendar-header h2 {
+    font-size: 1.25rem;
+  }
+
+  .calendar-days {
+    gap: 0.25rem;
+  }
+
+  .calendar-day {
+    min-height: 80px;
+    padding: 0.3rem;
+  }
+
+  .day-number {
+    font-size: 0.9rem;
+  }
+
+  .add-chore-indicator .material-icons {
+    font-size: 1.1rem;
+  }
+
+  .calendar-chore-item {
+    font-size: 0.75rem;
+    padding: 0.15rem 0.3rem;
+  }
+
+  .weekday {
+    font-size: 0.75rem;
+    padding: 0.3rem 0.1rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .weekday {
+    font-size: 0.6rem;
+    /* Abbreviate to S, M, T... if needed */
+  }
+
+  .calendar-day {
+    min-height: 70px;
+  }
+
+  .day-chores {
+    gap: 0.15rem;
+  }
+}
+
+/* Dark Mode Calendar */
+@media (prefers-color-scheme: dark) {
+  .calendar-view {
+    background: #1a1a1a;
+    border-color: #fff;
+    box-shadow: 6px 6px 0 #fff;
+  }
+
+  .calendar-header h2 {
+    color: #fff;
+  }
+
+  .weekday {
+    color: #aaa;
+  }
+
+  .calendar-day {
+    background: #2a2a2a;
+    border-color: #555;
+  }
+
+  .calendar-day:hover:not(:focus-within) {
+    box-shadow: 3px 3px 0 #fff;
+  }
+
+  .calendar-day.other-month {
+    background: #222;
+    opacity: 0.5;
+  }
+
+  .calendar-day.today {
+    background: #4a3a00;
+    border-color: #ffc107;
+  }
+
+  .calendar-day.has-chores:not(.today) {
+    background: #1c2a3e;
+  }
+
+  .day-number {
+    color: #f0f0f0;
+  }
+
+  .add-chore-indicator {
+    color: #0095ff;
+  }
+
+  .add-chore-indicator:hover,
+  .calendar-day:hover .add-chore-indicator,
+  .add-chore-indicator:focus {
+    color: #66c0ff;
+  }
+
+  .calendar-chore-item {
+    background: #333;
+    border-color: #444;
+    color: #ccc;
+  }
+
+  .calendar-chore-item:hover {
+    background: #3a4a5a;
+  }
+
+  .calendar-chore-item.is-completed {
+    opacity: 0.5;
+  }
+
+  .chore-status.overdue {
+    background: #d9534f;
+  }
+
+  .chore-status.today {
+    background: #0095ff;
+  }
+
+  .chore-status.upcoming {
+    background: #5cb85c;
+  }
+
+  .chore-status.completed {
+    background: #777;
+  }
+
+  .day-chores::-webkit-scrollbar-thumb {
+    background: #555;
+  }
+
+  .calendar-day:focus-within {
+    border-color: #0095ff;
+    box-shadow: 0 0 0 2px rgba(0, 149, 255, .25), 3px 3px 0 #fff;
+  }
+}
+
+
 /* List View Styles */
+.chores-list-container {}
+
+/* Wrapper for list and empty state */
 .chores-grid {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: 1rem;
+  /* Increased gap */
   margin-bottom: 2rem;
   width: 100%;
 }
@@ -1559,11 +2065,13 @@ watch(showShortcutsModal, (newVal) => {
   border-radius: 12px;
   border: 2px solid #111;
   box-shadow: 3px 3px 0 #111;
-  padding: 1rem 1.5rem;
+  padding: 1.25rem 1.5rem;
+  /* Slightly more padding */
   display: flex;
   gap: 1rem;
   transition: all 0.2s ease;
-  align-items: center;
+  align-items: flex-start;
+  /* Align status dot with top of content */
 }
 
 .chore-card:hover {
@@ -1572,117 +2080,181 @@ watch(showShortcutsModal, (newVal) => {
 }
 
 .chore-card.is-overdue {
-  border-color: #dc3545;
+  border-left: 5px solid #dc3545;
+  /* Use left border for overdue emphasis */
+  /* border-color: #dc3545; // This changes all borders */
 }
 
 .chore-card.is-completed {
   opacity: 0.7;
+  background: #f9f9f9;
+  /* Slightly different bg for completed */
 }
 
+.chore-card.is-completed .chore-header h3 {
+  text-decoration: line-through;
+  color: #555;
+}
+
+.chore-status {
+  margin-top: 0.25rem;
+  /* Align with first line of text */
+}
+
+
 .chore-content {
   flex: 1;
   min-width: 0;
   display: flex;
-  align-items: center;
-  gap: 1.5rem;
+  flex-direction: column;
+  /* Stack main info and actions vertically */
+  gap: 0.75rem;
 }
 
 .chore-main-info {
   flex: 1;
   min-width: 0;
   display: flex;
-  align-items: center;
-  gap: 1.5rem;
+  flex-direction: column;
+  /* Header and meta stacked */
+  gap: 0.5rem;
 }
 
 .chore-header {
-  flex: 1;
-  min-width: 0;
   display: flex;
-  align-items: center;
+  justify-content: space-between;
+  /* Push tags to the right */
+  align-items: flex-start;
+  /* Align items at the start */
   gap: 1rem;
+  width: 100%;
 }
 
 .chore-header h3 {
   margin: 0;
-  font-size: 1.1rem;
+  font-size: 1.2rem;
+  /* Slightly larger chore name */
   font-weight: 600;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  /* white-space: nowrap; // Removed to allow wrapping */
+  /* overflow: hidden; text-overflow: ellipsis; // Removed */
+  word-break: break-word;
+  /* Allow long names to wrap */
+  flex-grow: 1;
 }
 
 .chore-tags {
   display: flex;
   gap: 0.5rem;
-  flex-wrap: nowrap;
+  flex-wrap: wrap;
+  /* Allow tags to wrap */
+  flex-shrink: 0;
+  /* Prevent tags from shrinking too much */
+  margin-top: 2px;
+  /* Align better with h3 */
 }
 
 .chore-type-tag,
 .chore-frequency-tag {
   padding: 0.2rem 0.6rem;
   border-radius: 1rem;
-  font-size: 0.8rem;
+  font-size: 0.75rem;
+  /* Smaller tags */
   font-weight: 600;
   white-space: nowrap;
+  border: 1px solid transparent;
+  /* For consistency */
 }
 
 .chore-type-tag.personal {
   background: #e3f2fd;
   color: #1976d2;
+  border-color: #b3e5fc;
 }
 
 .chore-type-tag.group {
   background: #f3e5f5;
   color: #7b1fa2;
+  border-color: #e1bee7;
 }
 
 .chore-frequency-tag {
   background: #e8f5e9;
   color: #2e7d32;
+  border-color: #c8e6c9;
 }
 
+
 .chore-meta {
   display: flex;
-  align-items: center;
-  gap: 1.5rem;
-  min-width: max-content;
+  flex-direction: column;
+  /* Stack meta items */
+  gap: 0.5rem;
+  font-size: 0.9rem;
+  /* Slightly larger meta text */
+  color: #555;
 }
 
-.chore-due-date,
-.chore-completed-date {
+.chore-meta>div {
   display: flex;
   align-items: center;
   gap: 0.4rem;
-  font-size: 0.85rem;
-  white-space: nowrap;
 }
 
-.chore-due-date.overdue {
+/* For icon and text alignment */
+.chore-meta .material-icons {
+  font-size: 1.1rem;
+  color: #777;
+}
+
+
+.chore-due-date.overdue-text,
+.chore-due-date .overdue {
+  /* For overdue text specifically */
   color: #dc3545;
+  font-weight: 500;
 }
 
-.chore-due-date.today {
+.chore-due-date.today-text {
   color: #007bff;
+  font-weight: 500;
 }
 
 .chore-description {
-  font-size: 0.85rem;
+  font-size: 0.9rem;
   color: #666;
-  margin-left: 1rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 200px;
+  line-height: 1.4;
+  /* white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; // Removed for better readability, allow wrapping */
 }
 
 .chore-card-actions {
   display: flex;
+  flex-wrap: wrap;
+  /* Allow actions to wrap */
   gap: 0.5rem;
-  margin-left: auto;
-  flex-shrink: 0;
+  align-items: center;
+  /* Align items vertically */
+  /* margin-left: auto; // No longer needed with flex-column parent */
+  align-self: flex-end;
+  /* Align actions to the right */
 }
 
+.chore-card-actions .btn {
+  font-size: 0.85rem;
+  padding: 0.4rem 0.8rem;
+}
+
+.chore-card-actions .btn-icon .material-icons {
+  font-size: 1.2rem;
+}
+
+/* Ensure icon size is consistent */
+.chore-card-actions .btn-icon .btn-text {
+  font-size: 0.85rem;
+}
+
+/* Match text size if shown */
+
+
 /* Dark Mode Support for List View */
 @media (prefers-color-scheme: dark) {
   .chore-card {
@@ -1693,10 +2265,58 @@ watch(showShortcutsModal, (newVal) => {
 
   .chore-card:hover {
     box-shadow: 4px 4px 0 #fff;
+    background: #202020;
+  }
+
+  .chore-card.is-completed {
+    background: #222;
+    opacity: 0.6;
+  }
+
+  .chore-card.is-completed .chore-header h3 {
+    color: #888;
+  }
+
+  .chore-header h3 {
+    color: #f0f0f0;
+  }
+
+  .chore-meta {
+    color: #aaa;
+  }
+
+  .chore-meta .material-icons {
+    color: #888;
   }
 
   .chore-description {
-    color: #999;
+    color: #bbb;
+  }
+
+  .chore-type-tag.personal {
+    background: #1c2a3e;
+    color: #82cfff;
+    border-color: #2a587f;
+  }
+
+  .chore-type-tag.group {
+    background: #301c30;
+    color: #e1a9f0;
+    border-color: #5c2a5c;
+  }
+
+  .chore-frequency-tag {
+    background: #1c301d;
+    color: #9fec9f;
+    border-color: #2a5c2b;
+  }
+
+  .chore-due-date.overdue-text {
+    color: #ff8a80;
+  }
+
+  .chore-due-date.today-text {
+    color: #80d8ff;
   }
 }
 
@@ -1704,49 +2324,55 @@ watch(showShortcutsModal, (newVal) => {
 @media (max-width: 768px) {
   .chores-grid {
     padding: 0;
+    gap: 0.75rem;
   }
 
   .chore-card {
-    padding: 0.75rem 1rem;
+    padding: 1rem;
   }
 
-  .chore-content {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.75rem;
+  .chore-header h3 {
+    font-size: 1.1rem;
   }
 
-  .chore-main-info {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.75rem;
-    width: 100%;
+  .chore-tags {
+    justify-content: flex-start;
+  }
+
+  /* Align tags to start on mobile */
+  .chore-card-actions {
+    align-self: stretch;
+    justify-content: flex-end;
+  }
+
+  /* Full width for actions row, content to right */
+}
+
+@media (max-width: 480px) {
+
+  /* On very small screens, hide text for Edit/Delete buttons in list view */
+  .chore-card-actions .btn-icon .hide-text-on-mobile {
+    display: none;
+  }
+
+  .chore-card-actions .btn-icon {
+    /* Ensure padding is just for icon */
+    padding: 0.5rem;
   }
 
   .chore-header {
     flex-direction: column;
     align-items: flex-start;
-    gap: 0.5rem;
-    width: 100%;
+    gap: 0.25rem;
   }
 
-  .chore-meta {
-    width: 100%;
-    justify-content: space-between;
-  }
-
-  .chore-description {
-    max-width: none;
-    margin-left: 0;
-  }
-
-  .chore-card-actions {
-    width: 100%;
-    justify-content: flex-end;
+  .chore-header h3 {
+    font-size: 1rem;
   }
 }
 
-/* Transition Animations */
+
+/* Transition Animations (as before) */
 .chore-list-enter-active,
 .chore-list-leave-active {
   transition: all 0.3s ease;
@@ -1755,14 +2381,15 @@ watch(showShortcutsModal, (newVal) => {
 .chore-list-enter-from,
 .chore-list-leave-to {
   opacity: 0;
-  transform: translateY(30px);
+  transform: translateY(20px) scale(0.95);
+  /* Slightly different animation */
 }
 
 .chore-list-move {
   transition: transform 0.3s ease;
 }
 
-/* Keyboard Shortcuts Modal Styles */
+/* Keyboard Shortcuts Modal Styles (as before) */
 .shortcuts-modal {
   max-width: 500px;
 }
@@ -1776,7 +2403,8 @@ watch(showShortcutsModal, (newVal) => {
 .shortcut-item {
   display: flex;
   align-items: center;
-  gap: 1.5rem;
+  gap: 1rem;
+  /* Reduced gap */
   padding: 0.75rem;
   background: #f5f5f5;
   border-radius: 8px;
@@ -1787,12 +2415,14 @@ watch(showShortcutsModal, (newVal) => {
   display: flex;
   gap: 0.5rem;
   align-items: center;
-  min-width: 120px;
+  min-width: 110px;
+  /* Adjusted min-width */
 }
 
 .shortcut-description {
   font-weight: 500;
   color: #333;
+  font-size: 0.9rem;
 }
 
 kbd {
@@ -1802,10 +2432,12 @@ kbd {
   padding: 0.2rem 0.5rem;
   font-family: monospace;
   font-size: 0.9rem;
-  box-shadow: 2px 2px 0 #111;
+  box-shadow: 1px 1px 0 #111;
+  /* Softer shadow for kbd */
+  color: #111;
 }
 
-/* Dark Mode Support for Shortcuts Modal */
+/* Dark Mode Support for Shortcuts Modal (as before) */
 @media (prefers-color-scheme: dark) {
   .shortcut-item {
     background: #2a2a2a;
@@ -1819,11 +2451,12 @@ kbd {
   kbd {
     background: #1a1a1a;
     border-color: #fff;
-    box-shadow: 2px 2px 0 #fff;
+    box-shadow: 1px 1px 0 #fff;
+    color: #fff;
   }
 }
 
-/* Remove old keyboard shortcuts help styles */
+/* Remove old keyboard shortcuts help styles (as before) */
 .keyboard-shortcuts-help,
 .shortcuts-tooltip {
   display: none;
diff --git a/fe/src/types/chore.ts b/fe/src/types/chore.ts
index 5ed06ce..af1c3f7 100644
--- a/fe/src/types/chore.ts
+++ b/fe/src/types/chore.ts
@@ -5,12 +5,12 @@ export type ChoreType = 'personal' | 'group'
 
 export interface Chore {
   id: number
-  group_id?: number
+  group_id?: number | null
   name: string
-  description?: string
+  description?: string | null
   created_by_id: number
   frequency: ChoreFrequency
-  custom_interval_days?: number
+  custom_interval_days?: number | null
   next_due_date: string
   last_completed_at?: string
   created_at: string
@@ -22,36 +22,23 @@ export interface Chore {
     email: string
   }
   assignments?: ChoreAssignment[]
+  is_completed: boolean
+  completed_at: string | null
 }
 
-export interface ChoreCreate {
-  name: string
-  description?: string
-  frequency: ChoreFrequency
-  custom_interval_days?: number
-  next_due_date: string
-  type: ChoreType
-  group_id?: number
-}
+export interface ChoreCreate extends Omit<Chore, 'id'> { }
 
-export interface ChoreUpdate {
-  name?: string
-  description?: string
-  frequency?: ChoreFrequency
-  custom_interval_days?: number
-  next_due_date?: string
-  type?: ChoreType
-  group_id?: number
-}
+export interface ChoreUpdate extends Partial<ChoreCreate> { }
 
 // Chore Assignment Types
 export interface ChoreAssignment {
   id: number
   chore_id: number
-  assigned_to_user_id: number
+  assigned_to_id: number
+  assigned_by_id: number
   due_date: string
   is_complete: boolean
-  completed_at?: string
+  completed_at: string | null
   created_at: string
   updated_at: string
   chore?: Chore
@@ -60,11 +47,11 @@ export interface ChoreAssignment {
 
 export interface ChoreAssignmentCreate {
   chore_id: number
-  assigned_to_user_id: number
+  assigned_to_id: number
   due_date: string
 }
 
 export interface ChoreAssignmentUpdate {
-  is_complete?: boolean
   due_date?: string
+  is_complete?: boolean
 }