From a9c8fd9ba53b7f8ef3fcfe298d2c334812908142 Mon Sep 17 00:00:00 2001
From: Martti Malmi <sirius@iki.fi>
Date: Fri, 2 Feb 2024 10:47:44 +0200
Subject: [PATCH] img grid load more btn

---
 packages/app/src/Components/Collapsed.tsx      |  5 ++---
 packages/app/src/Components/Event/ShowMore.css | 18 ------------------
 packages/app/src/Components/Event/ShowMore.tsx | 10 ++++------
 packages/app/src/Components/Event/Thread.css   |  5 -----
 .../src/Components/Feed/TimelineFollows.tsx    |  5 +++--
 .../src/Pages/Notifications/Notifications.tsx  |  4 ++--
 6 files changed, 11 insertions(+), 36 deletions(-)
 delete mode 100644 packages/app/src/Components/Event/ShowMore.css

diff --git a/packages/app/src/Components/Collapsed.tsx b/packages/app/src/Components/Collapsed.tsx
index dd162eeb..7962b972 100644
--- a/packages/app/src/Components/Collapsed.tsx
+++ b/packages/app/src/Components/Collapsed.tsx
@@ -1,7 +1,6 @@
 import classNames from "classnames";
 import { ReactNode, useState } from "react";
 
-import ShowMore from "@/Components/Event/ShowMore";
 import Icon from "@/Components/Icons/Icon";
 
 interface CollapsedProps {
@@ -13,8 +12,8 @@ interface CollapsedProps {
 
 const Collapsed = ({ text, children, collapsed, setCollapsed }: CollapsedProps) => {
   return collapsed ? (
-    <div className="collapsed">
-      <ShowMore text={text} onClick={() => setCollapsed(false)} />
+    <div className="text-nostr-purple px-4 pb-3 cursor-pointer hover:underline" onClick={() => setCollapsed(false)}>
+      {text}
     </div>
   ) : (
     <div className="uncollapsed">{children}</div>
diff --git a/packages/app/src/Components/Event/ShowMore.css b/packages/app/src/Components/Event/ShowMore.css
deleted file mode 100644
index 7dbbcbbc..00000000
--- a/packages/app/src/Components/Event/ShowMore.css
+++ /dev/null
@@ -1,18 +0,0 @@
-.show-more {
-  background: none;
-  border: none;
-  color: var(--highlight);
-  font-weight: normal;
-}
-
-.show-more:hover {
-  color: var(--highlight);
-  background: none;
-  border: none;
-  font-weight: normal;
-  text-decoration: underline;
-}
-
-.show-more-container {
-  min-height: 40px;
-}
diff --git a/packages/app/src/Components/Event/ShowMore.tsx b/packages/app/src/Components/Event/ShowMore.tsx
index 84024705..7d82927b 100644
--- a/packages/app/src/Components/Event/ShowMore.tsx
+++ b/packages/app/src/Components/Event/ShowMore.tsx
@@ -1,5 +1,3 @@
-import "./ShowMore.css";
-
 import classNames from "classnames";
 import { useEffect } from "react";
 import { useInView } from "react-intersection-observer";
@@ -14,7 +12,7 @@ interface ShowMoreProps {
 const ShowMore = ({ text, onClick, className = "" }: ShowMoreProps) => {
   return (
     <div className="show-more-container">
-      <button className={classNames("show-more", className)} onClick={onClick}>
+      <button type="button" className={classNames("show-more", className)} onClick={onClick}>
         {text || <FormattedMessage defaultMessage="Show More" id="O8Z8t9" />}
       </button>
     </div>
@@ -23,7 +21,7 @@ const ShowMore = ({ text, onClick, className = "" }: ShowMoreProps) => {
 
 export default ShowMore;
 
-export function ShowMoreInView({ text, onClick, className }: ShowMoreProps) {
+export function AutoShowMore({ text, onClick, className }: ShowMoreProps) {
   const { ref, inView } = useInView({ rootMargin: "2000px" });
 
   useEffect(() => {
@@ -33,8 +31,8 @@ export function ShowMoreInView({ text, onClick, className }: ShowMoreProps) {
   }, [inView]);
 
   return (
-    <div className={classNames("show-more-container", className)} ref={ref}>
-      {text}
+    <div ref={ref}>
+      <ShowMore onClick={onClick} text={text} className={className} />
     </div>
   );
 }
diff --git a/packages/app/src/Components/Event/Thread.css b/packages/app/src/Components/Event/Thread.css
index 8002a39f..e3259604 100644
--- a/packages/app/src/Components/Event/Thread.css
+++ b/packages/app/src/Components/Event/Thread.css
@@ -85,11 +85,6 @@
   margin-right: 16px;
 }
 
-.thread-container .collapsed,
-.thread-container .show-more-container {
-  min-height: 48px;
-}
-
 .thread-container .hidden-note {
   padding-left: 48px;
 }
diff --git a/packages/app/src/Components/Feed/TimelineFollows.tsx b/packages/app/src/Components/Feed/TimelineFollows.tsx
index 4c68e733..3ac7e5f3 100644
--- a/packages/app/src/Components/Feed/TimelineFollows.tsx
+++ b/packages/app/src/Components/Feed/TimelineFollows.tsx
@@ -4,7 +4,7 @@ import { EventKind, NostrEvent, TaggedNostrEvent } from "@snort/system";
 import { ReactNode, useCallback, useMemo, useState } from "react";
 import { Link } from "react-router-dom";
 
-import { ShowMoreInView } from "@/Components/Event/ShowMore";
+import { AutoShowMore } from "@/Components/Event/ShowMore";
 import { DisplayAs, DisplayAsSelector } from "@/Components/Feed/DisplayAsSelector";
 import { TimelineRenderer } from "@/Components/Feed/TimelineRenderer";
 import useTimelineFeed, { TimelineFeedOptions, TimelineSubject } from "@/Feed/TimelineFeed";
@@ -100,10 +100,11 @@ const TimelineFollows = (props: TimelineFollowsProps) => {
         displayAs={displayAs}
       />
       {mainFeed.length > 0 && (
-        <ShowMoreInView
+        <AutoShowMore
           onClick={() => {
             feed.loadMore();
           }}
+          className="mx-3 my-4"
         />
       )}
     </>
diff --git a/packages/app/src/Pages/Notifications/Notifications.tsx b/packages/app/src/Pages/Notifications/Notifications.tsx
index 8e5a6c14..5e9212f9 100644
--- a/packages/app/src/Pages/Notifications/Notifications.tsx
+++ b/packages/app/src/Pages/Notifications/Notifications.tsx
@@ -4,7 +4,7 @@ import { unwrap } from "@snort/shared";
 import { NostrEvent, NostrLink, TaggedNostrEvent } from "@snort/system";
 import { lazy, Suspense, useEffect, useMemo } from "react";
 
-import { ShowMoreInView } from "@/Components/Event/ShowMore";
+import { AutoShowMore } from "@/Components/Event/ShowMore";
 import PageSpinner from "@/Components/PageSpinner";
 import { useNotificationsView } from "@/Feed/WorkerRelayView";
 import useLogin from "@/Hooks/useLogin";
@@ -63,7 +63,7 @@ export default function NotificationsPage({ onClick }: { onClick?: (link: NostrL
         {login.publicKey &&
           [...timeGrouped.entries()].map(([k, g]) => <NotificationGroup key={k} evs={g} onClick={onClick} />)}
 
-        <ShowMoreInView onClick={() => {}} />
+        <AutoShowMore onClick={() => {}} />
       </div>
     </>
   );