vizality/renderer/src/modules/components/addon/AddonListing.jsx

import { __TabBar, StickyElement, ImageModal, Image, Markdown } from '@vizality/components';
import { Section } from '@vizality/components/dashboard';
import React, { memo } from 'react';
import { openModal } from '@vizality/modal';
import { joinClassNames } from '@vizality/util/dom';
import { toPlural } from '@vizality/util/string';
import { useRouteMatch } from 'react-router';
import { Messages } from '@vizality/i18n';

const AddonScreenshots = memo(({ addon }) => {
  return (
    <div className='vz-addon-listing-screenshots-grid-wrapper'>
      {addon?.manifest?.screenshots?.map((image, index) =>
        <Image
          className='vz-image-wrapper'
          src={image}
          onClick={() => openModal(() => <ImageModal src={addon.manifest.screenshots[index]} />)}
        />
      )}
    </div>
  );
});

export default memo(({ addonId, type, section }) => {
  const { path, url } = useRouteMatch();
  type = type || (/(\/plugin\/)/).test(path) ? 'plugin' : (/(\/theme\/)/).test(path) ? 'theme' : 'plugin';
  addonId = addonId || url?.replace(`/vizality/${type}/`, '').split('/')[0];
  section = section || url?.replace(`/vizality/${type}/${addonId}/`, '') || 'overview';
  let addon = vizality.manager[toPlural(type)].get(addonId);
  const hasSettings = vizality.manager[toPlural(type)].hasSettings(addonId);
  const hasChangelog = vizality.manager[toPlural(type)].hasChangelog(addonId);
  const hasReadme = vizality.manager[toPlural(type)].hasReadme(addonId);
  const isEnabled = vizality.manager[toPlural(type)].isEnabled(addonId);
  const isInstalled = vizality.manager[toPlural(type)].isInstalled(addonId);
  const hasScreenshots = vizality.manager[toPlural(type)].hasScreenshots(addonId);
  const AddonSettings = hasSettings && addon?.sections?.settings?.render;

  /**
   *
   */
  if (!addon) {
    addon = vizality.manager.community[toPlural(type)].get(addonId);
  }

  /**
   *
   */
  if (!addon) {
    return <></>;
  }

  const scrollToTop = () => {
    const scroller = document.querySelector('.vz-dashboard-scroller');
    if (scroller) {
      scroller.scroll({ top: 0, behavior: 'smooth' });
    }
  };

  return (
    <div className='vz-addon-listing'>
      {addon.manifest?.banner && (
        <div className='vz-addon-listing-banner-background' style={{ '--addon-banner': addon.manifest.banner }} />
      )}
      <div className='vz-addon-listing-top-card' />
      <StickyElement wrapperClassName='vz-addon-listing-sticky-bar-wrapper' className='vz-addon-listing-sticky-bar'>
        <__TabBar type={__TabBar.Types.TOP_PILL}>
          <__TabBar.NavItem
            route={`/vizality/${type}/${addonId}/overview`}
            onClick={() => {
              scrollToTop();
              vizality.api.routes.navigateTo(`/vizality/${type}/${addonId}/overview`);
            }}
          >
            {Messages.OVERVIEW}
          </__TabBar.NavItem>
          {hasScreenshots && (
            <__TabBar.NavItem
              route={`/vizality/${type}/${addonId}/screenshots`}
              onClick={() => {
                scrollToTop();
                vizality.api.routes.navigateTo(`/vizality/${type}/${addonId}/screenshots`);
              }}
            >
              Screenshots
            </__TabBar.NavItem>
          )}
          {isInstalled && isEnabled && hasSettings && (
            <__TabBar.NavItem
              route={`/vizality/${type}/${addonId}/settings`}
              onClick={() => {
                scrollToTop();
                vizality.api.routes.navigateTo(`/vizality/${type}/${addonId}/settings`);
              }}
            >
              Settings
            </__TabBar.NavItem>
          )}
          <__TabBar.NavItem
            route={`/vizality/${type}/${addonId}/reviews`}
            onClick={() => {
              scrollToTop();
              vizality.api.routes.navigateTo(`/vizality/${type}/${addonId}/reviews`);
            }}
            disabled
          >
            Reviews
          </__TabBar.NavItem>
          {hasChangelog && (
            <__TabBar.NavItem
              route={`/vizality/${type}/${addonId}/changelog`}
              onClick={() => {
                scrollToTop();
                vizality.api.routes.navigateTo(`/vizality/${type}/${addonId}/changelog`);
              }}
            >
              Changelog
            </__TabBar.NavItem>
          )}
        </__TabBar>
      </StickyElement>
      <div className='vz-addon-listing-content'>
        {hasReadme && section === 'overview' && (
          <Section header='Overview' icon='info-filled'>
            <Markdown source={addon.sections.readme} addonId={addonId} type={type} />
          </Section>
        )}
        {hasScreenshots && section === 'screenshots' && (
          <Section header='Screenshots' icon='pictures'>
            <AddonScreenshots addon={addon} />
          </Section>
        )}
        {isInstalled && isEnabled && hasSettings && section === 'settings' && (
          <Section header='Settings' icon='gear'>
            <AddonSettings />
          </Section>
        )}
        {section === 'reviews' && (
          <Section header='Reviews' icon='star'>

          </Section>
        )}
        {hasChangelog && section === 'changelog' && (
          <Section header='Changelog' icon='more-info'>
            {/* <Markdown source={addon.sections.changelog} /> */}
          </Section>
        )}
      </div>
    </div>
  );
});