diff --git a/package-lock.json b/package-lock.json
index 74d6e6b2..27f5b6a9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,9 +31,7 @@
         "uuid": "3.4.0",
         "vee-validate": "3.2.4",
         "vue": "2.7.14",
-        "vue-awesome": "4.0.2",
         "vue-flatpickr-component": "8.1.5",
-        "vue-gtag": "1.1.2",
         "vue-i18n": "8.15.3",
         "vue-matomo": "^4.2.0",
         "vue-router": "3.1.5",
@@ -26795,11 +26793,6 @@
       "dev": true,
       "optional": true
     },
-    "node_modules/nanoid": {
-      "version": "2.1.11",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.1.11.tgz",
-      "integrity": "sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA=="
-    },
     "node_modules/nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@@ -34752,21 +34745,6 @@
         "csstype": "^3.1.0"
       }
     },
-    "node_modules/vue-awesome": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/vue-awesome/-/vue-awesome-4.0.2.tgz",
-      "integrity": "sha512-TE9hVwyVrGnBetO/MJwZ/7qLO6Vgr/WrDtIA7vwNryoLdA2jfRcKRw29KacpU5xj3wzZhHfYJ2xJLxfirhmH5Q==",
-      "dependencies": {
-        "nanoid": "^2.1.6"
-      },
-      "engines": {
-        "node": ">= 4.0.0",
-        "npm": ">= 3.0.0"
-      },
-      "peerDependencies": {
-        "vue": "^2.4.0"
-      }
-    },
     "node_modules/vue-class-component": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/vue-class-component/-/vue-class-component-7.2.3.tgz",
@@ -34879,11 +34857,6 @@
         "vue": "^2.0.0"
       }
     },
-    "node_modules/vue-gtag": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/vue-gtag/-/vue-gtag-1.1.2.tgz",
-      "integrity": "sha512-ZPF4y1e04M6M5bkDRKPzZZt/D9r67OBi5tOYRFLdSC1NXrJv0l9Q8dxZjrOqY4VcTeXPlqTj8u3qBb+ScdBpng=="
-    },
     "node_modules/vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
@@ -56852,11 +56825,6 @@
       "dev": true,
       "optional": true
     },
-    "nanoid": {
-      "version": "2.1.11",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.1.11.tgz",
-      "integrity": "sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA=="
-    },
     "nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@@ -63108,14 +63076,6 @@
         }
       }
     },
-    "vue-awesome": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/vue-awesome/-/vue-awesome-4.0.2.tgz",
-      "integrity": "sha512-TE9hVwyVrGnBetO/MJwZ/7qLO6Vgr/WrDtIA7vwNryoLdA2jfRcKRw29KacpU5xj3wzZhHfYJ2xJLxfirhmH5Q==",
-      "requires": {
-        "nanoid": "^2.1.6"
-      }
-    },
     "vue-class-component": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/vue-class-component/-/vue-class-component-7.2.3.tgz",
@@ -63207,11 +63167,6 @@
         "flatpickr": "^4.6.1"
       }
     },
-    "vue-gtag": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/vue-gtag/-/vue-gtag-1.1.2.tgz",
-      "integrity": "sha512-ZPF4y1e04M6M5bkDRKPzZZt/D9r67OBi5tOYRFLdSC1NXrJv0l9Q8dxZjrOqY4VcTeXPlqTj8u3qBb+ScdBpng=="
-    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
diff --git a/package.json b/package.json
index d79580cf..3a05de1f 100644
--- a/package.json
+++ b/package.json
@@ -41,9 +41,7 @@
     "uuid": "3.4.0",
     "vee-validate": "3.2.4",
     "vue": "2.7.14",
-    "vue-awesome": "4.0.2",
     "vue-flatpickr-component": "8.1.5",
-    "vue-gtag": "1.1.2",
     "vue-i18n": "8.15.3",
     "vue-matomo": "^4.2.0",
     "vue-router": "3.1.5",
diff --git a/src/components/CollectionTagger.vue b/src/components/CollectionTagger.vue
deleted file mode 100644
index 62b4a785..00000000
--- a/src/components/CollectionTagger.vue
+++ /dev/null
@@ -1,143 +0,0 @@
-<template lang="html">
-  <div v-if="isLoggedIn()" class="collection-tagger">
-    <a v-on:click.prevent="toggle" href="#">Save</a>
-    <div class="overlay" v-show="show">
-      <div class="panel">
-        <div class="header">
-          <router-link class="btn btn-sm btn-primary" v-bind:to="{ name: 'collection'}">Manage collections</router-link>
-          <a v-on:click.prevent="toggle" href="#" class='btn btn-sm btn-dark'><icon name="times"/></a>
-        </div>
-        <div class="body">
-          <label for="">Order by</label>
-          <select v-model="collectionsSortOrder">
-            <option value="name">A-Z</option>
-            <option value="-name">Z-A</option>
-            <option value="created">Oldest</option>
-            <option value="-created">Newest</option>
-            <option value="-modified">Last Edit</option>
-          </select>
-          <hr>
-          <ul class="list-unstyled">
-            <li v-for="(collection, index) in collections" v-bind:key="index" class="form-check">
-              <input
-              class="form-check-input"
-              type="checkbox"
-              v-bind:checked="isActive(collection)"
-              v-on:click="toggleActive(collection)"
-              v-bind:id="collection.uid">
-              <label class="form-check-label" v-bind:for="collection.uid">
-                {{collection.name}}
-              </label>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapStores } from 'pinia'
-import Icon from 'vue-awesome/components/Icon';
-import 'vue-awesome/icons/times';
-import { useCollectionsStore } from '@/stores/collections'
-import { userUserStore } from '@/stores/user'
-
-export default {
-  data: () => ({
-    show: false,
-  }),
-  model: {
-    prop: 'item',
-  },
-  props: {
-    item: Object,
-  },
-  computed: {
-    ...mapStores(useCollectionsStore, userUserStore),
-    collections: {
-      get() {
-        return this.collectionsStore.collections
-      },
-    },
-    collectionsSortOrder: {
-      get() {
-        return this.collectionsStore.collectionsSortOrder
-      },
-      set(collectionsSortOrder) {
-        this.collectionsStore.setCollectionsSortOrder(collectionsSortOrder)
-      },
-    },
-  },
-  methods: {
-    isActive(needle) {
-      return this.item.collections.find(collection => needle.uid === collection.uid);
-    },
-    toggleActive(collection) {
-      const idx = this.item.collections.findIndex(c => (c.uid === collection.uid));
-
-      if (idx >= 0) {
-        this.item.collections.splice(idx, 1);
-        this.collectionsStore.removeCollectionItem({
-          collection,
-          item: this.item,
-        })
-      } else {
-        this.item.collections.push(collection);
-        this.collectionsStore.addCollectionItem({
-          collection,
-          item: this.item,
-        })
-      }
-    },
-    toggle() {
-      this.show = !this.show;
-    },
-    isLoggedIn() {
-      return this.userStore.userData
-    },
-  },
-  components: {
-    Icon,
-  },
-};
-</script>
-
-<style scoped lang="less">
-
-.collection-tagger {
-    display: inline-block;
-    .overlay {
-        position: fixed;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 100%;
-        background: rgba(0,0,0,0.6);
-        z-index: 10001;
-        .panel {
-            width: 400px;
-            position: absolute;
-            margin-left: auto;
-            margin-right: auto;
-            left: 0;
-            right: 0;
-            height: 50%;
-            top: 25%;
-            overflow: hidden;
-            background: white;
-            .body {
-                padding: 20px;
-                overflow-y: auto;
-                height: 100%;
-            }
-
-            .header {
-                text-align: right;
-                padding: 10px 20px;
-                background: #eeeeee;
-            }
-        }
-    }
-}
-</style>
diff --git a/src/components/IssuePage.vue b/src/components/IssuePage.vue
index 09882ca1..b3fbb063 100644
--- a/src/components/IssuePage.vue
+++ b/src/components/IssuePage.vue
@@ -4,58 +4,82 @@
       <div slot="header" class="border-bottom border-tertiary">
         <b-tabs pills class="mx-2 pt-2">
           <template v-slot:tabs-end>
-            <b-nav-item class="pl-2"
+            <b-nav-item
+              class="pl-2"
               @click="switchTab('toc')"
-              :class="{ 'active': !isTabSearch }"
-              active-class='none' >{{$t('table_of_contents')}}</b-nav-item>
-            <b-nav-item class="pl-2"
+              :class="{ active: !isTabSearch }"
+              active-class="none"
+              >{{ $t('table_of_contents') }}</b-nav-item
+            >
+            <b-nav-item
+              class="pl-2"
               @click="switchTab('search')"
-              :class="{ 'active': isTabSearch }"
-              active-class='none'>{{$t('search_and_find')}}</b-nav-item>
+              :class="{ active: isTabSearch }"
+              active-class="none"
+              >{{ $t('search_and_find') }}</b-nav-item
+            >
           </template>
         </b-tabs>
         <div class="py-2 px-3">
           <div v-if="issue" class="mb-2">
             <span v-if="isTabSearch">
-              <span v-if="q.length" v-html="$tc('numbers.articlesMatching', matchesTotalRows, {
-                n: $n(matchesTotalRows),
-                q,
-              })"/>
+              <span
+                v-if="q.length"
+                v-html="
+                  $tc('numbers.articlesMatching', matchesTotalRows, {
+                    n: $n(matchesTotalRows),
+                    q,
+                  })
+                "
+              />
               <span v-else v-html="$tc('numbers.articles', matchesTotalRows)" />
             </span>
-            <span v-else class="small-caps" v-html="$t('stats', {
-              countPages: issue.countPages,
-              countArticles: issue.countArticles,
-            })"/>
+            <span
+              v-else
+              class="small-caps"
+              v-html="
+                $t('stats', {
+                  countPages: issue.countPages,
+                  countArticles: issue.countArticles,
+                })
+              "
+            />
           </div>
           <div v-if="isTabSearch">
-            <search-pills :filters="filters"
-                          @changed="handleFiltersChanged"
-                          :excluded-types="['hasTextContents', 'isFront', 'issue', 'newspaper']" />
+            <search-pills
+              :filters="filters"
+              @changed="handleFiltersChanged"
+              :excluded-types="['hasTextContents', 'isFront', 'issue', 'newspaper']"
+            />
             <div class="input-group">
               <b-form-input
-              placeholder="search for ..."
-              v-model.trim="q"
-              v-on:change.native="search"/>
+                placeholder="search for ..."
+                v-model.trim="q"
+                v-on:change.native="search"
+              />
             </div>
           </div>
         </div>
       </div>
       <!--  ToC -->
-      <table-of-contents v-if="!isTabSearch && isTocReady"
+      <table-of-contents
+        v-if="!isTabSearch && isTocReady"
         :tableOfContents="issue"
         :page="page"
         :article="article"
         :articles="matchingArticles"
-        v-on:click="gotoArticle" />
+        v-on:click="gotoArticle"
+      />
 
-      <table-of-contents v-if="isTabSearch && isTocReady"
+      <table-of-contents
+        v-if="isTabSearch && isTocReady"
         :tableOfContents="issue"
         :page="page"
         :article="article"
         :articles="matchingArticles"
         flatten
-        v-on:click="gotoArticle" />
+        v-on:click="gotoArticle"
+      />
 
       <div class="fixed-pagination-footer p-1 m-0 mb-2" v-if="isTabSearch">
         <pagination
