diff --git a/frontend/.oxlintrc.json b/frontend/.oxlintrc.json
new file mode 100644
index 00000000..5818bd22
--- /dev/null
+++ b/frontend/.oxlintrc.json
@@ -0,0 +1,10 @@
+{
+  "plugins": ["typescript", "vue"],
+  "categories": {
+    "correctness": "error"
+  },
+  "rules": {
+    "typescript/no-explicit-any": "warn"
+  },
+  "ignorePatterns": ["dist", "node_modules"]
+}
diff --git a/frontend/index.html b/frontend/index.html
index bd658e32..082195ae 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -30,6 +30,6 @@
 		</noscript>
 		<div id="app"></div>
 		<!-- built files -->
-		<script type="module" src="/src/main.js"></script>
+		<script type="module" src="/src/main.ts"></script>
 	</body>
 </html>
diff --git a/frontend/package.json b/frontend/package.json
index 5ab1c92b..623f04bb 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -24,8 +24,11 @@
   "browser": "./dist/index.html",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
-    "serve": "vite preview"
+    "build": "vue-tsc --noEmit && vite build",
+    "serve": "vite preview",
+    "typecheck": "vue-tsc --noEmit",
+    "lint": "oxlint",
+    "lint:fix": "oxlint --fix"
   },
   "dependencies": {
     "@kyvg/vue3-notification": "^3.1.3",
@@ -51,9 +54,16 @@
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/vite": "^4.0.14",
+    "@types/node": "^26.1.2",
+    "@types/pdfmake": "^0.2.13",
     "@vitejs/plugin-vue": "^5.0.3",
+    "@vue/tsconfig": "^0.9.1",
+    "oxlint": "^1.76.0",
+    "oxlint-tsgolint": "^7.0.2001",
     "tailwindcss": "^4.0.14",
-    "vite": "^6.0.7"
+    "typescript": "^6.0.3",
+    "vite": "^6.0.7",
+    "vue-tsc": "^3.3.9"
   },
   "browserslist": [
     "> 1%",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 821cc0e2..181d86df 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -10,19 +10,19 @@ importers:
     dependencies:
       '@kyvg/vue3-notification':
         specifier: ^3.1.3
-        version: 3.4.2(vue@3.5.40)
+        version: 3.4.2(vue@3.5.40(typescript@6.0.3))
       '@tabler/icons-vue':
         specifier: ^3.3.0
-        version: 3.46.0(vue@3.5.40)
+        version: 3.46.0(vue@3.5.40(typescript@6.0.3))
       '@vuepic/vue-datepicker':
         specifier: ^11.0.0
-        version: 11.0.3(vue@3.5.40)
+        version: 11.0.3(vue@3.5.40(typescript@6.0.3))
       '@vueuse/core':
         specifier: ^13.0.0
-        version: 13.9.0(vue@3.5.40)
+        version: 13.9.0(vue@3.5.40(typescript@6.0.3))
       '@vueuse/math':
         specifier: ^13.0.0
-        version: 13.9.0(vue@3.5.40)
+        version: 13.9.0(vue@3.5.40(typescript@6.0.3))
       '@zip.js/zip.js':
         specifier: ^2.7.45
         version: 2.8.34
@@ -49,38 +49,59 @@ importers:
         version: 0.2.23
       vue:
         specifier: ^3.2.37
-        version: 3.5.40
+        version: 3.5.40(typescript@6.0.3)
       vue-i18n:
         specifier: ^11.0.1
-        version: 11.4.8(vue@3.5.40)
+        version: 11.4.8(vue@3.5.40(typescript@6.0.3))
       vue-prism-editor:
         specifier: ^2.0.0-alpha.2
-        version: 2.0.0-alpha.2(vue@3.5.40)
+        version: 2.0.0-alpha.2(vue@3.5.40(typescript@6.0.3))
       vue-router:
         specifier: ^4.0.16
-        version: 4.6.4(vue@3.5.40)
+        version: 4.6.4(vue@3.5.40(typescript@6.0.3))
       vue3-carousel:
         specifier: ^0.15.0
-        version: 0.15.1(vue@3.5.40)
+        version: 0.15.1(vue@3.5.40(typescript@6.0.3))
       vuedraggable:
         specifier: ^4.1.0
-        version: 4.1.0(vue@3.5.40)
+        version: 4.1.0(vue@3.5.40(typescript@6.0.3))
     devDependencies:
       '@tailwindcss/forms':
         specifier: ^0.5.10
         version: 0.5.11(tailwindcss@4.3.3)
       '@tailwindcss/vite':
         specifier: ^4.0.14
-        version: 4.3.3(vite@6.4.3(jiti@2.7.0)(lightningcss@1.32.0))
+        version: 4.3.3(vite@6.4.3(@types/node@26.1.2)(jiti@2.7.0)(lightningcss@1.32.0))
+      '@types/node':
+        specifier: ^26.1.2
+        version: 26.1.2
+      '@types/pdfmake':
+        specifier: ^0.2.13
+        version: 0.2.13
       '@vitejs/plugin-vue':
         specifier: ^5.0.3
-        version: 5.2.4(vite@6.4.3(jiti@2.7.0)(lightningcss@1.32.0))(vue@3.5.40)
+        version: 5.2.4(vite@6.4.3(@types/node@26.1.2)(jiti@2.7.0)(lightningcss@1.32.0))(vue@3.5.40(typescript@6.0.3))
+      '@vue/tsconfig':
+        specifier: ^0.9.1
+        version: 0.9.1(typescript@6.0.3)(vue@3.5.40(typescript@6.0.3))
+      oxlint:
+        specifier: ^1.76.0
+        version: 1.76.0(oxlint-tsgolint@7.0.2001)
+      oxlint-tsgolint:
+        specifier: ^7.0.2001
+        version: 7.0.2001
       tailwindcss:
         specifier: ^4.0.14
         version: 4.3.3
+      typescript:
+        specifier: ^6.0.3
+        version: 6.0.3
       vite:
         specifier: ^6.0.7
-        version: 6.4.3(jiti@2.7.0)(lightningcss@1.32.0)
+        version: 6.4.3(@types/node@26.1.2)(jiti@2.7.0)(lightningcss@1.32.0)
+      vue-tsc:
+        specifier: ^3.3.9
+        version: 3.3.9(typescript@6.0.3)
 
 packages:
 
@@ -309,6 +330,158 @@ packages:
     peerDependencies:
       vue: ^3.0.0
 
+  '@oxlint-tsgolint/darwin-arm64@7.0.2001':
+    resolution: {integrity: sha512-CUJEdbSZ54+Xy9OXqOhWLTKZKV0BBiV7C2i/ygyVmXtkUNXx5YCzN8DpSSshTAKktoL7S+tnQ/ftFG/i7X896w==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxlint-tsgolint/darwin-x64@7.0.2001':
+    resolution: {integrity: sha512-pXfBb5BqONCcgrXQNUZWXgiYmRSWJzd97S8i41VVOh6ut0tyo+cJ5FKFpczDHxiVNfj/3e7c9B4MtztNdpIVCw==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxlint-tsgolint/linux-arm64@7.0.2001':
+    resolution: {integrity: sha512-roP7zujb/QDPzDwEKsFFpzNHHy91/Y7oX9vQXk78ekyZtcQj1QXDIMH33gjDdHBfRl4K9pZ36xhRgrP4Zr+R8A==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@oxlint-tsgolint/linux-x64@7.0.2001':
+    resolution: {integrity: sha512-UDezNqdECVmngu2TPnjaS1YoAmcTaBoI5lV9vk3VahBxoi+I5r9k3iJTT7qZoYWOXTD/7T7bNcwRgrocR6BscQ==}
+    cpu: [x64]
+    os: [linux]
+
+  '@oxlint-tsgolint/win32-arm64@7.0.2001':
+    resolution: {integrity: sha512-uJZhqB6pdXLuN+AD1F5082byyQti/NPmJA77GtcFlmT2HzRelqbNls3SaIqxpjdFgvSBF9g0yOKGBkGFg7kX8Q==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxlint-tsgolint/win32-x64@7.0.2001':
+    resolution: {integrity: sha512-FkDRm8hx9OwzGQqyWG1tO5QrTLRApff9DzSgpz9QZau37BR8d1VYKOxMLGf6shPZntJFoTwIIJYT68VndYDCog==}
+    cpu: [x64]
+    os: [win32]
+
+  '@oxlint/binding-android-arm-eabi@1.76.0':
+    resolution: {integrity: sha512-ZHIE5Zt9AsPDcY4nOlofXt0YfneEeo+QrKMPcPzLf2Z6Q8VtV2W73d7SFJ920WUwyik783u/doKCs3KXdwG+7w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
+
+  '@oxlint/binding-android-arm64@1.76.0':
+    resolution: {integrity: sha512-shm/ngQilHK6bs+ElJWa4oHfNj5vL1Gl/iVEJldTQjpr0/67oSgr0KUpbmcnLig5Fo0v/l6j2567A7TOL89ONA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@oxlint/binding-darwin-arm64@1.76.0':
+    resolution: {integrity: sha512-rvJmrAPKSQ9aWJ6wIS6CK2tJjwzfW0ApQH9qokq6sfDvmHwoyIHxHFMq7z7i7GiV6fdE6s8qvBqWKPTu8RmT6Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxlint/binding-darwin-x64@1.76.0':
+    resolution: {integrity: sha512-U/zYdb7VYKGY6pA9Vd2rYl9O/HlCylcOlb5PGPvVLtg+oLGsk6H3XGKEMHKyqD3nmmtmlmwb/8SwU2vfSAtvMw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxlint/binding-freebsd-x64@1.76.0':
+    resolution: {integrity: sha512-WvKG9CAriuo0XNiFzpXjDngUZcRGFNpaK2kLyMUsnJlShxkT96u+BpJQ3KqdQwGOrvI14L6V8bAwXwAYNNY6Jg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@oxlint/binding-linux-arm-gnueabihf@1.76.0':
+    resolution: {integrity: sha512-qJ5+RH99TqFRq3UCDxkW0zJJu9c+OAHFY72vGlxZLEpuO+MpKo3POgqb8sYipL9KYm8XY6ofb0HsOuvY6hQNqQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxlint/binding-linux-arm-musleabihf@1.76.0':
+    resolution: {integrity: sha512-PvPCVptkgVARsucgIqFQQcSmJ6xc6GtnVB5bRBekRahTc9eObMtjHfMjy5M+C2tHt5UCMttWM9RuSk/H9NqYeg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxlint/binding-linux-arm64-gnu@1.76.0':
+    resolution: {integrity: sha512-3KeFDx8Bu4HPAXbuHZOr/oHvN+QT+JQhMw/NYPz7Z071xLSsG27Jfh9PIQVEY7hk1I+jr43ExqRIeJ6VKk2yLw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-arm64-musl@1.76.0':
+    resolution: {integrity: sha512-oPFkkKTgl0K/EIg9fQ8oA3IGcI05/Mq1en04iFa41mmNPT+6KEiByVazTOZZJiHMBBrbsns1YJ2e1Scqwzesjw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxlint/binding-linux-ppc64-gnu@1.76.0':
+    resolution: {integrity: sha512-gN7yZ0eqflA5Fhf1wvHxGUltIV3FsvmB1zhNMDEK9vSHhc7E6qg9CuPeBgPZab66Tjzq6w6kHAtNEvnTHf4cyw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-riscv64-gnu@1.76.0':
+    resolution: {integrity: sha512-S/HqMbn22mQrjtErUxEoS/a55u8kIeXvreIxiJu5G7Le3UecEd6SQZxrDIpuhtgaFnsY/nVra3ytP+pRljDilA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-riscv64-musl@1.76.0':
+    resolution: {integrity: sha512-ZIga3097VJZolGZk6SrIAUokIGfRkxRlhiHDUznZptGBfwrhD7pNfD1rzEzsCwvk/1DX0A1bLz+liuNh5QKIVQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxlint/binding-linux-s390x-gnu@1.76.0':
+    resolution: {integrity: sha512-ZGiiA7pFzMJSyMWYZTVlPgbTsx+Vl8ihLGMIujPwaslUF7kIPPWAbVmAlTc+9lWDV+DCiB8Ikixu+lSHeOIIWQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-x64-gnu@1.76.0':
+    resolution: {integrity: sha512-JLiy5WuvEBFTT6ErIFV35SLzi0R7Iri6MKU6dZbTxfIx8pndbbPs3Mj780nMipBFcPkti+okAPOJ9POKkHFEgg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-x64-musl@1.76.0':
+    resolution: {integrity: sha512-z7lgKQtbo/I1NIe8G5NHLesxJDv0tRSUWTpXKb9Pm3E9nKFKfO4IOSDtFroKgXtOYb0jQbcdH+0wzTyMXVes+A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxlint/binding-openharmony-arm64@1.76.0':
+    resolution: {integrity: sha512-JOjKymIpb9QcYfEhZsN6h4V9Ivd474W38cNIBRv6bg2TbIvogbMTH0Mg6YWW9TiRDqfcX+/Hyfsbo5vcSE5guQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@oxlint/binding-win32-arm64-msvc@1.76.0':
+    resolution: {integrity: sha512-pqDWZiwcmByWUEm1NFUBNiT6aentCcaoMWJv0HbXEmuYermJ4sg8ppVrshubYP2MZ6SHccJJcpr6x469PuDFIw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxlint/binding-win32-ia32-msvc@1.76.0':
+    resolution: {integrity: sha512-Ba0O659kgMv6pwO3z9PdO+K3aMxQRaw9HnG+e6AtOfgwcKFvYilciQYBoUBmxfQvOCKZe1SwjMkuB542NkuDMQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@oxlint/binding-win32-x64-msvc@1.76.0':
+    resolution: {integrity: sha512-5qcirPHO8nKfkoowEVWtpAoVTcYDy6g0UT0NGic450Qv8J2NrOqg4uQ8QppRP4MDTC7Xx47lbZnmadTH03CGGA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
   '@rollup/rollup-android-arm-eabi@4.62.3':
     resolution: {integrity: sha512-c0wdcekXtQvvn5Tsrk/+op/gUArrbWaFduBnTLP2l1cKLSQs4diMWjJw3m6A0DdzT8dAAX95KpkJ3qynCePbmw==}
     cpu: [arm]
@@ -557,6 +730,15 @@ packages:
   '@types/estree@1.0.9':
     resolution: {integrity: sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==}
 
+  '@types/node@26.1.2':
+    resolution: {integrity: sha512-Vu4a5UFA9rIIFJ7rB/Vaafh9lrCQszopTCx6KjFboXTGQbPNasehVR5TEiithSDGyd1DEiUByggTZsg8jukeIg==}
+
+  '@types/pdfkit@0.17.6':
+    resolution: {integrity: sha512-tIwzxk2uWKp0Cq9JIluQXJid77lYhF52EsIOwhsMF4iWLA6YneoBR1xVKYYdAysHuepUB0OX4tdwMiUDdGKmig==}
+
+  '@types/pdfmake@0.2.13':
+    resolution: {integrity: sha512-QzOwk3dMTZOwVbDZNHGIQcpwBgprp1y1vzRBmR+p+vMtCZo00G1CN+YhNebkygtmaGjdzvyXJVOHMEuTbvhJ8A==}
+
   '@types/web-bluetooth@0.0.21':
     resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
 
@@ -567,6 +749,15 @@ packages:
       vite: ^5.0.0 || ^6.0.0
       vue: ^3.2.25
 
+  '@volar/language-core@2.4.28':
+    resolution: {integrity: sha512-w4qhIJ8ZSitgLAkVay6AbcnC7gP3glYM3fYwKV3srj8m494E3xtrCv6E+bWviiK/8hs6e6t1ij1s2Endql7vzQ==}
+
+  '@volar/source-map@2.4.28':
+    resolution: {integrity: sha512-yX2BDBqJkRXfKw8my8VarTyjv48QwxdJtvRgUpNE5erCsgEUdI2DsLbpa+rOQVAJYshY99szEcRDmyHbF10ggQ==}
+
+  '@volar/typescript@2.4.28':
+    resolution: {integrity: sha512-Ja6yvWrbis2QtN4ClAKreeUZPVYMARDYZl9LMEv1iQ1QdepB6wn0jTRxA9MftYmYa4DQ4k/DaSZpFPUfxl8giw==}
+
   '@vue/compiler-core@3.5.40':
     resolution: {integrity: sha512-39E8IgOhTbVDnoJFMKc2DvYnypcZwUqgUhQkccva/0m6FUwtIKSGV7n1hpVmYcFaoRAwf9pBcwnKlCEsN63ZEQ==}
 
@@ -582,6 +773,9 @@ packages:
   '@vue/devtools-api@6.6.4':
     resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
 
+  '@vue/language-core@3.3.9':
+    resolution: {integrity: sha512-in/68oAa4BCtVY6n/nkuhLIkV8DHYd2UivedJ6cMZ6UYtlq9jaoaSNUBHYCVO44z3nKg7MdE5OBoHKt5SxeBKQ==}
+
   '@vue/reactivity@3.5.40':
     resolution: {integrity: sha512-B7ot9UlUZOi1zbq61/LvE88ZLTV8IlajTdiZTAEiDQgrnIMIZoPr9kGw0Zw46ObW62O9+H/Be3kMbfb7kYPQZA==}
 
@@ -597,6 +791,17 @@ packages:
   '@vue/shared@3.5.40':
     resolution: {integrity: sha512-WxnBtruIqOoV3rA4jeKDWzrYI5h7Cp4+pjwDi8kWGHz+IslhiN+wguLVVhtv2l8VoU02rzDCVfDjgCl1lNpZVg==}
 
+  '@vue/tsconfig@0.9.1':
+    resolution: {integrity: sha512-buvjm+9NzLCJL29KY1j1991YYJ5e6275OiK+G4jtmfIb+z4POywbdm0wXusT9adVWqe0xqg70TbI7+mRx4uU9w==}
+    peerDependencies:
+      typescript: '>= 5.8'
+      vue: ^3.4.0
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+      vue:
+        optional: true
+
   '@vuepic/vue-datepicker@11.0.3':
     resolution: {integrity: sha512-sb2adwqwK2PizLQOpxCYps2SwhVT6/ic2HMIOqHJXuYa6iAJZWGL5YVlS7O4aW+sk6ZyxlDURLO7kDZPL4HB/w==}
     engines: {node: '>=18.12.0'}
@@ -625,6 +830,9 @@ packages:
     resolution: {integrity: sha512-+6a3lyqq69rpseLbvDPiVIWsZ/HdTGAAD6afFtug6ECPDGttb2dHnPC6cJgdPofYkzL9OvXizegq+DQVfL2rnA==}
     engines: {bun: '>=0.7.0', deno: '>=1.0.0', node: '>=18.0.0'}
 
+  alien-signals@3.2.1:
+    resolution: {integrity: sha512-I8FjmltrfnDFoZedi5CG8DghVYNhzb/Ijluz7tCSJH0xpd0484Kowhbb1XDYOxfJpU1p5wnM2X54dA+IfGyD1g==}
+
   amber-client@0.1.0-beta.1:
     resolution: {integrity: sha512-q2Q6WYZYVJRJlADjTOpG+7tGR7xWkDf2WCOXa8xpldT8NkXERiAfHMH4HwB0ktOPrJNWWXJgr4lcMdCnJzMCxA==}
 
@@ -893,6 +1101,9 @@ packages:
     resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==}
     hasBin: true
 
+  muggle-string@0.4.1:
+    resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
+
   nanoid@3.3.16:
     resolution: {integrity: sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -906,12 +1117,32 @@ packages:
     resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
     engines: {node: '>= 0.4'}
 
+  oxlint-tsgolint@7.0.2001:
+    resolution: {integrity: sha512-KjK/XLcXr1DSyonKhsuFqJRiuKqcyG9j3LJ8nkOsrLzGvodBPqzHOKauy10asLMDI0sUpvb+1sxlzff3udZvfg==}
+    hasBin: true
+
+  oxlint@1.76.0:
+    resolution: {integrity: sha512-6QoFioEU4fNdiUx/2Eo6TRd6NG7H7njnRCz8rhB66cZmMHDTqcm1Rjvl8Wry+ZTQMBAmyb4Mlf62Mk5X+eHSOw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      oxlint-tsgolint: '>=7.0.2001'
+      vite-plus: '*'
+    peerDependenciesMeta:
+      oxlint-tsgolint:
+        optional: true
+      vite-plus:
+        optional: true
+
   pako@0.2.9:
     resolution: {integrity: sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==}
 
   pako@1.0.11:
     resolution: {integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==}
 
+  path-browserify@1.0.1:
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
+
   pdfmake@0.2.23:
     resolution: {integrity: sha512-A/IksoKb/ikOZH1edSDJ/2zBbqJKDghD4+fXn3rT7quvCJDlsZMs3NmIB3eajLMMFU9Bd3bZPVvlUMXhvFI+bQ==}
     engines: {node: '>=18'}
@@ -975,6 +1206,14 @@ packages:
     resolution: {integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==}
     engines: {node: '>=12.0.0'}
 
+  typescript@6.0.3:
+    resolution: {integrity: sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  undici-types@8.3.0:
+    resolution: {integrity: sha512-j375ScV60dom+YkPFIfTLcOiPxkN/buHz5GobjLhixFuANaNs3C9l4GmrWqejgXWJ7BbJcFYpTEUkS1Ge8bpZQ==}
+
   unicode-properties@1.4.1:
     resolution: {integrity: sha512-CLjCCLQ6UuMxWnbIylkisbRj31qxHPAurvena/0iwSVbQ2G1VY5/HjV0IRabOEbDHlzZlRdCrD4NhB0JtU40Pg==}
 
@@ -1021,6 +1260,9 @@ packages:
       yaml:
         optional: true
 
+  vscode-uri@3.1.0:
+    resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
+
   vue-i18n@11.4.8:
     resolution: {integrity: sha512-0ULeHP6Z9CGvAm67S77ZEp41cfGXIREGL8qfhos2BMgcQQewtQcDKuojt6jjasAD/S8GwfTp2ySPmDSpwvrCMQ==}
     engines: {node: '>= 22'}
@@ -1038,6 +1280,12 @@ packages:
     peerDependencies:
       vue: ^3.5.0
 
+  vue-tsc@3.3.9:
+    resolution: {integrity: sha512-TS3Y1ux/IRoE8OCP2PpACAeOseuIs0UvWrcr7u+w3PmfY+SlCfEf8zjrBgnQksHUgLpthi5vHlffcQTQTdPBZA==}
+    hasBin: true
+    peerDependencies:
+      typescript: '>=5.0.0'
+
   vue3-carousel@0.15.1:
     resolution: {integrity: sha512-nV2ChLZtgAOikmls8WaVe37vO4Wagk4RYawePHIvXrFtduFnQODyzPx8MmXaAb6l+ka72yAi04ZeCyciiyJMyA==}
     peerDependencies:
@@ -1218,9 +1466,84 @@ snapshots:
 
   '@kurkle/color@0.3.4': {}
 
-  '@kyvg/vue3-notification@3.4.2(vue@3.5.40)':
+  '@kyvg/vue3-notification@3.4.2(vue@3.5.40(typescript@6.0.3))':
     dependencies:
-      vue: 3.5.40
+      vue: 3.5.40(typescript@6.0.3)
+
+  '@oxlint-tsgolint/darwin-arm64@7.0.2001':
+    optional: true
+
+  '@oxlint-tsgolint/darwin-x64@7.0.2001':
+    optional: true
+
+  '@oxlint-tsgolint/linux-arm64@7.0.2001':
+    optional: true
+
+  '@oxlint-tsgolint/linux-x64@7.0.2001':
+    optional: true
+
+  '@oxlint-tsgolint/win32-arm64@7.0.2001':
+    optional: true
+
+  '@oxlint-tsgolint/win32-x64@7.0.2001':
+    optional: true
+
+  '@oxlint/binding-android-arm-eabi@1.76.0':
+    optional: true
+
+  '@oxlint/binding-android-arm64@1.76.0':
+    optional: true
+
+  '@oxlint/binding-darwin-arm64@1.76.0':
+    optional: true
+
+  '@oxlint/binding-darwin-x64@1.76.0':
+    optional: true
+
+  '@oxlint/binding-freebsd-x64@1.76.0':
+    optional: true
+
+  '@oxlint/binding-linux-arm-gnueabihf@1.76.0':
+    optional: true
+
+  '@oxlint/binding-linux-arm-musleabihf@1.76.0':
+    optional: true
+
+  '@oxlint/binding-linux-arm64-gnu@1.76.0':
+    optional: true
+
+  '@oxlint/binding-linux-arm64-musl@1.76.0':
+    optional: true
+
+  '@oxlint/binding-linux-ppc64-gnu@1.76.0':
+    optional: true
+
+  '@oxlint/binding-linux-riscv64-gnu@1.76.0':
+    optional: true
+
+  '@oxlint/binding-linux-riscv64-musl@1.76.0':
+    optional: true
+
+  '@oxlint/binding-linux-s390x-gnu@1.76.0':
+    optional: true
+
+  '@oxlint/binding-linux-x64-gnu@1.76.0':
+    optional: true
+
+  '@oxlint/binding-linux-x64-musl@1.76.0':
+    optional: true
+
+  '@oxlint/binding-openharmony-arm64@1.76.0':
+    optional: true
+
+  '@oxlint/binding-win32-arm64-msvc@1.76.0':
+    optional: true
+
+  '@oxlint/binding-win32-ia32-msvc@1.76.0':
+    optional: true
+
+  '@oxlint/binding-win32-x64-msvc@1.76.0':
+    optional: true
 
   '@rollup/rollup-android-arm-eabi@4.62.3':
     optional: true
@@ -1297,10 +1620,10 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.62.3':
     optional: true
 
-  '@tabler/icons-vue@3.46.0(vue@3.5.40)':
+  '@tabler/icons-vue@3.46.0(vue@3.5.40(typescript@6.0.3))':
     dependencies:
       '@tabler/icons': 3.46.0
-      vue: 3.5.40
+      vue: 3.5.40(typescript@6.0.3)
 
   '@tabler/icons@3.46.0': {}
 
@@ -1370,21 +1693,46 @@ snapshots:
       '@tailwindcss/oxide-win32-arm64-msvc': 4.3.3
       '@tailwindcss/oxide-win32-x64-msvc': 4.3.3
 
-  '@tailwindcss/vite@4.3.3(vite@6.4.3(jiti@2.7.0)(lightningcss@1.32.0))':
+  '@tailwindcss/vite@4.3.3(vite@6.4.3(@types/node@26.1.2)(jiti@2.7.0)(lightningcss@1.32.0))':
     dependencies:
       '@tailwindcss/node': 4.3.3
       '@tailwindcss/oxide': 4.3.3
       tailwindcss: 4.3.3
-      vite: 6.4.3(jiti@2.7.0)(lightningcss@1.32.0)
+      vite: 6.4.3(@types/node@26.1.2)(jiti@2.7.0)(lightningcss@1.32.0)
 
   '@types/estree@1.0.9': {}
 
+  '@types/node@26.1.2':
+    dependencies:
+      undici-types: 8.3.0
+
+  '@types/pdfkit@0.17.6':
+    dependencies:
+      '@types/node': 26.1.2
+
+  '@types/pdfmake@0.2.13':
+    dependencies:
+      '@types/node': 26.1.2
+      '@types/pdfkit': 0.17.6
+
   '@types/web-bluetooth@0.0.21': {}
 
-  '@vitejs/plugin-vue@5.2.4(vite@6.4.3(jiti@2.7.0)(lightningcss@1.32.0))(vue@3.5.40)':
+  '@vitejs/plugin-vue@5.2.4(vite@6.4.3(@types/node@26.1.2)(jiti@2.7.0)(lightningcss@1.32.0))(vue@3.5.40(typescript@6.0.3))':
     dependencies:
-      vite: 6.4.3(jiti@2.7.0)(lightningcss@1.32.0)
-      vue: 3.5.40
+      vite: 6.4.3(@types/node@26.1.2)(jiti@2.7.0)(lightningcss@1.32.0)
+      vue: 3.5.40(typescript@6.0.3)
+
+  '@volar/language-core@2.4.28':
+    dependencies:
+      '@volar/source-map': 2.4.28
+
+  '@volar/source-map@2.4.28': {}
+
+  '@volar/typescript@2.4.28':
+    dependencies:
+      '@volar/language-core': 2.4.28
+      path-browserify: 1.0.1
+      vscode-uri: 3.1.0
 
   '@vue/compiler-core@3.5.40':
     dependencies:
@@ -1418,6 +1766,16 @@ snapshots:
 
   '@vue/devtools-api@6.6.4': {}
 
+  '@vue/language-core@3.3.9':
+    dependencies:
+      '@volar/language-core': 2.4.28
+      '@vue/compiler-dom': 3.5.40
+      '@vue/shared': 3.5.40
+      alien-signals: 3.2.1
+      muggle-string: 0.4.1
+      path-browserify: 1.0.1
+      picomatch: 4.0.5
+
   '@vue/reactivity@3.5.40':
     dependencies:
       '@vue/shared': 3.5.40
@@ -1442,31 +1800,38 @@ snapshots:
 
   '@vue/shared@3.5.40': {}
 
-  '@vuepic/vue-datepicker@11.0.3(vue@3.5.40)':
+  '@vue/tsconfig@0.9.1(typescript@6.0.3)(vue@3.5.40(typescript@6.0.3))':
+    optionalDependencies:
+      typescript: 6.0.3
+      vue: 3.5.40(typescript@6.0.3)
+
+  '@vuepic/vue-datepicker@11.0.3(vue@3.5.40(typescript@6.0.3))':
     dependencies:
       date-fns: 4.4.0
-      vue: 3.5.40
+      vue: 3.5.40(typescript@6.0.3)
 
-  '@vueuse/core@13.9.0(vue@3.5.40)':
+  '@vueuse/core@13.9.0(vue@3.5.40(typescript@6.0.3))':
     dependencies:
       '@types/web-bluetooth': 0.0.21
       '@vueuse/metadata': 13.9.0
-      '@vueuse/shared': 13.9.0(vue@3.5.40)
-      vue: 3.5.40
+      '@vueuse/shared': 13.9.0(vue@3.5.40(typescript@6.0.3))
+      vue: 3.5.40(typescript@6.0.3)
 
-  '@vueuse/math@13.9.0(vue@3.5.40)':
+  '@vueuse/math@13.9.0(vue@3.5.40(typescript@6.0.3))':
     dependencies:
-      '@vueuse/shared': 13.9.0(vue@3.5.40)
-      vue: 3.5.40
+      '@vueuse/shared': 13.9.0(vue@3.5.40(typescript@6.0.3))
+      vue: 3.5.40(typescript@6.0.3)
 
   '@vueuse/metadata@13.9.0': {}
 
-  '@vueuse/shared@13.9.0(vue@3.5.40)':
+  '@vueuse/shared@13.9.0(vue@3.5.40(typescript@6.0.3))':
     dependencies:
-      vue: 3.5.40
+      vue: 3.5.40(typescript@6.0.3)
 
   '@zip.js/zip.js@2.8.34': {}
 
+  alien-signals@3.2.1: {}
+
   amber-client@0.1.0-beta.1: {}
 
   base64-js@1.3.1: {}
@@ -1724,6 +2089,8 @@ snapshots:
 
   mini-svg-data-uri@1.4.4: {}
 
+  muggle-string@0.4.1: {}
+
   nanoid@3.3.16: {}
 
   object-is@1.1.6:
@@ -1733,10 +2100,44 @@ snapshots:
 
   object-keys@1.1.1: {}
 
+  oxlint-tsgolint@7.0.2001:
+    optionalDependencies:
+      '@oxlint-tsgolint/darwin-arm64': 7.0.2001
+      '@oxlint-tsgolint/darwin-x64': 7.0.2001
+      '@oxlint-tsgolint/linux-arm64': 7.0.2001
+      '@oxlint-tsgolint/linux-x64': 7.0.2001
+      '@oxlint-tsgolint/win32-arm64': 7.0.2001
+      '@oxlint-tsgolint/win32-x64': 7.0.2001
+
+  oxlint@1.76.0(oxlint-tsgolint@7.0.2001):
+    optionalDependencies:
+      '@oxlint/binding-android-arm-eabi': 1.76.0
+      '@oxlint/binding-android-arm64': 1.76.0
+      '@oxlint/binding-darwin-arm64': 1.76.0
+      '@oxlint/binding-darwin-x64': 1.76.0
+      '@oxlint/binding-freebsd-x64': 1.76.0
+      '@oxlint/binding-linux-arm-gnueabihf': 1.76.0
+      '@oxlint/binding-linux-arm-musleabihf': 1.76.0
+      '@oxlint/binding-linux-arm64-gnu': 1.76.0
+      '@oxlint/binding-linux-arm64-musl': 1.76.0
+      '@oxlint/binding-linux-ppc64-gnu': 1.76.0
+      '@oxlint/binding-linux-riscv64-gnu': 1.76.0
+      '@oxlint/binding-linux-riscv64-musl': 1.76.0
+      '@oxlint/binding-linux-s390x-gnu': 1.76.0
+      '@oxlint/binding-linux-x64-gnu': 1.76.0
+      '@oxlint/binding-linux-x64-musl': 1.76.0
+      '@oxlint/binding-openharmony-arm64': 1.76.0
+      '@oxlint/binding-win32-arm64-msvc': 1.76.0
+      '@oxlint/binding-win32-ia32-msvc': 1.76.0
+      '@oxlint/binding-win32-x64-msvc': 1.76.0
+      oxlint-tsgolint: 7.0.2001
+
   pako@0.2.9: {}
 
   pako@1.0.11: {}
 
+  path-browserify@1.0.1: {}
+
   pdfmake@0.2.23:
     dependencies:
       '@foliojs-fork/linebreak': 1.1.2
@@ -1833,6 +2234,10 @@ snapshots:
       fdir: 6.5.0(picomatch@4.0.5)
       picomatch: 4.0.5
 
+  typescript@6.0.3: {}
+
+  undici-types@8.3.0: {}
+
   unicode-properties@1.4.1:
     dependencies:
       base64-js: 1.5.1
@@ -1843,7 +2248,7 @@ snapshots:
       pako: 0.2.9
       tiny-inflate: 1.0.3
 
-  vite@6.4.3(jiti@2.7.0)(lightningcss@1.32.0):
+  vite@6.4.3(@types/node@26.1.2)(jiti@2.7.0)(lightningcss@1.32.0):
     dependencies:
       esbuild: 0.25.12
       fdir: 6.5.0(picomatch@4.0.5)
@@ -1852,43 +2257,54 @@ snapshots:
       rollup: 4.62.3
       tinyglobby: 0.2.17
     optionalDependencies:
+      '@types/node': 26.1.2
       fsevents: 2.3.3
       jiti: 2.7.0
       lightningcss: 1.32.0
 
-  vue-i18n@11.4.8(vue@3.5.40):
+  vscode-uri@3.1.0: {}
+
+  vue-i18n@11.4.8(vue@3.5.40(typescript@6.0.3)):
     dependencies:
       '@intlify/core-base': 11.4.8
       '@intlify/devtools-types': 11.4.8
       '@intlify/shared': 11.4.8
       '@vue/devtools-api': 6.6.4
-      vue: 3.5.40
+      vue: 3.5.40(typescript@6.0.3)
 
-  vue-prism-editor@2.0.0-alpha.2(vue@3.5.40):
+  vue-prism-editor@2.0.0-alpha.2(vue@3.5.40(typescript@6.0.3)):
     dependencies:
-      vue: 3.5.40
+      vue: 3.5.40(typescript@6.0.3)
 
-  vue-router@4.6.4(vue@3.5.40):
+  vue-router@4.6.4(vue@3.5.40(typescript@6.0.3)):
     dependencies:
       '@vue/devtools-api': 6.6.4
-      vue: 3.5.40
+      vue: 3.5.40(typescript@6.0.3)
 
-  vue3-carousel@0.15.1(vue@3.5.40):
+  vue-tsc@3.3.9(typescript@6.0.3):
     dependencies:
-      vue: 3.5.40
+      '@volar/typescript': 2.4.28
+      '@vue/language-core': 3.3.9
+      typescript: 6.0.3
 
-  vue@3.5.40:
+  vue3-carousel@0.15.1(vue@3.5.40(typescript@6.0.3)):
+    dependencies:
+      vue: 3.5.40(typescript@6.0.3)
+
+  vue@3.5.40(typescript@6.0.3):
     dependencies:
       '@vue/compiler-dom': 3.5.40
       '@vue/compiler-sfc': 3.5.40
       '@vue/runtime-dom': 3.5.40
       '@vue/server-renderer': 3.5.40
       '@vue/shared': 3.5.40
+    optionalDependencies:
+      typescript: 6.0.3
 
-  vuedraggable@4.1.0(vue@3.5.40):
+  vuedraggable@4.1.0(vue@3.5.40(typescript@6.0.3)):
     dependencies:
       sortablejs: 1.14.0
-      vue: 3.5.40
+      vue: 3.5.40(typescript@6.0.3)
 
   xmldoc@2.0.3:
     dependencies:
diff --git a/frontend/pnpm-workspace.yaml b/frontend/pnpm-workspace.yaml
index 5ed0b5af..2056fd34 100644
--- a/frontend/pnpm-workspace.yaml
+++ b/frontend/pnpm-workspace.yaml
@@ -1,2 +1,5 @@
 allowBuilds:
   esbuild: true
+minimumReleaseAgeExclude:
+  - '@vue/language-core@3.3.9'
+  - vue-tsc@3.3.9
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index ee6d9e74..7059fc6e 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -201,19 +201,21 @@
 		:active="showModal.songset"
 		:existing="songSetModalData.existing"
 		:initial-song="songSetModalData.song"
-		:id="songSetModalData.id"
+		:id="songSetModalData.id ?? undefined"
 		@closed="showModal.songset = false"
 	/>
 	<setlist-set
 		:active="showModal.setlistset"
 		:existing="setlistSetModalData.existing"
 		:initial-setlist="setlistSetModalData.setlist"
-		:id="setlistSetModalData.id"
+		:id="setlistSetModalData.id ?? undefined"
 		@closed="showModal.setlistset = false"
 	/>
 </template>
 
-<script setup>
+<script setup lang="ts">
+import { clientKey, hkBackKey, hkCancelKey, hkChordsKey, hkDownKey, hkForwardKey, hkGoKey, hkHideKey, hkPresentKey, hkResetKey, hkSearchKey, hkSyncKey, hkThemeKey, hkUpKey, noActiveInputKey, noActiveModalKey, setlistCollectionKey, setlistsKey, songsCollectionKey, songsKey, tagsKey, userKey, usersKey } from '@/keys';
+import type { AppUser, SongFormData, SetlistFormData } from '@/definitions';
 import { notify } from '@kyvg/vue3-notification';
 import { ref, reactive, computed, provide, onMounted } from 'vue';
 import { useActiveElement, useMagicKeys } from '@vueuse/core';
@@ -227,8 +229,9 @@ import ResetPassword from '@/partials/ResetPassword.vue';
 import SecondaryButton from '@/elements/SecondaryButton.vue';
 import SetlistSet from '@/modals/SetlistSet.vue';
 import SongSet from '@/modals/SongSet.vue';
-import { amberClient } from 'amber-client';
-import { SongTag, can } from "@backend/definitions";
+import { amberClient, type AmberClient, type UserInTenant, type AmberCollections, type AmberCollection, type UserInfo } from 'amber-client';
+import { SongTag, can, UserRole } from "@backend/definitions";
+import type { Song, Setlist, SongEntity, SetlistEntity } from '@backend/models';
 
 // icons
 import {
@@ -256,7 +259,6 @@ const {
 	arrowup,
 	ctrl_b,
 	ctrl_f,
-	ctrl_i,
 	ctrl_l,
 	ctrl_k,
 	ctrl_p,
@@ -267,7 +269,7 @@ const {
 } = useMagicKeys({
 	passive: false,
 	onEventFired: (e) => {
-		if (e.ctrlKey && ['f','k','p','r','i','l','s','b'].includes(e.key) && e.type === 'keydown') {
+		if (e.ctrlKey && ['f','k','p','r','l','s','b'].includes(e.key) && e.type === 'keydown') {
 			e.preventDefault();
 		}
 	},
@@ -277,21 +279,20 @@ const noActiveInput = computed(() =>
 	activeElement.value?.tagName !== 'INPUT'
 	&& activeElement.value?.tagName !== 'TEXTAREA',
 );
-provide('hkBack',    arrowleft );
-provide('hkCancel',  escape    );
-provide('hkChords',  ctrl_k    );
-provide('hkDown',    arrowdown );
-provide('hkForward', arrowright);
-provide('hkGo',      enter     );
-provide('hkHide',    ctrl_b    );
-provide('hkInfo',    ctrl_i    );
-provide('hkPresent', ctrl_p    );
-provide('hkReset',   ctrl_r    );
-provide('hkSearch',  ctrl_f    );
-provide('hkSync',    ctrl_s    );
-provide('hkTheme',   ctrl_l    );
-provide('hkUp',      arrowup   );
-provide('noActiveInput', noActiveInput);
+provide(hkBackKey,    arrowleft );
+provide(hkCancelKey,  escape    );
+provide(hkChordsKey,  ctrl_k    );
+provide(hkDownKey,    arrowdown );
+provide(hkForwardKey, arrowright);
+provide(hkGoKey,      enter     );
+provide(hkHideKey,    ctrl_b    );
+provide(hkPresentKey, ctrl_p    );
+provide(hkResetKey,   ctrl_r    );
+provide(hkSearchKey,  ctrl_f    );
+provide(hkSyncKey,    ctrl_s    );
+provide(hkThemeKey,   ctrl_l    );
+provide(hkUpKey,      arrowup   );
+provide(noActiveInputKey, noActiveInput);
 
 // component constants
 const { t } = useI18n();
@@ -301,7 +302,7 @@ const route = useRoute();
 const open = ref(false);
 
 // setlist object
-const initialSetlist = {
+const initialSetlist: SetlistFormData = {
 	title: '',
 	isPublic: true,
 	date: '',
@@ -309,19 +310,18 @@ const initialSetlist = {
 };
 
 // song object
-const initialSong = {
+const initialSong: SongFormData = {
 	authors:      [],
-	ccli:         '',
+	ccli:         undefined,
 	content:      '',
 	key:          '',
 	language:     '',
-	note:         '', // deprecated
 	publisher:    '',
 	subtitle:     '',
 	tags:         [],
 	title:        '',
 	translations: [],
-	year:         '',
+	year:         undefined,
 	youtube:      '',
 };
 
@@ -333,13 +333,13 @@ const showModal = reactive({
 const noActiveModal = computed(() => {
 	return !showModal.songset && !showModal.setlistset;
 });
-provide('noActiveModal', noActiveModal);
+provide(noActiveModalKey, noActiveModal);
 
 // password reset via admin-issued link
 const isResetPasswordPage = computed(() => route.path === '/reset-password');
 
 // add and edit songs
-const songSetModalData = reactive({
+const songSetModalData = reactive<{ song: SongFormData | SongEntity, existing: boolean, id: string | null }>({
 	song:     structuredClone(initialSong),
 	existing: false,
 	id:       null,
@@ -350,7 +350,7 @@ const createNewSong = () => {
 	songSetModalData.id       = null;
 	showModal.songset         = true;
 };
-const editExistingSong = ({data, id, exists}) => {
+const editExistingSong = ({data, id, exists}: { data: SongEntity, id: string, exists: boolean }) => {
 	songSetModalData.song     = data;
 	songSetModalData.existing = exists;
 	songSetModalData.id       = id;
@@ -358,7 +358,7 @@ const editExistingSong = ({data, id, exists}) => {
 };
 
 // add and edit setlists
-const setlistSetModalData = reactive({
+const setlistSetModalData = reactive<{ setlist: SetlistFormData, existing: boolean, id: string | null }>({
 	setlist:  structuredClone(initialSetlist),
 	existing: false,
 	id:       null,
@@ -369,7 +369,7 @@ const createNewSetlist = () => {
 	setlistSetModalData.id       = null;
 	showModal.setlistset         = true;
 };
-const editExistingSetlist = ({data, id, exists}) => {
+const editExistingSetlist = ({data, id, exists}: { data: SetlistEntity, id: string, exists: boolean }) => {
 	setlistSetModalData.setlist  = data;
 	setlistSetModalData.existing = exists;
 	setlistSetModalData.id       = id;
@@ -384,11 +384,11 @@ const tenant = reactive({
 
 // Auth
 const ready = ref(false);
-const amberUser = ref(null);
-const client = ref(null);
+const amberUser = ref<UserInTenant | null>(null);
+const client = ref<AmberClient | null>(null);
 const authenticated = ref(true);
 const authFailed = ref(false);
-const authCallback = ref(() => {});
+const authCallback = ref<(creds: { email: string, pw: string, stayLoggedIn: boolean }) => void>(() => {});
 
 // Login
 const email = ref('');
@@ -396,37 +396,34 @@ const password = ref('');
 const stayLoggedIn = ref(true);
 
 // Data
-const songs = ref([]);
-const setlists = ref([]);
-const users = ref({}); // { [user id]: user info object }
+const songs = ref<Song[]>([]);
+const setlists = ref<Setlist[]>([]);
+const users = ref<Record<string, UserInfo>>({}); // { [user id]: user info object }
 const tags = Object.values(SongTag);
 
 // computed: get user name either from user object or from users db collection
-const user = computed(() => ({
+const user = computed<AppUser>(() => ({
 	id: amberUser.value?.user.id,
 	name: amberUser.value?.user.name ?? '',
 	email: amberUser.value?.user.email ?? '',
-	roles: amberUser.value?.roles,
+	roles: (amberUser.value?.roles ?? []) as UserRole[],
 	photo: null, // TODO
 }));
-// computed: check if at least one registration exists
-const registrationsExist = false; // TODO
 
 // Provide data for other views
-provide('user', user);
-provide('ready', ready);
-provide('setlists', setlists);
-provide('songs', songs);
-provide('tags', tags);
-provide('users', users);
+provide(userKey, user);
+provide(setlistsKey, setlists);
+provide(songsKey, songs);
+provide(tagsKey, tags);
+provide(usersKey, users);
 
 // Collections from Amberbase
-let collectionApi = null;
-const songsCollection = ref(null);
-const setlistCollection = ref(null);
-provide('songsCollection', songsCollection);
-provide('setlistCollection', setlistCollection);
-provide('client', client);
+let collectionApi: AmberCollections | null = null;
+const songsCollection = ref<AmberCollection<SongEntity> | null>(null);
+const setlistCollection = ref<AmberCollection<SetlistEntity> | null>(null);
+provide(songsCollectionKey, songsCollection);
+provide(setlistCollectionKey, setlistCollection);
+provide(clientKey, client);
 
 const init = async () => {
 	client.value = amberClient()
diff --git a/frontend/src/chart.config.js b/frontend/src/chart.config.ts
similarity index 85%
rename from frontend/src/chart.config.js
rename to frontend/src/chart.config.ts
index 1be14b68..f83da840 100644
--- a/frontend/src/chart.config.js
+++ b/frontend/src/chart.config.ts
@@ -12,7 +12,8 @@ import {
 	BarElement,
 	BarController,
 	ArcElement,
-	DoughnutController
+	DoughnutController,
+	type ChartArea,
 } from 'chart.js';
 
 // register chart components
@@ -43,7 +44,7 @@ Chart.defaults.plugins.tooltip.cornerRadius = 2;
 Chart.defaults.hover.mode = "index";
 
 // provide transparent gradient coloring based on given color for line chart backgrounds
-const transparentGradientLine = (ctx, chartArea, hexColor) => {
+const transparentGradientLine = (ctx: CanvasRenderingContext2D, chartArea: ChartArea, hexColor: string) => {
 	const gradient = ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top);
 	gradient.addColorStop(0, hexColor.slice(0, 7) + '00');
 	gradient.addColorStop(1, hexColor.length === 9 ? hexColor : hexColor.slice(0, 7) + '77');
@@ -51,7 +52,7 @@ const transparentGradientLine = (ctx, chartArea, hexColor) => {
 }
 
 // provide transparent gradient coloring based on given color for bar chart backgrounds
-const transparentGradientBar = (ctx, chartArea, hexColor, horizontal=false) => {
+const transparentGradientBar = (ctx: CanvasRenderingContext2D, chartArea: ChartArea, hexColor: string, horizontal = false) => {
 	const gradient = horizontal
 		? ctx.createLinearGradient(chartArea.left, 0, chartArea.right, 0)
 		: ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top);
diff --git a/frontend/src/charts/BarChart.vue b/frontend/src/charts/BarChart.vue
index b04a3bab..d377f5a3 100644
--- a/frontend/src/charts/BarChart.vue
+++ b/frontend/src/charts/BarChart.vue
@@ -12,31 +12,32 @@
 	</div>
 </template>
 
-<script setup>
-import { computed, watch, onMounted } from 'vue';
+<script setup lang="ts">
+import { computed, watch, onMounted, type PropType } from 'vue';
 import { Chart, transparentGradientBar } from '@/chart.config.js';
+import type { ChartConfiguration, ChartDataset, TooltipItem, ScriptableContext } from 'chart.js';
 
 // inherited properties
 const props = defineProps({
 	title:       String,  // chart title to print as heading if set
 	description: String,  // chart descriptional text to print between heading and chart if set
-	labels:      Array,   // chart data labels (mandatory)
-	datasets:    Array,   // chart datasets (mandatory)
+	labels:      { type: Array as PropType<string[]>, required: true },   // chart data labels (mandatory)
+	datasets:    { type: Array as PropType<ChartDataset<'bar'>[]>, required: true },   // chart datasets (mandatory)
 	horizontal:  Boolean, // true if bars should be horizontal instead of vertical
 	ordinate:    Boolean, // true if ordinate axis should be shown
 });
 
 // non-reactive data
 const id = Math.random().toString(36).substring(7);
-let chart = null;
+let chart: Chart<'bar'> | null = null;
 
 // computed: bring given datasets in chart.js readable format
 const processedDatasets = computed(() => {
 	let datasets = props.datasets;
 	datasets.map(d => {
-		d.backgroundColor = context => {
+		d.backgroundColor = (context: ScriptableContext<'bar'>) => {
 			const { ctx, chartArea } = context.chart;
-			if (!chartArea) return null;
+			if (!chartArea) return undefined;
 			return transparentGradientBar(
 				ctx,
 				chartArea,
@@ -60,12 +61,12 @@ const draw = () => {
 			indexAxis: props.horizontal ? 'y' : 'x',
 			responsive: true,
 			maintainAspectRatio: false,
-			maxBarThickness: 50,
 			datasets: {
 				bar: {
 					borderWidth: props.horizontal ? { right: 2 } : { top: 2 },
 					barPercentage: 1,
 					categoryPercentage: .6,
+					maxBarThickness: 50,
 				}
 			},
 			plugins: {
@@ -74,12 +75,13 @@ const draw = () => {
 					intersect: true,
 					position: 'nearest',
 					callbacks: {
-						label: context => ' ' + context.formattedValue + ' ' + context.dataset.label,
-						labelColor: context => {
+						label: (context: TooltipItem<'bar'>) => ' ' + context.formattedValue + ' ' + context.dataset.label,
+						labelColor: (context: TooltipItem<'bar'>) => {
+							const color = String(context.dataset.borderColor);
 							return {
 								borderWidth: 2,
-								borderColor: context.dataset.borderColor,
-								backgroundColor: context.dataset.borderColor + '33',
+								borderColor: color,
+								backgroundColor: color + '33',
 							};
 						}
 					}
@@ -90,7 +92,6 @@ const draw = () => {
 					stacked: false,
 					grid: {
 						display: false,
-						drawBorder: false,
 					},
 					ticks: {
 						maxRotation: 0,
@@ -103,7 +104,6 @@ const draw = () => {
 					stacked: false,
 					grid: {
 						display: false,
-						drawBorder: false,
 					},
 					ticks: {
 						maxRotation: 0,
@@ -113,17 +113,19 @@ const draw = () => {
 				}
 			}
 		}
-	});
+	} as ChartConfiguration<'bar'>);
 };
 
 // update chart if new data arrives
 watch (() => props.datasets, () => {
+	if (!chart) return;
 	chart.data.labels = props.labels;
 	chart.data.datasets = processedDatasets.value;
 	chart.update();
 });
 // update chart if ordinate is toggeled
 watch (() => props.ordinate, (newValue) => {
+	if (!chart?.options.scales?.y) return;
 	chart.options.scales.y.display = props.horizontal || newValue;
 	chart.update();
 });
diff --git a/frontend/src/charts/DoughnutChart.vue b/frontend/src/charts/DoughnutChart.vue
index 521209a0..2e24821a 100644
--- a/frontend/src/charts/DoughnutChart.vue
+++ b/frontend/src/charts/DoughnutChart.vue
@@ -20,25 +20,27 @@
 	</div>
 </template>
 
-<script setup>
-import { watch, onMounted } from 'vue';
+<script setup lang="ts">
+import { watch, onMounted, type PropType } from 'vue';
 import { Chart } from '@/chart.config.js';
+import type { ChartConfiguration, ChartDataset, TooltipItem } from 'chart.js';
 
 // inherited properties
 const props = defineProps({
 	title:       String,  // chart title to print as heading if set
 	description: String,  // chart descriptional text to print between heading and chart if set
-	info:        Object,  // chart info holding a featured number and corresponding label to show inside doughnut
-	labels:      Array,   // chart data labels (mandatory)
-	datasets:    Array,   // chart datasets (mandatory)
+	info:        Object as PropType<{ number: number | string; label: string }>,  // chart info holding a featured number and corresponding label to show inside doughnut
+	labels:      { type: Array as PropType<string[]>, required: true },   // chart data labels (mandatory)
+	datasets:    { type: Array as PropType<ChartDataset<'doughnut'>[]>, required: true },   // chart datasets (mandatory)
 });
 
 // non-reactive data
 const id = Math.random().toString(36).substring(7);
-let chart = null;
+let chart: Chart<'doughnut'> | null = null;
 
 // update chart if new data arrives
 watch (() => props.datasets, (newDatasets) => {
+	if (!chart) return;
 	chart.data.labels = props.labels;
 	chart.data.datasets = colorize(newDatasets);
 	chart.update();
@@ -72,38 +74,38 @@ const draw = () => {
 					intersect: true,
 					position: 'nearest',
 					callbacks: {
-						title: context => context[0].label,
-						label: context => ' ' + context.formattedValue + ' ' + context.dataset.label,
-						labelColor: context => {
+						title: (context: TooltipItem<'doughnut'>[]) => context[0].label,
+						label: (context: TooltipItem<'doughnut'>) => ' ' + context.formattedValue + ' ' + context.dataset.label,
+						labelColor: (context: TooltipItem<'doughnut'>) => {
+							const color = String(context.dataset.borderColor);
 							return {
 								borderWidth: 2,
-								borderColor: context.dataset.borderColor,
-								backgroundColor: context.dataset.borderColor + '33',
+								borderColor: color,
+								backgroundColor: color + '33',
 							};
 						}
 					}
 				}
 			}
 		}
-	});
+	} as ChartConfiguration<'doughnut'>);
 };
 // paint every segment depending on its data
-const colorize = (datasets) => {
+const colorize = (datasets: ChartDataset<'doughnut'>[]) => {
 	datasets.map(d => {
-		d.backgroundColor = dataColors(d.data, d.color);
-		d.borderColor = d.color;
+		d.backgroundColor = dataColors(d.data, d.borderColor as string);
 	});
 	return datasets;
 };
 // calculate list of background colors for each data arc
-const dataColors = (data, color) => {
-	const colors = [];
+const dataColors = (data: number[], color: string) => {
+	const colors: string[] = [];
 	const max = Math.max(...data);
 	data.forEach(d => colors.push(color + opacity(d, max)));
 	return colors;
 };
 // calculate opacity as two digit hex for given value based on max value
-const opacity = (value, max) => {
+const opacity = (value: number, max: number) => {
 	if (max == 0) return '00';
 	return Math.round(255*value/max).toString(16).padStart(2, "0");
 };
diff --git a/frontend/src/charts/LineChart.vue b/frontend/src/charts/LineChart.vue
index a00d2f53..fc1d9cec 100644
--- a/frontend/src/charts/LineChart.vue
+++ b/frontend/src/charts/LineChart.vue
@@ -18,16 +18,17 @@
 	</div>
 </template>
 
-<script setup>
-import { computed, watch, onMounted } from 'vue';
+<script setup lang="ts">
+import { computed, watch, onMounted, type PropType } from 'vue';
 import { Chart, transparentGradientLine } from '@/chart.config.js';
+import type { ChartConfiguration, ChartDataset, TooltipItem, ScriptableContext, ScriptableLineSegmentContext } from 'chart.js';
 
 // inherited properties
 const props = defineProps({
 	title:       String,  // chart title to print as heading if set
 	description: String,  // chart descriptional text to print between heading and chart if set
-	labels:      Array,   // chart data labels (mandatory)
-	datasets:    Array,   // chart datasets (mandatory)
+	labels:      { type: Array as PropType<string[]>, required: true },   // chart data labels (mandatory)
+	datasets:    { type: Array as PropType<ChartDataset<'line'>[]>, required: true },   // chart datasets (mandatory)
 	abscissa:    Boolean, // true if abscissa axis should be shown
 	ordinate:    Boolean, // true if ordinate axis should be shown
 	tooltips: {           // true if tooltips should be shown
@@ -48,21 +49,21 @@ const props = defineProps({
 
 // non-reactive data
 const id = Math.random().toString(36).substring(7);
-let chart = null;
+let chart: Chart<'line'> | null = null;
 
 // computed: bring given datasets in chart.js readable format
 const processedDatasets = computed(() => {
 	let datasets = props.datasets;
 	datasets.map(d => {
 		// gradient for background
-		d.backgroundColor = context => {
+		d.backgroundColor = (context: ScriptableContext<'line'>) => {
 			const { ctx, chartArea } = context.chart;
-			if (!chartArea) return null;
-			return transparentGradientLine(ctx, chartArea, d.borderColor);
+			if (!chartArea) return undefined;
+			return transparentGradientLine(ctx, chartArea, String(d.borderColor));
 		};
 		// dashed line for last segment
 		d.segment = {
-			borderDash: ctx => props.unfinished && ctx.p0?.parsed.x == d.data.length-2 ? [10, 5] : undefined
+			borderDash: (ctx: ScriptableLineSegmentContext) => props.unfinished && ctx.p0.parsed.x == d.data.length-2 ? [10, 5] : undefined
 		};
 	})
 	return datasets;
@@ -91,12 +92,13 @@ const draw = () => {
 				tooltip: {
 					enabled: props.tooltips,
 					callbacks: {
-						label: context => ' ' + context.formattedValue + ' ' + context.dataset.label,
-						labelColor: context => {
+						label: (context: TooltipItem<'line'>) => ' ' + context.formattedValue + ' ' + context.dataset.label,
+						labelColor: (context: TooltipItem<'line'>) => {
+							const color = String(context.dataset.borderColor);
 							return {
 								borderWidth: 2,
-								borderColor: context.dataset.borderColor,
-								backgroundColor: context.dataset.borderColor + '33',
+								borderColor: color,
+								backgroundColor: color + '33',
 							};
 						},
 					}
@@ -109,7 +111,6 @@ const draw = () => {
 					stacked: false,
 					grid: {
 						display: false,
-						drawBorder: false,
 					},
 					ticks: {
 						maxRotation: 0,
@@ -122,25 +123,28 @@ const draw = () => {
 					stacked: false,
 					grid: {
 						display: false,
-						drawBorder: false,
 					},
 					beginAtZero: true
 				}
 			}
 		}
-	});
+	} as ChartConfiguration<'line'>);
 };
 
 // update chart if new data arrives
 watch (() => props.datasets, () => {
+	if (!chart) return;
 	chart.data.labels = props.labels;
 	chart.data.datasets = processedDatasets.value;
 	// show points if only one data column exists and therefore no line can be drawn
-	chart.options.datasets.line.pointRadius = props.labels.length == 1 ? 5 : 0;
+	if (chart.options.datasets?.line) {
+		chart.options.datasets.line.pointRadius = props.labels.length == 1 ? 5 : 0;
+	}
 	chart.update();
 });
 // update chart if ordinate is toggeled
 watch (() => props.ordinate, (newValue) => {
+	if (!chart?.options.scales?.y) return;
 	chart.options.scales.y.display = newValue;
 	chart.update();
 });
diff --git a/frontend/src/definitions.ts b/frontend/src/definitions.ts
new file mode 100644
index 00000000..6207b7e8
--- /dev/null
+++ b/frontend/src/definitions.ts
@@ -0,0 +1,100 @@
+import type { SongEntity, SetlistEntity, SetlistSong } from '@backend/models';
+import type { UserRole } from '@backend/definitions';
+
+/**
+ * Amberbase's authenticated user combined with SongDrive's role model.
+ */
+export type AppUser = {
+  id?: string;
+  name: string;
+  email: string;
+  roles: UserRole[];
+  photo: null;
+};
+
+/**
+ * A single parsed part of a song's content (verse, chorus, ...).
+ */
+export type SongPart = {
+  type: string;
+  number: number | string;
+  class: string;
+  content: string;
+};
+
+/**
+ * Error shape accepted by utils.ts's throwError().
+ */
+export type ThrowableError = {
+  code?: string;
+  errorCode?: string;
+  message?: string;
+  error?: string;
+};
+
+/**
+ * Shape of SongSet.vue's `initialSong` prop: either the blank-form template
+ * (just authors/content/language/publisher/tags/title/translations, see
+ * App.vue's initialSong) or a full existing SongEntity when editing/
+ * duplicating a song (App.vue's editExistingSong) - the rest is only read
+ * when `existing` is true.
+ */
+export type SongFormData = Partial<SongEntity> & {
+  authors: string[];
+  content: string;
+  language: string;
+  publisher: string;
+  tags: string[];
+  title: string;
+  translations: string[];
+};
+
+/**
+ * Shape of SetlistSet.vue's `initialSetlist` prop: either the blank-form
+ * template (just title/isPublic/date/songs, see App.vue's initialSetlist) or
+ * a full existing SetlistEntity when editing - the rest is only read when
+ * `existing` is true.
+ */
+export type SetlistFormData = Partial<SetlistEntity> & {
+  title: string;
+  isPublic: boolean;
+  date: string;
+  songs: SetlistSong[];
+};
+
+/**
+ * A setlist song hydrated with its full song entity plus per-setlist custom key.
+ */
+export type SetlistSongPresentation = SongEntity & { customTuningDelta: number; customTuning: string };
+
+/**
+ * vue3-carousel's public .d.ts doesn't expose the imperative instance API
+ * (data/slideTo/prev/next/updateSlideSize) that's actually available at
+ * runtime via defineExpose, so it's typed loosely here instead.
+ */
+export type CarouselInstance = {
+  data: { currentSlide: number };
+  slideTo: (index: number) => void;
+  prev: () => void;
+  next: () => void;
+  updateSlideSize: () => void;
+};
+
+/**
+ * UI theme mode
+ */
+export enum ColorScheme {
+  Auto = 'auto',
+  Dark = 'dark',
+  Light = 'light',
+}
+
+/**
+ * Sort order for setlist and song lists.
+ */
+export enum SortOrder {
+  Newest = 'newest',
+  Oldest = 'oldest',
+  Random = 'random',
+  Popular = 'popular',
+}
diff --git a/frontend/src/elements/DividerHorizontal.vue b/frontend/src/elements/DividerHorizontal.vue
index 4aa7753c..45cdc2bb 100644
--- a/frontend/src/elements/DividerHorizontal.vue
+++ b/frontend/src/elements/DividerHorizontal.vue
@@ -6,7 +6,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 defineProps({
   label: String // optional text to display in divider
 })
diff --git a/frontend/src/elements/DropDown.vue b/frontend/src/elements/DropDown.vue
index ba8cffac..7975316b 100644
--- a/frontend/src/elements/DropDown.vue
+++ b/frontend/src/elements/DropDown.vue
@@ -22,7 +22,7 @@
 	</transition-scale>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref } from 'vue';
 import SecondaryButton from '@/elements/SecondaryButton.vue';
 import TransitionScale from '@/elements/TransitionScale.vue';
diff --git a/frontend/src/elements/ModalDialog.vue b/frontend/src/elements/ModalDialog.vue
index 43acbda1..265c13e2 100644
--- a/frontend/src/elements/ModalDialog.vue
+++ b/frontend/src/elements/ModalDialog.vue
@@ -39,7 +39,7 @@
 	</transition-scale>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { watch } from 'vue';
 import TransitionFade from '@/elements/TransitionFade.vue';
 import TransitionScale from '@/elements/TransitionScale.vue';
diff --git a/frontend/src/elements/PrimaryButton.vue b/frontend/src/elements/PrimaryButton.vue
index a147c3b9..1ebfecb0 100644
--- a/frontend/src/elements/PrimaryButton.vue
+++ b/frontend/src/elements/PrimaryButton.vue
@@ -13,7 +13,7 @@
   </button>
 </template>
 
-<script setup>
+<script setup lang="ts">
 // component properties
 defineProps({
   type: String
diff --git a/frontend/src/elements/SecondaryButton.vue b/frontend/src/elements/SecondaryButton.vue
index 82f93415..a5ba612d 100644
--- a/frontend/src/elements/SecondaryButton.vue
+++ b/frontend/src/elements/SecondaryButton.vue
@@ -13,7 +13,7 @@
   </button>
 </template>
 
-<script setup>
+<script setup lang="ts">
 // component properties
 defineProps({
   type: String
diff --git a/frontend/src/elements/SongTag.vue b/frontend/src/elements/SongTag.vue
index 01b8fdf9..f9172634 100644
--- a/frontend/src/elements/SongTag.vue
+++ b/frontend/src/elements/SongTag.vue
@@ -12,7 +12,7 @@
 	</div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { useI18n } from 'vue-i18n';
 
 // icons
diff --git a/frontend/src/elements/UserAvatar.vue b/frontend/src/elements/UserAvatar.vue
index 3db97b45..dab92661 100644
--- a/frontend/src/elements/UserAvatar.vue
+++ b/frontend/src/elements/UserAvatar.vue
@@ -43,7 +43,7 @@
 	</figure>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { initials } from '@/utils.js';
 
 // icons
diff --git a/frontend/src/elements/ZoneDanger.vue b/frontend/src/elements/ZoneDanger.vue
index 6fab10d9..375ac14f 100644
--- a/frontend/src/elements/ZoneDanger.vue
+++ b/frontend/src/elements/ZoneDanger.vue
@@ -11,7 +11,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 // component properties
 defineProps({
   label: String
diff --git a/frontend/src/elements/ZoneInfo.vue b/frontend/src/elements/ZoneInfo.vue
index 1785856b..0d44cc4b 100644
--- a/frontend/src/elements/ZoneInfo.vue
+++ b/frontend/src/elements/ZoneInfo.vue
@@ -24,7 +24,7 @@
 </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { useI18n } from 'vue-i18n';
 
 // icons
diff --git a/frontend/src/keys.ts b/frontend/src/keys.ts
new file mode 100644
index 00000000..14835e23
--- /dev/null
+++ b/frontend/src/keys.ts
@@ -0,0 +1,53 @@
+import { inject, type ComputedRef, type InjectionKey, type Ref } from 'vue';
+import type { marked } from 'marked';
+import type { AmberClient, AmberCollection, UserInfo } from 'amber-client';
+import type { Song, SongEntity, Setlist, SetlistEntity } from '@backend/models';
+import type { SongTag } from '@backend/definitions';
+import type { AppUser } from '@/definitions';
+
+// data
+export const songsKey: InjectionKey<Ref<Song[]>> = Symbol('songs');
+export const setlistsKey: InjectionKey<Ref<Setlist[]>> = Symbol('setlists');
+export const tagsKey: InjectionKey<SongTag[]> = Symbol('tags');
+export const userKey: InjectionKey<ComputedRef<AppUser>> = Symbol('user');
+export const usersKey: InjectionKey<Ref<Record<string, UserInfo>>> = Symbol('users');
+
+// amber client / collections
+export const clientKey: InjectionKey<Ref<AmberClient | null>> = Symbol('client');
+export const songsCollectionKey: InjectionKey<Ref<AmberCollection<SongEntity> | null>> = Symbol('songsCollection');
+export const setlistCollectionKey: InjectionKey<Ref<AmberCollection<SetlistEntity> | null>> = Symbol('setlistCollection');
+
+// ui state
+export const noActiveModalKey: InjectionKey<ComputedRef<boolean>> = Symbol('noActiveModal');
+export const noActiveInputKey: InjectionKey<ComputedRef<boolean>> = Symbol('noActiveInput');
+
+// hotkeys (useMagicKeys refs)
+export const hkBackKey: InjectionKey<Ref<boolean>> = Symbol('hkBack');
+export const hkCancelKey: InjectionKey<Ref<boolean>> = Symbol('hkCancel');
+export const hkChordsKey: InjectionKey<Ref<boolean>> = Symbol('hkChords');
+export const hkDownKey: InjectionKey<Ref<boolean>> = Symbol('hkDown');
+export const hkForwardKey: InjectionKey<Ref<boolean>> = Symbol('hkForward');
+export const hkGoKey: InjectionKey<Ref<boolean>> = Symbol('hkGo');
+export const hkHideKey: InjectionKey<Ref<boolean>> = Symbol('hkHide');
+export const hkPresentKey: InjectionKey<Ref<boolean>> = Symbol('hkPresent');
+export const hkResetKey: InjectionKey<Ref<boolean>> = Symbol('hkReset');
+export const hkSearchKey: InjectionKey<Ref<boolean>> = Symbol('hkSearch');
+export const hkSyncKey: InjectionKey<Ref<boolean>> = Symbol('hkSync');
+export const hkThemeKey: InjectionKey<Ref<boolean>> = Symbol('hkTheme');
+export const hkUpKey: InjectionKey<Ref<boolean>> = Symbol('hkUp');
+
+// app-level (provided in main.ts, not App.vue)
+export const versionKey: InjectionKey<string> = Symbol('version');
+export const markedKey: InjectionKey<typeof marked> = Symbol('marked');
+
+/**
+ * Strict-typed inject(): throws an error instead of silently returning `T | undefined`,
+ * since every one of these keys is always provided before any child mounts.
+ */
+export function injectStrict<T>(key: InjectionKey<T>): T {
+  const value = inject(key);
+  if (value === undefined) {
+    throw new Error(`Injection "${String(key.description)}" not found — component must be a descendant of App.vue.`);
+  }
+  return value;
+}
diff --git a/frontend/src/main.js b/frontend/src/main.ts
similarity index 74%
rename from frontend/src/main.js
rename to frontend/src/main.ts
index 001ce57e..1e69b5e5 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.ts
@@ -1,5 +1,6 @@
 // init app
 import { createApp } from 'vue';
+import { markedKey, versionKey } from '@/keys';
 import App from '@/App.vue';
 const app = createApp(App);
 
@@ -8,7 +9,7 @@ import router from '@/router.js'
 app.use(router);
 
 // set global properties
-app.provide('version', APP_VERSION);
+app.provide(versionKey, APP_VERSION);
 
 // vue-notification
 import Notifications from '@kyvg/vue3-notification';
@@ -22,9 +23,9 @@ const messages = {
 	'de': de, // German
 	'en': en, // English
 };
-const loc = !('lang' in localStorage)
-	? navigator.language.substring(0, 2) || navigator.userLanguage.substring(0, 2)
-	: localStorage.getItem('lang');
+const loc: string = !('lang' in localStorage)
+	? navigator.language.substring(0, 2) || (navigator as Navigator & { userLanguage?: string }).userLanguage?.substring(0, 2) || 'en'
+	: (localStorage.getItem('lang') ?? 'en');
 const i18n = createI18n({
 	legacy: false,
 	globalInjection: true,
@@ -55,17 +56,7 @@ marked.use(markedHighlight({
 		}
 	},
 }));
-marked.use({
-	mangle: false,
-  headerIds: false,
-});
-app.provide('marked', marked);
-
-// extend Object for filtering
-Object.filter = (obj, predicate) =>
-	Object.keys(obj)
-		.filter(key => predicate(obj[key]))
-		.reduce((res, key) => (res[key] = obj[key], res), {});
+app.provide(markedKey, marked);
 
 // init basic css with tailwind imports
 import '@/assets/main.css';
diff --git a/frontend/src/modals/InfoSongData.vue b/frontend/src/modals/InfoSongData.vue
deleted file mode 100644
index 6cc735fe..00000000
--- a/frontend/src/modals/InfoSongData.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-	<modal-dialog
-		:active="active"
-		:title="t('modal.songInfo')"
-		:child="true"
-		@closed="emit('closed')"
-	>
-		<div v-if="song.note">
-			<div class="font-bold">{{ t('field.note') }}</div>
-			<p v-html="song.note"></p>
-		</div>
-	</modal-dialog>
-</template>
-
-<script setup>
-import { useI18n } from 'vue-i18n';
-import ModalDialog from '@/elements/ModalDialog.vue';
-
-// component constants
-const { t } = useI18n();
-
-// component properties
-const props = defineProps({
-	active: Boolean, // state of modal display, true to show modal
-	song:   Object,  // song to show information for
-});
-
-// emits
-const emit = defineEmits(['closed']);
-</script>
diff --git a/frontend/src/modals/InfoSongSyntax.vue b/frontend/src/modals/InfoSongSyntax.vue
index aa395cdc..54b4518c 100644
--- a/frontend/src/modals/InfoSongSyntax.vue
+++ b/frontend/src/modals/InfoSongSyntax.vue
@@ -10,8 +10,9 @@
 	</modal-dialog>
 </template>
 
-<script setup>
-import { computed, inject } from 'vue';
+<script setup lang="ts">
+import { injectStrict, markedKey } from '@/keys';
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import de from "@/docs/syntax-cheatsheet.de.md?raw";
 import en from "@/docs/syntax-cheatsheet.en.md?raw";
@@ -23,7 +24,7 @@ const { t, locale } = useI18n();
 const loc = locale.value.substring(0, 2);
 
 // cheatsheet contents
-const cheatsheets = { de, en };
+const cheatsheets: Record<string, string> = { de, en };
 const lang = ['de', 'en'].includes(loc) ? loc : 'en';
 
 // component properties
@@ -35,7 +36,7 @@ const props = defineProps({
 const emit = defineEmits(['closed']);
 
 // parse content of cheatsheet markdown file
-const marked = inject('marked');
+const marked = injectStrict(markedKey);
 const content = computed(() => marked.parse(
 	cheatsheets[lang],
 	{
@@ -43,10 +44,6 @@ const content = computed(() => marked.parse(
 		pedantic: false,
 		gfm: true,
 		breaks: true,
-		sanitize: false,
-		smartLists: true,
-		smartypants: false,
-		xhtml: false
 	}
 ));
 </script>
diff --git a/frontend/src/modals/PasswordChange.vue b/frontend/src/modals/PasswordChange.vue
index bdbb2e8f..e7e4e8e0 100644
--- a/frontend/src/modals/PasswordChange.vue
+++ b/frontend/src/modals/PasswordChange.vue
@@ -60,10 +60,12 @@
 	</modal-dialog>
 </template>
 
-<script setup>
+<script setup lang="ts">
+import { injectStrict, clientKey, userKey } from '@/keys';
 import { notify } from '@kyvg/vue3-notification';
-import { reactive, computed, ref, watch, inject } from 'vue';
+import { reactive, computed, ref, watch } from 'vue';
 import { throwError, randomString } from '@/utils.js';
+import type { ThrowableError } from '@/definitions';
 import { useI18n } from 'vue-i18n';
 import DividerHorizontal from '@/elements/DividerHorizontal.vue';
 import ModalDialog from '@/elements/ModalDialog.vue';
@@ -78,8 +80,8 @@ import {
 // component constants
 const { t } = useI18n();
 const examplePassword = randomString(8);
-const client = inject('client');
-const currentUser = inject('user');
+const client = injectStrict(clientKey);
+const currentUser = injectStrict(userKey);
 
 // inherited properties
 const props = defineProps({
@@ -124,7 +126,7 @@ const setPassword = async () => {
 	error.password.tooshort = user.password.length < 8;
 	error.currentpassword.missing = user.currentpassword == '';
 	// no errors: send submitted user data and close modal
-	if (errors.value) return;
+	if (errors.value || !client.value || !currentUser.value.id) return;
 
 	busy.value = true;
 	try {
@@ -147,14 +149,14 @@ const setPassword = async () => {
 			});
 		}
 	} catch (err) {
-		throwError(err);
+		throwError(err as ThrowableError);
 	} finally {
 		busy.value = false;
 	}
 };
 
 // reset input when reopen modal
-watch (() => props.active, (newActive) => {
+watch (() => props.active, (newActive: boolean) => {
 	if (newActive) {
 		user.password = '';
 		user.repeat = '';
diff --git a/frontend/src/modals/SetlistDelete.vue b/frontend/src/modals/SetlistDelete.vue
index 8ae57ef6..eb01fd64 100644
--- a/frontend/src/modals/SetlistDelete.vue
+++ b/frontend/src/modals/SetlistDelete.vue
@@ -17,11 +17,13 @@
 	</modal-dialog>
 </template>
 
-<script setup>
-import { inject, ref } from 'vue';
+<script setup lang="ts">
+import { injectStrict, setlistCollectionKey, setlistsKey } from '@/keys';
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { notify } from '@kyvg/vue3-notification';
 import { throwError } from '@/utils.js';
+import type { ThrowableError } from '@/definitions';
 import { useRoute, useRouter } from 'vue-router'
 import ModalDialog from '@/elements/ModalDialog.vue';
 import PrimaryButton from '@/elements/PrimaryButton.vue';
@@ -38,8 +40,8 @@ const route = useRoute()
 const router = useRouter()
 
 // global properties
-const setlists = inject('setlists');
-const setlistCollection = inject('setlistCollection');
+const setlists = injectStrict(setlistsKey);
+const setlistCollection = injectStrict(setlistCollectionKey);
 
 // component properties
 const props = defineProps({
@@ -54,9 +56,11 @@ const emit = defineEmits(['closed']);
 // execute setlist deletion
 const busy = ref(false);
 const deleteSetlist = async () => {
+	if (!setlistCollection.value) return;
 	busy.value = true;
 	try {
 		const current = setlists.value.find(s => s.entity.slug === props.id);
+		if (!current) return;
 		await setlistCollection.value.deleteDoc(current.id);
 		emit('closed');
 		if (route.name != 'setlists') {
@@ -69,7 +73,7 @@ const deleteSetlist = async () => {
 			type: 'primary'
 		});
 	} catch (err) {
-		throwError(err);
+		throwError(err as ThrowableError);
 	} finally {
 		busy.value = false;
 	}
diff --git a/frontend/src/modals/SetlistPresent.vue b/frontend/src/modals/SetlistPresent.vue
index a3854bdb..2cdc960a 100644
--- a/frontend/src/modals/SetlistPresent.vue
+++ b/frontend/src/modals/SetlistPresent.vue
@@ -43,7 +43,7 @@
 						:class="{
 							'bg-spring-600!': i === presentation?.data.currentSlide
 						}"
-						@click="presentation.slideTo(i)"
+						@click="presentation?.slideTo(i)"
 					>
 						<span v-if="chords">{{ song.customTuning }}</span>
 					</secondary-button>
@@ -54,7 +54,7 @@
 					class="absolute bottom-0 left-4 md:left-auto md:right-1/2 flex items-center gap-1 mr-0.5"
 					:disabled="currentPosition <= 0"
 					title="Previous Song"
-					@click="presentation.prev()"
+					@click="presentation?.prev()"
 				>
 					<icon-arrow-left class="w-5 h-5 stroke-1.5" />
 					<div v-if="currentPosition > 0" class="hidden md:flex items-center gap-2">
@@ -72,7 +72,7 @@
 					class="absolute bottom-0 left-16 md:left-1/2 flex items-center gap-1 ml-0.5"
 					:disabled="currentPosition >= songs.length-1"
 					title="Next Song"
-					@click="presentation.next()"
+					@click="presentation?.next()"
 				>
 					<div v-if="currentPosition < songs.length-1" class="hidden md:flex items-center gap-2">
 						<div class="hidden 2xl:block max-w-3xs truncate">
@@ -88,15 +88,6 @@
 				<!-- Live clock -->
 				<div class="font-mono text-2xl px-4">{{ timeonly }}</div>
 
-				<!-- Song info -->
-				<secondary-button
-					class="hidden lg:block"
-					:disabled="!songs[currentPosition]?.note"
-					:title="tooltip('info')"
-					@click="songs[currentPosition].note ? showModal.infosongdata = true : null"
-				>
-					<icon-info-circle class="w-5 h-5 stroke-1.5" :class="{ 'stroke-spring-400': showModal.infosongdata }" />
-				</secondary-button>
 				<!-- Toggle synchronisation -->
 				<secondary-button
 					class="hidden lg:block"
@@ -136,14 +127,6 @@
 				<!-- Dropdown for small viewports -->
 				<div class="lg:hidden">
 					<drop-down position="up">
-						<button
-							class="px-3 py-2 w-full flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
-							:disabled="!songs[currentPosition].note"
-							@click="songs[currentPosition].note ? showModal.infosongdata = true : null"
-						>
-							<icon-info-circle class="w-5 h-5 stroke-1.5" :class="{ 'stroke-spring-400': showModal.infosongdata }" />
-							{{ songs[currentPosition].note ? t('tooltip.infoSongData') : t('tooltip.noSongInfo') }}
-						</button>
 						<!-- toggle synchronisation -->
 						<button
 							class="px-3 py-2 w-full flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
@@ -220,24 +203,18 @@
 			</div>
 		</div>
 	</modal-dialog>
-
-	<!-- Modal: info song note -->
-	<info-song-data
-		:active="showModal.infosongdata"
-		:song="songs[currentPosition]"
-		@closed="showModal.infosongdata = false"
-	/>
 </template>
 
-<script setup>
+<script setup lang="ts">
+import { injectStrict, hkBackKey, hkCancelKey, hkDownKey, hkForwardKey, hkHideKey, hkSyncKey, hkThemeKey, hkUpKey } from '@/keys';
 import 'vue3-carousel/dist/carousel.css';
 import { Carousel, Slide } from 'vue3-carousel';
 import { logicOr } from '@vueuse/math';
 import { whenever } from '@vueuse/core';
-import { reactive, ref, computed, watch, onMounted, onUnmounted, nextTick, inject } from 'vue';
+import { ref, computed, watch, onMounted, onUnmounted, nextTick, type PropType } from 'vue';
 import { useI18n } from 'vue-i18n';
+import type { SetlistSongPresentation, CarouselInstance } from '@/definitions';
 import DropDown from '@/elements/DropDown.vue';
-import InfoSongData from '@/modals/InfoSongData.vue';
 import ModalDialog from '@/elements/ModalDialog.vue';
 import SecondaryButton from '@/elements/SecondaryButton.vue';
 import SongContent from '@/partials/SongContent.vue';
@@ -249,7 +226,6 @@ import {
 	IconBrightness,
 	IconEye,
 	IconEyeOff,
-	IconInfoCircle,
 	IconMusic,
 	IconMusicOff,
 	IconRefresh,
@@ -261,42 +237,37 @@ import {
 const { t } = useI18n();
 
 // handle hotkeys for this component
-const hkBack = inject('hkBack');
-const hkForward = inject('hkForward');
-const hkUp = inject('hkUp');
-const hkDown = inject('hkDown');
-const hkInfo = inject('hkInfo');
-const hkSync = inject('hkSync');
-const hkHide = inject('hkHide');
-const hkTheme = inject('hkTheme');
-const hkChords = inject('hkChords');
-const hkCancel = inject('hkCancel');
+const hkBack = injectStrict(hkBackKey);
+const hkForward = injectStrict(hkForwardKey);
+const hkUp = injectStrict(hkUpKey);
+const hkDown = injectStrict(hkDownKey);
+const hkSync = injectStrict(hkSyncKey);
+const hkHide = injectStrict(hkHideKey);
+const hkTheme = injectStrict(hkThemeKey);
+const hkCancel = injectStrict(hkCancelKey);
 
 // inherited properties
 const props = defineProps({
 	active:      Boolean, // state of modal display, true to show modal
 	chords:      Boolean, // true if chords shall be rendered
-	position:    Number,  // list position of current song in the presentation
+	position:    { type: Number, default: 0 },  // list position of current song in the presentation
 	remoteHide:  Boolean, // true if synced presentation should fade ouot
 	remoteLight: Boolean, // true if synced presentation should show up in light mde
 	remoteText:  Boolean, // true if synced presentation should be rendered without chords
-	songs:       Array,   // list of songs to present
+	songs:       { type: Array as PropType<SetlistSongPresentation[]>, default: () => [] },   // list of songs to present
 	sync:        Boolean, // true if setlist should send sync signals
 });
 
 // reactive data
-const showModal = reactive({
-	infosongdata: false
-});
-const presentation = ref();
-const songContentRef = ref([]);
+const presentation = ref<CarouselInstance>();
+const songContentRef = ref<InstanceType<typeof SongContent>[]>([]);
 const currentPosition = ref(0);
 const autoSync = ref(false);
 const hide = ref(false);
 const dark = ref(true);
 const now = ref(new Date);
 const blink = ref(true);
-const resizeTimeout = ref(null);
+const resizeTimeout = ref<ReturnType<typeof setTimeout>>();
 
 // emits
 const emit = defineEmits(['updatePosition', 'chords', 'updateHide', 'updateDark', 'updateChords', 'closed']);
@@ -325,11 +296,8 @@ const resizeHandler = () => {
 	}, 500);
 };
 // handle tooltips
-const tooltip = (target) => {
+const tooltip = (target: string) => {
 	switch (target) {
-		case 'info': return props.songs[currentPosition.value]?.note
-			? t('tooltip.infoSongData') + '\n' + t('key.ctrl') + ' + ' + t('key.I')
-			: t('tooltip.noSongInfo');
 		case 'sync':
 			return t('tooltip.sync' + (!autoSync.value ? 'On' : 'Off')) + '\n' + t('key.ctrl') + ' + ' + t('key.S');
 		case 'display':
@@ -360,7 +328,7 @@ watch (currentPosition, (newPosition) => {
 // watcher: update local position, content display and theme if autoSync was turned on
 watch (autoSync, () => {
 	if (autoSync.value) {
-		presentation.value.slideTo(props.position);
+		presentation.value?.slideTo(props.position);
 		hide.value = props.remoteHide;
 		dark.value = !props.remoteLight;
 	}
@@ -373,7 +341,7 @@ watch (
 // watcher: update local position if autoSync is on and remote position was updated
 watch (() => props.position, () => {
 	if (autoSync.value) {
-		presentation.value.slideTo(props.position);
+		presentation.value?.slideTo(props.position);
 	}
 });
 // update local chord display if autoSync is on and remote chords were updated
@@ -389,7 +357,7 @@ watch (() => props.remoteLight, () => {
 	}
 });
 // toggle local content display if autoSync is on and remote content display was updated
-watch (() => props.remoteHide, (val) => {
+watch (() => props.remoteHide, (val: boolean) => {
 	if (autoSync.value) {
 		hide.value = val;
 	}
@@ -431,10 +399,6 @@ whenever(
 		}
 	}
 );
-whenever(
-	hkInfo,
-	() => props.songs[currentPosition.value].note ? showModal.infosongdata = !showModal.infosongdata : null
-);
 whenever(
 	hkSync,
 	() => autoSync.value = !autoSync.value
diff --git a/frontend/src/modals/SetlistSet.vue b/frontend/src/modals/SetlistSet.vue
index 1cc82011..b555e8f0 100644
--- a/frontend/src/modals/SetlistSet.vue
+++ b/frontend/src/modals/SetlistSet.vue
@@ -13,11 +13,11 @@
 					<input
 						type="text"
 						v-model="setlist.title"
-						:class="{ 'border-rose-600!': (error.title & !setlist.title) || error.slug }"
+						:class="{ 'border-rose-600!': (error.title && !setlist.title) || error.slug }"
 						:placeholder="t('placeholder.exampleSetlistTitle')"
 						required
 					/>
-					<div v-if="error.title & !setlist.title" class="text-rose-600">
+					<div v-if="error.title && !setlist.title" class="text-rose-600">
 						{{ t('error.requiredTitle') }}
 					</div>
 					<div v-if="error.slug" class="text-rose-600">
@@ -28,13 +28,13 @@
 				<label class="flex grow lg:grow-0 flex-col gap-1">
 					<div>{{ t('field.visibility') }} <span class="text-rose-600">*</span></div>
 					<select v-model="setlist.isPublic" required>
-						<option value="1">{{ t('option.public') }}</option>
-						<option value="0">{{ t('option.private') }}</option>
+						<option :value="true">{{ t('option.public') }}</option>
+						<option :value="false">{{ t('option.private') }}</option>
 					</select>
-					<div v-if="setlist.isPublic=='0'" class="text-blade-500">
+					<div v-if="!setlist.isPublic" class="text-blade-500">
 						{{ t('text.visibleForYou') }}
 					</div>
-					<div v-if="setlist.isPublic=='1'" class="text-blade-500">
+					<div v-if="setlist.isPublic" class="text-blade-500">
 						{{ t('text.visibleForAll') }}
 					</div>
 				</label>
@@ -48,14 +48,14 @@
 						pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"
 					/>
 					<div class="text-blade-500">{{ humanDate(setlist.date, loc) }}</div>
-					<div v-if="error.date & !setlist.date" class="text-rose-600">
+					<div v-if="error.date && !setlist.date" class="text-rose-600">
 						{{ t('error.requiredDate') }}
 					</div>
 					<datepicker
 						:model-value="setlist.date != '' ? (new Date(setlist.date)) : (new Date())"
 						format="yyyy-MM-dd"
 						class="hidden lg:block"
-						:class="{ 'border border-rose-600!': error.date & !setlist.date }"
+						:class="{ 'border border-rose-600!': error.date && !setlist.date }"
 						inline
 						auto-apply
 						:dark="isDark"
@@ -77,7 +77,7 @@
 				</label>
 			</div>
 			<!-- song selection -->
-			<div class="max-h-[calc(50vh_-_6rem)] lg:max-h-[calc(80vh_-_8.25rem)] flex flex-col gap-1">
+			<div class="max-h-[calc(50vh-6rem)] lg:max-h-[calc(80vh-8.25rem)] flex flex-col gap-1">
 				<label>{{ t('field.songs') }}</label>
 				<!-- filter -->
 				<div class="flex gap-1">
@@ -87,7 +87,7 @@
 						<input
 							type="search"
 							v-model="filter.fulltext"
-							@input="e => filter.fulltext = e.target.value"
+							@input="e => filter.fulltext = (e.target as HTMLInputElement).value"
 							class="w-full pl-8"
 							:placeholder="t('placeholder.searchSongTitle')"
 						/>
@@ -163,7 +163,7 @@
 					>
 						<input
 							:checked="idExists(fsong.id)"
-							@input="e => songSelection(fsong.id, e.target.checked)"
+							@input="e => songSelection(fsong.id, (e.target as HTMLInputElement).checked)"
 							type="checkbox"
 							class="w-6 h-6 ml-2"
 						/>
@@ -191,7 +191,7 @@
 				</div>
 			</div>
 			<!-- song preview -->
-			<div class="max-h-[calc(50vh_-_6rem)] lg:max-h-[calc(80vh_-_8.25rem)] flex flex-col gap-1">
+			<div class="max-h-[calc(50vh-6rem)] lg:max-h-[calc(80vh-8.25rem)] flex flex-col gap-1">
 				<div v-if="setlist.songs?.length === 0" class="flex flex-col items-center gap-8 mt-4">
 					<icon-playlist class="w-12 h-12 stroke-1 text-blade-500" />
 					<div class="text-center">
@@ -266,15 +266,19 @@
 	</modal-dialog>
 </template>
 
-<script setup>
+<script setup lang="ts">
+import { injectStrict, setlistCollectionKey, setlistsKey, songsKey, userKey } from '@/keys';
 import '@vuepic/vue-datepicker/dist/main.css';
 import { enGB, de } from 'date-fns/locale';
+import type { Locale } from 'date-fns';
 import { keyScale, humanDate, throwError, urlify, browserPrefersDark, sortTags } from '@/utils.js';
+import type { ThrowableError, SetlistFormData } from '@/definitions';
 import { notify } from '@kyvg/vue3-notification';
-import { ref, reactive, computed, inject, watch } from 'vue';
+import { ref, reactive, computed, watch, type PropType } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { SongLanguage, SongTag as SongTagEnum } from '@backend/definitions';
+import type { SetlistEntity } from '@backend/models';
 import Datepicker from '@vuepic/vue-datepicker';
 import draggable from 'vuedraggable';
 import DropDown from '@/elements/DropDown.vue';
@@ -306,28 +310,28 @@ import {
 const { t, locale } = useI18n();
 const loc = locale.value.substring(0, 2);
 
-const calendarLanguage = {
+const calendarLanguage: Record<string, Locale> = {
 	en: enGB,
 	de: de
 };
 const router = useRouter();
 
 // global properties
-const songs = inject('songs');
-const setlists = inject('setlists');
-const user = inject('user');
-const setlistCollection = inject('setlistCollection');
+const songs = injectStrict(songsKey);
+const setlists = injectStrict(setlistsKey);
+const user = injectStrict(userKey);
+const setlistCollection = injectStrict(setlistCollectionKey);
 const languages = Object.values(SongLanguage);
 const tags = Object.values(SongTagEnum);
 
 // find a song's entity by id
-const findSong = (id) => songs.value.find(s => s.id === id)?.entity;
+const findSong = (id: string) => songs.value.find(s => s.id === id)?.entity;
 
 // component properties
 const props = defineProps({
 	active:         Boolean, // state of modal display, true to show modal
 	existing:       Boolean, // setlist already exists
-	initialSetlist: Object,  // setlist structure to fill with data
+	initialSetlist: { type: Object as PropType<SetlistFormData>, required: true },  // setlist structure to fill with data
 	id:             String,  // setlist identifier
 });
 
@@ -348,43 +352,42 @@ const errors = computed(() => {
 	return (error.title || error.slug || error.date);
 });
 const resetErrors = () => {
-	for (const key in error) {
-		if (Object.hasOwnProperty.call(error, key)) {
-			error[key] = false;
-		}
+	for (const key of Object.keys(error) as (keyof typeof error)[]) {
+		error[key] = false;
 	}
 };
 
+// build local editable setlist state from the initial (blank or existing) setlist
+const buildFormState = (initial: SetlistFormData): SetlistFormData => ({
+	...initial,
+	// only show undeleted songs
+	songs: initial.songs.filter(s => findSong(s.id)),
+});
+
 // setlist input data
-const setlist = ref(null);
+const setlist = ref<SetlistFormData>(buildFormState(props.initialSetlist));
 const initInput = () => {
 	resetErrors();
 	resetFilter();
-	const sl = { ...props.initialSetlist };
-	// only show undeleted songs
-	sl.songs = sl.songs.filter(s => findSong(s.id));
-	// init visibility state if not existing
-	sl.isPublic = sl.isPublic ? 1 : 0;
-	// apply initial values
-	setlist.value = sl;
+	setlist.value = buildFormState(props.initialSetlist);
 };
 watch(() => props.active === true, () => initInput());
 
 // add song to current song selection
-const addSong = (id) => {
-	setlist.value.songs.push({ id: id, key: findSong(id)?.key });
+const addSong = (id: string) => {
+	setlist.value.songs.push({ id: id, key: findSong(id)?.key ?? '' });
 };
 
 // remove song from current song selection
-const removeSong = (id) => {
+const removeSong = (id: string) => {
 	setlist.value.songs = setlist.value.songs.filter((s) => s.id !== id);
 };
 
 // check if given song exists on current song selection
-const idExists = (id) => setlist.value?.songs.some((s) => s.id === id);
+const idExists = (id: string) => setlist.value?.songs.some((s) => s.id === id);
 
 // add or remove song of given id
-const songSelection = (id, addition) => {
+const songSelection = (id: string, addition: boolean) => {
 	if (addition) {
 		addSong(id);
 	} else {
@@ -393,17 +396,15 @@ const songSelection = (id, addition) => {
 };
 
 // filter input
-const filter = reactive({
+const filter = reactive<{ fulltext: string | null; tag: string | null; key: string | null; language: string | null }>({
 	fulltext: null,
 	tag:      null,
 	key:      null,
 	language: null,
 });
 const resetFilter = () => {
-	for (const field in filter) {
-		if (Object.hasOwnProperty.call(filter, field)) {
-			filter[field] = null;
-		}
+	for (const field of Object.keys(filter) as (keyof typeof filter)[]) {
+		filter[field] = null;
 	}
 };
 const isFiltered = computed(() => {
@@ -421,28 +422,28 @@ const filteredSongs = computed(() => {
 		const key = filter.fulltext.toLowerCase();
 		result = result.filter(s =>
 			s.entity.title.toLowerCase().indexOf(key) !== -1
-				|| s.entity.subtitle.toLowerCase().indexOf(key) !== -1
+				|| (s.entity.subtitle ?? '').toLowerCase().indexOf(key) !== -1
 				|| s.entity.content.toLowerCase().indexOf(key) !== -1
 		);
 	}
 	if (filter.tag) {
 		// filter field: tags
-		result = result.filter(s => s.entity.tags.indexOf(filter.tag) !== -1);
+		result = result.filter(s => s.entity.tags.indexOf(filter.tag!) !== -1);
 	}
 	if (filter.language) {
 		// filter field: language
-		result = result.filter(s => s.entity.language.indexOf(filter.language) !== -1);
+		result = result.filter(s => s.entity.language.indexOf(filter.language!) !== -1);
 	}
 	if (filter.key) {
 		// filter field: key
-		result = result.filter(s => s.entity.key?.indexOf(filter.key) !== -1);
+		result = result.filter(s => s.entity.key?.indexOf(filter.key!) !== -1);
 	}
 	return result;
 });
 
 // list of songs and the date of their last performance by song id
 const performedSongs = computed(() => {
-	let songs = {};
+	let songs: Record<string, string> = {};
 	let sortedSetlists = setlists.value.toSorted((a, b) => b.entity.date.localeCompare(a.entity.date));
 	sortedSetlists.forEach(setlist => {
 		setlist.entity.songs.forEach(song => {
@@ -455,22 +456,16 @@ const performedSongs = computed(() => {
 });
 
 // update setlist date from datepicker
-const updateDate = (newDate) => {
+const updateDate = (newDate: Date) => {
 	setlist.value.date = newDate.toISOString().slice(0,10);
 };
 
-// update song order of setlist songs
-const reorder = ({oldIndex, newIndex}) => {
-	const movedItem = setlist.value.songs.splice(oldIndex, 1)[0];
-	setlist.value.songs.splice(newIndex, 0, movedItem);
-};
-
 // tune the song at given position up
-const tuneUp = (position) => {
+const tuneUp = (position: number) => {
 	let songs = setlist.value.songs;
 	// update tuning
 	let tone = songs[position].key ? songs[position].key : findSong(songs[position].id)?.key;
-	let i = keyScale.indexOf(tone);
+	let i = keyScale.indexOf(tone ?? '');
 	if (i>=keyScale.length-1) {
 		tone = keyScale[0];
 	} else {
@@ -481,11 +476,11 @@ const tuneUp = (position) => {
 };
 
 // tune the song at given position down
-const tuneDown = (position) => {
+const tuneDown = (position: number) => {
 	let songs = setlist.value.songs;
 	// update tuning
 	let tone = songs[position].key ? songs[position].key : findSong(songs[position].id)?.key;
-	let i = keyScale.indexOf(tone);
+	let i = keyScale.indexOf(tone ?? '');
 	if (i<=0) {
 		tone = keyScale[keyScale.length-1];
 	} else {
@@ -501,16 +496,16 @@ const createSlug = () => {
 };
 
 // build the entity payload to send to Amberbase
-const buildEntity = (slug) => ({
-	active:      props.existing ? props.initialSetlist.active : false,
-	createdBy:   props.existing ? props.initialSetlist.createdBy : user.value.id,
+const buildEntity = (slug: string): SetlistEntity => ({
+	active:      (props.existing ? props.initialSetlist.active : false) ?? false,
+	createdBy:   (props.existing ? props.initialSetlist.createdBy : user.value.id) ?? '',
 	date:        setlist.value.date,
-	isPublic:    setlist.value.isPublic == 1,
-	position:    props.existing ? props.initialSetlist.position : 0,
+	isPublic:    setlist.value.isPublic,
+	position:    (props.existing ? props.initialSetlist.position : 0) ?? 0,
 	remoteHide:  props.existing ? props.initialSetlist.remoteHide : undefined,
 	remoteLight: props.existing ? props.initialSetlist.remoteLight : undefined,
 	remoteText:  props.existing ? props.initialSetlist.remoteText : undefined,
-	sharedWith:  props.existing ? props.initialSetlist.sharedWith : [],
+	sharedWith:  (props.existing ? props.initialSetlist.sharedWith : []) ?? [],
 	slug,
 	songs:       setlist.value.songs,
 	title:       setlist.value.title,
@@ -527,13 +522,15 @@ const setSetlist = async () => {
 	// errors occured: abort
 	if (errors.value) return;
 
+	if (!setlistCollection.value) return;
 	busy.value = true;
 	const entity = buildEntity(slug);
+	const collection = setlistCollection.value;
 
 	try {
 		// new setlist should be created
 		if (!props.existing) {
-			await setlistCollection.value.createDoc(entity, slug);
+			await collection.createDoc(entity, slug);
 			router.push({ name: 'setlist-show', params: { id: slug }});
 			// toast success creation message
 			notify({
@@ -546,7 +543,8 @@ const setSetlist = async () => {
 		else if (props.id === slug) {
 			// just update the existing setlist
 			const current = setlists.value.find(s => s.entity.slug === props.id);
-			await setlistCollection.value.updateDoc(current.id, current.changeNumber, entity);
+			if (!current) return;
+			await collection.updateDoc(current.id, current.changeNumber ?? 0, entity);
 			// toast success update message
 			notify({
 				title: t('toast.setlistUpdated'),
@@ -556,8 +554,9 @@ const setSetlist = async () => {
 		} else {
 			// update key by adding a new setlist and removing the old one
 			const current = setlists.value.find(s => s.entity.slug === props.id);
-			await setlistCollection.value.createDoc(entity, slug);
-			await setlistCollection.value.deleteDoc(current.id);
+			if (!current) return;
+			await collection.createDoc(entity, slug);
+			await collection.deleteDoc(current.id);
 			router.push({ name: 'setlist-show', params: { id: slug }});
 			// toast success update message
 			notify({
@@ -568,7 +567,7 @@ const setSetlist = async () => {
 		}
 		emit('closed');
 	} catch (err) {
-		throwError(err);
+		throwError(err as ThrowableError);
 	} finally {
 		busy.value = false;
 	}
diff --git a/frontend/src/modals/SongAssign.vue b/frontend/src/modals/SongAssign.vue
index 03254acb..c2c798a0 100644
--- a/frontend/src/modals/SongAssign.vue
+++ b/frontend/src/modals/SongAssign.vue
@@ -7,7 +7,7 @@
 		@closed="emit('closed')"
 	>
 		<div class="grow grid grid-cols-1 grid-rows-2 xs:grid-cols-2 xs:grid-rows-1 gap-4">
-			<div class="max-h-[calc(50vh_-_6rem)] xs:max-h-[calc(66.666667vh_-_8.25rem)] flex flex-col gap-4">
+			<div class="max-h-[calc(50vh-6rem)] xs:max-h-[calc(66.666667vh-8.25rem)] flex flex-col gap-4">
 				<label class="relative">
 					<icon-filter class="absolute top-2 left-2 w-5 h-5 stroke-1.5 text-blade-500" />
 					<input
@@ -70,8 +70,9 @@
 	</modal-dialog>
 </template>
 
-<script setup>
-import { ref, computed, inject, onMounted, watch } from 'vue';
+<script setup lang="ts">
+import { injectStrict, songsKey } from '@/keys';
+import { ref, computed, onMounted, watch, type PropType } from 'vue';
 import { useI18n } from 'vue-i18n';
 import ModalDialog from '@/elements/ModalDialog.vue';
 import PrimaryButton from '@/elements/PrimaryButton.vue';
@@ -88,10 +89,10 @@ import {
 const { t } = useI18n();
 
 // global properties
-const songs = inject('songs');
+const songs = injectStrict(songsKey);
 
 // user input properties
-const selectedSongs = ref([]);
+const selectedSongs = ref<string[]>([]);
 const searchInput = ref('');
 
 // inherited properties
@@ -99,7 +100,7 @@ const props = defineProps({
 	active:        Boolean, // state of modal display, true to show modal
 	language:      String,  // language key of song
 	id:            String,  // identifier of original song
-	assignedSongs: Array,   // already assigned songs
+	assignedSongs: { type: Array as PropType<string[]>, default: () => [] },   // already assigned songs
 });
 const initInput = () => {
 	selectedSongs.value = props.assignedSongs ?? [];
@@ -127,5 +128,5 @@ const filteredSongs = computed(() => {
 });
 
 // find a song's entity by id, for the selection panel
-const findSong = (id) => songs.value.find(s => s.id === id)?.entity;
+const findSong = (id: string) => songs.value.find(s => s.id === id)?.entity;
 </script>
diff --git a/frontend/src/modals/SongDelete.vue b/frontend/src/modals/SongDelete.vue
index 1fbf69eb..d46dbb19 100644
--- a/frontend/src/modals/SongDelete.vue
+++ b/frontend/src/modals/SongDelete.vue
@@ -25,10 +25,12 @@
 	</modal-dialog>
 </template>
 
-<script setup>
-import { inject, ref } from 'vue';
+<script setup lang="ts">
+import { injectStrict, songsCollectionKey, songsKey } from '@/keys';
+import { ref } from 'vue';
 import { notify } from '@kyvg/vue3-notification';
 import { throwError, updateSongTranslations } from '@/utils.js';
+import type { ThrowableError } from '@/definitions';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router'
 import ModalDialog from '@/elements/ModalDialog.vue';
@@ -46,8 +48,8 @@ const route = useRoute()
 const router = useRouter()
 
 // global properties
-const songs = inject('songs');
-const songsCollection = inject('songsCollection');
+const songs = injectStrict(songsKey);
+const songsCollection = injectStrict(songsCollectionKey);
 
 // component properties
 const props = defineProps({
@@ -65,16 +67,18 @@ const emit = defineEmits(['closed']);
 // execute song deletion
 const busy = ref(false);
 const deleteSong = async () => {
+	if (!props.id || !songsCollection.value) return;
+	const id = props.id;
 	busy.value = true;
 	try {
-		await songsCollection.value.deleteDoc(props.id);
+		await songsCollection.value.deleteDoc(id);
 		emit('closed');
 
 		// remove back-references from any song that lists this one as a translation
-		const affected = songs.value.filter(s => s.entity.translations?.includes(props.id));
+		const affected = songs.value.filter(s => s.entity.translations?.includes(id));
 		await Promise.allSettled(
 			affected.map(s =>
-				updateSongTranslations(songsCollection.value, songs.value, s.id, (arr) => arr.filter(t => t !== props.id))
+				updateSongTranslations(songsCollection.value!, songs.value, s.id, (arr) => arr.filter(t => t !== id))
 			)
 		);
 
@@ -89,7 +93,7 @@ const deleteSong = async () => {
 			type: 'primary'
 		});
 	} catch (err) {
-		throwError(err);
+		throwError(err as ThrowableError);
 	} finally {
 		busy.value = false;
 	}
diff --git a/frontend/src/modals/SongPresent.vue b/frontend/src/modals/SongPresent.vue
index 4dab566e..58b0a621 100644
--- a/frontend/src/modals/SongPresent.vue
+++ b/frontend/src/modals/SongPresent.vue
@@ -19,13 +19,6 @@
 			/>
 			<!-- toolbar -->
 			<div class="fixed bottom-2 right-2 flex gap-2">
-				<secondary-button
-					:disabled="!song.note"
-					:title="tooltip('info')"
-					@click="song.note ? showModal.infosongdata = true : null"
-				>
-					<icon-info-circle class="w-5 h-5 stroke-1.5" :class="{ 'stroke-spring-400': showModal.infosongdata }" />
-				</secondary-button>
 				<secondary-button
 					:title="tooltip('lightMode')"
 					@click.prevent="dark = !dark"
@@ -49,27 +42,21 @@
 			</div>
 		</div>
 	</modal-dialog>
-	<!-- modal: info song note -->
-	<info-song-data
-		:active="showModal.infosongdata"
-		:song="song"
-		@closed="showModal.infosongdata = false"
-	/>
 </template>
 
-<script setup>
-import { reactive, ref, watch, onMounted, onUnmounted, nextTick, inject } from 'vue';
+<script setup lang="ts">
+import { injectStrict, hkCancelKey, hkThemeKey } from '@/keys';
+import { ref, watch, onMounted, onUnmounted, nextTick, type PropType } from 'vue';
 import { whenever } from '@vueuse/core';
 import { useI18n } from 'vue-i18n';
-import InfoSongData from '@/modals/InfoSongData.vue';
 import ModalDialog from '@/elements/ModalDialog.vue';
 import SecondaryButton from '@/elements/SecondaryButton.vue';
 import SongContent from '@/partials/SongContent.vue';
+import type { SongEntity } from '@backend/models';
 
 // icons
 import {
 	IconBrightness,
-	IconInfoCircle,
 	IconMusic,
 	IconMusicOff,
 	IconX,
@@ -79,29 +66,23 @@ import {
 const { t } = useI18n();
 
 // handle hotkeys for this component
-const hkInfo = inject('hkInfo');
-const hkTheme = inject('hkTheme');
-const hkCancel = inject('hkCancel');
+const hkTheme = injectStrict(hkThemeKey);
+const hkCancel = injectStrict(hkCancelKey);
 
 // inherited properties
 const props = defineProps({
 	active:     Boolean, // state of modal display, true to show modal
 	chords:     Boolean, // true if chords shall be rendered
-	song:       Object,  // single song to present
+	song:       Object as PropType<SongEntity>,  // single song to present
 	keyOffset:  Number,  // semitone offset from the song's base key to present it in
 });
 
-// reactive data
-const showModal = reactive({
-	infosongdata: false
-});
-
 // manual theme selection
 const dark = ref(true);
 
 // timeouts for resize debouncing
-const resizeTimeout = ref(null);
-const songContentRef = ref(null);
+const resizeTimeout = ref<ReturnType<typeof setTimeout>>();
+const songContentRef = ref<InstanceType<typeof SongContent>>();
 
 // emits
 const emit = defineEmits(['chords', 'closed']);
@@ -122,12 +103,8 @@ const resizeHandler = () => {
 	}, 500);
 };
 // handle tooltips
-const tooltip = (target) => {
+const tooltip = (target: string) => {
 	switch (target) {
-		case 'info':
-			return props.song.note
-				? t('tooltip.infoSongData') + '\n' + t('key.ctrl') + ' + ' + t('key.I')
-				: t('tooltip.noSongInfo');
 		case 'lightMode':
 			return t('tooltip.invertColors') + '\n' + t('key.ctrl') + ' + ' + t('key.L');
 		case 'chords':
@@ -155,10 +132,6 @@ onUnmounted(() => {
 });
 
 // component shortcuts
-whenever(
-	hkInfo,
-	() => props.song.note ? showModal.infosongdata = !showModal.infosongdata : null
-);
 whenever(
 	hkTheme,
 	() => dark.value = !dark.value
diff --git a/frontend/src/modals/SongSet.vue b/frontend/src/modals/SongSet.vue
index 73cd6ef0..8b3c30e4 100644
--- a/frontend/src/modals/SongSet.vue
+++ b/frontend/src/modals/SongSet.vue
@@ -13,11 +13,11 @@
 					<input
 						type="text"
 						v-model="song.title"
-						:class="{ 'border-rose-600!': (error.title & !song.title) || error.slug }"
+						:class="{ 'border-rose-600!': (error.title && !song.title) || error.slug }"
 						:placeholder="t('placeholder.exampleSongTitle')"
 						:disabled="existing"
 					/>
-					<div v-if="error.title & !song.title" class="text-rose-600">
+					<div v-if="error.title && !song.title" class="text-rose-600">
 						{{ t('error.requiredTitle') }}
 					</div>
 					<div v-if="error.slug" class="text-rose-600">
@@ -37,13 +37,13 @@
 					<!-- language -->
 					<label class="flex flex-col gap-1">
 						<div>{{ t('field.language') }} <span class="text-rose-600">*</span></div>
-						<select v-model="song.language" :class="{ 'border-rose-600!': error.language & !song.language }">
+						<select v-model="song.language" :class="{ 'border-rose-600!': error.language && !song.language }">
 							<option value="">{{ t('placeholder.select') }}</option>
 							<option v-for="l in languages" :value="l" :key="l">
 								{{ t('language.' + l) }}
 							</option>
 						</select>
-						<div v-if="error.language & !song.language" class="text-rose-600">
+						<div v-if="error.language && !song.language" class="text-rose-600">
 							{{ t('error.requiredLanguage') }}
 						</div>
 					</label>
@@ -88,7 +88,8 @@
 						<div>{{ t('field.year') }}</div>
 						<input
 							type="number"
-							v-model="song.year"
+							:value="song.year"
+							@input="e => song.year = parseNumberInput((e.target as HTMLInputElement).value)"
 							:placeholder="t('placeholder.exampleSongYear')"
 						>
 					</label>
@@ -111,7 +112,8 @@
 						</div>
 						<input
 							type="number"
-							v-model="song.ccli"
+							:value="song.ccli"
+							@input="e => song.ccli = parseNumberInput((e.target as HTMLInputElement).value)"
 							:placeholder="t('placeholder.exampleSongCcli')"
 						>
 					</label>
@@ -173,12 +175,12 @@
 				<prism-editor
 					id="song-content"
 					class="font-mono text-sm leading-4 p-1.5"
-					:class="{ 'border-rose-600!': error.content & !song.content }"
+					:class="{ 'border-rose-600!': error.content && !song.content }"
 					v-model="song.content"
 					:highlight="sdHighlight"
 					:placeholder="t('placeholder.exampleSongContent')"
 				></prism-editor>
-				<div v-if="error.content & !song.content" class="text-rose-600">
+				<div v-if="error.content && !song.content" class="text-rose-600">
 					{{ t('error.requiredContent') }}
 				</div>
 			</div>
@@ -222,15 +224,18 @@
 	/>
 </template>
 
-<script setup>
+<script setup lang="ts">
+import { injectStrict, setlistCollectionKey, setlistsKey, songsCollectionKey, songsKey, userKey } from '@/keys';
 import 'vue-prism-editor/dist/prismeditor.min.css';
-import { keyScale, sdHighlight, throwError, urlify, updateSongTranslations } from '@/utils.js';
+import { keyScale, sdHighlight, throwError, urlify, updateSongTranslations, parseNumberInput } from '@/utils.js';
+import type { ThrowableError, SongFormData } from '@/definitions';
 import { notify } from '@kyvg/vue3-notification';
 import { PrismEditor } from 'vue-prism-editor';
-import { ref, reactive, computed, inject, watch, onMounted } from 'vue';
+import { ref, reactive, computed, watch, onMounted, type PropType } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { SongLanguage, SongTag as SongTagEnum } from '@backend/definitions';
+import type { SongEntity, Setlist } from '@backend/models';
 import InfoSongSyntax from '@/modals/InfoSongSyntax.vue';
 import ModalDialog from '@/elements/ModalDialog.vue';
 import PrimaryButton from '@/elements/PrimaryButton.vue';
@@ -255,18 +260,18 @@ const { t } = useI18n();
 const router = useRouter();
 
 // global properties
-const songs = inject('songs');
-const setlists = inject('setlists');
-const user = inject('user');
-const songsCollection = inject('songsCollection');
-const setlistCollection = inject('setlistCollection');
+const songs = injectStrict(songsKey);
+const setlists = injectStrict(setlistsKey);
+const user = injectStrict(userKey);
+const songsCollection = injectStrict(songsCollectionKey);
+const setlistCollection = injectStrict(setlistCollectionKey);
 
 // component properties
 const props = defineProps({
 	active:      Boolean, // state of modal display, true to show modal
 	existing:    Boolean, // song already exists
 	id:          String,  // song identifier
-	initialSong: Object,  // song structure to fill with data
+	initialSong: { type: Object as PropType<SongFormData>, required: true },  // song structure to fill with data
 });
 
 // list of all available languages and tags
@@ -274,7 +279,7 @@ const languages = Object.values(SongLanguage);
 const tags = Object.values(SongTagEnum);
 
 // find a song's entity by id, for translation display
-const findSong = (id) => songs.value.find(s => s.id === id)?.entity;
+const findSong = (id: string) => songs.value.find(s => s.id === id)?.entity;
 
 // check if form errors occured
 const error = reactive({
@@ -287,15 +292,13 @@ const errors = computed(() => {
 	return (error.title || error.language || error.content || error.slug);
 });
 const resetErrors = () => {
-	for (const key in error) {
-		if (Object.hasOwnProperty.call(error, key)) {
-			error[key] = false;
-		}
+	for (const key of Object.keys(error) as (keyof typeof error)[]) {
+		error[key] = false;
 	}
 };
 
 // song input data
-const song = ref({});
+const song = ref<SongFormData>({...props.initialSong});
 const initInput = () => {
 	resetErrors();
 	song.value = {...props.initialSong};
@@ -322,13 +325,13 @@ const showModal = reactive({
 const emit = defineEmits(['closed']);
 
 // assign selected tags to song
-const assignTags = (tags) => {
+const assignTags = (tags: string[]) => {
 	song.value.tags = tags;
 	showModal.tags = false;
 };
 
 // assign selected tags to song
-const assignTranslations = (translations) => {
+const assignTranslations = (translations: string[]) => {
 	song.value.translations = translations;
 	showModal.translations = false;
 };
@@ -339,11 +342,11 @@ const createSlug = () => {
 };
 
 // build the entity payload to send to Amberbase
-const buildEntity = (slug) => ({
+const buildEntity = (slug: string): SongEntity => ({
 	authors:      song.value.authors ?? [],
-	ccli:         song.value.ccli ? parseInt(song.value.ccli) : undefined,
+	ccli:         song.value.ccli,
 	content:      song.value.content,
-	createdBy:    props.existing ? props.initialSong.createdBy : user.value.id,
+	createdBy:    (props.existing ? props.initialSong.createdBy : user.value.id) ?? '',
 	key:          song.value.key || undefined,
 	language:     song.value.language,
 	publisher:    song.value.publisher,
@@ -352,13 +355,13 @@ const buildEntity = (slug) => ({
 	tags:         song.value.tags ?? [],
 	title:        song.value.title,
 	translations: song.value.translations ?? [],
-	year:         song.value.year ? parseInt(song.value.year) : undefined,
+	year:         song.value.year,
 	youtube:      song.value.youtube || undefined,
 });
 
 // overwrite one setlist's songs list, renaming one song id to another
-const renameSongInSetlist = async (setlistEntry, oldId, newId) => {
-	await setlistCollection.value.updateDoc(setlistEntry.id, setlistEntry.changeNumber, {
+const renameSongInSetlist = async (setlistEntry: Setlist, oldId: string, newId: string) => {
+	await setlistCollection.value?.updateDoc(setlistEntry.id, setlistEntry.changeNumber ?? 0, {
 		...setlistEntry.entity,
 		songs: setlistEntry.entity.songs.map(s => (s.id === oldId ? { ...s, id: newId } : s)),
 	});
@@ -376,17 +379,19 @@ const setSong = async () => {
 	// errors occured: abort
 	if (errors.value) return;
 
+	if (!songsCollection.value) return;
 	busy.value = true;
 	const entity = buildEntity(slug);
+	const collection = songsCollection.value;
 
 	try {
 		// new song should be created
 		if (!props.existing) {
-			await songsCollection.value.createDoc(entity, slug);
+			await collection.createDoc(entity, slug);
 			// persist translation back-references
 			await Promise.allSettled(
 				entity.translations.map(id =>
-					updateSongTranslations(songsCollection.value, songs.value, id, (arr) => (arr.includes(slug) ? arr : [...arr, slug]))
+					updateSongTranslations(collection, songs.value, id, (arr) => (arr.includes(slug) ? arr : [...arr, slug]))
 				)
 			);
 			router.push({ name: 'song-show', params: { id: slug }});
@@ -402,13 +407,13 @@ const setSong = async () => {
 		else if (props.id === slug) {
 			// key remained (no title or language changes): just update the existing song
 			const current = songs.value.find(s => s.id === props.id);
-			await songsCollection.value.updateDoc(props.id, current.changeNumber, entity);
+			await collection.updateDoc(props.id!, current?.changeNumber ?? 0, entity);
 			// persist translation references by removing and adding them
 			const removedIds = props.initialSong.translations.filter(t => !entity.translations.includes(t));
 			const addedIds   = entity.translations.filter(t => !props.initialSong.translations.includes(t));
 			await Promise.allSettled([
-				...removedIds.map(id => updateSongTranslations(songsCollection.value, songs.value, id, (arr) => arr.filter(t => t !== slug))),
-				...addedIds.map(id   => updateSongTranslations(songsCollection.value, songs.value, id, (arr) => (arr.includes(slug) ? arr : [...arr, slug]))),
+				...removedIds.map(id => updateSongTranslations(collection, songs.value, id, (arr) => arr.filter(t => t !== slug))),
+				...addedIds.map(id   => updateSongTranslations(collection, songs.value, id, (arr) => (arr.includes(slug) ? arr : [...arr, slug]))),
 			]);
 			// toast success update message
 			notify({
@@ -420,11 +425,11 @@ const setSong = async () => {
 		}
 		// key changed: add a new song, remove the old one and update references in other fields
 		else {
-			const oldId = props.id;
+			const oldId = props.id!;
 			const newId = slug;
 
-			await songsCollection.value.createDoc(entity, newId);
-			await songsCollection.value.deleteDoc(oldId);
+			await collection.createDoc(entity, newId);
+			await collection.deleteDoc(oldId);
 
 			// persist translation references by removing and adding them
 			const removedIds = props.initialSong.translations.filter(t => !entity.translations.includes(t));
@@ -443,9 +448,9 @@ const setSong = async () => {
 			const affectedSetlists = setlists.value.filter(sl => sl.entity.songs?.some(ss => ss.id === oldId));
 
 			await Promise.allSettled([
-				...renameTargets.map(id => updateSongTranslations(songsCollection.value, songs.value, id, (arr) => arr.map(t => (t === oldId ? newId : t)))),
-				...removedIds.map(id   => updateSongTranslations(songsCollection.value, songs.value, id, (arr) => arr.filter(t => t !== oldId && t !== newId))),
-				...addedIds.map(id     => updateSongTranslations(songsCollection.value, songs.value, id, (arr) => (arr.includes(newId) ? arr : [...arr, newId]))),
+				...renameTargets.map(id => updateSongTranslations(collection, songs.value, id, (arr) => arr.map(t => (t === oldId ? newId : t)))),
+				...removedIds.map(id   => updateSongTranslations(collection, songs.value, id, (arr) => arr.filter(t => t !== oldId && t !== newId))),
+				...addedIds.map(id     => updateSongTranslations(collection, songs.value, id, (arr) => (arr.includes(newId) ? arr : [...arr, newId]))),
 				...affectedSetlists.map(sl => renameSongInSetlist(sl, oldId, newId)),
 			]);
 
@@ -459,7 +464,7 @@ const setSong = async () => {
 			emit('closed');
 		}
 	} catch (err) {
-		throwError(err);
+		throwError(err as ThrowableError);
 	} finally {
 		busy.value = false;
 	}
diff --git a/frontend/src/modals/TagAssign.vue b/frontend/src/modals/TagAssign.vue
index 5f859990..f1af5f7c 100644
--- a/frontend/src/modals/TagAssign.vue
+++ b/frontend/src/modals/TagAssign.vue
@@ -7,7 +7,7 @@
 		@closed="emit('closed')"
 	>
 		<div class="grow grid grid-cols-1 grid-rows-2 xs:grid-cols-2 xs:grid-rows-1 gap-4">
-			<div class="max-h-[calc(50vh_-_6rem)] xs:max-h-[calc(66.666667vh_-_8.25rem)] flex flex-col gap-4">
+			<div class="max-h-[calc(50vh-6rem)] xs:max-h-[calc(66.666667vh-8.25rem)] flex flex-col gap-4">
 				<label class="relative">
 					<icon-filter class="absolute top-2 left-2 w-5 h-5 stroke-1.5 text-blade-500" />
 					<input
@@ -62,8 +62,8 @@
 	</modal-dialog>
 </template>
 
-<script setup>
-import { ref, computed, watch, onMounted } from 'vue';
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, type PropType } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { sortTags } from '@/utils.js';
 import ModalDialog from '@/elements/ModalDialog.vue';
@@ -83,14 +83,14 @@ const { t, locale } = useI18n();
 const loc = locale.value.substring(0, 2);
 
 // user input properties
-const selectedTags = ref([]);
+const selectedTags = ref<string[]>([]);
 const searchInput = ref('');
 
 // inherited properties
 const props = defineProps({
 	active:       Boolean, // state of modal display, true to show modal
-	tags:         Object,  // list of all available tags
-	assignedTags: Array,   // already assigned tags
+	tags:         { type: Array as PropType<string[]>, default: () => [] },  // list of all available tags
+	assignedTags: { type: Array as PropType<string[]>, default: () => [] },  // already assigned tags
 });
 const initInput = () => {
 	selectedTags.value = props.assignedTags ?? [];
diff --git a/frontend/src/partials/LoginForm.vue b/frontend/src/partials/LoginForm.vue
index 0203da47..cfab2f38 100644
--- a/frontend/src/partials/LoginForm.vue
+++ b/frontend/src/partials/LoginForm.vue
@@ -49,9 +49,10 @@
 	</div>
 </template>
 
-<script setup>
+<script setup lang="ts">
+import { injectStrict, hkGoKey, noActiveModalKey } from '@/keys';
 import { logicAnd } from '@vueuse/math';
-import { inject, reactive, computed } from 'vue';
+import { reactive, computed } from 'vue';
 import { whenever } from '@vueuse/core';
 import { useI18n } from 'vue-i18n';
 import Logo from '@/partials/Logo.vue';
@@ -66,7 +67,7 @@ const { t } = useI18n();
 const adminEmail = import.meta.env.VITE_ADMIN_EMAIL;
 
 // prefilled mailto links to request an invitation or a password reset
-const mailto = (subject, body) => `mailto:${adminEmail}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
+const mailto = (subject: string, body: string) => `mailto:${adminEmail}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
 const inviteMailto = computed(() => mailto(t('text.inviteMailSubject'), t('text.inviteMailBody')));
 const resetMailto = computed(() => mailto(t('text.resetMailSubject'), t('text.resetMailBody')));
 
@@ -79,9 +80,9 @@ defineProps({
 })
 
 // input data
-const email = defineModel('email');
-const password = defineModel('password');
-const stayLoggedIn = defineModel('stayLoggedIn');
+const email = defineModel<string>('email');
+const password = defineModel<string>('password');
+const stayLoggedIn = defineModel<boolean>('stayLoggedIn');
 
 // check if form errors occured
 const error = reactive({
@@ -101,7 +102,7 @@ const signIn = () => {
 };
 
 // component shortcuts
-const hkGo = inject('hkGo');
-const noActiveModal = inject('noActiveModal');
+const hkGo = injectStrict(hkGoKey);
+const noActiveModal = injectStrict(noActiveModalKey);
 whenever(logicAnd(hkGo, noActiveModal), () => signIn());
 </script>
diff --git a/frontend/src/partials/Logo.vue b/frontend/src/partials/Logo.vue
index 86328047..25e8d789 100644
--- a/frontend/src/partials/Logo.vue
+++ b/frontend/src/partials/Logo.vue
@@ -23,13 +23,13 @@
   </div>
 </template>
 
-<script setup>
-import { inject } from 'vue';
+<script setup lang="ts">
+import { injectStrict, versionKey } from '@/keys';
 import { useI18n } from 'vue-i18n';
 
 // component constants
 const { t } = useI18n();
-const version = inject('version');
+const version = injectStrict(versionKey);
 
 // component properties
 defineProps({
diff --git a/frontend/src/partials/ResetPassword.vue b/frontend/src/partials/ResetPassword.vue
index 5dd799e1..e2c3444e 100644
--- a/frontend/src/partials/ResetPassword.vue
+++ b/frontend/src/partials/ResetPassword.vue
@@ -62,9 +62,10 @@
 	</div>
 </template>
 
-<script setup>
+<script setup lang="ts">
+import { injectStrict, clientKey } from '@/keys';
 import { notify } from '@kyvg/vue3-notification';
-import { inject, reactive, ref } from 'vue';
+import { reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 import { randomString } from '@/utils.js';
@@ -83,9 +84,9 @@ import {
 const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
-const client = inject('client');
+const client = injectStrict(clientKey);
 const examplePassword = randomString(8);
-const token = route.query.token;
+const token = typeof route.query.token === 'string' ? route.query.token : '';
 
 // input data
 const password = ref('');
@@ -108,7 +109,7 @@ const submit = async () => {
 	error.missing = password.value === '';
 	error.mismatch = password.value !== repeat.value;
 	error.tooshort = password.value.length < 8;
-	if (error.missing || error.mismatch || error.tooshort) return;
+	if (error.missing || error.mismatch || error.tooshort || !client.value) return;
 
 	busy.value = true;
 	const success = await client.value.loginManager.getAmberUserApi().changePasswordWithToken(token, password.value);
diff --git a/frontend/src/partials/SongContent.vue b/frontend/src/partials/SongContent.vue
index 57b8a768..29bb1bd6 100644
--- a/frontend/src/partials/SongContent.vue
+++ b/frontend/src/partials/SongContent.vue
@@ -13,10 +13,10 @@
 		>
 			<pre
 				v-for="(part, j) in parts" :key="j"
-				:part="part.number"
+				:part="String(part.number)"
 				class="relative overflow-visible"
 				:class="{
-					'relative before:absolute before:top-1 before:font-fira before:font-light before:content-[attr(part)] before:w-12 before:-left-6 before:text-right': part.class === 'verse' && part.number > 0,
+					'relative before:absolute before:top-1 before:font-fira before:font-light before:content-[attr(part)] before:w-12 before:-left-6 before:text-right': part.class === 'verse' && Number(part.number) > 0,
 					'font-fira text-2xl': !chords,
 					'pl-8 before:text-4xl': !presentation,
 					'inline-block leading-[1.4] pl-6 md:pl-8 before:text-3xl md:before:text-4xl before:-left-8 md:before:-left-6': presentation,
@@ -30,13 +30,13 @@
 	</div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { isChordLine, parsedContent } from '@/utils.js';
 
 const props = defineProps({
-	content:      String,  // actual song content to display
+	content:      { type: String, default: '' },  // actual song content to display
 	chords:       Boolean, // true if chords shall be rendered
-	keyOffset:    Number,  // semitone offset from the song's base key to present it in
+	keyOffset:    { type: Number, default: 0 },  // semitone offset from the song's base key to present it in
 	presentation: Boolean, // flag if song is displayed in presentation mode
 });
 
@@ -47,10 +47,10 @@ const maximizeFontsize = () => {
 	const HEIGHT_MARGIN = 30;
 	const MAX_FONTSIZE  = 48;
 	// all parent elements
-	for (let a of document.querySelectorAll('.present')) {
+	for (let a of document.querySelectorAll<HTMLElement>('.present')) {
 		// all child elements
-		for (let b of a.querySelectorAll('pre')) {
-			let fontSize = parseInt(getComputedStyle(b).fontSize.match(/\d+/)[0]);
+		for (let b of a.querySelectorAll<HTMLElement>('pre')) {
+			let fontSize = parseInt(getComputedStyle(b).fontSize.match(/\d+/)![0]);
 			// increase font size as long as the child is still smaller than parent and not greater than max fontsize
 			let n1 = 100; // max of 100 iterations for performance reasons
 			while (b.offsetWidth < a.offsetWidth - WIDTH_MARGIN && n1 > 0 && fontSize <= MAX_FONTSIZE) {
@@ -68,12 +68,12 @@ const maximizeFontsize = () => {
 	// decrease font size of parts with greatest font size first if it doesnt fit into viewport height
 	let vh = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 85;
 	// handle both columns
-	for (let c of document.querySelectorAll('.present')) {
-		let parts = [];
-		for (let d of c.querySelectorAll('pre')) {
+	for (let c of document.querySelectorAll<HTMLElement>('.present')) {
+		let parts: { part: HTMLElement, size: number, height: number }[] = [];
+		for (let d of c.querySelectorAll<HTMLElement>('pre')) {
 			parts.push({
 				part: d,
-				size: parseInt(getComputedStyle(d).fontSize.match(/\d+/)[0]),
+				size: parseInt(getComputedStyle(d).fontSize.match(/\d+/)![0]),
 				height: d.offsetHeight + HEIGHT_MARGIN
 			});
 		}
@@ -84,7 +84,7 @@ const maximizeFontsize = () => {
 			parts.sort((a, b) => b.size - a.size);
 			if (parts.length > 0) {
 				parts[0].part.style.fontSize = (parts[0].size - 3) + 'px';
-				parts[0].size = parseInt(getComputedStyle(parts[0].part).fontSize.match(/\d+/)[0]);
+				parts[0].size = parseInt(getComputedStyle(parts[0].part).fontSize.match(/\d+/)![0]);
 				parts[0].height = parts[0].part.offsetHeight + HEIGHT_MARGIN;
 			}
 			n--;
diff --git a/frontend/src/partials/SongFooter.vue b/frontend/src/partials/SongFooter.vue
index dd71b2ed..4e3c6368 100644
--- a/frontend/src/partials/SongFooter.vue
+++ b/frontend/src/partials/SongFooter.vue
@@ -38,15 +38,15 @@
 		<div v-if="song.year || song.publisher" class="text-sm text-blade-500">
 			&copy; {{ song.year }} {{ song.publisher }}
 		</div>
-		<div v-if="song.note">{{ song.note }}</div>
 	</footer>
 </template>
 
-<script setup>
-import { computed } from 'vue';
+<script setup lang="ts">
+import { computed, type PropType } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { sortTags } from '@/utils.js';
 import SongTag from '@/elements/SongTag.vue';
+import type { SongEntity } from '@backend/models';
 
 // icons
 import {
@@ -60,9 +60,9 @@ const loc = locale.value.substring(0, 2);
 
 // component properties
 const props = defineProps({
-	song: Object,
+	song: Object as PropType<SongEntity>,
 });
 
 // sort tag list
-const sortedTags = computed(() => sortTags(props.song.tags, loc));
+const sortedTags = computed(() => sortTags(props.song?.tags ?? [], loc));
 </script>
diff --git a/frontend/src/router.js b/frontend/src/router.ts
similarity index 100%
rename from frontend/src/router.js
rename to frontend/src/router.ts
diff --git a/frontend/src/utils.js b/frontend/src/utils.ts
similarity index 77%
rename from frontend/src/utils.js
rename to frontend/src/utils.ts
index d1554b0b..1f315403 100644
--- a/frontend/src/utils.js
+++ b/frontend/src/utils.ts
@@ -1,46 +1,28 @@
 import { notify } from '@kyvg/vue3-notification';
+import type { AmberCollection } from 'amber-client';
+import type { Song, SongEntity } from '@backend/models';
+import type { SongPart, ThrowableError } from '@/definitions';
 import de from '@/locales/de.json';
 import en from '@/locales/en.json';
 
 // tag translations per locale, keyed by locale code
-const tagTranslations = { de: de.tag, en: en.tag };
+const tagTranslations: Record<string, Record<string, string>> = { de: de.tag, en: en.tag };
 
 // scale to use for song tuning and transponation
 const keyScale = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'B', 'H'];
 
-/*
-  user roles and permissions: Administrator, Editor, Performer and Reader
-   A E P R                                              
-  ------------------------------------------------------
-   x x x x  see dashboard, song list and setlist list   
-   x x x x  see single songs (present, tune, export)    
-   x x x x  see single setlists (present, copy, export) 
-   x x x    create and edit setlists                    
-   x x x    custom song tuning in setlists              
-   x x x    synchronize setlists                        
-   x x      create and edit songs                       
-   x x      delete songs and setlists                   
-   x        create, edit and delete song tags           
-   x        create, edit and delete song languages      
-   x        create, edit and delete users               
-*/
-const userRoles = {
-  reader:    1,
-  performer: 2,
-  editor:    3,
-  admin:     4,
-};
-
 // identify chord lines
-const isChordLine = (line) => {
+const isChordLine = (line: string): boolean => {
 	if (line.trim() == '') return false;
 	return line.slice(-2) === '  ';
 };
 
 // parse song content syntax
-const parsedContent = (content, keyOffset, showChords, twoColumns) => {
+function parsedContent(content: string, keyOffset: number, showChords: boolean, twoColumns: false): SongPart[];
+function parsedContent(content: string, keyOffset: number, showChords: boolean, twoColumns: true): [SongPart[], SongPart[]];
+function parsedContent(content: string, keyOffset: number, showChords: boolean, twoColumns: boolean): SongPart[] | [SongPart[], SongPart[]] {
   // initialize arrays for parsed lines, classes of parts, type abbr., numbers of type and part index
-  var parsed = [], classes = [], types = [], numbers = [], part = 0;
+  var parsed: string[][] = [], classes: string[] = [], types: string[] = [], numbers: (number | string)[] = [], part = 0;
   var lines = content.split('\n');
   // check every single line of song content
   for (var i = 0; i < lines.length; i++) {
@@ -159,7 +141,7 @@ const parsedContent = (content, keyOffset, showChords, twoColumns) => {
       part++;
     }
   }
-  var newContent = [];
+  var newContent: SongPart[] = [];
   // if multiple parts: rejoin lines of every part
   if (parsed.length > 1) {
     for (var p = 1; p < parsed.length; p++) {
@@ -193,12 +175,12 @@ const parsedContent = (content, keyOffset, showChords, twoColumns) => {
 };
 
 // file download
-const download = (data, filename, isBlob = false) => {
+const download = (data: string | Blob, filename: string, isBlob = false): void => {
   var a = document.createElement('a');
-  var file = isBlob ? data : new Blob([data], { type:'text/plain;charset=UTF-8' });
+  var file = isBlob ? data as Blob : new Blob([data as string], { type:'text/plain;charset=UTF-8' });
   // IE10+
-  if (window.navigator.msSaveOrOpenBlob) {
-    window.navigator.msSaveOrOpenBlob(file, filename);
+  if ((window.navigator as Navigator & { msSaveOrOpenBlob?: (blob: Blob, filename: string) => void }).msSaveOrOpenBlob) {
+    (window.navigator as Navigator & { msSaveOrOpenBlob?: (blob: Blob, filename: string) => void }).msSaveOrOpenBlob!(file, filename);
   }
   // other browsers
   else {
@@ -215,9 +197,9 @@ const download = (data, filename, isBlob = false) => {
 };
 
 // format human readable date
-const humanDate = (d, locale, showWeekdate=true, short=false) => {
+const humanDate = (d: string | Date | null | undefined, locale: string, showWeekdate = true, short = false): string => {
   if (!d) return '';
-  let options = showWeekdate
+  let options: Intl.DateTimeFormatOptions = showWeekdate
     ? { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
     : { year: short ? '2-digit' : 'numeric', month: short ? 'numeric' : 'long', day: 'numeric' };
   return (new Date(d)).toLocaleDateString(locale, options);
@@ -225,13 +207,13 @@ const humanDate = (d, locale, showWeekdate=true, short=false) => {
 
 // format human readable file sizes
 // https://stackoverflow.com/questions/10420352/converting-file-size-in-bytes-to-human-readable-string#14919494
-const humanFileSize = (bytes, si=false, dp=1) => {
+const humanFileSize = (bytes: number, si = false, dp = 1): string => {
   const thresh = si ? 1000 : 1024;
   if (Math.abs(bytes) < thresh) {
     return bytes + ' B';
   }
-  const units = si 
-    ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] 
+  const units = si
+    ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
     : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
   let u = -1;
   const r = 10**dp;
@@ -243,8 +225,8 @@ const humanFileSize = (bytes, si=false, dp=1) => {
 };
 
 // highlight given text in SongDrive syntax highlighting
-const sdHighlight = (code) => {
-  let parsedCode = [];
+const sdHighlight = (code: string): string => {
+  let parsedCode: string[] = [];
   code.split('\n').forEach(line => {
     // check for marker
     if (line.substring(0,2) === '--') {
@@ -263,14 +245,14 @@ const sdHighlight = (code) => {
 };
 
 // calculate initials for given user name
-const initials = (userName) => {
+const initials = (userName?: string): string => {
   return userName
     ? userName.trim().split(' ', 2).reduce((p, c) => p + c.charAt(0), '').toUpperCase()
     : ''
 };
 
 // toast error message
-const throwError = (error) => {
+const throwError = (error: ThrowableError): void => {
   notify({
     title: error.code ?? error.errorCode,
     text: error.message ?? error.error,
@@ -279,23 +261,24 @@ const throwError = (error) => {
 };
 
 // calculate random string e.g. as example password
-const randomString = (length) => {
-  let pass = '', rdm62;
-  while (length--) {
-   // Generate random integer between 0 and 61, 0|x works for Math.floor(x) in this case 
-   rdm62 = 0 | Math.random() * 62; 
+const randomString = (length: number): string => {
+  let pass = '';
+  const bytes = new Uint8Array(length);
+  crypto.getRandomValues(bytes);
+  for (const byte of bytes) {
    // Map to ascii codes: 0-9 to 48-57 (0-9), 10-35 to 65-90 (A-Z), 36-61 to 97-122 (a-z)
-   pass += String.fromCharCode(rdm62 + (rdm62 < 10 ? 48 : rdm62 < 36 ? 55 : 61)) 
+   const rdm62 = byte % 62;
+   pass += String.fromCharCode(rdm62 + (rdm62 < 10 ? 48 : rdm62 < 36 ? 55 : 61))
   }
   return pass;
 };
 
 // make a given string url friendly
-const urlify = (s) => {
+const urlify = (s: string): string => {
   return s.trim().toLowerCase()
     .replace(/\s/g, '-')
     .replace(/\//g, '-')
-    .replace(/\_/g, '-')
+    .replace(/_/g, '-')
     .replace(/'/g, '')
     .replace(/"/g, '')
     .replace(/,/g, '')
@@ -311,11 +294,11 @@ const urlify = (s) => {
     .replace(/³/g, '3');
 }
 
-// get the first key of given object that points to given value
-const keyByValue = (o, v) => Object.keys(o).find(k => o[k]===v);
+// parse a number <input>'s raw value, treating an empty field as unset rather than 0
+const parseNumberInput = (value: string): number | undefined => value === '' ? undefined : parseInt(value);
 
 // sort tag keys by their translated name in the given locale
-const sortTags = (tags, locale) => {
+const sortTags = (tags: string[], locale: string): string[] => {
   const translations = tagTranslations[locale];
   return tags.toSorted(
     (a, b) => (translations?.[a] ?? a).localeCompare(translations?.[b] ?? b)
@@ -323,7 +306,7 @@ const sortTags = (tags, locale) => {
 };
 
 // true if browser uses a dark color scheme
-const browserPrefersDark = () => {
+const browserPrefersDark = (): boolean => {
   return localStorage.theme === 'dark' || (
     (!('theme' in localStorage) || localStorage.theme === 'auto')
     && window.matchMedia('(prefers-color-scheme: dark)').matches
@@ -331,14 +314,23 @@ const browserPrefersDark = () => {
 };
 
 // trigger mailto
-const mailto = (address) => window.location.href = 'mailto:' + address;
+const mailto = (address: string): void => { window.location.href = 'mailto:' + address; };
+
+// vue-router route params can be a repeated segment (string[]); none of this
+// app's routes use repeatable segments, so always take the first/only value
+const firstParam = (v: string | string[] | undefined): string | undefined => Array.isArray(v) ? v[0] : v;
 
 // overwrite one target song's translations array via songsCollection,
 // preserving all its other fields (Amberbase updateDoc replaces the whole
 // document body, so the full current entity must be read and spread first)
-const updateSongTranslations = async (songsCollection, songs, targetId, transformFn) => {
+const updateSongTranslations = async (
+  songsCollection: AmberCollection<SongEntity>,
+  songs: Song[],
+  targetId: string,
+  transformFn: (translations: string[]) => string[],
+): Promise<void> => {
   const target = songs.find(s => s.id === targetId);
-  if (!target) return; // stale/unknown local reference - skip rather than throw
+  if (!target || target.changeNumber === undefined) return; // stale/unknown local reference - skip rather than throw
   await songsCollection.updateDoc(targetId, target.changeNumber, {
     ...target.entity,
     translations: transformFn(target.entity.translations ?? []),
@@ -347,7 +339,7 @@ const updateSongTranslations = async (songsCollection, songs, targetId, transfor
 
 // build OpenLyrics XML for given song
 // see https://manual.openlp.org/display_tags.html#configuring-formatting-tags
-const openLyricsXML = (song, version, translatedSong = null) => {
+const openLyricsXML = (song: SongEntity, version: string, translatedSong: SongEntity | null = null): string => {
 	const timestamp = (new Date()).toISOString().slice(0, -5);
 	const title = `<title>${song.title}</title>`;
 	const subtitle = song.subtitle ? `<title>${song.subtitle}</title>` : '';
@@ -370,7 +362,7 @@ const openLyricsXML = (song, version, translatedSong = null) => {
   const tParts = translatedSong ? parsedContent(translatedSong.content, 0, false, false) : [];
 	const lyrics = parsedContent(song.content, 0, false, false).map((p, i) => {
 		const type = p.type ? p.type.toUpperCase() : 'V';
-		const num = p.number > 0 ? p.number : '1';
+		const num = Number(p.number) > 0 ? p.number : '1';
     const tContent = (i in tParts)
       ? `<br/><br/><tag name='it'><tag name='gr'><tag name='fd'>${tParts[i].content.replace(/\n/g, "<br />")}</tag></tag></tag>`
       : '';
@@ -382,7 +374,6 @@ const openLyricsXML = (song, version, translatedSong = null) => {
 
 export {
   keyScale,
-  userRoles,
   isChordLine,
   parsedContent,
   download,
@@ -393,10 +384,11 @@ export {
   throwError,
   randomString,
   urlify,
-  keyByValue,
+  parseNumberInput,
   sortTags,
   browserPrefersDark,
   mailto,
+  firstParam,
   updateSongTranslations,
   openLyricsXML,
 }
diff --git a/frontend/src/views/Dashboard.vue b/frontend/src/views/Dashboard.vue
index 6704ecc3..aaf6b7e9 100644
--- a/frontend/src/views/Dashboard.vue
+++ b/frontend/src/views/Dashboard.vue
@@ -88,8 +88,9 @@
 	</div>
 </template>
 
-<script setup>
-import { computed, inject } from 'vue';
+<script setup lang="ts">
+import { injectStrict, setlistsKey, songsKey } from '@/keys';
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import BarChart  from '@/charts/BarChart.vue';
 import LineChart from '@/charts/LineChart.vue';
@@ -108,12 +109,12 @@ import {
 
 const { t, locale } = useI18n();
 
-const songs = inject('songs');
-const setlists = inject('setlists');
+const songs = injectStrict(songsKey);
+const setlists = injectStrict(setlistsKey);
 
 // total number of song languages
 const languagesUsed = computed(() => {
-	const languages = [];
+	const languages: string[] = [];
 	songs.value.forEach(song => {
 		if (!languages.includes(song.entity.language)) {
 			languages.push(song.entity.language);
@@ -127,7 +128,7 @@ const songsPerformed = computed(() => setlists.value.reduce((a, c) => a + c.enti
 
 // chart data providing number of setlists per year
 const setlistsPerYear = computed(() => {
-	let years = {};
+	let years: Record<string, number> = {};
 	setlists.value.forEach(setlist => {
 		let year = setlist.entity.date.slice(0, 4);
 		if (year) {
@@ -148,7 +149,7 @@ const setlistsPerYear = computed(() => {
 
 // chart data providing number of song performances per year
 const songsPerYear = computed(() => {
-	let years = {};
+	let years: Record<string, number> = {};
 	setlists.value.forEach(setlist => {
 		let year = setlist.entity.date.slice(0, 4);
 		if (year) {
@@ -167,7 +168,7 @@ const songsPerYear = computed(() => {
 });
 // chart data holding number of setlists per event weekday
 const setlistsPerWeekday = computed(() => {
-	let weekday = {};
+	let weekday: Record<string, number> = {};
 	for (let i = 0; i < getWeekDays.value.length; i++) {
 		weekday[getWeekDays.value[i]] = 0;
 	}
@@ -186,7 +187,7 @@ const setlistsPerWeekday = computed(() => {
 // generate locale weekday names
 const getWeekDays = computed(() => {
 	var d = new Date(Date.UTC(2017, 0, 2)); // start with a Monday
-	var names = [];
+	var names: string[] = [];
 	for(let i = 0; i < 7; i++) {
 		names.push(d.toLocaleDateString(locale.value, { weekday: 'long' }));
 		d.setDate(d.getDate() + 1);
diff --git a/frontend/src/views/Documentation.vue b/frontend/src/views/Documentation.vue
index 5686ce2e..4462e9e9 100644
--- a/frontend/src/views/Documentation.vue
+++ b/frontend/src/views/Documentation.vue
@@ -13,7 +13,7 @@
 			<!-- table of contents -->
 			<button
 				v-for="(t, i) in toc"
-				:key="t"
+				:key="i"
 				class="py-1 px-2 rounded-md hover:bg-blade-800 flex justify-start items-center gap-2"
 				@click="scrollTo(null, i)"
 			>
@@ -88,11 +88,13 @@
 	</div>
 </template>
 
-<script setup>
-import { computed, inject } from 'vue';
+<script setup lang="ts">
+import { injectStrict, markedKey } from '@/keys';
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import de from "@/docs/docs.de.md?raw";
 import en from "@/docs/docs.en.md?raw";
+import type { Tokens } from 'marked';
 import SecondaryButton from '@/elements/SecondaryButton.vue';
 
 // icons
@@ -112,30 +114,25 @@ const { t, locale } = useI18n();
 const loc = locale.value.substring(0, 2);
 
 // documentation contents
-const docs = { de, en };
+const docs: Record<string, string> = { de, en };
 const lang = ['de', 'en'].includes(loc) ? loc : 'en';
 
-// convert spaces to dashes
-const dashCase = (text) => {
-	return text.toLowerCase().replace(' ', '-');
-};
-
 // scroll to element of given id
-const scrollTo = (id, h2=null) => {
+const scrollTo = (id: string | null, h2: number | null = null) => {
 	if (id) {
-		document.getElementById(id).scrollIntoView({ behavior: "smooth" });
-	} else {
+		document.getElementById(id)?.scrollIntoView({ behavior: "smooth" });
+	} else if (h2 !== null) {
 		document.querySelectorAll('h2')[h2].scrollIntoView({ behavior: "smooth" });
 	}
 };
 
 // generate table of contents from h2's
 const toc = computed(
-	() => marked.lexer(docs[lang]).filter(t => t.type === 'heading' && t.depth === 2)
+	() => marked.lexer(docs[lang]).filter((t): t is Tokens.Heading => t.type === 'heading' && t.depth === 2)
 );
 
 // parse documentation markdown content with songdrive code highlight
-const marked = inject('marked');
+const marked = injectStrict(markedKey);
 const content = computed(
 	() => marked.parse(
 		docs[lang],
@@ -144,10 +141,6 @@ const content = computed(
 			pedantic: false,
 			gfm: true,
 			breaks: true,
-			sanitize: false,
-			smartLists: true,
-			smartypants: false,
-			xhtml: false
 		}
 	)
 );
diff --git a/frontend/src/views/Profile.vue b/frontend/src/views/Profile.vue
index 68fcaacd..5af9e399 100644
--- a/frontend/src/views/Profile.vue
+++ b/frontend/src/views/Profile.vue
@@ -8,7 +8,7 @@
 			<!-- Profile card -->
 			<panel-box>
 				<div class="flex flex-col justify-center items-center">
-					<user-avatar :photo-url="user.photo" :name="user.name" size="lg" />
+					<user-avatar :photo-url="user.photo ?? undefined" :name="user.name" size="lg" />
 					<div v-if="user.name" class="text-xl uppercase font-light mt-4">
 						{{ user.name }}
 					</div>
@@ -76,8 +76,8 @@
 					<label class="flex flex-col gap-1">
 						{{ t('field.colorScheme') }}
 						<select v-model="theme">
-							<option v-for="(key, label) in colorSchemes" :key="key" :value="key">
-								{{ t('option.' + label) }}
+							<option v-for="scheme in ColorScheme" :key="scheme" :value="scheme">
+								{{ t('option.' + scheme) }}
 							</option>
 						</select>
 					</label>
@@ -109,8 +109,10 @@
 	<password-change :active="showPasswordChange" @closed="showPasswordChange = false" />
 </template>
 
-<script setup>
-import { computed, inject, ref, watch } from 'vue';
+<script setup lang="ts">
+import { injectStrict, setlistsKey, userKey } from '@/keys';
+import { ColorScheme } from '@/definitions';
+import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { can } from "@backend/definitions";
@@ -137,8 +139,8 @@ const loc = locale.value.substring(0, 2);
 const router = useRouter();
 
 // component injects
-const setlists = inject('setlists');
-const user = inject('user');
+const setlists = injectStrict(setlistsKey);
+const user = injectStrict(userKey);
 
 // password change modal state
 const showPasswordChange = ref(false);
@@ -152,7 +154,7 @@ const songsFromUser = computed(() => {
 });
 
 // Handle UI language code and names
-const initLang = !('lang' in localStorage) ? loc : localStorage.getItem('lang');
+const initLang: string = !('lang' in localStorage) ? loc : (localStorage.getItem('lang') ?? loc);
 const lang = ref(initLang);
 watch(lang, (newValue) => {
 	locale.value = newValue;
@@ -160,24 +162,19 @@ watch(lang, (newValue) => {
 });
 
 // handle theme mode
-const colorSchemes = {
-	auto:  1,
-	dark:  2,
-	light: 3,
-};
-const initialTheme = !('theme' in localStorage) ? colorSchemes.auto : colorSchemes[localStorage.theme]
-const theme = ref(initialTheme);
+const initialTheme = (localStorage.getItem('theme') as ColorScheme | null) ?? ColorScheme.Auto;
+const theme = ref<ColorScheme>(initialTheme);
 watch(theme, (newValue) => {
 	switch (newValue) {
-		case colorSchemes.dark:
+		case ColorScheme.Dark:
 			localStorage.theme = 'dark';
 			document.documentElement.classList.add('dark');
 			break;
-		case colorSchemes.light:
+		case ColorScheme.Light:
 			localStorage.theme = 'light';
 			document.documentElement.classList.remove('dark');
 			break;
-		case colorSchemes.auto:
+		case ColorScheme.Auto:
 			localStorage.removeItem('theme');
 			if (!window.matchMedia('(prefers-color-scheme: dark)').matches) {
 				document.documentElement.classList.remove('dark');
diff --git a/frontend/src/views/SetlistShow.vue b/frontend/src/views/SetlistShow.vue
index 98207d35..3d63a30b 100644
--- a/frontend/src/views/SetlistShow.vue
+++ b/frontend/src/views/SetlistShow.vue
@@ -7,7 +7,7 @@
 				<div class="text-3xl uppercase font-thin tracking-wider">
 					<span class="font-semibold mr-4">{{ setlist.entity.title }}</span>
 					<span class="inline-block whitespace-nowrap">
-						{{ t('object.song', setlist.entity.songs.length, { n: setlist.entity.songs.length }) }}
+						{{ t('object.song', setlist.entity.songs.length, { named: { n: setlist.entity.songs.length } }) }}
 					</span>
 				</div>
 				<!-- setlist meta data -->
@@ -249,14 +249,14 @@
 										name: 'song-show',
 										params: {
 											id: element.id,
-											key: element.key ? element.key : findSong(element.id).key,
+											key: element.key ? element.key : findSong(element.id)!.key,
 											setlist: setlistKey,
 										}
 									})"
 								>
 									<div class="truncate">
-										<span>{{ findSong(element.id).title }}</span>
-										<span class="text-blade-500 ml-3">{{ findSong(element.id).subtitle }}</span>
+										<span>{{ findSong(element.id)!.title }}</span>
+										<span class="text-blade-500 ml-3">{{ findSong(element.id)!.subtitle }}</span>
 									</div>
 								</td>
 								<td
@@ -265,42 +265,42 @@
 										name: 'song-show',
 										params: {
 											id: element.id,
-											key: element.key ? element.key : findSong(element.id).key,
+											key: element.key ? element.key : findSong(element.id)!.key,
 											setlist: setlistKey,
 										}
 									})"
 								>
-									<div class="truncate">{{ findSong(element.id).authors?.join(' | ') ?? '' }}</div>
+									<div class="truncate">{{ findSong(element.id)!.authors?.join(' | ') ?? '' }}</div>
 								</td>
 								<td class="px-3 py-2">
 									<div class="flex justify-center items-center gap-3">
 										<secondary-button
 											v-if="canUpdateSetlist"
 											class="px-2!"
-											@click.prevent="transposeDown(findSong(element.id), index)"
+											@click.prevent="transposeDown(findSong(element.id)!, index)"
 										>
 											<icon-chevron-left class="w-5 h-5 stroke-1.5" />
 										</secondary-button>
 										<div class="font-mono font-semibold text-xl w-6 text-center">
-											{{ element.key ? element.key : findSong(element.id).key }}
+											{{ element.key ? element.key : findSong(element.id)!.key }}
 										</div>
 										<secondary-button
 											v-if="canUpdateSetlist"
 											class="px-2!"
-											@click.prevent="transposeUp(findSong(element.id), index)"
+											@click.prevent="transposeUp(findSong(element.id)!, index)"
 										>
 											<icon-chevron-right class="w-5 h-5 stroke-1.5" />
 										</secondary-button>
 									</div>
 								</td>
 								<td class="px-3 py-2 hidden xl:table-cell text-center">
-									<div class="uppercase">{{ findSong(element.id).language }}</div>
+									<div class="uppercase">{{ findSong(element.id)!.language }}</div>
 								</td>
 								<td class="px-3 py-2 hidden md:table-cell text-center">
 									<a
-										v-if="findSong(element.id).youtube"
+										v-if="findSong(element.id)!.youtube"
 										class="text-red-600 inline-flex align-middle"
-										:href="'https://youtu.be/' + findSong(element.id).youtube"
+										:href="'https://youtu.be/' + findSong(element.id)!.youtube"
 										target="_blank"
 									>
 										<icon-brand-youtube class="w-6 h-6 stroke-1.5" />
@@ -308,12 +308,12 @@
 								</td>
 								<td class="px-3 py-2 hidden md:table-cell">
 									<a
-										v-if="findSong(element.id).ccli"
+										v-if="findSong(element.id)!.ccli"
 										class="text-spring-600"
-										:href="'https://songselect.ccli.com/Songs/' + findSong(element.id).ccli"
+										:href="'https://songselect.ccli.com/Songs/' + findSong(element.id)!.ccli"
 										target="_blank"
 									>
-										{{ findSong(element.id).ccli }}
+										{{ findSong(element.id)!.ccli }}
 									</a>
 								</td>
 							</template>
@@ -459,20 +459,24 @@
 	</div>
 </template>
 
-<script setup>
-import { keyScale, parsedContent, humanDate, throwError, download, openLyricsXML } from '@/utils.js';
+<script setup lang="ts">
+import { injectStrict, hkChordsKey, hkPresentKey, hkSyncKey, noActiveModalKey, setlistCollectionKey, setlistsKey, songsKey, userKey, usersKey, versionKey } from '@/keys';
+import { keyScale, parsedContent, humanDate, throwError, download, openLyricsXML, firstParam } from '@/utils.js';
+import type { ThrowableError, SetlistSongPresentation } from '@/definitions';
 import { logicAnd } from '@vueuse/math';
 import { notify } from '@kyvg/vue3-notification';
-import { ref, reactive, computed, inject } from 'vue';
+import { ref, reactive, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 import { whenever } from '@vueuse/core';
 import { can } from '@backend/definitions';
+import type { SongEntity } from '@backend/models';
 import DoughnutChart from '@/charts/DoughnutChart.vue';
 import draggable from 'vuedraggable';
 import DropDown from '@/elements/DropDown.vue';
 import { BlobWriter, ZipWriter, TextReader } from '@zip.js/zip.js';
 import pdfMake from 'pdfmake/build/pdfmake';
+import type { Content, TDocumentDefinitions } from 'pdfmake/interfaces';
 import PrimaryButton from '@/elements/PrimaryButton.vue';
 import SecondaryButton from '@/elements/SecondaryButton.vue';
 import SetlistDelete from '@/modals/SetlistDelete.vue';
@@ -517,14 +521,14 @@ const { t, locale } = useI18n();
 const loc = locale.value.substring(0, 2);
 const route = useRoute();
 const router = useRouter();
-const setlistKey = route.params.id; // slug from the url, for lookup only
+const setlistKey = firstParam(route.params.id) ?? ''; // slug from the url, for lookup only
 
 // handle hotkeys for this component
-const hkChords = inject('hkChords');
-const hkSync = inject('hkSync');
-const hkPresent = inject('hkPresent');
-const noActiveModal = inject('noActiveModal');
-const version = inject('version');
+const hkChords = injectStrict(hkChordsKey);
+const hkSync = injectStrict(hkSyncKey);
+const hkPresent = injectStrict(hkPresentKey);
+const noActiveModal = injectStrict(noActiveModalKey);
+const version = injectStrict(versionKey);
 
 // pdf creation
 pdfMake.fonts = {
@@ -537,11 +541,11 @@ pdfMake.fonts = {
 };
 
 // global properties
-const setlists = inject('setlists');
-const songs = inject('songs');
-const user = inject('user');
-const users = inject('users');
-const setlistCollection = inject('setlistCollection');
+const setlists = injectStrict(setlistsKey);
+const songs = injectStrict(songsKey);
+const user = injectStrict(userKey);
+const users = injectStrict(usersKey);
+const setlistCollection = injectStrict(setlistCollectionKey);
 const emit = defineEmits(['editSong', 'editSetlist']);
 
 // reactive data
@@ -556,7 +560,7 @@ const modal = reactive({
 const setlist = computed(() => setlists.value.find(s => s.entity.slug === setlistKey));
 
 // find a song's entity by id
-const findSong = (id) => songs.value.find(s => s.id === id)?.entity;
+const findSong = (id?: string) => songs.value.find(s => s.id === id)?.entity;
 
 // current user's permissions on this setlist, mirroring the backend's ownership/visibility rules
 const canUpdateSetlist = computed(() => !!setlist.value && can('updateSetlists', user.value.roles, {
@@ -570,16 +574,18 @@ const canDeleteSetlist = computed(() => !!setlist.value && can('deleteSetlists',
 }));
 
 // retrieve setlist song entities (only existing ones) with custom key overrides applied
-const setlistSongs = computed(() => {
-	const result = [];
+const setlistSongs = computed<SetlistSongPresentation[]>(() => {
+	const result: SetlistSongPresentation[] = [];
 	for (const setlistSong of setlist.value?.entity.songs ?? []) {
 		const song = findSong(setlistSong.id);
 		if (!song) continue; // song was deleted
 		const setlistTuning = setlistSong.key;
-		const customTuningDelta = setlistTuning != 0
-			? keyScale.indexOf(setlistTuning) - keyScale.indexOf(song.key)
+		// '' is the "no custom tuning" sentinel (see SetlistSet.vue's addSong);
+		// no other value stored here ever numerically coerces to 0
+		const customTuningDelta = setlistTuning !== ''
+			? keyScale.indexOf(setlistTuning) - keyScale.indexOf(song.key ?? '')
 			: 0;
-		const customTuning = setlistTuning != 0 ? setlistTuning : song.key;
+		const customTuning = setlistTuning !== '' ? setlistTuning : (song.key ?? '');
 		result.push({ ...song, customTuningDelta, customTuning });
 	}
 	return result;
@@ -587,7 +593,7 @@ const setlistSongs = computed(() => {
 
 // build data object for song languages doughnut chart
 const setlistLanguages = computed(() => {
-	let languages = {};
+	let languages: Record<string, number> = {};
 	for (let i = 0; i < setlistSongs.value.length; i++) {
 		const song = setlistSongs.value[i];
 		if (!languages.hasOwnProperty(song.language)) {
@@ -597,7 +603,7 @@ const setlistLanguages = computed(() => {
 	}
 	return {
 		datasets: [
-			{ label: t('page.songs', 2), data: Object.values(languages), color: '#88b544' },
+			{ label: t('page.songs', 2), data: Object.values(languages), borderColor: '#88b544' },
 		],
 		labels: Object.keys(languages).map(e => t('language.' + e))
 	};
@@ -605,7 +611,7 @@ const setlistLanguages = computed(() => {
 
 // build data object for song keys doughnut chart
 const setlistKeys = computed(() => {
-	let keys = {};
+	let keys: Record<string, number> = {};
 	for (let i = 0; i < setlistSongs.value.length; i++) {
 		const song = setlistSongs.value[i];
 		if (!keys.hasOwnProperty(song.customTuning)) {
@@ -615,7 +621,7 @@ const setlistKeys = computed(() => {
 	}
 	return {
 		datasets: [
-			{ label: t('page.songs', 2), data: Object.values(keys), color: '#88b544' },
+			{ label: t('page.songs', 2), data: Object.values(keys), borderColor: '#88b544' },
 		],
 		labels: Object.keys(keys)
 	};
@@ -628,23 +634,27 @@ const noSongs = computed(() => {
 
 // save new song order for setlist
 const saveOrder = async () => {
+	const sl = setlist.value;
+	if (!sl || !setlistCollection.value) return;
 	try {
-		await setlistCollection.value.updateDoc(setlist.value.id, setlist.value.changeNumber, { ...setlist.value.entity });
+		await setlistCollection.value.updateDoc(sl.id, sl.changeNumber ?? 0, { ...sl.entity });
 		notify({
 			title: t('toast.songOrderUpdated'),
 			text: t('toast.setlistSavedText'),
 			type: 'primary'
 		});
 	} catch (err) {
-		throwError(err);
+		throwError(err as ThrowableError);
 	}
 };
 
 // transpose key of given song up and save new key for setlist
-const transposeUp = async (song, songPosition) => {
-	const setlistSongList = setlist.value.entity.songs;
+const transposeUp = async (song: SongEntity, songPosition: number) => {
+	const sl = setlist.value;
+	if (!sl || !setlistCollection.value) return;
+	const setlistSongList = sl.entity.songs;
 	// update tuning
-	let tone = setlistSongList[songPosition].key ? setlistSongList[songPosition].key : song.key;
+	let tone = setlistSongList[songPosition].key ? setlistSongList[songPosition].key : (song.key ?? '');
 	let i = keyScale.indexOf(tone);
 	if (i>=keyScale.length-1) {
 		tone = keyScale[0];
@@ -654,17 +664,19 @@ const transposeUp = async (song, songPosition) => {
 	// save tuning in setlist
 	setlistSongList[songPosition].key = tone;
 	try {
-		await setlistCollection.value.updateDoc(setlist.value.id, setlist.value.changeNumber, { ...setlist.value.entity });
+		await setlistCollection.value.updateDoc(sl.id, sl.changeNumber ?? 0, { ...sl.entity });
 	} catch (err) {
-		throwError(err);
+		throwError(err as ThrowableError);
 	}
 };
 
 // transpose key of given song down and save new key for setlist
-const transposeDown = async (song, songPosition) => {
-	const setlistSongList = setlist.value.entity.songs;
+const transposeDown = async (song: SongEntity, songPosition: number) => {
+	const sl = setlist.value;
+	if (!sl || !setlistCollection.value) return;
+	const setlistSongList = sl.entity.songs;
 	// update tuning
-	let tone = setlistSongList[songPosition].key ? setlistSongList[songPosition].key : song.key;
+	let tone = setlistSongList[songPosition].key ? setlistSongList[songPosition].key : (song.key ?? '');
 	let i = keyScale.indexOf(tone);
 	if (i<=0) {
 		tone = keyScale[keyScale.length-1];
@@ -674,17 +686,19 @@ const transposeDown = async (song, songPosition) => {
 	// save tuning in setlist
 	setlistSongList[songPosition].key = tone;
 	try {
-		await setlistCollection.value.updateDoc(setlist.value.id, setlist.value.changeNumber, { ...setlist.value.entity });
+		await setlistCollection.value.updateDoc(sl.id, sl.changeNumber ?? 0, { ...sl.entity });
 	} catch (err) {
-		throwError(err);
+		throwError(err as ThrowableError);
 	}
 };
 
 // remove a song from setlist, currently used only for deleted songs
-const removeSong = async (songId) => {
-	setlist.value.entity.songs = setlist.value.entity.songs.filter(s => s.id != songId);
+const removeSong = async (songId: string) => {
+	const sl = setlist.value;
+	if (!sl || !setlistCollection.value) return;
+	sl.entity.songs = sl.entity.songs.filter(s => s.id != songId);
 	try {
-		await setlistCollection.value.updateDoc(setlist.value.id, setlist.value.changeNumber, { ...setlist.value.entity });
+		await setlistCollection.value.updateDoc(sl.id, sl.changeNumber ?? 0, { ...sl.entity });
 		// toast success update message
 		notify({
 			title: t('toast.setlistUpdated'),
@@ -692,73 +706,79 @@ const removeSong = async (songId) => {
 			type: 'primary'
 		});
 	} catch (err) {
-		throwError(err);
+		throwError(err as ThrowableError);
 	}
 };
 
 // toggle and save setlist's active flag to enable or disable sync
 const updateActive = async () => {
-	setlist.value.entity.active = !setlist.value.entity.active;
-	const sync = setlist.value.entity.active;
+	const sl = setlist.value;
+	if (!sl || !setlistCollection.value) return;
+	sl.entity.active = !sl.entity.active;
+	const sync = sl.entity.active;
 	// clear ephemeral remote props when sync is disabled
 	if (!sync) {
-		delete setlist.value.entity.remoteText;
-		delete setlist.value.entity.remoteLight;
-		delete setlist.value.entity.remoteHide;
+		delete sl.entity.remoteText;
+		delete sl.entity.remoteLight;
+		delete sl.entity.remoteHide;
 	}
 	try {
-		await setlistCollection.value.updateDoc(setlist.value.id, setlist.value.changeNumber, { ...setlist.value.entity });
+		await setlistCollection.value.updateDoc(sl.id, sl.changeNumber ?? 0, { ...sl.entity });
 		notify({
 			title: t('toast.sync' + (sync ? 'Activated' : 'Deactivated')),
 			text: t('toast.setlistStatusSavedText'),
 			type: 'primary'
 		});
 	} catch (err) {
-		throwError(err);
+		throwError(err as ThrowableError);
 	}
 };
 
 // save setlist presentation slide position when sync is enabled
-const updatePosition = async (val) => {
-	if (!setlist.value.entity.active) return;
-	setlist.value.entity.position = val;
+const updatePosition = async (val: number) => {
+	const sl = setlist.value;
+	if (!sl || !sl.entity.active || !setlistCollection.value) return;
+	sl.entity.position = val;
 	try {
-		await setlistCollection.value.updateDoc(setlist.value.id, setlist.value.changeNumber, { ...setlist.value.entity });
+		await setlistCollection.value.updateDoc(sl.id, sl.changeNumber ?? 0, { ...sl.entity });
 	} catch (err) {
-		throwError(err);
+		throwError(err as ThrowableError);
 	}
 };
 
 // save setlist chords visibility when sync is enabled
-const updateChords = async (val) => {
-	if (!setlist.value.entity.active) return;
-	setlist.value.entity.remoteText = val;
+const updateChords = async (val: boolean) => {
+	const sl = setlist.value;
+	if (!sl || !sl.entity.active || !setlistCollection.value) return;
+	sl.entity.remoteText = val;
 	try {
-		await setlistCollection.value.updateDoc(setlist.value.id, setlist.value.changeNumber, { ...setlist.value.entity });
+		await setlistCollection.value.updateDoc(sl.id, sl.changeNumber ?? 0, { ...sl.entity });
 	} catch (err) {
-		throwError(err);
+		throwError(err as ThrowableError);
 	}
 };
 
 // save setlist theme mode when sync enabled
-const updateDark = async (val) => {
-	if (!setlist.value.entity.active) return;
-	setlist.value.entity.remoteLight = val;
+const updateDark = async (val: boolean) => {
+	const sl = setlist.value;
+	if (!sl || !sl.entity.active || !setlistCollection.value) return;
+	sl.entity.remoteLight = val;
 	try {
-		await setlistCollection.value.updateDoc(setlist.value.id, setlist.value.changeNumber, { ...setlist.value.entity });
+		await setlistCollection.value.updateDoc(sl.id, sl.changeNumber ?? 0, { ...sl.entity });
 	} catch (err) {
-		throwError(err);
+		throwError(err as ThrowableError);
 	}
 };
 
 // save setlist content visibility when sync enabled
-const updateHide = async (val) => {
-	if (!setlist.value.entity.active) return;
-	setlist.value.entity.remoteHide = val;
+const updateHide = async (val: boolean) => {
+	const sl = setlist.value;
+	if (!sl || !sl.entity.active || !setlistCollection.value) return;
+	sl.entity.remoteHide = val;
 	try {
-		await setlistCollection.value.updateDoc(setlist.value.id, setlist.value.changeNumber, { ...setlist.value.entity });
+		await setlistCollection.value.updateDoc(sl.id, sl.changeNumber ?? 0, { ...sl.entity });
 	} catch (err) {
-		throwError(err);
+		throwError(err as ThrowableError);
 	}
 };
 
@@ -768,7 +788,7 @@ const deleteDialog = () => {
 };
 
 // copy list to clipboard in given format (plain|markdown|slack)
-const copyList = (format) => {
+const copyList = (format: 'plain' | 'markdown' | 'slack') => {
 	const list = setlistSongs.value.map((song, i) => {
 		const title = song.title;
 		const subtitle = song.subtitle;
@@ -798,7 +818,7 @@ const copyList = (format) => {
 };
 
 // download pdf in given mode (sheets|list)
-const exportPdf = (mode) => {
+const exportPdf = (mode: 'sheets' | 'list') => {
 	var content = mode == 'sheets' ? getPdfSongsheets() : getPdfSetlist();
 	// return page configuration with computed content
 	var doc = {
@@ -851,7 +871,7 @@ const exportPdf = (mode) => {
 				alignment: 'right'
 			}
 		}
-	};
+	} as TDocumentDefinitions;
 
 	// Trigger download
 	const type = (mode == 'sheets' ? t('text.songsheets') : t('text.list')).toLowerCase();
@@ -866,30 +886,32 @@ const exportPdf = (mode) => {
 };
 
 // create pdfMake object for list
-const getPdfSetlist = () => {
+const getPdfSetlist = (): Content[] => {
+	const sl = setlist.value;
+	if (!sl) return [];
 	const songLines = setlistSongs.value.map(song => ' ‒ ' + song.title + ' [' + song.customTuning + ']');
 	return [
-		{ text: setlist.value.entity.title.toUpperCase(), style: 'header' },
+		{ text: sl.entity.title.toUpperCase(), style: 'header' },
 		{ canvas: [{ type: 'line', x1: 0, y1: 0, x2: 505, y2: 0, lineWidth: .5 }] },
 		{
-			text: (new Date(setlist.value.entity.date)).toLocaleDateString(
+			text: (new Date(sl.entity.date)).toLocaleDateString(
 				locale.value,
 				{ weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
 			),
 			style: 'subtitle',
 			margin: [ 0, 6, 0, 0 ]
-		},
-		{ ol: songLines, style: 'list'},
+		} as Content,
+		{ ol: songLines, style: 'list'} as Content,
 		{ text: window.location.href, link: window.location.href, style: 'link' },
 	];
 };
 
 // create pdfMake object for songsheets
-const getPdfSongsheets = () => {
-	let sheets = [];
+const getPdfSongsheets = (): Content[] => {
+	let sheets: Content[] = [];
 	setlistSongs.value.forEach((song, index) => {
 		// handle song content parts
-		let content = [];
+		let content: Content[] = [];
 		let parts = parsedContent(
 			song.content,
 			song.customTuningDelta,
@@ -903,7 +925,7 @@ const getPdfSongsheets = () => {
 					columns: [
 						{
 							width: 'auto',
-							text: part.number,
+							text: String(part.number),
 							style: 'partnumber',
 						},
 						{
@@ -913,7 +935,7 @@ const getPdfSongsheets = () => {
 							style: 'code',
 						}
 					]
-				});
+				} as Content);
 			} else {
 				content.push({
 					// song content with respect to leading whitespaces
@@ -923,17 +945,16 @@ const getPdfSongsheets = () => {
 			}
 		});
 		// create footer
-		let footer = [{
+		let footer: Content[] = [{
 			// imprint with ccli#, author names and (c) year publisher
 			width: '*',
 			style: 'footer',
 			text: [
-				song.note ? t('field.note') + ':\n' + song.note + '\n\n' : '',
 				song.ccli ? 'CCLI Song Nr.: ' + song.ccli + '\n' : '',
 				song.authors?.length ? song.authors.join(' | ') + '\n' : '',
 				'© ' + (song.year ? song.year + ' ' : '') + song.publisher
 			]
-		}];
+		} as Content];
 		if (song.youtube) {
 			footer.push({
 				// QR code for YouTube link
@@ -941,12 +962,12 @@ const getPdfSongsheets = () => {
 				margin: [ 0, 20, 0, 0 ],
 				stack: [
 					{ text: 'https://youtu.be/' + song.youtube, style: 'qr' },
-					{ qr: 'https://youtu.be/' + song.youtube, fit: '90', style: 'qr', margin: [ 0, 5, 0, 0 ] }
+					{ qr: 'https://youtu.be/' + song.youtube, fit: 90, style: 'qr', margin: [ 0, 5, 0, 0 ] }
 				]
-			});
+			} as Content);
 		}
 		// put songsheet together
-		let songsheet = [
+		let songsheet: Content[] = [
 			// song title [tuning] with a line beneath
 			{ text: song.title.toUpperCase(), style: 'header' },
 			{ canvas: [{ type: 'line', x1: 0, y1: 0, x2: 505, y2: 0, lineWidth: .5 }] },
@@ -955,13 +976,13 @@ const getPdfSongsheets = () => {
 				style: 'subtitle',
 				alignment: 'right',
 				margin: [ 0, 4, 0, 0 ]
-			},
+			} as Content,
 			content,
 			{ columnGap: 8, columns: footer }
 		];
 		// add page break after every song exept for the last
 		if (index < setlistSongs.value.length-1) {
-			songsheet.push({ text: '', pageBreak: 'after', style: 'code' });
+			songsheet.push({ text: '', pageBreak: 'after', style: 'code' } as Content);
 		}
 		sheets = sheets.concat(songsheet);
 	});
@@ -970,7 +991,9 @@ const getPdfSongsheets = () => {
 
 const exportOsz = async () => {
 	// initialize file content of service data osj file for OpenLP
-	const content = [{
+	// (OpenLP's .osj format has no published types anywhere)
+	// oxlint-disable-next-line typescript/no-explicit-any
+	const content: any[] = [{
     'openlp_core': {
       'lite-service': false,
       'service-theme': null,
@@ -985,16 +1008,17 @@ const exportOsz = async () => {
 		let tSong = null;
 		if (lang !== song.language && song.translations.length > 0) {
 			const tKey = song.translations.find((tr) => tr.endsWith(`-${lang}`));
-			tSong = findSong(tKey);
+			tSong = findSong(tKey) ?? null;
 		}
 		// handle song content parts
-		const itemData = [];
+		// oxlint-disable-next-line typescript/no-explicit-any
+		const itemData: any[] = [];
 		const parts = parsedContent(song.content, 0, false, false);
 		const tParts = tSong ? parsedContent(tSong.content, 0, false, false) : [];
 		parts.forEach((part, i) => {
 			itemData.push({
 				'raw_slide': (i in tParts) ? `${part.content}\n\n{it}{gr}{fd}${tParts[i].content}{/fd}{/it}{/gr}` : part.content,
-				'verseTag': (part.type ? part.type.toUpperCase() : 'V') + (part.number > 0 ? part.number.toString() : '1'),
+				'verseTag': (part.type ? part.type.toUpperCase() : 'V') + (Number(part.number) > 0 ? part.number.toString() : '1'),
 			});
 		});
 		content.push({
@@ -1009,13 +1033,13 @@ const exportOsz = async () => {
 						`${t('field.authors')}: ${song.authors?.join(', ') ?? ''}`
 					],
 					'type': 1,
-					'audit': [song.title, song.authors ?? [], song.publisher, song.ccli.toString()],
+					'audit': [song.title, song.authors ?? [], song.publisher, (song.ccli ?? '').toString()],
 					'notes': '',
 					'from_plugin': false,
 					'capabilities': [2, 1, 5, 8, 9, 13, 22],
 					'search': '',
 					'data': {
-						'title': `${song.title.toLowerCase()}@${song.subtitle.toLowerCase()}`,
+						'title': `${song.title.toLowerCase()}@${(song.subtitle ?? '').toLowerCase()}`,
 						'alternate_title': song.subtitle,
 						'authors': song.authors?.join(', ') ?? '',
 						'ccli_number': song.ccli,
diff --git a/frontend/src/views/Setlists.vue b/frontend/src/views/Setlists.vue
index 8f16ce76..53819ae0 100644
--- a/frontend/src/views/Setlists.vue
+++ b/frontend/src/views/Setlists.vue
@@ -20,7 +20,7 @@
 						px-1 pt-0.5 flex items-center cursor-pointer
 						text-blade-500 hover:text-spring-600 transition-colors
 					"
-					@click="searchInput.focus()"
+					@click="searchInput?.focus()"
 					:title="t('placeholder.searchSetlistTitle')"
 				>
 					<icon-search class="w-7 h-7 stroke-1.5" />
@@ -107,7 +107,7 @@
 							<input
 								type="search"
 								v-model="filter.date"
-								@input="e => filter.date = e.target.value"
+								@input="e => filter.date = (e.target as HTMLInputElement).value"
 								class="w-full pl-8"
 							/>
 						</label>
@@ -129,7 +129,7 @@
 								type="search"
 								ref="searchInput"
 								v-model="filter.title"
-								@input="e => filter.title = e.target.value"
+								@input="e => filter.title = (e.target as HTMLInputElement).value"
 								class="w-full pl-8"
 							/>
 						</label>
@@ -249,14 +249,16 @@
 	</div>
 </template>
 
-<script setup>
-import { humanDate } from '@/utils.js';
+<script setup lang="ts">
+import { injectStrict, hkBackKey, hkCancelKey, hkForwardKey, hkSearchKey, noActiveInputKey, noActiveModalKey, setlistsKey, userKey, usersKey } from '@/keys';
+import { humanDate, firstParam } from '@/utils.js';
 import { logicAnd } from '@vueuse/math';
-import { ref, reactive, computed, watch, inject } from 'vue';
+import { ref, reactive, computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter, useRoute } from 'vue-router';
 import { whenever } from '@vueuse/core';
 import { can } from '@backend/definitions';
+import type { Setlist, SetlistEntity } from '@backend/models';
 import DropDown from '@/elements/DropDown.vue';
 import SecondaryButton from '@/elements/SecondaryButton.vue';
 import SetlistDelete from '@/modals/SetlistDelete.vue';
@@ -287,39 +289,37 @@ const router = useRouter();
 const route = useRoute();
 
 // handle hotkeys for this component
-const hkSearch = inject('hkSearch');
-const hkBack = inject('hkBack');
-const hkForward = inject('hkForward');
-const hkCancel = inject('hkCancel');
-const noActiveInput = inject('noActiveInput');
-const noActiveModal = inject('noActiveModal');
+const hkSearch = injectStrict(hkSearchKey);
+const hkBack = injectStrict(hkBackKey);
+const hkForward = injectStrict(hkForwardKey);
+const hkCancel = injectStrict(hkCancelKey);
+const noActiveInput = injectStrict(noActiveInputKey);
+const noActiveModal = injectStrict(noActiveModalKey);
 
 // global properties
-const setlists = inject('setlists');
-const user = inject('user');
-const users = inject('users');
+const setlists = injectStrict(setlistsKey);
+const user = injectStrict(userKey);
+const users = injectStrict(usersKey);
 
 // template references
-const searchInput = ref(null);
+const searchInput = ref<HTMLInputElement | null>(null);
 
 // injects and emits
 const emit = defineEmits(['addSetlist', 'editSetlist']);
 
 // table filter
-const filter = reactive({
+const filter = reactive<Record<string, string | boolean | null>>({
 	active:    null,
 	isPublic:  null,
 	date:      null,
 	title:     null,
-	createdBy: route.params.creator,
+	createdBy: firstParam(route.params.creator) ?? null,
 	songs:     null,
 });
 
 const resetFilter = () => {
-	for (const field in filter) {
-		if (Object.hasOwnProperty.call(filter, field)) {
-			filter[field] = null;
-		}
+	for (const field of Object.keys(filter)) {
+		filter[field] = null;
 	}
 };
 const isFiltered = computed(() => {
@@ -334,7 +334,7 @@ const isFiltered = computed(() => {
 // pagination
 const page       = ref(0);
 const listLength = 16;
-const order = reactive({
+const order = reactive<{ field: string, ascending: boolean }>({
 	field: 'date',
 	ascending: false
 });
@@ -342,7 +342,7 @@ const order = reactive({
 // computed
 const sortedSetlists = computed(() => {
 	return setlists.value.toSorted((a, b) => {
-		let propA, propB;
+		let propA: string | number, propB: string | number;
 		if (order.field == 'songs') {
 			propA = a.entity.songs.length;
 			propB = b.entity.songs.length;
@@ -350,8 +350,8 @@ const sortedSetlists = computed(() => {
 			propA = users.value[a.entity.createdBy]?.name ?? '';
 			propB = users.value[b.entity.createdBy]?.name ?? '';
 		} else {
-			propA = String(a.entity[order.field]).toLowerCase().trim();
-			propB = String(b.entity[order.field]).toLowerCase().trim();
+			propA = String(a.entity[order.field as keyof SetlistEntity]).toLowerCase().trim();
+			propB = String(b.entity[order.field as keyof SetlistEntity]).toLowerCase().trim();
 		}
 		if (order.ascending) {
 			if (propA < propB) { return -1 };
@@ -380,14 +380,14 @@ const filteredSetlists = computed(() => {
 	if (filter.date) {
 		// filter fields: date
 		setlists = setlists.filter(s => {
-			const key = filter.date.toLowerCase();
+			const key = (filter.date as string).toLowerCase();
 			return s.entity.date.indexOf(key) !== -1
 				|| humanDate(s.entity.date, locale.value).toLowerCase().indexOf(key) !== -1;
 		})
 	}
 	if (filter.title) {
 		// filter fields: title
-		const key = filter.title.toLowerCase();
+		const key = (filter.title as string).toLowerCase();
 		setlists = setlists.filter(s => {
 			return s.entity.title.toLowerCase().indexOf(key) !== -1;
 		})
@@ -401,7 +401,7 @@ const filteredSetlists = computed(() => {
 	if (filter.songs) {
 		// filter fields: songs
 		setlists = setlists.filter(s => {
-			return s.entity.songs.length.toString().indexOf(filter.songs) !== -1;
+			return s.entity.songs.length.toString().indexOf(filter.songs as string) !== -1;
 		})
 	}
 	return setlists;
@@ -422,7 +422,7 @@ const pageCount = computed(() => {
 	return Math.ceil(filteredSetlists.value.length/listLength);
 });
 const creators = computed(() => {
-	const creators = {};
+	const creators: Record<string, string> = {};
 	setlists.value.forEach(s => {
 		const name = users.value[s.entity.createdBy]?.name;
 		if (name && !creators.hasOwnProperty(s.entity.createdBy)) {
@@ -433,7 +433,7 @@ const creators = computed(() => {
 });
 
 // methods
-const sortList = (field) => {
+const sortList = (field: string) => {
 	if (order.field == field) {
 		order.ascending = !order.ascending;
 	} else {
@@ -441,7 +441,7 @@ const sortList = (field) => {
 	}
 	order.field = field;
 };
-const toggleFilter = (prop) => {
+const toggleFilter = (prop: 'active' | 'isPublic') => {
 	switch (filter[prop]) {
 		case null:
 			filter[prop] = true;
@@ -455,7 +455,7 @@ const toggleFilter = (prop) => {
 			break;
 	}
 };
-const showPageItem = (p) => {
+const showPageItem = (p: number) => {
 	return pageCount.value < 6 || (
 		p == 1 || p == 2
 		|| (page.value == 0 && p == 3)
@@ -466,10 +466,10 @@ const showPageItem = (p) => {
 		|| p == pageCount.value-1 || p == pageCount.value
 	);
 };
-const showFirstEllipsis = (p) => {
+const showFirstEllipsis = (p: number) => {
 	return pageCount.value >= 6 && page.value > 2 && p == 2;
 };
-const showPageItemLink = (p) => {
+const showPageItemLink = (p: number) => {
 	return pageCount.value < 6 || (
 		p == 1
 		|| (page.value == 0 && p == 3)
@@ -480,7 +480,7 @@ const showPageItemLink = (p) => {
 		|| p == pageCount.value
 	);
 };
-const showLastEllipsis = (p) => {
+const showLastEllipsis = (p: number) => {
 	return pageCount.value >= 6 && page.value < pageCount.value-3 && p == pageCount.value-1;
 };
 
@@ -494,7 +494,7 @@ const setlistDeleteModalData = reactive({
 	title: '',
 	key: '',
 });
-const deleteDialog = (setlist) => {
+const deleteDialog = (setlist: Setlist) => {
 	setlistDeleteModalData.title = setlist.entity.title;
 	setlistDeleteModalData.key = setlist.entity.slug;
 	showModal.delete = true;
@@ -506,7 +506,7 @@ watch (filter, () => { page.value = 0 });
 // component shortcuts
 whenever(
 	logicAnd(hkSearch, noActiveModal),
-	() => !noSetlists.value ? searchInput.value.focus() : null
+	() => !noSetlists.value ? searchInput.value?.focus() : null
 );
 whenever(
 	logicAnd(hkCancel, noActiveModal),
diff --git a/frontend/src/views/Shortcuts.vue b/frontend/src/views/Shortcuts.vue
index d73f4b9b..df707a03 100644
--- a/frontend/src/views/Shortcuts.vue
+++ b/frontend/src/views/Shortcuts.vue
@@ -69,11 +69,6 @@
 							<td><icon-presentation class="w-5 h-5 stroke-1.5" /></td>
 							<td>{{ t('tooltip.presentationStart') }}</td>
 						</tr>
-						<tr>
-							<td><kbd>{{ t('key.ctrl') }}</kbd>&nbsp;+&nbsp;<kbd>{{ t('key.I') }}</kbd></td>
-							<td><icon-info-circle class="w-5 h-5 stroke-1.5" /></td>
-							<td>{{ t('tooltip.infoSongData') }}</td>
-						</tr>
 						<tr>
 							<td><kbd>{{ t('key.ctrl') }}</kbd>&nbsp;+&nbsp;<kbd>{{ t('key.L') }}</kbd></td>
 							<td><icon-brightness class="w-5 h-5 stroke-1.5" /></td>
@@ -129,11 +124,6 @@
 							<td><icon-eye-off class="w-5 h-5 stroke-1.5" /></td>
 							<td>{{ t('tooltip.presentationShow') }} / {{ t('tooltip.presentationHide') }}</td>
 						</tr>
-						<tr>
-							<td><kbd>{{ t('key.ctrl') }}</kbd>&nbsp;+&nbsp;<kbd>{{ t('key.I') }}</kbd></td>
-							<td><icon-info-circle class="w-5 h-5 stroke-1.5" /></td>
-							<td>{{ t('tooltip.infoSongData') }}</td>
-						</tr>
 						<tr>
 							<td><kbd>{{ t('key.ctrl') }}</kbd>&nbsp;+&nbsp;<kbd>{{ t('key.L') }}</kbd></td>
 							<td><icon-brightness class="w-5 h-5 stroke-1.5" /></td>
@@ -151,7 +141,7 @@
 	</div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { useI18n } from 'vue-i18n';
 import PanelBox from '@/elements/PanelBox.vue';
 
@@ -163,7 +153,6 @@ import {
 	IconArrowUp,
 	IconBrightness,
 	IconEyeOff,
-	IconInfoCircle,
 	IconMusic,
 	IconPresentation,
 	IconRefresh,
diff --git a/frontend/src/views/SongShow.vue b/frontend/src/views/SongShow.vue
index 43f238da..0962faf3 100644
--- a/frontend/src/views/SongShow.vue
+++ b/frontend/src/views/SongShow.vue
@@ -145,7 +145,7 @@
 								<button
 									v-if="can('deleteSongs', user.roles)"
 									class="px-3 py-2 w-full flex items-center gap-3 text-rose-500 hover:bg-rose-100 dark:hover:bg-rose-900/30"
-									@click="deleteDialog(song)"
+									@click="deleteDialog()"
 								>
 									<icon-trash class="w-5 h-5 stroke-1.5" />
 									{{ t('button.delete') }}
@@ -197,40 +197,40 @@
 						>
 							{{ t('page.setlists', 1) }}: {{ setlist.title }}
 						</router-link>
-						{{ t('page.songs', 1) }} #{{ position+1 }}
+						{{ t('page.songs', 1) }} #{{ (position ?? 0)+1 }}
 					</template>
 					<div class="flex justify-end items-center">
 						<div class="flex gap-1">
 							<!-- back navigation -->
 							<secondary-button
 								class="flex items-center gap-1"
-								:disabled="position == 0"
+								:disabled="(position ?? 0) == 0"
 								title="Previous Song"
 								@click="goToPreviousSong"
 							>
 								<icon-arrow-left class="w-5 h-5 stroke-1.5" />
-								<div v-if="position > 0" class="hidden sm:flex items-center gap-2">
+								<div v-if="(position ?? 0) > 0" class="hidden sm:flex items-center gap-2">
 									<div class="max-w-3xs truncate">
-										{{ findSong(setlist.songs[position-1]?.id)?.title }}
+										{{ findSong(setlist.songs[(position ?? 0)-1]?.id)?.title }}
 									</div>
 									<div class="text-lg leading-4 font-mono font-bold text-spring-600 dark:text-spring-400">
-										{{ setlist.songs[position-1]?.key }}
+										{{ setlist.songs[(position ?? 0)-1]?.key }}
 									</div>
 								</div>
 							</secondary-button>
 							<!-- forward navigation -->
 							<secondary-button
 								class="flex items-center gap-1"
-								:disabled="position == setlist.songs.length-1"
+								:disabled="(position ?? 0) == setlist.songs.length-1"
 								title="Next Song"
 								@click="goToNextSong"
 							>
-								<div v-if="position < setlist.songs.length-1" class="hidden sm:flex items-center gap-2">
+								<div v-if="(position ?? 0) < setlist.songs.length-1" class="hidden sm:flex items-center gap-2">
 									<div class="max-w-3xs truncate">
-										{{ findSong(setlist.songs[position+1]?.id)?.title }}
+										{{ findSong(setlist.songs[(position ?? 0)+1]?.id)?.title }}
 									</div>
 									<div class="text-lg leading-4 font-mono font-bold text-spring-600 dark:text-spring-400">
-										{{ setlist.songs[position+1]?.key }}
+										{{ setlist.songs[(position ?? 0)+1]?.key }}
 									</div>
 								</div>
 								<icon-arrow-right class="w-5 h-5 stroke-1.5" />
@@ -275,16 +275,18 @@
 </template>
 
 <script setup lang="ts">
-import { keyScale, isChordLine, parsedContent, download, openLyricsXML } from '@/utils.js';
+import { injectStrict, hkBackKey, hkChordsKey, hkDownKey, hkForwardKey, hkPresentKey, hkResetKey, hkUpKey, noActiveModalKey, setlistsKey, songsKey, userKey, versionKey } from '@/keys';
+import { keyScale, isChordLine, parsedContent, download, openLyricsXML, firstParam } from '@/utils.js';
 import { logicAnd, logicOr } from '@vueuse/math';
 import { notify } from '@kyvg/vue3-notification';
-import { ref, reactive, computed, inject, onMounted } from 'vue';
+import { ref, reactive, computed, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 import { whenever } from '@vueuse/core';
-import { SongLanguage, can } from "@backend/definitions";
+import { can } from "@backend/definitions";
 import DropDown from '@/elements/DropDown.vue';
 import pdfMake from "pdfmake/build/pdfmake";
+import type { Content, TDocumentDefinitions } from 'pdfmake/interfaces';
 import PrimaryButton from '@/elements/PrimaryButton.vue';
 import SecondaryButton from '@/elements/SecondaryButton.vue';
 import SongContent from '@/partials/SongContent.vue';
@@ -320,30 +322,29 @@ const { t, locale } = useI18n();
 
 const route = useRoute();
 const router = useRouter();
-const songId = route.params.id;
-const setlistId = route.params.setlist;
-const version = inject('version');
-const songs = inject('songs');
-const setlists = inject('setlists');
-const user = inject('user');
-const languages = Object.values(SongLanguage);
+const songId = firstParam(route.params.id) ?? '';
+const setlistId = firstParam(route.params.setlist);
+const version = injectStrict(versionKey);
+const songs = injectStrict(songsKey);
+const setlists = injectStrict(setlistsKey);
+const user = injectStrict(userKey);
 
 // Song and setlist entities from db
 const song = computed(() => songs.value.find(s => s.entity.slug === songId)?.entity);
 const setlist = computed(() => setlists.value.find(s => setlistId && s.entity.slug === setlistId)?.entity);
 
 // find a song's entity by id, for setlist navigation display
-const findSong = (id) => songs.value.find(s => s.id === id)?.entity;
+const findSong = (id?: string) => songs.value.find(s => s.id === id)?.entity;
 
 // handle hotkeys for this component
-const hkChords      = inject('hkChords');
-const hkBack        = inject('hkBack');
-const hkForward     = inject('hkForward');
-const hkDown        = inject('hkDown');
-const hkUp          = inject('hkUp');
-const hkReset       = inject('hkReset');
-const hkPresent     = inject('hkPresent');
-const noActiveModal = inject('noActiveModal');
+const hkChords      = injectStrict(hkChordsKey);
+const hkBack        = injectStrict(hkBackKey);
+const hkForward     = injectStrict(hkForwardKey);
+const hkDown        = injectStrict(hkDownKey);
+const hkUp          = injectStrict(hkUpKey);
+const hkReset       = injectStrict(hkResetKey);
+const hkPresent     = injectStrict(hkPresentKey);
+const noActiveModal = injectStrict(noActiveModalKey);
 
 // pdf creation
 const EOL = '\n';
@@ -374,20 +375,19 @@ onMounted(() => {
 	key.value = route.params.key ? keyDiff.value : 0;
 });
 
-const position = computed(() => setlistId && route.params.key
-	? setlist.value?.songs.findIndex(s => s.id === songId )
+const position = computed<number | null>(() => setlistId && route.params.key
+	? (setlist.value?.songs.findIndex(s => s.id === songId ) ?? null)
 	: null
 );
-
 // array of tuples (song id, language) for all existing translations of this song
-const showLanguages = computed(() => {
-	if (song.value?.translations?.length > 0) {
-		const languages = [[songId, song.value.language]];
+const showLanguages = computed<[string, string | undefined][]>(() => {
+	if (song.value?.translations && song.value.translations.length > 0) {
+		const languages: [string, string | undefined][] = [[songId, song.value.language]];
 		song.value.translations.forEach((translatedSongId) => {
 			languages.push([translatedSongId, songs.value?.find(s => s.entity.slug === translatedSongId)?.entity.language]);
 		});
 		return languages.sort((a, b) => {
-			return a[1] > b[1] ? 1 : -1;
+			return (a[1] ?? '') > (b[1] ?? '') ? 1 : -1;
 		})
 	} else {
 		return [[songId, song.value?.language]];
@@ -395,8 +395,8 @@ const showLanguages = computed(() => {
 });
 
 // show current key as well as previous and next key for transposing keys
-const keyIndexOnScale = (index) => {
-	return keyScale[(12 + keyScale.indexOf(song.value.key) + (index % 12)) % 12]
+const keyIndexOnScale = (index: number) => {
+	return keyScale[(12 + keyScale.indexOf(song.value?.key ?? '') + (index % 12)) % 12]
 };
 const showKey = computed(() => {
 	if (song.value) {
@@ -423,7 +423,7 @@ const transposeReset = () => {
 
 // calculates difference between song key and url key parameter and returns new key scale index
 const keyDiff = computed(() => {
-	return (12 + keyScale.indexOf(route.params.key) - keyScale.indexOf(song.value?.key)) % 12;
+	return (12 + keyScale.indexOf(firstParam(route.params.key) ?? '') - keyScale.indexOf(song.value?.key ?? '')) % 12;
 });
 
 // Check if song actually exists in the collection
@@ -433,11 +433,13 @@ const songExists = computed(() => {
 
 // export song in text format
 const exportTxt = () => {
+	const s = song.value;
+	if (!s) return;
 	// add header
-	var content = song.value.title
-		+ ' [' + keyScale[(12 + keyScale.indexOf(song.value.key) + (key.value % 12)) % 12] + ']'
+	var content = s.title
+		+ ' [' + keyScale[(12 + keyScale.indexOf(s.key ?? '') + (key.value % 12)) % 12] + ']'
 		+ '\n\n';
-	var lines = song.value.content.split(EOL);
+	var lines = s.content.split(EOL);
 	// process lines
 	for (var i = 0; i < lines.length; i++) {
 		var line = lines[i];
@@ -459,8 +461,8 @@ const exportTxt = () => {
 		// keep line for export
 		content += line + EOL;
 	}
-	content += EOL + song.value.authors?.join(', ') + EOL + EOL
-		+ '© ' + (song.value.year ? song.value.year + ' ' : '') + song.value.publisher.replace(/(?:\r\n|\r|\n)/g, '; ');
+	content += EOL + s.authors?.join(', ') + EOL + EOL
+		+ '© ' + (s.year ? s.year + ' ' : '') + s.publisher.replace(/(?:\r\n|\r|\n)/g, '; ');
 	// start download
 	download(content, songId + '.txt');
 	// toast success message
@@ -472,17 +474,19 @@ const exportTxt = () => {
 };
 // export song in SongBeamer or OpenLP format
 const exportSng = () => {
+	const s = song.value;
+	if (!s) return;
 	// add header
 	var content =
 		'#LangCount=1' + EOL
-		+ '#Title=' + song.value.title + EOL
-		+ '#Author=' + song.value.authors?.join(', ') + EOL
-		+ '#Melody=' + song.value.authors?.join(', ') + EOL
-		+ '#(c)=' + (song.value.year ? song.value.year + ' ' : '') + song.value.publisher.replace(/(?:\r\n|\r|\n)/g, '; ') + EOL
-		+ '#Key=' + keyScale[(12 + keyScale.indexOf(song.value.key) + (key.value % 12)) % 12] + EOL
-		+ '#CCLI=' + song.value.ccli + EOL
+		+ '#Title=' + s.title + EOL
+		+ '#Author=' + s.authors?.join(', ') + EOL
+		+ '#Melody=' + s.authors?.join(', ') + EOL
+		+ '#(c)=' + (s.year ? s.year + ' ' : '') + s.publisher.replace(/(?:\r\n|\r|\n)/g, '; ') + EOL
+		+ '#Key=' + keyScale[(12 + keyScale.indexOf(s.key ?? '') + (key.value % 12)) % 12] + EOL
+		+ '#CCLI=' + s.ccli + EOL
 		+ '---' + EOL
-	var lines = song.value.content.split(EOL);
+	var lines = s.content.split(EOL);
 	// remove chord lines
 	for (var i = 0; i < lines.length; i++) {
 		var line = lines[i];
@@ -509,15 +513,17 @@ const exportSng = () => {
 };
 // export song in OpenLyrics XML format
 const exportXml = () => {
+	const s = song.value;
+	if (!s) return;
 	// check for translations
 	const lang = !('lang' in localStorage) ? locale.value : localStorage.getItem('lang');
 	let tSong = null;
-	if (lang !== song.value.language && song.value.translations?.length > 0) {
-		const tKey = song.value.translations.find((t) => t.endsWith(`-${lang}`));
-		tSong = songs.value.find(s => s.entity.slug === tKey);
+	if (lang !== s.language && s.translations?.length > 0) {
+		const tKey = s.translations.find((t) => t.endsWith(`-${lang}`));
+		tSong = songs.value.find(song => song.id === tKey);
 	}
 	// start download
-	download(openLyricsXML(song.value, version, tSong.entity), songId + '.xml');
+	download(openLyricsXML(s, version, tSong?.entity ?? null), songId + '.xml');
 	// toast success message
 	notify({
 		title: t('toast.exportedXml'),
@@ -558,7 +564,7 @@ const exportPdf = () => {
 				alignment: 'right'
 			}
 		}
-	};
+	} as TDocumentDefinitions;
 	pdfMake.createPdf(doc).download(songId + '.pdf');
 	// toast success message
 	notify({
@@ -568,10 +574,12 @@ const exportPdf = () => {
 	});
 };
 // prepare song content for PDF export
-const getPdfSongContent = () => {
+const getPdfSongContent = (): Content[] => {
+	const s = song.value;
+	if (!s) return [];
 	// handle all song parts
-	let content = [];
-	let parts = parsedContent(song.value.content, key.value, chords.value, false);
+	let content: Content[] = [];
+	let parts = parsedContent(s.content, key.value, chords.value, false);
 	parts.forEach((part) => {
 		if (part.type == 'v' && part.number != '0') {
 			content.push({
@@ -580,7 +588,7 @@ const getPdfSongContent = () => {
 					{
 						style: 'partnumber',
 						width: 'auto',
-						text: part.number
+						text: String(part.number)
 					},
 					{
 						style: 'code',
@@ -589,7 +597,7 @@ const getPdfSongContent = () => {
 						text: '\u200B' + part.content.replace(/\n/g, "\n" + '\u200B')
 					}
 				]
-			});
+			} as Content);
 		} else {
 			content.push({
 				style: 'code',
@@ -599,32 +607,31 @@ const getPdfSongContent = () => {
 		}
 	});
 	// create footer
-	let footer = [{
+	let footer: Content[] = [{
 		// imprint with ccli#, author names and (c) year publisher
 		width: '*',
 		style: 'copyright',
 		text: [
-			song.value.note ? t('field.note') + ':\n' + song.value.note + '\n\n' : '',
-			song.value.ccli ? 'CCLI Song Nr.: ' + song.value.ccli + '\n' : '',
-			song.value.authors?.length ? song.value.authors.join(', ') + '\n' : '',
-			'\u00A9 ' + (song.value.year ? song.value.year + ' ' : '') + song.value.publisher
+			s.ccli ? 'CCLI Song Nr.: ' + s.ccli + '\n' : '',
+			s.authors?.length ? s.authors.join(', ') + '\n' : '',
+			'\u00A9 ' + (s.year ? s.year + ' ' : '') + s.publisher
 		]
-	}];
-	if (song.value.youtube) {
+	} as Content];
+	if (s.youtube) {
 		footer.push({
 			// QR code for YouTube link
 			width: '140',
 			margin: [ 0, 20, 0, 0 ],
 			stack: [
-				{ text: 'https://youtu.be/' + song.value.youtube, style: 'qr' },
-				{ qr: 'https://youtu.be/' + song.value.youtube, fit: '90', style: 'qr', margin: [ 0, 5, 0, 0 ] }
+				{ text: 'https://youtu.be/' + s.youtube, style: 'qr' },
+				{ qr: 'https://youtu.be/' + s.youtube, fit: 90, style: 'qr', margin: [ 0, 5, 0, 0 ] }
 			]
-		});
+		} as Content);
 	}
 	// return array with song data ready for pdfMake
 	return [
 		// song title [key] with a line beneath
-		{ text: song.value.title.toUpperCase() + (key.value ? '  [' + keyScale[(12 + keyScale.indexOf(song.value.key) + (key.value % 12)) % 12] + ']' : ''), style: 'header' },
+		{ text: s.title.toUpperCase() + (key.value ? '  [' + keyScale[(12 + keyScale.indexOf(s.key ?? '') + (key.value % 12)) % 12] + ']' : ''), style: 'header' },
 		{ canvas: [{ type: 'line', x1: 0, y1: 0, x2: 505, y2: 0, lineWidth: .5 }] },
 		content,
 		{ columnGap: 8, columns: footer }
@@ -643,14 +650,14 @@ const songInSetlist = computed(() => {
 
 // navigation to previous setlist song (if setlist is set)
 const goToPreviousSong = () => {
-	if (position.value > 0) {
+	if (position.value !== null && position.value > 0) {
 		const previousSongId  = setlist.value?.songs[position.value-1].id;
 		const previousSongKey = setlist.value?.songs[position.value-1].key;
 		router.push({
 			name: 'song-show',
 			params: {
 				id: previousSongId,
-				key: previousSongKey ?? songs.value.find(s => s.entity.slug === previousSongId).entity.key,
+				key: previousSongKey ?? songs.value.find(s => s.entity.slug === previousSongId)?.entity.key,
 				setlist: setlistId,
 			}
 		});
@@ -659,14 +666,14 @@ const goToPreviousSong = () => {
 
 // navigation to next setlist song (if setlist is set)
 const goToNextSong = () => {
-	if (position.value < setlist.value?.songs.length) {
+	if (position.value !== null && setlist.value && position.value < setlist.value.songs.length) {
 		const nextSongId  = setlist.value?.songs[position.value+1].id;
 		const nextSongKey = setlist.value?.songs[position.value+1].key;
 		router.push({
 			name: 'song-show',
 			params: {
 				id: nextSongId,
-				key: nextSongKey ?? songs.value.find(s => s.entity.slug === nextSongId).entity.key,
+				key: nextSongKey ?? songs.value.find(s => s.entity.slug === nextSongId)?.entity.key,
 				setlist: setlistId,
 			}
 		});
diff --git a/frontend/src/views/Songs.vue b/frontend/src/views/Songs.vue
index 4cf37f4a..a38a9b9d 100644
--- a/frontend/src/views/Songs.vue
+++ b/frontend/src/views/Songs.vue
@@ -20,7 +20,7 @@
 						px-1 pt-0.5 flex items-center cursor-pointer
 						text-blade-500 hover:text-spring-600 transition-colors
 					"
-					@click="searchInput.focus()"
+					@click="searchInput?.focus()"
 					:title="t('placeholder.searchSongTitle')"
 				>
 					<icon-search class="w-7 h-7 stroke-1.5" />
@@ -100,7 +100,7 @@
 								type="search"
 								ref="searchInput"
 								v-model="filter.fulltext"
-								@input="e => filter.fulltext = e.target.value"
+								@input="e => filter.fulltext = (e.target as HTMLInputElement).value"
 								class="w-full pl-8"
 								:placeholder="t('placeholder.searchSongTitle')"
 							/>
@@ -112,7 +112,7 @@
 							<input
 								type="search"
 								v-model="filter.authors"
-								@input="e => filter.authors = e.target.value"
+								@input="e => filter.authors = (e.target as HTMLInputElement).value"
 								class="w-full pl-8"
 							/>
 						</label>
@@ -143,7 +143,7 @@
 							<input
 								type="search"
 								v-model="filter.year"
-								@input="e => filter.year = e.target.value"
+								@input="e => filter.year = (e.target as HTMLInputElement).value"
 								class="w-full pl-8"
 							/>
 						</label>
@@ -259,14 +259,16 @@
 	</div>
 </template>
 
-<script setup>
-import { ref, reactive, computed, watch, inject } from 'vue';
+<script setup lang="ts">
+import { injectStrict, hkBackKey, hkCancelKey, hkForwardKey, hkSearchKey, noActiveInputKey, noActiveModalKey, songsKey, userKey } from '@/keys';
+import { ref, reactive, computed, watch } from 'vue';
 import { logicAnd } from '@vueuse/math';
-import { keyScale, sortTags } from '@/utils.js';
+import { keyScale, sortTags, firstParam } from '@/utils.js';
 import { useI18n } from 'vue-i18n';
 import { whenever } from '@vueuse/core';
 import { useRoute, useRouter } from 'vue-router'
 import { SongLanguage, SongTag as SongTagEnum, can } from "@backend/definitions";
+import type { Song, SongEntity } from '@backend/models';
 import DropDown from '@/elements/DropDown.vue';
 import SecondaryButton from '@/elements/SecondaryButton.vue';
 import SongDelete from '@/modals/SongDelete.vue';
@@ -295,39 +297,37 @@ const route = useRoute();
 const router = useRouter();
 
 // handle hotkeys for this component
-const hkSearch = inject('hkSearch');
-const hkBack = inject('hkBack');
-const hkForward = inject('hkForward');
-const hkCancel = inject('hkCancel');
-const noActiveInput = inject('noActiveInput');
-const noActiveModal = inject('noActiveModal');
+const hkSearch = injectStrict(hkSearchKey);
+const hkBack = injectStrict(hkBackKey);
+const hkForward = injectStrict(hkForwardKey);
+const hkCancel = injectStrict(hkCancelKey);
+const noActiveInput = injectStrict(noActiveInputKey);
+const noActiveModal = injectStrict(noActiveModalKey);
 
 // component properties
-const songs = inject('songs');
-const user = inject('user');
+const songs = injectStrict(songsKey);
+const user = injectStrict(userKey);
 const languages = Object.values(SongLanguage);
 const tags = Object.values(SongTagEnum);
 
 // template references
-const searchInput = ref(null);
+const searchInput = ref<HTMLInputElement | null>(null);
 
 // injects and emits
 const emit = defineEmits(['addSong', 'editSong']);
 
 // table filter
-const filter = reactive({
+const filter = reactive<Record<string, string | null>>({
 	fulltext: null,
 	authors: null,
-	tag: route.params.tag ?? null,
+	tag: firstParam(route.params.tag) ?? null,
 	language: null,
 	key: null,
 	year: null,
 });
 const resetFilter = () => {
-	for (const field in filter) {
-		if (Object.hasOwnProperty.call(filter, field)) {
-			filter[field] = null;
-		}
+	for (const field of Object.keys(filter)) {
+		filter[field] = null;
 	}
 };
 const isFiltered = computed(() => {
@@ -337,7 +337,7 @@ const isFiltered = computed(() => {
 // pagination and sorting
 const page = ref(0);
 const listLength = 16;
-const order = reactive({
+const order = reactive<{ field: keyof SongEntity, ascending: boolean }>({
 	field: 'title',
 	ascending: true
 });
@@ -352,7 +352,6 @@ const sortedSongs = computed(() => {
 		} else {
 			return propB.localeCompare(propA);
 		}
-		return 0;
 	})
 });
 
@@ -377,25 +376,25 @@ const filteredSongs = computed(() => {
 	if (filter.tag) {
 		// filter field: tags
 		songs = songs.filter(song => {
-			return song.entity.tags?.indexOf(filter.tag) !== -1;
+			return song.entity.tags?.indexOf(filter.tag!) !== -1;
 		});
 	}
 	if (filter.language) {
 		// filter field: language
 		songs = songs.filter(song => {
-			return song.entity.language.indexOf(filter.language) !== -1;
+			return song.entity.language.indexOf(filter.language!) !== -1;
 		});
 	}
 	if (filter.year) {
 		// filter field: year
 		songs = songs.filter(song => {
-			return String(song.entity.year).indexOf(filter.year) !== -1;
+			return String(song.entity.year).indexOf(filter.year!) !== -1;
 		});
 	}
 	if (filter.key) {
 		// filter field: key
 		songs = songs.filter(song => {
-			return song.entity.key?.indexOf(filter.key) !== -1;
+			return song.entity.key?.indexOf(filter.key!) !== -1;
 		});
 	}
 	return songs
@@ -417,7 +416,7 @@ const pageCount = computed(() => {
 });
 
 // methods
-const sortList = (field) => {
+const sortList = (field: keyof SongEntity) => {
 	if (order.field == field) {
 		order.ascending = !order.ascending;
 	} else {
@@ -425,7 +424,7 @@ const sortList = (field) => {
 	}
 	order.field = field;
 };
-const showPageItem = (p) => {
+const showPageItem = (p: number) => {
 	return pageCount.value < 6 || (
 		p == 1 || p == 2
 		|| (page.value == 0 && p == 3)
@@ -436,10 +435,10 @@ const showPageItem = (p) => {
 		|| p == pageCount.value-1 || p == pageCount.value
 	);
 };
-const showFirstEllipsis = (p) => {
+const showFirstEllipsis = (p: number) => {
 	return pageCount.value >= 6 && page.value > 2 && p == 2;
 };
-const showPageItemLink = (p) => {
+const showPageItemLink = (p: number) => {
 	return pageCount.value < 6 || (
 		p == 1
 		|| (page.value == 0 && p == 3)
@@ -450,7 +449,7 @@ const showPageItemLink = (p) => {
 		|| p == pageCount.value
 	);
 };
-const showLastEllipsis = (p) => {
+const showLastEllipsis = (p: number) => {
 	return pageCount.value >= 6 && page.value < pageCount.value-3 && p == pageCount.value-1;
 };
 
@@ -464,13 +463,13 @@ const songDeleteModalData = reactive({
 	title: '',
 	key:   '',
 });
-const deleteDialog = (song) => {
+const deleteDialog = (song: Song) => {
 	songDeleteModalData.title = song.entity.title;
 	songDeleteModalData.key   = song.entity.slug;
 	showModal.delete          = true;
 };
 
-const sortedTags = (song) => sortTags(song.tags, loc);
+const sortedTags = (song: SongEntity) => sortTags(song.tags, loc);
 
 // reset page when filter changes
 watch (filter, () => { page.value = 0 });
@@ -478,7 +477,7 @@ watch (filter, () => { page.value = 0 });
 // component shortcuts
 whenever(
 	logicAnd(hkSearch, noActiveModal),
-	() => !noSongs.value ? searchInput.value.focus() : null
+	() => !noSongs.value ? searchInput.value?.focus() : null
 );
 whenever(
 	logicAnd(hkCancel, noActiveModal),
diff --git a/frontend/src/vite-env.d.ts b/frontend/src/vite-env.d.ts
new file mode 100644
index 00000000..fe15b4fa
--- /dev/null
+++ b/frontend/src/vite-env.d.ts
@@ -0,0 +1,3 @@
+/// <reference types="vite/client" />
+
+declare const APP_VERSION: string;
diff --git a/frontend/src/widgets/WidgetSetlistList.vue b/frontend/src/widgets/WidgetSetlistList.vue
index 455f5841..6357afed 100644
--- a/frontend/src/widgets/WidgetSetlistList.vue
+++ b/frontend/src/widgets/WidgetSetlistList.vue
@@ -2,7 +2,7 @@
 	<panel-box v-if="setlists.length">
 		<div class="flex justify-between items-start">
 			<div class="text-2xl">
-				{{ t('widget.' + keyByValue(sortBy, order)) }} {{ t('page.setlists', 2) }}
+				{{ t('widget.' + order) }} {{ t('page.setlists', 2) }}
 			</div>
 			<div class="flex gap-1">
 				<secondary-button
@@ -44,11 +44,11 @@
 			</div>
 		</div>
 		<div class="flex flex-wrap gap-1">
-			<secondary-button v-if="order != sortBy.newest" @click="newestSetlists">
+			<secondary-button v-if="order != SortOrder.Newest" @click="newestSetlists">
 				<icon-arrow-up class="w-5 h-5 stroke-1.5" />
 				{{ t('widget.newest') }}
 			</secondary-button>
-			<secondary-button v-if="order == sortBy.newest" @click="oldestSetlists">
+			<secondary-button v-if="order == SortOrder.Newest" @click="oldestSetlists">
 				<icon-arrow-down class="w-5 h-5 stroke-1.5" />
 				{{ t('widget.oldest') }}
 			</secondary-button>
@@ -60,9 +60,12 @@
 	</panel-box>
 </template>
 
-<script setup>
-import { keyByValue, humanDate } from '@/utils.js';
-import { ref, computed, inject } from 'vue';
+<script setup lang="ts">
+import { injectStrict, setlistsKey } from '@/keys';
+import { SortOrder } from '@/definitions';
+import { humanDate } from '@/utils.js';
+import { ref, computed } from 'vue';
+import type { Setlist } from '@backend/models';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import LinkButton from '@/elements/LinkButton.vue';
@@ -83,24 +86,18 @@ const { t, locale } = useI18n();
 const router = useRouter();
 
 // injected properties
-const setlists = inject('setlists');
-
-// sorting order
-const sortBy = {
-	newest: 1,
-	oldest: 2,
-}
+const setlists = injectStrict(setlistsKey);
 
 // list data
-const order      = ref(sortBy.newest);
-const reordered  = ref([]);
+const order      = ref<SortOrder>(SortOrder.Newest);
+const reordered  = ref<Setlist[]>([]);
 const page       = ref(0);
 const listLength = 6;
 
 // sort song list
 const newestSetlists = () => {
 	page.value = 0;
-	order.value = sortBy.newest;
+	order.value = SortOrder.Newest;
 	reordered.value = setlists.value.filter(s => s.entity.date != '').sort(
 		(a,b) => (new Date(a.entity.date) < new Date(b.entity.date)) ? 1 : ((new Date(b.entity.date) < new Date(a.entity.date)) ? -1 : 0)
 	);
@@ -108,7 +105,7 @@ const newestSetlists = () => {
 };
 const oldestSetlists = () => {
 	page.value = 0;
-	order.value = sortBy.oldest;
+	order.value = SortOrder.Oldest;
 	reordered.value = setlists.value.filter(s => s.entity.date != '').sort(
 		(a,b) => (new Date(a.entity.date) > new Date(b.entity.date)) ? 1 : ((new Date(b.entity.date) > new Date(a.entity.date)) ? -1 : 0)
 	);
diff --git a/frontend/src/widgets/WidgetSongList.vue b/frontend/src/widgets/WidgetSongList.vue
index 9e499e78..103bc74d 100644
--- a/frontend/src/widgets/WidgetSongList.vue
+++ b/frontend/src/widgets/WidgetSongList.vue
@@ -2,7 +2,7 @@
 	<panel-box v-if="songs?.length > 0">
 		<div class="flex justify-between items-start">
 			<div class="text-2xl">
-				{{ t('widget.' + keyByValue(sortBy, order)) }} {{ t('page.songs', 2) }}
+				{{ t('widget.' + order) }} {{ t('page.songs', 2) }}
 			</div>
 			<div class="flex gap-1">
 				<secondary-button
@@ -33,7 +33,7 @@
 						<div class="-mt-0.5">{{ song.entity.key }}</div>
 					</figure>
 					<figure
-						v-if="order == sortBy.popular"
+						v-if="order == SortOrder.Popular"
 						class="flex justify-center items-center bg-blade-300 dark:bg-blade-700 font-semibold py-1 w-12"
 						:title="t('title.songOccuredOn', { num: song.popularity })"
 					>
@@ -41,7 +41,7 @@
 						<icon-x class="w-3 h-3 stroke-2 -mr-1" />
 					</figure>
 					<figure
-						v-if="order == sortBy.newest || order == sortBy.oldest"
+						v-if="order == SortOrder.Newest || order == SortOrder.Oldest"
 						class="flex justify-center items-center bg-blade-300 dark:bg-blade-700 font-semibold py-1 w-12"
 						:title="song.entity.year ? t('title.songPublishedIn', { year: song.entity.year }) : t('title.noYear')"
 					>
@@ -59,11 +59,11 @@
 				<icon-arrows-shuffle class="w-5 h-5 stroke-1.5" />
 				{{ t('button.shuffle') }}
 			</secondary-button>
-			<secondary-button v-if="order != sortBy.newest" @click="newestSongs">
+			<secondary-button v-if="order != SortOrder.Newest" @click="newestSongs">
 				<icon-arrow-up class="w-5 h-5 stroke-1.5" />
 				{{ t('widget.newest') }}
 			</secondary-button>
-			<secondary-button v-if="order == sortBy.newest" @click="oldestSongs">
+			<secondary-button v-if="order == SortOrder.Newest" @click="oldestSongs">
 				<icon-arrow-down class="w-5 h-5 stroke-1.5" />
 				{{ t('widget.oldest') }}
 			</secondary-button>
@@ -79,9 +79,11 @@
 	</panel-box>
 </template>
 
-<script setup>
-import { keyByValue } from '@/utils.js';
-import { ref, computed, inject } from 'vue';
+<script setup lang="ts">
+import { injectStrict, setlistsKey, songsKey } from '@/keys';
+import { SortOrder } from '@/definitions';
+import { ref, computed } from 'vue';
+import type { Song } from '@backend/models';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import LinkButton from '@/elements/LinkButton.vue';
@@ -104,27 +106,19 @@ const { t } = useI18n();
 const router = useRouter();
 
 // injected properties
-const songs = inject('songs');
-const setlists = inject('setlists');
-
-// sorting order
-const sortBy = {
-	newest: 1,
-	oldest: 2,
-	random: 3,
-	popular: 4,
-}
+const songs = injectStrict(songsKey);
+const setlists = injectStrict(setlistsKey);
 
 // list data
-const order      = ref(sortBy.newest);
-const reordered  = ref([]);
+const order      = ref<SortOrder>(SortOrder.Newest);
+const reordered  = ref<(Song & { popularity?: number })[]>([]);
 const page       = ref(0);
 const listLength = 6;
 
 // sort song list
 const shuffleSongs = () => {
 	page.value = 0;
-	order.value = sortBy.random;
+	order.value = SortOrder.Random;
 	let list = songs.value;
 	for (let i = list.length - 1; i > 0; i--) {
 		const j = Math.floor(Math.random() * (i + 1));
@@ -134,23 +128,23 @@ const shuffleSongs = () => {
 };
 const newestSongs = () => {
 	page.value = 0;
-	order.value = sortBy.newest;
-	reordered.value = songs.value.filter(s => s.entity.year > 0).sort(
-		(a, b) => (a.entity.year < b.entity.year) ? 1 : ((b.entity.year < a.entity.year) ? -1 : 0)
+	order.value = SortOrder.Newest;
+	reordered.value = songs.value.filter(s => (s.entity.year ?? 0) > 0).sort(
+		(a, b) => ((a.entity.year ?? 0) < (b.entity.year ?? 0)) ? 1 : (((b.entity.year ?? 0) < (a.entity.year ?? 0)) ? -1 : 0)
 	);
 	return reordered.value;
 };
 const oldestSongs = () => {
 	page.value = 0;
-	order.value = sortBy.oldest;
-	reordered.value = songs.value.filter(s => s.entity.year > 0).sort(
-		(a, b) => (a.entity.year > b.entity.year) ? 1 : ((b.entity.year > a.entity.year) ? -1 : 0)
+	order.value = SortOrder.Oldest;
+	reordered.value = songs.value.filter(s => (s.entity.year ?? 0) > 0).sort(
+		(a, b) => ((a.entity.year ?? 0) > (b.entity.year ?? 0)) ? 1 : (((b.entity.year ?? 0) > (a.entity.year ?? 0)) ? -1 : 0)
 	);
 };
 const popularSongs = () => {
 	page.value = 0;
-	order.value = sortBy.popular;
-	let list = {};
+	order.value = SortOrder.Popular;
+	let list: Record<string, number> = {};
 	setlists.value.forEach(setlist => {
 		if (setlist.entity.songs) {
 			setlist.entity.songs.forEach(song => {
@@ -162,15 +156,15 @@ const popularSongs = () => {
 			});
 		}
 	});
-	var idList = [];
+	var idList: [string, number][] = [];
 	for (var id in list) {
 		idList.push([id, list[id]]);
 	}
-	let orderedSongIds = idList.sort((a, b) => b[1] - a[1]).reduce((a, c) => a.concat(c[0]), []);
+	let orderedSongIds = idList.sort((a, b) => b[1] - a[1]).reduce((a: string[], c) => a.concat(c[0]), []);
 	reordered.value = songs.value
 		.filter(s => orderedSongIds.includes(s.id))
 		.map(s => Object.assign({popularity: list[s.id]}, s))
-		.sort((a, b) => (a.popularity < b.popularity) ? 1 : ((b.popularity < a.popularity) ? -1 : 0));
+		.sort((a, b) => ((a.popularity ?? 0) < (b.popularity ?? 0)) ? 1 : (((b.popularity ?? 0) < (a.popularity ?? 0)) ? -1 : 0));
 };
 
 // handle pagination
diff --git a/frontend/src/widgets/WidgetSongOfYear.vue b/frontend/src/widgets/WidgetSongOfYear.vue
index 9f590390..9210c3e5 100644
--- a/frontend/src/widgets/WidgetSongOfYear.vue
+++ b/frontend/src/widgets/WidgetSongOfYear.vue
@@ -54,8 +54,10 @@
 	</panel-box>
 </template>
 
-<script setup>
-import { ref, computed, inject } from 'vue';
+<script setup lang="ts">
+import { injectStrict, setlistsKey, songsKey } from '@/keys';
+import { ref, computed } from 'vue';
+import type { Song } from '@backend/models';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import LinkButton from '@/elements/LinkButton.vue';
@@ -74,8 +76,8 @@ const { t } = useI18n();
 const router = useRouter();
 
 // injected properties
-const songs = inject('songs');
-const setlists = inject('setlists');
+const songs = injectStrict(songsKey);
+const setlists = injectStrict(setlistsKey);
 
 // list data
 const page = ref(0);
@@ -83,7 +85,7 @@ const listLength = 7;
 
 // build song of year list
 const songOfYear = computed(() => {
-	let list = {};
+	let list: Record<string, Record<string, number>> = {};
 	setlists.value.forEach(setlist => {
 		let year = setlist.entity.date.slice(0, 4);
 		if (year && setlist.entity.songs) {
@@ -101,7 +103,7 @@ const songOfYear = computed(() => {
 			});
 		}
 	});
-	let songsToYear = [];
+	let songsToYear: { year: string, song: Song, count: number }[] = [];
 	for (let year in list) {
 		let maxId = '', maxCount = 0;
 		for (let id in list[year]) {
@@ -110,14 +112,17 @@ const songOfYear = computed(() => {
 				maxCount = list[year][id];
 			}
 		}
-		songsToYear.push({ year: year, song: songs.value.find(s => s.entity.slug == maxId), count: maxCount });
+		const song = songs.value.find(s => s.entity.slug == maxId);
+		if (song) {
+			songsToYear.push({ year: year, song, count: maxCount });
+		}
 	}
 	return songsToYear;
 });
 
 // handle pagination
 const songlist = computed(() => {
-	const list = songOfYear.value.sort((a,b) => b.year - a.year);
+	const list = songOfYear.value.toSorted((a,b) => Number(b.year) - Number(a.year));
 	return list.slice(page.value*listLength, (page.value+1)*listLength);
 });
 const isFirstPage = computed(() => page.value == 0);
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
new file mode 100644
index 00000000..6ce2fdc7
--- /dev/null
+++ b/frontend/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"],
+      "@backend/*": ["../backend/dist/*"]
+    },
+    "types": ["vite/client", "node"],
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.vue",
+    "vite.config.ts"
+  ],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/frontend/vite.config.js b/frontend/vite.config.ts
similarity index 100%
rename from frontend/vite.config.js
rename to frontend/vite.config.ts