getting stuck on the implementation of editing an app...

src/hooks/useAppUrl.ts

@@ -0,0 +1,23 @@
+import { useExtensionState } from "./useExtensionState";
+
+import type { RetoolApp } from "../types";
+
+export function useAppUrl(app: RetoolApp) {
+  const domain = useExtensionState((s) => s.domain);
+
+  const base = `https://${domain}.retool.com/`;
+  const path = `${app.public ? "p" : "app"}/${app.name}`;
+  const url = new URL(path, base);
+
+  app.query.forEach((q) => url.searchParams.append(q.param, q.value));
+
+  if (app.hash.length === 0) {
+    return `${url.toString()}`;
+  }
+
+  const hashParams = new URLSearchParams(
+    app.hash.map((h) => [h.param, h.value])
+  );
+
+  return `${url.toString()}#${hashParams.toString()}`;
+}

src/hooks/useExtensionState.ts

@@ -4,7 +4,7 @@ import { createJSONStorage, persist } from "zustand/middleware";
 import ChromeStateStorage from "@/lib/ChromeStateStorage";
 import { DEMO_APPS, INSPECTOR_APP } from "@/lib/EmbeddableApps";
 
-import type { RetoolApp } from "@/types";
+import type { RetoolApp } from "@/types/extension";
 
 type State = {
   domain: string;

src/hooks/useRetoolAppStore.ts

@@ -1,6 +1,6 @@
 import { create } from "zustand";
 
-import type { RetoolApp, UrlParamSpec } from "../types";
+import type { RetoolApp, UrlParamSpec } from "../types/extension";
 
 type Actions = {
   setAppName: (name: string) => void;

src/lib/ChromeStateStorage.ts

@@ -48,4 +48,7 @@ function runtimePromise<T = unknown>(handler: PromiseHandler<T>): Promise<T> {
 
 type Resolver<T> = (value: T | PromiseLike<T>) => void;
 
-type PromiseHandler<T> = (resolve: Resolver<T>, rejectIfRuntimeError: () => void) => void;
+type PromiseHandler<T> = (
+  resolve: Resolver<T>,
+  rejectIfRuntimeError: () => void
+) => void;

src/lib/ChromeStorage.ts

@@ -32,14 +32,20 @@ export class ChromeStorage<T extends Options> {
       reject(e);
     }
     return promise.then((saved) => {
-      chrome.runtime.sendMessage({ source: "storage", event: "update", data: saved });
+      chrome.runtime.sendMessage({
+        source: "storage",
+        event: "update",
+        data: saved,
+      });
     });
   }
 
   public async load(): Promise<T> {
     const { promise, resolve, reject } = Promise.withResolvers<T>();
     try {
-      chrome.storage.sync.get(undefined, (saved: Options) => resolve(saved as T));
+      chrome.storage.sync.get(undefined, (saved: Options) =>
+        resolve(saved as T)
+      );
     } catch (e) {
       reject(e);
     }
@@ -48,7 +54,11 @@ export class ChromeStorage<T extends Options> {
 
   private _handleMessage(message: any) {
     const msg = message as StorageUpdated<T>;
-    if (msg?.source === "storage" && msg?.event === "update" && this._updateHandler) {
+    if (
+      msg?.source === "storage" &&
+      msg?.event === "update" &&
+      this._updateHandler
+    ) {
       this._updateHandler(msg.data);
     }
   }

src/lib/EmbeddableApps.ts

@@ -1,4 +1,4 @@
-import type { RetoolApp } from "../../types";
+import type { RetoolApp } from "@/types";
 
 export const INSPECTOR_APP: RetoolApp = {
   name: "app-embedder-for-retool-inspector",