Accessibility #1075

.gitignore

@@ -1 +1,2 @@
 .DS_Store
+.idea

desktop-app/package.json

@@ -111,6 +111,7 @@
     "bluebird": "^3.7.2",
     "browser-sync": "^2.27.10",
     "classnames": "^2.3.1",
+    "custom-electron-titlebar": "^4.2.7",
     "electron-args": "^0.1.0",
     "electron-debug": "^3.2.0",
     "electron-log": "^4.4.8",

desktop-app/src/main/main.ts

@@ -12,6 +12,7 @@ import path from 'path';
 import { app, BrowserWindow, shell, screen, ipcMain } from 'electron';
 import { autoUpdater } from 'electron-updater';
 import log from 'electron-log';
+import { setupTitlebar } from 'custom-electron-titlebar/main';
 import cli from './cli';
 import { PROTOCOL } from '../common/constants';
 import MenuBuilder from './menu';
@@ -100,6 +101,14 @@ const installExtensions = async () => {
     .catch(console.log);
 };
 
+// Custom titlebar config for windows
+const customTitlebarStatus = store.get(
+  'userPreferences.customTitlebar'
+) as boolean;
+if (customTitlebarStatus && process.platform === 'win32') {
+  setupTitlebar();
+}
+
 const createWindow = async () => {
   windowShownOnOpen = false;
   await installExtensions();
@@ -119,6 +128,10 @@ const createWindow = async () => {
     width,
     height,
     icon: getAssetPath('icon.png'),
+    titleBarStyle:
+      customTitlebarStatus && process.platform === 'win32'
+        ? 'hidden'
+        : 'default',
     webPreferences: {
       preload: app.isPackaged
         ? path.join(__dirname, 'preload.js')
@@ -225,7 +238,7 @@ const createWindow = async () => {
   });
   // Remove this if your app does not use auto updates
   // eslint-disable-next-line
-  new AppUpdater();
+    new AppUpdater();
 };
 
 app.on('open-url', async (event, url) => {

desktop-app/src/main/preload.ts

@@ -1,5 +1,6 @@
 import { Channels } from 'common/constants';
 import { contextBridge, ipcRenderer, IpcRendererEvent } from 'electron';
+import { Titlebar, TitlebarColor } from 'custom-electron-titlebar';
 
 contextBridge.exposeInMainWorld('electron', {
   ipcRenderer: {
@@ -42,3 +43,18 @@ window.onerror = function (errorMsg, url, lineNumber) {
   console.log(`Unhandled error: ${errorMsg} ${url} ${lineNumber}`);
   // Code to run when an error has occurred on the page
 };
+
+window.addEventListener('DOMContentLoaded', () => {
+  const customTitlebarStatus = ipcRenderer.sendSync(
+    'electron-store-get',
+    'userPreferences.customTitlebar'
+  ) as boolean;
+
+  if (customTitlebarStatus && process.platform === 'win32') {
+    // eslint-disable-next-line no-new
+    new Titlebar({
+      backgroundColor: TitlebarColor.fromHex('#0f172a'), // slate-900
+      itemBackgroundColor: TitlebarColor.fromHex('#1e293b'), // slate-800
+    });
+  }
+});

desktop-app/src/renderer/AppContent.tsx

@@ -13,6 +13,10 @@ import KeyboardShortcutsManager from './components/KeyboardShortcutsManager';
 import ReleaseNotes from './components/ReleaseNotes';
 import { Sponsorship } from './components/Sponsorship';
 
+if ((navigator as any).userAgentData.platform === 'Windows') {
+  import('./titlebar-styles.css');
+}
+
 const Browser = () => {
   return (
     <div className="h-screen gap-2 overflow-hidden pt-2">

desktop-app/src/renderer/components/DropDown/index.tsx

@@ -1,28 +1,30 @@
 import { Menu, Transition } from '@headlessui/react';
 import { Icon } from '@iconify/react';
 import cx from 'classnames';
-import { Fragment, useEffect, useRef, useState } from 'react';
+import { Fragment } from 'react';
 
 interface Separator {
   type: 'separator';
 }
+
 interface Option {
   type?: 'option';
   label: JSX.Element | string;
-  onClick: () => void;
+  onClick: (() => void) | null;
 }
 
 type OptionOrSeparator = Option | Separator;
 
 interface Props {
   label: JSX.Element | string;
   options: OptionOrSeparator[];
+  className?: string | null;
 }
 
-export function DropDown({ label, options }: Props) {
+export function DropDown({ label, options, className }: Props) {
   return (
     <div className="text-right">
-      <Menu as="div" className="relative inline-block text-left">
+      <Menu as="div" className={`relative inline-block text-left ${className}`}>
         <div>
           <Menu.Button className="inline-flex w-full justify-center gap-1 rounded-md bg-opacity-20 px-4 py-2 text-sm font-medium hover:bg-slate-300 hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 dark:hover:bg-slate-700">
             {label}
@@ -53,18 +55,29 @@ export function DropDown({ label, options }: Props) {
                 return (
                   // eslint-disable-next-line react/no-array-index-key
                   <Menu.Item key={idx.toString()}>
-                    {({ active }) => (
-                      <button
-                        className={cx(
-                          'group flex w-full items-center rounded-md px-2 py-2 text-sm',
-                          { 'bg-slate-200 dark:bg-slate-800': active }
-                        )}
-                        type="button"
-                        onClick={option.onClick}
-                      >
-                        {option.label}
-                      </button>
-                    )}
+                    {({ active }) =>
+                      option.onClick !== null ? (
+                        <button
+                          className={cx(
+                            'group flex w-full items-center rounded-md px-2 py-2',
+                            { 'bg-slate-200 dark:bg-slate-800': active }
+                          )}
+                          type="button"
+                          onClick={option.onClick}
+                        >
+                          {option.label}
+                        </button>
+                      ) : (
+                        <div
+                          className={cx(
+                            'group mt-2 flex w-full items-center rounded-md px-2',
+                            { 'bg-slate-200 dark:bg-slate-800': active }
+                          )}
+                        >
+                          {option.label}
+                        </div>
+                      )
+                    }
                   </Menu.Item>
                 );
               })}