feat: add option to underline links in toot text (#919)

* feat: add option to underline links in toot text

* change text

src/inline-script/inline-script.js

@@ -45,6 +45,11 @@ if (hasLocalStorage && localStorage.store_disableCustomScrollbars === 'true') {
   theScrollbarStyle.setAttribute('media', 'only x') // disables the style
 }
 
+if (hasLocalStorage && localStorage.store_underlineLinks === 'true') {
+  // if the user wants links underlined, then underline 'em
+  document.body.classList.add('underline-links')
+}
+
 // hack to make the scrollbars rounded only on macOS
 if (/mac/i.test(navigator.platform)) {
   document.documentElement.style.setProperty('--scrollbar-border-radius', '50px')

src/routes/_components/settings/SettingsListItem.html

@@ -23,6 +23,7 @@
     background: var(--settings-list-item-bg);
   }
   .settings-list-item a, .settings-list-item a:visited {
+    text-decoration: none;
     color: var(--settings-list-item-text);
   }
   .settings-list-item a:hover {
@@ -70,4 +71,4 @@
       offsetForIcon: void 0
     })
   }
-</script>
+</script>

src/routes/_pages/settings/general.html

@@ -1,8 +1,8 @@
 <SettingsLayout page='settings/general' label="General">
   <h1>General Settings</h1>
 
-  <h2>Preferences</h2>
-  <form class="ui-settings" aria-label="UI settings">
+  <h2>Media</h2>
+  <form class="ui-settings">
     <div class="setting-group">
       <input type="checkbox" id="choice-mark-media-sensitive"
              bind:checked="$markMediaAsSensitive" on:change="onChange(event)">
@@ -18,20 +18,29 @@
              bind:checked="$largeInlineMedia" on:change="onChange(event)">
       <label for="choice-large-inline-media">Show large inline images and videos</label>
     </div>
-    <div class="setting-group">
-      <input type="checkbox" id="choice-disable-custom-scrollbars"
-             bind:checked="$disableCustomScrollbars" on:change="onChange(event)">
-      <label for="choice-disable-custom-scrollbars">Disable custom scrollbars</label>
-    </div>
-  </form>
-
-  <h2>Accessibility</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="onChange(event)">
       <label for="choice-autoplay-gif">Autoplay GIFs</label>
     </div>
+  </form>
+
+  <h2>UI</h2>
+  <form class="ui-settings">
+    <div class="setting-group">
+      <input type="checkbox" id="choice-disable-custom-scrollbars"
+             bind:checked="$disableCustomScrollbars" on:change="onChange(event)">
+      <label for="choice-disable-custom-scrollbars">Disable custom scrollbars</label>
+    </div>
+    <div class="setting-group">
+      <input type="checkbox" id="choice-underline-links"
+             bind:checked="$underlineLinks" on:change="onChange(event)">
+      <label for="choice-underline-links">Underline links</label>
+    </div>
+  </form>
+
+  <h2>Accessibility</h2>
+  <form class="ui-settings">
     <div class="setting-group">
       <input type="checkbox" id="choice-reduce-motion"
              bind:checked="$reduceMotion" on:change="onChange(event)">

src/routes/_store/observers/loggedInObservers.js

@@ -4,6 +4,7 @@ import { notificationObservers } from './notificationObservers'
 import { autosuggestObservers } from './autosuggestObservers'
 import { notificationPermissionObservers } from './notificationPermissionObservers'
 import { customScrollbarObservers } from './customScrollbarObservers'
+import { underlineLinksObservers } from './underlineLinksObservers'
 
 // These observers can be lazy-loaded when the user is actually logged in.
 // Prevents circular dependencies and reduces the size of main.js
@@ -14,4 +15,5 @@ export default function loggedInObservers () {
   autosuggestObservers()
   notificationPermissionObservers()
   customScrollbarObservers()
+  underlineLinksObservers()
 }

src/routes/_store/observers/underlineLinksObservers.js

@@ -0,0 +1,12 @@
+import { store } from '../store'
+
+export function underlineLinksObservers () {
+  store.observe('underlineLinks', underlineLinks => {
+    if (!process.browser) {
+      return
+    }
+
+    // disables or enables the style
+    document.body.classList.toggle('underline-links', underlineLinks)
+  }, { init: false })
+}

src/routes/_store/store.js

@@ -26,7 +26,8 @@ const persistedState = {
   pushSubscription: null,
   reduceMotion:
     !process.browser ||
-    window.matchMedia('(prefers-reduced-motion: reduce)').matches
+    window.matchMedia('(prefers-reduced-motion: reduce)').matches,
+  underlineLinks: false
 }
 
 const nonPersistedState = {

src/scss/global.scss

@@ -90,14 +90,19 @@ h1 {
 a {
   color: var(--anchor-text);
   text-decoration: none;
-}
 
-a:visited {
-  color: var(--anchor-text);
-}
+  &:visited {
+    color: var(--anchor-text);
+  }
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  .underline-links & {
+    text-decoration: underline;
+  }
 
-a:hover {
-  text-decoration: underline;
 }
 
 input {