Merge branch 'kmmiio99o:main' into main
This commit is contained in:
OTKUSteyler
GitHub
commit
2afe338c87
3 changed files with 34 additions and 65 deletions
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@ import { settings } from "@lib/api/settings";
|
|||
import { useObservable } from "@lib/api/storage";
|
||||
import { lazyDestructure } from "@lib/utils/lazy";
|
||||
import safeFetch from "@lib/utils/safeFetch";
|
||||
import Search from "@ui/components/Search";
|
||||
import { findByProps } from "@metro";
|
||||
import { NavigationNative, React, clipboard } from "@metro/common";
|
||||
import { showSheet } from "@lib/ui/sheets";
|
||||
|
|
@ -26,16 +25,12 @@ import {
|
|||
BottomSheetTitleHeader,
|
||||
Button,
|
||||
Card,
|
||||
FlashList,
|
||||
IconButton,
|
||||
Stack,
|
||||
TableRowGroup,
|
||||
TableSwitchRow,
|
||||
TableCheckboxRow,
|
||||
TableRowIcon,
|
||||
Text,
|
||||
AlertModal,
|
||||
AlertActions,
|
||||
AlertActionButton,
|
||||
} from "@metro/common/components";
|
||||
import { View, Image } from "react-native";
|
||||
|
||||
|
|
@ -296,9 +291,7 @@ function BrowserThemeCard({
|
|||
loading={isInstalling}
|
||||
icon={
|
||||
isInstalling ? (
|
||||
<View
|
||||
style={{ transform: [{ rotate: `${rotation}deg` }] }}
|
||||
>
|
||||
<View style={{ transform: [{ rotate: `${rotation}deg` }] }}>
|
||||
<Image
|
||||
source={findAssetId("RetryIcon")}
|
||||
style={{ width: 16, height: 16 }}
|
||||
|
|
@ -410,15 +403,15 @@ export default function Themes() {
|
|||
<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">
|
||||
<TableSwitchRow
|
||||
<TableCheckboxRow
|
||||
label="Auto"
|
||||
icon={<TableRowIcon source={findAssetId("RobotIcon")} />}
|
||||
value={!colorsPref.type}
|
||||
onValueChange={(enabled: boolean) => {
|
||||
if (enabled) {
|
||||
colorsPref.type = undefined;
|
||||
} else {
|
||||
checked={!colorsPref.type}
|
||||
onPress={() => {
|
||||
if (!colorsPref.type) {
|
||||
colorsPref.type = "dark";
|
||||
}
|
||||
getCurrentTheme()?.data &&
|
||||
|
|
@ -427,28 +420,24 @@ export default function Themes() {
|
|||
});
|
||||
}}
|
||||
/>
|
||||
<TableSwitchRow
|
||||
<TableCheckboxRow
|
||||
label="Dark"
|
||||
icon={
|
||||
<TableRowIcon source={findAssetId("ThemeDarkIcon")} />
|
||||
}
|
||||
value={colorsPref.type === "dark"}
|
||||
onValueChange={(enabled: boolean) => {
|
||||
colorsPref.type = enabled ? "dark" : undefined;
|
||||
icon={<TableRowIcon source={findAssetId("ThemeDarkIcon")} />}
|
||||
checked={colorsPref.type === "dark"}
|
||||
onPress={() => {
|
||||
colorsPref.type = colorsPref.type === "dark" ? undefined : "dark";
|
||||
getCurrentTheme()?.data &&
|
||||
updateBunnyColor(getCurrentTheme()!.data!, {
|
||||
update: true,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<TableSwitchRow
|
||||
<TableCheckboxRow
|
||||
label="Light"
|
||||
icon={
|
||||
<TableRowIcon source={findAssetId("ThemeLightIcon")} />
|
||||
}
|
||||
value={colorsPref.type === "light"}
|
||||
onValueChange={(enabled: boolean) => {
|
||||
colorsPref.type = enabled ? "light" : undefined;
|
||||
icon={<TableRowIcon source={findAssetId("ThemeLightIcon")} />}
|
||||
checked={colorsPref.type === "light"}
|
||||
onPress={() => {
|
||||
colorsPref.type = colorsPref.type === "light" ? undefined : "light";
|
||||
getCurrentTheme()?.data &&
|
||||
updateBunnyColor(getCurrentTheme()!.data!, {
|
||||
update: true,
|
||||
|
|
@ -457,20 +446,13 @@ export default function Themes() {
|
|||
/>
|
||||
</TableRowGroup>
|
||||
<TableRowGroup title="Chat Background">
|
||||
<TableSwitchRow
|
||||
<TableCheckboxRow
|
||||
label="Show Background"
|
||||
subLabel="Enable or disable themes background on chat"
|
||||
icon={<TableRowIcon source={findAssetId("ImageIcon")} />}
|
||||
value={!colorsPref.customBackground}
|
||||
onValueChange={(enabled: boolean) => {
|
||||
colorsPref.customBackground = enabled ? null : "hidden";
|
||||
}}
|
||||
/>
|
||||
<TableSwitchRow
|
||||
label="Hide Background"
|
||||
icon={<TableRowIcon source={findAssetId("DenyIcon")} />}
|
||||
value={colorsPref.customBackground === "hidden"}
|
||||
onValueChange={(enabled: boolean) => {
|
||||
colorsPref.customBackground = enabled ? "hidden" : null;
|
||||
checked={!colorsPref.customBackground}
|
||||
onPress={() => {
|
||||
colorsPref.customBackground = !colorsPref.customBackground ? "hidden" : null;
|
||||
}}
|
||||
/>
|
||||
</TableRowGroup>
|
||||
|
|
@ -479,7 +461,7 @@ export default function Themes() {
|
|||
);
|
||||
})
|
||||
}
|
||||
/>,
|
||||
/>
|
||||
);
|
||||
|
||||
navigation.setOptions({
|
||||
|
|
@ -677,6 +659,7 @@ export default function Themes() {
|
|||
);
|
||||
}
|
||||
|
||||
// Normal browse listing
|
||||
return (
|
||||
<BrowseThemePage
|
||||
themes={themesList}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue