feat: preferences help & feedback (#596)

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 PreferencesPane: FunctionComponent = () => {
-  const store = new MockState();
-  return (
-    <div className="h-full w-full flex flex-row">
-      <PreferencesMenu store={store}></PreferencesMenu>
+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: 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>
+);