chore: move frontend files

frontend/src/directives/cypress.ts

@@ -0,0 +1,21 @@
+import type {Directive} from 'vue'
+
+declare global {
+	interface Window {
+		Cypress: object;
+	}
+}
+
+const cypressDirective = <Directive<HTMLElement,string>>{
+	mounted(el, {arg, value}) {
+		const testingId = arg || value
+		if ((window.Cypress || import.meta.env.DEV) && testingId) {
+			el.setAttribute('data-cy', testingId)
+		}
+	},
+	beforeUnmount(el) {
+		el.removeAttribute('data-cy')
+	},
+}
+
+export default cypressDirective

frontend/src/directives/focus.ts

@@ -0,0 +1,16 @@
+import type {Directive} from 'vue'
+
+const focus = <Directive<HTMLElement,string>>{
+	// When the bound element is inserted into the DOM...
+	mounted(el, {modifiers}) {
+		// Focus the element only if the viewport is big enough
+		// auto focusing elements on mobile can be annoying since in these cases the
+		// keyboard always pops up and takes half of the available space on the screen.
+		// The threshhold is the same as the breakpoints in css.
+		if (window.innerWidth > 769 || modifiers?.always) {
+			el.focus()
+		}
+	},
+}
+
+export default focus

frontend/src/directives/shortcut.ts

@@ -0,0 +1,16 @@
+import type {Directive} from 'vue'
+import {install, uninstall} from '@github/hotkey'
+
+const directive = <Directive<HTMLElement,string>>{
+	mounted(el, {value}) {
+		if(value === '') {
+			return
+		}
+		install(el, value)
+	},
+	beforeUnmount(el) {
+		uninstall(el)
+	},
+}
+
+export default directive