fix(marketplace): Sideload UI, addon title, Turkish translation inconsitencies

Co-authored-by: David Ralph <me@davidcralph.co.uk>
2026-07-12 10:46:12 +02:00 · 2024-05-21 15:09:05 +01:00
parent 3b73155ec1
commit 2b948bc70d
28 changed files with 200 additions and 122 deletions
--- a/src/features/background/options/BackgroundOptions.jsx
+++ b/src/features/background/options/BackgroundOptions.jsx
@@ -4,7 +4,7 @@ import { MdSource, MdOutlineKeyboardArrowRight, MdOutlineAutoAwesome } from 'rea

 import { Header } from 'components/Layout/Settings';
 import { Checkbox, Dropdown, Slider, Radio, Text, ChipSelect } from 'components/Form/Settings';
-import { Row, Content, Action } from 'components/Layout/Settings/Item/SettingsItem';
+import { Row, Content, Action } from 'components/Layout/Settings/Item';
 //import Text from 'components/Form/Settings/Text/Text';

 import ColourSettings from './Colour';
--- a/src/features/background/options/Colour.jsx
+++ b/src/features/background/options/Colour.jsx
@@ -1,9 +1,8 @@
 import variables from 'config/variables';
-import { Fragment, useState } from 'react';
+import { useState } from 'react';
 import ColorPicker from 'react-best-gradient-color-picker';
 import { toast } from 'react-toastify';
-import { Row, Content, Action } from 'components/Layout/Settings';
-import { Button } from 'components/Elements';
+import { Row, Content, Action } from 'components/Layout/Settings/Item';
 import { MdRefresh } from 'react-icons/md';

 import '../scss/_colourpicker.scss';
--- a/src/features/marketplace/components/Elements/Lightbox/Lightbox.jsx
+++ b/src/features/marketplace/components/Elements/Lightbox/Lightbox.jsx
@@ -9,7 +9,7 @@ function Lightbox({ modalClose, img }) {
      <span className="closeModal" onClick={modalClose}>
        &times;
      </span>
-      <img src={img} className="lightboximg" draggable={false} alt="Item screenshot" />
+      <img src={img} className="lightboximg" draggable={false} alt="ItemPage screenshot" />
    </>
  );
 }
--- a/src/features/marketplace/components/Items/Items.jsx
+++ b/src/features/marketplace/components/Items/Items.jsx
@@ -15,7 +15,7 @@ function filterItems(item, filter) {
  );
 }

