1 files changed, 64 insertions, 5 deletions
diff --git a/packages/taler-wallet-webextension/src/stories.tsx b/packages/taler-wallet-webextension/src/stories.tsx
index 3f74cf11b..1ad91a13b 100644
--- a/packages/taler-wallet-webextension/src/stories.tsx
+++ b/packages/taler-wallet-webextension/src/stories.tsx
@@ -69,10 +69,13 @@ const SideBar = styled.div`
   & > {
     ol {
       padding: 4px;
-      div {
+      div:first-child {
         background-color: lightcoral;
         cursor: pointer;
       }
+      div[data-hide="true"] {
+        display: none;
+      }
       dd {
         margin-left: 1em;
         padding: 4px;
@@ -192,12 +195,12 @@ function ExampleList({
   selected: ExampleItem | undefined;
   onSelectStory: (i: ExampleItem, id: string) => void;
 }): VNode {
-  const [open, setOpen] = useState(true);
+  const [isOpen, setOpen] = useState(selected && selected.group === name);
   return (
     <ol>
-      <div onClick={() => setOpen(!open)}>{name}</div>
-      {open &&
-        list.map((k) => (
+      <div onClick={() => setOpen(!isOpen)}>{name}</div>
+      <div data-hide={!isOpen}>
+        {list.map((k) => (
           <li key={k.name}>
             <dl>
               <dt>{k.name}</dt>
@@ -215,6 +218,7 @@ function ExampleList({
                       href={`#${eId}`}
                       onClick={(e) => {
                         e.preventDefault();
+                        location.hash = `#${eId}`;
                         onSelectStory(r, eId);
                       }}
                     >
@@ -226,6 +230,7 @@ function ExampleList({
             </dl>
           </li>
         ))}
+      </div>
     </ol>
   );
 }
@@ -335,6 +340,7 @@ function Application(): VNode {
 
   return (
     <Page>
+      <LiveReload />
       <SideBar>
         {allExamples.map((e) => (
           <ExampleList
@@ -382,3 +388,56 @@ function main(): void {
     }
   }
 }
+
+let liveReloadMounted = false;
+function LiveReload({ port = 8002 }: { port?: number }): VNode {
+  const [isReloading, setIsReloading] = useState(false);
+  useEffect(() => {
+    if (!liveReloadMounted) {
+      setupLiveReload(port, () => {
+        setIsReloading(true);
+        window.location.reload();
+      });
+      liveReloadMounted = true;
+    }
+  });
+
+  if (isReloading) {
+    return (
+      <div
+        style={{
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          backgroundColor: "rgba(0,0,0,0.5)",
+          color: "white",
+          display: "flex",
+          justifyContent: "center",
+        }}
+      >
+        <h1 style={{ margin: "auto" }}>reloading...</h1>
+      </div>
+    );
+  }
+  return <Fragment />;
+}
+
+function setupLiveReload(port: number, onReload: () => void): void {
+  const protocol = location.protocol === "https:" ? "wss:" : "ws:";
+  const host = location.hostname;
+  const socketPath = `${protocol}//${host}:${port}/socket`;
+
+  const ws = new WebSocket(socketPath);
+  ws.onmessage = (message) => {
+    const event = JSON.parse(message.data);
+    if (event.type === "LOG") {
+      console.log(event.message);
+    }
+    if (event.type === "RELOAD") {
+      onReload();
+    }
+  };
+  ws.onerror = (error) => {
+    console.error(error);
+  };
+}