further separation of tabs

src/components/settings_modal/tabs/clutter_tab.js

@@ -0,0 +1,194 @@
+import { mapState, mapActions } from 'pinia'
+import { mapState as mapVuexState } from 'vuex'
+import { v4 as uuidv4 } from 'uuid';
+
+import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
+
+import BooleanSetting from '../helpers/boolean_setting.vue'
+import ChoiceSetting from '../helpers/choice_setting.vue'
+import UnitSetting from '../helpers/unit_setting.vue'
+import IntegerSetting from '../helpers/integer_setting.vue'
+import HelpIndicator from '../helpers/help_indicator.vue'
+import Checkbox from 'src/components/checkbox/checkbox.vue'
+import Select from 'src/components/select/select.vue'
+
+import SharedComputedObject from '../helpers/shared_computed_object.js'
+
+
+const ClutterTab = {
+  components: {
+    BooleanSetting,
+    ChoiceSetting,
+    UnitSetting,
+    IntegerSetting,
+    Checkbox,
+    Select,
+    HelpIndicator
+  },
+  computed: {
+    instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },
+    ...SharedComputedObject(),
+    ...mapState(
+      useServerSideStorageStore,
+      {
+        muteFilters: store => Object.entries(store.prefsStorage.simple.muteFilters),
+        muteFiltersObject: store => store.prefsStorage.simple.muteFilters
+      }
+    ),
+    ...mapVuexState({
+      blockExpirationSupported: state => state.instance.blockExpiration
+    }),
+    onMuteDefaultActionLv1: {
+      get () {
+        const value = this.$store.state.config.onMuteDefaultAction
+        if (value === 'ask' || value === 'forever') {
+          return value
+        } else {
+          return 'temporarily'
+        }
+      },
+      set (value) {
+        let realValue = value
+        if (value !== 'ask' && value !== 'forever') {
+          realValue = '14d'
+        }
+        this.$store.dispatch('setOption', { name: 'onMuteDefaultAction', value: realValue })
+      }
+    },
+    onBlockDefaultActionLv1: {
+      get () {
+        const value = this.$store.state.config.onBlockDefaultAction
+        if (value === 'ask' || value === 'forever') {
+          return value
+        } else {
+          return 'temporarily'
+        }
+      },
+      set (value) {
+        let realValue = value
+        if (value !== 'ask' && value !== 'forever') {
+          realValue = '14d'
+        }
+        this.$store.dispatch('setOption', { name: 'onBlockDefaultAction', value: realValue })
+      }
+    },
+    muteFiltersDraft () {
+      return Object.entries(this.muteFiltersDraftObject)
+    },
+    muteFiltersExpired () {
+      const now = Date.now()
+      return Object
+        .entries(this.muteFiltersDraftObject)
+        .filter(([, { expires }]) => expires != null && expires <= now)
+    }
+  },
+  methods: {
+    ...mapActions(useServerSideStorageStore, ['setPreference', 'unsetPreference', 'pushServerSideStorage']),
+    getDatetimeLocal (timestamp) {
+      const date = new Date(timestamp)
+      const fmt = new Intl.NumberFormat("en-US", {minimumIntegerDigits: 2})
+      const datetime = [
+        date.getFullYear(),
+        '-',
+        fmt.format(date.getMonth() + 1),
+        '-',
+        fmt.format(date.getDate()),
+        'T',
+        fmt.format(date.getHours()),
+        ':',
+        fmt.format(date.getMinutes())
+      ].join('')
+      return datetime
+    },
+    checkRegexValid (id) {
+      const filter = this.muteFiltersObject[id]
+      if (filter.type !== 'regexp') return true
+      if (filter.type !== 'user_regexp') return true
+      const { value } = filter
+      let valid = true
+      try {
+        new RegExp(value)
+      } catch {
+        valid = false
+        console.error('Invalid RegExp: ' + value)
+      }
+      return valid
+    },
+    createFilter (filter = {
+      type: 'word',
+      value: '',
+      name: 'New Filter',
+      enabled: true,
+      expires: null,
+      hide: false,
+    }) {
+      const newId = uuidv4()
+
+      filter.order = this.muteFilters.length + 2
+      this.muteFiltersDraftObject[newId] = filter
+      this.setPreference({ path: 'simple.muteFilters.' + newId , value: filter })
+      this.pushServerSideStorage()
+    },
+    exportFilter(id) {
+      this.exportedFilter = { ...this.muteFiltersDraftObject[id] }
+      delete this.exportedFilter.order
+      this.filterExporter.exportData()
+    },
+    importFilter() {
+      this.filterImporter.importData()
+    },
+    copyFilter (id) {
+      const filter = { ...this.muteFiltersDraftObject[id] }
+      const newId = uuidv4()
+
+      this.muteFiltersDraftObject[newId] = filter
+      this.setPreference({ path: 'simple.muteFilters.' + newId , value: filter })
+      this.pushServerSideStorage()
+    },
+    deleteFilter (id) {
+      delete this.muteFiltersDraftObject[id]
+      this.unsetPreference({ path: 'simple.muteFilters.' + id , value: null })
+      this.pushServerSideStorage()
+    },
+    purgeExpiredFilters () {
+      this.muteFiltersExpired.forEach(([id]) => {
+        console.log(id)
+        delete this.muteFiltersDraftObject[id]
+        this.unsetPreference({ path: 'simple.muteFilters.' + id , value: null })
+      })
+      this.pushServerSideStorage()
+    },
+    updateFilter(id, field, value) {
+      const filter = { ...this.muteFiltersDraftObject[id] }
+      if (field === 'expires-never') {
+        if (!value) {
+          const offset = 1000 * 60 * 60 * 24 * 14 // 2 weeks
+          const date = Date.now() + offset
+          filter.expires = date
+        } else {
+          filter.expires = null
+        }
+      } else if (field === 'expires') {
+        const parsed = Date.parse(value)
+        filter.expires = parsed.valueOf()
+      } else {
+        filter[field] = value
+      }
+      this.muteFiltersDraftObject[id] = filter
+      this.muteFiltersDraftDirty[id] = true
+    },
+    saveFilter(id) {
+      this.setPreference({ path: 'simple.muteFilters.' + id , value: this.muteFiltersDraftObject[id] })
+      this.pushServerSideStorage()
+      this.muteFiltersDraftDirty[id] = false
+    },
+  },
+  // Updating nested properties
+  watch: {
+    replyVisibility () {
+      this.$store.dispatch('queueFlushAll')
+    }
+  }
+}
+
+export default ClutterTab