From 6fa972cba5ecef51bc917d1c210827362043fa31 Mon Sep 17 00:00:00 2001
From: Oksamies <asko.soisalo@gmail.com>
Date: Mon, 16 Dec 2024 19:56:09 +0200
Subject: [PATCH] Package detail page general fixes to sidebar

---
 .../app/p/components/TagList/TagList.tsx      |  25 ++--
 .../TeamMembers/TeamMembers.module.css        |  46 +++---
 .../p/components/TeamMembers/TeamMembers.tsx  | 100 ++++++-------
 .../cyberstorm-remix/app/p/packageListing.css |  35 +++++
 .../cyberstorm-remix/app/p/packageListing.tsx | 140 +++++++++++++-----
 .../cyberstorm/utils/LinkLibrary.tsx          |   7 +
 apps/cyberstorm-storybook/LinkLibrary.tsx     |   7 +
 .../src/forms/AddServiceAccountForm.tsx       |   6 +-
 .../CopyButton/CopyButton.module.css          |   6 +
 .../src/components/CopyButton/CopyButton.tsx  |  38 +++--
 .../src/components/Links/LinkingProvider.tsx  |   3 +
 .../cyberstorm/src/components/Links/Links.tsx |   1 +
 .../Card/CardCommunity/CardCommunity.tsx      |   4 +-
 .../src/newComponents/Tabs/Tabs.css           |   2 +
 .../cyberstorm/src/newComponents/Tag/Tag.css  |  12 +-
 .../cyberstorm/src/newComponents/Tag/Tag.tsx  |   6 +-
 16 files changed, 289 insertions(+), 149 deletions(-)

diff --git a/apps/cyberstorm-remix/app/p/components/TagList/TagList.tsx b/apps/cyberstorm-remix/app/p/components/TagList/TagList.tsx
index f99bf03cf..2e501d4a1 100644
--- a/apps/cyberstorm-remix/app/p/components/TagList/TagList.tsx
+++ b/apps/cyberstorm-remix/app/p/components/TagList/TagList.tsx
@@ -1,6 +1,5 @@
-import { Tag } from "@thunderstore/cyberstorm";
-import { WrapperCard } from "@thunderstore/cyberstorm/src/components/WrapperCard/WrapperCard";
-import styles from "./TagList.module.css";
+import { Heading, Tag } from "@thunderstore/cyberstorm";
+import "../../packageListing.css";
 import { PackageListingDetails } from "@thunderstore/dapper/types";
 import { ReactNode } from "react";
 
@@ -9,19 +8,23 @@ import {
   faThumbtack,
   faWarning,
   faBomb,
-  faTag,
 } from "@fortawesome/free-solid-svg-icons";
 
 export default function TagList(props: { listing: PackageListingDetails }) {
   return (
     <>
-      <WrapperCard
-        title="Tags"
-        content={
-          <div className={styles.list}>{getPackageFlags(props.listing)}</div>
-        }
-        headerIcon={<FontAwesomeIcon icon={faTag} />}
-      />
+      <div className="nimbus-packagelisting__sidebar__wrapper">
+        <Heading
+          csLevel="4"
+          csSize="4"
+          className="nimbus-packagelisting__sidebar__wrapper__title"
+        >
+          Categories
+        </Heading>
+        <div className="nimbus-packagelisting__sidebar__wrapper__categories_or_tags">
+          {getPackageFlags(props.listing)}
+        </div>
+      </div>
     </>
   );
 }
diff --git a/apps/cyberstorm-remix/app/p/components/TeamMembers/TeamMembers.module.css b/apps/cyberstorm-remix/app/p/components/TeamMembers/TeamMembers.module.css
index d3ab015df..713227930 100644
--- a/apps/cyberstorm-remix/app/p/components/TeamMembers/TeamMembers.module.css
+++ b/apps/cyberstorm-remix/app/p/components/TeamMembers/TeamMembers.module.css
@@ -4,8 +4,11 @@
 
 .item {
   display: flex;
-  gap: var(--gap-md);
-  padding: var(--space-8);
+  gap: 1rem;
+  align-items: center;
+  align-self: stretch;
+  width: 100%;
+  padding: 0.5rem;
   border-radius: var(--radius-md);
 }
 
