feat: preferences help & feedback (#596)

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/content.tsx

@@ -0,0 +1,28 @@
+import { FunctionalComponent } from 'preact';
+
+export const Title: FunctionalComponent = ({ children }) => (
+  <h2 className="text-base m-0 mb-3">{children}</h2>
+);
+
+export const Subtitle: FunctionalComponent = ({ children }) => (
+  <h4 className="font-medium text-sm m-0 mb-1">{children}</h4>
+);
+
+export const Text: FunctionalComponent = ({ children }) => (
+  <p className="text-xs">{children}</p>
+);
+
+export const Button: FunctionalComponent<{ label: string; link: string }> = ({
+  label,
+  link,
+}) => (
+  <a
+    target="_blank"
+    className="block bg-default color-text rounded border-solid border-1 
+    border-gray-300 px-4 py-2 font-bold text-sm fit-content mt-3
+    focus:bg-contrast hover:bg-contrast "
+    href={link}
+  >
+    {label}
+  </a>
+);

app/assets/javascripts/components/preferences/help-feedback.tsx

@@ -0,0 +1,92 @@
+import { FunctionalComponent } from 'preact';
+import { PreferencesGroup, PreferencesPane, PreferencesSegment } from './pane';
+import { Title, Subtitle, Text, Button } from './content';
+
+export const HelpAndFeedback: FunctionalComponent = () => (
+  <PreferencesPane>
+    <PreferencesGroup>
+      <PreferencesSegment>
+        <Title>Frequently asked questions</Title>
+        <Subtitle>Who can read my private notes?</Subtitle>
+        <Text>
+          Quite simply: no one but you. Not us, not your ISP, not a hacker, and
+          not a government agency. As long as you keep your password safe, and
+          your password is reasonably strong, then you are the only person in
+          the world with the ability to decrypt your notes. For more on how we
+          handle your privacy and security, check out our easy to read{' '}
+          <a target="_blank" href="https://standardnotes.com/privacy">
+            Privacy Manifesto.
+          </a>
+        </Text>
+      </PreferencesSegment>
+      <PreferencesSegment>
+        <Subtitle>Can I collaborate with others on a note?</Subtitle>
+        <Text>
+          Because of our encrypted architecture, Standard Notes does not
+          currently provide a real-time collaboration solution. Multiple users
+          can share the same account however, but editing at the same time may
+          result in sync conflicts, which may result in the duplication of
+          notes.
+        </Text>
+      </PreferencesSegment>
+      <PreferencesSegment>
+        <Subtitle>Can I use Standard Notes totally offline?</Subtitle>
+        <Text>
+          Standard Notes can be used totally offline without an account, and
+          without an internet connection. You can find{' '}
+          <a
+            target="_blank"
+            href="https://standardnotes.com/help/59/can-i-use-standard-notes-totally-offline"
+          >
+            more details here.
+          </a>
+        </Text>
+      </PreferencesSegment>
+      <PreferencesSegment>
+        <Subtitle>Can’t find your question here?</Subtitle>
+        <Button label="Open FAQ" link="https://standardnotes.com/help" />
+      </PreferencesSegment>
+    </PreferencesGroup>
+    <PreferencesGroup>
+      <PreferencesSegment>
+        <Title>Community forum</Title>
+        <Text>
+          If you have an issue, found a bug or want to suggest a feature, you
+          can browse or post to the forum. It’s recommended for non-account
+          related issues. Please read our{' '}
+          <a target="_blank" href="https://standardnotes.com/longevity/">
+            Longevity statement
+          </a>{' '}
+          before advocating for a feature request.
+        </Text>
+        <Button
+          label="Go to the forum"
+          link="https://forum.standardnotes.org/"
+        />
+      </PreferencesSegment>
+    </PreferencesGroup>
+    <PreferencesGroup>
+      <PreferencesSegment>
+        <Title>Slack group</Title>
+        <Text>
+          Want to meet other passionate note-takers and privacy enthusiasts?
+          Want to share your feedback with us? Join the Standard Notes Slack
+          group for discussions on security, themes, editors and more.
+        </Text>
+        <Button
+          link="https://standardnotes.com/slack"
+          label="Join our Slack group"
+        />
+      </PreferencesSegment>
+    </PreferencesGroup>
+    <PreferencesGroup>
+      <PreferencesSegment>
+        <Title>Account related issue?</Title>
+        <Text>
+          Send an email to [email protected] and we’ll sort it out.
+        </Text>
+        <Button link="mailto: [email protected]" label="Email us" />
+      </PreferencesSegment>
+    </PreferencesGroup>
+  </PreferencesPane>
+);

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

@@ -0,0 +1,23 @@
+import { observer } from 'mobx-react-lite';
+import { FunctionComponent } from 'preact';
+import { PreferencesMenuItem } from '../PreferencesMenuItem';
+import { Preferences } from './preferences';
+
+interface PreferencesMenuProps {
+  preferences: Preferences;
+}
+
+export const PreferencesMenu: FunctionComponent<PreferencesMenuProps> =
+  observer(({ preferences }) => (
+    <div className="min-w-55 overflow-y-auto flex flex-col px-3 py-6">
+      {preferences.items.map((pref) => (
+        <PreferencesMenuItem
+          key={pref.id}
+          iconType={pref.icon}
+          label={pref.label}
+          selected={pref.selected}
+          onClick={() => preferences.selectItem(pref.id)}
+        />
+      ))}
+    </div>
+  ));

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

@@ -1,33 +1,33 @@
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-import { PreferencesMenuItem } from '../PreferencesMenuItem';
-import { MockState } from './mock-state';
+import { FunctionalComponent } from 'preact';
 
-interface PreferencesMenuProps {
-  store: MockState;
-}
+const HorizontalLine: FunctionalComponent<{ index: number; length: number }> =
+  ({ index, length }) =>
+    index < length - 1 ? (
+      <hr className="h-1px w-full bg-border no-border" />
+    ) : null;
 
-const PreferencesMenu: FunctionComponent<PreferencesMenuProps> = observer(
-  ({ store }) => (
-    <div className="h-full w-auto flex flex-col px-3 py-6">
-      {store.items.map((pref) => (
-        <PreferencesMenuItem
-          key={pref.id}
-          iconType={pref.icon}
-          label={pref.label}
-          selected={pref.selected}
-          onClick={() => store.select(pref.id)}
-        />
-      ))}
-    </div>
-  )
+export const PreferencesSegment: FunctionalComponent = ({ children }) => (
+  <div>{children}</div>
+);
+
+export const PreferencesGroup: FunctionalComponent = ({ children }) => (
+  <div className="bg-default border-1 border-solid rounded border-gray-300 px-6 py-6 flex flex-col gap-2">
+    {!Array.isArray(children)
+      ? children
+      : children.map((c, i, arr) => (
+          <>
+            {c}
+            <HorizontalLine index={i} length={arr.length} />
+          </>
+        ))}
+  </div>
 );
 
-export const PreferencesPane: FunctionComponent = () => {
-  const store = new MockState();
-  return (
-    <div className="h-full w-full flex flex-row">
-      <PreferencesMenu store={store}></PreferencesMenu>
+export const PreferencesPane: FunctionalComponent = ({ children }) => (
+  <div className="preferences-pane flex-grow flex flex-row overflow-y-auto min-h-0">
+    <div className="flex-grow flex flex-col py-6 items-center">
+      <div className="max-w-124 flex flex-col gap-3">{children}</div>
     </div>
-  );
-};
+    <div className="flex-basis-55 flex-shrink-max" />
+  </div>
+);

app/assets/javascripts/components/preferences/mock-state.ts → app/assets/javascripts/components/preferences/preferences.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' },
@@ -22,22 +22,23 @@ const predefinedItems: PreferenceItem[] = [
   { label: 'Help & feedback', icon: 'help' },
 ];
 
-export class MockState {
+export class Preferences {
   private readonly _items: PreferenceListItem[];
   private _selectedId = 0;
 
   constructor(items: PreferenceItem[] = predefinedItems) {
-    makeObservable<MockState, '_selectedId'>(this, {
+    makeObservable<Preferences, '_selectedId'>(this, {
       _selectedId: observable,
+      selectedItem: computed,
       items: computed,
-      select: action,
+      selectItem: action,
     });
 
     this._items = items.map((p, idx) => ({ ...p, id: idx }));
     this._selectedId = this._items[0].id;
   }
 
-  select(id: number) {
+  selectItem(id: number) {
     this._selectedId = id;
   }
 
@@ -47,4 +48,8 @@ export class MockState {
       selected: p.id === this._selectedId,
     }));
   }
+
+  get selectedItem(): PreferenceListItem {
+    return this._items.find((item) => item.id === this._selectedId)!;
+  }
 }

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

@@ -1,28 +1,45 @@
 import { IconButton } from '@/components/IconButton';
 import { TitleBar, Title } from '@/components/TitleBar';
 import { FunctionComponent } from 'preact';
-import { PreferencesPane } from './pane';
+import { Preferences } from './preferences';
+import { PreferencesMenu } from './menu';
+import { HelpAndFeedback } from './help-feedback';
+import { observer } from 'mobx-react-lite';
 
 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 />
+export const PreferencesCanvas: FunctionComponent<{
+  preferences: Preferences;
+}> = observer(({ preferences: prefs }) => (
+  <div className="flex flex-row flex-grow min-h-0 justify-between">
+    <PreferencesMenu preferences={prefs}></PreferencesMenu>
+    {/* Temporary selector until a full solution is implemented */}
+    {prefs.selectedItem.label === 'Help & feedback' ? (
+      <HelpAndFeedback />
+    ) : null}
   </div>
-);
+));
+
+export const PreferencesView: FunctionComponent<PreferencesViewProps> =
+  observer(({ close }) => {
+    const prefs = new Preferences();
+    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>
+        <PreferencesCanvas preferences={prefs} />
+      </div>
+    );
+  });

app/assets/stylesheets/_preferences.scss

@@ -30,6 +30,7 @@
     @extend .border-gray-300;
     @extend .border-solid;
     @extend .border-1;
+    @extend .bg-default;
   }
 }
 

