Separate and organize root.tsx to multiple files

apps/cyberstorm-remix/app/rootRoute/betaButton.tsx

@@ -0,0 +1,30 @@
+// Temporary solution for adding the beta button
+
+import { useEffect, useRef } from "react";
+import { useHydrated } from "remix-utils/use-hydrated";
+
+// REMIX TODO: Move to dynamic html
+export function BetaButtonInit() {
+  const isHydrated = useHydrated();
+  const startsHydrated = useRef(isHydrated);
+  const hasRun = useRef(false);
+
+  // This will be loaded 2 times in development because of:
+  // https://react.dev/reference/react/StrictMode
+  // If strict mode is removed from the entry.client.tsx, this should only run once
+  useEffect(() => {
+    if ((!startsHydrated.current && isHydrated) || hasRun.current) return;
+    if (typeof window !== "undefined") {
+      const $script = document.createElement("script");
+      $script.src = "/cyberstorm-static/scripts/beta-switch.js";
+      $script.setAttribute("async", "true");
+
+      document.body.append($script);
+      hasRun.current = true;
+
+      return () => $script.remove();
+    }
+  }, []);
+
+  return <></>;
+}

apps/cyberstorm-remix/app/rootRoute/breadcrumbs.tsx

@@ -0,0 +1,197 @@
+import { NewBreadCrumbs, NewBreadCrumbsLink } from "@thunderstore/cyberstorm";
+import { useMatches } from "react-router";
+import { getCommunityBreadcrumb } from "./breadcrumbs/getCommunityBreadcrumb";
+import { getPackageListingBreadcrumb } from "./breadcrumbs/getPackageListingBreadcrumb";
+import { memo } from "react";
+
+/** Layout component to provide common UI around all pages */
+export const NimbusBreadcrumbs = memo(function NimbusBreadcrumbs(props: {
+  matches: ReturnType<typeof useMatches>;
+}) {
+  const { matches } = props;
+  const userSettingsPage = matches.find(
+    (m) => m.id === "settings/user/Settings"
+  );
+  const userSettingsAccountPage = matches.find(
+    (m) => m.id === "settings/user/Account/Account"
+  );
+  const teamsPage = matches.find((m) => m.id === "settings/teams/Teams");
+  const teamSettingsPage = matches.find(
+    (m) => m.id === "settings/teams/team/teamSettings"
+  );
+  const teamSettingsProfilePage = matches.find(
+    (m) => m.id === "settings/teams/team/tabs/Profile/Profile"
+  );
+  const teamSettingsMembersPage = matches.find(
+    (m) => m.id === "settings/teams/team/tabs/Members/Members"
+  );
+  const teamSettingsServiceAccountsPage = matches.find(
+    (m) => m.id === "settings/teams/team/tabs/ServiceAccounts/ServiceAccounts"
+  );
+  const teamSettingsSettingsPage = matches.find(
+    (m) => m.id === "settings/teams/team/tabs/Settings/Settings"
+  );
+  const communitiesPage = matches.find(
+    (m) => m.id === "communities/communities"
+  );
+  const uploadPage = matches.find((m) => m.id === "upload/upload");
+  const communityPage = matches.find((m) => m.id === "c/community");
+  const packageListingPage = matches.find((m) => m.id === "p/packageListing");
+  const packageEditPage = matches.find((m) => m.id === "p/packageEdit");
+  const packageDependantsPage = matches.find(
+    (m) => m.id === "p/dependants/Dependants"
+  );
+  const packageTeamPage = matches.find((m) => m.id === "p/team/Team");
+  const packageFormatDocsPage = matches.find(
+    (m) => m.id === "tools/package-format-docs/packageFormatDocs"
+  );
+  const manifestValidatorPage = matches.find(
+    (m) => m.id === "tools/manifest-validator/manifestValidator"
+  );
+  const markdownPreviewPage = matches.find(
+    (m) => m.id === "tools/markdown-preview/markdownPreview"
+  );
+
+  return (
+    <NewBreadCrumbs>
+      {/* User Settings */}
+      {userSettingsPage ? (
+        userSettingsAccountPage ? (
+          <NewBreadCrumbsLink
+            primitiveType="cyberstormLink"
+            linkId="Settings"
+            csVariant="cyber"
+          >
+            Settings
+          </NewBreadCrumbsLink>
+        ) : (
+          <span>
+            <span>Settings</span>
+          </span>
+        )
+      ) : null}
+      {/* User Settings account */}
+      {userSettingsAccountPage ? (
+        <span>
+          <span>Account</span>
+        </span>
+      ) : null}
+      {/* Teams */}
+      {teamsPage || teamSettingsPage ? (
+        <NewBreadCrumbsLink
+          primitiveType="cyberstormLink"
+          linkId="Teams"
+          csVariant="cyber"
+        >
+          Teams
+        </NewBreadCrumbsLink>
+      ) : null}
+      {/* Team settings */}
+      {teamSettingsPage ? (
+        <NewBreadCrumbsLink
+          primitiveType="cyberstormLink"
+          linkId="Team"
+          csVariant="cyber"
+          team={teamSettingsPage.params.namespaceId}
+        >
+          {teamSettingsPage.params.namespaceId}
+        </NewBreadCrumbsLink>
+      ) : null}
+      {/* Team Settings Profile */}
+      {teamSettingsProfilePage ? (
+        <span>
+          <span>Profile</span>
+        </span>
+      ) : null}
+      {/* Team Settings Members */}
+      {teamSettingsMembersPage ? (
+        <span>
+          <span>Members</span>
+        </span>
+      ) : null}
+      {/* Team Settings Service Accounts */}
+      {teamSettingsServiceAccountsPage ? (
+        <span>
+          <span>Service Accounts</span>
+        </span>
+      ) : null}
+      {/* Team Settings Settings */}
+      {teamSettingsSettingsPage ? (
+        <span>
+          <span>Settings</span>
+        </span>
+      ) : null}
+      {/* Upload */}
+      {uploadPage ? (
+        <span>
+          <span>Upload</span>
+        </span>
+      ) : null}
+      {/* Communities page */}
+      {communitiesPage ||
+      communityPage ||
+      packageDependantsPage ||
+      packageTeamPage ? (
+        communityPage || packageDependantsPage || packageTeamPage ? (
+          <NewBreadCrumbsLink
+            primitiveType="cyberstormLink"
+            linkId="Communities"
+            csVariant="cyber"
+          >
+            Communities
+          </NewBreadCrumbsLink>
+        ) : (
+          <span>
+            <span>Communities</span>
+          </span>
+        )
+      ) : null}
+      {/* Community page */}
+      {getCommunityBreadcrumb(
+        communityPage ||
+          packageListingPage ||
+          packageDependantsPage ||
+          packageTeamPage,
+        Boolean(packageListingPage) ||
+          Boolean(packageDependantsPage) ||
+          Boolean(packageTeamPage)
+      )}
+      {/* Package listing page */}
+      {getPackageListingBreadcrumb(
+        packageListingPage,
+        packageEditPage,
+        packageDependantsPage
+      )}
+      {packageEditPage ? (
+        <span>
+          <span>Edit package</span>
+        </span>
+      ) : null}
+      {packageDependantsPage ? (
+        <span>
+          <span>Dependants</span>
+        </span>
+      ) : null}
+      {packageTeamPage ? (
+        <span>
+          <span>{packageTeamPage.params.namespaceId}</span>
+        </span>
+      ) : null}
+      {packageFormatDocsPage ? (
+        <span>
+          <span>Package Format Docs</span>
+        </span>
+      ) : null}
+      {manifestValidatorPage ? (
+        <span>
+          <span>Manifest Validator</span>
+        </span>
+      ) : null}
+      {markdownPreviewPage ? (
+        <span>
+          <span>Markdown Preview</span>
+        </span>
+      ) : null}
+    </NewBreadCrumbs>
+  );
+});

