Merge pull request #52 from agnosticeng/ui/update-sidebar

chore(ui): unify ui on sidebar tabs

src/lib/components/Datasets/Datasets.svelte

@@ -2,7 +2,6 @@
 	import type { Table } from '$lib/olap-engine';
 
 	import SearchBar from '$lib/components/SearchBar.svelte';
-	import Database from '$lib/icons/Database.svelte';
 	import TableC from '$lib/icons/Table.svelte';
 	import {
 		filter,
@@ -17,8 +16,6 @@
 
 	let { tables = [] }: Props = $props();
 
-	let loading = $state(false);
-
 	let search = $state<string>('');
 	const filtered = $derived(filter(tables, search));
 </script>
@@ -28,15 +25,14 @@
 	{#each filtered as source, i (source.name)}
 		<details open={i === 0}>
 			<summary>
-				{#if source.engine === 'MergeTree'}
-					<Database size="15" />
+				{#if Object.keys(SOURCE_TYPE_SHORT_NAME_MAP).includes(source.engine)}
+					<span class="Tag" style:background-color={SOURCE_TYPE_COLOR_MAP[source.engine]}>
+						{SOURCE_TYPE_SHORT_NAME_MAP[source.engine]}
+					</span>
 				{:else}
 					<TableC size="15" />
 				{/if}
 				<h3>{source.name}</h3>
-				<span class="Tag" style:background-color={SOURCE_TYPE_COLOR_MAP[source.engine]}>
-					{SOURCE_TYPE_SHORT_NAME_MAP[source.engine]}
-				</span>
 			</summary>
 			<ul>
 				{#each source.columns ?? [] as column}
@@ -94,6 +90,8 @@
 	}
 
 	h3 {
+		font-size: 1rem;
+		font-weight: 500;
 		margin: 0;
 	}
 

src/lib/components/Datasets/utils.ts

@@ -14,13 +14,13 @@ export function filter(sources: Table[], search: string) {
 export const SOURCE_TYPE_COLOR_MAP: Record<string, string> = {
 	FILE: 'hsl(58deg 37% 28%)',
 	S3: 'hsl(20deg 37% 28%)',
-	MergeTree: 'hsl(199deg 37% 28%)'
+	ReplacingMergeTree: 'hsl(199deg 37% 28%)'
 };
 
 export const SOURCE_TYPE_SHORT_NAME_MAP: Record<string, string> = {
 	FILE: 'FILE',
 	S3: 'S3',
-	MergeTree: 'MT'
+	ReplacingMergeTree: 'MT'
 };
 
 export function remove_nullable(type: string) {

src/lib/components/History.svelte

@@ -2,6 +2,7 @@
 	import type { HistoryEntry } from '$lib/repositories/history';
 	import dayjs from 'dayjs';
 	import relativeTime from 'dayjs/plugin/relativeTime';
+	import SearchBar from './SearchBar.svelte';
 
 	dayjs.extend(relativeTime);
 
@@ -11,10 +12,17 @@
 	}
 
 	let { history: entries, onHistoryClick }: Props = $props();
+
+	let search = $state('');
+
+	let filtered = $derived(
+		search ? entries.filter((e) => e.content.toLowerCase().includes(search.toLowerCase())) : entries
+	);
 </script>
 
+<SearchBar bind:value={search} />
 <ol role="menu">
-	{#each entries as entry}
+	{#each filtered as entry}
 		<li
 			tabindex="-1"
 			oncontextmenu={(e) => {
@@ -72,7 +80,7 @@
 
 	.content {
 		height: 18px;
-		font-weight: 600;
+		font-weight: 500;
 		padding: 3px 0;
 		line-height: 1.15;
 

src/lib/components/Queries/Queries.svelte

@@ -3,6 +3,7 @@
 	import type { Query } from '$lib/repositories/queries';
 	import dayjs from 'dayjs';
 	import relativeTime from 'dayjs/plugin/relativeTime';
+	import SearchBar from '../SearchBar.svelte';
 
 	dayjs.extend(relativeTime);
 
@@ -29,10 +30,25 @@
 
 	let input = $state.raw<HTMLInputElement>();
 	$effect(() => input?.focus());
+
+	let search = $state('');
+	const filtered = $derived(search ? filter(queries, search) : queries);
+
+	function filter(queries: Query[], search: string) {
+		if (!search) return queries;
+
+		const lower_search = search.toLowerCase();
+		return queries.filter((q) => {
+			return (
+				q.name.toLowerCase().includes(lower_search) || q.sql.toLowerCase().includes(lower_search)
+			);
+		});
+	}
 </script>
 
+<SearchBar bind:value={search} />
 <ol role="menu">
-	{#each queries as query (query.id)}
+	{#each filtered as query (query.id)}
 		<li
 			tabindex="-1"
 			oncontextmenu={(e) => {
@@ -139,7 +155,7 @@
 					-webkit-appearance: none;
 					width: 100%;
 					height: 18px;
-					font-weight: 600;
+					font-weight: 500;
 					outline: none;
 					margin: 0;
 					padding: 0;

src/lib/icons/Database.svelte

@@ -1,16 +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}>
-	<path
-		fill="currentColor"
-		d="M128,24C74.17,24,32,48.6,32,80v96c0,31.4,42.17,56,96,56s96-24.6,96-56V80C224,48.6,181.83,24,128,24Zm80,104c0,9.62-7.88,19.43-21.61,26.92C170.93,163.35,150.19,168,128,168s-42.93-4.65-58.39-13.08C55.88,147.43,48,137.62,48,128V111.36c17.06,15,46.23,24.64,80,24.64s62.94-9.68,80-24.64ZM69.61,53.08C85.07,44.65,105.81,40,128,40s42.93,4.65,58.39,13.08C200.12,60.57,208,70.38,208,80s-7.88,19.43-21.61,26.92C170.93,115.35,150.19,120,128,120s-42.93-4.65-58.39-13.08C55.88,99.43,48,89.62,48,80S55.88,60.57,69.61,53.08ZM186.39,202.92C170.93,211.35,150.19,216,128,216s-42.93-4.65-58.39-13.08C55.88,195.43,48,185.62,48,176V159.36c17.06,15,46.23,24.64,80,24.64s62.94-9.68,80-24.64V176C208,185.62,200.12,195.43,186.39,202.92Z"
-	/>
-</svg>