Merge pull request #40 from flo-bit/profile-stuff

profile stuff

src/lib/cards/BaseCard/BaseEditingCard.svelte

···
 	{#if cardDef.canHaveLabel}
 		<div
 			class={cn(
-				'bg-base-200/30 dark:bg-base-900/30 absolute top-2 left-2 z-100 w-fit max-w-[calc(100%-1rem)] rounded-xl p-1 px-2 backdrop-blur-md',
+				'bg-base-200/50 dark:bg-base-900/50 absolute top-2 left-2 z-100 w-fit max-w-[calc(100%-1rem)] rounded-xl p-1 px-2 backdrop-blur-md',
 				!item.cardData.label && 'hidden group-hover/card:block'
 			)}
 		>

src/lib/components/MarkdownTextEditor.svelte

···
 		key = 'text',
 		placeholder = '',
 		defaultContent = '',
-		class: className
+		class: className,
+		onupdate
 	}: {
-		editor: Editor | null;
+		editor?: Editor | null;
 		contentDict: Record<string, any>;
 		key: string;
 		placeholder?: string;
 		defaultContent?: string;
 		class?: string;
+		onupdate?: (content: string) => void;
 	} = $props();
 
 	const update = async () => {
···
 		const markdown = turndownService.turndown(html);
 
 		contentDict[key] = markdown;
+
+		onupdate?.(markdown);
 	};
 
 	onMount(async () => {

src/lib/components/PlainTextEditor.svelte

···
 		key,
 		class: className,
 		placeholder = '',
-		defaultContent = ''
+		defaultContent = '',
+		onupdate
 	}: {
 		contentDict: Record<string, any>;
 		key: string;
 		class?: string;
 		placeholder?: string;
 		defaultContent?: string;
+		onupdate?: (content: string) => void;
 	} = $props();
 
 	const update = async () => {
 		if (!editor) return;
 
-		contentDict[key] = editor.getText();
+		const text = editor.getText();
+
+		contentDict[key] = text;
+
+		onupdate?.(text);
 	};
 
 	onMount(async () => {

src/lib/helper.ts

···
 }
 
 export function getName(data: WebsiteData): string {
-	return (data.publication?.name ?? data.profile.displayName) || data.handle;
+	return data.publication?.name || data.profile.displayName || data.handle;
 }
 
 export function getDescription(data: WebsiteData): string {
···
 		return data?.publication?.preferences?.hideProfile;
 
 	return data.page !== 'blento.self';
+}
+
+export function getProfilePosition(data: WebsiteData): 'side' | 'top' {
+	return data?.publication?.preferences?.profilePosition ?? 'side';
 }
 
 export function isTyping() {
···
 				data.publication.url += '/' + data.page.replace('blento.', '');
 			}
 		}
-		promises.push(
-			putRecord({
-				collection: 'site.standard.publication',
-				rkey: data.page,
-				record: data.publication
-			})
-		);
+		if (data.page !== 'blento.self') {
+			promises.push(
+				putRecord({
+					collection: 'app.blento.page',
+					rkey: data.page,
+					record: data.publication
+				})
+			);
+		} else {
+			promises.push(
+				putRecord({
+					collection: 'site.standard.publication',
+					rkey: data.page,
+					record: data.publication
+				})
+			);
+		}
 
 		console.log('updating or adding publication', data.publication);
 	}

src/lib/types.ts

···
 	handle: string;
 
 	cards: Item[];
-	publication:
-		| {
-				url?: string;
-				name?: string;
-				description?: string;
-				icon?: Blob;
-				preferences?: {
-					/**
-					 * @deprecated
-					 *
-					 * use hideProfileSection instead
-					 */
-					hideProfile?: boolean;
+	publication: {
+		url?: string;
+		name?: string;
+		description?: string;
+		icon?: Blob;
+		preferences?: {
+			/**
+			 * @deprecated
+			 *
+			 * use hideProfileSection instead
+			 */
+			hideProfile?: boolean;
+
+			// use this instead
+			hideProfileSection?: boolean;
 
-					// use this instead
-					hideProfileSection?: boolean;
-				};
-		  }
-		| undefined;
+			// 'side' (default on desktop) or 'top' (always top like mobile view)
+			profilePosition?: 'side' | 'top';
+		};
+	};
 	profile: AppBskyActorDefs.ProfileViewDetailed;
 
 	additionalData: Record<string, unknown>;

src/lib/website/Account.svelte

