Added start of License, minor styling and functional changes, added lightswitch

package.json

@@ -30,6 +30,7 @@
 		"postcss": "8.4.38",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",
+		"spdx-license-list": "^6.9.0",
 		"svelte": "^4.2.7",
 		"svelte-check": "^3.6.0",
 		"tailwindcss": "3.4.3",

src/lib/components/atoms/AddPathButtons.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { addPath } from '$lib';
+	import { sortPathsAlphabetically } from '$lib';
+	import { getModalStore } from '@skeletonlabs/skeleton';
+
+	const modalStore = getModalStore();
+
+    export let justify: string = 'justify-end';
+    export let sort: boolean = true;
+</script>
+
+<div class={`flex flex-row ${justify}`}>
+	<div class="flex flex-row w-40 gap-2">
+		<span class="w-full flex justify-center">
+			<button
+				type="button"
+				class="btn btn-sm variant-filled-primary"
+				on:click={() => {
+					addPath(modalStore);
+				}}
+			>
+				Add Path
+			</button>
+		</span>
+        {#if sort}
+		<span class="w-full flex justify-center">
+			<button
+				type="button"
+				class="btn btn-sm variant-filled-secondary"
+				on:click={sortPathsAlphabetically}
+			>
+				Sort
+			</button>
+		</span>
+        {/if}
+	</div>
+</div>

src/lib/components/atoms/LicenseAtom.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+    import { openApiStore } from '$lib';
+    import spdxLicenseList from 'spdx-license-list';
+</script>
+
+<div class="border-token rounded-container-token space-y-4 p-4">
+    <h4 class="h4">License</h4>
+    <label class="text-xl space-y-2">
+        <span>Name (required)</span>
+        <input
+            class="input"
+            name="licenseName"
+            placeholder="Apache 2.0"
+            type="text"
+            bind:value={$openApiStore.info.license.name}
+        />
+    </label>
+    <label class="text-xl space-y-2">
+        <span>Identifer (optional)</span>
+        <input
+            class="input"
+            name="licenseIdentifier"
+            placeholder="Apache-2.0"
+            type="text"
+            bind:value={$openApiStore.info.license.identifier}
+        />
+    </label>
+    <label class="text-xl space-y-2">
+        <span>URL (optional)</span>
+        <input
+            class="input"
+            name="licenseUrl"
+            placeholder="https://www.apache.org/licenses/LICENSE-2.0.html"
+            type="url"
+            bind:value={$openApiStore.info.license.url}
+        />
+    </label>
+    <select class="select" on:change={(event)=>{
+        $openApiStore.info.license.name = event.target.value;
+        $openApiStore.info.license.url = spdxLicenseList[event.target.value].url;
+    }}>
+        {#each Object.keys(spdxLicenseList).sort() as license}
+            <option value={license}>{spdxLicenseList[license].name}</option>
+        {/each}
+    </select>
+</div>

src/lib/components/atoms/PathListItem.svelte

@@ -18,8 +18,8 @@
 </script>
 
 <div class="flex justify-between">
-	<h3 class="h3">{pathName}</h3>
+	<h3 class="">{pathName}</h3>
-	<div class="flex gap-4">
+	<div class="flex gap-2">
 		<a href="/path-{id}" class="btn btn-sm variant-filled-primary">Edit</a>
 		<button
 			type="button"

src/lib/components/sections/Info.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Info from '../icons/Info.svelte';
+	import LicenseAtom from '../atoms/LicenseAtom.svelte';
 	import { openApiStore } from '$lib';
 </script>
 
@@ -78,4 +79,5 @@
 			/>
 		</label>
 	</div>
+	<LicenseAtom />
 </form>

src/lib/components/sections/Paths.svelte

@@ -3,6 +3,7 @@
 	import { openApiStore, pathRegex, sortPathsAlphabetically } from '$lib';
 	import { pathTemplate } from '$lib/pathTemplate';
 	import PathListItem from '../atoms/PathListItem.svelte';
+	import AddPathButtons from '../atoms/AddPathButtons.svelte';
 	import { getModalStore } from '@skeletonlabs/skeleton';
 
 	const modalStore = getModalStore();
@@ -42,27 +43,17 @@
 </script>
 
 <div
-	class="container mx-auto border-token rounded-container-token bg-surface-backdrop-token px-6 py-4 space-y-4"
+	class="container mx-auto border-token rounded-container-token bg-surface-backdrop-token px-6 py-4 space-y-3"
 >
-	{#each Object.keys($openApiStore.paths) as pathName, index}
+	{#if Object.keys($openApiStore.paths).length > 0}
-		<PathListItem {pathName} id={index} />
+		<AddPathButtons />
-	{/each}
+		<hr />
-	<span class="w-full flex justify-center">
+		{#each Object.keys($openApiStore.paths) as pathName, index}
-		<button
+			<PathListItem {pathName} id={index} />
-			type="button"
+		{/each}
-			class="btn variant-filled-primary"
+		
-			on:click={() => {
+		<AddPathButtons />
-				addPath(modalStore);
+		{:else}
-			}}>Add Path</button
+		<AddPathButtons justify="justify-center" sort={false} />
-		>
+	{/if}
-	</span>
-	<span class="w-full flex justify-center">
-		<button
-			type="button"
-			class="btn btn-sm variant-filled-secondary"
-			on:click={sortPathsAlphabetically}
-		>
-			Sort paths
-		</button>
-	</span>
 </div>

src/routes/+layout.svelte

@@ -9,7 +9,7 @@
 	storePopup.set({ computePosition, autoUpdate, flip, shift, offset, arrow });
 
 	// Modal
-	import { initializeStores, Modal } from '@skeletonlabs/skeleton';
+	import { initializeStores, Modal, LightSwitch } from '@skeletonlabs/skeleton';
 	initializeStores();
 </script>
 
@@ -24,6 +24,7 @@
 			</h1>
 		</svelte:fragment>
 		<svelte:fragment slot="trail">
+			<LightSwitch />
 			<a
 				href="https://www.speakeasyapi.dev/openapi"
 				target="_blank"
@@ -42,7 +43,7 @@
 					}
 				}}
 			>
-				Reset Inputs
+				X
 			</button>
 		</svelte:fragment>
 	</AppBar>

src/routes/+page.svelte

@@ -10,7 +10,7 @@
 	const tabSet = persisted<number>('tabSet', 0);
 </script>
 
-<TabGroup>
+<TabGroup justify="justify-center">
 	<Tab bind:group={$tabSet} name="info" value={0}>
 		<h4 class="h4">Info</h4>
 	</Tab>

src/routes/path-[index]/+page.svelte

@@ -39,6 +39,7 @@
 </script>
 
 <div class="card p-4 space-y-4">
+	<a href="/"> {`<-`} Back </a>
 	<h1>{data.pathName}</h1>
 	<label class="space-y-1">
 		<h5 class="h5">Summary</h5>