@firecms/core 3.0.0-beta.10 → 3.0.0-beta.12

package/src/internal/useBuildSideEntityController.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef } from "react";
 import {
+    CustomizationController,
     EntityCollection,
     EntitySidePanelProps,
     NavigationController,
@@ -8,18 +9,30 @@ import {
     SideDialogsController,
     SideEntityController
 } from "../types";
-import { getNavigationEntriesFromPathInternal, NavigationViewInternal } from "../util/navigation_from_path";
+import { getNavigationEntriesFromPath, NavigationViewInternal } from "../util/navigation_from_path";
 import { useLocation } from "react-router-dom";
-import { removeInitialAndTrailingSlashes, resolveCollection, resolveDefaultSelectedView } from "../util";
+import {
+    removeInitialAndTrailingSlashes,
+    resolveCollection,
+    resolveDefaultSelectedView,
+    resolvedSelectedEntityView
+} from "../util";
 import { ADDITIONAL_TAB_WIDTH, CONTAINER_FULL_WIDTH, FORM_CONTAINER_WIDTH } from "./common";
-import { useLargeLayout } from "../hooks";
+import { useCustomizationController, useLargeLayout } from "../hooks";
 import { EntitySidePanel } from "../core/EntitySidePanel";
 
-const NEW_URL_HASH = "new";
+const NEW_URL_HASH = "new_side";
+const SIDE_URL_HASH = "side";
 
-export function getEntityViewWidth(props: EntitySidePanelProps<any>, small: boolean): string {
+export function getEntityViewWidth(props: EntitySidePanelProps<any>, small: boolean, customizationController: CustomizationController): string {
     if (small) return CONTAINER_FULL_WIDTH;
-    const mainViewSelected = !props.selectedSubPath;
+
+    const {
+        selectedSecondaryForm
+    } = resolvedSelectedEntityView(props.collection?.entityViews, customizationController, props.selectedTab);
+
+    const shouldUseSmallLayout = !props.selectedTab || Boolean(selectedSecondaryForm);
+
     let resolvedWidth: string | undefined;
     if (props.width) {
         resolvedWidth = typeof props.width === "number" ? `${props.width}px` : props.width;
@@ -27,7 +40,7 @@ export function getEntityViewWidth(props: EntitySidePanelProps<any>, small: bool
         resolvedWidth = typeof props.collection.sideDialogWidth === "number" ? `${props.collection.sideDialogWidth}px` : props.collection.sideDialogWidth;
     }
 
-    if (!mainViewSelected) {
+    if (!shouldUseSmallLayout) {
         return `calc(${ADDITIONAL_TAB_WIDTH} + ${resolvedWidth ?? FORM_CONTAINER_WIDTH})`
     } else {
         if (resolvedWidth) {
@@ -88,37 +101,59 @@ export const useBuildSideEntityController = (navigation: NavigationController,
 
     const location = useLocation();
     const initialised = useRef<boolean>(false);
+    const customizationController = useCustomizationController();
 
     const smallLayout = !useLargeLayout();
 
     // only on initialisation, create panels from URL
     useEffect(() => {
-        if (!navigation.loading && !initialised.current) {
-            console.debug("Initialising side entity controller");
-            if (navigation.isUrlCollectionPath(location.pathname)) {
-                const newFlag = location.hash === `#${NEW_URL_HASH}`;
+
+        const newFlag = location.hash === `#${NEW_URL_HASH}`;
+        const sideFlag = location.hash === `#${SIDE_URL_HASH}`;
+
+        if (!navigation.loading) {
+            if ((newFlag || sideFlag) && navigation.isUrlCollectionPath(location.pathname)) {
                 const entityOrCollectionPath = navigation.urlPathToDataPath(location.pathname);
                 const panelsFromUrl = buildSidePanelsFromUrl(entityOrCollectionPath, navigation.collections ?? [], newFlag);
                 for (let i = 0; i < panelsFromUrl.length; i++) {
                     const props = panelsFromUrl[i];
-                    setTimeout(() => {
-                        if (i === 0)
-                            sideDialogsController.replace(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, smallLayout));
-                        else
-                            sideDialogsController.open(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, smallLayout))
-                    }, 1);
+                    if (i === 0)
+                        sideDialogsController.replace(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController));
+                    else
+                        sideDialogsController.open(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController))
                 }
-            } else {
-                // console.warn("Location path is not a collection path");
             }
             initialised.current = true;
         }
-    }, [location, navigation.loading, navigation.isUrlCollectionPath, navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, sideDialogsController, smallLayout, navigation]);
+    }, [navigation.loading]);
 
+    // sync panels if URL changes with #side
+    const currentPanelKeys = sideDialogsController.sidePanels.map(p => p.key);
+    useEffect(() => {
+        if (initialised.current) {
+            const sideFlag = location.hash === `#${SIDE_URL_HASH}`;
+            if (sideFlag) {
+                const entityOrCollectionPath = navigation.urlPathToDataPath(location.pathname);
+                const panelsFromUrl = buildSidePanelsFromUrl(entityOrCollectionPath, navigation.collections ?? [], false);
+                // if we have more panels than determined by the url, we ignore the url. We might have references open
+                if (panelsFromUrl.length <= currentPanelKeys.length) {
+                    return;
+                }
+                const lastPanel = panelsFromUrl[panelsFromUrl.length - 1];
+                const panelProps = propsToSidePanel(lastPanel, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController);
+                const lastCurrentPanel = currentPanelKeys.length > 0 ? currentPanelKeys[currentPanelKeys.length - 1] : undefined;
+                if (!lastCurrentPanel || lastCurrentPanel !== panelProps.key) {
+                    sideDialogsController.replace(panelProps);
+                }
+            }
+        }
+    }, [location.pathname, location.hash, currentPanelKeys]);
+
+    // update side panels to match browser size
     useEffect(() => {
         const updatedSidePanels = sideDialogsController.sidePanels.map(sidePanelProps => {
             if (sidePanelProps.additional) {
-                return propsToSidePanel(sidePanelProps.additional, navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, smallLayout);
+                return propsToSidePanel(sidePanelProps.additional, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController);
             }
             return sidePanelProps;
         });
@@ -143,12 +178,18 @@ export const useBuildSideEntityController = (navigation: NavigationController,
             }
         );
 
-        sideDialogsController.open(propsToSidePanel({
-            selectedSubPath: defaultSelectedView,
-            ...props,
-        }, navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, smallLayout));
+        sideDialogsController.open(
+            propsToSidePanel({
+                    selectedTab: defaultSelectedView,
+                    ...props
+                },
+                navigation.buildUrlCollectionPath,
+                navigation.resolveIdsFrom,
+                smallLayout,
+                customizationController
+            ));
 
-    }, [sideDialogsController, navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, smallLayout]);
+    }, [sideDialogsController, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout]);
 
     const replace = useCallback((props: EntitySidePanelProps<any>) => {
 
@@ -156,9 +197,9 @@ export const useBuildSideEntityController = (navigation: NavigationController,
             throw Error("If you want to copy an entity you need to provide an entityId");
         }
 
-        sideDialogsController.replace(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, smallLayout));
+        sideDialogsController.replace(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController));
 
-    }, [navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, sideDialogsController, smallLayout]);
+    }, [navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, sideDialogsController, smallLayout]);
 
     return {
         close,
@@ -169,12 +210,12 @@ export const useBuildSideEntityController = (navigation: NavigationController,
 
 export function buildSidePanelsFromUrl(path: string, collections: EntityCollection[], newFlag: boolean): EntitySidePanelProps<any>[] {
 
-    const navigationViewsForPath: NavigationViewInternal<any>[] = getNavigationEntriesFromPathInternal({
+    const navigationViewsForPath: NavigationViewInternal<any>[] = getNavigationEntriesFromPath({
         path,
         collections
     });
 
-    const sidePanels: EntitySidePanelProps<any>[] = [];
+    let sidePanel: EntitySidePanelProps<any> | undefined = undefined;
     let lastCollectionPath = "";
     for (let i = 0; i < navigationViewsForPath.length; i++) {
         const navigationEntry = navigationViewsForPath[i];
@@ -183,70 +224,70 @@ export function buildSidePanelsFromUrl(path: string, collections: EntityCollecti
             lastCollectionPath = navigationEntry.path;
         }
 
-        if (i > 0) { // the first collection is handled by the main navigation
-            const previousEntry = navigationViewsForPath[i - 1];
-            if (navigationEntry.type === "entity") {
-                sidePanels.push({
-                        path: navigationEntry.path,
-                        entityId: navigationEntry.entityId,
-                        copy: false,
-                        width: navigationEntry.parentCollection?.sideDialogWidth
-                    }
-                );
-            } else if (navigationEntry.type === "custom_view") {
-                if (previousEntry.type === "entity") {
-                    const lastSidePanel: EntitySidePanelProps<any> = sidePanels[sidePanels.length - 1];
-                    if (lastSidePanel)
-                        lastSidePanel.selectedSubPath = navigationEntry.view.key;
-                }
-            } else if (navigationEntry.type === "collection") {
-                if (previousEntry.type === "entity") {
-                    const lastSidePanel: EntitySidePanelProps<any> = sidePanels[sidePanels.length - 1];
-                    if (lastSidePanel)
-                        lastSidePanel.selectedSubPath = navigationEntry.collection.id ?? navigationEntry.collection.path;
-                }
+        const previousEntry = navigationViewsForPath[i - 1];
+        if (navigationEntry.type === "entity") {
+            sidePanel = {
+                path: navigationEntry.path,
+                entityId: navigationEntry.entityId,
+                copy: false,
+                width: navigationEntry.parentCollection?.sideDialogWidth
+            };
+        } else if (navigationEntry.type === "custom_view") {
+            if (previousEntry?.type === "entity") {
+                if (sidePanel)
+                    sidePanel.selectedTab = navigationEntry.view.key;
+            }
+        } else if (navigationEntry.type === "collection") {
+            if (previousEntry?.type === "entity") {
+                if (sidePanel)
+                    sidePanel.selectedTab = navigationEntry.collection.id ?? navigationEntry.collection.path;
             }
         }
 
     }
 
     if (newFlag) {
-        sidePanels.push({
+        sidePanel = {
             path: lastCollectionPath,
             copy: false
-        });
+        }
     }
 
-    return sidePanels;
+    return sidePanel ? [sidePanel] : [];
 }
 
 const propsToSidePanel = (props: EntitySidePanelProps,
                           buildUrlCollectionPath: (path: string) => string,
-                          resolveAliasesFrom: (pathWithAliases: string) => string,
-                          smallLayout: boolean): SideDialogPanelProps => {
-
-        const collectionPath = removeInitialAndTrailingSlashes(props.path);
-
-        const newPath = props.entityId
-            ? buildUrlCollectionPath(`${collectionPath}/${props.entityId}/${props.selectedSubPath || ""}`)
-            : buildUrlCollectionPath(`${collectionPath}#${NEW_URL_HASH}`);
-        const resolvedPath = resolveAliasesFrom(props.path);
-
-        const resolvedPanelProps: EntitySidePanelProps<any> = {
-            ...props,
-            path: resolvedPath,
-        };
-
-        const entityViewWidth = getEntityViewWidth(props, smallLayout);
-
-        return {
-            key: `${props.path}/${props.entityId}`,
-            component: <EntitySidePanel {...resolvedPanelProps}/>,
-            urlPath: newPath,
-            parentUrlPath: buildUrlCollectionPath(collectionPath),
-            width: entityViewWidth,
-            onClose: props.onClose,
-            additional: props
-        };
-    }
-;
+                          resolveIdsFrom: (pathWithAliases: string) => string,
+                          smallLayout: boolean,
+                          customizationController: CustomizationController): SideDialogPanelProps => {
+
+    const collectionPath = removeInitialAndTrailingSlashes(props.path);
+
+    const newPath = props.entityId
+        ? buildUrlCollectionPath(`${collectionPath}/${props.entityId}${props.selectedTab ? "/" + props.selectedTab : ""}#${SIDE_URL_HASH}`)
+        : buildUrlCollectionPath(`${collectionPath}#${NEW_URL_HASH}`);
+    const resolvedPath = resolveIdsFrom(props.path);
+
+    const resolvedPanelProps: EntitySidePanelProps<any> = {
+        ...props,
+        path: resolvedPath,
+        formProps: props.formProps
+    };
+
+    const entityViewWidth = getEntityViewWidth(props, smallLayout, customizationController);
+
+    return {
+        key: `${props.path}/${props.entityId}`,
+        component: <EntitySidePanel {...resolvedPanelProps}/>,
+        urlPath: newPath,
+        parentUrlPath: buildUrlCollectionPath(collectionPath),
+        width: entityViewWidth,
+        onClose: props.onClose,
+        additional: props
+    };
+}
+
+function isSideUrl(url: string): boolean {
+    return url.endsWith("#" + SIDE_URL_HASH) || url.endsWith("#" + NEW_URL_HASH);
+}

package/src/internal/useUnsavedChangesDialog.tsx

@@ -1,108 +1,142 @@
-import React, { useCallback } from "react";
-import { Blocker, Transition } from "history";
-import { UNSAFE_NavigationContext, useNavigate } from "react-router-dom";
-import { Button, Dialog, DialogActions, DialogContent, Typography } from "@firecms/ui";
+import React, { useCallback, useEffect, useState } from "react";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@firecms/ui";
 
-export function useNavigationUnsavedChangesDialog(when: boolean, onSuccess: () => void):
-    {
-        navigationWasBlocked: boolean,
-        handleCancel: () => void,
-        handleOk: () => void
-    } {
-
-    const [nextLocation, setNextLocation] = React.useState<any | undefined>();
-    const { navigator } = React.useContext(UNSAFE_NavigationContext);
+/**
+ * Type representing a pending navigation action.
+ */
+type PendingNavigation =
+    | {
+    type: "popstate";
+    delta: number;
+}
+    | {
+    type: "link";
+    href: string;
+}
+    | null;
 
-    const navigate = useNavigate();
+/**
+ * Custom hook to handle navigation blocking when there are unsaved changes.
+ *
+ * @param when - Indicates whether to block navigation.
+ * @param onSuccess - Callback invoked when navigation is confirmed.
+ * @returns An object containing the state of navigation blocking and handlers.
+ */
+export function useNavigationUnsavedChangesDialog(
+    when: boolean,
+    onSuccess: () => void
+): {
+    navigationWasBlocked: boolean;
+    handleCancel: () => void;
+    handleOk: () => void;
+} {
+    const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);
+    const [pendingNavigation, setPendingNavigation] = useState<PendingNavigation>(null);
 
-    const handleCancel = () => {
-        setNextLocation(undefined);
-    };
+    /**
+     * Handler to cancel the navigation attempt.
+     */
+    const handleCancel = useCallback(() => {
+        setIsDialogOpen(false);
+        setPendingNavigation(null);
+    }, []);
 
-    const handleOk = () => {
-        onSuccess();
-        setNextLocation(undefined);
-        navigate(-1);
-    };
+    /**
+     * Handler to confirm and proceed with the navigation.
+     */
+    const handleOk = useCallback(() => {
+        setIsDialogOpen(false);
+        if (pendingNavigation) {
+            onSuccess();
+            if (pendingNavigation.type === "popstate") {
+                window.history.go(pendingNavigation.delta);
+            } else if (pendingNavigation.type === "link") {
+                window.location.href = pendingNavigation.href;
+            }
+            setPendingNavigation(null);
+        }
+    }, [onSuccess, pendingNavigation]);
 
-    const blocker: Blocker = useCallback(({
-                                              action,
-                                              location: nextLocation,
-                                              retry
-                                          }) => {
-        switch (action) {
-            case "REPLACE": {
-                retry();
-                return;
+    /**
+     * Event handler for beforeunload to handle page refresh or tab close.
+     */
+    const handleBeforeUnload = useCallback(
+        (e: BeforeUnloadEvent) => {
+            if (when) {
+                e.preventDefault();
+                e.returnValue = "";
             }
-            case "POP": {
-                setNextLocation(nextLocation);
+        },
+        [when]
+    );
+
+    /**
+     * Event handler for popstate to handle back and forward browser buttons.
+     */
+    const handlePopState = useCallback(
+        (e: PopStateEvent) => {
+            if (when) {
+                e.preventDefault();
+                // Assuming backward navigation; adjust delta as needed
+                setPendingNavigation({
+                    type: "popstate",
+                    delta: -1
+                });
+                setIsDialogOpen(true);
             }
-        }
-    }, []);
+        },
+        [when]
+    );
+
+    /**
+     * Event handler to intercept link clicks within the application.
+     */
+    const handleLinkClick = useCallback(
+        (e: MouseEvent) => {
+            if (!when) return;
 
-    React.useEffect(() => {
-        if (!when) return;
-        if (nextLocation) return;
-        if (!("block" in navigator)) return;
-        const unblock = (navigator as any).block((tx: Transition) => {
-            const autoUnblockingTx = {
-                ...tx,
-                retry() {
-                    unblock();
-                    tx.retry();
+            const target = e.target as HTMLElement;
+            const anchor = target.closest("a[href]") as HTMLAnchorElement | null;
+            if (anchor && anchor.host === window.location.host) {
+                e.preventDefault();
+                const href = anchor.getAttribute("href");
+                if (href) {
+                    setPendingNavigation({
+                        type: "link",
+                        href
+                    });
+                    setIsDialogOpen(true);
                 }
-            };
-            blocker(autoUnblockingTx);
-        });
+            }
+        },
+        [when]
+    );
+
+    /**
+     * Effect hook to add and clean up event listeners based on the `when` condition.
+     */
+    useEffect(() => {
+        if (when) {
+            window.addEventListener("beforeunload", handleBeforeUnload);
+            window.addEventListener("popstate", handlePopState);
+            document.addEventListener("click", handleLinkClick);
+        } else {
+            window.removeEventListener("beforeunload", handleBeforeUnload);
+            window.removeEventListener("popstate", handlePopState);
+            document.removeEventListener("click", handleLinkClick);
+        }
 
-        return unblock;
-    }, [navigator, blocker, when, nextLocation]);
+        // Cleanup on unmount or when `when` changes
+        return () => {
+            window.removeEventListener("beforeunload", handleBeforeUnload);
+            window.removeEventListener("popstate", handlePopState);
+            document.removeEventListener("click", handleLinkClick);
+        };
+    }, [when, handleBeforeUnload, handlePopState, handleLinkClick]);
 
     return {
-        navigationWasBlocked: Boolean(nextLocation),
+        navigationWasBlocked: isDialogOpen,
         handleCancel,
-        handleOk
+        handleOk,
     };
 }
-
-export interface UnsavedChangesDialogProps {
-    open: boolean;
-    body?: React.ReactNode;
-    title?: string;
-    handleOk: () => void;
-    handleCancel: () => void;
-}
-
-export function UnsavedChangesDialog({
-                                         open,
-                                         handleOk,
-                                         handleCancel,
-                                         body,
-                                         title
-                                     }: UnsavedChangesDialogProps) {
-
-    return (
-        <Dialog
-            onEscapeKeyDown={() => {
-                handleCancel();
-            }}
-            open={open}
-        >
-            <DialogContent>
-                <Typography variant={"h6"}>{title}</Typography>
-
-                {body}
-
-                <Typography>
-                    Are you sure you want to leave this page?
-                </Typography>
-
-            </DialogContent>
-            <DialogActions>
-                <Button variant="text" onClick={handleCancel} autoFocus> Cancel </Button>
-                <Button onClick={handleOk}> Ok </Button>
-            </DialogActions>
-        </Dialog>
-    );
-}

package/src/preview/PropertyPreview.tsx

@@ -53,10 +53,10 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
     const property = resolveProperty({
         propertyKey,
         propertyOrBuilder: inputProperty,
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs
     });
 
-    if (value === undefined || property === null) {
+    if (property === null) {
         content = <EmptyValue/>;
     } else if (property.Preview) {
         content = createElement(property.Preview as React.ComponentType<PropertyPreviewProps>,
@@ -70,12 +70,19 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
                 // entity,
                 customProps: property.customProps
             });
-    } else if (value === null) {
+    } else if (value === undefined || value === null) {
         content = <EmptyValue/>;
     } else if (property.dataType === "string") {
         const stringProperty = property as ResolvedStringProperty;
         if (typeof value === "string") {
-            if (stringProperty.url) {
+            if (stringProperty.storage) {
+                const filePath = stringProperty.storage.previewUrl ? stringProperty.storage.previewUrl(value) : value;
+                content = <StorageThumbnail
+                    interactive={interactive}
+                    storeUrl={property.storage?.storeUrl ?? false}
+                    size={props.size}
+                    storagePathOrDownloadUrl={filePath}/>;
+            } else if (stringProperty.url) {
                 if (typeof stringProperty.url === "boolean")
                     content =
                         <UrlComponentPreview size={props.size}
@@ -88,13 +95,6 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
                                              previewType={stringProperty.url}/>;
             } else if (stringProperty.markdown) {
                 content = <Markdown source={value} size={"small"}/>;
-            } else if (stringProperty.storage) {
-                const filePath = stringProperty.storage.previewUrl ? stringProperty.storage.previewUrl(value) : value;
-                content = <StorageThumbnail
-                    interactive={interactive}
-                    storeUrl={property.storage?.storeUrl ?? false}
-                    size={props.size}
-                    storagePathOrDownloadUrl={filePath}/>;
             } else {
                 content = <StringPropertyPreview {...props}
                                                  property={stringProperty}

package/src/preview/PropertyPreviewProps.tsx

@@ -3,7 +3,7 @@ import { CMSType, Property, ResolvedProperty } from "../types";
 /**
  * @group Preview components
  */
-export type PreviewSize = "medium" | "small" | "smallest";
+export type PreviewSize = "small" | "medium" | "large";
 
 /**
  * @group Preview components

package/src/preview/components/BooleanPreview.tsx

@@ -21,6 +21,6 @@ export function BooleanPreview({
                   size={size}
                   color={"secondary"}/>
         {property.name && <span
-            className={cls("text-text-secondary dark:text-text-secondary-dark", size === "smallest" ? "text-sm" : "")}>{property.name}</span>}
+            className={cls("text-text-secondary dark:text-text-secondary-dark", size === "small" ? "text-sm" : "")}>{property.name}</span>}
     </div>;
 }

package/src/preview/components/EmptyValue.tsx

@@ -6,5 +6,5 @@ import React from "react";
 export function EmptyValue() {
 
     return <div
-        className="rounded-full bg-gray-200 bg-opacity-30 dark:bg-opacity-20 w-5 h-2 inline-block"/>;
+        className="rounded-full bg-surface-200 bg-opacity-30 dark:bg-opacity-20 w-5 h-2 inline-block"/>;
 }

package/src/preview/components/EnumValuesChip.tsx

@@ -6,7 +6,7 @@ import { buildEnumLabel, enumToObjectEntries, getColorScheme, getLabelOrConfigFr
 export interface EnumValuesChipProps {
     enumValues?: EnumValues;
     enumKey: string | number;
-    size: "smallest" | "small" | "medium";
+    size: "small" | "medium" | "large";
     className?: string;
     children?: React.ReactNode;
 }

package/src/preview/components/ImagePreview.tsx

@@ -22,7 +22,7 @@ export function ImagePreview({
 
     const imageSize = useMemo(() => getThumbnailMeasure(size), [size]);
 
-    if (size === "smallest") {
+    if (size === "small") {
         return (
             <img src={url}
                  className={"rounded-md"}
@@ -56,7 +56,6 @@ export function ImagePreview({
                  className={"rounded-md"}
                  style={imageStyle}/>
 
-
             <div className={"flex flex-row gap-2 absolute bottom-[-4px] right-[-4px] invisible group-hover:visible"}>
                 {navigator && <Tooltip
                     asChild={true}
@@ -69,8 +68,8 @@ export function ImagePreview({
                             e.preventDefault();
                             return navigator.clipboard.writeText(url);
                         }}>
-                        <ContentCopyIcon className={"text-gray-700 dark:text-gray-300"}
-                                         size={"small"}/>
+                        <ContentCopyIcon className={"text-surface-700 dark:text-surface-300"}
+                                         size={"smallest"}/>
                     </IconButton>
                 </Tooltip>}
 
@@ -85,8 +84,8 @@ export function ImagePreview({
                         size={"small"}
                         onClick={(e: any) => e.stopPropagation()}
                     >
-                        <OpenInNewIcon className={"text-gray-700 dark:text-gray-300"}
-                                       size={"small"}/>
+                        <OpenInNewIcon className={"text-surface-700 dark:text-surface-300"}
+                                       size={"smallest"}/>
                     </IconButton>
                 </Tooltip>
             </div>