fix: Add zen mode to preferences, remove shortcut

[manuq]

Fixes #1883

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[netlify]

✅ Deploy Preview for elk-docs canceled.

Name	Link
🔨 Latest commit	ae6057e
🔍 Latest deploy log	https://app.netlify.com/sites/elk-docs/deploys/6444d04d88dc1b0008ac459d

[netlify]

✅ Deploy Preview for elk-zone ready!

Name	Link
🔨 Latest commit	ae6057e
🔍 Latest deploy log	https://app.netlify.com/sites/elk-zone/deploys/6444d04df6e9f90008035764
😎 Deploy Preview	https://deploy-preview-2003--elk-zone.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[patak-dev]

Thanks @manuq! It works nicely!

There is only one issue I found while testing. Before you press the Zen Mode button or setting for the first time (so its value is still undefined in the settings), if you reload the page you'll notice the sidebars start in zen mode true, and they fade in. If you go into Zen Mode, then toggle back (so the setting is now zenMode: false), this doesn't happen.

[manuq]

Good catch @patak-dev ! It turns out that all preferences started as undefined, and then the storage was in charge of setting them. Thus the fade-in effect that happened right away. I have appended a commit to fix it.

[patak-dev]

The flash was reduced but it is still there. You can compare reloading against elk.zone to see it.

[userquin]

@manuq starting dev server from scratch using your branch using zen mode by default (ni && nr dev)

EDIT: using the preview in Windows FF and Chrome working...

[userquin]

The flash was reduced but it is still there. You can compare reloading against elk.zone to see it.

On my local there is no flash (also using PR preview), maybe missing transition? I see a fade-out transition when activating zen mode while deactivating, it is almost instant.

[patak-dev]

Ok, I can't reproduce locally. Let's try it out, and we fix it if not later one