Improve app performance and update search bar style

app/ui/window.ts

@@ -126,10 +126,7 @@ export function newWindow(
 
  function createSession(extraOptions: any = {}) {
  const uid = uuidv4();
- const extraOptionsFiltered: any = {};
- Object.keys(extraOptions).forEach((key) => {
- if (extraOptions[key] !== undefined) extraOptionsFiltered[key] = extraOptions[key];
- });
+ const extraOptionsFiltered: any = Object.fromEntries(Object.entries(extraOptions));
 
  let cwd = '';
  if (cfg.preserveCWD === undefined || cfg.preserveCWD) {

app/utils/map-keys.ts

@@ -4,38 +4,42 @@ const generatePrefixedCommand = (command: string, shortcuts: string[]) => {
  for (let i = 1; i <= 9; i++) {
  // 9 is a special number because it means 'last'
  const index = i === 9 ? 'last' : i;
- const prefixedShortcuts = shortcuts.map((shortcut) => `${shortcut}+${i}`);
- result[`${baseCmd}:${index}`] = prefixedShortcuts;
+ result[`${baseCmd}:${index}`] = [];
+ for (let j = 0; j < shortcuts.length; j++) {
+ result[`${baseCmd}:${index}`].push(`${shortcuts[j]}+${i}`);
+ }
  }
 
  return result;
 };
 
 export default (config: Record<string, string[] | string>) => {
- return Object.keys(config).reduce((keymap: Record<string, string[]>, command: string) => {
+ const keymap: Record<string, string[]> = {};
+
+ for (const command in config) {
  if (!command) {
- return keymap;
+ continue;
  }
- // We can have different keys for a same command.
+
  const _shortcuts = config[command];
  const shortcuts = Array.isArray(_shortcuts) ? _shortcuts : [_shortcuts];
  const fixedShortcuts: string[] = [];
- shortcuts.forEach((shortcut) => {
+
+ for (const shortcut of shortcuts) {
  let newShortcut = shortcut;
- if (newShortcut.indexOf('cmd') !== -1) {
- // Mousetrap use `command` and not `cmd`
+ if (newShortcut.includes('cmd')) {
  console.warn('Your config use deprecated `cmd` in key combination. Please use `command` instead.');
  newShortcut = newShortcut.replace('cmd', 'command');
  }
  fixedShortcuts.push(newShortcut);
- });
+ }
 
  if (command.endsWith(':prefix')) {
- return Object.assign(keymap, generatePrefixedCommand(command, fixedShortcuts));
+ Object.assign(keymap, generatePrefixedCommand(command, fixedShortcuts));
+ } else {
+ keymap[command] = fixedShortcuts;
  }
+ }
 
- keymap[command] = fixedShortcuts;
-
- return keymap;
- }, {});
+ return keymap;
 };

app/utils/to-electron-background-color.ts

@@ -1,14 +1,21 @@
 // Packages
 import Color from 'color';
 
+const colorCache: Record<string, Color> = {};
+
 // returns a background color that's in hex
 // format including the alpha channel (e.g.: `#00000050`)
 // input can be any css value (rgb, hsl, string…)
 export default (bgColor: string) => {
- const color = Color(bgColor);
+ let color = colorCache[bgColor];
+ if (!color) {
+ color = Color(bgColor);
+ colorCache[bgColor] = color;
+ }
 
- if (color.alpha() === 1) {
- return color.hex().toString();
+ const alpha = color.alpha();
+ if (alpha === 1) {
+ return color.hex();
  }
 
  // http://stackoverflow.com/a/11019879/1202488

app/utils/window-utils.ts

@@ -1,5 +1,8 @@
 import electron from 'electron';
 
+/**
+ * Check if target position falls within workArea of each filtered display
+ */
 export function positionIsValid(position: [number, number]) {
  const displays = electron.screen.getAllDisplays();
  const [x, y] = position;

lib/components/searchBox.tsx

@@ -58,7 +58,7 @@ const SearchButton = ({
  margin: 4px 0px;
  height: 18px;
  width: 18px;
- border-radius: 2px;
+ border-radius: 3px;
  }
 
  .search-button:focus {
@@ -207,14 +207,15 @@ class SearchBox extends React.PureComponent<SearchBoxProps> {
  .search-container {
  background-color: ${backgroundColor};
  border: 1px solid ${borderColor};
- border-radius: 2px;
+ border-radius: 8px;
  position: absolute;
  right: 13px;
  top: 4px;
  z-index: 10;
  padding: 4px;
  font-family: ${font};
  font-size: 12px;
+ box-shadow: 0 40px 80px 0 #000;
  }
 
  .search-input {
@@ -236,11 +237,12 @@ class SearchBox extends React.PureComponent<SearchBoxProps> {
 
  .search-box {
  border: none;
- border-radius: 2px;
- outline: ${borderColor} solid 1px;
+ border-radius: 3px;
+ outline: ${borderColor} 1px solid;
  background-color: ${backgroundColor};
  color: ${foregroundColor};
  padding: 0px 4px;
+ padding-left: 8px;
  }
 
  .search-input::placeholder {