feat: add layer and mask thumbnails

view/layers/LayerThumbnail.tsx

@@ -0,0 +1,29 @@
+import { FolderSimple, ImageBroken } from "@phosphor-icons/react";
+import type { LayerThumbnailModel, RasterThumbnailModel } from "./thumbnailModel";
+
+export function LayerThumbnail({ model, label, compact = false }: { model: LayerThumbnailModel; label: string; compact?: boolean }) {
+  const sizeClass = compact ? "h-7 w-9 rounded-md" : "h-8 w-10 rounded-lg";
+  return (
+    <span role="img" aria-label={label} className={`relative grid shrink-0 place-items-center overflow-hidden bg-black/25 ring-1 ring-inset ring-white/15 ${sizeClass}`}>
+      {model.kind === "raster" ? <RasterPreview model={model} /> : null}
+      {model.kind === "group" ? (
+        <>
+          <span className="absolute inset-1 grid grid-cols-2 gap-px overflow-hidden rounded">
+            {model.previews.map((preview, index) => <RasterPreview key={`${preview.source}-${index}`} model={preview} />)}
+          </span>
+          <FolderSimple size={compact ? 14 : 17} weight="fill" className="relative drop-shadow-[0_1px_2px_rgba(0,0,0,0.8)]" />
+        </>
+      ) : null}
+      {model.kind === "empty" ? <ImageBroken size={compact ? 14 : 17} className="text-white/35" /> : null}
+    </span>
+  );
+}
+
+function RasterPreview({ model }: { model: RasterThumbnailModel }) {
+  const { x, y, w, h } = model.viewBox;
+  return (
+    <svg aria-hidden="true" className="h-full w-full bg-[linear-gradient(45deg,rgba(255,255,255,.06)_25%,transparent_25%,transparent_75%,rgba(255,255,255,.06)_75%),linear-gradient(45deg,rgba(255,255,255,.06)_25%,transparent_25%,transparent_75%,rgba(255,255,255,.06)_75%)] bg-[length:8px_8px] bg-[position:0_0,4px_4px]" viewBox={`${x} ${y} ${w} ${h}`} preserveAspectRatio="xMidYMid meet">
+      <image href={model.source} x="0" y="0" width={model.intrinsicWidth} height={model.intrinsicHeight} onError={(event) => event.currentTarget.setAttribute("visibility", "hidden")} />
+    </svg>
+  );
+}