standardized fade for devices

src/lib/devices/CreateDevice.svelte

@@ -40,7 +40,7 @@
 
 <!-- html -->
 <!-- device creation visibility button -->
-<div in:fade class="p-4">
+<div class="p-4">
 	{#if newDeviceCardVisible == false}
 		<button on:click={() => (newDeviceCardVisible = true)} class="btn btn-primary btn-sm capitalize" type="button">+ New Device</button>
 	{:else}

src/lib/devices/DeviceCard.svelte

@@ -12,7 +12,7 @@ import DeviceTags from './DeviceCard/DeviceTags.svelte';
 	let cardEditing = false;
 </script>
 
-<div in:fade class="card-primary">
+<div class="card-primary">
 	<div on:click={() => (cardExpanded = !cardExpanded)} class="flex">
 		<span class="font-bold w-full">
 			{#if cardEditing == false}

src/lib/devices/DeviceCard/DeviceTags.svelte

@@ -2,7 +2,6 @@
 	import NewDeviceTag from './DeviceTags/NewDeviceTag.svelte';
 	import { Device } from '$lib/common/classes';
 	import { updateTags, getDevices } from '$lib/common/apiFunctions.svelte';
-	import { fade } from 'svelte/transition';
 	import { headscaleDeviceStore, alertStore } from '$lib/common/stores.js';
 	export let device = new Device();
 
@@ -30,7 +29,7 @@
 <span><NewDeviceTag {device}/></span>
 
 {#each device.forcedTags as tag}
-	<span in:fade class="mb-1 mr-1 btn btn-xs btn-primary normal-case">{tag.replace("tag:","")}
+	<span class="mb-1 mr-1 btn btn-xs btn-primary normal-case">{tag.replace("tag:","")}
 	<!-- Cancel symbol -->
 	<button on:click|stopPropagation={() => {updateTagsAction(tag)}}
 	class="ml-1"
@@ -42,6 +41,6 @@
 {/each}
 
 {#each device.validTags as tag}
-	<span in:fade class="mb-1 mr-1 btn btn-xs btn-secondary normal-case">{tag.replace("tag:","")}</span>
+	<span class="mb-1 mr-1 btn btn-xs btn-secondary normal-case">{tag.replace("tag:","")}</span>
 {/each}
 

src/lib/devices/DeviceCard/DeviceTags/NewDeviceTag.svelte

@@ -39,7 +39,7 @@
 	class="btn btn-xs border-dotted border-2 btn-primary opacity-60 normal-case"
 >
 	{#if !editingTag}
-		<span in:fade>+ tag</span>
+		<span>+ tag</span>
 	{:else}
 		<!-- svelte-ignore a11y-autofocus -->
 		<form

src/lib/devices/SortDevices.svelte

@@ -0,0 +1,5 @@
+<div class="btn-group">
+  <button class="btn btn-sm btn-active">ID</button>
+  <button class="btn btn-sm capitalize">Device Name</button>
+  <button class="btn btn-sm capitalize">Last Seen</button>
+</div>

src/routes/devices.html.svelte

@@ -2,6 +2,7 @@
 <script lang="ts">
 	import DeviceCard from '$lib/devices/DeviceCard.svelte';
 	import CreateDevice from '$lib/devices/CreateDevice.svelte';
+	import SortDevices from '$lib/devices/SortDevices.svelte';
 	import { onMount } from 'svelte';
 	import { fade } from 'svelte/transition';
 	import { apiTestStore, headscaleUserStore, headscaleDeviceStore } from '$lib/common/stores.js';
@@ -43,19 +44,21 @@
 
 <!-- html -->
 {#if componentLoaded}
-	<div in:fade class="px-4 pt-4">
-		<h1 class="text-2xl bold text-primary">Device View</h1>
-	</div>
-	{#if $apiTestStore === 'succeeded'}
-		<!-- instantiate device based components -->
-		<CreateDevice />
-		{#each $headscaleDeviceStore as device}
-			<DeviceCard {device} />
-		{/each}
-	{/if}
-	{#if $apiTestStore === 'failed'}
-		<div in:fade class="max-w-lg  mx-auto p-4 border-4 text-sm text-base-content shadow-lg text-center">
-			<p>API test did not succeed.<br />Headscale might be down or API settings may need to be set<br />change server settings in the <a href="{base}/settings.html" class="link link-primary">settings</a> page</p>
+	<div in:fade>
+		<div in:fade class="px-4 pt-4">
+			<h1 class="text-2xl bold text-primary">Device View</h1>
 		</div>
-	{/if}
+		{#if $apiTestStore === 'succeeded'}
+			<!-- instantiate device based components -->
+			<table><tr><td><CreateDevice /></td><td><SortDevices /></td></tr></table>
+			{#each $headscaleDeviceStore as device}
+				<DeviceCard {device} />
+			{/each}
+		{/if}
+		{#if $apiTestStore === 'failed'}
+			<div in:fade class="max-w-lg  mx-auto p-4 border-4 text-sm text-base-content shadow-lg text-center">
+				<p>API test did not succeed.<br />Headscale might be down or API settings may need to be set<br />change server settings in the <a href="{base}/settings.html" class="link link-primary">settings</a> page</p>
+			</div>
+		{/if}
+	</div>
 {/if}