rm some jquery

src/js/Helpers.tsx

@@ -1,8 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { bech32 } from 'bech32';
-import $ from 'jquery';
 import _ from 'lodash';
-import throttle from 'lodash/throttle';
 
 import Key from './nostr/Key';
 import { language } from './translations/Translation.mjs';
@@ -271,14 +269,6 @@ export default {
     });
   },
 
-  scrollToMessageListBottom: throttle(() => {
-    if ($('#message-view')[0]) {
-      $('#message-view').scrollTop(
-        $('#message-view')[0].scrollHeight - $('#message-view')[0].clientHeight,
-      );
-    }
-  }, 100),
-
   getMyProfileLink(): string {
     const user = existingIrisToAddress.name || Key.toNostrBech32Address(Key.getPubKey(), 'npub');
     return this.buildURL(user);

src/js/components/LanguageSelector.tsx

@@ -1,5 +1,4 @@
 import { LanguageIcon } from '@heroicons/react/24/solid';
-import $ from 'jquery';
 
 import {
   AVAILABLE_LANGUAGE_KEYS,
@@ -7,11 +6,10 @@ import {
   language,
 } from '../translations/Translation.mjs';
 
-function onLanguageChange(e: Event): void {
-  const target = e.target as HTMLSelectElement;
-  const l = $(target).val();
-  if (AVAILABLE_LANGUAGE_KEYS.indexOf(l as string) >= 0) {
-    localStorage.setItem('language', l as string);
+function onLanguageChange(e): void {
+  const selectedLanguage = e.target.value;
+  if (AVAILABLE_LANGUAGE_KEYS.includes(selectedLanguage)) {
+    localStorage.setItem('language', selectedLanguage);
     location.reload();
   }
 }
@@ -19,9 +17,11 @@ function onLanguageChange(e: Event): void {
 const LanguageSelector = () => (
   <div className="flex flex-row w-full justify-center items-center">
     <LanguageIcon width={24} />
-    <select className="input rounded-full" onChange={(e) => onLanguageChange(e)} value={language}>
+    <select className="input rounded-full" onChange={onLanguageChange} value={language}>
       {Object.keys(AVAILABLE_LANGUAGES).map((l) => (
-        <option value={l}>{AVAILABLE_LANGUAGES[l]}</option>
+        <option key={l} value={l}>
+          {AVAILABLE_LANGUAGES[l]}
+        </option>
       ))}
     </select>
   </div>

src/js/components/PrivateMessage.tsx

@@ -1,5 +1,4 @@
 import { memo } from 'react';
-import $ from 'jquery';
 import { validateEvent, verifySignature } from 'nostr-tools';
 import { useEffect, useState } from 'preact/hooks';
 import { route } from 'preact-router';
@@ -26,14 +25,6 @@ const PrivateMessage = ({ event, selfAuthored, showName, torrentId }: Props) =>
   const [checked, setChecked] = useState(false);
 
   useEffect(() => {
-    $('a').click((e) => {
-      const href = $(e.target).attr('href');
-      if (href && href.indexOf('https://iris.to/') === 0) {
-        e.preventDefault();
-        route(href.replace('https://iris.to/', ''));
-      }
-    });
-
     let initialText = text;
     if (!initialText) {
       Key.decryptMessage(event, (decryptedText) => {

src/js/components/create/CreateNoteForm.tsx

@@ -124,15 +124,10 @@ function CreateNoteForm({
   );
 
   return (
-    <form
-      autoComplete="off"
-      className={`message-form ${className || ''} public`}
-      onSubmit={(e) => onMsgFormSubmit(e)}
-    >
+    <form autoComplete="off" className={className || ''} onSubmit={(e) => onMsgFormSubmit(e)}>
       <input
-        name="attachment-input"
         type="file"
-        className="hidden attachment-input"
+        className="hidden"
         accept="image/*, video/*, audio/*"
         multiple
         onChange={attachmentsChanged}
@@ -151,7 +146,7 @@ function CreateNoteForm({
       />
       <Show when={!waitForFocus || focused}>
         <div className="flex items-center justify-between mt-4">
-          <button type="button" className="attach-file-btn btn" onClick={attachFileClicked}>
+          <button type="button" className="btn" onClick={attachFileClicked}>
             {Icons.attach}
           </button>
           <button type="submit" className="btn btn-primary">

src/js/components/events/buttons/ReactionButtons.tsx

@@ -1,5 +1,4 @@
 import { ChatBubbleOvalLeftIcon } from '@heroicons/react/24/outline';
-import $ from 'jquery';
 import { memo } from 'preact/compat';
 import { useEffect, useState } from 'preact/hooks';
 import { route } from 'preact-router';
@@ -32,7 +31,7 @@ const ReactionButtons = (props) => {
 
   function replyBtnClicked() {
     if (props.standalone) {
-      $(document).find('textarea').focus();
+      document.querySelector('textarea')?.focus();
     } else {
       route(`/${Key.toNostrBech32Address(props.event.id, 'note')}`);
     }

src/js/views/chat/ChatList.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useRef, useState } from 'react';
-import $ from 'jquery';
 
 import localState from '../../LocalState';
 import Key from '../../nostr/Key';
@@ -21,13 +20,14 @@ const ChatList = ({ activeChat, className }) => {
   const [chats, setChats] = useState(new SortedMap<string, any>(sortChats) as any);
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [_renderCount, setRenderCount] = useState(0); // new state variable
+  const [showNotificationsPrompt, setShowNotificationsPrompt] = useState(false);
   const chatListRef = useRef(null as any);
 
   const enableDesktopNotifications = () => {
     if (Notification) {
       Notification.requestPermission().then((permission) => {
         if (permission === 'granted' || permission === 'denied') {
-          $('#enable-notifications-prompt').slideUp();
+          setShowNotificationsPrompt(false);
         }
         // TODO: subscribe to web push if permission is granted.
       });
@@ -57,16 +57,6 @@ const ChatList = ({ activeChat, className }) => {
       }),
     );
 
-    /*
-    unsubs.push(
-      localState.get('groups').map((group, localKey) => {
-        if (!(group && localKey)) return;
-        group.eventIds = new Map();
-        setGroups((prevGroups) => new Map(prevGroups.set(localKey, group)));
-      }),
-    );
-     */
-
     return () => unsubs.forEach((unsub) => unsub());
   }, []);
 
@@ -77,7 +67,7 @@ const ChatList = ({ activeChat, className }) => {
       className={`md:border-r flex flex-shrink-0 border-neutral-800 overflow-x-hidden overflow-y-auto md:px-0 w-full md:w-64 ${className}`}
       ref={chatListRef}
     >
-      <div id="enable-notifications-prompt" className="hidden" onClick={enableDesktopNotifications}>
+      <div className={showNotificationsPrompt ? '' : 'hidden'} onClick={enableDesktopNotifications}>
         <div className="title">{t('get_notified_new_messages')}</div>
         <div>
           <a>{t('turn_on_desktop_notifications')}</a>

src/js/views/chat/ChatMessageForm.tsx

@@ -97,7 +97,7 @@ const ChatMessageForm: React.FC<ChatMessageFormProps> = ({
   return (
     <form
       autoComplete="off"
-      className={`flex flex-none flex-row gap-2 p-2 message-form sticky w-full bottom-0 w-96 max-w-screen bg-black ${
+      className={`flex flex-none flex-row gap-2 p-2 sticky w-full bottom-0 w-96 max-w-screen bg-black ${
         classProp || ''
       }`}
       onSubmit={handleSubmit}

src/js/views/chat/ChatMessages.tsx

@@ -23,6 +23,14 @@ import { addGroup, sendSecretInvite } from './NewChat';
 
 export type DecryptedEvent = Event & { text?: string };
 
+const scrollToMessageListBottom = throttle(() => {
+  if ($('#message-view')[0]) {
+    $('#message-view').scrollTop(
+      $('#message-view')[0].scrollHeight - $('#message-view')[0].clientHeight,
+    );
+  }
+}, 100);
+
 function ChatMessages({ id }) {
   const ref = useRef(null as any);
   const messages = useRef(new SortedMap<string, DecryptedEvent>('created_at'));
@@ -295,12 +303,12 @@ function ChatMessages({ id }) {
 
   useEffect(() => {
     if (stickToBottom) {
-      Helpers.scrollToMessageListBottom();
+      scrollToMessageListBottom();
     }
 
     $('.msg-content img')
       .off('load')
-      .on('load', () => stickToBottom && Helpers.scrollToMessageListBottom());
+      .on('load', () => stickToBottom && scrollToMessageListBottom());
   }, [stickToBottom]);
 
   return (