SheWhoReignsSupreme/GoonCord
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make the buttons in Addon Browser look better. Literally

Browse source 
they were just too small
This commit is contained in:
kmmiio99o 2025-12-20 19:47:32 +01:00
parent e344958f70
commit 4482be2ff0
1 changed files with 34 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
src/core/ui/settings/pages/PluginBrowser/index.tsx
View file

@ -45,14 +45,14 @@ function normalizeIdFromInstallUrl(url: string) {
// @ts-ignore (i cant be bothered to type these)
function InstallButton({ addon, isPluginMode, installing, setInstalling, setRefreshTick }) {
const normId = normalizeIdFromInstallUrl(addon.installUrl);
const [installed, setInstalled] = React.useState(() =>
const [installed, setInstalled] = React.useState(() =>
isPluginMode ? Boolean(VdPluginManager.plugins[normId]) : Boolean(themes[addon.installUrl])
);
React.useEffect(() => {
setInstalled(isPluginMode ? Boolean(VdPluginManager.plugins[normId]) : Boolean(themes[addon.installUrl]));
}, [addon.installUrl, setRefreshTick, isPluginMode]);
const installAddon = async () => {
if (installing.has(normId)) return;
setInstalling((prev: Iterable<unknown> | null | undefined) => new Set(prev).add(normId));
@ -90,7 +90,7 @@ function InstallButton({ addon, isPluginMode, installing, setInstalling, setRefr
const promptInstall = () => {
if (!isPluginMode) return installAddon();
const plugin = addon as PluginData;
const needsWarn = (plugin.status && plugin.status !== "working") || (plugin.warningMessage && plugin.warningMessage.trim().length > 0);
if (!needsWarn) return installAddon();
@ -197,12 +197,12 @@ function TrailingButtons({ addon, isPluginMode, installing, setInstalling, setRe
variant="secondary"
icon={findAssetId("MoreHorizontalIcon")}
/>
<InstallButton
<InstallButton
addon={addon}
isPluginMode={isPluginMode}
installing={installing}
setInstalling={setInstalling}
setRefreshTick={setRefreshTick}
installing={installing}
setInstalling={setInstalling}
setRefreshTick={setRefreshTick}
/>
</Stack>
);
@ -238,12 +238,12 @@ function AddonCard({ addon, isPluginMode, installing, setInstalling, setRefreshT
)}
</View>
<View>
<TrailingButtons
<TrailingButtons
addon={addon}
isPluginMode={isPluginMode}
installing={installing}
setInstalling={setInstalling}
setRefreshTick={setRefreshTick}
installing={installing}
setInstalling={setInstalling}
setRefreshTick={setRefreshTick}
/>
</View>
</View>
@ -296,7 +296,7 @@ export default function BrowserPage() {
const response = await safeFetch(url);
if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`);
const data = await response.json();
let addonList: AddonData[] = [];
if (Array.isArray(data)) {
addonList = data;
@ -306,7 +306,7 @@ export default function BrowserPage() {
// Handle any other structure for themes - try common property names
addonList = data.OFFICIAL_THEMES || data.themes || data.THEMES || data.items || [];
}
if (isPluginMode) {
setPlugins(addonList as PluginData[]);
} else {
@ -411,34 +411,38 @@ export default function BrowserPage() {
return (
<View style={{ flex: 1 }}>
<View style={{ justifyContent: "center", alignItems: "center", paddingHorizontal: 10 }}>
<View style={{ paddingHorizontal: 10 }}>
<Stack spacing={12}>
<View style={{ flexDirection: "row", justifyContent: "center", alignItems: 'center', paddingTop: 10 }}>
<Stack spacing={10} style={{ flexDirection: "row", justifyContent: "center", alignItems: 'center' }}>
<View style={{ flexDirection: "row", paddingTop: 10 }}>
<View style={{ flex: 1, flexDirection: "row", alignItems: "center" }}>
<Button
size="sm"
size="md"
text="Plugins"
variant={mode === "plugins" ? "primary" : "secondary"}
onPress={() => setMode("plugins")}
style={{ flex: 1 }}
/>
<View style={{ width: 8 }} />
<Button
size="sm"
size="md"
text="Themes"
variant={mode === "themes" ? "primary" : "secondary"}
onPress={() => setMode("themes")}
style={{ flex: 1 }}
/>
</Stack>
</View>
</View>
<View style={{ flexDirection: "row", alignItems: "center", gap: 8, paddingBottom: 6 }}>
<Search
placeholder={`Search ${mode}...`}
onChangeText={setSearchQuery}
<Search
placeholder={`Search ${mode}...`}
isRound={true}
onChangeText={setSearchQuery}
style={{ flex: 1 }}
/>
<View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
<IconButton
size="sm"
size="md"
variant="tertiary"
icon={findAssetId("MoreVerticalIcon")}
disabled={!!searchQuery}
@ -457,11 +461,11 @@ export default function BrowserPage() {
})}
/>
</View>
</View>
</Stack>
</View>
<FlashList
data={sortedAndFiltered}
refreshing={loading}
@ -485,16 +489,16 @@ export default function BrowserPage() {
//@ts-ignore
renderItem={({ item: addon }) => (
<View style={{ paddingVertical: 6, paddingHorizontal: 8 }}>
<AddonCard
<AddonCard
addon={addon}
isPluginMode={mode === "plugins"}
installing={installing}
setInstalling={setInstalling}
setRefreshTick={setRefreshTick}
installing={installing}
setInstalling={setInstalling}
setRefreshTick={setRefreshTick}
/>
</View>
)}
/>
</View>
);
}
}