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 { ErrorReporting, Tools, Defaults } from './general-segments';
-import { Tools } from './general-segments/Tools';
 
 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';

package.json

@@ -70,8 +70,9 @@
     "@reach/alert-dialog": "^0.13.0",
     "@reach/checkbox": "^0.13.2",
     "@reach/dialog": "^0.13.0",
-    "@standardnotes/sncrypto-web": "1.5.2",
+    "@reach/listbox": "^0.16.1",
     "@standardnotes/features": "1.6.1",
+    "@standardnotes/sncrypto-web": "1.5.2",
     "@standardnotes/snjs": "2.14.8",
     "mobx": "^6.3.2",
     "mobx-react-lite": "^3.2.0",

yarn.lock

@@ -1834,6 +1834,14 @@
     "@reach/utils" "0.15.2"
     tslib "^2.3.0"
 
+"@reach/auto-id@0.16.0":
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/@reach/auto-id/-/auto-id-0.16.0.tgz#dfabc3227844e8c04f8e6e45203a8e14a8edbaed"
+  integrity sha512-5ssbeP5bCkM39uVsfQCwBBL+KT8YColdnMN5/Eto6Rj7929ql95R3HZUOkKIvj7mgPtEb60BLQxd1P3o6cjbmg==
+  dependencies:
+    "@reach/utils" "0.16.0"
+    tslib "^2.3.0"
+
 "@reach/checkbox@^0.13.2":
   version "0.13.2"
   resolved "https://registry.yarnpkg.com/@reach/checkbox/-/checkbox-0.13.2.tgz#b972b922cf6cea0c2bbabca0129c58307b566a4e"
@@ -1853,6 +1861,14 @@
     "@reach/utils" "0.15.2"
     tslib "^2.3.0"
 
+"@reach/descendants@0.16.1":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@reach/descendants/-/descendants-0.16.1.tgz#fa3d89c0503565369707f32985d87eef61985d9f"
+  integrity sha512-3WZgRnD9O4EORKE31rrduJDiPFNMOjUkATx0zl192ZxMq3qITe4tUj70pS5IbJl/+v9zk78JwyQLvA1pL7XAPA==
+  dependencies:
+    "@reach/utils" "0.16.0"
+    tslib "^2.3.0"
+
 "@reach/dialog@0.13.0", "@reach/dialog@^0.13.0":
   version "0.13.0"
   resolved "https://registry.yarnpkg.com/@reach/dialog/-/dialog-0.13.0.tgz#2110725c3b8a3c64685834cdc9f3ce5c15617809"
@@ -1887,6 +1903,18 @@
     "@reach/utils" "0.15.2"
     prop-types "^15.7.2"
 
+"@reach/listbox@^0.16.1":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@reach/listbox/-/listbox-0.16.1.tgz#8a4a13cf171e9ba3118d2e6e72f3e7f17f4c2f80"
+  integrity sha512-2KQTYmxKvZW0XdBWGoV7E2gUWWBINJmfj2MDRmWbRNdTjsF9w3mTb09buTWQ2sznzF7DrLrwiBFv4b2egMfKOw==
+  dependencies:
+    "@reach/auto-id" "0.16.0"
+    "@reach/descendants" "0.16.1"
+    "@reach/machine" "0.16.0"
+    "@reach/popover" "0.16.0"
+    "@reach/utils" "0.16.0"
+    prop-types "^15.7.2"
+
 "@reach/machine@0.13.2":
   version "0.13.2"
   resolved "https://registry.yarnpkg.com/@reach/machine/-/machine-0.13.2.tgz#744302f5ce2d4e5fd0527ae0baa60d325b2325d8"
@@ -1905,6 +1933,15 @@
     "@xstate/fsm" "1.4.0"
     tslib "^2.3.0"
 
+"@reach/machine@0.16.0":
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/@reach/machine/-/machine-0.16.0.tgz#0504ba47ac09ed495bd341bf5fdd6625bcade0e3"
+  integrity sha512-c8SRQz2xGtg5M9aXuuM5pFgaV1ZW5/nyMIYpZzBwHUlNFKGO+VBhwedbnqUxO0yLcbgl3wPvjPh740O3YjqiHg==
+  dependencies:
+    "@reach/utils" "0.16.0"
+    "@xstate/fsm" "1.4.0"
+    tslib "^2.3.0"
+
 "@reach/menu-button@^0.15.1":
   version "0.15.2"
   resolved "https://registry.yarnpkg.com/@reach/menu-button/-/menu-button-0.15.2.tgz#00f91402be3ff23d3b4cfe377529f4f9e82a78fe"
