Introduce new systems, components and rewrite /communities

apps/cyberstorm-remix/app/Error.module.css

@@ -5,8 +5,8 @@
   align-items: center;
   justify-content: center;
 
-  --glitch-color-1: var(--color-cyber-green--50);
-  --glitch-color-2: var(--color-pink--50);
+  --glitch-color-1: var(--old--color-cyber-green--50);
+  --glitch-color-2: var(--old--color-pink--50);
 }
 
 .description {

apps/cyberstorm-remix/app/Markdown.module.css

@@ -96,7 +96,7 @@
   color: #f5f5f6;
 }
 
-.root a { color: var(--color-cyber-green--50); }
+.root a { color: var(--old--color-cyber-green--50); }
 
 .root blockquote {
   display: flex;

apps/cyberstorm-remix/app/RootLayout.module.css

@@ -18,7 +18,10 @@
 
 .middleContainer {
   position: relative;
+  display: flex;
   flex: 1 1 auto;
+  flex-direction: column;
+  gap: 1rem;
   width: 100%;
   max-width: 83.5rem;
 }
@@ -36,7 +39,7 @@
 }
 
 .pageHeader {
-  padding: 2.5rem 0;
+  padding: 0;
 }
 
 .pageBody {
@@ -72,6 +75,14 @@
   .fullWidth {
     flex: 0 0 100%;
   }
+
+  .pageHeader {
+    padding: 2.5rem 0;
+  }
+
+  .middleContainer {
+    gap: 0;
+  }
 }
 
 @media (max-width: 92.125rem) {

apps/cyberstorm-remix/app/commonComponents/PackageSearch/CategoryTagCloud/CategoryTagCloud.module.css

@@ -16,8 +16,8 @@
 }
 
 .tag.exclude {
-  --text-color: var(--color-red--3);
-  --bg-color: var(--color-red--10);
+  --text-color: var(--old--color-red--3);
+  --bg-color: var(--old--color-red--10);
 }
 
 .icon {
@@ -26,5 +26,5 @@
 }
 
 .tag.exclude .icon {
-  --text-color: var(--color-red--3);
+  --text-color: var(--old--color-red--3);
 }

apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CollapsibleMenu.module.css

@@ -32,13 +32,13 @@
   transition: var(--animation-length-xs);
   user-select: none;
 
-  --mark-color: var(--color-purple--6);
+  --mark-color: var(--old--color-purple--6);
 }
 
 .label:hover {
   background-color: var(--color-surface--4);
 
-  --mark-color: var(--color-purple--2);
+  --mark-color: var(--old--color-purple--2);
 }
 
 .checkbox {

apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/FilterMenu.module.css

@@ -26,13 +26,13 @@
   transition: var(--animation-length-xs);
   user-select: none;
 
-  --mark-color: var(--color-purple--6);
+  --mark-color: var(--old--color-purple--6);
 }
 
 .label:hover {
   background-color: var(--color-surface--4);
 
-  --mark-color: var(--color-purple--2);
+  --mark-color: var(--old--color-purple--2);
 }
 
 .checkbox {

apps/cyberstorm-remix/app/communities/Communities.module.css

@@ -0,0 +1,5 @@
+@media (max-width: 40rem) {
+  .breadcrumbs {
+    display: none;
+  }
+}

apps/cyberstorm-remix/app/communities/SearchAndOrder.module.css

@@ -6,46 +6,45 @@
 }
 
 .searchTextInput {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space--8);
   width: 50%;
 }
 