@@ -64,31 +88,38 @@
           v-bind:totalRows="matchesTotalRows"
           v-bind:showDescription="false"
           v-on:change="onInputPagination"
-           />
+        />
       </div>
     </i-layout-section>
     <!--  page openseadragon or article -->
     <i-layout-section main>
       <div slot="header" class="border-bottom">
         <b-navbar type="light" variant="light" class="px-0 py-0 border-bottom">
-          <section class='p-2 pl-3'>
-            <h3 v-if="issue" class="m-0">{{ issue.newspaper.name }} &mdash;
+          <section class="p-2 pl-3">
+            <h3 v-if="issue" class="m-0">
+              {{ issue.newspaper.name }} &mdash;
               <span class="date small">
-              {{ $d(issue.date, 'long') }}
+                {{ $d(issue.date, 'long') }}
               </span>
             </h3>
           </section>
           <b-navbar-nav v-if="issue" class=" border">
             <!-- {{ currentPageIndex}} / {{issue.pages.length}} {{ page.num}} -->
-            <b-button variant="light" size="sm"
+            <b-button
+              variant="light"
+              size="sm"
               v-bind:disabled="currentPageIndex === 0"
-              v-on:click="gotoPageIndex(currentPageIndex - 1)">
+              v-on:click="gotoPageIndex(currentPageIndex - 1)"
+            >
               <div class="dripicons dripicons-media-previous pt-1"></div>
             </b-button>
             <div v-if="page" class="px-2 pt-1">{{ $tc('pp', 1, { pages: page.num }) }}</div>
-            <b-button variant="light" size="sm"
-              v-bind:disabled="(currentPageIndex + 1) === issue.pages.length"
-              v-on:click="gotoPageIndex(currentPageIndex + 1)">
+            <b-button
+              variant="light"
+              size="sm"
+              v-bind:disabled="currentPageIndex + 1 === issue.pages.length"
+              v-on:click="gotoPageIndex(currentPageIndex + 1)"
+            >
               <div class="dripicons dripicons-media-next pt-1"></div>
             </b-button>
           </b-navbar-nav>
@@ -96,9 +127,14 @@
         <b-navbar type="light" variant="light" class="px-0 py-0">
           <b-navbar-nav v-if="article" class="px-3 py-2 border-right">
             <div v-if="article">
-              <span class="badge bg-accent-secondary text-clr-white">{{ $t(`buckets.type.${article.type}`) }}</span>
+              <span class="badge bg-accent-secondary text-clr-white">{{
+                $t(`buckets.type.${article.type}`)
+              }}</span>
               <span class="badge">
-                <span class='small-caps' id='selected-article-language'>{{ article.language }}</span> |
+                <span class="small-caps" id="selected-article-language">{{
+                  article.language
+                }}</span>
+                |
                 <span>{{ articlePages }}</span>
                 <div :title="$t(`buckets.language.${article.language}`)"></div>
               </span>
@@ -109,7 +145,8 @@
               :modelValue="mode"
               @update:modelValue="mode = $event"
               :options="modeOptions"
-              type="button" />
+              type="button"
+            />
             <small>
               <info-button name="What-OCR" class="ml-2 mt-1 d-block" />
             </small>
@@ -119,40 +156,52 @@
             <b-button
               v-show="mode === 'image'"
               class="mr-2"
-              :variant="showOutlines !== '' ? 'primary' : 'outline-primary'" size="sm"
-              @click="showOutlines = (showOutlines === '') ? 'show-outlines' : ''">
+              :variant="showOutlines !== '' ? 'primary' : 'outline-primary'"
+              size="sm"
+              @click="showOutlines = showOutlines === '' ? 'show-outlines' : ''"
+            >
               <div class="d-flex flex-row align-items-center">
                 <div class="d-flex dripicons dripicons-preview mr-2" />
-                <div v-if="showOutlines">{{$t('toggle_outlines_on')}}</div>
-                <div v-else>{{$t('toggle_outlines_off')}}</div>
+                <div v-if="showOutlines">{{ $t('toggle_outlines_on') }}</div>
+                <div v-else>{{ $t('toggle_outlines_off') }}</div>
               </div>
             </b-button>
-            <b-button :variant="isFullscreen ? 'primary' : 'outline-primary'" size="sm" @click="toggleFullscreen" class="mr-3">
+            <b-button
+              :variant="isFullscreen ? 'primary' : 'outline-primary'"
+              size="sm"
+              @click="toggleFullscreen"
+              class="mr-3"
+            >
               <div class="d-flex flex-row align-items-center">
-                <div class="mr-2 d-flex dripicons" :class="{ 'dripicons-contract': isFullscreen, 'dripicons-expand': !isFullscreen}" />
-                <div v-if="isFullscreen">{{$t('toggle_fullscreen_on')}}</div>
-                <div v-else>{{$t('toggle_fullscreen_off')}}</div>
+                <div
+                  class="mr-2 d-flex dripicons"
+                  :class="{ 'dripicons-contract': isFullscreen, 'dripicons-expand': !isFullscreen }"
+                />
+                <div v-if="isFullscreen">{{ $t('toggle_fullscreen_on') }}</div>
+                <div v-else>{{ $t('toggle_fullscreen_off') }}</div>
               </div>
             </b-button>
           </b-navbar-nav>
-       </b-navbar>
+        </b-navbar>
       </div>
       <div class="d-flex h-100 justify-content-center" v-if="!isContentAvailable && issue">
         <div class="align-self-center">
           <p>{{ $t('errors.loggedInOnly') }}</p>
-          <br/>
-          <b-button @click="handleLoginClick()" block size="sm" variant="outline-primary">{{ $t('actions.login') }}</b-button>
+          <br />
+          <b-button @click="handleLoginClick()" block size="sm" variant="outline-primary">{{
+            $t('actions.login')
+          }}</b-button>
         </div>
       </div>
       <open-seadragon-viewer
-        :class="[
-          'bg-light',
-          showOutlines,
-        ]"
+        :class="['bg-light', showOutlines]"
         v-show="isContentAvailable && mode === 'image'"
-        v-bind:handler="handler" />
-      <issue-viewer-text v-if="article && article.uid && mode === 'text'"
-        v-bind:article_uid="article.uid"/>
+        v-bind:handler="handler"
+      />
+      <issue-viewer-text
+        v-if="article && article.uid && mode === 'text'"
+        v-bind:article_uid="article.uid"
+      />
     </i-layout-section>
     <i-layout-section width="120px" class="border-left" v-if="issue">
       <thumbnail-slider
@@ -160,26 +209,23 @@
         :issue="issue"
         @click="gotoPage"
         :displayMode="mode"
-        :page="page" />
+        :page="page"
+      />
     </i-layout-section>
   </i-layout>
 </template>
 
 <script>
-import Vue from 'vue';
-import Icon from 'vue-awesome/components/Icon';
+import Vue from 'vue'
 
-import 'vue-awesome/icons/image';
-import 'vue-awesome/icons/align-left';
+import IssueViewerText from './modules/IssueViewerText'
+import OpenSeadragonViewer from './modules/OpenSeadragonViewer'
 
-import IssueViewerText from './modules/IssueViewerText';
-import OpenSeadragonViewer from './modules/OpenSeadragonViewer';
-
-import SearchPills from './SearchPills';
-import TableOfContents from './modules/TableOfContents';
-import ThumbnailSlider from './modules/ThumbnailSlider';
-import Pagination from './modules/Pagination';
-import InfoButton from './base/InfoButton';
+import SearchPills from './SearchPills'
+import TableOfContents from './modules/TableOfContents'
+import ThumbnailSlider from './modules/ThumbnailSlider'
+import Pagination from './modules/Pagination'
+import InfoButton from './base/InfoButton'
 import { toCanonicalFilter, SupportedFiltersByContext } from '../logic/filters'
 import { mapSearchQuery } from '@/logic/queryParams'
 import RadioGroup from '@/components/layout/RadioGroup.vue';
@@ -220,37 +266,44 @@ export default {
     //
     matches: [],
     tocArticles: [],
-    issueFilters: []
+    issueFilters: [],
   }),
   created() {
-    window.addEventListener('fullscreenchange', this.fullscreenChange);
-    window.addEventListener('keydown', this.keyDown);
+    window.addEventListener('fullscreenchange', this.fullscreenChange)
+    window.addEventListener('keydown', this.keyDown)
   },
   destroyed() {
-    window.removeEventListener('fullscreenchange', this.fullscreenChange);
-    window.removeEventListener('keydown', this.keyDown);
+    window.removeEventListener('fullscreenchange', this.fullscreenChange)
+    window.removeEventListener('keydown', this.keyDown)
   },
   computed: {
     ...mapStores(useEntitiesStore, useIssueStore, useUserStore),
     modeOptions() {
       return [
         { value: 'image', text: this.$t('facsimileView'), iconName: 'image' },
-        { value: 'text', text: this.$t('closeReadingView'), iconName: 'align-left', disabled: !this.article },
+        {
+          value: 'text',
+          text: this.$t('closeReadingView'),
+          iconName: 'align-left',
+          disabled: !this.article,
+        },
       ]
     },
     searchQuery: mapSearchQuery(),
     currentSearchFilters() {
-      return this.searchQuery.filters.filter(filter => SupportedFiltersByContext.search.includes(filter.type))
+      return this.searchQuery.filters.filter(filter =>
+        SupportedFiltersByContext.search.includes(filter.type),
+      )
     },
     isContentAvailable() {
       if (this.issue) {
         if (this.issue.accessRights === 'OpenPublic') {
-          return true;
+          return true
         } else if (this.currentUser && this.currentUser.isActive) {
-          return true;
+          return true
         }
       }
-      return false;
+      return false
     },
     currentUser() {
       return this.userStore.user
@@ -259,37 +312,37 @@ export default {
       return this.issueStore.issue
     },
     isTocReady() {
-      return this.issue && this.page && this.isTocLoaded;
+      return this.issue && this.page && this.isTocLoaded
     },
     isTabSearch() {
-      return this.tab === 'search';
+      return this.tab === 'search'
     },
     matchingArticles() {
       if (!this.isTocReady) {
-        return [];
+        return []
       }
 
-      const matchesUids = this.matches.map(d => d.id);
-      const results = [];
+      const matchesUids = this.matches.map(d => d.id)
+      const results = []
 
-      this.issue.articles.forEach((article) => {
-        const idx = matchesUids.indexOf(article.uid);
+      this.issue.articles.forEach(article => {
+        const idx = matchesUids.indexOf(article.uid)
         if (idx !== -1) {
           results.push({
             ...article,
             matches: this.matches[idx].matches,
-          });
+          })
         }
-      });
-      return results;
+      })
+      return results
     },
     articlePages() {
       if (!this.article || !this.article.pages) {
-        return '';
+        return ''
       }
       return this.$tc('pp', this.article.nbPages, {
         pages: this.article.pages.map(d => d.num).join(','),
-      });
+      })
     },
     mode: {
       get() {
@@ -313,7 +366,7 @@ export default {
     },
     filters: {
       get() {
-        let filters = [...this.issueFilters];
+        let filters = [...this.issueFilters]
         if (this.issue != null) {
           filters.push({
             type: 'issue',
@@ -324,7 +377,7 @@ export default {
       },
       set(filters) {
         this.issueFilters = filters.filter(({ type }) => type !== 'issue')
-      }
+      },
     },
   },
   methods: {
@@ -332,63 +385,63 @@ export default {
       this.issueFilters = [...this.currentSearchFilters]
 
       if (this.$route.query.tab === 'search') {
-        this.tab = 'search';
+        this.tab = 'search'
       } else {
-        this.tab = 'toc';
+        this.tab = 'toc'
       }
       if (!this.issue || this.issue.uid !== this.$route.params.issue_uid) {
         await this.loadIssue({
           uid: this.$route.params.issue_uid,
-        });
-        this.isTocLoaded = false;
+        })
+        this.isTocLoaded = false
       }
       // then let's load a page: if there's none, let's take the first one (cover)
-      let pageUid;
+      let pageUid
       if (this.$route.params.page_uid) {
-        pageUid = this.$route.params.page_uid;
+        pageUid = this.$route.params.page_uid
       } else {
-        pageUid = this.issue.cover;
+        pageUid = this.issue.cover
       }
 
       if (!this.page || this.page.uid !== pageUid) {
         this.page = await this.loadPage({
           uid: pageUid,
-        });
-        this.currentPageIndex = this.issue.pages.findIndex(p => p.uid === this.page.uid);
+        })
+        this.currentPageIndex = this.issue.pages.findIndex(p => p.uid === this.page.uid)
 
         // we reset the handler here. Why?
-        await this.resetHandler();
+        await this.resetHandler()
         // we dispatch the gotoPage to change page in openseadragon
-        this.handler.$emit('dispatch', (viewer) => {
-          viewer.goToPage(this.currentPageIndex);
-        });
+        this.handler.$emit('dispatch', viewer => {
+          viewer.goToPage(this.currentPageIndex)
+        })
         // force reload fo marginalia, page changed.
-        this.isMarginaliaLoaded = false;
-        this.isMarginaliaUpdated = false;
+        this.isMarginaliaLoaded = false
+        this.isMarginaliaUpdated = false
       }
       // if there's a specific article, let's load it
       if (this.$route.params.article_uid) {
         if (!this.article || this.article.uid !== this.$route.params.article_uid) {
           this.article = await this.loadArticle({
             uid: this.$route.params.article_uid,
-          });
+          })
         }
       } else if (this.article) {
         // unload current article
-        this.article = null;
+        this.article = null
       }
 
       if (this.article) {
         // select article using the article uid
-        this.selectArticle();
+        this.selectArticle()
       }
 
       if (this.$route.params.image_uid) {
-        console.warn('WIP!');
+        console.warn('WIP!')
       }
 
       if (!this.isTocLoaded) {
-        await this.loadToC();
+        await this.loadToC()
       }
 
       // get article properties from toc