@@ -14,41 +17,42 @@
 }
 
 .itemTitle {
-  font-weight: var(--font-weight-bold);
-  font-size: var(--font-size-body-lg);
-  line-height: var(--line-height--m);
+  display: flex;
+  gap: 0.25rem;
+  align-items: center;
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-weight: 700;
+  font-size: var(--font-size-body-md);
+  line-height: 150%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .itemDescription {
   color: var(--color-text-tertiary);
-  font-weight: var(--font-weight-medium);
-  font-size: var(--font-size-body-lg);
-  line-height: var(--line-height--m);
+  font-weight: 400;
+  font-size: var(--font-size-body-sm);
+  line-height: 170%;
 }
 
 .teamLink {
   display: flex;
   gap: var(--gap-xs);
   align-items: center;
-  color: var(--color-highlight);
-  font-weight: var(--font-weight-semibold);
-  font-size: var(--font-size-body-lg);
-  line-height: var(--line-height--m);
-}
+  color: var(--color-cyber-green-7, #23ffab);
+  font-weight: 400;
+  font-size: var(--font-size-body-md);
+  line-height: 150%;
 
-.teamLinkIcon {
-  width: 1em;
-  height: 1em;
-}
-
-.teamLink:hover {
-  color: var(--color-highlight--hover);
+  --icon-color: var(--color-cyber-green-7, #23ffab);
 }
 
 .crown {
   display: inline-flex;
+  align-items: center;
   width: 1em;
   height: 1em;
-  margin-left: var(--space-4);
   color: var(--color-crown);
+  line-height: 160%;
 }
diff --git a/apps/cyberstorm-remix/app/p/components/TeamMembers/TeamMembers.tsx b/apps/cyberstorm-remix/app/p/components/TeamMembers/TeamMembers.tsx
index 9adf6d5cc..13e901b28 100644
--- a/apps/cyberstorm-remix/app/p/components/TeamMembers/TeamMembers.tsx
+++ b/apps/cyberstorm-remix/app/p/components/TeamMembers/TeamMembers.tsx
@@ -1,76 +1,76 @@
-import { Avatar, Icon, CyberstormLink } from "@thunderstore/cyberstorm";
-import {
-  faUsers,
-  faCaretRight,
-  faCrown,
-} from "@fortawesome/free-solid-svg-icons";
+import { Avatar, Heading, NewIcon, NewLink } from "@thunderstore/cyberstorm";
+import { faCaretRight, faCrown } from "@fortawesome/free-solid-svg-icons";
+import "../../packageListing.css";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import styles from "./TeamMembers.module.css";
-import { WrapperCard } from "@thunderstore/cyberstorm/src/components/WrapperCard/WrapperCard";
 import { PackageListingDetails, TeamMember } from "@thunderstore/dapper/types";
 
 export default function TeamMembers(props: { listing: PackageListingDetails }) {
   const mappedPackageTeamList = props.listing.team.members
     .sort(compare)
     .map((teamMember, index) => {
-      return (
-        <div key={index}>
-          <PackageTeamListItem teamMember={teamMember} />
-        </div>
-      );
+      return <PackageTeamListItem key={index} teamMember={teamMember} />;
     });
 
   return (
-    <>
-      <WrapperCard
-        title="Team"
-        content={<div className={styles.list}>{mappedPackageTeamList}</div>}
-        headerIcon={<FontAwesomeIcon icon={faUsers} />}
-        headerRightContent={
-          props.listing.team ? (
-            <CyberstormLink
-              linkId="Team"
-              community={props.listing.community_identifier}
-              team={props.listing.team.name}
-            >
-              <div className={styles.teamLink}>
-                See team
-                <Icon inline wrapperClasses={styles.teamLinkIcon}>
-                  <FontAwesomeIcon icon={faCaretRight} />
-                </Icon>
-              </div>
-            </CyberstormLink>
-          ) : null
-        }
-      />
-    </>
+    <div className="nimbus-packagelisting__sidebar__wrapper">
+      <div className="nimbus-packagelisting__sidebar__wrapper__header">
+        <Heading
+          csLevel="4"
+          csSize="4"
+          className="nimbus-packagelisting__sidebar__wrapper__title"
+        >
+          Team
+        </Heading>
+        <NewLink
+          primitiveType="cyberstormLink"
+          linkId="Team"
+          community={props.listing.community_identifier}
+          team={props.listing.team.name}
+          rootClasses={styles.teamLink}
+        >
+          See team
+          <NewIcon csMode="inline" noWrapper>
+            <FontAwesomeIcon icon={faCaretRight} />
+          </NewIcon>
+        </NewLink>
+      </div>
+      <div className="nimbus-packagelisting__sidebar__wrapper__team_list">
+        {mappedPackageTeamList}
+      </div>
+    </div>
   );
 }
 
 interface PackageTeamListItemProps {
+  key: number;
   teamMember: TeamMember;
 }
 
 function PackageTeamListItem(props: PackageTeamListItemProps) {
-  const { teamMember } = props;
+  const { key, teamMember } = props;
 
   return (
-    <CyberstormLink linkId="User" user={teamMember.username}>
-      <div className={styles.item}>
-        <Avatar username={teamMember.username} src={teamMember.avatar} />
-        <div>
-          <div className={styles.itemTitle}>
-            {teamMember.username}
-            {teamMember.role === "owner" ? (
-              <Icon inline wrapperClasses={styles.crown}>
-                <FontAwesomeIcon icon={faCrown} />
-              </Icon>
-            ) : null}
-          </div>
-          <div className={styles.itemDescription}>{teamMember.role}</div>
+    <NewLink
+      key={key}
+      primitiveType="cyberstormLink"
+      linkId="User"
+      user={teamMember.username}
+      rootClasses={styles.item}
+    >
+      <Avatar username={teamMember.username} src={teamMember.avatar} />
+      <div>
+        <div className={styles.itemTitle}>
+          {teamMember.username}
+          {teamMember.role === "owner" ? (
+            <NewIcon csMode="inline" noWrapper rootClasses={styles.crown}>
+              <FontAwesomeIcon icon={faCrown} />
+            </NewIcon>
+          ) : null}
         </div>
+        <div className={styles.itemDescription}>{teamMember.role}</div>
       </div>
-    </CyberstormLink>
+    </NewLink>
   );
 }
 
diff --git a/apps/cyberstorm-remix/app/p/packageListing.css b/apps/cyberstorm-remix/app/p/packageListing.css
index 66826deb4..9d6abdcf3 100644
--- a/apps/cyberstorm-remix/app/p/packageListing.css
+++ b/apps/cyberstorm-remix/app/p/packageListing.css
@@ -126,6 +126,7 @@
   .nimbus-packagelisting__sidebar__meta__item__content__dependencystring {
     display: -webkit-box;
     flex: 1 0 0;
+    max-width: 15ch;
     overflow: hidden;
     color: var(--color-text-primary);
     font-weight: var(--font-weight-bold);
@@ -149,4 +150,38 @@
     gap: 0.5rem;
     row-gap: 0.5rem;
   }
+
+  .nimbus-packagelisting__sidebar__wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    align-items: flex-start;
+    align-self: stretch;
+    padding: 1rem;
+    border-radius: var(--radius-md);
+    background: rgb(59 63 125 / 0.24);
+  }
+
+  .nimbus-packagelisting__sidebar__wrapper__header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .nimbus-packagelisting__sidebar__wrapper__categories_or_tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    align-content: flex-start;
+    align-items: flex-start;
+    align-self: stretch;
+  }
+
+  .nimbus-packagelisting__sidebar__wrapper__team_list {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    align-self: stretch;
+  }
 }
