merged in main, moved the domain settings to a modal

CLAUDE.md

···
 - **Appview** (`appview/`) consumes the firehose to index published content
 - **Feeds** (`feeds/`) provides subscription feeds for publications
 
+### Lexicon Workflow
+
+The source of truth for lexicon schemas is the TypeScript files in `lexicons/src/` (e.g. `facet.ts`, `publication.ts`, `blocks.ts`). The JSON files in `lexicons/pub/` are **generated output** — do not edit them directly, as `npm run lexgen` will overwrite them.
+
+To add or modify a lexicon:
+1. Edit the relevant source file in `lexicons/src/`
+2. Run `npm run lexgen` to regenerate both the JSON schemas and the TypeScript API types in `lexicons/api/`
+
 ### Key Directories
 
 - `app/` - Next.js App Router pages and API routes
···
 - **Replicache mutations**: Named handlers in `src/replicache/mutations.ts`, keep server mutations idempotent
 - **React contexts**: `DocumentProvider`, `LeafletContentProvider` for page-level data
 - **Inngest functions**: Async jobs in `app/api/inngest/functions/`
+- **Icons**: Icon components live in `components/Icons/`. Each icon is a named export in its own file (e.g. `RefreshSmall.tsx`), imports `Props` from `./Props`, spreads `{...props}` on the `<svg>` element, and uses `fill="currentColor"` instead of hardcoded colors like `fill="black"`.

app/[leaflet_id]/actions/HelpButton.tsx

···
         <HelpLink text="💡 Make with Leaflet" url="https://make.leaflet.pub" />
         <HelpLink
           text="✨ Explore Publications"
-          url="https://leaflet.pub/discover"
+          url="https://leaflet.pub/reader"
         />
         <HelpLink text="📣 Newsletter" url="https://buttondown.com/leaflet" />
         {/* contact links */}

app/[leaflet_id]/actions/PublishButton.tsx

···
         <ActionButton
           primary
           icon={<PublishSmall className="shrink-0" />}
-          label={"Publish on ATP"}
+          label={"Publish"}
         />
       }
     >

app/[leaflet_id]/actions/ShareOptions/DomainOptions.tsx

···
       );
     case "domain-settings":
       return (
-        <div className="px-3 py-1 max-w-full w-[600px]">
+        <div className="">
           <DomainSettingsView
             domain={state.domain}
             onBack={() => setState({ state: "default" })}
···
       );
     case "add-domain":
       return (
-        <div className="px-3 py-1 max-w-full w-[600px]">
-          <AddDomainForm
-            onDomainAdded={(domain) =>
-              setState({ state: "domain-settings", domain })
-            }
-            onBack={() => setState({ state: "default" })}
-          />
-        </div>
+        <AddDomainForm
+          onDomainAdded={(domain) =>
+            setState({ state: "domain-settings", domain })
+          }
+          onBack={() => setState({ state: "default" })}
+        />
       );
   }
 }
···
     let route = "/" + selectedRoute;
     return domain.custom_domain_routes.some(
       (r) =>
-        r.route === route &&
-        r.edit_permission_token !== permission_token.id,
+        r.route === route && r.edit_permission_token !== permission_token.id,
     );
   })();
 
···
                       (dd) => dd.domain === domain.domain,
                     );
                     if (d) {
-                      d.custom_domain_routes =
-                        d.custom_domain_routes.filter(
-                          (r) => r.id !== routeId,
-                        );
+                      d.custom_domain_routes = d.custom_domain_routes.filter(
+                        (r) => r.id !== routeId,
+                      );
                     }
                   });
                   mutateDomains();

app/lish/Subscribe.tsx

···
     <Dialog.Root open={open} onOpenChange={setOpen}>
       <Dialog.Trigger asChild></Dialog.Trigger>
       <Dialog.Portal>
-        <Dialog.Overlay className="fixed inset-0 bg-primary data-[state=open]:animate-overlayShow opacity-10 blur-xs" />
+        <Dialog.Overlay className="fixed z-[100] inset-0 bg-primary data-[state=open]:animate-overlayShow opacity-10 blur-xs" />
         <Dialog.Content
           className={`
-      z-20 opaque-container
+      z-[100] opaque-container
       fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2
       w-96 px-3 py-4
       max-w-(--radix-popover-content-available-width)

app/lish/[did]/[publication]/UpgradeModal.tsx

···
             >
               {loading ? <DotLoader /> : "Get it!"}
             </ButtonPrimary>
-            {error && (
-              <div className="text-sm text-red-500 mt-2">{error}</div>
-            )}
+            {error && <div className="text-sm text-red-500 mt-2">{error}</div>}
           </div>
         </div>
       </div>
···
     </Modal>
   );
 };
+
+export const InlineUpgrade = () => {
+  return (
+    <div className="text-center p-2 accent-container text-secondary">
+      <UpgradeModal
+        asChild
+        trigger={
+          <ButtonPrimary compact fullWidth className="text-sm">
+            Upgrade to Leaflet Pro!
+          </ButtonPrimary>
+        }
+      />
+      <div className="text-sm leading-snug text-tertiary pt-1">
+        Analytics for all your pubs! <br /> Emails and membership coming soon.
+      </div>
+    </div>
+  );
+};

app/lish/[did]/[publication]/[rkey]/PostContent.tsx

···
 import { PollData } from "./fetchPollData";
 import { ButtonPrimary } from "components/Buttons";
 import { blockTextSize } from "src/utils/blockTextSize";
+import { slugify } from "src/utils/slugify";
 import { PostNotAvailable } from "components/Blocks/BlueskyPostBlock/BlueskyEmbed";
 
 export function PostContent({
···
       );
 
     case PubLeafletBlocksHeader.isMain(b.block): {
+      let slug = slugify(b.block.plaintext);
+      let headingProps = {
+        ...blockProps,
+        id: preview ? undefined : slug || blockProps.id,
+      };
+      let textBlockProps = {
+        ...b.block,
+        index,
+        preview,
+        pageId,
+        footnoteIndexMap,
+      };
+      let href = pageId ? `?page=${pageId}#${slug}` : `#${slug}`;
+      let link = (children: React.ReactNode) =>
+        preview || !slug ? (
+          children
+        ) : (
+          <a href={href} className="no-underline text-inherit cursor-pointer">
+            {children}
+          </a>
+        );
       if (b.block.level === 1)
         return (
-          <h1 className={`h1Block ${className}`} {...blockProps} style={{ ...blockProps.style, fontSize: blockTextSize.h1 }}>
-            <TextBlock
-              {...b.block}
-              index={index}
-              preview={preview}
-              pageId={pageId}
-            />
+          <h1 className={`h1Block ${className}`} {...headingProps} style={{ ...headingProps.style, fontSize: blockTextSize.h1 }}>
+            {link(<TextBlock {...textBlockProps} />)}
           </h1>
         );
       if (b.block.level === 2)
         return (
-          <h2 className={`h2Block ${className}`} {...blockProps} style={{ ...blockProps.style, fontSize: blockTextSize.h2 }}>
-            <TextBlock
-              {...b.block}
-              index={index}
-              preview={preview}
-              pageId={pageId}
-              footnoteIndexMap={footnoteIndexMap}
-            />
+          <h2 className={`h2Block ${className}`} {...headingProps} style={{ ...headingProps.style, fontSize: blockTextSize.h2 }}>
+            {link(<TextBlock {...textBlockProps} />)}
           </h2>
         );
       if (b.block.level === 3)
         return (
-          <h3 className={`h3Block ${className}`} {...blockProps} style={{ ...blockProps.style, fontSize: blockTextSize.h3 }}>
-            <TextBlock
-              {...b.block}
-              index={index}
-              preview={preview}
-              pageId={pageId}
-              footnoteIndexMap={footnoteIndexMap}
-            />
+          <h3 className={`h3Block ${className}`} {...headingProps} style={{ ...headingProps.style, fontSize: blockTextSize.h3 }}>
+            {link(<TextBlock {...textBlockProps} />)}
           </h3>
         );
-      // if (b.block.level === 4) return <h4>{b.block.plaintext}</h4>;
-      // if (b.block.level === 5) return <h5>{b.block.plaintext}</h5>;
       return (
-        <h6 className={`h6Block ${className}`} {...blockProps} style={{ ...blockProps.style, fontSize: blockTextSize.h4 }}>
-          <TextBlock
-            {...b.block}
-            index={index}
-            preview={preview}
-            pageId={pageId}
-            footnoteIndexMap={footnoteIndexMap}
-          />
+        <h6 className={`h6Block ${className}`} {...headingProps} style={{ ...headingProps.style, fontSize: blockTextSize.h4 }}>
+          {link(<TextBlock {...textBlockProps} />)}
         </h6>
       );
     }
