From ff9b94bab7c2a8aa754543c087d3c403f0f9001f Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Tue, 18 Jun 2024 17:41:47 -0700
Subject: [PATCH] refac: playground

---
 .../components/layout/Sidebar/UserMenu.svelte | 26 +++++++++++++++++++
 src/routes/(app)/playground/+page.svelte      | 15 +++++++++++
 src/routes/(app)/workspace/+layout.svelte     |  7 -----
 .../(app)/workspace/playground/+page.svelte   |  5 ----
 4 files changed, 41 insertions(+), 12 deletions(-)
 create mode 100644 src/routes/(app)/playground/+page.svelte
 delete mode 100644 src/routes/(app)/workspace/playground/+page.svelte

diff --git a/src/lib/components/layout/Sidebar/UserMenu.svelte b/src/lib/components/layout/Sidebar/UserMenu.svelte
index d361a3d5a..a00b7438f 100644
--- a/src/lib/components/layout/Sidebar/UserMenu.svelte
+++ b/src/lib/components/layout/Sidebar/UserMenu.svelte
@@ -81,6 +81,32 @@
 			</button>
 
 			{#if role === 'admin'}
+				<button
+					class="flex rounded-md py-2 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
+					on:click={() => {
+						goto('/playground');
+						show = false;
+					}}
+				>
+					<div class=" self-center mr-3">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke-width="1.5"
+							stroke="currentColor"
+							class="size-5"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M14.25 9.75 16.5 12l-2.25 2.25m-4.5 0L7.5 12l2.25-2.25M6 20.25h12A2.25 2.25 0 0 0 20.25 18V6A2.25 2.25 0 0 0 18 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25Z"
+							/>
+						</svg>
+					</div>
+					<div class=" self-center font-medium">{$i18n.t('Playground')}</div>
+				</button>
+
 				<button
 					class="flex rounded-md py-2 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
 					on:click={() => {
diff --git a/src/routes/(app)/playground/+page.svelte b/src/routes/(app)/playground/+page.svelte
new file mode 100644
index 000000000..40c1ce4d7
--- /dev/null
+++ b/src/routes/(app)/playground/+page.svelte
@@ -0,0 +1,15 @@
+<script>
+	import { showSidebar } from '$lib/stores';
+
+	import Playground from '$lib/components/workspace/Playground.svelte';
+</script>
+
+<div
+	class=" flex flex-col w-full min-h-screen max-h-screen {$showSidebar
+		? 'md:max-w-[calc(100%-260px)]'
+		: ''}"
+>
+	<div class=" py-4 px-5 flex-1 max-h-full overflow-y-auto">
+		<Playground />
+	</div>
+</div>
diff --git a/src/routes/(app)/workspace/+layout.svelte b/src/routes/(app)/workspace/+layout.svelte
index 02647fbb8..d26f5812c 100644
--- a/src/routes/(app)/workspace/+layout.svelte
+++ b/src/routes/(app)/workspace/+layout.svelte
@@ -82,13 +82,6 @@
 			>
 				{$i18n.t('Functions')}
 			</a>
-
-			<a
-				class="min-w-fit rounded-lg p-1.5 px-3 {$page.url.pathname.includes('/workspace/playground')
-					? 'bg-gray-50 dark:bg-gray-850'
-					: ''} transition"
-				href="/workspace/playground">{$i18n.t('Playground')}</a
-			>
 		</div>
 	</div>
 
diff --git a/src/routes/(app)/workspace/playground/+page.svelte b/src/routes/(app)/workspace/playground/+page.svelte
deleted file mode 100644
index aed8abf12..000000000
--- a/src/routes/(app)/workspace/playground/+page.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-	import Playground from '$lib/components/workspace/Playground.svelte';
-</script>
-
-<Playground />