feat: Added header to grid view

src/components/AuthorProfile.tsx

@@ -22,8 +22,7 @@ const AuthorProfile = ({ src, author, npub, setViewMode }: AvatarImageProps) =>
         npub && nav({ ...currentSettings, tags: [], npubs: [npub] });
       }}
     >
-      <div>
-        {avatarLoaded && (
+      {avatarLoaded && (
           <div
             className="author-image"
             style={{
@@ -31,8 +30,7 @@ const AuthorProfile = ({ src, author, npub, setViewMode }: AvatarImageProps) =>
             }}
           ></div>
         )}
-        {author}
-      </div>
+        <span className="author-name">{author}</span>
     </div>
   );
 };

src/components/GridView/DetailsView.css

@@ -195,6 +195,7 @@
   }
 }
 
+
 @media screen and (max-width: 768px) {
   .details {
     overflow-y: scroll;
@@ -212,10 +213,7 @@
     margin: 0px;
   }
   .details-author .author-name {
-    width: 17em;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    max-height: 3em;
+    display: none;
   }
   .details-actions {
     position: fixed;

src/components/GridView/GridView.css

@@ -14,6 +14,7 @@
   flex-direction: column;
   align-items: start;
   height: 100dvh;
+  overflow: scroll;
 }
 
 .imagegrid {
@@ -22,7 +23,6 @@
   grid-gap: 1rem;
   padding: 1rem;
   width: 100vw;
-  overflow: scroll;
   box-sizing: border-box;
 }
 
@@ -62,3 +62,20 @@
   filter: brightness(1.1);
   outline: 1px solid #fff;
 }
+
+.profile-header {
+  padding:2em;
+  padding-bottom: 1em;
+}
+
+.profile-header .author-info {
+  position: relative;
+  bottom: initial;
+  left: initial;
+}
+
+@media screen and (max-width: 768px) {
+  .profile-header .author-info .author-name {
+    display: block;
+  }
+}

src/components/GridView/ScrollView.tsx

@@ -16,7 +16,6 @@ type ScrollViewProps = {
 };
 
 const ScrollView = ({ settings, images, currentImage, setCurrentImage, setViewMode }: ScrollViewProps) => {
-
   const sortedImages = useMemo(
     () => images.sort((a, b) => (b.timestamp && a.timestamp ? b.timestamp - a.timestamp : 0)), // sort by timestamp descending
     [images] // settings is not used here, but we need to include it to trigger a re-render when it changes
@@ -29,17 +28,19 @@ const ScrollView = ({ settings, images, currentImage, setCurrentImage, setViewMo
     }
   }, []);
 
-  const activeImage = useMemo(() => currentImage ? sortedImages[currentImage] : undefined, [sortedImages, currentImage]);
+  const activeImage = useMemo(
+    () => (currentImage ? sortedImages[currentImage] : undefined),
+    [sortedImages, currentImage]
+  );
   const { activeProfile, profileNpub, title } = useProfile(settings, activeImage);
 
   console.log(JSON.stringify(activeProfile));
   return (
-    
     <div className="scrollview" tabIndex={0}>
       <Helmet>
         <title>{title}</title>
       </Helmet>
-     
+
       {sortedImages.map((image, idx) => (
         <ScrollImage
           key={image.url}

src/components/GridView/index.tsx

@@ -81,6 +81,22 @@ const GridView = ({ settings, images, currentImage, setCurrentImage, setViewMode
         <DetailsView images={sortedImages} currentImage={currentImage} setCurrentImage={setCurrentImage} />
       ) : null}
        */}
+      {activeProfile && (
+        <div className="profile-header">
+          <AuthorProfile
+            src={urlFix(activeProfile.image || '')}
+            author={activeProfile.displayName || activeProfile.name}
+            npub={activeProfile.npub}
+            setViewMode={setViewMode}
+          ></AuthorProfile>
+          {/*
+          <span>{activeProfile.banner}</span>
+          <span>{activeProfile.bio}</span>
+          {activeProfile.website}
+          */}
+        </div>
+      )}
+
       <div className="imagegrid">
         {sortedImages.map((image, idx) => (
           <GridImage
@@ -95,14 +111,6 @@ const GridView = ({ settings, images, currentImage, setCurrentImage, setViewMode
           ></GridImage>
         ))}
       </div>
-      {activeProfile && (
-        <AuthorProfile
-          src={urlFix(activeProfile.image || '')}
-          author={activeProfile.displayName || activeProfile.name}
-          npub={activeProfile.npub}
-          setViewMode={setViewMode}
-        ></AuthorProfile>
-      )}
     </div>
   );
 };

src/components/SlideShow.css

@@ -98,6 +98,8 @@
   animation-name: showImage;
 }
 
+
+
 .slide video {
   max-height: 100dvh;
   max-width: 100vw;
@@ -238,3 +240,9 @@
     width: 80vw;
   }
 }
+
+@media screen and (max-width: 768px) {
+  .author-name {
+    display: none;
+  }
+}

src/utils/globalState.tsx

@@ -1,3 +1,4 @@
+import { NostrImage } from '@/components/nostrImageDownload';
 import { NDKUserProfile } from '@nostr-dev-kit/ndk';
 import React, { createContext, useContext, useReducer } from 'react';
 
@@ -6,6 +7,7 @@ interface GlobalState {
   userNPub?: string;
   profile?: NDKUserProfile;
   showNavButtons: boolean;
+  activeImage?: NostrImage;
 }
 const initialState: GlobalState = {
   userNPub: undefined,