{habit.name}

\n {habit.description && (\n

{habit.description}

\n )}\n \n

\n {getStatusBadge()}\n \n {habit.current_streak > 0 && (\n \n 🔥 {habit.current_streak} day{habit.current_streak !== 1 ? 's' : ''}\n \n )}\n \n {habit.longest_streak > 0 && (\n \n Best: {habit.longest_streak} day{habit.longest_streak !== 1 ? 's' : ''}\n \n )}\n

\n\n setShowDeleteConfirm(true)}\n className=\"text-gray-400 hover:text-red-500 p-1\"\n title=\"Delete habit\"\n >\n 🗑️\n \n

\n\n {/* Show reason if habit was missed */}\n {hasEntry && !isCompleted && habit.today_entry?.reason && (\n

\n Reason: {habit.today_entry.reason}\n

\n )}\n\n {/* Action buttons */}\n {!hasEntry && (\n

\n \n {loading ?

: '✓ Mark Complete'}\n \n \n {loading ?

: '✗ Mark Missed'}\n \n

\n )}\n\n {/* Reason form */}\n {showReasonForm && (\n

\n \n Why couldn't you complete this habit today?\n \n setReason(e.target.value)}\n placeholder=\"e.g., Was feeling sick, forgot, too busy...\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none\"\n rows={2}\n maxLength={200}\n required\n />\n

\n \n Submit\n \n {\n setShowReasonForm(false);\n setReason('');\n }}\n className=\"bg-gray-300 hover:bg-gray-400 text-gray-700 py-1 px-3 rounded text-sm font-medium\"\n >\n Cancel\n \n

\n \n )}\n\n {/* Delete confirmation */}\n {showDeleteConfirm && (\n

\n Are you sure you want to delete this habit? This action cannot be undone.\n

\n \n {loading ?

: 'Delete'}\n \n setShowDeleteConfirm(false)}\n className=\"bg-gray-300 hover:bg-gray-400 text-gray-700 py-1 px-3 rounded text-sm font-medium\"\n >\n Cancel\n \n

\n )}\n

\n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/tfsops/habits/code/frontend/components/HabitCard.tsx","extension","actionData","errors"]