super_settings 1.0.2 → 2.0.0

data/lib/super_settings/application/index.html.erb

@@ -1,33 +1,46 @@
 <%= style_tag %>
 
-<main>
-  <form class="form-inline" style="display:block;" onsubmit="return false">
+<main class="super-settings" data-api-base-url="<%= html_escape(api_base_url) %>">
+  <form class="super-settings-form-inline" style="display:block;" onsubmit="return false">
     <div class="super-settings-sticky-top">
       <span class="js-settings-count" style="display:inline-block; margin-right:1rem;"></span>
 
-      <label for="filter" class="super-settings-sr-only">Filter</label>
-      <input type="text" name="filter" value="" placeholder="Filter Keys" size="20" class="form-control" title="Filter Keys" id="filter" style="margin-right:1rem;">
+      <label for="super-settings-filter" class="super-settings-sr-only">Filter</label>
+      <input type="text" name="filter" value="" placeholder="Filter Keys" size="20" class="super-settings-form-control" title="Filter Keys" id="super-settings-filter" style="margin-right:1rem;">
 
-      <button type="button" class="btn btn-default" id="add-setting"><%= icon_image(:plus) %> Add Setting</button>
+      <button type="button" class="super-settings-btn super-settings-btn-default" id="super-settings-add-setting"><%= icon_image(:plus, style: {"vertical-align": "text-top"}) %> Add Setting</button>
 
-      <button type="button" class="btn btn-default" id="discard-changes" disabled>
+      <button type="button" class="super-settings-btn super-settings-btn-default" id="super-settings-discard-changes" disabled>
         Discard Changes
       </button>
 
-      <button type="button" class="btn btn-primary" id="save-settings" disabled>
+      <button type="button" class="super-settings-btn super-settings-btn-primary" id="super-settings-save-settings" disabled>
         Save <span class="count"></span> Changes
       </button>
 
       <strong class="js-flash" style="display:none; margin-left:3rem;"></strong>
     </div>
 
-    <table class="table table-striped" id="settings-table">
+    <table class="super-settings-table super-settings-table-striped" id="settings-table">
       <thead>
         <tr>
-          <th scope="col" class="super-settings-key">Key</th>
+          <th scope="col" class="super-settings-key">
+            Key
+            <button class="super-settings-sort-control super-settings-btn-no-chrome" data-field="key" data-order="asc" data-selected="true" title="Sort by key">
+              <%= icon_image("arrow-down-short", data: {order: :asc}, style: {display: "inline-block"}) %>
+              <%= icon_image("arrow-up-short", data: {order: :desc}, style: {display: "none"}) %>
+            </button>
+          </th>
           <th scope="col" class="super-settings-value">Value</th>
           <th scope="col" class="super-settings-value-type">Type</th>
           <th scope="col" class="super-settings-description">Description</th>
+          <th scope="col" data-field="updated_at">
+            Modified
+            <button class="super-settings-sort-control super-settings-btn-no-chrome" data-field="updated_at" data-order="asc" title="Sort by modified time">
+              <%= icon_image("arrow-down-short", data: {order: :asc}, style: {display: "inline-block"}) %>
+              <%= icon_image("arrow-up-short", data: {order: :desc}, style: {display: "none"}) %>
+            </button>
+          </th>
           <th scope="col" class="super-settings-controls"><span class="super-settings-sr-only">Controls</span></th>
         </tr>
       </thead>
@@ -35,15 +48,15 @@
       </tbody>
     </table>
   </form>
-</main>
 
-<div id="modal" class="super-settings-modal js-close-modal" aria-hidden="true" aria-role="dialog">
-  <div class="super-settings-modal-dialog">
-    <button type="button" title="Close Dialog" class="super-settings-modal-close js-close-modal">&times;</button>
-    <div class="super-settings-modal-content">
+  <div id="super-settings-modal" class="super-settings-modal js-close-modal" aria-hidden="true" aria-role="dialog">
+    <div class="super-settings-modal-dialog">
+      <button type="button" title="Close Dialog" class="super-settings-modal-close super-settings-btn-no-chrome js-close-modal">&times;</button>
+      <div class="super-settings-modal-content">
+      </div>
     </div>
   </div>
