Note

This kata will be discussed at the MerseyRails meetup on 5th August 2025.

Hotwire a List-Detail Layout

Tip

To get the most from this exercise please try the kata yourself before reviewing any other implementations.

This repository contains a minimal example of a list-detail layout, similar to those commonly found in email clients. The application is functional but currently has some user experience issues—most notably:

• When you scroll through the list and select an email, the detail view loads correctly, but your scroll position in the list is lost.

Your Challenge

The goal of this kata is to improve the user experience using Hotwire techniques. Specifically, you should:

• Preserve scroll position in the list when selecting an email

Whilst preserving the current functionality:

• Update the URL to reflect the selected email
• Support direct navigation (i.e. loading the page for a specific email URL)
• Highlight the selected email in the list (both when clicking an item and when navigating directly to a URL)

You should also consider:

• Avoid unnecessary data reloads when switching between emails
• Responsive design - the layout should adapt gracefully to smaller screens, supporting a good experience in a Progressive Web App (PWA) or Hotwire Native context

This kata is a great opportunity to explore how Hotwire can be used to create fluid, SPA-like experiences in a traditional Rails application without relying heavily on JavaScript.

Getting Started

To get up and running with this kata:

1. Fork the repository
   Use the Fork button on GitHub to create your own copy of this repository

2. Clone your fork locally

3. Run the setup script

bin/setup

4. Start the Rails server

bin/dev