Allow to pin nodes to top of the list (#48)

* Refactored persistent state a bit
* Allow nodes to be pinned to top

packages/frontend/src/components/Setting.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { Icon } from './';
+import { State } from '../state';
+import { PersistentObject } from '../persist';
+
+import './Setting.css';
+
+export namespace Setting {
+  export interface Props {
+    icon: string;
+    label: string;
+    setting: keyof State.Settings;
+    settings: PersistentObject<State.Settings>;
+  }
+}
+
+export class Setting extends React.Component<Setting.Props, {}> {
+  public render() {
+    const { icon, label, setting, settings } = this.props;
+
+    const checked = settings.get(setting);
+    const className = checked ? "Setting Setting-on" : "Setting";
+
+    return (
+      <p className={className} onClick={this.toggle}>
+        <Icon src={icon} alt={label} />
+        {label}
+        <span className="Setting-switch">
+          <span className="Setting-knob" />
+        </span>
+      </p>
+    );
+  }
+
+  private toggle = () => {
+    const { setting, settings } = this.props;
+
+    settings.set(setting, !settings.get(setting));
+  }
+}