-</div>
+</main>
 
 <template id="setting-row-template" style="display:none;">
   <tr>
@@ -65,11 +78,15 @@
       <div class="js-value-placeholder super-settings-max-height-text"></div>
     </td>
 
+    <td class="super-settings-last-modified super-settings-text-nowrap">
+      <div class="js-value-placeholder"></div>
+    </td>
+
     <td class="super-settings-controls">
-      <%= icon_button(:info, title: "Setting Info", color: "royalblue", js_class: "js-show-history") %>
-      <%= icon_button(:edit, title: "Edit Setting", color: "green", js_class: "js-edit-setting") %>
-      <%= icon_button(:trash, title: "Remove Setting", color: "firebrick", js_class: "js-remove-setting") %>
-      <%= icon_button(:slash, title: "Cancel Changes", color: "firebrick", js_class: "js-restore-setting", link_style: "display:none;") %>
+      <%= icon_button("info-circle", title: "Setting Info", color: "#0d7ff0", js_class: "js-show-history") %>
+      <%= icon_button("pencil-square", title: "Edit Setting", color: "#0c8024", js_class: "js-edit-setting") %>
+      <%= icon_button("trash3", title: "Remove Setting", color: "#dc3545", js_class: "js-remove-setting") %>
+      <%= icon_button("x-circle", title: "Cancel Changes", color: "#dc3545", js_class: "js-restore-setting", link_style: "display:none;") %>
     </td>
   </tr>
 </template>
@@ -79,7 +96,7 @@
     <td class="super-settings-key">
       <div>
         <label for="settings_{{id}}_key" class="super-settings-sr-only">Key</label>
-        <input type="text" id="settings_{{id}}_key" name="settings[{{id}}][key]" value="" maxlength="190" class="form-control js-setting-key" required>
+        <input type="text" id="settings_{{id}}_key" name="settings[{{id}}][key]" value="" maxlength="190" class="super-settings-form-control js-setting-key" required>
       </div>
     </td>
 
@@ -88,72 +105,72 @@
         <label for="settings_{{id}}_value" class="super-settings-sr-only">Value</label>
         <span class="js-value-placeholder"></span>
       </div>
-      <div class="container text-danger js-setting-errors" style="display:none;">
+      <div class="super-settings-container super-settings-text-danger js-setting-errors" style="display:none;">
       </div>
     </td>
 
     <td class="super-settings-value-type">
       <div>
         <label for="settings_{{id}}_value_type" class="super-settings-sr-only">Value Type</label>
-        <select name="settings[{{id}}][value_type]" class="form-control js-setting-value-type" id="settings_{{id}}_value_type">
+        <select name="settings[{{id}}][value_type]" class="super-settings-form-control js-setting-value-type" id="settings_{{id}}_value_type">
           <% SuperSettings::Setting::VALUE_TYPES.each do |value_type| %>
-            <option value="<%= ERB::Util.html_escape(value_type) %>"><%= ERB::Util.html_escape(value_type) %></option>
+            <option value="<%= html_escape(value_type) %>"><%= html_escape(value_type) %></option>
           <% end %>
         </select>
       </div>
     </td>
 
-    <td class="super-settings-description">
+    <td class="super-settings-description" colspan="2">
       <div>
         <label for="settings_{{id}}_description" class="super-settings-sr-only">Description</label>
-        <textarea id="settings_{{id}}_description" name="settings[{{id}}][description]" value="" class="form-control" rows="4"></textarea>
+        <textarea id="settings_{{id}}_description" name="settings[{{id}}][description]" value="" class="super-settings-form-control" rows="4"></textarea>
       </div>
     </td>
 
     <td class="super-settings-controls">
