diff --git a/package-lock.json b/package-lock.json
index ac1d6c98..f45c8b80 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,18 +1,21 @@
 {
 	"name": "memories",
-	"version": "0.0.0",
+	"version": "1.0.1",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "memories",
-			"version": "0.0.0",
+			"version": "1.0.1",
 			"license": "agpl",
 			"dependencies": {
 				"@nextcloud/l10n": "^1.6.0",
 				"@nextcloud/vue": "^6.0.0-beta.6",
 				"path-posix": "^1.0.0",
+				"reflect-metadata": "^0.1.13",
 				"vue": "^2.7.10",
+				"vue-class-component": "^7.2.6",
+				"vue-property-decorator": "^9.1.2",
 				"vue-router": "^3.5.4",
 				"vue-virtual-scroller": "^1.0.10",
 				"webdav": "^4.11.0"
@@ -22,7 +25,10 @@
 				"@nextcloud/browserslist-config": "^2.3.0",
 				"@nextcloud/eslint-config": "^8.1.2",
 				"@nextcloud/stylelint-config": "^2.2.0",
-				"@nextcloud/webpack-vue-config": "^5.3.0"
+				"@nextcloud/webpack-vue-config": "^5.3.0",
+				"@types/url-parse": "^1.4.8",
+				"ts-loader": "^9.3.1",
+				"typescript": "^4.8.3"
 			},
 			"engines": {
 				"node": ">=14.0.0",
@@ -2583,6 +2589,12 @@
 				"@types/node": "*"
 			}
 		},
+		"node_modules/@types/url-parse": {
+			"version": "1.4.8",
+			"resolved": "https://registry.npmjs.org/@types/url-parse/-/url-parse-1.4.8.tgz",
+			"integrity": "sha512-zqqcGKyNWgTLFBxmaexGUKQyWqeG7HjXj20EuQJSJWwXe54BjX0ihIo5cJB9yAQzH8dNugJ9GvkBYMjPXs/PJw==",
+			"dev": true
+		},
 		"node_modules/@types/ws": {
 			"version": "8.5.3",
 			"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
@@ -3450,7 +3462,6 @@
 			"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
 			"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
 			"dev": true,
-			"peer": true,
 			"dependencies": {
 				"fill-range": "^7.0.1"
 			},
@@ -4706,7 +4717,6 @@
 			"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz",
 			"integrity": "sha512-T0yTFjdpldGY8PmuXXR0PyQ1ufZpEGiHVrp7zHKB7jdR4qlmZHhONVM5AQOAWXuF/w3dnHbEQVrNptJgt7F+cQ==",
 			"dev": true,
-			"peer": true,
 			"dependencies": {
 				"graceful-fs": "^4.2.4",
 				"tapable": "^2.2.0"
@@ -5803,7 +5813,6 @@
 			"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
 			"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
 			"dev": true,
-			"peer": true,
 			"dependencies": {
 				"to-regex-range": "^5.0.1"
 			},
@@ -6283,8 +6292,7 @@
 			"version": "4.2.10",
 			"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
 			"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
-			"dev": true,
-			"peer": true
+			"dev": true
 		},
 		"node_modules/grapheme-splitter": {
 			"version": "1.0.4",
@@ -7091,7 +7099,6 @@
 			"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
 			"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
 			"dev": true,
-			"peer": true,
 			"engines": {
 				"node": ">=0.12.0"
 			}
@@ -7715,7 +7722,6 @@
 			"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
 			"integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
 			"dev": true,
-			"peer": true,
 			"dependencies": {
 				"braces": "^3.0.2",
 				"picomatch": "^2.3.1"
@@ -8425,7 +8431,6 @@
 			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
 			"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
 			"dev": true,
-			"peer": true,
 			"engines": {
 				"node": ">=8.6"
 			},
@@ -9110,6 +9115,11 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/reflect-metadata": {
+			"version": "0.1.13",
+			"resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.13.tgz",
+			"integrity": "sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg=="
+		},
 		"node_modules/regenerate": {
 			"version": "1.4.2",
 			"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -10490,7 +10500,6 @@
 			"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
 			"integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
 			"dev": true,
-			"peer": true,
 			"engines": {
 				"node": ">=6"
 			}
@@ -10625,7 +10634,6 @@
 			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
 			"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
 			"dev": true,
-			"peer": true,
 			"dependencies": {
 				"is-number": "^7.0.0"
 			},
@@ -10663,6 +10671,110 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/ts-loader": {
+			"version": "9.3.1",
+			"resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.3.1.tgz",
+			"integrity": "sha512-OkyShkcZTsTwyS3Kt7a4rsT/t2qvEVQuKCTg4LJmpj9fhFR7ukGdZwV6Qq3tRUkqcXtfGpPR7+hFKHCG/0d3Lw==",
+			"dev": true,
+			"dependencies": {
+				"chalk": "^4.1.0",
+				"enhanced-resolve": "^5.0.0",
+				"micromatch": "^4.0.0",
+				"semver": "^7.3.4"
+			},
+			"engines": {
+				"node": ">=12.0.0"
+			},
+			"peerDependencies": {
+				"typescript": "*",
+				"webpack": "^5.0.0"
+			}
+		},
+		"node_modules/ts-loader/node_modules/ansi-styles": {
+			"version": "4.3.0",
+			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+			"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+			"dev": true,
+			"dependencies": {
+				"color-convert": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/ansi-styles?sponsor=1"
+			}
+		},
+		"node_modules/ts-loader/node_modules/chalk": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+			"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+			"dev": true,
+			"dependencies": {
+				"ansi-styles": "^4.1.0",
+				"supports-color": "^7.1.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/chalk?sponsor=1"
+			}
+		},
+		"node_modules/ts-loader/node_modules/color-convert": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+			"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+			"dev": true,
+			"dependencies": {
+				"color-name": "~1.1.4"
+			},
+			"engines": {
+				"node": ">=7.0.0"
+			}
+		},
+		"node_modules/ts-loader/node_modules/color-name": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+			"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+			"dev": true
+		},
+		"node_modules/ts-loader/node_modules/has-flag": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/ts-loader/node_modules/semver": {
+			"version": "7.3.7",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
+			"integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
+			"dev": true,
+			"dependencies": {
+				"lru-cache": "^6.0.0"
+			},
+			"bin": {
+				"semver": "bin/semver.js"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/ts-loader/node_modules/supports-color": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+			"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+			"dev": true,
+			"dependencies": {
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/tsconfig-paths": {
 			"version": "3.14.1",
 			"resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz",
@@ -10741,6 +10853,19 @@
 				"node": ">= 0.6"
 			}
 		},
+		"node_modules/typescript": {
+			"version": "4.8.3",
+			"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.3.tgz",
+			"integrity": "sha512-goMHfm00nWPa8UvR/CPSvykqf6dVV8x/dp0c5mFTMTIu0u0FlGWRioyy7Nn0PGAdHxpJZnuO/ut+PpQ8UiHAig==",
+			"dev": true,
+			"bin": {
+				"tsc": "bin/tsc",
+				"tsserver": "bin/tsserver"
+			},
+			"engines": {
+				"node": ">=4.2.0"
+			}
+		},
 		"node_modules/unbox-primitive": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -10973,6 +11098,14 @@
 				"csstype": "^3.1.0"
 			}
 		},
+		"node_modules/vue-class-component": {
+			"version": "7.2.6",
+			"resolved": "https://registry.npmjs.org/vue-class-component/-/vue-class-component-7.2.6.tgz",
+			"integrity": "sha512-+eaQXVrAm/LldalI272PpDe3+i4mPis0ORiMYxF6Ae4hyuCh15W8Idet7wPUEs4N4YptgFHGys4UrgNQOMyO6w==",
+			"peerDependencies": {
+				"vue": "^2.0.0"
+			}
+		},
 		"node_modules/vue-color": {
 			"version": "2.8.1",
 			"resolved": "https://registry.npmjs.org/vue-color/-/vue-color-2.8.1.tgz",
@@ -11139,6 +11272,15 @@
 			"resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-0.4.6.tgz",
 			"integrity": "sha512-xo0CEVdkjSjhJoDdLSvoZoQrw/H2BlzB5jrCBKGZNXN2zdZgMuZ9BKrxXDjNP2AxlcCoKc8OahI3F3r3JGLv2Q=="
 		},
+		"node_modules/vue-property-decorator": {
+			"version": "9.1.2",
+			"resolved": "https://registry.npmjs.org/vue-property-decorator/-/vue-property-decorator-9.1.2.tgz",
+			"integrity": "sha512-xYA8MkZynPBGd/w5QFJ2d/NM0z/YeegMqYTphy7NJQXbZcuU6FC6AOdUAcy4SXP+YnkerC6AfH+ldg7PDk9ESQ==",
+			"peerDependencies": {
+				"vue": "*",
+				"vue-class-component": "*"
+			}
+		},
 		"node_modules/vue-resize": {
 			"version": "0.4.5",
 			"resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-0.4.5.tgz",
@@ -13744,6 +13886,12 @@
 				"@types/node": "*"
 			}
 		},
