Cleaned up header, added setting to show/hide the file tabs, temporar…

…ily removed dark theme

src/__tests__/__mock__/recurrence.txt

@@ -1,7 +1,7 @@
 
-2023-09-10 Line 1 rec:1d due:2023-09-11
-2023-09-10 Line 1 rec:w due:2023-09-17
-2023-09-10 Line 1 rec:2m due:2023-11-10
-2023-09-10 Line 1 rec:+1d due:2023-09-12
-2023-09-10 Line 1 rec:7w due:2023-10-29
+2023-09-12 Line 1 rec:1d due:2023-09-13
+2023-09-12 Line 1 rec:w due:2023-09-19
+2023-09-12 Line 1 rec:2m due:2023-11-12
+2023-09-12 Line 1 rec:+1d due:2023-09-14
+2023-09-12 Line 1 rec:7w due:2023-10-31
 2023-07-21 Line 1 rec:+1b due:2023-07-24

src/__tests__/__mock__/test.txt

@@ -1,5 +1,5 @@
 Line 1
 Edited line
 New line
-2023-09-10 New line with creation date
+2023-09-12 New line with creation date
 New line with relative threshold date t:June 3rd, 2005

src/main/config.ts

@@ -39,7 +39,8 @@ const defaultConfigData = {
   dueDateInTheFuture: true,
   colorTheme: 'system',
   shouldUseDarkColors: false,
-  notificationsAllowed: false,
+  notificationsAllowed: true,
+  showFileTabs: true,
 };
 
 const userDataDirectory = path.join(app.getPath('userData'), 'userData' + app.getVersion());

src/renderer/App.scss