-      <%= icon_button(:info, title: "Setting Info", color: "royalblue", js_class: "js-show-history") %>
-      <%= icon_button(:edit, title: "Edit Setting", color: "gray", js_class: "js-no-op", disabled: true) %>
-      <%= icon_button(:slash, title: "Cancel Changes", color: "firebrick", js_class: "js-restore-setting") %>
+      <%= icon_button("info-circle", title: "Setting Info", color: "#0d7ff0", js_class: "js-show-history") %>
+      <%= icon_button("pencil-square", title: "Edit Setting", color: "#c0c0c0", js_class: "js-no-op", disabled: true) %>
+      <%= icon_button("x-circle", title: "Cancel Changes", color: "#dc3545", js_class: "js-restore-setting") %>
     </td>
   </tr>
 </template>
 
 <template id="setting-value-field-template" style="display:none;">
-  <textarea id="settings_{{id}}_value" name="settings[{{id}}][value]" class="form-control js-setting-value" rows="4"></textarea>
+  <textarea id="settings_{{id}}_value" name="settings[{{id}}][value]" class="super-settings-form-control js-setting-value" rows="4"></textarea>
 </template>
 
 <template id="setting-value-field-integer-template" style="display:none;">
-  <input type="number" step="1" id="settings_{{id}}_value" name="settings[{{id}}][value]" value="" class="form-control js-setting-value">
+  <input type="number" step="1" id="settings_{{id}}_value" name="settings[{{id}}][value]" value="" class="super-settings-form-control js-setting-value">
 </template>
 
 <template id="setting-value-field-float-template" style="display:none;">
-  <input type="number" step="any" id="settings_{{id}}_value" name="settings[{{id}}][value]" value="" class="form-control js-setting-value">
+  <input type="number" step="any" id="settings_{{id}}_value" name="settings[{{id}}][value]" value="" class="super-settings-form-control js-setting-value">
 </template>
 
 <template id="setting-value-field-datetime-template" style="display:none;">
   <span>
-    <input type="date" id="settings_{{id}}_value" name="_settings[{{id}}][date]" value="" class="form-control js-date-input">
+    <input type="date" id="settings_{{id}}_value" name="_settings[{{id}}][date]" value="" class="super-settings-form-control js-date-input">
     <label for="settings_{{id}}_value_time" class="super-settings-sr-only">Time</label>
-    <input type="time" id="settings_{{id}}_value_time" name="_settings[{{id}}][time]" value="" class="form-control js-time-input" aria-label="Time">
+    <input type="time" id="settings_{{id}}_value_time" name="_settings[{{id}}][time]" value="" class="super-settings-form-control js-time-input" aria-label="Time">
     <input type="hidden" name="settings[{{id}}][value]" value="" class="js-setting-value">
-    <small class="text-muted">Time Zone: <span class="timezone"></span></small>
+    <small class="super-settings-text-muted">Time Zone: <span class="timezone"></span></small>
   </span>
 </template>
 
 <template id="setting-value-field-boolean-template" style="display:none;">
-  <span class="form-check">
+  <span class="super-settings-form-check">
     <input type="checkbox" id="settings_{{id}}_value" name="settings[{{id}}][value]" value="true" class="js-setting-value">
     <label for="settings_{{id}}_value">Enabled</label>
   </span>
 </template>
 
 <template id="setting-value-field-array-template" style="display:none;">
-  <textarea id="settings_{{id}}_value" name="settings[{{id}}][value]" value="" class="form-control js-setting-value" rows="8" placeholder="one entry per line"></textarea>
+  <textarea id="settings_{{id}}_value" name="settings[{{id}}][value]" value="" class="super-settings-form-control js-setting-value" rows="8" placeholder="one entry per line"></textarea>
 </template>
 
 <template id="setting-history-table" style="display:none">
   <h3>Setting History: <span class="super-settings-history-key"></span></h3>
