From 75f41315f3ffca892f0bfa3f9a3f2e502de44628 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Thu, 23 Apr 2026 10:57:54 +0200
Subject: [PATCH 01/66] allow editing

---
 src/classrooms/pages/ClassroomDetails.vue | 178 ++++++++++++++++++----
 1 file changed, 149 insertions(+), 29 deletions(-)

diff --git a/src/classrooms/pages/ClassroomDetails.vue b/src/classrooms/pages/ClassroomDetails.vue
index bd7d4d3b..1ef709ae 100644
--- a/src/classrooms/pages/ClassroomDetails.vue
+++ b/src/classrooms/pages/ClassroomDetails.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import ClassroomCard from "@/classrooms/components/ClassroomCard.vue";
 import { useRoute } from "vue-router";
@@ -7,29 +7,108 @@ import { useClassroomsStore } from "@/classrooms/store/classrooms.store";
 
 const { t } = useI18n();
 const route = useRoute();
-
 const classroomsStore = useClassroomsStore();
 
 const classroomId = computed(() => Number(route.params.classroomId));
-
 const classroom = computed(() => classroomsStore.selectedClassroom);
 
 onMounted(() => {
+  console.log("CLASSROOM:", classroom.value);
   if (Number.isFinite(classroomId.value)) {
     classroomsStore.fetchClassroomById(classroomId.value);
   }
 });
+
+const isEditing = ref(false);
+
+const editForm = ref({
+  title: "",
+  description: "",
+  teacherEmails: [] as string[],
+});
+
+const teacherInput = ref("");
+
+watch(classroom, (c) => {
+  if (c) {
+    editForm.value = {
+      title: c.title,
+      description: c.description ?? "",
+      teacherEmails: c.teacherEmails ?? [],
+    };
+
+    teacherInput.value = c.teacherEmails?.join(", ") ?? "";
+  }
+});
+
+function startEdit() {
+  isEditing.value = true;
+}
+
+function cancelEdit() {
+  isEditing.value = false;
+
+  if (classroom.value) {
+    editForm.value = {
+      title: classroom.value.title,
+      description: classroom.value.description ?? "",
+      teacherEmails: classroom.value.teacherEmails ?? [],
+    };
+
+    teacherInput.value =
+        classroom.value.teacherEmails?.join(", ") ?? "";
+  }
+}
+
+async function saveEdit() {
+  if (!classroom.value) {
+    return;
+  }
+
+  if (!editForm.value.title.trim()) {
+    alert("Title is required");
+    return;
+  }
+
+  try {
+    await classroomsStore.updateClassroom(classroom.value.classroomId, {
+      title: editForm.value.title,
+      description: editForm.value.description,
+      teacherEmails: teacherInput.value
+      .split(",")
+      .map((e) => e.trim())
+      .filter(Boolean),
+    });
+
+    await classroomsStore.fetchClassroomById(
+        classroom.value.classroomId
+    );
+
+    isEditing.value = false;
+  } catch (e) {
+    console.error(e);
+    alert("Failed to update classroom");
+  }
+}
 </script>
 
 <template>
-  <main class="flex min-h-screen flex-col items-center justify-center px-6">
-    <header class="mb-8 text-center">
+  <main class="flex min-h-screen flex-col items-center px-6 py-10">
+    <header class="mb-8 w-full max-w-3xl text-center">
       <p class="text-lg text-gray-600">
         {{ t("classroomDetails.label") }}
       </p>
 
       <h1 class="text-5xl font-extrabold text-gray-800 drop-shadow-md">
-        {{ classroom?.title ?? classroomId }}
+        <template v-if="isEditing">
+          <input
+              v-model="editForm.title"
+              class="w-full rounded border px-3 py-2 text-center text-2xl"
+          />
+        </template>
+        <template v-else>
+          {{ classroom?.title ?? classroomId }}
+        </template>
       </h1>
 
       <p v-if="classroom" class="mt-2 text-lg text-gray-600">
@@ -39,55 +118,96 @@ onMounted(() => {
         </span>
       </p>
 
-      <p v-if="classroom" class="mt-2 text-lg text-gray-600">
-        {{ classroom.description || "-" }}
-      </p>
+      <div v-if="classroom" class="mt-4">
+        <template v-if="isEditing">
+          <textarea
+              v-model="editForm.description"
+              class="w-full rounded border p-2"
+              rows="3"
+          />
+        </template>
+        <template v-else>
+          <p class="text-lg text-gray-600">
+            {{ classroom.description || "-" }}
+          </p>
+        </template>
+      </div>
+
+      <div v-if="classroom" class="mt-4 text-lg text-gray-600">
+        <strong>{{ t("classroomTable.teachers") }}:</strong>
+
+        <template v-if="isEditing">
+          <input
+              v-model="teacherInput"
+              class="mt-2 w-full rounded border p-2"
+              placeholder="Comma separated emails"
+          />
+        </template>
+
+        <template v-else>
+          <p class="mt-1">
+            {{ classroom.teacherEmails?.join(", ") || "-" }}
+          </p>
+        </template>
+      </div>
+
+      <div class="mt-6 flex justify-center gap-3">
+        <button
+            v-if="!isEditing"
+            class="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-500"
+            @click="startEdit"
+        >
+          Edit
+        </button>
+
+        <template v-else>
+          <button
+              class="rounded bg-green-600 px-4 py-2 text-white hover:bg-green-500 disabled:opacity-50"
+              :disabled="classroomsStore.isLoading"
+              @click="saveEdit"
+          >
+            Save
+          </button>
+
+          <button
+              class="rounded bg-gray-400 px-4 py-2 text-white hover:bg-gray-300"
+              @click="cancelEdit"
+          >
+            Cancel
+          </button>
+        </template>
+      </div>
     </header>
 
     <div class="mx-auto grid max-w-7xl grid-cols-2 gap-6">
       <ClassroomCard
           :title="t('classroomDetails.pupilOverview.title')"
           :description="t('classroomDetails.pupilOverview.description')"
-          :to="{
-          name: 'classroom-pupils',
-          params: { classroomId },
-        }"
+          :to="{ name: 'classroom-pupils', params: { classroomId } }"
       />
 
       <ClassroomCard
           :title="t('classroomDetails.taskOverview.title')"
           :description="t('classroomDetails.taskOverview.description')"
-          :to="{
-          name: 'classroom-tasks',
-          params: { classroomId },
-        }"
+          :to="{ name: 'classroom-tasks', params: { classroomId } }"
       />
 
       <ClassroomCard
           :title="t('classroomDetails.mysteryOverview.title')"
           :description="t('classroomDetails.mysteryOverview.description')"
-          :to="{
-          name: 'classroom-mystery',
-          params: { classroomId },
-        }"
+          :to="{ name: 'classroom-mystery', params: { classroomId } }"
       />
 
       <ClassroomCard
           :title="t('classroomDetails.gameOverview.title')"
           :description="t('classroomDetails.gameOverview.description')"
-          :to="{
-          name: 'teacher-playtest-map',
-          params: { classroomId },
-        }"
+          :to="{ name: 'teacher-playtest-map', params: { classroomId } }"
       />
 
       <ClassroomCard
           :title="t('classroomDetails.notificationOverview.title')"
           :description="t('classroomDetails.notificationOverview.description')"
-          :to="{
-          name: 'classroom-notifications',
-          params: { classroomId },
-        }"
+          :to="{ name: 'classroom-notifications', params: { classroomId } }"
       />
     </div>
   </main>

From a3b6f5ccae5ed1cb28565cf8c6ee4265790a1ee5 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Thu, 23 Apr 2026 10:58:05 +0200
Subject: [PATCH 02/66] add missing pages

---
 src/classrooms/pages/ClassroomMystery.vue       | 3 +++
 src/classrooms/pages/ClassroomNotifications.vue | 3 +++
 src/classrooms/pages/ClassroomTasks.vue         | 3 +++
 src/classrooms/routes.ts                        | 9 ++++++---
 4 files changed, 15 insertions(+), 3 deletions(-)
 create mode 100644 src/classrooms/pages/ClassroomMystery.vue
 create mode 100644 src/classrooms/pages/ClassroomNotifications.vue
 create mode 100644 src/classrooms/pages/ClassroomTasks.vue

diff --git a/src/classrooms/pages/ClassroomMystery.vue b/src/classrooms/pages/ClassroomMystery.vue
new file mode 100644
index 00000000..3b68a945
--- /dev/null
+++ b/src/classrooms/pages/ClassroomMystery.vue
@@ -0,0 +1,3 @@
+<template>
+  Mystery
+</template>
\ No newline at end of file
diff --git a/src/classrooms/pages/ClassroomNotifications.vue b/src/classrooms/pages/ClassroomNotifications.vue
new file mode 100644
index 00000000..e7b4fac9
--- /dev/null
+++ b/src/classrooms/pages/ClassroomNotifications.vue
@@ -0,0 +1,3 @@
+<template>
+  Notifications
+</template>
\ No newline at end of file
diff --git a/src/classrooms/pages/ClassroomTasks.vue b/src/classrooms/pages/ClassroomTasks.vue
new file mode 100644
index 00000000..eb942eff
--- /dev/null
+++ b/src/classrooms/pages/ClassroomTasks.vue
@@ -0,0 +1,3 @@
+<template>
+  Tasks
+</template>
\ No newline at end of file
diff --git a/src/classrooms/routes.ts b/src/classrooms/routes.ts
index c0b82e9e..fe73bf59 100644
--- a/src/classrooms/routes.ts
+++ b/src/classrooms/routes.ts
@@ -7,6 +7,9 @@ import ClassroomDetails from "@/classrooms/pages/ClassroomDetails.vue";
 import PupilOverviewPage from "@/classrooms/pages/PupilOverviewPage.vue";
 import TeacherPlaytestMap from "@/teacher-playtest/pages/TeacherPlaytestMapPage.vue";
 import TeacherPlaytestStopPage from "@/teacher-playtest/pages/TeacherPlaytestStopPage.vue";
+import ClassroomTasks from "@/classrooms/pages/ClassroomTasks.vue";
+import ClassroomNotifications from "@/classrooms/pages/ClassroomNotifications.vue";
+import ClassroomMystery from "@/classrooms/pages/ClassroomMystery.vue";
 
 export function createClassroomRoutes(prefix: string): RouteRecordRaw[] {
   return [
@@ -38,12 +41,12 @@ export function createClassroomRoutes(prefix: string): RouteRecordRaw[] {
   {
     path: "classrooms/:classroomId/notifications",
     name: "classroom-notifications",
-    component: ClassroomDetails,
+    component: ClassroomNotifications,
   },
   {
     path: "classrooms/:classroomId/tasks",
     name: "classroom-tasks",
-    component: ClassroomDetails,
+    component: ClassroomTasks,
   },
   {
     path: "classrooms/:classroomId/playtest",
@@ -58,7 +61,7 @@ export function createClassroomRoutes(prefix: string): RouteRecordRaw[] {
   {
     path: "classrooms/:classroomId/mystery",
     name: "classroom-mystery",
-    component: ClassroomDetails,
+    component: ClassroomMystery,
   },
   ];
 }

From b8b4c77e7b20c38be65b7f9e48e42a1284579181 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Thu, 23 Apr 2026 13:21:17 +0200
Subject: [PATCH 03/66] update fetchJson to accept empty json

---
 src/auth/api/auth.api.ts | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/auth/api/auth.api.ts b/src/auth/api/auth.api.ts
index f7ab2765..bcc94312 100644
--- a/src/auth/api/auth.api.ts
+++ b/src/auth/api/auth.api.ts
@@ -110,7 +110,17 @@ export async function fetchJson<T>(
     return undefined as T;
   }
 
-  return (await response.json()) as T;
+  const text = await response.text();
+
+  if (!text) {
+    return undefined as T;
+  }
+
+  try {
+    return JSON.parse(text) as T;
+  } catch {
+    throw new Error("invalid response from server");
+  }
 }
 
 export function requestCsrfToken() {

From a09df8789fb34a7c61d70fd0136615e99fdb3573 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Thu, 23 Apr 2026 13:22:32 +0200
Subject: [PATCH 04/66] fix remove and approve pupils

---
 src/classrooms/api/classrooms.api.ts      |  29 +++-
 src/classrooms/components/PupilTable.vue  | 188 ++++++++++++++++------
 src/classrooms/pages/ClassroomDetails.vue |   2 +-
 src/classrooms/routes.ts                  |   5 +
 src/classrooms/store/classrooms.store.ts  |  28 +++-
 5 files changed, 195 insertions(+), 57 deletions(-)

diff --git a/src/classrooms/api/classrooms.api.ts b/src/classrooms/api/classrooms.api.ts
index ae2a0316..0e83310e 100644
--- a/src/classrooms/api/classrooms.api.ts
+++ b/src/classrooms/api/classrooms.api.ts
@@ -30,9 +30,20 @@ export type ClassroomDetailResponse = ClassroomResponse & {
   pupils: {
     userId: number;
     displayName: string;
-  }[];
+    pupilStatus: "PENDING" | "ACTIVE";
+  }[],
+  teachers: {
+    userId: number;
+    email: string;
+  }[],
 };
 
+export type ClassroomPupilResponse = {
+  userId: number;
+  displayName: string;
+  pupilStatus: "PENDING" | "ACTIVE";
+}
+
 export type updateClassroomRequest = {
   title: string;
   description: string;
@@ -116,3 +127,19 @@ export function requestRemovePupil(
       },
   );
 }
+
+export async function requestApprovePupil(
+    authHeader: string,
+    classroomId: number,
+    pupilId: number
+) {
+  return fetchJson(
+      `${CLASSROOMS_API_BASE}/${classroomId}/pupils/${pupilId}/approve`,
+      {
+        method: "POST",
+        headers: {
+          Authorization: authHeader,
+        },
+      }
+  );
+}
diff --git a/src/classrooms/components/PupilTable.vue b/src/classrooms/components/PupilTable.vue
index 21cb9f94..84f55b54 100644
--- a/src/classrooms/components/PupilTable.vue
+++ b/src/classrooms/components/PupilTable.vue
@@ -17,71 +17,153 @@ const pupils = computed(() => {
   return store.selectedClassroom?.pupils ?? [];
 });
 
-const sortedPupils = computed(() =>
-    pupils.value.slice().sort((a, b) => a.displayName.localeCompare(b.displayName)),
+const approvedPupils = computed(() =>
+    pupils.value.filter(p => p.pupilStatus === "ACTIVE")
 );
 
+const pendingPupils = computed(() =>
+    pupils.value.filter(p => p.pupilStatus === "PENDING")
+);
+
+const sortedApproved = computed(() =>
+    approvedPupils.value.slice().sort((a, b) =>
+        a.displayName.localeCompare(b.displayName)
+    )
+);
+
+const sortedPending = computed(() =>
+    pendingPupils.value.slice().sort((a, b) =>
+        a.displayName.localeCompare(b.displayName)
+    )
+)
+
 // NOTE:
 // score / xp / level / avatar are not currently available in ClassroomDetailResponse.
 // They are kept as placeholders
 
 async function removePupil(pupilId: number) {
   await store.removePupil(classroomId, pupilId);
+  await store.fetchClassroomById(classroomId);
+}
+
+async function approvePupil(pupilId: number) {
+  await store.approvePupil(classroomId, pupilId);
+  await store.fetchClassroomById(classroomId);
 }
 </script>
 
 <template>
   <div class="mx-auto w-full max-h-170 max-w-7xl overflow-y-auto bg-white drop-shadow-lg scrollbar-thin">
-    <table class="min-w-full">
-      <thead class="sticky top-0 z-10 bg-gray-100">
-      <tr>
-        <th class="px-4 py-2 text-left">
-          {{ t("pupilTable.name") }}
-        </th>
-        <!-- NOT AVAILABLE IN CURRENT API -->
-        <!--
-        <th class="px-4 py-2 text-left">{{ t("pupilTable.score") }}</th>
-        <th class="px-4 py-2 text-left">{{ t("pupilTable.xp") }}</th>
-        <th class="px-4 py-2 text-left">{{ t("pupilTable.level") }}</th>
-        -->
-        <th class="px-4 py-2 text-right">
-          {{ t("pupilTable.actions") }}
-        </th>
-      </tr>
-      </thead>
-
-      <tbody>
-      <tr
-        v-for="pupil in sortedPupils"
-        :key="pupil.userId"
-        class="border-b hover:bg-gray-100"
-        >
-        <td class="border-gray-200 px-4 py-2">
-          <RouterLink
-            class="flex items-center gap-3 font-medium hover:underline"
-            :to="{
-            name: 'classroom-pupil-progress',
-            params: {
-              classroomId,
-              pupilId: pupil.userId,
-            },
-            }"
-            >
-            {{ pupil.displayName }}
-          </RouterLink>
-        </td>
-
-        <td class="px-4 py-3 text-right">
-          <button
-            type="button"
-            class="rounded bg-red-600 px-3 py-1 text-white hover:bg-red-700"
-            @click="removePupil(pupil.userId)"
-            >
-            {{ t("pupilTable.remove") }}
-          </button>
-        </td>
-      </tr>
-      </tbody>
-    </table>
+
+    <div v-if="store.isLoadingDetail" class="p-4 text-gray-500">
+      Loading pupils...
+    </div>
+
+    <div v-else-if="store.errorMessage" class="p-4 text-red-500">
+      {{ store.errorMessage }}
+    </div>
+
+    <div v-else>
+
+      <div v-if="sortedPending.length">
+        <h2 class="px-4 py-3 text-lg font-bold text-yellow-700 bg-yellow-50 border-b">
+          Pending approval
+        </h2>
+
+        <table class="min-w-full bg-yellow-50">
+          <tbody>
+          <tr
+              v-for="pupil in sortedPending"
+              :key="pupil.userId"
+              class="border-b hover:bg-yellow-100"
+          >
+            <td class="px-4 py-3">
+              {{ pupil.displayName }}
+              <span class="ml-2 rounded bg-yellow-200 px-2 py-1 text-xs text-yellow-800">
+                  Pending
+                </span>
+            </td>
+
+            <td class="px-4 py-3 text-right space-x-2">
+              <button
+                  class="rounded bg-green-600 px-3 py-1 text-white hover:bg-green-500 disabled:opacity-50"
+                  :disabled="store.isLoading"
+                  @click="approvePupil(pupil.userId)"
+              >
+                {{ t("pupilTable.approve") }}
+              </button>
+
+              <button
+                  class="rounded bg-red-600 px-3 py-1 text-white hover:bg-red-700 disabled:opacity-50"
+                  :disabled="store.isLoading"
+                  @click="removePupil(pupil.userId)"
+              >
+                {{ t("pupilTable.remove") }}
+              </button>
+            </td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div>
+        <h2 class="px-4 py-3 text-lg font-bold text-gray-700 bg-gray-100 border-b">
+          {{ t("pupilTable.approved") }}
+        </h2>
+
+        <table class="min-w-full">
+          <thead class="sticky top-0 z-10 bg-gray-100">
+          <tr>
+            <th class="px-4 py-2 text-left">
+              {{ t("pupilTable.name") }}
+            </th>
+
+            <th class="px-4 py-2 text-right">
+              {{ t("pupilTable.actions") }}
+            </th>
+          </tr>
+          </thead>
+
+          <tbody>
+          <tr
+              v-for="pupil in sortedApproved"
+              :key="pupil.userId"
+              class="border-b hover:bg-gray-100"
+          >
+            <td class="px-4 py-3">
+              <RouterLink
+                  class="flex items-center gap-3 font-medium hover:underline"
+                  :to="{
+                    name: 'classroom-pupil-progress',
+                    params: {
+                      classroomId,
+                      pupilId: pupil.userId,
+                    },
+                  }"
+              >
+                {{ pupil.displayName }}
+              </RouterLink>
+            </td>
+
+            <td class="px-4 py-3 text-right">
+              <button
+                  class="rounded bg-red-600 px-3 py-1 text-white hover:bg-red-700 disabled:opacity-50"
+                  :disabled="store.isLoading"
+                  @click="removePupil(pupil.userId)"
+              >
+                {{ t("pupilTable.remove") }}
+              </button>
+            </td>
+          </tr>
+
+          <tr v-if="!sortedApproved.length">
+            <td colspan="2" class="px-4 py-4 text-center text-gray-500">
+              {{ t("pupilTable.noPupils") }}
+            </td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
   </div>
 </template>
\ No newline at end of file
diff --git a/src/classrooms/pages/ClassroomDetails.vue b/src/classrooms/pages/ClassroomDetails.vue
index 1ef709ae..6cfbe221 100644
--- a/src/classrooms/pages/ClassroomDetails.vue
+++ b/src/classrooms/pages/ClassroomDetails.vue
@@ -146,7 +146,7 @@ async function saveEdit() {
 
         <template v-else>
           <p class="mt-1">
-            {{ classroom.teacherEmails?.join(", ") || "-" }}
+            {{ classroom.teachers?.map(t => t.email).join(", ") || "-" }}
           </p>
         </template>
       </div>
diff --git a/src/classrooms/routes.ts b/src/classrooms/routes.ts
index fe73bf59..090885a5 100644
--- a/src/classrooms/routes.ts
+++ b/src/classrooms/routes.ts
@@ -63,5 +63,10 @@ export function createClassroomRoutes(prefix: string): RouteRecordRaw[] {
     name: "classroom-mystery",
     component: ClassroomMystery,
   },
+    {
+      path: "classrooms/:classroomId",
+      name: "classroom-pupil-progress",
+      component: ClassroomDetails,
+    }
   ];
 }
diff --git a/src/classrooms/store/classrooms.store.ts b/src/classrooms/store/classrooms.store.ts
index ca1fc998..d971d171 100644
--- a/src/classrooms/store/classrooms.store.ts
+++ b/src/classrooms/store/classrooms.store.ts
@@ -10,7 +10,7 @@ import {
   requestGetClassroomById,
   type updateClassroomRequest,
   type ClassroomDetailResponse,
-  requestUpdateClassroom,
+  requestUpdateClassroom, requestApprovePupil,
 } from "@/classrooms/api/classrooms.api.ts";
 
 export const useClassroomsStore = defineStore("classrooms", () => {
@@ -91,6 +91,8 @@ export const useClassroomsStore = defineStore("classrooms", () => {
           { classroomCode: cleanedCode }
       );
 
+      await fetchClassroomById(joined.classroomId)
+
       console.log("JOINED RESPONSE:", joined);
 
       if (authStore.user?.pupilProfile) {
@@ -162,7 +164,7 @@ export const useClassroomsStore = defineStore("classrooms", () => {
           ...updated,
         };
       }
-
+      console.log(JSON.parse(JSON.stringify(selectedClassroom.value)))
       return updated;
     } catch (error) {
       errorMessage.value = (error as Error).message;
@@ -200,6 +202,27 @@ export const useClassroomsStore = defineStore("classrooms", () => {
     }
   }
 
+  async function approvePupil(classroomId: number, pupilId: number) {
+    if (!authStore.authorizationHeader) {
+      throw new Error("Not authenticated");
+    }
+
+    await requestApprovePupil(
+        authStore.authorizationHeader,
+        classroomId,
+        pupilId
+    );
+
+    if (selectedClassroom.value) {
+      const pupil = selectedClassroom.value.pupils.find(
+          p => p.userId === pupilId
+      );
+      if (pupil) {
+        pupil.pupilStatus = "ACTIVE";
+      }
+    }
+  }
+
   return {
     classrooms,
     isLoading,
@@ -212,5 +235,6 @@ export const useClassroomsStore = defineStore("classrooms", () => {
     fetchClassroomById,
     updateClassroom,
     removePupil,
+    approvePupil,
   };
 });

From b5d5ee44b325d1bcaec118a728fd9509a44d6cde Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Thu, 23 Apr 2026 13:37:54 +0200
Subject: [PATCH 05/66] show already added teachers

---
 src/classrooms/pages/ClassroomDetails.vue | 65 ++++++++++++++++-------
 1 file changed, 45 insertions(+), 20 deletions(-)

diff --git a/src/classrooms/pages/ClassroomDetails.vue b/src/classrooms/pages/ClassroomDetails.vue
index 6cfbe221..a66d455b 100644
--- a/src/classrooms/pages/ClassroomDetails.vue
+++ b/src/classrooms/pages/ClassroomDetails.vue
@@ -19,12 +19,13 @@ onMounted(() => {
   }
 });
 
+const newTeacherInput = ref("");
+
 const isEditing = ref(false);
 
 const editForm = ref({
   title: "",
   description: "",
-  teacherEmails: [] as string[],
 });
 
 const teacherInput = ref("");
@@ -34,10 +35,9 @@ watch(classroom, (c) => {
     editForm.value = {
       title: c.title,
       description: c.description ?? "",
-      teacherEmails: c.teacherEmails ?? [],
     };
 
-    teacherInput.value = c.teacherEmails?.join(", ") ?? "";
+    newTeacherInput.value = "";
   }
 });
 
@@ -52,11 +52,9 @@ function cancelEdit() {
     editForm.value = {
       title: classroom.value.title,
       description: classroom.value.description ?? "",
-      teacherEmails: classroom.value.teacherEmails ?? [],
     };
 
-    teacherInput.value =
-        classroom.value.teacherEmails?.join(", ") ?? "";
+    newTeacherInput.value = "";
   }
 }
 
@@ -70,14 +68,17 @@ async function saveEdit() {
     return;
   }
 
+  const existingEmails = classroom.value?.teachers?.map(t => t.email) ?? [];
+
+  const newEmails = teacherInput.value.split(",").map(e => e.trim()).filter(Boolean);
+
+  const mergedEmails = Array.from(new Set([...existingEmails, ...newEmails]));
+
   try {
     await classroomsStore.updateClassroom(classroom.value.classroomId, {
       title: editForm.value.title,
       description: editForm.value.description,
-      teacherEmails: teacherInput.value
-      .split(",")
-      .map((e) => e.trim())
-      .filter(Boolean),
+      teacherEmails: mergedEmails,
     });
 
     await classroomsStore.fetchClassroomById(
@@ -136,19 +137,43 @@ async function saveEdit() {
       <div v-if="classroom" class="mt-4 text-lg text-gray-600">
         <strong>{{ t("classroomTable.teachers") }}:</strong>
 
-        <template v-if="isEditing">
-          <input
-              v-model="teacherInput"
-              class="mt-2 w-full rounded border p-2"
-              placeholder="Comma separated emails"
-          />
-        </template>
-
-        <template v-else>
+        <div v-if="!isEditing">
           <p class="mt-1">
             {{ classroom.teachers?.map(t => t.email).join(", ") || "-" }}
           </p>
-        </template>
+        </div>
+
+        <div v-else class="mt-3 space-y-3">
+          <div>
+            <p class="text-sm font-semibold text-gray-600">
+              Existing teachers
+            </p>
+
+            <ul class="mt-2 space-y-1">
+              <li
+                  v-for="t in classroom.teachers"
+                  :key="t.userId"
+                  class="flex items-center justify-between rounded bg-gray-100 px-2 py-1"
+              >
+                <span>{{ t.email }}</span>
+
+              </li>
+            </ul>
+          </div>
+
+          <div>
+            <p class="text-sm font-semibold text-gray-600">
+              Add new teachers
+            </p>
+
+            <input
+                v-model="newTeacherInput"
+                class="mt-2 w-full rounded border p-2"
+                placeholder="teacher1@mail.com, teacher2@mail.com"
+            />
+          </div>
+
+        </div>
       </div>
 
       <div class="mt-6 flex justify-center gap-3">

From fd4da9599c7ddea4c691d923c68040bf438cd57d Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Thu, 23 Apr 2026 14:31:13 +0200
Subject: [PATCH 06/66] add task page with creation, deleting and editing

---
 src/classrooms/pages/ClassroomTasks.vue  | 273 ++++++++++++++++++++++-
 src/classrooms/store/classrooms.store.ts |   3 +-
 src/stops/api/stops.api.ts               |  47 ++++
 3 files changed, 321 insertions(+), 2 deletions(-)

diff --git a/src/classrooms/pages/ClassroomTasks.vue b/src/classrooms/pages/ClassroomTasks.vue
index eb942eff..e7d93b08 100644
--- a/src/classrooms/pages/ClassroomTasks.vue
+++ b/src/classrooms/pages/ClassroomTasks.vue
@@ -1,3 +1,274 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue"
+import { useRoute } from "vue-router"
+import {
+  requestTasksForStop,
+  requestTask,
+  requestCreateTask,
+  requestUpdateTask,
+  requestDeleteTask,
+  type TaskResponse,
+} from "@/stops/api/stops.api"
+import { useAuthStore } from "@/auth/model/auth.store"
+
+const route = useRoute()
+const authStore = useAuthStore()
+
+const classroomId = Number(route.params.classroomId)
+
+const tasks = ref<TaskResponse[]>([])
+const isLoading = ref(false)
+const error = ref<string | null>(null)
+
+const isEditing = ref(false)
+const editingTaskId = ref<number | null>(null)
+
+/**
+ * Safe editable form model (NEVER null in fields while editing)
+ */
+type TaskForm = Omit<TaskResponse, "introText"> & {
+  introText: { nb: string; en: string }
+}
+
+const form = ref<TaskForm | null>(null)
+
+const isTeacher = computed(() => authStore.portalType === "TEACHER")
+
+/**
+ * Load tasks
+ */
+async function loadTasks() {
+  if (!authStore.authorizationHeader) return
+
+  isLoading.value = true
+  error.value = null
+
+  try {
+    const stopId = 1
+
+    const summaries = await requestTasksForStop(
+        classroomId,
+        stopId,
+        authStore.authorizationHeader,
+    )
+
+    tasks.value = await Promise.all(
+        summaries.map((t) =>
+            requestTask(classroomId, t.id, authStore.authorizationHeader!),
+        ),
+    )
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : "Failed loading tasks"
+  } finally {
+    isLoading.value = false
+  }
+}
+
+onMounted(loadTasks)
+
+/**
+ * CREATE
+ */
+function startCreate() {
+  isEditing.value = true
+  editingTaskId.value = null
+
+  form.value = {
+    id: 0,
+    classroomId,
+    stopId: 1,
+    createdByTeacherId: 0,
+    title: { nb: "", en: "" },
+    introText: { nb: "", en: "" },
+    difficultyLevel: 1,
+    taskType: "GENERIC",
+    passingRule: "ALL_CORRECT",
+    passingScore: null,
+    maxScore: 1,
+    published: false,
+    items: [],
+  }
+}
+
+/**
+ * EDIT (safe deep copy)
+ */
+function startEdit(task: TaskResponse) {
+  isEditing.value = true
+  editingTaskId.value = task.id
+
+  form.value = {
+    ...JSON.parse(JSON.stringify(task)),
+    introText: task.introText ?? { nb: "", en: "" },
+  }
+}
+
+/**
+ * SAVE
+ */
+async function saveTask() {
+  if (!authStore.authorizationHeader || !form.value) return
+
+  try {
+    const payload = {
+      ...form.value,
+      introText:
+          form.value.introText.en || form.value.introText.nb
+              ? form.value.introText
+              : null,
+    }
+
+    if (editingTaskId.value) {
+      await requestUpdateTask(
+          classroomId,
+          editingTaskId.value,
+          payload,
+          authStore.authorizationHeader,
+      )
+    } else {
+      await requestCreateTask(
+          classroomId,
+          payload,
+          authStore.authorizationHeader,
+      )
+    }
+
+    await loadTasks()
+    cancelEdit()
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : "Save failed"
+  }
+}
+
+/**
+ * DELETE
+ */
+async function deleteTask(taskId: number) {
+  if (!authStore.authorizationHeader) return
+
+  await requestDeleteTask(
+      classroomId,
+      taskId,
+      authStore.authorizationHeader,
+  )
+
+  tasks.value = tasks.value.filter((t) => t.id !== taskId)
+}
+
+/**
+ * CANCEL
+ */
+function cancelEdit() {
+  isEditing.value = false
+  editingTaskId.value = null
+  form.value = null
+}
+</script>
+
 <template>
-  Tasks
+  <div class="mx-auto max-w-6xl p-6">
+
+    <h1 class="text-2xl font-bold mb-4">
+      Classroom Tasks
+    </h1>
+
+    <button
+        v-if="isTeacher"
+        class="mb-4 rounded bg-blue-600 px-4 py-2 text-white"
+        @click="startCreate"
+    >
+      + Create Task
+    </button>
+
+    <div v-if="isLoading">Loading...</div>
+    <div v-if="error" class="text-red-500">{{ error }}</div>
+
+    <!-- LIST -->
+    <div v-if="!isEditing">
+      <div
+          v-for="task in tasks"
+          :key="task.id"
+          class="mb-3 rounded border p-3 flex justify-between"
+      >
+        <div>
+          <div class="font-bold">
+            {{ task.title.en }}
+          </div>
+
+          <div class="text-sm text-gray-500">
+            {{ task.taskType }} · Difficulty {{ task.difficultyLevel }}
+          </div>
+
+          <div class="text-xs">
+            Published: {{ task.published }}
+          </div>
+        </div>
+
+        <div v-if="isTeacher" class="space-x-2">
+          <button
+              class="px-2 py-1 bg-gray-200 rounded"
+              @click="startEdit(task)"
+          >
+            Edit
+          </button>
+
+          <button
+              class="px-2 py-1 bg-red-500 text-white rounded"
+              @click="deleteTask(task.id)"
+          >
+            Delete
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- EDIT / CREATE FORM -->
+    <div v-else-if="form" class="border p-4 rounded">
+
+      <h2 class="font-bold mb-2">
+        {{ editingTaskId ? "Edit Task" : "Create Task" }}
+      </h2>
+
+      <input
+          v-model="form.title.en"
+          placeholder="Title (EN)"
+          class="border p-2 w-full mb-2"
+      />
+
+      <input
+          v-model="form.title.nb"
+          placeholder="Title (NB)"
+          class="border p-2 w-full mb-2"
+      />
+
+      <textarea
+          v-model="form.introText.en"
+          placeholder="Intro (EN)"
+          class="border p-2 w-full mb-2"
+      />
+
+      <textarea
+          v-model="form.introText.nb"
+          placeholder="Intro (NB)"
+          class="border p-2 w-full mb-2"
+      />
+
+      <div class="flex gap-2">
+        <button
+            class="bg-green-600 text-white px-4 py-2 rounded"
+            @click="saveTask"
+        >
+          Save
+        </button>
+
+        <button
+            class="bg-gray-400 text-white px-4 py-2 rounded"
+            @click="cancelEdit"
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+
+  </div>
 </template>
\ No newline at end of file
diff --git a/src/classrooms/store/classrooms.store.ts b/src/classrooms/store/classrooms.store.ts
index d971d171..79c0874f 100644
--- a/src/classrooms/store/classrooms.store.ts
+++ b/src/classrooms/store/classrooms.store.ts
@@ -10,7 +10,8 @@ import {
   requestGetClassroomById,
   type updateClassroomRequest,
   type ClassroomDetailResponse,
-  requestUpdateClassroom, requestApprovePupil,
+  requestUpdateClassroom,
+  requestApprovePupil,
 } from "@/classrooms/api/classrooms.api.ts";
 
 export const useClassroomsStore = defineStore("classrooms", () => {
diff --git a/src/stops/api/stops.api.ts b/src/stops/api/stops.api.ts
index a6635f80..42462010 100644
--- a/src/stops/api/stops.api.ts
+++ b/src/stops/api/stops.api.ts
@@ -185,3 +185,50 @@ export function requestSubmitStopAnswers(
     },
   )
 }
+
+export function requestCreateTask(
+    classroomId: number,
+    payload: unknown,
+    authorizationHeader: string,
+) {
+  return fetchJson<TaskResponse>(
+      `${CLASSROOMS_BASE}/${classroomId}/tasks`,
+      authorizationHeader,
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+      },
+  )
+}
+
+export function requestUpdateTask(
+    classroomId: number,
+    taskId: number,
+    payload: unknown,
+    authorizationHeader: string,
+) {
+  return fetchJson<TaskResponse>(
+      `${CLASSROOMS_BASE}/${classroomId}/tasks/${taskId}`,
+      authorizationHeader,
+      {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+      },
+  )
+}
+
+export function requestDeleteTask(
+    classroomId: number,
+    taskId: number,
+    authorizationHeader: string,
+) {
+  return fetchJson<void>(
+      `${CLASSROOMS_BASE}/${classroomId}/tasks/${taskId}`,
+      authorizationHeader,
+      {
+        method: "DELETE",
+      },
+  )
+}

From 32f837c85045d4b948d89c3e7670bf1654fb603a Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Thu, 23 Apr 2026 14:32:05 +0200
Subject: [PATCH 07/66] remove comments

---
 src/classrooms/pages/ClassroomTasks.vue | 23 -----------------------
 1 file changed, 23 deletions(-)

diff --git a/src/classrooms/pages/ClassroomTasks.vue b/src/classrooms/pages/ClassroomTasks.vue
index e7d93b08..b295b260 100644
--- a/src/classrooms/pages/ClassroomTasks.vue
+++ b/src/classrooms/pages/ClassroomTasks.vue
@@ -23,9 +23,6 @@ const error = ref<string | null>(null)
 const isEditing = ref(false)
 const editingTaskId = ref<number | null>(null)
 
-/**
- * Safe editable form model (NEVER null in fields while editing)
- */
 type TaskForm = Omit<TaskResponse, "introText"> & {
   introText: { nb: string; en: string }
 }
@@ -34,9 +31,6 @@ const form = ref<TaskForm | null>(null)
 
 const isTeacher = computed(() => authStore.portalType === "TEACHER")
 
-/**
- * Load tasks
- */
 async function loadTasks() {
   if (!authStore.authorizationHeader) return
 
@@ -66,9 +60,6 @@ async function loadTasks() {
 
 onMounted(loadTasks)
 
-/**
- * CREATE
- */
 function startCreate() {
   isEditing.value = true
   editingTaskId.value = null
@@ -90,9 +81,6 @@ function startCreate() {
   }
 }
 
-/**
- * EDIT (safe deep copy)
- */
 function startEdit(task: TaskResponse) {
   isEditing.value = true
   editingTaskId.value = task.id
@@ -103,9 +91,6 @@ function startEdit(task: TaskResponse) {
   }
 }
 
-/**
- * SAVE
- */
 async function saveTask() {
   if (!authStore.authorizationHeader || !form.value) return
 
@@ -140,9 +125,6 @@ async function saveTask() {
   }
 }
 
-/**
- * DELETE
- */
 async function deleteTask(taskId: number) {
   if (!authStore.authorizationHeader) return
 
@@ -155,9 +137,6 @@ async function deleteTask(taskId: number) {
   tasks.value = tasks.value.filter((t) => t.id !== taskId)
 }
 
-/**
- * CANCEL
- */
 function cancelEdit() {
   isEditing.value = false
   editingTaskId.value = null
@@ -183,7 +162,6 @@ function cancelEdit() {
     <div v-if="isLoading">Loading...</div>
     <div v-if="error" class="text-red-500">{{ error }}</div>
 
-    <!-- LIST -->
     <div v-if="!isEditing">
       <div
           v-for="task in tasks"
@@ -222,7 +200,6 @@ function cancelEdit() {
       </div>
     </div>
 
-    <!-- EDIT / CREATE FORM -->
     <div v-else-if="form" class="border p-4 rounded">
 
       <h2 class="font-bold mb-2">

From dbfef3ab829a16e61522926fa645643fdf367169 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Fri, 24 Apr 2026 09:59:33 +0200
Subject: [PATCH 08/66] add edit and create task page

---
 src/classrooms/pages/EditClassroomTask.vue |  3 +++
 src/classrooms/pages/NewClassroomTask.vue  |  3 +++
 src/classrooms/routes.ts                   | 12 ++++++++++++
 3 files changed, 18 insertions(+)
 create mode 100644 src/classrooms/pages/EditClassroomTask.vue
 create mode 100644 src/classrooms/pages/NewClassroomTask.vue

diff --git a/src/classrooms/pages/EditClassroomTask.vue b/src/classrooms/pages/EditClassroomTask.vue
new file mode 100644
index 00000000..0d5ad0cc
--- /dev/null
+++ b/src/classrooms/pages/EditClassroomTask.vue
@@ -0,0 +1,3 @@
+<template>
+  Edit task
+</template>
\ No newline at end of file
diff --git a/src/classrooms/pages/NewClassroomTask.vue b/src/classrooms/pages/NewClassroomTask.vue
new file mode 100644
index 00000000..cbf163c0
--- /dev/null
+++ b/src/classrooms/pages/NewClassroomTask.vue
@@ -0,0 +1,3 @@
+<template>
+  New task
+</template>
\ No newline at end of file
diff --git a/src/classrooms/routes.ts b/src/classrooms/routes.ts
index db595a69..ff0e2311 100644
--- a/src/classrooms/routes.ts
+++ b/src/classrooms/routes.ts
@@ -10,6 +10,8 @@ import TeacherPlaytestStopPage from "@/teacher-playtest/pages/TeacherPlaytestSto
 import ClassroomTasks from "@/classrooms/pages/ClassroomTasks.vue";
 import ClassroomNotifications from "@/classrooms/pages/ClassroomNotifications.vue";
 import ClassroomMystery from "@/classrooms/pages/ClassroomMystery.vue";
+import NewClassroomTask from "@/classrooms/pages/NewClassroomTask.vue";
+import EditClassroomTask from "@/classrooms/pages/EditClassroomTask.vue";
 
 export function createClassroomRoutes(prefix: string): RouteRecordRaw[] {
   return [
@@ -52,6 +54,16 @@ export function createClassroomRoutes(prefix: string): RouteRecordRaw[] {
     name: "classroom-tasks",
     component: ClassroomTasks,
   },
+    {
+      path: "classrooms/:classroomId/tasks/new",
+      name: "new-classroom-task",
+      component: NewClassroomTask,
+    },
+    {
+      path: "classroom/:classroomId/tasks/:taskId",
+      name: "edit-classroom-task",
+      component: EditClassroomTask,
+    },
   {
     path: "classrooms/:classroomId/playtest",
     name: "teacher-playtest-map",

From 77b7fc9c56b670897423daeb3a5ae8317d302698 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Fri, 24 Apr 2026 11:10:51 +0200
Subject: [PATCH 09/66] add pending page

---
 src/app/router/index.ts                  | 15 ++++--
 src/auth/model/auth.types.ts             |  1 +
 src/classrooms/pages/PendingApproval.vue | 66 ++++++++++++++++++++++++
 src/classrooms/routes.ts                 | 10 ++++
 4 files changed, 87 insertions(+), 5 deletions(-)
 create mode 100644 src/classrooms/pages/PendingApproval.vue

diff --git a/src/app/router/index.ts b/src/app/router/index.ts
index 53fbd932..1a0c6365 100644
--- a/src/app/router/index.ts
+++ b/src/app/router/index.ts
@@ -101,17 +101,21 @@ export function createAppRouter(
       const user = authStore.user;
       if (!user) return true;
 
+      const status = user.pupilProfile?.membershipStatus;
       const classroomId = user.pupilProfile?.currentClassroomId;
       const isJoinPage = to.name === "pupil-join-classroom";
 
-      const hasClassroom =
-          classroomId !== null && classroomId !== undefined;
-
-      if (!hasClassroom && !isJoinPage) {
+      if (!classroomId && !isJoinPage) {
         return { name: "pupil-join-classroom" };
       }
 
-      if (hasClassroom && isJoinPage) {
+      if (status === "PENDING") {
+        if (to.name !== "pupil-pending-approval") {
+          return { name: "pupil-pending-approval" };
+        }
+      }
+
+      if (status === "ACTIVE" && isJoinPage) {
         return { name: "pupil-home" };
       }
 
@@ -120,6 +124,7 @@ export function createAppRouter(
         portalType: authStore.portalType,
         pupilProfile: authStore.user?.pupilProfile,
         classroomId: authStore.user?.pupilProfile?.currentClassroomId,
+        status: authStore.user?.pupilProfile?.membershipStatus,
       });
     }
 
diff --git a/src/auth/model/auth.types.ts b/src/auth/model/auth.types.ts
index 09486b16..7ed06e8b 100644
--- a/src/auth/model/auth.types.ts
+++ b/src/auth/model/auth.types.ts
@@ -32,6 +32,7 @@ export interface PupilProfile {
   totalXp: number;
   currentLevel: number;
   currentClassroomId: number | null;
+  membershipStatus: string | null;
 }
 
 export interface TeacherProfile {
diff --git a/src/classrooms/pages/PendingApproval.vue b/src/classrooms/pages/PendingApproval.vue
new file mode 100644
index 00000000..a5e94e5e
--- /dev/null
+++ b/src/classrooms/pages/PendingApproval.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, watch } from "vue";
+import { useAuthStore } from "@/auth/model/auth.store";
+import { useRouter } from "vue-router";
+import LogoutButton from "@/shared/components/LogoutButton.vue";
+
+let interval: number;
+
+const authStore = useAuthStore();
+const router = useRouter();
+
+const status = computed(
+    () => authStore.user?.pupilProfile?.membershipStatus
+);
+
+onMounted(() => {
+  interval = window.setInterval(async () => {
+    await authStore.fetchCurrentUserProfile();
+  }, 3000);
+});
+
+onUnmounted(() => {
+  clearInterval(interval);
+});
+
+watch(status, (newStatus) => {
+  if (newStatus === "ACTIVE") {
+    router.push({ name: "pupil-home" });
+  }
+});
+</script>
+
+<template>
+  <main class="flex min-h-screen items-center justify-center px-6">
+    <div class="w-full max-w-md rounded-xl p-8 shadow-lg backdrop-blur-md text-center">
+
+      <h1 class="text-2xl font-bold text-gray-800">
+        Waiting for approval
+      </h1>
+
+      <p class="mt-2 text-sm text-gray-600">
+        Your request to join the classroom is pending teacher approval.
+      </p>
+
+      <div class="mt-6 space-y-3">
+
+        <div class="rounded-lg border border-yellow-200 bg-yellow-50 px-4 py-3 text-sm text-yellow-800">
+          Status:
+          <span class="font-semibold">
+            {{ status ?? "UNKNOWN" }}
+          </span>
+        </div>
+
+        <button
+            class="inline-flex w-full items-center justify-center rounded-full border-2 border-[#7f6647] bg-white px-4 py-3 font-(--font-display-2) text-[0.95rem] leading-none text-[#5e4428] shadow-[0_4px_10px_rgba(94,68,40,0.12),inset_0_-2px_0_rgba(179,143,94,0.35)] transition duration-150 hover:-translate-y-px hover:border-[#6b5270] hover:shadow-[0_8px_16px_rgba(94,68,40,0.16),inset_0_-2px_0_rgba(179,143,94,0.35)] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#1a4a7a]"
+            @click="authStore.fetchCurrentUserProfile()"
+        >
+          Refresh status
+        </button>
+
+        <LogoutButton />
+
+      </div>
+    </div>
+  </main>
+</template>
\ No newline at end of file
diff --git a/src/classrooms/routes.ts b/src/classrooms/routes.ts
index ff0e2311..791195b2 100644
--- a/src/classrooms/routes.ts
+++ b/src/classrooms/routes.ts
@@ -12,6 +12,7 @@ import ClassroomNotifications from "@/classrooms/pages/ClassroomNotifications.vu
 import ClassroomMystery from "@/classrooms/pages/ClassroomMystery.vue";
 import NewClassroomTask from "@/classrooms/pages/NewClassroomTask.vue";
 import EditClassroomTask from "@/classrooms/pages/EditClassroomTask.vue";
+import PendingApproval from "@/classrooms/pages/PendingApproval.vue";
 
 export function createClassroomRoutes(prefix: string): RouteRecordRaw[] {
   return [
@@ -34,6 +35,15 @@ export function createClassroomRoutes(prefix: string): RouteRecordRaw[] {
         hideHomeButton: true,
       }
     },
+    {
+      path: "pending-approval",
+      name: `${prefix}-pending-approval`,
+      component: PendingApproval,
+      meta: {
+        hideBackButton: true,
+        hideHomeButton: true,
+      }
+    },
     {
       path: "classroom-details/:classroomId",
       name: `${prefix}-classroom-details`,

From 4d58f07bd78ab0a37e47723269bb0ad41a88fb27 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Fri, 24 Apr 2026 11:13:48 +0200
Subject: [PATCH 10/66] move store to model, update classroom table

---
 .../_tests_/classrooms.store.spec.ts          |  2 +-
 src/classrooms/api/classrooms.api.ts          |  3 +
 src/classrooms/components/ClassroomTable.vue  | 56 +++++++++++--------
 src/classrooms/components/PupilTable.vue      |  2 +-
 .../{store => model}/classrooms.store.ts      |  2 +-
 src/classrooms/pages/ClassroomDetails.vue     |  2 +-
 src/classrooms/pages/JoinClassroom.vue        |  2 +-
 src/classrooms/pages/NewClassroom.vue         |  2 +-
 8 files changed, 42 insertions(+), 29 deletions(-)
 rename src/classrooms/{store => model}/classrooms.store.ts (98%)

diff --git a/src/classrooms/_tests_/classrooms.store.spec.ts b/src/classrooms/_tests_/classrooms.store.spec.ts
index 4d3fb17d..28da7740 100644
--- a/src/classrooms/_tests_/classrooms.store.spec.ts
+++ b/src/classrooms/_tests_/classrooms.store.spec.ts
@@ -1,7 +1,7 @@
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { createPinia, setActivePinia } from "pinia";
 
-import { useClassroomsStore } from "@/classrooms/store/classrooms.store.ts";
+import { useClassroomsStore } from "@/classrooms/model/classrooms.store.ts";
 import { useAuthStore } from "@/auth/model/auth.store.ts";
 
 import * as api from "@/classrooms/api/classrooms.api";
diff --git a/src/classrooms/api/classrooms.api.ts b/src/classrooms/api/classrooms.api.ts
index 842840fe..c82b1cdb 100644
--- a/src/classrooms/api/classrooms.api.ts
+++ b/src/classrooms/api/classrooms.api.ts
@@ -15,6 +15,9 @@ export type ClassroomResponse = {
   description?: string;
   teacherEmails: string[];
   joinCode: string;
+  pupilCount: number,
+  pendingPupilCount: number,
+  teacherCount: number,
 };
 
 export type JoinClassroomRequest = {
diff --git a/src/classrooms/components/ClassroomTable.vue b/src/classrooms/components/ClassroomTable.vue
index 6f31f285..0b610705 100644
--- a/src/classrooms/components/ClassroomTable.vue
+++ b/src/classrooms/components/ClassroomTable.vue
@@ -2,7 +2,7 @@
 import { onMounted } from "vue";
 import { useI18n } from "vue-i18n";
 import { RouterLink } from "vue-router";
-import { useClassroomsStore } from "@/classrooms/store/classrooms.store";
+import { useClassroomsStore } from "@/classrooms/model/classrooms.store.ts";
 
 const { t } = useI18n();
 const store = useClassroomsStore();
@@ -10,39 +10,41 @@ const store = useClassroomsStore();
 onMounted(() => {
   store.fetchClassrooms();
 });
-
 </script>
 
 <template>
-  <div class ="mx-auto max-h-170 w-full max-w-7xl overflow-y-auto bg-white drop-shadow-lg scrollbar-thin">
+  <div class="mx-auto max-h-170 w-full max-w-7xl overflow-y-auto bg-white drop-shadow-lg scrollbar-thin">
 
     <div v-if="store.isLoading" class="p-4 text-gray-500">
       Loading classrooms...
     </div>
 
-    <div v-else-if="store.errorMessage" class="p-4 text red-500">
+    <div v-else-if="store.errorMessage" class="p-4 text-red-500">
       {{ store.errorMessage }}
     </div>
 
-    <table class="min-w-full">
+    <table v-else class="min-w-full">
       <thead class="sticky top-0 z-10 bg-gray-100">
       <tr>
         <th class="px-4 py-2 text-left">
-          {{  t("classroomTable.classroom") }}
+          {{ t("classroomTable.classroom") }}
         </th>
-        <th class="px py-2 text-left">
+
+        <th class="px-4 py-2 text-left">
           {{ t("classroomTable.description") }}
         </th>
+
         <th class="px-4 py-2 text-left">
           {{ t("classroomTable.joinCode") }}
         </th>
-        <!-- NOTE:
-            The following columns were removed because they are not currently available in ClassroomResponse:
-            - pupils count
-            - pending pupils
-            - teachers count
-            - tasks count
-          -->
+
+        <th class="px-4 py-2 text-left">
+          {{ t("classroomTable.pupils") }}
+        </th>
+
+        <th class="px-4 py-2 text-left">
+          {{ t("classroomTable.pending") }}
+        </th>
 
         <th class="px-4 py-2 text-left">
           {{ t("classroomTable.teachers") }}
@@ -59,15 +61,15 @@ onMounted(() => {
           v-for="classroom in store.classrooms"
           :key="classroom.classroomId"
           class="border-b hover:bg-gray-100"
-          >
+      >
         <td class="px-4 py-3">
           <RouterLink
-            class="font-medium hover:underline"
-            :to="{
-            name: 'teacher-classroom-details',
-            params: { classroomId: classroom.classroomId }
-            }"
-            >
+              class="font-medium hover:underline"
+              :to="{
+                name: 'teacher-classroom-details',
+                params: { classroomId: classroom.classroomId }
+              }"
+          >
             {{ classroom.title }}
           </RouterLink>
         </td>
@@ -81,7 +83,15 @@ onMounted(() => {
         </td>
 
         <td class="px-4 py-3">
-          {{ classroom.teacherEmails?.join(", ") || "-" }}
+          {{ classroom.pupilCount }}
+        </td>
+
+        <td class="px-4 py-3">
+          {{ classroom.pendingPupilCount }}
+        </td>
+
+        <td class="px-4 py-3">
+          {{ classroom.teacherCount }}
         </td>
 
         <td class="px-4 py-3 text-right">
@@ -89,7 +99,7 @@ onMounted(() => {
               class="rounded bg-gray-800 px-3 py-1 text-white hover:bg-gray-700"
               :to="{
                 name: 'teacher-classroom-details',
-                params: { classroomId: classroom.classroomId },
+                params: { classroomId: classroom.classroomId }
               }"
           >
             {{ t("classroomTable.open") }}
diff --git a/src/classrooms/components/PupilTable.vue b/src/classrooms/components/PupilTable.vue
index 84f55b54..0e78c7af 100644
--- a/src/classrooms/components/PupilTable.vue
+++ b/src/classrooms/components/PupilTable.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted } from "vue";
 import { RouterLink, useRoute } from "vue-router";
-import { useClassroomsStore } from "@/classrooms/store/classrooms.store";
+import { useClassroomsStore } from "@/classrooms/model/classrooms.store.ts";
 import { useI18n } from "vue-i18n";
 
 const { t } = useI18n();
diff --git a/src/classrooms/store/classrooms.store.ts b/src/classrooms/model/classrooms.store.ts
similarity index 98%
rename from src/classrooms/store/classrooms.store.ts
rename to src/classrooms/model/classrooms.store.ts
index 79c0874f..1081f1f6 100644
--- a/src/classrooms/store/classrooms.store.ts
+++ b/src/classrooms/model/classrooms.store.ts
@@ -1,6 +1,6 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
-import { useAuthStore } from "@/auth/model/auth.store";
+import { useAuthStore } from "@/auth/model/auth.store.ts";
 import {
   requestCreateClassroom,
   requestGetClassrooms,
diff --git a/src/classrooms/pages/ClassroomDetails.vue b/src/classrooms/pages/ClassroomDetails.vue
index a66d455b..a84084dd 100644
--- a/src/classrooms/pages/ClassroomDetails.vue
+++ b/src/classrooms/pages/ClassroomDetails.vue
@@ -3,7 +3,7 @@ import { computed, onMounted, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import ClassroomCard from "@/classrooms/components/ClassroomCard.vue";
 import { useRoute } from "vue-router";
-import { useClassroomsStore } from "@/classrooms/store/classrooms.store";
+import { useClassroomsStore } from "@/classrooms/model/classrooms.store.ts";
 
 const { t } = useI18n();
 const route = useRoute();
diff --git a/src/classrooms/pages/JoinClassroom.vue b/src/classrooms/pages/JoinClassroom.vue
index 1692c3d8..711fbf19 100644
--- a/src/classrooms/pages/JoinClassroom.vue
+++ b/src/classrooms/pages/JoinClassroom.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import {computed, ref, watch} from "vue";
 import { useRouter } from "vue-router";
-import { useClassroomsStore } from "@/classrooms/store/classrooms.store";
+import { useClassroomsStore } from "@/classrooms/model/classrooms.store.ts";
 import {useAuthStore} from "@/auth/model/auth.store.ts";
 import LogoutButton from "@/shared/components/LogoutButton.vue";
 import { useI18n } from "vue-i18n";
diff --git a/src/classrooms/pages/NewClassroom.vue b/src/classrooms/pages/NewClassroom.vue
index 9de238c8..c3f0a19a 100644
--- a/src/classrooms/pages/NewClassroom.vue
+++ b/src/classrooms/pages/NewClassroom.vue
@@ -2,7 +2,7 @@
 import { computed, ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { useAuthStore } from "@/auth/model/auth.store";
-import { useClassroomsStore } from "@/classrooms/store/classrooms.store";
+import { useClassroomsStore } from "@/classrooms/model/classrooms.store.ts";
 import { useI18n } from "vue-i18n";
 
 const router = useRouter();

From c3f1f94dd89f200dd7300e6eaef246c898e0ea7e Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Fri, 24 Apr 2026 11:35:47 +0200
Subject: [PATCH 11/66] add confirmation modal

---
 src/classrooms/components/ConfirmModal.vue | 56 ++++++++++++++++++++++
 src/classrooms/components/PupilTable.vue   | 38 +++++++++++----
 2 files changed, 85 insertions(+), 9 deletions(-)
 create mode 100644 src/classrooms/components/ConfirmModal.vue

diff --git a/src/classrooms/components/ConfirmModal.vue b/src/classrooms/components/ConfirmModal.vue
new file mode 100644
index 00000000..16f80d9d
--- /dev/null
+++ b/src/classrooms/components/ConfirmModal.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+defineProps<{
+  modelValue: boolean;
+  title?: string;
+  message?: string;
+  confirmText?: string;
+  cancelText?: string;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: boolean): void;
+  (e: "confirm"): void;
+}>();
+
+function close() {
+  emit("update:modelValue", false);
+}
+
+function confirm() {
+  emit("confirm");
+  close();
+}
+</script>
+
+<template>
+  <div
+      v-if="modelValue"
+      class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+  >
+    <div class="w-full max-w-md rounded-xl bg-white p-6 shadow-xl">
+      <h2 class="text-xl font-bold text-gray-800">
+        {{ title || "Are you sure?" }}
+      </h2>
+
+      <p class="mt-2 text-gray-600">
+        {{ message || "This action cannot be undone." }}
+      </p>
+
+      <div class="mt-6 flex justify-end gap-3">
+        <button
+            class="rounded bg-gray-300 px-4 py-2 hover:bg-gray-400"
+            @click="close"
+        >
+          {{ cancelText || "Cancel" }}
+        </button>
+
+        <button
+            class="rounded bg-red-600 px-4 py-2 text-white hover:bg-red-500"
+            @click="confirm"
+        >
+          {{ confirmText || "Delete" }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/classrooms/components/PupilTable.vue b/src/classrooms/components/PupilTable.vue
index 0e78c7af..143b9bfc 100644
--- a/src/classrooms/components/PupilTable.vue
+++ b/src/classrooms/components/PupilTable.vue
@@ -1,14 +1,32 @@
 <script setup lang="ts">
-import { computed, onMounted } from "vue";
+import { computed, onMounted, ref } from "vue";
 import { RouterLink, useRoute } from "vue-router";
 import { useClassroomsStore } from "@/classrooms/model/classrooms.store.ts";
 import { useI18n } from "vue-i18n";
+import ConfirmModal from "./ConfirmModal.vue";
 
 const { t } = useI18n();
 const route = useRoute();
 const store = useClassroomsStore();
 const classroomId = Number(route.params.classroomId);
 
+const showRemoveModal = ref(false);
+const selectedPupilId = ref<number | null>(null);
+
+function askRemove(pupilId: number) {
+  selectedPupilId.value = pupilId;
+  showRemoveModal.value = true;
+}
+
+async function confirmRemove() {
+  if (!selectedPupilId.value) return;
+
+  await store.removePupil(classroomId, selectedPupilId.value);
+  await store.fetchClassroomById(classroomId);
+
+  selectedPupilId.value = null;
+}
+
 onMounted(() => {
   store.fetchClassroomById(classroomId);
 });
@@ -39,12 +57,6 @@ const sortedPending = computed(() =>
 
 // NOTE:
 // score / xp / level / avatar are not currently available in ClassroomDetailResponse.
-// They are kept as placeholders
-
-async function removePupil(pupilId: number) {
-  await store.removePupil(classroomId, pupilId);
-  await store.fetchClassroomById(classroomId);
-}
 
 async function approvePupil(pupilId: number) {
   await store.approvePupil(classroomId, pupilId);
@@ -96,7 +108,7 @@ async function approvePupil(pupilId: number) {
               <button
                   class="rounded bg-red-600 px-3 py-1 text-white hover:bg-red-700 disabled:opacity-50"
                   :disabled="store.isLoading"
-                  @click="removePupil(pupil.userId)"
+                  @click="askRemove(pupil.userId)"
               >
                 {{ t("pupilTable.remove") }}
               </button>
@@ -149,7 +161,7 @@ async function approvePupil(pupilId: number) {
               <button
                   class="rounded bg-red-600 px-3 py-1 text-white hover:bg-red-700 disabled:opacity-50"
                   :disabled="store.isLoading"
-                  @click="removePupil(pupil.userId)"
+                  @click="askRemove(pupil.userId)"
               >
                 {{ t("pupilTable.remove") }}
               </button>
@@ -165,5 +177,13 @@ async function approvePupil(pupilId: number) {
         </table>
       </div>
     </div>
+    <ConfirmModal
+        v-model="showRemoveModal"
+        title="Remove pupil"
+        message="Are you sure you want to remove this pupil from the classroom?"
+        confirmText="Remove"
+        cancelText="Cancel"
+        @confirm="confirmRemove"
+    />
   </div>
 </template>
\ No newline at end of file

From bacb60c0011164d588e60d6421a0f5f200b26062 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Fri, 24 Apr 2026 11:36:02 +0200
Subject: [PATCH 12/66] add option to delete classroom

---
 src/classrooms/api/classrooms.api.ts      | 15 ++++++++++
 src/classrooms/model/classrooms.store.ts  | 31 ++++++++++++++++++++-
 src/classrooms/pages/ClassroomDetails.vue | 34 ++++++++++++++++++++++-
 3 files changed, 78 insertions(+), 2 deletions(-)

diff --git a/src/classrooms/api/classrooms.api.ts b/src/classrooms/api/classrooms.api.ts
index c82b1cdb..0cf1eb9a 100644
--- a/src/classrooms/api/classrooms.api.ts
+++ b/src/classrooms/api/classrooms.api.ts
@@ -147,3 +147,18 @@ export async function requestApprovePupil(
       }
   );
 }
+
+export async function requestDeleteClassroom(
+    autheader: string,
+    classroomId: number,
+) {
+  return fetchJson(
+      `${CLASSROOMS_API_BASE}/${classroomId}`,
+      {
+        method: "DELETE",
+        headers: {
+          Authorization: autheader,
+        },
+      }
+  )
+}
diff --git a/src/classrooms/model/classrooms.store.ts b/src/classrooms/model/classrooms.store.ts
index 1081f1f6..64ed67e2 100644
--- a/src/classrooms/model/classrooms.store.ts
+++ b/src/classrooms/model/classrooms.store.ts
@@ -11,7 +11,7 @@ import {
   type updateClassroomRequest,
   type ClassroomDetailResponse,
   requestUpdateClassroom,
-  requestApprovePupil,
+  requestApprovePupil, requestDeleteClassroom,
 } from "@/classrooms/api/classrooms.api.ts";
 
 export const useClassroomsStore = defineStore("classrooms", () => {
@@ -224,6 +224,34 @@ export const useClassroomsStore = defineStore("classrooms", () => {
     }
   }
 
+  async function deleteClassroom(classroomId: number) {
+    if (!authStore.authorizationHeader) {
+      throw new Error("Not authenticated");
+    }
+
+    isLoading.value = true;
+    errorMessage.value = null;
+
+    try {
+      await requestDeleteClassroom(
+          authStore.authorizationHeader,
+          classroomId,
+      );
+
+      classrooms.value = classrooms.value.filter(
+          (c) => c.classroomId !== classroomId
+      );
+      if (selectedClassroom.value?.classroomId === classroomId) {
+        selectedClassroom.value = null;
+      }
+    } catch (error) {
+      errorMessage.value = (error as Error).message;
+      throw error;
+    } finally {
+      isLoading.value = false;
+    }
+  }
+
   return {
     classrooms,
     isLoading,
@@ -237,5 +265,6 @@ export const useClassroomsStore = defineStore("classrooms", () => {
     updateClassroom,
     removePupil,
     approvePupil,
+    deleteClassroom,
   };
 });
diff --git a/src/classrooms/pages/ClassroomDetails.vue b/src/classrooms/pages/ClassroomDetails.vue
index a84084dd..f3adf72b 100644
--- a/src/classrooms/pages/ClassroomDetails.vue
+++ b/src/classrooms/pages/ClassroomDetails.vue
@@ -2,16 +2,32 @@
 import { computed, onMounted, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import ClassroomCard from "@/classrooms/components/ClassroomCard.vue";
-import { useRoute } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 import { useClassroomsStore } from "@/classrooms/model/classrooms.store.ts";
+import ConfirmModal from "@/classrooms/components/ConfirmModal.vue";
 
 const { t } = useI18n();
 const route = useRoute();
+const router = useRouter();
 const classroomsStore = useClassroomsStore();
 
 const classroomId = computed(() => Number(route.params.classroomId));
 const classroom = computed(() => classroomsStore.selectedClassroom);
 
+const showDeleteModal = ref(false);
+
+function askDelete() {
+  showDeleteModal.value = true;
+}
+
+async function confirmDelete() {
+  if (!classroom.value) return;
+
+  await classroomsStore.deleteClassroom(classroom.value.classroomId);
+
+  router.push({ name: "teacher-classrooms" });
+}
+
 onMounted(() => {
   console.log("CLASSROOM:", classroom.value);
   if (Number.isFinite(classroomId.value)) {
@@ -185,6 +201,14 @@ async function saveEdit() {
           Edit
         </button>
 
+        <button
+          v-if="!isEditing"
+          class="rounded bg-red-600 px-4 py-2 text-white hover:bg-red-500"
+        @click="askDelete"
+        >
+        Delete classroom
+        </button>
+
         <template v-else>
           <button
               class="rounded bg-green-600 px-4 py-2 text-white hover:bg-green-500 disabled:opacity-50"
@@ -235,5 +259,13 @@ async function saveEdit() {
           :to="{ name: 'classroom-notifications', params: { classroomId } }"
       />
     </div>
+    <ConfirmModal
+        v-model="showDeleteModal"
+        title="Delete classroom"
+        message="Are you sure you want to delete this classroom? All pupils and data will be removed."
+        confirmText="Delete"
+        cancelText="Cancel"
+        @confirm="confirmDelete"
+    />
   </main>
 </template>
\ No newline at end of file

From b2134c7cf906256dfe89aad27ee2d70d8ffe8fda Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Fri, 24 Apr 2026 12:49:07 +0200
Subject: [PATCH 13/66] remove +

---
 src/classrooms/pages/ClassroomTasks.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/classrooms/pages/ClassroomTasks.vue b/src/classrooms/pages/ClassroomTasks.vue
index b295b260..11efc5ee 100644
--- a/src/classrooms/pages/ClassroomTasks.vue
+++ b/src/classrooms/pages/ClassroomTasks.vue
@@ -156,7 +156,7 @@ function cancelEdit() {
         class="mb-4 rounded bg-blue-600 px-4 py-2 text-white"
         @click="startCreate"
     >
-      + Create Task
+      Create Task
     </button>
 
     <div v-if="isLoading">Loading...</div>

From eb8f3be75f1f69aa568f24612e77ff14532b76c0 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Fri, 24 Apr 2026 13:26:12 +0200
Subject: [PATCH 14/66] i18n

---
 src/classrooms/components/ConfirmModal.vue | 12 ++++++++----
 src/classrooms/components/PupilTable.vue   |  8 ++++----
 src/classrooms/pages/ClassroomDetails.vue  | 11 +++++------
 src/classrooms/pages/PendingApproval.vue   |  8 +++++---
 src/locales/en.ts                          | 22 ++++++++++++++++++++++
 src/locales/nb.ts                          | 22 ++++++++++++++++++++++
 6 files changed, 66 insertions(+), 17 deletions(-)

diff --git a/src/classrooms/components/ConfirmModal.vue b/src/classrooms/components/ConfirmModal.vue
index 16f80d9d..5026ade4 100644
--- a/src/classrooms/components/ConfirmModal.vue
+++ b/src/classrooms/components/ConfirmModal.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+
 defineProps<{
   modelValue: boolean;
   title?: string;
@@ -29,11 +33,11 @@ function confirm() {
   >
     <div class="w-full max-w-md rounded-xl bg-white p-6 shadow-xl">
       <h2 class="text-xl font-bold text-gray-800">
-        {{ title || "Are you sure?" }}
+        {{ title || t("confirmModal.title") }}
       </h2>
 
       <p class="mt-2 text-gray-600">
-        {{ message || "This action cannot be undone." }}
+        {{ message || t("confirmModal.message") }}
       </p>
 
       <div class="mt-6 flex justify-end gap-3">
@@ -41,14 +45,14 @@ function confirm() {
             class="rounded bg-gray-300 px-4 py-2 hover:bg-gray-400"
             @click="close"
         >
-          {{ cancelText || "Cancel" }}
+          {{ cancelText || t("confirmModal.cancel") }}
         </button>
 
         <button
             class="rounded bg-red-600 px-4 py-2 text-white hover:bg-red-500"
             @click="confirm"
         >
-          {{ confirmText || "Delete" }}
+          {{ confirmText || t("confirmModal.delete") }}
         </button>
       </div>
     </div>
diff --git a/src/classrooms/components/PupilTable.vue b/src/classrooms/components/PupilTable.vue
index 143b9bfc..b6db3ae9 100644
--- a/src/classrooms/components/PupilTable.vue
+++ b/src/classrooms/components/PupilTable.vue
@@ -179,10 +179,10 @@ async function approvePupil(pupilId: number) {
     </div>
     <ConfirmModal
         v-model="showRemoveModal"
-        title="Remove pupil"
-        message="Are you sure you want to remove this pupil from the classroom?"
-        confirmText="Remove"
-        cancelText="Cancel"
+        title="t('pupilTable.confirm')"
+        message="t('pupilTable.message')"
+        confirmText="t('pupilTable.confirm')"
+        cancelText="t('pupilTable.cancel')"
         @confirm="confirmRemove"
     />
   </div>
diff --git a/src/classrooms/pages/ClassroomDetails.vue b/src/classrooms/pages/ClassroomDetails.vue
index f3adf72b..6398b105 100644
--- a/src/classrooms/pages/ClassroomDetails.vue
+++ b/src/classrooms/pages/ClassroomDetails.vue
@@ -80,7 +80,7 @@ async function saveEdit() {
   }
 
   if (!editForm.value.title.trim()) {
-    alert("Title is required");
+    alert(t("classroomDetails.titlealert"));
     return;
   }
 
@@ -104,7 +104,7 @@ async function saveEdit() {
     isEditing.value = false;
   } catch (e) {
     console.error(e);
-    alert("Failed to update classroom");
+    alert(t("classroomDetails.failalert"));
   }
 }
 </script>
@@ -261,10 +261,9 @@ async function saveEdit() {
     </div>
     <ConfirmModal
         v-model="showDeleteModal"
-        title="Delete classroom"
-        message="Are you sure you want to delete this classroom? All pupils and data will be removed."
-        confirmText="Delete"
-        cancelText="Cancel"
+        title="t('classroomDetails.cancel')"
+        message="t('classroomDetails.confirmmessage')"
+        cancelText="t('classroomDetails.cancel')"
         @confirm="confirmDelete"
     />
   </main>
diff --git a/src/classrooms/pages/PendingApproval.vue b/src/classrooms/pages/PendingApproval.vue
index a5e94e5e..671dceeb 100644
--- a/src/classrooms/pages/PendingApproval.vue
+++ b/src/classrooms/pages/PendingApproval.vue
@@ -3,7 +3,9 @@ import { computed, onMounted, onUnmounted, watch } from "vue";
 import { useAuthStore } from "@/auth/model/auth.store";
 import { useRouter } from "vue-router";
 import LogoutButton from "@/shared/components/LogoutButton.vue";
+import { useI18n } from "vue-i18n";
 
+const { t } = useI18n();
 let interval: number;
 
 const authStore = useAuthStore();
@@ -35,11 +37,11 @@ watch(status, (newStatus) => {
     <div class="w-full max-w-md rounded-xl p-8 shadow-lg backdrop-blur-md text-center">
 
       <h1 class="text-2xl font-bold text-gray-800">
-        Waiting for approval
+        {{ t("pendingApproval.waiting") }}
       </h1>
 
       <p class="mt-2 text-sm text-gray-600">
-        Your request to join the classroom is pending teacher approval.
+        {{ t("pendingApproval.request") }}
       </p>
 
       <div class="mt-6 space-y-3">
@@ -55,7 +57,7 @@ watch(status, (newStatus) => {
             class="inline-flex w-full items-center justify-center rounded-full border-2 border-[#7f6647] bg-white px-4 py-3 font-(--font-display-2) text-[0.95rem] leading-none text-[#5e4428] shadow-[0_4px_10px_rgba(94,68,40,0.12),inset_0_-2px_0_rgba(179,143,94,0.35)] transition duration-150 hover:-translate-y-px hover:border-[#6b5270] hover:shadow-[0_8px_16px_rgba(94,68,40,0.16),inset_0_-2px_0_rgba(179,143,94,0.35)] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#1a4a7a]"
             @click="authStore.fetchCurrentUserProfile()"
         >
-          Refresh status
+          {{ t("pendingApproval.refresh") }}
         </button>
 
         <LogoutButton />
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 455a4492..a6947495 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -414,9 +414,31 @@ export const en = {
   },
   classroomDetails: {
     label: "Classroom",
+    titlealert: "Title is required",
+    failalert: "Failed to update classroom",
+    confirmmessage: "Are you sure you want to delete the classroom? All pupils and data will be removed.",
+    save: "Save",
+    cancel: "Cancel",
+    deleteclass: "Delete classroom",
+    edit: "Edit",
+    addteachers: "Add new teachers",
+    pendingApproval: {
+      refresh: "Refresh status",
+      waiting: "Waiting for approval.",
+      request: "Your request to join the classroom is awaiting teacher approval.",
+    },
     pupilOverview: {
       title: "Pupils",
       description: "Track progress and open pupil profiles.",
+      confirm: "Remove pupil",
+      message: "Are you sure you want to remove this pupil from the classroom?",
+      cancel: "Cancel",
+    },
+    confirmModal: {
+      cancel: "Cancel",
+      confirm: "Delete",
+      title: "Are you sure?",
+      message: "This action cannot be undone."
     },
     taskOverview: {
       title: "Tasks",
diff --git a/src/locales/nb.ts b/src/locales/nb.ts
index 9cb06e6f..bb45d555 100644
--- a/src/locales/nb.ts
+++ b/src/locales/nb.ts
@@ -414,9 +414,31 @@ export const nb = {
   },
   classroomDetails: {
     label: "Klasserom",
+    titlealert: "Klasserommet må ha tittel.",
+    failalert: "Kunne ikke oppdatere klasserommet.",
+    confirmmessage: "Er du sikker på at du vil slette kalsseromet? Alle elever og data vil bli fjernet.",
+    save: "Lagre",
+    cancel: "Avbryt",
+    deleteclass: "Slett klasserom",
+    edit: "Endre",
+    addteachers: "Legg til lærere",
+    pendingApproval: {
+      refresh: "Oppdater status",
+      waiting: "Venter på godkjenning.",
+      request: "Din forespørsel på å bli med i klasserommet avventer godkjenning fra lærer.",
+    },
     pupilOverview: {
       title: "Elever",
       description: "Følg progresjon og åpne elevprofiler.",
+      confirm: "Fjern elev",
+      message: "Er du sikker på at du vil fjerne eleven fra klasseromet?",
+      cancel: "Avbryt",
+    },
+    confirmModal: {
+      cancel: "Avbryt",
+      confirm: "Fortsett",
+      title: "Er du sikker?",
+      message: "Denne handlingen kan ikke angres."
     },
     taskOverview: {
       title: "Oppgaver",

From 0924f134546f5bc8b4b2d06a897bf7371f34298c Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Fri, 24 Apr 2026 13:43:47 +0200
Subject: [PATCH 15/66] i18n

---
 src/classrooms/components/ConfirmModal.vue |  2 +-
 src/classrooms/components/PupilTable.vue   |  8 ++++----
 src/classrooms/pages/ClassroomDetails.vue  | 19 ++++++++++---------
 src/locales/en.ts                          |  1 +
 src/locales/nb.ts                          |  1 +
 5 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/classrooms/components/ConfirmModal.vue b/src/classrooms/components/ConfirmModal.vue
index 5026ade4..4ac1304b 100644
--- a/src/classrooms/components/ConfirmModal.vue
+++ b/src/classrooms/components/ConfirmModal.vue
@@ -52,7 +52,7 @@ function confirm() {
             class="rounded bg-red-600 px-4 py-2 text-white hover:bg-red-500"
             @click="confirm"
         >
-          {{ confirmText || t("confirmModal.delete") }}
+          {{ confirmText || t("confirmModal.confirm") }}
         </button>
       </div>
     </div>
diff --git a/src/classrooms/components/PupilTable.vue b/src/classrooms/components/PupilTable.vue
index b6db3ae9..4dddce1c 100644
--- a/src/classrooms/components/PupilTable.vue
+++ b/src/classrooms/components/PupilTable.vue
@@ -179,10 +179,10 @@ async function approvePupil(pupilId: number) {
     </div>
     <ConfirmModal
         v-model="showRemoveModal"
-        title="t('pupilTable.confirm')"
-        message="t('pupilTable.message')"
-        confirmText="t('pupilTable.confirm')"
-        cancelText="t('pupilTable.cancel')"
+        :title="t('pupilTable.confirm')"
+        :message="t('pupilTable.message')"
+        :confirmText="t('pupilTable.confirm')"
+        :cancelText="t('pupilTable.cancel')"
         @confirm="confirmRemove"
     />
   </div>
diff --git a/src/classrooms/pages/ClassroomDetails.vue b/src/classrooms/pages/ClassroomDetails.vue
index 6398b105..49db538c 100644
--- a/src/classrooms/pages/ClassroomDetails.vue
+++ b/src/classrooms/pages/ClassroomDetails.vue
@@ -162,7 +162,7 @@ async function saveEdit() {
         <div v-else class="mt-3 space-y-3">
           <div>
             <p class="text-sm font-semibold text-gray-600">
-              Existing teachers
+              {{ t("classroomDetails.existingteachers") }}
             </p>
 
             <ul class="mt-2 space-y-1">
@@ -179,7 +179,7 @@ async function saveEdit() {
 
           <div>
             <p class="text-sm font-semibold text-gray-600">
-              Add new teachers
+              {{ t("classroomDetails.addteachers") }}
             </p>
 
             <input
@@ -198,7 +198,7 @@ async function saveEdit() {
             class="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-500"
             @click="startEdit"
         >
-          Edit
+          {{ t("classroomDetails.edit") }}
         </button>
 
         <button
@@ -206,7 +206,7 @@ async function saveEdit() {
           class="rounded bg-red-600 px-4 py-2 text-white hover:bg-red-500"
         @click="askDelete"
         >
-        Delete classroom
+          {{ t("classroomDetails.deleteclass") }}
         </button>
 
         <template v-else>
@@ -215,14 +215,14 @@ async function saveEdit() {
               :disabled="classroomsStore.isLoading"
               @click="saveEdit"
           >
-            Save
+            {{ t("classroomDetails.save") }}
           </button>
 
           <button
               class="rounded bg-gray-400 px-4 py-2 text-white hover:bg-gray-300"
               @click="cancelEdit"
           >
-            Cancel
+            {{ t("classroomDetails.edit") }}
           </button>
         </template>
       </div>
@@ -261,9 +261,10 @@ async function saveEdit() {
     </div>
     <ConfirmModal
         v-model="showDeleteModal"
-        title="t('classroomDetails.cancel')"
-        message="t('classroomDetails.confirmmessage')"
-        cancelText="t('classroomDetails.cancel')"
+        :title="t('classroomDetails.cancel')"
+        :message="t('classroomDetails.confirmmessage')"
+        :cancelText="t('classroomDetails.cancel')"
+        :confirmText="t('confirmModal.confirm')"
         @confirm="confirmDelete"
     />
   </main>
diff --git a/src/locales/en.ts b/src/locales/en.ts
index a6947495..a13666a8 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -421,6 +421,7 @@ export const en = {
     cancel: "Cancel",
     deleteclass: "Delete classroom",
     edit: "Edit",
+    existingteachers: "Existing teachers",
     addteachers: "Add new teachers",
     pendingApproval: {
       refresh: "Refresh status",
diff --git a/src/locales/nb.ts b/src/locales/nb.ts
index bb45d555..f8dd5d7b 100644
--- a/src/locales/nb.ts
+++ b/src/locales/nb.ts
@@ -422,6 +422,7 @@ export const nb = {
     deleteclass: "Slett klasserom",
     edit: "Endre",
     addteachers: "Legg til lærere",
+    existingteachers: "Eksisterende lærere",
     pendingApproval: {
       refresh: "Oppdater status",
       waiting: "Venter på godkjenning.",

From 3686fcd71bbd98fc0c8477e2db9fe181dfc5010d Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Fri, 24 Apr 2026 14:20:09 +0200
Subject: [PATCH 16/66] update task view and creation

---
 .../components/ClassroomTaskCard.vue          |  66 +++++
 .../components/ClassroomTaskSidebar.vue       |  32 +++
 src/classrooms/components/TaskItemsEditor.vue |  56 ++++
 src/classrooms/components/TaskMetaEditor.vue  |  51 ++++
 .../components/TaskOptionEditor.vue           |  50 ++++
 .../components/TaskSideBarFilter.vue          |  37 +++
 src/classrooms/components/TaskSummaryCard.vue |  49 ++++
 src/classrooms/pages/ClassroomTasks.vue       | 251 +++++-------------
 src/classrooms/pages/NewClassroomTask.vue     | 151 ++++++++++-
 src/stops/api/stops.api.ts                    |   2 +-
 10 files changed, 559 insertions(+), 186 deletions(-)
 create mode 100644 src/classrooms/components/ClassroomTaskCard.vue
 create mode 100644 src/classrooms/components/ClassroomTaskSidebar.vue
 create mode 100644 src/classrooms/components/TaskItemsEditor.vue
 create mode 100644 src/classrooms/components/TaskMetaEditor.vue
 create mode 100644 src/classrooms/components/TaskOptionEditor.vue
 create mode 100644 src/classrooms/components/TaskSideBarFilter.vue
 create mode 100644 src/classrooms/components/TaskSummaryCard.vue

diff --git a/src/classrooms/components/ClassroomTaskCard.vue b/src/classrooms/components/ClassroomTaskCard.vue
new file mode 100644
index 00000000..dd9fabf5
--- /dev/null
+++ b/src/classrooms/components/ClassroomTaskCard.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { TaskResponse } from "@/stops/api/stops.api"
+
+defineProps<{
+  task: TaskResponse
+  expanded: boolean
+}>()
+
+const emit = defineEmits<{
+  toggle: []
+  edit: []
+}>()
+
+</script>
+
+<template>
+  <div class="rounded-xl border bg-white p-4 shadow-sm">
+
+    <!-- SUMMARY -->
+    <div class="flex items-start justify-between gap-4">
+      <div>
+        <h2 class="font-bold text-gray-900">
+          Title
+        </h2>
+
+        <p class="text-sm text-gray-500">
+          {{ task.taskType }} · Difficulty {{ task.difficultyLevel }}
+        </p>
+      </div>
+
+      <div class="flex gap-2">
+        <button
+            class="rounded bg-gray-100 px-3 py-1 text-sm"
+            @click="emit('toggle')"
+        >
+          {{ expanded ? "Hide" : "View" }}
+        </button>
+
+        <button
+            class="rounded bg-blue-600 px-3 py-1 text-sm text-white"
+            @click="emit('edit')"
+        >
+          Edit
+        </button>
+      </div>
+    </div>
+
+    <!-- EXPANDED VIEW -->
+    <div v-if="expanded" class="mt-4 space-y-2 border-t pt-4">
+
+      <p class="text-sm text-gray-600">
+        Items: {{ task.items.length }}
+      </p>
+
+      <div class="rounded bg-gray-50 p-3 text-sm">
+        <p class="font-semibold">Intro</p>
+        <p>IntroText}</p>
+      </div>
+
+      <div class="text-xs text-gray-500">
+        Max score: {{ task.maxScore }} · Published: {{ task.published }}
+      </div>
+
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/classrooms/components/ClassroomTaskSidebar.vue b/src/classrooms/components/ClassroomTaskSidebar.vue
new file mode 100644
index 00000000..ccd5f9bb
--- /dev/null
+++ b/src/classrooms/components/ClassroomTaskSidebar.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+defineProps<{
+  filters: string[]
+  active: string
+}>()
+
+const emit = defineEmits<{
+  select: [string]
+}>()
+</script>
+
+<template>
+  <aside class="rounded-lg border bg-white p-4 shadow-sm">
+
+    <h3 class="mb-3 text-sm font-semibold uppercase text-gray-500">
+      Filter tasks
+    </h3>
+
+    <div class="space-y-2">
+      <button
+          v-for="f in filters"
+          :key="f"
+          class="w-full rounded border px-3 py-2 text-left text-sm"
+          :class="f === active ? 'bg-gray-900 text-white' : 'hover:bg-gray-50'"
+          @click="emit('select', f)"
+      >
+        {{ f }}
+      </button>
+    </div>
+
+  </aside>
+</template>
\ No newline at end of file
diff --git a/src/classrooms/components/TaskItemsEditor.vue b/src/classrooms/components/TaskItemsEditor.vue
new file mode 100644
index 00000000..db12fe45
--- /dev/null
+++ b/src/classrooms/components/TaskItemsEditor.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { TaskItemResponse, TaskType } from "@/stops/api/stops.api"
+import TaskOptionEditor from "./TaskOptionEditor.vue"
+
+defineProps<{
+  items: TaskItemResponse[]
+  taskType: TaskType
+}>()
+
+const emit = defineEmits<{
+  remove: [index: number]
+}>()
+</script>
+
+<template>
+  <div class="space-y-4">
+
+    <div
+        v-for="(item, index) in items"
+        :key="item.id"
+        class="rounded-xl border bg-white p-4 space-y-3"
+    >
+
+      <div class="flex justify-between">
+        <h3 class="font-semibold">Item {{ index + 1 }}</h3>
+
+        <button
+            class="text-red-600 text-sm"
+            @click="emit('remove', index)"
+        >
+          Remove
+        </button>
+      </div>
+
+      <input
+          v-model="item.promptText.en"
+          placeholder="Prompt EN"
+          class="input"
+      />
+
+      <input
+          v-model="item.promptText.nb"
+          placeholder="Prompt NB"
+          class="input"
+      />
+
+      <!-- Options only for MCQ-style tasks -->
+      <TaskOptionEditor
+          v-if="item.options"
+          v-model="item.options"
+      />
+
+    </div>
+
+  </div>
+</template>
diff --git a/src/classrooms/components/TaskMetaEditor.vue b/src/classrooms/components/TaskMetaEditor.vue
new file mode 100644
index 00000000..0ae5d2f9
--- /dev/null
+++ b/src/classrooms/components/TaskMetaEditor.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { TaskResponse } from "@/stops/api/stops.api"
+
+const form = defineModel<TaskResponse>({
+  default: () => ({
+    id: 0,
+    classroomId: 0,
+    stopId: 0,
+    createdByTeacherId: 0,
+    title: { en: "", nb: "" },
+    introText: { en: "", nb: "" },
+    difficultyLevel: 1,
+    taskType: "GENERIC",
+    passingRule: "ALL_CORRECT",
+    passingScore: null,
+    maxScore: 1,
+    published: false,
+    items: [],
+  }),
+})
+</script>
+
+<template>
+  <div class="rounded-xl border bg-white p-4 space-y-3">
+
+    <h2 class="font-semibold">Task Settings</h2>
+
+    <input v-model="form.title.en" placeholder="Title EN" class="input" />
+    <input v-model="form.title.nb" placeholder="Title NB" class="input" />
+
+    <textarea v-model="form.introText.en" placeholder="Intro EN" class="input" />
+    <textarea v-model="form.introText.nb" placeholder="Intro NB" class="input" />
+
+    <div class="grid grid-cols-2 gap-3">
+      <select v-model="form.taskType" class="input">
+        <option value="GENERIC">GENERIC</option>
+        <option value="NEWS_COMPARISON">NEWS_COMPARISON</option>
+        <option value="EMAIL_REVIEW">EMAIL_REVIEW</option>
+        <option value="IMAGE_ASSESSMENT">IMAGE_ASSESSMENT</option>
+      </select>
+
+      <input
+          type="number"
+          v-model.number="form.difficultyLevel"
+          class="input"
+          placeholder="Difficulty"
+      />
+    </div>
+
+  </div>
+</template>
diff --git a/src/classrooms/components/TaskOptionEditor.vue b/src/classrooms/components/TaskOptionEditor.vue
new file mode 100644
index 00000000..c696d5d3
--- /dev/null
+++ b/src/classrooms/components/TaskOptionEditor.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { TaskOptionResponse } from "@/stops/api/stops.api"
+
+const options = defineModel<TaskOptionResponse[]>({
+  default: () => [],
+})
+
+</script>
+
+<template>
+  <div class="space-y-2">
+
+    <h4 class="text-sm font-semibold">Options</h4>
+
+    <div
+        v-for="(opt, i) in options"
+        :key="opt.id"
+        class="flex gap-2"
+    >
+      <input v-model="opt.optionText.en" class="input" placeholder="EN" />
+      <input v-model="opt.optionText.nb" class="input" placeholder="NB" />
+
+      <input
+          type="checkbox"
+          v-model="opt.isCorrect"
+      />
+
+      <button
+          class="text-red-500 text-sm"
+          @click="options.splice(i, 1)"
+      >
+        X
+      </button>
+    </div>
+
+    <button
+        class="text-sm text-blue-600"
+        @click="options.push({
+        id: Date.now(),
+        optionOrder: options.length + 1,
+        optionText: { en: '', nb: '' },
+        isCorrect: false,
+        explanationText: null
+      })"
+    >
+      + Add option
+    </button>
+
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/classrooms/components/TaskSideBarFilter.vue b/src/classrooms/components/TaskSideBarFilter.vue
new file mode 100644
index 00000000..ac9fe54e
--- /dev/null
+++ b/src/classrooms/components/TaskSideBarFilter.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { TaskType } from "@/stops/api/stops.api"
+import { useI18n } from "vue-i18n"
+
+const { t } = useI18n()
+
+const model = defineModel<TaskType | "ALL">()
+
+const options: Array<{ label: string; value: TaskType | "ALL" }> = [
+  { label: "All", value: "ALL" },
+  { label: "News", value: "NEWS_COMPARISON" },
+  { label: "Email", value: "EMAIL_REVIEW" },
+  { label: "Generic", value: "GENERIC" },
+]
+</script>
+
+<template>
+  <aside class="rounded-lg border bg-white p-3">
+    <h3 class="mb-3 text-xs font-bold uppercase text-gray-500">
+      {{ t("classroomTasks.filter") }}
+    </h3>
+
+    <div class="space-y-2">
+      <button
+          v-for="opt in options"
+          :key="opt.value"
+          class="w-full rounded px-3 py-2 text-left text-sm"
+          :class="model === opt.value
+          ? 'bg-gray-900 text-white'
+          : 'bg-gray-100 hover:bg-gray-200'"
+          @click="model = opt.value"
+      >
+        {{ opt.label }}
+      </button>
+    </div>
+  </aside>
+</template>
\ No newline at end of file
diff --git a/src/classrooms/components/TaskSummaryCard.vue b/src/classrooms/components/TaskSummaryCard.vue
new file mode 100644
index 00000000..db8b903d
--- /dev/null
+++ b/src/classrooms/components/TaskSummaryCard.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { TaskSummaryResponse } from "@/stops/api/stops.api"
+
+defineProps<{
+  task: TaskSummaryResponse
+  isOpen: boolean
+}>()
+
+const emit = defineEmits<{
+  toggle: []
+  edit: []
+}>()
+</script>
+
+<template>
+  <div class="rounded border bg-white p-4">
+
+    <div class="flex items-center justify-between">
+
+      <div>
+        <div class="font-bold">
+          {{ task.title.en }}
+        </div>
+
+        <div class="text-xs text-gray-500">
+          {{ task.taskType }} · {{ task.difficultyLevel }}
+        </div>
+      </div>
+
+      <div class="flex gap-2">
+        <button
+            class="rounded bg-gray-200 px-2 py-1 text-sm"
+            @click="emit('toggle')"
+        >
+          {{ isOpen ? 'Collapse' : 'Expand' }}
+        </button>
+
+        <button
+            class="rounded bg-blue-500 px-2 py-1 text-sm text-white"
+            @click="emit('edit')"
+        >
+          Edit
+        </button>
+      </div>
+
+    </div>
+
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/classrooms/pages/ClassroomTasks.vue b/src/classrooms/pages/ClassroomTasks.vue
index 11efc5ee..f4b51934 100644
--- a/src/classrooms/pages/ClassroomTasks.vue
+++ b/src/classrooms/pages/ClassroomTasks.vue
@@ -1,38 +1,47 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from "vue"
-import { useRoute } from "vue-router"
+import { useRoute, useRouter } from "vue-router"
+import { useAuthStore } from "@/auth/model/auth.store"
 import {
   requestTasksForStop,
   requestTask,
-  requestCreateTask,
-  requestUpdateTask,
-  requestDeleteTask,
   type TaskResponse,
+  type TaskType,
 } from "@/stops/api/stops.api"
-import { useAuthStore } from "@/auth/model/auth.store"
+
+import ClassroomTaskCard from "@/classrooms/components/ClassroomTaskCard.vue"
+import ClassroomTaskSidebar from "@/classrooms/components/TaskSideBarFilter.vue"
 
 const route = useRoute()
+const router = useRouter()
 const authStore = useAuthStore()
 
 const classroomId = Number(route.params.classroomId)
 
 const tasks = ref<TaskResponse[]>([])
+const expandedTaskId = ref<number | null>(null)
+
+const filter = ref<TaskType | "ALL">("ALL")
+
 const isLoading = ref(false)
 const error = ref<string | null>(null)
 
-const isEditing = ref(false)
-const editingTaskId = ref<number | null>(null)
+const isTeacher = computed(() => authStore.portalType === "TEACHER")
 
-type TaskForm = Omit<TaskResponse, "introText"> & {
-  introText: { nb: string; en: string }
-}
+const authorizationHeader = computed(() => authStore.authorizationHeader)
 
-const form = ref<TaskForm | null>(null)
+const taskTypes = computed(() => {
+  const set = new Set(tasks.value.map(t => t.taskType))
+  return ["ALL", ...Array.from(set)]
+})
 
-const isTeacher = computed(() => authStore.portalType === "TEACHER")
+const filteredTasks = computed(() => {
+  if (filter.value === "ALL") return tasks.value
+  return tasks.value.filter(t => t.taskType === filter.value)
+})
 
 async function loadTasks() {
-  if (!authStore.authorizationHeader) return
+  if (!authorizationHeader.value) return
 
   isLoading.value = true
   error.value = null
@@ -43,209 +52,83 @@ async function loadTasks() {
     const summaries = await requestTasksForStop(
         classroomId,
         stopId,
-        authStore.authorizationHeader,
+        authorizationHeader.value,
     )
 
     tasks.value = await Promise.all(
-        summaries.map((t) =>
-            requestTask(classroomId, t.id, authStore.authorizationHeader!),
+        summaries.map(t =>
+            requestTask(classroomId, t.id, authorizationHeader.value!),
         ),
     )
   } catch (e) {
-    error.value = e instanceof Error ? e.message : "Failed loading tasks"
+    error.value = e instanceof Error ? e.message : "Failed to load tasks"
   } finally {
     isLoading.value = false
   }
 }
 
-onMounted(loadTasks)
-
-function startCreate() {
-  isEditing.value = true
-  editingTaskId.value = null
-
-  form.value = {
-    id: 0,
-    classroomId,
-    stopId: 1,
-    createdByTeacherId: 0,
-    title: { nb: "", en: "" },
-    introText: { nb: "", en: "" },
-    difficultyLevel: 1,
-    taskType: "GENERIC",
-    passingRule: "ALL_CORRECT",
-    passingScore: null,
-    maxScore: 1,
-    published: false,
-    items: [],
-  }
-}
-
-function startEdit(task: TaskResponse) {
-  isEditing.value = true
-  editingTaskId.value = task.id
-
-  form.value = {
-    ...JSON.parse(JSON.stringify(task)),
-    introText: task.introText ?? { nb: "", en: "" },
-  }
+function toggleTask(taskId: number) {
+  expandedTaskId.value = expandedTaskId.value === taskId ? null : taskId
 }
 
-async function saveTask() {
-  if (!authStore.authorizationHeader || !form.value) return
-
-  try {
-    const payload = {
-      ...form.value,
-      introText:
-          form.value.introText.en || form.value.introText.nb
-              ? form.value.introText
-              : null,
-    }
-
-    if (editingTaskId.value) {
-      await requestUpdateTask(
-          classroomId,
-          editingTaskId.value,
-          payload,
-          authStore.authorizationHeader,
-      )
-    } else {
-      await requestCreateTask(
-          classroomId,
-          payload,
-          authStore.authorizationHeader,
-      )
-    }
-
-    await loadTasks()
-    cancelEdit()
-  } catch (e) {
-    error.value = e instanceof Error ? e.message : "Save failed"
-  }
+function goToCreate() {
+  router.push({
+    name: "new-classroom-task",
+    params: { classroomId },
+  })
 }
 
-async function deleteTask(taskId: number) {
-  if (!authStore.authorizationHeader) return
-
-  await requestDeleteTask(
-      classroomId,
-      taskId,
-      authStore.authorizationHeader,
-  )
-
-  tasks.value = tasks.value.filter((t) => t.id !== taskId)
+function goToEdit(taskId: number) {
+  router.push({
+    name: "edit-classroom-task",
+    params: { classroomId, taskId },
+  })
 }
 
-function cancelEdit() {
-  isEditing.value = false
-  editingTaskId.value = null
-  form.value = null
-}
+onMounted(loadTasks)
 </script>
 
 <template>
-  <div class="mx-auto max-w-6xl p-6">
-
-    <h1 class="text-2xl font-bold mb-4">
-      Classroom Tasks
-    </h1>
-
-    <button
-        v-if="isTeacher"
-        class="mb-4 rounded bg-blue-600 px-4 py-2 text-white"
-        @click="startCreate"
-    >
-      Create Task
-    </button>
-
-    <div v-if="isLoading">Loading...</div>
-    <div v-if="error" class="text-red-500">{{ error }}</div>
-
-    <div v-if="!isEditing">
-      <div
-          v-for="task in tasks"
-          :key="task.id"
-          class="mb-3 rounded border p-3 flex justify-between"
-      >
-        <div>
-          <div class="font-bold">
-            {{ task.title.en }}
-          </div>
-
-          <div class="text-sm text-gray-500">
-            {{ task.taskType }} · Difficulty {{ task.difficultyLevel }}
-          </div>
-
-          <div class="text-xs">
-            Published: {{ task.published }}
-          </div>
-        </div>
+  <section class="mx-auto max-w-7xl px-6 py-6">
+    <div class="grid gap-6 lg:grid-cols-[1fr_16rem]">
 
-        <div v-if="isTeacher" class="space-x-2">
-          <button
-              class="px-2 py-1 bg-gray-200 rounded"
-              @click="startEdit(task)"
-          >
-            Edit
-          </button>
+      <!-- MAIN -->
+      <div class="space-y-4">
+
+        <div class="flex items-center justify-between">
+          <h1 class="text-2xl font-bold">Tasks</h1>
 
           <button
-              class="px-2 py-1 bg-red-500 text-white rounded"
-              @click="deleteTask(task.id)"
+              v-if="isTeacher"
+              class="rounded bg-blue-600 px-4 py-2 text-white"
+              @click="goToCreate"
           >
-            Delete
+            Create Task
           </button>
         </div>
-      </div>
-    </div>
-
-    <div v-else-if="form" class="border p-4 rounded">
 
-      <h2 class="font-bold mb-2">
-        {{ editingTaskId ? "Edit Task" : "Create Task" }}
-      </h2>
+        <p v-if="error" class="text-red-600">{{ error }}</p>
 
-      <input
-          v-model="form.title.en"
-          placeholder="Title (EN)"
-          class="border p-2 w-full mb-2"
-      />
+        <p v-if="isLoading">Loading...</p>
 
-      <input
-          v-model="form.title.nb"
-          placeholder="Title (NB)"
-          class="border p-2 w-full mb-2"
-      />
+        <div v-for="task in filteredTasks" :key="task.id">
+          <ClassroomTaskCard
+              :task="task"
+              :expanded="expandedTaskId === task.id"
+              @toggle="toggleTask(task.id)"
+              @edit="goToEdit(task.id)"
+          />
+        </div>
 
-      <textarea
-          v-model="form.introText.en"
-          placeholder="Intro (EN)"
-          class="border p-2 w-full mb-2"
-      />
+      </div>
 
-      <textarea
-          v-model="form.introText.nb"
-          placeholder="Intro (NB)"
-          class="border p-2 w-full mb-2"
+      <!-- SIDEBAR -->
+      <ClassroomTaskSidebar
+          :filters="taskTypes"
+          :active="filter"
+          @select="filter = $event"
       />
 
-      <div class="flex gap-2">
-        <button
-            class="bg-green-600 text-white px-4 py-2 rounded"
-            @click="saveTask"
-        >
-          Save
-        </button>
-
-        <button
-            class="bg-gray-400 text-white px-4 py-2 rounded"
-            @click="cancelEdit"
-        >
-          Cancel
-        </button>
-      </div>
     </div>
-
-  </div>
+  </section>
 </template>
\ No newline at end of file
diff --git a/src/classrooms/pages/NewClassroomTask.vue b/src/classrooms/pages/NewClassroomTask.vue
index cbf163c0..2e34ad24 100644
--- a/src/classrooms/pages/NewClassroomTask.vue
+++ b/src/classrooms/pages/NewClassroomTask.vue
@@ -1,3 +1,152 @@
+<script setup lang="ts">
+import { computed, ref, onMounted } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useAuthStore } from "@/auth/model/auth.store"
+import {
+  requestCreateTask,
+  requestTask,
+  requestUpdateTask,
+  type TaskResponse,
+} from "@/stops/api/stops.api"
+
+import TaskMetaEditor from "@/classrooms/components/TaskMetaEditor.vue";
+import TaskItemsEditor from "@/classrooms/components/TaskItemsEditor.vue";
+
+const route = useRoute()
+const router = useRouter()
+const authStore = useAuthStore()
+
+const classroomId = Number(route.params.classroomId)
+const taskId = route.params.taskId ? Number(route.params.taskId) : null
+
+const isEditMode = computed(() => taskId !== null)
+
+const loading = ref(false)
+const error = ref<string | null>(null)
+
+const form = ref<TaskResponse>({
+  id: 0,
+  classroomId,
+  stopId: 1,
+  createdByTeacherId: 0,
+  title: { en: "", nb: "" },
+  introText: { en: "", nb: "" },
+  difficultyLevel: 1,
+  taskType: "GENERIC",
+  passingRule: "ALL_CORRECT",
+  passingScore: null,
+  maxScore: 1,
+  published: false,
+  items: [],
+})
+
+async function load() {
+  if (!taskId || !authStore.authorizationHeader) return
+
+  loading.value = true
+  try {
+    form.value = await requestTask(
+        classroomId,
+        taskId,
+        authStore.authorizationHeader,
+    )
+  } finally {
+    loading.value = false
+  }
+}
+
+function addItem() {
+  form.value.items.push({
+    id: Date.now(),
+    itemOrder: form.value.items.length + 1,
+    promptText: { en: "", nb: "" },
+    mediaUrl: null,
+    metadataJson: null,
+    options: [],
+  })
+}
+
+function removeItem(index: number) {
+  form.value.items.splice(index, 1)
+}
+
+async function save() {
+  if (!authStore.authorizationHeader) return
+
+  loading.value = true
+  error.value = null
+
+  try {
+    if (isEditMode.value) {
+      await requestUpdateTask(
+          classroomId,
+          taskId!,
+          form.value,
+          authStore.authorizationHeader,
+      )
+    } else {
+      await requestCreateTask(
+          classroomId,
+          form.value,
+          authStore.authorizationHeader,
+      )
+    }
+
+    router.push({ name: "classroom-tasks", params: { classroomId } })
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : "Save failed"
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(load)
+</script>
+
 <template>
-  New task
+  <div class="mx-auto max-w-5xl p-6 space-y-6">
+
+    <h1 class="text-2xl font-bold">
+      {{ isEditMode ? "Edit Task" : "Create Task" }}
+    </h1>
+
+    <p v-if="error" class="text-red-600">{{ error }}</p>
+
+    <TaskMetaEditor v-model="form" />
+
+    <div class="flex items-center justify-between">
+      <h2 class="text-lg font-semibold">Items</h2>
+
+      <button
+          class="rounded bg-blue-600 px-3 py-1 text-white"
+          @click="addItem"
+      >
+        Add Item
+      </button>
+    </div>
+
+    <TaskItemsEditor
+        :items="form.items"
+        :task-type="form.taskType"
+        @remove="removeItem"
+    />
+
+    <div class="flex gap-3 pt-4">
+      <button
+          class="rounded bg-green-600 px-4 py-2 text-white"
+          :disabled="loading"
+          @click="save"
+      >
+        Save Task
+      </button>
+
+      <button
+          class="rounded bg-gray-300 px-4 py-2"
+          @click="router.back()"
+      >
+        Cancel
+      </button>
+    </div>
+
+  </div>
 </template>
\ No newline at end of file
diff --git a/src/stops/api/stops.api.ts b/src/stops/api/stops.api.ts
index 42462010..40d172fc 100644
--- a/src/stops/api/stops.api.ts
+++ b/src/stops/api/stops.api.ts
@@ -68,7 +68,7 @@ export interface TaskResponse {
   stopId: number
   createdByTeacherId: number
   title: LocalizedText
-  introText: LocalizedOptionalText | null
+  introText: LocalizedOptionalText
   difficultyLevel: number
   taskType: TaskType
   passingRule: string

From 3e74af8fd5d397ffa861fb7be2874584d540d4c9 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Fri, 24 Apr 2026 14:40:08 +0200
Subject: [PATCH 17/66] move task related classroom components to own folder

---
 src/classrooms/components/{ => tasks}/ClassroomTaskCard.vue   | 2 +-
 .../components/{ => tasks}/ClassroomTaskSidebar.vue           | 0
 src/classrooms/components/{ => tasks}/TaskItemsEditor.vue     | 2 +-
 src/classrooms/components/{ => tasks}/TaskMetaEditor.vue      | 2 +-
 src/classrooms/components/{ => tasks}/TaskOptionEditor.vue    | 2 +-
 src/classrooms/components/{ => tasks}/TaskSideBarFilter.vue   | 2 +-
 src/classrooms/components/{ => tasks}/TaskSummaryCard.vue     | 2 +-
 src/classrooms/pages/ClassroomTasks.vue                       | 4 ++--
 src/classrooms/pages/NewClassroomTask.vue                     | 4 ++--
 9 files changed, 10 insertions(+), 10 deletions(-)
 rename src/classrooms/components/{ => tasks}/ClassroomTaskCard.vue (95%)
 rename src/classrooms/components/{ => tasks}/ClassroomTaskSidebar.vue (100%)
 rename src/classrooms/components/{ => tasks}/TaskItemsEditor.vue (99%)
 rename src/classrooms/components/{ => tasks}/TaskMetaEditor.vue (95%)
 rename src/classrooms/components/{ => tasks}/TaskOptionEditor.vue (93%)
 rename src/classrooms/components/{ => tasks}/TaskSideBarFilter.vue (94%)
 rename src/classrooms/components/{ => tasks}/TaskSummaryCard.vue (93%)

diff --git a/src/classrooms/components/ClassroomTaskCard.vue b/src/classrooms/components/tasks/ClassroomTaskCard.vue
similarity index 95%
rename from src/classrooms/components/ClassroomTaskCard.vue
rename to src/classrooms/components/tasks/ClassroomTaskCard.vue
index dd9fabf5..6e8474c8 100644
--- a/src/classrooms/components/ClassroomTaskCard.vue
+++ b/src/classrooms/components/tasks/ClassroomTaskCard.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { TaskResponse } from "@/stops/api/stops.api"
+import type { TaskResponse } from "@/stops/api/stops.api.ts"
 
 defineProps<{
   task: TaskResponse
diff --git a/src/classrooms/components/ClassroomTaskSidebar.vue b/src/classrooms/components/tasks/ClassroomTaskSidebar.vue
similarity index 100%
rename from src/classrooms/components/ClassroomTaskSidebar.vue
rename to src/classrooms/components/tasks/ClassroomTaskSidebar.vue
diff --git a/src/classrooms/components/TaskItemsEditor.vue b/src/classrooms/components/tasks/TaskItemsEditor.vue
similarity index 99%
rename from src/classrooms/components/TaskItemsEditor.vue
rename to src/classrooms/components/tasks/TaskItemsEditor.vue
index db12fe45..af5c9d15 100644
--- a/src/classrooms/components/TaskItemsEditor.vue
+++ b/src/classrooms/components/tasks/TaskItemsEditor.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { TaskItemResponse, TaskType } from "@/stops/api/stops.api"
+import type { TaskItemResponse, TaskType } from "@/stops/api/stops.api.ts"
 import TaskOptionEditor from "./TaskOptionEditor.vue"
 
 defineProps<{
diff --git a/src/classrooms/components/TaskMetaEditor.vue b/src/classrooms/components/tasks/TaskMetaEditor.vue
similarity index 95%
rename from src/classrooms/components/TaskMetaEditor.vue
rename to src/classrooms/components/tasks/TaskMetaEditor.vue
index 0ae5d2f9..e729df40 100644
--- a/src/classrooms/components/TaskMetaEditor.vue
+++ b/src/classrooms/components/tasks/TaskMetaEditor.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { TaskResponse } from "@/stops/api/stops.api"
+import type { TaskResponse } from "@/stops/api/stops.api.ts"
 
 const form = defineModel<TaskResponse>({
   default: () => ({
diff --git a/src/classrooms/components/TaskOptionEditor.vue b/src/classrooms/components/tasks/TaskOptionEditor.vue
similarity index 93%
rename from src/classrooms/components/TaskOptionEditor.vue
rename to src/classrooms/components/tasks/TaskOptionEditor.vue
index c696d5d3..640dbbb2 100644
--- a/src/classrooms/components/TaskOptionEditor.vue
+++ b/src/classrooms/components/tasks/TaskOptionEditor.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { TaskOptionResponse } from "@/stops/api/stops.api"
+import type { TaskOptionResponse } from "@/stops/api/stops.api.ts"
 
 const options = defineModel<TaskOptionResponse[]>({
   default: () => [],
diff --git a/src/classrooms/components/TaskSideBarFilter.vue b/src/classrooms/components/tasks/TaskSideBarFilter.vue
similarity index 94%
rename from src/classrooms/components/TaskSideBarFilter.vue
rename to src/classrooms/components/tasks/TaskSideBarFilter.vue
index ac9fe54e..6f7ed3e2 100644
--- a/src/classrooms/components/TaskSideBarFilter.vue
+++ b/src/classrooms/components/tasks/TaskSideBarFilter.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { TaskType } from "@/stops/api/stops.api"
+import type { TaskType } from "@/stops/api/stops.api.ts"
 import { useI18n } from "vue-i18n"
 
 const { t } = useI18n()
diff --git a/src/classrooms/components/TaskSummaryCard.vue b/src/classrooms/components/tasks/TaskSummaryCard.vue
similarity index 93%
rename from src/classrooms/components/TaskSummaryCard.vue
rename to src/classrooms/components/tasks/TaskSummaryCard.vue
index db8b903d..d04aaa99 100644
--- a/src/classrooms/components/TaskSummaryCard.vue
+++ b/src/classrooms/components/tasks/TaskSummaryCard.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { TaskSummaryResponse } from "@/stops/api/stops.api"
+import type { TaskSummaryResponse } from "@/stops/api/stops.api.ts"
 
 defineProps<{
   task: TaskSummaryResponse
diff --git a/src/classrooms/pages/ClassroomTasks.vue b/src/classrooms/pages/ClassroomTasks.vue
index f4b51934..15400fae 100644
--- a/src/classrooms/pages/ClassroomTasks.vue
+++ b/src/classrooms/pages/ClassroomTasks.vue
@@ -9,8 +9,8 @@ import {
   type TaskType,
 } from "@/stops/api/stops.api"
 
-import ClassroomTaskCard from "@/classrooms/components/ClassroomTaskCard.vue"
-import ClassroomTaskSidebar from "@/classrooms/components/TaskSideBarFilter.vue"
+import ClassroomTaskCard from "@/classrooms/components/tasks/ClassroomTaskCard.vue"
+import ClassroomTaskSidebar from "@/classrooms/components/tasks/TaskSideBarFilter.vue"
 
 const route = useRoute()
 const router = useRouter()
diff --git a/src/classrooms/pages/NewClassroomTask.vue b/src/classrooms/pages/NewClassroomTask.vue
index 2e34ad24..8ee779a1 100644
--- a/src/classrooms/pages/NewClassroomTask.vue
+++ b/src/classrooms/pages/NewClassroomTask.vue
@@ -9,8 +9,8 @@ import {
   type TaskResponse,
 } from "@/stops/api/stops.api"
 
-import TaskMetaEditor from "@/classrooms/components/TaskMetaEditor.vue";
-import TaskItemsEditor from "@/classrooms/components/TaskItemsEditor.vue";
+import TaskMetaEditor from "@/classrooms/components/tasks/TaskMetaEditor.vue";
+import TaskItemsEditor from "@/classrooms/components/tasks/TaskItemsEditor.vue";
 
 const route = useRoute()
 const router = useRouter()

From bf25d075f019ce340d34b98db9bbae51c087f2a2 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Mon, 27 Apr 2026 10:13:24 +0200
Subject: [PATCH 18/66] update tests

---
 src/app/router/__tests__/auth-routing.spec.ts       |  1 +
 src/auth/pages/__tests__/login-pages.spec.ts        |  1 +
 src/classrooms/_tests_/classrooms.store.spec.ts     | 13 +++++++++++--
 src/classrooms/_tests_/pupil-routing.spec.ts        |  2 ++
 src/map/model/__tests__/map.store.spec.ts           |  1 +
 .../pages/__tests__/PupilProfilePage.spec.ts        |  1 +
 src/stops/model/__tests__/stop.store.spec.ts        |  1 +
 7 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/app/router/__tests__/auth-routing.spec.ts b/src/app/router/__tests__/auth-routing.spec.ts
index bac8d414..d06aaa3e 100644
--- a/src/app/router/__tests__/auth-routing.spec.ts
+++ b/src/app/router/__tests__/auth-routing.spec.ts
@@ -139,6 +139,7 @@ describe('authenticated routing', () => {
         displayName: '',
         totalXp: 0,
         currentLevel: 0,
+        membershipStatus: "ACTIVE",
       }
     })
 
diff --git a/src/auth/pages/__tests__/login-pages.spec.ts b/src/auth/pages/__tests__/login-pages.spec.ts
index 00087957..d7a3e15e 100644
--- a/src/auth/pages/__tests__/login-pages.spec.ts
+++ b/src/auth/pages/__tests__/login-pages.spec.ts
@@ -196,6 +196,7 @@ describe("login form validation", () => {
           displayName: '',
           totalXp: 0,
           currentLevel: 0,
+          membershipStatus: "ACTIVE",
         },
         teacherProfile: null,
       }
diff --git a/src/classrooms/_tests_/classrooms.store.spec.ts b/src/classrooms/_tests_/classrooms.store.spec.ts
index 28da7740..b5223157 100644
--- a/src/classrooms/_tests_/classrooms.store.spec.ts
+++ b/src/classrooms/_tests_/classrooms.store.spec.ts
@@ -37,6 +37,9 @@ describe("classrooms store", () => {
         description: "",
         teacherEmails: [],
         joinCode: "ABC123",
+        pupilCount: 0,
+        pendingPupilCount: 0,
+        teacherCount: 1,
       },
     ]);
 
@@ -57,6 +60,9 @@ describe("classrooms store", () => {
       description: "",
       teacherEmails: [],
       joinCode: "XYZ321",
+      pupilCount: 0,
+      pendingPupilCount: 0,
+      teacherCount: 1,
     });
 
     const store = useClassroomsStore();
@@ -82,6 +88,9 @@ describe("classrooms store", () => {
         description: "",
         teacherEmails: [],
         joinCode: "ABC123",
+        pupilCount: 0,
+        pendingPupilCount: 0,
+        teacherCount: 1,
       });
 
     const store = useClassroomsStore();
@@ -119,8 +128,8 @@ describe("classrooms store", () => {
     mockAuth();
 
     vi.spyOn(api, "requestGetClassrooms")
-    .mockResolvedValueOnce([{ classroomId: 1, title: "Old", description: "", teacherEmails: [], joinCode: "A" }])
-    .mockResolvedValueOnce([{ classroomId: 2, title: "New", description: "", teacherEmails: [], joinCode: "B" }]);
+    .mockResolvedValueOnce([{ classroomId: 1, title: "Old", description: "", teacherEmails: [], joinCode: "A", pupilCount: 0, pendingPupilCount: 0, teacherCount: 1, }])
+    .mockResolvedValueOnce([{ classroomId: 2, title: "New", description: "", teacherEmails: [], joinCode: "B", pupilCount: 0, pendingPupilCount: 0, teacherCount: 1, }]);
 
     const store = useClassroomsStore();
 
diff --git a/src/classrooms/_tests_/pupil-routing.spec.ts b/src/classrooms/_tests_/pupil-routing.spec.ts
index c0a4a257..9b41dc21 100644
--- a/src/classrooms/_tests_/pupil-routing.spec.ts
+++ b/src/classrooms/_tests_/pupil-routing.spec.ts
@@ -31,12 +31,14 @@ describe("join classroom routing", () => {
             totalXp: 0,
             currentLevel: 1,
             currentClassroomId: 1,
+            membershipStatus: "ACTIVE",
           }
         : {
             displayName: "Test",
             totalXp: 0,
             currentLevel: 1,
             currentClassroomId: null,
+            membershipStatus: null,
           },
       teacherProfile: null,
     };
diff --git a/src/map/model/__tests__/map.store.spec.ts b/src/map/model/__tests__/map.store.spec.ts
index 31b01dbe..fd707f98 100644
--- a/src/map/model/__tests__/map.store.spec.ts
+++ b/src/map/model/__tests__/map.store.spec.ts
@@ -51,6 +51,7 @@ function seedAuthStore() {
       totalXp: 0,
       currentLevel: 1,
       currentClassroomId: CLASSROOM_ID,
+      membershipStatus: "ACTIVE",
     },
     teacherProfile: null,
   }
diff --git a/src/profile/pages/__tests__/PupilProfilePage.spec.ts b/src/profile/pages/__tests__/PupilProfilePage.spec.ts
index 8c1fb641..7e0c5c81 100644
--- a/src/profile/pages/__tests__/PupilProfilePage.spec.ts
+++ b/src/profile/pages/__tests__/PupilProfilePage.spec.ts
@@ -56,6 +56,7 @@ describe('PupilProfilePage', () => {
         totalXp: 480,
         currentLevel: 4,
         currentClassroomId: 101,
+        membershipStatus: "ACTIVE",
       },
       teacherProfile: null,
     }
diff --git a/src/stops/model/__tests__/stop.store.spec.ts b/src/stops/model/__tests__/stop.store.spec.ts
index 950227a1..d80c0107 100644
--- a/src/stops/model/__tests__/stop.store.spec.ts
+++ b/src/stops/model/__tests__/stop.store.spec.ts
@@ -97,6 +97,7 @@ function seedAuthStore() {
       totalXp: 0,
       currentLevel: 1,
       currentClassroomId: CLASSROOM_ID,
+      membershipStatus: "ACTIVE",
     },
     teacherProfile: null,
   }

From 83324b9c39b8fb8d796dcecfa5545eda61c98bf6 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Mon, 27 Apr 2026 10:32:09 +0200
Subject: [PATCH 19/66] update task view

---
 src/classrooms/pages/ClassroomTasks.vue | 88 +++++++++++++++++--------
 1 file changed, 60 insertions(+), 28 deletions(-)

diff --git a/src/classrooms/pages/ClassroomTasks.vue b/src/classrooms/pages/ClassroomTasks.vue
index 15400fae..0ed9405b 100644
--- a/src/classrooms/pages/ClassroomTasks.vue
+++ b/src/classrooms/pages/ClassroomTasks.vue
@@ -9,37 +9,47 @@ import {
   type TaskType,
 } from "@/stops/api/stops.api"
 
-import ClassroomTaskCard from "@/classrooms/components/tasks/ClassroomTaskCard.vue"
-import ClassroomTaskSidebar from "@/classrooms/components/tasks/TaskSideBarFilter.vue"
+import TaskCard from "@/stops/components/TaskCard.vue"
+import ClassroomTaskSidebar from "@/classrooms/components/tasks/ClassroomTaskSidebar.vue"
 
 const route = useRoute()
 const router = useRouter()
 const authStore = useAuthStore()
 
-const classroomId = Number(route.params.classroomId)
+const classroomId = computed(() => Number(route.params.classroomId))
 
 const tasks = ref<TaskResponse[]>([])
-const expandedTaskId = ref<number | null>(null)
-
-const filter = ref<TaskType | "ALL">("ALL")
-
 const isLoading = ref(false)
 const error = ref<string | null>(null)
 
-const isTeacher = computed(() => authStore.portalType === "TEACHER")
+const filter = ref<TaskType | "ALL">("ALL")
 
 const authorizationHeader = computed(() => authStore.authorizationHeader)
+const isTeacher = computed(() => authStore.portalType === "TEACHER")
 
+// 🧠 Same structure as StopPage
+const answers = ref<Map<number, Map<number, number>>>(new Map())
+
+function handleSelect(taskId: number, itemId: number, optionId: number) {
+  if (!answers.value.has(taskId)) {
+    answers.value.set(taskId, new Map())
+  }
+
+  answers.value.get(taskId)!.set(itemId, optionId)
+}
+
+// Sidebar filters
 const taskTypes = computed(() => {
-  const set = new Set(tasks.value.map(t => t.taskType))
+  const set = new Set(tasks.value.map((t) => t.taskType))
   return ["ALL", ...Array.from(set)]
 })
 
 const filteredTasks = computed(() => {
   if (filter.value === "ALL") return tasks.value
-  return tasks.value.filter(t => t.taskType === filter.value)
+  return tasks.value.filter((t) => t.taskType === filter.value)
 })
 
+// Load tasks
 async function loadTasks() {
   if (!authorizationHeader.value) return
 
@@ -47,17 +57,17 @@ async function loadTasks() {
   error.value = null
 
   try {
-    const stopId = 1
+    const stopId = 1 // TODO: make dynamic if needed
 
     const summaries = await requestTasksForStop(
-        classroomId,
+        classroomId.value,
         stopId,
         authorizationHeader.value,
     )
 
     tasks.value = await Promise.all(
-        summaries.map(t =>
-            requestTask(classroomId, t.id, authorizationHeader.value!),
+        summaries.map((t) =>
+            requestTask(classroomId.value, t.id, authorizationHeader.value!),
         ),
     )
   } catch (e) {
@@ -67,21 +77,18 @@ async function loadTasks() {
   }
 }
 
-function toggleTask(taskId: number) {
-  expandedTaskId.value = expandedTaskId.value === taskId ? null : taskId
-}
-
+// Navigation
 function goToCreate() {
   router.push({
     name: "new-classroom-task",
-    params: { classroomId },
+    params: { classroomId: classroomId.value },
   })
 }
 
 function goToEdit(taskId: number) {
   router.push({
     name: "edit-classroom-task",
-    params: { classroomId, taskId },
+    params: { classroomId: classroomId.value, taskId },
   })
 }
 
@@ -93,8 +100,9 @@ onMounted(loadTasks)
     <div class="grid gap-6 lg:grid-cols-[1fr_16rem]">
 
       <!-- MAIN -->
-      <div class="space-y-4">
+      <div class="space-y-6">
 
+        <!-- Header -->
         <div class="flex items-center justify-between">
           <h1 class="text-2xl font-bold">Tasks</h1>
 
@@ -108,25 +116,49 @@ onMounted(loadTasks)
         </div>
 
         <p v-if="error" class="text-red-600">{{ error }}</p>
-
         <p v-if="isLoading">Loading...</p>
 
-        <div v-for="task in filteredTasks" :key="task.id">
-          <ClassroomTaskCard
+        <!-- Tasks rendered like StopPage -->
+        <div v-if="!isLoading && filteredTasks.length === 0" class="text-gray-500">
+          No tasks found
+        </div>
+
+        <div
+            v-for="(task, index) in filteredTasks"
+            :key="task.id"
+            class="flex flex-col gap-8"
+        >
+          <TaskCard
               :task="task"
-              :expanded="expandedTaskId === task.id"
-              @toggle="toggleTask(task.id)"
-              @edit="goToEdit(task.id)"
+              :selected-answers="answers.get(task.id)"
+              :show-answers="true"
+              @select="handleSelect"
+          />
+
+          <hr
+              v-if="index < filteredTasks.length - 1"
+              class="border-gray-200"
           />
         </div>
 
+        <!-- Edit buttons (teacher only) -->
+        <div v-if="isTeacher" class="pt-4 space-y-2">
+          <button
+              v-for="task in filteredTasks"
+              :key="task.id"
+              class="text-sm text-blue-600 underline"
+              @click="goToEdit(task.id)"
+          >
+            Edit task {{ task.id }}
+          </button>
+        </div>
+
       </div>
 
       <!-- SIDEBAR -->
       <ClassroomTaskSidebar
           :filters="taskTypes"
           :active="filter"
-          @select="filter = $event"
       />
 
     </div>

From b394459401c3c24cd3ec77c7e2b6a2cda0aa57a9 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Mon, 27 Apr 2026 13:00:06 +0200
Subject: [PATCH 20/66] update task view to match stops better

---
 .../components/tasks/ClassroomTaskCard.vue    | 66 -------------------
 .../components/tasks/TaskSideBarFilter.vue    |  1 -
 src/classrooms/pages/ClassroomTasks.vue       | 35 ++++------
 3 files changed, 13 insertions(+), 89 deletions(-)
 delete mode 100644 src/classrooms/components/tasks/ClassroomTaskCard.vue

diff --git a/src/classrooms/components/tasks/ClassroomTaskCard.vue b/src/classrooms/components/tasks/ClassroomTaskCard.vue
deleted file mode 100644
index 6e8474c8..00000000
--- a/src/classrooms/components/tasks/ClassroomTaskCard.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<script setup lang="ts">
-import type { TaskResponse } from "@/stops/api/stops.api.ts"
-
-defineProps<{
-  task: TaskResponse
-  expanded: boolean
-}>()
-
-const emit = defineEmits<{
-  toggle: []
-  edit: []
-}>()
-
-</script>
-
-<template>
-  <div class="rounded-xl border bg-white p-4 shadow-sm">
-
-    <!-- SUMMARY -->
-    <div class="flex items-start justify-between gap-4">
-      <div>
-        <h2 class="font-bold text-gray-900">
-          Title
-        </h2>
-
-        <p class="text-sm text-gray-500">
-          {{ task.taskType }} · Difficulty {{ task.difficultyLevel }}
-        </p>
-      </div>
-
-      <div class="flex gap-2">
-        <button
-            class="rounded bg-gray-100 px-3 py-1 text-sm"
-            @click="emit('toggle')"
-        >
-          {{ expanded ? "Hide" : "View" }}
-        </button>
-
-        <button
-            class="rounded bg-blue-600 px-3 py-1 text-sm text-white"
-            @click="emit('edit')"
-        >
-          Edit
-        </button>
-      </div>
-    </div>
-
-    <!-- EXPANDED VIEW -->
-    <div v-if="expanded" class="mt-4 space-y-2 border-t pt-4">
-
-      <p class="text-sm text-gray-600">
-        Items: {{ task.items.length }}
-      </p>
-
-      <div class="rounded bg-gray-50 p-3 text-sm">
-        <p class="font-semibold">Intro</p>
-        <p>IntroText}</p>
-      </div>
-
-      <div class="text-xs text-gray-500">
-        Max score: {{ task.maxScore }} · Published: {{ task.published }}
-      </div>
-
-    </div>
-  </div>
-</template>
\ No newline at end of file
diff --git a/src/classrooms/components/tasks/TaskSideBarFilter.vue b/src/classrooms/components/tasks/TaskSideBarFilter.vue
index 6f7ed3e2..b6e51b93 100644
--- a/src/classrooms/components/tasks/TaskSideBarFilter.vue
+++ b/src/classrooms/components/tasks/TaskSideBarFilter.vue
@@ -9,7 +9,6 @@ const model = defineModel<TaskType | "ALL">()
 const options: Array<{ label: string; value: TaskType | "ALL" }> = [
   { label: "All", value: "ALL" },
   { label: "News", value: "NEWS_COMPARISON" },
-  { label: "Email", value: "EMAIL_REVIEW" },
   { label: "Generic", value: "GENERIC" },
 ]
 </script>
diff --git a/src/classrooms/pages/ClassroomTasks.vue b/src/classrooms/pages/ClassroomTasks.vue
index 0ed9405b..6175530b 100644
--- a/src/classrooms/pages/ClassroomTasks.vue
+++ b/src/classrooms/pages/ClassroomTasks.vue
@@ -27,7 +27,6 @@ const filter = ref<TaskType | "ALL">("ALL")
 const authorizationHeader = computed(() => authStore.authorizationHeader)
 const isTeacher = computed(() => authStore.portalType === "TEACHER")
 
-// 🧠 Same structure as StopPage
 const answers = ref<Map<number, Map<number, number>>>(new Map())
 
 function handleSelect(taskId: number, itemId: number, optionId: number) {
@@ -38,7 +37,6 @@ function handleSelect(taskId: number, itemId: number, optionId: number) {
   answers.value.get(taskId)!.set(itemId, optionId)
 }
 
-// Sidebar filters
 const taskTypes = computed(() => {
   const set = new Set(tasks.value.map((t) => t.taskType))
   return ["ALL", ...Array.from(set)]
@@ -49,7 +47,6 @@ const filteredTasks = computed(() => {
   return tasks.value.filter((t) => t.taskType === filter.value)
 })
 
-// Load tasks
 async function loadTasks() {
   if (!authorizationHeader.value) return
 
@@ -57,7 +54,7 @@ async function loadTasks() {
   error.value = null
 
   try {
-    const stopId = 1 // TODO: make dynamic if needed
+    const stopId = 1 // TODO: make dynamic
 
     const summaries = await requestTasksForStop(
         classroomId.value,
@@ -77,7 +74,6 @@ async function loadTasks() {
   }
 }
 
-// Navigation
 function goToCreate() {
   router.push({
     name: "new-classroom-task",
@@ -96,19 +92,17 @@ onMounted(loadTasks)
 </script>
 
 <template>
-  <section class="mx-auto max-w-7xl px-6 py-6">
+  <section class="mx-auto max-w-7xl px-6 pt-30 pb-6">
     <div class="grid gap-6 lg:grid-cols-[1fr_16rem]">
 
-      <!-- MAIN -->
       <div class="space-y-6">
 
-        <!-- Header -->
         <div class="flex items-center justify-between">
           <h1 class="text-2xl font-bold">Tasks</h1>
 
           <button
               v-if="isTeacher"
-              class="rounded bg-blue-600 px-4 py-2 text-white"
+              class="rounded-xl bg-gray-100 px-4 py-2 text-sm"
               @click="goToCreate"
           >
             Create Task
@@ -118,7 +112,6 @@ onMounted(loadTasks)
         <p v-if="error" class="text-red-600">{{ error }}</p>
         <p v-if="isLoading">Loading...</p>
 
-        <!-- Tasks rendered like StopPage -->
         <div v-if="!isLoading && filteredTasks.length === 0" class="text-gray-500">
           No tasks found
         </div>
@@ -135,30 +128,28 @@ onMounted(loadTasks)
               @select="handleSelect"
           />
 
+          <div v-if="isTeacher" class="flex justify-end -mt-2">
+            <button
+                class="rounded-xl bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-200 transition"
+                @click="goToEdit(task.id)"
+            >
+              Edit task
+            </button>
+          </div>
+
           <hr
               v-if="index < filteredTasks.length - 1"
               class="border-gray-200"
           />
         </div>
 
-        <!-- Edit buttons (teacher only) -->
-        <div v-if="isTeacher" class="pt-4 space-y-2">
-          <button
-              v-for="task in filteredTasks"
-              :key="task.id"
-              class="text-sm text-blue-600 underline"
-              @click="goToEdit(task.id)"
-          >
-            Edit task {{ task.id }}
-          </button>
-        </div>
-
       </div>
 
       <!-- SIDEBAR -->
       <ClassroomTaskSidebar
           :filters="taskTypes"
           :active="filter"
+          @select="filter = $event"
       />
 
     </div>

From 8dcd5c11250a96e6fe6cf15e7c8efc9ca863aa65 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Mon, 27 Apr 2026 13:19:07 +0200
Subject: [PATCH 21/66] update task creation and editing

---
 .../components/tasks/ClassroomTaskSidebar.vue |  11 +-
 .../components/tasks/TaskItemsEditor.vue      |  44 ++---
 .../components/tasks/TaskMetaEditor.vue       |  54 +++---
 .../components/tasks/TaskOptionEditor.vue     |  86 ++++++---
 src/classrooms/pages/EditClassroomTask.vue    | 167 +++++++++++++++++-
 src/classrooms/pages/NewClassroomTask.vue     |  56 +++---
 src/stops/api/stops.api.ts                    |   2 +-
 7 files changed, 319 insertions(+), 101 deletions(-)

diff --git a/src/classrooms/components/tasks/ClassroomTaskSidebar.vue b/src/classrooms/components/tasks/ClassroomTaskSidebar.vue
index ccd5f9bb..d9323ad1 100644
--- a/src/classrooms/components/tasks/ClassroomTaskSidebar.vue
+++ b/src/classrooms/components/tasks/ClassroomTaskSidebar.vue
@@ -1,11 +1,8 @@
 <script setup lang="ts">
+const model = defineModel<string>()
+
 defineProps<{
   filters: string[]
-  active: string
-}>()
-
-const emit = defineEmits<{
-  select: [string]
 }>()
 </script>
 
@@ -21,8 +18,8 @@ const emit = defineEmits<{
           v-for="f in filters"
           :key="f"
           class="w-full rounded border px-3 py-2 text-left text-sm"
-          :class="f === active ? 'bg-gray-900 text-white' : 'hover:bg-gray-50'"
-          @click="emit('select', f)"
+          :class="f === model ? 'bg-gray-900 text-white' : 'hover:bg-gray-50'"
+          @click="model = f"
       >
         {{ f }}
       </button>
diff --git a/src/classrooms/components/tasks/TaskItemsEditor.vue b/src/classrooms/components/tasks/TaskItemsEditor.vue
index af5c9d15..f4ffadcc 100644
--- a/src/classrooms/components/tasks/TaskItemsEditor.vue
+++ b/src/classrooms/components/tasks/TaskItemsEditor.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { TaskItemResponse, TaskType } from "@/stops/api/stops.api.ts"
-import TaskOptionEditor from "./TaskOptionEditor.vue"
+import TaskOptionEditor from "@/classrooms/components/tasks/TaskOptionEditor.vue"
 
 defineProps<{
   items: TaskItemResponse[]
@@ -13,44 +13,44 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <div class="space-y-4">
+  <div class="space-y-6">
 
     <div
         v-for="(item, index) in items"
         :key="item.id"
-        class="rounded-xl border bg-white p-4 space-y-3"
+        class="rounded-xl border bg-white p-5 shadow-sm space-y-4"
     >
 
-      <div class="flex justify-between">
-        <h3 class="font-semibold">Item {{ index + 1 }}</h3>
+      <!-- Header -->
+      <div class="flex items-center justify-between">
+        <h3 class="font-semibold text-gray-800">
+          Item {{ index + 1 }}
+        </h3>
 
         <button
-            class="text-red-600 text-sm"
+            class="text-sm text-red-600 hover:text-red-700"
             @click="emit('remove', index)"
         >
           Remove
         </button>
       </div>
 
-      <input
-          v-model="item.promptText.en"
-          placeholder="Prompt EN"
-          class="input"
-      />
+      <!-- Prompt -->
+      <div class="space-y-2">
+        <p class="text-xs font-semibold uppercase text-gray-500">
+          Prompt
+        </p>
 
-      <input
-          v-model="item.promptText.nb"
-          placeholder="Prompt NB"
-          class="input"
-      />
+        <input v-model="item.promptText.en" placeholder="English prompt" class="input" />
+        <input v-model="item.promptText.nb" placeholder="Norwegian prompt" class="input" />
+      </div>
 
-      <!-- Options only for MCQ-style tasks -->
-      <TaskOptionEditor
-          v-if="item.options"
-          v-model="item.options"
-      />
+      <!-- Options -->
+      <div class="pt-2">
+        <TaskOptionEditor v-if="item.options" v-model="item.options" />
+      </div>
 
     </div>
 
   </div>
-</template>
+</template>
\ No newline at end of file
diff --git a/src/classrooms/components/tasks/TaskMetaEditor.vue b/src/classrooms/components/tasks/TaskMetaEditor.vue
index e729df40..5751891b 100644
--- a/src/classrooms/components/tasks/TaskMetaEditor.vue
+++ b/src/classrooms/components/tasks/TaskMetaEditor.vue
@@ -21,31 +21,45 @@ const form = defineModel<TaskResponse>({
 </script>
 
 <template>
-  <div class="rounded-xl border bg-white p-4 space-y-3">
+  <div class="rounded-xl border bg-white p-5 shadow-sm space-y-5">
 
-    <h2 class="font-semibold">Task Settings</h2>
+    <h2 class="font-semibold text-gray-800">Task settings</h2>
 
-    <input v-model="form.title.en" placeholder="Title EN" class="input" />
-    <input v-model="form.title.nb" placeholder="Title NB" class="input" />
+    <!-- Title -->
+    <div class="space-y-2">
+      <p class="text-xs uppercase text-gray-500">Title</p>
+      <input v-model="form.title.en" placeholder="English title" class="input" />
+      <input v-model="form.title.nb" placeholder="Norwegian title" class="input" />
+    </div>
 
-    <textarea v-model="form.introText.en" placeholder="Intro EN" class="input" />
-    <textarea v-model="form.introText.nb" placeholder="Intro NB" class="input" />
+    <!-- Intro -->
+    <div class="space-y-2">
+      <p class="text-xs uppercase text-gray-500">Introduction</p>
+      <textarea v-model="form.introText.en" placeholder="English intro" class="input" />
+      <textarea v-model="form.introText.nb" placeholder="Norwegian intro" class="input" />
+    </div>
 
+    <!-- Meta -->
     <div class="grid grid-cols-2 gap-3">
-      <select v-model="form.taskType" class="input">
-        <option value="GENERIC">GENERIC</option>
-        <option value="NEWS_COMPARISON">NEWS_COMPARISON</option>
-        <option value="EMAIL_REVIEW">EMAIL_REVIEW</option>
-        <option value="IMAGE_ASSESSMENT">IMAGE_ASSESSMENT</option>
-      </select>
-
-      <input
-          type="number"
-          v-model.number="form.difficultyLevel"
-          class="input"
-          placeholder="Difficulty"
-      />
+      <div class="space-y-2">
+        <p class="text-xs uppercase text-gray-500">Type</p>
+        <select v-model="form.taskType" class="input">
+          <option value="GENERIC">Generic</option>
+          <option value="NEWS_COMPARISON">News comparison</option>
+          <option value="EMAIL_REVIEW">Email review</option>
+          <option value="IMAGE_ASSESSMENT">Image assessment</option>
+        </select>
+      </div>
+
+      <div class="space-y-2">
+        <p class="text-xs uppercase text-gray-500">Difficulty</p>
+        <input
+            type="number"
+            v-model.number="form.difficultyLevel"
+            class="input"
+        />
+      </div>
     </div>
 
   </div>
-</template>
+</template>
\ No newline at end of file
diff --git a/src/classrooms/components/tasks/TaskOptionEditor.vue b/src/classrooms/components/tasks/TaskOptionEditor.vue
index 640dbbb2..5171b41a 100644
--- a/src/classrooms/components/tasks/TaskOptionEditor.vue
+++ b/src/classrooms/components/tasks/TaskOptionEditor.vue
@@ -5,45 +5,79 @@ const options = defineModel<TaskOptionResponse[]>({
   default: () => [],
 })
 
+function ensureExplanation(opt: TaskOptionResponse) {
+  if (!opt.explanationText) {
+    opt.explanationText = { en: "", nb: "" }
+  }
+  return opt.explanationText
+}
+
+function addOption() {
+  options.value.push({
+    id: Date.now(),
+    optionOrder: options.value.length + 1,
+    optionText: { en: "", nb: "" },
+    isCorrect: false,
+    explanationText: { en: "", nb: "" },
+  })
+}
 </script>
 
 <template>
-  <div class="space-y-2">
+  <div class="space-y-4">
 
-    <h4 class="text-sm font-semibold">Options</h4>
+    <h4 class="text-sm font-semibold text-gray-700">
+      Options
+    </h4>
 
     <div
         v-for="(opt, i) in options"
         :key="opt.id"
-        class="flex gap-2"
+        class="rounded-lg border bg-white p-4 space-y-3"
     >
-      <input v-model="opt.optionText.en" class="input" placeholder="EN" />
-      <input v-model="opt.optionText.nb" class="input" placeholder="NB" />
-
-      <input
-          type="checkbox"
-          v-model="opt.isCorrect"
-      />
-
-      <button
-          class="text-red-500 text-sm"
-          @click="options.splice(i, 1)"
-      >
-        X
-      </button>
+
+      <div class="flex items-center gap-2">
+        <input v-model="opt.optionText.en" class="input flex-1" placeholder="English option" />
+        <input v-model="opt.optionText.nb" class="input flex-1" placeholder="Norwegian option" />
+
+        <label class="flex items-center gap-1 text-sm">
+          <input type="checkbox" v-model="opt.isCorrect" />
+          Correct
+        </label>
+
+        <button
+            class="text-sm text-red-600 hover:text-red-700"
+            @click="options.splice(i, 1)"
+        >
+          Remove
+        </button>
+      </div>
+
+      <div class="space-y-2 pt-2 border-t">
+        <p class="text-xs uppercase text-gray-500">
+          Fasit (explanation)
+        </p>
+
+        <input
+            v-model="ensureExplanation(opt).en"
+            class="input"
+            placeholder="English explanation"
+        />
+
+        <input
+            v-model="ensureExplanation(opt).nb"
+            class="input"
+            placeholder="Norwegian explanation"
+        />
+      </div>
+
     </div>
 
     <button
-        class="text-sm text-blue-600"
-        @click="options.push({
-        id: Date.now(),
-        optionOrder: options.length + 1,
-        optionText: { en: '', nb: '' },
-        isCorrect: false,
-        explanationText: null
-      })"
+        class="text-sm text-blue-600 hover:text-blue-700"
+        @click="addOption"
     >
-      + Add option
+      Add option
     </button>
 
   </div>
diff --git a/src/classrooms/pages/EditClassroomTask.vue b/src/classrooms/pages/EditClassroomTask.vue
index 0d5ad0cc..e8136a18 100644
--- a/src/classrooms/pages/EditClassroomTask.vue
+++ b/src/classrooms/pages/EditClassroomTask.vue
@@ -1,3 +1,168 @@
+<script setup lang="ts">
+import { computed, ref, onMounted } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useAuthStore } from "@/auth/model/auth.store"
+
+import {
+  requestCreateTask,
+  requestTask,
+  requestUpdateTask,
+  type TaskResponse,
+} from "@/stops/api/stops.api"
+
+import TaskMetaEditor from "@/classrooms/components/tasks/TaskMetaEditor.vue"
+import TaskItemsEditor from "@/classrooms/components/tasks/TaskItemsEditor.vue"
+
+const route = useRoute()
+const router = useRouter()
+const authStore = useAuthStore()
+
+const classroomId = Number(route.params.classroomId)
+const taskId = route.params.taskId ? Number(route.params.taskId) : null
+
+const isEditMode = computed(() => taskId !== null)
+
+const loading = ref(false)
+const error = ref<string | null>(null)
+
+const form = ref<TaskResponse>({
+  id: 0,
+  classroomId,
+  stopId: 1,
+  createdByTeacherId: 0,
+  title: { en: "", nb: "" },
+  introText: { en: "", nb: "" },
+  difficultyLevel: 1,
+  taskType: "GENERIC",
+  passingRule: "ALL_CORRECT",
+  passingScore: null,
+  maxScore: 1,
+  published: false,
+  items: [],
+})
+
+async function load() {
+  if (!taskId) return
+  if (!authStore.authorizationHeader) return
+
+  loading.value = true
+  error.value = null
+
+  try {
+    const data = await requestTask(
+        classroomId,
+        taskId,
+        authStore.authorizationHeader,
+    )
+
+    form.value = data
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : "Failed to load task"
+  } finally {
+    loading.value = false
+  }
+}
+
+function addItem() {
+  form.value.items.push({
+    id: Date.now(),
+    itemOrder: form.value.items.length + 1,
+    promptText: { en: "", nb: "" },
+    mediaUrl: null,
+    metadataJson: null,
+    options: [],
+  })
+}
+
+async function save() {
+  if (!authStore.authorizationHeader) return
+
+  loading.value = true
+  error.value = null
+
+  try {
+    if (isEditMode.value && taskId !== null) {
+      await requestUpdateTask(
+          classroomId,
+          taskId,
+          form.value,
+          authStore.authorizationHeader,
+      )
+    } else {
+      await requestCreateTask(
+          classroomId,
+          form.value,
+          authStore.authorizationHeader,
+      )
+    }
+
+    await router.push({
+      name: "classroom-tasks",
+      params: { classroomId },
+    })
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : "Failed to save task"
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(load)
+</script>
+
 <template>
-  Edit task
+  <div class="mx-auto max-w-5xl px-6 py-8 pt-28 space-y-8">
+
+    <div class="space-y-1">
+      <h1 class="text-3xl font-bold text-gray-900">
+        {{ isEditMode ? "Edit Task" : "Create Task" }}
+      </h1>
+
+      <p v-if="error" class="text-sm text-red-600">
+        {{ error }}
+      </p>
+    </div>
+
+    <TaskMetaEditor v-model="form" />
+
+    <div class="flex items-center justify-between pt-2">
+      <h2 class="text-xl font-semibold text-gray-900">
+        Items
+      </h2>
+
+      <button
+          class="rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 transition"
+          @click="addItem"
+      >
+        + Add item
+      </button>
+    </div>
+
+    <TaskItemsEditor
+        :items="form.items"
+        :task-type="form.taskType"
+    />
+
+    <div
+        class="sticky bottom-0 mt-6 flex justify-end gap-3 border-t bg-white/90 backdrop-blur px-6 py-4"
+    >
+
+      <button
+          class="rounded-lg bg-gray-200 px-5 py-2 hover:bg-gray-300 transition"
+          @click="router.back()"
+      >
+        Cancel
+      </button>
+
+      <button
+          class="rounded-lg bg-green-600 px-6 py-2 text-white hover:bg-green-700 transition disabled:opacity-50"
+          :disabled="loading"
+          @click="save"
+      >
+        {{ isEditMode ? "Save changes" : "Create task" }}
+      </button>
+
+    </div>
+
+  </div>
 </template>
\ No newline at end of file
diff --git a/src/classrooms/pages/NewClassroomTask.vue b/src/classrooms/pages/NewClassroomTask.vue
index 8ee779a1..2da6a67c 100644
--- a/src/classrooms/pages/NewClassroomTask.vue
+++ b/src/classrooms/pages/NewClassroomTask.vue
@@ -2,6 +2,7 @@
 import { computed, ref, onMounted } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useAuthStore } from "@/auth/model/auth.store"
+
 import {
   requestCreateTask,
   requestTask,
@@ -9,8 +10,8 @@ import {
   type TaskResponse,
 } from "@/stops/api/stops.api"
 
-import TaskMetaEditor from "@/classrooms/components/tasks/TaskMetaEditor.vue";
-import TaskItemsEditor from "@/classrooms/components/tasks/TaskItemsEditor.vue";
+import TaskMetaEditor from "@/classrooms/components/tasks/TaskMetaEditor.vue"
+import TaskItemsEditor from "@/classrooms/components/tasks/TaskItemsEditor.vue"
 
 const route = useRoute()
 const router = useRouter()
@@ -55,6 +56,9 @@ async function load() {
   }
 }
 
+/**
+ * Add item
+ */
 function addItem() {
   form.value.items.push({
     id: Date.now(),
@@ -66,10 +70,9 @@ function addItem() {
   })
 }
 
-function removeItem(index: number) {
-  form.value.items.splice(index, 1)
-}
-
+/**
+ * Save task
+ */
 async function save() {
   if (!authStore.authorizationHeader) return
 
@@ -104,48 +107,53 @@ onMounted(load)
 </script>
 
 <template>
-  <div class="mx-auto max-w-5xl p-6 space-y-6">
+  <div class="mx-auto max-w-5xl px-6 py-6 pt-30 space-y-8">
 
-    <h1 class="text-2xl font-bold">
-      {{ isEditMode ? "Edit Task" : "Create Task" }}
-    </h1>
+    <div class="space-y-2">
+      <h1 class="text-3xl font-bold">
+        {{ isEditMode ? "Edit Task" : "Create Task" }}
+      </h1>
 
-    <p v-if="error" class="text-red-600">{{ error }}</p>
+      <p v-if="error" class="text-red-600">
+        {{ error }}
+      </p>
+    </div>
 
     <TaskMetaEditor v-model="form" />
 
-    <div class="flex items-center justify-between">
-      <h2 class="text-lg font-semibold">Items</h2>
+    <div class="flex items-center justify-between pt-2">
+      <h2 class="text-xl font-semibold">Items</h2>
 
       <button
-          class="rounded bg-blue-600 px-3 py-1 text-white"
+          class="rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 transition"
           @click="addItem"
       >
-        Add Item
+        + Add Item
       </button>
     </div>
 
     <TaskItemsEditor
         :items="form.items"
         :task-type="form.taskType"
-        @remove="removeItem"
     />
 
-    <div class="flex gap-3 pt-4">
+    <div class="sticky bottom-0 p-4 flex justify-end gap-3">
+
       <button
-          class="rounded bg-green-600 px-4 py-2 text-white"
-          :disabled="loading"
-          @click="save"
+          class="rounded-lg bg-gray-200 px-5 py-2 hover:bg-gray-300"
+          @click="router.back()"
       >
-        Save Task
+        Cancel
       </button>
 
       <button
-          class="rounded bg-gray-300 px-4 py-2"
-          @click="router.back()"
+          class="rounded-lg bg-green-600 px-6 py-2 text-white hover:bg-green-700"
+          :disabled="loading"
+          @click="save"
       >
-        Cancel
+        {{ isEditMode ? "Save Changes" : "Create Task" }}
       </button>
+
     </div>
 
   </div>
diff --git a/src/stops/api/stops.api.ts b/src/stops/api/stops.api.ts
index 9d0f2a28..e22884b5 100644
--- a/src/stops/api/stops.api.ts
+++ b/src/stops/api/stops.api.ts
@@ -50,7 +50,7 @@ export interface TaskOptionResponse {
   optionOrder: number
   optionText: LocalizedText
   isCorrect: boolean | null
-  explanationText: LocalizedOptionalText | null
+  explanationText: LocalizedOptionalText
 }
 
 export interface TaskItemResponse {

From bcd880c71905e29bb32760329f9236c78ed9956d Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Mon, 27 Apr 2026 14:57:58 +0200
Subject: [PATCH 22/66] styling

---
 src/classrooms/pages/EditClassroomTask.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/classrooms/pages/EditClassroomTask.vue b/src/classrooms/pages/EditClassroomTask.vue
index e8136a18..e962c51e 100644
--- a/src/classrooms/pages/EditClassroomTask.vue
+++ b/src/classrooms/pages/EditClassroomTask.vue
@@ -144,7 +144,7 @@ onMounted(load)
     />
 
     <div
-        class="sticky bottom-0 mt-6 flex justify-end gap-3 border-t bg-white/90 backdrop-blur px-6 py-4"
+        class="sticky bottom-0 p-4 flex justify-end gap-3"
     >
 
       <button

From 3c3872e27f1d5a556e771de787a6fb9a7fddd600 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Mon, 27 Apr 2026 22:05:15 +0200
Subject: [PATCH 23/66] update task view

---
 .../components/composables/UseTeacherStops.ts |  19 +++
 .../components/tasks/ClassroomTaskSidebar.vue |  37 +++--
 src/classrooms/pages/ClassroomDetails.vue     |   2 +-
 src/classrooms/pages/ClassroomTasks.vue       | 137 ++++++++----------
 src/classrooms/pages/NewClassroomTask.vue     |  75 +++++++---
 src/classrooms/routes.ts                      |   3 +-
 src/stops/api/stops.api.ts                    |  37 +++++
 .../model/teacherPlaytestMap.store.ts         |   5 +-
 8 files changed, 203 insertions(+), 112 deletions(-)
 create mode 100644 src/classrooms/components/composables/UseTeacherStops.ts

diff --git a/src/classrooms/components/composables/UseTeacherStops.ts b/src/classrooms/components/composables/UseTeacherStops.ts
new file mode 100644
index 00000000..fb90c8c7
--- /dev/null
+++ b/src/classrooms/components/composables/UseTeacherStops.ts
@@ -0,0 +1,19 @@
+import { computed, onMounted, type Ref } from 'vue'
+import { useTeacherPlaytestMapStore } from '@/teacher-playtest/model/teacherPlaytestMap.store'
+
+export function useTeacherStops(classroomId: Ref<number>) {
+  const mapStore = useTeacherPlaytestMapStore()
+
+  onMounted(() => {
+    if (classroomId.value) {
+      mapStore.fetchMapOverview(classroomId.value)
+    }
+  })
+
+  return {
+    stops: computed(() => mapStore.stops),
+    status: computed(() => mapStore.status),
+    error: computed(() => mapStore.errorMessage),
+    reload: () => mapStore.fetchMapOverview(classroomId.value),
+  }
+}
\ No newline at end of file
diff --git a/src/classrooms/components/tasks/ClassroomTaskSidebar.vue b/src/classrooms/components/tasks/ClassroomTaskSidebar.vue
index d9323ad1..f1fbfcc1 100644
--- a/src/classrooms/components/tasks/ClassroomTaskSidebar.vue
+++ b/src/classrooms/components/tasks/ClassroomTaskSidebar.vue
@@ -1,27 +1,42 @@
 <script setup lang="ts">
-const model = defineModel<string>()
+import type { MapStopOverview } from "@/map/model/map.types"
+import { useI18n } from "vue-i18n"
+
+const { t } = useI18n()
 
 defineProps<{
-  filters: string[]
+  stops: MapStopOverview[]
+  activeSlug: string
+}>()
+
+const emit = defineEmits<{
+  selectStop: [slug: string]
 }>()
 </script>
 
 <template>
-  <aside class="rounded-lg border bg-white p-4 shadow-sm">
+  <aside class="rounded-lg border border-zinc-200 bg-white p-4 shadow-sm">
 
-    <h3 class="mb-3 text-sm font-semibold uppercase text-gray-500">
-      Filter tasks
+    <h3 class="mb-4 text-sm font-semibold uppercase tracking-wide text-zinc-500">
+      Stops
     </h3>
 
     <div class="space-y-2">
       <button
-          v-for="f in filters"
-          :key="f"
-          class="w-full rounded border px-3 py-2 text-left text-sm"
-          :class="f === model ? 'bg-gray-900 text-white' : 'hover:bg-gray-50'"
-          @click="model = f"
+          v-for="stop in stops"
+          :key="stop.stopId"
+          type="button"
+          class="w-full rounded-md border px-3 py-2 text-left text-sm transition"
+          :class="
+          stop.slug === activeSlug
+            ? 'border-zinc-900 bg-zinc-900 text-white'
+            : 'border-zinc-300 bg-white text-zinc-700 hover:bg-zinc-50'
+        "
+          @click="emit('selectStop', stop.slug!)"
       >
-        {{ f }}
+        <span class="block truncate">
+          {{ stop.title }}
+        </span>
       </button>
     </div>
 
diff --git a/src/classrooms/pages/ClassroomDetails.vue b/src/classrooms/pages/ClassroomDetails.vue
index 49db538c..88b3722f 100644
--- a/src/classrooms/pages/ClassroomDetails.vue
+++ b/src/classrooms/pages/ClassroomDetails.vue
@@ -238,7 +238,7 @@ async function saveEdit() {
       <ClassroomCard
           :title="t('classroomDetails.taskOverview.title')"
           :description="t('classroomDetails.taskOverview.description')"
-          :to="{ name: 'classroom-tasks', params: { classroomId } }"
+          :to="{ name: 'classroom-tasks', params: { classroomId, slug: 'nyhetskvartalet' } }"
       />
 
       <ClassroomCard
diff --git a/src/classrooms/pages/ClassroomTasks.vue b/src/classrooms/pages/ClassroomTasks.vue
index 6175530b..6036badf 100644
--- a/src/classrooms/pages/ClassroomTasks.vue
+++ b/src/classrooms/pages/ClassroomTasks.vue
@@ -1,79 +1,68 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from "vue"
+import { computed, onMounted, watch, ref } from "vue"
 import { useRoute, useRouter } from "vue-router"
-import { useAuthStore } from "@/auth/model/auth.store"
-import {
-  requestTasksForStop,
-  requestTask,
-  type TaskResponse,
-  type TaskType,
-} from "@/stops/api/stops.api"
 
 import TaskCard from "@/stops/components/TaskCard.vue"
 import ClassroomTaskSidebar from "@/classrooms/components/tasks/ClassroomTaskSidebar.vue"
 
+import { useTeacherPlaytestMapStore } from "@/teacher-playtest/model/teacherPlaytestMap.store"
+import { useTeacherPlaytestStopStore } from "@/teacher-playtest/model/teacherPlaytestStop.store"
+
 const route = useRoute()
 const router = useRouter()
-const authStore = useAuthStore()
 
 const classroomId = computed(() => Number(route.params.classroomId))
+const slug = computed(() => route.params.slug as string)
 
-const tasks = ref<TaskResponse[]>([])
-const isLoading = ref(false)
-const error = ref<string | null>(null)
-
-const filter = ref<TaskType | "ALL">("ALL")
+const mapStore = useTeacherPlaytestMapStore()
+const stopStore = useTeacherPlaytestStopStore()
 
-const authorizationHeader = computed(() => authStore.authorizationHeader)
-const isTeacher = computed(() => authStore.portalType === "TEACHER")
+const filter = ref<"ALL" | string>("ALL")
 
-const answers = ref<Map<number, Map<number, number>>>(new Map())
+const stops = computed(() => mapStore.stops)
+const tasks = computed(() => stopStore.tasks)
+const answers = computed(() => stopStore.answers)
 
-function handleSelect(taskId: number, itemId: number, optionId: number) {
-  if (!answers.value.has(taskId)) {
-    answers.value.set(taskId, new Map())
-  }
-
-  answers.value.get(taskId)!.set(itemId, optionId)
-}
+const isLoading = computed(() => stopStore.status === "loading")
+const error = computed(() => stopStore.errorMessage)
 
 const taskTypes = computed(() => {
-  const set = new Set(tasks.value.map((t) => t.taskType))
+  const set = new Set(tasks.value.map(t => t.taskType))
   return ["ALL", ...Array.from(set)]
 })
 
 const filteredTasks = computed(() => {
   if (filter.value === "ALL") return tasks.value
-  return tasks.value.filter((t) => t.taskType === filter.value)
+  return tasks.value.filter(t => t.taskType === filter.value)
 })
 
-async function loadTasks() {
-  if (!authorizationHeader.value) return
-
-  isLoading.value = true
-  error.value = null
-
-  try {
-    const stopId = 1 // TODO: make dynamic
-
-    const summaries = await requestTasksForStop(
-        classroomId.value,
-        stopId,
-        authorizationHeader.value,
-    )
-
-    tasks.value = await Promise.all(
-        summaries.map((t) =>
-            requestTask(classroomId.value, t.id, authorizationHeader.value!),
-        ),
-    )
-  } catch (e) {
-    error.value = e instanceof Error ? e.message : "Failed to load tasks"
-  } finally {
-    isLoading.value = false
-  }
+function selectStop(newSlug: string) {
+  router.push({
+    name: "classroom-tasks",
+    params: {
+      classroomId: classroomId.value,
+      slug: newSlug,
+    },
+  })
 }
 
+function handleSelect(taskId: number, itemId: number, optionId: number) {
+  stopStore.setAnswer(taskId, itemId, optionId)
+}
+
+onMounted(() => {
+  mapStore.fetchMapOverview(classroomId.value)
+})
+
+watch(
+    () => slug.value,
+    (newSlug) => {
+      if (!newSlug) return
+      stopStore.loadTasksForStop(classroomId.value, newSlug)
+    },
+    { immediate: true }
+)
+
 function goToCreate() {
   router.push({
     name: "new-classroom-task",
@@ -87,8 +76,6 @@ function goToEdit(taskId: number) {
     params: { classroomId: classroomId.value, taskId },
   })
 }
-
-onMounted(loadTasks)
 </script>
 
 <template>
@@ -99,19 +86,18 @@ onMounted(loadTasks)
 
         <div class="flex items-center justify-between">
           <h1 class="text-2xl font-bold">Tasks</h1>
-
-          <button
-              v-if="isTeacher"
-              class="rounded-xl bg-gray-100 px-4 py-2 text-sm"
-              @click="goToCreate"
-          >
-            Create Task
-          </button>
         </div>
 
         <p v-if="error" class="text-red-600">{{ error }}</p>
         <p v-if="isLoading">Loading...</p>
 
+        <button
+            class="rounded-xl bg-gray-100 px-4 py-2 text-sm"
+            @click="goToCreate"
+        >
+          Create Task
+        </button>
+
         <div v-if="!isLoading && filteredTasks.length === 0" class="text-gray-500">
           No tasks found
         </div>
@@ -128,28 +114,25 @@ onMounted(loadTasks)
               @select="handleSelect"
           />
 
-          <div v-if="isTeacher" class="flex justify-end -mt-2">
-            <button
-                class="rounded-xl bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-200 transition"
-                @click="goToEdit(task.id)"
-            >
-              Edit task
-            </button>
-          </div>
-
-          <hr
-              v-if="index < filteredTasks.length - 1"
-              class="border-gray-200"
-          />
+          <button
+              class="rounded-xl bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-200 transition"
+              @click="goToEdit(task.id)"
+          >
+            Edit task
+          </button>
+
+          <hr v-if="index < filteredTasks.length - 1" class="border-gray-200" />
         </div>
 
       </div>
 
-      <!-- SIDEBAR -->
       <ClassroomTaskSidebar
+          :stops="stops"
+          :active-slug="slug"
           :filters="taskTypes"
-          :active="filter"
-          @select="filter = $event"
+          :active-filter="filter"
+          @select-stop="selectStop"
+          @select-filter="filter = $event"
       />
 
     </div>
diff --git a/src/classrooms/pages/NewClassroomTask.vue b/src/classrooms/pages/NewClassroomTask.vue
index 2da6a67c..f27203af 100644
--- a/src/classrooms/pages/NewClassroomTask.vue
+++ b/src/classrooms/pages/NewClassroomTask.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, onMounted } from "vue"
+import { computed, ref, onMounted, watch } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useAuthStore } from "@/auth/model/auth.store"
 
@@ -12,12 +12,13 @@ import {
 
 import TaskMetaEditor from "@/classrooms/components/tasks/TaskMetaEditor.vue"
 import TaskItemsEditor from "@/classrooms/components/tasks/TaskItemsEditor.vue"
+import { useTeacherStops } from "@/classrooms/components/composables/UseTeacherStops"
 
 const route = useRoute()
 const router = useRouter()
 const authStore = useAuthStore()
 
-const classroomId = Number(route.params.classroomId)
+const classroomId = computed(() => Number(route.params.classroomId))
 const taskId = route.params.taskId ? Number(route.params.taskId) : null
 
 const isEditMode = computed(() => taskId !== null)
@@ -25,10 +26,15 @@ const isEditMode = computed(() => taskId !== null)
 const loading = ref(false)
 const error = ref<string | null>(null)
 
+const { stops, status: stopsStatus, error: stopsError } =
+    useTeacherStops(classroomId)
+
+const selectedStopId = ref<number | null>(null)
+
 const form = ref<TaskResponse>({
   id: 0,
-  classroomId,
-  stopId: 1,
+  classroomId: classroomId.value,
+  stopId: 0,
   createdByTeacherId: 0,
   title: { en: "", nb: "" },
   introText: { en: "", nb: "" },
@@ -46,19 +52,25 @@ async function load() {
 
   loading.value = true
   try {
-    form.value = await requestTask(
-        classroomId,
+    const task = await requestTask(
+        classroomId.value,
         taskId,
         authStore.authorizationHeader,
     )
+
+    form.value = task
+    selectedStopId.value = task.stopId
   } finally {
     loading.value = false
   }
 }
 
-/**
- * Add item
- */
+watch(stops, (newStops) => {
+  if (!selectedStopId.value && newStops.length > 0) {
+    selectedStopId.value = newStops[0]!.stopId
+  }
+})
+
 function addItem() {
   form.value.items.push({
     id: Date.now(),
@@ -70,32 +82,34 @@ function addItem() {
   })
 }
 
-/**
- * Save task
- */
 async function save() {
-  if (!authStore.authorizationHeader) return
+  if (!authStore.authorizationHeader || selectedStopId.value === null) return
 
   loading.value = true
   error.value = null
 
   try {
+    form.value.stopId = selectedStopId.value
+
     if (isEditMode.value) {
       await requestUpdateTask(
-          classroomId,
+          classroomId.value,
           taskId!,
           form.value,
           authStore.authorizationHeader,
       )
     } else {
       await requestCreateTask(
-          classroomId,
+          classroomId.value,
           form.value,
           authStore.authorizationHeader,
       )
     }
 
-    router.push({ name: "classroom-tasks", params: { classroomId } })
+    router.push({
+      name: "classroom-tasks",
+      params: { classroomId: classroomId.value, slug: 'nyhetskvartalet' },
+    })
   } catch (e) {
     error.value = e instanceof Error ? e.message : "Save failed"
   } finally {
@@ -119,6 +133,33 @@ onMounted(load)
       </p>
     </div>
 
+    <div class="space-y-2">
+      <label class="text-sm font-medium text-gray-700">Stop</label>
+
+      <select
+          v-model="selectedStopId"
+          class="w-full rounded-lg border px-3 py-2"
+      >
+        <option disabled :value="null">Select stop</option>
+
+        <option
+            v-for="stop in stops"
+            :key="stop.stopId"
+            :value="stop.stopId"
+        >
+          {{ stop.displayOrder }}. {{ stop.title }}
+        </option>
+      </select>
+
+      <p v-if="stopsStatus === 'loading'" class="text-sm text-gray-400">
+        Loading stops...
+      </p>
+
+      <p v-if="stopsError" class="text-sm text-red-600">
+        {{ stopsError }}
+      </p>
+    </div>
+
     <TaskMetaEditor v-model="form" />
 
     <div class="flex items-center justify-between pt-2">
@@ -148,7 +189,7 @@ onMounted(load)
 
       <button
           class="rounded-lg bg-green-600 px-6 py-2 text-white hover:bg-green-700"
-          :disabled="loading"
+          :disabled="loading || selectedStopId === null"
           @click="save"
       >
         {{ isEditMode ? "Save Changes" : "Create Task" }}
diff --git a/src/classrooms/routes.ts b/src/classrooms/routes.ts
index 7fea89a6..c3891dc0 100644
--- a/src/classrooms/routes.ts
+++ b/src/classrooms/routes.ts
@@ -9,7 +9,6 @@ import TeacherPlaytestMapPage from "@/teacher-playtest/pages/TeacherPlaytestMapP
 import NotificationsPage from "@/notifications/pages/NotificationsPage.vue";
 import TeacherPlaytestStopPage from "@/teacher-playtest/pages/TeacherPlaytestStopPage.vue";
 import ClassroomTasks from "@/classrooms/pages/ClassroomTasks.vue";
-import ClassroomNotifications from "@/classrooms/pages/ClassroomNotifications.vue";
 import ClassroomMystery from "@/classrooms/pages/ClassroomMystery.vue";
 import NewClassroomTask from "@/classrooms/pages/NewClassroomTask.vue";
 import EditClassroomTask from "@/classrooms/pages/EditClassroomTask.vue";
@@ -72,7 +71,7 @@ export function createClassroomRoutes(prefix: string): RouteRecordRaw[] {
     component: NotificationsPage,
   },
   {
-    path: "classrooms/:classroomId/tasks",
+    path: "classrooms/:classroomId/tasks/:slug",
     name: "classroom-tasks",
     component: ClassroomTasks,
   },
diff --git a/src/stops/api/stops.api.ts b/src/stops/api/stops.api.ts
index e22884b5..93381256 100644
--- a/src/stops/api/stops.api.ts
+++ b/src/stops/api/stops.api.ts
@@ -35,6 +35,43 @@ async function fetchJson<T>(
 
 // ---- Response shapes (mirrors backend TaskResponses.kt) ----
 
+export interface LocalizedRequiredTextRequest {
+  nb: string
+  en: string
+}
+
+export interface LocalizedOptionalTextRequest {
+  nb: string | null
+  en: string | null
+}
+
+export interface TaskOptionRequest {
+  optionOrder: number
+  optionText: LocalizedRequiredTextRequest
+  isCorrect: boolean
+  explanationText: LocalizedOptionalTextRequest | null
+}
+
+export interface TaskItemRequest {
+  itemOrder: number
+  promptText: LocalizedRequiredTextRequest
+  mediaUrl: string | null
+  metadataJson: string | null
+  options: TaskOptionRequest[]
+}
+
+export interface TaskForm {
+  stopId: number
+  title: LocalizedRequiredTextRequest
+  introText: LocalizedOptionalTextRequest
+  difficultyLevel: number
+  taskType: TaskType
+  passingRule: string
+  passingScore: number | null
+  maxScore: number
+  items: TaskItemRequest[]
+}
+
 export interface LocalizedText {
   nb: string
   en: string
diff --git a/src/teacher-playtest/model/teacherPlaytestMap.store.ts b/src/teacher-playtest/model/teacherPlaytestMap.store.ts
index ccf89146..957d4697 100644
--- a/src/teacher-playtest/model/teacherPlaytestMap.store.ts
+++ b/src/teacher-playtest/model/teacherPlaytestMap.store.ts
@@ -1,10 +1,7 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
 import { useAuthStore } from '@/auth/model/auth.store'
-import {
-  requestTeacherPlaytestMapOverview,
-  requestTeacherPlaytestMapStopBySlug,
-} from '@/teacher-playtest/api/teacher-playtest.api'
+import { requestTeacherPlaytestMapOverview, requestTeacherPlaytestMapStopBySlug } from '@/teacher-playtest/api/teacher-playtest.api'
 import type { MapStopOverview } from '@/map/model/map.types'
 
 export type TeacherPlaytestMapStatus = 'idle' | 'loading' | 'loaded' | 'error'

From b32e9f3b96d133e8a6f1c66915c44ee992a53b98 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Mon, 27 Apr 2026 22:18:28 +0200
Subject: [PATCH 24/66] route to classroom details

---
 src/teacher-playtest/pages/TeacherPlaytestMapPage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/teacher-playtest/pages/TeacherPlaytestMapPage.vue b/src/teacher-playtest/pages/TeacherPlaytestMapPage.vue
index 8127092e..fc14f298 100644
--- a/src/teacher-playtest/pages/TeacherPlaytestMapPage.vue
+++ b/src/teacher-playtest/pages/TeacherPlaytestMapPage.vue
@@ -13,7 +13,7 @@ const mapStore = useTeacherPlaytestMapStore()
 const classroomId = computed(() => Number(route.params.classroomId))
 const homeRoute = computed(() =>
   router.resolve({
-    name: 'classroom-details',
+    name: 'teacher-classroom-details',
     params: { classroomId: classroomId.value },
   }).fullPath,
 )

From 9fcd05b37423295f854a32919de3b6b3c735be57 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Tue, 28 Apr 2026 09:42:57 +0200
Subject: [PATCH 25/66] allow seeing unpublished tasks

---
 src/classrooms/pages/ClassroomTasks.vue    | 135 +++++++++++++--------
 src/classrooms/pages/EditClassroomTask.vue |   3 +-
 src/classrooms/pages/NewClassroomTask.vue  |   6 +-
 3 files changed, 94 insertions(+), 50 deletions(-)

diff --git a/src/classrooms/pages/ClassroomTasks.vue b/src/classrooms/pages/ClassroomTasks.vue
index 6036badf..6d970a75 100644
--- a/src/classrooms/pages/ClassroomTasks.vue
+++ b/src/classrooms/pages/ClassroomTasks.vue
@@ -1,39 +1,70 @@
 <script setup lang="ts">
 import { computed, onMounted, watch, ref } from "vue"
 import { useRoute, useRouter } from "vue-router"
+import { useAuthStore } from "@/auth/model/auth.store"
 
 import TaskCard from "@/stops/components/TaskCard.vue"
 import ClassroomTaskSidebar from "@/classrooms/components/tasks/ClassroomTaskSidebar.vue"
 
-import { useTeacherPlaytestMapStore } from "@/teacher-playtest/model/teacherPlaytestMap.store"
-import { useTeacherPlaytestStopStore } from "@/teacher-playtest/model/teacherPlaytestStop.store"
+import { useTeacherStops } from "@/classrooms/components/composables/UseTeacherStops"
+
+import { requestTasksForStop, requestTask, type TaskResponse } from "@/stops/api/stops.api"
 
 const route = useRoute()
 const router = useRouter()
+const authStore = useAuthStore()
 
 const classroomId = computed(() => Number(route.params.classroomId))
 const slug = computed(() => route.params.slug as string)
 
-const mapStore = useTeacherPlaytestMapStore()
-const stopStore = useTeacherPlaytestStopStore()
+const { stops, status: stopsStatus } = useTeacherStops(classroomId)
 
-const filter = ref<"ALL" | string>("ALL")
+const tasks = ref<TaskResponse[]>([])
+const isLoading = ref(false)
+const error = ref<string | null>(null)
 
-const stops = computed(() => mapStore.stops)
-const tasks = computed(() => stopStore.tasks)
-const answers = computed(() => stopStore.answers)
+const filter = ref<"ALL" | string>("ALL")
 
-const isLoading = computed(() => stopStore.status === "loading")
-const error = computed(() => stopStore.errorMessage)
+async function loadTasksForSlug(currentSlug: string) {
+  if (!authStore.authorizationHeader) return
+  if (!currentSlug) return
+
+  const stop = stops.value.find((s) => s.slug === currentSlug)
+  if (!stop) return
+
+  isLoading.value = true
+  error.value = null
+
+  try {
+    const summaries = await requestTasksForStop(
+        classroomId.value,
+        stop.stopId,
+        authStore.authorizationHeader,
+    )
+    tasks.value = await Promise.all(
+        summaries.map((s) =>
+            requestTask(
+                classroomId.value,
+                s.id,
+                authStore.authorizationHeader!,
+            ),
+        ),
+    )
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : "Failed to load tasks"
+  } finally {
+    isLoading.value = false
+  }
+}
 
 const taskTypes = computed(() => {
-  const set = new Set(tasks.value.map(t => t.taskType))
+  const set = new Set(tasks.value.map((t) => t.taskType))
   return ["ALL", ...Array.from(set)]
 })
 
 const filteredTasks = computed(() => {
   if (filter.value === "ALL") return tasks.value
-  return tasks.value.filter(t => t.taskType === filter.value)
+  return tasks.value.filter((t) => t.taskType === filter.value)
 })
 
 function selectStop(newSlug: string) {
@@ -46,23 +77,6 @@ function selectStop(newSlug: string) {
   })
 }
 
-function handleSelect(taskId: number, itemId: number, optionId: number) {
-  stopStore.setAnswer(taskId, itemId, optionId)
-}
-
-onMounted(() => {
-  mapStore.fetchMapOverview(classroomId.value)
-})
-
-watch(
-    () => slug.value,
-    (newSlug) => {
-      if (!newSlug) return
-      stopStore.loadTasksForStop(classroomId.value, newSlug)
-    },
-    { immediate: true }
-)
-
 function goToCreate() {
   router.push({
     name: "new-classroom-task",
@@ -76,6 +90,18 @@ function goToEdit(taskId: number) {
     params: { classroomId: classroomId.value, taskId },
   })
 }
+
+onMounted(() => {
+})
+
+watch(
+    () => [slug.value, stops.value],
+    ([newSlug, stopsLoaded]) => {
+      if (!newSlug || stopsLoaded?.length === 0) return
+      loadTasksForSlug(newSlug)
+    },
+    { immediate: true },
+)
 </script>
 
 <template>
@@ -86,18 +112,18 @@ function goToEdit(taskId: number) {
 
         <div class="flex items-center justify-between">
           <h1 class="text-2xl font-bold">Tasks</h1>
+
+          <button
+              class="rounded-xl bg-gray-100 px-4 py-2 text-sm"
+              @click="goToCreate"
+          >
+            Create Task
+          </button>
         </div>
 
         <p v-if="error" class="text-red-600">{{ error }}</p>
         <p v-if="isLoading">Loading...</p>
 
-        <button
-            class="rounded-xl bg-gray-100 px-4 py-2 text-sm"
-            @click="goToCreate"
-        >
-          Create Task
-        </button>
-
         <div v-if="!isLoading && filteredTasks.length === 0" class="text-gray-500">
           No tasks found
         </div>
@@ -105,25 +131,39 @@ function goToEdit(taskId: number) {
         <div
             v-for="(task, index) in filteredTasks"
             :key="task.id"
-            class="flex flex-col gap-8"
+            class="flex flex-col gap-6"
         >
+          <div class="flex justify-between items-center">
+            <span
+                v-if="!task.published"
+                class="text-xs bg-yellow-100 text-yellow-700 px-2 py-1 rounded"
+            >
+              Unpublished
+            </span>
+
+            <span
+                v-else
+                class="text-xs bg-green-100 text-green-700 px-2 py-1 rounded"
+            >
+              Published
+            </span>
+          </div>
+
           <TaskCard
               :task="task"
-              :selected-answers="answers.get(task.id)"
               :show-answers="true"
-              @select="handleSelect"
           />
 
-          <button
-              class="rounded-xl bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-200 transition"
-              @click="goToEdit(task.id)"
-          >
-            Edit task
-          </button>
-
+          <div class="flex justify-end -mt-2">
+            <button
+                class="rounded-xl bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-200 transition"
+                @click="goToEdit(task.id)"
+            >
+              Edit task
+            </button>
+          </div>
           <hr v-if="index < filteredTasks.length - 1" class="border-gray-200" />
         </div>
-
       </div>
 
       <ClassroomTaskSidebar
@@ -134,7 +174,6 @@ function goToEdit(taskId: number) {
           @select-stop="selectStop"
           @select-filter="filter = $event"
       />
-
     </div>
   </section>
 </template>
\ No newline at end of file
diff --git a/src/classrooms/pages/EditClassroomTask.vue b/src/classrooms/pages/EditClassroomTask.vue
index e962c51e..6df41346 100644
--- a/src/classrooms/pages/EditClassroomTask.vue
+++ b/src/classrooms/pages/EditClassroomTask.vue
@@ -96,9 +96,10 @@ async function save() {
       )
     }
 
+
     await router.push({
       name: "classroom-tasks",
-      params: { classroomId },
+      params: { classroomId, slug: 'nyhetskvartalet' },
     })
   } catch (e) {
     error.value = e instanceof Error ? e.message : "Failed to save task"
diff --git a/src/classrooms/pages/NewClassroomTask.vue b/src/classrooms/pages/NewClassroomTask.vue
index f27203af..6a46b064 100644
--- a/src/classrooms/pages/NewClassroomTask.vue
+++ b/src/classrooms/pages/NewClassroomTask.vue
@@ -106,9 +106,13 @@ async function save() {
       )
     }
 
+    const selectedStop = computed(() =>
+        stops.value.find(s => s.stopId === selectedStopId.value)
+    )
+
     router.push({
       name: "classroom-tasks",
-      params: { classroomId: classroomId.value, slug: 'nyhetskvartalet' },
+      params: { classroomId: classroomId.value, slug: selectedStop.value?.slug ?? undefined },
     })
   } catch (e) {
     error.value = e instanceof Error ? e.message : "Save failed"

From c846ab14ce41688ca47f19d33ca4ca81a65e1b72 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Tue, 28 Apr 2026 11:08:05 +0200
Subject: [PATCH 26/66] update join routing to determine path based on
 membership

---
 src/app/router/index.ts                  | 19 +++++++++++++------
 src/classrooms/model/classrooms.store.ts | 12 ++----------
 src/classrooms/pages/JoinClassroom.vue   |  6 +++++-
 3 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/app/router/index.ts b/src/app/router/index.ts
index 1a0c6365..f973325e 100644
--- a/src/app/router/index.ts
+++ b/src/app/router/index.ts
@@ -104,19 +104,26 @@ export function createAppRouter(
       const status = user.pupilProfile?.membershipStatus;
       const classroomId = user.pupilProfile?.currentClassroomId;
       const isJoinPage = to.name === "pupil-join-classroom";
-
-      if (!classroomId && !isJoinPage) {
-        return { name: "pupil-join-classroom" };
-      }
+      const isPendingPage = to.name === "pupil-pending-approval";
 
       if (status === "PENDING") {
-        if (to.name !== "pupil-pending-approval") {
+        if (!isPendingPage) {
           return { name: "pupil-pending-approval" };
         }
+        return true;
+      }
+
+      if (status === null || status === undefined) {
+        if (!isJoinPage) {
+          return { name: "pupil-join-classroom" };
+        }
+        return true;
       }
 
       if (status === "ACTIVE" && isJoinPage) {
-        return { name: "pupil-home" };
+        if (isJoinPage || isPendingPage) {
+          return { name: "pupil-home" };
+        }
       }
 
       console.log({
diff --git a/src/classrooms/model/classrooms.store.ts b/src/classrooms/model/classrooms.store.ts
index 64ed67e2..6292f5d1 100644
--- a/src/classrooms/model/classrooms.store.ts
+++ b/src/classrooms/model/classrooms.store.ts
@@ -92,20 +92,12 @@ export const useClassroomsStore = defineStore("classrooms", () => {
           { classroomCode: cleanedCode }
       );
 
+      await authStore.fetchCurrentUserProfile()
+
       await fetchClassroomById(joined.classroomId)
 
       console.log("JOINED RESPONSE:", joined);
 
-      if (authStore.user?.pupilProfile) {
-        authStore.user = {
-          ...authStore.user,
-          pupilProfile: {
-            ...authStore.user.pupilProfile,
-            currentClassroomId: joined.classroomId,
-          },
-        };
-      }
-
       console.log("UPDATED USER:", authStore.user);
 
       return joined;
diff --git a/src/classrooms/pages/JoinClassroom.vue b/src/classrooms/pages/JoinClassroom.vue
index 711fbf19..c6634fd1 100644
--- a/src/classrooms/pages/JoinClassroom.vue
+++ b/src/classrooms/pages/JoinClassroom.vue
@@ -43,7 +43,11 @@ async function join() {
   isJoining.value = true;
 
   try {
-    await classroomsStore.joinClassroom(code);
+    await classroomsStore.joinClassroom(code)
+
+    if (authStore.user?.pupilProfile?.membershipStatus === "PENDING") {
+      await router.push({ name: "pupil-pending-approval" })
+    }
   } catch (error) {
     console.error("JOIN CLASSROOM ERROR:", error);
     errorMessage.value = t("joinClassroom.invalid");

From a4a2d6fd973dd4b30f9350e0d237a6064b255c4b Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Tue, 28 Apr 2026 11:30:24 +0200
Subject: [PATCH 27/66] add option to publish and delete tasks

---
 src/classrooms/pages/ClassroomTasks.vue   | 123 +++++++++++++++++++---
 src/classrooms/pages/NewClassroomTask.vue |   7 +-
 src/stops/api/stops.api.ts                |  17 +++
 src/stops/model/task.store.ts             |  37 +++++++
 4 files changed, 164 insertions(+), 20 deletions(-)
 create mode 100644 src/stops/model/task.store.ts

diff --git a/src/classrooms/pages/ClassroomTasks.vue b/src/classrooms/pages/ClassroomTasks.vue
index 6d970a75..c5e9425a 100644
--- a/src/classrooms/pages/ClassroomTasks.vue
+++ b/src/classrooms/pages/ClassroomTasks.vue
@@ -1,15 +1,19 @@
 <script setup lang="ts">
-import { computed, onMounted, watch, ref } from "vue"
+import { computed, watch, ref } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useAuthStore } from "@/auth/model/auth.store"
 
 import TaskCard from "@/stops/components/TaskCard.vue"
 import ClassroomTaskSidebar from "@/classrooms/components/tasks/ClassroomTaskSidebar.vue"
+import ConfirmModal from "@/classrooms/components/ConfirmModal.vue";
 
 import { useTeacherStops } from "@/classrooms/components/composables/UseTeacherStops"
 
 import { requestTasksForStop, requestTask, type TaskResponse } from "@/stops/api/stops.api"
 
+import { useTasksStore } from "@/stops/model/task.store"
+
+const tasksStore = useTasksStore()
 const route = useRoute()
 const router = useRouter()
 const authStore = useAuthStore()
@@ -17,7 +21,7 @@ const authStore = useAuthStore()
 const classroomId = computed(() => Number(route.params.classroomId))
 const slug = computed(() => route.params.slug as string)
 
-const { stops, status: stopsStatus } = useTeacherStops(classroomId)
+const { stops } = useTeacherStops(classroomId)
 
 const tasks = ref<TaskResponse[]>([])
 const isLoading = ref(false)
@@ -41,6 +45,7 @@ async function loadTasksForSlug(currentSlug: string) {
         stop.stopId,
         authStore.authorizationHeader,
     )
+
     tasks.value = await Promise.all(
         summaries.map((s) =>
             requestTask(
@@ -91,8 +96,61 @@ function goToEdit(taskId: number) {
   })
 }
 
-onMounted(() => {
-})
+const showDeleteModal = ref(false)
+const taskToDelete = ref<number | null>(null)
+
+const showPublishModal = ref(false)
+const taskToPublish = ref<{ id: number; published: boolean } | null>(null)
+
+function askDelete(taskId: number) {
+  taskToDelete.value = taskId
+  showDeleteModal.value = true
+}
+
+async function confirmDelete() {
+  if (!taskToDelete.value) return
+
+  await tasksStore.deleteTask(
+      classroomId.value,
+      taskToDelete.value,
+  )
+
+  tasks.value = tasks.value.filter(
+      (t) => t.id !== taskToDelete.value,
+  )
+
+  showDeleteModal.value = false
+  taskToDelete.value = null
+}
+
+function askTogglePublish(task: TaskResponse) {
+  taskToPublish.value = {
+    id: task.id,
+    published: !task.published,
+  }
+  showPublishModal.value = true
+}
+
+async function confirmPublish() {
+  if (!taskToPublish.value) return
+
+  const updated = await tasksStore.togglePublish(
+      classroomId.value,
+      taskToPublish.value.id,
+      taskToPublish.value.published,
+  )
+
+  const index = tasks.value.findIndex(
+      (t) => t.id === updated.id,
+  )
+
+  if (index !== -1) {
+    tasks.value[index] = updated
+  }
+
+  showPublishModal.value = false
+  taskToPublish.value = null
+}
 
 watch(
     () => [slug.value, stops.value],
@@ -124,14 +182,17 @@ watch(
         <p v-if="error" class="text-red-600">{{ error }}</p>
         <p v-if="isLoading">Loading...</p>
 
-        <div v-if="!isLoading && filteredTasks.length === 0" class="text-gray-500">
+        <div
+            v-if="!isLoading && filteredTasks.length === 0"
+            class="text-gray-500"
+        >
           No tasks found
         </div>
 
         <div
             v-for="(task, index) in filteredTasks"
             :key="task.id"
-            class="flex flex-col gap-6"
+            class="flex flex-col gap-3"
         >
           <div class="flex justify-between items-center">
             <span
@@ -149,20 +210,38 @@ watch(
             </span>
           </div>
 
-          <TaskCard
-              :task="task"
-              :show-answers="true"
-          />
+          <TaskCard :task="task" :show-answers="true" />
 
-          <div class="flex justify-end -mt-2">
+          <div class="flex justify-end gap-2">
             <button
-                class="rounded-xl bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-200 transition"
+                class="rounded-xl bg-gray-100 px-3 py-1.5 text-sm"
                 @click="goToEdit(task.id)"
             >
-              Edit task
+              Edit
+            </button>
+
+            <button
+                class="rounded-xl px-3 py-1.5 text-sm font-medium"
+                :class="task.published
+                ? 'bg-yellow-100 text-yellow-700'
+                : 'bg-green-100 text-green-700'"
+                @click="askTogglePublish(task)"
+            >
+              {{ task.published ? "Unpublish" : "Publish" }}
+            </button>
+
+            <button
+                class="rounded-xl bg-red-100 px-3 py-1.5 text-sm text-red-700 hover:bg-red-200"
+                @click="askDelete(task.id)"
+            >
+              Delete
             </button>
           </div>
-          <hr v-if="index < filteredTasks.length - 1" class="border-gray-200" />
+
+          <hr
+              v-if="index < filteredTasks.length - 1"
+              class="border-gray-200"
+          />
         </div>
       </div>
 
@@ -175,5 +254,21 @@ watch(
           @select-filter="filter = $event"
       />
     </div>
+
+    <ConfirmModal
+        v-model="showDeleteModal"
+        title="Delete task"
+        message="Are you sure you want to delete this task? This cannot be undone."
+        confirm-text="Delete"
+        @confirm="confirmDelete"
+    />
+
+    <ConfirmModal
+        v-model="showPublishModal"
+        title="Change publish state"
+        message="Are you sure you want to change the publish state of this task?"
+        confirm-text="Confirm"
+        @confirm="confirmPublish"
+    />
   </section>
 </template>
\ No newline at end of file
diff --git a/src/classrooms/pages/NewClassroomTask.vue b/src/classrooms/pages/NewClassroomTask.vue
index 6a46b064..f5ac8dbe 100644
--- a/src/classrooms/pages/NewClassroomTask.vue
+++ b/src/classrooms/pages/NewClassroomTask.vue
@@ -3,12 +3,7 @@ import { computed, ref, onMounted, watch } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useAuthStore } from "@/auth/model/auth.store"
 
-import {
-  requestCreateTask,
-  requestTask,
-  requestUpdateTask,
-  type TaskResponse,
-} from "@/stops/api/stops.api"
+import { requestCreateTask, requestTask, requestUpdateTask, type TaskResponse } from "@/stops/api/stops.api"
 
 import TaskMetaEditor from "@/classrooms/components/tasks/TaskMetaEditor.vue"
 import TaskItemsEditor from "@/classrooms/components/tasks/TaskItemsEditor.vue"
diff --git a/src/stops/api/stops.api.ts b/src/stops/api/stops.api.ts
index 93381256..81913ea9 100644
--- a/src/stops/api/stops.api.ts
+++ b/src/stops/api/stops.api.ts
@@ -273,6 +273,23 @@ export function requestUpdateTask(
   )
 }
 
+export function requestUpdateTaskPublishState(
+    classroomId: number,
+    taskId: number,
+    published: boolean,
+    authorizationHeader: string,
+) {
+  return fetchJson<TaskResponse>(
+      `${CLASSROOMS_BASE}/${classroomId}/tasks/${taskId}/publish`,
+      authorizationHeader,
+      {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ published }),
+      },
+  )
+}
+
 export function requestDeleteTask(
     classroomId: number,
     taskId: number,
diff --git a/src/stops/model/task.store.ts b/src/stops/model/task.store.ts
new file mode 100644
index 00000000..d95ad4b1
--- /dev/null
+++ b/src/stops/model/task.store.ts
@@ -0,0 +1,37 @@
+import { defineStore } from "pinia"
+import { useAuthStore } from "@/auth/model/auth.store"
+import { requestDeleteTask, requestUpdateTaskPublishState } from "@/stops/api/stops.api"
+
+export const useTasksStore = defineStore("tasks", () => {
+  const authStore = useAuthStore()
+
+  async function deleteTask(classroomId: number, taskId: number) {
+    if (!authStore.authorizationHeader) throw new Error("Not authenticated")
+
+    await requestDeleteTask(
+        classroomId,
+        taskId,
+        authStore.authorizationHeader,
+    )
+  }
+
+  async function togglePublish(
+      classroomId: number,
+      taskId: number,
+      published: boolean,
+  ) {
+    if (!authStore.authorizationHeader) throw new Error("Not authenticated")
+
+    return requestUpdateTaskPublishState(
+        classroomId,
+        taskId,
+        published,
+        authStore.authorizationHeader,
+    )
+  }
+
+  return {
+    deleteTask,
+    togglePublish,
+  }
+})
\ No newline at end of file

From 86e63a44ae16a9657135d47b200566d82f2ee543 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Tue, 28 Apr 2026 13:03:37 +0200
Subject: [PATCH 28/66] add task creation and updating to task store

---
 src/stops/model/task.store.ts | 80 ++++++++++++++++++++++++++++++++++-
 1 file changed, 79 insertions(+), 1 deletion(-)

diff --git a/src/stops/model/task.store.ts b/src/stops/model/task.store.ts
index d95ad4b1..430d69dd 100644
--- a/src/stops/model/task.store.ts
+++ b/src/stops/model/task.store.ts
@@ -1,10 +1,23 @@
 import { defineStore } from "pinia"
+import { ref } from "vue"
+
 import { useAuthStore } from "@/auth/model/auth.store"
-import { requestDeleteTask, requestUpdateTaskPublishState } from "@/stops/api/stops.api"
+
+import {
+  requestDeleteTask,
+  requestUpdateTaskPublishState,
+  requestCreateTask,
+  requestUpdateTask,
+  type TaskForm,
+  type TaskResponse,
+} from "@/stops/api/stops.api"
 
 export const useTasksStore = defineStore("tasks", () => {
   const authStore = useAuthStore()
 
+  const draft = ref<TaskForm | null>(null)
+  const loading = ref(false)
+
   async function deleteTask(classroomId: number, taskId: number) {
     if (!authStore.authorizationHeader) throw new Error("Not authenticated")
 
@@ -30,8 +43,73 @@ export const useTasksStore = defineStore("tasks", () => {
     )
   }
 
+  function initDraft(stopId: number) {
+    draft.value = {
+      stopId,
+      title: { nb: "", en: "" },
+      introText: { nb: null, en: null },
+      difficultyLevel: 1,
+      taskType: "NEWS_COMPARISON",
+      passingRule: "ALL_CORRECT",
+      passingScore: null,
+      maxScore: 1,
+      items: [],
+    }
+  }
+
+  function updateDraft(partial: Partial<TaskForm>) {
+    if (!draft.value) return
+    draft.value = {
+      ...draft.value,
+      ...partial,
+    }
+  }
+
+  function updateItems(items: TaskForm["items"]) {
+    if (!draft.value) return
+    draft.value.items = items
+  }
+
+  async function createTask(classroomId: number): Promise<TaskResponse> {
+    if (!authStore.authorizationHeader) throw new Error("Not authenticated")
+    if (!draft.value) throw new Error("No draft initialized")
+
+    loading.value = true
+    try {
+      return await requestCreateTask(
+          classroomId,
+          draft.value,
+          authStore.authorizationHeader,
+      )
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function updateTask(
+      classroomId: number,
+      taskId: number,
+  ): Promise<TaskResponse> {
+    if (!authStore.authorizationHeader) throw new Error("Not authenticated")
+    if (!draft.value) throw new Error("No draft initialized")
+
+    return requestUpdateTask(
+        classroomId,
+        taskId,
+        draft.value,
+        authStore.authorizationHeader,
+    )
+  }
+
   return {
+    draft,
+    loading,
     deleteTask,
     togglePublish,
+    initDraft,
+    updateDraft,
+    updateItems,
+    createTask,
+    updateTask,
   }
 })
\ No newline at end of file

From 05588d3d4bf5c481dc60cf54dd6177f350672112 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Tue, 28 Apr 2026 13:48:10 +0200
Subject: [PATCH 29/66] remove unused file

---
 .../components/tasks/TaskSideBarFilter.vue    | 36 -------------------
 1 file changed, 36 deletions(-)
 delete mode 100644 src/classrooms/components/tasks/TaskSideBarFilter.vue

diff --git a/src/classrooms/components/tasks/TaskSideBarFilter.vue b/src/classrooms/components/tasks/TaskSideBarFilter.vue
deleted file mode 100644
index b6e51b93..00000000
--- a/src/classrooms/components/tasks/TaskSideBarFilter.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import type { TaskType } from "@/stops/api/stops.api.ts"
-import { useI18n } from "vue-i18n"
-
-const { t } = useI18n()
-
-const model = defineModel<TaskType | "ALL">()
-
-const options: Array<{ label: string; value: TaskType | "ALL" }> = [
-  { label: "All", value: "ALL" },
-  { label: "News", value: "NEWS_COMPARISON" },
-  { label: "Generic", value: "GENERIC" },
-]
-</script>
-
-<template>
-  <aside class="rounded-lg border bg-white p-3">
-    <h3 class="mb-3 text-xs font-bold uppercase text-gray-500">
-      {{ t("classroomTasks.filter") }}
-    </h3>
-
-    <div class="space-y-2">
-      <button
-          v-for="opt in options"
-          :key="opt.value"
-          class="w-full rounded px-3 py-2 text-left text-sm"
-          :class="model === opt.value
-          ? 'bg-gray-900 text-white'
-          : 'bg-gray-100 hover:bg-gray-200'"
-          @click="model = opt.value"
-      >
-        {{ opt.label }}
-      </button>
-    </div>
-  </aside>
-</template>
\ No newline at end of file

From 0ce327b9a0112feab8a7926adad3563e8c80a94b Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Tue, 28 Apr 2026 15:39:21 +0200
Subject: [PATCH 30/66] i18n

---
 .../components/tasks/ClassroomTaskSidebar.vue |  2 +-
 .../components/tasks/TaskItemsEditor.vue      | 16 +--
 .../components/tasks/TaskMetaEditor.vue       | 21 ++--
 .../components/tasks/TaskOptionEditor.vue     | 22 +++--
 .../components/tasks/TaskSummaryCard.vue      | 49 ----------
 src/classrooms/pages/ClassroomTasks.vue       | 37 ++++---
 src/classrooms/pages/EditClassroomTask.vue    | 15 +--
 src/classrooms/pages/NewClassroomTask.vue     | 23 +++--
 src/locales/en.ts                             | 97 +++++++++++++++++++
 src/locales/nb.ts                             | 56 ++++++++++-
 10 files changed, 227 insertions(+), 111 deletions(-)
 delete mode 100644 src/classrooms/components/tasks/TaskSummaryCard.vue

diff --git a/src/classrooms/components/tasks/ClassroomTaskSidebar.vue b/src/classrooms/components/tasks/ClassroomTaskSidebar.vue
index f1fbfcc1..b96de208 100644
--- a/src/classrooms/components/tasks/ClassroomTaskSidebar.vue
+++ b/src/classrooms/components/tasks/ClassroomTaskSidebar.vue
@@ -18,7 +18,7 @@ const emit = defineEmits<{
   <aside class="rounded-lg border border-zinc-200 bg-white p-4 shadow-sm">
 
     <h3 class="mb-4 text-sm font-semibold uppercase tracking-wide text-zinc-500">
-      Stops
+      {{ t("newTask.stops") }}
     </h3>
 
     <div class="space-y-2">
diff --git a/src/classrooms/components/tasks/TaskItemsEditor.vue b/src/classrooms/components/tasks/TaskItemsEditor.vue
index f4ffadcc..3492a4dd 100644
--- a/src/classrooms/components/tasks/TaskItemsEditor.vue
+++ b/src/classrooms/components/tasks/TaskItemsEditor.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import type { TaskItemResponse, TaskType } from "@/stops/api/stops.api.ts"
 import TaskOptionEditor from "@/classrooms/components/tasks/TaskOptionEditor.vue"
+import { useI18n } from "vue-i18n"
+
+const { t } = useI18n()
 
 defineProps<{
   items: TaskItemResponse[]
@@ -21,31 +24,28 @@ const emit = defineEmits<{
         class="rounded-xl border bg-white p-5 shadow-sm space-y-4"
     >
 
-      <!-- Header -->
       <div class="flex items-center justify-between">
         <h3 class="font-semibold text-gray-800">
-          Item {{ index + 1 }}
+          {{ t("newTask.item") }} {{ index + 1 }}
         </h3>
 
         <button
             class="text-sm text-red-600 hover:text-red-700"
             @click="emit('remove', index)"
         >
-          Remove
+          {{ t("newTask.remove") }}
         </button>
       </div>
 
-      <!-- Prompt -->
       <div class="space-y-2">
         <p class="text-xs font-semibold uppercase text-gray-500">
-          Prompt
+          {{ t("newTask.prompt") }}
         </p>
 
-        <input v-model="item.promptText.en" placeholder="English prompt" class="input" />
-        <input v-model="item.promptText.nb" placeholder="Norwegian prompt" class="input" />
+        <input v-model="item.promptText.en" :placeholder="t('newTask.ep')" class="input" />
+        <input v-model="item.promptText.nb" :placeholder="t('newTask.np')" class="input" />
       </div>
 
-      <!-- Options -->
       <div class="pt-2">
         <TaskOptionEditor v-if="item.options" v-model="item.options" />
       </div>
diff --git a/src/classrooms/components/tasks/TaskMetaEditor.vue b/src/classrooms/components/tasks/TaskMetaEditor.vue
index 5751891b..eb6f579b 100644
--- a/src/classrooms/components/tasks/TaskMetaEditor.vue
+++ b/src/classrooms/components/tasks/TaskMetaEditor.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import type { TaskResponse } from "@/stops/api/stops.api.ts"
+import { useI18n } from "vue-i18n"
+
+const { t } = useI18n()
 
 const form = defineModel<TaskResponse>({
   default: () => ({
@@ -25,34 +28,28 @@ const form = defineModel<TaskResponse>({
 
     <h2 class="font-semibold text-gray-800">Task settings</h2>
 
-    <!-- Title -->
     <div class="space-y-2">
       <p class="text-xs uppercase text-gray-500">Title</p>
-      <input v-model="form.title.en" placeholder="English title" class="input" />
-      <input v-model="form.title.nb" placeholder="Norwegian title" class="input" />
+      <input v-model="form.title.en" :placeholder="t('newTask.et')" class="input" />
+      <input v-model="form.title.nb" :placeholder="t('newTask.nt')" class="input" />
     </div>
 
-    <!-- Intro -->
     <div class="space-y-2">
       <p class="text-xs uppercase text-gray-500">Introduction</p>
-      <textarea v-model="form.introText.en" placeholder="English intro" class="input" />
-      <textarea v-model="form.introText.nb" placeholder="Norwegian intro" class="input" />
+      <textarea v-model="form.introText.en" :placeholder="t('newTask.ei')" class="input" />
+      <textarea v-model="form.introText.nb" :placeholder="t('newTask.ni')" class="input" />
     </div>
 
-    <!-- Meta -->
     <div class="grid grid-cols-2 gap-3">
       <div class="space-y-2">
         <p class="text-xs uppercase text-gray-500">Type</p>
         <select v-model="form.taskType" class="input">
-          <option value="GENERIC">Generic</option>
-          <option value="NEWS_COMPARISON">News comparison</option>
-          <option value="EMAIL_REVIEW">Email review</option>
-          <option value="IMAGE_ASSESSMENT">Image assessment</option>
+          <option value="NEWS_COMPARISON">{{ t("newTask.news") }}</option>
         </select>
       </div>
 
       <div class="space-y-2">
-        <p class="text-xs uppercase text-gray-500">Difficulty</p>
+        <p class="text-xs uppercase text-gray-500">{{ t("newTask.difficulty") }}</p>
         <input
             type="number"
             v-model.number="form.difficultyLevel"
diff --git a/src/classrooms/components/tasks/TaskOptionEditor.vue b/src/classrooms/components/tasks/TaskOptionEditor.vue
index 5171b41a..a500f975 100644
--- a/src/classrooms/components/tasks/TaskOptionEditor.vue
+++ b/src/classrooms/components/tasks/TaskOptionEditor.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
 import type { TaskOptionResponse } from "@/stops/api/stops.api.ts"
+import { useI18n } from "vue-i18n"
+
+const { t } = useI18n()
+
 
 const options = defineModel<TaskOptionResponse[]>({
   default: () => [],
@@ -27,7 +31,7 @@ function addOption() {
   <div class="space-y-4">
 
     <h4 class="text-sm font-semibold text-gray-700">
-      Options
+      {{ t("newTask.options") }}
     </h4>
 
     <div
@@ -37,37 +41,37 @@ function addOption() {
     >
 
       <div class="flex items-center gap-2">
-        <input v-model="opt.optionText.en" class="input flex-1" placeholder="English option" />
-        <input v-model="opt.optionText.nb" class="input flex-1" placeholder="Norwegian option" />
+        <input v-model="opt.optionText.en" class="input flex-1" :placeholder="t('newTask.eo')" />
+        <input v-model="opt.optionText.nb" class="input flex-1" :placeholder="t('newTask.no')" />
 
         <label class="flex items-center gap-1 text-sm">
           <input type="checkbox" v-model="opt.isCorrect" />
-          Correct
+          {{ t("newTask.correct") }}
         </label>
 
         <button
             class="text-sm text-red-600 hover:text-red-700"
             @click="options.splice(i, 1)"
         >
-          Remove
+          {{ t("newTask.remove") }}
         </button>
       </div>
 
       <div class="space-y-2 pt-2 border-t">
         <p class="text-xs uppercase text-gray-500">
-          Fasit (explanation)
+          {{ t("newTask.answer") }}
         </p>
 
         <input
             v-model="ensureExplanation(opt).en"
             class="input"
-            placeholder="English explanation"
+            :placeholder="t('newTask.ea')"
         />
 
         <input
             v-model="ensureExplanation(opt).nb"
             class="input"
-            placeholder="Norwegian explanation"
+            :placeholder="t('newTask.na')"
         />
       </div>
 
@@ -77,7 +81,7 @@ function addOption() {
         class="text-sm text-blue-600 hover:text-blue-700"
         @click="addOption"
     >
-      Add option
+      {{ t("newTask.addoption") }}
     </button>
 
   </div>
diff --git a/src/classrooms/components/tasks/TaskSummaryCard.vue b/src/classrooms/components/tasks/TaskSummaryCard.vue
deleted file mode 100644
index d04aaa99..00000000
--- a/src/classrooms/components/tasks/TaskSummaryCard.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<script setup lang="ts">
-import type { TaskSummaryResponse } from "@/stops/api/stops.api.ts"
-
-defineProps<{
-  task: TaskSummaryResponse
-  isOpen: boolean
-}>()
-
-const emit = defineEmits<{
-  toggle: []
-  edit: []
-}>()
-</script>
-
-<template>
-  <div class="rounded border bg-white p-4">
-
-    <div class="flex items-center justify-between">
-
-      <div>
-        <div class="font-bold">
-          {{ task.title.en }}
-        </div>
-
-        <div class="text-xs text-gray-500">
-          {{ task.taskType }} · {{ task.difficultyLevel }}
-        </div>
-      </div>
-
-      <div class="flex gap-2">
-        <button
-            class="rounded bg-gray-200 px-2 py-1 text-sm"
-            @click="emit('toggle')"
-        >
-          {{ isOpen ? 'Collapse' : 'Expand' }}
-        </button>
-
-        <button
-            class="rounded bg-blue-500 px-2 py-1 text-sm text-white"
-            @click="emit('edit')"
-        >
-          Edit
-        </button>
-      </div>
-
-    </div>
-
-  </div>
-</template>
\ No newline at end of file
diff --git a/src/classrooms/pages/ClassroomTasks.vue b/src/classrooms/pages/ClassroomTasks.vue
index c5e9425a..4a84af9b 100644
--- a/src/classrooms/pages/ClassroomTasks.vue
+++ b/src/classrooms/pages/ClassroomTasks.vue
@@ -2,6 +2,7 @@
 import { computed, watch, ref } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useAuthStore } from "@/auth/model/auth.store"
+import { useI18n } from "vue-i18n";
 
 import TaskCard from "@/stops/components/TaskCard.vue"
 import ClassroomTaskSidebar from "@/classrooms/components/tasks/ClassroomTaskSidebar.vue"
@@ -29,6 +30,8 @@ const error = ref<string | null>(null)
 
 const filter = ref<"ALL" | string>("ALL")
 
+const { t } = useI18n();
+
 async function loadTasksForSlug(currentSlug: string) {
   if (!authStore.authorizationHeader) return
   if (!currentSlug) return
@@ -56,7 +59,7 @@ async function loadTasksForSlug(currentSlug: string) {
         ),
     )
   } catch (e) {
-    error.value = e instanceof Error ? e.message : "Failed to load tasks"
+    error.value = e instanceof Error ? e.message : t("taskOverview.fail")
   } finally {
     isLoading.value = false
   }
@@ -169,13 +172,15 @@ watch(
       <div class="space-y-6">
 
         <div class="flex items-center justify-between">
-          <h1 class="text-2xl font-bold">Tasks</h1>
+          <h1 class="text-2xl font-bold">
+            {{ t("taskOverview.title") }}
+          </h1>
 
           <button
               class="rounded-xl bg-gray-100 px-4 py-2 text-sm"
               @click="goToCreate"
           >
-            Create Task
+            {{ t("taskOverview.create") }}
           </button>
         </div>
 
@@ -186,7 +191,7 @@ watch(
             v-if="!isLoading && filteredTasks.length === 0"
             class="text-gray-500"
         >
-          No tasks found
+          {{ t("taskOverview.notask") }}
         </div>
 
         <div
@@ -199,14 +204,14 @@ watch(
                 v-if="!task.published"
                 class="text-xs bg-yellow-100 text-yellow-700 px-2 py-1 rounded"
             >
-              Unpublished
+              {{ t("taskOverview.unpublished") }}
             </span>
 
             <span
                 v-else
                 class="text-xs bg-green-100 text-green-700 px-2 py-1 rounded"
             >
-              Published
+              {{ t("taskOverview.published") }}
             </span>
           </div>
 
@@ -217,7 +222,7 @@ watch(
                 class="rounded-xl bg-gray-100 px-3 py-1.5 text-sm"
                 @click="goToEdit(task.id)"
             >
-              Edit
+              {{ t("taskOverview.edit") }}
             </button>
 
             <button
@@ -227,14 +232,14 @@ watch(
                 : 'bg-green-100 text-green-700'"
                 @click="askTogglePublish(task)"
             >
-              {{ task.published ? "Unpublish" : "Publish" }}
+              {{ task.published ? t("taskOverview.unpublish") : t("taskOverview.publish") }}
             </button>
 
             <button
                 class="rounded-xl bg-red-100 px-3 py-1.5 text-sm text-red-700 hover:bg-red-200"
                 @click="askDelete(task.id)"
             >
-              Delete
+              {{ t("taskOverview.delete") }}
             </button>
           </div>
 
@@ -257,17 +262,19 @@ watch(
 
     <ConfirmModal
         v-model="showDeleteModal"
-        title="Delete task"
-        message="Are you sure you want to delete this task? This cannot be undone."
-        confirm-text="Delete"
+        :title="t('taskOverview.delete')"
+        :message="t('taskOverview.message')"
+        :confirm-text="t('taskOverview.delete')"
+        :cancel-text="t('taskOverview.cancel')"
         @confirm="confirmDelete"
     />
 
     <ConfirmModal
         v-model="showPublishModal"
-        title="Change publish state"
-        message="Are you sure you want to change the publish state of this task?"
-        confirm-text="Confirm"
+        :title="t('taskOverview.ptitle')"
+        :message="t('taskOverview.pmessage')"
+        :confirm-text="t('taskOverview.confirm')"
+        :cancel-text="t('taskOverview.cancel')"
         @confirm="confirmPublish"
     />
   </section>
diff --git a/src/classrooms/pages/EditClassroomTask.vue b/src/classrooms/pages/EditClassroomTask.vue
index 6df41346..f728cfca 100644
--- a/src/classrooms/pages/EditClassroomTask.vue
+++ b/src/classrooms/pages/EditClassroomTask.vue
@@ -2,6 +2,7 @@
 import { computed, ref, onMounted } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useAuthStore } from "@/auth/model/auth.store"
+import { useI18n } from "vue-i18n";
 
 import {
   requestCreateTask,
@@ -17,6 +18,8 @@ const route = useRoute()
 const router = useRouter()
 const authStore = useAuthStore()
 
+const { t } = useI18n();
+
 const classroomId = Number(route.params.classroomId)
 const taskId = route.params.taskId ? Number(route.params.taskId) : null
 
@@ -57,7 +60,7 @@ async function load() {
 
     form.value = data
   } catch (e) {
-    error.value = e instanceof Error ? e.message : "Failed to load task"
+    error.value = e instanceof Error ? e.message : t("newTask.savefail")
   } finally {
     loading.value = false
   }
@@ -102,7 +105,7 @@ async function save() {
       params: { classroomId, slug: 'nyhetskvartalet' },
     })
   } catch (e) {
-    error.value = e instanceof Error ? e.message : "Failed to save task"
+    error.value = e instanceof Error ? e.message : t("newTask.savefail")
   } finally {
     loading.value = false
   }
@@ -128,14 +131,14 @@ onMounted(load)
 
     <div class="flex items-center justify-between pt-2">
       <h2 class="text-xl font-semibold text-gray-900">
-        Items
+        {{ t("newTask.item") }}
       </h2>
 
       <button
           class="rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 transition"
           @click="addItem"
       >
-        + Add item
+        {{ t("newTask.additem") }}
       </button>
     </div>
 
@@ -152,7 +155,7 @@ onMounted(load)
           class="rounded-lg bg-gray-200 px-5 py-2 hover:bg-gray-300 transition"
           @click="router.back()"
       >
-        Cancel
+        {{ t("newTask.cancel") }}
       </button>
 
       <button
@@ -160,7 +163,7 @@ onMounted(load)
           :disabled="loading"
           @click="save"
       >
-        {{ isEditMode ? "Save changes" : "Create task" }}
+        {{ isEditMode ? t("newTask.save") : t("newTask.create") }}
       </button>
 
     </div>
diff --git a/src/classrooms/pages/NewClassroomTask.vue b/src/classrooms/pages/NewClassroomTask.vue
index f5ac8dbe..09262eec 100644
--- a/src/classrooms/pages/NewClassroomTask.vue
+++ b/src/classrooms/pages/NewClassroomTask.vue
@@ -2,6 +2,7 @@
 import { computed, ref, onMounted, watch } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useAuthStore } from "@/auth/model/auth.store"
+import { useI18n } from "vue-i18n";
 
 import { requestCreateTask, requestTask, requestUpdateTask, type TaskResponse } from "@/stops/api/stops.api"
 
@@ -13,6 +14,8 @@ const route = useRoute()
 const router = useRouter()
 const authStore = useAuthStore()
 
+const { t } = useI18n();
+
 const classroomId = computed(() => Number(route.params.classroomId))
 const taskId = route.params.taskId ? Number(route.params.taskId) : null
 
@@ -110,7 +113,7 @@ async function save() {
       params: { classroomId: classroomId.value, slug: selectedStop.value?.slug ?? undefined },
     })
   } catch (e) {
-    error.value = e instanceof Error ? e.message : "Save failed"
+    error.value = e instanceof Error ? e.message : t("newTask.savefail")
   } finally {
     loading.value = false
   }
@@ -124,7 +127,7 @@ onMounted(load)
 
     <div class="space-y-2">
       <h1 class="text-3xl font-bold">
-        {{ isEditMode ? "Edit Task" : "Create Task" }}
+        {{ isEditMode ? t("newTask.edit") : t("newTask.create") }}
       </h1>
 
       <p v-if="error" class="text-red-600">
@@ -139,7 +142,9 @@ onMounted(load)
           v-model="selectedStopId"
           class="w-full rounded-lg border px-3 py-2"
       >
-        <option disabled :value="null">Select stop</option>
+        <option disabled :value="null">
+          {{ t("newTask.select") }}
+        </option>
 
         <option
             v-for="stop in stops"
@@ -151,7 +156,7 @@ onMounted(load)
       </select>
 
       <p v-if="stopsStatus === 'loading'" class="text-sm text-gray-400">
-        Loading stops...
+        {{ t("newTask.loading") }}
       </p>
 
       <p v-if="stopsError" class="text-sm text-red-600">
@@ -162,13 +167,15 @@ onMounted(load)
     <TaskMetaEditor v-model="form" />
 
     <div class="flex items-center justify-between pt-2">
-      <h2 class="text-xl font-semibold">Items</h2>
+      <h2 class="text-xl font-semibold">
+        {{ t("newTask.item") }}
+      </h2>
 
       <button
           class="rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 transition"
           @click="addItem"
       >
-        + Add Item
+        {{ t("newTask.additem") }}
       </button>
     </div>
 
@@ -183,7 +190,7 @@ onMounted(load)
           class="rounded-lg bg-gray-200 px-5 py-2 hover:bg-gray-300"
           @click="router.back()"
       >
-        Cancel
+        {{ t("newTask.cancel") }}
       </button>
 
       <button
@@ -191,7 +198,7 @@ onMounted(load)
           :disabled="loading || selectedStopId === null"
           @click="save"
       >
-        {{ isEditMode ? "Save Changes" : "Create Task" }}
+        {{ isEditMode ? t("newTask.save") : t("newTask.create") }}
       </button>
 
     </div>
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 23a945ed..ffcf428e 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -590,11 +590,40 @@ export const en = {
         actions: "Actions",
         remove: "Remove",
         seeNotebook: "See notebook",
+        pending: "Pupils awaiting approval",
+        approved: "Approved pupils",
+        approve: "Approve",
+        confirm: "Remove pupil",
+        message: "Are you sure you want to remove the pupil from the classroom?",
+        cancel: "Cancel",
     },
     pupilOverviewPage: {
         title: "Pupils",
         description: "View pupils in this classroom, sorted by highest score.",
     },
+    newClassroom: {
+        button: "New classroom",
+        title: "Create a new classroom",
+        name: "Name",
+        description: "Description",
+        teachers: "Teachers",
+        example: "teacher{'@'}email.com",
+        add: "Add",
+        create: "Create classroom"
+    },
+    joinClassroom: {
+        title: "Join a classroom",
+        description: "Enter the classroom code received from your teacher.",
+        code: "Classroom code",
+        join: "Join",
+        joining: "Joining...",
+        invalid: "The classroom code is not valid",
+        empty: "Please enter a classroom code",
+        noname: "The classroom must have a name",
+        wrongemail: "The email address given does not have a valid format.",
+        atleast: "The classroom must have at least one teacher.",
+        nosave: "Could not create classroom",
+    },
     classroomOverview: {
         title: "Classrooms",
         description:
@@ -609,13 +638,81 @@ export const en = {
         tasks: "Tasks",
         action: "Action",
         open: "Open",
+        joinCode: "Classroom code"
+    },
+    taskOverview: {
+        title: "Tasks",
+        fail: "Failed to load tasks",
+        unpublish: "Unpublish",
+        publish: "Publish",
+        delete: "Delete task",
+        message: "Are you sure you want to delete this task? This cannot be undone.",
+        ptitle: "Change publish state",
+        pmessage: "Are you sure you want to change the publish state of this task?",
+        confirm: "Confirm",
+        create: "Create task",
+        notask: "No tasks found",
+        unpublished: "Unpublished",
+        published: "Published",
+        edit: "Edit",
+        cancel: "Cancel",
+    },
+    newTask: {
+        savefail: "Save failed",
+        edit: "Edit task",
+        create: "Create task",
+        select: "Select stop",
+        loading: "Loading stops...",
+        additem: "Add item",
+        cancel: "Cancel",
+        save: "Save",
+        stops: "Stops",
+        remove: "Remove",
+        item: "Item",
+        prompt: "Prompt",
+        ep: "English prompt",
+        np: "Norwegian prompt",
+        et: "English title",
+        nt: "Norwegian title",
+        ei: "English introduction",
+        ni: "Norwegian introduction",
+        news: "News comparison",
+        difficulty: "Difficulty",
+        options: "Options",
+        eo: "English option",
+        no: "Norwegian option",
+        correct: "Correct",
+        answer: "Answer key",
+        ea: "English explanation",
+        na: "Norwegian explanation",
+        addoption: "Add option",
     },
     classroomDetails: {
         label: "Classroom",
+        titlealert: "The classroom must have a title.",
+        failalert: "Could not update classroom.",
+        confirmmessage: "Are you sure you want to delete the classroom? All pupils and data will be removed.",
+        save: "Save",
+        cancel: "Cancel",
+        deleteclass: "Delete classroom",
+        edit: "Edit",
+        addteachers: "Add teachers",
+        existingteachers: "Existing teachers",
+        pendingApproval: {
+            refresh: "Update status",
+            waiting: "Awaiting approval.",
+            request: "Your request to join the classroom is awaiting approval by a teacher.",
+        },
         pupilOverview: {
             title: "Pupils",
             description: "Track progress and open pupil profiles.",
         },
+        confirmModal: {
+            cancel: "Cancel",
+            confirm: "Confirm",
+            title: "Are you sure?",
+            message: "This action can not be reversed."
+        },
         taskOverview: {
             title: "Tasks",
             description: "Choose which game tasks the class should work on.",
diff --git a/src/locales/nb.ts b/src/locales/nb.ts
index 4a002d04..14f4de61 100644
--- a/src/locales/nb.ts
+++ b/src/locales/nb.ts
@@ -586,6 +586,12 @@ export const nb = {
     actions: "Handlinger",
     remove: "Fjern",
     seeNotebook: "Se notatbok",
+    pending: "Elever som avventer godkjenning",
+    approved: "Godkjente elever",
+    approve: "Godkjenn",
+    confirm: "Fjern elev",
+    message: "Er du sikker på at du vil fjerne eleven fra klasseromet?",
+    cancel: "Avbryt",
   },
   pupilOverviewPage: {
     title: "Elever",
@@ -631,6 +637,53 @@ export const nb = {
     open: "Åpne",
     joinCode: "Klasseromskode"
   },
+  taskOverview: {
+    title: "Oppgaver",
+    fail: "Kunne ikke hente oppgavene",
+    unpublish: "Avpubliser",
+    publish: "Publiser",
+    delete: "Slett oppgave",
+    message: "Er du sikker på at du vil slette oppgaven? Dette kan ikke reverseres.",
+    ptitle: "Endre publiserings status",
+    pmessage: "Er du sikker på at du vil endre publiserings statusen til oppgaven?",
+    confirm: "Fortsett",
+    create: "Opprett oppgave",
+    notask: "Ingen oppgaver funnet",
+    unpublished: "Ikke publisert",
+    published: "Publisert",
+    edit: "Rediger",
+    cancel: "Avbryt",
+  },
+  newTask: {
+    savefail: "Lagring feilet",
+    edit: "Rediger oppgave",
+    create: "Opprett oppgave",
+    select: "Velg stoppested",
+    loading: "Laster stoppested...",
+    additem: "Legg til punkt",
+    cancel: "Avbryt",
+    save: "Lagre",
+    stops: "Stoppesteder",
+    remove: "Fjern",
+    item: "Punkt",
+    prompt: "Spørsmål",
+    ep: "Engelsk spørsmål",
+    np: "Norsk spørsmål",
+    et: "Engelsk tittel",
+    nt: "Norsk tittel",
+    ei: "Engelsk introduksjon",
+    ni: "Norsk introduksjon",
+    news: "Nyhetssammenligning",
+    difficulty: "Vanskelighetsgrad",
+    options: "Valgmuligheter",
+    eo: "Engelsk valgmulighet",
+    no: "Norsk valgmulighet",
+    correct: "Riktig",
+    answer: "Fasit",
+    ea: "Engelsk forklaring",
+    na: "Norsk forklaring",
+    addoption: "Legg til valgmulighet",
+  },
   classroomDetails: {
     label: "Klasserom",
     titlealert: "Klasserommet må ha tittel.",
@@ -650,9 +703,6 @@ export const nb = {
     pupilOverview: {
       title: "Elever",
       description: "Følg progresjon og åpne elevprofiler.",
-      confirm: "Fjern elev",
-      message: "Er du sikker på at du vil fjerne eleven fra klasseromet?",
-      cancel: "Avbryt",
     },
     confirmModal: {
       cancel: "Avbryt",

From ed3ad86837d9b55ad47d924a8ea895ccd7f35cc4 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Tue, 28 Apr 2026 15:54:33 +0200
Subject: [PATCH 31/66] reload en.ts

---
 src/locales/en.ts | 1373 +++++++++++++++++++--------------------------
 1 file changed, 563 insertions(+), 810 deletions(-)

diff --git a/src/locales/en.ts b/src/locales/en.ts
index d2077889..ffcf428e 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -1,393 +1,577 @@
 export const en = {
-  common: {
-    pupil: "Pupil",
-    teacher: "Teacher",
-    classroom: "Classroom",
-    classroomCode: "Classroom code",
-    username: "Username",
-    avatar: "Avatar",
-    introduction: "Introduction",
-    mission: "Mission",
-    home: "Home",
-    help: "Help",
-    leaderboard: "Leaderboard",
-    map: "Map",
-    weeklyMystery: "Weekly mystery",
-    medals: "Medals",
-    notebook: "Notebook",
-    stop: "Stop",
-    stopPlace: "Stop place",
-    locked: "Locked",
-    task: "Task",
-    progress: "Progress",
-    tryAgain: "Try again",
-    startGame: "Start game",
-    skip: "Skip",
-    notifications: "Notifications",
-    settings: "Settings",
-    dashboard: "Home",
-    createClassroom: "Create classroom",
-    save: "Save",
-    back: "Back",
-    or: "Or",
-  },
-  app: {
-    title: "You did it!",
-    descriptionPrefix: "Visit",
-    descriptionSuffix: "to read the documentation",
-    languageLabel: "Language",
-    languages: {
-      en: "English",
-      nb: "Norwegian",
-    },
-  },
-  auth: {
-    login: {
-      title: "Login",
-      registeredSuccess: "The user was registered. You can now log in.",
-      pupilCardTitle: "I am a pupil",
-      pupilCardDescription: "Log in with Feide",
-      teacherCardTitle: "I am a teacher",
-      teacherCardDescription: "Log in with email and password",
-      register: "Register teacher",
-      usernameLabel: "Username",
-      emailLabel: "Email",
-      passwordLabel: "Password",
-      submit: "Log in",
-      loggedInAs: "Logged in as {identity}",
-      pupilTitle: "Pupil login",
-      pupilSubtitle: "For pupils who are logging in with Feide.",
-      teacherTitle: "Teacher login",
-      teacherSubtitle:
-        "For teachers who are logging in with email and password.",
-    },
-    register: {
-      title: "Teacher registration",
-      subtitle:
-        "This registration is for teachers who will use email and password.",
-      fullNameLabel: "Name",
-      fullNamePlaceholder: "Ola Nordmann",
-      emailLabel: "Email",
-      emailPlaceholder: "joemil{'@'}gmail.com",
-      schoolNameLabel: "School",
-      schoolNamePlaceholder: "Sædalen School",
-      passwordLabel: "Password",
-      confirmPasswordLabel: "Confirm Password",
-      submit: "Register",
-      validation: {
-        fullNameRequired: "Enter your name.",
-        emailRequired: "Enter your email address.",
-        emailInvalid: "Enter a valid email address.",
-        schoolNameRequired: "Enter your school.",
-        passwordTooShort: "Password must be at least 8 characters long.",
-        passwordsMismatch: "Passwords do not match.",
-      },
-      errors: {
-        emailRegistered: "This email address is already registered.",
-        fullNameUnsupported:
-          "The name contains characters that are not allowed.",
-        schoolNameUnsupported:
-          "The school name contains characters that are not allowed.",
-        badRequest:
-          "Registration could not be completed. Check the fields and try again.",
-        forbidden: "Registration was blocked. Reload the page and try again.",
-      },
-    },
-  },
-  landing: {
-    title: "Nettdetektivene",
-    description:
-      "The public landing page is coming later. For now, you can log in or register.",
-    login: "Log in",
-    register: "Register",
-  },
-  notFound: {
-    label: "404",
-    title: "Page not found",
-    description: "The page you are looking for does not exist.",
-    action: "Go home",
-    dashboardAction: "Home screen",
-  },
-  map: {
-    loading: "Loading map…",
-    lockedMessage: "Complete the previous stop first",
-    home: "Detective Office",
-    teacherPlaytestBadge: "Teacher playtest",
-    stops: {
-      nyhetskvartalet: "News Quarter",
-      fotografen: "Fotograph",
-      postkontoret: "Post Office",
-      markedsplassen: "Market Place",
-      "den-sosiale-markedsplassen": "Social Meeting Place",
-      passordbanken: "Password Bank",
-      datasenteret: "Data Center",
-    },
-  },
-  stop: {
-    loading: "Loading tasks…",
-    finish: "Finish stop",
-    submitting: "Checking answers…",
-    answerAllFirst: "Answer all tasks first",
-    selected: "Selected",
-    selectThis: "Select this",
-    correct: "Correct",
-    incorrect: "Not quite right",
-    backToMap: "Back to map",
-    answerKey: "Answer key",
-    explanation: "Explanation",
-    noTasks: "No published tasks are available for this stop yet.",
-    teacherPlaytestBadge: "Teacher playtest",
-    unsupportedTaskType: 'Task type "{type}" is not yet supported.',
-    email: {
-      inbox: "Innboks",
-      whatWouldYouDo: "Hva ville du gjort?",
-    },
-    passwordBank: {
-      inputLabel: "Type a password to test",
-      inputPlaceholder: "For example BlueBike!Moon7",
-      rulesDone: "rules",
-      rules: {
-        length: "At least 10 characters",
-        uppercase: "Has at least one uppercase letter",
-        lowercase: "Has at least one lowercase letter",
-        number: "Has at least one number",
-        special: "Has at least one special character",
-      },
-      strength: {
-        idle: "Start typing to test the strength",
-        weak: "Weak password",
-        okay: "Okay password",
-        strong: "Strong password",
-      },
-      feedback: {
-        idle: "A strong password is long, unusual, and hard to guess.",
-        weak: "Make it longer and mix in more kinds of characters.",
-        okay: "Good start. Try making it longer or less predictable.",
-        success: "Great job. This password passes every rule in the game.",
-      },
-      successLabel: "Completed",
-      successTitle: "You passed every rule",
-      successDescription:
-        "Your password has length, uppercase and lowercase letters, numbers, and special characters. That makes it harder to guess.",
-    },
-  },
-  pupilHome: {
-    title: "Pupil home page",
-    defaultName: "Pupil",
-    cards: {
-      helpTitle: "Help",
-      helpDescription: "Get support and guidance",
-      profileTitle: "Profile",
-      profileDescription: "See your name, level, and avatar",
-      settingsTitle: "Settings",
-      settingsDescription: "Adjust music and sound effects",
-      leaderboardTitle: "Leaderboard",
-      leaderboardDescription: "Overview of progress",
-      mapTitle: "Game map",
-      mapDescription: "Explore different tasks",
-      mysteryTitle: "Weekly mystery",
-      mysteryDescription: "Explore this week's mystery",
-      medalsTitle: "Medals",
-      medalsDescription: "See earned medals",
-      notebookTitle: "Notebook",
-      notebookDescription: "Open notebook",
-    },
-    logout: "Log out",
-    guide: {
-      progressLabel: "Home guide progress",
-      profileTitle: "This is your profile",
-      profileDescription:
-        "Open your profile page here to see your name, level, and avatar. You can also replay this home guide from there later.",
-      mapTitle: "This is where the game starts",
-      mapDescription:
-        "The game map is your main route forward. Use it to reach tasks and follow your progress.",
-      notebookTitle: "This is your notebook",
-      notebookDescription:
-        "Use the notebook to collect information and keep track of clues as you play.",
-      leaderboardTitle: "This is the leaderboard",
-      leaderboardDescription:
-        "Here you can compare your progress with others and see how you are doing.",
-      medalsTitle: "Here you can find your medals",
-      medalsDescription:
-        "This is where you see which medals you have unlocked and which ones you can still work towards.",
-      mysteryTitle: "Here you can find the weekly mystery",
-      mysteryDescription:
-        "Open the weekly mystery here and work on the extra challenge for this week.",
-      helpTitle: "Here you can find help",
-      helpDescription:
-        "Open this page if you need support or guidance while you play.",
-      nextAction: "Next",
-      doneAction: "Done",
+    common: {
+        pupil: "Pupil",
+        teacher: "Teacher",
+        classroom: "Classroom",
+        classroomCode: "Classroom code",
+        username: "Username",
+        avatar: "Avatar",
+        introduction: "Introduction",
+        mission: "Mission",
+        home: "Home",
+        help: "Help",
+        leaderboard: "Leaderboard",
+        map: "Map",
+        weeklyMystery: "Weekly mystery",
+        medals: "Medals",
+        notebook: "Notebook",
+        stop: "Stop",
+        stopPlace: "Stop place",
+        locked: "Locked",
+        task: "Task",
+        progress: "Progress",
+        tryAgain: "Try again",
+        startGame: "Start game",
+        skip: "Skip",
+        notifications: "Notifications",
+        settings: "Settings",
+        dashboard: "Home",
+        createClassroom: "Create classroom",
+        save: "Save",
+        back: "Back",
+        or: "Or",
+    },
+    app: {
+        title: "You did it!",
+        descriptionPrefix: "Visit",
+        descriptionSuffix: "to read the documentation",
+        languageLabel: "Language",
+        languages: {
+            en: "English",
+            nb: "Norwegian",
+        },
     },
-  },
-  pupilProfile: {
-    title: "Profile",
-    description:
-      "See your pupil identity, current level, and avatar customisation options.",
-    identityTitle: "Pupil information",
-    displayNameLabel: "Display name",
-    levelLabel: "Current level",
-    xpLabel: "XP",
-    editNameAction: "Edit username",
-    saveNameAction: "Save name",
-    saveNamePlaceholderAction: "Save name (placeholder)",
-    savingNameAction: "Saving...",
-    cancelNameAction: "Cancel",
-    namePlaceholder: "Detective name",
-    nameUpdateSuccess: "Display name updated.",
-    nameUpdateError: "Could not update the display name.",
-    avatarTitle: "Avatar",
-    avatarPlaceholder:
-      "The avatar builder is not fully implemented yet, but this is where avatar editing belongs.",
-    avatarAction: "Edit avatar",
-    replayHomeGuideAction: "Show the home guide again",
-    avatarOptions: {
-      bodyType: "Choose whether the avatar should be a boy or a girl",
-      eyeColor: "Choose eye color",
-      skinTone: "Choose skin tone",
-      hairStyle: "Choose hair color and hairstyle",
-      outfit: "Choose clothes and colors",
-      accessory: "Choose a hat or accessory",
+    auth: {
+        login: {
+            title: "Login",
+            registeredSuccess: "The user was registered. You can now log in.",
+            pupilCardTitle: "I am a pupil",
+            pupilCardDescription: "Log in with Feide",
+            teacherCardTitle: "I am a teacher",
+            teacherCardDescription: "Log in with email and password",
+            register: "Register teacher",
+            usernameLabel: "Username",
+            emailLabel: "Email",
+            passwordLabel: "Password",
+            submit: "Log in",
+            loggedInAs: "Logged in as {identity}",
+            pupilTitle: "Pupil login",
+            pupilSubtitle: "For pupils who are logging in with Feide.",
+            teacherTitle: "Teacher login",
+            teacherSubtitle:
+                "For teachers who are logging in with email and password.",
+        },
+        register: {
+            title: "Teacher registration",
+            subtitle:
+                "This registration is for teachers who will use email and password.",
+            fullNameLabel: "Name",
+            fullNamePlaceholder: "Ola Nordmann",
+            emailLabel: "Email",
+            emailPlaceholder: "joemil{'@'}gmail.com",
+            schoolNameLabel: "School",
+            schoolNamePlaceholder: "Sædalen School",
+            passwordLabel: "Password",
+            confirmPasswordLabel: "Confirm Password",
+            submit: "Register",
+            validation: {
+                fullNameRequired: "Enter your name.",
+                emailRequired: "Enter your email address.",
+                emailInvalid: "Enter a valid email address.",
+                schoolNameRequired: "Enter your school.",
+                passwordTooShort:
+                    "Password must be at least 8 characters long.",
+                passwordsMismatch: "Passwords do not match.",
+            },
+            errors: {
+                emailRegistered: "This email address is already registered.",
+                fullNameUnsupported:
+                    "The name contains characters that are not allowed.",
+                schoolNameUnsupported:
+                    "The school name contains characters that are not allowed.",
+                badRequest:
+                    "Registration could not be completed. Check the fields and try again.",
+                forbidden:
+                    "Registration was blocked. Reload the page and try again.",
+            },
+        },
     },
-  },
-  pupilSettings: {
-    title: "Settings",
-    description: "Adjust the game's audio settings.",
-    audioTitle: "Audio",
-    musicLabel: "Music",
-    sfxLabel: "Sound effects",
-    toggleMusicMute: "Toggle music mute",
-    toggleSfxMute: "Toggle sound effects mute",
-  },
-  onboarding: {
-    intro: {
-      eyebrow: "Introduction",
-      title: "Welcome to Nettdetektivene",
-      lead: "You are one of the detectives helping solve digital mysteries.",
-      paragraphOne:
-        "Throughout the game you will explore places, solve tasks, and collect clues that help move the investigation forward.",
-      paragraphTwo:
-        "Use what you learn about online safety, source criticism, and security to make good choices along the way.",
-      paragraphThree:
-        "When you are ready, choose your avatar and start the game.",
-      continue: "Choose avatar",
+    landing: {
+        title: "Nettdetektivene",
+        description:
+            "The public landing page is coming later. For now, you can log in or register.",
+        login: "Log in",
+        register: "Register",
+    },
+    notFound: {
+        label: "404",
+        title: "Page not found",
+        description: "The page you are looking for does not exist.",
+        action: "Go home",
+        dashboardAction: "Home screen",
+    },
+    map: {
+        loading: "Loading map…",
+        lockedMessage: "Complete the previous stop first",
+        home: "Detective Office",
+        teacherPlaytestBadge: "Teacher playtest",
+        stops: {
+            nyhetskvartalet: "News Quarter",
+            fotografen: "Photographer",
+            postkontoret: "Post Office",
+            markedsplassen: "Market Place",
+            "den-sosiale-markedsplassen": "Social Meeting Place",
+            passordbanken: "Password Bank",
+            datasenteret: "Data Center",
+        },
     },
-    avatar: {
-      eyebrow: "Avatar",
-      title: "Create your detective",
-      lead: "Customise your avatar before starting the game.",
-      completing: "Starting game...",
+    stop: {
+        loading: "Loading tasks…",
+        finish: "Finish stop",
+        submitting: "Checking answers…",
+        answerAllFirst: "Answer all tasks first",
+        selected: "Selected",
+        selectThis: "Select this",
+        correct: "Correct",
+        incorrect: "Not quite right",
+        backToMap: "Back to map",
+        answerKey: "Answer key",
+        explanation: "Explanation",
+        noTasks: "No published tasks are available for this stop yet.",
+        teacherPlaytestBadge: "Teacher playtest",
+        unsupportedTaskType: 'Task type "{type}" is not yet supported.',
+        email: {
+            inbox: "Innboks",
+            whatWouldYouDo: "Hva ville du gjort?",
+        },
     },
-    errors: {
-      complete: "Could not complete the introduction. Try again.",
+    pupilHome: {
+        title: "Pupil home page",
+        defaultName: "Pupil",
+        cards: {
+            helpTitle: "Help",
+            helpDescription: "Get support and guidance",
+            profileTitle: "Profile",
+            profileDescription: "See your name, level, and avatar",
+            settingsTitle: "Settings",
+            settingsDescription: "Adjust music and sound effects",
+            leaderboardTitle: "Leaderboard",
+            leaderboardDescription: "Overview of progress",
+            mapTitle: "Game map",
+            mapDescription: "Explore different tasks",
+            mysteryTitle: "Weekly mystery",
+            mysteryDescription: "Explore this week's mystery",
+            medalsTitle: "Medals",
+            medalsDescription: "See earned medals",
+            notebookTitle: "Notebook",
+            notebookDescription: "Open notebook",
+        },
+        logout: "Log out",
     },
-  },
-  success: {
-    stop_completed_title: "You did it!",
-    stop_completed_message: "Congratulations on completing this stop!",
-    return_to_map: "Back to map",
-    next_stop: "Next Stop",
-    next_stop_label: "Next Stop",
-    view_recap: "View Map Recap",
-  },
-  failure: {
-    stop_failed_title: "Oops!",
-    stop_failed_message: "It didn't work this time.",
-    try_again: "Try again",
-  },
-  avatarEditor: {
-    detectiveName: "Detective {name}",
-    fallbackDisplayName: "Unknown",
-    unlocksAtLevel: "Unlocks at level {level}",
-    sections: {
-      bodyType: "Body Type",
-      skinColor: "Skin Color",
-      hats: "Hats",
-      outfits: "Outfits",
+    pupilProfile: {
+        title: "Profile",
+        description:
+            "See your pupil identity, current level, and avatar customisation options.",
+        identityTitle: "Pupil information",
+        displayNameLabel: "Display name",
+        levelLabel: "Current level",
+        xpLabel: "XP",
+        editNameAction: "Edit username",
+        saveNameAction: "Save name",
+        saveNamePlaceholderAction: "Save name (placeholder)",
+        savingNameAction: "Saving...",
+        cancelNameAction: "Cancel",
+        namePlaceholder: "Detective name",
+        nameUpdateSuccess: "Display name updated.",
+        nameUpdateError: "Could not update the display name.",
+        avatarTitle: "Avatar",
+        avatarPlaceholder:
+            "The avatar builder is not fully implemented yet, but this is where avatar editing belongs.",
+        avatarAction: "Edit avatar",
+        avatarOptions: {
+            bodyType: "Choose whether the avatar should be a boy or a girl",
+            eyeColor: "Choose eye color",
+            skinTone: "Choose skin tone",
+            hairStyle: "Choose hair color and hairstyle",
+            outfit: "Choose clothes and colors",
+            accessory: "Choose a hat or accessory",
+        },
     },
-    bodyTypes: {
-      detectiveDefault: "Boy",
-      detectiveAlt: "Girl",
+    pupilSettings: {
+        title: "Settings",
+        description: "Adjust the game's audio settings.",
+        audioTitle: "Audio",
+        musicLabel: "Music",
+        sfxLabel: "Sound effects",
+        toggleMusicMute: "Toggle music mute",
+        toggleSfxMute: "Toggle sound effects mute",
     },
+    success: {
+        stop_completed_title: "You did it!",
+        stop_completed_message: "Congratulations on completing this stop!",
+        return_to_map: "Back to map",
+        next_stop: "Next Stop",
+        next_stop_label: "Next Stop",
+        view_recap: "View Map Recap",
+    },
+    avatarEditor: {
+        detectiveName: "Detective {name}",
+        fallbackDisplayName: "Unknown",
+        sections: {
+            skinColor: "Skin Color",
+            outfits: "Outfits",
+        },
 
-    preview: {
-      skinToneAlt: "Avatar skin tone",
-      outfitAlt: "Avatar outfit",
-    },
+        preview: {
+            skinToneAlt: "Avatar skin tone",
+            outfitAlt: "Avatar outfit",
+        },
 
-    pupilProfile: {
-      title: "Profile",
-      description:
-        "See your pupil identity, current level, and avatar customisation options.",
-      identityTitle: "Pupil information",
-      displayNameLabel: "Display name",
-      levelLabel: "Current level",
-      xpLabel: "XP",
-      editNameAction: "Change display name",
-      saveNameAction: "Save display name",
-      savingNameAction: "Saving...",
-      cancelNameAction: "Cancel",
-      namePlaceholder: "Detective name",
-      nameUpdateSuccess: "Display name updated.",
-      nameUpdateError: "Could not update the display name.",
-      avatarTitle: "Avatar",
-      avatarPlaceholder:
-        "The avatar builder is not fully implemented yet, but this is where avatar editing belongs.",
-      avatarAction: "Edit avatar",
-      avatarOptions: {
-        bodyType: "Choose whether the avatar should be a boy or a girl",
-        eyeColor: "Choose eye color",
-        skinTone: "Choose skin tone",
-        hairStyle: "Choose hair color and hairstyle",
-        outfit: "Choose clothes and colors",
-        accessory: "Choose a hat or accessory",
-      },
+        pupilProfile: {
+            title: "Profile",
+            description:
+                "See your pupil identity, current level, and avatar customisation options.",
+            identityTitle: "Pupil information",
+            displayNameLabel: "Display name",
+            levelLabel: "Current level",
+            xpLabel: "XP",
+            editNameAction: "Change display name",
+            saveNameAction: "Save display name",
+            savingNameAction: "Saving...",
+            cancelNameAction: "Cancel",
+            namePlaceholder: "Detective name",
+            nameUpdateSuccess: "Display name updated.",
+            nameUpdateError: "Could not update the display name.",
+            avatarTitle: "Avatar",
+            avatarPlaceholder:
+                "The avatar builder is not fully implemented yet, but this is where avatar editing belongs.",
+            avatarAction: "Edit avatar",
+            avatarOptions: {
+                bodyType: "Choose whether the avatar should be a boy or a girl",
+                eyeColor: "Choose eye color",
+                skinTone: "Choose skin tone",
+                hairStyle: "Choose hair color and hairstyle",
+                outfit: "Choose clothes and colors",
+                accessory: "Choose a hat or accessory",
+            },
+        },
+        assets: {
+            skinTones: {
+                light: "Light skin tone",
+                dark: "Dark skin tone",
+            },
+            outfits: {
+                standard: "Standard outfit",
+                standard2: "Standard outfit 2",
+            },
+        },
     },
-    assets: {
-      skinTones: {
-        light: "Light skin tone",
-        dark: "Dark skin tone",
-      },
-      outfits: {
-        standard: "Standard outfit",
-        standard2: "Standard outfit 2",
-      },
+    teacherHome: {
+        title: "Teacher portal",
+        description: "Choose a teacher page from the dashboard.",
+        cards: {
+            leaderboardTitle: "Leaderboard",
+            leaderboardDescription: "View your students' progress",
+            settingsTitle: "Settings",
+            settingsDescription: "Adjust audio and manage your account",
+        },
     },
-  },
-  teacherHome: {
-    title: "Teacher portal",
-    description: "Choose a teacher page from the dashboard.",
-    cards: {
-      leaderboardTitle: "Leaderboard",
-      leaderboardDescription: "View your students' progress",
-      settingsTitle: "Settings",
-      settingsDescription: "Adjust audio and manage your account",
+    teacherSettings: {
+        title: "Settings",
+        audioTitle: "Audio",
+        musicLabel: "Music",
+        sfxLabel: "Sound effects",
+        passwordTitle: "Password",
+        changePasswordAction: "Change password",
+        currentPasswordLabel: "Current password",
+        currentPasswordPlaceholder: "Enter current password",
+        newPasswordGroupLabel: "New password",
+        newPasswordLabel: "New password",
+        newPasswordPlaceholder: "At least 8 characters",
+        confirmPasswordLabel: "Confirm new password",
+        confirmPasswordPlaceholder: "Enter the new password again",
+        savePasswordAction: "Save password",
+        cancelPasswordAction: "Cancel",
+        savingPassword: "Saving...",
+        toggleMusicMute: "Toggle music mute",
+        toggleSfxMute: "Toggle sound effects mute",
+        validation: {
+            currentPasswordRequired: "Enter your current password.",
+            newPasswordTooShort:
+                "The new password must be at least 8 characters long.",
+            passwordsMismatch: "The passwords do not match.",
+        },
+        errors: {
+            invalidCurrentPassword: "The current password is incorrect.",
+            invalidPayload:
+                "The password could not be saved. Check the fields and try again.",
+            unauthorized: "Your session has expired. Log in again.",
+            forbidden: "This user cannot change password.",
+            generic: "The password could not be changed.",
+        },
+        success: {
+            passwordChanged: "Password updated.",
+        },
     },
-  },
-  teacherSettings: {
-    title: "Settings",
-    audioTitle: "Audio",
-    musicLabel: "Music",
-    sfxLabel: "Sound effects",
-    passwordTitle: "Password",
-    changePasswordAction: "Change password",
-    currentPasswordLabel: "Current password",
-    currentPasswordPlaceholder: "Enter current password",
-    newPasswordGroupLabel: "New password",
-    newPasswordLabel: "New password",
-    newPasswordPlaceholder: "At least 8 characters",
-    confirmPasswordLabel: "Confirm new password",
-    confirmPasswordPlaceholder: "Enter the new password again",
-    savePasswordAction: "Save password",
-    cancelPasswordAction: "Cancel",
-    savingPassword: "Saving...",
-    toggleMusicMute: "Toggle music mute",
-    toggleSfxMute: "Toggle sound effects mute",
-    validation: {
-      currentPasswordRequired: "Enter your current password.",
-      newPasswordTooShort:
-        "The new password must be at least 8 characters long.",
-      passwordsMismatch: "The passwords do not match.",
+    notificationsPage: {
+        title: "Notifications",
+        description: "Review and filter notifications from the classrooms you manage.",
+        classroomTitle: "Classroom notifications",
+        classroomDescription: "Review notifications connected to {classroomTitle}.",
+        classroomDescriptionGeneric: "Review and filter notifications connected to this classroom.",
+    },
+    notifications: {
+        summaryLabel: "Unread notifications",
+        listTitle: "Inbox",
+        listDescription: "Mark notifications as read, or dismiss them after handling them.",
+        loading: "Loading notifications...",
+        empty: "No notifications match your current filters.",
+        unknownPupil: "Unknown pupil",
+        unknownStop: "Unknown stop",
+        unknownTime: "Unknown time",
+        fallbackClassroom: "Classroom {classroomId}",
+        actions: {
+            markRead: "Mark as read",
+            dismiss: "Dismiss",
+        },
+        states: {
+            unread: "Unread",
+            read: "Read",
+            resolved: "Resolved",
+        },
+        pagination: {
+            previous: "Previous",
+            next: "Next",
+        },
+        paginationLabel: "Page {page} of {totalPages} · {totalItems} notifications",
+        filters: {
+            title: "Filters",
+            description: "Choose which notifications should appear in the inbox.",
+            searchLabel: "Search",
+            searchPlaceholder: "Search by pupil, classroom, or event",
+            classroomsLabel: "Classrooms",
+            typesLabel: "Notification types",
+            pupilsLabel: "Pupils",
+            pupilsHint: "Select at least one classroom first",
+            noPupilsAvailable: "No pupils found for the selected classroom filters",
+            timeWindowLabel: "Time window",
+            unreadOnlyLabel: "Show unread only",
+            fromLabel: "From",
+            toLabel: "To",
+            applyAction: "Apply filters",
+            clearAction: "Clear",
+            collapseAction: "Hide filters",
+            expandAction: "Show filters",
+            timeWindows: {
+                all: "All",
+                "24h": "Last 24 hours",
+                "7d": "Last 7 days",
+                "30d": "Last 30 days",
+                custom: "Custom",
+            },
+        },
+        mutes: {
+            title: "Mute notification types",
+            description: "Mute settings apply per classroom and notification type.",
+            collapseAction: "Hide mute settings",
+            expandAction: "Show mute settings",
+            mutedLabel: "Muted",
+            activeLabel: "Active",
+            selectSingleClassroomHint:
+                "Select one classroom in the filters to change which notification types are muted.",
+        },
+        errors: {
+            loadInboxFailed: "Could not load notifications.",
+            loadReferencesFailed: "Could not load filter data.",
+            loadSummaryFailed: "Could not load the summary.",
+            markReadFailed: "Could not mark the notification as read.",
+            dismissFailed: "Could not dismiss the notification.",
+            muteFailed: "Could not update the mute setting.",
+        },
+        types: {
+            MAP_STOP_COMPLETED: "Stop completed",
+            GAME_COMPLETED: "Game completed",
+            PUPIL_STUCK: "Pupil stuck",
+            WEEKLY_MYSTERY_SUBMITTED: "Weekly mystery submitted",
+        },
+        "map-stop-completed":
+            "{pupilDisplayName} completed {stopTitle} in {classroomTitle}.",
+        "game-completed":
+            "{pupilDisplayName} completed the game in {classroomTitle}.",
+        "pupil-stuck":
+            "{pupilDisplayName} is stuck on {stopTitle} in {classroomTitle}.",
+        "weekly-mystery-submitted":
+            "{pupilDisplayName} submitted the weekly mystery in {classroomTitle}.",
+    },
+    pages: {
+        help: "Help",
+        leaderboard: "Leaderboard",
+        notebook: "Notebook",
+        mystery: "Mystery",
+        medals: "Medals",
+        profile: "Profile",
+        settings: "Settings",
+    },
+    medals: {
+        title: "Medals",
+        description:
+            "This is where earned and locked medals are shown. Each medal keeps a dedicated asset slot so artwork can be added later without changing the page structure.",
+        filters: {
+            all: "All",
+            earned: "Earned",
+            locked: "Locked",
+        },
+        summary: {
+            earned: "Earned",
+            locked: "Locked",
+            total: "Total",
+            ofTotal: "{percent}% of {total}",
+            lockedDetail: "Medals still missing",
+            totalDetail: "Registered medals",
+        },
+        empty: {
+            title: "No medals yet",
+            description:
+                "When medals are available from the backend, they will appear here in a clear overview with room for icon art and status.",
+        },
+        errors: {
+            unauthenticated: "You must be logged in to view medals.",
+            loadFailed: "Could not load medals.",
+        },
+        card: {
+            earned: "Earned",
+            locked: "Locked",
+            example: "Approved example",
+            stop: "Stop",
+            noDescription: "No description has been added yet.",
+            assetReady: "Ready for image asset",
+            assetSlot: "Asset slot: {path}",
+        },
+        patterns: {
+            completionTitle: "{stop} completed",
+            completionDescription: "Awarded for completing the {stop} stop.",
+        },
+        types: {
+            stopCompletion: "Stop completion",
+            exampleApproval: "Example approval",
+        },
+        definitions: {
+            exampleApproval: {
+                title: "Example approval",
+                description: "Awarded when a submitted example is approved.",
+            },
+            stops: {
+                nyhetskvartalet: {
+                    title: "News Quarter completed",
+                    description:
+                        "Awarded when the News Quarter stop is completed.",
+                },
+                fotografen: {
+                    title: "Fotograph completed",
+                    description:
+                        "Awarded when the Fotograph stop is completed.",
+                },
+                postkontoret: {
+                    title: "Post Office completed",
+                    description:
+                        "Awarded when the Post Office stop is completed.",
+                },
+                markedsplassen: {
+                    title: "Market Place completed",
+                    description:
+                        "Awarded when the Market Place stop is completed.",
+                },
+                "den-sosiale-markedsplassen": {
+                    title: "Social Meeting Place completed",
+                    description:
+                        "Awarded when the Social Meeting Place stop is completed.",
+                },
+                passordbanken: {
+                    title: "Password Bank completed",
+                    description:
+                        "Awarded when the Password Bank stop is completed.",
+                },
+                datasenteret: {
+                    title: "Data Center completed",
+                    description:
+                        "Awarded when the Data Center stop is completed.",
+                },
+            },
+        },
+        codes: {
+            "example-approval": {
+                title: "Example approval",
+                description: "Awarded when a submitted example is approved.",
+            },
+            "nyhetskvartalet-completion": {
+                title: "News Quarter completed",
+                description:
+                    "Awarded when the News Quarter stop is completed.",
+            },
+            "fotografen-completion": {
+                title: "Fotograph completed",
+                description: "Awarded when the Fotograph stop is completed.",
+            },
+            "postkontoret-completion": {
+                title: "Post Office completed",
+                description: "Awarded when the Post Office stop is completed.",
+            },
+            "markedsplassen-completion": {
+                title: "Market Place completed",
+                description:
+                    "Awarded when the Market Place stop is completed.",
+            },
+            "den-sosiale-markedsplassen-completion": {
+                title: "Social Meeting Place completed",
+                description:
+                    "Awarded when the Social Meeting Place stop is completed.",
+            },
+            "passordbanken-completion": {
+                title: "Password Bank completed",
+                description:
+                    "Awarded when the Password Bank stop is completed.",
+            },
+            "datasenteret-completion": {
+                title: "Data Center completed",
+                description: "Awarded when the Data Center stop is completed.",
+            },
+        },
+        sections: {
+            earned: "Your earned medals",
+            earnedHint: "These are the ones you already got.",
+            locked: "Medals you can earn",
+            lockedHint: "These are not earned yet.",
+            noneEarned: "You have not earned any medals yet.",
+        },
+        emptyEarned: "Keep going! Your first medal will appear here.",
+        emptyLocked: "No medals have been added yet.",
+    },
+    notebook: {
+        fallbackTitle: "Notebook",
+        stopLabel: "Stop {id}",
+        sidebarTitle: "Stops",
+        emptySection: "No notes for this stop yet.",
+        loading: "Loading notes...",
+        form: {
+            titlePlaceholder: "Title",
+            contentPlaceholder: "Note",
+            submit: "Create note",
+        },
+        actions: {
+            deleteEntry: "Delete entry",
+        },
+        errors: {
+            createRequiresAuth: "You must be logged in to create notes.",
+            missingStop: "Could not find a valid stop for the note.",
+            missingFields: "Both title and content are required.",
+            createFailed: "Could not create the note.",
+            gameDeleteForbidden: "Game-generated notes cannot be deleted.",
+            deleteRequiresAuth: "You must be logged in to delete notes.",
+            deleteFailed: "Could not delete the note.",
+            loadRequiresAuth: "You must be logged in to open the notebook.",
+            loadFailed: "Could not load the notes.",
+            missingTeacherContext: "Could not find the pupil or classroom for this notebook.",
+        },
     },
     shared: {
         logout: "Log out",
@@ -545,437 +729,6 @@ export const en = {
             title: "Notifications",
             description: "Review events and messages for this classroom.",
         },
-    errors: {
-      invalidCurrentPassword: "The current password is incorrect.",
-      invalidPayload:
-        "The password could not be saved. Check the fields and try again.",
-      unauthorized: "Your session has expired. Log in again.",
-      forbidden: "This user cannot change password.",
-      generic: "The password could not be changed.",
-    },
-    success: {
-      passwordChanged: "Password updated.",
-    },
-  },
-  notificationsPage: {
-    title: "Notifications",
-    description:
-      "Review and filter notifications from the classrooms you manage.",
-    classroomTitle: "Classroom notifications",
-    classroomDescription: "Review notifications connected to {classroomTitle}.",
-    classroomDescriptionGeneric:
-      "Review and filter notifications connected to this classroom.",
-  },
-  notifications: {
-    summaryLabel: "Unread notifications",
-    listTitle: "Inbox",
-    listDescription:
-      "Mark notifications as read, or dismiss them after handling them.",
-    loading: "Loading notifications...",
-    empty: "No notifications match your current filters.",
-    unknownPupil: "Unknown pupil",
-    unknownStop: "Unknown stop",
-    unknownTime: "Unknown time",
-    fallbackClassroom: "Classroom {classroomId}",
-    actions: {
-      markRead: "Mark as read",
-      dismiss: "Dismiss",
-    },
-    states: {
-      unread: "Unread",
-      read: "Read",
-      resolved: "Resolved",
-    },
-    pagination: {
-      previous: "Previous",
-      next: "Next",
-    },
-    paginationLabel: "Page {page} of {totalPages} · {totalItems} notifications",
-    filters: {
-      title: "Filters",
-      description: "Choose which notifications should appear in the inbox.",
-      searchLabel: "Search",
-      searchPlaceholder: "Search by pupil, classroom, or event",
-      classroomsLabel: "Classrooms",
-      typesLabel: "Notification types",
-      pupilsLabel: "Pupils",
-      pupilsHint: "Select at least one classroom first",
-      noPupilsAvailable: "No pupils found for the selected classroom filters",
-      timeWindowLabel: "Time window",
-      unreadOnlyLabel: "Show unread only",
-      fromLabel: "From",
-      toLabel: "To",
-      applyAction: "Apply filters",
-      clearAction: "Clear",
-      collapseAction: "Hide filters",
-      expandAction: "Show filters",
-      timeWindows: {
-        all: "All",
-        "24h": "Last 24 hours",
-        "7d": "Last 7 days",
-        "30d": "Last 30 days",
-        custom: "Custom",
-      },
-    },
-    mutes: {
-      title: "Mute notification types",
-      description: "Mute settings apply per classroom and notification type.",
-      collapseAction: "Hide mute settings",
-      expandAction: "Show mute settings",
-      mutedLabel: "Muted",
-      activeLabel: "Active",
-      selectSingleClassroomHint:
-        "Select one classroom in the filters to change which notification types are muted.",
-    },
-    errors: {
-      loadInboxFailed: "Could not load notifications.",
-      loadReferencesFailed: "Could not load filter data.",
-      loadSummaryFailed: "Could not load the summary.",
-      markReadFailed: "Could not mark the notification as read.",
-      dismissFailed: "Could not dismiss the notification.",
-      muteFailed: "Could not update the mute setting.",
-    },
-    types: {
-      MAP_STOP_COMPLETED: "Stop completed",
-      GAME_COMPLETED: "Game completed",
-      PUPIL_STUCK: "Pupil stuck",
-      WEEKLY_MYSTERY_SUBMITTED: "Weekly mystery submitted",
-    },
-    "map-stop-completed":
-      "{pupilDisplayName} completed {stopTitle} in {classroomTitle}.",
-    "game-completed":
-      "{pupilDisplayName} completed the game in {classroomTitle}.",
-    "pupil-stuck":
-      "{pupilDisplayName} is stuck on {stopTitle} in {classroomTitle}.",
-    "weekly-mystery-submitted":
-      "{pupilDisplayName} submitted the weekly mystery in {classroomTitle}.",
-  },
-  pages: {
-    help: "Help",
-    leaderboard: "Leaderboard",
-    notebook: "Notebook",
-    mystery: "Mystery",
-    medals: "Medals",
-    profile: "Profile",
-    settings: "Settings",
-  },
-  medals: {
-    title: "Medals",
-    description:
-      "This is where earned and locked medals are shown. Each medal keeps a dedicated asset slot so artwork can be added later without changing the page structure.",
-    filters: {
-      all: "All",
-      earned: "Earned",
-      locked: "Locked",
-    },
-    summary: {
-      earned: "Earned",
-      locked: "Locked",
-      total: "Total",
-      ofTotal: "{percent}% of {total}",
-      lockedDetail: "Medals still missing",
-      totalDetail: "Registered medals",
-    },
-    empty: {
-      title: "No medals yet",
-      description:
-        "When medals are available from the backend, they will appear here in a clear overview with room for icon art and status.",
-    },
-    errors: {
-      unauthenticated: "You must be logged in to view medals.",
-      loadFailed: "Could not load medals.",
-    },
-    card: {
-      earned: "Earned",
-      locked: "Locked",
-      example: "Approved example",
-      stop: "Stop",
-      noDescription: "No description has been added yet.",
-      assetReady: "Ready for image asset",
-      assetSlot: "Asset slot: {path}",
-    },
-    patterns: {
-      completionTitle: "{stop} completed",
-      completionDescription: "Awarded for completing the {stop} stop.",
-    },
-    types: {
-      stopCompletion: "Stop completion",
-      exampleApproval: "Example approval",
-    },
-    definitions: {
-      exampleApproval: {
-        title: "Example approval",
-        description: "Awarded when a submitted example is approved.",
-      },
-      stops: {
-        nyhetskvartalet: {
-          title: "News Quarter completed",
-          description: "Awarded when the News Quarter stop is completed.",
-        },
-        fotografen: {
-          title: "Fotograph completed",
-          description: "Awarded when the Fotograph stop is completed.",
-        },
-        postkontoret: {
-          title: "Post Office completed",
-          description: "Awarded when the Post Office stop is completed.",
-        },
-        markedsplassen: {
-          title: "Market Place completed",
-          description: "Awarded when the Market Place stop is completed.",
-        },
-        "den-sosiale-markedsplassen": {
-          title: "Social Meeting Place completed",
-          description:
-            "Awarded when the Social Meeting Place stop is completed.",
-        },
-        passordbanken: {
-          title: "Password Bank completed",
-          description: "Awarded when the Password Bank stop is completed.",
-        },
-        datasenteret: {
-          title: "Data Center completed",
-          description: "Awarded when the Data Center stop is completed.",
-        },
-      },
-    },
-    codes: {
-      "example-approval": {
-        title: "Example approval",
-        description: "Awarded when a submitted example is approved.",
-      },
-      "nyhetskvartalet-completion": {
-        title: "News Quarter completed",
-        description: "Awarded when the News Quarter stop is completed.",
-      },
-      "fotografen-completion": {
-        title: "Fotograph completed",
-        description: "Awarded when the Fotograph stop is completed.",
-      },
-      "postkontoret-completion": {
-        title: "Post Office completed",
-        description: "Awarded when the Post Office stop is completed.",
-      },
-      "markedsplassen-completion": {
-        title: "Market Place completed",
-        description: "Awarded when the Market Place stop is completed.",
-      },
-      "den-sosiale-markedsplassen-completion": {
-        title: "Social Meeting Place completed",
-        description: "Awarded when the Social Meeting Place stop is completed.",
-      },
-      "passordbanken-completion": {
-        title: "Password Bank completed",
-        description: "Awarded when the Password Bank stop is completed.",
-      },
-      "datasenteret-completion": {
-        title: "Data Center completed",
-        description: "Awarded when the Data Center stop is completed.",
-      },
-    },
-    sections: {
-      earned: "Your earned medals",
-      earnedHint: "These are the ones you already got.",
-      locked: "Medals you can earn",
-      lockedHint: "These are not earned yet.",
-      noneEarned: "You have not earned any medals yet.",
-    },
-    emptyEarned: "Keep going! Your first medal will appear here.",
-    emptyLocked: "No medals have been added yet.",
-  },
-  notebook: {
-    fallbackTitle: "Notebook",
-    stopLabel: "Stop {id}",
-    sidebarTitle: "Stops",
-    emptySection: "No notes for this stop yet.",
-    loading: "Loading notes...",
-    form: {
-      titlePlaceholder: "Title",
-      contentPlaceholder: "Note",
-      submit: "Create note",
     },
-    actions: {
-      deleteEntry: "Delete entry",
-    },
-    errors: {
-      createRequiresAuth: "You must be logged in to create notes.",
-      missingStop: "Could not find a valid stop for the note.",
-      missingFields: "Both title and content are required.",
-      createFailed: "Could not create the note.",
-      gameDeleteForbidden: "Game-generated notes cannot be deleted.",
-      deleteRequiresAuth: "You must be logged in to delete notes.",
-      deleteFailed: "Could not delete the note.",
-      loadRequiresAuth: "You must be logged in to open the notebook.",
-      loadFailed: "Could not load the notes.",
-      missingTeacherContext:
-        "Could not find the pupil or classroom for this notebook.",
-    },
-  },
-  shared: {
-    logout: "Log out",
-  },
-  leaderboard: {
-    rank: "Rank",
-    classroom: "Classroom",
-    averageScore: "Average score",
-    description: "Here you can view classroom rankings by average score",
-  },
-  pupilTable: {
-    name: "Name",
-    score: "Score",
-    xp: "XP",
-    level: "Level",
-    actions: "Actions",
-    remove: "Remove",
-    seeNotebook: "See notebook",
-  },
-  pupilOverviewPage: {
-    title: "Pupils",
-    description: "View pupils in this classroom, sorted by highest score.",
-  },
-  classroomOverview: {
-    title: "Classrooms",
-    description:
-      "View classroom status and open the classroom you want to manage.",
-  },
-  classroomTable: {
-    classroom: "Classroom",
-    description: "Description",
-    pupils: "Pupils",
-    pending: "Pending",
-    teachers: "Teachers",
-    tasks: "Tasks",
-    action: "Action",
-    open: "Open",
-  },
-  classroomDetails: {
-    label: "Classroom",
-    pupilOverview: {
-      title: "Pupils",
-      description: "Track progress and open pupil profiles.",
-    },
-    taskOverview: {
-      title: "Tasks",
-      description: "Choose which game tasks the class should work on.",
-    },
-    gameOverview: {
-      title: "Test the game",
-      description: "Try the pupil experience as the class will see it.",
-    },
-    mysteryOverview: {
-      title: "Weekly mystery",
-      description: "Check status and edit the weekly mystery.",
-    },
-    notificationOverview: {
-      title: "Notifications",
-      description: "Review events and messages for this classroom.",
-    },
-    mystery: {
-      title: 'Weekly mystery',
-      subtitle: "See what your teacher has picked, and submit your own find!",
-      loading: 'Loading mysteries...',
-      weekLabel: 'Week {week}',
-      prevWeek: 'Previous week',
-      nextWeek: 'Next week',
-      noMysteries: 'No mysteries have been posted yet.',
-      noMysteriesThisWeek: 'No mysteries this week.',
-      submissionImageAlt: 'Submission image',
-
-      modal: {
-        close: 'Close',
-      },
-
-      tabs: {
-        featured: 'This week',
-        submit: 'Submit',
-        mine: 'My submissions',
-      },
-
-      reviewStatus: {
-        pending: 'Pending',
-        approved: 'Approved',
-        rejected: 'Rejected',
-      },
-
-      submitForm: {
-        heading: 'Submit a find',
-        descriptionLabel: 'Write a comment',
-        descriptionPlaceholder: 'Comment on what you found — what looks suspicious? Where did you find it?',
-        uploadLabel: 'Upload image',
-        previewAlt: 'Preview of uploaded image',
-        removeImage: 'Remove image',
-        submit: 'Submit',
-        submitting: 'Submitting...',
-        success: 'Your find has been submitted! Your teacher will review it soon.',
-        unsupportedFileType: 'File type not supported. Please upload an image (JPEG, PNG, GIF or WebP).',
-      },
-
-      mySubmissions: {
-        heading: 'My submissions',
-        empty: "You haven't submitted anything yet. Try finding fake news online!",
-        teacherComment: "Teacher's comment",
-      },
-
-      errors: {
-        notAuthenticated: 'You must be logged in to view mysteries.',
-        loadFailed: 'Could not load mysteries. Please try again.',
-        submitFailed: 'Submission failed. Please try again.',
-      },
-    },
-    teacherMystery: {
-      title: 'Weekly mystery',
-      subtitle: 'Review submitted examples and choose this week\'s mysteries.',
-      loading: 'Loading...',
-      weekLabel: 'Week {week}',
-      prevWeek: 'Previous week',
-      nextWeek: 'Next week',
-      pupilLabel: 'Pupil',
-
-      tabs: {
-        pending: 'Pending review',
-        approved: 'Approved',
-        featured: 'This week\'s mysteries',
-      },
-
-      pending: {
-        empty: 'No submissions are waiting for review.',
-      },
-
-      approved: {
-        empty: 'No approved submissions yet.',
-        reviewedBy: 'Approved',
-        featuredThisWeek: 'Featured this week',
-      },
-
-      featured: {
-        empty: 'No mysteries have been posted yet. Approve a submission and add it here.',
-        add: 'Add mystery',
-      },
-
-      actions: {
-        approve: 'Approve',
-        reject: 'Reject',
-        feature: 'Choose week',
-        unfeature: 'Remove',
-      },
-
-      modal: {
-        approveTitle: 'Approve submission',
-        rejectTitle: 'Reject submission',
-        commentLabel: 'Comment to pupil (optional)',
-        commentPlaceholder: 'Great find! You noticed that...',
-        featureTitle: 'Add as this week\'s mystery',
-        weekLabel: 'Select week',
-        featureConfirm: 'Add',
-        cancel: 'Cancel',
-      },
-
-      errors: {
-        reviewFailed: 'Could not review the submission. Please try again.',
-        featureFailed: 'Could not add mystery. Please try again.',
-      },
-    },
-  },
-  joinCode: "Classroom code",
-} as const;
-
+    joinCode: "Classroom code",
+  } as const;

From 85846a85be6861366842a28127496719a7fd5add Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Tue, 28 Apr 2026 16:23:25 +0200
Subject: [PATCH 32/66] update routing

---
 src/app/__tests__/NotFoundPage.spec.ts | 2 +-
 src/classrooms/routes.ts               | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/app/__tests__/NotFoundPage.spec.ts b/src/app/__tests__/NotFoundPage.spec.ts
index 1c45e292..70f4501c 100644
--- a/src/app/__tests__/NotFoundPage.spec.ts
+++ b/src/app/__tests__/NotFoundPage.spec.ts
@@ -69,4 +69,4 @@ describe('NotFoundPage', () => {
     expect(link.attributes('href')).toBe('/teacher/home')
     expect(link.text()).toBe('Hjemskjerm')
   })
-})
+})
\ No newline at end of file
diff --git a/src/classrooms/routes.ts b/src/classrooms/routes.ts
index 9a746454..0f683214 100644
--- a/src/classrooms/routes.ts
+++ b/src/classrooms/routes.ts
@@ -9,7 +9,6 @@ import TeacherPlaytestMapPage from "@/teacher-playtest/pages/TeacherPlaytestMapP
 import NotificationsPage from "@/notifications/pages/NotificationsPage.vue";
 import TeacherPlaytestStopPage from "@/teacher-playtest/pages/TeacherPlaytestStopPage.vue";
 import ClassroomTasks from "@/classrooms/pages/ClassroomTasks.vue";
-import ClassroomMystery from "@/classrooms/pages/ClassroomMystery.vue";
 import NewClassroomTask from "@/classrooms/pages/NewClassroomTask.vue";
 import EditClassroomTask from "@/classrooms/pages/EditClassroomTask.vue";
 import PendingApproval from "@/classrooms/pages/PendingApproval.vue";

From c97c56e9a6f3974886527be127734d91302deff9 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Tue, 28 Apr 2026 16:23:53 +0200
Subject: [PATCH 33/66] update routing

---
 src/app/router/index.ts | 108 ++++++++++++++++------------------------
 1 file changed, 42 insertions(+), 66 deletions(-)

diff --git a/src/app/router/index.ts b/src/app/router/index.ts
index 2e571841..297459f4 100644
--- a/src/app/router/index.ts
+++ b/src/app/router/index.ts
@@ -80,86 +80,62 @@ export function createAppRouter(
       return true
     }
 
-    const hasCompletedOnboarding = authStore.user?.pupilProfile?.hasCompletedOnboarding
-    const classroomId = authStore.user?.pupilProfile?.currentClassroomId
-    const hasClassroom = classroomId !== null && classroomId !== undefined
+    const user = authStore.user
+    const portalType = authStore.portalType
 
-    const isGuestOnly = to.matched.some((record) => record.meta.guestOnly)
-    if (routeAccess === 'public' && isGuestOnly) {
-      return resolvePostLoginLocation(router, to.query.redirect, {
-        portalType: authStore.portalType,
-        hasCompletedOnboarding,
-        hasClassroom,
-      })
-    }
+    const hasCompletedOnboarding = user?.pupilProfile?.hasCompletedOnboarding ?? false
 
-    if (!canAccessRoute(to, authStore.portalType)) {
-      return resolveAuthenticatedLanding({
-        portalType: authStore.portalType,
-        hasCompletedOnboarding,
-        hasClassroom,
-      })
-    }
+    const classroomId = user?.pupilProfile?.currentClassroomId ?? null
+    const membershipStatus = user?.pupilProfile?.membershipStatus ?? null
 
-    if (
-      authStore.portalType === 'PUPIL' &&
-      !hasClassroom &&
-      to.name !== 'pupil-join-classroom'
-    ) {
-      return { name: 'pupil-join-classroom' }
-    }
+    const isJoinPage = to.name === "pupil-join-classroom"
+    const isPendingPage = to.name === "pupil-pending-approval"
+    const isOnboardingPage = to.name === "pupil-onboarding"
 
-    if (
-      authStore.portalType === 'PUPIL' &&
-      hasCompletedOnboarding === true &&
-      to.name === 'pupil-onboarding'
-    ) {
-      return resolveAuthenticatedLanding({
-        portalType: authStore.portalType,
-        hasCompletedOnboarding,
-        hasClassroom,
-      })
-    }
-
-    if (
-      authStore.portalType === 'PUPIL' &&
-      hasCompletedOnboarding === false &&
-      hasClassroom &&
-      !to.matched.some((record) => record.meta.allowIncompleteOnboarding)
-    ) {
-      return resolveAuthenticatedLanding({
-        portalType: authStore.portalType,
-        hasCompletedOnboarding,
-        hasClassroom,
-      })
+    if (portalType === "PUPIL") {
+      if (!classroomId) {
+        if (!isJoinPage) {
+          return {name: "pupil-join-classroom"}
+        }
+        return true
+      }
     }
 
-      const status = user.pupilProfile?.membershipStatus;
-      const classroomId = user.pupilProfile?.currentClassroomId;
-      const isJoinPage = to.name === "pupil-join-classroom";
-      const isPendingPage = to.name === "pupil-pending-approval";
-
-      if (status === "PENDING") {
-        if (!isPendingPage) {
-          return { name: "pupil-pending-approval" };
-        }
-        return true;
+    if (membershipStatus === "PENDING") {
+      if (!isPendingPage) {
+        return {name: "pupil-pending-approval"}
       }
+      return true
+    }
 
-      if (status === null || status === undefined) {
-        if (!isJoinPage) {
-          return { name: "pupil-join-classroom" };
+    if (membershipStatus === "ACTIVE") {
+      if (!hasCompletedOnboarding) {
+        if (!isOnboardingPage) {
+          return {name: "pupil-onboarding"}
         }
-        return true;
+        return true
       }
 
-      if (status === "ACTIVE" && isJoinPage) {
-        if (isJoinPage || isPendingPage) {
-          return { name: "pupil-home" };
-        }
+      if (isJoinPage || isPendingPage || isOnboardingPage) {
+        return {name: "pupil-home"}
       }
     }
+    if (!canAccessRoute(to, portalType)) {
+      return resolveAuthenticatedLanding({
+        portalType,
+        hasCompletedOnboarding,
+        hasClassroom: !!classroomId,
+      })
+    }
 
+    const isGuestOnly = to.matched.some((r) => r.meta.guestOnly)
+    if (routeAccess === "public" && isGuestOnly) {
+      return resolvePostLoginLocation(router, to.query.redirect, {
+        portalType,
+        hasCompletedOnboarding,
+        hasClassroom: !!classroomId,
+      })
+    }
     return true
   })
 

From 9e4e45d63af28ff02d29d54af30d1de721bb3a5a Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Tue, 28 Apr 2026 16:50:02 +0200
Subject: [PATCH 34/66] add notebook back to pupiltable

---
 .../components/__tests__/PupilTable.spec.ts       | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/classrooms/components/__tests__/PupilTable.spec.ts b/src/classrooms/components/__tests__/PupilTable.spec.ts
index 095b84f1..47667dd1 100644
--- a/src/classrooms/components/__tests__/PupilTable.spec.ts
+++ b/src/classrooms/components/__tests__/PupilTable.spec.ts
@@ -6,13 +6,14 @@ import { createAppI18n } from '@/app/i18n'
 import { useAuthStore } from '@/auth/model/auth.store'
 import PupilTable from '@/classrooms/components/PupilTable.vue'
 
-vi.mock('@/classrooms/store/classrooms.store.ts', () => ({
+vi.mock('@/classrooms/model/classrooms.store.ts', () => ({
   useClassroomsStore: () => ({
     selectedClassroom: {
       pupils: [
         {
           userId: 15,
           displayName: 'Ada',
+          pupilStatus: 'ACTIVE',
         },
       ],
     },
@@ -70,11 +71,15 @@ describe('PupilTable', () => {
 
     await flushPromises()
 
-    const links = wrapper.findAll('a')
-    const notebookLink = links[1]
+    const links = wrapper.findAllComponents({ name: 'RouterLink' })
 
-    expect(notebookLink?.attributes('href')).toBe(
-        '/teacher/classrooms/7/pupils/15/notebook'
+    const notebookLink = links.find(link =>
+        link.props('to')?.name === 'classroom-pupil-notebook'
     )
+
+    expect(notebookLink?.props('to')).toEqual({
+      name: 'classroom-pupil-notebook',
+      params: { classroomId: 7, pupilId: 15 },
+    })
   })
 })
\ No newline at end of file

From 32ed411c95978f962768c2935cea376e3e8c9230 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Tue, 28 Apr 2026 16:50:14 +0200
Subject: [PATCH 35/66] add notebook back to pupiltable

---
 src/classrooms/components/PupilTable.vue | 26 +++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/classrooms/components/PupilTable.vue b/src/classrooms/components/PupilTable.vue
index 94417644..01045712 100644
--- a/src/classrooms/components/PupilTable.vue
+++ b/src/classrooms/components/PupilTable.vue
@@ -159,13 +159,25 @@ async function approvePupil(pupilId: number) {
             </td>
 
             <td class="px-4 py-3 text-right">
-              <button
-                  class="rounded bg-red-600 px-3 py-1 text-white hover:bg-red-700 disabled:opacity-50"
-                  :disabled="store.isLoading"
-                  @click="askRemove(pupil.userId)"
-              >
-                {{ t("pupilTable.remove") }}
-              </button>
+              <div class="flex justify-end gap-2">
+                <RouterLink
+                    class="rounded bg-zinc-900 px-3 py-1 text-white hover:bg-zinc-700"
+                    :to="{
+                  name: 'classroom-pupil-notebook',
+                  params: { classroomId, pupilId: pupil.userId },
+                  }"
+                >
+                  {{ t("pupilTable.seeNotebook") }}
+                </RouterLink>
+
+                <button
+                    class="rounded bg-red-600 px-3 py-1 text-white hover:bg-red-700 disabled:opacity-50"
+                    :disabled="store.isLoading"
+                    @click="askRemove(pupil.userId)"
+                >
+                  {{ t("pupilTable.remove") }}
+                </button>
+              </div>
             </td>
           </tr>
 

From 1a1603e6f119916ff7866ad398ffb77a277a5ae2 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Tue, 28 Apr 2026 16:50:24 +0200
Subject: [PATCH 36/66] fix test

---
 src/classrooms/_tests_/classrooms.store.spec.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/classrooms/_tests_/classrooms.store.spec.ts b/src/classrooms/_tests_/classrooms.store.spec.ts
index b5223157..4e5316ba 100644
--- a/src/classrooms/_tests_/classrooms.store.spec.ts
+++ b/src/classrooms/_tests_/classrooms.store.spec.ts
@@ -15,6 +15,7 @@ describe("classrooms store", () => {
   function mockAuth() {
     const auth = useAuthStore();
     auth.accessToken = "token";
+    auth.fetchCurrentUserProfile = vi.fn()
     auth.user = {
       subject: "teacher-1",
       portalType: "TEACHER",

From 0e50fbf35992d794f3e647613484c36524f5f60a Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Tue, 28 Apr 2026 17:13:08 +0200
Subject: [PATCH 37/66] fix build errors

---
 src/app/router/__tests__/auth-routing.spec.ts          |  4 ++++
 src/avatar/model/__tests__/avatar.store.spec.ts        |  1 +
 src/classrooms/pages/ClassroomTasks.vue                | 10 ++++++++--
 .../components/__tests__/LeaderboardComponent.spec.ts  |  3 ++-
 src/mystery/model/__tests__/mystery.store.spec.ts      |  2 ++
 src/profile/pages/__tests__/PupilProfilePage.spec.ts   |  1 +
 src/pupil-portal/pages/__tests__/PupilHomePage.spec.ts |  2 ++
 .../pages/__tests__/PupilOnboardingPage.spec.ts        |  2 ++
 .../model/__tests__/teacher-mystery.store.spec.ts      |  2 ++
 9 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/app/router/__tests__/auth-routing.spec.ts b/src/app/router/__tests__/auth-routing.spec.ts
index 7dd39b61..a647f6a0 100644
--- a/src/app/router/__tests__/auth-routing.spec.ts
+++ b/src/app/router/__tests__/auth-routing.spec.ts
@@ -33,6 +33,7 @@ function authenticatedUser(
           currentLevel: 1,
           currentClassroomId: null,
           hasCompletedOnboarding: true,
+          membershipStatus: null,
         }
       : null,
     teacherProfile: null,
@@ -224,6 +225,7 @@ describe("authenticated routing", () => {
         currentLevel: 1,
         currentClassroomId: null,
         hasCompletedOnboarding: false,
+        membershipStatus: null,
       },
     });
 
@@ -246,6 +248,7 @@ describe("authenticated routing", () => {
         currentLevel: 1,
         currentClassroomId: 101,
         hasCompletedOnboarding: false,
+        membershipStatus: "ACTIVE"
       },
     });
 
@@ -268,6 +271,7 @@ describe("authenticated routing", () => {
         currentLevel: 1,
         currentClassroomId: 101,
         hasCompletedOnboarding: false,
+        membershipStatus: "ACTIVE",
       },
     });
 
diff --git a/src/avatar/model/__tests__/avatar.store.spec.ts b/src/avatar/model/__tests__/avatar.store.spec.ts
index b5d64ddc..8744105a 100644
--- a/src/avatar/model/__tests__/avatar.store.spec.ts
+++ b/src/avatar/model/__tests__/avatar.store.spec.ts
@@ -150,6 +150,7 @@ describe('useAvatarStore', () => {
         currentLevel: 1,
         currentClassroomId: 2,
         hasCompletedOnboarding: true,
+        membershipStatus: "ACTIVE",
       },
       teacherProfile: null,
     }
diff --git a/src/classrooms/pages/ClassroomTasks.vue b/src/classrooms/pages/ClassroomTasks.vue
index 4a84af9b..2f63d617 100644
--- a/src/classrooms/pages/ClassroomTasks.vue
+++ b/src/classrooms/pages/ClassroomTasks.vue
@@ -159,7 +159,9 @@ watch(
     () => [slug.value, stops.value],
     ([newSlug, stopsLoaded]) => {
       if (!newSlug || stopsLoaded?.length === 0) return
-      loadTasksForSlug(newSlug)
+      if (typeof newSlug === 'string') {
+        loadTasksForSlug(newSlug)
+      }
     },
     { immediate: true },
 )
@@ -215,7 +217,11 @@ watch(
             </span>
           </div>
 
-          <TaskCard :task="task" :show-answers="true" />
+          <TaskCard
+              :task="task"
+              :selected-answers="undefined"
+              :show-answers="true"
+          />
 
           <div class="flex justify-end gap-2">
             <button
diff --git a/src/leaderboard/components/__tests__/LeaderboardComponent.spec.ts b/src/leaderboard/components/__tests__/LeaderboardComponent.spec.ts
index ffdd59f6..97e655d2 100644
--- a/src/leaderboard/components/__tests__/LeaderboardComponent.spec.ts
+++ b/src/leaderboard/components/__tests__/LeaderboardComponent.spec.ts
@@ -1,7 +1,7 @@
 import { flushPromises, mount } from '@vue/test-utils'
 import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { createAppI18n } from '@/app/i18n'
+import { createAppI18n } from "@/app/i18n";
 import { useAuthStore } from '@/auth/model/auth.store'
 import Leaderboard from '@/leaderboard/components/LeaderboardComponent.vue'
 import { requestLeaderboard } from '@/leaderboard/api/leaderboard.api'
@@ -32,6 +32,7 @@ describe('Leaderboard', () => {
         currentLevel: 1,
         currentClassroomId: 1,
         hasCompletedOnboarding: true,
+        membershipStatus: "ACTIVE",
       },
       teacherProfile: null,
     }
diff --git a/src/mystery/model/__tests__/mystery.store.spec.ts b/src/mystery/model/__tests__/mystery.store.spec.ts
index 0f3bf973..3855e376 100644
--- a/src/mystery/model/__tests__/mystery.store.spec.ts
+++ b/src/mystery/model/__tests__/mystery.store.spec.ts
@@ -52,6 +52,7 @@ function seedPupilAuthStore() {
       currentLevel: 1,
       currentClassroomId: CLASSROOM_ID,
       hasCompletedOnboarding: true,
+      membershipStatus: "ACTIVE",
     },
     teacherProfile: null,
   }
@@ -135,6 +136,7 @@ await expect(store.fetchAll()).rejects.toThrow()
         currentLevel: 1,
         currentClassroomId: null as unknown as number,
         hasCompletedOnboarding: true,
+        membershipStatus: "ACTIVE",
       },
       teacherProfile: null,
     }
diff --git a/src/profile/pages/__tests__/PupilProfilePage.spec.ts b/src/profile/pages/__tests__/PupilProfilePage.spec.ts
index 373bd14a..cb692634 100644
--- a/src/profile/pages/__tests__/PupilProfilePage.spec.ts
+++ b/src/profile/pages/__tests__/PupilProfilePage.spec.ts
@@ -129,6 +129,7 @@ describe('PupilProfilePage', () => {
         currentLevel: 4,
         currentClassroomId: 101,
         hasCompletedOnboarding: true,
+        membershipStatus: "ACTIVE",
       },
       teacherProfile: null,
     }
diff --git a/src/pupil-portal/pages/__tests__/PupilHomePage.spec.ts b/src/pupil-portal/pages/__tests__/PupilHomePage.spec.ts
index 0cc52da1..454ab0ab 100644
--- a/src/pupil-portal/pages/__tests__/PupilHomePage.spec.ts
+++ b/src/pupil-portal/pages/__tests__/PupilHomePage.spec.ts
@@ -74,6 +74,7 @@ describe('PupilHomePage', () => {
         currentLevel: 4,
         currentClassroomId: 101,
         hasCompletedOnboarding: true,
+        membershipStatus: "ACTIVE",
       },
       teacherProfile: null,
     }
@@ -108,6 +109,7 @@ describe('PupilHomePage', () => {
         currentLevel: 4,
         currentClassroomId: 101,
         hasCompletedOnboarding: true,
+        membershipStatus: "ACTIVE",
       },
       teacherProfile: null,
     }
diff --git a/src/pupil-portal/pages/__tests__/PupilOnboardingPage.spec.ts b/src/pupil-portal/pages/__tests__/PupilOnboardingPage.spec.ts
index bbc17ffc..5f6121be 100644
--- a/src/pupil-portal/pages/__tests__/PupilOnboardingPage.spec.ts
+++ b/src/pupil-portal/pages/__tests__/PupilOnboardingPage.spec.ts
@@ -59,6 +59,7 @@ describe('PupilOnboardingPage', () => {
         currentLevel: 1,
         currentClassroomId: null,
         hasCompletedOnboarding: false,
+        membershipStatus: "ACTIVE",
       },
       teacherProfile: null,
     }
@@ -69,6 +70,7 @@ describe('PupilOnboardingPage', () => {
       currentLevel: 1,
       currentClassroomId: null,
       hasCompletedOnboarding: true,
+      membershipStatus: null,
     })
 
     const wrapper = mount(PupilOnboardingPage, {
diff --git a/src/teacher-mystery/model/__tests__/teacher-mystery.store.spec.ts b/src/teacher-mystery/model/__tests__/teacher-mystery.store.spec.ts
index 9d22467a..6418f24e 100644
--- a/src/teacher-mystery/model/__tests__/teacher-mystery.store.spec.ts
+++ b/src/teacher-mystery/model/__tests__/teacher-mystery.store.spec.ts
@@ -124,6 +124,7 @@ await expect(store.fetchAll(CLASSROOM_ID)).rejects.toThrow()
         currentLevel: 1,
         currentClassroomId: CLASSROOM_ID,
         hasCompletedOnboarding: true,
+        membershipStatus: "ACTIVE",
       },
       teacherProfile: null,
     }
@@ -224,6 +225,7 @@ expect(store.submissions[0]?.reviewStatus).toBe('PENDING')
         currentLevel: 1,
         currentClassroomId: CLASSROOM_ID,
         hasCompletedOnboarding: true,
+        membershipStatus: "ACTIVE",
       },
       teacherProfile: null,
     }

From c2ae90729aead412975788df3fed40c67c72437f Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Wed, 29 Apr 2026 00:17:31 +0200
Subject: [PATCH 38/66] fix routing for join page

---
 src/app/router/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/router/index.ts b/src/app/router/index.ts
index 297459f4..a822dd4c 100644
--- a/src/app/router/index.ts
+++ b/src/app/router/index.ts
@@ -93,7 +93,7 @@ export function createAppRouter(
     const isOnboardingPage = to.name === "pupil-onboarding"
 
     if (portalType === "PUPIL") {
-      if (!classroomId) {
+      if (membershipStatus === null || membershipStatus === undefined) {
         if (!isJoinPage) {
           return {name: "pupil-join-classroom"}
         }

From 9c27b8e6d1ebeab1f287e650be45a437685bf89f Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Wed, 29 Apr 2026 09:07:15 +0200
Subject: [PATCH 39/66] i18n

---
 src/classrooms/pages/ClassroomDetails.vue |  2 +-
 src/locales/en.ts                         |  1 +
 src/locales/nb.ts                         | 21 ++++++---------------
 3 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/src/classrooms/pages/ClassroomDetails.vue b/src/classrooms/pages/ClassroomDetails.vue
index 88b3722f..ef9d83a2 100644
--- a/src/classrooms/pages/ClassroomDetails.vue
+++ b/src/classrooms/pages/ClassroomDetails.vue
@@ -264,7 +264,7 @@ async function saveEdit() {
         :title="t('classroomDetails.cancel')"
         :message="t('classroomDetails.confirmmessage')"
         :cancelText="t('classroomDetails.cancel')"
-        :confirmText="t('confirmModal.confirm')"
+        :confirmText="t('classroomDetails.confirm')"
         @confirm="confirmDelete"
     />
   </main>
diff --git a/src/locales/en.ts b/src/locales/en.ts
index ffcf428e..2310c4eb 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -698,6 +698,7 @@ export const en = {
         edit: "Edit",
         addteachers: "Add teachers",
         existingteachers: "Existing teachers",
+        confirm: "Delete",
         pendingApproval: {
             refresh: "Update status",
             waiting: "Awaiting approval.",
diff --git a/src/locales/nb.ts b/src/locales/nb.ts
index 69380509..51d58460 100644
--- a/src/locales/nb.ts
+++ b/src/locales/nb.ts
@@ -779,21 +779,7 @@ export const nb = {
     edit: "Endre",
     addteachers: "Legg til lærere",
     existingteachers: "Eksisterende lærere",
-    pendingApproval: {
-      refresh: "Oppdater status",
-      waiting: "Venter på godkjenning.",
-      request: "Din forespørsel på å bli med i klasserommet avventer godkjenning fra lærer.",
-    },
-    pupilOverview: {
-      title: "Elever",
-      description: "Følg progresjon og åpne elevprofiler.",
-    },
-    confirmModal: {
-      cancel: "Avbryt",
-      confirm: "Fortsett",
-      title: "Er du sikker?",
-      message: "Denne handlingen kan ikke angres."
-    },
+    confirm: "Slett",
     taskOverview: {
       title: "Oppgaver",
       description: "Velg hvilke spilloppgaver klassen skal jobbe med.",
@@ -811,6 +797,11 @@ export const nb = {
       description: "Se hendelser og meldinger knyttet til dette klasserommet.",
     },
     joinCode: "Klasseromskode"
+  },
+  pendingApproval: {
+    refresh: "Oppdater status",
+    waiting: "Venter på godkjenning.",
+    request: "Din forespørsel på å bli med i klasserommet avventer godkjenning fra lærer.",
   },
     mystery: {
       title: 'Ukens mysterium',

From 933e7dc31fa697e1134e49939c3e134b137384d7 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Wed, 29 Apr 2026 22:38:38 +0200
Subject: [PATCH 40/66] remove double route

---
 src/classrooms/routes.ts | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/src/classrooms/routes.ts b/src/classrooms/routes.ts
index 0f683214..18936fc3 100644
--- a/src/classrooms/routes.ts
+++ b/src/classrooms/routes.ts
@@ -139,19 +139,14 @@ export function createClassroomRoutes(prefix: string): RouteRecordRaw[] {
         params: { classroomId: route.params.classroomId },
       }),
     },
-  },
-  {
-    path: "classrooms/:classroomId/mystery",
-    name: "classroom-mystery",
-    component: TeacherMystery,
-    meta: {
-      backTarget: classroomDetailsBackTarget,
-    },
   },
     {
-      path: "classrooms/:classroomId",
-      name: "classroom-pupil-progress",
-      component: ClassroomDetails,
-    }
+      path: "classrooms/:classroomId/mystery",
+      name: "classroom-mystery",
+      component: TeacherMystery,
+      meta: {
+        backTarget: classroomDetailsBackTarget,
+      },
+    },
   ];
 }

From 4509afe4a8422a06dff30adb6b50522615bb0979 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Wed, 29 Apr 2026 22:38:58 +0200
Subject: [PATCH 41/66] route to task slug

---
 src/classrooms/pages/EditClassroomTask.vue | 29 ++++++++++++++++------
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/classrooms/pages/EditClassroomTask.vue b/src/classrooms/pages/EditClassroomTask.vue
index f728cfca..44b6949a 100644
--- a/src/classrooms/pages/EditClassroomTask.vue
+++ b/src/classrooms/pages/EditClassroomTask.vue
@@ -3,7 +3,7 @@ import { computed, ref, onMounted } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useAuthStore } from "@/auth/model/auth.store"
 import { useI18n } from "vue-i18n";
-
+import { useTeacherStops } from "@/classrooms/components/composables/UseTeacherStops"
 import {
   requestCreateTask,
   requestTask,
@@ -11,6 +11,7 @@ import {
   type TaskResponse,
 } from "@/stops/api/stops.api"
 
+
 import TaskMetaEditor from "@/classrooms/components/tasks/TaskMetaEditor.vue"
 import TaskItemsEditor from "@/classrooms/components/tasks/TaskItemsEditor.vue"
 
@@ -20,7 +21,8 @@ const authStore = useAuthStore()
 
 const { t } = useI18n();
 
-const classroomId = Number(route.params.classroomId)
+const classroomId = computed(() => Number(route.params.classroomId))
+const { stops } = useTeacherStops(classroomId)
 const taskId = route.params.taskId ? Number(route.params.taskId) : null
 
 const isEditMode = computed(() => taskId !== null)
@@ -30,7 +32,7 @@ const error = ref<string | null>(null)
 
 const form = ref<TaskResponse>({
   id: 0,
-  classroomId,
+  classroomId: classroomId.value,
   stopId: 1,
   createdByTeacherId: 0,
   title: { en: "", nb: "" },
@@ -44,6 +46,10 @@ const form = ref<TaskResponse>({
   items: [],
 })
 
+const selectedStop = computed(() =>
+    stops.value.find(s => s.stopId === form.value.stopId)
+)
+
 async function load() {
   if (!taskId) return
   if (!authStore.authorizationHeader) return
@@ -53,7 +59,7 @@ async function load() {
 
   try {
     const data = await requestTask(
-        classroomId,
+        classroomId.value,
         taskId,
         authStore.authorizationHeader,
     )
@@ -86,23 +92,32 @@ async function save() {
   try {
     if (isEditMode.value && taskId !== null) {
       await requestUpdateTask(
-          classroomId,
+          classroomId.value,
           taskId,
           form.value,
           authStore.authorizationHeader,
       )
     } else {
       await requestCreateTask(
-          classroomId,
+          classroomId.value,
           form.value,
           authStore.authorizationHeader,
       )
     }
 
+    const slug = selectedStop.value?.slug
+
+    if (!slug) {
+      error.value = "Could not determine stop slug"
+      return
+    }
 
     await router.push({
       name: "classroom-tasks",
-      params: { classroomId, slug: 'nyhetskvartalet' },
+      params: {
+        classroomId: classroomId.value,
+        slug,
+      },
     })
   } catch (e) {
     error.value = e instanceof Error ? e.message : t("newTask.savefail")

From 9d4fd84008d7271884ba04ae22537cfce5d51890 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Wed, 29 Apr 2026 22:39:07 +0200
Subject: [PATCH 42/66] fix add teacher

---
 src/classrooms/pages/ClassroomDetails.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/classrooms/pages/ClassroomDetails.vue b/src/classrooms/pages/ClassroomDetails.vue
index ef9d83a2..bcf2ccd1 100644
--- a/src/classrooms/pages/ClassroomDetails.vue
+++ b/src/classrooms/pages/ClassroomDetails.vue
@@ -44,8 +44,6 @@ const editForm = ref({
   description: "",
 });
 
-const teacherInput = ref("");
-
 watch(classroom, (c) => {
   if (c) {
     editForm.value = {
@@ -86,7 +84,10 @@ async function saveEdit() {
 
   const existingEmails = classroom.value?.teachers?.map(t => t.email) ?? [];
 
-  const newEmails = teacherInput.value.split(",").map(e => e.trim()).filter(Boolean);
+  const newEmails = newTeacherInput.value
+  .split(",")
+  .map(e => e.trim())
+  .filter(Boolean);
 
   const mergedEmails = Array.from(new Set([...existingEmails, ...newEmails]));
 
@@ -101,6 +102,7 @@ async function saveEdit() {
         classroom.value.classroomId
     );
 
+    newTeacherInput.value = "";
     isEditing.value = false;
   } catch (e) {
     console.error(e);

From 886f7222ca501f8d6f765a6da01b12a08bc262b8 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Wed, 29 Apr 2026 23:21:20 +0200
Subject: [PATCH 43/66] fix merge breaks

---
 .../_tests_/classrooms.store.spec.ts          | 55 +++----------------
 src/classrooms/api/classrooms.api.ts          | 13 -----
 .../__tests__/NotebookComponent.spec.ts       |  1 +
 .../__tests__/PupilOnboardingPage.spec.ts     |  1 +
 4 files changed, 11 insertions(+), 59 deletions(-)

diff --git a/src/classrooms/_tests_/classrooms.store.spec.ts b/src/classrooms/_tests_/classrooms.store.spec.ts
index 6448e60a..3dae7b41 100644
--- a/src/classrooms/_tests_/classrooms.store.spec.ts
+++ b/src/classrooms/_tests_/classrooms.store.spec.ts
@@ -87,6 +87,9 @@ describe('classrooms store', () => {
       description: '',
       teacherEmails: [],
       joinCode: 'ABC123',
+      pupilCount: 0,
+      pendingPupilCount: 0,
+      teacherCount: 1,
     })
 
     const store = useClassroomsStore()
@@ -102,8 +105,6 @@ describe('classrooms store', () => {
 
     vi.spyOn(api, 'requestGetClassrooms').mockRejectedValue(new Error('fail'))
 
-    const store = useClassroomsStore()
-
     const spy = vi
       .spyOn(api, "requestJoinClassroom")
       .mockResolvedValue({
@@ -125,19 +126,6 @@ describe('classrooms store', () => {
     expect(result.title).toBe("Joined");
   });
 
-  it("handles API error", async () => {
-    mockAuth();
-
-    vi.spyOn(api, "requestGetClassrooms").mockRejectedValue(new Error("fail"));
-
-    const store = useClassroomsStore();
-
-    await store.fetchClassrooms();
-    await store.fetchClassrooms()
-
-    expect(store.errorMessage).toBe('fail')
-  })
-
   it('handles join classroom error', async () => {
     mockAuth()
 
@@ -159,6 +147,9 @@ describe('classrooms store', () => {
         description: '',
         teacherEmails: [],
         joinCode: 'A',
+        pupilCount: 0,
+        pendingPupilCount: 0,
+        teacherCount: 1,
       },
     ])
     .mockResolvedValueOnce([
@@ -168,38 +159,10 @@ describe('classrooms store', () => {
         description: '',
         teacherEmails: [],
         joinCode: 'B',
+        pupilCount: 0,
+        pendingPupilCount: 0,
+        teacherCount: 1,
       },
     ])
   })
-
-    const store = useClassroomsStore()
-
-    await store.fetchClassrooms()
-    await store.fetchClassrooms()
-
-  it("handles join classroom error", async () => {
-    mockAuth();
-
-    vi.spyOn(api, "requestJoinClassroom").mockRejectedValue(new Error("fail"));
-
-    const store = useClassroomsStore();
-
-    await expect(store.joinClassroom("ABC123")).rejects.toThrow("fail");
-  });
-
-  it("replaces classrooms when fetching again", async () => {
-    mockAuth();
-
-    vi.spyOn(api, "requestGetClassrooms")
-    .mockResolvedValueOnce([{ classroomId: 1, title: "Old", description: "", teacherEmails: [], joinCode: "A", pupilCount: 0, pendingPupilCount: 0, teacherCount: 1, }])
-    .mockResolvedValueOnce([{ classroomId: 2, title: "New", description: "", teacherEmails: [], joinCode: "B", pupilCount: 0, pendingPupilCount: 0, teacherCount: 1, }]);
-
-    const store = useClassroomsStore();
-
-    await store.fetchClassrooms();
-    await store.fetchClassrooms();
-
-    expect(store.classrooms.length).toBe(1);
-    expect(store.classrooms[0]!.title).toBe("New");
-  });
 });
diff --git a/src/classrooms/api/classrooms.api.ts b/src/classrooms/api/classrooms.api.ts
index a4717a9c..c91008f6 100644
--- a/src/classrooms/api/classrooms.api.ts
+++ b/src/classrooms/api/classrooms.api.ts
@@ -56,19 +56,6 @@ export type Classroom = {
   taskCount: number
 }
 
-export interface ClassroomPupilResponse {
-  userId: number
-  displayName: string
-}
-
-export interface ClassroomDetailResponse {
-  classroomId: number
-  title: string
-  description: string | null
-  joinCode: string
-  pupils: ClassroomPupilResponse[]
-}
-
 const mockPupilsByClassroom: Record<string, ClassroomPupil[]> = {
   'classroom-1': [
     {
diff --git a/src/notebook/components/__tests__/NotebookComponent.spec.ts b/src/notebook/components/__tests__/NotebookComponent.spec.ts
index 8ddfdb16..97e47e34 100644
--- a/src/notebook/components/__tests__/NotebookComponent.spec.ts
+++ b/src/notebook/components/__tests__/NotebookComponent.spec.ts
@@ -246,6 +246,7 @@ describe('NotebookComponent pupil pagination', () => {
         totalXp: 0,
         currentLevel: 1,
         currentClassroomId: 7,
+        membershipStatus: "ACTIVE",
         hasCompletedOnboarding: true,
       },
       teacherProfile: null,
diff --git a/src/pupil-portal/pages/__tests__/PupilOnboardingPage.spec.ts b/src/pupil-portal/pages/__tests__/PupilOnboardingPage.spec.ts
index 8f213041..662c9e7d 100644
--- a/src/pupil-portal/pages/__tests__/PupilOnboardingPage.spec.ts
+++ b/src/pupil-portal/pages/__tests__/PupilOnboardingPage.spec.ts
@@ -143,6 +143,7 @@ describe('PupilOnboardingPage', () => {
         totalXp: 300,
         currentLevel: 2,
         currentClassroomId: 10,
+        membershipStatus: "ACTIVE",
         hasCompletedOnboarding: false,
       },
       teacherProfile: null,

From 46a52b5bce2861e289742ae22e0a6f77cd159130 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Wed, 29 Apr 2026 23:26:15 +0200
Subject: [PATCH 44/66] formatting

---
 src/app/__tests__/NotFoundPage.spec.ts        |   2 +-
 src/app/router/__tests__/auth-routing.spec.ts |  27 +--
 src/app/router/index.ts                       |  25 +--
 src/auth/api/auth.api.ts                      |   8 +-
 src/auth/model/auth.types.ts                  |  12 +-
 src/auth/pages/__tests__/login-pages.spec.ts  |   2 +-
 .../model/__tests__/avatar.store.spec.ts      |   2 +-
 .../_tests_/classrooms.store.spec.ts          |  96 ++++-----
 src/classrooms/_tests_/pupil-routing.spec.ts  |   2 +-
 src/classrooms/api/classrooms.api.ts          |  87 ++++----
 src/classrooms/components/ClassroomTable.vue  |  76 +++----
 src/classrooms/components/ConfirmModal.vue    |  50 ++---
 src/classrooms/components/PupilTable.vue      | 197 ++++++++---------
 .../components/__tests__/PupilTable.spec.ts   |   4 +-
 .../components/composables/UseTeacherStops.ts |   2 +-
 .../components/tasks/ClassroomTaskSidebar.vue |  26 +--
 .../components/tasks/TaskItemsEditor.vue      |  40 ++--
 .../components/tasks/TaskMetaEditor.vue       |  52 +++--
 .../components/tasks/TaskOptionEditor.vue     |  65 +++---
 src/classrooms/model/classrooms.store.ts      |  48 ++---
 src/classrooms/pages/ClassroomDetails.vue     | 197 +++++++++--------
 src/classrooms/pages/ClassroomMystery.vue     |   4 +-
 .../pages/ClassroomNotifications.vue          |   4 +-
 src/classrooms/pages/ClassroomTasks.vue       | 204 +++++++++---------
 src/classrooms/pages/EditClassroomTask.vue    |  98 ++++-----
 src/classrooms/pages/JoinClassroom.vue        |  16 +-
 src/classrooms/pages/NewClassroom.vue         |  10 +-
 src/classrooms/pages/NewClassroomTask.vue     | 124 +++++------
 src/classrooms/pages/PendingApproval.vue      |  63 +++---
 src/classrooms/routes.ts                      | 130 +++++------
 .../__tests__/LeaderboardComponent.spec.ts    |   4 +-
 src/locales/nb.ts                             | 164 +++++++-------
 src/map/model/__tests__/map.store.spec.ts     |   2 +-
 .../model/__tests__/mystery.store.spec.ts     |   4 +-
 .../__tests__/NotebookComponent.spec.ts       |   2 +-
 .../pages/__tests__/PupilProfilePage.spec.ts  |   4 +-
 .../pages/__tests__/PupilHomePage.spec.ts     |   4 +-
 .../__tests__/PupilOnboardingPage.spec.ts     |   4 +-
 src/stops/api/stops.api.ts                    |  80 +++----
 src/stops/model/__tests__/stop.store.spec.ts  |   2 +-
 src/stops/model/task.store.ts                 |  70 +++---
 .../__tests__/teacher-mystery.store.spec.ts   |   4 +-
 .../model/teacherPlaytestMap.store.ts         |   5 +-
 .../pages/TeacherPlaytestMapPage.vue          |  11 +-
 44 files changed, 1019 insertions(+), 1014 deletions(-)

diff --git a/src/app/__tests__/NotFoundPage.spec.ts b/src/app/__tests__/NotFoundPage.spec.ts
index 70f4501c..1c45e292 100644
--- a/src/app/__tests__/NotFoundPage.spec.ts
+++ b/src/app/__tests__/NotFoundPage.spec.ts
@@ -69,4 +69,4 @@ describe('NotFoundPage', () => {
     expect(link.attributes('href')).toBe('/teacher/home')
     expect(link.text()).toBe('Hjemskjerm')
   })
-})
\ No newline at end of file
+})
diff --git a/src/app/router/__tests__/auth-routing.spec.ts b/src/app/router/__tests__/auth-routing.spec.ts
index 0df5ea71..1d1a54d3 100644
--- a/src/app/router/__tests__/auth-routing.spec.ts
+++ b/src/app/router/__tests__/auth-routing.spec.ts
@@ -26,16 +26,17 @@ function authenticatedUser(
     email: portalType === 'TEACHER' ? 'teacher@example.com' : null,
     username: null,
     authorities: [],
-    pupilProfile: portalType === "PUPIL"
-      ? {
-          displayName: "Ada",
-          totalXp: 0,
-          currentLevel: 1,
-          currentClassroomId: null,
-          hasCompletedOnboarding: true,
-          membershipStatus: null,
-        }
-      : null,
+    pupilProfile:
+      portalType === 'PUPIL'
+        ? {
+            displayName: 'Ada',
+            totalXp: 0,
+            currentLevel: 1,
+            currentClassroomId: null,
+            hasCompletedOnboarding: true,
+            membershipStatus: null,
+          }
+        : null,
     teacherProfile: null,
     ...overrides,
   }
@@ -209,7 +210,7 @@ describe('authenticated routing', () => {
         displayName: '',
         totalXp: 0,
         currentLevel: 0,
-        membershipStatus: "ACTIVE",
+        membershipStatus: 'ACTIVE',
         hasCompletedOnboarding: true,
       },
     })
@@ -256,7 +257,7 @@ describe('authenticated routing', () => {
         currentLevel: 1,
         currentClassroomId: 101,
         hasCompletedOnboarding: false,
-        membershipStatus: "ACTIVE"
+        membershipStatus: 'ACTIVE',
       },
     })
 
@@ -279,7 +280,7 @@ describe('authenticated routing', () => {
         currentLevel: 1,
         currentClassroomId: 101,
         hasCompletedOnboarding: false,
-        membershipStatus: "ACTIVE",
+        membershipStatus: 'ACTIVE',
       },
     })
 
diff --git a/src/app/router/index.ts b/src/app/router/index.ts
index e84136f7..dbe50f1b 100644
--- a/src/app/router/index.ts
+++ b/src/app/router/index.ts
@@ -87,41 +87,42 @@ export function createAppRouter(
     const user = authStore.user
     const portalType = authStore.portalType
 
-    const hasCompletedOnboarding = user?.pupilProfile?.hasCompletedOnboarding ?? false
+    const hasCompletedOnboarding =
+      user?.pupilProfile?.hasCompletedOnboarding ?? false
 
     const classroomId = user?.pupilProfile?.currentClassroomId ?? null
     const membershipStatus = user?.pupilProfile?.membershipStatus ?? null
 
-    const isJoinPage = to.name === "pupil-join-classroom"
-    const isPendingPage = to.name === "pupil-pending-approval"
-    const isOnboardingPage = to.name === "pupil-onboarding"
+    const isJoinPage = to.name === 'pupil-join-classroom'
+    const isPendingPage = to.name === 'pupil-pending-approval'
+    const isOnboardingPage = to.name === 'pupil-onboarding'
 
-    if (portalType === "PUPIL") {
+    if (portalType === 'PUPIL') {
       if (membershipStatus === null || membershipStatus === undefined) {
         if (!isJoinPage) {
-          return {name: "pupil-join-classroom"}
+          return { name: 'pupil-join-classroom' }
         }
         return true
       }
     }
 
-    if (membershipStatus === "PENDING") {
+    if (membershipStatus === 'PENDING') {
       if (!isPendingPage) {
-        return {name: "pupil-pending-approval"}
+        return { name: 'pupil-pending-approval' }
       }
       return true
     }
 
-    if (membershipStatus === "ACTIVE") {
+    if (membershipStatus === 'ACTIVE') {
       if (!hasCompletedOnboarding) {
         if (!isOnboardingPage) {
-          return {name: "pupil-onboarding"}
+          return { name: 'pupil-onboarding' }
         }
         return true
       }
 
       if (isJoinPage || isPendingPage || isOnboardingPage) {
-        return {name: "pupil-home"}
+        return { name: 'pupil-home' }
       }
     }
     if (!canAccessRoute(to, portalType)) {
@@ -133,7 +134,7 @@ export function createAppRouter(
     }
 
     const isGuestOnly = to.matched.some((r) => r.meta.guestOnly)
-    if (routeAccess === "public" && isGuestOnly) {
+    if (routeAccess === 'public' && isGuestOnly) {
       return resolvePostLoginLocation(router, to.query.redirect, {
         portalType,
         hasCompletedOnboarding,
diff --git a/src/auth/api/auth.api.ts b/src/auth/api/auth.api.ts
index 3d196779..caa63258 100644
--- a/src/auth/api/auth.api.ts
+++ b/src/auth/api/auth.api.ts
@@ -99,16 +99,16 @@ export async function fetchJson<T>(
     return undefined as T
   }
 
-  const text = await response.text();
+  const text = await response.text()
 
   if (!text) {
-    return undefined as T;
+    return undefined as T
   }
 
   try {
-    return JSON.parse(text) as T;
+    return JSON.parse(text) as T
   } catch {
-    throw new Error("invalid response from server");
+    throw new Error('invalid response from server')
   }
 }
 
diff --git a/src/auth/model/auth.types.ts b/src/auth/model/auth.types.ts
index f0406c6b..1fead4aa 100644
--- a/src/auth/model/auth.types.ts
+++ b/src/auth/model/auth.types.ts
@@ -28,12 +28,12 @@ export interface AuthUser {
 }
 
 export interface PupilProfile {
-  displayName: string;
-  totalXp: number;
-  currentLevel: number;
-  currentClassroomId: number | null;
-  membershipStatus: string | null;
-  hasCompletedOnboarding: boolean;
+  displayName: string
+  totalXp: number
+  currentLevel: number
+  currentClassroomId: number | null
+  membershipStatus: string | null
+  hasCompletedOnboarding: boolean
 }
 
 export interface TeacherProfile {
diff --git a/src/auth/pages/__tests__/login-pages.spec.ts b/src/auth/pages/__tests__/login-pages.spec.ts
index b8398939..76c1d6d7 100644
--- a/src/auth/pages/__tests__/login-pages.spec.ts
+++ b/src/auth/pages/__tests__/login-pages.spec.ts
@@ -198,7 +198,7 @@ describe('login form validation', () => {
           displayName: '',
           totalXp: 0,
           currentLevel: 0,
-          membershipStatus: "ACTIVE",
+          membershipStatus: 'ACTIVE',
           hasCompletedOnboarding: true,
         },
         teacherProfile: null,
diff --git a/src/avatar/model/__tests__/avatar.store.spec.ts b/src/avatar/model/__tests__/avatar.store.spec.ts
index be1e3adf..b2982fe3 100644
--- a/src/avatar/model/__tests__/avatar.store.spec.ts
+++ b/src/avatar/model/__tests__/avatar.store.spec.ts
@@ -156,7 +156,7 @@ describe('useAvatarStore', () => {
         currentLevel: 1,
         currentClassroomId: 2,
         hasCompletedOnboarding: true,
-        membershipStatus: "ACTIVE",
+        membershipStatus: 'ACTIVE',
       },
       teacherProfile: null,
     }
diff --git a/src/classrooms/_tests_/classrooms.store.spec.ts b/src/classrooms/_tests_/classrooms.store.spec.ts
index 3dae7b41..8d053eff 100644
--- a/src/classrooms/_tests_/classrooms.store.spec.ts
+++ b/src/classrooms/_tests_/classrooms.store.spec.ts
@@ -1,8 +1,8 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createPinia, setActivePinia } from 'pinia'
 
-import { useClassroomsStore } from "@/classrooms/model/classrooms.store.ts";
-import { useAuthStore } from "@/auth/model/auth.store.ts";
+import { useClassroomsStore } from '@/classrooms/model/classrooms.store.ts'
+import { useAuthStore } from '@/auth/model/auth.store.ts'
 
 import * as api from '@/classrooms/api/classrooms.api'
 
@@ -13,8 +13,8 @@ describe('classrooms store', () => {
   })
 
   function mockAuth() {
-    const auth = useAuthStore();
-    auth.accessToken = "token";
+    const auth = useAuthStore()
+    auth.accessToken = 'token'
     auth.fetchCurrentUserProfile = vi.fn()
     auth.user = {
       subject: 'teacher-1',
@@ -37,7 +37,7 @@ describe('classrooms store', () => {
         title: 'Math',
         description: '',
         teacherEmails: [],
-        joinCode: "ABC123",
+        joinCode: 'ABC123',
         pupilCount: 0,
         pendingPupilCount: 0,
         teacherCount: 1,
@@ -60,11 +60,11 @@ describe('classrooms store', () => {
       title: 'Science',
       description: '',
       teacherEmails: [],
-      joinCode: "XYZ321",
+      joinCode: 'XYZ321',
       pupilCount: 0,
       pendingPupilCount: 0,
       teacherCount: 1,
-    });
+    })
 
     const store = useClassroomsStore()
 
@@ -105,26 +105,24 @@ describe('classrooms store', () => {
 
     vi.spyOn(api, 'requestGetClassrooms').mockRejectedValue(new Error('fail'))
 
-    const spy = vi
-      .spyOn(api, "requestJoinClassroom")
-      .mockResolvedValue({
-        classroomId: 1,
-        title: "Joined",
-        description: "",
-        teacherEmails: [],
-        joinCode: "ABC123",
-        pupilCount: 0,
-        pendingPupilCount: 0,
-        teacherCount: 1,
-      });
+    const spy = vi.spyOn(api, 'requestJoinClassroom').mockResolvedValue({
+      classroomId: 1,
+      title: 'Joined',
+      description: '',
+      teacherEmails: [],
+      joinCode: 'ABC123',
+      pupilCount: 0,
+      pendingPupilCount: 0,
+      teacherCount: 1,
+    })
 
-    const store = useClassroomsStore();
+    const store = useClassroomsStore()
 
-    const result = await store.joinClassroom("ABC123");
+    const result = await store.joinClassroom('ABC123')
 
-    expect(spy).toHaveBeenCalled();
-    expect(result.title).toBe("Joined");
-  });
+    expect(spy).toHaveBeenCalled()
+    expect(result.title).toBe('Joined')
+  })
 
   it('handles join classroom error', async () => {
     mockAuth()
@@ -140,29 +138,29 @@ describe('classrooms store', () => {
     mockAuth()
 
     vi.spyOn(api, 'requestGetClassrooms')
-    .mockResolvedValueOnce([
-      {
-        classroomId: 1,
-        title: 'Old',
-        description: '',
-        teacherEmails: [],
-        joinCode: 'A',
-        pupilCount: 0,
-        pendingPupilCount: 0,
-        teacherCount: 1,
-      },
-    ])
-    .mockResolvedValueOnce([
-      {
-        classroomId: 2,
-        title: 'New',
-        description: '',
-        teacherEmails: [],
-        joinCode: 'B',
-        pupilCount: 0,
-        pendingPupilCount: 0,
-        teacherCount: 1,
-      },
-    ])
+      .mockResolvedValueOnce([
+        {
+          classroomId: 1,
+          title: 'Old',
+          description: '',
+          teacherEmails: [],
+          joinCode: 'A',
+          pupilCount: 0,
+          pendingPupilCount: 0,
+          teacherCount: 1,
+        },
+      ])
+      .mockResolvedValueOnce([
+        {
+          classroomId: 2,
+          title: 'New',
+          description: '',
+          teacherEmails: [],
+          joinCode: 'B',
+          pupilCount: 0,
+          pendingPupilCount: 0,
+          teacherCount: 1,
+        },
+      ])
   })
-});
+})
diff --git a/src/classrooms/_tests_/pupil-routing.spec.ts b/src/classrooms/_tests_/pupil-routing.spec.ts
index 66eb21b0..f2d17c3e 100644
--- a/src/classrooms/_tests_/pupil-routing.spec.ts
+++ b/src/classrooms/_tests_/pupil-routing.spec.ts
@@ -43,7 +43,7 @@ describe('join classroom routing', () => {
             totalXp: 0,
             currentLevel: 1,
             currentClassroomId: 1,
-            membershipStatus: "ACTIVE",
+            membershipStatus: 'ACTIVE',
             hasCompletedOnboarding: true,
           }
         : {
diff --git a/src/classrooms/api/classrooms.api.ts b/src/classrooms/api/classrooms.api.ts
index c91008f6..713eaa50 100644
--- a/src/classrooms/api/classrooms.api.ts
+++ b/src/classrooms/api/classrooms.api.ts
@@ -36,14 +36,14 @@ export type ClassroomPupil = {
 }
 
 export type ClassroomResponse = {
-  classroomId: number;
-  title: string;
-  description?: string;
-  teacherEmails: string[];
-  joinCode: string;
-  pupilCount: number,
-  pendingPupilCount: number,
-  teacherCount: number,
+  classroomId: number
+  title: string
+  description?: string
+  teacherEmails: string[]
+  joinCode: string
+  pupilCount: number
+  pendingPupilCount: number
+  teacherCount: number
 }
 
 export type Classroom = {
@@ -174,27 +174,27 @@ export type JoinClassroomRequest = {
 }
 
 export type ClassroomMemberResponse = {
-  userId: number;
-  displayName: string;
-  email: string;
-};
+  userId: number
+  displayName: string
+  email: string
+}
 
 export type ClassroomDetailResponse = ClassroomResponse & {
   pupils: {
-    userId: number;
-    displayName: string;
-    pupilStatus: "PENDING" | "ACTIVE";
-  }[],
+    userId: number
+    displayName: string
+    pupilStatus: 'PENDING' | 'ACTIVE'
+  }[]
   teachers: {
-    userId: number;
-    email: string;
-  }[],
-};
+    userId: number
+    email: string
+  }[]
+}
 
 export type ClassroomPupilResponse = {
-  userId: number;
-  displayName: string;
-  pupilStatus: "PENDING" | "ACTIVE";
+  userId: number
+  displayName: string
+  pupilStatus: 'PENDING' | 'ACTIVE'
 }
 
 export type updateClassroomRequest = {
@@ -333,34 +333,31 @@ export function requestRemovePupil(
 }
 
 export async function requestApprovePupil(
-    authHeader: string,
-    classroomId: number,
-    pupilId: number
+  authHeader: string,
+  classroomId: number,
+  pupilId: number,
 ) {
   return fetchJson(
-      `${CLASSROOMS_BASE}/${classroomId}/pupils/${pupilId}/approve`,
-      {
-        method: "POST",
-        headers: {
-          Authorization: authHeader,
-        },
-      }
-  );
+    `${CLASSROOMS_BASE}/${classroomId}/pupils/${pupilId}/approve`,
+    {
+      method: 'POST',
+      headers: {
+        Authorization: authHeader,
+      },
+    },
+  )
 }
 
 export async function requestDeleteClassroom(
-    autheader: string,
-    classroomId: number,
+  autheader: string,
+  classroomId: number,
 ) {
-  return fetchJson(
-      `${CLASSROOMS_BASE}/${classroomId}`,
-      {
-        method: "DELETE",
-        headers: {
-          Authorization: autheader,
-        },
-      }
-  )
+  return fetchJson(`${CLASSROOMS_BASE}/${classroomId}`, {
+    method: 'DELETE',
+    headers: {
+      Authorization: autheader,
+    },
+  })
 }
 
 export async function getClassrooms(
diff --git a/src/classrooms/components/ClassroomTable.vue b/src/classrooms/components/ClassroomTable.vue
index a966520e..48c48825 100644
--- a/src/classrooms/components/ClassroomTable.vue
+++ b/src/classrooms/components/ClassroomTable.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { onMounted } from "vue";
-import { useI18n } from "vue-i18n";
-import { RouterLink } from "vue-router";
-import { useClassroomsStore } from "@/classrooms/model/classrooms.store.ts";
+import { onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { RouterLink } from 'vue-router'
+import { useClassroomsStore } from '@/classrooms/model/classrooms.store.ts'
 
 const { t } = useI18n()
 const store = useClassroomsStore()
@@ -26,26 +26,26 @@ onMounted(() => {
 
     <table v-else class="min-w-full">
       <thead class="sticky top-0 z-10 bg-gray-100">
-      <tr>
-        <th class="px-4 py-2 text-left">
-          {{ t("classroomTable.classroom") }}
-        </th>
+        <tr>
+          <th class="px-4 py-2 text-left">
+            {{ t('classroomTable.classroom') }}
+          </th>
 
-        <th class="px-4 py-2 text-left">
-          {{ t("classroomTable.description") }}
-        </th>
+          <th class="px-4 py-2 text-left">
+            {{ t('classroomTable.description') }}
+          </th>
 
-        <th class="px-4 py-2 text-left">
-          {{ t("classroomTable.joinCode") }}
-        </th>
+          <th class="px-4 py-2 text-left">
+            {{ t('classroomTable.joinCode') }}
+          </th>
 
-        <th class="px-4 py-2 text-left">
-          {{ t("classroomTable.pupils") }}
-        </th>
+          <th class="px-4 py-2 text-left">
+            {{ t('classroomTable.pupils') }}
+          </th>
 
-        <th class="px-4 py-2 text-left">
-          {{ t("classroomTable.pending") }}
-        </th>
+          <th class="px-4 py-2 text-left">
+            {{ t('classroomTable.pending') }}
+          </th>
 
           <th class="px-4 py-2 text-left">
             {{ t('classroomTable.teachers') }}
@@ -62,18 +62,18 @@ onMounted(() => {
           v-for="classroom in store.classrooms"
           :key="classroom.classroomId"
           class="border-b hover:bg-gray-100"
-      >
-        <td class="px-4 py-3">
-          <RouterLink
+        >
+          <td class="px-4 py-3">
+            <RouterLink
               class="font-medium hover:underline"
               :to="{
                 name: 'teacher-classroom-details',
-                params: { classroomId: classroom.classroomId }
+                params: { classroomId: classroom.classroomId },
               }"
-          >
-            {{ classroom.title }}
-          </RouterLink>
-        </td>
+            >
+              {{ classroom.title }}
+            </RouterLink>
+          </td>
 
           <td class="px-4 py-3">
             {{ classroom.description || '-' }}
@@ -83,24 +83,24 @@ onMounted(() => {
             {{ classroom.joinCode }}
           </td>
 
-        <td class="px-4 py-3">
-          {{ classroom.pupilCount }}
-        </td>
+          <td class="px-4 py-3">
+            {{ classroom.pupilCount }}
+          </td>
 
-        <td class="px-4 py-3">
-          {{ classroom.pendingPupilCount }}
-        </td>
+          <td class="px-4 py-3">
+            {{ classroom.pendingPupilCount }}
+          </td>
 
-        <td class="px-4 py-3">
-          {{ classroom.teacherCount }}
-        </td>
+          <td class="px-4 py-3">
+            {{ classroom.teacherCount }}
+          </td>
 
           <td class="px-4 py-3 text-right">
             <RouterLink
               class="rounded bg-gray-800 px-3 py-1 text-white hover:bg-gray-700"
               :to="{
                 name: 'teacher-classroom-details',
-                params: { classroomId: classroom.classroomId }
+                params: { classroomId: classroom.classroomId },
               }"
             >
               {{ t('classroomTable.open') }}
diff --git a/src/classrooms/components/ConfirmModal.vue b/src/classrooms/components/ConfirmModal.vue
index 4ac1304b..06ce6615 100644
--- a/src/classrooms/components/ConfirmModal.vue
+++ b/src/classrooms/components/ConfirmModal.vue
@@ -1,60 +1,60 @@
 <script setup lang="ts">
-import { useI18n } from "vue-i18n";
+import { useI18n } from 'vue-i18n'
 
-const { t } = useI18n();
+const { t } = useI18n()
 
 defineProps<{
-  modelValue: boolean;
-  title?: string;
-  message?: string;
-  confirmText?: string;
-  cancelText?: string;
-}>();
+  modelValue: boolean
+  title?: string
+  message?: string
+  confirmText?: string
+  cancelText?: string
+}>()
 
 const emit = defineEmits<{
-  (e: "update:modelValue", value: boolean): void;
-  (e: "confirm"): void;
-}>();
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'confirm'): void
+}>()
 
 function close() {
-  emit("update:modelValue", false);
+  emit('update:modelValue', false)
 }
 
 function confirm() {
-  emit("confirm");
-  close();
+  emit('confirm')
+  close()
 }
 </script>
 
 <template>
   <div
-      v-if="modelValue"
-      class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+    v-if="modelValue"
+    class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
   >
     <div class="w-full max-w-md rounded-xl bg-white p-6 shadow-xl">
       <h2 class="text-xl font-bold text-gray-800">
-        {{ title || t("confirmModal.title") }}
+        {{ title || t('confirmModal.title') }}
       </h2>
 
       <p class="mt-2 text-gray-600">
-        {{ message || t("confirmModal.message") }}
+        {{ message || t('confirmModal.message') }}
       </p>
 
       <div class="mt-6 flex justify-end gap-3">
         <button
-            class="rounded bg-gray-300 px-4 py-2 hover:bg-gray-400"
-            @click="close"
+          class="rounded bg-gray-300 px-4 py-2 hover:bg-gray-400"
+          @click="close"
         >
-          {{ cancelText || t("confirmModal.cancel") }}
+          {{ cancelText || t('confirmModal.cancel') }}
         </button>
 
         <button
-            class="rounded bg-red-600 px-4 py-2 text-white hover:bg-red-500"
-            @click="confirm"
+          class="rounded bg-red-600 px-4 py-2 text-white hover:bg-red-500"
+          @click="confirm"
         >
-          {{ confirmText || t("confirmModal.confirm") }}
+          {{ confirmText || t('confirmModal.confirm') }}
         </button>
       </div>
     </div>
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/classrooms/components/PupilTable.vue b/src/classrooms/components/PupilTable.vue
index 5dd0726b..c4516af4 100644
--- a/src/classrooms/components/PupilTable.vue
+++ b/src/classrooms/components/PupilTable.vue
@@ -1,30 +1,30 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from "vue";
-import { RouterLink, useRoute } from "vue-router";
-import { useClassroomsStore } from "@/classrooms/model/classrooms.store.ts";
-import { useI18n } from "vue-i18n";
-import ConfirmModal from "./ConfirmModal.vue";
+import { computed, onMounted, ref } from 'vue'
+import { RouterLink, useRoute } from 'vue-router'
+import { useClassroomsStore } from '@/classrooms/model/classrooms.store.ts'
+import { useI18n } from 'vue-i18n'
+import ConfirmModal from './ConfirmModal.vue'
 
 const { t } = useI18n()
 const route = useRoute()
 const store = useClassroomsStore()
 const classroomId = Number(route.params.classroomId)
 
-const showRemoveModal = ref(false);
-const selectedPupilId = ref<number | null>(null);
+const showRemoveModal = ref(false)
+const selectedPupilId = ref<number | null>(null)
 
 function askRemove(pupilId: number) {
-  selectedPupilId.value = pupilId;
-  showRemoveModal.value = true;
+  selectedPupilId.value = pupilId
+  showRemoveModal.value = true
 }
 
 async function confirmRemove() {
-  if (!selectedPupilId.value) return;
+  if (!selectedPupilId.value) return
 
-  await store.removePupil(classroomId, selectedPupilId.value);
-  await store.fetchClassroomById(classroomId);
+  await store.removePupil(classroomId, selectedPupilId.value)
+  await store.fetchClassroomById(classroomId)
 
-  selectedPupilId.value = null;
+  selectedPupilId.value = null
 }
 
 onMounted(() => {
@@ -36,38 +36,38 @@ const pupils = computed(() => {
 })
 
 const approvedPupils = computed(() =>
-    pupils.value.filter(p => p.pupilStatus === "ACTIVE")
-);
+  pupils.value.filter((p) => p.pupilStatus === 'ACTIVE'),
+)
 
 const pendingPupils = computed(() =>
-    pupils.value.filter(p => p.pupilStatus === "PENDING")
-);
+  pupils.value.filter((p) => p.pupilStatus === 'PENDING'),
+)
 
 const sortedApproved = computed(() =>
-    approvedPupils.value.slice().sort((a, b) =>
-        a.displayName.localeCompare(b.displayName)
-    )
-);
+  approvedPupils.value
+    .slice()
+    .sort((a, b) => a.displayName.localeCompare(b.displayName)),
+)
 
 const sortedPending = computed(() =>
-    pendingPupils.value.slice().sort((a, b) =>
-        a.displayName.localeCompare(b.displayName)
-    )
+  pendingPupils.value
+    .slice()
+    .sort((a, b) => a.displayName.localeCompare(b.displayName)),
 )
 
 // NOTE:
 // score / xp / level / avatar are not currently available in ClassroomDetailResponse.
 
-
 async function approvePupil(pupilId: number) {
-  await store.approvePupil(classroomId, pupilId);
-  await store.fetchClassroomById(classroomId);
+  await store.approvePupil(classroomId, pupilId)
+  await store.fetchClassroomById(classroomId)
 }
 </script>
 
 <template>
-  <div class="mx-auto w-full max-h-170 max-w-7xl overflow-y-auto bg-white drop-shadow-lg scrollbar-thin">
-
+  <div
+    class="mx-auto w-full max-h-170 max-w-7xl overflow-y-auto bg-white drop-shadow-lg scrollbar-thin"
+  >
     <div v-if="store.isLoadingDetail" class="p-4 text-gray-500">
       Loading pupils...
     </div>
@@ -77,74 +77,79 @@ async function approvePupil(pupilId: number) {
     </div>
 
     <div v-else>
-
       <div v-if="sortedPending.length">
-        <h2 class="px-4 py-3 text-lg font-bold text-yellow-700 bg-yellow-50 border-b">
+        <h2
+          class="px-4 py-3 text-lg font-bold text-yellow-700 bg-yellow-50 border-b"
+        >
           Pending approval
         </h2>
 
         <table class="min-w-full bg-yellow-50">
           <tbody>
-          <tr
+            <tr
               v-for="pupil in sortedPending"
               :key="pupil.userId"
               class="border-b hover:bg-yellow-100"
-          >
-            <td class="px-4 py-3">
-              {{ pupil.displayName }}
-              <span class="ml-2 rounded bg-yellow-200 px-2 py-1 text-xs text-yellow-800">
+            >
+              <td class="px-4 py-3">
+                {{ pupil.displayName }}
+                <span
+                  class="ml-2 rounded bg-yellow-200 px-2 py-1 text-xs text-yellow-800"
+                >
                   Pending
                 </span>
-            </td>
+              </td>
 
-            <td class="px-4 py-3 text-right space-x-2">
-              <button
+              <td class="px-4 py-3 text-right space-x-2">
+                <button
                   class="rounded bg-green-600 px-3 py-1 text-white hover:bg-green-500 disabled:opacity-50"
                   :disabled="store.isLoading"
                   @click="approvePupil(pupil.userId)"
-              >
-                {{ t("pupilTable.approve") }}
-              </button>
+                >
+                  {{ t('pupilTable.approve') }}
+                </button>
 
-              <button
+                <button
                   class="rounded bg-red-600 px-3 py-1 text-white hover:bg-red-700 disabled:opacity-50"
                   :disabled="store.isLoading"
                   @click="askRemove(pupil.userId)"
-              >
-                {{ t("pupilTable.remove") }}
-              </button>
-            </td>
-          </tr>
+                >
+                  {{ t('pupilTable.remove') }}
+                </button>
+              </td>
+            </tr>
           </tbody>
         </table>
       </div>
 
       <div>
-        <h2 class="px-4 py-3 text-lg font-bold text-gray-700 bg-gray-100 border-b">
-          {{ t("pupilTable.approved") }}
+        <h2
+          class="px-4 py-3 text-lg font-bold text-gray-700 bg-gray-100 border-b"
+        >
+          {{ t('pupilTable.approved') }}
         </h2>
 
         <table class="min-w-full">
           <thead class="sticky top-0 z-10 bg-gray-100">
-          <tr>
-            <th class="px-4 py-2 text-left">
-              {{ t("pupilTable.name") }}
-            </th>
-
-            <th class="px-4 py-2 text-right">
-              {{ t("pupilTable.actions") }}
-            </th>
-          </tr>
+            <tr>
+              <th class="px-4 py-2 text-left">
+                {{ t('pupilTable.name') }}
+              </th>
+
+              <th class="px-4 py-2 text-right">
+                {{ t('pupilTable.actions') }}
+              </th>
+            </tr>
           </thead>
 
           <tbody>
-          <tr
+            <tr
               v-for="pupil in sortedApproved"
               :key="pupil.userId"
               class="border-b hover:bg-gray-100"
-          >
-            <td class="px-4 py-3">
-              <RouterLink
+            >
+              <td class="px-4 py-3">
+                <RouterLink
                   class="flex items-center gap-3 font-medium hover:underline"
                   :to="{
                     name: 'classroom-pupil-progress',
@@ -153,50 +158,50 @@ async function approvePupil(pupilId: number) {
                       pupilId: pupil.userId,
                     },
                   }"
-              >
-                {{ pupil.displayName }}
-              </RouterLink>
-            </td>
-
-            <td class="px-4 py-3 text-right">
-              <div class="flex justify-end gap-2">
-                <RouterLink
-                    class="rounded bg-zinc-900 px-3 py-1 text-white hover:bg-zinc-700"
-                    :to="{
-                  name: 'classroom-pupil-notebook',
-                  params: { classroomId, pupilId: pupil.userId },
-                  }"
                 >
-                  {{ t("pupilTable.seeNotebook") }}
+                  {{ pupil.displayName }}
                 </RouterLink>
+              </td>
 
-                <button
+              <td class="px-4 py-3 text-right">
+                <div class="flex justify-end gap-2">
+                  <RouterLink
+                    class="rounded bg-zinc-900 px-3 py-1 text-white hover:bg-zinc-700"
+                    :to="{
+                      name: 'classroom-pupil-notebook',
+                      params: { classroomId, pupilId: pupil.userId },
+                    }"
+                  >
+                    {{ t('pupilTable.seeNotebook') }}
+                  </RouterLink>
+
+                  <button
                     class="rounded bg-red-600 px-3 py-1 text-white hover:bg-red-700 disabled:opacity-50"
                     :disabled="store.isLoading"
                     @click="askRemove(pupil.userId)"
-                >
-                  {{ t("pupilTable.remove") }}
-                </button>
-              </div>
-            </td>
-          </tr>
-
-          <tr v-if="!sortedApproved.length">
-            <td colspan="2" class="px-4 py-4 text-center text-gray-500">
-              {{ t("pupilTable.noPupils") }}
-            </td>
-          </tr>
+                  >
+                    {{ t('pupilTable.remove') }}
+                  </button>
+                </div>
+              </td>
+            </tr>
+
+            <tr v-if="!sortedApproved.length">
+              <td colspan="2" class="px-4 py-4 text-center text-gray-500">
+                {{ t('pupilTable.noPupils') }}
+              </td>
+            </tr>
           </tbody>
         </table>
       </div>
     </div>
     <ConfirmModal
-        v-model="showRemoveModal"
-        :title="t('pupilTable.confirm')"
-        :message="t('pupilTable.message')"
-        :confirmText="t('pupilTable.confirm')"
-        :cancelText="t('pupilTable.cancel')"
-        @confirm="confirmRemove"
+      v-model="showRemoveModal"
+      :title="t('pupilTable.confirm')"
+      :message="t('pupilTable.message')"
+      :confirmText="t('pupilTable.confirm')"
+      :cancelText="t('pupilTable.cancel')"
+      @confirm="confirmRemove"
     />
   </div>
 </template>
diff --git a/src/classrooms/components/__tests__/PupilTable.spec.ts b/src/classrooms/components/__tests__/PupilTable.spec.ts
index 3bc7e4e5..583de623 100644
--- a/src/classrooms/components/__tests__/PupilTable.spec.ts
+++ b/src/classrooms/components/__tests__/PupilTable.spec.ts
@@ -73,8 +73,8 @@ describe('PupilTable', () => {
 
     const links = wrapper.findAllComponents({ name: 'RouterLink' })
 
-    const notebookLink = links.find(link =>
-        link.props('to')?.name === 'classroom-pupil-notebook'
+    const notebookLink = links.find(
+      (link) => link.props('to')?.name === 'classroom-pupil-notebook',
     )
 
     expect(notebookLink?.props('to')).toEqual({
diff --git a/src/classrooms/components/composables/UseTeacherStops.ts b/src/classrooms/components/composables/UseTeacherStops.ts
index fb90c8c7..e48ff940 100644
--- a/src/classrooms/components/composables/UseTeacherStops.ts
+++ b/src/classrooms/components/composables/UseTeacherStops.ts
@@ -16,4 +16,4 @@ export function useTeacherStops(classroomId: Ref<number>) {
     error: computed(() => mapStore.errorMessage),
     reload: () => mapStore.fetchMapOverview(classroomId.value),
   }
-}
\ No newline at end of file
+}
diff --git a/src/classrooms/components/tasks/ClassroomTaskSidebar.vue b/src/classrooms/components/tasks/ClassroomTaskSidebar.vue
index b96de208..4a7082de 100644
--- a/src/classrooms/components/tasks/ClassroomTaskSidebar.vue
+++ b/src/classrooms/components/tasks/ClassroomTaskSidebar.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { MapStopOverview } from "@/map/model/map.types"
-import { useI18n } from "vue-i18n"
+import type { MapStopOverview } from '@/map/model/map.types'
+import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
 
@@ -16,29 +16,29 @@ const emit = defineEmits<{
 
 <template>
   <aside class="rounded-lg border border-zinc-200 bg-white p-4 shadow-sm">
-
-    <h3 class="mb-4 text-sm font-semibold uppercase tracking-wide text-zinc-500">
-      {{ t("newTask.stops") }}
+    <h3
+      class="mb-4 text-sm font-semibold uppercase tracking-wide text-zinc-500"
+    >
+      {{ t('newTask.stops') }}
     </h3>
 
     <div class="space-y-2">
       <button
-          v-for="stop in stops"
-          :key="stop.stopId"
-          type="button"
-          class="w-full rounded-md border px-3 py-2 text-left text-sm transition"
-          :class="
+        v-for="stop in stops"
+        :key="stop.stopId"
+        type="button"
+        class="w-full rounded-md border px-3 py-2 text-left text-sm transition"
+        :class="
           stop.slug === activeSlug
             ? 'border-zinc-900 bg-zinc-900 text-white'
             : 'border-zinc-300 bg-white text-zinc-700 hover:bg-zinc-50'
         "
-          @click="emit('selectStop', stop.slug!)"
+        @click="emit('selectStop', stop.slug!)"
       >
         <span class="block truncate">
           {{ stop.title }}
         </span>
       </button>
     </div>
-
   </aside>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/classrooms/components/tasks/TaskItemsEditor.vue b/src/classrooms/components/tasks/TaskItemsEditor.vue
index 3492a4dd..447fd95c 100644
--- a/src/classrooms/components/tasks/TaskItemsEditor.vue
+++ b/src/classrooms/components/tasks/TaskItemsEditor.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { TaskItemResponse, TaskType } from "@/stops/api/stops.api.ts"
-import TaskOptionEditor from "@/classrooms/components/tasks/TaskOptionEditor.vue"
-import { useI18n } from "vue-i18n"
+import type { TaskItemResponse, TaskType } from '@/stops/api/stops.api.ts'
+import TaskOptionEditor from '@/classrooms/components/tasks/TaskOptionEditor.vue'
+import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
 
@@ -17,40 +17,44 @@ const emit = defineEmits<{
 
 <template>
   <div class="space-y-6">
-
     <div
-        v-for="(item, index) in items"
-        :key="item.id"
-        class="rounded-xl border bg-white p-5 shadow-sm space-y-4"
+      v-for="(item, index) in items"
+      :key="item.id"
+      class="rounded-xl border bg-white p-5 shadow-sm space-y-4"
     >
-
       <div class="flex items-center justify-between">
         <h3 class="font-semibold text-gray-800">
-          {{ t("newTask.item") }} {{ index + 1 }}
+          {{ t('newTask.item') }} {{ index + 1 }}
         </h3>
 
         <button
-            class="text-sm text-red-600 hover:text-red-700"
-            @click="emit('remove', index)"
+          class="text-sm text-red-600 hover:text-red-700"
+          @click="emit('remove', index)"
         >
-          {{ t("newTask.remove") }}
+          {{ t('newTask.remove') }}
         </button>
       </div>
 
       <div class="space-y-2">
         <p class="text-xs font-semibold uppercase text-gray-500">
-          {{ t("newTask.prompt") }}
+          {{ t('newTask.prompt') }}
         </p>
 
-        <input v-model="item.promptText.en" :placeholder="t('newTask.ep')" class="input" />
-        <input v-model="item.promptText.nb" :placeholder="t('newTask.np')" class="input" />
+        <input
+          v-model="item.promptText.en"
+          :placeholder="t('newTask.ep')"
+          class="input"
+        />
+        <input
+          v-model="item.promptText.nb"
+          :placeholder="t('newTask.np')"
+          class="input"
+        />
       </div>
 
       <div class="pt-2">
         <TaskOptionEditor v-if="item.options" v-model="item.options" />
       </div>
-
     </div>
-
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/classrooms/components/tasks/TaskMetaEditor.vue b/src/classrooms/components/tasks/TaskMetaEditor.vue
index eb6f579b..17943750 100644
--- a/src/classrooms/components/tasks/TaskMetaEditor.vue
+++ b/src/classrooms/components/tasks/TaskMetaEditor.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { TaskResponse } from "@/stops/api/stops.api.ts"
-import { useI18n } from "vue-i18n"
+import type { TaskResponse } from '@/stops/api/stops.api.ts'
+import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
 
@@ -10,11 +10,11 @@ const form = defineModel<TaskResponse>({
     classroomId: 0,
     stopId: 0,
     createdByTeacherId: 0,
-    title: { en: "", nb: "" },
-    introText: { en: "", nb: "" },
+    title: { en: '', nb: '' },
+    introText: { en: '', nb: '' },
     difficultyLevel: 1,
-    taskType: "GENERIC",
-    passingRule: "ALL_CORRECT",
+    taskType: 'GENERIC',
+    passingRule: 'ALL_CORRECT',
     passingScore: null,
     maxScore: 1,
     published: false,
@@ -25,38 +25,54 @@ const form = defineModel<TaskResponse>({
 
 <template>
   <div class="rounded-xl border bg-white p-5 shadow-sm space-y-5">
-
     <h2 class="font-semibold text-gray-800">Task settings</h2>
 
     <div class="space-y-2">
       <p class="text-xs uppercase text-gray-500">Title</p>
-      <input v-model="form.title.en" :placeholder="t('newTask.et')" class="input" />
-      <input v-model="form.title.nb" :placeholder="t('newTask.nt')" class="input" />
+      <input
+        v-model="form.title.en"
+        :placeholder="t('newTask.et')"
+        class="input"
+      />
+      <input
+        v-model="form.title.nb"
+        :placeholder="t('newTask.nt')"
+        class="input"
+      />
     </div>
 
     <div class="space-y-2">
       <p class="text-xs uppercase text-gray-500">Introduction</p>
-      <textarea v-model="form.introText.en" :placeholder="t('newTask.ei')" class="input" />
-      <textarea v-model="form.introText.nb" :placeholder="t('newTask.ni')" class="input" />
+      <textarea
+        v-model="form.introText.en"
+        :placeholder="t('newTask.ei')"
+        class="input"
+      />
+      <textarea
+        v-model="form.introText.nb"
+        :placeholder="t('newTask.ni')"
+        class="input"
+      />
     </div>
 
     <div class="grid grid-cols-2 gap-3">
       <div class="space-y-2">
         <p class="text-xs uppercase text-gray-500">Type</p>
         <select v-model="form.taskType" class="input">
-          <option value="NEWS_COMPARISON">{{ t("newTask.news") }}</option>
+          <option value="NEWS_COMPARISON">{{ t('newTask.news') }}</option>
         </select>
       </div>
 
       <div class="space-y-2">
-        <p class="text-xs uppercase text-gray-500">{{ t("newTask.difficulty") }}</p>
+        <p class="text-xs uppercase text-gray-500">
+          {{ t('newTask.difficulty') }}
+        </p>
         <input
-            type="number"
-            v-model.number="form.difficultyLevel"
-            class="input"
+          type="number"
+          v-model.number="form.difficultyLevel"
+          class="input"
         />
       </div>
     </div>
-
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/classrooms/components/tasks/TaskOptionEditor.vue b/src/classrooms/components/tasks/TaskOptionEditor.vue
index a500f975..adf0f696 100644
--- a/src/classrooms/components/tasks/TaskOptionEditor.vue
+++ b/src/classrooms/components/tasks/TaskOptionEditor.vue
@@ -1,17 +1,16 @@
 <script setup lang="ts">
-import type { TaskOptionResponse } from "@/stops/api/stops.api.ts"
-import { useI18n } from "vue-i18n"
+import type { TaskOptionResponse } from '@/stops/api/stops.api.ts'
+import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
 
-
 const options = defineModel<TaskOptionResponse[]>({
   default: () => [],
 })
 
 function ensureExplanation(opt: TaskOptionResponse) {
   if (!opt.explanationText) {
-    opt.explanationText = { en: "", nb: "" }
+    opt.explanationText = { en: '', nb: '' }
   }
   return opt.explanationText
 }
@@ -20,69 +19,73 @@ function addOption() {
   options.value.push({
     id: Date.now(),
     optionOrder: options.value.length + 1,
-    optionText: { en: "", nb: "" },
+    optionText: { en: '', nb: '' },
     isCorrect: false,
-    explanationText: { en: "", nb: "" },
+    explanationText: { en: '', nb: '' },
   })
 }
 </script>
 
 <template>
   <div class="space-y-4">
-
     <h4 class="text-sm font-semibold text-gray-700">
-      {{ t("newTask.options") }}
+      {{ t('newTask.options') }}
     </h4>
 
     <div
-        v-for="(opt, i) in options"
-        :key="opt.id"
-        class="rounded-lg border bg-white p-4 space-y-3"
+      v-for="(opt, i) in options"
+      :key="opt.id"
+      class="rounded-lg border bg-white p-4 space-y-3"
     >
-
       <div class="flex items-center gap-2">
-        <input v-model="opt.optionText.en" class="input flex-1" :placeholder="t('newTask.eo')" />
-        <input v-model="opt.optionText.nb" class="input flex-1" :placeholder="t('newTask.no')" />
+        <input
+          v-model="opt.optionText.en"
+          class="input flex-1"
+          :placeholder="t('newTask.eo')"
+        />
+        <input
+          v-model="opt.optionText.nb"
+          class="input flex-1"
+          :placeholder="t('newTask.no')"
+        />
 
         <label class="flex items-center gap-1 text-sm">
           <input type="checkbox" v-model="opt.isCorrect" />
-          {{ t("newTask.correct") }}
+          {{ t('newTask.correct') }}
         </label>
 
         <button
-            class="text-sm text-red-600 hover:text-red-700"
-            @click="options.splice(i, 1)"
+          class="text-sm text-red-600 hover:text-red-700"
+          @click="options.splice(i, 1)"
         >
-          {{ t("newTask.remove") }}
+          {{ t('newTask.remove') }}
         </button>
       </div>
 
       <div class="space-y-2 pt-2 border-t">
         <p class="text-xs uppercase text-gray-500">
-          {{ t("newTask.answer") }}
+          {{ t('newTask.answer') }}
         </p>
 
         <input
-            v-model="ensureExplanation(opt).en"
-            class="input"
-            :placeholder="t('newTask.ea')"
+          v-model="ensureExplanation(opt).en"
+          class="input"
+          :placeholder="t('newTask.ea')"
         />
 
         <input
-            v-model="ensureExplanation(opt).nb"
-            class="input"
-            :placeholder="t('newTask.na')"
+          v-model="ensureExplanation(opt).nb"
+          class="input"
+          :placeholder="t('newTask.na')"
         />
       </div>
-
     </div>
 
     <button
-        class="text-sm text-blue-600 hover:text-blue-700"
-        @click="addOption"
+      class="text-sm text-blue-600 hover:text-blue-700"
+      @click="addOption"
     >
-      {{ t("newTask.addoption") }}
+      {{ t('newTask.addoption') }}
     </button>
-
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/classrooms/model/classrooms.store.ts b/src/classrooms/model/classrooms.store.ts
index 0a46ac5e..bd863ece 100644
--- a/src/classrooms/model/classrooms.store.ts
+++ b/src/classrooms/model/classrooms.store.ts
@@ -11,8 +11,9 @@ import {
   type updateClassroomRequest,
   type ClassroomDetailResponse,
   requestUpdateClassroom,
-  requestApprovePupil, requestDeleteClassroom,
-} from "@/classrooms/api/classrooms.api.ts";
+  requestApprovePupil,
+  requestDeleteClassroom,
+} from '@/classrooms/api/classrooms.api.ts'
 
 export const useClassroomsStore = defineStore('classrooms', () => {
   const authStore = useAuthStore()
@@ -202,50 +203,47 @@ export const useClassroomsStore = defineStore('classrooms', () => {
 
   async function approvePupil(classroomId: number, pupilId: number) {
     if (!authStore.authorizationHeader) {
-      throw new Error("Not authenticated");
+      throw new Error('Not authenticated')
     }
 
     await requestApprovePupil(
-        authStore.authorizationHeader,
-        classroomId,
-        pupilId
-    );
+      authStore.authorizationHeader,
+      classroomId,
+      pupilId,
+    )
 
     if (selectedClassroom.value) {
       const pupil = selectedClassroom.value.pupils.find(
-          p => p.userId === pupilId
-      );
+        (p) => p.userId === pupilId,
+      )
       if (pupil) {
-        pupil.pupilStatus = "ACTIVE";
+        pupil.pupilStatus = 'ACTIVE'
       }
     }
   }
 
   async function deleteClassroom(classroomId: number) {
     if (!authStore.authorizationHeader) {
-      throw new Error("Not authenticated");
+      throw new Error('Not authenticated')
     }
 
-    isLoading.value = true;
-    errorMessage.value = null;
+    isLoading.value = true
+    errorMessage.value = null
 
     try {
-      await requestDeleteClassroom(
-          authStore.authorizationHeader,
-          classroomId,
-      );
+      await requestDeleteClassroom(authStore.authorizationHeader, classroomId)
 
       classrooms.value = classrooms.value.filter(
-          (c) => c.classroomId !== classroomId
-      );
+        (c) => c.classroomId !== classroomId,
+      )
       if (selectedClassroom.value?.classroomId === classroomId) {
-        selectedClassroom.value = null;
+        selectedClassroom.value = null
       }
     } catch (error) {
-      errorMessage.value = (error as Error).message;
-      throw error;
+      errorMessage.value = (error as Error).message
+      throw error
     } finally {
-      isLoading.value = false;
+      isLoading.value = false
     }
   }
 
@@ -263,5 +261,5 @@ export const useClassroomsStore = defineStore('classrooms', () => {
     removePupil,
     approvePupil,
     deleteClassroom,
-  };
-});
+  }
+})
diff --git a/src/classrooms/pages/ClassroomDetails.vue b/src/classrooms/pages/ClassroomDetails.vue
index a10bcb3d..6f83422f 100644
--- a/src/classrooms/pages/ClassroomDetails.vue
+++ b/src/classrooms/pages/ClassroomDetails.vue
@@ -1,31 +1,31 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from "vue";
-import { useI18n } from "vue-i18n";
-import ClassroomCard from "@/classrooms/components/ClassroomCard.vue";
-import { useRoute, useRouter } from "vue-router";
-import { useClassroomsStore } from "@/classrooms/model/classrooms.store.ts";
-import ConfirmModal from "@/classrooms/components/ConfirmModal.vue";
+import { computed, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import ClassroomCard from '@/classrooms/components/ClassroomCard.vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useClassroomsStore } from '@/classrooms/model/classrooms.store.ts'
+import ConfirmModal from '@/classrooms/components/ConfirmModal.vue'
 
-const { t } = useI18n();
-const route = useRoute();
-const router = useRouter();
-const classroomsStore = useClassroomsStore();
+const { t } = useI18n()
+const route = useRoute()
+const router = useRouter()
+const classroomsStore = useClassroomsStore()
 
-const classroomId = computed(() => Number(route.params.classroomId));
-const classroom = computed(() => classroomsStore.selectedClassroom);
+const classroomId = computed(() => Number(route.params.classroomId))
+const classroom = computed(() => classroomsStore.selectedClassroom)
 
-const showDeleteModal = ref(false);
+const showDeleteModal = ref(false)
 
 function askDelete() {
-  showDeleteModal.value = true;
+  showDeleteModal.value = true
 }
 
 async function confirmDelete() {
-  if (!classroom.value) return;
+  if (!classroom.value) return
 
-  await classroomsStore.deleteClassroom(classroom.value.classroomId);
+  await classroomsStore.deleteClassroom(classroom.value.classroomId)
 
-  router.push({ name: "teacher-classrooms" });
+  router.push({ name: 'teacher-classrooms' })
 }
 
 onMounted(() => {
@@ -34,78 +34,76 @@ onMounted(() => {
   }
 })
 
-const newTeacherInput = ref("");
+const newTeacherInput = ref('')
 
-const isEditing = ref(false);
+const isEditing = ref(false)
 
 const editForm = ref({
-  title: "",
-  description: "",
-});
+  title: '',
+  description: '',
+})
 
 watch(classroom, (c) => {
   if (c) {
     editForm.value = {
       title: c.title,
-      description: c.description ?? "",
-    };
+      description: c.description ?? '',
+    }
 
-    newTeacherInput.value = "";
+    newTeacherInput.value = ''
   }
-});
+})
 
 function startEdit() {
-  isEditing.value = true;
+  isEditing.value = true
 }
 
 function cancelEdit() {
-  isEditing.value = false;
+  isEditing.value = false
 
   if (classroom.value) {
     editForm.value = {
       title: classroom.value.title,
-      description: classroom.value.description ?? "",
-    };
+      description: classroom.value.description ?? '',
+    }
 
-    newTeacherInput.value = "";
+    newTeacherInput.value = ''
   }
 }
 
 async function saveEdit() {
   if (!classroom.value) {
-    return;
+    return
   }
 
   if (!editForm.value.title.trim()) {
-    alert(t("classroomDetails.titlealert"));
-    return;
+    alert(t('classroomDetails.titlealert'))
+    return
   }
 
-  const existingEmails = classroom.value?.teachers?.map(t => t.email) ?? [];
+  const existingEmails = classroom.value?.teachers?.map((t) => t.email) ?? []
 
   const newEmails = newTeacherInput.value
-  .split(",")
-  .map(e => e.trim())
-  .filter(Boolean);
+    .split(',')
+    .map((e) => e.trim())
+    .filter(Boolean)
 
-  const mergedEmails = Array.from(new Set([...existingEmails, ...newEmails]));
+  const mergedEmails = Array.from(new Set([...existingEmails, ...newEmails]))
 
   try {
     await classroomsStore.updateClassroom(classroom.value.classroomId, {
       title: editForm.value.title,
       description: editForm.value.description,
       teacherEmails: mergedEmails,
-    });
+    })
 
-    await classroomsStore.fetchClassroomById(
-        classroom.value.classroomId
-    );
+    await classroomsStore.fetchClassroomById(classroom.value.classroomId)
 
-    newTeacherInput.value = "";
-    isEditing.value = false;
+    newTeacherInput.value = ''
+    isEditing.value = false
   } catch (e) {
-    console.error(e);
-    alert(t("classroomDetails.failalert"));
+    console.error(e)
+    alert(t('classroomDetails.failalert'))
   }
 }
 </script>
@@ -120,8 +118,8 @@ async function saveEdit() {
       <h1 class="text-5xl font-extrabold text-gray-800 drop-shadow-md">
         <template v-if="isEditing">
           <input
-              v-model="editForm.title"
-              class="w-full rounded border px-3 py-2 text-center text-2xl"
+            v-model="editForm.title"
+            class="w-full rounded border px-3 py-2 text-center text-2xl"
           />
         </template>
         <template v-else>
@@ -139,91 +137,89 @@ async function saveEdit() {
       <div v-if="classroom" class="mt-4">
         <template v-if="isEditing">
           <textarea
-              v-model="editForm.description"
-              class="w-full rounded border p-2"
-              rows="3"
+            v-model="editForm.description"
+            class="w-full rounded border p-2"
+            rows="3"
           />
         </template>
         <template v-else>
           <p class="text-lg text-gray-600">
-            {{ classroom.description || "-" }}
+            {{ classroom.description || '-' }}
           </p>
         </template>
       </div>
 
       <div v-if="classroom" class="mt-4 text-lg text-gray-600">
-        <strong>{{ t("classroomTable.teachers") }}:</strong>
+        <strong>{{ t('classroomTable.teachers') }}:</strong>
 
         <div v-if="!isEditing">
           <p class="mt-1">
-            {{ classroom.teachers?.map(t => t.email).join(", ") || "-" }}
+            {{ classroom.teachers?.map((t) => t.email).join(', ') || '-' }}
           </p>
         </div>
 
         <div v-else class="mt-3 space-y-3">
           <div>
             <p class="text-sm font-semibold text-gray-600">
-              {{ t("classroomDetails.existingteachers") }}
+              {{ t('classroomDetails.existingteachers') }}
             </p>
 
             <ul class="mt-2 space-y-1">
               <li
-                  v-for="t in classroom.teachers"
-                  :key="t.userId"
-                  class="flex items-center justify-between rounded bg-gray-100 px-2 py-1"
+                v-for="t in classroom.teachers"
+                :key="t.userId"
+                class="flex items-center justify-between rounded bg-gray-100 px-2 py-1"
               >
                 <span>{{ t.email }}</span>
-
               </li>
             </ul>
           </div>
 
           <div>
             <p class="text-sm font-semibold text-gray-600">
-              {{ t("classroomDetails.addteachers") }}
+              {{ t('classroomDetails.addteachers') }}
             </p>
 
             <input
-                v-model="newTeacherInput"
-                class="mt-2 w-full rounded border p-2"
-                placeholder="teacher1@mail.com, teacher2@mail.com"
+              v-model="newTeacherInput"
+              class="mt-2 w-full rounded border p-2"
+              placeholder="teacher1@mail.com, teacher2@mail.com"
             />
           </div>
-
         </div>
       </div>
 
       <div class="mt-6 flex justify-center gap-3">
         <button
-            v-if="!isEditing"
-            class="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-500"
-            @click="startEdit"
+          v-if="!isEditing"
+          class="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-500"
+          @click="startEdit"
         >
-          {{ t("classroomDetails.edit") }}
+          {{ t('classroomDetails.edit') }}
         </button>
 
         <button
           v-if="!isEditing"
           class="rounded bg-red-600 px-4 py-2 text-white hover:bg-red-500"
-        @click="askDelete"
+          @click="askDelete"
         >
-          {{ t("classroomDetails.deleteclass") }}
+          {{ t('classroomDetails.deleteclass') }}
         </button>
 
         <template v-else>
           <button
-              class="rounded bg-green-600 px-4 py-2 text-white hover:bg-green-500 disabled:opacity-50"
-              :disabled="classroomsStore.isLoading"
-              @click="saveEdit"
+            class="rounded bg-green-600 px-4 py-2 text-white hover:bg-green-500 disabled:opacity-50"
+            :disabled="classroomsStore.isLoading"
+            @click="saveEdit"
           >
-            {{ t("classroomDetails.save") }}
+            {{ t('classroomDetails.save') }}
           </button>
 
           <button
-              class="rounded bg-gray-400 px-4 py-2 text-white hover:bg-gray-300"
-              @click="cancelEdit"
+            class="rounded bg-gray-400 px-4 py-2 text-white hover:bg-gray-300"
+            @click="cancelEdit"
           >
-            {{ t("classroomDetails.edit") }}
+            {{ t('classroomDetails.edit') }}
           </button>
         </template>
       </div>
@@ -231,33 +227,36 @@ async function saveEdit() {
 
     <div class="mx-auto grid max-w-7xl grid-cols-2 gap-6">
       <ClassroomCard
-          :title="t('classroomDetails.pupilOverview.title')"
-          :description="t('classroomDetails.pupilOverview.description')"
-          :to="{ name: 'classroom-pupils', params: { classroomId } }"
+        :title="t('classroomDetails.pupilOverview.title')"
+        :description="t('classroomDetails.pupilOverview.description')"
+        :to="{ name: 'classroom-pupils', params: { classroomId } }"
       />
 
       <ClassroomCard
-          :title="t('classroomDetails.taskOverview.title')"
-          :description="t('classroomDetails.taskOverview.description')"
-          :to="{ name: 'classroom-tasks', params: { classroomId, slug: 'nyhetskvartalet' } }"
+        :title="t('classroomDetails.taskOverview.title')"
+        :description="t('classroomDetails.taskOverview.description')"
+        :to="{
+          name: 'classroom-tasks',
+          params: { classroomId, slug: 'nyhetskvartalet' },
+        }"
       />
 
       <ClassroomCard
-          :title="t('classroomDetails.mysteryOverview.title')"
-          :description="t('classroomDetails.mysteryOverview.description')"
-          :to="{ name: 'classroom-mystery', params: { classroomId } }"
+        :title="t('classroomDetails.mysteryOverview.title')"
+        :description="t('classroomDetails.mysteryOverview.description')"
+        :to="{ name: 'classroom-mystery', params: { classroomId } }"
       />
 
       <ClassroomCard
-          :title="t('classroomDetails.gameOverview.title')"
-          :description="t('classroomDetails.gameOverview.description')"
-          :to="{ name: 'teacher-playtest-map', params: { classroomId } }"
+        :title="t('classroomDetails.gameOverview.title')"
+        :description="t('classroomDetails.gameOverview.description')"
+        :to="{ name: 'teacher-playtest-map', params: { classroomId } }"
       />
 
       <ClassroomCard
-          :title="t('classroomDetails.notificationOverview.title')"
-          :description="t('classroomDetails.notificationOverview.description')"
-          :to="{ name: 'classroom-notifications', params: { classroomId } }"
+        :title="t('classroomDetails.notificationOverview.title')"
+        :description="t('classroomDetails.notificationOverview.description')"
+        :to="{ name: 'classroom-notifications', params: { classroomId } }"
       />
 
       <ClassroomCard
@@ -270,12 +269,12 @@ async function saveEdit() {
       />
     </div>
     <ConfirmModal
-        v-model="showDeleteModal"
-        :title="t('classroomDetails.cancel')"
-        :message="t('classroomDetails.confirmmessage')"
-        :cancelText="t('classroomDetails.cancel')"
-        :confirmText="t('classroomDetails.confirm')"
-        @confirm="confirmDelete"
+      v-model="showDeleteModal"
+      :title="t('classroomDetails.cancel')"
+      :message="t('classroomDetails.confirmmessage')"
+      :cancelText="t('classroomDetails.cancel')"
+      :confirmText="t('classroomDetails.confirm')"
+      @confirm="confirmDelete"
     />
   </main>
 </template>
diff --git a/src/classrooms/pages/ClassroomMystery.vue b/src/classrooms/pages/ClassroomMystery.vue
index 3b68a945..6fa9e52d 100644
--- a/src/classrooms/pages/ClassroomMystery.vue
+++ b/src/classrooms/pages/ClassroomMystery.vue
@@ -1,3 +1 @@
-<template>
-  Mystery
-</template>
\ No newline at end of file
+<template>Mystery</template>
diff --git a/src/classrooms/pages/ClassroomNotifications.vue b/src/classrooms/pages/ClassroomNotifications.vue
index e7b4fac9..aa4fd326 100644
--- a/src/classrooms/pages/ClassroomNotifications.vue
+++ b/src/classrooms/pages/ClassroomNotifications.vue
@@ -1,3 +1 @@
-<template>
-  Notifications
-</template>
\ No newline at end of file
+<template>Notifications</template>
diff --git a/src/classrooms/pages/ClassroomTasks.vue b/src/classrooms/pages/ClassroomTasks.vue
index 2f63d617..ac547fe0 100644
--- a/src/classrooms/pages/ClassroomTasks.vue
+++ b/src/classrooms/pages/ClassroomTasks.vue
@@ -1,18 +1,22 @@
 <script setup lang="ts">
-import { computed, watch, ref } from "vue"
-import { useRoute, useRouter } from "vue-router"
-import { useAuthStore } from "@/auth/model/auth.store"
-import { useI18n } from "vue-i18n";
+import { computed, watch, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useAuthStore } from '@/auth/model/auth.store'
+import { useI18n } from 'vue-i18n'
 
-import TaskCard from "@/stops/components/TaskCard.vue"
-import ClassroomTaskSidebar from "@/classrooms/components/tasks/ClassroomTaskSidebar.vue"
-import ConfirmModal from "@/classrooms/components/ConfirmModal.vue";
+import TaskCard from '@/stops/components/TaskCard.vue'
+import ClassroomTaskSidebar from '@/classrooms/components/tasks/ClassroomTaskSidebar.vue'
+import ConfirmModal from '@/classrooms/components/ConfirmModal.vue'
 
-import { useTeacherStops } from "@/classrooms/components/composables/UseTeacherStops"
+import { useTeacherStops } from '@/classrooms/components/composables/UseTeacherStops'
 
-import { requestTasksForStop, requestTask, type TaskResponse } from "@/stops/api/stops.api"
+import {
+  requestTasksForStop,
+  requestTask,
+  type TaskResponse,
+} from '@/stops/api/stops.api'
 
-import { useTasksStore } from "@/stops/model/task.store"
+import { useTasksStore } from '@/stops/model/task.store'
 
 const tasksStore = useTasksStore()
 const route = useRoute()
@@ -28,9 +32,9 @@ const tasks = ref<TaskResponse[]>([])
 const isLoading = ref(false)
 const error = ref<string | null>(null)
 
-const filter = ref<"ALL" | string>("ALL")
+const filter = ref<'ALL' | string>('ALL')
 
-const { t } = useI18n();
+const { t } = useI18n()
 
 async function loadTasksForSlug(currentSlug: string) {
   if (!authStore.authorizationHeader) return
@@ -44,22 +48,18 @@ async function loadTasksForSlug(currentSlug: string) {
 
   try {
     const summaries = await requestTasksForStop(
-        classroomId.value,
-        stop.stopId,
-        authStore.authorizationHeader,
+      classroomId.value,
+      stop.stopId,
+      authStore.authorizationHeader,
     )
 
     tasks.value = await Promise.all(
-        summaries.map((s) =>
-            requestTask(
-                classroomId.value,
-                s.id,
-                authStore.authorizationHeader!,
-            ),
-        ),
+      summaries.map((s) =>
+        requestTask(classroomId.value, s.id, authStore.authorizationHeader!),
+      ),
     )
   } catch (e) {
-    error.value = e instanceof Error ? e.message : t("taskOverview.fail")
+    error.value = e instanceof Error ? e.message : t('taskOverview.fail')
   } finally {
     isLoading.value = false
   }
@@ -67,17 +67,17 @@ async function loadTasksForSlug(currentSlug: string) {
 
 const taskTypes = computed(() => {
   const set = new Set(tasks.value.map((t) => t.taskType))
-  return ["ALL", ...Array.from(set)]
+  return ['ALL', ...Array.from(set)]
 })
 
 const filteredTasks = computed(() => {
-  if (filter.value === "ALL") return tasks.value
+  if (filter.value === 'ALL') return tasks.value
   return tasks.value.filter((t) => t.taskType === filter.value)
 })
 
 function selectStop(newSlug: string) {
   router.push({
-    name: "classroom-tasks",
+    name: 'classroom-tasks',
     params: {
       classroomId: classroomId.value,
       slug: newSlug,
@@ -87,14 +87,14 @@ function selectStop(newSlug: string) {
 
 function goToCreate() {
   router.push({
-    name: "new-classroom-task",
+    name: 'new-classroom-task',
     params: { classroomId: classroomId.value },
   })
 }
 
 function goToEdit(taskId: number) {
   router.push({
-    name: "edit-classroom-task",
+    name: 'edit-classroom-task',
     params: { classroomId: classroomId.value, taskId },
   })
 }
@@ -113,14 +113,9 @@ function askDelete(taskId: number) {
 async function confirmDelete() {
   if (!taskToDelete.value) return
 
-  await tasksStore.deleteTask(
-      classroomId.value,
-      taskToDelete.value,
-  )
+  await tasksStore.deleteTask(classroomId.value, taskToDelete.value)
 
-  tasks.value = tasks.value.filter(
-      (t) => t.id !== taskToDelete.value,
-  )
+  tasks.value = tasks.value.filter((t) => t.id !== taskToDelete.value)
 
   showDeleteModal.value = false
   taskToDelete.value = null
@@ -138,14 +133,12 @@ async function confirmPublish() {
   if (!taskToPublish.value) return
 
   const updated = await tasksStore.togglePublish(
-      classroomId.value,
-      taskToPublish.value.id,
-      taskToPublish.value.published,
+    classroomId.value,
+    taskToPublish.value.id,
+    taskToPublish.value.published,
   )
 
-  const index = tasks.value.findIndex(
-      (t) => t.id === updated.id,
-  )
+  const index = tasks.value.findIndex((t) => t.id === updated.id)
 
   if (index !== -1) {
     tasks.value[index] = updated
@@ -156,33 +149,31 @@ async function confirmPublish() {
 }
 
 watch(
-    () => [slug.value, stops.value],
-    ([newSlug, stopsLoaded]) => {
-      if (!newSlug || stopsLoaded?.length === 0) return
-      if (typeof newSlug === 'string') {
-        loadTasksForSlug(newSlug)
-      }
-    },
-    { immediate: true },
+  () => [slug.value, stops.value],
+  ([newSlug, stopsLoaded]) => {
+    if (!newSlug || stopsLoaded?.length === 0) return
+    if (typeof newSlug === 'string') {
+      loadTasksForSlug(newSlug)
+    }
+  },
+  { immediate: true },
 )
 </script>
 
 <template>
   <section class="mx-auto max-w-7xl px-6 pt-30 pb-6">
     <div class="grid gap-6 lg:grid-cols-[1fr_16rem]">
-
       <div class="space-y-6">
-
         <div class="flex items-center justify-between">
           <h1 class="text-2xl font-bold">
-            {{ t("taskOverview.title") }}
+            {{ t('taskOverview.title') }}
           </h1>
 
           <button
-              class="rounded-xl bg-gray-100 px-4 py-2 text-sm"
-              @click="goToCreate"
+            class="rounded-xl bg-gray-100 px-4 py-2 text-sm"
+            @click="goToCreate"
           >
-            {{ t("taskOverview.create") }}
+            {{ t('taskOverview.create') }}
           </button>
         </div>
 
@@ -190,98 +181,101 @@ watch(
         <p v-if="isLoading">Loading...</p>
 
         <div
-            v-if="!isLoading && filteredTasks.length === 0"
-            class="text-gray-500"
+          v-if="!isLoading && filteredTasks.length === 0"
+          class="text-gray-500"
         >
-          {{ t("taskOverview.notask") }}
+          {{ t('taskOverview.notask') }}
         </div>
 
         <div
-            v-for="(task, index) in filteredTasks"
-            :key="task.id"
-            class="flex flex-col gap-3"
+          v-for="(task, index) in filteredTasks"
+          :key="task.id"
+          class="flex flex-col gap-3"
         >
           <div class="flex justify-between items-center">
             <span
-                v-if="!task.published"
-                class="text-xs bg-yellow-100 text-yellow-700 px-2 py-1 rounded"
+              v-if="!task.published"
+              class="text-xs bg-yellow-100 text-yellow-700 px-2 py-1 rounded"
             >
-              {{ t("taskOverview.unpublished") }}
+              {{ t('taskOverview.unpublished') }}
             </span>
 
             <span
-                v-else
-                class="text-xs bg-green-100 text-green-700 px-2 py-1 rounded"
+              v-else
+              class="text-xs bg-green-100 text-green-700 px-2 py-1 rounded"
             >
-              {{ t("taskOverview.published") }}
+              {{ t('taskOverview.published') }}
             </span>
           </div>
 
           <TaskCard
-              :task="task"
-              :selected-answers="undefined"
-              :show-answers="true"
+            :task="task"
+            :selected-answers="undefined"
+            :show-answers="true"
           />
 
           <div class="flex justify-end gap-2">
             <button
-                class="rounded-xl bg-gray-100 px-3 py-1.5 text-sm"
-                @click="goToEdit(task.id)"
+              class="rounded-xl bg-gray-100 px-3 py-1.5 text-sm"
+              @click="goToEdit(task.id)"
             >
-              {{ t("taskOverview.edit") }}
+              {{ t('taskOverview.edit') }}
             </button>
 
             <button
-                class="rounded-xl px-3 py-1.5 text-sm font-medium"
-                :class="task.published
-                ? 'bg-yellow-100 text-yellow-700'
-                : 'bg-green-100 text-green-700'"
-                @click="askTogglePublish(task)"
+              class="rounded-xl px-3 py-1.5 text-sm font-medium"
+              :class="
+                task.published
+                  ? 'bg-yellow-100 text-yellow-700'
+                  : 'bg-green-100 text-green-700'
+              "
+              @click="askTogglePublish(task)"
             >
-              {{ task.published ? t("taskOverview.unpublish") : t("taskOverview.publish") }}
+              {{
+                task.published
+                  ? t('taskOverview.unpublish')
+                  : t('taskOverview.publish')
+              }}
             </button>
 
             <button
-                class="rounded-xl bg-red-100 px-3 py-1.5 text-sm text-red-700 hover:bg-red-200"
-                @click="askDelete(task.id)"
+              class="rounded-xl bg-red-100 px-3 py-1.5 text-sm text-red-700 hover:bg-red-200"
+              @click="askDelete(task.id)"
             >
-              {{ t("taskOverview.delete") }}
+              {{ t('taskOverview.delete') }}
             </button>
           </div>
 
-          <hr
-              v-if="index < filteredTasks.length - 1"
-              class="border-gray-200"
-          />
+          <hr v-if="index < filteredTasks.length - 1" class="border-gray-200" />
         </div>
       </div>
 
       <ClassroomTaskSidebar
-          :stops="stops"
-          :active-slug="slug"
-          :filters="taskTypes"
-          :active-filter="filter"
-          @select-stop="selectStop"
-          @select-filter="filter = $event"
+        :stops="stops"
+        :active-slug="slug"
+        :filters="taskTypes"
+        :active-filter="filter"
+        @select-stop="selectStop"
+        @select-filter="filter = $event"
       />
     </div>
 
     <ConfirmModal
-        v-model="showDeleteModal"
-        :title="t('taskOverview.delete')"
-        :message="t('taskOverview.message')"
-        :confirm-text="t('taskOverview.delete')"
-        :cancel-text="t('taskOverview.cancel')"
-        @confirm="confirmDelete"
+      v-model="showDeleteModal"
+      :title="t('taskOverview.delete')"
+      :message="t('taskOverview.message')"
+      :confirm-text="t('taskOverview.delete')"
+      :cancel-text="t('taskOverview.cancel')"
+      @confirm="confirmDelete"
     />
 
     <ConfirmModal
-        v-model="showPublishModal"
-        :title="t('taskOverview.ptitle')"
-        :message="t('taskOverview.pmessage')"
-        :confirm-text="t('taskOverview.confirm')"
-        :cancel-text="t('taskOverview.cancel')"
-        @confirm="confirmPublish"
+      v-model="showPublishModal"
+      :title="t('taskOverview.ptitle')"
+      :message="t('taskOverview.pmessage')"
+      :confirm-text="t('taskOverview.confirm')"
+      :cancel-text="t('taskOverview.cancel')"
+      @confirm="confirmPublish"
     />
   </section>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/classrooms/pages/EditClassroomTask.vue b/src/classrooms/pages/EditClassroomTask.vue
index 44b6949a..3e89f725 100644
--- a/src/classrooms/pages/EditClassroomTask.vue
+++ b/src/classrooms/pages/EditClassroomTask.vue
@@ -1,25 +1,24 @@
 <script setup lang="ts">
-import { computed, ref, onMounted } from "vue"
-import { useRoute, useRouter } from "vue-router"
-import { useAuthStore } from "@/auth/model/auth.store"
-import { useI18n } from "vue-i18n";
-import { useTeacherStops } from "@/classrooms/components/composables/UseTeacherStops"
+import { computed, ref, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useAuthStore } from '@/auth/model/auth.store'
+import { useI18n } from 'vue-i18n'
+import { useTeacherStops } from '@/classrooms/components/composables/UseTeacherStops'
 import {
   requestCreateTask,
   requestTask,
   requestUpdateTask,
   type TaskResponse,
-} from "@/stops/api/stops.api"
+} from '@/stops/api/stops.api'
 
-
-import TaskMetaEditor from "@/classrooms/components/tasks/TaskMetaEditor.vue"
-import TaskItemsEditor from "@/classrooms/components/tasks/TaskItemsEditor.vue"
+import TaskMetaEditor from '@/classrooms/components/tasks/TaskMetaEditor.vue'
+import TaskItemsEditor from '@/classrooms/components/tasks/TaskItemsEditor.vue'
 
 const route = useRoute()
 const router = useRouter()
 const authStore = useAuthStore()
 
-const { t } = useI18n();
+const { t } = useI18n()
 
 const classroomId = computed(() => Number(route.params.classroomId))
 const { stops } = useTeacherStops(classroomId)
@@ -35,11 +34,11 @@ const form = ref<TaskResponse>({
   classroomId: classroomId.value,
   stopId: 1,
   createdByTeacherId: 0,
-  title: { en: "", nb: "" },
-  introText: { en: "", nb: "" },
+  title: { en: '', nb: '' },
+  introText: { en: '', nb: '' },
   difficultyLevel: 1,
-  taskType: "GENERIC",
-  passingRule: "ALL_CORRECT",
+  taskType: 'GENERIC',
+  passingRule: 'ALL_CORRECT',
   passingScore: null,
   maxScore: 1,
   published: false,
@@ -47,7 +46,7 @@ const form = ref<TaskResponse>({
 })
 
 const selectedStop = computed(() =>
-    stops.value.find(s => s.stopId === form.value.stopId)
+  stops.value.find((s) => s.stopId === form.value.stopId),
 )
 
 async function load() {
@@ -59,14 +58,14 @@ async function load() {
 
   try {
     const data = await requestTask(
-        classroomId.value,
-        taskId,
-        authStore.authorizationHeader,
+      classroomId.value,
+      taskId,
+      authStore.authorizationHeader,
     )
 
     form.value = data
   } catch (e) {
-    error.value = e instanceof Error ? e.message : t("newTask.savefail")
+    error.value = e instanceof Error ? e.message : t('newTask.savefail')
   } finally {
     loading.value = false
   }
@@ -76,7 +75,7 @@ function addItem() {
   form.value.items.push({
     id: Date.now(),
     itemOrder: form.value.items.length + 1,
-    promptText: { en: "", nb: "" },
+    promptText: { en: '', nb: '' },
     mediaUrl: null,
     metadataJson: null,
     options: [],
@@ -92,35 +91,35 @@ async function save() {
   try {
     if (isEditMode.value && taskId !== null) {
       await requestUpdateTask(
-          classroomId.value,
-          taskId,
-          form.value,
-          authStore.authorizationHeader,
+        classroomId.value,
+        taskId,
+        form.value,
+        authStore.authorizationHeader,
       )
     } else {
       await requestCreateTask(
-          classroomId.value,
-          form.value,
-          authStore.authorizationHeader,
+        classroomId.value,
+        form.value,
+        authStore.authorizationHeader,
       )
     }
 
     const slug = selectedStop.value?.slug
 
     if (!slug) {
-      error.value = "Could not determine stop slug"
+      error.value = 'Could not determine stop slug'
       return
     }
 
     await router.push({
-      name: "classroom-tasks",
+      name: 'classroom-tasks',
       params: {
         classroomId: classroomId.value,
         slug,
       },
     })
   } catch (e) {
-    error.value = e instanceof Error ? e.message : t("newTask.savefail")
+    error.value = e instanceof Error ? e.message : t('newTask.savefail')
   } finally {
     loading.value = false
   }
@@ -131,10 +130,9 @@ onMounted(load)
 
 <template>
   <div class="mx-auto max-w-5xl px-6 py-8 pt-28 space-y-8">
-
     <div class="space-y-1">
       <h1 class="text-3xl font-bold text-gray-900">
-        {{ isEditMode ? "Edit Task" : "Create Task" }}
+        {{ isEditMode ? 'Edit Task' : 'Create Task' }}
       </h1>
 
       <p v-if="error" class="text-sm text-red-600">
@@ -146,42 +144,34 @@ onMounted(load)
 
     <div class="flex items-center justify-between pt-2">
       <h2 class="text-xl font-semibold text-gray-900">
-        {{ t("newTask.item") }}
+        {{ t('newTask.item') }}
       </h2>
 
       <button
-          class="rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 transition"
-          @click="addItem"
+        class="rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 transition"
+        @click="addItem"
       >
-        {{ t("newTask.additem") }}
+        {{ t('newTask.additem') }}
       </button>
     </div>
 
-    <TaskItemsEditor
-        :items="form.items"
-        :task-type="form.taskType"
-    />
-
-    <div
-        class="sticky bottom-0 p-4 flex justify-end gap-3"
-    >
+    <TaskItemsEditor :items="form.items" :task-type="form.taskType" />
 
+    <div class="sticky bottom-0 p-4 flex justify-end gap-3">
       <button
-          class="rounded-lg bg-gray-200 px-5 py-2 hover:bg-gray-300 transition"
-          @click="router.back()"
+        class="rounded-lg bg-gray-200 px-5 py-2 hover:bg-gray-300 transition"
+        @click="router.back()"
       >
-        {{ t("newTask.cancel") }}
+        {{ t('newTask.cancel') }}
       </button>
 
       <button
-          class="rounded-lg bg-green-600 px-6 py-2 text-white hover:bg-green-700 transition disabled:opacity-50"
-          :disabled="loading"
-          @click="save"
+        class="rounded-lg bg-green-600 px-6 py-2 text-white hover:bg-green-700 transition disabled:opacity-50"
+        :disabled="loading"
+        @click="save"
       >
-        {{ isEditMode ? t("newTask.save") : t("newTask.create") }}
+        {{ isEditMode ? t('newTask.save') : t('newTask.create') }}
       </button>
-
     </div>
-
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/classrooms/pages/JoinClassroom.vue b/src/classrooms/pages/JoinClassroom.vue
index 189ba2c7..ac363f3c 100644
--- a/src/classrooms/pages/JoinClassroom.vue
+++ b/src/classrooms/pages/JoinClassroom.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import {computed, ref, watch} from "vue";
-import { useRouter } from "vue-router";
-import { useClassroomsStore } from "@/classrooms/model/classrooms.store.ts";
-import {useAuthStore} from "@/auth/model/auth.store.ts";
-import LogoutButton from "@/shared/components/LogoutButton.vue";
-import { useI18n } from "vue-i18n";
+import { computed, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { useClassroomsStore } from '@/classrooms/model/classrooms.store.ts'
+import { useAuthStore } from '@/auth/model/auth.store.ts'
+import LogoutButton from '@/shared/components/LogoutButton.vue'
+import { useI18n } from 'vue-i18n'
 
 const router = useRouter()
 const classroomsStore = useClassroomsStore()
@@ -47,8 +47,8 @@ async function join() {
   try {
     await classroomsStore.joinClassroom(code)
 
-    if (authStore.user?.pupilProfile?.membershipStatus === "PENDING") {
-      await router.push({ name: "pupil-pending-approval" })
+    if (authStore.user?.pupilProfile?.membershipStatus === 'PENDING') {
+      await router.push({ name: 'pupil-pending-approval' })
     }
   } catch (error) {
     console.error('JOIN CLASSROOM ERROR:', error)
diff --git a/src/classrooms/pages/NewClassroom.vue b/src/classrooms/pages/NewClassroom.vue
index 9dd2de80..84a326fd 100644
--- a/src/classrooms/pages/NewClassroom.vue
+++ b/src/classrooms/pages/NewClassroom.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { computed, ref, onMounted } from "vue";
-import { useRouter } from "vue-router";
-import { useAuthStore } from "@/auth/model/auth.store";
-import { useClassroomsStore } from "@/classrooms/model/classrooms.store.ts";
-import { useI18n } from "vue-i18n";
+import { computed, ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '@/auth/model/auth.store'
+import { useClassroomsStore } from '@/classrooms/model/classrooms.store.ts'
+import { useI18n } from 'vue-i18n'
 
 const router = useRouter()
 const authStore = useAuthStore()
diff --git a/src/classrooms/pages/NewClassroomTask.vue b/src/classrooms/pages/NewClassroomTask.vue
index 09262eec..9a4b2db7 100644
--- a/src/classrooms/pages/NewClassroomTask.vue
+++ b/src/classrooms/pages/NewClassroomTask.vue
@@ -1,20 +1,25 @@
 <script setup lang="ts">
-import { computed, ref, onMounted, watch } from "vue"
-import { useRoute, useRouter } from "vue-router"
-import { useAuthStore } from "@/auth/model/auth.store"
-import { useI18n } from "vue-i18n";
-
-import { requestCreateTask, requestTask, requestUpdateTask, type TaskResponse } from "@/stops/api/stops.api"
-
-import TaskMetaEditor from "@/classrooms/components/tasks/TaskMetaEditor.vue"
-import TaskItemsEditor from "@/classrooms/components/tasks/TaskItemsEditor.vue"
-import { useTeacherStops } from "@/classrooms/components/composables/UseTeacherStops"
+import { computed, ref, onMounted, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useAuthStore } from '@/auth/model/auth.store'
+import { useI18n } from 'vue-i18n'
+
+import {
+  requestCreateTask,
+  requestTask,
+  requestUpdateTask,
+  type TaskResponse,
+} from '@/stops/api/stops.api'
+
+import TaskMetaEditor from '@/classrooms/components/tasks/TaskMetaEditor.vue'
+import TaskItemsEditor from '@/classrooms/components/tasks/TaskItemsEditor.vue'
+import { useTeacherStops } from '@/classrooms/components/composables/UseTeacherStops'
 
 const route = useRoute()
 const router = useRouter()
 const authStore = useAuthStore()
 
-const { t } = useI18n();
+const { t } = useI18n()
 
 const classroomId = computed(() => Number(route.params.classroomId))
 const taskId = route.params.taskId ? Number(route.params.taskId) : null
@@ -24,8 +29,11 @@ const isEditMode = computed(() => taskId !== null)
 const loading = ref(false)
 const error = ref<string | null>(null)
 
-const { stops, status: stopsStatus, error: stopsError } =
-    useTeacherStops(classroomId)
+const {
+  stops,
+  status: stopsStatus,
+  error: stopsError,
+} = useTeacherStops(classroomId)
 
 const selectedStopId = ref<number | null>(null)
 
@@ -34,11 +42,11 @@ const form = ref<TaskResponse>({
   classroomId: classroomId.value,
   stopId: 0,
   createdByTeacherId: 0,
-  title: { en: "", nb: "" },
-  introText: { en: "", nb: "" },
+  title: { en: '', nb: '' },
+  introText: { en: '', nb: '' },
   difficultyLevel: 1,
-  taskType: "GENERIC",
-  passingRule: "ALL_CORRECT",
+  taskType: 'GENERIC',
+  passingRule: 'ALL_CORRECT',
   passingScore: null,
   maxScore: 1,
   published: false,
@@ -51,9 +59,9 @@ async function load() {
   loading.value = true
   try {
     const task = await requestTask(
-        classroomId.value,
-        taskId,
-        authStore.authorizationHeader,
+      classroomId.value,
+      taskId,
+      authStore.authorizationHeader,
     )
 
     form.value = task
@@ -73,7 +81,7 @@ function addItem() {
   form.value.items.push({
     id: Date.now(),
     itemOrder: form.value.items.length + 1,
-    promptText: { en: "", nb: "" },
+    promptText: { en: '', nb: '' },
     mediaUrl: null,
     metadataJson: null,
     options: [],
@@ -91,29 +99,32 @@ async function save() {
 
     if (isEditMode.value) {
       await requestUpdateTask(
-          classroomId.value,
-          taskId!,
-          form.value,
-          authStore.authorizationHeader,
+        classroomId.value,
+        taskId!,
+        form.value,
+        authStore.authorizationHeader,
       )
     } else {
       await requestCreateTask(
-          classroomId.value,
-          form.value,
-          authStore.authorizationHeader,
+        classroomId.value,
+        form.value,
+        authStore.authorizationHeader,
       )
     }
 
     const selectedStop = computed(() =>
-        stops.value.find(s => s.stopId === selectedStopId.value)
+      stops.value.find((s) => s.stopId === selectedStopId.value),
     )
 
     router.push({
-      name: "classroom-tasks",
-      params: { classroomId: classroomId.value, slug: selectedStop.value?.slug ?? undefined },
+      name: 'classroom-tasks',
+      params: {
+        classroomId: classroomId.value,
+        slug: selectedStop.value?.slug ?? undefined,
+      },
     })
   } catch (e) {
-    error.value = e instanceof Error ? e.message : t("newTask.savefail")
+    error.value = e instanceof Error ? e.message : t('newTask.savefail')
   } finally {
     loading.value = false
   }
@@ -124,10 +135,9 @@ onMounted(load)
 
 <template>
   <div class="mx-auto max-w-5xl px-6 py-6 pt-30 space-y-8">
-
     <div class="space-y-2">
       <h1 class="text-3xl font-bold">
-        {{ isEditMode ? t("newTask.edit") : t("newTask.create") }}
+        {{ isEditMode ? t('newTask.edit') : t('newTask.create') }}
       </h1>
 
       <p v-if="error" class="text-red-600">
@@ -139,24 +149,20 @@ onMounted(load)
       <label class="text-sm font-medium text-gray-700">Stop</label>
 
       <select
-          v-model="selectedStopId"
-          class="w-full rounded-lg border px-3 py-2"
+        v-model="selectedStopId"
+        class="w-full rounded-lg border px-3 py-2"
       >
         <option disabled :value="null">
-          {{ t("newTask.select") }}
+          {{ t('newTask.select') }}
         </option>
 
-        <option
-            v-for="stop in stops"
-            :key="stop.stopId"
-            :value="stop.stopId"
-        >
+        <option v-for="stop in stops" :key="stop.stopId" :value="stop.stopId">
           {{ stop.displayOrder }}. {{ stop.title }}
         </option>
       </select>
 
       <p v-if="stopsStatus === 'loading'" class="text-sm text-gray-400">
-        {{ t("newTask.loading") }}
+        {{ t('newTask.loading') }}
       </p>
 
       <p v-if="stopsError" class="text-sm text-red-600">
@@ -168,40 +174,34 @@ onMounted(load)
 
     <div class="flex items-center justify-between pt-2">
       <h2 class="text-xl font-semibold">
-        {{ t("newTask.item") }}
+        {{ t('newTask.item') }}
       </h2>
 
       <button
-          class="rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 transition"
-          @click="addItem"
+        class="rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 transition"
+        @click="addItem"
       >
-        {{ t("newTask.additem") }}
+        {{ t('newTask.additem') }}
       </button>
     </div>
 
-    <TaskItemsEditor
-        :items="form.items"
-        :task-type="form.taskType"
-    />
+    <TaskItemsEditor :items="form.items" :task-type="form.taskType" />
 
     <div class="sticky bottom-0 p-4 flex justify-end gap-3">
-
       <button
-          class="rounded-lg bg-gray-200 px-5 py-2 hover:bg-gray-300"
-          @click="router.back()"
+        class="rounded-lg bg-gray-200 px-5 py-2 hover:bg-gray-300"
+        @click="router.back()"
       >
-        {{ t("newTask.cancel") }}
+        {{ t('newTask.cancel') }}
       </button>
 
       <button
-          class="rounded-lg bg-green-600 px-6 py-2 text-white hover:bg-green-700"
-          :disabled="loading || selectedStopId === null"
-          @click="save"
+        class="rounded-lg bg-green-600 px-6 py-2 text-white hover:bg-green-700"
+        :disabled="loading || selectedStopId === null"
+        @click="save"
       >
-        {{ isEditMode ? t("newTask.save") : t("newTask.create") }}
+        {{ isEditMode ? t('newTask.save') : t('newTask.create') }}
       </button>
-
     </div>
-
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/classrooms/pages/PendingApproval.vue b/src/classrooms/pages/PendingApproval.vue
index 671dceeb..6a5b3815 100644
--- a/src/classrooms/pages/PendingApproval.vue
+++ b/src/classrooms/pages/PendingApproval.vue
@@ -1,68 +1,67 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, watch } from "vue";
-import { useAuthStore } from "@/auth/model/auth.store";
-import { useRouter } from "vue-router";
-import LogoutButton from "@/shared/components/LogoutButton.vue";
-import { useI18n } from "vue-i18n";
+import { computed, onMounted, onUnmounted, watch } from 'vue'
+import { useAuthStore } from '@/auth/model/auth.store'
+import { useRouter } from 'vue-router'
+import LogoutButton from '@/shared/components/LogoutButton.vue'
+import { useI18n } from 'vue-i18n'
 
-const { t } = useI18n();
-let interval: number;
+const { t } = useI18n()
+let interval: number
 
-const authStore = useAuthStore();
-const router = useRouter();
+const authStore = useAuthStore()
+const router = useRouter()
 
-const status = computed(
-    () => authStore.user?.pupilProfile?.membershipStatus
-);
+const status = computed(() => authStore.user?.pupilProfile?.membershipStatus)
 
 onMounted(() => {
   interval = window.setInterval(async () => {
-    await authStore.fetchCurrentUserProfile();
-  }, 3000);
-});
+    await authStore.fetchCurrentUserProfile()
+  }, 3000)
+})
 
 onUnmounted(() => {
-  clearInterval(interval);
-});
+  clearInterval(interval)
+})
 
 watch(status, (newStatus) => {
-  if (newStatus === "ACTIVE") {
-    router.push({ name: "pupil-home" });
+  if (newStatus === 'ACTIVE') {
+    router.push({ name: 'pupil-home' })
   }
-});
+})
 </script>
 
 <template>
   <main class="flex min-h-screen items-center justify-center px-6">
-    <div class="w-full max-w-md rounded-xl p-8 shadow-lg backdrop-blur-md text-center">
-
+    <div
+      class="w-full max-w-md rounded-xl p-8 shadow-lg backdrop-blur-md text-center"
+    >
       <h1 class="text-2xl font-bold text-gray-800">
-        {{ t("pendingApproval.waiting") }}
+        {{ t('pendingApproval.waiting') }}
       </h1>
 
       <p class="mt-2 text-sm text-gray-600">
-        {{ t("pendingApproval.request") }}
+        {{ t('pendingApproval.request') }}
       </p>
 
       <div class="mt-6 space-y-3">
-
-        <div class="rounded-lg border border-yellow-200 bg-yellow-50 px-4 py-3 text-sm text-yellow-800">
+        <div
+          class="rounded-lg border border-yellow-200 bg-yellow-50 px-4 py-3 text-sm text-yellow-800"
+        >
           Status:
           <span class="font-semibold">
-            {{ status ?? "UNKNOWN" }}
+            {{ status ?? 'UNKNOWN' }}
           </span>
         </div>
 
         <button
-            class="inline-flex w-full items-center justify-center rounded-full border-2 border-[#7f6647] bg-white px-4 py-3 font-(--font-display-2) text-[0.95rem] leading-none text-[#5e4428] shadow-[0_4px_10px_rgba(94,68,40,0.12),inset_0_-2px_0_rgba(179,143,94,0.35)] transition duration-150 hover:-translate-y-px hover:border-[#6b5270] hover:shadow-[0_8px_16px_rgba(94,68,40,0.16),inset_0_-2px_0_rgba(179,143,94,0.35)] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#1a4a7a]"
-            @click="authStore.fetchCurrentUserProfile()"
+          class="inline-flex w-full items-center justify-center rounded-full border-2 border-[#7f6647] bg-white px-4 py-3 font-(--font-display-2) text-[0.95rem] leading-none text-[#5e4428] shadow-[0_4px_10px_rgba(94,68,40,0.12),inset_0_-2px_0_rgba(179,143,94,0.35)] transition duration-150 hover:-translate-y-px hover:border-[#6b5270] hover:shadow-[0_8px_16px_rgba(94,68,40,0.16),inset_0_-2px_0_rgba(179,143,94,0.35)] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#1a4a7a]"
+          @click="authStore.fetchCurrentUserProfile()"
         >
-          {{ t("pendingApproval.refresh") }}
+          {{ t('pendingApproval.refresh') }}
         </button>
 
         <LogoutButton />
-
       </div>
     </div>
   </main>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/classrooms/routes.ts b/src/classrooms/routes.ts
index 951adbbf..59138151 100644
--- a/src/classrooms/routes.ts
+++ b/src/classrooms/routes.ts
@@ -1,19 +1,19 @@
 import type { RouteLocationNormalizedLoaded, RouteRecordRaw } from 'vue-router'
 
-import ClassroomOverview from "@/classrooms/pages/ClassroomOverview.vue";
-import NewClassroom from "@/classrooms/pages/NewClassroom.vue";
-import JoinClassroom from "@/classrooms/pages/JoinClassroom.vue";
-import ClassroomDetails from "@/classrooms/pages/ClassroomDetails.vue";
-import PupilOverviewPage from "@/classrooms/pages/PupilOverviewPage.vue";
-import TeacherPlaytestMapPage from "@/teacher-playtest/pages/TeacherPlaytestMapPage.vue";
-import NotificationsPage from "@/notifications/pages/NotificationsPage.vue";
-import TeacherPlaytestStopPage from "@/teacher-playtest/pages/TeacherPlaytestStopPage.vue";
-import ClassroomTasks from "@/classrooms/pages/ClassroomTasks.vue";
-import NewClassroomTask from "@/classrooms/pages/NewClassroomTask.vue";
-import EditClassroomTask from "@/classrooms/pages/EditClassroomTask.vue";
-import PendingApproval from "@/classrooms/pages/PendingApproval.vue";
-import TeacherMystery from "@/teacher-mystery/pages/TeacherMystery.vue";
-import TeacherPupilNotebookPage from "@/notebook/pages/TeacherPupilNotebookPage.vue";
+import ClassroomOverview from '@/classrooms/pages/ClassroomOverview.vue'
+import NewClassroom from '@/classrooms/pages/NewClassroom.vue'
+import JoinClassroom from '@/classrooms/pages/JoinClassroom.vue'
+import ClassroomDetails from '@/classrooms/pages/ClassroomDetails.vue'
+import PupilOverviewPage from '@/classrooms/pages/PupilOverviewPage.vue'
+import TeacherPlaytestMapPage from '@/teacher-playtest/pages/TeacherPlaytestMapPage.vue'
+import NotificationsPage from '@/notifications/pages/NotificationsPage.vue'
+import TeacherPlaytestStopPage from '@/teacher-playtest/pages/TeacherPlaytestStopPage.vue'
+import ClassroomTasks from '@/classrooms/pages/ClassroomTasks.vue'
+import NewClassroomTask from '@/classrooms/pages/NewClassroomTask.vue'
+import EditClassroomTask from '@/classrooms/pages/EditClassroomTask.vue'
+import PendingApproval from '@/classrooms/pages/PendingApproval.vue'
+import TeacherMystery from '@/teacher-mystery/pages/TeacherMystery.vue'
+import TeacherPupilNotebookPage from '@/notebook/pages/TeacherPupilNotebookPage.vue'
 import ClassroomModerationPage from '@/classrooms/pages/ClassroomModerationPage.vue'
 
 export function createClassroomRoutes(
@@ -53,16 +53,16 @@ export function createClassroomRoutes(
       meta: {
         hideBackButton: true,
         hideHomeButton: true,
-      }
+      },
     },
     {
-      path: "pending-approval",
+      path: 'pending-approval',
       name: `${prefix}-pending-approval`,
       component: PendingApproval,
       meta: {
         hideBackButton: true,
         hideHomeButton: true,
-      }
+      },
     },
     {
       path: 'classroom-details/:classroomId',
@@ -91,65 +91,65 @@ export function createClassroomRoutes(
         }),
       },
     },
-  {
-    path: "classrooms/:classroomId/pupils/:pupilId/notebook",
-    name: "classroom-pupil-notebook",
-    component: TeacherPupilNotebookPage,
-    meta: {
-      backTarget: (route: RouteLocationNormalizedLoaded) => ({
-        name: "classroom-pupil-progress",
-        params: {
-          classroomId: route.params.classroomId,
-          pupilId: route.params.pupilId,
-        },
-      }),
+    {
+      path: 'classrooms/:classroomId/pupils/:pupilId/notebook',
+      name: 'classroom-pupil-notebook',
+      component: TeacherPupilNotebookPage,
+      meta: {
+        backTarget: (route: RouteLocationNormalizedLoaded) => ({
+          name: 'classroom-pupil-progress',
+          params: {
+            classroomId: route.params.classroomId,
+            pupilId: route.params.pupilId,
+          },
+        }),
+      },
     },
-  },
-  {
-    path: "classrooms/:classroomId/notifications",
-    name: "classroom-notifications",
-    component: NotificationsPage,
-    meta: {
-      backTarget: classroomDetailsBackTarget,
+    {
+      path: 'classrooms/:classroomId/notifications',
+      name: 'classroom-notifications',
+      component: NotificationsPage,
+      meta: {
+        backTarget: classroomDetailsBackTarget,
+      },
     },
-  },
-  {
-    path: "classrooms/:classroomId/tasks/:slug",
-    name: "classroom-tasks",
-    component: ClassroomTasks,
-  },
     {
-      path: "classrooms/:classroomId/tasks/new",
-      name: "new-classroom-task",
+      path: 'classrooms/:classroomId/tasks/:slug',
+      name: 'classroom-tasks',
+      component: ClassroomTasks,
+    },
+    {
+      path: 'classrooms/:classroomId/tasks/new',
+      name: 'new-classroom-task',
       component: NewClassroomTask,
     },
     {
-      path: "classroom/:classroomId/tasks/:taskId",
-      name: "edit-classroom-task",
+      path: 'classroom/:classroomId/tasks/:taskId',
+      name: 'edit-classroom-task',
       component: EditClassroomTask,
     },
-  {
-    path: "classrooms/:classroomId/playtest",
-    name: "teacher-playtest-map",
-    component: TeacherPlaytestMapPage,
-    meta: {
-      backTarget: classroomDetailsBackTarget,
+    {
+      path: 'classrooms/:classroomId/playtest',
+      name: 'teacher-playtest-map',
+      component: TeacherPlaytestMapPage,
+      meta: {
+        backTarget: classroomDetailsBackTarget,
+      },
     },
-  },
-  {
-    path: "classrooms/:classroomId/playtest/:slug",
-    name: "teacher-playtest-stop",
-    component: TeacherPlaytestStopPage,
-    meta: {
-      backTarget: (route: RouteLocationNormalizedLoaded) => ({
-        name: "teacher-playtest-map",
-        params: { classroomId: route.params.classroomId },
-      }),
+    {
+      path: 'classrooms/:classroomId/playtest/:slug',
+      name: 'teacher-playtest-stop',
+      component: TeacherPlaytestStopPage,
+      meta: {
+        backTarget: (route: RouteLocationNormalizedLoaded) => ({
+          name: 'teacher-playtest-map',
+          params: { classroomId: route.params.classroomId },
+        }),
+      },
     },
-  },
     {
-      path: "classrooms/:classroomId/mystery",
-      name: "classroom-mystery",
+      path: 'classrooms/:classroomId/mystery',
+      name: 'classroom-mystery',
       component: TeacherMystery,
       meta: {
         backTarget: classroomDetailsBackTarget,
diff --git a/src/leaderboard/components/__tests__/LeaderboardComponent.spec.ts b/src/leaderboard/components/__tests__/LeaderboardComponent.spec.ts
index 97e655d2..8a2dd345 100644
--- a/src/leaderboard/components/__tests__/LeaderboardComponent.spec.ts
+++ b/src/leaderboard/components/__tests__/LeaderboardComponent.spec.ts
@@ -1,7 +1,7 @@
 import { flushPromises, mount } from '@vue/test-utils'
 import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { createAppI18n } from "@/app/i18n";
+import { createAppI18n } from '@/app/i18n'
 import { useAuthStore } from '@/auth/model/auth.store'
 import Leaderboard from '@/leaderboard/components/LeaderboardComponent.vue'
 import { requestLeaderboard } from '@/leaderboard/api/leaderboard.api'
@@ -32,7 +32,7 @@ describe('Leaderboard', () => {
         currentLevel: 1,
         currentClassroomId: 1,
         hasCompletedOnboarding: true,
-        membershipStatus: "ACTIVE",
+        membershipStatus: 'ACTIVE',
       },
       teacherProfile: null,
     }
diff --git a/src/locales/nb.ts b/src/locales/nb.ts
index aee6999c..be33da5d 100644
--- a/src/locales/nb.ts
+++ b/src/locales/nb.ts
@@ -697,19 +697,19 @@ export const nb = {
       'Her kan du se rangering av klasserom etter gjennomsnittspoeng',
   },
   pupilTable: {
-    name: "Navn",
-    score: "Poeng",
-    xp: "XP",
-    level: "Nivå",
-    actions: "Handlinger",
-    remove: "Fjern",
-    seeNotebook: "Se notatbok",
-    pending: "Elever som avventer godkjenning",
-    approved: "Godkjente elever",
-    approve: "Godkjenn",
-    confirm: "Fjern elev",
-    message: "Er du sikker på at du vil fjerne eleven fra klasseromet?",
-    cancel: "Avbryt",
+    name: 'Navn',
+    score: 'Poeng',
+    xp: 'XP',
+    level: 'Nivå',
+    actions: 'Handlinger',
+    remove: 'Fjern',
+    seeNotebook: 'Se notatbok',
+    pending: 'Elever som avventer godkjenning',
+    approved: 'Godkjente elever',
+    approve: 'Godkjenn',
+    confirm: 'Fjern elev',
+    message: 'Er du sikker på at du vil fjerne eleven fra klasseromet?',
+    cancel: 'Avbryt',
   },
   pupilOverviewPage: {
     title: 'Elever',
@@ -756,64 +756,67 @@ export const nb = {
     joinCode: 'Klasseromskode',
   },
   taskOverview: {
-    title: "Oppgaver",
-    fail: "Kunne ikke hente oppgavene",
-    unpublish: "Avpubliser",
-    publish: "Publiser",
-    delete: "Slett oppgave",
-    message: "Er du sikker på at du vil slette oppgaven? Dette kan ikke reverseres.",
-    ptitle: "Endre publiserings status",
-    pmessage: "Er du sikker på at du vil endre publiserings statusen til oppgaven?",
-    confirm: "Fortsett",
-    create: "Opprett oppgave",
-    notask: "Ingen oppgaver funnet",
-    unpublished: "Ikke publisert",
-    published: "Publisert",
-    edit: "Rediger",
-    cancel: "Avbryt",
+    title: 'Oppgaver',
+    fail: 'Kunne ikke hente oppgavene',
+    unpublish: 'Avpubliser',
+    publish: 'Publiser',
+    delete: 'Slett oppgave',
+    message:
+      'Er du sikker på at du vil slette oppgaven? Dette kan ikke reverseres.',
+    ptitle: 'Endre publiserings status',
+    pmessage:
+      'Er du sikker på at du vil endre publiserings statusen til oppgaven?',
+    confirm: 'Fortsett',
+    create: 'Opprett oppgave',
+    notask: 'Ingen oppgaver funnet',
+    unpublished: 'Ikke publisert',
+    published: 'Publisert',
+    edit: 'Rediger',
+    cancel: 'Avbryt',
   },
   newTask: {
-    savefail: "Lagring feilet",
-    edit: "Rediger oppgave",
-    create: "Opprett oppgave",
-    select: "Velg stoppested",
-    loading: "Laster stoppested...",
-    additem: "Legg til punkt",
-    cancel: "Avbryt",
-    save: "Lagre",
-    stops: "Stoppesteder",
-    remove: "Fjern",
-    item: "Punkt",
-    prompt: "Spørsmål",
-    ep: "Engelsk spørsmål",
-    np: "Norsk spørsmål",
-    et: "Engelsk tittel",
-    nt: "Norsk tittel",
-    ei: "Engelsk introduksjon",
-    ni: "Norsk introduksjon",
-    news: "Nyhetssammenligning",
-    difficulty: "Vanskelighetsgrad",
-    options: "Valgmuligheter",
-    eo: "Engelsk valgmulighet",
-    no: "Norsk valgmulighet",
-    correct: "Riktig",
-    answer: "Fasit",
-    ea: "Engelsk forklaring",
-    na: "Norsk forklaring",
-    addoption: "Legg til valgmulighet",
+    savefail: 'Lagring feilet',
+    edit: 'Rediger oppgave',
+    create: 'Opprett oppgave',
+    select: 'Velg stoppested',
+    loading: 'Laster stoppested...',
+    additem: 'Legg til punkt',
+    cancel: 'Avbryt',
+    save: 'Lagre',
+    stops: 'Stoppesteder',
+    remove: 'Fjern',
+    item: 'Punkt',
+    prompt: 'Spørsmål',
+    ep: 'Engelsk spørsmål',
+    np: 'Norsk spørsmål',
+    et: 'Engelsk tittel',
+    nt: 'Norsk tittel',
+    ei: 'Engelsk introduksjon',
+    ni: 'Norsk introduksjon',
+    news: 'Nyhetssammenligning',
+    difficulty: 'Vanskelighetsgrad',
+    options: 'Valgmuligheter',
+    eo: 'Engelsk valgmulighet',
+    no: 'Norsk valgmulighet',
+    correct: 'Riktig',
+    answer: 'Fasit',
+    ea: 'Engelsk forklaring',
+    na: 'Norsk forklaring',
+    addoption: 'Legg til valgmulighet',
   },
   classroomDetails: {
-    label: "Klasserom",
-    titlealert: "Klasserommet må ha tittel.",
-    failalert: "Kunne ikke oppdatere klasserommet.",
-    confirmmessage: "Er du sikker på at du vil slette kalsseromet? Alle elever og data vil bli fjernet.",
-    save: "Lagre",
-    cancel: "Avbryt",
-    deleteclass: "Slett klasserom",
-    edit: "Endre",
-    addteachers: "Legg til lærere",
-    existingteachers: "Eksisterende lærere",
-    confirm: "Slett",
+    label: 'Klasserom',
+    titlealert: 'Klasserommet må ha tittel.',
+    failalert: 'Kunne ikke oppdatere klasserommet.',
+    confirmmessage:
+      'Er du sikker på at du vil slette kalsseromet? Alle elever og data vil bli fjernet.',
+    save: 'Lagre',
+    cancel: 'Avbryt',
+    deleteclass: 'Slett klasserom',
+    edit: 'Endre',
+    addteachers: 'Legg til lærere',
+    existingteachers: 'Eksisterende lærere',
+    confirm: 'Slett',
     taskOverview: {
       title: 'Oppgaver',
       description: 'Velg hvilke spilloppgaver klassen skal jobbe med.',
@@ -858,20 +861,21 @@ export const nb = {
     },
   },
   pendingApproval: {
-    refresh: "Oppdater status",
-    waiting: "Venter på godkjenning.",
-    request: "Din forespørsel på å bli med i klasserommet avventer godkjenning fra lærer.",
+    refresh: 'Oppdater status',
+    waiting: 'Venter på godkjenning.',
+    request:
+      'Din forespørsel på å bli med i klasserommet avventer godkjenning fra lærer.',
   },
-    mystery: {
-      title: 'Ukens mysterium',
-      subtitle: 'Se hva læreren har valgt ut, og send inn ditt eget funn!',
-      loading: 'Laster mysterier...',
-      weekLabel: 'Uke {week}',
-      prevWeek: 'Forrige uke',
-      nextWeek: 'Neste uke',
-      noMysteries: 'Ingen mysterier er lagt ut enda.',
-      noMysteriesThisWeek: 'Ingen mysterier denne uken.',
-      submissionImageAlt: 'Bilde av innsending',
+  mystery: {
+    title: 'Ukens mysterium',
+    subtitle: 'Se hva læreren har valgt ut, og send inn ditt eget funn!',
+    loading: 'Laster mysterier...',
+    weekLabel: 'Uke {week}',
+    prevWeek: 'Forrige uke',
+    nextWeek: 'Neste uke',
+    noMysteries: 'Ingen mysterier er lagt ut enda.',
+    noMysteriesThisWeek: 'Ingen mysterier denne uken.',
+    submissionImageAlt: 'Bilde av innsending',
 
     modal: {
       close: 'Lukk',
diff --git a/src/map/model/__tests__/map.store.spec.ts b/src/map/model/__tests__/map.store.spec.ts
index 153e67b1..78b20d5d 100644
--- a/src/map/model/__tests__/map.store.spec.ts
+++ b/src/map/model/__tests__/map.store.spec.ts
@@ -53,7 +53,7 @@ function seedAuthStore() {
       totalXp: 0,
       currentLevel: 1,
       currentClassroomId: CLASSROOM_ID,
-      membershipStatus: "ACTIVE",
+      membershipStatus: 'ACTIVE',
       hasCompletedOnboarding: true,
     },
     teacherProfile: null,
diff --git a/src/mystery/model/__tests__/mystery.store.spec.ts b/src/mystery/model/__tests__/mystery.store.spec.ts
index 8a9c17b7..d1041396 100644
--- a/src/mystery/model/__tests__/mystery.store.spec.ts
+++ b/src/mystery/model/__tests__/mystery.store.spec.ts
@@ -52,7 +52,7 @@ function seedPupilAuthStore() {
       currentLevel: 1,
       currentClassroomId: CLASSROOM_ID,
       hasCompletedOnboarding: true,
-      membershipStatus: "ACTIVE",
+      membershipStatus: 'ACTIVE',
     },
     teacherProfile: null,
   }
@@ -141,7 +141,7 @@ describe('useMysteryStore', () => {
         currentLevel: 1,
         currentClassroomId: null as unknown as number,
         hasCompletedOnboarding: true,
-        membershipStatus: "ACTIVE",
+        membershipStatus: 'ACTIVE',
       },
       teacherProfile: null,
     }
diff --git a/src/notebook/components/__tests__/NotebookComponent.spec.ts b/src/notebook/components/__tests__/NotebookComponent.spec.ts
index 97e47e34..2ec31ecf 100644
--- a/src/notebook/components/__tests__/NotebookComponent.spec.ts
+++ b/src/notebook/components/__tests__/NotebookComponent.spec.ts
@@ -246,7 +246,7 @@ describe('NotebookComponent pupil pagination', () => {
         totalXp: 0,
         currentLevel: 1,
         currentClassroomId: 7,
-        membershipStatus: "ACTIVE",
+        membershipStatus: 'ACTIVE',
         hasCompletedOnboarding: true,
       },
       teacherProfile: null,
diff --git a/src/profile/pages/__tests__/PupilProfilePage.spec.ts b/src/profile/pages/__tests__/PupilProfilePage.spec.ts
index 1f9307d5..6fa4637c 100644
--- a/src/profile/pages/__tests__/PupilProfilePage.spec.ts
+++ b/src/profile/pages/__tests__/PupilProfilePage.spec.ts
@@ -96,7 +96,7 @@ describe('PupilProfilePage', () => {
         totalXp: 480,
         currentLevel: 4,
         currentClassroomId: 101,
-        membershipStatus: "ACTIVE",
+        membershipStatus: 'ACTIVE',
         hasCompletedOnboarding: true,
       },
       teacherProfile: null,
@@ -145,7 +145,7 @@ describe('PupilProfilePage', () => {
         currentLevel: 4,
         currentClassroomId: 101,
         hasCompletedOnboarding: true,
-        membershipStatus: "ACTIVE",
+        membershipStatus: 'ACTIVE',
       },
       teacherProfile: null,
     }
diff --git a/src/pupil-portal/pages/__tests__/PupilHomePage.spec.ts b/src/pupil-portal/pages/__tests__/PupilHomePage.spec.ts
index bb6969c1..7cb4d55f 100644
--- a/src/pupil-portal/pages/__tests__/PupilHomePage.spec.ts
+++ b/src/pupil-portal/pages/__tests__/PupilHomePage.spec.ts
@@ -75,7 +75,7 @@ describe('PupilHomePage', () => {
         currentLevel: 4,
         currentClassroomId: 101,
         hasCompletedOnboarding: true,
-        membershipStatus: "ACTIVE",
+        membershipStatus: 'ACTIVE',
       },
       teacherProfile: null,
     }
@@ -112,7 +112,7 @@ describe('PupilHomePage', () => {
         currentLevel: 4,
         currentClassroomId: 101,
         hasCompletedOnboarding: true,
-        membershipStatus: "ACTIVE",
+        membershipStatus: 'ACTIVE',
       },
       teacherProfile: null,
     }
diff --git a/src/pupil-portal/pages/__tests__/PupilOnboardingPage.spec.ts b/src/pupil-portal/pages/__tests__/PupilOnboardingPage.spec.ts
index 662c9e7d..a3876736 100644
--- a/src/pupil-portal/pages/__tests__/PupilOnboardingPage.spec.ts
+++ b/src/pupil-portal/pages/__tests__/PupilOnboardingPage.spec.ts
@@ -76,7 +76,7 @@ describe('PupilOnboardingPage', () => {
         currentLevel: 1,
         currentClassroomId: null,
         hasCompletedOnboarding: false,
-        membershipStatus: "ACTIVE",
+        membershipStatus: 'ACTIVE',
       },
       teacherProfile: null,
     }
@@ -143,7 +143,7 @@ describe('PupilOnboardingPage', () => {
         totalXp: 300,
         currentLevel: 2,
         currentClassroomId: 10,
-        membershipStatus: "ACTIVE",
+        membershipStatus: 'ACTIVE',
         hasCompletedOnboarding: false,
       },
       teacherProfile: null,
diff --git a/src/stops/api/stops.api.ts b/src/stops/api/stops.api.ts
index 04e57be6..0c7c7525 100644
--- a/src/stops/api/stops.api.ts
+++ b/src/stops/api/stops.api.ts
@@ -243,65 +243,65 @@ export function requestSubmitStopAnswers(
 }
 
 export function requestCreateTask(
-    classroomId: number,
-    payload: unknown,
-    authorizationHeader: string,
+  classroomId: number,
+  payload: unknown,
+  authorizationHeader: string,
 ) {
   return fetchJson<TaskResponse>(
-      `${CLASSROOMS_BASE}/${classroomId}/tasks`,
-      authorizationHeader,
-      {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(payload),
-      },
+    `${CLASSROOMS_BASE}/${classroomId}/tasks`,
+    authorizationHeader,
+    {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload),
+    },
   )
 }
 
 export function requestUpdateTask(
-    classroomId: number,
-    taskId: number,
-    payload: unknown,
-    authorizationHeader: string,
+  classroomId: number,
+  taskId: number,
+  payload: unknown,
+  authorizationHeader: string,
 ) {
   return fetchJson<TaskResponse>(
-      `${CLASSROOMS_BASE}/${classroomId}/tasks/${taskId}`,
-      authorizationHeader,
-      {
-        method: "PUT",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(payload),
-      },
+    `${CLASSROOMS_BASE}/${classroomId}/tasks/${taskId}`,
+    authorizationHeader,
+    {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload),
+    },
   )
 }
 
 export function requestUpdateTaskPublishState(
-    classroomId: number,
-    taskId: number,
-    published: boolean,
-    authorizationHeader: string,
+  classroomId: number,
+  taskId: number,
+  published: boolean,
+  authorizationHeader: string,
 ) {
   return fetchJson<TaskResponse>(
-      `${CLASSROOMS_BASE}/${classroomId}/tasks/${taskId}/publish`,
-      authorizationHeader,
-      {
-        method: "PATCH",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ published }),
-      },
+    `${CLASSROOMS_BASE}/${classroomId}/tasks/${taskId}/publish`,
+    authorizationHeader,
+    {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ published }),
+    },
   )
 }
 
 export function requestDeleteTask(
-    classroomId: number,
-    taskId: number,
-    authorizationHeader: string,
+  classroomId: number,
+  taskId: number,
+  authorizationHeader: string,
 ) {
   return fetchJson<void>(
-      `${CLASSROOMS_BASE}/${classroomId}/tasks/${taskId}`,
-      authorizationHeader,
-      {
-        method: "DELETE",
-      },
+    `${CLASSROOMS_BASE}/${classroomId}/tasks/${taskId}`,
+    authorizationHeader,
+    {
+      method: 'DELETE',
+    },
   )
 }
diff --git a/src/stops/model/__tests__/stop.store.spec.ts b/src/stops/model/__tests__/stop.store.spec.ts
index a1a34183..4a3920de 100644
--- a/src/stops/model/__tests__/stop.store.spec.ts
+++ b/src/stops/model/__tests__/stop.store.spec.ts
@@ -106,7 +106,7 @@ function seedAuthStore() {
       totalXp: 0,
       currentLevel: 1,
       currentClassroomId: CLASSROOM_ID,
-      membershipStatus: "ACTIVE",
+      membershipStatus: 'ACTIVE',
       hasCompletedOnboarding: true,
     },
     teacherProfile: null,
diff --git a/src/stops/model/task.store.ts b/src/stops/model/task.store.ts
index 430d69dd..8ee12b48 100644
--- a/src/stops/model/task.store.ts
+++ b/src/stops/model/task.store.ts
@@ -1,7 +1,7 @@
-import { defineStore } from "pinia"
-import { ref } from "vue"
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
 
-import { useAuthStore } from "@/auth/model/auth.store"
+import { useAuthStore } from '@/auth/model/auth.store'
 
 import {
   requestDeleteTask,
@@ -10,47 +10,43 @@ import {
   requestUpdateTask,
   type TaskForm,
   type TaskResponse,
-} from "@/stops/api/stops.api"
+} from '@/stops/api/stops.api'
 
-export const useTasksStore = defineStore("tasks", () => {
+export const useTasksStore = defineStore('tasks', () => {
   const authStore = useAuthStore()
 
   const draft = ref<TaskForm | null>(null)
   const loading = ref(false)
 
   async function deleteTask(classroomId: number, taskId: number) {
-    if (!authStore.authorizationHeader) throw new Error("Not authenticated")
+    if (!authStore.authorizationHeader) throw new Error('Not authenticated')
 
-    await requestDeleteTask(
-        classroomId,
-        taskId,
-        authStore.authorizationHeader,
-    )
+    await requestDeleteTask(classroomId, taskId, authStore.authorizationHeader)
   }
 
   async function togglePublish(
-      classroomId: number,
-      taskId: number,
-      published: boolean,
+    classroomId: number,
+    taskId: number,
+    published: boolean,
   ) {
-    if (!authStore.authorizationHeader) throw new Error("Not authenticated")
+    if (!authStore.authorizationHeader) throw new Error('Not authenticated')
 
     return requestUpdateTaskPublishState(
-        classroomId,
-        taskId,
-        published,
-        authStore.authorizationHeader,
+      classroomId,
+      taskId,
+      published,
+      authStore.authorizationHeader,
     )
   }
 
   function initDraft(stopId: number) {
     draft.value = {
       stopId,
-      title: { nb: "", en: "" },
+      title: { nb: '', en: '' },
       introText: { nb: null, en: null },
       difficultyLevel: 1,
-      taskType: "NEWS_COMPARISON",
-      passingRule: "ALL_CORRECT",
+      taskType: 'NEWS_COMPARISON',
+      passingRule: 'ALL_CORRECT',
       passingScore: null,
       maxScore: 1,
       items: [],
@@ -65,21 +61,21 @@ export const useTasksStore = defineStore("tasks", () => {
     }
   }
 
-  function updateItems(items: TaskForm["items"]) {
+  function updateItems(items: TaskForm['items']) {
     if (!draft.value) return
     draft.value.items = items
   }
 
   async function createTask(classroomId: number): Promise<TaskResponse> {
-    if (!authStore.authorizationHeader) throw new Error("Not authenticated")
-    if (!draft.value) throw new Error("No draft initialized")
+    if (!authStore.authorizationHeader) throw new Error('Not authenticated')
+    if (!draft.value) throw new Error('No draft initialized')
 
     loading.value = true
     try {
       return await requestCreateTask(
-          classroomId,
-          draft.value,
-          authStore.authorizationHeader,
+        classroomId,
+        draft.value,
+        authStore.authorizationHeader,
       )
     } finally {
       loading.value = false
@@ -87,17 +83,17 @@ export const useTasksStore = defineStore("tasks", () => {
   }
 
   async function updateTask(
-      classroomId: number,
-      taskId: number,
+    classroomId: number,
+    taskId: number,
   ): Promise<TaskResponse> {
-    if (!authStore.authorizationHeader) throw new Error("Not authenticated")
-    if (!draft.value) throw new Error("No draft initialized")
+    if (!authStore.authorizationHeader) throw new Error('Not authenticated')
+    if (!draft.value) throw new Error('No draft initialized')
 
     return requestUpdateTask(
-        classroomId,
-        taskId,
-        draft.value,
-        authStore.authorizationHeader,
+      classroomId,
+      taskId,
+      draft.value,
+      authStore.authorizationHeader,
     )
   }
 
@@ -112,4 +108,4 @@ export const useTasksStore = defineStore("tasks", () => {
     createTask,
     updateTask,
   }
-})
\ No newline at end of file
+})
diff --git a/src/teacher-mystery/model/__tests__/teacher-mystery.store.spec.ts b/src/teacher-mystery/model/__tests__/teacher-mystery.store.spec.ts
index 67957fe4..dfd15591 100644
--- a/src/teacher-mystery/model/__tests__/teacher-mystery.store.spec.ts
+++ b/src/teacher-mystery/model/__tests__/teacher-mystery.store.spec.ts
@@ -129,7 +129,7 @@ describe('useTeacherMysteryStore', () => {
         currentLevel: 1,
         currentClassroomId: CLASSROOM_ID,
         hasCompletedOnboarding: true,
-        membershipStatus: "ACTIVE",
+        membershipStatus: 'ACTIVE',
       },
       teacherProfile: null,
     }
@@ -254,7 +254,7 @@ describe('useTeacherMysteryStore', () => {
         currentLevel: 1,
         currentClassroomId: CLASSROOM_ID,
         hasCompletedOnboarding: true,
-        membershipStatus: "ACTIVE",
+        membershipStatus: 'ACTIVE',
       },
       teacherProfile: null,
     }
diff --git a/src/teacher-playtest/model/teacherPlaytestMap.store.ts b/src/teacher-playtest/model/teacherPlaytestMap.store.ts
index 76de6649..4236d7ca 100644
--- a/src/teacher-playtest/model/teacherPlaytestMap.store.ts
+++ b/src/teacher-playtest/model/teacherPlaytestMap.store.ts
@@ -1,7 +1,10 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
 import { useAuthStore } from '@/auth/model/auth.store'
-import { requestTeacherPlaytestMapOverview, requestTeacherPlaytestMapStopBySlug } from '@/teacher-playtest/api/teacher-playtest.api'
+import {
+  requestTeacherPlaytestMapOverview,
+  requestTeacherPlaytestMapStopBySlug,
+} from '@/teacher-playtest/api/teacher-playtest.api'
 import type { MapStopOverview } from '@/map/model/map.types'
 
 export type TeacherPlaytestMapStatus = 'idle' | 'loading' | 'loaded' | 'error'
diff --git a/src/teacher-playtest/pages/TeacherPlaytestMapPage.vue b/src/teacher-playtest/pages/TeacherPlaytestMapPage.vue
index e7e08385..e917db32 100644
--- a/src/teacher-playtest/pages/TeacherPlaytestMapPage.vue
+++ b/src/teacher-playtest/pages/TeacherPlaytestMapPage.vue
@@ -11,11 +11,12 @@ const { t } = useI18n()
 const mapStore = useTeacherPlaytestMapStore()
 
 const classroomId = computed(() => Number(route.params.classroomId))
-const homeRoute = computed(() =>
-  router.resolve({
-    name: 'teacher-classroom-details',
-    params: { classroomId: classroomId.value },
-  }).fullPath,
+const homeRoute = computed(
+  () =>
+    router.resolve({
+      name: 'teacher-classroom-details',
+      params: { classroomId: classroomId.value },
+    }).fullPath,
 )
 
 function resolveStopRoute(slug: string): string {

From a4573a70cf0edcec5888a20b5a2fb8aaf312b6d2 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Thu, 30 Apr 2026 10:28:04 +0200
Subject: [PATCH 45/66] formatting

---
 src/classrooms/components/PupilTable.vue | 150 ++++++++++++-----------
 1 file changed, 80 insertions(+), 70 deletions(-)

diff --git a/src/classrooms/components/PupilTable.vue b/src/classrooms/components/PupilTable.vue
index b9e64a3f..93a2d96b 100644
--- a/src/classrooms/components/PupilTable.vue
+++ b/src/classrooms/components/PupilTable.vue
@@ -62,7 +62,7 @@ async function approvePupil(pupilId: number) {
 </script>
 <template>
   <div
-      class="mx-auto w-full max-h-170 max-w-7xl overflow-y-auto bg-white drop-shadow-lg scrollbar-thin"
+    class="mx-auto w-full max-h-170 max-w-7xl overflow-y-auto bg-white drop-shadow-lg scrollbar-thin"
   >
     <div v-if="store.isLoadingDetail" class="p-4 text-gray-500">
       Loading pupils...
@@ -74,134 +74,144 @@ async function approvePupil(pupilId: number) {
 
     <div v-else>
       <div v-if="sortedPending.length">
-        <h2 class="px-4 py-3 text-lg font-bold text-yellow-700 bg-yellow-50 border-b">
+        <h2
+          class="px-4 py-3 text-lg font-bold text-yellow-700 bg-yellow-50 border-b"
+        >
           Pending approval
         </h2>
 
         <table class="min-w-full bg-yellow-50">
           <thead>
-          <tr>
-            <th class="px-4 py-2 text-left">Name</th>
-            <th class="px-4 py-2 text-right">Actions</th>
-          </tr>
+            <tr>
+              <th class="px-4 py-2 text-left">Name</th>
+              <th class="px-4 py-2 text-right">Actions</th>
+            </tr>
           </thead>
 
           <tbody>
-          <tr
+            <tr
               v-for="pupil in sortedPending"
               :key="pupil.userId"
               class="border-b hover:bg-yellow-100"
-          >
-            <td class="px-4 py-3">
-              {{ pupil.displayName }}
-              <span class="ml-2 rounded bg-yellow-200 px-2 py-1 text-xs text-yellow-800">
+            >
+              <td class="px-4 py-3">
+                {{ pupil.displayName }}
+                <span
+                  class="ml-2 rounded bg-yellow-200 px-2 py-1 text-xs text-yellow-800"
+                >
                   Pending
                 </span>
-            </td>
+              </td>
 
-            <td class="px-4 py-3 text-right space-x-2">
-              <button
+              <td class="px-4 py-3 text-right space-x-2">
+                <button
                   class="rounded bg-green-600 px-3 py-1 text-white hover:bg-green-500 disabled:opacity-50"
                   :disabled="store.isLoading"
                   @click="approvePupil(pupil.userId)"
-              >
-                {{ t('pupilTable.approve') }}
-              </button>
+                >
+                  {{ t('pupilTable.approve') }}
+                </button>
 
-              <button
+                <button
                   class="rounded bg-red-600 px-3 py-1 text-white hover:bg-red-700 disabled:opacity-50"
                   :disabled="store.isLoading"
                   @click="askRemove(pupil.userId)"
-              >
-                {{ t('pupilTable.remove') }}
-              </button>
-            </td>
-          </tr>
+                >
+                  {{ t('pupilTable.remove') }}
+                </button>
+              </td>
+            </tr>
           </tbody>
         </table>
       </div>
 
       <div>
-        <h2 class="px-4 py-3 text-lg font-bold text-gray-700 bg-gray-100 border-b">
+        <h2
+          class="px-4 py-3 text-lg font-bold text-gray-700 bg-gray-100 border-b"
+        >
           {{ t('pupilTable.approved') }}
         </h2>
 
         <table class="min-w-full">
           <thead class="sticky top-0 z-10 bg-gray-100">
-          <tr>
-            <th class="px-4 py-2 text-left">{{ t('pupilTable.name') }}</th>
-            <th class="px-4 py-2 text-left">{{ t('pupilTable.level') }}</th>
-            <th class="px-4 py-2 text-left">{{ t('pupilTable.completedStops') }}</th>
-            <th class="px-4 py-2 text-right">{{ t('pupilTable.actions') }}</th>
-          </tr>
+            <tr>
+              <th class="px-4 py-2 text-left">{{ t('pupilTable.name') }}</th>
+              <th class="px-4 py-2 text-left">{{ t('pupilTable.level') }}</th>
+              <th class="px-4 py-2 text-left">
+                {{ t('pupilTable.completedStops') }}
+              </th>
+              <th class="px-4 py-2 text-right">
+                {{ t('pupilTable.actions') }}
+              </th>
+            </tr>
           </thead>
 
           <tbody>
-          <tr
+            <tr
               v-for="pupil in sortedApproved"
               :key="pupil.userId"
               class="border-b hover:bg-gray-100"
-          >
-            <td class="px-4 py-3">
-              <RouterLink
+            >
+              <td class="px-4 py-3">
+                <RouterLink
                   class="flex items-center gap-3 font-medium hover:underline"
                   :to="{
                     name: 'classroom-pupil-progress',
                     params: { classroomId, pupilId: pupil.userId },
                   }"
-              >
-                {{ pupil.displayName }}
-              </RouterLink>
-            </td>
+                >
+                  {{ pupil.displayName }}
+                </RouterLink>
+              </td>
 
-            <td class="px-4 py-3">
-              {{ pupil.currentLevel }}
-            </td>
+              <td class="px-4 py-3">
+                {{ pupil.currentLevel }}
+              </td>
 
-            <td class="px-4 py-3">
-              {{ pupil.completedStopsCount }}
-            </td>
+              <td class="px-4 py-3">
+                {{ pupil.completedStopsCount }}
+              </td>
 
-            <td class="px-4 py-3 text-right">
-              <div class="flex justify-end gap-2">
-                <RouterLink
+              <td class="px-4 py-3 text-right">
+                <div class="flex justify-end gap-2">
+                  <RouterLink
                     class="rounded bg-zinc-900 px-3 py-1 text-white hover:bg-zinc-700"
                     :to="{
                       name: 'classroom-pupil-notebook',
                       params: { classroomId, pupilId: pupil.userId },
                     }"
-                >
-                  {{ t('pupilTable.seeNotebook') }}
-                </RouterLink>
+                  >
+                    {{ t('pupilTable.seeNotebook') }}
+                  </RouterLink>
 
-                <button
+                  <button
                     class="rounded bg-red-600 px-3 py-1 text-white hover:bg-red-700 disabled:opacity-50"
                     :disabled="store.isLoading"
                     @click="askRemove(pupil.userId)"
-                >
-                  {{ t('pupilTable.remove') }}
-                </button>
-              </div>
-            </td>
-          </tr>
-
-          <tr v-if="!sortedApproved.length">
-            <td colspan="4" class="px-4 py-4 text-center text-gray-500">
-              {{ t('pupilTable.noPupils') }}
-            </td>
-          </tr>
+                  >
+                    {{ t('pupilTable.remove') }}
+                  </button>
+                </div>
+              </td>
+            </tr>
+
+            <tr v-if="!sortedApproved.length">
+              <td colspan="4" class="px-4 py-4 text-center text-gray-500">
+                {{ t('pupilTable.noPupils') }}
+              </td>
+            </tr>
           </tbody>
         </table>
       </div>
     </div>
 
     <ConfirmModal
-        v-model="showRemoveModal"
-        :title="t('pupilTable.confirm')"
-        :message="t('pupilTable.message')"
-        :confirmText="t('pupilTable.confirm')"
-        :cancelText="t('pupilTable.cancel')"
-        @confirm="confirmRemove"
+      v-model="showRemoveModal"
+      :title="t('pupilTable.confirm')"
+      :message="t('pupilTable.message')"
+      :confirmText="t('pupilTable.confirm')"
+      :cancelText="t('pupilTable.cancel')"
+      @confirm="confirmRemove"
     />
   </div>
-</template>
\ No newline at end of file
+</template>

From 261530df4b14abe77c8a958739b9910d39a2b358 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Thu, 30 Apr 2026 10:29:30 +0200
Subject: [PATCH 46/66] change id to classroomId to match rest

---
 src/notifications/composables/useNotificationsInbox.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/notifications/composables/useNotificationsInbox.ts b/src/notifications/composables/useNotificationsInbox.ts
index 5716b9e5..0960b051 100644
--- a/src/notifications/composables/useNotificationsInbox.ts
+++ b/src/notifications/composables/useNotificationsInbox.ts
@@ -273,7 +273,7 @@ export function useNotificationsInbox(
           authorizationHeader,
         )
         nextClassrooms.push({
-          classroomId: lockedDetail.id,
+          classroomId: lockedDetail.classroomId,
           title: lockedDetail.title,
           description: lockedDetail.description ?? '',
           pupilCount: lockedDetail.pupils.length,
@@ -322,7 +322,7 @@ export function useNotificationsInbox(
 
       const nextOptions = classroomDetails.flatMap((detail) =>
         detail.pupils.map((pupil) => ({
-          classroomId: detail.id,
+          classroomId: detail.classroomId,
           classroomTitle: detail.title,
           userId: pupil.userId,
           displayName: pupil.displayName,

From 2c698c91a40d08887e55e9e2ec81eb42dc282a3c Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Thu, 30 Apr 2026 10:50:16 +0200
Subject: [PATCH 47/66] comment

---
 src/pupil-portal/pages/__tests__/PupilOnboardingPage.spec.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pupil-portal/pages/__tests__/PupilOnboardingPage.spec.ts b/src/pupil-portal/pages/__tests__/PupilOnboardingPage.spec.ts
index a3876736..4f4617f5 100644
--- a/src/pupil-portal/pages/__tests__/PupilOnboardingPage.spec.ts
+++ b/src/pupil-portal/pages/__tests__/PupilOnboardingPage.spec.ts
@@ -63,6 +63,7 @@ describe('PupilOnboardingPage', () => {
     const avatarStore = useAvatarStore()
     window.localStorage.setItem('nettdetektivene.pupil-home.guide.seen', 'true')
 
+    //comment
     authStore.accessToken = 'access-token'
     authStore.user = {
       subject: 'pupil-1',

From 685fdbdbb714891d00de2d738790d097dbbe1696 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Thu, 30 Apr 2026 11:02:20 +0200
Subject: [PATCH 48/66] remove comment

---
 src/pupil-portal/pages/__tests__/PupilOnboardingPage.spec.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pupil-portal/pages/__tests__/PupilOnboardingPage.spec.ts b/src/pupil-portal/pages/__tests__/PupilOnboardingPage.spec.ts
index 4f4617f5..a3876736 100644
--- a/src/pupil-portal/pages/__tests__/PupilOnboardingPage.spec.ts
+++ b/src/pupil-portal/pages/__tests__/PupilOnboardingPage.spec.ts
@@ -63,7 +63,6 @@ describe('PupilOnboardingPage', () => {
     const avatarStore = useAvatarStore()
     window.localStorage.setItem('nettdetektivene.pupil-home.guide.seen', 'true')
 
-    //comment
     authStore.accessToken = 'access-token'
     authStore.user = {
       subject: 'pupil-1',

From 4f418da1a86a0faf619bd96e32835530b3fcb4a7 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Thu, 30 Apr 2026 12:17:45 +0200
Subject: [PATCH 49/66] change id to classroomId

---
 src/classrooms/pages/ClassroomDetails.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/classrooms/pages/ClassroomDetails.vue b/src/classrooms/pages/ClassroomDetails.vue
index 55d3aa02..f164abc2 100644
--- a/src/classrooms/pages/ClassroomDetails.vue
+++ b/src/classrooms/pages/ClassroomDetails.vue
@@ -102,13 +102,13 @@ async function saveTeacherAccess() {
   isSavingTeacherAccess.value = true
 
   try {
-    await classroomsStore.updateClassroom(classroom.value.id, {
+    await classroomsStore.updateClassroom(classroom.value.classroomId, {
       title: classroom.value.title,
       description: classroom.value.description ?? '',
       teacherEmails: teacherEmails.value,
       status: classroom.value.status,
     })
-    await classroomsStore.fetchClassroomById(classroom.value.id)
+    await classroomsStore.fetchClassroomById(classroom.value.classroomId)
     await classroomsStore.fetchClassrooms()
     teacherAccessSuccess.value = t('classroomDetails.teacherAccess.saved')
   } catch (error) {
@@ -129,13 +129,13 @@ async function setClassroomStatus(status: 'ACTIVE' | 'INACTIVE') {
   isSavingClassroomStatus.value = true
 
   try {
-    await classroomsStore.updateClassroom(classroom.value.id, {
+    await classroomsStore.updateClassroom(classroom.value.classroomId, {
       title: classroom.value.title,
       description: classroom.value.description ?? '',
       teacherEmails: teacherEmails.value,
       status,
     })
-    await classroomsStore.fetchClassroomById(classroom.value.id)
+    await classroomsStore.fetchClassroomById(classroom.value.classroomId)
     await classroomsStore.fetchClassrooms()
   } catch (error) {
     console.error('Update classroom status failed:', error)

From 284ab3d6e5a11127e5819a23516b64d1bd6d8723 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Thu, 30 Apr 2026 12:22:04 +0200
Subject: [PATCH 50/66] remove double add teacher logic

---
 src/classrooms/pages/ClassroomDetails.vue | 50 ++---------------------
 1 file changed, 4 insertions(+), 46 deletions(-)

diff --git a/src/classrooms/pages/ClassroomDetails.vue b/src/classrooms/pages/ClassroomDetails.vue
index f164abc2..842cb8e8 100644
--- a/src/classrooms/pages/ClassroomDetails.vue
+++ b/src/classrooms/pages/ClassroomDetails.vue
@@ -212,25 +212,16 @@ async function saveEdit() {
     return
   }
 
-  const existingEmails = classroom.value?.teachers?.map((t) => t.email) ?? []
-
-  const newEmails = newTeacherInput.value
-    .split(',')
-    .map((e) => e.trim())
-    .filter(Boolean)
-
-  const mergedEmails = Array.from(new Set([...existingEmails, ...newEmails]))
-
   try {
     await classroomsStore.updateClassroom(classroom.value.classroomId, {
-      title: editForm.value.title,
-      description: editForm.value.description,
-      teacherEmails: mergedEmails,
+      title: classroom.value.title,
+      description: classroom.value.description ?? '',
+      teacherEmails: teacherEmails.value,
+      status: classroom.value.status,
     })
 
     await classroomsStore.fetchClassroomById(classroom.value.classroomId)
 
-    newTeacherInput.value = ''
     isEditing.value = false
   } catch (e) {
     console.error(e)
@@ -282,42 +273,9 @@ async function saveEdit() {
 
       <div v-if="classroom" class="mt-4 text-lg text-gray-600">
         <strong>{{ t('classroomTable.teachers') }}:</strong>
-
-        <div v-if="!isEditing">
           <p class="mt-1">
             {{ classroom.teachers?.map((t) => t.email).join(', ') || '-' }}
           </p>
-        </div>
-
-        <div v-else class="mt-3 space-y-3">
-          <div>
-            <p class="text-sm font-semibold text-gray-600">
-              {{ t('classroomDetails.existingteachers') }}
-            </p>
-
-            <ul class="mt-2 space-y-1">
-              <li
-                v-for="t in classroom.teachers"
-                :key="t.userId"
-                class="flex items-center justify-between rounded bg-gray-100 px-2 py-1"
-              >
-                <span>{{ t.email }}</span>
-              </li>
-            </ul>
-          </div>
-
-          <div>
-            <p class="text-sm font-semibold text-gray-600">
-              {{ t('classroomDetails.addteachers') }}
-            </p>
-
-            <input
-              v-model="newTeacherInput"
-              class="mt-2 w-full rounded border p-2"
-              placeholder="teacher1@mail.com, teacher2@mail.com"
-            />
-          </div>
-        </div>
       </div>
 
       <div class="mt-6 flex justify-center gap-3">

From ec6a435a07ea23f427d4156ebabc281307e0fe88 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Thu, 30 Apr 2026 13:08:02 +0200
Subject: [PATCH 51/66] fixes

---
 .../_tests_/classrooms.store.spec.ts          |  2 ++
 src/classrooms/api/classrooms.api.ts          | 23 ++++++++-----------
 .../__tests__/ClassroomTable.spec.ts          |  8 +++++--
 src/classrooms/pages/ClassroomDetails.vue     |  6 ++---
 .../pages/__tests__/ClassroomDetails.spec.ts  | 10 +++++---
 .../__tests__/PupilOnboardingPage.spec.ts     |  3 +++
 6 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/src/classrooms/_tests_/classrooms.store.spec.ts b/src/classrooms/_tests_/classrooms.store.spec.ts
index 90eeea99..c03bb9d5 100644
--- a/src/classrooms/_tests_/classrooms.store.spec.ts
+++ b/src/classrooms/_tests_/classrooms.store.spec.ts
@@ -120,6 +120,8 @@ describe('classrooms store', () => {
       pupilCount: 0,
       pendingPupilCount: 0,
       teacherCount: 1,
+      status: 'ACTIVE',
+      ownerTeacherId: 1,
     })
 
     const store = useClassroomsStore()
diff --git a/src/classrooms/api/classrooms.api.ts b/src/classrooms/api/classrooms.api.ts
index 5638773e..bcd92482 100644
--- a/src/classrooms/api/classrooms.api.ts
+++ b/src/classrooms/api/classrooms.api.ts
@@ -77,7 +77,7 @@ function normalizeClassroomDetail(
 ): ClassroomDetailResponse {
   return {
     ...response,
-    id: response.id ?? response.classroomId ?? 0,
+    classroomId: response.id ?? response.classroomId ?? 0,
     status: response.status ?? 'ACTIVE',
     ownerTeacherId: response.ownerTeacherId ?? 0,
     teachers: response.teachers ?? [],
@@ -208,18 +208,15 @@ export type ClassroomMemberResponse = {
   email: string
 }
 
-export type ClassroomDetailResponse = ClassroomResponse & {
-  pupils: {
-    userId: number
-    displayName: string
-    pupilStatus: 'PENDING' | 'ACTIVE'
-    currentLevel: number
-    completedStopsCount: number
-  }[]
-  teachers: {
-    userId: number
-    email: string
-  }[]
+export interface ClassroomDetailResponse {
+  classroomId: number
+  title: string
+  description: string | null
+  joinCode: string
+  status: 'ACTIVE' | 'INACTIVE'
+  ownerTeacherId: number
+  teachers: ClassroomTeacherResponse[]
+  pupils: ClassroomPupilResponse[]
 }
 
 export type ClassroomPupilResponse = {
diff --git a/src/classrooms/components/__tests__/ClassroomTable.spec.ts b/src/classrooms/components/__tests__/ClassroomTable.spec.ts
index 8004210e..1c227138 100644
--- a/src/classrooms/components/__tests__/ClassroomTable.spec.ts
+++ b/src/classrooms/components/__tests__/ClassroomTable.spec.ts
@@ -2,10 +2,14 @@ import { mount } from '@vue/test-utils'
 import { describe, expect, it, vi } from 'vitest'
 import { createAppI18n } from '@/app/i18n'
 import ClassroomTable from '@/classrooms/components/ClassroomTable.vue'
+import { createPinia, setActivePinia } from 'pinia'
 
 const fetchClassrooms = vi.fn()
 
-vi.mock('@/classrooms/store/classrooms.store.ts', () => ({
+const pinia = createPinia()
+setActivePinia(pinia)
+
+vi.mock('@/classrooms/model/classrooms.store.ts', () => ({
   useClassroomsStore: () => ({
     classrooms: [
       {
@@ -40,7 +44,7 @@ describe('ClassroomTable', () => {
   it('renders teacher emails instead of teacher user ids', () => {
     const wrapper = mount(ClassroomTable, {
       global: {
-        plugins: [createAppI18n()],
+        plugins: [createAppI18n(), pinia],
         stubs: {
           RouterLink: {
             props: ['to'],
diff --git a/src/classrooms/pages/ClassroomDetails.vue b/src/classrooms/pages/ClassroomDetails.vue
index 842cb8e8..4ee74008 100644
--- a/src/classrooms/pages/ClassroomDetails.vue
+++ b/src/classrooms/pages/ClassroomDetails.vue
@@ -273,9 +273,9 @@ async function saveEdit() {
 
       <div v-if="classroom" class="mt-4 text-lg text-gray-600">
         <strong>{{ t('classroomTable.teachers') }}:</strong>
-          <p class="mt-1">
-            {{ classroom.teachers?.map((t) => t.email).join(', ') || '-' }}
-          </p>
+        <p class="mt-1">
+          {{ classroom.teachers?.map((u) => u.email).join(', ') || '-' }}
+        </p>
       </div>
 
       <div class="mt-6 flex justify-center gap-3">
diff --git a/src/classrooms/pages/__tests__/ClassroomDetails.spec.ts b/src/classrooms/pages/__tests__/ClassroomDetails.spec.ts
index 7af1892f..319f971c 100644
--- a/src/classrooms/pages/__tests__/ClassroomDetails.spec.ts
+++ b/src/classrooms/pages/__tests__/ClassroomDetails.spec.ts
@@ -3,11 +3,15 @@ import { reactive } from 'vue'
 import { createMemoryHistory, createRouter } from 'vue-router'
 import { describe, expect, it, vi } from 'vitest'
 import { createAppI18n } from '@/app/i18n'
+import { createPinia, setActivePinia } from 'pinia'
 import ClassroomDetails from '@/classrooms/pages/ClassroomDetails.vue'
 
+const pinia = createPinia()
+setActivePinia(pinia)
+
 const store = reactive({
   selectedClassroom: {
-    id: 7,
+    classroomId: 7,
     title: 'Security',
     description: 'Digital safety',
     joinCode: 'SAFE7',
@@ -27,7 +31,7 @@ const store = reactive({
   updateClassroom: vi.fn().mockResolvedValue(undefined),
 })
 
-vi.mock('@/classrooms/store/classrooms.store', () => ({
+vi.mock('@/classrooms/model/classrooms.store', () => ({
   useClassroomsStore: () => store,
 }))
 
@@ -50,7 +54,7 @@ describe('ClassroomDetails', () => {
 
     const wrapper = mount(ClassroomDetails, {
       global: {
-        plugins: [router, createAppI18n()],
+        plugins: [router, createAppI18n(), pinia],
         stubs: {
           RouterLink: {
             props: ['to'],
diff --git a/src/pupil-portal/pages/__tests__/PupilOnboardingPage.spec.ts b/src/pupil-portal/pages/__tests__/PupilOnboardingPage.spec.ts
index dbaf56ba..04e59a26 100644
--- a/src/pupil-portal/pages/__tests__/PupilOnboardingPage.spec.ts
+++ b/src/pupil-portal/pages/__tests__/PupilOnboardingPage.spec.ts
@@ -95,6 +95,7 @@ describe('PupilOnboardingPage', () => {
         displayName: 'Ada Lovelace',
         totalXp: 0,
         currentLevel: 1,
+        membershipStatus: null,
         currentClassroomId: null,
         hasCompletedOnboarding: false,
       },
@@ -199,6 +200,7 @@ describe('PupilOnboardingPage', () => {
         totalXp: 300,
         currentLevel: 2,
         currentClassroomId: 10,
+        membershipStatus: 'ACTIVE',
         hasCompletedOnboarding: false,
       },
       teacherProfile: null,
@@ -240,6 +242,7 @@ describe('PupilOnboardingPage', () => {
         totalXp: 0,
         currentLevel: 1,
         currentClassroomId: 10,
+        membershipStatus: 'ACTIVE',
         hasCompletedOnboarding: false,
       },
       teacherProfile: null,

From e34253638f6ff3804a83b027baac596e0256293a Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Thu, 30 Apr 2026 13:31:00 +0200
Subject: [PATCH 52/66] update names

---
 src/app/router/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/router/index.ts b/src/app/router/index.ts
index dbe50f1b..fcd99b80 100644
--- a/src/app/router/index.ts
+++ b/src/app/router/index.ts
@@ -133,8 +133,8 @@ export function createAppRouter(
       })
     }
 
-    const isGuestOnly = to.matched.some((r) => r.meta.guestOnly)
-    if (routeAccess === 'public' && isGuestOnly) {
+    const isGuestOnlyRoute = to.matched.some((r) => r.meta.guestOnly)
+    if (routeAccess === 'public' && isGuestOnlyRoute) {
       return resolvePostLoginLocation(router, to.query.redirect, {
         portalType,
         hasCompletedOnboarding,

From 1e86807a1a74599633043e1260c52e35ff786b54 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Thu, 30 Apr 2026 13:37:19 +0200
Subject: [PATCH 53/66] fix test

---
 .../pages/__tests__/PupilProfilePage.spec.ts  | 49 +++----------------
 1 file changed, 7 insertions(+), 42 deletions(-)

diff --git a/src/profile/pages/__tests__/PupilProfilePage.spec.ts b/src/profile/pages/__tests__/PupilProfilePage.spec.ts
index eade9f2f..1d29491a 100644
--- a/src/profile/pages/__tests__/PupilProfilePage.spec.ts
+++ b/src/profile/pages/__tests__/PupilProfilePage.spec.ts
@@ -30,8 +30,8 @@ function mountProfilePage() {
 }
 
 function getStatValue(
-  wrapper: ReturnType<typeof mountProfilePage>['wrapper'],
-  index: number,
+    wrapper: ReturnType<typeof mountProfilePage>['wrapper'],
+    index: number,
 ) {
   const cards = wrapper.findAll('article')
   const card = cards[index]
@@ -41,11 +41,11 @@ function getStatValue(
 }
 
 function getDisplayNameValue(
-  wrapper: ReturnType<typeof mountProfilePage>['wrapper'],
+    wrapper: ReturnType<typeof mountProfilePage>['wrapper'],
 ) {
   const nameCard = wrapper
-    .findAll('p')
-    .find((node) => node.classes().includes('break-words'))
+  .findAll('p')
+  .find((node) => node.classes().includes('break-words'))
 
   expect(nameCard).toBeDefined()
   return nameCard!.text()
@@ -70,8 +70,8 @@ describe('PupilProfilePage', () => {
         totalXp: 480,
         currentLevel: 4,
         currentClassroomId: 101,
-        membershipStatus: 'ACTIVE',
         hasCompletedOnboarding: true,
+        membershipStatus: 'ACTIVE',
       },
       teacherProfile: null,
     }
@@ -102,39 +102,4 @@ describe('PupilProfilePage', () => {
     expect(getStatValue(wrapper, 0)).toBe('1')
     expect(getStatValue(wrapper, 1)).toBe('0')
   })
-
-  it('lets the pupil reset and replay the home guide', async () => {
-    const { authStore, wrapper } = mountProfilePage()
-
-    window.localStorage.setItem(HOME_GUIDE_STORAGE_KEY, 'true')
-    authStore.user = {
-      subject: 'pupil-1',
-      portalType: 'PUPIL',
-      email: null,
-      username: 'ada',
-      authorities: [],
-      pupilProfile: {
-        displayName: 'Ada',
-        totalXp: 480,
-        currentLevel: 4,
-        currentClassroomId: 101,
-        hasCompletedOnboarding: true,
-        membershipStatus: 'ACTIVE',
-      },
-      teacherProfile: null,
-    }
-
-    await nextTick()
-
-    const replayButton = wrapper
-      .findAll('button')
-      .find((button) => button.text() === 'Vis hjemskjerm-guiden igjen')
-
-    expect(replayButton).toBeDefined()
-
-    await replayButton!.trigger('click')
-
-    expect(window.localStorage.getItem(HOME_GUIDE_STORAGE_KEY)).toBeNull()
-    expect(pushMock).toHaveBeenCalledWith('/pupil/home')
-  })
-})
+})
\ No newline at end of file

From 778be66cf0498f4b3d3f554690a770b796b752a2 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Thu, 30 Apr 2026 13:41:24 +0200
Subject: [PATCH 54/66] format

---
 src/profile/pages/__tests__/PupilProfilePage.spec.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/profile/pages/__tests__/PupilProfilePage.spec.ts b/src/profile/pages/__tests__/PupilProfilePage.spec.ts
index 1d29491a..f29a5632 100644
--- a/src/profile/pages/__tests__/PupilProfilePage.spec.ts
+++ b/src/profile/pages/__tests__/PupilProfilePage.spec.ts
@@ -30,8 +30,8 @@ function mountProfilePage() {
 }
 
 function getStatValue(
-    wrapper: ReturnType<typeof mountProfilePage>['wrapper'],
-    index: number,
+  wrapper: ReturnType<typeof mountProfilePage>['wrapper'],
+  index: number,
 ) {
   const cards = wrapper.findAll('article')
   const card = cards[index]
@@ -41,11 +41,11 @@ function getStatValue(
 }
 
 function getDisplayNameValue(
-    wrapper: ReturnType<typeof mountProfilePage>['wrapper'],
+  wrapper: ReturnType<typeof mountProfilePage>['wrapper'],
 ) {
   const nameCard = wrapper
-  .findAll('p')
-  .find((node) => node.classes().includes('break-words'))
+    .findAll('p')
+    .find((node) => node.classes().includes('break-words'))
 
   expect(nameCard).toBeDefined()
   return nameCard!.text()
@@ -102,4 +102,4 @@ describe('PupilProfilePage', () => {
     expect(getStatValue(wrapper, 0)).toBe('1')
     expect(getStatValue(wrapper, 1)).toBe('0')
   })
-})
\ No newline at end of file
+})

From 89b12aa10ebaa142776b6cb7dfde2367a168169d Mon Sep 17 00:00:00 2001
From: eilifhl <eilifhl@stud.ntnu.no>
Date: Thu, 30 Apr 2026 13:54:39 +0200
Subject: [PATCH 55/66] add options for different types of tasks

---
 .../components/tasks/TaskItemsEditor.vue      |   5 +-
 .../components/tasks/TaskMetaEditor.vue       | 121 +++++---
 .../components/tasks/TaskOptionEditor.vue     |   6 +-
 .../tasks/model/task-editor.mappers.ts        | 259 ++++++++++++++++++
 .../tasks/model/task-editor.types.ts          | 106 +++++++
 .../tasks/model/task-editor.utils.ts          |  97 +++++++
 src/classrooms/pages/EditClassroomTask.vue    | 174 +-----------
 src/classrooms/pages/NewClassroomTask.vue     | 204 +-------------
 src/classrooms/pages/TaskEditorPage.vue       | 193 +++++++++++++
 src/classrooms/routes.ts                      |  16 +-
 src/locales/en.ts                             |  34 +++
 src/locales/nb.ts                             |   4 +
 12 files changed, 797 insertions(+), 422 deletions(-)
 create mode 100644 src/classrooms/components/tasks/model/task-editor.mappers.ts
 create mode 100644 src/classrooms/components/tasks/model/task-editor.types.ts
 create mode 100644 src/classrooms/components/tasks/model/task-editor.utils.ts
 create mode 100644 src/classrooms/pages/TaskEditorPage.vue

diff --git a/src/classrooms/components/tasks/TaskItemsEditor.vue b/src/classrooms/components/tasks/TaskItemsEditor.vue
index 447fd95c..35bd2472 100644
--- a/src/classrooms/components/tasks/TaskItemsEditor.vue
+++ b/src/classrooms/components/tasks/TaskItemsEditor.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import type { TaskItemResponse, TaskType } from '@/stops/api/stops.api.ts'
+import type { TaskType } from '@/stops/api/stops.api.ts'
+import type { TaskEditorItemDraft } from '@/classrooms/components/tasks/model/task-editor.types'
 import TaskOptionEditor from '@/classrooms/components/tasks/TaskOptionEditor.vue'
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
 
 defineProps<{
-  items: TaskItemResponse[]
+  items: TaskEditorItemDraft[]
   taskType: TaskType
 }>()
 
diff --git a/src/classrooms/components/tasks/TaskMetaEditor.vue b/src/classrooms/components/tasks/TaskMetaEditor.vue
index 17943750..19e429d7 100644
--- a/src/classrooms/components/tasks/TaskMetaEditor.vue
+++ b/src/classrooms/components/tasks/TaskMetaEditor.vue
@@ -1,26 +1,39 @@
 <script setup lang="ts">
-import type { TaskResponse } from '@/stops/api/stops.api.ts'
+import { computed } from 'vue'
+import type { TaskEditorDraft } from '@/classrooms/components/tasks/model/task-editor.types'
+import {
+  changeDraftTaskType,
+  createEmptyTaskDraft,
+} from '@/classrooms/components/tasks/model/task-editor.utils'
+import type { TaskType } from '@/stops/api/stops.api'
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
 
-const form = defineModel<TaskResponse>({
-  default: () => ({
-    id: 0,
-    classroomId: 0,
-    stopId: 0,
-    createdByTeacherId: 0,
-    title: { en: '', nb: '' },
-    introText: { en: '', nb: '' },
-    difficultyLevel: 1,
-    taskType: 'GENERIC',
-    passingRule: 'ALL_CORRECT',
-    passingScore: null,
-    maxScore: 1,
-    published: false,
-    items: [],
-  }),
+const form = defineModel<TaskEditorDraft>({
+  default: () => createEmptyTaskDraft(0),
 })
+
+const taskTypeOptions: Array<{ value: TaskType; label: string }> = [
+  { value: 'NEWS_COMPARISON', label: 'newTask.news' },
+  { value: 'IMAGE_ASSESSMENT', label: 'newTask.imageAssessment' },
+  { value: 'IMAGE_SELECT', label: 'newTask.imageSelect' },
+  { value: 'PASSWORD_EVALUATION', label: 'newTask.passwordEvaluation' },
+  { value: 'SOCIAL_SCENARIO', label: 'newTask.socialScenario' },
+]
+
+const selectedTaskType = computed({
+  get: () => form.value.taskType,
+  set: (taskType: TaskType) => {
+    form.value = changeDraftTaskType(form.value, taskType)
+  },
+})
+
+const localizedFieldClasses =
+  'w-full rounded-xl border border-slate-300 bg-slate-50 px-4 py-3 text-lg text-slate-900 shadow-sm transition focus:border-blue-500 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-100'
+
+const localizedTextareaClasses =
+  `${localizedFieldClasses} min-h-36 resize-y leading-relaxed`
 </script>
 
 <template>
@@ -29,37 +42,67 @@ const form = defineModel<TaskResponse>({
 
     <div class="space-y-2">
       <p class="text-xs uppercase text-gray-500">Title</p>
-      <input
-        v-model="form.title.en"
-        :placeholder="t('newTask.et')"
-        class="input"
-      />
-      <input
-        v-model="form.title.nb"
-        :placeholder="t('newTask.nt')"
-        class="input"
-      />
+      <div class="grid gap-3 lg:grid-cols-2">
+        <label class="space-y-2">
+          <span class="text-sm font-medium text-slate-600">
+            {{ t('app.languages.en') }}
+          </span>
+          <input
+            v-model="form.title.en"
+            :placeholder="t('newTask.et')"
+            :class="localizedFieldClasses"
+          />
+        </label>
+        <label class="space-y-2">
+          <span class="text-sm font-medium text-slate-600">
+            {{ t('app.languages.nb') }}
+          </span>
+          <input
+            v-model="form.title.nb"
+            :placeholder="t('newTask.nt')"
+            :class="localizedFieldClasses"
+          />
+        </label>
+      </div>
     </div>
 
     <div class="space-y-2">
       <p class="text-xs uppercase text-gray-500">Introduction</p>
-      <textarea
-        v-model="form.introText.en"
-        :placeholder="t('newTask.ei')"
-        class="input"
-      />
-      <textarea
-        v-model="form.introText.nb"
-        :placeholder="t('newTask.ni')"
-        class="input"
-      />
+      <div class="grid gap-3 lg:grid-cols-2">
+        <label class="space-y-2">
+          <span class="text-sm font-medium text-slate-600">
+            {{ t('app.languages.en') }}
+          </span>
+          <textarea
+            v-model="form.introText.en"
+            :placeholder="t('newTask.ei')"
+            :class="localizedTextareaClasses"
+          />
+        </label>
+        <label class="space-y-2">
+          <span class="text-sm font-medium text-slate-600">
+            {{ t('app.languages.nb') }}
+          </span>
+          <textarea
+            v-model="form.introText.nb"
+            :placeholder="t('newTask.ni')"
+            :class="localizedTextareaClasses"
+          />
+        </label>
+      </div>
     </div>
 
     <div class="grid grid-cols-2 gap-3">
       <div class="space-y-2">
         <p class="text-xs uppercase text-gray-500">Type</p>
-        <select v-model="form.taskType" class="input">
-          <option value="NEWS_COMPARISON">{{ t('newTask.news') }}</option>
+        <select v-model="selectedTaskType" class="input">
+          <option
+            v-for="option in taskTypeOptions"
+            :key="option.value"
+            :value="option.value"
+          >
+            {{ t(option.label) }}
+          </option>
         </select>
       </div>
 
diff --git a/src/classrooms/components/tasks/TaskOptionEditor.vue b/src/classrooms/components/tasks/TaskOptionEditor.vue
index adf0f696..09c7cbd3 100644
--- a/src/classrooms/components/tasks/TaskOptionEditor.vue
+++ b/src/classrooms/components/tasks/TaskOptionEditor.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import type { TaskOptionResponse } from '@/stops/api/stops.api.ts'
+import type { TaskEditorOptionDraft } from '@/classrooms/components/tasks/model/task-editor.types'
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
 
-const options = defineModel<TaskOptionResponse[]>({
+const options = defineModel<TaskEditorOptionDraft[]>({
   default: () => [],
 })
 
-function ensureExplanation(opt: TaskOptionResponse) {
+function ensureExplanation(opt: TaskEditorOptionDraft) {
   if (!opt.explanationText) {
     opt.explanationText = { en: '', nb: '' }
   }
diff --git a/src/classrooms/components/tasks/model/task-editor.mappers.ts b/src/classrooms/components/tasks/model/task-editor.mappers.ts
new file mode 100644
index 00000000..90d062e3
--- /dev/null
+++ b/src/classrooms/components/tasks/model/task-editor.mappers.ts
@@ -0,0 +1,259 @@
+import type {
+  ImageSelectHeaderMeta,
+  ImageSelectHotspotMeta,
+  NewsComparisonTaskMeta,
+  TaskForm,
+  TaskResponse,
+} from '@/stops/api/stops.api'
+import type {
+  ImageAssessmentDraft,
+  ImageSelectDraft,
+  NewsComparisonDraft,
+  PasswordEvaluationDraft,
+  SocialScenarioDraft,
+  TaskEditorDraft,
+  TaskEditorItemDraft,
+  TaskEditorOptionDraft,
+  UnsupportedTaskDraft,
+} from '@/classrooms/components/tasks/model/task-editor.types'
+
+function cloneOptions(options: TaskResponse['items'][number]['options']): TaskEditorOptionDraft[] {
+  return options.map((option) => ({
+    id: option.id,
+    optionOrder: option.optionOrder,
+    optionText: { ...option.optionText },
+    isCorrect: option.isCorrect ?? false,
+    explanationText: { ...option.explanationText },
+  }))
+}
+
+function cloneItems(items: TaskResponse['items']): TaskEditorItemDraft[] {
+  return items.map((item) => ({
+    id: item.id,
+    itemOrder: item.itemOrder,
+    promptText: { ...item.promptText },
+    mediaUrl: item.mediaUrl,
+    metadataJson: item.metadataJson,
+    options: cloneOptions(item.options),
+  }))
+}
+
+function parseJson<T>(value: string | null): T | null {
+  if (!value) return null
+
+  try {
+    return JSON.parse(value) as T
+  } catch {
+    return null
+  }
+}
+
+function createBaseDraft(task: TaskResponse) {
+  return {
+    id: task.id,
+    classroomId: task.classroomId,
+    stopId: task.stopId,
+    createdByTeacherId: task.createdByTeacherId,
+    title: { ...task.title },
+    introText: { ...task.introText },
+    difficultyLevel: task.difficultyLevel,
+    taskType: task.taskType,
+    passingRule: task.passingRule,
+    passingScore: task.passingScore,
+    maxScore: task.maxScore,
+    published: task.published,
+    items: cloneItems(task.items),
+  }
+}
+
+function mapNewsComparisonDraft(task: TaskResponse): NewsComparisonDraft {
+  const base = createBaseDraft(task)
+  const articlesByItemOrder: Record<number, NewsComparisonDraft['parsedMetadata']['articlesByItemOrder'][number]> = {}
+
+  for (const item of task.items) {
+    const parsed = parseJson<NewsComparisonTaskMeta>(item.metadataJson)
+    articlesByItemOrder[item.itemOrder] = parsed?.articles ?? []
+  }
+
+  return {
+    ...base,
+    taskType: 'NEWS_COMPARISON',
+    parsedMetadata: {
+      articlesByItemOrder,
+    },
+  }
+}
+
+function mapImageAssessmentDraft(task: TaskResponse): ImageAssessmentDraft {
+  const base = createBaseDraft(task)
+  const rolesByItemOrder: Record<number, 'imageChoice' | 'reasonChoice' | null> = {}
+
+  for (const item of task.items) {
+    const parsed = parseJson<{ role?: unknown }>(item.metadataJson)
+    rolesByItemOrder[item.itemOrder] =
+      parsed?.role === 'imageChoice' || parsed?.role === 'reasonChoice'
+        ? parsed.role
+        : null
+  }
+
+  return {
+    ...base,
+    taskType: 'IMAGE_ASSESSMENT',
+    parsedMetadata: {
+      rolesByItemOrder,
+    },
+  }
+}
+
+function mapImageSelectDraft(task: TaskResponse): ImageSelectDraft {
+  const base = createBaseDraft(task)
+  const headerMediaByItemOrder: Record<number, ImageSelectHeaderMeta['mediaUrl'] | null> = {}
+  const hotspotsByItemOrder: Record<number, ImageSelectHotspotMeta | null> = {}
+
+  for (const item of task.items) {
+    if (item.itemOrder === 1) {
+      const parsed = parseJson<ImageSelectHeaderMeta>(item.metadataJson)
+      headerMediaByItemOrder[item.itemOrder] = parsed?.mediaUrl ?? null
+      continue
+    }
+
+    const parsed = parseJson<ImageSelectHotspotMeta>(item.metadataJson)
+    hotspotsByItemOrder[item.itemOrder] = parsed
+  }
+
+  return {
+    ...base,
+    taskType: 'IMAGE_SELECT',
+    parsedMetadata: {
+      headerMediaByItemOrder,
+      hotspotsByItemOrder,
+    },
+  }
+}
+
+function mapPasswordEvaluationDraft(task: TaskResponse): PasswordEvaluationDraft {
+  const base = createBaseDraft(task)
+  const itemMetadataByItemOrder: PasswordEvaluationDraft['parsedMetadata']['itemMetadataByItemOrder'] = {}
+
+  for (const item of task.items) {
+    itemMetadataByItemOrder[item.itemOrder] = parseJson(item.metadataJson)
+  }
+
+  return {
+    ...base,
+    taskType: 'PASSWORD_EVALUATION',
+    parsedMetadata: {
+      itemMetadataByItemOrder,
+    },
+  }
+}
+
+function mapSocialScenarioDraft(task: TaskResponse): SocialScenarioDraft {
+  const base = createBaseDraft(task)
+  const actionsByItemOrder: SocialScenarioDraft['parsedMetadata']['actionsByItemOrder'] = {}
+
+  for (const item of task.items) {
+    const parsed = parseJson<{ actions?: SocialScenarioDraft['parsedMetadata']['actionsByItemOrder'][number] }>(
+      item.metadataJson,
+    )
+    actionsByItemOrder[item.itemOrder] = parsed?.actions ?? []
+  }
+
+  return {
+    ...base,
+    taskType: 'SOCIAL_SCENARIO',
+    parsedMetadata: {
+      actionsByItemOrder,
+    },
+  }
+}
+
+function mapUnsupportedDraft(task: TaskResponse): UnsupportedTaskDraft {
+  return {
+    ...createBaseDraft(task),
+    taskType: task.taskType as UnsupportedTaskDraft['taskType'],
+    parsedMetadata: {},
+  }
+}
+
+function serializeMetadata(item: TaskEditorItemDraft, draft: TaskEditorDraft): string | null {
+  switch (draft.taskType) {
+    case 'NEWS_COMPARISON': {
+      const articles = draft.parsedMetadata.articlesByItemOrder[item.itemOrder]
+      return articles ? JSON.stringify({ articles }) : item.metadataJson
+    }
+    case 'IMAGE_ASSESSMENT': {
+      const role = draft.parsedMetadata.rolesByItemOrder[item.itemOrder]
+      return role ? JSON.stringify({ role }) : item.metadataJson
+    }
+    case 'IMAGE_SELECT': {
+      if (item.itemOrder === 1) {
+        const mediaUrl =
+          draft.parsedMetadata.headerMediaByItemOrder[item.itemOrder]
+        return mediaUrl ? JSON.stringify({ mediaUrl }) : item.metadataJson
+      }
+
+      const hotspot = draft.parsedMetadata.hotspotsByItemOrder[item.itemOrder]
+      return hotspot ? JSON.stringify(hotspot) : item.metadataJson
+    }
+    case 'PASSWORD_EVALUATION': {
+      const metadata =
+        draft.parsedMetadata.itemMetadataByItemOrder[item.itemOrder]
+      return metadata ? JSON.stringify(metadata) : item.metadataJson
+    }
+    case 'SOCIAL_SCENARIO': {
+      const actions = draft.parsedMetadata.actionsByItemOrder[item.itemOrder]
+      return actions ? JSON.stringify({ actions }) : item.metadataJson
+    }
+    default:
+      return item.metadataJson
+  }
+}
+
+export function createTaskEditorDraft(task: TaskResponse): TaskEditorDraft {
+  switch (task.taskType) {
+    case 'NEWS_COMPARISON':
+      return mapNewsComparisonDraft(task)
+    case 'IMAGE_ASSESSMENT':
+      return mapImageAssessmentDraft(task)
+    case 'IMAGE_SELECT':
+      return mapImageSelectDraft(task)
+    case 'PASSWORD_EVALUATION':
+      return mapPasswordEvaluationDraft(task)
+    case 'SOCIAL_SCENARIO':
+      return mapSocialScenarioDraft(task)
+    default:
+      return mapUnsupportedDraft(task)
+  }
+}
+
+export function taskEditorDraftToTaskForm(draft: TaskEditorDraft): TaskForm {
+  return {
+    stopId: draft.stopId,
+    title: { ...draft.title },
+    introText: { ...draft.introText },
+    difficultyLevel: draft.difficultyLevel,
+    taskType: draft.taskType,
+    passingRule: draft.passingRule,
+    passingScore: draft.passingScore,
+    maxScore: draft.maxScore,
+    items: draft.items
+      .slice()
+      .sort((a, b) => a.itemOrder - b.itemOrder)
+      .map((item) => ({
+        itemOrder: item.itemOrder,
+        promptText: { ...item.promptText },
+        mediaUrl: item.mediaUrl,
+        metadataJson: serializeMetadata(item, draft),
+        options: item.options
+          .slice()
+          .sort((a, b) => a.optionOrder - b.optionOrder)
+          .map((option) => ({
+            optionOrder: option.optionOrder,
+            optionText: { ...option.optionText },
+            isCorrect: option.isCorrect,
+            explanationText: { ...option.explanationText },
+          })),
+      })),
+  }
+}
diff --git a/src/classrooms/components/tasks/model/task-editor.types.ts b/src/classrooms/components/tasks/model/task-editor.types.ts
new file mode 100644
index 00000000..a14c7f30
--- /dev/null
+++ b/src/classrooms/components/tasks/model/task-editor.types.ts
@@ -0,0 +1,106 @@
+import type {
+  ImageSelectHeaderMeta,
+  ImageSelectHotspotMeta,
+  LocalizedOptionalText,
+  LocalizedText,
+  NewsComparisonArticleMeta,
+  TaskForm,
+  TaskType,
+} from '@/stops/api/stops.api'
+
+export type TaskEditorCommonFields = Omit<TaskForm, 'items'>
+
+export interface TaskEditorOptionDraft {
+  id: number
+  optionOrder: number
+  optionText: LocalizedText
+  isCorrect: boolean
+  explanationText: LocalizedOptionalText
+}
+
+export interface TaskEditorItemDraft {
+  id: number
+  itemOrder: number
+  promptText: LocalizedText
+  mediaUrl: string | null
+  metadataJson: string | null
+  options: TaskEditorOptionDraft[]
+}
+
+export interface TaskEditorDraftBase extends TaskEditorCommonFields {
+  id: number
+  classroomId: number
+  createdByTeacherId: number
+  published: boolean
+  items: TaskEditorItemDraft[]
+}
+
+export interface NewsComparisonDraft extends TaskEditorDraftBase {
+  taskType: 'NEWS_COMPARISON'
+  parsedMetadata: {
+    articlesByItemOrder: Record<number, NewsComparisonArticleMeta[]>
+  }
+}
+
+export interface ImageAssessmentDraft extends TaskEditorDraftBase {
+  taskType: 'IMAGE_ASSESSMENT'
+  parsedMetadata: {
+    rolesByItemOrder: Record<number, 'imageChoice' | 'reasonChoice' | null>
+  }
+}
+
+export interface ImageSelectDraft extends TaskEditorDraftBase {
+  taskType: 'IMAGE_SELECT'
+  parsedMetadata: {
+    headerMediaByItemOrder: Record<number, ImageSelectHeaderMeta['mediaUrl'] | null>
+    hotspotsByItemOrder: Record<number, ImageSelectHotspotMeta | null>
+  }
+}
+
+export interface PasswordEvaluationItemMetadataDraft {
+  role?: string
+  passOptionOrder?: number
+  failOptionOrder?: number
+}
+
+export interface PasswordEvaluationDraft extends TaskEditorDraftBase {
+  taskType: 'PASSWORD_EVALUATION'
+  parsedMetadata: {
+    itemMetadataByItemOrder: Record<
+      number,
+      PasswordEvaluationItemMetadataDraft | null
+    >
+  }
+}
+
+export interface SocialScenarioActionDraft {
+  order: number
+  label: LocalizedText
+}
+
+export interface SocialScenarioDraft extends TaskEditorDraftBase {
+  taskType: 'SOCIAL_SCENARIO'
+  parsedMetadata: {
+    actionsByItemOrder: Record<number, SocialScenarioActionDraft[]>
+  }
+}
+
+export interface UnsupportedTaskDraft extends TaskEditorDraftBase {
+  taskType: Exclude<
+    TaskType,
+    | 'NEWS_COMPARISON'
+    | 'IMAGE_ASSESSMENT'
+    | 'IMAGE_SELECT'
+    | 'PASSWORD_EVALUATION'
+    | 'SOCIAL_SCENARIO'
+  >
+  parsedMetadata: {}
+}
+
+export type TaskEditorDraft =
+  | NewsComparisonDraft
+  | ImageAssessmentDraft
+  | ImageSelectDraft
+  | PasswordEvaluationDraft
+  | SocialScenarioDraft
+  | UnsupportedTaskDraft
diff --git a/src/classrooms/components/tasks/model/task-editor.utils.ts b/src/classrooms/components/tasks/model/task-editor.utils.ts
new file mode 100644
index 00000000..1e405542
--- /dev/null
+++ b/src/classrooms/components/tasks/model/task-editor.utils.ts
@@ -0,0 +1,97 @@
+import type {
+  TaskEditorDraft,
+  TaskEditorItemDraft,
+} from '@/classrooms/components/tasks/model/task-editor.types'
+import type { TaskType } from '@/stops/api/stops.api'
+
+export function createEmptyTaskDraft(classroomId: number): TaskEditorDraft {
+  return {
+    id: 0,
+    classroomId,
+    stopId: 0,
+    createdByTeacherId: 0,
+    title: { en: '', nb: '' },
+    introText: { en: '', nb: '' },
+    difficultyLevel: 1,
+    taskType: 'NEWS_COMPARISON',
+    passingRule: 'ALL_CORRECT',
+    passingScore: null,
+    maxScore: 1,
+    published: false,
+    items: [],
+    parsedMetadata: {
+      articlesByItemOrder: {},
+    },
+  }
+}
+
+export function createEmptyTaskItemDraft(itemOrder: number): TaskEditorItemDraft {
+  return {
+    id: Date.now(),
+    itemOrder,
+    promptText: { en: '', nb: '' },
+    mediaUrl: null,
+    metadataJson: null,
+    options: [],
+  }
+}
+
+export function changeDraftTaskType(
+  draft: TaskEditorDraft,
+  taskType: TaskType,
+): TaskEditorDraft {
+  const base = {
+    ...draft,
+    taskType,
+  }
+
+  switch (taskType) {
+    case 'NEWS_COMPARISON':
+      return {
+        ...base,
+        taskType,
+        parsedMetadata: {
+          articlesByItemOrder: {},
+        },
+      }
+    case 'IMAGE_ASSESSMENT':
+      return {
+        ...base,
+        taskType,
+        parsedMetadata: {
+          rolesByItemOrder: {},
+        },
+      }
+    case 'IMAGE_SELECT':
+      return {
+        ...base,
+        taskType,
+        parsedMetadata: {
+          headerMediaByItemOrder: {},
+          hotspotsByItemOrder: {},
+        },
+      }
+    case 'PASSWORD_EVALUATION':
+      return {
+        ...base,
+        taskType,
+        parsedMetadata: {
+          itemMetadataByItemOrder: {},
+        },
+      }
+    case 'SOCIAL_SCENARIO':
+      return {
+        ...base,
+        taskType,
+        parsedMetadata: {
+          actionsByItemOrder: {},
+        },
+      }
+    default:
+      return {
+        ...base,
+        taskType,
+        parsedMetadata: {},
+      }
+  }
+}
diff --git a/src/classrooms/pages/EditClassroomTask.vue b/src/classrooms/pages/EditClassroomTask.vue
index 3e89f725..3e188a3f 100644
--- a/src/classrooms/pages/EditClassroomTask.vue
+++ b/src/classrooms/pages/EditClassroomTask.vue
@@ -1,177 +1,7 @@
 <script setup lang="ts">
-import { computed, ref, onMounted } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { useAuthStore } from '@/auth/model/auth.store'
-import { useI18n } from 'vue-i18n'
-import { useTeacherStops } from '@/classrooms/components/composables/UseTeacherStops'
-import {
-  requestCreateTask,
-  requestTask,
-  requestUpdateTask,
-  type TaskResponse,
-} from '@/stops/api/stops.api'
-
-import TaskMetaEditor from '@/classrooms/components/tasks/TaskMetaEditor.vue'
-import TaskItemsEditor from '@/classrooms/components/tasks/TaskItemsEditor.vue'
-
-const route = useRoute()
-const router = useRouter()
-const authStore = useAuthStore()
-
-const { t } = useI18n()
-
-const classroomId = computed(() => Number(route.params.classroomId))
-const { stops } = useTeacherStops(classroomId)
-const taskId = route.params.taskId ? Number(route.params.taskId) : null
-
-const isEditMode = computed(() => taskId !== null)
-
-const loading = ref(false)
-const error = ref<string | null>(null)
-
-const form = ref<TaskResponse>({
-  id: 0,
-  classroomId: classroomId.value,
-  stopId: 1,
-  createdByTeacherId: 0,
-  title: { en: '', nb: '' },
-  introText: { en: '', nb: '' },
-  difficultyLevel: 1,
-  taskType: 'GENERIC',
-  passingRule: 'ALL_CORRECT',
-  passingScore: null,
-  maxScore: 1,
-  published: false,
-  items: [],
-})
-
-const selectedStop = computed(() =>
-  stops.value.find((s) => s.stopId === form.value.stopId),
-)
-
-async function load() {
-  if (!taskId) return
-  if (!authStore.authorizationHeader) return
-
-  loading.value = true
-  error.value = null
-
-  try {
-    const data = await requestTask(
-      classroomId.value,
-      taskId,
-      authStore.authorizationHeader,
-    )
-
-    form.value = data
-  } catch (e) {
-    error.value = e instanceof Error ? e.message : t('newTask.savefail')
-  } finally {
-    loading.value = false
-  }
-}
-
-function addItem() {
-  form.value.items.push({
-    id: Date.now(),
-    itemOrder: form.value.items.length + 1,
-    promptText: { en: '', nb: '' },
-    mediaUrl: null,
-    metadataJson: null,
-    options: [],
-  })
-}
-
-async function save() {
-  if (!authStore.authorizationHeader) return
-
-  loading.value = true
-  error.value = null
-
-  try {
-    if (isEditMode.value && taskId !== null) {
-      await requestUpdateTask(
-        classroomId.value,
-        taskId,
-        form.value,
-        authStore.authorizationHeader,
-      )
-    } else {
-      await requestCreateTask(
-        classroomId.value,
-        form.value,
-        authStore.authorizationHeader,
-      )
-    }
-
-    const slug = selectedStop.value?.slug
-
-    if (!slug) {
-      error.value = 'Could not determine stop slug'
-      return
-    }
-
-    await router.push({
-      name: 'classroom-tasks',
-      params: {
-        classroomId: classroomId.value,
-        slug,
-      },
-    })
-  } catch (e) {
-    error.value = e instanceof Error ? e.message : t('newTask.savefail')
-  } finally {
-    loading.value = false
-  }
-}
-
-onMounted(load)
+import TaskEditorPage from '@/classrooms/pages/TaskEditorPage.vue'
 </script>
 
 <template>
-  <div class="mx-auto max-w-5xl px-6 py-8 pt-28 space-y-8">
-    <div class="space-y-1">
-      <h1 class="text-3xl font-bold text-gray-900">
-        {{ isEditMode ? 'Edit Task' : 'Create Task' }}
-      </h1>
-
-      <p v-if="error" class="text-sm text-red-600">
-        {{ error }}
-      </p>
-    </div>
-
-    <TaskMetaEditor v-model="form" />
-
-    <div class="flex items-center justify-between pt-2">
-      <h2 class="text-xl font-semibold text-gray-900">
-        {{ t('newTask.item') }}
-      </h2>
-
-      <button
-        class="rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 transition"
-        @click="addItem"
-      >
-        {{ t('newTask.additem') }}
-      </button>
-    </div>
-
-    <TaskItemsEditor :items="form.items" :task-type="form.taskType" />
-
-    <div class="sticky bottom-0 p-4 flex justify-end gap-3">
-      <button
-        class="rounded-lg bg-gray-200 px-5 py-2 hover:bg-gray-300 transition"
-        @click="router.back()"
-      >
-        {{ t('newTask.cancel') }}
-      </button>
-
-      <button
-        class="rounded-lg bg-green-600 px-6 py-2 text-white hover:bg-green-700 transition disabled:opacity-50"
-        :disabled="loading"
-        @click="save"
-      >
-        {{ isEditMode ? t('newTask.save') : t('newTask.create') }}
-      </button>
-    </div>
-  </div>
+  <TaskEditorPage />
 </template>
diff --git a/src/classrooms/pages/NewClassroomTask.vue b/src/classrooms/pages/NewClassroomTask.vue
index 9a4b2db7..3e188a3f 100644
--- a/src/classrooms/pages/NewClassroomTask.vue
+++ b/src/classrooms/pages/NewClassroomTask.vue
@@ -1,207 +1,7 @@
 <script setup lang="ts">
-import { computed, ref, onMounted, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { useAuthStore } from '@/auth/model/auth.store'
-import { useI18n } from 'vue-i18n'
-
-import {
-  requestCreateTask,
-  requestTask,
-  requestUpdateTask,
-  type TaskResponse,
-} from '@/stops/api/stops.api'
-
-import TaskMetaEditor from '@/classrooms/components/tasks/TaskMetaEditor.vue'
-import TaskItemsEditor from '@/classrooms/components/tasks/TaskItemsEditor.vue'
-import { useTeacherStops } from '@/classrooms/components/composables/UseTeacherStops'
-
-const route = useRoute()
-const router = useRouter()
-const authStore = useAuthStore()
-
-const { t } = useI18n()
-
-const classroomId = computed(() => Number(route.params.classroomId))
-const taskId = route.params.taskId ? Number(route.params.taskId) : null
-
-const isEditMode = computed(() => taskId !== null)
-
-const loading = ref(false)
-const error = ref<string | null>(null)
-
-const {
-  stops,
-  status: stopsStatus,
-  error: stopsError,
-} = useTeacherStops(classroomId)
-
-const selectedStopId = ref<number | null>(null)
-
-const form = ref<TaskResponse>({
-  id: 0,
-  classroomId: classroomId.value,
-  stopId: 0,
-  createdByTeacherId: 0,
-  title: { en: '', nb: '' },
-  introText: { en: '', nb: '' },
-  difficultyLevel: 1,
-  taskType: 'GENERIC',
-  passingRule: 'ALL_CORRECT',
-  passingScore: null,
-  maxScore: 1,
-  published: false,
-  items: [],
-})
-
-async function load() {
-  if (!taskId || !authStore.authorizationHeader) return
-
-  loading.value = true
-  try {
-    const task = await requestTask(
-      classroomId.value,
-      taskId,
-      authStore.authorizationHeader,
-    )
-
-    form.value = task
-    selectedStopId.value = task.stopId
-  } finally {
-    loading.value = false
-  }
-}
-
-watch(stops, (newStops) => {
-  if (!selectedStopId.value && newStops.length > 0) {
-    selectedStopId.value = newStops[0]!.stopId
-  }
-})
-
-function addItem() {
-  form.value.items.push({
-    id: Date.now(),
-    itemOrder: form.value.items.length + 1,
-    promptText: { en: '', nb: '' },
-    mediaUrl: null,
-    metadataJson: null,
-    options: [],
-  })
-}
-
-async function save() {
-  if (!authStore.authorizationHeader || selectedStopId.value === null) return
-
-  loading.value = true
-  error.value = null
-
-  try {
-    form.value.stopId = selectedStopId.value
-
-    if (isEditMode.value) {
-      await requestUpdateTask(
-        classroomId.value,
-        taskId!,
-        form.value,
-        authStore.authorizationHeader,
-      )
-    } else {
-      await requestCreateTask(
-        classroomId.value,
-        form.value,
-        authStore.authorizationHeader,
-      )
-    }
-
-    const selectedStop = computed(() =>
-      stops.value.find((s) => s.stopId === selectedStopId.value),
-    )
-
-    router.push({
-      name: 'classroom-tasks',
-      params: {
-        classroomId: classroomId.value,
-        slug: selectedStop.value?.slug ?? undefined,
-      },
-    })
-  } catch (e) {
-    error.value = e instanceof Error ? e.message : t('newTask.savefail')
-  } finally {
-    loading.value = false
-  }
-}
-
-onMounted(load)
+import TaskEditorPage from '@/classrooms/pages/TaskEditorPage.vue'
 </script>
 
 <template>
-  <div class="mx-auto max-w-5xl px-6 py-6 pt-30 space-y-8">
-    <div class="space-y-2">
-      <h1 class="text-3xl font-bold">
-        {{ isEditMode ? t('newTask.edit') : t('newTask.create') }}
-      </h1>
-
-      <p v-if="error" class="text-red-600">
-        {{ error }}
-      </p>
-    </div>
-
-    <div class="space-y-2">
-      <label class="text-sm font-medium text-gray-700">Stop</label>
-
-      <select
-        v-model="selectedStopId"
-        class="w-full rounded-lg border px-3 py-2"
-      >
-        <option disabled :value="null">
-          {{ t('newTask.select') }}
-        </option>
-
-        <option v-for="stop in stops" :key="stop.stopId" :value="stop.stopId">
-          {{ stop.displayOrder }}. {{ stop.title }}
-        </option>
-      </select>
-
-      <p v-if="stopsStatus === 'loading'" class="text-sm text-gray-400">
-        {{ t('newTask.loading') }}
-      </p>
-
-      <p v-if="stopsError" class="text-sm text-red-600">
-        {{ stopsError }}
-      </p>
-    </div>
-
-    <TaskMetaEditor v-model="form" />
-
-    <div class="flex items-center justify-between pt-2">
-      <h2 class="text-xl font-semibold">
-        {{ t('newTask.item') }}
-      </h2>
-
-      <button
-        class="rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 transition"
-        @click="addItem"
-      >
-        {{ t('newTask.additem') }}
-      </button>
-    </div>
-
-    <TaskItemsEditor :items="form.items" :task-type="form.taskType" />
-
-    <div class="sticky bottom-0 p-4 flex justify-end gap-3">
-      <button
-        class="rounded-lg bg-gray-200 px-5 py-2 hover:bg-gray-300"
-        @click="router.back()"
-      >
-        {{ t('newTask.cancel') }}
-      </button>
-
-      <button
-        class="rounded-lg bg-green-600 px-6 py-2 text-white hover:bg-green-700"
-        :disabled="loading || selectedStopId === null"
-        @click="save"
-      >
-        {{ isEditMode ? t('newTask.save') : t('newTask.create') }}
-      </button>
-    </div>
-  </div>
+  <TaskEditorPage />
 </template>
diff --git a/src/classrooms/pages/TaskEditorPage.vue b/src/classrooms/pages/TaskEditorPage.vue
new file mode 100644
index 00000000..dbcf4119
--- /dev/null
+++ b/src/classrooms/pages/TaskEditorPage.vue
@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useAuthStore } from '@/auth/model/auth.store'
+import { useTeacherStops } from '@/classrooms/components/composables/UseTeacherStops'
+import TaskItemsEditor from '@/classrooms/components/tasks/TaskItemsEditor.vue'
+import TaskMetaEditor from '@/classrooms/components/tasks/TaskMetaEditor.vue'
+import {
+  createEmptyTaskDraft,
+  createEmptyTaskItemDraft,
+} from '@/classrooms/components/tasks/model/task-editor.utils'
+import {
+  createTaskEditorDraft,
+  taskEditorDraftToTaskForm,
+} from '@/classrooms/components/tasks/model/task-editor.mappers'
+import type { TaskEditorDraft } from '@/classrooms/components/tasks/model/task-editor.types'
+import {
+  requestCreateTask,
+  requestTask,
+  requestUpdateTask,
+} from '@/stops/api/stops.api'
+
+const route = useRoute()
+const router = useRouter()
+const authStore = useAuthStore()
+const { t } = useI18n()
+
+const classroomId = computed(() => Number(route.params.classroomId))
+const taskId = computed(() =>
+  route.params.taskId ? Number(route.params.taskId) : null,
+)
+const isEditMode = computed(() => taskId.value !== null)
+
+const loading = ref(false)
+const error = ref<string | null>(null)
+
+const {
+  stops,
+  status: stopsStatus,
+  error: stopsError,
+} = useTeacherStops(classroomId)
+
+const form = ref<TaskEditorDraft>(createEmptyTaskDraft(classroomId.value))
+
+const selectedStop = computed(() =>
+  stops.value.find((stop) => stop.stopId === form.value.stopId),
+)
+
+watch(stops, (nextStops) => {
+  if (form.value.stopId <= 0 && nextStops.length > 0) {
+    form.value.stopId = nextStops[0]!.stopId
+  }
+})
+
+async function loadTask() {
+  if (!taskId.value || !authStore.authorizationHeader) return
+
+  loading.value = true
+  error.value = null
+
+  try {
+    const task = await requestTask(
+      classroomId.value,
+      taskId.value,
+      authStore.authorizationHeader,
+    )
+
+    form.value = createTaskEditorDraft(task)
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : t('newTask.savefail')
+  } finally {
+    loading.value = false
+  }
+}
+
+function addItem() {
+  form.value.items.push(createEmptyTaskItemDraft(form.value.items.length + 1))
+}
+
+async function save() {
+  if (!authStore.authorizationHeader || form.value.stopId <= 0) return
+
+  loading.value = true
+  error.value = null
+
+  try {
+    const payload = taskEditorDraftToTaskForm(form.value)
+
+    if (isEditMode.value && taskId.value !== null) {
+      await requestUpdateTask(
+        classroomId.value,
+        taskId.value,
+        payload,
+        authStore.authorizationHeader,
+      )
+    } else {
+      await requestCreateTask(
+        classroomId.value,
+        payload,
+        authStore.authorizationHeader,
+      )
+    }
+
+    await router.push({
+      name: 'classroom-tasks',
+      params: {
+        classroomId: classroomId.value,
+        slug: selectedStop.value?.slug,
+      },
+    })
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : t('newTask.savefail')
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(loadTask)
+</script>
+
+<template>
+  <div class="mx-auto max-w-5xl px-6 py-6 pt-30 space-y-8">
+    <div class="space-y-2">
+      <h1 class="text-3xl font-bold">
+        {{ isEditMode ? t('newTask.edit') : t('newTask.create') }}
+      </h1>
+
+      <p v-if="error" class="text-red-600">
+        {{ error }}
+      </p>
+    </div>
+
+    <div class="space-y-2">
+      <label class="text-sm font-medium text-gray-700">Stop</label>
+
+      <select
+        v-model.number="form.stopId"
+        class="w-full rounded-lg border px-3 py-2"
+      >
+        <option disabled :value="null">
+          {{ t('newTask.select') }}
+        </option>
+
+        <option v-for="stop in stops" :key="stop.stopId" :value="stop.stopId">
+          {{ stop.displayOrder }}. {{ stop.title }}
+        </option>
+      </select>
+
+      <p v-if="stopsStatus === 'loading'" class="text-sm text-gray-400">
+        {{ t('newTask.loading') }}
+      </p>
+
+      <p v-if="stopsError" class="text-sm text-red-600">
+        {{ stopsError }}
+      </p>
+    </div>
+
+    <TaskMetaEditor v-model="form" />
+
+    <div class="flex items-center justify-between pt-2">
+      <h2 class="text-xl font-semibold">
+        {{ t('newTask.item') }}
+      </h2>
+
+      <button
+        class="rounded-lg bg-blue-600 px-4 py-2 text-white transition hover:bg-blue-700"
+        @click="addItem"
+      >
+        {{ t('newTask.additem') }}
+      </button>
+    </div>
+
+    <TaskItemsEditor :items="form.items" :task-type="form.taskType" />
+
+    <div class="sticky bottom-0 flex justify-end gap-3 p-4">
+      <button
+        class="rounded-lg bg-gray-200 px-5 py-2 hover:bg-gray-300"
+        @click="router.back()"
+      >
+        {{ t('newTask.cancel') }}
+      </button>
+
+      <button
+        class="rounded-lg bg-green-600 px-6 py-2 text-white hover:bg-green-700"
+        :disabled="loading || form.stopId <= 0"
+        @click="save"
+      >
+        {{ isEditMode ? t('newTask.save') : t('newTask.create') }}
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/src/classrooms/routes.ts b/src/classrooms/routes.ts
index 59138151..0e29034b 100644
--- a/src/classrooms/routes.ts
+++ b/src/classrooms/routes.ts
@@ -9,8 +9,7 @@ import TeacherPlaytestMapPage from '@/teacher-playtest/pages/TeacherPlaytestMapP
 import NotificationsPage from '@/notifications/pages/NotificationsPage.vue'
 import TeacherPlaytestStopPage from '@/teacher-playtest/pages/TeacherPlaytestStopPage.vue'
 import ClassroomTasks from '@/classrooms/pages/ClassroomTasks.vue'
-import NewClassroomTask from '@/classrooms/pages/NewClassroomTask.vue'
-import EditClassroomTask from '@/classrooms/pages/EditClassroomTask.vue'
+import TaskEditorPage from '@/classrooms/pages/TaskEditorPage.vue'
 import PendingApproval from '@/classrooms/pages/PendingApproval.vue'
 import TeacherMystery from '@/teacher-mystery/pages/TeacherMystery.vue'
 import TeacherPupilNotebookPage from '@/notebook/pages/TeacherPupilNotebookPage.vue'
@@ -117,16 +116,25 @@ export function createClassroomRoutes(
       path: 'classrooms/:classroomId/tasks/:slug',
       name: 'classroom-tasks',
       component: ClassroomTasks,
+      meta: {
+        backTarget: classroomDetailsBackTarget,
+      },
     },
     {
       path: 'classrooms/:classroomId/tasks/new',
       name: 'new-classroom-task',
-      component: NewClassroomTask,
+      component: TaskEditorPage,
+      meta: {
+        backTarget: classroomDetailsBackTarget,
+      },
     },
     {
       path: 'classroom/:classroomId/tasks/:taskId',
       name: 'edit-classroom-task',
-      component: EditClassroomTask,
+      component: TaskEditorPage,
+      meta: {
+        backTarget: classroomDetailsBackTarget,
+      },
     },
     {
       path: 'classrooms/:classroomId/playtest',
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 828b257b..94d9619c 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -819,6 +819,40 @@ export const en = {
     },
     joinCode: 'Classroom code',
   },
+  newTask: {
+    savefail: 'Saving failed',
+    edit: 'Edit task',
+    create: 'Create task',
+    select: 'Select stop',
+    loading: 'Loading stop...',
+    additem: 'Add item',
+    cancel: 'Cancel',
+    save: 'Save',
+    stops: 'Stops',
+    remove: 'Remove',
+    item: 'Item',
+    prompt: 'Question',
+    ep: 'English question',
+    np: 'Norwegian question',
+    et: 'English title',
+    nt: 'Norwegian title',
+    ei: 'English introduction',
+    ni: 'Norwegian introduction',
+    news: 'News comparison',
+    imageAssessment: 'Image assessment',
+    imageSelect: 'Image select',
+    passwordEvaluation: 'Password evaluation',
+    socialScenario: 'Social scenario',
+    difficulty: 'Difficulty',
+    options: 'Options',
+    eo: 'English option',
+    no: 'Norwegian option',
+    correct: 'Correct',
+    answer: 'Answer key',
+    ea: 'English explanation',
+    na: 'Norwegian explanation',
+    addoption: 'Add option',
+  },
   classroomModeration: {
     title: 'Word filter',
     description:
diff --git a/src/locales/nb.ts b/src/locales/nb.ts
index ed92a06b..1ae90a2d 100644
--- a/src/locales/nb.ts
+++ b/src/locales/nb.ts
@@ -814,6 +814,10 @@ export const nb = {
     ei: 'Engelsk introduksjon',
     ni: 'Norsk introduksjon',
     news: 'Nyhetssammenligning',
+    imageAssessment: 'Bildevurdering',
+    imageSelect: 'Bildevalg',
+    passwordEvaluation: 'Passordvurdering',
+    socialScenario: 'Sosialt scenario',
     difficulty: 'Vanskelighetsgrad',
     options: 'Valgmuligheter',
     eo: 'Engelsk valgmulighet',

From 8d3778a8fa55185792192f88dd6b5fc6d9e1de83 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Thu, 30 Apr 2026 14:14:15 +0200
Subject: [PATCH 56/66] add back targets

---
 src/classrooms/routes.ts | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/classrooms/routes.ts b/src/classrooms/routes.ts
index 59138151..018d41c0 100644
--- a/src/classrooms/routes.ts
+++ b/src/classrooms/routes.ts
@@ -117,16 +117,25 @@ export function createClassroomRoutes(
       path: 'classrooms/:classroomId/tasks/:slug',
       name: 'classroom-tasks',
       component: ClassroomTasks,
+      meta: {
+        backTarget: classroomDetailsBackTarget
+      }
     },
     {
       path: 'classrooms/:classroomId/tasks/new',
       name: 'new-classroom-task',
       component: NewClassroomTask,
+      meta: {
+        backTarget: classroomDetailsBackTarget,
+      },
     },
     {
-      path: 'classroom/:classroomId/tasks/:taskId',
+      path: 'classrooms/:classroomId/tasks/:taskId',
       name: 'edit-classroom-task',
       component: EditClassroomTask,
+      meta: {
+        backTarget: classroomDetailsBackTarget,
+      },
     },
     {
       path: 'classrooms/:classroomId/playtest',

From 00aa31a3ccd6fa88a5ffc3d4703ee5b01c13b776 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Thu, 30 Apr 2026 14:16:53 +0200
Subject: [PATCH 57/66] format

---
 src/classrooms/routes.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/classrooms/routes.ts b/src/classrooms/routes.ts
index 018d41c0..fec88d79 100644
--- a/src/classrooms/routes.ts
+++ b/src/classrooms/routes.ts
@@ -118,8 +118,8 @@ export function createClassroomRoutes(
       name: 'classroom-tasks',
       component: ClassroomTasks,
       meta: {
-        backTarget: classroomDetailsBackTarget
-      }
+        backTarget: classroomDetailsBackTarget,
+      },
     },
     {
       path: 'classrooms/:classroomId/tasks/new',

From 726c516205743e2a3f1d1b41856ef1229aa48ab0 Mon Sep 17 00:00:00 2001
From: Maria <145002050+marikolafs@users.noreply.github.com>
Date: Thu, 30 Apr 2026 14:21:56 +0200
Subject: [PATCH 58/66] add memebrshipStatus where missing

---
 src/app/__tests__/AppShell.spec.ts                     | 2 ++
 src/avatar/components/__tests__/PupilAgentCard.spec.ts | 1 +
 src/avatar/model/__tests__/avatar.store.spec.ts        | 1 +
 3 files changed, 4 insertions(+)

diff --git a/src/app/__tests__/AppShell.spec.ts b/src/app/__tests__/AppShell.spec.ts
index c300363c..aee8da2a 100644
--- a/src/app/__tests__/AppShell.spec.ts
+++ b/src/app/__tests__/AppShell.spec.ts
@@ -241,6 +241,7 @@ describe('AppShell', () => {
         currentLevel: 1,
         currentClassroomId: 1,
         hasCompletedOnboarding: true,
+        membershipStatus: 'ACTIVE',
       },
     })
 
@@ -262,6 +263,7 @@ describe('AppShell', () => {
         currentLevel: 1,
         currentClassroomId: 1,
         hasCompletedOnboarding: true,
+        membershipStatus: 'ACTIVE',
       },
     })
 
diff --git a/src/avatar/components/__tests__/PupilAgentCard.spec.ts b/src/avatar/components/__tests__/PupilAgentCard.spec.ts
index 81107ae3..f835aaa6 100644
--- a/src/avatar/components/__tests__/PupilAgentCard.spec.ts
+++ b/src/avatar/components/__tests__/PupilAgentCard.spec.ts
@@ -25,6 +25,7 @@ describe('PupilAgentCard', () => {
         currentLevel: 1,
         currentClassroomId: 1,
         hasCompletedOnboarding: true,
+        membershipStatus: 'ACTIVE',
       },
       teacherProfile: null,
     }
diff --git a/src/avatar/model/__tests__/avatar.store.spec.ts b/src/avatar/model/__tests__/avatar.store.spec.ts
index cec1fbf8..3dd432c4 100644
--- a/src/avatar/model/__tests__/avatar.store.spec.ts
+++ b/src/avatar/model/__tests__/avatar.store.spec.ts
@@ -223,6 +223,7 @@ describe('useAvatarStore', () => {
         currentLevel: 1,
         currentClassroomId: 2,
         hasCompletedOnboarding: true,
+        membershipStatus: 'ACTIVE',
       },
       teacherProfile: null,
     }

From 2204449f49ad5ca0ec60cb826c0adf638786ba02 Mon Sep 17 00:00:00 2001
From: eilifhl <eilifhl@stud.ntnu.no>
Date: Thu, 30 Apr 2026 14:30:04 +0200
Subject: [PATCH 59/66] add image uploading

---
 .../components/tasks/TaskItemsEditor.vue      | 102 +++++++++++++++++-
 src/classrooms/pages/TaskEditorPage.vue       |   6 +-
 src/locales/en.ts                             |   7 ++
 src/locales/nb.ts                             |   7 ++
 src/stops/api/stops.api.ts                    |  24 +++++
 5 files changed, 144 insertions(+), 2 deletions(-)

diff --git a/src/classrooms/components/tasks/TaskItemsEditor.vue b/src/classrooms/components/tasks/TaskItemsEditor.vue
index 35bd2472..c2cdba33 100644
--- a/src/classrooms/components/tasks/TaskItemsEditor.vue
+++ b/src/classrooms/components/tasks/TaskItemsEditor.vue
@@ -1,19 +1,69 @@
 <script setup lang="ts">
+import { computed, reactive } from 'vue'
+import { useAuthStore } from '@/auth/model/auth.store'
 import type { TaskType } from '@/stops/api/stops.api.ts'
 import type { TaskEditorItemDraft } from '@/classrooms/components/tasks/model/task-editor.types'
 import TaskOptionEditor from '@/classrooms/components/tasks/TaskOptionEditor.vue'
+import { requestUploadTaskMedia } from '@/stops/api/stops.api.ts'
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
+const authStore = useAuthStore()
 
-defineProps<{
+const props = defineProps<{
   items: TaskEditorItemDraft[]
+  classroomId: number
   taskType: TaskType
 }>()
 
 const emit = defineEmits<{
   remove: [index: number]
 }>()
+
+const uploadingByItemId = reactive<Record<number, boolean>>({})
+const uploadErrorByItemId = reactive<Record<number, string | null>>({})
+
+const allowedUploadTypes = 'image/jpeg,image/png,image/gif,image/webp'
+const isImageTask = computed(
+  () =>
+    props.taskType === 'IMAGE_ASSESSMENT' || props.taskType === 'IMAGE_SELECT',
+)
+
+async function onFileSelected(item: TaskEditorItemDraft, event: Event) {
+  const input = event.target as HTMLInputElement
+  const file = input.files?.[0] ?? null
+
+  uploadErrorByItemId[item.id] = null
+
+  if (!file) return
+  if (!authStore.authorizationHeader) {
+    uploadErrorByItemId[item.id] = t('newTask.uploadAuth')
+    input.value = ''
+    return
+  }
+
+  uploadingByItemId[item.id] = true
+
+  try {
+    const result = await requestUploadTaskMedia(
+      props.classroomId,
+      authStore.authorizationHeader,
+      file,
+    )
+    item.mediaUrl = result.url
+  } catch (e) {
+    uploadErrorByItemId[item.id] =
+      e instanceof Error ? e.message : t('newTask.uploadFail')
+  } finally {
+    uploadingByItemId[item.id] = false
+    input.value = ''
+  }
+}
+
+function clearImage(item: TaskEditorItemDraft) {
+  item.mediaUrl = null
+  uploadErrorByItemId[item.id] = null
+}
 </script>
 
 <template>
@@ -53,6 +103,56 @@ const emit = defineEmits<{
         />
       </div>
 
+      <div v-if="isImageTask" class="space-y-3 rounded-xl border bg-slate-50 p-4">
+        <div class="flex items-center justify-between gap-3">
+          <p class="text-xs font-semibold uppercase text-gray-500">
+            {{ t('newTask.image') }}
+          </p>
+          <label
+            class="inline-flex cursor-pointer items-center rounded-lg border border-blue-200 bg-white px-3 py-2 text-sm font-medium text-blue-700 hover:bg-blue-50"
+          >
+            <input
+              type="file"
+              class="hidden"
+              :accept="allowedUploadTypes"
+              :disabled="uploadingByItemId[item.id]"
+              @change="onFileSelected(item, $event)"
+            />
+            {{
+              uploadingByItemId[item.id]
+                ? t('newTask.uploading')
+                : t('newTask.uploadImage')
+            }}
+          </label>
+        </div>
+
+        <input
+          v-model="item.mediaUrl"
+          :placeholder="t('newTask.imageUrl')"
+          class="input"
+        />
+
+        <p v-if="uploadErrorByItemId[item.id]" class="text-sm text-red-600">
+          {{ uploadErrorByItemId[item.id] }}
+        </p>
+
+        <div v-if="item.mediaUrl" class="space-y-3">
+          <img
+            :src="item.mediaUrl"
+            alt=""
+            class="max-h-72 w-full rounded-xl border border-slate-200 object-contain bg-white"
+          />
+
+          <button
+            type="button"
+            class="text-sm font-medium text-red-600 hover:text-red-700"
+            @click="clearImage(item)"
+          >
+            {{ t('newTask.removeImage') }}
+          </button>
+        </div>
+      </div>
+
       <div class="pt-2">
         <TaskOptionEditor v-if="item.options" v-model="item.options" />
       </div>
diff --git a/src/classrooms/pages/TaskEditorPage.vue b/src/classrooms/pages/TaskEditorPage.vue
index dbcf4119..59dae111 100644
--- a/src/classrooms/pages/TaskEditorPage.vue
+++ b/src/classrooms/pages/TaskEditorPage.vue
@@ -171,7 +171,11 @@ onMounted(loadTask)
       </button>
     </div>
 
-    <TaskItemsEditor :items="form.items" :task-type="form.taskType" />
+    <TaskItemsEditor
+      :items="form.items"
+      :classroom-id="classroomId"
+      :task-type="form.taskType"
+    />
 
     <div class="sticky bottom-0 flex justify-end gap-3 p-4">
       <button
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 94d9619c..c66bbc76 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -843,6 +843,13 @@ export const en = {
     imageSelect: 'Image select',
     passwordEvaluation: 'Password evaluation',
     socialScenario: 'Social scenario',
+    image: 'Image',
+    imageUrl: 'Image URL',
+    uploadImage: 'Upload image',
+    uploading: 'Uploading...',
+    removeImage: 'Remove image',
+    uploadFail: 'Could not upload image',
+    uploadAuth: 'You must be logged in to upload an image',
     difficulty: 'Difficulty',
     options: 'Options',
     eo: 'English option',
diff --git a/src/locales/nb.ts b/src/locales/nb.ts
index 1ae90a2d..03bcbc34 100644
--- a/src/locales/nb.ts
+++ b/src/locales/nb.ts
@@ -818,6 +818,13 @@ export const nb = {
     imageSelect: 'Bildevalg',
     passwordEvaluation: 'Passordvurdering',
     socialScenario: 'Sosialt scenario',
+    image: 'Bilde',
+    imageUrl: 'Bildeadresse',
+    uploadImage: 'Last opp bilde',
+    uploading: 'Laster opp...',
+    removeImage: 'Fjern bilde',
+    uploadFail: 'Kunne ikke laste opp bildet',
+    uploadAuth: 'Du må være logget inn for å laste opp bilde',
     difficulty: 'Vanskelighetsgrad',
     options: 'Valgmuligheter',
     eo: 'Engelsk valgmulighet',
diff --git a/src/stops/api/stops.api.ts b/src/stops/api/stops.api.ts
index 0c7c7525..b468021e 100644
--- a/src/stops/api/stops.api.ts
+++ b/src/stops/api/stops.api.ts
@@ -292,6 +292,30 @@ export function requestUpdateTaskPublishState(
   )
 }
 
+export function requestUploadTaskMedia(
+  classroomId: number,
+  authorizationHeader: string,
+  file: File,
+): Promise<{ url: string }> {
+  const formData = new FormData()
+  formData.append('file', file)
+
+  return fetch(`${CLASSROOMS_BASE}/${classroomId}/tasks/upload`, {
+    method: 'POST',
+    headers: { Authorization: authorizationHeader },
+    body: formData,
+    credentials: 'include',
+  }).then(async (response) => {
+    if (!response.ok) {
+      const fallback = `Request failed with status ${response.status}`
+      const errorMessage = await readJsonErrorMessage(response)
+      throw new Error(errorMessage || fallback)
+    }
+
+    return response.json() as Promise<{ url: string }>
+  })
+}
+
 export function requestDeleteTask(
   classroomId: number,
   taskId: number,

From f716d236df12412db71e73a78df4665811931176 Mon Sep 17 00:00:00 2001
From: eilifhl <eilifhl@stud.ntnu.no>
Date: Thu, 30 Apr 2026 14:41:00 +0200
Subject: [PATCH 60/66] format

---
 .../components/tasks/TaskItemsEditor.vue      |  5 ++-
 .../components/tasks/TaskMetaEditor.vue       |  3 +-
 .../tasks/model/task-editor.mappers.ts        | 40 ++++++++++++++-----
 .../tasks/model/task-editor.types.ts          |  5 ++-
 .../tasks/model/task-editor.utils.ts          |  4 +-
 5 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/src/classrooms/components/tasks/TaskItemsEditor.vue b/src/classrooms/components/tasks/TaskItemsEditor.vue
index c2cdba33..9269b1d2 100644
--- a/src/classrooms/components/tasks/TaskItemsEditor.vue
+++ b/src/classrooms/components/tasks/TaskItemsEditor.vue
@@ -103,7 +103,10 @@ function clearImage(item: TaskEditorItemDraft) {
         />
       </div>
 
-      <div v-if="isImageTask" class="space-y-3 rounded-xl border bg-slate-50 p-4">
+      <div
+        v-if="isImageTask"
+        class="space-y-3 rounded-xl border bg-slate-50 p-4"
+      >
         <div class="flex items-center justify-between gap-3">
           <p class="text-xs font-semibold uppercase text-gray-500">
             {{ t('newTask.image') }}
diff --git a/src/classrooms/components/tasks/TaskMetaEditor.vue b/src/classrooms/components/tasks/TaskMetaEditor.vue
index 19e429d7..a9951886 100644
--- a/src/classrooms/components/tasks/TaskMetaEditor.vue
+++ b/src/classrooms/components/tasks/TaskMetaEditor.vue
@@ -32,8 +32,7 @@ const selectedTaskType = computed({
 const localizedFieldClasses =
   'w-full rounded-xl border border-slate-300 bg-slate-50 px-4 py-3 text-lg text-slate-900 shadow-sm transition focus:border-blue-500 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-100'
 
-const localizedTextareaClasses =
-  `${localizedFieldClasses} min-h-36 resize-y leading-relaxed`
+const localizedTextareaClasses = `${localizedFieldClasses} min-h-36 resize-y leading-relaxed`
 </script>
 
 <template>
diff --git a/src/classrooms/components/tasks/model/task-editor.mappers.ts b/src/classrooms/components/tasks/model/task-editor.mappers.ts
index 90d062e3..658a3c06 100644
--- a/src/classrooms/components/tasks/model/task-editor.mappers.ts
+++ b/src/classrooms/components/tasks/model/task-editor.mappers.ts
@@ -17,7 +17,9 @@ import type {
   UnsupportedTaskDraft,
 } from '@/classrooms/components/tasks/model/task-editor.types'
 
-function cloneOptions(options: TaskResponse['items'][number]['options']): TaskEditorOptionDraft[] {
+function cloneOptions(
+  options: TaskResponse['items'][number]['options'],
+): TaskEditorOptionDraft[] {
   return options.map((option) => ({
     id: option.id,
     optionOrder: option.optionOrder,
@@ -68,7 +70,10 @@ function createBaseDraft(task: TaskResponse) {
 
 function mapNewsComparisonDraft(task: TaskResponse): NewsComparisonDraft {
   const base = createBaseDraft(task)
-  const articlesByItemOrder: Record<number, NewsComparisonDraft['parsedMetadata']['articlesByItemOrder'][number]> = {}
+  const articlesByItemOrder: Record<
+    number,
+    NewsComparisonDraft['parsedMetadata']['articlesByItemOrder'][number]
+  > = {}
 
   for (const item of task.items) {
     const parsed = parseJson<NewsComparisonTaskMeta>(item.metadataJson)
@@ -86,7 +91,10 @@ function mapNewsComparisonDraft(task: TaskResponse): NewsComparisonDraft {
 
 function mapImageAssessmentDraft(task: TaskResponse): ImageAssessmentDraft {
   const base = createBaseDraft(task)
-  const rolesByItemOrder: Record<number, 'imageChoice' | 'reasonChoice' | null> = {}
+  const rolesByItemOrder: Record<
+    number,
+    'imageChoice' | 'reasonChoice' | null
+  > = {}
 
   for (const item of task.items) {
     const parsed = parseJson<{ role?: unknown }>(item.metadataJson)
@@ -107,7 +115,10 @@ function mapImageAssessmentDraft(task: TaskResponse): ImageAssessmentDraft {
 
 function mapImageSelectDraft(task: TaskResponse): ImageSelectDraft {
   const base = createBaseDraft(task)
-  const headerMediaByItemOrder: Record<number, ImageSelectHeaderMeta['mediaUrl'] | null> = {}
+  const headerMediaByItemOrder: Record<
+    number,
+    ImageSelectHeaderMeta['mediaUrl'] | null
+  > = {}
   const hotspotsByItemOrder: Record<number, ImageSelectHotspotMeta | null> = {}
 
   for (const item of task.items) {
@@ -131,9 +142,12 @@ function mapImageSelectDraft(task: TaskResponse): ImageSelectDraft {
   }
 }
 
-function mapPasswordEvaluationDraft(task: TaskResponse): PasswordEvaluationDraft {
+function mapPasswordEvaluationDraft(
+  task: TaskResponse,
+): PasswordEvaluationDraft {
   const base = createBaseDraft(task)
-  const itemMetadataByItemOrder: PasswordEvaluationDraft['parsedMetadata']['itemMetadataByItemOrder'] = {}
+  const itemMetadataByItemOrder: PasswordEvaluationDraft['parsedMetadata']['itemMetadataByItemOrder'] =
+    {}
 
   for (const item of task.items) {
     itemMetadataByItemOrder[item.itemOrder] = parseJson(item.metadataJson)
@@ -150,12 +164,13 @@ function mapPasswordEvaluationDraft(task: TaskResponse): PasswordEvaluationDraft
 
 function mapSocialScenarioDraft(task: TaskResponse): SocialScenarioDraft {
   const base = createBaseDraft(task)
-  const actionsByItemOrder: SocialScenarioDraft['parsedMetadata']['actionsByItemOrder'] = {}
+  const actionsByItemOrder: SocialScenarioDraft['parsedMetadata']['actionsByItemOrder'] =
+    {}
 
   for (const item of task.items) {
-    const parsed = parseJson<{ actions?: SocialScenarioDraft['parsedMetadata']['actionsByItemOrder'][number] }>(
-      item.metadataJson,
-    )
+    const parsed = parseJson<{
+      actions?: SocialScenarioDraft['parsedMetadata']['actionsByItemOrder'][number]
+    }>(item.metadataJson)
     actionsByItemOrder[item.itemOrder] = parsed?.actions ?? []
   }
 
@@ -176,7 +191,10 @@ function mapUnsupportedDraft(task: TaskResponse): UnsupportedTaskDraft {
   }
 }
 
-function serializeMetadata(item: TaskEditorItemDraft, draft: TaskEditorDraft): string | null {
+function serializeMetadata(
+  item: TaskEditorItemDraft,
+  draft: TaskEditorDraft,
+): string | null {
   switch (draft.taskType) {
     case 'NEWS_COMPARISON': {
       const articles = draft.parsedMetadata.articlesByItemOrder[item.itemOrder]
diff --git a/src/classrooms/components/tasks/model/task-editor.types.ts b/src/classrooms/components/tasks/model/task-editor.types.ts
index a14c7f30..789c3ba5 100644
--- a/src/classrooms/components/tasks/model/task-editor.types.ts
+++ b/src/classrooms/components/tasks/model/task-editor.types.ts
@@ -52,7 +52,10 @@ export interface ImageAssessmentDraft extends TaskEditorDraftBase {
 export interface ImageSelectDraft extends TaskEditorDraftBase {
   taskType: 'IMAGE_SELECT'
   parsedMetadata: {
-    headerMediaByItemOrder: Record<number, ImageSelectHeaderMeta['mediaUrl'] | null>
+    headerMediaByItemOrder: Record<
+      number,
+      ImageSelectHeaderMeta['mediaUrl'] | null
+    >
     hotspotsByItemOrder: Record<number, ImageSelectHotspotMeta | null>
   }
 }
diff --git a/src/classrooms/components/tasks/model/task-editor.utils.ts b/src/classrooms/components/tasks/model/task-editor.utils.ts
index 1e405542..eea0a6f7 100644
--- a/src/classrooms/components/tasks/model/task-editor.utils.ts
+++ b/src/classrooms/components/tasks/model/task-editor.utils.ts
@@ -25,7 +25,9 @@ export function createEmptyTaskDraft(classroomId: number): TaskEditorDraft {
   }
 }
 
-export function createEmptyTaskItemDraft(itemOrder: number): TaskEditorItemDraft {
+export function createEmptyTaskItemDraft(
+  itemOrder: number,
+): TaskEditorItemDraft {
   return {
     id: Date.now(),
     itemOrder,

From c12ae8a73704d3b2d0b44d84cd5be8662a270b03 Mon Sep 17 00:00:00 2001
From: eilifhl <eilifhl@stud.ntnu.no>
Date: Thu, 30 Apr 2026 14:54:11 +0200
Subject: [PATCH 61/66] lint

---
 src/classrooms/components/tasks/model/task-editor.types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/classrooms/components/tasks/model/task-editor.types.ts b/src/classrooms/components/tasks/model/task-editor.types.ts
index 789c3ba5..7ea8f005 100644
--- a/src/classrooms/components/tasks/model/task-editor.types.ts
+++ b/src/classrooms/components/tasks/model/task-editor.types.ts
@@ -97,7 +97,7 @@ export interface UnsupportedTaskDraft extends TaskEditorDraftBase {
     | 'PASSWORD_EVALUATION'
     | 'SOCIAL_SCENARIO'
   >
-  parsedMetadata: {}
+  parsedMetadata: Record<string, never>
 }
 
 export type TaskEditorDraft =

From 6a14e28e94d4aa8070b8718fbd795e1c5ebf0e3f Mon Sep 17 00:00:00 2001
From: eilifhl <eilifhl@stud.ntnu.no>
Date: Sat, 2 May 2026 12:11:05 +0200
Subject: [PATCH 62/66] hide imageselect tasks

---
 .../components/tasks/TaskMetaEditor.vue       |  1 -
 src/classrooms/pages/ClassroomTasks.vue       |  8 ++++++
 src/classrooms/pages/TaskEditorPage.vue       | 26 +++++++++++++++++++
 src/locales/en.ts                             |  3 +++
 src/locales/nb.ts                             |  1 +
 5 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/src/classrooms/components/tasks/TaskMetaEditor.vue b/src/classrooms/components/tasks/TaskMetaEditor.vue
index a9951886..8e0b89ba 100644
--- a/src/classrooms/components/tasks/TaskMetaEditor.vue
+++ b/src/classrooms/components/tasks/TaskMetaEditor.vue
@@ -17,7 +17,6 @@ const form = defineModel<TaskEditorDraft>({
 const taskTypeOptions: Array<{ value: TaskType; label: string }> = [
   { value: 'NEWS_COMPARISON', label: 'newTask.news' },
   { value: 'IMAGE_ASSESSMENT', label: 'newTask.imageAssessment' },
-  { value: 'IMAGE_SELECT', label: 'newTask.imageSelect' },
   { value: 'PASSWORD_EVALUATION', label: 'newTask.passwordEvaluation' },
   { value: 'SOCIAL_SCENARIO', label: 'newTask.socialScenario' },
 ]
diff --git a/src/classrooms/pages/ClassroomTasks.vue b/src/classrooms/pages/ClassroomTasks.vue
index ac547fe0..a455ea65 100644
--- a/src/classrooms/pages/ClassroomTasks.vue
+++ b/src/classrooms/pages/ClassroomTasks.vue
@@ -215,7 +215,15 @@ watch(
           />
 
           <div class="flex justify-end gap-2">
+            <span
+              v-if="task.taskType === 'IMAGE_SELECT'"
+              class="rounded-xl bg-gray-100 px-3 py-1.5 text-sm text-gray-500"
+            >
+              {{ t('taskOverview.imageSelectLocked') }}
+            </span>
+
             <button
+              v-else
               class="rounded-xl bg-gray-100 px-3 py-1.5 text-sm"
               @click="goToEdit(task.id)"
             >
diff --git a/src/classrooms/pages/TaskEditorPage.vue b/src/classrooms/pages/TaskEditorPage.vue
index 59dae111..3068741d 100644
--- a/src/classrooms/pages/TaskEditorPage.vue
+++ b/src/classrooms/pages/TaskEditorPage.vue
@@ -53,6 +53,28 @@ watch(stops, (nextStops) => {
   }
 })
 
+async function redirectFromImageSelectTask(stopId: number) {
+  const stop = stops.value.find((candidate) => candidate.stopId === stopId)
+
+  if (stop) {
+    await router.replace({
+      name: 'classroom-tasks',
+      params: {
+        classroomId: classroomId.value,
+        slug: stop.slug,
+      },
+    })
+    return
+  }
+
+  await router.replace({
+    name: 'teacher-classroom-details',
+    params: {
+      classroomId: classroomId.value,
+    },
+  })
+}
+
 async function loadTask() {
   if (!taskId.value || !authStore.authorizationHeader) return
 
@@ -67,6 +89,10 @@ async function loadTask() {
     )
 
     form.value = createTaskEditorDraft(task)
+
+    if (task.taskType === 'IMAGE_SELECT') {
+      await redirectFromImageSelectTask(task.stopId)
+    }
   } catch (e) {
     error.value = e instanceof Error ? e.message : t('newTask.savefail')
   } finally {
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 986357ff..6c34980a 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -973,6 +973,9 @@ export const en = {
     },
     joinCode: 'Classroom code',
   },
+  taskOverview: {
+    imageSelectLocked: 'Cannot be edited',
+  },
   newTask: {
     savefail: 'Saving failed',
     edit: 'Edit task',
diff --git a/src/locales/nb.ts b/src/locales/nb.ts
index 8d504e53..8ff6d918 100644
--- a/src/locales/nb.ts
+++ b/src/locales/nb.ts
@@ -977,6 +977,7 @@ export const nb = {
     unpublished: 'Ikke publisert',
     published: 'Publisert',
     edit: 'Rediger',
+    imageSelectLocked: 'Kan ikke redigeres',
     cancel: 'Avbryt',
   },
   newTask: {

From 09275e76629e83a643e1d748e14fab15848c28e4 Mon Sep 17 00:00:00 2001
From: eilifhl <eilifhl@stud.ntnu.no>
Date: Sat, 2 May 2026 12:12:23 +0200
Subject: [PATCH 63/66] readd things left to find

---
 src/locales/en.ts | 2 ++
 src/locales/nb.ts | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/src/locales/en.ts b/src/locales/en.ts
index 6c34980a..b7819da3 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -156,6 +156,8 @@ export const en = {
     tasksToRetry: 'Tasks to fix',
     goToTask: 'Go to task',
     welcomeToStop: 'Welcome to {stop}',
+    imageThingsLeftToFind: '{count} things left to find',
+    imageAllThingsFound: 'All things found',
     email: {
       inbox: 'Innboks',
       whatWouldYouDo: 'Hva ville du gjort?',
diff --git a/src/locales/nb.ts b/src/locales/nb.ts
index 8ff6d918..ebc03615 100644
--- a/src/locales/nb.ts
+++ b/src/locales/nb.ts
@@ -158,6 +158,8 @@ export const nb = {
     tasksToRetry: 'Oppgaver å gjenta',
     goToTask: 'Gå til oppgave',
     welcomeToStop: 'Velkommen til {stop}',
+    imageThingsLeftToFind: '{count} ting igjen å finne',
+    imageAllThingsFound: 'Alle ting er funnet',
     email: {
       inbox: 'Innboks',
       whatWouldYouDo: 'Hva ville du gjort?',

From a0eb412b7c3e35b25f085243a9826de3dff70a70 Mon Sep 17 00:00:00 2001
From: eilifhl <eilifhl@stud.ntnu.no>
Date: Sat, 2 May 2026 12:21:32 +0200
Subject: [PATCH 64/66] avoid navigating withoiut slug

---
 src/classrooms/pages/TaskEditorPage.vue | 30 +++++++++++++++++++------
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/classrooms/pages/TaskEditorPage.vue b/src/classrooms/pages/TaskEditorPage.vue
index 3068741d..b19a7052 100644
--- a/src/classrooms/pages/TaskEditorPage.vue
+++ b/src/classrooms/pages/TaskEditorPage.vue
@@ -75,6 +75,28 @@ async function redirectFromImageSelectTask(stopId: number) {
   })
 }
 
+async function navigateAfterSave() {
+  const slug = selectedStop.value?.slug
+
+  if (slug) {
+    await router.push({
+      name: 'classroom-tasks',
+      params: {
+        classroomId: classroomId.value,
+        slug,
+      },
+    })
+    return
+  }
+
+  await router.push({
+    name: 'teacher-classroom-details',
+    params: {
+      classroomId: classroomId.value,
+    },
+  })
+}
+
 async function loadTask() {
   if (!taskId.value || !authStore.authorizationHeader) return
 
@@ -128,13 +150,7 @@ async function save() {
       )
     }
 
-    await router.push({
-      name: 'classroom-tasks',
-      params: {
-        classroomId: classroomId.value,
-        slug: selectedStop.value?.slug,
-      },
-    })
+    await navigateAfterSave()
   } catch (e) {
     error.value = e instanceof Error ? e.message : t('newTask.savefail')
   } finally {

From 122639ac921baef8da9985407abfb68b01568e98 Mon Sep 17 00:00:00 2001
From: eilifhl <eilifhl@stud.ntnu.no>
Date: Sat, 2 May 2026 12:28:56 +0200
Subject: [PATCH 65/66] clear task item metadata when changing type

---
 .../model/__tests__/task-editor.utils.spec.ts | 58 +++++++++++++++++++
 .../tasks/model/task-editor.utils.ts          |  9 +++
 2 files changed, 67 insertions(+)
 create mode 100644 src/classrooms/components/tasks/model/__tests__/task-editor.utils.spec.ts

diff --git a/src/classrooms/components/tasks/model/__tests__/task-editor.utils.spec.ts b/src/classrooms/components/tasks/model/__tests__/task-editor.utils.spec.ts
new file mode 100644
index 00000000..3f779534
--- /dev/null
+++ b/src/classrooms/components/tasks/model/__tests__/task-editor.utils.spec.ts
@@ -0,0 +1,58 @@
+import { describe, expect, it } from 'vitest'
+
+import { taskEditorDraftToTaskForm } from '@/classrooms/components/tasks/model/task-editor.mappers'
+import type { TaskEditorDraft } from '@/classrooms/components/tasks/model/task-editor.types'
+import { changeDraftTaskType } from '@/classrooms/components/tasks/model/task-editor.utils'
+
+function createNewsComparisonDraft(): TaskEditorDraft {
+  return {
+    id: 1,
+    classroomId: 2,
+    stopId: 3,
+    createdByTeacherId: 4,
+    title: { en: 'Title', nb: 'Tittel' },
+    introText: { en: '', nb: '' },
+    difficultyLevel: 1,
+    taskType: 'NEWS_COMPARISON',
+    passingRule: 'ALL_CORRECT',
+    passingScore: null,
+    maxScore: 1,
+    published: false,
+    items: [
+      {
+        id: 5,
+        itemOrder: 1,
+        promptText: { en: 'Prompt', nb: 'Ledetekst' },
+        mediaUrl: null,
+        metadataJson: JSON.stringify({
+          articles: [{ title: { en: 'Old', nb: 'Gammel' } }],
+        }),
+        options: [],
+      },
+    ],
+    parsedMetadata: {
+      articlesByItemOrder: {
+        1: [{ title: { en: 'Old', nb: 'Gammel' } }],
+      },
+    },
+  }
+}
+
+describe('changeDraftTaskType', () => {
+  it('clears item metadata when changing task type', () => {
+    const draft = changeDraftTaskType(
+      createNewsComparisonDraft(),
+      'PASSWORD_EVALUATION',
+    )
+
+    expect(draft.items[0]?.metadataJson).toBeNull()
+    expect(taskEditorDraftToTaskForm(draft).items[0]?.metadataJson).toBeNull()
+  })
+
+  it('preserves item metadata when keeping the same task type', () => {
+    const original = createNewsComparisonDraft()
+    const draft = changeDraftTaskType(original, 'NEWS_COMPARISON')
+
+    expect(draft.items[0]?.metadataJson).toBe(original.items[0]?.metadataJson)
+  })
+})
diff --git a/src/classrooms/components/tasks/model/task-editor.utils.ts b/src/classrooms/components/tasks/model/task-editor.utils.ts
index eea0a6f7..2b0055f6 100644
--- a/src/classrooms/components/tasks/model/task-editor.utils.ts
+++ b/src/classrooms/components/tasks/model/task-editor.utils.ts
@@ -42,9 +42,18 @@ export function changeDraftTaskType(
   draft: TaskEditorDraft,
   taskType: TaskType,
 ): TaskEditorDraft {
+  const items =
+    draft.taskType === taskType
+      ? draft.items
+      : draft.items.map((item) => ({
+          ...item,
+          metadataJson: null,
+        }))
+
   const base = {
     ...draft,
     taskType,
+    items,
   }
 
   switch (taskType) {

From d042284e100c99112ef0fa317e31d5fa9e72661c Mon Sep 17 00:00:00 2001
From: eilifhl <eilifhl@stud.ntnu.no>
Date: Sat, 2 May 2026 12:35:13 +0200
Subject: [PATCH 66/66] increment difficulty if new stop already has difficulty

---
 .../model/__tests__/task-editor.utils.spec.ts | 24 +++++++--
 src/classrooms/pages/TaskEditorPage.vue       | 53 ++++++++++++++++++-
 2 files changed, 72 insertions(+), 5 deletions(-)

diff --git a/src/classrooms/components/tasks/model/__tests__/task-editor.utils.spec.ts b/src/classrooms/components/tasks/model/__tests__/task-editor.utils.spec.ts
index 3f779534..d5a2d3db 100644
--- a/src/classrooms/components/tasks/model/__tests__/task-editor.utils.spec.ts
+++ b/src/classrooms/components/tasks/model/__tests__/task-editor.utils.spec.ts
@@ -1,10 +1,10 @@
 import { describe, expect, it } from 'vitest'
 
 import { taskEditorDraftToTaskForm } from '@/classrooms/components/tasks/model/task-editor.mappers'
-import type { TaskEditorDraft } from '@/classrooms/components/tasks/model/task-editor.types'
+import type { NewsComparisonDraft } from '@/classrooms/components/tasks/model/task-editor.types'
 import { changeDraftTaskType } from '@/classrooms/components/tasks/model/task-editor.utils'
 
-function createNewsComparisonDraft(): TaskEditorDraft {
+function createNewsComparisonDraft(): NewsComparisonDraft {
   return {
     id: 1,
     classroomId: 2,
@@ -25,14 +25,30 @@ function createNewsComparisonDraft(): TaskEditorDraft {
         promptText: { en: 'Prompt', nb: 'Ledetekst' },
         mediaUrl: null,
         metadataJson: JSON.stringify({
-          articles: [{ title: { en: 'Old', nb: 'Gammel' } }],
+          articles: [
+            {
+              optionOrder: 1,
+              domain: 'example.test',
+              headline: { en: 'Old', nb: 'Gammel' },
+              body: null,
+              mediaUrl: null,
+            },
+          ],
         }),
         options: [],
       },
     ],
     parsedMetadata: {
       articlesByItemOrder: {
-        1: [{ title: { en: 'Old', nb: 'Gammel' } }],
+        1: [
+          {
+            optionOrder: 1,
+            domain: 'example.test',
+            headline: { en: 'Old', nb: 'Gammel' },
+            body: null,
+            mediaUrl: null,
+          },
+        ],
       },
     },
   }
diff --git a/src/classrooms/pages/TaskEditorPage.vue b/src/classrooms/pages/TaskEditorPage.vue
index b19a7052..cf0818c7 100644
--- a/src/classrooms/pages/TaskEditorPage.vue
+++ b/src/classrooms/pages/TaskEditorPage.vue
@@ -17,8 +17,10 @@ import {
 import type { TaskEditorDraft } from '@/classrooms/components/tasks/model/task-editor.types'
 import {
   requestCreateTask,
+  requestTasksForStop,
   requestTask,
   requestUpdateTask,
+  type TaskSummaryResponse,
 } from '@/stops/api/stops.api'
 
 const route = useRoute()
@@ -34,6 +36,7 @@ const isEditMode = computed(() => taskId.value !== null)
 
 const loading = ref(false)
 const error = ref<string | null>(null)
+const isSyncingStopDifficulty = ref(false)
 
 const {
   stops,
@@ -53,6 +56,54 @@ watch(stops, (nextStops) => {
   }
 })
 
+function nextAvailableDifficulty(tasks: TaskSummaryResponse[]) {
+  const usedDifficulties = new Set(
+    tasks
+      .filter((task) => task.id !== taskId.value)
+      .map((task) => task.difficultyLevel),
+  )
+
+  if (!usedDifficulties.has(form.value.difficultyLevel)) {
+    return form.value.difficultyLevel
+  }
+
+  let difficultyLevel = 1
+  while (usedDifficulties.has(difficultyLevel)) {
+    difficultyLevel += 1
+  }
+
+  return difficultyLevel
+}
+
+async function syncDifficultyForStop(stopId: number) {
+  if (!authStore.authorizationHeader || stopId <= 0) return
+
+  isSyncingStopDifficulty.value = true
+
+  try {
+    const tasks = await requestTasksForStop(
+      classroomId.value,
+      stopId,
+      authStore.authorizationHeader,
+    )
+
+    if (form.value.stopId === stopId) {
+      form.value.difficultyLevel = nextAvailableDifficulty(tasks)
+    }
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : t('newTask.savefail')
+  } finally {
+    isSyncingStopDifficulty.value = false
+  }
+}
+
+watch(
+  () => form.value.stopId,
+  (stopId) => {
+    syncDifficultyForStop(stopId)
+  },
+)
+
 async function redirectFromImageSelectTask(stopId: number) {
   const stop = stops.value.find((candidate) => candidate.stopId === stopId)
 
@@ -229,7 +280,7 @@ onMounted(loadTask)
 
       <button
         class="rounded-lg bg-green-600 px-6 py-2 text-white hover:bg-green-700"
-        :disabled="loading || form.stopId <= 0"
+        :disabled="loading || isSyncingStopDifficulty || form.stopId <= 0"
         @click="save"
       >
         {{ isEditMode ? t('newTask.save') : t('newTask.create') }}