add tanstack query, hardcoded selfhosted.social agent for now, render bookmark subjects

package.json

···
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-netlify": "^5.2.3",
-		"@sveltejs/kit": "^2.42.1",
-		"@sveltejs/vite-plugin-svelte": "^6.2.0",
-		"@tailwindcss/typography": "^0.5.16",
+		"@sveltejs/kit": "^2.43.4",
+		"@sveltejs/vite-plugin-svelte": "^6.2.1",
+		"@tailwindcss/typography": "^0.5.19",
 		"autoprefixer": "^10.4.21",
 		"drizzle-kit": "^0.31.4",
-		"svelte": "^5.39.2",
-		"svelte-check": "^4.3.1",
+		"svelte": "^5.39.6",
+		"svelte-check": "^4.3.2",
 		"tailwindcss": "^4.1.13",
 		"typescript": "^5.9.2",
-		"vite": "^7.1.6"
+		"vite": "^7.1.7"
 	},
 	"dependencies": {
-		"@atproto/api": "^0.16.9",
+		"@atproto/api": "^0.16.10",
 		"@atproto/oauth-client-node": "^0.3.8",
 		"@oslojs/encoding": "^1.1.0",
 		"@tailwindcss/vite": "^4.1.13",
-		"@tanstack/svelte-query": "^5.89.0",
+		"@tanstack/svelte-query": "^5.90.2",
 		"drizzle-orm": "^0.44.5",
 		"postgres": "^3.4.7"
 	}

src/app.d.ts

···
 // See https://svelte.dev/docs/kit/types#app.d.ts
 
-import type { Agent, AtpBaseClient } from "@atproto/api";
+import type { Agent } from "@atproto/api";
 import type { ProfileViewDetailed } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
 
 // for information about these interfaces
···
 
     // set on `hooks.server.ts`, available on server functions
 		interface Locals {
-      agent: Agent | AtpBaseClient | undefined; 
+      authedAgent: Agent | undefined; 
       user: ProfileViewDetailed | undefined;
     }
 

src/hooks.server.ts

···
+import { Agent } from "@atproto/api";
 import { atclient } from "$lib/atproto";
-import { AtpBaseClient, Agent } from "@atproto/api";
 
 import { decryptToString } from "$lib/server/encryption";
 import { decodeBase64, decodeBase64urlIgnorePadding } from "@oslojs/encoding";
···
     const oauthSession = await atclient.restore(decrypted);
 
     // set the authed agent
-    const agent = new Agent(oauthSession);
-    event.locals.agent = agent;
+    const authedAgent = new Agent(oauthSession);
+    event.locals.authedAgent = authedAgent;
 
     // set the authed user with decrypted session DID
-    const user = await agent.getProfile({ actor: decrypted });
+    const user = await authedAgent.getProfile({ actor: decrypted });
     event.locals.user = user.data;
-  }
-  else {
-    // set public API agent
-    const agent = new AtpBaseClient({
-      service: "https://slingshot.microcosm.blue"
-    });
-    event.locals.agent = agent;
   }
 
   return resolve(event);

src/lib/utils.ts

···
+// --- UTILITIES ---
+
+export type LexiconCommunityBookmark = {
+	$type: "community.lexicon.bookmarks.bookmark";
+	subject: string;
+	createdAt: string;
+	tags?: string[];
+};
+
+export type LexiconCommunityLike = {
+	$type: "community.lexicon.interaction.like";
+	subject: string;
+	createdAt: string;
+}
+
+export function parseAtUri(uri: string) {
+  const regex = /at:\/\/(?<did>did.*)\/(?<lexi>.*)\/(?<rkey>.*)/;
+  const groups = regex.exec(uri)?.groups;
+  return {
+    did: groups?.did,
+    lexi: groups?.lexi,
+    rkey: groups?.rkey
+  }
+}

src/routes/+layout.server.ts

···
 
 export async function load({ locals }: ServerLoadEvent) {
   // have user available throughout the app via LayoutData
-  return { user: locals.user };
+  return { user: locals.user, authedAgent: locals.authedAgent };
 }

src/routes/+layout.svelte

···
 <script lang="ts">
 	import '../app.css';
+  import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query';
+
 	let { data, children } = $props();
   const user = $derived(data.user);
+  const queryClient = new QueryClient();
 </script>
 