diff --git a/apps/cyberstorm-remix/app/p/packageListing.tsx b/apps/cyberstorm-remix/app/p/packageListing.tsx
index 0dfe0bb00..aa3500799 100644
--- a/apps/cyberstorm-remix/app/p/packageListing.tsx
+++ b/apps/cyberstorm-remix/app/p/packageListing.tsx
@@ -9,13 +9,14 @@ import {
   Button,
   CopyButton,
   Dialog,
+  Heading,
   Image,
   NewBreadCrumbs,
   NewButton,
   NewIcon,
   NewLink,
+  NewTag,
   Tabs,
-  Tag,
 } from "@thunderstore/cyberstorm";
 import "./packageListing.css";
 import { getDapper } from "cyberstorm/dapper/sessionUtils";
@@ -28,13 +29,11 @@ import {
   faHandHoldingHeart,
   faDownload,
   faThumbsUp,
-  faBoxes,
+  faWarning,
+  faThumbTack,
 } from "@fortawesome/free-solid-svg-icons";
-import { WrapperCard } from "@thunderstore/cyberstorm/src/components/WrapperCard/WrapperCard";
-import TagList from "./components/TagList/TagList";
-import Dependencies from "./components/Dependencies/Dependencies";
 import TeamMembers from "./components/TeamMembers/TeamMembers";
