diff --git a/src/lib/LogPanel.svelte b/src/lib/LogPanel.svelte index e75220a..c6ce6d7 100644 --- a/src/lib/LogPanel.svelte +++ b/src/lib/LogPanel.svelte @@ -1,7 +1,8 @@
Output
+ +
-
- {#if logs.length === 0} + {#if searchVisible} + + {/if} +
+ {#if filteredLogs.length === 0 && searchQuery.trim() !== ''} +
No matching logs found...
+ {:else if logs.length === 0}
No output yet...
{:else} - {#each logs as log, i} + {#each filteredLogs as log, i}
{formatTime(log.timestamp)} {log.message} @@ -91,6 +192,40 @@ border-bottom: 1px solid #3a3a3a; } + .search-bar { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 0.75rem; + background-color: #252525; + border-bottom: 1px solid #3a3a3a; + } + + .search-bar :global(.search-icon) { + color: rgba(255, 255, 255, 0.4); + flex-shrink: 0; + } + + .search-input { + flex: 1; + background-color: #1a1a1a; + color: rgba(255, 255, 255, 0.87); + border: 1px solid #3a3a3a; + padding: 0.375rem 0.5rem; + font-size: 0.875rem; + font-family: 'Courier New', monospace; + outline: none; + transition: border-color 0.2s; + } + + .search-input:focus { + border-color: rgba(255, 255, 255, 0.4); + } + + .search-input::placeholder { + color: rgba(255, 255, 255, 0.3); + } + .log-title { font-size: 0.75rem; font-weight: 600; @@ -126,6 +261,26 @@ cursor: not-allowed; } + .action-button.pause-active { + color: rgba(255, 200, 100, 0.9); + background-color: rgba(255, 200, 100, 0.15); + } + + .action-button.pause-active:hover { + color: rgba(255, 200, 100, 1); + background-color: rgba(255, 200, 100, 0.25); + } + + .action-button.search-active { + color: rgba(100, 200, 255, 0.9); + background-color: rgba(100, 200, 255, 0.15); + } + + .action-button.search-active:hover { + color: rgba(100, 200, 255, 1); + background-color: rgba(100, 200, 255, 0.25); + } + .log-content { flex: 1; overflow-y: auto;