From bd61111ffb7eff8a550f910308bf20b7dd6393dd Mon Sep 17 00:00:00 2001
From: Daniele Guido <gui.daniele@gmail.com>
Date: Tue, 18 Jun 2024 11:42:09 +0200
Subject: [PATCH 01/12] add global styles

---
 .storybook/preview.ts |  13 ++---
 src/styles/style.css  | 113 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 120 insertions(+), 6 deletions(-)
 create mode 100644 src/styles/style.css

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 40280b516..116540d01 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -1,5 +1,5 @@
 import type { Preview } from '@storybook/vue3'
-import { setup } from "@storybook/vue3"
+import { setup } from '@storybook/vue3'
 import { initialize, mswLoader } from 'msw-storybook-addon'
 import globalComponents from '../src/plugins/globalComponents'
 import { newI18n } from '../src/plugins/i18n'
@@ -8,6 +8,7 @@ import { handlers as mswHandlers } from './mswHandlers'
 
 import 'dripicons/webfont/webfont.css'
 import 'impresso-theme/dist/css/bootpresso.css'
+import '../src/styles/style.css'
 import '../src/assets/legacy/bootstrap-vue.css'
 
 /*
@@ -21,13 +22,13 @@ const worker = initialize({
     if (pathname.startsWith('/api/')) {
       throw new Error(`Please add a request handler for ${method} ${pathname}`)
     }
-  },
+  }
 })
 
 // it won't load the handlers without this call. May be a bug
 worker.use(...[])
 
-setup(app => {
+setup((app) => {
   app.use(pinia)
   app.use(newI18n())
   app.use(globalComponents)
@@ -42,10 +43,10 @@ const preview: Preview = {
       }
     },
     msw: {
-      handlers: mswHandlers,
-    },
+      handlers: mswHandlers
+    }
   },
-  loaders: [mswLoader],
+  loaders: [mswLoader]
 }
 
 export default preview
diff --git a/src/styles/style.css b/src/styles/style.css
new file mode 100644
index 000000000..5ab64c23f
--- /dev/null
+++ b/src/styles/style.css
@@ -0,0 +1,113 @@
+@font-face {
+  font-family: 'Satoshi-Variable';
+  src:
+    url('/assets/fonts/Satoshi-Variable.woff2') format('woff2'),
+    url('/assets/fonts/Satoshi-Variable.woff') format('woff'),
+    url('/assets/fonts/Satoshi-Variable.ttf') format('truetype');
+  font-weight: 300 900;
+  font-display: swap;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Satoshi-VariableItalic';
+  src:
+    url('/assets/fonts/Satoshi-VariableItalic.woff2') format('woff2'),
+    url('/assets/fonts/Satoshi-VariableItalic.woff') format('woff'),
+    url('/assets/fonts/Satoshi-VariableItalic.ttf') format('truetype');
+  font-weight: 300 900;
+  font-display: swap;
+  font-style: italic;
+}
+
+:root {
+  --impresso-color-paper: #fafbf2;
+
+  --impresso-color-yellow-code: 255, 235, 120;
+  --impresso-color-yellow: #ffeb78;
+  --impresso-color-yellow-alpha-20: rgba(255, 235, 120, 0.2);
+  --impresso-color-yellow-alpha-30: rgba(255, 235, 120, 0.3);
+  --impresso-color-yellow-alpha-50: rgba(255, 235, 120, 0.5);
+  --impresso-color-yellow-alpha-80: rgba(255, 235, 120, 0.8);
+
+  --impresso-color-black: #343a40;
+  --impresso-color-black-rgb: 52, 58, 64;
+
+  --impresso-color-pastel-blue: rgba(86, 204, 242);
+  --impresso-color-pastel-blue-alpha-20: rgba(86, 204, 242, 0.2);
+
+  --impresso-border-radius-xs: 5px;
+  --impresso-border-radius-sm: 10px;
+  --impresso-border-radius-md: 15px;
+  --impresso-border-radius-lg: 20px;
+  --impresso-border-radius-xl: 30px;
+  --impresso-font-size-smallcaps: 0.72em;
+  --impresso-letter-spacing-smallcaps: 0.08em;
+  --impresso-font-size-smaller: 0.85em;
+  --impresso-wght: 450;
+  --impresso-wght-bold: 700;
+  --impresso-wght-smallcaps: 580;
+  --impresso-wght-smallcaps-bold: 800;
+  --clr-white: #f8f8ff;
+  --clr-white-rgba-20: #ffffff33;
+  --clr-dark: var(--impresso-color-black);
+
+  --clr-grey-100: #3d4146;
+  --clr-grey-200: #5b5e65;
+  --clr-grey-300: #84868e;
+  --clr-grey-400: #a9aab4;
+  --clr-grey-500: #c2c3cb;
+  --clr-grey-600: #d4d5e1;
+  --clr-grey-700: #e1e1ee;
+  --clr-grey-800: #ececfb;
+  --clr-grey-900: #f8f8ff;
+  --clr-grey-100-rgba-20: #464d5333;
+  --clr-grey-200-rgba-20: #585d6633;
+  --clr-grey-300-rgba-20: #7c7f8c33;
+  --clr-grey-400-rgba-20: #a0a1a333;
+  --clr-grey-500-rgba-20: #b1b2c633;
+  --clr-grey-600-rgba-20: #c3c4d933;
+  --clr-grey-700-rgba-20: #d5d5ec33;
+  --clr-grey-800-rgba-20: #e7e7ff33;
+  --clr-grey-900-rgba-20: #f8f8ff33;
+
+  --spacing-1: 0.25rem;
+  --spacing-2: 0.5rem;
+  --spacing-3: 1rem;
+  --spacing-4: 1.5rem;
+  --spacing-5: 3rem;
+  --negative-spacing-1: -0.25rem;
+  --negative-spacing-2: -0.5rem;
+  --negative-spacing-3: -1rem;
+  --negative-spacing-4: -1.5rem;
+  --negative-spacing-5: -3rem;
+
+  --accent: #28a745;
+  --impresso-yellow: #ffeb78;
+  --border-radius-sm: 3px;
+  --border-radius-md: 8px;
+  --border-radius-lg: 12px;
+
+  /* Bootstrap overrides */
+  --bs-font-sans-serif: 'Satoshi-Variable', sans-serif;
+  --bs-font-sans-serif-italic: 'Satoshi-VariableItalic', sans-serif;
+  --bs-font-serif-italic: 'questa', serif;
+  --bs-font-serif: 'questa', serif;
+  --bs-border-radius-lg: var(--impresso-border-radius-lg);
+  --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.125);
+  --bs-box-shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
+  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
+
+  --bs-font-size-base: 1rem;
+  --impresso-font-size-3: 1.75rem;
+  --impresso-font-size-4: 1.5rem;
+}
+
+body {
+  font-family: var(--bs-font-sans-serif);
+  font-weight: 450;
+  font-variation-settings: 'wght' 450;
+  text-rendering: optimizeLegibility;
+}

From 753b74d654a4bae473aaecc39c092742b01c15b4 Mon Sep 17 00:00:00 2001
From: Daniele Guido <gui.daniele@gmail.com>
Date: Tue, 18 Jun 2024 11:42:33 +0200
Subject: [PATCH 02/12] add TutorialMonitor component and its story

---
 src/components/TutorialMonitor.vue            | 14 ++++++++++++
 .../stories/TutorialMonitor.stories.ts        | 22 +++++++++++++++++++
 2 files changed, 36 insertions(+)
 create mode 100644 src/components/TutorialMonitor.vue
 create mode 100644 src/components/stories/TutorialMonitor.stories.ts

diff --git a/src/components/TutorialMonitor.vue b/src/components/TutorialMonitor.vue
new file mode 100644
index 000000000..4f341cab3
--- /dev/null
+++ b/src/components/TutorialMonitor.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="TutorialMonitor">Hello! {{ title }}</div>
+</template>
+<script setup lang="ts">
+import { defineProps } from 'vue'
+
+const props = defineProps({
+  /** @type {string} */
+  title: {
+    type: String,
+    required: true
+  }
+})
+</script>
diff --git a/src/components/stories/TutorialMonitor.stories.ts b/src/components/stories/TutorialMonitor.stories.ts
new file mode 100644
index 000000000..c4a2ddb16
--- /dev/null
+++ b/src/components/stories/TutorialMonitor.stories.ts
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import TutorialMonitor from '@/components/TutorialMonitor.vue'
+
+const meta: Meta<typeof TutorialMonitor> = {
+  title: 'Components/TutorialMonitor',
+  component: TutorialMonitor,
+  tags: ['autodocs'],
+
+  args: {
+    title: 'Tutorial Monitor'
+  }
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    title: 'Tutorial Monitor'
+  }
+}

From 56d5fceefa7d1e5df7f40df9a51786a935590b9f Mon Sep 17 00:00:00 2001
From: Daniele Guido <gui.daniele@gmail.com>
Date: Tue, 18 Jun 2024 12:24:27 +0200
Subject: [PATCH 03/12] basic chevron and transition to collapse list of
 tutorials

