From 0ea1b20fbdbf93073e0ab1b59056394a22ce2078 Mon Sep 17 00:00:00 2001
From: Mar0xy <marie@kaifa.ch>
Date: Wed, 27 Sep 2023 02:10:55 +0200
Subject: [PATCH] upd: add banner as backgrund blur on profiles

---
 packages/frontend/src/pages/user/home.vue | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue
index 4844f4904..3d65ce871 100644
--- a/packages/frontend/src/pages/user/home.vue
+++ b/packages/frontend/src/pages/user/home.vue
@@ -165,6 +165,7 @@ import MkOmit from '@/components/MkOmit.vue';
 import MkInfo from '@/components/MkInfo.vue';
 import MkButton from '@/components/MkButton.vue';
 import { getScrollPosition } from '@/scripts/scroll.js';
+import { getStaticImageUrl } from '@/scripts/media-proxy.js';
 import { getUserMenu } from '@/scripts/get-user-menu.js';
 import number from '@/filters/number.js';
 import { userPage } from '@/filters/user.js';
@@ -177,6 +178,7 @@ import { confetti } from '@/scripts/confetti.js';
 import MkNotes from '@/components/MkNotes.vue';
 import { api } from '@/os.js';
 import { isFfVisibleForMe } from '@/scripts/isFfVisibleForMe.js';
+import { defaultStore } from '@/store.js';
 
 function calcAge(birthdate: string): number {
 	const date = new Date(birthdate);
@@ -254,6 +256,9 @@ const style = $computed(() => {
 	if (props.user.bannerUrl == null) return {};
 	return {
 		backgroundImage: `url(${ props.user.bannerUrl })`,
+		'--backgroundImageStatic': defaultStore.state.useBlurEffect && props.user.bannerUrl 
+			? `url('${getStaticImageUrl(props.user.bannerUrl,)}')`
+			: null,
 	};
 });
 
@@ -366,6 +371,16 @@ onUnmounted(() => {
 						background-position: center;
 						box-shadow: 0 0 128px rgba(0, 0, 0, 0.5) inset;
 						will-change: background-position;
+						&::before {
+							content: "";
+							position: fixed;
+							inset: 0;
+							background: var(--backgroundImageStatic);
+							background-size: cover;
+							background-position: center;
+							pointer-events: none;
+							filter: blur(12px) opacity(0.1);
+						}
 					}
 
 					> .fade {
@@ -713,6 +728,13 @@ onUnmounted(() => {
 	margin: calc(var(--margin) / 2) 0;
 	padding: calc(var(--margin) / 2) 0;
 	background: var(--bg);
+	border-radius: 8px;
+
+	> button {
+		border-radius: 8px;
+		max-width: 200px;
+		margin-left: 9px;
+	}
 }
 
 .verifiedLink {