fix: quicklinks modal, notes length, create download

src/components/modals/main/marketplace/examples/photos.json

@@ -0,0 +1,25 @@
+{
+    "name": "Example Photos",
+    "description": "This is an example.",
+    "type": "photos",
+    "version": "1.0.0",
+    "author": "Mue",
+    "icon_url": "https://raw.githubusercontent.com/mue/branding/main/logo/logo_square.png",
+    "screenshot_url": "https://github.com/mue/mue/raw/main/assets/screenshot.webp",
+    "photos": [
+        {
+            "photographer": "Example photographer",
+            "location": "Example location",
+            "url": {
+                "default": "https://github.com/mue/mue/raw/main/assets/screenshot.webp"
+            }
+        },
+        {
+            "photographer": "Example photographer 2",
+            "location": "Example location 2",
+            "url": {
+                "default": "https://github.com/mue/mue/raw/main/assets/screenshot2.webp"
+            }
+        }
+    ]
+}

src/components/modals/main/marketplace/examples/quotes.json

@@ -0,0 +1,20 @@
+{
+    "name": "Example Quotes",
+    "description": "This is an example.",
+    "type": "quotes",
+    "version": "1.0.0",
+    "author": "Mue",
+    "icon_url": "https://raw.githubusercontent.com/mue/branding/main/logo/logo_square.png",
+    "screenshot_url": "https://github.com/mue/mue/raw/main/assets/screenshot.webp",
+    "language": "en",
+    "quotes": [
+        {
+            "quote": "This is an example quote.",
+            "author": "Example 1"
+        },
+        {
+            "quote": "This is another example quote.",
+            "author": "Example 2"
+        }
+    ]
+}

src/components/modals/main/marketplace/examples/settings.json

@@ -0,0 +1,13 @@
+{
+    "name": "Example Settings",
+    "description": "This is an example.",
+    "type": "settings",
+    "version": "1.0.0",
+    "author": "Mue",
+    "icon_url": "https://raw.githubusercontent.com/mue/branding/main/logo/logo_square.png",
+    "screenshot_url": "https://github.com/mue/mue/raw/main/assets/screenshot.webp",
+    "settings": {
+        "searchBar": false,
+        "weather": true
+    }
+}

src/components/modals/main/marketplace/sections/Create.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 // todo: refactor all of this
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
@@ -21,6 +22,10 @@ import Tooltip from '../../../../helpers/tooltip/Tooltip';
 
 import FileUpload from '../../settings/FileUpload';
 
+import photos from '../examples/photos.json';
+import quotes from '../examples/quotes.json';
+import settings from '../examples/settings.json';
+
 import '../../../welcome/welcome.scss';
 
 export default class Create extends PureComponent {
@@ -221,7 +226,7 @@ export default class Create extends PureComponent {
               ) || 'marketplace'}
             </span>
           </div>
-          <button>
+          <button onClick={() => saveFile(this.state.addonMetadata.type, `mue-marketplace-${this.state.addonMetadata.type}.json`)}>
             {variables.getMessage('modals.main.addons.create.metadata.example')}
             <MdDownload />
           </button>

src/components/modals/main/settings/sections/QuickLinks.jsx

@@ -18,6 +18,7 @@ export default class QuickLinks extends PureComponent {
       items: JSON.parse(localStorage.getItem('quicklinks')),
       showAddModal: false,
       urlError: '',
+      iconError: '',
       edit: false,
       editData: '',
     };
