feat: Added avatar preview

src/components/GridView/DetailsAuthor.tsx

@@ -20,16 +20,14 @@ const DetailsAuthor = ({ profile, npub, setActiveImageIdx }: DetailsAuthorProps)
         npub && nav({ ...currentSettings, tags: [], npubs: [npub] });
       }}
     >
-      <>
-        <div
-          className="author-image"
-          style={{
-            backgroundImage: profile?.image ? `url(${createImgProxyUrl(profile?.image, 80, 80)})` : 'none',
-          }}
-        ></div>
+      <div
+        className="author-image"
+        style={{
+          backgroundImage: profile?.image ? `url(${createImgProxyUrl(profile?.image, 80, 80)})` : 'none',
+        }}
+      ></div>
 
-        {profile?.displayName || profile?.name}
-      </>
+      {profile?.displayName || profile?.name}
     </div>
   );
 };

src/components/GridView/DetailsView.css

@@ -61,6 +61,7 @@
   max-width: 100%;
   max-height: 90vh;
   border-radius: 12px;
+  background-color: #444;
 }
 
 .detail-description {

src/components/GridView/DetailsView.tsx

@@ -1,7 +1,7 @@
 import { NostrImage } from '../nostrImageDownload';
 import './DetailsView.css';
 import { useNDK } from '@nostr-dev-kit/ndk-react';
-import DetailsAuthor from './Author';
+import DetailsAuthor from './DetailsAuthor';
 import { useMemo } from 'react';
 import uniq from 'lodash/uniq';
 import useNav from '../../utils/useNav';

src/components/Settings.tsx

@@ -4,6 +4,8 @@ import useNav from '../utils/useNav';
 import CloseButton from './CloseButton/CloseButton';
 import TagEditor, { Tag } from './TagEditor';
 import { defaultHashTags } from './env';
+import { useNDK } from '@nostr-dev-kit/ndk-react';
+import { createImgProxyUrl } from './nostrImageDownload';
 
 type SettingsProps = {
   onClose: () => void;
@@ -13,6 +15,7 @@ type Mode = 'all' | 'tags' | 'user';
 
 const SettingsDialog = ({ onClose }: SettingsProps) => {
   const { nav, currentSettings } = useNav();
+  const { getProfile } = useNDK();
   const [showNsfw, setShowNsfw] = useState(currentSettings.showNsfw || false);
   const [selectedTags, setSelectedTags] = useState<Tag[]>(
     currentSettings.tags.map(tag => ({ name: tag, selected: true, deletable: false }))
@@ -40,9 +43,11 @@ const SettingsDialog = ({ onClose }: SettingsProps) => {
     onClose();
   };
 
+  const activeProfile = npubs.length > 0 ? getProfile(npubs[0]) : undefined;
+
   return (
     <div className="settings" onClick={e => e.stopPropagation()}>
-      <h2>Settings</h2>
+      <h2>Browse settings</h2>
       <CloseButton onClick={onClose}></CloseButton>
 
       <div className="settings-content">
@@ -75,6 +80,19 @@ const SettingsDialog = ({ onClose }: SettingsProps) => {
               onKeyDown={e => e.stopPropagation()}
               onKeyUp={e => e.stopPropagation()}
             />
+            {activeProfile && (
+              <div className="details-author">
+                <div
+                  className="author-image"
+                  style={{
+                    backgroundImage: activeProfile?.image
+                      ? `url(${createImgProxyUrl(activeProfile?.image, 80, 80)})`
+                      : 'none',
+                  }}
+                ></div>
+                {activeProfile?.displayName || activeProfile?.name}
+              </div>
+            )}
           </>
         )}
         <div className="content-warning">

src/components/SlideShow.tsx

@@ -26,11 +26,9 @@ import IconGrid from './Icons/IconGrid';
 import useNav from '../utils/useNav';
 /*
 FEATURES:
-- fix issues with user/settings tags not being clickable
-- add option to view global without filter 
-- add radiobutton or tabs to choose either user or tag filter
 - improve mobile support
 - widescreen mobile details view should be 2 columns
+- improve large grid performance by adding images on scroll
 - how to get back from a filtered user/tag to the full feed?
 - always update title (grid and slideshow, maybe details too?)
 - add respost/reply filter to the settings dialog