From 7732ea2dfea75948715f79ab2d47d5df75799808 Mon Sep 17 00:00:00 2001
From: Alexander Drozdov <snosme@gmail.com>
Date: Sat, 25 Sep 2021 16:02:59 +0300
Subject: [PATCH] refactor config

---
 src/assets/data/index.ts                      | 14 ++++----
 src/web/Config.ts                             | 34 ++++++++++++-------
 src/web/background/Leagues.ts                 |  6 ++--
 src/web/client-log/client-log.ts              |  6 ++--
 src/web/i18n.ts                               |  4 +--
 src/web/map-check/MapCheck.vue                |  6 ++--
 src/web/map-check/MapStatButton.vue           |  6 ++--
 src/web/other-services/wiki.ts                |  4 +--
 src/web/overlay/OverlayWindow.vue             | 14 ++++----
 src/web/price-check/BackgroundInfo.vue        |  4 +--
 src/web/price-check/CheckedItem.vue           | 24 ++++++++-----
 src/web/price-check/PriceCheckWindow.vue      |  4 +--
 .../price-check/filters/FilterModifier.vue    |  4 +--
 .../filters/create-item-filters.ts            | 25 ++++++++------
 .../filters/create-stat-filters.ts            | 13 +++----
 .../price-check/trade/RateLimiterState.vue    |  4 +--
 src/web/price-check/trade/TradeBulk.vue       |  6 ++--
 src/web/price-check/trade/TradeListing.vue    | 10 +++---
 src/web/price-check/trade/common.ts           | 12 +++----
 src/web/settings/SettingsWindow.vue           |  4 +--
 src/web/settings/hotkeys.vue                  |  8 ++---
 src/web/settings/maps.vue                     |  4 +--
 src/web/settings/price-check.vue              |  4 +--
 src/web/settings/utils.ts                     | 31 +++++++++++++++++
 24 files changed, 149 insertions(+), 102 deletions(-)
 create mode 100644 src/web/settings/utils.ts

diff --git a/src/assets/data/index.ts b/src/assets/data/index.ts
index 52198260..6215485d 100644
--- a/src/assets/data/index.ts
+++ b/src/assets/data/index.ts
@@ -3,7 +3,7 @@
 import type { TranslationDict } from '@/assets/data/en/client_strings'
 import type { ClientLogDict } from '@/assets/data/en/client_log'
 import type { BaseType, DropEntry, Stat, StatMatcher, UniqueItem } from './interfaces'
-import { Config } from '@/web/Config'
+import { AppConfig } from '@/web/Config'
 import { nameToDetailsId } from '@/web/price-check/trends/getDetailsId'
 
 export * from './interfaces'
