From f20c32996236c5a6ea4291fd6c40a5eff50b84fa Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Fri, 25 Nov 2022 13:37:46 -0800
Subject: [PATCH] feat: add option to hide checkmark

---
 src/intl/en-US.js                       | 1 +
 src/routes/_components/IconButton.html  | 7 ++++---
 src/routes/_pages/settings/general.html | 5 +++++
 src/routes/_store/store.js              | 1 +
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/intl/en-US.js b/src/intl/en-US.js
index 510f0f78..355cf966 100644
--- a/src/intl/en-US.js
+++ b/src/intl/en-US.js
@@ -384,6 +384,7 @@ export default {
   disableCustomScrollbars: 'Disable custom scrollbars',
   bottomNav: 'Place the navigation bar at the bottom of the screen',
   centerNav: 'Center the navigation bar',
+  hideCheckmark: 'Hide chechmark on favorite/boost buttons',
   preferences: 'Preferences',
   hotkeySettings: 'Hotkey settings',
   disableHotkeys: 'Disable all hotkeys',
diff --git a/src/routes/_components/IconButton.html b/src/routes/_components/IconButton.html
index d93f8766..56309e2f 100644
--- a/src/routes/_components/IconButton.html
+++ b/src/routes/_components/IconButton.html
@@ -12,7 +12,7 @@
         ref:node
 >
   <SvgIcon className="icon-button-svg {svgClassName || ''}" ref:svg {href} />
-  {#if checked}
+  {#if showCheckmark}
     <SvgIcon className="icon-button-svg icon-button-check" ref:check href="#fa-check" />
   {/if}
 </button>
@@ -154,12 +154,13 @@
         sameColorWhenPressed ? 'same-pressed' : 'not-same-pressed',
         className
       )),
-      ariaLabel: ({ pressable, pressed, label, pressedLabel }) => ((pressable && pressed) ? pressedLabel : label)
+      ariaLabel: ({ pressable, pressed, label, pressedLabel }) => ((pressable && pressed) ? pressedLabel : label),
+      showCheckmark: ({ checked, $hideCheckmark }) => (!$hideCheckmark && checked)
     },
     methods: {
       animate (animation, checkmarkAnimation) {
         this.refs.svg.animate(animation)
-        if (checkmarkAnimation && this.get().checked) {
+        if (checkmarkAnimation && this.get().showCheckmark) {
           this.refs.check.animate(checkmarkAnimation)
         }
       },
diff --git a/src/routes/_pages/settings/general.html b/src/routes/_pages/settings/general.html
index dd95e882..97dd107d 100644
--- a/src/routes/_pages/settings/general.html
+++ b/src/routes/_pages/settings/general.html
@@ -67,6 +67,11 @@
              bind:checked="$bottomNav" on:change="onChange(event)">
       {intl.bottomNav}
     </label>
+    <label class="setting-group">
+      <input type="checkbox" id="choice-hide-checkmark"
+             bind:checked="$hideCheckmark" on:change="onChange(event)">
+      {intl.hideCheckmark}
+    </label>
   </form>
 
   <h2>{intl.accessibility}</h2>
diff --git a/src/routes/_store/store.js b/src/routes/_store/store.js
index 8584d7fd..695b0d94 100644
--- a/src/routes/_store/store.js
+++ b/src/routes/_store/store.js
@@ -27,6 +27,7 @@ const persistedState = {
   disableTapOnStatus: false,
   enableGrayscale: false,
   hideCards: false,
+  hideCheckmark: false,
   largeInlineMedia: false,
   leftRightChangesFocus: isKaiOS(),
   instanceNameInSearch: '',