From fc5b408576ad124ef7c89c362bdcb1e96015fe85 Mon Sep 17 00:00:00 2001
From: Kacper Wojciechowski <39823706+jog1t@users.noreply.github.com>
Date: Tue, 3 Sep 2024 21:31:39 +0200
Subject: [PATCH] ui minor changes

---
 apps/hub/src/app.tsx                          |  1 +
 .../src/components/featured-modules-grid.tsx  |  2 +-
 apps/hub/src/components/module-card.tsx       | 29 ++++++---
 .../game/helpers/try-create-backend.ts        |  6 +-
 .../$gameId_/environments/$namespaceId.tsx    |  1 -
 .../environments/$namespaceId/index.tsx       |  5 +-
 .../$namespaceId/modules.lazy.tsx             | 63 +++++++++++--------
 7 files changed, 68 insertions(+), 39 deletions(-)

diff --git a/apps/hub/src/app.tsx b/apps/hub/src/app.tsx
index 8d41ed3a..dfcd9709 100644
--- a/apps/hub/src/app.tsx
+++ b/apps/hub/src/app.tsx
@@ -34,6 +34,7 @@ export const router = createRouter({
   },
   // Since we're using React Query, we don't want loader calls to ever be stale
   // This will ensure that the loader is always called when the route is preloaded or visited
+  defaultPreload: "intent",
   defaultPreloadStaleTime: 0,
   defaultOnCatch: (error) => {
     Sentry.captureException(error);
diff --git a/apps/hub/src/components/featured-modules-grid.tsx b/apps/hub/src/components/featured-modules-grid.tsx
index 1503eada..7f444c9e 100644
--- a/apps/hub/src/components/featured-modules-grid.tsx
+++ b/apps/hub/src/components/featured-modules-grid.tsx
@@ -34,7 +34,7 @@ export function FeaturesModulesGrid({ footer }: FeaturesModulesGridProps) {
           <ModuleCard key={module.id} layoutAnimation={false} {...module} />
         ))}
       </Grid>
-      {footer}
+      {footer ? <div className="text-right">{footer}</div> : null}
     </motion.section>
   );
 }
diff --git a/apps/hub/src/components/module-card.tsx b/apps/hub/src/components/module-card.tsx
index 3f25bb71..a6fb5f59 100644
--- a/apps/hub/src/components/module-card.tsx
+++ b/apps/hub/src/components/module-card.tsx
@@ -4,19 +4,21 @@ import {
   library,
 } from "@fortawesome/fontawesome-svg-core";
 import { fab } from "@fortawesome/free-brands-svg-icons";
-import { fas } from "@fortawesome/pro-solid-svg-icons";
+import { faExternalLink, fas } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   Card,
   CardDescription,
   CardHeader,
   CardTitle,
+  Link,
   Sheet,
   SheetContent,
   SheetDescription,
   SheetHeader,
   SheetTitle,
   SheetTrigger,
+  Text,
 } from "@rivet-gg/components";
 import { motion } from "framer-motion";
 
