fetch bookmark title

src/css/components/button.css

···
     border-image-source: var(--button-border-hover);
   }
 
+  &:disabled {
+    opacity: 0.5;
+  }
+
   &[data-danger] {
     &:not(:hover) {
       border-image-source: var(--button-border-danger);

src/css/components/form.css

···
     inline-size: 100%;
   }
 
-  &[action*="editBookmark"],
+  &[action*="editBookmark"] {
+    & input {
+      inline-size: 100%;
+    }
+  }
+
   &[action*="createBookmark"] {
     & input {
       inline-size: 100%;
+    }
+
+    & div:has(input[name="title"]) {
+      display: grid;
+      inline-size: 100%;
+      grid-template-columns: 1fr auto;
+      gap: 10px;
+
+      & input {
+        grid-column: 1;
+      }
     }
   }
 

src/css/components/input.css

···
   inline-size: min(100%, 400px);
   line-height: var(--line-height-1);
   padding: 0;
+
+  &::placeholder {
+    color: rgb(var(--color-black) / 0.5);
+    opacity: 1;
+  }
 }

src/lib/types.ts

···
   platform: App.Platform;
 };
 
+export type UserEvent = AuthEvent & {
+  locals: App.Locals & {
+    user: NonNullable<App.Locals["user"]>;
+  };
+};
+
 export const isAuthEvent = (event: RequestEvent): event is AuthEvent => {
   return event.platform?.env !== undefined;
 };
+
+export const isUserEvent = (event: RequestEvent): event is UserEvent => {
+  return isAuthEvent(event) && event.locals.user !== undefined;
+};

src/routes/+page.server.ts

···
   startSession,
   updateSession,
 } from "$lib/server/session";
-import { isAuthEvent } from "$lib/types";
+import { isAuthEvent, isUserEvent } from "$lib/types";
 import { parseActorProfile } from "$lib/valibot";
