pinafore/src/routes/_pages/settings/general.html

<SettingsLayout page='settings/general' label="{intl.general}">
  <h1>{intl.generalSettings}</h1>

  <h2>{intl.media}</h2>
  <form class="ui-settings">
    <label class="setting-group">
      <input type="checkbox" id="choice-never-mark-media-sensitive"
             bind:checked="$neverMarkMediaAsSensitive" on:change="onChange(event)">
      {intl.showSensitive}
    </label>
    <label class="setting-group">
      <input type="checkbox" id="choice-show-all-spoilers"
             bind:checked="$showAllSpoilers" on:change="onChange(event)">
      {intl.showAllSpoilers}
    </label>
    <label class="setting-group">
      <input type="checkbox" id="choice-use-blurhash"
              bind:checked="$ignoreBlurhash" on:change="onChange(event)">
      {intl.showPlain}
    </label>
    <label class="setting-group">
      <input type="checkbox" id="choice-mark-media-sensitive"
             bind:checked="$markMediaAsSensitive" on:change="onChange(event)">
      {intl.allSensitive}
    </label>
    <label class="setting-group">
      <input type="checkbox" id="choice-large-inline-media"
             bind:checked="$largeInlineMedia" on:change="onChange(event)">
      {intl.largeMedia}
    </label>
    <label class="setting-group">
      <input type="checkbox" id="choice-autoplay-gif"
             bind:checked="$autoplayGifs" on:change="onChange(event)">
      {intl.autoplayGifs}
    </label>
  </form>

  <h2>UI</h2>
  <form class="ui-settings">
    <label class="setting-group">
      <input type="checkbox" id="choice-disable-custom-scrollbars"
             bind:checked="$disableCustomScrollbars" on:change="onChange(event)">
      {intl.disableCustomScrollbars}
    </label>
    <label class="setting-group">
      <input type="checkbox" id="choice-disable-infinite-scroll"
             bind:checked="$disableInfiniteScroll" on:change="onChange(event)">
      {intl.disableInfiniteScrollPre}
        <Tooltip
          text="{intl.disableInfiniteScrollText}"
          tooltipText="{intl.disableInfiniteScrollDescription}"
        />
      {intl.disableInfiniteScrollPost}
    </label>
    <label class="setting-group">
      <input type="checkbox" id="choice-hide-cards"
             bind:checked="$hideCards" on:change="onChange(event)">
      {intl.hideCards}
    </label>
    <label class="setting-group">
      <input type="checkbox" id="choice-underline-links"
             bind:checked="$underlineLinks" on:change="onChange(event)">
      {intl.underlineLinks}
    </label>
    <label class="setting-group">
      <input type="checkbox" id="choice-center-nav"
             bind:checked="$centerNav" on:change="onChange(event)">
      {intl.centerNav}
    </label>
    <label class="setting-group">
      <input type="checkbox" id="choice-bottom-nav"
             bind:checked="$bottomNav" on:change="onChange(event)">
      {intl.bottomNav}
    </label>
  </form>

  <h2>{intl.accessibility}</h2>
  <form class="ui-settings">
    <label class="setting-group">
      <input type="checkbox" id="choice-reduce-motion"
             bind:checked="$reduceMotion" on:change="onChange(event)">
      {intl.reduceMotion}
    </label>
    <label class="setting-group">
      <input type="checkbox" id="choice-always-show-focus-ring"
             bind:checked="$alwaysShowFocusRing" on:change="onChange(event)">
      {intl.showRingPre}
      <Tooltip
        text="{intl.showRingText}"
        tooltipText="{intl.showRingDescription}"
      />
      {intl.showRingPost}
    </label>
    <label class="setting-group">
      <input type="checkbox" id="choice-disable-tap-on-status"
             bind:checked="$disableTapOnStatus" on:change="onChange(event)">
      {intl.disableTappable}
    </label>
    <label class="setting-group">
      <input type="checkbox" id="choice-omit-emoji-in-display-names"
             bind:checked="$omitEmojiInDisplayNames" on:change="onChange(event)">
      {intl.removeEmoji}
    </label>
    <label class="setting-group">
      <input type="checkbox" id="choice-disable-long-aria-labels"
             bind:checked="$disableLongAriaLabels" on:change="onChange(event)">
      {intl.shortAria}
    </label>
  </form>

  {#if $isUserLoggedIn }
    <h2>{themeTitle}</h2>
    <ThemeSettings instanceName={$currentInstance} />
  {/if}
</SettingsLayout>
<UISettingsStyles />
<script>
  import SettingsLayout from '../../_components/settings/SettingsLayout.html'
  import ThemeSettings from '../../_components/settings/instance/ThemeSettings.html'
  import { store } from '../../_store/store.js'
  import Tooltip from '../../_components/Tooltip.html'
  import UISettingsStyles from '../../_components/settings/UISettingsStyles.html'
  import { formatIntl } from '../../_utils/formatIntl.js'

  export default {
    components: {
      SettingsLayout,
      ThemeSettings,
      Tooltip,
      UISettingsStyles
    },
    methods: {
      onChange (event) {
        // these two are mutually exclusive
        const { markMediaAsSensitive, neverMarkMediaAsSensitive } = this.store.get()
        if (markMediaAsSensitive && neverMarkMediaAsSensitive) {
          if (event.target.id === 'choice-mark-media-sensitive') {
            this.store.set({ neverMarkMediaAsSensitive: false })
          } else {
            this.store.set({ markMediaAsSensitive: false })
          }
        }

        this.store.save()
      }
    },
    store: () => store,
    computed: {
      themeTitle: ({ $loggedInInstancesInOrder, $currentInstance }) => (
        $loggedInInstancesInOrder.length > 1
          ? formatIntl('intl.themeForInstance', { instance: $currentInstance })
          : 'intl.theme'
      )
    }
  }
</script>