diff --git a/.github/workflows/issuesToProject.yml b/.github/workflows/issuesToProject.yml
deleted file mode 100644
index fc76f25944..0000000000
--- a/.github/workflows/issuesToProject.yml
+++ /dev/null
@@ -1,16 +0,0 @@
-name: Add issues to issues project
-
-on:
-  issues:
-    types:
-      - opened
-
-jobs:
-  add-to-project:
-    name: Add issue to project
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/add-to-project@main
-        with:
-          project-url: https://github.com/orgs/dodona-edu/projects/2
-          github-token: ${{ secrets.ADD_TO_PROJECT_PAT }}
diff --git a/Gemfile b/Gemfile
index 359b6026c4..6d3a3aa11a 100644
--- a/Gemfile
+++ b/Gemfile
@@ -8,7 +8,7 @@ gem 'rails', '~> 7.0.4'
 # Use mysql as the database for Active Record
 gem 'mysql2', '~> 0.5.5'
 # Use Puma as the app server
-gem 'puma', '~> 6.1.1'
+gem 'puma', '~> 6.2.2'
 
 # Use dart-sass for stylesheets
 gem 'cssbundling-rails', '~> 1.1.2'
@@ -51,7 +51,7 @@ gem 'will_paginate', '~>3.3.1'
 # markdown rendering and syntax highlighting
 gem 'kramdown', '~>2.4.0'
 gem 'kramdown-parser-gfm', '~>1.1.0'
-gem 'rouge', '4.1.0'
+gem 'rouge', '4.1.1'
 
 # feedback table builder
 gem 'builder', '~>3.2.4'
@@ -66,13 +66,13 @@ gem 'ace-rails-ap', '~>4.5'
 gem 'autoprefixer-rails', '~>10.4.13'
 
 # saml authentication
-gem 'devise', '~>4.9.0'
+gem 'devise', '~>4.9.2'
 gem 'ruby-saml', '~> 1.15.0'
 
 # omniauth
 gem 'omniauth-google-oauth2', '~> 1.1.1'
 gem 'omniauth-oauth2', '~> 1.8.0'
-gem 'omniauth_openid_connect', '~> 0.6.1'
+gem 'omniauth_openid_connect', '~> 0.7.1'
 gem 'omniauth-rails_csrf_protection', '~> 1.0.1'
 
 # Json webtokens
@@ -105,8 +105,8 @@ gem 'bcrypt_pbkdf'
 gem 'ed25519'
 
 # i18n
-gem 'i18n-js', '~> 4.2.2'
-gem 'rails-i18n', '~> 7.0.6'
+gem 'i18n-js', '~> 4.2.3'
+gem 'rails-i18n', '~> 7.0.7'
 
 # email exceptions
 gem 'exception_notification', '~> 4.5.0'
@@ -114,7 +114,7 @@ gem 'httparty', '~> 0.21.0'
 gem 'slack-notifier', '~> 2.4.0'
 
 # css styles for emails
-gem 'nokogiri', '~> 1.14.2'
+gem 'nokogiri', '~> 1.14.4'
 gem 'premailer-rails', '~> 1.12.0'
 
 # filtering
@@ -127,15 +127,15 @@ gem 'rubyzip', '~> 2.3.2'
 gem 'dalli', '~> 3.2.4'
 
 # Generate 'random' values like usernames, emails, ...
-gem 'faker', '~> 3.1.1'
+gem 'faker', '~> 3.2.0'
 
 # Profiling
 gem 'flamegraph', '~> 0.9.5'
 gem 'memory_profiler', '~> 1.0.1'
-gem 'rack-mini-profiler', '~> 3.0.0'
-gem 'stackprof', '~> 0.2.24'
+gem 'rack-mini-profiler', '~> 3.1.0'
+gem 'stackprof', '~> 0.2.25'
 
-gem 'ddtrace', '~> 1.10.1'
+gem 'ddtrace', '~> 1.11.1'
 
 # Make sure filesystem changes only happen at the end of a transaction
 gem 'after_commit_everywhere', '~> 1.3.0'
@@ -156,8 +156,8 @@ group :development, :test do
   gem 'byebug', '~> 11.1.3', platforms: %i[mri mingw x64_mingw]
 
   # Adds support for Capybara system testing and selenium driver
-  gem 'capybara', '~> 3.38.0'
-  gem 'selenium-webdriver', '~> 4.8.3'
+  gem 'capybara', '~> 3.39.1'
+  gem 'selenium-webdriver', '~> 4.9.1'
 end
 
 group :test do
@@ -180,7 +180,7 @@ group :development do
   gem 'web-console', '~> 4.2.0'
 
   gem 'rb-readline', '~> 0.5.5' # require for irb
-  gem 'rubocop-rails', '~> 2.18.0'
+  gem 'rubocop-rails', '~> 2.19.1'
 
   # for opening letters
   gem 'letter_opener', '~> 1.8.1'
diff --git a/Gemfile.lock b/Gemfile.lock
index 5b078420b6..d1d8a29544 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -67,7 +67,7 @@ GEM
       i18n (>= 1.6, < 2)
       minitest (>= 5.1)
       tzinfo (~> 2.0)
-    addressable (2.8.1)
+    addressable (2.8.4)
       public_suffix (>= 2.0.2, < 6.0)
     aes_key_wrap (1.1.0)
     after_commit_everywhere (1.3.0)
@@ -110,7 +110,7 @@ GEM
     capistrano3-delayed-job (1.7.6)
       capistrano (~> 3.0, >= 3.0.0)
       daemons (~> 1.3)
-    capybara (3.38.0)
+    capybara (3.39.1)
       addressable
       matrix
       mini_mime (>= 0.1.3)
@@ -133,10 +133,10 @@ GEM
     daemons (1.4.1)
     dalli (3.2.4)
     date (3.3.3)
-    ddtrace (1.10.1)
+    ddtrace (1.11.1)
       debase-ruby_core_source (>= 0.10.16, <= 3.2.0)
       libdatadog (~> 2.0.0.1.0)
-      libddwaf (~> 1.6.2.0.0)
+      libddwaf (~> 1.8.2.0.0)
       msgpack
     debase-ruby_core_source (3.2.0)
     delayed_job (4.1.10)
@@ -149,7 +149,7 @@ GEM
       delayed_job (> 2.0.3)
       rack-protection (>= 1.5.5)
       sinatra (>= 1.4.4)
-    devise (4.9.0)
+    devise (4.9.2)
       bcrypt (~> 3.0)
       orm_adapter (~> 0.1)
       railties (>= 4.1.0)
@@ -174,7 +174,7 @@ GEM
     factory_bot_rails (6.2.0)
       factory_bot (~> 6.2.0)
       railties (>= 5.0.0)
-    faker (3.1.1)
+    faker (3.2.0)
       i18n (>= 1.8.11, < 2)
     faraday (2.7.4)
       faraday-net_http (>= 2.0, < 3.1)
@@ -199,10 +199,9 @@ GEM
     httparty (0.21.0)
       mini_mime (>= 1.0.0)
       multi_xml (>= 0.5.2)
-    httpclient (2.8.3)
-    i18n (1.12.0)
+    i18n (1.13.0)
       concurrent-ruby (~> 1.0)
-    i18n-js (4.2.2)
+    i18n-js (4.2.3)
       glob (>= 0.4.0)
       i18n
     icalendar (2.8.0)
@@ -238,14 +237,14 @@ GEM
     letter_opener (1.8.1)
       launchy (>= 2.2, < 3)
     libdatadog (2.0.0.1.0-x86_64-linux)
-    libddwaf (1.6.2.0.0-x86_64-linux)
+    libddwaf (1.8.2.0.0-x86_64-linux)
       ffi (~> 1.0)
     listen (3.8.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
-    loofah (2.19.1)
+    loofah (2.21.2)
       crass (~> 1.0.2)
-      nokogiri (>= 1.5.9)
+      nokogiri (>= 1.12.0)
     mail (2.8.1)
       mini_mime (>= 0.1.1)
       net-imap
@@ -267,7 +266,7 @@ GEM
       minitest
     mocha (2.0.2)
       ruby2_keywords (>= 0.0.5)
-    msgpack (1.6.1)
+    msgpack (1.7.0)
     multi_json (1.15.0)
     multi_xml (0.6.0)
     mustermann (3.0.0)
@@ -285,8 +284,8 @@ GEM
     net-smtp (0.3.3)
       net-protocol
     net-ssh (7.0.1)
-    nio4r (2.5.8)
-    nokogiri (1.14.2-x86_64-linux)
+    nio4r (2.5.9)
+    nokogiri (1.14.4-x86_64-linux)
       racc (~> 1.4)
     oauth2 (2.0.8)
       faraday (>= 0.17.3, < 3.0)
@@ -310,23 +309,25 @@ GEM
     omniauth-rails_csrf_protection (1.0.1)
       actionpack (>= 4.2)
       omniauth (~> 2.0)
-    omniauth_openid_connect (0.6.1)
+    omniauth_openid_connect (0.7.1)
       omniauth (>= 1.9, < 3)
-      openid_connect (~> 1.1)
-    openid_connect (1.4.2)
+      openid_connect (~> 2.2)
+    openid_connect (2.2.0)
       activemodel
       attr_required (>= 1.0.0)
-      json-jwt (>= 1.15.0)
+      faraday (~> 2.0)
+      faraday-follow_redirects
+      json-jwt (>= 1.16)
       net-smtp
-      rack-oauth2 (~> 1.21)
-      swd (~> 1.3)
+      rack-oauth2 (~> 2.2)
+      swd (~> 2.0)
       tzinfo
       validate_email
       validate_url
-      webfinger (~> 1.2)
+      webfinger (~> 2.0)
     orm_adapter (0.5.0)
     parallel (1.22.1)
-    parser (3.2.1.0)
+    parser (3.2.2.0)
       ast (~> 2.4.1)
     premailer (1.18.0)
       addressable
@@ -339,18 +340,19 @@ GEM
     pretender (0.4.0)
       actionpack (>= 5.2)
     public_suffix (5.0.1)
-    puma (6.1.1)
+    puma (6.2.2)
       nio4r (~> 2.0)
     pundit (2.3.0)
       activesupport (>= 3.0.0)
     racc (1.6.2)
-    rack (2.2.6.4)
-    rack-mini-profiler (3.0.0)
+    rack (2.2.7)
+    rack-mini-profiler (3.1.0)
       rack (>= 1.2.0)
-    rack-oauth2 (1.21.3)
+    rack-oauth2 (2.2.0)
       activesupport
       attr_required
-      httpclient
+      faraday (~> 2.0)
+      faraday-follow_redirects
       json-jwt (>= 1.11.0)
       rack (>= 2.1.0)
     rack-protection (3.0.4)
@@ -380,7 +382,7 @@ GEM
       nokogiri (>= 1.6)
     rails-html-sanitizer (1.5.0)
       loofah (~> 2.19, >= 2.19.1)
-    rails-i18n (7.0.6)
+    rails-i18n (7.0.7)
       i18n (>= 0.7, < 2)
       railties (>= 6.0.0, < 8)
     railties (7.0.4.3)
@@ -396,29 +398,29 @@ GEM
     rb-inotify (0.10.1)
       ffi (~> 1.0)
     rb-readline (0.5.5)
-    regexp_parser (2.7.0)
+    regexp_parser (2.8.0)
     responders (3.1.0)
       actionpack (>= 5.2)
       railties (>= 5.2)
     rexml (3.2.5)
-    rouge (4.1.0)
-    rubocop (1.46.0)
+    rouge (4.1.1)
+    rubocop (1.50.2)
       json (~> 2.3)
       parallel (~> 1.10)
       parser (>= 3.2.0.0)
       rainbow (>= 2.2.2, < 4.0)
       regexp_parser (>= 1.8, < 3.0)
       rexml (>= 3.2.5, < 4.0)
-      rubocop-ast (>= 1.26.0, < 2.0)
+      rubocop-ast (>= 1.28.0, < 2.0)
       ruby-progressbar (~> 1.7)
       unicode-display_width (>= 2.4.0, < 3.0)
-    rubocop-ast (1.26.0)
+    rubocop-ast (1.28.0)
       parser (>= 3.2.1.0)
-    rubocop-rails (2.18.0)
+    rubocop-rails (2.19.1)
       activesupport (>= 4.2.0)
       rack (>= 1.1)
       rubocop (>= 1.33.0, < 2.0)
-    ruby-progressbar (1.11.0)
+    ruby-progressbar (1.13.0)
     ruby-saml (1.15.0)
       nokogiri (>= 1.13.10)
       rexml
@@ -426,7 +428,7 @@ GEM
       ffi (~> 1.12)
     ruby2_keywords (0.0.5)
     rubyzip (2.3.2)
-    selenium-webdriver (4.8.3)
+    selenium-webdriver (4.9.1)
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2, < 3.0)
       websocket (~> 1.0)
@@ -458,15 +460,16 @@ GEM
     sshkit (1.21.2)
       net-scp (>= 1.1.2)
       net-ssh (>= 2.8.0)
-    stackprof (0.2.24)
-    swd (1.3.0)
+    stackprof (0.2.25)
+    swd (2.0.2)
       activesupport (>= 3)
       attr_required (>= 0.0.5)
-      httpclient (>= 2.4)
-    terser (1.1.14)
+      faraday (~> 2.0)
+      faraday-follow_redirects
+    terser (1.1.15)
       execjs (>= 0.3.0, < 3)
     test-prof (1.2.1)
-    thor (1.2.1)
+    thor (1.2.2)
     tilt (2.0.11)
     timeout (0.3.2)
     tzinfo (2.0.6)
@@ -487,9 +490,10 @@ GEM
       activemodel (>= 6.0.0)
       bindex (>= 0.4.0)
       railties (>= 6.0.0)
-    webfinger (1.2.0)
+    webfinger (2.1.2)
       activesupport
-      httpclient (>= 2.4)
+      faraday (~> 2.0)
+      faraday-follow_redirects
     webmock (3.18.1)
       addressable (>= 2.8.0)
       crack (>= 0.3.2)
@@ -501,7 +505,7 @@ GEM
     will_paginate (3.3.1)
     xpath (3.2.0)
       nokogiri (~> 1.8)
-    zeitwerk (2.6.7)
+    zeitwerk (2.6.8)
 
 PLATFORMS
   x86_64-linux
@@ -520,25 +524,25 @@ DEPENDENCIES
   capistrano-rvm (~> 0.1.2)
   capistrano-yarn (~> 2.0.2)
   capistrano3-delayed-job (~> 1.7.6)
-  capybara (~> 3.38.0)
+  capybara (~> 3.39.1)
   counter_culture (~> 3.2)
   cssbundling-rails (~> 1.1.2)
   dalli (~> 3.2.4)
-  ddtrace (~> 1.10.1)
+  ddtrace (~> 1.11.1)
   delayed_job_active_record (~> 4.1.7)
   delayed_job_web (~> 1.4.4)
-  devise (~> 4.9.0)
+  devise (~> 4.9.2)
   diff-lcs (~> 1.5)
   docker-api (~> 2.2.0)
   ed25519
   exception_notification (~> 4.5.0)
   factory_bot_rails (~> 6.2.0)
-  faker (~> 3.1.1)
+  faker (~> 3.2.0)
   flamegraph (~> 0.9.5)
   has_scope (~> 0.8.1)
   hcaptcha (~> 7.1.0)
   httparty (~> 0.21.0)
-  i18n-js (~> 4.2.2)
+  i18n-js (~> 4.2.3)
   icalendar (~> 2.8)
   image_processing (~> 1.12.2)
   jbuilder (~> 2.11.5)
@@ -556,30 +560,30 @@ DEPENDENCIES
   minitest-utils (~> 0.4.8)
   mocha (~> 2.0.2)
   mysql2 (~> 0.5.5)
-  nokogiri (~> 1.14.2)
+  nokogiri (~> 1.14.4)
   omniauth-google-oauth2 (~> 1.1.1)
   omniauth-oauth2 (~> 1.8.0)
   omniauth-rails_csrf_protection (~> 1.0.1)
-  omniauth_openid_connect (~> 0.6.1)
+  omniauth_openid_connect (~> 0.7.1)
   premailer-rails (~> 1.12.0)
   pretender (~> 0.4.0)
-  puma (~> 6.1.1)
+  puma (~> 6.2.2)
   pundit (~> 2.3.0)
-  rack-mini-profiler (~> 3.0.0)
+  rack-mini-profiler (~> 3.1.0)
   rails (~> 7.0.4)
   rails-controller-testing (~> 1.0.5)
-  rails-i18n (~> 7.0.6)
+  rails-i18n (~> 7.0.7)
   rb-readline (~> 0.5.5)
-  rouge (= 4.1.0)
-  rubocop-rails (~> 2.18.0)
+  rouge (= 4.1.1)
+  rubocop-rails (~> 2.19.1)
   ruby-saml (~> 1.15.0)
   rubyzip (~> 2.3.2)
-  selenium-webdriver (~> 4.8.3)
+  selenium-webdriver (~> 4.9.1)
   simplecov (~> 0.22.0)
   simplecov-cobertura (~> 2.1.0)
   slack-notifier (~> 2.4.0)
   sprockets-rails (~> 3.4.2)
-  stackprof (~> 0.2.24)
+  stackprof (~> 0.2.25)
   terser (>= 1.1.1)
   test-prof (~> 1.2.1)
   tzinfo-data
diff --git a/app/assets/javascripts/code_listing.ts b/app/assets/javascripts/code_listing.ts
new file mode 100644
index 0000000000..501a2435f4
--- /dev/null
+++ b/app/assets/javascripts/code_listing.ts
@@ -0,0 +1,81 @@
+import { CodeListingRow } from "components/annotations/code_listing_row";
+import { render } from "lit";
+import { userAnnotationState } from "state/UserAnnotations";
+import { MachineAnnotationData, machineAnnotationState } from "state/MachineAnnotations";
+import { courseState } from "state/Courses";
+import { userState } from "state/Users";
+import { submissionState } from "state/Submissions";
+import "components/annotations/annotation_options";
+import "components/annotations/annotations_count_badge";
+import { annotationState } from "state/Annotations";
+import { exerciseState } from "state/Exercises";
+import { triggerSelectionEnd } from "components/annotations/select";
+
+const MARKING_CLASS = "marked";
+
+function initAnnotations(submissionId: number, courseId: number, exerciseId: number, userId: number, code: string, codeLines: number, questionMode = false): void {
+    userAnnotationState.reset();
+    submissionState.code = code;
+    courseState.id = courseId;
+    exerciseState.id = exerciseId;
+    userState.id = userId;
+    submissionState.id = submissionId;
+    annotationState.isQuestionMode = questionMode;
+
+    const table = document.querySelector<HTMLTableElement>("table.code-listing");
+    const rows = table.querySelectorAll("tr");
+
+    for (let i = 0; i < rows.length; i++) {
+        const code = rows[i].querySelector("td.rouge-code > pre").innerHTML;
+        const codeListingRow = new CodeListingRow();
+        codeListingRow.row = i + 1;
+        codeListingRow.renderedCode = code;
+        render(codeListingRow, rows[i].parentElement, { renderBefore: rows[i] });
+        rows[i].remove();
+    }
+}
+
+function addMachineAnnotations(data: MachineAnnotationData[]): void {
+    machineAnnotationState.setMachineAnnotations(data);
+}
+
+function initAnnotateButtons(): void {
+    userState.addPermission("annotation.create");
+
+    document.addEventListener("pointerup", () => triggerSelectionEnd());
+}
+
+function loadUserAnnotations(): void {
+    userAnnotationState.fetch(submissionState.id);
+    // only show important annotations if any user annotations exist
+    annotationState.visibility = "important";
+}
+
+
+// /////////////////////////////////////////////////////////////////////////
+// Highlighting ////////////////////////////////////////////////////////////
+// /////////////////////////////////////////////////////////////////////////
+
+function clearHighlights(): void {
+    const markedAnnotations = document.querySelectorAll(`tr.lineno.${MARKING_CLASS}`);
+    markedAnnotations.forEach(markedAnnotation => {
+        markedAnnotation.classList.remove(MARKING_CLASS);
+    });
+}
+
+function highlightLine(lineNr: number, scrollToLine = false): void {
+    const toMarkAnnotationRow = document.querySelector(`tr.lineno#line-${lineNr}`);
+    toMarkAnnotationRow.classList.add(MARKING_CLASS);
+    if (scrollToLine) {
+        toMarkAnnotationRow.scrollIntoView({ block: "center" });
+    }
+}
+
+export default {
+    initAnnotations,
+    addMachineAnnotations,
+    initAnnotateButtons,
+    loadUserAnnotations,
+    clearHighlights,
+    highlightLine,
+};
diff --git a/app/assets/javascripts/code_listing/annotation.ts b/app/assets/javascripts/code_listing/annotation.ts
deleted file mode 100644
index e63c8b8046..0000000000
--- a/app/assets/javascripts/code_listing/annotation.ts
+++ /dev/null
@@ -1,259 +0,0 @@
-import { NewSavedAnnotation } from "components/saved_annotations/new_saved_annotation";
-import { isBetaCourse } from "saved_annotation_beta";
-import { SavedAnnotationIcon } from "components/saved_annotations/saved_annotation_icon";
-
-export type AnnotationType = "error" | "info" | "user" | "warning" | "question";
-export type QuestionState = "unanswered" | "answered" | "in_progress";
-
-export abstract class Annotation {
-    private static idCounter = 0;
-
-    protected __html: HTMLDivElement | null;
-
-    public readonly __id;
-    public readonly line: number | null;
-    public readonly text: string;
-    public readonly type: AnnotationType;
-    public readonly id: number;
-
-    protected constructor(line: number | null, text: string, type: AnnotationType) {
-        this.__html = null;
-        this.__id = Annotation.idCounter++;
-        this.line = line;
-        this.text = text;
-        this.type = type;
-    }
-
-    protected get body(): HTMLDivElement {
-        const body = document.createElement("div") as HTMLDivElement;
-        body.classList.add("annotation-text");
-        body.innerHTML = this.text;
-        return body;
-    }
-
-    protected get class(): string | null {
-        return null;
-    }
-
-    protected edit(): void {
-        // Do nothing.
-    }
-
-    public get global(): boolean {
-        return this.line === null;
-    }
-
-    public hide(): void {
-        this.__html.classList.add("hide");
-    }
-
-    private get header(): HTMLDivElement {
-        const header = document.createElement("div") as HTMLDivElement;
-        header.classList.add("annotation-header");
-
-        // Metadata.
-        const meta = document.createElement("span") as HTMLSpanElement;
-        meta.classList.add("annotation-meta");
-        meta.textContent = this.meta;
-        header.appendChild(meta);
-
-        if (!this.visible) {
-            const icon = document.createElement("i");
-            icon.classList.add("mdi", "mdi-eye-off", "mdi-18", "annotation-meta-icon");
-            icon.title = I18n.t("js.user_annotation.not_released");
-            meta.appendChild(icon);
-        }
-
-        if (this.hasNotice) {
-            const span = document.createElement("span");
-            span.textContent = " ·";
-            const url = document.createElement("a");
-            url.href = this.noticeUrl;
-            url.setAttribute("target", "_blank");
-            if (this.useNoticeIcon) {
-                const icon = document.createElement("i");
-                icon.classList.add("mdi", "mdi-information", "mdi-18", "colored-info", "annotation-warning");
-                icon.dataset.bsToggle = "tooltip";
-                icon.dataset.bsPlacement = "top";
-                icon.title = this.noticeInfo;
-                url.appendChild(icon);
-            } else {
-                url.textContent = " " + this.noticeInfo;
-            }
-            span.appendChild(url);
-            meta.appendChild(span);
-        }
-
-        // Update button.
-        if (this.modifiable) {
-            const editLink = document.createElement("a");
-            editLink.addEventListener("click", () => this.edit());
-            editLink.classList.add("btn", "btn-icon", "annotation-control-button", "annotation-edit");
-            editLink.title = this.editTitle;
-
-            const editIcon = document.createElement("i");
-            editIcon.classList.add("mdi", "mdi-pencil");
-            editLink.appendChild(editIcon);
-
-            header.appendChild(editLink);
-
-            // REMOVE IF AFTER CLOSED BETA
-            if (isBetaCourse(this.courseId)) {
-                // Add button to create saved annotation
-                const saveLink = new NewSavedAnnotation();
-                saveLink.fromAnnotationId = this.id;
-                saveLink.annotationText = this.rawText;
-                saveLink.savedAnnotationId = this.savedAnnotationId;
-
-                header.appendChild(saveLink);
-
-                // Add icon to signify saved annotation
-                const icon = new SavedAnnotationIcon();
-                icon.savedAnnotationId = this.savedAnnotationId;
-
-                // update icon if annotation is saved
-                saveLink.addEventListener("created", (e: CustomEvent) => {
-                    icon.savedAnnotationId = e.detail.id;
-                });
-
-                meta.appendChild(icon);
-            }
-        }
-
-        if (this.transitionable("answered")) {
-            const link = document.createElement("a");
-            link.addEventListener("click", () => this.transition("answered"));
-            link.classList.add("btn", "btn-icon", "question-control-button", "question-resolve");
-            link.title = I18n.t("js.user_question.resolve");
-
-            const icon = document.createElement("i");
-            icon.classList.add("mdi", "mdi-check");
-            link.appendChild(icon);
-
-            header.appendChild(link);
-        }
-
-        if (this.transitionable("in_progress")) {
-            const link = document.createElement("a");
-            link.addEventListener("click", () => this.transition("in_progress"));
-            link.classList.add("btn", "btn-icon", "question-control-button", "question-in_progress");
-            link.title = I18n.t("js.user_question.in_progress");
-
-            const icon = document.createElement("i");
-            icon.classList.add("mdi", "mdi-comment-processing-outline");
-            link.appendChild(icon);
-
-            header.appendChild(link);
-        }
-
-        if (this.transitionable("unanswered")) {
-            const link = document.createElement("a");
-            link.addEventListener("click", () => this.transition("unanswered"));
-            link.classList.add("btn", "btn-icon", "question-control-button", "question-unresolve");
-            link.title = I18n.t("js.user_question.unresolve");
-
-            const icon = document.createElement("i");
-            icon.classList.add("mdi", "mdi-restart");
-            link.appendChild(icon);
-
-            header.appendChild(link);
-        }
-
-        return header;
-    }
-
-    get html(): HTMLDivElement {
-        if (this.__html === null) {
-            // Generate a new element.
-            this.__html = document.createElement("div") as HTMLDivElement;
-            this.__html.classList.add("annotation", this.type);
-            if (this.class !== null) {
-                this.__html.classList.add(this.class);
-            }
-            this.__html.id = `annotation-div-${this.__id}`;
-            this.__html.title = this.title;
-
-            // Body.
-            this.__html.appendChild(this.header);
-            this.__html.appendChild(this.body);
-            // Ask MathJax to search for math in the annotations
-            window.MathJax.typeset();
-        }
-
-        return this.__html;
-    }
-
-    get important(): boolean {
-        return this.type === "error" || this.type === "user" || this.type == "question";
-    }
-
-    protected abstract get meta(): string;
-
-    public get modifiable(): boolean {
-        return false;
-    }
-
-    public transitionable(to: QuestionState): boolean {
-        return false;
-    }
-
-    public get rawText(): string {
-        return this.text;
-    }
-
-    public get savedAnnotationId(): number | null {
-        return null;
-    }
-
-    public get removable(): boolean {
-        return false;
-    }
-
-    public get visible(): boolean {
-        return true;
-    }
-
-    public async remove(): Promise<void> {
-        this.__html.remove();
-    }
-
-    public show(): void {
-        this.__html.classList.remove("hide");
-    }
-
-    protected abstract get title(): string;
-
-    protected get editTitle(): string {
-        return "";
-    }
-
-    protected get hasNotice(): boolean {
-        return false;
-    }
-
-    protected get noticeUrl(): string | null {
-        return null;
-    }
-
-    protected get noticeInfo(): string | null {
-        return null;
-    }
-
-    protected get useNoticeIcon(): boolean {
-        return true;
-    }
-
-    // REMOVE AFTER CLOSED BETA
-    protected get courseId(): number {
-        return undefined;
-    }
-
-    public async update(data): Promise<Annotation> {
-        // Do nothing.
-        return data;
-    }
-
-    protected async transition(to: QuestionState): Promise<void> {
-        // Do nothing.
-    }
-}
diff --git a/app/assets/javascripts/code_listing/code_listing.ts b/app/assets/javascripts/code_listing/code_listing.ts
deleted file mode 100644
index 52fbcd25a7..0000000000
--- a/app/assets/javascripts/code_listing/code_listing.ts
+++ /dev/null
@@ -1,524 +0,0 @@
-import { initTooltips } from "util.js";
-import { Annotation, AnnotationType } from "code_listing/annotation";
-import { MachineAnnotation, MachineAnnotationData } from "code_listing/machine_annotation";
-import {
-    UserAnnotation,
-    UserAnnotationData,
-    UserAnnotationFormData
-} from "code_listing/user_annotation";
-import { createUserAnnotation, getAllUserAnnotations } from "code_listing/question_annotation";
-import "components/saved_annotations/saved_annotation_input";
-import { AnnotationForm } from "components/annotations/annotation_form";
-import { createSavedAnnotation, invalidateSavedAnnotation } from "state/SavedAnnotations";
-
-const annotationGlobalAdd = "#add_global_annotation";
-const annotationsGlobal = "#feedback-table-global-annotations";
-const annotationsGlobalGroups = "#feedback-table-global-annotations-list";
-const annotationHideAll = "#hide_all_annotations";
-const annotationShowAll = "#show_all_annotations";
-const annotationShowErrors = "#show_only_errors";
-const annotationToggles = "#annotations_toggles";
-const badge = "#badge_code";
-
-type OrderGroup = "error" | "conversation" | "warning" | "info";
-
-// Map in which annotation group the annotation should appear.
-const GROUP_MAPPING: Record<AnnotationType, OrderGroup> = {
-    "error": "error",
-    "user": "conversation",
-    "warning": "warning",
-    "info": "info",
-    "question": "conversation"
-};
-
-// Order the groups. We use the same order as appearance in the mapping.
-const GROUP_ORDER: OrderGroup[] = Array.from(new Set(Object.values(GROUP_MAPPING)));
-
-export class CodeListing {
-    private readonly annotations: Map<number, Annotation[]>;
-
-    public readonly code: string;
-    public readonly codeLines: number;
-    public readonly submissionId: number;
-    public readonly courseId: number | null;
-    public readonly exerciseId: number;
-    public readonly userId: number;
-
-    private readonly markingClass: string = "marked";
-    private evaluationId: number;
-
-    private readonly badge: HTMLSpanElement;
-    private readonly table: HTMLTableElement;
-
-    private readonly globalAnnotations: HTMLDivElement;
-    private readonly globalAnnotationGroups: HTMLDivElement;
-    private readonly hideAllAnnotations: HTMLButtonElement;
-    private readonly showAllAnnotations: HTMLButtonElement;
-    private readonly showErrorAnnotations: HTMLButtonElement;
-    private readonly annotationToggles: HTMLDivElement;
-
-    private readonly questionMode: boolean;
-
-    constructor(submissionId: number, courseId: number, exerciseId: number, userId: number, code: string, codeLines: number, questionMode = false) {
-        this.annotations = new Map<number, Annotation[]>();
-        this.code = code;
-        this.codeLines = codeLines;
-        this.submissionId = submissionId;
-        this.courseId = courseId;
-        this.exerciseId = exerciseId;
-        this.userId = userId;
-        this.questionMode = questionMode;
-
-        this.badge = document.querySelector<HTMLSpanElement>(badge);
-        this.table = document.querySelector<HTMLTableElement>("table.code-listing");
-
-        this.hideAllAnnotations = document.querySelector<HTMLButtonElement>(annotationHideAll);
-        this.showAllAnnotations = document.querySelector<HTMLButtonElement>(annotationShowAll);
-        this.showErrorAnnotations = document.querySelector<HTMLButtonElement>(annotationShowErrors);
-        this.annotationToggles = document.querySelector<HTMLDivElement>(annotationToggles);
-
-        this.globalAnnotations = document.querySelector<HTMLDivElement>(annotationsGlobal);
-        this.globalAnnotationGroups = document.querySelector<HTMLDivElement>(annotationsGlobalGroups);
-
-        this.initAnnotations();
-    }
-
-    setEvaluation(id: number): void {
-        this.evaluationId = id;
-    }
-
-    // /////////////////////////////////////////////////////////////////////////
-    // Highlighting ////////////////////////////////////////////////////////////
-    // /////////////////////////////////////////////////////////////////////////
-
-    clearHighlights(): void {
-        const markedAnnotations = this.table.querySelectorAll(`tr.lineno.${this.markingClass}`);
-        markedAnnotations.forEach(markedAnnotation => {
-            markedAnnotation.classList.remove(this.markingClass);
-        });
-    }
-
-    highlightLine(lineNr: number, scrollToLine = false): void {
-        const toMarkAnnotationRow = this.table.querySelector(`tr.lineno#line-${lineNr}`);
-        toMarkAnnotationRow.classList.add(this.markingClass);
-        if (scrollToLine) {
-            toMarkAnnotationRow.scrollIntoView({ block: "center" });
-        }
-    }
-
-    // /////////////////////////////////////////////////////////////////////////
-    // Annotation management ///////////////////////////////////////////////////
-    // /////////////////////////////////////////////////////////////////////////
-
-    public addAnnotation(annotation: Annotation): void {
-        const line = annotation.global ? 0 : annotation.line;
-
-        if (!this.annotations.has(line)) {
-            this.annotations.set(line, []);
-        }
-
-        // Add the annotation in the map.
-        this.annotations.get(line).push(annotation);
-
-        // Append the HTML component of the annotation to the code table.
-        if (annotation.global) {
-            this.appendAnnotationToGlobal(annotation);
-        } else {
-            this.appendAnnotationToTable(annotation);
-        }
-
-        this.updateViewState();
-    }
-
-    private addMachineAnnotation(data: MachineAnnotationData): void {
-        const annotation = new MachineAnnotation(data);
-        this.addAnnotation(annotation);
-    }
-
-    // noinspection JSUnusedGlobalSymbols used by FeedbackCodeRenderer.
-    public addMachineAnnotations(annotations: MachineAnnotationData[]): void {
-        annotations.forEach(ma => this.addMachineAnnotation(ma));
-    }
-
-    // Unit-testing purposes.
-    private addUserAnnotation(data: UserAnnotationData): void {
-        const annotation = new UserAnnotation(data,
-            (a, cb) => this.createUpdateAnnotationForm(a, cb));
-        this.addAnnotation(annotation);
-    }
-
-    // Unit-testing purposes.
-    public addUserAnnotations(annotations: UserAnnotationData[]): void {
-        annotations.forEach(ua => this.addUserAnnotation(ua));
-    }
-
-    // noinspection JSUnusedGlobalSymbols used by FeedbackCodeRenderer.
-    public async loadUserAnnotations(): Promise<void> {
-        return getAllUserAnnotations(this.submissionId,
-            (a, cb) => this.createUpdateAnnotationForm(a, cb))
-            .then(annotations => {
-                annotations.forEach(annotation => this.addAnnotation(annotation));
-                initTooltips();
-            });
-    }
-
-    public removeAnnotation(annotation: Annotation): void {
-        const line = annotation.global ? 0 : annotation.line;
-
-        // Remove the annotation from the map.
-        const lineAnnotations = this.annotations.get(line).filter(a => a.__id !== annotation.__id);
-        if (lineAnnotations.length === 0) {
-            this.annotations.delete(line);
-
-            // Remove the padding from the annotation list.
-            if (annotation.global) {
-                this.globalAnnotations.classList.remove("has-annotations");
-            }
-        } else {
-            this.annotations.set(line, lineAnnotations);
-        }
-
-        this.updateViewState();
-    }
-
-    public updateAnnotation(original: Annotation, updated: Annotation): void {
-        const origLine = original.global ? 0 : original.line;
-        const updLine = updated.global ? 0 : updated.line;
-
-        // Different line -> can simply remove and re-add.
-        if (origLine !== updLine) {
-            this.removeAnnotation(original);
-            this.addAnnotation(updated);
-            return;
-        }
-
-        // Find the annotation in the map.
-        const lineAnnotations = this.annotations.get(origLine);
-        lineAnnotations.forEach((annotation, idx) => {
-            if (annotation.__id === original.__id) {
-                lineAnnotations[idx] = updated;
-            }
-        });
-        this.annotations.set(updLine, lineAnnotations);
-
-        // Replace the HTML component.
-        document.querySelector(`#annotation-div-${original.__id}`).replaceWith(updated.html);
-    }
-
-    // /////////////////////////////////////////////////////////////////////////
-    // DOM operations //////////////////////////////////////////////////////////
-    // /////////////////////////////////////////////////////////////////////////
-
-    private appendAnnotationToGlobal(annotation: Annotation): void {
-        // Append the annotation.
-        this.globalAnnotationGroups
-            .querySelector<HTMLDivElement>(`.annotation-group-${GROUP_MAPPING[annotation.type]}`)
-            .appendChild(annotation.html);
-
-        // Add the padding to the global annotation list.
-        this.globalAnnotations.classList.add("has-annotations");
-    }
-
-    private appendAnnotationToTable(annotation: Annotation): void {
-        const line = Math.min(annotation.line, this.codeLines);
-        const row = this.table.querySelector<HTMLTableRowElement>(`#line-${line}`);
-
-        const cell = row.querySelector<HTMLDivElement>(`#annotation-cell-${line}`);
-        if (cell.querySelector(`.annotation-group-${GROUP_MAPPING[annotation.type]}`) === null) {
-            // Create the dot.
-            const dot = document.createElement("span") as HTMLSpanElement;
-            dot.classList.add("dot", "hide");
-            dot.id = `dot-${line}`;
-            row.querySelector<HTMLTableDataCellElement>(".rouge-gutter").prepend(dot);
-
-            // Create annotation groups.
-            GROUP_ORDER.forEach((type: string) => {
-                const group = document.createElement("div") as HTMLDivElement;
-                group.classList.add(`annotation-group-${type}`);
-                cell.appendChild(group);
-            });
-        }
-
-        // Append the annotation.
-        cell.querySelector<HTMLDivElement>(`.annotation-group-${GROUP_MAPPING[annotation.type]}`)
-            .appendChild(annotation.html);
-    }
-
-    // //////////////////////////////////////////////////////////////////////////
-    // Initialisations //////////////////////////////////////////////////////////
-    // //////////////////////////////////////////////////////////////////////////
-
-    private initAnnotations(): void {
-        // Create global annotation groups.
-        GROUP_ORDER.forEach((type: string) => {
-            const group = document.createElement("div") as HTMLDivElement;
-            group.classList.add(`annotation-group-${type}`);
-            this.globalAnnotationGroups.appendChild(group);
-        });
-
-        // Create annotation cells.
-        for (let i = 1; i <= this.codeLines; ++i) {
-            const tableLine = this.table.querySelector<HTMLTableRowElement>(`#line-${i}`);
-            tableLine.dataset["line"] = i.toString();
-            // Add an annotation container underneath the pre element.
-            const lineCodeCell = tableLine.querySelector<HTMLTableDataCellElement>(".rouge-code");
-            const annotationContainer = document.createElement("div") as HTMLDivElement;
-            annotationContainer.classList.add("annotation-cell");
-            annotationContainer.id = `annotation-cell-${i}`;
-            lineCodeCell.appendChild(annotationContainer);
-        }
-
-        // Toggle buttons.
-        this.hideAllAnnotations.addEventListener("click", () => this.hideAnnotations());
-        this.showAllAnnotations.addEventListener("click", () => this.showAnnotations());
-        this.showErrorAnnotations.addEventListener("click", () => this.hideAnnotations(true));
-    }
-
-    // noinspection JSUnusedGlobalSymbols used by FeedbackCodeRenderer.
-    public initAnnotateButtons(): void {
-        // Global annotations.
-        const globalButton = document.querySelector(annotationGlobalAdd);
-        globalButton.addEventListener("click", () => this.handleAnnotateGlobal());
-
-        const type = this.questionMode ? "user_question" : "user_annotation";
-        const title = I18n.t(`js.${type}.send`);
-
-        // Inline annotations.
-        const codeLines = this.table.querySelectorAll(".lineno");
-        codeLines.forEach((codeLine: HTMLTableRowElement) => {
-            const annotationButton = document.createElement("button") as HTMLButtonElement;
-            annotationButton.classList.add("btn", "btn-icon", "btn-icon-filled", "bg-primary", "annotation-button");
-            annotationButton.addEventListener("click", () => this.handleAnnotateLine(codeLine));
-            annotationButton.title = title;
-
-            const annotationButtonIcon = document.createElement("i") as HTMLElement;
-            const clazz = this.questionMode ? "mdi-comment-question-outline" : "mdi-comment-plus-outline";
-            annotationButtonIcon.classList.add("mdi", clazz, "mdi-18");
-            annotationButton.appendChild(annotationButtonIcon);
-
-            codeLine.querySelector(".rouge-gutter").prepend(annotationButton);
-        });
-    }
-
-    // /////////////////////////////////////////////////////////////////////////
-    // Show and hide annotations ///////////////////////////////////////////////
-    // /////////////////////////////////////////////////////////////////////////
-
-    public hideAnnotations(keepImportant = false): void {
-        this.annotations.forEach((annotations, _line) => {
-            // Do not hide global annotations.
-            if (_line === 0) {
-                return;
-            }
-            const line = Math.min(_line, this.codeLines);
-
-            // Find the dot for this line.
-            const dot = this.table.querySelector<HTMLSpanElement>(`#dot-${line}`);
-
-            // Determine the colours of the dot for this line.
-            const colours = annotations
-                .filter(annotation => !annotation.important || !keepImportant)
-                .map(annotation => `dot-${annotation.type}`);
-
-            // Configure the dot.
-            if (colours.length > 0) {
-                // Remove previous colours.
-                dot.classList.remove("hide", ...GROUP_ORDER.map(type => `dot-${type}`));
-
-                // Add new colours.
-                dot.classList.add(...colours);
-
-                // Help text.
-                const count = annotations.length;
-                if (count === 1) {
-                    dot.title = I18n.t("js.annotation.hidden.single");
-                } else {
-                    dot.title = I18n.t("js.annotation.hidden.plural", { count: count });
-                }
-            } else {
-                // Hide the dot.
-                dot.classList.add("hide");
-            }
-        });
-
-        this.annotations.forEach(annotations => annotations.forEach(annotation => {
-            if (annotation.global || (keepImportant && annotation.important)) {
-                annotation.show();
-            } else {
-                annotation.hide();
-            }
-        }));
-    }
-
-    public showAnnotations(): void {
-        this.annotations.forEach(annotations => {
-            annotations.forEach(annotation => annotation.show());
-        });
-
-        // Hide all dots.
-        this.table.querySelectorAll<HTMLSpanElement>(".dot").forEach(dot => {
-            dot.classList.add("hide");
-        });
-    }
-
-    // /////////////////////////////////////////////////////////////////////////
-    // Creating and modifying user annotations /////////////////////////////////
-    // /////////////////////////////////////////////////////////////////////////
-
-    private createNewAnnotationForm(line: number | null): HTMLElement {
-        const annotationForm = new AnnotationForm();
-        annotationForm.id = `annotation-submission-new-${line || 0}`;
-        annotationForm.questionMode = this.questionMode;
-        annotationForm.courseId = this.courseId;
-        annotationForm.exerciseId = this.exerciseId;
-        annotationForm.userId = this.userId;
-
-        annotationForm.addEventListener("submit", async (e: CustomEvent) => {
-            const annotationData: UserAnnotationFormData = {
-                "annotation_text": e.detail.text,
-                "line_nr": (line === null ? null : line - 1),
-                "evaluation_id": this.evaluationId || undefined,
-                "saved_annotation_id": e.detail.savedAnnotationId || undefined,
-            };
-
-            try {
-                const mode = this.questionMode ? "question" : "annotation";
-                const annotation = await createUserAnnotation(annotationData, this.submissionId,
-                    (a, cb) => this.createUpdateAnnotationForm(a, cb), mode);
-                await this.createSavedAnnotation(annotation, e.detail);
-                this.addAnnotation(annotation);
-                invalidateSavedAnnotation(e.detail.savedAnnotationId);
-                annotationForm.remove();
-            } catch (err) {
-                annotationForm.hasErrors = true;
-                annotationForm.disabled = false;
-            }
-        });
-
-        annotationForm.addEventListener("cancel", () => annotationForm.remove());
-
-        return annotationForm;
-    }
-
-    private createUpdateAnnotationForm(annotation: UserAnnotation,
-        callback: CallableFunction): HTMLElement {
-        const annotationForm = new AnnotationForm();
-        annotationForm.id = `annotation-submission-update-${annotation.id}`;
-        annotationForm.annotation = annotation;
-        annotationForm.questionMode = this.questionMode;
-        annotationForm.courseId = this.courseId;
-        annotationForm.exerciseId = this.exerciseId;
-        annotationForm.userId = this.userId;
-
-        annotationForm.addEventListener("submit", async (e: CustomEvent) => {
-            const annotationData: UserAnnotationFormData = {
-                "annotation_text": e.detail.text,
-                "saved_annotation_id": e.detail.savedAnnotationId || undefined,
-            };
-
-            try {
-                const updated = await annotation.update(annotationData) as UserAnnotation;
-                await this.createSavedAnnotation(updated, e.detail);
-                this.updateAnnotation(annotation, updated);
-                if (e.detail.savedAnnotationId != annotation.savedAnnotationId ) {
-                    invalidateSavedAnnotation(e.detail.savedAnnotationId);
-                    invalidateSavedAnnotation(annotation.savedAnnotationId);
-                }
-                // Ask MathJax to search for math in the annotations
-                window.MathJax.typeset();
-            } catch (err) {
-                annotationForm.hasErrors= true;
-                annotationForm.disabled= false;
-            }
-        });
-
-        annotationForm.addEventListener("cancel", () => callback());
-        annotationForm.addEventListener("delete", () => annotation.remove().then(() => this.removeAnnotation(annotation)));
-
-        return annotationForm;
-    }
-
-    private async createSavedAnnotation(from: UserAnnotation, eventDetail: { savedAnnotationTitle: string, text: string, saveAnnotation: boolean }): Promise<void> {
-        if (eventDetail.saveAnnotation) {
-            try {
-                from.savedAnnotationId = await createSavedAnnotation({
-                    from: from.id,
-                    saved_annotation: {
-                        title: eventDetail.savedAnnotationTitle,
-                        annotation_text: eventDetail.text,
-                    }
-                });
-            } catch (errors) {
-                alert(I18n.t("js.saved_annotation.new.errors", { count: errors.length }) + "\n\n" + errors.join("\n"));
-            }
-        }
-    }
-
-    private handleAnnotateGlobal(): void {
-        // Attempt to find an existing form and reuse that.
-        const formId = "#annotation-submission-0";
-        let form = this.globalAnnotations.querySelector<HTMLElement>(formId);
-        if (form === null) {
-            form = this.createNewAnnotationForm(null);
-
-            // Inject the form into the div.
-            this.globalAnnotations.prepend(form);
-        }
-    }
-
-    private handleAnnotateLine(row: HTMLTableRowElement): void {
-        const lineNo = parseInt(row.dataset["line"]);
-
-        // Attempt to find an existing form and reuse that.
-        let form = row.querySelector<HTMLElement>(`#annotation-submission-new-${lineNo}`);
-        if (form === null) {
-            form = this.createNewAnnotationForm(lineNo);
-            // Inject the form into the table.
-            const cell = row.querySelector<HTMLTableDataCellElement>(`#annotation-cell-${lineNo}`);
-            cell.prepend(form);
-        }
-    }
-
-    // /////////////////////////////////////////////////////////////////////////
-    // Update view /////////////////////////////////////////////////////////////
-    // /////////////////////////////////////////////////////////////////////////
-
-    private get annotationCount(): number {
-        return Array.from(this.annotations.values())
-            .map(ann => ann.length)
-            .reduce((acc, nw) => acc + nw, 0);
-    }
-
-    /**
-     * Updates the badge count and button visibility state.
-     */
-    private updateViewState(): void {
-        const amount = this.annotationCount;
-        if (amount > 0) {
-            // Set the badge count.
-            this.badge.innerText = amount.toString();
-
-            // Find the important annotations.
-            const importantAnnotationCount = Array.from(this.annotations.values())
-                .map(annotations => annotations.filter(an => an.important).length)
-                .reduce((acc, nw) => acc + nw);
-            if (importantAnnotationCount === 0 || importantAnnotationCount === amount) {
-                this.showErrorAnnotations.classList.add("hide");
-            } else {
-                this.showErrorAnnotations.classList.remove("hide");
-            }
-
-            // Show the annotation toggles.
-            this.annotationToggles.classList.remove("hide");
-
-            // Ask MathJax to search for math in the annotations
-            window.MathJax.typeset();
-        } else {
-            // No annotations have been added (yet).
-            this.badge.innerText = "";
-
-            // Hide the annotation toggles.
-            this.annotationToggles.classList.add("hide");
-        }
-    }
-}
diff --git a/app/assets/javascripts/code_listing/machine_annotation.ts b/app/assets/javascripts/code_listing/machine_annotation.ts
deleted file mode 100644
index b183830368..0000000000
--- a/app/assets/javascripts/code_listing/machine_annotation.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { Annotation, AnnotationType } from "code_listing/annotation";
-
-export interface MachineAnnotationData {
-    type: AnnotationType;
-    text: string;
-    row: number;
-    externalUrl: string | null;
-}
-
-export class MachineAnnotation extends Annotation {
-    private readonly externalUrl: string | null;
-
-    constructor(data: MachineAnnotationData) {
-        // Filter out lines only containing dashes.
-        let text = data.text.split("\n")
-            .filter(s => !s.match("^--*$"))
-            .join("\n");
-        // use the dom engine to encode the text to html
-        const node = document.createElement("span");
-        node.textContent = text;
-        text = node.innerHTML;
-        super(data.row + 1, text, data.type);
-        this.externalUrl = data.externalUrl;
-    }
-
-    protected get class(): string {
-        return "machine-annotation";
-    }
-
-    protected get meta(): string {
-        return this.title;
-    }
-
-    protected get title(): string {
-        return I18n.t(`js.annotation.type.${this.type}`);
-    }
-
-    protected get hasNotice(): boolean {
-        return this.externalUrl !== null && this.externalUrl !== undefined;
-    }
-
-    protected get noticeUrl(): string | null {
-        return this.externalUrl;
-    }
-
-    protected get noticeInfo(): string | null {
-        return I18n.t("js.machine_annotation.external_url");
-    }
-
-    protected get useNoticeIcon(): boolean {
-        return false;
-    }
-}
diff --git a/app/assets/javascripts/code_listing/question_annotation.ts b/app/assets/javascripts/code_listing/question_annotation.ts
deleted file mode 100644
index e487e71b7f..0000000000
--- a/app/assets/javascripts/code_listing/question_annotation.ts
+++ /dev/null
@@ -1,171 +0,0 @@
-import { Annotation, QuestionState } from "code_listing/annotation";
-import { fetch } from "util.js";
-import {
-    UserAnnotation,
-    UserAnnotationData,
-    UserAnnotationEditor, UserAnnotationFormData,
-    UserAnnotationPermissionData
-} from "code_listing/user_annotation";
-import { Notification } from "notification";
-
-interface QuestionAnnotationPermissionData extends UserAnnotationPermissionData {
-    transition: {[state in QuestionState]: boolean};
-}
-
-export interface QuestionAnnotationData extends UserAnnotationData {
-    // eslint-disable-next-line camelcase
-    question_state: QuestionState;
-    // eslint-disable-next-line camelcase
-    newer_submission_url: string | null;
-}
-
-export class QuestionAnnotation extends UserAnnotation {
-    public readonly permissions: QuestionAnnotationPermissionData;
-    private readonly questionState: QuestionState;
-    private readonly newerSubmissionUrl: string | null;
-
-    constructor(data: QuestionAnnotationData, editFn: UserAnnotationEditor) {
-        super(data, editFn, "question");
-        this.questionState = data.question_state;
-        this.newerSubmissionUrl = data.newer_submission_url;
-        this.permissions = data.permission as QuestionAnnotationPermissionData;
-    }
-
-    protected get meta(): string {
-        const timestamp = I18n.formatDate(this.createdAt, "time.formats.annotation");
-        const user = this.user.name;
-        const questionState = I18n.t(`js.question.state.${this.questionState}`);
-
-        if (this.questionState === "unanswered") {
-            return I18n.t("js.user_question.meta_unanswered", {
-                user: user,
-                time: timestamp,
-                state: questionState
-            });
-        } else {
-            return I18n.t("js.user_question.meta_else", {
-                user: user,
-                time: timestamp,
-                state: questionState,
-                last: this.lastUpdatedBy.name
-            });
-        }
-    }
-
-    protected get hasNotice(): boolean {
-        return this.newerSubmissionUrl !== null;
-    }
-
-    protected get noticeUrl(): string | null {
-        return this.newerSubmissionUrl;
-    }
-
-    protected get noticeInfo(): string | null {
-        return I18n.t("js.user_question.has_newer_submission");
-    }
-
-    public transitionable(to: QuestionState): boolean {
-        return this.permissions.transition[to];
-    }
-
-    protected get editTitle(): string {
-        return I18n.t("js.user_question.edit");
-    }
-
-    public async update(formData: UserAnnotationFormData): Promise<Annotation> {
-        const response = await fetch(this.url, {
-            headers: { "Content-Type": "application/json" },
-            method: "PATCH",
-            body: JSON.stringify({
-                question: formData
-            })
-        });
-        const data = await response.json();
-
-        if (response.ok) {
-            return new QuestionAnnotation(data, this.editor);
-        }
-        throw new Error();
-    }
-
-    protected async transition(newState: QuestionState): Promise<void> {
-        fetch(this.url, {
-            method: "PATCH",
-            headers: {
-                "Accept": "application/json",
-                "Content-Type": "application/json"
-            },
-            body: JSON.stringify({
-                from: this.questionState,
-                question: {
-                    // eslint-disable-next-line camelcase
-                    question_state: newState
-                }
-            })
-        }).then(async response => {
-            if (response.ok) {
-                const json = await response.json();
-                const newAnnotation: Annotation = new QuestionAnnotation(json, this.editor);
-                window.dodona.codeListing.updateAnnotation(this, newAnnotation);
-            } else if (response.status === 404) {
-                // Someone already deleted this question.
-                new dodona.Toast(I18n.t("js.user_question.deleted"));
-                window.dodona.codeListing.removeAnnotation(this);
-                this.__html.remove();
-            } else if (response.status == 403) {
-                // Someone already changed the status of this question.
-                new dodona.Toast(I18n.t("js.user_question.conflict"));
-                // We now need to update the annotation, but we don't have the new data.
-                // Get the annotation from the backend.
-                this.selfUpdate();
-            }
-        });
-    }
-
-    private selfUpdate(): void {
-        fetch(`/annotations/${this.id}`, {
-            headers: {
-                "Accept": "application/json"
-            }
-        })
-            .then(r => r.json())
-            .then(r => {
-                const newAnnotation: Annotation = new QuestionAnnotation(r, this.editor);
-                window.dodona.codeListing.updateAnnotation(this, newAnnotation);
-            });
-    }
-}
-
-function annotationFromData(data: UserAnnotationData,
-    editFn: UserAnnotationEditor): UserAnnotation {
-    if (data.type == "question") {
-        return new QuestionAnnotation(data as QuestionAnnotationData, editFn);
-    }
-    return new UserAnnotation(data, editFn);
-}
-
-export async function createUserAnnotation(formData: UserAnnotationFormData,
-    submissionId: number,
-    editFn: UserAnnotationEditor, mode = "annotation"): Promise<UserAnnotation> {
-    const response = await fetch(`/submissions/${submissionId}/annotations.json`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ [mode]: formData })
-    });
-    const data = await response.json();
-
-    if (response.ok) {
-        if (mode === "question") {
-            Notification.startNotificationRefresh();
-        }
-        return annotationFromData(data, editFn);
-    }
-    throw new Error();
-}
-
-export async function getAllUserAnnotations(submission: number,
-    editFn: UserAnnotationEditor): Promise<UserAnnotation[]> {
-    const response = await fetch(`/submissions/${submission}/annotations.json`);
-    const json = await response.json();
-    return json.map(data => annotationFromData(data, editFn));
-}
diff --git a/app/assets/javascripts/code_listing/user_annotation.ts b/app/assets/javascripts/code_listing/user_annotation.ts
deleted file mode 100644
index c5095f663e..0000000000
--- a/app/assets/javascripts/code_listing/user_annotation.ts
+++ /dev/null
@@ -1,170 +0,0 @@
-import { Annotation, AnnotationType } from "code_listing/annotation";
-import { fetch } from "util.js";
-
-export interface UserAnnotationFormData {
-    // eslint-disable-next-line camelcase
-    annotation_text: string;
-    // eslint-disable-next-line camelcase
-    line_nr?: number | null;
-    // eslint-disable-next-line camelcase
-    evaluation_id?: number | undefined;
-    // eslint-disable-next-line camelcase
-    saved_annotation_id?: string;
-}
-
-export type UserAnnotationEditor = (ua: UserAnnotation, cb: CallableFunction) => HTMLElement;
-
-interface UserAnnotationUserData {
-    name: string;
-}
-
-export interface UserAnnotationPermissionData {
-    update: boolean;
-    destroy: boolean;
-    can_see_annotator: boolean
-}
-
-export interface UserAnnotationData {
-    // eslint-disable-next-line camelcase
-    annotation_text: string;
-    // eslint-disable-next-line camelcase
-    created_at: string;
-    id: number;
-    // eslint-disable-next-line camelcase
-    line_nr: number;
-    permission: UserAnnotationPermissionData;
-    released: boolean;
-    // eslint-disable-next-line camelcase
-    rendered_markdown: string;
-    // eslint-disable-next-line camelcase
-    evaluation_id: number | null;
-    // eslint-disable-next-line camelcase
-    saved_annotation_id: number | null;
-    url: string;
-    user: UserAnnotationUserData;
-    type: string;
-    // eslint-disable-next-line camelcase
-    last_updated_by: UserAnnotationUserData;
-    // REMOVE AFTER CLOSED BETA
-    // eslint-disable-next-line camelcase
-    course_id: number;
-}
-
-export class UserAnnotation extends Annotation {
-    protected readonly editor: UserAnnotationEditor;
-
-    public readonly createdAt: string;
-    public readonly id: number;
-    public readonly permissions: UserAnnotationPermissionData;
-    private readonly __rawText: string;
-    public readonly released: boolean;
-    public readonly evaluationId: number | null;
-    private __savedAnnotationId: number | null;
-    public readonly url: string;
-    public readonly user: UserAnnotationUserData | undefined;
-    public readonly lastUpdatedBy: UserAnnotationUserData | undefined;
-    // REMOVE AFTER CLOSED BETA
-    private readonly __courseId: number;
-
-    constructor(data: UserAnnotationData,
-        editFn: UserAnnotationEditor, type: AnnotationType = "user") {
-        const line = data.line_nr === null ? null : data.line_nr + 1;
-        super(line, data.rendered_markdown, type);
-        this.createdAt = data.created_at;
-        this.editor = editFn;
-        this.id = data.id;
-        this.permissions = data.permission;
-        this.released = data.released;
-        this.__rawText = data.annotation_text;
-        this.evaluationId = data.evaluation_id;
-        this.__savedAnnotationId = data.saved_annotation_id;
-        this.url = data.url;
-        this.user = data.user;
-        this.lastUpdatedBy = data.last_updated_by;
-        // REMOVE AFTER CLOSED BETA
-        this.__courseId = data.course_id;
-    }
-
-    protected edit(): void {
-        const editButton = this.__html.querySelector(".annotation-edit");
-
-        const editor = this.editor(this, () => {
-            const editFormId = `#annotation-submission-update-${this.id}`;
-            this.__html.querySelector(editFormId).replaceWith(this.body);
-            editButton.classList.remove("hide");
-        });
-        editButton.classList.add("hide");
-
-        this.__html.querySelector(".annotation-text").replaceWith(editor);
-    }
-
-    protected get meta(): string {
-        if (!this.permissions.can_see_annotator) {
-            return I18n.t("js.user_annotation.anonymous_message");
-        }
-
-        const timestamp = I18n.formatDate(this.createdAt, "time.formats.annotation");
-        const user = this.user!.name;
-
-        return I18n.t("js.user_annotation.meta", { user: user, time: timestamp });
-    }
-
-    public get modifiable(): boolean {
-        return this.permissions.update;
-    }
-
-    public get rawText(): string {
-        return this.__rawText;
-    }
-
-    public get savedAnnotationId(): number | null {
-        return this.__savedAnnotationId;
-    }
-
-    public set savedAnnotationId(sa: number | null) {
-        this.__savedAnnotationId = sa;
-    }
-
-    public get removable(): boolean {
-        return this.permissions.destroy;
-    }
-
-    public get visible(): boolean {
-        return this.released;
-    }
-
-    public async remove(): Promise<void> {
-        return fetch(this.url, { method: "DELETE" }).then(() => {
-            super.remove();
-        });
-    }
-
-    protected get title(): string {
-        return I18n.t(`js.annotation.type.${this.type}`);
-    }
-
-    public async update(formData: UserAnnotationFormData): Promise<Annotation> {
-        const response = await fetch(this.url, {
-            headers: { "Content-Type": "application/json" },
-            method: "PATCH",
-            body: JSON.stringify({
-                annotation: formData
-            })
-        });
-        const data = await response.json();
-
-        if (response.ok) {
-            return new UserAnnotation(data, this.editor);
-        }
-        throw new Error();
-    }
-
-    protected get editTitle(): string {
-        return I18n.t("js.user_annotation.edit");
-    }
-
-    // REMOVE AFTER CLOSED BETA
-    protected get courseId(): number {
-        return this.__courseId;
-    }
-}
diff --git a/app/assets/javascripts/components/annotations/annotation_form.ts b/app/assets/javascripts/components/annotations/annotation_form.ts
index b9669028fb..9c22e808c8 100644
--- a/app/assets/javascripts/components/annotations/annotation_form.ts
+++ b/app/assets/javascripts/components/annotations/annotation_form.ts
@@ -1,12 +1,12 @@
 import { customElement, property } from "lit/decorators.js";
 import { html, TemplateResult } from "lit";
-import { ShadowlessLitElement } from "components/shadowless_lit_element";
-import { Annotation } from "code_listing/annotation";
+import { ShadowlessLitElement } from "components/meta/shadowless_lit_element";
 import { isBetaCourse } from "saved_annotation_beta";
-import { watchMixin } from "components/watch_mixin";
+import { watchMixin } from "components/meta/watch_mixin";
 import { createRef, Ref, ref } from "lit/directives/ref.js";
 import "components/saved_annotations/saved_annotation_input";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { annotationState } from "state/Annotations";
 
 // Min and max of the annotation text is defined in the annotation model.
 const maxLength = 10_000;
@@ -16,39 +16,32 @@ const maxLength = 10_000;
  *
  * @element d-annotation-form
  *
- * @prop {Annotation} annotation - the annotation that will be edited (Null for a creation form)
- * @prop {Number} courseId - used to fetch saved annotations by course
- * @prop {Number} exerciseId - used to fetch saved annotations by exercise
- * @prop {Number} userId - used to fetch saved annotations by user
- * @prop {Boolean} questionMode - whether we are editing questions or userAnnotations
+ * @prop {String} annotationText - the text of the annotation
+ * @prop {String} savedAnnotationId - the id of the saved annotation
  * @prop {Boolean} disabled - disables all buttons
  * @prop {Boolean} hasErrors - Shows red validation styling
+ * @prop {String} submitButtonText - the I18n key of the text for the submit button
  *
  * @fires cancel - if a users uses the cancel button
- * @fires delete - if the user confirms after pressing the delete button
  * @fires submit - if the users presses the submit button, detail contains {text: string, savedAnnotationId: string}
  */
 @customElement("d-annotation-form")
 export class AnnotationForm extends watchMixin(ShadowlessLitElement) {
-    @property({ type: Object })
-    annotation: Annotation;
-    @property({ type: Boolean })
-    questionMode: boolean;
-    @property({ type: Number, attribute: "course-id" })
-    courseId: number;
-    @property({ type: Number, attribute: "exercise-id" })
-    exerciseId: number;
-    @property({ type: Number, attribute: "user-id" })
-    userId: number;
+    @property({ type: String, attribute: "annotation-text" })
+    annotationText: string;
+    @property({ type: String, attribute: "saved-annotation-id" })
+    savedAnnotationId: string;
     @property({ type: Boolean })
     disabled = false;
     @property({ type: Boolean, attribute: "has-errors" })
     hasErrors = false;
+    @property({ type: String, attribute: "submit-button-text" })
+    submitButtonText: string;
 
     @property({ state: true })
-    annotationText = "";
+    _annotationText = "";
     @property({ state: true })
-    savedAnnotationId = "";
+    _savedAnnotationId = "";
     @property({ state: true })
     savedAnnotationTitle: string;
     @property({ state: true })
@@ -58,29 +51,31 @@ export class AnnotationForm extends watchMixin(ShadowlessLitElement) {
     titleRef: Ref<HTMLInputElement> = createRef();
 
     watch = {
-        annotation: () => {
-            this.annotationText = this.annotation?.rawText;
-            this.savedAnnotationId = this.annotation?.savedAnnotationId?.toString() || "";
+        annotationText: () => {
+            this._annotationText = this.annotationText;
+        },
+        savedAnnotationId: () => {
+            this._savedAnnotationId = this.savedAnnotationId || "";
         }
     };
 
     get type(): string {
-        return this.questionMode ? "user_question" : "user_annotation";
+        return annotationState.isQuestionMode ? "user_question" : "user_annotation";
     }
 
     get rows(): number {
-        return Math.max(3, this.annotationText.split("\n").length + 1);
+        return Math.max(3, this._annotationText.split("\n").length + 1);
     }
 
     handleSavedAnnotationInput(e: CustomEvent): void {
         if (e.detail.text) {
-            this.annotationText = e.detail.text;
+            this._annotationText = e.detail.text;
         }
-        this.savedAnnotationId = e.detail.id;
+        this._savedAnnotationId = e.detail.id;
     }
 
     handleTextInput(): void {
-        this.annotationText = this.inputRef.value.value;
+        this._annotationText = this.inputRef.value.value;
     }
 
     handleCancel(): void {
@@ -88,14 +83,6 @@ export class AnnotationForm extends watchMixin(ShadowlessLitElement) {
         this.dispatchEvent(event);
     }
 
-    handleDelete(): void {
-        const confirmText = I18n.t(`js.${this.type}.delete_confirm`);
-        if (confirm(confirmText)) {
-            const event = new CustomEvent("delete", { bubbles: true, composed: true });
-            this.dispatchEvent(event);
-        }
-    }
-
     handleSubmit(): void {
         if (!this.disabled) {
             this.hasErrors = false;
@@ -109,8 +96,8 @@ export class AnnotationForm extends watchMixin(ShadowlessLitElement) {
 
             const event = new CustomEvent("submit", {
                 detail: {
-                    text: this.annotationText,
-                    savedAnnotationId: this.savedAnnotationId,
+                    text: this._annotationText,
+                    savedAnnotationId: this._savedAnnotationId,
                     savedAnnotationTitle: this.savedAnnotationTitle,
                     saveAnnotation: this.saveAnnotation,
                 },
@@ -147,29 +134,28 @@ export class AnnotationForm extends watchMixin(ShadowlessLitElement) {
         this.saveAnnotation = !this.saveAnnotation;
         if (this.saveAnnotation && !this.savedAnnotationTitle) {
             // Take the first five words, with a max of 40 chars as default title
-            this.savedAnnotationTitle = this.annotationText.split(/\s+/).slice(0, 5).join(" ").slice(0, 40);
+            this.savedAnnotationTitle = this._annotationText.split(/\s+/).slice(0, 5).join(" ").slice(0, 40);
         }
     }
 
     render(): TemplateResult {
-        const form = html`
+        return html`
             <form class="annotation-submission form">
-                ${this.questionMode || /* REMOVE AFTER CLOSED BETA */ !isBetaCourse(this.courseId) ? "" : html`
+                ${annotationState.isQuestionMode || /* REMOVE AFTER CLOSED BETA */ !isBetaCourse() ? "" : html`
                         <d-saved-annotation-input
                             name="saved_annotation_id"
-                            course-id="${this.courseId}"
-                            exercise-id="${this.exerciseId}"
-                            user-id="${this.userId}"
                             class="saved-annotation-input"
-                            .value=${this.savedAnnotationId}
-                            annotation-text="${this.annotationText}"
+                            .value=${this._savedAnnotationId}
+                            annotation-text="${this._annotationText}"
                             @input="${e => this.handleSavedAnnotationInput(e)}"
                         ></d-saved-annotation-input>
                     `}
                 <div class="field form-group">
-                    <label class="form-label" for="annotation-text">
-                        ${I18n.t("js.user_annotation.fields.annotation_text")}
-                    </label>
+                    ${annotationState.isQuestionMode || /* REMOVE AFTER CLOSED BETA */ !isBetaCourse() ? "" : html`
+                        <label class="form-label" for="annotation-text">
+                            ${I18n.t("js.user_annotation.fields.annotation_text")}
+                        </label>
+                    `}
                     <textarea id="annotation-text"
                               autofocus
                               required
@@ -177,22 +163,22 @@ export class AnnotationForm extends watchMixin(ShadowlessLitElement) {
                               .rows=${this.rows}
                               minlength="1"
                               maxlength="${maxLength}"
-                              .value=${this.annotationText}
+                              .value=${this._annotationText}
                               ${ref(this.inputRef)}
                               @keydown="${e => this.handleKeyDown(e)}"
                               @input="${() => this.handleTextInput()}"
                     ></textarea>
                     <div class="clearfix annotation-help-block">
                         <span class='help-block'>${unsafeHTML(I18n.t("js.user_annotation.help"))}</span>
-                        ${this.questionMode ? html`
+                        ${annotationState.isQuestionMode ? html`
                             <span class='help-block'>${unsafeHTML(I18n.t("js.user_annotation.help_student"))}</span>
                         ` : ""}
                         <span class="help-block float-end">
-                            <span class="used-characters">${I18n.formatNumber(this.annotationText.length)}</span> / ${I18n.formatNumber(maxLength)}
+                            <span class="used-characters">${I18n.formatNumber(this._annotationText.length)}</span> / ${I18n.formatNumber(maxLength)}
                         </span>
                     </div>
                 </div>
-                ${this.questionMode || /* REMOVE AFTER CLOSED BETA */ !isBetaCourse(this.courseId) ? "" : html`
+                ${annotationState.isQuestionMode || /* REMOVE AFTER CLOSED BETA */ !isBetaCourse() ? "" : html`
                     <div class="field form-group">
                         <div class="form-check">
                             <input class="form-check-input" type="checkbox" @click="${() => this.toggleSaveAnnotation()}" id="check-save-annotation">
@@ -219,15 +205,6 @@ export class AnnotationForm extends watchMixin(ShadowlessLitElement) {
                     ` : html``}
                 `}
                 <div class="annotation-submission-button-container">
-                    ${this.annotation && this.annotation.removable ? html`
-                        <button class="btn btn-text annotation-control-button annotation-delete-button"
-                                type="button"
-                                @click="${() => this.handleDelete()}"
-                                .disabled=${this.disabled}
-                        >
-                           ${I18n.t("js.user_annotation.delete")}
-                        </button>
-                    ` : ""}
                     <button class="btn btn-text annotation-control-button annotation-cancel-button"
                             type="button"
                             @click="${() => this.handleCancel()}"
@@ -240,16 +217,10 @@ export class AnnotationForm extends watchMixin(ShadowlessLitElement) {
                             @click="${() => this.handleSubmit()}"
                             .disabled=${this.disabled}
                     >
-                        ${this.annotation !== undefined ? I18n.t(`js.${this.type}.update`) : I18n.t(`js.${this.type}.send`)}
+                        ${I18n.t(`js.${this.type}.${this.submitButtonText}`)}
                     </button>
                 </div>
             </form>
         `;
-
-        return this.annotation !== undefined ? form : html`
-            <div class="annotation user">
-                ${form}
-            </div>
-        `;
     }
 }
diff --git a/app/assets/javascripts/components/annotations/annotation_marker.ts b/app/assets/javascripts/components/annotations/annotation_marker.ts
new file mode 100644
index 0000000000..c35321797d
--- /dev/null
+++ b/app/assets/javascripts/components/annotations/annotation_marker.ts
@@ -0,0 +1,132 @@
+import { customElement, property } from "lit/decorators.js";
+import { render, html, LitElement, TemplateResult } from "lit";
+import tippy, { Instance as Tippy, createSingleton } from "tippy.js";
+import { AnnotationData, annotationState, compareAnnotationOrders, isUserAnnotation } from "state/Annotations";
+import { StateController } from "state/state_system/StateController";
+
+/**
+ * A marker that styles the slotted content and shows a tooltip with annotations.
+ *
+ * @prop {AnnotationData[]} annotations The annotations to show in the tooltip.
+ *
+ * @element d-annotation-marker
+ */
+@customElement("d-annotation-marker")
+export class AnnotationMarker extends LitElement {
+    @property({ type: Array })
+    annotations: AnnotationData[];
+
+    state = new StateController(this);
+
+
+    static colors = {
+        "error": "var(--error-color, red)",
+        "warning": "var(--warning-color, yellow)",
+        "info": "var(--info-color, blue)",
+        "annotation": "var(--annotation-color, green)",
+        "question": "var(--question-color, orange)",
+        "annotation-intense": "var(--annotation-intense-color, green)",
+        "question-intense": "var(--question-intense-color, orange)",
+    };
+
+    static getStyle(annotation: AnnotationData): string {
+        if (["error", "warning", "info"].includes(annotation.type)) {
+            return `text-decoration: wavy underline ${AnnotationMarker.colors[annotation.type]} ${annotationState.isHovered(annotation) ? 2 : 1}px;`;
+        } else {
+            const colorKey = annotationState.isHovered(annotation) ? `${annotation.type}-intense` : annotation.type;
+            return `
+                background: ${AnnotationMarker.colors[colorKey]};
+                padding-top: 2px;
+                padding-bottom: 2px;
+                margin-top: -2px;
+                margin-bottom: -2px;
+            `;
+        }
+    }
+
+    static tippyInstances: Tippy[] = [];
+    // Using a singleton to avoid multiple tooltips being open at the same time.
+    static tippySingleton = createSingleton([], {
+        placement: "bottom-start",
+        interactive: true,
+        interactiveDebounce: 25,
+        delay: [500, 25],
+        offset: [-10, -2],
+        // This transition fixes a bug where overlap with the previous tooltip was taken into account when positioning
+        moveTransition: "transform 0.001s ease-out",
+        appendTo: () => document.querySelector(".code-table"),
+    });
+    static registerTippyInstance(instance: Tippy): void {
+        this.tippyInstances.push(instance);
+        this.tippySingleton.setInstances(this.tippyInstances);
+    }
+    static unregisterTippyInstance(instance: Tippy): void {
+        this.tippyInstances = this.tippyInstances.filter(i => i !== instance);
+        this.tippySingleton.setInstances(this.tippyInstances);
+    }
+
+    // Annotations that are displayed inline should show up as tooltips.
+    get hiddenAnnotations(): AnnotationData[] {
+        return this.annotations.filter(a => !annotationState.isVisible(a)).sort(compareAnnotationOrders);
+    }
+
+    tippyInstance: Tippy;
+
+    renderTooltip(): void {
+        if (this.tippyInstance) {
+            AnnotationMarker.unregisterTippyInstance(this.tippyInstance);
+            this.tippyInstance.destroy();
+            this.tippyInstance = undefined;
+        }
+
+        if (this.hiddenAnnotations.length === 0) {
+            return;
+        }
+
+        const tooltip = document.createElement("div");
+        tooltip.classList.add("marker-tooltip");
+        render(this.hiddenAnnotations.map(a => isUserAnnotation(a) ?
+            html`<d-user-annotation .data=${a}></d-user-annotation>` :
+            html`<d-machine-annotation .data=${a}></d-machine-annotation>`), tooltip);
+
+        this.tippyInstance = tippy(this, {
+            content: tooltip,
+        });
+        AnnotationMarker.registerTippyInstance(this.tippyInstance);
+    }
+
+    get sortedAnnotations(): AnnotationData[] {
+        return this.annotations.sort( (a, b) => {
+            if (annotationState.isHovered(a)) {
+                return -1;
+            } else if (annotationState.isHovered(b)) {
+                return 1;
+            } else {
+                return compareAnnotationOrders(a, b);
+            }
+        });
+    }
+
+    get machineAnnotationMarkerSVG(): TemplateResult | undefined {
+        const firstMachineAnnotation = this.sortedAnnotations.find(a => !isUserAnnotation(a));
+        const size = annotationState.isHovered(firstMachineAnnotation) ? 20 : 14;
+        return firstMachineAnnotation && html`<svg style="position: absolute; top: ${16 - size/2}px; left: -${size/2}px" width="${size}" height="${size}" viewBox="0 0 24 24">
+            <path fill="${AnnotationMarker.colors[firstMachineAnnotation.type]}" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6l1.41 1.41Z"/>
+        </svg>`;
+    }
+
+    get annotationStyles(): string {
+        return this.sortedAnnotations.reverse().map(a => AnnotationMarker.getStyle(a)).join(" ");
+    }
+
+    render(): TemplateResult {
+        this.renderTooltip();
+
+        return html`<style>
+            :host {
+                position: relative;
+                ${this.annotationStyles}
+            }
+        </style><slot>${this.machineAnnotationMarkerSVG}</slot>`;
+    }
+}
diff --git a/app/assets/javascripts/components/annotations/annotation_options.ts b/app/assets/javascripts/components/annotations/annotation_options.ts
new file mode 100644
index 0000000000..ba5706a823
--- /dev/null
+++ b/app/assets/javascripts/components/annotations/annotation_options.ts
@@ -0,0 +1,52 @@
+import { customElement, property } from "lit/decorators.js";
+import { ShadowlessLitElement } from "components/meta/shadowless_lit_element";
+import { html, TemplateResult } from "lit";
+import "components/annotations/annotations_toggles";
+import "components/annotations/hidden_annotations_dot";
+import { i18nMixin } from "components/meta/i18n_mixin";
+import { userState } from "state/Users";
+import { annotationState } from "state/Annotations";
+
+
+/**
+ * This component represents the top row with options about annotations, that is displayed above the code listing.
+ * It contains the button to add a new global annotation, the global annotations themselves and the toggles to show/hide annotations.
+ *
+ * @element d-annotation-options
+ */
+@customElement("d-annotation-options")
+export class AnnotationOptions extends i18nMixin(ShadowlessLitElement) {
+    @property({ state: true })
+    showForm = false;
+
+    get canCreateAnnotation(): boolean {
+        return userState.hasPermission("annotation.create");
+    }
+
+    get addAnnotationTitle(): string {
+        return annotationState.isQuestionMode ?
+            I18n.t("js.annotations.options.add_global_question") :
+            I18n.t("js.annotations.options.add_global_annotation");
+    }
+
+    protected render(): TemplateResult {
+        return html`
+            <div class="feedback-table-options">
+                <d-hidden-annotations-dot .row=${0}></d-hidden-annotations-dot>
+                ${this.canCreateAnnotation ? html`
+                    <button class="btn btn-text" @click="${() => this.showForm = true}">
+                        ${this.addAnnotationTitle}
+                    </button>
+                ` : html``}
+                <span class="flex-spacer"></span>
+                <d-annotations-toggles></d-annotations-toggles>
+            </div>
+            <div>
+            <d-annotations-cell .row=${0}
+                                .showForm="${this.showForm}"
+                                @close-form=${() => this.showForm = false}
+                ></d-annotations-cell>
+            </div>
+        `;
+    }
+}
diff --git a/app/assets/javascripts/components/annotations/annotations_cell.ts b/app/assets/javascripts/components/annotations/annotations_cell.ts
new file mode 100644
index 0000000000..38ab33301e
--- /dev/null
+++ b/app/assets/javascripts/components/annotations/annotations_cell.ts
@@ -0,0 +1,98 @@
+import { customElement, property } from "lit/decorators.js";
+import { ShadowlessLitElement } from "components/meta/shadowless_lit_element";
+import { html, TemplateResult } from "lit";
+import { UserAnnotationFormData, userAnnotationState } from "state/UserAnnotations";
+import { annotationState, compareAnnotationOrders } from "state/Annotations";
+import { submissionState } from "state/Submissions";
+import { MachineAnnotationData, machineAnnotationState } from "state/MachineAnnotations";
+import "components/annotations/machine_annotation";
+import "components/annotations/user_annotation";
+import "components/annotations/annotation_form";
+import "components/annotations/thread";
+import { AnnotationForm } from "components/annotations/annotation_form";
+import { createRef, Ref, ref } from "lit/directives/ref.js";
+import { evaluationState } from "state/Evaluations";
+
+/**
+ * This component represents a cell that groups all annotations for a specific line.
+ * It also contains the form for creating new annotations.
+ *
+ * @element d-annotations-cell
+ *
+ * @prop {Number} row - the line number
+ * @prop {Boolean} showForm - if the form should be shown
+ *
+ * @fires close-form - if the form should be closed
+ */
+@customElement("d-annotations-cell")
+export class AnnotationsCell extends ShadowlessLitElement {
+    @property({ type: Boolean, attribute: "show-form" })
+    showForm: boolean;
+    @property({ type: Number })
+    row: number;
+
+    annotationFormRef: Ref<AnnotationForm> = createRef();
+
+    get machineAnnotations(): MachineAnnotationData[] {
+        return machineAnnotationState.byLine.get(this.row) || [];
+    }
+
+    get userAnnotationIds(): number[] {
+        return userAnnotationState.rootIdsByLine.get(this.row) || [];
+    }
+
+
+    async createAnnotation(e: CustomEvent): Promise<void> {
+        const annotationData: UserAnnotationFormData = {
+            "annotation_text": e.detail.text,
+            "line_nr": this.row,
+            "evaluation_id": evaluationState.id,
+            "saved_annotation_id": e.detail.savedAnnotationId || undefined,
+        };
+
+        if (this.row > 0 && userAnnotationState.selectedRange) {
+            annotationData["line_nr"] = userAnnotationState.selectedRange.row;
+            annotationData["rows"] = userAnnotationState.selectedRange.rows;
+            annotationData["column"] = userAnnotationState.selectedRange.column;
+            annotationData["columns"] = userAnnotationState.selectedRange.columns;
+        }
+
+        try {
+            const mode = annotationState.isQuestionMode ? "question" : "annotation";
+            await userAnnotationState.create(annotationData, submissionState.id, mode, e.detail.saveAnnotation, e.detail.savedAnnotationTitle);
+            this.closeForm();
+        } catch (err) {
+            this.annotationFormRef.value.hasErrors = true;
+            this.annotationFormRef.value.disabled = false;
+        }
+    }
+
+    closeForm(): void {
+        const event = new CustomEvent("close-form", { bubbles: true, composed: true });
+        this.dispatchEvent(event);
+    }
+
+    protected render(): TemplateResult {
+        return html`
+            <div class="annotation-cell">
+                ${this.showForm ? html`
+                    <div class="annotation ${annotationState.isQuestionMode ? "question" : "user" }">
+                        <d-annotation-form @submit=${e => this.createAnnotation(e)}
+                                           @cancel=${() => this.closeForm()}
+                                           ${ref(this.annotationFormRef)}
+                                           submit-button-text="send"
+                        ></d-annotation-form>
+                    </div>
+                ` : ""}
+                ${this.userAnnotationIds.map(a => html`
+                    <d-thread .rootId=${a}></d-thread>
+                `)}
+                ${this.machineAnnotations
+        .filter(a => annotationState.isVisible(a))
+        .sort(compareAnnotationOrders).map(a => html`
+                        <d-machine-annotation .data=${a}></d-machine-annotation>
+                `)}
+            </div>
+        `;
+    }
+}
diff --git a/app/assets/javascripts/components/annotations/annotations_count_badge.ts b/app/assets/javascripts/components/annotations/annotations_count_badge.ts
new file mode 100644
index 0000000000..90ad7f111f
--- /dev/null
+++ b/app/assets/javascripts/components/annotations/annotations_count_badge.ts
@@ -0,0 +1,23 @@
+import { customElement } from "lit/decorators.js";
+import { ShadowlessLitElement } from "components/meta/shadowless_lit_element";
+import { userAnnotationState } from "state/UserAnnotations";
+import { html, TemplateResult } from "lit";
+import { machineAnnotationState } from "state/MachineAnnotations";
+
+/**
+ * This component represents a badge that shows the total number of annotations.
+ *
+ * @element d-annotations-count-badge
+ */
+@customElement("d-annotations-count-badge")
+export class AnnotationsCountBadge extends ShadowlessLitElement {
+    get annotationsCount(): number {
+        return userAnnotationState.count + machineAnnotationState.count;
+    }
+
+    render(): TemplateResult {
+        return this.annotationsCount ? html`
+            <div class="badge rounded-pill">${this.annotationsCount}</div>
+        ` : html``;
+    }
+}
diff --git a/app/assets/javascripts/components/annotations/annotations_toggles.ts b/app/assets/javascripts/components/annotations/annotations_toggles.ts
new file mode 100644
index 0000000000..6e3bdb14e2
--- /dev/null
+++ b/app/assets/javascripts/components/annotations/annotations_toggles.ts
@@ -0,0 +1,55 @@
+import { customElement } from "lit/decorators.js";
+import { ShadowlessLitElement } from "components/meta/shadowless_lit_element";
+import { html, TemplateResult, PropertyValues } from "lit";
+import { annotationState } from "state/Annotations";
+import { i18nMixin } from "components/meta/i18n_mixin";
+import { initTooltips } from "util.js";
+
+/**
+ * This component represents the toggles to show/hide annotations.
+ * It contains the buttons to show all annotations, only important annotations or no annotations.
+ *
+ * @element d-annotations-toggles
+ */
+@customElement("d-annotations-toggles")
+export class AnnotationsToggles extends i18nMixin(ShadowlessLitElement) {
+    protected update(changedProperties: PropertyValues): void {
+        super.update(changedProperties);
+        initTooltips(this);
+    }
+
+    protected render(): TemplateResult {
+        return html`
+            <span class="diff-switch-buttons switch-buttons">
+                <span>${I18n.t("js.annotations.toggles.title")}</span>
+                <div class="btn-group btn-toggle" role="group" aria-label="${I18n.t("js.annotations.toggles.title")}" data-bs-toggle="buttons">
+                    <button class="btn annotation-toggle ${annotationState.visibility === "all" ? "active" : ""}"
+                            data-bs-toggle="tooltip"
+                            data-bs-placement="top"
+                            data-bs-trigger="hover"
+                            title="${I18n.t("js.annotations.toggles.show_all")}"
+                            @click=${() => annotationState.visibility = "all"}
+                    >
+                        <i class="mdi mdi-comment-multiple-outline"></i>
+                    </button>
+                    <button class="btn annotation-toggle ${annotationState.visibility === "important" ? "active" : ""}"
+                            data-bs-toggle="tooltip"
+                            data-bs-placement="top"
+                            data-bs-trigger="hover"
+                            title="${I18n.t("js.annotations.toggles.show_errors")}"
+                            @click=${() => annotationState.visibility = "important"}>
+                        <i class="mdi mdi-comment-alert-outline"></i>
+                    </button>
+                    <button class="btn annotation-toggle ${annotationState.visibility === "none" ? "active" : ""}"
+                            data-bs-toggle="tooltip"
+                            data-bs-placement="top"
+                            data-bs-trigger="hover"
+                            title="${I18n.t("js.annotations.toggles.hide_all")}"
+                            @click=${() => annotationState.visibility = "none"}>
+                        <i class="mdi mdi-comment-remove-outline"></i>
+                    </button>
+                </div>
+            </span>
+        `;
+    }
+}
diff --git a/app/assets/javascripts/components/annotations/code_listing_row.ts b/app/assets/javascripts/components/annotations/code_listing_row.ts
new file mode 100644
index 0000000000..78d3ad8c87
--- /dev/null
+++ b/app/assets/javascripts/components/annotations/code_listing_row.ts
@@ -0,0 +1,164 @@
+import { ShadowlessLitElement } from "components/meta/shadowless_lit_element";
+import { customElement, property } from "lit/decorators.js";
+import { html, TemplateResult } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import "components/annotations/annotations_cell";
+import "components/annotations/annotation_marker";
+import "components/annotations/hidden_annotations_dot";
+import { i18nMixin } from "components/meta/i18n_mixin";
+import { initTooltips } from "util.js";
+import { PropertyValues } from "@lit/reactive-element";
+import { userState } from "state/Users";
+import { AnnotationData, annotationState, compareAnnotationOrders } from "state/Annotations";
+import { MachineAnnotationData, machineAnnotationState } from "state/MachineAnnotations";
+import { wrapRangesInHtml, range } from "mark";
+import { SelectedRange, UserAnnotationData, userAnnotationState } from "state/UserAnnotations";
+import { AnnotationMarker } from "components/annotations/annotation_marker";
+import "components/annotations/selection_marker";
+import "components/annotations/create_annotation_button";
+import { triggerSelectionStart } from "components/annotations/select";
+
+/**
+ * This component represents a row in the code listing.
+ * It contains the line number and the code itself, and the button to add a new annotation for this row.
+ * It also contains the annotations for this row.
+ *
+ * @element d-code-listing-row
+ *
+ * @prop {number} row - The row number.
+ * @prop {string} renderedCode - The code to display.
+ */
+@customElement("d-code-listing-row")
+export class CodeListingRow extends i18nMixin(ShadowlessLitElement) {
+    @property({ type: Number })
+    row: number;
+    @property({ type: String, attribute: "rendered-code" })
+    renderedCode: string;
+
+
+    /**
+     * Calculates the range of the code that is covered by the given annotation.
+     * If the annotation spans multiple lines, the range will be the whole line unless this is the first or last line.
+     * In that case, the range will be the part of the line that is covered by the annotation.
+     * @param annotation The annotation to calculate the range for.
+     */
+    getRangeFromAnnotation(annotation: AnnotationData | SelectedRange): range {
+        const isMachineAnnotation = ["error", "warning", "info"].includes((annotation as AnnotationData).type);
+        const rowsLength = annotation.rows ?? 1;
+        let lastRow = annotation.row ? annotation.row + rowsLength : 0;
+        let firstRow = annotation.row ? annotation.row + 1 : 0;
+
+        if (!isMachineAnnotation) {
+            // rows on user annotations are 1-based, so we need to subtract 1
+            firstRow -= 1;
+            lastRow -= 1;
+        }
+
+        let start = 0;
+        if (this.row === firstRow) {
+            start = annotation.column || 0;
+        }
+
+        let length = Infinity;
+        if (this.row === lastRow) {
+            if (annotation.column !== undefined && annotation.column !== null) {
+                const defaultLength = isMachineAnnotation ? 0 : Infinity;
+                length = annotation.columns || defaultLength;
+            }
+        }
+
+        return { start: start, length: length, data: annotation };
+    }
+
+    get wrappedCode(): string {
+        const annotationsToMark = [...this.userAnnotationsToMark, ...this.machineAnnotationsToMark].sort(compareAnnotationOrders);
+        const codeToMark = this.renderedCode;
+        let annotationsMarked = wrapRangesInHtml(
+            codeToMark,
+            annotationsToMark.map(a => this.getRangeFromAnnotation(a)),
+            "d-annotation-marker",
+            (node: AnnotationMarker, range) => {
+                // these nodes will be recompiled to html, so we need to store the data in a json string
+                const annotations = JSON.parse(node.getAttribute("annotations")) || [];
+                annotations.push(range.data);
+                node.setAttribute("annotations", JSON.stringify(annotations));
+            });
+        if ( userAnnotationState.showForm && this.shouldMarkSelection ) {
+            annotationsMarked = wrapRangesInHtml(annotationsMarked, [this.getRangeFromAnnotation(userAnnotationState.selectedRange)], "d-selection-marker");
+        }
+        return annotationsMarked;
+    }
+
+    firstUpdated(_changedProperties: PropertyValues): void {
+        super.firstUpdated(_changedProperties);
+        initTooltips(this);
+        this.addEventListener("pointerdown", e => triggerSelectionStart(e));
+    }
+
+    get canCreateAnnotation(): boolean {
+        return userState.hasPermission("annotation.create");
+    }
+
+    get machineAnnotationsToMark(): MachineAnnotationData[] {
+        return machineAnnotationState.byMarkedLine.get(this.row) || [];
+    }
+
+    get userAnnotationsToMark(): UserAnnotationData[] {
+        return userAnnotationState.rootIdsByMarkedLine.get(this.row)?.map(i => userAnnotationState.byId.get(i)) || [];
+    }
+
+    get shouldMarkSelection(): boolean {
+        return userAnnotationState.selectedRange &&
+            userAnnotationState.selectedRange.row <= this.row &&
+            userAnnotationState.selectedRange.row + (userAnnotationState.selectedRange.rows ?? 1) > this.row;
+    }
+
+    get showForm(): boolean {
+        const range = userAnnotationState.selectedRange;
+        return userAnnotationState.showForm && range && range.row + range.rows - 1 === this.row;
+    }
+
+    closeForm(): void {
+        userAnnotationState.showForm = false;
+        userAnnotationState.selectedRange = undefined;
+    }
+
+    get fullLineAnnotations(): UserAnnotationData[] {
+        return this.userAnnotationsToMark
+            .filter(a => !a.column&& !a.columns)
+            .sort(compareAnnotationOrders);
+    }
+
+    get hasFullLineSelection(): boolean {
+        return this.shouldMarkSelection && !userAnnotationState.selectedRange.column && !userAnnotationState.selectedRange.columns;
+    }
+
+    get codeLineClass(): string {
+        return this.hasFullLineSelection ? `code-line-${annotationState.isQuestionMode ? "question" : "annotation"}` : "";
+    }
+
+    render(): TemplateResult {
+        return html`
+            <tr id="line-${this.row}" class="lineno">
+                <td class="rouge-gutter gl">
+                    ${this.canCreateAnnotation ? html`<d-create-annotation-button row="${this.row}"></d-create-annotation-button>` : html``}
+                    <d-hidden-annotations-dot .row=${this.row}></d-hidden-annotations-dot>
+                    <pre style="user-select: none;">${this.row}</pre>
+                </td>
+                <td class="rouge-code">
+                    ${this.fullLineAnnotations.length > 0 ? html`
+                        <d-annotation-marker style="width: 100%; display: block" .annotations=${this.fullLineAnnotations}>
+                            <pre class="code-line ${this.codeLineClass}">${unsafeHTML(this.wrappedCode)}</pre>
+                        </d-annotation-marker>
+                    ` : html`
+                        <pre class="code-line ${this.codeLineClass}">${unsafeHTML(this.wrappedCode)}</pre>
+                    `}
+                    <d-annotations-cell .row=${this.row}
+                                        .showForm="${this.showForm}"
+                                        @close-form=${() => this.closeForm()}
+                    ></d-annotations-cell>
+                </td>
+            </tr>
+        `;
+    }
+}
diff --git a/app/assets/javascripts/components/annotations/create_annotation_button.ts b/app/assets/javascripts/components/annotations/create_annotation_button.ts
new file mode 100644
index 0000000000..58cd26360a
--- /dev/null
+++ b/app/assets/javascripts/components/annotations/create_annotation_button.ts
@@ -0,0 +1,74 @@
+import { ShadowlessLitElement } from "components/meta/shadowless_lit_element";
+import { customElement, property } from "lit/decorators.js";
+import { html, PropertyValues, TemplateResult } from "lit";
+import { annotationState } from "state/Annotations";
+import { userAnnotationState } from "state/UserAnnotations";
+import { initTooltips } from "util.js";
+
+/**
+ * This component represents a button to create a new annotation.
+ * It is displayed in the gutter of the code editor.
+ * It will only display on the last row that is currently selected if any code is selected.
+ *
+ * @attr {number} row - The row number.
+ *
+ * @element d-create-annotation-button
+ */
+@customElement("d-create-annotation-button")
+export class CreateAnnotationButton extends ShadowlessLitElement {
+    @property({ type: Number })
+    row: number;
+
+    get addAnnotationTitle(): string {
+        const key = annotationState.isQuestionMode ? "question" : "annotation";
+
+
+        return I18n.t(`js.annotations.options.add_${key}_for_selection`);
+
+        // return I18n.t(`js.annotations.options.add_${key}`);
+    }
+
+    openForm(): void {
+        userAnnotationState.showForm = true;
+        if (!this.rangeExists) {
+            userAnnotationState.selectedRange = {
+                row: this.row,
+                rows: 1,
+            };
+        } else {
+            window.getSelection()?.removeAllRanges();
+        }
+    }
+
+    get rangeExists(): boolean {
+        return userAnnotationState.selectedRange !== undefined && userAnnotationState.selectedRange !== null;
+    }
+
+    get isRangeEnd(): boolean {
+        return this.rangeExists && !userAnnotationState.showForm &&
+            userAnnotationState.selectedRange.row + (userAnnotationState.selectedRange.rows ?? 1) - 1 == this.row;
+    }
+
+    protected updated(_changedProperties: PropertyValues): void {
+        super.updated(_changedProperties);
+        initTooltips(this);
+    }
+
+    get rowCharLength(): number {
+        return this.row.toString().length;
+    }
+
+    protected render(): TemplateResult {
+        return html`
+            <div style="position: relative">
+                <div class="annotation-button ${this.rangeExists ? "hide" : "" } ${this.isRangeEnd ? "expanded" : ""}"
+                     style="right: ${this.rowCharLength * 10 + 12}px;">
+                    <button class="btn btn-fab-small-flex"
+                            @pointerup=${() => this.openForm()}>
+                        <span class="text">${this.addAnnotationTitle}</span>
+                       <i class="mdi mdi-comment-plus-outline "></i>
+                    </button>
+                </div>
+            </div>`;
+    }
+}
diff --git a/app/assets/javascripts/components/annotations/hidden_annotations_dot.ts b/app/assets/javascripts/components/annotations/hidden_annotations_dot.ts
new file mode 100644
index 0000000000..ff656cb30c
--- /dev/null
+++ b/app/assets/javascripts/components/annotations/hidden_annotations_dot.ts
@@ -0,0 +1,67 @@
+import { ShadowlessLitElement } from "components/meta/shadowless_lit_element";
+import { customElement, property } from "lit/decorators.js";
+import { html, TemplateResult } from "lit";
+import { MachineAnnotationData, machineAnnotationState } from "state/MachineAnnotations";
+import { UserAnnotationData, userAnnotationState } from "state/UserAnnotations";
+import { i18nMixin } from "components/meta/i18n_mixin";
+import { PropertyValues } from "@lit/reactive-element/development/reactive-element";
+import { initTooltips } from "util.js";
+import { annotationState, compareAnnotationOrders } from "state/Annotations";
+
+/**
+ * This component represents a dot that shows the number of hidden annotations for a line.
+ *
+ * @element d-hidden-annotations-dot
+ *
+ * @prop {number} row - The row number.
+ */
+@customElement("d-hidden-annotations-dot")
+export class HiddenAnnotationsDot extends i18nMixin(ShadowlessLitElement) {
+    @property({ type: Number })
+    row: number;
+
+    get machineAnnotations(): MachineAnnotationData[] {
+        return machineAnnotationState.byLine.get(this.row) || [];
+    }
+
+    get userAnnotations(): UserAnnotationData[] {
+        return userAnnotationState.rootIdsByLine.get(this.row)?.map(id => userAnnotationState.byId.get(id)) || [];
+    }
+
+    get hiddenAnnotations(): (MachineAnnotationData | UserAnnotationData)[] {
+        return [...this.machineAnnotations, ...this.userAnnotations].filter(a => !annotationState.isVisible(a));
+    }
+
+    get infoDotClasses(): string {
+        const hiddenType = this.hiddenAnnotations.sort(compareAnnotationOrders)[0]?.type;
+        return `dot-${hiddenType}`;
+    }
+
+    get infoDotTitle(): string {
+        const count = this.hiddenAnnotations.length;
+        if (count === 1) {
+            return I18n.t("js.annotation.hidden.single");
+        } else {
+            return I18n.t("js.annotation.hidden.plural", { count: count });
+        }
+    }
+
+    updated(_changedProperties: PropertyValues): void {
+        super.updated(_changedProperties);
+        initTooltips(this);
+    }
+
+    render(): TemplateResult {
+        if (this.hiddenAnnotations.length > 0) {
+            return html`
+                <span class="dot ${this.infoDotClasses}"
+                      data-bs-toggle="tooltip"
+                      data-bs-placement="top"
+                      data-bs-trigger="hover"
+                      title="${this.infoDotTitle}"></span>
+            `;
+        }
+
+        return html``;
+    }
+}
diff --git a/app/assets/javascripts/components/annotations/machine_annotation.ts b/app/assets/javascripts/components/annotations/machine_annotation.ts
new file mode 100644
index 0000000000..93e744e0b3
--- /dev/null
+++ b/app/assets/javascripts/components/annotations/machine_annotation.ts
@@ -0,0 +1,57 @@
+import { html, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { ShadowlessLitElement } from "components/meta/shadowless_lit_element";
+import { MachineAnnotationData } from "state/MachineAnnotations";
+import { annotationState } from "state/Annotations";
+
+
+/**
+ * This component represents a machine annotation.
+ *
+ * @element d-machine-annotation
+ *
+ * @prop {MachineAnnotationData} data - The machine annotation data.
+ */
+@customElement("d-machine-annotation")
+export class MachineAnnotation extends ShadowlessLitElement {
+    @property({ type: Object })
+    data: MachineAnnotationData;
+
+    protected get hasNotice(): boolean {
+        return this.data.externalUrl !== null && this.data.externalUrl !== undefined;
+    }
+
+    protected get text(): string {
+        // Filter out lines only containing dashes.
+        return this.data.text.split("\n")
+            .filter(s => !s.match("^--*$"))
+            .join("\n");
+    }
+
+    render(): TemplateResult {
+        return html`
+            <div class="annotation machine-annotation ${this.data.type}"
+                 @mouseenter="${() => annotationState.hoveredAnnotation = this.data}"
+                 @mouseleave="${() => annotationState.hoveredAnnotation = null}">
+                <div class="annotation-header">
+                    <span class="annotation-meta">
+                        ${I18n.t(`js.annotation.type.${this.data.type}`)}
+                        ${this.hasNotice ? html`
+                            <span>
+                                ·
+                                <a href="${this.data.externalUrl}" target="_blank">
+                                    <i class="mdi mdi-information mdi-18 colored-info"
+                                       title="${I18n.t("js.machine_annotation.external_url")}"
+                                       data-bs-toggle="tooltip"
+                                       data-bs-placement="top"
+                                    ></i>
+                                </a>
+                            </span>
+                        ` : ""}
+                    </span>
+                </div>
+                <div class="annotation-text">${this.text}</div>
+            </div>
+        `;
+    }
+}
diff --git a/app/assets/javascripts/components/annotations/select.ts b/app/assets/javascripts/components/annotations/select.ts
new file mode 100644
index 0000000000..598e786473
--- /dev/null
+++ b/app/assets/javascripts/components/annotations/select.ts
@@ -0,0 +1,213 @@
+import { SelectedRange, userAnnotationState } from "state/UserAnnotations";
+import { CodeListingRow } from "components/annotations/code_listing_row";
+import { annotationState } from "state/Annotations";
+import { submissionState } from "state/Submissions";
+
+/**
+ * @param node The node to get the offset for
+ * @param offset The offset within the current node
+ *
+ * @returns The offset in number of characters from the start of the `closest` PRE element
+ * If the element is not inside a PRE element, returns undefined
+ */
+export function getOffset(node: Node, offset: number): number | undefined {
+    if (node.nodeName === "PRE") {
+        return offset;
+    }
+
+    const parent = node.parentNode;
+    if (!parent) {
+        return undefined;
+    }
+
+    let precedingText = "";
+    for (const child of parent.childNodes) {
+        if (child === node) {
+            break;
+        }
+        if (child.nodeType !== Node.COMMENT_NODE) {
+            precedingText += child.textContent;
+        }
+    }
+    return getOffset(parent, offset + precedingText.length);
+}
+
+/**
+ * This function translates a selection into a range within the code listing.
+ * If the selection is not inside a code listing row, returns undefined.
+ *
+ * Multiline selections will always return the whole line for each line in the selection.
+ * In this case the selection param might be modified to match the returned range.
+ *
+ * @param selection The selection to get the range for
+ * @returns The range of the selection in the code listing
+ * Unless both the start and end of the selection are inside a code listing row, returns undefined
+ */
+export function selectedRangeFromSelection(selection: Selection): SelectedRange | undefined {
+    // Selection.anchorNode does not behave as expected in firefox, see https://bugzilla.mozilla.org/show_bug.cgi?id=1420854
+    // So we use the startContainer of the range instead
+    const anchorNode = selection.getRangeAt(0).startContainer;
+    const focusNode = selection.getRangeAt(selection.rangeCount - 1).endContainer;
+    const anchorOffset = selection.getRangeAt(0).startOffset;
+    const focusOffset = selection.getRangeAt(selection.rangeCount - 1).endOffset;
+
+    const anchorRow = anchorNode?.parentElement.closest("d-code-listing-row") as CodeListingRow;
+    const focusRow = focusNode?.parentElement.closest("d-code-listing-row") as CodeListingRow;
+
+    // Both the start and end of the selection must be inside a code listing row to get a valid code selection
+    if (!anchorRow || !focusRow) {
+        return undefined;
+    }
+
+    // Find the exact position of the selection in the code `pre` element
+    // If the selection is not inside a `pre` element, we assume the offset is zero
+    const anchorColumn = getOffset(anchorNode, anchorOffset) || 0;
+    const focusColumn = getOffset(focusNode, focusOffset) || 0;
+
+    let range: SelectedRange;
+    if (anchorRow.row < focusRow.row) {
+        range = {
+            row: anchorRow.row,
+            rows: focusRow.row - anchorRow.row + 1,
+            column: anchorColumn,
+            columns: focusColumn,
+        };
+    } else if (anchorRow.row > focusRow.row) {
+        range = {
+            row: focusRow.row,
+            rows: anchorRow.row - focusRow.row + 1,
+            column: focusColumn,
+            columns: anchorColumn,
+        };
+    } else if (anchorColumn < focusColumn) {
+        range = {
+            row: anchorRow.row,
+            rows: 1,
+            column: anchorColumn,
+            columns: focusColumn - anchorColumn,
+        };
+    } else {
+        range = {
+            row: anchorRow.row,
+            rows: 1,
+            column: focusColumn,
+            columns: anchorColumn - focusColumn,
+        };
+    }
+    const codeLines = submissionState.code.split("\n");
+
+    // If we have selected nothing on the last row, we don't want to include that row
+    // Instead end the selection on the last char of the previous row
+    if (range.columns === 0 && range.rows > 1) {
+        range.columns = undefined;
+        range.rows -= 1;
+    }
+
+    // If we selected multiple rows, we want to select the entire rows
+    if (range.rows > 1) {
+        // If we have selected nothing on the first row, we don't want to include that row
+        while (codeLines[range.row - 1].length <= range.column && range.rows > 1) {
+            range.column = 0;
+            range.rows -= 1;
+            range.row += 1;
+        }
+
+        // Ignore the columns if we have selected multiple rows
+        range.column = 0;
+        range.columns = undefined;
+
+        // If we have selected nothing on the last row, we don't want to include that row
+        while (codeLines[range.row + range.rows - 2] === "" && range.rows > 1) {
+            range.rows -= 1;
+        }
+
+        // Update the selection to match the newly calculated Selected Range
+        const numberOfRanges = selection.rangeCount;
+        selection.removeAllRanges();
+
+        // The number of ranges used is browser dependent
+        // Chrome uses one range for the entire selection and filters out non selectable elements based on css
+        // Firefox uses one range per continuous selection, but allows manual selection of non selectable elements
+        // This code should be browser agnostic as it only returns multiple ranges if the selection is not continuous
+        if (numberOfRanges == 1) {
+            const newRange = new Range();
+            const startLine = document.querySelector(`#line-${range.row}`);
+            const endLine = document.querySelector(`#line-${range.row + range.rows - 1}`);
+            newRange.setStart(startLine.querySelector(".code-line"), 0);
+            newRange.setEnd(endLine.querySelector(".code-line"), endLine.querySelector(".code-line").childNodes.length);
+            selection.addRange(newRange);
+        } else {
+            for (let i = range.row; i < range.row + range.rows; i++) {
+                const newRange = new Range();
+                const line = document.querySelector(`#line-${i}`);
+                newRange.setStart(line.querySelector(".code-line"), 0);
+                newRange.setEnd(line.querySelector(".code-line"), line.querySelector(".code-line").childNodes.length);
+                selection.addRange(newRange);
+            }
+        }
+    }
+
+    return range;
+}
+
+function rangeInAnnotation(range: Range): boolean {
+    const annotation = (range.startContainer.parentElement as Element)?.closest(".annotation") ||
+        (range.endContainer.parentElement as Element)?.closest(".annotation");
+    return annotation !== null;
+}
+
+function anyRangeInAnnotation(selection: Selection): boolean {
+    for (let i = 0; i < selection.rangeCount; i++) {
+        if (rangeInAnnotation(selection.getRangeAt(i))) {
+            return true;
+        }
+    }
+    return false;
+}
+
+function addSelectionClasses(): void {
+    const selectionType = annotationState.isQuestionMode ? "question" : "annotation";
+    document.querySelector(".code-table")?.classList.add(`selection-color-${selectionType}`);
+    document.body.classList.add("no-selection-outside-code");
+}
+
+function removeSelectionClasses(): void {
+    document.querySelector(".code-table")?.classList.remove("selection-color-annotation", "selection-color-question");
+    document.body.classList.remove("no-selection-outside-code");
+}
+
+export async function triggerSelectionEnd(): Promise<void> {
+    if (userAnnotationState.showForm) {
+        removeSelectionClasses();
+        return;
+    }
+
+    // Wait for the selection to be updated
+    await new Promise(resolve => setTimeout(resolve, 100));
+    const selection = window.getSelection();
+    if (!selection.isCollapsed && !anyRangeInAnnotation(selection)) {
+        userAnnotationState.selectedRange = selectedRangeFromSelection(selection);
+        if (userAnnotationState.selectedRange) {
+            addSelectionClasses();
+        } else {
+            removeSelectionClasses();
+        }
+    } else {
+        removeSelectionClasses();
+        userAnnotationState.selectedRange = undefined;
+    }
+}
+
+export function triggerSelectionStart(e: PointerEvent): void {
+    if (e.pointerType === "mouse" && e.button !== 0) {
+        // ignore all mouse events except left click
+        return;
+    }
+
+    if (!(e.target as Element).closest(".annotation") && !userAnnotationState.showForm) {
+        addSelectionClasses();
+        if (!(e.target as Element).closest("button")) {
+            userAnnotationState.selectedRange = undefined;
+        }
+    }
+}
diff --git a/app/assets/javascripts/components/annotations/selection_marker.ts b/app/assets/javascripts/components/annotations/selection_marker.ts
new file mode 100644
index 0000000000..71d1e24072
--- /dev/null
+++ b/app/assets/javascripts/components/annotations/selection_marker.ts
@@ -0,0 +1,25 @@
+import { LitElement, html, TemplateResult } from "lit";
+import { customElement } from "lit/decorators.js";
+import { AnnotationMarker } from "components/annotations/annotation_marker";
+import { annotationState } from "state/Annotations";
+
+/**
+ * A marker that replaces the selection.
+ * The slotted content is styled to look like a user annotation.
+ * It is used to mark the selected code while editing an annotation
+ * @element d-selection-marker
+ */
+@customElement("d-selection-marker")
+class SelectionMarker extends LitElement {
+    render(): TemplateResult {
+        return html`<style>
+            :host {
+                background: ${AnnotationMarker.colors[annotationState.isQuestionMode ? "question-intense" : "annotation-intense"]};
+                padding-top: 2px;
+                padding-bottom: 2px;
+                margin-top: -2px;
+                margin-bottom: -2px;
+            }
+        </style><slot></slot>`;
+    }
+}
diff --git a/app/assets/javascripts/components/annotations/thread.ts b/app/assets/javascripts/components/annotations/thread.ts
new file mode 100644
index 0000000000..910296a278
--- /dev/null
+++ b/app/assets/javascripts/components/annotations/thread.ts
@@ -0,0 +1,122 @@
+import { ShadowlessLitElement } from "components/meta/shadowless_lit_element";
+import { customElement, property } from "lit/decorators.js";
+import {
+
+    UserAnnotationData,
+    UserAnnotationFormData, userAnnotationState
+} from "state/UserAnnotations";
+import { html, TemplateResult } from "lit";
+import { submissionState } from "state/Submissions";
+import { AnnotationForm } from "components/annotations/annotation_form";
+import { createRef, Ref, ref } from "lit/directives/ref.js";
+import { i18nMixin } from "components/meta/i18n_mixin";
+import { annotationState } from "state/Annotations";
+import { evaluationState } from "state/Evaluations";
+
+/**
+ * This component represents a thread of annotations.
+ * It also contains the form for creating new annotations.
+ *
+ * @element d-thread
+ *
+ * @prop {number} rootId - the id of the root annotation for this thread
+ */
+@customElement("d-thread")
+export class Thread extends i18nMixin(ShadowlessLitElement) {
+    @property({ type: Number, attribute: "root-id" })
+    rootId: number;
+
+    @property({ state: true })
+    showForm = false;
+
+    annotationFormRef: Ref<AnnotationForm> = createRef();
+
+    get data(): UserAnnotationData {
+        return userAnnotationState.byId.get(this.rootId);
+    }
+
+    get openQuestions(): UserAnnotationData[] | undefined {
+        return [this.data, ...this.data.responses]
+            .filter(response => response.question_state !== undefined && response.question_state !== "answered");
+    }
+
+    get isUnanswered(): boolean {
+        return this.openQuestions.length > 0;
+    }
+
+    async createAnnotation(e: CustomEvent): Promise<void> {
+        const annotationData: UserAnnotationFormData = {
+            "annotation_text": e.detail.text,
+            "line_nr": this.data.line_nr,
+            "evaluation_id": evaluationState.id,
+            "saved_annotation_id": e.detail.savedAnnotationId || undefined,
+            "thread_root_id": this.data.id,
+        };
+
+        try {
+            const mode = annotationState.isQuestionMode ? "question" : "annotation";
+            await userAnnotationState.create(annotationData, submissionState.id, mode, e.detail.saveAnnotation, e.detail.savedAnnotationTitle);
+            this.showForm = false;
+        } catch (err) {
+            this.annotationFormRef.value.hasErrors = true;
+            this.annotationFormRef.value.disabled = false;
+        }
+    }
+
+    markAsResolved(): void {
+        userAnnotationState.transitionAll(this.openQuestions, "answered");
+    }
+
+    markAsInProgress(): void {
+        userAnnotationState.transitionAll(this.openQuestions.filter(question => question.question_state !== "in_progress"), "in_progress");
+    }
+
+    markAsUnanswered(): void {
+        userAnnotationState.transitionAll(this.openQuestions.filter(question => question.question_state !== "unanswered"), "unanswered");
+    }
+
+    addReply(): void {
+        this.showForm = true;
+        this.markAsInProgress();
+    }
+
+    cancelReply(): void {
+        this.showForm = false;
+        this.markAsUnanswered();
+    }
+
+    render(): TemplateResult {
+        return this.data ? html`
+            <div class="thread ${annotationState.isVisible(this.data) ? "" : "hidden"}"
+                 @mouseenter="${() => annotationState.hoveredAnnotation = this.data}"
+                 @mouseleave="${() => annotationState.hoveredAnnotation = null}"
+            >
+                <d-user-annotation .data=${this.data}></d-user-annotation>
+                ${this.data.responses.map(response => html`
+                    <d-user-annotation .data=${response}></d-user-annotation>
+                `)}
+                ${this.showForm ? html`
+                    <div class="annotation ${annotationState.isQuestionMode ? "question" : "user" }">
+                        <d-annotation-form @submit=${e => this.createAnnotation(e)}
+                                           ${ref(this.annotationFormRef)}
+                                           @cancel=${() => this.cancelReply()}
+                                           submit-button-text="reply"
+                        ></d-annotation-form>
+                    </div>
+                ` : html`
+                    <div class="fake-input">
+                        <input type="text" class="form-control"
+                               placeholder="${I18n.t("js.user_annotation.reply")}..."
+                               @click="${() => this.addReply()}" />
+                        ${this.isUnanswered ? html`
+                            <span>${I18n.t("js.user_question.or")}</span>
+                            <a class="btn btn-text" @click="${() => this.markAsResolved()}">
+                                ${I18n.t("js.user_question.resolve")}
+                            </a>
+                        ` : html``}
+                    </div>
+                `}
+            </div>
+        ` : html``;
+    }
+}
diff --git a/app/assets/javascripts/components/annotations/user_annotation.ts b/app/assets/javascripts/components/annotations/user_annotation.ts
new file mode 100644
index 0000000000..cc10980c85
--- /dev/null
+++ b/app/assets/javascripts/components/annotations/user_annotation.ts
@@ -0,0 +1,211 @@
+import { html, PropertyValues, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { ShadowlessLitElement } from "components/meta/shadowless_lit_element";
+import { UserAnnotationData, userAnnotationState } from "state/UserAnnotations";
+import { i18nMixin } from "components/meta/i18n_mixin";
+import { AnnotationForm } from "components/annotations/annotation_form";
+import { createRef, Ref, ref } from "lit/directives/ref.js";
+import "components/saved_annotations/new_saved_annotation";
+import { initTooltips } from "util.js";
+import "components/saved_annotations/saved_annotation_icon";
+import { annotationState } from "state/Annotations";
+
+/**
+ * This component represents a single user annotation.
+ * It can be either a root annotation or a response.
+ * It also contains the form for editing the annotation.
+ *
+ * @element d-user-annotation
+ *
+ * @prop {UserAnnotationData} data - the data of the annotation
+ */
+@customElement("d-user-annotation")
+export class UserAnnotation extends i18nMixin(ShadowlessLitElement) {
+    @property({ type: Object })
+    data: UserAnnotationData;
+
+    @property({ state: true })
+    editing = false;
+
+    annotationFormRef: Ref<AnnotationForm> = createRef();
+
+    get headerText(): string {
+        if (!this.data.permission.can_see_annotator) {
+            return I18n.t("js.user_annotation.anonymous_message");
+        }
+
+        const timestamp = I18n.formatDate(this.data.created_at, "time.formats.annotation");
+        const user = this.data.user?.name;
+
+        return I18n.t("js.user_annotation.meta", { user: user, time: timestamp });
+    }
+
+    get type(): string {
+        return annotationState.isQuestionMode ? "user_question" : "user_annotation";
+    }
+
+    protected get header(): TemplateResult {
+        return html`
+            ${this.headerText}
+            ${!this.data.released ? html`
+                        <i class="mdi mdi-eye-off mdi-18 annotation-meta-icon"
+                           title="${I18n.t("js.user_annotation.not_released")}"
+                           data-bs-toggle="tooltip"
+                           data-bs-placement="top"
+                        ></i>
+                    ` : ""}
+            <d-saved-annotation-icon .savedAnnotationId="${this.data.saved_annotation_id}">
+            </d-saved-annotation-icon>
+            ${this.data.newer_submission_url ? html`
+                <span>
+                    ·
+                    <a href="${this.data.newer_submission_url}" target="_blank">
+                        <i class="mdi mdi-information mdi-18 colored-info"
+                           title="${I18n.t("js.user_question.has_newer_submission")}"
+                           data-bs-toggle="tooltip"
+                           data-bs-placement="top"
+                        ></i>
+                    </a>
+                </span>
+            ` : ""}
+            ${ this.data.question_state == "unanswered" ? html`
+                <i class="mdi mdi-comment-question-outline mdi-18 annotation-meta-icon colored-secondary"
+                   title="${I18n.t("js.user_question.is_unanswered")}"
+                   data-bs-toggle="tooltip"
+                   data-bs-placement="top"
+                ></i>
+            ` : ""}
+            ${ this.data.question_state == "in_progress" ? html`
+                <i class="mdi mdi-comment-processing-outline mdi-18 annotation-meta-icon"
+                   title="${I18n.t("js.user_question.is_in_progress")}"
+                   data-bs-toggle="tooltip"
+                   data-bs-placement="top"
+                ></i>
+            ` : ""}
+            ${ this.data.question_state == "answered" ? html`
+                <i class="mdi mdi-comment-check-outline mdi-18 annotation-meta-icon"
+                   title="${I18n.t("js.user_question.is_answered")}"
+                   data-bs-toggle="tooltip"
+                   data-bs-placement="top"
+                ></i>
+            ` : ""}
+        `;
+    }
+
+    deleteAnnotation(): void {
+        if (confirm(I18n.t(`js.${this.type}.delete_confirm`))) {
+            userAnnotationState.delete(this.data);
+        }
+    }
+
+    async updateAnnotation(e: CustomEvent): Promise<void> {
+        try {
+            await userAnnotationState.update(this.data, {
+                annotation_text: e.detail.text,
+                saved_annotation_id: e.detail.savedAnnotationId || undefined,
+            });
+            this.editing = false;
+        } catch (e) {
+            this.annotationFormRef.value.hasErrors = true;
+            this.annotationFormRef.value.disabled = false;
+        }
+    }
+
+    protected updated(_changedProperties: PropertyValues): void {
+        super.updated(_changedProperties);
+
+        try {
+            // Ask MathJax to search for math in the annotations
+            window.MathJax.typeset([this]);
+        } catch (e) {
+            // MathJax is not loaded
+            console.warn("MathJax is not loaded");
+        }
+        // Reinitialize tooltips
+        initTooltips(this);
+    }
+
+    reopenQuestion(): void {
+        userAnnotationState.transition(this.data, "unanswered");
+    }
+
+    get dropdownOptions(): TemplateResult[] {
+        const options = [];
+
+        if (this.data.permission.update) {
+            options.push(html`
+                <li>
+                    <a class="dropdown-item" @click="${() => this.editing = true}">
+                        <i class="mdi mdi-pencil mdi-18"></i> ${I18n.t(`js.${this.type}.edit`)}
+                    </a>
+                </li>
+            `);
+        }
+        if (this.data.permission.save) {
+            options.push(html`
+                <d-new-saved-annotation
+                    from-annotation-id="${this.data.id}"
+                    annotation-text="${this.data.annotation_text}"
+                    .savedAnnotationId="${this.data.saved_annotation_id}">
+                </d-new-saved-annotation>
+            `);
+        }
+        if (this.data.permission.destroy) {
+            options.push(html`
+                <li>
+                    <a class="dropdown-item" @click="${() => this.deleteAnnotation()}">
+                        <i class="mdi mdi-delete mdi-18"></i> ${I18n.t(`js.user_annotation.delete`)}
+                    </a>
+                </li>
+            `);
+        }
+        if (this.data.permission.transition?.unanswered) {
+            options.push(html`
+                <li>
+                    <a class="dropdown-item" @click="${() => this.reopenQuestion()}">
+                        <i class="mdi mdi-comment-question-outline mdi-18"></i> ${I18n.t("js.user_question.unresolve")}
+                    </a>
+                </li>
+            `);
+        }
+
+        return options;
+    }
+
+    render(): TemplateResult {
+        return html`
+            <div class="annotation ${this.data.type == "annotation" ? "user" : "question"}">
+                <div class="annotation-header">
+                    <span class="annotation-meta">
+                        ${this.header}
+                    </span>
+                    ${this.dropdownOptions.length > 0 ? html`
+                        <div class="dropdown actions float-end" id="kebab-menu">
+                            <a class="btn btn-icon btn-icon-muted dropdown-toggle" data-bs-toggle="dropdown">
+                                <i class="mdi mdi-dots-horizontal text-muted"></i>
+                            </a>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                ${this.dropdownOptions}
+                            </ul>
+                        </div>
+                    ` : ""}
+                </div>
+                ${this.editing ? html`
+                    <d-annotation-form
+                        annotation-text="${this.data.annotation_text}"
+                        saved-annotation-id="${this.data.saved_annotation_id}"
+                        @cancel="${() => this.editing = false}"
+                        @submit="${e => this.updateAnnotation(e)}"
+                        ${ref(this.annotationFormRef)}
+                        submit-button-text="update"
+                    ></d-annotation-form>
+                ` : html`
+                    <div class="annotation-text">
+                        ${unsafeHTML(this.data.rendered_markdown)}
+                    </div>
+                `}
+            </div>
+        `;
+    }
+}
diff --git a/app/assets/javascripts/components/copy_button.ts b/app/assets/javascripts/components/copy_button.ts
index 8d271909d9..55d06f87f7 100644
--- a/app/assets/javascripts/components/copy_button.ts
+++ b/app/assets/javascripts/components/copy_button.ts
@@ -1,4 +1,4 @@
-import { ShadowlessLitElement } from "components/shadowless_lit_element";
+import { ShadowlessLitElement } from "components/meta/shadowless_lit_element";
 import { html, PropertyValues, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { initTooltips, ready } from "util.js";
diff --git a/app/assets/javascripts/components/course_labels_search_bar.ts b/app/assets/javascripts/components/course_labels_search_bar.ts
index 447ae05db4..610a119513 100644
--- a/app/assets/javascripts/components/course_labels_search_bar.ts
+++ b/app/assets/javascripts/components/course_labels_search_bar.ts
@@ -1,6 +1,6 @@
 import { customElement, property } from "lit/decorators.js";
 import { html, TemplateResult } from "lit";
-import { ShadowlessLitElement } from "components/shadowless_lit_element";
+import { ShadowlessLitElement } from "components/meta/shadowless_lit_element";
 import { Option } from "components/datalist_input";
 import { ready } from "util.js";
 import "components/datalist_input";
diff --git a/app/assets/javascripts/components/datalist_input.ts b/app/assets/javascripts/components/datalist_input.ts
index 198ce9c3e5..9b1edf1f0d 100644
--- a/app/assets/javascripts/components/datalist_input.ts
+++ b/app/assets/javascripts/components/datalist_input.ts
@@ -1,8 +1,8 @@
 import { customElement, property } from "lit/decorators.js";
 import { html, TemplateResult } from "lit";
-import { ShadowlessLitElement } from "components/shadowless_lit_element";
+import { ShadowlessLitElement } from "components/meta/shadowless_lit_element";
 import { ref, Ref, createRef } from "lit/directives/ref.js";
-import { watchMixin } from "components/watch_mixin";
+import { watchMixin } from "components/meta/watch_mixin";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { htmlEncode } from "util.js";
 
diff --git a/app/assets/javascripts/components/meta/i18n_mixin.ts b/app/assets/javascripts/components/meta/i18n_mixin.ts
new file mode 100644
index 0000000000..19d4342349
--- /dev/null
+++ b/app/assets/javascripts/components/meta/i18n_mixin.ts
@@ -0,0 +1,27 @@
+import { LitElement } from "lit";
+import { ready } from "util.js";
+
+type Constructor = new (...args: any[]) => LitElement;
+
+export function i18nMixin<T extends Constructor>(superClass: T): T {
+    /**
+     * This mixin makes a LitElement that integrates I18n
+     * It also makes sure that the component is rerendered when the language becomes available
+     */
+    class I18nMixinClass extends superClass {
+        constructor(...args: any[]) {
+            super(args);
+            // Reload when I18n is available
+            this.initI18n();
+        }
+
+        async initI18n(): Promise<void> {
+            // Reload when I18n is available
+            await ready;
+            this.requestUpdate();
+        }
+    }
+
+    // Cast return type to the superClass type passed in
+    return I18nMixinClass as T;
+}
diff --git a/app/assets/javascripts/components/shadowless_lit_element.ts b/app/assets/javascripts/components/meta/shadowless_lit_element.ts
similarity index 79%
rename from app/assets/javascripts/components/shadowless_lit_element.ts
rename to app/assets/javascripts/components/meta/shadowless_lit_element.ts
index e17efb23af..c5e18bd70c 100644
--- a/app/assets/javascripts/components/shadowless_lit_element.ts
+++ b/app/assets/javascripts/components/meta/shadowless_lit_element.ts
@@ -1,4 +1,5 @@
 import { LitElement } from "lit";
+import { StateController } from "state/state_system/StateController";
 
 /**
  * This class removes the shadow dom functionality from lit elements
@@ -12,6 +13,11 @@ import { LitElement } from "lit";
  * When shadow dom is required just use a normal LitElement
  */
 export class ShadowlessLitElement extends LitElement {
+    constructor() {
+        super();
+        new StateController(this);
+    }
+
     // don't use shadow dom
     createRenderRoot(): Element {
         return this;
diff --git a/app/assets/javascripts/components/watch_mixin.ts b/app/assets/javascripts/components/meta/watch_mixin.ts
similarity index 100%
rename from app/assets/javascripts/components/watch_mixin.ts
rename to app/assets/javascripts/components/meta/watch_mixin.ts
diff --git a/app/assets/javascripts/components/modal_mixin.ts b/app/assets/javascripts/components/modal_mixin.ts
index feb0929882..91a8b9632a 100644
--- a/app/assets/javascripts/components/modal_mixin.ts
+++ b/app/assets/javascripts/components/modal_mixin.ts
@@ -1,7 +1,7 @@
 import { html, TemplateResult, render } from "lit";
 import { ref } from "lit/directives/ref.js";
 import { Modal as Modal } from "bootstrap";
-import { ShadowlessLitElement } from "components/shadowless_lit_element";
+import { ShadowlessLitElement } from "components/meta/shadowless_lit_element";
 
 /**
  * This mixin adds support for rendering bootstrap modals within a webcomponent.
diff --git a/app/assets/javascripts/components/pagination.ts b/app/assets/javascripts/components/pagination.ts
index f2e659bb16..7abd1dd578 100644
--- a/app/assets/javascripts/components/pagination.ts
+++ b/app/assets/javascripts/components/pagination.ts
@@ -1,7 +1,8 @@
 import { customElement, property } from "lit/decorators.js";
 import { html, TemplateResult } from "lit";
-import { ShadowlessLitElement } from "components/shadowless_lit_element";
-import { searchQuery } from "search";
+import { ShadowlessLitElement } from "components/meta/shadowless_lit_element";
+import { search } from "search";
+import { searchQueryState } from "state/SearchQuery";
 
 /**
  * This component represents a pagination component as commonly found at the bottom of a paginated list page
@@ -38,7 +39,7 @@ export class Pagination extends ShadowlessLitElement {
     }
 
     gotToPage(page: number): void {
-        searchQuery.queryParams.updateParam("page", page.toString());
+        searchQueryState.queryParams.set("page", page.toString());
     }
 
     pageButton(page?: number, text?: string): TemplateResult {
diff --git a/app/assets/javascripts/components/progress_bar.ts b/app/assets/javascripts/components/progress_bar.ts
index a58d2e83c6..65e821f64e 100644
--- a/app/assets/javascripts/components/progress_bar.ts
+++ b/app/assets/javascripts/components/progress_bar.ts
@@ -1,7 +1,7 @@
 import { html, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { ShadowlessLitElement } from "components/shadowless_lit_element";
-import { initTooltips, ready } from "util.js";
+import { ShadowlessLitElement } from "components/meta/shadowless_lit_element";
+import { initTooltips, ready } from "../util";
 
 /**
  * This component displays a progress bar consisting of consecutive divs
diff --git a/app/assets/javascripts/components/saved_annotations/edit_saved_annotation.ts b/app/assets/javascripts/components/saved_annotations/edit_saved_annotation.ts
index f8c97c12f7..d194f28df5 100644
--- a/app/assets/javascripts/components/saved_annotations/edit_saved_annotation.ts
+++ b/app/assets/javascripts/components/saved_annotations/edit_saved_annotation.ts
@@ -1,7 +1,7 @@
 import { customElement, property } from "lit/decorators.js";
 import { html, TemplateResult } from "lit";
-import { ShadowlessLitElement } from "components/shadowless_lit_element";
-import { SavedAnnotation, updateSavedAnnotation, deleteSavedAnnotation } from "state/SavedAnnotations";
+import { ShadowlessLitElement } from "components/meta/shadowless_lit_element";
+import { SavedAnnotation, savedAnnotationState } from "state/SavedAnnotations";
 import "./saved_annotation_form";
 import { modalMixin } from "components/modal_mixin";
 
@@ -23,7 +23,7 @@ export class EditSavedAnnotation extends modalMixin(ShadowlessLitElement) {
 
     async updateSavedAnnotation(): Promise<void> {
         try {
-            await updateSavedAnnotation(this.savedAnnotation.id, {
+            await savedAnnotationState.update(this.savedAnnotation.id, {
                 saved_annotation: this.savedAnnotation
             });
             this.errors = undefined;
@@ -35,7 +35,7 @@ export class EditSavedAnnotation extends modalMixin(ShadowlessLitElement) {
 
     async deleteSavedAnnotation(): Promise<void> {
         if (confirm(I18n.t("js.saved_annotation.delete.confirm"))) {
-            await deleteSavedAnnotation(this.savedAnnotation.id);
+            await savedAnnotationState.delete(this.savedAnnotation.id);
             this.hideModal();
         }
     }
diff --git a/app/assets/javascripts/components/saved_annotations/new_saved_annotation.ts b/app/assets/javascripts/components/saved_annotations/new_saved_annotation.ts
index 8c0aa66c78..b9bff542d5 100644
--- a/app/assets/javascripts/components/saved_annotations/new_saved_annotation.ts
+++ b/app/assets/javascripts/components/saved_annotations/new_saved_annotation.ts
@@ -1,10 +1,10 @@
 import { customElement, property } from "lit/decorators.js";
 import { html, TemplateResult } from "lit";
-import { ShadowlessLitElement } from "components/shadowless_lit_element";
-import { createSavedAnnotation, getSavedAnnotation, SavedAnnotation } from "state/SavedAnnotations";
+import { ShadowlessLitElement } from "components/meta/shadowless_lit_element";
+import { SavedAnnotation, savedAnnotationState } from "state/SavedAnnotations";
 import "./saved_annotation_form";
 import { modalMixin } from "components/modal_mixin";
-import { stateMixin } from "state/StateMixin";
+import { isBetaCourse } from "saved_annotation_beta";
 
 /**
  * This component represents an creation button for a saved annotation
@@ -17,7 +17,7 @@ import { stateMixin } from "state/StateMixin";
  * @prop {Number} savedAnnotationId - the id of the saved annotation
  */
 @customElement("d-new-saved-annotation")
-export class NewSavedAnnotation extends stateMixin(modalMixin(ShadowlessLitElement)) {
+export class NewSavedAnnotation extends modalMixin(ShadowlessLitElement) {
     @property({ type: Number, attribute: "from-annotation-id" })
     fromAnnotationId: number;
     @property({ type: String, attribute: "annotation-text" })
@@ -34,12 +34,8 @@ export class NewSavedAnnotation extends stateMixin(modalMixin(ShadowlessLitEleme
         return this.savedAnnotationId != undefined;
     }
 
-    get state(): string[] {
-        return this.isAlreadyLinked ? [`getSavedAnnotation${this.savedAnnotationId}`] : [];
-    }
-
     get linkedSavedAnnotation(): SavedAnnotation {
-        return getSavedAnnotation(this.savedAnnotationId);
+        return savedAnnotationState.get(this.savedAnnotationId);
     }
 
     get newSavedAnnotation(): SavedAnnotation {
@@ -53,18 +49,12 @@ export class NewSavedAnnotation extends stateMixin(modalMixin(ShadowlessLitEleme
 
     async createSavedAnnotation(): Promise<void> {
         try {
-            this.savedAnnotationId = await createSavedAnnotation({
+            await savedAnnotationState.create({
                 from: this.fromAnnotationId,
                 saved_annotation: this.savedAnnotation || this.newSavedAnnotation
             });
             this.errors = undefined;
             this.hideModal();
-            const event = new CustomEvent("created", {
-                detail: { id: this.savedAnnotationId },
-                bubbles: true,
-                composed: true }
-            );
-            this.dispatchEvent(event);
         } catch (errors) {
             this.errors = errors;
         }
@@ -95,12 +85,13 @@ export class NewSavedAnnotation extends stateMixin(modalMixin(ShadowlessLitEleme
     }
 
     render(): TemplateResult {
-        return this.isAlreadyLinked && this.linkedSavedAnnotation!= undefined ? html`` : html`
-            <a class="btn btn-icon annotation-control-button annotation-edit"
-               title="${I18n.t("js.saved_annotation.new.button_title")}"
-               @click=${() => this.showModal()}
-            >
-                <i class="mdi mdi-content-save"></i>
-            </a>`;
+        return isBetaCourse() && !(this.isAlreadyLinked && this.linkedSavedAnnotation) ? html`
+            <li>
+                <a class="dropdown-item" @click="${() => this.showModal()}">
+                    <i class="mdi mdi-content-save mdi-18"></i>
+                    ${I18n.t("js.saved_annotation.new.button_title")}
+                </a>
+            </li>
+        ` : html``;
     }
 }
diff --git a/app/assets/javascripts/components/saved_annotations/saved_annotation_form.ts b/app/assets/javascripts/components/saved_annotations/saved_annotation_form.ts
index 1bf476e2c9..ea65237715 100644
--- a/app/assets/javascripts/components/saved_annotations/saved_annotation_form.ts
+++ b/app/assets/javascripts/components/saved_annotations/saved_annotation_form.ts
@@ -1,6 +1,6 @@
 import { customElement, property } from "lit/decorators.js";
 import { html, TemplateResult } from "lit";
-import { ShadowlessLitElement } from "components/shadowless_lit_element";
+import { ShadowlessLitElement } from "components/meta/shadowless_lit_element";
 import { SavedAnnotation } from "state/SavedAnnotations";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 
diff --git a/app/assets/javascripts/components/saved_annotations/saved_annotation_icon.ts b/app/assets/javascripts/components/saved_annotations/saved_annotation_icon.ts
index ff40168de5..17f4aebeea 100644
--- a/app/assets/javascripts/components/saved_annotations/saved_annotation_icon.ts
+++ b/app/assets/javascripts/components/saved_annotations/saved_annotation_icon.ts
@@ -1,9 +1,8 @@
 import { customElement, property } from "lit/decorators.js";
 import { html, TemplateResult } from "lit";
-import { ShadowlessLitElement } from "components/shadowless_lit_element";
-import { getSavedAnnotation, SavedAnnotation } from "state/SavedAnnotations";
-import "./saved_annotation_form";
-import { stateMixin } from "state/StateMixin";
+import { ShadowlessLitElement } from "components/meta/shadowless_lit_element";
+import { SavedAnnotation, savedAnnotationState } from "state/SavedAnnotations";
+import { isBetaCourse } from "saved_annotation_beta";
 
 /**
  * Shows a link icon with some info on hover about the linked saved annotation
@@ -13,25 +12,23 @@ import { stateMixin } from "state/StateMixin";
  * @prop {Number} savedAnnotationId - the id of the saved annotation
  */
 @customElement("d-saved-annotation-icon")
-export class SavedAnnotationIcon extends stateMixin(ShadowlessLitElement) {
+export class SavedAnnotationIcon extends ShadowlessLitElement {
     @property({ type: Number, attribute: "saved-annotation-id" })
-    savedAnnotationId: number;
+    savedAnnotationId: number | null;
 
     get isAlreadyLinked(): boolean {
         return this.savedAnnotationId != undefined;
     }
 
-    get state(): string[] {
-        return this.isAlreadyLinked ? [`getSavedAnnotation${this.savedAnnotationId}`] : [];
-    }
-
     get savedAnnotation(): SavedAnnotation {
-        return getSavedAnnotation(this.savedAnnotationId);
+        return savedAnnotationState.get(this.savedAnnotationId);
     }
 
     render(): TemplateResult {
-        return this.isAlreadyLinked && this.savedAnnotation!= undefined ? html`
-            <i class="mdi mdi-link-variant mdi-18 annotation-meta-icon" title="${I18n.t("js.saved_annotation.new.linked", { title: this.savedAnnotation.title })}"></i>
+        return isBetaCourse() && this.isAlreadyLinked && this.savedAnnotation!= undefined ? html`
+            <i class="mdi mdi-link-variant mdi-18 annotation-meta-icon"
+               title="${I18n.t("js.saved_annotation.new.linked", { title: this.savedAnnotation.title })}"
+            ></i>
         ` : html``;
     }
 }
diff --git a/app/assets/javascripts/components/saved_annotations/saved_annotation_input.ts b/app/assets/javascripts/components/saved_annotations/saved_annotation_input.ts
index 6730a7cd69..0415909d11 100644
--- a/app/assets/javascripts/components/saved_annotations/saved_annotation_input.ts
+++ b/app/assets/javascripts/components/saved_annotations/saved_annotation_input.ts
@@ -1,10 +1,12 @@
 import { customElement, property } from "lit/decorators.js";
 import { html, TemplateResult } from "lit";
-import { ShadowlessLitElement } from "components/shadowless_lit_element";
+import { ShadowlessLitElement } from "components/meta/shadowless_lit_element";
 import "components/datalist_input";
-import { getSavedAnnotation, getSavedAnnotations, SavedAnnotation } from "state/SavedAnnotations";
-import { stateMixin } from "state/StateMixin";
+import { SavedAnnotation, savedAnnotationState } from "state/SavedAnnotations";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { userState } from "state/Users";
+import { courseState } from "state/Courses";
+import { exerciseState } from "state/Exercises";
 
 /**
  * This component represents an input for a saved annotation id.
@@ -13,24 +15,15 @@ import { unsafeHTML } from "lit/directives/unsafe-html.js";
  * @element d-saved-annotation-input
  *
  * @prop {String} name - name of the input field (used in form submit)
- * @prop {Number} courseId - used to fetch saved annotations by course
- * @prop {Number} exerciseId - used to fetch saved annotations by exercise
- * @prop {Number} userId - used to fetch saved annotations by user
  * @prop {String} value - the initial saved annotation id
  * @prop {String} annotationText - the current text of the real annotation, used to detect if there are manual changes from the selected saved annotation
  *
  * @fires input - on value change, event details contain {title: string, id: string, annotation_text: string}
  */
 @customElement("d-saved-annotation-input")
-export class SavedAnnotationInput extends stateMixin(ShadowlessLitElement) {
+export class SavedAnnotationInput extends ShadowlessLitElement {
     @property({ type: String })
     name = "";
-    @property({ type: Number, attribute: "course-id" })
-    courseId: number;
-    @property({ type: Number, attribute: "exercise-id" })
-    exerciseId: number;
-    @property({ type: Number, attribute: "user-id" })
-    userId: number;
     @property({ type: String })
     value: string;
     @property( { type: String, attribute: "annotation-text" })
@@ -39,27 +32,27 @@ export class SavedAnnotationInput extends stateMixin(ShadowlessLitElement) {
     @property({ state: true })
     __label: string;
 
-    get state(): string[] {
-        return this.value ? [`getSavedAnnotation${this.value}`, "getSavedAnnotations"] : ["getSavedAnnotations"];
+    get userId(): number {
+        return userState.id;
     }
 
     get label(): string {
-        return this.value ? getSavedAnnotation(parseInt(this.value))?.title : this.__label;
+        return this.value ? savedAnnotationState.get(parseInt(this.value))?.title : this.__label;
     }
 
     get savedAnnotations(): SavedAnnotation[] {
-        return getSavedAnnotations(new Map([
-            ["course_id", this.courseId.toString()],
-            ["exercise_id", this.exerciseId.toString()],
+        return savedAnnotationState.getList(new Map([
+            ["course_id", courseState.id.toString()],
+            ["exercise_id", exerciseState.id.toString()],
             ["user_id", this.userId.toString()],
             ["filter", this.__label]
         ]));
     }
 
     get potentialSavedAnnotationsExist(): boolean {
-        return getSavedAnnotations(new Map([
-            ["course_id", this.courseId.toString()],
-            ["exercise_id", this.exerciseId.toString()],
+        return savedAnnotationState.getList(new Map([
+            ["course_id", courseState.id.toString()],
+            ["exercise_id", exerciseState.id.toString()],
             ["user_id", this.userId.toString()]
         ])).length > 0;
     }
diff --git a/app/assets/javascripts/components/saved_annotations/saved_annotation_list.ts b/app/assets/javascripts/components/saved_annotations/saved_annotation_list.ts
index e5189021f7..0961550601 100644
--- a/app/assets/javascripts/components/saved_annotations/saved_annotation_list.ts
+++ b/app/assets/javascripts/components/saved_annotations/saved_annotation_list.ts
@@ -1,11 +1,10 @@
 import { customElement, property } from "lit/decorators.js";
 import { html, TemplateResult } from "lit";
-import { ShadowlessLitElement } from "components/shadowless_lit_element";
-import { getSavedAnnotations, getSavedAnnotationsPagination, Pagination, SavedAnnotation } from "state/SavedAnnotations";
-import { stateMixin } from "state/StateMixin";
+import { ShadowlessLitElement } from "components/meta/shadowless_lit_element";
+import { Pagination, SavedAnnotation, savedAnnotationState } from "state/SavedAnnotations";
 import "./edit_saved_annotation";
 import "components/pagination";
-import { getArrayQueryParams, getQueryParams } from "state/SearchQuery";
+import { searchQueryState } from "state/SearchQuery";
 
 /**
  * This component represents a list of saved annotations
@@ -18,7 +17,7 @@ import { getArrayQueryParams, getQueryParams } from "state/SearchQuery";
  * @prop {Boolean} small - When present, less columns and rows will be displayed in the table
  */
 @customElement("d-saved-annotation-list")
-export class SavedAnnotationList extends stateMixin(ShadowlessLitElement) {
+export class SavedAnnotationList extends ShadowlessLitElement {
     @property({ type: Number, attribute: "course-id" })
     courseId: number;
     @property({ type: Number, attribute: "exercise-id" })
@@ -28,10 +27,8 @@ export class SavedAnnotationList extends stateMixin(ShadowlessLitElement) {
     @property({ type: Boolean })
     small = false;
 
-    state = ["getSavedAnnotations", "getQueryParams", "getArrayQueryParams", "getSavedAnnotationsPagination"];
-
     get queryParams(): Map<string, string> {
-        const params: Map<string, string> = getQueryParams();
+        const params: Map<string, string> = searchQueryState.queryParams;
         if (this.courseId) {
             params.set("course_id", this.courseId.toString());
         }
@@ -48,15 +45,15 @@ export class SavedAnnotationList extends stateMixin(ShadowlessLitElement) {
     }
 
     get arrayQueryParams(): Map<string, string[]> {
-        return getArrayQueryParams();
+        return searchQueryState.arrayQueryParams;
     }
 
     get savedAnnotations(): SavedAnnotation[] {
-        return getSavedAnnotations(this.queryParams, this.arrayQueryParams);
+        return savedAnnotationState.getList(this.queryParams, this.arrayQueryParams);
     }
 
     get pagination(): Pagination {
-        return getSavedAnnotationsPagination(this.queryParams, this.arrayQueryParams);
+        return savedAnnotationState.getPagination(this.queryParams, this.arrayQueryParams);
     }
 
     render(): TemplateResult {
diff --git a/app/assets/javascripts/components/saved_annotations/saved_annotations_sidecard.ts b/app/assets/javascripts/components/saved_annotations/saved_annotations_sidecard.ts
index c4196c56af..d5fe7fc662 100644
--- a/app/assets/javascripts/components/saved_annotations/saved_annotations_sidecard.ts
+++ b/app/assets/javascripts/components/saved_annotations/saved_annotations_sidecard.ts
@@ -1,9 +1,8 @@
 import { customElement, property } from "lit/decorators.js";
-import { ShadowlessLitElement } from "components/shadowless_lit_element";
+import { ShadowlessLitElement } from "components/meta/shadowless_lit_element";
 import { html, TemplateResult } from "lit";
 import "./saved_annotation_list";
-import { getSavedAnnotations } from "state/SavedAnnotations";
-import { stateMixin } from "state/StateMixin";
+import { savedAnnotationState } from "state/SavedAnnotations";
 
 /**
  * This component represents a list of saved annotations
@@ -15,7 +14,7 @@ import { stateMixin } from "state/StateMixin";
  * @prop {Number} userId - used to fetch saved annotations by user
  */
 @customElement("d-saved-annotations-sidecard")
-export class SavedAnnotationList extends stateMixin(ShadowlessLitElement) {
+export class SavedAnnotationList extends ShadowlessLitElement {
     @property({ type: Number, attribute: "course-id" })
     courseId: number;
     @property({ type: Number, attribute: "exercise-id" })
@@ -23,10 +22,8 @@ export class SavedAnnotationList extends stateMixin(ShadowlessLitElement) {
     @property({ type: Number, attribute: "user-id" })
     userId: number;
 
-    state = ["getSavedAnnotations"];
-
     get potentialSavedAnnotationsExist(): boolean {
-        return getSavedAnnotations(new Map([
+        return savedAnnotationState.getList(new Map([
             ["course_id", this.courseId.toString()],
             ["exercise_id", this.exerciseId.toString()],
             ["user_id", this.userId.toString()]
diff --git a/app/assets/javascripts/components/dropdown_filter.ts b/app/assets/javascripts/components/search/dropdown_filter.ts
similarity index 97%
rename from app/assets/javascripts/components/dropdown_filter.ts
rename to app/assets/javascripts/components/search/dropdown_filter.ts
index f04c611529..31644ad410 100644
--- a/app/assets/javascripts/components/dropdown_filter.ts
+++ b/app/assets/javascripts/components/search/dropdown_filter.ts
@@ -1,7 +1,7 @@
 import { html, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { FilterCollection, Label, FilterCollectionElement } from "components/filter_collection_element";
-import { ShadowlessLitElement } from "components/shadowless_lit_element";
+import { FilterCollection, Label, FilterCollectionElement } from "components/search/filter_collection_element";
+import { ShadowlessLitElement } from "components/meta/shadowless_lit_element";
 
 /**
  * This component inherits from FilterCollectionElement.
diff --git a/app/assets/javascripts/components/filter_button.ts b/app/assets/javascripts/components/search/filter_button.ts
similarity index 59%
rename from app/assets/javascripts/components/filter_button.ts
rename to app/assets/javascripts/components/search/filter_button.ts
index 4c77caad4d..d1043c698a 100644
--- a/app/assets/javascripts/components/filter_button.ts
+++ b/app/assets/javascripts/components/search/filter_button.ts
@@ -1,8 +1,9 @@
 import { customElement, property } from "lit/decorators.js";
-import { css, html, LitElement, TemplateResult } from "lit";
-import { ref } from "lit/directives/ref.js";
-import { searchQuery } from "search";
-import { ShadowlessLitElement } from "components/shadowless_lit_element";
+import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { ShadowlessLitElement } from "components/meta/shadowless_lit_element";
+import { initTooltips } from "util.js";
+import { searchQueryState } from "state/SearchQuery";
+import { StateController } from "state/state_system/StateController";
 
 /**
  * This is a very simple clickable component
@@ -24,8 +25,8 @@ export class FilterButton extends LitElement {
     value: string;
     @property({ type: Boolean })
     multi = false;
-    @property({ type: Object })
-    searchQuery = searchQuery;
+
+    state = new StateController(this);
 
     static styles = css`
         :host {
@@ -33,18 +34,20 @@ export class FilterButton extends LitElement {
         }
     `;
 
-    addFilter(): void {
+    addFilter(e: Event): void {
+        e.preventDefault();
+        e.stopPropagation();
         if (this.multi) {
-            const selected = new Set(this.searchQuery.arrayQueryParams.params.get(this.param));
+            const selected = new Set(searchQueryState.arrayQueryParams.get(this.param));
             selected.add(this.value);
-            this.searchQuery.arrayQueryParams.updateParam(this.param, Array.from(selected));
+            searchQueryState.arrayQueryParams.set(this.param, Array.from(selected));
         } else {
-            this.searchQuery.queryParams.updateParam(this.param, this.value);
+            searchQueryState.queryParams.set(this.param, this.value);
         }
     }
 
     render(): TemplateResult {
-        return html`<slot @click=${() => this.addFilter()}></slot>`;
+        return html`<slot @click=${e => this.addFilter(e)}></slot>`;
     }
 }
 
@@ -61,35 +64,25 @@ export class FilterButton extends LitElement {
 export class FilterIcon extends ShadowlessLitElement {
     @property({ type: String })
     value: string;
-    @property({ type: String })
-    title: string;
+    @property({ type: String, attribute: "icon-title" })
+    iconTitle: string;
 
-    element: Element;
-
-    initialiseTooltip(e: Element): void {
-        if (e) {
-            this.element = e;
-            const tooltip = window.bootstrap.Tooltip.getInstance(this.element);
-            if (!tooltip) {
-                new window.bootstrap.Tooltip(this.element);
-            }
-        }
+    protected update(changedProperties: PropertyValues): void {
+        super.update(changedProperties);
+        initTooltips(this);
     }
 
     disconnectedCallback(): void {
-        const tooltip = window.bootstrap.Tooltip.getInstance(this.element);
-        tooltip.hide();
-        super.disconnectedCallback();
+        initTooltips();
     }
 
     render(): TemplateResult {
         return html`
         <d-filter-button param="filter" .value=${this.value}>
             <i class="mdi mdi-filter-outline mdi-18 filter-icon"
-               title="${this.title}"
+               title="${this.iconTitle}"
                data-bs-toggle="tooltip"
                data-bs-placement="top"
-               ${ref(r => this.initialiseTooltip(r))}
             >
             </i>
         </d-filter-button>
diff --git a/app/assets/javascripts/components/filter_collection_element.ts b/app/assets/javascripts/components/search/filter_collection_element.ts
similarity index 64%
rename from app/assets/javascripts/components/filter_collection_element.ts
rename to app/assets/javascripts/components/search/filter_collection_element.ts
index 8a7fd03598..967d869437 100644
--- a/app/assets/javascripts/components/filter_collection_element.ts
+++ b/app/assets/javascripts/components/search/filter_collection_element.ts
@@ -1,6 +1,6 @@
 import { property } from "lit/decorators.js";
-import { SearchQuery, searchQuery } from "search";
-import { ShadowlessLitElement } from "components/shadowless_lit_element";
+import { ShadowlessLitElement } from "components/meta/shadowless_lit_element";
+import { searchQueryState } from "state/SearchQuery";
 
 export type Label = {id: string, name: string};
 export type FilterCollection = {
@@ -30,23 +30,15 @@ export class FilterCollectionElement extends ShadowlessLitElement {
     paramVal: (l: Label) => string;
     @property({ type: Array })
     labels: Array<Label> = [];
-    @property({ type: Object })
-    searchQuery: SearchQuery = searchQuery;
-    @property({ state: true })
-    private multiSelected: string[] = [];
-    @property({ state: true })
-    private singleSelected = "";
 
     update(changedProperties: Map<string, unknown>): void {
-        if ((changedProperties.has("param") || changedProperties.has("multi") || changedProperties.has("searchQuery")) &&
+        if ((changedProperties.has("param") || changedProperties.has("multi")) &&
             this.param !== undefined && this.multi !== undefined) {
             if (this.multi) {
-                this.multiSubscribeToQueryParams();
                 this.select = this.multiSelect;
                 this.unSelect = this.multiUnSelect;
                 this.isSelected = this.multiIsSelected;
             } else {
-                this.singleSubscribeToQueryParams();
                 this.select = this.singleSelect;
                 this.unSelect = this.singleUnSelect;
                 this.isSelected = this.singleIsSelected;
@@ -59,8 +51,12 @@ export class FilterCollectionElement extends ShadowlessLitElement {
         return this.paramVal(label).toString();
     }
 
+    private get multiSelected(): string[] {
+        return searchQueryState.arrayQueryParams.get(this.param) || [];
+    }
+
     private multiUnSelect(label: Label): void {
-        this.searchQuery.arrayQueryParams.updateParam(this.param, this.multiSelected.filter(s => s !== this.str(label)));
+        searchQueryState.arrayQueryParams.set(this.param, this.multiSelected.filter(s => s !== this.str(label)));
     }
 
     private multiIsSelected(label: Label): boolean {
@@ -68,31 +64,19 @@ export class FilterCollectionElement extends ShadowlessLitElement {
     }
 
     private multiSelect(label: Label): void {
-        this.searchQuery.arrayQueryParams.updateParam(this.param, [...this.multiSelected, this.str(label)]);
-    }
-
-    private multiSubscribeToQueryParams(): void {
-        this.multiSelected = this.searchQuery.arrayQueryParams.params.get(this.param) || [];
-        this.searchQuery.arrayQueryParams.subscribeByKey(this.param, (k, o, n) => {
-            this.multiSelected = n || [];
-        });
+        searchQueryState.arrayQueryParams.set(this.param, [...this.multiSelected, this.str(label)]);
     }
 
     private singleUnSelect(label: Label): void {
-        this.searchQuery.queryParams.updateParam(this.param, undefined);
+        searchQueryState.queryParams.set(this.param, undefined);
     }
 
     private singleSelect(label: Label): void {
-        this.searchQuery.queryParams.updateParam(this.param, this.str(label));
+        searchQueryState.queryParams.set(this.param, this.str(label));
     }
 
     private singleIsSelected(label: Label): boolean {
-        return this.singleSelected === this.str(label);
-    }
-
-    private singleSubscribeToQueryParams(): void {
-        this.singleSelected = this.searchQuery.queryParams.params.get(this.param);
-        this.searchQuery.queryParams.subscribeByKey(this.param, (k, o, n) => this.singleSelected = n || "");
+        return searchQueryState.queryParams.get(this.param) === this.str(label);
     }
 
     isSelected = this.singleIsSelected;
diff --git a/app/assets/javascripts/components/filter_tabs.ts b/app/assets/javascripts/components/search/filter_tabs.ts
similarity index 92%
rename from app/assets/javascripts/components/filter_tabs.ts
rename to app/assets/javascripts/components/search/filter_tabs.ts
index da940a72cf..be9731a213 100644
--- a/app/assets/javascripts/components/filter_tabs.ts
+++ b/app/assets/javascripts/components/search/filter_tabs.ts
@@ -1,7 +1,7 @@
 import { html, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { FilterCollectionElement, Label } from "components/filter_collection_element";
-import { watchMixin } from "components/watch_mixin";
+import { FilterCollectionElement, Label } from "components/search/filter_collection_element";
+import { watchMixin } from "components/meta/watch_mixin";
 
 /**
  * This component inherits from FilterCollectionElement.
diff --git a/app/assets/javascripts/components/loading_bar.ts b/app/assets/javascripts/components/search/loading_bar.ts
similarity index 86%
rename from app/assets/javascripts/components/loading_bar.ts
rename to app/assets/javascripts/components/search/loading_bar.ts
index be52fd311c..84000cf3c4 100644
--- a/app/assets/javascripts/components/loading_bar.ts
+++ b/app/assets/javascripts/components/search/loading_bar.ts
@@ -1,7 +1,7 @@
 import { html, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { ShadowlessLitElement } from "components/shadowless_lit_element";
-import { searchQuery } from "search";
+import { ShadowlessLitElement } from "components/meta/shadowless_lit_element";
+import { search } from "search";
 
 /**
  * This component represents a loading bar.
@@ -16,7 +16,7 @@ export class LoadingBar extends ShadowlessLitElement {
 
     constructor() {
         super();
-        searchQuery.loadingBars.push(this);
+        search.loadingBars.push(this);
     }
 
     show(): void {
diff --git a/app/assets/javascripts/components/search_actions.ts b/app/assets/javascripts/components/search/search_actions.ts
similarity index 79%
rename from app/assets/javascripts/components/search_actions.ts
rename to app/assets/javascripts/components/search/search_actions.ts
index 5690b1585f..edb2baaee7 100644
--- a/app/assets/javascripts/components/search_actions.ts
+++ b/app/assets/javascripts/components/search/search_actions.ts
@@ -2,8 +2,8 @@ import { html, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { Toast } from "toast";
 import { fetch, ready } from "util.js";
-import { SearchQuery, searchQuery } from "search";
-import { ShadowlessLitElement } from "components/shadowless_lit_element";
+import { ShadowlessLitElement } from "components/meta/shadowless_lit_element";
+import { searchQueryState } from "state/SearchQuery";
 
 export type SearchOption = {search: Record<string, string>, type?: string, text: string};
 export type SearchAction = {
@@ -34,36 +34,21 @@ export class SearchOptionElement extends ShadowlessLitElement {
     searchOption: SearchOption;
     @property( { type: Number })
     key: number;
-    @property({ type: Object })
-    searchQuery: SearchQuery = searchQuery;
-
-    @property({ state: true })
-    private _active = false;
 
-    update(changedProperties: Map<string, unknown>): void {
-        if (changedProperties.has("searchOption") && this.searchOption) {
-            this.setActive();
-            Object.keys(this.searchOption.search).forEach(k => {
-                this.searchQuery.queryParams.subscribeByKey(k, () => this.setActive());
-            });
-        }
-        super.update(changedProperties);
-    }
-
-    setActive(): void {
-        this._active = Object.entries(this.searchOption.search).every(([key, value]) => {
-            return this.searchQuery.queryParams.params.get(key) == value.toString();
+    get active(): boolean {
+        return Object.entries(this.searchOption.search).every(([key, value]) => {
+            return searchQueryState.queryParams.get(key) == value.toString();
         });
     }
 
     performSearch(): void {
-        if (!this._active) {
+        if (!this.active) {
             Object.entries(this.searchOption.search).forEach(([key, value]) => {
-                this.searchQuery.queryParams.updateParam(key, value.toString());
+                searchQueryState.queryParams.set(key, value.toString());
             });
         } else {
             Object.keys(this.searchOption.search).forEach(key => {
-                this.searchQuery.queryParams.updateParam(key, undefined);
+                searchQueryState.queryParams.set(key, undefined);
             });
         }
     }
@@ -75,7 +60,7 @@ export class SearchOptionElement extends ShadowlessLitElement {
                             <input
                                 class="form-check-input"
                                 type="checkbox"
-                                .checked=${this._active}
+                                .checked=${this.active}
                                 @click="${() => this.performSearch()}"
                                 id="check-${this.searchOption.type}-${this.key}"
                             >
@@ -99,8 +84,6 @@ export class SearchOptionElement extends ShadowlessLitElement {
 export class SearchActions extends ShadowlessLitElement {
     @property({ type: Array })
     actions: (SearchOption|SearchAction)[] = [];
-    @property({ type: Object })
-    searchQuery: SearchQuery = searchQuery;
 
     getSearchOptions(): Array<SearchOption> {
         return this.actions.filter(isSearchOption);
@@ -121,7 +104,7 @@ export class SearchActions extends ShadowlessLitElement {
         }
 
         if (action.confirm === undefined || window.confirm(action.confirm)) {
-            const url: string = this.searchQuery.addParametersToUrl(action.action);
+            const url: string = searchQueryState.addParametersToUrl(action.action);
 
             const response = await fetch(url, {
                 method: "POST",
@@ -132,7 +115,8 @@ export class SearchActions extends ShadowlessLitElement {
             if (data.js) {
                 eval(data.js);
             } else {
-                this.searchQuery.resetAllQueryParams();
+                searchQueryState.arrayQueryParams.clear();
+                searchQueryState.queryParams.clear();
             }
         }
 
@@ -159,8 +143,7 @@ export class SearchActions extends ShadowlessLitElement {
                     ` : html``}
                     ${this.getSearchOptions().map((opt, id) => html`
                         <d-search-option .searchOption=${opt}
-                                         .key=${id}
-                                         .searchQuery=${this.searchQuery}>
+                                         .key=${id}>
                         </d-search-option>
                     `)}
 
diff --git a/app/assets/javascripts/components/search_field.ts b/app/assets/javascripts/components/search/search_field.ts
similarity index 89%
rename from app/assets/javascripts/components/search_field.ts
rename to app/assets/javascripts/components/search/search_field.ts
index 981ed4106c..758f6a7358 100644
--- a/app/assets/javascripts/components/search_field.ts
+++ b/app/assets/javascripts/components/search/search_field.ts
@@ -3,10 +3,10 @@ import { html, TemplateResult } from "lit";
 import { createDelayer } from "util.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { ref } from "lit/directives/ref.js";
-import { SearchQuery, searchQuery } from "search";
-import { ShadowlessLitElement } from "components/shadowless_lit_element";
-import { FilterCollectionElement, Label } from "components/filter_collection_element";
-
+import { ShadowlessLitElement } from "components/meta/shadowless_lit_element";
+import { FilterCollectionElement, Label } from "components/search/filter_collection_element";
+import { searchQueryState } from "state/SearchQuery";
+import { search } from "search";
 /**
  * This component inherits from FilterCollectionElement.
  * It represents a list of filters to be used in a dropdown as typeahead suggestions
@@ -47,7 +47,7 @@ export class SearchFieldSuggestion extends FilterCollectionElement {
     handleClick(e: Event, label: Label): void {
         e.preventDefault();
         this.select(label);
-        this.searchQuery.queryParams.updateParam("filter", undefined);
+        searchQueryState.queryParams.set("filter", undefined);
     }
 
     render(): TemplateResult {
@@ -83,8 +83,6 @@ export class SearchField extends ShadowlessLitElement {
     eager: boolean;
     @property( { type: Array })
     filterCollections: Record<string, { data: Label[], multi: boolean, paramVal: (l: Label) => string, param: string }>;
-    @property({ type: Object })
-    searchQuery: SearchQuery = searchQuery;
 
     @property({ state: true })
     filter?: string = "";
@@ -109,13 +107,14 @@ export class SearchField extends ShadowlessLitElement {
     }
 
     firstUpdated(): void {
-        this.searchQuery.queryParams.subscribeByKey("filter", (k, o, n) => this.filter = n || "");
-        this.filter = this.searchQuery.queryParams.params.get("filter") || "";
+        const setFilter = (): string => this.filter = searchQueryState.queryParams.get("filter") || "";
+        searchQueryState.queryParams.subscribe(setFilter, "filter");
+        setFilter();
     }
 
     update(changedProperties: Map<string, unknown>): void {
         if (changedProperties.has("eager") && this.eager) {
-            this.searchQuery.search();
+            search.search();
         }
         super.update(changedProperties);
     }
@@ -131,7 +130,7 @@ export class SearchField extends ShadowlessLitElement {
         if (e.key === "Tab") {
             this.tabComplete();
         }
-        this.delay(() => this.searchQuery.queryParams.updateParam("filter", this.filter), 300);
+        this.delay(() => searchQueryState.queryParams.set("filter", this.filter), 300);
     }
 
     updated(): void {
@@ -175,7 +174,6 @@ export class SearchField extends ShadowlessLitElement {
                         .param=${c.param}
                         .multi=${c.multi}
                         .index=${i}
-                        .searchQuery=${this.searchQuery}
                         ${ref(this.suggestionFieldChanged)}
                     >
                     </d-search-field-suggestion>
diff --git a/app/assets/javascripts/components/search_token.ts b/app/assets/javascripts/components/search/search_token.ts
similarity index 94%
rename from app/assets/javascripts/components/search_token.ts
rename to app/assets/javascripts/components/search/search_token.ts
index ca60dd0eb2..ad5b9cd93e 100644
--- a/app/assets/javascripts/components/search_token.ts
+++ b/app/assets/javascripts/components/search/search_token.ts
@@ -1,7 +1,7 @@
 import { html, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { ShadowlessLitElement } from "components/shadowless_lit_element";
-import { FilterCollection, FilterCollectionElement, Label } from "components/filter_collection_element";
+import { ShadowlessLitElement } from "components/meta/shadowless_lit_element";
+import { FilterCollection, FilterCollectionElement, Label } from "components/search/filter_collection_element";
 
 /**
  * This component inherits from FilterCollectionElement.
diff --git a/app/assets/javascripts/components/sort_button.ts b/app/assets/javascripts/components/search/sort_button.ts
similarity index 50%
rename from app/assets/javascripts/components/sort_button.ts
rename to app/assets/javascripts/components/search/sort_button.ts
index 9c7f4d181c..c7a98335e2 100644
--- a/app/assets/javascripts/components/sort_button.ts
+++ b/app/assets/javascripts/components/search/sort_button.ts
@@ -1,58 +1,7 @@
-import "search.ts";
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { searchQuery, SearchQuery } from "search";
-
-/**
- * This class is made to manage the currently active sort parameter in the search query
- */
-export class SortQuery {
-    active_column: string;
-    ascending: boolean;
-    listeners: Array<(c: string, a: boolean) => void> = [];
-    searchQuery: SearchQuery;
-
-    constructor(_searchQuery: SearchQuery = searchQuery) {
-        this.searchQuery = _searchQuery;
-        this.active_column = this.searchQuery.queryParams.params.get("order_by[column]");
-        this.ascending = this.searchQuery.queryParams.params.get("order_by[direction]") === "ASC";
-        this.searchQuery.queryParams.subscribeByKey("order_by[column]", (k, o, n) => {
-            this.active_column = n;
-            this.notify();
-        });
-        this.searchQuery.queryParams.subscribeByKey("order_by[direction]", (k, o, n) => {
-            this.ascending = n === "ASC";
-            this.notify();
-        });
-    }
-
-    getDirectionValue(): string {
-        return this.ascending ? "ASC" : "DESC";
-    }
-
-    subscribe(listener: (c: string, a: boolean) => void): void {
-        this.listeners.push(listener);
-    }
-
-    notify(): void {
-        this.listeners.forEach(f => f(this.active_column, this.ascending));
-    }
-
-    sortBy(column: string, ascending: boolean): void {
-        if (this.active_column === column && this.ascending === ascending) {
-            return;
-        }
-
-        this.active_column = column;
-        this.ascending = ascending;
-        if (this.active_column) {
-            this.searchQuery.queryParams.updateParam("order_by[column]", this.active_column);
-            this.searchQuery.queryParams.updateParam("order_by[direction]", this.getDirectionValue());
-        }
-    }
-}
-export const sortQuery = new SortQuery();
-
+import { searchQueryState } from "state/SearchQuery";
+import { StateController } from "state/state_system/StateController";
 /**
  * This component represents a sort button.
  * It is clickable and contains an icon indicating the current sort direction.
@@ -73,21 +22,10 @@ export class SortButton extends LitElement {
     default: string;
     @property({ type: Boolean })
     disabled = false;
-    @property({ type: Object })
-    sortQuery: SortQuery = sortQuery;
 
-    active_column: string;
-    ascending: boolean;
+    state = new StateController(this);
 
     update(changedProperties: Map<string, unknown>): void {
-        if (changedProperties.has("sortQuery")) {
-            this.ascending = this.sortQuery.ascending;
-            this.active_column = this.sortQuery.active_column;
-            this.sortQuery.subscribe((c, a) => {
-                this.active_column = c;
-                this.ascending = a;
-            });
-        }
         if ( changedProperties.has("disabled") ) {
             if (!this.disabled) {
                 this.addEventListener("click", this.sort);
@@ -95,12 +33,6 @@ export class SortButton extends LitElement {
                 this.removeEventListener("click", this.sort);
             }
         }
-        if (changedProperties.has("default") &&
-            (this.default === "ASC" || this.default === "DESC" ) &&
-            this.active_column === undefined) {
-            this.active_column = this.column;
-            this.ascending = this.default === "ASC";
-        }
         super.update(changedProperties);
     }
 
@@ -149,7 +81,13 @@ export class SortButton extends LitElement {
     `;
 
     isActive(): boolean {
-        return this.column === this.active_column;
+        return this.column === searchQueryState.queryParams.get("order_by[column]") ||
+            (this.default !== undefined && searchQueryState.queryParams.get("order_by[column]") === undefined);
+    }
+
+    get ascending(): boolean {
+        return searchQueryState.queryParams.get("order_by[direction]") === "ASC" ||
+            (this.default === "ASC" && searchQueryState.queryParams.get("order_by[direction]") === undefined);
     }
 
     getSortIcon(): string {
@@ -157,10 +95,11 @@ export class SortButton extends LitElement {
     }
 
     sort(): void {
+        searchQueryState.queryParams.set("order_by[column]", this.column);
         if (!this.isActive() || !this.ascending) {
-            this.sortQuery.sortBy(this.column, true);
+            searchQueryState.queryParams.set("order_by[direction]", "ASC");
         } else {
-            this.sortQuery.sortBy(this.column, false);
+            searchQueryState.queryParams.set("order_by[direction]", "DESC");
         }
     }
 
diff --git a/app/assets/javascripts/components/standalone-dropdown-filter.ts b/app/assets/javascripts/components/search/standalone-dropdown-filter.ts
similarity index 92%
rename from app/assets/javascripts/components/standalone-dropdown-filter.ts
rename to app/assets/javascripts/components/search/standalone-dropdown-filter.ts
index e5ed7268a9..ed95745cf4 100644
--- a/app/assets/javascripts/components/standalone-dropdown-filter.ts
+++ b/app/assets/javascripts/components/search/standalone-dropdown-filter.ts
@@ -1,7 +1,7 @@
 import { customElement, property } from "lit/decorators.js";
-import { FilterCollectionElement, Label } from "components/filter_collection_element";
+import { FilterCollectionElement, Label } from "components/search/filter_collection_element";
 import { html, TemplateResult } from "lit";
-import { watchMixin } from "components/watch_mixin";
+import { watchMixin } from "components/meta/watch_mixin";
 
 /**
  * This component inherits from FilterCollectionElement.
diff --git a/app/assets/javascripts/components/sign_in_search_bar.ts b/app/assets/javascripts/components/sign_in_search_bar.ts
index 4a2f6fb51f..f6cba67d64 100644
--- a/app/assets/javascripts/components/sign_in_search_bar.ts
+++ b/app/assets/javascripts/components/sign_in_search_bar.ts
@@ -1,6 +1,6 @@
 import { customElement, property } from "lit/decorators.js";
 import { html, TemplateResult } from "lit";
-import { ShadowlessLitElement } from "components/shadowless_lit_element";
+import { ShadowlessLitElement } from "components/meta/shadowless_lit_element";
 import { Option } from "components/datalist_input";
 import { ready } from "util.js";
 import "components/datalist_input";
diff --git a/app/assets/javascripts/course.ts b/app/assets/javascripts/course.ts
index d2b8b71bfc..5d7e92ec26 100644
--- a/app/assets/javascripts/course.ts
+++ b/app/assets/javascripts/course.ts
@@ -1,13 +1,13 @@
 import { initDragAndDrop } from "./drag_and_drop";
 import { fetch, getURLParameter } from "./util.js";
 import { ScrollSpy } from "./scrollspy";
-import { searchQuery } from "./search";
 import { html, render } from "lit";
 import { Modal } from "bootstrap";
+import { searchQueryState } from "state/SearchQuery";
 
 function loadUsers(_status = undefined): void {
     const status = _status || getURLParameter("status");
-    searchQuery.queryParams.updateParam("status", status);
+    searchQueryState.queryParams.set("status", status);
 }
 
 function initCourseMembers(): void {
@@ -63,7 +63,7 @@ function initCourseMembers(): void {
             });
 
         // Determine which tab to show first
-        const status = searchQuery.queryParams.params.get("status");
+        const status = searchQueryState.queryParams.get("status");
         let tab = document.querySelector("a[data-status='" + status + "']");
         if (tab === null) {
             tab = document.querySelector("a[data-status='enrolled']");
diff --git a/app/assets/javascripts/drag_and_drop.ts b/app/assets/javascripts/drag_and_drop.ts
index 163e1504dc..a2a9c5f46b 100644
--- a/app/assets/javascripts/drag_and_drop.ts
+++ b/app/assets/javascripts/drag_and_drop.ts
@@ -32,7 +32,7 @@ function initDragAndDrop(args: DragAndDropArguments): void {
 
     dragula([tableBody], {
         moves: (el, source, handle, sibling) => {
-            return handle.classList.contains("drag-handle") || getParentByClassName(handle, "drag-handle");
+            return handle.classList.contains("drag-handle") || getParentByClassName(handle, "drag-handle") !== null;
         },
         mirrorContainer: tableBody,
     })
diff --git a/app/assets/javascripts/exercise.ts b/app/assets/javascripts/exercise.ts
index a53864711b..97b5bb18f6 100644
--- a/app/assets/javascripts/exercise.ts
+++ b/app/assets/javascripts/exercise.ts
@@ -3,6 +3,7 @@ import { initTooltips, updateURLParameter, fetch } from "util.js";
 import { Toast } from "./toast";
 import GLightbox from "glightbox";
 import { IFrameMessageData } from "iframe-resizer";
+import { submissionState } from "state/Submissions";
 import { render } from "lit";
 import { CopyButton } from "components/copy_button";
 
@@ -11,7 +12,12 @@ function showLightbox(content): void {
     lightbox.on("slide_changed", () => {
         // There might have been math in the image captions, so ask
         // MathJax to search for new math (but only in the captions).
-        window.MathJax.typeset([".gslide-description"]);
+        try {
+            window.MathJax.typeset( Array.from(document.querySelectorAll(".gslide-description")));
+        } catch (e) {
+            // MathJax is not loaded
+            console.warn("MathJax is not loaded");
+        }
     });
     lightbox.open();
 
@@ -162,7 +168,7 @@ function initExerciseShow(exerciseId: number, programmingLanguage: string, logge
         });
 
         document.getElementById("submission-copy-btn")?.addEventListener("click", () => {
-            const codeString = dodona.codeListing.code;
+            const codeString = submissionState.code;
             editor.setValue(codeString, 1);
             bootstrap.Tab.getInstance(document.getElementById("activity-handin-link")).show();
         });
@@ -461,6 +467,7 @@ function initExerciseShow(exerciseId: number, programmingLanguage: string, logge
 
             editor.setValue(rawBoilerplate);
             editor.focus();
+            editor.clearSelection();
             restoreWarning.hidden = true;
         });
     }
diff --git a/app/assets/javascripts/i18n/translations.json b/app/assets/javascripts/i18n/translations.json
index 324e258a59..d221e55d0b 100644
--- a/app/assets/javascripts/i18n/translations.json
+++ b/app/assets/javascripts/i18n/translations.json
@@ -66,19 +66,19 @@
     "datetime": {
       "distance_in_words": {
         "about_x_hours": {
-          "one": "about 1 hour",
+          "one": "about %{count} hour",
           "other": "about %{count} hours"
         },
         "about_x_months": {
-          "one": "about 1 month",
+          "one": "about %{count} month",
           "other": "about %{count} months"
         },
         "about_x_years": {
-          "one": "about 1 year",
+          "one": "about %{count} year",
           "other": "about %{count} years"
         },
         "almost_x_years": {
-          "one": "almost 1 year",
+          "one": "almost %{count} year",
           "other": "almost %{count} years"
         },
         "half_a_minute": "half a minute",
@@ -87,31 +87,31 @@
           "other": "less than %{count} minutes"
         },
         "less_than_x_seconds": {
-          "one": "less than 1 second",
+          "one": "less than %{count} second",
           "other": "less than %{count} seconds"
         },
         "over_x_years": {
-          "one": "over 1 year",
+          "one": "over %{count} year",
           "other": "over %{count} years"
         },
         "x_days": {
-          "one": "1 day",
+          "one": "%{count} day",
           "other": "%{count} days"
         },
         "x_minutes": {
-          "one": "1 minute",
+          "one": "%{count} minute",
           "other": "%{count} minutes"
         },
         "x_months": {
-          "one": "1 month",
+          "one": "%{count} month",
           "other": "%{count} months"
         },
         "x_seconds": {
-          "one": "1 second",
+          "one": "%{count} second",
           "other": "%{count} seconds"
         },
         "x_years": {
-          "one": "1 year",
+          "one": "%{count} year",
           "other": "%{count} years"
         }
       },
@@ -148,6 +148,22 @@
           "warning": "Warning"
         }
       },
+      "annotations": {
+        "options": {
+          "add_annotation": "Add a comment to this line",
+          "add_annotation_for_selection": "Add a comment",
+          "add_global_annotation": "Add global comment",
+          "add_global_question": "Ask a question about your code",
+          "add_question": "Ask a question about this line",
+          "add_question_for_selection": "Ask a question"
+        },
+        "toggles": {
+          "hide_all": "Hide all annotations",
+          "show_all": "Show all annotations",
+          "show_errors": "Only show errors",
+          "title": "Annotations"
+        }
+      },
       "attempts": "attempts",
       "code": {
         "copy-to-clipboard": "Copy code to clipboard"
@@ -412,9 +428,10 @@
           "saved_annotation_title": "Save comment for reuse"
         },
         "help": "Press Shift + Enter to send. <a href=\"https://docs.dodona.be/en/references/exercise-description/#markdown\" target=\"_blank\">Markdown</a> is supported.",
-        "help_student": "Follow our guide in <a href='https://docs.dodona.be/en/guides/students/exercises/#interpreteren-van-feedback'>the documentation</a> to learn how you can ask questions in Dodona and more!",
+        "help_student": "<a href='https://docs.dodona.be/nl/guides/students/exercises/#vragen-stellen'>Our guide</a> provides more information about asking questions.",
         "meta": "%{user} · %{time}",
         "not_released": "This comment is not yet visible for students",
+        "reply": "Reply",
         "save": "Save comment",
         "send": "Comment",
         "update": "Update"
@@ -426,8 +443,13 @@
         "edit": "Edit question",
         "has_newer_submission": "There was a newer submission since this question. Click here to go to the latest submission.",
         "in_progress": "Mark question as in progress",
+        "is_answered": "This question is answered.",
+        "is_in_progress": "This question is currently being answered.",
+        "is_unanswered": "This question is unanswered.",
         "meta_else": "%{user} · %{time} · %{state} by %{last}",
         "meta_unanswered": "%{user} · %{time} · %{state}",
+        "or": "or",
+        "reply": "Reply",
         "resolve": "Mark as answered",
         "send": "Ask question",
         "unresolve": "Re-open question",
@@ -583,23 +605,23 @@
           "other": "meer dan %{count} jaar"
         },
         "x_days": {
-          "one": "1 dag",
+          "one": "%{count} dag",
           "other": "%{count} dagen"
         },
         "x_minutes": {
-          "one": "1 minuut",
+          "one": "%{count} minuut",
           "other": "%{count} minuten"
         },
         "x_months": {
-          "one": "1 maand",
+          "one": "%{count} maand",
           "other": "%{count} maanden"
         },
         "x_seconds": {
-          "one": "1 seconde",
+          "one": "%{count} seconde",
           "other": "%{count} seconden"
         },
         "x_years": {
-          "one": "1 jaar",
+          "one": "%{count} jaar",
           "other": "%{count} jaar"
         }
       },
@@ -636,6 +658,22 @@
           "warning": "Waarschuwing"
         }
       },
+      "annotations": {
+        "options": {
+          "add_annotation": "Voeg een opmerking toe aan deze regel",
+          "add_annotation_for_selection": "Voeg een opmerking toe",
+          "add_global_annotation": "Globale opmerking toevoegen",
+          "add_global_question": "Stel een vraag over je code",
+          "add_question": "Stel een vraag over deze regel",
+          "add_question_for_selection": "Stel een vraag"
+        },
+        "toggles": {
+          "hide_all": "Verberg alle annotaties",
+          "show_all": "Toon alle annotaties",
+          "show_errors": "Enkel errors en opmerkingen tonen",
+          "title": "Annotaties"
+        }
+      },
       "attempts": "pogingen",
       "code": {
         "copy-to-clipboard": "Kopieer code naar klembord"
@@ -900,9 +938,10 @@
           "saved_annotation_title": "Sla opmerking op om te hergebruiken"
         },
         "help": "Druk Shift + Enter om te verzenden. <a href=\"https://docs.dodona.be/nl/references/exercise-description/#markdown\" target=\"_blank\">Markdown</a> wordt ondersteund.",
-        "help_student": "Volg onze handleiding in <a href='https://docs.dodona.be/nl/guides/students/exercises/#interpreteren-van-feedback'>de documentatie</a> om te weten te komen hoe je vragen kunt stellen in Dodona en meer!",
+        "help_student": "<a href='https://docs.dodona.be/nl/guides/students/exercises/#vragen-stellen'>Onze handleiding</a> bevat meer informatie over het stellen van vragen.",
         "meta": "%{user} · %{time}",
         "not_released": "Deze opmerking is nog niet zichtbaar voor studenten",
+        "reply": "Reageer",
         "save": "Opmerking opslaan",
         "send": "Toevoegen",
         "update": "Updaten"
@@ -914,8 +953,13 @@
         "edit": "Vraag aanpassen",
         "has_newer_submission": "Er is een nieuwe oplosssing ingediend sinds deze vraag. Klik hier om naar de nieuwste oplossing te gaan.",
         "in_progress": "In behandeling markeren",
+        "is_answered": "Deze vraag is beantwoord.",
+        "is_in_progress": "Deze vraag wordt momenteel beantwoord.",
+        "is_unanswered": "Deze vraag is nog niet beantwoord.",
         "meta_else": "%{user} · %{time} · %{state} door %{last}",
         "meta_unanswered": "%{user} · %{time} · %{state}",
+        "or": "of",
+        "reply": "Beantwoorden",
         "resolve": "Als beantwoord markeren",
         "send": "Vraag stellen",
         "unresolve": "Vraag terug openen",
diff --git a/app/assets/javascripts/mark.ts b/app/assets/javascripts/mark.ts
new file mode 100644
index 0000000000..abaac4cb02
--- /dev/null
+++ b/app/assets/javascripts/mark.ts
@@ -0,0 +1,133 @@
+export type range = { start: number, length: number, data?: unknown }; // data is optional
+type callback = (node: Node, range: range) => void;
+
+/**
+ * Returns an array of text nodes or empty wrapper nodes and their start and end indices in the root node.
+ * @param root The root node to search for text nodes.
+ * @param wrapper The type of wrapper to search for.
+ */
+function getTextNodes(root: Node, wrapper: string): { start: number, end: number, node: Text; }[] {
+    let val = "";
+    const nodes = [];
+    const iterator = document.createNodeIterator(root, NodeFilter.SHOW_ALL, node => {
+        if (node.nodeType === Node.TEXT_NODE) {
+            return NodeFilter.FILTER_ACCEPT;
+        } else if (node.nodeName.toUpperCase() === wrapper.toUpperCase() && node.childNodes.length === 0) {
+            // Accept empty wrapper nodes
+            return NodeFilter.FILTER_ACCEPT;
+        } else {
+            return NodeFilter.FILTER_REJECT;
+        }
+    });
+
+    let node;
+    while (node = iterator.nextNode()) {
+        nodes.push({
+            start: val.length,
+            end: (val += node.textContent).length,
+            node
+        });
+    }
+    return nodes;
+}
+
+/**
+ * Returns the closest wrapper node of the given type that is an ancestor of the given node.
+ * @param node The node to search for a wrapper.
+ * @param wrapper The type of wrapper to search for.
+ */
+function closestWrapper(node: Node, wrapper: string): Node | null {
+    let parent = node;
+    while (parent !== null) {
+        if (parent.nodeName.toUpperCase() === wrapper.toUpperCase()) {
+            return parent;
+        }
+        parent = parent.parentNode;
+    }
+    return null;
+}
+
+/**
+ * Wraps all elements in the given range of the root node in the given wrapper node.
+ * For each part of the range that is already wrapped in the given wrapper node, the callback is called with the existing wrapper node.
+ * For each part of the range that is not wrapped in the given wrapper node, the callback is called for the newly created wrapper node.
+ *
+ * If no text nodes are found in the root node, an empty wrapper node is created and the callback is called for it.
+ *
+ * @param root The root node to search for text nodes.
+ * @param range The range to wrap.
+ * @param wrapper The type of wrapper to create.
+ * @param callback The callback to call for each wrapper node.
+ */
+function wrapRange(root: Node, range: range, wrapper: string, callback: callback): void {
+    const start = range.start;
+    const end = start + range.length;
+    const nodes = getTextNodes(root, wrapper);
+
+    let wrappedLength = 0;
+    for (const node of nodes) {
+        if (node.end > start && node.start <= end && node.node.textContent !== "\n" || (range.length === 0 && node.end === start)) {
+            const closest = closestWrapper(node.node, wrapper);
+            if (closest === null) {
+                const splitStart = Math.max(0, start - node.start);
+                let nodeToWrap = node.node;
+                if (start > node.start) {
+                    nodeToWrap = node.node.splitText(splitStart);
+                }
+
+                if (node.end > end) {
+                    nodeToWrap.splitText(end - node.start - splitStart);
+                }
+                const wrapperNode = document.createElement(wrapper);
+                wrapperNode.textContent = nodeToWrap.textContent;
+                nodeToWrap.parentNode.replaceChild(wrapperNode, nodeToWrap);
+                callback(wrapperNode, range);
+
+                // Avoid needless wrapping of empty text nodes
+                wrappedLength += wrapperNode.textContent.length;
+                if (wrappedLength >= range.length) {
+                    return;
+                }
+            } else {
+                callback(closest, range);
+                // Avoid needless wrapping of empty text nodes
+                wrappedLength += closest.textContent.length;
+                if (wrappedLength >= range.length) {
+                    return;
+                }
+            }
+        }
+    }
+
+    if (nodes.length === 0) {
+        const wrapperNode = document.createElement(wrapper);
+        wrapperNode.textContent = root.textContent;
+        root.appendChild(wrapperNode);
+        callback(wrapperNode, range);
+    }
+}
+
+/**
+ * Wraps all elements in the given ranges of the root node in the given wrapper node.
+ * @param root The root node to search for text nodes.
+ * @param ranges The ranges to wrap.
+ * @param wrapper The type of wrapper to create.
+ * @param callback The callback to call for each wrapper node.
+ */
+function wrapRanges(root: Node, ranges: range[], wrapper: string, callback: callback): void {
+    ranges.forEach(range => wrapRange(root, range, wrapper, callback));
+}
+
+/**
+ * Wraps all elements in the given ranges of the given target string in the given wrapper node.
+ * @param target a html string whose text nodes should be wrapped
+ * @param ranges the ranges of the textcontent to wrap
+ * @param wrapper the type of wrapper to create
+ * @param callback the callback to call for each wrapper node
+ */
+export function wrapRangesInHtml(target: string, ranges: range[], wrapper: string, callback: callback = () => undefined): string {
+    const root = document.createElement("div");
+    root.innerHTML = target;
+    wrapRanges(root, ranges, wrapper, callback);
+    return root.innerHTML;
+}
diff --git a/app/assets/javascripts/pythia_submission.js b/app/assets/javascripts/pythia_submission.js
deleted file mode 100644
index 7036a3fa73..0000000000
--- a/app/assets/javascripts/pythia_submission.js
+++ /dev/null
@@ -1,212 +0,0 @@
-import fscreen from "fscreen";
-import { showInfoModal } from "./modal.js";
-
-function initPythiaSubmissionShow(submissionCode, activityPath) {
-    function init() {
-        initTutorLinks();
-        initFileViewers(activityPath);
-        if ($(".tutormodal").length == 1) {
-            initFullScreen();
-        } else {
-            $(".tutormodal:last").remove();
-        }
-    }
-
-    function initTutorLinks() {
-        // add disabled to tutorlinks that are not valid
-        $(".tutorlink").each(function () {
-            const $group = $(this).parents(".group");
-            if (!($group.data("statements") || $group.data("stdin"))) {
-                $(this).remove();
-            }
-        });
-
-        $(".tutorlink").on("click", function () {
-            const exerciseId = $(".feedback-table").data("exercise_id");
-            const $group = $(this).parents(".group");
-            const stdin = $group.data("stdin").slice(0, -1);
-            const statements = $group.data("statements");
-            const files = { inline: {}, href: {} };
-
-            $group.find(".contains-file").each(function () {
-                const content = $(this).data("files");
-
-                Object.values(content).forEach(value => {
-                    files[value["location"]][value["name"]] = value["content"];
-                });
-            });
-
-            loadTutor(
-                exerciseId,
-                submissionCode,
-                statements,
-                stdin,
-                files["inline"],
-                files["href"]
-            );
-            return false;
-        });
-    }
-
-    function initFileViewers(activityPath) {
-        $("a.file-link").on("click", function () {
-            const fileName = $(this).text();
-            const $tc = $(this).parents(".testcase.contains-file");
-            if ($tc.length === 0) return;
-            const file = $tc.data("files")[fileName];
-            if (file.location === "inline") {
-                showInlineFile(fileName, file.content);
-            } else if (file.location === "href") {
-                showRealFile(fileName, activityPath, file.content);
-            }
-            return false;
-        });
-    }
-
-    function showInlineFile(name, content) {
-        showInfoModal(name, "<div class='code'>" + content + "</div>");
-    }
-
-    function showRealFile(name, activityPath, filePath) {
-        const path = activityPath + "/" + filePath;
-        const random = Math.floor(Math.random() * 10000 + 1);
-        showInfoModal(
-            name +
-            " <a href='" + path +
-            "' title='Download' download><i class='mdi mdi-download'></i></a>",
-            "<div class='code' id='file-" + random + "'>Loading...</div>"
-        );
-        $.get(path, function (data) {
-            let lines = data.split("\n");
-            const maxLines = 99;
-            if (lines.length > maxLines) {
-                lines = lines.slice(0, maxLines);
-                lines.push("...");
-            }
-
-            const table = document.createElement("table");
-            table.className = "external-file";
-            for (let i = 0; i < lines.length; i++) {
-                const tr = document.createElement("tr");
-
-                const number = document.createElement("td");
-                number.className = "line-nr";
-                number.textContent = (i === maxLines) ? "" : i + 1;
-                tr.appendChild(number);
-
-                const line = document.createElement("td");
-                line.className = "line";
-                // textContent is safe, html is not executed
-                line.textContent = lines[i];
-                tr.appendChild(line);
-                table.appendChild(tr);
-            }
-            const fileView = document.getElementById(`file-${random}`);
-            fileView.innerHTML = "";
-            fileView.appendChild(table);
-        });
-    }
-
-    function initFullScreen() {
-        fscreen.addEventListener("fullscreenchange", resizeFullScreen);
-
-        $("#tutor #fullscreen-button").on("click", function () {
-            const elem = $("#tutor").get(0);
-            if (fscreen.fullscreenElement) {
-                $("#tutor .modal-dialog").removeClass("modal-fullscreen");
-                fscreen.exitFullscreen();
-            } else {
-                $("#tutor .modal-dialog").addClass("modal-fullscreen");
-                fscreen.requestFullscreen(elem);
-            }
-        });
-    }
-
-    function resizeFullScreen() {
-        const $tutor = $("#tutor");
-        if (!fscreen.fullscreenElement) {
-            $tutor.removeClass("fullscreen");
-            $("#tutorviz").height($("#tutorviz").data("standardheight"));
-        } else {
-            $("#tutorviz").data("standardheight", $("#tutorviz").height());
-            $tutor.addClass("fullscreen");
-            $("#tutorviz").height("100%");
-        }
-    }
-
-    function loadTutor(exerciseId, studentCode, statements, stdin, inlineFiles, hrefFiles) {
-        const lines = studentCode.split("\n");
-        // find and remove main
-        let i = 0;
-        let remove = false;
-        const sourceArray = [];
-        while (i < lines.length) {
-            if (remove && !lines[i].match(/^\s+.*/g)) {
-                remove = false;
-            }
-            if (lines[i].match(/if\s+__name__\s*==\s*(['"])__main__\s*\1:\s*/g)) {
-                remove = true;
-            }
-            if (!remove) {
-                sourceArray.push(lines[i]);
-            }
-            i += 1;
-        }
-        sourceArray.push(statements);
-
-        const sourceCode = sourceArray.join("\n");
-
-        $.ajax({
-            type: "POST",
-            url: window.dodona.tutorUrl,
-            dataType: "json",
-            data: {
-                exercise_id: exerciseId,
-                code: sourceCode,
-                input: JSON.stringify(stdin.split("\n")),
-                inlineFiles: JSON.stringify(inlineFiles),
-                hrefFiles: JSON.stringify(hrefFiles),
-            },
-            success: function (data) {
-                createTutor(data);
-            },
-            error: function (data) {
-                $(
-                    "<div style=\"display:none\" class=\"alert alert-danger alert-dismissible\"> <button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"alert\"></button>" +
-                    I18n.t("js.tutor-failed") +
-                    "</div>"
-                )
-                    .insertBefore(".feedback-table")
-                    .show("fast");
-            },
-        });
-
-        const createTutor = function (codeTrace) {
-            showInfoModal(
-                "Python Tutor",
-                "<div id=\"tutorcontent\"><div class=\"progress\"><div class=\"progress-bar progress-bar-striped progress-bar-info active\" role=\"progressbar\" style=\"width: 100%\">Loading</div></div></div>",
-                { allowFullscreen: true }
-            );
-            const modal = $("#tutor #info-modal");
-            modal.on("shown.bs.modal", function (e) {
-                $("#tutorcontent").html(
-                    `<iframe id="tutorviz" width="100%" frameBorder="0" src="${window.dodona.sandboxUrl}/tutorviz/tutorviz.html"></iframe>`
-                );
-                $("#tutorviz").on("load", function () {
-                    window.iFrameResize({ checkOrigin: false, onInit: frame => frame.iFrameResizer.sendMessage(codeTrace), scrolling: "omit" }, "#tutorviz");
-                });
-            });
-
-            modal.on("hidden.bs.modal", function () {
-                if (fscreen.fullscreenElement) {
-                    $("#tutor .modal-dialog").removeClass("modal-fullscreen");
-                    fscreen.exitFullscreen();
-                }
-            });
-        };
-    }
-
-    init();
-}
-
-export { initPythiaSubmissionShow };
diff --git a/app/assets/javascripts/pythia_submission.ts b/app/assets/javascripts/pythia_submission.ts
new file mode 100644
index 0000000000..10d4368c46
--- /dev/null
+++ b/app/assets/javascripts/pythia_submission.ts
@@ -0,0 +1,222 @@
+import fscreen from "fscreen";
+import { showInfoModal } from "./modal.js";
+import { fetch } from "./util.js";
+
+function initPythiaSubmissionShow(submissionCode: string, activityPath: string): void {
+    function init(): void {
+        initTutorLinks();
+        initFileViewers(activityPath);
+        if (document.querySelectorAll(".tutormodal").length == 1) {
+            initFullScreen();
+        } else {
+            const tutorModal = Array.from(document.querySelectorAll(".tutormodal")).pop();
+            if (tutorModal) {
+                tutorModal.remove();
+            }
+        }
+    }
+
+    function initTutorLinks(): void {
+        document.querySelectorAll(".tutorlink").forEach(l => {
+            const group = l.closest(".group") as HTMLElement;
+            if (!(group.dataset.statements || group.dataset.stdin)) {
+                l.remove();
+            }
+        });
+
+        document.querySelectorAll(".tutorlink").forEach(l => l.addEventListener("click", e => {
+            const exerciseId = (document.querySelector(".feedback-table") as HTMLElement).dataset.exercise_id;
+            const group = e.currentTarget.closest(".group");
+            const stdin = group.dataset.stdin.slice(0, -1);
+            const statements = group.dataset.statements;
+            const files = { inline: {}, href: {} };
+
+            group.querySelectorAll(".contains-file").forEach(g => {
+                const content = JSON.parse(g.dataset.files);
+
+                Object.values(content).forEach(value => {
+                    files[value["location"]][value["name"]] = value["content"];
+                });
+            });
+
+            loadTutor(
+                exerciseId,
+                submissionCode,
+                statements,
+                stdin,
+                files.inline,
+                files.href
+            );
+        }));
+    }
+
+    function initFileViewers(activityPath: string): void {
+        document.querySelectorAll("a.file-link").forEach(l => l.addEventListener("click", e => {
+            const link = e.currentTarget as HTMLLinkElement;
+            const fileName = link.innerText;
+            const tc = link.closest(".testcase.contains-file") as HTMLDivElement;
+            if (tc === null) {
+                return;
+            }
+            const files = JSON.parse(tc.dataset.files);
+            const file = files[fileName];
+            if (file.location === "inline") {
+                showInlineFile(fileName, file.content);
+            } else if (file.location === "href") {
+                showRealFile(fileName, activityPath, file.content);
+            }
+        }));
+    }
+
+    function showInlineFile(name: string, content: string): void {
+        showInfoModal(name, `<div class='code'>${content}</div>`);
+    }
+
+    function showRealFile(name: string, activityPath: string, filePath: string): void {
+        const path = activityPath + "/" + filePath;
+        const random = Math.floor(Math.random() * 10000 + 1);
+        showInfoModal(
+            `${name} <a href='${path}' title='Download' download><i class='mdi mdi-download'></i></a>`,
+            `<div class='code' id='file-${random}'>Loading...</div>`
+        );
+
+        fetch(path, {
+            method: "GET"
+        }).then(response => {
+            if (response.ok) {
+                response.text().then(data => {
+                    let lines = data.split("\n");
+                    const maxLines = 99;
+                    if (lines.length > maxLines) {
+                        lines = lines.slice(0, maxLines);
+                        lines.push("...");
+                    }
+
+                    const table = document.createElement("table");
+                    table.className = "external-file";
+                    for (let i = 0; i < lines.length; i++) {
+                        const tr = document.createElement("tr");
+
+                        const number = document.createElement("td");
+                        number.className = "line-nr";
+                        number.textContent = (i === maxLines) ? "" : (i + 1).toString();
+                        tr.appendChild(number);
+
+                        const line = document.createElement("td");
+                        line.className = "line";
+                        // textContent is safe, html is not executed
+                        line.textContent = lines[i];
+                        tr.appendChild(line);
+                        table.appendChild(tr);
+                    }
+                    const fileView = document.getElementById(`file-${random}`);
+                    fileView.innerHTML = "";
+                    fileView.appendChild(table);
+                });
+            }
+        });
+    }
+
+    function initFullScreen(): void {
+        fscreen.addEventListener("fullscreenchange", resizeFullScreen);
+
+        document.querySelector("#tutor #fullscreen-button").addEventListener("click", () => {
+            const tutor = document.querySelector("#tutor");
+            if (fscreen.fullscreenElement) {
+                document.querySelector("#tutor .modal-dialog").classList.remove("modal-fullscreen");
+                fscreen.exitFullscreen();
+            } else {
+                document.querySelector("#tutor .modal-dialog").classList.add("modal-fullscreen");
+                fscreen.requestFullscreen(tutor);
+            }
+        });
+    }
+
+    function resizeFullScreen(): void {
+        const tutor = document.querySelector("#tutor");
+        const tutorviz = document.querySelector("#tutorviz") as HTMLElement;
+        if (!fscreen.fullscreenElement) {
+            tutor.classList.remove("fullscreen");
+            tutorviz.style.height = tutorviz.dataset.standardheight;
+        } else {
+            tutorviz.dataset.standardheight = `${tutorviz.clientHeight}px`;
+            tutor.classList.add("fullscreen");
+            tutorviz.style.height = "100%";
+        }
+    }
+
+    function loadTutor(exerciseId: string, studentCode: string, statements: string, stdin: string, inlineFiles: any, hrefFiles: any): void {
+        const lines = studentCode.split("\n");
+        // find and remove main
+        let i = 0;
+        let remove = false;
+        const sourceArray = [];
+        while (i < lines.length) {
+            if (remove && !lines[i].match(/^\s+.*/g)) {
+                remove = false;
+            }
+            if (lines[i].match(/if\s+__name__\s*==\s*(['"])__main__\s*\1:\s*/g)) {
+                remove = true;
+            }
+            if (!remove) {
+                sourceArray.push(lines[i]);
+            }
+            i += 1;
+        }
+        sourceArray.push(statements);
+        const sourceCode = sourceArray.join("\n");
+
+        const formData = new FormData();
+        formData.append("exercise_id", exerciseId);
+        formData.append("code", sourceCode);
+        formData.append("input", JSON.stringify(stdin.split("\n")));
+        formData.append("inlineFiles", JSON.stringify(inlineFiles));
+        formData.append("hrefFiles", JSON.stringify(hrefFiles));
+
+        fetch(window.dodona.tutorUrl, {
+            method: "POST",
+            body: formData,
+        })
+            .then( response => {
+                if (response.ok) {
+                    response.json().then(data => createTutor(data));
+                } else {
+                    const error = document.createElement("div");
+                    error.classList.add("alert", "alert-danger", "alert-dismissible", "show", "tutor-error");
+                    error.innerHTML = `<button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert"></button>${I18n.t("js.tutor-failed")}`;
+                    document.querySelector(".feedback-table").before(error);
+                    window.scrollTo(0, 0); // scroll to top of page to see error
+                }
+            });
+    }
+
+    function createTutor(codeTrace: string): void {
+        showInfoModal(
+            "Python Tutor",
+            `<div id="tutorcontent"><div class="progress"><div class="progress-bar progress-bar-striped progress-bar-info active" role="progressbar" style="width: 100%">Loading</div></div></div>`,
+            { allowFullscreen: true }
+        );
+        const modal = document.querySelector("#tutor #info-modal");
+
+        modal.addEventListener("shown.bs.modal", () => {
+            const content = document.querySelector("#tutorcontent");
+            if (content) {
+                content.innerHTML = `<iframe id="tutorviz" width="100%" frameBorder="0" src="${window.dodona.sandboxUrl}/tutorviz/tutorviz.html"></iframe>`;
+                document.querySelector("#tutorviz").addEventListener("load", () => {
+                    window.iFrameResize({ checkOrigin: false, onInit: frame => frame.iFrameResizer.sendMessage(codeTrace), scrolling: "omit" }, "#tutorviz");
+                });
+            }
+        });
+
+        modal.addEventListener("hidden.bs.modal", () => {
+            if (fscreen.fullscreenElement) {
+                document.querySelector("#tutor .modal-dialog").classList.remove("modal-fullscreen");
+                fscreen.exitFullscreen();
+            }
+        });
+    }
+
+    init();
+}
+
+export { initPythiaSubmissionShow };
diff --git a/app/assets/javascripts/question_table.ts b/app/assets/javascripts/question_table.ts
index dcda921477..cc018208b8 100644
--- a/app/assets/javascripts/question_table.ts
+++ b/app/assets/javascripts/question_table.ts
@@ -22,6 +22,7 @@ function setParam(
 
 export class QuestionTable {
     refreshUrl: string;
+    openDropdowns = 0;
 
     /**
      * Initiate the question table. The table containing the questions should have the html id
@@ -47,6 +48,12 @@ export class QuestionTable {
                 return;
             }
 
+            const dropdownToggle = target.closest<HTMLLinkElement>(".dropdown-toggle");
+            if (dropdownToggle) {
+                e.preventDefault();
+                return;
+            }
+
             const tr = target.closest<HTMLElement>("tr.selection-row");
             if (enableClick && tr) {
                 e.preventDefault();
@@ -54,9 +61,20 @@ export class QuestionTable {
                 return;
             }
         });
+
+        document.getElementById(questionContainerId).addEventListener("show.bs.dropdown", () => {
+            this.openDropdowns++;
+        });
+
+        document.getElementById(questionContainerId).addEventListener("hide.bs.dropdown", () => {
+            this.openDropdowns--;
+        });
     }
 
     refresh(): void {
+        if (this.openDropdowns > 0) {
+            return;
+        }
         fetch(this.getRefreshUrl(), {
             headers: {
                 "accept": "text/javascript",
diff --git a/app/assets/javascripts/saved_annotation_beta.ts b/app/assets/javascripts/saved_annotation_beta.ts
index 0b957db695..2d5a94469c 100644
--- a/app/assets/javascripts/saved_annotation_beta.ts
+++ b/app/assets/javascripts/saved_annotation_beta.ts
@@ -1,7 +1,9 @@
 // REMOVE FILE AND USAGES AFTER CLOSED BETA
 
+import { courseState } from "state/Courses";
+
 const BETA_COURSES = new Set([10, 773, 1151, 1659, 2258, 2263]);
 
-export function isBetaCourse(courseId: number): boolean {
-    return BETA_COURSES.has(courseId);
+export function isBetaCourse(courseId?: number): boolean {
+    return BETA_COURSES.has(courseId || courseState.id );
 }
diff --git a/app/assets/javascripts/search.ts b/app/assets/javascripts/search.ts
index aa49dcb4f9..28e4090d91 100644
--- a/app/assets/javascripts/search.ts
+++ b/app/assets/javascripts/search.ts
@@ -1,62 +1,16 @@
 import { createDelayer, fetch, getURLParameter, updateArrayURLParameter, updateURLParameter } from "util.js";
 import { InactiveTimeout } from "auto_reload";
-import { LoadingBar } from "components/loading_bar";
+import { LoadingBar } from "components/search/loading_bar";
+import { searchQueryState } from "state/SearchQuery";
 const RELOAD_SECONDS = 2;
 
 
-export class QueryParameters<T> {
-    params: Map<string, T> = new Map();
-    listeners_by_key: Map<string, Array<(k: string, o: T, n: T)=>void>> = new Map();
-    listeners: Array<(k: string, o: T, n: T)=>void> = [];
-
-    resetParams(): void {
-        this.params.forEach((v, k) => {
-            if (v !== undefined) {
-                this.updateParam(k, undefined);
-            }
-        });
-    }
-
-    updateParam(key: string, value: T): void {
-        const old: T = this.params.get(key);
-        if (old === value) {
-            return;
-        }
-
-        this.params.set(key, value);
-
-        this.listeners.forEach(f => f(key, old, value));
-        const listeners = this.listeners_by_key.get(key);
-        if (listeners) {
-            listeners.forEach(f => f(key, old, value));
-        }
-    }
-
-    subscribeByKey(key: string, listener: (k: string, o: T, n: T)=>void): void {
-        const listeners = this.listeners_by_key.get(key);
-        if (listeners) {
-            listeners.push(listener);
-        } else {
-            this.listeners_by_key.set(key, [listener]);
-        }
-    }
-
-    subscribe(listener: (k: string, o: T, n: T)=>void): void {
-        this.listeners.push(listener);
-    }
-}
-
-export class SearchQuery {
-    updateAddressBar= true;
+class Search {
     autoSearch= false;
-    baseUrl: string;
     refreshElement: string;
     periodicReload: InactiveTimeout;
     searchIndex = 0;
     appliedIndex = 0;
-    arrayQueryParams: QueryParameters<string[]> = new QueryParameters<string[]>();
-    queryParams: QueryParameters<string> = new QueryParameters<string>();
-    localStorageKey?: string;
     loadingBars: LoadingBar[] = [];
 
     setRefreshElement(refreshElement: string): void {
@@ -70,26 +24,18 @@ export class SearchQuery {
                     this.search();
                 }
             );
-            this.refresh(this.queryParams.params.get("refresh"));
+            this.toggleRefresh();
         } else {
             this.periodicReload = undefined;
         }
     }
 
     setBaseUrl(baseUrl?: string): void {
-        this.updateAddressBar = baseUrl === undefined || baseUrl === "";
-        const _url = baseUrl || window.location.href;
-        const url = new URL(_url.replace(/%5B%5D/g, "[]"), window.location.origin);
-        this.baseUrl = url.href;
-
-        // initialise present parameters
-        this.initialiseParams(url.searchParams);
+        searchQueryState.baseUrl = baseUrl;
     }
 
     setLocalStorageKey(localStorageKey: string): void {
-        this.localStorageKey = localStorageKey;
-        // apply parameters from local storage
-        this.useLocalStorage();
+        searchQueryState.localStorageKey = localStorageKey;
     }
 
     initPagination(): void {
@@ -97,46 +43,20 @@ export class SearchQuery {
         remotePaginationButtons.forEach(button => button.addEventListener("click", () => {
             const href = button.getAttribute("href");
             const page = getURLParameter("page", href);
-            this.queryParams.updateParam("page", page);
+            searchQueryState.queryParams.set("page", page);
         }));
     }
 
-    constructor(baseUrl?: string, refreshElement?: string) {
-        this.setBaseUrl(baseUrl);
-
+    constructor() {
         // subscribe relevant listeners
-        this.arrayQueryParams.subscribe(k => this.paramChange(k));
-        this.queryParams.subscribe(k => this.paramChange(k));
-        this.queryParams.subscribeByKey("refresh", (k, o, n) => this.refresh(n));
-
-        window.onpopstate = e => {
-            if (this.updateAddressBar && e.state === "set_by_search") {
-                this.resetAllQueryParams();
-                this.setBaseUrl();
-            }
-        };
-
-        window.history.replaceState("set_by_search", "Dodona");
-
-        this.setRefreshElement(refreshElement);
-    }
-
-    addParametersToUrl(baseUrl?: string): string {
-        let url: string = baseUrl || this.baseUrl;
-        this.queryParams.params.forEach((v, k) => url = updateURLParameter(url, k, v));
-        this.arrayQueryParams.params.forEach((v, k) => url = updateArrayURLParameter(url, k, v));
-
-        return url;
+        searchQueryState.arrayQueryParams.subscribe((s, k) => this.paramChange(k));
+        searchQueryState.queryParams.subscribe((s, k) => this.paramChange(k));
+        searchQueryState.queryParams.subscribe( () => this.toggleRefresh(), "refresh");
     }
 
-    resetAllQueryParams(): void {
-        this.queryParams.resetParams();
-        this.arrayQueryParams.resetParams();
-    }
-
-    refresh(value: string): void {
+    private toggleRefresh(): void {
         if (this.periodicReload) {
-            if (value === "true") {
+            if (searchQueryState.queryParams.get("refresh") === "true") {
                 this.periodicReload.start();
             } else {
                 this.periodicReload.end();
@@ -145,10 +65,10 @@ export class SearchQuery {
     }
 
     updateHistory(push: boolean): void {
-        if (!this.updateAddressBar) {
+        if (!searchQueryState.updateAddressBar) {
             return;
         }
-        const url = this.addParametersToUrl();
+        const url = searchQueryState.addParametersToUrl();
         if (url === window.location.href) {
             return;
         }
@@ -161,13 +81,13 @@ export class SearchQuery {
 
     paramChangeDelayer = createDelayer();
     changedParams = [];
-    paramChange(key: string): void {
+    paramChange(key?: string): void {
         this.changedParams.push(key);
         this.paramChangeDelayer(() => {
-            if (this.queryParams.params.get("page") !== undefined && this.queryParams.params.get("page") !== "1" && this.changedParams.every(k => k !== "page")) {
+            if (searchQueryState.queryParams.get("page") !== undefined && searchQueryState.queryParams.get("page") !== "1" && this.changedParams.every(k => k !== "page")) {
                 // if we were not on the first page and we changed something else than the page, we should go back to the first page
                 this.changedParams = [];
-                this.queryParams.updateParam("page", "1");
+                searchQueryState.queryParams.set("page", "1");
                 return;
             }
             this.updateHistory(this.changedParams.some(k => k === "page"));
@@ -179,7 +99,7 @@ export class SearchQuery {
     }
 
     search(): void {
-        const url = this.addParametersToUrl();
+        const url = searchQueryState.addParametersToUrl();
         const localIndex = ++this.searchIndex;
 
         this.loadingBars.forEach(bar => bar.show());
@@ -198,60 +118,12 @@ export class SearchQuery {
                 this.loadingBars.forEach(bar => bar.hide());
 
                 // if there is local storage key => update the value to reuse later
-                if (this.localStorageKey) {
+                if (searchQueryState.localStorageKey) {
                     const urlObj = new URL(url);
-                    localStorage.setItem(this.localStorageKey, urlObj.searchParams.toString());
+                    localStorage.setItem(searchQueryState.localStorageKey, urlObj.searchParams.toString());
                 }
             });
     }
-
-    /**
-     * fetch params from localStorage using the localStorageKey if present and apply them to the current url
-     */
-    useLocalStorage() : void {
-        if (this.localStorageKey) {
-            const searchParamsStringFromStorage = localStorage.getItem(this.localStorageKey);
-            if (searchParamsStringFromStorage) {
-                const searchParamsFromStorage = new URLSearchParams(searchParamsStringFromStorage);
-                this.initialiseParams(searchParamsFromStorage);
-            }
-        }
-    }
-
-    /**
-     * @param {URLSearchParams} searchParams the obj whose params we want to use
-     *
-     * apply the param values from the URLSearchParams obj to the current queryParams and arrayQueryParams
-     */
-    initialiseParams(searchParams: URLSearchParams) : void {
-        for (const key of searchParams.keys()) {
-            if (this.isArrayQueryParamsKey(key)) {
-                this.arrayQueryParams.updateParam(this.extractArrayQueryParamsKey(key), searchParams.getAll(key));
-            } else {
-                this.queryParams.updateParam(key, searchParams.get(key));
-            }
-        }
-    }
-
-    /**
-     *
-     * @param {string} key the key value stored in the url
-     * @private
-     * @return {boolean} true if the key ends with [] otherwise false
-     */
-    private isArrayQueryParamsKey(key: string): boolean {
-        return key.endsWith("[]");
-    }
-
-    /**
-     *
-     * @param {string} key the key value stored in the url
-     * @private
-     * @return {string} the key without the [] at the end
-     */
-    private extractArrayQueryParamsKey(key: string): string {
-        return key.substring(0, key.length-2);
-    }
 }
 
-export const searchQuery = new SearchQuery();
+export const search = new Search();
diff --git a/app/assets/javascripts/state/Annotations.ts b/app/assets/javascripts/state/Annotations.ts
new file mode 100644
index 0000000000..98665d8206
--- /dev/null
+++ b/app/assets/javascripts/state/Annotations.ts
@@ -0,0 +1,61 @@
+import { MachineAnnotationData } from "state/MachineAnnotations";
+import { AnnotationType, UserAnnotationData } from "state/UserAnnotations";
+import { State } from "state/state_system/State";
+import { stateProperty } from "state/state_system/StateProperty";
+
+export type AnnotationVisibilityOptions = "all" | "important" | "none";
+export type AnnotationData = MachineAnnotationData | UserAnnotationData;
+
+const annotationOrder: Record<AnnotationType, number> = {
+    annotation: 0,
+    question: 1,
+    error: 2,
+    warning: 3,
+    info: 4,
+};
+
+export function compareAnnotationOrders(a: AnnotationData, b: AnnotationData): number {
+    return annotationOrder[a.type] - annotationOrder[b.type];
+}
+
+export function isUserAnnotation(annotation: AnnotationData): annotation is UserAnnotationData {
+    return annotation.type === "annotation" || annotation.type === "question";
+}
+
+class AnnotationState extends State {
+    @stateProperty visibility: AnnotationVisibilityOptions = "all";
+    @stateProperty isQuestionMode = false;
+    @stateProperty hoveredAnnotation: AnnotationData | null = null;
+
+    isHovered = (annotation: AnnotationData): boolean => {
+        return this.hoveredAnnotation === annotation || (
+            this.hoveredAnnotation !== null &&
+            annotation !== null &&
+            annotation !== undefined && ((
+                isUserAnnotation(annotation) &&
+                isUserAnnotation(this.hoveredAnnotation) &&
+                annotation.id === this.hoveredAnnotation.id
+            ) || (
+                !isUserAnnotation(annotation) &&
+                !isUserAnnotation(this.hoveredAnnotation) &&
+                annotation.row === this.hoveredAnnotation.row &&
+                annotation.column === this.hoveredAnnotation.column &&
+                annotation.type === this.hoveredAnnotation.type &&
+                annotation.text === this.hoveredAnnotation.text
+            )));
+    };
+
+    isVisible(annotation: AnnotationData): boolean {
+        if (this.visibility === "none") {
+            return false;
+        }
+
+        if (this.visibility === "important") {
+            return annotation.type === "error" || annotation.type === "annotation" || annotation.type === "question";
+        }
+
+        return true;
+    }
+}
+
+export const annotationState = new AnnotationState();
diff --git a/app/assets/javascripts/state/Courses.ts b/app/assets/javascripts/state/Courses.ts
new file mode 100644
index 0000000000..ff3e3b62b0
--- /dev/null
+++ b/app/assets/javascripts/state/Courses.ts
@@ -0,0 +1,8 @@
+import { stateProperty } from "state/state_system/StateProperty";
+import { State } from "state/state_system/State";
+
+class CourseState extends State {
+    @stateProperty id: number;
+}
+
+export const courseState = new CourseState();
diff --git a/app/assets/javascripts/state/Evaluations.ts b/app/assets/javascripts/state/Evaluations.ts
new file mode 100644
index 0000000000..047fc2c8fb
--- /dev/null
+++ b/app/assets/javascripts/state/Evaluations.ts
@@ -0,0 +1,8 @@
+import { stateProperty } from "state/state_system/StateProperty";
+import { State } from "state/state_system/State";
+
+class EvaluationState extends State {
+    @stateProperty public id: number;
+}
+
+export const evaluationState = new EvaluationState();
diff --git a/app/assets/javascripts/state/Exercises.ts b/app/assets/javascripts/state/Exercises.ts
new file mode 100644
index 0000000000..c6c323e6e1
--- /dev/null
+++ b/app/assets/javascripts/state/Exercises.ts
@@ -0,0 +1,9 @@
+import { stateProperty } from "state/state_system/StateProperty";
+import { State } from "state/state_system/State";
+
+class ExerciseState extends State {
+    @stateProperty public id: number;
+}
+
+export const exerciseState = new ExerciseState();
+
diff --git a/app/assets/javascripts/state/MachineAnnotations.ts b/app/assets/javascripts/state/MachineAnnotations.ts
new file mode 100644
index 0000000000..f247716a75
--- /dev/null
+++ b/app/assets/javascripts/state/MachineAnnotations.ts
@@ -0,0 +1,45 @@
+import { AnnotationType } from "state/UserAnnotations";
+import { State } from "state/state_system/State";
+import { stateProperty } from "state/state_system/StateProperty";
+import { StateMap } from "state/state_system/StateMap";
+
+export interface MachineAnnotationData {
+    type: AnnotationType;
+    text: string;
+    row: number;
+    externalUrl?: string | null;
+    rows?: number;
+    column?: number;
+    columns?: number;
+}
+
+class MachineAnnotationState extends State {
+    @stateProperty public byLine = new StateMap<number, MachineAnnotationData[]>();
+    @stateProperty public byMarkedLine = new StateMap<number, MachineAnnotationData[]>();
+    @stateProperty public count = 0;
+
+    public setMachineAnnotations(annotations: MachineAnnotationData[]): void {
+        this.count = annotations.length;
+        this.byLine.clear();
+        this.byMarkedLine.clear();
+        for (const annotation of annotations) {
+            const markedLength = annotation.rows ?? 1;
+            const line = annotation.row ? annotation.row + markedLength : 0;
+            if (this.byLine.has(line)) {
+                this.byLine.get(line)?.push(annotation);
+            } else {
+                this.byLine.set(line, [annotation]);
+            }
+            for (let i = 1; i <= markedLength; i++) {
+                const markedLine = annotation.row + i;
+                if (this.byMarkedLine.has(markedLine)) {
+                    this.byMarkedLine.get(markedLine)?.push(annotation);
+                } else {
+                    this.byMarkedLine.set(markedLine, [annotation]);
+                }
+            }
+        }
+    }
+}
+
+export const machineAnnotationState = new MachineAnnotationState();
diff --git a/app/assets/javascripts/state/PubSub.ts b/app/assets/javascripts/state/PubSub.ts
deleted file mode 100644
index 544f361c9f..0000000000
--- a/app/assets/javascripts/state/PubSub.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-/**
- * heavily based on https://github.com/hankchizljaw/vanilla-js-state-management/blob/master/src/js/lib/pubsub.js
- * MIT License
- *
- * Copyright (c) 2018 Andy Bell
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- *
- * This class is a generic implementation of the publisher subscriber scheme.
- * It allows subscribing to and publishing string based events.
- */
-export class PubSub {
-    events: Map<string, Array<(...params: Array<any>) => any>>;
-
-    constructor() {
-        this.events = new Map<string, Array<(...params: Array<any>) => any>>();
-    }
-
-    /**
-     * Either create a new event instance for passed `event` name
-     * or push a new callback into the existing collection
-     *
-     * @param {string} event
-     * @param {function} callback
-     * @memberof PubSub
-     */
-    subscribe(event: string, callback: (...params: Array<any>) => any): void {
-        // If there's not already an event with this name set in our collection
-        // go ahead and create a new one and set it with an empty array, so we don't
-        // have to type check it later down-the-line
-        if (!this.events.has(event)) {
-            this.events.set(event, []);
-        }
-
-        // We know we've got an array for this event, so push our callback in there with no fuss
-        this.events.get(event).push(callback);
-    }
-
-    /**
-     * If the passed event has callbacks attached to it, loop through each one
-     * and call it
-     *
-     * @param {string} event
-     * @param {array} params - function params
-     * @memberof PubSub
-     */
-    publish(event: string, ...params: Array<any>): void {
-        // There's no event to publish to, so bail out
-        if (!this.events.has(event)) {
-            return;
-        }
-
-        // Get each subscription and call its callback with the passed data
-        this.events.get(event).map(callback => callback(...params));
-    }
-}
-
-/**
- * A static instance of PubSub to be used as the general subscription/publishing system throughout the application
- */
-export const events = new PubSub();
diff --git a/app/assets/javascripts/state/SavedAnnotations.ts b/app/assets/javascripts/state/SavedAnnotations.ts
index 2324b6f1db..8e7575a48f 100644
--- a/app/assets/javascripts/state/SavedAnnotations.ts
+++ b/app/assets/javascripts/state/SavedAnnotations.ts
@@ -1,15 +1,9 @@
-import { events } from "state/PubSub";
 import { updateArrayURLParameter, updateURLParameter, fetch, createDelayer } from "util.js";
 import { MapWithDefault } from "map_with_default";
-
-/**
- * This file contains all state management functions for saved annotations
- * It uses the PubSub system to make saved annotations responsive to changes
- * anyone subscribed to 'getSavedAnnotations' or `getSavedAnnotation${id}` should be notified if relevant changes happen
- *
- * This file is written in a way that should be applicable to all restfull resources for which we want to manage state in the frontend
- * It should probably be abstracted and or generalized instead of duplicated when another resource requires similar behaviour.
- */
+import { userAnnotationState } from "state/UserAnnotations";
+import { State } from "state/state_system/State";
+import { stateProperty } from "state/state_system/StateProperty";
+import { StateMap } from "state/state_system/StateMap";
 
 export type SavedAnnotation = {
     annotations_count?: number;
@@ -23,10 +17,6 @@ export type SavedAnnotation = {
 export type Pagination = { total_pages: number, current_page: number };
 const URL = "/saved_annotations";
 
-const savedAnnotationsByURL = new Map<string, SavedAnnotation[]>();
-const savedAnnotationsPaginationByURL = new Map<string, Pagination>();
-const savedAnnotationsById = new Map<number, SavedAnnotation>();
-
 type Delayer = (f: () => void, ms: number) => void;
 const delayerByURL = new MapWithDefault<string, Delayer>(createDelayer);
 const delayerByID = new MapWithDefault<number, Delayer>(createDelayer);
@@ -38,105 +28,107 @@ function addParametersToUrl(url: string, params?: Map<string, string>, arrayPara
     return result;
 }
 
-export async function fetchSavedAnnotations(params?: Map<string, string>, arrayParams?: Map<string, string[]>): Promise<Array<SavedAnnotation>> {
-    const url = addParametersToUrl(`${URL}.json`, params, arrayParams);
-    const response = await fetch(url);
-    savedAnnotationsByURL.set(url, await response.json());
-    savedAnnotationsPaginationByURL.set(url, JSON.parse(response.headers.get("X-Pagination")));
-    events.publish("getSavedAnnotations");
-    events.publish("getSavedAnnotationsPagination");
-    return savedAnnotationsByURL.get(url);
-}
-
-export async function fetchSavedAnnotation(id: number): Promise<SavedAnnotation> {
-    const url = `${URL}/${id}.json`;
-    const response = await fetch(url);
-    savedAnnotationsById.set(id, await response.json());
-    events.publish(`getSavedAnnotation${id}`);
-    return savedAnnotationsById.get(id);
-}
+class SavedAnnotationState extends State {
+    @stateProperty private listByURL = new StateMap<string, SavedAnnotation[]>();
+    @stateProperty private paginationByURL = new StateMap<string, Pagination>();
+    @stateProperty private byId = new StateMap<number, SavedAnnotation>();
 
-export async function createSavedAnnotation(data: { from: number, saved_annotation: { title: string, annotation_text: string } }): Promise<number> {
-    const url = `${URL}.json`;
-    const response = await fetch(url, {
-        method: "post",
-        body: JSON.stringify(data),
-        headers: { "Content-type": "application/json" },
-    });
-    if (response.status === 422) {
-        const errors = await response.json();
-        throw errors;
+    private async fetchList(url: string): Promise<Array<SavedAnnotation>> {
+        const response = await fetch(url);
+        this.listByURL.set(url, await response.json());
+        this.paginationByURL.set(url, JSON.parse(response.headers.get("X-Pagination")));
+        return this.listByURL.get(url);
     }
-    const savedAnnotation: SavedAnnotation = await response.json();
-    invalidateSavedAnnotation(savedAnnotation.id, savedAnnotation);
-    return savedAnnotation.id;
-}
 
-export async function updateSavedAnnotation(id: number, data: { saved_annotation: SavedAnnotation }): Promise<void> {
-    const url = `${URL}/${id}`;
-    const response = await fetch(url, {
-        method: "put",
-        body: JSON.stringify(data),
-        headers: { "Content-type": "application/json" },
-    });
-    if (response.status === 422) {
-        const errors = await response.json();
-        throw errors;
+    private async fetch(id: number): Promise<SavedAnnotation> {
+        const url = `${URL}/${id}.json`;
+        const response = await fetch(url);
+        this.byId.set(id, await response.json());
+        return this.byId.get(id);
     }
-    const savedAnnotation: SavedAnnotation = await response.json();
-    invalidateSavedAnnotation(savedAnnotation.id, savedAnnotation);
-}
-
-export async function deleteSavedAnnotation(id: number): Promise<void> {
-    const url = `${URL}/${id}`;
-    await fetch(url, {
-        method: "delete",
-    });
-    invalidateSavedAnnotation(id);
-}
 
-export function getSavedAnnotations(params?: Map<string, string>, arrayParams?: Map<string, string[]>): Array<SavedAnnotation> {
-    const url = addParametersToUrl(`${URL}.json`, params, arrayParams);
-    delayerByURL.get(url)(() => {
-        if (!savedAnnotationsByURL.has(url)) {
-            fetchSavedAnnotations(params, arrayParams);
+    async create(data: { from: number, saved_annotation: { title: string, annotation_text: string } }): Promise<number> {
+        const url = `${URL}.json`;
+        const response = await fetch(url, {
+            method: "post",
+            body: JSON.stringify(data),
+            headers: { "Content-type": "application/json" },
+        });
+        if (response.status === 422) {
+            const errors = await response.json();
+            throw errors;
         }
-    }, 200);
-    return savedAnnotationsByURL.get(url) || [];
-}
+        const savedAnnotation: SavedAnnotation = await response.json();
+        this.invalidate(savedAnnotation.id, savedAnnotation);
+        userAnnotationState.invalidate(data.from);
+        return savedAnnotation.id;
+    }
 
-export function getSavedAnnotationsPagination(params?: Map<string, string>, arrayParams?: Map<string, string[]>): Pagination {
-    const url = addParametersToUrl(`${URL}.json`, params, arrayParams);
-    delayerByURL.get(url)(() => {
-        if (!savedAnnotationsPaginationByURL.has(url)) {
-            fetchSavedAnnotations(params, arrayParams);
+    async update(id: number, data: { saved_annotation: SavedAnnotation }): Promise<void> {
+        const url = `${URL}/${id}`;
+        const response = await fetch(url, {
+            method: "put",
+            body: JSON.stringify(data),
+            headers: { "Content-type": "application/json" },
+        });
+        if (response.status === 422) {
+            const errors = await response.json();
+            throw errors;
         }
-    }, 200);
-    return savedAnnotationsPaginationByURL.get(url);
-}
+        const savedAnnotation: SavedAnnotation = await response.json();
+        this.invalidate(savedAnnotation.id, savedAnnotation);
+    }
 
-export function getSavedAnnotation(id: number): SavedAnnotation {
-    delayerByID.get(id)(() => {
-        if (!savedAnnotationsById.has(id)) {
-            fetchSavedAnnotation(id);
-        }
-    }, 200);
-    return savedAnnotationsById.get(id);
-}
+    async delete(id: number): Promise<void> {
+        const url = `${URL}/${id}`;
+        await fetch(url, {
+            method: "delete",
+        });
+        this.invalidate(id);
+    }
+
+    getList(params?: Map<string, string>, arrayParams?: Map<string, string[]>): Array<SavedAnnotation> {
+        const url = addParametersToUrl(`${URL}.json`, params, arrayParams);
+        delayerByURL.get(url)(() => {
+            if (!this.listByURL.has(url)) {
+                this.fetchList(url);
+            }
+        }, 200);
+        return this.listByURL.get(url) || [];
+    }
 
-export function invalidateSavedAnnotation(id: number, replacement?: SavedAnnotation): void {
-    if (!id) {
-        return;
+    getPagination(params?: Map<string, string>, arrayParams?: Map<string, string[]>): Pagination {
+        const url = addParametersToUrl(`${URL}.json`, params, arrayParams);
+        delayerByURL.get(url)(() => {
+            if (!this.paginationByURL.has(url)) {
+                this.fetchList(url);
+            }
+        }, 200);
+        return this.paginationByURL.get(url);
     }
-    savedAnnotationsByURL.clear();
-    savedAnnotationsPaginationByURL.clear();
-    events.publish("getSavedAnnotations");
 
-    if (replacement) {
-        savedAnnotationsById.set(id, replacement);
-    } else {
-        savedAnnotationsById.delete(id);
+    get(id: number): SavedAnnotation {
+        delayerByID.get(id)(() => {
+            if (!this.byId.has(id)) {
+                this.fetch(id);
+            }
+        }, 200);
+        return this.byId.get(id);
+    }
+
+    invalidate(id: number, replacement?: SavedAnnotation): void {
+        if (!id) {
+            return;
+        }
+        this.listByURL.clear();
+        this.paginationByURL.clear();
+
+        if (replacement) {
+            this.byId.set(id, replacement);
+        } else {
+            this.byId.delete(id);
+        }
     }
-    events.publish(`getSavedAnnotation${id}`, id);
 }
 
+export const savedAnnotationState = new SavedAnnotationState();
diff --git a/app/assets/javascripts/state/SearchQuery.ts b/app/assets/javascripts/state/SearchQuery.ts
index 05ca676f81..f997b3775e 100644
--- a/app/assets/javascripts/state/SearchQuery.ts
+++ b/app/assets/javascripts/state/SearchQuery.ts
@@ -1,40 +1,104 @@
-import { searchQuery } from "search";
-import { events } from "state/PubSub";
+import { State } from "state/state_system/State";
+import { StateMap } from "state/state_system/StateMap";
+import { updateArrayURLParameter, updateURLParameter } from "util.js";
 
-/**
- * This file wraps the searchQuery publication subscription system in the more general state events system
- */
+class SearchQueryState extends State {
+    readonly arrayQueryParams: StateMap<string, string[]> = new StateMap();
+    readonly queryParams: StateMap<string, string> = new StateMap();
 
-const initialisedEvents = new Set<string>();
+    updateAddressBar = true;
+    private _baseUrl: string;
+    get baseUrl(): string {
+        return this._baseUrl;
+    }
+
+    set baseUrl(value: string) {
+        this.updateAddressBar = value === undefined || value === "";
+        const _url = value || window.location.href;
+        const url = new URL(_url.replace(/%5B%5D/g, "[]"), window.location.origin);
+        this._baseUrl = url.href;
 
-export function getQueryParams(): Map<string, string> {
-    if (!initialisedEvents.has("getQueryParams")) {
-        searchQuery.queryParams.subscribe(() => events.publish("getQueryParams"));
-        initialisedEvents.add("getQueryParams");
+        // initialise present parameters
+        this.initialiseParams(url.searchParams);
     }
-    return new Map(searchQuery.queryParams.params);
-}
 
-export function getArrayQueryParams(): Map<string, string[]> {
-    if (!initialisedEvents.has("getArrayQueryParams")) {
-        searchQuery.arrayQueryParams.subscribe(() => events.publish("getArrayQueryParams"));
-        initialisedEvents.add("getArrayQueryParams");
+
+    private _localStorageKey: string;
+    /**
+     * fetch params from localStorage using the localStorageKey
+     */
+    set localStorageKey(value: string) {
+        this._localStorageKey = value;
+        if (value) {
+            const searchParamsStringFromStorage = localStorage.getItem(value);
+            if (searchParamsStringFromStorage) {
+                const searchParamsFromStorage = new URLSearchParams(searchParamsStringFromStorage);
+                this.initialiseParams(searchParamsFromStorage);
+            }
+        }
     }
-    return new Map(searchQuery.arrayQueryParams.params);
-}
 
-export function getQueryParam(key: string): string {
-    if (!initialisedEvents.has(`getQueryParam${key}`)) {
-        searchQuery.queryParams.subscribeByKey(key, () => events.publish(`getQueryParam${key}`));
-        initialisedEvents.add(`getQueryParam${key}`);
+    get localStorageKey(): string {
+        return this._localStorageKey;
     }
-    return searchQuery.queryParams.params.get(key);
-}
 
-export function getArrayQueryParam(key: string): string[] {
-    if (!initialisedEvents.has(`getArrayQueryParam${key}`)) {
-        searchQuery.arrayQueryParams.subscribeByKey(key, () => events.publish(`getArrayQueryParam${key}`));
-        initialisedEvents.add(`getArrayQueryParam${key}`);
+    constructor() {
+        super();
+        this.baseUrl = undefined;
+
+        window.onpopstate = e => {
+            if (this.updateAddressBar && e.state === "set_by_search") {
+                this.arrayQueryParams.clear();
+                this.queryParams.clear();
+                this.baseUrl = undefined;
+            }
+        };
+
+        window.history.replaceState("set_by_search", "Dodona");
+    }
+
+    addParametersToUrl(baseUrl?: string): string {
+        let url: string = baseUrl || this.baseUrl;
+        this.queryParams.forEach((v, k) => url = updateURLParameter(url, k, v));
+        this.arrayQueryParams.forEach((v, k) => url = updateArrayURLParameter(url, k, v));
+
+        return url;
+    }
+
+    /**
+     * @param {URLSearchParams} searchParams the obj whose params we want to use
+     *
+     * apply the param values from the URLSearchParams obj to the current queryParams and arrayQueryParams
+     */
+    private initialiseParams(searchParams: URLSearchParams) : void {
+        for (const key of searchParams.keys()) {
+            if (SearchQueryState.isArrayQueryParamsKey(key)) {
+                this.arrayQueryParams.set(SearchQueryState.extractArrayQueryParamsKey(key), searchParams.getAll(key));
+            } else {
+                this.queryParams.set(key, searchParams.get(key));
+            }
+        }
+    }
+
+    /**
+     *
+     * @param {string} key the key value stored in the url
+     * @private
+     * @return {boolean} true if the key ends with [] otherwise false
+     */
+    private static isArrayQueryParamsKey(key: string): boolean {
+        return key.endsWith("[]");
+    }
+
+    /**
+     *
+     * @param {string} key the key value stored in the url
+     * @private
+     * @return {string} the key without the [] at the end
+     */
+    private static extractArrayQueryParamsKey(key: string): string {
+        return key.substring(0, key.length-2);
     }
-    return searchQuery.arrayQueryParams.params.get(key);
 }
+
+export const searchQueryState = new SearchQueryState();
diff --git a/app/assets/javascripts/state/StateMixin.ts b/app/assets/javascripts/state/StateMixin.ts
deleted file mode 100644
index 4e956a539d..0000000000
--- a/app/assets/javascripts/state/StateMixin.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { LitElement } from "lit";
-import { events } from "state/PubSub";
-
-type Constructor = abstract new (...args: any[]) => LitElement;
-
-export function stateMixin<T extends Constructor>(superClass: T): T {
-    /**
-     * This mixin makes a LitElement responsive to global state changes using the PubSub scheme
-     *
-     * @prop {string[]} state should contain a list of state events which should trigger a rerender of the component
-     */
-    abstract class StateMixinClass extends superClass {
-        abstract get state(): string[];
-
-        connectedCallback(): void {
-            super.connectedCallback();
-            this.initReactiveState();
-        }
-
-        private initReactiveState(): void {
-            this.state.forEach(event => events.subscribe(event, () => this.requestUpdate()));
-        }
-    }
-
-    // Cast return type to the superClass type passed in
-    return StateMixinClass as T;
-}
diff --git a/app/assets/javascripts/state/Submissions.ts b/app/assets/javascripts/state/Submissions.ts
new file mode 100644
index 0000000000..8d3e436f26
--- /dev/null
+++ b/app/assets/javascripts/state/Submissions.ts
@@ -0,0 +1,9 @@
+import { State } from "state/state_system/State";
+import { stateProperty } from "state/state_system/StateProperty";
+
+class SubmissionState extends State {
+    @stateProperty id;
+    @stateProperty code;
+}
+
+export const submissionState = new SubmissionState();
diff --git a/app/assets/javascripts/state/UserAnnotations.ts b/app/assets/javascripts/state/UserAnnotations.ts
new file mode 100644
index 0000000000..801b7727be
--- /dev/null
+++ b/app/assets/javascripts/state/UserAnnotations.ts
@@ -0,0 +1,264 @@
+import { fetch } from "util.js";
+import { Notification } from "notification";
+import { savedAnnotationState } from "state/SavedAnnotations";
+import { State } from "state/state_system/State";
+import { StateMap } from "state/state_system/StateMap";
+import { stateProperty } from "state/state_system/StateProperty";
+
+export interface UserAnnotationFormData {
+    annotation_text: string;
+    line_nr?: number | null;
+    evaluation_id?: number | undefined;
+    saved_annotation_id?: number | null;
+    thread_root_id?: number | null;
+    rows?: number;
+    column?: number;
+    columns?: number;
+}
+
+export type QuestionState = "unanswered" | "answered" | "in_progress";
+export type AnnotationType = "error" | "info" | "annotation" | "warning" | "question";
+
+interface UserAnnotationUserData {
+    name: string;
+}
+
+export interface UserAnnotationPermissionData {
+    save?: boolean;
+    transition?: Record<QuestionState, boolean>
+    update?: boolean;
+    destroy?: boolean;
+    can_see_annotator?: boolean
+}
+
+export interface UserAnnotationData {
+    annotation_text: string;
+    created_at: string;
+    id: number;
+    line_nr: number;
+    permission: UserAnnotationPermissionData;
+    released: boolean;
+    rendered_markdown: string;
+    evaluation_id?: number | null;
+    saved_annotation_id?: number | null;
+    url: string;
+    user: UserAnnotationUserData;
+    type: AnnotationType;
+    last_updated_by: UserAnnotationUserData;
+    // REMOVE AFTER CLOSED BETA
+    course_id: number;
+    question_state?: QuestionState;
+    newer_submission_url?: string | null;
+    responses: UserAnnotationData[];
+    thread_root_id?: number | null;
+    row: number;
+    rows: number;
+    column?: number;
+    columns?: number;
+}
+
+export interface SelectedRange {
+    row: number;
+    rows: number;
+    column?: number;
+    columns?: number;
+}
+
+class UserAnnotationState extends State {
+    readonly rootIdsByLine = new StateMap<number, number[]>();
+    readonly rootIdsByMarkedLine = new StateMap<number, number[]>();
+    readonly byId = new StateMap<number, UserAnnotationData>();
+
+    @stateProperty public selectedRange: SelectedRange | null = null;
+    @stateProperty public showForm = false;
+
+    get count(): number {
+        return this.byId.size;
+    }
+
+    public reset(): void {
+        this.byId.clear();
+        this.rootIdsByLine.clear();
+        this.rootIdsByMarkedLine.clear();
+        this.selectedRange = null;
+        this.showForm = false;
+    }
+
+    // public for testing purposes
+    public async addToMap(annotation: UserAnnotationData): Promise<void> {
+        this.byId.set(annotation.id, annotation);
+        if (!annotation.thread_root_id) {
+            const line = annotation.line_nr && annotation.rows ? annotation.line_nr + annotation.rows - 1 : 0;
+            if (this.rootIdsByLine.has(line)) {
+                const annotations = this.rootIdsByLine.get(line);
+                this.rootIdsByLine.set(line, [...annotations, annotation.id]);
+            } else {
+                this.rootIdsByLine.set(line, [annotation.id]);
+            }
+            for (let markedLine = annotation.line_nr ?? 0; markedLine <= line; markedLine++) {
+                if (this.rootIdsByMarkedLine.has(markedLine)) {
+                    const annotations = this.rootIdsByMarkedLine.get(markedLine);
+                    this.rootIdsByMarkedLine.set(markedLine, [...annotations, annotation.id]);
+                } else {
+                    this.rootIdsByMarkedLine.set(markedLine, [annotation.id]);
+                }
+            }
+            annotation.responses.forEach(response => this.addToMap(response));
+        } else {
+            await this.invalidate(annotation.thread_root_id);
+        }
+    }
+
+    private async replaceInMap(annotation: UserAnnotationData): Promise<void> {
+        this.byId.set(annotation.id, annotation);
+        if (annotation.thread_root_id) {
+            await this.invalidate(annotation.thread_root_id);
+        }
+    }
+
+    private async removeFromMap(annotation: UserAnnotationData): Promise<void> {
+        this.byId.delete(annotation.id);
+        if (!annotation.thread_root_id) {
+            const line = annotation.line_nr && annotation.rows ? annotation.line_nr + annotation.rows - 1 : 0;
+            if (this.rootIdsByLine.has(line)) {
+                const annotations = this.rootIdsByLine.get(line);
+                this.rootIdsByLine.set(line, annotations?.filter(id => id !== annotation.id));
+            }
+            for (let markedLine = annotation.line_nr ?? 0; markedLine <= line; markedLine++) {
+                if (this.rootIdsByMarkedLine.has(markedLine)) {
+                    const annotations = this.rootIdsByMarkedLine.get(markedLine);
+                    this.rootIdsByMarkedLine.set(markedLine, annotations?.filter(id => id !== annotation.id));
+                }
+            }
+        } else {
+            await this.invalidate(annotation.thread_root_id);
+        }
+    }
+
+    async fetch(submissionId: number): Promise<void> {
+        const response = await fetch(`/submissions/${submissionId}/annotations.json`);
+        const json = await response.json();
+
+        this.rootIdsByLine.clear();
+        this.byId.clear();
+        for (const annotation of json) {
+            await this.addToMap(annotation);
+        }
+    }
+
+    async invalidate(annotationId: number): Promise<void> {
+        const response = await fetch(`/annotations/${annotationId}.json`);
+        const json = await response.json();
+
+        await this.replaceInMap(json);
+    }
+
+    async create(formData: UserAnnotationFormData, submissionId: number, mode = "annotation", saveAnnotation = false, savedAnnotationTitle: string = undefined): Promise<UserAnnotationData> {
+        const response = await fetch(`/submissions/${submissionId}/annotations.json`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ [mode]: formData })
+        });
+        const data = await response.json();
+
+        if (!response.ok) {
+            throw new Error();
+        }
+
+        if (mode === "question") {
+            Notification.startNotificationRefresh();
+        }
+        if (saveAnnotation) {
+            try {
+                data.saved_annotation_id = await savedAnnotationState.create({
+                    from: data.id,
+                    saved_annotation: {
+                        title: savedAnnotationTitle,
+                        annotation_text: data.annotation_text,
+                    }
+                });
+            } catch (errors) {
+                alert(I18n.t("js.saved_annotation.new.errors", { count: errors.length }) + "\n\n" + errors.join("\n"));
+            }
+        }
+        if (data.saved_annotation_id) {
+            savedAnnotationState.invalidate(data.saved_annotation_id);
+        }
+
+        await this.addToMap(data);
+
+        return data;
+    }
+
+    async delete(annotation: UserAnnotationData): Promise<void> {
+        const response = await fetch(annotation.url, { method: "DELETE" });
+        if (!response.ok) {
+            throw new Error();
+        }
+
+        savedAnnotationState.invalidate(annotation.saved_annotation_id);
+        await this.removeFromMap(annotation);
+    }
+
+    async update(annotation: UserAnnotationData, formData: UserAnnotationFormData): Promise<void> {
+        const response = await fetch(annotation.url, {
+            headers: { "Content-Type": "application/json" },
+            method: "PATCH",
+            body: JSON.stringify({
+                annotation: formData
+            })
+        });
+        const data = await response.json();
+
+        if (!response.ok) {
+            throw new Error();
+        }
+
+        await this.replaceInMap(data);
+        if (formData.saved_annotation_id != annotation.saved_annotation_id) {
+            savedAnnotationState.invalidate(formData.saved_annotation_id);
+            savedAnnotationState.invalidate(annotation.saved_annotation_id);
+        }
+    }
+
+    async transition(annotation: UserAnnotationData, newState: QuestionState): Promise<void> {
+        const response = await fetch(annotation.url, {
+            method: "PATCH",
+            headers: {
+                "Accept": "application/json",
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify({
+                from: annotation.question_state,
+                question: {
+                    question_state: newState
+                }
+            })
+        });
+
+        if (response.ok) {
+            const json = await response.json();
+            await this.replaceInMap(json);
+        } else if (response.status === 404) {
+            // Someone already deleted this question.
+            new dodona.Toast(I18n.t("js.user_question.deleted"));
+            await this.removeFromMap(annotation);
+        } else if (response.status == 403) {
+            // Someone already changed the status of this question.
+            new dodona.Toast(I18n.t("js.user_question.conflict"));
+            // We now need to update the annotation, but we don't have the new data.
+            // Get the annotation from the backend.
+            await this.invalidate(annotation.id);
+        }
+    }
+
+    async transitionAll(annotations: UserAnnotationData[], newState: QuestionState): Promise<void> {
+        for (const annotation of annotations) {
+            // we wait for each transition to finish before starting the next one
+            // this prevents inconsistent questionstates being shown
+            await this.transition(annotation, newState);
+        }
+    }
+}
+
+export const userAnnotationState = new UserAnnotationState();
diff --git a/app/assets/javascripts/state/Users.ts b/app/assets/javascripts/state/Users.ts
new file mode 100644
index 0000000000..7a87026ba9
--- /dev/null
+++ b/app/assets/javascripts/state/Users.ts
@@ -0,0 +1,20 @@
+import { State } from "state/state_system/State";
+import { stateProperty } from "state/state_system/StateProperty";
+
+export type Permission = "annotation.create"
+
+class UserState extends State {
+    @stateProperty id: number;
+    @stateProperty private permissions: Set<Permission> = new Set<Permission>();
+
+    addPermission(permission: Permission): void {
+        // reassigning the set is necessary to trigger a state change
+        this.permissions = new Set<Permission>([...this.permissions, permission]);
+    }
+
+    hasPermission(permission: Permission): boolean {
+        return this.permissions.has(permission);
+    }
+}
+
+export const userState = new UserState();
diff --git a/app/assets/javascripts/state/state_system/State.ts b/app/assets/javascripts/state/state_system/State.ts
new file mode 100644
index 0000000000..fdc589edff
--- /dev/null
+++ b/app/assets/javascripts/state/state_system/State.ts
@@ -0,0 +1,46 @@
+import { StateEvent } from "./StateEvent";
+import { stateRecorder } from "state/state_system/StateRecorder";
+
+/**
+ * Callback function - used as callback subscription to a state change
+ */
+export type Callback = (state: State, key?: string) => void
+
+export type Unsubscribe = () => void;
+
+/**
+ * `State` a class that inherits from `EventTarget`.
+ * It can be subscribed to and will dispatch an event to all subscribers when any of its properties change.
+ * It also records every read of it's properties to the stateRecorder.
+ * All credits to _@lit-app/state_ for the idea to use `EventTarget` to avoid reinventing an event system.
+ *
+ * This code was inspired on the code from the [@lit-app/state State](https://github.com/lit-apps/lit-app/blob/main/packages/state/src/state.ts)
+ */
+export class State extends EventTarget {
+    /**
+     * subscribe to state change event. The callback will be called anytime
+     * a state property change if `nameOrNames` is undefined, or only for matching
+     * property values specified by `nameOrNames`
+     * @param callback the callback function to call
+     * @param nameOrNames
+     * @returns a unsubscribe function.
+     */
+    subscribe(callback: Callback, nameOrNames?: string | Set<string|undefined>): Unsubscribe {
+        const names = nameOrNames instanceof Set ? nameOrNames : new Set([nameOrNames]);
+        const cb: EventListener = (event: StateEvent) => {
+            if (names.has(event.key) || !event.key || names.has(undefined)) {
+                callback(this, event.key);
+            }
+        };
+        this.addEventListener(StateEvent.eventName, cb);
+        return () => this.removeEventListener(StateEvent.eventName, cb);
+    }
+
+    protected recordRead(key?: string): void {
+        stateRecorder.recordRead(this, key);
+    }
+
+    protected dispatchStateEvent(key?: string): void {
+        this.dispatchEvent(new StateEvent(this, key));
+    }
+}
diff --git a/app/assets/javascripts/state/state_system/StateController.ts b/app/assets/javascripts/state/state_system/StateController.ts
new file mode 100644
index 0000000000..7b04ebfdb4
--- /dev/null
+++ b/app/assets/javascripts/state/state_system/StateController.ts
@@ -0,0 +1,57 @@
+import { ReactiveController, ReactiveControllerHost } from "lit";
+import { stateRecorder } from "state/state_system/StateRecorder";
+import { Unsubscribe } from "state/state_system/State";
+
+/**
+ * `StateController` a [ReactiveController](https://lit.dev/docs/composition/controllers/) that
+ *  uses the `stateRecorder` to track all stateProperties that are read during a render cycle.
+ *  It then subscribes to the relevant states to trigger an update of its host every time one
+ *  of those stateProperties changes. Thanks to _@lit-app/state_ for introducing me to controllers
+ *  for this usecase Reactive controllers
+ *
+ * This code is a combination of the code from the [@lit-app/state StateController](https://github.com/lit-apps/lit-app/blob/main/packages/state/src/state-controller.ts)
+ * and the [litState observeState mixin](https://github.com/gitaarik/lit-state/blob/8cd66223612c3b115c0275f58f6cee5e900ee534/lit-state.js#L1)
+ */
+export class StateController implements ReactiveController {
+    unsubscribeList: Unsubscribe[] = [];
+    wasConnected = false;
+    isConnected = false;
+
+    constructor(protected host: ReactiveControllerHost) {
+        this.host.addController(this);
+    }
+
+    hostConnected(): void {
+        this.isConnected = true;
+        if (this.wasConnected) {
+            this.host.requestUpdate();
+            this.wasConnected = false;
+        }
+    }
+    hostDisconnected(): void {
+        this.isConnected = false;
+        this.wasConnected = true;
+        this.clearStateObservers();
+    }
+
+    hostUpdate(): void {
+        stateRecorder.start();
+    }
+
+    hostUpdated(): void {
+        this.clearStateObservers();
+        if (!this.isConnected) {
+            return;
+        }
+        const log = stateRecorder.finish();
+        log.forEach((keys, state) => {
+            const unsubscribe = state.subscribe(() => this.host.requestUpdate(), keys);
+            this.unsubscribeList.push(unsubscribe);
+        });
+    }
+
+    private clearStateObservers(): void {
+        this.unsubscribeList.forEach(unsubscribe => unsubscribe());
+        this.unsubscribeList = [];
+    }
+}
diff --git a/app/assets/javascripts/state/state_system/StateEvent.ts b/app/assets/javascripts/state/state_system/StateEvent.ts
new file mode 100644
index 0000000000..2a4f11de4b
--- /dev/null
+++ b/app/assets/javascripts/state/state_system/StateEvent.ts
@@ -0,0 +1,29 @@
+import { State } from "state/state_system/State";
+
+/**
+ * This event is fired to inform a state has updated one of its value
+ *
+ * This code is copied from the [@lit-app/state StateEvent](https://github.com/lit-apps/lit-app/blob/main/packages/state/src/state-event.ts)
+ */
+export class StateEvent extends Event {
+    static readonly eventName = "lit-state-changed";
+    readonly key: string | undefined;
+    readonly state: State;
+
+    /**
+     * @param  {string} key of the state that has changed
+     * @param  {unknown} value for the changed key
+     * @param  {State} state the state that has changed
+     */
+    constructor(state: State, key?: string ) {
+        super(StateEvent.eventName, { cancelable: false });
+        this.key = key;
+        this.state = state;
+    }
+}
+
+declare global {
+    interface HTMLElementEventMap {
+        [StateEvent.eventName]: StateEvent;
+    }
+}
diff --git a/app/assets/javascripts/state/state_system/StateMap.ts b/app/assets/javascripts/state/state_system/StateMap.ts
new file mode 100644
index 0000000000..e419ec270b
--- /dev/null
+++ b/app/assets/javascripts/state/state_system/StateMap.ts
@@ -0,0 +1,69 @@
+import { State } from "state/state_system/State";
+
+/**
+ * This class extends the Map class to allow for state tracking
+ * It notifies subscribers of key changes as if it where `stateProperties`.
+ */
+export class StateMap<K, V> extends State implements Map<K, V> {
+    private map: Map<K, V> = new Map<K, V>();
+
+    public get size(): number {
+        this.recordRead();
+        return this.map.size;
+    }
+
+    public clear(): void {
+        this.dispatchStateEvent();
+        this.map.clear();
+    }
+
+    public delete(key: K): boolean {
+        this.dispatchStateEvent(key.toString());
+        return this.map.delete(key);
+    }
+
+    public forEach(callbackfn: (value: V, key: K, map: Map<K, V>) => void, thisArg?: any): void {
+        this.recordRead();
+        this.map.forEach(callbackfn, thisArg);
+    }
+
+    public get(key: K): V | undefined {
+        this.recordRead(key.toString());
+        return this.map.get(key);
+    }
+
+    public has(key: K): boolean {
+        this.recordRead(key.toString());
+        return this.map.has(key);
+    }
+
+    public set(key: K, value: V): this {
+        this.map.set(key, value);
+        this.dispatchStateEvent(key.toString());
+        return this;
+    }
+
+    public entries(): IterableIterator<[K, V]> {
+        this.recordRead();
+        return this.map.entries();
+    }
+
+    public keys(): IterableIterator<K> {
+        this.recordRead();
+        return this.map.keys();
+    }
+
+    public values(): IterableIterator<V> {
+        this.recordRead();
+        return this.map.values();
+    }
+
+    public [Symbol.iterator](): IterableIterator<[K, V]> {
+        this.recordRead();
+        return this.map[Symbol.iterator]();
+    }
+
+    public get [Symbol.toStringTag](): string {
+        return this.map[Symbol.toStringTag];
+    }
+}
diff --git a/app/assets/javascripts/state/state_system/StateProperty.ts b/app/assets/javascripts/state/state_system/StateProperty.ts
new file mode 100644
index 0000000000..1d1f3d9abe
--- /dev/null
+++ b/app/assets/javascripts/state/state_system/StateProperty.ts
@@ -0,0 +1,68 @@
+import { State } from "./State";
+import { ClassElement, Constructor } from "@lit/reactive-element/decorators/base.js";
+
+/**
+ * This function is used to decorate a property of a State class.
+ * It will make the property reactive and will dispatch a StateEvent when the property changes.
+ * It will also record every read of the property to the stateRecorder.
+ * @param stateClass
+ * @param property
+ */
+function finisher(stateClass: typeof State, property: PropertyKey): void {
+    const key = typeof property === "symbol" ? Symbol() : `__${property}`;
+    const currentVal = stateClass.prototype[property];
+    Object.defineProperty(stateClass.prototype, property, {
+        get(): unknown {
+            this.recordRead(property);
+            return this[key];
+        },
+        set(value: unknown) {
+            this[key] = value;
+            this.dispatchStateEvent(property);
+        },
+        configurable: true,
+        enumerable: true,
+    });
+    stateClass.prototype[key] = currentVal;
+}
+
+/**
+ * Function for decorating a property that is compatible with both TypeScript and Babel decorators.
+ * It will apply the `finisher` function to the property.
+ *
+ * @returns {ClassElement|void}
+ */
+export const stateProperty = (
+    protoOrDescriptor: State | ClassElement,
+    name?: PropertyKey
+    // Note TypeScript requires the return type to be `void|any`
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+): void | any => {
+    if (name !== undefined) {
+        // TypeScript / Babel legacy mode
+        const ctor = (protoOrDescriptor as State).constructor as typeof State;
+        Object.defineProperty(protoOrDescriptor, name, {
+            writable: true,
+            configurable: true,
+            enumerable: true
+        });
+        finisher(ctor, name);
+    } else {
+        // Babel standard mode
+        const element = protoOrDescriptor as ClassElement;
+        return {
+            kind: "field",
+            placement: "prototype",
+            key: Symbol(),
+            descriptor: {},
+            finisher: function <State> (ctor: Constructor<State>) {
+                finisher(ctor as typeof State, element.key);
+            },
+            initializer(this: {[key: symbol]: unknown}) {
+                if (typeof element.initializer === "function") {
+                    this[element.key] = element.initializer.call(this);
+                }
+            },
+        };
+    }
+};
diff --git a/app/assets/javascripts/state/state_system/StateRecorder.ts b/app/assets/javascripts/state/state_system/StateRecorder.ts
new file mode 100644
index 0000000000..91f067c223
--- /dev/null
+++ b/app/assets/javascripts/state/state_system/StateRecorder.ts
@@ -0,0 +1,42 @@
+import { State } from "./State";
+
+/**
+ * A global instance that records every property of a state that gets read between it's start and finish.
+ * Credits to _litState_.
+ *
+ * Based on the code from the [litState StateRecorder](https://github.com/gitaarik/lit-state/blob/8cd66223612c3b115c0275f58f6cee5e900ee534/lit-state.js#L233)
+ */
+class StateRecorder {
+    private started = false;
+    private log: Map<State, Set<string|undefined>> = new Map();
+
+    start(): void {
+        this.log = new Map();
+        this.started = true;
+    }
+
+    recordRead(stateObj: State, key?: string): void {
+        if (!this.started) {
+            return;
+        }
+        if (!this.log.has(stateObj)) {
+            this.log.set(stateObj, new Set());
+        }
+
+        const keys = this.log.get(stateObj);
+        if (!keys.has(key)) {
+            keys.add(key);
+        }
+    }
+
+    finish(): Map<State, Set<string|undefined>> {
+        if (!this.started) {
+            throw new Error("StateRecorder is not started");
+        }
+
+        this.started = false;
+        return this.log;
+    }
+}
+
+export const stateRecorder = new StateRecorder();
diff --git a/app/assets/javascripts/submission.ts b/app/assets/javascripts/submission.ts
index 207569db59..904b3c3a3b 100644
--- a/app/assets/javascripts/submission.ts
+++ b/app/assets/javascripts/submission.ts
@@ -51,13 +51,16 @@ function initSubmissionShow(parentClass: string, mediaPath: string, token: strin
         document.querySelectorAll("a.tab-link").forEach(t => {
             t.addEventListener("click", e => {
                 const link = e.currentTarget;
-                const tabName = link.dataset.tab || "code";
+                const tabName = link.dataset.tab;
                 const line = link.dataset.line;
 
                 // prevent automatic scrolling to top of the page when clicking a link
                 e.preventDefault();
 
-                const tab = document.querySelector(`.feedback-table .nav-tabs > li a[href*='#tab-${tabName}']`);
+                const query = tabName && tabName !== "code" ?
+                    `.feedback-table .nav-tabs > li a[href*='#tab-${tabName}']` :
+                    "#link-to-code-tab";
+                const tab = document.querySelector(query);
                 new bootstrap.Tab(tab).show();
 
                 if (line !== undefined) {
diff --git a/app/assets/javascripts/types/index.d.ts b/app/assets/javascripts/types/index.d.ts
index 496422b9c7..98f2dc5055 100644
--- a/app/assets/javascripts/types/index.d.ts
+++ b/app/assets/javascripts/types/index.d.ts
@@ -5,7 +5,7 @@ declare interface Window {
 }
 
 declare class MathJaxObject {
-    typeset?(args?: string[]) :void;
+    typeset?(args?: string[] | Node[]) :void;
 
     tex: {
         inlineMath: string[][];
@@ -36,9 +36,10 @@ declare module I18n {
     export var locale: string;
 }
 
-// add parentIFrame from iFrame Resizer to the window to make typescript happy
+// add parentIFrame and iFrameResize from iFrame Resizer to the window to make typescript happy
 declare interface Window {
     parentIFrame: any;
+    iFrameResize: any;
 }
 
 declare var dodona;
diff --git a/app/assets/javascripts/util.js b/app/assets/javascripts/util.js
index 96ca2b1c91..57d44ec512 100644
--- a/app/assets/javascripts/util.js
+++ b/app/assets/javascripts/util.js
@@ -95,6 +95,9 @@ async function initCSRF() {
     });
 }
 
+/**
+ * @param {Document | Element} root
+ */
 function initTooltips(root = document) {
     // First remove dead tooltips
     const tooltips = root.querySelectorAll(".tooltip");
@@ -208,9 +211,9 @@ function htmlEncode(str) {
 /**
  * Returns the first parent of an element that has at least all of the given classes.
  * Returns null if no such parent exists.
- * @param {HTMLElement} element - Iterate over the parents of this element
+ * @param {Element} element - Iterate over the parents of this element
  * @param {string} classNames - The class names to search for, separated by white space
- * @return {?HTMLElement} The parent containing the classes
+ * @return {?Element} The parent containing the classes
  */
 function getParentByClassName(element, classNames) {
     let parent = element.parentElement;
diff --git a/app/assets/stylesheets/bootstrap_variable_overrides.css.scss b/app/assets/stylesheets/bootstrap_variable_overrides.css.scss
index d4bc5b0ce0..d7678e688f 100644
--- a/app/assets/stylesheets/bootstrap_variable_overrides.css.scss
+++ b/app/assets/stylesheets/bootstrap_variable_overrides.css.scss
@@ -70,3 +70,13 @@ $btn-border-width: 0;
 
 // Tooltip
 $tooltip-max-width: 400px;
+
+$utilities: (
+  "display": (
+    responsive: true,
+    print: true,
+    property: display,
+    class: d,
+    values: inline inline-block block grid table table-row table-cell flex inline-flex none table-column
+  ),
+);
diff --git a/app/assets/stylesheets/components/btn.css.scss b/app/assets/stylesheets/components/btn.css.scss
index 821b0aa102..3340c6c864 100644
--- a/app/assets/stylesheets/components/btn.css.scss
+++ b/app/assets/stylesheets/components/btn.css.scss
@@ -54,8 +54,7 @@
   }
 }
 
-.btn.btn-tonal,
-.btn.btn-elevated {
+.btn.btn-tonal {
   background: $secondary-container;
   color: $on-secondary-container;
 
@@ -130,7 +129,7 @@
 .btn.btn-icon {
   width: 40px;
   padding: 0;
-  color: $on-surface-variant;
+  color: $primary;
 
   // enable pointer events to enable tooltips to be shown on disabled buttons
   &.disabled-with-tooltip {
@@ -158,6 +157,17 @@
     }
   }
 
+  &.btn-icon-muted {
+    color: $text-muted;
+
+    &:hover,
+    &:focus,
+    &:active {
+      opacity: 1;
+      background: rgba($on-surface, 0.1);
+    }
+  }
+
   &.btn-icon-filled {
     color: $on-primary;
 
@@ -199,6 +209,48 @@
   }
 }
 
+.btn.btn-fab-small {
+  height: 40px;
+  width: 40px;
+  border-radius: 12px;
+  background: $secondary-container;
+  color: $on-secondary-container;
+  padding: 6px;
+
+  @include shadow-z2;
+
+  &:hover,
+  &:focus,
+  &:active,
+  &:disabled,
+  &.disabled {
+    opacity: 1;
+    filter: brightness(0.95);
+
+    @include shadow-z3;
+  }
+}
+
+.btn.btn-fab-small-extended {
+  height: 40px;
+  border-radius: 12px;
+  background: $secondary-container;
+  color: $on-secondary-container;
+
+  @include shadow-z2;
+
+  &:hover,
+  &:focus,
+  &:active,
+  &:disabled,
+  &.disabled {
+    opacity: 1;
+    filter: brightness(0.95);
+
+    @include shadow-z3;
+  }
+}
+
 .btn-group {
   & > .btn {
     padding-left: 12px;
diff --git a/app/assets/stylesheets/components/card.css.scss b/app/assets/stylesheets/components/card.css.scss
index 5dbd689fd8..7206f3dfb2 100644
--- a/app/assets/stylesheets/components/card.css.scss
+++ b/app/assets/stylesheets/components/card.css.scss
@@ -295,12 +295,6 @@ a.card-title-link:hover {
   height: 50px;
 }
 
-.card-nav .btn-icon {
-  padding: 5px;
-  margin: -5px -5px -5px -2px;
-  cursor: pointer;
-}
-
 .card-nav .card-title .btn-icon:hover {
   background-color: rgba(255, 255, 255, 0.3);
 }
diff --git a/app/assets/stylesheets/components/code_listing.css.scss b/app/assets/stylesheets/components/code_listing.css.scss
index 047073c20d..d2903f0586 100644
--- a/app/assets/stylesheets/components/code_listing.css.scss
+++ b/app/assets/stylesheets/components/code_listing.css.scss
@@ -1,4 +1,5 @@
 @use "sass:map";
+@use "sass:color";
 $dot-size: 9px;
 
 // Annotation colors
@@ -7,12 +8,63 @@ $annotation-user: $success;
 $annotation-error: $danger;
 $annotation-warning: $warning;
 $annotation-info: $info;
+$annotation-question-background: color.mix($annotation-question, $background, 8%);
+$annotation-user-background: color.mix($annotation-user, $background, 8%);
+$annotation-question-background-intense: color.mix($annotation-question, $background, 20%);
+$annotation-user-background-intense: color.mix($annotation-user, $background, 20%);
 
 .code-table {
+  &.selection-color-question {
+    ::selection {
+      background-color: $annotation-question-background-intense;
+    }
+  }
+
+  &.selection-color-annotation {
+    ::selection {
+      background-color: $annotation-user-background-intense;
+    }
+  }
+
+  .dot {
+    float: left;
+    margin-left: 4px;
+    margin-top: 4px;
+    height: $dot-size;
+    width: $dot-size;
+    border-radius: 100%;
+  }
+
+  .feedback-table-options .dot {
+    margin-left: 5px;
+    margin-top: 15px;
+  }
+
+  .dot-info {
+    background-color: $annotation-info;
+  }
+
+  .dot-warning {
+    background-color: $annotation-warning;
+  }
+
+  .dot-annotation {
+    background-color: $annotation-user;
+  }
+
+  .dot-error {
+    background-color: $annotation-error;
+  }
+
+  .dot-question {
+    background-color: $annotation-question;
+  }
+
   .code-listing-container {
     position: relative;
     left: 0;
     top: 0;
+    margin-top: 10px;
 
     .copy-btn {
       margin-right: 5px;
@@ -24,7 +76,6 @@ $annotation-info: $info;
 
     .code-listing {
       display: block;
-      overflow-x: auto;
       white-space: nowrap;
       background-color: $content-bg;
 
@@ -56,27 +107,85 @@ $annotation-info: $info;
       .annotation-button {
         display: none;
         position: absolute;
-        width: 30px;
-        height: 30px;
-        left: -15px;
-        margin-top: -7px;
-        border-radius: 50%;
-        padding-top: 4px;
-      }
+        right: 15px;
+        top: -12px;
+        z-index: 2;
+        border-radius: 12px;
+
+        .btn-fab-small-flex {
+          height: 40px;
+          width: auto;
+          max-width: 40px;
+          border-radius: 12px;
+          background: $secondary-container;
+          color: $on-secondary-container;
+          padding: 6px;
+          transition: max-width 0.2s ease-in-out, padding 0.2s ease-in-out;
+          justify-content: end;
+          overflow: hidden;
+
+          @include shadow-z2;
+
+          .text {
+            display: none;
+          }
+        }
+
+        @include media-breakpoint-up(lg) {
+          &:hover,
+          &.expanded {
+            .btn-fab-small-flex {
+              max-width: 1000px;
+              padding-left: 24px;
+              padding-right: 16px;
+
+              .text {
+                display: inline;
+              }
+
+              .mdi {
+                padding: 0;
+                padding-left: 8px;
+              }
+            }
+          }
+        }
+
+        &.expanded {
+          display: inline-flex;
+        }
+
+        &::after {
+          width: 0;
+          height: 0;
+          border-bottom: 8px solid transparent;
+          border-top: 8px solid transparent;
+          border-left: 8px solid $secondary-container;
+          content: " ";
+          position: absolute;
+          top: 13px;
+          right: -7px;
+        }
+
+        &:hover {
+          @include shadow-z3;
 
-      .annotation-button:hover {
-        transform: scale(1.15);
-        transition: 0.1s ease-in-out;
+          &::after,
+          .btn-fab-small-flex {
+            opacity: 1;
+            filter: brightness(0.95);
+          }
+        }
       }
 
-      .lineno:first-child {
+      d-code-listing-row:first-child {
         .rouge-code,
         .rouge-gutter {
           padding-top: 5px;
         }
       }
 
-      .lineno:last-child {
+      d-code-listing-row:last-child {
         .rouge-code,
         .rouge-gutter {
           padding-bottom: 5px;
@@ -84,7 +193,15 @@ $annotation-info: $info;
       }
 
       .lineno:hover .annotation-button {
-        display: block;
+        display: inline-flex;
+
+        &.hide {
+          display: none;
+
+          &.expanded {
+            display: inline-flex;
+          }
+        }
       }
 
       .rouge-code {
@@ -94,6 +211,29 @@ $annotation-info: $info;
           padding-left: 5px;
           white-space: pre-wrap;
           word-break: break-word;
+          min-height: 20px;
+          margin-bottom: -3px;
+          padding-bottom: 3px;
+          margin-top: -2px;
+          padding-top: 2px;
+
+          &.code-line-question {
+            background-color: $annotation-question-background-intense;
+            width: 100%;
+
+            d-annotation-marker {
+              background-color: $annotation-question-background-intense;
+            }
+          }
+
+          &.code-line-annotation {
+            background-color: $annotation-user-background-intense;
+            width: 100%;
+
+            d-annotation-marker {
+              background-color: $annotation-user-background-intense;
+            }
+          }
         }
       }
 
@@ -109,35 +249,6 @@ $annotation-info: $info;
           font-family: $font-family-monospace;
           color: $on-surface-muted;
         }
-
-        .dot {
-          float: left;
-          margin-left: 4px;
-          margin-top: 4px;
-          height: $dot-size;
-          width: $dot-size;
-          border-radius: 100%;
-        }
-
-        .dot-info {
-          background-color: $annotation-info;
-        }
-
-        .dot-warning {
-          background-color: $annotation-warning;
-        }
-
-        .dot-user {
-          background-color: $annotation-user;
-        }
-
-        .dot-error {
-          background-color: $annotation-error;
-        }
-
-        .dot-question {
-          background-color: $annotation-question;
-        }
       }
 
       // General lighter background on the right side
@@ -155,12 +266,61 @@ $annotation-info: $info;
         min-width: 100%;
       }
     }
+
+    d-code-listing-row {
+      display: contents;
+
+      pre.code-line {
+        overflow: visible;
+        display: inline-block;
+        padding-top: 1px;
+      }
+    }
   }
 
   #feedback-table-global-annotations.has-annotations {
     padding-bottom: 10px;
   }
 
+  .thread {
+    margin: 3px 5px;
+    padding-left: 5px;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+    border: 1px solid $divider;
+    background: $content-bg;
+    white-space: normal;
+
+    .annotation {
+      margin: 2px 0;
+      border: none;
+      border-left: 3px solid $outline;
+    }
+
+    d-user-annotation {
+      display: block;
+
+      .dropdown {
+        position: static;
+      }
+    }
+
+    .fake-input {
+      margin: 4px 5px 4px 0;
+      display: flex;
+      align-items: center;
+
+      span {
+        margin-left: 15px;
+        margin-right: 5px;
+      }
+
+      .form-control {
+        border-color: $divider;
+      }
+    }
+  }
+
   .annotation {
     margin: 3px 5px;
     padding: 2px 5px 2px 10px;
@@ -259,11 +419,6 @@ $annotation-info: $info;
     }
   }
 
-  .annotation.question,
-  .annotation.user {
-    border-left-width: 5px;
-  }
-
   .annotation.question {
     border-left-color: $annotation-question;
   }
@@ -328,4 +483,59 @@ $annotation-info: $info;
       border-color: $danger;
     }
   }
+
+  td {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}
+
+d-annotation-marker,
+d-selection-marker {
+  --info-color: #{$annotation-info};
+  --warning-color: #{$annotation-warning};
+  --error-color: #{$annotation-error};
+  --question-color: #{$annotation-question-background};
+  --annotation-color: #{$annotation-user-background};
+  --question-intense-color: #{$annotation-question-background-intense};
+  --annotation-intense-color: #{$annotation-user-background-intense};
+}
+
+.marker-tooltip {
+  width: max-content;
+  white-space: initial;
+  color: $on-surface;
+  font-style: initial;
+  padding-left: 5px;
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+  border: 1px solid $divider;
+  background-color: $content-bg;
+
+  .annotation {
+    margin: 4px 0;
+    border-right: none;
+    border-top: none;
+    border-bottom: none;
+
+    #kebab-menu {
+      display: none;
+    }
+  }
+}
+
+.no-selection-outside-code {
+  user-select: none;
+
+  d-code-listing-row {
+    user-select: text;
+
+    td {
+      user-select: text;
+
+      d-annotations-cell {
+        user-select: none;
+      }
+    }
+  }
 }
diff --git a/app/assets/stylesheets/components/dropdown.css.scss b/app/assets/stylesheets/components/dropdown.css.scss
index 6bd1343de2..b8162532d4 100644
--- a/app/assets/stylesheets/components/dropdown.css.scss
+++ b/app/assets/stylesheets/components/dropdown.css.scss
@@ -6,3 +6,7 @@
 .dropdown-item-text {
   white-space: nowrap;
 }
+
+.dropdown-item {
+  cursor: pointer;
+}
diff --git a/app/assets/stylesheets/models/questions.css.scss b/app/assets/stylesheets/models/questions.css.scss
index ca44847bae..e25032cca2 100644
--- a/app/assets/stylesheets/models/questions.css.scss
+++ b/app/assets/stylesheets/models/questions.css.scss
@@ -1,6 +1,6 @@
 .question-table {
   col.actions {
-    width: 100px;
+    width: 50px;
   }
 
   col.question {
@@ -12,56 +12,28 @@
   }
 
   col.name {
-    width: 150px;
-  }
-
-  td.actions {
-    vertical-align: middle;
+    width: 120px;
   }
 
   .selection-row {
     cursor: pointer;
 
     &:hover {
-      background-color: table-hover-bg;
+      background-color: $table-hover-bg;
     }
   }
 
   table-layout: fixed;
 }
 
-.question-index-table {
-  col.actions {
-    width: 100px;
-  }
-
-  col.age {
-    width: 240px;
-  }
-
-  col.status {
-    width: 240px;
-  }
-
-  col.name {
-    width: 170px;
-  }
-
-  col.view {
-    width: 35px;
-  }
-
-  .selection-row {
-    cursor: pointer;
+@include media-breakpoint-up(md) {
+  .question-table {
+    .icon-indent {
+      padding-left: 23px;
+    }
 
-    &:hover {
-      background-color: $table-hover-bg;
+    col.name {
+      width: 170px;
     }
   }
-
-  table-layout: fixed;
-}
-
-.icon-indent {
-  padding-left: 23px;
 }
diff --git a/app/controllers/annotations_controller.rb b/app/controllers/annotations_controller.rb
index a2458ec779..c6230825b5 100644
--- a/app/controllers/annotations_controller.rb
+++ b/app/controllers/annotations_controller.rb
@@ -12,7 +12,7 @@ class AnnotationsController < ApplicationController
 
   def index
     authorize Annotation
-    @annotations = apply_scopes(policy_scope(Annotation.all))
+    @annotations = apply_scopes(policy_scope(Annotation.all)).where(thread_root_id: nil)
   end
 
   def question_index
diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
index 48cb965c30..cf917d4476 100644
--- a/app/controllers/application_controller.rb
+++ b/app/controllers/application_controller.rb
@@ -102,7 +102,7 @@ def skip_session
   end
 
   def sandbox?
-    request.host == Rails.configuration.sandbox_host && \
+    request.host == Rails.configuration.sandbox_host &&
       request.host != Rails.configuration.default_host
   end
 
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index ac7d73d9c8..09f677bcac 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -252,8 +252,8 @@ def html_container(html)
       %(
         #{container}
         <script>
-        if(dodona.searchQuery){
-            dodona.searchQuery.initPagination();
+        if(dodona.search){
+            dodona.search.initPagination();
         }
         </script>
       )
diff --git a/app/helpers/pages_helper.rb b/app/helpers/pages_helper.rb
index cef178f238..1ec6b67f41 100644
--- a/app/helpers/pages_helper.rb
+++ b/app/helpers/pages_helper.rb
@@ -28,8 +28,9 @@ def homepage_course_admin_notifications(course)
       }
     end
 
-    if course.feedbacks.incomplete.count > 0
-      linked_feedback = course.feedbacks.incomplete.first
+    incomplete_unreleased_feedbacks = course.feedbacks.joins(:evaluation).where(evaluation: { released: false }).incomplete
+    if incomplete_unreleased_feedbacks.count > 0
+      linked_feedback = incomplete_unreleased_feedbacks.first
       result << {
         title: I18n.t('pages.course_card.incomplete-feedbacks', count: course.feedbacks.incomplete.count),
         link: evaluation_feedback_path(I18n.locale, linked_feedback.evaluation, linked_feedback),
diff --git a/app/helpers/renderers/feedback_code_renderer.rb b/app/helpers/renderers/feedback_code_renderer.rb
index 4e1f4e31f0..b9177b443a 100644
--- a/app/helpers/renderers/feedback_code_renderer.rb
+++ b/app/helpers/renderers/feedback_code_renderer.rb
@@ -55,48 +55,15 @@ def add_messages(submission, messages, user)
                   AnnotationPolicy.new(user, Annotation.new(submission: submission, user: user)).create?
                 end
 
-    @builder.div(id: 'feedback-table-options', class: 'feedback-table-options') do
-      if user_perm
-        @builder.button(class: 'btn btn-text', id: 'add_global_annotation') do
-          if user_is_student
-            @builder.text!(I18n.t('submissions.show.questions.add_global'))
-          else
-            @builder.text!(I18n.t('submissions.show.annotations.add_global'))
-          end
-        end
-      end
-
-      @builder.span(class: 'flex-spacer') {}
-      @builder.span(class: 'diff-switch-buttons switch-buttons hide', id: 'annotations_toggles') do
-        @builder.span(id: 'diff-switch-prefix') do
-          @builder.text!(I18n.t('submissions.show.annotations.title'))
-        end
-        @builder.div(class: 'btn-group btn-toggle', role: 'group', 'aria-label': I18n.t('submissions.show.annotations.title'), 'data-bs-toggle': 'buttons') do
-          @builder.button(class: 'btn annotation-toggle active', id: 'show_all_annotations', title: I18n.t('submissions.show.annotations.show_all'), 'data-bs-toggle': 'tooltip', 'data-bs-placement': 'top') do
-            @builder.i(class: 'mdi mdi-comment-multiple-outline') {}
-          end
-          @builder.button(class: 'btn annotation-toggle', id: 'show_only_errors', title: I18n.t('submissions.show.annotations.show_errors'), 'data-bs-toggle': 'tooltip', 'data-bs-placement': 'top') do
-            @builder.i(class: 'mdi mdi-comment-alert-outline') {}
-          end
-          @builder.button(class: 'btn annotation-toggle', id: 'hide_all_annotations', title: I18n.t('submissions.show.annotations.hide_all'), 'data-bs-toggle': 'tooltip', 'data-bs-placement': 'top') do
-            @builder.i(class: 'mdi mdi-comment-remove-outline') {}
-          end
-        end
-      end
-    end
-
-    @builder.div(id: 'feedback-table-global-annotations') do
-      @builder.div(id: 'feedback-table-global-annotations-list') {}
-    end
+    @builder.tag!('d-annotation-options') {}
 
     @builder.script(type: 'application/javascript') do
       @builder << <<~HEREDOC
-        window.MathJax.startup.promise.then(() => {
-          window.dodona.codeListing = new window.dodona.codeListingClass(#{submission.id}, #{submission.course_id.to_json}, #{submission.exercise_id}, #{user.id}, #{@code.to_json}, #{@code.lines.length}, #{user_is_student});
+        window.dodona.ready.then(() => {
+          window.dodona.codeListing.initAnnotations(#{submission.id}, #{submission.course_id.to_json}, #{submission.exercise_id}, #{user.id}, #{@code.to_json}, #{@code.lines.length}, #{user_is_student});
           window.dodona.codeListing.addMachineAnnotations(#{messages.to_json});
           #{'window.dodona.codeListing.initAnnotateButtons();' if user_perm}
           #{'window.dodona.codeListing.loadUserAnnotations();' if submission.annotated? || (!user_is_student && submission.annotations.any?)}
-          window.dodona.codeListing.showAnnotations();
         });
       HEREDOC
     end
diff --git a/app/helpers/renderers/feedback_table_renderer.rb b/app/helpers/renderers/feedback_table_renderer.rb
index ea62746e81..e953772d60 100644
--- a/app/helpers/renderers/feedback_table_renderer.rb
+++ b/app/helpers/renderers/feedback_table_renderer.rb
@@ -79,21 +79,26 @@ def tabs(submission)
                     end
           @builder.li do
             id = tab_id(t, i)
-            @builder.a(href: "##{id}", 'data-bs-toggle': 'tab', class: "tab-#{permission} #{'active' if i.zero?}", title: tooltip) do
+            # the pythonic devil has the code tab as a generic tab
+            is_code_tab = t[:data] && t[:data][:source_annotations]
+            @builder.a(href: "##{id}", 'data-bs-toggle': 'tab', class: "tab-#{permission} #{'active' if i.zero?}", title: tooltip, id: is_code_tab ? 'link-to-code-tab' : nil) do
               @builder.text!("#{(t[:description] || 'Test').upcase_first} ")
               # Choose between the pythonic devil and the deep blue sea.
-              badge_id = t[:data] && t[:data][:source_annotations] ? 'code' : id
-              @builder.span(class: 'badge rounded-pill', id: "badge_#{badge_id}") do
-                @builder.text! tab_count(t)
+              if is_code_tab
+                @builder.tag!('d-annotations-count-badge')
+              else
+                @builder.span(class: 'badge rounded-pill', id: "badge_#{id}") do
+                  @builder.text! tab_count(t)
+                end
               end
             end
           end
         end
         if show_code_tab
           @builder.li(class: ('active' if submission[:groups].blank?)) do
-            @builder.a(href: '#code-tab', 'data-bs-toggle': 'tab') do
+            @builder.a(href: '#code-tab', 'data-bs-toggle': 'tab', id: 'link-to-code-tab') do
               @builder.text!("#{I18n.t('submissions.show.code')} ")
-              @builder.span(class: 'badge rounded-pill', id: 'badge_code')
+              @builder.tag!('d-annotations-count-badge')
             end
           end
         end
diff --git a/app/helpers/renderers/pythia_renderer.rb b/app/helpers/renderers/pythia_renderer.rb
index 51f484a623..f92f544717 100644
--- a/app/helpers/renderers/pythia_renderer.rb
+++ b/app/helpers/renderers/pythia_renderer.rb
@@ -267,6 +267,9 @@ def convert_lint_type(type)
   def convert_lint_message(message)
     {
       row: message[:line] - 1,
+      column: message[:column],
+      rows: message[:rows],
+      columns: message[:columns],
       type: convert_lint_type(message[:type]),
       text: message[:description],
       externalUrl: message[:externalUrl]
diff --git a/app/javascript/packs/pythia_submission.js b/app/javascript/packs/pythia_submission.js
index 115c336054..7d7956f8f4 100644
--- a/app/javascript/packs/pythia_submission.js
+++ b/app/javascript/packs/pythia_submission.js
@@ -1,4 +1,4 @@
-import { initPythiaSubmissionShow } from "pythia_submission.js";
+import { initPythiaSubmissionShow } from "pythia_submission.ts";
 
 window.dodona.initPythiaSubmissionShow = initPythiaSubmissionShow;
 
diff --git a/app/javascript/packs/search.js b/app/javascript/packs/search.js
index d05efade61..1063496f79 100644
--- a/app/javascript/packs/search.js
+++ b/app/javascript/packs/search.js
@@ -1,14 +1,14 @@
 import "search";
-import { searchQuery } from "search";
+import { search } from "search";
 
-import "components/sort_button.ts";
-import "components/search_actions.ts";
-import "components/search_field.ts";
-import "components/search_token.ts";
-import "components/filter_button.ts";
-import "components/dropdown_filter";
-import "components/filter_tabs";
-import "components/standalone-dropdown-filter";
-import "components/loading_bar";
+import "components/search/sort_button.ts";
+import "components/search/search_actions.ts";
+import "components/search/search_field.ts";
+import "components/search/search_token.ts";
+import "components/search/filter_button.ts";
+import "components/search/dropdown_filter";
+import "components/search/filter_tabs";
+import "components/search/standalone-dropdown-filter";
+import "components/search/loading_bar";
 
-window.dodona.searchQuery = searchQuery;
+window.dodona.search = search;
diff --git a/app/javascript/packs/submission.js b/app/javascript/packs/submission.js
index 5249d28ae3..371ae923d2 100644
--- a/app/javascript/packs/submission.js
+++ b/app/javascript/packs/submission.js
@@ -1,11 +1,15 @@
 import { initSubmissionShow, initCorrectSubmissionToNextLink, initSubmissionHistory } from "submission.ts";
 import { initMathJax } from "exercise.ts";
-import { CodeListing } from "code_listing/code_listing.ts";
 import { attachClipboard } from "copy";
+import { evaluationState } from "state/Evaluations";
+import codeListing from "code_listing";
+import { annotationState } from "state/Annotations";
 
 window.dodona.initSubmissionShow = initSubmissionShow;
-window.dodona.codeListingClass = CodeListing;
+window.dodona.codeListing = codeListing;
 window.dodona.attachClipboard = attachClipboard;
 window.dodona.initMathJax = initMathJax;
 window.dodona.initCorrectSubmissionToNextLink = initCorrectSubmissionToNextLink;
 window.dodona.initSubmissionHistory = initSubmissionHistory;
+window.dodona.setEvaluationId = id => evaluationState.id = id;
+window.dodona.setAnnotationVisibility = visibility => annotationState.visibility = visibility;
diff --git a/app/models/activity.rb b/app/models/activity.rb
index e9b7e6e428..12ae3ee780 100644
--- a/app/models/activity.rb
+++ b/app/models/activity.rb
@@ -448,9 +448,9 @@ def activity_status_for(user, series = nil)
   def activity_status_for!(user, series = nil)
     first_try = true
     begin
-      ActivityStatus.find_or_create_by(activity: self, series: series, user: user)
+      ActivityStatus.create_or_find_by(activity: self, series: series, user: user)
     rescue StandardError
-      # https://github.com/dodona-edu/dodona/issues/1877
+      # https://github.com/dodona-edu/dodona/pull/4547
       raise unless first_try
 
       first_try = false
diff --git a/app/models/activity_status.rb b/app/models/activity_status.rb
index 825abf8422..6e18883040 100644
--- a/app/models/activity_status.rb
+++ b/app/models/activity_status.rb
@@ -31,12 +31,10 @@ class ActivityStatus < ApplicationRecord
   belongs_to :series, optional: true
   belongs_to :user
 
-  validates :series_id_non_nil, uniqueness: { scope: %i[user_id activity_id] }, on: :create
-
   scope :in_series, ->(series) { where(series: series) }
   scope :for_user, ->(user) { where(user: user) }
 
-  before_validation :initialise_series_id_non_nil, if: -> { new_record? }
+  before_create :initialise_series_id_non_nil
   before_create :initialise_values_for_content_page, if: -> { activity.content_page? }
   before_create :initialise_values_for_exercise, if: -> { activity.exercise? }
 
diff --git a/app/models/annotation.rb b/app/models/annotation.rb
index faa013732b..f5ffbc8de7 100644
--- a/app/models/annotation.rb
+++ b/app/models/annotation.rb
@@ -15,6 +15,10 @@
 #  last_updated_by_id  :integer          not null
 #  course_id           :integer          not null
 #  saved_annotation_id :bigint
+#  thread_root_id      :integer
+#  column              :integer
+#  rows                :integer          default(1), not null
+#  columns             :integer
 #
 class Annotation < ApplicationRecord
   include ApplicationHelper
@@ -25,11 +29,27 @@ class Annotation < ApplicationRecord
   belongs_to :evaluation, optional: true
   belongs_to :saved_annotation, optional: true, counter_cache: true
   belongs_to :last_updated_by, class_name: 'User'
+  belongs_to :thread_root, class_name: 'Annotation', optional: true
+
+  has_many :responses, -> { order(created_at: :asc) }, class_name: 'Annotation', dependent: :destroy, inverse_of: :thread_root, foreign_key: :thread_root_id
 
   validates :annotation_text, presence: true, length: { minimum: 1, maximum: 10_000 }
   validates :line_nr, allow_nil: true, numericality: {
     greater_than_or_equal_to: 0
   }, if: ->(attr) { attr.line_nr.present? }
+  validates :column, allow_nil: true, numericality: {
+    greater_than_or_equal_to: 0
+  }, if: ->(attr) { attr.column.present? }
+  validates :columns, allow_nil: true, numericality: {
+    greater_than_or_equal_to: 0
+  }, if: ->(attr) { attr.columns.present? }
+  validates :rows, numericality: {
+    greater_than_or_equal_to: 1
+  }, if: ->(attr) { attr.rows.present? }
+
+  # Only allow responses if the annotation is not a response itself
+  validates :thread_root_id, absence: true, if: -> { responses.any? }
+  validates_associated :thread_root
 
   scope :by_submission, ->(submission_id) { where(submission_id: submission_id) }
   scope :by_user, ->(user_id) { where(user_id: user_id) }
@@ -41,6 +61,7 @@ class Annotation < ApplicationRecord
   before_validation :set_last_updated_by, on: :create
   before_validation :set_course_id, on: :create
   after_create :annotate_submission
+  after_create :answer_previous_questions
   after_destroy :destroy_notification
   after_destroy :reset_submission_annotated
   after_save :create_notification
@@ -82,4 +103,16 @@ def annotate_submission
   def reset_submission_annotated
     submission.update(annotated: false) unless submission.annotations.released.any?
   end
+
+  def previous_annotations
+    return [] if thread_root.nil?
+
+    [thread_root, thread_root&.responses&.where(created_at: ...created_at)].flatten
+  end
+
+  def answer_previous_questions
+    previous_annotations.each do |previous_annotation|
+      previous_annotation.update(question_state: :answered) if previous_annotation.is_a?(Question) && !previous_annotation.answered?
+    end
+  end
 end
diff --git a/app/models/concerns/tokenable.rb b/app/models/concerns/tokenable.rb
index 70b05d76b6..38816a4921 100644
--- a/app/models/concerns/tokenable.rb
+++ b/app/models/concerns/tokenable.rb
@@ -18,7 +18,7 @@ def token_generator(name, length: 16, unique: true)
           new_token = SecureRandom.urlsafe_base64(length)
                                   .tr('1lL0oO', '')
                                   .slice(0, length)
-        end until (new_token.length == length) && \
+        end until (new_token.length == length) &&
           !(unique && self.class.exists?(token_name => new_token))
         self[token_name] = new_token
       end
diff --git a/app/models/question.rb b/app/models/question.rb
index d7bd353097..12e9909d77 100644
--- a/app/models/question.rb
+++ b/app/models/question.rb
@@ -15,11 +15,16 @@
 #  last_updated_by_id  :integer          not null
 #  course_id           :integer          not null
 #  saved_annotation_id :bigint
+#  thread_root_id      :integer
+#  column              :integer
+#  rows                :integer          default(1), not null
+#  columns             :integer
 #
 class Question < Annotation
   belongs_to :user, inverse_of: :questions
   counter_culture :user, column_name: proc { |question| question.answered? ? nil : 'open_questions_count' }
 
+  after_save :schedule_reset_in_progress, if: :saved_change_to_question_state?
   after_commit :clear_transition
 
   enum question_state: { unanswered: 0, in_progress: 1, answered: 2 }
@@ -52,4 +57,16 @@ def clear_transition
     @transition_to = nil
     @transition_from = nil
   end
+
+  def reset_in_progress
+    return unless question_state == 'in_progress'
+
+    update(question_state: 'unanswered')
+  end
+
+  def schedule_reset_in_progress
+    return unless question_state == 'in_progress'
+
+    delay(run_at: 1.hour.from_now).reset_in_progress
+  end
 end
diff --git a/app/models/series_membership.rb b/app/models/series_membership.rb
index d0ee6fb097..ff8a5a8328 100644
--- a/app/models/series_membership.rb
+++ b/app/models/series_membership.rb
@@ -32,11 +32,11 @@ def add_activity_statuses_delayed
   def add_activity_statuses
     if activity.is_a? Exercise
       activity.submissions.where(course: series.course).distinct(:user_id).find_each do |submission|
-        ActivityStatus.create(series: series, activity: activity, user: submission.user)
+        ActivityStatus.create_or_find_by(series: series, activity: activity, user: submission.user)
       end
     else
       activity.activity_read_states.where(course: series.course).distinct(:user_id).find_each do |ars|
-        ActivityStatus.create(series: series, activity: activity, user: ars.user)
+        ActivityStatus.create_or_find_by(series: series, activity: activity, user: ars.user)
       end
     end
   end
diff --git a/app/models/user.rb b/app/models/user.rb
index 1d68d253a4..7dc6ab14dd 100644
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -405,10 +405,10 @@ def merge_into(other, force: false, force_institution: false)
         other_cm = other.course_memberships.find { |ocm| ocm.course_id == cm.course_id }
         if other_cm.nil?
           cm.update!(user: other)
-        elsif other_cm.status == cm.status \
-          || other_cm.status == 'course_admin' \
-          || (other_cm.status == 'student' && cm.status != 'course_admin') \
-          || (other_cm.status == 'unsubscribed' && cm.status == 'pending')
+        elsif other_cm.status == cm.status ||
+              other_cm.status == 'course_admin' ||
+              (other_cm.status == 'student' && cm.status != 'course_admin') ||
+              (other_cm.status == 'unsubscribed' && cm.status == 'pending')
           other_cm.update!(favorite: true) if cm.favorite
           cm.destroy!
         else
@@ -471,6 +471,9 @@ def jump_back_in
     # Don't give information about the exercise if the submission was within a course, but not within a visible series
     # This is to prevent students from seeing exercises that are not made public explicitly
     if latest_submission.course.present? && (latest_submission.series.nil? || !latest_submission.series.open?)
+      # Don't show complete courses
+      return [] if latest_submission.course.incomplete_series(self).blank?
+
       return [{
         submission: nil,
         activity: nil,
@@ -495,17 +498,19 @@ def jump_back_in
     if latest_submission.series.present? && (latest_submission.series.open? || course_admin?(latest_submission.course))
       next_activity = latest_submission.series.next_activity(latest_submission.exercise)
       if next_activity.present?
-        # start working on the next exercise
-        result << {
-          submission: nil,
-          activity: next_activity,
-          series: latest_submission.series,
-          course: latest_submission.course,
-          text: result.empty? ? I18n.t('pages.clickable_homepage_cards.next_exercise_success') : I18n.t('pages.clickable_homepage_cards.next_exercise')
-        }
+        # start working on the next exercise, if that one was not accepted
+        unless next_activity.accepted_for?(self, latest_submission.series)
+          result << {
+            submission: nil,
+            activity: next_activity,
+            series: latest_submission.series,
+            course: latest_submission.course,
+            text: result.empty? ? I18n.t('pages.clickable_homepage_cards.next_exercise_success') : I18n.t('pages.clickable_homepage_cards.next_exercise')
+          }
+        end
 
-        if latest_submission.series.next_activity(next_activity).present?
-          # there is another exercise after the next one, so show the series
+        if latest_submission.series.next_activity(next_activity).present? && !latest_submission.series.completed?(user: self)
+          # there is another exercise after the next one and the series is not yet completed, so show the series
           result << {
             submission: nil,
             activity: nil,
@@ -529,7 +534,7 @@ def jump_back_in
       end
     end
 
-    if latest_submission.course.present?
+    if latest_submission.course.present? && latest_submission.course.incomplete_series(self).present?
       # continue working on this course
       result << {
         submission: nil,
diff --git a/app/policies/annotation_policy.rb b/app/policies/annotation_policy.rb
index c83c4bf078..6fa65d1c96 100644
--- a/app/policies/annotation_policy.rb
+++ b/app/policies/annotation_policy.rb
@@ -33,7 +33,7 @@ def update?
   end
 
   def destroy?
-    record&.user == user
+    record&.user == user && (record&.thread_root_id.present? || record.responses.empty?)
   end
 
   def transition?(_from, _to = nil)
@@ -41,7 +41,7 @@ def transition?(_from, _to = nil)
   end
 
   def permitted_attributes_for_create
-    %i[annotation_text saved_annotation_id line_nr evaluation_id]
+    %i[annotation_text saved_annotation_id line_nr evaluation_id thread_root_id rows column columns]
   end
 
   def permitted_attributes_for_update
diff --git a/app/policies/question_policy.rb b/app/policies/question_policy.rb
index 225cb79cad..747d305e79 100644
--- a/app/policies/question_policy.rb
+++ b/app/policies/question_policy.rb
@@ -17,8 +17,8 @@ def transition?(to, from = nil)
     return false if from.present? && record.question_state.to_s != from.to_s
     # Don't allow transition if already in the requested state
     return false if record.question_state.to_s == to.to_s
-    # Only the course admins can transition, except for the answered state.
-    return true if to.to_s == 'answered' && record.user == user
+    # Users can transition their own annotations.
+    return true if record.user == user
 
     user&.course_admin?(record.submission.course)
   end
@@ -28,9 +28,6 @@ def update?
     return transition?(record.transition_to, record.transition_from) if transitioning?
 
     # Otherwise, we are updating the text of the annotation.
-    # Only allow if the question was not answered yet.
-    return false unless record.unanswered?
-
     record.user == user
   end
 
diff --git a/app/policies/saved_annotation_policy.rb b/app/policies/saved_annotation_policy.rb
index b8d27d6ac5..77de5f5e8b 100644
--- a/app/policies/saved_annotation_policy.rb
+++ b/app/policies/saved_annotation_policy.rb
@@ -37,7 +37,7 @@ def index?
 
   def create?
     # EDIT AFTER CLOSED BETA
-    record.course_id.present? && user&.course_admin?(record.course) && user_admin_of_beta_course? && record_in_beta_course?
+    record.course_id.present? && user&.course_admin?(record.course) && user_admin_of_beta_course? && record_in_beta_course? && record&.user_id == user.id
   end
 
   def show?
@@ -47,12 +47,12 @@ def show?
 
   def update?
     # EDIT AFTER CLOSED BETA
-    record.user_id == user.id && user_admin_of_beta_course? && record_in_beta_course?
+    record.user_id == user.id && user_admin_of_beta_course? && record_in_beta_course? && record&.user_id == user.id
   end
 
   def destroy?
     # EDIT AFTER CLOSED BETA
-    record.user_id == user.id && user_admin_of_beta_course? && record_in_beta_course?
+    record.user_id == user.id && user_admin_of_beta_course? && record_in_beta_course? && record&.user_id == user.id
   end
 
   def permitted_attributes
diff --git a/app/runners/result_constructor.rb b/app/runners/result_constructor.rb
index 778c867ebb..fb036cd968 100644
--- a/app/runners/result_constructor.rb
+++ b/app/runners/result_constructor.rb
@@ -28,19 +28,34 @@ def initialize(locale)
   def feed(judge_output)
     raise ResultConstructorError, 'No judge output' if judge_output.empty?
 
+    # save the judge output for later validation should the final result be invalid
+    @judge_output = judge_output
+
     split_jsons(judge_output).each do |json|
-      # Required by the gem. See issue below for context.
-      # https://github.com/davishmcclurg/json_schemer/issues/123
-      json_with_string_keys = json.deep_stringify_keys
-      if PART_SCHEMER.valid?(json_with_string_keys)
-        update(json)
-      elsif FULL_SCHEMER.valid?(json_with_string_keys)
-        @result = json
+      if json.key?(:command)
+        begin
+          # Clone the object to have better errors, since the update method
+          # may modify the json hash.
+          update(json.clone)
+        rescue StandardError
+          # We rescue all errors, since the json may have invalid data, resulting
+          # in stuff like TypeErrors, NoMethodErrors or KeyErrors
+
+          # Try to establish if the error was cause by the judge or by dodona
+          if PART_SCHEMER.valid?(json.deep_stringify_keys)
+            raise ResultConstructorError.new(
+              'Dodona encountered an error while processing this valid judge output',
+              json.to_s
+            )
+          else
+            raise ResultConstructorError.new(
+              'Judge output is not a valid json',
+              json.to_s
+            )
+          end
+        end
       else
-        raise ResultConstructorError.new(
-          'Judge output is not a valid json',
-          json.to_s
-        )
+        @result = json
       end
     end
   end
@@ -59,6 +74,24 @@ def result(timeout)
     close_tab(badgeCount: @tab[:badgeCount] || 1) if @level == :tab
     close_judgement(accepted: false, status: status) if @level == :judgement
 
+    # Before finalizing the result, check if it is valid.
+    unless FULL_SCHEMER.valid?(@result.deep_stringify_keys)
+      # If it is not valid, check if a partial result is the problem and try to give a better error message.
+      split_jsons(@judge_output).each do |json|
+        next if PART_SCHEMER.valid?(json.deep_stringify_keys) || FULL_SCHEMER.valid?(json.deep_stringify_keys)
+
+        raise ResultConstructorError.new(
+          'Judge output is not a valid json',
+          json.to_s
+        )
+      end
+
+      raise ResultConstructorError.new(
+        'Constructed result based on judge output is not a valid json',
+        @result.to_s
+      )
+    end
+
     @result
   end
 
@@ -116,15 +149,18 @@ def append_message(message: nil)
   end
 
   def annotate_code(values)
-    (@judgement[:annotations] ||= []) << {
+    annotation = {
       text: values[:text] || '',
       type: values[:type] || 'info',
       row: values[:row] || 0,
-      rows: values[:rows] || 1,
-      column: values[:column] || 0,
-      columns: values[:columns] || 1,
-      externalUrl: values[:externalUrl] || nil
+      rows: values[:rows] || 1
     }
+
+    annotation[:column] = values[:column] unless values[:column].nil?
+    annotation[:columns] = values[:columns] unless values[:columns].nil?
+    annotation[:externalUrl] = values[:externalUrl] unless values[:externalUrl].nil?
+
+    (@judgement[:annotations] ||= []) << annotation
   end
 
   def escalate_status(status: nil)
diff --git a/app/views/activities/show.html.erb b/app/views/activities/show.html.erb
index c6f323ffe7..855ecacab3 100644
--- a/app/views/activities/show.html.erb
+++ b/app/views/activities/show.html.erb
@@ -115,9 +115,9 @@ end %>
                 </div>
               <% end %>
               <% if !@edit_submission && !@solution && @last_submission %>
-                <div class="alert alert-info" id="restore-boilerplate">
+                <div class="callout callout-info mt-0" id="restore-boilerplate">
                   <%= t ".preloaded_info" %>
-                  <a >
+                  <a class="link-primary">
                     <%= t(@activity.boilerplate ? ".preloaded_restore" : ".preloaded_clear") %>
                   </a>
                 </div>
diff --git a/app/views/activity_read_states/_read_states_table.html.erb b/app/views/activity_read_states/_read_states_table.html.erb
index 84c7534d40..c39303c40b 100644
--- a/app/views/activity_read_states/_read_states_table.html.erb
+++ b/app/views/activity_read_states/_read_states_table.html.erb
@@ -18,7 +18,7 @@
         <% if @user.nil? && (current_user.admin? || current_user.administrating_courses.any?) %>
           <td>
             <% unless @activity.present? %>
-              <d-filter-icon title="<%= t('.filter-by-user') %>" value="<%= read_state.user.full_name %>"></d-filter-icon>
+              <d-filter-icon icon-title="<%= t('.filter-by-user') %>" value="<%= read_state.user.full_name %>"></d-filter-icon>
             <% end %>
             <% if read_state.course.nil? %>
               <%= read_state.user.full_name %>
@@ -29,7 +29,7 @@
         <% end %>
         <% unless @activity.present? %>
           <td>
-            <d-filter-icon title="<%= t('.filter-by-exercise') %>" value="<%= read_state.activity.name %>"></d-filter-icon>
+            <d-filter-icon icon-title="<%= t('.filter-by-exercise') %>" value="<%= read_state.activity.name %>"></d-filter-icon>
             <% if read_state.course.nil? %>
               <%= link_to read_state.activity.name, activity_path(read_state.activity) %>
             <% else %>
diff --git a/app/views/annotations/_annotation.json.jbuilder b/app/views/annotations/_annotation.json.jbuilder
index 37a9224983..9534645e44 100644
--- a/app/views/annotations/_annotation.json.jbuilder
+++ b/app/views/annotations/_annotation.json.jbuilder
@@ -1,4 +1,5 @@
-json.extract! annotation, :id, :line_nr, :annotation_text, :user_id, :submission_id, :saved_annotation_id, :created_at, :updated_at, :course_id
+json.extract! annotation, :id, :line_nr, :annotation_text, :user_id, :submission_id, :saved_annotation_id, :created_at, :updated_at, :course_id, :column, :rows, :columns
+json.row annotation.line_nr || 0
 if annotation.is_a?(Question)
   json.extract! annotation, :question_state
   json.newer_submission_url(annotation.newer_submission&.then { |s| submission_url(s) })
@@ -25,6 +26,7 @@ end
 json.permission do
   json.update policy(annotation).update?
   json.destroy policy(annotation).destroy?
+  json.save SavedAnnotationPolicy.new(current_user, annotation).create?
   json.transition do
     Question.question_states.each_key do |state|
       json.set! state, policy(annotation).transition?(state)
@@ -34,3 +36,8 @@ json.permission do
 end
 json.released AnnotationPolicy.new(annotation.submission.user, annotation).show?
 json.type annotation.type&.downcase
+
+json.responses annotation.responses do |response|
+  json.partial! response, as: :annotation
+end
+json.thread_root_id annotation.thread_root_id
diff --git a/app/views/annotations/_questions_table.html.erb b/app/views/annotations/_questions_table.html.erb
index ac3c1105af..45bfeeeb51 100644
--- a/app/views/annotations/_questions_table.html.erb
+++ b/app/views/annotations/_questions_table.html.erb
@@ -1,81 +1,74 @@
-<% content_for :javascripts do %>
-  <%= javascript_include_tag 'questions' %>
-<% end %>
-
-<div class="table-scroll-wrapper">
-  <table class="table table-resource question-index-table" id="question-container">
-    <colgroup>
-      <col class="name"/>
-      <col/>
-      <col class="status" />
-      <col class="age"/>
-      <col class="actions"/>
-      <col class="view"/>
-    </colgroup>
-    <tbody>
-    <% questions.each do |question| %>
-      <tr>
-        <td>
-          <d-filter-icon title="<%= t('questions.question.filter-by-user') %>" value="<%= question.user.full_name %>"></d-filter-icon>
-          <%= link_to question.user.full_name, course_member_path(question.submission.course, question.user), title: question.user.full_name, class: "ellipsis-overflow" %>
+<table class="table question-table">
+  <colgroup>
+    <col class="name"/>
+    <col class="question"/>
+    <col class="age d-none d-md-table-column"/>
+    <col class="actions"/>
+  </colgroup>
+  <tbody>
+  <% questions.each do |question| %>
+    <tr class="selection-row" data-href="<%= submission_url(question.submission, anchor: 'code') %>">
+      <td>
+        <div class="ellipsis-overflow" title="<%= question.user.full_name %>">
           <% unless @course.present? %>
-          <div class="ellipsis-overflow text-muted icon-indent">
-            <d-filter-button param="course_id" value="<%= question.submission.course.id %>" title="<%= question.submission.course.name %>">
-                <%= question.submission.course.name %>
-            </d-filter-button>
-          </div>
+            <d-filter-icon icon-title="<%= t('questions.question.filter-by-user') %>" value="<%= question.user.full_name %>" class="d-none d-md-inline"></d-filter-icon>
           <% end %>
-        </td>
-        <td>
-          <d-filter-icon title="<%= t('questions.question.filter-by-exercise') %>" value="<%= question.submission.exercise.name %>"></d-filter-icon>
-            <%= link_to question.submission.exercise.name, course_exercise_path(question.submission.course, question.submission.exercise) %>
-          <div class="ellipsis-overflow text-muted icon-indent">
-            <%= question.question_text %>
+          <%= question.user.full_name %>
+        </div>
+        <% unless @course.present? %>
+          <div class="ellipsis-overflow text-muted icon-indent" title="<%= question.submission.course.name %>">
+            <%= question.submission.course.name %>
           </div>
-        </td>
-        <td>
-          <% status = Question.human_enum_name(:question_state, question.question_state) %>
-          <d-filter-button title="<%= status %>" param="question_state" value="<%= question.question_state %>">
-            <%= t "courses.questions.last_edited_by.#{question.question_state}", who: question.last_updated_by.full_name %>
-          </d-filter-button>
-        </td>
-        <td>
-          <span title="<%= l question.created_at, format: :question %>">
-            <%= t "courses.questions.ago", when: time_ago_in_words(question.created_at) %>
-          </span>
-        </td>
-        <td class="actions">
+        <% end %>
+      </td>
+      <td>
+        <div class="ellipsis-overflow" title="<%= question.submission.exercise.name %>">
+          <% unless @course.present? %>
+            <d-filter-icon icon-title="<%= t('questions.question.filter-by-exercise') %>" value="<%= question.submission.exercise.name %>" class="d-none d-md-inline"></d-filter-icon>
+          <% end %>
+          <%= question.submission.exercise.name %>
+        </div>
+        <div class="ellipsis-overflow text-muted <%= "icon-indent" unless @course.present? %>">
+          <%= question.question_text %>
+        </div>
+      </td>
+      <td class="d-none d-md-table-cell">
+        <span title="<%= l question.created_at, format: :question %>">
+          <%= t "courses.questions.ago", when: time_ago_in_words(question.created_at) %>
+        </span>
+        <div class="text-muted ellipsis-overflow">
+          <%= t "courses.questions.last_edited_by.#{question.question_state}", who: question.last_updated_by.full_name %>
+        </div>
+      </td>
+      <td class="actions">
+        <a class="btn btn-icon btn-icon-muted dropdown-toggle" data-bs-toggle="dropdown" data-question-id="<%= question.id %>">
+          <i class="mdi mdi-dots-horizontal text-muted"></i>
+        </a>
+        <ul class="dropdown-menu dropdown-menu-end">
           <% if policy(question).transition?(:unanswered) %>
-            <%= link_to annotation_path(question), data: { from: question.question_state, to: :unanswered }, class: 'btn btn-icon state-changer' do %>
-              <i class="mdi mdi-restart" title="<%= t('courses.questions.buttons.to_unresolved') %>"></i>
-            <% end %>
+            <li>
+              <%= link_to annotation_path(question), data: { from: question.question_state, to: :unanswered }, class: 'dropdown-item state-changer' do %>
+                <i class="mdi mdi-restart"></i> <%= t('courses.questions.buttons.to_unresolved') %>
+              <% end %>
+            </li>
           <% end %>
           <% if policy(question).transition?(:in_progress) && !question.answered? %>
-            <%= link_to annotation_path(question), data: { from: question.question_state, to: :in_progress }, class: 'btn btn-icon state-changer' do %>
-              <i class="mdi mdi-comment-processing-outline" title="<%= t('courses.questions.buttons.to_in_progress') %>"></i>
-            <% end %>
+            <li>
+              <%= link_to annotation_path(question), data: { from: question.question_state, to: :in_progress }, class: 'dropdown-item state-changer' do %>
+                <i class="mdi mdi-comment-processing-outline"></i> <%= t('courses.questions.buttons.to_in_progress') %>
+              <% end %>
+            </li>
           <% end %>
           <% if policy(question).transition?(:answered) %>
-            <%= link_to annotation_path(question), data: { from: question.question_state, to: :answered }, class: 'btn btn-icon state-changer' do %>
-              <i class="mdi mdi-check" title="<%= t('courses.questions.buttons.to_resolved') %>"></i>
-            <% end %>
-          <% end %>
-        </td>
-        <td>
-          <%= link_to submission_path(question.submission, anchor: 'code'), title: t("questions.question.view"), 'data-submission_id': question.submission.id do %>
-            <i class="mdi mdi-chevron-right"></i>
+            <li>
+              <%= link_to annotation_path(question), data: { from: question.question_state, to: :answered }, class: 'dropdown-item state-changer' do %>
+                <i class="mdi mdi-check"></i> <%= t('courses.questions.buttons.to_resolved') %>
+              <% end %>
+            </li>
           <% end %>
-        </td>
-      </tr>
-    <% end %>
-    </tbody>
-  </table>
-</div>
-<% if questions.try(:total_pages) %>
-  <center><%= page_navigation_links questions, true, "annotations", {}, 'question_index' %></center>
-<% end %>
-<script type="text/javascript">
-    dodona.ready.then(function () {
-        new window.dodona.questionTable("<%= questions_path %>");
-    });
-</script>
+        </ul>
+      </td>
+    </tr>
+  <% end %>
+  </tbody>
+</table>
diff --git a/app/views/annotations/_questions_table_with_pagination.html.erb b/app/views/annotations/_questions_table_with_pagination.html.erb
new file mode 100644
index 0000000000..8d568e6ce2
--- /dev/null
+++ b/app/views/annotations/_questions_table_with_pagination.html.erb
@@ -0,0 +1,4 @@
+<%= render partial: 'questions_table', locals: { questions: questions } %>
+<% if questions.try(:total_pages) %>
+  <center><%= page_navigation_links questions, true, "annotations", {}, 'question_index' %></center>
+<% end %>
diff --git a/app/views/annotations/question_index.html.erb b/app/views/annotations/question_index.html.erb
index 95a47f63cf..cd2b08c4aa 100644
--- a/app/views/annotations/question_index.html.erb
+++ b/app/views/annotations/question_index.html.erb
@@ -1,3 +1,7 @@
+<% content_for :javascripts do %>
+  <%= javascript_include_tag 'questions' %>
+<% end %>
+
 <div class="row">
   <div class="col-12">
     <div class="card">
@@ -16,17 +20,22 @@
           </span>
         </h2>
       </div>
-      <div class="card-supporting-text" id="refresh-element">
+      <div class="card-supporting-text" id="question-container">
         <% actions = [] %>
         <% if current_user&.a_course_admin? %>
           <% actions << { text: t('questions.index.watch'), search: { refresh: true }, click: 'window.dodona.toggleIndexReload()' } %>
           <% actions << { text: t('questions.index.everything'), search: { everything: true } } if @unfiltered %>
         <% end %>
-        <%= render partial: 'layouts/searchbar', locals: { actions: actions, refresh_element: "#refresh-element", courses: @courses, question_states: Question.question_states.keys } %>
+        <%= render partial: 'layouts/searchbar', locals: { actions: actions, refresh_element: "#question-container", courses: @courses, question_states: Question.question_states.keys } %>
         <div id="questions-table-wrapper">
-          <%= render partial: 'questions_table', locals: { questions: @questions } %>
+          <%= render partial: 'questions_table_with_pagination', locals: { questions: @questions } %>
         </div>
       </div>
     </div>
   </div>
 </div>
+<script type="text/javascript">
+  dodona.ready.then(function () {
+    new window.dodona.questionTable("<%= questions_path %>", true);
+  });
+</script>
diff --git a/app/views/annotations/question_index.js.erb b/app/views/annotations/question_index.js.erb
index 0a1ce1e060..ea3fa12498 100644
--- a/app/views/annotations/question_index.js.erb
+++ b/app/views/annotations/question_index.js.erb
@@ -1 +1 @@
-$("#questions-table-wrapper").html("<%= escape_javascript(render partial: 'questions_table', locals: {questions: @questions}) %>");
+$("#questions-table-wrapper").html("<%= escape_javascript(render partial: 'questions_table_with_pagination', locals: {questions: @questions}) %>");
diff --git a/app/views/courses/_question_table.html.erb b/app/views/courses/_question_table.html.erb
index 859b0227d1..fe407f23c3 100644
--- a/app/views/courses/_question_table.html.erb
+++ b/app/views/courses/_question_table.html.erb
@@ -1,56 +1,5 @@
 <% if questions.present? %>
-  <div class="table-scroll-wrapper">
-    <table class="table question-table">
-      <colgroup>
-        <col class="name"/>
-        <col class="question"/>
-        <col class="age"/>
-        <col class="actions"/>
-      </colgroup>
-      <tbody>
-      <% questions.each do |question| %>
-        <tr class="selection-row" data-href="<%= submission_url(question.submission, anchor: 'code') %>">
-          <td>
-            <%= question.user.full_name %>
-          </td>
-          <td>
-            <%= question.submission.exercise.name %>
-            <div class="ellipsis-overflow text-muted">
-              <%= question.question_text %>
-            </div>
-          </td>
-          <td>
-            <span title="<%= l question.created_at, format: :question %>">
-              <%= t "courses.questions.ago", when: time_ago_in_words(question.created_at) %>
-            </span>
-            <% unless question.unanswered? %>
-              <div class="text-muted ellipsis-overflow">
-                <%= t "courses.questions.last_edited_by.#{question.question_state}", who: question.last_updated_by.full_name %>
-              </div>
-            <% end %>
-          </td>
-          <td class="actions">
-            <% if policy(question).transition?(:unanswered) %>
-              <%= link_to annotation_path(question), data: { from: question.question_state, to: :unanswered }, class: 'btn btn-icon state-changer' do %>
-                <i class="mdi mdi-restart" title="<%= t('courses.questions.buttons.to_unresolved') %>"></i>
-              <% end %>
-            <% end %>
-            <% if policy(question).transition?(:in_progress) && !question.answered? %>
-              <%= link_to annotation_path(question), data: { from: question.question_state, to: :in_progress }, class: 'btn btn-icon state-changer' do %>
-                <i class="mdi mdi-comment-processing-outline" title="<%= t('courses.questions.buttons.to_in_progress') %>"></i>
-              <% end %>
-            <% end %>
-            <% if policy(question).transition?(:answered) %>
-              <%= link_to annotation_path(question), data: { from: question.question_state, to: :answered }, class: 'btn btn-icon state-changer' do %>
-                <i class="mdi mdi-check" title="<%= t('courses.questions.buttons.to_resolved') %>"></i>
-              <% end %>
-            <% end %>
-          </td>
-        </tr>
-      <% end %>
-      </tbody>
-    </table>
-  </div>
+  <%= render partial: "annotations/questions_table", locals: { questions: questions } %>
 <% else %>
   <%= t("courses.questions.no_questions.#{state}") %>
 <% end %>
diff --git a/app/views/courses/_reload_users.js.erb b/app/views/courses/_reload_users.js.erb
index a96289eb36..b4111cc079 100644
--- a/app/views/courses/_reload_users.js.erb
+++ b/app/views/courses/_reload_users.js.erb
@@ -4,4 +4,4 @@
 <% end %>
 <% count = @course.pending_members.count %>
 $("#pending-count").text('<%= count if count.nonzero? %>');
-dodona.searchQuery.search();
+dodona.search.search();
diff --git a/app/views/evaluations/refresh_users.js.erb b/app/views/evaluations/refresh_users.js.erb
index 5065ce20d0..973260cc4b 100644
--- a/app/views/evaluations/refresh_users.js.erb
+++ b/app/views/evaluations/refresh_users.js.erb
@@ -1,3 +1,3 @@
-window.dodona.searchQuery.search();
+window.dodona.search.search();
 $('#users-count-wrapper').html("<%= t('evaluations.edit_users.users_selected_html', count: @evaluation.users.count) %>")
 $('#short-users-count-wrapper').text("<%= t('evaluations.edit_users.short_users_selected', count: @evaluation.users.count) %>")
diff --git a/app/views/feedbacks/show.html.erb b/app/views/feedbacks/show.html.erb
index 12a9aea6e7..a9381fc701 100644
--- a/app/views/feedbacks/show.html.erb
+++ b/app/views/feedbacks/show.html.erb
@@ -91,9 +91,8 @@
 <% if @feedback.submission.present? %>
   <script>
       dodona.ready.then(function () {
-        window.MathJax.startup.promise.then(() => {
-          window.dodona.codeListing.setEvaluation(<%= @feedback.evaluation.id %>);
-        });
+        window.dodona.setEvaluationId(<%= @feedback.evaluation.id %>);
+        window.dodona.setAnnotationVisibility("important");
         $(".nav.nav-tabs li:last-child a").tab("show");
       });
   </script>
diff --git a/app/views/layouts/_searchbar.html.erb b/app/views/layouts/_searchbar.html.erb
index 6d4503b597..b76dc951d4 100644
--- a/app/views/layouts/_searchbar.html.erb
+++ b/app/views/layouts/_searchbar.html.erb
@@ -181,13 +181,13 @@
             };
         <% end %>
 
-        dodona.searchQuery.setRefreshElement("<%= local_assigns.fetch :refresh_element, "" %>");
+        dodona.search.setRefreshElement("<%= local_assigns.fetch :refresh_element, "" %>");
 
         // load the given localStorageKey if present. This key is used to retrieve the values stored in localStorage
         const localStorageKey = "<%= local_assigns.fetch :local_storage_key, "" %>"
-        dodona.searchQuery.setBaseUrl("<%= local_assigns.fetch :baseUrl, "" %>");
-        dodona.searchQuery.autoSearch = <%= local_assigns.fetch :autoSearch, true %>;
-        dodona.searchQuery.setLocalStorageKey(localStorageKey);
+        dodona.search.setBaseUrl("<%= local_assigns.fetch :baseUrl, "" %>");
+        dodona.search.autoSearch = <%= local_assigns.fetch :autoSearch, true %>;
+        dodona.search.setLocalStorageKey(localStorageKey);
 
         const searchFields = Array.from(document.getElementsByTagName("d-search-field"));
         searchFields.forEach( searchField => {
diff --git a/app/views/pages/home.html.erb b/app/views/pages/home.html.erb
index ef6ce1d562..6eaca505be 100644
--- a/app/views/pages/home.html.erb
+++ b/app/views/pages/home.html.erb
@@ -54,6 +54,6 @@
 <script type="text/javascript">
     dodona.ready.then(function () {
         dodona.initFavoriteButtons();
-        dodona.searchQuery.autoSearch = true;
+        dodona.search.autoSearch = true;
     });
 </script>
diff --git a/app/views/submissions/_submission.html.erb b/app/views/submissions/_submission.html.erb
index 6d476dbd01..c9939d23b5 100644
--- a/app/views/submissions/_submission.html.erb
+++ b/app/views/submissions/_submission.html.erb
@@ -14,7 +14,7 @@
   </td>
   <% if user.nil? && (current_user.admin? || current_user.administrating_courses.any?) %>
     <td>
-      <d-filter-icon title="<%= t('.filter-submissions-by-user') %>" value="<%= submission.user.full_name %>"></d-filter-icon>
+      <d-filter-icon icon-title="<%= t('.filter-submissions-by-user') %>" value="<%= submission.user.full_name %>"></d-filter-icon>
       <% if submission.course.nil? %>
         <%= submission.user.full_name %>
       <% else %>
@@ -24,7 +24,7 @@
   <% end %>
   <% if !exercise %>
     <td>
-      <d-filter-icon title="<%= t('.filter-submissions-by-exercise') %>" value="<%= submission.exercise.name %>"></d-filter-icon>
+      <d-filter-icon icon-title="<%= t('.filter-submissions-by-exercise') %>" value="<%= submission.exercise.name %>"></d-filter-icon>
       <% if submission.course.nil? %>
         <%= link_to submission.exercise.name, activity_path(submission.exercise) %>
       <% else %>
diff --git a/app/views/submissions/show.html.erb b/app/views/submissions/show.html.erb
index e382d983bf..8154a01bac 100644
--- a/app/views/submissions/show.html.erb
+++ b/app/views/submissions/show.html.erb
@@ -16,7 +16,7 @@
         <%= render partial: 'description', locals: {submission: @submission} %>
         <script>
           dodona.ready.then(() => {
-            <%# Python judge has a code tab with href="#code-n" where n is the
+            <%# Python judge has a code tab with href="#tab-code-n" where n is the
                 number of tabs and for the other judges it is "#code-tab", so we
                 can't generically handle code tabs, except for selecting the last
                 tab. %>
diff --git a/bin/hotfix b/bin/hotfix
new file mode 100755
index 0000000000..29f826e700
--- /dev/null
+++ b/bin/hotfix
@@ -0,0 +1,82 @@
+#!/usr/bin/env bash
+# exit when any command fails
+set -e
+# keep track of the last executed command
+current_command=$BASH_COMMAND
+last_command=$current_command
+trap 'last_command=$current_command; current_command=$BASH_COMMAND' DEBUG
+# echo an error message before exiting
+trap '[ $? -eq 0 ] || echo "\"${last_command}\" command failed with exit code $?."' EXIT
+
+if [ "$#" -lt 2 ]
+then
+  >&2 echo "Expected at least two arguments"
+  >&2 echo "usage \`bin/hotfix [version] [cherry_pick_args]\`"
+  >&2 echo "version should be of the format MAJOR.MINOR.PATCH"
+  >&2 echo "example \`bin/hotfix 5.6.4 -m 1 47d6721\`"
+  exit 1
+fi
+
+# first and only argument is version
+version=$1
+# Other arguments are provided to cherry-pick
+cherry_pick_args=("${@:2}")
+
+# get major, minor and patch as an array
+readarray -d . -t version_array< <(printf '%s' "$version")
+
+if [ "${#version_array[@]}" -ne 3 ]
+then
+  >&2 echo "expected version to contain major minor and patch"
+  >&2 echo "usage \`bin/hotfix [version] [cherry_pick_args]\`"
+  >&2 echo "version should be of the format MAJOR.MINOR.PATCH"
+  >&2 echo "example \`bin/hotfix 5.6.4 -m 1 47d6721\`"
+  exit 1
+fi
+
+# Make sure you have the latest commits
+git checkout master
+git pull
+git checkout develop
+git pull
+
+# Start release
+git flow hotfix start "$version"
+
+# Cherry-pick commits
+git cherry-pick "${cherry_pick_args[@]}"
+
+
+sed -i "s/MAJOR = [0-9]\+/MAJOR = ${version_array[0]}/g" config/initializers/00_version.rb
+sed -i "s/MINOR = [0-9]\+/MINOR = ${version_array[1]}/g" config/initializers/00_version.rb
+sed -i "s/PATCH = [0-9]\+/PATCH = ${version_array[2]}/g" config/initializers/00_version.rb
+git commit -am "Bump version"
+
+# Double check that all tests succeed
+bundle install
+yarn install
+bin/rake css:build # Build css before testing
+bin/rake javascript:build # Build javascript before testing
+bundle exec rails test
+bundle exec rails test:system
+yarn test
+
+# Finish release
+git flow hotfix finish "$version"
+
+# Allow abort before push
+echo -n "Next step will push, press A to abort, any key to continue"
+read -r confirm
+if [ "$confirm" == "A" ] || [ "$confirm" == "a" ]
+then
+  exit
+fi
+
+# Push local changes
+git push
+git checkout master
+git push
+git push --tags
+
+# Deploy
+cap production deploy
diff --git a/config/deploy/mestra.rb b/config/deploy/mestra.rb
index dd9cd11c87..a1f21d3998 100644
--- a/config/deploy/mestra.rb
+++ b/config/deploy/mestra.rb
@@ -20,9 +20,9 @@
   before :restart, :reset_db do
     on roles(:web) do
       within release_path do
-        execute :rm, '-r', 'data/exercises/*'
-        execute :rm, '-r', 'data/judges/*'
-        execute :rm, '-r', 'data/storage/*'
+        execute :rm, '-rf', 'data/exercises/*'
+        execute :rm, '-rf', 'data/judges/*'
+        execute :rm, '-rf', 'data/storage/*'
         execute :rake, 'db:reset'
       end
     end
diff --git a/config/initializers/00_version.rb b/config/initializers/00_version.rb
index db9e8d6af9..469f32ff08 100644
--- a/config/initializers/00_version.rb
+++ b/config/initializers/00_version.rb
@@ -2,8 +2,8 @@ module Dodona
   class Application
     module Version
       MAJOR = 6
-      MINOR = 7
-      PATCH = 4
+      MINOR = 8
+      PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].compact.join('.')
     end
diff --git a/config/locales/js/en.yml b/config/locales/js/en.yml
index 01aaa34cd0..f5bf3d67f9 100644
--- a/config/locales/js/en.yml
+++ b/config/locales/js/en.yml
@@ -147,23 +147,26 @@ en:
       meta: "%{user} · %{time}"
       anonymous_message: 'This comment is part of an evaluation'
       send: 'Comment'
+      reply: 'Reply'
       update: 'Update'
       cancel: 'Cancel'
       delete: 'Delete'
       edit: 'Edit comment'
       save: 'Save comment'
       help: 'Press Shift + Enter to send. <a href="https://docs.dodona.be/en/references/exercise-description/#markdown" target="_blank">Markdown</a> is supported.'
-      help_student: "Follow our guide in <a href='https://docs.dodona.be/en/guides/students/exercises/#interpreteren-van-feedback'>the documentation</a> to learn how you can ask questions in Dodona and more!"
+      help_student: "<a href='https://docs.dodona.be/nl/guides/students/exercises/#vragen-stellen'>Our guide</a> provides more information about asking questions."
       fields:
         annotation_text: 'Comment'
         saved_annotation_title: 'Save comment for reuse'
       delete_confirm: 'Are you sure you want to delete this comment?'
       not_released: This comment is not yet visible for students
     user_question:
+      or: or
       meta_unanswered: "%{user} · %{time} · %{state}"
       meta_else: "%{user} · %{time} · %{state} by %{last}"
       update: 'Update question'
       send: 'Ask question'
+      reply: 'Reply'
       edit: 'Edit question'
       delete_confirm: 'Are you sure you want to delete this question?'
       resolve: 'Mark as answered'
@@ -172,6 +175,9 @@ en:
       deleted: This question was deleted by another user
       conflict: The status of this question was already changed by another user
       has_newer_submission: There was a newer submission since this question. Click here to go to the latest submission.
+      is_in_progress: This question is currently being answered.
+      is_unanswered: This question is unanswered.
+      is_answered: This question is answered.
     machine_annotation:
       external_url: more information
     score:
@@ -296,4 +302,17 @@ en:
         key: ".singular |||| .plural"
         singular: "One user has completed one activity |||| %{smart_count} users have completed one activity"
         plural: "One user has completed %{index} activities |||| %{smart_count} users have completed %{index} activities"
+    annotations:
+      options:
+        add_global_annotation: Add global comment
+        add_global_question: "Ask a question about your code"
+        add_annotation: Add a comment to this line
+        add_question: "Ask a question about this line"
+        add_annotation_for_selection: Add a comment
+        add_question_for_selection: "Ask a question"
+      toggles:
+        title: Annotations
+        show_all: Show all annotations
+        hide_all: Hide all annotations
+        show_errors: Only show errors
 
diff --git a/config/locales/js/nl.yml b/config/locales/js/nl.yml
index f81c053280..45fe793459 100644
--- a/config/locales/js/nl.yml
+++ b/config/locales/js/nl.yml
@@ -147,23 +147,26 @@ nl:
       meta: "%{user} · %{time}"
       anonymous_message: 'Deze opmerking maakt deel uit van een evaluatie'
       send: 'Toevoegen'
+      reply: 'Reageer'
       update: 'Updaten'
       cancel: 'Annuleren'
       delete: 'Verwijderen'
       edit: 'Opmerking bewerken'
       save: 'Opmerking opslaan'
       help: 'Druk Shift + Enter om te verzenden. <a href="https://docs.dodona.be/nl/references/exercise-description/#markdown" target="_blank">Markdown</a> wordt ondersteund.'
-      help_student: "Volg onze handleiding in <a href='https://docs.dodona.be/nl/guides/students/exercises/#interpreteren-van-feedback'>de documentatie</a> om te weten te komen hoe je vragen kunt stellen in Dodona en meer!"
+      help_student: "<a href='https://docs.dodona.be/nl/guides/students/exercises/#vragen-stellen'>Onze handleiding</a> bevat meer informatie over het stellen van vragen."
       fields:
         annotation_text: 'Opmerking'
         saved_annotation_title: 'Sla opmerking op om te hergebruiken'
       delete_confirm: 'Ben je zeker dat je deze opmerking wil verwijderen?'
       not_released: Deze opmerking is nog niet zichtbaar voor studenten
     user_question:
+      or: of
       meta_unanswered: "%{user} · %{time} · %{state}"
       meta_else: "%{user} · %{time} · %{state} door %{last}"
       update: 'Vraag aanpassen'
       send: 'Vraag stellen'
+      reply: 'Beantwoorden'
       edit: 'Vraag aanpassen'
       delete_confirm: 'Ben je zeker dat je deze vraag wilt verwijderen?'
       resolve: 'Als beantwoord markeren'
@@ -172,6 +175,9 @@ nl:
       deleted: Deze vraag is verwijderd door een andere gebruiker
       conflict: De status van deze vraag is al aangepast door een andere gebruiker
       has_newer_submission: Er is een nieuwe oplosssing ingediend sinds deze vraag. Klik hier om naar de nieuwste oplossing te gaan.
+      is_in_progress: Deze vraag wordt momenteel beantwoord.
+      is_unanswered: Deze vraag is nog niet beantwoord.
+      is_answered: Deze vraag is beantwoord.
     machine_annotation:
         external_url: meer informatie
     score:
@@ -296,3 +302,18 @@ nl:
         key: ".singular |||| .plural"
         singular: "Eén gebruiker heeft één oefening correct opgelost |||| %{smart_count} gebruikers hebben één oefening correct opgelost"
         plural: "Eén gebruiker heeft %{index} oefeningen correct opgelost |||| %{smart_count} gebruikers hebben %{index} oefeningen correct opgelost"
+    annotations:
+      options:
+        add_global_annotation: Globale opmerking toevoegen
+        add_global_question: "Stel een vraag over je code"
+        add_annotation: Voeg een opmerking toe aan deze regel
+        add_question: "Stel een vraag over deze regel"
+        add_annotation_for_selection: Voeg een opmerking toe
+        add_question_for_selection: "Stel een vraag"
+      toggles:
+        title: Annotaties
+        show_all: Toon alle annotaties
+        hide_all: Verberg alle annotaties
+        show_errors: Enkel errors en opmerkingen tonen
+
+
diff --git a/config/locales/views/activities/en.yml b/config/locales/views/activities/en.yml
index 2d7ec551f3..35ae41da10 100644
--- a/config/locales/views/activities/en.yml
+++ b/config/locales/views/activities/en.yml
@@ -96,7 +96,7 @@ en:
       read_at: "Marked as read on %{timestamp}"
       preloaded_info: "We have preloaded your latest submission into the editor."
       preloaded_clear: Clear editor.
-      preloaded_restore: Restore the boilerplate code.
+      preloaded_restore: Restore the initial code.
     series_activities_add_table:
       course_added_to_usable: "Adding this exercise will allow this course to use all of the private exercises in this exercise's repository. Are you sure?"
     edit:
diff --git a/config/locales/views/activities/nl.yml b/config/locales/views/activities/nl.yml
index 4ead22cf5d..2b5d2f1117 100644
--- a/config/locales/views/activities/nl.yml
+++ b/config/locales/views/activities/nl.yml
@@ -96,7 +96,7 @@ nl:
       read_at: "Gelezen op %{timestamp}"
       preloaded_info: We hebben jouw laatste oplossing ingeladen in de editor.
       preloaded_clear: Maak de editor leeg.
-      preloaded_restore: Herstel de boilerplate-code.
+      preloaded_restore: Zet de voorbeeldcode terug.
     series_activities_add_table:
       course_added_to_usable: "Deze oefening toevoegen zal deze cursus toegang geven tot alle privé oefeningen in de repository van deze oefening. Ben je zeker?"
     edit:
diff --git a/db/migrate/20230210122730_add_thread_root_id_to_annotations.rb b/db/migrate/20230210122730_add_thread_root_id_to_annotations.rb
new file mode 100644
index 0000000000..ce264ed096
--- /dev/null
+++ b/db/migrate/20230210122730_add_thread_root_id_to_annotations.rb
@@ -0,0 +1,5 @@
+class AddThreadRootIdToAnnotations < ActiveRecord::Migration[7.0]
+  def change
+    add_column :annotations, :thread_root_id, :integer, null: true, default: nil
+  end
+end
diff --git a/db/migrate/20230425073306_add_range_to_annotations.rb b/db/migrate/20230425073306_add_range_to_annotations.rb
new file mode 100644
index 0000000000..7bbf69c489
--- /dev/null
+++ b/db/migrate/20230425073306_add_range_to_annotations.rb
@@ -0,0 +1,7 @@
+class AddRangeToAnnotations < ActiveRecord::Migration[7.0]
+  def change
+    add_column :annotations, :column, :integer, default: nil
+    add_column :annotations, :rows, :integer, default: 1, null: false
+    add_column :annotations, :columns, :integer, default: nil
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
index e61f78d064..65a39c7024 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema[7.0].define(version: 2023_02_13_084858) do
+ActiveRecord::Schema[7.0].define(version: 2023_04_25_073306) do
   create_table "active_storage_attachments", charset: "utf8mb4", collation: "utf8mb4_unicode_ci", force: :cascade do |t|
     t.string "name", null: false
     t.string "record_type", null: false
@@ -124,6 +124,10 @@
     t.integer "last_updated_by_id", null: false
     t.integer "course_id", null: false
     t.bigint "saved_annotation_id"
+    t.integer "thread_root_id"
+    t.integer "column"
+    t.integer "rows", default: 1, null: false
+    t.integer "columns"
     t.index ["course_id", "type", "question_state"], name: "index_annotations_on_course_id_and_type_and_question_state"
     t.index ["evaluation_id"], name: "index_annotations_on_evaluation_id"
     t.index ["last_updated_by_id"], name: "index_annotations_on_last_updated_by_id"
diff --git a/db/seeds.rb b/db/seeds.rb
index e43d7a3ccb..b62c99253c 100644
--- a/db/seeds.rb
+++ b/db/seeds.rb
@@ -273,6 +273,7 @@ def fill_series_with_realistic_submissions(s)
   puts "Create & clone activity repository (#{Time.now - start})"
   Delayed::Worker.delay_jobs = ->(job) { 'git' != job.queue }
   activity_repo = Repository.create name: 'Example Python Activities', remote: 'git@github.com:dodona-edu/example-exercises.git', judge: python_judge, allowed_courses: courses, featured: true
+  puts activity_repo.errors.full_messages unless activity_repo.valid?
   activity_repo.process_activities
 
   big_activity_repo = Repository.create name: 'A lot of python activities', remote: 'git@github.com:dodona-edu/example-exercises.git', judge: python_judge, allowed_courses: courses
diff --git a/jest.config.js b/jest.config.js
index 7f6db93042..48412c657a 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -17,5 +17,4 @@ module.exports = {
     ],
     transformIgnorePatterns: ["node_modules/?!(d3)"],
     collectCoverageFrom: ["app/assets/javascripts/**/*.{js,ts}"],
-    collectCoverage: true,
 };
diff --git a/package.json b/package.json
index aed903fff2..4bea8a68ab 100644
--- a/package.json
+++ b/package.json
@@ -12,11 +12,11 @@
     "test:system:coverage:merge": "nyc merge ./coverage/system-js  ./coverage/coverage.json"
   },
   "dependencies": {
-    "@babel/core": "^7.21.3",
+    "@babel/core": "^7.21.8",
     "@babel/plugin-proposal-decorators": "^7.21.0",
-    "@babel/plugin-transform-runtime": "^7.21.0",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-typescript": "^7.21.0",
+    "@babel/plugin-transform-runtime": "^7.21.4",
+    "@babel/preset-env": "^7.21.5",
+    "@babel/preset-typescript": "^7.21.5",
     "@dodona/papyros": "^1.0.1",
     "@popperjs/core": "^2.11.7",
     "@rails/activestorage": "^7.0.4",
@@ -27,25 +27,26 @@
     "babel-plugin-macros": "^3.1.0",
     "bootstrap": "5.2.0",
     "clipboard": "^2.0.11",
-    "core-js": "^3.29.1",
-    "d3": "^7.8.3",
+    "core-js": "^3.30.2",
+    "d3": "^7.8.4",
     "dayjs": "^1.11.7",
     "dragula": "^3.7.3",
     "flatpickr": "^4.6.13",
     "fscreen": "^1.2.0",
     "glightbox": "^3.2.0",
     "iframe-resizer": "^4.3.6",
-    "jquery": "^3.6.4",
-    "lit": "2.7.0",
+    "jquery": "^3.7.0",
+    "lit": "2.7.4",
     "node-polyglot": "^2.5.0",
-    "sass": "^1.60.0",
+    "sass": "^1.62.1",
+    "tippy.js": "^6.3.7",
     "typescript": "^4.9.5",
-    "webpack": "^5.76.3",
+    "webpack": "^5.82.1",
     "webpack-cli": "^4.9.2"
   },
   "devDependencies": {
-    "@open-wc/testing-helpers": "^2.2.0",
-    "@testing-library/dom": "^9.2.0",
+    "@open-wc/testing-helpers": "^2.2.1",
+    "@testing-library/dom": "^9.3.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/ace": "^0.0.48",
     "@types/bootstrap": "^5.2.4",
@@ -53,17 +54,17 @@
     "@types/iframe-resizer": "^3.5.9",
     "@types/jest": "^27.5.0",
     "@types/serviceworker": "^0.0.67",
-    "@typescript-eslint/eslint-plugin": "^5.56.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.5",
+    "@typescript-eslint/parser": "^5.59.5",
     "babel-plugin-istanbul": "^6.1.1",
-    "@typescript-eslint/parser": "^5.56.0",
-    "eslint": "^8.36.0",
+    "eslint": "^8.40.0",
     "eslint-config-google": "^0.14.0",
     "eslint-plugin-jest": "^27.2.1",
-    "eslint-plugin-lit": "^1.8.2",
+    "eslint-plugin-lit": "^1.8.3",
     "eslint-plugin-no-jquery": "^2.7.0",
-    "eslint-plugin-wc": "^1.4.0",
+    "eslint-plugin-wc": "^1.5.0",
     "jest": "^26.6.3",
-    "jest-junit": "^15.0.0",
+    "jest-junit": "^16.0.0",
     "nyc": "^15.1.0",
     "stylelint": "^14.16.1",
     "stylelint-config-standard": "^29.0.0",
diff --git a/test/controllers/annotations_controller_test.rb b/test/controllers/annotations_controller_test.rb
index a1eff8ef07..894607a2e2 100644
--- a/test/controllers/annotations_controller_test.rb
+++ b/test/controllers/annotations_controller_test.rb
@@ -488,44 +488,46 @@ def setup
     admin = @submission.course.administrating_members[0]
     random = create :user
 
-    users = [[zeus, true], [staff, false], [admin, true], [random, false]]
-    users.each do |user, valid|
-      sign_in user
-
-      # In progress -> in progress
-      question = create :question, submission: @submission, question_state: :in_progress
-      patch annotation_path(question), params: {
-        from: question.question_state,
-        question: {
-          question_state: :in_progress
-        },
-        format: :json
-      }
-      assert_response :forbidden
-
-      # In progress -> answered
-      question = create :question, submission: @submission, question_state: :in_progress
-      patch annotation_path(question), params: {
-        from: question.question_state,
-        question: {
-          question_state: :answered
-        },
-        format: :json
-      }
-      assert_response valid ? :ok : :forbidden
-
-      # In progress -> unanswered
-      question = create :question, submission: @submission, question_state: :in_progress
-      patch annotation_path(question), params: {
-        from: question.question_state,
-        question: {
-          question_state: :unanswered
-        },
-        format: :json
-      }
-      assert_response valid ? :ok : :forbidden
-
-      sign_out user
+    with_delayed_jobs do
+      users = [[zeus, true], [staff, false], [admin, true], [random, false]]
+      users.each do |user, valid|
+        sign_in user
+
+        # In progress -> in progress
+        question = create :question, submission: @submission, question_state: :in_progress
+        patch annotation_path(question), params: {
+          from: question.question_state,
+          question: {
+            question_state: :in_progress
+          },
+          format: :json
+        }
+        assert_response :forbidden
+
+        # In progress -> answered
+        question = create :question, submission: @submission, question_state: :in_progress
+        patch annotation_path(question), params: {
+          from: question.question_state,
+          question: {
+            question_state: :answered
+          },
+          format: :json
+        }
+        assert_response valid ? :ok : :forbidden
+
+        # In progress -> unanswered
+        question = create :question, submission: @submission, question_state: :in_progress
+        patch annotation_path(question), params: {
+          from: question.question_state,
+          question: {
+            question_state: :unanswered
+          },
+          format: :json
+        }
+        assert_response valid ? :ok : :forbidden
+
+        sign_out user
+      end
     end
   end
 
@@ -642,7 +644,7 @@ def setup
     assert_response :no_content
   end
 
-  test 'cannot modify if question was answered' do
+  test 'can modify if question was answered' do
     question = create :question, submission: @submission, question_state: :answered
 
     put annotation_path(question), params: {
@@ -651,7 +653,7 @@ def setup
       },
       format: :json
     }
-    assert_response :forbidden
+    assert_response :success
 
     question = create :question, submission: @submission, question_state: :unanswered
 
diff --git a/test/controllers/courses_controller_test.rb b/test/controllers/courses_controller_test.rb
index a9ea37dcd0..e8ab7e8c1f 100644
--- a/test/controllers/courses_controller_test.rb
+++ b/test/controllers/courses_controller_test.rb
@@ -801,17 +801,19 @@ def with_users_signed_in(users)
   end
 
   test 'question page title is correct' do
-    add_admins
-    sign_in @admins.first
-    get questions_course_path(@course)
-    assert_select 'title', /^([^0-9]*)$/
-
-    submission = create :submission, course: @course
-    create :question, question_state: :answered, submission: submission
-    create :question, question_state: :unanswered, submission: submission
-    create :question, question_state: :in_progress, submission: submission
-    get questions_course_path(@course)
-    assert_select 'title', /\(1\)/
+    with_delayed_jobs do
+      add_admins
+      sign_in @admins.first
+      get questions_course_path(@course)
+      assert_select 'title', /^([^0-9]*)$/
+
+      submission = create :submission, course: @course
+      create :question, question_state: :answered, submission: submission
+      create :question, question_state: :unanswered, submission: submission
+      create :question, question_state: :in_progress, submission: submission
+      get questions_course_path(@course)
+      assert_select 'title', /\(1\)/
+    end
   end
 
   test 'Icalendar link exports valid and correct ics file' do
diff --git a/test/controllers/submissions_controller_test.rb b/test/controllers/submissions_controller_test.rb
index f99c166f03..8d4fdeacc1 100644
--- a/test/controllers/submissions_controller_test.rb
+++ b/test/controllers/submissions_controller_test.rb
@@ -232,15 +232,12 @@ def rejudge_submissions(**params)
     create(:series, :with_submissions)
 
     # in test env, default and export queues are evaluated inline
-    orig = Delayed::Worker.delay_jobs
-    Delayed::Worker.delay_jobs = true # delay all
-
-    # should only enqueue a single job which will then enqueue all other jobs
-    assert_jobs_enqueued(1) do
-      rejudge_submissions
+    with_delayed_jobs do
+      # should only enqueue a single job which will then enqueue all other jobs
+      assert_jobs_enqueued(1) do
+        rejudge_submissions
+      end
     end
-
-    Delayed::Worker.delay_jobs = orig
   end
 
   test 'should rejudge all submissions' do
diff --git a/test/factories/annotations.rb b/test/factories/annotations.rb
index 9f5e161e1e..e1a7c4b346 100644
--- a/test/factories/annotations.rb
+++ b/test/factories/annotations.rb
@@ -15,6 +15,10 @@
 #  last_updated_by_id  :integer          not null
 #  course_id           :integer          not null
 #  saved_annotation_id :bigint
+#  thread_root_id      :integer
+#  column              :integer
+#  rows                :integer          default(1), not null
+#  columns             :integer
 #
 FactoryBot.define do
   factory :annotation do
diff --git a/test/helpers/pages_helper_test.rb b/test/helpers/pages_helper_test.rb
index 937fc1c6d7..27b0a22a8e 100644
--- a/test/helpers/pages_helper_test.rb
+++ b/test/helpers/pages_helper_test.rb
@@ -46,5 +46,11 @@ class PagesHelperTest < ActiveSupport::TestCase
       f.save
     end
     assert_equal 2, homepage_course_admin_notifications(course).count
+
+    # released evaluation
+    e.feedbacks.first.update(completed: false)
+    assert_equal 3, homepage_course_admin_notifications(course).count
+    e.update(released: true)
+    assert_equal 2, homepage_course_admin_notifications(course).count
   end
 end
diff --git a/test/javascript/code_listing.test.ts b/test/javascript/code_listing.test.ts
index f44d023fdd..3dd6f9c91d 100644
--- a/test/javascript/code_listing.test.ts
+++ b/test/javascript/code_listing.test.ts
@@ -1,70 +1,75 @@
-import { CodeListing } from "code_listing/code_listing";
-
-let codeListing;
-
-beforeEach(() => {
+import codeListing from "code_listing";
+import { annotationState } from "state/Annotations";
+
+// bootstrap
+import bootstrap from "bootstrap";
+import { machineAnnotationState } from "state/MachineAnnotations";
+import userEvent from "@testing-library/user-event";
+import { fixture, nextFrame } from "@open-wc/testing-helpers";
+import { html } from "lit";
+import { userAnnotationState } from "state/UserAnnotations";
+window.bootstrap = bootstrap;
+
+beforeEach(async () => {
     // Mock MathJax
     window.MathJax = {} as MathJaxObject;
     // Mock typeset function of MathJax
     window.MathJax.typeset = () => "";
 
-    document.body.innerHTML = `
-    <a href="#" data-bs-toggle="tab">Code <span class="badge" id="badge_code"></span></a>
+    // Bootstrap incorrectly detects jquery, so we need to disable it
+    document.body.setAttribute("data-bs-no-jquery", "true");
+
+    await fixture( html`
+    <div id="modal-container"></div>
+    <a href="#" data-bs-toggle="tab">Code <d-annotations-count-badge></d-annotations-count-badge></a>
     <div class="code-table" data-submission-id="54">
-    <div id="feedback-table-options" class="feedback-table-options">
-        <button class="btn btn-text" id="add_global_annotation">Annotatie toevoegen</button>
-        <span class="flex-spacer"></span>
-        <span class="diff-switch-buttons switch-buttons hide" id="annotations_toggles">
-            <span id="diff-switch-prefix">Annotaties</span>
-            <div class="btn-group btn-toggle" role="group" aria-label="Annotaties" data-bs-toggle="buttons">
-                <button class="annotation-toggle active" id="show_all_annotations"></button>
-                <button class="annotation-toggle" id="show_only_errors"></button>
-                <button class="annotation-toggle" id="hide_all_annotations"></button>
-            </div>
-        </span>
-    </div>
-    <div id="feedback-table-global-annotations">
-        <div id="feedback-table-global-annotations-list"></div>
-    </div>
-    <div class="code-listing-container">
-        <table class="code-listing highlighter-rouge">
-            <tbody>
-            <tr id="line-1" class="lineno">
-                <td class="rouge-gutter gl"><pre>1</pre></td>
-                <td class="rouge-code"><pre>print(5 + 6)</pre></td>
-            </tr>
-            <tr id="line-2" class="lineno">
-                <td class="rouge-gutter gl"><pre>2</pre></td>
-                <td class="rouge-code"><pre>print(6 + 3)</pre></td>
-            </tr>
-            <tr id="line-3" class="lineno">
-                <td class="rouge-gutter gl"><pre>1</pre></td>
-                <td class="rouge-code"><pre>print(9 + 15)</pre></td>
-            </tr>
-            </tbody>
-        </table>
-    </div>
-</div>`;
-    codeListing = new CodeListing(54, 1, 1, 1, "print(5 + 6)\nprint(6 + 3)\nprint(9 + 15)\n", 3);
+        <d-annotation-options></d-annotation-options>
+        <div class="code-listing-container">
+            <table class="code-listing highlighter-rouge">
+                <tbody>
+                <tr id="line-1" class="lineno">
+                    <td class="rouge-gutter gl"><pre>1</pre></td>
+                    <td class="rouge-code"><pre>print(5 + 6)</pre></td>
+                </tr>
+                <tr id="line-2" class="lineno">
+                    <td class="rouge-gutter gl"><pre>2</pre></td>
+                    <td class="rouge-code"><pre>print(6 + 3)</pre></td>
+                </tr>
+                <tr id="line-3" class="lineno">
+                    <td class="rouge-gutter gl"><pre>1</pre></td>
+                    <td class="rouge-code"><pre>print(9 + 15)</pre></td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>`);
+    codeListing.initAnnotations(54, 1, 1, 1, "print(5 + 6)\nprint(6 + 3)\nprint(9 + 15)\n", 3);
+    annotationState.visibility = "all";
+    userAnnotationState.reset();
+    machineAnnotationState.setMachineAnnotations([]);
 });
 
-test("create feedback table with default settings", () => {
+test("create feedback table with default settings", async () => {
     codeListing.addMachineAnnotations([
         { "text": "Value could be assigned", "row": 0, "type": "warning" },
         { "text": "Value could be assigned", "row": 1, "type": "warning" },
         { "text": "Value could be assigned", "row": 2, "type": "warning" },
     ]);
 
+    await nextFrame();
+
     expect(document.querySelectorAll(".annotation").length).toBe(3);
 });
 
-test("html in annotations should be escaped", () => {
+test("html in annotations should be escaped", async () => {
     codeListing.addMachineAnnotations([{ "text": "<b>test</b>", "row": 0, "type": "warning" }]);
 
+    await nextFrame();
+
     expect(document.querySelector(".annotation .annotation-text").textContent).toBe("<b>test</b>");
 });
 
-test("feedback table should support more than 1 annotation per row (first and last row)", () => {
+test("feedback table should support more than 1 annotation per row (first and last row)", async () => {
     codeListing.addMachineAnnotations([
         { "text": "Value could be assigned", "row": 0, "type": "warning" },
         { "text": "Value could be assigned", "row": 0, "type": "warning" },
@@ -74,16 +79,20 @@ test("feedback table should support more than 1 annotation per row (first and la
         { "text": "Value could be assigned", "row": 2, "type": "warning" },
     ]);
 
+    await nextFrame();
+
     expect(document.querySelectorAll(".annotation").length).toBe(6);
 });
 
-test("annotation types should be transmitted into the view", () => {
+test("annotation types should be transmitted into the view", async () => {
     codeListing.addMachineAnnotations([
         { "text": "Value could be assigned", "row": 0, "type": "info" },
         { "text": "Float transformed into int", "row": 1, "type": "warning" },
         { "text": "Division by zero", "row": 2, "type": "error" },
     ]);
 
+    await nextFrame();
+
     expect(document.querySelectorAll(".annotation.info").length).toBe(1);
     expect(document.querySelectorAll(".annotation.warning").length).toBe(1);
     expect(document.querySelectorAll(".annotation.error").length).toBe(1);
@@ -107,14 +116,16 @@ test("line highlighting", () => {
     expect(document.querySelectorAll(".lineno.marked").length).toBe(0);
 });
 
-test("dots only for non-shown messages and only the worst", () => {
+test("dots only for non-shown messages and only the worst", async () => {
     codeListing.addMachineAnnotations([
         { "text": "Value could be assigned", "row": 0, "type": "info" },
         { "text": "Float transformed into int", "row": 0, "type": "warning" },
         { "text": "Division by zero", "row": 0, "type": "error" },
     ]);
 
-    codeListing.hideAnnotations();
+
+    const button = document.querySelector(".mdi-comment-remove-outline");
+    await userEvent.click(button);
 
     // Dot on line 1 should be shown.
     expect(document.querySelectorAll(".dot").length).toBe(1);
@@ -124,101 +135,90 @@ test("dots only for non-shown messages and only the worst", () => {
     expect(document.querySelectorAll(".dot.dot-error").length).toBe(1);
 });
 
-test("dots not visible when all annotations are shown", () => {
+test("dots not visible when all annotations are shown", async () => {
     codeListing.addMachineAnnotations([
         { "text": "Value could be assigned", "row": 0, "type": "info" },
         { "text": "Float transformed into int", "row": 0, "type": "warning" },
         { "text": "Division by zero", "row": 0, "type": "error" },
     ]);
 
-    codeListing.showAnnotations();
+    const button = document.querySelector(".mdi-comment-multiple-outline");
+    await userEvent.click(button);
 
-    // 1 dot that should not be visible.
-    expect(document.querySelectorAll(".dot").length).toBe(1);
-    expect(document.querySelectorAll(".dot.hide").length).toBe(1);
+    // no dots visible
+    expect(document.querySelectorAll(".dot").length).toBe(0);
 });
 
-test("only warning dot visible when in compressed error mode", () => {
+test("only warning dot visible when in compressed error mode", async () => {
     codeListing.addMachineAnnotations([
         { "text": "Value could be assigned", "row": 0, "type": "info" },
         { "text": "Float transformed into int", "row": 0, "type": "warning" },
         { "text": "Division by zero", "row": 0, "type": "error" },
     ]);
 
-    codeListing.hideAnnotations(true);
+    let button = document.querySelector(".mdi-comment-alert-outline");
+    await userEvent.click(button);
 
     expect(document.querySelectorAll(".dot").length).toBe(1);
     expect(document.querySelectorAll(".dot.dot-error").length).toBe(0);
     expect(document.querySelectorAll(".dot.dot-warning").length).toBe(1);
 
     // Simulating user switching
-    codeListing.showAnnotations();
-    codeListing.hideAnnotations();
+    button = document.querySelector(".mdi-comment-multiple-outline");
+    await userEvent.click(button);
+    button = document.querySelector(".mdi-comment-remove-outline");
+    await userEvent.click(button);
 
     expect(document.querySelectorAll(".dot").length).toBe(1);
     expect(document.querySelectorAll(".dot.dot-error").length).toBe(1);
 });
 
-test("no double dots", () => {
+test("no double dots", async () => {
     codeListing.addMachineAnnotations([
         { "text": "Value could be assigned", "row": 0, "type": "info" },
         { "text": "Float transformed into int", "row": 0, "type": "info" },
         { "text": "Division by zero", "row": 0, "type": "info" },
     ]);
 
+    let button = document.querySelector(".mdi-comment-remove-outline");
+    await userEvent.click(button);
+
     expect(document.querySelectorAll(".dot").length).toBe(1);
 
-    codeListing.showAnnotations();
+    button = document.querySelector(".mdi-comment-multiple-outline");
+    await userEvent.click(button);
 
     expect(document.querySelectorAll(".dot.dot-info:not(.hide)").length).toBe(0);
     expect(document.querySelectorAll(".dot.dot-warning:not(.hide)").length).toBe(0);
     expect(document.querySelectorAll(".dot.dot-error:not(.hide)").length).toBe(0);
 
-    codeListing.hideAnnotations(true);
+    button = document.querySelector(".mdi-comment-alert-outline");
+    await userEvent.click(button);
 
     expect(document.querySelectorAll(".dot.dot-info:not(.hide)").length).toBe(1);
     expect(document.querySelectorAll(".dot.dot-warning:not(.hide)").length).toBe(0);
     expect(document.querySelectorAll(".dot.dot-error:not(.hide)").length).toBe(0);
 
-    codeListing.hideAnnotations();
+    button = document.querySelector(".mdi-comment-remove-outline");
+    await userEvent.click(button);
 
     expect(document.querySelectorAll(".dot.dot-info:not(.hide)").length).toBe(1);
     expect(document.querySelectorAll(".dot.dot-warning:not(.hide)").length).toBe(0);
     expect(document.querySelectorAll(".dot.dot-error:not(.hide)").length).toBe(0);
 });
 
-test("correct buttons & elements are hidden and unhidden", () => {
-    codeListing.addMachineAnnotations([
-        { "text": "Value could be assigned", "row": 0, "type": "info" },
-        { "text": "Float transformed into int", "row": 0, "type": "info" },
-        { "text": "Division by zero", "row": 0, "type": "info" },
-    ]);
-
-    expect(document.querySelectorAll("#feedback-table-options.hide").length).toBe(0);
-    expect(document.querySelectorAll("#feedback-table-options:not(.hide)").length).toBe(1);
-
-    expect(document.querySelectorAll("#show_only_errors.hide").length).toBe(1);
-    expect(document.querySelectorAll("#show_only_errors:not(.hide)").length).toBe(0);
-
-    codeListing.addMachineAnnotations([
-        { "text": "Value could be assigned", "row": 0, "type": "error" },
-        { "text": "Float transformed into int", "row": 0, "type": "error" },
-        { "text": "Division by zero", "row": 0, "type": "error" },
-    ]);
-
-    expect(document.querySelectorAll("#feedback-table-options.hide").length).toBe(0);
-    expect(document.querySelectorAll("#feedback-table-options:not(.hide)").length).toBe(1);
-
-    expect(document.querySelectorAll("#show_only_errors.hide").length).toBe(0);
-    expect(document.querySelectorAll("#show_only_errors:not(.hide)").length).toBe(1);
-});
-
-test("annotations should be transmitted into view", () => {
-    codeListing.addUserAnnotation({
+test("annotations should be transmitted into view", async () => {
+    await userAnnotationState.addToMap({
         "id": 1,
         "line_nr": 1,
+        "created_at": "2023-03-02T15:15:48.776+01:00",
+        "url": "http://dodona.localhost:3000/nl/annotations/1.json",
+        "last_updated_by": { "name": "Zeus Kronosson" },
+        "course_id": 1,
+        "responses": [],
+        "type": "question",
         "annotation_text": "This could be shorter",
-        "markdown_text": "<p>This could be shorter</p>",
+        "rendered_markdown": "<p>This could be shorter</p>",
         "released": true,
         "permission": {
             update: false,
@@ -226,14 +226,21 @@ test("annotations should be transmitted into view", () => {
         },
         "user": {
             name: "Jan Klaassen",
-        }
+        },
+        "row": 1,
+        "rows": 1,
     });
-
-    codeListing.addUserAnnotation({
+    await userAnnotationState.addToMap({
         "id": 2,
         "line_nr": 2,
+        "created_at": "2023-03-02T15:15:48.776+01:00",
+        "url": "http://dodona.localhost:3000/nl/annotations/1.json",
+        "last_updated_by": { "name": "Zeus Kronosson" },
+        "course_id": 1,
+        "responses": [],
+        "type": "question",
         "annotation_text": "This should be faster",
-        "markdown_text": "<p>This should be faster</p>",
+        "rendered_markdown": "<p>This should be faster</p>",
         "released": true,
         "permission": {
             update: true,
@@ -241,18 +248,27 @@ test("annotations should be transmitted into view", () => {
         },
         "user": {
             name: "Piet Hein",
-        }
+        },
+        "row": 2,
+        "rows": 1,
     });
+    await nextFrame();
 
     expect(document.querySelectorAll(".annotation").length).toBe(2);
 });
 
-test("feedback table should support more than 1 annotation per row", () => {
-    codeListing.addUserAnnotation({
+test("feedback table should support more than 1 annotation per row", async () => {
+    await userAnnotationState.addToMap({
         "id": 1,
         "line_nr": 1,
+        "created_at": "2023-03-02T15:15:48.776+01:00",
+        "url": "http://dodona.localhost:3000/nl/annotations/1.json",
+        "last_updated_by": { "name": "Zeus Kronosson" },
+        "course_id": 1,
+        "responses": [],
+        "type": "question",
         "annotation_text": "This could be shorter",
-        "markdown_text": "<p>This could be shorter</p>",
+        "rendered_markdown": "<p>This could be shorter</p>",
         "permission": {
             update: false,
             destroy: false,
@@ -260,14 +276,22 @@ test("feedback table should support more than 1 annotation per row", () => {
         "released": true,
         "user": {
             name: "Jan Klaassen",
-        }
+        },
+        "row": 1,
+        "rows": 1,
     });
 
-    codeListing.addUserAnnotation({
+    await userAnnotationState.addToMap({
         "id": 2,
         "line_nr": 1,
+        "created_at": "2023-03-02T15:15:48.776+01:00",
+        "url": "http://dodona.localhost:3000/nl/annotations/1.json",
+        "last_updated_by": { "name": "Zeus Kronosson" },
+        "course_id": 1,
+        "responses": [],
+        "type": "question",
         "annotation_text": "This should be faster",
-        "markdown_text": "<p>This should be faster</p>",
+        "rendered_markdown": "<p>This should be faster</p>",
         "released": true,
         "permission": {
             update: true,
@@ -275,18 +299,27 @@ test("feedback table should support more than 1 annotation per row", () => {
         },
         "user": {
             name: "Piet Hein",
-        }
+        },
+        "row": 1,
+        "rows": 1,
     });
+    await nextFrame();
 
     expect(document.querySelectorAll(".annotation").length).toBe(2);
 });
 
-test("feedback table should be able to contain both machine annotations and user annotations", () => {
-    codeListing.addUserAnnotation({
+test("feedback table should be able to contain both machine annotations and user annotations", async () => {
+    await userAnnotationState.addToMap({
         "id": 1,
         "line_nr": 1,
+        "created_at": "2023-03-02T15:15:48.776+01:00",
+        "url": "http://dodona.localhost:3000/nl/annotations/1.json",
+        "last_updated_by": { "name": "Zeus Kronosson" },
+        "course_id": 1,
+        "responses": [],
+        "type": "question",
         "annotation_text": "This could be shorter",
-        "markdown_text": "<p>This could be shorter</p>",
+        "rendered_markdown": "<p>This could be shorter</p>",
         "released": true,
         "permission": {
             update: false,
@@ -294,14 +327,22 @@ test("feedback table should be able to contain both machine annotations and user
         },
         "user": {
             name: "Jan Klaassen",
-        }
+        },
+        "row": 1,
+        "rows": 1,
     });
 
-    codeListing.addUserAnnotation({
+    await userAnnotationState.addToMap({
         "id": 2,
         "line_nr": 2,
+        "created_at": "2023-03-02T15:15:48.776+01:00",
+        "url": "http://dodona.localhost:3000/nl/annotations/1.json",
+        "last_updated_by": { "name": "Zeus Kronosson" },
+        "course_id": 1,
+        "responses": [],
+        "type": "question",
         "annotation_text": "This should be faster",
-        "markdown_text": "<p>This should be faster</p>",
+        "rendered_markdown": "<p>This should be faster</p>",
         "released": true,
         "permission": {
             update: true,
@@ -309,7 +350,9 @@ test("feedback table should be able to contain both machine annotations and user
         },
         "user": {
             name: "Piet Hein",
-        }
+        },
+        "row": 2,
+        "rows": 1,
     });
 
     codeListing.addMachineAnnotations([
@@ -320,22 +363,25 @@ test("feedback table should be able to contain both machine annotations and user
         { "text": "Value could be assigned", "row": 2, "type": "warning" },
         { "text": "Value could be assigned", "row": 2, "type": "info" },
     ]);
+    await nextFrame();
 
     expect(document.querySelectorAll(".annotation").length).toBe(2 + 6);
 });
 
-test("ensure that all buttons are created", () => {
+test("ensure that all buttons are created", async () => {
     codeListing.initAnnotateButtons();
-    expect(document.querySelectorAll(".annotation-button").length).toBe(3);
+    await nextFrame();
+    expect(document.querySelectorAll("d-create-annotation-button").length).toBe(3);
 });
 
-test("click on comment button", () => {
+test("click on comment button", async () => {
     codeListing.initAnnotateButtons();
 
+    await nextFrame();
     expect(document.querySelectorAll("d-annotation-form").length).toBe(0);
-    const annotationButton: HTMLButtonElement = document.querySelector(".annotation-button");
-    annotationButton.click();
+    const annotationButton: HTMLButtonElement = document.querySelector(".annotation-button .btn");
+    await userEvent.click(annotationButton);
     expect(document.querySelectorAll("d-annotation-form").length).toBe(1);
-    annotationButton.click();
+    await userEvent.click(annotationButton);
     expect(document.querySelectorAll("d-annotation-form").length).toBe(1);
 });
diff --git a/test/javascript/components/annotations/select.test.ts b/test/javascript/components/annotations/select.test.ts
new file mode 100644
index 0000000000..9e09c571ce
--- /dev/null
+++ b/test/javascript/components/annotations/select.test.ts
@@ -0,0 +1,198 @@
+import { fixture } from "@open-wc/testing-helpers";
+import { getOffset, selectedRangeFromSelection } from "components/annotations/select";
+import "components/annotations/code_listing_row";
+import { submissionState } from "state/Submissions";
+
+describe("getOffsetTest", () => {
+    it("should return the correct offset", async () => {
+        const context = await fixture("<div><pre><span>hello</span> <span>w<span id=\"target\">or</span>ld</span></pre></div>");
+        const target = context.querySelector("#target");
+
+        const offset = getOffset(target, 1);
+        expect(offset).toBe(8);
+    });
+
+    it("should ignore anny offset outside the pre ellement", async () => {
+        const context = await fixture("<div>123<pre><span>hello</span> <span>w<span id=\"target\">or</span>ld</span></pre></div>");
+        const target = context.querySelector("#target");
+
+        const offset = getOffset(target, 1);
+        expect(offset).toBe(8);
+    });
+
+    it("should return undefined if the node is not inside a pre element", async () => {
+        const context = await fixture("<div><span id=\"target\">hello</span><pre> world</pre></div>");
+        const target = context.querySelector("#target");
+
+        const offset = getOffset(target, 1);
+        expect(offset).toBe(undefined);
+    });
+});
+
+describe("selectedRangeFromSelectionTest", () => {
+    let context;
+    beforeEach(async () => {
+        context = await fixture(`
+            <div>
+                <span id="foo">bar</span>
+                <d-code-listing-row row="1" rendered-code="<span id='t1'>hello</span> <span id='t2'>w<span id='t3'>or</span>ld</span>"></d-code-listing-row>
+                <d-code-listing-row row="2" rendered-code=""></d-code-listing-row>
+                <d-code-listing-row row="3" rendered-code="<span id='t4'>print</span>(<span id='t5'>w<span id='t6'>or</span>ld</span>)"></d-code-listing-row>
+            </div>
+        `);
+        submissionState.code = "hello world\n\nprint(world)";
+        window.getSelection().removeAllRanges();
+    });
+
+    it("should return the correct range", async () => {
+        const selection = window.getSelection();
+        const range = document.createRange();
+        range.setStart(context.querySelector("#t1").childNodes[0], 3);
+        range.setEnd(context.querySelector("#t3").childNodes[0], 1);
+        selection.addRange(range);
+
+        const selectedRange = selectedRangeFromSelection(selection);
+        expect(selectedRange).toEqual({ row: 1, column: 3, rows: 1, columns: 5 });
+    });
+
+    it("should return the correct range when the selection spans multiple rows", async () => {
+        const selection = window.getSelection();
+        const range = document.createRange();
+        range.setStart(context.querySelector("#t1").childNodes[0], 3);
+        range.setEnd(context.querySelector("#t5").childNodes[0], 1);
+        selection.addRange(range);
+
+        const selectedRange = selectedRangeFromSelection(selection);
+        expect(selectedRange).toEqual({ row: 1, column: 0, rows: 3, columns: undefined });
+
+        // Selection should be updated to the new range
+        expect(selection.rangeCount).toBe(1);
+        const newRange = selection.getRangeAt(0);
+
+        expect(newRange.startContainer).toBe(context.querySelector("#line-1 .code-line"));
+        expect(newRange.endContainer).toBe(context.querySelector("#line-3 .code-line"));
+        expect(newRange.startOffset).toBe(0);
+        expect(newRange.endOffset).toBe(5);
+    });
+
+    it("Should create multiple ranges if the selection contains multiple ranges", async () => {
+        // same selection as above, but in the firefox format
+        const selection = window.getSelection();
+        const range = document.createRange();
+        range.setStart(context.querySelector("#t1").childNodes[0], 3);
+        range.setEnd(context.querySelector("#line-1 .code-line"), 4);
+        selection.addRange(range);
+
+        const range2 = document.createRange();
+        range2.setStart(context.querySelector("#line-3 .code-line"), 0);
+        range2.setEnd(context.querySelector("#t5").childNodes[0], 1);
+        selection.addRange(range2);
+
+        // The testing framework doesn't support multiple ranges
+        expect(selection.rangeCount).toBe(1);
+
+        // The test code for when the framework does support multiple ranges
+        // const selectedRange = selectedRangeFromSelection(selection);
+        // expect(selectedRange).toEqual({ row: 1, column: 0, rows: 3, columns: undefined });
+        //
+        // // Selection should be updated to the new ranges
+        // expect(selection.rangeCount).toBe(2);
+        //
+        // const firstRange = selection.getRangeAt(0);
+        // expect(firstRange.startContainer).toBe(context.querySelector("#line-1 .code-line"));
+        // expect(firstRange.endContainer).toBe(context.querySelector("#line-1 .code-line"));
+        // expect(firstRange.startOffset).toBe(0);
+        // expect(firstRange.endOffset).toBe(5);
+        //
+        // const secondRange = selection.getRangeAt(1);
+        // expect(secondRange.startContainer).toBe(context.querySelector("#line-3 .code-line"));
+        // expect(secondRange.endContainer).toBe(context.querySelector("#line-3 .code-line"));
+        // expect(secondRange.startOffset).toBe(0);
+        // expect(secondRange.endOffset).toBe(5);
+    });
+
+    it("should remove starting empty lines from the selection", async () => {
+        const selection = window.getSelection();
+        const range = document.createRange();
+        range.setStart(context.querySelector("#line-2 .code-line"), 0);
+        range.setEnd(context.querySelector("#t6").childNodes[0], 1);
+        selection.addRange(range);
+
+        const selectedRange = selectedRangeFromSelection(selection);
+        // Full line selection
+        expect(selectedRange).toEqual({ row: 3, column: 0, rows: 1, columns: undefined });
+
+        // Selection should be updated to the new range
+        expect(selection.rangeCount).toBe(1);
+        const newRange = selection.getRangeAt(0);
+
+        expect(newRange.startContainer).toBe(context.querySelector("#line-3 .code-line"));
+        expect(newRange.endContainer).toBe(context.querySelector("#line-3 .code-line"));
+        expect(newRange.startOffset).toBe(0);
+        expect(newRange.endOffset).toBe(5);
+    });
+
+    it("should remove ending empty lines from the selection", async () => {
+        const selection = window.getSelection();
+        const range = document.createRange();
+        range.setStart(context.querySelector("#t1").childNodes[0], 3);
+        range.setEnd(context.querySelector("#line-2 .code-line"), 0);
+        selection.addRange(range);
+
+        const selectedRange = selectedRangeFromSelection(selection);
+        expect(selectedRange).toEqual({ row: 1, column: 3, rows: 1, columns: undefined });
+
+        // Selection is not updated in this case
+        expect(selection.rangeCount).toBe(1);
+        const newRange = selection.getRangeAt(0);
+        expect(newRange).toBe(range);
+    });
+
+    it("should return undefined if start or end is not inside code-listing-row", async () => {
+        const selection = window.getSelection();
+        const range = document.createRange();
+        range.setStart(context.querySelector("#foo").childNodes[0], 3);
+        range.setEnd(context.querySelector("#t3").childNodes[0], 1);
+        selection.addRange(range);
+
+        const selectedRange = selectedRangeFromSelection(selection);
+        expect(selectedRange).toBeUndefined();
+
+        range.setStart(context.querySelector("#t1").childNodes[0], 3);
+        range.setEnd(context.querySelector("#foo").childNodes[0], 1);
+        selection.addRange(range);
+
+        const selectedRange2 = selectedRangeFromSelection(selection);
+        expect(selectedRange2).toBeUndefined();
+    });
+
+    it("should be able to calculate the correct range when the selection is reversed", async () => {
+        const selection = window.getSelection();
+        const range = new Range();
+        range.setStart(context.querySelector("#t3").childNodes[0], 1);
+        range.setEnd(context.querySelector("#t1").childNodes[0], 3);
+        selection.addRange(range);
+
+        // Test framework doesn't support reversed ranges
+        expect(range.startContainer).toBe(range.endContainer);
+
+        // Test code for when the framework does support reversed ranges
+        // const selectedRange = selectedRangeFromSelection(selection);
+        // expect(selectedRange).toEqual({ row: 1, column: 3, rows: 1, columns: 5 });
+    });
+
+    it("should be able to calculate the correct range when the selection is reversed and spans multiple rows", async () => {
+        const selection = window.getSelection();
+        const range = new Range();
+        range.setStart(context.querySelector("#t5").childNodes[0], 1);
+        range.setEnd(context.querySelector("#t1").childNodes[0], 3);
+        selection.addRange(range);
+
+        // Test framework doesn't support reversed ranges
+        expect(range.startContainer).toBe(range.endContainer);
+
+        // Test code for when the framework does support reversed ranges
+        // const selectedRange = selectedRangeFromSelection(selection);
+        // expect(selectedRange).toEqual({ row: 1, column: 3, rows: 3, columns: 5 });
+    });
+});
diff --git a/test/javascript/components/pagination.test.ts b/test/javascript/components/pagination.test.ts
index 82da4e9078..096a8e67c3 100644
--- a/test/javascript/components/pagination.test.ts
+++ b/test/javascript/components/pagination.test.ts
@@ -2,7 +2,7 @@ import "components/pagination";
 import { Pagination } from "components/pagination";
 import { fixture, nextFrame } from "@open-wc/testing-helpers";
 import { screen } from "@testing-library/dom";
-import { searchQuery } from "search";
+import { searchQueryState } from "state/SearchQuery";
 
 describe("Pagination", () => {
     it("always shows the current page as active", async () => {
@@ -89,6 +89,6 @@ describe("Pagination", () => {
         expect(page3).toBeDefined();
         page3?.click();
 
-        expect(searchQuery.queryParams.params.get("page")).toBe("3");
+        expect(searchQueryState.queryParams.get("page")).toBe("3");
     });
 });
diff --git a/test/javascript/components/search/dropdown_filter.test.ts b/test/javascript/components/search/dropdown_filter.test.ts
index 8254789d37..02a3a1fcc4 100644
--- a/test/javascript/components/search/dropdown_filter.test.ts
+++ b/test/javascript/components/search/dropdown_filter.test.ts
@@ -1,24 +1,24 @@
-import "components/dropdown_filter";
-import { DropdownFilter } from "components/dropdown_filter";
+import "components/search/dropdown_filter";
+import { DropdownFilter } from "components/search/dropdown_filter";
 import { fixture, nextFrame } from "@open-wc/testing-helpers";
 import userEvent from "@testing-library/user-event";
 import { getByLabelText, screen } from "@testing-library/dom";
-import { SearchQuery } from "search";
 import { html } from "lit/development";
-import { Label } from "components/filter_collection_element";
+import { Label } from "components/search/filter_collection_element";
+import { searchQueryState } from "state/SearchQuery";
 
 describe("DropdownFilter", () => {
     let dropdownFilter;
     beforeEach(async () => {
-        const searchQuery = new SearchQuery("test.dodona.be");
+        searchQueryState.queryParams.clear();
+        searchQueryState.arrayQueryParams.clear();
         dropdownFilter = await fixture(html`
             <d-dropdown-filter param="foo"
                                        labels='[{ "name": "fool", "id": "1" }, { "name": "bar", "id": "2" }, { "name": "baz", "id": "3" }]'
                                        type="test"
                                        .paramVal=${(l: Label) => l.id}
                                        .color=${() => "pink"}
-                                       .multi=${false}
-                                       .searchQuery=${searchQuery}>
+                                       .multi=${false}>
             </d-dropdown-filter>`) as DropdownFilter;
     });
 
@@ -30,7 +30,7 @@ describe("DropdownFilter", () => {
 
     it("should set the query param to the selected label", async () => {
         await userEvent.click(screen.getByText("bar"));
-        expect(dropdownFilter.searchQuery.queryParams.params.get("foo")).toBe("2");
+        expect(searchQueryState.queryParams.get("foo")).toBe("2");
     });
 
     it("should mark selected labels as active", async () => {
@@ -97,7 +97,7 @@ describe("DropdownFilter", () => {
     });
 
     it("should update if the search query changes", async () => {
-        dropdownFilter.searchQuery.queryParams.updateParam("foo", "2");
+        searchQueryState.queryParams.set("foo", "2");
         await nextFrame();
         const input = getByLabelText(dropdownFilter, "bar") as HTMLInputElement;
         expect(input.checked).toBe(true);
diff --git a/test/javascript/components/search/filter_button.test.ts b/test/javascript/components/search/filter_button.test.ts
index 7973eb5235..472f132934 100644
--- a/test/javascript/components/search/filter_button.test.ts
+++ b/test/javascript/components/search/filter_button.test.ts
@@ -1,16 +1,14 @@
-import "components/filter_button";
-import { FilterButton } from "components/filter_button";
+import "components/search/filter_button";
+import { FilterButton } from "components/search/filter_button";
 import { fixture, nextFrame } from "@open-wc/testing-helpers";
 import userEvent from "@testing-library/user-event";
 import { screen } from "@testing-library/dom";
-import { SearchQuery } from "search";
+import { searchQueryState } from "state/SearchQuery";
 
 describe("FilterButton", () => {
     let filterButton: FilterButton;
     beforeEach(async () => {
-        const searchQuery = new SearchQuery("test.dodona.be");
-        filterButton = await fixture(`<d-filter-button .searchQuery=${searchQuery}
-                                                                param="foo"
+        filterButton = await fixture(`<d-filter-button param="foo"
                                                                 value="bar">
                                                                 <span>Test</span>
                                                 </d-filter-button>`);
@@ -18,13 +16,13 @@ describe("FilterButton", () => {
 
     it("updates the query parameter when clicked", async () => {
         await userEvent.click(screen.getByText("Test"));
-        expect(filterButton.searchQuery.queryParams.params.get("foo")).toBe("bar");
+        expect(searchQueryState.queryParams.get("foo")).toBe("bar");
     });
 
     it("updates the array query parameter when clicked if multi", async () => {
         filterButton.multi = true;
         await nextFrame();
         await userEvent.click(screen.getByText("Test"));
-        expect(filterButton.searchQuery.arrayQueryParams.params.get("foo")).toContain("bar");
+        expect(searchQueryState.arrayQueryParams.get("foo")).toContain("bar");
     });
 });
diff --git a/test/javascript/components/search/filter_tabs.test.ts b/test/javascript/components/search/filter_tabs.test.ts
index 2189b474c3..76be6bf39a 100644
--- a/test/javascript/components/search/filter_tabs.test.ts
+++ b/test/javascript/components/search/filter_tabs.test.ts
@@ -1,16 +1,15 @@
-import "components/filter_tabs";
-import { FilterTabs } from "components/filter_tabs";
+import "components/search/filter_tabs";
+import { FilterTabs } from "components/search/filter_tabs";
 import { fixture, nextFrame } from "@open-wc/testing-helpers";
 import userEvent from "@testing-library/user-event";
 import { screen } from "@testing-library/dom";
-import { SearchQuery } from "search";
+import { searchQueryState } from "state/SearchQuery";
 
 describe("FilterTabs", () => {
     let filterTabs: FilterTabs;
     beforeEach(async () => {
-        const searchQuery = new SearchQuery("test.dodona.be");
-        filterTabs = await fixture(`<d-filter-tabs .searchQuery=${searchQuery}
-                                                           labels='[{ "name": "fool", "id": "1" }, { "name": "bar", "id": "2" }, { "name": "baz", "id": "3" }]'
+        searchQueryState.queryParams.clear();
+        filterTabs = await fixture(`<d-filter-tabs labels='[{ "name": "fool", "id": "1" }, { "name": "bar", "id": "2" }, { "name": "baz", "id": "3" }]'
                                        ></d-filter-tabs>`);
     });
 
@@ -22,7 +21,7 @@ describe("FilterTabs", () => {
 
     it("should set the query param to the selected label", async () => {
         await userEvent.click(screen.getByText("bar"));
-        expect(filterTabs.searchQuery.queryParams.params.get("tab")).toBe("2");
+        expect(searchQueryState.queryParams.get("tab")).toBe("2");
     });
 
     it("should mark selected labels as active", async () => {
@@ -32,11 +31,11 @@ describe("FilterTabs", () => {
 
     it("should select the first label when no label is selected", async () => {
         expect(screen.getByText("fool").classList).toContain("active");
-        expect(filterTabs.searchQuery.queryParams.params.get("tab")).toBe("1");
+        expect(searchQueryState.queryParams.get("tab")).toBe("1");
     });
 
     it("should update the active label when the query param changes", async () => {
-        filterTabs.searchQuery.queryParams.updateParam("tab", "2");
+        searchQueryState.queryParams.set("tab", "2");
         await nextFrame();
         expect(screen.getByText("bar").classList).toContain("active");
     });
diff --git a/test/javascript/components/search/search_actions.test.ts b/test/javascript/components/search/search_actions.test.ts
index dbb0cab367..137fe5951c 100644
--- a/test/javascript/components/search/search_actions.test.ts
+++ b/test/javascript/components/search/search_actions.test.ts
@@ -1,26 +1,26 @@
-import "components/search_actions";
-import { SearchAction, SearchActions, SearchOption } from "components/search_actions";
+import "components/search/search_actions";
+import { SearchAction, SearchActions, SearchOption } from "components/search/search_actions";
 import { fixture, nextFrame } from "@open-wc/testing-helpers";
 import userEvent from "@testing-library/user-event";
 import { screen } from "@testing-library/dom";
-import { SearchQuery } from "search";
 import { html } from "lit";
 import * as util from "util.js";
+import { searchQueryState } from "state/SearchQuery";
 
 describe("SearchActions", () => {
     let searchActions: SearchActions;
     beforeEach(async () => {
+        searchQueryState.queryParams.clear();
+        searchQueryState.arrayQueryParams.clear();
         const actions: (SearchOption | SearchAction)[] = [
             { text: "foo", search: { foo: "bar", fool: "bars" } },
             { text: "bar", icon: "replay", confirm: "Are you sure?", action: "https://test.dodona.be/destroy" },
             { icon: "test", text: "js-test", js: "window.alert('test')" },
             { icon: "link", text: "link-test", url: "https://test.dodona.be" },
         ];
-        const searchQuery = new SearchQuery("test.dodona.be");
         await fixture(`<div class="toasts"></div>`);
         searchActions = await fixture(html`
-            <d-search-actions .searchQuery=${searchQuery}
-                              .actions=${actions}
+            <d-search-actions .actions=${actions}
             ></d-search-actions>`);
     });
 
@@ -40,12 +40,12 @@ describe("SearchActions", () => {
         expect(checkbox.checked).toBe(false);
         await userEvent.click(checkbox);
         expect(checkbox.checked).toBe(true);
-        expect(searchActions.searchQuery.queryParams.params.get("foo")).toBe("bar");
-        expect(searchActions.searchQuery.queryParams.params.get("fool")).toBe("bars");
-        searchActions.searchQuery.queryParams.updateParam("foo", undefined);
+        expect(searchQueryState.queryParams.get("foo")).toBe("bar");
+        expect(searchQueryState.queryParams.get("fool")).toBe("bars");
+        searchQueryState.queryParams.set("foo", undefined);
         await nextFrame();
         expect(checkbox.checked).toBe(false);
-        searchActions.searchQuery.queryParams.updateParam("foo", "bar");
+        searchQueryState.queryParams.set("foo", "bar");
         await nextFrame();
         expect(checkbox.checked).toBe(true);
     });
@@ -98,7 +98,7 @@ describe("SearchActions", () => {
         jest.spyOn(util, "fetch").mockImplementation(() => Promise.resolve({
             json: () => Promise.resolve({}),
         } as Response));
-        searchActions.searchQuery.queryParams.updateParam("foo", "bar");
+        searchQueryState.queryParams.set("foo", "bar");
         await userEvent.click(screen.queryByText("bar"));
         expect(util.fetch).toHaveBeenCalledWith("https://test.dodona.be/destroy?foo=bar", {
             method: "POST",
diff --git a/test/javascript/components/search/search_field.test.ts b/test/javascript/components/search/search_field.test.ts
index 6f10fb789d..fc3ee4494b 100644
--- a/test/javascript/components/search/search_field.test.ts
+++ b/test/javascript/components/search/search_field.test.ts
@@ -1,11 +1,11 @@
-import "components/search_field";
+import "components/search/search_field";
 import { aTimeout, fixture, nextFrame } from "@open-wc/testing-helpers";
 import userEvent from "@testing-library/user-event";
 import { screen } from "@testing-library/dom";
-import { SearchField, SearchFieldSuggestion } from "components/search_field";
-import { Label, FilterCollection } from "components/filter_collection_element";
+import { SearchField, SearchFieldSuggestion } from "components/search/search_field";
+import { Label, FilterCollection } from "components/search/filter_collection_element";
 import { html } from "lit";
-import { SearchQuery } from "search";
+import { searchQueryState } from "state/SearchQuery";
 
 /**
  * https://github.com/testing-library/dom-testing-library/issues/410#issuecomment-1060917305
@@ -39,15 +39,14 @@ function textContentMatcher(textMatch: string | RegExp): (_content: string, node
 describe("SearchFieldSuggestion", () => {
     let searchFieldSuggestion;
     beforeEach(async () => {
-        const searchQuery = new SearchQuery("test.dodona.be");
+        searchQueryState.queryParams.clear();
         searchFieldSuggestion = await fixture(html`
             <d-search-field-suggestion param="foo"
                                        labels='[{ "name": "fool", "id": "1" }, { "name": "bar", "id": "2" }, { "name": "baz", "id": "3" }]'
                                        type="test"
                                        .paramVal=${(l: Label) => l.id}
                                        filter="ba"
-                                       .multi=${false}
-                                       .searchQuery=${searchQuery}>
+                                       .multi=${false}>
             </d-search-field-suggestion>`) as SearchFieldSuggestion;
     });
 
@@ -67,8 +66,8 @@ describe("SearchFieldSuggestion", () => {
 
     it("should set the query param to the selected label", async () => {
         await userEvent.click(screen.getByText(textContentMatcher("bar")));
-        expect(searchFieldSuggestion.searchQuery.queryParams.params.get("foo")).toBe("2");
-        expect(searchFieldSuggestion.searchQuery.queryParams.params.get("filter")).toBe(undefined);
+        expect(searchQueryState.queryParams.get("foo")).toBe("2");
+        expect(searchQueryState.queryParams.get("filter")).toBe(undefined);
     });
 
     it("should display nothing if the filter does not match any label", async () => {
@@ -83,7 +82,7 @@ describe("SearchFieldSuggestion", () => {
         await userEvent.click(screen.getByText(textContentMatcher("bar")));
         searchFieldSuggestion.filter = "ba";
         await nextFrame();
-        expect(searchFieldSuggestion.searchQuery.queryParams.params.get("foo")).toBe("2");
+        expect(searchQueryState.queryParams.get("foo")).toBe("2");
 
         expect(searchFieldSuggestion.getFilteredLabels().length).toBe(1);
         expect(screen.queryByText(textContentMatcher("bar"))).toBeNull();
@@ -91,7 +90,9 @@ describe("SearchFieldSuggestion", () => {
 });
 
 describe("SearchField", () => {
-    async function searchFieldFactory(): Promise<SearchField> {
+    let searchField: SearchField;
+    beforeEach(async () => {
+        searchQueryState.queryParams.clear();
         const filterCollections: Record<string, FilterCollection> = {
             first: {
                 param: "foo",
@@ -116,34 +117,30 @@ describe("SearchField", () => {
                 paramVal: (l: Label) => l.id,
             }
         };
-        const searchQuery = new SearchQuery("test.dodona.be");
 
-        return await fixture(html`
+        searchField = await fixture(html`
             <d-search-field placeholder="Search"
                             .filterCollections="${filterCollections}"
-                            .searchQuery=${searchQuery}
             ></d-search-field>
         `);
-    }
+    });
 
     it("should display the placeholder", async () => {
-        const searchField = await searchFieldFactory();
         const input = searchField.querySelector("input");
         expect(input.placeholder).toBe("Search");
     });
 
     it("should update the filter query param when the input changes", async () => {
-        const searchField = await searchFieldFactory();
         const input = searchField.querySelector("input");
         await userEvent.type(input, "foo");
         await aTimeout(500); // the update is delayed
-        expect(searchField.searchQuery.queryParams.params.get("filter")).toBe("foo");
+        expect(searchQueryState.queryParams.get("filter")).toBe("foo");
     });
 
     it("should filter the labels", async () => {
-        const searchField = await searchFieldFactory();
         const input = searchField.querySelector("input");
         await userEvent.type(input, "foo");
+        await aTimeout(500); // the update is delayed
         expect(screen.queryByText(textContentMatcher("bar"))).toBeNull();
         expect(screen.queryByText(textContentMatcher("baz"))).toBeNull();
         expect(screen.queryByText(textContentMatcher("fool"))).not.toBeNull();
@@ -151,23 +148,21 @@ describe("SearchField", () => {
     });
 
     it("should autocomplete the input with the first label on tab", async () => {
-        const searchField = await searchFieldFactory();
         const input = searchField.querySelector("input");
         await userEvent.type(input, "foo{tab}");
         await aTimeout(500); // the update is delayed
-        expect(searchField.searchQuery.queryParams.params.get("foo")).toBe("1");
-        expect(searchField.searchQuery.queryParams.params.get("filter")).toBeFalsy();
-        expect(searchField.searchQuery.queryParams.params.get("bar")).toBeFalsy();
+        expect(searchQueryState.queryParams.get("foo")).toBe("1");
+        expect(searchQueryState.queryParams.get("filter")).toBeFalsy();
+        expect(searchQueryState.queryParams.get("bar")).toBeFalsy();
     });
 
     it("should reset the filter when a label is selected", async () => {
-        const searchField = await searchFieldFactory();
         const input = searchField.querySelector("input");
         await userEvent.type(input, "foo");
         await aTimeout(500); // the update is delayed
-        expect(searchField.searchQuery.queryParams.params.get("filter")).toBe("foo");
+        expect(searchQueryState.queryParams.get("filter")).toBe("foo");
         await userEvent.click(screen.getByText(textContentMatcher("fool")));
-        expect(searchField.searchQuery.queryParams.params.get("filter")).toBeFalsy();
+        expect(searchQueryState.queryParams.get("filter")).toBeFalsy();
         expect(input.value).toBe("");
     });
 });
diff --git a/test/javascript/components/search/search_token.test.ts b/test/javascript/components/search/search_token.test.ts
index 67e5263367..c7c7812455 100644
--- a/test/javascript/components/search/search_token.test.ts
+++ b/test/javascript/components/search/search_token.test.ts
@@ -1,24 +1,22 @@
-import "components/search_token";
-import { SearchToken } from "components/search_token";
+import "components/search/search_token";
+import { SearchToken } from "components/search/search_token";
 import { fixture, nextFrame } from "@open-wc/testing-helpers";
 import userEvent from "@testing-library/user-event";
 import { screen } from "@testing-library/dom";
-import { SearchQuery } from "search";
 import { html } from "lit/development";
-import { Label } from "components/filter_collection_element";
+import { Label } from "components/search/filter_collection_element";
+import { searchQueryState } from "state/SearchQuery";
 
 describe("SearchToken", () => {
     let searchToken;
     beforeEach(async () => {
-        const searchQuery = new SearchQuery("test.dodona.be");
         searchToken = await fixture(html`
             <d-search-token param="foo"
                                        labels='[{ "name": "fool", "id": "1" }, { "name": "bar", "id": "2" }, { "name": "baz", "id": "3" }]'
                                        type="test"
                                        .paramVal=${(l: Label) => l.id}
                                        .color=${() => "pink"}
-                                       .multi=${false}
-                                       .searchQuery=${searchQuery}>
+                                       .multi=${false}>
             </d-search-token>`) as SearchToken;
     });
 
@@ -26,7 +24,7 @@ describe("SearchToken", () => {
         expect(screen.queryByText("bar")).toBeNull();
         expect(screen.queryByText("baz")).toBeNull();
         expect(screen.queryByText("fool")).toBeNull();
-        searchToken.searchQuery.queryParams.updateParam("foo", "2");
+        searchQueryState.queryParams.set("foo", "2");
         await nextFrame();
         expect(screen.queryByText("bar")).not.toBeNull();
         expect(screen.queryByText("baz")).toBeNull();
@@ -34,12 +32,12 @@ describe("SearchToken", () => {
     });
 
     it("can only display one label when multi is false", async () => {
-        searchToken.searchQuery.queryParams.updateParam("foo", "2");
+        searchQueryState.queryParams.set("foo", "2");
         await nextFrame();
         expect(screen.queryByText("bar")).not.toBeNull();
         expect(screen.queryByText("baz")).toBeNull();
         expect(screen.queryByText("fool")).toBeNull();
-        searchToken.searchQuery.queryParams.updateParam("foo", "3");
+        searchQueryState.queryParams.set("foo", "3");
         await nextFrame();
         expect(screen.queryByText("bar")).toBeNull();
         expect(screen.queryByText("baz")).not.toBeNull();
@@ -49,7 +47,7 @@ describe("SearchToken", () => {
     it("can display multiple labels when multi is true", async () => {
         searchToken.multi = true;
         await nextFrame();
-        searchToken.searchQuery.arrayQueryParams.updateParam("foo", ["2", "3"]);
+        searchQueryState.arrayQueryParams.set("foo", ["2", "3"]);
         await nextFrame();
         expect(screen.queryByText("bar")).not.toBeNull();
         expect(screen.queryByText("baz")).not.toBeNull();
@@ -57,7 +55,7 @@ describe("SearchToken", () => {
     });
 
     it("should have a button to remove the selected label", async () => {
-        searchToken.searchQuery.queryParams.updateParam("foo", "2");
+        searchQueryState.queryParams.set("foo", "2");
         await nextFrame();
         expect(screen.queryByText("bar")).not.toBeNull();
         const button = searchToken.querySelector("a.close");
diff --git a/test/javascript/components/search/sort_button.test.ts b/test/javascript/components/search/sort_button.test.ts
index a7d72b14bf..6486a5c507 100644
--- a/test/javascript/components/search/sort_button.test.ts
+++ b/test/javascript/components/search/sort_button.test.ts
@@ -1,28 +1,22 @@
-import "components/sort_button";
-import { SortQuery } from "components/sort_button";
-import { SearchQuery } from "search";
+import "components/search/sort_button";
 import { fixture, nextFrame } from "@open-wc/testing-helpers";
 import { screen } from "@testing-library/dom";
 import userEvent from "@testing-library/user-event";
 import { html } from "lit";
+import { searchQueryState } from "state/SearchQuery";
 
 describe("SortButton", () => {
-    let sortQuery: SortQuery;
     beforeEach(async () => {
-        const searchQuery = new SearchQuery("test.dodona.be");
-        sortQuery = new SortQuery(searchQuery);
+        searchQueryState.queryParams.clear();
         await fixture(html`
-            <d-sort-button .sortQuery=${sortQuery}
-                           column="foo"
+            <d-sort-button column="foo"
                            default="ASC">
                 Foo
             </d-sort-button>
-            <d-sort-button .sortQuery=${sortQuery}
-                           column="bar">
+            <d-sort-button column="bar">
                 Bar
             </d-sort-button>
-            <d-sort-button .sortQuery=${sortQuery}
-                           column="bal"
+            <d-sort-button column="bal"
                            .disabled="${true}">
                 Bal
             </d-sort-button>
@@ -31,49 +25,49 @@ describe("SortButton", () => {
 
     it("should set the sort query parameter when clicked", async () => {
         await userEvent.click(screen.getByText("Bar"));
-        expect(sortQuery.active_column).toBe("bar");
-        expect(sortQuery.ascending).toBe(true);
+        expect(searchQueryState.queryParams.get("order_by[column]")).toBe("bar");
+        expect(searchQueryState.queryParams.get("order_by[direction]")).toBe("ASC");
     });
 
     it("should set the sort query parameter to descending when clicked twice", async () => {
         await userEvent.click(screen.getByText("Bar"));
         await userEvent.click(screen.getByText("Bar"));
-        expect(sortQuery.active_column).toBe("bar");
-        expect(sortQuery.ascending).toBe(false);
+        expect(searchQueryState.queryParams.get("order_by[column]")).toBe("bar");
+        expect(searchQueryState.queryParams.get("order_by[direction]")).toBe("DESC");
     });
 
     it("should set the sort query back to ascending when clicked three times", async () => {
         await userEvent.click(screen.getByText("Bar"));
         await userEvent.click(screen.getByText("Bar"));
         await userEvent.click(screen.getByText("Bar"));
-        expect(sortQuery.active_column).toBe("bar");
-        expect(sortQuery.ascending).toBe(true);
+        expect(searchQueryState.queryParams.get("order_by[column]")).toBe("bar");
+        expect(searchQueryState.queryParams.get("order_by[direction]")).toBe("ASC");
     });
 
     it("should trigger descending when starting as ascending", async () => {
         await userEvent.click(screen.getByText("Foo"));
-        expect(sortQuery.active_column).toBe("foo");
-        expect(sortQuery.ascending).toBe(false);
+        expect(searchQueryState.queryParams.get("order_by[column]")).toBe("foo");
+        expect(searchQueryState.queryParams.get("order_by[direction]")).toBe("DESC");
     });
 
     it("should not do anything when clicking a disabled button", async () => {
         await userEvent.click(screen.getByText("Bal"));
-        expect(sortQuery.active_column).toBe(undefined);
-        expect(sortQuery.ascending).toBe(false);
+        expect(searchQueryState.queryParams.get("order_by[column]")).toBe(undefined);
+        expect(searchQueryState.queryParams.get("order_by[direction]")).toBe(undefined);
     });
 
     it("should update if change is set from outside", async () => {
-        sortQuery.active_column = "bar";
-        sortQuery.ascending = false;
+        searchQueryState.queryParams.set("order_by[column]", "bar");
+        searchQueryState.queryParams.set("order_by[direction]", "DESC");
         await nextFrame();
         await userEvent.click(screen.getByText("Bar"));
-        expect(sortQuery.active_column).toBe("bar");
-        expect(sortQuery.ascending).toBe(true);
+        expect(searchQueryState.queryParams.get("order_by[column]")).toBe("bar");
+        expect(searchQueryState.queryParams.get("order_by[direction]")).toBe("ASC");
     });
 
     it("also updates the search query", async () => {
         await userEvent.click(screen.getByText("Bar"));
-        expect(sortQuery.searchQuery.queryParams.params.get("order_by[column]")).toBe("bar");
-        expect(sortQuery.searchQuery.queryParams.params.get("order_by[direction]")).toBe("ASC");
+        expect(searchQueryState.queryParams.get("order_by[column]")).toBe("bar");
+        expect(searchQueryState.queryParams.get("order_by[direction]")).toBe("ASC");
     });
 });
diff --git a/test/javascript/components/search/standalone-dropdown-filter.test.ts b/test/javascript/components/search/standalone-dropdown-filter.test.ts
index fa77872eb1..f60b4b3b16 100644
--- a/test/javascript/components/search/standalone-dropdown-filter.test.ts
+++ b/test/javascript/components/search/standalone-dropdown-filter.test.ts
@@ -1,10 +1,10 @@
-import "components/standalone-dropdown-filter";
-import { StandaloneDropdownFilter } from "components/standalone-dropdown-filter";
+import "components/search/standalone-dropdown-filter";
+import { StandaloneDropdownFilter } from "components/search/standalone-dropdown-filter";
 import { fixture } from "@open-wc/testing-helpers";
 import userEvent from "@testing-library/user-event";
 import { getByText, queryByText, screen } from "@testing-library/dom";
-import { SearchQuery } from "search";
 import { html } from "lit/development";
+import { searchQueryState } from "state/SearchQuery";
 
 
 describe("DropdownFilter", () => {
@@ -12,11 +12,10 @@ describe("DropdownFilter", () => {
     let dropdownMenu: HTMLElement;
     let dropdownButton: HTMLElement;
     beforeEach(async () => {
-        const searchQuery = new SearchQuery("test.dodona.be");
+        searchQueryState.queryParams.clear();
         standaloneDropdownFilter = await fixture(html`
             <d-standalone-dropdown-filter param="foo"
                                        labels='[{ "name": "fool", "id": "1" }, { "name": "bar", "id": "2" }, { "name": "baz", "id": "3" }]'
-                                       .searchQuery=${searchQuery}
                                         default="1">
             </d-standalone-dropdown-filter>`);
         dropdownMenu = screen.getByRole("list");
@@ -31,7 +30,7 @@ describe("DropdownFilter", () => {
 
     it("should set the query param to the selected label", async () => {
         await userEvent.click(getByText(dropdownMenu, "bar"));
-        expect(standaloneDropdownFilter.searchQuery.queryParams.params.get("foo")).toBe("2");
+        expect(searchQueryState.queryParams.get("foo")).toBe("2");
     });
 
     it("should mark selected labels as active", async () => {
@@ -63,7 +62,7 @@ describe("DropdownFilter", () => {
     });
 
     it("should set the default option as active on the search query", async () => {
-        expect(standaloneDropdownFilter.searchQuery.queryParams.params.get("foo")).toBe("1");
+        expect(searchQueryState.queryParams.get("foo")).toBe("1");
     });
 });
 
diff --git a/test/javascript/mark.test.ts b/test/javascript/mark.test.ts
new file mode 100644
index 0000000000..fa6caedd48
--- /dev/null
+++ b/test/javascript/mark.test.ts
@@ -0,0 +1,54 @@
+import { wrapRangesInHtml } from "mark";
+
+test("marking a range in an empty string should still create a marker", () => {
+    const result = wrapRangesInHtml("", [{ start: 0, length: 1 }], "mark", () => undefined);
+    expect(result).toBe("<mark></mark>");
+});
+
+test("marking a range in a string should create a marker", () => {
+    const result = wrapRangesInHtml("Hello World", [{ start: 0, length: 5 }], "mark", () => undefined);
+    expect(result).toBe("<mark>Hello</mark> World");
+});
+
+test("marking a range in a complex html string should create a marker", () => {
+    const result = wrapRangesInHtml("<div><span>H<a>e</a></span>l<div>lo Wo</div>rld</div>", [{ start: 0, length: 5 }], "mark", () => undefined);
+    expect(result).toBe("<div><span><mark>H</mark><a><mark>e</mark></a></span><mark>l</mark><div><mark>lo</mark> Wo</div>rld</div>");
+});
+
+test("Callback should be called for each marker", () => {
+    const callback = jest.fn();
+    wrapRangesInHtml("<div><span>H<a>e</a></span>l<div>lo Wo</div>rld</div>", [{ start: 0, length: 5 }], "mark", callback);
+    expect(callback).toHaveBeenCalledTimes(4);
+});
+
+test("should be able to mark multiple ranges", () => {
+    const result = wrapRangesInHtml("<div><span>H<a>e</a></span>l<div>lo Wo</div>rld</div>", [{ start: 0, length: 5 }, { start: 6, length: 2 }], "mark", () => undefined);
+    expect(result).toBe("<div><span><mark>H</mark><a><mark>e</mark></a></span><mark>l</mark><div><mark>lo</mark> <mark>Wo</mark></div>rld</div>");
+});
+
+test("should be able to mark multiple ranges with overlapping ranges", () => {
+    const result = wrapRangesInHtml("<div><span>H<a>e</a></span>l<div>lo Wo</div>rld</div>", [{ start: 0, length: 5 }, { start: 2, length: 2 }], "mark", () => undefined);
+    expect(result).toBe("<div><span><mark>H</mark><a><mark>e</mark></a></span><mark>l</mark><div><mark>lo</mark> Wo</div>rld</div>");
+});
+
+test("Callback should be called for each marker for each range", () => {
+    const callback = jest.fn();
+    wrapRangesInHtml("<div><span>H<a>e</a></span>l<div>lo Wo</div>rld</div>", [{ start: 0, length: 5 }, { start: 2, length: 2 }], "mark", callback);
+    expect(callback).toHaveBeenCalledTimes(6);
+});
+
+test("should be able to edit attributes of the marker in the callback", () => {
+    const callback = jest.fn((element, range) => {
+        const test = element.getAttribute("data-test") || "";
+        element.setAttribute("data-test", test + range.data);
+    });
+    const result = wrapRangesInHtml("<div><span>H<a>e</a></span>l<div>lo Wo</div>rld</div>", [{ start: 0, length: 5, data: "foo" }, { start: 2, length: 7, data: "bar" }], "mark", callback);
+    expect(callback).toHaveBeenCalledWith(expect.any(HTMLElement), { start: 0, length: 5, data: "foo" });
+    expect(callback).toHaveBeenCalledWith(expect.any(HTMLElement), { start: 2, length: 7, data: "bar" });
+    expect(result).toBe("<div><span><mark data-test=\"foo\">H</mark><a><mark data-test=\"foo\">e</mark></a></span><mark data-test=\"foobar\">l</mark><div><mark data-test=\"foobar\">lo</mark><mark data-test=\"bar\"> Wo</mark></div><mark data-test=\"bar\">r</mark>ld</div>");
+});
+
+test("should be able to mark zero length ranges", () => {
+    const result = wrapRangesInHtml("<div><span>H<a>e</a></span>l<div>lo Wo</div>rld</div>", [{ start: 0, length: 0 }, { start: 5, length: 0 }, { start: 8, length: 0 }, { start: 11, length: 0 }], "mark", () => undefined);
+    expect(result).toBe("<div><span><mark></mark>H<a>e</a></span>l<div>lo<mark></mark> Wo<mark></mark></div>rld<mark></mark></div>");
+});
diff --git a/test/javascript/state/state_system/State.test.ts b/test/javascript/state/state_system/State.test.ts
new file mode 100644
index 0000000000..b46318886e
--- /dev/null
+++ b/test/javascript/state/state_system/State.test.ts
@@ -0,0 +1,33 @@
+import { State } from "state/state_system/State";
+import { stateProperty } from "state/state_system/StateProperty";
+import { stateRecorder } from "state/state_system/StateRecorder";
+
+class ExampleState extends State {
+    @stateProperty foo = "bar";
+    @stateProperty fool = "bars";
+}
+
+test("a subscriber to a state should get notified anytime a stateProperty changes", () => {
+    const state = new ExampleState();
+    const subscriber = jest.fn();
+    state.subscribe(subscriber);
+    state.foo = "baz";
+    expect(subscriber).toHaveBeenCalled();
+});
+
+test("a subscriber to a stateProperty should get notified anytime that stateProperty changes", () => {
+    const state = new ExampleState();
+    const subscriber = jest.fn();
+    state.subscribe(subscriber, "foo");
+    state.fool = "baz";
+    expect(subscriber).not.toHaveBeenCalled();
+    state.foo = "baz";
+    expect(subscriber).toHaveBeenCalled();
+});
+
+test("reading a stateProperty should record a read", () => {
+    const state = new ExampleState();
+    jest.spyOn(stateRecorder, "recordRead");
+    state.foo;
+    expect(stateRecorder.recordRead).toHaveBeenCalled();
+});
diff --git a/test/javascript/state/state_system/StateController.test.ts b/test/javascript/state/state_system/StateController.test.ts
new file mode 100644
index 0000000000..4897baeada
--- /dev/null
+++ b/test/javascript/state/state_system/StateController.test.ts
@@ -0,0 +1,93 @@
+import { State } from "state/state_system/State";
+import { StateController } from "state/state_system/StateController";
+import { LitElement } from "lit";
+import { stateProperty } from "state/state_system/StateProperty";
+import { customElement } from "lit/decorators.js";
+import { fixture } from "@open-wc/testing-helpers";
+import spyOn = jest.spyOn;
+
+class ExampleState extends State {
+    @stateProperty foo = "bar";
+    @stateProperty fool = "bars";
+}
+const state = new ExampleState();
+
+@customElement("example-element")
+class ExampleElement extends LitElement {}
+
+let el: ExampleElement;
+let controller: StateController;
+beforeEach(async () => {
+    el = await fixture(`<example-element></example-element>`);
+    controller = new StateController(el);
+});
+
+test("StateController trigger host to update ech time a stateProperty it read changes", () => {
+    controller.hostUpdate();
+    state.foo;
+    controller.hostUpdated();
+    expect(controller.unsubscribeList.length).toBe(1);
+    expect(controller.unsubscribeList[0]).toBeInstanceOf(Function);
+});
+
+test("StateController should unsubscribe from all stateProperties when disconnected", () => {
+    controller.hostUpdate();
+    state.foo;
+    controller.hostUpdated();
+    expect(controller.unsubscribeList.length).toBe(1);
+    controller.hostDisconnected();
+    expect(controller.unsubscribeList.length).toBe(0);
+});
+
+test("StateController should request update when a stateProperty it read changes", () => {
+    controller.hostUpdate();
+    state.foo;
+    controller.hostUpdated();
+    jest.spyOn(el, "requestUpdate");
+    state.foo = "baz";
+    expect(el.requestUpdate).toHaveBeenCalled();
+});
+
+test("StateController should not request an update when a property it did not read changes", () => {
+    controller.hostUpdate();
+    state.foo;
+    controller.hostUpdated();
+    jest.spyOn(el, "requestUpdate");
+    state.fool = "baz";
+    expect(el.requestUpdate).not.toHaveBeenCalled();
+});
+
+test("A statecontroller should listen to multiple states", () => {
+    const state2 = new ExampleState();
+    controller.hostUpdate();
+    state.foo;
+    state2.foo;
+    controller.hostUpdated();
+    expect(controller.unsubscribeList.length).toBe(2);
+});
+
+test("A statecontroller should update its subcribe list each update cycle", () => {
+    const state2 = new ExampleState();
+    controller.hostUpdate();
+    state.foo;
+    state2.foo;
+    controller.hostUpdated();
+    expect(controller.unsubscribeList.length).toBe(2);
+    controller.hostUpdate();
+    state.foo;
+    controller.hostUpdated();
+    expect(controller.unsubscribeList.length).toBe(1);
+});
+
+test("A statecontroller creates a single subcriber for each state", () => {
+    controller.hostUpdate();
+    state.foo;
+    state.fool;
+    controller.hostUpdated();
+    expect(controller.unsubscribeList.length).toBe(1);
+    spyOn(el, "requestUpdate");
+    state.foo = "baz";
+    expect(el.requestUpdate).toHaveBeenCalled();
+    state.fool = "baz";
+    expect(el.requestUpdate).toHaveBeenCalledTimes(2);
+});
diff --git a/test/javascript/state/state_system/StateMap.test.ts b/test/javascript/state/state_system/StateMap.test.ts
new file mode 100644
index 0000000000..a73bfaed66
--- /dev/null
+++ b/test/javascript/state/state_system/StateMap.test.ts
@@ -0,0 +1,68 @@
+import { ShadowlessLitElement } from "components/meta/shadowless_lit_element";
+import { StateMap } from "state/state_system/StateMap";
+import { html, TemplateResult } from "lit";
+import { customElement } from "lit/decorators.js";
+import { fixture, nextFrame } from "@open-wc/testing-helpers";
+import { screen } from "@testing-library/dom";
+import { stateRecorder } from "state/state_system/StateRecorder";
+
+describe( "StateMap", () => {
+    const stateMap: StateMap<string, string> = new StateMap<string, string>();
+    @customElement("test-component")
+    class TestComponent extends ShadowlessLitElement {
+        protected render(): TemplateResult {
+            return html`<span>${stateMap.get("foo")}</span>`;
+        }
+    }
+    beforeEach(async () => {
+        stateMap.clear();
+        await fixture(`<test-component></test-component>`);
+    });
+
+    test("stateMap should update users if used key gets updated", async () => {
+        expect(screen.queryByText("bar")).toBeNull();
+        stateMap.set("foo", "bar");
+        await nextFrame();
+        expect(screen.queryByText("bar")).not.toBeNull();
+    });
+
+    test("stateMap should update users if used key gets deleted", async () => {
+        stateMap.set("foo", "bar");
+        await nextFrame();
+        expect(screen.queryByText("bar")).not.toBeNull();
+        stateMap.delete("foo");
+        await nextFrame();
+        expect(screen.queryByText("bar")).toBeNull();
+    });
+
+    test("stateMap should update users if used key gets cleared", async () => {
+        stateMap.set("foo", "bar");
+        await nextFrame();
+        expect(screen.queryByText("bar")).not.toBeNull();
+        stateMap.clear();
+        await nextFrame();
+        expect(screen.queryByText("bar")).toBeNull();
+    });
+
+    test("should record read on a values call", async () => {
+        jest.spyOn(stateRecorder, "recordRead");
+        stateMap.values();
+        expect(stateRecorder.recordRead).toHaveBeenCalled();
+    });
+
+    test("subscriber should get notified for any change to the map", () => {
+        const subscriber = jest.fn();
+        stateMap.subscribe(subscriber);
+        stateMap.set("foo", "bar");
+        expect(subscriber).toHaveBeenCalled();
+    });
+
+    test("A subscriber to a specific key should get notified for any change to that key", () => {
+        const subscriber = jest.fn();
+        stateMap.subscribe(subscriber, "foo");
+        stateMap.set("fool", "bar");
+        expect(subscriber).not.toHaveBeenCalled();
+        stateMap.set("foo", "bar");
+        expect(subscriber).toHaveBeenCalled();
+    });
+});
diff --git a/test/javascript/state/state_system/StateRecorder.test.ts b/test/javascript/state/state_system/StateRecorder.test.ts
new file mode 100644
index 0000000000..6b3675c862
--- /dev/null
+++ b/test/javascript/state/state_system/StateRecorder.test.ts
@@ -0,0 +1,53 @@
+import { stateRecorder } from "state/state_system/StateRecorder";
+import { State } from "state/state_system/State";
+
+test("stateRecorder should record all record read events between start and finish", () => {
+    const state = new State();
+    stateRecorder.start();
+    stateRecorder.recordRead(state, "foo");
+    stateRecorder.recordRead(state, "bar");
+    stateRecorder.recordRead(state, "foo");
+    const log = stateRecorder.finish();
+    expect(log.get(state).has("foo")).toBe(true);
+    expect(log.get(state).has("bar")).toBe(true);
+});
+
+test("stateRecorder should be able to record from multiple states", () => {
+    const state1 = new State();
+    const state2 = new State();
+    stateRecorder.start();
+    stateRecorder.recordRead(state1, "foo");
+    stateRecorder.recordRead(state2, "bar");
+    stateRecorder.recordRead(state2, "foo");
+    const log = stateRecorder.finish();
+    expect(log.get(state1).has("foo")).toBe(true);
+    expect(log.get(state1).has("bar")).toBe(false);
+    expect(log.get(state2).has("bar")).toBe(true);
+    expect(log.get(state2).has("foo")).toBe(true);
+});
+
+test("stateRecorder should not ignore reads before start", () => {
+    const state = new State();
+    stateRecorder.recordRead(state, "foo");
+    stateRecorder.recordRead(state, "bar");
+    stateRecorder.recordRead(state, "foo");
+    expect(() => stateRecorder.finish()).toThrow();
+    stateRecorder.start();
+    const log = stateRecorder.finish();
+    expect(log.size).toBe(0);
+});
+
+test("stateRecorder should ignore record read events if already finished", () => {
+    const state = new State();
+    stateRecorder.start();
+    let log = stateRecorder.finish();
+    stateRecorder.recordRead(state, "foo");
+    stateRecorder.recordRead(state, "bar");
+    stateRecorder.recordRead(state, "foo");
+    expect(log.size).toBe(0);
+    expect(() => stateRecorder.finish()).toThrow();
+    stateRecorder.start();
+    log = stateRecorder.finish();
+    expect(log.size).toBe(0);
+});
+
diff --git a/test/models/activity_status_test.rb b/test/models/activity_status_test.rb
index 269b277c0c..2716e02b00 100644
--- a/test/models/activity_status_test.rb
+++ b/test/models/activity_status_test.rb
@@ -44,7 +44,10 @@ class ActivityStatusTest < ActiveSupport::TestCase
     activity = exercises(:python_exercise)
     user = users(:student)
     ActivityStatus.create(user: user, activity: activity, series: nil)
-    ActivityStatus.create(user: user, activity: activity, series: nil)
+    assert_equal 1, ActivityStatus.count
+    assert_raises ActiveRecord::RecordNotUnique do
+      ActivityStatus.create(user: user, activity: activity, series: nil)
+    end
     assert_equal 1, ActivityStatus.count
   end
 
diff --git a/test/models/annotation_test.rb b/test/models/annotation_test.rb
index 5f6f207fa4..8e4523c9f5 100644
--- a/test/models/annotation_test.rb
+++ b/test/models/annotation_test.rb
@@ -15,6 +15,10 @@
 #  last_updated_by_id  :integer          not null
 #  course_id           :integer          not null
 #  saved_annotation_id :bigint
+#  thread_root_id      :integer
+#  column              :integer
+#  rows                :integer          default(1), not null
+#  columns             :integer
 #
 require 'test_helper'
 
@@ -72,4 +76,82 @@ class AnnotationTest < ActiveSupport::TestCase
     annotation.reload
     assert_equal other_user, annotation.last_updated_by
   end
+
+  test 'can create a response to an annotation' do
+    annotation = create :annotation, submission: @submission, user: @user
+    response = create :annotation, submission: @submission, user: @annotating_user, thread_root: annotation
+    assert_equal annotation, response.thread_root
+  end
+
+  test 'can create multiple responses to an annotation' do
+    annotation = create :annotation, submission: @submission, user: @user
+    response1 = create :annotation, submission: @submission, user: @annotating_user, thread_root: annotation
+    response2 = create :annotation, submission: @submission, user: @annotating_user, thread_root: annotation
+    assert_equal annotation, response1.thread_root
+    assert_equal annotation, response2.thread_root
+    assert_equal [response1, response2], annotation.responses
+  end
+
+  test 'cannot create a response to a response' do
+    annotation = create :annotation, submission: @submission, user: @user
+    response = create :annotation, submission: @submission, user: @annotating_user, thread_root: annotation
+    response2 = create :annotation, submission: @submission, user: @annotating_user, thread_root: response
+    assert_not response2.valid?
+  end
+
+  test 'A question with a response is marked as answered' do
+    q = create :question, submission: @submission, user: @student
+    assert q.unanswered?, 'Question should start as unanswered'
+
+    create :annotation, submission: @submission, user: @annotating_user, thread_root: q
+
+    assert q.reload.answered?, 'Question should have moved onto answered status'
+  end
+
+  test 'In a thread with multiple questions, only the last one can be unanswered' do
+    q = create :question, submission: @submission, user: @student
+    assert q.unanswered?
+
+    create :annotation, submission: @submission, user: @annotating_user, thread_root: q
+    assert q.reload.answered?
+
+    q2 = create :question, submission: @submission, user: @student, thread_root: q
+    assert q2.reload.unanswered?
+
+    q3 = create :question, submission: @submission, user: @student, thread_root: q
+    assert q2.reload.answered?
+    assert q3.reload.unanswered?
+
+    create :annotation, submission: @submission, user: @annotating_user, thread_root: q
+    assert q.reload.answered?
+    assert q2.reload.answered?
+    assert q3.reload.answered?
+  end
+
+  test 'a question that is set to in progress transitions back to unanswered after delayed job execution' do
+    q = create :question, submission: @submission, user: @student
+    assert q.unanswered?
+
+    with_delayed_jobs do
+      q.update(question_state: :in_progress)
+      assert q.reload.in_progress?
+    end
+
+    run_delayed_jobs
+    assert q.reload.unanswered?
+  end
+
+  test 'should not reset question state to unanswered if it is answered before delayed job execution' do
+    q = create :question, submission: @submission, user: @student
+    assert q.unanswered?
+
+    with_delayed_jobs do
+      q.update(question_state: :in_progress)
+      assert q.reload.in_progress?
+      q.update(question_state: :answered)
+    end
+
+    run_delayed_jobs
+    assert q.reload.answered?
+  end
 end
diff --git a/test/models/course_test.rb b/test/models/course_test.rb
index 2cc4e84348..1fd1eb354b 100644
--- a/test/models/course_test.rb
+++ b/test/models/course_test.rb
@@ -224,9 +224,9 @@ class CourseTest < ActiveSupport::TestCase
     # All series and users are counted.
     assert_equal course.series.count * users.count, scoresheet[:hash].count
     # Correct series are counted.
-    assert_equal scoresheet[:hash].keys.pluck(1).to_set, scoresheet[:series].map(&:id).to_set
+    assert_equal scoresheet[:hash].keys.pluck(1).to_set, scoresheet[:series].to_set(&:id)
     # Correct users are counted.
-    assert_equal scoresheet[:hash].keys.map(&:first).to_set, users.map(&:id).to_set
+    assert_equal scoresheet[:hash].keys.to_set(&:first), users.to_set(&:id)
     # Counts are correct.
     scoresheet[:hash].each do |key, counts|
       assert_equal expected_accepted[key], counts[:accepted]
diff --git a/test/models/series_test.rb b/test/models/series_test.rb
index f80c6b36af..252c8fffc6 100644
--- a/test/models/series_test.rb
+++ b/test/models/series_test.rb
@@ -366,10 +366,10 @@ class SeriesTest < ActiveSupport::TestCase
     # Only latest submissions in the course and after the deadline are counted.
     assert_equal 2 * series.exercises.count, scoresheet[:submissions].count
     # Submissions are for the correct user.
-    assert_equal users[0, 2].map(&:id).to_set, scoresheet[:submissions].keys.map(&:first).to_set
+    assert_equal users[0, 2].to_set(&:id), scoresheet[:submissions].keys.to_set(&:first)
     # Expected submissions are returned.
-    assert_equal expected_submissions.to_set, scoresheet[:submissions].values.map(&:id).to_set
-    assert_equal expected_read_states.to_set, scoresheet[:read_states].values.map(&:id).to_set
+    assert_equal expected_submissions.to_set, scoresheet[:submissions].values.to_set(&:id)
+    assert_equal expected_read_states.to_set, scoresheet[:read_states].values.to_set(&:id)
     # Hash mapping is correct.
     scoresheet[:submissions].each do |key, submission|
       assert_equal [submission.user_id, submission.exercise.id], key
diff --git a/test/models/user_test.rb b/test/models/user_test.rb
index e2b062de97..6764bb6c78 100644
--- a/test/models/user_test.rb
+++ b/test/models/user_test.rb
@@ -937,7 +937,7 @@ def setup
   test 'jump back in should return the course if most recent activity was complete and the submission has no series' do
     user = create :user
 
-    course = create :course, series_count: 2
+    course = create :course, series_count: 2, exercises_per_series: 1
     a1 = create :exercise
     create :correct_submission, user: user, course: course, exercise: a1
 
@@ -966,14 +966,10 @@ def setup
     create :correct_submission, user: user, course: course, exercise: series.exercises.first
 
     course.series.second.update(visibility: :hidden)
-
-    assert_nil user.jump_back_in.first[:submission]
-    assert_nil user.jump_back_in.first[:activity]
-    assert_equal course, user.jump_back_in.first[:course]
-    assert_nil user.jump_back_in.first[:series]
+    assert_empty user.jump_back_in
 
     course.series.second.update(visibility: :closed)
-    assert_nil user.jump_back_in.first[:series]
+    assert_empty user.jump_back_in
 
     course.series.second.update(visibility: :open)
     assert_equal course.series.second, user.jump_back_in.first[:series]
@@ -1039,12 +1035,14 @@ def setup
     assert_equal a1, user.jump_back_in.first[:activity]
   end
 
-  test 'jump back in does not return finished series' do
+  test 'jump back in does not return finished activities, series or course' do
     user = create :user
 
-    course = create :course, series_count: 2
+    course = create :course, series_count: 3, exercises_per_series: 1
     series = course.series.first
     series.exercises << create(:exercise)
+    create :correct_submission, user: user, course: course, exercise: series.exercises.second
+    create :correct_submission, user: user, course: course, exercise: course.series.second.exercises.first
     create :correct_submission, user: user, course: course, exercise: series.exercises.first
 
     assert_nil user.jump_back_in.first[:submission]
@@ -1053,6 +1051,10 @@ def setup
     assert_nil user.jump_back_in.first[:series]
 
     assert_equal 1, user.jump_back_in.count
+
+    course.series.third.exercises = []
+
+    assert_equal 0, user.jump_back_in.count
   end
 
   test 'Open questions count gets updated when a new question is created' do
diff --git a/test/runners/result_constructor_test.rb b/test/runners/result_constructor_test.rb
index b574f76252..3daee0c36e 100644
--- a/test/runners/result_constructor_test.rb
+++ b/test/runners/result_constructor_test.rb
@@ -189,7 +189,7 @@ class ResultConstructorTest < ActiveSupport::TestCase
       status: 'correct',
       description: 'Correct',
       annotations: [
-        { row: 0, column: 0, rows: 1, columns: 1, text: 'asdf', type: 'info', externalUrl: nil }
+        { row: 0, rows: 1, text: 'asdf', type: 'info' }
       ]
     }, construct_result([
       '{ "command": "start-judgement" }',
@@ -339,6 +339,53 @@ class ResultConstructorTest < ActiveSupport::TestCase
     end
   end
 
+  test 'intentionally annoyingly wrong json should fail' do
+    error = assert_raises ResultConstructorError do
+      construct_result([
+        # This command is invalid
+        '{ "command": "start-nothing" }',
+        '{ "title": "Test", "command": "start-tab" }',
+        '{ "description": { "format": "code", "description": "..." }, "command": "start-context" }',
+        '{ "description": { "format": "plain", "description": "" }, "command": "start-testcase" }',
+        '{ "expected": "70", "command": "start-test" }'
+      ])
+    end
+    assert_equal 'Judge output is not a valid json', error.title
+
+    error = assert_raises ResultConstructorError do
+      construct_result([
+        # There is a typo in "command"
+        '{ "commund": "start-judgement" }',
+        '{ "title": "Test", "command": "start-tab" }',
+        '{ "description": { "format": "code", "description": "..." }, "command": "start-context" }',
+        '{ "description": { "format": "plain", "description": "" }, "command": "start-testcase" }',
+        '{ "expected": "70", "command": "start-test" }'
+      ])
+    end
+    assert_equal 'Dodona encountered an error while processing this valid judge output', error.title
+
+    error = assert_raises ResultConstructorError do
+      construct_result([
+        '{ "command": "start-judgement" }',
+        '{ "title": "Test", "command": "start-tab" }',
+        # A nested object is invalid: a description is a list
+        '{ "description": ["yes"], "command": "start-context" }',
+        '{ "description": { "format": "plain", "description": "" }, "command": "start-testcase" }',
+        '{ "expected": "70", "command": "start-test" }'
+      ])
+    end
+    assert_equal 'Constructed result based on judge output is not a valid json', error.title
+  end
+
+  test 'invalid code in the result constructor should fail' do
+    rc = ResultConstructor.new('en')
+    rc.stubs('start_judgement').raises('error')
+    error = assert_raises(ResultConstructorError) do
+      rc.feed('{ "command": "start-judgement" }')
+    end
+    assert_equal 'Dodona encountered an error while processing this valid judge output', error.title
+  end
+
   private
 
   def construct_result(food, locale: 'en', timeout: false)
diff --git a/test/system/activities_test.rb b/test/system/activities_test.rb
index 539be48f0c..b1cab2bfa5 100644
--- a/test/system/activities_test.rb
+++ b/test/system/activities_test.rb
@@ -42,8 +42,8 @@ class ActivitiesTest < ApplicationSystemTestCase
     Exercise.any_instance.stubs(:boilerplate).returns('boilerplate')
     create(:submission, exercise: @instance, user: @user, status: :correct, code: 'print("hello")')
     visit exercise_path(id: @instance.id)
-    assert_text 'Restore the boilerplate code.'
-    find('a', text: 'Restore the boilerplate code.').click
+    assert_text 'Restore the initial code.'
+    find('a', text: 'Restore the initial code.').click
     assert_text 'boilerplate'
   end
 
@@ -55,8 +55,8 @@ class ActivitiesTest < ApplicationSystemTestCase
     create(:submission, exercise: @instance, user: @user, status: :correct, code: 'print("😀")')
     visit exercise_path(id: @instance.id)
     assert_text 'print("😀")'
-    assert_text 'Restore the boilerplate code.'
-    find('a', text: 'Restore the boilerplate code.').click
+    assert_text 'Restore the initial code.'
+    find('a', text: 'Restore the initial code.').click
     assert_text '`<script>alert("😀")</script>`'
   end
 end
diff --git a/test/system/annotations_test.rb b/test/system/annotations_test.rb
index 4db547ce70..38fbe9f897 100644
--- a/test/system/annotations_test.rb
+++ b/test/system/annotations_test.rb
@@ -50,7 +50,7 @@ class AnnotationsTest < ApplicationSystemTestCase
       (1..@code_lines.length).each do |index|
         line = "tr#line-#{index}"
         find(line).hover
-        assert_css 'button.annotation-button'
+        assert_css '.annotation-button button'
       end
     end
   end
@@ -60,7 +60,7 @@ class AnnotationsTest < ApplicationSystemTestCase
     click_link 'Code'
 
     find('tr#line-1').hover
-    find('button.annotation-button').click
+    find('.annotation-button button').click
     within '.code-listing' do
       @code_lines.each do |code_line|
         assert_text code_line
@@ -74,7 +74,7 @@ class AnnotationsTest < ApplicationSystemTestCase
     click_link 'Code'
 
     find('tr#line-1').hover
-    find('button.annotation-button').click
+    find('.annotation-button button').click
 
     initial = 'This is a single line comment'
     within 'form.annotation-submission' do
@@ -94,7 +94,7 @@ class AnnotationsTest < ApplicationSystemTestCase
     click_link 'Code'
 
     find('tr#line-1').hover
-    find('button.annotation-button').click
+    find('.annotation-button button').click
 
     initial = 'This is a single line comment'
     within 'form.annotation-submission' do
@@ -111,7 +111,7 @@ class AnnotationsTest < ApplicationSystemTestCase
     click_link 'Code'
 
     find('tr#line-1').hover
-    find('button.annotation-button').click
+    find('.annotation-button button').click
     within 'form.annotation-submission' do
       click_button 'Cancel'
     end
@@ -130,7 +130,9 @@ class AnnotationsTest < ApplicationSystemTestCase
     end
     assert_selector('.annotation', count: 1)
 
-    find('.annotation .annotation-control-button.annotation-edit i.mdi.mdi-pencil').click
+    dropdown = find('.annotation .dropdown')
+    dropdown.click
+    dropdown.find('i.mdi.mdi-pencil').click
     replacement = Faker::Lorem.paragraph(sentence_count: 3)
 
     within 'form.annotation-submission' do
@@ -155,12 +157,10 @@ class AnnotationsTest < ApplicationSystemTestCase
     end
     assert_selector '.annotation', count: 1
 
-    find('.annotation .annotation-control-button.annotation-edit i.mdi.mdi-pencil').click
-
-    within 'form.annotation-submission' do
-      click_button 'Delete'
-      accept_confirm('Are you sure you want to delete this comment?')
-    end
+    dropdown = find('.annotation .dropdown')
+    dropdown.click
+    dropdown.find('i.mdi.mdi-delete').click
+    accept_confirm('Are you sure you want to delete this comment?')
 
     assert_no_css '.annotation'
   end
@@ -199,7 +199,10 @@ class AnnotationsTest < ApplicationSystemTestCase
       assert_text annot.annotation_text
     end
 
-    find('.annotation .annotation-control-button.annotation-edit i.mdi.mdi-pencil').click
+    dropdown = find('.annotation .dropdown')
+    dropdown.click
+    dropdown.find('i.mdi.mdi-pencil').click
+
     replacement = Faker::Lorem.characters number: 10_010
     assert_selector 'form.annotation-submission', count: 1
     # Attempt to type more than 10.000 characters.
@@ -222,7 +225,9 @@ class AnnotationsTest < ApplicationSystemTestCase
       assert_text annot.annotation_text
     end
 
-    find('.annotation .annotation-control-button.annotation-edit i.mdi.mdi-pencil').click
+    dropdown = find('.annotation .dropdown')
+    dropdown.click
+    dropdown.find('i.mdi.mdi-pencil').click
     replacement = ''
     within 'form.annotation-submission' do
       find('textarea.annotation-submission-input').fill_in with: replacement
@@ -256,7 +261,7 @@ class AnnotationsTest < ApplicationSystemTestCase
     click_link 'Code'
 
     find('tr#line-1').hover
-    find('button.annotation-button').click
+    find('.annotation-button button').click
 
     initial = ''
     within 'form.annotation-submission' do
@@ -281,7 +286,7 @@ class AnnotationsTest < ApplicationSystemTestCase
     click_link 'Code'
 
     find('tr#line-1').hover
-    find('button.annotation-button').click
+    find('.annotation-button button').click
 
     initial = Faker::Lorem.characters(number: 10_010)
     within 'form.annotation-submission' do
@@ -301,7 +306,7 @@ class AnnotationsTest < ApplicationSystemTestCase
     click_button 'Add global comment'
 
     initial = Faker::Lorem.words(number: 128).join(' ')
-    within '#feedback-table-global-annotations' do
+    within 'd-annotation-form' do
       find('textarea.annotation-submission-input').fill_in with: initial
       click_button 'Comment'
     end
@@ -333,7 +338,9 @@ class AnnotationsTest < ApplicationSystemTestCase
     end
     old_text = annot.annotation_text
 
-    find('.annotation .annotation-control-button.annotation-edit i.mdi.mdi-pencil').click
+    dropdown = find('.annotation .dropdown')
+    dropdown.click
+    dropdown.find('i.mdi.mdi-pencil').click
     replacement = Faker::Lorem.words(number: 32).join(' ')
     within 'form.annotation-submission' do
       find('textarea.annotation-submission-input').fill_in with: replacement
@@ -353,4 +360,85 @@ class AnnotationsTest < ApplicationSystemTestCase
     end
     assert_no_css 'form.annotation-submission'
   end
+
+  test 'Can reply to an annotation' do
+    create :annotation, submission: @instance, user: @zeus
+    visit(submission_path(id: @instance.id))
+    click_link 'Code'
+
+    thread = find('d-thread')
+    within thread do
+      assert_selector '.annotation', count: 1
+
+      fake_answer_input = find('input')
+      fake_answer_input.click
+
+      answer = Faker::Lorem.sentence
+      answer_field = find('textarea')
+      answer_field.fill_in with: answer
+
+      click_button 'Reply'
+
+      assert_selector '.annotation', count: 2
+    end
+  end
+
+  test 'Cannot delete an annotation with replies' do
+    annot = create :annotation, submission: @instance, user: @zeus
+    create :annotation, submission: @instance, user: @zeus, thread_root: annot
+    visit(submission_path(id: @instance.id))
+    click_link 'Code'
+
+    within 'd-thread' do
+      assert_selector '.annotation', count: 2
+
+      root = first('.annotation')
+      dropdown = root.find('.dropdown')
+      dropdown.click
+      assert_no_selector 'i.mdi.mdi-delete'
+    end
+  end
+
+  test 'Can delete an annotation after deleting all replies' do
+    annot = create :annotation, submission: @instance, user: @zeus
+    create :annotation, submission: @instance, user: @zeus, thread_root: annot
+    visit(submission_path(id: @instance.id))
+    click_link 'Code'
+
+    within 'd-thread' do
+      assert_selector '.annotation', count: 2
+
+      child = all('.annotation').last
+      dropdown = child.find('.dropdown')
+      dropdown.click
+      dropdown.find('i.mdi.mdi-delete').click
+      accept_confirm('Are you sure you want to delete this comment?')
+
+      assert_selector '.annotation', count: 1
+      root = first('.annotation')
+      dropdown = root.find('.dropdown')
+      dropdown.click
+      assert_selector 'i.mdi.mdi-delete'
+    end
+  end
+
+  test 'can delete the middle annotation in a thread' do
+    annot = create :annotation, submission: @instance, user: @zeus
+    create :annotation, submission: @instance, user: @zeus, thread_root: annot
+    create :annotation, submission: @instance, user: @zeus, thread_root: annot
+    visit(submission_path(id: @instance.id))
+    click_link 'Code'
+
+    within 'd-thread' do
+      assert_selector '.annotation', count: 3
+
+      child = all('.annotation')[1]
+      dropdown = child.find('.dropdown')
+      dropdown.click
+      dropdown.find('i.mdi.mdi-delete').click
+      accept_confirm('Are you sure you want to delete this comment?')
+
+      assert_selector '.annotation', count: 2
+    end
+  end
 end
diff --git a/test/system/questions_test.rb b/test/system/questions_test.rb
index f85685fce8..a6d037fb8f 100644
--- a/test/system/questions_test.rb
+++ b/test/system/questions_test.rb
@@ -16,6 +16,13 @@ class QuestionsTest < ApplicationSystemTestCase
     @submission.exercise.judge.save
     @student = @submission.user
     sign_in @student
+
+    @orig = Delayed::Worker.delay_jobs
+    Delayed::Worker.delay_jobs = true
+  end
+
+  teardown do
+    Delayed::Worker.delay_jobs = @orig
   end
 
   test 'Can ask question for each line of the available lines of code' do
@@ -29,7 +36,7 @@ class QuestionsTest < ApplicationSystemTestCase
         line_element.hover
 
         within line_element do
-          button = find('button.annotation-button')
+          button = find('.annotation-button button')
           button.click
           assert_css 'form.annotation-submission'
           # cancel form to limit page space taken
@@ -46,8 +53,7 @@ class QuestionsTest < ApplicationSystemTestCase
     click_link 'Code'
 
     within '.code-table' do
-      button = find('#add_global_annotation')
-      button.click
+      click_button 'Ask a question about your code'
       assert_css 'form.annotation-submission'
     end
   end
@@ -59,8 +65,7 @@ class QuestionsTest < ApplicationSystemTestCase
     question = Faker::Lorem.question
 
     within '.code-table' do
-      button = find('#add_global_annotation')
-      button.click
+      click_button 'Ask a question about your code'
 
       form = find('form.annotation-submission')
 
@@ -89,12 +94,11 @@ class QuestionsTest < ApplicationSystemTestCase
     visit(submission_path(id: @submission.id))
     click_link 'Code'
 
-    question_div = find('div.annotation.question')
-    within question_div do
-      resolve_button = find('.question-control-button.question-resolve')
+    thread = find('d-thread')
+    within thread do
+      resolve_button = find('.btn', text: 'Mark as answered')
       resolve_button.click
-      assert_no_css '.question-control-button.question-resolve'
-      # Wait until ajax call is complete
+      assert_no_css '.mdi-comment-question-outline'
     end
 
     assert_equal 1, Question.count, 'There should still only be one question'
@@ -102,4 +106,87 @@ class QuestionsTest < ApplicationSystemTestCase
     assert_not q.unanswered?, 'Question should have moved onto answered status'
     assert q.answered?, 'Question should have moved onto answered status'
   end
+
+  test 'Responding to a question should mark the question as answered' do
+    q = create :question, submission: @submission, user: @student
+    assert_equal 1, Question.count, 'Test is invalid if magically no or more questions appear here'
+    assert q.unanswered?, 'Question should start as unanswered'
+
+    visit(submission_path(id: @submission.id))
+    click_link 'Code'
+
+    thread = find('d-thread')
+    within thread do
+      assert_selector '.annotation', count: 1
+
+      fake_answer_input = find('input')
+      fake_answer_input.click
+
+      answer = Faker::Lorem.sentence
+      answer_field = find('textarea')
+      answer_field.fill_in with: answer
+
+      click_button 'Reply'
+
+      assert_selector '.annotation', count: 2
+    end
+
+    assert_equal 2, Question.count, 'There should be two questions now'
+    assert_not q.reload.unanswered?, 'Question should have moved onto answered status'
+    assert q.reload.answered?, 'Question should have moved onto answered status'
+  end
+
+  test 'An unanswered question should contain an icon to visualize its status' do
+    q = create :question, submission: @submission, user: @student
+    assert_equal 1, Question.count, 'Test is invalid if magically no or more questions appear here'
+    assert q.unanswered?, 'Question should start as unanswered'
+
+    visit(submission_path(id: @submission.id))
+    click_link 'Code'
+
+    thread = find('d-thread')
+    within thread do
+      assert_selector '.mdi-comment-question-outline'
+    end
+  end
+
+  test 'The status icon should change to in progress when someone clicks reply' do
+    q = create :question, submission: @submission, user: @student
+    assert_equal 1, Question.count, 'Test is invalid if magically no or more questions appear here'
+    assert q.unanswered?, 'Question should start as unanswered'
+
+    visit(submission_path(id: @submission.id))
+    click_link 'Code'
+
+    thread = find('d-thread')
+    within thread do
+      assert_selector '.mdi-comment-question-outline'
+      fake_answer_input = find('input')
+      fake_answer_input.click
+      assert_selector '.mdi-comment-processing-outline'
+      assert q.reload.in_progress?, 'Question should have moved onto in progress status'
+    end
+  end
+
+  test 'The question becomes unanswered again when a teacher cancels the reply' do
+    q = create :question, submission: @submission, user: @student
+    assert_equal 1, Question.count, 'Test is invalid if magically no or more questions appear here'
+    assert q.unanswered?, 'Question should start as unanswered'
+
+    visit(submission_path(id: @submission.id))
+    click_link 'Code'
+
+    thread = find('d-thread')
+    within thread do
+      assert_selector '.mdi-comment-question-outline'
+      fake_answer_input = find('input')
+      fake_answer_input.click
+      assert_selector '.mdi-comment-processing-outline'
+      assert q.reload.in_progress?, 'Question should have moved onto in progress status'
+
+      click_button 'Cancel'
+      assert_selector '.mdi-comment-question-outline'
+      assert q.reload.unanswered?, 'Question should have moved onto unanswered status'
+    end
+  end
 end
diff --git a/test/system/saved_annotation_test.rb b/test/system/saved_annotation_test.rb
index 4a63d4ed3c..c697a35808 100644
--- a/test/system/saved_annotation_test.rb
+++ b/test/system/saved_annotation_test.rb
@@ -34,7 +34,7 @@ class SavedAnnotationsTest < ApplicationSystemTestCase
     assert_no_css 'd-saved-annotations-sidecard'
 
     find('tr#line-1').hover
-    find('button.annotation-button').click
+    find('.annotation-button button').click
 
     initial = 'The first five words of this comment will be used as the title'
     within 'form.annotation-submission' do
@@ -70,7 +70,7 @@ class SavedAnnotationsTest < ApplicationSystemTestCase
     assert_no_css 'd-saved-annotations-sidecard'
 
     find('tr#line-1').hover
-    find('button.annotation-button').click
+    find('.annotation-button button').click
 
     initial = 'The first five words of this comment will be used as the title'
     within 'form.annotation-submission' do
@@ -99,7 +99,7 @@ class SavedAnnotationsTest < ApplicationSystemTestCase
     # assert_css `d-saved-annotations-sidecard td[title="#{sa.title}"]`
 
     find('tr#line-1').hover
-    find('button.annotation-button').click
+    find('.annotation-button button').click
 
     within 'form.annotation-submission' do
       assert_css 'd-saved-annotation-input'
diff --git a/test/system/search_test.rb b/test/system/search_test.rb
new file mode 100644
index 0000000000..af00b0e8ed
--- /dev/null
+++ b/test/system/search_test.rb
@@ -0,0 +1,55 @@
+require 'capybara/minitest'
+require 'application_system_test_case'
+
+class SearchTest < ApplicationSystemTestCase
+  include Devise::Test::IntegrationHelpers
+  # Make the Capybara DSL available in all integration tests
+  include Capybara::DSL
+  # Make `assert_*` methods behave like Minitest assertions
+  include Capybara::Minitest::Assertions
+
+  def assert_path_with_query(path, **query_params)
+    page.assert_current_path path, ignore_query: true
+    query_params.each do |key, value|
+      page.assert_current_path(/#{key}=#{value}/)
+    end
+  end
+
+  test 'Browser history updates current entry when searching' do
+    32.times do |i|
+      create :exercise, name_en: "test #{i}", name_nl: "test #{i}"
+    end
+    sign_in create(:zeus)
+    visit root_path
+    visit activities_path
+    assert_path_with_query activities_path
+    find('d-search-field input').send_keys 'test'
+    assert_path_with_query activities_path, filter: 'test'
+    find('.next_page').click
+    assert_path_with_query activities_path, filter: 'test', page: 2
+    page.go_back
+    assert_path_with_query activities_path, filter: 'test'
+    page.go_back
+    page.assert_current_path root_path
+    page.go_forward
+    assert_path_with_query activities_path, filter: 'test'
+    page.go_forward
+    assert_path_with_query activities_path, filter: 'test', page: 2
+    find('d-search-field input').send_keys 's'
+    assert_path_with_query activities_path, filter: 'tests'
+    page.go_back
+    assert_path_with_query activities_path, filter: 'test', page: 2
+    page.go_forward
+    assert_path_with_query activities_path, filter: 'tests'
+  end
+
+  test 'Going to a page with search does not create an extra history entry' do
+    sign_in create(:zeus)
+    visit root_path
+    click_on 'Toggle drawer'
+    click_on 'Exercises'
+    page.assert_current_path activities_path
+    page.go_back
+    page.assert_current_path root_path
+  end
+end
diff --git a/test/testhelpers/delayed_job_helper.rb b/test/testhelpers/delayed_job_helper.rb
index 184b9fcd3d..a15b198054 100644
--- a/test/testhelpers/delayed_job_helper.rb
+++ b/test/testhelpers/delayed_job_helper.rb
@@ -2,4 +2,15 @@ module DelayedJobHelper
   def assert_jobs_enqueued(number, &)
     assert_difference('Delayed::Job.count', number, &)
   end
+
+  def with_delayed_jobs
+    orig = Delayed::Worker.delay_jobs
+    Delayed::Worker.delay_jobs = true
+    yield
+    Delayed::Worker.delay_jobs = orig
+  end
+
+  def run_delayed_jobs
+    Delayed::Job.find_each(batch_size: 100) { |d| Delayed::Worker.new.run(d) }
+  end
 end
diff --git a/tsconfig.json b/tsconfig.json
index 88655c3235..d7edac46ec 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,11 +11,11 @@
     "downlevelIteration": true,
     "baseUrl": "app",
     "paths": {
-      "*": ["assets/javascripts/*"]
+      "*": ["assets/javascripts/*"],
     },
     "pretty": true,
     "allowUmdGlobalAccess": true,
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
   },
   "exclude": ["**/*.spec.ts", "node_modules", "public", "data"],
   "compileOnSave": false
diff --git a/yarn.lock b/yarn.lock
index 55f33a6043..57a151bd3b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10,50 +10,45 @@
     "@jridgewell/gen-mapping" "^0.1.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
-"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.18.6.tgz#3b25d38c89600baa2dcc219edfa88a74eb2c427a"
-  integrity sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.18.6", "@babel/code-frame@^7.21.4":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.21.4.tgz#d0fa9e4413aca81f2b23b9442797bda1826edb39"
+  integrity sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==
   dependencies:
     "@babel/highlight" "^7.18.6"
 
-"@babel/compat-data@^7.17.7", "@babel/compat-data@^7.20.1":
-  version "7.20.1"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.20.1.tgz#f2e6ef7790d8c8dbf03d379502dcc246dcce0b30"
-  integrity sha512-EWZ4mE2diW3QALKvDMiXnbZpRvlj+nayZ112nK93SnhqOtpdsbVD4W+2tEoT3YNBAG9RBR0ISY758ZkOgsn6pQ==
-
-"@babel/compat-data@^7.20.5":
-  version "7.20.10"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.20.10.tgz#9d92fa81b87542fff50e848ed585b4212c1d34ec"
-  integrity sha512-sEnuDPpOJR/fcafHMjpcpGN5M2jbUGUHwmuWKM/YdPzeEDJg8bgmbcWQFUfE32MQjti1koACvoPVsDe8Uq+idg==
+"@babel/compat-data@^7.17.7", "@babel/compat-data@^7.20.5", "@babel/compat-data@^7.21.5":
+  version "7.21.7"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.21.7.tgz#61caffb60776e49a57ba61a88f02bedd8714f6bc"
+  integrity sha512-KYMqFYTaenzMK4yUtf4EW9wc4N9ef80FsbMtkwool5zpwl4YrT1SdWYSTRcT94KO4hannogdS+LxY7L+arP3gA==
 
-"@babel/core@^7.1.0", "@babel/core@^7.12.3", "@babel/core@^7.21.3", "@babel/core@^7.7.5":
-  version "7.21.3"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.21.3.tgz#cf1c877284a469da5d1ce1d1e53665253fae712e"
-  integrity sha512-qIJONzoa/qiHghnm0l1n4i/6IIziDpzqc36FBs4pzMhDUraHqponwJLiAKm1hGLP3OSB/TVNz6rMwVGpwxxySw==
+"@babel/core@^7.1.0", "@babel/core@^7.12.3", "@babel/core@^7.21.8", "@babel/core@^7.7.5":
+  version "7.21.8"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.21.8.tgz#2a8c7f0f53d60100ba4c32470ba0281c92aa9aa4"
+  integrity sha512-YeM22Sondbo523Sz0+CirSPnbj9bG3P0CdHcBZdqUuaeOaYEFbOLoGU7lebvGP6P5J/WE9wOn7u7C4J9HvS1xQ==
   dependencies:
     "@ampproject/remapping" "^2.2.0"
-    "@babel/code-frame" "^7.18.6"
-    "@babel/generator" "^7.21.3"
-    "@babel/helper-compilation-targets" "^7.20.7"
-    "@babel/helper-module-transforms" "^7.21.2"
-    "@babel/helpers" "^7.21.0"
-    "@babel/parser" "^7.21.3"
+    "@babel/code-frame" "^7.21.4"
+    "@babel/generator" "^7.21.5"
+    "@babel/helper-compilation-targets" "^7.21.5"
+    "@babel/helper-module-transforms" "^7.21.5"
+    "@babel/helpers" "^7.21.5"
+    "@babel/parser" "^7.21.8"
     "@babel/template" "^7.20.7"
-    "@babel/traverse" "^7.21.3"
-    "@babel/types" "^7.21.3"
+    "@babel/traverse" "^7.21.5"
+    "@babel/types" "^7.21.5"
     convert-source-map "^1.7.0"
     debug "^4.1.0"
     gensync "^1.0.0-beta.2"
     json5 "^2.2.2"
     semver "^6.3.0"
 
-"@babel/generator@^7.21.3":
-  version "7.21.3"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.21.3.tgz#232359d0874b392df04045d72ce2fd9bb5045fce"
-  integrity sha512-QS3iR1GYC/YGUnW7IdggFeN5c1poPUurnGttOV/bZgPGV+izC/D8HnD6DLwod0fsatNyVn1G3EVWMYIF0nHbeA==
+"@babel/generator@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.21.5.tgz#c0c0e5449504c7b7de8236d99338c3e2a340745f"
+  integrity sha512-SrKK/sRv8GesIW1bDagf9cCG38IOMYZusoe1dfg0D8aiUe3Amvoj1QtjTPAWcfrZFvIwlleLb0gxzQidL9w14w==
   dependencies:
-    "@babel/types" "^7.21.3"
+    "@babel/types" "^7.21.5"
     "@jridgewell/gen-mapping" "^0.3.2"
     "@jridgewell/trace-mapping" "^0.3.17"
     jsesc "^2.5.1"
@@ -73,13 +68,13 @@
     "@babel/helper-explode-assignable-expression" "^7.18.6"
     "@babel/types" "^7.18.6"
 
-"@babel/helper-compilation-targets@^7.17.7", "@babel/helper-compilation-targets@^7.18.9", "@babel/helper-compilation-targets@^7.20.0", "@babel/helper-compilation-targets@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.20.7.tgz#a6cd33e93629f5eb473b021aac05df62c4cd09bb"
-  integrity sha512-4tGORmfQcrc+bvrjb5y3dG9Mx1IOZjsHqQVUz7XCNHO+iTmqxWnVg3KRygjGmpRLJGdQSKuvFinbIb0CnZwHAQ==
+"@babel/helper-compilation-targets@^7.17.7", "@babel/helper-compilation-targets@^7.18.9", "@babel/helper-compilation-targets@^7.20.7", "@babel/helper-compilation-targets@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.21.5.tgz#631e6cc784c7b660417421349aac304c94115366"
+  integrity sha512-1RkbFGUKex4lvsB9yhIfWltJM5cZKUftB2eNajaDv3dCMEp49iBG0K14uH8NnX9IPux2+mK7JGEOB0jn48/J6w==
   dependencies:
-    "@babel/compat-data" "^7.20.5"
-    "@babel/helper-validator-option" "^7.18.6"
+    "@babel/compat-data" "^7.21.5"
+    "@babel/helper-validator-option" "^7.21.0"
     browserslist "^4.21.3"
     lru-cache "^5.1.1"
     semver "^6.3.0"
@@ -106,13 +101,13 @@
     "@babel/helper-annotate-as-pure" "^7.18.6"
     regexpu-core "^5.1.0"
 
-"@babel/helper-create-regexp-features-plugin@^7.19.0":
-  version "7.19.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.19.0.tgz#7976aca61c0984202baca73d84e2337a5424a41b"
-  integrity sha512-htnV+mHX32DF81amCDrwIDr8nrp1PTm+3wfBN9/v8QJOLEioOCOG7qNyq0nHeFiWbT3Eb7gsPwEmV64UCQ1jzw==
+"@babel/helper-create-regexp-features-plugin@^7.20.5":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.21.4.tgz#40411a8ab134258ad2cf3a3d987ec6aa0723cee5"
+  integrity sha512-M00OuhU+0GyZ5iBBN9czjugzWrEq2vDpf/zCYHxxf93ul/Q5rv+a5h+/+0WnI1AebHNVtl5bFV0qsJoH23DbfA==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.18.6"
-    regexpu-core "^5.1.0"
+    regexpu-core "^5.3.1"
 
 "@babel/helper-define-polyfill-provider@^0.3.3":
   version "0.3.3"
@@ -126,16 +121,16 @@
     resolve "^1.14.2"
     semver "^6.1.2"
 
-"@babel/helper-environment-visitor@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.6.tgz#b7eee2b5b9d70602e59d1a6cad7dd24de7ca6cd7"
-  integrity sha512-8n6gSfn2baOY+qlp+VSzsosjCVGFqWKmDF0cCWOybh52Dw3SEyoWR1KrhMJASjLwIEkkAufZ0xvr+SxLHSpy2Q==
-
 "@babel/helper-environment-visitor@^7.18.9":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz#0c0cee9b35d2ca190478756865bb3528422f51be"
   integrity sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==
 
+"@babel/helper-environment-visitor@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.21.5.tgz#c769afefd41d171836f7cb63e295bedf689d48ba"
+  integrity sha512-IYl4gZ3ETsWocUWgsFZLM5i1BYx9SoemminVEXadgLBa9TdeorzgLKm8wWLA6J1N/kT3Kch8XIk1laNzYoHKvQ==
+
 "@babel/helper-explode-assignable-expression@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.18.6.tgz#41f8228ef0a6f1a036b8dfdfec7ce94f9a6bc096"
@@ -143,14 +138,6 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
-"@babel/helper-function-name@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.18.6.tgz#8334fecb0afba66e6d87a7e8c6bb7fed79926b83"
-  integrity sha512-0mWMxV1aC97dhjCah5U5Ua7668r5ZmSC2DLfH2EZnf9c3/dHZKiFa5pRLMH5tjSl471tY6496ZWk/kjNONBxhw==
-  dependencies:
-    "@babel/template" "^7.18.6"
-    "@babel/types" "^7.18.6"
-
 "@babel/helper-function-name@^7.18.9":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.18.9.tgz#940e6084a55dee867d33b4e487da2676365e86b0"
@@ -159,14 +146,6 @@
     "@babel/template" "^7.18.6"
     "@babel/types" "^7.18.9"
 
-"@babel/helper-function-name@^7.19.0":
-  version "7.19.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz#941574ed5390682e872e52d3f38ce9d1bef4648c"
-  integrity sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==
-  dependencies:
-    "@babel/template" "^7.18.10"
-    "@babel/types" "^7.19.0"
-
 "@babel/helper-function-name@^7.21.0":
   version "7.21.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.21.0.tgz#d552829b10ea9f120969304023cd0645fa00b1b4"
@@ -196,26 +175,26 @@
   dependencies:
     "@babel/types" "^7.21.0"
 
-"@babel/helper-module-imports@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e"
-  integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==
+"@babel/helper-module-imports@^7.18.6", "@babel/helper-module-imports@^7.21.4":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.21.4.tgz#ac88b2f76093637489e718a90cec6cf8a9b029af"
+  integrity sha512-orajc5T2PsRYUN3ZryCEFeMDYwyw09c/pZeaQEZPH0MpKzSvn3e0uXsDBu3k03VI+9DBiRo+l22BfKTpKwa/Wg==
   dependencies:
-    "@babel/types" "^7.18.6"
+    "@babel/types" "^7.21.4"
 
-"@babel/helper-module-transforms@^7.18.6", "@babel/helper-module-transforms@^7.19.6", "@babel/helper-module-transforms@^7.21.2":
-  version "7.21.2"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.21.2.tgz#160caafa4978ac8c00ac66636cb0fa37b024e2d2"
-  integrity sha512-79yj2AR4U/Oqq/WOV7Lx6hUjau1Zfo4cI+JLAVYeMV5XIlbOhmjEk5ulbTc9fMpmlojzZHkUUxAiK+UKn+hNQQ==
+"@babel/helper-module-transforms@^7.18.6", "@babel/helper-module-transforms@^7.20.11", "@babel/helper-module-transforms@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.21.5.tgz#d937c82e9af68d31ab49039136a222b17ac0b420"
+  integrity sha512-bI2Z9zBGY2q5yMHoBvJ2a9iX3ZOAzJPm7Q8Yz6YeoUjU/Cvhmi2G4QyTNyPBqqXSgTjUxRg3L0xV45HvkNWWBw==
   dependencies:
-    "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-module-imports" "^7.18.6"
-    "@babel/helper-simple-access" "^7.20.2"
+    "@babel/helper-environment-visitor" "^7.21.5"
+    "@babel/helper-module-imports" "^7.21.4"
+    "@babel/helper-simple-access" "^7.21.5"
     "@babel/helper-split-export-declaration" "^7.18.6"
     "@babel/helper-validator-identifier" "^7.19.1"
     "@babel/template" "^7.20.7"
-    "@babel/traverse" "^7.21.2"
-    "@babel/types" "^7.21.2"
+    "@babel/traverse" "^7.21.5"
+    "@babel/types" "^7.21.5"
 
 "@babel/helper-optimise-call-expression@^7.18.6":
   version "7.18.6"
@@ -224,20 +203,10 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
-"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.16.7", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.18.9", "@babel/helper-plugin-utils@^7.19.0", "@babel/helper-plugin-utils@^7.20.2", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
-  version "7.20.2"
-  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.20.2.tgz#d1b9000752b18d0877cff85a5c376ce5c3121629"
-  integrity sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ==
-
-"@babel/helper-remap-async-to-generator@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.18.6.tgz#fa1f81acd19daee9d73de297c0308783cd3cfc23"
-  integrity sha512-z5wbmV55TveUPZlCLZvxWHtrjuJd+8inFhk7DG0WW87/oJuGDcjDiu7HIvGcpf5464L6xKCg3vNkmlVVz9hwyQ==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.18.6"
-    "@babel/helper-environment-visitor" "^7.18.6"
-    "@babel/helper-wrap-function" "^7.18.6"
-    "@babel/types" "^7.18.6"
+"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.16.7", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.18.9", "@babel/helper-plugin-utils@^7.19.0", "@babel/helper-plugin-utils@^7.20.2", "@babel/helper-plugin-utils@^7.21.5", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.21.5.tgz#345f2377d05a720a4e5ecfa39cbf4474a4daed56"
+  integrity sha512-0WDaIlXKOX/3KfBK/dwP1oQGiPh6rjMkT7HIRv7i5RR2VUMwrx5ZL0dwBkKx7+SW1zwNdgjHd34IMk5ZjTeHVg==
 
 "@babel/helper-remap-async-to-generator@^7.18.9":
   version "7.18.9"
@@ -249,7 +218,7 @@
     "@babel/helper-wrap-function" "^7.18.9"
     "@babel/types" "^7.18.9"
 
-"@babel/helper-replace-supers@^7.18.6", "@babel/helper-replace-supers@^7.19.1", "@babel/helper-replace-supers@^7.20.7":
+"@babel/helper-replace-supers@^7.18.6", "@babel/helper-replace-supers@^7.20.7":
   version "7.20.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.20.7.tgz#243ecd2724d2071532b2c8ad2f0f9f083bcae331"
   integrity sha512-vujDMtB6LVfNW13jhlCrp48QNslK6JXi7lQG736HVbHz/mbf4Dc7tIRh1Xf5C0rF7BP8iiSxGMCmY6Ci1ven3A==
@@ -261,19 +230,12 @@
     "@babel/traverse" "^7.20.7"
     "@babel/types" "^7.20.7"
 
-"@babel/helper-simple-access@^7.19.4", "@babel/helper-simple-access@^7.20.2":
-  version "7.20.2"
-  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.20.2.tgz#0ab452687fe0c2cfb1e2b9e0015de07fc2d62dd9"
-  integrity sha512-+0woI/WPq59IrqDYbVGfshjT5Dmk/nnbdpcF8SnMhhXObpTq2KNBdLFRFrkVdbDOyUmHBCxzm5FHV1rACIkIbA==
-  dependencies:
-    "@babel/types" "^7.20.2"
-
-"@babel/helper-skip-transparent-expression-wrappers@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.18.9.tgz#778d87b3a758d90b471e7b9918f34a9a02eb5818"
-  integrity sha512-imytd2gHi3cJPsybLRbmFrF7u5BIEuI2cNheyKi3/iOBC63kNn3q8Crn2xVuESli0aM4KYsyEqKyS7lFL8YVtw==
+"@babel/helper-simple-access@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.21.5.tgz#d697a7971a5c39eac32c7e63c0921c06c8a249ee"
+  integrity sha512-ENPDAMC1wAjR0uaCUwliBdiSl1KBJAVnMTzXqi64c2MG8MPR6ii4qf7bSXDqSFbr4W6W028/rf5ivoHop5/mkg==
   dependencies:
-    "@babel/types" "^7.18.9"
+    "@babel/types" "^7.21.5"
 
 "@babel/helper-skip-transparent-expression-wrappers@^7.20.0":
   version "7.20.0"
@@ -289,10 +251,10 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
-"@babel/helper-string-parser@^7.19.4":
-  version "7.19.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz#38d3acb654b4701a9b77fb0615a96f775c3a9e63"
-  integrity sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==
+"@babel/helper-string-parser@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.21.5.tgz#2b3eea65443c6bdc31c22d037c65f6d323b6b2bd"
+  integrity sha512-5pTUx3hAJaZIdW99sJ6ZUUgWq/Y+Hja7TowEnLNMm1VivRgZQL3vpBY3qUACVsvw+yQU6+YgfBVmcbLaZtrA1w==
 
 "@babel/helper-validator-identifier@^7.18.6":
   version "7.18.6"
@@ -304,21 +266,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz#7eea834cf32901ffdc1a7ee555e2f9c27e249ca2"
   integrity sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==
 
-"@babel/helper-validator-option@^7.18.6", "@babel/helper-validator-option@^7.21.0":
+"@babel/helper-validator-option@^7.21.0":
   version "7.21.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.21.0.tgz#8224c7e13ace4bafdc4004da2cf064ef42673180"
   integrity sha512-rmL/B8/f0mKS2baE9ZpyTcTavvEuWhTTW8amjzXNvYG4AwBsqTLikfXsEofsJEfKHf+HQVQbFOHy6o+4cnC/fQ==
 
-"@babel/helper-wrap-function@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.18.6.tgz#ec44ea4ad9d8988b90c3e465ba2382f4de81a073"
-  integrity sha512-I5/LZfozwMNbwr/b1vhhuYD+J/mU+gfGAj5td7l5Rv9WYmH6i3Om69WGKNmlIpsVW/mF6O5bvTKbvDQZVgjqOw==
-  dependencies:
-    "@babel/helper-function-name" "^7.18.6"
-    "@babel/template" "^7.18.6"
-    "@babel/traverse" "^7.18.6"
-    "@babel/types" "^7.18.6"
-
 "@babel/helper-wrap-function@^7.18.9":
   version "7.18.11"
   resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.18.11.tgz#bff23ace436e3f6aefb61f85ffae2291c80ed1fb"
@@ -329,14 +281,14 @@
     "@babel/traverse" "^7.18.11"
     "@babel/types" "^7.18.10"
 
-"@babel/helpers@^7.21.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.21.0.tgz#9dd184fb5599862037917cdc9eecb84577dc4e7e"
-  integrity sha512-XXve0CBtOW0pd7MRzzmoyuSj0e3SEzj8pgyFxnTT1NJZL38BD1MK7yYrm8yefRPIDvNNe14xR4FdbHwpInD4rA==
+"@babel/helpers@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.21.5.tgz#5bac66e084d7a4d2d9696bdf0175a93f7fb63c08"
+  integrity sha512-BSY+JSlHxOmGsPTydUkPf1MdMQ3M81x5xGCOVgWM3G8XH77sJ292Y2oqcp0CbbgxhqBuI46iUz1tT7hqP7EfgA==
   dependencies:
     "@babel/template" "^7.20.7"
-    "@babel/traverse" "^7.21.0"
-    "@babel/types" "^7.21.0"
+    "@babel/traverse" "^7.21.5"
+    "@babel/types" "^7.21.5"
 
 "@babel/highlight@^7.18.6":
   version "7.18.6"
@@ -347,10 +299,10 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.20.7", "@babel/parser@^7.21.3":
-  version "7.21.3"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.21.3.tgz#1d285d67a19162ff9daa358d4cb41d50c06220b3"
-  integrity sha512-lobG0d7aOfQRXh8AyklEAgZGvA4FShxo6xQbUrrT/cNBPUdIDojlokwJsQyCC/eKia7ifqM0yP+2DRZ4WKw2RQ==
+"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.20.7", "@babel/parser@^7.21.5", "@babel/parser@^7.21.8":
+  version "7.21.8"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.21.8.tgz#642af7d0333eab9c0ad70b14ac5e76dbde7bfdf8"
+  integrity sha512-6zavDGdzG3gUqAdWvlLFfk+36RilI+Pwyuuh7HItyeScCWP3k6i8vKclAQ0bM/0y/Kz/xiwvxhMv9MgTJP5gmA==
 
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.18.6":
   version "7.18.6"
@@ -359,22 +311,22 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.18.9.tgz#a11af19aa373d68d561f08e0a57242350ed0ec50"
-  integrity sha512-AHrP9jadvH7qlOj6PINbgSuphjQUAK7AOT7DPjBo9EHoLhQTnnK5u45e1Hd4DbSQEO9nqPWtQ89r+XEOWFScKg==
+"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.20.7.tgz#d9c85589258539a22a901033853101a6198d4ef1"
+  integrity sha512-sbr9+wNE5aXMBBFBICk01tt7sBf2Oc9ikRFEcem/ZORup9IMUdNhW7/wVLEbbtlWOsEubJet46mHAL2C8+2jKQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.18.9"
-    "@babel/plugin-proposal-optional-chaining" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
+    "@babel/plugin-proposal-optional-chaining" "^7.20.7"
 
-"@babel/plugin-proposal-async-generator-functions@^7.20.1":
-  version "7.20.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.20.1.tgz#352f02baa5d69f4e7529bdac39aaa02d41146af9"
-  integrity sha512-Gh5rchzSwE4kC+o/6T8waD0WHEQIsDmjltY8WnWRXHUdH8axZhuH86Ov9M72YhJfDrZseQwuuWaaIT/TmePp3g==
+"@babel/plugin-proposal-async-generator-functions@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.20.7.tgz#bfb7276d2d573cb67ba379984a2334e262ba5326"
+  integrity sha512-xMbiLsn/8RK7Wq7VeVytytS2L6qE69bXPB10YCmMdDZbKF4okCqY74pI/jJQ/8U0b/F6NrT2+14b8/P9/3AMGA==
   dependencies:
     "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-plugin-utils" "^7.19.0"
+    "@babel/helper-plugin-utils" "^7.20.2"
     "@babel/helper-remap-async-to-generator" "^7.18.9"
     "@babel/plugin-syntax-async-generators" "^7.8.4"
 
@@ -386,13 +338,13 @@
     "@babel/helper-create-class-features-plugin" "^7.18.6"
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-proposal-class-static-block@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.18.6.tgz#8aa81d403ab72d3962fc06c26e222dacfc9b9020"
-  integrity sha512-+I3oIiNxrCpup3Gi8n5IGMwj0gOCAjcJUSQEcotNnCCPMEnixawOQ+KeJPlgfjzx+FKQ1QSyZOWe7wmoJp7vhw==
+"@babel/plugin-proposal-class-static-block@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.21.0.tgz#77bdd66fb7b605f3a61302d224bdfacf5547977d"
+  integrity sha512-XP5G9MWNUskFuP30IfFSEFB0Z6HzLIUcjYM4bYOPHXl7eiJ9HFv8tWj6TXTN5QODiEhDZAeI4hLok2iHFFV4hw==
   dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-create-class-features-plugin" "^7.21.0"
+    "@babel/helper-plugin-utils" "^7.20.2"
     "@babel/plugin-syntax-class-static-block" "^7.14.5"
 
 "@babel/plugin-proposal-decorators@^7.21.0":
@@ -430,12 +382,12 @@
     "@babel/helper-plugin-utils" "^7.18.6"
     "@babel/plugin-syntax-json-strings" "^7.8.3"
 
-"@babel/plugin-proposal-logical-assignment-operators@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.18.9.tgz#8148cbb350483bf6220af06fa6db3690e14b2e23"
-  integrity sha512-128YbMpjCrP35IOExw2Fq+x55LMP42DzhOhX2aNNIdI9avSWl2PI0yuBWarr3RYpZBSPtabfadkH2yeRiMD61Q==
+"@babel/plugin-proposal-logical-assignment-operators@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.20.7.tgz#dfbcaa8f7b4d37b51e8bfb46d94a5aea2bb89d83"
+  integrity sha512-y7C7cZgpMIjWlKE5T7eJwp+tnRYM89HmRvWM5EQuB5BoHEONjmQ8lSNmBUwOyy/GFRsohJED51YBF79hE1djug==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.20.2"
     "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
 
 "@babel/plugin-proposal-nullish-coalescing-operator@^7.18.6":
@@ -454,16 +406,16 @@
     "@babel/helper-plugin-utils" "^7.18.6"
     "@babel/plugin-syntax-numeric-separator" "^7.10.4"
 
-"@babel/plugin-proposal-object-rest-spread@^7.20.2":
-  version "7.20.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.20.2.tgz#a556f59d555f06961df1e572bb5eca864c84022d"
-  integrity sha512-Ks6uej9WFK+fvIMesSqbAto5dD8Dz4VuuFvGJFKgIGSkJuRGcrwGECPA1fDgQK3/DbExBJpEkTeYeB8geIFCSQ==
+"@babel/plugin-proposal-object-rest-spread@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.20.7.tgz#aa662940ef425779c75534a5c41e9d936edc390a"
+  integrity sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==
   dependencies:
-    "@babel/compat-data" "^7.20.1"
-    "@babel/helper-compilation-targets" "^7.20.0"
+    "@babel/compat-data" "^7.20.5"
+    "@babel/helper-compilation-targets" "^7.20.7"
     "@babel/helper-plugin-utils" "^7.20.2"
     "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
-    "@babel/plugin-transform-parameters" "^7.20.1"
+    "@babel/plugin-transform-parameters" "^7.20.7"
 
 "@babel/plugin-proposal-optional-catch-binding@^7.18.6":
   version "7.18.6"
@@ -473,13 +425,13 @@
     "@babel/helper-plugin-utils" "^7.18.6"
     "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
 
-"@babel/plugin-proposal-optional-chaining@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.18.9.tgz#e8e8fe0723f2563960e4bf5e9690933691915993"
-  integrity sha512-v5nwt4IqBXihxGsW2QmCWMDS3B3bzGIk/EQVZz2ei7f3NJl8NzAJVvUmpDW5q1CRNY+Beb/k58UAH1Km1N411w==
+"@babel/plugin-proposal-optional-chaining@^7.20.7", "@babel/plugin-proposal-optional-chaining@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.21.0.tgz#886f5c8978deb7d30f678b2e24346b287234d3ea"
+  integrity sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
     "@babel/plugin-syntax-optional-chaining" "^7.8.3"
 
 "@babel/plugin-proposal-private-methods@^7.18.6":
@@ -490,14 +442,14 @@
     "@babel/helper-create-class-features-plugin" "^7.18.6"
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-proposal-private-property-in-object@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.18.6.tgz#a64137b232f0aca3733a67eb1a144c192389c503"
-  integrity sha512-9Rysx7FOctvT5ouj5JODjAFAkgGoudQuLPamZb0v1TGLpapdNaftzifU8NTWQm0IRjqoYypdrSmyWgkocDQ8Dw==
+"@babel/plugin-proposal-private-property-in-object@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0.tgz#19496bd9883dd83c23c7d7fc45dcd9ad02dfa1dc"
+  integrity sha512-ha4zfehbJjc5MmXBlHec1igel5TJXXLDDRbuJ4+XT2TJcyD9/V1919BA8gMvsdHcNMBy4WBUBiRb3nw/EQUtBw==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.18.6"
-    "@babel/helper-create-class-features-plugin" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-create-class-features-plugin" "^7.21.0"
+    "@babel/helper-plugin-utils" "^7.20.2"
     "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
 
 "@babel/plugin-proposal-unicode-property-regex@^7.18.6", "@babel/plugin-proposal-unicode-property-regex@^7.4.4":
@@ -564,7 +516,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.19.0"
 
-"@babel/plugin-syntax-import-meta@^7.8.3":
+"@babel/plugin-syntax-import-meta@^7.10.4", "@babel/plugin-syntax-import-meta@^7.8.3":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz#ee601348c370fa334d2207be158777496521fd51"
   integrity sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==
@@ -578,6 +530,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
+"@babel/plugin-syntax-jsx@^7.21.4":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.21.4.tgz#f264ed7bf40ffc9ec239edabc17a50c4f5b6fea2"
+  integrity sha512-5hewiLct5OKyh6PLKEYaFclcqtIgCb6bmELouxjF6up5q3Sov7rOayW4RwhbaBL0dit8rA80GNfY+UuDp2mBbQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.20.2"
+
 "@babel/plugin-syntax-logical-assignment-operators@^7.10.4", "@babel/plugin-syntax-logical-assignment-operators@^7.8.3":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"
@@ -641,21 +600,21 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.19.0"
 
-"@babel/plugin-transform-arrow-functions@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.18.6.tgz#19063fcf8771ec7b31d742339dac62433d0611fe"
-  integrity sha512-9S9X9RUefzrsHZmKMbDXxweEH+YlE8JJEuat9FdvW9Qh1cw7W64jELCtWNkPBPX5En45uy28KGvA/AySqUh8CQ==
+"@babel/plugin-transform-arrow-functions@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.21.5.tgz#9bb42a53de447936a57ba256fbf537fc312b6929"
+  integrity sha512-wb1mhwGOCaXHDTcsRYMKF9e5bbMgqwxtqa2Y1ifH96dXJPwbuLX9qHy3clhrxVqgMz7nyNXs8VkxdH8UBcjKqA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.21.5"
 
-"@babel/plugin-transform-async-to-generator@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.18.6.tgz#ccda3d1ab9d5ced5265fdb13f1882d5476c71615"
-  integrity sha512-ARE5wZLKnTgPW7/1ftQmSi1CmkqqHo2DNmtztFhvgtOWSDfq0Cq9/9L+KnZNYSNrydBekhW3rwShduf59RoXag==
+"@babel/plugin-transform-async-to-generator@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.20.7.tgz#dfee18623c8cb31deb796aa3ca84dda9cea94354"
+  integrity sha512-Uo5gwHPT9vgnSXQxqGtpdufUiWp96gk7yiP4Mp5bm1QMkEmLXBO7PAGYbKoJ6DhAwiNkcHFBol/x5zZZkL/t0Q==
   dependencies:
     "@babel/helper-module-imports" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
-    "@babel/helper-remap-async-to-generator" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-remap-async-to-generator" "^7.18.9"
 
 "@babel/plugin-transform-block-scoped-functions@^7.18.6":
   version "7.18.6"
@@ -664,39 +623,40 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-block-scoping@^7.20.2":
-  version "7.20.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.20.2.tgz#f59b1767e6385c663fd0bce655db6ca9c8b236ed"
-  integrity sha512-y5V15+04ry69OV2wULmwhEA6jwSWXO1TwAtIwiPXcvHcoOQUqpyMVd2bDsQJMW8AurjulIyUV8kDqtjSwHy1uQ==
+"@babel/plugin-transform-block-scoping@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.21.0.tgz#e737b91037e5186ee16b76e7ae093358a5634f02"
+  integrity sha512-Mdrbunoh9SxwFZapeHVrwFmri16+oYotcZysSzhNIVDwIAb1UV+kvnxULSYq9J3/q5MDG+4X6w8QVgD1zhBXNQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.20.2"
 
-"@babel/plugin-transform-classes@^7.20.2":
-  version "7.20.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.20.2.tgz#c0033cf1916ccf78202d04be4281d161f6709bb2"
-  integrity sha512-9rbPp0lCVVoagvtEyQKSo5L8oo0nQS/iif+lwlAz29MccX2642vWDlSZK+2T2buxbopotId2ld7zZAzRfz9j1g==
+"@babel/plugin-transform-classes@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.21.0.tgz#f469d0b07a4c5a7dbb21afad9e27e57b47031665"
+  integrity sha512-RZhbYTCEUAe6ntPehC4hlslPWosNHDox+vAs4On/mCLRLfoDVHf6hVEd7kuxr1RnHwJmxFfUM3cZiZRmPxJPXQ==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.18.6"
-    "@babel/helper-compilation-targets" "^7.20.0"
+    "@babel/helper-compilation-targets" "^7.20.7"
     "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-function-name" "^7.19.0"
+    "@babel/helper-function-name" "^7.21.0"
     "@babel/helper-optimise-call-expression" "^7.18.6"
     "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/helper-replace-supers" "^7.19.1"
+    "@babel/helper-replace-supers" "^7.20.7"
     "@babel/helper-split-export-declaration" "^7.18.6"
     globals "^11.1.0"
 
-"@babel/plugin-transform-computed-properties@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.18.9.tgz#2357a8224d402dad623caf6259b611e56aec746e"
-  integrity sha512-+i0ZU1bCDymKakLxn5srGHrsAPRELC2WIbzwjLhHW9SIE1cPYkLCL0NlnXMZaM1vhfgA2+M7hySk42VBvrkBRw==
+"@babel/plugin-transform-computed-properties@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.21.5.tgz#3a2d8bb771cd2ef1cd736435f6552fe502e11b44"
+  integrity sha512-TR653Ki3pAwxBxUe8srfF3e4Pe3FTA46uaNHYyQwIoM4oWKSoOZiDNyHJ0oIoDIUPSRQbQG7jzgVBX3FPVne1Q==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.21.5"
+    "@babel/template" "^7.20.7"
 
-"@babel/plugin-transform-destructuring@^7.20.2":
-  version "7.20.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.20.2.tgz#c23741cfa44ddd35f5e53896e88c75331b8b2792"
-  integrity sha512-mENM+ZHrvEgxLTBXUiQ621rRXZes3KWUv6NdQlrnr1TkWVw+hUjQBZuP2X32qKlrlG2BzgR95gkuCRSkJl8vIw==
+"@babel/plugin-transform-destructuring@^7.21.3":
+  version "7.21.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.21.3.tgz#73b46d0fd11cd6ef57dea8a381b1215f4959d401"
+  integrity sha512-bp6hwMFzuiE4HqYEyoGJ/V2LeIWn+hLVKc4pnj++E5XQptwhtcGmSayM029d/j2X1bPKGTlsyPwAubuU22KhMA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.20.2"
 
@@ -723,12 +683,12 @@
     "@babel/helper-builder-binary-assignment-operator-visitor" "^7.18.6"
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-for-of@^7.18.8":
-  version "7.18.8"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.18.8.tgz#6ef8a50b244eb6a0bdbad0c7c61877e4e30097c1"
-  integrity sha512-yEfTRnjuskWYo0k1mHUqrVWaZwrdq8AYbfrpqULOJOaucGSp4mNMVps+YtA8byoevxS/urwU75vyhQIxcCgiBQ==
+"@babel/plugin-transform-for-of@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.21.5.tgz#e890032b535f5a2e237a18535f56a9fdaa7b83fc"
+  integrity sha512-nYWpjKW/7j/I/mZkGVgHJXh4bA1sfdFnJoOXwJuj4m3Q2EraO/8ZyrkCau9P5tbHQk01RMSt6KYLCsW7730SXQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.21.5"
 
 "@babel/plugin-transform-function-name@^7.18.9":
   version "7.18.9"
@@ -753,31 +713,31 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-modules-amd@^7.19.6":
-  version "7.19.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.19.6.tgz#aca391801ae55d19c4d8d2ebfeaa33df5f2a2cbd"
-  integrity sha512-uG3od2mXvAtIFQIh0xrpLH6r5fpSQN04gIVovl+ODLdUMANokxQLZnPBHcjmv3GxRjnqwLuHvppjjcelqUFZvg==
+"@babel/plugin-transform-modules-amd@^7.20.11":
+  version "7.20.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.20.11.tgz#3daccca8e4cc309f03c3a0c4b41dc4b26f55214a"
+  integrity sha512-NuzCt5IIYOW0O30UvqktzHYR2ud5bOWbY0yaxWZ6G+aFzOMJvrs5YHNikrbdaT15+KNO31nPOy5Fim3ku6Zb5g==
   dependencies:
-    "@babel/helper-module-transforms" "^7.19.6"
-    "@babel/helper-plugin-utils" "^7.19.0"
+    "@babel/helper-module-transforms" "^7.20.11"
+    "@babel/helper-plugin-utils" "^7.20.2"
 
-"@babel/plugin-transform-modules-commonjs@^7.19.6":
-  version "7.19.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.19.6.tgz#25b32feef24df8038fc1ec56038917eacb0b730c"
-  integrity sha512-8PIa1ym4XRTKuSsOUXqDG0YaOlEuTVvHMe5JCfgBMOtHvJKw/4NGovEGN33viISshG/rZNVrACiBmPQLvWN8xQ==
+"@babel/plugin-transform-modules-commonjs@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.21.5.tgz#d69fb947eed51af91de82e4708f676864e5e47bc"
+  integrity sha512-OVryBEgKUbtqMoB7eG2rs6UFexJi6Zj6FDXx+esBLPTCxCNxAY9o+8Di7IsUGJ+AVhp5ncK0fxWUBd0/1gPhrQ==
   dependencies:
-    "@babel/helper-module-transforms" "^7.19.6"
-    "@babel/helper-plugin-utils" "^7.19.0"
-    "@babel/helper-simple-access" "^7.19.4"
+    "@babel/helper-module-transforms" "^7.21.5"
+    "@babel/helper-plugin-utils" "^7.21.5"
+    "@babel/helper-simple-access" "^7.21.5"
 
-"@babel/plugin-transform-modules-systemjs@^7.19.6":
-  version "7.19.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.19.6.tgz#59e2a84064b5736a4471b1aa7b13d4431d327e0d"
-  integrity sha512-fqGLBepcc3kErfR9R3DnVpURmckXP7gj7bAlrTQyBxrigFqszZCkFkcoxzCp2v32XmwXLvbw+8Yq9/b+QqksjQ==
+"@babel/plugin-transform-modules-systemjs@^7.20.11":
+  version "7.20.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.20.11.tgz#467ec6bba6b6a50634eea61c9c232654d8a4696e"
+  integrity sha512-vVu5g9BPQKSFEmvt2TA4Da5N+QVS66EX21d8uoOihC+OCpUoGvzVsXeqFdtAEfVa5BILAeFt+U7yVmLbQnAJmw==
   dependencies:
     "@babel/helper-hoist-variables" "^7.18.6"
-    "@babel/helper-module-transforms" "^7.19.6"
-    "@babel/helper-plugin-utils" "^7.19.0"
+    "@babel/helper-module-transforms" "^7.20.11"
+    "@babel/helper-plugin-utils" "^7.20.2"
     "@babel/helper-validator-identifier" "^7.19.1"
 
 "@babel/plugin-transform-modules-umd@^7.18.6":
@@ -788,13 +748,13 @@
     "@babel/helper-module-transforms" "^7.18.6"
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-named-capturing-groups-regex@^7.19.1":
-  version "7.19.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.19.1.tgz#ec7455bab6cd8fb05c525a94876f435a48128888"
-  integrity sha512-oWk9l9WItWBQYS4FgXD4Uyy5kq898lvkXpXQxoJEY1RnvPk4R/Dvu2ebXU9q8lP+rlMwUQTFf2Ok6d78ODa0kw==
+"@babel/plugin-transform-named-capturing-groups-regex@^7.20.5":
+  version "7.20.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.20.5.tgz#626298dd62ea51d452c3be58b285d23195ba69a8"
+  integrity sha512-mOW4tTzi5iTLnw+78iEq3gr8Aoq4WNRGpmSlrogqaiCBoR1HFhpU4JkpQFOHfeYx3ReVIFWOQJS4aZBRvuZ6mA==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.19.0"
-    "@babel/helper-plugin-utils" "^7.19.0"
+    "@babel/helper-create-regexp-features-plugin" "^7.20.5"
+    "@babel/helper-plugin-utils" "^7.20.2"
 
 "@babel/plugin-transform-new-target@^7.18.6":
   version "7.18.6"
@@ -811,10 +771,10 @@
     "@babel/helper-plugin-utils" "^7.18.6"
     "@babel/helper-replace-supers" "^7.18.6"
 
-"@babel/plugin-transform-parameters@^7.20.1":
-  version "7.20.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.20.3.tgz#7b3468d70c3c5b62e46be0a47b6045d8590fb748"
-  integrity sha512-oZg/Fpx0YDrj13KsLyO8I/CX3Zdw7z0O9qOd95SqcoIzuqy/WTGWvePeHAnZCN54SfdyjHcb1S30gc8zlzlHcA==
+"@babel/plugin-transform-parameters@^7.20.7", "@babel/plugin-transform-parameters@^7.21.3":
+  version "7.21.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.21.3.tgz#18fc4e797cf6d6d972cb8c411dbe8a809fa157db"
+  integrity sha512-Wxc+TvppQG9xWFYatvCGPvZ6+SIUxQ2ZdiBP+PHYMIjnPXD+uThCshaz4NZOnODAtBjjcVQQ/3OKs9LW28purQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.20.2"
 
@@ -825,13 +785,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-regenerator@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.18.6.tgz#585c66cb84d4b4bf72519a34cfce761b8676ca73"
-  integrity sha512-poqRI2+qiSdeldcz4wTSTXBRryoq3Gc70ye7m7UD5Ww0nE29IXqMl6r7Nd15WBgRd74vloEMlShtH6CKxVzfmQ==
+"@babel/plugin-transform-regenerator@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.21.5.tgz#576c62f9923f94bcb1c855adc53561fd7913724e"
+  integrity sha512-ZoYBKDb6LyMi5yCsByQ5jmXsHAQDDYeexT1Szvlmui+lADvfSecr5Dxd/PkrTC3pAD182Fcju1VQkB4oCp9M+w==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-    regenerator-transform "^0.15.0"
+    "@babel/helper-plugin-utils" "^7.21.5"
+    regenerator-transform "^0.15.1"
 
 "@babel/plugin-transform-reserved-words@^7.18.6":
   version "7.18.6"
@@ -840,12 +800,12 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-runtime@^7.21.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.21.0.tgz#2a884f29556d0a68cd3d152dcc9e6c71dfb6eee8"
-  integrity sha512-ReY6pxwSzEU0b3r2/T/VhqMKg/AkceBT19X0UptA3/tYi5Pe2eXgEUH+NNMC5nok6c6XQz5tyVTUpuezRfSMSg==
+"@babel/plugin-transform-runtime@^7.21.4":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.21.4.tgz#2e1da21ca597a7d01fc96b699b21d8d2023191aa"
+  integrity sha512-1J4dhrw1h1PqnNNpzwxQ2UBymJUF8KuPjAAnlLwZcGhHAIqUigFW7cdK6GHoB64ubY4qXQNYknoUeks4Wz7CUA==
   dependencies:
-    "@babel/helper-module-imports" "^7.18.6"
+    "@babel/helper-module-imports" "^7.21.4"
     "@babel/helper-plugin-utils" "^7.20.2"
     babel-plugin-polyfill-corejs2 "^0.3.3"
     babel-plugin-polyfill-corejs3 "^0.6.0"
@@ -859,13 +819,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-spread@^7.19.0":
-  version "7.19.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.19.0.tgz#dd60b4620c2fec806d60cfaae364ec2188d593b6"
-  integrity sha512-RsuMk7j6n+r752EtzyScnWkQyuJdli6LdO5Klv8Yx0OfPVTcQkIUfS8clx5e9yHXzlnhOZF3CbQ8C2uP5j074w==
+"@babel/plugin-transform-spread@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.20.7.tgz#c2d83e0b99d3bf83e07b11995ee24bf7ca09401e"
+  integrity sha512-ewBbHQ+1U/VnH1fxltbJqDeWBU1oNLG8Dj11uIv3xVf7nrQu0bPGe5Rf716r7K5Qz+SqtAOVswoVunoiBtGhxw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.19.0"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
 
 "@babel/plugin-transform-sticky-regex@^7.18.6":
   version "7.18.6"
@@ -888,21 +848,22 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.9"
 
-"@babel/plugin-transform-typescript@^7.21.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.21.0.tgz#f0956a153679e3b377ae5b7f0143427151e4c848"
-  integrity sha512-xo///XTPp3mDzTtrqXoBlK9eiAYW3wv9JXglcn/u1bi60RW11dEUxIgA8cbnDhutS1zacjMRmAwxE0gMklLnZg==
+"@babel/plugin-transform-typescript@^7.21.3":
+  version "7.21.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.21.3.tgz#316c5be579856ea890a57ebc5116c5d064658f2b"
+  integrity sha512-RQxPz6Iqt8T0uw/WsJNReuBpWpBqs/n7mNo18sKLoTbMp+UrEekhH+pKSVC7gWz+DNjo9gryfV8YzCiT45RgMw==
   dependencies:
+    "@babel/helper-annotate-as-pure" "^7.18.6"
     "@babel/helper-create-class-features-plugin" "^7.21.0"
     "@babel/helper-plugin-utils" "^7.20.2"
     "@babel/plugin-syntax-typescript" "^7.20.0"
 
-"@babel/plugin-transform-unicode-escapes@^7.18.10":
-  version "7.18.10"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.18.10.tgz#1ecfb0eda83d09bbcb77c09970c2dd55832aa246"
-  integrity sha512-kKAdAI+YzPgGY/ftStBFXTI1LZFju38rYThnfMykS+IXy8BVx+res7s2fxf1l8I35DV2T97ezo6+SGrXz6B3iQ==
+"@babel/plugin-transform-unicode-escapes@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.21.5.tgz#1e55ed6195259b0e9061d81f5ef45a9b009fb7f2"
+  integrity sha512-LYm/gTOwZqsYohlvFUe/8Tujz75LqqVC2w+2qPHLR+WyWHGCZPN1KBpJCJn+4Bk4gOkQy/IXKIge6az5MqwlOg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.21.5"
 
 "@babel/plugin-transform-unicode-regex@^7.18.6":
   version "7.18.6"
@@ -912,31 +873,31 @@
     "@babel/helper-create-regexp-features-plugin" "^7.18.6"
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/preset-env@^7.20.2":
-  version "7.20.2"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.20.2.tgz#9b1642aa47bb9f43a86f9630011780dab7f86506"
-  integrity sha512-1G0efQEWR1EHkKvKHqbG+IN/QdgwfByUpM5V5QroDzGV2t3S/WXNQd693cHiHTlCFMpr9B6FkPFXDA2lQcKoDg==
+"@babel/preset-env@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.21.5.tgz#db2089d99efd2297716f018aeead815ac3decffb"
+  integrity sha512-wH00QnTTldTbf/IefEVyChtRdw5RJvODT/Vb4Vcxq1AZvtXj6T0YeX0cAcXhI6/BdGuiP3GcNIL4OQbI2DVNxg==
   dependencies:
-    "@babel/compat-data" "^7.20.1"
-    "@babel/helper-compilation-targets" "^7.20.0"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/helper-validator-option" "^7.18.6"
+    "@babel/compat-data" "^7.21.5"
+    "@babel/helper-compilation-targets" "^7.21.5"
+    "@babel/helper-plugin-utils" "^7.21.5"
+    "@babel/helper-validator-option" "^7.21.0"
     "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.18.6"
-    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.18.9"
-    "@babel/plugin-proposal-async-generator-functions" "^7.20.1"
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.20.7"
+    "@babel/plugin-proposal-async-generator-functions" "^7.20.7"
     "@babel/plugin-proposal-class-properties" "^7.18.6"
-    "@babel/plugin-proposal-class-static-block" "^7.18.6"
+    "@babel/plugin-proposal-class-static-block" "^7.21.0"
     "@babel/plugin-proposal-dynamic-import" "^7.18.6"
     "@babel/plugin-proposal-export-namespace-from" "^7.18.9"
     "@babel/plugin-proposal-json-strings" "^7.18.6"
-    "@babel/plugin-proposal-logical-assignment-operators" "^7.18.9"
+    "@babel/plugin-proposal-logical-assignment-operators" "^7.20.7"
     "@babel/plugin-proposal-nullish-coalescing-operator" "^7.18.6"
     "@babel/plugin-proposal-numeric-separator" "^7.18.6"
-    "@babel/plugin-proposal-object-rest-spread" "^7.20.2"
+    "@babel/plugin-proposal-object-rest-spread" "^7.20.7"
     "@babel/plugin-proposal-optional-catch-binding" "^7.18.6"
-    "@babel/plugin-proposal-optional-chaining" "^7.18.9"
+    "@babel/plugin-proposal-optional-chaining" "^7.21.0"
     "@babel/plugin-proposal-private-methods" "^7.18.6"
-    "@babel/plugin-proposal-private-property-in-object" "^7.18.6"
+    "@babel/plugin-proposal-private-property-in-object" "^7.21.0"
     "@babel/plugin-proposal-unicode-property-regex" "^7.18.6"
     "@babel/plugin-syntax-async-generators" "^7.8.4"
     "@babel/plugin-syntax-class-properties" "^7.12.13"
@@ -944,6 +905,7 @@
     "@babel/plugin-syntax-dynamic-import" "^7.8.3"
     "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
     "@babel/plugin-syntax-import-assertions" "^7.20.0"
+    "@babel/plugin-syntax-import-meta" "^7.10.4"
     "@babel/plugin-syntax-json-strings" "^7.8.3"
     "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
     "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
@@ -953,40 +915,40 @@
     "@babel/plugin-syntax-optional-chaining" "^7.8.3"
     "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
     "@babel/plugin-syntax-top-level-await" "^7.14.5"
-    "@babel/plugin-transform-arrow-functions" "^7.18.6"
-    "@babel/plugin-transform-async-to-generator" "^7.18.6"
+    "@babel/plugin-transform-arrow-functions" "^7.21.5"
+    "@babel/plugin-transform-async-to-generator" "^7.20.7"
     "@babel/plugin-transform-block-scoped-functions" "^7.18.6"
-    "@babel/plugin-transform-block-scoping" "^7.20.2"
-    "@babel/plugin-transform-classes" "^7.20.2"
-    "@babel/plugin-transform-computed-properties" "^7.18.9"
-    "@babel/plugin-transform-destructuring" "^7.20.2"
+    "@babel/plugin-transform-block-scoping" "^7.21.0"
+    "@babel/plugin-transform-classes" "^7.21.0"
+    "@babel/plugin-transform-computed-properties" "^7.21.5"
+    "@babel/plugin-transform-destructuring" "^7.21.3"
     "@babel/plugin-transform-dotall-regex" "^7.18.6"
     "@babel/plugin-transform-duplicate-keys" "^7.18.9"
     "@babel/plugin-transform-exponentiation-operator" "^7.18.6"
-    "@babel/plugin-transform-for-of" "^7.18.8"
+    "@babel/plugin-transform-for-of" "^7.21.5"
     "@babel/plugin-transform-function-name" "^7.18.9"
     "@babel/plugin-transform-literals" "^7.18.9"
     "@babel/plugin-transform-member-expression-literals" "^7.18.6"
-    "@babel/plugin-transform-modules-amd" "^7.19.6"
-    "@babel/plugin-transform-modules-commonjs" "^7.19.6"
-    "@babel/plugin-transform-modules-systemjs" "^7.19.6"
+    "@babel/plugin-transform-modules-amd" "^7.20.11"
+    "@babel/plugin-transform-modules-commonjs" "^7.21.5"
+    "@babel/plugin-transform-modules-systemjs" "^7.20.11"
     "@babel/plugin-transform-modules-umd" "^7.18.6"
-    "@babel/plugin-transform-named-capturing-groups-regex" "^7.19.1"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.20.5"
     "@babel/plugin-transform-new-target" "^7.18.6"
     "@babel/plugin-transform-object-super" "^7.18.6"
-    "@babel/plugin-transform-parameters" "^7.20.1"
+    "@babel/plugin-transform-parameters" "^7.21.3"
     "@babel/plugin-transform-property-literals" "^7.18.6"
-    "@babel/plugin-transform-regenerator" "^7.18.6"
+    "@babel/plugin-transform-regenerator" "^7.21.5"
     "@babel/plugin-transform-reserved-words" "^7.18.6"
     "@babel/plugin-transform-shorthand-properties" "^7.18.6"
-    "@babel/plugin-transform-spread" "^7.19.0"
+    "@babel/plugin-transform-spread" "^7.20.7"
     "@babel/plugin-transform-sticky-regex" "^7.18.6"
     "@babel/plugin-transform-template-literals" "^7.18.9"
     "@babel/plugin-transform-typeof-symbol" "^7.18.9"
-    "@babel/plugin-transform-unicode-escapes" "^7.18.10"
+    "@babel/plugin-transform-unicode-escapes" "^7.21.5"
     "@babel/plugin-transform-unicode-regex" "^7.18.6"
     "@babel/preset-modules" "^0.1.5"
-    "@babel/types" "^7.20.2"
+    "@babel/types" "^7.21.5"
     babel-plugin-polyfill-corejs2 "^0.3.3"
     babel-plugin-polyfill-corejs3 "^0.6.0"
     babel-plugin-polyfill-regenerator "^0.4.1"
@@ -1004,14 +966,21 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
-"@babel/preset-typescript@^7.21.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.21.0.tgz#bcbbca513e8213691fe5d4b23d9251e01f00ebff"
-  integrity sha512-myc9mpoVA5m1rF8K8DgLEatOYFDpwC+RkMkjZ0Du6uI62YvDe8uxIEYVs/VCdSJ097nlALiU/yBC7//3nI+hNg==
+"@babel/preset-typescript@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.21.5.tgz#68292c884b0e26070b4d66b202072d391358395f"
+  integrity sha512-iqe3sETat5EOrORXiQ6rWfoOg2y68Cs75B9wNxdPW4kixJxh7aXQE1KPdWLDniC24T/6dSnguF33W9j/ZZQcmA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-plugin-utils" "^7.21.5"
     "@babel/helper-validator-option" "^7.21.0"
-    "@babel/plugin-transform-typescript" "^7.21.0"
+    "@babel/plugin-syntax-jsx" "^7.21.4"
+    "@babel/plugin-transform-modules-commonjs" "^7.21.5"
+    "@babel/plugin-transform-typescript" "^7.21.3"
+
+"@babel/regjsgen@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
+  integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
 "@babel/runtime@^7.12.5", "@babel/runtime@^7.8.4":
   version "7.17.9"
@@ -1029,28 +998,28 @@
     "@babel/parser" "^7.20.7"
     "@babel/types" "^7.20.7"
 
-"@babel/traverse@^7.1.0", "@babel/traverse@^7.18.11", "@babel/traverse@^7.18.6", "@babel/traverse@^7.20.7", "@babel/traverse@^7.21.0", "@babel/traverse@^7.21.2", "@babel/traverse@^7.21.3":
-  version "7.21.3"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.21.3.tgz#4747c5e7903d224be71f90788b06798331896f67"
-  integrity sha512-XLyopNeaTancVitYZe2MlUEvgKb6YVVPXzofHgqHijCImG33b/uTurMS488ht/Hbsb2XK3U2BnSTxKVNGV3nGQ==
+"@babel/traverse@^7.1.0", "@babel/traverse@^7.18.11", "@babel/traverse@^7.20.7", "@babel/traverse@^7.21.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.21.5.tgz#ad22361d352a5154b498299d523cf72998a4b133"
+  integrity sha512-AhQoI3YjWi6u/y/ntv7k48mcrCXmus0t79J9qPNlk/lAsFlCiJ047RmbfMOawySTHtywXhbXgpx/8nXMYd+oFw==
   dependencies:
-    "@babel/code-frame" "^7.18.6"
-    "@babel/generator" "^7.21.3"
-    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/code-frame" "^7.21.4"
+    "@babel/generator" "^7.21.5"
+    "@babel/helper-environment-visitor" "^7.21.5"
     "@babel/helper-function-name" "^7.21.0"
     "@babel/helper-hoist-variables" "^7.18.6"
     "@babel/helper-split-export-declaration" "^7.18.6"
-    "@babel/parser" "^7.21.3"
-    "@babel/types" "^7.21.3"
+    "@babel/parser" "^7.21.5"
+    "@babel/types" "^7.21.5"
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/types@^7.0.0", "@babel/types@^7.18.10", "@babel/types@^7.18.6", "@babel/types@^7.18.9", "@babel/types@^7.19.0", "@babel/types@^7.20.0", "@babel/types@^7.20.2", "@babel/types@^7.20.7", "@babel/types@^7.21.0", "@babel/types@^7.21.2", "@babel/types@^7.21.3", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
-  version "7.21.3"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.21.3.tgz#4865a5357ce40f64e3400b0f3b737dc6d4f64d05"
-  integrity sha512-sBGdETxC+/M4o/zKC0sl6sjWv62WFR/uzxrJ6uYyMLZOUlPnwzw0tKgVHOXxaAd5l2g8pEDM5RZ495GPQI77kg==
+"@babel/types@^7.0.0", "@babel/types@^7.18.10", "@babel/types@^7.18.6", "@babel/types@^7.18.9", "@babel/types@^7.20.0", "@babel/types@^7.20.7", "@babel/types@^7.21.0", "@babel/types@^7.21.4", "@babel/types@^7.21.5", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.21.5.tgz#18dfbd47c39d3904d5db3d3dc2cc80bedb60e5b6"
+  integrity sha512-m4AfNvVF2mVC/F7fDEdH2El3HzUg9It/XsCxZiOTTA3m3qYfcSVSbTfM6Q9xG+hYDniZssYhlXKKUMD5m8tF4Q==
   dependencies:
-    "@babel/helper-string-parser" "^7.19.4"
+    "@babel/helper-string-parser" "^7.21.5"
     "@babel/helper-validator-identifier" "^7.19.1"
     to-fast-properties "^2.0.0"
 
@@ -1207,14 +1176,14 @@
   resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.4.0.tgz#3e61c564fcd6b921cb789838631c5ee44df09403"
   integrity sha512-A9983Q0LnDGdLPjxyXQ00sbV+K+O+ko2Dr+CZigbHWtX9pNfxlaBkMR8X1CztI73zuEyEBXTVjx7CE+/VSwDiQ==
 
-"@eslint/eslintrc@^2.0.1":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.0.1.tgz#7888fe7ec8f21bc26d646dbd2c11cd776e21192d"
-  integrity sha512-eFRmABvW2E5Ho6f5fHLqgena46rOj7r7OKHYfLElqcBfGFHHpjBhivyi5+jOEQuSpdc/1phIZJlbC2te+tZNIw==
+"@eslint/eslintrc@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.0.3.tgz#4910db5505f4d503f27774bf356e3704818a0331"
+  integrity sha512-+5gy6OQfk+xx3q0d6jGZZC3f3KzAkXc/IanVxd1is/VIIziRqqt3ongQz0FiTUXqTk0c7aDB3OaFuKnuSoJicQ==
   dependencies:
     ajv "^6.12.4"
     debug "^4.3.2"
-    espree "^9.5.0"
+    espree "^9.5.2"
     globals "^13.19.0"
     ignore "^5.2.0"
     import-fresh "^3.2.1"
@@ -1222,10 +1191,10 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@eslint/js@8.36.0":
-  version "8.36.0"
-  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.36.0.tgz#9837f768c03a1e4a30bd304a64fb8844f0e72efe"
-  integrity sha512-lxJ9R5ygVm8ZWgYdUweoq5ownDlJ4upvoWmO4eLxBYHdMo+vZ/Rx0EN6MbKWDJOSUGrqJy2Gt+Dyv/VKml0fjg==
+"@eslint/js@8.40.0":
+  version "8.40.0"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.40.0.tgz#3ba73359e11f5a7bd3e407f70b3528abfae69cec"
+  integrity sha512-ElyB54bJIhXQYVKjDSvCkPO1iU1tSAeVQJbllWJq1XQSmmA4dgFk8CbiBGpiOPxleE48vDogxCtmMYku4HSVLA==
 
 "@humanwhocodes/config-array@^0.11.8":
   version "0.11.8"
@@ -1575,10 +1544,10 @@
     "@lit/reactive-element" "^1.0.0"
     "@open-wc/dedupe-mixin" "^1.3.0"
 
-"@open-wc/testing-helpers@^2.2.0":
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/@open-wc/testing-helpers/-/testing-helpers-2.2.0.tgz#cba3145d3b7ad3984183d340df68e83207733cef"
-  integrity sha512-4TGG5WLHeHyCgki5qsLTDZahA2gaJA0W8uc4ribNwR77vmYhEZMgfkgeCmaACoMQ9dfUCA2LOdnHtlxeR9Klyw==
+"@open-wc/testing-helpers@^2.2.1":
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/@open-wc/testing-helpers/-/testing-helpers-2.2.1.tgz#10ed75c33faec0ed68c76e027ebe8be262a36921"
+  integrity sha512-8zuJK7tUQYuXRIC/cVcPbAPOhtBJCe3Jfpk7im7WK0DIAXH9Q/ycB+yu3R8g4BQ31f/FdLjIFRbPZzIU75kkRg==
   dependencies:
     "@open-wc/scoped-elements" "^2.1.3"
     lit "^2.0.0"
@@ -1589,7 +1558,7 @@
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
   integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
 
-"@popperjs/core@^2.11.7", "@popperjs/core@^2.9.2":
+"@popperjs/core@^2.11.7", "@popperjs/core@^2.9.0", "@popperjs/core@^2.9.2":
   version "2.11.7"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.7.tgz#ccab5c8f7dc557a52ca3288c10075c9ccd37fff7"
   integrity sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==
@@ -1620,10 +1589,10 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
-"@testing-library/dom@^9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-9.2.0.tgz#0e1f45e956f2a16f471559c06edd8827c4832f04"
-  integrity sha512-xTEnpUKiV/bMyEsE5bT4oYA0x0Z/colMtxzUY8bKyPXBNLn/e0V4ZjBZkEhms0xE4pv9QsPfSRu9AWS4y5wGvA==
+"@testing-library/dom@^9.3.0":
+  version "9.3.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-9.3.0.tgz#ed8ce10aa5e05eb6eaf0635b5b8975d889f66075"
+  integrity sha512-Dffe68pGwI6WlLRYR2I0piIkyole9cSBH5jGQKCGMRpHW5RHCqAUaqc2Kv0tUyd4dU4DLPKhJIjyKOnjv4tuUw==
   dependencies:
     "@babel/code-frame" "^7.10.4"
     "@babel/runtime" "^7.12.5"
@@ -1925,10 +1894,10 @@
     "@types/estree" "*"
     "@types/json-schema" "*"
 
-"@types/estree@*", "@types/estree@^0.0.51":
-  version "0.0.51"
-  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.51.tgz#cfd70924a25a3fd32b218e5e420e6897e1ac4f40"
-  integrity sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==
+"@types/estree@*", "@types/estree@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.0.tgz#5fb2e536c1ae9bf35366eed879e827fa59ca41c2"
+  integrity sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==
 
 "@types/geojson@*":
   version "7946.0.8"
@@ -2053,15 +2022,15 @@
   dependencies:
     "@types/yargs-parser" "*"
 
-"@typescript-eslint/eslint-plugin@^5.56.0":
-  version "5.56.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.56.0.tgz#e4fbb4d6dd8dab3e733485c1a44a02189ae75364"
-  integrity sha512-ZNW37Ccl3oMZkzxrYDUX4o7cnuPgU+YrcaYXzsRtLB16I1FR5SHMqga3zGsaSliZADCWo2v8qHWqAYIj8nWCCg==
+"@typescript-eslint/eslint-plugin@^5.59.5":
+  version "5.59.5"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.59.5.tgz#f156827610a3f8cefc56baeaa93cd4a5f32966b4"
+  integrity sha512-feA9xbVRWJZor+AnLNAr7A8JRWeZqHUf4T9tlP+TN04b05pFVhO5eN7/O93Y/1OUlLMHKbnJisgDURs/qvtqdg==
   dependencies:
     "@eslint-community/regexpp" "^4.4.0"
-    "@typescript-eslint/scope-manager" "5.56.0"
-    "@typescript-eslint/type-utils" "5.56.0"
-    "@typescript-eslint/utils" "5.56.0"
+    "@typescript-eslint/scope-manager" "5.59.5"
+    "@typescript-eslint/type-utils" "5.59.5"
+    "@typescript-eslint/utils" "5.59.5"
     debug "^4.3.4"
     grapheme-splitter "^1.0.4"
     ignore "^5.2.0"
@@ -2069,193 +2038,193 @@
     semver "^7.3.7"
     tsutils "^3.21.0"
 
-"@typescript-eslint/parser@^5.56.0":
-  version "5.56.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.56.0.tgz#42eafb44b639ef1dbd54a3dbe628c446ca753ea6"
-  integrity sha512-sn1OZmBxUsgxMmR8a8U5QM/Wl+tyqlH//jTqCg8daTAmhAk26L2PFhcqPLlYBhYUJMZJK276qLXlHN3a83o2cg==
+"@typescript-eslint/parser@^5.59.5":
+  version "5.59.5"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.59.5.tgz#63064f5eafbdbfb5f9dfbf5c4503cdf949852981"
+  integrity sha512-NJXQC4MRnF9N9yWqQE2/KLRSOLvrrlZb48NGVfBa+RuPMN6B7ZcK5jZOvhuygv4D64fRKnZI4L4p8+M+rfeQuw==
   dependencies:
-    "@typescript-eslint/scope-manager" "5.56.0"
-    "@typescript-eslint/types" "5.56.0"
-    "@typescript-eslint/typescript-estree" "5.56.0"
+    "@typescript-eslint/scope-manager" "5.59.5"
+    "@typescript-eslint/types" "5.59.5"
+    "@typescript-eslint/typescript-estree" "5.59.5"
     debug "^4.3.4"
 
-"@typescript-eslint/scope-manager@5.56.0":
-  version "5.56.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.56.0.tgz#62b4055088903b5254fa20403010e1c16d6ab725"
-  integrity sha512-jGYKyt+iBakD0SA5Ww8vFqGpoV2asSjwt60Gl6YcO8ksQ8s2HlUEyHBMSa38bdLopYqGf7EYQMUIGdT/Luw+sw==
+"@typescript-eslint/scope-manager@5.59.5":
+  version "5.59.5"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.59.5.tgz#33ffc7e8663f42cfaac873de65ebf65d2bce674d"
+  integrity sha512-jVecWwnkX6ZgutF+DovbBJirZcAxgxC0EOHYt/niMROf8p4PwxxG32Qdhj/iIQQIuOflLjNkxoXyArkcIP7C3A==
   dependencies:
-    "@typescript-eslint/types" "5.56.0"
-    "@typescript-eslint/visitor-keys" "5.56.0"
+    "@typescript-eslint/types" "5.59.5"
+    "@typescript-eslint/visitor-keys" "5.59.5"
 
-"@typescript-eslint/type-utils@5.56.0":
-  version "5.56.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.56.0.tgz#e6f004a072f09c42e263dc50e98c70b41a509685"
-  integrity sha512-8WxgOgJjWRy6m4xg9KoSHPzBNZeQbGlQOH7l2QEhQID/+YseaFxg5J/DLwWSsi9Axj4e/cCiKx7PVzOq38tY4A==
+"@typescript-eslint/type-utils@5.59.5":
+  version "5.59.5"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.59.5.tgz#485b0e2c5b923460bc2ea6b338c595343f06fc9b"
+  integrity sha512-4eyhS7oGym67/pSxA2mmNq7X164oqDYNnZCUayBwJZIRVvKpBCMBzFnFxjeoDeShjtO6RQBHBuwybuX3POnDqg==
   dependencies:
-    "@typescript-eslint/typescript-estree" "5.56.0"
-    "@typescript-eslint/utils" "5.56.0"
+    "@typescript-eslint/typescript-estree" "5.59.5"
+    "@typescript-eslint/utils" "5.59.5"
     debug "^4.3.4"
     tsutils "^3.21.0"
 
-"@typescript-eslint/types@5.56.0":
-  version "5.56.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.56.0.tgz#b03f0bfd6fa2afff4e67c5795930aff398cbd834"
-  integrity sha512-JyAzbTJcIyhuUhogmiu+t79AkdnqgPUEsxMTMc/dCZczGMJQh1MK2wgrju++yMN6AWroVAy2jxyPcPr3SWCq5w==
+"@typescript-eslint/types@5.59.5":
+  version "5.59.5"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.59.5.tgz#e63c5952532306d97c6ea432cee0981f6d2258c7"
+  integrity sha512-xkfRPHbqSH4Ggx4eHRIO/eGL8XL4Ysb4woL8c87YuAo8Md7AUjyWKa9YMwTL519SyDPrfEgKdewjkxNCVeJW7w==
 
-"@typescript-eslint/typescript-estree@5.56.0":
-  version "5.56.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.56.0.tgz#48342aa2344649a03321e74cab9ccecb9af086c3"
-  integrity sha512-41CH/GncsLXOJi0jb74SnC7jVPWeVJ0pxQj8bOjH1h2O26jXN3YHKDT1ejkVz5YeTEQPeLCCRY0U2r68tfNOcg==
+"@typescript-eslint/typescript-estree@5.59.5":
+  version "5.59.5"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.59.5.tgz#9b252ce55dd765e972a7a2f99233c439c5101e42"
+  integrity sha512-+XXdLN2CZLZcD/mO7mQtJMvCkzRfmODbeSKuMY/yXbGkzvA9rJyDY5qDYNoiz2kP/dmyAxXquL2BvLQLJFPQIg==
   dependencies:
-    "@typescript-eslint/types" "5.56.0"
-    "@typescript-eslint/visitor-keys" "5.56.0"
+    "@typescript-eslint/types" "5.59.5"
+    "@typescript-eslint/visitor-keys" "5.59.5"
     debug "^4.3.4"
     globby "^11.1.0"
     is-glob "^4.0.3"
     semver "^7.3.7"
     tsutils "^3.21.0"
 
-"@typescript-eslint/utils@5.56.0", "@typescript-eslint/utils@^5.10.0":
-  version "5.56.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.56.0.tgz#db64705409b9a15546053fb4deb2888b37df1f41"
-  integrity sha512-XhZDVdLnUJNtbzaJeDSCIYaM+Tgr59gZGbFuELgF7m0IY03PlciidS7UQNKLE0+WpUTn1GlycEr6Ivb/afjbhA==
+"@typescript-eslint/utils@5.59.5", "@typescript-eslint/utils@^5.10.0":
+  version "5.59.5"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.59.5.tgz#15b3eb619bb223302e60413adb0accd29c32bcae"
+  integrity sha512-sCEHOiw+RbyTii9c3/qN74hYDPNORb8yWCoPLmB7BIflhplJ65u2PBpdRla12e3SSTJ2erRkPjz7ngLHhUegxA==
   dependencies:
     "@eslint-community/eslint-utils" "^4.2.0"
     "@types/json-schema" "^7.0.9"
     "@types/semver" "^7.3.12"
-    "@typescript-eslint/scope-manager" "5.56.0"
-    "@typescript-eslint/types" "5.56.0"
-    "@typescript-eslint/typescript-estree" "5.56.0"
+    "@typescript-eslint/scope-manager" "5.59.5"
+    "@typescript-eslint/types" "5.59.5"
+    "@typescript-eslint/typescript-estree" "5.59.5"
     eslint-scope "^5.1.1"
     semver "^7.3.7"
 
-"@typescript-eslint/visitor-keys@5.56.0":
-  version "5.56.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.56.0.tgz#f19eb297d972417eb13cb69b35b3213e13cc214f"
-  integrity sha512-1mFdED7u5bZpX6Xxf5N9U2c18sb+8EvU3tyOIj6LQZ5OOvnmj8BVeNNP603OFPm5KkS1a7IvCIcwrdHXaEMG/Q==
+"@typescript-eslint/visitor-keys@5.59.5":
+  version "5.59.5"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.59.5.tgz#ba5b8d6791a13cf9fea6716af1e7626434b29b9b"
+  integrity sha512-qL+Oz+dbeBRTeyJTIy0eniD3uvqU7x+y1QceBismZ41hd4aBSRh8UAw4pZP0+XzLuPZmx4raNMq/I+59W2lXKA==
   dependencies:
-    "@typescript-eslint/types" "5.56.0"
+    "@typescript-eslint/types" "5.59.5"
     eslint-visitor-keys "^3.3.0"
 
-"@webassemblyjs/ast@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.1.tgz#2bfd767eae1a6996f432ff7e8d7fc75679c0b6a7"
-  integrity sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw==
+"@webassemblyjs/ast@1.11.5", "@webassemblyjs/ast@^1.11.5":
+  version "1.11.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.5.tgz#6e818036b94548c1fb53b754b5cae3c9b208281c"
+  integrity sha512-LHY/GSAZZRpsNQH+/oHqhRQ5FT7eoULcBqgfyTB5nQHogFnK3/7QoN7dLnwSE/JkUAF0SrRuclT7ODqMFtWxxQ==
   dependencies:
-    "@webassemblyjs/helper-numbers" "1.11.1"
-    "@webassemblyjs/helper-wasm-bytecode" "1.11.1"
+    "@webassemblyjs/helper-numbers" "1.11.5"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.5"
 
-"@webassemblyjs/floating-point-hex-parser@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.1.tgz#f6c61a705f0fd7a6aecaa4e8198f23d9dc179e4f"
-  integrity sha512-iGRfyc5Bq+NnNuX8b5hwBrRjzf0ocrJPI6GWFodBFzmFnyvrQ83SHKhmilCU/8Jv67i4GJZBMhEzltxzcNagtQ==
+"@webassemblyjs/floating-point-hex-parser@1.11.5":
+  version "1.11.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.5.tgz#e85dfdb01cad16b812ff166b96806c050555f1b4"
+  integrity sha512-1j1zTIC5EZOtCplMBG/IEwLtUojtwFVwdyVMbL/hwWqbzlQoJsWCOavrdnLkemwNoC/EOwtUFch3fuo+cbcXYQ==
 
-"@webassemblyjs/helper-api-error@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.1.tgz#1a63192d8788e5c012800ba6a7a46c705288fd16"
-  integrity sha512-RlhS8CBCXfRUR/cwo2ho9bkheSXG0+NwooXcc3PAILALf2QLdFyj7KGsKRbVc95hZnhnERon4kW/D3SZpp6Tcg==
+"@webassemblyjs/helper-api-error@1.11.5":
+  version "1.11.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.5.tgz#1e82fa7958c681ddcf4eabef756ce09d49d442d1"
+  integrity sha512-L65bDPmfpY0+yFrsgz8b6LhXmbbs38OnwDCf6NpnMUYqa+ENfE5Dq9E42ny0qz/PdR0LJyq/T5YijPnU8AXEpA==
 
-"@webassemblyjs/helper-buffer@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.1.tgz#832a900eb444884cde9a7cad467f81500f5e5ab5"
-  integrity sha512-gwikF65aDNeeXa8JxXa2BAk+REjSyhrNC9ZwdT0f8jc4dQQeDQ7G4m0f2QCLPJiMTTO6wfDmRmj/pW0PsUvIcA==
+"@webassemblyjs/helper-buffer@1.11.5":
+  version "1.11.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.5.tgz#91381652ea95bb38bbfd270702351c0c89d69fba"
+  integrity sha512-fDKo1gstwFFSfacIeH5KfwzjykIE6ldh1iH9Y/8YkAZrhmu4TctqYjSh7t0K2VyDSXOZJ1MLhht/k9IvYGcIxg==
 
-"@webassemblyjs/helper-numbers@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.1.tgz#64d81da219fbbba1e3bd1bfc74f6e8c4e10a62ae"
-  integrity sha512-vDkbxiB8zfnPdNK9Rajcey5C0w+QJugEglN0of+kmO8l7lDb77AnlKYQF7aarZuCrv+l0UvqL+68gSDr3k9LPQ==
+"@webassemblyjs/helper-numbers@1.11.5":
+  version "1.11.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.5.tgz#23380c910d56764957292839006fecbe05e135a9"
+  integrity sha512-DhykHXM0ZABqfIGYNv93A5KKDw/+ywBFnuWybZZWcuzWHfbp21wUfRkbtz7dMGwGgT4iXjWuhRMA2Mzod6W4WA==
   dependencies:
-    "@webassemblyjs/floating-point-hex-parser" "1.11.1"
-    "@webassemblyjs/helper-api-error" "1.11.1"
+    "@webassemblyjs/floating-point-hex-parser" "1.11.5"
+    "@webassemblyjs/helper-api-error" "1.11.5"
     "@xtuc/long" "4.2.2"
 
-"@webassemblyjs/helper-wasm-bytecode@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.1.tgz#f328241e41e7b199d0b20c18e88429c4433295e1"
-  integrity sha512-PvpoOGiJwXeTrSf/qfudJhwlvDQxFgelbMqtq52WWiXC6Xgg1IREdngmPN3bs4RoO83PnL/nFrxucXj1+BX62Q==
+"@webassemblyjs/helper-wasm-bytecode@1.11.5":
+  version "1.11.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.5.tgz#e258a25251bc69a52ef817da3001863cc1c24b9f"
+  integrity sha512-oC4Qa0bNcqnjAowFn7MPCETQgDYytpsfvz4ujZz63Zu/a/v71HeCAAmZsgZ3YVKec3zSPYytG3/PrRCqbtcAvA==
 
-"@webassemblyjs/helper-wasm-section@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.1.tgz#21ee065a7b635f319e738f0dd73bfbda281c097a"
-  integrity sha512-10P9No29rYX1j7F3EVPX3JvGPQPae+AomuSTPiF9eBQeChHI6iqjMIwR9JmOJXwpnn/oVGDk7I5IlskuMwU/pg==
+"@webassemblyjs/helper-wasm-section@1.11.5":
+  version "1.11.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.5.tgz#966e855a6fae04d5570ad4ec87fbcf29b42ba78e"
+  integrity sha512-uEoThA1LN2NA+K3B9wDo3yKlBfVtC6rh0i4/6hvbz071E8gTNZD/pT0MsBf7MeD6KbApMSkaAK0XeKyOZC7CIA==
   dependencies:
-    "@webassemblyjs/ast" "1.11.1"
-    "@webassemblyjs/helper-buffer" "1.11.1"
-    "@webassemblyjs/helper-wasm-bytecode" "1.11.1"
-    "@webassemblyjs/wasm-gen" "1.11.1"
+    "@webassemblyjs/ast" "1.11.5"
+    "@webassemblyjs/helper-buffer" "1.11.5"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.5"
+    "@webassemblyjs/wasm-gen" "1.11.5"
 
-"@webassemblyjs/ieee754@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.11.1.tgz#963929e9bbd05709e7e12243a099180812992614"
-  integrity sha512-hJ87QIPtAMKbFq6CGTkZYJivEwZDbQUgYd3qKSadTNOhVY7p+gfP6Sr0lLRVTaG1JjFj+r3YchoqRYxNH3M0GQ==
+"@webassemblyjs/ieee754@1.11.5":
+  version "1.11.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.11.5.tgz#b2db1b33ce9c91e34236194c2b5cba9b25ca9d60"
+  integrity sha512-37aGq6qVL8A8oPbPrSGMBcp38YZFXcHfiROflJn9jxSdSMMM5dS5P/9e2/TpaJuhE+wFrbukN2WI6Hw9MH5acg==
   dependencies:
     "@xtuc/ieee754" "^1.2.0"
 
-"@webassemblyjs/leb128@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.11.1.tgz#ce814b45574e93d76bae1fb2644ab9cdd9527aa5"
-  integrity sha512-BJ2P0hNZ0u+Th1YZXJpzW6miwqQUGcIHT1G/sf72gLVD9DZ5AdYTqPNbHZh6K1M5VmKvFXwGSWZADz+qBWxeRw==
+"@webassemblyjs/leb128@1.11.5":
+  version "1.11.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.11.5.tgz#482e44d26b6b949edf042a8525a66c649e38935a"
+  integrity sha512-ajqrRSXaTJoPW+xmkfYN6l8VIeNnR4vBOTQO9HzR7IygoCcKWkICbKFbVTNMjMgMREqXEr0+2M6zukzM47ZUfQ==
   dependencies:
     "@xtuc/long" "4.2.2"
 
-"@webassemblyjs/utf8@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.11.1.tgz#d1f8b764369e7c6e6bae350e854dec9a59f0a3ff"
-  integrity sha512-9kqcxAEdMhiwQkHpkNiorZzqpGrodQQ2IGrHHxCy+Ozng0ofyMA0lTqiLkVs1uzTRejX+/O0EOT7KxqVPuXosQ==
-
-"@webassemblyjs/wasm-edit@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.1.tgz#ad206ebf4bf95a058ce9880a8c092c5dec8193d6"
-  integrity sha512-g+RsupUC1aTHfR8CDgnsVRVZFJqdkFHpsHMfJuWQzWU3tvnLC07UqHICfP+4XyL2tnr1amvl1Sdp06TnYCmVkA==
-  dependencies:
-    "@webassemblyjs/ast" "1.11.1"
-    "@webassemblyjs/helper-buffer" "1.11.1"
-    "@webassemblyjs/helper-wasm-bytecode" "1.11.1"
-    "@webassemblyjs/helper-wasm-section" "1.11.1"
-    "@webassemblyjs/wasm-gen" "1.11.1"
-    "@webassemblyjs/wasm-opt" "1.11.1"
-    "@webassemblyjs/wasm-parser" "1.11.1"
-    "@webassemblyjs/wast-printer" "1.11.1"
-
-"@webassemblyjs/wasm-gen@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.1.tgz#86c5ea304849759b7d88c47a32f4f039ae3c8f76"
-  integrity sha512-F7QqKXwwNlMmsulj6+O7r4mmtAlCWfO/0HdgOxSklZfQcDu0TpLiD1mRt/zF25Bk59FIjEuGAIyn5ei4yMfLhA==
-  dependencies:
-    "@webassemblyjs/ast" "1.11.1"
-    "@webassemblyjs/helper-wasm-bytecode" "1.11.1"
-    "@webassemblyjs/ieee754" "1.11.1"
-    "@webassemblyjs/leb128" "1.11.1"
-    "@webassemblyjs/utf8" "1.11.1"
-
-"@webassemblyjs/wasm-opt@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.1.tgz#657b4c2202f4cf3b345f8a4c6461c8c2418985f2"
-  integrity sha512-VqnkNqnZlU5EB64pp1l7hdm3hmQw7Vgqa0KF/KCNO9sIpI6Fk6brDEiX+iCOYrvMuBWDws0NkTOxYEb85XQHHw==
-  dependencies:
-    "@webassemblyjs/ast" "1.11.1"
-    "@webassemblyjs/helper-buffer" "1.11.1"
-    "@webassemblyjs/wasm-gen" "1.11.1"
-    "@webassemblyjs/wasm-parser" "1.11.1"
-
-"@webassemblyjs/wasm-parser@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.1.tgz#86ca734534f417e9bd3c67c7a1c75d8be41fb199"
-  integrity sha512-rrBujw+dJu32gYB7/Lup6UhdkPx9S9SnobZzRVL7VcBH9Bt9bCBLEuX/YXOOtBsOZ4NQrRykKhffRWHvigQvOA==
-  dependencies:
-    "@webassemblyjs/ast" "1.11.1"
-    "@webassemblyjs/helper-api-error" "1.11.1"
-    "@webassemblyjs/helper-wasm-bytecode" "1.11.1"
-    "@webassemblyjs/ieee754" "1.11.1"
-    "@webassemblyjs/leb128" "1.11.1"
-    "@webassemblyjs/utf8" "1.11.1"
-
-"@webassemblyjs/wast-printer@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.11.1.tgz#d0c73beda8eec5426f10ae8ef55cee5e7084c2f0"
-  integrity sha512-IQboUWM4eKzWW+N/jij2sRatKMh99QEelo3Eb2q0qXkvPRISAj8Qxtmw5itwqK+TTkBuUIE45AxYPToqPtL5gg==
-  dependencies:
-    "@webassemblyjs/ast" "1.11.1"
+"@webassemblyjs/utf8@1.11.5":
+  version "1.11.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.11.5.tgz#83bef94856e399f3740e8df9f63bc47a987eae1a"
+  integrity sha512-WiOhulHKTZU5UPlRl53gHR8OxdGsSOxqfpqWeA2FmcwBMaoEdz6b2x2si3IwC9/fSPLfe8pBMRTHVMk5nlwnFQ==
+
+"@webassemblyjs/wasm-edit@^1.11.5":
+  version "1.11.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.5.tgz#93ee10a08037657e21c70de31c47fdad6b522b2d"
+  integrity sha512-C0p9D2fAu3Twwqvygvf42iGCQ4av8MFBLiTb+08SZ4cEdwzWx9QeAHDo1E2k+9s/0w1DM40oflJOpkZ8jW4HCQ==
+  dependencies:
+    "@webassemblyjs/ast" "1.11.5"
+    "@webassemblyjs/helper-buffer" "1.11.5"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.5"
+    "@webassemblyjs/helper-wasm-section" "1.11.5"
+    "@webassemblyjs/wasm-gen" "1.11.5"
+    "@webassemblyjs/wasm-opt" "1.11.5"
+    "@webassemblyjs/wasm-parser" "1.11.5"
+    "@webassemblyjs/wast-printer" "1.11.5"
+
+"@webassemblyjs/wasm-gen@1.11.5":
+  version "1.11.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.5.tgz#ceb1c82b40bf0cf67a492c53381916756ef7f0b1"
+  integrity sha512-14vteRlRjxLK9eSyYFvw1K8Vv+iPdZU0Aebk3j6oB8TQiQYuO6hj9s4d7qf6f2HJr2khzvNldAFG13CgdkAIfA==
+  dependencies:
+    "@webassemblyjs/ast" "1.11.5"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.5"
+    "@webassemblyjs/ieee754" "1.11.5"
+    "@webassemblyjs/leb128" "1.11.5"
+    "@webassemblyjs/utf8" "1.11.5"
+
+"@webassemblyjs/wasm-opt@1.11.5":
+  version "1.11.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.5.tgz#b52bac29681fa62487e16d3bb7f0633d5e62ca0a"
+  integrity sha512-tcKwlIXstBQgbKy1MlbDMlXaxpucn42eb17H29rawYLxm5+MsEmgPzeCP8B1Cl69hCice8LeKgZpRUAPtqYPgw==
+  dependencies:
+    "@webassemblyjs/ast" "1.11.5"
+    "@webassemblyjs/helper-buffer" "1.11.5"
+    "@webassemblyjs/wasm-gen" "1.11.5"
+    "@webassemblyjs/wasm-parser" "1.11.5"
+
+"@webassemblyjs/wasm-parser@1.11.5", "@webassemblyjs/wasm-parser@^1.11.5":
+  version "1.11.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.5.tgz#7ba0697ca74c860ea13e3ba226b29617046982e2"
+  integrity sha512-SVXUIwsLQlc8srSD7jejsfTU83g7pIGr2YYNb9oHdtldSxaOhvA5xwvIiWIfcX8PlSakgqMXsLpLfbbJ4cBYew==
+  dependencies:
+    "@webassemblyjs/ast" "1.11.5"
+    "@webassemblyjs/helper-api-error" "1.11.5"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.5"
+    "@webassemblyjs/ieee754" "1.11.5"
+    "@webassemblyjs/leb128" "1.11.5"
+    "@webassemblyjs/utf8" "1.11.5"
+
+"@webassemblyjs/wast-printer@1.11.5":
+  version "1.11.5"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.11.5.tgz#7a5e9689043f3eca82d544d7be7a8e6373a6fa98"
+  integrity sha512-f7Pq3wvg3GSPUPzR0F6bmI89Hdb+u9WXrSKc4v+N0aV0q6r42WoF92Jp2jEorBEBRoRNXgjp53nBniDXcqZYPA==
+  dependencies:
+    "@webassemblyjs/ast" "1.11.5"
     "@xtuc/long" "4.2.2"
 
 "@webpack-cli/configtest@^1.1.1":
@@ -3016,10 +2985,10 @@ core-js-compat@^3.25.1:
   dependencies:
     browserslist "^4.21.4"
 
-core-js@^3.29.1:
-  version "3.29.1"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.29.1.tgz#40ff3b41588b091aaed19ca1aa5cb111803fa9a6"
-  integrity sha512-+jwgnhg6cQxKYIIjGtAHq2nwUOolo9eoFZ4sHfUH09BLXBgxnH4gA0zEd+t+BO2cNB8idaBtZFcFTRjQJRJmAw==
+core-js@^3.30.2:
+  version "3.30.2"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.30.2.tgz#6528abfda65e5ad728143ea23f7a14f0dcf503fc"
+  integrity sha512-uBJiDmwqsbJCWHAwjrx3cvjbMXP7xD72Dmsn5LOJpiRmE3WbBbN5rCqQ2Qh6Ek6/eOrjlWngEynBWo4VxerQhg==
 
 cosmiconfig@^7.0.0, cosmiconfig@^7.1.0:
   version "7.1.0"
@@ -3304,10 +3273,10 @@ d3-zoom@3:
     d3-selection "2 - 3"
     d3-transition "2 - 3"
 
-d3@^7.8.3:
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/d3/-/d3-7.8.3.tgz#b6c862d16368e15bf764c89e248a300a56f2ab40"
-  integrity sha512-cAa866AkPXtt4IzRx6nzGf50uerq6VYks7p/tTH94be4QfhUkyTfJfaxXGPOB5ZRVUZmUV1wcM1dism/Ua0lCw==
+d3@^7.8.4:
+  version "7.8.4"
+  resolved "https://registry.yarnpkg.com/d3/-/d3-7.8.4.tgz#e35d45800e4068cab07e59e5d883a4bb42ab217f"
+  integrity sha512-q2WHStdhiBtD8DMmhDPyJmXUxr6VWRngKyiJ5EfXMxPw+tqT6BhNjhJZ4w3BHsNm3QoVfZLY8Orq/qPFczwKRA==
   dependencies:
     d3-array "3"
     d3-axis "3"
@@ -3561,10 +3530,10 @@ end-of-stream@^1.1.0:
   dependencies:
     once "^1.4.0"
 
-enhanced-resolve@^5.10.0:
-  version "5.10.0"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz#0dc579c3bb2a1032e357ac45b8f3a6f3ad4fb1e6"
-  integrity sha512-T0yTFjdpldGY8PmuXXR0PyQ1ufZpEGiHVrp7zHKB7jdR4qlmZHhONVM5AQOAWXuF/w3dnHbEQVrNptJgt7F+cQ==
+enhanced-resolve@^5.14.0:
+  version "5.14.0"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.14.0.tgz#0b6c676c8a3266c99fa281e4433a706f5c0c61c4"
+  integrity sha512-+DCows0XNwLDcUhbFJPdlQEVnT2zXlCv7hPxemTz86/O+B/hCQ+mb7ydkPKiflpVraqLPCAfu7lDy+hBXueojw==
   dependencies:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
@@ -3669,10 +3638,10 @@ es-get-iterator@^1.1.2:
     isarray "^2.0.5"
     stop-iteration-iterator "^1.0.0"
 
-es-module-lexer@^0.9.0:
-  version "0.9.3"
-  resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-0.9.3.tgz#6f13db00cc38417137daf74366f535c8eb438f19"
-  integrity sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==
+es-module-lexer@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-1.2.1.tgz#ba303831f63e6a394983fde2f97ad77b22324527"
+  integrity sha512-9978wrXM50Y4rTMmW5kXIC09ZdXQZqkE4mxhwkd8VbzsGkXGPgV4zWuqQJgCEzYngdo2dYDa0l8xhX4fkSwJSg==
 
 es-set-tostringtag@^2.0.1:
   version "2.0.1"
@@ -3746,10 +3715,10 @@ eslint-plugin-jest@^27.2.1:
   dependencies:
     "@typescript-eslint/utils" "^5.10.0"
 
-eslint-plugin-lit@^1.8.2:
-  version "1.8.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-lit/-/eslint-plugin-lit-1.8.2.tgz#e4ba34f641e7ffdde3c6004313a99dafd1945a43"
-  integrity sha512-4mOGcSRNEPMh7AN2F7Iy6no36nuFgyYOsnTRhFw1k8xyy1Zm6QOp788ywDvJqy+eelFbLPBhq20Qr55a887Dmw==
+eslint-plugin-lit@^1.8.3:
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-lit/-/eslint-plugin-lit-1.8.3.tgz#f532c2947b503da62efe2d72372ad3df09b8afd4"
+  integrity sha512-wmeYfBnWPUChbdZagOhG519gaWz9Q7OGT/nCx3YVHuCCrW9q9u0p/IQueQeoaMojUqOSgM/22oSDOaBruYGqag==
   dependencies:
     parse5 "^6.0.1"
     parse5-htmlparser2-tree-adapter "^6.0.1"
@@ -3760,10 +3729,10 @@ eslint-plugin-no-jquery@^2.7.0:
   resolved "https://registry.yarnpkg.com/eslint-plugin-no-jquery/-/eslint-plugin-no-jquery-2.7.0.tgz#855f5631cf5b8e25b930cf6f06e02dd81f132e72"
   integrity sha512-Aeg7dA6GTH1AcWLlBtWNzOU9efK5KpNi7b0EhBO0o0M+awyzguUUo8gF6hXGjQ9n5h8/uRtYv9zOqQkeC5CG0w==
 
-eslint-plugin-wc@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-wc/-/eslint-plugin-wc-1.4.0.tgz#5996b0c4d7183d0d51765e52bba886cd4aa70741"
-  integrity sha512-AmoKhJyBNcS3I+dbS/JTmRSq4REUvQ/JJCeWJezlK8gqTsdr5JD+EAvHldH/tVvU+l6qR2Tykga5hTINP9zS8A==
+eslint-plugin-wc@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-wc/-/eslint-plugin-wc-1.5.0.tgz#7b8b1f126947c2a2cfd3188c593dde1f468affe9"
+  integrity sha512-KFSfiHDol/LeV7U6IX8GdgpGf/s3wG8FTG120Rml/hGNB/DkCuGYQhlf0VgdBdf7gweem8Nlsh5o64HNdj+qPA==
   dependencies:
     is-valid-element-name "^1.0.0"
     js-levenshtein-esm "^1.2.0"
@@ -3776,28 +3745,28 @@ eslint-scope@5.1.1, eslint-scope@^5.1.1:
     esrecurse "^4.3.0"
     estraverse "^4.1.1"
 
-eslint-scope@^7.1.1:
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.1.1.tgz#fff34894c2f65e5226d3041ac480b4513a163642"
-  integrity sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==
+eslint-scope@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.2.0.tgz#f21ebdafda02352f103634b96dd47d9f81ca117b"
+  integrity sha512-DYj5deGlHBfMt15J7rdtyKNq/Nqlv5KfU4iodrQ019XESsRnwXH9KAE0y3cwtUHDo2ob7CypAnCqefh6vioWRw==
   dependencies:
     esrecurse "^4.3.0"
     estraverse "^5.2.0"
 
-eslint-visitor-keys@^3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz#f6480fa6b1f30efe2d1968aa8ac745b862469826"
-  integrity sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==
+eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.1.tgz#c22c48f48942d08ca824cc526211ae400478a994"
+  integrity sha512-pZnmmLwYzf+kWaM/Qgrvpen51upAktaaiI01nsJD/Yr3lMOdNtq0cxkrrg16w64VtisN6okbs7Q8AfGqj4c9fA==
 
-eslint@^8.36.0:
-  version "8.36.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.36.0.tgz#1bd72202200a5492f91803b113fb8a83b11285cf"
-  integrity sha512-Y956lmS7vDqomxlaaQAHVmeb4tNMp2FWIvU/RnU5BD3IKMD/MJPr76xdyr68P8tV1iNMvN2mRK0yy3c+UjL+bw==
+eslint@^8.40.0:
+  version "8.40.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.40.0.tgz#a564cd0099f38542c4e9a2f630fa45bf33bc42a4"
+  integrity sha512-bvR+TsP9EHL3TqNtj9sCNJVAFK3fBN8Q7g5waghxyRsPLIMwL73XSKnZFK0hk/O2ANC+iAoq6PWMQ+IfBAJIiQ==
   dependencies:
     "@eslint-community/eslint-utils" "^4.2.0"
     "@eslint-community/regexpp" "^4.4.0"
-    "@eslint/eslintrc" "^2.0.1"
-    "@eslint/js" "8.36.0"
+    "@eslint/eslintrc" "^2.0.3"
+    "@eslint/js" "8.40.0"
     "@humanwhocodes/config-array" "^0.11.8"
     "@humanwhocodes/module-importer" "^1.0.1"
     "@nodelib/fs.walk" "^1.2.8"
@@ -3807,9 +3776,9 @@ eslint@^8.36.0:
     debug "^4.3.2"
     doctrine "^3.0.0"
     escape-string-regexp "^4.0.0"
-    eslint-scope "^7.1.1"
-    eslint-visitor-keys "^3.3.0"
-    espree "^9.5.0"
+    eslint-scope "^7.2.0"
+    eslint-visitor-keys "^3.4.1"
+    espree "^9.5.2"
     esquery "^1.4.2"
     esutils "^2.0.2"
     fast-deep-equal "^3.1.3"
@@ -3835,14 +3804,14 @@ eslint@^8.36.0:
     strip-json-comments "^3.1.0"
     text-table "^0.2.0"
 
-espree@^9.5.0:
-  version "9.5.0"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-9.5.0.tgz#3646d4e3f58907464edba852fa047e6a27bdf113"
-  integrity sha512-JPbJGhKc47++oo4JkEoTe2wjy4fmMwvFpgJT9cQzmfXKp22Dr6Hf1tdCteLz1h0P3t+mGvWZ+4Uankvh8+c6zw==
+espree@^9.5.2:
+  version "9.5.2"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-9.5.2.tgz#e994e7dc33a082a7a82dceaf12883a829353215b"
+  integrity sha512-7OASN1Wma5fum5SrNhFMAMJxOUAbhyfQ8dQ//PJaJbNw0URTPWqIghHWt1MmAANKhHZIYOHruW4Kw4ruUWOdGw==
   dependencies:
     acorn "^8.8.0"
     acorn-jsx "^5.3.2"
-    eslint-visitor-keys "^3.3.0"
+    eslint-visitor-keys "^3.4.1"
 
 esprima@^4.0.0, esprima@^4.0.1:
   version "4.0.1"
@@ -4366,16 +4335,11 @@ gopd@^1.0.1:
   dependencies:
     get-intrinsic "^1.1.3"
 
-graceful-fs@^4.1.15:
+graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.2.4, graceful-fs@^4.2.9:
   version "4.2.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
   integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
 
-graceful-fs@^4.1.2, graceful-fs@^4.2.4, graceful-fs@^4.2.9:
-  version "4.2.10"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
-  integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
-
 grapheme-splitter@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
@@ -5245,10 +5209,10 @@ jest-jasmine2@^26.6.3:
     pretty-format "^26.6.2"
     throat "^5.0.0"
 
-jest-junit@^15.0.0:
-  version "15.0.0"
-  resolved "https://registry.yarnpkg.com/jest-junit/-/jest-junit-15.0.0.tgz#a47544ab42e9f8fe7ada56306c218e09e52bd690"
-  integrity sha512-Z5sVX0Ag3HZdMUnD5DFlG+1gciIFSy7yIVPhOdGUi8YJaI9iLvvBb530gtQL2CHmv0JJeiwRZenr0VrSR7frvg==
+jest-junit@^16.0.0:
+  version "16.0.0"
+  resolved "https://registry.yarnpkg.com/jest-junit/-/jest-junit-16.0.0.tgz#d838e8c561cf9fdd7eb54f63020777eee4136785"
+  integrity sha512-A94mmw6NfJab4Fg/BlvVOUXzXgF0XIH6EmTgJ5NDPp4xoKq0Kr7sErb+4Xs9nZvu58pJojz5RFGpqnZYJTrRfQ==
   dependencies:
     mkdirp "^1.0.4"
     strip-ansi "^6.0.1"
@@ -5492,10 +5456,10 @@ jest@^26.6.3:
     import-local "^3.0.2"
     jest-cli "^26.6.3"
 
-jquery@^3.6.4:
-  version "3.6.4"
-  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.4.tgz#ba065c188142100be4833699852bf7c24dc0252f"
-  integrity sha512-v28EW9DWDFpzcD9O5iyJXg3R3+q+mET5JhnjJzQUZMHOv67bpSIHq81GEYpPNZHG+XXHsfSme3nxp/hndKEcsQ==
+jquery@^3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.7.0.tgz#fe2c01a05da500709006d8790fe21c8a39d75612"
+  integrity sha512-umpJ0/k8X0MvD1ds0P9SfowREz2LenHsQaxSohMZ5OMNEU2r0tf8pdeEFTHMFxWVxKNyU9rTtK3CWzUCTKJUeQ==
 
 js-levenshtein-esm@^1.2.0:
   version "1.2.0"
@@ -5671,10 +5635,10 @@ lit-html@^2.0.0, lit-html@^2.7.0:
   dependencies:
     "@types/trusted-types" "^2.0.2"
 
-lit@2.7.0, lit@^2.0.0:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/lit/-/lit-2.7.0.tgz#94242caa20f7b9e60d49cc0b843e4a694c4af3bb"
-  integrity sha512-qSy2BAVA+OiWtNptP404egcC/izDdNRw6iHGIbUmkZtbMJvPKfNsaoKrNs8Zmsbjmv5ZX2tur1l9TfzkSWWT4g==
+lit@2.7.4, lit@^2.0.0:
+  version "2.7.4"
+  resolved "https://registry.yarnpkg.com/lit/-/lit-2.7.4.tgz#ca63d27fda178dbffae0faf2c882b9910e40842c"
+  integrity sha512-cgD7xrZoYr21mbrkZIuIrj98YTMw/snJPg52deWVV4A8icLyNHI3bF70xsJeAgwTuiq5Kkd+ZR8gybSJDCPB7g==
   dependencies:
     "@lit/reactive-element" "^1.6.0"
     lit-element "^3.3.0"
@@ -6531,6 +6495,13 @@ regenerate-unicode-properties@^10.0.1:
   dependencies:
     regenerate "^1.4.2"
 
+regenerate-unicode-properties@^10.1.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz#7c3192cab6dd24e21cb4461e5ddd7dd24fa8374c"
+  integrity sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ==
+  dependencies:
+    regenerate "^1.4.2"
+
 regenerate@^1.4.2:
   version "1.4.2"
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
@@ -6541,10 +6512,10 @@ regenerator-runtime@^0.13.4:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
   integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
 
-regenerator-transform@^0.15.0:
-  version "0.15.0"
-  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.0.tgz#cbd9ead5d77fae1a48d957cf889ad0586adb6537"
-  integrity sha512-LsrGtPmbYg19bcPHwdtmXwbW+TqNvtY4riE3P83foeHRroMbH6/2ddFBfab3t7kbzc7v7p4wbkIecHImqt0QNg==
+regenerator-transform@^0.15.1:
+  version "0.15.1"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.1.tgz#f6c4e99fc1b4591f780db2586328e4d9a9d8dc56"
+  integrity sha512-knzmNAcuyxV+gQCufkYcvOqX/qIIfHLv0u5x79kRxuGojfYVky1f15TzZEu2Avte8QGepvUNTnLskf8E6X6Vyg==
   dependencies:
     "@babel/runtime" "^7.8.4"
 
@@ -6577,6 +6548,18 @@ regexpu-core@^5.1.0:
     unicode-match-property-ecmascript "^2.0.0"
     unicode-match-property-value-ecmascript "^2.0.0"
 
+regexpu-core@^5.3.1:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-5.3.2.tgz#11a2b06884f3527aec3e93dbbf4a3b958a95546b"
+  integrity sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==
+  dependencies:
+    "@babel/regjsgen" "^0.8.0"
+    regenerate "^1.4.2"
+    regenerate-unicode-properties "^10.1.0"
+    regjsparser "^0.9.1"
+    unicode-match-property-ecmascript "^2.0.0"
+    unicode-match-property-value-ecmascript "^2.1.0"
+
 regjsgen@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.6.0.tgz#83414c5354afd7d6627b16af5f10f41c4e71808d"
@@ -6589,6 +6572,13 @@ regjsparser@^0.8.2:
   dependencies:
     jsesc "~0.5.0"
 
+regjsparser@^0.9.1:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.9.1.tgz#272d05aa10c7c1f67095b1ff0addae8442fc5709"
+  integrity sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==
+  dependencies:
+    jsesc "~0.5.0"
+
 release-zalgo@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/release-zalgo/-/release-zalgo-1.0.0.tgz#09700b7e5074329739330e535c5a90fb67851730"
@@ -6752,10 +6742,10 @@ sane@^4.0.3:
     minimist "^1.1.1"
     walker "~1.0.5"
 
-sass@^1.60.0:
-  version "1.60.0"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.60.0.tgz#657f0c23a302ac494b09a5ba8497b739fb5b5a81"
-  integrity sha512-updbwW6fNb5gGm8qMXzVO7V4sWf7LMXnMly/JEyfbfERbVH46Fn6q02BX7/eHTdKpE7d+oTkMMQpFWNUMfFbgQ==
+sass@^1.62.1:
+  version "1.62.1"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.62.1.tgz#caa8d6bf098935bc92fc73fa169fb3790cacd029"
+  integrity sha512-NHpxIzN29MXvWiuswfc1W3I0N8SXBd8UR26WntmDlRYf0bSADnwnOjsyMZ3lMezSlArD33Vs3YFhp7dWvL770A==
   dependencies:
     chokidar ">=3.0.0 <4.0.0"
     immutable "^4.0.0"
@@ -6768,10 +6758,10 @@ saxes@^5.0.1:
   dependencies:
     xmlchars "^2.2.0"
 
-schema-utils@^3.1.0, schema-utils@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.1.1.tgz#bc74c4b6b6995c1d88f76a8b77bea7219e0c8281"
-  integrity sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==
+schema-utils@^3.1.1, schema-utils@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.1.2.tgz#36c10abca6f7577aeae136c804b0c741edeadc99"
+  integrity sha512-pvjEHOgWc9OWA/f/DE3ohBWTD6EleVLf7iFUkoSwAxttdBhB9QUebQgxER2kWueOvRJXPHNnyrvvh9eZINB8Eg==
   dependencies:
     "@types/json-schema" "^7.0.8"
     ajv "^6.12.5"
@@ -6809,10 +6799,10 @@ semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
-serialize-javascript@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-6.0.0.tgz#efae5d88f45d7924141da8b5c3a7a7e663fefeb8"
-  integrity sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==
+serialize-javascript@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-6.0.1.tgz#b206efb27c3da0b0ab6b52f48d170b7996458e5c"
+  integrity sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==
   dependencies:
     randombytes "^2.1.0"
 
@@ -7323,21 +7313,21 @@ terminal-link@^2.0.0:
     ansi-escapes "^4.2.1"
     supports-hyperlinks "^2.0.0"
 
-terser-webpack-plugin@^5.1.3:
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.1.tgz#0320dcc270ad5372c1e8993fabbd927929773e54"
-  integrity sha512-GvlZdT6wPQKbDNW/GDQzZFg/j4vKU96yl2q6mcUkzKOgW4gwf1Z8cZToUCrz31XHlPWH8MVb1r2tFtdDtTGJ7g==
+terser-webpack-plugin@^5.3.7:
+  version "5.3.7"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.7.tgz#ef760632d24991760f339fe9290deb936ad1ffc7"
+  integrity sha512-AfKwIktyP7Cu50xNjXF/6Qb5lBNzYaWpU6YfoX3uZicTx0zTy0stDDCsvjDapKsSDvOeWo5MEq4TmdBy2cNoHw==
   dependencies:
+    "@jridgewell/trace-mapping" "^0.3.17"
     jest-worker "^27.4.5"
     schema-utils "^3.1.1"
-    serialize-javascript "^6.0.0"
-    source-map "^0.6.1"
-    terser "^5.7.2"
+    serialize-javascript "^6.0.1"
+    terser "^5.16.5"
 
-terser@^5.7.2:
-  version "5.14.2"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-5.14.2.tgz#9ac9f22b06994d736174f4091aa368db896f1c10"
-  integrity sha512-oL0rGeM/WFQCUd0y2QrWxYnq7tfSuKBiqTjRPWrRgB46WD/kiwHwF8T23z78H6Q6kGCuuHcPB+KULHRdxvVGQA==
+terser@^5.16.5:
+  version "5.16.9"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.16.9.tgz#7a28cb178e330c484369886f2afd623d9847495f"
+  integrity sha512-HPa/FdTB9XGI2H1/keLFZHxl6WNvAI4YalHGtDQTlMnJcoqSab1UwL4l1hGEhs6/GmLHBZIg/YgB++jcbzoOEg==
   dependencies:
     "@jridgewell/source-map" "^0.3.2"
     acorn "^8.5.0"
@@ -7373,6 +7363,13 @@ tiny-emitter@^2.0.0:
   resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
   integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
 
+tippy.js@^6.3.7:
+  version "6.3.7"
+  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.7.tgz#8ccfb651d642010ed9a32ff29b0e9e19c5b8c61c"
+  integrity sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==
+  dependencies:
+    "@popperjs/core" "^2.9.0"
+
 tmpl@1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc"
@@ -7562,6 +7559,11 @@ unicode-match-property-value-ecmascript@^2.0.0:
   resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.0.0.tgz#1a01aa57247c14c568b89775a54938788189a714"
   integrity sha512-7Yhkc0Ye+t4PNYzOGKedDhXbYIBe1XEQYQxOPyhcXNMJ0WCABqqj6ckydd6pWRZTHV4GuCPKdBAUiMc60tsKVw==
 
+unicode-match-property-value-ecmascript@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz#cb5fffdcd16a05124f5a4b0bf7c3770208acbbe0"
+  integrity sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA==
+
 unicode-property-aliases-ecmascript@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.0.0.tgz#0a36cb9a585c4f6abd51ad1deddb285c165297c8"
@@ -7745,22 +7747,22 @@ webpack-sources@^3.2.3:
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
   integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
 
-webpack@^5.76.3:
-  version "5.76.3"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.76.3.tgz#dffdc72c8950e5b032fddad9c4452e7787d2f489"
-  integrity sha512-18Qv7uGPU8b2vqGeEEObnfICyw2g39CHlDEK4I7NK13LOur1d0HGmGNKGT58Eluwddpn3oEejwvBPoP4M7/KSA==
+webpack@^5.82.1:
+  version "5.82.1"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.82.1.tgz#8f38c78e53467556e8a89054ebd3ef6e9f67dbab"
+  integrity sha512-C6uiGQJ+Gt4RyHXXYt+v9f+SN1v83x68URwgxNQ98cvH8kxiuywWGP4XeNZ1paOzZ63aY3cTciCEQJNFUljlLw==
   dependencies:
     "@types/eslint-scope" "^3.7.3"
-    "@types/estree" "^0.0.51"
-    "@webassemblyjs/ast" "1.11.1"
-    "@webassemblyjs/wasm-edit" "1.11.1"
-    "@webassemblyjs/wasm-parser" "1.11.1"
+    "@types/estree" "^1.0.0"
+    "@webassemblyjs/ast" "^1.11.5"
+    "@webassemblyjs/wasm-edit" "^1.11.5"
+    "@webassemblyjs/wasm-parser" "^1.11.5"
     acorn "^8.7.1"
     acorn-import-assertions "^1.7.6"
     browserslist "^4.14.5"
     chrome-trace-event "^1.0.2"
-    enhanced-resolve "^5.10.0"
-    es-module-lexer "^0.9.0"
+    enhanced-resolve "^5.14.0"
+    es-module-lexer "^1.2.1"
     eslint-scope "5.1.1"
     events "^3.2.0"
     glob-to-regexp "^0.4.1"
@@ -7769,9 +7771,9 @@ webpack@^5.76.3:
     loader-runner "^4.2.0"
     mime-types "^2.1.27"
     neo-async "^2.6.2"
-    schema-utils "^3.1.0"
+    schema-utils "^3.1.2"
     tapable "^2.1.1"
-    terser-webpack-plugin "^5.1.3"
+    terser-webpack-plugin "^5.3.7"
     watchpack "^2.4.0"
     webpack-sources "^3.2.3"