ui fixes

src/lib/components/common/classes.svelte.ts

@@ -1,5 +1,7 @@
 export class PersistentAppSettingsObject {
-    daisyUITheme = "" // for setting the UI theme. See https://daisyui.com/docs/themes/
+    daisyUITheme = ""       // for setting the UI theme. See https://daisyui.com/docs/themes/
+    headscaleAPIKey = ""    // sensitive, allows for administrative access to headscale
+    headscaleURL = ""       //url for headscale to use
 
     public constructor(init?: Partial<PersistentAppSettingsObject>) {
         Object.assign(this, init);

src/lib/components/layout/navbar.svelte

@@ -1,6 +1,6 @@
 <!-- nav bar content here -->
 <script lang="ts">
-	import { appSettings } from '$lib/state.svelte';
+	import { appSettings } from '$lib/components/common/state.svelte';
 </script>
 
 <div class="flex-1">

src/lib/components/layout/sidebar.svelte

@@ -15,8 +15,8 @@
 				>
 			</div>
 			<div class="cols-span-2">
-				<div class="text-primary">Guru</div>
-				<div class="ml-5 text-primary">Computing</div>
+				<div class="text-primary">Headscale</div>
+				<div class="ml-5 text-primary">UI</div>
 			</div>
 		</div>
 	</a>

src/lib/components/layout/toast.svelte

@@ -1,6 +1,6 @@
 <!-- used to generate alerts or messages -->
 <script lang="ts">
-	import { appSettings } from '$lib/state.svelte';
+	import { appSettings } from '$lib/components/common/state.svelte';
 	let { toastAlert } = $props();
 
 	let progress = $state(100);
@@ -18,7 +18,6 @@
 		}
 	}, intervalTime);
 
-	// Removes alert early on button press
 	function removeAlert() {
 		clearInterval(interval); // Stop the interval at 0
 		appSettings.toastAlerts = appSettings.toastAlerts.filter(function (returnObj) {

src/lib/components/settings/server-settings.svelte

@@ -7,8 +7,9 @@
 		<span class="label-text-alt">URL for your headscale server instance (does not need populating if it's on the same subdomain)</span>
 	</label>
 	<label class="mb-2 block font-bold text-secondary" for="password"> Headscale API Key </label>
-	<input class="input input-sm input-bordered w-full" type="password" placeholder="******************" />
+	<input class="input input-sm input-bordered w-full" minlength="54" maxlength="54" type="password" placeholder="******************" />
 	<label for="url" class="label">
 		<span class="label-text-alt">Generate an API key for your headscale instance and place it here.</span>
 	</label>
+	<button class="btn btn-sm btn-secondary w-16">save</button>
 </div>

src/lib/components/settings/server-settings.ts

@@ -0,0 +1,3 @@
+export function testAPIConnectivity() {
+    return true;
+}

src/lib/components/settings/theme-settings.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { persistentAppSettings } from '$lib/state.svelte';
+    import { persistentAppSettings } from '$lib/components/common/state.svelte';
 	import Svelecte from 'svelecte';
 </script>
 

src/lib/index.ts

@@ -1 +0,0 @@
-// place files you want to import through the `$lib` alias in this folder.

src/routes/+layout.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { toastAlert, type PersistentAppSettingsObject } from '$lib/classes.svelte';
+	import { toastAlert, type PersistentAppSettingsObject } from '$lib/components/common/classes.svelte';
 	import Toast from '$lib/components/layout/toast.svelte';
 	import Navbar from '$lib/components/layout/navbar.svelte';
 	import Sidebar from '$lib/components/layout/sidebar.svelte';
-	import { appSettings, persistentAppSettings } from '$lib/state.svelte';
+	import { appSettings, persistentAppSettings } from '$lib/components/common/state.svelte';
 	import { onMount } from 'svelte';
 	import { fade } from 'svelte/transition';
 	import '../app.css';

src/routes/+page.svelte

@@ -4,6 +4,6 @@
 	import { onMount } from 'svelte';
 
 	onMount(async () => {
-		// goto(`${base}/users.html`);
+		goto(`${base}/users.html`);
 	});
 </script>

src/routes/settings.html/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import ServerSettings from '$lib/components/settings/server-settings.svelte';
 	import ThemeSettings from '$lib/components/settings/theme-settings.svelte';
-	import { appSettings } from '$lib/state.svelte';
+	import { appSettings } from '$lib/components/common/state.svelte';
 
 	appSettings.navbarTitle = 'Settings';
 	appSettings.sidebarDrawerOpen = false;

src/routes/users.html/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { appSettings } from '$lib/state.svelte';
+	import { appSettings } from '$lib/components/common/state.svelte';
 
 	appSettings.navbarTitle = 'Users';
 	appSettings.sidebarDrawerOpen = false;