@@ -1934,6 +1971,17 @@
     tabbable "^4.0.0"
     tslib "^2.3.0"
 
+"@reach/popover@0.16.0":
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/@reach/popover/-/popover-0.16.0.tgz#82c5ab96a88c49e2451a9c04b2d4392a9055f623"
+  integrity sha512-xmgiSyQwfshMkMNu6URbGrjjDTD3dnAITojvgEqfEtV1chDYqktKdDbIPrq+UGI54ey/IxbRpVzKcIjXiKoMmA==
+  dependencies:
+    "@reach/portal" "0.16.0"
+    "@reach/rect" "0.16.0"
+    "@reach/utils" "0.16.0"
+    tabbable "^4.0.0"
+    tslib "^2.3.0"
+
 "@reach/portal@0.13.0":
   version "0.13.0"
   resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.13.0.tgz#bed220d41097deb1454a7928b22529ba10d3ea2b"
@@ -1950,6 +1998,14 @@
     "@reach/utils" "0.15.2"
     tslib "^2.3.0"
 
+"@reach/portal@0.16.0":
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.16.0.tgz#1544531d978b770770b718b2872b35652a11e7e3"
+  integrity sha512-vXJ0O9T+72HiSEWHPs2cx7YbSO7pQsTMhgqPc5aaddIYpo2clJx1PnYuS0lSNlVaDO0IxQhwYq43evXaXnmviw==
+  dependencies:
+    "@reach/utils" "0.16.0"
+    tslib "^2.3.0"
+
 "@reach/rect@0.15.2":
   version "0.15.2"
   resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.15.2.tgz#734e3f17a499d6e22bd2ea95856c801c41ed66fd"
@@ -1961,6 +2017,17 @@
     tiny-warning "^1.0.3"
     tslib "^2.3.0"
 
+"@reach/rect@0.16.0":
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.16.0.tgz#78cf6acefe2e83d3957fa84f938f6e1fc5700f16"
+  integrity sha512-/qO9jQDzpOCdrSxVPR6l674mRHNTqfEjkaxZHluwJ/2qGUtYsA0GSZiF/+wX/yOWeBif1ycxJDa6HusAMJZC5Q==
+  dependencies:
+    "@reach/observe-rect" "1.2.0"
+    "@reach/utils" "0.16.0"
+    prop-types "^15.7.2"
+    tiny-warning "^1.0.3"
+    tslib "^2.3.0"
+
 "@reach/utils@0.13.0":
   version "0.13.0"
   resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.13.0.tgz#2da775a910d8894bb34e1e94fe95842674f71844"
@@ -1996,6 +2063,14 @@
     tiny-warning "^1.0.3"
     tslib "^2.3.0"
 
+"@reach/utils@0.16.0":
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.16.0.tgz#5b0777cf16a7cab1ddd4728d5d02762df0ba84ce"
+  integrity sha512-PCggBet3qaQmwFNcmQ/GqHSefadAFyNCUekq9RrWoaU9hh/S4iaFgf2MBMdM47eQj5i/Bk0Mm07cP/XPFlkN+Q==
+  dependencies:
+    tiny-warning "^1.0.3"
+    tslib "^2.3.0"
+
 "@reach/visually-hidden@0.13.0":
   version "0.13.0"
   resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.13.0.tgz#cace36d9bb80ffb797374fcaea989391b881038f"
@@ -2069,10 +2144,10 @@
     "@standardnotes/sncrypto-common" "^1.5.2"
     libsodium-wrappers "^0.7.8"
 
-"@standardnotes/snjs@2.14.6":
+"@standardnotes/snjs@2.14.8":
-  version "2.14.6"
+  version "2.14.8"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.14.6.tgz#fb3f625ec6f22bbee543ccb6fc69e177311c1a4b"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.14.8.tgz#ebd89734d7e846ade96b7d0d81a465418147337d"
-  integrity sha512-/PfuyOv2u4Km29yQi2JXYYUteFmHmLYnbQhk96wYHbCwBiNmIyVdSp0VaA4XgVIuZq32QyhhTayjkexq5Huw/Q==
+  integrity sha512-+nfo1civqJlHfrcDeKNJfp2t6o4gs1pkDbjPzT3vULhZUWbOwCeuF1jXHosCxpjnhd+5Wa/oG2KcbKKsqlrrfw==
   dependencies:
     "@standardnotes/auth" "3.7.2"
     "@standardnotes/common" "1.1.0"