From df2d28f0e596906b0b07dc863797073adb538522 Mon Sep 17 00:00:00 2001
From: "Jade (Rose) Rowland" <jaderowlanddev@gmail.com>
Date: Sun, 20 Oct 2024 21:54:33 -0700
Subject: [PATCH] panel options

---
 website/.astro/astro/content.d.ts             | 256 +++++++++++++++
 website/.astro/settings.json                  |   3 +
 website/.astro/types.d.ts                     | 292 +-----------------
 website/src/repl/components/ReplEditor.jsx    |   6 +-
 website/src/repl/components/panel/Forms.jsx   |   1 +
 website/src/repl/components/panel/Panel.jsx   | 122 +++++---
 .../src/repl/components/panel/SettingsTab.jsx |  26 ++
 .../src/repl/components/panel/SoundsTab.jsx   |   4 +-
 website/src/settings.mjs                      |  11 +-
 9 files changed, 385 insertions(+), 336 deletions(-)
 create mode 100644 website/.astro/astro/content.d.ts

diff --git a/website/.astro/astro/content.d.ts b/website/.astro/astro/content.d.ts
new file mode 100644
index 00000000..b4ac1c72
--- /dev/null
+++ b/website/.astro/astro/content.d.ts
@@ -0,0 +1,256 @@
+declare module 'astro:content' {
+	interface Render {
+		'.mdx': Promise<{
+			Content: import('astro').MarkdownInstance<{}>['Content'];
+			headings: import('astro').MarkdownHeading[];
+			remarkPluginFrontmatter: Record<string, any>;
+		}>;
+	}
+}
+
+declare module 'astro:content' {
+	interface RenderResult {
+		Content: import('astro/runtime/server/index.js').AstroComponentFactory;
+		headings: import('astro').MarkdownHeading[];
+		remarkPluginFrontmatter: Record<string, any>;
+	}
+	interface Render {
+		'.md': Promise<RenderResult>;
+	}
+
+	export interface RenderedContent {
+		html: string;
+		metadata?: {
+			imagePaths: Array<string>;
+			[key: string]: unknown;
+		};
+	}
+}
+
+declare module 'astro:content' {
+	type Flatten<T> = T extends { [K: string]: infer U } ? U : never;
+
+	export type CollectionKey = keyof AnyEntryMap;
+	export type CollectionEntry<C extends CollectionKey> = Flatten<AnyEntryMap[C]>;
+
+	export type ContentCollectionKey = keyof ContentEntryMap;
+	export type DataCollectionKey = keyof DataEntryMap;
+
+	type AllValuesOf<T> = T extends any ? T[keyof T] : never;
+	type ValidContentEntrySlug<C extends keyof ContentEntryMap> = AllValuesOf<
+		ContentEntryMap[C]
+	>['slug'];
+
+	/** @deprecated Use `getEntry` instead. */
+	export function getEntryBySlug<
+		C extends keyof ContentEntryMap,
+		E extends ValidContentEntrySlug<C> | (string & {}),
+	>(
+		collection: C,
+		// Note that this has to accept a regular string too, for SSR
+		entrySlug: E,
+	): E extends ValidContentEntrySlug<C>
+		? Promise<CollectionEntry<C>>
+		: Promise<CollectionEntry<C> | undefined>;
+
+	/** @deprecated Use `getEntry` instead. */
+	export function getDataEntryById<C extends keyof DataEntryMap, E extends keyof DataEntryMap[C]>(
+		collection: C,
+		entryId: E,
+	): Promise<CollectionEntry<C>>;
+
+	export function getCollection<C extends keyof AnyEntryMap, E extends CollectionEntry<C>>(
+		collection: C,
+		filter?: (entry: CollectionEntry<C>) => entry is E,
+	): Promise<E[]>;
+	export function getCollection<C extends keyof AnyEntryMap>(
+		collection: C,
+		filter?: (entry: CollectionEntry<C>) => unknown,
+	): Promise<CollectionEntry<C>[]>;
+
+	export function getEntry<
+		C extends keyof ContentEntryMap,
+		E extends ValidContentEntrySlug<C> | (string & {}),
+	>(entry: {
+		collection: C;
+		slug: E;
+	}): E extends ValidContentEntrySlug<C>
+		? Promise<CollectionEntry<C>>
+		: Promise<CollectionEntry<C> | undefined>;
+	export function getEntry<
+		C extends keyof DataEntryMap,
+		E extends keyof DataEntryMap[C] | (string & {}),
+	>(entry: {
+		collection: C;
+		id: E;
+	}): E extends keyof DataEntryMap[C]
+		? Promise<DataEntryMap[C][E]>
+		: Promise<CollectionEntry<C> | undefined>;
+	export function getEntry<
+		C extends keyof ContentEntryMap,
+		E extends ValidContentEntrySlug<C> | (string & {}),
+	>(
+		collection: C,
+		slug: E,
+	): E extends ValidContentEntrySlug<C>
+		? Promise<CollectionEntry<C>>
+		: Promise<CollectionEntry<C> | undefined>;
+	export function getEntry<
+		C extends keyof DataEntryMap,
+		E extends keyof DataEntryMap[C] | (string & {}),
+	>(
+		collection: C,
+		id: E,
+	): E extends keyof DataEntryMap[C]
+		? Promise<DataEntryMap[C][E]>
+		: Promise<CollectionEntry<C> | undefined>;
+
+	/** Resolve an array of entry references from the same collection */
+	export function getEntries<C extends keyof ContentEntryMap>(
+		entries: {
+			collection: C;
+			slug: ValidContentEntrySlug<C>;
+		}[],
+	): Promise<CollectionEntry<C>[]>;
+	export function getEntries<C extends keyof DataEntryMap>(
+		entries: {
+			collection: C;
+			id: keyof DataEntryMap[C];
+		}[],
+	): Promise<CollectionEntry<C>[]>;
+
+	export function render<C extends keyof AnyEntryMap>(
+		entry: AnyEntryMap[C][string],
+	): Promise<RenderResult>;
+
+	export function reference<C extends keyof AnyEntryMap>(
+		collection: C,
+	): import('astro/zod').ZodEffects<
+		import('astro/zod').ZodString,
+		C extends keyof ContentEntryMap
+			? {
+					collection: C;
+					slug: ValidContentEntrySlug<C>;
+				}
+			: {
+					collection: C;
+					id: keyof DataEntryMap[C];
+				}
+	>;
+	// Allow generic `string` to avoid excessive type errors in the config
+	// if `dev` is not running to update as you edit.
+	// Invalid collection names will be caught at build time.
+	export function reference<C extends string>(
+		collection: C,
+	): import('astro/zod').ZodEffects<import('astro/zod').ZodString, never>;
+
+	type ReturnTypeOrOriginal<T> = T extends (...args: any[]) => infer R ? R : T;
+	type InferEntrySchema<C extends keyof AnyEntryMap> = import('astro/zod').infer<
+		ReturnTypeOrOriginal<Required<ContentConfig['collections'][C]>['schema']>
+	>;
+
+	type ContentEntryMap = {
+		"blog": {
+"release-0.0.2-schwindlig.mdx": {
+	id: "release-0.0.2-schwindlig.mdx";
+  slug: "release-002-schwindlig";
+  body: string;
+  collection: "blog";
+  data: InferEntrySchema<"blog">
+} & { render(): Render[".mdx"] };
+"release-0.0.2.1-stuermisch.mdx": {
+	id: "release-0.0.2.1-stuermisch.mdx";
+  slug: "release-0021-stuermisch";
+  body: string;
+  collection: "blog";
+  data: InferEntrySchema<"blog">
+} & { render(): Render[".mdx"] };
+"release-0.0.3-maelstrom.mdx": {
+	id: "release-0.0.3-maelstrom.mdx";
+  slug: "release-003-maelstrom";
+  body: string;
+  collection: "blog";
+  data: InferEntrySchema<"blog">
+} & { render(): Render[".mdx"] };
+"release-0.0.4-gischt.mdx": {
+	id: "release-0.0.4-gischt.mdx";
+  slug: "release-004-gischt";
+  body: string;
+  collection: "blog";
+  data: InferEntrySchema<"blog">
+} & { render(): Render[".mdx"] };
+"release-0.3.0-donauwelle.mdx": {
+	id: "release-0.3.0-donauwelle.mdx";
+  slug: "release-030-donauwelle";
+  body: string;
+  collection: "blog";
+  data: InferEntrySchema<"blog">
+} & { render(): Render[".mdx"] };
+"release-0.4.0-brandung.mdx": {
+	id: "release-0.4.0-brandung.mdx";
+  slug: "release-040-brandung";
+  body: string;
+  collection: "blog";
+  data: InferEntrySchema<"blog">
+} & { render(): Render[".mdx"] };
+"release-0.5.0-wirbel.mdx": {
+	id: "release-0.5.0-wirbel.mdx";
+  slug: "release-050-wirbel";
+  body: string;
+  collection: "blog";
+  data: InferEntrySchema<"blog">
+} & { render(): Render[".mdx"] };
+"release-0.6.0-zimtschnecke.mdx": {
+	id: "release-0.6.0-zimtschnecke.mdx";
+  slug: "release-060-zimtschnecke";
+  body: string;
+  collection: "blog";
+  data: InferEntrySchema<"blog">
+} & { render(): Render[".mdx"] };
+"release-0.7.0-zuckerguss.mdx": {
+	id: "release-0.7.0-zuckerguss.mdx";
+  slug: "release-070-zuckerguss";
+  body: string;
+  collection: "blog";
+  data: InferEntrySchema<"blog">
+} & { render(): Render[".mdx"] };
+"release-0.8.0-himbeermuffin.mdx": {
+	id: "release-0.8.0-himbeermuffin.mdx";
+  slug: "release-080-himbeermuffin";
+  body: string;
+  collection: "blog";
+  data: InferEntrySchema<"blog">
+} & { render(): Render[".mdx"] };
+"release-0.9.0-bananenbrot.mdx": {
+	id: "release-0.9.0-bananenbrot.mdx";
+  slug: "release-090-bananenbrot";
+  body: string;
+  collection: "blog";
+  data: InferEntrySchema<"blog">
+} & { render(): Render[".mdx"] };
+"release-1.0.0-geburtstagskuchen.mdx": {
+	id: "release-1.0.0-geburtstagskuchen.mdx";
+  slug: "release-100-geburtstagskuchen";
+  body: string;
+  collection: "blog";
+  data: InferEntrySchema<"blog">
+} & { render(): Render[".mdx"] };
+"year-2.mdx": {
+	id: "year-2.mdx";
+  slug: "year-2";
+  body: string;
+  collection: "blog";
+  data: InferEntrySchema<"blog">
+} & { render(): Render[".mdx"] };
+};
+
+	};
+
+	type DataEntryMap = {
+		
+	};
+
+	type AnyEntryMap = ContentEntryMap & DataEntryMap;
+
+	export type ContentConfig = typeof import("../../src/content/config.js");
+}
diff --git a/website/.astro/settings.json b/website/.astro/settings.json
index bf82959b..109959d7 100644
--- a/website/.astro/settings.json
+++ b/website/.astro/settings.json
@@ -1,5 +1,8 @@
 {
 	"devToolbar": {
 		"enabled": false
+	},
+	"_variables": {
+		"lastUpdateCheck": 1729351618095
 	}
 }
