\n )}\n \n );\n } else {\n // Multiple completions - show progress ring with count, allow over 100%\n const circumference = 2 * Math.PI * 12; // radius of 12 (reduced from 14)\n const strokeDasharray = circumference;\n const clampedProgress = Math.min(progress, 1); // Clamp visual progress to 100%\n const strokeDashoffset = circumference - (clampedProgress * circumference);\n \n return (\n onTaskClick(task, weekStart)}\n disabled={!isCurrentWeek}\n className={`\n task-circle relative w-7 h-7 flex items-center justify-center\n ${isCurrentWeek ? 'cursor-pointer hover:scale-105' : 'cursor-default'}\n transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400\n ${isCurrentWeek && !isCompleted ? `ring-2 ${taskColor.border.replace('border-', 'ring-')}` : ''}\n `}\n title={`${completionCount}/${target} completed ${getCompletionNotes(task.id, weekStart) ? `- ${getCompletionNotes(task.id, weekStart)}` : ''}`}\n >\n {/* Progress ring background */}\n \n \n {/* Count display */}\n 0 \n ? taskColor.completed.replace('bg-', 'text-')\n : 'text-gray-400'\n }`}>\n {completionCount}\n \n \n );\n }\n };\n \n if (tasks.length === 0) {\n return (\n

\n \n

No tasks yet

Add your first task or habit to start tracking!

\n );\n }\n \n // Get emoji for task based on custom emoji or name/category\n const getTaskEmoji = (task: Task): string => {\n // Use custom emoji if set\n if (task.emoji) {\n return task.emoji;\n }\n \n const name = task.name.toLowerCase();\n const category = task.category?.toLowerCase() || '';\n \n // Exercise/fitness\n if (name.includes('workout') || name.includes('exercise') || name.includes('gym') || name.includes('run') || category.includes('fitness')) return '💪';\n if (name.includes('walk') || name.includes('steps')) return '🚶';\n if (name.includes('bike') || name.includes('cycling')) return '🚴';\n if (name.includes('swim')) return '🏊';\n if (name.includes('yoga') || name.includes('stretch')) return '🧘';\n \n // Work/productivity\n if (name.includes('work') || name.includes('code') || name.includes('project') || category.includes('work')) return '💼';\n if (name.includes('meeting') || name.includes('call')) return '📞';\n if (name.includes('email') || name.includes('inbox')) return '📧';\n if (name.includes('plan') || name.includes('review')) return '📋';\n \n // Health/wellness\n if (name.includes('water') || name.includes('drink')) return '💧';\n if (name.includes('medicine') || name.includes('vitamin') || name.includes('supplement')) return '💊';\n if (name.includes('sleep') || name.includes('bed')) return '😴';\n if (name.includes('meditation') || name.includes('mindful')) return '🧘';\n if (name.includes('doctor') || name.includes('appointment')) return '👩‍⚕️';\n \n // Learning/reading\n if (name.includes('read') || name.includes('book') || category.includes('reading')) return '📖';\n if (name.includes('study') || name.includes('learn') || category.includes('learning')) return '📚';\n if (name.includes('course') || name.includes('lesson')) return '🎓';\n if (name.includes('practice') && (name.includes('language') || name.includes('guitar') || name.includes('piano'))) return '🎵';\n \n // Household/chores\n if (name.includes('clean') || name.includes('tidy') || category.includes('chores')) return '🧹';\n if (name.includes('laundry') || name.includes('wash')) return '🧺';\n if (name.includes('dishes') || name.includes('kitchen')) return '🍽️';\n if (name.includes('grocery') || name.includes('shopping')) return '🛒';\n if (name.includes('cook') || name.includes('meal')) return '👨‍🍳';\n \n // Social/relationships\n if (name.includes('call') && (name.includes('mom') || name.includes('dad') || name.includes('family'))) return '👨‍👩‍👧‍👦';\n if (name.includes('friend') || name.includes('social') || category.includes('social')) return '👥';\n if (name.includes('date') || name.includes('wife') || name.includes('partner')) return '💕';\n \n // Creative/hobbies\n if (name.includes('write') || name.includes('journal') || category.includes('writing')) return '✍️';\n if (name.includes('draw') || name.includes('art') || category.includes('art')) return '🎨';\n if (name.includes('photo') || name.includes('picture')) return '📸';\n if (name.includes('music') || name.includes('guitar') || name.includes('piano')) return '🎵';\n if (name.includes('garden') || name.includes('plant')) return '🌱';\n \n // Finance/admin\n if (name.includes('budget') || name.includes('finance') || name.includes('money') || category.includes('finance')) return '💰';\n if (name.includes('bill') || name.includes('payment')) return '💳';\n if (name.includes('tax') || name.includes('document')) return '📄';\n \n // Tech/digital\n if (name.includes('backup') || name.includes('update')) return '💾';\n if (name.includes('app') || name.includes('software')) return '📱';\n \n // Default fallbacks\n if (category) {\n if (category.includes('health')) return '❤️';\n if (category.includes('habit')) return '🔄';\n if (category.includes('goal')) return '🎯';\n }\n \n // Final fallback\n return '📝';\n };\n\n // Helper function to format week label across two lines\n const formatWeekLabel = (weekStart: string) => {\n const start = new Date(weekStart);\n const end = new Date(start);\n end.setDate(start.getDate() + 6);\n \n const startMonth = start.toLocaleDateString('en-US', { month: 'short' });\n const endMonth = end.toLocaleDateString('en-US', { month: 'short' });\n const startDay = start.getDate();\n const endDay = end.getDate();\n \n if (startMonth === endMonth) {\n return {\n line1: `${startMonth} ${startDay}`,\n line2: `${startMonth} ${endDay}`\n };\n } else {\n return {\n line1: `${startMonth} ${startDay}`,\n line2: `${endMonth} ${endDay}`\n };\n }\n };\n\n return (\n

