Merge remote-tracking branch 'upstream/dev'

src/core/ui/settings/pages/Themes/ThemeCard.tsx

@@ -1,4 +1,3 @@
-import { Strings } from "@core/i18n";
 import AddonCard, { CardWrapper } from "@core/ui/components/AddonCard";
 import { VdThemeInfo, themes, selectTheme } from "@lib/addons/themes";
 import { findAssetId } from "@lib/api/assets";
@@ -36,8 +35,6 @@ export default function ThemeCard({ item: theme }: CardWrapper<VdThemeInfo>) {
         {
           icon: "CircleInformationIcon-primary",
           onPress: () => {
-            // Using dynamic import directly (without wrapping in function)
-            // This returns a Promise that resolves to the module
             const importPromise = import("./sheets/ThemeInfoActionSheet");
             showSheet("ThemeInfoActionSheet", importPromise, {
               theme,

src/core/ui/settings/pages/Themes/index.tsx

@@ -30,7 +30,7 @@ import {
   IconButton,
   Stack,
   TableRowGroup,
-  TableSwitchRow,
+  TableCheckboxRow,
   TableRowIcon,
   Text,
   AlertModal,
@@ -677,12 +677,67 @@ export default function Themes() {
     );
   }
 
-  return (
-    <BrowseThemePage
-      themes={themesList}
-      installing={installing}
-      setInstalling={setInstalling}
-      setRefreshTick={setRefreshTick}
+        return (
+          <ActionSheet>
+            <BottomSheetTitleHeader title="Options" />
+            <View style={{ paddingVertical: 20, gap: 12 }}>
+              {/* Changed from TableRadioGroup to individual TableSwitchRow components
+                  for better UX - users can now toggle options individually */}
+              <TableRowGroup title="Override Theme Type">
+                <TableCheckboxRow
+                  label="Auto"
+                  icon={<TableRowIcon source={findAssetId("RobotIcon")} />}
+                  checked={!colorsPref.type}
+                  onPress={() => {
+                    if (!colorsPref.type) {
+                      colorsPref.type = "dark";
+                    }
+                    getCurrentTheme()?.data &&
+                      updateBunnyColor(getCurrentTheme()!.data!, {
+                        update: true,
+                      });
+                  }}
+                />
+                <TableCheckboxRow
+                  label="Dark"
+                  icon={<TableRowIcon source={findAssetId("ThemeDarkIcon")} />}
+                  checked={colorsPref.type === "dark"}
+                  onPress={() => {
+                    colorsPref.type = colorsPref.type === "dark" ? undefined : "dark";
+                    getCurrentTheme()?.data &&
+                      updateBunnyColor(getCurrentTheme()!.data!, {
+                        update: true,
+                      });
+                  }}
+                />
+                <TableCheckboxRow
+                  label="Light"
+                  icon={<TableRowIcon source={findAssetId("ThemeLightIcon")} />}
+                  checked={colorsPref.type === "light"}
+                  onPress={() => {
+                    colorsPref.type = colorsPref.type === "light" ? undefined : "light";
+                    getCurrentTheme()?.data &&
+                      updateBunnyColor(getCurrentTheme()!.data!, {
+                        update: true,
+                      });
+                  }}
+                />
+              </TableRowGroup>
+              <TableRowGroup title="Chat Background">
+                <TableCheckboxRow
+                  label="Show Background"
+                  subLabel="Enable or disable themes background on chat"
+                  icon={<TableRowIcon source={findAssetId("ImageIcon")} />}
+                  checked={!colorsPref.customBackground}
+                  onPress={() => {
+                    colorsPref.customBackground = !colorsPref.customBackground ? "hidden" : null;
+                  }}
+                />
+              </TableRowGroup>
+            </View>
+          </ActionSheet>
+        );
+      }}
     />
   );
 }

src/core/ui/settings/pages/Themes/sheets/ThemeInfoActionSheet.tsx

@@ -7,12 +7,7 @@ import React, { ComponentProps, useEffect, useState } from "react";
 import { ScrollView, View, TouchableOpacity } from "react-native";
 import { showToast } from "@ui/toasts";
 import { showConfirmationAlert } from "@core/vendetta/alerts";
-import {
-  fetchTheme,
-  removeTheme,
-  selectTheme,
-  VdThemeInfo,
-} from "@lib/addons/themes";
+import { fetchTheme, removeTheme, selectTheme, VdThemeInfo, } from "@lib/addons/themes";
 import { formatString, Strings } from "@core/i18n";
 import { semanticColors } from "@ui/color";
 
@@ -31,7 +26,7 @@ function ThemeInfoIconButton(props: ComponentProps<typeof IconButton>) {
   return <IconButton {...props} label={props.label} />;
 }
 
-// Theme title component for header
+// theme title component for header
 function TitleComponent({ theme }: { theme: VdThemeInfo }) {
   const { authors } = theme.data;
 
@@ -68,11 +63,11 @@ export default function ThemeInfoActionSheet({
   theme,
   navigation,
 }: ThemeInfoActionSheetProps) {
-  // Use component state to track theme data
+  // use component state to track theme data
   const [themeState, setThemeState] = useState({ ...theme });
   const [loading, setLoading] = useState(false);
 
-  // Periodic refresh to detect external changes to theme state
+  // periodic refresh to detect external changes to theme state
   useEffect(() => {
     const interval = setInterval(() => {
       setThemeState({ ...theme });
@@ -159,31 +154,25 @@ export default function ThemeInfoActionSheet({
             justifyContent: "center",
             alignItems: "center",
             flexWrap: "wrap",
-            gap: 16,
-            paddingHorizontal: 4,
+            gap: 65,
+            paddingHorizontal: 8,
           }}
         >
           <ThemeInfoIconButton
-            label="Apply"
-            variant="secondary"
-            icon={findAssetId("CheckmarkLargeIcon")}
-            onPress={applyTheme}
-          />
-          <ThemeInfoIconButton
-            label="Refetch"
+            label={Strings.REFETCH}
             variant="secondary"
             icon={findAssetId("RetryIcon")}
             onPress={refetchTheme}
             disabled={loading}
           />
           <ThemeInfoIconButton
-            label="Copy URL"
+            label={Strings.COPY_URL}
             variant="secondary"
             icon={findAssetId("LinkIcon")}
             onPress={copyThemeUrl}
           />
           <ThemeInfoIconButton
-            label="Uninstall"
+            label={Strings.UNINSTALL}
             variant="secondary"
             icon={findAssetId("TrashIcon")}
             onPress={removeThemeHandler}