Merge pull request #1226 from thunderstore-io/10-08-_communities_second_qa_fixes

/communities second QA fixes

Author: Oksamies

.gitignore

@@ -1,3 +1,4 @@
 .idea
 /node_modules/
 **/yarn-error.log
+.npmrc

apps/cyberstorm-remix/Dockerfile

@@ -4,7 +4,7 @@ RUN apk add --no-cache libc6-compat
 
 WORKDIR /app
 
-COPY package.json yarn.lock babel.config.js .eslintrc.json .eslintignore .yarnrc .prettierrc .prettierignore .stylelintrc ./
+COPY package.json yarn.lock babel.config.js eslint.config.mjs .eslintignore .yarnrc .prettierrc .prettierignore .stylelintrc ./
 COPY .yarn ./.yarn
 COPY packages ./packages
 COPY apps/cyberstorm-remix ./apps/cyberstorm-remix

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

@@ -7,13 +7,9 @@
 
 .searchTextInput {
   display: flex;
+  flex: 1;
   flex-direction: column;
   gap: var(--space--8);
-  width: 50%;
-}
-
-.searchInput {
-  max-width: 26.25rem;
 }
 
 .searchFilters {
@@ -43,8 +39,10 @@
   .searchFilters > span {
     display: none;
   }
+}
 
