From bec036f65f868d4fdea1a7fb12d4c13a31cbb092 Mon Sep 17 00:00:00 2001
From: Len Verstijnen <35574315+lenverstijnen@users.noreply.github.com>
Date: Fri, 23 Feb 2024 08:20:29 +0100
Subject: [PATCH 01/15] Add uniq

---
 src/frontend/package-lock.json | 1 +
 src/frontend/package.json      | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index 26c21e0f..80cc1b8f 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -11,6 +11,7 @@
         "@pinia/nuxt": "^0.5.1",
         "date-fns": "^3.3.1",
         "gsap": "^3.12.5",
+        "lodash.uniq": "^4.5.0",
         "nuxt": "^3.10.1",
         "pinia": "^2.1.7",
         "slugify": "^1.6.6",
diff --git a/src/frontend/package.json b/src/frontend/package.json
index fdc45da5..1c16012a 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -19,6 +19,7 @@
     "@pinia/nuxt": "^0.5.1",
     "date-fns": "^3.3.1",
     "gsap": "^3.12.5",
+    "lodash.uniq": "^4.5.0",
     "nuxt": "^3.10.1",
     "pinia": "^2.1.7",
     "slugify": "^1.6.6",

From 7e5dfe53d9a78fa9026d27a7d77f46ea20d595da Mon Sep 17 00:00:00 2001
From: Len Verstijnen <35574315+lenverstijnen@users.noreply.github.com>
Date: Fri, 23 Feb 2024 08:51:41 +0100
Subject: [PATCH 02/15] Update types

---
 src/common/apiSchema/present.ts | 46 ++++++++++++++++-----------------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/common/apiSchema/present.ts b/src/common/apiSchema/present.ts
index 150b4cf1..aaa79b10 100644
--- a/src/common/apiSchema/present.ts
+++ b/src/common/apiSchema/present.ts
@@ -1,26 +1,26 @@
-import { BaseView, BaseDataEntity, BaseSliderEntry, ImageRef } from "./shared";
+import { BaseView, BaseDataEntity, BaseSliderEntry, ImageRef } from './shared';
 
-export type GeoLevel = "straat" | "buurt" | "wijk" | "stadsdeel";
+export type GeoLevel = 'straat' | 'buurt' | 'wijk' | 'stadsdeel';
 
 export type PresentEntityType =
