Merge branch 'develop' into bug-fixes

22 files changed, 315 insertions, 76 deletions

diff --git a/package.json b/package.json
index 301b88b81..0a2bd8991 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "babel-polyfill": "^6.23.0",
     "babel-runtime": "^6.23.0",
     "classnames": "^2.2.5",
+    "du": "^0.1.0",
     "electron-fetch": "^1.1.0",
     "electron-spellchecker": "^1.1.2",
     "electron-updater": "^2.4.3",
@@ -54,6 +55,7 @@
     "mobx-react-router": "^3.1.2",
     "moment": "^2.17.1",
     "normalize-url": "^1.9.1",
+    "pretty-bytes": "^4.0.2",
     "prop-types": "^15.5.10",
     "prop-types-extended": "^0.2.1",
     "react": "^15.4.1",
diff --git a/src/actions/app.js b/src/actions/app.js
index e4f648fc9..e6f7f22ba 100644
--- a/src/actions/app.js
+++ b/src/actions/app.js
@@ -25,4 +25,5 @@ export default {
     overrideSystemMute: PropTypes.bool,
   },
   toggleMuteApp: {},
+  clearAllCache: {},
 };
diff --git a/src/actions/service.js b/src/actions/service.js
index e3100e986..5d483b12a 100644
--- a/src/actions/service.js
+++ b/src/actions/service.js
@@ -25,6 +25,9 @@ export default {
     serviceId: PropTypes.string.isRequired,
     redirect: PropTypes.string,
   },