···
       ))}
     </ul>
   ) : null;
-  let orderedChildren =
-    props.item.orderedListChildren?.children?.length ? (
-      <ol className="-ml-[7px] sm:ml-[7px]">
-        {props.item.orderedListChildren.children.map((child, index) => (
-          <OrderedListItem
-            pages={props.pages}
-            pollData={props.pollData}
-            bskyPostData={props.bskyPostData}
-            index={[...props.index, index]}
-            item={child}
-            did={props.did}
-            key={index}
-            className={props.className}
-            pageId={props.pageId}
-            startIndex={props.item.orderedListChildren?.startIndex}
-          />
-        ))}
-      </ol>
-    ) : null;
+  let orderedChildren = props.item.orderedListChildren?.children?.length ? (
+    <ol className="-ml-[7px] sm:ml-[7px]">
+      {props.item.orderedListChildren.children.map((child, index) => (
+        <OrderedListItem
+          pages={props.pages}
+          pollData={props.pollData}
+          bskyPostData={props.bskyPostData}
+          index={[...props.index, index]}
+          item={child}
+          did={props.did}
+          key={index}
+          className={props.className}
+          pageId={props.pageId}
+          startIndex={props.item.orderedListChildren?.startIndex}
+        />
+      ))}
+    </ol>
+  ) : null;
   return (
     <li className={`pb-0! flex flex-row gap-2`}>
       <div
···
   pageId?: string;
   startIndex?: number;
 }) {
-  const calculatedIndex = (props.startIndex || 1) + props.index[props.index.length - 1];
+  const calculatedIndex =
+    (props.startIndex || 1) + props.index[props.index.length - 1];
   let children = props.item.children?.length ? (
     <ol className="-ml-[7px] sm:ml-[7px]">
       {props.item.children.map((child, index) => (
···
       ))}
     </ol>
   ) : null;
-  let unorderedChildren =
-    props.item.unorderedListChildren?.children?.length ? (
-      <ul className="-ml-[7px] sm:ml-[7px]">
-        {props.item.unorderedListChildren.children.map((child, index) => (
-          <ListItem
-            pages={props.pages}
-            pollData={props.pollData}
-            bskyPostData={props.bskyPostData}
-            index={[...props.index, index]}
-            item={child}
-            did={props.did}
-            key={index}
-            className={props.className}
-            pageId={props.pageId}
-          />
-        ))}
-      </ul>
-    ) : null;
+  let unorderedChildren = props.item.unorderedListChildren?.children?.length ? (
+    <ul className="-ml-[7px] sm:ml-[7px]">
+      {props.item.unorderedListChildren.children.map((child, index) => (
+        <ListItem
+          pages={props.pages}
+          pollData={props.pollData}
+          bskyPostData={props.bskyPostData}
+          index={[...props.index, index]}
+          item={child}
+          did={props.did}
+          key={index}
+          className={props.className}
+          pageId={props.pageId}
+        />
+      ))}
+    </ul>
+  ) : null;
   return (
     <li className={`pb-0! flex flex-row gap-2`}>
-      <div className="listMarker shrink-0 mx-2 z-1 mt-[14px]">
+      <div className="listMarker shrink-0 mx-2 z-1 mt-[4px]">
         {calculatedIndex}.
       </div>
       <div className="flex flex-col w-full">

app/lish/[did]/[publication]/dashboard/Actions.tsx

···
   return (
     <>
       <NewDraftActionButton publication={props.publication} />
-      {canSeePro && !isPro && <MobileUpgrade />}
-
       <PublicationShareButton />
       <PublicationSettingsButton publication={props.publication} />
     </>
···
     </Menu>
   );
 }
-
-const MobileUpgrade = () => {
-  return (
-    <UpgradeModal
-      asChild
-      trigger={
-        <ActionButton
-          label="Upgrade to Leaflet Pro"
-          icon={<LeafletPro />}
-          className={`sm:hidden block bg-[var(--accent-light)]!`}
-          style={{ backgroundColor: "var(--accent-light) important!" }}
-        />
-      }
-    />
-  );
-};

app/lish/[did]/[publication]/dashboard/PublicationAnalytics.tsx

···
   if (!isPro)
     return (
       <div
-        className={`sm:mx-auto pt-4 s rounded-lg border ${
+        className={`sm:mx-auto mt-2 sm:mt-4 rounded-lg border ${
           props.showPageBackground
-            ? "border-border-light p-2"
+            ? "border-border-light p-3"
             : "border-transparent"
         }`}
         style={{
···
             </>
           )}
         </div>
-        <TrafficChart data={filledTraffic} isLoading={analyticsLoading} metric={trafficMetric} />
+        <TrafficChart
+          data={filledTraffic}
+          isLoading={analyticsLoading}
+          metric={trafficMetric}
+        />
         <div className="flex flex-col sm:flex-row gap-4 mt-2">
           <TopPages
             pages={analyticsData?.topPages || []}
···
                   <div className="text-tertiary">
                     {formatDayTick(String(label))}
                   </div>
-                  <div>{Number(pageviews).toLocaleString()} {metricLabel}</div>
+                  <div>
+                    {Number(pageviews).toLocaleString()} {metricLabel}
+                  </div>
                 </div>
               );
             }}

app/lish/[did]/[publication]/dashboard/PublicationSubscribers.tsx

···
   if (subscribers.length === 0)
     return (
       <div
-        className={`italic text-tertiary  flex flex-col gap-0 text-center justify-center mt-4 border rounded-md ${props.showPageBackground ? "border-border-light p-2" : "border-transparent"}`}
+        className={`italic text-tertiary  flex flex-col gap-0 text-center justify-center py-4 border rounded-md ${props.showPageBackground ? "border-border-light p-2" : "border-transparent"}`}
         style={
           props.showPageBackground
             ? {

app/lish/[did]/[publication]/dashboard/settings/ManageProSubscription.tsx

···
 import { GoBackSmall } from "components/Icons/GoBackSmall";
 import { PRODUCT_DEFINITION } from "stripe/products";
 
-export const ManageProSubscription = (props: { backToMenu: () => void }) => {
+export const ManageProSubscription = (props: {}) => {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const { identity } = useIdentityData();
···
     <div>
       <div className="flex justify-between font-bold text-secondary bg-border-light -mx-3 -mt-2 px-3 py-2 mb-1 flex-shrink-0">
         Manage Subscription
-        <button type="button" onClick={props.backToMenu}>
-          <GoBackSmall className="text-accent-contrast" />
-        </button>
       </div>
       <div className="text-secondary text-center flex flex-col justify-center gap-2 py-2">
         <div>

app/lish/createPub/CreatePubForm.tsx

···
         <div className=" pt-0.5 flex flex-col text-sm text-tertiary  ">
           <p className="font-bold italic">Show In Discover</p>
           <p className="text-sm text-tertiary font-normal">
-            Your posts will appear on our{" "}
-            <a href="/discover" target="_blank">
-              Discover
-            </a>{" "}
-            page. You can change this at any time!
+            Your posts will appear in{" "}
+            <a href="/reader" target="_blank">
+              Leaflet Reader
+            </a>
+            . You can change this at any time!
           </p>
         </div>
       </Checkbox>

app/lish/createPub/UpdatePubForm.tsx

···
           onToggle={() => setShowInDiscover(!showInDiscover)}
         >
           <div className=" pt-0.5 flex flex-col  text-sm text-tertiary ">
-            <p className="font-bold">
-              Show In{" "}
-              <a href="/discover" target="_blank">
-                Discover
+            <p className="font-bold italic">Show In Discover</p>
+            <p className="text-xs text-tertiary font-normal">
+              Your posts will appear in{" "}
+              <a href="/reader" target="_blank">
+                Leaflet Reader
               </a>
-            </p>
-            <p className="text-xs text-tertiary font-normal">
-              Your posts will appear on our{" "}
-              <a href="/discover" target="_blank">
-                Discover
-              </a>{" "}
-              page. You can change this at any time!
+              . You can change this at any time!
             </p>
           </div>
         </Toggle>

components/ActionBar/ProfileButton.tsx

···
 import { mutate } from "swr";
 import { SpeedyLink } from "components/SpeedyLink";
 import { Popover } from "components/Popover";
-import { ArrowRightTiny } from "components/Icons/ArrowRightTiny";
 import { Modal } from "components/Modal";
-import { UpgradeContent } from "app/lish/[did]/[publication]/UpgradeModal";
+import { InlineUpgrade } from "app/lish/[did]/[publication]/UpgradeModal";
 import { ManageProSubscription } from "app/lish/[did]/[publication]/dashboard/settings/ManageProSubscription";
 import { ManageDomains } from "components/Domains/ManageDomains";
 import { WebSmall } from "components/Icons/WebSmall";
 import { useIsPro, useCanSeePro } from "src/hooks/useEntitlement";
-import { useState } from "react";
+import { LeafletPro } from "components/Icons/LeafletPro";
+import { ButtonPrimary } from "components/Buttons";
 
 export const ProfileButton = () => {
   let { identity } = useIdentityData();
   let { data: record } = useRecordFromDid(identity?.atp_did);
   let isMobile = useIsMobile();
-  let [state, setState] = useState<
-    "menu" | "manage-subscription" | "manage-domains"
-  >("menu");
   let isPro = useIsPro();
   let canSeePro = useCanSeePro();
 
···
       asChild
       side={isMobile ? "top" : "right"}
       align={isMobile ? "center" : "start"}
-      onOpenChange={() => setState("menu")}
-      className="w-xs"
+      className="w-xs py-1!"
       trigger={
         <ActionButton
           nav
···
         />
       }
     >
-      {state === "manage-subscription" ? (
-        <ManageProSubscription backToMenu={() => setState("menu")} />
-      ) : state === "manage-domains" ? (
-        <ManageDomains backToMenu={() => setState("menu")} />
-      ) : (
-        <div className="flex flex-col gap-0.5">
-          {record && (
-            <>
-              <SpeedyLink
-                className="no-underline!"
-                href={`/p/${record.handle}`}
-              >
-                <button
-                  type="button"
-                  className="menuItem -mx-[8px] text-left flex items-center justify-between hover:no-underline! w-full"
-                >
-                  View Profile
-                </button>
-              </SpeedyLink>
+      <div className="flex flex-col gap-0.5">
+        {record && (
+          <>
+            <SpeedyLink
+              className="no-underline! menuItem -mx-[8px]"
+              href={`/p/${record.handle}`}
+            >
+              <button type="button" className="flex gap-2 ">
+                <AccountSmall />
+                View Profile
+              </button>
+            </SpeedyLink>
+          </>
+        )}
+
+        <ManageDomains />
+        <hr className="border-border-light border-dashed" />
 
-              <hr className="border-border-light border-dashed" />
-            </>
-          )}
-          {canSeePro && (
-            <>
-              {!isPro ? (
-                <Modal
-                  trigger={
-                    <div className="menuItem -mx-[8px] text-left flex items-center justify-between hover:no-underline! bg-[var(--accent-light)]! border border-transparent hover:border-accent-contrast">
-                      Get Leaflet Pro
-                      <ArrowRightTiny />
-                    </div>
-                  }
-                >
-                  <UpgradeContent />
-                </Modal>
-              ) : (
-                <button
-                  className="menuItem -mx-[8px] text-left flex items-center justify-between hover:no-underline!"
-                  type="button"
-                  onClick={() => setState("manage-subscription")}
-                >
+        {canSeePro && isPro && (
+          <>
+            <Modal
+              trigger={
+                <div className="menuItem -mx-[8px] ">
+                  <LeafletPro />
                   Manage Pro Subscription
-                  <ArrowRightTiny />
-                </button>
-              )}
-
-              <hr className="border-border-light border-dashed" />
-            </>
-          )}
-
-          <button
-            className="menuItem -mx-[8px] text-left flex items-center gap-2 hover:no-underline!"
-            type="button"
-            onClick={() => setState("manage-domains")}
-          >
-            <WebSmall />
-            Connected Domains
-          </button>
-
-          <hr className="border-border-light border-dashed" />
-
-          <button
-            type="button"
-            className="menuItem -mx-[8px] text-left flex items-center gap-2 hover:no-underline!"
-            onClick={async () => {
-              await fetch("/api/auth/logout");
-              mutate("identity", null);
-            }}
-          >
-            <LogoutSmall />
-            Log Out
-          </button>
-        </div>
-      )}
+                </div>
+              }
+            >
+              <ManageProSubscription />
+            </Modal>
+            <hr className="border-border-light border-dashed" />
+          </>
+        )}
+        <button
+          type="button"
+          className="menuItem -mx-[8px] text-left flex items-center gap-2 hover:no-underline!"
+          onClick={async () => {
+            await fetch("/api/auth/logout");
+            mutate("identity", null);
+          }}
+        >
+          <LogoutSmall />
+          Log Out
+        </button>
+        {canSeePro && !isPro && (
+          <>
+            {" "}
+            <hr className="border-border-light border-dashed" />
+            <div className="py-2">
+              <InlineUpgrade />
+            </div>
+          </>
+        )}
+      </div>
     </Popover>
   );
 };

components/Buttons.tsx

···
         ${fullWidth ? "w-full" : fullWidthOnMobile ? "w-full sm:w-max" : "w-max"}
         ${compact ? "py-0 px-1" : "px-2 py-0.5 "}
         bg-accent-1 disabled:bg-border-light
-        border border-accent-1 rounded-md disabled:border-border-light
+        border border-accent-1 rounded-md disabled:border-border-light disabled:outline-none! disabled:cursor-not-allowed!
         outline-2 outline-transparent outline-offset-1 focus:outline-accent-1 hover:outline-accent-1
         text-base font-bold text-accent-2 disabled:text-border disabled:hover:text-border
         flex gap-2 items-center justify-center shrink-0
···
         ${compact ? "py-0 px-1" : "px-2 py-0.5 "}
         bg-bg-page disabled:bg-border-light
         border border-accent-contrast rounded-md
-        outline-2 outline-transparent focus:outline-accent-contrast hover:outline-accent-contrast outline-offset-1
+        outline-2 outline-transparent focus:outline-accent-contrast hover:outline-accent-contrast outline-offset-1 disabled:outline-none! disabled:cursor-not-allowed!
         text-base font-bold text-accent-contrast disabled:text-border disabled:hover:text-border
         flex gap-2 items-center justify-center shrink-0
         ${props.className}
···
         ${compact ? "py-0 px-1" : "px-2 py-0.5 "}
          bg-transparent hover:bg-[var(--accent-light)]
          border border-transparent rounded-md hover:border-[var(--accent-light)]
-         outline-2 outline-transparent focus:outline-[var(--accent-light)] hover:outline-[var(--accent-light)] outline-offset-1
+         outline-2 outline-transparent focus:outline-[var(--accent-light)] hover:outline-[var(--accent-light)] outline-offset-1  disabled:outline-none! disabled:cursor-not-allowed!
          text-base font-bold text-accent-contrast disabled:text-border
          flex gap-2 items-center justify-center shrink-0
          ${props.className}

components/Domains/AddDomainForm.tsx

···
 
   return (
     <div className="flex flex-col gap-1 max-w-full">
-      <div>
-        <h3 className="text-secondary">Add a New Domain</h3>
-        <div className="text-xs italic text-secondary">
-          Don&apos;t include the protocol or path, just the base domain name
-        </div>
+      <h3>Add a Domain</h3>
+      <div className="text-sm text-secondary">
+        <div className="font-bold">Just include the base domain</div>
+        Don't include the protocol{" "}
+        <span className="text-tertiary">(like https://) </span>
+        or path <span className="text-tertiary">(you can add that later)</span>
       </div>
 
       <Input

components/Domains/DomainList.tsx

···
 
 export function DomainList(props: {
   onSelectDomain: (domain: string) => void;
-  onAddDomain: () => void;
   filter?: (domain: CustomDomain) => boolean;
 }) {
   let { identity } = useIdentityData();
···
           </div>
         </>
       )}
-      <button
-        onMouseDown={() => props.onAddDomain()}
-        className="text-accent-contrast font-bold text-sm flex gap-2 items-center px-1 py-0.5"
-        type="button"
-      >
-        <AddTiny /> Add a New Domain
-      </button>
     </div>
   );
 }

components/Domains/DomainSettingsView.tsx

···
   useIdentityData,
   mutateIdentityData,
 } from "components/IdentityProvider";
-import { ButtonPrimary } from "components/Buttons";
+import { ButtonPrimary, ButtonTertiary } from "components/Buttons";
 import { getDomainAssignment } from "./domainAssignment";
+import { RefreshSmall } from "components/Icons/RefreshSmall";
+import { GoToArrow } from "components/Icons/GoToArrow";
 
 export function DomainSettingsView(props: {
   domain: string;
···
 
   return (
     <div className="flex flex-col gap-[6px] text-sm text-primary max-w-full">
-      <h3 className="text-secondary">{props.domain}</h3>
+      <div className="w-full flex gap-2 items-center">
+        <h3 className="w-full grow min-w-0 truncate">
+          {needsSetup ? `Verify ${props.domain}` : props.domain}
+        </h3>
+        <button
+          className="text-accent-contrast rotate-180 shrink-0"
+          onMouseDown={() => props.onBack()}
+          type="button"
+        >
+          <GoToArrow />
+        </button>
+        {needsSetup && <VerifyButton verify={() => mutateDomainStatus()} />}
+      </div>
 
       {needsSetup ? (
         <>
···
             To verify this domain, add the following record to your DNS provider
             for <strong>{props.domain}</strong>.
           </div>
-          <table className="border border-border-light rounded-md">
+          <table className="border border-border-light rounded-md text-left ">
             <thead>
               <tr>
-                <th className="p-1 py-1 text-tertiary">Type</th>
-                <th className="p-1 py-1 text-tertiary">Name</th>
-                <th className="p-1 py-1 text-tertiary">Value</th>
+                <th className="px-2 pt-1 text-tertiary">Type</th>
+                <th className="px-2 pt-1  text-tertiary">Name</th>
+                <th className="px-2 pt-1 text-tertiary">Value</th>
               </tr>
             </thead>
             <tbody>
               {data?.verification && (
                 <tr>
-                  <td className="p-1 py-1">
+                  <td className="px-2 pb-1">
                     <div>{data.verification[0].type}</div>
                   </td>
-                  <td className="p-1 py-1">
+                  <td className="px-2  pb-1">
                     <div style={{ wordBreak: "break-word" }}>
                       {data.verification[0].domain}
                     </div>
                   </td>
-                  <td className="p-1 py-1">
+                  <td className="px-2 pb-1">
                     <div style={{ wordBreak: "break-word" }}>
                       {data.verification[0].value}
                     </div>
···
               {data?.config &&
                 (isSubdomain ? (
                   <tr>
-                    <td className="p-1 py-1">
+                    <td className="px-2 pb-1">
                       <div>CNAME</div>
                     </td>
-                    <td className="p-1 py-1">
+                    <td className="px-2 pb-1">
                       <div style={{ wordBreak: "break-word" }}>
                         {props.domain.split(".").slice(0, -2).join(".")}
                       </div>
                     </td>
-                    <td className="p-1 py-1">
+                    <td className="px-2 pb-1">
                       <div style={{ wordBreak: "break-word" }}>
                         {
                           data.config.recommendedCNAME.sort(
···
                   </tr>
                 ) : (
                   <tr>
-                    <td className="p-1 py-1">
+                    <td className="px-2 pb-1">
                       <div>A</div>
                     </td>
-                    <td className="p-1 py-1">
+                    <td className="px-2 pb-1">
                       <div style={{ wordBreak: "break-word" }}>@</div>
                     </td>
-                    <td className="p-1 py-1">
+                    <td className="px-2 pb-1">
                       <div style={{ wordBreak: "break-word" }}>
                         {
                           data.config.recommendedIPv4.sort(
···
       )}
 
       <div className="flex flex-col gap-2 mt-2">
-        <div className="flex gap-3 justify-between items-center">
-          <button
-            className="text-accent-contrast"
-            onMouseDown={() => props.onBack()}
-            type="button"
-          >
-            Back
-          </button>
-          <div className="flex gap-2 items-center">
-            {needsSetup && (
-              <VerifyButton verify={() => mutateDomainStatus()} />
-            )}
-          </div>
-        </div>
-
         <hr className="border-border-light" />
 
         <DeleteDomainButton
···
 
   if (!confirming) {
     return (
-      <div className="flex gap-3 justify-between items-center">
-        <button
-          className="text-accent-contrast font-bold text-sm"
-          type="button"
-          onMouseDown={() => setConfirming(true)}
-        >
-          Delete Domain
-        </button>
-      </div>
+      <ButtonTertiary
+        fullWidth
+        compact
+        type="button"
+        onMouseDown={() => setConfirming(true)}
+      >
+        Delete Domain
+      </ButtonTertiary>
     );
   }
 
   return (
-    <div className="flex flex-col gap-1 text-xs">
-      <p className="text-secondary">
+    <div className="flex flex-col gap-1 text-sm accent-container rounded-md p-2">
+      <p className="text-secondary text-center">
         Are you sure you want to delete <strong>{props.domain}</strong>? This
         will remove all assignments and cannot be undone.
       </p>
-      <div className="flex gap-2 justify-end">
+      <div className="flex gap-2 justify-center">
         <button
-          className="text-accent-contrast"
+          className="text-accent-contrast font-bold"
           onMouseDown={() => setConfirming(false)}
           type="button"
         >
···
         </button>
         <ButtonPrimary
           compact
+          className="text-sm"
           disabled={loading}
           onMouseDown={async () => {
             setLoading(true);
···
 function VerifyButton(props: { verify: () => Promise<any> }) {
   let [loading, setLoading] = useState(false);
   return (
-    <button
-      className="text-accent-contrast w-fit"
+    <ButtonPrimary
+      compact
+      className="w-[118px]!"
       type="button"
       onClick={async (e) => {
         e.preventDefault();
···
         setLoading(false);
       }}
     >
-      {loading ? <DotLoader /> : "verify"}
-    </button>
+      {loading ? <DotLoader /> : "Check Status"}
+    </ButtonPrimary>
   );
 }

components/Domains/ManageDomains.tsx

···
 "use client";
 import { useState } from "react";
-import { GoBackSmall } from "components/Icons/GoBackSmall";
 import { DomainList } from "./DomainList";
 import { AddDomainForm } from "./AddDomainForm";
 import { DomainSettingsView } from "./DomainSettingsView";
-import { GoToArrow } from "components/Icons/GoToArrow";
+import { Modal } from "components/Modal";
+import { ButtonPrimary } from "components/Buttons";
+import { WebSmall } from "components/Icons/WebSmall";
 
 type State =
   | "list"
   | "add-domain"
   | { type: "domain-settings"; domain: string };
 
-export function ManageDomains(props: { backToMenu: () => void }) {
+export function ManageDomains() {
   let [state, setState] = useState<State>("list");
-
-  if (state === "add-domain") {
-    return (
-      <div className="px-3 py-1">
+  return (
+    <Modal
+      className="w-md"
+      trigger={
+        <div className="menuItem -mx-[8px] ">
+          <WebSmall />
+          Domain Settings
+        </div>
+      }
+    >
+      {state === "add-domain" ? (
         <AddDomainForm
           onDomainAdded={(domain) =>
             setState({ type: "domain-settings", domain })
           }
           onBack={() => setState("list")}
         />
-      </div>
-    );
-  }
-
-  if (typeof state === "object" && state.type === "domain-settings") {
-    return (
-      <div className="px-3 py-1">
+      ) : typeof state === "object" && state.type === "domain-settings" ? (
         <DomainSettingsView
           domain={state.domain}
           onBack={() => setState("list")}
           onRemoveAssignment={() => setState("list")}
           onDeleteDomain={() => setState("list")}
         />
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex flex-col gap-2 px-3 pt-1 pb-3">
-      <div className="flex justify-between">
-        <h4>Connected Domains</h4>
-        <button
-          className="text-accent-contrast rotate-180"
-          onClick={props.backToMenu}
-          type="button"
-        >
-          <GoToArrow />
-        </button>
-      </div>
-      <hr className="border-border-light -mx-3" />
-      <DomainList
-        onSelectDomain={(domain) =>
-          setState({ type: "domain-settings", domain })
-        }
-        onAddDomain={() => setState("add-domain")}
-      />
-    </div>
+      ) : (
+        <div className="flex flex-col gap-2">
+          <div className="flex justify-between">
+            <h3>Domains</h3>
+            <ButtonPrimary onClick={() => setState("add-domain")}>
+              Add
+            </ButtonPrimary>
+          </div>
+          <DomainList
+            onSelectDomain={(domain) =>
+              setState({ type: "domain-settings", domain })
+            }
+          />
+        </div>
+      )}
+    </Modal>
   );
 }

components/Icons/RefreshSmall.tsx

···
+import { Props } from "./Props";
+
+export const RefreshSmall = (props: Props) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M8.98383 20.9565C8.45201 20.8077 8.14158 20.2559 8.29033 19.724C8.43933 19.1925 8.99108 18.8818 9.52276 19.0305C11.3292 19.5357 13.9867 19.6991 15.9397 18.6274C17.5194 17.7603 18.5445 16.0553 18.6533 14.2845C18.7528 12.664 18.0857 10.9792 16.2923 9.83579L16.8257 12.498C16.934 13.0394 16.5828 13.5663 16.0414 13.6748C15.5001 13.7829 14.9731 13.4318 14.8647 12.8905L13.8381 7.7627C13.7299 7.22145 14.0812 6.69455 14.6223 6.58595L19.7501 5.55932C20.2915 5.45099 20.8182 5.80243 20.9269 6.3436C21.0353 6.88515 20.6841 7.41197 20.1426 7.52035L17.2772 8.09442C19.7665 9.63761 20.7945 12.0545 20.65 14.4071C20.5014 16.8268 19.1147 19.1667 16.9025 20.381C14.292 21.8136 11.0224 21.5265 8.98383 20.9565ZM3.85412 17.468C3.30272 17.4971 2.83216 17.0736 2.80287 16.5222C2.774 15.9709 3.19731 15.5001 3.74868 15.471L6.36991 15.3333C4.0138 13.7866 3.04124 11.4299 3.18206 9.13602C3.33085 6.71632 4.71736 4.37626 6.92959 3.1621C9.54014 1.72942 12.8097 2.0165 14.8483 2.5866C15.38 2.73536 15.6903 3.28729 15.5418 3.81903C15.3928 4.35058 14.841 4.66124 14.3093 4.51253C12.5029 4.00737 9.84545 3.84396 7.89238 4.91563C6.31265 5.78265 5.28773 7.48782 5.17881 9.25855C5.07299 10.9821 5.83329 12.7794 7.89468 13.9196C7.89737 13.9211 7.89978 13.9238 7.90246 13.9253L7.74891 11.0246C7.71993 10.4733 8.14354 10.0027 8.69473 9.97331C9.24601 9.9444 9.71675 10.3678 9.74598 10.9191L10.0223 16.1418C10.051 16.6929 9.62755 17.1637 9.07645 17.1931L3.85412 17.468Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

components/Modal.tsx

···
     <Dialog.Root open={open} onOpenChange={onOpenChange}>
       <Dialog.Trigger asChild={asChild}>{trigger}</Dialog.Trigger>
       <Dialog.Portal>
-        <Dialog.Overlay className="fixed z-10 inset-0 bg-primary data-[state=open]:animate-overlayShow opacity-60" />
+        <Dialog.Overlay className="fixed z-[100] inset-0 bg-primary data-[state=open]:animate-overlayShow opacity-60" />
         <Dialog.Content
           className={`
-          z-20 fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2
-          overflow-y-scroll no-scrollbar w-max max-w-screen h-fit max-h-screen p-3 flex flex-col
+          z-[100] fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2
+          overflow-y-scroll no-scrollbar w-max max-w-[calc(100vw-32px)] h-fit max-h-[calc(100dvh-32px)] p-3 flex flex-col
 
           `}
         >
···
               <Dialog.Title>
                 <h3>{title}</h3>
               </Dialog.Title>
-            ) : (
-              <Dialog.Title />
-            )}
-            <Dialog.Description>{children}</Dialog.Description>
+            ) : null}
+            <Dialog.Description asChild>
+              <div>{children}</div>
+            </Dialog.Description>
           </div>
         </Dialog.Content>
       </Dialog.Portal>

components/PageLayouts/DashboardLayout.tsx

···
         <DisplayToggle setState={setState} display={display} />
         <Separator classname="h-4 min-h-4!" />
 
-        {props.hasPubs ? (
+        {props.hasPubs || props.hasArchived ? (
           <>
             <FilterOptions
               hasPubs={props.hasPubs}

components/SubscriptionSuccessModal.tsx

···
 import { useEffect, useState } from "react";
 import { useIdentityData } from "./IdentityProvider";
 import { Modal } from "./Modal";
+import { ButtonPrimary } from "./Buttons";
+import { theme } from "tailwind.config";
 
 export function SubscriptionSuccessModal() {
   let searchParams = useSearchParams();
···
       open={open}
       onOpenChange={handleOpenChange}
       trigger={<span />}
-      title="Welcome to Pro"
-      className="w-80"
+      className="sm:max-w-sm sm:w-[1000px] w-full"
     >
       {loading ? (
         <div className="flex flex-col items-center gap-3 py-4">
···
           </p>
         </div>
       ) : (
-        <div className="flex flex-col gap-2 py-2">
-          <p className="text-secondary text-sm">
-            Your Pro subscription is active. Thanks for supporting Leaflet!
+        <div className="flex flex-col  py-2 justify-center text-center">
+          <div className="mx-auto pb-2">
+            <ProIllo />
+          </div>
+          <h2 className="pb-1">Welcome to Pro!</h2>
+          <p className="text-secondary pb-3">
+            <strong>Thank you for supporting Leaflet.</strong>
+            <br />
+            We're looking forward to bringing you even cooler stuff in the near
+            future!
           </p>
+          <ButtonPrimary className="mx-auto mb-2">
+            Got it, Thanks!
+          </ButtonPrimary>
         </div>
       )}
     </Modal>
   );
 }
+
+const ProIllo = () => {
+  return (
+    <svg
+      width="69"
+      height="58"
+      viewBox="0 0 69 58"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M32.0028 25.5087C34.1077 19.0924 49.3153 7.03434 59.1925 6.73505C62.9478 6.62126 66.9368 7.93871 68.026 10.7968C69.2287 13.9525 54.4704 19.3379 55.6833 23.6235C57.4984 30.0369 63.8312 24.671 67.058 30.0369C68.3413 32.171 71.6957 37.8804 63.4278 44.6788C49.9594 55.7531 0.301929 63.5712 0.00262139 50.701C-0.296686 37.8307 25.1212 46.4852 32.0028 25.5087Z"
+        fill={theme.colors["accent-2"]}
+      />
+      <path
+        d="M48.5194 32.3093C48.8592 29.0701 50.985 29.1006 51.3352 32.3093C51.6854 35.5175 52.7318 37.5464 53.2116 38.0711C53.6914 38.5957 54.5596 39.2064 57.5085 39.8731C60.4575 40.5397 60.3849 42.4955 57.5085 42.7656C54.6319 43.0356 54.0461 43.8922 53.2116 44.8047C52.3773 45.7174 51.7271 47.6088 51.3445 50.7618C50.9618 53.9152 48.8913 53.889 48.5287 50.7618C48.1661 47.6345 46.9105 45.316 46.443 44.8047C45.9756 44.2936 44.4606 43.0173 41.9461 42.7656C39.4329 42.5133 39.4663 40.2925 41.9485 39.8731C44.4301 39.4535 45.5199 38.7092 46.1035 38.0711C46.6875 37.4324 48.1795 35.5473 48.5194 32.3093ZM45.8013 9.06458C47.281 9.02478 47.2573 9.66421 47.2336 10.3109C47.2184 10.7239 47.2034 11.1415 47.58 11.3874C47.9515 11.6299 48.8873 11.5453 49.961 11.4479C51.6815 11.2918 53.7599 11.1026 54.4579 12.1757C55.0709 13.1204 54.2904 14.0612 53.5418 14.9612C52.9082 15.7229 52.2984 16.4565 52.5768 17.1422C52.8046 17.702 53.2717 18.0189 53.7301 18.328C54.48 18.8337 55.2053 19.3223 54.8159 20.8369C54.4042 22.438 51.9287 22.8718 49.6076 23.2783C47.663 23.6189 45.8256 23.9402 45.4037 24.9129C45.1392 25.5232 45.5794 25.8083 46.071 26.1267C46.658 26.5069 47.3206 26.9367 46.9499 28.0287C46.0811 30.5841 43.1787 30.584 40.4557 30.584C38.1188 30.584 35.9124 30.5848 35.2357 32.2C34.8454 33.1326 35.4363 33.2982 36.0844 33.4788C36.8779 33.7 37.7587 33.9461 37.0307 35.6529C35.6356 38.9212 30.4299 38.9511 25.6653 38.9779C23.9183 38.9877 22.2295 38.9975 20.8104 39.1662C20.6487 39.1857 20.5045 39.2783 20.4197 39.4173C19.1139 41.56 18.1896 43.9185 17.2017 46.4324C16.9847 46.9844 16.7643 47.5445 16.5367 48.1111C16.2356 48.8599 15.3837 49.2231 14.6347 48.9226C13.8854 48.6217 13.5223 47.7699 13.8232 47.0206C14.9441 44.2301 16.2366 41.6636 17.6504 39.308C19.9582 35.0584 24.5076 29.8437 29.3181 25.9267C33.5984 22.3631 37.6865 19.6964 42.4437 17.6724C43.039 17.4191 42.8625 16.7216 42.2414 16.9004C38.0221 18.1197 34.2911 20.5387 30.4249 22.9761C26.2202 25.6269 22.6975 29.2123 20.529 31.8187C20.1467 32.2782 19.3088 31.8997 19.4292 31.3141C20.0314 28.3848 20.6472 25.6099 21.3847 23.5876L21.1568 23.6155C19.1554 23.8912 18.628 24.3386 17.9155 25.1175L17.6179 25.4965C16.9451 26.4889 16.4173 28.2406 16.0903 30.9351C15.7399 33.8221 13.9408 33.9804 13.4256 31.4722L13.3419 30.9351C12.9877 27.8816 11.7615 25.6166 11.3051 25.1175C10.905 24.6807 9.72273 23.9639 7.78941 23.6271L6.91515 23.5085C4.613 23.2781 4.49701 21.3576 6.48964 20.7811L6.91515 20.6834C9.03563 20.325 10.1146 19.8083 10.7331 19.2674L10.9726 19.0349C11.5073 18.4498 12.8205 16.3628 13.2559 13.4987L13.3326 12.9151C13.665 9.75445 15.7386 9.78415 16.081 12.9151C16.4228 16.0477 17.4469 18.5219 17.9155 19.0349C18.3841 19.547 19.2315 20.0327 22.1101 20.6834C22.3847 20.7455 22.6307 20.8242 22.8519 20.9067C24.1417 19.5507 24.5953 19.9503 25.1677 20.4533C25.6512 20.878 26.2194 21.3761 27.4417 20.9508C28.2408 20.6723 29.2729 18.8604 30.4249 16.8399C32.1094 13.8855 34.0498 10.4831 35.8891 10.7666C38.1076 11.1085 37.9705 12.3354 37.8655 13.2801C37.7918 13.9427 37.7355 14.4651 38.5165 14.445C39.3116 14.4237 40.0856 13.4902 40.9835 12.4058C42.2245 10.9072 43.7026 9.12113 45.8013 9.06458ZM14.6091 17.4445C13.9823 18.9641 13.2385 20.0856 12.7304 20.6416C12.2231 21.1964 11.5835 21.6482 10.7842 22.0251C11.5797 22.3604 12.3113 22.7903 12.8467 23.2923L13.0629 23.5108L13.2582 23.7434C13.7158 24.3301 14.1835 25.2206 14.5696 26.1778C14.5888 26.2253 14.604 26.2757 14.6231 26.3243C14.9795 25.259 15.4614 24.2722 16.1577 23.5108C16.6072 23.0193 17.1851 22.4298 18.1364 21.9786C17.2881 21.6125 16.6597 21.1905 16.1577 20.6416C15.7874 20.2365 15.512 19.7124 15.3276 19.3232C15.112 18.8679 14.8934 18.3199 14.6905 17.7096C14.6619 17.6235 14.6374 17.5339 14.6091 17.4445ZM19.4199 1.31479C19.6048 -0.446532 20.7618 -0.429975 20.9522 1.31479C21.1426 3.05974 21.712 4.43815 21.9729 4.72349C22.234 5.00854 22.7074 5.27969 24.3097 5.64193C25.9123 6.00463 25.8731 7.06668 24.3097 7.21374C22.7454 7.36058 22.4268 7.61501 21.9729 8.11126C21.5192 8.60757 21.1649 9.63552 20.9568 11.3502C20.7487 13.0652 19.6217 13.051 19.4246 11.3502C19.2275 9.65095 18.5469 8.39067 18.2922 8.11126C18.038 7.83329 17.2135 7.35062 15.8461 7.21374C14.4793 7.07668 14.4968 5.87032 15.8461 5.64193C17.1956 5.41388 17.7886 5.07044 18.1062 4.72349C18.4236 4.37637 19.2351 3.07635 19.4199 1.31479Z"
+        fill={theme.colors["accent-1"]}
+      />
+    </svg>
+  );
+};

lexicons/src/facet.ts

···
     required: [],
     properties: {},
   },
+  footnote: {
+    type: "object",
+    description: "Facet feature for a footnote reference",
+    required: ["footnoteId", "contentPlaintext"],
+    properties: {
+      footnoteId: { type: "string" },
+      contentPlaintext: { type: "string" },
+      contentFacets: {
+        type: "array",
+        items: { type: "ref", ref: "#main" },
+      },
+    },
+  },
 };
 
 export const PubLeafletRichTextFacet = {

lib/tinybird.ts

···
     date_from: p.string().optional(),
     date_to: p.string().optional(),
     path: p.string().optional(),
+    referrer_host: p.string().optional(),
   },
   tokens: [PROD_READ_TOKEN],
   nodes: [
···
           {% if defined(path) %}
             AND path = {{String(path)}}
           {% end %}
+          {% if defined(referrer_host) %}
+            AND domain(referrer) = {{String(referrer_host)}}
+          {% end %}
         GROUP BY day
         ORDER BY day ASC
       `,
···
       date_from: p.string().optional(),
       date_to: p.string().optional(),
       path: p.string().optional(),
+      referrer_host: p.string().optional(),
       limit: p.int32().optional(10),
     },
     nodes: [
···
           {% if defined(path) %}
             AND path = {{String(path)}}
           {% end %}
+          {% if defined(referrer_host) %}
+            AND domain(referrer) = {{String(referrer_host)}}
+          {% end %}
         GROUP BY referrer_host
         ORDER BY pageviews DESC
         LIMIT {{Int32(limit, 10)}}
···
     domains: p.string(),
     date_from: p.string().optional(),
     date_to: p.string().optional(),
+    referrer_host: p.string().optional(),
     limit: p.int32().optional(10),
   },
   nodes: [
···
           {% end %}
           {% if defined(date_to) %}
             AND fromUnixTimestamp64Milli(timestamp) <= parseDateTimeBestEffort({{String(date_to)}})
+          {% end %}
+          {% if defined(referrer_host) %}
+            AND domain(referrer) = {{String(referrer_host)}}
           {% end %}
         GROUP BY path
         ORDER BY pageviews DESC

next-env.d.ts

···
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

src/utils/addImage.ts

···
   let fileID = v7();
   let url = client.storage.from("minilink-user-assets").getPublicUrl(fileID)
     .data.publicUrl;
-  let dimensions = await getImageDimensions(file);
+  // Re-encode through canvas to bake EXIF orientation into pixel data.
+  // iPhone photos have EXIF rotation metadata that browsers respect, but
+  // Supabase's image transformation pipeline strips without applying.
+  let { blob: uploadBlob, width, height } = await normalizeOrientation(file);
+
   await cache.put(
     new URL(url + "?local"),
-    new Response(file, {
+    new Response(uploadBlob, {
       headers: {
-        "Content-Type": file.type,
-        "Content-Length": file.size.toString(),
+        "Content-Type": uploadBlob.type,
+        "Content-Length": uploadBlob.size.toString(),
       },
     }),
   );
···
         type: "image",
         local: rep.clientID,
         src: url,
-        height: dimensions.height,
-        width: dimensions.width,
+        height,
+        width,
       },
     });
-  await client.storage.from("minilink-user-assets").upload(fileID, file, {
+  await client.storage.from("minilink-user-assets").upload(fileID, uploadBlob, {
     cacheControl: "public, max-age=31560000, immutable",
   });
   await rep.mutate.assertFact({
···
       fallback: thumbhash,
       type: "image",
       src: url,
-      height: dimensions.height,
-      width: dimensions.width,
+      height,
+      width,
     },
   });
 }
···
   return thumbHash;
 }
 
-function getImageDimensions(
+async function normalizeOrientation(
   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;
-  });
+): Promise<{ blob: Blob; width: number; height: number }> {
+  let bitmap = await createImageBitmap(file);
+  let canvas = document.createElement("canvas");
+  canvas.width = bitmap.width;
+  canvas.height = bitmap.height;
+  let ctx = canvas.getContext("2d")!;
+  ctx.drawImage(bitmap, 0, 0);
+  bitmap.close();
+  let blob = await new Promise<Blob>((resolve) =>
+    canvas.toBlob((b) => resolve(b!), "image/webp", 0.92),
+  );
+  return { blob, width: canvas.width, height: canvas.height };
 }

