Add toggle to enable/disable transfer age highlighting

src/entrypoints/content/common/styles/_icons.css

@@ -24,6 +24,10 @@ See https://github.com/lucide-icons/lucide/blob/main/LICENSE */
   mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M11 7a16 16 20 0 1 10.98 4.362'/><path d='M12 12a13 13 0 0 1-8.66 5'/><path d='M16.83 13.634a16 16 0 0 1-9.267 7.328'/><path d='M20.66 17A13 13 0 0 0 12 12a13 13 0 0 1 0-10'/><path d='M8.17 15.366a16 16 0 0 1-1.713-11.69'/><circle cx='12' cy='12' r='10'/></svg>") no-repeat center / contain;
 }
 
+.hte-icon-highlighter::before {
+  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m9 11-6 6v3h9l3-3'/><path d='m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4'/></svg>") no-repeat center / contain;
+}
+
 .hte-icon-card-yellow,
 .hte-icon-card-red {
   &::before {

src/entrypoints/content/modules/transfer-age/index.css

@@ -4,6 +4,17 @@
   float: right;
   margin-top: -2px;
 
+  .hte-transfer-age-toggle {
+    cursor: pointer;
+    color: var(--hte-color-gray-4);
+    display: flex;
+    align-items: center;
+
+    &:hover, &.hte-transfer-age-active {
+      color: var(--hte-color-gray-8);
+    }
+  }
+
   .hte-transfer-age-label {
     display: flex;
     align-items: center;
@@ -26,10 +37,20 @@
     }
   }
 
+  .hte-transfer-age-thresholds {
+    display: flex;
+    gap: 12px;
+  }
+
   .hte-transfer-age-input {
     width: 44px;
     text-align: center;
   }
+
+  &.hte-transfer-age-disabled .hte-transfer-age-thresholds {
+    opacity: 0.4;
+    pointer-events: none;
+  }
 }
 
 .hte-transfer-age {

src/entrypoints/content/modules/transfer-age/index.ts

@@ -7,7 +7,7 @@ import { querySelector, querySelectorAll, querySelectorIn } from '@/entrypoints/
 import { pages } from '@/entrypoints/content/common/utils/pages'
 import { parsePlayerAge } from '@/entrypoints/content/common/utils/player/utils'
 import metadata from '@/entrypoints/content/modules/transfer-age/metadata'
-import { thresholdsStorage } from '@/entrypoints/content/modules/transfer-age/utils'
+import { settingsStorage } from '@/entrypoints/content/modules/transfer-age/utils'
 
 const createThresholdControl = (
   color: 'orange' | 'red',
@@ -27,32 +27,70 @@ const createThresholdControl = (
   return { label, input }
 }
 
-const injectSettingsPanel = (red: number, orange: number): void => {
+const clearHighlights = (): void => {
+  querySelectorAll<HTMLElement>('.hte-transfer-age', false).forEach((cell) => {
+    cell.classList.remove(
+      'hte-transfer-age',
+      'hte-transfer-age-red',
+      'hte-transfer-age-orange',
+      'hte-transfer-age-green',
+    )
+  })
+}
+
+const injectSettingsPanel = (enabled: boolean, orange: number, red: number): void => {
   querySelector('#hte-transfer-age-settings', false)?.remove()
 
   const { label: orangeLabel, input: orangeInput } = createThresholdControl('orange', orange)
   const { label: redLabel, input: redInput } = createThresholdControl('red', red)
 
+  const enabledButton = el('span', { className: `hte-transfer-age-toggle${enabled ? ' hte-transfer-age-active' : ''}` })
+  enabledButton.append(el('i', { className: 'hte-icon-highlighter' }))
+
+  const thresholdsContainer = el('div', { className: 'hte-transfer-age-thresholds' })
+  thresholdsContainer.append(orangeLabel, redLabel)
+
   const panel = el('div', { id: 'hte-transfer-age-settings' })
-  panel.append(orangeLabel, redLabel)
+  panel.classList.toggle('hte-transfer-age-disabled', !enabled)
+  panel.append(enabledButton, thresholdsContainer)
+
+  let isEnabled = enabled
+
+  const readThresholds = (): { red: number; orange: number } | null => {
+    const orange = parseInt(orangeInput.value, 10)
+    const red = parseInt(redInput.value, 10)
+
+    return isNaN(orange) || isNaN(red) ? null : { orange, red }
+  }
 
   const onThresholdChange = () => {
-    const newOrange = parseInt(orangeInput.value, 10)
-    const newRed = parseInt(redInput.value, 10)
-    if (isNaN(newOrange) || isNaN(newRed)) return
+    const thresholds = readThresholds()
+    if (!thresholds) return
+
+    void settingsStorage.setValue({ ...thresholds, enabled: isEnabled })
+    if (isEnabled) applyHighlights(thresholds.orange, thresholds.red)
+  }
+
+  const onEnabledChange = () => {
+    isEnabled = enabledButton.classList.toggle('hte-transfer-age-active')
+    const thresholds = readThresholds()
+
+    panel.classList.toggle('hte-transfer-age-disabled', !isEnabled)
+
+    if (thresholds) void settingsStorage.setValue({ ...thresholds, enabled: isEnabled })
 
-    void thresholdsStorage.setValue({ red: newRed, orange: newOrange }).then(() => {
-      applyHighlights(newRed, newOrange)
-    })
+    if (!isEnabled) clearHighlights()
+    else if (thresholds) applyHighlights(thresholds.orange, thresholds.red)
   }
 
   orangeInput.addEventListener('change', onThresholdChange)
   redInput.addEventListener('change', onThresholdChange)
+  enabledButton.addEventListener('click', onEnabledChange)
 
   querySelector('#ctl00_ctl00_CPContent_CPMain_ucPager_divWrapper .PagerRight_Default')?.prepend(panel)
 }
 
-const applyHighlights = (red: number, orange: number): void => {
+const applyHighlights = (orange: number, red: number): void => {
   const players = querySelectorAll<HTMLElement>('.transferPlayerInformation', false)
 
   players.forEach((player) => {
@@ -75,9 +113,9 @@ const transferAge: Module = {
   metadata,
   pages: [pages.transferSearchResults],
   run: async () => {
-    const { red, orange } = await thresholdsStorage.getValue()
-    injectSettingsPanel(red, orange)
-    applyHighlights(red, orange)
+    const { enabled, red, orange } = await settingsStorage.getValue()
+    injectSettingsPanel(enabled, orange, red)
+    if (enabled) applyHighlights(orange, red)
   },
 }
 

src/entrypoints/content/modules/transfer-age/utils.ts

@@ -1,6 +1,7 @@
-export const DEFAULTS = { orange: 80, red: 90 } as const
-
-export const thresholdsStorage = storage.defineItem<{ red: number; orange: number }>('local:transfer-age-thresholds', {
-  fallback: DEFAULTS,
-  version: 1,
-})
+export const settingsStorage = storage.defineItem<{ red: number; orange: number; enabled: boolean }>(
+  'local:transfer-age-settings',
+  {
+    fallback: { orange: 80, red: 90, enabled: false },
+    version: 1,
+  },
+)