···

       
11
       
11
       
 
       
    "npm:@atcute/tid@^1.0.3": "1.0.3",

     

       
12
       
12
       
 
       
    "npm:@eslint/compat@^1.4.1": "1.4.1_eslint@9.39.0",

     

       
13
       
13
       
 
       
    "npm:@eslint/js@^9.39.0": "9.39.0",

     

       
14
       
14
       
+
       
    "npm:@floating-ui/dom@^1.7.4": "1.7.4",

     

       
14
       
15
       
 
       
    "npm:@iconify/svelte@^5.1.0": "5.1.0_svelte@5.43.2__acorn@8.15.0",

     

       
15
       
16
       
 
       
    "npm:@soffinal/websocket@~0.2.1": "0.2.1_typescript@5.9.3",

     

       
16
       
17
       
 
       
    "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",

     
···

       
31
       
32
       
 
       
    "npm:prettier@^3.6.2": "3.6.2",

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

       
37
       
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",

     
···

       
311
       
314
       
 
       
        "@eslint/core",

     

       
312
       
315
       
 
       
        "levn"

     

       
313
       
316
       
 
       
      ]

     

       
317
       
317
       
+
       
    },

     

       
318
       
318
       
+
       
    "@floating-ui/core@1.7.3": {

     

       
319
       
319
       
+
       
      "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",

     

       
320
       
320
       
+
       
      "dependencies": [

     

       
321
       
321
       
+
       
        "@floating-ui/utils"

     

       
322
       
322
       
+
       
      ]

     

       
323
       
323
       
+
       
    },

     

       
324
       
324
       
+
       
    "@floating-ui/dom@1.7.4": {

     

       
325
       
325
       
+
       
      "integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==",

     

       
326
       
326
       
+
       
      "dependencies": [

     

       
327
       
327
       
+
       
        "@floating-ui/core",

     

       
328
       
328
       
+
       
        "@floating-ui/utils"

     

       
329
       
329
       
+
       
      ]

     

       
330
       
330
       
+
       
    },

     

       
331
       
331
       
+
       
    "@floating-ui/utils@0.2.10": {

     

       
332
       
332
       
+
       
      "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ=="

     

       
314
       
333
       
 
       
    },

     

       
315
       
334
       
 
       
    "@humanfs/core@0.19.1": {

     

       
316
       
335
       
 
       
      "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA=="

     
···

       
1621
       
1640
       
 
       
      ],

     

       
1622
       
1641
       
 
       
      "bin": true

     

       
1623
       
1642
       
 
       
    },

     

       
1643
       
1643
       
+
       
    "svelte-device-info@1.0.6": {

     

       
1644
       
1644
       
+
       
      "integrity": "sha512-G13YYkxnlz5AryOps8KFHFt8+5Ne7JiZgTxtYEXLVBF4UAwu9I1F+Xcd9rfhTZqUUtF9fm4qJpSi3I6p1JUt6Q==",

     

       
1645
       
1645
       
+
       
      "dependencies": [

     

       
1646
       
1646
       
+
       
        "tslib"

     

       
1647
       
1647
       
+
       
      ]

     

       
1648
       
1648
       
+
       
    },

     

       
1624
       
1649
       
 
       
    "svelte-eslint-parser@1.4.0_svelte@5.43.2__acorn@8.15.0_postcss@8.5.6": {

     

       
1625
       
1650
       
 
       
      "integrity": "sha512-fjPzOfipR5S7gQ/JvI9r2H8y9gMGXO3JtmrylHLLyahEMquXI0lrebcjT+9/hNgDej0H7abTyox5HpHmW1PSWA==",

     

       
1626
       
1651
       
 
       
      "dependencies": [

     
···

       
1642
       
1667
       
 
       
        "svelte"

     

       
1643
       
1668
       
 
       
      ]

     

       
1644
       
1669
       
 
       
    },

     

       
1670
       
1670
       
+
       
    "svelte-portal@2.2.1": {

     

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

     

       
1672
       
1672
       
+
       
    },

     

       
1645
       
1673
       
 
       
    "svelte@5.43.2_acorn@8.15.0": {

     

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

     

       
1647
       
1675
       
 
       
      "dependencies": [

     
···

       
1688
       
1716
       
 
       
      "dependencies": [

     

       
1689
       
1717
       
 
       
        "typescript"

     

       
1690
       
1718
       
 
       
      ]

     

       
1719
       
1719
       
+
       
    },

     

       
1720
       
1720
       
+
       
    "tslib@2.8.1": {

     

       
1721
       
1721
       
+
       
      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="

     

       
1691
       
1722
       
 
       
    },

     

       
1692
       
1723
       
 
       
    "type-check@0.4.0": {

     

       
1693
       
1724
       
 
       
      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",

     
···

       
1783
       
1814
       
 
       
        "npm:@atcute/tid@^1.0.3",

     

       
1784
       
1815
       
 
       
        "npm:@eslint/compat@^1.4.1",

     

       
1785
       
1816
       
 
       
        "npm:@eslint/js@^9.39.0",

     

       
1817
       
1817
       
+
       
        "npm:@floating-ui/dom@^1.7.4",

     

       
1786
       
1818
       
 
       
        "npm:@iconify/svelte@^5.1.0",

     

       
1787
       
1819
       
 
       
        "npm:@soffinal/websocket@~0.2.1",

     

       
1788
       
1820
       
 
       
        "npm:@sveltejs/adapter-static@^3.0.10",

     
···

       
1803
       
1835
       
 
       
        "npm:prettier@^3.6.2",

     

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

     

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

     

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

     

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

     

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

     

       
1807
       
1841
       
 
       
        "npm:svelte@^5.43.2",

     

       
1808
       
1842
       
 
       
        "npm:tailwindcss@^4.1.16",

     

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

     

···

       
14
       
14
       
 
       
    ];

     

       
15
       
15
       
 
       
  };

     

       
16
       
16
       
 
       


     

       
17
       
17
       
-
       
  outputHash = "sha256-glfh3vNy9U0w7CjgFADAwb0qg/tzC0H97EY7zSjTgaQ=";

     

       
17
       
17
       
+
       
  outputHash = "sha256-s5rq8htDjR0I8MxPtLq1NYIywXGEdYbZZvE7I5+TCIU=";

     

       
18
       
18
       
 
       
  outputHashAlgo = "sha256";

     

       
19
       
19
       
 
       
  outputHashMode = "recursive";

     

       
20
       
20
       
 
       


     

···

       
22
       
22
       
 
       
		"@atcute/lexicons": "^1.2.2",

     

       
23
       
23
       
 
       
		"@atcute/oauth-browser-client": "^2.0.1",

     

       
24
       
24
       
 
       
		"@atcute/tid": "^1.0.3",

     

       
25
       
25
       
+
       
		"@floating-ui/dom": "^1.7.4",

     

       
25
       
26
       
 
       
		"@soffinal/websocket": "^0.2.1",

     

       
26
       
27
       
 
       
		"@wora/cache-persist": "^2.2.1",

     

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

     

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

     

       
29
       
29
       
-
       
		"svelte-infinite": "^0.5.1"

     

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

     

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

     

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

     

       
30
       
33
       
 
       
	},

     

       
31
       
34
       
 
       
	"devDependencies": {

     

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

     

···

       
24
       
24
       
 
       
}

     

       
25
       
25
       
 
       


     

       
26
       
26
       
 
       
@utility single-line-input {

     

       
27
       
27
       
-
       
	@apply w-full rounded-sm border-2 px-3 py-2 font-medium transition-all focus:scale-[1.02] focus:shadow-lg focus:outline-none;

     

       
27
       
27
       
+
       
	@apply w-full rounded-sm border-2 border-(--nucleus-accent)/40 bg-(--nucleus-accent)/3 px-3 py-2 font-medium transition-all;

     

       
28
       
28
       
+
       
	&:focus {

     

       
29
       
29
       
+
       
		@apply scale-[1.02] border-(--nucleus-accent)/80 bg-(--nucleus-accent)/10 [box-shadow:none] outline-none;

     

       
30
       
30
       
+
       
	}

     

       
28
       
31
       
 
       
}

     

       
29
       
32
       
 
       


     

       
30
       
33
       
 
       