-<div class="flex flex-col gap-8 w-screen h-full min-h-screen font-neco">
-  <header class="flex items-center w-full gap-4 px-8 py-4 justify-between">
-    <nav class="text-lg flex gap-4 items-center">
-      <a href="/" class="font-comico text-2xl hover:text-shadow-md">potatonet.app</a>
-      <a href="https://tangled.sh/@zeu.dev/potatonet-app" class="hover:text-shadow-lg">🧶</a>
-      <a href="https://bsky.app/profile/zeu.dev" class="hover:text-shadow-lg">🦋</a>
-    </nav>
+<QueryClientProvider client={queryClient}>
+  <div class="flex flex-col gap-8 w-screen h-full min-h-screen font-neco">
+    <header class="flex items-center w-full gap-4 px-8 py-4 justify-between">
+      <nav class="text-lg flex gap-4 items-center">
+        <a href="/" class="font-comico text-2xl hover:text-shadow-md">potatonet.app</a>
+        <a href="https://tangled.sh/@zeu.dev/potatonet-app" class="hover:text-shadow-lg">🧶</a>
+        <a href="https://bsky.app/profile/zeu.dev" class="hover:text-shadow-lg">🦋</a>
+      </nav>
 
-    <div class="flex gap-4 items-center">
-      {#if user}
-        <a href={`/${user.handle}/home`} class="hover:text-shadow-lg">🏡</a>
-        <form action="/?/logout" method="POST">
-          <button type="submit" class="hover:text-shadow-lg hover:cursor-pointer font-comico">
-            Logout
-          </button>
-        </form>
-      {:else}
-        <form action="/?/login" method="POST">
-          <input 
-            name="handle" 
-            type="text" 
-            placeholder="Handle (eg: zeu.dev)" 
-            class="border border-black border-dashed px-3 py-2 hover:shadow-lg focus:shadow-lg" 
-          />
-          <button type="submit" class="hover:text-shadow-lg hover:cursor-pointer font-comico">
-            Login
-          </button>
-        </form>
-      {/if}
-    </div>
-  </header>
+      <div class="flex gap-4 items-center text-lg">
+        {#if user}
+          <a href={`/${user.handle}/home`} class="hover:text-shadow-lg">🏡</a>
+          <form action="/?/logout" method="POST">
+            <button type="submit" class="hover:text-shadow-lg hover:cursor-pointer font-comico">
+              Logout
+            </button>
+          </form>
+        {:else}
+          <form action="/?/login" method="POST">
+            <input 
+              name="handle" 
+              type="text" 
+              placeholder="Handle (eg: zeu.dev)" 
+              class="border border-black border-dashed px-3 py-2 hover:shadow-lg focus:shadow-lg" 
+            />
+            <button type="submit" class="hover:text-shadow-lg hover:cursor-pointer font-comico">
+              Login
+            </button>
+          </form>
+        {/if}
+      </div>
+    </header>
 
-  <main class="flex flex-col gap-4 p-8">
-    {@render children()}
-  </main>
-</div>
+    <main class="flex flex-col gap-4 p-8">
+      <svelte:boundary>
+        {@render children()}
+        
+        {#snippet pending()}
+          <p>Page loading...</p> 
+        {/snippet}
+      </svelte:boundary>
+    </main>
+  </div>
+</QueryClientProvider>

src/routes/+page.svelte

···
+<h1 class="text-3xl font-bold font-comico">explore</h1> 
+<p>coming soon...</p>

src/routes/[handle]/home/+page.svelte

···
 <script lang="ts">
   import { page } from "$app/state";
+  import { Agent } from "@atproto/api";
+  import { createQuery } from "@tanstack/svelte-query";
+  import type { LexiconCommunityBookmark } from "$lib/utils";
 
-  const handle = $derived(page.params.handle);
+  const { handle } = page.params;
+  const agent = new Agent({ service: "https://selfhosted.social" });
+
+  const bookmarksQuery = createQuery({
+    queryKey: ["bookmarks", handle],
+    queryFn: async () => {
+      if (!handle) { throw Error }
+      const result = await agent.com.atproto.repo.listRecords({
+        repo: handle,
+        collection: "community.lexicon.bookmarks.bookmark"
+      });
+      if (!result.success) { throw Error }
+      console.log({ result });
+      return result.data as unknown as { cursor: string, records: { uri: string, cid: string, value: LexiconCommunityBookmark }[] };
+    },
+    staleTime: 3000
+  });
 </script>
+
+{#if $bookmarksQuery.isLoading}
+  <p>Loading...</p>
+{:else if $bookmarksQuery.isError}
+  <p>Error</p>
+{:else if $bookmarksQuery.isSuccess}
+  {@const bookmarks = $bookmarksQuery.data.records}
+  {#each bookmarks as { uri, cid, value: bookmark }}
+    <p>{bookmark.subject}</p>
+  {/each}
+{/if}

src/routes/oauth/callback/+server.ts

···
     error(500, { message: (err as Error).message });
   }
 
-  redirect(301, "/farm");
+  redirect(301, `/`);
 }

svelte.config.js

···
 
 	kit: {
 		adapter: adapter()
-	}
+	},
+  
+  compilerOptions: {
+    experimental: {
+      async: true
+    }
+  }
 };
 
 export default config;