Add gallery view toggle for Good Websites

package.json

@@ -17,6 +17,7 @@
     "@aws-sdk/client-s3": "^3.975.0",
     "@base-ui/react": "^1.1.0",
     "@notionhq/client": "^5.4.0",
+    "@paper-design/shaders-react": "^0.0.71",
     "@sparticuz/chromium": "^143.0.4",
     "@tanstack/react-virtual": "^3.13.18",
     "@types/dompurify": "^3.2.0",

schemas/GoodWebsitesSchema.json

@@ -48,6 +48,13 @@
       "type": "rich_text",
       "rich_text": {}
     },
+    "Capture Screenshot": {
+      "id": "MQRi",
+      "name": "Capture Screenshot",
+      "description": null,
+      "type": "button",
+      "button": {}
+    },
     "X": {
       "id": "Rw%5Ev",
       "name": "X",
@@ -77,6 +84,13 @@
         ]
       }
     },
+    "Preview Image Dark": {
+      "id": "cn%5Do",
+      "name": "Preview Image Dark",
+      "description": null,
+      "type": "url",
+      "url": {}
+    },
     "URL": {
       "id": "nBQE",
       "name": "URL",

schemas/StackSchema.json

@@ -30,13 +30,6 @@
       "type": "url",
       "url": {}
     },
-    "Capture screenshot": {
-      "id": "OE%60l",
-      "name": "Capture screenshot",
-      "description": null,
-      "type": "button",
-      "button": {}
-    },
     "Created time": {
       "id": "RV%5E%5D",
       "name": "Created time",
@@ -51,6 +44,13 @@
       "type": "url",
       "url": {}
     },
+    "Preview Image Dark": {
+      "id": "VGAv",
+      "name": "Preview Image Dark",
+      "description": null,
+      "type": "url",
+      "url": {}
+    },
     "URL": {
       "id": "YOu%3A",
       "name": "URL",
@@ -105,6 +105,13 @@
       "type": "date",
       "date": {}
     },
+    "Capture Screenshot": {
+      "id": "d%3AnZ",
+      "name": "Capture Screenshot",
+      "description": null,
+      "type": "button",
+      "button": {}
+    },
     "Preview Error": {
       "id": "j%3COP",
       "name": "Preview Error",

schemas/TILSchema.json

@@ -30,6 +30,13 @@
         "format": "number"
       }
     },
