total rep categories ui/ux

__tests__/components/user/rep/UserPageRep.test.tsx

@@ -6,11 +6,7 @@ import { render } from "@testing-library/react";
 jest.mock("@tanstack/react-query", () => ({ useQuery: jest.fn() }));
 
 let headerProps: any;
-let newRepProps: any;
-let repsProps: any;
-let tableParams: any[] = [];
 let activityProps: any;
-let rateWrapperProps: any;
 
 jest.mock(
   "@/components/user/rep/header/UserPageRepHeader",
@@ -20,34 +16,21 @@ jest.mock(
   }
 );
 jest.mock(
-  "@/components/user/rep/new-rep/UserPageRepNewRep",
+  "@/components/user/rep/UserPageCombinedActivityLog",
   () => (props: any) => {
-    newRepProps = props;
-    return <div data-testid="newrep" />;
-  }
-);
-jest.mock("@/components/user/rep/reps/UserPageRepReps", () => (props: any) => {
-  repsProps = props;
-  return <div data-testid="reps" />;
-});
-jest.mock(
-  "@/components/user/utils/raters-table/wrapper/ProfileRatersTableWrapper",
-  () => (props: any) => {
-    tableParams.push(props.initialParams);
-    return <div data-testid="table" />;
+    activityProps = props;
+    return <div data-testid="activity" />;
   }
 );
 jest.mock(
-  "@/components/user/rep/UserPageRepActivityLog",
+  "@/components/user/rep/UserPageRepMobile",
   () => (props: any) => {
-    activityProps = props;
-    return <div data-testid="activity" />;
+    return <div data-testid="mobile" />;
   }
 );
 jest.mock(
   "@/components/user/utils/rate/UserPageRateWrapper",
   () => (props: any) => {
-    rateWrapperProps = props;
     return <div data-testid="ratewrapper">{props.children}</div>;
   }
 );
@@ -56,13 +39,7 @@ describe("UserPageRep", () => {
   const queryMock = useQuery as jest.Mock;
 
   beforeEach(() => {
-    headerProps =
-      newRepProps =
-      repsProps =
-      activityProps =
-      rateWrapperProps =
-        undefined;
-    tableParams = [];
+    headerProps = activityProps = undefined;
     queryMock.mockReturnValue({ data: { score: 1 } });
   });
 
@@ -74,19 +51,12 @@ describe("UserPageRep", () => {
         value={{ connectedProfile: { handle: "charlie" } } as any}>
         <UserPageRep
           profile={profile}
-          initialRepReceivedParams={params}
-          initialRepGivenParams={params}
           initialActivityLogParams={params}
         />
       </AuthContext.Provider>
     );
     expect(headerProps.repRates).toEqual({ score: 1 });
-    expect(newRepProps.profile).toBe(profile);
-    expect(newRepProps.repRates).toEqual({ score: 1 });
-    expect(repsProps.profile).toBe(profile);
-    expect(repsProps.repRates).toEqual({ score: 1 });
-    expect(tableParams.slice(0, 2)).toEqual([params, params]);
+    expect(headerProps.profile).toBe(profile);
     expect(activityProps.initialActivityLogParams).toBe(params);
-    expect(rateWrapperProps.profile).toBe(profile);
   });
 });

__tests__/components/user/rep/header/UserPageRepHeader.test.tsx

@@ -20,6 +20,6 @@ describe('UserPageRepHeader', () => {
 
   it('renders without repRates', () => {
     const { container } = render(<UserPageRepHeader repRates={null} profile={mockProfile} />);
-    expect(container).toHaveTextContent('Reputation');
+    expect(container).toHaveTextContent('Rep');
   });
 });

components/user/rep/RepCategoryPill.tsx

