Fix issues brought up in QA of PR #1206

.eslintrc.json

@@ -38,7 +38,8 @@
     "@typescript-eslint/no-unused-vars": [
       "error",
       { "ignoreRestSiblings": true }
-    ]
+    ],
+    "linebreak-style": ["error", "unix"]
   },
   "overrides": [
     {

.pre-commit-config.yaml

@@ -14,12 +14,13 @@ repos:
       - id: prettier
         exclude_types: [markdown, yaml]
   - repo: https://github.com/thibaudcolas/pre-commit-stylelint
-    rev: v14.4.0
+    rev: v16.9.0
     hooks:
       - id: stylelint
         args: [--fix]
         additional_dependencies:
           # stylelint itself needs to be here when using additional_dependencies.
-          - stylelint@14.14.0
-          - stylelint-config-standard@29.0.0
+          - stylelint@16.9.0
+          - stylelint-config-standard@36.0.1
           - [email protected]
+          - [email protected]

.prettierignore

@@ -1,4 +1,3 @@
-**/*.css
 **/.git
 **/node_modules
 **/*.hbs

.stylelintrc

@@ -23,8 +23,6 @@
     ],
     "font-weight-notation": "numeric",
     "import-notation": "string",
-    "linebreaks": "unix",
-    "max-line-length": [80, { "ignore": "non-comments" }],
     "number-max-precision": 3,
     "selector-class-pattern": [
       "^((?!\\-).)*$",
@@ -36,9 +34,6 @@
     ],
     "selector-no-vendor-prefix": null,
     "selector-pseudo-element-colon-notation": "double",
-    "value-list-comma-newline-after": "always-multi-line",
-    "value-list-comma-space-after": "always-single-line",
-    "value-list-comma-space-before": "never",
     "property-no-vendor-prefix": [
       true,
       { "ignoreProperties": ["background-clip"] }

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

@@ -137,7 +137,7 @@ export default function CommunitiesPage() {
           csTextStyles={["fontWeightBold", "lineHeightAuto", "fontSizeS"]}
         >
           <div className={searchAndOrderStyles.searchTextInput}>
-            <span>Search</span>
+            <label htmlFor="communitiesSearchInput">Search</label>
             <NewTextInput
               onChange={(e) => setSearchValue(e.target.value)}
               value={searchValue}
@@ -146,15 +146,17 @@ export default function CommunitiesPage() {
               leftIcon={<FontAwesomeIcon icon={faSearch} />}
               csColor="cyber-green"
               rootClasses={searchAndOrderStyles.searchInput}
+              id="communitiesSearchInput"
             />
           </div>
           <div className={searchAndOrderStyles.searchFilters}>
-            <span>Sort by</span>
+            <label htmlFor="communitiesSortBy">Sort by</label>
             <NewSelect
               onChange={changeOrder}
               options={selectOptions}
               value={searchParams.get("order") ?? SortOptions.Popular}
               aria-label="Sort communities by"
+              id="communitiesSortBy"
             />
           </div>
         </Container>
@@ -169,46 +171,17 @@ 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) => (
           <CardCommunity
             key={community.identifier}
             community={community}
-            isPopular={flatDogs.includes(community.identifier)}
+            isPopular={community.total_package_count > 1000}
             isNew={
               new Date(community.datetime_created).getTime() >
               new Date().getTime() - 1000 * 60 * 60 * 336

apps/cyberstorm-remix/app/root.tsx

@@ -17,7 +17,11 @@ import {
 import { Footer } from "@thunderstore/cyberstorm/src/components/Footer/Footer";
 import { Provider as RadixTooltip } from "@radix-ui/react-tooltip";
 
-import { Navigation } from "cyberstorm/navigation/Navigation";
+import {
+  MobileNavigationMenu,
+  MobileUserPopoverContent,
+  Navigation,
+} from "cyberstorm/navigation/Navigation";
 import { LinkLibrary } from "cyberstorm/utils/LinkLibrary";
 import { AdContainer, LinkingProvider } from "@thunderstore/cyberstorm";
 import { DapperTs } from "@thunderstore/dapper-ts";
@@ -29,10 +33,12 @@ import {
   getPublicEnvVariables,
   publicEnvVariables,
 } from "cyberstorm/security/publicEnvVariables";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useHydrated } from "remix-utils/use-hydrated";
 import Toast from "@thunderstore/cyberstorm/src/components/Toast";
 import { SessionProvider } from "@thunderstore/ts-api-react";
+import { CurrentUser } from "@thunderstore/dapper/types";
+import { getDapper } from "cyberstorm/dapper/sessionUtils";
 
 // REMIX TODO: https://remix.run/docs/en/main/route/links
 // export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
@@ -128,6 +134,22 @@ function Root() {
     ? false
     : true;
 
+  const isHydrated = useHydrated();
+  const startsHydrated = useRef(isHydrated);
+  const [currentUser, setCurrentUser] = useState<CurrentUser>();
+
+  useEffect(() => {
+    if (!startsHydrated.current && isHydrated) return;
+    const fetchAndSetUser = async () => {
+      const dapper = await getDapper(true);
+      const fetchedUser = await dapper.getCurrentUser();
+      if (fetchedUser?.username) {
+        setCurrentUser(fetchedUser);
+      }
+    };
+    fetchAndSetUser();
+  }, []);
+
   return (
     <html lang="en">
       <head>
@@ -173,7 +195,16 @@ function Root() {
               <RadixTooltip delayDuration={300}>
                 <div className={styles.root}>
                   {/* REMIX TODO: For whatever reason the Navigation seems to cause suspense boundary errors. Couldn't find a reason why */}
-                  <Navigation />
+                  <Navigation
+                    hydrationCheck={!startsHydrated.current && isHydrated}
+                    currentUser={currentUser}
+                  />
+                  <MobileNavigationMenu />
+                  {!startsHydrated.current && isHydrated && currentUser ? (
+                    <MobileUserPopoverContent user={currentUser} />
+                  ) : (
+                    <MobileUserPopoverContent />
+                  )}
                   <section className={styles.content}>
                     <div className={styles.sideContainers} />
                     <div className={styles.middleContainer}>

apps/cyberstorm-remix/cyberstorm/navigation/DesktopLoginPopover.tsx

@@ -1,8 +1,18 @@
 import styles from "./Navigation.module.css";
-import { Modal, NewButton, NewIcon } from "@thunderstore/cyberstorm";
-import { LoginList } from "./LoginList";
+import {
+  Heading,
+  Modal,
+  NewButton,
+  NewIcon,
+  NewLink,
+  NewText,
+} from "@thunderstore/cyberstorm";
 import { faArrowRightToBracket } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { OverwolfLogo } from "@thunderstore/cyberstorm/src/svg/svg";
+import { classnames } from "@thunderstore/cyberstorm/src/utils/utils";
+import { buildAuthLoginUrl } from "cyberstorm/utils/ThunderstoreAuth";
+import { faDiscord, faGithub } from "@fortawesome/free-brands-svg-icons";
 
 export function DesktopLoginPopover() {
   return (
@@ -27,7 +37,98 @@ export function DesktopLoginPopover() {
         </NewButton>
       }
     >
-      <LoginList />
+      <div className={styles.loginList}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="50"
+          height="45"
+          viewBox="0 0 50 45"
+          fill="none"
+          className={styles.TSLoginLogo}
+        >
+          <path
+            d="M0.710078 24.9394L9.78854 41.2481L14.6615 32.2309L10.0734 23.9981C9.52443 23.0474 9.52443 21.9529 10.0734 20.9973L16.2418 10.2767C16.7912 9.32224 17.734 8.77655 18.831 8.77697H22.1474L15.7292 23.2203H23.6593L12.8766 44.1116L34.5318 18.1671H27.8748L32.4178 8.77697H40.3769H45.006L49.96 0.167812H35.7761H26.3397H14.9641C13.1759 0.168228 11.6411 1.05689 10.7459 2.60758L0.710078 20.0561C-0.182994 21.6105 -0.18362 23.3929 0.710078 24.9394ZM17.1308 44.832H35.0372C36.8217 44.832 38.3601 43.9432 39.2578 42.3883L49.2938 24.9389C50.1816 23.3929 50.1816 21.6105 49.2938 20.0557L45.2805 13.0783H35.3738L39.93 20.9973C40.4744 21.9537 40.4744 23.048 39.9285 23.9985L33.7625 34.7217C33.2095 35.6776 32.2661 36.2225 31.1679 36.2225H26.6871L24.2827 36.1873L17.1308 44.832Z"
+            fill="url(#paint0_linear_11481_128455)"
+          />
+          <defs>
+            <linearGradient
+              id="paint0_linear_11481_128455"
+              x1="28.2562"
+              y1="44.832"
+              x2="28.2562"
+              y2="0.167812"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stopColor="#00B976" />
+              <stop offset="0.796875" stopColor="#46FFBD" />
+            </linearGradient>
+          </defs>
+        </svg>
+        <Heading
+          mode="heading"
+          csLevel="2"
+          csStyleLevel="3"
+          rootClasses={styles.loginTitle}
+        >
+          Log in to Thunderstore
+        </Heading>
+        <div className={styles.loginLinkList}>
+          <NewLink
+            primitiveType="link"
+            href={buildAuthLoginUrl({ type: "discord" })}
+            rootClasses={classnames(styles.loginLink, styles.loginLinkDiscord)}
+            csTextStyles={["fontSizeS", "fontWeightBold"]}
+          >
+            <NewIcon csMode="inline" noWrapper>
+              <FontAwesomeIcon icon={faDiscord} />
+            </NewIcon>
+            Connect with Discord
+          </NewLink>
+          <NewLink
+            primitiveType="link"
+            href={buildAuthLoginUrl({ type: "github" })}
+            rootClasses={classnames(styles.loginLink, styles.loginLinkGithub)}
+            csTextStyles={["fontSizeS", "fontWeightBold"]}
+          >
+            <NewIcon csMode="inline" noWrapper>
+              <FontAwesomeIcon icon={faGithub} />
+            </NewIcon>
+            Connect with Github
+          </NewLink>
+          <NewLink
+            primitiveType="link"
+            href={buildAuthLoginUrl({ type: "overwolf" })}
+            rootClasses={classnames(styles.loginLink, styles.loginLinkOverwolf)}
+            csTextStyles={["fontSizeS", "fontWeightBold"]}
+          >
+            <NewIcon csMode="inline" noWrapper>
+              <OverwolfLogo />
+            </NewIcon>
+            Connect with Overwolf
+          </NewLink>
+        </div>
+        <NewText
+          rootClasses={styles.loginLegalText}
+          csTextStyles={["lineHeightBody", "fontSizeXS", "fontWeightRegular"]}
+        >
+          By logging in and accessing the site you agree to{" "}
+          <NewLink
+            primitiveType="cyberstormLink"
+            linkId="TermsOfService"
+            csVariant="tertiary"
+          >
+            Terms and Conditions
+          </NewLink>{" "}
+          and{" "}
+          <NewLink
+            primitiveType="cyberstormLink"
+            linkId="PrivacyPolicy"
+            csVariant="tertiary"
+          >
+            Privacy Policy
+          </NewLink>
+        </NewText>
+      </div>
     </Modal>
   );
 }

apps/cyberstorm-remix/cyberstorm/navigation/DevelopersDropDown.module.css

@@ -4,6 +4,10 @@
   justify-content: space-between;
 }
 
+.focus:not([data-highlighted]) a svg {
+  color: var(--color-tertiary);
+}
+
 .root {
   min-width: 14rem;
 }

apps/cyberstorm-remix/cyberstorm/navigation/DevelopersDropDown.tsx

@@ -24,7 +24,7 @@ export function DevelopersDropDown() {
           </NewButton>
         }
         csVariant="default"
-        csColor="surface"
+        csColor="surface-alpha"
         rootClasses={styles.root}
       >
         <NewDropDownItem>
@@ -67,7 +67,7 @@ export function DevelopersDropDown() {
             Markdown Preview
           </NewLink>
         </NewDropDownItem>
-        <NewDropDownItem>
+        <NewDropDownItem rootClasses={styles.focus}>
           <NewLink
             primitiveType="link"
             csVariant="primary"
@@ -76,7 +76,7 @@ export function DevelopersDropDown() {
             rootClasses={styles.externalLink}
           >
             Github
-            <NewIcon csMode="inline" csVariant="tertiary">
+            <NewIcon csMode="inline" noWrapper>
               <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
             </NewIcon>
           </NewLink>