[System] grab Clear Cache, Startup and Closing Behavior

static/app-strings.json

@@ -156,8 +156,9 @@
   "Experimental settings": "Experimental settings",
   "Autoplay media files": "Autoplay media files",
   "Autoplay video and audio files when navigating to a file, as well as the next related item when a file finishes playing.": "Autoplay video and audio files when navigating to a file, as well as the next related item when a file finishes playing.",
-  "Application cache": "Application cache",
+  "Clear application cache": "Clear application cache",
   "Clear Cache": "Clear Cache",
+  "This might fix issues that you are having. Your wallet will not be affected.": "This might fix issues that you are having. Your wallet will not be affected.",
   "Currency": "Currency",
   "US Dollars": "US Dollars",
   "There's nothing available at this location.": "There's nothing available at this location.",
@@ -656,7 +657,6 @@
   "Invalid claim ID %claimId%.": "Invalid claim ID %claimId%.",
   "Suggested": "Suggested",
   "Startup preferences": "Startup preferences",
-  "This will clear the application cache, and might fix issues you are having. Your wallet will not be affected. ": "This will clear the application cache, and might fix issues you are having. Your wallet will not be affected. ",
   "Start minimized": "Start minimized",
   "Improve view speed and help the LBRY network by allowing the app to cuddle up in your system tray.": "Improve view speed and help the LBRY network by allowing the app to cuddle up in your system tray.",
   "Content Type": "Content Type",
@@ -2047,6 +2047,7 @@
   "Commenting server is not set.": "Commenting server is not set.",
   "Comments are not currently enabled.": "Comments are not currently enabled.",
   "See All": "See All",
+  "System": "System",
   "Supporting content requires %lbc%": "Supporting content requires %lbc%",
   "With %lbc%, you can send tips to your favorite creators, or help boost their content for more people to see.": "With %lbc%, you can send tips to your favorite creators, or help boost their content for more people to see.",
   "Show this channel your appreciation by sending a donation in USD.": "Show this channel your appreciation by sending a donation in USD.",

ui/component/settingAutoLaunch/view.jsx

