moved sites to postgres database, use button to add more

src/routes/sites/+page.svelte

@@ -1,103 +1,26 @@
 <script lang="ts">
 	import PageHeader from '$lib/components/PageHeader.svelte';
+	import Dialog from '$lib/components/Dialog.svelte';
 	import Section from '$lib/components/Section.svelte';
+	import FormSite from '$lib/components/forms/FormSite.svelte';
 	import ThumbnailButton from '$lib/components/ThumbnailButton.svelte';
+	import type { Site } from '$lib/interfaces/site.ts';
 
-	interface Site {
-		title: string;
-		image: string;
-		link: string;
-		background?: string;
-		color?: string;
-	}
+	let { data }: { data: { site: Site } } = $props();
+	let open = $state(false);
 
-	const sites: Array<Site> = [
-		{
-			title: 'Grafana',
-			image: '/images/grafana.png',
-			link: 'https://grafana.schleppe.cloud',
-			background: '#F5E3DC',
-			color: '#F05A24'
-		},
-		{
-			title: 'Prometheus',
-			image: '/images/prometheus.svg',
-			link: 'http://prome.schleppe:9090',
-			background: '#262221',
-			color: '#F3BFA2'
-		},
-		{
-			title: 'Traefik',
-			image: '/images/traefik.png',
-			link: 'https://grafana.schleppe.cloud',
-			background: '#30A4C2',
-			color: 'white'
-		},
-		{
-			title: 'Kibana',
-			image: '/images/kibana.svg',
-			link: 'https://kibana.schleppe.cloud',
-			background: '#f6cfdd',
-			color: '#401C26'
-		},
-		{
-			title: 'HASS',
-			image: '/images/hass.png',
-			link: 'http://homeassistant.schleppe:8123',
-			background: '#1ABCF2',
-			color: 'white'
-		},
-		{
-			title: 'Vault',
-			image: '/images/vault.svg',
-			link: 'http://vault.schleppe:8200',
-			background: 'white',
-			color: 'black'
-		},
-		{
-			title: 'Drone',
-			image: '/images/drone.png',
-			link: 'https://drone.schleppe.cloud',
-			background: '#D8E2F0',
-			color: '#1E375A'
-		},
-		{
-			title: 'Immich',
-			image: '/images/immich.png',
-			link: 'http://immich.schleppe:2283',
-			background: 'white',
-			color: 'black'
-		},
-		{
-			title: 'Wiki',
-			image: '/images/xwiki.png',
-			link: 'https://wiki.schleppe.cloud',
-			background: 'white',
-			color: 'black'
-		},
-		{
-			title: 'Gitea',
-			image: '/images/gitea.png',
-			link: 'https://git.schleppe.cloud',
-			background: '#E6E7D7',
-			color: '#609925'
-		},
-		{
-			title: 'PBS',
-			image: '/images/proxmox.png',
-			link: 'https://clio.schleppe:8007',
-			background: '#EDE1D2',
-			color: '#E66B00'
-		}
-	];
+	const { sites } = data;
 </script>
 
-<PageHeader>Sites</PageHeader>
+<PageHeader>Sites
+
+			<button class="add-site-btn affirmative" on:click={() => (open = true)}><span>Add new site</span></button>
+</PageHeader>
 
 <div class="section-wrapper">
-	{#each sites as site}
+	{#each sites as site (site)}
 		<ThumbnailButton
-			title={site.title}
+			title={site.name}
 			image={site.image}
 			background={site.background}
 			color={site.color}
@@ -106,27 +29,15 @@
 	{/each}
 </div>
 
-<div class="section-wrapper full-width">
-	<Section
-		title="Expose HTTP traffic"
-		description="You can reach your Application on a specific Port you configure, redirecting all your domains to it. You can make it Private by disabling HTTP traffic."
-	/>
-
-	<Section
-		title="IP restrictions"
-		description="Restrict or block access to your application based on specific IP addresses or CIDR blocks."
-	/>
-
-	<Section
-		title="Expose HTTP traffic"
-		description="You can reach your Application on a specific Port you configure, redirecting all your domains to it. You can make it Private by disabling HTTP traffic."
-	/>
-
-	<Section
-		title="Connected services"
-		description="Connected services can communicate with your application over the private network."
-	/>
-</div>
+{#if open}
+	<Dialog
+		on:close={() => (open = false)}
+		title="Add new site"
+		description="You can select anything deployed in <b>Belgium (europe-west1) datacenter</b> and create an internal connection with your service."
+	>
+		<FormSite on:close={() => (open = false)} />
+	</Dialog>
+{/if}
 
 <style lang="scss">
 	.section-wrapper {
@@ -149,4 +60,10 @@
 			margin-top: 4rem;
 		}
 	}
+
+	:global(button.add-site-btn) {
+		font-size: 1.2rem;
+		float: right;
+		height: 2.5rem;
+	}
 </style>