feat: broken dropdown refactor for now

deno.lock

···
     "npm:@atcute/tid@^1.0.3": "1.0.3",
     "npm:@eslint/compat@^1.4.1": "1.4.1_eslint@9.39.0",
     "npm:@eslint/js@^9.39.0": "9.39.0",
+    "npm:@floating-ui/dom@^1.7.4": "1.7.4",
     "npm:@iconify/svelte@^5.1.0": "5.1.0_svelte@5.43.2__acorn@8.15.0",
     "npm:@soffinal/websocket@~0.2.1": "0.2.1_typescript@5.9.3",
     "npm:@sveltejs/adapter-static@^3.0.10": "3.0.10_@sveltejs+kit@2.48.4__@sveltejs+vite-plugin-svelte@6.2.1___svelte@5.43.2____acorn@8.15.0___vite@7.1.12____@types+node@24.10.0____picomatch@4.0.3___@types+node@24.10.0__svelte@5.43.2___acorn@8.15.0__vite@7.1.12___@types+node@24.10.0___picomatch@4.0.3__acorn@8.15.0__@types+node@24.10.0_@sveltejs+vite-plugin-svelte@6.2.1__svelte@5.43.2___acorn@8.15.0__vite@7.1.12___@types+node@24.10.0___picomatch@4.0.3__@types+node@24.10.0_svelte@5.43.2__acorn@8.15.0_vite@7.1.12__@types+node@24.10.0__picomatch@4.0.3_@types+node@24.10.0",
···
     "npm:prettier@^3.6.2": "3.6.2",
     "npm:svelte-awesome-color-picker@^4.1.0": "4.1.0_svelte@5.43.2__acorn@8.15.0",
     "npm:svelte-check@^4.3.3": "4.3.3_svelte@5.43.2__acorn@8.15.0_typescript@5.9.3",
+    "npm:svelte-device-info@^1.0.6": "1.0.6",
+    "npm:svelte-floating-ui@^1.6.2": "1.6.2",
     "npm:svelte-infinite@~0.5.1": "0.5.1_svelte@5.43.2__acorn@8.15.0",
     "npm:svelte@^5.43.2": "5.43.2_acorn@8.15.0",
     "npm:tailwindcss@^4.1.16": "4.1.16",
···
         "@eslint/core",
         "levn"
       ]
+    },
+    "@floating-ui/core@1.7.3": {
+      "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
+      "dependencies": [
+        "@floating-ui/utils"
+      ]
+    },
+    "@floating-ui/dom@1.7.4": {
+      "integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==",
+      "dependencies": [
+        "@floating-ui/core",
+        "@floating-ui/utils"
+      ]
+    },
+    "@floating-ui/utils@0.2.10": {
+      "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ=="
     },
     "@humanfs/core@0.19.1": {
       "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA=="
···
       ],
       "bin": true
     },
+    "svelte-device-info@1.0.6": {
+      "integrity": "sha512-G13YYkxnlz5AryOps8KFHFt8+5Ne7JiZgTxtYEXLVBF4UAwu9I1F+Xcd9rfhTZqUUtF9fm4qJpSi3I6p1JUt6Q==",
+      "dependencies": [
+        "tslib"
+      ]
+    },
     "svelte-eslint-parser@1.4.0_svelte@5.43.2__acorn@8.15.0_postcss@8.5.6": {
       "integrity": "sha512-fjPzOfipR5S7gQ/JvI9r2H8y9gMGXO3JtmrylHLLyahEMquXI0lrebcjT+9/hNgDej0H7abTyox5HpHmW1PSWA==",
       "dependencies": [
···
         "svelte"
       ]
     },
