feat: support product images in admin

.env.example

@@ -1,6 +1,8 @@
 NEXT_PUBLIC_API_BASE_URL=/api
 NEXT_PUBLIC_DISPLAY_TIME_ZONE=UTC
 NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_ENABLE_PRODUCT_IMAGE_UPLOADS=false
+NEXT_PUBLIC_IMAGE_UPLOAD_ORIGINS=
 NEXT_PUBLIC_APP_VERSION=local
 NEXT_PUBLIC_ENABLE_TELEMETRY=false
 NEXT_PUBLIC_FARO_URL=

.github/workflows/ci.yml

@@ -2,7 +2,7 @@ name: Frontend checks
 on:
   pull_request:
   push:
-    branches: [main, feature/frontend]
+    branches: [main, feature/frontend, feature/product-images]
 permissions:
   contents: read
 jobs:
@@ -20,10 +20,15 @@ jobs:
       - run: npm run typecheck
       - run: npm test
       - run: npm run build
+        env:
+          NEXT_PUBLIC_ENABLE_PRODUCT_IMAGE_UPLOADS: "true"
+          NEXT_PUBLIC_APP_ENV: fixture
       - run: npx playwright install --with-deps chromium
       - run: npm run test:e2e
       - uses: actions/upload-artifact@v4
-        if: failure()
+        if: always()
         with:
           name: browser-test-report
-          path: playwright-report
+          path: |
+            playwright-report
+            test-results

Dockerfile

@@ -6,6 +6,8 @@ COPY . .
 ARG NEXT_PUBLIC_API_BASE_URL=/api
 ARG NEXT_PUBLIC_DISPLAY_TIME_ZONE=UTC
 ARG NEXT_PUBLIC_APP_ENV=development
+ARG NEXT_PUBLIC_ENABLE_PRODUCT_IMAGE_UPLOADS=false
+ARG NEXT_PUBLIC_IMAGE_UPLOAD_ORIGINS
 ARG NEXT_PUBLIC_APP_VERSION=local
 ARG NEXT_PUBLIC_ENABLE_TELEMETRY=false
 ARG NEXT_PUBLIC_FARO_URL

src/app/globals.css

@@ -221,6 +221,7 @@
   min-width: 0;
 }
 .product-tile {
+  overflow: hidden;
   width: 100%;
   min-width: 0;
   aspect-ratio: 1.2;
@@ -234,6 +235,27 @@
   border-radius: 4px;
   transition: background 0.15s;
 }
+input[type="file"] {
+  width: 100%;
+  min-height: 44px;
+}
+input[type="file"]::file-selector-button {
+  min-height: 44px;
+  cursor: pointer;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  padding: 8px 12px;
+  margin-right: 12px;
+  background: var(--paper);
+  color: var(--ink);
+  font-weight: 600;
+}
+input[type="file"]::file-selector-button:hover {
+  background: var(--tile);
+}
+input[type="file"]::file-selector-button:active {
+  transform: translateY(1px);
+}
 .product-tile:hover {
   background: color-mix(in srgb, var(--tile), var(--accent) 12%);
 }

src/components/admin-view.tsx

@@ -41,6 +41,7 @@ import {
   type Product,
 } from "@/lib/contracts";
 import "./admin.css";
+import { ProductImageDialog } from "./product-image-dialog";
 
 type Screen = "overview" | "products" | "accounts" | "observability";
 const features = tableFeatures({
@@ -321,6 +322,7 @@ function Products() {
   const [search, setSearch] = useState("");
   const [create, setCreate] = useState(false);
   const [remove, setRemove] = useState<Product | null>(null);
+  const [imageProduct, setImageProduct] = useState<Product | null>(null);
   const query = useQuery({
     queryKey: ["products"],
     queryFn: ({ signal }) => api("/products", productsSchema, { signal }),
@@ -351,6 +353,15 @@ function Products() {
               <Button href={"/store/product/?id=" + cell.row.original.id}>
                 View
               </Button>
+              <Button
+                disabled={
+                  process.env.NEXT_PUBLIC_ENABLE_PRODUCT_IMAGE_UPLOADS !==
+                  "true"
+                }
+                onClick={() => setImageProduct(cell.row.original)}
+              >
+                Manage image
+              </Button>
               <Button
                 color="error"
                 onClick={() => {
@@ -398,6 +409,18 @@ function Products() {
         />
       )}
       <CreateProduct open={create} close={() => setCreate(false)} />
+      {process.env.NEXT_PUBLIC_ENABLE_PRODUCT_IMAGE_UPLOADS !== "true" && (
+        <Alert severity="info">
+          Image uploads are not available in this environment.
+        </Alert>
+      )}
+      {imageProduct && (
+        <ProductImageDialog
+          key={imageProduct.id}
+          product={imageProduct}
+          close={() => setImageProduct(null)}
+        />
+      )}
       <Dialog
         open={!!remove}
         onClose={() => {

src/components/product-card.tsx

@@ -2,6 +2,7 @@
 import { Button } from "@mui/material";
 import { type Product } from "@/lib/contracts";
 import { money } from "@/lib/api";
+import { ProductVisual } from "@/components/product-visual";
 export function ProductCard({
   product,
   add,
@@ -16,8 +17,7 @@ export function ProductCard({
         href={"/store/product/?id=" + product.id}
         aria-label={"View " + product.name}
       >
-        <span aria-hidden="true">{product.name.slice(0, 2).toUpperCase()}</span>
-        <small>Product image unavailable</small>
+        <ProductVisual product={product} />
       </a>
       <div className="product-card-info">
         <a className="product-title" href={"/store/product/?id=" + product.id}>