feat: preferences help & feedback (#596)

app/assets/javascripts/components/preferences/view.tsx

@@ -1,28 +1,45 @@
 import { IconButton } from '@/components/IconButton';
 import { TitleBar, Title } from '@/components/TitleBar';
 import { FunctionComponent } from 'preact';
-import { PreferencesPane } from './pane';
+import { Preferences } from './preferences';
+import { PreferencesMenu } from './menu';
+import { HelpAndFeedback } from './help-feedback';
+import { observer } from 'mobx-react-lite';
 
 interface PreferencesViewProps {
   close: () => void;
 }
 
-export const PreferencesView: FunctionComponent<PreferencesViewProps> = ({
-  close,
-}) => (
-  <div className="sn-full-screen flex flex-col bg-contrast z-index-preferences">
-    <TitleBar className="items-center justify-between">
-      {/* div is added so flex justify-between can center the title */}
-      <div className="h-8 w-8" />
-      <Title className="text-lg">Your preferences for Standard Notes</Title>
-      <IconButton
-        onClick={() => {
-          close();
-        }}
-        type="normal"
-        iconType="close"
-      />
-    </TitleBar>
-    <PreferencesPane />
+export const PreferencesCanvas: FunctionComponent<{
+  preferences: Preferences;
+}> = observer(({ preferences: prefs }) => (
+  <div className="flex flex-row flex-grow min-h-0 justify-between">
+    <PreferencesMenu preferences={prefs}></PreferencesMenu>
+    {/* Temporary selector until a full solution is implemented */}
+    {prefs.selectedItem.label === 'Help & feedback' ? (
+      <HelpAndFeedback />
+    ) : null}
   </div>
-);
+));
+
+export const PreferencesView: FunctionComponent<PreferencesViewProps> =
+  observer(({ close }) => {
+    const prefs = new Preferences();
+    return (
+      <div className="sn-full-screen flex flex-col bg-contrast z-index-preferences">
+        <TitleBar className="items-center justify-between">
+          {/* div is added so flex justify-between can center the title */}
+          <div className="h-8 w-8" />
+          <Title className="text-lg">Your preferences for Standard Notes</Title>
+          <IconButton
+            onClick={() => {
+              close();
+            }}
+            type="normal"
+            iconType="close"
+          />
+        </TitleBar>
+        <PreferencesCanvas preferences={prefs} />
+      </div>
+    );
+  });