From ee6d96d9ecd2fd0bf533cf4c0ef356b3c093d581 Mon Sep 17 00:00:00 2001
From: mohamad <mohamad>
Date: Sat, 31 May 2025 15:37:50 +0200
Subject: [PATCH] feat: Revamp ChoresPage with enhanced UI and functionality

- Redesigned the ChoresPage layout to improve user experience, introducing a new header with tabs for viewing overdue, today, upcoming, all pending, and completed chores.
- Implemented a calendar view for better visualization of chores, allowing users to navigate between months and add chores directly on specific dates.
- Added a loading state to enhance feedback during data fetching.
- Introduced a shortcuts modal to display keyboard shortcuts for improved accessibility.
- Enhanced chore card interactions with improved styling and responsiveness, including a transition effect for list items.
- Updated chore management functionalities, including create, edit, and delete operations, with better validation and auto-save features.
---
 fe/src/pages/ChoresPage.vue | 1774 +++++++++++++++++++++++++----------
 1 file changed, 1266 insertions(+), 508 deletions(-)

diff --git a/fe/src/pages/ChoresPage.vue b/fe/src/pages/ChoresPage.vue
index e88e866..c4603db 100644
--- a/fe/src/pages/ChoresPage.vue
+++ b/fe/src/pages/ChoresPage.vue
@@ -1,109 +1,158 @@
 <template>
-  <main class="container page-padding">
-    <div class="page-header">
-      <div class="header-content">
-        <h1>My Chores</h1>
-        <div class="header-actions">
-          <button class="btn btn-primary" @click="openCreateChoreModal(null)">
-            <span class="material-icons">add</span>
-            New Chore
+  <main class="neo-container page-padding">
+    <div class="neo-list-header">
+      <div class="header-left">
+        <h1 class="neo-title">Chores</h1>
+        <div class="view-tabs">
+          <button class="neo-tab-btn" :class="{ active: activeView === 'overdue' }" @click="activeView = 'overdue'"
+            :disabled="isLoading">
+            <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">
+            <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">
+            <span class="material-icons">upcoming</span>
+            Upcoming
+          </button>
+          <button class="neo-tab-btn" :class="{ active: activeView === 'all' }" @click="activeView = 'all'"
+            :disabled="isLoading">
+            <span class="material-icons">list</span>
+            All Pending
+          </button>
+          <button class="neo-tab-btn" :class="{ active: activeView === 'completed' }" @click="activeView = 'completed'"
+            :disabled="isLoading">
+            <span class="material-icons">check_circle</span>
+            Completed
           </button>
         </div>
       </div>
-      <div class="view-tabs">
-        <button class="tab-btn" :class="{ active: activeView === 'overdue' }" @click="activeView = 'overdue'">
-          Overdue
-          <span v-if="counts.overdue > 0" class="tab-count">{{ counts.overdue }}</span>
-        </button>
-        <button class="tab-btn" :class="{ active: activeView === 'today' }" @click="activeView = 'today'">
-          Today
-          <span v-if="counts.today > 0" class="tab-count">{{ counts.today }}</span>
-        </button>
-        <button class="tab-btn" :class="{ active: activeView === 'upcoming' }" @click="activeView = 'upcoming'">
-          Upcoming
-        </button>
-        <button class="tab-btn" :class="{ active: activeView === 'all' }" @click="activeView = 'all'">
-          All Pending
-        </button>
-        <button class="tab-btn" :class="{ active: activeView === 'completed' }" @click="activeView = 'completed'">
-          Completed
+      <div class="header-right">
+        <div class="neo-view-toggle">
+          <button class="neo-toggle-btn" :class="{ active: viewMode === 'calendar' }" @click="viewMode = 'calendar'"
+            :disabled="isLoading">
+            <span class="material-icons">calendar_month</span>
+            Calendar
+          </button>
+          <button class="neo-toggle-btn" :class="{ active: viewMode === 'list' }" @click="viewMode = 'list'"
+            :disabled="isLoading">
+            <span class="material-icons">view_list</span>
+            List
+          </button>
+        </div>
+        <button class="neo-action-button" @click="openCreateChoreModal(null)" :disabled="isLoading">
+          <span class="material-icons">add</span>
+          New Chore
         </button>
       </div>
     </div>
 
-    <!-- Chores List -->
-    <div v-if="filteredChores.length > 0" 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 }">
-        <div class="chore-status" :class="getStatusClass(chore)"></div>
-        <div class="chore-content">
-          <div class="chore-main-info">
-            <div class="chore-header">
-              <h3>{{ chore.name }}</h3>
-              <div class="chore-tags">
-                <span class="chore-type-tag" :class="chore.type">
-                  {{ chore.type === 'personal' ? 'Personal' : getGroupName(chore.group_id) || 'Group' }}
-                </span>
-                <span v-if="!chore.is_completed" class="chore-frequency-tag" :class="chore.frequency">
-                  {{ formatFrequency(chore.frequency) }}
-                </span>
+    <!-- Loading State -->
+    <div v-if="isLoading" class="neo-loading-state">
+      <div class="loading-spinner"></div>
+      <p>Loading chores...</p>
+    </div>
+
+    <!-- Calendar View -->
+    <div v-else-if="viewMode === 'calendar'" class="calendar-view">
+      <div class="calendar-header">
+        <button class="btn btn-icon" @click="previousMonth">
+          <span class="material-icons">chevron_left</span>
+        </button>
+        <h2>{{ currentMonthYear }}</h2>
+        <button class="btn btn-icon" @click="nextMonth">
+          <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>
             </div>
