From 2c4a3602b27f68faf88ac64956d620ebf185a27e Mon Sep 17 00:00:00 2001
From: Claas <claas@claas.dev>
Date: Mon, 8 Dec 2025 00:05:08 +0100
Subject: [PATCH] Port automatic join on welcome from keypackage

---
 app/src/broadcast.ts                    | 27 +++++++++++++++
 app/src/routes/invite.jsx               | 46 ++++++++++++-------------
 app/src/service-worker/serviceWorker.ts |  2 ++
 3 files changed, 52 insertions(+), 23 deletions(-)
 create mode 100644 app/src/broadcast.ts

diff --git a/app/src/broadcast.ts b/app/src/broadcast.ts
new file mode 100644
index 0000000..a2baa26
--- /dev/null
+++ b/app/src/broadcast.ts
@@ -0,0 +1,27 @@
+import { onCleanup } from "solid-js";
+import { Group } from "./service-worker/schema";
+
+export const BROADCAST_NAME = "meal";
+const broadcast = new BroadcastChannel(BROADCAST_NAME);
+
+export type BroadcaseMessage = {
+  type: "Group created";
+  group: Group;
+};
+
+export function broadcastMessage(message: BroadcaseMessage) {
+  broadcast.postMessage(message);
+}
+
+export function useBroadcast(
+  callback: (event: MessageEvent<BroadcaseMessage>) => void
+) {
+  const listening = new AbortController();
+
+  const channel = new BroadcastChannel(BROADCAST_NAME);
+  channel.addEventListener("message", callback, {
+    signal: listening.signal,
+  });
+
+  onCleanup(listening.abort);
+}
diff --git a/app/src/routes/invite.jsx b/app/src/routes/invite.jsx
index d448021..312e4a7 100644
--- a/app/src/routes/invite.jsx
+++ b/app/src/routes/invite.jsx
@@ -1,10 +1,11 @@
 import { useNavigate } from "@solidjs/router";
-import { useAppContext } from "../components/AppContext";
 import { createEffect, createResource, createSignal, Show } from "solid-js";
 //TODO replace with SVG QR-Code solution. Maybe with something custom
 import QRCode from "qrcode";
 import { setupCrackle } from "../useCrackle";
-/** @import { JSX, EffectFunction, VoidProps, Signal } from "solid-js" */
+import { useBroadcast } from "../broadcast";
+import { ROUTES } from ".";
+/** @import { JSX, VoidProps, Signal } from "solid-js" */
 
 const FormElement = /** @type {const} */ ({
   IncludeName: "includeName",
@@ -16,7 +17,7 @@ const FormElement = /** @type {const} */ ({
 
 /**
  *
- * @param {VoidProps<{userName: string, ref: HTMLDialogElement | undefined}>} properties
+ * @param {VoidProps<{userName: string | undefined, ref: HTMLDialogElement | undefined}>} properties
  * @returns
  */
 function InviteSettingsDialog({ userName, ref }) {
@@ -68,29 +69,25 @@ function InviteSettingsDialog({ userName, ref }) {
   );
 }
 
+async function getConfiguration() {
+  const handle = await setupCrackle;
+  return await handle.getConfiguration();
+}
+
 export default function Invite() {
   const navigate = useNavigate();
 
   // Navigate to new group chat when invite is accepted (when it is added from processing incoming welcome)
-  createEffect(
-    // Using the groups (instead of length) as previous does not work because the reference does not change
-    /** @type {EffectFunction<number | undefined>}*/ (previousLength) => {
-      //TODO check if user has automatic accept enabled
-      //TODO check if this welcome is for this key package
-      if (previousLength === undefined) return app.groups.length;
-
-      // Just take the last one added for now 🥴
-      // I need to think more about this and then rework it
-      if (previousLength >= app.groups.length) return app.groups.length;
-      // Just assume the last one is the last one added 🥴
-      const group = app.groups.at(-1);
-      if (group !== undefined) navigate(`/chat/${group.id}`);
-
-      return app.groups.length;
-    }
-  );
+  useBroadcast((event) => {
+    if (event.data.type !== "Group created") return;
+
+    //TODO check if user has automatic accept enabled
+    //TODO check if this welcome is for this key package
+    navigate(ROUTES.chat(event.data.group.id));
+  });
+
+  const [configuration] = createResource(getConfiguration);
 
-  const [app] = useAppContext();
   /** @type {HTMLDialogElement | undefined} */
   let settingsDialog;
   /** @type { HTMLDivElement | undefined} */
@@ -193,7 +190,7 @@ export default function Invite() {
         </svg>
       </button>
 
-      <canvas width={200} height={200} ref={canvas} />
+      <canvas width={200} height={200} ref={canvas} class="rounded-2xl" />
 
       {/* Needs to be on click otherwise the pointer down opens it and the pointer up closes it immediately */}
       <button onPointerDown={copyInvite}>Copy</button>
@@ -203,7 +200,10 @@ export default function Invite() {
       <div popover="manual" ref={snackbar}>
         Link copied
       </div>
-      <InviteSettingsDialog userName={app.name ?? ""} ref={settingsDialog} />
+      <InviteSettingsDialog
+        userName={configuration()?.defaultUser?.name}
+        ref={settingsDialog}
+      />
     </>
   );
 }
diff --git a/app/src/service-worker/serviceWorker.ts b/app/src/service-worker/serviceWorker.ts
index 65ed2c6..9cf1630 100644
--- a/app/src/service-worker/serviceWorker.ts
+++ b/app/src/service-worker/serviceWorker.ts
@@ -3,6 +3,7 @@ import { openDB } from "idb";
 import init, { Client, DecodedPackage, Friend } from "meal-core";
 import { expose } from "../crackle";
 import { Group, Message, Schema } from "./schema";
+import { broadcastMessage } from "../broadcast";
 
 /**
  * @import { Schema } from "./schema"
@@ -302,6 +303,7 @@ async function receiveMessage(event: MessageEvent<ArrayBuffer>) {
         user: configuration.defaultUser,
       };
       await insertGroup(group);
+      broadcastMessage({ type: "Group created", group });
       return;
     }
     case "Private":
-- 
2.51.2