@@ -6,25 +6,28 @@ import { FormField } from 'component/common/form';
 type Props = {
   autoLaunch: string,
   showToast: ({}) => void,
-  setAutoLaunch: boolean => void,
+  setAutoLaunch: (boolean) => void,
+  noLabels?: boolean,
 };
 
 function SettingAutoLaunch(props: Props) {
-  const { autoLaunch, setAutoLaunch } = props;
+  const { autoLaunch, setAutoLaunch, noLabels } = props;
 
   return (
     <React.Fragment>
       <FormField
         type="checkbox"
         name="autolaunch"
-        onChange={e => {
+        onChange={(e) => {
           setAutoLaunch(e.target.checked);
         }}
         checked={autoLaunch}
-        label={__('Start minimized')}
+        label={noLabels ? '' : __('Start minimized')}
-        helper={__(
+        helper={
-          'Improve view speed and help the LBRY network by allowing the app to cuddle up in your system tray.'
+          noLabels
-        )}
+            ? ''
+            : __('Improve view speed and help the LBRY network by allowing the app to cuddle up in your system tray.')
+        }
       />
     </React.Fragment>
   );

ui/component/settingClosingBehavior/view.jsx

@@ -5,22 +5,23 @@ import { FormField } from 'component/common/form';
 
 type Props = {
   toTrayWhenClosed: boolean,
-  setToTrayWhenClosed: boolean => void,
+  setToTrayWhenClosed: (boolean) => void,
+  noLabels?: boolean,
 };
 
 function SettingClosingBehavior(props: Props) {
-  const { toTrayWhenClosed, setToTrayWhenClosed } = props;
+  const { toTrayWhenClosed, setToTrayWhenClosed, noLabels } = props;
 
   return (
     <React.Fragment>
       <FormField
         type="checkbox"
         name="totraywhenclosed"
-        onChange={e => {
+        onChange={(e) => {
           setToTrayWhenClosed(e.target.checked);
         }}
         checked={toTrayWhenClosed}
-        label={__('Leave app running in notification area when the window is closed')}
+        label={noLabels ? '' : __('Leave app running in notification area when the window is closed')}
       />
     </React.Fragment>
   );

ui/component/settingSystem/index.js

@@ -0,0 +1,11 @@
+import { connect } from 'react-redux';
+import { doClearCache } from 'redux/actions/app';
+import SettingSystem from './view';
+
+const select = (state) => ({});
+
+const perform = (dispatch) => ({
+  clearCache: () => dispatch(doClearCache()),
+});
+
+export default connect(select, perform)(SettingSystem);

ui/component/settingSystem/view.jsx

@@ -0,0 +1,64 @@
+// @flow
+import { ALERT } from 'constants/icons';
+import React from 'react';
+import Button from 'component/button';
+import Card from 'component/common/card';
+import SettingAutoLaunch from 'component/settingAutoLaunch';
+import SettingClosingBehavior from 'component/settingClosingBehavior';
+import SettingsRow from 'component/settingsRow';
+
+// @if TARGET='app'
+const IS_MAC = process.platform === 'darwin';
+// @endif
+
+type Props = {
+  clearCache: () => Promise<any>,
+};
+
+export default function SettingSystem(props: Props) {
+  const { clearCache } = props;
+  const [clearingCache, setClearingCache] = React.useState(false);
+
+  return (
+    <Card
+      title={__('System')}
+      subtitle=""
+      isBodyList
+      body={
+        <>
+          {/* @if TARGET='app' */}
+          {/* Auto launch in a hidden state doesn't work on mac https://github.com/Teamwork/node-auto-launch/issues/81 */}
+          {!IS_MAC && (
+            <SettingsRow title={__('Start minimized')} subtitle={__(HELP_START_MINIMIZED)}>
+              <SettingAutoLaunch noLabels />
+            </SettingsRow>
+          )}
+          {/* @endif */}
+
+          {/* @if TARGET='app' */}
+          <SettingsRow title={__('Leave app running in notification area when the window is closed')}>
+            <SettingClosingBehavior noLabels />
+          </SettingsRow>
+          {/* @endif */}
+
+          <SettingsRow title={__('Clear application cache')} subtitle={__(HELP_CLEAR_CACHE)}>
+            <Button
+              button="secondary"
+              icon={ALERT}
+              label={clearingCache ? __('Clearing') : __('Clear Cache')}
+              onClick={() => {
+                setClearingCache(true);
+                clearCache();
+              }}
+              disabled={clearingCache}
+            />
+          </SettingsRow>
+        </>
+      }
+    />
+  );
+}
+
+const HELP_START_MINIMIZED =
+  'Improve view speed and help the LBRY network by allowing the app to cuddle up in your system tray.';
+const HELP_CLEAR_CACHE = 'This might fix issues that you are having. Your wallet will not be affected.';

ui/page/settings/index.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { doClearCache, doToggle3PAnalytics, doOpenModal } from 'redux/actions/app';
+import { doToggle3PAnalytics, doOpenModal } from 'redux/actions/app';
 import { selectAllowAnalytics } from 'redux/selectors/app';
 import {
   doSetDaemonSetting,
@@ -44,7 +44,6 @@ const perform = (dispatch) => ({
   setDaemonSetting: (key, value) => dispatch(doSetDaemonSetting(key, value)),
   clearDaemonSetting: (key) => dispatch(doClearDaemonSetting(key)),
   toggle3PAnalytics: (allow) => dispatch(doToggle3PAnalytics(allow)),
-  clearCache: () => dispatch(doClearCache()),
   setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)),
   clearPlayingUri: () => dispatch(doSetPlayingUri({ uri: null })),
   setDarkTime: (time, options) => dispatch(doSetDarkTime(time, options)),

ui/page/settings/view.jsx

@@ -9,6 +9,7 @@ import Button from 'component/button';
 import Page from 'component/page';
 import SettingAccount from 'component/settingAccount';
 import SettingLanguage from 'component/settingLanguage';
+import SettingSystem from 'component/settingSystem';
 import FileSelector from 'component/common/file-selector';
 import HomepageSelector from 'component/homepageSelector';
 import Card from 'component/common/card';
@@ -47,7 +48,6 @@ type Props = {
   clearDaemonSetting: (string) => void,
   setClientSetting: (string, SetDaemonSettingArg) => void,
   toggle3PAnalytics: (boolean) => void,
-  clearCache: () => Promise<any>,
   daemonSettings: DaemonSettings,
   allowAnalytics: boolean,
   showNsfw: boolean,
@@ -72,18 +72,10 @@ type Props = {
   user: User,
 };
 
-type State = {
+class SettingsPage extends React.PureComponent<Props> {
-  clearingCache: boolean,
-};
-
-class SettingsPage extends React.PureComponent<Props, State> {
   constructor(props: Props) {
     super(props);
 
-    this.state = {
-      clearingCache: false,
-    };
-
     (this: any).onThemeChange = this.onThemeChange.bind(this);
     (this: any).onAutomaticDarkModeChange = this.onAutomaticDarkModeChange.bind(this);
     (this: any).onChangeTime = this.onChangeTime.bind(this);
@@ -162,7 +154,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
       hideReposts,
       clearPlayingUri,
       darkModeTimes,
-      clearCache,
       openModal,
       myChannelUrls,
       user,
@@ -176,6 +167,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
     return newStyle ? (
       <Page noFooter noSideNavigation backout={{ title: __('Settings'), backLabel: __('Done') }} className="card-stack">
         <SettingAccount />
+        <SettingSystem />
       </Page>
     ) : (
       <Page
@@ -518,26 +510,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
                 />
               </>
             )}
-
-            <Card
-              title={__('Application cache')}
-              subtitle={
-                <p className="section__subtitle">
-                  {__(
-                    'This will clear the application cache, and might fix issues you are having. Your wallet will not be affected. '
-                  )}
-                </p>
-              }
-              actions={
-                <Button
-                  button="secondary"
-                  icon={ICONS.ALERT}
-                  label={this.state.clearingCache ? __('Clearing') : __('Clear Cache')}
-                  onClick={clearCache}
-                  disabled={this.state.clearingCache}
-                />
-              }
-            />
           </div>
         )}
       </Page>

ui/page/settingsAdvanced/view.jsx

@@ -7,8 +7,6 @@ import I18nMessage from 'component/i18nMessage';
 import Page from 'component/page';
 import SettingCommentsServer from 'component/settingCommentsServer';
 import SettingWalletServer from 'component/settingWalletServer';
-import SettingAutoLaunch from 'component/settingAutoLaunch';
-import SettingClosingBehavior from 'component/settingClosingBehavior';
 import FileSelector from 'component/common/file-selector';
 import { SETTINGS } from 'lbry-redux';
 import Card from 'component/common/card';
@@ -16,10 +14,6 @@ import { getPasswordFromCookie } from 'util/saved-passwords';
 import Spinner from 'component/spinner';
 import PublishSettings from 'component/publishSettings';
 
-// @if TARGET='app'
-const IS_MAC = process.platform === 'darwin';
-// @endif
-
 type Price = {
   currency: string,
   amount: number,
@@ -513,12 +507,6 @@ class SettingsAdvancedPage extends React.PureComponent<Props, State> {
             {/* @endif */}
 
             <Card title={__('Upload settings')} actions={<PublishSettings />} />
-
-            {/* @if TARGET='app' */}
-            {/* Auto launch in a hidden state doesn't work on mac https://github.com/Teamwork/node-auto-launch/issues/81 */}
-            {!IS_MAC && <Card title={__('Startup preferences')} actions={<SettingAutoLaunch />} />}
-            <Card title={__('Closing preferences')} actions={<SettingClosingBehavior />} />
-            {/* @endif */}
           </div>
         )}
       </Page>