+ {!Array.isArray(children)
+ ? children
+ : children.map((c, i, arr) => (
+ <>
+ {c}
+
+
+ ))}
+
);
-export const PreferencesPane: FunctionComponent = () => {
- const store = new MockState();
- return (
-
-
+export const PreferencesPane: FunctionalComponent = ({ children }) => (
+
+);
diff --git a/app/assets/javascripts/components/preferences/mock-state.ts b/app/assets/javascripts/components/preferences/preferences.ts
similarity index 78%
rename from app/assets/javascripts/components/preferences/mock-state.ts
rename to app/assets/javascripts/components/preferences/preferences.ts
index dd018f243b2..3a7407d4a5c 100644
--- a/app/assets/javascripts/components/preferences/mock-state.ts
+++ b/app/assets/javascripts/components/preferences/preferences.ts
@@ -11,7 +11,7 @@ interface PreferenceListItem extends PreferenceItem {
}
const predefinedItems: PreferenceItem[] = [
- { label: 'General', icon: 'settings-filled' },
+ { label: 'General', icon: 'settings' },
{ label: 'Account', icon: 'user' },
{ label: 'Appearance', icon: 'themes' },
{ label: 'Security', icon: 'security' },
@@ -22,22 +22,23 @@ const predefinedItems: PreferenceItem[] = [
{ label: 'Help & feedback', icon: 'help' },
];
-export class MockState {
+export class Preferences {
private readonly _items: PreferenceListItem[];
private _selectedId = 0;
constructor(items: PreferenceItem[] = predefinedItems) {
- makeObservable
(this, {
+ makeObservable(this, {
_selectedId: observable,
+ selectedItem: computed,
items: computed,
- select: action,
+ selectItem: action,
});
this._items = items.map((p, idx) => ({ ...p, id: idx }));
this._selectedId = this._items[0].id;
}
- select(id: number) {
+ selectItem(id: number) {
this._selectedId = id;
}
@@ -47,4 +48,8 @@ export class MockState {
selected: p.id === this._selectedId,
}));
}
+
+ get selectedItem(): PreferenceListItem {
+ return this._items.find((item) => item.id === this._selectedId)!;
+ }
}
diff --git a/app/assets/javascripts/components/preferences/view.tsx b/app/assets/javascripts/components/preferences/view.tsx
index 01ceb8773d7..9b2f8b8541c 100644
--- a/app/assets/javascripts/components/preferences/view.tsx
+++ b/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 = ({
- close,
-}) => (
-
-
- {/* div is added so flex justify-between can center the title */}
-
- Your preferences for Standard Notes
- {
- close();
- }}
- type="normal"
- iconType="close"
- />
-
-
+export const PreferencesCanvas: FunctionComponent<{
+ preferences: Preferences;
+}> = observer(({ preferences: prefs }) => (
+
+
+ {/* Temporary selector until a full solution is implemented */}
+ {prefs.selectedItem.label === 'Help & feedback' ? (
+
+ ) : null}
-);
+));
+
+export const PreferencesView: FunctionComponent
=
+ observer(({ close }) => {
+ const prefs = new Preferences();
+ return (
+
+
+ {/* div is added so flex justify-between can center the title */}
+
+ Your preferences for Standard Notes
+ {
+ close();
+ }}
+ type="normal"
+ iconType="close"
+ />
+
+
+