+		"@types/url-parse": {
+			"version": "1.4.8",
+			"resolved": "https://registry.npmjs.org/@types/url-parse/-/url-parse-1.4.8.tgz",
+			"integrity": "sha512-zqqcGKyNWgTLFBxmaexGUKQyWqeG7HjXj20EuQJSJWwXe54BjX0ihIo5cJB9yAQzH8dNugJ9GvkBYMjPXs/PJw==",
+			"dev": true
+		},
 		"@types/ws": {
 			"version": "8.5.3",
 			"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
@@ -14474,7 +14622,6 @@
 			"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
 			"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
 			"dev": true,
-			"peer": true,
 			"requires": {
 				"fill-range": "^7.0.1"
 			}
@@ -15468,7 +15615,6 @@
 			"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz",
 			"integrity": "sha512-T0yTFjdpldGY8PmuXXR0PyQ1ufZpEGiHVrp7zHKB7jdR4qlmZHhONVM5AQOAWXuF/w3dnHbEQVrNptJgt7F+cQ==",
 			"dev": true,
-			"peer": true,
 			"requires": {
 				"graceful-fs": "^4.2.4",
 				"tapable": "^2.2.0"
@@ -16299,7 +16445,6 @@
 			"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
 			"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
 			"dev": true,
-			"peer": true,
 			"requires": {
 				"to-regex-range": "^5.0.1"
 			}
@@ -16666,8 +16811,7 @@
 			"version": "4.2.10",
 			"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
 			"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
-			"dev": true,
-			"peer": true
+			"dev": true
 		},
 		"grapheme-splitter": {
 			"version": "1.0.4",
@@ -17257,8 +17401,7 @@
 			"version": "7.0.0",
 			"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
 			"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-			"dev": true,
-			"peer": true
+			"dev": true
 		},
 		"is-number-object": {
 			"version": "1.0.7",
@@ -17739,7 +17882,6 @@
 			"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
 			"integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
 			"dev": true,
-			"peer": true,
 			"requires": {
 				"braces": "^3.0.2",
 				"picomatch": "^2.3.1"
@@ -18293,8 +18435,7 @@
 			"version": "2.3.1",
 			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
 			"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-			"dev": true,
-			"peer": true
+			"dev": true
 		},
 		"pkg-dir": {
 			"version": "4.2.0",
@@ -18801,6 +18942,11 @@
 				"strip-indent": "^3.0.0"
 			}
 		},
+		"reflect-metadata": {
+			"version": "0.1.13",
+			"resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.13.tgz",
+			"integrity": "sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg=="
+		},
 		"regenerate": {
 			"version": "1.4.2",
 			"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -19883,8 +20029,7 @@
 			"version": "2.2.1",
 			"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
 			"integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
-			"dev": true,
-			"peer": true
+			"dev": true
 		},
 		"terser": {
 			"version": "5.14.2",
@@ -19977,7 +20122,6 @@
 			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
 			"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
 			"dev": true,
-			"peer": true,
 			"requires": {
 				"is-number": "^7.0.0"
 			}
@@ -20006,6 +20150,78 @@
 			"dev": true,
 			"peer": true
 		},
+		"ts-loader": {
+			"version": "9.3.1",
+			"resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.3.1.tgz",
+			"integrity": "sha512-OkyShkcZTsTwyS3Kt7a4rsT/t2qvEVQuKCTg4LJmpj9fhFR7ukGdZwV6Qq3tRUkqcXtfGpPR7+hFKHCG/0d3Lw==",
+			"dev": true,
+			"requires": {
+				"chalk": "^4.1.0",
+				"enhanced-resolve": "^5.0.0",
+				"micromatch": "^4.0.0",
+				"semver": "^7.3.4"
+			},
+			"dependencies": {
+				"ansi-styles": {
+					"version": "4.3.0",
+					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+					"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+					"dev": true,
+					"requires": {
+						"color-convert": "^2.0.1"
+					}
+				},
+				"chalk": {
+					"version": "4.1.2",
+					"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+					"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+					"dev": true,
+					"requires": {
+						"ansi-styles": "^4.1.0",
+						"supports-color": "^7.1.0"
+					}
+				},
+				"color-convert": {
+					"version": "2.0.1",
+					"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+					"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+					"dev": true,
+					"requires": {
+						"color-name": "~1.1.4"
+					}
+				},
+				"color-name": {
+					"version": "1.1.4",
+					"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+					"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+					"dev": true
+				},
+				"has-flag": {
+					"version": "4.0.0",
+					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+					"dev": true
+				},
+				"semver": {
+					"version": "7.3.7",
+					"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
+					"integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
+					"dev": true,
+					"requires": {
+						"lru-cache": "^6.0.0"
+					}
+				},
+				"supports-color": {
+					"version": "7.2.0",
+					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+					"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+					"dev": true,
+					"requires": {
+						"has-flag": "^4.0.0"
+					}
+				}
+			}
+		},
 		"tsconfig-paths": {
 			"version": "3.14.1",
 			"resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz",
@@ -20071,6 +20287,12 @@
 				"mime-types": "~2.1.24"
 			}
 		},
+		"typescript": {
+			"version": "4.8.3",
+			"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.3.tgz",
+			"integrity": "sha512-goMHfm00nWPa8UvR/CPSvykqf6dVV8x/dp0c5mFTMTIu0u0FlGWRioyy7Nn0PGAdHxpJZnuO/ut+PpQ8UiHAig==",
+			"dev": true
+		},
 		"unbox-primitive": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -20259,6 +20481,12 @@
 				"csstype": "^3.1.0"
 			}
 		},
+		"vue-class-component": {
+			"version": "7.2.6",
+			"resolved": "https://registry.npmjs.org/vue-class-component/-/vue-class-component-7.2.6.tgz",
+			"integrity": "sha512-+eaQXVrAm/LldalI272PpDe3+i4mPis0ORiMYxF6Ae4hyuCh15W8Idet7wPUEs4N4YptgFHGys4UrgNQOMyO6w==",
+			"requires": {}
+		},
 		"vue-color": {
 			"version": "2.8.1",
 			"resolved": "https://registry.npmjs.org/vue-color/-/vue-color-2.8.1.tgz",
@@ -20383,6 +20611,12 @@
 			"resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-0.4.6.tgz",
 			"integrity": "sha512-xo0CEVdkjSjhJoDdLSvoZoQrw/H2BlzB5jrCBKGZNXN2zdZgMuZ9BKrxXDjNP2AxlcCoKc8OahI3F3r3JGLv2Q=="
 		},
+		"vue-property-decorator": {
+			"version": "9.1.2",
+			"resolved": "https://registry.npmjs.org/vue-property-decorator/-/vue-property-decorator-9.1.2.tgz",
+			"integrity": "sha512-xYA8MkZynPBGd/w5QFJ2d/NM0z/YeegMqYTphy7NJQXbZcuU6FC6AOdUAcy4SXP+YnkerC6AfH+ldg7PDk9ESQ==",
+			"requires": {}
+		},
 		"vue-resize": {
 			"version": "0.4.5",
 			"resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-0.4.5.tgz",
diff --git a/package.json b/package.json
index c06f7872..15e922d8 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,10 @@
 		"@nextcloud/l10n": "^1.6.0",
 		"@nextcloud/vue": "^6.0.0-beta.6",
 		"path-posix": "^1.0.0",
+		"reflect-metadata": "^0.1.13",
 		"vue": "^2.7.10",
+		"vue-class-component": "^7.2.6",
+		"vue-property-decorator": "^9.1.2",
 		"vue-router": "^3.5.4",
 		"vue-virtual-scroller": "^1.0.10",
 		"webdav": "^4.11.0"
@@ -52,6 +55,9 @@
 		"@nextcloud/browserslist-config": "^2.3.0",
 		"@nextcloud/eslint-config": "^8.1.2",
 		"@nextcloud/stylelint-config": "^2.2.0",
-		"@nextcloud/webpack-vue-config": "^5.3.0"
+		"@nextcloud/webpack-vue-config": "^5.3.0",
+		"@types/url-parse": "^1.4.8",
+		"ts-loader": "^9.3.1",
+		"typescript": "^4.8.3"
 	}
 }
diff --git a/src/App.vue b/src/App.vue
index 9af5bf43..05d27eaa 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -45,7 +45,7 @@
 }
 </style>
 
-<script>
+<script lang="ts">
 import { NcContent, NcAppContent, NcAppNavigation, NcAppNavigationItem, NcAppNavigationSettings} from '@nextcloud/vue'
 
 import Timeline from './components/Timeline.vue'
diff --git a/src/components/Photo.vue b/src/components/Photo.vue
index feb510d6..8ce382a0 100644
--- a/src/components/Photo.vue
+++ b/src/components/Photo.vue
@@ -36,174 +36,159 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator';
+import { IDay, IPhoto } from "../types";
+
 import * as dav from "../services/DavRequests";
 import constants from "../mixins/constants"
 import errorsvg from "../assets/error.svg";
 import { getPreviewUrl } from "../services/FileUtils";
 
