refac: playground

src/routes/(app)/playground/+layout.svelte

@@ -20,12 +20,12 @@
 		? 'md:max-w-[calc(100%-260px)]'
 		: ''}"
 >
-	<div class=" px-4 pt-3 mt-0.5 mb-1">
+	<div class=" px-3.5 py-2">
 		<div class=" flex items-center gap-1">
-			<div class="{$showSidebar ? 'md:hidden' : ''} mr-1 self-start flex flex-none items-center">
+			<div class="{$showSidebar ? 'md:hidden' : ''} mr-1 flex flex-none items-center">
 				<button
 					id="sidebar-toggle-button"
-					class="cursor-pointer p-1 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"
+					class="cursor-pointer p-1.5 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"
 					on:click={() => {
 						showSidebar.set(!$showSidebar);
 					}}
@@ -36,14 +36,35 @@
 					</div>
 				</button>
 			</div>
-			<div class="flex items-center text-xl font-semibold">
-				{$i18n.t('Playground')}
-				<span class=" text-xs font-normal text-gray-500 self-center ml-1">{$i18n.t('(Beta)')}</span>
+			<!-- <div class="flex items-center text-xl font-semibold">{$i18n.t('Admin Panel')}</div> -->
+
+			<div class=" flex w-full">
+				<div
+					class="flex scrollbar-none overflow-x-auto w-fit text-center text-sm font-medium rounded-full bg-transparent/10 p-1"
+				>
+					<a
+						class="min-w-fit rounded-full p-1.5 px-3 {['/playground', '/playground/'].includes(
+							$page.url.pathname
+						)
+							? 'bg-gray-50 dark:bg-gray-850'
+							: ''} transition"
+						href="/playground">{$i18n.t('Chat')}</a
+					>
+
+					<a
+						class="min-w-fit rounded-full p-1.5 px-3 {$page.url.pathname.includes(
+							'/playground/completions'
+						)
+							? 'bg-gray-50 dark:bg-gray-850'
+							: ''} transition"
+						href="/playground/completions">{$i18n.t('Completions')}</a
+					>
+				</div>
 			</div>
 		</div>
 	</div>
 
-	<div class=" py-1 px-5 flex-1 max-h-full overflow-y-auto">
+	<div class=" pb-1 px-[18px] flex-1 max-h-full overflow-y-auto">
 		<slot />
 	</div>
 </div>

src/routes/(app)/playground/+page.svelte

@@ -1,5 +1,5 @@
 <script>
-	import Playground from '$lib/components/playground/Playground.svelte';
+	import Chat from '$lib/components/playground/Chat.svelte';
 </script>
 
-<Playground />
+<Chat />

src/routes/(app)/playground/completions/+page.svelte

@@ -0,0 +1,5 @@
+<script>
+	import Completions from '$lib/components/playground/Completions.svelte';
+</script>
+
+<Completions />