-            <div class="chore-meta">
-              <div v-if="!chore.is_completed" class="chore-due-date" :class="getDueDateClass(chore)">
-                <span class="material-icons">schedule</span>
-                {{ formatDueDate(chore.next_due_date) }}
-              </div>
-              <div v-else class="chore-completed-date">
-                <span class="material-icons">check_circle_outline</span>
-                Completed: {{ formatDate(chore.completed_at || chore.next_due_date) }}
-              </div>
-              <div v-if="chore.description" class="chore-description">
-                {{ chore.description }}
-              </div>
-            </div>
-          </div>
-          <div class="chore-card-actions">
-            <button v-if="!chore.is_completed" class="btn btn-success btn-sm btn-complete"
-              @click="toggleChoreCompletion(chore)" title="Mark as Done">
-              <span class="material-icons">check_circle</span> Done
-            </button>
-            <button v-else class="btn btn-warning btn-sm btn-undo" @click="toggleChoreCompletion(chore)"
-              title="Mark as Not Done">
-              <span class="material-icons">undo</span> Undo
-            </button>
-            <button class="btn btn-icon" @click="openEditChoreModal(chore)" title="Edit">
-              <span class="material-icons">edit</span>
-            </button>
-            <button class="btn btn-icon btn-danger-icon" @click="confirmDeleteChore(chore)" title="Delete">
-              <span class="material-icons">delete</span>
-            </button>
           </div>
         </div>
       </div>
     </div>
 
-    <div v-else class="empty-state">
-      <div class="empty-state-content">
-        <span class="material-icons">cleaning_services</span>
-        <h3>
-          {{ activeView === 'completed' ? 'No Completed Chores' :
-            activeView === 'overdue' ? 'No Overdue Chores!' :
-              activeView === 'today' ? 'No Chores Due Today!' :
-                'No Chores Yet' }}
-        </h3>
-        <p v-if="activeView !== 'completed' && activeView !== 'overdue' && activeView !== 'today'">
-          Get started by adding your first chore!
-        </p>
-        <button v-if="activeView !== 'completed'" class="btn btn-primary" @click="openCreateChoreModal(null)">
-          <span class="material-icons">add</span>
-          Create New Chore
-        </button>
-      </div>
+    <!-- List View -->
+    <div v-else class="chores-grid">
+      <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 }">
+          <div class="chore-status" :class="getStatusClass(chore)"></div>
+          <div class="chore-content">
+            <div class="chore-main-info">
+              <div class="chore-header">
+                <h3>{{ chore.name }}</h3>
+                <div class="chore-tags">
+                  <span class="chore-type-tag" :class="chore.type">
+                    {{ chore.type === 'personal' ? 'Personal' : getGroupName(chore.group_id) || 'Group' }}
+                  </span>
+                  <span v-if="!chore.is_completed" class="chore-frequency-tag" :class="chore.frequency">
+                    {{ formatFrequency(chore.frequency) }}
+                  </span>
+                </div>
+              </div>
+              <div class="chore-meta">
+                <div v-if="!chore.is_completed" class="chore-due-date" :class="getDueDateClass(chore)">
+                  <span class="material-icons">schedule</span>
+                  {{ formatDueDate(chore.next_due_date) }}
+                </div>
+                <div v-else class="chore-completed-date">
+                  <span class="material-icons">check_circle_outline</span>
+                  Completed: {{ formatDate(chore.completed_at || chore.next_due_date) }}
+                </div>
+                <div v-if="chore.description" class="chore-description">
+                  {{ chore.description }}
+                </div>
+              </div>
+            </div>
+            <div class="chore-card-actions">
+              <button v-if="!chore.is_completed" class="btn btn-success btn-sm btn-complete"
+                @click="toggleChoreCompletion(chore)" title="Mark as Done">
+                <span class="material-icons">check_circle</span> Done
+              </button>
+              <button v-else class="btn btn-warning btn-sm btn-undo" @click="toggleChoreCompletion(chore)"
+                title="Mark as Not Done">
+                <span class="material-icons">undo</span> Undo
+              </button>
+              <button class="btn btn-icon" @click="openEditChoreModal(chore)" title="Edit">
+                <span class="material-icons">edit</span>
+              </button>
+              <button class="btn btn-icon btn-danger-icon" @click="confirmDeleteChore(chore)" title="Delete">
+                <span class="material-icons">delete</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </transition-group>
     </div>
 
     <!-- Create/Edit Chore Modal -->
-    <div v-if="showChoreModal" class="modal-backdrop" @click.self="showChoreModal = false">
+    <div v-if="showChoreModal" class="modal-backdrop open" @click.self="showChoreModal = false">
       <div class="modal-container">
         <div class="modal-header">
           <h3>{{ isEditing ? 'Edit Chore' : 'New Chore' }}</h3>
@@ -187,8 +236,8 @@
       </div>
     </div>
 
-    <!-- Delete Confirmation Dialog (unchanged) -->
-    <div v-if="showDeleteDialog" class="modal-backdrop" @click.self="showDeleteDialog = false">
+    <!-- Delete Confirmation Dialog -->
+    <div v-if="showDeleteDialog" class="modal-backdrop open" @click.self="showDeleteDialog = false">
       <div class="modal-container delete-confirm">
         <div class="modal-header">
           <h3>Delete Chore</h3>
@@ -205,12 +254,52 @@
         </div>
       </div>
     </div>
