ui/services: wire up with sidebar and router

pkgs/clan-app/ui/src/components/Sidebar/SidebarBody.tsx

@@ -5,11 +5,7 @@ import Icon from "../Icon/Icon";
 import { Typography } from "@/src/components/Typography/Typography";
 import { For, Show } from "solid-js";
 import { MachineStatus } from "@/src/components/MachineStatus/MachineStatus";
-import {
-  buildMachinePath,
-  buildServicePath,
-  useClanURI,
-} from "@/src/hooks/clan";
+import { buildMachinePath, buildServicePath } from "@/src/hooks/clan";
 import { useMachineStateQuery } from "@/src/hooks/queries";
 import { SidebarProps } from "./Sidebar";
 import { Button } from "../Button/Button";
@@ -204,10 +200,6 @@ const Services = () => {
 };
 
 export const SidebarBody = (props: SidebarProps) => {
-  const clanURI = useClanURI();
-
-  const ctx = useClanContext();
-
   const sectionLabels = (props.staticSections || []).map(
     (section) => section.title,
   );

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

@@ -36,11 +36,8 @@ import { Sidebar } from "@/src/components/Sidebar/Sidebar";
 import { UseQueryResult } from "@tanstack/solid-query";
 import { ListClansModal } from "@/src/modals/ListClansModal/ListClansModal";
 
-import { useApiClient } from "@/src/hooks/ApiClient";
-import toast from "solid-toast";
 import { AddMachine } from "@/src/workflows/AddMachine/AddMachine";
 import { SelectService } from "@/src/workflows/Service/SelectServiceFlyout";
-import { SubmitServiceHandler } from "@/src/workflows/Service/models";
 
 export type WorldMode = "default" | "select" | "service" | "create" | "move";
 
@@ -198,6 +195,8 @@ const ClanSceneController = (props: RouteSectionProps) => {
     }),
   );
 
+  const location = useLocation();
+
   return (
     <>
       <Show when={loadingError()}>
@@ -237,7 +236,6 @@ const ClanSceneController = (props: RouteSectionProps) => {
               when={location.pathname.includes("/services/")}
               fallback={
                 <SelectService
-                  // handleSubmit={handleSubmitService}
                   onClose={() => {
                     ctx.setWorldMode("select");
                   }}

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

@@ -6,6 +6,7 @@ import { buildClanPath } from "@/src/hooks/clan";
 import { useApiClient } from "@/src/hooks/ApiClient";
 import { useQueryClient } from "@tanstack/solid-query";
 import { clanKey } from "@/src/hooks/queries";
+import { onMount } from "solid-js";
 
 export const Service = (props: RouteSectionProps) => {
   const ctx = useClanContext();
@@ -16,6 +17,10 @@ export const Service = (props: RouteSectionProps) => {
 
   const queryClient = useQueryClient();
 
+  onMount(() => {
+    ctx.setWorldMode("service");
+  });
+
   const handleSubmit: SubmitServiceHandler = async (instance, action) => {
     console.log("Service submitted", instance, action);
 

pkgs/clan-app/ui/src/scene/cubes.tsx

@@ -512,6 +512,7 @@ export function CubeScene(props: {
 
         if (ctx.worldMode() === "select") props.onSelect(new Set<string>([id]));
 
+        console.log("Clicked on machine", id);
         emitMachineClick(id); // notify subscribers
       } else {
         emitMachineClick(null);

pkgs/clan-app/ui/src/workflows/Service/Service.stories.tsx

@@ -160,6 +160,9 @@ export const SelectRoleMembers: Story = {
       handleSubmit={(instance) => {
         console.log("Submitted instance:", instance);
       }}
+      onClose={() => {
+        console.log("Closed");
+      }}
       initialStep="select:members"
       initialStore={{
         currentRole: "peer",

pkgs/clan-app/ui/src/workflows/Service/Service.tsx

@@ -21,7 +21,6 @@ import {
   on,
   onMount,
   For,
-  onCleanup,
 } from "solid-js";
 import Icon from "@/src/components/Icon/Icon";
 import { Combobox } from "@kobalte/core/combobox";
@@ -127,14 +126,11 @@ const ConfigureService = () => {
     on(
       () => [serviceInstancesQuery.data, machinesQuery.data] as const,
       ([instances, machines]) => {
-        console.log("Effect RUNNING");
         // Wait for all queries to be ready
         if (!instances || !machines) return;
 
         const instance = instances[routerProps.id || routerProps.name];
 
-        console.log("Data ready, instance", instance ?? "NEW");
-
         set("roles", {});
         if (!instance) {
           set("action", "create");
@@ -329,8 +325,8 @@ const ConfigureRole = () => {
     on(lastClickedMachine, (machine) => {
       // const machine = lastClickedMachine();
       const currentMembers = members();
-      console.log("Clicked machine", machine, currentMembers);
       if (!machine) return;
+
       const machineTagName = "m_" + machine;
 
       const existing = currentMembers.find((m) => m.value === machineTagName);
@@ -482,10 +478,6 @@ export const ServiceWorkflow = (props: ServiceWorkflowProps) => {
     }
   });
 
-  onCleanup(() => {
-    console.log("cleanup");
-  });
-
   return (
     <div class="absolute bottom-full left-1/2 mb-2 -translate-x-1/2">
       <StepperProvider stepper={stepper}>