Я не буду сильно морализировать на тему того, почему Electron.js в разработке приложений для ПК это плохо или хорошо, где взять деньги в open-source и т.п. Скажем так: он есть и широко используется, и является таким же инструментом как ножовка, может быть, не самой острой, сделанной из плотного картона, но со встроенным mp3 плеером!

Ниже я приведу примеры, как пустить пыль в глаза юзерам можно улучшить ситуацию с ощущением чужеродности приложения среди других, написанных на честном Gtk, китами из XCode, Windows UWP и прочим с 0% вайбкодинга

1. Шрифты

Здесь не стоит сильно думать, а выставить стандартный пресет font-family на корневой стиль всей страницы

:root{
    font-size: medium;
    font-family: system-ui;
}

С размерами лучше ничего не выдумывать, а взять что-то из CSS named values: medium, small, large. Иначе в некоторых случаях и на некоторых разрешениях можно словить мыльницу.

2. Не показывать окно, пока не загружено

Довольно простой фикс, который позволяет избежать показ пустого окна Chromium, если загрузка страницы по какой-то причине оказалось немного медленнее, чем нужно

При создании окна указываем show:false

win = new BrowserWindow({
  show: false,
  ...

и затем подписываемся до самой загрузки по URL

win.once('ready-to-show', () => {
  win.show();
});

3. Никаких DIY модалок и прочего

Если речь идет о диалоговом окне из 3-4 пунктов выбора, то я настоятельно рекомендую не создавать свой велосипед на HTML/CSS и просто использовать классы:

• dialog.showMessageBox([window, ]options)

• dialog.showErrorBox(title, content)

С ошибками совсем просто, а MessageBox позволяет создавать как окна типа window.confirm, так и окно с несколькими кнопками и даже чекбоксы (только 1). К примеру

const result = await dialog.showMessageBox({
  message: 'Evaluate initialization cells?',
  title: 'Initialization cells',
  type: 'question',
  buttons: ['Evaluate', 'Cancel'],
  noLink: false
});

здесь noLink работает только на Windows, и меняет стиль показа диалогового окна, точнее способ размещения кнопок. Вот так оно выглядит на Windows 10

Мы ещё вернемся к различиям Windows 10/11, которые придется учитывать

И вот то же самое окно на MacOS

Prompt window?

К сожалению среди инструментов Electron отсуствует напрочь возможность простого текстового ввода. Если бы они просто поддержали window.prompt фичу из Chromium, то больших проблем бы не было. Однако авторы изрядно сопротивляются.

Можно пойти по пути VSCode и Obsidian, которые то же сделаны на основе Electron - переиспользовать окно палитры команд, если, конечно, оно у вас присуствует как концепт

Скажем при переименовании файла:

Traffic lights, X, O кнопки

MacOS

В целом, чтобы разместить что-то в верхней части окна надо сильно постараться. Вот как выглядит изначальная конфигурация (MacOS)

win = new BrowserWindow({
  webPreferences: {
    preload: path.join(__dirname, 'preload_main.js')
  }
});

Спрячем "верхнюю корочку" нашей буханки

win = new BrowserWindow({
  titleBarStyle: 'hiddenInset',
  webPreferences: {
    preload: path.join(__dirname, 'preload_main.js')
  }
});

Ура, готово! Казалось бы, на Windows / Linux должно быть также, да? Да, ведь?

4-15. Шаги

Если вы дочитали до этого момента, а дальше ничего нет, значит редактор Habrahabr удалил оставшиеся 11 шагов, записав какой-то мусор в localStorage. Как я узнал, эта и 99 других проблем уже тянется с 201X года, но почему-то никого не беспокоит.

Как другие авторы терпят откровенные косяки центральной русскоязычной платформы - для меня загадка. Впрочем, наверное просто нет выбора.

Спасибо за внимание.