---
 src/components/TutorialMonitor.vue            | 81 ++++++++++++++++++-
 src/components/base/Icon.vue                  | 67 ++++++++-------
 .../stories/TutorialMonitor.stories.ts        |  1 -
 3 files changed, 117 insertions(+), 32 deletions(-)

diff --git a/src/components/TutorialMonitor.vue b/src/components/TutorialMonitor.vue
index 4f341cab3..0f3a609aa 100644
--- a/src/components/TutorialMonitor.vue
+++ b/src/components/TutorialMonitor.vue
@@ -1,9 +1,33 @@
 <template>
-  <div class="TutorialMonitor">Hello! {{ title }}</div>
+  <div ref="rootRef" class="TutorialMonitor">
+    <div ref="headerRef" class="d-flex justify-content-between align-items-center p-4">
+      <div>
+        <h3>Hello! {{ title }}</h3>
+        <p class="mb-0">subtitle</p>
+      </div>
+      <button
+        class="btn btn-sm"
+        :class="{
+          active: !isCollapsed
+        }"
+        @click="toggleCollapse"
+      >
+        <Icon name="chevron" />
+      </button>
+    </div>
+    <div class="TutorialMonitor__body position-absolute">
+      ciccio pasticcio
+      <slot></slot>
+    </div>
+  </div>
 </template>
 <script setup lang="ts">
-import { defineProps } from 'vue'
+import { defineProps, ref, onMounted } from 'vue'
+import Icon from './base/Icon.vue'
 
+const rootRef = ref<HTMLElement | null>(null)
+const headerRef = ref<HTMLElement | null>(null)
+const isCollapsed = ref(true)
 const props = defineProps({
   /** @type {string} */
   title: {
@@ -11,4 +35,57 @@ const props = defineProps({
     required: true
   }
 })
+
+// at the very beginning, we want the height of rootRef equals headerRef only
+// then, we want to animate the height of rootRef to the full height of the body
+
+onMounted(() => {
+  const root = rootRef.value
+  const header = headerRef.value
+  if (root && header) {
+    root.style.height = `${header.offsetHeight}px`
+    // hidden
+    root.style.overflow = 'hidden'
+  }
+})
+
+const toggleCollapse = () => {
+  const root = rootRef.value
+  const header = headerRef.value
+  if (root && header) {
+    if (isCollapsed.value) {
+      root.style.height = `${root.scrollHeight}px`
+      isCollapsed.value = false
+    } else {
+      root.style.height = `${header.offsetHeight}px`
+      isCollapsed.value = true
+    }
+  }
+}
 </script>
+<style>
+.TutorialMonitor {
+  box-shadow: var(--bs-box-shadow-sm);
+  border-radius: var(--border-radius-lg);
+  position: relative;
+  overflow: hidden;
+  will-change: height;
+  transition: height 0.6s;
+  transition-timing-function: var(--impresso-transition-ease);
+}
+
+.TutorialMonitor h3 {
+  font-family: var(--bs-font-sans-serif);
+}
+.TutorialMonitor__body {
+  height: 100px;
+  background: var(--clr-grey-500);
+}
+.TutorialMonitor button {
+  transition: transform 0.6s;
+  transition-timing-function: var(--impresso-transition-ease);
+}
+.TutorialMonitor button.active {
+  transform: rotate(180deg);
+}
+</style>
diff --git a/src/components/base/Icon.vue b/src/components/base/Icon.vue
index 7d73b5bfa..3eeb350d2 100644
--- a/src/components/base/Icon.vue
+++ b/src/components/base/Icon.vue
@@ -3,7 +3,7 @@
     :width="width * scaleValue"
     :height="height * scaleValue"
     :viewBox="computedSvgViewbox"
-    :class="{'Icon': true }"
+    :class="{ Icon: true }"
   >
     <g>
       <path
@@ -47,10 +47,9 @@ const Icons: Record<string, IconData> = {
     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',
-      },
-    ],
+        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,
@@ -58,10 +57,9 @@ const Icons: Record<string, IconData> = {
     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',
-      },
-    ],
+        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,
@@ -69,14 +67,13 @@ const Icons: Record<string, IconData> = {
     paths: [
       {
         style: 'stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;',
-        d: 'M3 21L12 21H21',
+        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',
-      },
-    ],
+        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,
@@ -84,50 +81,62 @@ const Icons: Record<string, IconData> = {
     paths: [
       {
         style: 'stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;',
-        d: 'M7 12.5L10 15.5L17 8.5',
+        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',
-      },
-    ],
+        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'
+      }
+    ]
   },
+  chevron: {
+    width: 24,
+    height: 24,
+    paths: [
+      {
+        style: 'fill:white; stroke:black; stroke-width:1px;',
+
+        d: 'M6 9L12 15L18 9'
+      }
+    ]
+  }
 }
 
 const props = defineProps({
   name: {
     type: String,
-    default: 'slack',
+    default: 'slack'
   },
   scale: {
     type: [Number, String],
-    default: 1,
+    default: 1
   },
   paths: {
     type: Array,
-    default: () => [],
+    default: () => []
   },
   polygons: {
     type: Array,
-    default: () => [],
+    default: () => []
   },
   width: {
     type: Number,
-    default: 24,
+    default: 24
   },
   height: {
     type: Number,
-    default: 24,
+    default: 24
   },
   strokeWidth: {
     type: Number,
-    default: 1,
-  },
+    default: 1
+  }
 })
 