\n {/* Header row with week labels */}\n

\n 📋\n

\n {weeks.map(week => {\n const weekLabel = formatWeekLabel(week.start_date);\n return (\n

{weekLabel.line1}

{weekLabel.line2}

\n );\n })}\n

\n \n {/* Task rows */}\n {sortedTasks.map((task, index) => {\n const taskColor = getTaskColor(task.id, index);\n return (\n

handleDragStart(task, e) : undefined}\n onDragOver={dragMode ? (e) => handleDragOver(e, index) : undefined}\n onDragLeave={dragMode ? handleDragLeave : undefined}\n onDrop={dragMode ? (e) => handleDrop(e, index) : undefined}\n onDragEnd={dragMode ? handleDragEnd : undefined}\n >\n {/* Task name background (when toggled on) */}\n {showTaskNames && (\n

\n \n {task.name}\n {task.frequency_per_week && task.frequency_per_week > 1 && (\n ({task.frequency_per_week}x/week)\n )}\n {task.category && (\n - {task.category}\n )}\n \n

\n )}\n \n {/* Task emoji column */}\n

\n onEditTask?.(task)}\n onTouchStart={(e) => handleTouchStart(task, e)}\n onTouchEnd={handleTouchEnd}\n onTouchMove={handleTouchMove}\n className=\"text-sm hover:scale-110 transition-transform cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 rounded px-2 py-0.5 w-full flex items-center justify-center group\"\n title={`${task.name}${task.frequency_per_week && task.frequency_per_week > 1 ? ` (${task.frequency_per_week}x/week)` : ''}${task.category ? ` - ${task.category}` : ''}\\n\\nClick to edit${dragMode ? ' • Drag to reorder' : ''}`}\n >\n \n {getTaskEmoji(task)}\n {/* Drag handle indicator */}\n {dragMode && (\n \n ⠿\n \n )}\n \n \n

\n \n {/* Week completion columns */}\n {weeks.map(week => {\n const isCurrentWeek = week.start_date === getWeekStart();\n \n return (\n

\n {renderProgressIndicator(task, week.start_date, isCurrentWeek, index)}\n

\n );\n })}\n

\n \n {/* Long press tooltip */}\n {longPressTooltip.show && longPressTooltip.task && (\n \n

{longPressTooltip.task.name}

\n {longPressTooltip.task.frequency_per_week && longPressTooltip.task.frequency_per_week > 1 && (\n

\n {longPressTooltip.task.frequency_per_week}x per week\n

\n )}\n {longPressTooltip.task.category && (\n

\n Category: {longPressTooltip.task.category}\n

\n )}\n {longPressTooltip.task.description && (\n

\n {longPressTooltip.task.description}\n

\n )}\n

\n )}\n \n {/* Touch overlay to hide tooltip */}\n {longPressTooltip.show && (\n \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/TaskGrid.tsx","extension","actionData","errors"]