From 1e7b6c24dfbb8d1c9debbd3f39dd2578a35c3db4 Mon Sep 17 00:00:00 2001
From: malkja <orlin.malkja@sub.uni-goettingen.de>
Date: Fri, 31 May 2024 13:46:20 +0200
Subject: [PATCH] refactor: use 'config' Pinia Store in different components,
 remove 'config' Vuex Module

---
 src/components/Notification.vue               |   2 -
 src/components/annotations/AnnotationIcon.vue |   1 +
 src/components/base/BaseCheckbox.vue          |   1 -
 src/components/base/BaseDropdown.vue          |   2 -
 src/components/header/Language.vue            |   2 -
 src/components/header/PanelsToggle.vue        |   2 -
 src/components/header/TitleBar.vue            |   4 +-
 src/components/header/Tools.vue               |   6 +-
 src/components/metadata/ItemMetadata.vue      |   5 +-
 src/components/metadata/ManifestMetadata.vue  |   5 +-
 src/components/metadata/MetadataItem.vue      |   2 +-
 src/components/metadata/MetadataView.vue      |   6 +-
 src/components/panels/Panel.vue               |   4 +-
 src/components/panels/PanelsWrapper.vue       |   2 -
 src/store/config/actions.js                   | 376 ------------------
 src/store/config/getters.js                   |  26 --
 src/store/config/index.js                     |  12 -
 src/store/config/mutations.js                 |  31 --
 src/store/config/state.js                     | 137 -------
 src/store/index.js                            |   2 -
 src/stores/config.ts                          | 121 +++---
 src/types.d.ts                                | 113 ------
 22 files changed, 80 insertions(+), 782 deletions(-)
 delete mode 100644 src/store/config/actions.js
 delete mode 100644 src/store/config/getters.js
 delete mode 100644 src/store/config/index.js
 delete mode 100644 src/store/config/mutations.js
 delete mode 100644 src/store/config/state.js

diff --git a/src/components/Notification.vue b/src/components/Notification.vue
index 7b6c52e1..742cd92f 100644
--- a/src/components/Notification.vue
+++ b/src/components/Notification.vue
@@ -17,7 +17,6 @@
 
 <script setup>
 import { computed } from 'vue';
-import { useStore } from 'vuex';
 import { useConfigStore } from '@/stores/config';
 import BaseIcon from '@/components/base/BaseIcon.vue';
 
@@ -32,7 +31,6 @@ const props = defineProps({
     default: () => '',
   },
 });
-const store = useStore();
 const configStore = useConfigStore()
 
 const config = computed(() => configStore.config);     
diff --git a/src/components/annotations/AnnotationIcon.vue b/src/components/annotations/AnnotationIcon.vue
index 8680e892..8a7e3990 100644
--- a/src/components/annotations/AnnotationIcon.vue
+++ b/src/components/annotations/AnnotationIcon.vue
@@ -12,6 +12,7 @@ import BaseIcon from '@/components/base/BaseIcon.vue';
 interface Props {
   name: string
 }
+
 const props = defineProps<Props>()
 
 </script>