-function Item({ item, toggleFunction, type, onCollection, isCurator }) {
+function ItemPage({ item, toggleFunction, type, onCollection, isCurator }) {
  return (
    <div className="item" onClick={() => toggleFunction(item)} key={item.name}>
      <img
@@ -69,6 +69,7 @@ function Items({
  onCollection,
  filter,
  moreByCreator,
+  showCreateYourOwn,
 }) {
  const shouldShowCollection =
    (collection && !onCollection && (filter === null || filter === '')) ||
@@ -115,7 +116,7 @@ function Items({
        {items
          ?.filter((item) => filterItems(item, filter))
          .map((item) => (
-            <Item
+            <ItemPage
              isCurator={isCurator}
              item={item}
              toggleFunction={toggleFunction}
@@ -125,7 +126,7 @@ function Items({
          ))}
      </div>
      <div className="loader"></div>
-      {!onCollection && !isCurator ? (
+      {showCreateYourOwn ? (
        <div className="createYourOwn">
          <MdAutoFixHigh />
          <span className="title">{variables.getMessage('modals.main.marketplace.cant_find')}</span>
--- a/src/features/marketplace/views/Added.jsx
+++ b/src/features/marketplace/views/Added.jsx
@@ -5,7 +5,7 @@ import { toast } from 'react-toastify';
 import Modal from 'react-modal';

 import { SideloadFailedModal } from '../components/Elements/SideloadFailedModal/SideloadFailedModal';
-import Item from '../components/Items/Item';
+import ItemPage from './ItemPage';
 import Items from '../components/Items/Items';
 import { Dropdown, FileUpload } from 'components/Form/Settings';
 import { Header, CustomActions } from 'components/Layout/Settings';
@@ -68,9 +68,12 @@ export default class Added extends PureComponent {
      });
    }

-    install(input.type, input);
+    install(input.type, input, true, false);
    toast(variables.getMessage('toasts.installed'));
    variables.stats.postEvent('marketplace', 'Sideload');
+    this.setState({
+      installed: JSON.parse(localStorage.getItem('installed')),
+    });
  }

  getSideloadButton() {
@@ -105,7 +108,7 @@ export default class Added extends PureComponent {
        },
        button: this.buttons.uninstall,
      });
-      variables.stats.postEvent('marketplace', 'Item viewed');
+      variables.stats.postEvent('marketplace', 'ItemPage viewed');
    } else {
      this.setState({
        item: {},
@@ -121,6 +124,7 @@ export default class Added extends PureComponent {
    this.setState({
      button: '',
      installed: JSON.parse(localStorage.getItem('installed')),
+      item: {},
    });

    variables.stats.postEvent('marketplace', 'Uninstall');
@@ -135,7 +139,15 @@ export default class Added extends PureComponent {
      case 'oldest':
        break;
      case 'a-z':
-        installed.sort();
+        installed.sort((a, b) => {
+          if (a.display_name < b.display_name) {
+            return -1;
+          }
+          if (a.display_name > b.display_name) {
+            return 1;
+          }
+          return 0;
+        });
        break;
      case 'z-a':
        installed.sort();
@@ -158,7 +170,7 @@ export default class Added extends PureComponent {
    let updates = 0;
    this.state.installed.forEach(async (item) => {
      const data = await (
-        await fetch(variables.constants.API_URL + 'marketplace//item/' + item.name)
+        await fetch(variables.constants.API_URL + 'marketplace/item/' + item.name)
      ).json();
      if (data.version !== item.version) {
        updates++;
@@ -176,6 +188,25 @@ export default class Added extends PureComponent {
    }
  }

+  removeAll() {
+    try {
+      this.state.installed.forEach((item) => {
+        uninstall(item.type, item.name);
+      });
+    } catch (e) {
+    }
+
+    localStorage.setItem('installed', JSON.stringify([]));
+
+    toast(variables.getMessage('toasts.uninstalled_all'));
+
+    this.setState({
+      installed: [],
+    });
+
+    this.forceUpdate();
+  }
+
  componentDidMount() {
    this.sortAddons(localStorage.getItem('sortAddons'), false);
  }
@@ -229,9 +260,10 @@ export default class Added extends PureComponent {

    if (this.state.item.display_name) {
      return (
-        <Item
+        <ItemPage
          data={this.state.item}
          button={this.state.button}
+          addons={true}
          toggleFunction={() => this.toggle()}
        />
      );
@@ -249,6 +281,7 @@ export default class Added extends PureComponent {
              icon={<MdUpdate />}
              label={variables.getMessage('modals.main.addons.check_updates')}
            />
+            <Button type="settings" onClick={() => this.removeAll()} icon={<MdOutlineExtensionOff />} label="Remove all addons" />
            {/*<Button
                type="settings"
                onClick={() => document.getElementById('file-input').click()}
@@ -282,8 +315,10 @@ export default class Added extends PureComponent {
        />
        <Items
          items={this.state.installed}
+          isAdded={true}
          filter=""
          toggleFunction={(input) => this.toggle('item', input)}
+          showCreateYourOwn={false}
        />
      </>
    );
--- a/src/features/marketplace/views/Browse.jsx
+++ b/src/features/marketplace/views/Browse.jsx
@@ -10,7 +10,7 @@ import {
  MdLibraryAdd,
 } from 'react-icons/md';

-import Item from '../components/Items/Item';
+import ItemPage from './ItemPage';
 import Items from '../components/Items/Items';
 import Dropdown from '../../../components/Form/Settings/Dropdown/Dropdown';
 import { Header } from 'components/Layout/Settings';
@@ -200,11 +200,12 @@ class Marketplace extends PureComponent {
            signal: this.controller.signal,
          })
        ).json();
-        install(data.type, data);
+        install(data.type, data, false, true);
        variables.stats.postEvent('marketplace-item', `${item.display_name} installed}`);
        variables.stats.postEvent('marketplace', 'Install');
      }
      toast(variables.getMessage('toasts.installed'));
+      window.location.reload();
    } catch (error) {
      console.error(error);
      toast(variables.getMessage('toasts.error'));
@@ -339,7 +340,7 @@ class Marketplace extends PureComponent {

    if (this.state.item.display_name) {
      return (
-        <Item
+        <ItemPage
          data={this.state.item}
          button={this.state.button}
          toggleFunction={() => this.toggle()}
@@ -379,7 +380,7 @@ class Marketplace extends PureComponent {
                onClick={() => this.installCollection()}
                disabled={this.state.busy}
                icon={<MdLibraryAdd />}
-                label={variables.getMessage('modals.main.marketplace.add_all')}
+                label={this.state.busy ? variables.getMessage('modals.main.marketplace.installing') : variables.getMessage('modals.main.marketplace.add_all')}
              />
            </div>
          </>
@@ -460,6 +461,7 @@ class Marketplace extends PureComponent {
            toggleFunction={(input) => this.toggle('item', input)}
            collectionFunction={(input) => this.toggle('collection', input)}
            filter={this.state.filter}
+            showCreateYourOwn={true}
          />
        )}
      </>
--- a/src/features/marketplace/components/Items/Item.jsx
+++ b/src/features/marketplace/components/Items/Item.jsx
@@ -18,12 +18,12 @@ import { Header } from 'components/Layout/Settings';
 import { Button } from 'components/Elements';

 import { install, uninstall } from 'utils/marketplace';
-import { Carousel } from '../Elements/Carousel';
+import { Carousel } from '../components/Elements/Carousel';
 import { ShareModal } from 'components/Elements';
 import placeholderIcon from 'assets/icons/marketplace-placeholder.png';
-import { Items } from './Items';
+import { Items } from '../components/Items/Items';

-class Item extends PureComponent {
+class ItemPage extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
@@ -119,34 +119,33 @@ class Item extends PureComponent {
      );
    }

-    let itemWarning;
-    if (
-      this.props.data.data.language !== undefined &&
-      this.props.data.data.language !== null &&
-      shortLocale !== this.props.data.data.language
-    ) {
-      itemWarning = (
+    const itemWarning = () => {
+      const template = (message) => (
        <div className="itemWarning">
          <MdOutlineWarning />
          <div className="text">
            <span className="header">Warning</span>
-            <span>{variables.getMessage('modals.main.marketplace.product.not_in_language')}</span>
+            <span>{message}</span>
          </div>
        </div>
      );
-    }

-    if (this.props.data.data.image_api === true) {
-      itemWarning = (
-        <div className="itemWarning">
-          <MdOutlineWarning />
-          <div className="text">
-            <span className="header">Warning</span>
-            <span>{variables.getMessage('modals.main.marketplace.product.third_party_api')}</span>
-          </div>
-        </div>
-      );
-    }
+      if (this.props.data.data.sideload === true) {
+        return template(variables.getMessage('modals.main.marketplace.product.sideload_warning'));
+      }
+
+      if (this.props.data.data.image_api === true) {
+        return template(variables.getMessage('modals.main.marketplace.product.third_party_api'));
+      }
+
+      if (this.props.data.data.language !== undefined && this.props.data.data.language !== null) {
+        if (shortLocale !== this.props.data.data.language) {
+          return template(variables.getMessage('modals.main.marketplace.product.not_in_language'));
+        }
+      }
+
+      return null;
+    };

    const moreInfoItem = (icon, header, text) => (
      <div className="infoItem">
@@ -158,31 +157,7 @@ class Item extends PureComponent {
      </div>
    );

-    const DataTable = ({ data, title, value, incrementCount, count }) => (
-      <>
-        <table>
-          <tbody>
-            <tr>
-              <th>{variables.getMessage(title)}</th>
-              <th>{variables.getMessage(value)}</th>
-            </tr>
-            {data.slice(0, count).map((item, index) => (
-              <tr key={index}>
-                <td>{item.quote || item.key}</td>
-                <td>{item.author || item.value}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-        <div className="showMoreItems">
-          <span className="link" onClick={incrementCount}>
-            {count !== data.length
-              ? variables.getMessage('modals.main.marketplace.product.show_all')
-              : variables.getMessage('modals.main.marketplace.product.show_less')}
-          </span>
-        </div>
-      </>
-    );
+    console.log(this.props.data.data)

    return (
      <>
@@ -203,11 +178,13 @@ class Item extends PureComponent {
        </Modal>
        <Header
          title={
-            this.props.data.data.in_collections.length > 0
-              ? this.props.data.data.in_collections[0].display_name
-              : variables.getMessage('modals.main.navbar.marketplace')
+            this.props.addons
+              ? variables.getMessage('modals.main.addons.added')
+              : this.props.data.data.in_collections?.length > 0
+                ? this.props.data.data.in_collections[0].display_name
+                : variables.getMessage('modals.main.navbar.marketplace')
          }
-          secondaryTitle={this.props.data.data.display_name}
+          secondaryTitle={this.props.data.data.sideload ? this.props.data.data.name : this.props.data.data.display_name}
          report={false}
          goBack={this.props.toggleFunction}
        />
@@ -219,7 +196,7 @@ class Item extends PureComponent {
                variables.getMessage('modals.main.marketplace.product.created_by'),
                this.props.data.author,
              )}
-              {itemWarning}
+              {itemWarning()}
            </div>
            {this.props.data.data.photos && (
              <div className="carousel">
@@ -249,22 +226,56 @@ class Item extends PureComponent {
              />
            </div>
            {this.props.data.data.quotes && (
-              <DataTable
-                data={this.props.data.data.quotes}
-                title="modals.main.settings.sections.quote.title"
-                value="modals.main.settings.sections.quote.author"
-                incrementCount={() => this.incrementCount('quotes')}
-                count={this.state.count}
-              />
+              <>
+                <table>
+                  <tbody>
+                    <tr>
+                      <th>{variables.getMessage('modals.main.settings.sections.quote.title')}</th>
+                      <th>{variables.getMessage('modals.main.settings.sections.quote.author')}</th>
+                    </tr>
+                    {this.props.data.data.quotes.slice(0, this.state.count).map((quote, index) => (
+                      <tr key={index}>
+                        <td>{quote.quote}</td>
+                        <td>{quote.author}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+                <div className="showMoreItems">
+                  <span className="link" onClick={() => this.incrementCount('quotes')}>
+                    {this.state.count !== this.props.data.data.quotes.length
+                      ? variables.getMessage('modals.main.marketplace.product.show_all')
+                      : variables.getMessage('modals.main.marketplace.product.show_less')}
+                  </span>
+                </div>
+              </>
            )}
            {this.props.data.data.settings && (
-              <DataTable
-                data={Object.entries(this.props.data.data.settings)}
-                title="modals.main.marketplace.product.setting"
-                value="modals.main.marketplace.product.value"
-                incrementCount={() => this.incrementCount('settings')}
-                count={this.state.count}
-              />
+              <>
+                <table>
+                  <tbody>
+                    <tr>
+                      <th>{variables.getMessage('modals.main.marketplace.product.setting')}</th>
+                      <th>{variables.getMessage('modals.main.marketplace.product.value')}</th>
+                    </tr>
+                    {Object.entries(this.props.data.data.settings)
+                      .slice(0, this.state.count)
+                      .map(([key, value]) => (
+                        <tr key={key}>
+                          <td>{key}</td>
+                          <td>{value}</td>
+                        </tr>
+                      ))}
+                  </tbody>
+                </table>
+                <div className="showMoreItems">
+                  <span className="link" onClick={() => this.incrementCount('settings')}>
+                    {this.state.count !== this.props.data.data.settings.length
+                      ? variables.getMessage('modals.main.marketplace.product.show_all')
+                      : variables.getMessage('modals.main.marketplace.product.show_less')}
+                  </span>
+                </div>
+              </>
            )}
            <div className="marketplaceDescription">
              <span className="title">
@@ -353,7 +364,7 @@ class Item extends PureComponent {
                  tooltipKey="report"
                />
              </div>
-              {this.props.data.data.in_collections.length > 0 && (
+              {this.props.data.data.in_collections?.length > 0 && (
                <div>
                  <div className="inCollection">
                    <span className="subtitle">
@@ -387,12 +398,13 @@ class Item extends PureComponent {
              <Items
                isCurator={true}
                type={this.props.data.data.type}
-                items={this.state.moreByCurator}
+                items={this.state.moreByCurator.sort(() => 0.5 - Math.random()).slice(0, 3)}
                onCollection={this.state.collection}
                toggleFunction={(input) => this.props.toggleFunction('item', input)}
                collectionFunction={(input) => this.props.toggleFunction('collection', input)}
                filter={''}
                moreByCreator={true}
+                showCreateYourOwn={false}
              />
            </div>
          </div>
@@ -402,4 +414,4 @@ class Item extends PureComponent {
  }
 }

-export { Item as default, Item };
+export { ItemPage as default, ItemPage };
--- a/src/features/misc/sections/Experimental.jsx
+++ b/src/features/misc/sections/Experimental.jsx
@@ -7,7 +7,7 @@ import { TextField } from '@mui/material';
 import EventBus from 'utils/eventbus';
 import values from 'utils/data/slider_values.json';

-import { Row, Content, Action } from 'components/Layout/Settings/Item/SettingsItem';
+import { Row, Content, Action } from 'components/Layout/Settings/Item';

 function ExperimentalOptions() {
  const [eventType, setEventType] = useState();
--- a/src/features/navbar/options/NavbarOptions.jsx
+++ b/src/features/navbar/options/NavbarOptions.jsx
@@ -18,7 +18,7 @@ import { Checkbox, Dropdown } from 'components/Form';
 import { Button } from 'components/Elements';
 import EventBus from 'utils/eventbus';

-import { Row, Content, Action } from 'components/Layout/Settings';
+import { Row, Content, Action } from 'components/Layout/Settings/Item';
 import { Header } from 'components/Layout/Settings';
 import { getTitleFromUrl, isValidUrl } from 'utils/links';
 import { QuickLinks } from 'features/quicklinks';