fix all the links

frontend/src/components/layouts.tsx

@@ -15,6 +15,7 @@ import { ResourceComponents } from "./resources";
 import { Card, CardHeader, CardTitle, CardContent, CardFooter } from "@ui/card";
 import { ResourceTags } from "./tags";
 import { Topbar } from "./topbar";
+import { usableResourcePath } from "@lib/utils";
 
 export const Layout = () => {
   return (
@@ -140,7 +141,7 @@ export const ResourceCard = ({
 
   return (
     <Link
-      to={`/${type.toLowerCase()}s/${id}`}
+      to={`/${usableResourcePath(type)}/${id}`}
       className="group hover:translate-y-[-2.5%] focus:translate-y-[-2.5%] transition-transform"
     >
       <Card className="h-full hover:bg-accent/50 group-focus:bg-accent/50 transition-colors">
@@ -177,7 +178,7 @@ export const ResourceRow = ({
 
   return (
     <Link
-      to={`/${type.toLowerCase()}s/${id}`}
+      to={`/${usableResourcePath(type)}/${id}`}
       className="group hover:translate-y-[-2.5%] focus:translate-y-[-2.5%] transition-transform"
     >
       <Card className="h-full hover:bg-accent/50 group-focus:bg-accent/50 transition-colors">

frontend/src/components/omnibar.tsx

@@ -14,7 +14,7 @@ import { useState, useEffect, Fragment } from "react";
 import { useNavigate } from "react-router-dom";
 import { ResourceComponents } from "./resources";
 import { UsableResource } from "@types";
-import { RESOURCE_TARGETS } from "@lib/utils";
+import { RESOURCE_TARGETS, usableResourcePath } from "@lib/utils";
 import { DeploymentComponents } from "./resources/deployment";
 import { BuildComponents } from "./resources/build";
 import { ServerComponents } from "./resources/server";
@@ -142,7 +142,7 @@ const ResourceGroup = ({
           <CommandItem
             key={id}
             className="cursor-pointer flex items-center gap-2"
-            onSelect={() => onSelect(`/${type.toLowerCase()}s/${id}`)}
+            onSelect={() => onSelect(`/${usableResourcePath(type)}/${id}`)}
           >
             <Components.Icon id={id} />
             <Components.Name id={id} />

frontend/src/components/resources/common.tsx

@@ -33,6 +33,7 @@ import { useToast } from "@ui/use-toast";
 import { NewLayout } from "@components/layouts";
 import { Types } from "@monitor/client";
 import { ConfigItem, DoubleInput } from "@components/config/util";
+import { usableResourcePath } from "@lib/utils";
 
 export const ResourceDescription = ({
   type,
@@ -145,7 +146,7 @@ export const ResourceLink = ({
 }) => {
   const Components = ResourceComponents[type];
   return (
-    <Link to={`/${type.toLowerCase()}s/${id}`}>
+    <Link to={`/${usableResourcePath(type)}/${id}`}>
       <Button variant="link" className="flex gap-2 items-center p-0">
         <Components.Icon id={id} />
         <Components.Name id={id} />
@@ -171,7 +172,7 @@ export const CopyResource = ({
   const { mutate } = useWrite(`Copy${type}`, {
     onSuccess: (res) => {
       inv([`List${type}s`]);
-      nav(`/${type.toLowerCase()}s/${res._id?.$oid}`);
+      nav(`/${usableResourcePath(type)}/${res._id?.$oid}`);
     },
   });
 
@@ -190,7 +191,7 @@ export const CopyResource = ({
           <DialogTitle>Copy {type}</DialogTitle>
         </DialogHeader>
         <div className="flex flex-col gap-4 my-4">
-          <p>Provide a name for the newly created {type.toLowerCase()}.</p>
+          <p>Provide a name for the newly created {type}.</p>
           <Input value={name} onChange={(e) => setName(e.target.value)} />
         </div>
         <DialogFooter>
@@ -210,6 +211,7 @@ export const CopyResource = ({
 };
 
 export const NewResource = ({ type }: { type: UsableResource }) => {
+  const nav = useNavigate();
   const { mutateAsync } = useWrite(`Create${type}`);
   const [name, setName] = useState("");
   const type_display =
@@ -217,7 +219,11 @@ export const NewResource = ({ type }: { type: UsableResource }) => {
   return (
     <NewLayout
       entityType={type}
-      onSuccess={() => mutateAsync({ name, config: {} })}
+      onSuccess={async () => {
+        const res = await mutateAsync({ name, config: {} });
+        nav(``);
+        return res;
+      }}
       enabled={!!name}
       onOpenChange={() => setName("")}
     >
@@ -260,7 +266,7 @@ export const DeleteResource = ({
         icon={<Trash className="h-4 w-4" />}
         onClick={async () => {
           await mutateAsync({ id });
-          nav(`/${type.toLowerCase()}s`);
+          nav(`/${usableResourcePath(type)}`);
         }}
         disabled={isPending}
         loading={isPending}

frontend/src/components/topbar.tsx

@@ -23,7 +23,7 @@ import {
 } from "@ui/dropdown-menu";
 import { Button } from "@ui/button";
 import { Link, useNavigate, useParams } from "react-router-dom";
-import { RESOURCE_TARGETS } from "@lib/utils";
+import { RESOURCE_TARGETS, usableResourcePath } from "@lib/utils";
 import { Omnibar } from "./omnibar";
 import { WsStatusIndicator } from "@lib/socket";
 import { TopbarUpdates } from "./updates/topbar";
@@ -119,7 +119,7 @@ const PrimaryDropdown = () => {
           {RESOURCE_TARGETS.map((rt) => {
             const RTIcon = ResourceComponents[rt].Icon;
             return (
-              <Link key={rt} to={`/${rt.toLowerCase()}s`}>
+              <Link key={rt} to={`/${usableResourcePath(rt)}`}>
                 <DropdownMenuItem className="flex items-center gap-2 cursor-pointer">
                   <RTIcon />
                   {rt}s
@@ -264,7 +264,7 @@ const ResourcesDropdown = ({ type }: { type: UsableResource }) => {
               <CommandItem
                 onSelect={() => {
                   setOpen(false);
-                  nav(`/${type.toLowerCase()}s`);
+                  nav(`/${usableResourcePath(type)}`);
                 }}
               >
                 <Button variant="link" className="flex gap-2 items-center p-0">
@@ -277,7 +277,7 @@ const ResourcesDropdown = ({ type }: { type: UsableResource }) => {
                   key={resource.id}
                   onSelect={() => {
                     setOpen(false);
-                    nav(`/${type.toLowerCase()}s/${resource.id}`);
+                    nav(`/${usableResourcePath(type)}/${resource.id}`);
                   }}
                 >
                   <ResourceLink type={type} id={resource.id} />

frontend/src/components/updates/details.tsx

@@ -19,7 +19,8 @@ import { useRead } from "@lib/hooks";
 import { ResourceComponents } from "@components/resources";
 import { Link } from "react-router-dom";
 import { fmt_duration, fmt_version } from "@lib/formatting";
-import { version_is_none } from "@lib/utils";
+import { usableResourcePath, version_is_none } from "@lib/utils";
+import { UsableResource } from "@types";
 
 export const UpdateUser = ({ user_id }: { user_id: string }) => {
   const username = useRead("GetUsername", { user_id }).data?.username;
@@ -84,7 +85,9 @@ export const UpdateDetailsInner = ({
             </div>
             <div className="flex gap-4">
               <Link
-                to={`/${update.target.type.toLowerCase()}s/${update.target.id}`}
+                to={`/${usableResourcePath(update.target.type as UsableResource)}/${
+                  update.target.id
+                }`}
               >
                 <div
                   className="flex items-center gap-2"

frontend/src/components/updates/resource.tsx

@@ -16,8 +16,9 @@ import { Section } from "@components/layouts";
 import { UpdateDetails, UpdateUser } from "./details";
 import { UpdateStatus } from "@monitor/client/dist/types";
 import { fmt_date, fmt_version } from "@lib/formatting";
-import { version_is_none } from "@lib/utils";
+import { usableResourcePath, version_is_none } from "@lib/utils";
 import { Card } from "@ui/card";
+import { UsableResource } from "@types";
 
 const UpdateCard = ({ update }: { update: Types.UpdateListItem }) => {
   const Icon = () => {
@@ -69,7 +70,7 @@ export const ResourceUpdates = ({ type, id }: Types.ResourceTarget) => {
       title="Updates"
       icon={<Bell className="w-4 h-4" />}
       actions={
-        <Link to={`/${type.toLowerCase()}s/${id}/updates`}>
+        <Link to={`/${usableResourcePath(type as UsableResource)}/${id}/updates`}>
           <Button variant="secondary" size="icon">
             <ExternalLink className="w-4 h-4" />
           </Button>

frontend/src/lib/utils.ts

@@ -90,3 +90,8 @@ const tzOffset = new Date().getTimezoneOffset() * 60;
 
 export const convertTsMsToLocalUnixTsInSecs = (ts: number) =>
   ts / 1000 - tzOffset;
+
+export const usableResourcePath = (resource: UsableResource) => {
+  if (resource === "ServerTemplate") return "server-templates"
+  return `${resource.toLowerCase()}s`
+}

frontend/src/pages/home/dashboard.tsx

@@ -13,6 +13,7 @@ import { OpenAlerts } from "@components/alert";
 import { useCheckResourceExists, useRead, useUser } from "@lib/hooks";
 import { ResourceLink } from "@components/resources/common";
 import { Fragment } from "react";
+import { usableResourcePath } from "@lib/utils";
 
 export const Dashboard = () => {
   return (
@@ -72,7 +73,7 @@ const RecentlyViewed = () => {
             <Fragment key={type + id}>
               {type !== "System" && (
                 <Card
-                  onClick={() => nav(`/${type.toLowerCase()}s/${id}`)}
+                  onClick={() => nav(`/${usableResourcePath(type)}/${id}`)}
                   className="px-3 py-2 h-fit hover:bg-accent/50 group-focus:bg-accent/50 transition-colors cursor-pointer"
                 >
                   <CardContent className="flex items-center justify-between gap-4 px-3 py-2 text-sm text-muted-foreground">