fix(settings): tidy spacing, uniform Android row heights & toggle layout

- spacing: top padding + inter-group gaps so section titles, descriptions
  and buttons no longer touch (playback buffer, audio/subtitles, music,
  marlin, kefin, streamystats, storage, hide-libraries)
- ListGroup: skip empty section titles
- SettingSwitch: cap the native Android switch in a fixed centered box so
  toggle rows match the other rows and stay put when toggled; iOS unchanged
- Appearance: move "Hide libraries" to the end of the list
This commit is contained in:
Gauvain
2026-06-24 22:21:06 +02:00
parent 91ea791663
commit 2ac664de5a
21 changed files with 128 additions and 68 deletions

View File

@@ -2,8 +2,9 @@ import { getUserViewsApi } from "@jellyfin/sdk/lib/utils/api";
import { useQuery } from "@tanstack/react-query";
import { useAtomValue } from "jotai";
import { useTranslation } from "react-i18next";
import { ScrollView, Switch, View } from "react-native";
import { ScrollView, View } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { SettingSwitch } from "@/components/common/SettingSwitch";
import { Text } from "@/components/common/Text";
import { Loader } from "@/components/Loader";
import { ListGroup } from "@/components/list/ListGroup";
@@ -50,12 +51,12 @@ export default function AppearanceHideLibrariesPage() {
>
<DisabledSetting
disabled={pluginSettings?.hiddenLibraries?.locked === true}
className='px-4'
className='px-4 pt-4'
>
<ListGroup title={t("home.settings.other.hide_libraries")}>
{data?.map((view) => (
<ListItem key={view.Id} title={view.Name} onPress={() => {}}>
<Switch
<SettingSwitch
value={settings.hiddenLibraries?.includes(view.Id!) || false}
onValueChange={(value) => {
updateSettings({

View File

@@ -2,7 +2,8 @@ import { getUserViewsApi } from "@jellyfin/sdk/lib/utils/api";
import { useQuery } from "@tanstack/react-query";
import { useAtomValue } from "jotai";
import { useTranslation } from "react-i18next";
import { Switch, View } from "react-native";
import { View } from "react-native";
import { SettingSwitch } from "@/components/common/SettingSwitch";
import { Text } from "@/components/common/Text";
import { Loader } from "@/components/Loader";
import { ListGroup } from "@/components/list/ListGroup";
@@ -46,7 +47,7 @@ export default function HideLibrariesPage() {
<ListGroup>
{data?.map((view) => (
<ListItem key={view.Id} title={view.Name} onPress={() => {}}>
<Switch
<SettingSwitch
value={settings.hiddenLibraries?.includes(view.Id!) || false}
onValueChange={(value) => {
updateSettings({

View File

@@ -3,9 +3,9 @@ import { useQuery } from "@tanstack/react-query";
import { useCallback, useMemo } from "react";
import { useTranslation } from "react-i18next";
import { Platform, ScrollView, View } from "react-native";
import { Switch } from "react-native-gesture-handler";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { toast } from "sonner-native";
import { SettingSwitch } from "@/components/common/SettingSwitch";
import { Text } from "@/components/common/Text";
import { ListGroup } from "@/components/list/ListGroup";
import { ListItem } from "@/components/list/ListItem";
@@ -136,7 +136,7 @@ export default function MusicSettingsPage() {
title={t("home.settings.music.prefer_downloaded")}
disabled={pluginSettings?.preferLocalAudio?.locked}
>
<Switch
<SettingSwitch
value={settings.preferLocalAudio}
disabled={pluginSettings?.preferLocalAudio?.locked}
onValueChange={(value) =>
@@ -159,7 +159,7 @@ export default function MusicSettingsPage() {
title={t("home.settings.music.lookahead_enabled")}
disabled={pluginSettings?.audioLookaheadEnabled?.locked}
>
<Switch
<SettingSwitch
value={settings.audioLookaheadEnabled}
disabled={pluginSettings?.audioLookaheadEnabled?.locked}
onValueChange={(value) =>
@@ -233,7 +233,7 @@ export default function MusicSettingsPage() {
})}
/>
</ListGroup>
<ListGroup>
<ListGroup className='mt-4'>
<ListItem
textColor='red'
onPress={onDeleteDownloadedSongsClicked}

View File

@@ -17,13 +17,14 @@ export default function PlaybackControlsPage() {
contentContainerStyle={{
paddingLeft: insets.left,
paddingRight: insets.right,
paddingBottom: insets.bottom,
}}
>
<View
className='p-4 flex flex-col'
style={{ paddingTop: Platform.OS === "android" ? 10 : 0 }}
>
<View className='mb-4'>
<View>
<MediaProvider>
<MediaToggles className='mb-4' />
<GestureControls className='mb-4' />

View File

@@ -13,7 +13,7 @@ export default function KefinTweaksPage() {
paddingRight: insets.right,
}}
>
<View className='px-4'>
<View className='px-4 pt-4'>
<KefinTweaksSettings />
</View>
</ScrollView>

View File

@@ -4,13 +4,13 @@ import { useTranslation } from "react-i18next";
import {
Linking,
ScrollView,
Switch,
TextInput,
TouchableOpacity,
View,
} from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { toast } from "sonner-native";
import { SettingSwitch } from "@/components/common/SettingSwitch";
import { Text } from "@/components/common/Text";
import { ListGroup } from "@/components/list/ListGroup";
import { ListItem } from "@/components/list/ListItem";
@@ -65,7 +65,7 @@ export default function MarlinSearchPage() {
paddingRight: insets.right,
}}
>
<View className='px-4'>
<View className='px-4 pt-4'>
<ListGroup>
{/* disabledByAdmin renders the "Disabled by admin" notice as the row's
subtitle (same pattern as the Streamystats settings) — no clipping. */}
@@ -79,7 +79,7 @@ export default function MarlinSearchPage() {
queryClient.invalidateQueries({ queryKey: ["search"] });
}}
>
<Switch
<SettingSwitch
value={settings.searchEngine === "Marlin"}
disabled={searchEngineLocked || hasStreamystats}
onValueChange={(val) => {

View File

@@ -4,13 +4,13 @@ import { useTranslation } from "react-i18next";
import {
Linking,
ScrollView,
Switch,
TextInput,
TouchableOpacity,
View,
} from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { toast } from "sonner-native";
import { SettingSwitch } from "@/components/common/SettingSwitch";
import { Text } from "@/components/common/Text";
import { ListGroup } from "@/components/list/ListGroup";
import { ListItem } from "@/components/list/ListItem";
@@ -132,7 +132,7 @@ export default function StreamystatsPage() {
paddingRight: insets.right,
}}
>
<View className='px-4'>
<View className='px-4 pt-4'>
<ListGroup className='flex-1'>
<ListItem
title={t("home.settings.plugins.streamystats.url")}
@@ -174,7 +174,7 @@ export default function StreamystatsPage() {
{/* Locked controls show the live admin value and can't be toggled —
local form state would let the switch flip while the write guard
drops the change. */}
<Switch
<SettingSwitch
value={
searchLocked
? settings?.searchEngine === "Streamystats"
@@ -190,7 +190,7 @@ export default function StreamystatsPage() {
)}
disabledByAdmin={movieRecsLocked}
>
<Switch
<SettingSwitch
value={
movieRecsLocked
? (settings?.streamyStatsMovieRecommendations ?? false)
@@ -206,7 +206,7 @@ export default function StreamystatsPage() {
)}
disabledByAdmin={seriesRecsLocked}
>
<Switch
<SettingSwitch
value={
seriesRecsLocked
? (settings?.streamyStatsSeriesRecommendations ?? false)
@@ -222,7 +222,7 @@ export default function StreamystatsPage() {
)}
disabledByAdmin={promotedWatchlistsLocked}
>
<Switch
<SettingSwitch
value={
promotedWatchlistsLocked
? (settings?.streamyStatsPromotedWatchlists ?? false)
@@ -236,7 +236,7 @@ export default function StreamystatsPage() {
title={t("home.settings.plugins.streamystats.hide_watchlists_tab")}
disabledByAdmin={hideWatchlistsTabLocked}
>
<Switch
<SettingSwitch
value={
hideWatchlistsTabLocked
? (settings?.hideWatchlistsTab ?? false)