feat: top streamer zaps / mobile slide up modal

src/pages/category.tsx

@@ -1,6 +1,6 @@
 import CategoryLink from "@/element/category/category-link";
 import { CategoryTile } from "@/element/category/category-tile";
-import { CategoryZaps } from "@/element/category/zaps";
+import { CategoryTopZapsStreamer } from "@/element/category/top-streamers";
 import VideoGridSorted from "@/element/video-grid-sorted";
 import { EventKind, RequestBuilder } from "@snort/system";
 import { useRequestBuilder } from "@snort/system-react";
@@ -82,25 +82,17 @@ export default function Category() {
 
   const results = useRequestBuilder(sub);
   return (
-    <div className="px-2 p-4">
-      <div className="px-2 min-w-0">
-        <div className="flex gap-4 overflow-x-scroll scrollbar-hidden">
+    <div className="px-2 py-4">
+      <div className="min-w-0 w-[calc(100dvw-2rem)] overflow-x-scroll scrollbar-hidden">
+        <div className="flex gap-4">
           {AllCategories.map(a => (
             <CategoryLink key={a.id} id={a.id} name={a.name} icon={a.icon} />
           ))}
         </div>
       </div>
       {id && (
-        <div className="flex gap-4 py-8">
-          <CategoryTile
-            gameId={id}
-            showDetail={true}
-            extraDetail={
-              <div className="flex">
-                <CategoryZaps gameId={id} />
-              </div>
-            }
-          />
+        <div className="py-8">
+          <CategoryTile gameId={id} showDetail={true} extraDetail={<CategoryTopZapsStreamer gameId={id} />} />
         </div>
       )}
       <VideoGridSorted evs={results} showAll={true} />

src/pages/root.tsx

@@ -8,8 +8,8 @@ export function RootPage() {
 
   return (
     <div className="flex flex-col gap-6 p-4">
-      <div className="min-w-0 w-[calc(100dvw-2rem)]">
-        <div className="flex gap-4 overflow-x-scroll scrollbar-hidden">
+      <div className="min-w-0 w-[calc(100dvw-2rem)] overflow-x-scroll scrollbar-hidden">
+        <div className="flex gap-4 ">
           {AllCategories.filter(a => a.priority === 0).map(a => (
             <CategoryLink key={a.id} name={a.name} id={a.id} icon={a.icon} />
           ))}

src/pages/video.tsx

@@ -34,7 +34,7 @@ export function VideoPage({ link, evPreload }: { link: NostrLink; evPreload?: Ta
   const ev = useCurrentStreamFeed(link, true, evPreload);
   const host = getHost(ev);
   const [widePlayer, setWidePlayer] = useState(localStorage.getItem("wide-player") === "true");
-  const { title, summary, image, contentWarning, recording } = extractStreamInfo(ev);
+  const { title, summary, image, recording } = extractStreamInfo(ev);
   const profile = useUserProfile(host);
   const { proxy } = useImgProxy();
   const zapTarget = profile?.lud16 ?? profile?.lud06;