cleanup: remove unused code from addons and marketplace

src/components/Elements/MainModal/scss/index.scss

@@ -3,6 +3,7 @@
 @use 'modules/topBar' as *;
 @use 'modules/sidebar' as *;
 @use 'modules/navbar' as *;
+@use 'modules/buttons' as *;
 @use 'modules/modalTabContent' as *;
 @use 'modules/links' as *;
 @use 'modules/scrollbars' as *;

src/components/Elements/MainModal/scss/marketplace/_main.scss

@@ -1,24 +1,7 @@
 // this file is too long
-@use 'modules/item' as *;
-@use 'modules/buttons' as *;
 @use 'modules/lightbox' as *;
 @use 'scss/variables' as *;
 
-.creatorItems {
-  .item {
-    flex-flow: row !important;
-  }
-
-  .item-icon {
-    margin: 0 !important;
-  }
-
-  .card-details {
-    margin: 0 !important;
-    text-align: left;
-  }
-}
-
 .items {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(250px, 280px));
@@ -201,189 +184,6 @@
   }
 }
 
-.itemPage {
-  display: flex;
-  flex-flow: row;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 30px;
-  flex-wrap: wrap;
-
-  .itemContent {
-    display: flex;
-    flex-flow: column;
-    gap: 25px;
-    flex: 1;
-
-    img {
-      width: 100%;
-      height: auto;
-      border-radius: 12px;
-    }
-
-    table {
-      table-layout: fixed;
-      width: 100%;
-      word-wrap: break-word !important;
-      font-size: 16px;
-      border-collapse: collapse;
-    }
-
-    .itemTop {
-      display: flex;
-      flex-direction: column;
-      gap: 18px;
-    }
-
-    .itemTabs {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 12px;
-
-      .itemTab {
-        border-radius: 999px;
-        padding: 0.55rem 1.3rem;
-        border: 1px solid transparent;
-        background: transparent;
-        font-weight: 600;
-        cursor: pointer;
-        transition:
-          transform 0.2s ease,
-          box-shadow 0.2s ease;
-
-        @include themed {
-          color: t($subColor);
-          border-color: rgb(255 255 255 / 10%);
-          background-color: rgb(255 255 255 / 5%);
-        }
-
-        &:hover {
-          transform: translateY(-1px);
-
-          @include themed {
-            border-color: rgb(255 255 255 / 18%);
-          }
-        }
-
-        &.active {
-          @include themed {
-            color: t($color);
-            background-color: t($modal-sidebarActive);
-            border-color: transparent;
-          }
-        }
-      }
-    }
-
-    .tabContent {
-      display: flex;
-      flex-direction: column;
-      gap: 25px;
-    }
-
-    .itemHighlights {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-      gap: 18px;
-
-      .highlightCard {
-        display: flex;
-        flex-direction: column;
-        gap: 6px;
-        padding: 18px;
-        border-radius: 14px;
-        border: 1px solid transparent;
-
-        @include themed {
-          background-color: t($modal-secondaryColour);
-          border-color: rgb(255 255 255 / 8%);
-          box-shadow: 0 0 0 1px t($modal-sidebarActive);
-        }
-
-        .highlightLabel {
-          font-size: 14px;
-
-          @include themed {
-            color: t($subColor);
-          }
-        }
-
-        .highlightValue {
-          font-size: 30px;
-          font-weight: 600;
-
-          @include themed {
-            color: t($color);
-          }
-        }
-      }
-    }
-
-    .marketplaceDetails {
-      .moreInfo {
-        margin-top: 10px;
-      }
-    }
-  }
-
-  .itemInfo {
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-    border-radius: 15px;
-    flex: 0 0 300px;
-    width: 300px;
-    max-width: 100%;
-    max-height: 700px;
-
-    .front {
-      padding: 20px;
-      height: 100%;
-      display: flex;
-      flex-flow: column;
-      gap: 15px;
-      width: 100%;
-      box-sizing: border-box !important;
-      border-radius: 12px 12px 0 0;
-      -webkit-backdrop-filter: blur(40px) saturate(150%) brightness(75%);
-      backdrop-filter: blur(40px) saturate(150%) brightness(75%);
-
-      @include themed {
-        background-image: linear-gradient(to bottom, transparent, t($modal-background));
-      }
-    }
-
-    .icon {
-      width: 100%;
-      height: auto;
-      border-radius: 12px;
-      box-shadow: 0 5px 25px black;
-      aspect-ratio: 1 / 1;
-      object-fit: cover;
-    }
-
-    .divider {
-      text-transform: uppercase;
-
-      @include themed {
-        color: t($subColor);
-      }
-    }
-
-    .iconButtons {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      grid-template-rows: 1fr;
-      grid-gap: 20px;
-
-      button {
-        width: 100%;
-        padding: 0;
-      }
-    }
-  }
-}
-
 .emptyItems {
   width: 100%;
   height: 100%;
@@ -468,35 +268,6 @@ p.author {
   cursor: pointer;
 }
 
-.returnButton {
-  display: grid;
-  place-items: center;
-  width: 48px;
-  height: 48px;
-  border-radius: 12px;
-  cursor: pointer;
-
-  svg {
-    font-size: 2em;
-  }
-
-  &:hover {
-    background: rgb(121 121 121 / 22.6%);
-  }
-}
-
-.flexTopMarketplace {
-  display: flex;
-  margin-bottom: 15px;
-
-  .tooltip {
-    margin-right: 25px;
-  }
-
-  .mainTitle {
-    margin-bottom: 0 !important;
-  }
-}
 
 .filter {
   display: flex;
@@ -520,147 +291,6 @@ p.author {
   }
 }
 
-.collectionPage {
-  // height: 200px;
-  padding: 1.5rem;
-  display: flex;
-  flex-flow: column;
-  align-items: center;
-  justify-content: center;
-  gap: 15px;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-
-  @include themed {
-    border-radius: t($borderRadius);
-  }
-
-  .nice-tag {
-    border-radius: 150px;
-    padding: 1px 12px;
-    -webkit-backdrop-filter: blur(16px) saturate(180%);
-    backdrop-filter: blur(16px) saturate(180%);
-    background-color: rgb(255 255 255 / 10%);
-    border: 1px solid rgb(209 213 219 / 30%);
-    color: #fff;
-  }
-
-  .content {
-    display: flex;
-    flex-flow: column;
-    text-align: center;
-    text-shadow: #000 0 0 15px;
-
-    .mainTitle {
-      justify-content: center;
-      color: #fff !important;
-    }
-
-    .subtitle {
-      color: #ccc !important;
-    }
-  }
-}
-
-.collection {
-  display: flex;
-  justify-content: space-between;
-  padding: 36px 48px;
-  margin: 15px 0;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  align-items: center;
-
-  @include themed {
-    box-shadow: 0 0 0 1px t($modal-sidebarActive);
-    border-radius: t($borderRadius);
-  }
-
-  .content {
-    display: flex;
-    flex-flow: column;
-    gap: 15px;
-    max-width: 250px;
-    text-shadow: #000 0 0 15px;
-
-    .title {
-      color: #fff !important;
-    }
-
-    .subtitle {
-      color: #ccc !important;
-      overflow: hidden;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 5;
-      line-clamp: 5;
-    }
-  }
-
-  .items {
-    justify-content: center;
-  }
-}
-
-.marketplaceRefresh {
-  display: flex;
-  flex-flow: row;
-  gap: 5px;
-  align-items: center;
-}
-
-.marketplaceSearch {
-  display: flex;
-  align-items: center;
-  padding: 10px 30px;
-  border-radius: 10px;
-  font-size: 18px;
-
-  @include themed {
-    box-shadow: 0 0 0 3px t($modal-sidebarActive);
-    background: t($modal-sidebar);
-  }
-
-  input {
-    all: unset;
-  }
-
-  @include themed {
-    &:focus-within {
-      background: t($modal-sidebarActive);
-      box-shadow: 0 0 0 1px t($color);
-    }
-
-    &:disabled {
-      background: t($modal-sidebarActive);
-      cursor: not-allowed;
-    }
-  }
-}
-
-.inCollection {
-  // background-image: linear-gradient(to left, transparent, #000),
-  //  url('https://external-preview.redd.it/JyhsEoGMhKIMi3kvfBS24L0IllAO_KrIm4UI-dA1Ax4.jpg?auto=webp&s=b5adf9859b2c1855a5b3085f9453a6e878548505');
-  display: flex;
-  flex-flow: column;
-  gap: 5px;
-  padding: 5px;
-  margin: 10px 0;
-
-  @include themed {
-    // background-color: t($modal-secondaryColour);
-    // box-shadow: 0 0 0 1px t($modal-sidebarActive);
-    border-radius: t($borderRadius);
-  }
-
-  .title:hover {
-    cursor: pointer;
-    text-decoration: underline;
-  }
-}
-
 .createYourOwn {
   display: flex;
   flex-flow: column;

src/components/Elements/MainModal/scss/marketplace/modules/_item.scss

@@ -1,182 +0,0 @@
-@use 'scss/variables' as *;
-
-.side {
-  float: right;
-  margin-left: 20px;
-}
-
-p.description {
-  margin-top: 0;
-  max-width: 800px;
-}
-
-.moreInfo {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 30px;
-
-  .items {
-    margin-top: 0 !important;
-  }
-
-  .item {
-    flex: 1 0 40% !important;
-  }
-
-  .infoItem {
-    display: flex;
-    flex-flow: row;
-    align-items: center;
-    gap: 15px;
-
-    svg {
-      @include themed {
-        background-image: t($slightGradient);
-        box-shadow: t($boxShadow);
-      }
-
-      font-size: 18px;
-      padding: 7px;
-      border-radius: 100%;
-    }
-
-    .text {
-      display: flex;
-      flex-flow: column;
-      font-size: medium;
-    }
-  }
-
-  .header {
-    // text-transform: uppercase;
-    font-size: small;
-
-    @include themed {
-      color: t($subColor);
-    }
-  }
-
-  span {
-    @include themed {
-      color: t($color);
-    }
-  }
-
-  @include themed {
-    background: t($modal-secondaryColour);
-    box-shadow: 0 0 0 1px t($modal-sidebarActive);
-    border-radius: t($borderRadius);
-    padding: 15px;
-  }
-}
-
-.subHeader {
-  display: flex;
-  flex-flow: row;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 25px;
-
-  .itemWarning {
-    padding: 10px 20px;
-    display: flex;
-    flex-flow: row;
-    gap: 15px;
-    align-items: center;
-
-    .text {
-      display: flex;
-      flex-flow: column;
-    }
-
-    svg {
-      @include themed {
-        background-image: t($slightGradient);
-        box-shadow: t($boxShadow);
-      }
-
-      padding: 7px;
-      border-radius: 100%;
-    }
-
-    @include themed {
-      background: t($modal-sidebar);
-      border-radius: t($borderRadius);
-      box-shadow: 0 0 0 1px t($modal-sidebarActive);
-    }
-  }
-
-  .items {
-    margin-top: 0 !important;
-  }
-
-  .item {
-    flex: 1 0 40% !important;
-  }
-
-  .infoItem {
-    display: flex;
-    flex-flow: row;
-    align-items: center;
-    gap: 15px;
-    flex: 1 0 44%;
-
-    svg {
-      @include themed {
-        background-image: t($slightGradient);
-        box-shadow: t($boxShadow);
-      }
-
-      font-size: 18px;
-      padding: 7px;
-      border-radius: 100%;
-    }
-
-    .text {
-      font-size: medium;
-      display: flex;
-      flex-flow: column;
-    }
-  }
-
-  .header {
-    font-size: small;
-
-    @include themed {
-      color: t($subColor);
-    }
-  }
-
-  span {
-    @include themed {
-      color: t($color);
-    }
-  }
-}
-
-.showMoreItems {
-  display: flex;
-  flex-flow: column;
-  justify-content: center;
-  align-items: center;
-  gap: 10px;
-}
-
-.marketplaceDescription {
-  display: flex;
-  flex-flow: column;
-  gap: 15px;
-
-  .subtitle {
-    -webkit-user-select: text !important;
-    user-select: text !important;
-  }
-}
-
-.moreFromCurator {
-  margin-top: 50px;
-  display: flex;
-  flex-flow: column;
-  gap: 15px;
-}

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}
     </>
   );
 }