From fd9e17d05a48a89dafc569dfc55f40c7affd1629 Mon Sep 17 00:00:00 2001
From: Yann Amsellem <yann@agnostic.engineering>
Date: Thu, 16 Jan 2025 17:37:36 +0100
Subject: [PATCH] ui(panel): change icons

---
 src/lib/icons/CommandLine.svelte | 25 ------------
 src/lib/icons/PanelBottom.svelte | 16 ++++++++
 src/lib/icons/PanelLeft.svelte   | 16 ++++++++
 src/lib/icons/TreeView.svelte    | 67 --------------------------------
 src/routes/+page.svelte          | 39 ++++++++++---------
 5 files changed, 52 insertions(+), 111 deletions(-)
 delete mode 100644 src/lib/icons/CommandLine.svelte
 create mode 100644 src/lib/icons/PanelBottom.svelte
 create mode 100644 src/lib/icons/PanelLeft.svelte
 delete mode 100644 src/lib/icons/TreeView.svelte

diff --git a/src/lib/icons/CommandLine.svelte b/src/lib/icons/CommandLine.svelte
deleted file mode 100644
index 36e3111..0000000
--- a/src/lib/icons/CommandLine.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<script lang="ts">
-	import type { SvelteHTMLElements } from 'svelte/elements';
-
-	interface Props extends Omit<SvelteHTMLElements['svg'], 'width' | 'height'> {
-		size?: string | number | null;
-	}
-
-	let { size = 24, ...rest }: Props = $props();
-</script>
-
-<svg
-	viewBox="0 0 24 24"
-	aria-hidden="true"
-	width={size}
-	height={size}
-	{...rest}
-	data-name="command-line"
->
-	<path
-		fill="currentColor"
-		fill-rule="evenodd"
-		d="M2.25 6a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V6Zm3.97.97a.75.75 0 0 1 1.06 0l2.25 2.25a.75.75 0 0 1 0 1.06l-2.25 2.25a.75.75 0 0 1-1.06-1.06l1.72-1.72-1.72-1.72a.75.75 0 0 1 0-1.06Zm4.28 4.28a.75.75 0 0 0 0 1.5h3a.75.75 0 0 0 0-1.5h-3Z"
-		clip-rule="evenodd"
-	/>
-</svg>
diff --git a/src/lib/icons/PanelBottom.svelte b/src/lib/icons/PanelBottom.svelte
new file mode 100644
index 0000000..5b7d31b
--- /dev/null
+++ b/src/lib/icons/PanelBottom.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { SvelteHTMLElements } from 'svelte/elements';
+
+	interface Props extends Omit<SvelteHTMLElements['svg'], 'width' | 'height'> {
+		size?: string | number | null;
+	}
+
+	let { size = 24, ...rest }: Props = $props();
+</script>
+
+<svg width={size} height={size} viewBox="0 0 20 20" {...rest} data-name="panel-bottom">
+	<path
+		fill="currentColor"
+		d="M2 6a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3zm3-2a2 2 0 0 0-2 2v5h14V6a2 2 0 0 0-2-2z"
+	/>
+</svg>
diff --git a/src/lib/icons/PanelLeft.svelte b/src/lib/icons/PanelLeft.svelte
new file mode 100644
index 0000000..e106cd1
--- /dev/null
+++ b/src/lib/icons/PanelLeft.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { SvelteHTMLElements } from 'svelte/elements';
+
+	interface Props extends Omit<SvelteHTMLElements['svg'], 'width' | 'height'> {
+		size?: string | number | null;
+	}
+
+	let { size = 24, ...rest }: Props = $props();
+</script>
+
+<svg width={size} height={size} viewBox="0 0 24 24" {...rest} data-name="panel-left">
+	<path
+		d="M4.75 4A2.75 2.75 0 0 0 2 6.75v10.5A2.75 2.75 0 0 0 4.75 20h14.5A2.75 2.75 0 0 0 22 17.25V6.75A2.75 2.75 0 0 0 19.25 4H4.75ZM9 18.5v-13h10.25c.69 0 1.25.56 1.25 1.25v10.5c0 .69-.56 1.25-1.25 1.25H9Z"
+		fill="currentColor"
+	/>
+</svg>
diff --git a/src/lib/icons/TreeView.svelte b/src/lib/icons/TreeView.svelte
deleted file mode 100644
index 8db7760..0000000
--- a/src/lib/icons/TreeView.svelte
+++ /dev/null
@@ -1,67 +0,0 @@
-<script lang="ts">
-	import type { SvelteHTMLElements } from 'svelte/elements';
-
-	interface Props extends Omit<SvelteHTMLElements['svg'], 'width' | 'height'> {
-		size?: string | number | null;
-	}
-
-	let { size = 24, ...rest }: Props = $props();
-</script>
-
-<svg width={size} height={size} viewBox="0 0 256 256" {...rest} data-name="tree-view">
-	<rect
-		x="56"
-		y="24"
-		width="48"
-		height="48"
-		rx="8"
-		fill="none"
-		stroke="currentColor"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		stroke-width="16"
-	/>
-	<rect
-		x="168"
-		y="96"
-		width="48"
-		height="48"
-		rx="8"
-		fill="none"
-		stroke="currentColor"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		stroke-width="16"
-	/>
-	<rect
-		x="168"
-		y="184"
-		width="48"
-		height="48"
-		rx="8"
-		fill="none"
-		stroke="currentColor"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		stroke-width="16"
-	/>
-	<line
-		x1="80"
-		y1="120"
-		x2="168"
-		y2="120"
-		fill="none"
-		stroke="currentColor"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		stroke-width="16"
-	/>
-	<path
-		d="M80,72V192a16,16,0,0,0,16,16h72"
-		fill="none"
-		stroke="currentColor"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		stroke-width="16"
-	/>
-</svg>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 461d865..389290b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -10,11 +10,11 @@
 	import TimeCounter from '$lib/components/TimeCounter.svelte';
 	import { setAppContext } from '$lib/context';
 	import Bars3 from '$lib/icons/Bars3.svelte';
