fn components

src/js/Main.tsx

@@ -122,7 +122,6 @@ class Main extends Component<Props, ReactState> {
               <SearchFeed path="/search/:keyword" />
               <Login path="/login" fullScreen={true} />
               <Notifications path="/notifications" />
-              <Chat path="/chat/hashtag/:hashtag?" />
               <Chat path="/chat/:id?" />
               <Note path="/post/:id+" />
               <About path="/about" />

src/js/nostr/PubSub.ts

@@ -81,13 +81,13 @@ localState.get('lastOpened').once((lo) => {
 const reconnect = () => {
   if (Date.now() - lastResubscribed > 60 * 1000) {
     lastResubscribed = Date.now();
-    relayPool.reconnect();
+    //relayPool.reconnect();
   }
 };
 
 document.addEventListener('visibilitychange', () => {
   if (document.visibilityState === 'visible') {
-    //reconnect();
+    reconnect();
   }
 });
 document.addEventListener('online', reconnect);

src/js/views/KeyConverter.tsx

@@ -17,41 +17,37 @@ const KeyConverter: React.FC<RouteProps> = () => {
   return (
     <>
       <Header />
-      <div class="main-view" id="settings">
-        <div class="centered-container mobile-padding15">
-          <h2>{t('key_converter')}</h2>
-          <p>
+      <div className="min-h-screen" id="settings">
+        <div className="flex flex-col items-center justify-center py-5 px-4 sm:px-8">
+          <h2 className="text-2xl font-bold mb-5">{t('key_converter')}</h2>
+          <div className="w-full max-w-md">
             <input
               type="text"
-              style={{ width: '100%' }}
+              className="input input-bordered w-full text-center"
               placeholder="Enter hex or bech32 key"
               onInput={(e) => setKey((e.target as HTMLInputElement).value?.trim())}
             />
-          </p>
+          </div>
           {key &&
             hex &&
             (key === hex ? (
               <>
-                <p>
-                  <b>note:</b> {note}
+                <p className="mt-3">
+                  <span className="font-bold">note:</span> {note}
                 </p>
-                <p>
-                  <b>npub:</b> {npub}
+                <p className="mt-1">
+                  <span className="font-bold">npub:</span> {npub}
                 </p>
-                <p>
-                  <b>nsec:</b> {nsec}
+                <p className="mt-1">
+                  <span className="font-bold">nsec:</span> {nsec}
                 </p>
               </>
             ) : (
-              <p>
-                <b>hex:</b> {hex}
+              <p className="mt-3">
+                <span className="font-bold">hex:</span> {hex}
               </p>
             ))}
-          {key && !hex && (
-            <p>
-              <b>Invalid key</b>
-            </p>
-          )}
+          {key && !hex && <p className="mt-3 text-red-500 font-bold">Invalid key</p>}
         </div>
       </div>
     </>

src/js/views/Note.tsx

@@ -1,6 +1,8 @@
 import { useEffect } from 'preact/hooks';
 import { route } from 'preact-router';
 
+import View from '@/views/View.tsx';
+
 import CreateNoteForm from '../components/create/CreateNoteForm';
 import EventComponent from '../components/events/EventComponent';
 import Key from '../nostr/Key';
@@ -38,7 +40,11 @@ const Note = (props) => {
       />
     );
   }
-  return <div className="w-full">{content}</div>;
+  return (
+    <View>
+      <div className="w-full">{content}</div>
+    </View>
+  );
 };
 
 export default Note;

src/js/views/View.tsx

@@ -60,8 +60,8 @@ const View = ({ children, hideHeader = false, hideSideBar = false }) => {
   };
 
   useEffect(() => {
-    window.addEventListener('scroll', saveScrollPosition);
     restoreScrollPosition();
+    window.addEventListener('scroll', saveScrollPosition);
 
     return () => {
       if (observerRef.current) {

src/js/views/chat/Chat.tsx

@@ -10,7 +10,12 @@ import ChatMessages from './ChatMessages';
 import Header from './Header';
 import NewChat, { addChatWithInputKey } from './NewChat';
 
-const Chat = ({ id }) => {
+type Props = {
+  id?: string;
+  path: string;
+};
+
+const Chat: React.FC<Props> = ({ id }) => {
   useEffect(() => {
     const hashId = window.location.hash.substr(1);
     if (hashId && hashId.startsWith('nsec')) {
@@ -40,7 +45,7 @@ const Chat = ({ id }) => {
   };
 
   return (
-    <View>
+    <View hideHeader={true} hideSideBar={true}>
       <div className="flex flex-col h-full max-h-screen">
         <Header key={id} activeChat={id} />
         <div className="flex flex-row flex-grow overflow-hidden">

src/js/views/feeds/Search.tsx

@@ -1,10 +1,16 @@
+import React from 'react';
 import { useMemo } from 'preact/hooks';
 
 import FeedComponent from '@/components/feed/Feed';
 
 import View from '../View';
 
-const Search = ({ keyword }) => {
+type Props = {
+  path: string;
+  keyword?: string;
+};
+
+const Search: React.FC<Props> = ({ keyword }) => {
   const filterOptions = useMemo(() => {
     const filter = { kinds: [1], keywords: [keyword || ''] };