refac: show installation progress

This commit is contained in:
Timothy Jaeryang Baek 2025-01-17 22:21:10 -08:00
parent 9c20ed3de9
commit 9c96f896d0
2 changed files with 52 additions and 18 deletions

View File

@ -4,6 +4,7 @@
import { installStatus, serverStatus, serverStartedAt, serverLogs } from '../stores';
import Logs from './setup/Logs.svelte';
import Spinner from './common/Spinner.svelte';
import ArrowRightCircle from './icons/ArrowRightCircle.svelte';
@ -105,15 +106,7 @@
</div>
{/if}
{#if showLogs}
<div
class="text-xs font-mono text-left max-h-60 overflow-y-auto max-w-2xl w-full flex flex-col-reverse scrollbar-hidden no-drag-region"
>
{#each $serverLogs.reverse() as log, idx}
<div class="text-xs font-mono">{log}</div>
{/each}
</div>
{/if}
<Logs show={showLogs} logs={$serverLogs} />
</div>
<div class="absolute bottom-0 pb-10">
@ -134,6 +127,14 @@
This might take a few minutes, Well notify you when its
ready.
</div>
{#if $serverLogs.length > 0}
<div
class="text-[0.5rem] text-gray-500 font-mono text-center line-clamp-1 px-10"
>
{$serverLogs.at(-1)}
</div>
{/if}
</div>
{:else if mounted}
<button
@ -185,15 +186,7 @@
{/if}
{/if}
{#if showLogs}
<div
class="text-xs font-mono text-left max-h-60 overflow-y-auto max-w-2xl w-full flex flex-col-reverse scrollbar-hidden no-drag-region"
>
{#each $serverLogs.reverse() as log, idx}
<div class="text-xs font-mono">{log}</div>
{/each}
</div>
{/if}
<Logs show={showLogs} logs={$serverLogs} />
</div>
</div>
</div>

View File

@ -0,0 +1,41 @@
<script lang="ts">
import Tooltip from '../common/Tooltip.svelte';
export let show;
export let logs = [];
</script>
{#if show}
<div class="relative max-w-full px-3">
{#if logs.length > 0}
<div class="absolute top-0 right-0 p-1 bg-transparent text-xs font-mono">
<Tooltip content="Copy">
<button class="text-xs cursor-pointer" on:click={() => (logs = [])}>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2.3"
stroke="currentColor"
class="w-4 h-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184"
/>
</svg>
</button>
</Tooltip>
</div>
{/if}
<div
class="text-xs font-mono text-left max-h-40 overflow-y-auto max-w-2xl w-full flex flex-col-reverse scrollbar-hidden no-drag-region"
>
{#each logs.reverse() as log, idx}
<div class="text-xs font-mono">{log}</div>
{/each}
</div>
</div>
{/if}