add basic image block handling

app/[doc_id]/Blocks.tsx

···
 "use client";
 import { useEntity, useReplicache } from "../../replicache";
+import NextImage from "next/image";
 import { TextBlock } from "../../components/TextBlock";
 import { generateKeyBetween } from "fractional-indexing";
+import { supabaseBrowserClient } from "../../supabase/browserClient";
 export function AddBlock(props: { entityID: string }) {
   let rep = useReplicache();
   let blocks = useEntity(props.entityID, "card/block")?.sort((a, b) => {
···
   );
 }
 
+export function AddImageBlock(props: { entityID: string }) {
+  let rep = useReplicache();
+  let blocks = useEntity(props.entityID, "card/block")?.sort((a, b) => {
+    return a.data.position > b.data.position ? 1 : -1;
+  });
+  return (
+    <input
+      type="file"
+      accept="image/*"
+      onChange={async (e) => {
+        let file = e.currentTarget.files?.[0];
+        if (!file) return;
+        let client = supabaseBrowserClient();
+        let cache = await caches.open("minilink-user-assets");
+        let hash = await computeHash(file);
+        let url = client.storage.from("minilink-user-assets").getPublicUrl(hash)
+          .data.publicUrl;
+        let dimensions = await getImageDimensions(file);
+        await cache.put(
+          url,
+          new Response(file, {
+            headers: {
+              "Content-Type": file.type,
+              "Content-Length": file.size.toString(),
+            },
+          }),
+        );
+        let newBlockEntity = crypto.randomUUID();
+        await rep?.rep?.mutate.addBlock({
+          parent: props.entityID,
+          position: generateKeyBetween(null, blocks[0]?.data.position || null),
+          newEntityID: newBlockEntity,
+        });
+        await rep?.rep?.mutate.assertFact({
+          entity: newBlockEntity,
+          attribute: "block/image",
+          data: {
+            type: "image",
+            src: url,
+            height: dimensions.height,
+            width: dimensions.width,
+          },
+        });
+        await client.storage.from("minilink-user-assets").upload(hash, file);
+      }}
+    />
+  );
+}
+
+function getImageDimensions(
+  file: File,
+): Promise<{ width: number; height: number }> {
+  let url = URL.createObjectURL(file);
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = function () {
+      resolve({ width: img.width, height: img.height });
+      URL.revokeObjectURL(url);
+    };
+    img.onerror = reject;
+    img.src = url;
+  });
+}
+
+async function computeHash(data: File): Promise<string> {
+  let buffer = await data.arrayBuffer();
+  const buf = await crypto.subtle.digest("SHA-256", new Uint8Array(buffer));
+  return Array.from(new Uint8Array(buf), (b) =>
+    b.toString(16).padStart(2, "0"),
+  ).join("");
+}
+
 export function Blocks(props: { entityID: string }) {
   let blocks = useEntity(props.entityID, "card/block");
 
···
   previousBlock: { position: string; value: string } | null;
   nextPosition: string | null;
 }) {
+  let image = useEntity(props.entityID, "block/image");
+  if (image)
+    return (
+      <div className="border p-2 w-full">
+        <img
+          alt={""}
+          src={image.data.src}
+          height={image.data.height}
+          width={image.data.width}
+        />
+      </div>
+    );
   return (
     <div className="border p-2 w-full">
       <TextBlock {...props} />

app/[doc_id]/page.tsx

···
-import { createClient } from "@supabase/supabase-js";
 import { Fact, ReplicacheProvider } from "../../replicache";
 import { Database } from "../../supabase/database.types";
-import { AddBlock, Blocks } from "./Blocks";
+import { AddBlock, AddImageBlock, Blocks } from "./Blocks";
 import { Attributes } from "../../replicache/attributes";
+import { createServerClient } from "@supabase/ssr";
 
 export const preferredRegion = ["sfo1"];
 export const dynamic = "force-dynamic";
 
-let supabase = createClient<Database>(
+let supabase = createServerClient<Database>(
   process.env.NEXT_PUBLIC_SUPABASE_API_URL as string,
   process.env.SUPABASE_SERVICE_ROLE_KEY as string,
+  { cookies: {} },
 );
 export default async function DocumentPage(props: {
   params: { doc_id: string };
···
     <ReplicacheProvider name={props.params.doc_id} initialFacts={initialFacts}>
       <div className="text-blue-400">doc_id: {props.params.doc_id}</div>
       <AddBlock entityID={props.params.doc_id} />
+      <AddImageBlock entityID={props.params.doc_id} />
       <Blocks entityID={props.params.doc_id} />
     </ReplicacheProvider>
   );

app/layout.tsx

···
 import { InitialPageLoad } from "../components/InitialPageLoadProvider";
+import { ServiceWorker } from "../components/ServiceWorker";
 import "./globals.css";
 import localFont from "next/font/local";
 
···
   return (
     <html lang="en" className={`${quattro.variable}`}>
       <body>
+        <ServiceWorker />
         <InitialPageLoad>{children}</InitialPageLoad>
       </body>
     </html>

components/ServiceWorker.tsx

···
+"use client";
+import { useEffect } from "react";
+
+export function ServiceWorker() {
+  useEffect(() => {
+    if ("serviceWorker" in navigator) {
+      navigator.serviceWorker.register("/worker.js");
+    }
+  }, []);
+  return null;
+}

package-lock.json

···
         "@react-stately/color": "^3.6.0",
         "@spectrum-css/colorarea": "^5.1.0",
         "@spectrum-css/colorhandle": "^8.1.0",
+        "@supabase/ssr": "^0.3.0",
         "@supabase/supabase-js": "^2.43.2",
         "@vercel/kv": "^1.0.1",
         "base64-js": "^1.5.1",
···
         "ws": "^8.14.2"
       }
     },
+    "node_modules/@supabase/ssr": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@supabase/ssr/-/ssr-0.3.0.tgz",
+      "integrity": "sha512-lcVyQ7H6eumb2FB1Wa2N+jYWMfq6CFza3KapikT0fgttMQ+QvDgpNogx9jI8bZgKds+XFSMCojxFvFb+gwdbfA==",
+      "dependencies": {
+        "cookie": "^0.5.0",
+        "ramda": "^0.29.0"
+      },
+      "peerDependencies": {
+        "@supabase/supabase-js": "^2.33.1"
+      }
+    },
     "node_modules/@supabase/storage-js": {
       "version": "2.5.5",
       "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.5.5.tgz",
···
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
       "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
-      "dev": true,
       "engines": {
         "node": ">= 0.6"
       }
···
           "url": "https://feross.org/support"
         }
       ]
+    },
+    "node_modules/ramda": {
+      "version": "0.29.1",
+      "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.29.1.tgz",
+      "integrity": "sha512-OfxIeWzd4xdUNxlWhgFazxsA/nl3mS4/jGZI5n00uWOoSSFRhC1b6gl6xvmzUamgmqELraWp0J/qqVlXYPDPyA==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/ramda"
+      }
     },
     "node_modules/react": {
       "version": "18.3.1",

package.json

···
     "@react-stately/color": "^3.6.0",
     "@spectrum-css/colorarea": "^5.1.0",
     "@spectrum-css/colorhandle": "^8.1.0",
+    "@supabase/ssr": "^0.3.0",
     "@supabase/supabase-js": "^2.43.2",
     "@vercel/kv": "^1.0.1",
     "base64-js": "^1.5.1",

public/worker.js

···
+self.addEventListener("fetch", (event) => {
+  console.log("Handling fetch event for", event.request.url);
+
+  event.respondWith(
+    caches.open("minilink-user-assets").then(async (cache) => {
+      return cache
+        .match(event.request)
+        .then((response) => {
+          if (response) {
+            return response;
+          }
+          return fetch(event.request.clone());
+        })
+        .catch((error) => {
+          throw error;
+        });
+    }),
+  );
+});

replicache/attributes.ts

···
     type: "text",
     cardinality: "one",
   },
