Merge pull request #45 from flo-bit/drawing-card

Drawing card

CLAUDE.md

···
 - `auth.svelte.ts` - OAuth client state and login/logout flow using `@atcute/oauth-browser-client`
 - `atproto.ts` - ATProto API helpers: `resolveHandle`, `listRecords`, `getRecord`, `putRecord`, `deleteRecord`, `uploadImage`
 - Data is stored in user's PDS under collection `app.blento.card`
+- **Important**: ATProto does not allow floating point numbers in records. All numeric values must be integers.
 
 **Data Loading (`src/lib/website/`):**
 

src/lib/cards/DrawCard/EditingDrawCard.svelte

···
 			{@const pathData = getSvgPathFromStroke(
 				getStroke(stroke.points, getStrokeOptions(stroke.size ?? 3))
 			)}
-			<path d={pathData} class="fill-black accent:fill-white dark:fill-white" />
+			<path d={pathData} class="accent:fill-white fill-black dark:fill-white" />
 		{/each}
 		{#if currentStroke.length > 0}
 			{@const pathData = getSvgPathFromStroke(
 				getStroke(currentStroke, getStrokeOptions(strokeSizes[strokeWidth]))
 			)}
-			<path d={pathData} class="fill-black accent:fill-white dark:fill-white" />
+			<path d={pathData} class="accent:fill-white fill-black dark:fill-white" />
 		{/if}
 	</svg>
 

src/lib/helper.ts

···
 	}
 }
 
+/**
+ * Find a valid position for a new item in a single mode (desktop or mobile).
+ * This modifies the item's position properties in-place.
+ */
+export function findValidPosition(newItem: Item, items: Item[], mobile: boolean) {
+	if (mobile) {
+		let foundPosition = false;
+		newItem.mobileY = 0;
+		while (!foundPosition) {
+			for (newItem.mobileX = 0; newItem.mobileX <= COLUMNS - newItem.mobileW; newItem.mobileX++) {
+				const collision = items.find((item) => overlaps(newItem, item, true));
+				if (!collision) {
+					foundPosition = true;
+					break;
+				}
+			}
+			if (!foundPosition) newItem.mobileY! += 1;
+		}
+	} else {
+		let foundPosition = false;
+		newItem.y = 0;
+		while (!foundPosition) {
+			for (newItem.x = 0; newItem.x <= COLUMNS - newItem.w; newItem.x++) {
+				const collision = items.find((item) => overlaps(newItem, item, false));
+				if (!collision) {
+					foundPosition = true;
+					break;
+				}
+			}
+			if (!foundPosition) newItem.y += 1;
+		}
+	}
+}
+
 export async function refreshData(data: { updatedAt?: number; handle: string }) {
 	const TEN_MINUTES = 10 * 60 * 1000;
 	const now = Date.now();

src/lib/website/EditableProfile.svelte

···
 			: '@5xl/wrapper:max-w-4xl @5xl/wrapper:px-12'
 	]}
 >
-	<div class={['absolute left-2 z-20 flex gap-2', profilePosition === 'side' ? 'top-12' : 'top-4']}>
+	<div
+		class={[
+			'absolute left-2 z-20 flex gap-2',
+			profilePosition === 'side' ? 'top-2 left-14' : 'top-2'
+		]}
+	>
 		<Button
-			size="sm"
+			size="icon"
 			onclick={() => {
 				data.publication.preferences ??= {};
 				data.publication.preferences.hideProfileSection = true;
···
 			}}
 			variant="ghost"
 		>
-			hide profile
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				class="size-6"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88"
+				/>
+			</svg>
 		</Button>
 
 		<!-- 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 size="icon" type="button" onclick={toggleProfilePosition} variant="ghost">
+				{#if profilePosition === 'side'}
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						class="size-6"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"
+						/>
+					</svg>
+				{:else}
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						class="size-6"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="m19.5 4.5-15 15m0 0h11.25m-11.25 0V8.25"
+						/>
+					</svg>
+				{/if}
 			</Button>
 		{/if}
 	</div>

src/lib/website/EditableWebsite.svelte

···
 		clamp,
 		compactItems,
 		createEmptyCard,
+		findValidPosition,
 		fixCollisions,
 		getHideProfileSection,
 		getProfilePosition,
···
 			if (isMobile) {
 				item.mobileX = gridX;
 				item.mobileY = gridY;
+				// Find valid desktop position
+				findValidPosition(item, items, false);
 			} else {
 				item.x = gridX;
 				item.y = gridY;
+				// Find valid mobile position
+				findValidPosition(item, items, true);
 			}
 
 			items = [...items, item];
···
 		>
 			{#if getHideProfileSection(data)}
 				<Button
-					size="sm"
+					size="icon"
 					variant="ghost"
 					onclick={() => {
 						data.publication.preferences ??= {};
 						data.publication.preferences.hideProfileSection = false;
 						data = { ...data };
 					}}
-					class="pointer-events-auto absolute top-2 left-4 z-20"
+					class="pointer-events-auto absolute top-2 left-2 z-20"
 				>
-					show profile
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						class="size-6"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"
+						/>
+						<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>
 			{/if}
 			<div class="pointer-events-none"></div>