feat(web): add proxy for supabase storage images

apps/web/src/components/footer.tsx

@@ -20,7 +20,7 @@ export function Footer() {
           <div>
             <Link to="/" className="inline-block mb-4">
               <img
-                src="https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/hyprnote/logo.svg"
+                src="/api/images/hyprnote/logo.svg"
                 alt="Hyprnote"
                 className="h-6"
               />

apps/web/src/components/header.tsx

@@ -45,7 +45,7 @@ export function Header() {
                 className="font-semibold text-2xl font-serif hover:scale-105 transition-transform mr-4"
               >
                 <img
-                  src="https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/hyprnote/logo.svg"
+                  src="/api/images/hyprnote/logo.svg"
                   alt="Hyprnote"
                   className="h-6"
                 />
@@ -145,7 +145,7 @@ export function Header() {
               className="sm:hidden font-semibold text-2xl font-serif hover:scale-105 transition-transform"
             >
               <img
-                src="https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/hyprnote/logo.svg"
+                src="/api/images/hyprnote/logo.svg"
                 alt="Hyprnote"
                 className="h-6"
               />

apps/web/src/components/video-thumbnail.tsx

@@ -24,7 +24,7 @@ export function VideoThumbnail({
     >
       <MuxPlayer
         playbackId={playbackId}
-        poster="https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/hyprnote/poster-image.png"
+        poster="/api/images/hyprnote/poster-image.png"
         muted
         playsInline
         className="w-full h-full object-cover pointer-events-none aspect-video"

apps/web/src/routes/__root.tsx

@@ -35,8 +35,7 @@ export const Route = createRootRouteWithContext<RouterContext>()({
       { property: "og:url", content: "https://hyprnote.com" },
       {
         property: "og:image",
-        content:
-          "https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/hyprnote/og-image.jpg",
+        content: "/api/images/hyprnote/og-image.jpg",
       },
       { property: "og:image:width", content: "1200" },
       { property: "og:image:height", content: "630" },
@@ -48,8 +47,7 @@ export const Route = createRootRouteWithContext<RouterContext>()({
       { name: "twitter:url", content: "https://hyprnote.com" },
       {
         name: "twitter:image",
-        content:
-          "https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/hyprnote/og-image.jpg",
+        content: "/api/images/hyprnote/og-image.jpg",
       },
     ],
     links: [{ rel: "stylesheet", href: appCss }],

apps/web/src/routes/_view/about.tsx

@@ -48,8 +48,7 @@ const founders = [
     name: "John Jeong",
     role: "Chief Wisdom Seeker",
     bio: "I love designing simple and intuitive user interfaces.",
-    image:
-      "https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/team/john.png",
+    image: "/api/images/team/john.png",
     links: {
       twitter: "https://x.com/computeless",
       github: "https://github.com/computelesscomputer",
@@ -62,8 +61,7 @@ const founders = [
     name: "Yujong Lee",
     role: "Chief OSS Lover",
     bio: "I am super bullish about open-source software.",
-    image:
-      "https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/team/yujong.png",
+    image: "/api/images/team/yujong.png",
     links: {
       twitter: "https://x.com/yujonglee",
       github: "https://github.com/yujonglee",
@@ -77,72 +75,72 @@ const teamPhotos = [
   {
     id: "john-1",
     name: "john-1.jpg",
-    url: "https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/team/john-1.jpg",
+    url: "/api/images/team/john-1.jpg",
   },
   {
     id: "john-2",
     name: "john-2.jpg",
-    url: "https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/team/john-2.jpg",
+    url: "/api/images/team/john-2.jpg",
   },
   {
     id: "palo-alto-1",
     name: "palo-alto-1.jpg",
-    url: "https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/team/palo-alto-1.jpg",
+    url: "/api/images/team/palo-alto-1.jpg",
   },
   {
     id: "palo-alto-2",
     name: "palo-alto-2.jpg",
-    url: "https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/team/palo-alto-2.jpg",
+    url: "/api/images/team/palo-alto-2.jpg",
   },
   {
     id: "palo-alto-3",
     name: "palo-alto-3.jpg",
-    url: "https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/team/palo-alto-3.jpg",
+    url: "/api/images/team/palo-alto-3.jpg",
   },
   {
     id: "palo-alto-4",
     name: "palo-alto-4.jpg",
-    url: "https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/team/palo-alto-4.jpg",
+    url: "/api/images/team/palo-alto-4.jpg",
   },
   {
     id: "sadang",
     name: "sadang.jpg",
-    url: "https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/team/sadang.jpg",
+    url: "/api/images/team/sadang.jpg",
   },
   {
     id: "yc-0",
     name: "yc-0.jpg",
-    url: "https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/team/yc-0.jpg",
+    url: "/api/images/team/yc-0.jpg",
   },
   {
     id: "yc-1",
     name: "yc-1.jpg",
-    url: "https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/team/yc-1.jpg",
+    url: "/api/images/team/yc-1.jpg",
   },
   {
     id: "yc-2",
     name: "yc-2.jpg",
-    url: "https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/team/yc-2.jpg",
+    url: "/api/images/team/yc-2.jpg",
   },
   {
     id: "yujong-1",
     name: "yujong-1.jpg",
-    url: "https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/team/yujong-1.jpg",
+    url: "/api/images/team/yujong-1.jpg",
   },
   {
     id: "yujong-2",
     name: "yujong-2.jpg",
-    url: "https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/team/yujong-2.jpg",
+    url: "/api/images/team/yujong-2.jpg",
   },
   {
     id: "yujong-3",
     name: "yujong-3.jpg",
-    url: "https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/team/yujong-3.jpg",
+    url: "/api/images/team/yujong-3.jpg",
   },
   {
     id: "yujong-4",
     name: "yujong-4.jpg",
-    url: "https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/team/yujong-4.jpg",
+    url: "/api/images/team/yujong-4.jpg",
   },
 ];
 
@@ -279,7 +277,7 @@ function OurStoryGrid({
         >
           <div className="mb-3 w-16 h-16 flex items-center justify-center">
             <Image
-              src="https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/icons/textedit.webp"
+              src="/api/images/icons/textedit.webp"
               alt="Our Story"
               width={64}
               height={64}
@@ -440,7 +438,7 @@ function OurStorySidebar({
       >
         <div className="w-12 h-12 shrink-0 flex items-center justify-center">
           <Image
-            src="https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/icons/textedit.webp"
+            src="/api/images/icons/textedit.webp"
             alt="Our Story"
             width={48}
             height={48}
@@ -685,7 +683,7 @@ function StoryDetail({ onClose }: { onClose: () => void }) {
 
             <div>
               <Image
-                src="https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/hyprnote/signature-dark.svg"
+                src="/api/images/hyprnote/signature-dark.svg"
                 alt="Hyprnote Signature"
                 width={124}
                 height={60}

apps/web/src/routes/_view/brand.tsx

@@ -29,25 +29,25 @@ const VISUAL_ASSETS = [
   {
     id: "icon",
     name: "Icon",
-    url: "https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/hyprnote/icon.png",
+    url: "/api/images/hyprnote/icon.png",
     description: "Hyprnote app icon",
   },
   {
     id: "logo",
     name: "Logo",
-    url: "https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/hyprnote/logo.png",
+    url: "/api/images/hyprnote/logo.png",
     description: "Hyprnote wordmark logo",
   },
   {
     id: "symbol-logo",
     name: "Symbol + Logo",
-    url: "https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/hyprnote/symbol+logo.png",
+    url: "/api/images/hyprnote/symbol+logo.png",
     description: "Hyprnote icon with wordmark",
   },
   {
     id: "og-image",
     name: "OpenGraph Image",
-    url: "https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/hyprnote/og-image.jpg",
+    url: "/api/images/hyprnote/og-image.jpg",
     description: "Social media preview image",
   },
 ];

apps/web/src/routes/_view/changelog/$slug.tsx

@@ -264,8 +264,8 @@ function ChangelogSidebar({
                   const v = semver.parse(version.version);
                   const isPrerelease = v && v.prerelease.length > 0;
                   const iconUrl = isPrerelease
-                    ? "https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/icons/nightly-icon.png"
-                    : "https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/icons/stable-icon.png";
+                    ? "/api/images/icons/nightly-icon.png"
+                    : "/api/images/icons/stable-icon.png";
 
                   return (
                     <Link

apps/web/src/routes/_view/changelog/index.tsx

@@ -146,8 +146,8 @@ function VersionIcon({ changelog }: { changelog: ChangelogWithMeta }) {
   const version = semver.parse(changelog.version);
   const isPrerelease = version && version.prerelease.length > 0;
   const iconUrl = isPrerelease
-    ? "https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/icons/nightly-icon.png"
-    : "https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/icons/stable-icon.png";
+    ? "/api/images/icons/nightly-icon.png"
+    : "/api/images/icons/stable-icon.png";
 
   return (
     <Link

apps/web/src/routes/_view/download/index.tsx

@@ -204,7 +204,7 @@ function CTASection() {
       <div className="flex flex-col gap-6 items-center text-center">
         <div className="mb-4 size-40 shadow-2xl border border-neutral-100 flex justify-center items-center rounded-[48px] bg-transparent">
           <Image
-            src="https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images/hyprnote/icon.png"
+            src="/api/images/hyprnote/icon.png"
             alt="Hyprnote"
             width={144}
             height={144}