commit 4d35388ff3a7180d73b911f18e42a3769d94b991 · ptr.pet/nucleus

deno.lock

···

       25
       25
        
           "npm:prettier-plugin-tailwindcss@~0.6.14": "0.6.14_prettier@3.6.2_prettier-plugin-svelte@3.4.0__prettier@3.6.2__svelte@5.40.1___acorn@8.15.0_svelte@5.40.1__acorn@8.15.0",

     

       26
       26
        
           "npm:prettier@^3.6.2": "3.6.2",

     

       27
       27
        
           "npm:svelte-check@^4.3.2": "4.3.3_svelte@5.40.1__acorn@8.15.0_typescript@5.9.3",

     

       28
       28
       +
           "npm:svelte-infinite@0.5": "0.5.0_svelte@5.40.1__acorn@8.15.0",

     

       28
       29
        
           "npm:svelte@^5.39.5": "5.40.1_acorn@8.15.0",

     

       29
       30
        
           "npm:tailwindcss@^4.1.13": "4.1.14",

     

       30
       31
        
           "npm:typescript-eslint@^8.44.1": "8.46.1_eslint@9.37.0_typescript@5.9.3_@typescript-eslint+parser@8.46.1__eslint@9.37.0__typescript@5.9.3",

     
···

       1564
       1565
        
               "svelte"

     

       1565
       1566
        
             ]

     

       1566
       1567
        
           },

     

       1568
       1568
       +
           "svelte-infinite@0.5.0_svelte@5.40.1__acorn@8.15.0": {

     

       1569
       1569
       +
             "integrity": "sha512-3ZomRQcQzg8VWtnqO4MvPC0Jt3hvh1wmC47t64BcI+8UXTl0FJYVfB7ky4d1NJ3mf/KZZa+hcIZJPnV9cOt8gQ==",

     

       1570
       1570
       +
             "dependencies": [

     

       1571
       1571
       +
               "svelte"

     

       1572
       1572
       +
             ]

     

       1573
       1573
       +
           },

     

       1567
       1574
        
           "svelte@5.40.1_acorn@8.15.0": {

     

       1568
       1575
        
             "integrity": "sha512-0R3t2oiLxJNJb2buz61MNfPdkjeyj2qTCM7TtIv/4ZfF12zD7Ig8iIo+C8febroy+9S4QJ7qfijtearSdO/1ww==",

     

       1569
       1576
        
             "dependencies": [

     
···

       1732
       1739
        
               "npm:prettier-plugin-tailwindcss@~0.6.14",

     

       1733
       1740
        
               "npm:prettier@^3.6.2",

     

       1734
       1741
        
               "npm:svelte-check@^4.3.2",

     

       1742
       1742
       +
               "npm:svelte-infinite@0.5",

     

       1735
       1743
        
               "npm:svelte@^5.39.5",

     

       1736
       1744
        
               "npm:tailwindcss@^4.1.13",

     

       1737
       1745
        
               "npm:typescript-eslint@^8.44.1",

+2 -1

package.json

···

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

     

       22
       22
        
       		"@wora/cache-persist": "^2.2.1",

     

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

     

       24
       24
       -
       		"lru-cache": "^11.2.2"

     

       24
       24
       +
       		"lru-cache": "^11.2.2",

     

       25
       25
       +
       		"svelte-infinite": "^0.5.0"

     

       25
       26
        
       	},

     

       26
       27
        
       	"devDependencies": {

     

       27
       28
        
       		"@eslint/compat": "^1.4.0",

+1 -1

src/components/BskyPost.svelte

···

       119
       119
        
       		{#if post.ok}

     

       120
       120
        
       			{@const record = post.value}

     

       121
       121
        
       			<div

     

       122
       122
       -
       				class="rounded-sm border-2 p-3 shadow-lg backdrop-blur-sm transition-all hover:scale-[1.01]"

     

       122
       122
       +
       				class="rounded-sm border-2 p-3 shadow-lg backdrop-blur-sm transition-all"

     

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

     

       124
       124
        
       			>

     

       125
       125
        
       				<div class="mb-3 flex items-center gap-1.5">

src/routes/+layout.ts

···

       1
       1
       +
       export const ssr = false;

     

       2
       2
       +
       export const prerender = false;

     

       3
       3
       +
       export const csr = true;

+97 -40

src/routes/+page.svelte

···

       16
       16
        
       	import { expect } from '$lib/result';

     

       17
       17
        
       	import type { AppBskyFeedPost } from '@atcute/bluesky';

     

       18
       18
        
       	import { SvelteMap } from 'svelte/reactivity';

     

       19
       19
       +
       	import { InfiniteLoader, LoaderState } from 'svelte-infinite';

     

       20
       20
       +
       

     

       21
       21
       +
       	let loaderState = new LoaderState();

     

       22
       22
       +
       	let scrollContainer = $state<HTMLDivElement>();

     

       19
       23
        
       

     

       20
       24
        
       	let selectedDid = $state<Did | null>(null);

     

       21
       25
        
       	let clients = new SvelteMap<Did, AtpClient>();

     
···

       26
       30
        
       	onMount(async () => {

     

       27
       31
        
       		if ($accounts.length > 0) {

     

       28
       32
        
       			selectedDid = $accounts[0].did;

     

       29
       29
       -
       			Promise.all($accounts.map(loginAccount)).then(() => fetchTimelines($accounts));

     

       33
       33
       +
       			Promise.all($accounts.map(loginAccount)).then(() => {

     

       34
       34
       +
       				loaderState.isFirstLoad = true;

     

       35
       35
       +
       				loadMore();

     

       36
       36
       +
       			});

     

       30
       37
        
       		}

     

       31
       38
        
       	});

     

       32
       39
        
       

     
···

       47
       54
        
       		$accounts = $accounts.filter((acc) => acc.did !== did);

     

       48
       55
        
       		clients.delete(did);

     

       49
       56
        
       		posts.delete(did);

     

       57
       57
       +
       		cursors.delete(did);

     

       50
       58
        
       		selectedDid = $accounts[0]?.did;

     

       51
       59
        
       	};

     

       52
       60
        
       

     
···

       58
       66
        
       	};

     

       59
       67
        
       

     

       60
       68
        
       	let posts = new SvelteMap<Did, SvelteMap<ResourceUri, AppBskyFeedPost.Main>>();

     

       69
       69
       +
       	let cursors = new SvelteMap<Did, string | undefined>();

     

       70
       70
       +
       

     

       61
       71
        
       	const fetchTimeline = async (account: Account) => {

     

       62
       72
        
       		const client = clients.get(account.did);

     

       63
       73
        
       		if (!client) return;

     

       64
       64
       -
       		const accPosts = await fetchPostsWithBacklinks(client, account.did, undefined, 20);

     

       74
       74
       +
       

     

       75
       75
       +
       		const cursor = cursors.get(account.did);

     

       76
       76
       +
       		const accPosts = await fetchPostsWithBacklinks(client, account.did, cursor, 6);

     

       65
       77
        
       		if (!accPosts.ok) {

     

       66
       66
       -
       			console.error(`failed to fetch posts for account ${account.handle}: ${accPosts.error}`);

     

       67
       67
       -
       			return;

     

       78
       78
       +
       			throw `failed to fetch posts for account ${account.handle}: ${accPosts.error}`;

     

       68
       79
        
       		}

     

       80
       80
       +
       

     

       81
       81
       +
       		// Update cursor for next fetch

     

       82
       82
       +
       		cursors.set(account.did, accPosts.value.cursor);

     

       83
       83
       +
       

     

       69
       84
        
       		const accTimeline = await hydratePosts(client, accPosts.value.posts);

     

       70
       85
        
       		if (!posts.has(account.did)) {

     

       71
       86
        
       			posts.set(account.did, new SvelteMap(accTimeline));

     
···

       74
       89
        
       		const map = posts.get(account.did)!;

     

       75
       90
        
       		for (const [uri, record] of accTimeline) map.set(uri, record);

     

       76
       91
        
       	};

     

       92
       92
       +
       

     

       77
       93
        
       	const fetchTimelines = (newAccounts: Account[]) => Promise.all(newAccounts.map(fetchTimeline));

     

       78
       94
        
       

     

       95
       95
       +
       	let loading = $state(false);

     

       96
       96
       +
       	let loadError = $state('');

     

       97
       97
       +
       	const loadMore = async () => {

     

       98
       98
       +
       		if (loading || $accounts.length === 0) return;

     

       99
       99
       +
       

     

       100
       100
       +
       		loading = true;

     

       101
       101
       +
       		try {

     

       102
       102
       +
       			await fetchTimelines($accounts);

     

       103
       103
       +
       			loaderState.loaded();

     

       104
       104
       +
       		} catch (error) {

     

       105
       105
       +
       			loadError = `${error}`;

     

       106
       106
       +
       			loaderState.error();

     

       107
       107
       +
       		} finally {

     

       108
       108
       +
       			loading = false;

     

       109
       109
       +
       		}

     

       110
       110
       +
       	};

     

       111
       111
       +
       

     

       79
       112
        
       	let reverseChronological = $state(true);

     

       80
       80
       -
       	let viewOwnPosts = $state(true);

     

       113
       113
       +
       	let viewOwnPosts = $state(false);

     

       81
       114
        
       

     

       82
       115
        
       	type ThreadPost = {

     

       83
       116
        
       		uri: ResourceUri;

     
···

       240
       273
        
       		return threads;

     

       241
       274
        
       	};

     

       242
       275
        
       

     

       243
       243
       -
       	// Filtering functions (now much simpler!)

     

       276
       276
       +
       	// Filtering functions

     

       244
       277
        
       	const isOwnPost = (post: ThreadPost, accounts: Account[]) =>

     

       245
       278
        
       		accounts.some((account) => account.did === post.did);

     

       246
       279
        
       	const hasNonOwnPost = (posts: ThreadPost[], accounts: Account[]) =>

     
···

       253
       286
        
       			return true;

     

       254
       287
        
       		});

     

       255
       288
        
       

     

       256
       256
       -
       	// Usage

     

       257
       289
        
       	let threads = $derived(filterThreads(buildThreads(posts), $accounts));

     

       258
       290
        
       </script>

     

       259
       291
        
       

     

       260
       260
       -
       <div class="mx-auto max-w-2xl p-4">

     

       261
       261
       -
       	<div class="mb-6">

     

       292
       292
       +
       <div class="mx-auto flex h-screen max-w-2xl flex-col p-4">

     

       293
       293
       +
       	<div class="mb-6 flex-shrink-0">

     

       262
       294
        
       		<h1 class="text-3xl font-bold tracking-tight" style="color: {theme.fg};">nucleus</h1>

     

       263
       295
        
       		<div class="mt-1 flex gap-2">

     

       264
       296
        
       			<div class="h-1 w-11 rounded-full" style="background: {theme.accent};"></div>

     
