From 6540d31dc9fb35b01ffc73f8cf57c908fc93f51a Mon Sep 17 00:00:00 2001
From: Siamak Mokhtari <s.mokhtari75@gmail.com>
Date: Tue, 12 Nov 2024 20:51:26 +0330
Subject: [PATCH 1/2] feat: Improved Registy card and Registy page (single)

---
 .../templates/CodemodPage/AuthorSection.tsx   |   7 +-
 .../templates/CodemodPage/CodemodPageUI.tsx   | 105 ++++++++++--------
 .../templates/Registry/RegistryCard.tsx       |  34 +++---
 .../templates/Registry/VerifiedBadge.tsx      |   4 +-
 .../components/templates/Registry/helpers.ts  |  10 ++
 5 files changed, 92 insertions(+), 68 deletions(-)

diff --git a/apps/frontend/components/templates/CodemodPage/AuthorSection.tsx b/apps/frontend/components/templates/CodemodPage/AuthorSection.tsx
index 1051e9f70..34eb0427a 100644
--- a/apps/frontend/components/templates/CodemodPage/AuthorSection.tsx
+++ b/apps/frontend/components/templates/CodemodPage/AuthorSection.tsx
@@ -12,9 +12,8 @@ export const AuthorSection = ({
     className="rounded-sm focus:outline-none focus-visible:ring-[4px] focus-visible:ring-border-light dark:focus-visible:ring-border-dark"
     prefetch
   >
-    <div className="flex items-center gap-xs">
+    <div className="flex items-center gap-xxs group">
       <span className="body-s-medium font-medium">by</span>
-
       <>
         {authorImage?.image.light && (
           <SanityImage
@@ -42,7 +41,9 @@ export const AuthorSection = ({
           />
         )}
       </>
-      <span className="body-s-medium font-medium">{author}</span>
+      <span className="body-s-medium font-mono group-hover:opacity-50 transition-opacity">
+        @{author}
+      </span>
     </div>
   </Link>
 );
diff --git a/apps/frontend/components/templates/CodemodPage/CodemodPageUI.tsx b/apps/frontend/components/templates/CodemodPage/CodemodPageUI.tsx
index 66e590b8a..a07ca7d42 100644
--- a/apps/frontend/components/templates/CodemodPage/CodemodPageUI.tsx
+++ b/apps/frontend/components/templates/CodemodPage/CodemodPageUI.tsx
@@ -3,7 +3,6 @@ import Icon from "@/components/shared/Icon";
 import Section from "@/components/shared/Section";
 import Snippet from "@/components/shared/Snippet";
 import Tag from "@/components/shared/Tag";
-import { AuthorSection } from "@/components/templates/CodemodPage/AuthorSection";
 import { VCCodeShift } from "@/components/templates/CodemodPage/VCCodeShift";
 import { getCodemodCard } from "@/components/templates/CodemodPage/buildYourCodemodCard";
 import { getFrameworkCard } from "@/components/templates/CodemodPage/getFrameworkCard";
@@ -17,10 +16,12 @@ import { prop, uniqBy } from "ramda";
 import type { ReactNode } from "react";
 import VerifiedBadge from "../Registry/VerifiedBadge";
 import {
+  extractRepoPath,
   getAutomationFrameworkTitles,
   getFilterIcon,
   getFilterSection,
 } from "../Registry/helpers";
+import { AuthorSection } from "./AuthorSection";
 import InfoTooltip from "./parts/InfoTooltip";
 
 export interface CodemodPageProps {
@@ -72,6 +73,12 @@ export default function CodemodPageUI({ data, description }: CodemodPageProps) {
   );
 
   const currentVersion = data?.versions[0];
+  const totalRunsValue = data?.totalRuns ?? 0;
+
+  const totalRuns =
+    totalRunsValue < 100 ? "< 100 runs" : totalRunsValue.toLocaleString();
+
+  const sourceRepo = extractRepoPath(currentVersion?.sourceRepo || "");
 
   return (
     <Section className="pt-[calc(var(--header-height)+24px)]">
@@ -88,7 +95,47 @@ export default function CodemodPageUI({ data, description }: CodemodPageProps) {
 
       <div className="relative flex w-full flex-col gap-l pb-xl lg:flex lg:flex-row lg:gap-2xl lg:pb-[80px]">
         <div className="flex w-full flex-col lg:w-2/3">
-          <div className="flex flex-col justify-between gap-4 lg:flex-row lg:items-center">
+          <div className="flex mb-2 flex-col gap-[12px]">
+            {data?.automationName && (
+              <h1 className="m-heading">{unslugify(data?.automationName)}</h1>
+            )}
+          </div>
+
+          <div className="flex mb-3 flex-row gap-xxs">
+            <span className="font-mono">{currentVersion?.version}</span>
+
+            {currentVersion?.updatedAt && (
+              <>
+                <span className="body-s-medium px-1 font-medium text-secondary-light dark:text-secondary-dark">
+                  ·
+                </span>
+                <span>
+                  Last update{" "}
+                  {new Date(currentVersion?.updatedAt).toLocaleString("en-us", {
+                    month: "short",
+                    day: "numeric",
+                    year: "numeric",
+                  })}
+                </span>
+              </>
+            )}
+
+            {/* Attribution */}
+            {data?.author && (
+              <>
+                <span className="body-s-medium px-1 font-medium text-secondary-light dark:text-secondary-dark">
+                  ·
+                </span>
+                <AuthorSection
+                  author={data?.author}
+                  href={authorHref}
+                  authorImage={authorImage}
+                />
+              </>
+            )}
+          </div>
+
+          <div className="flex mb-2 flex-col justify-between gap-4 lg:flex-row lg:items-center">
             <div className="flex items-center gap-xs">
               {data?.verified && (
                 <VerifiedBadge content="Regularly tested and maintained by our engineers and codemod expert community." />
@@ -108,48 +155,10 @@ export default function CodemodPageUI({ data, description }: CodemodPageProps) {
                 </Link>
               )}
             </div>
-            {/* Attribution */}
-            {data?.author && (
-              <AuthorSection
-                author={data?.author}
-                href={authorHref}
-                authorImage={authorImage}
-              />
-            )}
           </div>
 
-          <div className="mt-6 flex flex-col gap-[12px]">
-            {data?.automationName && (
-              <h1 className="m-heading">{unslugify(data?.automationName)}</h1>
-            )}
-          </div>
+          {/* <div className="relative z-20 h-px w-full bg-gradient-to-r from-transparent via-[#0b151e39] dark:via-[#ffffff34]" /> */}
 
-          <div className="mt-6 flex items-center gap-s rounded-[8px] border border-border-light p-s dark:border-border-dark">
-            {/*{frameworks.length ? (*/}
-            {/*  <>*/}
-            {/*    <InfoCard*/}
-            {/*      value={frameworksDescription}*/}
-            {/*      label="Made for"*/}
-            {/*      icon="/icons/badge-info.svg"*/}
-            {/*    />*/}
-            {/*    <span className="h-full w-[2px] bg-border-light dark:bg-border-dark" />*/}
-            {/*  </>*/}
-            {/*) : null}*/}
-            {currentVersion?.updatedAt && (
-              <InfoCard
-                value={new Date(currentVersion?.updatedAt).toLocaleString(
-                  "en-us",
-                  {
-                    month: "short",
-                    day: "numeric",
-                    year: "numeric",
-                  },
-                )}
-                label="Last update"
-                icon="/icons/calendar.svg"
-              />
-            )}
-          </div>
           {description ? (
             <div className="mt-10 hidden flex-col gap-4 lg:flex">
               {description}
@@ -157,10 +166,9 @@ export default function CodemodPageUI({ data, description }: CodemodPageProps) {
           ) : null}
         </div>
         {/* Sidebar */}
-        <aside className="lg:top-[128px] flex h-fit w-full flex-col gap-m lg:sticky lg:w-1/3 lg:min-w-[360px] lg:pl-[52px]">
+        <aside className="lg:top-[128px] flex h-fit w-full flex-col gap-m lg:sticky lg:w-1/3 lg:min-w-[360px] lg:pl-[0]">
           {/* Run */}
-
-          <div className="flex w-full flex-col gap-s rounded-[8px] border border-border-light p-s dark:border-border-dark">
+          <div className="flex w-full flex-col gap-m rounded-[8px] border border-border-light p-s dark:border-border-dark">
             <div className="flex items-center justify-between">
               <p className="xs-heading">Run</p>
               {data?.globalLabels?.documentationPopup && (
@@ -238,10 +246,10 @@ export default function CodemodPageUI({ data, description }: CodemodPageProps) {
                   <a
                     target="_blank"
                     href={currentVersion?.sourceRepo}
-                    className="truncate underline"
+                    className="truncate"
                     rel="noreferrer"
                   >
-                    {currentVersion?.sourceRepo}
+                    {sourceRepo}
                   </a>
                 </div>
               </div>
@@ -255,9 +263,9 @@ export default function CodemodPageUI({ data, description }: CodemodPageProps) {
 
               <div className="flex-1" />
             </div> */}
-            <span className="h-px w-full bg-border-light dark:bg-border-dark" />
+            {/* <span className="h-px w-full bg-border-light dark:bg-border-dark" /> */}
             <div className="flex items-center gap-s">
-              <InfoCard value={String(data?.totalRuns)} label="Total runs" />
+              <InfoCard value={totalRuns} label="Total runs" />
               <span className="h-[36px] w-[2px] bg-border-light dark:bg-border-dark" />
               <InfoCard
                 value={String(currentVersion?.version)}
@@ -267,7 +275,6 @@ export default function CodemodPageUI({ data, description }: CodemodPageProps) {
             <div className="flex flex-wrap gap-2">
               {(currentVersion?.tags?.filter(Boolean).length || 0) > 0 && (
                 <>
-                  <span className="h-px w-full bg-border-light dark:bg-border-dark" />
                   {currentVersion?.tags?.filter(Boolean).map((label) => (
                     <Link prefetch key={label} href={`/registry?q=${label}`}>
                       <Tag key={label}>{label}</Tag>
diff --git a/apps/frontend/components/templates/Registry/RegistryCard.tsx b/apps/frontend/components/templates/Registry/RegistryCard.tsx
index 88fa04260..d046c8edc 100644
--- a/apps/frontend/components/templates/Registry/RegistryCard.tsx
+++ b/apps/frontend/components/templates/Registry/RegistryCard.tsx
@@ -66,14 +66,14 @@ export default function RegistryCard(props: RegistryCardData) {
             </h3>
           </SanityLink>
           {formattedDescription ? (
-            <div className=" mt-10 flex-col gap-4">
+            <div className="mt-4 flex-col gap-4">
               <Markdown>{formattedDescription}</Markdown>
             </div>
           ) : null}
         </div>
       </div>
 
-      <div className="flex w-full flex-col gap-m lg:flex-row lg:justify-between">
+      <div className="flex w-full flex-col gap-m lg:flex-row lg:justify-between lg:items-center">
         {/* tags */}
         <div className="flex items-center gap-xs">
           {props.verified && <VerifiedBadge content={props.verifiedTooltip} />}
@@ -153,16 +153,22 @@ export default function RegistryCard(props: RegistryCardData) {
 
         {/* Attribution */}
         {props.author && (
-          <button
-            onClick={() =>
-              handleFilterChange(REGISTRY_FILTER_TYPES.owner, props.author)
-            }
-            onLoad={() =>
-              prefetchFilterChange(REGISTRY_FILTER_TYPES.owner, props.author)
-            }
+          <div
+            // onClick={() =>
+            //   handleFilterChange(REGISTRY_FILTER_TYPES.owner, props.author)
+            // }
+            // onLoad={() =>
+            //   prefetchFilterChange(REGISTRY_FILTER_TYPES.owner, props.author)
+            // }
             className="rounded-sm focus:outline-none focus-visible:ring-[4px] focus-visible:ring-border-light dark:focus-visible:ring-border-dark"
           >
-            <div className="flex items-center gap-xxs">
+            <SanityLink
+              className="flex items-center gap-xxs group"
+              link={{
+                _type: "link",
+                href: `https://github.com/${props.author}`,
+              }}
+            >
               <span className="body-s-medium font-medium">by</span>
 
               <>
@@ -192,11 +198,11 @@ export default function RegistryCard(props: RegistryCardData) {
                   />
                 )}
               </>
-              <span className="body-s-medium font-medium">
-                {capitalize(props.author)}
+              <span className="body-s-medium font-mono group-hover:opacity-50 transition-opacity">
+                @{props.author}
               </span>
-            </div>
-          </button>
+            </SanityLink>
+          </div>
         )}
       </div>
     </li>
diff --git a/apps/frontend/components/templates/Registry/VerifiedBadge.tsx b/apps/frontend/components/templates/Registry/VerifiedBadge.tsx
index 2636f60a6..65b72e9d8 100644
--- a/apps/frontend/components/templates/Registry/VerifiedBadge.tsx
+++ b/apps/frontend/components/templates/Registry/VerifiedBadge.tsx
@@ -30,13 +30,13 @@ export default function VerifiedBadge({
         {content && (
           <div
             className={cx(
-              "absolute bottom-full left-0 z-10 w-56 cursor-default rounded-md border bg-white p-2 text-left shadow-xl transition-all duration-300 2xl:-left-24 dark:border-border-dark dark:border-opacity-40 dark:bg-background-dark",
+              "absolute bottom-full left-0 z-10 w-56 cursor-default border bg-white/75 p-4 space-y-2 text-left shadow-xl transition-all duration-300 2xl:-left-24 dark:border-border-dark dark:border-opacity-40 dark:bg-background-dark/75 backdrop-blur-lg rounded-xl",
 
               "pointer-events-none invisible translate-y-0 opacity-0",
               "group-hover:pointer-events-auto group-hover:visible group-hover:-translate-y-2 group-hover:opacity-100",
             )}
           >
-            <h5 className="body-s-medium pb-1 font-medium">Codemod verified</h5>
+            <h5 className="body-s-medium font-bold">Codemod verified</h5>
             <p className="body-s font-regular">{content}</p>
           </div>
         )}
diff --git a/apps/frontend/components/templates/Registry/helpers.ts b/apps/frontend/components/templates/Registry/helpers.ts
index d546fb620..400519245 100644
--- a/apps/frontend/components/templates/Registry/helpers.ts
+++ b/apps/frontend/components/templates/Registry/helpers.ts
@@ -142,3 +142,13 @@ export function transformAutomation(
     title: unslugify(automation.name),
   };
 }
+
+export function extractRepoPath(githubUrl: string) {
+  // Remove the protocol (e.g., https:// or http://) and split by "/"
+  const parts = githubUrl
+    .replace(/^https?:\/\/(www\.)?github\.com\//, "")
+    .split("/");
+
+  // Return "username/repo" if it exists, otherwise return an empty string
+  return parts.length >= 2 ? `${parts[0]}/${parts[1]}` : "";
+}

From 6d4560bad3bf79da7466012f11a9c9e6a8489924 Mon Sep 17 00:00:00 2001
From: Siamak Mokhtari <s.mokhtari75@gmail.com>
Date: Mon, 18 Nov 2024 20:20:55 +0330
Subject: [PATCH 2/2] fix(ui): Fixed ui issues on header

---
 .../templates/CodemodPage/CodemodPageUI.tsx           | 11 ++++-------
 .../components/templates/Registry/RegistryCard.tsx    |  2 +-
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/apps/frontend/components/templates/CodemodPage/CodemodPageUI.tsx b/apps/frontend/components/templates/CodemodPage/CodemodPageUI.tsx
index a07ca7d42..9030cef96 100644
--- a/apps/frontend/components/templates/CodemodPage/CodemodPageUI.tsx
+++ b/apps/frontend/components/templates/CodemodPage/CodemodPageUI.tsx
@@ -101,14 +101,12 @@ export default function CodemodPageUI({ data, description }: CodemodPageProps) {
             )}
           </div>
 
-          <div className="flex mb-3 flex-row gap-xxs">
+          <div className="flex mb-3 items-center flex-row gap-xs">
             <span className="font-mono">{currentVersion?.version}</span>
 
             {currentVersion?.updatedAt && (
               <>
-                <span className="body-s-medium px-1 font-medium text-secondary-light dark:text-secondary-dark">
-                  ·
-                </span>
+                <i className="inline-block w-0.5 h-0.5 rounded-full bg-secondary-light dark:bg-secondary-dark" />
                 <span>
                   Last update{" "}
                   {new Date(currentVersion?.updatedAt).toLocaleString("en-us", {
@@ -123,9 +121,8 @@ export default function CodemodPageUI({ data, description }: CodemodPageProps) {
             {/* Attribution */}
             {data?.author && (
               <>
-                <span className="body-s-medium px-1 font-medium text-secondary-light dark:text-secondary-dark">
-                  ·
-                </span>
+                <i className="inline-block w-0.5 h-0.5 rounded-full bg-secondary-light dark:bg-secondary-dark" />
+
                 <AuthorSection
                   author={data?.author}
                   href={authorHref}
diff --git a/apps/frontend/components/templates/Registry/RegistryCard.tsx b/apps/frontend/components/templates/Registry/RegistryCard.tsx
index d046c8edc..44648743d 100644
--- a/apps/frontend/components/templates/Registry/RegistryCard.tsx
+++ b/apps/frontend/components/templates/Registry/RegistryCard.tsx
@@ -163,7 +163,7 @@ export default function RegistryCard(props: RegistryCardData) {
             className="rounded-sm focus:outline-none focus-visible:ring-[4px] focus-visible:ring-border-light dark:focus-visible:ring-border-dark"
           >
             <SanityLink
-              className="flex items-center gap-xxs group"
+              className="inline-flex items-center gap-xxs group"
               link={{
                 _type: "link",
                 href: `https://github.com/${props.author}`,