@@ -19,11 +19,6 @@ body {
         height: 100vh;
         display: flex;
         flex-direction: column;
-        header {
-          display: flex;
-          flex-direction: row;
-          background: #ebebeb;
-        }
       }
       button.showNavigation {
         width: 2.5em;

src/renderer/App.tsx

@@ -39,6 +39,7 @@ const App = () => {
   const [isNavigationHidden, setIsNavigationHidden] = useState<boolean>(store.get('isNavigationHidden') || false);
   const [colorTheme, setColorTheme] = useState<boolean>(store.get('colorTheme') || 'system');
   const [shouldUseDarkColors, setShouldUseDarkColors] = useState<boolean>(store.get('shouldUseDarkColors') || false);
+  const [showFileTabs, setShowFileTabs] = useState<boolean>(store.get('showFileTabs'));
 
   const responseHandler = function(response) {
     if (response instanceof Error) {
@@ -141,7 +142,7 @@ const App = () => {
   }, []);
 
   return (
-    <ThemeProvider theme={shouldUseDarkColors ? darkTheme : lightTheme}>
+    <ThemeProvider theme={shouldUseDarkColors ? lightTheme : lightTheme}>
       <CssBaseline />
       <div className={isNavigationHidden ? 'flexContainer hideNavigation' : 'flexContainer'}>
         <NavigationComponent
@@ -156,6 +157,8 @@ const App = () => {
           setIsNavigationHidden={setIsNavigationHidden}
           colorTheme={colorTheme}
           setColorTheme={setColorTheme}
+          showFileTabs={showFileTabs}
+          setShowFileTabs={setShowFileTabs}
         />
         <DrawerComponent 
           isDrawerOpen={isDrawerOpen}
@@ -168,8 +171,8 @@ const App = () => {
         />
         <div className="flexItems">
           {files?.length > 0 && (
-          <header>
-            {isSearchOpen ? null : <FileTabs files={files} />}
+          <>
+            {!isSearchOpen && showFileTabs ? <FileTabs files={files} /> : null}
             {headers?.availableObjects > 0 ?
             <>
               <Search
@@ -187,7 +190,7 @@ const App = () => {
               />
             </>
             : null }
-          </header>
+          </>
           )}
           <TodoDataGrid 
             todoObjects={todoObjects}

src/renderer/Navigation.js

@@ -7,7 +7,7 @@ import './Navigation.scss';
 
 const ipcRenderer = window.electron.ipcRenderer;
 
-const NavigationComponent = ({ isDrawerOpen, setIsDrawerOpen, drawerParameter, setDrawerParameter, setDialogOpen, files, headers, isNavigationHidden, setIsNavigationHidden, colorTheme, setColorTheme }) => {
+const NavigationComponent = ({ isDrawerOpen, setIsDrawerOpen, drawerParameter, setDrawerParameter, setDialogOpen, files, headers, isNavigationHidden, setIsNavigationHidden, colorTheme, setColorTheme, showFileTabs, setShowFileTabs }) => {
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
 
   const openSettings = () => {
@@ -68,7 +68,14 @@ const NavigationComponent = ({ isDrawerOpen, setIsDrawerOpen, drawerParameter, s
         <Button className='break' onClick={openSettings}>
           <FontAwesomeIcon icon={faCog} />
         </Button>
-        <Settings isOpen={isSettingsOpen} onClose={closeSettings} colorTheme={colorTheme} setColorTheme={setColorTheme} />
+        <Settings 
+          isOpen={isSettingsOpen}
+          onClose={closeSettings}
+          colorTheme={colorTheme}
+          setColorTheme={setColorTheme}
+          showFileTabs={showFileTabs}
+          setShowFileTabs={setShowFileTabs}
+          />
         <Button onClick={hideNavigation}>
           <FontAwesomeIcon icon={faAngleLeft} />
         </Button>

src/renderer/Search.scss

@@ -1,6 +1,8 @@
 @import "Variables.scss";
 
-#Search {
+#Search {	
+	height: 2.5em;
+	min-height: 2.5em;
 	display: flex;
 	flex: 1;
 	.MuiTextField-root {

src/renderer/Settings.js

@@ -4,7 +4,7 @@ import './Settings.scss';
 
 const store = window.electron.store;
 
-const Settings = ({ isOpen, onClose, colorTheme, setColorTheme }) => {
+const Settings = ({ isOpen, onClose, colorTheme, setColorTheme, showFileTabs, setShowFileTabs }) => {
   const [appendCreationDate, setAppendCreationDate] = useState(store.get('appendCreationDate'));
   const [convertRelativeToAbsoluteDates, setConvertRelativeToAbsoluteDates] = useState(store.get('convertRelativeToAbsoluteDates'));
   const [notificationsAllowed, setNotificationsAllowed] = useState(store.get('notificationsAllowed'));
@@ -28,6 +28,10 @@ const Settings = ({ isOpen, onClose, colorTheme, setColorTheme }) => {
         store.set(name, event.target.value);
         setColorTheme(event.target.value);
         break;
+      case 'showFileTabs':
+        store.set(name, checked);
+        setShowFileTabs(checked);
+        break;
       default:
         break;
     }
@@ -56,6 +60,10 @@ const Settings = ({ isOpen, onClose, colorTheme, setColorTheme }) => {
             control={<Switch checked={notificationsAllowed} onChange={handleSwitchChange} name="notificationsAllowed" />}
             label="Send notification when due date is today or tomorrow"
           />
+          <FormControlLabel
+            control={<Switch checked={showFileTabs} onChange={handleSwitchChange} name="showFileTabs" />}
+            label="Show file tabs"
+          />
           <FormControl>
             <InputLabel id="colorTheme">Theme</InputLabel>
             <Select

src/renderer/ToolBar.scss

@@ -1,9 +1,13 @@
 @import "Variables.scss";
 
 .ToolBar {
-	display: flex;
-	margin-left: auto;
-	align-items: center;
+	position: fixed;
+	top: 0;
+	right: 0;
+	z-index: 9;
+	// display: flex;
+	// margin-left: auto;
+	// align-items: center;
 	svg {
 		cursor: pointer;
 		padding: 0.5em 1em;