wip explorer, fix new post modal layout

src/css/style.css

@@ -277,7 +277,7 @@ input {
 
 img,
 video {
-  max-width: 95vw;
+  max-width: 95%;
   max-height: 95vh;
 }
 

src/js/Main.tsx

@@ -10,6 +10,7 @@ import { translationLoaded } from './translations/Translation';
 import About from './views/About';
 import Chat from './views/chat/Chat';
 import EditProfile from './views/EditProfile';
+import Explorer from './views/explorer/Explorer';
 import Feed from './views/Feed';
 import FeedList from './views/FeedList';
 import Follows from './views/Follows';
@@ -160,7 +161,7 @@ class Main extends Component<Props, ReactState> {
               <KeyConverter path="/key" />
               <Feed path="/following" index="follows" />
               <Feed path="/global" index="global" />
-              <Feed path="/search/:keyword?/:type?" />
+              <Feed path="/search/:keyword?" />
               <Login path="/login" />
               <Notifications path="/notifications" />
               <Chat path="/chat/hashtag/:hashtag?" />
@@ -171,6 +172,7 @@ class Main extends Component<Props, ReactState> {
               <About path="/about" />
               <Settings path="/settings/:page?" />
               <LogoutConfirmation path="/logout" />
+              <Explorer path="/explorer/:path?" />
               <EditProfile path="/profile/edit" />
               <MyProfile path="/profile/:id+" tab="profile" />
               <MyProfile path="/replies/:id+" tab="replies" />

src/js/components/modal/Modal.tsx

@@ -26,6 +26,14 @@ const Overlay = styled.div`
   padding: 20px 0;
 `;
 
+const ModalContentContainer = styled.div`
+  max-height: calc(100% - 40px);
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
 const Modal: FC<Props> = ({ centerVertically, showContainer, children, onClose }) => {
   const handleKeyDown = (e: KeyboardEvent) => {
     if (e.key === 'Escape') {
@@ -50,8 +58,8 @@ const Modal: FC<Props> = ({ centerVertically, showContainer, children, onClose }
   }, [handleKeyDown]);
 
   const content = showContainer ? (
-    <div class="msg" style="width: 600px;" onClick={(e) => handleContainerClick(e)}>
-      <div class="msg-content" style="padding: 30px;">
+    <div class="msg" style={{ width: '600px' }} onClick={(e) => handleContainerClick(e)}>
+      <div class="msg-content" style={{ padding: '30px' }}>
         {children}
       </div>
     </div>
@@ -61,7 +69,7 @@ const Modal: FC<Props> = ({ centerVertically, showContainer, children, onClose }
 
   return (
     <Overlay centerVertically={centerVertically} onClick={handleOverlayClick}>
-      {content}
+      <ModalContentContainer>{content}</ModalContentContainer>
     </Overlay>
   );
 };

src/js/lib/nostr-tools/path.ts

@@ -173,6 +173,18 @@ export class Path {
     return listener
   }
 
+  list(path: string, callback: PathCallback, filter = {}): Listener {
+    filter = Object.assign({}, filter, this.filter, { '#d': [path], kinds: [EVENT_KIND] })
+    const listener = this.addListener(filter, callback)
+    this.store.get(filter, (event) => this.callbackFromEvent(event, callback))
+    this.subscribe([filter], async (event) => {
+      if (this.store.set(event)) {
+        this.notifyListeners(event as CompleteEvent)
+      }
+    })
+    return listener
+  }
+
   addListener(filter: Filter, callback: PathCallback): Listener {
     const id = Math.random().toString(36).substr(2, 9)
     const listener: Listener = { filter, callback, off: () => {

src/js/nostr/Session.ts

@@ -20,6 +20,7 @@ try {
 }
 
 const Session = {
+  public: undefined,
   async logOut() {
     route('/');
     /*

src/js/views/explorer/Explorer.tsx

@@ -0,0 +1,51 @@
+import { useEffect, useState } from 'preact/hooks';
+
+import Header from '../../components/Header';
+import Session from '../../nostr/Session';
+import { translate as t } from '../../translations/Translation';
+
+const Node = ({ path }) => {
+  const [value, setValue] = useState(undefined);
+
+  useEffect(() => {
+    const listener = Session.public?.get(path, setValue);
+    return () => listener?.off();
+  });
+
+  if (Array.isArray(value)) {
+    return (
+      <div class="node">
+        <div class="node__name">{path}</div>
+        <div class="node__value">
+          {value.map((v, i) => (
+            <Node path={`${path}/${i}`} />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div class="node">
+      <div class="node__name">{path}</div>
+      <div class="node__value">{value}</div>
+    </div>
+  );
+};
+
+export default function ({ path }) {
+  path = path || '';
+  return (
+    <>
+      <Header />
+      <div class="main-view" id="settings">
+        <div class="centered-container">
+          <h2>{t('explorer')}</h2>
+          <div class="explorer">
+            <Node path={'notifications/lastOpened'} />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}