From 0e6c858bf28d6bbcd6d3acedc6da9119088ce382 Mon Sep 17 00:00:00 2001
From: Mayo Horkovic <mayo.horkovic@gmail.com>
Date: Sun, 29 Oct 2023 19:54:56 +0100
Subject: [PATCH] =?UTF-8?q?models,=20types=20&=C2=A0persistent=20storage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             | 33 ++++++++--
 package.json                                  |  1 +
 src/app.ts                                    | 13 ++--
 src/components/author/AuthorDetails.vue       |  4 +-
 src/components/author/AuthorSummary.vue       |  4 +-
 src/components/author/AuthorityDetails.vue    | 10 +--
 src/components/author/AuthoritySummary.vue    |  4 +-
 src/components/bucketlist/Bucketlist.vue      | 13 ++--
 .../bucketlist/LockedItemThumbnail.vue        |  3 +-
 src/components/general/ImageLightbox.vue      | 10 +--
 src/components/general/ItemImage.vue          |  2 +-
 src/components/general/ItemLoader.vue         |  4 +-
 src/components/general/ItemPreview.vue        |  3 +-
 src/components/general/ItemThumbnail.vue      |  3 +-
 src/components/general/ResponsiveImage.vue    |  4 +-
 .../general/ResponsiveImageWithSizes.vue      |  4 +-
 .../general/ResponsiveVideoEmbed.vue          |  4 +-
 src/components/general/VideoSummary.vue       |  4 +-
 .../interactions/InteractionItem.vue          |  8 ++-
 .../InteractionItemFavourited.vue             |  4 +-
 .../interactions/InteractionItemViewed.vue    |  5 +-
 .../interactions/InteractionPlaceViewed.vue   |  4 +-
 .../interactions/InteractionSectionViewed.vue |  4 +-
 .../interactions/InteractionStory.vue         |  9 ++-
 .../interactions/StoryVideoLightbox.vue       |  8 ++-
 src/components/misc/ZoomViewer.vue            |  6 +-
 src/composables/Params.ts                     |  7 +++
 src/css/style.css                             | 11 ++++
 src/models/Authority.ts                       | 22 +++++++
 src/models/Bucketlist.ts                      | 23 +++++++
 src/models/Interaction.ts                     | 17 +++++
 src/models/Item.ts                            | 62 +++++++++++++++++++
 src/models/Place.ts                           | 32 ++++++++++
 src/models/Section.ts                         | 25 ++++++++
 src/models/Story.ts                           | 27 ++++++++
 src/models/_BaseModel.ts                      | 34 ++++++++++
 src/models/_Interfaces.ts                     | 13 ++++
 src/pages/[id].vue                            |  9 +--
 src/pages/collection.vue                      |  7 ---
 src/pages/index.vue                           | 49 ++++++---------
 src/pages/item/[id].vue                       | 43 ++++++++-----
 src/pages/locked/[id].vue                     | 10 +--
 src/pages/place/[id].vue                      | 20 +++---
 src/pages/reward/[id].vue                     |  6 +-
 src/pages/section/[id].vue                    | 30 ++++-----
 src/pages/section/[sectionId]/[id].vue        | 37 ++++++-----
 src/pages/story/[id].vue                      | 52 +++++++---------
 src/stores/BucketlistStore.ts                 | 12 ++--
 src/stores/ItemStore.ts                       | 17 ++---
 src/stores/LocaleStore.ts                     |  4 +-
 src/stores/PlaceStore.ts                      | 10 +--
 src/stores/SectionStore.ts                    |  9 +--
 src/stores/StoryStore.ts                      | 11 ++--
 53 files changed, 554 insertions(+), 216 deletions(-)
 create mode 100644 src/composables/Params.ts
 create mode 100644 src/models/Authority.ts
 create mode 100644 src/models/Bucketlist.ts
 create mode 100644 src/models/Interaction.ts
 create mode 100644 src/models/Item.ts
 create mode 100644 src/models/Place.ts
 create mode 100644 src/models/Section.ts
 create mode 100644 src/models/Story.ts
 create mode 100644 src/models/_BaseModel.ts
 create mode 100644 src/models/_Interfaces.ts

diff --git a/package-lock.json b/package-lock.json
index 7bcd6f7..f4efe74 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,8 @@
         "laravel-vue-i18n": "^2.7.1",
         "openseadragon": "^4.1.0",
         "pinia": "^2.1.6",
-        "vue": "^3.3.4",
+        "pinia-plugin-persistedstate": "^3.2.0",
+        "vue": "^3.3.7",
         "vue-router": "^4.2.5",
         "vue3-carousel": "^0.3.1"
       },
@@ -24,7 +25,7 @@
         "@tsconfig/node18": "^18.2.2",
         "@types/node": "^18.18.5",
         "@types/openseadragon": "^3.0.8",
-        "@vitejs/plugin-vue": "^4.2.3",
+        "@vitejs/plugin-vue": "^4.4.0",
         "@vue/eslint-config-prettier": "^8.0.0",
         "@vue/eslint-config-typescript": "^12.0.0",
         "@vue/tsconfig": "^0.4.0",
@@ -34,6 +35,7 @@
         "eslint-plugin-import": "^2.27.5",
         "eslint-plugin-prettier-vue": "^4.2.0",
         "eslint-plugin-vue": "^9.17.0",
+        "husky": "^8.0.3",
         "lodash": "^4.17.21",
         "npm-run-all2": "^6.1.1",
         "prettier": "^3.0.3",
@@ -43,9 +45,9 @@
         "unplugin-auto-import": "^0.16.7",
         "unplugin-vue-components": "^0.25.2",
         "unplugin-vue-router": "^0.7.0",
-        "vite": "^4.4.5",
+        "vite": "^4.5.0",
         "vite-plugin-rewrite-all": "^1.0.1",
-        "vue-tsc": "^1.8.19"
+        "vue-tsc": "^1.8.22"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -3368,6 +3370,21 @@
         "node": ">=14.18.0"
       }
     },
+    "node_modules/husky": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-8.0.3.tgz",
+      "integrity": "sha512-+dQSyqPh4x1hlO1swXBiNb2HzTDN1I2IGLQx1GrBuiqFJfoMrnZWwVmatvSiO+Iz8fBUnf+lekwNo4c2LlXItg==",
+      "dev": true,
+      "bin": {
+        "husky": "lib/bin.js"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/typicode"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
@@ -4612,6 +4629,14 @@
         }
       }
     },
