misc linting, error handling and code-splitting

src/lib/components/Dialog.svelte

@@ -52,11 +52,11 @@
 		</header>
 
 		<main>
-			<div id="dialog-description">
 			{#if description}
+				<div id="dialog-description">
 					{@html description}
-				{/if}
 				</div>
+			{/if}
 
 			<!--
 			<div class="alerts">
@@ -83,6 +83,8 @@
 		align-items: flex-start;
 		justify-content: center;
 		position: fixed;
+		--offset-top: 4rem;
+		padding-top: var(--offset-top);
 		top: 0;
 		right: 0;
 		bottom: 0;
@@ -96,11 +98,16 @@
 			visibility 0.4s ease;
 		visibility: visible;
 		opacity: 1;
-		align-items: center;
+
+		@media screen and (max-width: 480px) {
+			padding: 1rem;
+			width: calc(100vw - 2rem);
+			height: calc(100vh - 2rem);
+		}
 
 		> div {
 			max-width: 880px;
-			max-width: unset;
+			// max-width: unset;
 		}
 	}
 
@@ -123,7 +130,6 @@
 			0 6px 16px 0 rgba(0, 0, 0, 0.08),
 			0 9px 28px 8px rgba(0, 0, 0, 0.05);
 		pointer-events: auto;
-		max-height: 90vh;
 		padding: var(--padding);
 		width: calc(880px - calc(--padding * 2));
 		z-index: 2008;

src/lib/components/GlobalSearch.svelte

@@ -101,7 +101,7 @@
 			<Input label="" bind:value={filterString} placeholder="attribute" />
 
 			<ul>
