Merge pull request #48 from flo-bit/small-fixes

fixes

src/lib/website/Account.svelte

···
 			<Button variant="ghost" onclick={logout}>Logout</Button>
 		</Popover>
 	</div>
-{:else if !user.isInitializing}
-	<div
-		class="dark:bg-base-950 border-base-200 dark:border-base-900 fixed top-4 right-4 z-20 flex flex-col gap-4 rounded-2xl border bg-white p-4 shadow-lg"
-	>
-		<span class="text-sm font-semibold">Login to edit your page</span>
-
-		<Button
-			onclick={async () => {
-				await login(data.handle as ActorIdentifier);
-			}}>Login</Button
-		>
-	</div>
 {/if}

src/lib/website/EditableProfile.svelte

···
 	import type { Editor } from '@tiptap/core';
 	import MadeWithBlento from './MadeWithBlento.svelte';
 
-	let { data = $bindable() }: { data: WebsiteData } = $props();
+	let {
+		data = $bindable(),
+		hideBlento = false
+	}: { data: WebsiteData; hideBlento?: boolean } = $props();
 
 	let profilePosition = $derived(getProfilePosition(data));
 
···
 
 		<div class={['h-10.5 w-1', profilePosition === 'side' && '@5xl/wrapper:hidden']}></div>
 
-		<MadeWithBlento class="hidden {profilePosition === 'side' && '@5xl/wrapper:block'}" />
+		{#if !hideBlento}
+			<MadeWithBlento class="hidden {profilePosition === 'side' && '@5xl/wrapper:block'}" />
+		{/if}
 	</div>
 </div>

src/lib/website/EditableWebsite.svelte

···
 	import Account from './Account.svelte';
 	import EditBar from './EditBar.svelte';
 	import SaveModal from './SaveModal.svelte';
+	import FloatingEditButton from './FloatingEditButton.svelte';
 	import { user } from '$lib/atproto';
 	import { launchConfetti } from '@foxui/visual';
 
···
 	}: {
 		data: WebsiteData;
 	} = $props();
+
+	// Check if floating login button will be visible (to hide MadeWithBlento)
+	const showLoginOnEditPage = $derived(!user.isInitializing && !user.isLoggedIn);
 
 	let imageDragOver = $state(false);
 
···
 		]}
 	>
 		{#if !getHideProfileSection(data)}
-			<EditableProfile bind:data />
+			<EditableProfile bind:data hideBlento={showLoginOnEditPage} />
 		{/if}
 
 		<div
···
 	/>
 
 	<Toaster />
+
+	<FloatingEditButton {data} />
 </Context>

src/lib/website/EmptyState.svelte

···
 <!-- Spacer for grid height -->
 <div class="hidden @[42rem]/grid:block" style="height: {(maxHeight / 8) * 100}cqw;"></div>
 <div class="@[42rem]/grid:hidden" style="height: {(maxMobileHeight / 4) * 100}cqw;"></div>
-
-{#if !user.isLoggedIn}
-	<div
-		class="dark:bg-base-950 border-base-200 dark:border-base-900 fixed top-4 right-4 z-20 flex flex-col gap-4 rounded-2xl border bg-white p-4 shadow-lg"
-	>
-		<span class="text-sm font-semibold">Login to edit your page</span>
-
-		<Button
-			onclick={async () => {
-				await login(data.handle as ActorIdentifier);
-			}}>Login</Button
-		>
-	</div>
-{/if}

src/lib/website/FloatingEditButton.svelte

···
 
 	const isOwnPage = $derived(user.isLoggedIn && user.profile?.did === data.did);
 	const isBlento = $derived(!env.PUBLIC_IS_SELFHOSTED && data.handle === 'blento.app');
+	const isEditPage = $derived(page.url.pathname.endsWith('/edit'));
 	const showLoginOnBlento = $derived(
 		isBlento && !user.isInitializing && !user.isLoggedIn && user.profile?.handle !== data.handle
 	);
+	const showLoginOnEditPage = $derived(isEditPage && !user.isInitializing && !user.isLoggedIn);
 	const showEditBlentoButton = $derived(
 		isBlento && user.isLoggedIn && user.profile?.handle !== data.handle
 	);
 </script>
 
-{#if isOwnPage}
+{#if isOwnPage && !isEditPage}
 	<div class="fixed bottom-6 left-6 z-49 hidden lg:block">
 		<Button size="lg" href="{page.url}/edit">
 			<svg
···
 				/>
 			</svg>
 			Edit Website
+		</Button>
+	</div>
+{:else if showLoginOnEditPage}
+	<div class="fixed bottom-6 left-6 z-49">
+		<Button size="lg" onclick={() => login(data.handle as ActorIdentifier)}>
+			<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="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"
+				/>
+			</svg>
+			Login
 		</Button>
 	</div>
 {:else if showLoginOnBlento}

src/lib/website/Website.svelte

···
 	import FloatingEditButton from './FloatingEditButton.svelte';
 	import { user } from '$lib/atproto';
 	import { env } from '$env/dynamic/public';
+	import { page } from '$app/state';
 
 	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 isEditPage = $derived(page.url.pathname.endsWith('/edit'));
+	const showLoginOnEditPage = $derived(isEditPage && !user.isInitializing && !user.isLoggedIn);
 	const showFloatingButton = $derived(
-		isOwnPage ||
+		(isOwnPage && !isEditPage) ||
+			showLoginOnEditPage ||
 			(isBlento && !user.isInitializing && !user.isLoggedIn) ||
 			(isBlento && user.isLoggedIn && user.profile?.handle !== data.handle)
 	);