From 79049f287be6b8f97e67f1ff969defce8e4f4210 Mon Sep 17 00:00:00 2001
From: Florian <45694132+flo-bit@users.noreply.github.com>
Date: Mon, 26 Jan 2026 12:20:47 +0100
Subject: [PATCH] button

---
 src/lib/website/FloatingEditButton.svelte | 71 +++++++++++++++++++++++
 src/lib/website/Profile.svelte            | 70 ++--------------------
 src/lib/website/Website.svelte            | 16 ++++-
 3 files changed, 90 insertions(+), 67 deletions(-)
 create mode 100644 src/lib/website/FloatingEditButton.svelte

diff --git a/src/lib/website/FloatingEditButton.svelte b/src/lib/website/FloatingEditButton.svelte
new file mode 100644
index 0000000..5144e2c
--- /dev/null
+++ b/src/lib/website/FloatingEditButton.svelte
@@ -0,0 +1,71 @@
+<script lang="ts">
+	import { user, login } from '$lib/atproto';
+	import { Button } from '@foxui/core';
+	import { BlueskyLogin } from '@foxui/social';
+	import { env } from '$env/dynamic/public';
+	import type { WebsiteData } from '$lib/types';
+	import { page } from '$app/state';
+	import type { ActorIdentifier } from '@atcute/lexicons';
+
+	let { data }: { data: WebsiteData } = $props();
+
+	const isOwnPage = $derived(user.isLoggedIn && user.profile?.did === data.did);
+	const isBlento = $derived(!env.PUBLIC_IS_SELFHOSTED && data.handle === 'blento.app');
+	const showLoginOnBlento = $derived(
+		isBlento && !user.isInitializing && !user.isLoggedIn && user.profile?.handle !== data.handle
+	);
+	const showEditBlentoButton = $derived(
+		isBlento && user.isLoggedIn && user.profile?.handle !== data.handle
+	);
+</script>
+
+{#if isOwnPage}
+	<div class="fixed bottom-6 left-6 z-49 hidden lg:block">
+		<Button size="lg" href="{page.url}/edit">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				class="size-5"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"
+				/>
+			</svg>
+			Edit Website
+		</Button>
+	</div>
+{:else if showLoginOnBlento}
+	<div class="fixed bottom-6 left-6 z-49">
+		<BlueskyLogin
+			login={async (handle) => {
+				await login(handle as ActorIdentifier);
+				return true;
+			}}
+		/>
+	</div>
+{:else if showEditBlentoButton}
+	<div class="fixed bottom-6 left-6 z-49">
+		<Button size="lg" href="/{env.PUBLIC_IS_SELFHOSTED ? '' : user.profile?.handle}/edit">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				class="size-5"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"
+				/>
+			</svg>
+			Edit Your Blento
+		</Button>
+	</div>
+{/if}
diff --git a/src/lib/website/Profile.svelte b/src/lib/website/Profile.svelte
index b1b6a1a..004975e 100644
--- a/src/lib/website/Profile.svelte
+++ b/src/lib/website/Profile.svelte
@@ -1,22 +1,17 @@
 <script lang="ts">
 	import { marked } from 'marked';
-	import { user, login } from '$lib/atproto';
-	import { Button } from '@foxui/core';
-	import { BlueskyLogin } from '@foxui/social';
-	import { env } from '$env/dynamic/public';
 	import type { WebsiteData } from '$lib/types';
 	import { getDescription, getImage, getName, getProfilePosition } from '$lib/helper';
 	import { page } from '$app/state';
-	import type { ActorIdentifier } from '@atcute/lexicons';
 	import { qrOverlay } from '$lib/components/qr/qrOverlay.svelte';
 	import MadeWithBlento from './MadeWithBlento.svelte';
 
 	let {
 		data,
-		showEditButton = false
+		hideBlento = false
 	}: {
 		data: WebsiteData;
-		showEditButton?: boolean;
+		hideBlento?: boolean;
 	} = $props();
 
 	const renderer = new marked.Renderer();
@@ -84,65 +79,8 @@
 			</div>
 		</div>
 
-		{#if showEditButton && user.isLoggedIn && user.profile?.did === data.did}
-			<div>
-				<Button href="{page.url}/edit" class="mt-2">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke-width="1.5"
-						stroke="currentColor"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"
-						/>
-					</svg>
-
-					Edit Your Website</Button
-				>
-			</div>
-		{:else}
-			<div class={['h-10.5 w-1', profilePosition === 'side' && '@5xl/wrapper:hidden']}></div>
-		{/if}
-
-		{#if !env.PUBLIC_IS_SELFHOSTED && data.handle === 'blento.app' && user.profile?.handle !== data.handle}
-			{#if !user.isInitializing && !user.isLoggedIn}
-				<div>
-					<div class="my-4 text-sm">
-						To create your own blento, sign in with your bluesky account
-					</div>
-					<BlueskyLogin
-						login={async (handle) => {
-							await login(handle as ActorIdentifier);
-							return true;
-						}}
-					/>
-				</div>
-			{:else if user.isLoggedIn}
-				<div>
-					<Button href="/{env.PUBLIC_IS_SELFHOSTED ? '' : user.profile?.handle}/edit" class="mt-2">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							fill="none"
-							viewBox="0 0 24 24"
-							stroke-width="1.5"
-							stroke="currentColor"
-						>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"
-							/>
-						</svg>
-
-						Edit Your Blento</Button
-					>
-				</div>
-			{/if}
+		{#if !hideBlento}
+			<MadeWithBlento class="hidden {profilePosition === 'side' && '@5xl/wrapper:block'}" />
 		{/if}
-		<MadeWithBlento class="hidden {profilePosition === 'side' && '@5xl/wrapper:block'}" />
 	</div>
 </div>
diff --git a/src/lib/website/Website.svelte b/src/lib/website/Website.svelte
index a2853a4..a43faab 100644
--- a/src/lib/website/Website.svelte
+++ b/src/lib/website/Website.svelte
@@ -18,9 +18,21 @@
 	import type { Did, Handle } from '@atcute/lexicons';
 	import QRModalProvider from '$lib/components/qr/QRModalProvider.svelte';
 	import EmptyState from './EmptyState.svelte';
+	import FloatingEditButton from './FloatingEditButton.svelte';
+	import { user } from '$lib/atproto';
+	import { env } from '$env/dynamic/public';
 
 	let { data }: { data: WebsiteData } = $props();
 
+	// Check if floating edit button will be visible (to hide MadeWithBlento)
+	const isOwnPage = $derived(user.isLoggedIn && user.profile?.did === data.did);
+	const isBlento = $derived(!env.PUBLIC_IS_SELFHOSTED && data.handle === 'blento.app');
+	const showFloatingButton = $derived(
+		isOwnPage ||
+			(isBlento && !user.isInitializing && !user.isLoggedIn) ||
+			(isBlento && user.isLoggedIn && user.profile?.handle !== data.handle)
+	);
+
 	let isMobile = $derived((innerWidth.current ?? 1000) < 1024);
 	setIsMobile(() => isMobile);
 
@@ -50,7 +62,7 @@
 	<QRModalProvider />
 	<div class="@container/wrapper relative w-full">
 		{#if !getHideProfileSection(data)}
-			<Profile {data} showEditButton={true} />
+			<Profile {data} hideBlento={showFloatingButton} />
 		{/if}
 
 		<div
@@ -78,4 +90,6 @@
 
 		<MadeWithBlento class="mx-auto block pb-8 text-center @5xl/wrapper:hidden" />
 	</div>
+
+	<FloatingEditButton {data} />
 </Context>
-- 
2.51.2