+
+    <!-- Keyboard Shortcuts Modal -->
+    <div v-if="showShortcutsModal" class="modal-backdrop open" @click.self="showShortcutsModal = false">
+      <div class="modal-container shortcuts-modal">
+        <div class="modal-header">
+          <h3>Keyboard Shortcuts</h3>
+          <button class="btn btn-icon" @click="showShortcutsModal = false">
+            <span class="material-icons">close</span>
+          </button>
+        </div>
+        <div class="modal-body">
+          <div class="shortcuts-list">
+            <div class="shortcut-item">
+              <div class="shortcut-keys">
+                <kbd>Ctrl/Cmd</kbd> + <kbd>N</kbd>
+              </div>
+              <div class="shortcut-description">New Chore</div>
+            </div>
+            <div class="shortcut-item">
+              <div class="shortcut-keys">
+                <kbd>Ctrl/Cmd</kbd> + <kbd>/</kbd>
+              </div>
+              <div class="shortcut-description">Toggle View</div>
+            </div>
+            <div class="shortcut-item">
+              <div class="shortcut-keys">
+                <kbd>Ctrl/Cmd</kbd> + <kbd>?</kbd>
+              </div>
+              <div class="shortcut-description">Show/Hide Shortcuts</div>
+            </div>
+            <div class="shortcut-item">
+              <div class="shortcut-keys">
+                <kbd>Esc</kbd>
+              </div>
+              <div class="shortcut-description">Close Modal</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </main>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue'
-import { format, startOfDay, addDays, addWeeks, isBefore, isEqual } from 'date-fns'
+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 { useNotificationStore } from '../stores/notifications'
 import type { Chore as OriginalChore, ChoreCreate as OriginalChoreCreate, ChoreUpdate, ChoreFrequency } from '../types/chore' // Assuming these types exist
@@ -239,6 +328,7 @@ const showChoreModal = ref(false)
 const showDeleteDialog = ref(false)
 const isEditing = ref(false)
 const selectedChore = ref<Chore | null>(null)
+const showShortcutsModal = ref(false)
 
 const cachedChores = useStorage<Chore[]>('cached-chores-v2', []) // Changed key to avoid conflicts with old cache
 const cachedTimestamp = useStorage<number>('cached-chores-timestamp-v2', 0)
@@ -280,31 +370,87 @@ const frequencyOptions = [
   { label: 'Custom', value: 'custom' as ChoreFrequency }
 ]
 
+// Add loading state
+const isLoading = ref(true)
+
 const loadChores = async () => {
+  isLoading.value = true
   try {
-    const fetchedChores = await choreService.getAllChores() as OriginalChore[]; // Cast to original
+    const fetchedChores = await choreService.getAllChores() as OriginalChore[]
     chores.value = fetchedChores.map(c => ({
       ...c,
-      is_completed: (c as Chore).is_completed || false, // Add default if missing
-      completed_at: (c as Chore).completed_at || null,   // Add default if missing
-    }));
-    cachedChores.value = chores.value;
-    cachedTimestamp.value = Date.now();
+      is_completed: (c as Chore).is_completed || false,
+      completed_at: (c as Chore).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 = []
+  } finally {
+    isLoading.value = false
   }
 }
 
-const openCreateChoreModal = (groupId: number | null) => {
+// Calendar state
+const viewMode = ref<'calendar' | 'list'>('calendar')
+const currentDate = ref(new Date())
+
+const weekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+
+const currentMonthYear = computed(() => {
+  return format(currentDate.value, 'MMMM yyyy')
+})
+
+const calendarDays = computed(() => {
+  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)
+
+  // Get the last day of the month and adjust to end on Saturday
+  const lastDay = end.getDay()
+  const endDate = addDays(end, 6 - lastDay)
+
+  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))
+    })
+
+    return {
+      date,
+      isCurrentMonth: isSameMonth(date, currentDate.value),
+      isToday: isTodayDate(date),
+      isOtherMonth: !isSameMonth(date, currentDate.value),
+      chores: dayChores
+    }
+  })
+})
+
+const previousMonth = () => {
+  currentDate.value = addDays(startOfMonth(currentDate.value), -1)
+}
+
+const nextMonth = () => {
+  currentDate.value = addDays(endOfMonth(currentDate.value), 1)
+}
+
+const openCreateChoreModal = (groupId: number | null, date?: Date) => {
+  console.log('Opening create modal', { groupId, date }) // Debug log
   isEditing.value = false
   choreForm.value = {
     name: '',
     description: '',
     frequency: 'daily',
     custom_interval_days: undefined,
-    next_due_date: format(new Date(), 'yyyy-MM-dd'),
+    next_due_date: date ? format(date, 'yyyy-MM-dd') : format(new Date(), 'yyyy-MM-dd'),
     type: groupId ? 'group' : 'personal',
     group_id: groupId ?? undefined,
     is_completed: false,
@@ -314,6 +460,7 @@ const openCreateChoreModal = (groupId: number | null) => {
 }
 
 const openEditChoreModal = (chore: Chore) => {
+  console.log('Opening edit modal', chore) // Debug log
   isEditing.value = true
   selectedChore.value = chore
   choreForm.value = {
@@ -326,36 +473,38 @@ const openEditChoreModal = (chore: Chore) => {
     group_id: chore.group_id,
     is_completed: chore.is_completed,
     completed_at: chore.completed_at,
-  };
+  }
   showChoreModal.value = true
 }
 
 const onSubmit = async () => {
+  if (!validateForm()) return
+
   try {
-    const choreData: ChoreCreate | ChoreUpdate = { ...choreForm.value };
+    const choreData: ChoreCreate | ChoreUpdate = { ...choreForm.value }
 
     if (choreData.frequency !== 'custom') {
-      choreData.custom_interval_days = undefined;
+      choreData.custom_interval_days = undefined
     }
 
-    let notificationMessage = '';
+    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, choreData as ChoreUpdate)
+      notificationMessage = `Chore updated successfully`
     } else {
-      await choreService.createChore(choreData as ChoreCreate);
-      notificationMessage = `Chore created successfully`;
+      await choreService.createChore(choreData as ChoreCreate)
+      notificationMessage = `Chore created successfully`
     }
 
-    notificationStore.addNotification({ message: notificationMessage, type: 'success' });
-    showChoreModal.value = false;
-    loadChores();
+    notificationStore.addNotification({ message: notificationMessage, type: 'success' })
+    showChoreModal.value = false
+    loadChores()
   } catch (error) {
-    console.error('Failed to save chore:', error);
-    notificationStore.addNotification({ message: `Failed to ${isEditing.value ? 'update' : 'create'} chore`, type: 'error' });
+    console.error('Failed to save chore:', error)
+    notificationStore.addNotification({ message: `Failed to ${isEditing.value ? 'update' : 'create'} chore`, type: 'error' })
   }
-};
+}
 
 const confirmDeleteChore = (chore: Chore) => {
   selectedChore.value = chore
@@ -523,140 +672,861 @@ 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
+  }
+
+  // Ctrl/Cmd + N for new chore
+  if ((event.ctrlKey || event.metaKey) && event.key === 'n') {
+    event.preventDefault()
+    openCreateChoreModal(null)
+  }
+
+  // Ctrl/Cmd + / to toggle view mode
+  if ((event.ctrlKey || event.metaKey) && event.key === '/') {
+    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
+  }
+
+  // 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
+    }
+  }
+}
+
+// Add keyboard event listeners
 onMounted(() => {
+  window.addEventListener('keydown', handleKeyPress)
   loadCachedData()
   loadChores()
   loadGroups()
 })
 