@utility action-button {

     
···

       
46
       
49
       
 
       


     

       
47
       
50
       
 
       
button {

     

       
48
       
51
       
 
       
	@apply hover:cursor-pointer;

     

       
52
       
52
       
+
       
}

     

       
53
       
53
       
+
       


     

       
54
       
54
       
+
       
a {

     

       
55
       
55
       
+
       
	&:hover {

     

       
56
       
56
       
+
       
		@apply cursor-pointer underline;

     

       
57
       
57
       
+
       
	}

     

       
49
       
58
       
 
       
}

     

       
50
       
59
       
 
       


     

       
51
       
60
       
 
       
.grain:before {

     

···

       
5
       
5
       
 
       
	import ProfilePicture from './ProfilePicture.svelte';

     

       
6
       
6
       
 
       
	import PfpPlaceholder from './PfpPlaceholder.svelte';

     

       
7
       
7
       
 
       
	import Popup from './Popup.svelte';

     

       
8
       
8
       
+
       
	import Dropdown from './Dropdown.svelte';

     

       
8
       
9
       
 
       
	import { flow } from '$lib/at/oauth';

     

       
9
       
10
       
 
       
	import { isHandle, type AtprotoDid } from '@atcute/lexicons/syntax';

     

       
10
       
11
       
 
       
	import Icon from '@iconify/svelte';

     
···

       
31
       
32
       
 
       
	let loginError = $state('');

     

       
32
       
33
       
 
       
	let isLoggingIn = $state(false);

     

       
33
       
34
       
 
       


     

       
34
       
34
       
-
       
	const toggleDropdown = (e: MouseEvent) => {

     

       
35
       
35
       
-
       
		e.stopPropagation();

     

       
36
       
36
       
-
       
		isDropdownOpen = !isDropdownOpen;

     

       
37
       
37
       
-
       
	};

     

       
35
       
35
       
+
       
	const toggleDropdown = () => (isDropdownOpen = !isDropdownOpen);

     

       
36
       
36
       
+
       
	const closeDropdown = () => (isDropdownOpen = false);

     

       
38
       
37
       
 
       


     

       
39
       
38
       
 
       
	const selectAccount = (did: AtprotoDid) => {

     

       
40
       
39
       
 
       
		onAccountSelected(did);

     

       
41
       
41
       
-
       
		isDropdownOpen = false;

     

       
40
       
40
       
+
       
		closeDropdown();

     

       
42
       
41
       
 
       
	};

     

       
43
       
42
       
 
       


     

       
44
       
43
       
 
       
	const openLoginModal = () => {

     

       
45
       
44
       
 
       
		isLoginModalOpen = true;

     

       
46
       
46
       
-
       
		isDropdownOpen = false;

     

       
45
       
45
       
+
       
		closeDropdown();

     

       
47
       
46
       
 
       
		loginHandle = '';

     

       
48
       
47
       
 
       
		loginError = '';

     

       
49
       
48
       
 
       
		// HACK: i hate this but it works so it doesnt really matter

     
···

       
89
       
88
       
 
       
	const handleKeydown = (event: KeyboardEvent) => {

     

       
90
       
89
       
 
       
		if (event.key === 'Enter' && !isLoggingIn) handleLogin();

     

       
91
       
90
       
 
       
	};

     

       
92
       
92
       
-
       


     

       
93
       
93
       
-
       
	const closeDropdown = () => {

     

       
94
       
94
       
-
       
		isDropdownOpen = false;

     

       
95
       
95
       
-
       
	};

     

       
96
       
91
       
 
       
</script>

     

       
97
       
92
       
 
       


     

       
98
       
98
       
-
       
<svelte:window onclick={closeDropdown} />

     

       
99
       
99
       
-
       


     

       
100
       
100
       
-
       
<div class="relative">

     

       
101
       
101
       
-
       
	<button

     

       
102
       
102
       
-
       
		onclick={toggleDropdown}

     

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

     

       
104
       
104
       
-
       
	>

     

       
105
       
105
       
-
       
		{#if selectedDid}

     

       
106
       
106
       
-
       
			<ProfilePicture {client} did={selectedDid} size={13} />

     

       
107
       
107
       
-
       
		{:else}

     

       
108
       
108
       
-
       
			<PfpPlaceholder color="var(--nucleus-accent)" size={13} />

     

       
109
       
109
       
-
       
		{/if}

     

       
110
       
110
       
-
       
	</button>

     

       
111
       
111
       
-
       


     

       
112
       
112
       
-
       
	{#if isDropdownOpen}

     

       
113
       
113
       
-
       
		<!-- svelte-ignore a11y_click_events_have_key_events -->

     

       
114
       
114
       
-
       
		<!-- svelte-ignore a11y_no_static_element_interactions -->

     

       
115
       
115
       
-
       
		<div

     

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

     

       
117
       
117
       
-
       
			onclick={(e) => e.stopPropagation()}

     

       
93
       
93
       
+
       
<Dropdown

     

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

     

       
95
       
95
       
+
       
	bind:isOpen={isDropdownOpen}

     

       
96
       
96
       
+
       
	placement="top-start"

     

       
97
       
97
       
+
       
>

     

       
98
       
98
       
+
       
	{#snippet trigger()}

     

       
99
       
99
       
+
       
		<button

     

       
100
       
100
       
+
       
			onclick={toggleDropdown}

     

       
101
       
101
       
+
       
			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"

     

       
118
       
102
       
 
       
		>

     

       
119
       
119
       
-
       
			{#if accounts.length > 0}

     

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

     

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

     

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

     

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

     

       
124
       
124
       
-
       
							<div

     

       
125
       
125
       
-
       
								title={name}

     

       
126
       
126
       
-
       
								onclick={onClick}

     

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

     

       
128
       
128
       
-
       
							>

     

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

     

       
130
       
130
       
-
       
							</div>

     

       
131
       
131
       
-
       
						{/snippet}

     

       
132
       
132
       
-
       
						<button

     

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

     

       
134
       
134
       
-
       
							class="

     

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

     

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

     

       
137
       
137
       
-
       
							"

     

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

     

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

     

       
140
       
140
       
-
       
								: 'transparent'};"

     

       
141
       
141
       
-
       
						>

     

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

     

       
103
       
103
       
+
       
			{#if selectedDid}

     

       
104
       
104
       
+
       
				<ProfilePicture {client} did={selectedDid} size={13} />

     

       
105
       
105
       
+
       
			{:else}

     

       
106
       
106
       
+
       
				<PfpPlaceholder color="var(--nucleus-accent)" size={13} />

     

       
107
       
107
       
+
       
			{/if}

     

       
108
       
108
       
+
       
		</button>

     

       
109
       
109
       
+
       
	{/snippet}

     

       
143
       
110
       
 
       


     

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

     

       
111
       
111
       
+
       
	{#if accounts.length > 0}

     

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

     

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

     

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

     

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

     

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

     

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

     

       
118
       
118
       
+
       
					<div

     

       
119
       
119
       
+
       
						title={name}

     

       
120
       
120
       
+
       
						onclick={onClick}

     

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

     

       
122
       
122
       
+
       
					>

     

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

     

       
124
       
124
       
+
       
					</div>

     

       
125
       
125
       
+
       
				{/snippet}

     

       
126
       
126
       
+
       
				<button

     

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

     

       
128
       
128
       
+
       
					class="

     

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

     

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

     

       
131
       
131
       
+
       
				"

     

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

     

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

     

       
134
       
134
       
+
       
						: 'transparent'};"

     

       
135
       
135
       
+
       
				>

     

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

     

       
145
       
137
       
 
       


     

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

     

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

     

       
148
       
148
       
-
       
							)}

     

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

     

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

     

       
150
       
139
       
 
       


     

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

     

       
152
       
152
       
-
       
								<Icon

     

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

     

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

     

       
155
       
155
       
-
       
								/>

     

       
156
       
156
       
-
       
							{/if}

     

       
157
       
157
       
-
       
						</button>

     

       
158
       
158
       
-
       
					{/each}

     

       
159
       
159
       
-
       
				</div>

     

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

     

       
161
       
161
       
-
       
			{/if}

     

       
162
       
162
       
-
       
			<button

     

       
163
       
163
       
-
       
				onclick={openLoginModal}

     

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

     

       
165
       
165
       
-
       
			>

     

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

     

       
167
       
167
       
-
       
				<span>add account</span>

     

       
168
       
168
       
-
       
			</button>

     

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

     

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

     

       
142
       
142
       
+
       
					)}

     

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

     

       
144
       
144
       
+
       


     

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

     

       
146
       
146
       
+
       
						<Icon

     

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

     

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

     

       
149
       
149
       
+
       
						/>

     

       
150
       
150
       
+
       
					{/if}

     

       
151
       
151
       
+
       
				</button>

     

       
152
       
152
       
+
       
			{/each}

     

       
169
       
153
       
 
       
		</div>

     

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

     

       
170
       
155
       
 
       
	{/if}

     

       
171
       
171
       
-
       
</div>

     

       
156
       
156
       
+
       
	<button

     

       
157
       
157
       
+
       
		onclick={openLoginModal}

     

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

     

       
159
       
159
       
+
       
	>

     

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

     

       
161
       
161
       
+
       
		<span>add account</span>

     

       
162
       
162
       
+
       
	</button>

     

       
163
       
163
       
+
       
</Dropdown>

     

       
172
       
164
       
 
       


     

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

     

       
174
       
166
       
 
       
	<!-- svelte-ignore a11y_no_static_element_interactions -->

     

···

       
1
       
1
       
 
       
<script lang="ts">

     

       
2
       
2
       
 
       
	import { type AtpClient } from '$lib/at/client';

     

       
3
       
3
       
-
       
	import { AppBskyFeedPost } from '@atcute/bluesky';

     

       
3
       
3
       
+
       
	import {

     

       
4
       
4
       
+
       
		AppBskyActorProfile,

     

       
5
       
5
       
+
       
		AppBskyEmbedExternal,

     

       
6
       
6
       
+
       
		AppBskyEmbedImages,

     

       
7
       
7
       
+
       
		AppBskyEmbedVideo,

     

       
8
       
8
       
+
       
		AppBskyFeedPost

     

       
9
       
9
       
+
       
	} from '@atcute/bluesky';

     

       
4
       
10
       
 
       
	import {

     

       
5
       
11
       
 
       
		parseCanonicalResourceUri,

     

       
6
       
12
       
 
       
		type ActorIdentifier,

     
···

       
18
       
24
       
 
       
	import BskyPost from './BskyPost.svelte';

     

       
19
       
25
       
 
       
	import Icon from '@iconify/svelte';

     

       
20
       
26
       
 
       
	import { type Backlink, type BacklinksSource } from '$lib/at/constellation';

     

       
21
       
21
       
-
       
	import { postActions, pulsingPostId, type PostActions } from '$lib/state.svelte';

     

       
27
       
27
       
+
       
	import { clients, postActions, posts, pulsingPostId, type PostActions } from '$lib/state.svelte';

     

       
22
       
28
       
 
       
	import * as TID from '@atcute/tid';

     

       
23
       
29
       
 
       
	import type { PostWithUri } from '$lib/at/fetch';

     

       
24
       
30
       
 
       
	import { onMount } from 'svelte';

     

       
25
       
25
       
-
       
	import type { AtprotoDid } from '@atcute/lexicons/syntax';

     

       
31
       
31
       
+
       
	import { isActorIdentifier, type AtprotoDid } from '@atcute/lexicons/syntax';

     

       
26
       
32
       
 
       
	import { derived } from 'svelte/store';

     

       
33
       
33
       
+
       
	import Device from 'svelte-device-info';

     

       
34
       
34
       
+
       
	import Dropdown from './Dropdown.svelte';

     

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

     

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

     

       
27
       
37
       
 
       


     

       
28
       
38
       
 
       
	interface Props {

     

       
29
       
39
       
 
       
		client: AtpClient;

     
···

       
51
       
61
       
 
       
		isOnPostComposer = false /* replyBacklinks */

     

       
52
       
62
       
 
       
	}: Props = $props();

     

       
53
       
63
       
 
       


     

       
54
       
54
       
-
       
	const selectedDid = $derived(client.didDoc?.did ?? null);

     

       
64
       
64
       
+
       
	const selectedDid = $derived(client.user?.did ?? null);

     

       
65
       
65
       
+
       
	const actionClient = $derived(clients.get(did as AtprotoDid));

     

       
55
       
66
       
 
       


     

       
56
       
67
       
 
       
	const aturi: CanonicalResourceUri = `at://${did}/app.bsky.feed.post/${rkey}`;

     

       
57
       
68
       
 
       
	const color = generateColorForDid(did);

     
···

       
64
       
75
       
 
       
	const post = data

     

       
65
       
76
       
 
       
		? Promise.resolve(ok(data))

     

       
66
       
77
       
 
       
		: client.getRecord(AppBskyFeedPost.mainSchema, did, rkey);

     

       
78
       
78
       
+
       
	let profile: AppBskyActorProfile.Main | null = $state(null);

     

       
79
       
79
       
+
       
	onMount(async () => {

     

       
80
       
80
       
+
       
		const p = await client.getProfile(did);

     

       
81
       
81
       
+
       
		if (!p.ok) return;

     

       
82
       
82
       
+
       
		profile = p.value;

     

       
83
       
83
       
+
       
		console.log(profile.description);

     

       
84
       
84
       
+
       
	});

     

       
67
       
85
       
 
       
	// const replies = replyBacklinks

     

       
68
       
86
       
 
       
	// 	? Promise.resolve(ok(replyBacklinks))

     

       
69
       
87
       
 
       
	// 	: client.getBacklinks(

     
···

       
206
       
224
       
 
       
		}

     

       
207
       
225
       
 
       
		return link;

     

       
208
       
226
       
 
       
	};

     

       
227
       
227
       
+
       


     

       
228
       
228
       
+
       
	let actionsOpen = $state(false);

     

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

     

       
230
       
230
       
+
       


     

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

     

       
232
       
232
       
+
       
		actionsOpen = true;

     

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

     

       
234
       
234
       
+
       
		event.preventDefault();

     

       
235
       
235
       
+
       
		event.stopPropagation();

     

       
236
       
236
       
+
       
	};

     

       
237
       
237
       
+
       


     

       
238
       
238
       
+
       
	let deleteState: 'waiting' | 'confirm' | 'deleted' = $state('waiting');

     

       
239
       
239
       
+
       
	$effect(() => {

     

       
240
       
240
       
+
       
		if (deleteState === 'confirm' && !actionsOpen) deleteState = 'waiting';

     

       
241
       
241
       
+
       
	});

     

       
242
       
242
       
+
       


     

       
243
       
243
       
+
       
	const deletePost = () => {

     

       
244
       
244
       
+
       
		if (deleteState === 'deleted') return;

     

       
245
       
245
       
+
       
		if (deleteState === 'waiting') {

     

       
246
       
246
       
+
       
			deleteState = 'confirm';

     

       
247
       
247
       
+
       
			return;

     

       
248
       
248
       
+
       
		}

     

       
249
       
249
       
+
       


     

       
250
       
250
       
+
       
		actionClient?.atcute

     

       
251
       
251
       
+
       
			?.post('com.atproto.repo.deleteRecord', {

     

       
252
       
252
       
+
       
				input: {

     

       
253
       
253
       
+
       
					collection: 'app.bsky.feed.post',

     

       
254
       
254
       
+
       
					repo: did,

     

       
255
       
255
       
+
       
					rkey

     

       
256
       
256
       
+
       
				}

     

       
257
       
257
       
+
       
			})

     

       
258
       
258
       
+
       
			.then((result) => {

     

       
259
       
259
       
+
       
				if (!result.ok) return;

     

       
260
       
260
       
+
       
				posts.get(did)?.delete(aturi);

     

       
261
       
261
       
+
       
				deleteState = 'deleted';

     

       
262
       
262
       
+
       
			});

     

       
263
       
263
       
+
       
		actionsOpen = false;

     

       
264
       
264
       
+
       
	};

     

       
265
       
265
       
+
       


     

       
266
       
266
       
+
       
	let profileOpen = $state(false);

     

       
267
       
267
       
+
       
	let profilePopoutShowDid = $state(false);

     

       
209
       
268
       
 
       
</script>

     

       
210
       
269
       
 
       


     

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

     

       
212
       
212
       
-
       
	{#if record.embed}

     

       
213
       
213
       
-
       
		<span

     

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

     

       
215
       
215
       
-
       
			style="background: color-mix(in srgb, {mini

     

       
216
       
216
       
-
       
				? 'var(--nucleus-fg)'

     

       
217
       
217
       
-
       
				: color} 10%, transparent); color: {mini ? 'var(--nucleus-fg)' : color};"

     

       
