From 88b6b3f280aa8a0bb42a1295159b7c3be454dff9 Mon Sep 17 00:00:00 2001
From: Florian <45694132+flo-bit@users.noreply.github.com>
Date: Wed, 6 May 2026 19:05:35 +0200
Subject: [PATCH] fixes

---
 .../_base/BaseCard/BaseEditingCard.svelte     | 32 ++++++++++++++-
 src/lib/sections/feature-flag.ts              |  2 +-
 src/lib/website/CardSettingsSidebar.svelte    |  4 +-
 src/lib/website/EditTopBar.svelte             | 36 ++++++++---------
 src/lib/website/EditableWebsite.svelte        | 39 +++++++++++++------
 src/lib/website/context.ts                    |  1 +
 6 files changed, 79 insertions(+), 35 deletions(-)

diff --git a/src/lib/cards/_base/BaseCard/BaseEditingCard.svelte b/src/lib/cards/_base/BaseCard/BaseEditingCard.svelte
index f3234a9..a796395 100644
--- a/src/lib/cards/_base/BaseCard/BaseEditingCard.svelte
+++ b/src/lib/cards/_base/BaseCard/BaseEditingCard.svelte
@@ -12,7 +12,8 @@
 		getIsCoarse,
 		getIsMobile,
 		getSelectedCardId,
-		getSelectCard
+		getSelectCard,
+		getToggleCardSettings
 	} from '$lib/website/context';
 	import PlainTextEditor from '$lib/components/PlainTextEditor.svelte';
 
@@ -64,6 +65,7 @@
 
 	let selectedCardId = getSelectedCardId();
 	let selectCard = getSelectCard();
+	let toggleCardSettings = getToggleCardSettings();
 	let isSelected = $derived(selectedCardId?.() === item.id);
 
 	// Track pointer down position so we only select on click, not on drag
@@ -310,7 +312,7 @@
 
 			<div
 				class={[
-					'translate absolute -bottom-13 w-full items-center justify-center pt-2.5 text-xs lg:group-focus-within:inline-flex lg:group-hover/card:inline-flex',
+					'translate absolute -bottom-9 w-full items-center justify-center pt-2.5 text-xs lg:group-focus-within:inline-flex lg:group-hover/card:inline-flex',
 					colorPopoverOpen || isSelected ? 'inline-flex' : 'hidden'
 				]}
 			>
@@ -406,6 +408,32 @@
 							<span class="sr-only">set size to 2x2</span>
 						</button>
 					{/if}
+
+					<button
+						onclick={() => toggleCardSettings?.(item.id)}
+						class="hover:bg-accent-500/10 cursor-pointer rounded-xl p-2"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke-width="2"
+							stroke="currentColor"
+							class="size-5"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"
+							/>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+							/>
+						</svg>
+						<span class="sr-only">Card settings</span>
+					</button>
 				</div>
 			</div>
 
