[Bug] Usei abordagem com função para informar quando não existia pensamento o que causou um bug ao implementar o typehead

No ui.js havia criado a function nenhumPensamentoNaLista() para manipular o DOM dinamicamente e acrescentar os elementos necessários para a mensagem de que não existe pensamentos no Mural.

   nenhumPensamentoNaLista() {
        const listaSemPensamentos = document.getElementById("lista-pensamentos-container")

        const mensagem = document.createElement("div")
        mensagem.id = "mensagem-vazia"
        mensagem.classList = "mensagem-vazia"
        
        const mensagemSemPensamentos = document.createElement("p")
        mensagemSemPensamentos.textContent = "Nada por aqui ainda, que tal compartilhar alguma ideia?"

        const imagemSemPensamentos = document.createElement("img")
        imagemSemPensamentos.src = "assets/imagens/lista-vazia.png"
        imagemSemPensamentos.alt = "Caixa de pensamentos vazia"
        
        mensagem.appendChild(mensagemSemPensamentos)
        mensagem.appendChild(imagemSemPensamentos)
        listaSemPensamentos.appendChild(mensagem)
    }

Pra isso dar certo, também precisei acrescentar uma condição verificando com ".length === 0" na function renderizarPensamentos(), que até então não tinha parâmetros.

async renderizarPensamentos(pensamentosFiltrados = null) {
        const listaPensamentos = document.getElementById('lista-pensamentos')
        listaPensamentos.innerHTML = ""

        try {
            let pensamentosParaRenderizar

            if(pensamentosFiltrados) {
                pensamentosParaRenderizar = pensamentosFiltrados
            } else {
                pensamentosParaRenderizar = await api.buscarPensamentos()
            }
            
            if (pensamentosParaRenderizar.length === 0) {
                this.nenhumPensamentoNaLista(); // Chama a função se a lista estiver vazia
            } else {
                pensamentosParaRenderizar.forEach(this.adicionarPensamentoNaLista); // Adiciona os pensamentos à lista
            }
        }
        catch {
            alert('Erro ao renderizar pensamentos')
            throw error
        }
    },

Com a inclusão dos parâmetros para implementar o typehead, conforme acima, a função renderizarPensamentos(pensamentosFiltrados = null) passou a executar a função nenhumPensamentoNaLista() a cada input que aconteceia na cosnt InputBusca. Causando um bug que acrescentava ao DOM de forma repetida os elementos que geravam a mensagem de "Nada por aqui ainda... etc", a cada modificação no input.

Para resolver o problema, acrescentei condições de verificação nas duas funções: em "renderizarPensamentos" para remover a mensagem caso ela já exista e em "nenhumPensamentoNaLista" com um "return" para sair da função, caso a mensagem já existisse no DOM.

    async renderizarPensamentos(pensamentosFiltrados = null) {
        const listaPensamentos = document.getElementById('lista-pensamentos')
        listaPensamentos.innerHTML = ""

        // Remove a mensagem de "nenhum pensamento" caso ela exista
        const mensagemVazia = document.getElementById("mensagem-vazia");
        if (mensagemVazia) {
            mensagemVazia.remove();
        }
//código omitido...

    nenhumPensamentoNaLista() {
        const listaSemPensamentos = document.getElementById("lista-pensamentos-container")

       // Verifica se a mensagem já existe no DOM
        if (document.getElementById("mensagem-vazia")) {
            return; // Sai da função se a mensagem já estiver presente
        }
//código omitido

Como a abordagem com função era uma ideia possível para manipulação do DOM neste caso, deixo aqui a solução que pensei. Vai que serve para alguém que também tenha passado pelo mesmo problema?! ;)

Forte abraço à todos! Vamo codar!