I shipped some nice quality of life improvements around webmentions with Tanzawa. There were a few issues with the design that didn't become apparent until I'd used it for a while, especially with older posts.

Pending webmentions was toggled closed if you had 4 or more webmentions pending moderation. My theory was that drafts and recent posts take priority over moderating, and a long list of webmentions would get in your way.

As each webmention was triggering a full-page reload, any time you a large queue of webmentions (in my case, anytime I check in somewhere), approving them all was slow and required too many clicks (click to open the webmention list, move the mouse, click to approve, wait for a full reload, move the mouse to open the list, repeat). Moreover a N+1 query snuck into the dashboard, so as webmentions increased the page load got slower, making the entire dance more frustrating.

Next I noticed that it was difficult to know which page the webmention was referencing. This usually isn't an issue as they are usually referencing the latest post. But sometimes I'd get one referencing older posts and it was a struggle to find it. Initial designs of webmentions had a permalink link but I removed it to keep things cleaner.

How'd I fix things?

First, I've added a link to the post back to the moderation view, but without an emoji and in my "help-text" font to reduce visual noise.

Updated Webmention Design


Second, I fixed the N+1 query on the dashboard (and post detail). The dashboard is now 7 queries regardless (including session checking etc.). I might be able to make it 6, but it's good enough for now.

Third, the webmention moderation queue is opened by default, regardless of the number of webmentions pending moderation.

Lastly, webmentions moderation no longer triggers a full page-reload. Rather it just reloads the list of pending webmentions. And since it's always open, you don't even need to move your mouse to approve the next item in the queue, just click click click. I posted a video on twitter so you can see it in action.