I can do this confidently now that I've figured out how to test
them live on the phone! (Colours there render pretty differently
from the ones on my laptop screen, so I've got to view it directly
to make it work.)
Partially addresses the concerns in #2! Own messages are now on
the opposite side in their own colour, and system messages (such
as "* is online", detected by having no "from" attribute) are
displayed without any bubble at all.
Along the way, we also fixed bug #14 where own messages would
show the other person's name underneath. That was because we were
looking at the nickname attribute, which, as it turns out, gives
the nickname for the entire conversation or something, not for the
chat itself. I think it wasn't a problem in groupchats, but anyway,
that's something to tackle another day...
Not that we'll need to change the height, but we need to refer to
it in some places and variables makes it more clear what exactly
we're referring to (as opposed to bare numbers).
Explanation for what exactly happened: I added a margin to the
header, made the app fullscreen, and activated a magic setting in
the manifest to render the system statusbar on *top of* the app.
Thanks to the following blog post for teaching me how:
https://kaios.dev/2023/03/complete-manifest.webapp-guide/
The original kaios-native-ui was using a fancy mask-image property,
which was unfortunately a bit *too* fancy for KaiOS to handle.
Instead, we've fallen back to good ol' conditions and a number of
new SVGs for the selected version of the checkbox. The drawback is,
of course, that selected checkboxes will perforce be white (which
can be easily overridden to black if so desired, but not so easily
to any other colour: Inkscape is your friend though).
This gives us something prettier than a blank page while the app
is loading (although, of course, it could also prove a bit more
cryptic to debug if something goes wrong).
Closes#5