+  "block/image": {
+    type: "image",
+    cardinality: "one",
+  },
   "block/card": {
     type: "reference",
     cardinality: "one",

replicache/index.tsx

···
 import { mutations } from "./mutations";
 import { Attributes } from "./attributes";
 import { Push } from "./push";
-import { createClient } from "@supabase/supabase-js";
-import { Database } from "../supabase/database.types";
 import { clientMutationContext } from "./clientMutationContext";
+import { supabaseBrowserClient } from "../supabase/browserClient";
 
 export type Fact<A extends keyof typeof Attributes> = {
   id: string;
···
     position: string;
     value: string;
   };
+  image: { type: "image"; src: string; height: number; width: number };
   reference: { type: "reference"; value: string };
 }[(typeof Attributes)[A]["type"]];
 
···
 }) {
   let [rep, setRep] = useState<null | Replicache<ReplicacheMutators>>(null);
   useEffect(() => {
-    let supabase = createClient<Database>(
-      process.env.NEXT_PUBLIC_SUPABASE_API_URL as string,
-      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY as string,
-    );
+    let supabase = supabaseBrowserClient();
     let newRep = new Replicache({
       pushDelay: 500,
       mutators: Object.fromEntries(

supabase/browserClient.ts

···
+import { createBrowserClient } from "@supabase/ssr";
+import { Database } from "./database.types";
+
+export function supabaseBrowserClient() {
+  return createBrowserClient<Database>(
+    process.env.NEXT_PUBLIC_SUPABASE_API_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+  );
+}