-import { useEffect, useRef, useState } from "react";
+import { ReactNode, useEffect, useRef, useState } from "react";
 import { useHydrated } from "remix-utils/use-hydrated";
 import {
   PackageDeprecateAction,
@@ -42,7 +41,11 @@ import {
   PackageLikeAction,
 } from "@thunderstore/cyberstorm-forms";
 import { PageHeader } from "~/commonComponents/PageHeader/PageHeader";
-import { faArrowUpRight } from "@fortawesome/pro-solid-svg-icons";
+import {
+  faArrowUpRight,
+  faLips,
+  faSparkles,
+} from "@fortawesome/pro-solid-svg-icons";
 import { RelativeTime } from "@thunderstore/cyberstorm/src/components/RelativeTime/RelativeTime";
 import {
   formatFileSize,
@@ -207,24 +210,77 @@ export default function Community() {
   // Sidebar helpers
   const mappedPackageTagList = listing.categories.map((category) => {
     return (
-      <Tag
-        colorScheme="borderless_no_hover"
-        size="mediumPlus"
-        key={category.name}
-        label={category.name.toUpperCase()}
-      />
+      <NewTag key={category.name} csSize="small" csVariant="primary">
+        {category.name}
+      </NewTag>
     );
   });
 
   const currentTab = location.pathname.endsWith("/changelog")
     ? "changelog"
-    : location.pathname.endsWith("/versions")
-      ? "versions"
-      : location.pathname.endsWith("/wiki")
-        ? "wiki"
-        : location.pathname.endsWith("/source")
-          ? "source"
-          : "details";
+    : location.pathname.endsWith("/required")
+      ? "required"
+      : location.pathname.endsWith("/versions")
+        ? "versions"
+        : location.pathname.endsWith("/wiki")
+          ? "wiki"
+          : location.pathname.endsWith("/source")
+            ? "source"
+            : "details";
+
+  const updateTimeDelta = Math.round(
+    (Date.now() - Date.parse(listing.last_updated)) / 86400000
+  );
+  const isNew = updateTimeDelta < 3;
+  if (
+    !listing.is_pinned &&
+    !listing.is_nsfw &&
+    !listing.is_deprecated &&
+    !isNew
+  ) {
+    return null;
+  }
+  const flagList: ReactNode[] = [];
+  if (listing.is_pinned) {
+    flagList.push(
+      <NewTag csSize="small" csModifiers={["dark"]} csVariant="blue">
+        <NewIcon noWrapper csMode="inline">
+          <FontAwesomeIcon icon={faThumbTack} />
+        </NewIcon>
+        Pinned
+      </NewTag>
+    );
+  }
+  if (listing.is_deprecated) {
+    flagList.push(
+      <NewTag csSize="small" csModifiers={["dark"]} csVariant="yellow">
+        <NewIcon noWrapper csMode="inline">
+          <FontAwesomeIcon icon={faWarning} />
+        </NewIcon>
+        Deprecated
+      </NewTag>
+    );
+  }
+  if (listing.is_nsfw) {
+    flagList.push(
+      <NewTag csSize="small" csModifiers={["dark"]} csVariant="pink">
+        <NewIcon noWrapper csMode="inline">
+          <FontAwesomeIcon icon={faLips} />
+        </NewIcon>
+        NSFW
+      </NewTag>
+    );
+  }
+  if (isNew) {
+    flagList.push(
+      <NewTag csSize="small" csModifiers={["dark"]} csVariant="green">
+        <NewIcon noWrapper csMode="inline">
+          <FontAwesomeIcon icon={faSparkles} />
+        </NewIcon>
+        New
+      </NewTag>
+    );
+  }
 
   return (
     <>
@@ -395,6 +451,19 @@ export default function Community() {
                 },
                 current: currentTab === "details",
               },
+              {
+                itemProps: {
+                  key: "required",
+                  primitiveType: "cyberstormLink",
+                  linkId: "PackageRequired",
+                  community: listing.community_identifier,
+                  namespace: listing.namespace,
+                  package: listing.name,
+                  "aria-current": currentTab === "required",
+                  children: <>Required</>,
+                },
+                current: currentTab === "required",
+              },
               {
                 itemProps: {
                   key: "wiki",
@@ -584,19 +653,24 @@ export default function Community() {
               </div>
             </div>
           </div>
-          {listing.categories.length > 0 ? (
-            <WrapperCard
-              title="Categories"
-              content={
-                <div className="nimbus-packagelisting__sidebar__categories">
-                  {mappedPackageTagList}
-                </div>
-              }
-              headerIcon={<FontAwesomeIcon icon={faBoxes} />}
-            />
-          ) : null}
-          <TagList listing={listing} />
-          <Dependencies listing={listing} />
+          <div className="nimbus-packagelisting__sidebar__wrapper">
+            <div className="nimbus-packagelisting__sidebar__wrapper__header">
+              <Heading
+                csLevel="4"
+                csSize="4"
+                className="nimbus-packagelisting__sidebar__wrapper__title"
+              >
+                Categories
+              </Heading>
+            </div>
+            <div className="nimbus-packagelisting__sidebar__wrapper__categories_or_tags">
+              {mappedPackageTagList}
+            </div>
+            <div className="nimbus-packagelisting__sidebar__wrapper__categories_or_tags">
+              {flagList}
+            </div>
+          </div>
+
           <TeamMembers listing={listing} />
         </div>
       </main>
diff --git a/apps/cyberstorm-remix/cyberstorm/utils/LinkLibrary.tsx b/apps/cyberstorm-remix/cyberstorm/utils/LinkLibrary.tsx
index 9d0af9b5a..24a5ff828 100644
--- a/apps/cyberstorm-remix/cyberstorm/utils/LinkLibrary.tsx
+++ b/apps/cyberstorm-remix/cyberstorm/utils/LinkLibrary.tsx
@@ -77,6 +77,13 @@ const library: LinkLibrary = {
       ref={p.customRef}
     />
   ),
+  PackageRequired: (p) => (
+    <Link
+      {...p}
+      url={`/c/${p.community}/p/${p.namespace}/${p.package}/required`}
+      ref={p.customRef}
+    />
+  ),
   PackageWiki: (p) => (
     <Link
       {...p}
diff --git a/apps/cyberstorm-storybook/LinkLibrary.tsx b/apps/cyberstorm-storybook/LinkLibrary.tsx
index f12f61002..0a294ee43 100644
--- a/apps/cyberstorm-storybook/LinkLibrary.tsx
+++ b/apps/cyberstorm-storybook/LinkLibrary.tsx
@@ -87,6 +87,13 @@ const library: LinkLibrary = {
       ref={p.customRef}
     />
   ),
+  PackageRequired: (p) => (
+    <Link
+      {...p}
+      url={`/c/${p.community}/p/${p.namespace}/${p.package}/required`}
+      ref={p.customRef}
+    />
+  ),
   PackageWiki: (p) => (
     <Link
       {...p}
diff --git a/packages/cyberstorm-forms/src/forms/AddServiceAccountForm.tsx b/packages/cyberstorm-forms/src/forms/AddServiceAccountForm.tsx
index a249f8c84..175f38aee 100644
--- a/packages/cyberstorm-forms/src/forms/AddServiceAccountForm.tsx
+++ b/packages/cyberstorm-forms/src/forms/AddServiceAccountForm.tsx
@@ -74,11 +74,7 @@ export function AddServiceAccountForm(props: {
           </p>
           <div className={styles.token}>
             <pre className={styles.tokenField}>{addedServiceAccountToken}</pre>
-            <CopyButton
-              colorScheme="default"
-              paddingSize="mediumSquare"
-              text={addedServiceAccountToken}
-            />
+            <CopyButton text={addedServiceAccountToken} />
           </div>
           <Alert
             icon={<FontAwesomeIcon icon={faCircleExclamation} />}
diff --git a/packages/cyberstorm/src/components/CopyButton/CopyButton.module.css b/packages/cyberstorm/src/components/CopyButton/CopyButton.module.css
index 4535e42bc..c09536d6e 100644
--- a/packages/cyberstorm/src/components/CopyButton/CopyButton.module.css
+++ b/packages/cyberstorm/src/components/CopyButton/CopyButton.module.css
@@ -1,3 +1,9 @@
+.root {
+  width: 1rem;
+  height: 1rem;
+  background: transparent;
+}
+
 .copy {
   all: unset;
   color: var(--color-text-tertiary);
diff --git a/packages/cyberstorm/src/components/CopyButton/CopyButton.tsx b/packages/cyberstorm/src/components/CopyButton/CopyButton.tsx
index c46c2355d..de0497973 100644
--- a/packages/cyberstorm/src/components/CopyButton/CopyButton.tsx
+++ b/packages/cyberstorm/src/components/CopyButton/CopyButton.tsx
@@ -4,7 +4,7 @@ import { faClone, faCheck } from "@fortawesome/free-solid-svg-icons";
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
 import styles from "./CopyButton.module.css";
 import { Tooltip } from "../Tooltip/Tooltip";
-import * as Button from "../Button/";
+import { NewIcon } from "../..";
 
 type CopyButtonProps = {
   text: string;
@@ -44,11 +44,7 @@ function useCopyToClipboard(
 }
 
 export function CopyButton(props: CopyButtonProps) {
-  const {
-    text,
-    paddingSize = "none",
-    colorScheme = "transparentDefault",
-  } = props;
+  const { text } = props;
 
   const [isSupported, setIsSupported] = useState(false);
   const [isTooltipOpen, setIsTooltipOpen] = useState(false);
@@ -67,22 +63,22 @@ export function CopyButton(props: CopyButtonProps) {
       open={isTooltipOpen}
       side="bottom"
     >
-      <div className={styles.root}>
-        <Button.Root
-          paddingSize={paddingSize}
-          colorScheme={colorScheme}
-          onClick={() => useCopyToClipboard(text, setWasRecentlyCopied)}
-          onMouseOver={() => setIsTooltipOpen(true)}
-          onMouseOut={() => setIsTooltipOpen(false)}
+      <button
+        onClick={() => useCopyToClipboard(text, setWasRecentlyCopied)}
+        onMouseOver={() => setIsTooltipOpen(true)}
+        onMouseOut={() => setIsTooltipOpen(false)}
+        onBlur={() => {}}
+        onFocus={() => {}}
+        className={styles.root}
+      >
+        <NewIcon
+          rootClasses={wasRecentlyCopied ? styles.checkmark : styles.copy}
+          csMode="inline"
+          noWrapper
         >
-          <Button.ButtonIcon>
-            <FontAwesomeIcon
-              icon={wasRecentlyCopied ? faCheck : faClone}
-              className={wasRecentlyCopied ? styles.checkmark : styles.copy}
-            />
-          </Button.ButtonIcon>
-        </Button.Root>
-      </div>
+          <FontAwesomeIcon icon={wasRecentlyCopied ? faCheck : faClone} />
+        </NewIcon>
+      </button>
     </Tooltip>
   ) : null;
 }
diff --git a/packages/cyberstorm/src/components/Links/LinkingProvider.tsx b/packages/cyberstorm/src/components/Links/LinkingProvider.tsx
index b55cac1eb..e14d4cfeb 100644
--- a/packages/cyberstorm/src/components/Links/LinkingProvider.tsx
+++ b/packages/cyberstorm/src/components/Links/LinkingProvider.tsx
@@ -80,6 +80,8 @@ export interface LinkLibrary {
   MarkdownPreview: NoRequiredProps;
   /** Package's detail view */
   Package: (props: AnyProps & PackageProps) => RE | null;
+  /** Package's required view */
+  PackageRequired: (props: AnyProps & PackageProps) => RE | null;
   /** Package's wiki view */
   PackageWiki: (props: AnyProps & PackageProps) => RE | null;
   /** Package's changelog view */
@@ -135,6 +137,7 @@ const library: LinkLibrary = {
   ManifestValidator: noop,
   MarkdownPreview: noop,
   Package: noop,
+  PackageRequired: noop,
   PackageWiki: noop,
   PackageChangelog: noop,
   PackageVersions: noop,
diff --git a/packages/cyberstorm/src/components/Links/Links.tsx b/packages/cyberstorm/src/components/Links/Links.tsx
index 85d756212..91b5be7b8 100644
--- a/packages/cyberstorm/src/components/Links/Links.tsx
+++ b/packages/cyberstorm/src/components/Links/Links.tsx
@@ -27,6 +27,7 @@ export type CyberstormLinkIds =
   | "ManifestValidator"
   | "MarkdownPreview"
   | "Package"
+  | "PackageRequired"
   | "PackageWiki"
   | "PackageChangelog"
   | "PackageVersions"
diff --git a/packages/cyberstorm/src/newComponents/Card/CardCommunity/CardCommunity.tsx b/packages/cyberstorm/src/newComponents/Card/CardCommunity/CardCommunity.tsx
index 02c9194dc..9834b5e82 100644
--- a/packages/cyberstorm/src/newComponents/Card/CardCommunity/CardCommunity.tsx
+++ b/packages/cyberstorm/src/newComponents/Card/CardCommunity/CardCommunity.tsx
@@ -26,7 +26,7 @@ export function CardCommunity(props: Props) {
       {isPopular || isNew ? (
         <div className="ts-cardcommunity__tag">
           {isPopular ? (
-            <NewTag csModifiers={["dark"]} csVariant="orange">
+            <NewTag csModifiers={["dark"]} csVariant="orange" csSize="small">
               <NewIcon noWrapper csMode="inline">
                 <FontAwesomeIcon icon={faFire} />
               </NewIcon>
@@ -34,7 +34,7 @@ export function CardCommunity(props: Props) {
             </NewTag>
           ) : null}
           {isNew ? (
-            <NewTag csModifiers={["dark"]} csVariant="green">
+            <NewTag csModifiers={["dark"]} csVariant="green" csSize="small">
               <NewIcon noWrapper csMode="inline">
                 <FontAwesomeIcon icon={faHandSparkles} />
               </NewIcon>
diff --git a/packages/cyberstorm/src/newComponents/Tabs/Tabs.css b/packages/cyberstorm/src/newComponents/Tabs/Tabs.css
index 4d9da8af3..0d31325fb 100644
--- a/packages/cyberstorm/src/newComponents/Tabs/Tabs.css
+++ b/packages/cyberstorm/src/newComponents/Tabs/Tabs.css
@@ -8,6 +8,8 @@
   }
 
   .ts-tabs-item {
+    position: relative;
+    bottom: calc(-1 * var(--tabs-border-bottom-width));
     display: inline-flex;
     flex-shrink: 0;
     gap: var(--tabs-item-gap);
diff --git a/packages/cyberstorm/src/newComponents/Tag/Tag.css b/packages/cyberstorm/src/newComponents/Tag/Tag.css
index 81efdf206..3cf9fa80d 100644
--- a/packages/cyberstorm/src/newComponents/Tag/Tag.css
+++ b/packages/cyberstorm/src/newComponents/Tag/Tag.css
@@ -4,17 +4,23 @@
     gap: var(--tag-gap);
     align-items: center;
     justify-content: center;
+    max-width: 100%;
     height: var(--tag-height);
     border-radius: var(--tag-border-radius);
     overflow: hidden;
     color: var(--tag-color);
     font-weight: var(--tag-font-weight);
     font-size: var(--tag-font-size);
-    white-space: nowrap;
-    text-decoration: none;
-    text-overflow: ellipsis;
     background: var(--tag-background-color);
     padding-block: var(--tag-padding-block);
     padding-inline: var(--tag-padding-inline);
   }
+
+  .ts-tag__content {
+    min-width: 0;
+    overflow-x: clip;
+    white-space: nowrap;
+    text-decoration: none;
+    text-overflow: ellipsis;
+  }
 }
diff --git a/packages/cyberstorm/src/newComponents/Tag/Tag.tsx b/packages/cyberstorm/src/newComponents/Tag/Tag.tsx
index 8b7738b9a..10707f321 100644
--- a/packages/cyberstorm/src/newComponents/Tag/Tag.tsx
+++ b/packages/cyberstorm/src/newComponents/Tag/Tag.tsx
@@ -53,7 +53,7 @@ export const Tag = React.forwardRef<
         )}
         ref={fRef}
       >
-        {children}
+        <div className="ts-tag__content">{children}</div>
       </Actionable>
     );
   }
@@ -72,7 +72,7 @@ export const Tag = React.forwardRef<
         )}
         ref={fRef}
       >
-        {children}
+        <div className="ts-tag__content">{children}</div>
       </Actionable>
     );
   }
@@ -89,7 +89,7 @@ export const Tag = React.forwardRef<
       )}
       ref={forwardedRef}
     >
-      {children}
+      <div className="ts-tag__content">{children}</div>
     </Frame>
   );
 });