create UI to adjust modal options

site/src/ConnectOptions.svelte

@@ -3,14 +3,15 @@
 	// import './app.css'
 	import Evm from './lib/connect/evm.svelte'
 	import Starknet from './lib/connect/starknet.svelte'
+	import ConnectPanel from './ConnectPanel.svelte'
 
 	export let ecosystem: string
 	// export let theme = ""
 </script>
 
 <div
 	style="
-			display: flex; 
+			display: flex;
 			gap: .25em;
 			font-family: Arial, Helvetica, sans-serif;
 			font-weight: 500;
@@ -24,22 +25,27 @@
 		class:selected={ecosystem === 'evm'}
 		on:click={() => {
 			ecosystem = 'evm'
-		}}>EVM</button
+		}}><h2>EVM</h2></button
 	>
 	<button
 		class="menu-option btn-reset"
 		class:selected={ecosystem === 'starknet'}
 		on:click={() => {
 			ecosystem = 'starknet'
-		}}>Starknet</button
+		}}><h2>Starknet</h2></button
 	>
 </div>
 <div class="preview">
-	{#if ecosystem === 'evm'}
-		<Evm class="connect" />
-	{:else if ecosystem === 'starknet'}
-		<Starknet class="connect" />
-	{/if}
+	<div class="filler">
+		{#if ecosystem === 'evm'}
+			<Evm class="connect" />
+		{:else if ecosystem === 'starknet'}
+			<Starknet class="connect" />
+		{/if}
+	</div>
+	<div class="settings">
+		<ConnectPanel />
+	</div>
 </div>
 
 <style>
@@ -48,11 +54,10 @@
 		min-width: 0;
 	}
 	.preview {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		/* margin: auto; */
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 		margin-block: 0.25em;
+		margin-block-end: 1em;
 		width: min(1000px, 100%);
 		border: 2px solid rgba(76 76 76 / 0.4);
 		border-radius: 0.5em;
@@ -63,23 +68,42 @@
 		);
 		background-size: 1.5em 1.5em;
 		/* opacity: 0.2; */
-		aspect-ratio: 3 / 1;
+		aspect-ratio: 4 / 3;
+	}
+	.settings {
+		display: flex;
+		align-items: stretch;
+		justify-content: stretch;
+	}
+
+	.filler {
+		min-height: 16em;
+		display: grid;
+		align-items: center;
+		justify-content: center;
 	}
 	.btn-reset {
 		background: none;
 		color: inherit;
 		font-size: inherit;
 		border: none;
 		padding: 0;
+
+		& > * {
+			font-size: inherit;
+			font-weight: inherit;
+			padding: inherit;
+			margin: inherit;
+		}
 	}
 	.menu-option {
 		cursor: pointer;
 		font-size: 96%;
 		opacity: 0.7;
-		padding: 0.5em 1em;
+		padding: 0.125em .75em;
 		transition: background 200ms ease;
 		position: relative;
-		border-radius: 8px;
+		border-radius: 4px;
 	}
 	.menu-option.selected {
 		font-weight: 600;

site/src/ConnectPanel.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import Checkbox from './lib/Checkbox.svelte'
+	export const options = [
+		{ tag: 'Detected Wallets', enabled: true },
+		{ tag: 'WalletConnect', enabled: true },
+		{ tag: 'Capsule', enabled: true }
+	]
+</script>
+
+<div class="panel">
+	<h3>Connectors</h3>
+	<div class="connectors">
+		{#each options as {tag: label, enabled}}
+			<Checkbox {label} bind:enabled/>
+		{/each}
+		<!-- <li>Selected Wallets -->
+		<!-- <li>Coinbase Wallet-->
+	</div>
+</div>
+
+<style>
+	h3 {
+		font-size: inherit;
+		padding: inherit;
+		margin: inherit;
+	}
+	.panel {
+		margin: 0.5em;
+		padding: 0.5em;
+		border-radius: 0.5em;
+		flex-grow: 1;
+		background: hsl(0, 0%, 16%);
+	}
+
+	.connectors {
+		display: flex;
+		flex-wrap: wrap;
+		/* Make buttons wrap in a line */
+		gap: 0.5em;
+	}
+</style>

site/src/lib/Checkbox.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import { createCheckbox, melt } from '@melt-ui/svelte'
+
+	// Could have been a toggle (binary) but the indeterminate
+	export let enabled: boolean | 'indeterminate'
+
+	const {
+		elements: { root },
+		helpers: { isChecked, isIndeterminate }
+	} = createCheckbox({
+		defaultChecked: true,
+		onCheckedChange: ({next}) => {
+			console.log(next)
+			enabled = next	
+			return next
+		}
+	})
+	export let label = ''
+</script>
+
+<button
+	use:melt={$root}
+	class:enabled={$isIndeterminate || $isChecked}
+	class:disabled={!$isChecked && !$isIndeterminate}
+	class="connect"
+>
+	{label}
+</button>
+
+<style>
+	button {
+		--base-color: #171717;
+		background: var(--base-color);
+		color: inherit;
+
+		font-weight: 600;
+		padding: 0.5em 0.75em;
+		border-radius: 0.5em;
+		border: 2px solid transparent;
+
+		&.enabled {
+			/* color: inherit; */
+			border: 2px solid rgba(166, 159, 159, 0.4);
+		}
+
+		&.disabled {
+			opacity: 0.7;
+		}
+	}
+</style>

site/src/lib/code.svelte

@@ -35,7 +35,7 @@
 		padding: 0.25em 1em;
 		border: 2px solid rgba(76 76 76 / 0.4);
 
-		--base-color: #17171755;
+		--base-color: #171717;
 		background: var(--base-color);
 		border-radius: 0.5em;
 

site/src/lib/connect/connect.css

@@ -5,5 +5,6 @@ fractl-modal {
 		padding: 0.5em 1.25em;
 		/* --fcl-btn-border-radius: 5px; */
 		cursor: pointer;
+		width: fit-content;
 	}
 }