-import { Client } from "@atcute/client";
-import { type Actions, fail, redirect } from "@sveltejs/kit";
+import { type Actions, error, fail, redirect } from "@sveltejs/kit";
 
 export const actions = {
   logout: async (event) => {
···
     redirect(303, url);
   },
   displayName: async (event) => {
-    if (isAuthEvent(event) === false) {
-      throw new Error();
-    }
-    if (event.locals.user === undefined) {
-      return;
+    if (isUserEvent(event) === false) {
+      error(401);
     }
     const { user } = event.locals;
     try {
···
     }
   },
   purge: async (event) => {
-    if (isAuthEvent(event) === false) {
-      throw new Error();
+    if (isUserEvent(event) === false) {
+      error(401);
     }
     const { user } = event.locals;
-    if (user === undefined) {
-      return;
-    }
     const result = await user.client.post("com.atproto.repo.deleteRecord", {
       input: {
         repo: user.did,

src/routes/bookmarks/[did=did]/+page.server.ts

···
-import { isAuthEvent } from "$lib/types";
+import { isUserEvent } from "$lib/types";
 import { parseBookmark } from "$lib/valibot";
 import * as TID from "@atcute/tid";
-import { type Actions, fail } from "@sveltejs/kit";
+import { type Actions, error, fail } from "@sveltejs/kit";
 import type { PageServerLoad } from "./$types";
 
 export const load: PageServerLoad = async ({ locals }) => {
···
 
 export const actions = {
   deleteBookmark: async (event) => {
-    if (isAuthEvent(event) === false) {
-      throw new Error();
+    if (isUserEvent(event) === false) {
+      error(401);
     }
     const { user } = event.locals;
-    if (user === undefined) {
-      return;
-    }
     const formData = await event.request.formData();
     const result = await user.client.post("com.atproto.repo.deleteRecord", {
       input: {
···
     return { success: true };
   },
   createBookmark: async (event) => {
-    if (isAuthEvent(event) === false) {
-      throw new Error();
-    }
-    if (event.locals.user === undefined) {
-      return;
+    if (isUserEvent(event) === false) {
+      error(401);
     }
     const { user } = event.locals;
     const formData = await event.request.formData();
···
     }
   },
   editBookmark: async (event) => {
-    if (isAuthEvent(event) === false) {
-      throw new Error();
-    }
-    if (event.locals.user === undefined) {
-      return;
+    if (isUserEvent(event) === false) {
+      error(401);
     }
     const { user } = event.locals;
     const formData = await event.request.formData();

src/routes/bookmarks/[did=did]/+page.svelte

···
 <script lang="ts">
+  import type { EventHandler } from "svelte/elements";
   import type { PageProps } from "./$types";
 
   let { data, form, params }: PageProps = $props();
···
   const isSelf = $derived(data.user && params.did === data.user.did);
 
   let editData: null | (typeof data.bookmarks)[number] = $state(null);
-
   let editDialog: HTMLDialogElement | null = $state(null);
   let createDialog: HTMLDialogElement | null = $state(null);
+  let createURL: URL | null = $state(null);
 
   const dateFormat = $derived(
     new Intl.DateTimeFormat(data.locale, {
···
     }),
   );
 
+  const onInputURL: EventHandler<Event, HTMLInputElement> = (ev) => {
+    const dialog = ev.currentTarget.closest("dialog");
+    if (dialog !== createDialog) return;
+    createURL = URL.parse(ev.currentTarget.value);
+  };
+
+  const onFetchTitle = async (ev: MouseEvent) => {
+    if (createURL === null) return;
+    if (createDialog === null) return;
+    const titleInput =
+      createDialog.querySelector<HTMLInputElement>('[name="title"]');
+    if (titleInput === null) return;
+    const formData = new FormData();
+    formData.set("url", createURL.href);
+    const button = ev.target as HTMLButtonElement;
+    button.disabled = true;
+    try {
+      const response = await fetch("/bookmarks/title", {
+        method: "POST",
+        body: formData,
+      });
+      const { title } = await response.json();
+      const template = document.createElement("template");
+      template.innerHTML = title;
+      titleInput.value = template.content.textContent;
+    } catch {
+      // Whatever...
+    } finally {
+      button.disabled = false;
+    }
+  };
+
   $effect(() => {
     if (form?.action === "editBookmark" && "error" in form) {
       if (editDialog?.open === false) {
···
 
 {#snippet urlInput(value = "")}
   <label for="url">URL</label>
-  <input type="url" id="url" name="url" maxlength="1280" {value} required />
+  <input
+    type="url"
+    id="url"
+    name="url"
+    maxlength="1280"
+    placeholder="https://..."
+    {value}
+    oninput={onInputURL}
+    required
+  />
 {/snippet}
 
 {#snippet titleInput(value = "")}
···
       {@render urlInput(
         form?.action === "createBookmark" ? form?.data?.url.toString() : "",
       )}
-      {@render titleInput(
-        form?.action === "createBookmark" ? form?.data?.title.toString() : "",
-      )}
+      <div>
+        {@render titleInput(
+          form?.action === "createBookmark" ? form?.data?.title.toString() : "",
+        )}
+        <button
+          type="button"
+          onclick={onFetchTitle}
+          disabled={createURL === null}>Fetch</button
+        >
+      </div>
       <button type="submit">Create</button>
     </form>
   </dialog>

src/routes/bookmarks/favicon/[hostname]/+server.ts

···
-import { redirect } from "@sveltejs/kit";
+import { error, redirect } from "@sveltejs/kit";
 import type { RequestHandler } from "./$types";
 
 const copyHeaders = [
···
 ];
 
 export const GET: RequestHandler = async (event) => {
+  if (
+    event.request.headers.get("Sec-Fetch-Site") !== "same-origin"
+  ) {
+    error(401);
+  }
   const url = URL.parse(`https://${event.params.hostname}`);
   if (url === null) {
     return redirect(303, "/images/favicon.svg");

src/routes/bookmarks/title/+server.ts

···
+import { isUserEvent } from "$lib/types";
+import { error, json } from "@sveltejs/kit";
+import type { RequestHandler } from "./$types";
+
+export const POST: RequestHandler = async (event) => {
+  if (
+    isUserEvent(event) === false ||
+    event.request.headers.get("Sec-Fetch-Site") !== "same-origin"
+  ) {
+    error(401);
+  }
+  try {
+    const formData = await event.request.formData();
+    const url = new URL(String(formData.get("url")));
+    const origin = new URL(event.platform.env.ORIGIN);
+    if (url.host === origin.host) {
+      return json({ title: "Attic" });
+    }
+    const response = await event.fetch(url, {
+      signal: AbortSignal.timeout(5000),
+    });
+    if (
+      response.headers.get("Content-Type")?.startsWith("text/html") === false
+    ) {
+      throw new Error();
+    }
+    const html = await response.text();
+    const match = html.match(/<title>(.+?)<\/title>/);
+    if (match === null) {
+      throw new Error();
+    }
+    const title = match[1].trim();
+    if (title.length < 1 || title.length > 2560) {
+      throw new Error();
+    }
+    return json({ title });
+  } catch {
+    return json({ title: "Untitled" });
+  }
+};