apps/cyberstorm-remix/app/rootRoute/breadcrumbs/getCommunityBreadcrumb.tsx

@@ -0,0 +1,64 @@
+import { isRecord, NewBreadCrumbsLink } from "@thunderstore/cyberstorm";
+import { Suspense } from "react";
+import { Await, UIMatch } from "react-router";
+
+export function getCommunityBreadcrumb(
+  communityPage: UIMatch | undefined,
+  isNotLast: boolean
+) {
+  if (!communityPage) return null;
+  return (
+    <>
+      {communityPage &&
+      isRecord(communityPage.data) &&
+      Object.prototype.hasOwnProperty.call(communityPage.data, "community") ? (
+        <Suspense
+          fallback={
+            <span>
+              <span>Loading...</span>
+            </span>
+          }
+        >
+          <Await resolve={communityPage.data.community}>
+            {(resolvedValue) => {
+              let label = undefined;
+              let icon = undefined;
+              if (isRecord(resolvedValue)) {
+                label =
+                  Object.prototype.hasOwnProperty.call(resolvedValue, "name") &&
+                  typeof resolvedValue.name === "string"
+                    ? resolvedValue.name
+                    : communityPage.params.communityId;
+                icon =
+                  Object.prototype.hasOwnProperty.call(
+                    resolvedValue,
+                    "community_icon_url"
+                  ) && typeof resolvedValue.community_icon_url === "string" ? (
+                    <img src={resolvedValue.community_icon_url} alt="" />
+                  ) : undefined;
+              }
+              return isNotLast ? (
+                <NewBreadCrumbsLink
+                  primitiveType="cyberstormLink"
+                  linkId="Community"
+                  community={communityPage.params.communityId}
+                  csVariant="cyber"
+                >
+                  {icon}
+                  {label}
+                </NewBreadCrumbsLink>
+              ) : (
+                <span>
+                  <span>
+                    {icon}
+                    {label}
+                  </span>
+                </span>
+              );
+            }}
+          </Await>
+        </Suspense>
+      ) : null}
+    </>
+  );
+}

