Fix linting issues

client/src/pages/learningPath/learningPathPage/LearningPathListTopic.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import LearningPathCircleListTile from "@/pages/learningPath/learningPathPage/LearningPathCircleListTile.vue";
-import type { LearningContentWithCompletion, TopicType } from '@/types';
+import type { LearningContentWithCompletion, TopicType } from "@/types";
 import { computed } from "vue";
 
 interface Props {
@@ -10,7 +10,6 @@ interface Props {
 }
 const props = defineProps<Props>();
 
-
 const filteredCircles = computed(() => {
   if (props.filter === undefined || props.filter === "") {
     return props.topic.circles;

client/src/pages/learningPath/learningPathPage/LearningPathPathTopic.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import {computed} from "vue";
+import { computed } from "vue";
-import type { LearningContentWithCompletion, TopicType } from '@/types';
+import type { LearningContentWithCompletion, TopicType } from "@/types";
-import LearningPathCircleColumn from './LearningPathCircleColumn.vue';
+import LearningPathCircleColumn from "./LearningPathCircleColumn.vue";
 
 interface Props {
   topic: TopicType;
@@ -20,7 +20,6 @@ const isFirstCircle = (circleIndex: number) =>
 const isLastCircle = (circleIndex: number, numCircles: number) =>
   props.isLastTopic && circleIndex === numCircles - 1;
 
-
 const filteredCircles = computed(() => {
   if (props.filter === undefined || props.filter === "") {
     return props.topic.circles;
@@ -33,10 +32,7 @@ const filteredCircles = computed(() => {
 </script>
 
 <template>
-  <div
+  <div class="border-l border-gray-500" :class="topicIndex == 0 ? 'ml-6 sm:ml-12' : ''">
-    class="border-l border-gray-500"
-    :class="topicIndex == 0 ? 'ml-6 sm:ml-12' : ''"
-  >
     <p
       :id="`topic-${topic.slug}`"
       class="inline-block h-12 self-start px-4 font-bold text-gray-800"
@@ -51,11 +47,9 @@ const filteredCircles = computed(() => {
         :circle="circle"
         :next-learning-content="nextLearningContent"
         :is-first-circle="isFirstCircle(circleIndex)"
-        :is-last-circle="
+        :is-last-circle="isLastCircle(circleIndex, topic.circles.length)"
-        isLastCircle(circleIndex, topic.circles.length)
-        "
         :override-circle-url="
-        overrideCircleUrlBase ? `${overrideCircleUrlBase}/${circle.slug}` : undefined
+          overrideCircleUrlBase ? `${overrideCircleUrlBase}/${circle.slug}` : undefined
         "
       ></LearningPathCircleColumn>
     </div>

client/src/pages/learningPath/learningPathPage/LearningPathPathView.vue

@@ -3,10 +3,7 @@ import LearningPathCircleColumn from "@/pages/learningPath/learningPathPage/Lear
 import LearningPathScrollButton from "@/pages/learningPath/learningPathPage/LearningPathScrollButton.vue";
 import { useScroll } from "@vueuse/core";
 import { computed, nextTick, ref, watch } from "vue";
-import type {
+import type { LearningContentWithCompletion, LearningPathType } from "@/types";
-  LearningContentWithCompletion,
-  LearningPathType,
-} from "@/types";
 import LoadingSpinner from "@/components/ui/LoadingSpinner.vue";
 import LearningPathPathTopic from "./LearningPathPathTopic.vue";
 
@@ -34,16 +31,19 @@ const scrollLearnPathDiagram = (offset: number) => {
 
 const topics = computed(() => props.learningPath?.topics ?? []);
 
-watch(()=> props.filter, () => {
+watch(
-  // we need to update the scroll state of the element, otherwise the arrows won't match the scroll state
+  () => props.filter,
-  // https://github.com/vueuse/vueuse/issues/2875
+  () => {
-    nextTick(()=> {
+    // we need to update the scroll state of the element, otherwise the arrows won't match the scroll state
-      if(learnPathDiagram.value){
+    // https://github.com/vueuse/vueuse/issues/2875
-        const scrollEvent = new Event('scroll');
+    nextTick(() => {
+      if (learnPathDiagram.value) {
+        const scrollEvent = new Event("scroll");
         learnPathDiagram.value.dispatchEvent(scrollEvent);
       }
     });
-})
+  }
+);
 </script>
 
 <template>
@@ -69,8 +69,8 @@ watch(()=> props.filter, () => {
         :next-learning-content="nextLearningContent"
         :override-circle-url-base="overrideCircleUrlBase"
         :filter="filter"
-        :is-last-topic="topicIndex === (topics.length - 1)"
+        :is-last-topic="topicIndex === topics.length - 1"
-         />
+      />
     </div>
     <LearningPathScrollButton
       v-show="!arrivedState.right"

client/tailwind.css

@@ -93,7 +93,7 @@ textarea {
   }
 
   .link {
-    @apply underline underline-offset-2 cursor-pointer;
+    @apply cursor-pointer underline underline-offset-2;
   }
 
   .link-large {
@@ -117,7 +117,8 @@ textarea {
   }
 
   .filter-blue-900 {
-    filter: invert(9%) sepia(38%) saturate(5684%) hue-rotate(200deg) brightness(95%) contrast(105%);
+    filter: invert(9%) sepia(38%) saturate(5684%) hue-rotate(200deg) brightness(95%)
+      contrast(105%);
   }
 }