+    "node_modules/pinia-plugin-persistedstate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-3.2.0.tgz",
+      "integrity": "sha512-tZbNGf2vjAQcIm7alK40sE51Qu/m9oWr+rEgNm/2AWr1huFxj72CjvpQcIQzMknDBJEkQznCLAGtJTIcLKrKdw==",
+      "peerDependencies": {
+        "pinia": "^2.0.0"
+      }
+    },
     "node_modules/pinia/node_modules/vue-demi": {
       "version": "0.14.6",
       "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
diff --git a/package.json b/package.json
index def38b6..ad59faa 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "laravel-vue-i18n": "^2.7.1",
     "openseadragon": "^4.1.0",
     "pinia": "^2.1.6",
+    "pinia-plugin-persistedstate": "^3.2.0",
     "vue": "^3.3.7",
     "vue-router": "^4.2.5",
     "vue3-carousel": "^0.3.1"
diff --git a/src/app.ts b/src/app.ts
index 6e7d201..5d2d569 100644
--- a/src/app.ts
+++ b/src/app.ts
@@ -1,14 +1,14 @@
-import './bootstrap'
-import './css/style.css'
-
-import App from './App.vue'
+import '@/bootstrap'
+import '@/css/style.css'
 
 import { createApp } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router/auto'
 import { i18nVue } from 'laravel-vue-i18n'
 import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 import * as Sentry from '@sentry/vue'
 
+import App from '@/App.vue'
 import { useLocaleStore } from '@/stores/LocaleStore'
 import { useHistoryStore } from '@/stores/HistoryStore'
 
@@ -29,7 +29,10 @@ const app = createApp(App)
 Sentry.init({ app, dsn: import.meta.env.VITE_SENTRY_DSN })
 
 app.use(router)
-app.use(createPinia())
+
+const pinia = createPinia()
+pinia.use(piniaPluginPersistedstate)
+app.use(pinia)
 
 const localeStore = useLocaleStore()
 app.use(i18nVue, {
diff --git a/src/components/author/AuthorDetails.vue b/src/components/author/AuthorDetails.vue
index 62141a9..f639709 100644
--- a/src/components/author/AuthorDetails.vue
+++ b/src/components/author/AuthorDetails.vue
@@ -3,7 +3,9 @@
 </template>
 
 <script setup lang="ts">
+import Item from '@/models/Item'
+
 defineProps<{
-  item: any //TODO: add model
+  item: Item
 }>()
 </script>
diff --git a/src/components/author/AuthorSummary.vue b/src/components/author/AuthorSummary.vue
index c9fa6d1..32e308b 100644
--- a/src/components/author/AuthorSummary.vue
+++ b/src/components/author/AuthorSummary.vue
@@ -13,7 +13,9 @@
 </template>
 
 <script setup lang="ts">
+import Item from '@/models/Item'
+
 defineProps<{
-  item: any // TODO: add model
+  item: Item
 }>()
 </script>
diff --git a/src/components/author/AuthorityDetails.vue b/src/components/author/AuthorityDetails.vue
index 49572bf..d7a10b4 100644
--- a/src/components/author/AuthorityDetails.vue
+++ b/src/components/author/AuthorityDetails.vue
@@ -42,12 +42,14 @@ import axios from 'axios'
 
 import ItemPreview from '@/components/general/ItemPreview.vue'
 import ItemImage from '@/components/general/ItemImage.vue'
+import Authority from '@/models/Authority'
+import Item from '@/models/Item'
 
 const props = defineProps<{
-  authority: any // TODO: add model
+  authority: Authority
 }>()
-const relatedItems = ref<any[]>([]) // TODO: add model
-const previewItem = ref<any | null>(null) // TODO: add model
+const relatedItems = ref<Item[]>([])
+const previewItem = ref<Item | null>(null)
 const isLoading = ref(true)
 
 onMounted(async () => {
@@ -56,7 +58,7 @@ onMounted(async () => {
       const response = await axios.get(
         `/api/related_items/${props.authority.related_items.join(',')}`
       )
-      relatedItems.value = response.data.data
+      relatedItems.value = response.data.data.map((item: any) => new Item(item))
     } catch (error) {
       console.error(error)
     } finally {
diff --git a/src/components/author/AuthoritySummary.vue b/src/components/author/AuthoritySummary.vue
index 5a15c63..bb23b0c 100644
--- a/src/components/author/AuthoritySummary.vue
+++ b/src/components/author/AuthoritySummary.vue
@@ -16,7 +16,9 @@
 </template>
 
 <script setup lang="ts">
+import Authority from '@/models/Authority'
+
 defineProps<{
-  authority: any // TODO: add model
+  authority: Authority
 }>()
 </script>
diff --git a/src/components/bucketlist/Bucketlist.vue b/src/components/bucketlist/Bucketlist.vue
index 86ed56e..08fcda5 100644
--- a/src/components/bucketlist/Bucketlist.vue
+++ b/src/components/bucketlist/Bucketlist.vue
@@ -9,8 +9,8 @@
           unlocked
             ? $t('All artworks found')
             : $t(':found of :all artworks found', {
-                found: found.length,
-                all: bucketlist.items.length,
+                found: String(found?.length ?? 0),
+                all: String(bucketlist.items.length ?? 0),
               })
         }}
       </p>
@@ -58,7 +58,7 @@
         </Thumbnail>
       </router-link>
     </div>
-    <div v-if="found.length">
+    <div v-if="found?.length">
       <h3 class="text-1.5xl font-medium leading-6">{{ $t('Found') }}</h3>
       <div class="mt-4 flex flex-col gap-y-4">
         <router-link v-for="item in found" :key="item.id" :to="`/item/${item.id}`">
@@ -82,13 +82,14 @@ import ItemThumbnail from '@/components/general/ItemThumbnail.vue'
 import LockedItemThumbnail from '@/components/bucketlist/LockedItemThumbnail.vue'
 import ResponsiveImageWithSizes from '@/components/general/ResponsiveImageWithSizes.vue'
 import Thumbnail from '@/components/general/Thumbnail.vue'
+import Bucketlist from '@/models/Bucketlist'
 
 const props = defineProps<{
   id: string
 }>()
 const bucketlistStore = useBucketlistStore()
 const interactionStore = useInteractionStore()
-const bucketlist = ref<any | null>(null) // TODO: add model
+const bucketlist = ref<Bucketlist | null>(null)
 
 const found = computed(() => {
   return bucketlist.value?.items.filter((item) => interactionStore.isItemViewed(item.id))
@@ -98,10 +99,10 @@ const notFound = computed(() => {
   return bucketlist.value?.items.filter((item) => !interactionStore.isItemViewed(item.id))
 })
 
-const unlocked = computed(() => !notFound.value.length)
+const unlocked = computed(() => !notFound.value?.length)
 
 onMounted(async () => {
-  bucketlist.value = bucketlistStore.get(props.id)
+  bucketlist.value = bucketlistStore.get(props.id)!
   bucketlist.value = await bucketlistStore.load(props.id)
 })
 </script>
diff --git a/src/components/bucketlist/LockedItemThumbnail.vue b/src/components/bucketlist/LockedItemThumbnail.vue
index 40a491d..519fe67 100644
--- a/src/components/bucketlist/LockedItemThumbnail.vue
+++ b/src/components/bucketlist/LockedItemThumbnail.vue
@@ -17,8 +17,9 @@
 <script setup lang="ts">
 import ResponsiveImageWithSizes from '@/components/general/ResponsiveImageWithSizes.vue'
 import Thumbnail from '@/components/general/Thumbnail.vue'
+import Item from '@/models/Item'
 
 defineProps<{
-  item: any // TODO: add model
+  item: Item
 }>()
 </script>
diff --git a/src/components/general/ImageLightbox.vue b/src/components/general/ImageLightbox.vue
index f0e5325..e39ba07 100644
--- a/src/components/general/ImageLightbox.vue
+++ b/src/components/general/ImageLightbox.vue
@@ -16,7 +16,7 @@
     </button>
   </div>
   <div
-    v-if="visible"
+    v-if="visible && images"
     class="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4"
     @click="visible = false"
   >
@@ -42,16 +42,18 @@
 </template>
 
 <script setup lang="ts">
+import type { IImage } from '@/models/_Interfaces'
+
 import ZoomViewer from '@/components/misc/ZoomViewer.vue'
 import ItemImage from '@/components/general/ItemImage.vue'
 
 defineProps<{
   alt: string
-  offsetTop: number
   src: string
   srcset: string
-  images: string[]
-  imageAspectRatio: number
+  offsetTop?: number
+  images?: IImage[]
+  imageAspectRatio?: number
   imgClass?: string
 }>()
 
diff --git a/src/components/general/ItemImage.vue b/src/components/general/ItemImage.vue
index f41ffe4..2184939 100644
--- a/src/components/general/ItemImage.vue
+++ b/src/components/general/ItemImage.vue
@@ -21,7 +21,7 @@
 <script setup lang="ts">
 defineProps<{
   alt: string
-  offsetTop: number
+  offsetTop?: number
   src: string
   srcset: string
 }>()
diff --git a/src/components/general/ItemLoader.vue b/src/components/general/ItemLoader.vue
index aeb178b..660d9b1 100644
--- a/src/components/general/ItemLoader.vue
+++ b/src/components/general/ItemLoader.vue
@@ -3,11 +3,13 @@
 </template>
 
 <script setup lang="ts">
+import Item from '@/models/Item'
+
 const props = defineProps<{
   id: string
 }>()
 
-const item = ref<any | null>(null) // TODO: add model
+const item = ref<Item | null>(null)
 
 onMounted(async () => {
   const itemStore = useItemStore()
diff --git a/src/components/general/ItemPreview.vue b/src/components/general/ItemPreview.vue
index db992e2..d603102 100644
--- a/src/components/general/ItemPreview.vue
+++ b/src/components/general/ItemPreview.vue
@@ -41,9 +41,10 @@
 <script setup lang="ts">
 import WebumeniaButton from '@/components/forms/WebumeniaButton.vue'
 import ConfirmButton from '@/components/forms/ConfirmButton.vue'
+import Item from '@/models/Item'
 
 defineProps<{
-  item: any //TODO: add model
+  item: Item
 }>()
 
 const emit = defineEmits<{
diff --git a/src/components/general/ItemThumbnail.vue b/src/components/general/ItemThumbnail.vue
index ee5cefd..a974d63 100644
--- a/src/components/general/ItemThumbnail.vue
+++ b/src/components/general/ItemThumbnail.vue
@@ -14,8 +14,9 @@
 <script setup lang="ts">
 import Thumbnail from '@/components/general/Thumbnail.vue'
 import ResponsiveImageWithSizes from '@/components/general/ResponsiveImageWithSizes.vue'
+import Item from '@/models/Item'
 
 defineProps<{
-  item: any //TODO: add model
+  item: Item
 }>()
 </script>
diff --git a/src/components/general/ResponsiveImage.vue b/src/components/general/ResponsiveImage.vue
index a59104d..9b6aaa7 100644
--- a/src/components/general/ResponsiveImage.vue
+++ b/src/components/general/ResponsiveImage.vue
@@ -3,7 +3,9 @@
 </template>
 
 <script setup lang="ts">
+import type { IImage } from '@/models/_Interfaces'
+
 defineProps<{
-  image: any //TODO: add model
+  image: IImage
 }>()
 </script>
diff --git a/src/components/general/ResponsiveImageWithSizes.vue b/src/components/general/ResponsiveImageWithSizes.vue
index d08d705..a961df6 100644
--- a/src/components/general/ResponsiveImageWithSizes.vue
+++ b/src/components/general/ResponsiveImageWithSizes.vue
@@ -11,8 +11,10 @@
 </template>
 
 <script setup lang="ts">
+import type { IImage } from '@/models/_Interfaces'
+
 defineProps<{
-  image: any //TODO: add model
+  image: IImage
 }>()
 
 const img = ref<any | null>(null)
diff --git a/src/components/general/ResponsiveVideoEmbed.vue b/src/components/general/ResponsiveVideoEmbed.vue
index c10adf6..392e0d8 100644
--- a/src/components/general/ResponsiveVideoEmbed.vue
+++ b/src/components/general/ResponsiveVideoEmbed.vue
@@ -13,7 +13,7 @@
 <script setup lang="ts">
 defineProps<{
   src: string
-  width: number
-  height: number
+  width?: number
+  height?: number
 }>()
 </script>
diff --git a/src/components/general/VideoSummary.vue b/src/components/general/VideoSummary.vue
index 1fc23ef..4ebf2ff 100644
--- a/src/components/general/VideoSummary.vue
+++ b/src/components/general/VideoSummary.vue
@@ -13,10 +13,12 @@
 </template>
 
 <script setup lang="ts">
+import type { IImage } from '@/models/_Interfaces'
+
 import ResponsiveImage from '@/components/general/ResponsiveImage.vue'
 
 defineProps<{
-  thumbnail: any //TODO: add model
+  thumbnail: IImage
   title?: string
   subtitle?: string
 }>()
diff --git a/src/components/interactions/InteractionItem.vue b/src/components/interactions/InteractionItem.vue
index fd49444..c90bf72 100644
--- a/src/components/interactions/InteractionItem.vue
+++ b/src/components/interactions/InteractionItem.vue
@@ -13,10 +13,14 @@
 </template>
 
 <script setup lang="ts">
+import type { Component } from 'vue'
+
+import Item from '@/models/Item'
+
 defineProps<{
-  item: any //TODO: add model
+  item: Item
   label: string
-  icon: any //TODO: add model
+  icon: Component
   iconClass?: string
 }>()
 </script>
diff --git a/src/components/interactions/InteractionItemFavourited.vue b/src/components/interactions/InteractionItemFavourited.vue
index 9cf81e6..d7e135b 100644
--- a/src/components/interactions/InteractionItemFavourited.vue
+++ b/src/components/interactions/InteractionItemFavourited.vue
@@ -4,15 +4,15 @@
     icon-class="fill-current"
     :label="$t('Saved')"
     v-bind="props"
-    item=""
   />
 </template>
 
 <script setup lang="ts">
 import SvgHeartSmall from '@/components/svg/SvgHeartSmall.vue'
 import InteractionItem from '@/components/interactions/InteractionItem.vue'
+import Item from '@/models/Item'
 
 const props = defineProps<{
-  item: any //TODO: add model
+  item: Item
 }>()
 </script>
diff --git a/src/components/interactions/InteractionItemViewed.vue b/src/components/interactions/InteractionItemViewed.vue
index e9279e4..9b8a921 100644
--- a/src/components/interactions/InteractionItemViewed.vue
+++ b/src/components/interactions/InteractionItemViewed.vue
@@ -1,12 +1,13 @@
 <template>
-  <InteractionItem :icon="SvgEye" :label="$t('Viewed')" v-bind="props" item="" />
+  <InteractionItem :icon="SvgEye" :label="$t('Viewed')" v-bind="props" />
 </template>
 
 <script setup lang="ts">
 import InteractionItem from '@/components/interactions/InteractionItem.vue'
 import SvgEye from '@/components/svg/SvgEye.vue'
+import Item from '@/models/Item'
 
 const props = defineProps<{
-  item: any //TODO: add model
+  item: Item
 }>()
 </script>
diff --git a/src/components/interactions/InteractionPlaceViewed.vue b/src/components/interactions/InteractionPlaceViewed.vue
index 0dae8d5..aec684f 100644
--- a/src/components/interactions/InteractionPlaceViewed.vue
+++ b/src/components/interactions/InteractionPlaceViewed.vue
@@ -13,7 +13,9 @@
 </template>
 
 <script setup lang="ts">
+import Place from '@/models/Place'
+
 defineProps<{
-  place: any //TODO: add model
+  place: Place
 }>()
 </script>
diff --git a/src/components/interactions/InteractionSectionViewed.vue b/src/components/interactions/InteractionSectionViewed.vue
index 405be44..f4075e3 100644
--- a/src/components/interactions/InteractionSectionViewed.vue
+++ b/src/components/interactions/InteractionSectionViewed.vue
@@ -13,7 +13,9 @@
 </template>
 
 <script setup lang="ts">
+import Section from '@/models/Section'
+
 defineProps<{
-  section: any //TODO: add model
+  section: Section
 }>()
 </script>
diff --git a/src/components/interactions/InteractionStory.vue b/src/components/interactions/InteractionStory.vue
index 4d0fbd4..b92f8b5 100644
--- a/src/components/interactions/InteractionStory.vue
+++ b/src/components/interactions/InteractionStory.vue
@@ -59,18 +59,21 @@
 </template>
 
 <script setup lang="ts">
+import type { ILink } from '@/models/_Interfaces'
+
+import Story from '@/models/Story'
 import ResponsiveImageWithSizes from '@/components/general/ResponsiveImageWithSizes.vue'
 import StoryVideoLightbox from '@/components/interactions/StoryVideoLightbox.vue'
 
 const props = defineProps<{
-  story: any //TODO: add model
-  linkId?: number
+  story: Story
+  linkId?: string
   active?: boolean
   first?: boolean
 }>()
 
 const emit = defineEmits<{
-  navigate: [link: string]
+  navigate: [link: ILink]
   undo: []
 }>()
 
diff --git a/src/components/interactions/StoryVideoLightbox.vue b/src/components/interactions/StoryVideoLightbox.vue
index 1d64e42..c714cd6 100644
--- a/src/components/interactions/StoryVideoLightbox.vue
+++ b/src/components/interactions/StoryVideoLightbox.vue
@@ -1,6 +1,7 @@
 <template>
   <div role="link" class="relative" @click="visible = true">
     <ResponsiveImage
+      v-if="story.video_thumbnail"
       class="w-full cursor-pointer rounded-xl object-cover"
       :image="story.video_thumbnail"
     />
@@ -20,8 +21,8 @@
     <div class="relative max-h-full w-full md:max-w-sm">
       <ResponsiveVideoEmbed
         :src="story.video_embed"
-        :width="story.video_aspect_ratio.width"
-        :height="story.video_aspect_ratio.height"
+        :width="story.video_aspect_ratio?.width"
+        :height="story.video_aspect_ratio?.height"
       />
       <button
         type="button"
@@ -37,9 +38,10 @@
 <script setup lang="ts">
 import ResponsiveImage from '@/components/general/ResponsiveImage.vue'
 import ResponsiveVideoEmbed from '@/components/general/ResponsiveVideoEmbed.vue'
+import Story from '@/models/Story'
 
 defineProps<{
-  story: any //TODO: add model
+  story: Story
 }>()
 const visible = ref(false)
 </script>
diff --git a/src/components/misc/ZoomViewer.vue b/src/components/misc/ZoomViewer.vue
index 6ee005c..770ed6a 100644
--- a/src/components/misc/ZoomViewer.vue
+++ b/src/components/misc/ZoomViewer.vue
@@ -5,11 +5,13 @@
 <script setup lang="ts">
 import OpenSeaDragon from 'openseadragon'
 
+import type { IImage } from '@/models/_Interfaces'
+
 const props = defineProps<{
-  tileSources: any[] // TODO: add model
+  tileSources: IImage[]
 }>()
 
-const viewer = ref<OpenSeaDragon | null>(null)
+const viewer = ref<OpenSeadragon.Viewer | null>(null)
 //TODO: navigation for multiple images
 
 onMounted(() => {
diff --git a/src/composables/Params.ts b/src/composables/Params.ts
new file mode 100644
index 0000000..52c3d1f
--- /dev/null
+++ b/src/composables/Params.ts
@@ -0,0 +1,7 @@
+export function useParams() {
+  // unplugin-vue-router returns wrong type for useRoute().params
+  // this is a workaround while we wait for a fix
+
+  const route = useRoute()
+  return route.params as Record<string, string>
+}
diff --git a/src/css/style.css b/src/css/style.css
index 807ef9b..235c198 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -60,3 +60,14 @@
         font-weight: bold;
     }
 }
+
+ /* find better place */
+
+.interactions-enter-active,
+.interactions-leave-active {
+    transition: all 0.7s ease;
+}
+.interactions-enter-from,
+.interactions-leave-to {
+    opacity: 0;
+}
diff --git a/src/models/Authority.ts b/src/models/Authority.ts
new file mode 100644
index 0000000..b2b2d35
--- /dev/null
+++ b/src/models/Authority.ts
@@ -0,0 +1,22 @@
+import BaseModel from '@/models/_BaseModel'
+
+export default class Authority extends BaseModel {
+  public declare id: string
+  public declare name: string
+  public declare has_image: boolean
+  public declare biography: string
+  public declare birth_place: string
+  public declare death_place: string
+  public declare birth_date: string
+  public declare death_date: string
+  public declare image_url: string
+  public declare related_items: string[]
+
+  public isOpened: boolean
+
+  constructor(o: any) {
+    super(o)
+
+    this.isOpened = false
+  }
+}
diff --git a/src/models/Bucketlist.ts b/src/models/Bucketlist.ts
new file mode 100644
index 0000000..baadaad
--- /dev/null
+++ b/src/models/Bucketlist.ts
@@ -0,0 +1,23 @@
+import axios from 'axios'
+
+import type { IImage } from '@/models/_Interfaces'
+
+import BaseModel from '@/models/_BaseModel'
+import Item from '@/models/Item'
+
+export default class Bucketlist extends BaseModel {
+  public static mapping = {
+    items: () => Item,
+  }
+
+  public declare id: string
+  public declare title: string
+  public declare text: string
+  public declare image: IImage
+  public declare items: Item[]
+
+  static load = async (id: string) => {
+    const response = await axios.get(`/api/bucketlists/${id}`)
+    return new this(response.data.data)
+  }
+}
diff --git a/src/models/Interaction.ts b/src/models/Interaction.ts
new file mode 100644
index 0000000..1a9e037
--- /dev/null
+++ b/src/models/Interaction.ts
@@ -0,0 +1,17 @@
+import BaseModel from '@/models/_BaseModel'
+
+export default class Interaction extends BaseModel {
+  public declare id: string
+  public declare name: string
+  public declare author: string
+  public declare title: string
+  public declare type: 'story' | 'itemFavourited' | 'itemViewed' | 'sectionViewed' | 'placeViewed'
+  public declare size: number
+
+  public linkId: string | null
+  constructor(o: any) {
+    super(o)
+
+    this.linkId = ''
+  }
+}
diff --git a/src/models/Item.ts b/src/models/Item.ts
new file mode 100644
index 0000000..5393ca3
--- /dev/null
+++ b/src/models/Item.ts
@@ -0,0 +1,62 @@
+import axios from 'axios'
+
+import type { IImage } from '@/models/_Interfaces'
+
+import BaseModel from '@/models/_BaseModel'
+import Bucketlist from '@/models/Bucketlist'
+import Authority from '@/models/Authority'
+
+export default class Item extends BaseModel {
+  public static mapping = {
+    authorities: () => Authority,
+  }
+
+  public declare id: string
+  public declare title: string
+  public declare author: string
+  public declare author_description: string
+  public declare dating: number
+  public declare locked_bucketlist_description: string
+  public declare dating_short: number
+  public declare description: string
+  public declare authorities: Authority[]
+
+  public declare image_src: string
+  public declare image_srcset: string
+  public declare images: IImage[]
+  public declare image_aspect_ratio: number
+  public declare webumenia_url: string
+  public declare code: string
+  public declare offset_top: number
+  public declare video_thumbnail: IImage | null
+  public declare video_embed: string
+  public declare video_aspect_ratio: {
+    width: number
+    height: number
+  } | null
+  public declare video_title: string
+  public declare video_subtitle: string
+  public declare story_id: string | null
+  public declare location_formatted: string
+  public declare exhibition: {
+    id: string
+    name: string
+  }
+
+  public declare bucketlists: Bucketlist[]
+
+  constructor(o: any) {
+    super(o)
+  }
+
+  static load = async (id: string) => {
+    const response = await axios.get(`/api/items/${id}`)
+    const model = new this(response.data.data)
+
+    if (model.authorities.length) {
+      model.authorities[0].isOpened = true
+    }
+
+    return model
+  }
+}
diff --git a/src/models/Place.ts b/src/models/Place.ts
new file mode 100644
index 0000000..96876db
--- /dev/null
+++ b/src/models/Place.ts
@@ -0,0 +1,32 @@
+import axios from 'axios'
+
+import type { IImage } from '@/models/_Interfaces'
+
+import BaseModel from '@/models/_BaseModel'
+
+export default class Place extends BaseModel {
+  public declare id: string
+  public declare code: string
+  public declare title: string
+  public declare description: string
+  public declare image: IImage
+
+  public declare offset_top: number
+
+  public declare video_embed: string | null
+  public declare video_aspect_ratio: {
+    width: number
+    height: number
+  } | null
+  public declare video_thumbnail: IImage | null
+  public declare video_duration: number | null
+  public declare video_title: string
+  public declare video_subtitle: string
+  public declare story_id: string | null
+  public declare location_formatted: string
+
+  static load = async (id: string) => {
+    const response = await axios.get(`/api/places/${id}`)
+    return new this(response.data.data)
+  }
+}
diff --git a/src/models/Section.ts b/src/models/Section.ts
new file mode 100644
index 0000000..762fa85
--- /dev/null
+++ b/src/models/Section.ts
@@ -0,0 +1,25 @@
+import axios from 'axios'
+
+import type { IImage } from '@/models/_Interfaces'
+
+import BaseModel from '@/models/_BaseModel'
+import Item from '@/models/Item'
+
+export default class Section extends BaseModel {
+  public static mapping = {
+    items: () => Item,
+  }
+
+  public declare id: string
+  public declare code: string
+  public declare description: string
+  public declare location_formatted: string
+  public declare title: string
+  public declare image: IImage
+  public declare items: Item[]
+
+  static load = async (id: string) => {
+    const response = await axios.get(`/api/sections/${id}`)
+    return new this(response.data.data)
+  }
+}
diff --git a/src/models/Story.ts b/src/models/Story.ts
new file mode 100644
index 0000000..c059e61
--- /dev/null
+++ b/src/models/Story.ts
@@ -0,0 +1,27 @@
+import axios from 'axios'
+
+import type { IImage, ILink } from '@/models/_Interfaces'
+
+import BaseModel from '@/models/_BaseModel'
+
+export default class Story extends BaseModel {
+  public declare id: string
+  public declare name: string
+  public declare text: string
+
+  public declare video_embed: string
+  public declare video_aspect_ratio: {
+    width: number
+    height: number
+  } | null
+  public declare video_duration: string
+  public declare video_thumbnail: IImage | null
+
+  public declare images: IImage[]
+  public declare links: ILink[]
+
+  static load = async (id: string) => {
+    const response = await axios.get(`/api/stories/${id}`)
+    return new this(response.data.data)
+  }
+}
diff --git a/src/models/_BaseModel.ts b/src/models/_BaseModel.ts
new file mode 100644
index 0000000..475210c
--- /dev/null
+++ b/src/models/_BaseModel.ts
@@ -0,0 +1,34 @@
+export type Data = Record<string, any>
+
+export default class BaseModel<T = Data> {
+  public static mapping: { [key: string]: any } = {}
+
+  constructor(data: T) {
+    this.update(data)
+  }
+
+  public update(data: T) {
+    const Constructor = <typeof BaseModel>this.constructor
+
+    for (const name in data) {
+      const Mapping = Constructor.mapping[name] ? Constructor.mapping[name]() : null
+      let value = data[name]
+
+      if (Mapping && value) {
+        value = Array.isArray(value) ? value.map((item) => new Mapping(item)) : new Mapping(value)
+      }
+
+      const obj = this as any
+      obj[name] = value
+    }
+  }
+
+  public toJSON() {
+    return Object.assign({}, this)
+  }
+
+  public clone(): this {
+    const Constructor = <typeof BaseModel>this.constructor
+    return new Constructor(this.toJSON()) as any
+  }
+}
diff --git a/src/models/_Interfaces.ts b/src/models/_Interfaces.ts
new file mode 100644
index 0000000..84c7e68
--- /dev/null
+++ b/src/models/_Interfaces.ts
@@ -0,0 +1,13 @@
+export interface IImage {
+  srcset: string
+  src: string
+  width?: number
+  height?: number
+  deep_zoom_url?: string
+}
+
+export interface ILink {
+  id: string
+  title: string
+  story_id: string
+}
diff --git a/src/pages/[id].vue b/src/pages/[id].vue
index e61683d..2303fcd 100644
--- a/src/pages/[id].vue
+++ b/src/pages/[id].vue
@@ -12,13 +12,14 @@ import Timeline from '@/components/timeline/Timeline.vue'
 
 // TODO: do we need this if we have /collection?
 
-const route = useRoute()
-const itemStore = useItemStore()
+// const itemStore = useItemStore()
 const bucketlistId = import.meta.env.VITE_DEFAULT_BUCKETLIST
 
 onMounted(async () => {
-  if (route.params.id) {
-    itemStore.fetch(route.params.id)
+  const { id } = useParams()
+
+  if (id) {
+    // itemStore.fetch(id)
   }
 })
 </script>
diff --git a/src/pages/collection.vue b/src/pages/collection.vue
index 5d4369e..cbbc3d3 100644
--- a/src/pages/collection.vue
+++ b/src/pages/collection.vue
@@ -10,13 +10,6 @@
 import Bucketlist from '@/components/bucketlist/Bucketlist.vue'
 import Timeline from '@/components/timeline/Timeline.vue'
 
-const route = useRoute()
 const itemStore = useItemStore()
 const bucketlistId = import.meta.env.VITE_DEFAULT_BUCKETLIST
-
-onMounted(async () => {
-  if (route.params.id) {
-    itemStore.fetch(route.params.id)
-  }
-})
 </script>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 7af759f..8be9010 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -4,9 +4,9 @@
       <template v-for="(interaction, i) in interactionStore.interactions" :key="i">
         <InteractionStory
           v-if="interaction.type === 'story'"
-          :ref="(component) => setStoryRef(component, interaction)"
-          :story="storyStore.get(interaction.id)"
-          :link-id="interaction.linkId"
+          :ref="(component) => setStoryRef(component!, interaction)"
+          :story="storyStore.get(interaction.id)!"
+          :link-id="interaction.linkId!"
           :active="interaction === interactionStore.active"
           :first="i === 0"
           class="my-8"
@@ -15,22 +15,22 @@
         />
         <InteractionItemFavourited
           v-else-if="interaction.type === 'itemFavourited'"
-          :item="itemStore.get(interaction.id)"
+          :item="itemStore.get(interaction.id)!"
           class="my-4"
         />
         <InteractionItemViewed
           v-else-if="interaction.type === 'itemViewed'"
-          :item="itemStore.get(interaction.id)"
+          :item="itemStore.get(interaction.id)!"
           class="my-4"
         />
         <InteractionSectionViewed
           v-else-if="interaction.type === 'sectionViewed'"
-          :section="sectionStore.get(interaction.id)"
+          :section="sectionStore.get(interaction.id)!"
           class="my-4"
         />
         <InteractionPlaceViewed
           v-else-if="interaction.type === 'placeViewed'"
-          :place="placeStore.get(interaction.id)"
+          :place="placeStore.get(interaction.id)!"
           class="my-4"
         />
       </template>
@@ -42,28 +42,31 @@
 <script setup lang="ts">
 import { watchDebounced } from '@vueuse/core'
 
+import type { ILink } from '@/models/_Interfaces'
+import type { Component } from 'vue'
+
 import CodePanel from '@/components/layout/CodePanel.vue'
 import InteractionItemFavourited from '@/components/interactions/InteractionItemFavourited.vue'
 import InteractionItemViewed from '@/components/interactions/InteractionItemViewed.vue'
 import InteractionSectionViewed from '@/components/interactions/InteractionSectionViewed.vue'
 import InteractionPlaceViewed from '@/components/interactions/InteractionPlaceViewed.vue'
 import InteractionStory from '@/components/interactions/InteractionStory.vue'
+import Interaction from '@/models/Interaction'
 
 const interactionStore = useInteractionStore()
 const itemStore = useItemStore()
 const sectionStore = useSectionStore()
 const storyStore = useStoryStore()
 const placeStore = usePlaceStore()
-const route = useRoute()
+
 const storyMap = new Map()
 
-// TODO: add model
-const navigate = (interaction, link) => {
+const navigate = (interaction: Interaction, link: ILink) => {
   interactionStore.selectLink(interaction, link)
   loadStory(link.story_id)
 }
 
-const undo = (interaction) => {
+const undo = (interaction: Interaction) => {
   storyMap.get(interaction).transitioning = true
   const previous = interactionStore.setPreviousActive(interaction)
   nextTick(() => {
@@ -75,7 +78,7 @@ const undo = (interaction) => {
   })
 }
 
-const setStoryRef = (component, interaction) => {
+const setStoryRef = (component: Component, interaction: Interaction) => {
   if (component) {
     storyMap.set(interaction, component)
   }
@@ -99,11 +102,13 @@ const loadStory = async (id: string) => {
 }
 
 onMounted(async () => {
-  if (route.params.id) {
+  const { id } = useParams()
+
+  if (id) {
     interactionStore.clear()
-    loadStory(route.params.id)
+    await loadStory(id)
   } else if (!interactionStore.activeStory) {
-    loadStory(interactionStore.lastStory?.id || import.meta.env.VITE_DEFAULT_STORY)
+    await loadStory(interactionStore.lastStory?.id || import.meta.env.VITE_DEFAULT_STORY)
   }
 
   await nextTick(scrollActiveIntoView)
@@ -120,18 +125,4 @@ watchDebounced(
   },
   { immediate: true, debounce: 1000 }
 )
-
-// TODO: dont use global scope styles
 </script>
-
-<style>
-.interactions-enter-active,
-.interactions-leave-active {
-  transition: all 0.7s ease;
-}
-
-.interactions-enter-from,
-.interactions-leave-to {
-  opacity: 0;
-}
-</style>
diff --git a/src/pages/item/[id].vue b/src/pages/item/[id].vue
index 2e65d02..84b9747 100644
--- a/src/pages/item/[id].vue
+++ b/src/pages/item/[id].vue
@@ -8,18 +8,20 @@
         <p class="mt-1 text-2xl font-medium leading-snug">
           {{
             $t(':found of :all artworks found', {
-              found: found.length,
-              all: bucketlist.items.length,
+              found: String(found?.length ?? 0),
+              all: String(bucketlist?.items.length ?? 0),
             })
           }}
         </p>
       </div>
       <div class="flex items-center">
-        <router-link
-          tag="button"
-          :to="unlocked ? `/reward/${bucketlist.id}` : '/collection'"
-          class="rounded-xl border-2 bg-green px-4 py-3 text-center font-bold capitalize leading-none"
-          >{{ $t(unlocked ? 'reward' : 'list') }}</router-link
+        <router-link :to="unlocked ? `/reward/${bucketlist.id}` : '/collection'">
+          <button
+            type="button"
+            class="rounded-xl border-2 bg-green px-4 py-3 text-center font-bold capitalize leading-none"
+          >
+            {{ $t(unlocked ? 'reward' : 'list') }}
+          </button></router-link
         >
       </div>
     </article>
@@ -52,9 +54,9 @@
       </div>
       <div class="my-4 space-y-4 markdown" v-html="item.description"></div>
       <Collapsible
-        v-for="(authority, i) in item.authorities"
+        v-for="authority in item.authorities"
         :key="authority.id"
-        :model-value="i === 0"
+        v-model="authority.isOpened"
         class="my-4"
       >
         <template #summary>
@@ -76,7 +78,7 @@
           <AuthorDetails :item="item" />
         </template>
       </Collapsible>
-      <Collapsible v-if="item.video_embed" class="my-4">
+      <Collapsible v-if="item.video_embed && item.video_thumbnail" class="my-4">
         <template #summary>
           <VideoSummary
             :thumbnail="item.video_thumbnail"
@@ -87,8 +89,8 @@
         <template #content>
           <ResponsiveVideoEmbed
             :src="item.video_embed"
-            :width="item.video_aspect_ratio.width"
-            :height="item.video_aspect_ratio.height"
+            :width="item.video_aspect_ratio?.width"
+            :height="item.video_aspect_ratio?.height"
           />
         </template>
       </Collapsible>
@@ -111,6 +113,8 @@
 </template>
 
 <script setup lang="ts">
+import 'vue3-carousel/dist/carousel.css'
+
 import AuthorityDetails from '@/components/author/AuthorityDetails.vue'
 import AuthoritySummary from '@/components/author/AuthoritySummary.vue'
 import Collapsible from '@/components/general/Collapsible.vue'
@@ -124,28 +128,33 @@ import AuthorSummary from '@/components/author/AuthorSummary.vue'
 import AuthorDetails from '@/components/author/AuthorDetails.vue'
 import HistoryBack from '@/components/misc/HistoryBack.vue'
 import ConfirmButton from '@/components/forms/ConfirmButton.vue'
+import Item from '@/models/Item'
+import Bucketlist from '@/models/Bucketlist'
 
 const route = useRoute()
 const bucketlistStore = useBucketlistStore()
 const interactionStore = useInteractionStore()
 const itemStore = useItemStore()
 
-const item = ref<any | null>(null) // TODO: add model
-const bucketlist = ref<any | null>(null) // TODO: add model
+const item = ref<Item>()
+const bucketlist = ref<Bucketlist>()
 
 const found = computed(() =>
   bucketlist.value?.items.filter((item) => interactionStore.isItemViewed(item.id))
 )
-const unlocked = computed(() => found.value.length === bucketlist.value?.items.length)
+
+const unlocked = computed(() => found.value?.length === bucketlist.value?.items.length)
 
 onMounted(async () => {
-  const { id } = route.params as Record<string, string>
+  const { id } = useParams()
 
   item.value = await itemStore.load(id)
   interactionStore.addItemViewed(item.value.id)
+
   const defaultBucketlist = item.value.bucketlists.find(
     (bucketlist) => bucketlist.id === import.meta.env.VITE_DEFAULT_BUCKETLIST
   )
+
   if (defaultBucketlist) {
     bucketlist.value =
       bucketlistStore.get(defaultBucketlist.id) ||
@@ -154,6 +163,6 @@ onMounted(async () => {
 })
 
 const codeImage = computed(() => {
-  return `${import.meta.env.VITE_API_URL}/img/${item.value.code}.svg`
+  return `${import.meta.env.VITE_API_URL}/img/${item.value?.code}.svg`
 })
 </script>
diff --git a/src/pages/locked/[id].vue b/src/pages/locked/[id].vue
index 89ee248..77ef68e 100644
--- a/src/pages/locked/[id].vue
+++ b/src/pages/locked/[id].vue
@@ -26,16 +26,18 @@
 <script setup lang="ts">
 import ItemImage from '@/components/general/ItemImage.vue'
 import CodePanel from '@/components/layout/CodePanel.vue'
+import Item from '@/models/Item'
+import Bucketlist from '@/models/Bucketlist'
 
-const route = useRoute()
 const bucketlistStore = useBucketlistStore()
 const itemStore = useItemStore()
 
-const item = ref<any | null>(null) // TODO: add model
-const bucketlist = ref<any | null>(null) // TODO: add model
+const item = ref<Item | null>(null)
+const bucketlist = ref<Bucketlist | null>(null)
 
 onMounted(async () => {
-  const id = route.params.id
+  const { id } = useParams()
+
   item.value = await itemStore.load(id)
   const defaultBucketlist = item.value.bucketlists.find(
     (bucketlist) => bucketlist.id === import.meta.env.VITE_DEFAULT_BUCKETLIST
diff --git a/src/pages/place/[id].vue b/src/pages/place/[id].vue
index e55718a..cb06cca 100644
--- a/src/pages/place/[id].vue
+++ b/src/pages/place/[id].vue
@@ -17,14 +17,14 @@
   </div>
   <div v-if="place" class="relative h-full border-black px-4 pb-24 pt-8">
     <div v-if="place.code" class="absolute -top-8 inline-block rounded-md bg-black p-1.5">
-      <img class="h-9 w-9" :src="`/img/${place.code}.svg`" :alt="place.code" />
+      <img class="h-9 w-9" :src="codeImage" :alt="place.code" />
     </div>
     <h2 class="text-1.5xl font-bold">{{ place.title }}</h2>
     <div v-if="place.location_formatted" class="text-lg text-gray-dark">
       {{ $t('Location') }}: {{ place.location_formatted }}
     </div>
     <div class="my-4 space-y-4 markdown" v-html="place.description"></div>
-    <Collapsible v-if="place.video_embed" :model-value="true" class="my-4">
+    <Collapsible v-if="place.video_embed && place.video_thumbnail" :model-value="true" class="my-4">
       <template #summary>
         <VideoSummary
           :thumbnail="place.video_thumbnail"
@@ -35,8 +35,8 @@
       <template #content>
         <ResponsiveVideoEmbed
           :src="place.video_embed"
-          :width="place.video_aspect_ratio.width"
-          :height="place.video_aspect_ratio.height"
+          :width="place.video_aspect_ratio?.width"
+          :height="place.video_aspect_ratio?.height"
         />
       </template>
     </Collapsible>
@@ -67,15 +67,21 @@ import StoryButton from '@/components/forms/StoryButton.vue'
 import VideoSummary from '@/components/general/VideoSummary.vue'
 import HistoryBack from '@/components/misc/HistoryBack.vue'
 import ResponsiveVideoEmbed from '@/components/general/ResponsiveVideoEmbed.vue'
+import Place from '@/models/Place'
 
 const route = useRoute()
 const interactionStore = useInteractionStore()
 const placeStore = usePlaceStore()
-const place = ref<any | null>(null) // TODO: add model
+const place = ref<Place | null>(null)
 
 onMounted(async () => {
-  const id = route.params.id
+  const { id } = useParams()
+
   place.value = await placeStore.load(id)
-  interactionStore.addPlaceViewed(place.value.id)
+  place.value?.id && interactionStore.addPlaceViewed(place.value.id)
+})
+
+const codeImage = computed(() => {
+  return `${import.meta.env.VITE_API_URL}/img/${place.value?.code}.svg`
 })
 </script>
diff --git a/src/pages/reward/[id].vue b/src/pages/reward/[id].vue
index a7b8a85..2ff6fa6 100644
--- a/src/pages/reward/[id].vue
+++ b/src/pages/reward/[id].vue
@@ -18,13 +18,13 @@
 
 <script setup lang="ts">
 import ImageLightbox from '@/components/general/ImageLightbox.vue'
+import Bucketlist from '@/models/Bucketlist'
 
-const route = useRoute()
 const bucketlistStore = useBucketlistStore()
-const bucketlist = ref<any | null>(null) // TODO: add model
+const bucketlist = ref<Bucketlist | null>(null)
 
 onMounted(async () => {
-  const id = route.params.id
+  const { id } = useParams()
   bucketlist.value = await bucketlistStore.load(id)
 })
 </script>
diff --git a/src/pages/section/[id].vue b/src/pages/section/[id].vue
index eed949b..f6ec6ec 100644
--- a/src/pages/section/[id].vue
+++ b/src/pages/section/[id].vue
@@ -12,10 +12,10 @@
 
   <div v-if="section" class="relative h-full border-black px-4 pb-24 pt-8">
     <div v-if="section.code" class="absolute -top-8 inline-block rounded-md bg-black p-1.5">
-      <img class="h-9 w-9" :src="`/img/${section.code}.svg`" :alt="section.code" />
+      <img class="h-9 w-9" :src="codeImage" :alt="section.code" />
     </div>
     <h3 class="text-lg font-bold text-gray-dark">
-      {{ $t('Group of :count artworks', { count: section.items.length }) }}
+      {{ $t('Group of :count artworks', { count: String(section.items.length) }) }}
     </h3>
     <h2 class="text-1.5xl font-bold">{{ section.title }}</h2>
     <div v-if="section.location_formatted" class="text-lg text-gray-dark">
@@ -24,11 +24,7 @@
     <div class="my-4 space-y-4 markdown" v-html="section.description"></div>
     <p class="mb-2 font-bold">{{ $t('More about artworks in the group') }}</p>
     <div class="flex flex-col space-y-3">
-      <router-link
-        v-for="item in section.items"
-        :key="item"
-        :to="`/section/${route.params.id}/${item.id}`"
-      >
+      <router-link v-for="item in section.items" :key="item.id" :to="`/section/${id}/${item.id}`">
         <ItemThumbnail :item="item" />
       </router-link>
     </div>
@@ -52,23 +48,23 @@ import HistoryBack from '@/components/misc/HistoryBack.vue'
 import ConfirmButton from '@/components/forms/ConfirmButton.vue'
 import ItemThumbnail from '@/components/general/ItemThumbnail.vue'
 import ItemImage from '@/components/general/ItemImage.vue'
+import Section from '@/models/Section'
 
-// TODO: why is this duplicated with ref?
-// defineProps<{
-//   section: any // TODO: add model
-// }>()
-
-const route = useRoute()
-const interactionStore = useInteractionStore()
+// const interactionStore = useInteractionStore()
 const sectionStore = useSectionStore()
 
-const section = ref<any | null>(null)
+const section = ref<Section | null>(null)
+
+const { id } = useParams()
 
 onMounted(async () => {
-  const id = route.params.id
   section.value = await sectionStore.load(id)
 
   // TODO: where did item come from?
-  interactionStore.addSectionViewed(item.value.id)
+  // interactionStore.addSectionViewed(item.value.id)
+})
+
+const codeImage = computed(() => {
+  return `${import.meta.env.VITE_API_URL}/img/${section.value?.code}.svg`
 })
 </script>
diff --git a/src/pages/section/[sectionId]/[id].vue b/src/pages/section/[sectionId]/[id].vue
index ea0b02b..25de5f4 100644
--- a/src/pages/section/[sectionId]/[id].vue
+++ b/src/pages/section/[sectionId]/[id].vue
@@ -8,18 +8,20 @@
         <p class="mt-1 text-2xl font-medium leading-snug">
           {{
             $t(':found of :all artworks found', {
-              found: found.length,
-              all: bucketlist.items.length,
+              found: String(found?.length ?? 0),
+              all: String(bucketlist.items.length ?? 0),
             })
           }}
         </p>
       </div>
       <div class="flex items-center">
-        <router-link
-          tag="button"
-          :to="unlocked ? `/reward/${bucketlist.id}` : '/collection'"
-          class="rounded-xl border-2 bg-green px-4 py-3 text-center font-bold capitalize leading-none"
-          >{{ $t(unlocked ? 'reward' : 'list') }}</router-link
+        <router-link :to="unlocked ? `/reward/${bucketlist.id}` : '/collection'">
+          <button
+            type="button"
+            class="rounded-xl border-2 bg-green px-4 py-3 text-center font-bold capitalize leading-none"
+          >
+            {{ $t(unlocked ? 'reward' : 'list') }}
+          </button></router-link
         >
       </div>
     </article>
@@ -76,7 +78,7 @@
           <AuthorDetails :item="item" />
         </template>
       </Collapsible>
-      <Collapsible v-if="item.video_embed" class="my-4">
+      <Collapsible v-if="item.video_embed && item.video_thumbnail" class="my-4">
         <template #summary>
           <VideoSummary
             :thumbnail="item.video_thumbnail"
@@ -87,8 +89,8 @@
         <template #content>
           <ResponsiveVideoEmbed
             :src="item.video_embed"
-            :width="item.video_aspect_ratio.width"
-            :height="item.video_aspect_ratio.height"
+            :width="item.video_aspect_ratio?.width"
+            :height="item.video_aspect_ratio?.height"
           />
         </template>
       </Collapsible>
@@ -124,22 +126,25 @@ import AuthorSummary from '@/components/author/AuthorSummary.vue'
 import AuthorDetails from '@/components/author/AuthorDetails.vue'
 import HistoryBack from '@/components/misc/HistoryBack.vue'
 import ConfirmButton from '@/components/forms/ConfirmButton.vue'
+import Bucketlist from '@/models/Bucketlist'
+import Item from '@/models/Item'
 
 const route = useRoute()
 const bucketlistStore = useBucketlistStore()
 const interactionStore = useInteractionStore()
 const itemStore = useItemStore()
 
-const item = ref<any | null>(null) // TODO: add model
-const bucketlist = ref<any | null>(null) // TODO: add model
+const item = ref<Item | null>(null)
+const bucketlist = ref<Bucketlist | null>(null)
 
 const found = computed(() =>
-  bucketlist.value.items.filter((item) => interactionStore.isItemViewed(item.id))
+  bucketlist.value?.items.filter((item) => interactionStore.isItemViewed(item.id))
 )
-const unlocked = computed(() => found.value.length === bucketlist.value.items.length)
+const unlocked = computed(() => found.value?.length === bucketlist.value?.items.length)
 
 onMounted(async () => {
-  const id = route.params.id
+  const { id } = useParams()
+
   item.value = await itemStore.load(id)
   interactionStore.addItemViewed(item.value.id)
   const defaultBucketlist = item.value.bucketlists.find(
@@ -153,6 +158,6 @@ onMounted(async () => {
 })
 
 const codeImage = computed(() => {
-  return `${import.meta.env.VITE_API_URL}/img/${item.value.code}.svg`
+  return `${import.meta.env.VITE_API_URL}/img/${item.value?.code}.svg`
 })
 </script>
diff --git a/src/pages/story/[id].vue b/src/pages/story/[id].vue
index 79ba481..f47b66b 100644
--- a/src/pages/story/[id].vue
+++ b/src/pages/story/[id].vue
@@ -4,9 +4,9 @@
       <template v-for="(interaction, i) in interactionStore.interactions" :key="i">
         <InteractionStory
           v-if="interaction.type === 'story'"
-          :ref="(component) => setStoryRef(component, interaction)"
-          :story="storyStore.get(interaction.id)"
-          :link-id="interaction.linkId"
+          :ref="(component) => setStoryRef(component!, interaction)"
+          :story="storyStore.get(interaction.id)!"
+          :link-id="interaction.linkId!"
           :active="interaction === interactionStore.active"
           :first="i === 0"
           class="my-8"
@@ -15,22 +15,22 @@
         />
         <InteractionItemFavourited
           v-else-if="interaction.type === 'itemFavourited'"
-          :item="itemStore.get(interaction.id)"
+          :item="itemStore.get(interaction.id)!"
           class="my-4"
         />
         <InteractionItemViewed
           v-else-if="interaction.type === 'itemViewed'"
-          :item="itemStore.get(interaction.id)"
+          :item="itemStore.get(interaction.id)!"
           class="my-4"
         />
         <InteractionSectionViewed
           v-else-if="interaction.type === 'sectionViewed'"
-          :section="sectionStore.get(interaction.id)"
+          :section="sectionStore.get(interaction.id)!"
           class="my-4"
         />
         <InteractionPlaceViewed
           v-else-if="interaction.type === 'placeViewed'"
-          :place="placeStore.get(interaction.id)"
+          :place="placeStore.get(interaction.id)!"
           class="my-4"
         />
       </template>
@@ -42,28 +42,31 @@
 <script setup lang="ts">
 import { watchDebounced } from '@vueuse/core'
 
+import type { ILink } from '@/models/_Interfaces'
+import type { Component } from 'vue'
+
 import CodePanel from '@/components/layout/CodePanel.vue'
 import InteractionItemFavourited from '@/components/interactions/InteractionItemFavourited.vue'
 import InteractionItemViewed from '@/components/interactions/InteractionItemViewed.vue'
 import InteractionSectionViewed from '@/components/interactions/InteractionSectionViewed.vue'
 import InteractionPlaceViewed from '@/components/interactions/InteractionPlaceViewed.vue'
 import InteractionStory from '@/components/interactions/InteractionStory.vue'
+import Interaction from '@/models/Interaction'
 
 const interactionStore = useInteractionStore()
 const itemStore = useItemStore()
 const sectionStore = useSectionStore()
 const storyStore = useStoryStore()
 const placeStore = usePlaceStore()
-const route = useRoute()
+
 const storyMap = new Map()
 
-// TODO: add model
-const navigate = (interaction, link) => {
+const navigate = (interaction: Interaction, link: ILink) => {
   interactionStore.selectLink(interaction, link)
   loadStory(link.story_id)
 }
 
-const undo = (interaction) => {
+const undo = (interaction: Interaction) => {
   storyMap.get(interaction).transitioning = true
   const previous = interactionStore.setPreviousActive(interaction)
   nextTick(() => {
@@ -75,7 +78,7 @@ const undo = (interaction) => {
   })
 }
 
-const setStoryRef = (component, interaction) => {
+const setStoryRef = (component: Component, interaction: Interaction) => {
   if (component) {
     storyMap.set(interaction, component)
   }
@@ -95,18 +98,20 @@ const scrollActiveIntoView = () => {
 const loadStory = async (id: string) => {
   const story = storyStore.get(id) || (await storyStore.load(id))
   interactionStore.addStory(story.id)
-  nextTick(scrollActiveIntoView)
+  await nextTick(scrollActiveIntoView)
 }
 
 onMounted(async () => {
-  if (route.params.id) {
+  const { id } = useParams()
+
+  if (id) {
     interactionStore.clear()
-    loadStory(route.params.id)
+    await loadStory(id)
   } else if (!interactionStore.activeStory) {
-    loadStory(interactionStore.lastStory?.id || import.meta.env.VITE_DEFAULT_STORY)
+    await loadStory(interactionStore.lastStory?.id || import.meta.env.VITE_DEFAULT_STORY)
   }
 
-  nextTick(scrollActiveIntoView)
+  await nextTick(scrollActiveIntoView)
 })
 
 const { toggle: toggleSurvey, shouldLaunch: shouldSurveyLaunch } = useSurvey()
@@ -120,17 +125,4 @@ watchDebounced(
   },
   { immediate: true, debounce: 1000 }
 )
-
-// TODO: dont use global scope styles
 </script>
-
-<style>
-.interactions-enter-active,
-.interactions-leave-active {
-  transition: all 0.7s ease;
-}
-.interactions-enter-from,
-.interactions-leave-to {
-  opacity: 0;
-}
-</style>
diff --git a/src/stores/BucketlistStore.ts b/src/stores/BucketlistStore.ts
index 20b6c9f..b7a3b4f 100644
--- a/src/stores/BucketlistStore.ts
+++ b/src/stores/BucketlistStore.ts
@@ -1,10 +1,10 @@
 import { defineStore } from 'pinia'
-import { useStorage } from '@vueuse/core'
-import axios from 'axios'
+
+import Bucketlist from '@/models/Bucketlist'
 
 export const useBucketlistStore = defineStore('BucketlistStore', {
   state: () => ({
-    bucketlists: useStorage('bucketlists', {}) as any, // TODO: add model
+    bucketlists: {} as Record<string, Bucketlist>,
   }),
   actions: {
     get(id: string) {
@@ -13,11 +13,11 @@ export const useBucketlistStore = defineStore('BucketlistStore', {
       }
     },
     async load(id: string) {
-      const response = await axios.get(`/api/bucketlists/${id}`)
-      return (this.bucketlists[id] = response.data.data)
+      return (this.bucketlists[id] = await Bucketlist.load(id))
     },
     clearCache() {
-      this.bucketlists = []
+      this.bucketlists = {}
     },
   },
+  persist: true,
 })
diff --git a/src/stores/ItemStore.ts b/src/stores/ItemStore.ts
index f911067..3605f03 100644
--- a/src/stores/ItemStore.ts
+++ b/src/stores/ItemStore.ts
@@ -1,11 +1,12 @@
 import { defineStore } from 'pinia'
-import { useStorage } from '@vueuse/core'
 import axios from 'axios'
 
+import Item from '@/models/Item'
+
 export const useItemStore = defineStore('ItemStore', {
   state: () => ({
-    items: useStorage('items', {}),
-    collectionLink: useStorage('collectionLink', null),
+    items: {} as Record<string, Item>,
+    collectionLink: null,
   }),
   actions: {
     get(id: string) {
@@ -14,8 +15,7 @@ export const useItemStore = defineStore('ItemStore', {
       }
     },
     async load(id: string) {
-      const response = await axios.get(`/api/items/${id}`)
-      return (this.items[id] = response.data.data)
+      return (this.items[id] = await Item.load(id))
     },
     clearCollectionLink() {
       this.collectionLink = null
@@ -29,23 +29,24 @@ export const useItemStore = defineStore('ItemStore', {
       if (this.collectionLink) {
         return this.collectionLink
       } else {
-        const response = await axios
+        const response = (await axios
           .post('/api/collections', {
             items: [...interactionStore.viewedItemIds],
           })
           .catch((err) => {
             console.log(err)
-          })
+          })) as any
         const collectionLink = response.data.url
         this.collectionLink = collectionLink
         return collectionLink
       }
     },
-    async fetch(collectionId: string) {
+    async fetch() {
       this.clearCollectionLink()
       this.items = {}
       // todo
       // this.viewedIds = (await axios.get(`/api/collections/${collectionId}`)).data
     },
   },
+  persist: true,
 })
diff --git a/src/stores/LocaleStore.ts b/src/stores/LocaleStore.ts
index 8d7c7ac..324747d 100644
--- a/src/stores/LocaleStore.ts
+++ b/src/stores/LocaleStore.ts
@@ -1,4 +1,3 @@
-import { useStorage } from '@vueuse/core'
 import { defineStore } from 'pinia'
 
 const getBrowserLocale = () => {
@@ -14,6 +13,7 @@ const getBrowserLocale = () => {
 
 export const useLocaleStore = defineStore('LocaleStore', {
   state: () => ({
-    locale: useStorage('locale', getBrowserLocale()),
+    locale: getBrowserLocale(),
   }),
+  persist: true,
 })
diff --git a/src/stores/PlaceStore.ts b/src/stores/PlaceStore.ts
index de5facf..98859b8 100644
--- a/src/stores/PlaceStore.ts
+++ b/src/stores/PlaceStore.ts
@@ -1,10 +1,10 @@
 import { defineStore } from 'pinia'
-import axios from 'axios'
-import { useStorage } from '@vueuse/core'
+
+import Place from '@/models/Place'
 
 export const usePlaceStore = defineStore('PlaceStore', {
   state: () => ({
-    places: useStorage('places', {}),
+    places: {} as Record<string, Place>,
   }),
   actions: {
     get(id: string) {
@@ -13,11 +13,11 @@ export const usePlaceStore = defineStore('PlaceStore', {
       }
     },
     async load(id: string) {
-      const response = await axios.get(`/api/places/${id}`)
-      return (this.places[id] = response.data.data)
+      return (this.places[id] = await Place.load(id))
     },
     clearCache() {
       this.places = {}
     },
   },
+  persist: true,
 })
diff --git a/src/stores/SectionStore.ts b/src/stores/SectionStore.ts
index 0900bc8..9a29280 100644
--- a/src/stores/SectionStore.ts
+++ b/src/stores/SectionStore.ts
@@ -1,10 +1,11 @@
 import { defineStore } from 'pinia'
 import axios from 'axios'
-import { useStorage } from '@vueuse/core'
+
+import Section from '@/models/Section'
 
 export const useSectionStore = defineStore('SectionStore', {
   state: () => ({
-    sections: useStorage('sections', {}),
+    sections: {} as Record<string, Section>,
   }),
   actions: {
     get(id: string) {
@@ -13,11 +14,11 @@ export const useSectionStore = defineStore('SectionStore', {
       }
     },
     async load(id: string) {
-      const response = await axios.get(`/api/sections/${id}`)
-      return (this.sections[id] = response.data.data)
+      return (this.sections[id] = await Section.load(id))
     },
     clearCache() {
       this.sections = {}
     },
   },
+  persist: true,
 })
diff --git a/src/stores/StoryStore.ts b/src/stores/StoryStore.ts
index d32bcb9..9c8764a 100644
--- a/src/stores/StoryStore.ts
+++ b/src/stores/StoryStore.ts
@@ -1,11 +1,12 @@
 import { defineStore } from 'pinia'
-import axios from 'axios'
-import { useStorage } from '@vueuse/core'
+
+import Story from '@/models/Story'
 
 export const useStoryStore = defineStore('StoryStore', {
   state: () => ({
-    stories: useStorage('stories', {}),
+    stories: {} as Record<string, Story>,
   }),
+
   actions: {
     get(id: string) {
       if (id in this.stories) {
@@ -13,11 +14,11 @@ export const useStoryStore = defineStore('StoryStore', {
       }
     },
     async load(id: string) {
-      const response = await axios.get(`/api/stories/${id}`)
-      return (this.stories[id] = response.data.data)
+      return (this.stories[id] = await Story.load(id))
     },
     clearCache() {
       this.stories = {}
     },
   },
+  persist: true,
 })