feat: redo of message UI & widget order experiment

src/components/modals/main/scss/modules/_tab-content.scss

@@ -108,3 +108,45 @@ table {
     font-size: 1.5rem !important;
   }
 }
+
+.messageMap {
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  gap: 25px;
+  padding: 25px;
+  justify-content: space-between;
+  div:nth-child(1) {
+    display: flex;
+    flex-flow: row;
+    gap: 25px;
+    align-items: center;
+  }
+  .icon {
+    border-radius: 100%;
+    display: grid;
+    place-items: center;
+    padding: 15px;
+    font-size: 25px;
+    @include themed() {
+      background: t($modal-sidebarActive);
+    }
+  }
+  .messageText {
+    display: flex;
+    flex-flow: column;
+  }
+  .messageAction {
+    float: right;
+  }
+  @include themed() {
+    background: t($modal-sidebar);
+    border-radius: t($borderRadius);
+  }
+}
+
+.messagesContainer {
+  display: flex;
+  flex-flow: column;
+  gap: 25px;
+}

src/components/modals/main/scss/settings/modules/tabs/_order.scss

@@ -80,3 +80,28 @@
     }
   }
 }
+
+.overviewGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-gap: 30px;
+}
+
+.tabPreview {
+  width: 100%;
+  aspect-ratio: 2 / 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 16px;
+  @include themed() {
+    background: t($modal-sidebar);
+    border-radius: t($borderRadius);
+  }
+  .previewContainer {
+
+  }
+  .previewItem {
+
+  }
+}

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

@@ -1,6 +1,6 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import { MdCancel, MdAdd } from 'react-icons/md';
+import { MdCancel, MdAdd, MdOutlineTextsms } from 'react-icons/md';
 import { toast } from 'react-toastify';
 import { TextareaAutosize } from '@mui/material';
 import SettingsItem from '../SettingsItem';
