Merge pull request 'ui/routing: re-route on changes not only on page load' (#4805) from render-2 into main

Reviewed-on: https://git.clan.lol/clan/clan-core/pulls/4805

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

@@ -22,7 +22,7 @@ import {
   useMachinesQuery,
 } from "@/src/hooks/queries";
 import { callApi } from "@/src/hooks/api";
-import { store, setStore, clanURIs } from "@/src/stores/clan";
+import { store, setStore, clanURIs, setActiveClanURI } from "@/src/stores/clan";
 import { produce } from "solid-js/store";
 import { Button } from "@/src/components/Button/Button";
 import { Splash } from "@/src/scene/splash";
@@ -164,6 +164,10 @@ const ClanSceneController = (props: RouteSectionProps) => {
 
   const machine = createMemo(() => maybeUseMachineName());
 
+  createEffect(() => {
+    console.log("Selected clan:", clanURI);
+  });
+
   createEffect(
     on(machine, (machineId) => {
       if (machineId) {
@@ -220,6 +224,13 @@ const ClanSceneController = (props: RouteSectionProps) => {
                 }}
               />
             </Show>
+            <Button
+              onClick={() => setActiveClanURI(undefined)}
+              hierarchy="primary"
+              class="absolute bottom-4 right-4"
+            >
+              close this clan
+            </Button>
             <div
               class={cx({
                 "fade-out": !machinesQuery.isLoading && loadingCooldown(),

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

@@ -1,18 +1,23 @@
-import { Component } from "solid-js";
+import { Component, createEffect, on } from "solid-js";
 import { RouteSectionProps, useNavigate } from "@solidjs/router";
-import { activeClanURI } from "@/src/stores/clan";
+import { activeClanURI, setActiveClanURI } from "@/src/stores/clan";
 import { navigateToClan } from "@/src/hooks/clan";
+import { Button } from "../components/Button/Button";
 
 export const Layout: Component<RouteSectionProps> = (props) => {
   const navigate = useNavigate();
 
-  // check for an active clan uri and redirect to it on first load
+  // check for an active clan uri and redirect if no clan is active
-  const activeURI = activeClanURI();
+  createEffect(
-  if (!props.location.pathname.startsWith("/clans/") && activeURI) {
+    on(activeClanURI, (activeURI) => {
+      console.debug("Active Clan URI changed:", activeURI);
+      if (activeURI && !props.location.pathname.startsWith("/clans/")) {
         navigateToClan(navigate, activeURI);
       } else {
         navigate("/");
       }
+    }),
+  );
 
   return <div class="size-full h-screen">{props.children}</div>;
 };

pkgs/clan-app/ui/src/scene/RenderLoop.ts

@@ -62,6 +62,11 @@ class RenderLoop {
 
     this.renderRequested = true;
     requestAnimationFrame(() => {
+      if (!this.initialized) {
+        console.log("RenderLoop not initialized, skipping render.");
+        return;
+      }
+
       this.updateTweens();
 
       const needsUpdate = this.controls.update(); // returns true if damping is ongoing
@@ -69,6 +74,7 @@ class RenderLoop {
       this.render();
       this.renderRequested = false;
 
+      // Controls smoothing may require another render
       if (needsUpdate) {
         this.requestRender();
       }

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

@@ -41,7 +41,8 @@ const activeClanURI = () => store.activeClanURI;
  *
  * @param {string} uri - The URI to be set as the active Clan URI.
  */
-const setActiveClanURI = (uri: string) => setStore("activeClanURI", uri);
+const setActiveClanURI = (uri: string | undefined) =>
+  setStore("activeClanURI", uri);
 
 /**
  * Retrieves the current list of clan URIs from the store.