-  .searchInput {
-    max-width: 100%;
+@media (width > 40rem) {
+  .searchTextInput {
+    max-width: 26.25rem;
   }
 }

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

@@ -25,10 +25,11 @@ import { faGhost, faFire } from "@fortawesome/free-solid-svg-icons";
 import { useDebounce } from "use-debounce";
 import {
   useLoaderData,
-  useNavigation,
+  useNavigationType,
+  // useNavigation,
   useSearchParams,
 } from "@remix-run/react";
-import { Communities, Community } from "@thunderstore/dapper/types";
+import { Communities } from "@thunderstore/dapper/types";
 import { getDapper } from "cyberstorm/dapper/sessionUtils";
 
 export const meta: MetaFunction = () => {
@@ -90,8 +91,11 @@ export async function clientLoader({ request }: LoaderFunctionArgs) {
 
 export default function CommunitiesPage() {
   const communitiesData = useLoaderData<typeof loader | typeof clientLoader>();
+  const navigationType = useNavigationType();
+
   const [searchParams, setSearchParams] = useSearchParams();
-  const navigation = useNavigation();
+  // TODO: Disabled until we can figure out how a proper way to display skeletons
+  // const navigation = useNavigation();
 
   const changeOrder = (v: SortOptions) => {
     searchParams.set("order", v);
@@ -101,17 +105,24 @@ export default function CommunitiesPage() {
   const [searchValue, setSearchValue] = useState(
     searchParams.getAll("search").join(" ")
   );
+
+  useEffect(() => {
+    if (navigationType === "POP") {
+      setSearchValue(searchParams.getAll("search").join(" "));
+    }
+  }, [searchParams]);
+
   const [debouncedSearchValue] = useDebounce(searchValue, 300, {
     maxWait: 300,
   });
 
   useEffect(() => {
     if (debouncedSearchValue === "") {
       searchParams.delete("search");
-      setSearchParams(searchParams);
+      setSearchParams(searchParams, { replace: true });
     } else {
       searchParams.set("search", debouncedSearchValue);
-      setSearchParams(searchParams);
+      setSearchParams(searchParams, { replace: true });
     }
   }, [debouncedSearchValue]);
 
@@ -145,7 +156,6 @@ export default function CommunitiesPage() {
               clearValue={() => setSearchValue("")}
               leftIcon={<FontAwesomeIcon icon={faSearch} />}
               csColor="cyber-green"
-              rootClasses={searchAndOrderStyles.searchInput}
               id="communitiesSearchInput"
             />
           </div>
@@ -161,48 +171,20 @@ export default function CommunitiesPage() {
           </div>
         </Container>
 
-        {navigation.state === "loading" ? (
+        <CommunitiesList communitiesData={communitiesData} />
+        {/* {navigation.state === "loading" ? (
           <CommunitiesListSkeleton />
         ) : (
           <CommunitiesList communitiesData={communitiesData} />
-        )}
+        )} */}
       </main>
     </>
   );
 }
 
-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}>

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

@@ -14,12 +14,6 @@ import { classnames } from "@thunderstore/cyberstorm/src/utils/utils";
 import { buildAuthLoginUrl } from "cyberstorm/utils/ThunderstoreAuth";
 import { faDiscord, faGithub } from "@fortawesome/free-brands-svg-icons";
 
-import styles from "./Navigation.module.css";
-import { Modal, NewButton, NewIcon } from "@thunderstore/cyberstorm";
-import { LoginList } from "./LoginList";
-import { faArrowRightToBracket } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
 export function DesktopLoginPopover() {
   return (
     <Modal

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

@@ -24,7 +24,7 @@ export function DevelopersDropDown() {
           </NewButton>
         }
         csVariant="default"
-        csColor="surface-alpha"
+        csColor="surface"
         rootClasses={styles.root}
       >
         <NewDropDownItem>

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

@@ -5,6 +5,7 @@ import styles from "./Navigation.module.css";
 import {
   Avatar,
   Menu,
+  NewButton,
   NewIcon,
   NewLink,
   NewText,
@@ -36,17 +37,17 @@ export function MobileUserPopoverContent(props: { user: CurrentUser }) {
         </div>
       }
       controls={
-        <button
+        <NewButton
           {...{
             popovertarget: "mobileNavAccount",
             popovertargetaction: "close",
           }}
-          className={styles.popoverCloseButton}
-        >
-          <NewIcon csMode="inline" csVariant="tertiary" noWrapper>
-            <FontAwesomeIcon icon={faLongArrowLeft} />
-          </NewIcon>
-        </button>
+          aria-label="Back"
+          mode="iconButton"
+          csSize="m"
+          csVariant="tertiaryDimmed"
+          icon={faLongArrowLeft}
+        />
       }
     >
       {user.username ? (

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

@@ -68,11 +68,9 @@
 
 .mobileNavMenuDevelopersButton {
   display: flex;
-  gap: 1rem;
   align-items: center;
   align-self: stretch;
   justify-content: space-between;
-  padding: 1rem;
   color: var(--color-primary);
   background: transparent;
 }
@@ -96,6 +94,14 @@ button.mobileNavItem {
   background: transparent;
 }
 
+.mobileNavItem:active {
+  color: var(--color-cyber-green--5);
+}
+
+.mobileNavItem:hover {
+  color: var(--color-secondary);
+}
+
 .mobileNavItemIcon {
   height: 1.375rem;
 }
@@ -123,14 +129,6 @@ button.mobileNavItem {
   width: 100%;
 }
 
-.mobileNavPopoverListLink {
-  display: flex;
-  gap: 1rem;
-  align-items: center;
-  align-self: stretch;
-  padding: 1rem;
-}
-
 .popoverCloseButton {
   width: 2.75rem;
   height: 2.875rem;
@@ -244,11 +242,31 @@ button.mobileNavItem {
 }
 
 .loginButton {
-  height: 2.25rem;
-  padding: 0.75rem;
+  height: 2.25rem !important;
+  padding: 0.75rem !important;
 }
 
 .headerRightSide {
   display: flex;
   gap: 1rem;
 }
+
+.divider {
+  align-self: stretch;
+  height: 1px;
+  margin: var(--space--16) var(--space--8);
+  background: var(--color-surface--7);
+}
+
+.navMenuItem {
+  display: flex;
+  gap: var(--gap--16);
+  align-items: center;
+  align-self: stretch;
+  padding: var(--space--16);
+  border-radius: var(--border-radius--8);
+}
+
+.navMenuItem:hover {
+  background: var(--color-surface--9);
+}