Dicas #

Nesta seção, compartilho algumas dicas para aprimorar a aparência da aplicação dependendo da plataforma de acesso. Por exemplo, na tela de URLs, existem dois botões: um nativo e outro web. Para melhorar a usabilidade, o botão web pode ser ocultado quando a aplicação for acessada pelo app iOS ou Android.

Escondendo elementos web #

Para ocultar elementos web quando a aplicação Rails é acessada por um app nativo, é possível utilizar o helper Rails:

hotwire_native_app?

Com base nisso, é possível criar um helper em ApplicationHelper que adicione uma classe do Tailwind, como hidden, garantindo que o botão web seja exibido apenas em navegadores e ocultado em acessos via iOS.

Criando Helper #

module ApplicationHelper
  def hidden_when_native
    "hidden" if hotwire_native_app?
  end
end

Uso no markup:

<%= link_to "New url", new_url_path, class: "rounded-lg py-3 px-5 bg-blue-600 text-white block font-medium #{hidden_when_native}", 
  data: { controller: "button", bridge_title: "New Url" } %>

Agora, o botão web é ocultado quando a aplicação Rails é acessada via plataforma nativa, mas permanece visível na versão web.

Melhorando o botão "Voltar" na navegação em stack #

Quando uma nova tela é acessada, a navegação em stack exibe um símbolo < seguido do nome da tela anterior. Em casos onde o nome da tela é muito longo, o botão "Voltar" pode ficar desproporcional e visualmente estranho. Para resolver isso, é possível configurar o Hotwire Native para exibir apenas o símbolo <.

Hotwire.config.backButtonDisplayMode = .minimal

Que tal aproveitar para adicionar mais uma melhoria antes de executar novamente a aplicação iOS?

Adicionando o botão "Done" nos modais #

Nos modais, atualmente, é necessário realizar um gesto de slide down para fechá-los. O Hotwire Native oferece uma configuração para adicionar automaticamente um botão com o título "Done" em todos os modais. Assim, o modal pode ser fechado tanto pelo gesto de slide down quanto clicando no botão ** "Done"**.

Hotwire.config.showDoneButtonOnModals = true

Execute o aplicativo com Command + R para visualizar como as alterações aparecem nas telas. Verifique especialmente os modais, garantindo que o botão "Done" foi adicionado corretamente e que sua funcionalidade de fechamento está funcionando como esperado.

Navegando sem stack #

Se não for necessário exibir o botão "Voltar" em uma determinada tela, uma solução simples é adicionar o atributo data-turbo-action: replace no helper link_to. Essa configuração evita que a navegação seja empilhada na stack.

<%= link_to "URLs", urls_path, class: "text-white hover:text-purple-200", data: { turbo_action: "replace" } %>