\n {/* Header */}\n

Add Task or Habit

\n \n \n \n

\n \n {/* Form Content */}\n

\n {/* Task Name */}\n

\n \n Task or Habit Name *\n \n setFormData(prev => ({ ...prev, name: e.target.value }))}\n placeholder=\"e.g., Check in with family, Exercise, Read\"\n className=\"w-full px-3 py-2 border border-gray-600 bg-gray-700 text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n required\n autoFocus\n />\n

\n\n {/* Custom Emoji */}\n

\n \n Custom Emoji (optional)\n \n

\n setFormData(prev => ({ ...prev, emoji: e.target.value.slice(0, 2) }))}\n className=\"w-16 px-2 py-2 border border-gray-600 bg-gray-700 text-gray-100 rounded-lg text-center text-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n placeholder=\"😊\"\n maxLength={2}\n />\n or pick from below\n

\n \n {/* Emoji Grid */}\n

\n {commonEmojis.map((emoji, index) => (\n setFormData(prev => ({ ...prev, emoji }))}\n className={`\n w-8 h-8 flex items-center justify-center text-lg rounded hover:bg-blue-100 transition-colors\n ${formData.emoji === emoji ? 'bg-blue-200 ring-2 ring-blue-400' : ''}\n `}\n >\n {emoji}\n \n ))}\n

\n \n {/* Description */}\n

\n \n Description (optional)\n \n setFormData(prev => ({ ...prev, description: e.target.value }))}\n placeholder=\"Additional details about this task...\"\n rows={2}\n className=\"w-full px-3 py-2 border border-gray-600 bg-gray-700 text-gray-100 placeholder-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none\"\n />\n

\n \n {/* Frequency */}\n

\n \n Times per week\n \n setFormData(prev => ({ ...prev, frequency_per_week: parseInt(e.target.value) }))}\n className=\"w-full px-3 py-2 border border-gray-600 bg-gray-700 text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n >\n \n \n \n \n \n \n \n \n

\n \n {/* Category */}\n

\n \n Category (optional)\n \n

\n setFormData(prev => ({ ...prev, category: e.target.value }))}\n placeholder=\"Custom category...\"\n className=\"w-full px-3 py-2 border border-gray-600 bg-gray-700 text-gray-100 placeholder-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n />\n

\n {PRESET_CATEGORIES.map(category => (\n setFormData(prev => ({ ...prev, category }))}\n className=\"px-2 py-1 text-xs bg-gray-700 text-gray-300 border border-gray-600 rounded-full hover:bg-gray-600 transition-colors\"\n >\n {category}\n \n ))}\n

\n \n {/* Color */}\n

\n \n Color\n \n

\n {PRESET_COLORS.map(color => (\n setFormData(prev => ({ ...prev, color }))}\n className={`w-8 h-8 rounded-full border-2 ${\n formData.color === color ? 'border-gray-900' : 'border-gray-300'\n }`}\n style={{ backgroundColor: color }}\n title={color}\n />\n ))}\n

\n \n {/* Footer */}\n

\n \n Cancel\n \n \n {saving ? 'Adding...' : 'Add Task'}\n \n

\n );\n}\n","deleted","label",[168,169,149],"frontend","components","permalink","https://www.val.town/x/ryi/pathfinder__5712n7-bore/code/frontend/components/AddTaskModal.tsx","extension","actionData","errors"]