@@ -399,28 +452,25 @@ export default {
       //   }
       // }
       // refresh metadata according the current route
-      this.renderMetaTags();
+      this.renderMetaTags()
 
       if (!this.isSearchLoaded) {
-        await this.search();
+        await this.search()
       }
 
       if (!this.isMarginaliaLoaded) {
-        await this.loadMarginalia();
+        await this.loadMarginalia()
       }
     },
     handleLoginClick() {
       this.$router.push({ name: 'login' })
     },
     renderMetaTags() {
-      let tags = {};
-      const titleParts = [
-        this.issue.newspaper.name,
-        this.$d(this.issue.date, 'short'),
-      ];
+      let tags = {}
+      const titleParts = [this.issue.newspaper.name, this.$d(this.issue.date, 'short')]
 
       if (this.$route.name === 'article') {
-        titleParts.unshift(this.article.uid);
+        titleParts.unshift(this.article.uid)
         tags = {
           dc: {
             'DC.title': this.article.title,
@@ -430,7 +480,10 @@ export default {
             'DC.language': this.article.language,
             'DC.publication': 'impresso',
             'DC.isPartOf': this.issue.newspaper.name,
-            'DCTERMS.issued': this.issue.date.toISOString().split('T').shift(),
+            'DCTERMS.issued': this.issue.date
+              .toISOString()
+              .split('T')
+              .shift(),
             'DCTERMS.publisher': this.issue.newspaper.name,
           },
           og: {
@@ -440,47 +493,48 @@ export default {
             citation_newspaper_title: this.issue.newspaper.name,
             description: this.article.excerpt,
           },
-        };
+        }
       }
 
       this.$renderMetaTags({
         title: titleParts.join(' · '),
         ...tags,
         updateZotero: true,
-      });
+      })
     },
     switchTab(tab) {
       // swith tab query params leaving the other untouched
-      console.info('switch tab to:', tab);
+      console.info('switch tab to:', tab)
       this.$router.push({
         name: this.$route.name,
         params: this.$route.params,
         query: {
           tab,
         },
-      });
+      })
     },
     updateMarginalia() {
-      console.info('Update page marginalia');
-      const listMapper = () => d => `<li>${d.item.htmlExcerpt || d.item.name} (${d.count})</li>`;
-      const sectionFormatter = (items, type) => [
-        '<section><h4 class="small-caps border-bottom">',
-        this.$tc(`label.${type}.title`, items.length),
-        '</h4><ul>',
-        items.map(listMapper(type)).join(''),
-        '</ul></section>',
-      ].join('');
-      this.marginaliaLeft.innerHTML = sectionFormatter(this.pageTopics, 'topic');
+      console.info('Update page marginalia')
+      const listMapper = () => d => `<li>${d.item.htmlExcerpt || d.item.name} (${d.count})</li>`
+      const sectionFormatter = (items, type) =>
+        [
+          '<section><h4 class="small-caps border-bottom">',
+          this.$tc(`label.${type}.title`, items.length),
+          '</h4><ul>',
+          items.map(listMapper(type)).join(''),
+          '</ul></section>',
+        ].join('')
+      this.marginaliaLeft.innerHTML = sectionFormatter(this.pageTopics, 'topic')
       this.marginaliaRight.innerHTML = [
         sectionFormatter(this.pagePersons, 'person'),
         sectionFormatter(this.pageLocations, 'location'),
-      ].join('');
-      this.isMarginaliaUpdated = true;
+      ].join('')
+      this.isMarginaliaUpdated = true
     },
     resetHandler() {
-      const self = this;
-      self.isLoaded = false;
-      this.handler.$emit('destroy');
+      const self = this
+      self.isLoaded = false
+      this.handler.$emit('destroy')
       this.handler.$emit('init', {
         sequenceMode: true,
         showSequenceControl: false,
@@ -493,61 +547,64 @@ export default {
           dblClickToZoom: true,
         },
         visibilityRatio: 0.5,
-      });
-      this.handler.$emit('dispatch', (viewer) => {
+      })
+      this.handler.$emit('dispatch', viewer => {
         viewer.addHandler('animation', () => {
-          this.bounds = viewer.viewport.getBoundsNoRotate();
-        });
+          this.bounds = viewer.viewport.getBoundsNoRotate()
+        })
 
         viewer.addHandler('update-viewport', () => {
-          this.bounds = viewer.viewport.getBoundsNoRotate();
-        });
+          this.bounds = viewer.viewport.getBoundsNoRotate()
+        })
 
         viewer.addHandler('canvas-drag', () => {
-          this.isDragging = true;
-        });
+          this.isDragging = true
+        })
 
         viewer.addHandler('canvas-drag-end', () => {
           window.setTimeout(() => {
-            this.isDragging = false;
-          }, 100);
-        });
+            this.isDragging = false
+          }, 100)
+        })
 
         viewer.addHandler('tile-loaded', () => {
-          if (self.isLoaded) { // skip
-            return;
+          if (self.isLoaded) {
+            // skip
+            return
           }
-          console.info('OS Viewer @tile-loaded, n. of articles:', self.page.articles.length);
-          self.isLoaded = true;
+          console.info('OS Viewer @tile-loaded, n. of articles:', self.page.articles.length)
+          self.isLoaded = true
           // create or reset marginalia left
-          self.marginaliaLeft = window.document.createElement('div');
-          self.marginaliaLeft.setAttribute('class', 'marginalia left');
+          self.marginaliaLeft = window.document.createElement('div')
+          self.marginaliaLeft.setAttribute('class', 'marginalia left')
           viewer.addOverlay(
             self.marginaliaLeft,
             viewer.viewport.imageToViewportRectangle(-4000, 0, 4000, 10000),
-          );
+          )
           // create or reset marginalia right
-          self.marginaliaRight = window.document.createElement('div');
-          self.marginaliaRight.setAttribute('class', 'marginalia right');
+          self.marginaliaRight = window.document.createElement('div')
+          self.marginaliaRight.setAttribute('class', 'marginalia right')
           viewer.addOverlay(
             self.marginaliaRight,
             viewer.viewport.imageToViewportRectangle(
-              viewer.world.getItemAt(0).getContentSize().x, 0,
-              4000, 10000,
+              viewer.world.getItemAt(0).getContentSize().x,
+              0,
+              4000,
+              10000,
             ),
-          );
+          )
           if (self.isMarginaliaLoaded) {
-            self.updateMarginalia();
+            self.updateMarginalia()
           }
 
-          self.page.articles.forEach((article) => {
+          self.page.articles.forEach(article => {
             // regions
             // debugger;
-            article.regions.forEach((region) => {
-              const overlay = window.document.createElement('div');
+            article.regions.forEach(region => {
+              const overlay = window.document.createElement('div')
 
-              overlay.setAttribute('class', 'overlay-region');
-              overlay.dataset.articleUid = article.uid;
+              overlay.setAttribute('class', 'overlay-region')
+              overlay.dataset.articleUid = article.uid
 
               // selected article regions
               // if (article.uid === this.$route.params.article_uid) {
@@ -559,44 +616,49 @@ export default {
               //   });
               // }
 
-              overlay.addEventListener('mouseenter', (event) => {
-                const articleUid = event.target.dataset.articleUid;
+              overlay.addEventListener('mouseenter', event => {
+                const articleUid = event.target.dataset.articleUid
 
-                event.target.parentNode.querySelectorAll(`[data-article-uid=${articleUid}]`).forEach((item) => {
-                  item.classList.add('selected');
-                });
-              });
+                event.target.parentNode
+                  .querySelectorAll(`[data-article-uid=${articleUid}]`)
+                  .forEach(item => {
+                    item.classList.add('selected')
+                  })
+              })
 
-              overlay.addEventListener('click', (event) => {
+              overlay.addEventListener('click', event => {
                 if (this.isDragging === false || this.isDragging === undefined) {
-                  const articleUid = event.target.dataset.articleUid;
+                  const articleUid = event.target.dataset.articleUid
 
                   this.$router.push({
                     name: 'article',
                     params: {
                       article_uid: articleUid,
                     },
-                  });
+                  })
                 }
-              });
+              })
 
-              overlay.addEventListener('mouseleave', (event) => {
-                const articleUid = event.target.dataset.articleUid;
+              overlay.addEventListener('mouseleave', event => {
+                const articleUid = event.target.dataset.articleUid
 
-                event.target.parentNode.querySelectorAll(`[data-article-uid=${articleUid}]`).forEach((item) => {
-                  item.classList.remove('selected');
-                });
-              });
+                event.target.parentNode
+                  .querySelectorAll(`[data-article-uid=${articleUid}]`)
+                  .forEach(item => {
+                    item.classList.remove('selected')
+                  })
+              })
 
               const rect = viewer.viewport.imageToViewportRectangle(
                 region.coords.x,
                 region.coords.y,
                 region.coords.w,
-                region.coords.h);
-              viewer.addOverlay(overlay, rect);
-            });
+                region.coords.h,
+              )
+              viewer.addOverlay(overlay, rect)
+            })
             // matches
-            article.matches.forEach((match) => {
+            article.matches.forEach(match => {
               // console.log('match', match);
               if (match.pageUid === article.pages[0]?.uid) {
                 const overlay = {
@@ -605,16 +667,16 @@ export default {
                   w: match.coords[2],
                   h: match.coords[3],
                   class: 'overlay-match',
-                };
-                this.handler.$emit('add-overlay', overlay);
+                }
+                this.handler.$emit('add-overlay', overlay)
               }
-            });
-          });
+            })
+          })
           if (this.article) {
-            this.selectArticle();
+            this.selectArticle()
           }
