Improve sticker selector UI

[Simon-Laux]

At the moment it looks like this:

I have 2 easy improvement ideas:

• make the "Open Sticker Folder" - Button nicer and move it to the bottom?
• If there are no stickers then show an "empty-screen" that says "no stickers yet" and tells the user they can add stickers with the "Open Sticker Folder" button. ("Non-ideal UI states" is also a term you can search for for inspiration, maybe similar to https://blueprintjs.com/docs/#core/components/non-ideal-state, but don't use blueprint, because we want to get rid of that dependency)

Maybe you (whoever reads this and ideally wants to make a pr) have other easy style improvement ideas, too.

[achou11]

@Simon-Laux i'd be interested in giving this a try! think your initial ideas are a good first thing to do for this so that would be the scope of the work i'd attempt.

thinking that it'll look something like this (for the non-empty state):

---

on a related note, i also have some early ideas of a more comprehensive update to this specific feature. here's a rough visual:

getting to this stage is probably outside the scope of this issue and I'm happy to create a separate one to further discuss, but it might serve as a good reference to inform the work done in this issue specifically.

the primary goal is to make this more visually similar to the emoji picker panel, specifically by adding:

• fixed position search input and filters (if useful) at the top
• fixed position actionable buttons at the bottom

a couple of questions about this:

• is search useful for stickers in this case? are there any potential filters that would be relevant for stickers?
• is a button that specifically imports stickers as opposed to just opening your app's sticker directory useful? I found myself wanting to open a file dialog that allows me to select a directory in my downloads to import, but currently that flow isn't supported.

[Simon-Laux]

Cool, yeah please take the issue it If you want ;)

getting to this stage is probably outside the scope of this issue and I'm happy to create a separate one to further discuss, but it might serve as a good reference to inform the work done in this issue specifically.

The thing with the stickers is that we once thought about a grand system of stickers handled by core and even sending mostly only the id (with low res image) around and remembering who we send the sticker file to already, to save data (similar how avatars are not always sent with every message). But that did not happen yet (idea was like 1 or 2 years ago)

On mobile our sticker support is mainly that we support the sticker keyboards. And of course we have the sticker message viewtype which basically means:

• no message bubble
• no clicking to enlarge it

So there is no unified system in core yet. The sticker / api selection we have in desktop is implemented in the jsonrpc layer of core and currently the data does not live inside of the deltachat core account database (is not part of backups). It is just a stickers folder that happens to be in the account's folder and all folders in it are basically sticker packs (name of the folder is name of the pack).

What I want to say with this is that everything that is beyond just making it prettier (this issue) is something that we want probably in mobile too at some point, so it would make most sense to discuss it as a feature proposal in the forum: https://support.delta.chat/

is search useful for stickers in this case? are there any potential filters that would be relevant for stickers?

unless we have some image detection ai no, jokes aside, we would need stickers with metadata for that, like telegram has the reference to what emojis they represent. I think filename alone is pointless, as it is not static (like dc core adds junk to the name to make it have an unique name if the name is already taken by another file (we plan to store blobs deduplicated into a db so this will improve in long term future)

is a button that specifically imports stickers as opposed to just opening your app's sticker directory useful? I found myself wanting to open a file dialog that allows me to select a directory in my downloads to import, but currently that flow isn't supported.

is there some common format you want to support? like a zip file as sticker pack or sth similar?

PS: another cool thing could be a tab with "recently seen stickers" that were send by others (basically global gallery for sticker message type), but I don't know how to make it not stand out. I mean some people could send inappropriate or cringe sticker that you might be shocked to see in your own sticker selector 🤷

[achou11]

thanks for all of this info @Simon-Laux ! this is very helpful context and makes it a lot easier to just focus on UI stuff for this then.

is there some common format you want to support? like a zip file as sticker pack or sth similar?

yeah I guess a zip would be reasonable. my initial thought was technically a file path to a directory containing the sticker images but picking a specific file would work too