@@ -79,7 +79,7 @@ export default class Message extends PureComponent {
             {this.getMessage('modals.main.settings.sections.message.add')} <MdAdd />
           </button>
         </SettingsItem>
-        <table style={{ width: '100%' }}>
+        {/*<table style={{ width: '100%' }}>
           <tr>
             <th>{this.getMessage('modals.main.settings.sections.message.messages')}</th>
             <th>{this.getMessage('modals.main.settings.sections.quote.custom_buttons')}</th>
@@ -107,7 +107,56 @@ export default class Message extends PureComponent {
             </tr>
           ))}
         </table>
-        <br />
+            */}
+        <div className="messagesContainer">
+          {this.state.messages.map((_url, index) => (
+            <div className="messageMap">
+              <div>
+                <div className="icon">
+                  <MdOutlineTextsms />
+                </div>
+                <div className="messageText">
+                  <span className="subtitle">
+                    {this.getMessage('modals.main.settings.sections.message.title')}
+                  </span>
+                  <TextareaAutosize
+                    value={this.state.messages[index]}
+                    placeholder={this.getMessage('modals.main.settings.sections.message.title')}
+                    onChange={(e) => this.message(e, true, index)}
+                    varient="outlined"
+                  />
+                </div>
+              </div>
+              <div>
+                <div className="messageAction">
+                  <button
+                    className="deleteButton"
+                    onClick={() => this.modifyMessage('remove', index)}
+                  >
+                    <MdCancel />
+                  </button>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+        {this.state.messages.length === 0 ? (
+          <div className="photosEmpty">
+          <div className="emptyNewMessage">
+            <MdOutlineTextsms />
+            <span className="title">
+              No messages
+            </span>
+            <span className="subtitle">
+              Go ahead and add some.
+            </span>
+            <button onClick={() => this.modifyMessage('add')}>
+            {this.getMessage('modals.main.settings.sections.message.add')}
+              <MdAdd />
+            </button>
+          </div>
+        </div>
+        ) : null}
       </>
     );
   }

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

@@ -0,0 +1,128 @@
+import variables from 'modules/variables';
+import { PureComponent } from 'react';
+import { MdOutlineDragIndicator } from 'react-icons/md';
+import { sortableContainer, sortableElement } from 'react-sortable-hoc';
+import { toast } from 'react-toastify';
+import Greeting from '../../../../widgets/greeting/Greeting';
+
+import EventBus from 'modules/helpers/eventbus';
+
+const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
+const widget_name = {
+  greeting: getMessage('modals.main.settings.sections.greeting.title'),
+  time: getMessage('modals.main.settings.sections.time.title'),
+  quicklinks: getMessage('modals.main.settings.sections.quicklinks.title'),
+  quote: getMessage('modals.main.settings.sections.quote.title'),
+  date: getMessage('modals.main.settings.sections.date.title'),
+  message: getMessage('modals.main.settings.sections.message.title'),
+  reminder: 'reminder',
+};
+
+const SortableItem = sortableElement(({ value }) => (
+  <li className="sortableItem">
+    {widget_name[value]}
+    <MdOutlineDragIndicator />
+  </li>
+));
+
+const SortableContainer = sortableContainer(({ children }) => (
+  <ul className="sortablecontainer">{children}</ul>
+));
+
+export default class OrderSettings extends PureComponent {
+  constructor() {
+    super();
+    this.state = {
+      items: JSON.parse(localStorage.getItem('order')),
+    };
+  }
+
+  arrayMove(array, oldIndex, newIndex) {
+    const result = Array.from(array);
+    const [removed] = result.splice(oldIndex, 1);
+    result.splice(newIndex, 0, removed);
+
+    return result;
+  }
+
+  onSortEnd = ({ oldIndex, newIndex }) => {
+    this.setState({
+      items: this.arrayMove(this.state.items, oldIndex, newIndex),
+    });
+  };
+
+  reset = () => {
+    localStorage.setItem(
+      'order',
+      JSON.stringify(['greeting', 'time', 'quicklinks', 'quote', 'date', 'message', 'reminder']),
+    );
+
+    this.setState({
+      items: JSON.parse(localStorage.getItem('order')),
+    });
+
+    toast(getMessage('toasts.reset'));
+  };
+
+  enabled = (setting) => {
+    switch (setting) {
+      case 'quicklinks':
+        return localStorage.getItem('quicklinksenabled') === 'true';
+      default:
+        return localStorage.getItem(setting) === 'true';
+    }
+  };
+
+  componentDidUpdate() {
+    localStorage.setItem('order', JSON.stringify(this.state.items));
+    variables.stats.postEvent('setting', 'Widget order');
+    EventBus.dispatch('refresh', 'widgets');
+  }
+
+  render() {
+    return (
+      <>
+        <span className="mainTitle">
+        {getMessage('modals.main.marketplace.product.overview')}
+        </span>
+        {/*<span className="title">{getMessage('modals.main.marketplace.product.overview')}</span>
+        <span className="link" onClick={this.reset}>
+          {getMessage('modals.main.settings.buttons.reset')}
+    </span>*/}
+        <div className="overviewGrid">
+          <div>
+            <span className='title'>Preview</span>
+            <div className='tabPreview'>
+                <div className="previewItem">
+              {this.state.items.map((value, index) => {
+                if (!this.enabled(value)) {
+                  return null;
+                }
+
+                return <div className="previewItem" key={`item-${value}`} index={index} > {value}</div>;
+              })}
+              </div>
+            </div>
+          </div>
+          <div>
+          <span className='title'>{getMessage('modals.main.settings.sections.order.title')}</span>
+            <SortableContainer
+              onSortEnd={this.onSortEnd}
+              lockAxis="y"
+              lockToContainerEdges
+              disableAutoscroll
+            >
+              {this.state.items.map((value, index) => {
+                if (!this.enabled(value)) {
+                  return null;
+                }
+
+                return <SortableItem key={`item-${value}`} index={index} value={value} />;
+              })}
+            </SortableContainer>
+          </div>
+        </div>
+      </>
+    );
+  }
+}

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

@@ -1,6 +1,7 @@
 import variables from 'modules/variables';
 import Tabs from './backend/Tabs';
 
+import Overview from '../settings/sections/Overview';
 import Navbar from '../settings/sections/Navbar';
 import Greeting from '../settings/sections/Greeting';
 import Time from '../settings/sections/Time';
@@ -27,6 +28,9 @@ export default function Settings(props) {
 
   return (
     <Tabs changeTab={(type) => props.changeTab(type)} current="settings">
+      <div label={getMessage('modals.main.marketplace.product.overview')} name="order">
+        <Overview />
+      </div>
       <div
         label={getMessage('modals.main.settings.sections.appearance.navbar.title')}
         name="navbar"
@@ -63,9 +67,9 @@ export default function Settings(props) {
       <div label={getMessage('modals.main.settings.sections.weather.title')} name="weather">
         <Weather />
       </div>
-      <div label={getMessage('modals.main.settings.sections.order.title')} name="order">
+      {/*<div label={getMessage('modals.main.settings.sections.order.title')} name="order">
         <Order />
-      </div>
+</div>*/}
       <div label={getMessage('modals.main.settings.sections.appearance.title')} name="appearance">
         <Appearance />
       </div>

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

@@ -27,6 +27,7 @@ import {
   MdCode as Sideload,
   MdAddCircleOutline as Added,
   MdAddCircleOutline as Create,
+  MdViewAgenda as Overview,
 } from 'react-icons/md';
 
 function Tab({ label, currentTab, onClick, navbarTab }) {
@@ -46,6 +47,9 @@ function Tab({ label, currentTab, onClick, navbarTab }) {
 
   let icon, divider;
   switch (label) {
+    case getMessage('modals.main.marketplace.product.overview'):
+      icon = <Overview />;
+      break;
     case getMessage('modals.main.navbar.settings'):
       icon = <Settings />;
       break;
@@ -59,6 +63,9 @@ function Tab({ label, currentTab, onClick, navbarTab }) {
     case getMessage('modals.main.settings.sections.appearance.navbar.title'):
       icon = <Navbar />;
       break;
+    case getMessage('modals.main.settings.sections.order.title'):
+      icon = <Order />;
+      break;
     case getMessage('modals.main.settings.sections.greeting.title'):
       icon = <Greeting />;
       break;
@@ -87,9 +94,6 @@ function Tab({ label, currentTab, onClick, navbarTab }) {
       icon = <Weather />;
       divider = true;
       break;
-    case getMessage('modals.main.settings.sections.order.title'):
-      icon = <Order />;
-      break;
     case 'Reminder':
       icon = <Reminder />;
       break;