From 4058524d8348e4bf7544fcbc5137042a5dd4ec11 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 31 Oct 2024 10:15:10 -0500
Subject: [PATCH] Clean up copied gpu info output

---
 web/src/components/overlay/GPUInfoDialog.tsx | 10 +++++-----
 web/src/pages/System.tsx                     |  2 ++
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/web/src/components/overlay/GPUInfoDialog.tsx b/web/src/components/overlay/GPUInfoDialog.tsx
index 957d1e681..3821579e2 100644
--- a/web/src/components/overlay/GPUInfoDialog.tsx
+++ b/web/src/components/overlay/GPUInfoDialog.tsx
@@ -10,6 +10,7 @@ import ActivityIndicator from "../indicators/activity-indicator";
 import { GpuInfo, Nvinfo, Vainfo } from "@/types/stats";
 import { Button } from "../ui/button";
 import copy from "copy-to-clipboard";
+import { toast } from "sonner";
 
 type GPUInfoDialogProps = {
   showGpuInfo: boolean;
@@ -30,12 +31,11 @@ export default function GPUInfoDialog({
 
   const onCopyInfo = async () => {
     copy(
-      JSON.stringify(gpuType == "vainfo" ? vainfo : nvinfo).replace(
-        /[\\\s]+/gi,
-        "",
-      ),
+      JSON.stringify(gpuType == "vainfo" ? vainfo : nvinfo)
+        .replace(/\\t/g, "\t")
+        .replace(/\\n/g, "\n"),
     );
-    setShowGpuInfo(false);
+    toast.success("Copied GPU info to clipboard.");
   };
 
   if (gpuType == "vainfo") {
diff --git a/web/src/pages/System.tsx b/web/src/pages/System.tsx
index ab5c86f6a..23d1b7e6a 100644
--- a/web/src/pages/System.tsx
+++ b/web/src/pages/System.tsx
@@ -13,6 +13,7 @@ import useOptimisticState from "@/hooks/use-optimistic-state";
 import CameraMetrics from "@/views/system/CameraMetrics";
 import { useHashState } from "@/hooks/use-overlay-state";
 import { capitalizeFirstLetter } from "@/utils/stringUtil";
+import { Toaster } from "@/components/ui/sonner";
 
 const metrics = ["general", "storage", "cameras"] as const;
 type SystemMetric = (typeof metrics)[number];
@@ -42,6 +43,7 @@ function System() {
 
   return (
     <div className="flex size-full flex-col p-2">
+      <Toaster position="top-center" />
       <div className="relative flex h-11 w-full items-center justify-between">
         {isMobile && (
           <Logo className="absolute inset-x-1/2 h-8 -translate-x-1/2" />