Add package uploading feature

apps/cyberstorm-remix/Dockerfile

@@ -1,5 +1,5 @@
 # For running @thunderstore/cyberstorm-remix in Docker container.
-FROM node:20-alpine3.19
+FROM node:24.1.0-alpine3.21
 RUN apk add --no-cache libc6-compat
 
 WORKDIR /app

apps/cyberstorm-remix/Dockerfile.development

@@ -1,5 +1,5 @@
 # For running @thunderstore/cyberstorm-remix in Docker container.
-FROM node:18-alpine3.17
+FROM node:24.1.0-alpine3.21
 RUN apk add --no-cache libc6-compat
 
 ENV NODE_ENV development

apps/cyberstorm-remix/app/commonComponents/Footer/Footer.tsx

@@ -103,26 +103,26 @@ export function Footer() {
                   </li>
                   <li>
                     <NewLink
-                      primitiveType="link"
-                      href="/package/create/docs/"
+                      primitiveType="cyberstormLink"
+                      linkId="PackageFormatDocs"
                       csVariant="primary"
                     >
                       Package Format Docs
                     </NewLink>
                   </li>
                   <li>
                     <NewLink
-                      primitiveType="link"
-                      href="/tools/manifest-v1-validator/"
+                      primitiveType="cyberstormLink"
+                      linkId="ManifestValidator"
                       csVariant="primary"
                     >
                       Manifest Validator
                     </NewLink>
                   </li>
                   <li>
                     <NewLink
-                      primitiveType="link"
-                      href="/tools/markdown-preview/"
+                      primitiveType="cyberstormLink"
+                      linkId="MarkdownPreview"
                       csVariant="primary"
                     >
                       Markdown Preview

apps/cyberstorm-remix/app/commonComponents/Navigation/Navigation.tsx

@@ -101,27 +101,27 @@ export function Navigation(props: {
               </NewDropDownItem>
               <NewDropDownItem>
                 <NewLink
-                  primitiveType="link"
                   rootClasses={"dropdown__item"}
-                  href="/package/create/docs/"
+                  primitiveType="cyberstormLink"
+                  linkId="PackageFormatDocs"
                 >
                   Package Format Docs
                 </NewLink>
               </NewDropDownItem>
               <NewDropDownItem>
                 <NewLink
-                  primitiveType="link"
+                  primitiveType="cyberstormLink"
+                  linkId="ManifestValidator"
                   rootClasses={"dropdown__item"}
-                  href="/tools/manifest-v1-validator/"
                 >
                   Manifest Validator
                 </NewLink>
               </NewDropDownItem>
               <NewDropDownItem>
                 <NewLink
-                  primitiveType="link"
                   rootClasses={"dropdown__item"}
-                  href="/tools/markdown-preview/"
+                  primitiveType="cyberstormLink"
+                  linkId="MarkdownPreview"
                 >
                   Markdown Preview
                 </NewLink>
@@ -160,8 +160,8 @@ export function Navigation(props: {
           {currentUser?.username ? (
             <span className="navigation-header__profile-actions">
               <NewButton
-                primitiveType="link"
-                href={`${domain}/package/create/`}
+                primitiveType="cyberstormLink"
+                linkId="PackageUpload"
                 csVariant="secondary"
                 csModifiers={["ghost", "only-icon"]}
                 tooltipText="Upload"
@@ -466,22 +466,22 @@ export function MobileNavigationMenu({ domain }: { domain: string }) {
               GitHub
             </NewLink>
             <NewLink
-              primitiveType="link"
-              href="/package/create/docs/"
+              primitiveType="cyberstormLink"
+              linkId="PackageFormatDocs"
               rootClasses="mobile-navigation__popover-item mobile-navigation__popover--thick"
             >
               Package Format Docs
             </NewLink>
             <NewLink
-              primitiveType="link"
-              href="/tools/markdown-preview/"
+              primitiveType="cyberstormLink"
+              linkId="MarkdownPreview"
               rootClasses="mobile-navigation__popover-item mobile-navigation__popover--thick"
             >
               Markdown Preview
             </NewLink>
             <NewLink
-              primitiveType="link"
-              href="/tools/manifest-v1-validator/"
+              primitiveType="cyberstormLink"
+              linkId="ManifestValidator"
               rootClasses="mobile-navigation__popover-item mobile-navigation__popover--thick"
             >
               Manifest Validator

apps/cyberstorm-remix/app/commonComponents/Navigation/NavigationWrapper.tsx

@@ -18,11 +18,23 @@ export function NavigationWrapper({ domain }: { domain: string }) {
   const [currentUser, setCurrentUser] = useState<CurrentUser>();
   const session = useSession();
   useEffect(() => {
-    const cu = session.getSessionCurrentUser();
-    if (cu.username) {
-      setCurrentUser(session.getSessionCurrentUser());
-    } else {
-      setCurrentUser(undefined);
+    let cu: CurrentUser | undefined = undefined;
+    // TODO: Fix this issue in a lasting way.
+    // IMPORTANT: If this try catch is removed and for whatever
+    // reason the retrieval of current user fails, the throws from
+    // inside the useEffect will cause the whole navigation and the
+    // navigationwrapper to rerender. Which then becomes a infinite
+    // loop of trying to parse the currentUser stored in the storage.
+    try {
+      cu = session.getSessionCurrentUser();
+      if (cu.username) {
+        setCurrentUser(cu);
+      } else {
+        setCurrentUser(undefined);
+      }
+    } catch (e) {
+      // If we can't get the current user, we just set it to undefined.
+      console.error("Failed to get current user from session:", e);
     }
   }, []);
 

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

@@ -63,7 +63,7 @@ const selectOptions = [
 
 export async function loader({ request }: LoaderFunctionArgs) {
   const searchParams = new URL(request.url).searchParams;
-  const order = searchParams.get("order") ?? SortOptions.Popular;
+  const order = searchParams.get("order");
   const search = searchParams.get("search");
   const page = undefined;
   const dapper = new DapperTs(() => {
@@ -72,7 +72,11 @@ export async function loader({ request }: LoaderFunctionArgs) {
       sessionId: undefined,
     };
   });
-  return await dapper.getCommunities(page, order ?? "", search ?? "");
+  return await dapper.getCommunities(
+    page,
+    order === null ? undefined : order,
+    search === null ? undefined : search
+  );
 }
 
 export async function clientLoader({ request }: LoaderFunctionArgs) {

apps/cyberstorm-remix/app/entry.client.tsx

@@ -1,4 +1,4 @@
-import { redirect, RemixBrowser } from "@remix-run/react";
+import { RemixBrowser } from "@remix-run/react";
 import { startTransition, StrictMode } from "react";
 import { hydrateRoot } from "react-dom/client";
 
@@ -24,7 +24,6 @@ const { clearSession, getConfig } = sessionProvider.props
 // INIT DAPPER
 window.Dapper = new DapperTs(getConfig, () => {
   clearSession();
-  redirect("/communities");
 });
 
 Sentry.init({

apps/cyberstorm-remix/app/settings/teams/Teams.tsx

@@ -28,7 +28,6 @@ import {
   ApiForm,
   createTeamFormSchema,
 } from "@thunderstore/ts-api-react-forms";
-import { createTeam } from "../../../../../packages/thunderstore-api/src";
 
 export const meta: MetaFunction<typeof clientLoader> = ({ data }) => {
   return [
@@ -100,7 +99,7 @@ export default function Teams() {
           <div className="settings-items__meta">
             <p className="settings-items__title">Teams</p>
             <p className="settings-items__description">Manage your teams</p>
-            <Modal
+            {/* <Modal
               popoverId={"teamsCreateTeam"}
               csSize="small"
               trigger={
@@ -150,7 +149,7 @@ export default function Teams() {
                   <FormSubmitButton>Create</FormSubmitButton>
                 </div>
               </ApiForm>
-            </Modal>
+            </Modal> */}
           </div>
           <div className="settings-items__content">
             <NewTable

apps/cyberstorm-remix/app/settings/user/Account/Account.tsx

@@ -6,7 +6,6 @@ import {
   FormTextInput,
   useFormToaster,
 } from "@thunderstore/cyberstorm-forms";
-import { currentUserSchema } from "@thunderstore/dapper-ts";
 import { faTrashCan } from "@fortawesome/pro-solid-svg-icons";
 import {
   ApiForm,
@@ -40,7 +39,7 @@ export async function clientLoader() {
   } else {
     return {
       config: getConfig(_storage),
-      currentUser: currentUser as typeof currentUserSchema._type,
+      currentUser: currentUser,
     };
   }
 }