the last few things.

marko/page/data/components/changes-page/component.js

@@ -1,11 +1,27 @@
+const { changesApi } = require("../../../../../rpdata/api/Change")
+
+
 module.exports = class {
   onCreate(input) {
     this.state = {
-      characters: input.characters,
+      changes: input.changes,
+      shownAll: false,
       modal: null,
     }
   }
 
+  clearLimit(e) {
+    // Disable mobile URL fallback.
+    if (e && e.preventDefault) {
+      e.preventDefault()
+    }
+
+    changesApi.list({limit: 0}).then(changes => {
+      this.state.changes = changes
+      this.state.shownAll = true
+    })
+  }
+
   open(modal) {
     this.state.modal = modal
   }

marko/page/data/components/changes-page/index.marko

@@ -3,10 +3,12 @@
   <div class="changes-page">
     <h1 class="color-primary">Changes</h1>
     <p>All changes to <em>listed</em> resources is stored for 90 days for transparency reasons. The current state of an object after each change exists, but is only available through the GraphQL API at this time.</p>
-    <for (change in input.changes)>
+    <for (change in state.changes)>
       <change data=change />
     </for>
+    <a if(!state.shownAll) href="/data/changes?limit=0" class="show-more-button" on-click("clearLimit")>Show All</a>
   </div>
 </main>
 <add-character-modal enabled=(state.modal === "character.add") user=input.user on-added("characterAdded") on-close("close") />
 <add-channel-modal enabled=(state.modal === "channel.add") user=input.user on-close("close") />
+<add-file-modal enabled=(state.modal === "file.add") user=input.user on-close("close") />

marko/page/data/components/changes-page/style.less

@@ -33,4 +33,21 @@
       opacity: 1;
     }
   }
+
+  .show-more-button {
+    margin: 1em 0;
+    padding: 0.5em 2em;
+    font-size: 2em;
+    text-align: center;
+    user-select: none;
+    display: block;
+
+    color: #DA1;
+  }
+
+  .show-more-button:hover {
+    cursor: pointer;
+
+    text-decoration: underline;
+  }
 }