···
 </script>
 
 {#if user.isLoggedIn && user.profile}
-	<div class="fixed top-4 right-4 z-20">
+	<div class="fixed bottom-4 right-4 z-20">
 		<Popover sideOffset={8} bind:open={settingsPopoverOpen} class="bg-base-100 dark:bg-base-900">
 			{#snippet child({ props })}
 				<button {...props}>

src/lib/website/EditBar.svelte

···
 		linkValue = $bindable(),
 		newCard,
 		addLink,
-		showSettings = $bindable(),
 
 		showingMobileView = $bindable(),
 		isSaving = $bindable(),
···
 		linkValue: string;
 		newCard: (type: string) => void;
 		addLink: (url: string) => void;
-
-		showSettings: boolean;
 
 		showingMobileView: boolean;
 
···
 			</Button>
 		</div>
 		<div class="flex items-center gap-2">
-			<Button
-				size="iconLg"
-				variant="ghost"
-				class="backdrop-blur-none"
-				onclick={() => {
-					showSettings = true;
-				}}
-			>
-				<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="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>
-			</Button>
 			<Toggle
 				class="hidden bg-transparent backdrop-blur-none lg:block dark:bg-transparent"
 				bind:pressed={showingMobileView}

src/lib/website/EditableProfile.svelte

···
 <script lang="ts">
 	import type { WebsiteData } from '$lib/types';
-	import { getDescription, getName, getImage, compressImage } from '$lib/helper';
+	import { getImage, compressImage, getProfilePosition } from '$lib/helper';
 	import PlainTextEditor from '$lib/components/PlainTextEditor.svelte';
 	import MarkdownTextEditor from '$lib/components/MarkdownTextEditor.svelte';
+	import { Button } from '@foxui/core';
+	import { getIsMobile } from './context';
 	import type { Editor } from '@tiptap/core';
 	import MadeWithBlento from './MadeWithBlento.svelte';
 
 	let { data = $bindable() }: { data: WebsiteData } = $props();
 
+	let profilePosition = $derived(getProfilePosition(data));
+
+	function toggleProfilePosition() {
+		data.publication.preferences ??= {};
+		data.publication.preferences.profilePosition = profilePosition === 'side' ? 'top' : 'side';
+		data = { ...data };
+	}
+
 	let fileInput: HTMLInputElement;
 	let isHoveringAvatar = $state(false);
-	let descriptionEditor: Editor | null = $state(null);
-
-	// Initialize publication if needed
-	$effect(() => {
-		if (!data.publication) {
-			data.publication = {
-				name: getName(data),
-				description: getDescription(data)
-			};
-		} else {
-			if (data.publication.name === undefined) {
-				data.publication.name = getName(data);
-			}
-			if (data.publication.description === undefined) {
-				data.publication.description = getDescription(data);
-			}
-		}
-	});
 
 	async function handleAvatarChange(event: Event) {
 		const target = event.target as HTMLInputElement;
···
 			const compressedBlob = await compressImage(file);
 			const objectUrl = URL.createObjectURL(compressedBlob);
 
-			data.publication ??= {};
 			data.publication.icon = {
 				blob: compressedBlob,
 				objectUrl
···
 	}
 
 	function getAvatarUrl(): string | undefined {
-		const customIcon = getImage(data.publication ?? {}, data.did, 'icon');
+		const customIcon = getImage(data.publication, data.did, 'icon');
 		if (customIcon) return customIcon;
 		return data.profile.avatar;
 	}
···
 	function handleFileInputClick() {
 		fileInput.click();
 	}
+
+	let isMobile = getIsMobile();
 </script>
 
 <div
-	class="mx-auto flex max-w-lg flex-col justify-between px-8 @5xl/wrapper:fixed @5xl/wrapper:h-screen @5xl/wrapper:w-1/4 @5xl/wrapper:max-w-none @5xl/wrapper:px-12"
+	class={[
+		'relative mx-auto flex max-w-lg flex-col justify-between px-8',
+		profilePosition === 'side'
+			? '@5xl/wrapper:fixed @5xl/wrapper:h-screen @5xl/wrapper:w-1/4 @5xl/wrapper:max-w-none @5xl/wrapper:px-12'
+			: '@5xl/wrapper:max-w-4xl @5xl/wrapper:px-12'
+	]}
 >
-	<div class="flex flex-col gap-4 pt-16 pb-8 @5xl/wrapper:h-screen @5xl/wrapper:pt-24">
+	<div class={['absolute left-2 flex gap-2', profilePosition === 'side' ? 'top-12' : 'top-4']}>
+		<!-- Position toggle button (desktop only) -->
+		{#if !isMobile()}
+			<Button size="sm" type="button" onclick={toggleProfilePosition} variant="ghost">
+				{profilePosition === 'side' ? 'Move to top' : 'Move to side'}
+			</Button>
+		{/if}
+
+		<Button
+			size="sm"
+			onclick={() => {
+				data.publication.preferences ??= {};
+				data.publication.preferences.hideProfileSection = true;
+				data = { ...data };
+			}}
+			variant="ghost"
+		>
+			hide profile
+		</Button>
+	</div>
+
+	<div
+		class={[
+			'flex flex-col gap-4 pt-16 pb-8',
+			profilePosition === 'side' && '@5xl/wrapper:h-screen @5xl/wrapper:pt-24'
+		]}
+	>
 		<!-- Avatar with edit capability -->
 		<button
 			type="button"
-			class="group relative size-32 cursor-pointer overflow-hidden rounded-full @5xl/wrapper:size-44"
+			class={[
+				'group relative size-32 cursor-pointer overflow-hidden rounded-full',
+				profilePosition === 'side' && '@5xl/wrapper:size-44'
+			]}
 			onmouseenter={() => (isHoveringAvatar = true)}
 			onmouseleave={() => (isHoveringAvatar = false)}
 			onclick={handleFileInputClick}
···
 							d="M16.5 12.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM18.75 10.5h.008v.008h-.008V10.5Z"
 						/>
 					</svg>
-					<span>Click to change</span>
+					<span class="font-medium">Click to change</span>
 				</div>
 			</div>
 		</button>
···
 		<div class="scrollbar -mx-4 grow overflow-x-hidden overflow-y-scroll px-4">
 			{#if data.publication}
 				<MarkdownTextEditor
-					bind:editor={descriptionEditor}
 					bind:contentDict={data.publication}
 					key="description"
-					placeholder="Add a description... (supports markdown)"
+					placeholder="Something about me..."
 					class=""
 				/>
 			{/if}
 		</div>
 
-		<div class="h-10.5 w-1 @5xl/wrapper:hidden"></div>
+		<div class={['h-10.5 w-1', profilePosition === 'side' && '@5xl/wrapper:hidden']}></div>
 
-		<MadeWithBlento class="hidden @5xl/wrapper:block" />
+		<MadeWithBlento class="hidden @5xl/wrapper:block {profilePosition === 'side' && '@5xl/wrapper:block'}" />
 	</div>
 </div>

src/lib/website/EditableWebsite.svelte

···
 		createEmptyCard,
 		fixCollisions,
 		getHideProfileSection,
+		getProfilePosition,
 		getName,
 		isTyping,
 		savePage,
···
 	import { setIsMobile } from './context';
 	import BaseEditingCard from '../cards/BaseCard/BaseEditingCard.svelte';
 	import Context from './Context.svelte';
-	import Settings from './Settings.svelte';
 	import Head from './Head.svelte';
 	import { compressImage } from '../helper';
 	import Account from './Account.svelte';
···
 	}
 
 	const sidebarItems = AllCardDefinitions.filter((cardDef) => cardDef.sidebarButtonText);
-
-	let showSettings = $state(false);
 
 	let debugPoint = $state({ x: 0, y: 0 });
 
···
 	image={'/' + data.handle + '/og.png'}
 />
 
-<Settings bind:open={showSettings} bind:data />
-
 <Account {data} />
 
 <Context {data}>
···
 		</div>
 	{/if}
 
+	{#if getHideProfileSection(data)}
+		<Button
+			size="sm"
+			variant="ghost"
+			onclick={() => {
+				data.publication.preferences ??= {};
+				data.publication.preferences.hideProfileSection = false;
+				data = { ...data };
+			}}
+			class="absolute top-14 left-4 z-20"
+		>
+			show profile
+		</Button>
+	{/if}
 	{#if showingMobileView}
 		<div
 			class="bg-base-200 dark:bg-base-950 pointer-events-none fixed inset-0 -z-10 h-full w-full"
···
 		class={[
 			'@container/wrapper relative w-full',
 			showingMobileView
-				? 'bg-base-50 dark:bg-base-900 my-4 min-h-[calc(100dhv-2em)] rounded-2xl lg:mx-auto lg:w-[375px]'
+				? 'bg-base-50 dark:bg-base-900 my-4 min-h-[calc(100dhv-2em)] rounded-2xl lg:mx-auto lg:w-90'
 				: ''
 		]}
 	>
···
 		<div
 			class={[
 				'mx-auto max-w-lg',
-				!getHideProfileSection(data)
+				!getHideProfileSection(data) && getProfilePosition(data) === 'side'
 					? '@5xl/wrapper:grid @5xl/wrapper:max-w-7xl @5xl/wrapper:grid-cols-4'
 					: '@5xl/wrapper:max-w-4xl'
 			]}
···
 			bind:linkValue
 			bind:isSaving
 			bind:showingMobileView
-			bind:showSettings
 			{newCard}
 			{addLink}
 			{save}

src/lib/website/Profile.svelte

···
 	import { BlueskyLogin } from '@foxui/social';
 	import { env } from '$env/dynamic/public';
 	import type { WebsiteData } from '$lib/types';
-	import { getDescription, getImage, getName } from '$lib/helper';
+	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';
···
 		`<a target="_blank" href="${href}" title="${title}">${text}</a>`;
 
 	const profileUrl = $derived(`${page.url.origin}/${data.handle}`);
+	const profilePosition = $derived(getProfilePosition(data));
 </script>
 
 <!-- lg:fixed lg:h-screen lg:w-1/4 lg:max-w-none lg:px-12 lg:pt-24 xl:w-1/3 -->
 <div
-	class="mx-auto flex max-w-lg flex-col justify-between px-8 @5xl/wrapper:fixed @5xl/wrapper:h-screen @5xl/wrapper:w-1/4 @5xl/wrapper:max-w-none @5xl/wrapper:px-12"
+	class={[
+		'mx-auto flex max-w-lg flex-col justify-between px-8',
+		profilePosition === 'side'
+			? '@5xl/wrapper:fixed @5xl/wrapper:h-screen @5xl/wrapper:w-1/4 @5xl/wrapper:max-w-none @5xl/wrapper:px-12'
+			: '@5xl/wrapper:max-w-4xl @5xl/wrapper:px-12'
+	]}
 >
-	<div class="flex flex-col gap-4 pt-16 pb-8 @5xl/wrapper:h-screen @5xl/wrapper:pt-24">
+	<div
+		class={[
+			'flex flex-col gap-4 pt-16 pb-8',
+			profilePosition === 'side' && '@5xl/wrapper:h-screen @5xl/wrapper:pt-24'
+		]}
+	>
 		<a
 			href={profileUrl}
 			class="w-fit"
···
 				}
 			}}
 		>
-			{#if data.profile.avatar}
+			{#if data.publication?.icon || data.profile.avatar}
 				<img
-					class="border-base-400 dark:border-base-800 size-32 rounded-full border @5xl/wrapper:size-44"
+					class={[
+						'border-base-400 dark:border-base-800 size-32 rounded-full border object-cover',
+						profilePosition === 'side' && '@5xl/wrapper:size-44'
+					]}
 					src={getImage(data.publication, data.did, 'icon') || data.profile.avatar}
 					alt=""
 				/>
 			{:else}
-				<div class="bg-base-300 dark:bg-base-700 size-32 rounded-full @5xl/wrapper:size-44"></div>
+				<div
+					class={[
+						'bg-base-300 dark:bg-base-700 size-32 rounded-full',
+						profilePosition === 'side' && '@5xl/wrapper:size-44'
+					]}
+				></div>
 			{/if}
 		</a>
 
···
 				>
 			</div>
 		{:else}
-			<div class="h-10.5 w-1 @5xl/wrapper:hidden"></div>
+			<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}
···
 				</div>
 			{/if}
 		{/if}
-		<MadeWithBlento class="hidden @5xl/wrapper:block" />
+		<MadeWithBlento class="hidden {profilePosition === 'side' && '@5xl/wrapper:block'}" />
 	</div>
 </div>

src/lib/website/Settings.svelte

···
-<script lang="ts">
-	import { getDescription, getHideProfileSection, getName } from '$lib/helper';
-	import type { WebsiteData } from '$lib/types';
-	import { Button, Checkbox, Heading, Input, Label, Modal, Textarea } from '@foxui/core';
-
-	export type Settings = {
-		title: string;
-	};
-
-	let { open = $bindable(), data = $bindable() }: { open: boolean; data: WebsiteData } = $props();
-
-	let name = $state(getName(data));
-
-	$effect(() => {
-		if (!open && name && name !== getName(data)) {
-			data.publication ??= {};
-			data.publication.name = name;
-
-			data = { ...data };
-		}
-	});
-</script>
-
-<Modal bind:open class="dark:bg-base-900">
-	<Heading>Settings</Heading>
-	<Label>Name</Label>
-	<Input bind:value={name} />
-	<Label class="mt-4">Description</Label>
-	<Textarea
-		rows={5}
-		bind:value={
-			() => {
-				return getDescription(data);
-			},
-			(value) => {
-				data.publication ??= {};
-				data.publication.description = value;
-
-				data = { ...data };
-			}
-		}
-	/>
-
-	<div class="flex items-center space-x-2">
-		<Checkbox
-			bind:checked={
-				() => {
-					return getHideProfileSection(data);
-				},
-				(value) => {
-					data.publication ??= {};
-					data.publication.preferences ??= {};
-					data.publication.preferences.hideProfileSection = value;
-
-					data = { ...data };
-				}
-			}
-			id="hide-profile"
-			aria-labelledby="hide-profile-label"
-			variant="secondary"
-		/>
-		<Label
-			id="hide-profile-label"
-			for="hide-profile"
-			class="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-		>
-			Hide Profile Section
-		</Label>
-	</div>
-
-	<div class="flex w-full justify-end space-x-2">
-		<Button onclick={() => (open = false)}>Close</Button>
-	</div>
-</Modal>

src/lib/website/Website.svelte

···
 <script lang="ts">
 	import Card from '../cards/Card/Card.svelte';
 	import Profile from './Profile.svelte';
-	import { getDescription, getHideProfileSection, getName, sortItems } from '../helper';
+	import {
+		getDescription,
+		getHideProfileSection,
+		getProfilePosition,
+		getName,
+		sortItems
+	} from '../helper';
 	import { innerWidth } from 'svelte/reactivity/window';
 	import { setDidContext, setHandleContext, setIsMobile } from './context';
 	import BaseCard from '../cards/BaseCard/BaseCard.svelte';
···
 		<div
 			class={[
 				'mx-auto max-w-lg',
-				!getHideProfileSection(data)
+				!getHideProfileSection(data) && getProfilePosition(data) === 'side'
 					? '@5xl/wrapper:grid @5xl/wrapper:max-w-7xl @5xl/wrapper:grid-cols-4'
 					: '@5xl/wrapper:max-w-4xl'
 			]}

src/lib/website/load.ts

···
-import { getDetailedProfile, listRecords, resolveHandle, parseUri } from '$lib/atproto';
+import { getDetailedProfile, listRecords, resolveHandle, parseUri, getRecord } from '$lib/atproto';
 import { CardDefinitionsByType } from '$lib/cards';
 import type { Item, UserCache, WebsiteData } from '$lib/types';
 import { compactItems, fixAllCollisions } from '$lib/helper';
···
 		result.publication = (result.publications as Awaited<ReturnType<typeof listRecords>>).find(
 			(v) => parseUri(v.uri).rkey === result.page
 		)?.value;
+		result.publication ??= {};
 
 		delete result['publications'];
 
···
 		return [] as Awaited<ReturnType<typeof listRecords>>;
 	});
 
-	const publications = await listRecords({ did, collection: 'site.standard.publication' }).catch(
-		() => {
-			console.error('error getting records for collection site.standard.publication');
-			return [] as Awaited<ReturnType<typeof listRecords>>;
-		}
-	);
+	const mainPublication = await getRecord({
+		did,
+		collection: 'site.standard.publication',
+		rkey: 'blento.self'
+	}).catch(() => {
+		console.error('error getting record for collection site.standard.publication');
+		return [] as Awaited<ReturnType<typeof listRecords>>;
+	});
+
+	const pages = await listRecords({ did, collection: 'app.blento.page' }).catch(() => {
+		console.error('error getting records for collection app.blento.page');
+		return [] as Awaited<ReturnType<typeof listRecords>>;
+	});
 
 	const profile = await getDetailedProfile({ did });
 
···
 		cards: (cards.map((v) => {
 			return { ...v.value };
 		}) ?? []) as Item[],
-		publications: publications,
+		publications: [mainPublication, ...pages],
 		additionalData,
 		profile,
 		updatedAt: Date.now(),
···
 	parsedResult.publication = (
 		parsedResult.publications as Awaited<ReturnType<typeof listRecords>>
 	).find((v) => parseUri(v.uri).rkey === parsedResult.page)?.value;
+	parsedResult.publication ??= {};
 
 	delete parsedResult['publications'];