feat(SPA): profile page, display name and the new account menu

web/src/components/__tests__/viewport.ts

@@ -0,0 +1,30 @@
+const REM_PX = 16
+
+function widthLimit(query: string, feature: 'min-width' | 'max-width') {
+	const match = query.match(new RegExp(`\\(${feature}:\\s*([\\d.]+)(rem|px)\\)`))
+	if (!match) {
+		return null
+	}
+	return Number(match[1]) * (match[2] === 'rem' ? REM_PX : 1)
+}
+
+export function setViewportWidth(width: number) {
+	window.matchMedia = ((query: string) => {
+		const min = widthLimit(query, 'min-width')
+		const max = widthLimit(query, 'max-width')
+		const matches = (min === null || width >= min) && (max === null || width <= max)
+		return {
+			matches,
+			media: query,
+			onchange: null,
+			addEventListener: () => undefined,
+			removeEventListener: () => undefined,
+			addListener: () => undefined,
+			removeListener: () => undefined,
+			dispatchEvent: () => false,
+		}
+	}) as unknown as typeof window.matchMedia
+}
+
+export const DESKTOP_WIDTH = 1440
+export const MOBILE_WIDTH = 390