I TRIED SO HARD

plugins/Last.fm/src/ui/ChangelogView.tsx

@@ -1,49 +1,80 @@
 import { clipboard } from "@vendetta/metro/common";
 import { getAssetIDByName } from "@vendetta/ui/assets";
-import { ErrorBoundary, Forms, General } from "@vendetta/ui/components";
+import { Forms, General } from "@vendetta/ui/components";
 import { showToast } from "@vendetta/ui/toasts";
 import { changelog, currentVersion } from "../changelog";
 import { React } from "@vendetta/metro/common";
+import { findByProps } from "@vendetta/metro";
 
-const { FormRow, FormSection } = Forms;
-const { View, ScrollView, Text, TouchableOpacity } = General;
+const { TableRowGroup, TableRow, Stack } = findByProps(
+  "TableSwitchRow",
+  "TableRowGroup",
+  "Stack",
+  "TableRow",
+);
+const { ScrollView } = General;
 
 export default function ChangelogView() {
-    return (
-        <ErrorBoundary>
-            <ScrollView style={{ flex: 1 }}>
-                <FormSection title="CURRENT VERSION">
-                    <FormRow
-                        label={currentVersion}
-                        trailing={
-                            <TouchableOpacity
-                                onPress={() => {
-                                    clipboard.setString(currentVersion);
-                                    showToast("Version copied to clipboard", getAssetIDByName("toast_copy_link"));
-                                }}
-                            >
-                                <Text style={{ color: "#72767d", fontSize: 16 }}>Copy</Text>
-                            </TouchableOpacity>
-                        }
-                    />
-                </FormSection>
+  return (
+    <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 10 }}>
+      <Stack spacing={8}>
+        <TableRowGroup title="CURRENT VERSION">
+          <TableRow
+            label={currentVersion}
+            trailing={
+              <General.TouchableOpacity
+                onPress={() => {
+                  clipboard.setString(currentVersion);
+                  showToast(
+                    "Version copied to clipboard",
+                    getAssetIDByName("toast_copy_link"),
+                  );
+                }}
+              >
+                <General.Text style={{ color: "#72767d", fontSize: 16 }}>
+                  Copy
+                </General.Text>
+              </General.TouchableOpacity>
+            }
+          />
+        </TableRowGroup>
 
-                <FormSection title="CHANGELOG">
-                    {changelog.map((entry, index) => (
-                        <View key={index} style={{ padding: 16, borderBottomWidth: index === changelog.length - 1 ? 0 : 0.5, borderBottomColor: "#292929" }}>
-                            <View style={{ flexDirection: "row", justifyContent: "space-between", marginBottom: 8 }}>
-                                <Text style={{ color: "#fff", fontWeight: "bold" }}>Version {entry.version}</Text>
-                                <Text style={{ color: "#72767d" }}>{entry.date}</Text>
-                            </View>
-                            {entry.changes.map((change, changeIndex) => (
-                                <Text key={changeIndex} style={{ color: "#dcddde", marginLeft: 16, marginTop: 4 }}>
-                                    • {change}
-                                </Text>
-                            ))}
-                        </View>
-                    ))}
-                </FormSection>
-            </ScrollView>
-        </ErrorBoundary>
-    );
+        <TableRowGroup title="CHANGELOG">
+          {changelog.map((entry, index) => (
+            <Stack
+              key={index}
+              spacing={4}
+              style={{
+                padding: 12,
+                borderBottomWidth: index === changelog.length - 1 ? 0 : 0.5,
+                borderBottomColor: "#292929",
+              }}
+            >
+              <General.View
+                style={{
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                }}
+              >
+                <General.Text style={{ color: "#fff", fontWeight: "bold" }}>
+                  Version {entry.version}
+                </General.Text>
+                <General.Text style={{ color: "#72767d" }}>
+                  {entry.date}
+                </General.Text>
+              </General.View>
+              {entry.changes.map((change, changeIndex) => (
+                <General.Text
+                  key={changeIndex}
+                  style={{ color: "#dcddde", marginLeft: 8, marginTop: 2 }}
+                >
+                  • {change}
+                </General.Text>
+              ))}
+            </Stack>
+          ))}
+        </TableRowGroup>
+      </Stack>
+    </ScrollView>
+  );
 }

