add server template page

frontend/src/components/topbar.tsx

@@ -116,13 +116,14 @@ const PrimaryDropdown = () => {
 
           <DropdownMenuSeparator />
 
-          {RESOURCE_TARGETS.map((rt) => {
-            const RTIcon = ResourceComponents[rt].Icon;
+          {RESOURCE_TARGETS.map((type) => {
+            const RTIcon = ResourceComponents[type].Icon;
+            const name = type === "ServerTemplate" ? "Template" : type;
             return (
-              <Link key={rt} to={`/${usableResourcePath(rt)}`}>
+              <Link key={type} to={`/${usableResourcePath(type)}`}>
                 <DropdownMenuItem className="flex items-center gap-2 cursor-pointer">
                   <RTIcon />
-                  {rt}s
+                  {name}s
                 </DropdownMenuItem>
               </Link>
             );

frontend/src/lib/socket.tsx

@@ -93,6 +93,14 @@ const on_message = (
   if (update.target.type === "Alerter") {
     invalidate(["ListAlerters"], ["GetAlerter"], ["GetAlertersSummary"]);
   }
+
+  if (update.target.type === "ServerTemplate") {
+    invalidate(
+      ["ListServerTemplates"],
+      ["GetServerTemplate"],
+      ["GetServerTemplatesSummary"]
+    );
+  }
 };
 
 const on_open = (ws: Rws | null) => {
@@ -149,7 +157,9 @@ export const WebsocketProvider = ({
 export const WsStatusIndicator = () => {
   const [connected] = useWebsocketConnected();
   const onclick = () =>
-    toast({ title: connected ? "Websocket connected" : "Websocket disconnected" });
+    toast({
+      title: connected ? "Websocket connected" : "Websocket disconnected",
+    });
 
   return (
     <Button

frontend/src/lib/utils.ts

@@ -19,6 +19,7 @@ export const RESOURCE_TARGETS: UsableResource[] = [
   "Repo",
   "Builder",
   "Alerter",
+  "ServerTemplate"
 ];
 
 export function env_to_text(envVars: Types.EnvironmentVar[] | undefined) {

frontend/src/pages/resources.tsx

@@ -7,13 +7,14 @@ import { useState } from "react";
 
 export const Resources = () => {
   const type = useResourceParamType()!;
-  useSetTitle(type + "s");
+  const name = type === "ServerTemplate" ? "Server Template" : type;
+  useSetTitle(name + "s");
   const Components = ResourceComponents[type];
   const [search, set] = useState("");
 
   return (
     <Page
-      title={`${type}s`}
+      title={`${name}s`}
       actions={
         <div className="grid gap-4 justify-items-end">
           <div className="flex gap-4">