From 2674b7ca9258028a2c433bc9e2a4b749954da9fe Mon Sep 17 00:00:00 2001
From: Alex Freska <alex.freska@gmail.com>
Date: Fri, 27 Oct 2023 12:42:14 +0100
Subject: [PATCH] feat: renterd alert hints

---
 .changeset/dull-plants-fail.md             |  5 +++++
 apps/renterd/dialogs/AlertsDialog.tsx      | 20 +++++++++++++++++++-
 apps/website/components/DownloadSelect.tsx |  7 +------
 3 files changed, 25 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/dull-plants-fail.md

diff --git a/.changeset/dull-plants-fail.md b/.changeset/dull-plants-fail.md
new file mode 100644
index 000000000..dfc1e8d1f
--- /dev/null
+++ b/.changeset/dull-plants-fail.md
@@ -0,0 +1,5 @@
+---
+'renterd': minor
+---
+
+Alerts are now more concise and show an actionable hint when available.
diff --git a/apps/renterd/dialogs/AlertsDialog.tsx b/apps/renterd/dialogs/AlertsDialog.tsx
index c88101e13..e80305bc1 100644
--- a/apps/renterd/dialogs/AlertsDialog.tsx
+++ b/apps/renterd/dialogs/AlertsDialog.tsx
@@ -89,10 +89,11 @@ export function AlertsDialog({ open, onOpenChange }: Props) {
 }
 
 const dataFieldOrder = [
+  'hint',
   'origin',
   'hostKey',
   'contractID',
-  'account',
+  'accountID',
   'slabKey',
   'additions',
   'removals',
@@ -273,6 +274,23 @@ const dataFields: Record<
       )
     },
   },
+  hint: {
+    render: ({ value }: { value: string }) => (
+      <div className="flex flex-col w-full gap-2">
+        <Text color="contrast">{value}</Text>
+      </div>
+    ),
+  },
+  allowance: {
+    render: ({ value }: { value: string }) => (
+      <div className="flex justify-between w-full gap-2">
+        <Text color="subtle" ellipsis>
+          allowance
+        </Text>
+        <ValueSc variant="value" value={new BigNumber(value)} />
+      </div>
+    ),
+  },
   balance: {
     render: ({ value }: { value: string }) => (
       <div className="flex justify-between w-full gap-2">
diff --git a/apps/website/components/DownloadSelect.tsx b/apps/website/components/DownloadSelect.tsx
index 456ecd6fe..eaff5eadf 100644
--- a/apps/website/components/DownloadSelect.tsx
+++ b/apps/website/components/DownloadSelect.tsx
@@ -22,12 +22,7 @@ export function DownloadSelect({ daemon, release, testnetOnly }: Props) {
   const [download, setDownload] = useState(downloadLinks[0])
 
   return (
-    <div
-      className="flex"
-      style={{
-        containerType: 'normal',
-      }}
-    >
+    <div className="flex">
       <ControlGroup>
         <Button state="waiting" className="hidden @sm:flex">
           {release.tag_name}