-        });
-      });
+        })
+      })
     },
     loadIssue({ uid }) {
       // console.info('...loading issue', uid);
@@ -650,35 +712,35 @@ export default {
         this.loadPageTopics({ uid: this.page.uid }),
         this.loadPageEntities({ uid: this.page.uid }),
       ]).then(([topicFacet, [locationFacet, personFacet]]) => {
-        this.isMarginaliaLoaded = true;
-        this.pageTopics = topicFacet.buckets;
-        this.pageLocations = locationFacet.buckets;
-        this.pagePersons = personFacet.buckets;
+        this.isMarginaliaLoaded = true
+        this.pageTopics = topicFacet.buckets
+        this.pageLocations = locationFacet.buckets
+        this.pagePersons = personFacet.buckets
         if (this.isLoaded) {
-          this.updateMarginalia();
+          this.updateMarginalia()
         }
-      });
+      })
     },
     handleFiltersChanged(filters) {
       this.issueFilters = filters.slice(0, filters.length - 1)
-      this.search();
+      this.search()
     },
     onInputPagination(page) {
-      this.matchesCurrentPage = page;
-      this.search();
+      this.matchesCurrentPage = page
+      this.search()
     },
     search() {
-      const filters = [...this.filters];
+      const filters = [...this.filters]
       if (this.q.length > 0) {
         filters.push({
           type: 'string',
           q: this.q,
-        });
+        })
       }
 
       if (!filters.length) {
         // console.info('-> search() skip, q is empty.');
-        return;
+        return
       }
 
       const query = {
@@ -705,21 +767,21 @@ export default {
       })
     },
     selectArticle() {
-      const self = this;
-      this.handler.$emit('dispatch', (viewer) => {
-        viewer.overlaysContainer.querySelectorAll('div').forEach((overlay) => {
+      const self = this
+      this.handler.$emit('dispatch', viewer => {
+        viewer.overlaysContainer.querySelectorAll('div').forEach(overlay => {
           if (self.article && overlay.dataset.articleUid === self.article.uid) {
-            overlay.classList.add('active');
+            overlay.classList.add('active')
           } else {
-            overlay.classList.remove('active');
+            overlay.classList.remove('active')
           }
-        });
-      });
+        })
+      })
     },
     gotoPageIndex(idx) {
-      const page = this.issue.pages[idx];
+      const page = this.issue.pages[idx]
       if (page) {
-        this.gotoPage(page);
+        this.gotoPage(page)
       }
     },
     gotoPage(page) {
@@ -729,10 +791,10 @@ export default {
           issue_uid: this.issue.uid,
           page_uid: page.uid,
         },
-      });
+      })
     },
     gotoArticle({ article }) {
-      console.info('gotoArticle:', article.uid);
+      console.info('gotoArticle:', article.uid)
       this.$router.push({
         name: 'article',
         params: {
@@ -743,35 +805,39 @@ export default {
         query: {
           tab: this.tab,
         },
-      });
+      })
     },
     keyDown(e) {
       switch (e.key) {
-      case 'ArrowLeft':
-      case 'ArrowUp':
-        e.preventDefault();
-        this.gotoPageIndex(this.currentPageIndex - 1);
-        break;
-      case 'ArrowRight':
-      case 'ArrowDown':
-        e.preventDefault();
-        this.gotoPageIndex(this.currentPageIndex + 1);
-        break;
-      default:
-        break;
+        case 'ArrowLeft':
+        case 'ArrowUp':
+          e.preventDefault()
+          this.gotoPageIndex(this.currentPageIndex - 1)
+          break
+        case 'ArrowRight':
+        case 'ArrowDown':
+          e.preventDefault()
+          this.gotoPageIndex(this.currentPageIndex + 1)
+          break
+        default:
+          break
       }
     },
     fullscreenChange() {
-      this.isFullscreen = !this.isFullscreen;
+      this.isFullscreen = !this.isFullscreen
     },
     toggleFullscreen() {
       if (!document.fullscreenElement) {
-        this.$refs.issuePage.$el.requestFullscreen().then(() => {
-        }).catch((err) => {
-          console.info(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
-        });
+        this.$refs.issuePage.$el
+          .requestFullscreen()
+          .then(() => {})
+          .catch(err => {
+            console.info(
+              `Error attempting to enable full-screen mode: ${err.message} (${err.name})`,
+            )
+          })
       } else {
-        document.exitFullscreen();
+        document.exitFullscreen()
       }
     },
   },
@@ -780,7 +846,6 @@ export default {
     IssueViewerText,
     ThumbnailSlider,
     TableOfContents,
-    Icon,
     SearchPills,
     Pagination,
     InfoButton,
@@ -790,18 +855,18 @@ export default {
     $route: {
       immediate: true,
       handler({ name, params, query }) {
-        console.info('@$route changed:', name, params, query);
-        this.init();
+        console.info('@$route changed:', name, params, query)
+        this.init()
       },
     },
   },
-};
+}
 </script>
 
 <style lang="scss">
-@import "impresso-theme/src/scss/variables.sass";
+@import 'impresso-theme/src/scss/variables.sass';
 