-const computedPaths = computed(() => (props.paths.length ? props.paths as any as Path[] : Icons[props.name].paths))
+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,
+  props.polygons.length ? (props.polygons as Polygon[]) : Icons[props.name].polygons
 )
 const computedSvgViewbox = computed(() => {
   const { width, height } = Icons[props.name]
diff --git a/src/components/stories/TutorialMonitor.stories.ts b/src/components/stories/TutorialMonitor.stories.ts
index c4a2ddb16..4ff52233e 100644
--- a/src/components/stories/TutorialMonitor.stories.ts
+++ b/src/components/stories/TutorialMonitor.stories.ts
@@ -5,7 +5,6 @@ const meta: Meta<typeof TutorialMonitor> = {
   title: 'Components/TutorialMonitor',
   component: TutorialMonitor,
   tags: ['autodocs'],
-
   args: {
     title: 'Tutorial Monitor'
   }

From 95ea2e500f1fb8a7499e549275b8cd2eb8b5b561 Mon Sep 17 00:00:00 2001
From: Daniele Guido <gui.daniele@gmail.com>
Date: Tue, 18 Jun 2024 16:25:14 +0200
Subject: [PATCH 04/12] add offsetHeight to expand the parent component

---
 src/components/CollapsiblePanel.vue           | 154 ++++++++++++++++++
 src/components/TutorialMonitor.vue            | 125 +++++++-------
 src/components/TutorialTask.vue               |  20 +++
 .../stories/TutorialMonitor.stories.ts        |  25 ++-
 src/models/TutorialTask.js                    |  32 ++++
 5 files changed, 281 insertions(+), 75 deletions(-)
 create mode 100644 src/components/CollapsiblePanel.vue
 create mode 100644 src/components/TutorialTask.vue
 create mode 100644 src/models/TutorialTask.js

diff --git a/src/components/CollapsiblePanel.vue b/src/components/CollapsiblePanel.vue
new file mode 100644
index 000000000..efcd50c6b
--- /dev/null
+++ b/src/components/CollapsiblePanel.vue
@@ -0,0 +1,154 @@
+<template>
+  <div ref="rootRef" class="CollapsiblePanel" :class="className">
+    <div ref="headerRef" class="d-flex justify-content-between align-items-center">
+      <slot name="header">
+        <div class="p-3">
+          <h4 class="m-0">{{ title }}</h4>
+          <p v-if="subtitle.length" class="mb-0">subtitle</p>
+        </div>
+      </slot>
+      <button
+        class="btn btn-sm mx-2"
+        :class="{
+          active: !isCollapsed
+        }"
+        @click="toggleCollapseOnClick"
+      >
+        <Icon name="chevron" />
+      </button>
+    </div>
+    <div class="CollapsiblePanel__body position-absolute">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue'
+import Icon from './base/Icon.vue'
+
+const emit = defineEmits(['toggled'])
+
+const props = defineProps({
+  /** @type {string} */
+  title: {
+    type: String,
+    required: true
+  },
+  /** @type {string} */
+  subtitle: {
+    type: String,
+    default: ''
+  },
+  /** @type {boolean} */
+  isCollapsedOnMounted: {
+    type: Boolean,
+    default: true
+  },
+  /** @type {string} */
+  className: {
+    type: String,
+    default: ''
+  },
+  /** @type {number} */
+  offsetHeight: {
+    type: Number,
+    default: 0
+  }
+})
+
+const rootRef = ref<HTMLElement | null>(null)
+const headerRef = ref<HTMLElement | null>(null)
+const isPristine = ref(true)
+const isCollapsed = ref(true)
+// at the very beginning, we want the height of rootRef equals headerRef only
+// then, we want to animate the height of rootRef to the full height of the body
+onMounted(() => {
+  render()
+})
+
+const toggleCollapseOnClick = () => {
+  isPristine.value = false
+  isCollapsed.value = !isCollapsed.value
+  render(true)
+}
+
+export interface CollapsiblePanelData {
+  value: boolean
+  collapsedHeight: number
+  expandedHeight: number
+}
+
+// Watch prop value change and assign to value 'selected' Ref
+watch(
+  () => props.isCollapsedOnMounted,
+  (a) => {
+    console.log('isCollapsedOnMounted', a)
+    isPristine.value = true
+    render()
+  }
+)
+
+watch(
+  () => props.offsetHeight,
+  () => {
+    console.debug('[CollapsiblePanel] offsetHeight updated!')
+    render()
+  }
+)
+
+const render = (isEmittingEvent: boolean = false) => {
+  const root = rootRef.value
+  const header = headerRef.value
+  if (!root || !header) {
+    return
+  }
+  const collapsedHeight = `${header.offsetHeight}px`
+  const expandedHeight = `${root.scrollHeight + props.offsetHeight}px`
+
+  if (isPristine.value) {
+    if (props.isCollapsedOnMounted) {
+      root.style.height = collapsedHeight
+      isCollapsed.value = true
+    } else {
+      root.style.height = expandedHeight
+      isCollapsed.value = false
+    }
+  } else {
+    if (isCollapsed.value) {
+      root.style.height = collapsedHeight
+    } else {
+      root.style.height = expandedHeight
+    }
+  }
+  isEmittingEvent &&
+    emit('toggled', {
+      value: isCollapsed.value,
+      collapsedHeight: header.offsetHeight,
+      expandedHeight: root.scrollHeight + props.offsetHeight
+    })
+}
+</script>
+<style>
+.CollapsiblePanel {
+  position: relative;
+  overflow: hidden;
+  will-change: height;
+  transition: height 0.6s;
+  transition-timing-function: var(--impresso-transition-ease);
+}
+
+.CollapsiblePanel h3 {
+  font-family: var(--bs-font-sans-serif);
+}
+.CollapsiblePanel__body {
+  min-height: 100px;
+  width: 100%;
+}
+.CollapsiblePanel button {
+  transition: transform 0.3s;
+  transition-timing-function: var(--impresso-transition-ease);
+}
+.CollapsiblePanel button.active {
+  transform: rotate(180deg);
+}
+</style>
diff --git a/src/components/TutorialMonitor.vue b/src/components/TutorialMonitor.vue
index 0f3a609aa..6df1d662d 100644
--- a/src/components/TutorialMonitor.vue
+++ b/src/components/TutorialMonitor.vue
@@ -1,91 +1,76 @@
 <template>
-  <div ref="rootRef" class="TutorialMonitor">
-    <div ref="headerRef" class="d-flex justify-content-between align-items-center p-4">
-      <div>
-        <h3>Hello! {{ title }}</h3>
-        <p class="mb-0">subtitle</p>
+  <CollapsiblePanel
+    class="TutorialMonitor border border-dark"
+    :subtitle="subtitle"
+    :title="title"
+    :isCollapsedOnMounted="isCollapsed"
+    :offsetHeight="offsetHeight"
+  >
+    <template v-slot:header>
+      <div class="p-3">
+        <h3 class="mb-0">{{ title }}</h3>
+        <span class="text-muted">{{ subtitle }}</span>
       </div>
-      <button
-        class="btn btn-sm"
-        :class="{
-          active: !isCollapsed
-        }"
-        @click="toggleCollapse"
-      >
-        <Icon name="chevron" />
-      </button>
-    </div>
-    <div class="TutorialMonitor__body position-absolute">
-      ciccio pasticcio
-      <slot></slot>
-    </div>
-  </div>
+    </template>
+    <ol class="ps-0">
+      <li v-for="(task, idx) in tasks" class="border-bottom border-top m-2">
+        <TutorialTask
+          :task="task"
+          @toggled="(payload: CollapsiblePanelData) => onTutorialTaskToggled(idx, payload)"
+        ></TutorialTask>
+      </li>
+    </ol>
+  </CollapsiblePanel>
 </template>
 <script setup lang="ts">
-import { defineProps, ref, onMounted } from 'vue'
-import Icon from './base/Icon.vue'
+import { computed, ref } from 'vue'
+import CollapsiblePanel, { CollapsiblePanelData } from './CollapsiblePanel.vue'
+import TutorialTask from './TutorialTask.vue'
 
-const rootRef = ref<HTMLElement | null>(null)
-const headerRef = ref<HTMLElement | null>(null)
-const isCollapsed = ref(true)
-const props = defineProps({
+const offsetHeights = ref({})
+const offsetHeight = computed(() =>
+  Object.keys(offsetHeights.value).reduce((acc, k) => acc + offsetHeights[k], 0)
+)
+
+defineProps({
   /** @type {string} */
   title: {
     type: String,
     required: true
+  },
+  isCollapsed: {
+    type: Boolean,
+    default: true
+  },
+  /** @type {string} */
+  subtitle: {
+    type: String,
+    default: ''
+  },
+  /** @type {import('@/models').TutorialTask[]} */
+  tasks: {
+    type: Array,
+    required: true
   }
 })
 
-// at the very beginning, we want the height of rootRef equals headerRef only
-// then, we want to animate the height of rootRef to the full height of the body
-
-onMounted(() => {
-  const root = rootRef.value
-  const header = headerRef.value
-  if (root && header) {
-    root.style.height = `${header.offsetHeight}px`
-    // hidden
-    root.style.overflow = 'hidden'
-  }
-})
-
-const toggleCollapse = () => {
-  const root = rootRef.value
-  const header = headerRef.value
-  if (root && header) {
-    if (isCollapsed.value) {
-      root.style.height = `${root.scrollHeight}px`
-      isCollapsed.value = false
-    } else {
-      root.style.height = `${header.offsetHeight}px`
-      isCollapsed.value = true
-    }
-  }
+const onTutorialTaskToggled = (idx: number, payload: CollapsiblePanelData) => {
+  console.debug('[TutorialMonitor] idx', idx, '@onTutorialTaskToggled', payload)
+  offsetHeights[idx] = payload.value ? 0 : payload.expandedHeight
 }
 </script>
 <style>
-.TutorialMonitor {
+.TutorialMonitor.CollapsiblePanel {
   box-shadow: var(--bs-box-shadow-sm);
   border-radius: var(--border-radius-lg);
-  position: relative;
-  overflow: hidden;
-  will-change: height;
-  transition: height 0.6s;
-  transition-timing-function: var(--impresso-transition-ease);
-}
-
-.TutorialMonitor h3 {
-  font-family: var(--bs-font-sans-serif);
 }
-.TutorialMonitor__body {
-  height: 100px;
-  background: var(--clr-grey-500);
+.TutorialMonitor ol {
+  list-style-type: none;
+  padding-inline-start: 0;
 }
-.TutorialMonitor button {
-  transition: transform 0.6s;
-  transition-timing-function: var(--impresso-transition-ease);
-}
-.TutorialMonitor button.active {
-  transform: rotate(180deg);
+.TutorialMonitor li {
+  padding: 0;
+  box-shadow: var(--bs-box-shadow-sm);
+  border-radius: var(--border-radius-lg);
 }
 </style>
diff --git a/src/components/TutorialTask.vue b/src/components/TutorialTask.vue
new file mode 100644
index 000000000..cab8247c5
--- /dev/null
+++ b/src/components/TutorialTask.vue
@@ -0,0 +1,20 @@
+<template>
+  <CollapsiblePanel
+    class="TutorialTask"
+    :title="task.title"
+    @toggled="(payload: CollapsiblePanelData) => $emit('toggled', payload)"
+  >
+    <div v-html="task.description"></div>
+  </CollapsiblePanel>
+</template>
+<script setup lang="ts">
+import CollapsiblePanel, { CollapsiblePanelData } from './CollapsiblePanel.vue'
+defineEmits(['toggled'])
+defineProps({
+  /** @type {import('@/models').TutorialTask} */
+  task: {
+    type: Object,
+    required: true
+  }
+})
+</script>
diff --git a/src/components/stories/TutorialMonitor.stories.ts b/src/components/stories/TutorialMonitor.stories.ts
index 4ff52233e..0fdf1564d 100644
--- a/src/components/stories/TutorialMonitor.stories.ts
+++ b/src/components/stories/TutorialMonitor.stories.ts
@@ -4,10 +4,7 @@ import TutorialMonitor from '@/components/TutorialMonitor.vue'
 const meta: Meta<typeof TutorialMonitor> = {
   title: 'Components/TutorialMonitor',
   component: TutorialMonitor,
-  tags: ['autodocs'],
-  args: {
-    title: 'Tutorial Monitor'
-  }
+  tags: ['autodocs']
 }
 
 export default meta
@@ -16,6 +13,24 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   args: {
-    title: 'Tutorial Monitor'
+    title: 'Tutorial Monitor Story',
+    isCollapsed: false,
+    tasks: [
+      {
+        id: 'task-1',
+        title: 'Task 1',
+        description: 'Description for task 1'
+      },
+      {
+        id: 'task-2',
+        title: 'Task 2',
+        description: 'Description for task 2'
+      },
+      {
+        id: 'task-3',
+        title: 'Task 3',
+        description: 'Description for task 3'
+      }
+    ]
   }
 }
diff --git a/src/models/TutorialTask.js b/src/models/TutorialTask.js
new file mode 100644
index 000000000..5524a60b8
--- /dev/null
+++ b/src/models/TutorialTask.js
@@ -0,0 +1,32 @@
+
+export default class TutorialTask {
+  constructor({
+    id = '',
+    title = '',
+    description = '',
+    status = '',
+    creationDate = null,
+    completionDate = null
+    coverUrl = '',
+    videoUrl = '',
+  } = {}) {
+    this.id = String(id);
+    this.title = String(title);
+    this.description = String(description);
+    this.status = String(status);
+    this.coverUrl = String(coverUrl);
+    this.videoUrl = String(videoUrl);
+
+    if (creationDate instanceof Date) {
+      this.creationDate = creationDate;
+    } else if(creationDate) {
+      this.creationDate = new Date(creationDate);
+    }
+
+    if (completionDate instanceof Date) {
+      this.completionDate = completionDate;
+    } else if(completionDate) {
+      this.completionDate = new Date(completionDate);
+    }
+  }
+}
\ No newline at end of file

From 449b71d9ede8d0777e326465dc6571916e21e36b Mon Sep 17 00:00:00 2001
From: Daniele Guido <gui.daniele@gmail.com>
Date: Wed, 19 Jun 2024 10:02:53 +0200
Subject: [PATCH 05/12] update style

---
 src/components/CollapsiblePanel.vue | 15 +++++++++++---
 src/components/TutorialMonitor.vue  | 27 +++++++++++++++++++------
 src/components/TutorialTask.vue     | 28 ++++++++++++++++++++++++++
 src/components/base/Icon.vue        |  2 +-
 src/styles/style.css                | 31 +++++++++++++++++++++++++++++
 5 files changed, 93 insertions(+), 10 deletions(-)

diff --git a/src/components/CollapsiblePanel.vue b/src/components/CollapsiblePanel.vue
index efcd50c6b..5e0a6dae1 100644
--- a/src/components/CollapsiblePanel.vue
+++ b/src/components/CollapsiblePanel.vue
@@ -1,6 +1,10 @@
 <template>
   <div ref="rootRef" class="CollapsiblePanel" :class="className">
-    <div ref="headerRef" class="d-flex justify-content-between align-items-center">
+    <div
+      ref="headerRef"
+      class="CollapsiblePanel__header d-flex justify-content-between align-items-center"
+      @click="toggleCollapseOnClick"
+    >
       <slot name="header">
         <div class="p-3">
           <h4 class="m-0">{{ title }}</h4>
@@ -8,11 +12,10 @@
         </div>
       </slot>
       <button
-        class="btn btn-sm mx-2"
+        class="btn btn-sm btn-icon mx-2"
         :class="{
           active: !isCollapsed
         }"
-        @click="toggleCollapseOnClick"
       >
         <Icon name="chevron" />
       </button>
@@ -103,6 +106,7 @@ const render = (isEmittingEvent: boolean = false) => {
     return
   }
   const collapsedHeight = `${header.offsetHeight}px`
+
   const expandedHeight = `${root.scrollHeight + props.offsetHeight}px`
 
   if (isPristine.value) {
@@ -136,6 +140,11 @@ const render = (isEmittingEvent: boolean = false) => {
   transition: height 0.6s;
   transition-timing-function: var(--impresso-transition-ease);
 }
+.CollapsiblePanel__header {
+  cursor: pointer;
+  user-select: none;
+  box-sizing: border-box;
+}
 
 .CollapsiblePanel h3 {
   font-family: var(--bs-font-sans-serif);
diff --git a/src/components/TutorialMonitor.vue b/src/components/TutorialMonitor.vue
index 6df1d662d..700523514 100644
--- a/src/components/TutorialMonitor.vue
+++ b/src/components/TutorialMonitor.vue
@@ -12,10 +12,11 @@
         <span class="text-muted">{{ subtitle }}</span>
       </div>
     </template>
-    <ol class="ps-0">
-      <li v-for="(task, idx) in tasks" class="border-bottom border-top m-2">
+    <ol>
+      <li v-for="(task, idx) in tasks">
         <TutorialTask
           :task="task"
+          :taskNum="idx + 1"
           @toggled="(payload: CollapsiblePanelData) => onTutorialTaskToggled(idx, payload)"
         ></TutorialTask>
       </li>
@@ -56,7 +57,7 @@ defineProps({
 
 const onTutorialTaskToggled = (idx: number, payload: CollapsiblePanelData) => {
   console.debug('[TutorialMonitor] idx', idx, '@onTutorialTaskToggled', payload)
-  offsetHeights[idx] = payload.value ? 0 : payload.expandedHeight
+  offsetHeights[idx] = payload.value ? 50 : payload.expandedHeight
 }
 </script>
 <style>
@@ -67,10 +68,24 @@ const onTutorialTaskToggled = (idx: number, payload: CollapsiblePanelData) => {
 .TutorialMonitor ol {
   list-style-type: none;
   padding-inline-start: 0;
+  padding-inline-end: 0;
+  margin-inline-start: var(--spacing-2);
+  margin-inline-end: var(--spacing-2);
+
+  margin-bottom: var(--spacing-1);
 }
 .TutorialMonitor li {
-  padding: 0;
-  box-shadow: var(--bs-box-shadow-sm);
-  border-radius: var(--border-radius-lg);
+  border-top: 1px solid var(--clr-grey-200);
+}
+.TutorialMonitor li:first-of-type {
+  border-top-width: 0px;
+}
+.TutorialMonitor h3 {
+  font-size: var(--impresso-font-size-smallcaps);
+  font-family: var(--bs-font-sans-serif);
+  text-transform: uppercase;
+  letter-spacing: var(--impresso-letter-spacing-smallcaps);
+  font-weight: var(--impresso-wght-smallcaps);
+  font-variation-settings: 'wght' var(--impresso-wght-smallcaps);
 }
 </style>
diff --git a/src/components/TutorialTask.vue b/src/components/TutorialTask.vue
index cab8247c5..4ac3a5ba9 100644
--- a/src/components/TutorialTask.vue
+++ b/src/components/TutorialTask.vue
@@ -4,6 +4,12 @@
     :title="task.title"
     @toggled="(payload: CollapsiblePanelData) => $emit('toggled', payload)"
   >
+    <template v-slot:header>
+      <div class="d-flex align-items-center">
+        <div class="TutorialTask__num py-3 px-2 mb-0">task {{ taskNum }}</div>
+        <h4 class="mb-0">{{ task.title }}</h4>
+      </div>
+    </template>
     <div v-html="task.description"></div>
   </CollapsiblePanel>
 </template>
@@ -15,6 +21,28 @@ defineProps({
   task: {
     type: Object,
     required: true
+  },
+  taskNum: {
+    type: Number,
+    required: true
   }
 })
 </script>
+<style>
+.TutorialTask h4 {
+  font-family: var(--bs-font-sans-serif);
+  font-size: inherit;
+}
+.TutorialTask__num {
+  font-size: var(--impresso-font-size-smallcaps);
+  font-family: var(--bs-font-sans-serif);
+  text-transform: uppercase;
+  letter-spacing: var(--impresso-letter-spacing-smallcaps);
+  font-weight: var(--impresso-wght-smallcaps);
+  font-variation-settings: 'wght' var(--impresso-wght-smallcaps);
+}
+.TutorialTask.CollapsiblePanel {
+  box-shadow: none;
+  border-radius: 0;
+}
+</style>
diff --git a/src/components/base/Icon.vue b/src/components/base/Icon.vue
index 3eeb350d2..4e3c7e11d 100644
--- a/src/components/base/Icon.vue
+++ b/src/components/base/Icon.vue
@@ -93,7 +93,7 @@ const Icons: Record<string, IconData> = {
     height: 24,
     paths: [
       {
-        style: 'fill:white; stroke:black; stroke-width:1px;',
+        style: 'fill:transparent; stroke:black; stroke-width:1px;',
 
         d: 'M6 9L12 15L18 9'
       }
diff --git a/src/styles/style.css b/src/styles/style.css
index 5ab64c23f..fd290e26b 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -43,6 +43,7 @@
   --impresso-border-radius-xl: 30px;
   --impresso-font-size-smallcaps: 0.72em;
   --impresso-letter-spacing-smallcaps: 0.08em;
+  --impresso-letter-spacing-smallcaps-md: 0.12em;
   --impresso-font-size-smaller: 0.85em;
   --impresso-wght: 450;
   --impresso-wght-bold: 700;
@@ -98,11 +99,14 @@
   --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.125);
   --bs-box-shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
   --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
+  --bs-box-shadow-focus: 0 0 0 0.2rem #ffeb78;
   --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
 
   --bs-font-size-base: 1rem;
   --impresso-font-size-3: 1.75rem;
   --impresso-font-size-4: 1.5rem;
+
+  --impresso-transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 body {
@@ -111,3 +115,30 @@ body {
   font-variation-settings: 'wght' 450;
   text-rendering: optimizeLegibility;
 }
+
+/* impresso-specific pseudo-bootstrap implementation */
+.btn-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: var(--spacing-2);
+  padding: var(--spacing-1);
+  border-radius: 50%;
+  border: 1px solid transparent;
+  transition: background-color 0.5s var(--impresso-transition-ease);
+}
+.btn-icon > path {
+  fill: transparent;
+}
+.btn-icon:hover,
+.btn-icon.active {
+  background-color: var(--impresso-yellow);
+  border-color: var(--impresso-yellow);
+}
+.btn-icon:hover,
+.btn-icon:focus {
+  box-shadow: var(--bs-box-shadow-focus);
+}
+.btn-icon.active:focus {
+  box-shadow: none;
+}

From 8380a292f38d7460a5ad9392fb085f31aa1e6d44 Mon Sep 17 00:00:00 2001
From: Roman Kalyakin <roman@kalyakin.com>
Date: Wed, 19 Jun 2024 15:19:41 +0200
Subject: [PATCH 06/12] optimised collapsible panels

---
 src/components/CollapsiblePanel.vue           | 132 ++++++------------
 src/components/TutorialMonitor.vue            |  64 +++++----
 ...TutorialTask.vue => TutorialTaskPanel.vue} |  37 +++--
 src/models/TutorialTask.js                    |  32 -----
 src/models/TutorialTask.ts                    |  51 +++++++
 5 files changed, 158 insertions(+), 158 deletions(-)
 rename src/components/{TutorialTask.vue => TutorialTaskPanel.vue} (59%)
 delete mode 100644 src/models/TutorialTask.js
 create mode 100644 src/models/TutorialTask.ts

diff --git a/src/components/CollapsiblePanel.vue b/src/components/CollapsiblePanel.vue
index 5e0a6dae1..b34cd350c 100644
--- a/src/components/CollapsiblePanel.vue
+++ b/src/components/CollapsiblePanel.vue
@@ -1,22 +1,16 @@
 <template>
-  <div ref="rootRef" class="CollapsiblePanel" :class="className">
-    <div
-      ref="headerRef"
-      class="CollapsiblePanel__header d-flex justify-content-between align-items-center"
-      @click="toggleCollapseOnClick"
-    >
+  <div ref="rootRef" class="CollapsiblePanel" :class="className" :style="rootStyles">
+    <div ref="headerRef" class="CollapsiblePanel__header d-flex justify-content-between align-items-center"
+      @click="togglePanelState">
       <slot name="header">
         <div class="p-3">
           <h4 class="m-0">{{ title }}</h4>
           <p v-if="subtitle.length" class="mb-0">subtitle</p>
         </div>
       </slot>
-      <button
-        class="btn btn-sm btn-icon mx-2"
-        :class="{
-          active: !isCollapsed
-        }"
-      >
+      <button class="btn btn-sm btn-icon mx-2" :class="{
+        active: modelValue
+      }">
         <Icon name="chevron" />
       </button>
     </div>
@@ -26,112 +20,66 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue'
+/**
+ * Model value is used to control the visibility of the panel.
+ */
+
+import { ref, computed, watch } from 'vue'
 import Icon from './base/Icon.vue'
 
-const emit = defineEmits(['toggled'])
+const emit = defineEmits(['update:modelValue', 'heightChanged'])
 
 const props = defineProps({
-  /** @type {string} */
+  modelValue: {
+    type: Boolean,
+    default: false,
+    required: true
+  },
   title: {
     type: String,
     required: true
   },
-  /** @type {string} */
   subtitle: {
     type: String,
     default: ''
   },
-  /** @type {boolean} */
-  isCollapsedOnMounted: {
-    type: Boolean,
-    default: true
-  },
-  /** @type {string} */
   className: {
     type: String,
     default: ''
   },
-  /** @type {number} */
-  offsetHeight: {
-    type: Number,
-    default: 0
-  }
 })
 
 const rootRef = ref<HTMLElement | null>(null)
 const headerRef = ref<HTMLElement | null>(null)
-const isPristine = ref(true)
-const isCollapsed = ref(true)
-// at the very beginning, we want the height of rootRef equals headerRef only
-// then, we want to animate the height of rootRef to the full height of the body
-onMounted(() => {
-  render()
-})
 
-const toggleCollapseOnClick = () => {
-  isPristine.value = false
-  isCollapsed.value = !isCollapsed.value
-  render(true)
+const togglePanelState = () => {
+  emit('update:modelValue', !props.modelValue)
 }
 
-export interface CollapsiblePanelData {
-  value: boolean
-  collapsedHeight: number
-  expandedHeight: number
-}
+const collapsedHeight = computed(() => {
+  const header = headerRef.value
+  return header ? `${header.offsetHeight}px` : 'auto'
+})
 
-// Watch prop value change and assign to value 'selected' Ref
-watch(
-  () => props.isCollapsedOnMounted,
-  (a) => {
-    console.log('isCollapsedOnMounted', a)
-    isPristine.value = true
-    render()
-  }
-)
+const expandedHeight = computed(() => {
+  const root = rootRef.value
+  const parsedOffset = parseInt(collapsedHeight.value)
+  const offset = isNaN(parsedOffset) ? 0 : parsedOffset
+  return root ? `${root.scrollHeight + offset}px` : 'auto'
+})
 
-watch(
-  () => props.offsetHeight,
-  () => {
-    console.debug('[CollapsiblePanel] offsetHeight updated!')
-    render()
+const rootStyles = computed(() => {
+  return {
+    height: props.modelValue ? expandedHeight.value : collapsedHeight.value
   }
-)
+})
+
+watch(() => rootStyles.value.height, height => {
+  emit('heightChanged', height)
+}, { immediate: true })
 
-const render = (isEmittingEvent: boolean = false) => {
-  const root = rootRef.value
-  const header = headerRef.value
-  if (!root || !header) {
-    return
-  }
-  const collapsedHeight = `${header.offsetHeight}px`
-
-  const expandedHeight = `${root.scrollHeight + props.offsetHeight}px`
-
-  if (isPristine.value) {
-    if (props.isCollapsedOnMounted) {
-      root.style.height = collapsedHeight
-      isCollapsed.value = true
-    } else {
-      root.style.height = expandedHeight
-      isCollapsed.value = false
-    }
-  } else {
-    if (isCollapsed.value) {
-      root.style.height = collapsedHeight
-    } else {
-      root.style.height = expandedHeight
-    }
-  }
-  isEmittingEvent &&
-    emit('toggled', {
-      value: isCollapsed.value,
-      collapsedHeight: header.offsetHeight,
-      expandedHeight: root.scrollHeight + props.offsetHeight
-    })
-}
 </script>
+
 <style>
 .CollapsiblePanel {
   position: relative;
@@ -140,6 +88,7 @@ const render = (isEmittingEvent: boolean = false) => {
   transition: height 0.6s;
   transition-timing-function: var(--impresso-transition-ease);
 }
+
 .CollapsiblePanel__header {
   cursor: pointer;
   user-select: none;
@@ -149,14 +98,17 @@ const render = (isEmittingEvent: boolean = false) => {
 .CollapsiblePanel h3 {
   font-family: var(--bs-font-sans-serif);
 }
+
 .CollapsiblePanel__body {
   min-height: 100px;
   width: 100%;
 }
+
 .CollapsiblePanel button {
   transition: transform 0.3s;
   transition-timing-function: var(--impresso-transition-ease);
 }
+
 .CollapsiblePanel button.active {
   transform: rotate(180deg);
 }
diff --git a/src/components/TutorialMonitor.vue b/src/components/TutorialMonitor.vue
index 700523514..f9bd8a318 100644
--- a/src/components/TutorialMonitor.vue
+++ b/src/components/TutorialMonitor.vue
@@ -1,11 +1,6 @@
 <template>
-  <CollapsiblePanel
-    class="TutorialMonitor border border-dark"
-    :subtitle="subtitle"
-    :title="title"
-    :isCollapsedOnMounted="isCollapsed"
-    :offsetHeight="offsetHeight"
-  >
+  <CollapsiblePanel class="TutorialMonitor border border-dark" v-model="isOpen" :subtitle="subtitle" :title="title"
+    :style="{ height: `${offsetHeight}px` }">
     <template v-slot:header>
       <div class="p-3">
         <h3 class="mb-0">{{ title }}</h3>
@@ -13,28 +8,30 @@
       </div>
     </template>
     <ol>
-      <li v-for="(task, idx) in tasks">
-        <TutorialTask
-          :task="task"
-          :taskNum="idx + 1"
-          @toggled="(payload: CollapsiblePanelData) => onTutorialTaskToggled(idx, payload)"
-        ></TutorialTask>
+      <li v-for="(task, idx) in tasks" :key="task.id">
+        <TutorialTaskPanel :modelValue="currentOpenTaskId === task.id" :task="task" :taskNum="idx + 1"
+          @update:modelValue="(value: boolean) => currentOpenTaskId = value ? task.id : null"
+          @heightChanged="e => updateHeight(task.id, e)">
+        </TutorialTaskPanel>
       </li>
     </ol>
   </CollapsiblePanel>
 </template>
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import CollapsiblePanel, { CollapsiblePanelData } from './CollapsiblePanel.vue'
-import TutorialTask from './TutorialTask.vue'
+import TutorialTaskPanel from '@/components/TutorialTaskPanel.vue';
+import { ITutorialTask } from '@/models/TutorialTask';
+import { computed, PropType, ref, watch } from 'vue';
+import CollapsiblePanel from './CollapsiblePanel.vue';
 
-const offsetHeights = ref({})
+// TODO: Get from the element?
+const headerHeight = 50
+
+const offsetHeights = ref<Record<string, number>>({})
 const offsetHeight = computed(() =>
-  Object.keys(offsetHeights.value).reduce((acc, k) => acc + offsetHeights[k], 0)
+  headerHeight + Object.values(offsetHeights.value).reduce((a, b) => a + b, 0)
 )
 
-defineProps({
-  /** @type {string} */
+const props = defineProps({
   title: {
     type: String,
     required: true
@@ -43,28 +40,40 @@ defineProps({
     type: Boolean,
     default: true
   },
-  /** @type {string} */
   subtitle: {
     type: String,
     default: ''
   },
-  /** @type {import('@/models').TutorialTask[]} */
   tasks: {
-    type: Array,
+    type: Array as PropType<ITutorialTask[]>,
     required: true
   }
 })
 
-const onTutorialTaskToggled = (idx: number, payload: CollapsiblePanelData) => {
-  console.debug('[TutorialMonitor] idx', idx, '@onTutorialTaskToggled', payload)
-  offsetHeights[idx] = payload.value ? 50 : payload.expandedHeight
+const isOpen = ref(!props.isCollapsed)
+const currentOpenTaskId = ref<string | null>(null)
+
+watch(() => props.isCollapsed, isCollapsed => {
+  isOpen.value = !isCollapsed
+})
+
+const updateHeight = (id: string, height: string) => {
+  const heightAsNumber = parseInt(height.replace('px', ''))
+  offsetHeights.value[id] = isNaN(heightAsNumber) ? 0 : heightAsNumber
 }
+
+// const onTutorialTaskToggled = (idx: number, payload: CollapsiblePanelData) => {
+//   console.debug('[TutorialMonitor] idx', idx, '@onTutorialTaskToggled', payload)
+//   offsetHeights[idx] = payload.value ? 50 : payload.expandedHeight
+// }
 </script>
+
 <style>
 .TutorialMonitor.CollapsiblePanel {
   box-shadow: var(--bs-box-shadow-sm);
   border-radius: var(--border-radius-lg);
 }
+
 .TutorialMonitor ol {
   list-style-type: none;
   padding-inline-start: 0;
@@ -74,12 +83,15 @@ const onTutorialTaskToggled = (idx: number, payload: CollapsiblePanelData) => {
 
   margin-bottom: var(--spacing-1);
 }
+
 .TutorialMonitor li {
   border-top: 1px solid var(--clr-grey-200);
 }
+
 .TutorialMonitor li:first-of-type {
   border-top-width: 0px;
 }
+
 .TutorialMonitor h3 {
   font-size: var(--impresso-font-size-smallcaps);
   font-family: var(--bs-font-sans-serif);
diff --git a/src/components/TutorialTask.vue b/src/components/TutorialTaskPanel.vue
similarity index 59%
rename from src/components/TutorialTask.vue
rename to src/components/TutorialTaskPanel.vue
index 4ac3a5ba9..49404dc7a 100644
--- a/src/components/TutorialTask.vue
+++ b/src/components/TutorialTaskPanel.vue
@@ -1,9 +1,6 @@
 <template>
-  <CollapsiblePanel
-    class="TutorialTask"
-    :title="task.title"
-    @toggled="(payload: CollapsiblePanelData) => $emit('toggled', payload)"
-  >
+  <CollapsiblePanel class="TutorialTask" v-model="state" :title="task.title"
+    @heightChanged="e => emit('heightChanged', e)">
     <template v-slot:header>
       <div class="d-flex align-items-center">
         <div class="TutorialTask__num py-3 px-2 mb-0">task {{ taskNum }}</div>
@@ -13,13 +10,22 @@
     <div v-html="task.description"></div>
   </CollapsiblePanel>
 </template>
+
 <script setup lang="ts">
-import CollapsiblePanel, { CollapsiblePanelData } from './CollapsiblePanel.vue'
-defineEmits(['toggled'])
-defineProps({
-  /** @type {import('@/models').TutorialTask} */
+import { computed, PropType } from 'vue';
+import CollapsiblePanel from './CollapsiblePanel.vue'
+import { ITutorialTask } from '@/models/TutorialTask'
+
+const emit = defineEmits(['update:modelValue', 'heightChanged'])
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+    required: true
+  },
   task: {
-    type: Object,
+    type: Object as PropType<ITutorialTask>,
     required: true
   },
   taskNum: {
@@ -27,12 +33,22 @@ defineProps({
     required: true
   }
 })
+
+const state = computed({
+  set(value: boolean) {
+    emit('update:modelValue', value)
+  },
+  get() {
+    return props.modelValue
+  }
+})
 </script>
 <style>
 .TutorialTask h4 {
   font-family: var(--bs-font-sans-serif);
   font-size: inherit;
 }
+
 .TutorialTask__num {
   font-size: var(--impresso-font-size-smallcaps);
   font-family: var(--bs-font-sans-serif);
@@ -41,6 +57,7 @@ defineProps({
   font-weight: var(--impresso-wght-smallcaps);
   font-variation-settings: 'wght' var(--impresso-wght-smallcaps);
 }
+
 .TutorialTask.CollapsiblePanel {
   box-shadow: none;
   border-radius: 0;
diff --git a/src/models/TutorialTask.js b/src/models/TutorialTask.js
deleted file mode 100644
index 5524a60b8..000000000
--- a/src/models/TutorialTask.js
+++ /dev/null
@@ -1,32 +0,0 @@
-
-export default class TutorialTask {
-  constructor({
-    id = '',
-    title = '',
-    description = '',
-    status = '',
-    creationDate = null,
-    completionDate = null
-    coverUrl = '',
-    videoUrl = '',
-  } = {}) {
-    this.id = String(id);
-    this.title = String(title);
-    this.description = String(description);
-    this.status = String(status);
-    this.coverUrl = String(coverUrl);
-    this.videoUrl = String(videoUrl);
-
-    if (creationDate instanceof Date) {
-      this.creationDate = creationDate;
-    } else if(creationDate) {
-      this.creationDate = new Date(creationDate);
-    }
-
-    if (completionDate instanceof Date) {
-      this.completionDate = completionDate;
-    } else if(completionDate) {
-      this.completionDate = new Date(completionDate);
-    }
-  }
-}
\ No newline at end of file
diff --git a/src/models/TutorialTask.ts b/src/models/TutorialTask.ts
new file mode 100644
index 000000000..1fa1b62a5
--- /dev/null
+++ b/src/models/TutorialTask.ts
@@ -0,0 +1,51 @@
+export interface ITutorialTask {
+  id: string
+  title: string
+  description: string
+  status: string
+  coverUrl: string
+  videoUrl: string
+  creationDate: Date
+  completionDate: Date
+}
+
+export class TutorialTaskModel implements ITutorialTask {
+  id: string
+  title: string
+  description: string
+  status: string
+  coverUrl: string
+  videoUrl: string
+  creationDate: Date
+  completionDate: Date
+
+  constructor({
+    id = '',
+    title = '',
+    description = '',
+    status = '',
+    creationDate = null,
+    completionDate = null,
+    coverUrl = '',
+    videoUrl = ''
+  } = {}) {
+    this.id = String(id)
+    this.title = String(title)
+    this.description = String(description)
+    this.status = String(status)
+    this.coverUrl = String(coverUrl)
+    this.videoUrl = String(videoUrl)
+
+    if (creationDate instanceof Date) {
+      this.creationDate = creationDate
+    } else if (creationDate) {
+      this.creationDate = new Date(creationDate)
+    }
+
+    if (completionDate instanceof Date) {
+      this.completionDate = completionDate
+    } else if (completionDate) {
+      this.completionDate = new Date(completionDate)
+    }
+  }
+}

From 3f0adf936c907aba41f11e28e33d9ff01bd148f5 Mon Sep 17 00:00:00 2001
From: Daniele Guido <gui.daniele@gmail.com>
Date: Wed, 19 Jun 2024 16:25:24 +0200
Subject: [PATCH 07/12] add optional fields in ITutorialTask interface

---
 src/models/TutorialTask.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/models/TutorialTask.ts b/src/models/TutorialTask.ts
index 1fa1b62a5..2e8d26063 100644
--- a/src/models/TutorialTask.ts
+++ b/src/models/TutorialTask.ts
@@ -2,11 +2,11 @@ export interface ITutorialTask {
   id: string
   title: string
   description: string
-  status: string
-  coverUrl: string
-  videoUrl: string
-  creationDate: Date
-  completionDate: Date
+  status?: string
+  coverUrl?: string
+  videoUrl?: string
+  creationDate?: Date
+  completionDate?: Date
 }
 
 export class TutorialTaskModel implements ITutorialTask {
@@ -24,7 +24,7 @@ export class TutorialTaskModel implements ITutorialTask {
     title = '',
     description = '',
     status = '',
-    creationDate = null,
+    creationDate = new Date(),
     completionDate = null,
     coverUrl = '',
     videoUrl = ''

From 9c427132e29451b820b053a37ebd1e4fe1b78ddc Mon Sep 17 00:00:00 2001
From: Daniele Guido <gui.daniele@gmail.com>
Date: Wed, 19 Jun 2024 16:25:42 +0200
Subject: [PATCH 08/12] Update TutorialTaskPanel.vue

---
 src/components/TutorialTaskPanel.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/TutorialTaskPanel.vue b/src/components/TutorialTaskPanel.vue
index 49404dc7a..4bf8420e2 100644
--- a/src/components/TutorialTaskPanel.vue
+++ b/src/components/TutorialTaskPanel.vue
@@ -1,18 +1,23 @@
 <template>
-  <CollapsiblePanel class="TutorialTask" v-model="state" :title="task.title"
-    @heightChanged="e => emit('heightChanged', e)">
+  <CollapsiblePanel
+    class="TutorialTask"
+    v-model="state"
+    :title="task.title"
+    @heightChanged="(e) => emit('heightChanged', e)"
+  >
     <template v-slot:header>
       <div class="d-flex align-items-center">
         <div class="TutorialTask__num py-3 px-2 mb-0">task {{ taskNum }}</div>
         <h4 class="mb-0">{{ task.title }}</h4>
       </div>
     </template>
+    <img v-if="task.coverUrl" :src="task.coverUrl" alt="task screencast video" class="img-fluid" />
     <div v-html="task.description"></div>
   </CollapsiblePanel>
 </template>
 
 <script setup lang="ts">
-import { computed, PropType } from 'vue';
+import { computed, PropType } from 'vue'
 import CollapsiblePanel from './CollapsiblePanel.vue'
 import { ITutorialTask } from '@/models/TutorialTask'
 

From 9c5528e169e1a54d94308e388d884158da1264b0 Mon Sep 17 00:00:00 2001
From: Daniele Guido <gui.daniele@gmail.com>
Date: Wed, 19 Jun 2024 16:26:14 +0200
Subject: [PATCH 09/12] Update TutorialMonitor.vue

---
 src/components/TutorialMonitor.vue | 40 +++++++++++++++++++-----------
 1 file changed, 26 insertions(+), 14 deletions(-)

diff --git a/src/components/TutorialMonitor.vue b/src/components/TutorialMonitor.vue
index f9bd8a318..3bb46ac5f 100644
--- a/src/components/TutorialMonitor.vue
+++ b/src/components/TutorialMonitor.vue
@@ -1,6 +1,11 @@
 <template>
-  <CollapsiblePanel class="TutorialMonitor border border-dark" v-model="isOpen" :subtitle="subtitle" :title="title"
-    :style="{ height: `${offsetHeight}px` }">
+  <CollapsiblePanel
+    class="TutorialMonitor border border-dark"
+    v-model="isOpen"
+    :subtitle="subtitle"
+    :title="title"
+    :style="{ height: isOpen ? `${offsetHeight}px` : `${headerHeight}px` }"
+  >
     <template v-slot:header>
       <div class="p-3">
         <h3 class="mb-0">{{ title }}</h3>
@@ -9,26 +14,30 @@
     </template>
     <ol>
       <li v-for="(task, idx) in tasks" :key="task.id">
-        <TutorialTaskPanel :modelValue="currentOpenTaskId === task.id" :task="task" :taskNum="idx + 1"
-          @update:modelValue="(value: boolean) => currentOpenTaskId = value ? task.id : null"
-          @heightChanged="e => updateHeight(task.id, e)">
+        <TutorialTaskPanel
+          :modelValue="currentOpenTaskId === task.id"
+          :task="task"
+          :taskNum="idx + 1"
+          @update:modelValue="(value: boolean) => (currentOpenTaskId = value ? task.id : null)"
+          @heightChanged="(e) => updateHeight(task.id, e)"
+        >
         </TutorialTaskPanel>
       </li>
     </ol>
   </CollapsiblePanel>
 </template>
 <script setup lang="ts">
-import TutorialTaskPanel from '@/components/TutorialTaskPanel.vue';
-import { ITutorialTask } from '@/models/TutorialTask';
-import { computed, PropType, ref, watch } from 'vue';
-import CollapsiblePanel from './CollapsiblePanel.vue';
+import TutorialTaskPanel from '@/components/TutorialTaskPanel.vue'
+import { ITutorialTask } from '@/models/TutorialTask'
+import { computed, PropType, ref, watch } from 'vue'
+import CollapsiblePanel from './CollapsiblePanel.vue'
 
 // TODO: Get from the element?
 const headerHeight = 50
 
 const offsetHeights = ref<Record<string, number>>({})
-const offsetHeight = computed(() =>
-  headerHeight + Object.values(offsetHeights.value).reduce((a, b) => a + b, 0)
+const offsetHeight = computed(
+  () => headerHeight + Object.values(offsetHeights.value).reduce((a, b) => a + b, 0)
 )
 
 const props = defineProps({
@@ -53,9 +62,12 @@ const props = defineProps({
 const isOpen = ref(!props.isCollapsed)
 const currentOpenTaskId = ref<string | null>(null)
 
-watch(() => props.isCollapsed, isCollapsed => {
-  isOpen.value = !isCollapsed
-})
+watch(
+  () => props.isCollapsed,
+  (isCollapsed) => {
+    isOpen.value = !isCollapsed
+  }
+)
 
 const updateHeight = (id: string, height: string) => {
   const heightAsNumber = parseInt(height.replace('px', ''))

From 74c7d7683af2712f8f8d0ade84a169cb1f4e2a23 Mon Sep 17 00:00:00 2001
From: Daniele Guido <gui.daniele@gmail.com>
Date: Wed, 19 Jun 2024 16:26:21 +0200
Subject: [PATCH 10/12] add image

---
 src/components/stories/TutorialMonitor.stories.ts | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/stories/TutorialMonitor.stories.ts b/src/components/stories/TutorialMonitor.stories.ts
index 0fdf1564d..42a5f9694 100644
--- a/src/components/stories/TutorialMonitor.stories.ts
+++ b/src/components/stories/TutorialMonitor.stories.ts
@@ -19,17 +19,21 @@ export const Default: Story = {
       {
         id: 'task-1',
         title: 'Task 1',
-        description: 'Description for task 1'
+        description: 'Description for task 1',
+        status: 'completed',
+        coverUrl: 'https://via.placeholder.com/150'
       },
       {
         id: 'task-2',
         title: 'Task 2',
-        description: 'Description for task 2'
+        description: 'Description for task 2',
+        status: 'in-progress'
       },
       {
         id: 'task-3',
         title: 'Task 3',
-        description: 'Description for task 3'
+        description: 'Description for task 3',
+        status: 'pending'
       }
     ]
   }

From 75bdc8b6280d00daa3e7555cd20205b0a001bb9e Mon Sep 17 00:00:00 2001
From: Daniele Guido <gui.daniele@gmail.com>
Date: Wed, 19 Jun 2024 16:26:25 +0200
Subject: [PATCH 11/12] Update CollapsiblePanel.vue

---
 src/components/CollapsiblePanel.vue | 31 +++++++++++++++++++----------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/components/CollapsiblePanel.vue b/src/components/CollapsiblePanel.vue
index b34cd350c..876c0514b 100644
--- a/src/components/CollapsiblePanel.vue
+++ b/src/components/CollapsiblePanel.vue
@@ -1,16 +1,22 @@
 <template>
   <div ref="rootRef" class="CollapsiblePanel" :class="className" :style="rootStyles">
-    <div ref="headerRef" class="CollapsiblePanel__header d-flex justify-content-between align-items-center"
-      @click="togglePanelState">
+    <div
+      ref="headerRef"
+      class="CollapsiblePanel__header d-flex justify-content-between align-items-center"
+      @click="togglePanelState"
+    >
       <slot name="header">
         <div class="p-3">
           <h4 class="m-0">{{ title }}</h4>
           <p v-if="subtitle.length" class="mb-0">subtitle</p>
         </div>
       </slot>
-      <button class="btn btn-sm btn-icon mx-2" :class="{
-        active: modelValue
-      }">
+      <button
+        class="btn btn-sm btn-icon mx-2"
+        :class="{
+          active: modelValue
+        }"
+      >
         <Icon name="chevron" />
       </button>
     </div>
@@ -46,7 +52,7 @@ const props = defineProps({
   className: {
     type: String,
     default: ''
-  },
+  }
 })
 
 const rootRef = ref<HTMLElement | null>(null)
@@ -74,10 +80,13 @@ const rootStyles = computed(() => {
   }
 })
 
-watch(() => rootStyles.value.height, height => {
-  emit('heightChanged', height)
-}, { immediate: true })
-
+watch(
+  () => rootStyles.value.height,
+  (height) => {
+    emit('heightChanged', height)
+  },
+  { immediate: true }
+)
 </script>
 
 <style>
@@ -100,7 +109,7 @@ watch(() => rootStyles.value.height, height => {
 }
 
 .CollapsiblePanel__body {
-  min-height: 100px;
+  min-height: 50px;
   width: 100%;
 }
 

From 3996c0c58d7944c0f919cc592d05c7ebd219bf27 Mon Sep 17 00:00:00 2001
From: Daniele Guido <gui.daniele@gmail.com>
Date: Tue, 23 Jul 2024 18:09:45 +0200
Subject: [PATCH 12/12] add completion

---
 src/components/TutorialMonitor.vue            | 10 ++-
 src/components/TutorialTaskPanel.vue          | 18 ++++-
 .../stories/TutorialMonitor.stories.ts        | 66 +++++++++++++++++--
 src/models/TutorialTask.ts                    | 46 ++++++++++++-
 src/stores/tutorial.ts                        |  8 +++
 5 files changed, 135 insertions(+), 13 deletions(-)
 create mode 100644 src/stores/tutorial.ts

diff --git a/src/components/TutorialMonitor.vue b/src/components/TutorialMonitor.vue
index 3bb46ac5f..d803c11f9 100644
--- a/src/components/TutorialMonitor.vue
+++ b/src/components/TutorialMonitor.vue
@@ -19,7 +19,7 @@
           :task="task"
           :taskNum="idx + 1"
           @update:modelValue="(value: boolean) => (currentOpenTaskId = value ? task.id : null)"
-          @heightChanged="(e) => updateHeight(task.id, e)"
+          @heightChanged="e => updateHeight(task.id, e)"
         >
         </TutorialTaskPanel>
       </li>
@@ -56,15 +56,19 @@ const props = defineProps({
   tasks: {
     type: Array as PropType<ITutorialTask[]>,
     required: true
+  },
+  initialOpenedTaskId: {
+    type: String,
+    default: null
   }
 })
 
 const isOpen = ref(!props.isCollapsed)
-const currentOpenTaskId = ref<string | null>(null)
+const currentOpenTaskId = ref<string | null>(props.initialOpenedTaskId)
 
 watch(
   () => props.isCollapsed,
-  (isCollapsed) => {
+  isCollapsed => {
     isOpen.value = !isCollapsed
   }
 )
diff --git a/src/components/TutorialTaskPanel.vue b/src/components/TutorialTaskPanel.vue
index 4bf8420e2..54f896eb6 100644
--- a/src/components/TutorialTaskPanel.vue
+++ b/src/components/TutorialTaskPanel.vue
@@ -3,16 +3,28 @@
     class="TutorialTask"
     v-model="state"
     :title="task.title"
-    @heightChanged="(e) => emit('heightChanged', e)"
+    @heightChanged="e => emit('heightChanged', e)"
   >
     <template v-slot:header>
       <div class="d-flex align-items-center">
-        <div class="TutorialTask__num py-3 px-2 mb-0">task {{ taskNum }}</div>
-        <h4 class="mb-0">{{ task.title }}</h4>
+        <div class="TutorialTask__num py-3 px-2 mb-0">{{ taskNum }}</div>
+        <h4 class="mb-0">{{ task.title }} {{ task.getCompletion() }}</h4>
       </div>
     </template>
     <img v-if="task.coverUrl" :src="task.coverUrl" alt="task screencast video" class="img-fluid" />
     <div v-html="task.description"></div>
+    <ol v-if="task.tasks.length">
+      <li
+        v-for="(subtask, idx) in task.tasks"
+        :key="subtask.id"
+        class="pt-2 mb-2 mx-2 d-flex align-items-center"
+      >
+        <div class="p-1 flex-grow-1">
+          {{ subtask.title }}
+        </div>
+        <div class="pr-2 flex-shrink-1">{{ subtask.status }}</div>
+      </li>
+    </ol>
   </CollapsiblePanel>
 </template>
 
diff --git a/src/components/stories/TutorialMonitor.stories.ts b/src/components/stories/TutorialMonitor.stories.ts
index 42a5f9694..feb8d878a 100644
--- a/src/components/stories/TutorialMonitor.stories.ts
+++ b/src/components/stories/TutorialMonitor.stories.ts
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import TutorialMonitor from '@/components/TutorialMonitor.vue'
+import { TutorialTaskModel } from '@/models/TutorialTask'
 
 const meta: Meta<typeof TutorialMonitor> = {
   title: 'Components/TutorialMonitor',
@@ -15,26 +16,81 @@ export const Default: Story = {
   args: {
     title: 'Tutorial Monitor Story',
     isCollapsed: false,
+    initialOpenedTaskId: 'task-search-titanic',
     tasks: [
       {
-        id: 'task-1',
+        title: 'Welcome to Impresso!',
+        description:
+          'This is your gateway to exploring 200 years of historical newspapers and radio. Don’t know where to start?  Let’s get you on board!'
+      },
+      {
+        title: 'Search "Titanic"',
+        id: 'task-search-titanic',
+        tasks: [
+          {
+            title: 'Start your search by entering a keyword',
+            description: 'Description for subtask 1',
+            status: 'completed',
+            completionDate: new Date()
+          },
+          {
+            title: 'Understanding Search results',
+            description: 'Description for subtask 2',
+            status: 'completed'
+          },
+          {
+            title: 'Similar words? Use "OR"...',
+            description: 'Description for subtask 2',
+            status: 'completed'
+          },
+          {
+            title: 'An overview of all similar words: word embedding',
+            description: 'Description for subtask 2',
+            status: 'completed'
+          },
+          {
+            title: 'Esclude non relevant results: "NOT"',
+            description: 'Description for subtask 2',
+            status: 'completed'
+          },
+          {
+            title: 'Esclude non relevant results: filter by DATE',
+            description: 'Description for subtask 2',
+            status: 'completed'
+          },
+          {
+            title: 'Explore all the possible filters!'
+          }
+        ]
+      },
+      {
         title: 'Task 1',
         description: 'Description for task 1',
         status: 'completed',
-        coverUrl: 'https://via.placeholder.com/150'
+        coverUrl: 'https://via.placeholder.com/150',
+        tasks: [
+          {
+            title: 'Subtask 1',
+            description: 'Description for subtask 1',
+            status: 'completed'
+          },
+          {
+            title: 'Subtask 2',
+            description: 'Description for subtask 2',
+            status: 'completed'
+          }
+        ]
       },
       {
-        id: 'task-2',
         title: 'Task 2',
         description: 'Description for task 2',
         status: 'in-progress'
       },
       {
-        id: 'task-3',
         title: 'Task 3',
         description: 'Description for task 3',
         status: 'pending'
       }
-    ]
+    ].map((task, index) => new TutorialTaskModel({ ...task, id: task.id ?? `task-${index + 1}` }))
   }
 }
diff --git a/src/models/TutorialTask.ts b/src/models/TutorialTask.ts
index 2e8d26063..228356a2f 100644
--- a/src/models/TutorialTask.ts
+++ b/src/models/TutorialTask.ts
@@ -7,8 +7,13 @@ export interface ITutorialTask {
   videoUrl?: string
   creationDate?: Date
   completionDate?: Date
+  tasks: Array<ITutorialTask>
 }
 
+export const StatusCompleted = 'completed'
+export const StatusInProgress = 'in-progress'
+export const StatusPending = 'pending'
+
 export class TutorialTaskModel implements ITutorialTask {
   id: string
   title: string
@@ -18,16 +23,18 @@ export class TutorialTaskModel implements ITutorialTask {
   videoUrl: string
   creationDate: Date
   completionDate: Date
+  tasks: Array<ITutorialTask>
 
   constructor({
     id = '',
     title = '',
     description = '',
-    status = '',
+    status = StatusInProgress,
     creationDate = new Date(),
     completionDate = null,
     coverUrl = '',
-    videoUrl = ''
+    videoUrl = '',
+    tasks = []
   } = {}) {
     this.id = String(id)
     this.title = String(title)
@@ -47,5 +54,40 @@ export class TutorialTaskModel implements ITutorialTask {
     } else if (completionDate) {
       this.completionDate = new Date(completionDate)
     }
+    this.tasks = tasks.map(task => {
+      if (task instanceof TutorialTaskModel) {
+        return task
+      }
+      return new TutorialTaskModel({ ...task })
+    })
+  }
+
+  getCompletion(): { n: number; total: number; ratio: number; latestCompletionDate: Date | null } {
+    const totalTasks = this.tasks.length
+    if (totalTasks === 0) {
+      return {
+        total: 1,
+        n: this.status === StatusCompleted ? 1 : 0,
+        ratio: this.status === StatusCompleted ? 1 : 0,
+        latestCompletionDate: this.completionDate
+      }
+    }
+    const completedTasks = this.tasks.filter(task => task.status === 'completed')
+    const latestCompletionDate = completedTasks.reduce(
+      (latest, task) => {
+        if (!task.completionDate) {
+          return latest
+        }
+        return task.completionDate.getTime() > latest.getTime() ? task.completionDate : latest
+      },
+      this.completionDate ?? new Date(0)
+    )
+
+    return {
+      n: completedTasks.length,
+      total: totalTasks,
+      ratio: completedTasks.length / totalTasks,
+      latestCompletionDate: latestCompletionDate
+    }
   }
 }
diff --git a/src/stores/tutorial.ts b/src/stores/tutorial.ts
new file mode 100644
index 000000000..a811ba7ce
--- /dev/null
+++ b/src/stores/tutorial.ts
@@ -0,0 +1,8 @@
+import { defineStore } from 'pinia'
+
+export interface State {
+  tutorial: string[]
+}
+
+export const useTutorialStore = defineStore('tutorial', {
+  
\ No newline at end of file