-  | "outdoorArt"
-  | "cultureMulti"
-  | "musicVenue"
-  | "heritage"
-  | "dance"
-  | "visualArts"
-  | "photography"
-  | "cinema"
-  | "literary"
-  | "creativeIndustries"
-  | "theatre"
-  | "TVandRadio"
-  | "architecture"
-  | "newMedia"
-  | "debate"
-  | "aggregate_trees"
-  | "aggregate_tree_species"
-  | "aggregate_bees";
+  | 'outdoorArt'
+  | 'cultureMulti'
+  | 'musicVenue'
+  | 'heritage'
+  | 'dance'
+  | 'visualArts'
+  | 'photography'
+  | 'cinema'
+  | 'literary'
+  | 'creativeIndustries'
+  | 'theatre'
+  | 'TVandRadio'
+  | 'architecture'
+  | 'newMedia'
+  | 'debate'
+  | 'aggregate_trees'
+  | 'aggregate_tree_species'
+  | 'aggregate_bees';
 
 export interface PresentData extends BaseView {
   slider: (DistanceViewEntry | DistanceViewAggregateEntry)[]; // The entries for on the slider
@@ -35,9 +35,9 @@ export interface DistanceViewEntry extends BaseSliderEntry {
 }
 
 export interface DistanceViewAggregateEntry
-  extends Omit<DistanceViewEntry, "image" | "visitUrl"> {
-  data: Record<string, number>; // The data for the aggregate, where the key is the name of the buurt, wijk, stadsdeel etc.
-  type: "aggregate_trees" | "aggregate_tree_species" | "aggregate_bees";
+  extends Omit<DistanceViewEntry, 'image' | 'visitUrl'> {
+  data: { areaName: string; count: number };
+  type: 'aggregate_trees' | 'aggregate_tree_species' | 'aggregate_bees';
 }
 
 export interface AgendaItem extends BaseDataEntity {

From 3eb839ea88e687d328ba7a52b3a3affb65570b12 Mon Sep 17 00:00:00 2001
From: Len Verstijnen <35574315+lenverstijnen@users.noreply.github.com>
Date: Fri, 23 Feb 2024 08:53:27 +0100
Subject: [PATCH 03/15] Update aggregate card

---
 src/frontend/components/UI/ListView/index.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/frontend/components/UI/ListView/index.vue b/src/frontend/components/UI/ListView/index.vue
index 1bc3ab1a..12b45557 100644
--- a/src/frontend/components/UI/ListView/index.vue
+++ b/src/frontend/components/UI/ListView/index.vue
@@ -5,7 +5,7 @@
         <SharedAggregateCard
           v-if="entryIsAggregate(entry)"
           :type="entry.type as AggregateType"
-          :count="getAggregateCount(entry as DistanceViewAggregateEntry)"
+          :count="(entry as DistanceViewAggregateEntry).data.count"
         />
       </div>
       <SharedImage
@@ -58,10 +58,6 @@ const entryIsAggregate = (
     entry.type === 'aggregate_bees'
   )
 }
-
-const getAggregateCount = (entry: DistanceViewAggregateEntry) => {
-  return entry.data[Object.keys(entry.data)[0]]
-}
 </script>
 
 <style lang="less" scoped>

From 0598222c080691c52c6a4581fae2ad8ab1b9b92f Mon Sep 17 00:00:00 2001
From: Len Verstijnen <35574315+lenverstijnen@users.noreply.github.com>
Date: Fri, 23 Feb 2024 08:53:59 +0100
Subject: [PATCH 04/15] Add timeline entries util

---
 src/frontend/utils/timelineUtils.ts | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 src/frontend/utils/timelineUtils.ts

diff --git a/src/frontend/utils/timelineUtils.ts b/src/frontend/utils/timelineUtils.ts
new file mode 100644
index 00000000..691ce5a3
--- /dev/null
+++ b/src/frontend/utils/timelineUtils.ts
@@ -0,0 +1,9 @@
+import uniq from 'lodash/uniq'
+import { PastData } from '../../common/apiSchema/past'
+import { PresentData } from '../../common/apiSchema/present'
+
+export const getEntryPositions = (
+  entries: PastData['timeline'] | PresentData['slider'],
+) => {
+  return uniq(entries.map((entry) => entry.position))
+}

From 30882e81d748cb02abacae8f9c927331e7657b8e Mon Sep 17 00:00:00 2001
From: Len Verstijnen <35574315+lenverstijnen@users.noreply.github.com>
Date: Fri, 23 Feb 2024 09:32:39 +0100
Subject: [PATCH 05/15] Add ID's to entries

---
 src/frontend/components/UI/ListView/index.vue | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/frontend/components/UI/ListView/index.vue b/src/frontend/components/UI/ListView/index.vue
index 12b45557..652cadb3 100644
--- a/src/frontend/components/UI/ListView/index.vue
+++ b/src/frontend/components/UI/ListView/index.vue
@@ -1,6 +1,11 @@
 <template>
   <div v-if="entries" class="entry-list">
-    <div v-for="(entry, index) in entries" :key="index" class="entry-wrapper">
+    <div
+      v-for="(entry, index) in entries"
+      :id="getId(entry)"
+      :key="index"
+      class="entry-wrapper"
+    >
       <div class="card-wrapper">
         <SharedAggregateCard
           v-if="entryIsAggregate(entry)"
@@ -49,6 +54,19 @@ export interface ListViewProps {
 
 const props = defineProps<ListViewProps>()
 
+let lastId: number | null = null
+
+const getId = (
+  entry: TimelineEntry | DistanceViewAggregateEntry | DistanceViewEntry,
+) => {
+  if (entry.position === lastId) {
+    return undefined
+  } else {
+    lastId = entry.position
+    return lastId.toString()
+  }
+}
+
 const entryIsAggregate = (
   entry: DistanceViewEntry | DistanceViewAggregateEntry | TimelineEntry,
 ) => {

From 3845683c760e45d3f5c6de994f6f839302c85891 Mon Sep 17 00:00:00 2001
From: Len Verstijnen <35574315+lenverstijnen@users.noreply.github.com>
Date: Sun, 25 Feb 2024 11:16:33 +0100
Subject: [PATCH 06/15] Add function to calculate percentage in range

---
 src/frontend/utils/timelineUtils.ts | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/frontend/utils/timelineUtils.ts b/src/frontend/utils/timelineUtils.ts
index 691ce5a3..3b945151 100644
--- a/src/frontend/utils/timelineUtils.ts
+++ b/src/frontend/utils/timelineUtils.ts
@@ -7,3 +7,19 @@ export const getEntryPositions = (
 ) => {
   return uniq(entries.map((entry) => entry.position))
 }
+
+export const getPercentageInRange = (
+  rangeMax: number,
+  rangeMin: number,
+  value: number,
+) => {
+  const result = ((value - rangeMin) / (rangeMax - rangeMin)) * 100
+
+  if (result > 100) {
+    return 100
+  } else if (result < 0) {
+    return 0
+  } else {
+    return result
+  }
+}

From 365b43cfdc58d75bcafa4eed93e747ef8fd696ed Mon Sep 17 00:00:00 2001
From: Len Verstijnen <35574315+lenverstijnen@users.noreply.github.com>
Date: Sun, 25 Feb 2024 11:17:17 +0100
Subject: [PATCH 07/15] Prepare useAddress to be a store

---
 .../{composables/useAddress.ts => store/addressStore.ts}       | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)
 rename src/frontend/{composables/useAddress.ts => store/addressStore.ts} (85%)

diff --git a/src/frontend/composables/useAddress.ts b/src/frontend/store/addressStore.ts
similarity index 85%
rename from src/frontend/composables/useAddress.ts
rename to src/frontend/store/addressStore.ts
index 2fdf95c9..1cb5fc14 100644
--- a/src/frontend/composables/useAddress.ts
+++ b/src/frontend/store/addressStore.ts
@@ -3,7 +3,8 @@ import { AddressRecord } from '../../common/apiSchema/addressRecord'
 
 import { PresentData } from '../../common/apiSchema/present'
 
-export const useAddress = (address: string) => {
+// TODO: make this a store to prevent lots of requests
+export const useAddressStore = (address: string) => {
   const addressService = useAddressService()
 
   const addressData: Ref<AddressRecord | null> = ref(null)

From beaa7f3c444c4c080bc91a8623daa835060352e7 Mon Sep 17 00:00:00 2001
From: Len Verstijnen <35574315+lenverstijnen@users.noreply.github.com>
Date: Sun, 25 Feb 2024 11:18:26 +0100
Subject: [PATCH 08/15] add the props to the slider

---
 src/frontend/components/shared/Slider/index.vue |  4 +++-
 src/frontend/pages/[address].vue                | 14 ++++++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/frontend/components/shared/Slider/index.vue b/src/frontend/components/shared/Slider/index.vue
index be0feff6..f58aedc3 100644
--- a/src/frontend/components/shared/Slider/index.vue
+++ b/src/frontend/components/shared/Slider/index.vue
@@ -12,7 +12,9 @@
 
 <script setup lang="ts">
 export interface SliderProps {
-  // TODO
+  positions: number[] // the positions correspond with the ids of the entries
+  rangeMax: number
+  rangeMin: number
 }
 
 const props = defineProps<SliderProps>()
diff --git a/src/frontend/pages/[address].vue b/src/frontend/pages/[address].vue
index 9855a139..b0c28952 100644
--- a/src/frontend/pages/[address].vue
+++ b/src/frontend/pages/[address].vue
@@ -38,12 +38,18 @@
         @click="() => (currentView = 'present')"
       />
     </div>
-    <SharedSlider />
+    <SharedSlider
+      v-if="currentDataSet && entries"
+      :range-max="currentDataSet.rangeEnd"
+      :range-min="currentDataSet.rangeStart"
+      :positions="getEntryPositions(entries)"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { getTranslationKey } from '@/translations'
+import { useAddressStore } from '@/store/addressStore'
 
 defineI18nRoute({
   paths: {
@@ -53,7 +59,7 @@ defineI18nRoute({
 
 const { params } = useRoute()
 
-const { pastData, presentData } = useAddress(params.address as string)
+const { pastData, presentData } = useAddressStore(params.address as string)
 const currentView: Ref<'present' | 'past'> = ref('past')
 
 const entries = computed(() => {
@@ -61,6 +67,10 @@ const entries = computed(() => {
     ? pastData.value?.timeline
     : presentData.value?.slider
 })
+
+const currentDataSet = computed(() => {
+  return currentView.value === 'past' ? pastData.value : presentData.value
+})
 </script>
 
 <style lang="less" scoped>

From b771523ff8913104d3ae99306df5e4290dd1fa08 Mon Sep 17 00:00:00 2001
From: Len Verstijnen <35574315+lenverstijnen@users.noreply.github.com>
Date: Sun, 25 Feb 2024 13:48:38 +0100
Subject: [PATCH 09/15] Make timeline work with gsap

---
 .../components/shared/Slider/index.vue        | 43 +++++++++++++++++--
 1 file changed, 40 insertions(+), 3 deletions(-)

diff --git a/src/frontend/components/shared/Slider/index.vue b/src/frontend/components/shared/Slider/index.vue
index f58aedc3..a4f8dc33 100644
--- a/src/frontend/components/shared/Slider/index.vue
+++ b/src/frontend/components/shared/Slider/index.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="slider">
-    <div class="pointer">
+    <div :style="cssProp" class="pointer">
       <div class="pointer-label">
         <SharedTypography variant="body-small" :compact="true">
-          1900
+          {{ currentPosition }}
         </SharedTypography>
       </div>
     </div>
@@ -11,13 +11,49 @@
 </template>
 
 <script setup lang="ts">
+import gsap from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+import { getPercentageInRange } from '@/utils/timelineUtils'
+gsap.registerPlugin(ScrollTrigger)
+
+const props = defineProps<SliderProps>()
+
 export interface SliderProps {
   positions: number[] // the positions correspond with the ids of the entries
   rangeMax: number
   rangeMin: number
 }
 
-const props = defineProps<SliderProps>()
+const currentPosition = ref(props.rangeMax)
+
+const cssProp = computed(() => {
+  const percentage = getPercentageInRange(
+    props.rangeMax,
+    props.rangeMin,
+    currentPosition.value,
+  )
+
+  return `top: calc(${100 - percentage}% - 12px)`
+})
+
+onMounted(() => {
+  // TODO: remove timeout and make this if all images are loaded
+  setTimeout(() => {
+    props.positions.forEach((position, index) => {
+      ScrollTrigger.create({
+        trigger: `[id="${position}"]`,
+        start: 'top 50%',
+        end: 'bottom 50%',
+        onEnter: () => {
+          currentPosition.value = position
+        },
+        onLeaveBack: () => {
+          currentPosition.value = props.positions[index - 1]
+        },
+      })
+    })
+  }, 500)
+})
 </script>
 
 <style lang="less" scoped>
@@ -36,6 +72,7 @@ const props = defineProps<SliderProps>()
   height: 12px;
   background: @primary-black;
   border-radius: 50%;
+  transition: top 0.5s ease-in-out;
   transform: translateX(-50%);
 }
 

From 82ad88f9ebba651a11285c3b1267ac32c7e1baac Mon Sep 17 00:00:00 2001
From: Len Verstijnen <35574315+lenverstijnen@users.noreply.github.com>
Date: Mon, 26 Feb 2024 12:02:06 +0100
Subject: [PATCH 10/15] Make scrolltrigger work on both lines

---
 .../components/shared/Slider/index.vue        | 57 ++++++++++++++-----
 src/frontend/pages/[address].vue              |  1 +
 2 files changed, 43 insertions(+), 15 deletions(-)

diff --git a/src/frontend/components/shared/Slider/index.vue b/src/frontend/components/shared/Slider/index.vue
index a4f8dc33..242e3dd7 100644
--- a/src/frontend/components/shared/Slider/index.vue
+++ b/src/frontend/components/shared/Slider/index.vue
@@ -1,13 +1,15 @@
 <template>
-  <div class="slider">
-    <div :style="cssProp" class="pointer">
-      <div class="pointer-label">
-        <SharedTypography variant="body-small" :compact="true">
-          {{ currentPosition }}
-        </SharedTypography>
+  <TransitionFade>
+    <div v-if="!loading" class="slider">
+      <div :style="cssProp" class="pointer">
+        <div class="pointer-label">
+          <SharedTypography variant="body-small" :compact="true">
+            {{ currentPosition + (isDistanceView ? 'm' : '') }}
+          </SharedTypography>
+        </div>
       </div>
     </div>
-  </div>
+  </TransitionFade>
 </template>
 
 <script setup lang="ts">
@@ -22,9 +24,11 @@ export interface SliderProps {
   positions: number[] // the positions correspond with the ids of the entries
   rangeMax: number
   rangeMin: number
+  isDistanceView?: boolean
 }
 
 const currentPosition = ref(props.rangeMax)
+const loading = ref(true)
 
 const cssProp = computed(() => {
   const percentage = getPercentageInRange(
@@ -33,17 +37,34 @@ const cssProp = computed(() => {
     currentPosition.value,
   )
 
-  return `top: calc(${100 - percentage}% - 12px)`
+  return `top: calc(${props.isDistanceView ? percentage : 100 - percentage}% - 12px)`
 })
 
-onMounted(() => {
-  // TODO: remove timeout and make this if all images are loaded
+// TODO: implement this
+// const areImagesLoaded = () => {
+//   const images = document.getElementsByTagName('img')
+
+//   for (let i = 0; i < images.length; i++) {
+//     if (!images[i].complete) {
+//       return false
+//     }
+//   }
+
+//   return true
+// }
+
+const setAnimation = () => {
+  // TODO: make this not timeout but event based
+  loading.value = true
+  ScrollTrigger.killAll()
+
   setTimeout(() => {
     props.positions.forEach((position, index) => {
       ScrollTrigger.create({
         trigger: `[id="${position}"]`,
-        start: 'top 50%',
-        end: 'bottom 50%',
+        start: 'top 10%',
+        end: 'top 10%',
+        markers: true,
         onEnter: () => {
           currentPosition.value = position
         },
@@ -52,8 +73,12 @@ onMounted(() => {
         },
       })
     })
-  }, 500)
-})
+    loading.value = false
+  }, 1000)
+}
+
+onMounted(setAnimation)
+watch(() => props.positions, setAnimation)
 </script>
 
 <style lang="less" scoped>
@@ -64,6 +89,8 @@ onMounted(() => {
   height: 90vh;
   border-right: 1px solid @primary-black;
   width: 1px;
+  opacity: 1;
+  transition: opacity 0.5s;
 }
 
 .pointer {
@@ -72,7 +99,7 @@ onMounted(() => {
   height: 12px;
   background: @primary-black;
   border-radius: 50%;
-  transition: top 0.5s ease-in-out;
+  transition: top 0.5s;
   transform: translateX(-50%);
 }
 
diff --git a/src/frontend/pages/[address].vue b/src/frontend/pages/[address].vue
index b0c28952..187b1bf0 100644
--- a/src/frontend/pages/[address].vue
+++ b/src/frontend/pages/[address].vue
@@ -43,6 +43,7 @@
       :range-max="currentDataSet.rangeEnd"
       :range-min="currentDataSet.rangeStart"
       :positions="getEntryPositions(entries)"
+      :is-distance-view="currentView === 'present'"
     />
   </div>
 </template>

From bc2981bfe6e8f7f1f07193efee2f2c52be8d8796 Mon Sep 17 00:00:00 2001
From: Len Verstijnen <35574315+lenverstijnen@users.noreply.github.com>
Date: Mon, 26 Feb 2024 12:04:09 +0100
Subject: [PATCH 11/15] Fix a small bug

---
 src/frontend/components/shared/Slider/index.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/frontend/components/shared/Slider/index.vue b/src/frontend/components/shared/Slider/index.vue
index 242e3dd7..416019a9 100644
--- a/src/frontend/components/shared/Slider/index.vue
+++ b/src/frontend/components/shared/Slider/index.vue
@@ -57,6 +57,7 @@ const setAnimation = () => {
   // TODO: make this not timeout but event based
   loading.value = true
   ScrollTrigger.killAll()
+  currentPosition.value = props.rangeMax
 
   setTimeout(() => {
     props.positions.forEach((position, index) => {

From 5d60bda408d880c46855d3c9dc761bae59270e27 Mon Sep 17 00:00:00 2001
From: Len Verstijnen <35574315+lenverstijnen@users.noreply.github.com>
Date: Mon, 26 Feb 2024 12:04:53 +0100
Subject: [PATCH 12/15] Remove markers

---
 src/frontend/components/shared/Slider/index.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/frontend/components/shared/Slider/index.vue b/src/frontend/components/shared/Slider/index.vue
index 416019a9..b9322499 100644
--- a/src/frontend/components/shared/Slider/index.vue
+++ b/src/frontend/components/shared/Slider/index.vue
@@ -65,7 +65,6 @@ const setAnimation = () => {
         trigger: `[id="${position}"]`,
         start: 'top 10%',
         end: 'top 10%',
-        markers: true,
         onEnter: () => {
           currentPosition.value = position
         },

From aaff4dcbd998059f4c47ea10d1c3cbb5eda97baa Mon Sep 17 00:00:00 2001
From: Len Verstijnen <35574315+lenverstijnen@users.noreply.github.com>
Date: Mon, 26 Feb 2024 12:08:32 +0100
Subject: [PATCH 13/15] Fix all the stories

---
 src/frontend/components/shared/Slider/Slider.stories.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/frontend/components/shared/Slider/Slider.stories.ts b/src/frontend/components/shared/Slider/Slider.stories.ts
index 008c694c..dc86cc83 100644
--- a/src/frontend/components/shared/Slider/Slider.stories.ts
+++ b/src/frontend/components/shared/Slider/Slider.stories.ts
@@ -16,4 +16,9 @@ const Template: StoryFn<typeof Slider> = (args: SliderProps) => ({
 })
 
 export const SliderStory = Template.bind({})
-SliderStory.args = {}
+SliderStory.args = {
+  positions: [100, 0],
+  rangeMax: 100,
+  rangeMin: 0,
+  isDistanceView: true,
+}

From 65d65fd3e6933cc55fbc5f19f232e11bd0273d5d Mon Sep 17 00:00:00 2001
From: Len Verstijnen <35574315+lenverstijnen@users.noreply.github.com>
Date: Mon, 26 Feb 2024 13:58:57 +0100
Subject: [PATCH 14/15] Fix fade bug

---
 src/frontend/components/shared/Slider/index.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/frontend/components/shared/Slider/index.vue b/src/frontend/components/shared/Slider/index.vue
index b9322499..335dcb13 100644
--- a/src/frontend/components/shared/Slider/index.vue
+++ b/src/frontend/components/shared/Slider/index.vue
@@ -89,8 +89,6 @@ watch(() => props.positions, setAnimation)
   height: 90vh;
   border-right: 1px solid @primary-black;
   width: 1px;
-  opacity: 1;
-  transition: opacity 0.5s;
 }
 
 .pointer {

From 1ac37a3edd82f9494297dc982d06d236673c686d Mon Sep 17 00:00:00 2001
From: Len Verstijnen <35574315+lenverstijnen@users.noreply.github.com>
Date: Mon, 26 Feb 2024 14:21:03 +0100
Subject: [PATCH 15/15] add animated view

---
 .../UI/AnimatedView/AnimatedView.stories.ts   | 19 +++++++++++++++++++
 .../components/UI/AnimatedView/index.vue      | 14 ++++++++++++++
 2 files changed, 33 insertions(+)
 create mode 100644 src/frontend/components/UI/AnimatedView/AnimatedView.stories.ts
 create mode 100644 src/frontend/components/UI/AnimatedView/index.vue

diff --git a/src/frontend/components/UI/AnimatedView/AnimatedView.stories.ts b/src/frontend/components/UI/AnimatedView/AnimatedView.stories.ts
new file mode 100644
index 00000000..542d75c1
--- /dev/null
+++ b/src/frontend/components/UI/AnimatedView/AnimatedView.stories.ts
@@ -0,0 +1,19 @@
+import type { Meta, StoryFn } from '@storybook/vue3'
+
+import AnimatedView, { AnimatedViewProps } from './index.vue'
+
+export default {
+  title: 'UI/Ui/AnimatedView',
+  component: AnimatedView,
+} as Meta<typeof AnimatedView>
+
+const Template: StoryFn<typeof AnimatedView> = (args: AnimatedViewProps) => ({
+  components: { AnimatedView },
+  setup() {
+    return { args }
+  },
+  template: '<AnimatedView v-bind="args" />',
+})
+
+export const AnimatedViewStory = Template.bind({})
+AnimatedViewStory.args = {}
diff --git a/src/frontend/components/UI/AnimatedView/index.vue b/src/frontend/components/UI/AnimatedView/index.vue
new file mode 100644
index 00000000..1670a4d9
--- /dev/null
+++ b/src/frontend/components/UI/AnimatedView/index.vue
@@ -0,0 +1,14 @@
+<template>
+    // TODO
+</template>
+
+<script setup lang="ts">
+export interface AnimatedViewProps {
+    // TODO
+};
+
+const props = defineProps<AnimatedViewProps>()
+</script>
+
+<style lang="less" scoped>
+</style>
\ No newline at end of file