Display selected circles in list

client/src/pages/cockpit/CockpitIndexPage.vue

@@ -130,7 +130,13 @@ function setActiveClasses(id: number) {
                         diagram-type="horizontalSmall"
                       ></LearningPathDiagram>
                     </div>
-                    <div>Einstieg</div>
+                    <div>
+                      <span
+                        v-for="title in cockpitStore.selectedCirclesTitles"
+                        :key="title"
+                        >{{ title }}</span
+                      >
+                    </div>
                   </div>
                   <div class="ml-4 flex flex-row items-center">
                     <div class="flex flex-row items-center mr-6">

client/src/stores/cockpit.ts

@@ -21,6 +21,10 @@ export const useCockpitStore = defineStore({
   },
   getters: {
     circles: (state) => state.cockpitSessionUser?.circles,
+    selectedCirclesTitles: (state) =>
+      state.cockpitSessionUser?.circles
+        .filter((circle) => state.selectedCircles.indexOf(circle.id) > -1)
+        .map((circle) => circle.title),
   },
   actions: {
     async loadCourseSessionUsers(courseSlug: string, reload = false) {