BuboBubo/oldboy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Better UI

Browse Source
This commit is contained in:
Raphaël Forment
2025-10-15 11:27:58 +02:00
parent bbdb01200e
commit 65c3422610
6 changed files with 270 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
src/lib/components/editor/LogPanel.svelte
View File

@ -6,9 +6,11 @@
interface Props {
logs?: LogEntry[];
onHeaderClick?: () => void;
collapsed?: boolean;
}
let { logs = [] }: Props = $props();
let { logs = [], onHeaderClick, collapsed = false }: Props = $props();
const { csound } = getAppContext();
@ -109,48 +111,50 @@
</script>
<div class="log-panel">
<div class="log-header">
<span class="log-title">Output</span>
<div class="log-actions">
<button
class="action-button"
class:search-active={searchVisible}
onclick={toggleSearch}
title={searchVisible ? 'Hide search' : 'Show search'}
>
<Search size={14} />
</button>
<button
class="action-button"
class:pause-active={!autoFollow}
onclick={toggleAutoFollow}
title={autoFollow ? 'Pause auto-follow' : 'Resume auto-follow'}
>
{#if autoFollow}
<Pause size={14} />
{:else}
<Play size={14} />
{/if}
</button>
<button
class="action-button"
onclick={copyLogs}
disabled={logs.length === 0}
title="Copy logs"
>
<Copy size={14} />
</button>
<button
class="action-button"
onclick={clearLogs}
disabled={logs.length === 0}
title="Clear logs"
>
<Trash2 size={14} />
</button>
</div>
<div class="log-header" onclick={onHeaderClick}>
<span class="log-title">Logs</span>
{#if !collapsed}
<div class="log-actions" onclick={(e) => e.stopPropagation()}>
<button
class="action-button"
class:search-active={searchVisible}
onclick={toggleSearch}
title={searchVisible ? 'Hide search' : 'Show search'}
>
<Search size={14} />
</button>
<button
class="action-button"
class:pause-active={!autoFollow}
onclick={toggleAutoFollow}
title={autoFollow ? 'Pause auto-follow' : 'Resume auto-follow'}
>
{#if autoFollow}
<Pause size={14} />
{:else}
<Play size={14} />
{/if}
</button>
<button
class="action-button"
onclick={copyLogs}
disabled={logs.length === 0}
title="Copy logs"
>
<Copy size={14} />
</button>
<button
class="action-button"
onclick={clearLogs}
disabled={logs.length === 0}
title="Clear logs"
>
<Trash2 size={14} />
</button>
</div>
{/if}
</div>
{#if searchVisible}
{#if searchVisible && !collapsed}
<div class="search-bar">
<Search size={14} class="search-icon" />
<input
@ -161,7 +165,8 @@
/>
</div>
{/if}
<div class="log-content" bind:this={logContentEl} onscroll={handleScroll}>
{#if !collapsed}
<div class="log-content" bind:this={logContentEl} onscroll={handleScroll}>
{#if filteredLogs.length === 0 && searchQuery.trim() !== ''}
<div class="empty-state">No matching logs found...</div>
{:else if logs.length === 0}
@ -174,7 +179,8 @@
</div>
{/each}
{/if}
</div>
</div>
{/if}
</div>
<style>
@ -192,6 +198,12 @@
padding: 0.5rem 0.75rem;
background-color: #2a2a2a;
border-bottom: 1px solid #3a3a3a;
cursor: pointer;
transition: background-color 0.2s;
}
.log-header:hover {
background-color: #323232;
}
.search-bar {