Archive Habit Feature Implementation

[BrayanMQ]

Overview

Add the ability for users to archive habits. This feature will allow users to hide habits from their active list while preserving their historical data and logs.

Requirements

User Experience

• When in management mode (mode === 'management'), add an "Archive" option to the existing actions menu in HabitCard
• The archive option should appear between "Edit" and "Delete" in the dropdown menu
• Include a confirmation dialog before archiving (similar to delete confirmation)
• Show loading state while archiving
• Display success/error messages using the existing toast system

Technical Implementation

Frontend Changes

1. HabitCard Component (components/habits/HabitCard.tsx)

   • Import useArchiveHabit from @/hooks/useHabits
   • Add "Archive" button to the actions menu dropdown
   • Use archive icon (Archive or similar from lucide-react)
   • Add confirmation modal/dialog before archiving
   • Handle loading states and error handling
   • Use existing i18n keys or add new ones for "Archive" text

2. UI Store Integration (store/ui.ts)

   • Add state management for archive confirmation modal if needed
   • Or reuse existing delete confirmation modal with different messaging

3. Internationalization (i18n/locales/)

   • Add translation keys for:
     • "Archive" button text
     • Archive confirmation message
     • Success message
     • Error message

Backend Integration

• The useArchiveHabit hook already exists and handles:
  • Authentication checks
  • Database updates (sets archived_at timestamp)
  • Cache invalidation for both active and archived habits lists
  • Error handling

Acceptance Criteria

• Archive option appears in management mode actions menu
• Clicking archive shows confirmation dialog
• Confirmation dialog explains that archived habits can be viewed in settings/archive section
• Archive action uses existing useArchiveHabit hook
• Loading state shown during archive operation
• Success toast shown after successful archive
• Error toast shown if archive fails
• Archived habit disappears from active habits list
• Archived habit appears in archived habits section (future feature)
• All existing functionality (edit, delete) remains unchanged

Technical Notes

• The archive functionality differs from delete - archived habits retain their logs and can be restored
• Use existing patterns from delete functionality for consistency
• Ensure proper error boundaries and loading states
• Consider accessibility (keyboard navigation, screen reader support)

Related Files

• components/habits/HabitCard.tsx - Add archive button to actions menu
• hooks/useHabits.ts - useArchiveHabit hook (already implemented)
• store/ui.ts - UI state management
• components/habits/ArchivedHabitsSection.tsx - Where archived habits will be displayed
• i18n/locales/en.json & es.json - Translation keys