feat: add "sync" pane to preferences -> account tab (#621)

* feat: add "sync" pane to preferences -> account tab

* chore: configure eslint to add new line at the end of file and remove trailing spaces

* chore: add newline at the end of file

app/assets/javascripts/preferences/PreferencesView.tsx

@@ -1,19 +1,21 @@
 import { RoundIconButton } from '@/components/RoundIconButton';
 import { TitleBar, Title } from '@/components/TitleBar';
 import { FunctionComponent } from 'preact';
-import { HelpAndFeedback, Security } from './panes';
+import { AccountPreferences, HelpAndFeedback, Security } from './panes';
 import { observer } from 'mobx-react-lite';
 import { PreferencesMenu } from './preferences-menu';
 import { PreferencesMenuView } from './PreferencesMenuView';
+import { WebApplication } from '@/ui_models/application';
 
 const PaneSelector: FunctionComponent<{
   prefs: PreferencesMenu;
-}> = observer(({ prefs: menu }) => {
+  application: WebApplication;
+}> = observer(({ prefs: menu, application }) => {
   switch (menu.selectedPaneId) {
     case 'general':
       return null;
     case 'account':
-      return null;
+      return <AccountPreferences application={application} />;
     case 'appearance':
       return null;
     case 'security':
@@ -33,15 +35,19 @@ const PaneSelector: FunctionComponent<{
 
 const PreferencesCanvas: FunctionComponent<{
   preferences: PreferencesMenu;
-}> = observer(({ preferences: prefs }) => (
+  application: WebApplication;
+}> = observer(({ preferences: prefs, application }) => (
   <div className="flex flex-row flex-grow min-h-0 justify-between">
     <PreferencesMenuView menu={prefs}></PreferencesMenuView>
-    <PaneSelector prefs={prefs} />
+    <PaneSelector prefs={prefs} application={application} />
   </div>
 ));
 
-const PreferencesView: FunctionComponent<{ close: () => void }> = observer(
-  ({ close }) => {
+const PreferencesView: FunctionComponent<{
+  close: () => void;
+  application: WebApplication;
+}> = observer(
+  ({ close, application }) => {
     const prefs = new PreferencesMenu();
 
     return (
@@ -58,7 +64,7 @@ const PreferencesView: FunctionComponent<{ close: () => void }> = observer(
             icon="close"
           />
         </TitleBar>
-        <PreferencesCanvas preferences={prefs} />
+        <PreferencesCanvas preferences={prefs} application={application} />
       </div>
     );
   }
@@ -66,12 +72,16 @@ const PreferencesView: FunctionComponent<{ close: () => void }> = observer(
 
 export interface PreferencesWrapperProps {
   appState: { preferences: { isOpen: boolean; closePreferences: () => void } };
+  application: WebApplication;
 }
 
 export const PreferencesViewWrapper: FunctionComponent<PreferencesWrapperProps> =
-  observer(({ appState }) => {
+  observer(({ appState, application }) => {
     if (!appState.preferences.isOpen) return null;
     return (
-      <PreferencesView close={() => appState.preferences.closePreferences()} />
+      <PreferencesView
+        application={application}
+        close={() => appState.preferences.closePreferences()}
+      />
     );
   });