apps/cyberstorm-remix/app/rootRoute/breadcrumbs/getPackageListingBreadcrumb.tsx

@@ -0,0 +1,44 @@
+import { NewBreadCrumbsLink } from "@thunderstore/cyberstorm";
+import { UIMatch } from "react-router";
+
+export function getPackageListingBreadcrumb(
+  packageListingPage: UIMatch | undefined,
+  packageEditPage: UIMatch | undefined,
+  packageDependantsPage: UIMatch | undefined
+) {
+  if (!packageListingPage && !packageEditPage && !packageDependantsPage)
+    return null;
+  return (
+    <>
+      {packageListingPage ? (
+        <span>
+          <span>{packageListingPage.params.packageId}</span>
+        </span>
+      ) : null}
+      {packageEditPage ? (
+        <NewBreadCrumbsLink
+          primitiveType="cyberstormLink"
+          linkId="Package"
+          community={packageEditPage.params.communityId}
+          namespace={packageEditPage.params.namespaceId}
+          package={packageEditPage.params.packageId}
+          csVariant="cyber"
+        >
+          {packageEditPage.params.packageId}
+        </NewBreadCrumbsLink>
+      ) : null}
+      {packageDependantsPage ? (
+        <NewBreadCrumbsLink
+          primitiveType="cyberstormLink"
+          linkId="Package"
+          community={packageDependantsPage.params.communityId}
+          namespace={packageDependantsPage.params.namespaceId}
+          package={packageDependantsPage.params.packageId}
+          csVariant="cyber"
+        >
+          {packageDependantsPage.params.packageId}
+        </NewBreadCrumbsLink>
+      ) : null}
+    </>
+  );
+}