Consolidated changes and features that were developed during xmas time

.github/actions/get-node-version/src/main.ts

@@ -1,6 +1,6 @@
-import { setOutput, setFailed, getInput } from "@actions/core";
-import semver from "semver";
+import { getInput, setFailed, setOutput } from "@actions/core";
 import { readFileSync } from "fs";
+import semver from "semver";
 
 (() => {
   const inputPath = getInput("package-json");

.pre-commit-config.yaml

@@ -13,6 +13,9 @@ repos:
     hooks:
       - id: prettier
         exclude_types: [markdown, yaml]
+        additional_dependencies:
+          - prettier@3.1.0
+          - "@trivago/prettier-plugin-sort-imports@6.0.0"
   - repo: https://github.com/thibaudcolas/pre-commit-stylelint
     rev: v16.9.0
     hooks:

.prettierrc

@@ -15,5 +15,14 @@
   "tabWidth": 2,
   "trailingComma": "es5",
   "useTabs": false,
-  "vueIndentScriptAndStyle": false
+  "vueIndentScriptAndStyle": false,
+  "plugins": ["@trivago/prettier-plugin-sort-imports"],
+  "importOrder": [
+    "^\\./styles/index\\.css$",
+    "<THIRD_PARTY_MODULES>",
+    "^@thunderstore/(.*)$",
+    "^[./]"
+  ],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true
 }

README.md

@@ -150,6 +150,25 @@ running:
 docker compose -f docker-compose.build.yml build
 ```
 
+## Testing (Docker)
+
+Frontend tests run in Vitest browser mode (Playwright). To keep the environment consistent, use the dedicated test runner compose file instead of the dev container.
+
+Prereqs:
+- Ensure `./build-secrets/.npmrc` exists (same requirement as Docker builds).
+
+Run tests:
+
+```bash
+yarn test:container
+```
+
+Run coverage:
+
+```bash
+yarn coverage:container
+```
+
 ## pre-commit
 
 [Pre-commit](https://pre-commit.com/) enforces code style practices in this

apps/cyberstorm-remix/README.md

@@ -30,8 +30,8 @@ The easiest way to run the full stack (Backend + Frontend) is using Docker.
     (If you have some pre-existing containers, please do `docker compose -f docker-compose.remix.development.yml down -v` and `docker compose -f docker-compose.remix.development.yml up -d --build`)
 
 4.  **Open Browser**
-    -   **Frontend**: [http://new.localhost](http://new.localhost)
-    -   **Backend**: [http://localhost](http://localhost)
+    -   **Frontend**: [http://new.thunderstore.localhost](http://new.thunderstore.localhost)
+    -   **Backend**: [http://thunderstore.localhost](http://thunderstore.localhost)
 
 ## Manual Setup
 

apps/cyberstorm-remix/app/c/community.tsx

@@ -1,3 +1,12 @@
+import { faDiscord } from "@fortawesome/free-brands-svg-icons";
+import { faBook, faDownload } from "@fortawesome/free-solid-svg-icons";
+import { faArrowUpRight } from "@fortawesome/pro-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  getPublicEnvVariables,
+  getSessionTools,
+} from "cyberstorm/security/publicEnvVariables";
+import { Suspense } from "react";
 import type {
   LoaderFunctionArgs,
   ShouldRevalidateFunctionArgs,
@@ -9,26 +18,19 @@ import {
   useLocation,
   useOutletContext,
 } from "react-router";
+
 import {
   Heading,
   NewButton,
   NewIcon,
   NewLink,
   SkeletonBox,
 } from "@thunderstore/cyberstorm";
-import "./Community.css";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faBook, faDownload } from "@fortawesome/free-solid-svg-icons";
-import { faDiscord } from "@fortawesome/free-brands-svg-icons";
-import { faArrowUpRight } from "@fortawesome/pro-solid-svg-icons";
+import { classnames } from "@thunderstore/cyberstorm";
 import { DapperTs } from "@thunderstore/dapper-ts";
+
 import { type OutletContextShape } from "../root";
-import {
-  getPublicEnvVariables,
-  getSessionTools,
-} from "cyberstorm/security/publicEnvVariables";
-import { Suspense } from "react";
-import { classnames } from "@thunderstore/cyberstorm/src/utils/utils";
+import "./Community.css";
 
 export async function loader({ params }: LoaderFunctionArgs) {
   if (params.communityId) {

apps/cyberstorm-remix/app/c/tabs/PackageSearch/PackageSearch.tsx

@@ -1,12 +1,14 @@
-import { useLoaderData, useOutletContext } from "react-router";
-import { PackageSearch } from "~/commonComponents/PackageSearch/PackageSearch";
-import { PackageOrderOptions } from "~/commonComponents/PackageSearch/components/PackageOrder";
-import { DapperTs } from "@thunderstore/dapper-ts";
 import {
   getPublicEnvVariables,
   getSessionTools,
 } from "cyberstorm/security/publicEnvVariables";
+import { useLoaderData, useOutletContext } from "react-router";
+import { PackageSearch } from "~/commonComponents/PackageSearch/PackageSearch";
+import { PackageOrderOptions } from "~/commonComponents/PackageSearch/components/PackageOrder";
 import { type OutletContextShape } from "~/root";
+
+import { DapperTs } from "@thunderstore/dapper-ts";
+
 import type { Route } from "./+types/PackageSearch";
 
 export async function loader({ params, request }: Route.LoaderArgs) {

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

@@ -4,12 +4,13 @@ import {
   faSquareCheck,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { memo } from "react";
+import { type TRISTATE } from "~/commonComponents/types";
 
-import "./CheckboxList.css";
 import { Actionable, NewIcon } from "@thunderstore/cyberstorm";
-import { classnames } from "@thunderstore/cyberstorm/src/utils/utils";
-import { type TRISTATE } from "~/commonComponents/types";
-import { memo } from "react";
+import { classnames } from "@thunderstore/cyberstorm";
+
+import "./CheckboxList.css";
 
 type typeA<B> = (v: B) => void;
 

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

@@ -1,6 +1,8 @@
-import { CodeBox, NewAlert } from "@thunderstore/cyberstorm";
-import { memo, useMemo } from "react";
 import { stripHtmlTags } from "cyberstorm/utils/HTMLParsing";
+import { memo, useMemo } from "react";
+
+import { CodeBox, NewAlert } from "@thunderstore/cyberstorm";
+
 import "./CodeBoxHTML.css";
 
 export interface CodeBoxHTMLProps {

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

@@ -1,9 +1,11 @@
-import { memo, type PropsWithChildren } from "react";
 import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import "./Collapsible.css";
+import { type PropsWithChildren, memo } from "react";
+
 import { NewIcon } from "@thunderstore/cyberstorm";
-import { classnames } from "@thunderstore/cyberstorm/src/utils/utils";
+import { classnames } from "@thunderstore/cyberstorm";
+
+import "./Collapsible.css";
 
 interface Props extends PropsWithChildren {
   headerTitle: string;

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

@@ -1,6 +1,8 @@
-import { classnames } from "@thunderstore/cyberstorm/src/utils/utils";
+import { type ReactElement, useState } from "react";
+
+import { classnames } from "@thunderstore/cyberstorm";
+
 import "./CollapsibleText.css";
-import { useState, type ReactElement } from "react";
 
 export interface CollapsibleTextProps {
   text?: string;

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

@@ -1,8 +1,10 @@
-import "./Connection.css";
+import { type ReactElement } from "react";
+
 import { NewIcon, NewSwitch } from "@thunderstore/cyberstorm";
 import { type OAuthConnection } from "@thunderstore/dapper/types";
-import { type ReactElement } from "react";
-import { type userLinkedAccountDisconnectProviders } from "../../../../../packages/thunderstore-api/src";
+import type { userLinkedAccountDisconnectProviders } from "@thunderstore/thunderstore-api";
+
+import "./Connection.css";
 
 interface ConnectionProps {
   name: string;

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

@@ -1,10 +1,12 @@
+import { faCheck, faClone } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faClone, faCheck } from "@fortawesome/free-solid-svg-icons";
 import { type Dispatch, type SetStateAction, useState } from "react";
-import "./CopyButton.css";
-import { NewIcon, Tooltip } from "@thunderstore/cyberstorm/src";
 import React from "react";
 
+import { NewIcon, Tooltip } from "@thunderstore/cyberstorm";
+
+import "./CopyButton.css";
+
 interface CopyButtonProps {
   text: string;
 }

apps/cyberstorm-remix/app/commonComponents/ErrorBoundary/RouteErrorBoundary.tsx

@@ -1,6 +1,6 @@
-import { useEffect, type JSX } from "react";
-import { isRouteErrorResponse, useRouteError } from "react-router";
 import { captureRemixErrorBoundaryError } from "@sentry/remix";
+import { type JSX, useEffect } from "react";
+import { isRouteErrorResponse, useRouteError } from "react-router";
 
 import { ApiError } from "@thunderstore/thunderstore-api";
 

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

@@ -1,15 +1,17 @@
-import "./Footer.css";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faDiscord, faGithub } from "@fortawesome/free-brands-svg-icons";
 import { faBoltLightning } from "@fortawesome/free-solid-svg-icons";
+import { faArrowUpRight } from "@fortawesome/pro-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
 import {
   Heading,
   NewButton,
   NewIcon,
   NewLink,
   ThunderstoreLogoHorizontal,
 } from "@thunderstore/cyberstorm";
-import { faArrowUpRight } from "@fortawesome/pro-solid-svg-icons";
+
+import "./Footer.css";
 
 const AD_IMAGE_SRC = "/cyberstorm-static/images/tsmm_screenshot.png";
 const DISCORD_URL = "https://discord.thunderstore.io/";
@@ -200,7 +202,7 @@ export function Footer() {
             </NewLink>
           </div>
           <p className="footer__copyright">
-            © 2025 Thunderstore and contributors.{" "}
+            © 2026 Thunderstore and contributors.{" "}
             <span>
               This page is{" "}
               <NewLink

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

@@ -1,6 +1,7 @@
+import { Image, NewLink, formatToDisplayName } from "@thunderstore/cyberstorm";
 import { type PackageVersionDependency } from "@thunderstore/thunderstore-api";
+
 import "./ListingDependency.css";
-import { formatToDisplayName, Image, NewLink } from "@thunderstore/cyberstorm";
 
 export interface ListingDependencyProps {
   dependency: PackageVersionDependency;

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

@@ -1,5 +1,6 @@
 import { MarkdownHooks } from "react-markdown";
 import gfm from "remark-gfm";
+
 import { nimbusSanitize } from "./Sanitize";
 
 interface MarkdownProps {

apps/cyberstorm-remix/app/commonComponents/Markdown/Sanitize.ts

@@ -1,5 +1,5 @@
-import { type Schema, sanitize } from "hast-util-sanitize";
 import type { Nodes } from "hast";
+import { type Schema, sanitize } from "hast-util-sanitize";
 
 /**
  * Based on:

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

@@ -1,46 +1,45 @@
+import { faDiscord, faGithub } from "@fortawesome/free-brands-svg-icons";
 import {
   faBars,
-  faGamepad,
-  faLongArrowLeft,
-  faCaretRight,
   faCaretDown,
+  faCaretRight,
   faCog,
-  faUsers,
+  faGamepad,
+  faLongArrowLeft,
   faUpload,
+  faUsers,
 } from "@fortawesome/free-solid-svg-icons";
+import {
+  faArrowRightToBracket,
+  faSignOut,
+} from "@fortawesome/free-solid-svg-icons";
+import { faArrowUpRight } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { getPublicEnvVariables } from "cyberstorm/security/publicEnvVariables";
+import {
+  buildAuthLoginUrl,
+  buildLogoutUrl,
+} from "cyberstorm/utils/ThunderstoreAuth";
 
-import "./MobileNavigation.css";
-import "./Navigation.css";
 import {
   Heading,
   Menu,
   Modal,
+  NewAvatar,
   NewButton,
   NewDropDown,
   NewDropDownDivider,
   NewDropDownItem,
-  NewAvatar,
   NewIcon,
   NewLink,
   OverwolfLogo,
   ThunderstoreLogo,
 } from "@thunderstore/cyberstorm";
+import { classnames } from "@thunderstore/cyberstorm";
 import { type CurrentUser } from "@thunderstore/dapper/types";
 
-import {
-  faSignOut,
-  faArrowRightToBracket,
-} from "@fortawesome/free-solid-svg-icons";
-import { faDiscord, faGithub } from "@fortawesome/free-brands-svg-icons";
-
-import { classnames } from "@thunderstore/cyberstorm/src/utils/utils";
-import {
-  buildAuthLoginUrl,
-  buildLogoutUrl,
-} from "cyberstorm/utils/ThunderstoreAuth";
-import { faArrowUpRight } from "@fortawesome/pro-solid-svg-icons";
-import { getPublicEnvVariables } from "cyberstorm/security/publicEnvVariables";
+import "./MobileNavigation.css";
+import "./Navigation.css";
 
 export function Navigation(props: {
   // hydrationCheck: boolean;

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

@@ -1,8 +1,8 @@
 // import { useSession } from "@thunderstore/ts-api-react";
 // import { useHydrated } from "remix-utils/use-hydrated";
 // import { useEffect, useRef, useState } from "react";
-
 import { type CurrentUser } from "@thunderstore/dapper/types";
+
 import {
   MobileNavigationMenu,
   MobileUserPopoverContent,