···

       266
       298
        
       		</div>

     

       267
       299
        
       	</div>

     

       268
       300
        
       

     

       269
       269
       -
       	<div class="space-y-4">

     

       301
       301
       +
       	<div class="flex-shrink-0 space-y-4">

     

       270
       302
        
       		<div class="flex min-h-16 items-stretch gap-2">

     

       271
       303
        
       			<AccountSelector

     

       272
       304
        
       				accounts={$accounts}

     
···

       299
       331
        
       			class="h-[4px] w-full rounded-full border-0"

     

       300
       332
        
       			style="background: linear-gradient(to right, {theme.accent}, {theme.accent2});"

     

       301
       333
        
       		/>

     

       334
       334
       +
       	</div>

     

       302
       335
        
       

     

       303
       303
       -
       		<div class="flex flex-col">

     

       304
       304
       -
       			{#each threads as thread (thread.rootUri)}

     

       305
       305
       -
       				<div class="flex {reverseChronological ? 'flex-col' : 'flex-col-reverse'} mb-6.5">

     

       306
       306
       -
       					{#if thread.branchParentPost}

     

       307
       307
       -
       						{@const post = thread.branchParentPost}

     

       308
       308
       -
       						<div class="mb-1.5 flex items-center gap-1.5">

     

       309
       309
       -
       							<span class="text-sm opacity-60" style="color: {theme.fg};"

     

       310
       310
       -
       								>{reverseChronological ? '↱' : '↳'}</span

     

       311
       311
       -
       							>

     

       312
       312
       -
       							<BskyPost

     

       313
       313
       -
       								mini

     

       314
       314
       -
       								client={viewClient}

     

       315
       315
       -
       								identifier={post.did}

     

       316
       316
       -
       								rkey={post.rkey}

     

       317
       317
       -
       								record={post.record}

     

       318
       318
       -
       							/>

     

       319
       319
       -
       						</div>

     

       320
       320
       -
       					{/if}

     

       321
       321
       -
       					{#each thread.posts as post (post.uri)}

     

       322
       322
       -
       						<div class="mb-1.5">

     

       323
       323
       -
       							<BskyPost

     

       324
       324
       -
       								client={viewClient}

     

       325
       325
       -
       								identifier={post.did}

     

       326
       326
       -
       								rkey={post.rkey}

     

       327
       327
       -
       								record={post.record}

     

       328
       328
       -
       							/>

     

       329
       329
       -
       						</div>

     

       330
       330
       -
       					{/each}

     

       336
       336
       +
       	<div class="mt-4 overflow-y-scroll [scrollbar-width:none]" bind:this={scrollContainer}>

     

       337
       337
       +
       		<InfiniteLoader

     

       338
       338
       +
       			{loaderState}

     

       339
       339
       +
       			triggerLoad={loadMore}

     

       340
       340
       +
       			intersectionOptions={{ root: scrollContainer }}

     

       341
       341
       +
       		>

     

       342
       342
       +
       			{@render threadsView()}

     

       343
       343
       +
       			{#snippet loading()}

     

       344
       344
       +
       				<div class="flex justify-center py-4">

     

       345
       345
       +
       					<div

     

       346
       346
       +
       						class="h-8 w-8 animate-spin rounded-full border-4 border-t-transparent"

     

       347
       347
       +
       						style="border-color: {theme.accent} {theme.accent} {theme.accent} transparent;"

     

       348
       348
       +
       					></div>

     

       349
       349
       +
       				</div>

     

       350
       350
       +
       			{/snippet}

     

       351
       351
       +
       			{#snippet error()}

     

       352
       352
       +
       				<div class="flex justify-center py-4">

     

       353
       353
       +
       					<p class="text-sm opacity-80" style="color: {theme.fg};">

     

       354
       354
       +
       						an error occurred while loading posts: {loadError}

     

       355
       355
       +
       					</p>

     

       331
       356
        
       				</div>

     

       332
       332
       -
       			{/each}

     

       333
       333
       -
       		</div>

     

       357
       357
       +
       			{/snippet}

     

       358
       358
       +
       		</InfiniteLoader>

     

       334
       359
        
       	</div>

     

       335
       360
        
       </div>

     

       361
       361
       +
       

     

       362
       362
       +
       {#snippet threadsView()}

     

       363
       363
       +
       	{#each threads as thread (thread.rootUri)}

     

       364
       364
       +
       		<div class="flex {reverseChronological ? 'flex-col' : 'flex-col-reverse'} mb-6.5">

     

       365
       365
       +
       			{#if thread.branchParentPost}

     

       366
       366
       +
       				{@const post = thread.branchParentPost}

     

       367
       367
       +
       				<div class="mb-1.5 flex items-center gap-1.5">

     

       368
       368
       +
       					<span class="text-sm opacity-60" style="color: {theme.fg};"

     

       369
       369
       +
       						>{reverseChronological ? '↱' : '↳'}</span

     

       370
       370
       +
       					>

     

       371
       371
       +
       					<BskyPost

     

       372
       372
       +
       						mini

     

       373
       373
       +
       						client={viewClient}

     

       374
       374
       +
       						identifier={post.did}

     

       375
       375
       +
       						rkey={post.rkey}

     

       376
       376
       +
       						record={post.record}

     

       377
       377
       +
       					/>

     

       378
       378
       +
       				</div>

     

       379
       379
       +
       			{/if}

     

       380
       380
       +
       			{#each thread.posts as post (post.uri)}

     

       381
       381
       +
       				<div class="mb-1.5">

     

       382
       382
       +
       					<BskyPost

     

       383
       383
       +
       						client={viewClient}

     

       384
       384
       +
       						identifier={post.did}

     

       385
       385
       +
       						rkey={post.rkey}

     

       386
       386
       +
       						record={post.record}

     

       387
       387
       +
       					/>

     

       388
       388
       +
       				</div>

     

       389
       389
       +
       			{/each}

     

       390
       390
       +
       		</div>

     

       391
       391
       +
       	{/each}

     

       392
       392
       +
       {/snippet}