feat: dark theme export background

src/components/ImageExportDialog.tsx

@@ -38,7 +38,7 @@ import { Tooltip } from "./Tooltip";
 import "./ImageExportDialog.scss";
 import { useAppProps } from "./App";
 import { FilledButton } from "./FilledButton";
-import Select from "./Select";
+import Select, { convertToSelectItems } from "./Select";
 
 const supportsContextFilters =
   "filter" in document.createElement("canvas").getContext("2d")!;
@@ -69,6 +69,11 @@ function isBackgroundImageKey(
   return key in FANCY_BACKGROUND_IMAGES;
 }
 
+const backgroundSelectItems = convertToSelectItems(
+  FANCY_BACKGROUND_IMAGES,
+  (item) => item.label,
+);
+
 const ImageExportModal = ({
   appState,
   elements,
@@ -138,7 +143,7 @@ const ImageExportModal = ({
   }, [
     appState,
     appState.exportBackground,
-    appState.fancyBackgroundImageUrl,
+    appState.fancyBackgroundImageKey,
     files,
     exportedElements,
   ]);
@@ -150,7 +155,9 @@ const ImageExportModal = ({
         <div
           className={clsx("ImageExportModal__preview__canvas", {
             "ImageExportModal__preview__canvas--img-bcg":
-              appState.exportBackground && appState.fancyBackgroundImageUrl,
+              appState.exportBackground &&
+              appState.fancyBackgroundImageKey &&
+              appState.fancyBackgroundImageKey !== "solid",
           })}
           ref={previewRef}
         >
@@ -199,7 +206,7 @@ const ImageExportModal = ({
         >
           {exportWithBackground && (
             <Select
-              items={FANCY_BACKGROUND_IMAGES}
+              items={backgroundSelectItems}
               ariaLabel={t("imageExportDialog.label.backgroundImage")}
               placeholder={t("imageExportDialog.label.backgroundImage")}
               value={exportBackgroundImage}
@@ -209,7 +216,7 @@ const ImageExportModal = ({
                   actionManager.executeAction(
                     actionChangeFancyBackgroundImageUrl,
                     "ui",
-                    FANCY_BACKGROUND_IMAGES[value].path,
+                    value,
                   );
                 }
               }}

src/components/Select.tsx

@@ -4,23 +4,39 @@ import * as RadixSelect from "@radix-ui/react-select";
 import "./Select.scss";
 import { tablerChevronDownIcon, tablerChevronUpIcon } from "./icons";
 
-type SelectItems = Record<string, { path: string | null; label: string }>;
+type SelectItems<T extends string> = Record<T, string>;
 
-export type SelectProps = {
-  items: SelectItems;
-  value: keyof SelectItems;
-  onChange: (value: keyof SelectItems) => void;
+export type SelectProps<T extends string> = {
+  items: SelectItems<T>;
+  value: T;
+  onChange: (value: T) => void;
   placeholder?: string;
   ariaLabel?: string;
 };
 
-const Select = ({
+type ConverterFunction<T> = (
+  items: Record<string, T>,
+  getLabel: (item: T) => string,
+) => SelectItems<string>;
+
+export const convertToSelectItems: ConverterFunction<any> = (
+  items,
+  getLabel,
+) => {
+  const result: SelectItems<string> = {};
+  for (const key in items) {
+    result[key] = getLabel(items[key]);
+  }
+  return result;
+};
+
+const Select = <T extends string>({
   items,
   value,
   onChange,
   placeholder,
   ariaLabel,
-}: SelectProps) => (
+}: SelectProps<T>) => (
   <RadixSelect.Root value={value} onValueChange={onChange}>
     <RadixSelect.Trigger
       className="Select__trigger"
@@ -41,11 +57,13 @@ const Select = ({
       </RadixSelect.ScrollUpButton>
 
       <RadixSelect.Viewport className="Select__viewport">
-        {Object.entries(items).map(([itemValue, itemLabel]) => (
-          <SelectItem value={itemValue} key={itemValue}>
-            {itemLabel.label}
-          </SelectItem>
-        ))}
+        {(Object.entries(items) as [T, string][]).map(
+          ([itemValue, itemLabel]) => (
+            <SelectItem value={itemValue} key={itemValue}>
+              {itemLabel}
+            </SelectItem>
+          ),
+        )}
       </RadixSelect.Viewport>
 
       <RadixSelect.ScrollDownButton className="Select__scroll-button">