@turnipxenon/pineapple 2.4.64 → 2.4.67

package/.idea/workspace.xml

@@ -4,9 +4,7 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="accb6ba2-c343-4f84-ad30-6e2d71eceee5" name="CreateUrlForm" comment="Remove tailwind reliance on Chip">
-      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
-    </list>
+    <list default="true" id="accb6ba2-c343-4f84-ad30-6e2d71eceee5" name="CreateUrlForm" comment="Add hideable upper controls for NavigationComponent" />
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
@@ -50,12 +48,12 @@
         <option value="EntryOrderConfig" />
         <option value="ComboBox" />
         <option value="ComboBoxWithButton" />
-        <option value="CSS File" />
         <option value="RandomComponent" />
         <option value="UrlShortenerForm" />
         <option value="TypeScript File" />
         <option value="PineappleSlideToggle" />
         <option value="PostCSS File" />
+        <option value="CSS File" />
       </list>
     </option>
   </component>
@@ -119,7 +117,7 @@
     &quot;git-widget-placeholder&quot;: &quot;turnip/dev&quot;,
     &quot;ignore.virus.scanning.warn.message&quot;: &quot;true&quot;,
     &quot;last_opened_file_path&quot;: &quot;C:/Users/Pumpkin/Projects/Web/pineapple&quot;,
-    &quot;list.type.of.created.stylesheet&quot;: &quot;PostCSS&quot;,
+    &quot;list.type.of.created.stylesheet&quot;: &quot;CSS&quot;,
     &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
     &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
     &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
@@ -147,18 +145,18 @@
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(pineapple)\pineapple\(extra-pages)\page3\page5" />
     </key>
     <key name="MoveFile.RECENT_KEYS">
+      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\components\pineapple-slide-toggle" />
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\components\chip" />
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\components\combo_box" />
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\docs\archive" />
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(pineapple)\pineapple\(pineapple)" />
-      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(pineapple)\pineapple\(nested)" />
     </key>
     <key name="es6.move.members.recent.items">
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\types\RootLayoutProps.ts" />
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\util\util.ts" />
     </key>
   </component>
-  <component name="RunManager" selected="npm.dev --open">
+  <component name="RunManager" selected="npm.to-dev">
     <configuration name="dev --open" type="js.build_tools.npm" temporary="true" nameIsGenerated="true">
       <package-json value="$PROJECT_DIR$/package.json" />
       <command value="run" />
@@ -197,8 +195,8 @@
     </list>
     <recent_temporary>
       <list>
-        <item itemvalue="npm.dev --open" />
         <item itemvalue="npm.to-dev" />
+        <item itemvalue="npm.dev --open" />
         <item itemvalue="npm.dev-offline" />
         <item itemvalue="npm.dev --open" />
         <item itemvalue="npm.to-dev" />
@@ -340,31 +338,14 @@
       <workItem from="1712570296984" duration="1559000" />
       <workItem from="1712571884570" duration="7000" />
       <workItem from="1712636226857" duration="11130000" />
