feat(preferences): Defaults segment

feat: Dropdown component

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>
+  );
+};