From 5c8d6691f44d07c401a778907bab5bf276705e2a Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Thu, 23 Jun 2022 21:41:27 -0400
Subject: [PATCH] fix(striker-ui): add link to Anvil on each server list item

---
 striker-ui/pages/index.tsx      | 25 +++++++++++++++++++++----
 striker-ui/types/APIServer.d.ts |  2 ++
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/striker-ui/pages/index.tsx b/striker-ui/pages/index.tsx
index 3b355955..c56e1194 100644
--- a/striker-ui/pages/index.tsx
+++ b/striker-ui/pages/index.tsx
@@ -8,6 +8,7 @@ import { DIVIDER } from '../lib/consts/DEFAULT_THEME';
 
 import { Preview } from '../components/Display';
 import Header from '../components/Header';
+import Link from '../components/Link';
 import OutlinedInput from '../components/OutlinedInput';
 import { Panel, PanelHeader } from '../components/Panels';
 import periodicFetch from '../lib/fetchers/periodicFetch';
@@ -30,7 +31,7 @@ const createServerPreviewContainer = (
       flexWrap: 'wrap',
 
       '& > *': {
-        width: { xs: '20em', md: '30em' },
+        width: { xs: '20em', md: '24em' },
       },
 
       '& > :not(:last-child)': {
@@ -39,14 +40,30 @@ const createServerPreviewContainer = (
     }}
   >
     {servers.map(
-      ({ isScreenshotStale, screenshot, serverName, serverUUID }) => (
+      ({
+        anvilName,
+        isScreenshotStale,
+        screenshot,
+        serverName,
+        serverUUID,
+      }) => (
         <Preview
-          key={`server-preview-${serverUUID}`}
+          externalPreview={screenshot}
+          headerEndAdornment={
+            <Link
+              href="/anvil"
+              sx={{
+                opacity: 0.7,
+              }}
+            >
+              {anvilName}
+            </Link>
+          }
           isExternalPreviewStale={isScreenshotStale}
           isFetchPreview={false}
           isShowControls={false}
           isUseInnerPanel
-          externalPreview={screenshot}
+          key={`server-preview-${serverUUID}`}
           serverName={serverName}
           serverUUID={serverUUID}
           setMode={() => {
diff --git a/striker-ui/types/APIServer.d.ts b/striker-ui/types/APIServer.d.ts
index 114f8947..d4408490 100644
--- a/striker-ui/types/APIServer.d.ts
+++ b/striker-ui/types/APIServer.d.ts
@@ -1,4 +1,6 @@
 type ServerOverviewMetadata = {
+  anvilName: string;
+  anvilUUID: string;
   serverHostUUID: string;
   serverName: string;
   serverState: string;