-      <workItem from="1712648417963" duration="5995000" />
-    </task>
-    <task id="LOCAL-00132" summary="Change from auto to node adapter">
-      <option name="closed" value="true" />
-      <created>1712373195354</created>
-      <option name="number" value="00132" />
-      <option name="presentableId" value="LOCAL-00132" />
-      <option name="project" value="LOCAL" />
-      <updated>1712373195354</updated>
-    </task>
-    <task id="LOCAL-00133" summary="Add kudos to 0gust1&#10;&#10;Add kudos to 0gust1 for documenting how to deploy sveltekit app on Azure App service">
-      <option name="closed" value="true" />
-      <created>1712377506353</created>
-      <option name="number" value="00133" />
-      <option name="presentableId" value="LOCAL-00133" />
-      <option name="project" value="LOCAL" />
-      <updated>1712377506354</updated>
-    </task>
-    <task id="LOCAL-00134" summary="Correct app_build_command in Azure SWA GithubActions&#10;&#10;app_build_command by default runs npm install when it should be running yarn install">
-      <option name="closed" value="true" />
-      <created>1712380208456</created>
-      <option name="number" value="00134" />
-      <option name="presentableId" value="LOCAL-00134" />
-      <option name="project" value="LOCAL" />
-      <updated>1712380208458</updated>
+      <workItem from="1712648417963" duration="7073000" />
+      <workItem from="1712712655154" duration="1564000" />
+      <workItem from="1712751593565" duration="273000" />
+      <workItem from="1712756759276" duration="4000" />
+      <workItem from="1712756828446" duration="499000" />
+      <workItem from="1712757929028" duration="266000" />
+      <workItem from="1712759920412" duration="16000" />
+      <workItem from="1712761439292" duration="385000" />
     </task>
     <task id="LOCAL-00135" summary="Add resolutions to use Node 20 in Azure SWA GithubActions">
       <option name="closed" value="true" />
@@ -734,7 +715,31 @@
       <option name="project" value="LOCAL" />
       <updated>1712654142877</updated>
     </task>
-    <option name="localTasksCounter" value="181" />
+    <task id="LOCAL-00181" summary="Add border for slider toggle during light mode">
+      <option name="closed" value="true" />
+      <created>1712713161412</created>
+      <option name="number" value="00181" />
+      <option name="presentableId" value="LOCAL-00181" />
+      <option name="project" value="LOCAL" />
+      <updated>1712713161413</updated>
+    </task>
+    <task id="LOCAL-00182" summary="WIP attempt to fix slider">
+      <option name="closed" value="true" />
+      <created>1712713857855</created>
+      <option name="number" value="00182" />
+      <option name="presentableId" value="LOCAL-00182" />
+      <option name="project" value="LOCAL" />
+      <updated>1712713857855</updated>
+    </task>
+    <task id="LOCAL-00183" summary="Add hideable upper controls for NavigationComponent">
+      <option name="closed" value="true" />
+      <created>1712761479940</created>
+      <option name="number" value="00183" />
+      <option name="presentableId" value="LOCAL-00183" />
+      <option name="project" value="LOCAL" />
+      <updated>1712761479941</updated>
+    </task>
+    <option name="localTasksCounter" value="184" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -772,7 +777,7 @@
                   <entry key="branch">
                     <value>
                       <list>
-                        <option value="turnip/customizable2" />
+                        <option value="main" />
                       </list>
                     </value>
                   </entry>
@@ -792,9 +797,6 @@
     </option>
   </component>
   <component name="VcsManagerConfiguration">
-    <MESSAGE value="Add serverSideQueryParams and extraComponent in SeaweedTemplate" />
-    <MESSAGE value="Fix removeProxyWrapperOnString" />
-    <MESSAGE value="Remove unneeded script check in yarn build" />
     <MESSAGE value="Fix yarn dependencies" />
     <MESSAGE value="Support swappable group for backwards compatibility" />
     <MESSAGE value="Add back gameSectionFirst behaviour" />
@@ -817,6 +819,9 @@
     <MESSAGE value="Extract tailwind css utility class to local-chip" />
     <MESSAGE value="Fix chip issue in Advanced Settings" />
     <MESSAGE value="Remove tailwind reliance on Chip" />
-    <option name="LAST_COMMIT_MESSAGE" value="Remove tailwind reliance on Chip" />
+    <MESSAGE value="Add border for slider toggle during light mode" />
+    <MESSAGE value="WIP attempt to fix slider" />
+    <MESSAGE value="Add hideable upper controls for NavigationComponent" />
+    <option name="LAST_COMMIT_MESSAGE" value="Add hideable upper controls for NavigationComponent" />
   </component>
 </project>

package/.svelte-kit/__package__/components/PineappleSlideToggle.svelte

@@ -1,10 +1,10 @@
 <script>export let checked = false;
 export let name;
 import { SlideToggle } from "@skeletonlabs/skeleton";
