Add new cursor preview in the style pane settings

[KyranTanDev]

Summary

• The Style pane in Settings now includes a live preview panel, so users can see the cursor click effect in real time as they adjust to fine-tune their settings.
• Added a Randomize button that generates a random combination of settings, along with a lock dropdown to keep any chosen settings fixed.

Demo

demo.mov

Test Plan

• Built locally with ./build-app.sh

• Manually tested the changed behavior

Checklist

• I updated documentation if user-visible behavior changed
• I included a screenshot or recording for visible UI changes, if relevant
• I did not include credentials, private keys, generated app bundles, or local system files

[aurorascharff]

Hi! I added that "preview pad" yesterday for the same purpose, and would argue that's already enough. What do you think? I dont want the settings page to get too big. But we can keep the randomize, maybe place it in the sidebar next to the pad?

[jamesmontemagno]

Agreed here, this make the settings very very large... i mean... we could just make it so they can click anywhere on the settings window to see it. I think that makes the most sense IMHO

[aurorascharff]

I removed that feature @jamesmontemagno because it made the experience laggy as you were toggling settings + triggering clicklight. Preview pane should be enough

[aurorascharff]

I'm adding the randomizer here! https://github.com/aurorascharff/ClickLight/pull/45/changes

[KyranTanDev]

Hi! I added that "preview pad" yesterday for the same purpose, and would argue that's already enough. What do you think? I dont want the settings page to get too big. But we can keep the randomize, maybe place it in the sidebar next to the pad?

Hello! Thanks for taking a look at my PR. Totally agree with your point, and keeping the settings lean is a good idea.

Love the compact implementation of the randomize button in #45! I'll go ahead and close this PR then. Thanks again!