a principio consegui resolver o problema, nem eu sei como isso funcionou mas a lógica tá certa.

const taskList = document.querySelector('.app__section-task-list');

const formTask = document.querySelector('.app__form-add-task')
const toggleFormTaskBtn = document.querySelector('.app__button--add-task')
const formLabel = document.querySelector('.app__form-label')
const textArea = document.querySelector('.app__form-textarea')
const cancelButton = document.querySelector('.app__form-footer__button--cancel')
const deleteButton = document.querySelector('.app__form-footer__button--delete')
const localStorageTarefas = localStorage.getItem('tarefas')
const taskAtiveDescription = document.querySelector('.app__section-active-task-description')
console.log(deleteButton)

let tarefas = localStorageTarefas ? JSON.parse(localStorageTarefas) : []

let tarefaSelecionada = null;
let itemTarefaSelecionada = null;

const selecionaTarefa = (tarefa, elemento) => {

    document.querySelectorAll('.app__section-task-list-item-active').forEach((button) => {
        button.classList.remove('app__section-task-list-item-active')
    });

    if (tarefaSelecionada == tarefa) {
        taskAtiveDescription.textContent = null;;
        itemTarefaSelecionada = null;
        tarefaSelecionada = null;
        return
    }

    tarefaSelecionada = tarefa
    itemTarefaSelecionada = elemento
    taskAtiveDescription.textContent = tarefa.descricao
    elemento.classList.add('app__section-task-list-item-active')
}

const taskIcon =`<svg class="app__section-task-icon-status" width="24" height="24" viewBox="0 0 24 24"
fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="12" fill="#FFF" />
<path
    d="M9 16.1719L19.5938 5.57812L21 6.98438L9 18.9844L3.42188 13.4062L4.82812 12L9 16.1719Z"
    fill="#01080E" />
</svg>`


const limparForm = () => {
    textArea.value = ''
    formTask.classList.toggle('hidden')
}

function createTask(tarefa) {
    const li = document.createElement('li')
    li.classList.add('app__section-task-list-item')

    const svgIcon = document.createElement('svg')
    svgIcon.innerHTML = taskIcon

    const paragrafo = document.createElement('p')
    paragrafo.classList.add('app__section-task-list-item-description')

    paragrafo.textContent = tarefa.descricao
    
    const botao = document.createElement('button')


    li.onclick = () => {
        selecionaTarefa(tarefa,li) 
    }
    svgIcon.addEventListener('click', (event) => {
        event.stopPropagation()
        botao.setAttribute('disabled', true)
        tarefa.concluida = true
        localStorage.setItem('tarefas', JSON.stringify(tarefas))
        li.classList.add('app__section-task-list-item-complete')

    })
    if(tarefa.concluida) {
        botao.setAttribute('disabled', true)
        li.classList.add('app__section-task-list-item-complete')


    }
    li.appendChild(svgIcon)
    li.appendChild(paragrafo)

    return li
}

tarefas.forEach(task => {
    const taskItem = createTask(task)
    taskList.appendChild(taskItem)
})

toggleFormTaskBtn.addEventListener('click' , () => {
    formTask.classList.toggle("hidden")
})

cancelButton.addEventListener('click', () => {
    limparForm()
})

deleteButton.addEventListener('click', () => {
    textArea.value = ''
})

const updateLocalStorage = () => {
    localStorage.setItem('tarefas', JSON.stringify(tarefas))
}

formTask.addEventListener('submit' , (evento) => {
    evento.preventDefault() 
        const task = {
            descricao: textArea.value,
            concluida: false
        }
    tarefas.push(task)
    const taskItem = createTask(task)
    taskList.appendChild(taskItem)
    updateLocalStorage()
    limparForm()
})

Oi, Gabriel, tudo bem?

Sinto muito que você tenha ficado insatisfeito com a aula.

Sobre o código de "marcar a tarefa como concluída":

Este código adiciona um ouvinte de evento click a um elemento de ícone SVG ( svgIcon). Quando o ícone é clicado, ele impede a propagação de eventos, desativa um botão ( button) e adiciona uma classe CSS ( 'app__section-task-list-item-complete') a um item da lista HTML ( li). A segunda parte do código verifica se uma variável tarefa.concluidaé verdadeira e, em caso afirmativo, executa as mesmas ações no botão e no item da lista. Em resumo, o código trata da marcação de tarefas como concluídas em uma lista de tarefas, modificando o DOM e a aparência visual quando o ícone é clicado ou quando a tarefa.concluidacondição é atendida.

Em relação ao localStorage:

Você está correto em pensar que essa informação precisa ser armazenada de alguma forma para persistir mesmo após o reset da página.

Uma solução para esse problema é utilizar o localStorage para armazenar o status das tarefas. O localStorage é uma forma de armazenamento no navegador que permite guardar informações mesmo após o fechamento da página.

Você pode utilizar o localStorage para armazenar um array com as tarefas e seus respectivos status. Por exemplo:

// Armazenar as tarefas no localStorage localStorage.setItem('tarefas', JSON.stringify(tarefas));

// Recuperar as tarefas do localStorage const tarefas = JSON.parse(localStorage.getItem('tarefas'));

Dessa forma, ao marcar uma tarefa como concluída, você atualiza o status no localStorage e, ao reiniciar a página, recupera as tarefas do localStorage e exibe corretamente o status das tarefas.

Espero ter ajudado de alguma forma. Qualquer dúvida manda aqui. Valeu.