fix: settings icon and flex overflow

app/assets/javascripts/components/Icon.tsx

@@ -19,7 +19,7 @@ import HelpIcon from '../../icons/ic-help.svg';
 import KeyboardIcon from '../../icons/ic-keyboard.svg';
 import ListedIcon from '../../icons/ic-listed.svg';
 import SecurityIcon from '../../icons/ic-security.svg';
-import SettingsFilledIcon from '../../icons/ic-settings-filled.svg';
+import SettingsIcon from '../../icons/ic-settings.svg';
 import StarIcon from '../../icons/ic-star.svg';
 import ThemesIcon from '../../icons/ic-themes.svg';
 import UserIcon from '../../icons/ic-user.svg';
@@ -47,7 +47,7 @@ const ICONS = {
   keyboard: KeyboardIcon,
   listed: ListedIcon,
   security: SecurityIcon,
-  'settings-filled': SettingsFilledIcon,
+  settings: SettingsIcon,
   star: StarIcon,
   themes: ThemesIcon,
   user: UserIcon,

app/assets/javascripts/components/preferences/mock-state.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' },

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

@@ -1,28 +1,34 @@
 import { IconButton } from '@/components/IconButton';
 import { TitleBar, Title } from '@/components/TitleBar';
 import { FunctionComponent } from 'preact';
-import { PreferencesPane } from './pane';
+import { MockState } from './mock-state';
+import { PreferencesMenu } from './menu';
 
 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 />
-  </div>
-);
+}) => {
+  const store = new MockState();
+  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>
+      <div className="flex flex-row flex-grow min-h-0">
+        <PreferencesMenu store={store}></PreferencesMenu>
+      </div>
+    </div>
+  );
+};

app/assets/javascripts/ui_models/app_state/preferences_state.ts

@@ -1,7 +1,7 @@
 import { action, computed, makeObservable, observable } from 'mobx';
 
 export class PreferencesState {
-  private _open = false;
+  private _open = true;
 
   constructor() {
     makeObservable<PreferencesState, '_open'>(this, {