From e587cfa7928a966ad95c5db17e6c4894d419af75 Mon Sep 17 00:00:00 2001
From: kpdve <kacperzielinski.dev@gmail.com>
Date: Wed, 2 Apr 2025 17:43:13 +0200
Subject: [PATCH 1/2] feat(app): trusted user container

---
 .../dtos/user-profile.dto.ts                  |  1 +
 src/containers/trusted-user.container.tsx     | 77 +++++++++++++++++++
 src/features/creator/creator.view.tsx         |  2 +
 3 files changed, 80 insertions(+)
 create mode 100644 src/containers/trusted-user.container.tsx

diff --git a/src/api-4markdown-contracts/dtos/user-profile.dto.ts b/src/api-4markdown-contracts/dtos/user-profile.dto.ts
index a51b243ec..dc1c29132 100644
--- a/src/api-4markdown-contracts/dtos/user-profile.dto.ts
+++ b/src/api-4markdown-contracts/dtos/user-profile.dto.ts
@@ -27,6 +27,7 @@ type UserProfileDto = {
   twitterUrl: string | null;
   fbUrl: string | null;
   blogUrl: string | null;
+  isTrusted: boolean | null;
 };
 
 export type { UserProfileDto };
diff --git a/src/containers/trusted-user.container.tsx b/src/containers/trusted-user.container.tsx
new file mode 100644
index 000000000..b242d22ae
--- /dev/null
+++ b/src/containers/trusted-user.container.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import type { ReactNode, DetailedHTMLProps, ButtonHTMLAttributes } from 'react';
+import { useYourUserProfileState } from 'store/your-user-profile';
+import { MdVerified, MdGppBad, MdGppMaybe } from 'react-icons/md';
+import c from 'classnames';
+
+interface TooltipProps
+  extends DetailedHTMLProps<
+    ButtonHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement
+  > {
+  text: string;
+  children: ReactNode;
+  className?: string;
+}
+
+const Tooltip = ({ text, children, className }: TooltipProps) => (
+  <div className={c(`group relative inline-block`, className)}>
+    <span>{children}</span>
+    <span
+      className={c(
+        `pointer-events-none absolute left-1/2 -translate-x-1/2`,
+        `whitespace-nowrap rounded bg-black px-2 py-1 text-white`,
+        `opacity-0 transition group-hover:opacity-100`,
+        // Mobile: show above
+        `bottom-full mb-2`,
+        `before:absolute before:left-1/2 before:-translate-x-1/2`,
+        `before:border-4 before:border-transparent before:border-t-black`,
+        `before:bottom-[-8px]`,
+        // Desktop: show below
+        `md:bottom-auto md:top-full md:mt-2`,
+        `md:before:bottom-auto md:before:top-[-8px]`,
+        `md:before:border-t-transparent md:before:border-b-black`,
+      )}
+    >
+      {text}
+    </span>
+  </div>
+);
+
+const TrustedUserContainer = () => {
+  const yourUserProfile = useYourUserProfileState();
+
+  if (yourUserProfile.is !== `ok`) {
+    return (
+      <Tooltip
+        title={`Trusted user loading container`}
+        text={`Loading verification status...`}
+      >
+        <span className={`text-gray-400 dark:text-gray-500`}>
+          <MdGppMaybe size={24} />
+        </span>
+      </Tooltip>
+    );
+  }
+
+  const isVerified = yourUserProfile.user?.isTrusted;
+
+  return (
+    <Tooltip
+      title={`Trusted user container`}
+      text={isVerified ? `User is verified` : `User is not verified`}
+    >
+      <span
+        className={
+          isVerified
+            ? `text-green-700 dark:text-green-400`
+            : `text-red-500 dark:text-red-400`
+        }
+      >
+        {isVerified ? <MdVerified size={24} /> : <MdGppBad size={24} />}
+      </span>
+    </Tooltip>
+  );
+};
+
+export { TrustedUserContainer };
diff --git a/src/features/creator/creator.view.tsx b/src/features/creator/creator.view.tsx
index 6e02efa43..9c9be797a 100644
--- a/src/features/creator/creator.view.tsx
+++ b/src/features/creator/creator.view.tsx
@@ -36,6 +36,7 @@ import {
   isInvalidSelection,
   getSelectedText,
 } from 'development-kit/textarea-utils';
+import { TrustedUserContainer } from 'containers/trusted-user.container';
 
 const CreatorErrorModalContainer = React.lazy(
   () => import(`./containers/creator-error-modal.container`),
@@ -320,6 +321,7 @@ const CreatorView = () => {
           </nav>
           <div />
           <nav className="flex items-center gap-2">
+            <TrustedUserContainer />
             <UserPopover />
             <MoreNav />
           </nav>

From 1c9983b12e670e266be29c5603c0bcaf7ccee59d Mon Sep 17 00:00:00 2001
From: kpdve <kacperzielinski.dev@gmail.com>
Date: Wed, 2 Apr 2025 18:01:08 +0200
Subject: [PATCH 2/2] feat(app): add isTrusted to docs-display.cy.ts

---
 cypress/e2e/docs-display.cy.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/cypress/e2e/docs-display.cy.ts b/cypress/e2e/docs-display.cy.ts
index e4a87582f..3806c6d41 100644
--- a/cypress/e2e/docs-display.cy.ts
+++ b/cypress/e2e/docs-display.cy.ts
@@ -48,6 +48,7 @@ const getUserProfileResponse: { result: UserProfileDto } = {
     githubUrl: null,
     twitterUrl: null,
     linkedInUrl: null,
+    isTrusted: null,
   },
 };