diff --git a/app/assets/javascripts/components/PreferencesMenuItem.tsx b/app/assets/javascripts/components/PreferencesMenuItem.tsx
new file mode 100644
index 000000000..eb872053a
--- /dev/null
+++ b/app/assets/javascripts/components/PreferencesMenuItem.tsx
@@ -0,0 +1,23 @@
+import { Icon, IconType } from '@/components/Icon';
+import { FunctionComponent } from 'preact';
+
+interface PreferencesMenuItemProps {
+ iconType: IconType;
+ label: string;
+ selected: boolean;
+ onClick: () => void;
+}
+
+export const PreferencesMenuItem: FunctionComponent
=
+ ({ iconType, label, selected, onClick }) => (
+ {
+ e.preventDefault();
+ onClick();
+ }}
+ >
+
+ {label}
+
+ );
diff --git a/app/assets/javascripts/components/SearchOptions.tsx b/app/assets/javascripts/components/SearchOptions.tsx
index 8315c3a91..ddd320d93 100644
--- a/app/assets/javascripts/components/SearchOptions.tsx
+++ b/app/assets/javascripts/components/SearchOptions.tsx
@@ -11,6 +11,7 @@ import {
} from '@reach/disclosure';
import { Switch } from './Switch';
import { observer } from 'mobx-react-lite';
+import { useEffect } from 'react';
type Props = {
appState: AppState;
@@ -45,16 +46,27 @@ const SearchOptions = observer(({ appState }: Props) => {
}
}
+ const updateWidthAndPosition = () => {
+ const rect = buttonRef.current.getBoundingClientRect();
+ setMaxWidth(rect.right - 16);
+ setPosition({
+ top: rect.bottom,
+ right: document.body.clientWidth - rect.right,
+ });
+ };
+
+ useEffect(() => {
+ window.addEventListener('resize', updateWidthAndPosition);
+ return () => {
+ window.removeEventListener('resize', updateWidthAndPosition);
+ };
+ }, []);
+
return (
{
- const rect = buttonRef.current.getBoundingClientRect();
- setMaxWidth(rect.right - 16);
- setPosition({
- top: rect.bottom,
- right: document.body.clientWidth - rect.right,
- });
+ updateWidthAndPosition();
setOpen(!open);
}}
>
diff --git a/app/assets/javascripts/components/SessionsModal.tsx b/app/assets/javascripts/components/SessionsModal.tsx
index 6677ff943..875f25f9c 100644
--- a/app/assets/javascripts/components/SessionsModal.tsx
+++ b/app/assets/javascripts/components/SessionsModal.tsx
@@ -76,7 +76,6 @@ function useSessions(
setSessions(sessionsDuringRevoke);
const response = await responsePromise;
- console.log(response);
if (isNullOrUndefined(response)) {
setSessions(sessionsBeforeRevoke);
} else if ('error' in response) {
diff --git a/app/assets/javascripts/components/TitleBar.tsx b/app/assets/javascripts/components/TitleBar.tsx
new file mode 100644
index 000000000..8cf9e9208
--- /dev/null
+++ b/app/assets/javascripts/components/TitleBar.tsx
@@ -0,0 +1,13 @@
+import { FunctionComponent } from 'preact';
+
+export const TitleBar: FunctionComponent<{ className?: string }> = ({
+ children,
+ className,
+}) => {children}
;
+
+export const Title: FunctionComponent<{ className?: string }> = ({
+ children,
+ className,
+}) => {
+ return {children}
;
+};
diff --git a/app/assets/javascripts/components/preferences/index.tsx b/app/assets/javascripts/components/preferences/index.tsx
new file mode 100644
index 000000000..7ad6bb318
--- /dev/null
+++ b/app/assets/javascripts/components/preferences/index.tsx
@@ -0,0 +1,22 @@
+import { observer } from 'mobx-react-lite';
+import { FunctionComponent } from 'preact';
+
+import { toDirective } from '../utils';
+import { PreferencesView } from './view';
+
+interface WrapperProps {
+ appState: { preferences: { isOpen: boolean; closePreferences: () => void } };
+}
+
+const PreferencesViewWrapper: FunctionComponent = observer(
+ ({ appState }) => {
+ if (!appState.preferences.isOpen) return null;
+ return (
+ appState.preferences.closePreferences()} />
+ );
+ }
+);
+
+export const PreferencesDirective = toDirective(
+ PreferencesViewWrapper
+);
diff --git a/app/assets/javascripts/components/preferences/mock-state.ts b/app/assets/javascripts/components/preferences/mock-state.ts
new file mode 100644
index 000000000..dd018f243
--- /dev/null
+++ b/app/assets/javascripts/components/preferences/mock-state.ts
@@ -0,0 +1,50 @@
+import { IconType } from '@/components/Icon';
+import { action, computed, makeObservable, observable } from 'mobx';
+
+interface PreferenceItem {
+ icon: IconType;
+ label: string;
+}
+
+interface PreferenceListItem extends PreferenceItem {
+ id: number;
+}
+
+const predefinedItems: PreferenceItem[] = [
+ { label: 'General', icon: 'settings-filled' },
+ { label: 'Account', icon: 'user' },
+ { label: 'Appearance', icon: 'themes' },
+ { label: 'Security', icon: 'security' },
+ { label: 'Listed', icon: 'listed' },
+ { label: 'Shortcuts', icon: 'keyboard' },
+ { label: 'Accessibility', icon: 'accessibility' },
+ { label: 'Get a free month', icon: 'star' },
+ { label: 'Help & feedback', icon: 'help' },
+];
+
+export class MockState {
+ private readonly _items: PreferenceListItem[];
+ private _selectedId = 0;
+
+ constructor(items: PreferenceItem[] = predefinedItems) {
+ makeObservable(this, {
+ _selectedId: observable,
+ items: computed,
+ select: action,
+ });
+
+ this._items = items.map((p, idx) => ({ ...p, id: idx }));
+ this._selectedId = this._items[0].id;
+ }
+
+ select(id: number) {
+ this._selectedId = id;
+ }
+
+ get items(): (PreferenceListItem & { selected: boolean })[] {
+ return this._items.map((p) => ({
+ ...p,
+ selected: p.id === this._selectedId,
+ }));
+ }
+}
diff --git a/app/assets/javascripts/components/preferences/pane.tsx b/app/assets/javascripts/components/preferences/pane.tsx
new file mode 100644
index 000000000..2738239ee
--- /dev/null
+++ b/app/assets/javascripts/components/preferences/pane.tsx
@@ -0,0 +1,33 @@
+import { observer } from 'mobx-react-lite';
+import { FunctionComponent } from 'preact';
+import { PreferencesMenuItem } from '../PreferencesMenuItem';
+import { MockState } from './mock-state';
+
+interface PreferencesMenuProps {
+ store: MockState;
+}
+
+const PreferencesMenu: FunctionComponent = observer(
+ ({ store }) => (
+
+ {store.items.map((pref) => (
+
store.select(pref.id)}
+ />
+ ))}
+
+
+ {/* div is added so flex justify-between can center the title */}
+
+ Your preferences for Standard Notes
+ {
+ close();
+ }}
+ type="normal"
+ iconType="close"
+ />
+
+
+