Use `element.keyed` when rendering grid cells.

Lustre has an optimisation for rendering unstable lists that means large parts of the DOM don't need to be reconstructed if things move around. That isn't the case right now but I think there's a reasonable future where you can add/remove rows and columns?

Cells seem to already have unique ids so this change would be trivial to implement and get some future-proofing out of it!

https://github.com/bcpeinhardt/squared_away/blob/40eb013ec52e5994d194afd04f0bf578fefb29ea/src/squared_away.gleam#L352

You would return:

case model.display_coords {
  False -> #(key, html.td([], [input]))
  True -> #(
    key,
    html.td([], [
      html.label([], t(grid.to_string(key) <> ": ")),
      input,
    ])
  )
}

...and then...

let grid = 
  html.table([attribute.class("tg")], [
    element.keyed(html.tbody([], _), rows)
  ])

bcpeinhardt / squared_away

Use `element.keyed` when rendering grid cells. #3