32 files changed, 229 insertions, 165 deletions

diff --git a/gulpfile.babel.js b/gulpfile.babel.js
index 8f24775be..d5fb607d9 100644
--- a/gulpfile.babel.js
+++ b/gulpfile.babel.js
@@ -79,7 +79,7 @@ const paths = {
     ],
   },
   typescripts: {
-    src: 'src/**/*.ts',
+    src: ['src/**/*.ts', 'src/**/*.tsx'],
     dest: 'build/',
     watch: [
       'src/**/*.ts',
@@ -227,7 +227,7 @@ export function processJavascripts() {
 
 export function processTypescripts() {
   return gulp
-    .src([paths.typescripts.src], { since: gulp.lastRun(processTypescripts) })
+    .src(paths.typescripts.src, { since: gulp.lastRun(processTypescripts) })
     .pipe(tsProject())
     .js.pipe(
       babel({
diff --git a/src/api/AppApi.js b/src/api/AppApi.ts
index 411c187f4..6e5e5c806 100644
--- a/src/api/AppApi.js
+++ b/src/api/AppApi.ts
@@ -1,5 +1,7 @@
 export default class AppApi {
-  constructor(server) {
+  server: any;
+
+  constructor(server: any) {
     this.server = server;
   }
 
diff --git a/src/api/FeaturesApi.js b/src/api/FeaturesApi.ts
index c66f28f5b..ccad4a189 100644
--- a/src/api/FeaturesApi.js
+++ b/src/api/FeaturesApi.ts
@@ -1,5 +1,7 @@
 export default class FeaturesApi {
-  constructor(server) {
+  server: any;
+
+  constructor(server: any) {
     this.server = server;
   }
 
diff --git a/src/api/LocalApi.js b/src/api/LocalApi.ts
index ccdedd3f5..0140a5450 100644
--- a/src/api/LocalApi.js
+++ b/src/api/LocalApi.ts
@@ -1,14 +1,18 @@
 export default class LocalApi {
-  constructor(server, local) {
+  server: any;
+
+  local: any;
+
+  constructor(server: any, local: any) {
     this.server = server;
     this.local = local;
   }
 
-  getAppSettings(type) {
+  getAppSettings(type: any) {
     return this.local.getAppSettings(type);
   }
 
-  updateAppSettings(type, data) {
+  updateAppSettings(type: any, data: any) {
     return this.local.updateAppSettings(type, data);
   }
 
diff --git a/src/api/NewsApi.js b/src/api/NewsApi.ts
index 294957511..31d3d903b 100644
--- a/src/api/NewsApi.js
+++ b/src/api/NewsApi.ts
@@ -1,5 +1,9 @@
 export default class NewsApi {
-  constructor(server, local) {
+  server: any;
+
+  local: any;
+
+  constructor(server: any, local: any) {
     this.server = server;
     this.local = local;
   }
@@ -8,7 +12,7 @@ export default class NewsApi {
     return this.server.getLatestNews();
   }
 
-  hide(id) {
+  hide(id: any) {
     return this.server.hideNews(id);
   }
 }
diff --git a/src/api/RecipePreviewsApi.js b/src/api/RecipePreviewsApi.ts
index a56fa587f..78f2a9596 100644
--- a/src/api/RecipePreviewsApi.js
+++ b/src/api/RecipePreviewsApi.ts
@@ -1,5 +1,7 @@
 export default class RecipePreviewsApi {
-  constructor(server) {
+  server: any;
+
+  constructor(server: any) {
     this.server = server;
   }
 
@@ -11,7 +13,7 @@ export default class RecipePreviewsApi {
     return this.server.getFeaturedRecipePreviews();
   }
 
-  search(needle) {
+  search(needle: string) {
     return this.server.searchRecipePreviews(needle);
   }
 }
diff --git a/src/api/RecipesApi.js b/src/api/RecipesApi.ts
index 800888b00..11d2241b5 100644
--- a/src/api/RecipesApi.js
+++ b/src/api/RecipesApi.ts
@@ -1,5 +1,7 @@
 export default class RecipesApi {
-  constructor(server) {
+  server: any;
+
+  constructor(server: any) {
     this.server = server;
   }
 
@@ -7,11 +9,11 @@ export default class RecipesApi {
     return this.server.getInstalledRecipes();
   }
 
-  install(recipeId) {
+  install(recipeId: string) {
     return this.server.getRecipePackage(recipeId);
   }
 
-  update(recipes) {
+  update(recipes: any) {
     return this.server.getRecipeUpdates(recipes);
   }
 }
diff --git a/src/api/ServicesApi.js b/src/api/ServicesApi.ts
index 85efd26a6..5bd8aa60e 100644
--- a/src/api/ServicesApi.js
+++ b/src/api/ServicesApi.ts
@@ -1,30 +1,34 @@
 export default class ServicesApi {
-  constructor(server, local) {
-    this.local = local;
+  server: any;
+
+  local: any;
+
+  constructor(server: any, local: any) {
     this.server = server;
+    this.local = local;
   }
 
   all() {
     return this.server.getServices();
   }
 
-  create(recipeId, data) {
+  create(recipeId: string, data: any) {
     return this.server.createService(recipeId, data);
   }
 
-  delete(serviceId) {
+  delete(serviceId: string) {
     return this.server.deleteService(serviceId);
   }
 
-  update(serviceId, data) {
+  update(serviceId: string, data: any) {
     return this.server.updateService(serviceId, data);
   }
 
-  reorder(data) {
+  reorder(data: any) {
     return this.server.reorderService(data);
   }
 
-  clearCache(serviceId) {
+  clearCache(serviceId: string) {
     return this.local.clearCache(serviceId);
   }
 }
diff --git a/src/api/UserApi.js b/src/api/UserApi.ts
index edfb88988..31c8acead 100644
--- a/src/api/UserApi.js
+++ b/src/api/UserApi.ts
@@ -1,12 +1,17 @@
+import { BinaryLike } from 'crypto';
 import { hash } from '../helpers/password-helpers';
 
 export default class UserApi {
-  constructor(server, local) {
+  server: any;
+
+  local: any;
+
+  constructor(server: any, local: any) {
     this.server = server;
     this.local = local;
   }
 
-  login(email, password) {
+  login(email: string, password: BinaryLike) {
     return this.server.login(email, hash(password));
   }
 
@@ -14,18 +19,18 @@ export default class UserApi {
     return this;
   }
 
-  signup(data) {
+  signup(data: { password: BinaryLike }) {
     Object.assign(data, {
       password: hash(data.password),
     });
     return this.server.signup(data);
   }
 
-  password(email) {
+  password(email: string) {
     return this.server.retrievePassword(email);
   }
 
-  invite(data) {
+  invite(data: any) {
     return this.server.inviteUser(data);
   }
 
@@ -33,7 +38,7 @@ export default class UserApi {
     return this.server.userInfo();
   }
 
-  updateInfo(data) {
+  updateInfo(data: { oldPassword: string; newPassword: string }) {
     const userData = data;
     if (userData.oldPassword && userData.newPassword) {
       userData.oldPassword = hash(userData.oldPassword);
diff --git a/src/api/index.js b/src/api/index.ts
index ed6c13488..73f613da1 100644
--- a/src/api/index.js
+++ b/src/api/index.ts
@@ -7,12 +7,12 @@ import LocalApi from './LocalApi';
 import NewsApi from './NewsApi';
 import FeaturesApi from './FeaturesApi';
 
-export default (server, local) => ({
-  app: new AppApi(server, local),
+export default (server: any, local: any) => ({
+  app: new AppApi(server),
   services: new ServicesApi(server, local),
-  recipePreviews: new RecipePreviewsApi(server, local),
-  recipes: new RecipesApi(server, local),
-  features: new FeaturesApi(server, local),
+  recipePreviews: new RecipePreviewsApi(server),
+  recipes: new RecipesApi(server),
+  features: new FeaturesApi(server),
   user: new UserApi(server, local),
   local: new LocalApi(server, local),
   news: new NewsApi(server, local),
diff --git a/src/api/utils/auth.js b/src/api/utils/auth.ts
index 07b0c096b..98295d1a4 100644
--- a/src/api/utils/auth.js
+++ b/src/api/utils/auth.ts
@@ -15,6 +15,7 @@ export const prepareAuthRequest = (
       'X-Franz-platform': process.platform,
       'X-Franz-Timezone-Offset': new Date().getTimezoneOffset(),
       'X-Franz-System-Locale': ferdiLocale,
+      // @ts-expect-error Property 'headers' does not exist on type '{ method: string; }'.
       ...options.headers,
     },
   });
@@ -28,5 +29,10 @@ export const prepareAuthRequest = (
   return request;
 };
 
-export const sendAuthRequest = (url, options, auth) =>
+export const sendAuthRequest = (
+  url: RequestInfo,
+  options: { method: string } | undefined,
+  auth?: boolean,
+) =>
+  // @ts-expect-error Argument of type '{ method: string; } & { mode: string; headers: any; }' is not assignable to parameter of type 'RequestInit | undefined'.
   window.fetch(url, prepareAuthRequest(options, auth));
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 179741338..22089ec45 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -8,7 +8,8 @@ import normalizeUrl from 'normalize-url';
 import Form from '../../../lib/Form';
 import Recipe from '../../../models/Recipe';
 import Service from '../../../models/Service';
-import Tabs, { TabItem } from '../../ui/Tabs';
+import Tabs from '../../ui/Tabs/Tabs';
+import { TabItem } from '../../ui/Tabs/TabItem';
 import Input from '../../ui/Input';
 import Toggle from '../../ui/Toggle';
 import Slider from '../../ui/Slider';
@@ -262,11 +263,11 @@ class EditServiceForm extends Component {
           <span className="settings__header-item">
             {action === 'add'
               ? intl.formatMessage(messages.addServiceHeadline, {
-                name: recipe.name,
-              })
+                  name: recipe.name,
+                })
               : intl.formatMessage(messages.editServiceHeadline, {
-                name: service.name !== '' ? service.name : recipe.name,
-              })}
+                  name: service.name !== '' ? service.name : recipe.name,
+                })}
           </span>
         </div>
         <div className="settings__body">
@@ -342,11 +343,9 @@ class EditServiceForm extends Component {
                           {intl.formatMessage(messages.indirectMessageInfo)}
                         </p>
                       </>
-                  )}
+                    )}
                   {recipe.allowFavoritesDelineationInUnreadCount && (
-                    <Toggle
-                      field={form.$('onlyShowFavoritesInUnreadCount')}
-                    />
+                    <Toggle field={form.$('onlyShowFavoritesInUnreadCount')} />
                   )}
                 </div>
 
diff --git a/src/components/ui/Tabs/TabItem.js b/src/components/ui/Tabs/TabItem.js
deleted file mode 100644
index d0ef4e798..000000000
--- a/src/components/ui/Tabs/TabItem.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React, { Component } from 'react';
-
-import { oneOrManyChildElements } from '../../../prop-types';
-
-export default class TabItem extends Component {
-  static propTypes = {
-    children: oneOrManyChildElements.isRequired,
-  };
-
-  render() {
-    const { children } = this.props;
-
-    return <>{children}</>;
-  }
-}
diff --git a/src/components/ui/Tabs/TabItem.tsx b/src/components/ui/Tabs/TabItem.tsx
new file mode 100644
index 000000000..bd613ddc7
--- /dev/null
+++ b/src/components/ui/Tabs/TabItem.tsx
@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const TabItem = ({ children }) => <>{children}</>;
diff --git a/src/components/ui/Tabs/index.js b/src/components/ui/Tabs/index.js
deleted file mode 100644
index e4adb62c7..000000000
--- a/src/components/ui/Tabs/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import Tabs from './Tabs';
-import TabItem from './TabItem';
-
-export default Tabs;
-
-export { TabItem };
diff --git a/src/features/basicAuth/Form.ts b/src/features/basicAuth/Form.ts
index 95721d0e9..e84156d96 100644
--- a/src/features/basicAuth/Form.ts
+++ b/src/features/basicAuth/Form.ts
@@ -1,5 +1,6 @@
 import Form from '../../lib/Form';
 
+// @ts-expect-error Expected 0 arguments, but got 1
 export default new Form({
   fields: {
     user: {
diff --git a/src/features/communityRecipes/store.js b/src/features/communityRecipes/store.ts
index 05e18e2f7..a8d358ba0 100644
--- a/src/features/communityRecipes/store.js
+++ b/src/features/communityRecipes/store.ts
@@ -4,7 +4,11 @@ import { FeatureStore } from '../utils/FeatureStore';
 const debug = require('debug')('Ferdi:feature:communityRecipes:store');
 
 export class CommunityRecipesStore extends FeatureStore {
-  start(stores, actions) {
+  stores: any;
+
+  actions: any;
+
+  start(stores: any, actions: any) {
     debug('start');
     this.stores = stores;
     this.actions = actions;
@@ -18,14 +22,17 @@ export class CommunityRecipesStore extends FeatureStore {
   @computed get communityRecipes() {
     if (!this.stores) return [];
 
-    return this.stores.recipePreviews.dev.map(recipePreview => {
-      // TODO: Need to figure out if this is even necessary/used
-      recipePreview.isDevRecipe = !!recipePreview.author.some(
-        author => author.email === this.stores.user.data.email,
-      );
+    return this.stores.recipePreviews.dev.map(
+      (recipePreview: { isDevRecipe: boolean; author: any[] }) => {
+        // TODO: Need to figure out if this is even necessary/used
+        recipePreview.isDevRecipe = !!recipePreview.author.some(
+          (author: { email: any }) =>
+            author.email === this.stores.user.data.email,
+        );
 
-      return recipePreview;
-    });
+        return recipePreview;
+      },
+    );
   }
 }
 
diff --git a/src/features/nightlyBuilds/store.js b/src/features/nightlyBuilds/store.ts
index ed06e5a7d..ed06e5a7d 100644
--- a/src/features/nightlyBuilds/store.js
+++ b/src/features/nightlyBuilds/store.ts
diff --git a/src/features/publishDebugInfo/store.js b/src/features/publishDebugInfo/store.ts
index ed06e5a7d..ed06e5a7d 100644
--- a/src/features/publishDebugInfo/store.js
+++ b/src/features/publishDebugInfo/store.ts
diff --git a/src/features/quickSwitch/store.js b/src/features/quickSwitch/store.ts
index ed06e5a7d..ed06e5a7d 100644
--- a/src/features/quickSwitch/store.js
+++ b/src/features/quickSwitch/store.ts
diff --git a/src/features/serviceProxy/index.js b/src/features/serviceProxy/index.js
deleted file mode 100644
index b9320cda9..000000000
--- a/src/features/serviceProxy/index.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import { autorun, observable } from 'mobx';
-import { session } from '@electron/remote';
-
-const debug = require('debug')('Ferdi:feature:serviceProxy');
-
-export const config = observable({
-  isEnabled: true,
-});
-
-export default function init(stores) {
-  debug('Initializing `serviceProxy` feature');
-
-  autorun(() => {
-    config.isEnabled = true;
-
-    const services = stores.services.enabled;
-    const proxySettings = stores.settings.proxy;
-
-    debug('Service Proxy autorun');
-
-    for (const service of services) {
-      const s = session.fromPartition(`persist:service-${service.id}`);
-
-      if (config.isEnabled) {
-        const serviceProxyConfig = proxySettings[service.id];
-
-        if (serviceProxyConfig && serviceProxyConfig.isEnabled && serviceProxyConfig.host) {
-          const proxyHost = `${serviceProxyConfig.host}${serviceProxyConfig.port ? `:${serviceProxyConfig.port}` : ''}`;
-          debug(`Setting proxy config from service settings for "${service.name}" (${service.id}) to`, proxyHost);
-
-          s.setProxy({ proxyRules: proxyHost }, () => {
-            debug(`Using proxy "${proxyHost}" for "${service.name}" (${service.id})`);
-          });
-        }
-      }
-    }
-  });
-}
diff --git a/src/features/serviceProxy/index.ts b/src/features/serviceProxy/index.ts
new file mode 100644
index 000000000..f095b286a
--- /dev/null
+++ b/src/features/serviceProxy/index.ts
@@ -0,0 +1,54 @@
+import { autorun, observable } from 'mobx';
+import { session } from '@electron/remote';
+
+const debug = require('debug')('Ferdi:feature:serviceProxy');
+
+export const config = observable({
+  isEnabled: true,
+});
+
+export default function init(stores: {
+  services: { enabled: any };
+  settings: { proxy: any };
+}) {
+  debug('Initializing `serviceProxy` feature');
+
+  autorun(() => {
+    config.isEnabled = true;
+
+    const services = stores.services.enabled;
+    const proxySettings = stores.settings.proxy;
+
+    debug('Service Proxy autorun');
+
+    for (const service of services) {
+      const s = session.fromPartition(`persist:service-${service.id}`);
+
+      if (config.isEnabled) {
+        const serviceProxyConfig = proxySettings[service.id];
+
+        if (
+          serviceProxyConfig &&
+          serviceProxyConfig.isEnabled &&
+          serviceProxyConfig.host
+        ) {
+          const proxyHost = `${serviceProxyConfig.host}${
+            serviceProxyConfig.port ? `:${serviceProxyConfig.port}` : ''
+          }`;
+          debug(
+            `Setting proxy config from service settings for "${service.name}" (${service.id}) to`,
+            proxyHost,
+          );
+
+          s.setProxy({ proxyRules: proxyHost })
+            .then(() => {
+              debug(
+                `Using proxy "${proxyHost}" for "${service.name}" (${service.id})`,
+              );
+            })
+            .catch(error => console.error(error));
+        }
+      }
+    }
+  });
+}
diff --git a/src/features/settingsWS/actions.js b/src/features/settingsWS/actions.ts
index 631670c8a..631670c8a 100755
--- a/src/features/settingsWS/actions.js
+++ b/src/features/settingsWS/actions.ts
diff --git a/src/features/settingsWS/index.js b/src/features/settingsWS/index.ts
index 7771421d6..9bb206d82 100755
--- a/src/features/settingsWS/index.js
+++ b/src/features/settingsWS/index.ts
@@ -5,15 +5,16 @@ const debug = require('debug')('Ferdi:feature:settingsWS');
 
 export const settingsStore = new SettingsWSStore();
 
-export default function initSettingsWebSocket(stores, actions) {
+export default function initSettingsWebSocket(
+  stores: { features: any },
+  actions: any,
+) {
   const { features } = stores;
 
   // Toggle SettingsWebSocket feature
   reaction(
-    () => (
-      features.features.isSettingsWSEnabled
-    ),
-    (isEnabled) => {
+    () => features.features.isSettingsWSEnabled,
+    isEnabled => {
       if (isEnabled) {
         debug('Initializing `settingsWS` feature');
         settingsStore.start(stores, actions);
diff --git a/src/features/settingsWS/state.js b/src/features/settingsWS/state.ts
index 7b16b2b6e..7b16b2b6e 100755
--- a/src/features/settingsWS/state.js
+++ b/src/features/settingsWS/state.ts
diff --git a/src/features/todos/actions.js b/src/features/todos/actions.js
deleted file mode 100644
index cc17e919b..000000000
--- a/src/features/todos/actions.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import PropTypes from 'prop-types';
-import { createActionsFromDefinitions } from '../../actions/lib/actions';
-
-export const todoActions = createActionsFromDefinitions({
-  resize: {
-    width: PropTypes.number.isRequired,
-  },
-  toggleTodosPanel: {},
-  toggleTodosFeatureVisibility: {},
-  setTodosWebview: {
-    webview: PropTypes.instanceOf(Element).isRequired,
-  },
-  handleHostMessage: {
-    action: PropTypes.string.isRequired,
-    data: PropTypes.object,
-  },
-  handleClientMessage: {
-    channel: PropTypes.string.isRequired,
-    message: PropTypes.shape({
-      action: PropTypes.string.isRequired,
-      data: PropTypes.object,
-    }),
-  },
-  openDevTools: {},
-  reload: {},
-}, PropTypes.checkPropTypes);
-
-export default todoActions;
diff --git a/src/features/todos/actions.ts b/src/features/todos/actions.ts
new file mode 100644
index 000000000..04e299e71
--- /dev/null
+++ b/src/features/todos/actions.ts
@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types';
+import { createActionsFromDefinitions } from '../../actions/lib/actions';
+
+export const todoActions = createActionsFromDefinitions(
+  {
+    resize: {
+      width: PropTypes.number.isRequired,
+    },
+    toggleTodosPanel: {},
+    toggleTodosFeatureVisibility: {},
+    setTodosWebview: {
+      webview: PropTypes.instanceOf(Element).isRequired,
+    },
+    handleHostMessage: {
+      action: PropTypes.string.isRequired,
+      data: PropTypes.object,
+    },
+    handleClientMessage: {
+      channel: PropTypes.string.isRequired,
+      message: PropTypes.shape({
+        action: PropTypes.string.isRequired,
+        data: PropTypes.object,
+      }),
+    },
+    openDevTools: {},
+    reload: {},
+  },
+  PropTypes.checkPropTypes,
+);
+
+export default todoActions;
diff --git a/src/features/todos/constants.js b/src/features/todos/constants.ts
index 303a7a16e..303a7a16e 100644
--- a/src/features/todos/constants.js
+++ b/src/features/todos/constants.ts
diff --git a/src/features/todos/index.js b/src/features/todos/index.ts
index 573190881..3665812e6 100644
--- a/src/features/todos/index.js
+++ b/src/features/todos/index.ts
@@ -5,16 +5,17 @@ const debug = require('debug')('Ferdi:feature:todos');
 
 export const todosStore = new TodoStore();
 
-export default function initTodos(stores, actions) {
+export default function initTodos(
+  stores: { todos?: any; features?: any },
+  actions: any,
+) {
   stores.todos = todosStore;
   const { features } = stores;
 
   // Toggle todos feature
   reaction(
-    () => (
-      features.features.isTodosEnabled
-    ),
-    (isEnabled) => {
+    () => features.features.isTodosEnabled,
+    isEnabled => {
       if (isEnabled) {
         debug('Initializing `todos` feature');
         todosStore.start(stores, actions);
diff --git a/src/lib/DBus.js b/src/lib/DBus.ts
index 9baaea014..b1febc2d1 100644
--- a/src/lib/DBus.js
+++ b/src/lib/DBus.ts
@@ -1,10 +1,12 @@
-import { sessionBus } from 'dbus-next';
+import { MessageBus, sessionBus } from 'dbus-next';
 import { isLinux } from '../environment';
 
 export default class DBus {
-  bus = null;
+  bus: MessageBus | null = null;
 
-  constructor(trayIcon) {
+  trayIcon: any;
+
+  constructor(trayIcon: any) {
     this.trayIcon = trayIcon;
   }
 
@@ -19,15 +21,23 @@ export default class DBus {
     }
 
     // HACK Hook onto the MessageBus to track StatusNotifierWatchers
-    this.bus._addMatch("type='signal',sender='org.freedesktop.DBus',interface='org.freedesktop.DBus',path='/org/freedesktop/DBus',member='NameOwnerChanged'");
+    // @ts-expect-error Property '_addMatch' does not exist on type 'MessageBus'.
+    this.bus._addMatch(
+      "type='signal',sender='org.freedesktop.DBus',interface='org.freedesktop.DBus',path='/org/freedesktop/DBus',member='NameOwnerChanged'",
+    );
     const mangled = JSON.stringify({
       path: '/org/freedesktop/DBus',
       interface: 'org.freedesktop.DBus',
       member: 'NameOwnerChanged',
     });
-    this.bus._signals.on(mangled, (msg) => {
+    // @ts-expect-error Property '_signals' does not exist on type 'MessageBus'.
+    this.bus._signals.on(mangled, (msg: { body: [any, any, any] }) => {
       const [name, oldOwner, newOwner] = msg.body;
-      if (name === 'org.kde.StatusNotifierWatcher' && oldOwner !== newOwner && newOwner !== '') {
+      if (
+        name === 'org.kde.StatusNotifierWatcher' &&
+        oldOwner !== newOwner &&
+        newOwner !== ''
+      ) {
         // Leave ample time for the StatusNotifierWatcher to be initialized
         setTimeout(() => {
           this.trayIcon.recreateIfVisible();
diff --git a/src/lib/Form.js b/src/lib/Form.ts
index 9b8321948..9b8321948 100644
--- a/src/lib/Form.js
+++ b/src/lib/Form.ts
diff --git a/src/lib/TouchBar.js b/src/lib/TouchBar.ts
index c80931200..417e20411 100644
--- a/src/lib/TouchBar.js
+++ b/src/lib/TouchBar.ts
@@ -5,7 +5,13 @@ import { autorun } from 'mobx';
 import { isMac, osRelease } from '../environment';
 
 export default class FranzTouchBar {
-  constructor(stores, actions) {
+  stores: any;
+
+  actions: any;
+
+  build: any;
+
+  constructor(stores: any, actions: any) {
     this.stores = stores;
     this.actions = actions;
 
@@ -26,18 +32,25 @@ export default class FranzTouchBar {
     if (this.stores.user.isLoggedIn) {
       const { TouchBarButton, TouchBarSpacer } = TouchBar;
 
-      const buttons = [];
+      const buttons: any[] = [];
       for (const service of this.stores.services.allDisplayed) {
-        buttons.push(new TouchBarButton({
-          label: `${service.name}${service.unreadDirectMessageCount > 0
-            ? ' 🔴' : ''} ${service.unreadDirectMessageCount === 0
-              && service.unreadIndirectMessageCount > 0
-            ? ' ⚪️' : ''}`,
-          backgroundColor: service.isActive ? '#3498DB' : null,
-          click: () => {
-            this.actions.service.setActive({ serviceId: service.id });
-          },
-        }), new TouchBarSpacer({ size: 'small' }));
+        buttons.push(
+          new TouchBarButton({
+            label: `${service.name}${
+              service.unreadDirectMessageCount > 0 ? ' 🔴' : ''
+            } ${
+              service.unreadDirectMessageCount === 0 &&
+              service.unreadIndirectMessageCount > 0
+                ? ' ⚪️'
+                : ''
+            }`,
+            backgroundColor: service.isActive && '#3498DB',
+            click: () => {
+              this.actions.service.setActive({ serviceId: service.id });
+            },
+          }),
+          new TouchBarSpacer({ size: 'small' }),
+        );
       }
 
       const touchBar = new TouchBar({ items: buttons });