<SettingsLayout page='settings/general' label="General"> <h1>General Settings</h1> <h2>UI Settings</h2> <form class="ui-settings" aria-label="UI settings"> <div class="setting-group"> <input type="checkbox" id="choice-autoplay-gif" bind:checked="$autoplayGifs" on:change="store.save()"> <label for="choice-autoplay-gif">Autoplay GIFs</label> </div> <div class="setting-group"> <input type="checkbox" id="choice-mark-media-sensitive" bind:checked="$markMediaAsSensitive" on:change="store.save()"> <label for="choice-mark-media-sensitive">Always mark media as sensitive</label> </div> <div class="setting-group"> <input type="checkbox" id="choice-reduce-motion" bind:checked="$reduceMotion" on:change="store.save()"> <label for="choice-reduce-motion">Reduce motion in UI animations</label> </div> </form> </SettingsLayout> <style> .ui-settings { background: var(--form-bg); border: 1px solid var(--main-border); border-radius: 4px; padding: 20px; line-height: 2em; } .setting-group { padding: 5px 0; } </style> <script> import SettingsLayout from '../../_components/settings/SettingsLayout.html' import { store } from '../../_store/store' export default { components: { SettingsLayout }, store: () => store }; </script>