Render thumbnail in Flex object list view

 admin:
    menu:
      list:                
        title: News
        icon: fa-newspaper-o
    list:
      fields:
        published:
          field:
            type: toggle
            label: Active
          width: 5
        news_title:
          field:
            label: Name
          link: edit
        news_date:
          field:
            label: Date
            type: datetime
        news_image:
          field:
            type: field
            label: Photo

use RocketTheme\Toolbox\Event\Event;
(...)
    public function onApiSidebarItems(Event $event): void
    {
        $items = $event['items'] ?? [];
        $items[] = [
            'id'       => 'news',
            'plugin'   => 'news',
            'label'    => 'My Custom Thumbnail List',
            'icon'     => 'fa-newspaper-o',
            'route'    => '/plugin/news',
        ];
        $event['items'] = $items;
    }
    public function onApiPluginPageInfo(Event $event): void
    {
        if ($event['plugin'] !== 'news') {
            return;
        }

        $event['definition'] = [
            'id'        => 'news',
            'plugin'    => 'news',
            'title'     => 'My Custom Thumbnail List',
            'icon'      => 'fa-newspaper-o',
            'page_type' => 'component',
        ];
    }

// user/plugins/news/admin-next/pages/news.js
const TAG = window.__GRAV_PAGE_TAG
customElements.define(TAG, class extends HTMLElement {
    async connectedCallback() {
        const root = this.attachShadow({ mode: 'open' });
        root.innerHTML = '<div>Loading...</div>'

        try {
            const baseUrl = window.__GRAV_API_SERVER_URL || '';
            const prefix = window.__GRAV_API_PREFIX || '';
            const token = window.__GRAV_API_TOKEN || '';
            const type = 'news';

            const endpoint = `${baseUrl}${prefix}/flex-objects/${type}`;

            const response = await fetch(endpoint, {
                method: 'GET',
                headers: {
                  'Accept': 'application/json',
                  'X-API-Token': token,
                }
            });

            if (!response.ok) {
                throw new Error(`API error: ${response.status} ${response.statusText}`);
            }

            const res = await response.json();
            const items = res.data || [];

            root.innerHTML = '<div id="grid" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(120px, 1fr));"></div>'
            const gridEl = root.querySelector("#grid");
            items.forEach(item => {
                const newsImage = item.news_image;
                if (!newsImage || typeof newsImage !== 'object') {
                    return;
                }
                const images = Object.values(newsImage)
                if (images.length === 0) {
                    return;
                }
                const imagePath = `${baseUrl}/user/data/${type}/${item.key}/${images[0].path}`;
                const a = document.createElement('a');
                const editUrl = `${baseUrl}${window.__GRAV_ADMIN_BASE}/flex-objects/${type}/${item.key}`;
                a.href = editUrl;
                a.addEventListener('click', e => {
                    e.preventDefault();
                    window.__GRAV_NAVIGATE(editUrl);
                });
                const img = document.createElement('img');
                img.src = imagePath;
                img.style.width = '120px';
                img.style.height = 'auto';
                a.appendChild(img);
                gridEl.appendChild(a);
            });

        } catch (error) {
            window.__GRAV_TOAST.error('Failed to load news list');
        }
    }
});