···

       
33
       
 
       
    "npm:svelte-awesome-color-picker@^4.1.0": "4.1.0_svelte@5.43.2__acorn@8.15.0",

     

       
34
       
 
       
    "npm:svelte-check@^4.3.3": "4.3.3_svelte@5.43.2__acorn@8.15.0_typescript@5.9.3",

     

       
35
       
 
       
    "npm:svelte-device-info@^1.0.6": "1.0.6",

     

       
36
       
-
       
    "npm:svelte-floating-ui@^1.6.2": "1.6.2",

     

       
37
       
 
       
    "npm:svelte-infinite@~0.5.1": "0.5.1_svelte@5.43.2__acorn@8.15.0",

     

       
0
       
 
       

     

       
38
       
 
       
    "npm:svelte@^5.43.2": "5.43.2_acorn@8.15.0",

     

       
39
       
 
       
    "npm:tailwindcss@^4.1.16": "4.1.16",

     

       
40
       
 
       
    "npm:typescript-eslint@^8.46.3": "8.46.3_eslint@9.39.0_typescript@5.9.3_@typescript-eslint+parser@8.46.3__eslint@9.39.0__typescript@5.9.3",

     
···

       
1661
       
 
       
        "svelte"

     

       
1662
       
 
       
      ]

     

       
1663
       
 
       
    },

     

       
1664
       
-
       
    "svelte-floating-ui@1.6.2": {

     

       
1665
       
-
       
      "integrity": "sha512-EC+DZtBey50P6l3NSzNQWon3cip8a1bzwdpmCdc45kymqEWL4BKhPemAq7SQ9QLebDPaMECW6YodxFbs2d+O/w==",

     

       
1666
       
-
       
      "dependencies": [

     

       
1667
       
-
       
        "@floating-ui/dom"

     

       
1668
       
-
       
      ]

     

       
1669
       
-
       
    },

     

       
1670
       
 
       
    "svelte-infinite@0.5.1_svelte@5.43.2__acorn@8.15.0": {

     

       
1671
       
 
       
      "integrity": "sha512-NvpYWrHPcLHZQMnqUXgKGpOSMq9kMQ6sa8+WO80jLrgBFX+LWoKvAsrc1d1g+eiaagNAE9HalWWJ4KDtYi/+sw==",

     

       
1672
       
 
       
      "dependencies": [

     

       
1673
       
 
       
        "svelte"

     

       
1674
       
 
       
      ]

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
1675
       
 
       
    },

     

       
1676
       
 
       
    "svelte@5.43.2_acorn@8.15.0": {

     

       
1677
       
 
       
      "integrity": "sha512-ro1umEzX8rT5JpCmlf0PPv7ncD8MdVob9e18bhwqTKNoLjS8kDvhVpaoYVPc+qMwDAOfcwJtyY7ZFSDbOaNPgA==",

     
···

       
1839
       
 
       
        "npm:svelte-awesome-color-picker@^4.1.0",

     

       
1840
       
 
       
        "npm:svelte-check@^4.3.3",

     

       
1841
       
 
       
        "npm:svelte-device-info@^1.0.6",

     

       
1842
       
-
       
        "npm:svelte-floating-ui@^1.6.2",

     

       
1843
       
 
       
        "npm:svelte-infinite@~0.5.1",

     

       
0
       
 
       

     

       
1844
       
 
       
        "npm:svelte@^5.43.2",

     

       
1845
       
 
       
        "npm:tailwindcss@^4.1.16",

     

       
1846
       
 
       
        "npm:typescript-eslint@^8.46.3",

     

···

       
33
       
 
       
    "npm:svelte-awesome-color-picker@^4.1.0": "4.1.0_svelte@5.43.2__acorn@8.15.0",

     

       
34
       
 
       
    "npm:svelte-check@^4.3.3": "4.3.3_svelte@5.43.2__acorn@8.15.0_typescript@5.9.3",

     

       
35
       
 
       
    "npm:svelte-device-info@^1.0.6": "1.0.6",

     

       
0
       
 
       

     

       
36
       
 
       
    "npm:svelte-infinite@~0.5.1": "0.5.1_svelte@5.43.2__acorn@8.15.0",

     

       
37
       
+
       
    "npm:svelte-portal@^2.2.1": "2.2.1",

     

       
38
       
 
       
    "npm:svelte@^5.43.2": "5.43.2_acorn@8.15.0",

     

       
39
       
 
       
    "npm:tailwindcss@^4.1.16": "4.1.16",

     

       
40
       
 
       
    "npm:typescript-eslint@^8.46.3": "8.46.3_eslint@9.39.0_typescript@5.9.3_@typescript-eslint+parser@8.46.3__eslint@9.39.0__typescript@5.9.3",

     
···

       
1661
       
 
       
        "svelte"

     

       
1662
       
 
       
      ]

     

       
1663
       
 
       
    },

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
1664
       
 
       
    "svelte-infinite@0.5.1_svelte@5.43.2__acorn@8.15.0": {

     

       
1665
       
 
       
      "integrity": "sha512-NvpYWrHPcLHZQMnqUXgKGpOSMq9kMQ6sa8+WO80jLrgBFX+LWoKvAsrc1d1g+eiaagNAE9HalWWJ4KDtYi/+sw==",

     

       
1666
       
 
       
      "dependencies": [

     

       
1667
       
 
       
        "svelte"

     

       
1668
       
 
       
      ]

     

       
1669
       
+
       
    },

     

       
1670
       
+
       
    "svelte-portal@2.2.1": {

     

       
1671
       
+
       
      "integrity": "sha512-uF7is5sM4aq5iN7QF/67XLnTUvQCf2iiG/B1BHTqLwYVY1dsVmTeXZ/LeEyU6dLjApOQdbEG9lkqHzxiQtOLEQ=="

     

       
1672
       
 
       
    },

     

       
1673
       
 
       
    "svelte@5.43.2_acorn@8.15.0": {

     

       
1674
       
 
       
      "integrity": "sha512-ro1umEzX8rT5JpCmlf0PPv7ncD8MdVob9e18bhwqTKNoLjS8kDvhVpaoYVPc+qMwDAOfcwJtyY7ZFSDbOaNPgA==",

     
···

       
1836
       
 
       
        "npm:svelte-awesome-color-picker@^4.1.0",

     

       
1837
       
 
       
        "npm:svelte-check@^4.3.3",

     

       
1838
       
 
       
        "npm:svelte-device-info@^1.0.6",

     

       
0
       
 
       

     

       
1839
       
 
       
        "npm:svelte-infinite@~0.5.1",

     

       
1840
       
+
       
        "npm:svelte-portal@^2.2.1",

     

       
1841
       
 
       
        "npm:svelte@^5.43.2",

     

       
1842
       
 
       
        "npm:tailwindcss@^4.1.16",

     

       
1843
       
 
       
        "npm:typescript-eslint@^8.46.3",

     

···

       
28
       
 
       
		"hash-wasm": "^4.12.0",

     

       
29
       
 
       
		"lru-cache": "^11.2.2",

     

       
30
       
 
       
		"svelte-device-info": "^1.0.6",

     

       
31
       
-
       
		"svelte-infinite": "^0.5.1"

     

       
0
       
 
       

     

       
32
       
 
       
	},

     

       
