refactor(widgets): Continue move to feature based organisation

src/App.jsx

@@ -2,9 +2,9 @@ import variables from 'config/variables';
 import { PureComponent } from 'react';
 import { ToastContainer } from 'react-toastify';
 
-import Background from 'features/widgets/background/Background';
-import Widgets from 'features/widgets/Widgets';
-import Modals from 'features/modals/Modals';
+import Background from 'features/background/Background';
+import Widgets from 'features/misc/views/Widgets';
+import Modals from 'features/misc/modals/Modals';
 
 import { loadSettings, moveSettings } from 'utils/settings';
 

src/features/background/options/BackgroundOptions.jsx

@@ -3,24 +3,20 @@ import { PureComponent } from 'react';
 import { MdSource, MdOutlineKeyboardArrowRight, MdOutlineAutoAwesome } from 'react-icons/md';
 
 import { Header } from 'components/Layout/Settings';
-import Checkbox from '../../../../../../components/Form/Settings/Checkbox/Checkbox';
-import ChipSelect from '../../../../../../components/Form/Settings/ChipSelect/ChipSelect';
-import Dropdown from '../../../../../../components/Form/Settings/Dropdown/Dropdown';
-import Slider from '../../../../../../components/Form/Settings/Slider/Slider';
-import Radio from '../../../../../../components/Form/Settings/Radio/Radio';
-import {
-  Row,
-  Content,
-  Action,
-} from '../../../../../../components/Layout/Settings/Item/SettingsItem';
-import Text from '../../../../../../components/Form/Settings/Text/Text';
+import Checkbox from '../../../components/Form/Settings/Checkbox/Checkbox';
+import ChipSelect from '../../../components/Form/Settings/ChipSelect/ChipSelect';
+import Dropdown from '../../../components/Form/Settings/Dropdown/Dropdown';
+import Slider from '../../../components/Form/Settings/Slider/Slider';
+import Radio from '../../../components/Form/Settings/Radio/Radio';
+import { Row, Content, Action } from '../../../components/Layout/Settings/Item/SettingsItem';
+import Text from '../../../components/Form/Settings/Text/Text';
 
 import ColourSettings from './Colour';
 import CustomSettings from './Custom';
 
 import values from 'utils/data/slider_values.json';
 
