fix merge conflicts, cleanup code

web-client/src/components/error-dialog.tsx

@@ -1,69 +1,50 @@
+import { AlertDialog } from "@kobalte/core";
 import { A } from "@solidjs/router";
-import * as pkg from "~/../package.json";
+import { JSXElement, Show, mergeProps } from "solid-js";
 
 type Props = {
-  error: unknown;
+  title?: JSXElement;
+  children: JSXElement;
 };
 
-export function ErrorDialog(props: Props) {
+export function ErrorDialog(p: Props) {
+  const props = mergeProps({ title: "Alert" }, p);
+
   return (
-    <>
-      <div class="surf-container">
-        <img class="bg-surface static" src="/bg.jpeg" aria-hidden />
-      </div>
-      <div class="p-28 grid grid-rows-[auto_1fr_auto] gap-5 h-screen text-neutral-400 ">
-        <header>
-          <h1 class="text-red-400 font-semibold text-6xl">
-            Irrecoverable Error
-          </h1>
-          <div class="text-3xl pt-8">
-            <p>Something terrible happened.</p>
-            <p>The log is on the way and we'll work on it!</p>
-          </div>
-        </header>
-        <article class="flex flex-col justify-evenly">
-          <div class="p-5 border-2 border-slate-800 rounded-lg font-mono">
-            <h2 class="text-4xl relative -top-12">System log</h2>
-            <pre class="text-2xl">
-              {props.error?.toString() || String(props.error)}
-            </pre>
-            <ul class="pt-12">
-              <li>App version: {pkg.version}</li>
-              <li>Browser: {window.navigator.userAgent}</li>
-            </ul>
-          </div>
-          <div class="flex gap-10">
-            <A
-              href="/"
-              class="border border-red-400 hover:bg-red-700 hover:border-red-900 text-white text-lg py-2 px-4 rounded focus:outline-dashed focus:outline-white focus:outline-offset-2 focus:outline-1"
-            >
-              Reset App
-            </A>
-            <button
-              onClick={() => {
-                window.location.reload();
-              }}
-              class="border border-neutral-400 hover:bg-neutral-800 hover:border-neutral-100 text-white text-lg py-2 px-4 rounded focus:outline-dashed focus:outline-white focus:outline-offset-2"
-            >
-              Reload Route
-            </button>
-          </div>
-        </article>
-        <aside>
-          <p class="text-3xl">
-            Feel free to reach us at the{" "}
-            <a
-              href="https://discord.gg/tauri"
-              rel="noreferrer noopener"
-              target="_blank"
-              class="text-white focus:outline-none focus:underline focus:decoration-dotted focus:underline-offset-2"
-            >
-              Tauri Discord: #CrabNebula
-            </a>
-            .
-          </p>
-        </aside>
-      </div>
-    </>
+    <AlertDialog.Root defaultOpen modal preventScroll>
+      {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion*/}
+      <AlertDialog.Portal mount={document.getElementById("app")!}>
+        <AlertDialog.Overlay class="fixed h-screen w-screen grid place-items-center backdrop-blur-md z-50 top-0 left-0" />
+        <div class="fixed inset-0 z-50 flex items-center justify-center text-xl">
+          <AlertDialog.Content class="z-50 text-4xl max-w-prose md:max-w-96 border border-neutral-800 rounded-lg p-10 bg-navy-700 bg-opacity-80 shadow-lg shadow-navy-600 kb-expanded:animate-content-show kb-disabled:animate-content-hide">
+            <div class="flex items-baseline justify-between mb-3">
+              <Show when={props.title}>{props.title}</Show>
+            </div>
+            <AlertDialog.Description class="text-base text-neutral-300">
+              {props.children}
+            </AlertDialog.Description>
+            <div class="pt-8 flex gap-10 justify-center">
+              <AlertDialog.CloseButton
+                class="border border-neutral-400 hover:bg-neutral-800 hover:border-neutral-100 text-white text-lg py-2 px-4 rounded focus:outline-dashed focus:outline-white focus:outline-offset-2"
+                onClick={() => {
+                  window.location.reload();
+                }}
+              >
+                Reload route
+              </AlertDialog.CloseButton>
+              <AlertDialog.CloseButton class="border border-neutral-400 hover:bg-neutral-800 hover:border-neutral-100 text-white text-lg py-2 px-4 rounded focus:outline-dashed focus:outline-white focus:outline-offset-2">
+                Dismiss
+              </AlertDialog.CloseButton>
+              <A
+                href="/"
+                class="bg-red-400 border border-red-400 hover:bg-red-700 hover:border-red-900 text-white text-lg py-2 px-4 rounded focus:outline-dashed focus:outline-white focus:outline-offset-2"
+              >
+                Reset App
+              </A>
+            </div>
+          </AlertDialog.Content>
+        </div>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
   );
 }

web-client/src/components/error-root.tsx

@@ -0,0 +1,69 @@
+import { A } from "@solidjs/router";
+import * as pkg from "~/../package.json";
+
+type Props = {
+  error: unknown;
+};
+
+export function ErrorRoot(props: Props) {
+  return (
+    <>
+      <div class="surf-container">
+        <img class="bg-surface static" src="/bg.jpeg" aria-hidden />
+      </div>
+      <div class="p-28 grid grid-rows-[auto_1fr_auto] gap-5 h-screen text-neutral-400 ">
+        <header>
+          <h1 class="text-red-400 font-semibold text-6xl">
+            Irrecoverable Error
+          </h1>
+          <div class="text-3xl pt-8">
+            <p>Something terrible happened.</p>
+            <p>The log is on the way and we'll work on it!</p>
+          </div>
+        </header>
+        <article class="flex flex-col justify-evenly">
+          <div class="p-5 border-2 border-slate-800 rounded-lg font-mono">
+            <h2 class="text-4xl relative -top-12">System log</h2>
+            <pre class="text-2xl">
+              {props.error?.toString() || String(props.error)}
+            </pre>
+            <ul class="pt-12">
+              <li>App version: {pkg.version}</li>
+              <li>Browser: {window.navigator.userAgent}</li>
+            </ul>
+          </div>
+          <div class="flex gap-10">
+            <A
+              href="/"
+              class="border border-red-400 hover:bg-red-700 hover:border-red-900 text-white text-lg py-2 px-4 rounded focus:outline-dashed focus:outline-white focus:outline-offset-2 focus:outline-1"
+            >
+              Reset App
+            </A>
+            <button
+              onClick={() => {
+                window.location.reload();
+              }}
+              class="border border-neutral-400 hover:bg-neutral-800 hover:border-neutral-100 text-white text-lg py-2 px-4 rounded focus:outline-dashed focus:outline-white focus:outline-offset-2"
+            >
+              Reload Route
+            </button>
+          </div>
+        </article>
+        <aside>
+          <p class="text-3xl">
+            Feel free to reach us at the{" "}
+            <a
+              href="https://discord.gg/tauri"
+              rel="noreferrer noopener"
+              target="_blank"
+              class="text-white focus:outline-none focus:underline focus:decoration-dotted focus:underline-offset-2"
+            >
+              Tauri Discord: #CrabNebula
+            </a>
+            .
+          </p>
+        </aside>
+      </div>
+    </>
+  );
+}

web-client/src/components/health-status.tsx

@@ -1,6 +1,6 @@
 import { HealthCheckResponse_ServingStatus } from "~/lib/proto/health";
 import { Show, createEffect, createSignal, onMount } from "solid-js";
-import { Dialog } from "./dialog";
+import { ErrorDialog } from "./error-dialog";
 import { addStreamListneners, connect } from "~/lib/connection/transport";
 import { reconcile } from "solid-js/store";
 import { useConnection } from "~/context/connection-provider";
@@ -77,12 +77,12 @@ export function HealthStatus() {
   return (
     <section>
       <Show when={isConnectionDead()}>
-        <Dialog title="Connection lost">
+        <ErrorDialog title="Connection lost">
           <p class="text-xl">Streaming has stopped.</p>
           <p class="text-red-300 text-xl">
             Waiting on new signal from your Tauri app.
           </p>
-        </Dialog>
+        </ErrorDialog>
       </Show>
       <span class={variant(monitorData.health).style} />
       <span>{variant(monitorData.health).tooltip}</span>

web-client/src/components/sources/code-view.tsx

@@ -1,14 +1,14 @@
+import { Highlighter } from "shiki";
 import { Suspense, createResource } from "solid-js";
 import { Loader } from "~/components/loader";
 import { useConnection } from "~/context/connection-provider";
 import {
   HighlighterLang,
   createHighlighter,
   getHighlightedCode,
+  getText,
 } from "~/lib/code-highlight";
 
-import { Highlighter } from "shiki";
-
 type CodeViewProps = {
   path: string;
   size: number;
@@ -18,36 +18,36 @@ type CodeViewProps = {
 
 export default function CodeView(props: CodeViewProps) {
   const { connectionStore } = useConnection();
-  const [html] = createResource(
-    () =>
-      [
-        connectionStore.client.sources,
-        props.path,
-        props.size,
-        props.lang,
-      ] as const,
-    (sourceSignals) => getHighlightedCode(sourceSignals)
+
+  const [text] = createResource(
+    () => [connectionStore.client.sources, props.path, props.size] as const,
+    async (textProps) => getText(...textProps)
   );
 
   // The used highlighter does not change at all atm so it does not need to be coupled
-  // const [highlighter] = createResource(() => createHighlighter());
+  const [highlighter] = createResource(() => createHighlighter());
 
-  // const html = (
-  //   text: string | undefined,
-  //   highlighter: Highlighter | undefined,
-  //   lang: HighlighterLang,
-  //   highlightedLine?: number
-  // ) => {
-  //   if (!text || !highlighter) return undefined;
-  //   return getHighlightedCode([text, highlighter, lang, highlightedLine]);
-  // };
+  const html = (
+    text: string | undefined,
+    highlighter: Highlighter | undefined,
+    lang: HighlighterLang,
+    highlightedLine?: number
+  ) => {
+    if (!text || !highlighter) return undefined;
+    return getHighlightedCode([text, highlighter, lang, highlightedLine]);
+  };
 
   return (
     <div class="min-h-full h-max min-w-full w-max bg-black bg-opacity-50">
       <Suspense fallback={<Loader />}>
         <div
           //eslint-disable-next-line solid/no-innerhtml
-          innerHTML={html()}
+          innerHTML={html(
+            text(),
+            highlighter(),
+            props.lang,
+            props.highlightedLine
+          )}
         />
       </Suspense>
     </div>

web-client/src/components/span/span-detail.tsx

@@ -1,5 +1,4 @@
 import { For, createResource, Show } from "solid-js";
-import { useMonitor } from "~/lib/connection/monitor";
 import { formatSpansForUi } from "~/lib/span/format-spans-for-ui";
 import { getIpcRequestValues } from "~/lib/span/get-ipc-request-value";
 import { createHighlighter, getHighlightedCode } from "~/lib/code-highlight";
@@ -9,6 +8,7 @@ import { getChildrenList } from "~/lib/span/get-children-list";
 import { SpanDetailTrace } from "./span-detail-trace";
 import { SpanDetailArgs } from "./span-detail-args";
 import { isIpcSpanName } from "~/lib/span/isIpcSpanName";
+import { useMonitor } from "~/context/monitor-provider";
 
 export function SpanDetail() {
   const [searchParams] = useSearchParams();

web-client/src/entry.tsx

@@ -1,7 +1,7 @@
 import { type RouteDefinition, useNavigate, useRoutes } from "@solidjs/router";
 import { lazy, ErrorBoundary } from "solid-js";
 import { setCDN } from "@crabnebula/file-icons";
-import { ErrorDialog } from "./components/error-dialog.tsx";
+import { ErrorRoot } from "./components/error-root.tsx";
 
 const ROUTES: RouteDefinition[] = [
   {
@@ -46,7 +46,7 @@ export default function Entry() {
   setCDN("/icons");
 
   return (
-    <ErrorBoundary fallback={(e) => <ErrorDialog error={e} />}>
+    <ErrorBoundary fallback={(e) => <ErrorRoot error={e} />}>
       <Routes />
     </ErrorBoundary>
   );

web-client/src/lib/tauri/tauri-conf-schema.ts

@@ -3,12 +3,12 @@ import tauriConfigSchemaV2 from "./tauri-conf-schema-v2.json";
 import { Draft07, JsonSchema, JsonPointer } from "json-schema-library";
 import { createResource, Signal } from "solid-js";
 import { useRouteData, useLocation, useParams } from "@solidjs/router";
-import { Connection } from "~/lib/connection/transport.ts";
 import { awaitEntries, getEntryBytes } from "~/lib/sources/file-entries";
 import { useConfiguration } from "~/components/tauri/configuration-context";
 import { unwrap, reconcile } from "solid-js/store";
-import { useMonitor } from "../connection/monitor";
 import { bytesToText } from "../code-highlight";
+import { useConnection } from "~/context/connection-provider";
+import { useMonitor } from "~/context/monitor-provider";
 
 export type configurationStore = {
   configs?: configurationObject[];
@@ -74,8 +74,8 @@ export function retrieveConfigurations() {
   if (configurations.configs)
     return createResource(() => configurations.configs);
 
-  const { client } = useRouteData<Connection>();
-  const [entries] = awaitEntries(client.sources, "");
+  const { connectionStore } = useConnection();
+  const [entries] = awaitEntries(connectionStore.client.sources, "");
 
   return createResource(
     entries,
@@ -85,7 +85,7 @@ export function retrieveConfigurations() {
       return await Promise.all(
         filteredEntries.map(async (e): Promise<configurationObject> => {
           const bytes = await getEntryBytes(
-            client.sources,
+            connectionStore.client.sources,
             e.path,
             Number(e.size)
           );