thoughts 0.0.4
==============

This is such an improvement to the backend of my website it warrants a blog post of celebration. For far too long I've been dealing with a tiny ass edit form...

Date: December 18, 2024

This is such an improvement to the backend of my website it warrants a blog
post of celebration. For far too long I've been dealing with a tiny ass edit
form on thoughts. I tend to not edit them, and try to get them right in one
go. This is kinda the point of a thought, its a quick post meant to be the
size of a tweet, but sometimes I'm leaving thoughts on a video or long post and
want to make sure I have a good save point, but I just keep the thing in draft
and hope I don't loose if for far too long.

## Results

Let's see this change in action!!

### before

This is the tiny ass form nested deeply in the flow of the feed. When I made
it I naively just swapped out the post itself with the edit form, and swapped
the post back in after edit.

![screenshot-2024-12-19T00-58-43-976Z.png](https://dropper.waylonwalker.com/api/file/fe60b579-18d3-450e-87e2-2f5664f32210.webp)

> thoughts is built with HTMX btw so all html is rendered in the backend and swapped by htmx client side.

### after

Now the edit is a full page modal with a nice blurry backdrop effect to the
rest of the content. This feels pretty similar to making a `new post` on
twitter.

![screenshot-2024-12-19T00-59-21-503Z.png](https://dropper.waylonwalker.com/api/file/c560e113-66c1-4532-9eb7-c75eb6d3aaf3.webp)

### How

How did I do this with htmx? I had to break out of the mindset my brain was in
with swapping in place and letting the edit form take over the entire screen.

First the empty `#modal-container` was added to the top of every page.

``` html

```

Then each post that gets added to the page already had an edit button, but now
the target is set to `#modal-container`, and the swap is set to `innerHTML` so
that we keep the `#modal-container` in place.

``` html

 {% include 'edit.svg' %}

```

Now the edit post that is returned from the server is turned into a full height
and width modal with a nice backgrop blur over the content.

``` html

... similar to the original edit form in here

```

## Clearing the modal

One notable change to the original edit form is clearing the modal container
on submit. It is done with an `hx-on::after-request` event and one line of js.

``` html

 ```

Similarly on the Cancel button.

``` html

 Cancel

```

## Hotkeys

Now I struggled to get this right with htmx, and it seemed like things were
getting more complicated by trying to get the buttons to trigger using htmx
triggered keyboard events, I ended up just using javascript. Its still in the
same file, so locality of behavior is barely an issue on this one anyways, and
the js was just working.

``` html

document.addEventListener('keydown', function(e) {
 if (e.key === 'Escape') {
 document.getElementById('modal-container').innerHTML = '';
 }
 if (e.key === 'Enter' && e.ctrlKey) {
 e.preventDefault();
 htmx.trigger('#websiteForm', 'submit');
 }
});

```

## Other small change

When the server is returns an empty list of posts the post container would
change size and cause a layout shift. Now the empty posts element, while not
great does not cause layout shift.

``` html

- No posts

```