From 313f8dd902a782bd1b7b37e01603939015617e0c Mon Sep 17 00:00:00 2001
From: Yann Amsellem <yann@agnostic.engineering>
Date: Fri, 17 Jan 2025 17:05:56 +0100
Subject: [PATCH 1/2] ui(logs): put the trash on the same line as the tabs

---
 src/lib/components/Console.svelte | 49 +------------------------------
 src/lib/components/Result.svelte  | 30 ++++++++++++++++++-
 2 files changed, 30 insertions(+), 49 deletions(-)

diff --git a/src/lib/components/Console.svelte b/src/lib/components/Console.svelte
index 3bc3595..4979d2e 100644
--- a/src/lib/components/Console.svelte
+++ b/src/lib/components/Console.svelte
@@ -7,14 +7,11 @@
 </script>
 
 <script lang="ts">
-	import Trash from '$lib/icons/Trash.svelte';
-
 	interface Props {
 		logs: Log[];
-		onClear?: () => void;
 	}
 
-	let { logs, onClear }: Props = $props();
+	let { logs }: Props = $props();
 </script>
 
 <div class="container">
@@ -24,19 +21,13 @@
 			<span class={log.level}>{log.data}</span>
 		</div>
 	{/each}
-	<div class="footer">
-		<button onclick={() => onClear?.()}><Trash size="12" /></button>
-	</div>
 </div>
 
 <style>
 	.container {
-		--footer-height: 22px;
-
 		height: 100%;
 		width: 100%;
 		padding: 4px 7px;
-		padding-bottom: var(--footer-height);
 		position: relative;
 
 		overflow-y: auto;
@@ -62,43 +53,5 @@
 				margin-bottom: 12px;
 			}
 		}
-
-		& > .footer {
-			position: absolute;
-			bottom: 0;
-			left: 0;
-			right: 0;
-			height: var(--footer-height);
-			padding: 0 7px;
-
-			display: flex;
-			align-items: center;
-			justify-content: end;
-
-			border-top: 1px solid hsl(0deg 0% 20%);
-
-			& > button {
-				appearance: none;
-				border: none;
-				outline: none;
-				background-color: transparent;
-
-				height: 100%;
-				aspect-ratio: 1;
-
-				display: flex;
-				align-items: center;
-				justify-content: center;
-
-				&:is(:hover):not(:disabled) {
-					background-color: hsl(0deg 0% 10%);
-					cursor: pointer;
-
-					&:active {
-						background-color: hsl(0deg 0% 13%);
-					}
-				}
-			}
-		}
 	}
 </style>
diff --git a/src/lib/components/Result.svelte b/src/lib/components/Result.svelte
index 4c5b6bb..8b37122 100644
--- a/src/lib/components/Result.svelte
+++ b/src/lib/components/Result.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Table } from '$lib/components/Table';
+	import Trash from '$lib/icons/Trash.svelte';
 	import type { OLAPResponse } from '$lib/olap-engine';
 	import { untrack } from 'svelte';
 	import ChartContainer from './ChartContainer.svelte';
@@ -31,6 +32,10 @@
 		<button aria-current={tab === 'data'} onclick={() => (tab = 'data')}>Data</button>
 		<button aria-current={tab === 'chart'} onclick={() => (tab = 'chart')}>Chart</button>
 		<button aria-current={tab === 'logs'} onclick={() => (tab = 'logs')}>Logs</button>
+		{#if tab === 'logs'}
+			<div class="spacer"></div>
+			<button class="action" onclick={() => onClearLogs?.()}><Trash size="12" /></button>
+		{/if}
 	</nav>
 	<div>
 		{#if response}
@@ -42,7 +47,7 @@
 		{/if}
 
 		{#if tab === 'logs'}
-			<Console {logs} onClear={onClearLogs} />
+			<Console {logs} />
 		{/if}
 	</div>
 </section>
@@ -99,6 +104,29 @@
 					z-index: 1;
 				}
 			}
+
+			& .spacer {
+				flex: 1;
+			}
+
+			& .action {
+				height: 100%;
+				aspect-ratio: 1;
+				padding: 0px;
+
+				display: flex;
+				align-items: center;
+				justify-content: center;
+
+				&:is(:hover):not(:disabled) {
+					background-color: hsl(0deg 0% 10%);
+					cursor: pointer;
+
+					&:active {
+						background-color: hsl(0deg 0% 13%);
+					}
+				}
+			}
 		}
 	}
 

From 8af186d7bd4a48118f2df694cca1dbc76d45a7c1 Mon Sep 17 00:00:00 2001
From: Yann Amsellem <yann@agnostic.engineering>
Date: Fri, 17 Jan 2025 17:13:20 +0100
Subject: [PATCH 2/2] fix(data-panel): only change the tab on response if the
 user is on logs

---
 src/routes/+page.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index c9f35f7..56306d1 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -49,7 +49,7 @@
 
 		if (response) {
 			bottomPanel.open = true;
-			bottomPanelTab = 'data';
+			if (bottomPanelTab === 'logs') bottomPanelTab = 'data';
 		}
 	}