diff --git a/src/lib/sections/feature-flag.ts b/src/lib/sections/feature-flag.ts
index b6d4883..c8d72a5 100644
--- a/src/lib/sections/feature-flag.ts
+++ b/src/lib/sections/feature-flag.ts
@@ -7,7 +7,7 @@ import { env } from '$env/dynamic/public';
  */
 const ALLOWED_DIDS: readonly string[] = [
 	// flo-bit.dev
-	'did:plc:257wekqxg4hyapkq6k47igmp'
+	//'did:plc:257wekqxg4hyapkq6k47igmp'
 ];
 
 /**
diff --git a/src/lib/website/CardSettingsSidebar.svelte b/src/lib/website/CardSettingsSidebar.svelte
index 4b118a4..d62120e 100644
--- a/src/lib/website/CardSettingsSidebar.svelte
+++ b/src/lib/website/CardSettingsSidebar.svelte
@@ -99,8 +99,8 @@
 
 <aside
 	class={[
-		'bg-base-100 dark:bg-base-950 border-base-200 dark:border-base-800 fixed top-26 right-0 bottom-0 z-40 flex w-64 flex-col overflow-y-auto border-l transition-transform duration-200',
-		open ? 'translate-x-0' : 'translate-x-full'
+		'bg-base-100 dark:bg-base-950 border-base-200 dark:border-base-800 fixed top-13 bottom-0 left-0 z-40 flex w-64 flex-col overflow-y-auto border-r transition-transform duration-200',
+		open ? 'translate-x-0' : '-translate-x-full'
 	]}
 >
 	<div
diff --git a/src/lib/website/EditTopBar.svelte b/src/lib/website/EditTopBar.svelte
index cd0c7e9..3a79963 100644
--- a/src/lib/website/EditTopBar.svelte
+++ b/src/lib/website/EditTopBar.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { dev } from '$app/environment';
-	import { page } from '$app/state';
+	// import { page } from '$app/state';
 	import { logout, user } from '$lib/atproto';
 	import { getImage, getName } from '$lib/helper';
 	import type { WebsiteData } from '$lib/types';
@@ -21,24 +21,24 @@
 		save: () => Promise<void>;
 	} = $props();
 
-	function getPreviewUrl() {
-		const base = typeof window !== 'undefined' ? window.location.origin : '';
-		const pagePath =
-			data.page && data.page !== 'blento.self' ? `/p/${data.page.replace('blento.', '')}` : '';
+	// function getPreviewUrl() {
+	// 	const base = typeof window !== 'undefined' ? window.location.origin : '';
+	// 	const pagePath =
+	// 		data.page && data.page !== 'blento.self' ? `/p/${data.page.replace('blento.', '')}` : '';
 
-		if (page.data.customDomain) {
-			return `${base}${pagePath || '/'}`;
-		}
+	// 	if (page.data.customDomain) {
+	// 		return `${base}${pagePath || '/'}`;
+	// 	}
 
-		const handle = data.profile?.handle;
-		const actor = handle && handle !== 'handle.invalid' ? handle : data.did;
-		return `${base}/${actor}${pagePath}`;
-	}
+	// 	const handle = data.profile?.handle;
+	// 	const actor = handle && handle !== 'handle.invalid' ? handle : data.did;
+	// 	return `${base}/${actor}${pagePath}`;
+	// }
 
-	function openPreview() {
-		if (typeof window === 'undefined') return;
-		window.open(getPreviewUrl(), '_blank', 'noopener,noreferrer');
-	}
+	// function openPreview() {
+	// 	if (typeof window === 'undefined') return;
+	// 	window.open(getPreviewUrl(), '_blank', 'noopener,noreferrer');
+	// }
 
 	let avatarUrl = $derived(getImage(data.publication, data.did, 'icon') ?? data.profile.avatar);
 	let name = $derived(getName(data));
@@ -76,7 +76,7 @@
 			</span>
 		</div>
 		<div class="flex items-center gap-1">
-			<Button size="sm" variant="ghost" class="backdrop-blur-none" onclick={openPreview}>
+			<!-- <Button size="sm" variant="ghost" class="backdrop-blur-none" onclick={openPreview}>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
 					viewBox="0 0 24 24"
@@ -91,7 +91,7 @@
 					<circle cx="12" cy="12" r="3" />
 				</svg>
 				<span class="hidden sm:inline">Preview</span>
-			</Button>
+			</Button> -->
 			<Toggle
 				class="hidden bg-transparent backdrop-blur-none lg:inline-flex dark:bg-transparent"
 				bind:pressed={showingMobileView}
diff --git a/src/lib/website/EditableWebsite.svelte b/src/lib/website/EditableWebsite.svelte
index 8fcbe98..9d84aea 100644
--- a/src/lib/website/EditableWebsite.svelte
+++ b/src/lib/website/EditableWebsite.svelte
@@ -20,20 +20,26 @@
 	import type { CardDefinition, CreationModalComponentProps } from '../cards/types';
 	import { dev } from '$app/environment';
 	import { env } from '$env/dynamic/public';
-	import { setIsCoarse, setIsMobile, setSelectedCardId, setSelectCard } from './context';
+	import {
+		setIsCoarse,
+		setIsMobile,
+		setSelectedCardId,
+		setSelectCard,
+		setToggleCardSettings
+	} from './context';
 	import Context from './Context.svelte';
 	import Head from './Head.svelte';
 	import SettingsOverlay from './settings/SettingsOverlay.svelte';
 	import CardSettingsSidebar from './CardSettingsSidebar.svelte';
 	import EditTopBar from './EditTopBar.svelte';
 	import MobileSelectionBar from './MobileSelectionBar.svelte';
-	import PageSwitcherBar from './PageSwitcherBar.svelte';
+	// import PageSwitcherBar from './PageSwitcherBar.svelte';
 	import SaveModal from './SaveModal.svelte';
 	import { user } from '$lib/atproto';
 	import * as TID from '@atcute/tid';
 	import { launchConfetti } from '@foxui/visual';
 
-	import SectionsSidebar from './SectionsSidebar.svelte';
+	// import SectionsSidebar from './SectionsSidebar.svelte';
 
 	import { createImageCard, createVideoCard } from './file-processing';
 	import CardCommand from '$lib/components/card-command/CardCommand.svelte';
@@ -140,6 +146,15 @@
 		}
 	});
 
+	setToggleCardSettings((id: string) => {
+		if (selectedCardId === id) {
+			selectedCardId = null;
+		} else {
+			selectedCardId = id;
+			if (!isMobile) cardSettingsOpen = true;
+		}
+	});
+
 	function resizeSelectedCard(w: number, h: number) {
 		if (!selectedCard) return;
 		const section = sections.find((s) => s.id === selectedCard!.sectionId);
@@ -409,9 +424,9 @@
 
 <EditTopBar {data} bind:showingMobileView bind:isSaving {hasUnsavedChanges} {save} />
 
-<PageSwitcherBar {data} />
+<!-- <PageSwitcherBar {data} /> -->
 
-{#if sectionsEditingEnabled}
+<!-- {#if sectionsEditingEnabled}
 	<button
 		type="button"
 		class="bg-base-100 dark:bg-base-950 border-base-200 dark:border-base-800 text-base-600 dark:text-base-400 hover:text-base-800 dark:hover:text-base-200 fixed bottom-3 left-3 z-20 flex cursor-pointer items-center gap-1.5 rounded-full border px-3 py-1.5 text-sm font-medium shadow-md transition-colors"
@@ -445,7 +460,7 @@
 			<path d="m6 9 6 6 6-6" />
 		</svg>
 	</button>
-{/if}
+{/if} -->
 
 <SettingsOverlay bind:data publicationUrl={data.publication?.url} />
 
@@ -518,15 +533,15 @@
 		ondeselect={() => (selectedCardId = null)}
 	/>
 
-	{#if sectionsEditingEnabled}
+	<!-- {#if sectionsEditingEnabled}
 		<SectionsSidebar bind:open={showSectionsSidebar} bind:sections bind:activeSectionId bind:data />
-	{/if}
+	{/if} -->
 
 	<MobileWarningModal bind:showMobileWarning />
 
 	<div
 		class={[
-			'group/wrapper @container/wrapper relative w-full overflow-x-hidden pt-27',
+			'group/wrapper @container/wrapper relative w-full overflow-x-hidden pt-14',
 			showingMobileView
 				? 'bg-base-50 dark:bg-base-900 my-4 min-h-[calc(100dvh-2em)] overflow-hidden rounded-2xl lg:mx-auto lg:w-90'
 				: ''
@@ -540,7 +555,8 @@
 			class={[
 				'pointer-events-none relative mx-auto max-w-lg',
 				(!getHideProfileSection(data) && getProfilePosition(data) === 'side') ||
-				(showSectionsSidebar && getHideProfileSection(data))
+				(showSectionsSidebar && getHideProfileSection(data)) ||
+				cardSettingsOpen
 					? '@5xl/wrapper:grid @5xl/wrapper:max-w-7xl @5xl/wrapper:grid-cols-4'
 					: '@5xl/wrapper:max-w-4xl'
 			]}
@@ -594,8 +610,7 @@
 		<button
 			type="button"
 			onclick={() => requestAddCard()}
-			class="bg-accent-500 hover:bg-accent-600 focus-visible:outline-accent-500 fixed bottom-4 z-40 flex cursor-pointer items-center gap-2 rounded-full px-5 py-3 text-sm font-semibold text-white shadow-lg transition-[right] duration-200 focus-visible:outline-2 focus-visible:outline-offset-2"
-			style="right: {cardSettingsOpen ? '17rem' : '1rem'}"
+			class="bg-accent-500 hover:bg-accent-600 focus-visible:outline-accent-500 fixed right-4 bottom-4 z-40 flex cursor-pointer items-center gap-2 rounded-full px-5 py-3 text-sm font-semibold text-white shadow-lg focus-visible:outline-2 focus-visible:outline-offset-2"
 			aria-label="Add card"
 		>
 			<svg
diff --git a/src/lib/website/context.ts b/src/lib/website/context.ts
index 47d4e50..7e4bcd7 100644
--- a/src/lib/website/context.ts
+++ b/src/lib/website/context.ts
@@ -10,3 +10,4 @@ export const [getAdditionalUserData, setAdditionalUserData] =
 export const [getIsCoarse, setIsCoarse] = createContext<() => boolean>();
 export const [getSelectedCardId, setSelectedCardId] = createContext<() => string | null>();
 export const [getSelectCard, setSelectCard] = createContext<(id: string | null) => void>();
+export const [getToggleCardSettings, setToggleCardSettings] = createContext<(id: string) => void>();
-- 
2.51.2