\ No newline at end of file
diff --git a/website/.astro/types.d.ts b/website/.astro/types.d.ts
index f091daa1..9a2a78c1 100644
--- a/website/.astro/types.d.ts
+++ b/website/.astro/types.d.ts
@@ -1,290 +1,2 @@
-declare module 'astro:content' {
-	interface Render {
-		'.mdx': Promise<{
-			Content: import('astro').MarkdownInstance<{}>['Content'];
-			headings: import('astro').MarkdownHeading[];
-			remarkPluginFrontmatter: Record<string, any>;
-		}>;
-	}
-}
-
-declare module 'astro:content' {
-	interface Render {
-		'.md': Promise<{
-			Content: import('astro').MarkdownInstance<{}>['Content'];
-			headings: import('astro').MarkdownHeading[];
-			remarkPluginFrontmatter: Record<string, any>;
-		}>;
-	}
-}
-
-declare module 'astro:content' {
-	export { z } from 'astro/zod';
-
-	type Flatten<T> = T extends { [K: string]: infer U } ? U : never;
-
-	export type CollectionKey = keyof AnyEntryMap;
-	export type CollectionEntry<C extends CollectionKey> = Flatten<AnyEntryMap[C]>;
-
-	export type ContentCollectionKey = keyof ContentEntryMap;
-	export type DataCollectionKey = keyof DataEntryMap;
-
-	// This needs to be in sync with ImageMetadata
-	export type ImageFunction = () => import('astro/zod').ZodObject<{
-		src: import('astro/zod').ZodString;
-		width: import('astro/zod').ZodNumber;
-		height: import('astro/zod').ZodNumber;
-		format: import('astro/zod').ZodUnion<
-			[
-				import('astro/zod').ZodLiteral<'png'>,
-				import('astro/zod').ZodLiteral<'jpg'>,
-				import('astro/zod').ZodLiteral<'jpeg'>,
-				import('astro/zod').ZodLiteral<'tiff'>,
-				import('astro/zod').ZodLiteral<'webp'>,
-				import('astro/zod').ZodLiteral<'gif'>,
-				import('astro/zod').ZodLiteral<'svg'>,
-				import('astro/zod').ZodLiteral<'avif'>,
-			]
-		>;
-	}>;
-
-	type BaseSchemaWithoutEffects =
-		| import('astro/zod').AnyZodObject
-		| import('astro/zod').ZodUnion<[BaseSchemaWithoutEffects, ...BaseSchemaWithoutEffects[]]>
-		| import('astro/zod').ZodDiscriminatedUnion<string, import('astro/zod').AnyZodObject[]>
-		| import('astro/zod').ZodIntersection<BaseSchemaWithoutEffects, BaseSchemaWithoutEffects>;
-
-	type BaseSchema =
-		| BaseSchemaWithoutEffects
-		| import('astro/zod').ZodEffects<BaseSchemaWithoutEffects>;
-
-	export type SchemaContext = { image: ImageFunction };
-
-	type DataCollectionConfig<S extends BaseSchema> = {
-		type: 'data';
-		schema?: S | ((context: SchemaContext) => S);
-	};
-
-	type ContentCollectionConfig<S extends BaseSchema> = {
-		type?: 'content';
-		schema?: S | ((context: SchemaContext) => S);
-	};
-
-	type CollectionConfig<S> = ContentCollectionConfig<S> | DataCollectionConfig<S>;
-
-	export function defineCollection<S extends BaseSchema>(
-		input: CollectionConfig<S>
-	): CollectionConfig<S>;
-
-	type AllValuesOf<T> = T extends any ? T[keyof T] : never;
-	type ValidContentEntrySlug<C extends keyof ContentEntryMap> = AllValuesOf<
-		ContentEntryMap[C]
-	>['slug'];
-
-	export function getEntryBySlug<
-		C extends keyof ContentEntryMap,
-		E extends ValidContentEntrySlug<C> | (string & {}),
-	>(
-		collection: C,
-		// Note that this has to accept a regular string too, for SSR
-		entrySlug: E
-	): E extends ValidContentEntrySlug<C>
-		? Promise<CollectionEntry<C>>
-		: Promise<CollectionEntry<C> | undefined>;
-
-	export function getDataEntryById<C extends keyof DataEntryMap, E extends keyof DataEntryMap[C]>(
-		collection: C,
-		entryId: E
-	): Promise<CollectionEntry<C>>;
-
-	export function getCollection<C extends keyof AnyEntryMap, E extends CollectionEntry<C>>(
-		collection: C,
-		filter?: (entry: CollectionEntry<C>) => entry is E
-	): Promise<E[]>;
-	export function getCollection<C extends keyof AnyEntryMap>(
-		collection: C,
-		filter?: (entry: CollectionEntry<C>) => unknown
-	): Promise<CollectionEntry<C>[]>;
-
-	export function getEntry<
-		C extends keyof ContentEntryMap,
-		E extends ValidContentEntrySlug<C> | (string & {}),
-	>(entry: {
-		collection: C;
-		slug: E;
-	}): E extends ValidContentEntrySlug<C>
-		? Promise<CollectionEntry<C>>
-		: Promise<CollectionEntry<C> | undefined>;
-	export function getEntry<
-		C extends keyof DataEntryMap,
-		E extends keyof DataEntryMap[C] | (string & {}),
-	>(entry: {
-		collection: C;
-		id: E;
-	}): E extends keyof DataEntryMap[C]
-		? Promise<DataEntryMap[C][E]>
-		: Promise<CollectionEntry<C> | undefined>;
-	export function getEntry<
-		C extends keyof ContentEntryMap,
-		E extends ValidContentEntrySlug<C> | (string & {}),
-	>(
-		collection: C,
-		slug: E
-	): E extends ValidContentEntrySlug<C>
-		? Promise<CollectionEntry<C>>
-		: Promise<CollectionEntry<C> | undefined>;
-	export function getEntry<
-		C extends keyof DataEntryMap,
-		E extends keyof DataEntryMap[C] | (string & {}),
-	>(
-		collection: C,
-		id: E
-	): E extends keyof DataEntryMap[C]
-		? Promise<DataEntryMap[C][E]>
-		: Promise<CollectionEntry<C> | undefined>;
-
-	/** Resolve an array of entry references from the same collection */
-	export function getEntries<C extends keyof ContentEntryMap>(
-		entries: {
-			collection: C;
-			slug: ValidContentEntrySlug<C>;
-		}[]
-	): Promise<CollectionEntry<C>[]>;
-	export function getEntries<C extends keyof DataEntryMap>(
-		entries: {
-			collection: C;
-			id: keyof DataEntryMap[C];
-		}[]
-	): Promise<CollectionEntry<C>[]>;
-
-	export function reference<C extends keyof AnyEntryMap>(
-		collection: C
-	): import('astro/zod').ZodEffects<
-		import('astro/zod').ZodString,
-		C extends keyof ContentEntryMap
-			? {
-					collection: C;
-					slug: ValidContentEntrySlug<C>;
-				}
-			: {
-					collection: C;
-					id: keyof DataEntryMap[C];
-				}
-	>;
-	// Allow generic `string` to avoid excessive type errors in the config
-	// if `dev` is not running to update as you edit.
-	// Invalid collection names will be caught at build time.
-	export function reference<C extends string>(
-		collection: C
-	): import('astro/zod').ZodEffects<import('astro/zod').ZodString, never>;
-
-	type ReturnTypeOrOriginal<T> = T extends (...args: any[]) => infer R ? R : T;
-	type InferEntrySchema<C extends keyof AnyEntryMap> = import('astro/zod').infer<
-		ReturnTypeOrOriginal<Required<ContentConfig['collections'][C]>['schema']>
-	>;
-
-	type ContentEntryMap = {
-		"blog": {
-"release-0.0.2-schwindlig.mdx": {
-	id: "release-0.0.2-schwindlig.mdx";
-  slug: "release-002-schwindlig";
-  body: string;
-  collection: "blog";
-  data: InferEntrySchema<"blog">
-} & { render(): Render[".mdx"] };
-"release-0.0.2.1-stuermisch.mdx": {
-	id: "release-0.0.2.1-stuermisch.mdx";
-  slug: "release-0021-stuermisch";
-  body: string;
-  collection: "blog";
-  data: InferEntrySchema<"blog">
-} & { render(): Render[".mdx"] };
-"release-0.0.3-maelstrom.mdx": {
-	id: "release-0.0.3-maelstrom.mdx";
-  slug: "release-003-maelstrom";
-  body: string;
-  collection: "blog";
-  data: InferEntrySchema<"blog">
-} & { render(): Render[".mdx"] };
-"release-0.0.4-gischt.mdx": {
-	id: "release-0.0.4-gischt.mdx";
-  slug: "release-004-gischt";
-  body: string;
-  collection: "blog";
-  data: InferEntrySchema<"blog">
-} & { render(): Render[".mdx"] };
-"release-0.3.0-donauwelle.mdx": {
-	id: "release-0.3.0-donauwelle.mdx";
-  slug: "release-030-donauwelle";
-  body: string;
-  collection: "blog";
-  data: InferEntrySchema<"blog">
-} & { render(): Render[".mdx"] };
-"release-0.4.0-brandung.mdx": {
-	id: "release-0.4.0-brandung.mdx";
-  slug: "release-040-brandung";
-  body: string;
-  collection: "blog";
-  data: InferEntrySchema<"blog">
-} & { render(): Render[".mdx"] };
-"release-0.5.0-wirbel.mdx": {
-	id: "release-0.5.0-wirbel.mdx";
-  slug: "release-050-wirbel";
-  body: string;
-  collection: "blog";
-  data: InferEntrySchema<"blog">
-} & { render(): Render[".mdx"] };
-"release-0.6.0-zimtschnecke.mdx": {
-	id: "release-0.6.0-zimtschnecke.mdx";
-  slug: "release-060-zimtschnecke";
-  body: string;
-  collection: "blog";
-  data: InferEntrySchema<"blog">
-} & { render(): Render[".mdx"] };
-"release-0.7.0-zuckerguss.mdx": {
-	id: "release-0.7.0-zuckerguss.mdx";
-  slug: "release-070-zuckerguss";
-  body: string;
-  collection: "blog";
-  data: InferEntrySchema<"blog">
-} & { render(): Render[".mdx"] };
-"release-0.8.0-himbeermuffin.mdx": {
-	id: "release-0.8.0-himbeermuffin.mdx";
-  slug: "release-080-himbeermuffin";
-  body: string;
-  collection: "blog";
-  data: InferEntrySchema<"blog">
-} & { render(): Render[".mdx"] };
-"release-0.9.0-bananenbrot.mdx": {
-	id: "release-0.9.0-bananenbrot.mdx";
-  slug: "release-090-bananenbrot";
-  body: string;
-  collection: "blog";
-  data: InferEntrySchema<"blog">
-} & { render(): Render[".mdx"] };
-"release-1.0.0-geburtstagskuchen.mdx": {
-	id: "release-1.0.0-geburtstagskuchen.mdx";
-  slug: "release-100-geburtstagskuchen";
-  body: string;
-  collection: "blog";
-  data: InferEntrySchema<"blog">
-} & { render(): Render[".mdx"] };
-"year-2.mdx": {
-	id: "year-2.mdx";
-  slug: "year-2";
-  body: string;
-  collection: "blog";
-  data: InferEntrySchema<"blog">
-} & { render(): Render[".mdx"] };
-};
-
-	};
-
-	type DataEntryMap = {
-		
-	};
-
-	type AnyEntryMap = ContentEntryMap & DataEntryMap;
-
-	type ContentConfig = typeof import("../src/content/config");
-}
+/// <reference types="astro/client" />
+/// <reference path="astro/content.d.ts" />
\ No newline at end of file
diff --git a/website/src/repl/components/ReplEditor.jsx b/website/src/repl/components/ReplEditor.jsx
index 5a1c2e67..c96fbbfd 100644
--- a/website/src/repl/components/ReplEditor.jsx
+++ b/website/src/repl/components/ReplEditor.jsx
@@ -13,7 +13,7 @@ export default function ReplEditor(Props) {
   const { context } = Props;
   const { containerRef, editorRef, error, init, pending } = context;
   const settings = useSettings();
-  const { panelPosition } = settings;
+  const { panelPosition, isZen } = settings;
 
   return (
     <div className="h-full flex flex-col relative">
@@ -21,10 +21,10 @@ export default function ReplEditor(Props) {
       <Header context={context} />
       <div className="grow flex relative overflow-hidden">
         <Code containerRef={containerRef} editorRef={editorRef} init={init} />
-        {panelPosition === 'right' && <VerticalPanel context={context} />}
+        {!isZen && panelPosition === 'right' && <VerticalPanel context={context} />}
       </div>
       <UserFacingErrorMessage error={error} />
-      {panelPosition === 'bottom' && <HorizontalPanel context={context} />}
+      {!isZen && panelPosition === 'bottom' && <HorizontalPanel context={context} />}
     </div>
   );
 }
diff --git a/website/src/repl/components/panel/Forms.jsx b/website/src/repl/components/panel/Forms.jsx
index c5b22002..4cb73a46 100644
--- a/website/src/repl/components/panel/Forms.jsx
+++ b/website/src/repl/components/panel/Forms.jsx
@@ -6,6 +6,7 @@ export function ButtonGroup({ value, onChange, items }) {
       {Object.entries(items).map(([key, label], i, arr) => (
         <button
           key={key}
+          id={key}
           onClick={() => onChange(key)}
           className={cx(
             'px-2 border-b h-8 whitespace-nowrap',
diff --git a/website/src/repl/components/panel/Panel.jsx b/website/src/repl/components/panel/Panel.jsx
index ce60295e..1d43dc63 100644
--- a/website/src/repl/components/panel/Panel.jsx
+++ b/website/src/repl/components/panel/Panel.jsx
@@ -3,7 +3,7 @@ import useEvent from '@src/useEvent.mjs';
 import cx from '@src/cx.mjs';
 import { nanoid } from 'nanoid';
 import { useCallback, useState } from 'react';
-import { setPanelPinned, setActiveFooter as setTab, useSettings } from '../../../settings.mjs';
+import { setPanelPinned, setActiveFooter as setTab, setIsPanelOpened, useSettings } from '../../../settings.mjs';
 import { ConsoleTab } from './ConsoleTab';
 import { FilesTab } from './FilesTab';
 import { Reference } from './Reference';
@@ -11,28 +11,23 @@ import { SettingsTab } from './SettingsTab';
 import { SoundsTab } from './SoundsTab';
 import { WelcomeTab } from './WelcomeTab';
 import { PatternsTab } from './PatternsTab';
-import { ChevronLeftIcon } from '@heroicons/react/16/solid';
+import { ChevronLeftIcon, XMarkIcon } from '@heroicons/react/16/solid';
 
 const TAURI = typeof window !== 'undefined' && window.__TAURI__;
 
 export function HorizontalPanel({ context }) {
   const settings = useSettings();
-  const { isPanelPinned: pinned, activeFooter: tab } = settings;
+  const { isPanelOpen, activeFooter: tab } = settings;
 
   return (
-    <PanelNav
-      className={cx(
-        'hover:max-h-[360px] hover:min-h-[360px] justify-between flex flex-col',
-        pinned ? `min-h-[360px] max-h-[360px]` : 'min-h-10 max-h-10',
-      )}
-    >
-      <div className="flex h-full overflow-auto ">
+    <PanelNav settings={settings} className={cx(isPanelOpen ? `min-h-[360px] max-h-[360px]` : 'min-h-12 max-h-12', 'overflow-hidden flex flex-col')}>
+      {isPanelOpen && <div className="flex h-full overflow-auto ">
         <PanelContent context={context} tab={tab} />
-      </div>
+      </div>}
 
-      <div className="flex justify-between min-h-10 max-h-10 pr-2 items-center">
-        <Tabs setTab={setTab} tab={tab} pinned={pinned} />
-        <PinButton pinned={pinned} setPinned={setPanelPinned} />
+      <div className="flex justify-between min-h-12 max-h-12 pr-2 items-center">
+        <Tabs setTab={setTab} tab={tab} />
+        <PanelActionButton settings={settings} />
       </div>
     </PanelNav>
   );
@@ -40,28 +35,37 @@ export function HorizontalPanel({ context }) {
 
 export function VerticalPanel({ context }) {
   const settings = useSettings();
-  const { isPanelPinned: pinned, activeFooter: tab } = settings;
+  const { activeFooter: tab, isPanelOpen } = settings;
 
   return (
     <PanelNav
-      className={cx(
-        'hover:min-w-[min(600px,80vw)] hover:max-w-[min(600px,80vw)]',
-        pinned ? `min-w-[min(600px,80vw)] max-w-[min(600px,80vw)]` : 'min-w-8',
-      )}
+      settings={settings}
+      className={cx(isPanelOpen ? `min-w-[min(600px,80vw)] max-w-[min(600px,80vw)]` : 'min-w-12 max-w-12')}
     >
-      <div className={cx('group-hover:flex flex-col h-full', pinned ? 'flex' : 'hidden')}>
-        <div className="flex justify-between w-full ">
-          <Tabs setTab={setTab} tab={tab} pinned={pinned} />
-          <PinButton pinned={pinned} setPinned={setPanelPinned} />
-        </div>
+      {isPanelOpen ? (
+        <div className={cx('flex flex-col h-full')}>
+          <div className="flex justify-between w-full ">
+            <Tabs setTab={setTab} tab={tab} />
+            <PanelActionButton settings={settings} />
+          </div>
 
-        <div className="overflow-auto h-full">
-          <PanelContent context={context} tab={tab} />
+          <div className="overflow-auto h-full">
+            <PanelContent context={context} tab={tab} />
+          </div>
         </div>
-      </div>
-      <div className={cx(pinned ? 'hidden' : 'flex flex-col items-center justify-center  h-full group-hover:hidden ')}>
-        <ChevronLeftIcon className="text-foreground opacity-50 w-6 h-6" />
-      </div>
+      ) : (
+        <button
+          onClick={(e) => {
+            setIsPanelOpened(true);
+          }}
+          aria-label="open menu panel"
+          className={cx(
+            'flex flex-col hover:bg-lineBackground items-center cursor-pointer justify-center w-full  h-full',
+          )}
+        >
+          <ChevronLeftIcon className="text-foreground opacity-50 w-6 h-6" />
+        </button>
+      )}
     </PanelNav>
   );
 }
@@ -78,11 +82,27 @@ if (TAURI) {
   tabNames.files = 'files';
 }
 
-function PanelNav({ children, className, ...props }) {
+function PanelNav({ children, className, settings, ...props }) {
+  const isHoverBehavior = settings.togglePanelTrigger === 'hover';
   return (
     <nav
-      aria-label="Settings Menu"
-      className={cx('bg-lineHighlight group transition-all overflow-x-auto', className)}
+      onClick={() => {
+        if (!settings.isPanelOpen) {
+          setIsPanelOpened(true)
+        }
+      }}
+      onMouseEnter={() => {
+        if (isHoverBehavior && !settings.isPanelOpen) {
+          setIsPanelOpened(true);
+        }
+      }}
+      onMouseLeave={() => {
+        if (isHoverBehavior && !settings.isPanelPinned) {
+          setIsPanelOpened(false);
+        }
+      }}
+      aria-label="Menu Panel"
+      className={cx('bg-lineHighlight group overflow-x-auto', className)}
       {...props}
     >
       {children}
@@ -134,7 +154,7 @@ function PanelContent({ context, tab }) {
 function PanelTab({ label, isSelected, onClick }) {
   return (
     <>
-      <div
+      <button
         onClick={onClick}
         className={cx(
           'h-8 px-2 text-foreground cursor-pointer hover:opacity-50 flex items-center space-x-1 border-b',
@@ -142,7 +162,7 @@ function PanelTab({ label, isSelected, onClick }) {
         )}
       >
         {label}
-      </div>
+      </button>
     </>
   );
 }
@@ -157,15 +177,27 @@ function Tabs({ setTab, tab }) {
   );
 }
 
-function PinButton({ pinned, setPinned }) {
+function PanelActionButton({ settings }) {
+  const { togglePanelTrigger, isPanelPinned, isPanelOpen } = settings;
+  const isHoverBehavior = togglePanelTrigger === 'hover';
+  if (!isPanelOpen && !isPanelPinned) {
+    return;
+  }
+  if (isHoverBehavior) {
+    return <PinButton pinned={isPanelPinned} />;
+  }
+  return <CloseButton onClick={() => setIsPanelOpened(false)} />;
+}
+
+function PinButton({ pinned }) {
   return (
     <button
-      onClick={() => setPinned(!pinned)}
+      onClick={() => setPanelPinned(!pinned)}
       className={cx(
         'text-foreground max-h-8 min-h-8 max-w-8 min-w-8 items-center justify-center p-1.5 group-hover:flex',
         pinned ? 'flex' : 'hidden',
       )}
-      aria-label="Pin Settings Menu"
+      aria-label="Pin Menu Panel"
     >
       <svg
         stroke="currentColor"
@@ -182,6 +214,20 @@ function PinButton({ pinned, setPinned }) {
   );
 }
 
+function CloseButton({ onClick }) {
+  return (
+    <button
+      onClick={onClick}
+      className={cx(
+        'text-foreground max-h-8 min-h-8 max-w-8 min-w-8 items-center justify-center p-1.5 group-hover:flex',
+      )}
+      aria-label="Close Menu"
+    >
+      <XMarkIcon />
+    </button>
+  );
+}
+
 function useLogger(onTrigger) {
   useEvent(logger.key, onTrigger);
 }
diff --git a/website/src/repl/components/panel/SettingsTab.jsx b/website/src/repl/components/panel/SettingsTab.jsx
index 6f15b887..e95eaeed 100644
--- a/website/src/repl/components/panel/SettingsTab.jsx
+++ b/website/src/repl/components/panel/SettingsTab.jsx
@@ -101,6 +101,7 @@ export function SettingsTab({ started }) {
     panelPosition,
     audioDeviceName,
     audioEngineTarget,
+    togglePanelTrigger,
   } = useSettings();
   const shouldAlwaysSync = isUdels();
   const canChangeAudioDevice = AudioContext.prototype.setSinkId != null;
@@ -170,6 +171,31 @@ export function SettingsTab({ started }) {
           items={{ bottom: 'Bottom', right: 'Right' }}
         ></ButtonGroup>
       </FormItem>
+      <FormItem label="Open Panel on:                       ">
+        <ButtonGroup
+          value={togglePanelTrigger}
+          onChange={(value) => settingsMap.setKey('togglePanelTrigger', value)}
+          items={{ click: 'Click', hover: 'Hover' }}
+        ></ButtonGroup>
+        {/* <Checkbox
+          label="Click"
+          onChange={(cbEvent) => {
+            if (cbEvent.target.checked) {
+              settingsMap.setKey('togglePanelTrigger', 'click');
+            }
+          }}
+          value={togglePanelTrigger != 'hover'}
+        />
+        <Checkbox
+          label="Hover"
+          onChange={(cbEvent) => {
+            if (cbEvent.target.checked) {
+              settingsMap.setKey('togglePanelTrigger', 'hover');
+            }
+          }}
+          value={togglePanelTrigger == 'hover'}
+        /> */}
+      </FormItem>
       <FormItem label="Code Settings">
         <Checkbox
           label="Enable bracket matching"
diff --git a/website/src/repl/components/panel/SoundsTab.jsx b/website/src/repl/components/panel/SoundsTab.jsx
index 60f5a22d..b968466f 100644
--- a/website/src/repl/components/panel/SoundsTab.jsx
+++ b/website/src/repl/components/panel/SoundsTab.jsx
@@ -52,9 +52,9 @@ export function SoundsTab() {
   });
 
   return (
-    <div id="sounds-tab" className="px-4 flex flex-col w-full h-full dark:text-white text-stone-900">
+    <div id="sounds-tab" className="px-4 flex flex-col w-full h-full  dark:text-white text-stone-900">
       <input
-        className="w-full p-1 bg-background rounded-md pb-2"
+        className="w-full p-1 bg-background rounded-md my-2"
         placeholder="Search"
         value={search}
         onChange={(e) => setSearch(e.target.value)}
diff --git a/website/src/settings.mjs b/website/src/settings.mjs
index 00cc46b9..00dbcc8d 100644
--- a/website/src/settings.mjs
+++ b/website/src/settings.mjs
@@ -31,7 +31,9 @@ export const defaultSettings = {
   soundsFilter: 'all',
   patternFilter: 'community',
   panelPosition: window.innerWidth > 1000 ? 'right' : 'bottom',
-  isPanelPinned: true,
+  isPanelPinned: false,
+  isPanelOpen: true,
+  togglePanelTrigger: 'click', //click | hover
   userPatterns: '{}',
   audioDeviceName: defaultAudioDeviceName,
   audioEngineTarget: audioEngineTargets.webaudio,
@@ -61,7 +63,6 @@ export function useSettings() {
   return {
     ...state,
     isZen: parseBoolean(state.isZen),
-    isPanelPinned: parseBoolean(state.isPanelPinned),
     isBracketMatchingEnabled: parseBoolean(state.isBracketMatchingEnabled),
     isBracketClosingEnabled: parseBoolean(state.isBracketClosingEnabled),
     isLineNumbersDisplayed: parseBoolean(state.isLineNumbersDisplayed),
@@ -74,12 +75,16 @@ export function useSettings() {
     isSyncEnabled: isUdels() ? true : parseBoolean(state.isSyncEnabled),
     fontSize: Number(state.fontSize),
     panelPosition: state.activeFooter !== '' && !isUdels() ? state.panelPosition : 'bottom', // <-- keep this 'bottom' where it is!
+    isPanelPinned: parseBoolean(state.isPanelPinned),
+    isPanelOpen: parseBoolean(state.isPanelOpen),
     userPatterns: userPatterns,
+   
   };
 }
 
 export const setActiveFooter = (tab) => settingsMap.setKey('activeFooter', tab);
-export const setPanelPinned = (isPinned) => settingsMap.setKey('isPanelPinned', isPinned);
+export const setPanelPinned = (bool) => settingsMap.setKey('isPanelPinned', bool);
+export const setIsPanelOpened = (bool) => settingsMap.setKey('isPanelOpen', bool);
 
 export const setIsZen = (active) => settingsMap.setKey('isZen', !!active);