update look of the buttons

plugins/multi-scrobbler/src/ui/pages/Settings.tsx

@@ -8,6 +8,7 @@ import {
   TableRowGroup,
   TableRow,
   TableSwitchRow,
+  TableCheckboxRow,
   ScrollView,
 } from "./pages/components/TableComponents";
 
@@ -62,7 +63,6 @@ class ServiceFactory {
 
   static async testService(service: ServiceType): Promise<boolean> {
     try {
-      // Mock implementation - you can replace with actual service testing
       switch (service) {
         case "lastfm":
           return await this.testLastFmConnection();
@@ -82,9 +82,7 @@ class ServiceFactory {
   private static async testLastFmConnection(): Promise<boolean> {
     const username = getStorage("username");
     const apiKey = getStorage("apiKey");
-
     if (!username || !apiKey) return false;
-
     try {
       const response = await fetch(
         `https://ws.audioscrobbler.com/2.0/?method=user.getinfo&user=${username}&api_key=${apiKey}&format=json`,
@@ -100,11 +98,8 @@ class ServiceFactory {
   private static async testLibreFmConnection(): Promise<boolean> {
     const username = getStorage("librefmUsername");
     const apiKey = getStorage("librefmApiKey");
-
     if (!username || !apiKey) return false;
-
     try {
-      // Libre.fm uses similar API to Last.fm
       const response = await fetch(
         `https://libre.fm/2.0/?method=user.getinfo&user=${username}&api_key=${apiKey}&format=json`,
       );
@@ -119,24 +114,16 @@ class ServiceFactory {
   private static async testListenBrainzConnection(): Promise<boolean> {
     const username = getStorage("listenbrainzUsername");
     const token = getStorage("listenbrainzToken");
-
     if (!username) return false;
-
     try {
       const headers: Record<string, string> = {
         "Content-Type": "application/json",
       };
-
+      if (token) headers["Authorization"] = `Token ${token}`;
-      if (token) {
-        headers["Authorization"] = `Token ${token}`;
-      }
-
       const response = await fetch(
         `https://api.listenbrainz.org/1/user/${username}/listen-count`,
         { headers },
       );
-
-      // If we get any response, the connection is valid
       return response.status === 200;
     } catch (error) {
       console.error("ListenBrainz connection test failed:", error);
@@ -156,21 +143,18 @@ export default function Settings() {
 
   const getCredentialStatus = (service: ServiceType) => {
     switch (service) {
-      case "lastfm": {
+      case "lastfm":
         return getStorage("username") && getStorage("apiKey")
           ? "✅ Configured"
           : "❌ Missing credentials";
-      }
+      case "librefm":
-      case "librefm": {
         return getStorage("librefmUsername") && getStorage("librefmApiKey")
           ? "✅ Configured"
           : "❌ Missing credentials";
-      }
+      case "listenbrainz":
-      case "listenbrainz": {
         return getStorage("listenbrainzUsername")
           ? "✅ Configured"
           : "❌ Missing username";
-      }
       default:
         return "❓ Unknown";
     }
@@ -191,13 +175,15 @@ export default function Settings() {
           />
           {(["lastfm", "librefm", "listenbrainz"] as ServiceType[]).map(
             (service) => (
-              <TableSwitchRow
+              <TableCheckboxRow
                 key={service}
                 label={serviceFactory.getServiceDisplayName(service)}
                 subLabel={getCredentialStatus(service)}
-                value={currentService === service}
+                // Single choice logic: check if this matches current service
-                onValueChange={(value: boolean) => {
+                checked={currentService === service}
-                  if (value && service !== currentService) {
+                onPress={() => {
+                  // Only update if clicking a service that isn't already selected
+                  if (service !== currentService) {
                     setStorage("service", service);
                     forceUpdate();
                   }
@@ -308,7 +294,7 @@ export default function Settings() {
             subLabel="Show off your music status from multiple services"
           />
           <TableRow label="Author" subLabel="kmmiio99o" />
-          <TableRow label="Version" subLabel="1.3.1" />
+          <TableRow label="Version" subLabel="1.3.2" />
         </TableRowGroup>
       </Stack>
     </ScrollView>

plugins/multi-scrobbler/src/ui/pages/pages/RPCCustomizationSettingsPage.tsx

@@ -4,7 +4,7 @@ import {
   ScrollView,
   Stack,
   TableRowGroup,
-  TableSwitchRow,
+  TableCheckboxRow,
   TableRow,
 } from "./components/TableComponents";
 import { plugin } from "@vendetta";
@@ -25,23 +25,20 @@ export default function RPCCustomizationSettingsPage() {
     Constants.DEFAULT_SETTINGS.showTimestamp,
   );
 
-  const handleListeningToChange = (value: boolean) => {
+  const handleListeningToChange = () => {
-    setStorage("listeningTo", value);
+    const newValue = !isListeningTo;
+    setStorage("listeningTo", newValue);
 
-    // If turning off "Show as Listening", also turn off "Show Timestamp"
+    if (!newValue && showTimestamp) {
-    if (!value && showTimestamp) {
       setStorage("showTimestamp", false);
     }
 
     forceUpdate();
   };
 
-  const handleTimestampChange = (value: boolean) => {
+  const handleTimestampChange = () => {
-    // Only allow turning on timestamp if "Show as Listening" is enabled
+    if (!isListeningTo) return;
-    if (value && !isListeningTo) {
+    setStorage("showTimestamp", !showTimestamp);
-      return;
-    }
-    setStorage("showTimestamp", value);
     forceUpdate();
   };
 
@@ -50,23 +47,24 @@ export default function RPCCustomizationSettingsPage() {
       <RPCPreview />
       <Stack spacing={8}>
         <TableRowGroup title="RPC Display Options">
-          <TableSwitchRow
+          <TableCheckboxRow
             label="Show as Listening"
             subLabel="Display as 'Listening to' instead of 'Playing'"
-            value={isListeningTo}
+            checked={isListeningTo}
-            onValueChange={handleListeningToChange}
+            onPress={handleListeningToChange}
           />
-          <TableSwitchRow
+
+          <TableCheckboxRow
             label="Show Tooltip Text"
             subLabel="Show album name and track duration in Discord activity tooltip"
-            value={getStorage("showLargeText", true)}
+            checked={getStorage("showLargeText", true)}
-            onValueChange={(value: boolean) => {
+            onPress={() => {
-              setStorage("showLargeText", value);
+              const current = getStorage("showLargeText", true);
+              setStorage("showLargeText", !current);
               forceUpdate();
             }}
           />
 
-          {/* Warning row when timestamp is disabled */}
           {!isListeningTo && (
             <TableRow
               label="Timestamp Unavailable"
@@ -76,30 +74,32 @@ export default function RPCCustomizationSettingsPage() {
             />
           )}
 
-          <TableSwitchRow
+          <TableCheckboxRow
             label="Show Timestamp"
             subLabel="Display track progress and duration"
-            value={showTimestamp}
+            checked={showTimestamp}
-            onValueChange={handleTimestampChange}
+            onPress={handleTimestampChange}
             disabled={!isListeningTo}
-            dimmed={!isListeningTo}
           />
 
-          <TableSwitchRow
+          <TableCheckboxRow
             label="Show Album in Tooltip"
             subLabel="Include album name in the tooltip text"
-            value={getStorage("showAlbumInTooltip", true)}
+            checked={getStorage("showAlbumInTooltip", true)}
-            onValueChange={(value: boolean) => {
+            onPress={() => {
-              setStorage("showAlbumInTooltip", value);
+              const current = getStorage("showAlbumInTooltip", true);
+              setStorage("showAlbumInTooltip", !current);
               forceUpdate();
             }}
           />
-          <TableSwitchRow
+
+          <TableCheckboxRow
             label="Show Duration in Tooltip"
             subLabel="Include track duration in the tooltip text"
-            value={getStorage("showDurationInTooltip", true)}
+            checked={getStorage("showDurationInTooltip", true)}
-            onValueChange={(value: boolean) => {
+            onPress={() => {
-              setStorage("showDurationInTooltip", value);
+              const current = getStorage("showDurationInTooltip", true);
+              setStorage("showDurationInTooltip", !current);
               forceUpdate();
             }}
           />

plugins/multi-scrobbler/src/ui/pages/pages/components/TableComponents.tsx

@@ -1,8 +1,15 @@
 import { findByProps } from "@vendetta/metro";
 
 export const { ScrollView } = findByProps("ScrollView");
-export const { TableRowGroup, TableSwitchRow, Stack, TableRow } = findByProps(
+export const {
+  TableRowGroup,
+  TableSwitchRow,
+  TableCheckboxRow,
+  Stack,
+  TableRow,
+} = findByProps(
   "TableSwitchRow",
+  "TableCheckboxRow",
   "TableRowGroup",
   "Stack",
   "TableRow",