fix: change cover button not showing

web/components/core/image-picker-popover.tsx

@@ -3,6 +3,7 @@ import React, { useEffect, useState, useRef, useCallback } from "react";
 // next
 import Image from "next/image";
 import { useRouter } from "next/router";
+import getConfig from "next/config";
 
 // swr
 import useSWR from "swr";
@@ -21,9 +22,9 @@ import { Input, Spinner, PrimaryButton, SecondaryButton } from "components/ui";
 // hooks
 import useWorkspaceDetails from "hooks/use-workspace-details";
 
+const { publicRuntimeConfig } = getConfig();
 const unsplashEnabled =
-  process.env.NEXT_PUBLIC_UNSPLASH_ENABLED === "true" ||
-  process.env.NEXT_PUBLIC_UNSPLASH_ENABLED === "1";
+  publicRuntimeConfig.unsplashEnabled === "true" || publicRuntimeConfig.unsplashEnabled === "1";
 
 const tabOptions = [
   {
@@ -172,7 +173,7 @@ export const ImagePickerPopover: React.FC<Props> = ({
                   </div>
                   {images ? (
                     <div className="grid grid-cols-4 gap-4">
-                      {images.map((image) => (
+                      {Array.from(images).map((image) => (
                         <div
                           key={image.id}
                           className="relative col-span-2 aspect-video md:col-span-1"

web/next.config.js

@@ -25,6 +25,13 @@ const nextConfig = {
     // this includes files from the monorepo base two directories up
     outputFileTracingRoot: path.join(__dirname, "../"),
   },
+  publicRuntimeConfig: {
+    unsplashEnabled: process.env.NEXT_PUBLIC_UNSPLASH_ENABLED,
+  },
+  serverRuntimeConfig: {
+    // TODO: remove NEXT_PUBLIC_ prefix from env variable
+    unsplashAccess: process.env.NEXT_PUBLIC_UNSPLASH_ACCESS,
+  },
 };
 
 if (parseInt(process.env.NEXT_PUBLIC_ENABLE_SENTRY || "0")) {

web/pages/api/unsplash.ts

@@ -1,7 +1,8 @@
 import type { NextApiRequest, NextApiResponse } from "next";
+import getConfig from "next/config";
 
-// TODO: remove NEXT_PUBLIC_ prefix from env variable
-const unsplashKey = process.env.NEXT_PUBLIC_UNSPLASH_ACCESS;
+const { serverRuntimeConfig } = getConfig();
+const unsplashKey = serverRuntimeConfig.unsplashAccess;
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   const { query, page, per_page = 20 } = req.query;