bring back avatar uploads, move photo manip functions to a separate file, show profile dialog errors in an alert if any

src/components/AvatarForm.tsx

···
-export function AvatarForm(
-  { src, alt }: Readonly<{ src?: string; alt?: string }>,
-) {
-  return (
-    <form
-      id="avatar-file-form"
-      hx-post="/actions/avatar/upload"
-      hx-target="#image-preview"
-      hx-swap="innerHTML"
-      hx-encoding="multipart/form-data"
-      hx-trigger="change from:#file"
-    >
-      <label htmlFor="file">
-        <span class="sr-only">Upload avatar</span>
-        <div class="border rounded-full border-zinc-900 w-16 h-16 mx-auto mb-2 relative my-2 cursor-pointer">
-          <div class="absolute bottom-0 right-0 bg-zinc-800 rounded-full w-5 h-5 flex items-center justify-center z-10">
-            <i class="fa-solid fa-camera text-white text-xs"></i>
-          </div>
-          <div id="image-preview" class="w-full h-full">
-            {src
-              ? (
-                <img
-                  src={src}
-                  alt={alt}
-                  className="rounded-full w-full h-full object-cover"
-                />
-              )
-              : null}
-          </div>
-        </div>
-        <input
-          class="hidden"
-          type="file"
-          id="file"
-          name="file"
-          accept="image/*"
-        />
-      </label>
-    </form>
-  );
-}

src/components/AvatarInput.tsx

···
+export function AvatarInput(
+  { src, alt }: Readonly<{ src?: string; alt?: string }>,
+) {
+  return (
+    <label htmlFor="file">
+      <span class="sr-only">Upload avatar</span>
+      <div class="border rounded-full border-zinc-900 w-16 h-16 mx-auto mb-2 relative my-2 cursor-pointer">
+        <div class="absolute bottom-0 right-0 bg-zinc-800 rounded-full w-5 h-5 flex items-center justify-center z-10">
+          <i class="fa-solid fa-camera text-white text-xs"></i>
+        </div>
+        <div id="image-preview" class="w-full h-full">
+          {src
+            ? (
+              <img
+                src={src}
+                alt={alt}
+                className="rounded-full w-full h-full object-cover"
+              />
+            )
+            : null}
+        </div>
+      </div>
+      <input
+        class="hidden"
+        type="file"
+        id="file"
+        name="file"
+        accept="image/*"
+        _="on change call Grain.handleAvatarImageSelect(me)"
+      />
+    </label>
+  );
+}

src/components/GalleryPage.tsx

···
           title="Justified layout"
           variant="primary"
           class="flex justify-center w-full sm:w-fit bg-zinc-100 dark:bg-zinc-800 border-zinc-100 dark:border-zinc-800 data-[selected=false]:bg-transparent data-[selected=false]:border-transparent text-zinc-950 dark:text-zinc-50"
-          _="on click call toggleLayout('justified')
+          _="on click call Grain.toggleLayout('justified')
             set @data-selected to 'true'
             set #masonry-button's @data-selected to 'false'"
         >
···
           variant="primary"
           data-selected="false"
           class="flex justify-center w-full sm:w-fit bg-zinc-100 dark:bg-zinc-800 border-zinc-100 dark:border-zinc-800 data-[selected=false]:bg-transparent data-[selected=false]:border-transparent text-zinc-950 dark:text-zinc-50"
-          _="on click call toggleLayout('masonry')
+          _="on click call Grain.toggleLayout('masonry')
             set @data-selected to 'true'
             set #justified-button's @data-selected to 'false'"
         >
···
       <div
         id="masonry-container"
         class="h-0 overflow-hidden relative mx-auto w-full"
