Don't hide self in top even if hidden (#905)

* Don't hide self in top even if hidden

* Also don't hide self in top cowboys

* only use anon icon for anon stuff

---------

Co-authored-by: Keyan <34140557+huumn@users.noreply.github.com>
Co-authored-by: keyan <keyan.kousha+huumn@gmail.com>

api/resolvers/user.js

@@ -81,7 +81,7 @@ export async function topUsers (parent, { cursor, when, by, from, to, limit = LI
       OFFSET $3
       LIMIT $4`, ...range, decodedCursor.offset, limit)
   ).map(
-    u => u.hideFromTopUsers ? null : u
+    u => u.hideFromTopUsers && (!me || me.id !== u.id) ? null : u
   )
 
   return {
@@ -156,7 +156,7 @@ export default {
           OFFSET $3
           LIMIT ${LIMIT}`, ...range, decodedCursor.offset)
       ).map(
-        u => u.hideFromTopUsers || u.hideCowboyHat ? null : u
+        u => (u.hideFromTopUsers || u.hideCowboyHat) && (!me || me.id !== u.id) ? null : u
       )
 
       return {

components/user-header.module.css

@@ -42,3 +42,24 @@
     display: grid;
     grid-template-columns: auto minmax(0, 1fr);
 }
+
+.hidden {
+    position: relative;
+    padding: .5rem;
+    padding-bottom: 1.5rem;
+    border: 1px solid var(--bs-secondary);
+    border-radius: .25rem;
+    margin-bottom: 1rem;
+}
+
+.hidden::after {
+    content: 'only visible to you';
+    position: absolute;
+    font-size: 75%;
+    bottom: 0;
+    left: 0;
+    padding: .05rem .5rem;
+    background-color: var(--bs-secondary);
+    color: var(--bs-light);
+    border-radius: 0 .25rem 0 0;
+}

components/user-list.js

@@ -8,6 +8,7 @@ import { useQuery } from '@apollo/client'
 import MoreFooter from './more-footer'
 import { useData } from './use-data'
 import Hat from './hat'
+import { useMe } from './me'
 import { MEDIA_URL } from '../lib/constants'
 
 // all of this nonsense is to show the stat we are sorting by first
@@ -38,6 +39,7 @@ function seperate (arr, seperator) {
 }
 
 function User ({ user, rank, statComps, Embellish }) {
+  const me = useMe()
   return (
     <>
       {rank
@@ -46,7 +48,7 @@ function User ({ user, rank, statComps, Embellish }) {
             {rank}
           </div>)
         : <div />}
-      <div className={`${styles.item} mb-2`}>
+      <div className={`${styles.item} ${me?.id === user.id && me.privates?.hideFromTopUsers ? userStyles.hidden : 'mb-2'}`}>
         <Link href={`/${user.name}`}>
           <Image
             src={user.photoId ? `${MEDIA_URL}/${user.photoId}` : '/dorian400.jpg'} width='32' height='32'