feat(frontend): rebuild screens with the v3 design

frontend/src/app.css

@@ -10,7 +10,6 @@
 	--h-xs: 26px;
 	--h-sm: 34px;
 	--h-md: 42px;
-	--h-lg: 48px;
 	--h-xl: 48px;
 	--row-dense: 36px;
 	--row: 44px;
@@ -463,20 +462,64 @@ html.theme-switching *::after {
 	transition-timing-function: var(--ease-out);
 }
 
-.animate-fade-in {
-	animation: fadeIn 0.3s ease-out forwards;
-	opacity: 0;
+/* A scroller fades at the edge that has more content; without overflow its scroll timeline is inactive, so nothing fades */
+@property --fade-start {
+	syntax: '<length>';
+	inherits: false;
+	initial-value: 0px;
 }
 
-@keyframes fadeIn {
-	from {
-		opacity: 0;
-		transform: translateY(10px);
+@property --fade-end {
+	syntax: '<length>';
+	inherits: false;
+	initial-value: 0px;
+}
+
+@supports (animation-timeline: scroll()) {
+	.scroll-fade-x,
+	.scroll-fade-y {
+		animation:
+			scroll-fade-start linear both,
+			scroll-fade-end linear both;
+		animation-range:
+			0 24px,
+			calc(100% - 24px) 100%;
 	}
 
+	.scroll-fade-x {
+		mask-image: linear-gradient(
+			to right,
+			transparent,
+			#000 var(--fade-start),
+			#000 calc(100% - var(--fade-end)),
+			transparent
+		);
+		animation-timeline: scroll(self inline), scroll(self inline);
+	}
+
+	.scroll-fade-y {
+		mask-image: linear-gradient(
+			transparent,
+			#000 var(--fade-start),
+			#000 calc(100% - var(--fade-end)),
+			transparent
+		);
+		animation-timeline: scroll(self), scroll(self);
+	}
+}
+
+@keyframes scroll-fade-start {
 	to {
-		opacity: 1;
-		transform: translateY(0);
+		--fade-start: 24px;
+	}
+}
+
+@keyframes scroll-fade-end {
+	from {
+		--fade-end: 24px;
+	}
+	to {
+		--fade-end: 0px;
 	}
 }
 
@@ -489,11 +532,15 @@ html.theme-switching *::after {
 	animation: none;
 }
 
-::view-transition-group(settings-content) {
+/* The phone bars swap instantly and stay above the content, whose new snapshot is otherwise painted last because only the new page has its name */
+::view-transition-group(phone-top-bar),
+::view-transition-group(phone-nav),
+::view-transition-group(phone-search) {
+	z-index: 1;
 	animation: none;
 }
 
-::view-transition-old(settings-content) {
+::view-transition-old(settings-content-old) {
 	animation: 120ms ease-out both vt-fade-out;
 }
 
@@ -513,37 +560,6 @@ html.theme-switching *::after {
 	}
 }
 
-@keyframes bg-zoom {
-	0% {
-		transform: scale(1.3);
-	}
-
-	100% {
-		transform: scale(1);
-	}
-}
-
-.animate-bg-zoom {
-	transform-origin: center;
-	will-change: transform;
-	animation: bg-zoom 0.7s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
-}
-
-@keyframes delayed-fade {
-	0%,
-	40% {
-		opacity: 0;
-	}
-
-	100% {
-		opacity: 1;
-	}
-}
-
-.animate-delayed-fade {
-	animation: delayed-fade 0.5s ease-out forwards;
-}
-
 @keyframes shake {
 	0%,
 	100% {