+    "Created time": {
+      "id": "sKAI",
+      "name": "Created time",
+      "description": null,
+      "type": "created_time",
+      "created_time": {}
+    },
     "Title": {
       "id": "title",
       "name": "Title",

schemas/notionSchemas.ts

@@ -8,12 +8,13 @@ export const StackSchema = z.object({
   Description: z.string().optional(),
   Likes: z.number().optional(),
   Image: z.string().optional(),
-  "Capture screenshot": z.any().optional(),
   "Created time": z.string().optional(),
   "Preview Image": z.string().optional(),
+  "Preview Image Dark": z.string().optional(),
   URL: z.string().optional(),
   Platforms: z.array(z.enum(["Windows", "Web", "Physical", "macOS", "iOS"])).optional(),
   "Preview Updated": z.string().optional(),
+  "Capture Screenshot": z.any().optional(),
   "Preview Error": z.string().optional(),
   "Process icon": z.any().optional(),
   Status: z.enum(["Inactive", "Active"]).optional(),
@@ -101,8 +102,10 @@ export const GoodWebsitesSchema = z.object({
   "Preview Status": z.enum(["Queued", "Processing", "Done", "Error"]).optional(),
   "Created time": z.string().optional(),
   "Preview Error": z.string().optional(),
+  "Capture Screenshot": z.any().optional(),
   X: z.string().optional(),
   Tags: z.array(z.enum(["Personal site", "Company"])).optional(),
+  "Preview Image Dark": z.string().optional(),
   URL: z.string().optional(),
   "Preview Image": z.string().optional(),
   "Preview Updated": z.string().optional(),
@@ -126,6 +129,7 @@ export const TILSchema = z.object({
   Published: z.string().optional(),
   "Short ID": z.string().optional(),
   Likes: z.number().optional(),
+  "Created time": z.string().optional(),
   Title: z.string().optional(),
 });
 

src/atoms/sitesViewMode.ts

@@ -0,0 +1,5 @@
+import { atomWithStorage } from "jotai/utils";
+
+import type { ViewMode } from "@/components/good-websites/ViewToggle";
+
+export const sitesViewModeAtom = atomWithStorage<ViewMode>("sites-view-mode", "list");

src/components/good-websites/GoodWebsiteGalleryItem.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import { AnimatePresence, motion } from "motion/react";
+import { useEffect, useState } from "react";
+
+import { LikeButton } from "@/components/likes/LikeButton";
+import { PlaceholderShader } from "@/components/ui/PlaceholderShader";
+import type { GoodWebsiteItem } from "@/lib/goodWebsites";
+import { useLikes } from "@/lib/hooks/useLikes";
+import { imageCache } from "@/lib/imageCache";
+
+interface GoodWebsiteGalleryItemProps {
+  item: GoodWebsiteItem;
+}
+
+const hoverAnimationProps = {
+  initial: { opacity: 0, y: 4, scale: 0.96 },
+  animate: { opacity: 1, y: 0, scale: 1 },
+  exit: { opacity: 0, y: 4, scale: 0.96 },
+  transition: { duration: 0.15, ease: "easeOut" as const },
+};
+
+export function GoodWebsiteGalleryItem({ item }: GoodWebsiteGalleryItemProps) {
+  // Check if image is already cached (from previous view or browser cache)
+  const isCached = item.previewImage ? imageCache.has(item.previewImage) : false;
+  const [imageStatus, setImageStatus] = useState<"loading" | "loaded" | "error">(
+    isCached ? "loaded" : "loading",
+  );
+  const [isHovered, setIsHovered] = useState(false);
+  const { hasLiked } = useLikes(item.id);
+
+  // Preload image using Image API to avoid broken image flicker
+  useEffect(() => {
+    if (!item.previewImage || isCached) return;
+
+    const img = new Image();
+    img.onload = () => {
+      imageCache.add(item.previewImage!);
+      setImageStatus("loaded");
+    };
+    img.onerror = () => setImageStatus("error");
+    img.src = item.previewImage;
+
+    return () => {
+      img.onload = null;
+      img.onerror = null;
+    };
+  }, [item.previewImage, isCached]);
+
+  const handleClick = () => {
+    if (item.url?.trim()) window.open(item.url, "_blank", "noopener,noreferrer");
+  };
+
+  return (
+    <div
+      className="group rounded-px relative cursor-pointer overflow-hidden"
+      onClick={handleClick}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      {/* Thumbnail */}
+      <div className="bg-tertiary relative aspect-40/21 w-full overflow-hidden">
+        {item.previewImage && imageStatus !== "error" ? (
+          <>
+            {imageStatus === "loading" && <PlaceholderShader />}
+            {imageStatus === "loaded" && (
+              <picture className="absolute inset-0 transition-transform duration-300 group-hover:scale-[1.02]">
+                {item.previewImageDark && (
+                  <source srcSet={item.previewImageDark} media="(prefers-color-scheme: dark)" />
+                )}
+                <img
+                  src={item.previewImage}
+                  alt={`Preview of ${item.name}`}
+                  className="h-full w-full object-cover object-top"
+                />
+              </picture>
+            )}
+          </>
+        ) : (
+          <PlaceholderShader />
+        )}
+
+        {/* Site name pill - always visible on mobile, animated on desktop */}
+        <div className="pointer-events-none absolute inset-0 flex flex-col justify-end p-4">
+          {/* Mobile: always visible, no animation */}
+          <div className="flex h-7 min-w-0 items-center self-start rounded-full bg-black/50 px-2.5 saturate-150 backdrop-blur-3xl sm:hidden">
+            <span className="truncate text-sm font-medium text-white">{item.name}</span>
+          </div>
+          {/* Desktop: animated on hover */}
+          <AnimatePresence>
+            {isHovered && (
+              <motion.div
+                className="pointer-events-auto hidden h-7 min-w-0 items-center self-start rounded-full bg-black/50 px-2.5 saturate-150 backdrop-blur-3xl hover:bg-black/90 sm:flex"
+                {...hoverAnimationProps}
+              >
+                <span className="truncate text-sm font-medium text-white">{item.name}</span>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+
+        {/* Like button - always visible on mobile, or when liked, otherwise animated on hover */}
+        <div className="absolute right-4 bottom-4" onClick={(e) => e.stopPropagation()}>
+          {/* Mobile: always visible */}
+          <div className="sm:hidden">
+            <LikeButton pageId={item.id} variant="ghost-light" />
+          </div>
+          {/* Desktop: permanently visible if liked, otherwise animated on hover */}
+          <div className="hidden sm:block">
+            {hasLiked ? (
+              <LikeButton pageId={item.id} variant="ghost-light" />
+            ) : (
+              <AnimatePresence>
+                {isHovered && (
+                  <motion.div {...hoverAnimationProps}>
+                    <LikeButton pageId={item.id} variant="ghost-light" />
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}