33
       
 
       
	"devDependencies": {

     

       
34
       
 
       
		"@eslint/compat": "^1.4.1",

     

···

       
28
       
 
       
		"hash-wasm": "^4.12.0",

     

       
29
       
 
       
		"lru-cache": "^11.2.2",

     

       
30
       
 
       
		"svelte-device-info": "^1.0.6",

     

       
31
       
+
       
		"svelte-infinite": "^0.5.1",

     

       
32
       
+
       
		"svelte-portal": "^2.2.1"

     

       
33
       
 
       
	},

     

       
34
       
 
       
	"devDependencies": {

     

       
35
       
 
       
		"@eslint/compat": "^1.4.1",

     

···

       
90
       
 
       
	};

     

       
91
       
 
       
</script>

     

       
92
       
 
       


     

       
93
       
-
       
<Dropdown bind:isOpen={isDropdownOpen}>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
94
       
 
       
	{#snippet trigger()}

     

       
95
       
 
       
		<button

     

       
96
       
 
       
			onclick={toggleDropdown}

     
···

       
104
       
 
       
		</button>

     

       
105
       
 
       
	{/snippet}

     

       
106
       
 
       


     

       
107
       
-
       
	<div

     

       
108
       
-
       
		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"

     

       
109
       
-
       
	>

     

       
110
       
-
       
		{#if accounts.length > 0}

     

       
111
       
-
       
			<div class="p-2">

     

       
112
       
-
       
				{#each accounts as account (account.did)}

     

       
113
       
-
       
					{@const color = generateColorForDid(account.did)}

     

       
114
       
-
       
					{#snippet action(name: string, icon: string, onClick: () => void)}

     

       
115
       
-
       
						<!-- svelte-ignore a11y_click_events_have_key_events -->

     

       
116
       
-
       
						<!-- svelte-ignore a11y_no_static_element_interactions -->

     

       
117
       
-
       
						<div

     

       
118
       
-
       
							title={name}

     

       
119
       
-
       
							onclick={onClick}

     

       
120
       
-
       
							class="hidden text-(--nucleus-accent) transition-all group-hover:block hover:scale-[1.2] hover:shadow-md"

     

       
121
       
-
       
						>

     

       
122
       
-
       
							<Icon class="h-5 w-5" {icon} />

     

       
123
       
-
       
						</div>

     

       
124
       
-
       
					{/snippet}

     

       
125
       
-
       
					<button

     

       
126
       
-
       
						onclick={() => selectAccount(account.did)}

     

       
127
       
-
       
						class="

     

       
128
       
-
       
						group flex w-full items-center gap-3 rounded-sm p-2 text-left text-sm font-medium transition-all

     

       
129
       
-
       
						{account.did === selectedDid ? 'shadow-lg' : ''}

     

       
130
       
-
       
					"

     

       
131
       
-
       
						style="color: {color}; background: {account.did === selectedDid

     

       
132
       
-
       
							? `linear-gradient(135deg, color-mix(in srgb, var(--nucleus-accent) 20%, transparent), color-mix(in srgb, var(--nucleus-accent2) 20%, transparent))`

     

       
133
       
-
       
							: 'transparent'};"

     

       
134
       
 
       
					>

     

       
135
       
-
       
						<span>@{account.handle}</span>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
136
       
 
       


     

       
137
       
-
       
						<div class="grow"></div>

     

       
138
       
 
       


     

       
139
       
-
       
						{@render action('relogin', 'heroicons:arrow-path-rounded-square-solid', () =>

     

       
140
       
-
       
							initiateLogin(account.did, account.handle)

     

       
141
       
-
       
						)}

     

       
142
       
-
       
						{@render action('logout', 'heroicons:trash-solid', () => onLogout(account.did))}

     

       
143
       
 
       


     

       
144
       
-
       
						{#if account.did === selectedDid}

     

       
145
       
-
       
							<Icon

     

       
146
       
-
       
								icon="heroicons:check-16-solid"

     

       
147
       
-
       
								class="h-5 w-5 scale-125 text-(--nucleus-accent) group-hover:hidden"

     

       
148
       
-
       
							/>

     

       
149
       
-
       
						{/if}

     

       
150
       
-
       
					</button>

     

       
151
       
-
       
				{/each}

     

       
152
       
-
       
			</div>

     

       
153
       
-
       
			<div class="mx-2 h-px bg-linear-to-r from-(--nucleus-accent) to-(--nucleus-accent2)"></div>

     

       
154
       
-
       
		{/if}

     

       
155
       
-
       
		<button

     

       
156
       
-
       
			onclick={openLoginModal}

     

       
157
       
-
       
			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]"

     

       
158
       
-
       
		>

     

       
159
       
-
       
			<Icon class="h-5 w-5 scale-[130%]" icon="heroicons:plus-16-solid" />

     

       
160
       
-
       
			<span>add account</span>

     

       
161
       
-
       
		</button>

     

       
162
       
-
       
	</div>

     

       
163
       
 
       
</Dropdown>

     

       
164
       
 
       


     

       
165
       
 
       
<Popup bind:isOpen={isLoginModalOpen} onClose={closeLoginModal} title="add account">

     

···

       
90
       
 
       
	};

     

       
91
       
 
       
</script>

     

       
92
       
 
       


     

       
93
       
+
       
<Dropdown

     

       
94
       
+
       
	class="min-w-52 rounded-sm border-2 border-(--nucleus-accent) bg-(--nucleus-bg) shadow-2xl"

     

       
95
       
+
       
	bind:isOpen={isDropdownOpen}

     

       
96
       
+
       
>

     

       
97
       
 
       
	{#snippet trigger()}

     

       
98
       
 
       
		<button

     

       
99
       
 
       
			onclick={toggleDropdown}

     
···

       
107
       
 
       
		</button>

     

       
108
       
 
       
	{/snippet}

     

       
109
       
 
       


     

       
110
       
+
       
	{#if accounts.length > 0}

     

       
111
       
+
       
		<div class="p-2">

     

       
112
       
+
       
			{#each accounts as account (account.did)}

     

       
113
       
+
       
				{@const color = generateColorForDid(account.did)}

     

       
114
       
+
       
				{#snippet action(name: string, icon: string, onClick: () => void)}

     

       
115
       
+
       
					<!-- svelte-ignore a11y_click_events_have_key_events -->

     

       
116
       
+
       
					<!-- svelte-ignore a11y_no_static_element_interactions -->

     

       
117
       
+
       
					<div

     

       
118
       
+
       
						title={name}

     

       
119
       
+
       
						onclick={onClick}

     

       
120
       
+
       
						class="hidden text-(--nucleus-accent) transition-all group-hover:block hover:scale-[1.2] hover:shadow-md"

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
121
       
 
       
					>

     

       
122
       
+
       
						<Icon class="h-5 w-5" {icon} />

     

       
123
       
+
       
					</div>

     

       
124
       
+
       
				{/snippet}

     

       
125
       
+
       
				<button

     

       
126
       
+
       
					onclick={() => selectAccount(account.did)}

     

       
127
       
+
       
					class="

     

       
128
       
+
       
					group flex w-full items-center gap-3 rounded-sm p-2 text-left text-sm font-medium transition-all

     

       
129
       
+
       
					{account.did === selectedDid ? 'shadow-lg' : ''}

     

       
130
       
+
       
				"

     

       
131
       
+
       
					style="color: {color}; background: {account.did === selectedDid

     

       
132
       
+
       
						? `linear-gradient(135deg, color-mix(in srgb, var(--nucleus-accent) 20%, transparent), color-mix(in srgb, var(--nucleus-accent2) 20%, transparent))`

     

       
133
       
+
       
						: 'transparent'};"

     

       
134
       
+
       
				>

     

       
135
       
+
       
					<span>@{account.handle}</span>

     

       
136
       
 
       


     

       
137
       
+
       
					<div class="grow"></div>

     

       
138
       
 
       


     

       
139
       
+
       
					{@render action('relogin', 'heroicons:arrow-path-rounded-square-solid', () =>

     

       
140
       
+
       
						initiateLogin(account.did, account.handle)

     

       
141
       
+
       
					)}

     

       
142
       
+
       
					{@render action('logout', 'heroicons:trash-solid', () => onLogout(account.did))}

     

       
143
       
 
       


     

       
144
       
+
       
					{#if account.did === selectedDid}

     

       
145
       
+
       
						<Icon

     

       
146
       
+
       
							icon="heroicons:check-16-solid"

     

       
147
       
+
       
							class="h-5 w-5 scale-125 text-(--nucleus-accent) group-hover:hidden"

     

       
148
       
+
       
						/>

     

       
149
       
+
       
					{/if}

     

       
150
       
+
       
				</button>

     

       
151
       
+
       
			{/each}

     

       
152
       
+
       
		</div>

     

       
153
       
+
       
		<div class="mx-2 h-px bg-linear-to-r from-(--nucleus-accent) to-(--nucleus-accent2)"></div>

     

       
154
       
+
       
	{/if}

     

       
155
       
+
       
	<button

     

       
156
       
+
       
		onclick={openLoginModal}

     

       
157
       
+
       
		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]"

     

       
158
       
+
       
	>

     

       
159
       
+
       
		<Icon class="h-5 w-5 scale-[130%]" icon="heroicons:plus-16-solid" />

     

       
160
       
+
       
		<span>add account</span>

     

       
161
       
+
       
	</button>

     

       
0
       
 
       

     

       
162
       
 
       
</Dropdown>

     

       
163
       
 
       


     

       
164
       
 
       
<Popup bind:isOpen={isLoginModalOpen} onClose={closeLoginModal} title="add account">

     

···

       
31
       
 
       
	import { derived } from 'svelte/store';

     

       
32
       
 
       
	import Device from 'svelte-device-info';

     

       
33
       
 
       
	import Dropdown from './Dropdown.svelte';

     

       
0
       
 
       

     

       
0
       
 
       

     

       
34
       
 
       


     

       
35
       
 
       
	interface Props {

     

       
36
       
 
       
		client: AtpClient;

     
···

       
215
       
 
       
	};

     

       
216
       
 
       


     

       
217
       
 
       
	let actionsOpen = $state(false);

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
218
       
 
       
</script>

     

       
219
       
 
       


     

       
220
       
-
       
{#snippet embedBadge(record: AppBskyFeedPost.Main)}

     

       
221
       
-
       
	{#if record.embed}

     

       
222
       
-
       
		<span

     

       
223
       
-
       
			class="rounded-full px-2.5 py-0.5 text-xs font-medium"

     

       
224
       
-
       
			style="

     

       
225
       
-
       
			background: color-mix(in srgb, {mini ? 'var(--nucleus-fg)' : color} 10%, transparent);

     

       
226
       
-
       
			color: {mini ? 'var(--nucleus-fg)' : color};

     

       
227
       
-
       
			"

     

       
228
       
-
       
		>

     

       
229
       
-
       
			{getEmbedText(record.embed.$type)}

     

       
230
       
-
       
		</span>

     

       
231
       
-
       
	{/if}

     

       
232
       
 
       
{/snippet}

     

       
233
       
 
       


     

       
234
       
 
       
{#if mini}

     
···

       
244
       
 
       
					onclick={() => scrollToAndPulse(post.value.uri)}

     

       
245
       
 
       
					class="select-none hover:cursor-pointer hover:underline"

     

       
246
       
 
       
				>

     

       
247
       
-
       
					<span style="color: {color};">@{handle}</span>: {@render embedBadge(record)}

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
248
       
 
       
					<span title={record.text}>{record.text}</span>

     

       
249
       
 
       
				</div>

     

       
250
       
 
       
			{:else}

     
···

       
269
       
 
       
	{:then post}

     

       
270
       
 
       
		{#if post.ok}

     

       
271
       
 
       
			{@const record = post.value.record}

     

       
0
       
 
       

     

       
272
       
 
       
			<div

     

       
273
       
 
       
				id="timeline-post-{post.value.uri}-{quoteDepth}"

     

       
0
       
 
       

     

       
274
       
 
       
				class="

     

       
275
       
 
       
				group rounded-sm border-2 p-2 shadow-lg backdrop-blur-sm transition-all

     

       
276
       
 
       
				{$isPulsing ? 'animate-pulse-highlight' : ''}

     

       
0
       
 
       

     

       
277
       
 
       
				"

     

       
278
       
 
       
				style="

     

       
279
       
-
       
				background: {color}{isOnPostComposer ? '36' : '18'};

     

       
0
       
 
       

     

       
0
       
 
       

     

       
280
       
 
       
				border-color: {color}{isOnPostComposer ? '99' : '66'};

     

       
281
       
 
       
				"

     

       
282
       
 
       
			>

     

       
283
       
 
       
				<div

     

       
284
       
-
       
					class="mb-3 flex w-fit max-w-full items-center gap-1.5 rounded-sm pr-1"

     

       
0
       
 
       

     

       
0
       
 
       

     

       
285
       
 
       
					style="background: {color}33;"

     

       
286
       
 
       
				>

     

       
287
       
 
       
					<ProfilePicture {client} {did} size={8} />

     

       
288
       
 
       


     

       
289
       
-
       
					<span class="flex min-w-0 items-center gap-2 font-bold" style="color: {color};">

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
290
       
 
       
						{#await client.getProfile(did)}

     

       
291
       
 
       
							{handle}

     

       
292
       
 
       
						{:then profile}

     

       
293
       
 
       
							{#if profile.ok}

     

       
294
       
 
       
								{@const profileValue = profile.value}

     

       
295
       
-
       
								<span class="min-w-0 overflow-hidden text-nowrap overflow-ellipsis"

     

       
296
       
 
       
									>{profileValue.displayName}</span

     

       
297
       
-
       
								><span class="shrink-0 text-nowrap opacity-70">(@{handle})</span>

     

       
298
       
 
       
							{:else}

     

       
299
       
 
       
								{handle}

     

       
300
       
 
       
							{/if}

     
···

       
305
       
 
       
						>{getRelativeTime(new Date(record.createdAt))}</span

     

       
306
       
 
       
					>

     

       
307
       
 
       
				</div>

     

       
308
       
-
       
				<p class="leading-relaxed text-wrap wrap-break-word">

     

       
309
       
 
       
					{record.text}

     

       
310
       
-
       
					{#if isOnPostComposer}

     

       
311
       
-
       
						{@render embedBadge(record)}

     

       
312
       
 
       
					{/if}

     

       
313
       
 
       
				</p>

     

       
314
       
 
       
				{#if !isOnPostComposer && record.embed}

     

       
315
       
 
       
					{@const embed = record.embed}

     

       
316
       
 
       
					<div class="mt-2">

     

       
317
       
-
       
						{#snippet embedMedia(

     

       
318
       
-
       
							embed: AppBskyEmbedImages.Main | AppBskyEmbedVideo.Main | AppBskyEmbedExternal.Main

     

       
319
       
-
       
						)}

     

       
320
       
-
       
							{#if embed.$type === 'app.bsky.embed.images'}

     

       
321
       
-
       
								<!-- todo: improve how images are displayed, and pop out on click -->

     

       
322
       
-
       
								{#each embed.images as image (image.image)}

     

       
323
       
-
       
									{#if isBlob(image.image)}

     

       
324
       
-
       
										<img

     

       
325
       
-
       
											class="rounded-sm"

     

       
326
       
-
       
											src={img('feed_thumbnail', did, image.image.ref.$link)}

     

       
327
       
-
       
											alt={image.alt}

     

       
328
       
-
       
										/>

     

       
329
       
-
       
									{/if}

     

       
330
       
-
       
								{/each}

     

       
331
       
-
       
							{:else if embed.$type === 'app.bsky.embed.video'}

     

       
332
       
-
       
								{#if isBlob(embed.video)}

     

       
333
       
-
       
									{#await didDoc then didDoc}

     

       
334
       
-
       
										{#if didDoc.ok}

     

       
335
       
-
       
											<!-- svelte-ignore a11y_media_has_caption -->

     

       
336
       
-
       
											<video

     

       
337
       
-
       
												class="rounded-sm"

     

       
338
       
-
       
												src={blob(didDoc.value.pds, did, embed.video.ref.$link)}

     

       
339
       
-
       
												controls

     

       
340
       
-
       
											></video>

     

       
341
       
-
       
										{/if}

     

       
342
       
-
       
									{/await}

     

       
343
       
-
       
								{/if}

     

       
344
       
-
       
							{/if}

     

       
345
       
-
       
						{/snippet}

     

       
346
       
-
       
						{#snippet embedPost(uri: ResourceUri)}

     

       
347
       
-
       
							{#if quoteDepth < 2}

     

       
348
       
-
       
								{@const parsedUri = expect(parseCanonicalResourceUri(uri))}

     

       
349
       
-
       
								<!-- reject recursive quotes -->

     

       
350
       
-
       
								{#if !(did === parsedUri.repo && rkey === parsedUri.rkey)}

     

       
351
       
-
       
									<BskyPost

     

       
352
       
-
       
										{client}

     

       
353
       
-
       
										quoteDepth={quoteDepth + 1}

     

       
354
       
-
       
										did={parsedUri.repo}

     

       
355
       
-
       
										rkey={parsedUri.rkey}

     

       
356
       
-
       
										{isOnPostComposer}

     

       
357
       
-
       
										{onQuote}

     

       
358
       
-
       
										{onReply}

     

       
359
       
-
       
									/>

     

       
360
       
-
       
								{:else}

     

       
361
       
-
       
									<span>you think you're funny with that recursive quote but i'm onto you</span>

     

       
362
       
-
       
								{/if}

     

       
363
       
-
       
							{:else}

     

       
364
       
-
       
								{@render embedBadge(record)}

     

       
365
       
-
       
							{/if}

     

       
366
       
-
       
						{/snippet}

     

       
367
       
-
       
						{#if embed.$type === 'app.bsky.embed.images' || embed.$type === 'app.bsky.embed.video'}

     

       
368
       
-
       
							{@render embedMedia(embed)}

     

       
369
       
-
       
						{:else if embed.$type === 'app.bsky.embed.record'}

     

       
370
       
-
       
							{@render embedPost(embed.record.uri)}

     

       
371
       
-
       
						{:else if embed.$type === 'app.bsky.embed.recordWithMedia'}

     

       
372
       
-
       
							<div class="space-y-1.5">

     

       
373
       
-
       
								{@render embedPost(embed.record.record.uri)}

     

       
374
       
-
       
								{@render embedMedia(embed.media)}

     

       
375
       
-
       
							</div>

     

       
376
       
-
       
						{/if}

     

       
377
       
-
       
						<!-- todo: implement external link embeds -->

     

       
378
       
 
       
					</div>

     

       
379
       
 
       
				{/if}

     

       
380
       
 
       
				{#if !isOnPostComposer}

     
···

       
390
       
 
       
	{/await}

     

       
391
       
 
       
{/if}

     

       
392
       
 
       


     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
393
       
 
       
{#snippet postControls(post: PostWithUri, backlinks?: PostActions)}

     

       
394
       
 
       
	{#snippet control(

     

       
395
       
 
       
		name: string,

     
···

       
453
       
 
       
				true

     

       
454
       
 
       
			)}

     

       
455
       
 
       
		</div>

     

       
456
       
-
       
		<div

     

       
457
       
-
       
			class="

     

       
458
       
-
       
		    w-fit items-center rounded-sm transition-opacity

     

       
459
       
-
       
			duration-100 ease-in-out group-hover:opacity-100

     

       
460
       
-
       
			{!actionsOpen && !Device.isMobile ? 'opacity-0' : ''}

     

       
461
       
-
       
			"

     

       
462
       
-
       
			style="background: {color}1f;"

     

       
463
       
 
       
		>

     

       
464
       
-
       
			<Dropdown bind:isOpen={actionsOpen}>

     

       
465
       
-
       
				{#snippet trigger()}

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
466
       
 
       
					{@render control('actions', 'heroicons:ellipsis-horizontal-16-solid', (e) => {

     

       
467
       
 
       
						e.stopPropagation();

     

       
468
       
 
       
						actionsOpen = !actionsOpen;

     

       
0
       
 
       

     

       
469
       
 
       
					})}

     

       
470
       
-
       
				{/snippet}

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
471
       
 
       


     

       
472
       
-
       
				woof

     

       
473
       
-
       
			</Dropdown>

     

       
474
       
-
       
		</div>

     

       
475
       
-
       
	</div>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
476
       
 
       
{/snippet}

     

···

       
31
       
 
       
	import { derived } from 'svelte/store';

     

       
32
       
 
       
	import Device from 'svelte-device-info';

     

       
33
       
 
       
	import Dropdown from './Dropdown.svelte';

     

       
34
       
+
       
	import { type AppBskyEmbeds } from '$lib/at/types';

     

       
35
       
+
       
	import { settings } from '$lib/settings';

     

       
36
       
 
       


     

       
37
       
 
       
	interface Props {

     

       
38
       
 
       
		client: AtpClient;

     
···

       
217
       
 
       
	};

     

       
218
       
 
       


     

       
219
       
 
       
	let actionsOpen = $state(false);

     

       
220
       
+
       
	let actionsPos = $state({ x: 0, y: 0 });

     

       
221
       
+
       


     

       
222
       
+
       
	const handleRightClick = (event: MouseEvent) => {

     

       
223
       
+
       
		actionsOpen = true;

     

       
224
       
+
       
		actionsPos = { x: event.clientX, y: event.clientY };

     

       
225
       
+
       
		event.preventDefault();

     

       
226
       
+
       
	};

     

       
227
       
 
       
</script>

     

       
228
       
 
       


     

       
229
       
+
       
{#snippet embedBadge(embed: AppBskyEmbeds)}

     

       
230
       
+
       
	<span

     

       
231
       
+
       
		class="rounded-full px-2.5 py-0.5 text-xs font-medium"

     

       
232
       
+
       
		style="

     

       
233
       
+
       
		background: color-mix(in srgb, {mini ? 'var(--nucleus-fg)' : color} 10%, transparent);

     

       
234
       
+
       
		color: {mini ? 'var(--nucleus-fg)' : color};

     

       
235
       
+
       
		"

     

       
236
       
+
       
	>

     

       
237
       
+
       
		{getEmbedText(embed.$type!)}

     

       
238
       
+
       
	</span>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
239
       
 
       
{/snippet}

     

       
240
       
 
       


     

       
241
       
 
       
{#if mini}

     
···

       
251
       
 
       
					onclick={() => scrollToAndPulse(post.value.uri)}

     

       
252
       
 
       
					class="select-none hover:cursor-pointer hover:underline"

     

       
253
       
 
       
				>

     

       
254
       
+
       
					<span style="color: {color};">@{handle}</span>:

     

       
255
       
+
       
					{#if record.embed}

     

       
256
       
+
       
						{@render embedBadge(record.embed)}

     

       
257
       
+
       
					{/if}

     

       
258
       
 
       
					<span title={record.text}>{record.text}</span>

     

       
259
       
 
       
				</div>

     

       
260
       
 
       
			{:else}

     
···

       
279
       
 
       
	{:then post}

     

       
280
       
 
       
		{#if post.ok}

     

       
281
       
 
       
			{@const record = post.value.record}

     

       
282
       
+
       
			<!-- svelte-ignore a11y_no_static_element_interactions -->

     

       
283
       
 
       
			<div

     

       
284
       
 
       
				id="timeline-post-{post.value.uri}-{quoteDepth}"

     

       
285
       
+
       
				oncontextmenu={handleRightClick}

     

       
286
       
 
       
				class="

     

       
287
       
 
       
				group rounded-sm border-2 p-2 shadow-lg backdrop-blur-sm transition-all

     

       
288
       
 
       
				{$isPulsing ? 'animate-pulse-highlight' : ''}

     

       
289
       
+
       
				{isOnPostComposer ? 'backdrop-brightness-20' : ''}

     

       
290
       
 
       
				"

     

       
291
       
 
       
				style="

     

       
292
       
+
       
				background: {color}{isOnPostComposer

     

       
293
       
+
       
					? '36'

     

       
294
       
+
       
					: Math.floor(24.0 * (quoteDepth * 0.5 + 1.0)).toString(16)};

     

       
295
       
 
       
				border-color: {color}{isOnPostComposer ? '99' : '66'};

     

       
296
       
 
       
				"

     

       
297
       
 
       
			>

     

       
298
       
 
       
				<div

     

       
299
       
+
       
					class="

     

       
300
       
+
       
					mb-3 flex w-fit max-w-full items-center gap-1.5 rounded-sm pr-1

     

       
301
       
+
       
					"

     

       
302
       
 
       
					style="background: {color}33;"

     

       
303
       
 
       
				>

     

       
304
       
 
       
					<ProfilePicture {client} {did} size={8} />

     

       
305
       
 
       


     

       
306
       
+
       
					<span

     

       
307
       
+
       
						class="

     

       
308
       
+
       
						flex min-w-0 items-center gap-2 font-bold

     

       
309
       
+
       
						{isOnPostComposer ? 'contrast-200' : ''}

     

       
310
       
+
       
						"

     

       
311
       
+
       
						style="color: {color};"

     

       
312
       
+
       
					>

     

       
313
       
 
       
						{#await client.getProfile(did)}

     

       
314
       
 
       
							{handle}

     

       
315
       
 
       
						{:then profile}

     

       
316
       
 
       
							{#if profile.ok}

     

       
317
       
 
       
								{@const profileValue = profile.value}

     

       
318
       
+
       
								<span class="w-min min-w-0 overflow-hidden text-nowrap overflow-ellipsis"

     

       
319
       
 
       
									>{profileValue.displayName}</span

     

       
320
       
+
       
								><span class="text-nowrap opacity-70">(@{handle})</span>

     

       
321
       
 
       
							{:else}

     

       
322
       
 
       
								{handle}

     

       
323
       
 
       
							{/if}

     
···

       
328
       
 
       
						>{getRelativeTime(new Date(record.createdAt))}</span

     

       
329
       
 
       
					>

     

       
330
       
 
       
				</div>

     

       
331
       
+
       
				<p class="leading-normal text-wrap wrap-break-word">

     

       
332
       
 
       
					{record.text}

     

       
333
       
+
       
					{#if isOnPostComposer && record.embed}

     

       
334
       
+
       
						{@render embedBadge(record.embed)}

     

       
335
       
 
       
					{/if}

     

       
336
       
 
       
				</p>

     

       
337
       
 
       
				{#if !isOnPostComposer && record.embed}

     

       
338
       
 
       
					{@const embed = record.embed}

     

       
339
       
 
       
					<div class="mt-2">

     

       
340
       
+
       
						{@render postEmbed(embed)}

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
341
       
 
       
					</div>

     

       
342
       
 
       
				{/if}

     

       
343
       
 
       
				{#if !isOnPostComposer}

     
···

       
353
       
 
       
	{/await}

     

       
354
       
 
       
{/if}

     

       
355
       
 
       


     

       
356
       
+
       
{#snippet postEmbed(embed: AppBskyEmbeds)}

     

       
357
       
+
       
	{#snippet embedMedia(

     

       
358
       
+
       
		embed: AppBskyEmbedImages.Main | AppBskyEmbedVideo.Main | AppBskyEmbedExternal.Main

     

       
359
       
+
       
	)}

     

       
360
       
+
       
		{#if embed.$type === 'app.bsky.embed.images'}

     

       
361
       
+
       
			<!-- todo: improve how images are displayed, and pop out on click -->

     

       
362
       
+
       
			{#each embed.images as image (image.image)}

     

       
363
       
+
       
				{#if isBlob(image.image)}

     

       
364
       
+
       
					<img

     

       
365
       
+
       
						class="rounded-sm"

     

       
366
       
+
       
						src={img('feed_thumbnail', did, image.image.ref.$link)}

     

       
367
       
+
       
						alt={image.alt}

     

       
368
       
+
       
					/>

     

       
369
       
+
       
				{/if}

     

       
370
       
+
       
			{/each}

     

       
371
       
+
       
		{:else if embed.$type === 'app.bsky.embed.video'}

     

       
372
       
+
       
			{#if isBlob(embed.video)}

     

       
373
       
+
       
				{#await didDoc then didDoc}

     

       
374
       
+
       
					{#if didDoc.ok}

     

       
375
       
+
       
						<!-- svelte-ignore a11y_media_has_caption -->

     

       
376
       
+
       
						<video

     

       
377
       
+
       
							class="rounded-sm"

     

       
378
       
+
       
							src={blob(didDoc.value.pds, did, embed.video.ref.$link)}

     

       
379
       
+
       
							controls

     

       
380
       
+
       
						></video>

     

       
381
       
+
       
					{/if}

     

       
382
       
+
       
				{/await}

     

       
383
       
+
       
			{/if}

     

       
384
       
+
       
		{/if}

     

       
385
       
+
       
	{/snippet}

     

       
386
       
+
       
	{#snippet embedPost(uri: ResourceUri)}

     

       
387
       
+
       
		{#if quoteDepth < 2}

     

       
388
       
+
       
			{@const parsedUri = expect(parseCanonicalResourceUri(uri))}

     

       
389
       
+
       
			<!-- reject recursive quotes -->

     

       
390
       
+
       
			{#if !(did === parsedUri.repo && rkey === parsedUri.rkey)}

     

       
391
       
+
       
				<BskyPost

     

       
392
       
+
       
					{client}

     

       
393
       
+
       
					quoteDepth={quoteDepth + 1}

     

       
394
       
+
       
					did={parsedUri.repo}

     

       
395
       
+
       
					rkey={parsedUri.rkey}

     

       
396
       
+
       
					{isOnPostComposer}

     

       
397
       
+
       
					{onQuote}

     

       
398
       
+
       
					{onReply}

     

       
399
       
+
       
				/>

     

       
400
       
+
       
			{:else}

     

       
401
       
+
       
				<span>you think you're funny with that recursive quote but i'm onto you</span>

     

       
402
       
+
       
			{/if}

     

       
403
       
+
       
		{:else}

     

       
404
       
+
       
			{@render embedBadge(embed)}

     

       
405
       
+
       
		{/if}

     

       
406
       
+
       
	{/snippet}

     

       
407
       
+
       
	{#if embed.$type === 'app.bsky.embed.images' || embed.$type === 'app.bsky.embed.video'}

     

       
408
       
+
       
		{@render embedMedia(embed)}

     

       
409
       
+
       
	{:else if embed.$type === 'app.bsky.embed.record'}

     

       
410
       
+
       
		{@render embedPost(embed.record.uri)}

     

       
411
       
+
       
	{:else if embed.$type === 'app.bsky.embed.recordWithMedia'}

     

       
412
       
+
       
		<div class="space-y-1.5">

     

       
413
       
+
       
			{@render embedPost(embed.record.record.uri)}

     

       
414
       
+
       
			{@render embedMedia(embed.media)}

     

       
415
       
+
       
		</div>

     

       
416
       
+
       
	{/if}

     

       
417
       
+
       
	<!-- todo: implement external link embeds -->

     

       
418
       
+
       
{/snippet}

     

       
419
       
+
       


     

       
420
       
 
       
{#snippet postControls(post: PostWithUri, backlinks?: PostActions)}

     

       
421
       
 
       
	{#snippet control(

     

       
422
       
 
       
		name: string,

     
···

       
480
       
 
       
				true

     

       
481
       
 
       
			)}

     

       
482
       
 
       
		</div>

     

       
483
       
+
       
		<Dropdown

     

       
484
       
+
       
			class="flex min-w-54 flex-col gap-1 rounded-sm border-2 p-1 shadow-2xl backdrop-blur-xl backdrop-brightness-60"

     

       
485
       
+
       
			style="background: {color}36; border-color: {color}99;"

     

       
486
       
+
       
			bind:isOpen={actionsOpen}

     

       
487
       
+
       
			bind:position={actionsPos}

     

       
0
       
 
       

     

       
0
       
 
       

     

       
488
       
 
       
		>

     

       
489
       
+
       
			{@render dropdownItem('heroicons:link-20-solid', 'copy link to post', () =>

     

       
490
       
+
       
				navigator.clipboard.writeText(`${$settings.socialAppUrl}/profile/${did}/post/${rkey}`)

     

       
491
       
+
       
			)}

     

       
492
       
+
       
			{@render dropdownItem('heroicons:link-20-solid', 'copy at uri', () =>

     

       
493
       
+
       
				navigator.clipboard.writeText(post.uri)

     

       
494
       
+
       
			)}

     

       
495
       
+
       
			<div class="my-0.75 h-px w-full opacity-60" style="background: {color};"></div>

     

       
496
       
+
       
			{@render dropdownItem('heroicons:clipboard', 'copy post text', () =>

     

       
497
       
+
       
				navigator.clipboard.writeText(post.record.text)

     

       
498
       
+
       
			)}

     

       
499
       
+
       


     

       
500
       
+
       
			{#snippet trigger()}

     

       
501
       
+
       
				<div

     

       
502
       
+
       
					class="

     

       
503
       
+
       
          		    w-fit items-center rounded-sm transition-opacity

     

       
504
       
+
       
         			duration-100 ease-in-out group-hover:opacity-100

     

       
505
       
+
       
         			{!actionsOpen && !Device.isMobile ? 'opacity-0' : ''}

     

       
506
       
+
       
         			"

     

       
507
       
+
       
					style="background: {color}1f;"

     

       
508
       
+
       
				>

     

       
509
       
 
       
					{@render control('actions', 'heroicons:ellipsis-horizontal-16-solid', (e) => {

     

       
510
       
 
       
						e.stopPropagation();

     

       
511
       
 
       
						actionsOpen = !actionsOpen;

     

       
512
       
+
       
						actionsPos = { x: 0, y: 0 };

     

       
513
       
 
       
					})}

     

       
514
       
+
       
				</div>

     

       
515
       
+
       
			{/snippet}

     

       
516
       
+
       
		</Dropdown>

     

       
517
       
+
       
	</div>

     

       
518
       
+
       
{/snippet}

     

       
519
       
 
       


     

       
520
       
+
       
{#snippet dropdownItem(icon: string, label: string, onClick: () => void)}

     

       
521
       
+
       
	<button

     

       
522
       
+
       
		class="

     

       
523
       
+
       
		flex items-center justify-between rounded-sm px-2 py-1.5

     

       
524
       
+
       
		transition-all duration-100 hover:[backdrop-filter:brightness(120%)]

     

       
525
       
+
       
		"

     

       
526
       
+
       
		onclick={() => {

     

       
527
       
+
       
			onClick();

     

       
528
       
+
       
			actionsOpen = false;

     

       
529
       
+
       
		}}

     

       
530
       
+
       
	>

     

       
531
       
+
       
		<span class="font-bold">{label}</span>

     

       
532
       
+
       
		<Icon class="h-6 w-6" {icon} />

     

       
533
       
+
       
	</button>

     

       
534
       
 
       
{/snippet}

     

···

       
8
       
 
       
		type Placement

     

       
9
       
 
       
	} from '@floating-ui/dom';

     

       
10
       
 
       
	import { onMount } from 'svelte';

     

       
0
       
 
       

     

       
0
       
 
       

     

       
11
       
 
       


     

       
12
       
 
       
	interface Props {

     

       
0
       
 
       

     

       
0
       
 
       

     

       
13
       
 
       
		isOpen?: boolean;

     

       
14
       
 
       
		trigger?: import('svelte').Snippet;

     

       
15
       
 
       
		children?: import('svelte').Snippet;

     

       
16
       
 
       
		placement?: Placement;

     

       
17
       
 
       
		offsetDistance?: number;

     

       
0
       
 
       

     

       
18
       
 
       
	}

     

       
19
       
 
       


     

       
20
       
 
       
	let {

     
···

       
22
       
 
       
		trigger,

     

       
23
       
 
       
		children,

     

       
24
       
 
       
		placement = 'bottom-start',

     

       
25
       
-
       
		offsetDistance = 8

     

       
0
       
 
       

     

       
0
       
 
       

     

       
26
       
 
       
	}: Props = $props();

     

       
27
       
 
       


     

       
28
       
 
       
	let triggerRef: HTMLElement | undefined = $state();

     
···

       
86
       
 
       
</div>

     

       
87
       
 
       


     

       
88
       
 
       
{#if isOpen}

     

       
89
       
-
       
	<div bind:this={contentRef} class="fixed! z-9999!" role="menu" tabindex="-1">

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
90
       
 
       
		{@render children?.()}

     

       
91
       
 
       
	</div>

     

       
92
       
 
       
{/if}

     

···

       
8
       
 
       
		type Placement

     

       
9
       
 
       
	} from '@floating-ui/dom';

     

       
10
       
 
       
	import { onMount } from 'svelte';

     

       
11
       
+
       
	import { portal } from 'svelte-portal';

     

       
12
       
+
       
	import type { ClassValue } from 'svelte/elements';

     

       
13
       
 
       


     

       
14
       
 
       
	interface Props {

     

       
15
       
+
       
		class?: ClassValue;

     

       
16
       
+
       
		style?: string;

     

       
17
       
 
       
		isOpen?: boolean;

     

       
18
       
 
       
		trigger?: import('svelte').Snippet;

     

       
19
       
 
       
		children?: import('svelte').Snippet;

     

       
20
       
 
       
		placement?: Placement;

     

       
21
       
 
       
		offsetDistance?: number;

     

       
22
       
+
       
		position?: { x: number; y: number };

     

       
23
       
 
       
	}

     

       
24
       
 
       


     

       
25
       
 
       
	let {

     
···

       
27
       
 
       
		trigger,

     

       
28
       
 
       
		children,

     

       
29
       
 
       
		placement = 'bottom-start',

     

       
30
       
+
       
		offsetDistance = 2,

     

       
31
       
+
       
		position = $bindable(),

     

       
32
       
+
       
		...restProps

     

       
33
       
 
       
	}: Props = $props();

     

       
34
       
 
       


     

       
35
       
 
       
	let triggerRef: HTMLElement | undefined = $state();

     
···

       
93
       
 
       
</div>

     

       
94
       
 
       


     

       
95
       
 
       
{#if isOpen}

     

       
96
       
+
       
	<div

     

       
97
       
+
       
		use:portal={'#app-root'}

     

       
98
       
+
       
		bind:this={contentRef}

     

       
99
       
+
       
		class="fixed z-9999 animate-fade-in-scale-fast overflow-hidden {restProps.class ?? ''}"

     

       
100
       
+
       
		style={restProps.style}

     

       
101
       
+
       
		role="menu"

     

       
102
       
+
       
		tabindex="-1"

     

       
103
       
+
       
	>

     

       
104
       
 
       
		{@render children?.()}

     

       
105
       
 
       
	</div>

     

       
106
       
 
       
{/if}

     

···

       
1
       
 
       
<script lang="ts">

     

       
2
       
 
       
	import type { Snippet } from 'svelte';

     

       
0
       
 
       

     

       
3
       
 
       


     

       
4
       
 
       
	interface Props {

     

       
5
       
 
       
		isOpen: boolean;

     
···

       
31
       
 
       
		if (event.key === 'Escape') onClose();

     

       
32
       
 
       
	};

     

       
33
       
 
       


     

       
34
       
-
       
	let popupElement: HTMLDivElement | undefined = $state();

     

       
35
       
-
       


     

       
36
       
-
       
	// this sucks probably idk

     

       
37
       
 
       
	$effect(() => {

     

       
38
       
-
       
		if (!isOpen) return;

     

       
39
       
-
       


     

       
40
       
-
       
		const preventDefault = (e: Event) => {

     

       
41
       
-
       
			if (popupElement && popupElement.contains(e.target as Node)) return;

     

       
42
       
-
       
			e.preventDefault();

     

       
43
       
-
       
		};

     

       
44
       
-
       


     

       
45
       
-
       
		document.addEventListener('wheel', preventDefault, { passive: false });

     

       
46
       
-
       
		document.addEventListener('touchmove', preventDefault, { passive: false });

     

       
47
       
-
       


     

       
48
       
-
       
		return () => {

     

       
49
       
-
       
			document.removeEventListener('wheel', preventDefault);

     

       
50
       
-
       
			document.removeEventListener('touchmove', preventDefault);

     

       
51
       
-
       
		};

     

       
52
       
 
       
	});

     

       
53
       
 
       
</script>

     

       
54
       
 
       


     

       
55
       
 
       
{#if isOpen}

     

       
56
       
 
       
	<div

     

       
0
       
 
       

     

       
57
       
 
       
		class="fixed inset-0 z-50 flex items-center justify-center bg-(--nucleus-bg)/80 backdrop-blur-sm"

     

       
58
       
 
       
		onclick={onClose}

     

       
59
       
 
       
		onkeydown={handleKeydown}

     
···

       
63
       
 
       
		<!-- svelte-ignore a11y_interactive_supports_focus -->

     

       
64
       
 
       
		<!-- svelte-ignore a11y_click_events_have_key_events -->

     

       
65
       
 
       
		<div

     

       
66
       
-
       
			bind:this={popupElement}

     

       
67
       
-
       
			class="flex {height === 'auto'

     

       
68
       
-
       
				? ''

     

       
69
       
-
       
				: 'h-[' +

     

       
70
       
-
       
					height +

     

       
71
       
-
       
					']'} {width} shrink animate-fade-in-scale flex-col rounded-sm border-2 border-(--nucleus-accent) bg-(--nucleus-bg) shadow-2xl transition-all"

     

       
72
       
 
       
			style={height !== 'auto' ? `height: ${height}` : ''}

     

       
73
       
 
       
			onclick={(e) => e.stopPropagation()}

     

       
74
       
 
       
			role="dialog"

     

···

       
1
       
 
       
<script lang="ts">

     

       
2
       
 
       
	import type { Snippet } from 'svelte';

     

       
3
       
+
       
	import { portal } from 'svelte-portal';

     

       
4
       
 
       


     

       
5
       
 
       
	interface Props {

     

       
6
       
 
       
		isOpen: boolean;

     
···

       
32
       
 
       
		if (event.key === 'Escape') onClose();

     

       
33
       
 
       
	};

     

       
34
       
 
       


     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
35
       
 
       
	$effect(() => {

     

       
36
       
+
       
		document.body.style.overflow = isOpen ? 'hidden' : 'auto';

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
37
       
 
       
	});

     

       
38
       
 
       
</script>

     

       
39
       
 
       


     

       
40
       
 
       
{#if isOpen}

     

       
41
       
 
       
	<div

     

       
42
       
+
       
		use:portal={'#app-root'}

     

       
43
       
 
       
		class="fixed inset-0 z-50 flex items-center justify-center bg-(--nucleus-bg)/80 backdrop-blur-sm"

     

       
44
       
 
       
		onclick={onClose}

     

       
45
       
 
       
		onkeydown={handleKeydown}

     
···

       
49
       
 
       
		<!-- svelte-ignore a11y_interactive_supports_focus -->

     

       
50
       
 
       
		<!-- svelte-ignore a11y_click_events_have_key_events -->

     

       
51
       
 
       
		<div

     

       
52
       
+
       
			class="

     

       
53
       
+
       
			flex {height === 'auto' ? '' : `h-[${height}]`} {width} shrink animate-fade-in-scale flex-col

     

       
54
       
+
       
			rounded-sm border-2 border-(--nucleus-accent) bg-(--nucleus-bg) shadow-2xl transition-all

     

       
55
       
+
       
			"

     

       
0
       
 
       

     

       
0
       
 
       

     

       
56
       
 
       
			style={height !== 'auto' ? `height: ${height}` : ''}

     

       
57
       
 
       
			onclick={(e) => e.stopPropagation()}

     

       
58
       
 
       
			role="dialog"

     

···

       
89
       
 
       
		{@render divider()}

     

       
90
       
 
       


     

       
91
       
 
       
		<div>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
92
       
 
       
			{@render settingHeader(

     

       
93
       
 
       
				'cache management',

     

       
94
       
 
       
				'clears cached data (records, DID documents, handles, etc.)'

     

···

       
89
       
 
       
		{@render divider()}

     

       
90
       
 
       


     

       
91
       
 
       
		<div>

     

       
92
       
+
       
			<label for="social-app-url" class="mb-2 block text-sm font-semibold text-(--nucleus-fg)/80">

     

       
93
       
+
       
				social-app url (for when copying links to posts / profiles)

     

       
94
       
+
       
			</label>

     

       
95
       
+
       
			<input

     

       
96
       
+
       
				id="social-app-url"

     

       
97
       
+
       
				type="url"

     

       
98
       
+
       
				bind:value={localSettings.socialAppUrl}

     

       
99
       
+
       
				placeholder={defaultSettings.socialAppUrl}

     

       
100
       
+
       
				class="single-line-input border-(--nucleus-accent)/40 bg-(--nucleus-accent)/3"

     

       
101
       
+
       
			/>

     

       
102
       
+
       
		</div>

     

       
103
       
+
       


     

       
104
       
+
       
		{@render divider()}

     

       
105
       
+
       


     

       
106
       
+
       
		<div>

     

       
107
       
 
       
			{@render settingHeader(

     

       
108
       
 
       
				'cache management',

     

       
109
       
 
       
				'clears cached data (records, DID documents, handles, etc.)'

     

···

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

···

       
1
       
+
       
import type {

     

       
2
       
+
       
	AppBskyEmbedExternal,

     

       
3
       
+
       
	AppBskyEmbedImages,

     

       
4
       
+
       
	AppBskyEmbedRecord,

     

       
5
       
+
       
	AppBskyEmbedRecordWithMedia,

     

       
6
       
+
       
	AppBskyEmbedVideo

     

       
7
       
+
       
} from '@atcute/bluesky';

     

       
8
       
+
       


     

       
9
       
+
       
export type AppBskyEmbeds =

     

       
10
       
+
       
	| AppBskyEmbedExternal.Main

     

       
11
       
+
       
	| AppBskyEmbedImages.Main

     

       
12
       
+
       
	| AppBskyEmbedRecord.Main

     

       
13
       
+
       
	| AppBskyEmbedRecordWithMedia.Main

     

       
14
       
+
       
	| AppBskyEmbedVideo.Main;

     

···

       
9
       
 
       
export type Settings = {

     

       
10
       
 
       
	endpoints: ApiEndpoints;

     

       
11
       
 
       
	theme: Theme;

     

       
0
       
 
       

     

       
12
       
 
       
};

     

       
13
       
 
       


     

       
14
       
 
       
export const defaultSettings: Settings = {

     
···

       
17
       
 
       
		spacedust: 'https://spacedust.microcosm.blue',

     

       
18
       
 
       
		constellation: 'https://constellation.microcosm.blue'

     

       
19
       
 
       
	},

     

       
20
       
-
       
	theme: defaultTheme

     

       
0
       
 
       

     

       
21
       
 
       
};

     

       
22
       
 
       


     

       
23
       
 
       
const createSettingsStore = () => {

     
···

       
26
       
 
       
	const initial: Partial<Settings> = stored ? JSON.parse(stored) : defaultSettings;

     

       
27
       
 
       
	initial.endpoints = initial.endpoints ?? defaultSettings.endpoints;

     

       
28
       
 
       
	initial.theme = initial.theme ?? defaultSettings.theme;

     

       
0
       
 
       

     

       
29
       
 
       


     

       
30
       
 
       
	const { subscribe, set, update } = writable<Settings>(initial as Settings);

     

       
31
       
 
       


     

···

       
9
       
 
       
export type Settings = {

     

       
10
       
 
       
	endpoints: ApiEndpoints;

     

       
11
       
 
       
	theme: Theme;

     

       
12
       
+
       
	socialAppUrl: string;

     

       
13
       
 
       
};

     

       
14
       
 
       


     

       
15
       
 
       
export const defaultSettings: Settings = {

     
···

       
18
       
 
       
		spacedust: 'https://spacedust.microcosm.blue',

     

       
19
       
 
       
		constellation: 'https://constellation.microcosm.blue'

     

       
20
       
 
       
	},

     

       
21
       
+
       
	theme: defaultTheme,

     

       
22
       
+
       
	socialAppUrl: 'https://bsky.app'

     

       
23
       
 
       
};

     

       
24
       
 
       


     

       
25
       
 
       
const createSettingsStore = () => {

     
···

       
28
       
 
       
	const initial: Partial<Settings> = stored ? JSON.parse(stored) : defaultSettings;

     

       
29
       
 
       
	initial.endpoints = initial.endpoints ?? defaultSettings.endpoints;

     

       
30
       
 
       
	initial.theme = initial.theme ?? defaultSettings.theme;

     

       
31
       
+
       
	initial.socialAppUrl = initial.socialAppUrl ?? defaultSettings.socialAppUrl;

     

       
32
       
 
       


     

       
33
       
 
       
	const { subscribe, set, update } = writable<Settings>(initial as Settings);

     

       
34
       
 
       


     

···

       
9
       
 
       
	<link rel="icon" href={favicon} />

     

       
10
       
 
       
</svelte:head>

     

       
11
       
 
       


     

       
12
       
-
       
<div class="min-h-screen bg-(--nucleus-bg) text-(--nucleus-fg) transition-colors duration-300">

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
13
       
 
       
	{@render children?.()}

     

       
14
       
 
       
</div>

     

···

       
9
       
 
       
	<link rel="icon" href={favicon} />

     

       
10
       
 
       
</svelte:head>

     

       
11
       
 
       


     

       
12
       
+
       
<div

     

       
13
       
+
       
	id="app-root"

     

       
14
       
+
       
	class="min-h-screen bg-(--nucleus-bg) text-(--nucleus-fg) transition-colors duration-300"

     

       
15
       
+
       
>

     

       
16
       
 
       
	{@render children?.()}

     

       
17
       
 
       
</div>

     

···

       
272
       
 
       
<div class="mx-auto max-w-2xl">

     

       
273
       
 
       
	<!-- thread list (page scrolls as a whole) -->

     

       
274
       
 
       
	<div

     

       
0
       
 
       

     

       
275
       
 
       
		class="mb-4 min-h-screen p-2 [scrollbar-color:var(--nucleus-accent)_transparent]"

     

       
276
       
 
       
		bind:this={scrollContainer}

     

       
277
       
 
       
	>

     
···

       
285
       
 
       
			</div>

     

       
286
       
 
       
		{/if}

     

       
287
       
 
       
	</div>

     

       
0
       
 
       

     

       
288
       
 
       
	<!-- header -->

     

       
289
       
 
       
	<div class="sticky bottom-0 z-10">

     

       
290
       
 
       
		{#if errors.length > 0}

     

···

       
272
       
 
       
<div class="mx-auto max-w-2xl">

     

       
273
       
 
       
	<!-- thread list (page scrolls as a whole) -->

     

       
274
       
 
       
	<div

     

       
275
       
+
       
		id="app-thread-list"

     

       
276
       
 
       
		class="mb-4 min-h-screen p-2 [scrollbar-color:var(--nucleus-accent)_transparent]"

     

       
277
       
 
       
		bind:this={scrollContainer}

     

       
278
       
 
       
	>

     
···

       
286
       
 
       
			</div>

     

       
287
       
 
       
		{/if}

     

       
288
       
 
       
	</div>

     

       
289
       
+
       


     

       
290
       
 
       
	<!-- header -->

     

       
291
       
 
       
	<div class="sticky bottom-0 z-10">

     

       
292
       
 
       
		{#if errors.length > 0}