-        _="on load or htmx:afterSettle call computeLayout()"
+        _="on load or htmx:afterSettle call Grain.computeLayout()"
       >
         {gallery.items?.filter(isPhotoView)?.length
           ? gallery?.items

src/components/ProfileDialog.tsx

···
 import { ProfileView } from "$lexicon/types/social/grain/actor/defs.ts";
 import { Button, Dialog, Input, Textarea } from "@bigmoves/bff/components";
+import { AvatarInput } from "./AvatarInput.tsx";
 
 export function ProfileDialog({
   profile,
···
       <Dialog.Content class="dark:bg-zinc-950 relative">
         <Dialog.X class="fill-zinc-950 dark:fill-zinc-50" />
         <Dialog.Title>Edit my profile</Dialog.Title>
-        <div class="border rounded-full border-zinc-900 w-16 h-16 mx-auto mb-2 relative my-2">
-          {
-            /* <div class="absolute bottom-0 right-0 bg-zinc-800 rounded-full w-5 h-5 flex items-center justify-center z-10">
-            <i class="fa-solid fa-camera text-white text-xs"></i>
-          </div> */
-          }
-          <div id="image-preview" class="w-full h-full">
-            <img
-              src={profile.avatar}
-              alt={profile.handle}
-              className="rounded-full w-full h-full object-cover"
-            />
-          </div>
-        </div>
         <form
-          hx-post="/actions/profile/update"
-          hx-swap="none"
-          _="on htmx:afterOnLoad trigger closeModal"
+          id="profile-form"
+          hx-encoding="multipart/form-data"
+          _="on submit
+              halt the event
+              put 'Updating...' into #submit-button.innerText
+              add @disabled to #submit-button
+              call Grain.updateProfile(me)
+          on htmx:afterOnLoad
+            put 'Update' into #submit-button.innerText
+            remove @disabled from #submit-button
+            if event.detail.xhr.status != 200
+              alert('Error: ' + event.detail.xhr.responseText)
+            else
+              trigger closeDialog
+            end"
         >
-          <div id="image-input" />
+          <AvatarInput src={profile.avatar} alt={profile.handle} />
           <div class="mb-4 relative">
             <label htmlFor="displayName">Display Name</label>
             <Input
···
               {profile.description}
             </Textarea>
           </div>
-          <Button type="submit" variant="primary" class="w-full">
+          <Button
+            type="submit"
+            id="submit-button"
+            variant="primary"
+            class="w-full"
+          >
             Update
           </Button>
           <Button

src/components/UploadPage.tsx

···
             type="file"
             multiple
             accept="image/*"
-            _="on change call uploadPhotos(me)"
+            _="on change call Grain.uploadPhotos(me)"
           />
         </label>
       </Button>

src/routes/actions.tsx

···
   const formData = await req.formData();
   const displayName = formData.get("displayName") as string;
   const description = formData.get("description") as string;
+  const file = formData.get("file") as File | null;
 
   const record = ctx.indexService.getRecord<Profile>(
     `at://${did}/social.grain.actor.profile/self`,
···
     return new Response("Profile record not found", { status: 404 });
   }
 
+  if (file) {
+    try {
+      const blobResponse = await ctx.agent?.uploadBlob(file);
+      record.avatar = blobResponse?.data?.blob;
+    } catch (e) {
+      console.error("Failed to upload avatar:", e);
+    }
+  }
+
   try {
     await ctx.updateRecord<Profile>("social.grain.actor.profile", "self", {
       displayName,
···
     });
   } catch (e) {
     console.error("Error updating record:", e);
+    const errorMessage = e instanceof Error
+      ? e.message
+      : "Unknown error occurred";
+    return new Response(errorMessage, { status: 400 });
   }
 
   return ctx.redirect(`/profile/${handle}`);

src/routes/onboard.tsx

···
   ctx: BffContext<State>,
 ) => {
   ctx.requireAuth();
+  ctx.state.scripts = ["photo_manip.js", "profile_dialog.js"];
   return ctx.render(
     <div
       hx-get="/dialogs/profile"

src/routes/profile.tsx

···
     },
     ...getPageMeta(profileLink(handle)),
   ];
+  ctx.state.scripts = ["photo_manip.js", "profile_dialog.js"];
   if (tab) {
     return ctx.html(
       <ProfilePage

src/routes/upload.tsx

···
   const galleryRkey = url.searchParams.get("returnTo");
   const photos = getActorPhotos(did, ctx);
   ctx.state.meta = [{ title: "Upload — Grain" }, ...getPageMeta("/upload")];
-  ctx.state.scripts = ["upload_page.js"];
+  ctx.state.scripts = ["photo_manip.js", "upload_page.js"];
   return ctx.render(
     <UploadPage
       handle={handle}

static/masonry.js

···
   computeMasonry();
   observeMasonry();
 });
+
+window.Grain = window.Grain || {};
+window.Grain.toggleLayout = toggleLayout;
+window.Grain.computeLayout = computeLayout;

static/photo_manip.js

···
+// deno-lint-ignore-file no-window
+function readFileAsDataURL(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+}
+
+function dataURLToBlob(dataUrl) {
+  const [meta, base64] = dataUrl.split(",");
+  const mime = meta.match(/:(.*?);/)[1];
+  const binary = atob(base64);
+  const array = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    array[i] = binary.charCodeAt(i);
+  }
+  return new Blob([array], { type: mime });
+}
+
+function getDataUriSize(dataUri) {
+  const base64 = dataUri.split(",")[1];
+  return Math.ceil((base64.length * 3) / 4);
+}
+
+function createResizedImage(dataUri, options) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => {
+      let scale = 1;
+      if (options.mode === "cover") {
+        scale = Math.max(
+          options.width / img.width,
+          options.height / img.height,
+        );
+      } else if (options.mode === "contain") {
+        scale = Math.min(
+          options.width / img.width,
+          options.height / img.height,
+        );
+      } else {
+        scale = 1; // stretch or fallback
+      }
+
+      const w = Math.round(img.width * scale);
+      const h = Math.round(img.height * scale);
+
+      const canvas = document.createElement("canvas");
+      canvas.width = w;
+      canvas.height = h;
+
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return reject(new Error("Failed to get canvas context"));
+
+      ctx.fillStyle = "#fff";
+      ctx.fillRect(0, 0, w, h);
+      ctx.imageSmoothingEnabled = true;
+      ctx.imageSmoothingQuality = "high";
+      ctx.drawImage(img, 0, 0, w, h);
+
+      resolve({
+        dataUrl: canvas.toDataURL("image/jpeg", options.quality),
+        width: w,
+        height: h,
+      });
+    };
+    img.onerror = (e) => reject(e);
+    img.src = dataUri;
+  });
+}
+
+async function doResize(dataUri, opts) {
+  let bestResult = null;
+  let minQuality = 0;
+  let maxQuality = 101;
+
+  while (maxQuality - minQuality > 1) {
+    const quality = Math.round((minQuality + maxQuality) / 2);
+    const result = await createResizedImage(dataUri, {
+      width: opts.width,
+      height: opts.height,
+      quality: quality / 100,
+      mode: opts.mode,
+    });
+
+    const size = getDataUriSize(result.dataUrl);
+
+    if (size < opts.maxSize) {
+      minQuality = quality;
+      bestResult = result;
+    } else {
+      maxQuality = quality;
+    }
+  }
+
+  if (!bestResult) {
+    throw new Error("Failed to compress image");
+  }
+
+  return {
+    path: bestResult.dataUrl,
+    mime: "image/jpeg",
+    size: getDataUriSize(bestResult.dataUrl),
+    width: bestResult.width,
+    height: bestResult.height,
+  };
+}
+
+window.Grain = window.Grain || {};
+window.Grain.readFileAsDataURL = readFileAsDataURL;
+window.Grain.dataURLToBlob = dataURLToBlob;
+window.Grain.doResize = doResize;