-				{#each filteredchildren as element, index (element?.name)}
+				{#each filteredchildren as element, index (element)}
 					<li class={index === focusIndex ? 'focus' : ''}>
 						<h3>{element?.name}</h3>
 

src/lib/components/Input.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	export let label: string;
-	export let value: string;
 	export let placeholder: string;
+	export let value: string = '';
 	export let required = false;
-	export let icon: unknown;
+	export let icon: unknown = null;
 
 	let focus = false;
 </script>

src/lib/components/LiveImage.svelte

@@ -21,8 +21,8 @@
 
 			imageSource = reader?.result || '';
 			if (imageSource === '') {
-				console.log("no image data, returning")
+				console.log('no image data, returning');
-				return
+				return;
 			}
 
 			// set imageSource to image element
@@ -82,12 +82,14 @@
 	{#if !fullscreen}
 		<img on:click={() => (fullscreen = !fullscreen)} src={String(imageSource)} id="live-image" />
 	{:else}
+		<div class="fullscreen-container">
 			<Dialog title="Live stream of printer" on:close={() => (fullscreen = false)}>
 				<img style="width: 100%;" src={String(imageSource)} id="live-image" />
 				<span>Last update {timestamp}s ago</span>
 			</Dialog>
 
 			<img src={String(grey400x225)} />
+		</div>
 	{/if}
 	<span>Last update {timestamp}s ago</span>
 </div>
@@ -101,4 +103,8 @@
 	span {
 		display: block;
 	}
+
+	:global(.fullscreen-container .dialog > div) {
+		max-width: unset;
+	}
 </style>

src/lib/components/Section.svelte

@@ -10,7 +10,9 @@
 				<h2>{title}</h2>
 				<slot name="top-left" />
 			</div>
+			{#if description && description?.length > 0}
 				<label>{description}</label>
+			{/if}
 		</div>
 	{/if}
 

src/lib/components/Table.svelte

@@ -1,10 +1,4 @@
 <script lang="ts">
-	import Dialog from './Dialog.svelte';
-	import { goto } from '$app/navigation';
-	import Certificate from '$lib/icons/certificate.svelte';
-	import { daysUntil } from '$lib/utils/conversion';
-	import JsonViewer from './JsonViewer.svelte';
-
 	export let title = '';
 	export let description = '';
 	export let columns: Array<string> | object;
@@ -12,7 +6,6 @@
 	export let links: Array<string> = [];
 	export let footer = '';
 
-	const hasLinks = links?.length > 0;
 	let displayColumns: string[] = [];
 	if (typeof columns === 'object' && !Array.isArray(columns)) {
 		displayColumns = Object.values(columns);
@@ -21,13 +14,17 @@
 </script>
 
 <div class="main-container">
+	{#if title?.length || description?.length}
 		<div class="header">
 			<h2>{title}</h2>
 			<div class="description">{description}</div>
 		</div>
+	{/if}
+
 	<div class="actions">
 		<slot name="actions"></slot>
 	</div>
+
 	<table>
 		<thead>
 			<tr>

src/lib/interfaces/proxmox.ts

@@ -115,4 +115,6 @@ export interface Node {
 	type: string;
 	ip: string;
 	level: string;
+	vms: Array<VM>;
+	lxcs: Array<LXC>;
 }

src/lib/styles/card.scss

@@ -0,0 +1,167 @@
+@keyframes pulse-live {
+	0% {
+		box-shadow: 0 0 0 0 var(--pulse);
+	}
+	70% {
+		box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
+	}
+	100% {
+		box-shadow: 0 0 0 0 rgba(0, 212, 57, 0);
+	}
+}
+
+@mixin pulse-dot {
+	&::after {
+		content: '';
+		top: 50%;
+		margin-left: 0.4rem;
+		position: absolute;
+		display: block;
+		border-radius: 50%;
+		background-color: var(--color);
+		border-radius: 50%;
+		transform: translate(-50%, -50%);
+		animation: pulse-live 2s infinite;
+		height: 16px;
+		width: 16px;
+	}
+}
+
+.card {
+	background: #fbf6f4;
+	box-shadow: var(
+		--str-shadow-s,
+		0px 0px 2px #22242714,
+		0px 1px 4px #2224271f,
+		0px 4px 8px #22242729
+	);
+	pointer-events: all;
+	cursor: auto;
+}
+
+.header {
+	display: flex;
+	padding: 0.75rem;
+	background-color: white;
+	align-items: center;
+	font-size: 16px;
+
+	.icon {
+		height: 24px;
+		width: 24px;
+		margin-right: 0.75rem;
+	}
+
+	.subtle {
+		margin-left: 0.25rem;
+		color: rgba(0, 0, 0, 0.4);
+		font-weight: 500;
+		font-size: 0.9rem;
+	}
+
+	.status {
+		height: 1rem;
+		width: 1rem;
+		border-radius: 50%;
+		margin-left: auto;
+		position: relative;
+		@include pulse-dot;
+
+		&.ok {
+			--color: var(--positive);
+			--pulse: var(--pulse-positive);
+		}
+		&.warning {
+			--color: var(--warning);
+			--pulse: var(--pulse-warning);
+		}
+		&.error {
+			--color: var(--negative);
+			--pulse: var(--pulse-negative);
+		}
+	}
+}
+
+.footer {
+	padding: 0.5rem;
+	background-color: white;
+}
+
+.resource {
+	display: grid;
+	grid-template-columns: auto auto;
+	padding: 0.5rem;
+	background-color: var(--bg);
+
+	row-gap: 6px;
+	max-width: 330px;
+
+	> div,
+	span {
+		display: flex;
+		padding: 0 0.5rem;
+	}
+}
+
+:global(.resource .title svg) {
+	height: 1rem;
+	width: 1rem;
+}
+
+.footer {
+	display: flex;
+	align-items: center;
+	justify-content: space-evenly;
+	flex-wrap: wrap;
+	gap: 0.5rem;
+
+	margin-top: auto;
+	background: white;
+	padding: 0.5rem;
+	border-bottom-left-radius: 0.25rem;
+	border-bottom-right-radius: 0.25rem;
+
+	button {
+		border: none;
+		position: relative;
+		background: transparent;
+		height: unset;
+		border-radius: 0.5rem;
+		display: inline-block;
+		text-decoration: none;
+		padding: 0 0.5rem;
+		flex: 1;
+
+		span {
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			width: 100%;
+			height: 1.5rem;
+			padding: 0 0.5rem;
+			margin-left: -0.5rem;
+			border: 1px solid #eaddd5;
+			border-radius: inherit;
+			white-space: nowrap;
+			cursor: pointer;
+			font-weight: 700;
+		}
+
+		&::after {
+			content: '';
+			position: absolute;
+			right: 0;
+			top: 0;
+			border-radius: 0.5rem;
+			width: 100%;
+			height: 100%;
+			transition: transform 0.1s ease;
+			will-change: box-shadow 0.25s;
+			pointer-events: none;
+		}
+	}
+}
+
+.positive {
+	color: #077c35;
+}

src/routes/cluster/+page.svelte

@@ -21,8 +21,6 @@
 	let nodes = $derived(rawNodes.filter((n) => n.metadata.name.includes(filterLC)));
 
 	onMount(() => {
-		console.log(deployments);
-
 		window.elements = deployments
 			.map((d) => {
 				return {

static/style.css

@@ -37,6 +37,9 @@
 	--positive: #00d439;
 	--negative: #ff5449;
 	--warning: #ffa312;
+	--pulse-positive: rgba(0, 212, 57, 0.7);
+	--pulse-negative: rgba(255, 84, 73, 0.7);
+	--pulse-warning: rgba(255, 163, 18, 0.7);
 
 	--border: 1px solid #eaddd5;
 	--border-radius: 0.75rem;