Lens restructure (#540)

Signed-off-by: Roman <ixrock@gmail.com>

src/renderer/components/error-boundary/error-boundary.scss

@@ -0,0 +1,14 @@
+.ErrorBoundary {
+  --flex-gap: #{$padding * 2};
+
+  padding: var(--flex-gap);
+  word-break: break-all;
+
+  code {
+    max-height: none;
+    border: 5px solid $borderFaintColor;
+    white-space: pre-wrap;
+    background: $contentColor;
+    color: $textColorSecondary;
+  }
+}

src/renderer/components/error-boundary/error-boundary.tsx

@@ -0,0 +1,75 @@
+import "./error-boundary.scss"
+
+import React, { ErrorInfo } from "react";
+import { reaction } from "mobx";
+import { disposeOnUnmount, observer } from "mobx-react";
+import { t, Trans } from "@lingui/macro";
+import { Button } from "../button";
+import { navigation } from "../../navigation";
+import { _i18n } from "../../i18n";
+import { issuesTrackerUrl, slackUrl, buildVersion } from "../../../common/vars";
+
+interface Props {
+}
+
+interface State {
+  error?: Error;
+  errorInfo?: ErrorInfo;
+}
+
+@observer
+export class ErrorBoundary extends React.Component<Props, State> {
+  public state: State = {};
+
+  @disposeOnUnmount
+  resetOnNavigate = reaction(
+    () => navigation.getPath(),
+    () => this.setState({ error: null, errorInfo: null })
+  )
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    this.setState({ error, errorInfo });
+  }
+
+  back = () => {
+    navigation.goBack();
+  }
+
+  render() {
+    const { error, errorInfo } = this.state;
+    if (error) {
+      const slackLink = <a href={slackUrl} target="_blank">Slack</a>
+      const githubLink = <a href={issuesTrackerUrl} target="_blank">Github</a>
+      const pageUrl = location.href;
+      return (
+        <div className="ErrorBoundary flex column gaps">
+          <h5>
+            <Trans>App crash at <span className="contrast">{pageUrl}</span></Trans>
+            {buildVersion && <p><Trans>Build version</Trans>: {buildVersion}</p>}
+          </h5>
+          <p>
+            <Trans>
+              To help us improve the product please report bugs to {slackLink} community or {githubLink} issues tracker.
+            </Trans>
+          </p>
+          <div className="flex gaps">
+            <code>
+              <p className="contrast"><Trans>Component stack</Trans>:</p>
+              {errorInfo.componentStack}
+            </code>
+            <code className="box grow">
+              <p className="contrast"><Trans>Error stack</Trans>:</p> <br/>
+              {error.stack}
+            </code>
+          </div>
+          <Button
+            className="box self-flex-start"
+            primary label={_i18n._(t`Back`)}
+            onClick={this.back}
+          />
+        </div>
+      )
+    }
+    return this.props.children;
+  }
+}

src/renderer/components/error-boundary/index.ts

@@ -0,0 +1 @@
+export * from "./error-boundary"