Toda propriedade a um clique

Productivity

Se você usa o Notez para algo que tem ciclo de vida, como uma lista de leitura, um backlog ou notas de clientes, provavelmente criou uma propriedade Status. Talvez uma Responsável. Talvez uma relação Projeto apontando para a nota do próprio projeto.

E aí, toda vez que queria ver só os itens bloqueados, ou só os seus, você abria o popover Filtrar, achava a propriedade, abria o seletor dela, marcava o valor e fechava duas camadas de interface. Três ou quatro cliques para uma pergunta que você faz vinte vezes por dia.

As tags nunca tiveram esse problema. Elas sempre tiveram uma seção na barra lateral: uma linha por tag, uma contagem, um clique para filtrar. É o controle mais usado do app. A pergunta óbvia era por que ele era o único.

O que foi lançado

Desde a v0.8.0, qualquer propriedade de seleção, seleção múltipla, membro ou relação pode aparecer na barra lateral como uma seção própria. O Quadro integrado também. Cada seção lista seus valores em linhas — um chip colorido para uma opção, um avatar para uma pessoa, um ícone de nota para uma nota vinculada, o nome da coluna para o quadro — com a contagem de notas ativas que têm aquele valor. Clique numa linha e a lista é filtrada por ela. Clique numa segunda linha da mesma seção e aparecem as notas com um valor ou o outro. Clique em outra seção e o filtro fica mais restrito.

Você ativa uma seção em Mais → Propriedades personalizadas: abra a propriedade, ligue Mostrar na barra lateral e salve. Para desativar, passe o mouse sobre o cabeçalho da seção na barra lateral, clique no pequeno botão de configurações que aparece e escolha Remover da barra lateral. A propriedade continua igual; só muda a presença dela na barra lateral.

Tags vem ativada por padrão, porque sempre esteve lá. Quadro vem desativado, porque a visualização de quadro já mostra as colunas, e uma segunda cópia seria ruído para a maioria das pessoas. As duas configurações mudam no mesmo diálogo.

A barra lateral também ganhou uma mudança estrutural menor, que acabou importando mais do que eu esperava: Nova nota e Início agora ficam fixos no topo, e Arquivos, Lixeira, Configurações e Mais ficam fixos embaixo; só as seções do meio rolam. Se você exibir quatro propriedades na tela de um notebook, as ações principais não somem mais pelo topo.

Por que só esses tipos

O primeiro rascunho deste recurso dizia "qualquer propriedade". O segundo, uma hora depois, dizia "qualquer propriedade cujos valores sejam um conjunto fixo de coisas", e foi essa a versão lançada.

Uma linha da barra lateral precisa ser um valor discreto, clicável. Uma opção é. Uma pessoa é. Uma nota vinculada é. Um número, uma data ou uma linha de texto não são: filtrar por eles exige um intervalo ou uma consulta, e é para isso que servem os campos do popover Filtrar. Pôr uma propriedade de texto na barra lateral significaria pôr uma caixa de busca na barra lateral, e aí já não seria uma seção, seria um segundo popover de filtro com um layout pior.

As relações exigiram mais uma decisão. Uma seleção tem uma lista fixa de opções; as "opções" de uma relação são as notas que as pessoas vincularam, que podem ser centenas e mudam toda vez que alguém cria um link novo. Listar todas deixaria a seção enorme. Por isso uma seção de relação mostra as dez notas de destino ativas com mais links, da mais vinculada para a menos, e a busca do popover continua sendo o caminho para o resto da lista. Se você tem uma relação Projeto, a barra lateral mostra os projetos com mais notas ligadas a eles, que quase sempre são os que você quer clicar.

Os membros foram fáceis em comparação: a seção lista todas as pessoas do espaço de trabalho, exatamente como o seletor de pessoas do popover, porque essa lista é pequena e limitada.

Um filtro, não dois

A parte com que eu tive mais cuidado fica invisível quando funciona: a barra lateral e o popover Filtrar são o mesmo filtro.

O Notez guarda os filtros da lista na URL. Isso já era assim — é por isso que você pode salvar nos favoritos do navegador "tudo com a tag cliente-x e status bloqueado" — e as seções da barra lateral simplesmente gravam no mesmo lugar de onde o popover lê. Clique em Bloqueado na barra lateral e o popover mostra Bloqueado marcado. Desmarque no popover e a linha da barra lateral se apaga. Limpar limpa os dois. Não existe um segundo estado que possa dessincronizar, nem um "filtro da barra lateral" como conceito separado de "filtro".

Essa decisão também corrigiu um bug latente. Uma URL editada à mão ou desatualizada podia trazer dois tokens de filtro para a mesma propriedade, e o servidor os combinava com AND — então uma nota precisava corresponder às duas listas, o que, numa seleção simples, significava não corresponder a nada, enquanto a barra lateral mostrava tranquilamente uma linha como ativa. Agora o handler de clique da barra lateral descarta todos os tokens da sua propriedade e grava exatamente um. O popover já fazia isso; os dois só precisavam concordar.

