From b222f3786f19a24a7611674160392f6ca538d01c Mon Sep 17 00:00:00 2001
From: Martti Malmi <sirius@iki.fi>
Date: Wed, 28 Jun 2023 11:18:10 +0300
Subject: [PATCH] profile tab link fix

---
 src/js/components/Header.tsx      |  1 +
 src/js/components/events/Note.tsx |  4 ++--
 src/js/components/modal/Modal.tsx |  1 -
 src/js/views/Profile.tsx          | 25 ++++++++++++++-----------
 4 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/js/components/Header.tsx b/src/js/components/Header.tsx
index 7c6406a1..0bb2dd5c 100644
--- a/src/js/components/Header.tsx
+++ b/src/js/components/Header.tsx
@@ -73,6 +73,7 @@ export default class Header extends Component {
     localState.get('unseenMsgsTotal').on(this.inject());
     localState.get('unseenNotificationCount').on(this.inject());
     localState.get('showConnectedRelays').on(this.inject());
+    localState.get('activePubKey').on(this.inject());
     localState.get('activeRoute').on(
       this.sub((activeRoute) => {
         this.setState({
diff --git a/src/js/components/events/Note.tsx b/src/js/components/events/Note.tsx
index eb323896..de9ffc39 100644
--- a/src/js/components/events/Note.tsx
+++ b/src/js/components/events/Note.tsx
@@ -324,8 +324,8 @@ const Note = ({
             {(replyingToUsers?.length && !isQuoting && renderReplyingTo()) || null}
             {standalone && renderHelmet()}
             {meta.torrentId && <Torrent torrentId={meta.torrentId} autopause={!standalone} />}
-            {text?.length > 0 && (
-              <div className={`whitespace-pre-wrap break-all py-2 ${emojiOnly && 'text-2xl'}`}>
+            {text?.length > 0 && ( // TODO: remove whitespace-pre-wrap, replace \n with <br />
+              <div className={`whitespace-pre-wrap break-words py-2 ${emojiOnly && 'text-2xl'}`}>
                 {text}
                 {translatedText && (
                   <p>
diff --git a/src/js/components/modal/Modal.tsx b/src/js/components/modal/Modal.tsx
index 49711a0d..5a8dc67b 100644
--- a/src/js/components/modal/Modal.tsx
+++ b/src/js/components/modal/Modal.tsx
@@ -25,7 +25,6 @@ const Overlay = styled.div`
   align-items: center;
   overflow-y: auto;
   overflow-x: hidden;
-  padding: 20px 0;
 `;
 
 const ModalContentContainer = styled.div<{ width?: string; height?: string }>`
diff --git a/src/js/views/Profile.tsx b/src/js/views/Profile.tsx
index aefd9385..039185b1 100644
--- a/src/js/views/Profile.tsx
+++ b/src/js/views/Profile.tsx
@@ -249,24 +249,25 @@ class Profile extends View {
   }
 
   renderTabs() {
+    const currentProfileUrl = window.location.pathname.split('/')[1];
+    const path = window.location.pathname;
+
+    const linkClass = (href) =>
+      path === href ? 'btn btn-sm btn-primary' : 'btn btn-sm btn-neutral';
+
     return html`
-      <div className="flex mx-2 md:mx-0 gap-2 mb-4 overflow-x-scroll">
-        <${Link}
-          className="btn btn-sm btn-neutral"
-          activeClassName="btn-primary"
-          href="/${this.state.nostrAddress || this.state.npub}"
+      <div class="flex mx-2 md:mx-0 gap-2 mb-4 overflow-x-scroll">
+        <${Link} className="${linkClass('/' + currentProfileUrl)}" href="/${currentProfileUrl}"
           >${t('posts')} ${this.state.noPosts ? '(0)' : ''}<//
         >
         <${Link}
-          className="btn btn-sm btn-neutral"
-          activeClassName="btn-primary"
-          href="/${this.state.nostrAddress || this.state.npub}/replies"
+          className="${linkClass('/' + currentProfileUrl + '/replies')}"
+          href="/${currentProfileUrl}/replies"
           >${t('posts')} & ${t('replies')} ${this.state.noReplies ? '(0)' : ''}<//
         >
         <${Link}
-          className="btn btn-sm btn-neutral"
-          activeClassName="btn-primary"
-          href="/${this.state.nostrAddress || this.state.npub}/likes"
+          className="${linkClass('/' + currentProfileUrl + '/likes')}"
+          href="/${currentProfileUrl}/likes"
           >${t('likes')} ${this.state.noLikes ? '(0)' : ''}<//
         >
       </div>
@@ -464,6 +465,7 @@ class Profile extends View {
 
   loadProfile(hexPub: string, nostrAddress?: string) {
     const isMyProfile = hexPub === Key.getPubKey();
+    localState.get('activePubKey').put(hexPub);
     this.setState({ isMyProfile });
     this.followedUsers = new Set();
     this.followers = new Set();
@@ -479,6 +481,7 @@ class Profile extends View {
   componentWillUnmount() {
     super.componentWillUnmount();
     this.unsub?.();
+    localState.get('activePubKey').put(null);
   }
 
   componentDidUpdate(_prevProps, prevState) {