Merge pull request #60 from agnosticeng/ui/logs

ui(logs): put the trash on the same line as the tabs

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>

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%);
+					}
+				}
+			}
 		}
 	}
 

src/routes/+page.svelte

@@ -49,7 +49,7 @@
 
 		if (response) {
 			bottomPanel.open = true;
-			bottomPanelTab = 'data';
+			if (bottomPanelTab === 'logs') bottomPanelTab = 'data';
 		}
 	}