-	import CommandLine from '$lib/icons/CommandLine.svelte';
+	import PanelBottom from '$lib/icons/PanelBottom.svelte';
+	import PanelLeft from '$lib/icons/PanelLeft.svelte';
 	import Play from '$lib/icons/Play.svelte';
 	import Plus from '$lib/icons/Plus.svelte';
 	import Save from '$lib/icons/Save.svelte';
-	import TreeView from '$lib/icons/TreeView.svelte';
 	import type { Table } from '$lib/olap-engine';
 	import { engine, type OLAPResponse } from '$lib/olap-engine';
 	import { PanelState } from '$lib/PanelState.svelte';
@@ -46,7 +46,7 @@
 
 		if (response && last?.content !== query) await addHistoryEntry(query);
 
-		if (response) dataPanel.open = true;
+		if (response) bottomPanel.open = true;
 	}
 
 	let tables = $state.raw<Table[]>([]);
@@ -164,7 +164,7 @@
 
 	$effect(() => {
 		if (!isMobile) drawerOpened = false;
-		else itemPanel.open = false;
+		else leftPanel.open = false;
 	});
 
 	let tabs = $state<Tab[]>([]);
@@ -206,8 +206,8 @@
 
 	$effect(() => void saveTabs($state.snapshot(tabs), selectedTabIndex).catch(console.error));
 
-	const dataPanel = new PanelState('65%', false, '100%');
-	const itemPanel = new PanelState('242px', true);
+	const bottomPanel = new PanelState('65%', false, '100%');
+	const leftPanel = new PanelState('242px', true);
 </script>
 
 <svelte:window onkeydown={handleKeyDown} bind:innerWidth={screenWidth} />
@@ -236,9 +236,9 @@
 		{/if}
 		<SplitPane
 			type="horizontal"
-			disabled={!itemPanel.open || isMobile}
-			bind:pos={itemPanel.position}
-			min={!itemPanel.open || isMobile ? '0px' : '242px'}
+			disabled={!leftPanel.open || isMobile}
+			bind:pos={leftPanel.position}
+			min={!leftPanel.open || isMobile ? '0px' : '242px'}
 			max="40%"
 		>
 			{#snippet a()}
@@ -250,9 +250,9 @@
 				<SplitPane
 					type="vertical"
 					min="20%"
-					max={dataPanel.open ? '80%' : '100%'}
-					bind:pos={dataPanel.position}
-					disabled={!dataPanel.open}
+					max={bottomPanel.open ? '80%' : '100%'}
+					bind:pos={bottomPanel.position}
+					disabled={!bottomPanel.open}
 					--color="hsl(0deg 0% 20%)"
 				>
 					{#snippet a()}
@@ -308,11 +308,11 @@
 	{#if !isMobile}
 		<footer>
 			<button
-				class:active={itemPanel.open}
-				onclick={() => (itemPanel.open = !itemPanel.open)}
+				class:active={leftPanel.open}
+				onclick={() => (leftPanel.open = !leftPanel.open)}
 				style:margin-left="7px"
 			>
-				<TreeView size="12" />
+				<PanelLeft size="12" />
 			</button>
 			<div class="spacer"></div>
 			<TimeCounter bind:this={counter} />
@@ -320,11 +320,11 @@
 				<span class="label">build-{BUILD}</span>
 			{/if}
 			<button
-				class:active={dataPanel.open}
-				onclick={() => (dataPanel.open = !dataPanel.open)}
+				class:active={bottomPanel.open}
+				onclick={() => (bottomPanel.open = !bottomPanel.open)}
 				style:margin-right="7px"
 			>
-				<CommandLine size="12" />
+				<PanelBottom size="12" />
 			</button>
 		</footer>
 	{/if}
@@ -450,6 +450,7 @@
 		gap: 8px;
 		font-family: monospace;
 		color: hsl(0deg 0% 70%);
+		font-size: 9px;
 
 		& > .spacer {
 			flex: 1;
@@ -466,7 +467,7 @@
 			aspect-ratio: 1;
 			flex-shrink: 0;
 			background-color: transparent;
-			color: hsl(0deg 0% 100%);
+			color: inherit;
 
 			&.active {
 				color: hsl(204deg 88% 65%);