Image pane improvements

[namvdo]

• Add a button to jump to the active image pane
• Add a pulldown menu containing available image panes.

[joyhughes]

Here, include the words "source image" and display the thumbnail - clicking on thumbnail will jump to image plane.

In cellular automata scene, do the same with source and target images - image pane will display the menu with both source and target images.

[joyhughes]

Scene thumbnails have disappeared

[joyhughes]

Source image selector should be within a widget container

[joyhughes]

In CA scene, target image selector should be a widget, showing the target image thumbnail. Widget should only be displayed if target switch is on.

On image pane, both source and target image should appear in the menu

[joyhughes]

Remove the functions below. All image pickers should be handled the same as any other widget. They should use the same font as other widgets, with the name of the widget followed by the thumbnail.

Clicking on thumbnail should go to image pane.

    // Determine if the active image is source or target based on widget name
    const getImageLabel = () => {
        if (!activeImage) return "Images";
        const widgetName = activeImage.name.toLowerCase();
        if (widgetName.includes('source')) return "Source Image";
        if (widgetName.includes('target')) return "Target Image";
        return "Images";
    };

    // Filter out any group that has image picker widgets for the Home pane
    const nonImageGroups = activeGroups.filter(group => {
        // For groups, check if they have image pickers
        if (group.widgets) {
            const hasImageWidget = group.widgets.some(widgetName => {
                try {
                    const widgetJSON = window.module?.get_widget_JSON(widgetName);
                    const widget = JSON.parse(widgetJSON);
                    return widget?.tool === 'image';
                } catch (error) {
                    return false;
                }
            });

            return !hasImageWidget;
        }

        return true;
    });

[joyhughes]

Remove the following section. Image picker should be handled like other widgets.

                            display: 'flex', 
                            alignItems: 'center', 
                            gap: 1
                        }}>
                            <Typography variant="body2" sx={{ fontWeight: 500 }}>
                                {getImageLabel()}
                            </Typography>
                            {activeImage && (
                                <Box
                                    sx={{
                                        width: 32,
                                        height: 32,
                                        borderRadius: 0.5,
                                        border: '1px solid',
                                        borderColor: 'primary.main',
                                        boxShadow: 1,
                                        overflow: 'hidden',
                                        flexShrink: 0
                                    }}
                                >
                                    <ThumbnailCanvas
                                        imageName={activeImage.path}
                                        width={32}
                                        height={32}
                                        setStatus={setThumbnailStatus}
                                    />
                                </Box>
                            )}
                        </Box>

[joyhughes]

In widget_group.jsx line 115, no longer disable image widgets. Include the name of the widget and thumbnail, click takes to image pane.

            case 'menu_string':
                if (widget.tool === 'image' && !disableImageWidgets) {
                    return (
                        <Box key={widget.name} sx={{ mb: 1, width: '100%' }}>
                            <MasonryImagePicker
                                json={widget}
                                width="100%"
                                onChange={onChange}
                                imageType={widget.name === 'source_image_menu' ? 'source' : 'target' }
                            />
                        </Box>
                    );
                }

[namvdo]

Please take a look at: #282 instead