feat: naver search engine option

- Limit on carousel items optimisation
- marketplace icon fallback

Co-authored-by: David Ralph <me@davidcralph.co.uk>

src/features/marketplace/components/Collection/Collection.jsx

@@ -19,7 +19,7 @@ const Collection = ({ collection, collectionFunction }) => {
     <div className="collection" style={getStyle()}>
       <div className="content">
         <span className="title">{display_name} using component</span>
-        <span className="subtitle">{description}</span>
+        <span className="subtitle">{description ? description.substr(0, 75) : ''}</span>
       </div>
       {collection.news === true ? (
         <a

src/features/marketplace/components/Elements/Carousel/Carousel.jsx

@@ -50,7 +50,7 @@ function EmblaCarousel({ data }) {
     <div className="carousel">
       <div className="carousel_viewport" ref={emblaRef}>
         <div className="carousel_container">
-          {data.map((photo, index) => (
+          {data?.slice(0, 5).map((photo, index) => (
             <div className="carousel_slide" key={index}>
               <div className="carousel_slide_inner">
                 <img

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

@@ -1,6 +1,8 @@
 import variables from 'config/variables';
 import React, { memo } from 'react';
 import { MdAutoFixHigh, MdOutlineArrowForward, MdOutlineOpenInNew } from 'react-icons/md';
+import placeholderIcon from '../../../../assets/icons/marketplace-placeholder.png';
+
 
 import { Button } from 'components/Elements';
 
@@ -16,8 +18,8 @@ function filterItems(item, filter) {
 function Item({ item, toggleFunction, type, onCollection }) {
   return (
     <div className="item" onClick={() => toggleFunction(item)} key={item.name}>
-      <img className="item-back" alt="" draggable={false} src={item.icon_url} aria-hidden="true" />
-      <img className="item-icon" alt="icon" draggable={false} src={item.icon_url} />
+      <img className="item-back" alt="" draggable={false} src={item.icon_url} onError={(e)=>{e.target.onerror = null; e.target.src=placeholderIcon}} aria-hidden="true" />
+      <img className="item-icon" alt="icon" draggable={false} src={item.icon_url}   onError={(e)=>{e.target.onerror = null; e.target.src=placeholderIcon}} />
       <div className="card-details">
         <span className="card-title">{item.display_name || item.name}</span>
         <span className="card-subtitle">

src/features/misc/views/Addons.jsx

@@ -1,6 +1,6 @@
 import variables from 'config/variables';
 import { memo } from 'react';
-import Tabs from '../../../components/Elements/MainModal/backend/Tabs';
+import Tabs from 'components/Elements/MainModal/backend/Tabs';
 
 import Added from '../../marketplace/views/Added';
 import Create from '../../marketplace/views/Create';

src/features/search/Search.jsx

@@ -3,7 +3,7 @@ import { memo, createRef, useEffect, useState } from 'react';
 import { useDebouncedCallback } from 'use-debounce';
 import { MdSearch, MdMic, MdScreenSearchDesktop } from 'react-icons/md';
 import { BsGoogle } from 'react-icons/bs';
-import { SiDuckduckgo, SiMicrosoftbing, SiBaidu } from 'react-icons/si';
+import { SiDuckduckgo, SiMicrosoftbing, SiBaidu, SiNaver } from 'react-icons/si';
 import { FaYandex, FaYahoo } from 'react-icons/fa';
 import { Tooltip } from 'components/Elements';
 import { Autocomplete as AutocompleteInput } from './components/autocomplete';
@@ -23,8 +23,6 @@ function Search() {
   const [classList] = useState(localStorage.getItem('widgetStyle') === 'legacy' ? 'searchIcons old' : 'searchIcons');
   const [currentSearch, setCurrentSearch] = useState('');
 
-
-
   useEffect(() => {
     EventBus.on('refresh', (data) => {
       if (data === 'search') {
@@ -45,7 +43,6 @@ function Search() {
 
   let micIcon = createRef();
 
-
   const customText = variables
     .getMessage('modals.main.settings.sections.search.custom')
     .split(' ')[0];
@@ -198,6 +195,8 @@ function Search() {
         return <FaYandex />;
       case '百度':
         return <SiBaidu />;
+      case 'NAVER':
+        return <SiNaver />;
       default:
         return <MdScreenSearchDesktop />;
     }

src/features/search/search_engines.json

@@ -56,5 +56,11 @@
     "settingsName": "baidu",
     "url": "https://www.baidu.com/s",
     "query": "wd"
+  },
+  {
+    "name": "NAVER",
+    "settingsName": "naver",
+    "url": "https://search.naver.com/search.naver",
+    "query": "query"
   }
 ]