\n {/* Completion Toggle */}\n onCompletedChange(!isCompleted)}\n className={`flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium transition-colors ${\n isCompleted \n ? 'bg-green-100 text-green-700 hover:bg-green-200' \n : 'bg-gray-100 text-gray-600 hover:bg-gray-200'\n }`}\n title={isCompleted ? \"Mark as incomplete\" : \"Mark as complete\"}\n >\n {isCompleted ? '✅' : '⭕'} \n {isCompleted ? 'Done' : 'Todo'}\n \n\n {/* Importance Selector */}\n

\n setShowImportanceDropdown(!showImportanceDropdown)}\n className={`flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium transition-colors hover:opacity-80 ${IMPORTANCE_LABELS[importance].color}`}\n >\n {IMPORTANCE_LABELS[importance].emoji} {IMPORTANCE_LABELS[importance].label}\n \n \n\n {showImportanceDropdown && (\n

\n {Object.entries(IMPORTANCE_LABELS).map(([key, config]) => (\n {\n onImportanceChange(key as ImportanceLevel);\n setShowImportanceDropdown(false);\n }}\n className={`w-full flex items-center gap-2 px-3 py-2 text-xs font-medium hover:bg-gray-50 first:rounded-t-lg last:rounded-b-lg ${\n key === importance ? 'bg-gray-50' : ''\n }`}\n >\n \n {config.emoji} {config.label}\n \n \n ))}\n

\n )}\n

\n\n {/* Time Frame Selector */}\n

\n setShowTimeFrameDropdown(!showTimeFrameDropdown)}\n className={`flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium transition-colors hover:opacity-80 ${TIME_FRAME_LABELS[timeFrame].color}`}\n >\n {TIME_FRAME_LABELS[timeFrame].emoji} {TIME_FRAME_LABELS[timeFrame].label}\n \n \n\n {showTimeFrameDropdown && (\n

\n {Object.entries(TIME_FRAME_LABELS).map(([key, config]) => (\n {\n onTimeFrameChange(key as TimeFrame);\n setShowTimeFrameDropdown(false);\n }}\n className={`w-full flex items-center gap-2 px-3 py-2 text-xs font-medium hover:bg-gray-50 first:rounded-t-lg last:rounded-b-lg ${\n key === timeFrame ? 'bg-gray-50' : ''\n }`}\n >\n \n {config.emoji} {config.label}\n \n \n ))}\n

\n )}\n

\n );\n}","deleted","label",[178,179,161],"frontend","components","permalink","https://www.val.town/x/zoebee/Jotter/code/frontend/components/LabelSelector.tsx","extension","actionData","errors"]