@@ -82,13 +84,24 @@ export function ModuleCard({
       </SheetTrigger>
       <SheetContent className="sm:max-w-[500px]">
         <SheetHeader>
-          <SheetTitle>{name} in OpenGB Docs</SheetTitle>
-          <SheetDescription className="-mx-6">
-            <iframe
-              className="w-full h-screen"
-              src={`https://opengb.dev/modules/${id}/overview`}
-              title={name}
-            />
+          <SheetTitle>{name}</SheetTitle>
+          <Text className="text-xs">
+            <Link
+              href={`https://opengb.dev/modules/${id}/overview`}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Open in New Tab <FontAwesomeIcon icon={faExternalLink} />
+            </Link>
+          </Text>
+          <SheetDescription className="-mx-6" asChild>
+            <div>
+              <iframe
+                className="w-full h-screen border-t"
+                src={`https://opengb.dev/modules/${id}/overview`}
+                title={name}
+              />
+            </div>
           </SheetDescription>
         </SheetHeader>
       </SheetContent>
diff --git a/apps/hub/src/domains/game/helpers/try-create-backend.ts b/apps/hub/src/domains/game/helpers/try-create-backend.ts
index 59262900..745fa5e4 100644
--- a/apps/hub/src/domains/game/helpers/try-create-backend.ts
+++ b/apps/hub/src/domains/game/helpers/try-create-backend.ts
@@ -7,7 +7,11 @@ export async function tryCreateBackend({
   gameId,
   environmentId,
   queryClient,
-}: { gameId: string; environmentId: string; queryClient: QueryClient }) {
+}: {
+  gameId: string;
+  environmentId: string;
+  queryClient: QueryClient;
+}) {
   try {
     await queryClient.fetchQuery(
       gameBackendQueryOptions({ gameId, environmentId }),
diff --git a/apps/hub/src/routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId.tsx b/apps/hub/src/routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId.tsx
index c8f5108f..e585ae20 100644
--- a/apps/hub/src/routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId.tsx
+++ b/apps/hub/src/routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId.tsx
@@ -66,7 +66,6 @@ function NamespaceIdRoute() {
 }
 const searchSchema = z.object({
   modal: z.enum(["database", "create-server"]).or(z.string()).optional(),
-  search: z.string().optional(),
 });
 export const Route = createFileRoute(
   "/_authenticated/_layout/games/$gameId/environments/$namespaceId",
diff --git a/apps/hub/src/routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/index.tsx b/apps/hub/src/routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/index.tsx
index bb12ad24..4d0ea55b 100644
--- a/apps/hub/src/routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/index.tsx
+++ b/apps/hub/src/routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/index.tsx
@@ -6,6 +6,8 @@ import {
   gameNamespaceQueryOptions,
   gameVersionQueryOptions,
 } from "@/domains/game/queries";
+import { faArrowRight } from "@fortawesome/pro-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   Button,
   Grid,
@@ -41,7 +43,8 @@ function NamespaceIdRoute() {
               to="/games/$gameId/environments/$namespaceId/modules"
               params={params}
             >
-              View all modules
+              View All Modules
+              <FontAwesomeIcon className="ml-2" icon={faArrowRight} />
             </Link>
           </RivetLink>
         }
diff --git a/apps/hub/src/routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/modules.lazy.tsx b/apps/hub/src/routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/modules.lazy.tsx
index da83f4ae..c1929754 100644
--- a/apps/hub/src/routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/modules.lazy.tsx
+++ b/apps/hub/src/routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/modules.lazy.tsx
@@ -1,5 +1,9 @@
 import { ModuleCard } from "@/components/module-card";
-import { faBellConcierge, faUpload } from "@fortawesome/pro-solid-svg-icons";
+import {
+  faBellConcierge,
+  faHammer,
+  faPlus,
+} from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   Button,
@@ -18,20 +22,22 @@ import {
   SidebarPage,
   cn,
 } from "@rivet-gg/components";
-import { Link, createLazyFileRoute, useNavigate } from "@tanstack/react-router";
+import { Link, createLazyFileRoute } from "@tanstack/react-router";
 import { LayoutGroup, motion } from "framer-motion";
+import { useState } from "react";
 import OpenGBMeta from "../../../../../../../../vendor/opengb-modules-meta.json";
 
 function GameIdModules() {
-  const navigate = useNavigate();
-  const search = Route.useSearch({ select: (s) => s.search || "" });
+  const [query, setQuery] = useState("");
 
   const categories = OpenGBMeta.categories
     .map((category) => {
       const modules = category.modules.filter(
         (module) =>
-          module.name.toLowerCase().includes(search.toLowerCase()) ||
-          module.description.toLowerCase().includes(search.toLowerCase()),
+          module.name.toLowerCase().includes((query || "").toLowerCase()) ||
+          module.description
+            .toLowerCase()
+            .includes((query || "").toLowerCase()),
       );
       return { ...category, modules };
     })
@@ -40,9 +46,9 @@ function GameIdModules() {
   return (
     <>
       <section className="flex flex-col gap-4 my-8">
-        <H1 className="text-center">Find a module</H1>
+        <H1 className="text-center">Backend Modules</H1>
         <Lead className="text-center">
-          Add features to your game with modules.
+          Build your game&apos;s backend with open-source modules.
         </Lead>
 
         <Input asChild className="max-w-lg mx-auto">
@@ -52,19 +58,9 @@ function GameIdModules() {
               className="text-muted-foreground mr-2"
             />
             <input
-              value={search}
+              value={query}
               onChange={(e) => {
-                if (e.target.value.length === 0) {
-                  return navigate({ search: {} });
-                }
-                if (search.length === 0) {
-                  navigate({ search: { search: e.target.value } });
-                } else {
-                  navigate({
-                    search: { search: e.target.value },
-                    replace: true,
-                  });
-                }
+                setQuery(e.target.value);
               }}
               placeholder="Search..."
               className="bg-transparent border-transparent h-full w-full placeholder:text-muted-foreground focus-visible:outline-none"
@@ -89,13 +85,27 @@ function GameIdModules() {
                 {category.name}
               </Link>
             ))}
+
+            <Button
+              variant="outline"
+              asChild
+              startIcon={<FontAwesomeIcon icon={faPlus} />}
+            >
+              <a
+                href="https://opengb.dev/docs/build/overview"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Build Your Own
+              </a>
+            </Button>
           </SidebarNavigation>
         }
       >
         <div>
           <LayoutGroup>
             {categories.length === 0 ? (
-              <Card className="w-1/2" asChild>
+              <Card className="w-full lg:w-1/2" asChild>
                 <motion.div
                   initial={{ opacity: 0 }}
                   animate={{ opacity: 1 }}
@@ -111,9 +121,8 @@ function GameIdModules() {
                     </CardTitle>
                   </CardHeader>
                   <CardContent>
-                    Don't worry, OpenGB is created with extensibility in mind.
-                    If you can't find a module that fits your needs, you can
-                    request a new module or create your own.
+                    If you can&apos;t find a module that fits your needs, you
+                    can request a module to be created or build your own module.
                   </CardContent>
                   <CardFooter className="gap-2">
                     <Button
@@ -130,14 +139,14 @@ function GameIdModules() {
                     </Button>
                     <Button
                       asChild
-                      startIcon={<FontAwesomeIcon icon={faUpload} />}
+                      startIcon={<FontAwesomeIcon icon={faHammer} />}
                     >
                       <a
-                        href="https://opengb.dev/docs/build/publish"
+                        href="https://opengb.dev/docs/build/overview"
                         target="_blank"
                         rel="noopener noreferrer"
                       >
-                        Publish Module
+                        Build Your Own Module
                       </a>
                     </Button>
                   </CardFooter>