plugins/Last.fm/src/ui/pages/Settings.tsx

@@ -6,15 +6,21 @@ import { showToast } from "@vendetta/ui/toasts";
 import { React } from "@vendetta/metro/common";
 import { ScrollView, View, Linking } from "react-native";
 import { changelog, currentVersion } from "../../changelog";
+import { findByProps } from "@vendetta/metro";
+
+const { TableRowGroup, TableSwitchRow, Stack, TableRow } = findByProps(
+  "TableSwitchRow",
+  "TableRowGroup",
+  "Stack",
+  "TableRow",
+);
+const { TextInput } = findByProps("TextInput");
 
 import { currentSettings, pluginState } from "../..";
 import Constants from "../../constants";
 import { initialize } from "../../manager";
 import { lastfmClient } from "../../utils/lastfm";
 
-const { FormInput, FormRow, FormSwitch, FormSection, FormDivider, FormText } =
-  Forms;
-
 export default function Settings() {
   useProxy(currentSettings);
 
@@ -50,202 +56,130 @@ export default function Settings() {
   };
 
   return (
-    <ScrollView
-      style={{ flex: 1 }}
-      contentContainerStyle={{ paddingBottom: 20 }}
-      bounces={false}
-      showsVerticalScrollIndicator={true}
-    >
-      <FormSection title="Account Settings">
-        <FormInput
-          title="Last.fm Username"
-          placeholder="Enter your Last.fm username"
-          value={currentSettings.username}
-          onChange={(value: string) => saveSettings("username", value)}
-        />
-        <FormDivider />
-        <FormInput
-          title="API Key"
-          placeholder="Enter your Last.fm API key"
-          value={currentSettings.apiKey}
-          onChange={(value: string) => saveSettings("apiKey", value)}
-          secureTextEntry={true}
-        />
-        <FormText style={{ padding: 10, opacity: 0.5 }}>
-          Get your API key at: https://www.last.fm/api/account/create
-        </FormText>
-        <FormRow
-          label="Test Connection"
-          leading={<FormRow.Icon source={getAssetIDByName("ic_connection")} />}
-          trailing={loading ? <FormRow.Arrow loading /> : <FormRow.Arrow />}
-          onPress={testConnection}
-          disabled={loading}
-        />
-      </FormSection>
-
-      <FormSection title="Display Settings">
-        <FormInput
-          title="App Name"
-          placeholder={Constants.DEFAULT_SETTINGS.appName}
-          value={currentSettings.appName}
-          onChange={(value: string) => saveSettings("appName", value)}
-        />
-        <FormDivider />
-        <FormInput
-          title="Update Interval (seconds)"
-          placeholder={String(Constants.DEFAULT_SETTINGS.timeInterval)}
-          value={String(currentSettings.timeInterval)}
-          onChange={(value: string) => {
-            const interval = Number(value);
-            if (interval >= Constants.MIN_UPDATE_INTERVAL) {
-              saveSettings("timeInterval", interval);
-            } else {
-              showToast(
-                `Minimum interval is ${Constants.MIN_UPDATE_INTERVAL} seconds`,
-                getAssetIDByName("Small"),
-              );
-            }
-          }}
-          keyboardType="numeric"
-        />
-      </FormSection>
-
-      <FormSection title="Options">
-        <FormRow
-          label="Show 'Listening to' instead of 'Playing'"
-          leading={<FormRow.Icon source={getAssetIDByName("ic_music")} />}
-          trailing={
-            <FormSwitch
-              value={
-                currentSettings.listeningTo ??
-                Constants.DEFAULT_SETTINGS.listeningTo
-              }
-              onValueChange={(value: boolean) =>
-                saveSettings("listeningTo", value)
+    <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 10 }}>
+      <Stack spacing={8}>
+        <TableRowGroup title="Account Settings">
+          <Stack spacing={4}>
+            <TextInput
+              placeholder="Last.fm Username"
+              value={currentSettings.username}
+              onChangeText={(value: string) => saveSettings("username", value)}
+            />
+            <TextInput
+              placeholder="API Key"
+              value={currentSettings.apiKey}
+              onChangeText={(value: string) => saveSettings("apiKey", value)}
+              secureTextEntry={true}
+            />
+            <TableRow
+              label="Get API Key"
+              subLabel="https://www.last.fm/api/account/create"
+              onPress={() =>
+                Linking.openURL("https://www.last.fm/api/account/create")
               }
             />
-          }
-        />
-        <FormDivider />
-        <FormRow
-          label="Show Timestamp"
-          leading={<FormRow.Icon source={getAssetIDByName("ic_timeline")} />}
-          trailing={
-            <FormSwitch
-              value={
-                currentSettings.showTimestamp ??
-                Constants.DEFAULT_SETTINGS.showTimestamp
-              }
-              onValueChange={(value: boolean) =>
-                saveSettings("showTimestamp", value)
-              }
-            />
-          }
-        />
-        <FormDivider />
-        <FormRow
-          label="Ignore when Spotify is playing"
-          leading={
-            <FormRow.Icon source={getAssetIDByName("ic_spotify_white_24px")} />
-          }
-          trailing={
-            <FormSwitch
-              value={
-                currentSettings.ignoreSpotify ??
-                Constants.DEFAULT_SETTINGS.ignoreSpotify
-              }
-              onValueChange={(value: boolean) =>
-                saveSettings("ignoreSpotify", value)
-              }
-            />
-          }
-        />
-        <FormDivider />
-        <FormRow
-          label="Verbose Logging"
-          leading={
-            <FormRow.Icon source={getAssetIDByName("ic_message_copy")} />
-          }
-          trailing={
-            <FormSwitch
-              value={
-                currentSettings.verboseLogging ??
-                Constants.DEFAULT_SETTINGS.verboseLogging
-              }
-              onValueChange={(value: boolean) =>
-                saveSettings("verboseLogging", value)
-              }
-            />
-          }
-        />
-      </FormSection>
+          </Stack>
+          <TableRow
+            label="Test Connection"
+            trailing={loading ? <TableRow.Arrow loading /> : <TableRow.Arrow />}
+            onPress={testConnection}
+            disabled={loading}
+          />
+        </TableRowGroup>
 
-      <FormSection title="Plugin Status">
-        <View style={{ padding: 10 }}>
-          <FormText style={{ marginBottom: 4 }}>
-            Status: {pluginState.pluginStopped ? "Stopped" : "Running"}
-          </FormText>
-          <FormText>
-            Last Update:{" "}
-            {pluginState.lastTrackUrl ? "Success" : "No track data"}
-          </FormText>
-        </View>
-      </FormSection>
-
-      <FormSection title="CHANGELOG">
-        <FormRow
-          label="View GitHub Commits"
-          leading={<FormRow.Icon source={getAssetIDByName("ic_history")} />}
-          trailing={<FormRow.Arrow />}
-          onPress={() => {
-            Linking.openURL(Constants.GITHUB_COMMITS_URL);
-          }}
-        />
-        <FormDivider />
-        {changelog.map((entry, index) => (
-          <View
-            key={index}
-            style={{
-              padding: 10,
-              borderBottomWidth: index === changelog.length - 1 ? 0 : 0.5,
-              borderBottomColor: "#292929",
-            }}
-          >
-            <View
-              style={{
-                flexDirection: "row",
-                justifyContent: "space-between",
-                marginBottom: 8,
+        <TableRowGroup title="Display Settings">
+          <Stack spacing={4}>
+            <TextInput
+              placeholder={`App Name (Default: ${Constants.DEFAULT_SETTINGS.appName})`}
+              value={currentSettings.appName}
+              onChangeText={(value: string) => saveSettings("appName", value)}
+            />
+            <TextInput
+              placeholder={`Update Interval (Default: ${Constants.DEFAULT_SETTINGS.timeInterval}s)`}
+              value={String(currentSettings.timeInterval)}
+              onChangeText={(value: string) => {
+                const interval = Number(value);
+                if (interval >= Constants.MIN_UPDATE_INTERVAL) {
+                  saveSettings("timeInterval", interval);
+                } else {
+                  showToast(
+                    `Minimum interval is ${Constants.MIN_UPDATE_INTERVAL} seconds`,
+                    getAssetIDByName("Small"),
+                  );
+                }
               }}
-            >
-              <FormText style={{ fontWeight: "bold" }}>
-                Version {entry.version}
-              </FormText>
-              <FormText style={{ opacity: 0.5 }}>{entry.date}</FormText>
-            </View>
-            {entry.changes.map((change, changeIndex) => (
-              <FormText
-                key={changeIndex}
-                style={{ marginLeft: 16, marginTop: 4, opacity: 0.8 }}
-              >
-                • {change}
-              </FormText>
-            ))}
-          </View>
-        ))}
-      </FormSection>
+              keyboardType="numeric"
+            />
+          </Stack>
+        </TableRowGroup>
 
-      <FormText
-        style={{
-          padding: 16,
-          opacity: 0.5,
-          textAlign: "center",
-          marginTop: 8,
-          marginBottom: 8,
-        }}
-      >
-        Version {currentVersion}
-      </FormText>
+        <TableRowGroup title="Options">
+          <TableSwitchRow
+            label="Show 'Listening to' instead of 'Playing'"
+            value={
+              currentSettings.listeningTo ??
+              Constants.DEFAULT_SETTINGS.listeningTo
+            }
+            onValueChange={(value: boolean) =>
+              saveSettings("listeningTo", value)
+            }
+          />
+          <TableSwitchRow
+            label="Show Timestamp"
+            value={
+              currentSettings.showTimestamp ??
+              Constants.DEFAULT_SETTINGS.showTimestamp
+            }
+            onValueChange={(value: boolean) =>
+              saveSettings("showTimestamp", value)
+            }
+          />
+          <TableSwitchRow
+            label="Ignore when Spotify is playing"
+            value={
+              currentSettings.ignoreSpotify ??
+              Constants.DEFAULT_SETTINGS.ignoreSpotify
+            }
+            onValueChange={(value: boolean) =>
+              saveSettings("ignoreSpotify", value)
+            }
+          />
+          <TableSwitchRow
+            label="Verbose Logging"
+            value={
+              currentSettings.verboseLogging ??
+              Constants.DEFAULT_SETTINGS.verboseLogging
+            }
+            onValueChange={(value: boolean) =>
+              saveSettings("verboseLogging", value)
+            }
+          />
+        </TableRowGroup>
+
+        <TableRowGroup title="Plugin Status">
+          <TableRow
+            label="Status"
+            subLabel={pluginState.pluginStopped ? "Stopped" : "Running"}
+          />
+          <TableRow
+            label="Last Update"
+            subLabel={pluginState.lastTrackUrl ? "Success" : "No track data"}
+          />
+        </TableRowGroup>
+
+        <TableRowGroup title="About">
+          <TableRow label="Version" subLabel={currentVersion} />
+          <TableRow
+            label="View Changelog"
+            trailing={<TableRow.Arrow />}
+            onPress={() => {
+              // You might want to implement a navigation to your ChangelogView here
+              // For now, we'll open the GitHub URL
+              Linking.openURL(Constants.GITHUB_COMMITS_URL);
+            }}
+          />
+        </TableRowGroup>
+      </Stack>
     </ScrollView>
   );
 }