feat: static server support etag

apps/webui/package.json

@@ -77,7 +77,6 @@
     "tw-animate-css": "^1.3.4",
     "type-fest": "^4.41.0",
     "vaul": "^1.1.2",
-    "es-toolkit": "^1.39.3",
     "@tanstack/react-router": "^1.121.2"
   },
   "devDependencies": {

apps/webui/src/components/ui/img.tsx

@@ -1,16 +1,18 @@
-import { type ComponentProps } from "react";
+import { type ComponentProps, useMemo, useState } from "react";
 
 export type ImgProps = Omit<ComponentProps<"img">, "alt"> &
   Required<Pick<ComponentProps<"img">, "alt">> & {
     optimize?: boolean;
   };
 
-// biome-ignore lint/correctness/noUnusedVariables: <explanation>
 const LEGACY_IMAGE_REGEX = /\.(jpg|jpeg|png|gif|svg)$/;
 
 export const Img = (props: ImgProps) => {
   const src = props.src;
 
+  const isLegacy = useMemo(() => src?.match(LEGACY_IMAGE_REGEX), [src]);
+  const [isError, setIsError] = useState(false);
+
   if (!src) {
     // biome-ignore lint/nursery/noImgElement: <explanation>
     return <img {...props} alt={props.alt} />;
@@ -18,7 +20,19 @@ export const Img = (props: ImgProps) => {
 
   return (
     <picture {...props}>
-      <img {...props} alt={props.alt} />
+      {isLegacy && !isError && (
+        <>
+          <source
+            srcSet={src.replace(LEGACY_IMAGE_REGEX, ".webp")}
+            type="image/webp"
+          />
+          <source
+            srcSet={src.replace(LEGACY_IMAGE_REGEX, ".avif")}
+            type="image/avif"
+          />
+        </>
+      )}
+      <img {...props} alt={props.alt} onError={() => setIsError(true)} />
     </picture>
   );
 };