update server page

src/lib/components/atoms/ServerInput.svelte

@@ -1,27 +1,43 @@
 <script lang="ts">
-	import { popup, type PopupSettings } from '@skeletonlabs/skeleton';
+	import { InputChip, popup, type PopupSettings } from '@skeletonlabs/skeleton';
 	import Info from '../icons/Info.svelte';
+	import type { OpenAPIV3 } from '$lib/openAPITypes';
 
 	export let id: number;
-	export let url: string;
-	export let description: string = '';
+	export let server: OpenAPIV3.ServerObject;
 
 	const descriptionTooltip: PopupSettings = {
 		event: 'click',
 		target: `descriptionTooltip${id}`,
 		placement: 'top'
 	};
+
+	const addVariable = () => {
+		// if server has no variables, add a variable-object
+		if (!server.variables) {
+			const variable = prompt('Enter variable name');
+			if (!variable) return;
+			server.variables = {
+				[variable]: {
+					default: '',
+					description: '',
+					enum: []
+				}
+			};
+		}
+	};
 </script>
 
 <div class="space-y-4">
 	<label class="space-y-2">
 		<span>URL (required)</span>
+		<p>You can add parameters using curly-braces like so: <code>&lbrace;id&rbrace;</code></p>
 		<input
 			class="input"
 			name="url{id}"
-			placeholder="https://api.example.com/v1"
+			placeholder="https://&lbrace;id&rbrace;.api.example.com/v1"
 			type="url"
-			bind:value={url}
+			bind:value={server.url}
 		/>
 	</label>
 
@@ -35,14 +51,59 @@
 		<textarea
 			class="textarea"
 			name="description {id}"
-			placeholder="The main API server"
-			bind:value={description}
+			placeholder="Optional multiline or single-line description. Supports Markdown."
+			bind:value={server.description}
 		/>
 	</label>
+	<div class="border-token rounded-container-token space-y-4 p-4">
+		<div>
+			<h4 class="h4">Variables (optional)</h4>
+			<p>Define variables for the server URL.</p>
+		</div>
+		{#if server.variables}
+			<table class="table">
+				<tbody>
+					{#each Object.keys(server.variables) as variable}
+						<tr>
+							<td class="text-center">
+								<div class="flex justify-center items-center">
+									<p class="text-xl">{variable}</p>
+								</div>
+							</td>
+							<td>
+								<input
+									class="input"
+									placeholder="default"
+									type="text"
+									bind:value={server.variables[variable].default}
+								/>
+							</td>
+							<td>
+								<input
+									class="input"
+									placeholder="description"
+									type="text"
+									bind:value={server.variables[variable].description}
+								/>
+							</td>
+							<td class="!w-1/3">
+								<div >
+									<InputChip
+										bind:value={server.variables[variable].enum}
+										name="enum"
+										placeholder="enum (optional)"
+									/>
+								</div>
+							</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		{/if}
+		<span class="flex justify-center">
+			<button type="button" class="btn btn-sm variant-filled-primary" on:click={addVariable}>
+				Add Variable
+			</button>
+		</span>
 	</div>
-
-<!-- Description Tooltip -->
-<div class="card px-4 py-2 variant-filled-primary" data-popup="descriptionTooltip{id}">
-	<p>Optional multiline or single-line description. Supports Markdown.</p>
-	<div class="arrow variant-filled-primary" />
 </div>

src/lib/components/sections/Servers.svelte

@@ -1,4 +1,4 @@
-<!-- <script lang="ts">
+<script lang="ts">
 	import { openApiStore } from '$lib';
 	import ServerInput from '../atoms/ServerInput.svelte';
 
@@ -28,7 +28,7 @@
 						Remove Server
 					</button>
 				</span>
-				<ServerInput id={1} bind:url={server.url} bind:description={server.description} />
+				<ServerInput id={1} bind:server />
 			</li>
 			{#if index < $openApiStore.servers.length - 1}
 				<hr />
@@ -40,4 +40,4 @@
 			Add Server
 		</button>
 	</span>
-</form> -->
+</form>

src/lib/openAPITypes.d.ts

@@ -5,7 +5,7 @@ export namespace OpenAPIV3 {
 	interface Document<T extends {} = {}> {
 		openapi: string;
 		info: InfoObject;
-		servers?: ServerObject[];
+		servers: ServerObject[];
 		paths: PathsObject<T>;
 		components?: ComponentsObject;
 		security?: SecurityRequirementObject[];

src/routes/+layout.svelte

@@ -5,6 +5,7 @@
 	// Floating UI for Popups
 	import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floating-ui/dom';
 	import { storePopup } from '@skeletonlabs/skeleton';
+	import { localStoragePrefix } from '$lib';
 	storePopup.set({ computePosition, autoUpdate, flip, shift, offset, arrow });
 </script>
 
@@ -24,6 +25,18 @@
 			>
 				Schema Reference
 			</a>
+			<button
+				type="button"
+				class="btn variant-ringed-error hover:variant-filled-error"
+				on:click={() => {
+					if (confirm('Are you sure you want to reset ALL current inputs?')) {
+						// remove `openApi` from localStorage
+						localStorage.removeItem(`${localStoragePrefix}openApi`);
+					}
+				}}
+			>
+				Reset Inputs
+			</button>
 		</svelte:fragment>
 	</AppBar>
 	<div class="mx-8 my-4">

src/routes/+page.svelte

@@ -31,7 +31,7 @@
 		{:else if $tabSet === 1}
 			<!-- <Authentication /> -->
 		{:else if $tabSet === 2}
-			<!-- <Servers /> -->
+			<Servers />
 		{:else if $tabSet === 3}
 			<p>Paths</p>
 		{:else if $tabSet === 4}