From 0964715817eefb561eec678e21c08da40e2af52b Mon Sep 17 00:00:00 2001
From: Kurt Himebauch <136133082+xXJSONDeruloXx@users.noreply.github.com>
Date: Sat, 9 Aug 2025 20:57:23 -0400
Subject: refactor: use Decky UI components

---
 src/index.tsx | 154 +++++++++++++++++-----------------------------------------
 1 file changed, 45 insertions(+), 109 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index ed3327f..be40c3a 100755
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,13 +1,20 @@
-import {useEffect, useState} from "react";
-import {FaClipboardList} from "react-icons/fa";
-import remarkHtml from "remark-html"
-import remarkParse from "remark-parse"
-import remarkGfm from "remark-gfm"
-import {unified} from "unified"
-import {patchPartnerEventStore} from "./PartnerEventStorePatch";
-import {staticClasses} from "@decky/ui";
-import {definePlugin} from "@decky/api"
-import {fetchReleases} from "./FetchReleases";
+import { useEffect, useState } from "react";
+import { FaClipboardList } from "react-icons/fa";
+import remarkHtml from "remark-html";
+import remarkParse from "remark-parse";
+import remarkGfm from "remark-gfm";
+import { unified } from "unified";
+import { patchPartnerEventStore } from "./PartnerEventStorePatch";
+import {
+  staticClasses,
+  PanelSection,
+  PanelSectionRow,
+  ButtonItem,
+  Field,
+  SteamSpinner,
+} from "@decky/ui";
+import { definePlugin } from "@decky/api";
+import { fetchReleases } from "./FetchReleases";
 
 function Content() {
   const [changelogHtml, setChangelogHtml] = useState<string | null>(null);
@@ -64,33 +71,10 @@ function Content() {
   };
 
   return (
-    <div
-      style={{
-        padding: "10px",
-        width: "100%",
-        maxWidth: "800px", // Limit the width
-        margin: "0 auto", // Center the container
-        height: "100%",
-        overflowY: "auto",
-        backgroundColor: "#121212",
-        color: "#ffffff",
-        fontFamily: "Arial, sans-serif",
-        wordWrap: "break-word", // Break long words
-        overflowX: "hidden", // Prevent horizontal scrolling
-      }}
-    >
-      <h2>Bazzite Release Notes</h2>
-      <div style={{display: "flex", gap: "10px", marginBottom: "15px"}}>
-        <button
-          style={{
-            padding: "10px 20px",
-            backgroundColor: "#0078D7",
-            color: "#ffffff",
-            border: "none",
-            borderRadius: "5px",
-            cursor: "pointer",
-            fontSize: "16px",
-          }}
+    <PanelSection title="Bazzite Release Notes">
+      <PanelSectionRow>
+        <ButtonItem
+          layout="below"
           onClick={() =>
             window.open(
               "https://github.com/ublue-os/bazzite/releases",
@@ -99,81 +83,33 @@ function Content() {
           }
         >
           View All Release Notes
-        </button>
-        <button
-          style={{
-            padding: "10px 20px",
-            backgroundColor: isRefreshing ? "#CCCCCC" : "#28A745",
-            color: "#ffffff",
-            border: "none",
-            borderRadius: "5px",
-            cursor: isRefreshing ? "not-allowed" : "pointer",
-            fontSize: "16px",
-          }}
-          onClick={refreshChangelog}
+        </ButtonItem>
+      </PanelSectionRow>
+      <PanelSectionRow>
+        <ButtonItem
+          layout="below"
           disabled={isRefreshing}
+          onClick={refreshChangelog}
         >
           {isRefreshing ? "Refreshing..." : "Refresh"}
-        </button>
-      </div>
-      {error ? (
-        <p style={{color: "red"}} aria-live="polite">
-          {error}
-        </p>
-      ) : changelogHtml ? (
-        <div
-          style={{
-            backgroundColor: "#1e1e1e",
-            padding: "10px",
-            borderRadius: "5px",
-            color: "#ffffff",
-            fontFamily: "Arial, sans-serif",
-            fontSize: "14px",
-            lineHeight: "1.6",
-            wordWrap: "break-word", // Prevent long text from overflowing
-          }}
-        >
-          <style>
-            {`
-              h1, h2, h3 {
-                color: #61dafb;
-                margin: 0 0 10px;
-              }
-              p {
-                margin: 0 0 10px;
-              }
-              ul, ol {
-                margin: 10px 0 10px 20px;
-              }
-              li {
-                margin: 5px 0;
-              }
-              pre {
-                background-color: #282c34;
-                padding: 10px;
-                border-radius: 5px;
-                overflow-x: auto;
-                color: #dcdcdc;
-              }
-              a {
-                color: #61dafb;
-                text-decoration: none;
-              }
-              a:hover {
-                text-decoration: underline;
-              }
-            `}
-          </style>
-          <div
-            dangerouslySetInnerHTML={{
-              __html: changelogHtml,
-            }}
-          ></div>
-        </div>
-      ) : (
-        <p aria-live="polite">Loading...</p>
-      )}
-    </div>
+        </ButtonItem>
+      </PanelSectionRow>
+      <PanelSectionRow>
+        {error ? (
+          <Field label="Error">{error}</Field>
+        ) : changelogHtml ? (
+          <Field>
+            <div
+              dangerouslySetInnerHTML={{
+                __html: changelogHtml,
+              }}
+            />
+          </Field>
+        ) : (
+          <SteamSpinner />
+        )}
+      </PanelSectionRow>
+    </PanelSection>
   );
 }
 
-- 
cgit v1.2.3