static/profile_dialog.js

···
+// deno-lint-ignore-file no-window
+
+function handleAvatarImageSelect(fileInput) {
+  if (fileInput.files.length > 0) {
+    const file = fileInput.files[0];
+    Grain.readFileAsDataURL(file).then((dataUrl) => {
+      const previewImg = document.createElement("img");
+      previewImg.src = dataUrl;
+      previewImg.className = "rounded-full w-full h-full object-cover";
+      previewImg.alt = "Avatar preview";
+
+      const imagePreview = fileInput.closest("form").querySelector(
+        "#image-preview",
+      );
+      if (imagePreview) {
+        imagePreview.innerHTML = "";
+        imagePreview.appendChild(previewImg);
+      }
+    });
+  }
+}
+
+async function updateProfile(formElement) {
+  const formData = new FormData(formElement);
+
+  const avatarFile = formData.get("file");
+  if (avatarFile && avatarFile.type.startsWith("image/")) {
+    try {
+      const dataUrl = await Grain.readFileAsDataURL(file);
+
+      const resized = await Grain.doResize(dataUrl, {
+        width: 2000,
+        height: 2000,
+        maxSize: 1000 * 1000, // 1MB
+        mode: "contain",
+      });
+
+      const blob = Grain.dataURLToBlob(resized.path);
+      formData.set("file", blob, avatarFile.name);
+    } catch (err) {
+      console.error("Error resizing image:", err);
+      formData.delete("file");
+    }
+  }
+
+  htmx.ajax("POST", "/actions/profile/update", {
+    "swap": "none",
+    "values": Object.fromEntries(formData),
+    "source": formElement,
+  });
+}
+
+window.Grain = window.Grain || {};
+window.Grain.handleAvatarImageSelect = handleAvatarImageSelect;
+window.Grain.updateProfile = updateProfile;