diff --git a/src/components/base/BaseCheckbox.vue b/src/components/base/BaseCheckbox.vue
index 59116499..654dbff3 100644
--- a/src/components/base/BaseCheckbox.vue
+++ b/src/components/base/BaseCheckbox.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import Checkbox from 'primevue/checkbox'
-import TriStateCheckbox from 'primevue/tristatecheckbox'
 import { getIcon } from '@/utils/icons';
 
 const props = withDefaults(defineProps<{
diff --git a/src/components/base/BaseDropdown.vue b/src/components/base/BaseDropdown.vue
index c0af42dd..52b4c49a 100644
--- a/src/components/base/BaseDropdown.vue
+++ b/src/components/base/BaseDropdown.vue
@@ -17,14 +17,12 @@
 
 <script setup>
 import { computed, watch } from 'vue';
-import { useStore } from 'vuex';
 import { useConfigStore } from '@/stores/config';
 
 import BaseButton from '@/components/base/BaseButton.vue';
 
 const props = defineProps(['modelValue', 'buttonText']);
 const emit = defineEmits(['update:modelValue']);
-const store = useStore();
 const configStore = useConfigStore()
 const container = computed(() => configStore.config.container);
 
diff --git a/src/components/header/Language.vue b/src/components/header/Language.vue
index cae2f54e..57caa7fc 100644
--- a/src/components/header/Language.vue
+++ b/src/components/header/Language.vue
@@ -21,7 +21,6 @@
 import {
   computed, onMounted, ref, watch,
 } from 'vue';
-import { useStore } from 'vuex';
 import { useConfigStore } from '@/stores/config';
 import { useI18n } from 'vue-i18n';
 import BaseDropdown from '@/components/base/BaseDropdown.vue';
@@ -31,7 +30,6 @@ interface Language {
   value: string
 }
 
-const store = useStore();
 const configStore = useConfigStore()
 const { locale: i18nLocale } = useI18n();
 
diff --git a/src/components/header/PanelsToggle.vue b/src/components/header/PanelsToggle.vue
index 7b4657b2..5acf0041 100644
--- a/src/components/header/PanelsToggle.vue
+++ b/src/components/header/PanelsToggle.vue
@@ -57,7 +57,6 @@
 
 <script setup>
 import { computed, ref, watch } from 'vue';
-import { useStore } from 'vuex';
 import { useI18n } from 'vue-i18n';
 import { isMobile } from '@/utils/is-mobile';
 import BaseCheckbox from '@/components/base/BaseCheckbox.vue';
@@ -65,7 +64,6 @@ import BaseButton from '@/components/base/BaseButton.vue';
 import BaseDropdown from '@/components/base/BaseDropdown.vue';
 import { useConfigStore } from '@/stores/config';
 
-const store = useStore();
 const configStore = useConfigStore()
 const { t } = useI18n();
 
diff --git a/src/components/header/TitleBar.vue b/src/components/header/TitleBar.vue
index 53204dfe..70e8d972 100644
--- a/src/components/header/TitleBar.vue
+++ b/src/components/header/TitleBar.vue
@@ -36,6 +36,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useStore } from 'vuex';
+import { useConfigStore } from '@/stores/config';
 import BaseIcon from '@/components/base/BaseIcon.vue';
 
 
@@ -48,10 +49,11 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const store = useStore();
+const configStore = useConfigStore()
 
 const collectionTitle = computed<string | null>(() => store.getters['contents/collectionTitle']);
 const manifestTitle = computed<string | undefined>(() => store.getters['contents/manifest']?.label);
-const labels = computed<Labels>(() => store.getters['config/config'].labels || {
+const labels = computed<Labels>(() => configStore.config.labels || {
   manifest: 'manifest',
   item: 'item',
 });
diff --git a/src/components/header/Tools.vue b/src/components/header/Tools.vue
index a240c0a9..9e1e204d 100644
--- a/src/components/header/Tools.vue
+++ b/src/components/header/Tools.vue
@@ -8,14 +8,14 @@
 
 <script setup>
 import { computed } from 'vue';
-import { useStore } from 'vuex';
+import { useConfigStore } from '@/stores/config';
 import SoftwareInfo from '@/components/header/SoftwareInfo.vue';
 import Language from '@/components/header/Language.vue';
 import DarkModeToggle from '@/components/header/DarkModeToggle.vue';
 
-const store = useStore();
+const configStore = useConfigStore()
 
-const config = computed(() => store.getters['config/config']);
+const config = computed(() => configStore.config);
 const showLanguageSwitch = computed(() => (config.value?.header?.languageSwitch !== undefined
   ? config.value.header.languageSwitch
   : true));
diff --git a/src/components/metadata/ItemMetadata.vue b/src/components/metadata/ItemMetadata.vue
index ff9089c7..a5cba911 100644
--- a/src/components/metadata/ItemMetadata.vue
+++ b/src/components/metadata/ItemMetadata.vue
@@ -11,15 +11,18 @@
 
 import { computed } from 'vue';
 import { useStore } from 'vuex';
+import { useConfigStore } from '@/stores/config';
+
 import MetadataItem from '@/components/metadata/MetadataItem.vue';
 
 const store = useStore();
+const configStore = useConfigStore()
 
 const item = computed<Item>(() => store.getters['contents/item']);
 const itemUrl = computed<string>(() => store.getters['contents/itemUrl']);
 const manifest = computed<Manifest>(() => store.getters['contents/manifest']);
 const itemsCount = computed<number>(() => manifest.value?.sequence.length);
-const labels = computed<Labels>(() => store.getters['config/config'].labels);
+const labels = computed<Labels>(() => configStore.config.labels);
 const number = computed<number>(() => (manifest.value ? manifest.value.sequence.findIndex(({ id }) => id === itemUrl.value) + 1 : 1));
 const total = computed<number>(() => itemsCount.value ?? 1);
 const metadata = computed(() => (
diff --git a/src/components/metadata/ManifestMetadata.vue b/src/components/metadata/ManifestMetadata.vue
index 433687ca..b91e4d2c 100644
--- a/src/components/metadata/ManifestMetadata.vue
+++ b/src/components/metadata/ManifestMetadata.vue
@@ -11,17 +11,20 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useStore } from 'vuex';
+import { useConfigStore } from '@/stores/config';
+
 import MetadataItem from '@/components/metadata/MetadataItem.vue';
 import Actor from '@/components/metadata/Actor.vue';
 
 const store = useStore();
+const configStore = useConfigStore()
 
 const manifest = computed<Manifest>(() => store.getters['contents/manifest']);
 const manifests = computed<Manifest[]>(() => store.getters['contents/manifests']);
 const manifestHasItems = computed<boolean>(() => manifest.value?.sequence.length > 0);
 const number = computed<number>(() => (manifests.value !== null ? manifests.value.findIndex(({ id }) => id === manifest.value.id) + 1 : 1));
 const total = computed<number>(() => (manifests.value !== null ? manifests.value.length : 1));
-const labels = computed<Labels>(() => store.getters['config/config'].labels);
+const labels = computed<Labels>(() => configStore.config.labels);
 const metadata = computed(() => {
   if (!manifest.value) return [];
   return [
diff --git a/src/components/metadata/MetadataItem.vue b/src/components/metadata/MetadataItem.vue
index 1689d890..74636743 100644
--- a/src/components/metadata/MetadataItem.vue
+++ b/src/components/metadata/MetadataItem.vue
@@ -19,7 +19,7 @@ const props = defineProps<{
 }>();
 
 const label = computed<string>(() => props.item?.key || 'other');
-const childItems = computed(<Metadata>() => props.item?.metadata || []);
+const childItems = computed<Metadata>(() => props.item?.metadata || []);
 
 function isLink(): boolean {
   const regex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/ig;
diff --git a/src/components/metadata/MetadataView.vue b/src/components/metadata/MetadataView.vue
index 8b3f4be9..d26f1ea8 100644
--- a/src/components/metadata/MetadataView.vue
+++ b/src/components/metadata/MetadataView.vue
@@ -7,8 +7,7 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
-import { useStore } from 'vuex';
+
 import CollectionMetadata from '@/components/metadata/CollectionMetadata.vue';
 import ManifestMetadata from '@/components/metadata/ManifestMetadata.vue';
 import ItemMetadata from '@/components/metadata/ItemMetadata.vue';
@@ -17,7 +16,4 @@ const props = defineProps({
   options: Object,
 });
 
-const store = useStore();
-
-const config = computed(() => store.getters['config/config']);
 </script>
diff --git a/src/components/panels/Panel.vue b/src/components/panels/Panel.vue
index 104bffc0..bed3c1eb 100644
--- a/src/components/panels/Panel.vue
+++ b/src/components/panels/Panel.vue
@@ -95,6 +95,7 @@ import {
   computed, nextTick, ref, watch,
 } from 'vue';
 import { useStore } from 'vuex';
+import { useConfigStore } from '@/stores/config';
 import { useI18n } from 'vue-i18n';
 import TabView from 'primevue/tabview';
 import TabPanel from 'primevue/tabpanel';
@@ -136,6 +137,7 @@ export default {
   },
   setup(props, { emit }) {
     const store = useStore();
+    const configStore = useConfigStore()
     const { t } = useI18n();
 
     const tabs = ref([]);
@@ -317,7 +319,7 @@ export default {
         [contentItem] = item.value.content;
         // TODO: this should be moved to loading time in order dynamically recognize all content types
         //  instead of only the first one
-        store.dispatch('config/setContentType', contentItem.type.split('type=')[1]);
+        configStore.setContentType(contentItem.type.split('type=')[1]);
       }
 
       contentItem = item.value.content.find((c) => c.type.split('type=')[1] === type);
diff --git a/src/components/panels/PanelsWrapper.vue b/src/components/panels/PanelsWrapper.vue
index 72a5af94..49645dd5 100644
--- a/src/components/panels/PanelsWrapper.vue
+++ b/src/components/panels/PanelsWrapper.vue
@@ -15,12 +15,10 @@
 <script setup>
 
 import { computed } from 'vue';
-import { useStore } from 'vuex';
 import { useConfigStore } from '@/stores/config';
 
 import Panel from '@/components/panels/Panel.vue';
 
-const store = useStore();
 const configStore = useConfigStore()
 
 
diff --git a/src/store/config/actions.js b/src/store/config/actions.js
deleted file mode 100644
index a5771986..00000000
--- a/src/store/config/actions.js
+++ /dev/null
@@ -1,376 +0,0 @@
-import messages from 'src/i18n';
-import { isUrl } from '@/utils';
-import BookmarkService from '@/services/bookmark';
-import { i18n } from '@/i18n';
-
-const defaultPanel = {
-  label: 'Panel',
-  show: true,
-  toggle: true,
-  views: [],
-};
-
-const defaultView = {
-  id: 'view',
-  name: 'View',
-  default: false,
-  connector: {
-    id: 1,
-    options: {},
-  },
-};
-
-function validateCollection(value) {
-  return !!(value);
-}
-
-function validateManifest(value) {
-  return !!(value);
-}
-
-function validateItem(value) {
-  return !!(value);
-}
-
-function validateTranslations(value) {
-  return !!(value) && Object.keys(value).every((key) => key === 'en' || key === 'de');
-}
-
-function validatePanels(value) {
-  return !!(value) && Array.isArray(value);
-}
-
-function validateLang(value) {
-  return !!(value);
-}
-
-function validateColors(value) {
-  return !!(value);
-}
-
-function validateContainer(value) {
-  return !!(value);
-}
-
-function validateHeader(value, defaultValue) {
-  if (!value) return false;
-
-  const defaultKeys = Object.keys(defaultValue);
-  const invalidKeys = Object.keys(value)
-    .filter((key) => defaultKeys.findIndex((defaultKey) => defaultKey === key) === -1);
-  return invalidKeys.length === 0;
-}
-
-function validateLabels(labels, validLabels) {
-  // valid labels are the labels from the default config
-  // we consider the custom labels, in the case when all the keys have a value, otherwise we would have the button with empty text i.e for the following scenario
-  // when the item is ''
-  if (!labels || !validLabels) return false;
-
-  let isValid = true;
-  Object.keys(labels).forEach((key) => {
-    if (!(key in validLabels) || labels[key] === '') {
-      isValid = false;
-    }
-  });
-
-  return isValid;
-}
-
-function createDefaultActiveViews(panelsConfig) {
-  return panelsConfig
-    .filter((p) => p.views && p.views.length > 0)
-    .map((panel) => {
-      const defaultIndex = panel.views.findIndex((view) => view.default === true);
-      return defaultIndex > -1 ? defaultIndex : 0;
-    })
-    .reduce((acc, cur, i) => {
-      acc[i] = cur;
-      return acc;
-    }, {});
-}
-
-// URL Config
-function splitUrlParts(urlQuery, attributes) {
-  if (urlQuery === '') {
-    return [undefined, undefined, undefined, undefined];
-  }
-  const arrayAttributes = urlQuery.split('_');
-  const manifestPart = arrayAttributes.find((element) => element[0].includes(attributes[0])); // index of manifest part in the splitted array: element[0] is 'm' the first letter of the part ?
-  const itemPart = arrayAttributes.find((element) => element[0].includes(attributes[1]));
-  const panelsPart = arrayAttributes.find((element) => element[0].includes(attributes[2]));
-  const showPart = arrayAttributes.find((element) => element[0].includes(attributes[3]));
-  return [manifestPart, itemPart, panelsPart, showPart];
-}
-
-function isManifestPartValid(manifestPart) {
-  const regexManifest = /m\d+$/;
-  return regexManifest.exec(manifestPart) !== null;
-}
-
-function isItemPartValid(itemPart) {
-  const regexItem = /i\d+$/;
-  return regexItem.exec(itemPart) !== null;
-}
-
-function isPanelsPartValid(panelsPart, panelsValue, numberPanels) {
-  const numbersPartArray = panelsValue.split('-');
-  const regexNumber = /^\d+$/;
-  if (panelsPart[0] !== 'p' || numbersPartArray.length !== numberPanels) {
-    return false;
-  }
-
-  for (let i = 0; i < numbersPartArray.length; i++) {
-    const panelTabPair = numbersPartArray[i];
-    if (panelTabPair.length !== 3
-      || regexNumber.test(panelTabPair[0]) === false
-      || regexNumber.test(panelTabPair[2]) === false
-      || panelTabPair[1] !== '.') {
-      return false;
-    }
-  }
-  return true;
-}
-
-function isShowPartValid(showValue, numberPanels) {
-  const showValueAsArray = showValue.split('-');
-  const regexNumbersPart = /\d\-/;
-  if (showValueAsArray.length > numberPanels) {
-    return false;
-  }
-  for (let i = 0; i < showValueAsArray.length - 1; i++) {
-    // if s0-2 is given and there are in total 4 panels, then it is still fine, since we can show less number of panels than the total one
-    // match the couples of (d-) -> a digit followed by a "-" character. In total there are (s.length - 1) - so number of panels we want to open - 1
-    const groupMatch = showValue.slice(i * 2, i * 2 + 2).match(regexNumbersPart);
-    if (groupMatch === null) {
-      return false;
-    }
-  }
-  const lastNumberString = showValue.slice(-1)[0];
-  const lastNumberInt = parseInt(lastNumberString, 10);
-  // last character must have only digits and not be greater than number of max panels
-  if (/^\d+$/.test(lastNumberString) === false || (lastNumberInt >= numberPanels || lastNumberInt < 0)) {
-    return false;
-  }
-  return true;
-}
-
-function createDefaultPanelValue(numberPanels) {
-  // get the number of panels and then create as many couples of (panel_index.0) until n_panels-1, the last couple need not have the '-' symbol
-  let p = '';
-  for (let j = 0; j < numberPanels; j++) {
-    if (j !== numberPanels - 1) {
-      p += `${j}.0-`;
-    } else {
-      p += `${j}.0`;
-    }
-  }
-  return p;
-}
-
-function createActiveViewsFromPanelsArray(panelsArray) {
-  // converts 'panelsArray' to an object with key, value: 'panel index: visible tab index'
-  return panelsArray.reduce((acc, cur) => {
-    // eslint-disable-next-line no-shadow
-    const [panelIndex, viewIndex] = cur.split('.').map((i) => parseInt(i, 10));
-    acc[panelIndex] = viewIndex;
-    return acc;
-  }, {});
-}
-
-function discoverCustomConfig(customConfig, defaultConfig) {
-  const {
-    container, translations, collection, manifest, item, panels, lang, colors, header, labels
-  } = customConfig;
-
-  return {
-    ...(validateContainer(container) && { container }),
-    ...(validateCollection(collection) && { collection }),
-    ...(validateManifest(manifest) && { manifest }),
-    ...(validateItem(item) && { item }),
-    ...(validateTranslations(translations) && { translations }),
-    ...(validatePanels(panels) && { panels }),
-    ...(validateLang(lang) && { lang }),
-    ...(validateColors(colors) && { colors }),
-    ...(validateHeader(header, defaultConfig.header) && { header }),
-    ...(validateLabels(labels, defaultConfig.labels) && { labels }),
-  };
-}
-
-function discoverUrlConfig(config) {
-  // split the url based on '_'
-  // get the part of attribute: get the attribute name and the value based on the type of attribute
-  // add each attribute to UrlConfig as key value
-  let urlConfig = {};
-  const urlQuery = BookmarkService.getQuery();
-  const attributes = ['m', 'i', 'p', 's'];
-  // values of manifest, item Indices ...
-  let [m, i, p, s] = [undefined, undefined, undefined, undefined];
-  const numberPanels = config.panels ? config.panels.length : 0;
-  const [manifestPart, itemPart, panelsPart, showPart] = splitUrlParts(urlQuery, attributes);
-  /*
-  if (isUrl(item)) urlConfig.item = item;
-  if (isUrl(manifest)) urlConfig.manifest = manifest;
-  if (isUrl(collection)) urlConfig.collection = collection;
-  */
-  // here we will validate for the structure of each component:, not their value range
-  if (manifestPart !== undefined) {
-    if (!isManifestPartValid(manifestPart)) {
-      throw new Error(i18n.global.t('error_manifestpart_tido_url'));
-    } else {
-      urlConfig.m = parseInt(manifestPart.slice(1), 10);
-    }
-  }
-  if (itemPart !== undefined) {
-    if (!isItemPartValid(itemPart)) {
-      throw new Error(i18n.global.t('error_itempart_tido_url'));
-    } else {
-      urlConfig.i = parseInt(itemPart.slice(1), 10);
-    }
-  }
-  if (panelsPart !== undefined) {
-    const panelsValue = panelsPart.slice(1);
-    if (!isPanelsPartValid(panelsPart, panelsValue, numberPanels)) {
-      throw new Error(i18n.global.t('error_panelspart_tido_url'));
-    } else {
-      p = panelsValue;
-    }
-  } else {
-    p = createDefaultPanelValue(numberPanels);
-  }
-  const panelsArray = p !== '' ? p.split('-') : [];
-  urlConfig.activeViews = createActiveViewsFromPanelsArray(panelsArray);
-
-  if (showPart !== undefined) {
-    const showValue = showPart.slice(1);
-    if (!isShowPartValid(showValue, numberPanels)) {
-      throw new Error(i18n.global.t('error_showpart_tido_url'));
-    } else {
-      // showValue needs to be an array of opened panel indices (Integers)
-      s = showValue.split('-').map(Number);
-    }
-  }
-  if (s === undefined) {
-    // If 's' is not given in URL, then we open all the panels which are given in config
-    urlConfig.show = Array.from({ length: numberPanels }, (value, index) => index);
-  } else {
-    urlConfig.show = s;
-  }
-  return urlConfig;
-}
-
-function discoverDefaultConfig(config) {
-  return {
-    ...JSON.parse(JSON.stringify(config)),
-    activeViews: createDefaultActiveViews(config.panels),
-  };
-}
-
-export const load = ({ commit, getters, dispatch }, config) => {
-  const customConfig = discoverCustomConfig(config, getters.config);
-  const urlConfig = discoverUrlConfig(config);
-  const defaultConfig = discoverDefaultConfig(getters.config);
-
-  const header = {
-    ...defaultConfig.header,
-    ...customConfig.header,
-  };
-
-  if (customConfig.panels) {
-    // If the custom config provide panels config, we still need to check if it's valid.
-    // Here we enhance the potentially missing parts with default panel/view config.
-    // Hint: Not to confuse with the "defaultConfig" which provides an out-of-the-box panels setup
-
-    customConfig.panels = customConfig.panels.map((panel) => {
-      if (panel.views) {
-        panel.views = panel.views.map((view) => ({
-          ...defaultView,
-          ...view,
-        }));
-      }
-
-      return {
-        ...defaultPanel,
-        ...panel,
-      };
-    });
-  }
-
-  const resultConfig = {
-    ...defaultConfig,
-    ...customConfig,
-    ...urlConfig,
-    header,
-  };
-
-  const activeViews = urlConfig.activeViews || defaultConfig.activeViews;
-  commit('setActiveViews', activeViews);
-
-  if (resultConfig.show && resultConfig.show.length > 0) {
-    // Set visible panels
-    // First hide all
-    resultConfig.panels.map((panel, i) => resultConfig.panels[i].show = false);
-
-    // Next show configured
-    resultConfig.show.forEach((panelIndex) => {
-      if (!Number.isInteger(panelIndex)) return;
-      const panel = resultConfig.panels[panelIndex];
-      if (!panel) return;
-
-      resultConfig.panels[panelIndex].show = true;
-    });
-  }
-
-  if (resultConfig.translations) {
-    const locales = Object.keys(resultConfig.translations);
-
-    locales.forEach((locale) => {
-      i18n.global.setLocaleMessage(locale, { ...(messages[locale] ? messages[locale] : {}), ...resultConfig.translations[locale] });
-    });
-  }
-  commit('setConfig', resultConfig);
-
-  if (urlConfig.activeViews) commit('setActiveViews', activeViews);
-  else dispatch('setDefaultActiveViews', false);
-};
-
-export const setActivePanelView = async ({ commit, getters }, { panelIndex, viewIndex }) => {
-  commit('setActivePanelView', { panelIndex, viewIndex });
-  await BookmarkService.updatePanels(getters.activeViews);
-};
-
-export const setShowPanel = ({ commit, getters }, { index, show }) => {
-  commit('setShowPanel', { index, show });
-
-  let panelIndexes = getters.config.panels.reduce((acc, cur, i) => (cur.show ? [...acc, i] : acc), []);
-  if (panelIndexes.length === getters.config.panels.length) panelIndexes = [];
-
-  BookmarkService.updateShow(panelIndexes);
-};
-
-export const setContentType = ({ commit, getters }, type) => {
-  const { config } = getters;
-  const newConfig = { ...config };
-
-  newConfig.panels[3].views[0].connector.options = { type };
-  commit('setConfig', newConfig);
-};
-
-export const setDefaultActiveViews = async ({ commit, getters }, bookmark = true) => {
-  const { config } = getters;
-  const activeViews = [];
-
-  config.panels.forEach(({ views }, panelIndex) => {
-    let defaultViewIndex = views.findIndex((view) => !!(view.default));
-    if (defaultViewIndex === -1) defaultViewIndex = 0;
-    activeViews[panelIndex] = defaultViewIndex;
-  });
-
-  if (bookmark) await BookmarkService.updatePanels(activeViews);
-
-  commit('config/setActiveViews', activeViews, { root: true });
-};
-
-export const setInstanceId = ({ commit }, id) => {
-  commit('config/setInstanceId', id);
-};
diff --git a/src/store/config/getters.js b/src/store/config/getters.js
deleted file mode 100644
index 229ad806..00000000
--- a/src/store/config/getters.js
+++ /dev/null
@@ -1,26 +0,0 @@
-export const config = (state) => state.config;
-
-export const activeViews = (state) => state.activeViews;
-
-// eslint-disable-next-line no-shadow
-export const activeContentType = ({ config, activeViews }) => {
-  const contentConnectorId = 4;
-  const panelIndex = config.panels.findIndex(({ views }) => views.find(({ connector }) => contentConnectorId === connector.id));
-
-  if (panelIndex === -1) return -1;
-
-  const viewIndex = activeViews[panelIndex];
-  return config.panels[panelIndex].views[viewIndex].connector.options.type;
-};
-
-// eslint-disable-next-line no-shadow
-export const getIconByType = ({ config, activeViews }) => (type) => {
-  const annotationsConnectorId = 5;
-  const panelIndex = config.panels.findIndex(({ views }) => views.find(({ connector }) => annotationsConnectorId === connector.id));
-
-  if (panelIndex === -1) return -1;
-
-  const viewIndex = activeViews[panelIndex];
-  const types = config.panels[panelIndex].views[viewIndex].connector.options?.types;
-  return types.find(({ name }) => name === type)?.icon || 'biPencilSquare';
-};
diff --git a/src/store/config/index.js b/src/store/config/index.js
deleted file mode 100644
index b0beb1b9..00000000
--- a/src/store/config/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import state from './state';
-import * as getters from './getters';
-import * as mutations from './mutations';
-import * as actions from './actions';
-
-export default {
-  namespaced: true,
-  state,
-  getters,
-  mutations,
-  actions,
-};
diff --git a/src/store/config/mutations.js b/src/store/config/mutations.js
deleted file mode 100644
index 3119ddc3..00000000
--- a/src/store/config/mutations.js
+++ /dev/null
@@ -1,31 +0,0 @@
-export const setConfig = (state, payload) => {
-  state.config = payload;
-};
-
-export const setActivePanelView = (state, { panelIndex, viewIndex }) => {
-  const { activeViews } = state;
-  if (activeViews[panelIndex] !== undefined) {
-    activeViews[panelIndex] = viewIndex;
-  }
-};
-
-export const setPanels = (state, panels) => {
-  state.config.panels = panels;
-};
-
-export const setShowPanel = (state, { index, show }) => {
-  state.config.panels[index].show = show;
-};
-
-export const loadConfig = (state, { config, isValid }) => {
-  state.config = config;
-  state.isValid = isValid;
-};
-
-export const setActiveViews = (state, payload) => {
-  state.activeViews = payload;
-};
-
-export const setInstanceId = (state, payload) => {
-  state.instanceId = payload;
-};
diff --git a/src/store/config/state.js b/src/store/config/state.js
deleted file mode 100644
index 96900b5b..00000000
--- a/src/store/config/state.js
+++ /dev/null
@@ -1,137 +0,0 @@
-export default function ConfigState() {
-  return {
-    instanceId: null,
-    config: {
-      container: '#app',
-      collection: '',
-      manifest: '',
-      item: '',
-      panels: [
-        {
-          label: 'contents',
-          toggle: true,
-          show: true,
-          views: [
-            {
-              id: 'tree',
-              label: 'contents',
-              connector: {
-                id: 1,
-                options: {
-                  labels: {
-                    item: 'Sheet',
-                    manifest: 'Manuscript',
-                  },
-                },
-              },
-            },
-          ],
-        },
-        {
-          label: 'metadata',
-          show: true,
-          toggle: true,
-          views: [
-            {
-              id: 'metadata',
-              label: 'metadata',
-              connector: {
-                id: 2,
-                options: {
-                  collection: {
-                    all: true,
-                  },
-                  manifest: {
-                    all: true,
-                  },
-                  item: {
-                    all: true,
-                  },
-                },
-              },
-            },
-          ],
-        },
-        {
-          label: 'image',
-          show: true,
-          toggle: true,
-          views: [
-            {
-              id: 'image',
-              label: 'Image',
-              connector: {
-                id: 3,
-              },
-            }],
-        },
-        {
-          label: 'text',
-          show: true,
-          toggle: true,
-          views: [
-            {
-              id: 'text1',
-              label: 'Transcription',
-              default: true,
-              connector: {
-                id: 4,
-              },
-            },
-          ],
-        },
-        {
-          label: 'annotations',
-          show: true,
-          toggle: true,
-          views: [
-            {
-              id: 'annotations1',
-              label: 'annotations',
-              connector: {
-                id: 5,
-                options: {
-                  types: [],
-                },
-              },
-            },
-          ],
-        },
-      ],
-      colors: {
-        forceMode: 'none',
-        primary: '',
-        secondary: '',
-        accent: '',
-      },
-      header: {
-        show: true,
-        navigation: true,
-        panelsToggle: true,
-        languageSwitch: false,
-      },
-      labels: {
-        item: 'Sheet',
-        manifest: 'Manuscript',
-      },
-      lang: 'en',
-      meta: {
-        collection: {
-          all: true,
-        },
-        manifest: {
-          all: true,
-        },
-        item: {
-          all: true,
-        },
-      },
-      notificationColors: {
-        info: 'blue-400',
-        warning: 'red-400',
-      },
-    },
-    activeViews: [],
-    isValid: false,
-  };
-}
diff --git a/src/store/index.js b/src/store/index.js
index ba610719..eb35387f 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,13 +1,11 @@
 import { createStore } from 'vuex';
 
 import annotations from './annotations';
-import config from './config';
 import contents from './contents';
 
 export default createStore({
   modules: {
     annotations,
-    config,
     contents,
   },
 });
diff --git a/src/stores/config.ts b/src/stores/config.ts
index a81a7228..8f01433e 100644
--- a/src/stores/config.ts
+++ b/src/stores/config.ts
@@ -4,14 +4,13 @@ import {
   } from 'vue';
 
 import messages from 'src/i18n';
-import { isUrl } from '@/utils';
 import BookmarkService from '@/services/bookmark';
 import { i18n } from '@/i18n';
 
   export const useConfigStore = defineStore('config', () => {
      // States ('Setup Pinia': refs)
-     const instanceId = ref<number>(null)
-     const config = ref<Config>({
+     const instanceId = ref(null)
+     const config = ref({
         container: '#app',
         collection: '',
         manifest: '',
@@ -193,7 +192,7 @@ import { i18n } from '@/i18n';
         config.value = payload;
      }
 
-    async function setActivePanelView(viewIndex: number, panelIndex: number) {
+    async function setActivePanelView(viewIndex, panelIndex) {
         if(activeViews.value[panelIndex] !== undefined) {
             activeViews.value[panelIndex] = viewIndex;
         }
@@ -204,7 +203,7 @@ import { i18n } from '@/i18n';
         config.value.panels = panels;
     }  
       
-    function setShowPanelSetter(index: number, show: boolean) {
+    function setShowPanelSetter(index, show) {
         config.value.panels[index].show = show;
     } 
       
@@ -217,69 +216,69 @@ import { i18n } from '@/i18n';
         activeViews.value = payload;
     }
       
-     function setInstanceId(payload) {
+    function setInstanceId(payload) {
         instanceId.value = payload;
-     }
+    }
       
      // Actions to functions
 
 
-     function validateCollection(value) {
-        return !!(value);
-      }
-      
-      function validateManifest(value) {
+    function validateCollection(value) {
         return !!(value);
       }
       
-      function validateItem(value) {
-        return !!(value);
-      }
-      
-      function validateTranslations(value) {
-        return !!(value) && Object.keys(value).every((key) => key === 'en' || key === 'de');
-      }
-      
-      function validatePanels(value) {
-        return !!(value) && Array.isArray(value);
-      }
-      
-      function validateLang(value) {
-        return !!(value);
-      }
-      
-      function validateColors(value) {
-        return !!(value);
-      }
-      
-      function validateContainer(value) {
-        return !!(value);
-      }
+    function validateManifest(value) {
+      return !!(value);
+    }
       
-      function validateHeader(value, defaultValue) {
-        if (!value) return false;
+    function validateItem(value) {
+      return !!(value);
+    }
       
-        const defaultKeys = Object.keys(defaultValue);
-        const invalidKeys = Object.keys(value)
-          .filter((key) => defaultKeys.findIndex((defaultKey) => defaultKey === key) === -1);
-        return invalidKeys.length === 0;
-      }
+    function validateTranslations(value) {
+      return !!(value) && Object.keys(value).every((key) => key === 'en' || key === 'de');
+    }
       
-      function validateLabels(labels, validLabels: Labels) {
-        // valid labels are the labels from the default config
-        // we consider the custom labels, in the case when all the keys have a value, otherwise we would have the button with empty text i.e for the following scenario
-        // when the item is ''
-        if (!labels || !validLabels) return false;
+    function validatePanels(value) {
+      return !!(value) && Array.isArray(value);
+    }
+    
+    function validateLang(value) {
+      return !!(value);
+    }
+    
+    function validateColors(value) {
+      return !!(value);
+    }
       
-        let isValid = true;
-        Object.keys(labels).forEach((key) => {
-          if (!(key in validLabels) || labels[key] === '') {
-            isValid = false;
-          }
-        });
+    function validateContainer(value) {
+      return !!(value);
+    }
+    
+    function validateHeader(value, defaultValue) {
+      if (!value) return false;
+    
+      const defaultKeys = Object.keys(defaultValue);
+      const invalidKeys = Object.keys(value)
+        .filter((key) => defaultKeys.findIndex((defaultKey) => defaultKey === key) === -1);
+      return invalidKeys.length === 0;
+    }
       
-        return isValid;
-      }
+    function validateLabels(labels, validLabels: Labels) {
+      // valid labels are the labels from the default config
+      // we consider the custom labels, in the case when all the keys have a value, otherwise we would have the button with empty text i.e for the following scenario
+      // when the item is ''
+      if (!labels || !validLabels) return false;
+    
+      let isValid = true;
+      Object.keys(labels).forEach((key) => {
+        if (!(key in validLabels) || labels[key] === '') {
+          isValid = false;
+        }
+      });
+    
+      return isValid;
+    }
       
       function createDefaultActiveViews(panelsConfig) {
         return panelsConfig
@@ -297,7 +296,7 @@ import { i18n } from '@/i18n';
 
     // URL Config
 
-    function splitUrlParts(urlQuery: string, attributes: Array<string>): Array<string| undefined> {
+    function splitUrlParts(urlQuery, attributes) {
         if (urlQuery === '') {
         return [undefined, undefined, undefined, undefined];
         }
@@ -309,12 +308,12 @@ import { i18n } from '@/i18n';
         return [manifestPart, itemPart, panelsPart, showPart];
     }
     
-    function isManifestPartValid(manifestPart: string): boolean {
+    function isManifestPartValid(manifestPart) {
         const regexManifest = /m\d+$/;
         return regexManifest.exec(manifestPart) !== null;
     }
 
-    function isItemPartValid(itemPart: string): boolean {
+    function isItemPartValid(itemPart) {
         const regexItem = /i\d+$/;
         return regexItem.exec(itemPart) !== null;
     }
@@ -373,7 +372,7 @@ import { i18n } from '@/i18n';
           }
         }
         return p;
-      }
+    }
 
     function createActiveViewsFromPanelsArray(panelsArray) {
         // converts 'panelsArray' to an object with key, value: 'panel index: visible tab index'
@@ -385,7 +384,7 @@ import { i18n } from '@/i18n';
         }, {});
     }
 
-    function discoverCustomConfig(customConfig, defaultConfig) {
+    function discoverCustomConfig(customConfig, defaultConfig)  {
         const {
           container, translations, collection, manifest, item, panels, lang, colors, header, labels
         } = customConfig;
@@ -478,7 +477,7 @@ import { i18n } from '@/i18n';
         const urlConfig = discoverUrlConfig(custConfig);
         const defaultConfig = discoverDefaultConfig(config.value);
       
-        const header = {
+        const header: Header = {
           ...defaultConfig.header,
           ...customConfig.header,
         };
diff --git a/src/types.d.ts b/src/types.d.ts
index 78ccb655..c6fd36ac 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -7,21 +7,6 @@ declare global {
         id: string
     }
 
-    interface AnnotationView extends View {
-        connector: {
-            id: number,
-            options: AnnotationViewOptions
-       }
-   }
-
-   interface AnnotationViewOptions {
-        types: AnnotationOptionsTypes[]
-   }
-
-   interface AnnotationOptionsTypes {
-      name: string,
-      index: string
-   }
 
     interface ActiveAnnotation {
         [key: string]: Annotation
@@ -73,19 +58,6 @@ declare global {
         accent: string
     }
 
-    interface Config {
-        container: string,
-        collection: string,
-        manifest: string,
-        item: string,
-        panels: TidoPanels,
-        colors: Colors,
-        header: Header,
-        labels: Labels,
-        lang: string,
-        meta: MetaConfig,
-        notificationColors: NotificationColors
-    }
 
     interface Content {
         '@context': string,
@@ -94,20 +66,6 @@ declare global {
         integrity?: DataIntegrity
     }
 
-    interface ContentView extends View {
-        connector: {
-            id: number,
-            options: {
-              labels: Labels
-            }
-          }
-    }
-
-    type ContentsAndMetadataViews = [
-        ContentView,
-        MetadataView
-    ]
-
 
     type CssSelector = {
         type: 'CssSelector',
@@ -139,12 +97,6 @@ declare global {
         manifest?: string,
         license: License
     }
-
-    interface ImageView extends View {
-        connector: {
-          id: number
-        }
-     }
     
 
     interface Item {
@@ -200,23 +152,6 @@ declare global {
         metadata?: Metadata[]
     }
 
-    interface MetadataView extends View {
-        connector: {
-            id: number,
-            options: MetadataViewConfigOptions
-        }
-    }
-    interface MetadataViewConfigOptions {
-        collection: {
-            all: boolean
-        },
-        manifest: {
-            all: boolean
-        },
-        item: {
-            all: boolean
-        }
-    }
 
     interface Module {
         editionManuscripts?: boolean,
@@ -260,60 +195,12 @@ declare global {
     type SequenceType = 'collection' | 'manifest' | 'item'
     type SupportType = 'font' | 'css' 
 
-
-    interface TextView extends View {
-        connector: {
-            id: number
-        }
-    }
-
-
-    type TidoPanels = [ 
-        ContentPanel,
-        MetadataPanel,
-        ImagePanel,
-        TextPanel,
-        AnnotationPanel
-    ]
-    
     interface Title {
         '@context': string,
         title: string
         type: TitleType
     }
     type TitleType = 'main' | 'sub';
-
-    interface View {
-        id: string,
-        label: string,
-        default?: boolean
-    }
-
-    interface Panel {
-        label: string,
-        show: boolean,
-        toggle: boolean
-    }
-
-    interface ContentPanel extends Panel {
-        views: ContentView[] 
-    }
-
-    interface MetadataPanel extends Panel {
-        views: MetadataView[]
-    }
-
-    interface ImagePanel extends Panel {
-        views: ImageView[]
-    }
-
-    interface TextPanel extends Panel {
-        views: TextView[]
-    }
-
-    interface AnnotationPanel extends Panel {
-        views: AnnotationView[]
-    }
 }
 
 export {}
\ No newline at end of file