From 8fd3e13d41687449e627bc3fbe8ade93b87fd84f Mon Sep 17 00:00:00 2001
From: Martti Malmi <sirius@iki.fi>
Date: Mon, 17 Apr 2023 10:23:19 +0300
Subject: [PATCH] wip explorer, fix new post modal layout

---
 src/css/style.css                  |  2 +-
 src/js/Main.tsx                    |  4 ++-
 src/js/components/modal/Modal.tsx  | 14 ++++++--
 src/js/lib/nostr-tools/path.ts     | 12 +++++++
 src/js/nostr/Session.ts            |  1 +
 src/js/views/explorer/Explorer.tsx | 51 ++++++++++++++++++++++++++++++
 6 files changed, 79 insertions(+), 5 deletions(-)
 create mode 100644 src/js/views/explorer/Explorer.tsx

diff --git a/src/css/style.css b/src/css/style.css
index 0a3849fa..af951132 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -277,7 +277,7 @@ input {
 
 img,
 video {
-  max-width: 95vw;
+  max-width: 95%;
   max-height: 95vh;
 }
 
diff --git a/src/js/Main.tsx b/src/js/Main.tsx
index 4b8c7728..1f410f46 100644
--- a/src/js/Main.tsx
+++ b/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" />
diff --git a/src/js/components/modal/Modal.tsx b/src/js/components/modal/Modal.tsx
index 56a2537b..f9ed2824 100644
--- a/src/js/components/modal/Modal.tsx
+++ b/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>
   );
 };
diff --git a/src/js/lib/nostr-tools/path.ts b/src/js/lib/nostr-tools/path.ts
index f562ad91..29778bea 100644
--- a/src/js/lib/nostr-tools/path.ts
+++ b/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: () => {
diff --git a/src/js/nostr/Session.ts b/src/js/nostr/Session.ts
index 956e1d15..0b982643 100644
--- a/src/js/nostr/Session.ts
+++ b/src/js/nostr/Session.ts
@@ -20,6 +20,7 @@ try {
 }
 
 const Session = {
+  public: undefined,
   async logOut() {
     route('/');
     /*
diff --git a/src/js/views/explorer/Explorer.tsx b/src/js/views/explorer/Explorer.tsx
new file mode 100644
index 00000000..1d2d7d3c
--- /dev/null
+++ b/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>
+    </>
+  );
+}