@@ -40,22 +41,20 @@ export default class QuickLinks extends PureComponent {
 
   addLink(name, url, icon) {
     const data = JSON.parse(localStorage.getItem('quicklinks'));
-    let urlError;
 
     // regex: https://ihateregex.io/expr/url/
     // eslint-disable-next-line no-useless-escape
-    if (
-      url.length <= 0 ||
-      /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_.~#?&=]*)/.test(
-        url,
-      ) === false
-    ) {
-      urlError = variables.getMessage('widgets.quicklinks.url_error');
+    const urlRegex =
+      /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_.~#?&=]*)/;
+    if (url.length <= 0 || urlRegex.test(url) === false) {
+      return this.setState({
+        urlError: variables.getMessage('widgets.quicklinks.url_error'),
+      });
     }
 
-    if (urlError) {
+    if (icon.length > 0 && urlRegex.test(icon) === false) {
       return this.setState({
-        urlError,
+        iconError: variables.getMessage('widgets.quicklinks.url_error'),
       });
     }
 
@@ -76,6 +75,7 @@ export default class QuickLinks extends PureComponent {
       items: data,
       showAddModal: false,
       urlError: '',
+      iconError: '',
     });
 
     variables.stats.postEvent('feature', 'Quicklink add');
@@ -278,7 +278,7 @@ export default class QuickLinks extends PureComponent {
         </div>
         <Modal
           closeTimeoutMS={100}
-          onRequestClose={() => this.setState({ showAddModal: false, urlError: '' })}
+          onRequestClose={() => this.setState({ showAddModal: false, urlError: '', iconError: '' })}
           isOpen={this.state.showAddModal}
           className="Modal resetmodal mainModal"
           overlayClassName="Overlay resetoverlay"
@@ -290,7 +290,7 @@ export default class QuickLinks extends PureComponent {
             editLink={(og, name, url, icon) => this.editLink(og, name, url, icon)}
             edit={this.state.edit}
             editData={this.state.editData}
-            closeModal={() => this.setState({ showAddModal: false, urlError: '' })}
+            closeModal={() => this.setState({ showAddModal: false, urlError: '', iconError: '' })}
           />
         </Modal>
       </>

src/components/modals/main/settings/sections/quicklinks/AddModal.jsx

@@ -5,7 +5,7 @@ import Tooltip from 'components/helpers/tooltip/Tooltip';
 
 import variables from 'modules/variables';
 
-function AddModal({ urlError, addLink, closeModal, edit, editData, editLink }) {
+function AddModal({ urlError, iconError, addLink, closeModal, edit, editData, editLink }) {
   const [name, setName] = useState(edit ? editData.name : '');
   const [url, setUrl] = useState(edit ? editData.url : '');
   const [icon, setIcon] = useState(edit ? editData.url : '');
@@ -25,23 +25,24 @@ function AddModal({ urlError, addLink, closeModal, edit, editData, editLink }) {
           maxRows={1}
           placeholder={variables.getMessage('widgets.quicklinks.name')}
           value={name}
-          onChange={(e) => setName(e.target.value)}
+          onChange={(e) => setName(e.target.value.replace(/(\r\n|\n|\r)/gm, ""))}
         />
         <span className="dropdown-error" />
         <TextareaAutosize
           maxRows={10}
           placeholder={variables.getMessage('widgets.quicklinks.url')}
           value={url}
-          onChange={(e) => setUrl(e.target.value)}
+          onChange={(e) => setUrl(e.target.value.replace(/(\r\n|\n|\r)/gm, ""))}
         />
         <span className="dropdown-error">{urlError}</span>
         <TextareaAutosize
           maxRows={10}
+          maxLines={1}
           placeholder={variables.getMessage('widgets.quicklinks.icon')}
           value={icon}
-          onChange={(e) => setIcon(e.target.value)}
+          onChange={(e) => setIcon(e.target.value.replace(/(\r\n|\n|\r)/gm, ""))}
         />
-        <span className="dropdown-error" />
+        <span className="dropdown-error">{iconError}</span>
         {edit ? (
           <button
             style={{

src/components/widgets/navbar/Notes.jsx

@@ -135,6 +135,7 @@ class Notes extends PureComponent {
                 value={this.state.notes}
                 onChange={this.setNotes}
                 minRows={5}
+                maxLength={10000}
               />
             </div>
           </span>