kando-menu · Schneegans · May 29, 2025 · May 28, 2025 · May 28, 2025 · May 28, 2025
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -2,14 +2,14 @@
 // SPDX-License-Identifier: CC0-1.0
 
 /* eslint-disable @typescript-eslint/naming-convention */
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { defineConfig } from 'eslint/config';
+import { includeIgnoreFile } from '@eslint/compat';
 import js from '@eslint/js';
-import ts from 'typescript-eslint';
 import prettierRecommended from 'eslint-plugin-prettier/recommended';
-import { includeIgnoreFile } from '@eslint/compat';
+import { defineConfig } from 'eslint/config';
 import globals from 'globals';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import ts from 'typescript-eslint';
 
 const filename = fileURLToPath(import.meta.url);
 const dirname = path.dirname(filename);
@@ -33,7 +33,33 @@ export default defineConfig([
       '@typescript-eslint/no-empty-function': 'off',
       '@typescript-eslint/no-require-imports': 'off',
       '@typescript-eslint/no-var-requires': 'off',
-      '@typescript-eslint/naming-convention': 'error',
+      '@typescript-eslint/naming-convention': [
+        'error',
+        {
+          selector: 'default',
+          format: ['camelCase'],
+          leadingUnderscore: 'allow',
+          trailingUnderscore: 'allow',
+        },
+        {
+          selector: 'import',
+          format: ['camelCase', 'PascalCase'],
+        },
+        {
+          selector: 'variable',
+          format: ['camelCase', 'UPPER_CASE'],
+          leadingUnderscore: 'allow',
+          trailingUnderscore: 'allow',
+        },
+        {
+          selector: 'typeLike',
+          format: ['PascalCase'],
+        },
+        {
+          selector: 'function',
+          format: ['PascalCase', 'camelCase'],
+        },
+      ],
       '@typescript-eslint/no-unused-vars': [
         'error',
         {

diff --git a/src/main/index.ts b/src/main/index.ts
@@ -167,7 +167,11 @@ const handleArguments = (
 
 app
   .whenReady()
-  .then(() => installExtension(REACT_DEVELOPER_TOOLS))
+  .then(() => {
+    if (process.env.NODE_ENV === 'development') {
+      return installExtension(REACT_DEVELOPER_TOOLS);
+    }
+  })
   .then(() => {
     return i18next.use(i18Backend).init({
       lng: app.getLocale(),

diff --git a/src/settings-renderer/components/App.tsx b/src/settings-renderer/components/App.tsx
@@ -31,7 +31,13 @@ import { Sidebar } from './common';
 import * as classes from './App.module.scss';
 const cx = classNames.bind(classes);
 
-export default () => {
+/**
+ * This is the main component of the settings dialog. It manages the layout of the
+ * different components: the menu list on the left, the menu preview in the center, and
+ * the properties on the right. It also handles global shortcuts for undo and redo, and
+ * sets the color scheme of the body element based on the user's settings.
+ */
+export default function App() {
   const [settingsWindowColorScheme] = useGeneralSetting('settingsWindowColorScheme');
   const [settingsWindowFlavor] = useGeneralSetting('settingsWindowFlavor');
 
@@ -111,4 +117,4 @@ export default () => {
       />
     </>
   );
-};
+}
diff --git a/src/settings-renderer/components/common/Base64IconPicker.tsx b/src/settings-renderer/components/common/Base64IconPicker.tsx
@@ -30,7 +30,7 @@ interface IProps {
  * @param props - The properties for the icon picker component.
  * @returns A textarea element that allows the user to enter a base64 encoded image.
  */
-export default (props: IProps) => {
+export default function Base64IconPicker(props: IProps) {
   const textareaRef = React.useRef<HTMLTextAreaElement>(null);
   const [value, setValue] = React.useState('');
 
@@ -87,4 +87,4 @@ export default (props: IProps) => {
       ].join('\n')}
     />
   );
-};
+}
diff --git a/src/settings-renderer/components/common/Button.tsx b/src/settings-renderer/components/common/Button.tsx
@@ -62,7 +62,7 @@ interface IProps {
  * @param props - The properties for the button component.
  * @returns A button element.
  */
-export default (props: IProps) => {
+export default function Button(props: IProps) {
   const className = cx({
     button: true,
     [props.variant || 'secondary']: true,
@@ -84,4 +84,4 @@ export default (props: IProps) => {
       {props.label}
     </button>
   );
-};
+}
diff --git a/src/settings-renderer/components/common/Checkbox.tsx b/src/settings-renderer/components/common/Checkbox.tsx
@@ -37,7 +37,7 @@ interface IProps {
  * @param props - The properties for the checkbox component.
  * @returns A checkbox element.
  */
-export default (props: IProps) => {
+export default function Checkbox(props: IProps) {
   return (
     <SettingsRow label={props.label} info={props.info} labelClickable>
       <input
@@ -49,4 +49,4 @@ export default (props: IProps) => {
       />
     </SettingsRow>
   );
-};
+}
diff --git a/src/settings-renderer/components/common/ColorButton.tsx b/src/settings-renderer/components/common/ColorButton.tsx
@@ -33,7 +33,7 @@ interface IProps {
  * @param props - The properties for the color button component.
  * @returns A color button element.
  */
-export default (props: IProps) => {
+export default function ColorButton(props: IProps) {
   const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
   const [cssColor, setCSSColor] = React.useState(chroma(props.color).css());
   const [inputColor, setInputColor] = React.useState(chroma(props.color).css());
@@ -87,4 +87,4 @@ export default (props: IProps) => {
       </div>
     </Popover>
   );
-};
+}
diff --git a/src/settings-renderer/components/common/Dropdown.tsx b/src/settings-renderer/components/common/Dropdown.tsx
@@ -50,7 +50,7 @@ interface IProps<T extends string> {
  * @param props - The properties for the dropdown component.
  * @returns A dropdown element.
  */
-export default <T extends string>(props: IProps<T>) => {
+export default function Dropdown<T extends string>(props: IProps<T>) {
   const invalidSelection =
     props.options.find((option) => option.value === props.initialValue) === undefined;
 
@@ -78,4 +78,4 @@ export default <T extends string>(props: IProps<T>) => {
       </select>
     </SettingsRow>
   );
-};
+}
diff --git a/src/settings-renderer/components/common/FilePicker.tsx b/src/settings-renderer/components/common/FilePicker.tsx
@@ -42,7 +42,7 @@ interface IProps {
  * @param props - The properties for the component.
  * @returns A React component that allows the user to enter a shortcut.
  */
-export default (props: IProps) => {
+export default function FilePicker(props: IProps) {
   const [path, setPath] = React.useState(props.initialValue);
 
   // Update the value when the initialValue prop changes. This is necessary because the
@@ -104,4 +104,4 @@ export default (props: IProps) => {
       </div>
     </SettingsRow>
   );
-};
+}
diff --git a/src/settings-renderer/components/common/GridIconPicker.tsx b/src/settings-renderer/components/common/GridIconPicker.tsx
@@ -52,10 +52,15 @@ interface IProps {
  * @param props - The properties for the icon picker component.
  * @returns A grid icon picker element.
  */
-export default (props: IProps) => {
+export default function GridIconPicker(props: IProps) {
   const [gridInstance, setGridInstance] = React.useState<Grid | null>(null);
-  const theme = IconThemeRegistry.getInstance().getTheme(props.theme);
-  const fetchedIcons = theme.iconPickerInfo.listIcons(props.filterTerm);
+
+  // Listing the icons is expensive, so we only do it when the theme or filter term
+  // changes.
+  const fetchedIcons = React.useMemo(() => {
+    const theme = IconThemeRegistry.getInstance().getTheme(props.theme);
+    return theme.iconPickerInfo.listIcons(props.filterTerm);
+  }, [props.theme, props.filterTerm]);
 
   const columns = 8;
   const rows = Math.ceil(fetchedIcons.length / columns);
@@ -121,4 +126,4 @@ export default (props: IProps) => {
       </AutoSizer>
     </div>
   );
-};
+}
diff --git a/src/settings-renderer/components/common/Headerbar.tsx b/src/settings-renderer/components/common/Headerbar.tsx
@@ -36,7 +36,7 @@ interface IProps {
  * @param props - The properties for the header bar component.
  * @returns A header bar element.
  */
-export default (props: IProps) => {
+export default function Headerbar(props: IProps) {
   return (
     <div className={classes.headerbar}>
       <div
@@ -54,4 +54,4 @@ export default (props: IProps) => {
       </div>
     </div>
   );
-};
+}
diff --git a/src/settings-renderer/components/common/IconChooserButton.tsx b/src/settings-renderer/components/common/IconChooserButton.tsx
@@ -52,7 +52,7 @@ interface IProps {
  * @param props - The properties for the color button component.
  * @returns A color button element.
  */
-export default (props: IProps) => {
+export default function IconChooserButton(props: IProps) {
   const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
   const [filterTerm, setFilterTerm] = React.useState('');
   const [theme, setTheme] = React.useState(props.theme);
@@ -144,4 +144,4 @@ export default (props: IProps) => {
       />
     </Popover>
   );
-};
+}
diff --git a/src/settings-renderer/components/common/InfoItem.tsx b/src/settings-renderer/components/common/InfoItem.tsx
@@ -24,7 +24,7 @@ interface IProps {
  * @param props - The properties for the info item component.
  * @returns An info item element.
  */
-export default (props: IProps) => {
+export default function InfoItem(props: IProps) {
   return (
     <span
       className={classes.info}
@@ -33,4 +33,4 @@ export default (props: IProps) => {
       <TbInfoSquareRoundedFilled />
     </span>
   );
-};
+}
diff --git a/src/settings-renderer/components/common/MacroPicker.tsx b/src/settings-renderer/components/common/MacroPicker.tsx
@@ -43,7 +43,7 @@ interface IProps {
  * @param props - The properties for the macro-picker component.
  * @returns A macro-picker element.
  */
-export default (props: IProps) => {
+export default function MacroPicker(props: IProps) {
   const [textValue, setTextValue] = React.useState(convertToString(props.initialValue));
   const [recording, setRecording] = React.useState(false);
   const inputRef = React.useRef<HTMLTextAreaElement>(null);
@@ -127,7 +127,7 @@ export default (props: IProps) => {
       />
     </div>
   );
-};
+}
 
 /**
  * This method normalizes the given macro. It properly formats the JSON input and turns

diff --git a/src/settings-renderer/components/common/Modal.tsx b/src/settings-renderer/components/common/Modal.tsx
@@ -65,7 +65,7 @@ interface IProps {
  * @param props - The properties for the modal component.
  * @returns A modal element.
  */
-export default (props: IProps) => {
+export default function Modal(props: IProps) {
   const modalContent = React.useRef(null);
   const pointerDownOnBackground = React.useRef(false);
 
@@ -177,4 +177,4 @@ export default (props: IProps) => {
     </CSSTransition>,
     document.body
   );
-};
+}
diff --git a/src/settings-renderer/components/common/Note.tsx b/src/settings-renderer/components/common/Note.tsx
@@ -53,7 +53,7 @@ interface IProps {
  * @param props - The properties for the note component.
  * @returns A note element.
  */
-export default (props: IProps) => {
+export default function Note(props: IProps) {
   const handleLinkClick = (href: string) => {
     if (props.onLinkClick) {
       props.onLinkClick(href); // Execute the callback with the link's href
@@ -99,4 +99,4 @@ export default (props: IProps) => {
       )}
     </div>
   );
-};
+}
diff --git a/src/settings-renderer/components/common/Popover.tsx b/src/settings-renderer/components/common/Popover.tsx
@@ -46,7 +46,7 @@ interface IProps {
  * @param props - The properties for the modal component.
  * @returns A popover element.
  */
-export default (props: IProps) => {
+export default function Popover(props: IProps) {
   const popoverContent = React.useRef(null);
   const popoverTriangle = React.useRef(null);
   const popoverTarget = React.useRef(null);
@@ -173,4 +173,4 @@ export default (props: IProps) => {
       )}
     </>
   );
-};
+}
diff --git a/src/settings-renderer/components/common/RandomTip.tsx b/src/settings-renderer/components/common/RandomTip.tsx
@@ -29,7 +29,7 @@ interface IProps {
  * @param props - The properties for the tip component.
  * @returns A note element.
  */
-export default (props: IProps) => {
+export default function RandomTip(props: IProps) {
   return (
     <Note
       center
@@ -41,4 +41,4 @@ export default (props: IProps) => {
       {props.tips[Math.floor(Math.random() * props.tips.length)]}
     </Note>
   );
-};
+}
diff --git a/src/settings-renderer/components/common/Scrollbox.tsx b/src/settings-renderer/components/common/Scrollbox.tsx
@@ -19,7 +19,14 @@ interface IProps {
   hideScrollbar?: boolean;
 }
 
-export default (props: IProps) => {
+/**
+ * Wraps its children in a scrollable box. The scrollbox has a maximum height and a fixed
+ * width. If the content exceeds the maximum height, a scrollbar will appear.
+ *
+ * @param props - The properties for the scrollbox component.
+ * @returns A scrollbox element.
+ */
+export default function Scrollbox(props: IProps) {
   return (
     <div
       className={
@@ -29,4 +36,4 @@ export default (props: IProps) => {
       <div className={classes.content}>{props.children}</div>
     </div>
   );
-};
+}
diff --git a/src/settings-renderer/components/common/SettingsCheckbox.tsx b/src/settings-renderer/components/common/SettingsCheckbox.tsx
@@ -43,7 +43,9 @@ type BooleanKeys<T> = {
  * @param props - The properties for the managed checkbox component.
  * @returns A managed checkbox element.
  */
-export default <K extends BooleanKeys<IGeneralSettings>>(props: IProps<K>) => {
+export default function SettingsCheckbox<K extends BooleanKeys<IGeneralSettings>>(
+  props: IProps<K>
+) {
   const [state, setState] = useGeneralSetting(props.settingsKey);
 
   return (
@@ -55,4 +57,4 @@ export default <K extends BooleanKeys<IGeneralSettings>>(props: IProps<K>) => {
       disabled={props.disabled}
     />
   );
-};
+}
diff --git a/src/settings-renderer/components/common/SettingsDropdown.tsx b/src/settings-renderer/components/common/SettingsDropdown.tsx
@@ -53,7 +53,9 @@ type EnumKeys<T> = {
  * @param props - The properties for the managed dropdown component.
  * @returns A managed dropdown element.
  */
-export default <K extends EnumKeys<IGeneralSettings>>(props: IProps<K>) => {
+export default function SettingsDropdown<K extends EnumKeys<IGeneralSettings>>(
+  props: IProps<K>
+) {
   const [state, setState] = useGeneralSetting(props.settingsKey);
 
   return (
@@ -68,4 +70,4 @@ export default <K extends EnumKeys<IGeneralSettings>>(props: IProps<K>) => {
       maxWidth={props.maxWidth}
     />
   );
-};
+}
diff --git a/src/settings-renderer/components/common/SettingsRow.tsx b/src/settings-renderer/components/common/SettingsRow.tsx
@@ -46,7 +46,7 @@ interface IProps {
  * @param props - The properties for the settings-row component.
  * @returns A settings-row element.
  */
-export default (props: IProps) => {
+export default function SettingsRow(props: IProps) {
   // eslint-disable-next-line @typescript-eslint/naming-convention
   const Element = props.labelClickable ? 'label' : 'div';
 
@@ -74,4 +74,4 @@ export default (props: IProps) => {
       </div>
     </Element>
   );
-};
+}