small cleanup

src/index.tsx

@@ -13,18 +13,21 @@ import {
   toaster,
   // routerHook
 } from "@decky/api"
-// import { call, callable } from "@decky/backend";
 import { useState } from "react";
 import { FaShip } from "react-icons/fa";
 
 // import logo from "../assets/logo.png";
 
-// interface AddMethodArgs {
-//   left: number;
-//   right: number;
-// }
+// This function calls the python function "add", which takes in two numbers and returns their sum (as a number)
+// Note the type annotations:
+//  the first one: [first: number, second: number] is for the arguments
+//  the second one: number is for the return value
 const add = callable<[first: number, second: number], number>("add");
+
+// This function calls the python function "start_timer", which takes in no arguments and returns nothing.
+// It starts a (python) timer which eventually emits the event 'timer_event'
 const startTimer = callable<[], void>("start_timer");
+
 function Content() {
   const [result, setResult] = useState<number | undefined>();
 
@@ -40,7 +43,7 @@ function Content() {
           layout="below"
           onClick={onClick}
         >
-          {result || "Add two numbers via Python"}
+          {result ?? "Add two numbers via Python"}
         </ButtonItem>
       </PanelSectionRow>
       <PanelSectionRow>
@@ -58,7 +61,7 @@ function Content() {
         </div>
       </PanelSectionRow> */}
 
-      <PanelSectionRow>
+      {/*<PanelSectionRow>
         <ButtonItem
           layout="below"
           onClick={() => {
@@ -68,34 +71,44 @@ function Content() {
         >
           Router
         </ButtonItem>
-      </PanelSectionRow>
+      </PanelSectionRow>*/}
     </PanelSection>
   );
 };
 
 export default definePlugin(() => {
+  console.log("Template plugin initializing, this is called once on frontend startup")
+
   // serverApi.routerHook.addRoute("/decky-plugin-test", DeckyPluginRouterTest, {
   //   exact: true,
   // });
-  // console.log("init plugin", call, callable)
+
+  // Add an event listener to the "timer_event" event from the backend
   const listener = addEventListener<[
     test1: string,
     test2: boolean,
     test3: number
-  ]>("test_event", (test1, test2, test3) => {
-    console.log("Template got event", test1, test2, test3)
+  ]>("timer_event", (test1, test2, test3) => {
+    console.log("Template got timer_event with:", test1, test2, test3)
     toaster.toast({
-      title: "template got event",
+      title: "template got timer_event",
       body: `${test1}, ${test2}, ${test3}`
     });
   });
+
   return {
-    title: <div className={staticClasses.Title}>API v2 Example Plugin</div>,
+    // The name shown in various decky menus
+    name: "Test Plugin",
+    // The element displayed at the top of your plugin's menu
+    titleView: <div className={staticClasses.Title}>Decky Example Plugin</div>,
+    // The content of your plugin's menu
     content: <Content />,
+    // The icon displayed in the plugin list
     icon: <FaShip />,
+    // The function triggered when your plugin unloads
     onDismount() {
       console.log("Unloading")
-      removeEventListener("test_event", listener);
+      removeEventListener("timer_event", listener);
       // serverApi.routerHook.removeRoute("/decky-plugin-test");
     },
   };