+    "svelte-floating-ui@1.6.2": {
+      "integrity": "sha512-EC+DZtBey50P6l3NSzNQWon3cip8a1bzwdpmCdc45kymqEWL4BKhPemAq7SQ9QLebDPaMECW6YodxFbs2d+O/w==",
+      "dependencies": [
+        "@floating-ui/dom"
+      ]
+    },
     "svelte-infinite@0.5.1_svelte@5.43.2__acorn@8.15.0": {
       "integrity": "sha512-NvpYWrHPcLHZQMnqUXgKGpOSMq9kMQ6sa8+WO80jLrgBFX+LWoKvAsrc1d1g+eiaagNAE9HalWWJ4KDtYi/+sw==",
       "dependencies": [
···
       "dependencies": [
         "typescript"
       ]
+    },
+    "tslib@2.8.1": {
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
     },
     "type-check@0.4.0": {
       "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
···
         "npm:@atcute/tid@^1.0.3",
         "npm:@eslint/compat@^1.4.1",
         "npm:@eslint/js@^9.39.0",
+        "npm:@floating-ui/dom@^1.7.4",
         "npm:@iconify/svelte@^5.1.0",
         "npm:@soffinal/websocket@~0.2.1",
         "npm:@sveltejs/adapter-static@^3.0.10",
···
         "npm:prettier@^3.6.2",
         "npm:svelte-awesome-color-picker@^4.1.0",
         "npm:svelte-check@^4.3.3",
+        "npm:svelte-device-info@^1.0.6",
+        "npm:svelte-floating-ui@^1.6.2",
         "npm:svelte-infinite@~0.5.1",
         "npm:svelte@^5.43.2",
         "npm:tailwindcss@^4.1.16",

package.json

···
 		"@atcute/lexicons": "^1.2.2",
 		"@atcute/oauth-browser-client": "^2.0.1",
 		"@atcute/tid": "^1.0.3",
+		"@floating-ui/dom": "^1.7.4",
 		"@soffinal/websocket": "^0.2.1",
 		"@wora/cache-persist": "^2.2.1",
 		"hash-wasm": "^4.12.0",
 		"lru-cache": "^11.2.2",
+		"svelte-device-info": "^1.0.6",
 		"svelte-infinite": "^0.5.1"
 	},
 	"devDependencies": {

src/components/AccountSelector.svelte

···
 	import ProfilePicture from './ProfilePicture.svelte';
 	import PfpPlaceholder from './PfpPlaceholder.svelte';
 	import Popup from './Popup.svelte';
+	import Dropdown from './Dropdown.svelte';
 	import { flow } from '$lib/at/oauth';
 	import { isHandle, type AtprotoDid } from '@atcute/lexicons/syntax';
 	import Icon from '@iconify/svelte';
···
 	let loginError = $state('');
 	let isLoggingIn = $state(false);
 
-	const toggleDropdown = (e: MouseEvent) => {
-		e.stopPropagation();
-		isDropdownOpen = !isDropdownOpen;
-	};
+	const toggleDropdown = () => (isDropdownOpen = !isDropdownOpen);
+	const closeDropdown = () => (isDropdownOpen = false);
 
 	const selectAccount = (did: AtprotoDid) => {
 		onAccountSelected(did);
-		isDropdownOpen = false;
+		closeDropdown();
 	};
 
 	const openLoginModal = () => {
 		isLoginModalOpen = true;
-		isDropdownOpen = false;
+		closeDropdown();
 		loginHandle = '';
 		loginError = '';
 		// HACK: i hate this but it works so it doesnt really matter
···
 	const handleKeydown = (event: KeyboardEvent) => {
 		if (event.key === 'Enter' && !isLoggingIn) handleLogin();
 	};
-
-	const closeDropdown = () => {
-		isDropdownOpen = false;
-	};
 </script>
 
-<svelte:window onclick={closeDropdown} />
+<Dropdown bind:isOpen={isDropdownOpen}>
+	{#snippet trigger()}
+		<button
+			onclick={toggleDropdown}
+			class="flex h-13 w-13 items-center justify-center rounded-sm shadow-md transition-all hover:scale-110 hover:shadow-xl hover:saturate-150"
+		>
+			{#if selectedDid}
+				<ProfilePicture {client} did={selectedDid} size={13} />
+			{:else}
+				<PfpPlaceholder color="var(--nucleus-accent)" size={13} />
+			{/if}
+		</button>
+	{/snippet}
 
-<div class="relative">
-	<button
-		onclick={toggleDropdown}
-		class="flex h-13 w-13 items-center justify-center rounded-sm shadow-md transition-all hover:scale-110 hover:shadow-xl hover:saturate-150"
+	<div
+		class="min-w-52 animate-fade-in-scale-fast overflow-hidden rounded-sm border-2 border-(--nucleus-accent) bg-(--nucleus-bg)/94 shadow-2xl backdrop-blur-lg transition-all"
 	>
-		{#if selectedDid}
-			<ProfilePicture {client} did={selectedDid} size={13} />
-		{:else}
-			<PfpPlaceholder color="var(--nucleus-accent)" size={13} />
-		{/if}
-	</button>
-
-	{#if isDropdownOpen}
-		<!-- svelte-ignore a11y_click_events_have_key_events -->
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<div
-			class="absolute bottom-full z-20 mb-1 min-w-52 animate-fade-in-scale-fast overflow-hidden rounded-sm border-2 border-(--nucleus-accent) bg-(--nucleus-bg)/94 shadow-2xl backdrop-blur-lg transition-all"
-			onclick={(e) => e.stopPropagation()}
-		>
-			{#if accounts.length > 0}
-				<div class="p-2">
-					{#each accounts as account (account.did)}
-						{@const color = generateColorForDid(account.did)}
-						{#snippet action(name: string, icon: string, onClick: () => void)}
-							<div
-								title={name}
-								onclick={onClick}
-								class="hidden text-(--nucleus-accent) transition-all group-hover:block hover:scale-[1.2] hover:shadow-md"
-							>
-								<Icon class="h-5 w-5" {icon} />
-							</div>
-						{/snippet}
-						<button
-							onclick={() => selectAccount(account.did)}
-							class="
-    							group flex w-full items-center gap-3 rounded-sm p-2 text-left text-sm font-medium transition-all
-    							{account.did === selectedDid ? 'shadow-lg' : ''}
-							"
-							style="color: {color}; background: {account.did === selectedDid
-								? `linear-gradient(135deg, color-mix(in srgb, var(--nucleus-accent) 20%, transparent), color-mix(in srgb, var(--nucleus-accent2) 20%, transparent))`
-								: 'transparent'};"
+		{#if accounts.length > 0}
+			<div class="p-2">
+				{#each accounts as account (account.did)}
+					{@const color = generateColorForDid(account.did)}
+					{#snippet action(name: string, icon: string, onClick: () => void)}
+						<!-- svelte-ignore a11y_click_events_have_key_events -->
+						<!-- svelte-ignore a11y_no_static_element_interactions -->
+						<div
+							title={name}
+							onclick={onClick}
+							class="hidden text-(--nucleus-accent) transition-all group-hover:block hover:scale-[1.2] hover:shadow-md"
 						>
-							<span>@{account.handle}</span>
+							<Icon class="h-5 w-5" {icon} />
+						</div>
+					{/snippet}
+					<button
+						onclick={() => selectAccount(account.did)}
+						class="
+						group flex w-full items-center gap-3 rounded-sm p-2 text-left text-sm font-medium transition-all
+						{account.did === selectedDid ? 'shadow-lg' : ''}
+					"
+						style="color: {color}; background: {account.did === selectedDid
+							? `linear-gradient(135deg, color-mix(in srgb, var(--nucleus-accent) 20%, transparent), color-mix(in srgb, var(--nucleus-accent2) 20%, transparent))`
+							: 'transparent'};"
+					>
+						<span>@{account.handle}</span>
 
-							<div class="grow"></div>
+						<div class="grow"></div>
 
-							{@render action('relogin', 'heroicons:arrow-path-rounded-square-solid', () =>
-								initiateLogin(account.did, account.handle)
-							)}
-							{@render action('logout', 'heroicons:trash-solid', () => onLogout(account.did))}
+						{@render action('relogin', 'heroicons:arrow-path-rounded-square-solid', () =>
+							initiateLogin(account.did, account.handle)
+						)}
+						{@render action('logout', 'heroicons:trash-solid', () => onLogout(account.did))}
 
-							{#if account.did === selectedDid}
-								<Icon
-									icon="heroicons:check-16-solid"
-									class="h-5 w-5 scale-125 text-(--nucleus-accent) group-hover:hidden"
-								/>
-							{/if}
-						</button>
-					{/each}
-				</div>
-				<div class="mx-2 h-px bg-linear-to-r from-(--nucleus-accent) to-(--nucleus-accent2)"></div>
-			{/if}
-			<button
-				onclick={openLoginModal}
-				class="group flex w-full origin-left items-center gap-3 p-3 text-left text-sm font-semibold text-(--nucleus-accent) transition-all hover:scale-[1.1]"
-			>
-				<Icon class="h-5 w-5 scale-[130%]" icon="heroicons:plus-16-solid" />
-				<span>add account</span>
-			</button>
-		</div>
-	{/if}
-</div>
+						{#if account.did === selectedDid}
+							<Icon
+								icon="heroicons:check-16-solid"
+								class="h-5 w-5 scale-125 text-(--nucleus-accent) group-hover:hidden"
+							/>
+						{/if}
+					</button>
+				{/each}
+			</div>
+			<div class="mx-2 h-px bg-linear-to-r from-(--nucleus-accent) to-(--nucleus-accent2)"></div>
+		{/if}
+		<button
+			onclick={openLoginModal}
+			class="group flex w-full origin-left items-center gap-3 p-3 text-left text-sm font-semibold text-(--nucleus-accent) transition-all hover:scale-[1.1]"
+		>
+			<Icon class="h-5 w-5 scale-[130%]" icon="heroicons:plus-16-solid" />
+			<span>add account</span>
+		</button>
+	</div>
+</Dropdown>
 
 <Popup bind:isOpen={isLoginModalOpen} onClose={closeLoginModal} title="add account">
 	<!-- svelte-ignore a11y_no_static_element_interactions -->

src/components/BskyPost.svelte

···
 	import { onMount } from 'svelte';
 	import type { AtprotoDid } from '@atcute/lexicons/syntax';
 	import { derived } from 'svelte/store';
+	import Device from 'svelte-device-info';
+	import Dropdown from './Dropdown.svelte';
 
 	interface Props {
 		client: AtpClient;
···
 		}
 		return link;
 	};
+
+	let actionsOpen = $state(false);
 </script>
 
 {#snippet embedBadge(record: AppBskyFeedPost.Main)}
 	{#if record.embed}
 		<span
 			class="rounded-full px-2.5 py-0.5 text-xs font-medium"
-			style="background: color-mix(in srgb, {mini
-				? 'var(--nucleus-fg)'
-				: color} 10%, transparent); color: {mini ? 'var(--nucleus-fg)' : color};"
+			style="
+			background: color-mix(in srgb, {mini ? 'var(--nucleus-fg)' : color} 10%, transparent);
+			color: {mini ? 'var(--nucleus-fg)' : color};
+			"
 		>
 			{getEmbedText(record.embed.$type)}
 		</span>
···
 			style="background: {color}18; border-color: {color}66;"
 		>
 			<div
-				class="inline-block h-6 w-6 animate-spin rounded-full border-3 border-(--nucleus-accent) border-l-transparent"
+				class="
+				inline-block h-6 w-6 animate-spin rounded-full
+				border-3 border-(--nucleus-accent) border-l-transparent
+				"
 			></div>
 			<p class="mt-3 text-sm font-medium opacity-60">loading post...</p>
 		</div>
···
 			{@const record = post.value.record}
 			<div
 				id="timeline-post-{post.value.uri}-{quoteDepth}"
-				class="rounded-sm border-2 p-2 shadow-lg backdrop-blur-sm transition-all {$isPulsing
-					? 'animate-pulse-highlight'
-					: ''}"
-				style="background: {color}{isOnPostComposer
-					? '36'
-					: '18'}; border-color: {color}{isOnPostComposer ? '99' : '66'};"
+				class="
+				group rounded-sm border-2 p-2 shadow-lg backdrop-blur-sm transition-all
+				{$isPulsing ? 'animate-pulse-highlight' : ''}
+				"
+				style="
+				background: {color}{isOnPostComposer ? '36' : '18'};
+				border-color: {color}{isOnPostComposer ? '99' : '66'};
+				"
 			>
 				<div
-					class="group mb-3 flex w-fit max-w-full items-center gap-1.5 rounded-sm pr-1"
+					class="mb-3 flex w-fit max-w-full items-center gap-1.5 rounded-sm pr-1"
 					style="background: {color}33;"
 				>
 					<ProfilePicture {client} {did} size={8} />
···
 {/if}
 
 {#snippet postControls(post: PostWithUri, backlinks?: PostActions)}
-	<div
-		class="group mt-3 flex w-fit max-w-full items-center rounded-sm"
-		style="background: {color}1f;"
-	>
-		{#snippet label(
-			name: string,
-			icon: string,
-			onClick: (link: Backlink | null | undefined) => void,
-			backlink?: Backlink | null,
-			hasSolid?: boolean
-		)}
-			<button
-				class="px-2 py-1.5 text-(--nucleus-fg)/90 hover:[backdrop-filter:brightness(120%)]"
-				onclick={() => onClick(backlink)}
-				style="color: {backlink ? color : 'color-mix(in srgb, var(--nucleus-fg) 90%, transparent)'}"
-				title={name}
-			>
-				<Icon icon={hasSolid && backlink ? `${icon}-solid` : icon} width={20} />
-			</button>
-		{/snippet}
-		{@render label('reply', 'heroicons:chat-bubble-left', () => {
-			onReply?.(post);
-		})}
-		{@render label(
-			'repost',
-			'heroicons:arrow-path-rounded-square-20-solid',
-			async (link) => {
-				if (link === undefined) return;
-				postActions.set(`${selectedDid!}:${aturi}`, {
-					...backlinks!,
-					repost: await toggleLink(link, 'app.bsky.feed.repost')
-				});
-			},
-			backlinks?.repost
-		)}
-		{@render label('quote', 'heroicons:paper-clip-20-solid', () => {
-			onQuote?.(post);
-		})}
-		{@render label(
-			'like',
-			'heroicons:star',
-			async (link) => {
-				if (link === undefined) return;
-				postActions.set(`${selectedDid!}:${aturi}`, {
-					...backlinks!,
-					like: await toggleLink(link, 'app.bsky.feed.like')
-				});
-			},
-			backlinks?.like,
-			true
-		)}
+	{#snippet control(
+		name: string,
+		icon: string,
+		onClick: (e: MouseEvent) => void,
+		isFull?: boolean,
+		hasSolid?: boolean
+	)}
+		<button
+			class="
+			px-2 py-1.5 text-(--nucleus-fg)/90 transition-all
+			duration-100 hover:[backdrop-filter:brightness(120%)]
+			"
+			onclick={(e) => onClick(e)}
+			style="color: {isFull ? color : 'color-mix(in srgb, var(--nucleus-fg) 90%, transparent)'}"
+			title={name}
+		>
+			<Icon icon={hasSolid && isFull ? `${icon}-solid` : icon} width={20} />
+		</button>
+	{/snippet}
+	<div class="mt-3 flex w-full items-center justify-between">
+		<div class="flex w-fit items-center rounded-sm" style="background: {color}1f;">
+			{#snippet label(
+				name: string,
+				icon: string,
+				onClick: (link: Backlink | null | undefined) => void,
+				backlink?: Backlink | null,
+				hasSolid?: boolean
+			)}
+				{@render control(name, icon, () => onClick(backlink), backlink ? true : false, hasSolid)}
+			{/snippet}
+			{@render label('reply', 'heroicons:chat-bubble-left', () => {
+				onReply?.(post);
+			})}
+			{@render label(
+				'repost',
+				'heroicons:arrow-path-rounded-square-20-solid',
+				async (link) => {
+					if (link === undefined) return;
+					postActions.set(`${selectedDid!}:${aturi}`, {
+						...backlinks!,
+						repost: await toggleLink(link, 'app.bsky.feed.repost')
+					});
+				},
+				backlinks?.repost
+			)}
+			{@render label('quote', 'heroicons:paper-clip-20-solid', () => {
+				onQuote?.(post);
+			})}
+			{@render label(
+				'like',
+				'heroicons:star',
+				async (link) => {
+					if (link === undefined) return;
+					postActions.set(`${selectedDid!}:${aturi}`, {
+						...backlinks!,
+						like: await toggleLink(link, 'app.bsky.feed.like')
+					});
+				},
+				backlinks?.like,
+				true
+			)}
+		</div>
+		<div
+			class="
+		    w-fit items-center rounded-sm transition-opacity
+			duration-100 ease-in-out group-hover:opacity-100
+			{!actionsOpen && !Device.isMobile ? 'opacity-0' : ''}
+			"
+			style="background: {color}1f;"
+		>
+			<Dropdown bind:isOpen={actionsOpen}>
+				{#snippet trigger()}
+					{@render control('actions', 'heroicons:ellipsis-horizontal-16-solid', (e) => {
+						e.stopPropagation();
+						actionsOpen = !actionsOpen;
+					})}
+				{/snippet}
+
+				woof
+			</Dropdown>
+		</div>
 	</div>
 {/snippet}

src/components/Dropdown.svelte

···
+<script lang="ts">
+	import {
+		computePosition,
+		autoUpdate,
+		offset,
+		flip,
+		shift,
+		type Placement
+	} from '@floating-ui/dom';
+	import { onMount } from 'svelte';
+
+	interface Props {
+		isOpen?: boolean;
+		trigger?: import('svelte').Snippet;
+		children?: import('svelte').Snippet;
+		placement?: Placement;
+		offsetDistance?: number;
+	}
+
+	let {
+		isOpen = $bindable(false),
+		trigger,
+		children,
+		placement = 'bottom-start',
+		offsetDistance = 8
+	}: Props = $props();
+
+	let triggerRef: HTMLElement | undefined = $state();
+	let contentRef: HTMLElement | undefined = $state();
+	let cleanup: (() => void) | null = null;
+
+	const updatePosition = async () => {
+		const { x, y } = await computePosition(triggerRef!, contentRef!, {
+			placement,
+			middleware: [offset(offsetDistance), flip(), shift({ padding: 8 })],
+			strategy: 'fixed'
+		});
+
+		Object.assign(contentRef!.style, {
+			left: `${x}px`,
+			top: `${y}px`
+		});
+	};
+
+	const handleClose = () => (isOpen = false);
+
+	const isEventInElement = (event: MouseEvent, element: HTMLElement) => {
+		let rect = element.getBoundingClientRect();
+		let x = event.clientX;
+		let y = event.clientY;
+		return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
+	};
+
+	const handleClickOutside = (event: MouseEvent) => {
+		if (!isOpen) return;
+		if (!isEventInElement(event, triggerRef!) && !isEventInElement(event, contentRef!))
+			handleClose();
+	};
+
+	const handleEscape = (event: KeyboardEvent) => {
+		if (event.key === 'Escape') handleClose();
+	};
+
+	const handleScroll = handleClose;
+
+	$effect(() => {
+		if (isOpen) {
+			cleanup = autoUpdate(triggerRef!, contentRef!, updatePosition);
+		} else if (cleanup) {
+			cleanup();
+			cleanup = null;
+		}
+	});
+
+	onMount(() => {
+		return () => {
+			if (cleanup) cleanup();
+		};
+	});
+</script>
+
+<svelte:window onkeydown={handleEscape} onmousedown={handleClickOutside} onscroll={handleScroll} />
+
+<div role="button" tabindex="0" bind:this={triggerRef}>
+	{@render trigger?.()}
+</div>
+
+{#if isOpen}
+	<div bind:this={contentRef} class="fixed! z-9999!" role="menu" tabindex="-1">
+		{@render children?.()}
+	</div>
+{/if}