Added background color to mainWindow, which should avoid some flicker…

…ing during window creation, added help icons to settings, fixed lost search string, setting pm: to 0 will remove it, added clear date icon to date picker in dialog, fixed Ctrl & N shortcut on cyrillic keyboards

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.4" date="2024-01-02"/>
+    <release version="2.0.5" date="2024-01-04"/>
   </releases>
   <url type="homepage">https://github.com/ransome1/sleek</url>
   <url type="contact">https://github.com/ransome1/sleek/issues</url>

flatpak/com.github.ransome1.sleek.desktop

@@ -1,5 +1,5 @@
 [Desktop Entry]
-Version=2.0.4
+Version=2.0.5
 Name=sleek
 Exec=sleek
 Type=Application

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sleek",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "main": "./src/main/main.tsx",
   "scripts": {
     "build": "concurrently \"yarn run peggy\" \"yarn run build:main\" \"yarn run build:renderer\"",
@@ -141,7 +141,7 @@
     "webpack-merge": "^5.9.0"
   },
   "build": {
-    "buildVersion": "31",
+    "buildVersion": "34",
     "asar": true,
     "asarUnpack": "**\\*.{node,dll}",
     "files": [
@@ -210,7 +210,8 @@
       "target": [
         "zip",
         "portable",
-        "nsis"
+        "nsis",
+        "appx"
       ],
       "icon": "assets/icons/sleek.ico",
       "artifactName": "${productName}-${version}-win.${ext}"

release/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sleek",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "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": [
@@ -19,7 +19,7 @@
     "url": "https://github.com/ransome1/sleek.git"
   },
   "author": "Robin Ahle <[email protected]>",
-  "copyright": "Copyright © 2023 ${author}",
+  "copyright": "Copyright © 2024 ${author}",
   "license": "MIT",
   "main": "./dist/main/main.js",
   "scripts": {

snap/snapcraft.yaml

@@ -1,6 +1,6 @@
 name: sleek
 base: core20
-version: "2.0.4"
+version: "2.0.5"
 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.

src/main/config.tsx

@@ -5,7 +5,7 @@ import fs from 'fs';
 import { mainWindow } from './main';
 import { createFileWatcher } from './modules/File/Watcher';
 import { createTray } from './modules/Tray';
-import processDataRequest from './modules/ProcessDataRequest/ProcessDataRequest';
+import { processDataRequest, searchString } from './modules/ProcessDataRequest/ProcessDataRequest';
 import handleTheme from './modules/Theme';
 import crypto from 'crypto';
 
@@ -112,15 +112,15 @@ if(!fs.existsSync(customStylesPath)) {
 
 filterStorage.onDidAnyChange(async () => {
   try {
-    await processDataRequest();
+    await processDataRequest(searchString);
   } catch(error: any) {
     console.error(error);
   }
 });
 
 configStorage.onDidAnyChange(async(settings) => {
   try {
-    await processDataRequest();
+    await processDataRequest(searchString);
     mainWindow!.webContents.send('settingsChanged', settings);
   } catch(error: any) {
     console.error(error);

src/main/main.tsx

@@ -10,9 +10,6 @@ import { createTray } from './modules/Tray';
 import './modules/Ipc';
 
 const environment: string | undefined = process.env.NODE_ENV;
-const files: FileObject[] = (configStorage.get('files') as FileObject[]) || [];
-let tray: boolean = configStorage.get('tray');
-const colorTheme = configStorage.get('colorTheme');
 let mainWindow: BrowserWindow | null = null;
 let eventListeners: Record<string, any | undefined> = {};
 
@@ -24,7 +21,7 @@ const handleCreateWindow = () => {
   }
 }
 
-const handleClosed = async () => {
+const handleClosed = async (event) => {
   if(watcher) await watcher.close();
 
   mainWindow = null;
@@ -93,9 +90,15 @@ const handleWindowSizeAndPosition = () => {
 }
 
 const createMainWindow = () => {
+  const colorTheme = configStorage.get('colorTheme');
+  const shouldUseDarkColors = configStorage.get('shouldUseDarkColors');
+  const files: FileObject[] = (configStorage.get('files') as FileObject[]) || [];
+  const tray = configStorage.get('tray');
+
   mainWindow = new BrowserWindow({
     width: 1280,
     height: 1000,
+    backgroundColor: (shouldUseDarkColors) ? '#212224' : '#fff',
     icon: process.platform === 'win32' ? getAssetPath('icons/sleek.ico') : getAssetPath('icons/512x512.png'),
     autoHideMenuBar: true,
     webPreferences: {
@@ -108,16 +111,12 @@ const createMainWindow = () => {
     },
   });
 
-  if (environment === 'development') {
-    mainWindow.webContents.openDevTools();
-  }
+  mainWindow?.loadURL(resolveHtmlPath('index.html'));
 
   handleWindowSizeAndPosition();  
 
   nativeTheme.themeSource = colorTheme;
 
-  mainWindow?.loadURL(resolveHtmlPath('index.html'));
-
   mainWindow
     .on('ready-to-show', handleReadyToShow)
     .on('resize', handleResize)
@@ -135,6 +134,16 @@ const createMainWindow = () => {
   eventListeners.handleMaximize = handleMaximize
   eventListeners.handleUnmaximize = handleUnmaximize;
 
+  createMenu(files);
+
+  if(tray) {
+    createTray();
+  }
+
+  if (environment === 'development') {
+    mainWindow.webContents.openDevTools();
+  }
+
   const customStylesPath: string = configStorage.get('customStylesPath');
   if(customStylesPath) {
     fs.readFile(customStylesPath, 'utf8', (error: Error | null, data) => {
@@ -149,16 +158,17 @@ const createMainWindow = () => {
 }
 
 const handleReadyToShow = async () => {
+  const files: FileObject[] = (configStorage.get('files') as FileObject[]) || [];
   if(files?.length > 0) {
     createFileWatcher(files);
   }
 }
 
 const handleWindowAllClosed = () => {
-  tray = configStorage.get('tray');
+  const tray = configStorage.get('tray');
   if(process.platform !== 'darwin' && !tray) {
     app.quit();
-  } else if(process.platform === 'darwin' && tray) {
+  } else if(!process.mas && process.platform === 'darwin' && tray) {
     app.dock?.hide();
   } else {
     mainWindow?.hide();
@@ -183,12 +193,6 @@ app
 
     createMainWindow();
 
-    createMenu(files);
-
-    if(tray) {
-      createTray();
-    }
-
     eventListeners.handleCreateWindow = handleCreateWindow
     eventListeners.handleWindowAllClosed = handleWindowAllClosed
     eventListeners.handleBeforeQuit = handleBeforeQuit;

src/main/modules/File/Watcher.tsx

@@ -1,5 +1,5 @@
 import chokidar, { FSWatcher } from 'chokidar';
-import processDataRequest from '../ProcessDataRequest/ProcessDataRequest';
+import { processDataRequest, searchString } from '../ProcessDataRequest/ProcessDataRequest';
 import { configStorage } from '../../config';
 import { eventListeners } from '../../main';
 
@@ -24,7 +24,7 @@ function createFileWatcher(files: FileObject[]): void {
     })
     .on('change', async (file) => {
       try {
-        await processDataRequest();
+        await processDataRequest(searchString);
         console.log(`${file} has been changed`);
       } catch(error: any) {
         console.error(error.message);

src/main/modules/Ipc.tsx

@@ -1,6 +1,6 @@
 import { shell } from 'electron';
 import { ipcMain, app, IpcMainEvent, clipboard } from 'electron';
-import processDataRequest from './ProcessDataRequest/ProcessDataRequest';
+import { processDataRequest } from './ProcessDataRequest/ProcessDataRequest';
 import { changeCompleteState } from './ProcessDataRequest/ChangeCompleteState';
 import { writeTodoObjectToFile, removeLineFromFile } from './File/Write';
 import { archiveTodos, handleRequestArchive } from './File/Archive';

src/main/modules/Menu.tsx

@@ -4,6 +4,7 @@ import { mainWindow } from '../main';
 import { openFile, createFile } from './File/Dialog';
 import { handleRequestArchive } from './File/Archive';
 import { configStorage, filterStorage } from '../config';
+import { isCyrillic } from '../util';
 import appPackage from '../../../release/app/package.json';
 
 const isMac: boolean = process.platform === 'darwin';
@@ -148,6 +149,13 @@ function createMenu(files: FileObject[]) {
     {
       label: 'Todos',
       submenu: [
+        {
+          label: 'Add new todo',
+          accelerator: 'CmdOrCtrl+N',
+          click: () => {
+            mainWindow!.webContents.send('isDialogOpen');
+          },
+        },
         {
           label: 'Find',
           accelerator: 'CmdOrCtrl+F',
@@ -166,7 +174,7 @@ function createMenu(files: FileObject[]) {
         },
         {
           label: 'Reset filters',
-          accelerator: 'Ctrl+0',
+          accelerator: 'CmdOrCtrl+0',
           click: async () => {
             filterStorage.set('filters', {});
           },

src/main/modules/ProcessDataRequest/CreateTodoObjects.tsx

@@ -11,12 +11,18 @@ function createTodoObject(index: number, string: string, attributeType?: string,
   let content = string.replaceAll(/[\x10\r\n]/g, ' [LB] ');
 
   let JsTodoTxtObject = new Item(content);
+  const extensions = JsTodoTxtObject.extensions();
 
-  if(attributeType && attributeValue) {
+  if(attributeType) {
     if(attributeType === 'priority') {
-      JsTodoTxtObject.setPriority(attributeValue);
+      const value = (attributeValue === '-') ? null : attributeValue;
+      JsTodoTxtObject.setPriority(value);
     } else {
-      JsTodoTxtObject.setExtension(attributeType, attributeValue);
+      if(!attributeValue) {
+        JsTodoTxtObject.removeExtension(attributeType);
+      } else {
+        JsTodoTxtObject.setExtension(attributeType, attributeValue);
+      }
     }
   }
 
@@ -29,7 +35,7 @@ function createTodoObject(index: number, string: string, attributeType?: string,
   const notify = speakingDates['due:']?.notify || false;
   const t = speakingDates['t:']?.date || null;
   const tString = speakingDates['t:']?.string || null;
-  const extensions = JsTodoTxtObject.extensions();
+
   const hidden = extensions.some(extension => extension.key === 'h' && extension.value === '1');
   const pm: string | number | null = extensions.find(extension => extension.key === 'pm')?.value || null;
   const rec = extensions.find(extension => extension.key === 'rec')?.value || null;

src/main/modules/ProcessDataRequest/ProcessDataRequest.tsx

@@ -61,4 +61,4 @@ async function processDataRequest(search?: string): Promise<void> {
   mainWindow!.webContents.send('requestData', requestedData);
 }
 
-export default processDataRequest;
+export { processDataRequest, searchString };

src/renderer/App.scss

@@ -18,12 +18,10 @@ body {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
-
   code {
     background: $lighter-grey;
     color: $mid-grey;
   }
-
   #root {
     .flexContainer {
       display: flex;
@@ -40,7 +38,6 @@ body {
         display: flex;
         flex-direction: column;
       }
-
       &.hideNavigation {
         transition: margin-left 0.3s ease;
         margin-left: 0;        

src/renderer/App.tsx

@@ -4,7 +4,7 @@ import IpcComponent from './Ipc';
 import MatomoComponent from './Matomo';
 import { CssBaseline, Snackbar, Alert, Box, AlertColor } from '@mui/material';
 import NavigationComponent from './Navigation';
-import TodoDataGrid from './DataGrid/Grid';
+import GridComponent from './Grid/Grid';
 import SplashScreen from './SplashScreen';
 import FileTabs from './Header/FileTabs';
 import { darkTheme, lightTheme } from './Themes';
@@ -140,7 +140,7 @@ const App = () => {
               )}
               {todoObjects && todoObjects.length > 0 && (
                 <>
-                  <TodoDataGrid
+                  <GridComponent
                     todoObjects={todoObjects}
                     setTodoObject={setTodoObject}
                     attributes={attributes}

src/renderer/Dialog/DatePicker.scss

@@ -1,7 +1,7 @@
 @import "../Variables.scss";
 
 .datePicker {
-	width: 11em;
+	width: 11.5em;
 	.Mui-focusVisible {
 		color: $blue;
 	}

src/renderer/Dialog/DatePicker.tsx

@@ -27,7 +27,8 @@ const DatePickerComponent: React.FC<Props> = ({
 
   const handleChange = (date: dayjs.Dayjs | null) => {
     try {
-      ipcRenderer.send('updateTodoObject', todoObject?.id, textFieldValue, type, dayjs(date).format('YYYY-MM-DD'));
+      const dateString = (date) ? dayjs(date).format('YYYY-MM-DD') : null;
+      ipcRenderer.send('updateTodoObject', todoObject?.id, textFieldValue, type, dateString);
     } catch(error: any) {
       console.error(error);
     }
@@ -41,8 +42,11 @@ const DatePickerComponent: React.FC<Props> = ({
         label={t(`todoDialog.datePicker.${type}`)}
         value={date ? dayjs(date) : null}
         onChange={(date) => handleChange(date)}
-        data-testid={`data-testid=dialog-picker-date-${type}`}
-        InputProps={{"data-testid": `dialog-picker-date-${type}`}}
+        // data-testid={`dialog-picker-date-${type}`}
+        // InputProps={{ 'data-testid': `dialog-picker-date-${type}` }}
+        slotProps={{
+          field: { clearable: true, onClear: () => handleChange(null) },
+        }}
       />
     </LocalizationProvider>
   );

src/renderer/Dialog/Dialog.tsx

@@ -73,7 +73,7 @@ const DialogComponent: React.FC<Props> = memo(({
   };
 
   const handleKeyDown = (event: any) => {
-    if(event.metaKey && event.key === 'Enter') {
+    if((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
       event.preventDefault();
       handleAdd();
     }

src/renderer/Dialog/PomodoroPicker.tsx

@@ -19,7 +19,8 @@ const PomodoroPicker: React.FC<Props> = ({
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     try {
-      ipcRenderer.send('updateTodoObject', todoObject?.id, textFieldValue, 'pm', event.target.value);
+      const value = (event.target.value === '0') ? null : event.target.value;
+      ipcRenderer.send('updateTodoObject', todoObject?.id, textFieldValue, 'pm', value);
     } catch(error: any) {
       console.error(error);
     }

src/renderer/DataGrid/DatePickerInline.tsx → src/renderer/Grid/DatePickerInline.tsx

@@ -67,7 +67,10 @@ const DatePickerInline: React.FC<Props> = ({
     };
     return (
       <DatePicker
-        slots={{ field: ButtonField, ...props.slots }}
+        slots={{ 
+          field: ButtonField,
+          ...props.slots
+        }}
         slotProps={{ field: { setOpen, date } }}
         {...props}
         open={open}