@@ -31,17 +31,19 @@ export let MAP_IMGS: Map<string, { img: string }>
 export const ITEM_DROP = new Map<string, DropEntry>()
 
 ;(function initData () { /* eslint-disable no-lone-blocks */
-  {
-    CLIENT_STRINGS = (require(`./${Config.store.language}/client_strings`).default)
-    CLIENTLOG_STRINGS = (require(`./${Config.store.language}/client_log`).default)
+  const { language } = AppConfig()
 
-    const itemNames: Array<[string, string]> = (require(`./${Config.store.language}/item-names.json`))
+  {
+    CLIENT_STRINGS = (require(`./${language}/client_strings`).default)
+    CLIENTLOG_STRINGS = (require(`./${language}/client_log`).default)
+
+    const itemNames: Array<[string, string]> = (require(`./${language}/item-names.json`))
     TRANSLATED_ITEM_NAME_BY_REF = new Map(itemNames)
     ITEM_NAME_REF_BY_TRANSLATED = new Map(itemNames.map(_ => [_[1], _[0]]))
   }
 
   {
-    STATS = (require(`./${Config.store.language}/stats.json`))
+    STATS = (require(`./${language}/stats.json`))
     for (const entry of STATS) {
       for (const condition of entry.stat.matchers) {
         STAT_BY_MATCH_STR.set(condition.string, { matcher: condition, stat: entry })
diff --git a/src/web/Config.ts b/src/web/Config.ts
index 5632d4d9..a74dd770 100644
--- a/src/web/Config.ts
+++ b/src/web/Config.ts
@@ -1,22 +1,30 @@
-import { reactive } from 'vue'
+import { reactive as deepReactive, shallowRef } from 'vue'
 import { MainProcess } from '@/ipc/main-process-bindings'
-import type { Config as ConfigType } from '@/ipc/types'
+import type { Config } from '@/ipc/types'
 import type { Widget } from './overlay/interfaces'
 
-export function getWidgetConfig<T extends Widget> (type: string) {
-  return Config.store.widgets.find(w => w.wmType === type) as T | undefined
-}
+const _config = shallowRef<Config | null>(null)
 
-class ConfigService {
-  store: ConfigType
-
-  constructor () {
-    this.store = reactive(MainProcess.getConfig())
+export function AppConfig (): Config
+export function AppConfig<T extends Widget> (type: string): T | undefined
+export function AppConfig (type?: string) {
+  if (!_config.value) {
+    _config.value = deepReactive(MainProcess.getConfig())
   }
 
-  saveConfig () {
-    MainProcess.saveConfig(JSON.parse(JSON.stringify(this.store)))
+  if (!type) {
+    return _config.value
+  } else {
+    return _config.value.widgets.find(w => w.wmType === type)
   }
 }
 
-export const Config = new ConfigService()
+export function updateConfig (updates: Config) {
+  if (_config.value) {
+    _config.value = deepReactive(JSON.parse(JSON.stringify(updates)))
+  }
+}
+
+export function saveConfig () {
+  MainProcess.saveConfig(JSON.parse(JSON.stringify(AppConfig())))
+}
diff --git a/src/web/background/Leagues.ts b/src/web/background/Leagues.ts
index 6d05f1f7..637a7b03 100644
--- a/src/web/background/Leagues.ts
+++ b/src/web/background/Leagues.ts
@@ -1,5 +1,5 @@
 import { computed, ref } from 'vue'
-import { Config } from '@/web/Config'
+import { AppConfig } from '@/web/Config'
 
 export const isLoading = ref(false)
 export const error = ref<string | null>(null)
@@ -8,11 +8,11 @@ export const tradeLeagues = ref<Array<{ id: string }>>([])
 export const selected = computed<string | undefined>({
   get () {
     return (tradeLeagues.value.length)
-      ? Config.store.leagueId
+      ? AppConfig().leagueId
       : undefined
   },
   set (id) {
-    Config.store.leagueId = id
+    AppConfig().leagueId = id
   }
 })
 
diff --git a/src/web/client-log/client-log.ts b/src/web/client-log/client-log.ts
index 5a8ab664..452534e2 100644
--- a/src/web/client-log/client-log.ts
+++ b/src/web/client-log/client-log.ts
@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
 import { CLIENTLOG_STRINGS as _$, ITEM_NAME_REF_BY_TRANSLATED, TRADE_TAGS } from '@/assets/data'
-import { Config } from '@/web/Config'
+import { AppConfig } from '@/web/Config'
 
 const enum MessageChannel {
   SYSTEM = 'system',
@@ -64,7 +64,7 @@ export function handleLine (line: string) {
   entry.body = match.groups!.body
 
   if (entry.сhannel === MessageChannel.WHISPER_FROM) {
-    if ((match = entry.body.match(TRADE_WHISPER[Config.store.language]))) {
+    if ((match = entry.body.match(TRADE_WHISPER[AppConfig().language]))) {
       const [pAmount, pTag] = [
         match.groups!.price.split(' ', 1).toString(),
         match.groups!.price.split(' ').slice(1).join(' ')
@@ -98,7 +98,7 @@ export function handleLine (line: string) {
       }
 
       // console.log(entry)
-    } else if ((match = entry.body.match(TRADE_BULK_WHISPER[Config.store.language]))) {
+    } else if ((match = entry.body.match(TRADE_BULK_WHISPER[AppConfig().language]))) {
       const [pAmount, pName] = [
         match.groups!.price.split(' ', 1).toString(),
         match.groups!.price.split(' ').slice(1).join(' ')
diff --git a/src/web/i18n.ts b/src/web/i18n.ts
index fce6c865..a79edcd7 100644
--- a/src/web/i18n.ts
+++ b/src/web/i18n.ts
@@ -1,9 +1,9 @@
 import { createI18n, I18nAdditionalOptions, ComposerOptions } from 'vue-i18n'
-import { Config } from './Config'
+import { AppConfig } from './Config'
 
 export default createI18n<I18nAdditionalOptions & ComposerOptions>({
   legacy: false,
-  locale: Config.store.language,
+  locale: AppConfig().language,
   fallbackLocale: 'en',
   fallbackFormat: true,
   fallbackWarn: false,
diff --git a/src/web/map-check/MapCheck.vue b/src/web/map-check/MapCheck.vue
index fe36d0b5..fbe50c7f 100644
--- a/src/web/map-check/MapCheck.vue
+++ b/src/web/map-check/MapCheck.vue
@@ -25,7 +25,7 @@ import MapStatButton from './MapStatButton.vue'
 import { prepareMapStats } from './prepare-map-stats'
 import { TRANSLATED_ITEM_NAME_BY_REF, MAP_IMGS, STAT_BY_MATCH_STR } from '@/assets/data'
 import { WidgetManager, ItemCheckWidget } from '../overlay/interfaces'
-import { Config } from '@/web/Config'
+import { AppConfig } from '@/web/Config'
 
 export default defineComponent({
   components: {
@@ -41,9 +41,7 @@ export default defineComponent({
     const wm = inject<WidgetManager>('wm')!
     const { t } = useI18n()
 
-    const config = computed(() => {
-      return Config.store.widgets.find(widget => widget.wmType === 'item-check') as ItemCheckWidget
-    })
+    const config = computed(() => AppConfig<ItemCheckWidget>('item-check')!)
 
     const mapName = computed(() => {
       const { item } = props
diff --git a/src/web/map-check/MapStatButton.vue b/src/web/map-check/MapStatButton.vue
index ae0ab186..ab5d8cb6 100644
--- a/src/web/map-check/MapStatButton.vue
+++ b/src/web/map-check/MapStatButton.vue
@@ -26,7 +26,7 @@
 <script lang="ts">
 import { defineComponent, PropType, computed } from 'vue'
 import ItemModifierText from '../ui/ItemModifierText.vue'
-import { Config } from '@/web/Config'
+import { AppConfig } from '@/web/Config'
 import { PreparedStat } from './prepare-map-stats'
 import { ItemCheckWidget } from '../overlay/interfaces'
 
@@ -39,9 +39,7 @@ export default defineComponent({
     }
   },
   setup (props) {
-    const config = computed(() => {
-      return Config.store.widgets.find(widget => widget.wmType === 'item-check') as ItemCheckWidget
-    })
+    const config = computed(() => AppConfig<ItemCheckWidget>('item-check')!)
     const entry = computed(() => {
       return config.value.maps.selectedStats.find(_ => _.matcher === props.stat.matcher)
     })
diff --git a/src/web/other-services/wiki.ts b/src/web/other-services/wiki.ts
index 01cacc45..27200cb1 100644
--- a/src/web/other-services/wiki.ts
+++ b/src/web/other-services/wiki.ts
@@ -1,6 +1,6 @@
 import { MainProcess } from '@/ipc/main-process-bindings'
 import { parseClipboard, ItemRarity } from '@/parser'
-import { Config } from '@/web/Config'
+import { AppConfig } from '@/web/Config'
 import { TRANSLATED_ITEM_NAME_BY_REF } from '@/assets/data'
 
 const ENDPOINT_BY_LANG = {
@@ -18,5 +18,5 @@ export function openWiki (clipboard: string) {
 
   pageName = TRANSLATED_ITEM_NAME_BY_REF.get(pageName) || pageName
 
-  MainProcess.openSystemBrowser(`https://${ENDPOINT_BY_LANG[Config.store.language]}/${pageName}`)
+  MainProcess.openSystemBrowser(`https://${ENDPOINT_BY_LANG[AppConfig().language]}/${pageName}`)
 }
diff --git a/src/web/overlay/OverlayWindow.vue b/src/web/overlay/OverlayWindow.vue
index f5a45c20..fb5eba05 100644
--- a/src/web/overlay/OverlayWindow.vue
+++ b/src/web/overlay/OverlayWindow.vue
@@ -32,7 +32,7 @@ import WidgetDelveGrid from './WidgetDelveGrid'
 import WidgetSettings from '../settings/SettingsWindow'
 import { registerOtherServices } from '../other-services'
 import { FOCUS_CHANGE, VISIBILITY } from '@/ipc/ipc-event'
-import { Config } from '@/web/Config'
+import { AppConfig, saveConfig } from '@/web/Config'
 import LoadingAnimation from './LoadingAnimation.vue'
 // ---
 import '@/web/background/AutoUpdates'
@@ -90,7 +90,7 @@ export default {
     active (active) {
       if (!active) {
         this.$nextTick(() => {
-          Config.saveConfig()
+          saveConfig()
         })
       }
     }
@@ -139,10 +139,10 @@ export default {
   computed: {
     widgets: {
       get () {
-        return Config.store.widgets
+        return AppConfig().widgets
       },
       set (value) {
-        Config.store.widgets = value
+        AppConfig().widgets = value
       }
     },
     visibilityState () {
@@ -180,11 +180,11 @@ export default {
       if (!this.active) return undefined
 
       if (this.topmostOrExclusiveWidget.wmZorder === 'exclusive') {
-        if (!Config.store.overlayBackgroundExclusive) {
+        if (!AppConfig().overlayBackgroundExclusive) {
           return undefined
         }
       }
-      return Config.store.overlayBackground
+      return AppConfig().overlayBackground
     }
   },
   methods: {
@@ -255,7 +255,7 @@ export default {
       })
     },
     handleBackgroundClick () {
-      if (Config.store.overlayBackgroundClose) {
+      if (AppConfig().overlayBackgroundClose) {
         MainProcess.closeOverlay()
       }
     }
diff --git a/src/web/price-check/BackgroundInfo.vue b/src/web/price-check/BackgroundInfo.vue
index fdcb6a70..c657ee3f 100644
--- a/src/web/price-check/BackgroundInfo.vue
+++ b/src/web/price-check/BackgroundInfo.vue
@@ -29,12 +29,12 @@ import { useI18n } from 'vue-i18n'
 import { Widget, WidgetManager } from '../overlay/interfaces'
 import * as Leagues from '@/web/background/Leagues'
 import { updateInfo } from '@/web/background/AutoUpdates'
-import { getWidgetConfig } from '@/web/Config'
+import { AppConfig } from '@/web/Config'
 
 export default defineComponent({
   setup () {
     const wm = inject<WidgetManager>('wm')!
-    const widget = computed(() => getWidgetConfig<Widget>('price-check')!)
+    const widget = computed(() => AppConfig<Widget>('price-check')!)
 
     const { t } = useI18n()
 
diff --git a/src/web/price-check/CheckedItem.vue b/src/web/price-check/CheckedItem.vue
index a56750d5..938cadba 100644
--- a/src/web/price-check/CheckedItem.vue
+++ b/src/web/price-check/CheckedItem.vue
@@ -56,11 +56,12 @@ import PricePrediction from './price-prediction/PricePrediction.vue'
 import StackValue from './stack-value/StackValue.vue'
 import FilterName from './filters/FilterName.vue'
 import { CATEGORY_TO_TRADE_ID } from './trade/pathofexile-trade'
-import { Config } from '@/web/Config'
+import { AppConfig } from '@/web/Config'
 import { ItemFilters, StatFilter } from './filters/interfaces'
 import { ModifierType } from '@/parser/modifiers'
 import { MainProcess } from '@/ipc/main-process-bindings'
 import { PriceCheckWidget } from '../overlay/interfaces'
+import { selected as selectedLeague } from '@/web/background/Leagues'
 
 let _showSupportLinksCounter = 0
 
@@ -86,9 +87,7 @@ export default defineComponent({
     }
   },
   setup (props) {
-    const widgetCfg = computed(() => {
-      return Config.store.widgets.find(w => w.wmType === 'price-check') as PriceCheckWidget
-    })
+    const widget = computed(() => AppConfig<PriceCheckWidget>('price-check')!)
 
     const itemFilters = ref<ItemFilters>(null!)
     const itemStats = ref<StatFilter[]>(null!)
@@ -103,11 +102,18 @@ export default defineComponent({
     const filtersBlock = ref<ComponentPublicInstance<{}, { showHidden: Ref<boolean> }>>(null!)
 
     watch(() => props.item, (item) => {
-      itemFilters.value = createFilters(item)
-      itemStats.value = initUiModFilters(item)
+      itemFilters.value = createFilters(item, {
+        league: selectedLeague.value!,
+        chaosPriceThreshold: widget.value.chaosPriceThreshold,
+        collapseListings: widget.value.collapseListings,
+        activateStockFilter: widget.value.activateStockFilter
+      })
+      itemStats.value = initUiModFilters(item, {
+        searchStatRange: widget.value.searchStatRange
+      })
 
-      if ((!props.advancedCheck && !widgetCfg.value.smartInitialSearch) ||
-          (props.advancedCheck && !widgetCfg.value.lockedInitialSearch)) {
+      if ((!props.advancedCheck && !widget.value.smartInitialSearch) ||
+          (props.advancedCheck && !widget.value.lockedInitialSearch)) {
         interactedOnce.value = false
       } else {
         interactedOnce.value = Boolean(
@@ -155,7 +161,7 @@ export default defineComponent({
     }, { deep: false })
 
     const showPredictedPrice = computed(() => {
-      if (Config.store.language !== 'en') return false
+      if (AppConfig().language !== 'en') return false
 
       return props.item.rarity === ItemRarity.Rare &&
         props.item.category !== ItemCategory.Map &&
diff --git a/src/web/price-check/PriceCheckWindow.vue b/src/web/price-check/PriceCheckWindow.vue
index 37672942..e2c763bb 100644
--- a/src/web/price-check/PriceCheckWindow.vue
+++ b/src/web/price-check/PriceCheckWindow.vue
@@ -71,7 +71,7 @@ import { MainProcess } from '@/ipc/main-process-bindings'
 import { IpcPriceCheck, PRICE_CHECK, PRICE_CHECK_CANCELED } from '@/ipc/ipc-event'
 import { chaosExaRate } from '../background/Prices'
 import { selected as league } from '@/web/background/Leagues'
-import { Config } from '@/web/Config'
+import { AppConfig } from '@/web/Config'
 import { parseClipboard, ParsedItem } from '@/parser'
 import RelatedItems from './related-items/RelatedItems.vue'
 import RateLimiterState from './trade/RateLimiterState.vue'
@@ -132,7 +132,7 @@ export default defineComponent({
     const title = computed(() => league.value || 'Awakened PoE Trade')
     const exaltedCost = computed(() => (chaosExaRate.value) ? Math.round(chaosExaRate.value) : null)
     const isBrowserShown = computed(() => props.config.wmFlags.includes('has-browser'))
-    const overlayKey = computed(() => Config.store.overlayKey)
+    const overlayKey = computed(() => AppConfig().overlayKey)
     const showCheckPos = computed(() => wm.active && props.config.showCursor)
     const poeUiWidth = computed(() => wm.poeUiWidth)
     const isLeagueSelected = computed(() => Boolean(league.value))
diff --git a/src/web/price-check/filters/FilterModifier.vue b/src/web/price-check/filters/FilterModifier.vue
index 48336833..e9685c45 100644
--- a/src/web/price-check/filters/FilterModifier.vue
+++ b/src/web/price-check/filters/FilterModifier.vue
@@ -86,7 +86,7 @@ import { useI18n } from 'vue-i18n'
 import ItemModifierText from '../../ui/ItemModifierText.vue'
 import ModifierAnointment from './FilterModifierAnointment.vue'
 import FilterModifierItemHasEmpty from './FilterModifierItemHasEmpty.vue'
-import { Config } from '@/web/Config'
+import { AppConfig } from '@/web/Config'
 import { ParsedItem } from '@/parser'
 import { StatFilter } from './interfaces'
 
@@ -193,7 +193,7 @@ export default defineComponent({
       inputMin,
       inputMax,
       sliderValue,
-      fontSize: computed(() => Config.store.fontSize),
+      fontSize: computed(() => AppConfig().fontSize),
       inputFocus,
       toggleFilter
     }
diff --git a/src/web/price-check/filters/create-item-filters.ts b/src/web/price-check/filters/create-item-filters.ts
index f4dec500..b3c4c251 100644
--- a/src/web/price-check/filters/create-item-filters.ts
+++ b/src/web/price-check/filters/create-item-filters.ts
@@ -1,23 +1,26 @@
-import { ItemFilters } from './interfaces'
+import type { ItemFilters } from './interfaces'
 import { ParsedItem, ItemCategory, ItemRarity } from '@/parser'
 import { VEILED_STAT } from './veiled'
-import { selected as league } from '@/web/background/Leagues'
 import { tradeTag } from '../trade/common'
-import { Config } from '@/web/Config'
-import { PriceCheckWidget } from '@/web/overlay/interfaces'
 
 export const SPECIAL_SUPPORT_GEM = ['Empower Support', 'Enlighten Support', 'Enhance Support']
 
-export function createFilters (item: ParsedItem): ItemFilters {
-  const cfg = Config.store.widgets.find(w => w.wmType === 'price-check') as PriceCheckWidget
-
+export function createFilters (
+  item: ParsedItem,
+  opts: {
+    league: string
+    chaosPriceThreshold: number
+    collapseListings: 'app' | 'api'
+    activateStockFilter: boolean
+  }
+): ItemFilters {
   const filters: ItemFilters = {
     trade: {
       offline: false,
       listed: undefined,
-      league: league.value!,
-      chaosPriceThreshold: cfg.chaosPriceThreshold,
-      collapseListings: cfg.collapseListings
+      league: opts.league,
+      chaosPriceThreshold: opts.chaosPriceThreshold,
+      collapseListings: opts.collapseListings
     }
   }
 
@@ -33,7 +36,7 @@ export function createFilters (item: ParsedItem): ItemFilters {
   if (item.stackSize || tradeTag(item)) {
     filters.stackSize = {
       value: item.stackSize?.value || 1,
-      disabled: !(item.stackSize && item.stackSize.value > 1 && cfg.activateStockFilter)
+      disabled: !(item.stackSize && item.stackSize.value > 1 && opts.activateStockFilter)
     }
   }
   if (item.category === ItemCategory.MavenInvitation) {
diff --git a/src/web/price-check/filters/create-stat-filters.ts b/src/web/price-check/filters/create-stat-filters.ts
index abc21cda..d1318df6 100644
--- a/src/web/price-check/filters/create-stat-filters.ts
+++ b/src/web/price-check/filters/create-stat-filters.ts
@@ -6,8 +6,6 @@ import { ItemHasEmptyModifier, StatFilter } from './interfaces'
 import { filterPseudo } from './pseudo'
 import { filterItemProp } from './pseudo/item-property'
 import { filterUniqueItemProp } from './pseudo/item-property-unique'
-import { getWidgetConfig } from '@/web/Config'
-import type { PriceCheckWidget } from '@/web/overlay/interfaces'
 
 export interface FiltersCreationContext {
   readonly item: ParsedItem
@@ -16,7 +14,12 @@ export interface FiltersCreationContext {
   modifiers: ParsedItem['modifiers']
 }
 
-export function initUiModFilters (item: ParsedItem): StatFilter[] {
+export function initUiModFilters (
+  item: ParsedItem,
+  opts: {
+    searchStatRange: number
+  }
+): StatFilter[] {
   if (
     (item.rarity === ItemRarity.Unique && item.category === ItemCategory.Map) ||
     item.category === ItemCategory.MavenInvitation
@@ -24,12 +27,10 @@ export function initUiModFilters (item: ParsedItem): StatFilter[] {
     return []
   }
 
-  const { searchStatRange } = getWidgetConfig<PriceCheckWidget>('price-check')!
-
   const ctx: FiltersCreationContext = {
     item,
     filters: [],
-    searchInRange: searchStatRange,
+    searchInRange: opts.searchStatRange,
     modifiers: item.modifiers.map(mod => {
       if (mod.type === ModifierType.Fractured && mod.trade.ids[ModifierType.Explicit]) {
         return { ...mod, type: ModifierType.Explicit }
diff --git a/src/web/price-check/trade/RateLimiterState.vue b/src/web/price-check/trade/RateLimiterState.vue
index f1cbc4e6..2b5de687 100644
--- a/src/web/price-check/trade/RateLimiterState.vue
+++ b/src/web/price-check/trade/RateLimiterState.vue
@@ -20,12 +20,12 @@
 import { computed, defineComponent } from 'vue'
 import { RATE_LIMIT_RULES } from './common'
 import { PriceCheckWidget } from '@/web/overlay/interfaces'
-import { getWidgetConfig } from '@/web/Config'
+import { AppConfig } from '@/web/Config'
 
 export default defineComponent({
   inheritAttrs: false,
   setup () {
-    const widget = computed(() => getWidgetConfig<PriceCheckWidget>('price-check')!)
+    const widget = computed(() => AppConfig<PriceCheckWidget>('price-check')!)
 
     const limits = computed(() => {
       const LIMITS = [
diff --git a/src/web/price-check/trade/TradeBulk.vue b/src/web/price-check/trade/TradeBulk.vue
index a7b8dd06..22522b8d 100644
--- a/src/web/price-check/trade/TradeBulk.vue
+++ b/src/web/price-check/trade/TradeBulk.vue
@@ -95,7 +95,7 @@ import { BulkSearch, execBulkSearch, PricingResult, requestResults } from './pat
 import { tradeTag, getTradeEndpoint } from './common'
 import { TRADE_TAG_BY_NAME } from '@/assets/data'
 import { selected as league } from '../../background/Leagues'
-import { Config, getWidgetConfig } from '@/web/Config'
+import { AppConfig } from '@/web/Config'
 import { ItemFilters } from '../filters/interfaces'
 import { ParsedItem } from '@/parser'
 import { PriceCheckWidget, WidgetManager } from '@/web/overlay/interfaces'
@@ -147,7 +147,7 @@ function useBulkApi () {
         ;(async function () {
           try {
             requested = true
-            items.value = await requestResults(query.queryId, query.listedIds.slice(0, 20), { accountName: Config.store.accountName })
+            items.value = await requestResults(query.queryId, query.listedIds.slice(0, 20), { accountName: AppConfig().accountName })
           } catch (err) {
             error.value = (err as Error).message
           }
@@ -174,7 +174,7 @@ export default defineComponent({
   },
   setup (props) {
     const wm = inject<WidgetManager>('wm')!
-    const widget = computed(() => getWidgetConfig<PriceCheckWidget>('price-check')!)
+    const widget = computed(() => AppConfig<PriceCheckWidget>('price-check')!)
     const { error, result, search } = useBulkApi()
 
     const selectedCurr = ref<'chaos' | 'exa'>('chaos')
diff --git a/src/web/price-check/trade/TradeListing.vue b/src/web/price-check/trade/TradeListing.vue
index 376da576..fbfa7a80 100644
--- a/src/web/price-check/trade/TradeListing.vue
+++ b/src/web/price-check/trade/TradeListing.vue
@@ -115,7 +115,7 @@ import { MainProcess } from '@/ipc/main-process-bindings'
 import { requestTradeResultList, requestResults, createTradeRequest, PricingResult } from './pathofexile-trade'
 import { getTradeEndpoint, SearchResult } from './common'
 import { selected as defaultLeague, tradeLeagues } from '../../background/Leagues'
-import { Config, getWidgetConfig } from '@/web/Config'
+import { AppConfig } from '@/web/Config'
 import { PriceCheckWidget, WidgetManager } from '@/web/overlay/interfaces'
 import { ItemFilters, StatFilter } from '../filters/interfaces'
 import { ParsedItem } from '@/parser'
@@ -185,11 +185,11 @@ function useTradeApi () {
       // first two req are parallel, then sequential on demand
       {
         const r1 = (_searchResult.result.length > 0)
-          ? requestResults(_searchResult.id, _searchResult.result.slice(0, 10), { accountName: Config.store.accountName })
+          ? requestResults(_searchResult.id, _searchResult.result.slice(0, 10), { accountName: AppConfig().accountName })
             .then(results => { _fetchResults.push(...results) })
           : Promise.resolve()
         const r2 = (_searchResult.result.length > 10)
-          ? requestResults(_searchResult.id, _searchResult.result.slice(10, 20), { accountName: Config.store.accountName })
+          ? requestResults(_searchResult.id, _searchResult.result.slice(10, 20), { accountName: AppConfig().accountName })
             .then(results => r1
               .then(() => { _fetchResults.push(...results) }))
           : Promise.resolve()
@@ -207,7 +207,7 @@ function useTradeApi () {
           fetched < _searchResult.total &&
           fetched < API_FETCH_LIMIT
         ) {
-          await requestResults(_searchResult.id, _searchResult.result.slice(fetched, fetched + 10), { accountName: Config.store.accountName })
+          await requestResults(_searchResult.id, _searchResult.result.slice(fetched, fetched + 10), { accountName: AppConfig().accountName })
             .then(results => { _fetchResults.push(...results) })
           fetched += 10
           return fetchMore()
@@ -239,7 +239,7 @@ export default defineComponent({
   },
   setup (props) {
     const wm = inject<WidgetManager>('wm')!
-    const widget = computed(() => getWidgetConfig<PriceCheckWidget>('price-check')!)
+    const widget = computed(() => AppConfig<PriceCheckWidget>('price-check')!)
 
     watch(() => props.item, (item) => {
       slowdown.reset(item)
diff --git a/src/web/price-check/trade/common.ts b/src/web/price-check/trade/common.ts
index c7d86865..edd5d307 100644
--- a/src/web/price-check/trade/common.ts
+++ b/src/web/price-check/trade/common.ts
@@ -1,10 +1,10 @@
-import { ItemFilters, StatFilter } from '../filters/interfaces'
+import { shallowReactive } from 'vue'
+import type { ItemFilters, StatFilter } from '../filters/interfaces'
 import { TRADE_TAG_BY_NAME } from '@/assets/data'
-import { Config } from '@/web/Config'
+import { AppConfig } from '@/web/Config'
+import type { PriceCheckWidget } from '@/web/overlay/interfaces'
 import { RateLimiter } from './RateLimiter'
 import { ParsedItem, ItemCategory, ItemRarity } from '@/parser'
-import { PriceCheckWidget } from '@/web/overlay/interfaces'
-import { shallowReactive } from 'vue'
 
 export interface Account {
   name: string
@@ -69,7 +69,7 @@ const ENDPOINT_BY_LANG = {
 }
 
 export function getTradeEndpoint (): string {
-  return ENDPOINT_BY_LANG[Config.store.language]
+  return ENDPOINT_BY_LANG[AppConfig().language]
 }
 
 export const RATE_LIMIT_RULES = {
@@ -98,7 +98,7 @@ export function adjustRateLimits (clientLimits: Set<RateLimiter>, headers: Heade
 
 function _adjustRateLimits (clientLimits: Set<RateLimiter>, limitStr: string, stateStr: string): void { /* eslint-disable no-console */
   const DEBUG = false
-  const DESYNC_FIX = (Config.store.widgets.find(w => w.wmType === 'price-check') as PriceCheckWidget).apiLatencySeconds
+  const DESYNC_FIX = AppConfig<PriceCheckWidget>('price-check')!.apiLatencySeconds
 
   const limitRuleState = stateStr
     .split(',')
diff --git a/src/web/settings/SettingsWindow.vue b/src/web/settings/SettingsWindow.vue
index 6b6f0882..ef763fb2 100644
--- a/src/web/settings/SettingsWindow.vue
+++ b/src/web/settings/SettingsWindow.vue
@@ -30,7 +30,7 @@
 <script lang="ts">
 import { defineComponent, shallowRef, computed, Component, PropType, nextTick, inject, reactive, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { getGlobalConfig, updateConfig, saveConfig } from '@/web/Config'
+import { AppConfig, updateConfig, saveConfig } from '@/web/Config'
 import type { Config } from '@/ipc/types'
 import type { Widget, WidgetManager } from '@/web/overlay/interfaces'
 import SettingsHotkeys from './hotkeys.vue'
@@ -60,7 +60,7 @@ export default defineComponent({
     const configClone = shallowRef<Config | null>(null)
     watch(() => props.config.wmWants, (wmWants) => {
       if (wmWants === 'show') {
-        configClone.value = reactive(JSON.parse(JSON.stringify(getGlobalConfig())))
+        configClone.value = reactive(JSON.parse(JSON.stringify(AppConfig())))
       } else {
         configClone.value = null
       }
diff --git a/src/web/settings/hotkeys.vue b/src/web/settings/hotkeys.vue
index c70ac9db..0de39531 100644
--- a/src/web/settings/hotkeys.vue
+++ b/src/web/settings/hotkeys.vue
@@ -64,7 +64,7 @@
 <script lang="ts">
 import { defineComponent, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { configProp, configModelValue, getWidgetConfig } from './utils'
+import { configProp, configModelValue, findWidget } from './utils'
 import { PriceCheckWidget } from '@/web/overlay/interfaces'
 import HotkeyInput from './HotkeyInput.vue'
 
@@ -83,9 +83,9 @@ export default defineComponent({
       itemCheckKey: configModelValue(() => props.config, 'itemCheckKey'),
       wikiKey: configModelValue(() => props.config, 'wikiKey'),
       overlayKey: configModelValue(() => props.config, 'overlayKey'),
-      priceCheckHotkeyHold: configModelValue(() => getWidgetConfig<PriceCheckWidget>('price-check', props.config)!, 'hotkeyHold'),
-      priceCheckHotkey: configModelValue(() => getWidgetConfig<PriceCheckWidget>('price-check', props.config)!, 'hotkey'),
-      priceCheckHotkeyLocked: configModelValue(() => getWidgetConfig<PriceCheckWidget>('price-check', props.config)!, 'hotkeyLocked')
+      priceCheckHotkeyHold: configModelValue(() => findWidget<PriceCheckWidget>('price-check', props.config)!, 'hotkeyHold'),
+      priceCheckHotkey: configModelValue(() => findWidget<PriceCheckWidget>('price-check', props.config)!, 'hotkey'),
+      priceCheckHotkeyLocked: configModelValue(() => findWidget<PriceCheckWidget>('price-check', props.config)!, 'hotkeyLocked')
     }
   }
 })
diff --git a/src/web/settings/maps.vue b/src/web/settings/maps.vue
index d3310ded..8c35e68a 100644
--- a/src/web/settings/maps.vue
+++ b/src/web/settings/maps.vue
@@ -35,7 +35,7 @@
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { configProp, getWidgetConfig } from './utils'
+import { configProp, findWidget } from './utils'
 import type { ItemCheckWidget } from '@/web/overlay/interfaces'
 import { STATS, STAT_BY_MATCH_STR } from '@/assets/data'
 import MapsStatEntry from './MapsStatEntry.vue'
@@ -57,7 +57,7 @@ export default defineComponent({
     const search = ref('')
     const onlySelected = ref(true)
 
-    const widget = computed(() => getWidgetConfig<ItemCheckWidget>('item-check', props.config)!)
+    const widget = computed(() => findWidget<ItemCheckWidget>('item-check', props.config)!)
 
     const selectedMatchers = computed(() => {
       return new Set(
diff --git a/src/web/settings/price-check.vue b/src/web/settings/price-check.vue
index d2fecd76..621172c0 100644
--- a/src/web/settings/price-check.vue
+++ b/src/web/settings/price-check.vue
@@ -98,14 +98,14 @@
 <script lang="ts">
 import { defineComponent, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { configModelValue, configProp, getWidgetConfig } from './utils'
+import { configModelValue, configProp, findWidget } from './utils'
 import type { PriceCheckWidget } from '@/web/overlay/interfaces'
 import * as Leagues from '../background/Leagues'
 
 export default defineComponent({
   props: configProp(),
   setup (props) {
-    const configWidget = computed(() => getWidgetConfig<PriceCheckWidget>('price-check', props.config)!)
+    const configWidget = computed(() => findWidget<PriceCheckWidget>('price-check', props.config)!)
 
     const { t } = useI18n()
 
diff --git a/src/web/settings/utils.ts b/src/web/settings/utils.ts
new file mode 100644
index 00000000..6a013f99
--- /dev/null
+++ b/src/web/settings/utils.ts
@@ -0,0 +1,31 @@
+import { computed } from 'vue'
+import type { PropType } from 'vue'
+import type { Config } from '@/ipc/types'
+import type { Widget } from '@/web/overlay/interfaces'
+
+export function configProp () {
+  return {
+    config: {
+      type: Object as PropType<Config>,
+      required: true as const
+    }
+  }
+}
+
+export function configModelValue<ObjectT extends object, KeyT extends keyof ObjectT> (
+  getObj: () => ObjectT,
+  key: KeyT
+) {
+  return computed<ObjectT[KeyT]>({
+    get () {
+      return getObj()[key]
+    },
+    set (value) {
+      getObj()[key] = value
+    }
+  })
+}
+
+export function findWidget<T extends Widget> (type: string, config: Config) {
+  return config.widgets.find(w => w.wmType === type) as T | undefined
+}