fix launcher tab

Author: ddPn08

src/web/components/log.tsx

@@ -1,5 +1,6 @@
+import Color from 'color'
 import { css, styled } from 'decorock'
-import { Component, createEffect, createSignal, For } from 'solid-js'
+import { on, Component, createEffect, createSignal, For, Show } from 'solid-js'
 
 import { classnames } from '~/web/lib/classnames'
 
@@ -13,6 +14,17 @@ const Container = styled.div`
     font-size: 0.9rem;
     white-space: nowrap;
   }
+
+  a {
+    color: ${(p) =>
+      p.theme.name === 'light'
+        ? Color('rgb(0, 255, 255)').darken(0.25)
+        : Color('rgb(0, 255, 255)')};
+    text-underline-offset: 2px;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
 `
 
 export const Log: Component<{
@@ -22,14 +34,18 @@ export const Log: Component<{
   autoScroll?: boolean
 }> = (props) => {
   const [ref, setRef] = createSignal<HTMLDivElement>()
-  createEffect(() => {
-    if (typeof props.autoScroll !== 'undefined' && !props.autoScroll) return
-    props.children
-    setTimeout(() => {
-      const el = ref()!
-      el.scrollTop = el.scrollHeight
-    })
-  })
+  const [onBottom, setOnBottom] = createSignal(true)
+
+  createEffect(
+    on(
+      () => props.children,
+      () => {
+        const el = ref()!
+        if (typeof props.autoScroll !== 'undefined' && !props.autoScroll) return
+        if (onBottom()) el.scrollTop = el.scrollHeight
+      },
+    ),
+  )
 
   return (
     <Container
@@ -45,8 +61,28 @@ export const Log: Component<{
           overflow-y: auto;
         `,
       )}
+      onScroll={(e) => {
+        setOnBottom(
+          e.currentTarget.scrollHeight - e.currentTarget.scrollTop === e.currentTarget.clientHeight,
+        )
+      }}
     >
-      <For each={props.children}>{(log) => <p>{log}</p>}</For>
+      <For each={props.children}>
+        {(log) => {
+          const logs = log.split(/(http:\/\/[^\s]+)/g)
+          return (
+            <p>
+              <For each={logs}>
+                {(t) => (
+                  <Show when={t.match(/(http:\/\/[^\s]+)/)} fallback={t}>
+                    <a href={t}>{t}</a>
+                  </Show>
+                )}
+              </For>
+            </p>
+          )
+        }}
+      </For>
     </Container>
   )
 }

src/web/pages/webui/index.tsx

@@ -66,7 +66,7 @@ export const WebUI = () => {
                 overflow-y: auto;
               `}
               show={isSelected()}
-              unmount={label !== 'UI'}
+              unmount={label !== 'UI' && label !== 'Launcher'}
             >
               <Comp />
             </TabPanel>

src/web/pages/webui/launcher.tsx

@@ -49,7 +49,7 @@ export const createArgs = () => {
     if (!key.startsWith('webui/args')) continue
     const arg = key.split('/').slice(-1)[0]
     if (arg === 'custom') result += ` ${val}`
-    else if (typeof val === 'boolean' && val) result += ` --${arg}`
+    else if (typeof val === 'boolean') result += val ? ` --${arg}` : ''
     else if (typeof val === 'string') result += ` --${arg} "${val}"`.replace(/\\/g, '\\\\')
     else result += ` --${arg} ${val}`
   }