feat(preferences): Defaults segment

feat: Dropdown component

app/assets/javascripts/components/Dropdown.tsx

@@ -0,0 +1,45 @@
+import { Listbox, ListboxOption } from '@reach/listbox';
+import VisuallyHidden from '@reach/visually-hidden';
+import { FunctionComponent } from 'preact';
+import { IconType } from './Icon';
+import '@reach/listbox/styles.css';
+import { useState } from 'preact/hooks';
+
+export type DropdownItem = {
+  icon?: IconType;
+  label: string;
+  value: string;
+};
+
+type Props = {
+  id: string;
+  srLabel: string;
+  items: DropdownItem[];
+  defaultValue: string;
+};
+
+export const Dropdown: FunctionComponent<Props> = ({
+  id,
+  srLabel,
+  items,
+  defaultValue,
+}) => {
+  const [value, setValue] = useState(defaultValue);
+
+  const labelId = `${id}-label`;
+
+  return (
+    <>
+      <VisuallyHidden id={labelId}>{srLabel}</VisuallyHidden>
+      <Listbox
+        value={value}
+        onChange={(value) => setValue(value)}
+        aria-labelledby={labelId}
+      >
+        {items.map((item) => (
+          <ListboxOption value={item.value}>{item.label}</ListboxOption>
+        ))}
+      </Listbox>
+    </>
+  );
+};

app/assets/javascripts/preferences/panes/General.tsx

@@ -2,8 +2,7 @@ import { WebApplication } from '@/ui_models/application';
 import { AppState } from '@/ui_models/app_state';
 import { FunctionComponent } from 'preact';
 import { PreferencesPane } from '../components';
-import { ErrorReporting } from './general-segments';
-import { Tools } from './general-segments/Tools';
+import { ErrorReporting, Tools, Defaults } from './general-segments';
 
 interface GeneralProps {
   appState: AppState;
@@ -13,6 +12,7 @@ interface GeneralProps {
 export const General: FunctionComponent<GeneralProps> = (props) => (
   <PreferencesPane>
     <Tools application={props.application} />
+    <Defaults application={props.application} />
     <ErrorReporting appState={props.appState} />
   </PreferencesPane>
 );

app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx

@@ -0,0 +1,59 @@
+import { Dropdown, DropdownItem } from '@/components/Dropdown';
+import {
+  PreferencesGroup,
+  PreferencesSegment,
+  Subtitle,
+  Text,
+  Title,
+} from '@/preferences/components';
+import { WebApplication } from '@/ui_models/application';
+import { ComponentArea } from '@standardnotes/snjs';
+import { FunctionComponent } from 'preact';
+import { useEffect, useState } from 'preact/hooks';
+
+type Props = {
+  application: WebApplication;
+};
+
+export const Defaults: FunctionComponent<Props> = ({ application }) => {
+  const [editorItems, setEditorItems] = useState<DropdownItem[]>([]);
+
+  useEffect(() => {
+    const editors = application.componentManager
+      .componentsForArea(ComponentArea.Editor)
+      .map((editor) => {
+        return {
+          label: editor.name,
+          value: editor.package_info.identifier,
+        };
+      });
+
+    setEditorItems([
+      {
+        label: 'Plain Editor',
+        value: 'plain-editor',
+      },
+      ...editors,
+    ]);
+  }, [application]);
+
+  return (
+    <PreferencesGroup>
+      <PreferencesSegment>
+        <Title>Defaults</Title>
+        <div className="mt-2">
+          <Subtitle>Default Editor</Subtitle>
+          <Text>New notes will be created using this editor.</Text>
+          <div className="mt-2">
+            <Dropdown
+              id="def-editor-dropdown"
+              srLabel="Select the default editor"
+              items={editorItems}
+              defaultValue="plain-editor"
+            />
+          </div>
+        </div>
+      </PreferencesSegment>
+    </PreferencesGroup>
+  );
+};

app/assets/javascripts/preferences/panes/general-segments/index.ts

@@ -1,2 +1,3 @@
 export * from './ErrorReporting';
 export * from './Tools';
+export * from './Defaults';