package.json

@@ -1,7 +1,7 @@
 {
   "name": "degmods.com",
   "private": true,
-  "version": "0.0.0-alpha",
+  "version": "0.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/components/ModsFilter.tsx

@@ -1,20 +1,16 @@
-import { useAppSelector, useLocalStorage } from 'hooks'
+import { useAppSelector } from 'hooks'
 import React from 'react'
+import { Dispatch, SetStateAction } from 'react'
 import { FilterOptions, ModeratedFilter, NSFWFilter, SortBy } from 'types'
-import { DEFAULT_FILTER_OPTIONS } from 'utils'
 
 type Props = {
-  author?: string | undefined
-  filterKey?: string | undefined
+  filterOptions: FilterOptions
+  setFilterOptions: Dispatch<SetStateAction<FilterOptions>>
 }
 
 export const ModFilter = React.memo(
-  ({ author, filterKey = 'filter' }: Props) => {
+  ({ filterOptions, setFilterOptions }: Props) => {
     const userState = useAppSelector((state) => state.user)
-    const [filterOptions, setFilterOptions] = useLocalStorage<FilterOptions>(
-      filterKey,
-      DEFAULT_FILTER_OPTIONS
-    )
 
     return (
       <div className='IBMSecMain'>
@@ -66,9 +62,9 @@ export const ModFilter = React.memo(
                       import.meta.env.VITE_REPORTING_NPUB
 
                     const isOwnProfile =
-                      author &&
+                      filterOptions.author &&
                       userState.auth &&
-                      userState.user?.pubkey === author
+                      userState.user?.pubkey === filterOptions.author
 
                     if (!(isAdmin || isOwnProfile)) return null
                   }

src/components/ProfileSection.tsx

@@ -14,7 +14,7 @@ import { appRoutes, getProfilePageRoute } from '../routes'
 import '../styles/author.css'
 import '../styles/innerPage.css'
 import '../styles/socialPosts.css'
-import { UserRelaysType } from '../types'
+import { UserProfile, UserRelaysType } from '../types'
 import {
   copyTextToClipboard,
   hexToNpub,
@@ -27,18 +27,37 @@ import { LoadingSpinner } from './LoadingSpinner'
 import { ZapPopUp } from './Zap'
 import placeholder from '../assets/img/DEGMods Placeholder Img.png'
 import { NDKEvent } from '@nostr-dev-kit/ndk'
-import { useProfile } from 'hooks/useProfile'
 
 type Props = {
   pubkey: string
 }
 
 export const ProfileSection = ({ pubkey }: Props) => {
+  const { findMetadata } = useNDKContext()
+  const [profile, setProfile] = useState<UserProfile>()
+
+  useDidMount(() => {
+    findMetadata(pubkey).then((res) => {
+      setProfile(res)
+    })
+  })
+
+  const displayName =
+    profile?.displayName || profile?.name || '[name not set up]'
+  const about = profile?.bio || profile?.about || '[bio not set up]'
+
   return (
     <div className='IBMSMSplitMainSmallSide'>
       <div className='IBMSMSplitMainSmallSideSecWrapper'>
         <div className='IBMSMSplitMainSmallSideSec'>
-          <Profile pubkey={pubkey} />
+          <Profile
+            pubkey={pubkey}
+            displayName={displayName}
+            about={about}
+            image={profile?.image}
+            nip05={profile?.nip05}
+            lud16={profile?.lud16}
+          />
         </div>
         <div className='IBMSMSplitMainSmallSideSec'>
           <div className='IBMSMSMSSS_ShortPosts'>
@@ -90,18 +109,21 @@ export const ProfileSection = ({ pubkey }: Props) => {
 
 type ProfileProps = {
   pubkey: string
+  displayName: string
+  about: string
+  image?: string
+  nip05?: string
+  lud16?: string
 }
 
-export const Profile = ({ pubkey }: ProfileProps) => {
-  const profile = useProfile(pubkey)
-
-  const displayName =
-    profile?.displayName || profile?.name || '[name not set up]'
-  const about = profile?.bio || profile?.about || '[bio not set up]'
-  const image = profile?.image || FALLBACK_PROFILE_IMAGE
-  const nip05 = profile?.nip05
-  const lud16 = profile?.lud16
-
+export const Profile = ({
+  pubkey,
+  displayName,
+  about,
+  image,
+  nip05,
+  lud16
+}: ProfileProps) => {
   const npub = hexToNpub(pubkey)
 
   const handleCopy = async () => {
@@ -116,20 +138,14 @@ export const Profile = ({ pubkey }: ProfileProps) => {
     })
   }
 
-  // Try to encode
   let profileRoute = appRoutes.home
-  let nprofile: string | undefined
-  try {
-    const hexPubkey = npubToHex(pubkey)
-    nprofile = hexPubkey
-      ? nip19.nprofileEncode({
-          pubkey: hexPubkey
-        })
-      : undefined
-    profileRoute = nprofile ? getProfilePageRoute(nprofile) : appRoutes.home
-  } catch (error) {
-    // Silently ignore and redirect to home
-    log(true, LogType.Error, 'Failed to encode profile.', error)
+  const hexPubkey = npubToHex(pubkey)
+  if (hexPubkey) {
+    profileRoute = getProfilePageRoute(
+      nip19.nprofileEncode({
+        pubkey: hexPubkey
+      })
+    )
   }
 
   return (
@@ -146,7 +162,9 @@ export const Profile = ({ pubkey }: ProfileProps) => {
                   <div
                     className='IBMSMSMSSS_Author_Top_PP'
                     style={{
-                      background: `url('${image}') center / cover no-repeat`
+                      background: `url('${
+                        image || FALLBACK_PROFILE_IMAGE
+                      }') center / cover no-repeat`
                     }}
                   ></div>
                 </div>
@@ -154,8 +172,7 @@ export const Profile = ({ pubkey }: ProfileProps) => {
               <div className='IBMSMSMSSS_Author_Top_Left_InsideDetails'>
                 <div className='IBMSMSMSSS_Author_TopWrapper'>
                   <p className='IBMSMSMSSS_Author_Top_Name'>{displayName}</p>
-                  {/* Nip05 can sometimes be an empty object '{}' which causes the error */}
-                  {typeof nip05 === 'string' && (
+                  {nip05 && (
                     <p className='IBMSMSMSSS_Author_Top_Handle'>{nip05}</p>
                   )}
                 </div>
@@ -188,12 +205,8 @@ export const Profile = ({ pubkey }: ProfileProps) => {
                   <path d='M384 96L384 0h-112c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48H464c26.51 0 48-21.49 48-48V128h-95.1C398.4 128 384 113.6 384 96zM416 0v96h96L416 0zM192 352V128h-144c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h192c26.51 0 48-21.49 48-48L288 416h-32C220.7 416 192 387.3 192 352z'></path>
                 </svg>
               </div>
-              {typeof nprofile !== 'undefined' && (
-                <ProfileQRButtonWithPopUp nprofile={nprofile} />
-              )}
-              {typeof lud16 !== 'undefined' && (
-                <ZapButtonWithPopUp pubkey={pubkey} />
-              )}
+              <ProfileQRButtonWithPopUp pubkey={pubkey} />
+              {lud16 && <ZapButtonWithPopUp pubkey={pubkey} />}
             </div>
           </div>
         </div>
@@ -238,16 +251,20 @@ const posts: Post[] = [
 ]
 
 type QRButtonWithPopUpProps = {
-  nprofile: string
+  pubkey: string
 }
 
 export const ProfileQRButtonWithPopUp = ({
-  nprofile
+  pubkey
 }: QRButtonWithPopUpProps) => {
   const [isOpen, setIsOpen] = useState(false)
 
   useBodyScrollDisable(isOpen)
 
+  const nprofile = nip19.nprofileEncode({
+    pubkey
+  })
+
   const onQrCodeClicked = async () => {
     const href = `https://njump.me/${nprofile}`
     const a = document.createElement('a')

src/components/SearchInput.tsx

@@ -1,39 +0,0 @@
-import { forwardRef } from 'react'
-
-interface SearchInputProps {
-  handleKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void
-  handleSearch: () => void
-}
-
-export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
-  ({ handleKeyDown, handleSearch }, ref) => (
-    <div className='SearchMain'>
-      <div className='SearchMainInside'>
-        <div className='SearchMainInsideWrapper'>
-          <input
-            type='text'
-            className='SMIWInput'
-            ref={ref}
-            onKeyDown={handleKeyDown}
-            placeholder='Enter search term'
-          />
-          <button
-            className='btn btnMain SMIWButton'
-            type='button'
-            onClick={handleSearch}
-          >
-            <svg
-              xmlns='http://www.w3.org/2000/svg'
-              viewBox='0 0 512 512'
-              width='1em'
-              height='1em'
-              fill='currentColor'
-            >
-              <path d='M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z'></path>
-            </svg>
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-)

src/hooks/index.ts

@@ -7,4 +7,3 @@ export * from './useNSFWList'
 export * from './useReactions'
 export * from './useNDKContext'
 export * from './useScrollDisable'
-export * from './useLocalStorage'

src/hooks/useFilteredMods.ts

@@ -18,20 +18,10 @@ export const useFilteredMods = (
   muteLists: {
     admin: MuteLists
     user: MuteLists
-  },
-  author?: string | undefined
+  }
 ) => {
   return useMemo(() => {
     const nsfwFilter = (mods: ModDetails[]) => {
-      // Add nsfw tag to mods included in nsfwList
-      if (filterOptions.nsfw !== NSFWFilter.Hide_NSFW) {
-        mods = mods.map((mod) => {
-          return !mod.nsfw && nsfwList.includes(mod.aTag)
-            ? { ...mod, nsfw: true }
-            : mod
-        })
-      }
-
       // Determine the filtering logic based on the NSFW filter option
       switch (filterOptions.nsfw) {
         case NSFWFilter.Hide_NSFW:
@@ -51,7 +41,7 @@ export const useFilteredMods = (
     const isAdmin = userState.user?.npub === import.meta.env.VITE_REPORTING_NPUB
     const isOwner =
       userState.user?.npub &&
-      npubToHex(userState.user.npub as string) === author
+      npubToHex(userState.user.npub as string) === filterOptions.author
     const isUnmoderatedFully =
       filterOptions.moderated === ModeratedFilter.Unmoderated_Fully
 
@@ -85,7 +75,7 @@ export const useFilteredMods = (
     filterOptions.sort,
     filterOptions.moderated,
     filterOptions.nsfw,
-    author,
+    filterOptions.author,
     mods,
     muteLists,
     nsfwList

src/hooks/useLocalStorage.tsx

@@ -1,50 +0,0 @@
-import React from 'react'
-import {
-  getLocalStorageItem,
-  removeLocalStorageItem,
-  setLocalStorageItem
-} from 'utils'
-
-const useLocalStorageSubscribe = (callback: () => void) => {
-  window.addEventListener('storage', callback)
-  return () => window.removeEventListener('storage', callback)
-}
-
-export function useLocalStorage<T>(
-  key: string,
-  initialValue: T
-): [T, React.Dispatch<React.SetStateAction<T>>] {
-  const getSnapshot = () => getLocalStorageItem(key, initialValue)
-
-  const data = React.useSyncExternalStore(useLocalStorageSubscribe, getSnapshot)
-
-  const setState: React.Dispatch<React.SetStateAction<T>> = React.useCallback(
-    (v: React.SetStateAction<T>) => {
-      try {
-        const nextState =
-          typeof v === 'function'
-            ? (v as (prevState: T) => T)(JSON.parse(data))
-            : v
-
-        if (nextState === undefined || nextState === null) {
-          removeLocalStorageItem(key)
-        } else {
-          setLocalStorageItem(key, JSON.stringify(nextState))
-        }
-      } catch (e) {
-        console.warn(e)
-      }
-    },
-    [key, data]
-  )
-
-  React.useEffect(() => {
-    // Set local storage only when it's empty
-    const data = window.localStorage.getItem(key)
-    if (data === null) {
-      setLocalStorageItem(key, JSON.stringify(initialValue))
-    }
-  }, [key, initialValue])
-
-  return [JSON.parse(data) as T, setState]
-}

src/hooks/useProfile.tsx

@@ -1,18 +0,0 @@
-import { useNDKContext } from 'hooks'
-import { useState, useEffect } from 'react'
-import { UserProfile } from 'types'
-
-export const useProfile = (pubkey?: string) => {
-  const { findMetadata } = useNDKContext()
-  const [profile, setProfile] = useState<UserProfile>()
-
-  useEffect(() => {
-    if (pubkey) {
-      findMetadata(pubkey).then((res) => {
-        setProfile(res)
-      })
-    }
-  }, [findMetadata, pubkey])
-
-  return profile
-}

src/layout/socialNav.tsx

@@ -1,28 +1,13 @@
 import { useAppSelector } from 'hooks'
-import { nip19 } from 'nostr-tools'
 import { useState } from 'react'
 import { NavLink, NavLinkProps } from 'react-router-dom'
 import { appRoutes, getProfilePageRoute } from 'routes'
 import 'styles/socialNav.css'
-import { npubToHex } from 'utils'
 
 export const SocialNav = () => {
   const [isCollapsed, setIsCollapsed] = useState<boolean>(false)
   const userState = useAppSelector((state) => state.user)
 
-  let profileRoute = ''
-  if (userState.auth && userState.user) {
-    // Redirect to user's profile is no profile is linked
-    const userHexKey = npubToHex(userState.user.npub as string)
-
-    if (userHexKey) {
-      profileRoute = getProfilePageRoute(
-        nip19.nprofileEncode({
-          pubkey: userHexKey
-        })
-      )
-    }
-  }
   const toggleNav = () => {
     setIsCollapsed(!isCollapsed)
   }
@@ -57,7 +42,7 @@ export const SocialNav = () => {
             />
             {!!userState.auth && (
               <NavButton
-                to={profileRoute}
+                to={getProfilePageRoute('')}
                 svgPath='M256 288c79.53 0 144-64.47 144-144s-64.47-144-144-144c-79.52 0-144 64.47-144 144S176.5 288 256 288zM351.1 320H160c-88.36 0-160 71.63-160 160c0 17.67 14.33 32 31.1 32H480c17.67 0 31.1-14.33 31.1-32C512 391.6 440.4 320 351.1 320z'
               />
             )}

src/pages/game.tsx

@@ -6,25 +6,24 @@ import {
 import { ModCard } from 'components/ModCard'
 import { ModFilter } from 'components/ModsFilter'
 import { PaginationWithPageNumbers } from 'components/Pagination'
-import { SearchInput } from 'components/SearchInput'
 import { MAX_MODS_PER_PAGE, T_TAG_VALUE } from 'constants.ts'
 import {
   useAppSelector,
   useFilteredMods,
-  useLocalStorage,
   useMuteLists,
   useNDKContext,
   useNSFWList
 } from 'hooks'
-import { useEffect, useMemo, useRef, useState } from 'react'
-import { useParams, useSearchParams } from 'react-router-dom'
-import { FilterOptions, ModDetails } from 'types'
+import { useEffect, useRef, useState } from 'react'
+import { useParams } from 'react-router-dom'
 import {
-  DEFAULT_FILTER_OPTIONS,
-  extractModData,
-  isModDataComplete,
-  scrollIntoView
-} from 'utils'
+  FilterOptions,
+  ModDetails,
+  ModeratedFilter,
+  NSFWFilter,
+  SortBy
+} from 'types'
+import { extractModData, isModDataComplete, scrollIntoView } from 'utils'
 
 export const GamePage = () => {
   const scrollTargetRef = useRef<HTMLDivElement>(null)
@@ -34,70 +33,20 @@ export const GamePage = () => {
   const muteLists = useMuteLists()
   const nsfwList = useNSFWList()
 
-  const [filterOptions] = useLocalStorage<FilterOptions>(
-    'filter',
-    DEFAULT_FILTER_OPTIONS
-  )
+  const [filterOptions, setFilterOptions] = useState<FilterOptions>({
+    sort: SortBy.Latest,
+    nsfw: NSFWFilter.Hide_NSFW,
+    source: window.location.host,
+    moderated: ModeratedFilter.Moderated
+  })
   const [mods, setMods] = useState<ModDetails[]>([])
 
   const [currentPage, setCurrentPage] = useState(1)
 
   const userState = useAppSelector((state) => state.user)
 
-  // Search
-  const searchTermRef = useRef<HTMLInputElement>(null)
-  const [searchParams, setSearchParams] = useSearchParams()
-  const [searchTerm, setSearchTerm] = useState(searchParams.get('q') || '')
-
-  const handleSearch = () => {
-    const value = searchTermRef.current?.value || '' // Access the input value from the ref
-    setSearchTerm(value)
-
-    if (value) {
-      searchParams.set('q', value)
-    } else {
-      searchParams.delete('q')
-    }
-
-    setSearchParams(searchParams, {
-      replace: true
-    })
-  }
-
-  // Handle "Enter" key press inside the input
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'Enter') {
-      handleSearch()
-    }
-  }
-
-  const filteredMods = useMemo(() => {
-    const filterSourceFn = (mod: ModDetails) => {
-      if (filterOptions.source === window.location.host) {
-        return mod.rTag === filterOptions.source
-      }
-      return true
-    }
-
-    // If search term is missing, only filter by sources
-    if (searchTerm === '') return mods.filter(filterSourceFn)
-
-    const lowerCaseSearchTerm = searchTerm.toLowerCase()
-
-    const filterFn = (mod: ModDetails) =>
-      mod.title.toLowerCase().includes(lowerCaseSearchTerm) ||
-      mod.game.toLowerCase().includes(lowerCaseSearchTerm) ||
-      mod.summary.toLowerCase().includes(lowerCaseSearchTerm) ||
-      mod.body.toLowerCase().includes(lowerCaseSearchTerm) ||
-      mod.tags.findIndex((tag) =>
-        tag.toLowerCase().includes(lowerCaseSearchTerm)
-      ) > -1
-
-    return mods.filter(filterFn).filter(filterSourceFn)
-  }, [filterOptions.source, mods, searchTerm])
-
-  const filteredModList = useFilteredMods(
-    filteredMods,
+  const filteredMods = useFilteredMods(
+    mods,
     userState,
     filterOptions,
     nsfwList,
@@ -105,11 +54,11 @@ export const GamePage = () => {
   )
 
   // Pagination logic
-  const totalGames = filteredModList.length
+  const totalGames = filteredMods.length
   const totalPages = Math.ceil(totalGames / MAX_MODS_PER_PAGE)
   const startIndex = (currentPage - 1) * MAX_MODS_PER_PAGE
   const endIndex = startIndex + MAX_MODS_PER_PAGE
-  const currentMods = filteredModList.slice(startIndex, endIndex)
+  const currentMods = filteredMods.slice(startIndex, endIndex)
 
   const handlePageChange = (page: number) => {
     if (page >= 1 && page <= totalPages) {
@@ -167,24 +116,14 @@ export const GamePage = () => {
                     <span className='IBMSMTitleMainHeadingSpan'>
                       {gameName}
                     </span>
-                    {searchTerm !== '' && (
-                      <>
-                        &nbsp;&mdash;&nbsp;
-                        <span className='IBMSMTitleMainHeadingSpan'>
-                          {searchTerm}
-                        </span>
-                      </>
-                    )}
                   </h2>
                 </div>
-                <SearchInput
-                  handleKeyDown={handleKeyDown}
-                  handleSearch={handleSearch}
-                  ref={searchTermRef}
-                />
               </div>
             </div>
-            <ModFilter />
+            <ModFilter
+              filterOptions={filterOptions}
+              setFilterOptions={setFilterOptions}
+            />
             <div className='IBMSecMain IBMSMListWrapper'>
               <div className='IBMSMList'>
                 {currentMods.map((mod) => (

src/pages/games.tsx

@@ -9,7 +9,6 @@ import '../styles/styles.css'
 import { createSearchParams, useNavigate } from 'react-router-dom'
 import { appRoutes } from 'routes'
 import { scrollIntoView } from 'utils'
-import { SearchInput } from 'components/SearchInput'
 
 export const GamesPage = () => {
   const scrollTargetRef = useRef<HTMLDivElement>(null)
@@ -75,8 +74,8 @@ export const GamesPage = () => {
     const value = searchTermRef.current?.value || '' // Access the input value from the ref
     if (value !== '') {
       const searchParams = createSearchParams({
-        q: value,
-        kind: 'Games'
+        searchTerm: value,
+        searching: 'Games'
       })
       navigate({ pathname: appRoutes.search, search: `?${searchParams}` })
     }
@@ -101,11 +100,34 @@ export const GamesPage = () => {
               <div className='IBMSMTitleMain'>
                 <h2 className='IBMSMTitleMainHeading'>Games</h2>
               </div>
-              <SearchInput
-                ref={searchTermRef}
-                handleKeyDown={handleKeyDown}
-                handleSearch={handleSearch}
-              />
+              <div className='SearchMain'>
+                <div className='SearchMainInside'>
+                  <div className='SearchMainInsideWrapper'>
+                    <input
+                      type='text'
+                      className='SMIWInput'
+                      ref={searchTermRef}
+                      onKeyDown={handleKeyDown}
+                      placeholder='Enter search term'
+                    />
+                    <button
+                      className='btn btnMain SMIWButton'
+                      type='button'
+                      onClick={handleSearch}
+                    >
+                      <svg
+                        xmlns='http://www.w3.org/2000/svg'
+                        viewBox='0 0 512 512'
+                        width='1em'
+                        height='1em'
+                        fill='currentColor'
+                      >
+                        <path d='M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z'></path>
+                      </svg>
+                    </button>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
           <div className='IBMSecMain IBMSMListWrapper'>

src/pages/mod/index.tsx

@@ -15,8 +15,7 @@ import {
   useAppSelector,
   useBodyScrollDisable,
   useDidMount,
-  useNDKContext,
-  useNSFWList
+  useNDKContext
 } from '../../hooks'
 import { getGamePageRoute, getModsEditPageRoute } from '../../routes'
 import '../../styles/comments.css'
@@ -52,18 +51,10 @@ import placeholder from '../../assets/img/DEGMods Placeholder Img.png'
 export const ModPage = () => {
   const { naddr } = useParams()
   const { fetchEvent } = useNDKContext()
-  const [mod, setMod] = useState<ModDetails>()
+  const [modData, setModData] = useState<ModDetails>()
   const [isFetching, setIsFetching] = useState(true)
   const [commentCount, setCommentCount] = useState(0)
 
-  // Make sure to mark non-nsfw mods as NSFW if found in nsfwList
-  const nsfwList = useNSFWList()
-  const isMissingNsfwTag =
-    !mod?.nsfw && mod?.aTag && nsfwList && nsfwList.includes(mod.aTag)
-  const modData = isMissingNsfwTag
-    ? ({ ...mod, nsfw: true } as ModDetails)
-    : mod
-
   useDidMount(async () => {
     if (naddr) {
       const decoded = nip19.decode<'naddr'>(naddr as `naddr1${string}`)
@@ -79,7 +70,7 @@ export const ModPage = () => {
         .then((event) => {
           if (event) {
             const extracted = extractModData(event)
-            setMod(extracted)
+            setModData(extracted)
           }
         })
         .catch((err) => {

src/pages/mods.tsx

@@ -8,7 +8,6 @@ import { MOD_FILTER_LIMIT } from '../constants'
 import {
   useAppSelector,
   useFilteredMods,
-  useLocalStorage,
   useMuteLists,
   useNDKContext,
   useNSFWList
@@ -18,20 +17,26 @@ import '../styles/filters.css'
 import '../styles/pagination.css'
 import '../styles/search.css'
 import '../styles/styles.css'
-import { FilterOptions, ModDetails } from '../types'
-import { DEFAULT_FILTER_OPTIONS, scrollIntoView } from 'utils'
-import { SearchInput } from 'components/SearchInput'
+import {
+  FilterOptions,
+  ModDetails,
+  ModeratedFilter,
+  NSFWFilter,
+  SortBy
+} from '../types'
+import { scrollIntoView } from 'utils'
 
 export const ModsPage = () => {
   const scrollTargetRef = useRef<HTMLDivElement>(null)
   const { fetchMods } = useNDKContext()
   const [isFetching, setIsFetching] = useState(false)
   const [mods, setMods] = useState<ModDetails[]>([])
-
-  const [filterOptions] = useLocalStorage<FilterOptions>(
-    'filter',
-    DEFAULT_FILTER_OPTIONS
-  )
+  const [filterOptions, setFilterOptions] = useState<FilterOptions>({
+    sort: SortBy.Latest,
+    nsfw: NSFWFilter.Hide_NSFW,
+    source: window.location.host,
+    moderated: ModeratedFilter.Moderated
+  })
   const muteLists = useMuteLists()
   const nsfwList = useNSFWList()
 
@@ -107,7 +112,10 @@ export const ModsPage = () => {
             ref={scrollTargetRef}
           >
             <PageTitleRow />
-            <ModFilter />
+            <ModFilter
+              filterOptions={filterOptions}
+              setFilterOptions={setFilterOptions}
+            />
 
             <div className='IBMSecMain IBMSMListWrapper'>
               <div className='IBMSMList'>
@@ -138,8 +146,8 @@ const PageTitleRow = React.memo(() => {
     const value = searchTermRef.current?.value || '' // Access the input value from the ref
     if (value !== '') {
       const searchParams = createSearchParams({
-        q: value,
-        kind: 'Mods'
+        searchTerm: value,
+        searching: 'Mods'
       })
       navigate({ pathname: appRoutes.search, search: `?${searchParams}` })
     }
@@ -158,11 +166,35 @@ const PageTitleRow = React.memo(() => {
         <div className='IBMSMTitleMain'>
           <h2 className='IBMSMTitleMainHeading'>Mods</h2>
         </div>
-        <SearchInput
-          ref={searchTermRef}
-          handleKeyDown={handleKeyDown}
-          handleSearch={handleSearch}
-        />
+        <div className='SearchMain'>
+          <div className='SearchMainInside'>
+            <div className='SearchMainInsideWrapper'>
+              <input
+                type='text'
+                className='SMIWInput'
+                ref={searchTermRef}
+                onKeyDown={handleKeyDown}
+                placeholder='Enter search term'
+              />
+
+              <button
+                className='btn btnMain SMIWButton'
+                type='button'
+                onClick={handleSearch}
+              >
+                <svg
+                  xmlns='http://www.w3.org/2000/svg'
+                  viewBox='0 0 512 512'
+                  width='1em'
+                  height='1em'
+                  fill='currentColor'
+                >
+                  <path d='M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z'></path>
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   )

src/pages/profile.tsx

@@ -8,8 +8,8 @@ import { Tabs } from 'components/Tabs'
 import { MOD_FILTER_LIMIT } from '../constants'
 import {
   useAppSelector,
+  useDidMount,
   useFilteredMods,
-  useLocalStorage,
   useMuteLists,
   useNDKContext,
   useNSFWList
@@ -19,12 +19,17 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 import { useParams, Navigate, Link } from 'react-router-dom'
 import { toast } from 'react-toastify'
 import { appRoutes, getProfilePageRoute } from 'routes'
-import { FilterOptions, ModDetails, UserRelaysType } from 'types'
+import {
+  FilterOptions,
+  ModDetails,
+  ModeratedFilter,
+  NSFWFilter,
+  SortBy,
+  UserProfile,
+  UserRelaysType
+} from 'types'
 import {
   copyTextToClipboard,
-  DEFAULT_FILTER_OPTIONS,
-  log,
-  LogType,
   now,
   npubToHex,
   scrollIntoView,
@@ -32,7 +37,6 @@ import {
   signAndPublish
 } from 'utils'
 import { CheckboxField } from 'components/Inputs'
-import { useProfile } from 'hooks/useProfile'
 
 export const ProfilePage = () => {
   // Try to decode nprofile parameter
@@ -44,19 +48,27 @@ export const ProfilePage = () => {
       : undefined
     profilePubkey = value?.data.pubkey
   } catch (error) {
+    // Failed to decode the nprofile
     // Silently ignore and redirect to home or logged in user
-    log(true, LogType.Error, 'Failed to decode nprofile.', error)
   }
 
   const scrollTargetRef = useRef<HTMLDivElement>(null)
-  const { ndk, publish, fetchEventFromUserRelays, fetchMods } = useNDKContext()
+  const { ndk, publish, findMetadata, fetchEventFromUserRelays, fetchMods } =
+    useNDKContext()
+  const [profile, setProfile] = useState<UserProfile>()
   const userState = useAppSelector((state) => state.user)
   const isOwnProfile =
     userState.auth && userState.user?.pubkey === profilePubkey
   const [isLoading, setIsLoading] = useState(false)
   const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
 
-  const profile = useProfile(profilePubkey)
+  useDidMount(() => {
+    if (profilePubkey) {
+      findMetadata(profilePubkey).then((res) => {
+        setProfile(res)
+      })
+    }
+  })
 
   const displayName =
     profile?.displayName || profile?.name || '[name not set up]'
@@ -209,7 +221,7 @@ export const ProfilePage = () => {
       kind: NDKKind.MuteList,
       content: muteListEvent.content,
       created_at: now(),
-      tags: tags.filter((item) => item[0] !== 'p' || item[1] !== profilePubkey)
+      tags: tags.filter((item) => item[0] !== 'a' || item[1] !== profilePubkey)
     }
 
     setLoadingSpinnerDesc('Updating mute list event')
@@ -227,9 +239,12 @@ export const ProfilePage = () => {
 
   // Mods
   const [mods, setMods] = useState<ModDetails[]>([])
-  const filterKey = 'filter-profile'
-  const [filterOptions] = useLocalStorage<FilterOptions>(filterKey, {
-    ...DEFAULT_FILTER_OPTIONS
+  const [filterOptions, setFilterOptions] = useState<FilterOptions>({
+    sort: SortBy.Latest,
+    nsfw: NSFWFilter.Hide_NSFW,
+    source: window.location.host,
+    moderated: ModeratedFilter.Moderated,
+    author: profilePubkey
   })
   const muteLists = useMuteLists()
   const nsfwList = useNSFWList()
@@ -298,8 +313,7 @@ export const ProfilePage = () => {
     userState,
     filterOptions,
     nsfwList,
-    muteLists,
-    profilePubkey
+    muteLists
   )
 
   // Redirect route
@@ -465,7 +479,10 @@ export const ProfilePage = () => {
                   {/* Tabs Content */}
                   {tab === 0 && (
                     <>
-                      <ModFilter filterKey={filterKey} author={profilePubkey} />
+                      <ModFilter
+                        filterOptions={filterOptions}
+                        setFilterOptions={setFilterOptions}
+                      />
 
                       <div className='IBMSMList IBMSMListAlt'>
                         {filteredModList.map((mod) => (

src/pages/search.tsx

@@ -4,16 +4,15 @@ import {
   NDKKind,
   NDKSubscriptionCacheUsage,
   NDKUserProfile,
-  NostrEvent,
   profileFromEvent
 } from '@nostr-dev-kit/ndk'
 import { ErrorBoundary } from 'components/ErrorBoundary'
 import { GameCard } from 'components/GameCard'
+import { LoadingSpinner } from 'components/LoadingSpinner'
 import { ModCard } from 'components/ModCard'
 import { ModFilter } from 'components/ModsFilter'
 import { Pagination } from 'components/Pagination'
 import { Profile } from 'components/ProfileSection'
-import { SearchInput } from 'components/SearchInput'
 import {
   MAX_GAMES_PER_PAGE,
   MAX_MODS_PER_PAGE,
@@ -23,18 +22,32 @@ import {
   useAppSelector,
   useFilteredMods,
   useGames,
-  useLocalStorage,
   useMuteLists,
   useNDKContext,
   useNSFWList
 } from 'hooks'
-import React, { useEffect, useMemo, useRef, useState } from 'react'
+import React, {
+  Dispatch,
+  SetStateAction,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react'
 import { useSearchParams } from 'react-router-dom'
-import { FilterOptions, ModDetails, ModeratedFilter, MuteLists } from 'types'
 import {
-  DEFAULT_FILTER_OPTIONS,
+  FilterOptions,
+  ModDetails,
+  ModeratedFilter,
+  MuteLists,
+  NSFWFilter,
+  SortBy
+} from 'types'
+import {
   extractModData,
   isModDataComplete,
+  log,
+  LogType,
   scrollIntoView
 } from 'utils'
 
@@ -46,35 +59,30 @@ enum SearchKindEnum {
 
 export const SearchPage = () => {
   const scrollTargetRef = useRef<HTMLDivElement>(null)
-  const [searchParams, setSearchParams] = useSearchParams()
+  const [searchParams] = useSearchParams()
 
   const muteLists = useMuteLists()
   const nsfwList = useNSFWList()
   const searchTermRef = useRef<HTMLInputElement>(null)
 
-  const searchKind =
-    (searchParams.get('kind') as SearchKindEnum) || SearchKindEnum.Mods
-
-  const [filterOptions] = useLocalStorage<FilterOptions>(
-    'filter',
-    DEFAULT_FILTER_OPTIONS
+  const [searchKind, setSearchKind] = useState(
+    (searchParams.get('searching') as SearchKindEnum) || SearchKindEnum.Mods
   )
 
-  const [searchTerm, setSearchTerm] = useState(searchParams.get('q') || '')
+  const [filterOptions, setFilterOptions] = useState<FilterOptions>({
+    sort: SortBy.Latest,
+    nsfw: NSFWFilter.Hide_NSFW,
+    source: window.location.host,
+    moderated: ModeratedFilter.Moderated
+  })
+
+  const [searchTerm, setSearchTerm] = useState(
+    searchParams.get('searchTerm') || ''
+  )
 
   const handleSearch = () => {
     const value = searchTermRef.current?.value || '' // Access the input value from the ref
     setSearchTerm(value)
-
-    if (value) {
-      searchParams.set('q', value)
-    } else {
-      searchParams.delete('q')
-    }
-
-    setSearchParams(searchParams, {
-      replace: true
-    })
   }
 
   // Handle "Enter" key press inside the input
@@ -101,14 +109,42 @@ export const SearchPage = () => {
                   </span>
                 </h2>
               </div>
-              <SearchInput
-                handleKeyDown={handleKeyDown}
-                handleSearch={handleSearch}
-                ref={searchTermRef}
-              />
+              <div className='SearchMain'>
+                <div className='SearchMainInside'>
+                  <div className='SearchMainInsideWrapper'>
+                    <input
+                      type='text'
+                      className='SMIWInput'
+                      ref={searchTermRef}
+                      onKeyDown={handleKeyDown}
+                      placeholder='Enter search term'
+                    />
+                    <button
+                      className='btn btnMain SMIWButton'
+                      type='button'
+                      onClick={handleSearch}
+                    >
+                      <svg
+                        xmlns='http://www.w3.org/2000/svg'
+                        viewBox='0 0 512 512'
+                        width='1em'
+                        height='1em'
+                        fill='currentColor'
+                      >
+                        <path d='M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z'></path>
+                      </svg>
+                    </button>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
-          <Filters />
+          <Filters
+            filterOptions={filterOptions}
+            setFilterOptions={setFilterOptions}
+            searchKind={searchKind}
+            setSearchKind={setSearchKind}
+          />
           {searchKind === SearchKindEnum.Mods && (
             <ModsResult
               searchTerm={searchTerm}
@@ -134,29 +170,73 @@ export const SearchPage = () => {
   )
 }
 
-const Filters = React.memo(() => {
-  const [filterOptions, setFilterOptions] = useLocalStorage<FilterOptions>(
-    'filter',
-    DEFAULT_FILTER_OPTIONS
-  )
+type FiltersProps = {
+  filterOptions: FilterOptions
+  setFilterOptions: Dispatch<SetStateAction<FilterOptions>>
+  searchKind: SearchKindEnum
+  setSearchKind: Dispatch<SetStateAction<SearchKindEnum>>
+}
 
-  const userState = useAppSelector((state) => state.user)
-  const [searchParams, setSearchParams] = useSearchParams()
-  const searchKind =
-    (searchParams.get('kind') as SearchKindEnum) || SearchKindEnum.Mods
-  const handleChangeSearchKind = (kind: SearchKindEnum) => {
-    searchParams.set('kind', kind)
-    setSearchParams(searchParams, {
-      replace: true
-    })
-  }
+const Filters = React.memo(
+  ({
+    filterOptions,
+    setFilterOptions,
+    searchKind,
+    setSearchKind
+  }: FiltersProps) => {
+    const userState = useAppSelector((state) => state.user)
 
-  return (
-    <div className='IBMSecMain'>
-      <div className='FiltersMain'>
-        {searchKind === SearchKindEnum.Mods && <ModFilter />}
+    return (
+      <div className='IBMSecMain'>
+        <div className='FiltersMain'>
+          {searchKind === SearchKindEnum.Mods && (
+            <ModFilter
+              filterOptions={filterOptions}
+              setFilterOptions={setFilterOptions}
+            />
+          )}
+
+          {searchKind === SearchKindEnum.Users && (
+            <div className='FiltersMainElement'>
+              <div className='dropdown dropdownMain'>
+                <button
+                  className='btn dropdown-toggle btnMain btnMainDropdown'
+                  aria-expanded='false'
+                  data-bs-toggle='dropdown'
+                  type='button'
+                >
+                  {filterOptions.moderated}
+                </button>
+                <div className='dropdown-menu dropdownMainMenu'>
+                  {Object.values(ModeratedFilter).map((item, index) => {
+                    if (item === ModeratedFilter.Unmoderated_Fully) {
+                      const isAdmin =
+                        userState.user?.npub ===
+                        import.meta.env.VITE_REPORTING_NPUB
+
+                      if (!isAdmin) return null
+                    }
+
+                    return (
+                      <div
+                        key={`moderatedFilterItem-${index}`}
+                        className='dropdown-item dropdownMainMenuItem'
+                        onClick={() =>
+                          setFilterOptions((prev) => ({
+                            ...prev,
+                            moderated: item
+                          }))
+                        }
+                      >
+                        {item}
+                      </div>
+                    )
+                  })}
+                </div>
+              </div>
+            </div>
+          )}
 
-        {searchKind === SearchKindEnum.Users && (
           <div className='FiltersMainElement'>
             <div className='dropdown dropdownMain'>
               <button
@@ -165,65 +245,26 @@ const Filters = React.memo(() => {
                 data-bs-toggle='dropdown'
                 type='button'
               >
-                {filterOptions.moderated}
+                Searching: {searchKind}
               </button>
               <div className='dropdown-menu dropdownMainMenu'>
-                {Object.values(ModeratedFilter).map((item, index) => {
-                  if (item === ModeratedFilter.Unmoderated_Fully) {
-                    const isAdmin =
-                      userState.user?.npub ===
-                      import.meta.env.VITE_REPORTING_NPUB
-
-                    if (!isAdmin) return null
-                  }
-
-                  return (
-                    <div
-                      key={`moderatedFilterItem-${index}`}
-                      className='dropdown-item dropdownMainMenuItem'
-                      onClick={() =>
-                        setFilterOptions((prev) => ({
-                          ...prev,
-                          moderated: item
-                        }))
-                      }
-                    >
-                      {item}
-                    </div>
-                  )
-                })}
+                {Object.values(SearchKindEnum).map((item, index) => (
+                  <div
+                    key={`searchingFilterItem-${index}`}
+                    className='dropdown-item dropdownMainMenuItem'
+                    onClick={() => setSearchKind(item)}
+                  >
+                    {item}
+                  </div>
+                ))}
               </div>
             </div>
           </div>
-        )}
-
-        <div className='FiltersMainElement'>
-          <div className='dropdown dropdownMain'>
-            <button
-              className='btn dropdown-toggle btnMain btnMainDropdown'
-              aria-expanded='false'
-              data-bs-toggle='dropdown'
-              type='button'
-            >
-              Searching: {searchKind}
-            </button>
-            <div className='dropdown-menu dropdownMainMenu'>
-              {Object.values(SearchKindEnum).map((item, index) => (
-                <div
-                  key={`searchingFilterItem-${index}`}
-                  className='dropdown-item dropdownMainMenuItem'
-                  onClick={() => handleChangeSearchKind(item)}
-                >
-                  {item}
-                </div>
-              ))}
-            </div>
-          </div>
         </div>
       </div>
-    </div>
-  )
-})
+    )
+  }
+)
 
 type ModsResultProps = {
   filterOptions: FilterOptions
@@ -283,7 +324,6 @@ const ModsResult = ({
   }, [searchTerm])
 
   const filteredMods = useMemo(() => {
-    // Search page requires search term
     if (searchTerm === '') return []
 
     const lowerCaseSearchTerm = searchTerm.toLowerCase()
@@ -297,16 +337,8 @@ const ModsResult = ({
         tag.toLowerCase().includes(lowerCaseSearchTerm)
       ) > -1
 
-    const filterSourceFn = (mod: ModDetails) => {
-      // Filter by source if selected
-      if (filterOptions.source === window.location.host) {
-        return mod.rTag === filterOptions.source
-      }
-      return true
-    }
-
-    return mods.filter(filterFn).filter(filterSourceFn)
-  }, [filterOptions.source, mods, searchTerm])
+    return mods.filter(filterFn)
+  }, [mods, searchTerm])
 
   const filteredModList = useFilteredMods(
     filteredMods,
@@ -361,70 +393,39 @@ const UsersResult = ({
   moderationFilter,
   muteLists
 }: UsersResultProps) => {
-  const { ndk } = useNDKContext()
+  const { fetchEvents } = useNDKContext()
+  const [isFetching, setIsFetching] = useState(false)
   const [profiles, setProfiles] = useState<NDKUserProfile[]>([])
+
   const userState = useAppSelector((state) => state.user)
 
   useEffect(() => {
     if (searchTerm === '') {
       setProfiles([])
     } else {
-      const sub = ndk.subscribe(
-        {
-          kinds: [NDKKind.Metadata],
-          search: searchTerm
-        },
-        {
-          closeOnEose: true,
-          cacheUsage: NDKSubscriptionCacheUsage.PARALLEL
-        },
-        undefined,
-        false
-      )
+      const filter: NDKFilter = {
+        kinds: [NDKKind.Metadata],
+        search: searchTerm
+      }
 
-      // Stop the sub after 10 seconds if we are still searching the same term as before
-      window.setTimeout(() => {
-        if (sub.filter.search === searchTerm) {
-          sub.stop()
-        }
-      }, 10000)
-
-      const onEvent = (event: NostrEvent | NDKEvent) => {
-        if (!(event instanceof NDKEvent)) event = new NDKEvent(undefined, event)
-        const dedupKey = event.deduplicationKey()
-        const existingEvent = events.get(dedupKey)
-        if (existingEvent) {
-          event = dedup(existingEvent, event)
-        }
-        event.ndk = this
-        events.set(dedupKey, event)
-
-        // We can't rely on the 'eose' to arrive
-        // Instead we repeat and sort results on each event
-        const ndkEvents = Array.from(events.values())
-        const profiles: NDKUserProfile[] = []
-        ndkEvents.forEach((event) => {
-          try {
-            const profile = profileFromEvent(event)
-            profiles.push(profile)
-          } catch (error) {
-            // If we are unable to parse silently skip over the errors
-          }
+      setIsFetching(true)
+      fetchEvents(filter)
+        .then((events) => {
+          const results = events.map((event) => {
+            const ndkEvent = new NDKEvent(undefined, event)
+            const profile = profileFromEvent(ndkEvent)
+            return profile
+          })
+          setProfiles(results)
+        })
+        .catch((err) => {
+          log(true, LogType.Error, 'An error occurred in fetching users', err)
+        })
+        .finally(() => {
+          setIsFetching(false)
         })
-        setProfiles(profiles)
-      }
-
-      // Clear previous results
-      const events = new Map<string, NDKEvent>()
-
-      // Bind handler and start the sub
-      sub.on('event', onEvent)
-      sub.start()
-      return () => {
-        sub.stop()
-      }
     }
-  }, [ndk, searchTerm])
+  }, [searchTerm, fetchEvents])
 
   const filteredProfiles = useMemo(() => {
     let filtered = [...profiles]
@@ -449,13 +450,25 @@ const UsersResult = ({
   }, [userState.user?.npub, moderationFilter, profiles, muteLists])
   return (
     <>
+      {isFetching && <LoadingSpinner desc='Fetching Profiles' />}
       <div className='IBMSecMain IBMSMListWrapper'>
         <div className='IBMSMList'>
           {filteredProfiles.map((profile) => {
             if (profile.pubkey) {
+              const displayName =
+                profile?.displayName || profile?.name || '[name not set up]'
+              const about = profile?.bio || profile?.about || '[bio not set up]'
+
               return (
                 <ErrorBoundary key={profile.pubkey}>
-                  <Profile pubkey={profile.pubkey as string} />
+                  <Profile
+                    pubkey={profile.pubkey as string}
+                    displayName={displayName}
+                    about={about}
+                    image={profile?.image}
+                    nip05={profile?.nip05}
+                    lud16={profile?.lud16}
+                  />
                 </ErrorBoundary>
               )
             }
@@ -523,11 +536,3 @@ const GamesResult = ({ searchTerm }: GamesResultProps) => {
     </>
   )
 }
-function dedup(event1: NDKEvent, event2: NDKEvent) {
-  // return the newest of the two
-  if (event1.created_at! > event2.created_at!) {
-    return event1
-  }
-
-  return event2
-}

src/pages/settings/profile.tsx

@@ -98,15 +98,15 @@ export const ProfileSettings = () => {
 
   // In case user is not logged in clicking on profile link will navigate to homepage
   let profileRoute = appRoutes.home
-  let nprofile: string | undefined
   if (userState.auth && userState.user) {
     const hexPubkey = npubToHex(userState.user.npub as string)
 
     if (hexPubkey) {
-      nprofile = nip19.nprofileEncode({
-        pubkey: hexPubkey
-      })
-      profileRoute = getProfilePageRoute(nprofile)
+      profileRoute = getProfilePageRoute(
+        nip19.nprofileEncode({
+          pubkey: hexPubkey
+        })
+      )
     }
   }
 
@@ -247,8 +247,10 @@ export const ProfileSettings = () => {
                         <path d='M384 96L384 0h-112c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48H464c26.51 0 48-21.49 48-48V128h-95.1C398.4 128 384 113.6 384 96zM416 0v96h96L416 0zM192 352V128h-144c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h192c26.51 0 48-21.49 48-48L288 416h-32C220.7 416 192 387.3 192 352z'></path>
                       </svg>
                     </div>
-                    {typeof nprofile !== 'undefined' && (
-                      <ProfileQRButtonWithPopUp nprofile={nprofile} />
+                    {typeof userState.user?.pubkey === 'string' && (
+                      <ProfileQRButtonWithPopUp
+                        pubkey={userState.user.pubkey}
+                      />
                     )}
                   </div>
                 </div>

src/styles/cardMod.css

@@ -155,12 +155,3 @@
   backdrop-filter: blur(10px);
   background: rgba(35, 35, 35, 0.85);
 }
-
-.IBMSMSMBSSTagsTag.IBMSMSMBSSTagsTagRepost.IBMSMSMBSSTagsTagRepostCard {
-    position: absolute;
-    bottom: 10px;
-    left: 10px;
-    -webkit-backdrop-filter: blur(10px);
-    backdrop-filter: blur(10px);
-    background: #232323d9;
-}

src/styles/tags.css

@@ -44,13 +44,3 @@
   cursor: default;
   box-shadow: unset;
 }
-
-.IBMSMSMBSSTagsTag.IBMSMSMBSSTagsTagRepost {
-    background: #ffffff1a;
-    color: #ffffff59;
-    font-weight: 700;
-    border: unset;
-    font-size: 14px;
-    cursor: default;
-    box-shadow: unset;
-}

src/types/modsFilter.ts

@@ -22,4 +22,5 @@ export interface FilterOptions {
   nsfw: NSFWFilter
   source: string
   moderated: ModeratedFilter
+  author?: string
 }

src/utils/consts.ts

@@ -1,8 +0,0 @@
-import { FilterOptions, SortBy, NSFWFilter, ModeratedFilter } from 'types'
-
-export const DEFAULT_FILTER_OPTIONS: FilterOptions = {
-  sort: SortBy.Latest,
-  nsfw: NSFWFilter.Hide_NSFW,
-  source: window.location.host,
-  moderated: ModeratedFilter.Moderated
-}

src/utils/index.ts

@@ -3,5 +3,3 @@ export * from './nostr'
 export * from './url'
 export * from './utils'
 export * from './zap'
-export * from './localStorage'
-export * from './consts'

src/utils/localStorage.ts

@@ -1,32 +0,0 @@
-export function getLocalStorageItem<T>(key: string, defaultValue: T): string {
-  try {
-    const data = window.localStorage.getItem(key)
-    if (data === null) return JSON.stringify(defaultValue)
-    return data
-  } catch (err) {
-    console.error(`Error while fetching local storage value: `, err)
-    return JSON.stringify(defaultValue)
-  }
-}
-
-export function setLocalStorageItem(key: string, value: string) {
-  try {
-    window.localStorage.setItem(key, value)
-    dispatchLocalStorageEvent(key, value)
-  } catch (err) {
-    console.error(`Error while saving local storage value: `, err)
-  }
-}
-
-export function removeLocalStorageItem(key: string) {
-  try {
-    window.localStorage.removeItem(key)
-    dispatchLocalStorageEvent(key, null)
-  } catch (err) {
-    console.error(`Error while deleting local storage value: `, err)
-  }
-}
-
-function dispatchLocalStorageEvent(key: string, newValue: string | null) {
-  window.dispatchEvent(new StorageEvent('storage', { key, newValue }))
-}