3rd column to more views

src/js/components/events/note/Note.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { debounce } from 'lodash';
 import { useEffect, useState } from 'preact/hooks';
 import { route } from 'preact-router';
@@ -14,19 +15,18 @@ import Content from './Content';
 
 const Note = ({
   event,
-  meta,
-  asInlineQuote,
-  isReply, // message that is rendered under a standalone message, separated by a small margin
-  isQuote, // message that connects to the next message with a line
-  isQuoting, // message that is under an isQuote message, no margin
-  showReplies,
-  showRepliedMsg,
-  standalone,
-  fullWidth,
+  meta = {} as any,
+  asInlineQuote = false,
+  isReply = false, // message that is rendered under a standalone message, separated by a small margin
+  isQuote = false, // message that connects to the next message with a line
+  isQuoting = false, // message that is under an isQuote message, no margin
+  showReplies = 0,
+  showRepliedMsg = false,
+  standalone = false,
+  fullWidth = false,
 }) => {
   const [replies, setReplies] = useState([] as string[]);
 
-  showReplies = showReplies || 0;
   if (!standalone && showReplies && replies.length) {
     isQuote = true;
   }
@@ -42,6 +42,24 @@ const Note = ({
     fullWidth = !isReply && !isQuoting && !isQuote && !asInlineQuote;
   }
 
+  const className = useMemo(() => {
+    const classNames = ['msg'];
+
+    if (standalone) {
+      classNames.push('standalone');
+    } else {
+      classNames.push(
+        'cursor-pointer transition-all ease-in-out duration-200 hover:bg-neutral-999',
+      );
+    }
+    if (isQuote) classNames.push('quote pb-2');
+    if (isQuoting) classNames.push('quoting pt-0');
+    if (asInlineQuote) classNames.push('inline-quote border-2 border-neutral-900 rounded-lg my-2');
+    if (fullWidth) classNames.push('full-width');
+
+    return classNames.join(' ');
+  }, [standalone, isQuote, isQuoting, asInlineQuote, fullWidth]);
+
   useEffect(() => {
     if (standalone) {
       return Events.getReplies(
@@ -63,8 +81,6 @@ const Note = ({
     }
   }, [event.id, standalone, showReplies]);
 
-  meta = meta || {};
-
   let rootMsg = Events.getEventRoot(event);
   if (!rootMsg) {
     rootMsg = meta.replyingTo;
@@ -88,24 +104,6 @@ const Note = ({
     route(`/${Key.toNostrBech32Address(event.id, 'note')}`);
   }
 
-  function getClassName() {
-    const classNames = ['msg'];
-
-    if (standalone) {
-      classNames.push('standalone');
-    } else {
-      classNames.push(
-        'cursor-pointer transition-all ease-in-out duration-200 hover:bg-neutral-999',
-      );
-    }
-    if (isQuote) classNames.push('quote pb-2');
-    if (isQuoting) classNames.push('quoting pt-0');
-    if (asInlineQuote) classNames.push('inline-quote border-2 border-neutral-900 rounded-lg my-2');
-    if (fullWidth) classNames.push('full-width');
-
-    return classNames.join(' ');
-  }
-
   const repliedMsg = (
     <Show when={meta.replyingTo && showRepliedMsg}>
       <EventComponent
@@ -133,7 +131,7 @@ const Note = ({
       {repliedMsg}
       <div
         key={event.id + 'note'}
-        className={`p-2 ${getClassName()}`}
+        className={`p-2 ${className}`}
         onClick={(e) => messageClicked(e)}
       >
         {showThreadBtn}

src/js/views/Feed.tsx

@@ -3,7 +3,6 @@ import OnboardingNotification from '../components/OnboardingNotification';
 import PublicMessageForm from '../components/PublicMessageForm';
 import { translate as t } from '../translations/Translation.mjs';
 
-import Search from './Search';
 import View from './View';
 
 class Feed extends View {
@@ -22,7 +21,7 @@ class Feed extends View {
     const path = this.props.index || 'msgs';
     return (
       <div className="flex flex-row">
-        <div className="flex flex-col w-full lg:w-2/3">
+        <div className="flex flex-col w-full">
           {this.props.keyword ? (
             <h2 className="text-2xl mb-2">
               {t('search')}: "{this.props.keyword}"
@@ -42,9 +41,6 @@ class Feed extends View {
             path={path}
           />
         </div>
-        <div className="sticky flex-col hidden lg:flex lg:w-1/3">
-          <Search focus={false} />
-        </div>
       </div>
     );
   }

src/js/views/View.tsx

@@ -5,6 +5,8 @@ import Component from '../BaseComponent';
 import ErrorBoundary from '../components/ErrorBoundary';
 import Header from '../components/Header';
 
+import Search from './Search';
+
 let isInitialLoad = true;
 const listener = function () {
   isInitialLoad = false;
@@ -22,12 +24,17 @@ abstract class View extends Component {
 
   render() {
     return (
-      <>
-        <Header />
-        <div class={this.class} id={this.id}>
-          <ErrorBoundary>{this.renderView()}</ErrorBoundary>
+      <div className="flex flex-row">
+        <div className="flex flex-col w-full lg:w-2/3">
+          <Header />
+          <div class={this.class} id={this.id}>
+            <ErrorBoundary>{this.renderView()}</ErrorBoundary>
+          </div>
         </div>
-      </>
+        <div className="sticky flex-col hidden lg:flex lg:w-1/3">
+          <Search focus={false} />
+        </div>
+      </div>
     );
   }