-  <table class="table table-striped" id="super-settings-history">
+  <table class="super-settings-table super-settings-table-striped" id="super-settings-history">
     <thead>
       <tr>
         <th scope="col" class="super-settings-text-nowrap">Time</th>

data/lib/super_settings/application/layout.html.erb

@@ -2,9 +2,12 @@
 <html lang="en">
   <head>
     <title><%= application_name %> Settings</title>
+    <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="pinterest" content="nopin" />
-    <meta name="format-detection" content="telephone=no">
+    <meta name="format-detection" content="telephone=no email=no date=no address=no">
+    <meta name="robots" content="noindex, nofollow">
+    <meta name="referrer" content="no-referrer-when-downgrade">
     <%= layout_style_tag %>
     <%= add_to_head %>
   </head>
@@ -15,7 +18,7 @@
         <%= application_header %>
       </h1>
     </header>
-    <div class="container">
+    <div class="super-settings-container">
       <%= yield %>
     </div>
   </body>

data/lib/super_settings/application/layout_styles.css

@@ -1,12 +1,14 @@
-* {box-sizing:border-box;}
+* {
+  box-sizing: border-box;
+}
 
 body {
   font-family: sans-serif;
   font-size: 1rem;
   line-height: 1.5;
   text-align: left;
-  color: #212529;
-  background-color: #ffffff;
+  color: var(--text-color);
+  background-color: var(--background-color);
   margin: 0;
   padding: 0;
 }
@@ -37,157 +39,11 @@ header h1.logo img {
   margin-right: 1rem;
 }
 