static/upload_page.js

···
+// deno-lint-ignore-file no-window
+
 async function uploadPhotos(inputElement) {
   const fileList = Array.from(inputElement.files);
 
···
 
   const uploadPromises = fileList.map(async (file) => {
     try {
-      const dataUrl = await readFileAsDataURL(file);
+      const dataUrl = await Grain.readFileAsDataURL(file);
 
-      const resized = await doResize(dataUrl, {
+      const resized = await Grain.doResize(dataUrl, {
         width: 2000,
         height: 2000,
         maxSize: 1000 * 1000, // 1MB
         mode: "contain",
       });
 
-      const blob = dataURLToBlob(resized.path);
+      const blob = Grain.dataURLToBlob(resized.path);
 
       const fd = new FormData();
       fd.append("file", blob, file.name);
···
   inputElement.value = "";
 }
 
-function readFileAsDataURL(file) {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = () => resolve(reader.result);
-    reader.onerror = reject;
-    reader.readAsDataURL(file);
-  });
-}
-
-function dataURLToBlob(dataUrl) {
-  const [meta, base64] = dataUrl.split(",");
-  const mime = meta.match(/:(.*?);/)[1];
-  const binary = atob(base64);
-  const array = new Uint8Array(binary.length);
-  for (let i = 0; i < binary.length; i++) {
-    array[i] = binary.charCodeAt(i);
-  }
-  return new Blob([array], { type: mime });
-}
-
-function getDataUriSize(dataUri) {
-  const base64 = dataUri.split(",")[1];
-  return Math.ceil((base64.length * 3) / 4);
-}
-
-function createResizedImage(dataUri, options) {
-  return new Promise((resolve, reject) => {
-    const img = new Image();
-    img.onload = () => {
-      let scale = 1;
-      if (options.mode === "cover") {
-        scale = Math.max(
-          options.width / img.width,
-          options.height / img.height,
-        );
-      } else if (options.mode === "contain") {
-        scale = Math.min(
-          options.width / img.width,
-          options.height / img.height,
-        );
-      } else {
-        scale = 1; // stretch or fallback
-      }
-
-      const w = Math.round(img.width * scale);
-      const h = Math.round(img.height * scale);
-
-      const canvas = document.createElement("canvas");
-      canvas.width = w;
-      canvas.height = h;
-
-      const ctx = canvas.getContext("2d");
-      if (!ctx) return reject(new Error("Failed to get canvas context"));
-
-      ctx.fillStyle = "#fff";
-      ctx.fillRect(0, 0, w, h);
-      ctx.imageSmoothingEnabled = true;
-      ctx.imageSmoothingQuality = "high";
-      ctx.drawImage(img, 0, 0, w, h);
-
-      resolve({
-        dataUrl: canvas.toDataURL("image/jpeg", options.quality),
-        width: w,
-        height: h,
-      });
-    };
-    img.onerror = (e) => reject(e);
-    img.src = dataUri;
-  });
-}
-
-async function doResize(dataUri, opts) {
-  let bestResult = null;
-  let minQuality = 0;
-  let maxQuality = 101;
-
-  while (maxQuality - minQuality > 1) {
-    const quality = Math.round((minQuality + maxQuality) / 2);
-    const result = await createResizedImage(dataUri, {
-      width: opts.width,
-      height: opts.height,
-      quality: quality / 100,
-      mode: opts.mode,
-    });
-
-    const size = getDataUriSize(result.dataUrl);
-
-    if (size < opts.maxSize) {
-      minQuality = quality;
-      bestResult = result;
-    } else {
-      maxQuality = quality;
-    }
-  }
-
-  if (!bestResult) {
-    throw new Error("Failed to compress image");
-  }
-
-  return {
-    path: bestResult.dataUrl,
-    mime: "image/jpeg",
-    size: getDataUriSize(bestResult.dataUrl),
-    width: bestResult.width,
-    height: bestResult.height,
-  };
-}
+window.Grain = window.Grain || {};
+window.Grain.uploadPhotos = uploadPhotos;