cleanup: remove unused code from addons and marketplace

src/features/marketplace/components/Items/Items.jsx

@@ -1,16 +1,13 @@
 import variables from 'config/variables';
 import React, { memo, useState, useMemo } from 'react';
 import {
-  MdAutoFixHigh,
-  MdOutlineArrowForward,
-  MdOutlineOpenInNew,
   MdCheckCircle,
   MdOutlineUploadFile,
   MdClose,
 } from 'react-icons/md';
 import placeholderIcon from 'assets/icons/marketplace-placeholder.png';
 
-import { Button, Tooltip } from 'components/Elements';
+import { Tooltip } from 'components/Elements';
 import Dropdown from '../../../../components/Form/Settings/Dropdown/Dropdown';
 
 function filterItems(item, filter, categoryFilter) {
@@ -60,48 +57,6 @@ function getTypeTranslationKey(type) {
 function ItemCard({ item, toggleFunction, type, onCollection, isCurator, isInstalled, isAdded, onUninstall }) {
   item._onCollection = onCollection;
 
-  // Convert hex color to RGB for gradient with opacity
-  const hexToRgb = (hex) => {
-    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    return result
-      ? {
-          r: parseInt(result[1], 16),
-          g: parseInt(result[2], 16),
-          b: parseInt(result[3], 16),
-        }
-      : null;
-  };
-
-  const getGradientStyle = () => {
-    if (!item.colour) return {};
-
-    const rgb = hexToRgb(item.colour);
-    if (!rgb) return {};
-
-    const baseColor = `${rgb.r}, ${rgb.g}, ${rgb.b}`;
-
-    return {
-      '--item-gradient0': `rgba(${baseColor}, 0.38)`,
-      '--item-gradient10': `rgba(${baseColor}, 0.35)`,
-      '--item-gradient75': `rgba(${baseColor}, 0.14)`,
-      '--item-gradient100': `rgba(${baseColor}, 0.06)`,
-      backgroundImage: `radial-gradient(circle at center 25%, var(--item-gradient0) 0%, var(--item-gradient10) 10%, var(--item-gradient75) 75%, var(--item-gradient100) 100%)`,
-    };
-  };
-
-  const getBadgeStyle = () => {
-    if (!item.colour) return {};
-
-    const rgb = hexToRgb(item.colour);
-    if (!rgb) return {};
-
-    const baseColor = `${rgb.r}, ${rgb.g}, ${rgb.b}`;
-
-    return {
-      backgroundColor: `rgba(${baseColor}, 0.9)`,
-    };
-  };
-
   const isSideloaded = item.sideload === true;
 
   return (
@@ -109,7 +64,6 @@ function ItemCard({ item, toggleFunction, type, onCollection, isCurator, isInsta
       className={`item ${isSideloaded ? 'item-sideloaded' : ''}`}
       onClick={isSideloaded ? undefined : () => toggleFunction(item)}
       key={item.name}
-      style={getGradientStyle()}
     >
       {isAdded && onUninstall && (
         <Tooltip
@@ -138,7 +92,7 @@ function ItemCard({ item, toggleFunction, type, onCollection, isCurator, isInsta
         </Tooltip>
       )}
       {isInstalled && item.colour && !isSideloaded && (
-        <div className="item-installed-badge" style={getBadgeStyle()}>
+        <div className="item-installed-badge">
           <MdCheckCircle />
         </div>
       )}
@@ -187,13 +141,9 @@ function Items({
   isCurator,
   type,
   items,
-  collection,
   toggleFunction,
-  collectionFunction,
   onCollection,
   filter,
-  moreByCreator,
-  showCreateYourOwn,
   filterOptions = false,
   onSortChange,
   isAdded = false,
@@ -223,48 +173,8 @@ function Items({
     }
   };
 
-  const shouldShowCollection =
-    ((collection && !onCollection && (filter === null || filter === '')) ||
-      (type === 'collections' && !onCollection && (filter === null || filter === ''))) &&
-    type !== 'preset_settings';
-
   return (
     <>
-      {shouldShowCollection && (
-        <div
-          className="collection"
-          style={
-            collection?.news
-              ? { backgroundColor: collection?.background_colour }
-              : {
-                  backgroundImage: `linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7), transparent, rgba(0, 0, 0, 0.7), rgba(0 ,0, 0, 0.9)), url('${collection?.img}')`,
-                }
-          }
-        >
-          <div className="content">
-            <span className="title">{collection?.display_name}</span>
-            <span className="subtitle">{collection?.description}</span>
-          </div>
-          {collection?.news === true ? (
-            <a
-              className="btn-collection"
-              href={collection?.news_link}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              {variables.getMessage('modals.main.marketplace.learn_more')} <MdOutlineOpenInNew />
-            </a>
-          ) : (
-            <Button
-              type="collection"
-              onClick={() => collectionFunction(collection?.name)}
-              icon={<MdOutlineArrowForward />}
-              label={variables.getMessage('modals.main.marketplace.explore_collection')}
-              iconPlacement={'right'}
-            />
-          )}
-        </div>
-      )}
       {/* Items Filter Options */}
       {filterOptions && (
         <div className="filter-options-container">
@@ -290,7 +200,7 @@ function Items({
           />
         </div>
       )}
-      <div className={`items ${moreByCreator ? 'creatorItems' : ''}`}>
+      <div className='items'>
         {items
           ?.filter((item) => filterItems(item, filter, filterOptions ? selectedCategory : 'all'))
           .map((item, index) => (
@@ -308,24 +218,6 @@ function Items({
           ))}
       </div>
       <div className="loader"></div>
-      {!onCollection && showCreateYourOwn ? (
-        <div className="createYourOwn">
-          <MdAutoFixHigh />
-          <span className="title">{variables.getMessage('modals.main.marketplace.cant_find')}</span>
-          <span className="subtitle">
-            {variables.getMessage('modals.main.marketplace.knowledgebase_one') + ' '}
-            <a
-              className="link"
-              target="_blank"
-              href={variables.constants.KNOWLEDGEBASE}
-              rel="noreferrer"
-            >
-              {variables.getMessage('modals.main.marketplace.knowledgebase_two')}
-            </a>
-            {' ' + variables.getMessage('modals.main.marketplace.knowledgebase_three')}
-          </span>
-        </div>
-      ) : null}
     </>
   );
 }