package.json

@@ -55,7 +55,7 @@
     "pug-loader": "^2.4.0",
     "sass-loader": "^8.0.2",
     "serve-static": "^1.14.1",
-    "sn-stylekit": "5.2.3",
+    "sn-stylekit": "5.2.5",
     "ts-loader": "^8.0.17",
     "typescript": "4.2.3",
     "typescript-eslint": "0.0.1-alpha.0",

yarn.lock

@@ -7908,10 +7908,10 @@ slice-ansi@^4.0.0:
     astral-regex "^2.0.0"
     is-fullwidth-code-point "^3.0.0"
 
-[email protected].3:
-  version "5.2.3"
-  resolved "https://registry.yarnpkg.com/sn-stylekit/-/sn-stylekit-5.2.3.tgz#24246471c03cde5129bda51a08fabef4d3c4880c"
-  integrity sha512-hzziH89IY2UjmGh8OYgapb+/QVD6P6NNjnoyzSyveOh671MM9Z4IaPLZTJckgxJVjV0q7G495Pxfta5r4CSRDQ==
+[email protected].5:
+  version "5.2.5"
+  resolved "https://registry.yarnpkg.com/sn-stylekit/-/sn-stylekit-5.2.5.tgz#85a28da395fedbaae9f7a91c48648042cdcc8052"
+  integrity sha512-8J+8UtRvukyJOBp79RcD4IZrvJJbjYY6EdN4N125K0xW84nDjgURuPuCjwm4lnp6vcXODU6r5d3JMDJoXYq8wA==
   dependencies:
     "@reach/listbox" "^0.15.0"
     "@reach/menu-button" "^0.15.1"