-.searchFilters {
-  display: flex;
-  flex: 0 1 auto;
-  gap: var(--gap--16);
-  align-items: center;
-  justify-content: flex-end;
+.searchInput {
+  max-width: 26.25rem;
 }
 
-.searchFiltersSortLabel {
-  color: var(--color-text--tertiary);
-  font-weight: var(--font-weight-bold);
+.searchFilters {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space--8);
   white-space: nowrap;
 }
 
-.skeletonSearch {
-  height: 2.75rem;
-}
-
-.skeletonSort {
-  width: 13rem;
-  height: 2.75rem;
-}
-
 @media (max-width: 40rem) {
-  .searchTextInput {
-    width: 100%;
-  }
-
   .root {
     flex-direction: column;
   }
 
-  .searchFiltersSortLabel {
+  .searchTextInput {
+    width: 100%;
+  }
+
+  .searchTextInput > span {
     display: none;
   }
 
   .searchFilters {
     width: 100%;
   }
+
+  .searchFilters > span {
+    display: none;
+  }
+
+  .searchInput {
+    max-width: 100%;
+  }
 }

apps/cyberstorm-remix/app/communities/communities.tsx

@@ -1,14 +1,17 @@
 import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
 import {
-  BreadCrumbs,
-  CommunityCard,
+  Container,
+  CardCommunity,
   CommunityCardSkeleton,
   EmptyState,
-  Select,
-  TextInput,
+  Heading,
+  NewBreadCrumbs,
   range,
+  NewTextInput,
+  NewSelect,
 } from "@thunderstore/cyberstorm";
 import rootStyles from "../RootLayout.module.css";
+import styles from "./Communities.module.css";
 import searchAndOrderStyles from "./SearchAndOrder.module.css";
 import communitiesListStyles from "./CommunityList.module.css";
 import { useState, useEffect } from "react";
@@ -25,9 +28,8 @@ import {
   useNavigation,
   useSearchParams,
 } from "@remix-run/react";
-import { Communities } from "@thunderstore/dapper/types";
+import { Communities, Community } from "@thunderstore/dapper/types";
 import { getDapper } from "cyberstorm/dapper/sessionUtils";
-import { PageHeader } from "~/commonComponents/PageHeader/PageHeader";
 
 export const meta: MetaFunction = () => {
   return [
@@ -115,32 +117,42 @@ export default function CommunitiesPage() {
 
   return (
     <>
-      <BreadCrumbs>Communities</BreadCrumbs>
+      <NewBreadCrumbs rootClasses={styles.breadcrumbs}>
+        Communities
+      </NewBreadCrumbs>
       <header className={rootStyles.pageHeader}>
-        <PageHeader title="Communities" />
+        <Heading level="1" styleLevel="2" variant="primary" mode="display">
+          Communities
+        </Heading>
       </header>
       <main className={rootStyles.main}>
-        <div className={searchAndOrderStyles.root}>
+        <Container
+          rootClasses={searchAndOrderStyles.root}
+          csVariant="tertiary"
+          csTextStyles={["fontWeightBold", "lineHeightAuto", "fontSizeS"]}
+        >
           <div className={searchAndOrderStyles.searchTextInput}>
-            <TextInput
+            <span>Search</span>
+            <NewTextInput
               onChange={(e) => setSearchValue(e.target.value)}
               value={searchValue}
               placeholder="Search communities..."
               clearValue={() => setSearchValue("")}
               leftIcon={<FontAwesomeIcon icon={faSearch} />}
+              csColor="cyber-green"
+              rootClasses={searchAndOrderStyles.searchInput}
             />
           </div>
           <div className={searchAndOrderStyles.searchFilters}>
-            <div className={searchAndOrderStyles.searchFiltersSortLabel}>
-              Sort by
-            </div>
-            <Select
+            <span>Sort by</span>
+            <NewSelect
               onChange={changeOrder}
               options={selectOptions}
               value={searchParams.get("order") ?? SortOptions.Popular}
+              aria-label="Sort communities by"
             />
           </div>
-        </div>
+        </Container>
 
         {navigation.state === "loading" ? (
           <CommunitiesListSkeleton />
@@ -152,14 +164,51 @@ export default function CommunitiesPage() {
   );
 }
 
+function comparePackageCount(a: Community, b: Community) {
+  if (a.total_package_count < b.total_package_count) {
+    return 1;
+  }
+  if (a.total_package_count > b.total_package_count) {
+    return -1;
+  }
+  return 0;
+}
+
 function CommunitiesList(props: { communitiesData: Communities }) {
   const { communitiesData } = props;
 
+  const topDogs: Community[] = [];
+  communitiesData.results.reduce((prevCommunity, currentCommunity) => {
+    if (topDogs.length > 4) {
+      topDogs.sort(comparePackageCount);
+      const lastDog = topDogs.at(-1);
+      if (
+        (lastDog ? lastDog.total_package_count : 0) <
+        currentCommunity.total_package_count
+      ) {
+        topDogs.pop();
+        topDogs.push(currentCommunity);
+      }
+    } else {
+      topDogs.push(currentCommunity);
+    }
+    return topDogs;
+  }, topDogs);
+  const flatDogs = topDogs.map((community) => community.identifier);
+
   if (communitiesData.results.length > 0) {
     return (
       <div className={communitiesListStyles.root}>
         {communitiesData.results.map((community) => (
-          <CommunityCard key={community.identifier} community={community} />
+          <CardCommunity
+            key={community.identifier}
+            community={community}
+            isPopular={flatDogs.includes(community.identifier)}
+            isNew={
+              new Date(community.datetime_created).getTime() >
+              new Date().getTime() - 1000 * 60 * 60 * 336
+            }
+          />
         ))}
       </div>
     );

apps/cyberstorm-remix/app/p/Tabs.module.css

@@ -7,7 +7,7 @@
 
 .buttons {
   display: flex;
-  border-bottom: 3px solid var(--color-purple--5);
+  border-bottom: 3px solid var(--old--color-purple--5);
 }
 
 .button {
@@ -20,7 +20,7 @@
   margin-bottom: -3px;
 
   padding: var(--space--12) var(--space--16);
-  border-bottom: 3px solid var(--color-purple--5);
+  border-bottom: 3px solid var(--old--color-purple--5);
   color: var(--tab-color);
   background-color: transparent;
 
@@ -30,7 +30,7 @@
 .button.active {
   border-color: var(--tab-color);
 
-  --tab-color: var(--color-green--5);
+  --tab-color: var(--old--color-green--5);
 }
 
 .button:disabled {

apps/cyberstorm-remix/app/p/dependants/Dependants.module.css

@@ -46,5 +46,5 @@
 }
 
 .header a {
-  color: var(--color-cyber-green--60);
+  color: var(--old--color-cyber-green--60);
 }

apps/cyberstorm-remix/app/root.tsx

@@ -23,7 +23,7 @@ import { LinkLibrary } from "cyberstorm/utils/LinkLibrary";
 import { AdContainer, LinkingProvider } from "@thunderstore/cyberstorm";
 import { DapperTs } from "@thunderstore/dapper-ts";
 // import { CurrentUser } from "@thunderstore/dapper/types";
-import { getDapper } from "cyberstorm/dapper/sessionUtils";
+// import { getDapper } from "cyberstorm/dapper/sessionUtils";
 
 import { captureRemixErrorBoundaryError, withSentry } from "@sentry/remix";
 import {
@@ -183,7 +183,7 @@ function Root() {
                     <div className={styles.sideContainers}>
                       {shouldShowAds
                         ? adContainerIds.map((cid, k_i) => (
-                            <AdContainer key={k_i} containerId={cid} noHeader />
+                            <AdContainer key={k_i} containerId={cid} />
                           ))
                         : null}
                     </div>

apps/cyberstorm-remix/app/settings/teams/team/Tabs.module.css

@@ -7,7 +7,7 @@
 
 .buttons {
   display: flex;
-  border-bottom: 3px solid var(--color-purple--5);
+  border-bottom: 3px solid var(--old--color-purple--5);
 }
 
 .button {
@@ -20,7 +20,7 @@
   margin-bottom: -3px;
 
   padding: var(--space--12) var(--space--16);
-  border-bottom: 3px solid var(--color-purple--5);
+  border-bottom: 3px solid var(--old--color-purple--5);
   color: var(--tab-color);
   background-color: transparent;
 
@@ -30,7 +30,7 @@
 .button.active {
   border-color: var(--tab-color);
 
-  --tab-color: var(--color-green--5);
+  --tab-color: var(--old--color-green--5);
 }
 
 .button:disabled {