feat: quick links custom icon and text only options, message widget, fix error

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

@@ -0,0 +1,19 @@
+import variables from 'modules/variables';
+
+import Switch from '../Switch';
+import Text from '../Text';
+import Slider from '../Slider';
+
+export default function MessageSettings() {
+  const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
+  const languagecode = variables.languagecode;
+
+  return (
+    <>
+      <h2>{getMessage(languagecode, 'modals.main.settings.sections.message.title')}</h2>
+      <Switch name='message' text={getMessage(languagecode, 'modals.main.settings.enabled')} category='message' element='.message'/>
+      <Text title={getMessage(languagecode, 'modals.main.settings.sections.message.text')} name='messageText' category='text'/>
+      <Slider title={getMessage(languagecode, 'modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomMessage' min='10' max='400' default='100' display='%' category='message' />
+    </>
+  );
+}

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

@@ -13,7 +13,8 @@ const widget_name = {
   time: getMessage(languagecode, 'modals.main.settings.sections.time.title'),
   quicklinks: getMessage(languagecode, 'modals.main.settings.sections.quicklinks.title'),
   quote: getMessage(languagecode, 'modals.main.settings.sections.quote.title'),
-  date: getMessage(languagecode, 'modals.main.settings.sections.greeting.title')
+  date: getMessage(languagecode, 'modals.main.settings.sections.greeting.title'),
+  message: 'Message'
 };
 
 const SortableItem = sortableElement(({ value }) => (
@@ -60,7 +61,7 @@ export default class OrderSettings extends PureComponent {
   }
 
   reset = () => {
-    localStorage.setItem('order', JSON.stringify(['greeting', 'time', 'quicklinks', 'quote', 'date']));
+    localStorage.setItem('order', JSON.stringify(['greeting', 'time', 'quicklinks', 'quote', 'date', 'message']));
   
     this.setState({
       items: JSON.parse(localStorage.getItem('order'))

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

@@ -12,6 +12,7 @@ export default function QuickLinks() {
     <>
       <h2>{getMessage(languagecode, 'modals.main.settings.sections.quicklinks.title')}</h2>
       <Switch name='quicklinksenabled' text={getMessage(languagecode, 'modals.main.settings.enabled')} category='quicklinks' element='.quicklinks-container'/>
+      <Checkbox name='quicklinksText' text={getMessage(languagecode, 'modals.main.settings.sections.quicklinks.text_only')} category='quicklinks'/>
       <Checkbox name='quicklinksddgProxy' text={getMessage(languagecode, 'modals.main.settings.sections.background.ddg_image_proxy')} category='quicklinks'/>
       <Checkbox name='quicklinksnewtab' text={getMessage(languagecode, 'modals.main.settings.sections.quicklinks.open_new')} category='quicklinks'/>
       <Checkbox name='quicklinkstooltip' text={getMessage(languagecode, 'modals.main.settings.sections.quicklinks.tooltip')} category='quicklinks'/>

src/components/modals/main/tabs/Settings.jsx

@@ -17,6 +17,7 @@ import QuickLinks from '../settings/sections/QuickLinks';
 import Weather from '../settings/sections/Weather';
 import Stats from '../settings/sections/Stats';
 import Keybinds from '../settings/sections/Keybinds';
+import Message from '../settings/sections/Message';
 
 export default function Settings() {
   const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
@@ -32,6 +33,7 @@ export default function Settings() {
         <div label={getMessage(languagecode, 'modals.main.settings.sections.search.title')} name='search'><Search/></div>
         <div label={getMessage(languagecode, 'modals.main.settings.sections.quicklinks.title')} name='quicklinks'><QuickLinks/></div>
         <div label={getMessage(languagecode, 'modals.main.settings.sections.weather.title')} name='weather'><Weather/></div>
+        <div label='Message' name='message'><Message/></div>
         <div label={getMessage(languagecode, 'modals.main.settings.sections.appearance.title')} name='appearance'><Appearance/></div>
         <div label={getMessage(languagecode, 'modals.main.settings.sections.order.title')} name='order'><Order/></div>
         <div label={getMessage(languagecode, 'modals.main.settings.sections.language.title')} name='language'><Language/></div>

src/components/modals/main/tabs/backend/Tab.jsx

@@ -18,6 +18,7 @@ import {
   CloudOutlined as Weather,
   SettingsOutlined as Advanced,
   Link as QuickLinks,
+  SmsOutlined as Message,
   AssessmentOutlined as Stats,
   Code as Sideload,
   AddCircleOutline as Added,
@@ -56,6 +57,7 @@ function Tab({ label, currentTab, onClick, navbarTab }) {
     case getMessage(languagecode, 'modals.main.settings.sections.quicklinks.title'): icon = <QuickLinks/>; break;
     case getMessage(languagecode, 'modals.main.settings.sections.appearance.title'): icon = <Appearance/>; break;
     case getMessage(languagecode, 'modals.main.settings.sections.order.title'): icon = <Order/>; break;
+    case getMessage(languagecode, 'modals.main.settings.sections.message.title'): icon = <Message/>; break;
     case getMessage(languagecode, 'modals.main.settings.sections.language.title'): icon = <Language/>; divider = true; break;
     case getMessage(languagecode, 'modals.main.settings.sections.advanced.title'): icon = <Advanced/>; break;
     case getMessage(languagecode, 'modals.main.settings.sections.keybinds.title'): icon = <Keybinds/>; break;

src/components/widgets/Widgets.jsx

@@ -6,6 +6,7 @@ import Quote from './quote/Quote';
 import Search from './search/Search';
 import QuickLinks from './quicklinks/QuickLinks';
 import Date from './time/Date';
+import Message from './message/Message';
 
 import EventBus from 'modules/helpers/eventbus';
 
@@ -25,7 +26,8 @@ export default class Widgets extends PureComponent {
       greeting: this.enabled('greeting') ? <Greeting/> : null,
       quote: this.enabled('quote') ? <Quote/> : null,
       date: this.enabled('date') ? <Date/> : null,
-      quicklinks: this.enabled('quicklinksenabled') && this.online ? <QuickLinks/> : null
+      quicklinks: this.enabled('quicklinksenabled') && this.online ? <QuickLinks/> : null,
+      message: this.enabled('message') ? <Message/> : null
     };
   }
 
@@ -58,7 +60,7 @@ export default class Widgets extends PureComponent {
       });
     } else {
       // prevent error
-      elements = [<Greeting/>, <Clock/>, <QuickLinks/>, <Quote/>, <Date/>];
+      elements = [<Greeting/>, <Clock/>, <QuickLinks/>, <Quote/>, <Date/>, <Message/>];
     }
 
     return (

src/components/widgets/message/Message.jsx

@@ -0,0 +1,42 @@
+import { PureComponent, createRef } from 'react';
+
+import EventBus from 'modules/helpers/eventbus';
+
+import './message.scss';
+
+export default class Message extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      messageText: localStorage.getItem('messageText')
+    };
+    this.message = createRef();
+  }
+
+  componentDidMount() {
+    EventBus.on('refresh', (data) => {
+      if (data === 'message') {
+        if (localStorage.getItem('message') === 'false') {
+          return this.message.current.style.display = 'none';
+        }
+
+        this.message.current.style.display = 'block';
+        this.message.current.style.fontSize = `${1.6 * Number((localStorage.getItem('zoomMessage') || 100) / 100)}em`;
+
+        this.setState({
+          messageText: localStorage.getItem('messageText')
+        });
+      }
+    });
+
+    this.message.current.style.fontSize = `${1.6 * Number((localStorage.getItem('zoomMessage') || 100) / 100)}em`;
+  }
+
+  render() {
+    return (
+      <h2 className='message' ref={this.message}>
+        {localStorage.getItem('messageText')}
+      </h2>
+    );
+  }
+}

src/components/widgets/message/message.scss

@@ -0,0 +1,5 @@
+.message {
+  cursor: default;
+  margin: 0;
+  user-select: none;
+}

src/components/widgets/quicklinks/QuickLinks.jsx

@@ -1,3 +1,4 @@
+import variables from 'modules/variables';
 import { PureComponent, createRef } from 'react';
 import { TextareaAutosize } from '@mui/material';
 import Hotkeys from 'react-hot-keys';
@@ -9,6 +10,9 @@ import EventBus from 'modules/helpers/eventbus';
 import './quicklinks.scss';
 
 export default class QuickLinks extends PureComponent {
+  getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
+  languagecode = variables.languagecode;
+
   constructor() {
     super();
     this.state = {
@@ -42,13 +46,13 @@ export default class QuickLinks extends PureComponent {
 
     let nameError, urlError;
     if (this.state.name.length <= 0) {
-      nameError = this.language.name_error;
+      nameError = this.getMessage(this.languagecode, 'widgets.quicklinks.name_error');
     }
 
     // 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 = this.language.url_error;
+      urlError = this.getMessage(this.languagecode, 'widgets.quicklinks.url_error');
     }
 
     if (nameError || urlError) {
@@ -65,6 +69,7 @@ export default class QuickLinks extends PureComponent {
     data.push({
       name: this.state.name,
       url: url,
+      icon: this.state.icon || '',
       key: Math.random().toString(36).substring(7) + 1
     });
 
@@ -141,13 +146,22 @@ export default class QuickLinks extends PureComponent {
 
     const tooltipEnabled = localStorage.getItem('quicklinkstooltip');
     const useProxy = (localStorage.getItem('quicklinksddgProxy') !== 'false');
+    const useText = (localStorage.getItem('quicklinksText') === 'true');
 
     const quickLink = (item) => {
+      if (useText) {
+        return <a className='quicklinkstext' key={item.key} onContextMenu={(e) => this.deleteLink(item.key, e)} href={item.url} target={target} rel={rel} draggable={false}>{item.name}</a>;
+      }
+
       const url = useProxy ? 'https://icons.duckduckgo.com/ip2/' : 'https://www.google.com/s2/favicons?sz=32&domain=';
+      let img = url + item.url.replace('https://', '').replace('http://', '') + (useProxy ? '.ico' : '');
+      if (item.icon) {
+        img = item.icon;
+      }
 
       const link = (
         <a key={item.key} onContextMenu={(e) => this.deleteLink(item.key, e)} href={item.url} target={target} rel={rel} draggable={false}>
-          <img src={url + item.url.replace('https://', '').replace('http://', '') + (useProxy ? '.ico' : '')} alt={item.name} draggable={false}/>
+          <img src={img} alt={item.name} draggable={false}/>
         </a>
       );
 
@@ -168,12 +182,14 @@ export default class QuickLinks extends PureComponent {
         <button className='quicklinks' onClick={this.toggleAdd}>+</button>
         <span className='quicklinkscontainer' style={{ visibility: this.state.showAddLink, marginTop }}>
           <div className='topbarquicklinks' onKeyDown={this.topbarEnter}>
-            <h4>{this.language.new}</h4>
-            <TextareaAutosize rowsmax={1} placeholder={this.language.name} value={this.state.name} onChange={(e) => this.setState({ name: e.target.value })} />
+            <h4>{this.getMessage(this.languagecode, 'widgets.quicklinks.new')}</h4>
+            <TextareaAutosize rowsmax={1} placeholder={this.getMessage(this.languagecode, 'widgets.quicklinks.name')} value={this.state.name} onChange={(e) => this.setState({ name: e.target.value })} />
             <p>{this.state.nameError}</p>
-            <TextareaAutosize rowsmax={10} placeholder={this.language.url} value={this.state.url} onChange={(e) => this.setState({ url: e.target.value })} />
+            <TextareaAutosize rowsmax={10} placeholder={this.getMessage(this.languagecode, 'widgets.quicklinks.url')} value={this.state.url} onChange={(e) => this.setState({ url: e.target.value })} />
             <p>{this.state.urlError}</p>
-            <button className='pinNote' onClick={this.addLink}>{this.language.add}</button>
+            <TextareaAutosize rowsmax={10} placeholder={this.getMessage(this.languagecode, 'widgets.quicklinks.icon')} value={this.state.icon} onChange={(e) => this.setState({ icon: e.target.value })} />
+            <p></p>
+            <button className='pinNote' onClick={this.addLink}>{this.getMessage(this.languagecode, 'widgets.quicklinks.add')}</button>
           </div>
         </span>
         {window.keybinds.toggleQuicklinks && window.keybinds.toggleQuicklinks !== '' ? <Hotkeys keyName={window.keybinds.toggleQuicklinks} onKeyDown={this.toggleAdd} /> : null}

src/components/widgets/quicklinks/quicklinks.scss

@@ -90,3 +90,13 @@ textarea {
     margin: 5px;
   }
 }
+
+.quicklinkstext {
+  text-decoration: none;
+  color: white;
+  font-size: smaller;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}