-export default class BackgroundSettings extends PureComponent {
+class BackgroundOptions extends PureComponent {
   constructor() {
     super();
     this.state = {
@@ -627,3 +623,5 @@ export default class BackgroundSettings extends PureComponent {
     );
   }
 }
+
+export { BackgroundOptions as default, BackgroundOptions };

src/features/background/options/Colour.jsx

@@ -2,16 +2,12 @@ import variables from 'config/variables';
 import { PureComponent, Fragment } from 'react';
 import { ColorPicker } from '@muetab/react-color-gradient-picker';
 import { toast } from 'react-toastify';
-import {
-  Row,
-  Content,
-  Action,
-} from '../../../../../../components/Layout/Settings/Item/SettingsItem';
+import { Row, Content, Action } from '../../../components/Layout/Settings/Item/SettingsItem';
 
 import { hexToRgb, rgbToHex } from 'utils/background/gradient';
 
 //import '@muetab/react-color-gradient-picker/dist/index.css';
-import '../../../scss/settings/react-color-picker-gradient-picker-custom-styles.scss';
+import '../scss/react-color-picker-gradient-picker-custom-styles.scss';
 
 export default class ColourSettings extends PureComponent {
   DefaultGradientSettings = {

src/features/background/options/Custom.jsx

@@ -13,8 +13,8 @@ import EventBus from 'utils/eventbus';
 import { compressAccurately, filetoDataURL } from 'image-conversion';
 import { videoCheck } from 'utils/background';
 
-import Checkbox from '../../../../../../components/Form/Settings/Checkbox/Checkbox';
-import FileUpload from '../../../../../../components/Form/Settings/FileUpload/FileUpload';
+import Checkbox from '../../../components/Form/Settings/Checkbox/Checkbox';
+import FileUpload from '../../../components/Form/Settings/FileUpload/FileUpload';
 import { Tooltip } from 'components/Elements';
 import Modal from 'react-modal';
 

src/features/background/options/index.jsx

@@ -0,0 +1 @@
+export * from './BackgroundOptions';

src/features/misc/modals/Modals.jsx

@@ -3,8 +3,8 @@ import { PureComponent } from 'react';
 import Modal from 'react-modal';
 
 import Main from './main/Main';
-import Navbar from '../widgets/navbar/Navbar';
-import Preview from '../helpers/preview/Preview';
+import Navbar from '../../navbar/Navbar';
+import Preview from '../../helpers/preview/Preview';
 
 import EventBus from 'utils/eventbus';
 

src/features/misc/modals/main/marketplace/views/Browse.jsx

@@ -12,7 +12,7 @@ import {
 
 import Item from '../components/Items/Item';
 import Items from '../components/Items/Items';
-import Dropdown from '../../../../../components/Form/Settings/Dropdown/Dropdown';
+import Dropdown from '../../../../../../components/Form/Settings/Dropdown/Dropdown';
 import { Header } from 'components/Layout/Settings';
 import { Button } from 'components/Elements';
 

src/features/misc/modals/main/settings/sections/Advanced.jsx

@@ -15,7 +15,7 @@ import ResetModal from '../ResetModal';
 
 import { Header, Section, Row, Content, Action } from 'components/Layout/Settings';
 
-import time_zones from 'features/widgets/time/timezones.json';
+import time_zones from 'features/time/timezones.json';
 
 export default function AdvancedSettings() {
   const [resetModal, setResetModal] = useState(false);

src/features/misc/modals/main/settings/sections/Experimental.jsx

@@ -1,13 +1,17 @@
 import variables from 'config/variables';
 import { useState, memo } from 'react';
-import Checkbox from '../../../../../components/Form/Settings/Checkbox/Checkbox';
-import Slider from '../../../../../components/Form/Settings/Slider/Slider';
+import Checkbox from '../../../../../../components/Form/Settings/Checkbox/Checkbox';
+import Slider from '../../../../../../components/Form/Settings/Slider/Slider';
 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/SettingsItem';
 
 function ExperimentalSettings() {
   const [eventType, setEventType] = useState();

src/features/misc/modals/main/tabs/Settings.jsx

@@ -4,16 +4,16 @@ import { memo } from 'react';
 import Tabs from './backend/Tabs';
 
 import Overview from '../settings/sections/Overview';
-import { NavbarOptions } from 'features/widgets/navbar';
-import { GreetingOptions } from 'features/widgets/greeting';
-import { TimeOptions } from 'features/widgets/time';
-import { QuickLinksOptions } from 'features/widgets/quicklinks';
-import { QuoteOptions } from 'features/widgets/quote';
+import { NavbarOptions } from 'features/navbar';
+import { GreetingOptions } from 'features/greeting';
+import { TimeOptions } from 'features/time';
+import { QuickLinksOptions } from 'features/quicklinks';
+import { QuoteOptions } from 'features/quote';
 import Date from '../settings/sections/Date';
-import { MessageOptions } from 'features/widgets/message';
-import Background from '../settings/sections/background/Background';
-import { SearchOptions } from 'features/widgets/search';
-import { WeatherOptions } from 'features/widgets/weather';
+import { MessageOptions } from 'features/message';
+import { BackgroundOptions } from 'features/background';
+import { SearchOptions } from 'features/search';
+import { WeatherOptions } from 'features/weather';
 import Appearance from '../settings/sections/Appearance';
 import Language from '../settings/sections/Language';
 import Advanced from '../settings/sections/Advanced';
@@ -50,7 +50,7 @@ const sections = [
   {
     label: 'modals.main.settings.sections.background.title',
     name: 'background',
-    component: Background,
+    component: BackgroundOptions,
   },
   { label: 'modals.main.settings.sections.search.title', name: 'search', component: SearchOptions },
   {

src/features/misc/modals/main/tabs/backend/Tabs.jsx

@@ -92,23 +92,25 @@ class Tabs extends PureComponent {
         </div>
         <div className="modalTabContent">
           <div className="modalNavbar">
-            {navbarButtons.map(({ tab, icon }) => (
+            {navbarButtons.map(({ tab, icon }, index) => (
               <Button
                 type="navigation"
                 onClick={() => this.props.changeTab(tab)}
                 icon={icon}
                 label={variables.getMessage(`modals.main.navbar.${tab}`)}
                 active={this.props.current === tab}
-                key={tab}
+                key={`${tab}-${index}`}
               />
             ))}
           </div>
-          {this.props.children.map((tab) => {
+          {this.props.children.map((tab, index) => {
             if (tab.props.label !== this.state.currentTab) {
               return undefined;
             }
 
-            return <ErrorBoundary>{tab.props.children}</ErrorBoundary>;
+            return (
+              <ErrorBoundary key={`error-boundary-${index}`}>{tab.props.children}</ErrorBoundary>
+            );
           })}
         </div>
       </div>