I was thinking, we might want to put in at tildes special and detect the "x is y in tildes" message and add the tildes names to the list temporarily?

@creesch I'm ready for a review - although I'm not content with the visuals. I'm looking for some feedback there.

I was thinking, we might want to put in at tildes special and detect the "x is y in tildes" message and add the tildes names to the list temporarily?

I'm kinda resistant to that. It would feel hacky. What if someone doesn't like that? We offer the option to disable ping on username. With that change we'd need another flag to give a consistent level of control "Disable Tildes message parsing" or something similar.

I'm kinda resistant to that. It would feel hacky. What if someone doesn't like that? We offer the option to disable ping on username. With that change we'd need another flag to give a consistent level of control "Disable Tildes message parsing" or something similar.

You are right. People can also add their tildes name to the list anyway.

@creesch I'm ready for a review - although I'm not content with the visuals. I'm looking for some feedback there.

Overall looks good, replied to a few comments.

Visuals

As far as the visuals go.

Message indicator

I think that for the ping indicator in chat the magenta doesn't really work. It stands out, but also doesn't fit. What if we use the same green as used for buttons? Possibly also use that on the background of the message with a high opacity.

Personally I like it. It is noticeable enough without being overly shouty.

Favicon

The favicon one is very subtle. To be honest I wasn't entirely happy with the message counter either. I did a bit of experimenting, and I think I realized what the issue is. The chat icon with the chat lines isn't a good basis to draw on and in addition to that can be used as part of the indicator as well.

Continuing with the green theme for pings:

Regular counter:

Adjusted favicon function

function updateFavicon(count, hasPing) {
    const sizes = [16, 32];

    sizes.forEach(size => {
        /** @type {HTMLLinkElement | null} */
        const link = document.querySelector(`link[rel="icon"][sizes="${size}x${size}"]`);
        if (!link) {
            return;
        }

        const canvas = document.createElement('canvas');
        canvas.width = size;
        canvas.height = size;
        const ctx = canvas.getContext('2d');
        if (!ctx) {
            return;
        }

        const img = new Image();

        // Pings should not happen without a count
        if (hasPing && count > 0) {
            img.src = `img/icon_${size}_ping.png`;
        } else if (count > 0) {
            img.src = `img/icon_${size}_blank.png`;
        } else {
            // Default image, will restore the favicon.
            img.src = `img/icon_${size}.png`;
        }
        
        img.onload = () => {
            ctx.drawImage(img, 0, 0, size, size);

            if (count > 0) {
                const x = size / 2;
                const y = (size / 2) - (size * 0.05); // The middle of the chat icon is not exactly in the center.

                ctx.font = `bold ${size * 0.5}px "Arial Black"`;
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.fillStyle = '#000000';
                ctx.fillText(count > 99 ? '99+' : `${count}`, x, y);
            }

            link.href = canvas.toDataURL();
        };
    });
}

And the blank icon variants created for this:

Tangent

Bit of a tangent, I picked a green close enough to minecraft (creeper) green but never checked if it is the same green. Not terribly important but just remembered. :P

Here's my implementation:

If you have files tested and prepared locally I'd be fine with you just committing them to my PR. But perhaps that's not possible because this branch is hosted on my fork? Do you want to give me some amount of write access to this repo and then I will open PRs from branches on creesch/minecraft-web-chat? Then you'd be able to commit to my branches.

If you have files tested and prepared locally I'd be fine with you just committing them to my PR. But perhaps that's not possible because this branch is hosted on my fork? Do you want to give me some amount of write access to this repo and then I will open PRs from branches on creesch/minecraft-web-chat? Then you'd be able to commit to my branches.

I invited you as collaborator. I'll still ask before committing things to branches you will be working on (because I don't always like unprompted changes either) but it should make things easier indeed.

A few things before merging the PR.

• I realize that for testing it was easier but we probably don't want to ping for own messages? Maybe we can add a section with dev/debug toggles in the settings for this.
• Do you want to do the ping column in the message repository in this PR or a future one? (Doesn't need a version schema change as far as I am concerned as we didn't do a release in between).

I realize that for testing it was easier but we probably don't want to ping for own messages? Maybe we can add a section with dev/debug toggles in the settings for this.

I can do that. Should system messages ping?

Do you want to do the ping column in the message repository in this PR or a future one? (Doesn't need a version schema change as far as I am concerned as we didn't do a release in between).

I can do it here easily enough. Without a migration you'll need to manually delete your local database.

need to manually delete update your local database.

I can do that ;)

PR looks good!