feat(ui): change machineID to machineName

And no longer base64 encode it in url params or cache keys.

The term used in the API is name, so this is aligning with that.

pkgs/clan-app/ui/src/hooks/clan.ts

@@ -27,11 +27,8 @@ export const buildClanPath = (clanURI: string) => {
   return "/clans/" + encodeBase64(clanURI);
 };
 
-export const buildMachinePath = (clanURI: string, machineID: string) => {
-  return (
-    "/clans/" + encodeBase64(clanURI) + "/machines/" + encodeBase64(machineID)
-  );
-};
+export const buildMachinePath = (clanURI: string, name: string) =>
+  buildClanPath(clanURI) + "/machines/" + name;
 
 export const navigateToClan = (navigate: Navigator, clanURI: string) => {
   const path = buildClanPath(clanURI);
@@ -42,10 +39,10 @@ export const navigateToClan = (navigate: Navigator, clanURI: string) => {
 export const navigateToMachine = (
   navigate: Navigator,
   clanURI: string,
-  machineID: string,
+  name: string,
 ) => {
-  const path = buildMachinePath(clanURI, machineID);
-  console.log("Navigating to machine", clanURI, machineID, path);
+  const path = buildMachinePath(clanURI, name);
+  console.log("Navigating to machine", clanURI, name, path);
   navigate(path);
 };
 
@@ -55,19 +52,16 @@ export const clanURIParam = (params: Params) => {
 
 export const useClanURI = () => clanURIParam(useParams());
 
-export const machineIDParam = (params: Params) => {
-  return decodeBase64(params.machineID);
+export const machineNameParam = (params: Params) => {
+  return params.machineName;
 };
 
-export const useMachineID = (): string => {
-  const params = useParams();
-  return machineIDParam(params);
-};
+export const useMachineName = (): string => machineNameParam(useParams());
 
-export const maybeUseMachineID = (): string | null => {
+export const maybeUseMachineName = (): string | null => {
   const params = useParams();
-  if (params.machineID === undefined) {
+  if (params.machineName === undefined) {
     return null;
   }
-  return machineIDParam(params);
+  return machineNameParam(params);
 };

pkgs/clan-app/ui/src/queries/queries.ts

@@ -6,6 +6,7 @@ export type ClanDetails = SuccessData<"get_clan_details">;
 export type ClanDetailsWithURI = ClanDetails & { uri: string };
 
 export type ListMachines = SuccessData<"list_machines">;
+export type MachineDetails = SuccessData<"get_machine_details">;
 
 export type MachinesQueryResult = UseQueryResult<ListMachines>;
 export type ClanListQueryResult = UseQueryResult<ClanDetailsWithURI>[];

pkgs/clan-app/ui/src/routes/Clan/Clan.tsx

@@ -11,7 +11,7 @@ import {
 } from "solid-js";
 import {
   buildMachinePath,
-  maybeUseMachineID,
+  maybeUseMachineName,
   useClanURI,
 } from "@/src/hooks/clan";
 import { CubeScene } from "@/src/scene/cubes";
@@ -162,7 +162,7 @@ const ClanSceneController = (props: RouteSectionProps) => {
     }
   };
 
-  const machine = createMemo(() => maybeUseMachineID());
+  const machine = createMemo(() => maybeUseMachineName());
 
   createEffect(
     on(machine, (machineId) => {

pkgs/clan-app/ui/src/routes/Machine/Machine.tsx

@@ -1,6 +1,6 @@
 import { RouteSectionProps, useNavigate } from "@solidjs/router";
 import { SidebarPane } from "@/src/components/Sidebar/SidebarPane";
-import { navigateToClan, useClanURI, useMachineID } from "@/src/hooks/clan";
+import { navigateToClan, useClanURI, useMachineName } from "@/src/hooks/clan";
 
 export const Machine = (props: RouteSectionProps) => {
   const navigate = useNavigate();
@@ -12,7 +12,7 @@ export const Machine = (props: RouteSectionProps) => {
   };
 
   return (
-    <SidebarPane title={useMachineID()} onClose={onClose}>
+    <SidebarPane title={useMachineName()} onClose={onClose}>
       <h1>Hello world</h1>
     </SidebarPane>
   );

pkgs/clan-app/ui/src/routes/index.tsx

@@ -28,7 +28,7 @@ export const Routes: RouteDefinition[] = [
             path: "/",
           },
           {
-            path: "/machines/:machineID",
+            path: "/machines/:machineName",
             component: Machine,
           },
         ],