Merge pull request #103 from agnosticeng/feat/native/switch-proxy

src-tauri/tauri.conf.json

@@ -40,7 +40,8 @@
         "width": 1250,
         "height": 900,
         "theme": "Dark",
-        "useHttpsScheme": true
+        "useHttpsScheme": true,
+        "backgroundColor": "#000000"
       }
     ]
   }

src/lib/components/ProxySwitch.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
+
+	const usingProxy = $derived(page.url.searchParams.has('proxy'));
+	async function setProxy(proxy?: string) {
+		const url = new URL(page.url);
+		url.searchParams.delete('proxy');
+		if (proxy) url.searchParams.set('proxy', proxy);
+		await goto(url, { replaceState: true });
+		window.location.reload();
+	}
+</script>
+
+<div>
+	<button disabled={!usingProxy} onclick={() => setProxy()}>chDB</button>
+	<button disabled={usingProxy} onclick={() => setProxy(CLICKHOUSE_URL)}>agx.app</button>
+</div>
+
+<style>
+	div {
+		width: 100%;
+		padding: 8px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	div > button {
+		padding: 5px 8px;
+		border: 1px solid hsl(0 0% 20%);
+		border-radius: 4px;
+		background-color: hsl(0deg 0% 7%);
+		color: hsl(0 0% 80%);
+
+		&:not(:disabled):hover {
+			background-color: hsl(0deg 0% 15%);
+			color: hsl(0 0% 90%);
+		}
+
+		&:disabled {
+			background-color: hsl(0 0% 20%);
+			color: hsl(0 0% 90%);
+		}
+
+		&:has(~ button) {
+			border-bottom-right-radius: 0;
+			border-top-right-radius: 0;
+		}
+
+		& ~ button {
+			border-left: none;
+			border-bottom-left-radius: 0;
+			border-top-left-radius: 0;
+		}
+	}
+
+	button {
+		appearance: none;
+		outline: none;
+		border: none;
+		background: none;
+		padding: 0;
+
+		&:not(:disabled):hover {
+			cursor: pointer;
+		}
+	}
+</style>

src/lib/components/SideBar.svelte

@@ -4,6 +4,7 @@
 	import type { Query } from '$lib/repositories/queries';
 	import Datasets from './Datasets/Datasets.svelte';
 	import History from './History.svelte';
+	import ProxySwitch from './ProxySwitch.svelte';
 	import Queries from './Queries/Queries.svelte';
 
 	type Tab = 'sources' | 'queries' | 'history';
@@ -44,14 +45,19 @@
 		<button aria-current={tab === 'queries'} onclick={() => switch_to('queries')}>Queries</button>
 		<button aria-current={tab === 'history'} onclick={() => switch_to('history')}>History</button>
 	</nav>
-	{#if tab === 'sources'}
-		<Datasets {tables} />
-	{/if}
-	{#if tab === 'queries'}
-		<Queries {queries} onDelete={onQueryDelete} onOpen={onQueryOpen} onRename={onQueryRename} />
-	{/if}
-	{#if tab === 'history'}
-		<History {history} onOpen={onHistoryOpen} onDelete={onHistoryDelete} />
+	<div>
+		{#if tab === 'sources'}
+			<Datasets {tables} />
+		{/if}
+		{#if tab === 'queries'}
+			<Queries {queries} onDelete={onQueryDelete} onOpen={onQueryOpen} onRename={onQueryRename} />
+		{/if}
+		{#if tab === 'history'}
+			<History {history} onOpen={onHistoryOpen} onDelete={onHistoryDelete} />
+		{/if}
+	</div>
+	{#if PLATFORM === 'NATIVE'}
+		<ProxySwitch />
 	{/if}
 </section>
 
@@ -62,15 +68,16 @@
 
 		padding: 14px 20px 0;
 		background-color: hsl(0deg 0% 5%);
-		display: flex;
-		flex-direction: column;
-		gap: 18px;
 		border-right: 1px solid hsl(0deg 0% 20%);
+
+		display: grid;
+		grid-template-rows: minmax(0, auto) 1fr minmax(0, auto);
 	}
 
 	nav {
 		display: flex;
 		justify-content: space-between;
+		margin-bottom: 18px;
 
 		& > button {
 			font-size: 11px;
@@ -86,6 +93,11 @@
 		}
 	}
 
+	div {
+		display: flex;
+		flex-direction: column;
+	}
+
 	button {
 		appearance: none;
 		outline: none;

src/lib/olap-engine/index.ts

@@ -33,4 +33,7 @@ export interface OLAPEngine extends IListener<Events> {
 	getUDFs(): Promise<string[]>;
 }
 
-export const engine: OLAPEngine = PLATFORM === 'WEB' ? new RemoteEngine() : new CHDBEngine();
+export const engine: OLAPEngine =
+	PLATFORM === 'WEB' || (typeof window !== 'undefined' && window.location.search.includes('proxy='))
+		? new RemoteEngine()
+		: new CHDBEngine();