Você já repetiu este ciclo cem vezes sem perceber.
Você está olhando uma lista filtrada de notas — tudo com a tag research, ordenado pela última edição. Clica na terceira. Não é a que você queria. Clica em voltar. A lista recarrega no topo, e a sua posição de rolagem, que estava quatro telas abaixo, se perdeu. Você encontra o seu lugar de novo. Clica na quarta.
Vinte notas revisadas são quarenta navegações e dezenove vezes procurando onde você estava. O custo não é o carregamento da página. É que a lista é a coisa com que você estava trabalhando de fato, e cada nota que você abre a destrói.
Agora, em vez disso, as notas abrem em um painel lateral sobre a lista.
O que mudou
Clique em uma nota na grade, na tabela ou no quadro, e ela abre em um painel à direita. A lista fica exatamente onde estava — mesma posição de rolagem, mesmos filtros, mesmas colunas do quadro, mesma seleção múltipla. J e K passam para a próxima nota e para a anterior, na ordem que você estiver vendo no momento. Esc fecha.
O painel não é uma prévia. É o mesmo editor, com o mesmo salvamento automático, as mesmas tags e propriedades, as mesmas notas filhas, notas vinculadas e Notas semelhantes. Tudo o que você faz com uma nota na página dela, faz ali também.
A página inteira continua lá: Abrir em página inteira na barra de ferramentas do painel, ou um clique com o botão do meio no cartão.
Três decisões que fizeram isso funcionar
O painel não é um modal
A implementação óbvia é uma janela modal: overlay, foco preso dentro dela, rolagem bloqueada. De propósito, não fiz nada disso.
Um overlay tiraria todo o sentido do painel. A razão de manter a lista na tela é você poder usá-la — rolar, arrastar um cartão para outra coluna, selecionar um lote com o retângulo de seleção enquanto uma nota está aberta. Uma camada escurecida que engole os cliques entrega uma foto da sua lista, e não a sua lista.
Por isso o painel não é modal: sem overlay, sem prender o foco, sem bloquear a rolagem, e clicar fora dele não o fecha. Fechar é sempre uma escolha sua — o ✕, Esc, o botão voltar do navegador ou um clique na divisória da borda esquerda do painel.
Esse último merece destaque. A divisória já existia para arrastar e alargar o painel. Um mousedown nela sem nenhum movimento não fazia nada, então agora um clique nela recolhe o painel. O mesmo gesto funciona na barra lateral e no painel do chat de IA, e de quebra a barra lateral ganhou o atalho ⌘\ para abrir e fechar.
A nota aberta fica na URL
O painel é controlado por um parâmetro de consulta — /notes?peek=<id> — e não pelo estado de um componente.
É o tipo de decisão que parece trabalho extra e se paga na hora. O botão voltar do navegador fecha o painel, porque fechá-lo é uma navegação. Recarregar a página o restaura. O link pode ser compartilhado ou salvo nos favoritos. Ordenar, filtrar ou digitar na busca com uma nota aberta a mantém aberta, porque tudo isso são apenas outros parâmetros na mesma URL.
Os cartões continuam sendo links
Todo cartão de nota e toda linha de tabela continuam sendo um <a href="/notes/..."> de verdade. Só o clique simples com o botão esquerdo é interceptado.
Essa única decisão é o motivo de o clique do meio, o botão direito → abrir em nova aba e o "copiar endereço do link" continuarem funcionando sem uma linha de código. Uma <div> com onClick teria quebrado tudo isso em silêncio, e ninguém teria aberto um bug — as pessoas simplesmente teriam parado de tentar.
Dois bugs que vale a pena contar
A proteção de salvamento que disparava a cada tecla
As notas são salvas automaticamente, e há uma proteção que intercepta a navegação enquanto um salvamento está pendente, para que você não saia de uma nota no meio da gravação.
Com o painel, essa proteção de repente passou a ter um raio de alcance muito maior. A busca do cabeçalho navega a cada tecla — cada caractere é uma nova URL. Então, digitar na busca com uma nota não salva aberta no painel fazia a proteção disparar a cada caractere, piscando uma janela modal "Salvando nota…" sobre a lista e forçando um salvamento a cada letra.
A correção: agora a proteção só bloqueia navegações que deixam de mostrar esta nota — fechá-la, trocar por outra, sair da rota. Reordenar a lista por baixo não é sair da nota, então nada dispara.
A seta de uma dica engoliu a alça de arrasto
A divisória de redimensionamento do painel tem quatro pixels de largura. Passe o mouse sobre ela e aparece uma dica explicando que dá para arrastar para redimensionar ou clicar para fechar.
Só que a dica desenha uma seta — um pequeno SVG girado — e as dicas do Notez ficam, por padrão, coladas no elemento que as aciona. Então a seta caiu exatamente em cima da divisória de quatro pixels. Você passava o mouse na divisória e pressionava: o mousedown acertava a seta, não a alça. O painel nem redimensionava nem fechava.
O que torna esse bug instrutivo é como eu o encontrei. Quem o pegou foi um teste end-to-end, e o teste só pegou porque controla um mouse real. A minha verificação manual anterior tinha disparado eventos sintéticos direto no elemento, o que pula o hit-testing por completo e informa, todo contente, que tudo funciona. Qual elemento está sob o cursor é uma pergunta que só um ponteiro real faz.
document.elementFromPoint() na divisória retornou um <svg>, e isso explicava tudo.
Onde isso não vale
No celular, a nota continua abrindo como página inteira. Uma gaveta em tela cheia é só uma página com um botão voltar pior.
No quadro, próxima e anterior ficam dentro de uma coluna. Um quadro não tem uma ordem única entre colunas, então
JeKpercorrem a coluna do cartão que você abriu.Links dentro de uma nota — os chips de
[[, o grafo de conexões, as propriedades de relação — continuam abrindo a página inteira. Seguir um link é ir para outro lugar, não para o próximo item de uma lista. O painel serve para percorrer uma lista, não para sair dela.
Essa última distinção é a regra em que o recurso inteiro se apoia: cartões de nota e linhas de tabela abrem no painel; qualquer outro caminho até uma nota abre a página. Uma frase, e você consegue prever o que qualquer clique vai fazer.
Todos os detalhes em Organizando notas e nos atalhos de teclado.
Continue lendo
Adicione uma captura de tela a uma anotação sem abri-la — um arquivo colado enquanto você renomeia uma nota na lista vai para o fim dessa nota.
Toda propriedade a um clique — uma propriedade de seleção, de membro, de relação ou a coluna do quadro vira um filtro de um clique na barra lateral.
Além das pastas: como o Notez organiza suas anotações — por que o Notez não tem pastas e o que tags, subnotas, quadros e propriedades personalizadas fazem no lugar delas.