Add option to view event source (#320)

* Add view source

* Add view source cons

* Change design

* Use PopupWindow instead of Dialog

* Undo changes to Dialog.jsx

src/app/organisms/pw/Dialogs.jsx

@@ -4,11 +4,13 @@ import ReadReceipts from '../read-receipts/ReadReceipts';
 import ProfileViewer from '../profile-viewer/ProfileViewer';
 import SpaceAddExisting from '../../molecules/space-add-existing/SpaceAddExisting';
 import Search from '../search/Search';
+import ViewSource from '../view-source/ViewSource';
 
 function Dialogs() {
   return (
     <>
       <ReadReceipts />
+      <ViewSource />
       <ProfileViewer />
       <SpaceAddExisting />
       <Search />

src/app/organisms/view-source/ViewSource.jsx

@@ -0,0 +1,73 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import './ViewSource.scss';
+
+import cons from '../../../client/state/cons';
+import navigation from '../../../client/state/navigation';
+
+import IconButton from '../../atoms/button/IconButton';
+import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
+import ScrollView from '../../atoms/scroll/ScrollView';
+import PopupWindow from '../../molecules/popup-window/PopupWindow';
+
+import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+
+function ViewSourceBlock({ title, json }) {
+  return (
+    <div className="view-source__card">
+      <MenuHeader>{title}</MenuHeader>
+      <ScrollView horizontal vertical={false} autoHide>
+        <pre className="text text-b1">
+          <code className="language-json">
+            {JSON.stringify(json, null, 2)}
+          </code>
+        </pre>
+      </ScrollView>
+    </div>
+  );
+}
+ViewSourceBlock.propTypes = {
+  title: PropTypes.string.isRequired,
+  json: PropTypes.shape({}).isRequired,
+};
+
+function ViewSource() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [event, setEvent] = useState(null);
+
+  useEffect(() => {
+    const loadViewSource = (e) => {
+      setEvent(e);
+      setIsOpen(true);
+    };
+    navigation.on(cons.events.navigation.VIEWSOURCE_OPENED, loadViewSource);
+    return () => {
+      navigation.removeListener(cons.events.navigation.VIEWSOURCE_OPENED, loadViewSource);
+    };
+  }, []);
+
+  const handleAfterClose = () => {
+    setEvent(null);
+  };
+
+  const renderViewSource = () => (
+    <div className="view-source">
+      {event.isEncrypted() && <ViewSourceBlock title="Decrypted source" json={event.getEffectiveEvent()} />}
+      <ViewSourceBlock title="Original source" json={event.event} />
+    </div>
+  );
+
+  return (
+    <PopupWindow
+      isOpen={isOpen}
+      title="View source"
+      onAfterClose={handleAfterClose}
+      onRequestClose={() => setIsOpen(false)}
+      contentOptions={<IconButton src={CrossIC} onClick={() => setIsOpen(false)} tooltip="Close" />}
+    >
+      {event && renderViewSource()}
+    </PopupWindow>
+  );
+}
+
+export default ViewSource;

src/app/organisms/view-source/ViewSource.scss

@@ -0,0 +1,17 @@
+@use '../../partials/dir';
+
+.view-source {
+  @include dir.side(margin, var(--sp-normal), var(--sp-extra-tight));
+
+  & pre {
+    padding: var(--sp-extra-tight);
+  }
+
+  &__card {
+    margin: var(--sp-normal) 0;
+    background-color: var(--bg-surface-hover);
+    border-radius: var(--bo-radius);
+    box-shadow: var(--bs-surface-border);
+    overflow: hidden;
+  }
+}