sticker picker previews not displayed if folder name has %

[adbenitez]

DC version: 1.51.0 (git: v1.33.0-1302-gfd2dfa1d)

if you pick one of them they are displayed properly in chat, it is only in the thumbnails where they are not displayed

[WofWca]

The relevant code:

deltachat-desktop/packages/frontend/src/components/composer/EmojiAndStickerPicker.tsx

Line 91 in f336a5a

<img src={filePath} />

deltachat-desktop/packages/frontend/src/components/composer/EmojiAndStickerPicker.tsx

Lines 177 to 185 in f336a5a

	const [stickers, setStickers] = useState<{
	[key: string]: string[]
	}>({})
	useEffect(() => {
	BackendRemote.rpc
	.miscGetStickers(accountId)
	.then(stickers => setStickers(stickers))
	}, [accountId])

On 1.52.0 (git: v1.33.0-1328-g9b66ba51c) if you use just % instead of %20, you get

"uncaughtError"	{"message":"URI malformed","stack":"URIError: URI malformed\n    at decodeURIComponent (<anonymous>)\n    at Function.<anonymous> (file:///C:/Users/user/AppData/Local/Programs/DeltaChat/resources/app.asar/bundle_out/index.js:31:11045)"}

We probably don't want to use just the filename as src. Perhaps use pathToFileURL() (https://stackoverflow.com/questions/20619488/how-to-convert-local-file-path-to-a-file-url-safely-in-node-js).

Other such places need to be considered as well. For example, we had a lot of problems with thumbnails: #4247.

[Simon-Laux]

Stickers are outside of blob folder. maybe decode uri component is enough for electron, but tauri needs a custom scheme and browser needs a custom url

[Simon-Laux]

Actually the problem seems to be that we decode the uri. The simplest solution would be that the sticker bot gets updated to not uri escape folder names. Then the zip file and folder names will also look better as a positive side effect.