feat: new dashboard

apps/ui/src/routes/services/index.svelte

@@ -24,9 +24,8 @@
 	import { t } from '$lib/translations';
 	import { appSession } from '$lib/store';
 
-	import * as Icons from '$lib/components/svg/services';
 	import { getDomain } from '$lib/common';
-	import Services from './[id]/_Services.svelte';
+	import ServiceIcons from '$lib/components/svg/services/ServiceIcons.svelte';
 
 	async function newService() {
 		const { id } = await post('/services/new', {});
@@ -46,24 +45,21 @@
 
 <div class="flex space-x-1 p-6 font-bold">
 	<div class="mr-4 text-2xl tracking-tight">{$t('index.services')}</div>
-	<button
-			on:click={newService}
-			class="btn btn-square btn-sm bg-services"
+	<button on:click={newService} class="btn btn-square btn-sm bg-services">
+		<svg
+			class="h-6 w-6"
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke="currentColor"
+			><path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+			/></svg
 		>
-			<svg
-				class="h-6 w-6"
-				xmlns="http://www.w3.org/2000/svg"
-				fill="none"
-				viewBox="0 0 24 24"
-				stroke="currentColor"
-				><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M12 6v6m0 0v6m0-6h6m-6 0H6"
-				/></svg
-			>
-		</button>
+	</button>
 </div>
 
 <div class="flex-col justify-center">
@@ -78,7 +74,7 @@
 				{#each ownServices as service}
 					<a href="/services/{service.id}" class=" p-2 no-underline">
 						<div class="box-selection group relative hover:bg-pink-600">
-							<Services type={service.type} />
+							<ServiceIcons type={service.type} />
 							<div class="truncate text-center text-xl font-bold">
 								{service.name}
 							</div>