Function renderTask

packages/app-core/src/components/TasksCalendar.tsx:268–323

(
    task: VaultTask,
    extra: { isActive?: boolean; buttonRef?: React.RefObject<HTMLDivElement> | null }
  )

  }

  const renderTask = (
    task: VaultTask,
    extra: { isActive?: boolean; buttonRef?: React.RefObject<HTMLDivElement> | null }
  ): JSX.Element =>
    editingTaskId === task.id ? (
      <div key={task.id} className="flex items-center gap-2 rounded-md px-2 py-1">
        <span className="h-4 w-4 shrink-0 rounded border border-paper-400/70" />
        <input
          autoFocus
          value={editValue}
          onChange={(e) => setEditValue(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === 'Enter') {
              e.preventDefault()
              e.currentTarget.blur()
            } else if (e.key === 'Escape') {
              e.stopPropagation()
              cancelEditRef.current = true
              e.currentTarget.blur()
            }
          }}
          onBlur={() => {
            if (cancelEditRef.current) {
              cancelEditRef.current = false
            } else {
              const text = editValue.trim()
              if (text && text !== taskTail(task)) {
                void applyTaskMutation(task, { kind: 'set-text', text })
              }
            }
            setEditingTaskId(null)
          }}
          className="min-w-0 flex-1 rounded border border-accent/60 bg-paper-100 px-1 py-0.5 text-sm outline-none"
          spellCheck={false}
          autoComplete="off"
        />
      </div>
    ) : (
      <CalendarTaskRow
        key={task.id}
        task={task}
        isOverdue={isTaskOverdue(task, today)}
        isActive={extra.isActive}
        buttonRef={extra.buttonRef ?? null}
        onToggle={() => onToggleTask(task)}
        onOpen={() => {
          if (suppressClickRef.current) {
            suppressClickRef.current = false
            return
          }
          onOpenTask(task)
        }}
        onContextMenu={(e) => openTaskMenu(e, task)}
        onPointerDownTask={(e) => startPointerDrag(task, e)}
      />
    )

  // Reset the keyboard "active task" cursor whenever the selected day changes.