218
       
218
       
-
       
		>

     

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

     

       
220
       
220
       
-
       
		</span>

     

       
221
       
221
       
-
       
	{/if}

     

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

     

       
271
       
271
       
+
       
	<span

     

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

     

       
273
       
273
       
+
       
		style="

     

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

     

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

     

       
276
       
276
       
+
       
		"

     

       
277
       
277
       
+
       
	>

     

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

     

       
279
       
279
       
+
       
	</span>

     

       
280
       
280
       
+
       
{/snippet}

     

       
281
       
281
       
+
       


     

       
282
       
282
       
+
       
{#snippet profileInline()}

     

       
283
       
283
       
+
       
	<button

     

       
284
       
284
       
+
       
		class="

     

       
285
       
285
       
+
       
		flex min-w-0 items-center gap-2 font-bold {isOnPostComposer ? 'contrast-200' : ''}

     

       
286
       
286
       
+
       
		rounded-sm pr-1 transition-colors duration-100 ease-in-out hover:bg-white/10

     

       
287
       
287
       
+
       
		"

     

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

     

       
289
       
289
       
+
       
		onclick={() => (profileOpen = !profileOpen)}

     

       
290
       
290
       
+
       
	>

     

       
291
       
291
       
+
       
		<ProfilePicture {client} {did} size={8} />

     

       
292
       
292
       
+
       


     

       
293
       
293
       
+
       
		{#if profile}

     

       
294
       
294
       
+
       
			<span class="w-min max-w-sm min-w-0 overflow-hidden text-nowrap overflow-ellipsis"

     

       
295
       
295
       
+
       
				>{profile.displayName}</span

     

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

     

       
297
       
297
       
+
       
		{:else}

     

       
298
       
298
       
+
       
			{handle}

     

       
299
       
299
       
+
       
		{/if}

     

       
300
       
300
       
+
       
	</button>

     

       
301
       
301
       
+
       
{/snippet}

     

       
302
       
302
       
+
       


     

       
303
       
303
       
+
       
<!-- eslint-disable svelte/no-navigation-without-resolve -->

     

       
304
       
304
       
+
       
{#snippet profilePopout()}

     

       
305
       
305
       
+
       
	{@const profileDesc = profile?.description?.trim() ?? ''}

     

       
306
       
306
       
+
       
	<Dropdown

     

       
307
       
307
       
+
       
		class="post-dropdown max-w-xl gap-2! p-2.5! backdrop-blur-3xl! backdrop-brightness-25!"

     

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

     

       
309
       
309
       
+
       
		bind:isOpen={profileOpen}

     

       
310
       
310
       
+
       
		trigger={profileInline}

     

       
311
       
311
       
+
       
	>

     

       
312
       
312
       
+
       
		<div class="flex items-center gap-2">

     

       
313
       
313
       
+
       
			<ProfilePicture {client} {did} size={20} />

     

       
314
       
314
       
+
       


     

       
315
       
315
       
+
       
			<div class="flex flex-col items-start overflow-hidden overflow-ellipsis">

     

       
316
       
316
       
+
       
				<span class="mb-1.5 min-w-0 overflow-hidden text-2xl text-nowrap overflow-ellipsis">

     

       
317
       
317
       
+
       
					{profile?.displayName ?? handle}

     

       
318
       
318
       
+
       
					{#if profile?.pronouns}

     

       
319
       
319
       
+
       
						<span class="shrink-0 text-sm text-nowrap opacity-60">({profile.pronouns})</span>

     

       
320
       
320
       
+
       
					{/if}

     

       
321
       
321
       
+
       
				</span>

     

       
322
       
322
       
+
       
				<button

     

       
323
       
323
       
+
       
					oncontextmenu={(e) => {

     

       
324
       
324
       
+
       
						const node = e.target as Node;

     

       
325
       
325
       
+
       
						const selection = window.getSelection() ?? new Selection();

     

       
326
       
326
       
+
       
						const range = document.createRange();

     

       
327
       
327
       
+
       
						range.selectNodeContents(node);

     

       
328
       
328
       
+
       
						selection.removeAllRanges();

     

       
329
       
329
       
+
       
						selection.addRange(range);

     

       
330
       
330
       
+
       
						e.stopPropagation();

     

       
331
       
331
       
+
       
					}}

     

       
332
       
332
       
+
       
					onclick={() => (profilePopoutShowDid = !profilePopoutShowDid)}

     

       
333
       
333
       
+
       
					class="mb-0.5 text-nowrap opacity-85 select-text hover:underline"

     

       
334
       
334
       
+
       
				>

     

       
335
       
335
       
+
       
					{profilePopoutShowDid ? did : `@${handle}`}

     

       
336
       
336
       
+
       
				</button>

     

       
337
       
337
       
+
       
				{#if profile?.website}

     

       
338
       
338
       
+
       
					<a

     

       
339
       
339
       
+
       
						target="_blank"

     

       
340
       
340
       
+
       
						rel="noopener noreferrer"

     

       
341
       
341
       
+
       
						href={profile.website}

     

       
342
       
342
       
+
       
						class="text-sm text-nowrap opacity-60">{profile.website}</a

     

       
343
       
343
       
+
       
					>

     

       
344
       
344
       
+
       
				{/if}

     

       
345
       
345
       
+
       
			</div>

     

       
346
       
346
       
+
       
		</div>

     

       
347
       
347
       
+
       


     

       
348
       
348
       
+
       
		{#if profileDesc.length > 0}

     

       
349
       
349
       
+
       
			<p class="rounded-sm bg-black/25 p-1.5 text-wrap wrap-break-word">

     

       
350
       
350
       
+
       
				{#each profileDesc.split(/(\s)/) as line, idx (idx)}

     

       
351
       
351
       
+
       
					{#if line === '\n'}

     

       
352
       
352
       
+
       
						<br />

     

       
353
       
353
       
+
       
					{:else if isActorIdentifier(line.replace(/^@/, ''))}

     

       
354
       
354
       
+
       
						<a

     

       
355
       
355
       
+
       
							target="_blank"

     

       
356
       
356
       
+
       
							rel="noopener noreferrer"

     

       
357
       
357
       
+
       
							class="text-(--nucleus-accent2)"

     

       
358
       
358
       
+
       
							href={`${$settings.socialAppUrl}/profile/${line.replace(/^@/, '')}`}>{line}</a

     

       
359
       
359
       
+
       
						>

     

       
360
       
360
       
+
       
					{:else if line.startsWith('https://')}

     

       
361
       
361
       
+
       
						<a

     

       
362
       
362
       
+
       
							target="_blank"

     

       
363
       
363
       
+
       
							rel="noopener noreferrer"

     

       
364
       
364
       
+
       
							class="text-(--nucleus-accent2)"

     

       
365
       
365
       
+
       
							href={line}>{line.replace(/https?:\/\//, '')}</a

     

       
366
       
366
       
+
       
						>

     

       
367
       
367
       
+
       
					{:else}

     

       
368
       
368
       
+
       
						{line}

     

       
369
       
369
       
+
       
					{/if}

     

       
370
       
370
       
+
       
				{/each}

     

       
371
       
371
       
+
       
			</p>

     

       
372
       
372
       
+
       
		{/if}

     

       
373
       
373
       
+
       
	</Dropdown>

     

       
222
       
374
       
 
       
{/snippet}

     

       
223
       
375
       
 
       


     

       
224
       
376
       
 
       
{#if mini}

     
···

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

     

       
235
       
387
       
 
       
					class="select-none hover:cursor-pointer hover:underline"

     

       
236
       
388
       
 
       
				>

     

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

     

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

     

       
390
       
390
       
+
       
					{#if record.embed}

     

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

     

       
392
       
392
       
+
       
					{/if}

     

       
238
       
393
       
 
       
					<span title={record.text}>{record.text}</span>

     

       
239
       
394
       
 
       
				</div>

     

       
240
       
395
       
 
       
			{:else}

     
···

       
249
       
404
       
 
       
			style="background: {color}18; border-color: {color}66;"

     

       
250
       
405
       
 
       
		>

     

       
251
       
406
       
 
       
			<div

     

       
252
       
252
       
-
       
				class="inline-block h-6 w-6 animate-spin rounded-full border-3 border-(--nucleus-accent) border-l-transparent"

     

       
407
       
407
       
+
       
				class="

     

       
408
       
408
       
+
       
				inline-block h-6 w-6 animate-spin rounded-full

     

       
409
       
409
       
+
       
				border-3 border-(--nucleus-accent) border-l-transparent

     

       
410
       
410
       
+
       
				"

     

       
253
       
411
       
 
       
			></div>

     

       
254
       
412
       
 
       
			<p class="mt-3 text-sm font-medium opacity-60">loading post...</p>

     

       
255
       
413
       
 
       
		</div>

     

       
256
       
414
       
 
       
	{:then post}

     

       
257
       
415
       
 
       
		{#if post.ok}

     

       
258
       
416
       
 
       
			{@const record = post.value.record}

     

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

     

       
259
       
418
       
 
       
			<div

     

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

     

       
261
       
261
       
-
       
				class="rounded-sm border-2 p-2 shadow-lg backdrop-blur-sm transition-all {$isPulsing

     

       
262
       
262
       
-
       
					? 'animate-pulse-highlight'

     

       
263
       
263
       
-
       
					: ''}"

     

       
264
       
264
       
-
       
				style="background: {color}{isOnPostComposer

     

       
420
       
420
       
+
       
				oncontextmenu={handleRightClick}

     

       
421
       
421
       
+
       
				class="

     

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

     

       
423
       
423
       
+
       
				{$isPulsing ? 'animate-pulse-highlight' : ''}

     

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

     

       
425
       
425
       
+
       
				"

     

       
426
       
426
       
+
       
				style="

     

       
427
       
427
       
+
       
				background: {color}{isOnPostComposer

     

       
265
       
428
       
 
       
					? '36'

     

       
266
       
266
       
-
       
					: '18'}; border-color: {color}{isOnPostComposer ? '99' : '66'};"

     

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

     

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

     

       
431
       
431
       
+
       
				"

     

       
267
       
432
       
 
       
			>

     

       
268
       
433
       
 
       
				<div

     

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

     

       
434
       
434
       
+
       
					class="

     

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

     

       
436
       
436
       
+
       
					"

     

       
270
       
437
       
 
       
					style="background: {color}33;"

     

       
271
       
438
       
 
       
				>

     

       
272
       
272
       
-
       
					<ProfilePicture {client} {did} size={8} />

     

       
273
       
273
       
-
       


     

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

     

       
275
       
275
       
-
       
						{#await client.getProfile(did)}

     

       
276
       
276
       
-
       
							{handle}

     

       
277
       
277
       
-
       
						{:then profile}

     

       
278
       
278
       
-
       
							{#if profile.ok}

     

       
279
       
279
       
-
       
								{@const profileValue = profile.value}

     

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

     

       
281
       
281
       
-
       
									>{profileValue.displayName}</span

     

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

     

       
283
       
283
       
-
       
							{:else}

     

       
284
       
284
       
-
       
								{handle}

     

       
285
       
285
       
-
       
							{/if}

     

       
286
       
286
       
-
       
						{/await}

     

       
287
       
287
       
-
       
					</span>

     

       
439
       
439
       
+
       
					{@render profilePopout()}

     

       
288
       
440
       
 
       
					<span>·</span>

     

       
289
       
289
       
-
       
					<span class="text-nowrap text-(--nucleus-fg)/67"

     

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

     

       
441
       
441
       
+
       
					<span

     

       
442
       
442
       
+
       
						title={new Date(record.createdAt).toLocaleString()}

     

       
443
       
443
       
+
       
						class="pl-0.5 text-nowrap text-(--nucleus-fg)/67"

     

       
291
       
444
       
 
       
					>

     

       
445
       
445
       
+
       
						{getRelativeTime(new Date(record.createdAt))}

     

       
446
       
446
       
+
       
					</span>

     

       
292
       
447
       
 
       
				</div>

     

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

     

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

     

       
294
       
449
       
 
       
					{record.text}

     

       
295
       
295
       
-
       
					{#if isOnPostComposer}

     

       
296
       
296
       
-
       
						{@render embedBadge(record)}

     

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

     

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

     

       
297
       
452
       
 
       
					{/if}

     

       
298
       
453
       
 
       
				</p>

     

       
299
       
454
       
 
       
				{#if !isOnPostComposer && record.embed}

     

       
300
       
455
       
 
       
					{@const embed = record.embed}

     

       
301
       
456
       
 
       
					<div class="mt-2">

     

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

     

       
303
       
303
       
-
       
							{#if quoteDepth < 2}

     

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

     

       
305
       
305
       
-
       
								<!-- reject recursive quotes -->

     

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

     

       
307
       
307
       
-
       
									<BskyPost

     

       
308
       
308
       
-
       
										{client}

     

       
309
       
309
       
-
       
										quoteDepth={quoteDepth + 1}

     

       
310
       
310
       
-
       
										did={parsedUri.repo}

     

       
311
       
311
       
-
       
										rkey={parsedUri.rkey}

     

       
312
       
312
       
-
       
										{isOnPostComposer}

     

       
313
       
313
       
-
       
										{onQuote}

     

       
314
       
314
       
-
       
										{onReply}

     

       
315
       
315
       
-
       
									/>

     

       
316
       
316
       
-
       
								{:else}

     

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

     

       
318
       
318
       
-
       
								{/if}

     

       
319
       
319
       
-
       
							{:else}

     

       
320
       
320
       
-
       
								{@render embedBadge(record)}

     

       
321
       
321
       
-
       
							{/if}

     

       
322
       
322
       
-
       
						{/snippet}

     

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

     

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

     

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

     

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

     

       
327
       
327
       
-
       
									<img

     

       
328
       
328
       
-
       
										class="rounded-sm"

     

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

     

       
330
       
330
       
-
       
										alt={image.alt}

     

       
331
       
331
       
-
       
									/>

     

       
332
       
332
       
-
       
								{/if}

     

       
333
       
333
       
-
       
							{/each}

     

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

     

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

     

       
336
       
336
       
-
       
								{#await didDoc then didDoc}

     

       
337
       
337
       
-
       
									{#if didDoc.ok}

     

       
338
       
338
       
-
       
										<!-- svelte-ignore a11y_media_has_caption -->

     

       
339
       
339
       
-
       
										<video

     

       
340
       
340
       
-
       
											class="rounded-sm"

     

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

     

       
342
       
342
       
-
       
											controls

     

       
343
       
343
       
-
       
										></video>

     

       
344
       
344
       
-
       
									{/if}

     

       
345
       
345
       
-
       
								{/await}

     

       
346
       
346
       
-
       
							{/if}

     

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

     

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

     

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

     

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

     

       
351
       
351
       
-
       
						{/if}

     

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

     

       
457
       
457
       
+
       
						{@render postEmbed(embed)}

     

       
353
       
458
       
 
       
					</div>

     

       
354
       
459
       
 
       
				{/if}

     

       
355
       
460
       
 
       
				{#if !isOnPostComposer}

     
···

       
365
       
470
       
 
       
	{/await}

     

       
366
       
471
       
 
       
{/if}

     

       
367
       
472
       
 
       


     

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

     

       
474
       
474
       
+
       
	{#snippet embedMedia(

     

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

     

       
476
       
476
       
+
       
	)}

     

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

     

       
478
       
478
       
+
       
		<div oncontextmenu={(e) => e.stopPropagation()}>

     

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

     

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

     

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

     

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

     

       
483
       
483
       
+
       
						<img

     

       
484
       
484
       
+
       
							class="w-full rounded-sm"

     

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

     

       
486
       
486
       
+
       
							alt={image.alt}

     

       
487
       
487
       
+
       
						/>

     

       
488
       
488
       
+
       
					{/if}

     

       
489
       
489
       
+
       
				{/each}

     

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

     

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

     

       
492
       
492
       
+
       
					{#await didDoc then didDoc}

     

       
493
       
493
       
+
       
						{#if didDoc.ok}

     

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

     

       
495
       
495
       
+
       
							<video

     

       
496
       
496
       
+
       
								class="rounded-sm"

     

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

     

       
498
       
498
       
+
       
								controls

     

       
499
       
499
       
+
       
							></video>

     

       
500
       
500
       
+
       
						{/if}

     

       
501
       
501
       
+
       
					{/await}

     

       
502
       
502
       
+
       
				{/if}

     

       
503
       
503
       
+
       
			{/if}

     

       
504
       
504
       
+
       
		</div>

     

       
505
       
505
       
+
       
	{/snippet}

     

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

     

       
507
       
507
       
+
       
		{#if quoteDepth < 2}

     

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

     

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

     

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

     

       
511
       
511
       
+
       
				<BskyPost

     

       
512
       
512
       
+
       
					{client}

     

       
513
       
513
       
+
       
					quoteDepth={quoteDepth + 1}

     

       
514
       
514
       
+
       
					did={parsedUri.repo}

     

       
515
       
515
       
+
       
					rkey={parsedUri.rkey}

     

       
516
       
516
       
+
       
					{isOnPostComposer}

     

       
517
       
517
       
+
       
					{onQuote}

     

       
518
       
518
       
+
       
					{onReply}

     

       
519
       
519
       
+
       
				/>

     

       
520
       
520
       
+
       
			{:else}

     

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

     

       
522
       
522
       
+
       
			{/if}

     

       
523
       
523
       
+
       
		{:else}

     

       
524
       
524
       
+
       
			{@render embedBadge(embed)}

     

       
525
       
525
       
+
       
		{/if}

     

       
526
       
526
       
+
       
	{/snippet}

     

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

     

       
528
       
528
       
+
       
		{@render embedMedia(embed)}

     

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

     

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

     

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

     

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

     

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

     

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

     

       
535
       
535
       
+
       
		</div>

     

       
536
       
536
       
+
       
	{/if}

     

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

     

       
538
       
538
       
+
       
{/snippet}

     

       
539
       
539
       
+
       


     

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

     

       
369
       
369
       
-
       
	<div

     

       
370
       
370
       
-
       
		class="group mt-3 flex w-fit max-w-full items-center rounded-sm"

     

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

     

       
541
       
541
       
+
       
	{#snippet control(

     

       
542
       
542
       
+
       
		name: string,

     

       
543
       
543
       
+
       
		icon: string,

     

       
544
       
544
       
+
       
		onClick: (e: MouseEvent) => void,

     

       
545
       
545
       
+
       
		isFull?: boolean,

     

       
546
       
546
       
+
       
		hasSolid?: boolean

     

       
547
       
547
       
+
       
	)}

     

       
548
       
548
       
+
       
		<button

     

       
549
       
549
       
+
       
			class="

     

       
550
       
550
       
+
       
			px-2 py-1.5 text-(--nucleus-fg)/90 transition-all

     

       
551
       
551
       
+
       
			duration-100 hover:[backdrop-filter:brightness(120%)]

     

       
552
       
552
       
+
       
			"

     

       
553
       
553
       
+
       
			onclick={(e) => onClick(e)}

     

       
554
       
554
       
+
       
			style="color: {isFull ? color : 'color-mix(in srgb, var(--nucleus-fg) 90%, transparent)'}"

     

       
555
       
555
       
+
       
			title={name}

     

       
556
       
556
       
+
       
		>

     

       
557
       
557
       
+
       
			<Icon icon={hasSolid && isFull ? `${icon}-solid` : icon} width={20} />

     

       
558
       
558
       
+
       
		</button>

     

       
559
       
559
       
+
       
	{/snippet}

     

       
560
       
560
       
+
       
	<div class="mt-3 flex w-full items-center justify-between">

     

       
561
       
561
       
+
       
		<div class="flex w-fit items-center rounded-sm" style="background: {color}1f;">

     

       
562
       
562
       
+
       
			{#snippet label(

     

       
563
       
563
       
+
       
				name: string,

     

       
564
       
564
       
+
       
				icon: string,

     

       
565
       
565
       
+
       
				onClick: (link: Backlink | null | undefined) => void,

     

       
566
       
566
       
+
       
				backlink?: Backlink | null,

     

       
567
       
567
       
+
       
				hasSolid?: boolean

     

       
568
       
568
       
+
       
			)}

     

       
569
       
569
       
+
       
				{@render control(name, icon, () => onClick(backlink), backlink ? true : false, hasSolid)}

     

       
570
       
570
       
+
       
			{/snippet}

     

       
571
       
571
       
+
       
			{@render label('reply', 'heroicons:chat-bubble-left', () => {

     

       
572
       
572
       
+
       
				onReply?.(post);

     

       
573
       
573
       
+
       
			})}

     

       
574
       
574
       
+
       
			{@render label(

     

       
575
       
575
       
+
       
				'repost',

     

       
576
       
576
       
+
       
				'heroicons:arrow-path-rounded-square-20-solid',

     

       
577
       
577
       
+
       
				async (link) => {

     

       
578
       
578
       
+
       
					if (link === undefined) return;

     

       
579
       
579
       
+
       
					postActions.set(`${selectedDid!}:${aturi}`, {

     

       
580
       
580
       
+
       
						...backlinks!,

     

       
581
       
581
       
+
       
						repost: await toggleLink(link, 'app.bsky.feed.repost')

     

       
582
       
582
       
+
       
					});

     

       
583
       
583
       
+
       
				},

     

       
584
       
584
       
+
       
				backlinks?.repost

     

       
585
       
585
       
+
       
			)}

     

       
586
       
586
       
+
       
			{@render label('quote', 'heroicons:paper-clip-20-solid', () => {

     

       
587
       
587
       
+
       
				onQuote?.(post);

     

       
588
       
588
       
+
       
			})}

     

       
589
       
589
       
+
       
			{@render label(

     

       
590
       
590
       
+
       
				'like',

     

       
591
       
591
       
+
       
				'heroicons:star',

     

       
592
       
592
       
+
       
				async (link) => {

     

       
593
       
593
       
+
       
					if (link === undefined) return;

     

       
594
       
594
       
+
       
					postActions.set(`${selectedDid!}:${aturi}`, {

     

       
595
       
595
       
+
       
						...backlinks!,

     

       
596
       
596
       
+
       
						like: await toggleLink(link, 'app.bsky.feed.like')

     

       
597
       
597
       
+
       
					});

     

       
598
       
598
       
+
       
				},

     

       
599
       
599
       
+
       
				backlinks?.like,

     

       
600
       
600
       
+
       
				true

     

       
601
       
601
       
+
       
			)}

     

       
602
       
602
       
+
       
		</div>

     

       
603
       
603
       
+
       
		<Dropdown

     

       
604
       
604
       
+
       
			class="post-dropdown"

     

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

     

       
606
       
606
       
+
       
			bind:isOpen={actionsOpen}

     

       
607
       
607
       
+
       
			bind:position={actionsPos}

     

       
608
       
608
       
+
       
			placement="bottom-end"

     

       
609
       
609
       
+
       
		>

     

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

     

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

     

       
612
       
612
       
+
       
			)}

     

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

     

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

     

       
615
       
615
       
+
       
			)}

     

       
616
       
616
       
+
       
			{@render dropdownItem('heroicons:clipboard-20-solid', 'copy post text', () =>

     

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

     

       
618
       
618
       
+
       
			)}

     

       
619
       
619
       
+
       
			{#if actionClient}

     

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

     

       
621
       
621
       
+
       
				{@render dropdownItem(

     

       
622
       
622
       
+
       
					deleteState === 'confirm' ? 'heroicons:check-20-solid' : 'heroicons:trash-20-solid',

     

       
623
       
623
       
+
       
					deleteState === 'confirm' ? 'are you sure?' : 'delete post',

     

       
624
       
624
       
+
       
					deletePost,

     

       
625
       
625
       
+
       
					false,

     

       
626
       
626
       
+
       
					deleteState === 'confirm' ? 'text-red-500' : ''

     

       
627
       
627
       
+
       
				)}

     

       
628
       
628
       
+
       
			{/if}

     

       
629
       
629
       
+
       


     

       
630
       
630
       
+
       
			{#snippet trigger()}

     

       
631
       
631
       
+
       
				<div

     

       
632
       
632
       
+
       
					class="

     

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

     

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

     

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

     

       
636
       
636
       
+
       
         			"

     

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

     

       
638
       
638
       
+
       
				>

     

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

     

       
640
       
640
       
+
       
						e.stopPropagation();

     

       
641
       
641
       
+
       
						actionsOpen = !actionsOpen;

     

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

     

       
643
       
643
       
+
       
					})}

     

       
644
       
644
       
+
       
				</div>

     

       
645
       
645
       
+
       
			{/snippet}

     

       
646
       
646
       
+
       
		</Dropdown>

     

       
647
       
647
       
+
       
	</div>

     

       
648
       
648
       
+
       
{/snippet}

     

       
649
       
649
       
+
       


     

       
650
       
650
       
+
       
{#snippet dropdownItem(

     

       
651
       
651
       
+
       
	icon: string,

     

       
652
       
652
       
+
       
	label: string,

     

       
653
       
653
       
+
       
	onClick: () => void,

     

       
654
       
654
       
+
       
	autoClose: boolean = true,

     

       
655
       
655
       
+
       
	extraClass: string = ''

     

       
656
       
656
       
+
       
)}

     

       
657
       
657
       
+
       
	<button

     

       
658
       
658
       
+
       
		class="

     

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

     

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

     

       
661
       
661
       
+
       
		{extraClass}

     

       
662
       
662
       
+
       
		"

     

       
663
       
663
       
+
       
		onclick={() => {

     

       
664
       
664
       
+
       
			onClick();

     

       
665
       
665
       
+
       
			if (autoClose) actionsOpen = false;

     

       
666
       
666
       
+
       
		}}

     

       
372
       
667
       
 
       
	>

     

       
373
       
373
       
-
       
		{#snippet label(

     

       
374
       
374
       
-
       
			name: string,

     

       
375
       
375
       
-
       
			icon: string,

     

       
376
       
376
       
-
       
			onClick: (link: Backlink | null | undefined) => void,

     

       
377
       
377
       
-
       
			backlink?: Backlink | null,

     

       
378
       
378
       
-
       
			hasSolid?: boolean

     

       
379
       
379
       
-
       
		)}

     

       
380
       
380
       
-
       
			<button

     

       
381
       
381
       
-
       
				class="px-2 py-1.5 text-(--nucleus-fg)/90 hover:[backdrop-filter:brightness(120%)]"

     

       
382
       
382
       
-
       
				onclick={() => onClick(backlink)}

     

       
383
       
383
       
-
       
				style="color: {backlink ? color : 'color-mix(in srgb, var(--nucleus-fg) 90%, transparent)'}"

     

       
384
       
384
       
-
       
				title={name}

     

       
385
       
385
       
-
       
			>

     

       
386
       
386
       
-
       
				<Icon icon={hasSolid && backlink ? `${icon}-solid` : icon} width={20} />

     

       
387
       
387
       
-
       
			</button>

     

       
388
       
388
       
-
       
		{/snippet}

     

       
389
       
389
       
-
       
		{@render label('reply', 'heroicons:chat-bubble-left', () => {

     

       
390
       
390
       
-
       
			onReply?.(post);

     

       
391
       
391
       
-
       
		})}

     

       
392
       
392
       
-
       
		{@render label(

     

       
393
       
393
       
-
       
			'repost',

     

       
394
       
394
       
-
       
			'heroicons:arrow-path-rounded-square-20-solid',

     

       
395
       
395
       
-
       
			async (link) => {

     

       
396
       
396
       
-
       
				if (link === undefined) return;

     

       
397
       
397
       
-
       
				postActions.set(`${selectedDid!}:${aturi}`, {

     

       
398
       
398
       
-
       
					...backlinks!,

     

       
399
       
399
       
-
       
					repost: await toggleLink(link, 'app.bsky.feed.repost')

     

       
400
       
400
       
-
       
				});

     

       
401
       
401
       
-
       
			},

     

       
402
       
402
       
-
       
			backlinks?.repost

     

       
403
       
403
       
-
       
		)}

     

       
404
       
404
       
-
       
		{@render label('quote', 'heroicons:paper-clip-20-solid', () => {

     

       
405
       
405
       
-
       
			onQuote?.(post);

     

       
406
       
406
       
-
       
		})}

     

       
407
       
407
       
-
       
		{@render label(

     

       
408
       
408
       
-
       
			'like',

     

       
409
       
409
       
-
       
			'heroicons:star',

     

       
410
       
410
       
-
       
			async (link) => {

     

       
411
       
411
       
-
       
				if (link === undefined) return;

     

       
412
       
412
       
-
       
				postActions.set(`${selectedDid!}:${aturi}`, {

     

       
413
       
413
       
-
       
					...backlinks!,

     

       
414
       
414
       
-
       
					like: await toggleLink(link, 'app.bsky.feed.like')

     

       
415
       
415
       
-
       
				});

     

       
416
       
416
       
-
       
			},

     

       
417
       
417
       
-
       
			backlinks?.like,

     

       
418
       
418
       
-
       
			true

     

       
419
       
419
       
-
       
		)}

     

       
420
       
420
       
-
       
	</div>

     

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

     

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

     

       
670
       
670
       
+
       
	</button>

     

       
421
       
671
       
 
       
{/snippet}

     

       
672
       
672
       
+
       


     

       
673
       
673
       
+
       
<style>

     

       
674
       
674
       
+
       
	@reference "../app.css";

     

       
675
       
675
       
+
       


     

       
676
       
676
       
+
       
	:global(.post-dropdown) {

     

       
677
       
677
       
+
       
		@apply flex min-w-54 flex-col gap-1 rounded-sm border-2 p-1 shadow-2xl backdrop-blur-xl backdrop-brightness-60;

     

       
678
       
678
       
+
       
	}

     

       
679
       
679
       
+
       
</style>

     

···

       
1
       
1
       
+
       
<script lang="ts">

     

       
2
       
2
       
+
       
	import {

     

       
3
       
3
       
+
       
		computePosition,

     

       
4
       
4
       
+
       
		autoUpdate,

     

       
5
       
5
       
+
       
		offset,

     

       
6
       
6
       
+
       
		flip,

     

       
7
       
7
       
+
       
		shift,

     

       
8
       
8
       
+
       
		type Placement

     

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

     

       
10
       
10
       
+
       
	import { onMount } from 'svelte';

     

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

     

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

     

       
13
       
13
       
+
       


     

       
14
       
14
       
+
       
	interface Props {

     

       
15
       
15
       
+
       
		class?: ClassValue;

     

       
16
       
16
       
+
       
		style?: string;

     

       
17
       
17
       
+
       
		isOpen?: boolean;

     

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

     

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

     

       
20
       
20
       
+
       
		placement?: Placement;

     

       
21
       
21
       
+
       
		offsetDistance?: number;

     

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

     

       
23
       
23
       
+
       
	}

     

       
24
       
24
       
+
       


     

       
25
       
25
       
+
       
	let {

     

       
26
       
26
       
+
       
		isOpen = $bindable(false),

     

       
27
       
27
       
+
       
		trigger,

     

       
28
       
28
       
+
       
		children,

     

       
29
       
29
       
+
       
		placement = 'bottom-start',

     

       
30
       
30
       
+
       
		offsetDistance = 2,

     

       
31
       
31
       
+
       
		position = $bindable(),

     

       
32
       
32
       
+
       
		...restProps

     

       
33
       
33
       
+
       
	}: Props = $props();

     

       
34
       
34
       
+
       


     

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

     

       
36
       
36
       
+
       
	let contentRef: HTMLElement | undefined = $state();

     

       
37
       
37
       
+
       
	let cleanup: (() => void) | null = null;

     

       
38
       
38
       
+
       


     

       
39
       
39
       
+
       
	const updatePosition = async () => {

     

       
40
       
40
       
+
       
		const { x, y } = await computePosition(triggerRef!, contentRef!, {

     

       
41
       
41
       
+
       
			placement,

     

       
42
       
42
       
+
       
			middleware: [offset(offsetDistance), flip(), shift({ padding: 8 })],

     

       
43
       
43
       
+
       
			strategy: 'fixed'

     

       
44
       
44
       
+
       
		});

     

       
45
       
45
       
+
       


     

       
46
       
46
       
+
       
		Object.assign(contentRef!.style, {

     

       
47
       
47
       
+
       
			left: `${x}px`,

     

       
48
       
48
       
+
       
			top: `${y}px`

     

       
49
       
49
       
+
       
		});

     

       
50
       
50
       
+
       
	};

     

       
51
       
51
       
+
       


     

       
52
       
52
       
+
       
	const handleClose = () => (isOpen = false);

     

       
53
       
53
       
+
       


     

       
54
       
54
       
+
       
	const isEventInElement = (event: MouseEvent, element: HTMLElement) => {

     

       
55
       
55
       
+
       
		let rect = element.getBoundingClientRect();

     

       
56
       
56
       
+
       
		let x = event.clientX;

     

       
57
       
57
       
+
       
		let y = event.clientY;

     

       
58
       
58
       
+
       
		return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;

     

       
59
       
59
       
+
       
	};

     

       
60
       
60
       
+
       


     

       
61
       
61
       
+
       
	const handleClickOutside = (event: MouseEvent) => {

     

       
62
       
62
       
+
       
		if (!isOpen) return;

     

       
63
       
63
       
+
       
		if (!isEventInElement(event, triggerRef!) && !isEventInElement(event, contentRef!))

     

       
64
       
64
       
+
       
			handleClose();

     

       
65
       
65
       
+
       
	};

     

       
66
       
66
       
+
       


     

       
67
       
67
       
+
       
	const handleEscape = (event: KeyboardEvent) => {

     

       
68
       
68
       
+
       
		if (event.key === 'Escape') handleClose();

     

       
69
       
69
       
+
       
	};

     

       
70
       
70
       
+
       


     

       
71
       
71
       
+
       
	const handleScroll = handleClose;

     

       
72
       
72
       
+
       


     

       
73
       
73
       
+
       
	$effect(() => {

     

       
74
       
74
       
+
       
		if (isOpen) {

     

       
75
       
75
       
+
       
			cleanup = autoUpdate(triggerRef!, contentRef!, updatePosition);

     

       
76
       
76
       
+
       
		} else if (cleanup) {

     

       
77
       
77
       
+
       
			cleanup();

     

       
78
       
78
       
+
       
			cleanup = null;

     

       
79
       
79
       
+
       
		}

     

       
80
       
80
       
+
       
	});

     

       
81
       
81
       
+
       


     

       
82
       
82
       
+
       
	onMount(() => {

     

       
83
       
83
       
+
       
		return () => {

     

       
84
       
84
       
+
       
			if (cleanup) cleanup();

     

       
85
       
85
       
+
       
		};

     

       
86
       
86
       
+
       
	});

     

       
87
       
87
       
+
       
</script>

     

       
88
       
88
       
+
       


     

       
89
       
89
       
+
       
<svelte:window onkeydown={handleEscape} onmousedown={handleClickOutside} onscroll={handleScroll} />

     

       
90
       
90
       
+
       


     

       
91
       
91
       
+
       
<div role="button" tabindex="0" bind:this={triggerRef}>

     

       
92
       
92
       
+
       
	{@render trigger?.()}

     

       
93
       
93
       
+
       
</div>

     

       
94
       
94
       
+
       


     

       
95
       
95
       
+
       
{#if isOpen}

     

       
96
       
96
       
+
       
	<div

     

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

     

       
98
       
98
       
+
       
		bind:this={contentRef}

     

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

     

       
100
       
100
       
+
       
		style={restProps.style}

     

       
101
       
101
       
+
       
		role="menu"

     

       
102
       
102
       
+
       
		tabindex="-1"

     

       
103
       
103
       
+
       
	>

     

       
104
       
104
       
+
       
		{@render children?.()}

     

       
105
       
105
       
+
       
	</div>

     

       
106
       
106
       
+
       
{/if}

     

···

       
1
       
1
       
 
       
<script lang="ts">

     

       
2
       
2
       
 
       
	import type { Snippet } from 'svelte';

     

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

     

       
3
       
4
       
 
       


     

       
4
       
5
       
 
       
	interface Props {

     

       
5
       
6
       
 
       
		isOpen: boolean;

     
···

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

     

       
32
       
33
       
 
       
	};

     

       
33
       
34
       
 
       


     

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

     

       
35
       
35
       
-
       


     

       
36
       
36
       
-
       
	// this sucks probably idk

     

       
37
       
35
       
 
       
	$effect(() => {

     

       
38
       
38
       
-
       
		if (!isOpen) return;

     

       
39
       
39
       
-
       


     

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

     

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

     

       
42
       
42
       
-
       
			e.preventDefault();

     

       
43
       
43
       
-
       
		};

     

       
44
       
44
       
-
       


     

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

     

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

     

       
47
       
47
       
-
       


     

       
48
       
48
       
-
       
		return () => {

     

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

     

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

     

       
51
       
51
       
-
       
		};

     

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

     

       
52
       
37
       
 
       
	});

     

       
53
       
38
       
 
       
</script>

     

       
54
       
39
       
 
       


     

       
55
       
40
       
 
       
{#if isOpen}

     

       
56
       
41
       
 
       
	<div

     

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

     

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

     

       
58
       
44
       
 
       
		onclick={onClose}

     

       
59
       
45
       
 
       
		onkeydown={handleKeydown}

     
···

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

     

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

     

       
65
       
51
       
 
       
		<div

     

       
66
       
66
       
-
       
			bind:this={popupElement}

     

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

     

       
68
       
68
       
-
       
				? ''

     

       
69
       
69
       
-
       
				: 'h-[' +

     

       
70
       
70
       
-
       
					height +

     

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

     

       
52
       
52
       
+
       
			class="

     

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

     

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

     

       
55
       
55
       
+
       
			"

     

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

     

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

     

       
74
       
58
       
 
       
			role="dialog"

     

···

       
23
       
23
       
 
       
	}: Props = $props();

     

       
24
       
24
       
 
       


     

       
25
       
25
       
 
       
	let color = $derived(

     

       
26
       
26
       
-
       
		client.didDoc?.did ? generateColorForDid(client.didDoc?.did) : 'var(--nucleus-accent2)'

     

       
26
       
26
       
+
       
		client.user?.did ? generateColorForDid(client.user?.did) : 'var(--nucleus-accent2)'

     

       
27
       
27
       
 
       
	);

     

       
28
       
28
       
 
       


     

       
29
       
29
       
 
       
	const post = async (text: string): Promise<Result<PostWithUri, string>> => {

     
···

       
53
       
53
       
 
       
		const res = await client.atcute?.post('com.atproto.repo.createRecord', {

     

       
54
       
54
       
 
       
			input: {

     

       
55
       
55
       
 
       
				collection: 'app.bsky.feed.post',

     

       
56
       
56
       
-
       
				repo: client.didDoc!.did,

     

       
56
       
56
       
+
       
				repo: client.user!.did,

     

       
57
       
57
       
 
       
				record

     

       
58
       
58
       
 
       
			}

     

       
59
       
59
       
 
       
		});

     
···

       
145
       
145
       
 
       
	{#if replying}

     

       
146
       
146
       
 
       
		{@render renderPost(replying)}

     

       
147
       
147
       
 
       
	{/if}

     

       
148
       
148
       
-
       
	<textarea

     

       
149
       
149
       
-
       
		bind:this={textareaEl}

     

       
150
       
150
       
-
       
		bind:value={postText}

     

       
151
       
151
       
-
       
		onfocus={() => (isFocused = true)}

     

       
152
       
152
       
-
       
		onblur={unfocus}

     

       
153
       
153
       
-
       
		onkeydown={(event) => {

     

       
154
       
154
       
-
       
			if (event.key === 'Escape') unfocus();

     

       
155
       
155
       
-
       
			if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) doPost();

     

       
156
       
156
       
-
       
		}}

     

       
157
       
157
       
-
       
		placeholder="what's on your mind?"

     

       
158
       
158
       
-
       
		rows="4"

     

       
159
       
159
       
-
       
		class="field-sizing-content resize-none"

     

       
160
       
160
       
-
       
	></textarea>

     

       
161
       
161
       
-
       
	{#if quoting}

     

       
162
       
162
       
-
       
		{@render renderPost(quoting)}

     

       
163
       
163
       
-
       
	{/if}

     

       
148
       
148
       
+
       
	<div class="composer space-y-2">

     

       
149
       
149
       
+
       
		<textarea

     

       
150
       
150
       
+
       
			bind:this={textareaEl}

     

       
151
       
151
       
+
       
			bind:value={postText}

     

       
152
       
152
       
+
       
			onfocus={() => (isFocused = true)}

     

       
153
       
153
       
+
       
			onblur={unfocus}

     

       
154
       
154
       
+
       
			onkeydown={(event) => {

     

       
155
       
155
       
+
       
				if (event.key === 'Escape') unfocus();

     

       
156
       
156
       
+
       
				if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) doPost();

     

       
157
       
157
       
+
       
			}}

     

       
158
       
158
       
+
       
			placeholder="what's on your mind?"

     

       
159
       
159
       
+
       
			rows="4"

     

       
160
       
160
       
+
       
			class="field-sizing-content resize-none"

     

       
161
       
161
       
+
       
		></textarea>

     

       
162
       
162
       
+
       
		{#if quoting}

     

       
163
       
163
       
+
       
			{@render renderPost(quoting)}

     

       
164
       
164
       
+
       
		{/if}

     

       
165
       
165
       
+
       
	</div>

     

       
164
       
166
       
 
       
{/snippet}

     

       
165
       
167
       
 
       


     

       
166
       
168
       
 
       
<div class="relative min-h-13">

     
···

       
211
       
213
       
 
       
	</div>

     

       
212
       
214
       
 
       
</div>

     

       
213
       
215
       
 
       


     

       
216
       
216
       
+
       
<!-- TODO: this fucking blows -->

     

       
214
       
217
       
 
       
<style>

     

       
215
       
218
       
 
       
	@reference "../app.css";

     

       
216
       
219
       
 
       


     

       
217
       
220
       
 
       
	input,

     

       
218
       
218
       
-
       
	textarea {

     

       
221
       
221
       
+
       
	.composer {

     

       
219
       
222
       
 
       
		@apply single-line-input bg-(--nucleus-bg)/35;

     

       
220
       
223
       
 
       
		border-color: color-mix(in srgb, var(--acc-color) 30%, transparent);

     

       
221
       
224
       
 
       
	}

     

       
222
       
225
       
 
       


     

       
226
       
226
       
+
       
	.composer {

     

       
227
       
227
       
+
       
		@apply p-2;

     

       
228
       
228
       
+
       
	}

     

       
229
       
229
       
+
       


     

       
230
       
230
       
+
       
	textarea {

     

       
231
       
231
       
+
       
		@apply w-full bg-transparent p-0;

     

       
232
       
232
       
+
       
	}

     

       
233
       
233
       
+
       


     

       
223
       
234
       
 
       
	input {

     

       
224
       
235
       
 
       
		@apply p-1 px-2;

     

       
225
       
236
       
 
       
	}

     

       
226
       
237
       
 
       


     

       
227
       
227
       
-
       
	textarea {

     

       
238
       
238
       
+
       
	.composer {

     

       
228
       
239
       
 
       
		@apply focus:scale-100;

     

       
229
       
240
       
 
       
	}

     

       
230
       
241
       
 
       


     

       
231
       
242
       
 
       
	input::placeholder,

     

       
232
       
243
       
 
       
	textarea::placeholder {

     

       
233
       
244
       
 
       
		color: color-mix(in srgb, var(--acc-color) 45%, var(--nucleus-bg));

     

       
245
       
245
       
+
       
	}

     

       
246
       
246
       
+
       


     

       
247
       
247
       
+
       
	textarea:focus {

     

       
248
       
248
       
+
       
		@apply border-none! [box-shadow:none]! outline-none!;

     

       
234
       
249
       
 
       
	}

     

       
235
       
250
       
 
       
</style>