+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
+  }
+
+  if (choreForm.value.type === 'group' && !choreForm.value.group_id) {
+    notificationStore.addNotification({ message: 'Please select a group', 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
+  }
+
+  return true
+}
+
+// Add auto-save functionality for form
+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
+}
+
+// Modify choreForm to trigger auto-save
+watch(choreForm, () => {
+  if (isEditing.value) {
+    autoSaveForm()
+  }
+}, { deep: true })
+
+// Add confirmation before leaving with unsaved changes
+const hasUnsavedChanges = ref(false)
+
+watch(choreForm, () => {
+  hasUnsavedChanges.value = true
+}, { deep: true })
+
+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
+    }
+  }
+})
+
+// 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-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-container {
+  background: white;
+  border-radius: 12px;
+  border: 3px solid #111;
+  box-shadow: 6px 6px 0 #111;
+  width: 90%;
+  max-width: 600px;
+  max-height: 90vh;
+  overflow-y: auto;
+  position: relative;
+}
+
+.modal-header {
+  padding: 1rem 1.5rem;
+  border-bottom: 2px solid #111;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-header h3 {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 700;
+}
+
+.modal-body {
+  padding: 1.5rem;
+}
+
+.modal-footer {
+  padding: 1rem 1.5rem;
+  border-top: 2px solid #111;
+  display: flex;
+  justify-content: flex-end;
+  gap: 1rem;
+}
+
+/* Form styles */
+.modal-form {
+  padding: 1.5rem;
+}
+
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.form-row {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.form-row .form-group {
+  flex: 1;
+  margin-bottom: 0;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+  color: #333;
+}
+
+.form-input {
+  width: 100%;
+  padding: 0.75rem;
+  border: 2px solid #111;
+  border-radius: 8px;
+  font-size: 1rem;
+  transition: all 0.2s ease;
+  background: white;
+}
+
+.form-input:focus {
+  outline: none;
+  border-color: #007bff;
+  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
+}
+
+.form-input::placeholder {
+  color: #999;
+}
+
+/* Type selector styles */
+.type-selector {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.type-btn {
+  flex: 1;
+  padding: 0.75rem;
+  border: 2px solid #111;
+  border-radius: 8px;
+  background: white;
+  font-weight: 600;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  transition: all 0.2s ease;
+}
+
+.type-btn:hover {
+  background: #f8f9fa;
+}
+
+.type-btn.active {
+  background: #111;
+  color: white;
+}
+
+/* Quick due dates styles */
+.quick-due-dates {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.btn-outline {
+  padding: 0.5rem 1rem;
+  border: 2px solid #111;
+  border-radius: 6px;
+  background: white;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.btn-outline:hover {
+  background: #f8f9fa;
+}
+
+/* Button styles */
+.btn {
+  padding: 0.75rem 1.5rem;
+  border-radius: 8px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.btn-primary {
+  background: #111;
+  color: white;
+  border: 2px solid #111;
+}
+
+.btn-primary:hover {
+  background: #333;
+}
+
+.btn-neutral {
+  background: white;
+  color: #333;
+  border: 2px solid #111;
+}
+
+.btn-neutral:hover {
+  background: #f8f9fa;
+}
+
+.btn-icon {
+  padding: 0.5rem;
+  border: none;
+  background: transparent;
+  color: #666;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.btn-icon:hover {
+  color: #333;
+}
+
+/* Dark mode support for modals and forms */
+@media (prefers-color-scheme: dark) {
+  .modal-container {
+    background: #1a1a1a;
+    border-color: #fff;
+    box-shadow: 6px 6px 0 #fff;
+  }
+
+  .modal-header,
+  .modal-footer {
+    border-color: #fff;
+  }
+
+  .form-group label {
+    color: #fff;
+  }
+
+  .form-input {
+    background: #2a2a2a;
+    border-color: #fff;
+    color: #fff;
+  }
+
+  .form-input::placeholder {
+    color: #666;
+  }
+
+  .type-btn {
+    background: #2a2a2a;
+    border-color: #fff;
+    color: #fff;
+  }
+
+  .type-btn:hover {
+    background: #333;
+  }
+
+  .type-btn.active {
+    background: #fff;
+    color: #111;
+  }
+
+  .btn-outline {
+    background: #2a2a2a;
+    border-color: #fff;
+    color: #fff;
+  }
+
+  .btn-outline:hover {
+    background: #333;
+  }
+
+  .btn-neutral {
+    background: #2a2a2a;
+    color: #fff;
+    border-color: #fff;
+  }
+
+  .btn-neutral:hover {
+    background: #333;
+  }
+
+  .btn-icon {
+    color: #999;
+  }
+
+  .btn-icon:hover {
+    color: #fff;
+  }
+}
+</style>
+
 <style scoped>
-.page-padding {
-  padding: 2rem;
+/* Base container styles */
+.neo-container {
+  padding: 1rem;
   max-width: 1200px;
   margin: 0 auto;
 }
 
-.page-header {
+.page-padding {
+  padding: 1rem;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+/* Header styles */
+.neo-list-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 2rem;
+  margin-bottom: 2rem;
+  padding: 1.5rem;
+  background: white;
+  border-radius: 18px;
+  border: 3px solid #111;
+  box-shadow: 6px 6px 0 #111;
+}
+
+.header-left {
+  flex: 1;
+  min-width: 0;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex-shrink: 0;
+}
+
+.neo-title {
+  font-size: 2.5rem;
+  font-weight: 900;
+  margin: 0 0 1rem 0;
+  line-height: 1.2;
+  color: #111;
+}
+
+/* Tab styles */
+.view-tabs {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  margin-bottom: 0.5rem;
+}
+
+.neo-tab-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.6rem 1rem;
+  border: 2px solid #111;
+  background: #f5f5f5;
+  color: #333;
+  font-weight: 600;
+  font-size: 0.9rem;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow: 2px 2px 0 #111;
+}
+
+.neo-tab-btn .material-icons {
+  font-size: 1.1rem;
+}
+
+.neo-tab-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 3px 3px 0 #111;
+}
+
+.neo-tab-btn.active {
+  background: #111;
+  color: white;
+  box-shadow: 3px 3px 0 #111;
+}
+
+.neo-tab-count {
+  background: rgba(255, 255, 255, 0.2);
+  color: white;
+  padding: 0.1em 0.5em;
+  border-radius: 1rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  min-width: 1.5rem;
+  text-align: center;
+}
+
+.neo-tab-btn:not(.active) .neo-tab-count {
+  background: #e0e0e0;
+  color: #333;
+}
+
+/* View toggle styles */
+.neo-view-toggle {
+  display: flex;
+  gap: 0.5rem;
+  background: #f5f5f5;
+  padding: 0.25rem;
+  border-radius: 8px;
+  border: 2px solid #111;
+}
+
+.neo-toggle-btn {
+  border: none;
+  background: transparent;
+  color: #333;
+  padding: 0.5rem 1rem;
+  font-weight: 600;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.neo-toggle-btn:hover {
+  background: #e9ecef;
+}
+
+.neo-toggle-btn.active {
+  background: #111;
+  color: white;
+}
+
+/* Action button styles */
+.neo-action-button {
+  background: #fff;
+  border: 3px solid #111;
+  border-radius: 8px;
+  padding: 0.6rem 1rem;
+  font-weight: 700;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  box-shadow: 3px 3px 0 #111;
+  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-loading-state {
+  text-align: center;
+  padding: 3rem 1rem;
+  margin: 2rem 0;
+  border: 3px solid #111;
+  border-radius: 18px;
+  background: #fff;
+  box-shadow: 6px 6px 0 #111;
+}
+
+/* Responsive styles */
+@media (max-width: 768px) {
+  .neo-list-header {
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1rem;
+  }
+
+  .header-right {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .neo-title {
+    font-size: 1.8rem;
+  }
+
+  .view-tabs {
+    overflow-x: auto;
+    padding-bottom: 0.5rem;
+    margin: 0 -0.5rem;
+    padding: 0 0.5rem;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+  }
+
+  .view-tabs::-webkit-scrollbar {
+    display: none;
+  }
+
+  .neo-tab-btn {
+    white-space: nowrap;
+  }
+
+  .neo-view-toggle {
+    flex: 1;
+    justify-content: center;
+  }
+
+  .neo-action-button {
+    flex: 1;
+    justify-content: center;
+  }
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  .neo-list-header {
+    background: #1a1a1a;
+    border-color: #fff;
+    box-shadow: 6px 6px 0 #fff;
+  }
+
+  .neo-title {
+    color: #fff;
+  }
+
+  .neo-tab-btn {
+    background: #2a2a2a;
+    border-color: #fff;
+    color: #fff;
+    box-shadow: 2px 2px 0 #fff;
+  }
+
+  .neo-tab-btn:hover {
+    box-shadow: 3px 3px 0 #fff;
+  }
+
+  .neo-tab-btn.active {
+    background: #fff;
+    color: #111;
+  }
+
+  .neo-tab-btn:not(.active) .neo-tab-count {
+    background: #333;
+    color: #fff;
+  }
+
+  .neo-view-toggle {
+    background: #2a2a2a;
+    border-color: #fff;
+  }
+
+  .neo-toggle-btn {
+    color: #fff;
+  }
+
+  .neo-toggle-btn:hover {
+    background: #333;
+  }
+
+  .neo-toggle-btn.active {
+    background: #fff;
+    color: #111;
+  }
+
+  .neo-action-button {
+    background: #2a2a2a;
+    border-color: #fff;
+    color: #fff;
+    box-shadow: 3px 3px 0 #fff;
+  }
+
+  .neo-action-button:hover {
+    box-shadow: 3px 5px 0 #fff;
+  }
+}
+
+/* Calendar View Styles */
+.calendar-view {
+  background: white;
+  border-radius: 18px;
+  border: 3px solid #111;
+  box-shadow: 6px 6px 0 #111;
+  padding: 1.5rem;
   margin-bottom: 2rem;
 }
 
-.header-content {
+.calendar-header {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
   margin-bottom: 1.5rem;
 }
 
-.header-content h1 {
-  font-size: 2rem;
+.calendar-header h2 {
+  font-size: 1.5rem;
   font-weight: 700;
   margin: 0;
 }
 
-.view-tabs {
+.calendar-grid {
   display: flex;
+  flex-direction: column;
   gap: 0.5rem;
-  /* Reduced gap */
-  border-bottom: 2px solid #eee;
-  padding-bottom: 0.5rem;
-  flex-wrap: wrap;
-  /* Allow tabs to wrap on smaller screens */
 }
 
-.tab-btn {
-  padding: 0.5rem 1rem;
-  border: none;
-  background: none;
+.calendar-weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.weekday {
+  text-align: center;
   font-weight: 600;
   color: #666;
-  cursor: pointer;
-  border-radius: 8px 8px 0 0;
-  /* Rounded top corners */
+  padding: 0.5rem;
+}
+
+.calendar-days {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 0.5rem;
+}
+
+.calendar-day {
+  aspect-ratio: 1;
+  border: 2px solid #111;
+  border-radius: 12px;
+  padding: 0.5rem;
+  background: #f5f5f5;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
   transition: all 0.2s ease;
-  white-space: nowrap;
 }
 
-.tab-count {
-  background-color: #e0e0e0;
-  color: #555;
-  padding: 0.1em 0.4em;
-  border-radius: 0.75em;
-  font-size: 0.8em;
-  margin-left: 0.5em;
+.calendar-day:hover {
+  transform: translateY(-2px);
+  box-shadow: 3px 3px 0 #111;
 }
 
-.tab-btn.active .tab-count {
-  background-color: rgba(255, 255, 255, 0.3);
-  color: white;
+.calendar-day.other-month {
+  opacity: 0.5;
+  background: #eee;
 }
 
-.tab-btn:hover {
-  background: #f0f0f0;
+.calendar-day.today {
+  background: #fff;
+  border-color: #007bff;
+}
+
+.calendar-day.has-chores {
+  background: #fff;
+}
+
+.day-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+}
+
+.day-number {
+  font-weight: 600;
+  font-size: 1.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;
+  cursor: pointer;
+}
+
+.calendar-day:hover .add-chore-indicator {
+  opacity: 0.7;
+}
+
+.add-chore-indicator:hover {
+  color: #f57c00;
+  opacity: 1;
+  transform: translateY(-50%) scale(1.1);
+}
+
+.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;
 }
 
-.tab-btn.active {
-  background: var(--primary-color, #007bff);
-  color: white;
-  border-bottom: 2px solid var(--primary-color, #007bff);
-  /* For active tab underline */
+.btn-sm .material-icons {
+  font-size: 1.1rem;
 }
 
-
-.chores-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-  /* Slightly wider cards */
-  gap: 1.5rem;
+.calendar-day:hover .btn-sm {
+  border-color: #ccc;
 }
 
-.chore-card {
-  position: relative;
-  background: white;
-  border-radius: 12px;
-  border: 1px solid #e0e0e0;
-  /* Softer border */
-  transition: all 0.2s ease;
-  overflow: hidden;
+.day-chores {
+  flex: 1;
+  overflow-y: auto;
   display: flex;
-  /* For status bar */
   flex-direction: column;
-  /* Stack content vertically */
+  gap: 0.25rem;
 }
 
-.chore-card:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
-  border-color: var(--primary-color, #007bff);
+.calendar-chore-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.25rem 0.5rem;
+  background: white;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
 }
 
-.chore-card.is-overdue {
-  border-left-color: #dc3545;
-  /* Stronger left border for overdue */
-  background-color: #fff5f5;
-  /* Light red background for overdue */
+.calendar-chore-item:hover {
+  background: #f8f9fa;
+  transform: translateX(2px);
 }
 
-.chore-card.is-completed {
-  opacity: 0.75;
-  background-color: #f9f9f9;
-}
-
-.chore-card.is-completed .chore-header h3,
-.chore-card.is-completed .chore-description {
+.calendar-chore-item.is-completed {
+  opacity: 0.6;
   text-decoration: line-through;
-  color: #888;
 }
 
 .chore-status {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 5px;
-  /* Thicker status bar */
-  height: 100%;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
 }
 
 .chore-status.overdue {
@@ -664,65 +1534,97 @@ onMounted(() => {
 }
 
 .chore-status.today {
-  background: #28a745;
+  background: #007bff;
 }
 
 .chore-status.upcoming {
-  background: #17a2b8;
+  background: #28a745;
 }
 
-/* Info color */
 .chore-status.completed {
   background: #6c757d;
 }
 
-/* Muted grey */
-
-.chore-content {
-  padding: 1rem 1.5rem;
-  /* Consistent padding */
+/* List View Styles */
+.chores-grid {
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
-  flex-grow: 1;
-  /* Allow content to fill card */
-  margin-left: 5px;
-  /* Space for status bar */
+  gap: 0.75rem;
+  margin-bottom: 2rem;
+  width: 100%;
+}
+
+.chore-card {
+  background: white;
+  border-radius: 12px;
+  border: 2px solid #111;
+  box-shadow: 3px 3px 0 #111;
+  padding: 1rem 1.5rem;
+  display: flex;
+  gap: 1rem;
+  transition: all 0.2s ease;
+  align-items: center;
+}
+
+.chore-card:hover {
+  transform: translateY(-1px);
+  box-shadow: 4px 4px 0 #111;
+}
+
+.chore-card.is-overdue {
+  border-color: #dc3545;
+}
+
+.chore-card.is-completed {
+  opacity: 0.7;
+}
+
+.chore-content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
 }
 
 .chore-main-info {
-  margin-bottom: 1rem;
-  /* Space before actions */
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
 }
 
 .chore-header {
-  margin-bottom: 0.75rem;
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
 }
 
 .chore-header h3 {
-  font-size: 1.2rem;
-  /* Slightly smaller */
+  margin: 0;
+  font-size: 1.1rem;
   font-weight: 600;
-  /* Semi-bold */
-  margin: 0 0 0.35rem 0;
-  color: #333;
-  word-break: break-word;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .chore-tags {
   display: flex;
   gap: 0.5rem;
-  flex-wrap: wrap;
-  margin-bottom: 0.5rem;
+  flex-wrap: nowrap;
 }
 
 .chore-type-tag,
 .chore-frequency-tag {
-  font-size: 0.7rem;
-  /* Smaller tags */
   padding: 0.2rem 0.6rem;
   border-radius: 1rem;
-  font-weight: 500;
+  font-size: 0.8rem;
+  font-weight: 600;
+  white-space: nowrap;
 }
 
 .chore-type-tag.personal {
@@ -731,17 +1633,20 @@ onMounted(() => {
 }
 
 .chore-type-tag.group {
+  background: #f3e5f5;
+  color: #7b1fa2;
+}
+
+.chore-frequency-tag {
   background: #e8f5e9;
   color: #2e7d32;
 }
 
-.chore-frequency-tag {
-  background: #f5f5f5;
-  color: #616161;
-}
-
 .chore-meta {
-  margin-bottom: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  min-width: max-content;
 }
 
 .chore-due-date,
@@ -750,324 +1655,177 @@ onMounted(() => {
   align-items: center;
   gap: 0.4rem;
   font-size: 0.85rem;
-  font-weight: 500;
-  margin-bottom: 0.5rem;
-}
-
-.chore-due-date .material-icons,
-.chore-completed-date .material-icons {
-  font-size: 1.1rem;
+  white-space: nowrap;
 }
 
 .chore-due-date.overdue {
   color: #dc3545;
-  font-weight: 600;
 }
 
 .chore-due-date.today {
-  color: #28a745;
-  font-weight: 600;
-}
-
-.chore-due-date.upcoming {
-  color: #17a2b8;
-}
-
-.chore-completed-date {
-  color: #6c757d;
+  color: #007bff;
 }
 
 .chore-description {
-  color: #555;
-  font-size: 0.875rem;
-  line-height: 1.4;
-  max-height: 4.2em;
-  /* Limit to 3 lines */
+  font-size: 0.85rem;
+  color: #666;
+  margin-left: 1rem;
+  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  /* white-space: nowrap; */
-  /* If you want single line ellipsis */
+  max-width: 200px;
 }
 
 .chore-card-actions {
   display: flex;
   gap: 0.5rem;
-  justify-content: flex-end;
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+/* Dark Mode Support for List View */
+@media (prefers-color-scheme: dark) {
+  .chore-card {
+    background: #1a1a1a;
+    border-color: #fff;
+    box-shadow: 3px 3px 0 #fff;
+  }
+
+  .chore-card:hover {
+    box-shadow: 4px 4px 0 #fff;
+  }
+
+  .chore-description {
+    color: #999;
+  }
+}
+
+/* Responsive Styles for List View */
+@media (max-width: 768px) {
+  .chores-grid {
+    padding: 0;
+  }
+
+  .chore-card {
+    padding: 0.75rem 1rem;
+  }
+
+  .chore-content {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.75rem;
+  }
+
+  .chore-main-info {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.75rem;
+    width: 100%;
+  }
+
+  .chore-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+    width: 100%;
+  }
+
+  .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;
+  }
+}
+
+/* Transition Animations */
+.chore-list-enter-active,
+.chore-list-leave-active {
+  transition: all 0.3s ease;
+}
+
+.chore-list-enter-from,
+.chore-list-leave-to {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+.chore-list-move {
+  transition: transform 0.3s ease;
+}
+
+/* Keyboard Shortcuts Modal Styles */
+.shortcuts-modal {
+  max-width: 500px;
+}
+
+.shortcuts-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.shortcut-item {
+  display: flex;
   align-items: center;
-  padding-top: 0.75rem;
-  border-top: 1px solid #f0f0f0;
-  margin-top: auto;
-  /* Push actions to the bottom */
+  gap: 1.5rem;
+  padding: 0.75rem;
+  background: #f5f5f5;
+  border-radius: 8px;
+  border: 2px solid #111;
 }
 
-.btn-complete .material-icons,
-.btn-undo .material-icons {
-  margin-right: 0.3em;
+.shortcut-keys {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  min-width: 120px;
 }
 
-.btn-sm {
-  padding: 0.35rem 0.7rem;
-  font-size: 0.8rem;
-}
-
-.btn-success {
-  background-color: #28a745;
-  color: white;
-}
-
-.btn-success:hover {
-  background-color: #218838;
-}
-
-.btn-warning {
-  background-color: #ffc107;
-  color: #212529;
-}
-
-.btn-warning:hover {
-  background-color: #e0a800;
-}
-
-.btn-icon {
-  padding: 0.5rem;
-  border: none;
-  background: none;
-  color: #777;
-  /* Lighter icon color */
-  cursor: pointer;
-  border-radius: 50%;
-  /* Circular hover */
-  transition: all 0.2s ease;
-}
-
-.btn-icon:hover {
-  background: #e9ecef;
+.shortcut-description {
+  font-weight: 500;
   color: #333;
 }
 
-.btn-danger-icon:hover {
-  background-color: #fdd;
-  color: #c82333;
-}
-
-
-.empty-state {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 300px;
-  /* Reduced height */
-  background: #f9f9f9;
-  /* Lighter background */
-  border-radius: 12px;
-  border: 2px dashed #e0e0e0;
-  margin-top: 2rem;
-}
-
-.empty-state-content {
-  text-align: center;
-  padding: 2rem;
-}
-
-.empty-state-content .material-icons {
-  font-size: 3.5rem;
-  color: #bbb;
-  margin-bottom: 1rem;
-}
-
-.empty-state-content h3 {
-  font-size: 1.4rem;
-  font-weight: 600;
-  margin-bottom: 0.5rem;
-  color: #555;
-}
-
-.empty-state-content p {
-  color: #777;
-  margin-bottom: 1.5rem;
-}
-
-
-/* Modal Styles */
-.modal-backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.6);
-  /* Darker backdrop */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  padding: 1rem;
-  /* Padding for smaller screens */
-}
-
-.modal-container {
+kbd {
   background: white;
-  border-radius: 12px;
-  width: 100%;
-  /* Full width on small screens */
-  max-width: 550px;
-  /* Slightly smaller max width */
-  max-height: 90vh;
-  overflow-y: auto;
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
-}
-
-.modal-header {
-  padding: 1rem 1.5rem;
-  /* Adjusted padding */
-  border-bottom: 1px solid #eee;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.modal-header h3 {
-  font-size: 1.2rem;
-  font-weight: 600;
-  margin: 0;
-}
-
-.modal-form {
-  padding: 1.5rem;
-}
-
-.form-group {
-  margin-bottom: 1.25rem;
-}
-
-.form-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1rem;
-}
-
-.form-group label {
-  display: block;
-  margin-bottom: 0.4rem;
-  font-weight: 500;
-  color: #444;
+  border: 2px solid #111;
+  border-radius: 4px;
+  padding: 0.2rem 0.5rem;
+  font-family: monospace;
   font-size: 0.9rem;
+  box-shadow: 2px 2px 0 #111;
 }
 
-.form-input {
-  width: 100%;
-  padding: 0.65rem 0.85rem;
-  /* Adjusted padding */
-  border: 1px solid #ccc;
-  /* Standard border */
-  border-radius: 6px;
-  /* Softer radius */
-  font-size: 0.95rem;
-  transition: all 0.2s ease;
-}
-
-.form-input:focus {
-  outline: none;
-  border-color: var(--primary-color, #007bff);
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
-}
-
-.quick-due-dates {
-  display: flex;
-  gap: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.btn-outline {
-  border: 1px solid #ccc;
-  background-color: white;
-  color: #555;
-}
-
-.btn-outline:hover {
-  background-color: #f0f0f0;
-}
-
-
-.type-selector {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1rem;
-}
-
-.type-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  padding: 0.75rem;
-  /* Adjusted padding */
-  border: 1px solid #ccc;
-  border-radius: 6px;
-  background: white;
-  font-weight: 500;
-  color: #555;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.type-btn .material-icons {
-  font-size: 1.2rem;
-}
-
-.type-btn:hover {
-  border-color: var(--primary-color-dark, #0056b3);
-  color: var(--primary-color-dark, #0056b3);
-}
-
-.type-btn.active {
-  background: var(--primary-color, #007bff);
-  border-color: var(--primary-color, #007bff);
-  color: white;
-}
-
-.modal-footer {
-  padding: 1rem 1.5rem;
-  /* Adjusted padding */
-  border-top: 1px solid #eee;
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.75rem;
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-  .page-padding {
-    padding: 1rem;
+/* Dark Mode Support for Shortcuts Modal */
+@media (prefers-color-scheme: dark) {
+  .shortcut-item {
+    background: #2a2a2a;
+    border-color: #fff;
   }
 
-  .header-content {
-    flex-direction: column;
-    gap: 1rem;
-    align-items: stretch;
+  .shortcut-description {
+    color: #fff;
   }
 
-  .view-tabs {
-    justify-content: center;
+  kbd {
+    background: #1a1a1a;
+    border-color: #fff;
+    box-shadow: 2px 2px 0 #fff;
   }
+}
 
-  /* Center tabs on mobile if they don't wrap much */
-  .chores-grid {
-    grid-template-columns: 1fr;
-  }
-
-  /* Single column for cards */
-  .form-row {
-    grid-template-columns: 1fr;
-  }
-
-  .type-selector {
-    grid-template-columns: 1fr;
-  }
-
-  .modal-container {
-    width: calc(100% - 2rem);
-    margin: 1rem;
-  }
+/* Remove old keyboard shortcuts help styles */
+.keyboard-shortcuts-help,
+.shortcuts-tooltip {
+  display: none;
 }
 </style>
\ No newline at end of file