Skip to content

Add package management tools #1507

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 22, 2025
Merged

Add package management tools #1507

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 32 additions & 5 deletions apps/cyberstorm-remix/app/c/Community.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,41 @@
@layer nimbus-layout {
.community {
--nimbus-layout-content-max-width: 120rem;
}

.community__heading {
z-index: 1;
display: flex;
gap: var(--gap-xl);
align-items: center;
flex-direction: column;
gap: 1rem;
align-items: flex-start;
align-self: stretch;
padding: var(--space-8) 0 var(--space-20);
padding: 7.5rem 3rem 2rem;
}

Comment on lines 2 to +13
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Anchor the absolute hero background to the community container

Add position: relative (and consider a stacking context) so the absolutely positioned background is scoped to .community. This also helps ensure border radius and overflow apply as intended.

 .community {
   --nimbus-layout-content-max-width: 120rem;

   z-index: 1;
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: 1rem;
   align-items: flex-start;
   align-self: stretch;
   padding: 7.5rem 3rem 2rem;
 }
🤖 Prompt for AI Agents 
In apps/cyberstorm-remix/app/c/Community.css around lines 2 to 13, the
.community container lacks positioning so any absolutely positioned hero
background isn't scoped to it; update the .community rule to include position:
relative to anchor the absolutely positioned background, and if you need to
enforce stacking and clipping also add an appropriate z-index (already present)
plus establish a stacking context with transform: translateZ(0) or isolation:
isolate and ensure border-radius/overflow settings are applied so the absolute
background is clipped as intended.

.community__background {
position: absolute;
display: flex;
flex-direction: column;
align-items: flex-start;
height: 20rem;
border-radius: var(--section-border-radius);
overflow: hidden;
}
Comment on lines +14 to +22
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Background container lacks sizing and stacking; can render unpredictably

As an absolutely positioned sibling, .community__background needs explicit inset or width to fill the header area, and a lower z-index so content sits above.

 .community__background {
   position: absolute;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   height: 20rem;
   border-radius: var(--section-border-radius);
   overflow: hidden;
+  inset: 0 auto auto 0; /* top/left pinned */
+  width: 100%;
+  z-index: 0;           /* ensure it's behind content */
+  pointer-events: none; /* avoid intercepting clicks on links above */
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
.community__background {
position: absolute;
display: flex;
flex-direction: column;
align-items: flex-start;
height: 20rem;
border-radius: var(--section-border-radius);
overflow: hidden;
}
.community__background {
position: absolute;
display: flex;
flex-direction: column;
align-items: flex-start;
height: 20rem;
border-radius: var(--section-border-radius);
overflow: hidden;
inset: 0 auto auto 0; /* top/left pinned */
width: 100%;
z-index: 0; /* ensure it's behind content */
pointer-events: none; /* avoid intercepting clicks on links above */
}
🤖 Prompt for AI Agents 
In apps/cyberstorm-remix/app/c/Community.css around lines 14 to 22, the
absolutely positioned .community__background lacks explicit sizing/insets and
stacking context which can cause unpredictable rendering; update the rule to
provide explicit insets (e.g., inset: 0 or top/left/right with a fixed
height/width or width:100%) so it reliably fills the header area, and set a
lower z-index (e.g., z-index: 0) so foreground content can sit above it (ensure
foreground elements have higher z-index or position to remain interactive).


.community__background-image {
display: flex;
flex-direction: column;
align-items: flex-start;
background: var(--color-body-bg-color, #101028);

opacity: 0.4;
mix-blend-mode: luminosity;
}
Comment on lines +24 to +32
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Image styles on use flex/background; ensure full-cover behavior

display:flex and background on an img won’t achieve a cover background. Make the image fill and crop properly.

 .community__background-image {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  background: var(--color-body-bg-color, #101028);
-
-  opacity: 0.4;
-  mix-blend-mode: luminosity;
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0.4;
+  mix-blend-mode: luminosity;
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
.community__background-image {
display: flex;
flex-direction: column;
align-items: flex-start;
background: var(--color-body-bg-color, #101028);
opacity: 0.4;
mix-blend-mode: luminosity;
}
.community__background-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.4;
mix-blend-mode: luminosity;
}
🤖 Prompt for AI Agents 
In apps/cyberstorm-remix/app/c/Community.css around lines 24 to 32, the rules
apply display:flex and background to an <img> which won’t produce a full-cover
background; change the approach so the image fills and crops correctly: remove
flex and background properties from the img selector, ensure the element is
sized (width:100%; height:100% or fixed height on its container), set
display:block and object-fit:cover on the <img>, or alternatively move
background/background-size:cover to a wrapper div if you need CSS background
images; ensure the wrapper uses position/size to allow full-cover behavior.


.community__background-tint {
position: absolute;
width: 100%;
height: 20rem;
background: linear-gradient(180deg, rgb(16 16 40 / 0.4) 0%, #101028 85.94%);
}

.community__small-image {
Expand Down
130 changes: 69 additions & 61 deletions apps/cyberstorm-remix/app/c/community.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,66 +176,74 @@ export default function Community() {
const outletContext = useOutletContext() as OutletContextShape;

return (
<div className="container container--y container--full layout__content community">
<NewBreadCrumbs>
<NewBreadCrumbsLink
primitiveType="cyberstormLink"
linkId="Communities"
csVariant="cyber"
>
Communities
</NewBreadCrumbsLink>
<span>
<span>{community.name}</span>
</span>
</NewBreadCrumbs>
<section className="container container--y container--full">
<div className="container container--x community__heading">
<PageHeader
headingLevel="1"
headingSize="3"
variant="simple"
icon={community.community_icon_url}
meta={
<>
{community.wiki_url ? (
<NewLink
primitiveType="link"
href={community.wiki_url}
csVariant="cyber"
rootClasses="community__item"
>
<NewIcon csMode="inline" noWrapper>
<FontAwesomeIcon icon={faBook} />
</NewIcon>
<span>Modding Wiki</span>
<NewIcon csMode="inline" noWrapper>
<FontAwesomeIcon icon={faArrowUpRight} />
</NewIcon>
</NewLink>
) : null}
{community.discord_url ? (
<NewLink
primitiveType="link"
href={community.discord_url}
csVariant="cyber"
rootClasses="community__item"
>
<NewIcon csMode="inline" noWrapper>
<FontAwesomeIcon icon={faDiscord} />
</NewIcon>
<span>Modding Discord</span>
<NewIcon csMode="inline" noWrapper>
<FontAwesomeIcon icon={faArrowUpRight} />
</NewIcon>
</NewLink>
) : null}
</>
}
<>
<div className="community__background">
{community.hero_image_url ? (
<img
src={community.hero_image_url}
alt={community.name}
className="community__background-image"
/>
) : null}
<div className="community__background-tint" />
</div>
<div className="container container--y container--full layout__content community">
Comment on lines +179 to +190
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Hero background is absolutely positioned without a positioned ancestor; likely misaligned/overflowing

The .community__background block is rendered as a sibling before the .community container, and CSS sets it to position: absolute without a positioned ancestor. This will position it relative to the nearest ancestor with non-static positioning (often the page), not the community container, breaking clipping, border-radius, and z-index expectations.

Two fixes (pick one):

  • Move the background inside the .community container as the first child and add position: relative to .community.
  • Wrap both background and content in a new positioned wrapper.

If you choose the first approach, apply this DOM change and the CSS changes suggested in Community.css review.

Apply this diff to move the background inside the container:

-    <>
-      <div className="community__background">
+    <>
+      <div className="container container--y container--full layout__content community">
+        <div className="community__background">
           {community.hero_image_url ? (
             <img
               src={community.hero_image_url}
               alt={community.name}
               className="community__background-image"
             />
           ) : null}
           <div className="community__background-tint" />
-      </div>
-      <div className="container container--y container--full layout__content community">
+        </div>
         <NewBreadCrumbs>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<>
<div className="community__background">
{community.hero_image_url ? (
<img
src={community.hero_image_url}
alt={community.name}
className="community__background-image"
/>
) : null}
<div className="community__background-tint" />
</div>
<div className="container container--y container--full layout__content community">
<>
<div className="container container--y container--full layout__content community">
<div className="community__background">
{community.hero_image_url ? (
<img
src={community.hero_image_url}
alt={community.name}
className="community__background-image"
/>
) : null}
<div className="community__background-tint" />
</div>
<NewBreadCrumbs>
🤖 Prompt for AI Agents 
In apps/cyberstorm-remix/app/c/community.tsx around lines 179 to 190, the
.community__background is rendered as a sibling before the .community container
and is absolutely positioned without a positioned ancestor; move the background
markup inside the .community container as its first child and add position:
relative to the .community CSS so the absolutely positioned background is
clipped and stacked correctly; update Community.css as suggested in the review
(add position: relative to .community and ensure .community__background uses
absolute positioning with appropriate inset, overflow, and border-radius rules)
to complete the fix.

<NewBreadCrumbs>
<NewBreadCrumbsLink
primitiveType="cyberstormLink"
linkId="Communities"
csVariant="cyber"
>
{community.name}
</PageHeader>
</div>
Communities
</NewBreadCrumbsLink>
<span>
<span>{community.name}</span>
</span>
</NewBreadCrumbs>
<PageHeader
headingLevel="1"
headingSize="3"
variant="simple"
icon={community.community_icon_url}
meta={
<>
{community.wiki_url ? (
<NewLink
primitiveType="link"
href={community.wiki_url}
csVariant="cyber"
rootClasses="community__item"
>
<NewIcon csMode="inline" noWrapper>
<FontAwesomeIcon icon={faBook} />
</NewIcon>
<span>Modding Wiki</span>
<NewIcon csMode="inline" noWrapper>
<FontAwesomeIcon icon={faArrowUpRight} />
</NewIcon>
</NewLink>
) : null}
{community.discord_url ? (
<NewLink
primitiveType="link"
href={community.discord_url}
csVariant="cyber"
rootClasses="community__item"
>
<NewIcon csMode="inline" noWrapper>
<FontAwesomeIcon icon={faDiscord} />
</NewIcon>
<span>Modding Discord</span>
<NewIcon csMode="inline" noWrapper>
<FontAwesomeIcon icon={faArrowUpRight} />
</NewIcon>
</NewLink>
) : null}
</>
}
>
{community.name}
</PageHeader>
<PackageSearch
listings={listings}
packageCategories={filters.package_categories}
Expand All @@ -244,7 +252,7 @@ export default function Community() {
currentUser={outletContext.currentUser}
dapper={outletContext.dapper}
/>
</section>
</div>
</div>
</>
);
}
3 changes: 0 additions & 3 deletions apps/cyberstorm-remix/app/commonComponents/Navigation/Navigation.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,9 +65,6 @@
align-items: flex-start;
}

/* .navigation-header__user-dropdown {
} */

.navigation-header__user-button {
display: inline-flex;
flex-shrink: 0;
Expand Down
13 changes: 8 additions & 5 deletions apps/cyberstorm-remix/app/commonComponents/Navigation/Navigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -353,7 +353,6 @@ export function DesktopUserDropdown(props: {
</NewIcon>
</button>
}
rootClasses="navigation-header__user-dropdown"
>
<NewDropDownItem
rootClasses="navigation-header__avatar"
Expand All @@ -367,8 +366,10 @@ export function DesktopUserDropdown(props: {
<NewDropDownDivider />
<NewDropDownItem asChild>
<NewLink
primitiveType="cyberstormLink"
linkId="Settings"
// primitiveType="cyberstormLink"
// linkId="Settings"
primitiveType="link"
href={`${domain}/settings/linked-accounts/`}
rootClasses="dropdown__item navigation-header__dropdown-item"
>
<NewIcon csMode="inline" noWrapper csVariant="tertiary">
Expand All @@ -379,8 +380,10 @@ export function DesktopUserDropdown(props: {
</NewDropDownItem>
<NewDropDownItem asChild>
<NewLink
primitiveType="cyberstormLink"
linkId="Teams"
// primitiveType="cyberstormLink"
// linkId="Teams"
primitiveType="link"
href={`${domain}/settings/teams/`}
rootClasses="dropdown__item navigation-header__dropdown-item"
>
<NewIcon csMode="inline" noWrapper csVariant="tertiary">
Expand Down
3 changes: 1 addition & 2 deletions apps/cyberstorm-remix/app/communities/communities.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,6 @@ export async function clientLoader({ context, request }: LoaderFunctionArgs) {

export default function CommunitiesPage() {
const communitiesData = useLoaderData<typeof loader | typeof clientLoader>();
console.log("Communities data loaded:", communitiesData);
const navigationType = useNavigationType();

const [searchParams, setSearchParams] = useSearchParams();
Expand Down Expand Up @@ -169,7 +168,7 @@ export default function CommunitiesPage() {
/>
<span className="container container--x">
<NewSelect
onChange={changeOrder}
onChange={(val) => changeOrder(val as SortOptions)}
options={selectOptions}
value={searchParams.get("order") ?? SortOptions.Popular}
aria-label="Sort communities by"
Expand Down
92 changes: 92 additions & 0 deletions apps/cyberstorm-remix/app/p/packageEdit.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
@layer nimbus-layout {
.package-edit {
--nimbus-layout-content-max-width: 90rem;
}

.package-edit__main {
display: flex;
gap: var(--gap-xxxl);
align-items: center;
align-self: stretch;
}

.package-edit__section {
display: flex;
flex: 1 1 0;
flex-direction: column;
gap: 3rem;
align-items: stretch;
}

.package-edit__divider {
align-self: stretch;
height: 0.063rem;
background: linear-gradient(0deg, #23234d 0%, #23234d 100%);
}

.package-edit__row {
display: flex;
flex: 1 1 0;
gap: 5rem;
align-items: flex-start;
justify-content: space-between;
}

.package-edit__row-content {
display: flex;
flex: 1 1 0;
gap: var(--gap-md);
}

.package-edit__info {
display: flex;
flex-direction: column;
gap: 0.5rem;
align-items: flex-start;
align-self: stretch;
width: 21rem;
}

.package-edit__title {
align-self: stretch;
color: var(--color-text-primary);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-body-lg);
line-height: var(--line-height-auto);
}

.package-edit__description {
align-self: stretch;
color: var(--color-text-tertiary);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-body-md);
line-height: var(--line-height-md);
}

.package-edit__status {
display: flex;
flex: 1 0 0;
flex-direction: column;
gap: 0.75rem;
align-items: flex-start;
}

.package-edit__status-description {
color: var(--color-text-tertiary);
font-weight: var(--font-weight-regular);

font-size: var(--font-size-body-sm);
line-height: var(--line-height-auto);
}

.package-edit__actions {
display: flex;
flex: 1 0 0;
flex-direction: row;
gap: var(--gap-md);
}

.package-edit__save-button {
flex: 1 0 0;
}
}
Loading
Loading