add new lesson mode and started code refraction

client/src/components/dashboard/WidgetForecast.vue

@@ -1,18 +1,17 @@
 <template lang="pug">
-  v-card.pa-4.rounded-xl.border-subtle.d-flex.flex-column.flex-grow-1(color="#1e1e24")
-    .text-subtitle-1.font-weight-bold.mb-3.d-flex.align-center
-      v-icon(color="#ffeaa7" start) mdi-clock-outline
-      | {{ $t('stats.next24') }}
-
+  DashboardWidget(
+    :title="$t('stats.next24')"
+    icon="mdi-clock-outline"
+  )
     .forecast-list.flex-grow-1(v-if="hasUpcoming")
       div(v-for="(count, hour) in forecast" :key="hour")
         .d-flex.justify-space-between.align-center.mb-2.py-2.border-b-subtle(v-if="count > 0")
           span.text-body-2.text-grey-lighten-1
             | {{ hour === 0 ? $t('stats.availableNow') : $t('stats.inHours', { n: hour }, hour) }}
-          v-chip.font-weight-bold(
+
+          v-chip.font-weight-bold.text-primary(
             size="small"
-            color="#2f3542"
-            style="color: #00cec9 !important;"
+            color="surface-light"
           ) {{ count }}
 
     .fill-height.d-flex.align-center.justify-center.text-grey.text-center.pa-4(v-else)
@@ -20,22 +19,15 @@
 </template>
 
 <script setup>
+/* eslint-disable no-unused-vars */
 import { computed } from 'vue';
+import DashboardWidget from './DashboardWidget.vue';
 
 const props = defineProps({
-	forecast: {
-		type: Object,
-		default: () => ({})
-	}
+  forecast: { type: Object, default: () => ({}) },
 });
 
-const hasUpcoming = computed(() => {
-	return props.forecast && props.forecast.some(c => c > 0);
-});
+const hasUpcoming = computed(() => props.forecast && props.forecast.some((c) => c > 0));
 </script>
 
-<style lang="scss" src="@/styles/components/_widgets.scss" scoped>
-.border-b-subtle {
-	border-bottom: 1px solid rgb(255 255 255 / 5%);
-}
-</style>
+<style lang="scss" src="@/styles/components/_widgets.scss" scoped></style>