From f0d2ca0e569ac5c056c9a41b8ce8310d5447c9a0 Mon Sep 17 00:00:00 2001
From: Neshura <neshura@neshweb.net>
Date: Sat, 6 Jan 2024 03:05:30 +0100
Subject: [PATCH] Adjust ServerCard for usage with Server list

---
 src/lib/components/ServerCard.svelte  | 92 +++++++++++++++++----------
 src/lib/components/ServiceCard.svelte |  4 +-
 2 files changed, 60 insertions(+), 36 deletions(-)

diff --git a/src/lib/components/ServerCard.svelte b/src/lib/components/ServerCard.svelte
index 16da17e..76cb242 100644
--- a/src/lib/components/ServerCard.svelte
+++ b/src/lib/components/ServerCard.svelte
@@ -1,12 +1,13 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-	import { OpenInNewWindow } from 'radix-icons-svelte';
+	import { Clipboard, Copy, OpenInNewWindow } from 'radix-icons-svelte';
 	import { quintInOut } from 'svelte/easing';
 	import { slide } from 'svelte/transition';
 	import { IconType, type Server } from '$lib/types/data-types';
 	import { Skeleton } from '$lib/components/ui/skeleton';
 	import type { Heartbeat } from '$lib/types/uptime-kuma-types';
+	import { Button } from '$lib/components/ui/button';
 
 	let { server, icons, monitor } = $props<{
 		server: Server;
@@ -24,6 +25,10 @@
 
 	let img_source: string = $state('');
 
+	function copyToClipboard(value: string) {
+		navigator.clipboard.writeText(value);
+	}
+
 	function checkForImage(server: Server) {
 		const rootSplit = server.icon.split('/');
 		const root = rootSplit[rootSplit.length - 1];
@@ -60,7 +65,7 @@
 </script>
 
 <div
-	class="flex h-48 w-[28rem] flex-col gap-y-2 rounded-xl border-t-4
+	class="flex h-48 w-[28rem] flex-col gap-y-3 rounded-xl border-t-4
 		{status == 99
 		? 'border-primary'
 		: status == 0
@@ -74,7 +79,7 @@
 						: 'border-maintenance'}
 		z-0 bg-black/55 p-4 backdrop-blur-sm"
 >
-	<div class="flex flex-row justify-between pb-4">
+	<div class="flex flex-row justify-between">
 		<div
 			class="flex flex-row items-center gap-1"
 			on:mouseover={() => (hover.title = true)}
@@ -92,17 +97,21 @@
 					<Skeleton class="h-6 w-6 rounded-full" />
 				{/if}
 			{:else}{/if}
-			<a href={server.href} class="font-bold {!hover.title || 'text-secondary'}">{server.name}</a>
-			{#if hover.title}
-				<div
-					transition:slide={{ delay: 100, duration: 200, easing: quintInOut, axis: 'x' }}
-					class="grid items-center"
-				>
-					<OpenInNewWindow
-						color={hover.title ? 'hsl(var(--secondary))' : 'hsl(var(--primary)'}
-						class="self-center"
-					/>
-				</div>
+			{#if typeof server.href !== 'undefined'}
+				<a href={server.href} class="font-bold {!hover.title || 'text-secondary'}">{server.name}</a>
+				{#if hover.title}
+					<div
+						transition:slide={{ delay: 100, duration: 200, easing: quintInOut, axis: 'x' }}
+						class="grid items-center"
+					>
+						<OpenInNewWindow
+							color={hover.title ? 'hsl(var(--secondary))' : 'hsl(var(--primary)'}
+							class="self-center"
+						/>
+					</div>
+				{/if}
+			{:else}
+				<h2 class="font-bold">{server.name}</h2>
 			{/if}
 		</div>
 
@@ -142,27 +151,42 @@
 		{/if}
 	</div>
 	<p class="text-wrap text-center text-sm">{server.desc}</p>
-	<p class="text-center text-sm font-bold text-destructive">{server.warn}</p>
+	{#if typeof server.connection !== 'undefined'}
+		<div class="flex w-full flex-col items-center">
+			<Button
+				variant="ghost"
+				class="	flex w-fit flex-row items-center gap-1 rounded-sm border px-2 py-1 text-center font-mono text-sm font-bold
+							hover:border-primary hover:bg-transparent hover:text-primary/60
+							active:border-secondary active:bg-black/70 active:text-secondary"
+				on:click={() => copyToClipboard(server.connection)}
+			>
+				{server.connection}
+				<Copy />
+			</Button>
+		</div>
+	{/if}
 	<div class="grid {server.extLink ? 'grid-cols-2' : 'grid-cols-1'} mt-auto justify-items-center">
-		<a
-			class="flex flex-row rounded-md border-x-2 px-2 text-sm hover:border-secondary hover:text-secondary"
-			href={server.href}
-			on:mouseover={() => (hover.link = true)}
-			on:mouseleave={() => (hover.link = false)}
-		>
-			Open
-			{#if hover.link}
-				<div
-					transition:slide={{ delay: 100, duration: 200, easing: quintInOut, axis: 'x' }}
-					class="grid items-center pl-1 pr-0"
-				>
-					<OpenInNewWindow
-						color={hover.link ? 'hsl(var(--secondary))' : 'hsl(var(--primary)'}
-						class="self-center"
-					/>
-				</div>
-			{/if}
-		</a>
+		{#if typeof server.href !== 'undefined'}
+			<a
+				class="flex flex-row rounded-md border-x-2 px-2 text-sm hover:border-secondary hover:text-secondary"
+				href={server.href}
+				on:mouseover={() => (hover.link = true)}
+				on:mouseleave={() => (hover.link = false)}
+			>
+				Open
+				{#if hover.link}
+					<div
+						transition:slide={{ delay: 100, duration: 200, easing: quintInOut, axis: 'x' }}
+						class="grid items-center pl-1 pr-0"
+					>
+						<OpenInNewWindow
+							color={hover.link ? 'hsl(var(--secondary))' : 'hsl(var(--primary)'}
+							class="self-center"
+						/>
+					</div>
+				{/if}
+			</a>
+		{/if}
 		{#if server.extLink}
 			<a
 				class="flex flex-row rounded-md border-x-2 px-2 text-sm hover:border-secondary hover:text-secondary"
diff --git a/src/lib/components/ServiceCard.svelte b/src/lib/components/ServiceCard.svelte
index 597c41a..86bceb8 100644
--- a/src/lib/components/ServiceCard.svelte
+++ b/src/lib/components/ServiceCard.svelte
@@ -57,7 +57,7 @@
 </script>
 
 <div
-	class="flex h-48 w-[28rem] flex-col gap-y-2 rounded-xl border-t-4
+	class="flex h-48 w-[28rem] flex-col gap-y-3 rounded-xl border-t-4
 		{status == 0
 		? 'border-offline'
 		: status == 1
@@ -69,7 +69,7 @@
 					: 'border-maintenance'}
 		z-0 bg-black/55 p-4 backdrop-blur-sm"
 >
-	<div class="flex flex-row justify-between pb-4">
+	<div class="flex flex-row justify-between">
 		<div
 			class="flex flex-row items-center gap-1"
 			on:mouseover={() => (hover.title = true)}