-export default {
-    name: 'Photo',
-    data() {
-        return {
-            touchTimer: 0,
-            c: constants,
+@Component({})
+export default class Photo extends Vue {
+    private touchTimer = 0;
+    private readonly c = constants;
+
+    @Prop() data: IPhoto;
+    @Prop() rowHeight: number;
+    @Prop() day: IDay;
+
+    /** Get URL for image to show */
+    getUrl() {
+        if (this.data.flag & constants.FLAG_PLACEHOLDER) {
+            return undefined;
+        } else if (this.data.flag & constants.FLAG_LOAD_FAIL) {
+            return errorsvg;
+        } else if (this.data.flag & constants.FLAG_FORCE_RELOAD) {
+            this.data.flag &= ~constants.FLAG_FORCE_RELOAD;
+            return undefined;
+        } else {
+            return getPreviewUrl(this.data.fileid, this.data.etag);
         }
-    },
-    props: {
-        data: {
-            type: Object,
-            required: true
-        },
-        rowHeight: {
-            type: Number,
-            required: true,
-        },
-        day: {
-            type: Object,
-            required: true,
-        },
-    },
-    methods: {
-        /** Get URL for image to show */
-        getUrl() {
-            if (this.data.flag & constants.FLAG_PLACEHOLDER) {
-                return undefined;
-            } else if (this.data.flag & constants.FLAG_LOAD_FAIL) {
-                return errorsvg;
-            } else if (this.data.flag & constants.FLAG_FORCE_RELOAD) {
-                this.data.flag &= ~constants.FLAG_FORCE_RELOAD;
-                return undefined;
-            } else {
-                return getPreviewUrl(this.data.fileid, this.data.etag);
+    }
+
+    /** Error in loading image */
+    error(e: any) {
+        this.data.flag |= (constants.FLAG_LOADED | constants.FLAG_LOAD_FAIL);
+    }
+
+    /** Pass to parent */
+    click() {
+        this.$emit('clickImg', this);
+    }
+
+    /** Open viewer */
+    async openFile() {
+        // Check if this is a placeholder
+        if (this.data.flag & constants.FLAG_PLACEHOLDER) {
+            return;
+        }
+
+        // Check if already loaded fileInfos or load
+        let fileInfos = this.day.fileInfos;
+        if (!fileInfos) {
+            const ids = this.day.detail.map(p => p.fileid);
+            try {
+                fileInfos = await dav.getFiles(ids);
+            } catch (e) {
+                console.error('Failed to load fileInfos', e);
             }
-        },
-
-        /** Error in loading image */
-        error(e) {
-            this.data.flag |= (constants.FLAG_LOADED | constants.FLAG_LOAD_FAIL);
-        },
-
-        /** Pass to parent */
-        click() {
-            this.$emit('clickImg', this);
-        },
-
-        /** Open viewer */
-        async openFile() {
-            // Check if this is a placeholder
-            if (this.data.flag & constants.FLAG_PLACEHOLDER) {
+            if (fileInfos.length === 0) {
                 return;
             }
 
-            // Check if already loaded fileInfos or load
-            let fileInfos = this.day.fileInfos;
-            if (!fileInfos) {
-                const ids = this.day.detail.map(p => p.fileid);
-                try {
-                    this.loading = true;
-                    fileInfos = await dav.getFiles(ids);
-                } catch (e) {
-                    console.error('Failed to load fileInfos', e);
-                } finally {
-                    this.loading = false;
-                }
-                if (fileInfos.length === 0) {
-                    return;
-                }
-
-                // Fix sorting of the fileInfos
-                const itemPositions = {};
-                for (const [index, id] of ids.entries()) {
-                    itemPositions[id] = index;
-                }
-                fileInfos.sort(function (a, b) {
-                    return itemPositions[a.fileid] - itemPositions[b.fileid];
-                });
-
-                // Store in day with a original copy
-                this.day.fileInfos = fileInfos;
-                this.day.fiOrigIds = new Set(fileInfos.map(f => f.fileid));
+            // Fix sorting of the fileInfos
+            const itemPositions = {};
+            for (const [index, id] of ids.entries()) {
+                itemPositions[id] = index;
             }
-
-            // Get this photo in the fileInfos
-            const photo = fileInfos.find(d => Number(d.fileid) === Number(this.data.fileid));
-            if (!photo) {
-                alert('Cannot find this photo anymore!');
-                return;
-            }
-
-            // Key to store sidebar state
-            const SIDEBAR_KEY = 'memories:sidebar-open';
-
-            // Open viewer
-            OCA.Viewer.open({
-                path: photo.filename,   // path
-                list: fileInfos,        // file list
-                canLoop: false,         // don't loop
-                onClose: () => {        // on viewer close
-                    if (OCA.Files.Sidebar.file) {
-                        localStorage.setItem(SIDEBAR_KEY, '1');
-                    } else {
-                        localStorage.removeItem(SIDEBAR_KEY);
-                    }
-                    OCA.Files.Sidebar.close();
-
-                    // Check for any deleted files and remove them from the main view
-                    this.processDeleted();
-                },
+            fileInfos.sort(function (a, b) {
+                return itemPositions[a.fileid] - itemPositions[b.fileid];
             });
 
-            // Restore sidebar state
-            if (localStorage.getItem(SIDEBAR_KEY) === '1') {
-                OCA.Files.Sidebar.open(photo.filename);
-            }
-        },
+            // Store in day with a original copy
+            this.day.fileInfos = fileInfos;
+            this.day.origFileIds = new Set(fileInfos.map(f => f.fileid));
+        }
 
-        /** Remove deleted files from main view */
-        processDeleted() {
-            // This is really an ugly hack, but the viewer
-            // does not provide a way to get the deleted files
+        // Get this photo in the fileInfos
+        const photo = fileInfos.find(d => Number(d.fileid) === Number(this.data.fileid));
+        if (!photo) {
+            alert('Cannot find this photo anymore!');
+            return;
+        }
 
-            // Compare new and old list of ids
-            const newIds = new Set(this.day.fileInfos.map(f => f.fileid));
-            const remIds = new Set([...this.day.fiOrigIds].filter(x => !newIds.has(x)));
+        // Key to store sidebar state
+        const SIDEBAR_KEY = 'memories:sidebar-open';
 
-            // Exit if nothing to do
-            if (remIds.size === 0) {
-                return;
-            }
-            this.day.fiOrigIds = newIds;
+        // Open viewer
+        globalThis.OCA.Viewer.open({
+            path: photo.filename,   // path
+            list: fileInfos,        // file list
+            canLoop: false,         // don't loop
+            onClose: () => {        // on viewer close
+                if (globalThis.OCA.Files.Sidebar.file) {
+                    localStorage.setItem(SIDEBAR_KEY, '1');
+                } else {
+                    localStorage.removeItem(SIDEBAR_KEY);
+                }
+                globalThis.OCA.Files.Sidebar.close();
 
-            // Remove deleted files from details
-            this.$emit('reprocess', remIds, new Set([this.day]));
-        },
+                // Check for any deleted files and remove them from the main view
+                this.processDeleted();
+            },
+        });
 
-        toggleSelect() {
-            if (this.data.flag & constants.FLAG_PLACEHOLDER) {
-                return;
-            }
-            this.$emit('select', this.data);
-        },
+        // Restore sidebar state
+        if (localStorage.getItem(SIDEBAR_KEY) === '1') {
+            globalThis.OCA.Files.Sidebar.open(photo.filename);
+        }
+    }
 
-        touchstart() {
-            this.touchTimer = setTimeout(() => {
-                this.toggleSelect();
-                this.touchTimer = 0;
-            }, 600);
-        },
+    /** Remove deleted files from main view */
+    processDeleted() {
+        // This is really an ugly hack, but the viewer
+        // does not provide a way to get the deleted files
 
-        contextmenu(e) {
-            e.preventDefault();
-            e.stopPropagation();
-        },
+        // Compare new and old list of ids
+        const newIds = new Set(this.day.fileInfos.map(f => f.fileid));
+        const remIds = new Set([...this.day.origFileIds].filter(x => !newIds.has(x)));
 
-        touchend() {
-            if (this.touchTimer) {
-                clearTimeout(this.touchTimer);
-                this.touchTimer = 0;
-            }
-        },
+        // Exit if nothing to do
+        if (remIds.size === 0) {
+            return;
+        }
+        this.day.origFileIds = newIds;
+
+        // Remove deleted files from details
+        this.$emit('reprocess', remIds, new Set([this.day]));
+    }
+
+    toggleSelect() {
+        if (this.data.flag & constants.FLAG_PLACEHOLDER) {
+            return;
+        }
+        this.$emit('select', this.data);
+    }
+
+    touchstart() {
+        this.touchTimer = window.setTimeout(() => {
+            this.toggleSelect();
+            this.touchTimer = 0;
+        }, 600);
+    }
+
+    contextmenu(e: Event) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
+
+    touchend() {
+        if (this.touchTimer) {
+            clearTimeout(this.touchTimer);
+            this.touchTimer = 0;
+        }
     }
 }
 </script>
diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue
index 6ae06e45..fb2760e9 100644
--- a/src/components/Timeline.vue
+++ b/src/components/Timeline.vue
@@ -91,15 +91,18 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
+import { Component, Watch, Vue } from 'vue-property-decorator';
+import { IDay, IPhoto, IRow, ITick } from "../types";
+import { NcActions, NcActionButton, NcButton } from '@nextcloud/vue';
+import { generateUrl } from '@nextcloud/router'
+
 import * as dav from "../services/DavRequests";
 import * as utils from "../services/Utils";
 import axios from '@nextcloud/axios'
-import Folder from "./Folder";
-import Photo from "./Photo";
+import Folder from "./Folder.vue";
+import Photo from "./Photo.vue";
 import constants from "../mixins/constants";
-import { generateUrl } from '@nextcloud/router'
-import { NcActions, NcActionButton, NcButton } from '@nextcloud/vue'
 
 const SCROLL_LOAD_DELAY = 100;          // Delay in loading data when scrolling
 const MAX_PHOTO_WIDTH = 175;            // Max width of a photo
@@ -117,779 +120,781 @@ for (const [key, value] of Object.entries(API_ROUTES)) {
     API_ROUTES[key] = '/apps/memories/api/' + value;
 }
 
-export default {
+@Component({
     components: {
         Folder,
         Photo,
         NcActions,
         NcActionButton,
         NcButton
-    },
-    data() {
-        return {
-            /** Loading days response */
-            loading: true,
-            /** Main list of rows */
-            list: [],
-            /** Counter of rows */
-            numRows: 0,
-            /** Computed number of columns */
-            numCols: 5,
-            /** Header rows for dayId key */
-            heads: {},
-            /** Original days response */
-            days: [],
+    }
+})
+export default class Timeline extends Vue {
+    /** Loading days response */
+    private loading = true;
+    /** Main list of rows */
+    private list: IRow[] = [];
+    /** Counter of rows */
+    private numRows = 0;
+    /** Computed number of columns */
+    private numCols = 5;
+    /** Header rows for dayId key */
+    private heads: { [dayid: number]: IRow } = {};
+    /** Original days response */
+    private days: IDay[] = [];
 
-            /** Computed row height */
-            rowHeight: 100,
-            /** Total height of recycler */
-            viewHeight: 1000,
-            /** Total height of timeline */
-            timelineHeight: 100,
-            /** Computed timeline ticks */
-            timelineTicks: [],
-            /** Computed timeline cursor top */
-            timelineCursorY: 0,
-            /** Timeline hover cursor top */
-            timelineHoverCursorY: -5,
-            /** Timeline hover cursor text */
-            timelineHoverCursorText: "",
+    /** Computed row height */
+    private rowHeight = 100;
+    /** Total height of recycler */
+    private viewHeight = 1000;
+    /** Total height of timeline */
+    private timelineHeight = 100;
+    /** Computed timeline ticks */
+    private timelineTicks: ITick[] = [];
+    /** Computed timeline cursor top */
+    private timelineCursorY = 0;
+    /** Timeline hover cursor top */
+    private timelineHoverCursorY = -5;
+    /** Timeline hover cursor text */
+    private timelineHoverCursorText = "";
 
-            /** Current start index */
-            currentStart: 0,
-            /** Current end index */
-            currentEnd: 0,
-            /** Scrolling currently */
-            scrolling: false,
-            /** Scrolling timer */
-            scrollTimer: null,
-            /** Resizing timer */
-            resizeTimer: null,
-            /** View size reflow timer */
-            reflowTimelineTimer: null,
-            /** Is mobile layout */
-            isMobile: false,
+    /** Current start index */
+    private currentStart = 0;
+    /** Current end index */
+    private currentEnd = 0;
+    /** Scrolling currently */
+    private scrolling = false;
+    /** Scrolling timer */
+    private scrollTimer = null as number | null;
+    /** Resizing timer */
+    private resizeTimer = null as number | null;
+    /** View size reflow timer */
+    private reflowTimelineTimer = null as number | null;
+    /** Is mobile layout */
+    private isMobile = false;
 
-            /** Set of dayIds for which images loaded */
-            loadedDays: new Set(),
-            /** Set of selected file ids */
-            selection: new Set(),
+    /** Set of dayIds for which images loaded */
+    private loadedDays = new Set<number>();
+    /** Set of selected file ids */
+    private selection = new Set<IPhoto>();
 
-            /** State for request cancellations */
-            state: Math.random(),
+    /** State for request cancellations */
+    private state = Math.random();
 
-            /** Constants for HTML template */
-            c: constants,
-        }
-    },
+    /** Constants for HTML template */
+    private readonly c = constants;
 
     mounted() {
         this.handleResize();
         this.fetchDays();
 
         // Timeline recycler init
-        this.$refs.recycler.$el.addEventListener('scroll', this.scrollPositionChange, false);
+        (this.$refs.recycler as any).$el.addEventListener('scroll', this.scrollPositionChange, false);
         this.scrollPositionChange();
-    },
+    }
 
-    watch: {
-        $route(from, to) {
-            this.resetState();
-            this.fetchDays();
-        },
-    },
+    @Watch('route')
+    routeChange(from, to) {
+        this.resetState();
+        this.fetchDays();
+    };
 
     beforeDestroy() {
         this.resetState();
-    },
+    }
 
-    methods: {
-        /** Reset all state */
-        resetState() {
-            this.clearSelection();
-            this.loading = true;
-            this.list = [];
-            this.numRows = 0;
-            this.heads = {};
-            this.days = [];
-            this.currentStart = 0;
-            this.currentEnd = 0;
-            this.timelineTicks = [];
-            this.state = Math.random();
-            this.loadedDays.clear();
-        },
+    /** Reset all state */
+    resetState() {
+        this.clearSelection();
+        this.loading = true;
+        this.list = [];
+        this.numRows = 0;
+        this.heads = {};
+        this.days = [];
+        this.currentStart = 0;
+        this.currentEnd = 0;
+        this.timelineTicks = [];
+        this.state = Math.random();
+        this.loadedDays.clear();
+    }
 
-        /** Do resize after some time */
-        handleResizeWithDelay() {
-            if (this.resizeTimer) {
-                clearTimeout(this.resizeTimer);
-            }
-            this.resizeTimer = setTimeout(() => {
-                this.handleResize();
-                this.resizeTimer = null;
-            }, 300);
-        },
+    /** Do resize after some time */
+    handleResizeWithDelay() {
+        if (this.resizeTimer) {
+            clearTimeout(this.resizeTimer);
+        }
+        this.resizeTimer = window.setTimeout(() => {
+            this.handleResize();
+            this.resizeTimer = null;
+        }, 300);
+    }
 
-        /** Handle window resize and initialization */
-        handleResize() {
-            let height = this.$refs.container.clientHeight;
-            let width = this.$refs.container.clientWidth;
-            this.timelineHeight = this.$refs.timelineScroll.clientHeight;
-            this.$refs.recycler.$el.style.height = (height - 4) + 'px';
+    /** Handle window resize and initialization */
+    handleResize() {
+        const e = this.$refs.container as Element;
+        let height = e.clientHeight;
+        let width = e.clientWidth;
+        this.timelineHeight = e.clientHeight;
 
-            // Mobile devices
-            if (window.innerWidth <= 768) {
-                width -= 4;
-                this.isMobile = true;
-            } else {
-                width -= 40;
-                this.isMobile = false;
+        const recycler = this.$refs.recycler as any;
+        recycler.$el.style.height = (height - 4) + 'px';
+
+        // Mobile devices
+        if (window.innerWidth <= 768) {
+            width -= 4;
+            this.isMobile = true;
+        } else {
+            width -= 40;
+            this.isMobile = false;
+        }
+
+        if (this.days.length === 0) {
+            // Don't change cols if already initialized
+            this.numCols = Math.max(MIN_COLS, Math.floor(width / MAX_PHOTO_WIDTH));
+        }
+
+        this.rowHeight = Math.floor(width / this.numCols);
+
+        // Set heights of rows
+        this.list.filter(r => !r.head).forEach(row => {
+            row.size = this.rowHeight;
+        });
+        this.reflowTimeline();
+    }
+
+    /**
+     * Triggered when position of scroll change.
+     * This does NOT indicate the items have changed, only that
+     * the pixel position of the recycler has changed.
+     */
+    scrollPositionChange(event?: any) {
+        if (event) {
+            this.timelineCursorY = event.target.scrollTop * this.timelineHeight / this.viewHeight;
+            this.timelineMoveHoverCursor(this.timelineCursorY);
+        }
+
+        if (this.scrollTimer) {
+            window.clearTimeout(this.scrollTimer);
+        }
+        this.scrolling = true;
+        this.scrollTimer = window.setTimeout(() => {
+            this.scrolling = false;
+            this.scrollTimer = null;
+        }, 1500);
+    }
+
+    /** Trigger when recycler view changes */
+    scrollChange(startIndex: number, endIndex: number) {
+        if (startIndex === this.currentStart && endIndex === this.currentEnd) {
+            return;
+        }
+
+        // Reset image state
+        for (let i = startIndex; i < endIndex; i++) {
+            const row = this.list[i];
+            if (!row) {
+                continue;
             }
 
-            if (this.days.length === 0) {
-                // Don't change cols if already initialized
-                this.numCols = Math.max(MIN_COLS, Math.floor(width / MAX_PHOTO_WIDTH));
-            }
-
-            this.rowHeight = Math.floor(width / this.numCols);
-
-            // Set heights of rows
-            this.list.filter(r => !r.head).forEach(row => {
-                row.size = this.rowHeight;
-            });
-            this.reflowTimeline();
-        },
-
-        /**
-         * Triggered when position of scroll change.
-         * This does NOT indicate the items have changed, only that
-         * the pixel position of the recycler has changed.
-         */
-        scrollPositionChange(event) {
-            if (event) {
-                this.timelineCursorY = event.target.scrollTop * this.timelineHeight / this.viewHeight;
-                this.timelineMoveHoverCursor(this.timelineCursorY);
-            }
-
-            if (this.scrollTimer) {
-                clearTimeout(this.scrollTimer);
-            }
-            this.scrolling = true;
-            this.scrollTimer = setTimeout(() => {
-                this.scrolling = false;
-                this.scrollTimer = null;
-            }, 1500);
-        },
-
-        /** Trigger when recycler view changes */
-        scrollChange(startIndex, endIndex) {
-            if (startIndex === this.currentStart && endIndex === this.currentEnd) {
-                return;
-            }
-
-            // Reset image state
-            for (let i = startIndex; i < endIndex; i++) {
-                const row = this.list[i];
-                if (!row) {
-                    continue;
+            // Initialize photos and add placeholders
+            if (row.pct && !row.photos.length) {
+                row.photos = new Array(row.pct);
+                for (let j = 0; j < row.pct; j++) {
+                    row.photos[j] = {
+                        flag: constants.FLAG_PLACEHOLDER,
+                        fileid: row.dayId * 10000 + i * 1000 + j,
+                    };
                 }
+                delete row.pct;
+            }
 
-                // Initialize photos and add placeholders
-                if (row.pct && !row.photos.length) {
-                    row.photos = new Array(row.pct);
-                    for (let j = 0; j < row.pct; j++) {
-                        row.photos[j] = {
-                            flag: constants.FLAG_PLACEHOLDER,
-                            fileid: `${row.dayId}-${i}-${j}`,
-                        };
-                    }
-                    delete row.pct;
-                }
-
-                // Force reload all loaded images
-                if ((i < this.currentStart || i > this.currentEnd) && row.photos) {
-                    for (const photo of row.photos) {
-                        if (photo.flag & constants.FLAG_LOADED) {
-                            photo.flag = (photo.flag & ~constants.FLAG_LOADED) | constants.FLAG_FORCE_RELOAD;
-                        }
+            // Force reload all loaded images
+            if ((i < this.currentStart || i > this.currentEnd) && row.photos) {
+                for (const photo of row.photos) {
+                    if (photo.flag & constants.FLAG_LOADED) {
+                        photo.flag = (photo.flag & ~constants.FLAG_LOADED) | constants.FLAG_FORCE_RELOAD;
                     }
                 }
             }
+        }
 
-            // Make sure we don't do this too often
-            this.currentStart = startIndex;
-            this.currentEnd = endIndex;
-            setTimeout(() => {
-                // Get the overlapping range between startIndex and
-                // currentStart and endIndex and currentEnd.
-                // This is the range of rows that we need to update.
-                const start = Math.max(startIndex, this.currentStart);
-                const end = Math.min(endIndex, this.currentEnd);
+        // Make sure we don't do this too often
+        this.currentStart = startIndex;
+        this.currentEnd = endIndex;
+        setTimeout(() => {
+            // Get the overlapping range between startIndex and
+            // currentStart and endIndex and currentEnd.
+            // This is the range of rows that we need to update.
+            const start = Math.max(startIndex, this.currentStart);
+            const end = Math.min(endIndex, this.currentEnd);
 
-                if (end - start > 0) {
-                    this.loadScrollChanges(start, end);
-                }
-            }, SCROLL_LOAD_DELAY);
-        },
-
-        /** Load image data for given view */
-        loadScrollChanges(startIndex, endIndex) {
-            // Make sure start and end valid
-            startIndex = Math.max(0, startIndex);
-            endIndex = Math.min(this.list.length - 1, endIndex);
-
-            // Fetch all visible days
-            for (let i = startIndex; i <= endIndex; i++) {
-                let item = this.list[i];
-                if (!item || this.loadedDays.has(item.dayId)) {
-                    continue;
-                }
-
-                this.loadedDays.add(item.dayId);
-                this.fetchDay(item.dayId);
+            if (end - start > 0) {
+                this.loadScrollChanges(start, end);
             }
-        },
+        }, SCROLL_LOAD_DELAY);
+    }
 
-        /** Get query string for API calls */
-        appendQuery(url) {
-            const query = new URLSearchParams();
+    /** Load image data for given view */
+    loadScrollChanges(startIndex: number, endIndex: number) {
+        // Make sure start and end valid
+        startIndex = Math.max(0, startIndex);
+        endIndex = Math.min(this.list.length - 1, endIndex);
 
-            // Favorites
-            if (this.$route.name === 'favorites') {
-                query.set('fav', 1);
+        // Fetch all visible days
+        for (let i = startIndex; i <= endIndex; i++) {
+            let item = this.list[i];
+            if (!item || this.loadedDays.has(item.dayId)) {
+                continue;
             }
 
-            // Create query string and append to URL
-            const queryStr = query.toString();
-            if (queryStr) {
-                url += '?' + queryStr;
-            }
-            return url;
-        },
+            this.loadedDays.add(item.dayId);
+            this.fetchDay(item.dayId);
+        }
+    }
 
-        /** Get name of header */
-        getHeadName(head) {
-            // Check cache
-            if (head.name) {
-                return head.name;
-            }
+    /** Get query string for API calls */
+    appendQuery(url: string) {
+        const query = new URLSearchParams();
 
-            // Special headers
-            if (head.dayId === -0.1) {
-                head.name = "Folders";
-                return head.name;
-            }
+        // Favorites
+        if (this.$route.name === 'favorites') {
+            query.set('fav', '1');
+        }
 
-            // Make date string
-            // The reason this function is separate from processDays is
-            // because this call is terribly slow even on desktop
-            const dateTaken = utils.dayIdToDate(head.dayId);
-            let name = dateTaken.toLocaleDateString("en-US", { dateStyle: 'full', timeZone: 'UTC' });
-            if (dateTaken.getUTCFullYear() === new Date().getUTCFullYear()) {
-                // hack: remove last 6 characters of date string
-                name = name.substring(0, name.length - 6);
-            }
+        // Create query string and append to URL
+        const queryStr = query.toString();
+        if (queryStr) {
+            url += '?' + queryStr;
+        }
+        return url;
+    }
 
-            // Cache and return
-            head.name = name;
+    /** Get name of header */
+    getHeadName(head: IRow) {
+        // Check cache
+        if (head.name) {
             return head.name;
-        },
+        }
 
-        /** Fetch timeline main call */
-        async fetchDays() {
-            let url = API_ROUTES.DAYS;
-            let params = {};
+        // Special headers
+        if (head.dayId === -0.1) {
+            head.name = "Folders";
+            return head.name;
+        }
 
-            if (this.$route.name === 'folders') {
-                url = API_ROUTES.FOLDER_DAYS;
-                params.folderId = this.$route.params.id || 0;
+        // Make date string
+        // The reason this function is separate from processDays is
+        // because this call is terribly slow even on desktop
+        const dateTaken = utils.dayIdToDate(head.dayId);
+        let name = dateTaken.toLocaleDateString("en-US", { dateStyle: 'full', timeZone: 'UTC' });
+        if (dateTaken.getUTCFullYear() === new Date().getUTCFullYear()) {
+            // hack: remove last 6 characters of date string
+            name = name.substring(0, name.length - 6);
+        }
+
+        // Cache and return
+        head.name = name;
+        return head.name;
+    }
+
+    /** Fetch timeline main call */
+    async fetchDays() {
+        let url = API_ROUTES.DAYS;
+        let params: any = {};
+
+        if (this.$route.name === 'folders') {
+            url = API_ROUTES.FOLDER_DAYS;
+            params.folderId = this.$route.params.id || 0;
+        }
+
+        const startState = this.state;
+        const res = await axios.get<IDay[]>(generateUrl(this.appendQuery(url), params));
+        const data = res.data;
+        if (this.state !== startState) return;
+        this.processDays(data);
+    }
+
+    /** Process the data for days call including folders */
+    processDays(data: IDay[]) {
+        const list: IRow[] = [];
+        const heads: {[dayId: number]: IRow} = {};
+
+        for (const day of data) {
+            day.count = Number(day.count);
+            day.rows = new Set();
+
+            // Nothing here
+            if (day.count === 0) {
+                continue;
             }
 
-            const startState = this.state;
-            const res = await axios.get(generateUrl(this.appendQuery(url), params));
-            const data = res.data;
-            if (this.state !== startState) return;
-            this.processDays(data);
-        },
-
-        /** Process the data for days call including folders */
-        processDays(data) {
-            const list = [];
-            const heads = {};
-
-            for (const day of data) {
-                day.count = Number(day.count);
-                day.rows = new Set();
-
-                // Nothing here
-                if (day.count === 0) {
-                    continue;
-                }
-
-                // Add header to list
-                const head = {
-                    id: ++this.numRows,
-                    size: 40,
-                    head: true,
-                    dayId: day.dayid,
-                    day: day,
-                };
-                heads[day.dayid] = head;
-                list.push(head);
-
-                // Add rows
-                const nrows = Math.ceil(day.count / this.numCols);
-                for (let i = 0; i < nrows; i++) {
-                    const row = this.getBlankRow(day);
-                    list.push(row);
-                    day.rows.add(row);
-
-                    // Add placeholder count
-                    const leftNum = (day.count - i * this.numCols);
-                    row.pct = leftNum > this.numCols ? this.numCols : leftNum;
-                    row.photos = [];
-                }
-            }
-
-            // Store globally
-            this.days = data;
-            this.list = list;
-            this.heads = heads;
-
-            // Check preloads
-            for (const day of data) {
-                if (day.count && day.detail) {
-                    this.processDay(day);
-                }
-            }
-
-            // Fix view height variable
-            this.reflowTimeline();
-            this.loading = false;
-        },
-
-        /** Fetch image data for one dayId */
-        async fetchDay(dayId) {
-            let url = API_ROUTES.DAY;
-            const params = { dayId };
-
-            if (this.$route.name === 'folders') {
-                url = API_ROUTES.FOLDER_DAY;
-                params.folderId = this.$route.params.id || 0;
-            }
-
-            // Do this in advance to prevent duplicate requests
-            this.loadedDays.add(dayId);
-
-            try {
-                const startState = this.state;
-                const res = await axios.get(generateUrl(this.appendQuery(url), params));
-                const data = res.data;
-                if (this.state !== startState) return;
-
-                const day = this.days.find(d => d.dayid === dayId);
-                day.detail = data;
-                day.count = data.length;
-                this.processDay(day);
-            } catch (e) {
-                console.error(e);
-            }
-        },
-
-        /** Re-create timeline tick data in the next frame */
-        reflowTimeline() {
-            if (this.reflowTimelineTimer) {
-                return;
-            }
-
-            this.reflowTimelineTimer = setTimeout(() => {
-                this.reflowTimelineTimer = null;
-                this.reflowTimelineNow();
-            }, 0);
-        },
-
-        /** Re-create timeline tick data */
-        reflowTimelineNow() {
-            // Clear timeline
-            this.timelineTicks = [];
-
-            // Ticks
-            let currTopRow = 0;
-            let currTopStatic = 0;
-            let prevYear = 9999;
-            let prevMonth = 0;
-            const thisYear = new Date().getFullYear();
-
-            // Itearte over days
-            for (const day of this.days) {
-                if (day.count === 0) {
-                    continue;
-                }
-
-                // Make date string
-                const dateTaken = utils.dayIdToDate(day.dayid);
-
-                // Create tick if month changed
-                const dtYear = dateTaken.getUTCFullYear();
-                const dtMonth = dateTaken.getUTCMonth()
-                if (Number.isInteger(day.dayid) && (dtMonth !== prevMonth || dtYear !== prevYear)) {
-                    // Create tick
-                    this.timelineTicks.push({
-                        dayId: day.dayid,
-                        top: currTopRow,
-                        topS: currTopStatic,
-                        topC: 0,
-                        text: (dtYear === prevYear || dtYear === thisYear) ? undefined : dtYear,
-                    });
-                }
-                prevMonth = dtMonth;
-                prevYear = dtYear;
-
-                currTopStatic += this.heads[day.dayid].size;
-                currTopRow += day.rows.size;
-            }
-
-            this.viewHeight = this.$refs.recycler.$refs.wrapper.clientHeight;
-
-            // Compute timeline tick positions
-            for (const tick of this.timelineTicks) {
-                tick.topC = Math.floor((tick.topS + tick.top * this.rowHeight) * this.timelineHeight / this.viewHeight);
-            }
-
-            // Do another pass to figure out which timeline points are visible
-            // This is not as bad as it looks, it's actually 12*O(n)
-            // because there are only 12 months in a year
-            const minGap = parseFloat(getComputedStyle(this.$refs.cursorSt).fontSize) + (this.isMobile ? 5 : 2);
-            let prevShow = -9999;
-            for (const [idx, tick] of this.timelineTicks.entries()) {
-                // You can't see these anyway, why bother?
-                if (tick.topC < minGap || tick.topC > this.timelineHeight - minGap) {
-                    tick.s = false;
-                    continue;
-                }
-
-                // Will overlap with the previous tick. Skip anyway.
-                if (tick.topC - prevShow < minGap) {
-                    tick.s = false;
-                    continue;
-                }
-
-                // This is a labelled tick then show it anyway for the sake of best effort
-                if (tick.text) {
-                    tick.s = true;
-                    prevShow = tick.topC;
-                    continue;
-                }
-
-                // Lookahead for next labelled tick
-                // If showing this tick would overlap the next one, don't show this one
-                let i = idx + 1;
-                while(i < this.timelineTicks.length) {
-                    if (this.timelineTicks[i].text) {
-                        break;
-                    }
-                    i++;
-                }
-                if (i < this.timelineTicks.length) {
-                    // A labelled tick was found
-                    const nextLabelledTick = this.timelineTicks[i];
-                    if (tick.topC + minGap > nextLabelledTick.topC &&
-                        nextLabelledTick.topC < this.timelineHeight - minGap) { // make sure this will be shown
-                        tick.s = false;
-                        continue;
-                    }
-                }
-
-                // Show this tick
-                tick.s = true;
-                prevShow = tick.topC;
-            }
-        },
-
-        /**
-         * Process items from day response.
-         * Do not auto reflow if you plan to cal the reflow function later.
-         *
-         * @param {any} day Day object
-         */
-        processDay(day) {
-            const dayId = day.dayid;
-            const data = day.detail;
-
-            const head = this.heads[dayId];
-            this.loadedDays.add(dayId);
-
-            // Reset rows including placeholders
-            if (head.day?.rows) {
-                for (const row of head.day.rows) {
-                    row.photos = [];
-                }
-            }
-            head.day.rows = new Set();
-
-            // Check if some row was added
-            let addedRow = false;
-
-            // Get index of header O(n)
-            const headIdx = this.list.findIndex(item => item.id === head.id);
-            let rowIdx = headIdx + 1;
-
-            // Add all rows
-            let dataIdx = 0;
-            while (dataIdx < data.length) {
-                // Check if we ran out of rows
-                if (rowIdx >= this.list.length || this.list[rowIdx].head) {
-                    addedRow = true;
-                    this.list.splice(rowIdx, 0, this.getBlankRow(day));
-                }
-
-                const row = this.list[rowIdx];
-
-                // Go to the next row
-                if (row.photos.length >= this.numCols) {
-                    rowIdx++;
-                    continue;
-                }
-
-                // Add the photo to the row
-                const photo = data[dataIdx];
-                if (typeof photo.flag === "undefined") {
-                    photo.flag = 0; // flags
-                    photo.d = day; // backref to day
-                }
-
-                // Flag conversion
-                if (photo.isvideo) {
-                    photo.flag |= constants.FLAG_IS_VIDEO;
-                    delete photo.isvideo;
-                }
-                if (photo.isfavorite) {
-                    photo.flag |= constants.FLAG_IS_FAVORITE;
-                    delete photo.favorite;
-                }
-
-                this.list[rowIdx].photos.push(photo);
-                dataIdx++;
-
-                // Add row to day
-                head.day.rows.add(row);
-            }
-
-            // No rows, splice everything including the header
-            if (head.day.rows.size === 0) {
-                this.list.splice(headIdx, 1);
-                rowIdx = headIdx - 1;
-                delete this.heads[dayId];
-            }
-
-            // Get rid of any extra rows
-            let spliceCount = 0;
-            for (let i = rowIdx + 1; i < this.list.length && !this.list[i].head; i++) {
-                spliceCount++;
-            }
-            if (spliceCount > 0) {
-                this.list.splice(rowIdx + 1, spliceCount);
-            }
-
-            // This will be true even if the head is being spliced
-            // because one row is always removed in that case
-            // So just reflow the timeline here
-            if (addedRow || spliceCount > 0) {
-                this.reflowTimeline();
-            }
-        },
-
-        /** Get a new blank row */
-        getBlankRow(day) {
-            return {
+            // Add header to list
+            const head = {
                 id: ++this.numRows,
-                photos: [],
-                size: this.rowHeight,
+                size: 40,
+                head: true,
                 dayId: day.dayid,
                 day: day,
             };
-        },
+            heads[day.dayid] = head;
+            list.push(head);
 
-        timelineMoveHoverCursor(y) {
-            this.timelineHoverCursorY = y;
+            // Add rows
+            const nrows = Math.ceil(day.count / this.numCols);
+            for (let i = 0; i < nrows; i++) {
+                const row = this.getBlankRow(day);
+                list.push(row);
+                day.rows.add(row);
 
-            // Get index of previous tick
-            let idx = this.timelineTicks.findIndex(t => t.topC > y);
-            if (idx >= 1) {
-                idx = idx - 1;
-            } else if (idx === -1 && this.timelineTicks.length > 0) {
-                idx = this.timelineTicks.length - 1;
-            } else {
-                return;
+                // Add placeholder count
+                const leftNum = (day.count - i * this.numCols);
+                row.pct = leftNum > this.numCols ? this.numCols : leftNum;
+                row.photos = [];
             }
+        }
 
-            const date = utils.dayIdToDate(this.timelineTicks[idx].dayId);
-            this.timelineHoverCursorText = `${utils.getMonthName(date)} ${date.getUTCFullYear()}`;
-        },
+        // Store globally
+        this.days = data;
+        this.list = list;
+        this.heads = heads;
 
-        /** Handle mouse hover on right timeline */
-        timelineHover(event) {
-            if (event.buttons) {
-                this.timelineClick(event);
-            }
-            this.timelineMoveHoverCursor(event.offsetY);
-        },
-
-        /** Handle mouse leave on right timeline */
-        timelineLeave() {
-            this.timelineMoveHoverCursor(this.timelineCursorY);
-        },
-
-        /** Handle mouse click on right timeline */
-        timelineClick(event) {
-            this.$refs.recycler.scrollToPosition(this.getTimelinePosition(event.offsetY));
-        },
-
-        /** Handle touch on right timeline */
-        timelineTouch(event) {
-            const rect = event.target.getBoundingClientRect();
-            const y = event.targetTouches[0].pageY - rect.top;
-            this.$refs.recycler.scrollToPosition(this.getTimelinePosition(y));
-            event.preventDefault();
-            event.stopPropagation();
-        },
-
-        /** Get recycler equivalent position from event */
-        getTimelinePosition(y) {
-            const tH = this.viewHeight;
-            const maxH = this.timelineHeight;
-            return y * tH / maxH;
-        },
-
-        /** Clicking on photo */
-        clickPhoto(photoComponent) {
-            if (this.selection.size > 0) { // selection mode
-                photoComponent.toggleSelect();
-            } else {
-                photoComponent.openFile();
-            }
-        },
-
-        /** Add a photo to selection list */
-        selectPhoto(photo) {
-            const nval = !this.selection.has(photo);
-            if (nval) {
-                photo.flag |= constants.FLAG_SELECTED;
-                this.selection.add(photo);
-            } else {
-                photo.flag &= ~constants.FLAG_SELECTED;
-                this.selection.delete(photo);
-            }
-            this.$forceUpdate();
-        },
-
-        /** Clear all selected photos */
-        clearSelection() {
-            for (const photo of this.selection) {
-                photo.flag &= ~constants.FLAG_SELECTED;
-            }
-            this.selection.clear();
-            this.$forceUpdate();
-        },
-
-        /**
-         * Download the currently selected files
-         */
-        async downloadSelection() {
-            await dav.downloadFilesByIds([...this.selection].map(p => p.fileid));
-        },
-
-        /**
-         * Delete the currently selected photos
-         */
-        async deleteSelection() {
-            this.loading = true;
-            const list = [...this.selection];
-            const delIds = await dav.deleteFilesByIds(list.map(p => p.fileid));
-            this.loading = false;
-
-            const updatedDays = new Set(list.filter(f => delIds.has(f.fileid)).map(f => f.d));
-            await this.deleteFromViewWithAnimation(delIds, updatedDays);
-        },
-
-        /**
-         * Delete elements from main view with some animation
-         * This function looks horribly slow, probably isn't that bad
-         * in all practical scenarios.
-         *
-         * This is also going to update day.detail for you and make
-         * a call to processDay so just pass it the list of ids to
-         * delete and the days that were updated.
-         *
-         * @param {Set} delIds Set of file ids to delete
-         * @param {Set} updatedDays of days that MAY be affected
-         */
-        async deleteFromViewWithAnimation(delIds, updatedDays) {
-            if (delIds.size === 0 || updatedDays.size === 0) {
-                return;
-            }
-
-            // Animate the deletion
-            for (const day of updatedDays) {
-                for (const row of day.rows) {
-                    for (const photo of row.photos) {
-                        if (delIds.has(photo.fileid)) {
-                            photo.flag |= constants.FLAG_LEAVING;
-                        }
-                    }
-                }
-            }
-
-            // wait for 200ms
-            await new Promise(resolve => setTimeout(resolve, 200));
-
-            // Speculate day reflow for animation
-            const exitedLeft = new Set();
-            for (const day of updatedDays) {
-                let nextExit = false;
-                for (const row of day.rows) {
-                    for (const photo of row.photos) {
-                        if (photo.flag & constants.FLAG_LEAVING) {
-                            nextExit = true;
-                        } else if (nextExit) {
-                            photo.flag |= constants.FLAG_EXIT_LEFT;
-                            exitedLeft.add(photo);
-                        }
-                    }
-                }
-            }
-
-            // wait for 200ms
-            await new Promise(resolve => setTimeout(resolve, 200));
-
-            // Reflow all touched days
-            for (const day of updatedDays) {
-                day.detail = day.detail.filter(p => !delIds.has(p.fileid));
-                day.count = day.detail.length;
+        // Check preloads
+        for (const day of data) {
+            if (day.count && day.detail) {
                 this.processDay(day);
             }
+        }
 
-            // Enter from right all photos that exited left
-            exitedLeft.forEach((photo) => {
-                photo.flag &= ~constants.FLAG_EXIT_LEFT;
-                photo.flag |= constants.FLAG_ENTER_RIGHT;
-            });
+        // Fix view height variable
+        this.reflowTimeline();
+        this.loading = false;
+    }
 
-            // clear selection at this point
-            this.clearSelection();
+    /** Fetch image data for one dayId */
+    async fetchDay(dayId: number) {
+        let url = API_ROUTES.DAY;
+        const params: any = { dayId };
 
-            // wait for 200ms
-            await new Promise(resolve => setTimeout(resolve, 200));
+        if (this.$route.name === 'folders') {
+            url = API_ROUTES.FOLDER_DAY;
+            params.folderId = this.$route.params.id || 0;
+        }
 
-            // Clear enter right flags
-            exitedLeft.forEach((photo) => {
-                photo.flag &= ~constants.FLAG_ENTER_RIGHT;
-            });
+        // Do this in advance to prevent duplicate requests
+        this.loadedDays.add(dayId);
 
-            // Reflow timeline
+        try {
+            const startState = this.state;
+            const res = await axios.get<IPhoto[]>(generateUrl(this.appendQuery(url), params));
+            const data = res.data;
+            if (this.state !== startState) return;
+
+            const day = this.days.find(d => d.dayid === dayId);
+            day.detail = data;
+            day.count = data.length;
+            this.processDay(day);
+        } catch (e) {
+            console.error(e);
+        }
+    }
+
+    /** Re-create timeline tick data in the next frame */
+    reflowTimeline() {
+        if (this.reflowTimelineTimer) {
+            return;
+        }
+
+        this.reflowTimelineTimer = window.setTimeout(() => {
+            this.reflowTimelineTimer = null;
+            this.reflowTimelineNow();
+        }, 0);
+    }
+
+    /** Re-create timeline tick data */
+    reflowTimelineNow() {
+        // Clear timeline
+        this.timelineTicks = [];
+
+        // Ticks
+        let currTopRow = 0;
+        let currTopStatic = 0;
+        let prevYear = 9999;
+        let prevMonth = 0;
+        const thisYear = new Date().getFullYear();
+
+        // Itearte over days
+        for (const day of this.days) {
+            if (day.count === 0) {
+                continue;
+            }
+
+            // Make date string
+            const dateTaken = utils.dayIdToDate(day.dayid);
+
+            // Create tick if month changed
+            const dtYear = dateTaken.getUTCFullYear();
+            const dtMonth = dateTaken.getUTCMonth()
+            if (Number.isInteger(day.dayid) && (dtMonth !== prevMonth || dtYear !== prevYear)) {
+                // Create tick
+                this.timelineTicks.push({
+                    dayId: day.dayid,
+                    top: currTopRow,
+                    topS: currTopStatic,
+                    topC: 0,
+                    text: (dtYear === prevYear || dtYear === thisYear) ? undefined : dtYear,
+                });
+            }
+            prevMonth = dtMonth;
+            prevYear = dtYear;
+
+            currTopStatic += this.heads[day.dayid].size;
+            currTopRow += day.rows.size;
+        }
+
+        const recycler: any = this.$refs.recycler;
+        this.viewHeight = recycler.$refs.wrapper.clientHeight;
+
+        // Compute timeline tick positions
+        for (const tick of this.timelineTicks) {
+            tick.topC = Math.floor((tick.topS + tick.top * this.rowHeight) * this.timelineHeight / this.viewHeight);
+        }
+
+        // Do another pass to figure out which timeline points are visible
+        // This is not as bad as it looks, it's actually 12*O(n)
+        // because there are only 12 months in a year
+        const fontSizePx = parseFloat(getComputedStyle(this.$refs.cursorSt as any).fontSize);
+        const minGap = fontSizePx + (this.isMobile ? 5 : 2);
+        let prevShow = -9999;
+        for (const [idx, tick] of this.timelineTicks.entries()) {
+            // You can't see these anyway, why bother?
+            if (tick.topC < minGap || tick.topC > this.timelineHeight - minGap) {
+                tick.s = false;
+                continue;
+            }
+
+            // Will overlap with the previous tick. Skip anyway.
+            if (tick.topC - prevShow < minGap) {
+                tick.s = false;
+                continue;
+            }
+
+            // This is a labelled tick then show it anyway for the sake of best effort
+            if (tick.text) {
+                tick.s = true;
+                prevShow = tick.topC;
+                continue;
+            }
+
+            // Lookahead for next labelled tick
+            // If showing this tick would overlap the next one, don't show this one
+            let i = idx + 1;
+            while(i < this.timelineTicks.length) {
+                if (this.timelineTicks[i].text) {
+                    break;
+                }
+                i++;
+            }
+            if (i < this.timelineTicks.length) {
+                // A labelled tick was found
+                const nextLabelledTick = this.timelineTicks[i];
+                if (tick.topC + minGap > nextLabelledTick.topC &&
+                    nextLabelledTick.topC < this.timelineHeight - minGap) { // make sure this will be shown
+                    tick.s = false;
+                    continue;
+                }
+            }
+
+            // Show this tick
+            tick.s = true;
+            prevShow = tick.topC;
+        }
+    }
+
+    /**
+     * Process items from day response.
+     * Do not auto reflow if you plan to cal the reflow function later.
+     *
+     * @param day Day object
+     */
+    processDay(day: IDay) {
+        const dayId = day.dayid;
+        const data = day.detail;
+
+        const head = this.heads[dayId];
+        this.loadedDays.add(dayId);
+
+        // Reset rows including placeholders
+        if (head.day?.rows) {
+            for (const row of head.day.rows) {
+                row.photos = [];
+            }
+        }
+        head.day.rows = new Set();
+
+        // Check if some row was added
+        let addedRow = false;
+
+        // Get index of header O(n)
+        const headIdx = this.list.findIndex(item => item.id === head.id);
+        let rowIdx = headIdx + 1;
+
+        // Add all rows
+        let dataIdx = 0;
+        while (dataIdx < data.length) {
+            // Check if we ran out of rows
+            if (rowIdx >= this.list.length || this.list[rowIdx].head) {
+                addedRow = true;
+                this.list.splice(rowIdx, 0, this.getBlankRow(day));
+            }
+
+            const row = this.list[rowIdx];
+
+            // Go to the next row
+            if (row.photos.length >= this.numCols) {
+                rowIdx++;
+                continue;
+            }
+
+            // Add the photo to the row
+            const photo = data[dataIdx];
+            if (typeof photo.flag === "undefined") {
+                photo.flag = 0; // flags
+                photo.d = day; // backref to day
+            }
+
+            // Flag conversion
+            if (photo.isvideo) {
+                photo.flag |= constants.FLAG_IS_VIDEO;
+                delete photo.isvideo;
+            }
+            if (photo.isfavorite) {
+                photo.flag |= constants.FLAG_IS_FAVORITE;
+                delete photo.isfavorite;
+            }
+
+            this.list[rowIdx].photos.push(photo);
+            dataIdx++;
+
+            // Add row to day
+            head.day.rows.add(row);
+        }
+
+        // No rows, splice everything including the header
+        if (head.day.rows.size === 0) {
+            this.list.splice(headIdx, 1);
+            rowIdx = headIdx - 1;
+            delete this.heads[dayId];
+        }
+
+        // Get rid of any extra rows
+        let spliceCount = 0;
+        for (let i = rowIdx + 1; i < this.list.length && !this.list[i].head; i++) {
+            spliceCount++;
+        }
+        if (spliceCount > 0) {
+            this.list.splice(rowIdx + 1, spliceCount);
+        }
+
+        // This will be true even if the head is being spliced
+        // because one row is always removed in that case
+        // So just reflow the timeline here
+        if (addedRow || spliceCount > 0) {
             this.reflowTimeline();
-        },
-    },
+        }
+    }
+
+    /** Get a new blank row */
+    getBlankRow(day: IDay): IRow {
+        return {
+            id: ++this.numRows,
+            photos: [],
+            size: this.rowHeight,
+            dayId: day.dayid,
+            day: day,
+        };
+    }
+
+    timelineMoveHoverCursor(y: number) {
+        this.timelineHoverCursorY = y;
+
+        // Get index of previous tick
+        let idx = this.timelineTicks.findIndex(t => t.topC > y);
+        if (idx >= 1) {
+            idx = idx - 1;
+        } else if (idx === -1 && this.timelineTicks.length > 0) {
+            idx = this.timelineTicks.length - 1;
+        } else {
+            return;
+        }
+
+        const date = utils.dayIdToDate(this.timelineTicks[idx].dayId);
+        this.timelineHoverCursorText = `${utils.getMonthName(date)} ${date.getUTCFullYear()}`;
+    }
+
+    /** Handle mouse hover on right timeline */
+    timelineHover(event: MouseEvent) {
+        if (event.buttons) {
+            this.timelineClick(event);
+        }
+        this.timelineMoveHoverCursor(event.offsetY);
+    }
+
+    /** Handle mouse leave on right timeline */
+    timelineLeave() {
+        this.timelineMoveHoverCursor(this.timelineCursorY);
+    }
+
+    /** Handle mouse click on right timeline */
+    timelineClick(event: MouseEvent) {
+        const recycler: any = this.$refs.recycler;
+        recycler.scrollToPosition(this.getTimelinePosition(event.offsetY));
+    }
+
+    /** Handle touch on right timeline */
+    timelineTouch(event: any) {
+        const rect = event.target.getBoundingClientRect();
+        const y = event.targetTouches[0].pageY - rect.top;
+        const recycler: any = this.$refs.recycler;
+        recycler.scrollToPosition(this.getTimelinePosition(y));
+        event.preventDefault();
+        event.stopPropagation();
+    }
+
+    /** Get recycler equivalent position from event */
+    getTimelinePosition(y: number) {
+        const tH = this.viewHeight;
+        const maxH = this.timelineHeight;
+        return y * tH / maxH;
+    }
+
+    /** Clicking on photo */
+    clickPhoto(photoComponent: any) {
+        if (this.selection.size > 0) { // selection mode
+            photoComponent.toggleSelect();
+        } else {
+            photoComponent.openFile();
+        }
+    }
+
+    /** Add a photo to selection list */
+    selectPhoto(photo: IPhoto) {
+        const nval = !this.selection.has(photo);
+        if (nval) {
+            photo.flag |= constants.FLAG_SELECTED;
+            this.selection.add(photo);
+        } else {
+            photo.flag &= ~constants.FLAG_SELECTED;
+            this.selection.delete(photo);
+        }
+        this.$forceUpdate();
+    }
+
+    /** Clear all selected photos */
+    clearSelection() {
+        for (const photo of this.selection) {
+            photo.flag &= ~constants.FLAG_SELECTED;
+        }
+        this.selection.clear();
+        this.$forceUpdate();
+    }
+
+    /**
+     * Download the currently selected files
+     */
+    async downloadSelection() {
+        await dav.downloadFilesByIds([...this.selection].map(p => p.fileid));
+    }
+
+    /**
+     * Delete the currently selected photos
+     */
+    async deleteSelection() {
+        this.loading = true;
+        const list = [...this.selection];
+        const delIds = await dav.deleteFilesByIds(list.map(p => p.fileid));
+        this.loading = false;
+
+        const updatedDays = new Set(list.filter(f => delIds.has(f.fileid)).map(f => f.d));
+        await this.deleteFromViewWithAnimation(delIds, updatedDays);
+    }
+
+    /**
+     * Delete elements from main view with some animation
+     * This function looks horribly slow, probably isn't that bad
+     * in all practical scenarios.
+     *
+     * This is also going to update day.detail for you and make
+     * a call to processDay so just pass it the list of ids to
+     * delete and the days that were updated.
+     *
+     * @param {Set} delIds Set of file ids to delete
+     * @param {Set} updatedDays of days that MAY be affected
+     */
+    async deleteFromViewWithAnimation(delIds, updatedDays) {
+        if (delIds.size === 0 || updatedDays.size === 0) {
+            return;
+        }
+
+        // Animate the deletion
+        for (const day of updatedDays) {
+            for (const row of day.rows) {
+                for (const photo of row.photos) {
+                    if (delIds.has(photo.fileid)) {
+                        photo.flag |= constants.FLAG_LEAVING;
+                    }
+                }
+            }
+        }
+
+        // wait for 200ms
+        await new Promise(resolve => setTimeout(resolve, 200));
+
+        // Speculate day reflow for animation
+        const exitedLeft = new Set();
+        for (const day of updatedDays) {
+            let nextExit = false;
+            for (const row of day.rows) {
+                for (const photo of row.photos) {
+                    if (photo.flag & constants.FLAG_LEAVING) {
+                        nextExit = true;
+                    } else if (nextExit) {
+                        photo.flag |= constants.FLAG_EXIT_LEFT;
+                        exitedLeft.add(photo);
+                    }
+                }
+            }
+        }
+
+        // wait for 200ms
+        await new Promise(resolve => setTimeout(resolve, 200));
+
+        // Reflow all touched days
+        for (const day of updatedDays) {
+            day.detail = day.detail.filter(p => !delIds.has(p.fileid));
+            day.count = day.detail.length;
+            this.processDay(day);
+        }
+
+        // Enter from right all photos that exited left
+        exitedLeft.forEach((photo: any) => {
+            photo.flag &= ~constants.FLAG_EXIT_LEFT;
+            photo.flag |= constants.FLAG_ENTER_RIGHT;
+        });
+
+        // clear selection at this point
+        this.clearSelection();
+
+        // wait for 200ms
+        await new Promise(resolve => setTimeout(resolve, 200));
+
+        // Clear enter right flags
+        exitedLeft.forEach((photo: any) => {
+            photo.flag &= ~constants.FLAG_ENTER_RIGHT;
+        });
+
+        // Reflow timeline
+        this.reflowTimeline();
+    }
 }
 </script>
 
diff --git a/src/main.js b/src/main.ts
similarity index 87%
rename from src/main.js
rename to src/main.ts
index 87bd84fa..d0a28b24 100644
--- a/src/main.js
+++ b/src/main.ts
@@ -19,12 +19,13 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
+import 'reflect-metadata'
 import Vue from 'vue'
 import VueVirtualScroller from 'vue-virtual-scroller'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 import { translate as t, translatePlural as n } from '@nextcloud/l10n'
 
-import App from './App'
+import App from './App.vue'
 import router from './router'
 
 // Adding translations to the whole app
@@ -42,11 +43,11 @@ Vue.use(VueVirtualScroller)
 // original scripts are loaded from
 // https://github.com/nextcloud/server/blob/5bf3d1bb384da56adbf205752be8f840aac3b0c5/lib/private/legacy/template.php#L120-L122
 window.addEventListener('DOMContentLoaded', () => {
-    if (!window.OCA.Files) {
-        window.OCA.Files = {}
+    if (!globalThis.OCA.Files) {
+        globalThis.OCA.Files = {}
     }
     // register unused client for the sidebar to have access to its parser methods
-    Object.assign(window.OCA.Files, { App: { fileList: { filesClient: OC.Files.getClient() } } }, window.OCA.Files)
+    Object.assign(globalThis.OCA.Files, { App: { fileList: { filesClient: globalThis.OC.Files.getClient() } } }, globalThis.OCA.Files)
 })
 
 export default new Vue({
diff --git a/src/mixins/UserConfig.js b/src/mixins/UserConfig.ts
similarity index 100%
rename from src/mixins/UserConfig.js
rename to src/mixins/UserConfig.ts
diff --git a/src/mixins/constants.js b/src/mixins/constants.ts
similarity index 100%
rename from src/mixins/constants.js
rename to src/mixins/constants.ts
diff --git a/src/router.js b/src/router.ts
similarity index 92%
rename from src/router.js
rename to src/router.ts
index 14820b22..2ab4c4fb 100644
--- a/src/router.js
+++ b/src/router.ts
@@ -21,10 +21,10 @@
  */
 
  import { generateUrl } from '@nextcloud/router'
+ import { translate as t, translatePlural as n } from '@nextcloud/l10n'
  import Router from 'vue-router'
  import Vue from 'vue'
-
- const Timeline = () => import('./components/Timeline')
+ import Timeline from './components/Timeline.vue';
 
  Vue.use(Router)
 
@@ -43,7 +43,7 @@
      mode: 'history',
      // if index.php is in the url AND we got this far, then it's working:
      // let's keep using index.php in the url
-     base: generateUrl('/apps/memories', ''),
+     base: generateUrl('/apps/memories'),
      linkActiveClass: 'active',
      routes: [
          {
diff --git a/src/services/DavClient.js b/src/services/DavClient.ts
similarity index 89%
rename from src/services/DavClient.js
rename to src/services/DavClient.ts
index a31324c6..37577bcc 100644
--- a/src/services/DavClient.js
+++ b/src/services/DavClient.ts
@@ -27,8 +27,8 @@
 
  // Monkey business
  import * as rq from 'webdav/dist/node/request';
- rq.prepareRequestOptionsOld = rq.prepareRequestOptions.bind(rq);
- rq.prepareRequestOptions = (function(requestOptions, context, userOptions) {
+ (<any>rq).prepareRequestOptionsOld = rq.prepareRequestOptions.bind(rq);
+ (<any>rq).prepareRequestOptions = (function(requestOptions, context, userOptions) {
     requestOptions.method = userOptions.method || requestOptions.method;
     return this.prepareRequestOptionsOld(requestOptions, context, userOptions);
  }).bind(rq);
diff --git a/src/services/DavRequests.js b/src/services/DavRequests.ts
similarity index 79%
rename from src/services/DavRequests.js
rename to src/services/DavRequests.ts
index a9e1034c..7cb60520 100644
--- a/src/services/DavRequests.js
+++ b/src/services/DavRequests.ts
@@ -2,6 +2,7 @@ import { getCurrentUser } from '@nextcloud/auth'
 import { generateUrl } from '@nextcloud/router'
 import { genFileInfo } from './FileUtils'
 import client from './DavClient';
+import { IFileInfo } from '../types';
 
 const props = `
     <oc:fileid />
@@ -23,11 +24,11 @@ const IMAGE_MIME_TYPES = [
 
 /**
  * Get file infos for list of files given Ids
- * @param {number[]} fileIds list of file ids
- * @returns {Promise<any[]>} list of file infos
+ * @param fileIds list of file ids
+ * @returns list of file infos
  */
-export async function getFiles(fileIds) {
-    const prefixPath = `/files/${getCurrentUser().uid}`;
+export async function getFiles(fileIds: number[]): Promise<IFileInfo[]> {
+    const prefixPath = `/files/${getCurrentUser()!.uid}`;
 
     // IMPORTANT: if this isn't there, then a blank
     // returns EVERYTHING on the server!
@@ -79,20 +80,19 @@ export async function getFiles(fileIds) {
         responseType: 'text',
     };
 
-    let response = await client.getDirectoryContents('', options);
+    let response: any = await client.getDirectoryContents('', options);
     return response.data
-        .map(data => genFileInfo(data))
-        .map(data => Object.assign({}, data, { filename: data.filename.replace(prefixPath, '') }));
+        .map((data: any) => genFileInfo(data))
+        .map((data: any) => Object.assign({}, data, { filename: data.filename.replace(prefixPath, '') }));
 }
 
 /**
  * Get file infos for files in folder path
- * @param {string} folderPath Path to folder
- * @param {number} limit Max number of files to return
- * @returns {Promise<any[]>} list of file infos
+ * @param folderPath Path to folder
+ * @param limit Max number of files to return
  */
-export async function getFolderPreviewFileIds(folderPath, limit) {
-    const prefixPath = `/files/${getCurrentUser().uid}`;
+export async function getFolderPreviewFileIds(folderPath: string, limit: number): Promise<IFileInfo[]> {
+    const prefixPath = `/files/${getCurrentUser()!.uid}`;
 
     const filter = IMAGE_MIME_TYPES.map(mime => `
         <d:like>
@@ -141,10 +141,10 @@ export async function getFolderPreviewFileIds(folderPath, limit) {
         responseType: 'text',
     };
 
-    let response = await client.getDirectoryContents('', options);
+    let response:any = await client.getDirectoryContents('', options);
     return response.data
-        .map(data => genFileInfo(data))
-        .map(data => Object.assign({}, data, {
+        .map((data: any) => genFileInfo(data))
+        .map((data: any) => Object.assign({}, data, {
             filename: data.filename.replace(prefixPath, ''),
             etag: data.etag.replace(/&quot;/g, ''), // remove quotes
         }));
@@ -153,22 +153,21 @@ export async function getFolderPreviewFileIds(folderPath, limit) {
 /**
  * Delete a single file
  *
- * @param {string} path path to the file
- * @returns {Promise<void>}
+ * @param path path to the file
  */
-export async function deleteFile(path) {
-    const prefixPath = `/files/${getCurrentUser().uid}`;
+export async function deleteFile(path: string) {
+    const prefixPath = `/files/${getCurrentUser()!.uid}`;
     return await client.deleteFile(`${prefixPath}${path}`);
 }
 
 /**
  * Delete all files in a given list of Ids
  *
- * @param {number[]} fileIds list of file ids
- * @returns {Promise<Set<number>>} list of file ids that were deleted
+ * @param fileIds list of file ids
+ * @returns list of file ids that were deleted
  */
-export async function deleteFilesByIds(fileIds) {
-    const delIds = new Set();
+export async function deleteFilesByIds(fileIds: number[]) {
+    const delIds = new Set<number>();
     const fileIdsSet = new Set(fileIds);
 
     if (fileIds.length === 0) {
@@ -176,7 +175,7 @@ export async function deleteFilesByIds(fileIds) {
     }
 
     // Get files data
-    let fileInfos = [];
+    let fileInfos: any[] = [];
     try {
         fileInfos = await getFiles(fileIds.filter(f => f));
     } catch (e) {
@@ -185,7 +184,7 @@ export async function deleteFilesByIds(fileIds) {
     }
 
     // Run all promises together
-    const promises = [];
+    const promises: Promise<void>[] = [];
 
     // Delete each file
     for (const fileInfo of fileInfos) {
@@ -212,10 +211,9 @@ export async function deleteFilesByIds(fileIds) {
 /**
  * Download a file
  *
- * @param {string[]} fileNames - The file's names
- * @returns {Promise<void>}
+ * @param fileNames - The file's names
  */
- export async function downloadFiles(fileNames) {
+ export async function downloadFiles(fileNames: string[]): Promise<boolean> {
     const randomToken = Math.random().toString(36).substring(2)
 
     const params = new URLSearchParams()
@@ -224,7 +222,7 @@ export async function deleteFilesByIds(fileIds) {
 
     const downloadURL = generateUrl(`/apps/files/ajax/download.php?${params}`)
 
-    window.location = `${downloadURL}downloadStartSecret=${randomToken}`
+    window.location.href = `${downloadURL}downloadStartSecret=${randomToken}`
 
     return new Promise((resolve) => {
         const waitForCookieInterval = setInterval(
@@ -246,10 +244,9 @@ export async function deleteFilesByIds(fileIds) {
 
 /**
  * Download the files given by the fileIds
- * @param {number[]} fileIds
- * @returns {Promise<void>}
+ * @param fileIds list of file ids
  */
-export async function downloadFilesByIds(fileIds) {
+export async function downloadFilesByIds(fileIds: number[]) {
     if (fileIds.length === 0) {
         return;
     }
diff --git a/src/services/FileUtils.js b/src/services/FileUtils.ts
similarity index 95%
rename from src/services/FileUtils.js
rename to src/services/FileUtils.ts
index 78f783d2..e47e1da7 100644
--- a/src/services/FileUtils.js
+++ b/src/services/FileUtils.ts
@@ -94,8 +94,8 @@
 
      // finally sort by name
      return asc
-         ? fileInfo1[key]?.toString()?.localeCompare(fileInfo2[key].toString(), OC.getLanguage()) || 1
-         : -fileInfo1[key]?.toString()?.localeCompare(fileInfo2[key].toString(), OC.getLanguage()) || -1
+         ? fileInfo1[key]?.toString()?.localeCompare(fileInfo2[key].toString(), globalThis.OC.getLanguage()) || 1
+         : -fileInfo1[key]?.toString()?.localeCompare(fileInfo2[key].toString(), globalThis.OC.getLanguage()) || -1
  }
 
  const genFileInfo = function(obj) {
@@ -123,7 +123,7 @@
      return fileInfo
  }
 
- const getPreviewUrl = function(fileid, etag) {
+ const getPreviewUrl = function(fileid: number, etag: string): string {
     return generateUrl(`/core/preview?fileId=${fileid}&c=${etag}&x=250&y=250&forceIcon=0&a=0`);
  }
 
diff --git a/src/services/NumberUtils.js b/src/services/NumberUtils.ts
similarity index 94%
rename from src/services/NumberUtils.js
rename to src/services/NumberUtils.ts
index 5d7e5386..56e90729 100644
--- a/src/services/NumberUtils.js
+++ b/src/services/NumberUtils.ts
@@ -20,7 +20,7 @@
  *
  */
 
- const isNumber = function(num) {
+ const isNumber = function(num: any) {
     if (!num) {
         return false
     }
diff --git a/src/services/Utils.js b/src/services/Utils.ts
similarity index 66%
rename from src/services/Utils.js
rename to src/services/Utils.ts
index 2dda9e94..fb677048 100644
--- a/src/services/Utils.js
+++ b/src/services/Utils.ts
@@ -1,10 +1,10 @@
 /** Get JS date object from dayId */
-export function dayIdToDate(dayId){
-    return new Date(Number(dayId)*86400*1000);
+export function dayIdToDate(dayId: number){
+    return new Date(dayId*86400*1000);
 }
 
 /** Get month name from number */
-export function getMonthName(date) {
+export function getMonthName(date: Date) {
     const dateTimeFormat = new Intl.DateTimeFormat('en-US', {
         month: 'short',
         timeZone: 'UTC',
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 00000000..172ba03a
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,69 @@
+export type IFileInfo = {
+    fileid: number;
+    filename: string;
+    etag: string;
+}
+
+export type IDay = {
+    /** Day ID */
+    dayid: number;
+    /** Number of photos in this day */
+    count: number;
+    /** Set of rows in the day */
+    rows?: Set<IRow>;
+    /** List of photos for this day */
+    detail?: IPhoto[];
+    /** WebDAV fileInfos, fetched before viewer open */
+    fileInfos?: IFileInfo[];
+    /** Original fileIds from fileInfos */
+    origFileIds?: Set<number>;
+}
+
+export type IPhoto = {
+    /** Nextcloud ID of file */
+    fileid: number;
+    /** Etag from server */
+    etag?: string;
+    /** Bit flags */
+    flag: number;
+    /** Reference to day object */
+    d?: IDay;
+    /** Video flag from server */
+    isvideo?: boolean;
+    /** Favorite flag from server */
+    isfavorite?: boolean;
+}
+
+export type IRow = {
+    /** Vue Recycler identifier */
+    id?: number;
+    /** Day ID */
+    dayId: number;
+    /** Refrence to day object */
+    day: IDay;
+    /** Whether this is a head row */
+    head?: boolean;
+    /** [Head only] Title of the header */
+    name?: string;
+    /** Main list of photo items */
+    photos?: IPhoto[];
+    /** Height in px of the row */
+    size?: number;
+    /** Count of placeholders to create */
+    pct?: number;
+}
+
+export type ITick = {
+    /** Day ID */
+    dayId: number;
+    /** Top row at this */
+    top: number;
+    /** Static distance from top (for headers) */
+    topS: number;
+    /** Count row distance from top (dynamic) */
+    topC: number;
+    /** Text if any (e.g. year) */
+    text?: string | number;
+    /** Whether this tick should be shown */
+    s?: boolean;
+}
\ No newline at end of file
diff --git a/src/vue-shims.d.ts b/src/vue-shims.d.ts
new file mode 100644
index 00000000..98c4f9e4
--- /dev/null
+++ b/src/vue-shims.d.ts
@@ -0,0 +1,10 @@
+declare module "*.vue" {
+    import Vue from "vue"
+    export default Vue
+}
+
+declare module '*.svg' {
+    import Vue, {VueConstructor} from 'vue';
+    const content: VueConstructor<Vue>;
+    export default content;
+}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000..71d2d0b5
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,13 @@
+{
+    "compilerOptions": {
+      "lib": ["dom", "es2017"],
+      "target": "ESNext",
+      "module": "es2015",
+      "moduleResolution": "node",
+      "sourceMap": true,
+      "allowSyntheticDefaultImports": true,
+      "experimentalDecorators": true,
+      "emitDecoratorMetadata": true,
+      "jsx": "preserve"
+    }
+}
\ No newline at end of file
diff --git a/webpack.js b/webpack.js
index e5daa927..77df5769 100644
--- a/webpack.js
+++ b/webpack.js
@@ -1,3 +1,19 @@
 const webpackConfig = require('@nextcloud/webpack-vue-config')
+const path = require('path')
+
+webpackConfig.module.rules.push({
+    test: /\.ts?$/,
+    loader: 'ts-loader',
+    exclude: /node_modules/,
+    options: {
+        appendTsSuffixTo: [/\.vue$/],
+    },
+});
+webpackConfig.resolve.extensions.push('.ts');
+webpackConfig.resolve.alias = {
+    'vue$': 'vue/dist/vue.esm.js',
+}
+webpackConfig.entry.main = path.resolve(path.join('src', 'main'));
+delete webpackConfig.optimization.splitChunks;
 
 module.exports = webpackConfig