Fix avatars and cohorts

src/components/Avatar/Avatar.module.scss

@@ -70,7 +70,7 @@
 
 @mixin avatar {
   position: relative;
-  background: var(--background-site);
+  // background: var(--background-site);
   border-radius: 50%;
   padding: 1px;
 
@@ -286,11 +286,11 @@
   @include avatar;
   width: 42px;
   height: 42px;
-  padding: 3px;
+  padding: 2px;
 
   .missingBack {
-    width: 36px;
-    height: 36px;
+    width: 38px;
+    height: 38px;
   }
 
   .iconBackground {
@@ -310,11 +310,11 @@
   @include avatar;
   width: 44px;
   height: 44px;
-  padding: 3px;
+  padding: 2px;
 
   .missingBack {
-    width: 38px;
-    height: 38px;
+    width: 40px;
+    height: 40px;
   }
 
   .iconBackground {
@@ -452,17 +452,23 @@
       // height: 74px;
     }
   }
+
+  &.borderRing {
+    .missingBack {
+      border: 4px solid var(--background-site);
+    }
+  }
 }
 
 .xxlAvatar {
   @include avatar;
   width: 120px;
   height: 120px;
-  padding: 6px;
+  padding: 5px;
 
   .missingBack {
-    width: 108px;
-    height: 108px;
+    width: 110px;
+    height: 110px;
   }
 
   .iconBackground {
@@ -473,11 +479,17 @@
 
   &.legend {
     .missingBack {
-      border: 2px solid var(--background-site);
+      border: 1px solid var(--background-site);
       // width: 112px;
       // height: 112px;
     }
   }
+
+  &.borderRing {
+    .missingBack {
+      border: 4px solid var(--background-site);
+    }
+  }
 }
 
 .missingBack {

src/components/Avatar/Avatar.tsx

@@ -19,6 +19,7 @@ const Avatar: Component<{
   id?: string,
   showCheck?: boolean,
   zoomable?: boolean,
+  showBorderRing?: boolean,
   legendConfig?: LegendCustomizationConfig,
 }> = (props) => {
 
@@ -190,7 +191,7 @@ const Avatar: Component<{
   return (
     <div
       id={props.id}
-      class={`${avatarClass[selectedSize]} ${legendClass()} ${highlightClass()}`}
+      class={`${avatarClass[selectedSize]} ${legendClass()} ${highlightClass()} ${props.showBorderRing ? styles.borderRing : ''}`}
       data-user={props.user?.pubkey}
     >
       <Show

src/components/SmallCallToAction/SmallCallToAction.module.scss

@@ -25,7 +25,8 @@
 
   .input {
     height: 36px;
-    width: 100%;
+    // width: 100%;
+    flex-grow: 1;
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -34,7 +35,7 @@
     border-radius: 18px;
     border: none;
     color: var(--text-tertiary);
-    background-color: var(--background-input);
+    background-color: var(--background-header-input);
     display: flex;
     align-items: center;
     justify-content: flex-start;

src/constants.ts

@@ -159,6 +159,7 @@ export enum Kind  {
   ContentStats=10_000_166,
   BroadcastStatus=10_000_167,
   LegendCustomization=10_000_168,
+  MembershipCohortInfo = 10_000_169,
 
   WALLET_OPERATION = 10_000_300,
   ExchangeRate = 10_000_305,

src/contexts/AppContext.tsx

@@ -58,6 +58,12 @@ export type InvoiceInfo = {
   onCancel?: () => void,
 };
 
+export type CohortInfo = {
+  cohort_1: string,
+  cohort_2: string,
+  tier: string,
+};
+
 export type AppContextStore = {
   events: Record<number, NostrEventContent[]>,
   isInactive: boolean,
@@ -80,6 +86,7 @@ export type AppContextStore = {
   connectedRelays: Relay[],
   verifiedUsers: Record<string, string>,
   legendCustomization: Record<string, LegendCustomizationConfig>,
+  memberCohortInfo: Record<string, CohortInfo>,
   actions: {
     openReactionModal: (noteId: string, stats: ReactionStats) => void,
     closeReactionModal: () => void,
@@ -131,6 +138,7 @@ const initialData: Omit<AppContextStore, 'actions'> = {
   connectedRelays: [],
   verifiedUsers: {},
   legendCustomization: {},
+  memberCohortInfo: {},
   subscribeToTier: () => {},
 };
 
@@ -299,7 +307,7 @@ export const AppProvider = (props: { children: JSXElement }) => {
 
 // SOCKET HANDLERS ------------------------------
 
-const handleVerifiedUsersEvent = (content: NostrEventContent) => {
+const handleVerifiedUsersEvent = (content: NostrEventContent, subId?: string) => {
   if (content.kind === Kind.VerifiedUsersDict) {
     const verifiedUsers: Record<string, string> = JSON.parse(content.content);
 
@@ -312,6 +320,12 @@ const handleVerifiedUsersEvent = (content: NostrEventContent) => {
     updateStore('legendCustomization', (lc) => ({ ...lc, ...config }));
   }
 
+  if (content.kind === Kind.MembershipCohortInfo) {
+    const config = JSON.parse(content.content) as Record<string, CohortInfo>;
+
+    updateStore('memberCohortInfo', (lc) => ({ ...lc, ...config }));
+  }
+
   const events = store.events[content.kind] || [];
 
   if (events.length === 0) {
@@ -335,7 +349,7 @@ const onMessage = async (event: MessageEvent) => {
   const data = await readData(event);
   const message: NostrEvent | NostrEOSE | NostrEvents = JSON.parse(data);
 
-  const [type, _, content] = message;
+  const [type, subId, content] = message;
 
   if (type === 'EVENTS') {
     for (let i=0;i<content.length;i++) {
@@ -346,7 +360,7 @@ const onMessage = async (event: MessageEvent) => {
   }
 
   if (type === 'EVENT') {
-    handleVerifiedUsersEvent(content)
+    handleVerifiedUsersEvent(content, subId)
   }
 };
 

src/pages/Premium/Premium.module.scss

@@ -1154,7 +1154,6 @@
 }
 
 .premiumActive {
-  margin-bottom: 32px;
   .expiredPremium, .activePremium, .legendPremium {
     display: flex;
     justify-content: center;

src/pages/Premium/PremiumCohortInfo.tsx

@@ -0,0 +1,35 @@
+import { Component, Match, Switch } from 'solid-js';
+
+import styles from './Premium.module.scss';
+import { useIntl } from '@cookbook/solid-intl';
+import { useNavigate } from '@solidjs/router';
+import { PremiumStore } from './Premium';
+import Avatar from '../../components/Avatar/Avatar';
+import VerificationCheck from '../../components/VerificationCheck/VerificationCheck';
+import { shortDate } from '../../lib/dates';
+import { userName } from '../../stores/profile';
+import { PrimalUser } from '../../types/primal';
+import { LegendCustomizationConfig } from '../../lib/premium';
+import { CohortInfo } from '../../contexts/AppContext';
+
+
+const PremiumCohortInfo: Component<{
+  cohortInfo: CohortInfo,
+  legendConfig?: LegendCustomizationConfig | undefined,
+}> = (props) => {
+  const intl = useIntl()
+  const navigate = useNavigate();
+
+  return (
+    <div class={styles.premiumActive}>
+      <div class={`${styles.legendPremium} ${styles[`legend_${props.legendConfig?.style}`]}`}>
+        <div class={styles.caption}>{props.cohortInfo.cohort_1 || ''}</div>
+        <div class={styles.date}>
+          <div>{props.cohortInfo.cohort_2}</div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default PremiumCohortInfo;

src/pages/Profile.module.scss

@@ -71,8 +71,8 @@
   z-index: var(--z-index-floater);
   .avatar {
     // border: solid 4px var(--background-site);
-    border-radius: 50%;
-    background-color: var(--background-site);
+    // border-radius: 50%;
+    // background-color: var(--background-site);
     // >div {
       // opacity: 0;
       // animation: fadeIn var(--profile-animation-duration) ease-in forwards;
@@ -352,6 +352,7 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
+  gap: 4px;
 
   .text {
     color: var(--text-primary);
@@ -371,8 +372,8 @@
   }
 
   .vc {
-    width: 20px;
-    height: 20px;
+    // width: 20px;
+    // height: 20px;
   }
 }
 

src/pages/Profile.tsx

@@ -68,6 +68,7 @@ import ProfileFollowModal from '../components/ProfileFollowModal/ProfileFollowMo
 import ProfileCardSkeleton from '../components/Skeleton/ProfileCardSkeleton';
 import { getKnownProfiles } from '../Router';
 import { scrollWindowTo } from '../lib/scroll';
+import PremiumCohortInfo from './Premium/PremiumCohortInfo';
 
 const Profile: Component = () => {
 
@@ -650,6 +651,14 @@ const Profile: Component = () => {
     return text.length < 50;
   }
 
+  const isVisibleLegend = () => {
+    return profile?.profileKey &&
+    app?.legendCustomization[profile.profileKey] &&
+    app?.memberCohortInfo[profile.profileKey] &&
+    app?.legendCustomization[profile.profileKey].style !== '' &&
+    app?.memberCohortInfo[profile.profileKey].tier === 'premium-legend';
+  }
+
   return (
     <>
       <PageTitle title={
@@ -717,14 +726,20 @@ const Profile: Component = () => {
                   width={640}
                   media={media?.actions.getMedia(banner() || '', 'o')}
                   mediaThumb={media?.actions.getMedia(banner() || '', 'm') || media?.actions.getMedia(banner() || '', 'o') || banner()}
+                  ignoreRatio={true}
                 />
               </Show>
             </div>
 
             <div class={`${styles.userImage} animated`}>
-              <div class={styles.avatar}>
+              <div class={`styles.avatar`}>
                 <div class={isSmallScreen() ? styles.phoneAvatar : styles.desktopAvatar}>
-                  <Avatar user={profile?.userProfile} size={isSmallScreen() ? "lg" : "xxl"} zoomable={true} />
+                  <Avatar
+                    user={profile?.userProfile}
+                    size={isSmallScreen() ? "lg" : "xxl"}
+                    zoomable={true}
+                    showBorderRing={!isVisibleLegend()}
+                  />
                 </div>
               </div>
             </div>
@@ -813,6 +828,14 @@ const Profile: Component = () => {
                             <VerificationCheck user={profile?.userProfile} large={true} />
                           </div>
                         </Show>
+
+                        <Show when={isVisibleLegend()}>
+                          <PremiumCohortInfo
+                            cohortInfo={app?.memberCohortInfo[profile?.profileKey]}
+                            legendConfig={app?.legendCustomization[profile?.profileKey]}
+                          />
+                        </Show>
+
                         <Show when={isFollowingYou()}>
                           <div class={styles.followsBadge}>
                             {intl.formatMessage(t.followsYou)}

src/types/primal.d.ts

@@ -403,6 +403,13 @@ export type NostrBroadcastStatus= {
   id?: string,
 };
 
+export type NostrMembershipCohortInfo= {
+  kind: Kind.MembershipCohortInfo,
+  content: string,
+  created_at?: number,
+  id?: string,
+};
+
 export type NostrEventContent =
   NostrNoteContent |
   NostrUserContent |
@@ -453,6 +460,7 @@ export type NostrEventContent =
   NostrOrderHistory |
   NostrLegendCustomization |
   NostrBroadcastStatus |
+  NostrMembershipCohortInfo |
   NostrTopicStats;
 
 export type NostrEvent = [