src/utils/slugify.ts

···
+export function slugify(text: string): string {
+  return text
+    .toLowerCase()
+    .trim()
+    .replace(/[^\w\s-]/g, "")
+    .replace(/[\s_]+/g, "-")
+    .replace(/-+/g, "-")
+    .replace(/^-|-$/g, "");
+}

supabase/migrations/20260310000000_fix_search_tags_object_error.sql

···
+-- Fix search_tags function to handle documents where data->'tags' is not a JSON array
+-- This prevents "cannot extract elements from an object" errors
+CREATE OR REPLACE FUNCTION search_tags(search_query text)
+RETURNS TABLE (name text, document_count bigint) AS $$
+BEGIN
+    RETURN QUERY
+    SELECT
+        LOWER(tag::text) as name,
+        COUNT(DISTINCT d.uri) as document_count
+    FROM (
+        SELECT uri, data
+        FROM "public"."documents"
+        WHERE jsonb_typeof(data->'tags') = 'array'
+    ) d,
+    jsonb_array_elements_text(d.data->'tags') as tag
+    WHERE
+        CASE
+            WHEN search_query = '' THEN true
+            ELSE LOWER(tag::text) LIKE '%' || search_query || '%'
+        END
+    GROUP BY
+        LOWER(tag::text)
+    ORDER BY
+        COUNT(DISTINCT d.uri) DESC,
+        LOWER(tag::text) ASC
+    LIMIT 20;
+END;
+$$ LANGUAGE plpgsql STABLE;