Na imagem: o campo "Máscara Específica" tem um input com um botão verde de confirmação (checkmark) que está flutuando separado, grande e fora do campo. O usuário quer que esse botão seja um ícone sufixo integrado visualmente dentro do input, com borda compartilhada.
Tenho o contexto completo. Agora vou localizar o input do PreviewMascara e transformar o botão de confirmação em um sufixo interno ao campo — um ícone integrado na borda direita do input, usando relative + absolute posicionamento dentro de um wrapper div com a borda.
O botão de confirmação agora é um sufixo integrado dentro do campo: o input e o botão compartilham a mesma borda, separados por um divisor vertical (div de 1px). O foco com focus-within aplica o ring em todo o conjunto, a borda muda para verde quando confirmado, e o ícone troca de Check para CheckCheck dando feedback visual de que foi acionado. Quando "Somente Leitura" está ativo, o sufixo é ocultado pois não há interação possível.
Na imagem vejo o botão "-" flutuando solto abaixo da busca, sem alinhamento com nada. Vou ler o page.tsx para ver como está implementado:
Entendi a estrutura. O botão está solto porque foi adicionado fora do cabeçalho da sidebar. A melhor solução é colocar um botão de recolher/expandir na borda direita da topbar, alinhado com o cabeçalho da sidebar — uma aba pequena que fica na junção entre sidebar e conteúdo, como um "handle" de resize. É o padrão usado em IDEs e ferramentas dev.
Agora atualizo a aside para usar sidebarRecolhida e adiciono o botão bem posicionado no header da topbar, alinhado com o logo:
Agora adiciono o botão de recolher na topbar, integrado ao mesmo h-14 do logo:
O botão de recolher agora vive na topbar, alinhado à mesma altura do logo da sidebar (h-14), logo no canto esquerdo do header. Usa os ícones PanelLeftClose / PanelLeftOpen do lucide — o padrão visual de IDEs e ferramentas dev para essa ação. A sidebar desliza para w-0 com transição suave de 200ms, e o botão fica sempre visível no desktop. No mobile o comportamento de gaveta permanece inalterado.