-.align-center {
-  text-align: center;
-}
-
-.container {
-  padding-left: 15px;
-  padding-right: 15px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 a {
   text-decoration: none;
-  color: #369;
+  color: var(--link-color);
 }
 
 a:visited {
-  color: #369;n
-}
-
-.btn {
-	box-shadow:inset 0px 1px 0px 0px #ffffff;
-	background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
-	background-color:#f9f9f9;
-	border-radius:6px;
-	border:1px solid #dcdcdc;
-	display:inline-block;
-	color:#666666;
-	font-family:Arial;
-	font-size:15px;
-	font-weight:bold;
-	padding:9px 16px;
-	text-decoration:none;
-	text-shadow:0px 1px 0px #ffffff;
-  vertical-align: middle;
-}
-.btn:hover {
-	background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
-	background-color:#e9e9e9;
-}
-.btn:active {
-	position:relative;
-	top:1px;
-}
-.btn:disabled {
-	background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
-	background-color:#f9f9f9;
-  opacity: 0.65;
-  box-shadow: none;
-}
-
-.btn-primary {
-	box-shadow:inset 0px 1px 0px 0px #9fb4f2;
-	background:linear-gradient(to bottom, #7892c2 5%, #476e9e 100%);
-	background-color:#7892c2;
-	color:#ffffff;
-	text-shadow:0px 1px 0px #283966;
-}
-.btn-primary:hover {
-	background:linear-gradient(to bottom, #476e9e 5%, #7892c2 100%);
-	background-color:#476e9e;
-}
-.btn-primary:disabled {
-	background:linear-gradient(to bottom, #7892c2 5%, #476e9e 100%);
-	background-color:#7892c2;
-}
-
-.btn:not(:disabled) {
-  cursor: pointer;
-}
-.btn:disabled {
-  opacity: .65;
-}
-
-.table {
-  width: 100%;
-  max-width: 100%;
-  margin-bottom: 1rem;
-  border-collapse: collapse;
-}
-
-.table thead th {
-  vertical-align: bottom;
-  border-bottom: 2px solid #dee2e6;
-}
-
-.table td, .table th {
-  padding: 0.75rem;
-  vertical-align: top;
-  border-top: 1px solid #dee2e6;
-}
-
-.table-striped tbody tr:nth-of-type(odd) {
-  background-color: rgba(0, 0, 0, .05);
-}
-
-textarea {
-  font-family: inherit;
-  margin: 0;
-  overflow: auto;
-  resize: vertical;
-}
-
-.form-control {
-  font-family: inherit;
-  margin: 0;
-  overflow: visible;
-  display: block;
-  width: 100%;
-  padding: .375rem .75rem;
-  font-size: 1rem;
-  line-height: 1.5;
-  color: #495057;
-  background-color: #fff;
-  background-clip: padding-box;
-  border: 1px solid #ced4da;
-  border-radius: .25rem;
-  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
-}
-
-select.form-control:not([size]):not([multiple]) {
-  height: calc(2.25rem + 2px);
-}
-
-.form-check {
-  margin-top: .5rem;
-  display: inline-block;
-}
-
-.form-check input[type=checkbox] {
-  vertical-align: middle;
-}
-
-.form-inline {
-  display: inline-block;
-}
-
-.form-inline .form-control {
-  display: inline-block;
-  width: auto;
-  vertical-align: middle;
-}
-
-.text-success {
-  color: green !important;
-}
-
-.text-danger {
-  color: firebrick !important;
-}
-
-.text-muted {
-  color: #666 !important;
+  color: var(--link-color);
 }

data/lib/super_settings/application/layout_vars.css.erb

@@ -0,0 +1,21 @@
+<% unless color_scheme != :dark %>
+  :root {
+    --text-color: #212529;
+    --background-color: #ffffff;
+    --link-color: #369;
+  }
+<% end %>
+
+<% if color_scheme == :system %>
+  @media (prefers-color-scheme: dark) {
+<% end %>
+<% if color_scheme == :system || color_scheme == :dark %>
+  :root {
+    --text-color: #fff;
+    --background-color: #333;
+    --link-color: rgb(133, 179, 225);
+  }
+<% end %>
+<% if color_scheme == :system %>
+  }
+<% end %>

data/lib/super_settings/application/scripts.js

@@ -15,8 +15,8 @@
 
   // Set the enabled status of the save button for submitting the form.
   function enableSaveButton() {
-    const saveButton = document.querySelector("#save-settings");
-    const discardButton = document.querySelector("#discard-changes");
+    const saveButton = document.querySelector("#super-settings-save-settings");
+    const discardButton = document.querySelector("#super-settings-discard-changes");
     if (saveButton) {
       const count = changesCount();
       const countSpan = saveButton.querySelector(".count");
@@ -117,6 +117,14 @@
     if (setting.description !== null && setting.description !== undefined) {
       row.querySelector(".super-settings-description .js-value-placeholder").innerHTML = escapeHTML(setting.description).replaceAll("\n", "<br>");
     }
+    if (setting.updated_at !== null && setting.updated_at !== undefined) {
+      const lastModified = new Date(Date.parse(setting.updated_at));
+      const lastModifiedFormatter = new Intl.DateTimeFormat(navigator.language, {month: "short", day: "numeric",  year: "numeric"});
+      const lastModifiedString = lastModifiedFormatter.format(lastModified);
+      const lastModifiedElement = row.querySelector(".super-settings-last-modified .js-value-placeholder")
+      lastModifiedElement.innerText = lastModifiedString;
+      lastModifiedElement.title = dateFormatter().format(lastModified);
+    }
 
     return row
   }
@@ -182,6 +190,7 @@
   function editSettingRow(setting) {
     const row = elementFromSettingTemplate(setting, "#setting-row-edit-template");
     row.dataset.id = setting.id
+    row.dataset.key = setting.key
 
     row.querySelector(".super-settings-key input").value = setting.key;
     if (setting.description) {
@@ -239,7 +248,7 @@
       document.querySelector("#settings-table tbody").prepend(row);
     }
     bindSettingControlEvents(row);
-    filterSettings(document.querySelector("#filter").value);
+    filterSettings(document.querySelector("#super-settings-filter").value);
     row.scrollIntoView({block: "nearest"});
     enableSaveButton();
     return row;
@@ -301,7 +310,7 @@
 
   // Programatically apply the filter again to keep it up to date with other changes.
   function applyFilter(value) {
-    const filter = document.querySelector("#filter");
+    const filter = document.querySelector("#super-settings-filter");
     if (filter) {
       if (value) {
         filter.value = value;
@@ -330,11 +339,11 @@
   function showFlash(message, success) {
     const flash = document.querySelector(".js-flash");
     if (success) {
-      flash.classList.add("text-success");
-      flash.classList.remove("text-danger");
+      flash.classList.add("super-settings-text-success");
+      flash.classList.remove("super-settings-text-danger");
     } else {
-      flash.classList.add("text-danger");
-      flash.classList.remove("text-success");
+      flash.classList.add("tsuper-settings-ext-danger");
+      flash.classList.remove("super-settings-text-success");
     }
     flash.innerText = message;
     flash.style.display = "inline-block";
@@ -378,7 +387,7 @@
     tbody.insertAdjacentHTML("beforeend", rowsHTML);
 
     if (payload.previous_page_params || payload.next_page_params) {
-      let paginationHTML = `<div class="align-center">`;
+      let paginationHTML = `<div class="super-settings-align-center">`;
       if (payload.previous_page_params) {
         paginationHTML += `<div style="float:left;"><a href="#" class="js-show-history" title="Newer" data-offset="${payload.previous_page_params.offset}" data-limit="${payload.previous_page_params.limit}" data-key="${payload.previous_page_params.key}")>&#8592; Newer</a></div>`;
       }
@@ -393,7 +402,7 @@
 
   // Show a modal window overlayed on the page.
   function showModal() {
-    const modal = document.querySelector("#modal");
+    const modal = document.querySelector("#super-settings-modal");
     const content = document.querySelector(".super-settings-modal-content");
     modal.style.display = "block";
     modal.setAttribute("aria-hidden", "false");
@@ -409,7 +418,7 @@
 
   // Hide the modal window overlayed on the page.
   function hideModal() {
-    const modal = document.querySelector("#modal");
+    const modal = document.querySelector("#super-settings-modal");
     const content = document.querySelector(".super-settings-modal-content");
     modal.style.display = "none";
     modal.setAttribute("aria-hidden", "true");
@@ -456,7 +465,7 @@
       return;
     }
 
-    const modal = document.querySelector("#modal");
+    const modal = document.querySelector("#super-settings-modal");
     const content = document.querySelector(".super-settings-modal-content");
     let key = event.target.dataset.key;
     if (!key) {
@@ -592,7 +601,12 @@
     document.querySelectorAll("#settings-table tbody tr[data-edited=true]").forEach(function(row) {
       const data = {};
       settingsData.push(data);
+
       data.key = row.querySelector(".js-setting-key").value;
+      if (data.key != row.dataset.key) {
+        data.key_was = row.dataset.key;
+      }
+
       const deleted = row.querySelector(".js-setting-deleted");
       if (deleted && deleted.value === "1") {
         data.deleted = true;
@@ -635,7 +649,7 @@
   function refreshPage(event) {
     event.preventDefault();
     let url = window.location.href.replace(/\?.*/, "");
-    const filter = document.querySelector("#filter").value;
+    const filter = document.querySelector("#super-settings-filter").value;
     if (filter !== "") {
       url += "?filter=" + escape(filter);
     }
@@ -694,8 +708,9 @@
     const tbody = document.querySelector("#settings-table tbody");
     tbody.innerHTML = "";
     let count = settings.length;
-    settings.forEach(function(setting) {
-      const randomId = "setting" + Math.floor((Math.random() * 0xFFFFFFFFFFFFFF)).toString(16);
+
+    sortSettings(settings).forEach(function(setting) {
+      const randomId = "setting" + Math.floor((Math.random() * 0xFFFFFFFFFFFFF)).toString(16);
       setting.id = (setting.id || randomId);
       const row = settingRow(setting);
       tbody.appendChild(row);
@@ -703,12 +718,73 @@
     });
     document.querySelector(".js-settings-count").textContent = `${count} ${count === 1 ? "Setting" : "Settings"}`;
 
-    const filter = document.querySelector("#filter");
+    const filter = document.querySelector("#super-settings-filter");
     if (filter) {
       filter.dispatchEvent(new Event("input"));
     }
   }
 
+  function sortOrder() {
+    const selectedSort = document.querySelector(".super-settings-sort-control[data-selected=true]");
+    const field = selectedSort.dataset.field;
+    const order = selectedSort.dataset.order;
+    return {field: field, order: order};
+  }
+
+  // Sort settings by the selected sort option.
+  function sortSettings(settings) {
+    const sort = sortOrder();
+    return settings.sort(function(a, b) {
+      let aValue = a[sort.field];
+      let bValue = b[sort.field];
+      if (sort.field == "updated_at") {
+        aValue = new Date(Date.parse(aValue));
+        bValue = new Date(Date.parse(bValue));
+      }
+
+      if (aValue === bValue) {
+        return 0;
+      } else if (sort.order === "asc") {
+        return (aValue < bValue) ? -1 : 1;
+      } else {
+        return (aValue > bValue) ? -1 : 1;
+      }
+    })
+  }
+
+  function setSortOrder(event) {
+    event.preventDefault();
+
+    const target = event.target.closest(".super-settings-sort-control");
+    let prevSelection = document.querySelector(".super-settings-sort-control[data-selected=true]");
+
+    if (prevSelection == target) {
+      selectSortElement(prevSelection, false);
+      target.querySelector(`[data-order=${target.dataset.order}]`).style.display = "none";
+      target.dataset.order = (target.dataset.order === "asc" ? "desc" : "asc");
+      target.querySelector(`[data-order=${target.dataset.order}]`).style.display = "inline-block";
+    } else {
+      selectSortElement(prevSelection, false);
+    }
+
+    selectSortElement(target, true);
+
+    renderSettingsTable(activeSettings);
+  }
+
+  function selectSortElement(element, selected) {
+    element.dataset.selected = selected;
+
+    const svg = element.querySelector(`[data-order=${element.dataset.order}]`).querySelector("svg");
+    if (selected) {
+      svg.style.backgroundColor = getComputedStyle(document.querySelector(".super-settings")).getPropertyValue("--primary-color");
+      svg.style.fill = "white";
+    } else {
+      svg.style.backgroundColor = null;
+      svg.style.fill = null;
+    }
+  }
+
   function promptUnsavedChanges(event) {
     if (changesCount() > 0) {
       return "Are you sure you want to leave?";
@@ -740,15 +816,18 @@
   docReady(function() {
     storeAccessToken();
 
-    addListener(document.querySelector("#filter"), "input", filterListener);
-    addListener(document.querySelector("#add-setting"), "click", addSetting);
-    addListener(document.querySelector("#discard-changes"), "click", refreshPage);
-    addListener(document.querySelector("#save-settings"), "click", updateSettings);
-    addListener(document.querySelector("#modal"), "click", closeModal);
+    addListener(document.querySelector("#super-settings-filter"), "input", filterListener);
+    addListener(document.querySelector("#super-settings-add-setting"), "click", addSetting);
+    addListener(document.querySelector("#super-settings-discard-changes"), "click", refreshPage);
+    addListener(document.querySelector("#super-settings-save-settings"), "click", updateSettings);
+    addListener(document.querySelector("#super-settings-modal"), "click", closeModal);
+    addListener(document.querySelectorAll(".super-settings-sort-control"), "click", setSortOrder);
 
     const queryParams = new URLSearchParams(window.location.search);
     applyFilter(queryParams.get("filter"));
 
+    selectSortElement(document.querySelector(".super-settings-sort-control[data-selected=true]"), true);
+
     fetchActiveSettings();
 
     window.onbeforeunload = promptUnsavedChanges;