pinafore/routes/settings/general.html

<:Head>
  <title>General Settings</title>
</:Head>

<Layout page='settings'>
  <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>
    </form>

  </SettingsLayout>
</Layout>

<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 Layout from '../_components/Layout.html';
  import SettingsLayout from './_components/SettingsLayout.html'
  import { store } from '../_store/store'

  export default {
    components: {
      Layout,
      SettingsLayout
    },
    store: () => store
  };
</script>