+  clearCache: {
+    serviceId: PropTypes.string.isRequired,
+  },
   setUnreadMessageCount: {
     serviceId: PropTypes.string.isRequired,
     count: PropTypes.object.isRequired,
diff --git a/src/api/LocalApi.js b/src/api/LocalApi.js
index 6f2b049d6..3f84f8a0b 100644
--- a/src/api/LocalApi.js
+++ b/src/api/LocalApi.js
@@ -15,4 +15,12 @@ export default class LocalApi {
   removeKey(key) {
     return this.local.removeKey(key);
   }
+
+  getAppCacheSize() {
+    return this.local.getAppCacheSize();
+  }
+
+  clearAppCache() {
+    return this.local.clearAppCache();
+  }
 }
diff --git a/src/api/ServicesApi.js b/src/api/ServicesApi.js
index 3cb40ba0d..36ed9482f 100644
--- a/src/api/ServicesApi.js
+++ b/src/api/ServicesApi.js
@@ -1,5 +1,6 @@
 export default class ServicesApi {
-  constructor(server) {
+  constructor(server, local) {
+    this.local = local;
     this.server = server;
   }
 
@@ -30,4 +31,8 @@ export default class ServicesApi {
   reorder(data) {
     return this.server.reorderService(data);
   }
+
+  clearCache(serviceId) {
+    return this.local.clearCache(serviceId);
+  }
 }
diff --git a/src/api/server/LocalApi.js b/src/api/server/LocalApi.js
index 79ac6e12f..e95d750ac 100644
--- a/src/api/server/LocalApi.js
+++ b/src/api/server/LocalApi.js
@@ -1,3 +1,10 @@
+import { remote } from 'electron';
+import du from 'du';
+
+import { getServicePartitionsDirectory } from '../../helpers/service-helpers.js';
+
+const { session } = remote;
+
 export default class LocalApi {
   // App
   async updateAppSettings(data) {
@@ -30,4 +37,31 @@ export default class LocalApi {
       localStorage.setItem('app', JSON.stringify(settings));
     }
   }
+
+  // Services
+  async getAppCacheSize() {
+    const partitionsDir = getServicePartitionsDirectory();
+    return new Promise((resolve, reject) => {
+      du(partitionsDir, (err, size) => {
+        if (err) reject(err);
+
+        console.debug('LocalApi::getAppCacheSize resolves', size);
+        resolve(size);
+      });
+    });
+  }
+
+  async clearCache(serviceId) {
+    const s = session.fromPartition(`persist:service-${serviceId}`);
+
+    console.debug('LocalApi::clearCache resolves', serviceId);
+    return new Promise(resolve => s.clearCache(resolve));
+  }
+
+  async clearAppCache() {
+    const s = session.defaultSession;
+
+    console.debug('LocalApi::clearCache clearAppCache');
+    return new Promise(resolve => s.clearCache(resolve));
+  }
 }
diff --git a/src/api/server/ServerApi.js b/src/api/server/ServerApi.js
index 8b3136d27..d75d2e559 100644
--- a/src/api/server/ServerApi.js
+++ b/src/api/server/ServerApi.js
@@ -22,6 +22,10 @@ import {
   loadRecipeConfig,
 } from '../../helpers/recipe-helpers';
 
+import {
+  removeServicePartitionDirectory,
+} from '../../helpers/service-helpers.js';
+
 module.paths.unshift(
   getDevRecipeDirectory(),
   getRecipeDirectory(),
@@ -210,6 +214,8 @@ export default class ServerApi {
     }
     const data = await request.json();
 
+    removeServicePartitionDirectory(id, true);
+
     console.debug('ServerApi::deleteService resolves', data);
     return data;
   }
diff --git a/src/app.js b/src/app.js
index a0b88611c..8e62776d2 100644
--- a/src/app.js
+++ b/src/app.js
@@ -105,3 +105,5 @@ window.addEventListener('load', () => {
 // Prevent drag and drop into window from redirecting
 window.addEventListener('dragover', event => event.preventDefault());
 window.addEventListener('drop', event => event.preventDefault());
+window.addEventListener('dragover', event => event.stopPropagation());
+window.addEventListener('drop', event => event.stopPropagation());
diff --git a/src/components/settings/recipes/RecipesDashboard.js b/src/components/settings/recipes/RecipesDashboard.js
index b6ade5da4..4610c69a5 100644
--- a/src/components/settings/recipes/RecipesDashboard.js
+++ b/src/components/settings/recipes/RecipesDashboard.js
@@ -16,6 +16,10 @@ const messages = defineMessages({
     id: 'settings.recipes.headline',
     defaultMessage: '!!!Available Services',
   },
+  searchService: {
+    id: 'settings.searchService',
+    defaultMessage: '!!!Search service',
+  },
   mostPopularRecipes: {
     id: 'settings.recipes.mostPopular',
     defaultMessage: '!!!Most popular',
@@ -81,13 +85,7 @@ export default class RecipesDashboard extends Component {
     return (
       <div className="settings__main">
         <div className="settings__header">
-          <SearchInput
-            className="settings__search-header"
-            defaultValue={intl.formatMessage(messages.headline)}
-            onChange={e => searchRecipes(e)}
-            onReset={() => resetSearch()}
-            throttle
-          />
+          <h1>{intl.formatMessage(messages.headline)}</h1>
         </div>
         <div className="settings__body recipes">
           {serviceStatus.length > 0 && serviceStatus.includes('created') && (
@@ -101,7 +99,13 @@ export default class RecipesDashboard extends Component {
               </Infobox>
             </Appear>
           )}
-          {/* {!searchNeedle && ( */}
+          <SearchInput
+            placeholder={intl.formatMessage(messages.searchService)}
+            onChange={e => searchRecipes(e)}
+            onReset={() => resetSearch()}
+            autoFocus
+            throttle
+          />
           <div className="recipes__navigation">
             <Link
               to="/settings/recipes"
diff --git a/src/components/settings/services/ServicesDashboard.js b/src/components/settings/services/ServicesDashboard.js
index 5f146b5f3..20e451f01 100644
--- a/src/components/settings/services/ServicesDashboard.js
+++ b/src/components/settings/services/ServicesDashboard.js
@@ -15,10 +15,18 @@ const messages = defineMessages({
     id: 'settings.services.headline',
     defaultMessage: '!!!Your services',
   },
+  searchService: {
+    id: 'settings.searchService',
+    defaultMessage: '!!!Search service',
+  },
   noServicesAdded: {
     id: 'settings.services.noServicesAdded',
     defaultMessage: '!!!You haven\'t added any services yet.',
   },
+  noServiceFound: {
+    id: 'settings.recipes.nothingFound',
+    defaultMessage: '!!!Sorry, but no service matched your search term.',
+  },
   discoverServices: {
     id: 'settings.services.discoverServices',
     defaultMessage: '!!!Discover services',
@@ -53,7 +61,13 @@ export default class ServicesDashboard extends Component {
     servicesRequestFailed: PropTypes.bool.isRequired,
     retryServicesRequest: PropTypes.func.isRequired,
     status: MobxPropTypes.arrayOrObservableArray.isRequired,
+    searchNeedle: PropTypes.string,
   };
+
+  static defaultProps = {
+    searchNeedle: '',
+  }
+
   static contextTypes = {
     intl: intlShape,
   };
@@ -69,20 +83,24 @@ export default class ServicesDashboard extends Component {
       servicesRequestFailed,
       retryServicesRequest,
       status,
+      searchNeedle,
     } = this.props;
     const { intl } = this.context;
 
     return (
       <div className="settings__main">
         <div className="settings__header">
-          <SearchInput
-            className="settings__search-header"
-            defaultValue={intl.formatMessage(messages.headline)}
-            onChange={needle => filterServices({ needle })}
-            onReset={() => resetFilter()}
-          />
+          <h1>{intl.formatMessage(messages.headline)}</h1>
         </div>
         <div className="settings__body">
+          {!isLoading && (
+            <SearchInput
+              placeholder={intl.formatMessage(messages.searchService)}
+              onChange={needle => filterServices({ needle })}
+              onReset={() => resetFilter()}
+              autoFocus
+            />
+          )}
           {!isLoading && servicesRequestFailed && (
             <div>
               <Infobox
@@ -121,7 +139,7 @@ export default class ServicesDashboard extends Component {
             </Appear>
           )}
 
-          {!isLoading && services.length === 0 && (
+          {!isLoading && services.length === 0 && !searchNeedle && (
             <div className="align-middle settings__empty-state">
               <p className="settings__empty-text">
                 <span className="emoji">
@@ -132,6 +150,16 @@ export default class ServicesDashboard extends Component {
               <Link to="/settings/recipes" className="button">{intl.formatMessage(messages.discoverServices)}</Link>
             </div>
           )}
+          {!isLoading && services.length === 0 && searchNeedle && (
+            <div className="align-middle settings__empty-state">
+              <p className="settings__empty-text">
+                <span className="emoji">
+                  <img src="./assets/images/emoji/dontknow.png" alt="" />
+                </span>
+                {intl.formatMessage(messages.noServiceFound)}
+              </p>
+            </div>
+          )}
           {isLoading ? (
             <Loader />
           ) : (
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index ff398aa33..72aa5a8af 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -40,6 +40,18 @@ const messages = defineMessages({
     id: 'settings.app.translationHelp',
     defaultMessage: '!!!Help us to translate Franz into your language.',
   },
+  subheadlineCache: {
+    id: 'settings.app.subheadlineCache',
+    defaultMessage: '!!!Cache',
+  },
+  cacheInfo: {
+    id: 'settings.app.cacheInfo',
+    defaultMessage: '!!!Franz cache is currently using {size} of disk space.',
+  },
+  buttonClearAllCache: {
+    id: 'settings.app.buttonClearAllCache',
+    defaultMessage: '!!!Clear cache',
+  },
   buttonSearchForUpdate: {
     id: 'settings.app.buttonSearchForUpdate',
     defaultMessage: '!!!Check for updates',
@@ -77,6 +89,9 @@ export default class EditSettingsForm extends Component {
     isUpdateAvailable: PropTypes.bool.isRequired,
     noUpdateAvailable: PropTypes.bool.isRequired,
     updateIsReadyToInstall: PropTypes.bool.isRequired,
+    isClearingAllCache: PropTypes.bool.isRequired,
+    onClearAllCache: PropTypes.func.isRequired,
+    cacheSize: PropTypes.string.isRequired,
   };
 
   static contextTypes = {
@@ -103,6 +118,9 @@ export default class EditSettingsForm extends Component {
       isUpdateAvailable,
       noUpdateAvailable,
       updateIsReadyToInstall,
+      isClearingAllCache,
+      onClearAllCache,
+      cacheSize,
     } = this.props;
     const { intl } = this.context;
 
@@ -155,6 +173,25 @@ export default class EditSettingsForm extends Component {
             <h2 id="advanced">{intl.formatMessage(messages.headlineAdvanced)}</h2>
             <Toggle field={form.$('enableSpellchecking')} />
             {/* <Select field={form.$('spellcheckingLanguage')} /> */}
+            <div className="settings__settings-group">
+              <h3>
+                {intl.formatMessage(messages.subheadlineCache)}
+              </h3>
+              <p>
+                {intl.formatMessage(messages.cacheInfo, {
+                  size: cacheSize,
+                })}
+              </p>
+              <p>
+                <Button
+                  buttonType="secondary"
+                  label={intl.formatMessage(messages.buttonClearAllCache)}
+                  onClick={onClearAllCache}
+                  disabled={isClearingAllCache}
+                  loaded={!isClearingAllCache}
+                />
+              </p>
+            </div>
 
             {/* Updates */}
             <h2 id="updates">{intl.formatMessage(messages.headlineUpdates)}</h2>
@@ -165,6 +202,7 @@ export default class EditSettingsForm extends Component {
               />
             ) : (
               <Button
+                buttonType="secondary"
                 label={intl.formatMessage(updateButtonLabelMessage)}
                 onClick={checkForUpdates}
                 disabled={isCheckingForUpdates || isUpdateAvailable}
diff --git a/src/components/ui/SearchInput.js b/src/components/ui/SearchInput.js
index bca412cef..a94cde201 100644
--- a/src/components/ui/SearchInput.js
+++ b/src/components/ui/SearchInput.js
@@ -9,36 +9,46 @@ import { debounce } from 'lodash';
 export default class SearchInput extends Component {
   static propTypes = {
     value: PropTypes.string,
-    defaultValue: PropTypes.string,
+    placeholder: PropTypes.string,
     className: PropTypes.string,
     onChange: PropTypes.func,
     onReset: PropTypes.func,
     name: PropTypes.string,
     throttle: PropTypes.bool,
     throttleDelay: PropTypes.number,
+    autoFocus: PropTypes.bool,
   };
 
   static defaultProps = {
     value: '',
-    defaultValue: '',
+    placeholder: '',
     className: '',
     name: uuidv1(),
     throttle: false,
     throttleDelay: 250,
     onChange: () => null,
     onReset: () => null,
+    autoFocus: false,
   }
 
   constructor(props) {
     super(props);
 
     this.state = {
-      value: props.value || props.defaultValue,
+      value: props.value,
     };
 
     this.throttledOnChange = debounce(this.throttledOnChange, this.props.throttleDelay);
   }
 
+  componentDidMount() {
+    const { autoFocus } = this.props;
+
+    if (autoFocus) {
+      this.input.focus();
+    }
+  }
+
   onChange(e) {
     const { throttle, onChange } = this.props;
     const { value } = e.target;
@@ -52,26 +62,6 @@ export default class SearchInput extends Component {
     }
   }
 
-  onClick() {
-    const { defaultValue } = this.props;
-    const { value } = this.state;
-
-    if (value === defaultValue) {
-      this.setState({ value: '' });
-    }
-
-    this.input.focus();
-  }
-
-  onBlur() {
-    const { defaultValue } = this.props;
-    const { value } = this.state;
-
-    if (value === '') {
-      this.setState({ value: defaultValue });
-    }
-  }
-
   throttledOnChange(e) {
     const { onChange } = this.props;
 
@@ -79,8 +69,8 @@ export default class SearchInput extends Component {
   }
 
   reset() {
-    const { defaultValue, onReset } = this.props;
-    this.setState({ value: defaultValue });
+    const { onReset } = this.props;
+    this.setState({ value: '' });
 
     onReset();
   }
@@ -88,7 +78,7 @@ export default class SearchInput extends Component {
   input = null;
 
   render() {
-    const { className, name, defaultValue } = this.props;
+    const { className, name, placeholder } = this.props;
     const { value } = this.state;
 
     return (
@@ -101,18 +91,16 @@ export default class SearchInput extends Component {
         <label
           htmlFor={name}
           className="mdi mdi-magnify"
-          onClick={() => this.onClick()}
         />
         <input
           name={name}
           type="text"
+          placeholder={placeholder}
           value={value}
           onChange={e => this.onChange(e)}
-          onClick={() => this.onClick()}
-          onBlur={() => this.onBlur()}
           ref={(ref) => { this.input = ref; }}
         />
-        {value !== defaultValue && value.length > 0 && (
+        {value.length > 0 && (
           <span
             className="mdi mdi-close-circle-outline"
             onClick={() => this.reset()}
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js
index 45ded9e5c..9fa815a0a 100644
--- a/src/containers/settings/EditSettingsScreen.js
+++ b/src/containers/settings/EditSettingsScreen.js
@@ -193,8 +193,17 @@ export default class EditSettingsScreen extends Component {
   }
 
   render() {
-    const { updateStatus, updateStatusTypes } = this.props.stores.app;
-    const { checkForUpdates, installUpdate } = this.props.actions.app;
+    const {
+      updateStatus,
+      cacheSize,
+      updateStatusTypes,
+      isClearingAllCache,
+    } = this.props.stores.app;
+    const {
+      checkForUpdates,
+      installUpdate,
+      clearAllCache,
+    } = this.props.actions.app;
     const form = this.prepareForm();
 
     return (
@@ -207,6 +216,9 @@ export default class EditSettingsScreen extends Component {
         noUpdateAvailable={updateStatus === updateStatusTypes.NOT_AVAILABLE}
         updateIsReadyToInstall={updateStatus === updateStatusTypes.DOWNLOADED}
         onSubmit={d => this.onSubmit(d)}
+        cacheSize={cacheSize}
+        isClearingAllCache={isClearingAllCache}
+        onClearAllCache={clearAllCache}
       />
     );
   }
@@ -223,6 +235,7 @@ EditSettingsScreen.wrappedComponent.propTypes = {
       launchOnStartup: PropTypes.func.isRequired,
       checkForUpdates: PropTypes.func.isRequired,
       installUpdate: PropTypes.func.isRequired,
+      clearAllCache: PropTypes.func.isRequired,
     }).isRequired,
     settings: PropTypes.shape({
       update: PropTypes.func.isRequired,
diff --git a/src/containers/settings/ServicesScreen.js b/src/containers/settings/ServicesScreen.js
index 8cfe5efbf..12db1bcd3 100644
--- a/src/containers/settings/ServicesScreen.js
+++ b/src/containers/settings/ServicesScreen.js
@@ -53,6 +53,7 @@ export default class ServicesScreen extends Component {
         goTo={router.push}
         servicesRequestFailed={services.allServicesRequest.wasExecuted && services.allServicesRequest.isError}
         retryServicesRequest={() => services.allServicesRequest.reload()}
+        searchNeedle={services.filterNeedle}
       />
     );
   }
diff --git a/src/helpers/service-helpers.js b/src/helpers/service-helpers.js
new file mode 100644
index 000000000..5f63f6b7c
--- /dev/null
+++ b/src/helpers/service-helpers.js
@@ -0,0 +1,20 @@
+import path from 'path';
+import { remote } from 'electron';
+import fs from 'fs-extra';
+
+const app = remote.app;
+
+export function getServicePartitionsDirectory() {
+  return path.join(app.getPath('userData'), 'Partitions');
+}
+
+export function removeServicePartitionDirectory(id = '', addServicePrefix = false) {
+  const servicePartition = path.join(getServicePartitionsDirectory(), `${addServicePrefix ? 'service-' : ''}${id}`);
+
+  return fs.remove(servicePartition);
+}
+
+export async function getServiceIdsFromPartitions() {
+  const files = await fs.readdir(getServicePartitionsDirectory());
+  return files.filter(n => n !== '__chrome_extension');
+}
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 567537d75..2bfbf2455 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -66,6 +66,7 @@
   "sidebar.unmuteApp": "Enable notifications & audio",
   "services.welcome": "Welcome to Franz",
   "services.getStarted": "Get started",
+  "settings.searchService": "Search service",
   "settings.account.headline": "Account",
   "settings.account.headlineSubscription": "Your subscription",
   "settings.account.headlineUpgrade": "Upgrade your account & support Franz",
@@ -149,6 +150,9 @@
   "settings.app.updateStatusSearching": "Is searching for update",
   "settings.app.updateStatusAvailable": "Update available, downloading...",
   "settings.app.updateStatusUpToDate": "You are using the latest version of Franz",
+  "settings.app.subheadlineCache": "Cache",
+  "settings.app.cacheInfo": "Franz cache is currently using {size} of disk space.",
+  "settings.app.buttonClearAllCache": "Clear cache",
   "settings.app.form.autoLaunchOnStart": "Launch Franz on start",
   "settings.app.form.autoLaunchInBackground": "Open in background",
   "settings.app.form.enableSystemTray": "Show Franz in system tray",
diff --git a/src/stores/AppStore.js b/src/stores/AppStore.js
index 5a6c12ee1..e33f50f05 100644
--- a/src/stores/AppStore.js
+++ b/src/stores/AppStore.js
@@ -1,10 +1,11 @@
 import { remote, ipcRenderer, shell } from 'electron';
-import { action, observable } from 'mobx';
+import { action, computed, observable } from 'mobx';
 import moment from 'moment';
 import key from 'keymaster';
 import { getDoNotDisturb } from '@meetfranz/electron-notification-state';
 import idleTimer from '@paulcbetts/system-idle-time';
 import AutoLaunch from 'auto-launch';
+import prettyBytes from 'pretty-bytes';
 
 import Store from './lib/Store';
 import Request from './lib/Request';
@@ -14,7 +15,10 @@ import locales from '../i18n/translations';
 import { gaEvent } from '../lib/analytics';
 import Miner from '../lib/Miner';
 
-const { app, powerMonitor } = remote;
+import { getServiceIdsFromPartitions, removeServicePartitionDirectory } from '../helpers/service-helpers.js';
+
+const { app } = remote;
+
 const defaultLocale = DEFAULT_APP_SETTINGS.locale;
 const autoLauncher = new AutoLaunch({
   name: 'Franz',
@@ -30,6 +34,8 @@ export default class AppStore extends Store {
   };
 
   @observable healthCheckRequest = new Request(this.api.app, 'health');
+  @observable getAppCacheSizeRequest = new Request(this.api.local, 'getAppCacheSize');
+  @observable clearAppCacheRequest = new Request(this.api.local, 'clearAppCache');
 
   @observable autoLaunchOnStart = true;
 
@@ -47,6 +53,8 @@ export default class AppStore extends Store {
 
   @observable isSystemMuteOverridden = false;
 
+  @observable isClearingAllCache = false;
+
   constructor(...args) {
     super(...args);
 
@@ -61,6 +69,7 @@ export default class AppStore extends Store {
     this.actions.app.healthCheck.listen(this._healthCheck.bind(this));
     this.actions.app.muteApp.listen(this._muteApp.bind(this));
     this.actions.app.toggleMuteApp.listen(this._toggleMuteApp.bind(this));
+    this.actions.app.clearAllCache.listen(this._clearAllCache.bind(this));
 
     this.registerReactions([
       this._offlineCheck.bind(this),
@@ -124,15 +133,23 @@ export default class AppStore extends Store {
       this.stores.router.push(data.url);
     });
 
+    const TIMEOUT = 5000;
     // Check system idle time every minute
     setInterval(() => {
       this.idleTime = idleTimer.getIdleTime();
-    }, 60000);
+    }, TIMEOUT);
 
     // Reload all services after a healthy nap
-    powerMonitor.on('resume', () => {
-      setTimeout(window.location.reload, 5000);
-    });
+    // Alternative solution for powerMonitor as the resume event is not fired
+    // More information: https://github.com/electron/electron/issues/1615
+    let lastTime = (new Date()).getTime();
+    setInterval(() => {
+      const currentTime = (new Date()).getTime();
+      if (currentTime > (lastTime + TIMEOUT + 2000)) {
+        this._reactivateServices();
+      }
+      lastTime = currentTime;
+    }, TIMEOUT);
 
     // Set active the next service
     key(
@@ -157,6 +174,10 @@ export default class AppStore extends Store {
     this._healthCheck();
   }
 
+  @computed get cacheSize() {
+    return prettyBytes(this.getAppCacheSizeRequest.execute().result || 0);
+  }
+
   // Actions
   @action _notify({ title, options, notificationId, serviceId = null }) {
     if (this.stores.settings.all.isAppMuted) return;
@@ -247,6 +268,23 @@ export default class AppStore extends Store {
     this._muteApp({ isMuted: !this.stores.settings.all.isAppMuted });
   }
 
+  @action async _clearAllCache() {
+    this.isClearingAllCache = true;
+    const clearAppCache = this.clearAppCacheRequest.execute();
+    const allServiceIds = await getServiceIdsFromPartitions();
+    const allOrphanedServiceIds = allServiceIds.filter(id => !this.stores.services.all.find(s => id.replace('service-', '') === s.id));
+
+    await Promise.all(allOrphanedServiceIds.map(id => removeServicePartitionDirectory(id)));
+
+    await Promise.all(this.stores.services.all.map(s => this.actions.service.clearCache({ serviceId: s.id })));
+
+    await clearAppCache._promise;
+
+    this.getAppCacheSizeRequest.execute();
+
+    this.isClearingAllCache = false;
+  }
+
   // Reactions
   _offlineCheck() {
     if (!this.isOnline) {
@@ -357,6 +395,16 @@ export default class AppStore extends Store {
     return autoLauncher.isEnabled() || false;
   }
 
+  _reactivateServices(retryCount = 0) {
+    if (!this.isOnline) {
+      console.debug('reactivateServices: computer is offline, trying again in 5s, retries:', retryCount);
+      setTimeout(() => this._reactivateServices(retryCount + 1), 5000);
+    } else {
+      console.debug('reactivateServices: reload all services');
+      this.actions.service.reloadAll();
+    }
+  }
+
   _systemDND() {
     const dnd = getDoNotDisturb();
     if (dnd === this.stores.settings.all.isAppMuted || !this.isSystemMuteOverriden) {
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index 66f37af26..87ee57a0d 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -16,6 +16,7 @@ export default class ServicesStore extends Store {
   @observable updateServiceRequest = new Request(this.api.services, 'update');
   @observable reorderServicesRequest = new Request(this.api.services, 'reorder');
   @observable deleteServiceRequest = new Request(this.api.services, 'delete');
+  @observable clearCacheRequest = new Request(this.api.services, 'clearCache');
 
   @observable filterNeedle = null;
 
@@ -31,6 +32,7 @@ export default class ServicesStore extends Store {
     this.actions.service.createFromLegacyService.listen(this._createFromLegacyService.bind(this));
     this.actions.service.updateService.listen(this._updateService.bind(this));
     this.actions.service.deleteService.listen(this._deleteService.bind(this));
+    this.actions.service.clearCache.listen(this._clearCache.bind(this));
     this.actions.service.setWebviewReference.listen(this._setWebviewReference.bind(this));
     this.actions.service.focusService.listen(this._focusService.bind(this));
     this.actions.service.focusActiveService.listen(this._focusActiveService.bind(this));
@@ -205,6 +207,13 @@ export default class ServicesStore extends Store {
     gaEvent('Service', 'delete', service.recipe.id);
   }
 
+  @action async _clearCache({ serviceId }) {
+    this.clearCacheRequest.reset();
+    const request = this.clearCacheRequest.execute(serviceId);
+    await request._promise;
+    gaEvent('Service', 'clear cache');
+  }
+
   @action _setActive({ serviceId }) {
     const service = this.one(serviceId);
 
@@ -368,7 +377,7 @@ export default class ServicesStore extends Store {
     const service = this.one(serviceId);
     service.resetMessageCount();
 
-    service.webview.reload();
+    service.webview.loadURL(service.url);
   }
 
   @action _reloadActive() {
@@ -497,12 +506,13 @@ export default class ServicesStore extends Store {
       .reduce((a, b) => a + b, 0);
 
     const unreadIndirectMessageCount = this.allDisplayed
-      .filter(s => (showMessageBadgeWhenMuted || s.isIndirectMessageBadgeEnabled) && showMessageBadgesEvenWhenMuted && s.isBadgeEnabled)
+      .filter(s => (showMessageBadgeWhenMuted && showMessageBadgesEvenWhenMuted) && (s.isBadgeEnabled && s.isIndirectMessageBadgeEnabled))
       .map(s => s.unreadIndirectMessageCount)
       .reduce((a, b) => a + b, 0);
 
     // We can't just block this earlier, otherwise the mobx reaction won't be aware of the vars to watch in some cases
     if (showMessageBadgesEvenWhenMuted) {
+      console.log('set badge', unreadDirectMessageCount, unreadIndirectMessageCount);
       this.actions.app.setBadge({
         unreadDirectMessageCount,
         unreadIndirectMessageCount,
diff --git a/src/styles/button.scss b/src/styles/button.scss
index 75d2cb1d4..8d2adbbcc 100644
--- a/src/styles/button.scss
+++ b/src/styles/button.scss
@@ -48,6 +48,18 @@
     }
   }
 
+  &.franz-form__button--warning {
+    background: $theme-brand-warning;
+
+    &:hover {
+      background: darken($theme-brand-warning, 5%);
+    }
+
+    &:active {
+      background: lighten($theme-brand-warning, 5%);
+    }
+  }
+
   &.franz-form__button--inverted {
     background: none;
     padding: 10px 20px;
diff --git a/src/styles/searchInput.scss b/src/styles/searchInput.scss
index 28ff09fc4..633a31e09 100644
--- a/src/styles/searchInput.scss
+++ b/src/styles/searchInput.scss
@@ -1,4 +1,20 @@
 .search-input {
   width: 100%;
   height: auto;
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  border-radius: 30px;
+  background: $theme-gray-lightest;
+  padding: 5px 10px;
+  @extend %headline;
+  color: $theme-gray-light;
+
+  input {
+    padding-left: 10px;
+    background: none;
+    border: 0;
+    flex: 1;
+    color: $theme-gray-light;
+  }
 }
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index b29ed5468..2da56c930 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -129,26 +129,8 @@
     }
   }
 
-  .settings__search-header {
-    display: flex;
-    align-items: center;
-    padding: 0 10px;
-    border-radius: $theme-border-radius;
-    transition: background $theme-transition-time;
-    @extend %headline;
-    font-size: 22px;
-
-    &:hover {
-      background: darken($theme-gray-lighter, 5%);
-    }
-
-    input {
-      padding-left: 10px;
-      background: none;
-      border: 0;
-      flex: 1;
-      @extend %headline;
-    }
+  .search-input {
+    margin-bottom: 30px;
   }
 
   &__options {
diff --git a/yarn.lock b/yarn.lock
index 3dead4308..dbcb33647 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -333,6 +333,10 @@ async@^0.9.0:
   version "0.9.2"
   resolved "https://registry.yarnpkg.com/async/-/async-0.9.2.tgz#aea74d5e61c1f899613bf64bda66d4c78f2fd17d"
 
+async@~0.1.22:
+  version "0.1.22"
+  resolved "https://registry.yarnpkg.com/async/-/async-0.1.22.tgz#0fc1aaa088a0e3ef0ebe2d8831bab0dcf8845061"
+
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
@@ -1783,6 +1787,12 @@ dotenv@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-4.0.0.tgz#864ef1379aced55ce6f95debecdce179f7a0cd1d"
 
+du@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/du/-/du-0.1.0.tgz#f26e340a09c7bc5b6fd69af6dbadea60fa8c6f4d"
+  dependencies:
+    async "~0.1.22"
+
 duplexer2@0.0.2, duplexer2@~0.0.2:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.0.2.tgz#c614dcf67e2fb14995a91711e5a617e8a60a31db"
@@ -4895,6 +4905,10 @@ pretty-bytes@^1.0.2, pretty-bytes@^1.0.4:
     get-stdin "^4.0.1"
     meow "^3.1.0"
 
+pretty-bytes@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-4.0.2.tgz#b2bf82e7350d65c6c33aa95aaa5a4f6327f61cd9"
+
 pretty-hrtime@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"