add option to reduce motion

routes/_components/IconButton.html

@@ -63,13 +63,13 @@
   }
 </style>
 <script>
-
   import { classname } from '../_utils/classname'
+  import { store } from '../_store/store'
 
   export default {
     oncreate() {
       this.observe('animation', animation => {
-        if (!animation) {
+        if (!animation || this.store.get('reduceMotion')) {
           return
         }
         let svg = this.refs.svg
@@ -77,6 +77,7 @@
         animations.forEach(anim => anim.play())
       })
     },
+    store: () => store,
     computed: {
       computedClass: (pressable, pressed, big, className) => {
         return classname(

routes/_pages/settings/general.html

@@ -13,6 +13,11 @@
              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>

routes/_store/store.js

@@ -13,6 +13,7 @@ const KEYS_TO_STORE_IN_LOCAL_STORAGE = new Set([
   'loggedInInstancesInOrder',
   'autoplayGifs',
   'markMediaAsSensitive',
+  'reduceMotion',
   'pinnedPages',
   'composeData'
 ])
@@ -34,6 +35,7 @@ export const store = new PinaforeStore({
   sensitivesShown: {},
   autoplayGifs: false,
   markMediaAsSensitive: false,
+  reduceMotion: false,
   pinnedPages: {},
   instanceLists: {},
   pinnedStatuses: {},