add basic path structure

src/lib/components/atoms/PathListItem.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { openApiStore } from '$lib';
+
+	/** The actual pathname */
+	export let pathName: string;
+	/** The index of the pathname in the paths object */
+	export let id: number;
+
+	const removeRoute = () => {
+		let tempPathObject = {
+			...$openApiStore.paths
+		};
+		delete tempPathObject[pathName];
+		$openApiStore.paths = tempPathObject;
+	};
+</script>
+
+<div class="flex justify-between">
+	<h3 class="h3">{pathName}</h3>
+	<div class="flex gap-4">
+		<a href="/path/{id}" class="btn btn-sm variant-filled-primary">Edit</a>
+		<button type="button" class="btn btn-sm variant-filled-secondary"> Add SubRoute </button>
+		<button
+			type="button"
+			class="btn btn-sm variant-ringed-error hover:variant-filled-error"
+			on:click={removeRoute}
+		>
+			Remove
+		</button>
+	</div>
+</div>
+<hr />

src/lib/components/sections/Paths.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { openApiStore } from '$lib';
+	import { pathTemplate } from '$lib/pathTemplate';
+	import PathListItem from '../atoms/PathListItem.svelte';
+
+	// match path with parameters
+	const pathRegex = /\/([\/]*[\{]?[a-zA-Z]+[\}]?)*/gm;
+
+	// add path
+	const addPath = () => {
+		// prompt user to enter path
+		const path = prompt(
+			'Enter path. Wrap path parameters in curly braces. Example: /users/{userId}'
+		);
+		if (!path) return;
+		// check if path is valid
+		if (!pathRegex.test(path)) {
+			alert('Invalid path');
+			return;
+		}
+
+		// check if path already exists
+		// @ts-expect-error - we are working with an initially empty object
+		if ($openApiStore.paths[path]) {
+			alert('Path already exists');
+			return;
+		}
+
+		// create a temporary object to store paths
+		let tempPathObject = {
+			...$openApiStore.paths
+		};
+
+		tempPathObject[path] = pathTemplate;
+
+		// update paths in store
+		$openApiStore.paths = tempPathObject;
+
+		// sort paths alphabetically
+		sortPathsAlphabetically();
+	};
+
+	const sortPathsAlphabetically = () => {
+		let tempPathObject = {};
+		// @ts-expect-error - we are working with an initially empty object
+		Object.keys($openApiStore.paths)
+			.sort()
+			.forEach((key) => {
+				// @ts-expect-error - we are working with initially empty objects
+				tempPathObject[key] = $openApiStore.paths[key];
+			});
+		$openApiStore.paths = tempPathObject;
+	};
+</script>
+
+<div
+	class="container mx-auto border-token rounded-container-token bg-surface-backdrop-token px-6 py-4 space-y-4"
+>
+	{#each Object.keys($openApiStore.paths) as pathName, index}
+		<PathListItem {pathName} id={index} />
+	{/each}
+	<span class="w-full flex justify-center">
+		<button type="button" class="btn variant-filled-primary" on:click={addPath}>Add Path</button>
+	</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/lib/pathTemplate.ts

@@ -0,0 +1,17 @@
+import type { OpenAPIV3_1 } from './openAPITypes';
+
+export const pathTemplate: OpenAPIV3_1.PathItemObject = {
+	$ref: undefined,
+	summary: undefined,
+	description: undefined,
+	servers: undefined,
+	parameters: undefined,
+	get: undefined,
+	put: undefined,
+	post: undefined,
+	delete: undefined,
+	options: undefined,
+	head: undefined,
+	patch: undefined,
+	trace: undefined
+};

src/routes/+page.svelte

@@ -4,6 +4,7 @@
 	import { TabGroup, Tab } from '@skeletonlabs/skeleton';
 	import { persisted } from 'svelte-persisted-store';
 	import Authentication from '$lib/components/sections/Authentication.svelte';
+	import Paths from '$lib/components/sections/Paths.svelte';
 
 	// let tabSet: number = 0;
 	const tabSet = persisted<number>('tabSet', 0);
@@ -33,7 +34,7 @@
 		{:else if $tabSet === 2}
 			<Servers />
 		{:else if $tabSet === 3}
-			<p>Paths</p>
+			<Paths />
 		{:else if $tabSet === 4}
 			<p>Components</p>
 		{/if}