Mais dois casos-limite, já que o servidor limita a lista a dez filtros de propriedade: a barra lateral recusa o décimo primeiro com o mesmo aviso que o popover usa, e um clique calcula a próxima URL a partir dos parâmetros atuais do router, e não dos parâmetros com que o componente foi renderizado. Assim, dois cliques rápidos, ou um clique na barra lateral disputando com uma mudança no popover, não conseguem anular um ao outro em silêncio.

O que a revisão do plano cortou

Este recurso foi planejado num documento antes de qualquer código, e o plano passou por quatro revisões com focos diferentes — correção, regras da casa, completude e "o que aqui é engenharia demais". A última foi a mais útil, e vale contar o que ela removeu.

Seções recolhíveis. O primeiro plano punha uma setinha em cada seção e guardava o estado recolhido por espaço de trabalho, com o argumento de que várias seções empurrariam a parte de baixo da barra lateral para fora da tela. Um revisor apontou que o corpo da barra lateral já rolava independentemente do bloco de baixo, então a justificativa era simplesmente falsa. Cortado. (O bloco fixo no topo, que foi lançado, veio depois, de outra reclamação, essa real.)

Um endpoint dedicado no servidor. O plano propunha uma consulta nova que devolvesse as seções da barra lateral prontas — nomes, opções, ordem, contagens. Um revisor notou que tudo, menos as contagens, já estava na lista de propriedades que o app busca para o popover Filtrar e para o diálogo de propriedades, e que uma segunda cópia de nomes e opções significaria um segundo cache que podia ficar desatualizado. O que foi lançado é uma consulta pequena, só de contagens, indexada por id de opção, id de pessoa ou id de nota, e a barra lateral deriva o resto dos dados que já tinha.

Um link "Configurar a barra lateral". Eu criei um link que aparecia ao passar o mouse, abaixo das seções, e abria o diálogo de propriedades. Ele chegou à versão de desenvolvimento, foi olhado uma vez e removido na mesma tarde. O diálogo está a um clique, em Mais, e um controle que só aparece ao passar o mouse, no fim de uma região com rolagem, é um controle que ninguém encontra. O menu de cada seção, que ficou, resolve o que as pessoas realmente querem — tirar esta daqui — onde elas já estão olhando.

Metadados ou coluna. A flag "mostrar na barra lateral" fica nos metadados JSON que a propriedade já tinha, e não numa coluna nova do banco de dados. Vale uma frase, porque é o tipo de escolha que gera discussão. A flag nunca é usada como filtro em SQL: o cliente decide o que renderizar a partir da lista de propriedades que já tem. Então uma coluna tipada não traria nada além de uma migração. Se isso mudar um dia, a flag muda de lugar, e nada mais.

Também nesta versão

Algumas coisas chegaram junto com o trabalho na barra lateral.

  • Favoritos. As notas fixadas agora se chamam Favoritos em todo lugar, com uma estrela no cabeçalho da nota e uma estrela âmbar preenchida como indicador. A seção da barra lateral se esconde enquanto está vazia, e marcar uma nota com estrela não mostra mais um aviso — a estrela e a seção já mostram o resultado. Os atalhos de uma letra P e D nos cartões saíram; as duas ações ficam no menu do cartão.

  • Início. O link do topo da barra lateral agora é Início, e não Todas as notas. O título da página continua dizendo Todas as notas.

  • Anterior e próxima no quadro. Com um cartão aberto no painel lateral, J e K agora percorrem a coluna desse cartão. Antes, anterior e próxima ficavam totalmente escondidos no quadro.

  • Um bloco inferior mais arrumado. Importar, Propriedades personalizadas, Integrações e Atalhos ficam sob um botão Mais que se abre para cima, então o botão não sai do lugar; Configurações abre direto na aba Espaço de trabalho, e a entrada separada Espaço de trabalho deixou de existir.

  • Azul. A cor principal passou de violeta para azul no app, na landing page e nos ícones.

E duas correções: o cabeçalho do painel lateral mostrava o título da própria nota disfarçado de trilha de navegação e agora mostra só o caminho das notas-mãe; e a borda da barra lateral recolhida, que é por onde você a arrasta para abrir de novo, tinha parado de responder a cliques.

Para que serve

O objetivo das propriedades nunca foram as propriedades. Era poder perguntar "o que está bloqueado?" ou "o que é meu?" e ter a resposta sem pensar na ferramenta. Para as tags, isso sempre foi um clique. Agora é um clique para o resto também — e, como a barra lateral e o popover são a mesma coisa por baixo, onde clicar é a única decisão que sobra.

Ative uma propriedade em Mais → Propriedades personalizadas e veja se você para de abrir o popover. Eu parei.

Ajuda: Propriedades personalizadas · Organizar notas · Usar quadros · Changelog da v0.8.0

Continue lendo