-</script>
-
-<SlideToggle name={name}
-             background="bg-surface-700 dark:bg-surface-700"
-             bind:checked={checked}>
-	<slot />
-</SlideToggle>
+</script>
+
+<SlideToggle name={name}
+             background="bg-surface-700 dark:bg-surface-700"
+             bind:checked={checked}>
+	<slot />
+</SlideToggle>

package/.svelte-kit/__package__/components/navigation_component/NavigationComponent.svelte

@@ -7,6 +7,7 @@ export let title = void 0;
 export let imageMap = /* @__PURE__ */ new Map();
 export let shouldAllowControl = true;
 export let parentSubpath;
+export let allowUpperControl = true;
 export let compareFn = void 0;
 export let pageSize = 5;
 export let currentIndex = 0;
@@ -24,7 +25,7 @@ $:
 		</Card>
 	{/if}
 
-	{#if shouldAllowControl}
+	{#if allowUpperControl && shouldAllowControl}
 		<NavigationControl bind:currentIndex={currentIndex}
 		                   bind:contentLength={pageFlatList.length}
 		                   bind:pageSize={pageSize}></NavigationControl>

package/.svelte-kit/__package__/components/navigation_component/NavigationComponent.svelte.d.ts

@@ -10,6 +10,7 @@ declare const __propDef: {
         /**
              * Should include a slash before and after the path
              */ parentSubpath: string;
+        allowUpperControl?: boolean | undefined;
         compareFn?: undefined | ParsePageMetaCompareFn;
         pageSize?: number | undefined;
         currentIndex?: number | undefined;

package/.svelte-kit/__package__/template/seaweed/CreateUrlForm.svelte

@@ -35,32 +35,32 @@ const post = () => {
     toastStore.trigger(toastMap.get(properResp.result) ?? failToast);
   });
 };
-</script>
-
-<div class="local-list">
-	<label for="short-url">Short URL for url shortener</label>
-	<input bind:value={request.shortUrl}
-	       name="short-url"
-	       class="input"
-	       type="text"
-	       placeholder="short-url" />
-	<label for="password">Password</label>
-	<input bind:value={request.password}
-	       name="password"
-	       class="input"
-	       type="password"
-	       placeholder="ILoveTurnips" />
-	<button class="send-link btn variant-filled" on:click={post}>Send link</button>
-</div>
-
-<style>
-    .local-list {
-        display: flex;
-        flex-direction: column;
-        gap: 0.25lh;
-    }
-
-    .send-link {
-        margin-top: 0.75lh;
-    }
+</script>
+
+<div class="local-list">
+	<label for="short-url">Short URL for url shortener</label>
+	<input bind:value={request.shortUrl}
+	       name="short-url"
+	       class="input"
+	       type="text"
+	       placeholder="short-url" />
+	<label for="password">Password</label>
+	<input bind:value={request.password}
+	       name="password"
+	       class="input"
+	       type="password"
+	       placeholder="ILoveTurnips" />
+	<button class="send-link btn variant-filled" on:click={post}>Send link</button>
+</div>
+
+<style>
+    .local-list {
+        display: flex;
+        flex-direction: column;
+        gap: 0.25lh;
+    }
+
+    .send-link {
+        margin-top: 0.75lh;
+    }
 </style>

package/.svelte-kit/generated/server/internal.js

@@ -21,7 +21,7 @@ export const options = {
 		app: ({ head, body, assets, nonce, env }) => "<!DOCTYPE html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<link rel=\"icon\" href=\"" + assets + "/favicon.png\" />\n\t\t<meta name=\"viewport\" content=\"width=device-width\" />\n\t\t" + head + "\n\t</head>\n\n\t<body data-sveltekit-preload-data=\"hover\" data-theme=\"crimson\">\n\t\t<div style=\"display: contents\" class=\"h-full overflow-hidden\">" + body + "</div>\n\t</body>\n</html>\n",
 		error: ({ status, message }) => "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<title>" + message + "</title>\n\n\t\t<style>\n\t\t\tbody {\n\t\t\t\t--bg: white;\n\t\t\t\t--fg: #222;\n\t\t\t\t--divider: #ccc;\n\t\t\t\tbackground: var(--bg);\n\t\t\t\tcolor: var(--fg);\n\t\t\t\tfont-family:\n\t\t\t\t\tsystem-ui,\n\t\t\t\t\t-apple-system,\n\t\t\t\t\tBlinkMacSystemFont,\n\t\t\t\t\t'Segoe UI',\n\t\t\t\t\tRoboto,\n\t\t\t\t\tOxygen,\n\t\t\t\t\tUbuntu,\n\t\t\t\t\tCantarell,\n\t\t\t\t\t'Open Sans',\n\t\t\t\t\t'Helvetica Neue',\n\t\t\t\t\tsans-serif;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\theight: 100vh;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t.error {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tmax-width: 32rem;\n\t\t\t\tmargin: 0 1rem;\n\t\t\t}\n\n\t\t\t.status {\n\t\t\t\tfont-weight: 200;\n\t\t\t\tfont-size: 3rem;\n\t\t\t\tline-height: 1;\n\t\t\t\tposition: relative;\n\t\t\t\ttop: -0.05rem;\n\t\t\t}\n\n\t\t\t.message {\n\t\t\t\tborder-left: 1px solid var(--divider);\n\t\t\t\tpadding: 0 0 0 1rem;\n\t\t\t\tmargin: 0 0 0 1rem;\n\t\t\t\tmin-height: 2.5rem;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t}\n\n\t\t\t.message h1 {\n\t\t\t\tfont-weight: 400;\n\t\t\t\tfont-size: 1em;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t@media (prefers-color-scheme: dark) {\n\t\t\t\tbody {\n\t\t\t\t\t--bg: #222;\n\t\t\t\t\t--fg: #ddd;\n\t\t\t\t\t--divider: #666;\n\t\t\t\t}\n\t\t\t}\n\t\t</style>\n\t</head>\n\t<body>\n\t\t<div class=\"error\">\n\t\t\t<span class=\"status\">" + status + "</span>\n\t\t\t<div class=\"message\">\n\t\t\t\t<h1>" + message + "</h1>\n\t\t\t</div>\n\t\t</div>\n\t</body>\n</html>\n"
 	},
-	version_hash: "vhufmd"
+	version_hash: "sdfwev"
 };
 
 export async function get_hooks() {

package/dist/components/PineappleSlideToggle.svelte

@@ -1,10 +1,10 @@
 <script>export let checked = false;
 export let name;
 import { SlideToggle } from "@skeletonlabs/skeleton";
-</script>
-
-<SlideToggle name={name}
-             background="bg-surface-700 dark:bg-surface-700"
-             bind:checked={checked}>
-	<slot />
-</SlideToggle>
+</script>
+
+<SlideToggle name={name}
+             background="bg-surface-700 dark:bg-surface-700"
+             bind:checked={checked}>
+	<slot />
+</SlideToggle>

package/dist/components/navigation_component/NavigationComponent.svelte

@@ -7,6 +7,7 @@ export let title = void 0;
 export let imageMap = /* @__PURE__ */ new Map();
 export let shouldAllowControl = true;
 export let parentSubpath;
+export let allowUpperControl = true;
 export let compareFn = void 0;
 export let pageSize = 5;
 export let currentIndex = 0;
@@ -24,7 +25,7 @@ $:
 		</Card>
 	{/if}
 
-	{#if shouldAllowControl}
+	{#if allowUpperControl && shouldAllowControl}
 		<NavigationControl bind:currentIndex={currentIndex}
 		                   bind:contentLength={pageFlatList.length}
 		                   bind:pageSize={pageSize}></NavigationControl>

package/dist/components/navigation_component/NavigationComponent.svelte.d.ts

@@ -10,6 +10,7 @@ declare const __propDef: {
         /**
              * Should include a slash before and after the path
              */ parentSubpath: string;
+        allowUpperControl?: boolean | undefined;
         compareFn?: undefined | ParsePageMetaCompareFn;
         pageSize?: number | undefined;
         currentIndex?: number | undefined;

package/dist/template/seaweed/CreateUrlForm.svelte

@@ -35,32 +35,32 @@ const post = () => {
     toastStore.trigger(toastMap.get(properResp.result) ?? failToast);
   });
 };
-</script>
-
-<div class="local-list">
-	<label for="short-url">Short URL for url shortener</label>
-	<input bind:value={request.shortUrl}
-	       name="short-url"
-	       class="input"
-	       type="text"
-	       placeholder="short-url" />
-	<label for="password">Password</label>
-	<input bind:value={request.password}
-	       name="password"
-	       class="input"
-	       type="password"
-	       placeholder="ILoveTurnips" />
-	<button class="send-link btn variant-filled" on:click={post}>Send link</button>
-</div>
-
-<style>
-    .local-list {
-        display: flex;
-        flex-direction: column;
-        gap: 0.25lh;
-    }
-
-    .send-link {
-        margin-top: 0.75lh;
-    }
+</script>
+
+<div class="local-list">
+	<label for="short-url">Short URL for url shortener</label>
+	<input bind:value={request.shortUrl}
+	       name="short-url"
+	       class="input"
+	       type="text"
+	       placeholder="short-url" />
+	<label for="password">Password</label>
+	<input bind:value={request.password}
+	       name="password"
+	       class="input"
+	       type="password"
+	       placeholder="ILoveTurnips" />
+	<button class="send-link btn variant-filled" on:click={post}>Send link</button>
+</div>
+
+<style>
+    .local-list {
+        display: flex;
+        flex-direction: column;
+        gap: 0.25lh;
+    }
+
+    .send-link {
+        margin-top: 0.75lh;
+    }
 </style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@turnipxenon/pineapple",
   "description": "personal package for base styling for other personal projects",
-  "version": "2.4.64",
+  "version": "2.4.67",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && yarn package",

package/src/lib/components/PineappleSlideToggle.svelte

@@ -1,12 +1,12 @@
-<script lang="ts">
-	export let checked = false;
-	export let name: string;
-
-	import { SlideToggle } from "@skeletonlabs/skeleton";
-</script>
-
-<SlideToggle name={name}
-             background="bg-surface-700 dark:bg-surface-700"
-             bind:checked={checked}>
-	<slot />
-</SlideToggle>
+<script lang="ts">
+	export let checked = false;
+	export let name: string;
+
+	import { SlideToggle } from "@skeletonlabs/skeleton";
+</script>
+
+<SlideToggle name={name}
+             background="bg-surface-700 dark:bg-surface-700"
+             bind:checked={checked}>
+	<slot />
+</SlideToggle>

package/src/lib/components/navigation_component/NavigationComponent.svelte

@@ -13,7 +13,7 @@
 	 * Should include a slash before and after the path
 	 */
 	export let parentSubpath: string;
-
+	export let allowUpperControl = true;
 	export let compareFn: undefined | ParsePageMetaCompareFn = undefined;
 	export let pageSize = 5;
 	export let currentIndex = 0;
@@ -32,7 +32,7 @@
 		</Card>
 	{/if}
 
-	{#if shouldAllowControl}
+	{#if allowUpperControl && shouldAllowControl}
 		<NavigationControl bind:currentIndex={currentIndex}
 		                   bind:contentLength={pageFlatList.length}
 		                   bind:pageSize={pageSize}></NavigationControl>

package/src/lib/template/seaweed/CreateUrlForm.svelte

@@ -1,70 +1,70 @@
-<script lang="ts">
-	import { type CreateUrlRequest, CreateUrlResult, jsonToCreateUrlResponse } from "$pkg/types/api/CreateUrl";
-	import { getToastStore, type ToastSettings } from "@skeletonlabs/skeleton";
-
-	export let queryParams = "";
-
-	const toastStore = getToastStore();
-
-	let request: CreateUrlRequest = {
-		queryParams: "",
-		shortUrl: "",
-		password: ""
-	};
-	$: request.queryParams = queryParams;
-
-	const failToast: ToastSettings = {
-		message: "Adding new url failed"
-	};
-	const toastMap = new Map<CreateUrlResult, ToastSettings>([
-		[CreateUrlResult.Success, {
-			message: "Successfully added new url"
-		}],
-		[CreateUrlResult.Duplicate, {
-			message: "Short url already used; try again with another url"
-		}],
-		[CreateUrlResult.Fail, failToast]
-	]);
-	const post = () => {
-		fetch("/api/create-url", {
-			method: "POST",
-			headers: {
-				"Content-Type": "application/json"
-			},
-			body: JSON.stringify(request)
-		}).then(resp =>
-			resp.json()
-		).then(json => {
-			const properResp = jsonToCreateUrlResponse(json);
-			toastStore.trigger(toastMap.get(properResp.result) ?? failToast);
-		});
-	};
-</script>
-
-<div class="local-list">
-	<label for="short-url">Short URL for url shortener</label>
-	<input bind:value={request.shortUrl}
-	       name="short-url"
-	       class="input"
-	       type="text"
-	       placeholder="short-url" />
-	<label for="password">Password</label>
-	<input bind:value={request.password}
-	       name="password"
-	       class="input"
-	       type="password"
-	       placeholder="ILoveTurnips" />
-	<button class="send-link btn variant-filled" on:click={post}>Send link</button>
-</div>
-
-<style>
-    .local-list {
-        display: flex;
-        flex-direction: column;
-        gap: 0.25lh;
-    }
-
-    .send-link {
-        margin-top: 0.75lh;
-    }
+<script lang="ts">
+	import { type CreateUrlRequest, CreateUrlResult, jsonToCreateUrlResponse } from "$pkg/types/api/CreateUrl";
+	import { getToastStore, type ToastSettings } from "@skeletonlabs/skeleton";
+
+	export let queryParams = "";
+
+	const toastStore = getToastStore();
+
+	let request: CreateUrlRequest = {
+		queryParams: "",
+		shortUrl: "",
+		password: ""
+	};
+	$: request.queryParams = queryParams;
+
+	const failToast: ToastSettings = {
+		message: "Adding new url failed"
+	};
+	const toastMap = new Map<CreateUrlResult, ToastSettings>([
+		[CreateUrlResult.Success, {
+			message: "Successfully added new url"
+		}],
+		[CreateUrlResult.Duplicate, {
+			message: "Short url already used; try again with another url"
+		}],
+		[CreateUrlResult.Fail, failToast]
+	]);
+	const post = () => {
+		fetch("/api/create-url", {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json"
+			},
+			body: JSON.stringify(request)
+		}).then(resp =>
+			resp.json()
+		).then(json => {
+			const properResp = jsonToCreateUrlResponse(json);
+			toastStore.trigger(toastMap.get(properResp.result) ?? failToast);
+		});
+	};
+</script>
+
+<div class="local-list">
+	<label for="short-url">Short URL for url shortener</label>
+	<input bind:value={request.shortUrl}
+	       name="short-url"
+	       class="input"
+	       type="text"
+	       placeholder="short-url" />
+	<label for="password">Password</label>
+	<input bind:value={request.password}
+	       name="password"
+	       class="input"
+	       type="password"
+	       placeholder="ILoveTurnips" />
+	<button class="send-link btn variant-filled" on:click={post}>Send link</button>
+</div>
+
+<style>
+    .local-list {
+        display: flex;
+        flex-direction: column;
+        gap: 0.25lh;
+    }
+
+    .send-link {
+        margin-top: 0.75lh;
+    }
 </style>