fix: zap comments / expand stream mobile

src/element/chat/chat-message.tsx

@@ -1,7 +1,7 @@
 import { SnortContext, useEventReactions, useReactions, useUserProfile } from "@snort/system-react";
 import { EventKind, NostrLink, TaggedNostrEvent } from "@snort/system";
 import React, { Suspense, lazy, useContext, useMemo, useRef, useState } from "react";
-import { useHover, useIntersectionObserver, useOnClickOutside } from "usehooks-ts";
+import { useHover, useOnClickOutside } from "usehooks-ts";
 import { dedupe } from "@snort/shared";
 
 const EmojiPicker = lazy(() => import("../emoji-picker"));
@@ -43,9 +43,6 @@ export function ChatMessage({
 }) {
   const system = useContext(SnortContext);
   const ref = useRef<HTMLDivElement | null>(null);
-  const inView = useIntersectionObserver({
-    freezeOnceVisible: true,
-  });
   const emojiRef = useRef(null);
   const link = NostrLink.fromEvent(ev);
   const isHovering = useHover(ref);
@@ -53,7 +50,7 @@ export function ChatMessage({
   const [showZapDialog, setShowZapDialog] = useState(false);
   const [showEmojiPicker, setShowEmojiPicker] = useState(false);
   const login = useLogin();
-  const profile = useUserProfile(inView?.isIntersecting ? ev.pubkey : undefined);
+  const profile = useUserProfile(ev.pubkey);
   const shouldShowMuteButton = ev.pubkey !== streamer && ev.pubkey !== login?.pubkey;
   const zapTarget = profile?.lud16 ?? profile?.lud06;
   const related = useReactions("reactions", [link], undefined, true);
@@ -163,7 +160,7 @@ export function ChatMessage({
             })}
           </div>
         )}
-        {ref.current && (
+        {ref.current && isHovering && (
           <div
             className="fixed rounded-lg p-2 bg-layer-1 border border-layer-2 flex gap-1 z-10"
             style={{

src/element/chat/live-chat.tsx

@@ -150,6 +150,22 @@ export function LiveChat({
 
   return (
     <div className={classNames("flex flex-col gap-1", className)} style={height ? { height: `${height}px` } : {}}>
+      {adjustLayout && (
+        <div
+          className="min-h-2 my-1"
+          onClick={() => {
+            streamContext.update(c => {
+              c.showDetails = !c.showDetails;
+              return { ...c };
+            });
+            layoutContext.update(c => {
+              c.showHeader = !c.showHeader;
+              return { ...c };
+            });
+          }}>
+          <div className="h-2 bg-layer-2 rounded-full w-10 mx-auto"></div>
+        </div>
+      )}
       {(showTopZappers ?? true) && reactions.zaps.length > 0 && (
         <div>
           <div className="flex gap-1 overflow-x-auto scrollbar-hidden">
@@ -161,32 +177,7 @@ export function LiveChat({
       <div
         className={classNames("flex flex-col-reverse grow gap-2 overflow-y-auto", {
           "scrollbar-hidden": !(showScrollbar ?? true),
-        })}
-        onScroll={e => {
-          if (adjustLayout) {
-            const t = e.target as HTMLDivElement;
-            const atEnd = t.scrollTop >= 1;
-            if (atEnd) {
-              streamContext.update(c => {
-                c.showDetails = false;
-                return { ...c };
-              });
-              layoutContext.update(c => {
-                c.showHeader = false;
-                return { ...c };
-              });
-            } else {
-              streamContext.update(c => {
-                c.showDetails = true;
-                return { ...c };
-              });
-              layoutContext.update(c => {
-                c.showHeader = true;
-                return { ...c };
-              });
-            }
-          }
-        }}>
+        })}>
         {filteredEvents.map(a => {
           switch (a.kind) {
             case -1:

src/element/goal.tsx

@@ -39,16 +39,16 @@ export function Goal({ ev, confetti }: { ev: NostrEvent; confetti?: boolean }) {
   const goalContent = (
     <div className="flex flex-col cursor-pointer">
       {ev.content.length > 0 && <p>{ev.content}</p>}
-      <div className="relative h-10">
-        <div className="absolute bg-layer-2 h-3 rounded-full my-4 w-full"></div>
+      <div className="relative h-7">
+        <div className="absolute bg-layer-2 h-3 rounded-full my-2 w-full"></div>
         <div
-          className="absolute bg-zap h-3 rounded-full text-xs font-medium my-4 leading-3 pl-1"
+          className="absolute bg-zap h-3 rounded-full text-xs font-medium my-2 leading-3 pl-1"
           style={{
             width: `${progress}%`,
           }}>
           {soFar > 0 ? formatSats(soFar) : ""}
         </div>
-        <div className="absolute text-right text-xs right-1 font-medium my-4 leading-3">
+        <div className="absolute text-right text-xs right-1 font-medium my-2 leading-3">
           <FormattedMessage defaultMessage="Goal: {amount}" id="QceMQZ" values={{ amount: formatSats(goalAmount) }} />
         </div>
       </div>

src/hooks/live-chat.tsx

@@ -1,18 +0,0 @@
-import { NostrLink } from "@snort/system";
-import { useReactions } from "@snort/system-react";
-import { LIVE_STREAM_CHAT, LIVE_STREAM_CLIP, LIVE_STREAM_RAID } from "@/const";
-
-export function useLiveChatFeed(link?: NostrLink, limit?: number) {
-  const reactions = useReactions(
-    `live:${link?.id}:${link?.author}:reactions`,
-    [],
-    rb => {
-      if (link) {
-        const aTag = `${link.kind}:${link.author}:${link.id}`;
-        rb.withFilter().kinds([LIVE_STREAM_CHAT, LIVE_STREAM_RAID, LIVE_STREAM_CLIP]).tag("a", [aTag]).limit(limit);
-      }
-    },
-    true,
-  );
-  return { messages, reactions: reactions ?? [] };
-}