@@ -0,0 +1,81 @@
+import type { RatingStats } from "@/entities/IProfile";
+import { formatNumberWithCommas } from "@/helpers/Helpers";
+import type { MouseEvent } from "react";
+import TopRaterAvatars from "./header/TopRaterAvatars";
+
+const stopPropagation = (e: MouseEvent) => e.stopPropagation();
+
+export default function RepCategoryPill({
+  rep,
+  profileHandle,
+  canEdit,
+  onEdit,
+  compact = false,
+}: {
+  readonly rep: RatingStats;
+  readonly profileHandle: string;
+  readonly canEdit: boolean;
+  readonly onEdit: (category: string) => void;
+  readonly compact?: boolean;
+}) {
+  const paddingClass = compact ? "tw-px-3 tw-py-2" : "tw-px-4 tw-py-2.5";
+
+  const content = (
+    <>
+      <span className="tw-inline-flex tw-items-center tw-gap-1.5">
+        <span className="tw-text-sm tw-font-medium tw-text-white tw-text-left">
+          {rep.category}
+        </span>
+        <span className="tw-text-sm tw-font-medium tw-text-iron-400 tw-transition-colors group-hover:tw-text-iron-300">
+          {formatNumberWithCommas(rep.rating)}
+        </span>
+      </span>
+      <span className="tw-text-xs tw-text-white/20">&middot;</span>
+      <span className="tw-inline-flex tw-items-center tw-gap-1.5">
+        <span className="tw-pointer-events-none desktop-hover:tw-pointer-events-auto">
+          <TopRaterAvatars
+            handleOrWallet={profileHandle}
+            category={rep.category}
+            count={5}
+            onAvatarClick={stopPropagation}
+          />
+        </span>
+        <span className="tw-whitespace-nowrap tw-text-xs tw-font-medium tw-text-iron-400">
+          {formatNumberWithCommas(rep.contributor_count)}{" "}
+          {rep.contributor_count === 1 ? "rater" : "raters"}
+        </span>
+      </span>
+      {!!rep.rater_contribution && (
+        <>
+          <span className="tw-text-xs tw-text-white/20">&middot;</span>
+          <span className="tw-whitespace-nowrap tw-text-xs tw-font-medium tw-text-iron-400">
+            My Rate:{" "}
+            <span className="tw-font-medium tw-text-primary-400">
+              {formatNumberWithCommas(rep.rater_contribution)}
+            </span>
+          </span>
+        </>
+      )}
+    </>
+  );
+
+  const baseClasses = `group tw-inline-flex tw-items-center tw-gap-2.5 tw-rounded-lg tw-border tw-border-solid tw-border-white/10 tw-bg-white/5 tw-backdrop-blur-md tw-transition-all tw-duration-300 tw-ease-out ${paddingClass}`;
+
+  if (canEdit) {
+    return (
+      <button
+        type="button"
+        onClick={() => onEdit(rep.category)}
+        className={`${baseClasses} tw-cursor-pointer hover:tw-border-white/20 hover:tw-bg-white/10 hover:tw-shadow-md`}
+      >
+        {content}
+      </button>
+    );
+  }
+
+  return (
+    <div className={`${baseClasses} tw-cursor-default`}>
+      {content}
+    </div>
+  );
+}

components/user/rep/UserPageRep.tsx

@@ -18,7 +18,6 @@ import UserPageRateWrapper from "../utils/rate/UserPageRateWrapper";
 import UserPageCombinedActivityLog from "./UserPageCombinedActivityLog";
 import UserPageRepHeader from "./header/UserPageRepHeader";
 import UserPageRepMobile from "./UserPageRepMobile";
-import UserPageRepReps from "./reps/UserPageRepReps";
 export default function UserPageRep({
   profile,
   initialActivityLogParams,
@@ -65,27 +64,11 @@ export default function UserPageRep({
           {/* Left Column - Rep Content */}
           <div className="tw-min-w-0">
             <UserPageRepHeader repRates={repRates ?? null} profile={profile} />
-            <UserPageRepReps repRates={repRates ?? null} profile={profile} />
             <div className="tw-mt-6 lg:tw-mt-8">
               <UserPageCombinedActivityLog
                 initialActivityLogParams={initialActivityLogParams}
               />
             </div>
-
-            {/* Rep raters tables - commented out for now
-            <div className="tw-mt-6 tw-grid tw-grid-cols-1 tw-gap-x-8 tw-gap-y-6 lg:tw-mt-8 lg:tw-gap-x-10 lg:tw-gap-y-10 xl:tw-grid-cols-2">
-              <div>
-                <ProfileRatersTableWrapper
-                  initialParams={initialRepGivenParams}
-                />
-              </div>
-              <div>
-                <ProfileRatersTableWrapper
-                  initialParams={initialRepReceivedParams}
-                />
-              </div>
-            </div>
-            */}
           </div>
 
           {/* Right Sidebar - Identity Card */}
@@ -116,18 +99,6 @@ export default function UserPageRep({
           </div>
         </div>
 
-        {/* CIC raters tables - commented out for now
-        <div className="tw-mt-6 tw-grid tw-grid-cols-1 tw-gap-x-8 tw-gap-y-6 lg:tw-mt-8 lg:tw-gap-x-10 lg:tw-gap-y-10 xl:tw-grid-cols-2">
-          <div>
-            <ProfileRatersTableWrapper initialParams={initialCICGivenParams} />
-          </div>
-          <div>
-            <ProfileRatersTableWrapper
-              initialParams={initialCICReceivedParams}
-            />
-          </div>
-        </div>
-        */}
       </div>
     </div>
   );