Replaced Box MUI component with div container for performance reasons

ransome1 · Jan 12, 2024 · 0500409 · 0500409
1 parent 7442980
commit 0500409
Show file tree

Hide file tree

Showing 31 changed files with 152 additions and 148 deletions.
diff --git a/flatpak/com.github.ransome1.sleek.appdata.xml b/flatpak/com.github.ransome1.sleek.appdata.xml
@@ -9,7 +9,7 @@
   <developer_name>Robin Ahle</developer_name>
   <content_rating type="oars-1.1"/>
   <releases>
-    <release version="2.0.6" date="2024-01-11"/>
+    <release version="2.0.7" date="2024-01-12"/>
   </releases>
   <url type="homepage">https://github.com/ransome1/sleek</url>
   <url type="contact">https://github.com/ransome1/sleek/issues</url>

diff --git a/flatpak/com.github.ransome1.sleek.desktop b/flatpak/com.github.ransome1.sleek.desktop
@@ -1,5 +1,5 @@
 [Desktop Entry]
-Version=2.0.6
+Version=2.0.7
 Name=sleek
 Exec=sleek
 Type=Application

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sleek",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "main": "./src/main/main.tsx",
   "scripts": {
     "build": "concurrently \"yarn run peggy\" \"yarn run build:main\" \"yarn run build:renderer\"",

diff --git a/release/app/package.json b/release/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sleek",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "todo.txt manager for Linux, Windows and MacOS, free and open-source (FOSS)",
   "synopsis": "todo.txt manager for Linux, Windows and MacOS, free and open-source (FOSS)",
   "keywords": [

diff --git a/snap/snapcraft.yaml b/snap/snapcraft.yaml
@@ -1,6 +1,6 @@
 name: sleek
 base: core20
-version: "2.0.6"
+version: "2.0.7"
 summary: todo.txt manager for Linux, free and open-source (FOSS)
 description: |
   sleek is an open-source (FOSS) todo manager based on the todo.txt syntax. Stripped down to only the most necessary features, and with a clean and simple interface, sleek aims to help you focus on getting things done.

diff --git a/src/__tests__/__mock__/recurrence.txt b/src/__tests__/__mock__/recurrence.txt
@@ -1,15 +1,15 @@
 
-2024-01-11 Line 1 rec:1d due:2024-01-12
-2024-01-11 Line 1 rec:w due:2024-01-18
-2024-01-11 Line 1 rec:2m due:2024-03-11
-2024-01-11 Line 1 rec:+1d due:2024-01-13
-2024-01-11 Line 1 rec:7w due:2024-02-29
-2024-01-11 Line 1 due:2023-07-24 rec:+1b
-2024-01-11 taxes are due in one year t:2022-03-30 due:2022-04-30 rec:+1y
-2024-01-11 Water plants @home +quick due:2024-01-18 t:2024-01-08 rec:1w
-2024-01-11 Line 1 rec:+1d t:2023-09-20
-2024-01-11 Line 1 rec:1d pri:A due:2024-01-12
-2024-01-11 (A) Do something rec:d t:2024-01-12 @SomeContext
-2024-01-11 Do something rec:0d
-2024-01-11 Do something rec:0d due:2024-01-11
-2024-01-11 Do something rec:0d due:2024-01-11 t:2024-01-11
+2024-01-12 Line 1 rec:1d due:2024-01-13
+2024-01-12 Line 1 rec:w due:2024-01-19
+2024-01-12 Line 1 rec:2m due:2024-03-12
+2024-01-12 Line 1 rec:+1d due:2024-01-14
+2024-01-12 Line 1 rec:7w due:2024-03-01
+2024-01-12 Line 1 due:2023-07-24 rec:+1b
+2024-01-12 taxes are due in one year t:2022-03-30 due:2022-04-30 rec:+1y
+2024-01-12 Water plants @home +quick due:2024-01-19 t:2024-01-09 rec:1w
+2024-01-12 Line 1 rec:+1d t:2023-09-20
+2024-01-12 Line 1 rec:1d pri:A due:2024-01-13
+2024-01-12 (A) Do something rec:d t:2024-01-13 @SomeContext
+2024-01-12 Do something rec:0d
+2024-01-12 Do something rec:0d due:2024-01-12
+2024-01-12 Do something rec:0d due:2024-01-12 t:2024-01-12
diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
@@ -4,9 +4,7 @@ import IpcComponent from './IpcRenderer';
 import MatomoComponent from './Matomo';
 import CssBaseline from '@mui/material/CssBaseline';
 import Snackbar from '@mui/material/Snackbar';
-import Alert from '@mui/material/Alert';
-import Box from '@mui/material/Box';
-import AlertColor from '@mui/material/AlertColor';
+import Alert, { AlertColor } from '@mui/material/Alert';
 import NavigationComponent from './Navigation';
 import GridComponent from './Grid/Grid';
 import SplashScreen from './SplashScreen';
@@ -103,7 +101,7 @@ const App = () => {
       <I18nextProvider i18n={i18n}>
         <ThemeProvider theme={settings?.shouldUseDarkColors ? darkTheme : lightTheme}>
           <CssBaseline />
-          <Box className={`flexContainer ${settings?.isNavigationOpen ? '' : 'hideNavigation'} ${settings?.shouldUseDarkColors ? 'darkTheme' : 'lightTheme'} ${settings.disableAnimations ? 'disableAnimations' : ''}`}>
+          <div className={`flexContainer ${settings?.isNavigationOpen ? '' : 'hideNavigation'} ${settings?.shouldUseDarkColors ? 'darkTheme' : 'lightTheme'} ${settings.disableAnimations ? 'disableAnimations' : ''}`}>
             <NavigationComponent
               setDialogOpen={setDialogOpen}
               settings={settings}
@@ -120,7 +118,7 @@ const App = () => {
                 attributeMapping={attributeMapping}
               />
             )}
-            <Box className="flexItems">
+            <div className="flexItems">
               {settings.files?.length > 0 && (
               <>
                 {settings.showFileTabs ?
@@ -168,8 +166,8 @@ const App = () => {
                 headers={headers}
                 settings={settings}
               />
-            </Box>
-          </Box>
+            </div>
+          </div>
           {dialogOpen ? (
             <DialogComponent
               todoObject={todoObject}

diff --git a/src/renderer/Coloring.scss b/src/renderer/Coloring.scss
@@ -109,9 +109,6 @@
     svg {
       margin: 0 0.2em;
     }
-    .MuiBox-root {
-      padding: 0 0.5em 0 0;
-    }
     &.Mui-disabled {
       color: white;
     }

diff --git a/src/renderer/Dialog/AutoSuggest.tsx b/src/renderer/Dialog/AutoSuggest.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
 import Autosuggest from 'react-autosuggest';
-import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import TextField from '@mui/material/TextField';
 import './AutoSuggest.scss';
@@ -76,12 +75,12 @@ const AutoSuggest: React.FC<AutoSuggestProps> = ({
   };
 
   const handleRenderSuggestion = (suggestion: string, { isHighlighted }: { isHighlighted: boolean }) => (
-    <Box
+    <div
       data-todotxt-attribute={prefix === '+' ? 'projects' : prefix === '@' ? 'contexts' : ''}
       className={isHighlighted ? 'selected' : ''}
     >
       <Button key={suggestion} data-testid={`dialog-autosuggest-button-${prefix === '+' ? 'project' : prefix === '@' ? 'context' : ''}`}>{suggestion}</Button>
-    </Box>
+    </div>
   );
 
   const handleSuggestionsClearRequested = () => {
@@ -139,9 +138,9 @@ const AutoSuggest: React.FC<AutoSuggestProps> = ({
           <TextField {...inputProps} multiline className="input" />
         )}
         renderSuggestionsContainer={({ containerProps, children }) => (
-          <Box {...containerProps} style={{ width: textFieldRef.current?.offsetWidth ? textFieldRef.current.offsetWidth + 28 : 'auto' }}>
+          <div {...containerProps} style={{ width: textFieldRef.current?.offsetWidth ? textFieldRef.current.offsetWidth + 28 : 'auto' }}>
             {children}
-          </Box>
+          </div>
         )}
         suggestions={suggestions}
         shouldRenderSuggestions={handleShouldRenderSuggestions}

diff --git a/src/renderer/Dialog/PriorityPicker.tsx b/src/renderer/Dialog/PriorityPicker.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
 import FormControl from '@mui/material/FormControl';
 import InputLabel from '@mui/material/InputLabel';
-import Select from '@mui/material/Select';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
 import MenuItem from '@mui/material/MenuItem';
-import SelectChangeEvent from '@mui/material/SelectChangeEvent';
 import { withTranslation, WithTranslation } from 'react-i18next';
 import { i18n } from '../Settings/LanguageSelector';
 import './PriorityPicker.scss';

diff --git a/src/renderer/Drawer/Attributes.scss b/src/renderer/Drawer/Attributes.scss
@@ -25,6 +25,9 @@
 		}
 		.MuiAccordionDetails-root {
 			padding: 0.5em 0;
+			display: flex;
+			flex-wrap: wrap;
+			gap: 0.3em;
 		}
 		.MuiAccordionSummary-root {
 			height: 3em;
@@ -38,11 +41,6 @@
 				min-height: auto;
 			}
 		}
-		.MuiBox-root {
-			display: flex;
-			flex-wrap: wrap;
-			gap: 0.3em;
-		}
 		&:before {
 			display: none;
 		}

diff --git a/src/renderer/Drawer/Attributes.tsx b/src/renderer/Drawer/Attributes.tsx
@@ -2,7 +2,6 @@ import React, { useState, useEffect, useRef, memo } from 'react';
 import Accordion from '@mui/material/Accordion';
 import AccordionSummary from '@mui/material/AccordionSummary';
 import AccordionDetails from '@mui/material/AccordionDetails';
-import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Badge from '@mui/material/Badge';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
@@ -75,13 +74,13 @@ const DrawerAttributes: React.FC<Props> = memo(({
   }, []);
 
   return (
-    <Box id="Attributes" ref={firstTabbableElementRef}>
+    <div id="Attributes" ref={firstTabbableElementRef}>
       {isAttributesEmpty(attributes) ? (
-        <Box className="placeholder">
+        <div className="placeholder">
           <AirIcon />
           <br />
           {t(`drawer.attributes.noAttributesAvailable`)}
-        </Box>
+        </div>
       ) : (
         Object.keys(attributes).map((key, index) =>
           Object.keys(attributes[key]).length > 0 ? (
@@ -101,7 +100,7 @@ const DrawerAttributes: React.FC<Props> = memo(({
                 </Badge>
               </AccordionSummary>
               <AccordionDetails>
-                <Box>
+
                   {attributes && Object.keys(attributes[key]).map((value, childIndex) => {
                     const excluded = filters && filters[key]?.some(
                       (filter: any) => filter.value === value && filter.exclude
@@ -110,7 +109,7 @@ const DrawerAttributes: React.FC<Props> = memo(({
                     const disabled = attributes[key][value].count === 0;
                     const notify = (key === 'due') ? attributes[key][value].notify : false;
                     return (
-                      <Box
+                      <div
                         key={`${key}-${value}-${childIndex}`}
                         data-todotxt-attribute={key}
                         data-todotxt-value={value}
@@ -134,26 +133,26 @@ const DrawerAttributes: React.FC<Props> = memo(({
                           </Button>
                         </Badge>
                         {(isCtrlKeyPressed || excluded) && (
-                          <Box
+                          <div
                             data-todotxt-attribute={key}
                             data-todotxt-value={value}
                             data-testid={`drawer-button-exclude-${key}`}
                             className="overlay"
                             onClick={() => handleFilterSelect(key, value, filters, isCtrlKeyPressed)}
                           >
                             <VisibilityOffIcon />
-                          </Box>
+                          </div>
                         )}
-                      </Box>
+                      </div>
                     );
                   })}
-                </Box>
+
               </AccordionDetails>
             </Accordion>
           ) : null
         )
       )}
-    </Box>
+    </div>
   );
 });
 

diff --git a/src/renderer/Drawer/Drawer.tsx b/src/renderer/Drawer/Drawer.tsx
@@ -2,7 +2,6 @@ import React, { useState, useRef, useEffect, memo } from 'react';
 import Drawer from '@mui/material/Drawer';
 import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
-import Box from '@mui/material/Box';
 import DrawerAttributes from './Attributes';
 import DrawerSorting from './Sorting/Sorting';
 import DrawerFilters from './Filters';
@@ -89,7 +88,7 @@ const DrawerComponent: React.FC<Props> = memo(({
       className={`${settings.isDrawerOpen ? 'open' : ''}`}
       style={{ width: drawerWidth, marginLeft: -drawerWidth }}
     >
-      <Box className="drawerHandle" onMouseDown={handleMouseDown} />
+      <div className="drawerHandle" onMouseDown={handleMouseDown} />
       <Tabs className="tabs" centered value={activeTab} onChange={handleTabChange}>
         <Tab tabIndex={0} label={t('drawer.tabs.attributes')} value="attributes" icon={<FilterAltIcon />} data-testid={'drawer-tab-attributes'} />
         <Tab tabIndex={0} label={t('drawer.tabs.filters')} value="filters" icon={<TuneIcon />} data-testid={'drawer-tab-filters'} />

diff --git a/src/renderer/Drawer/Filters.tsx b/src/renderer/Drawer/Filters.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import Link from '@mui/material/Link';
-import Box from '@mui/material/Box';
 import FormGroup from '@mui/material/FormGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Switch from '@mui/material/Switch';
@@ -27,6 +26,18 @@ const visibleSettings = {
   },
 };
 
+const handleHelpClick = (event, url) => {
+  event.preventDefault();
+  event.stopPropagation();
+  if(url) {
+    ipcRenderer.send('openInBrowser', url)
+  }
+};
+
+const handleChange = (event, settingName, value) => {
+  store.set(settingName, value);
+};
+
 interface Props extends WithTranslation {
   settings: Settings;
   t: typeof i18n.t;
@@ -37,24 +48,25 @@ const DrawerFilters: React.FC<Props> = ({
   t
 }) => {
   return (
-    <Box id="Filters">
+    <div id="Filters">
       <FormGroup>
         {Object.entries(visibleSettings).map(([settingName, settingValue]) => (
           settingValue.style === 'toggle' ? (
             <FormControlLabel
               key={settingName}
               control={
                 <Switch
+                  data-testid={`setting-toggle-${settingName}`}
                   checked={settings[settingName as keyof Settings]}
-                  onChange={(event) => store.set(settingName, event.target.checked)}
+                  onChange={(event) => handleChange(event, settingName, event.target.checked)}
                   name={settingName}
                 />
               }
               label={
                 settingValue.help ? (
                   <>
                     {t(`drawer.filters.${settingName}`)}
-                    <Link onClick={() => ipcRenderer.send('openInBrowser', settingValue.help)}>
+                    <Link onClick={(event) => handleHelpClick(event, settingValue.help)}>
                       <HelpIcon />
                     </Link>
                   </>
@@ -64,7 +76,7 @@ const DrawerFilters: React.FC<Props> = ({
           ) : null
         ))}
       </FormGroup>
-    </Box>
+    </div>
   );
 };
 

diff --git a/src/renderer/Drawer/Sorting/DraggableList.scss b/src/renderer/Drawer/Sorting/DraggableList.scss
@@ -8,11 +8,8 @@
 		margin: 0;
 	}
 	li {
-		padding: 0 0.5em 0 0;
+		padding: 0.25em 1em;
 		border-bottom: 1px dashed $mid-grey;
-		.MuiBox-root {
-			padding: 0.5em 1em;
-		}
 		& > *:not(:last-child) {
 			margin-right: 1em;
 		}

diff --git a/src/renderer/Drawer/Sorting/DraggableList.tsx b/src/renderer/Drawer/Sorting/DraggableList.tsx
@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react';
 import DraggableListItem from './DraggableListItem';
-import Box from '@mui/material/Box';
 import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
 import './DraggableList.scss';
 
@@ -37,7 +36,7 @@ const DraggableList: React.FC<DraggableListProps> = ({
     <DragDropContext onDragEnd={onDragEnd}>
       <Droppable droppableId="droppable-list">
         {(provided: any) => (
-          <Box ref={provided.innerRef} {...provided.droppableProps}>
+          <div ref={provided.innerRef} {...provided.droppableProps}>
             {accordionOrder.map((item: Sorting, index: number) => (
               <DraggableListItem
                 item={item}
@@ -49,7 +48,7 @@ const DraggableList: React.FC<DraggableListProps> = ({
               />
             ))}
             {provided.placeholder}
-          </Box>
+          </div>
         )}
       </Droppable>
     </DragDropContext>

diff --git a/src/renderer/Drawer/Sorting/DraggableListItem.tsx b/src/renderer/Drawer/Sorting/DraggableListItem.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { Draggable } from 'react-beautiful-dnd';
 import ListItem from '@mui/material/ListItem';
 import Button from '@mui/material/Button';
-import Box from '@mui/material/Box';
 import SortIcon from '@mui/icons-material/Sort';
 import DragHandleIcon from '@mui/icons-material/DragHandle';
 import './DraggableListItem.scss';
@@ -42,7 +41,7 @@ const DraggableListItem: React.FC<DraggableListItemProps> = ({
           className={snapshot.isDragging ? 'draggingListItem' : ''}
           data-testid={`drawer-sorting-draggable-list-item-${item.value}`}
         >
-          <Box><DragHandleIcon /></Box>
+          <div><DragHandleIcon /></div>
           {attributeMapping[item.value]}
           <Button onClick={handleButtonClick} data-testid={`drawer-sorting-draggable-list-item-${item.value}-invert`}>
             {!item.invert && <SortIcon className='invert' />}