-div.marginalia{
+div.marginalia {
   // background: $clr-accent;
   // border: 2px solid black;
   section {
@@ -817,7 +882,7 @@ div.marginalia{
     position: absolute;
     right: 1em;
   }
-  h4{
+  h4 {
     font-weight: bold;
     padding-bottom: 1rem;
   }
@@ -831,7 +896,6 @@ div.marginalia{
   }
 }
 
-
 @supports (mix-blend-mode: multiply) {
   div.overlay-region {
     mix-blend-mode: multiply;
diff --git a/src/components/Recipe.vue b/src/components/Recipe.vue
index f15f3b65..aa4478fe 100644
--- a/src/components/Recipe.vue
+++ b/src/components/Recipe.vue
@@ -10,7 +10,7 @@
         <div class="Recipe__videoBackground "></div>
         <icon
           name="play"
-          scale="5"
+          scale="3"
           class="position-absolute"
           style="top:50%; left:50%;margin-left: -40px; margin-top: -30px"
         />
@@ -26,21 +26,8 @@
 </template>
 
 <script>
-import Icon from 'vue-awesome/components/Icon'
+import Icon from '@/components/base/Icon'
 
-Icon.register({
-  play: {
-    width: 24,
-    height: 24,
-    paths: [
-      {
-        style: 'fill:white; stroke:black; stroke-width:1px;',
-        d:
-          'M6.90588 4.53682C6.50592 4.2998 6 4.58808 6 5.05299V18.947C6 19.4119 6.50592 19.7002 6.90588 19.4632L18.629 12.5162C19.0211 12.2838 19.0211 11.7162 18.629 11.4838L6.90588 4.53682Z',
-      },
-    ],
-  },
-})
 export default {
   name: 'Recipe',
   components: {
diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
index 2829e6e1..76b0e2b2 100644
--- a/src/components/TheHeader.vue
+++ b/src/components/TheHeader.vue
@@ -212,7 +212,7 @@
 </template>
 
 <script>
-import Icon from 'vue-awesome/components/Icon'
+import Icon from '@/components/base/Icon'
 import JobItem from '@/components/modules/lists/JobItem'
 import Pagination from '@/components/modules/Pagination'
 import Logo from '@/components/Logo'
@@ -223,15 +223,6 @@ import { useSettingsStore } from '@/stores/settings'
 import { useUserStore } from '@/stores/user'
 import { useNotificationsStore } from '@/stores/notifications'
 
-Icon.register({
-  slack: {
-    width: 1664,
-    height: 1792,
-    d:
-      'M1519 776q62 0 103.5 40.5t41.5 101.5q0 97-93 130l-172 59 56 167q7 21 7 47 0 59-42 102t-101 43q-47 0-85.5-27t-53.5-72l-55-165-310 106 55 164q8 24 8 47 0 59-42 102t-102 43q-47 0-85-27t-53-72l-55-163-153 53q-29 9-50 9-61 0-101.5-40t-40.5-101q0-47 27.5-85t71.5-53l156-53-105-313-156 54q-26 8-48 8-60 0-101-40.5t-41-100.5q0-47 27.5-85t71.5-53l157-53-53-159q-8-24-8-47 0-60 42-102.5t102-42.5q47 0 85 27t53 72l54 160 310-105-54-160q-8-24-8-47 0-59 42.5-102t101.5-43q47 0 85.5 27.5t53.5 71.5l53 161 162-55q21-6 43-6 60 0 102.5 39.5t42.5 98.5q0 45-30 81.5t-74 51.5l-157 54 105 316 164-56q24-8 46-8zM725 1038l310-105-105-315-310 107z',
-  },
-})
-
 export default {
   // props: {
   //   searchQuery: Object,
@@ -599,10 +590,14 @@ export default {
       color: white;
     }
   }
+  .navbar-dark .dropdown.show .dropdown-toggle {
+    background-color: var(--clr-grey-100);
+    color: #fff;
+  }
   .navbar-dark .navbar-nav .nav-link:focus,
   .navbar-dark .navbar-nav .nav-link:hover {
     color: $clr-white;
-    background: transparent;
+    background: var(--clr-grey-100) !important;
   }
   &::before {
     position: absolute;
diff --git a/src/components/base/Icon.vue b/src/components/base/Icon.vue
new file mode 100644
index 00000000..71e0b7be
--- /dev/null
+++ b/src/components/base/Icon.vue
@@ -0,0 +1,142 @@
+<template>
+  <svg
+    :width="width * scale"
+    :height="height * scale"
+    :viewBox="computedSvgViewbox"
+    :class="{'Icon': true }"
+  >
+    <g>
+      <path
+        v-for="path in computedPaths"
+        :key="path.d"
+        :d="path.d"
+        :style="coerceStyleType(path.style)"
+        :strokeWidth="strokeWidth"
+      />
+      <polygon v-for="poly in computedPolygons" :key="poly.points" :points="poly.points" />
+    </g>
+  </svg>
+</template>
+<script setup lang="ts">
+// usage <icon name="slack" />
+import { computed, defineProps } from 'vue'
+import type { CSSProperties } from 'vue/types/jsx'
+
+interface Path {
+  d: string
+  style?: string
+}
+
+interface Polygon {
+  points: string
+}
+
+interface IconData {
+  width: number
+  height: number
+  paths: Path[]
+  polygons?: Polygon[]
+}
+
+const coerceStyleType = (style: string | undefined): CSSProperties => {
+  return style as any as CSSProperties
+}
+
+const Icons: Record<string, IconData> = {
+  slack: {
+    width: 1664,
+    height: 1792,
+    paths: [
+      {
+        d:
+          'M1519 776q62 0 103.5 40.5t41.5 101.5q0 97-93 130l-172 59 56 167q7 21 7 47 0 59-42 102t-101 43q-47 0-85.5-27t-53.5-72l-55-165-310 106 55 164q8 24 8 47 0 59-42 102t-102 43q-47 0-85-27t-53-72l-55-163-153 53q-29 9-50 9-61 0-101.5-40t-40.5-101q0-47 27.5-85t71.5-53l156-53-105-313-156 54q-26 8-48 8-60 0-101-40.5t-41-100.5q0-47 27.5-85t71.5-53l157-53-53-159q-8-24-8-47 0-60 42-102.5t102-42.5q47 0 85 27t53 72l54 160 310-105-54-160q-8-24-8-47 0-59 42.5-102t101.5-43q47 0 85.5 27.5t53.5 71.5l53 161 162-55q21-6 43-6 60 0 102.5 39.5t42.5 98.5q0 45-30 81.5t-74 51.5l-157 54 105 316 164-56q24-8 46-8zM725 1038l310-105-105-315-310 107z',
+      },
+    ],
+  },
+  play: {
+    width: 24,
+    height: 24,
+    paths: [
+      {
+        style: 'fill:white; stroke:black; stroke-width:1px;',
+        d:
+          'M6.90588 4.53682C6.50592 4.2998 6 4.58808 6 5.05299V18.947C6 19.4119 6.50592 19.7002 6.90588 19.4632L18.629 12.5162C19.0211 12.2838 19.0211 11.7162 18.629 11.4838L6.90588 4.53682Z',
+      },
+    ],
+  },
+  edit: {
+    width: 24,
+    height: 24,
+    paths: [
+      {
+        style: 'stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;',
+        d: 'M3 21L12 21H21',
+      },
+      {
+        style: 'stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;',
+        d:
+          'M12.2218 5.82839L15.0503 2.99996L20 7.94971L17.1716 10.7781M12.2218 5.82839L6.61522 11.435C6.42769 11.6225 6.32233 11.8769 6.32233 12.1421L6.32233 16.6776L10.8579 16.6776C11.1231 16.6776 11.3774 16.5723 11.565 16.3847L17.1716 10.7781M12.2218 5.82839L17.1716 10.7781',
+      },
+    ],
+  },
+  check: {
+    width: 24,
+    height: 24,
+    paths: [
+      {
+        style: 'stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;',
+        d: 'M7 12.5L10 15.5L17 8.5',
+      },
+      {
+        d:
+          'M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z',
+      },
+    ],
+  },
+}
+
+const props = defineProps({
+  name: {
+    type: String,
+    default: 'slack',
+  },
+  scale: {
+    type: Number,
+    default: 1,
+  },
+  paths: {
+    type: Array,
+    default: () => [],
+  },
+  polygons: {
+    type: Array,
+    default: () => [],
+  },
+  width: {
+    type: Number,
+    default: 24,
+  },
+  height: {
+    type: Number,
+    default: 24,
+  },
+  strokeWidth: {
+    type: Number,
+    default: 1,
+  },
+})
+
+const computedPaths = computed(() => (props.paths.length ? props.paths as any as Path[] : Icons[props.name].paths))
+const computedPolygons = computed(() =>
+  props.polygons.length ? props.polygons as Polygon[] : Icons[props.name].polygons,
+)
+const computedSvgViewbox = computed(() => {
+  const { width, height } = Icons[props.name]
+  return `0 0 ${width} ${height}`
+})
+</script>
+<style scoped>
+svg {
+  fill: currentColor;
+}
+</style>
diff --git a/src/components/layout/RadioGroupItem.vue b/src/components/layout/RadioGroupItem.vue
index cfee4e01..415bed18 100644
--- a/src/components/layout/RadioGroupItem.vue
+++ b/src/components/layout/RadioGroupItem.vue
@@ -2,16 +2,30 @@
   <label
     v-if="props.type === 'button'"
     class="btn btn-outline-primary btn-sm"
-    :class="{active: props.modelValue }">
-    <input type="radio" :value="props.option.value" :checked="props.modelValue" @change="handleChanged">
-    <Icon v-if="option.iconName != null && option.iconPosition == 'left'" :name="option.iconName"/>
+    :class="{ active: props.modelValue }"
+  >
+    <input
+      type="radio"
+      :value="props.option.value"
+      :checked="props.modelValue"
+      @change="handleChanged"
+    />
+    <Icon v-if="option.iconName != null && option.iconPosition == 'left'" :name="option.iconName" />
     {{ option.text }}
-    <Icon v-if="option.iconName != null && ['right', undefined].includes(option.iconPosition)" :name="option.iconName"/>
+    <Icon
+      v-if="option.iconName != null && ['right', undefined].includes(option.iconPosition)"
+      :name="option.iconName"
+    />
   </label>
-  <div
-    v-else-if="props.type === 'radio'"
-    class="custom-control custom-control-inline custom-radio">
-    <input type="radio" class="custom-control-input" :value="option.value" :id="uid" :checked="props.modelValue" @change="handleChanged">
+  <div v-else-if="props.type === 'radio'" class="custom-control custom-control-inline custom-radio">
+    <input
+      type="radio"
+      class="custom-control-input"
+      :value="option.value"
+      :id="uid"
+      :checked="props.modelValue"
+      @change="handleChanged"
+    />
     <label class="custom-control-label" :for="uid">
       <span v-html="option.text"></span>
     </label>
@@ -21,8 +35,7 @@
 <script setup lang="ts">
 import { PropType, computed } from 'vue'
 import uuid from 'uuid'
-import Icon from 'vue-awesome/components/Icon.vue'
-
+import Icon from '@/components/base/Icon.vue'
 
 export interface Option {
   value: string
@@ -34,7 +47,7 @@ export interface Option {
 
 const props = defineProps({
   modelValue: {
-    type: Boolean
+    type: Boolean,
   },
   type: {
     type: String as PropType<'radio' | 'button'>,
@@ -53,5 +66,4 @@ const handleChanged = () => {
   if (props.modelValue) return
   emit('update:modelValue', true)
 }
-
 </script>
diff --git a/src/components/modules/FilterNamedEntity.vue b/src/components/modules/FilterNamedEntity.vue
deleted file mode 100644
index 7908a763..00000000
--- a/src/components/modules/FilterNamedEntity.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template lang="html">
-  <filter-wrapper
-    v-on:remove="remove"
-    icon="network-1"
-    v-bind:title="filter.item.name"
-    v-bind:id="filter.key">
-    <div slot="settings">
-      <filter-setting-context v-model="filter" />
-    </div>
-    <div class="p-2">
-      <icon v-if="filter.item.hasLabel('person')" name="user-circle"></icon>
-      <icon v-if="filter.item.hasLabel('location')" name="map-marker"></icon>
-      {{filter.item.name}}
-    </div>
-  </filter-wrapper>
-</template>
-
-<script>
-/**
- * @deprecated Not used anywhere.
- */
-
-import Icon from 'vue-awesome/components/Icon';
-
-import 'vue-awesome/icons/user-circle';
-import 'vue-awesome/icons/map-marker';
-
-import FilterSettingContext from './FilterSettingContext';
-import FilterWrapper from './FilterWrapper';
-
-export default {
-  model: {
-    prop: 'filter',
-  },
-  props: ['filter'],
-  methods: {
-    submitFilter() {
-      this.$emit('submit');
-    },
-    remove() {
-      this.$emit('remove');
-    },
-  },
-  components: {
-    Icon,
-    FilterSettingContext,
-    FilterWrapper,
-  },
-};
-</script>
-
-<i18n>
-{
-  "en": {
-    "label": {
-      "person": "Person",
-      "location": "Location"
-    }
-  },
-  "fr": {
-    "label": {
-      "person": "Personne",
-      "location": "Localisation"
-    }
-  },
-  "nl": {
-    "label": {
-      "person": "Persoon",
-      "location": "Locatie"
-    }
-  }
-}
-</i18n>
diff --git a/src/components/modules/FilterRegex.vue b/src/components/modules/FilterRegex.vue
index ffe41303..2d6d9fad 100644
--- a/src/components/modules/FilterRegex.vue
+++ b/src/components/modules/FilterRegex.vue
@@ -3,7 +3,8 @@
     v-bind:id="filter.key"
     v-bind:title="filter.query"
     icon="rocket"
-    v-on:remove="remove">
+    v-on:remove="remove"
+  >
     <b-input
       type="text"
       v-model="filter.query"
@@ -23,12 +24,9 @@
  * @deprecated Not used anywhere.
  */
 
-import FilterFactory from '@/models/FilterFactory';
+import FilterFactory from '@/models/FilterFactory'
 
-import 'vue-awesome/icons/edit';
-import 'vue-awesome/icons/check';
-
-import FilterWrapper from './FilterWrapper';
+import FilterWrapper from './FilterWrapper'
 
 export default {
   data: () => ({
@@ -40,23 +38,23 @@ export default {
   props: ['filter'],
   methods: {
     updateFilter() {
-      this.$emit('input', FilterFactory.create(this.filter));
+      this.$emit('input', FilterFactory.create(this.filter))
     },
     submitFilter() {
-      this.$emit('submit');
-      this.disabled = true;
+      this.$emit('submit')
+      this.disabled = true
     },
     remove() {
-      this.$emit('remove');
+      this.$emit('remove')
     },
     editFilter() {
-      this.disabled = false;
+      this.disabled = false
     },
   },
   components: {
     FilterWrapper,
   },
-};
+}
 </script>
 
 <i18n>
diff --git a/src/components/modules/FilterString.vue b/src/components/modules/FilterString.vue
index 6867e706..6a43730f 100644
--- a/src/components/modules/FilterString.vue
+++ b/src/components/modules/FilterString.vue
@@ -1,4 +1,4 @@
-<template lang="html">
+<template>
   <filter-wrapper v-on:remove="remove" v-bind:title="filter.query" :id="filter.key">
     <div slot="settings">
       <div class="input-group mb-3">
@@ -10,8 +10,12 @@
           v-bind:disabled="disabled"
           size="sm"
         />
-        <b-button v-on:click="editFilter" v-show="disabled" size="sm"><icon name="edit" /></b-button>
-        <b-button v-on:click="submitFilter" v-show="!disabled" size="sm"><icon name="check" /></b-button>
+        <b-button v-on:click="editFilter" v-show="disabled" size="sm">
+          <icon name="edit"
+        /></b-button>
+        <b-button v-on:click="submitFilter" v-show="!disabled" size="sm">
+          <icon name="check" />
+        </b-button>
       </div>
       <i-layout>
         <i-layout-section width="50%">
@@ -30,15 +34,12 @@
  * @deprecated Not used anywhere.
  */
 
-import Icon from 'vue-awesome/components/Icon';
-import FilterFactory from '@/models/FilterFactory';
+import Icon from '@/components/base/Icon'
+import FilterFactory from '@/models/FilterFactory'
 
-import 'vue-awesome/icons/edit';
-import 'vue-awesome/icons/check';
-
-import FilterSettingContext from './FilterSettingContext';
-import FilterSettingPrecision from './FilterSettingPrecision';
-import FilterWrapper from './FilterWrapper';
+import FilterSettingContext from './FilterSettingContext'
+import FilterSettingPrecision from './FilterSettingPrecision'
+import FilterWrapper from './FilterWrapper'
 
 export default {
   data: () => ({
@@ -50,17 +51,17 @@ export default {
   props: ['filter'],
   methods: {
     updateFilter() {
-      this.$emit('input', FilterFactory.create(this.filter));
+      this.$emit('input', FilterFactory.create(this.filter))
     },
     submitFilter() {
-      this.$emit('submit');
-      this.disabled = true;
+      this.$emit('submit')
+      this.disabled = true
     },
     remove() {
-      this.$emit('remove');
+      this.$emit('remove')
     },
     editFilter() {
-      this.disabled = false;
+      this.disabled = false
     },
   },
   components: {
@@ -69,7 +70,7 @@ export default {
     FilterSettingPrecision,
     Icon,
   },
-};
+}
 </script>
 
 <i18n>
diff --git a/src/components/modules/IssueViewerText.vue b/src/components/modules/IssueViewerText.vue
index cfd2bf93..9b1014eb 100644
--- a/src/components/modules/IssueViewerText.vue
+++ b/src/components/modules/IssueViewerText.vue
@@ -20,7 +20,7 @@
         <a class="dripicons dripicons-cross" v-on:click="onRemoveCollection(collection, article)" />
       </b-badge>
       <div class="alert alert-light" role="alert" v-if="!article.isCC">
-        <p>{{ $t('wrongLayout') }} <icon name="image" /></p>
+        <p>{{ $t('wrongLayout') }}</p>
       </div>
       <div v-if="hasValidRegions === false">
         <p>{{ article.excerpt }}</p>
@@ -105,7 +105,6 @@
 
 <script>
 import { mapStores } from 'pinia'
-import Icon from 'vue-awesome/components/Icon'
 import { articlesSuggestions, articleTextReusePassages } from '@/services'
 import CollectionAddTo from './CollectionAddTo'
 import SearchResultsSimilarItem from './SearchResultsSimilarItem'
@@ -239,7 +238,6 @@ export default {
     ArticleItem,
     CollectionAddTo,
     SearchResultsSimilarItem,
-    Icon,
     AnnotatedText,
     InfoButton,
   },
diff --git a/src/main.js b/src/main.js
index 799ad84a..c9c0cdf6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,7 +2,6 @@
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import VueI18n from 'vue-i18n'
-import VueGtag from 'vue-gtag'
 import { createPinia, PiniaVuePlugin } from 'pinia'
 import { createPersistedState } from 'pinia-plugin-persistedstate'
 
@@ -44,17 +43,6 @@ pinia.use(createPersistedState({
   key: id => `__impresso__${id}`,
 }))
 
-if (process.env.VUE_APP_GA_TRACKING_ID) {
-  Vue.use(
-    VueGtag,
-    {
-      config: {
-        id: process.env.VUE_APP_GA_TRACKING_ID,
-      },
-    },
-    router,
-  )
-}
 Vue.config.productionTip = process.env.NODE_ENV === 'production'
 Vue.config.errorHandler = error => {
   const notificationsStore = useNotificationsStore()
diff --git a/src/pages/IssueViewerPage.vue b/src/pages/IssueViewerPage.vue
index fe29a130..e4212451 100644
--- a/src/pages/IssueViewerPage.vue
+++ b/src/pages/IssueViewerPage.vue
@@ -5,64 +5,97 @@
       :hide-pagination="!displayOnlyMatchingArticles"
       :paginationList="paginationList"
       @change-page="handleMatchingArticlesChangePage"
-      width="350px">
+      width="350px"
+    >
       <template v-slot:header v-if="issue">
         <b-tabs pills class="mx-2 pt-2">
           <template v-slot:tabs-start>
             <b-nav-item active-class="active" active>
-              <span v-html="$t('table_of_contents')"/>
+              <span v-html="$t('table_of_contents')" />
             </b-nav-item>
           </template>
           <template v-slot:default>
             <div class="p-2 px-3 mb-1">
-              <p v-html="$t('stats', {
-                countArticles: issue.countArticles,
-                countPages: issue.countPages,
-                accessRights: $t(`buckets.accessRight.${issue.accessRights }`)
-              })" />
+              <p
+                v-html="
+                  $t('stats', {
+                    countArticles: issue.countArticles,
+                    countPages: issue.countPages,
+                    accessRights: $t(`buckets.accessRight.${issue.accessRights}`),
+                  })
+                "
+              />
               <form class="pb-1 form-inline">
                 <b-form-checkbox
                   :disabled="countActiveFilters === 0"
                   v-model="applyCurrentSearchFilters"
-                  switch>
+                  switch
+                >
                   {{ $t('actions.addCurrentSearch') }}
                 </b-form-checkbox>
               </form>
-              <b-alert variant="transparent" class="pb-1 small" show v-if="(countActiveFilters === 0 || ignoredFilters.length)">
+              <b-alert
+                variant="transparent"
+                class="pb-1 small"
+                show
+                v-if="countActiveFilters === 0 || ignoredFilters.length"
+              >
                 <div v-if="countActiveFilters === 0">
                   {{ $t('applyCurrentSearchFiltersDisabled') }}
                 </div>
-                <span v-if="ignoredFilters.length"
-                  v-html="$tc('numbers.ignoredFilters', ignoredFilters.length)">
+                <span
+                  v-if="ignoredFilters.length"
+                  v-html="$tc('numbers.ignoredFilters', ignoredFilters.length)"
+                >
                 </span>
               </b-alert>
-              <search-pills disable-reset
+              <search-pills
+                disable-reset
                 v-if="applyCurrentSearchFilters"
                 :filters="filters"
                 @changed="handleFiltersChanged"
                 class="pb-1"
               />
-              <b-input class="mb-2" v-model.trim="suggestionQuery"
-                debounce="500" :placeholder="$t('label_filter_articles')" />
-                <!-- <b-form-checkbox :disabled="!hasMatchingArticles"
+              <b-input
+                class="mb-2"
+                v-model.trim="suggestionQuery"
+                debounce="500"
+                :placeholder="$t('label_filter_articles')"
+              />
+              <!-- <b-form-checkbox :disabled="!hasMatchingArticles"
                   v-model="displayOnlyMatchingArticles"
                   switch>
                   <span v-html="$tc('filter_included_only', paginationTotalRows)"/>
                 </b-form-checkbox> -->
               <div class="mb-2 IssueViewerPage_matchingArticles" v-if="hasMatchingArticles">
                 <div v-if="isLoadingServiceQuery">{{ $t('actions.loading') }}</div>
-                <div v-else-if="applyCurrentSearchFilters && !suggestionQuery.length" v-html="$tc('numbers.articlesMatchingSearchFilters', matchingArticles.length, {
-                    n: $n(matchingArticles.length),
-                    q: suggestionQuery,
-                })"/>
-                <div v-else-if="applyCurrentSearchFilters" v-html="$tc('numbers.articlesMatchingWithinSearch', matchingArticles.length, {
-                    n: $n(matchingArticles.length),
-                    q: suggestionQuery,
-                })"/>
-                <div v-else v-html="$tc('numbers.articlesMatching', matchingArticles.length, {
-                    n: $n(matchingArticles.length),
-                    q: suggestionQuery,
-                })"/>
+                <div
+                  v-else-if="applyCurrentSearchFilters && !suggestionQuery.length"
+                  v-html="
+                    $tc('numbers.articlesMatchingSearchFilters', matchingArticles.length, {
+                      n: $n(matchingArticles.length),
+                      q: suggestionQuery,
+                    })
+                  "
+                />
+                <div
+                  v-else-if="applyCurrentSearchFilters"
+                  v-html="
+                    $tc('numbers.articlesMatchingWithinSearch', matchingArticles.length, {
+                      n: $n(matchingArticles.length),
+                      q: suggestionQuery,
+                    })
+                  "
+                />
+                <div
+                  v-else
+                  v-html="
+                    $tc('numbers.articlesMatching', matchingArticles.length, {
+                      n: $n(matchingArticles.length),
+                      q: suggestionQuery,
+                    })
+                  "
+                />
               </div>
             </div>
           </template>
@@ -83,8 +116,8 @@
       <!-- header -->
       <div slot="header" class="border-bottom" v-if="issue">
         <b-navbar variant="light" class="px-0 py-0 border-bottom">
-          <b-navbar-nav class='p-2 pl-3'>
-            <section >
+          <b-navbar-nav class="p-2 pl-3">
+            <section>
               <h3 class="m-0">
                 <b>{{ issue.newspaper.name }}</b> &middot;
                 <span class="date">{{ $d(issue.date, 'long') }}</span>
@@ -93,20 +126,33 @@
           </b-navbar-nav>
           <b-navbar-nav class="ml-auto mr-2" v-show="!isArticleTextDisplayed">
             <WithTooltip :content="$t('label_previous_page')" delay>
-              <b-button class="border-dark" variant="light" size="sm"
+              <b-button
+                class="border-dark"
+                variant="light"
+                size="sm"
                 :disabled="currentPageIndex === 0"
-                @click="changeCurrentPageIndex(currentPageIndex - 1)">
+                @click="changeCurrentPageIndex(currentPageIndex - 1)"
+              >
                 <div class="dripicons dripicons-media-previous pt-1"></div>
               </b-button>
             </WithTooltip>
-            <div class="px-2 pt-1 border-top border-bottom" v-html="$t('ppOf', {
-              num: page.num,
-              pages: issue.pages.length
-            })"></div>
+            <div
+              class="px-2 pt-1 border-top border-bottom"
+              v-html="
+                $t('ppOf', {
+                  num: page.num,
+                  pages: issue.pages.length,
+                })
+              "
+            ></div>
             <WithTooltip :content="$t('label_next_page')" delay>
-              <b-button class="border-dark" variant="light" size="sm"
-                :disabled="(currentPageIndex + 1) === issue.pages.length"
-                @click="changeCurrentPageIndex(currentPageIndex + 1)">
+              <b-button
+                class="border-dark"
+                variant="light"
+                size="sm"
+                :disabled="currentPageIndex + 1 === issue.pages.length"
+                @click="changeCurrentPageIndex(currentPageIndex + 1)"
+              >
                 <div class="dripicons dripicons-media-next pt-1"></div>
               </b-button>
             </WithTooltip>
@@ -114,10 +160,15 @@
         </b-navbar>
         <b-navbar variant="light" class="px-0 py-0">
           <b-navbar-nav class="ml-auto p-2" v-if="!isArticleTextDisplayed">
-            <WithTooltip placement="top" :content="!outlinesVisible ? $t('toggle_outlines_on') : $t('toggle_outlines_off')">
+            <WithTooltip
+              placement="top"
+              :content="!outlinesVisible ? $t('toggle_outlines_on') : $t('toggle_outlines_off')"
+            >
               <b-button
-                :variant="outlinesVisible ? 'primary' : 'outline-primary'" size="sm"
-                @click="outlinesVisible = !outlinesVisible">
+                :variant="outlinesVisible ? 'primary' : 'outline-primary'"
+                size="sm"
+                @click="outlinesVisible = !outlinesVisible"
+              >
                 <div class="d-flex flex-row align-items-center">
                   <div class="d-flex dripicons dripicons-duplicate my-1" />
                   <!-- <div v-if="outlinesVisible">{{$t('toggle_outlines_on')}}</div> -->
@@ -125,7 +176,7 @@
                 </div>
               </b-button>
             </WithTooltip>
-            <WithTooltip placement="top" :content="!isFullscreen ? $t('toggle_fullscreen_on') : $t('toggle_fullscreen_off')">
+            <!-- <WithTooltip placement="top" :content="!isFullscreen ? $t('toggle_fullscreen_on') : $t('toggle_fullscreen_off')">
               <b-button
                 :variant="isFullscreen ? 'primary' : 'outline-primary'"
                 size="sm"
@@ -135,21 +186,30 @@
                   <div class="d-flex dripicons my-1" :class="{ 'dripicons-contract': isFullscreen, 'dripicons-expand': !isFullscreen}" />
                 </div>
               </b-button>
-            </WithTooltip>
+            </WithTooltip> -->
           </b-navbar-nav>
 
           <b-navbar-nav class="ml-auto p-2" v-if="selectedArticle">
-
             <collection-add-to :item="selectedArticle" :text="$t('add_to_collection')" />
 
             <b-button-group class="ml-2">
-              <b-button size="sm" :class="{ active: !isArticleTextDisplayed }" variant="outline-primary" @click="isArticleTextDisplayed = false">
+              <b-button
+                size="sm"
+                :class="{ active: !isArticleTextDisplayed }"
+                variant="outline-primary"
+                @click="isArticleTextDisplayed = false"
+              >
                 <div class="d-flex align-items-center">
                   {{ $t('facsimileView') }}
                   <div class="d-flex dripicons dripicons-article ml-2" />
                 </div>
               </b-button>
-              <b-button size="sm" :class="{ active: isArticleTextDisplayed }" variant="outline-primary" @click="isArticleTextDisplayed = true">
+              <b-button
+                size="sm"
+                :class="{ active: isArticleTextDisplayed }"
+                variant="outline-primary"
+                @click="isArticleTextDisplayed = true"
+              >
                 <div class="d-flex align-items-center">
                   {{ $t('closeReadingView') }}
                   <div class="d-flex dripicons dripicons-align-justify ml-2" />
@@ -160,40 +220,47 @@
         </b-navbar>
       </div>
       <!-- content -->
-      <div class="d-flex h-100 justify-content-center position-relative"  v-if="issue">
+      <div class="d-flex h-100 justify-content-center position-relative" v-if="issue">
         <div class="d-flex h-100 justify-content-center" v-if="!isContentAvailable">
           <div class="align-self-center">
             <p>{{ $t('errors.loggedInOnly') }}</p>
-            <br/>
-            <b-button @click="handleLoginClick()" block size="sm" variant="outline-primary">{{ $t('actions.login') }}</b-button>
+            <br />
+            <b-button @click="handleLoginClick()" block size="sm" variant="outline-primary">{{
+              $t('actions.login')
+            }}</b-button>
           </div>
         </div>
         <open-seadragon-article-viewer
           :class="{ 'show-outlines': outlinesVisible }"
-          :style="(isContentAvailable && !isArticleTextDisplayed) ? {} : { display: 'none' }"
+          :style="isContentAvailable && !isArticleTextDisplayed ? {} : { display: 'none' }"
           :pages="pagesIIIFUrls"
           :regions="regions"
           :defaultCurrentPageIndex="currentPageIndex"
           :article="{ uid: articleId }"
           :marginaliaSections="marginaliaSections"
           @page-changed="changeCurrentPageIndex"
-          @article-selected="handleArticleIdSelectedInViewer"/>
+          @article-selected="handleArticleIdSelectedInViewer"
+        />
 
         <issue-viewer-text
           v-if="isContentAvailable && articleId != null && isArticleTextDisplayed"
-          :article_uid="articleId"/>
+          :article_uid="articleId"
+        />
 
         <issue-viewer-bookmarker
           @remove-selection="handleRemoveSelection"
           @click-full-text="showArticleText(selectedArticle.uid)"
           :article="selectedArticle"
-          :visible="!isArticleTextDisplayed"/>
+          :visible="!isArticleTextDisplayed"
+        />
 
-        <div class="position-absolute d-flex drop-shadow bg-dark border-radius" style="bottom: 1rem" v-if="!isArticleTextDisplayed">
+        <div
+          class="position-absolute d-flex drop-shadow bg-dark border-radius"
+          style="bottom: 1rem"
+          v-if="!isArticleTextDisplayed"
+        >
           <div v-for="(item, i) in issue.pages" :key="i" @click="changeCurrentPageIndex(i)">
-            <page-item class="bg-dark p-2"
-            :active="pageId === item.uid"
-            :item="item" />
+            <page-item class="bg-dark p-2" :active="pageId === item.uid" :item="item" />
           </div>
         </div>
       </div>
@@ -212,25 +279,28 @@ import {
   articles as articlesService,
   search as searchService,
   images as imagesService,
-  getAuthenticationBearer
+  getAuthenticationBearer,
 } from '@/services'
 import { getQueryParameter } from '@/router/util'
 import { getPageId, getShortArticleId, getLongArticleId } from '@/logic/ids'
-import { searchQueryGetter, searchQuerySetter, mapApplyCurrentSearchFilters } from '@/logic/queryParams'
-import SearchQuery, { getFilterQuery } from '@/models/SearchQuery';
+import {
+  searchQueryGetter,
+  searchQuerySetter,
+  mapApplyCurrentSearchFilters,
+} from '@/logic/queryParams'
+import SearchQuery, { getFilterQuery } from '@/models/SearchQuery'
 import Issue from '@/models/Issue'
 import Article from '@/models/Article'
 import TableOfContents from '@/models/TableOfContents'
 import SearchPills from '@/components/SearchPills'
 import IssueViewerBookmarker from '@/components/IssueViewerBookmarker'
 import IssueViewerTableOfContents from '@/components/IssueViewerTableOfContents'
-import CollectionAddTo from '@/components/modules/CollectionAddTo';
+import CollectionAddTo from '@/components/modules/CollectionAddTo'
 import WithTooltip from '@/components/base/WithTooltip.vue'
 import { mapStores } from 'pinia'
 import { useEntitiesStore } from '@/stores/entities'
 import { useUserStore } from '@/stores/user'
 
-
 /**
  * @typedef {import('@/models').Filter} Filter
  * @typedef {import('@/models/ArticleBase').default} ArticleBase
@@ -240,9 +310,9 @@ const Params = Object.freeze({ IssueId: 'issue_uid' })
 const QueryParams = Object.freeze({
   PageNumber: 'p',
   ArticleId: 'articleId',
-  TextMode: 'text'
+  TextMode: 'text',
 })
-const AllowedFilterTypes = ['title', 'string', 'location', 'topic', 'person'];
+const AllowedFilterTypes = ['title', 'string', 'location', 'topic', 'person']
 
 export default {
   data: () => ({
@@ -272,27 +342,27 @@ export default {
     IssueViewerBookmarker,
     IssueViewerTableOfContents,
     CollectionAddTo,
-    WithTooltip
+    WithTooltip,
   },
   mounted() {
     if (this.suggestionQuery.length) {
-      this.displayOnlyMatchingArticles = true;
+      this.displayOnlyMatchingArticles = true
     }
     this.headers = {
-      Authorization: 'Bearer ' + getAuthenticationBearer() ?? ''
+      Authorization: 'Bearer ' + getAuthenticationBearer() ?? '',
     }
   },
   created() {
     // eslint-disable-next-line
     console.debug('[IssueViewerPage] created()')
-    window.addEventListener('fullscreenchange', this.fullscreenChange);
-    window.addEventListener('keydown', this.keyDown);
+    window.addEventListener('fullscreenchange', this.fullscreenChange)
+    window.addEventListener('keydown', this.keyDown)
   },
   destroyed() {
     // eslint-disable-next-line
     console.debug('[IssueViewerPage] destroyed()')
-    window.removeEventListener('fullscreenchange', this.fullscreenChange);
-    window.removeEventListener('keydown', this.keyDown);
+    window.removeEventListener('fullscreenchange', this.fullscreenChange)
+    window.removeEventListener('keydown', this.keyDown)
   },
   computed: {
     ...mapStores(useEntitiesStore, useUserStore),
@@ -308,30 +378,33 @@ export default {
     /** @returns {Filter[]} */
     filters() {
       // filter by type
-      return this.searchQuery.filters
-        .filter(({ type }) => AllowedFilterTypes.includes(type));
+      return this.searchQuery.filters.filter(({ type }) => AllowedFilterTypes.includes(type))
     },
     /** @returns {Filter[]} */
     ignoredFilters() {
-      return this.searchQuery.filters
-        .filter(({ type }) => !AllowedFilterTypes.includes(type))
+      return this.searchQuery.filters.filter(({ type }) => !AllowedFilterTypes.includes(type))
     },
     /** @returns {number} */
     countActiveFilters() {
-      return this.filters.length;
+      return this.filters.length
     },
     /** @returns {boolean} */
     hasMatchingArticles() {
-      return this.suggestionQuery.length > 0 || (this.applyCurrentSearchFilters && this.countActiveFilters > 0)
+      return (
+        this.suggestionQuery.length > 0 ||
+        (this.applyCurrentSearchFilters && this.countActiveFilters > 0)
+      )
     },
     /** @returns {string} */
-    issueId() { return this.$route.params[Params.IssueId] },
+    issueId() {
+      return this.$route.params[Params.IssueId]
+    },
     /** @returns {string|undefined} */
     pageId: {
       /** @return {string|undefined} */
       get() {
         return getPageId(this.issueId, this.currentPageIndex)
-      }
+      },
     },
     /** @returns {string|undefined} */
     articleId() {
@@ -344,7 +417,7 @@ export default {
      */
     selectedArticle() {
       if (!this.tableOfContents) {
-        return undefined;
+        return undefined
       }
       return this.tableOfContents.articles.find(d => d.uid === this.articleId)
     },
@@ -358,7 +431,7 @@ export default {
       set(q) {
         this.$navigation.updateQueryParametersWithHistory({
           [QueryParams.TextMode]: q ? '1' : undefined,
-        });
+        })
       },
     },
     /** @returns {import('@/models/Page').default|undefined} */
@@ -376,25 +449,27 @@ export default {
       const articles = this.pagesArticles[this.currentPageIndex]
       if (articles == null) return []
 
-      return articles.flatMap(article => article.regions.map(region => ({
-        articleUid: article.uid,
-        pageUid: this.pageId,
-        coords: region.coords
-      })))
+      return articles.flatMap(article =>
+        article.regions.map(region => ({
+          articleUid: article.uid,
+          pageUid: this.pageId,
+          coords: region.coords,
+        })),
+      )
     },
     /** @returns {import('@/models/ArticleBase').default[]} */
     tableOfContentsArticles() {
       let items = []
       if (this.hasMatchingArticles) {
-        items = this.matchingArticles;
+        items = this.matchingArticles
       } else if (this.tableOfContents) {
-        items = this.tableOfContents.articles;
+        items = this.tableOfContents.articles
       }
       // enrich with corresponding images
       if (!this.issueImages.length) {
-        return items;
+        return items
       }
-      return items.map((d) => {
+      return items.map(d => {
         if (this.issueImagesIndex[d.uid]) {
           d.setImages(this.issueImagesIndex[d.uid])
         }
@@ -408,10 +483,10 @@ export default {
       },
       /** @param {string} q */
       set(q) {
-        this.paginationCurrentPage = 1;
+        this.paginationCurrentPage = 1
         this.$navigation.updateQueryParametersWithHistory({
           q,
-        });
+        })
       },
     },
     /** @returns {{ q: string, limit: number, page: number, issueUid?: string, filters: Filter[] }} */
@@ -421,13 +496,11 @@ export default {
         limit: this.paginationPerPage,
         page: this.paginationCurrentPage,
         issueUid: this.issue?.uid,
-        filters: this.applyCurrentSearchFilters
-          ? this.filters.map(getFilterQuery)
-          : [],
+        filters: this.applyCurrentSearchFilters ? this.filters.map(getFilterQuery) : [],
       }
       // eslint-disable-next-line
       console.debug('[IssueViewerPage] computed serviceQuery', sq)
-      return sq;
+      return sq
     },
     /** @returns {any} */
     paginationList() {
@@ -435,25 +508,28 @@ export default {
         perPage: this.paginationPerPage,
         currentPage: this.paginationCurrentPage,
         totalRows: this.paginationTotalRows,
-      };
+      }
     },
     currentPageIndex: {
       /** @returns {number} */
       get() {
-        if (!this.issue) return -1;
-        const pageNumber = parseInt(/** @type {string} */ (getQueryParameter(this, QueryParams.PageNumber)), 10)
-        if (isNaN(pageNumber)) return 0;
+        if (!this.issue) return -1
+        const pageNumber = parseInt(
+          /** @type {string} */ (getQueryParameter(this, QueryParams.PageNumber)),
+          10,
+        )
+        if (isNaN(pageNumber)) return 0
         // handle missing pages.
-        return this.issue.pages.findIndex(p => p.num === pageNumber);
+        return this.issue.pages.findIndex(p => p.num === pageNumber)
       },
       /** @param {number} index */
       set(index) {
         // set page num in query fro the page corresponding to the right currentPageIndex
-        const pageNumber = this.issue?.pages[index]?.num;
+        const pageNumber = this.issue?.pages[index]?.num
         this.$navigation.updateQueryParameters({
-          [QueryParams.PageNumber]: pageNumber
+          [QueryParams.PageNumber]: pageNumber,
         })
-      }
+      },
     },
     /** @returns {import('@/models/User').default} */
     currentUser() {
@@ -469,7 +545,7 @@ export default {
     /** @returns {any[]} */
     marginaliaSections() {
       return this.pagesMarginalia[this.currentPageIndex] ?? []
-    }
+    },
   },
   watch: {
     issueId: {
@@ -478,14 +554,16 @@ export default {
         this.issue = new Issue(await issuesService.get(id))
         this.tableOfContents = new TableOfContents(await tableOfContentsService.get(id))
         // / load images
-        this.issueImages = await imagesService.find({
-          query: {
-            filters:[{ type:'issue', q:id }],
-            limit: 100
-          },
-        }).then(({ data }) => data)
+        this.issueImages = await imagesService
+          .find({
+            query: {
+              filters: [{ type: 'issue', q: id }],
+              limit: 100,
+            },
+          })
+          .then(({ data }) => data)
         // remap images by article property
-        this.issueImagesIndex = this.issueImages.reduce((acc, d)=> {
+        this.issueImagesIndex = this.issueImages.reduce((acc, d) => {
           if (!d.article) {
             console.warn('Article property not found on image', d)
             return acc
@@ -498,17 +576,14 @@ export default {
           return acc
         }, {})
       },
-      immediate: true
+      immediate: true,
     },
     currentPageIndex: {
       /** @param {number} pageIndex */
       async handler(pageIndex) {
-        await Promise.all([
-          this.loadRegions(pageIndex),
-          this.loadMarginalia(pageIndex)
-        ])
+        await Promise.all([this.loadRegions(pageIndex), this.loadMarginalia(pageIndex)])
       },
-      immediate: true
+      immediate: true,
     },
     serviceQuery: {
       /**
@@ -522,34 +597,39 @@ export default {
         const oldParamsStr = JSON.stringify(oldParams)
         if (newParamsStr === oldParamsStr) {
           // Params are the same: ${newParamsStr} ${oldParamsStr}`)
-          return;
+          return
         }
-        if (this.issue == null) return;
+        if (this.issue == null) return
         // eslint-disable-next-line
         console.debug('[IssueViewerPage] @serviceQuery changed, params:', params)
-        const { q, limit, page, issueUid, filters } = params;
-        this.matchingArticles = [];
+        const { q, limit, page, issueUid, filters } = params
+        this.matchingArticles = []
         if (q.length > 1 || filters.length) {
           const additionalFilters = [{ type: 'issue', q: issueUid }]
           if (q.length > 1) {
-            const regex = /\*+$/i;
-            additionalFilters.push({ type: 'string', q: (q + '*').replace(regex, '*') });
+            const regex = /\*+$/i
+            additionalFilters.push({ type: 'string', q: (q + '*').replace(regex, '*') })
           }
           this.isLoadingServiceQuery = true
-          searchService.find({
-            lock: false,
-            query: {
-              filters: filters.concat(additionalFilters),
-              page, limit, group_by: 'articles'
-            },
-          }).then(({ data, total }) => {
-            this.paginationTotalRows = total;
-            this.matchingArticles = data.map(article => new Article(article));
-            this.isLoadingServiceQuery = false;
-          }).catch((err) => {
-            console.warn('[IssueViewerPage] @serviceQuery Error', err)
-            this.isLoadingServiceQuery = false;
-          });
+          searchService
+            .find({
+              lock: false,
+              query: {
+                filters: filters.concat(additionalFilters),
+                page,
+                limit,
+                group_by: 'articles',
+              },
+            })
+            .then(({ data, total }) => {
+              this.paginationTotalRows = total
+              this.matchingArticles = data.map(article => new Article(article))
+              this.isLoadingServiceQuery = false
+            })
+            .catch(err => {
+              console.warn('[IssueViewerPage] @serviceQuery Error', err)
+              this.isLoadingServiceQuery = false
+            })
         }
       },
       immediate: true,
@@ -562,55 +642,59 @@ export default {
     keyDown(e) {
       if (e.shiftKey) {
         switch (e.key) {
-        case 'ArrowLeft':
-          e.preventDefault();
-          this.changeCurrentPageIndex(this.currentPageIndex - 1);
-          break;
-        case 'ArrowRight':
-          e.preventDefault();
-          this.changeCurrentPageIndex(this.currentPageIndex + 1);
-          break;
-        default:
-          break;
+          case 'ArrowLeft':
+            e.preventDefault()
+            this.changeCurrentPageIndex(this.currentPageIndex - 1)
+            break
+          case 'ArrowRight':
+            e.preventDefault()
+            this.changeCurrentPageIndex(this.currentPageIndex + 1)
+            break
+          default:
+            break
         }
       }
     },
     fullscreenChange() {
-      this.isFullscreen = !this.isFullscreen;
+      this.isFullscreen = !this.isFullscreen
     },
     toggleFullscreen() {
       if (!document.fullscreenElement) {
-        this.$refs.issuePageViewer.$el.requestFullscreen().then(() => {
-        }).catch((err) => {
-          console.info(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
-        });
+        this.$refs.issuePageViewer.$el
+          .requestFullscreen()
+          .then(() => {})
+          .catch(err => {
+            console.info(
+              `Error attempting to enable full-screen mode: ${err.message} (${err.name})`,
+            )
+          })
       } else {
-        document.exitFullscreen();
+        document.exitFullscreen()
       }
     },
     handleFiltersChanged(filters) {
-      this.displayOnlyMatchingArticles = true;
+      this.displayOnlyMatchingArticles = true
       // add back ignored filters so that we can reuse them in other views
       this.searchQuery = new SearchQuery({
         filters: filters.concat(this.ignoredFilters),
-      });
+      })
     },
     handleMatchingArticlesChangePage(page) {
-      this.paginationCurrentPage = page;
+      this.paginationCurrentPage = page
     },
     /** @param {number} pageIndex */
     changeCurrentPageIndex(pageIndex) {
-      this.currentPageIndex = pageIndex;
+      this.currentPageIndex = pageIndex
     },
     handleRemoveSelection() {
       this.$navigation.updateQueryParameters({
         [QueryParams.ArticleId]: undefined,
-      });
+      })
     },
     handleArticleSelected(article) {
       this.$navigation.updateQueryParameters({
         [QueryParams.ArticleId]: getShortArticleId(article.uid),
-        [QueryParams.PageNumber]: String(article.pages[0]?.num)
+        [QueryParams.PageNumber]: String(article.pages[0]?.num),
       })
     },
     /**
@@ -619,9 +703,9 @@ export default {
      */
     handleArticleIdSelectedInViewer(articleUid) {
       // display the whole table of contents
-      this.displayOnlyMatchingArticles = false;
+      this.displayOnlyMatchingArticles = false
       this.$navigation.updateQueryParameters({
-        [QueryParams.ArticleId]: getShortArticleId(articleUid)
+        [QueryParams.ArticleId]: getShortArticleId(articleUid),
       })
     },
     /** @param {number} pageIndex */
@@ -632,8 +716,8 @@ export default {
           .find({
             query: {
               filters: [{ type: 'page', q: getPageId(this.issueId, pageIndex) }],
-              limit: 500
-            }
+              limit: 500,
+            },
           })
           .then(response => response.data.map(article => new Article(article)))
         this.$set(this.pagesArticles, pageIndex, articles)
@@ -650,13 +734,13 @@ export default {
         const topicsSection = {
           title: this.$tc(`label.${results[0].type}.title`, results[0].buckets.length),
           isLeft: true,
-          items: results[0].buckets.map(bucket => `${bucket.item.htmlExcerpt} (${bucket.count})`)
+          items: results[0].buckets.map(bucket => `${bucket.item.htmlExcerpt} (${bucket.count})`),
         }
         const entitySections = results[1].map(facet => {
           return {
             title: this.$tc(`label.${facet.type}.title`, facet.buckets.length),
             isLeft: false,
-            items: facet.buckets.map(bucket => `${bucket.item.name} (${bucket.count})`)
+            items: facet.buckets.map(bucket => `${bucket.item.name} (${bucket.count})`),
           }
         })
 
@@ -667,17 +751,17 @@ export default {
     showArticleText(articleUid) {
       const params = {
         [QueryParams.ArticleId]: articleUid == null ? undefined : getShortArticleId(articleUid),
-        [QueryParams.TextMode]: '1'
+        [QueryParams.TextMode]: '1',
       }
       this.$navigation.updateQueryParameters(params)
     },
     exitTextViewer() {
       const params = {
-        [QueryParams.TextMode]: undefined
+        [QueryParams.TextMode]: undefined,
       }
       this.$navigation.updateQueryParameters(params)
-    }
-  }
+    },
+  },
 }
 </script>
 
@@ -702,14 +786,14 @@ export default {
 </i18n>
 
 <style lang="scss">
-  @import "impresso-theme/src/scss/variables.sass";
-  .IssueViewerPage_matchingArticles .number{
-    font-weight: bold
-  }
-  section.i-layout-section {
-    background-color: $clr-bg-secondary;
-  }
-  section.i-layout-section > div.header {
-    background-color: $clr-bg-primary;
-  }
+@import 'impresso-theme/src/scss/variables.sass';
+.IssueViewerPage_matchingArticles .number {
+  font-weight: bold;
+}
+section.i-layout-section {
+  background-color: $clr-bg-secondary;
+}
+section.i-layout-section > div.header {
+  background-color: $clr-bg-primary;
+}
 </style>