alteropen/streamyfin
1
0
Fork 0
mirror of https://github.com/streamyfin/streamyfin.git synced 2026-06-17 19:30:27 +01:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

fix(logs): keep the filter bar below the header on iOS

Browse Source 
The logs page rendered its filter bar in a plain View with no top inset,
so under the transparent iOS header it sat behind the header and the
filter buttons weren't tappable. Use a root ScrollView with
contentInsetAdjustmentBehavior='automatic' (like the sibling settings
pages) and make the filter bar a sticky header, so iOS insets the content
below the header and the bar stays pinned while logs scroll.
This commit is contained in:
Gauvain
2026-06-16 21:49:35 +02:00
parent 3035a9019c
commit fc53a7d760
1 changed files with 60 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
app/(auth)/(tabs)/(home)/settings/logs/page.tsx
View File

@@ -88,8 +88,15 @@ export default function Page() {
}, [share, loading]); }, [share, loading]);
return ( return (
<View className='flex-1'> <ScrollView
<View className='flex flex-row justify-end py-2 px-4 space-x-2'> // Like the sibling settings pages, let iOS auto-inset the content below the
// transparent header (no manual header-height math). The filter bar is a
// sticky header so it stays pinned just under the header while logs scroll.
contentInsetAdjustmentBehavior='automatic'
stickyHeaderIndices={[0]}
contentContainerStyle={{ paddingBottom: insets.bottom }}
>
<View className='flex flex-row justify-end py-2 px-4 space-x-2 bg-black'>
<FilterButton <FilterButton
id={orderFilterId} id={orderFilterId}
queryKey='log' queryKey='log'
@@ -112,67 +119,62 @@ export default function Page() {
multiple={true} multiple={true}
/> />
</View> </View>
<ScrollView <View className='flex flex-col space-y-2 px-4'>
className='pb-4 px-4' {filteredLogs?.map((log, index) => (
contentContainerStyle={{ paddingBottom: insets.bottom }} <View className='bg-neutral-900 rounded-xl p-3' key={index}>
> <TouchableOpacity
<View className='flex flex-col space-y-2'> disabled={!log.data}
{filteredLogs?.map((log, index) => ( onPress={() =>
<View className='bg-neutral-900 rounded-xl p-3' key={index}> setState((v) => ({
<TouchableOpacity ...v,
disabled={!log.data} [log.timestamp]: !v[log.timestamp],
onPress={() => }))
setState((v) => ({ }
...v, >
[log.timestamp]: !v[log.timestamp], <View className='flex flex-row justify-between'>
})) <Text
} className={`mb-1
>
<View className='flex flex-row justify-between'>
<Text
className={`mb-1
${log.level === "INFO" && "text-blue-500"} ${log.level === "INFO" && "text-blue-500"}
${log.level === "ERROR" && "text-red-500"} ${log.level === "ERROR" && "text-red-500"}
${log.level === "DEBUG" && "text-purple-500"} ${log.level === "DEBUG" && "text-purple-500"}
`} `}
> >
{log.level} {log.level}
</Text>
<Text className='text-xs'>
{new Date(log.timestamp).toLocaleString()}
</Text>
</View>
<Text selectable className='text-xs'>
{log.message}
</Text> </Text>
</TouchableOpacity>
{log.data && ( <Text className='text-xs'>
<> {new Date(log.timestamp).toLocaleString()}
{!state[log.timestamp] && ( </Text>
<Text className='text-xs mt-0.5'> </View>
{t("home.settings.logs.click_for_more_info")} <Text selectable className='text-xs'>
</Text> {log.message}
)} </Text>
<Collapsible collapsed={!state[log.timestamp]}> </TouchableOpacity>
<View className='mt-2 flex flex-col space-y-2'>
<ScrollView className='rounded-xl' style={codeBlockStyle}> {log.data && (
<Text>{JSON.stringify(log.data, null, 2)}</Text> <>
</ScrollView> {!state[log.timestamp] && (
</View> <Text className='text-xs mt-0.5'>
</Collapsible> {t("home.settings.logs.click_for_more_info")}
</> </Text>
)} )}
</View> <Collapsible collapsed={!state[log.timestamp]}>
))} <View className='mt-2 flex flex-col space-y-2'>
{filteredLogs?.length === 0 && ( <ScrollView className='rounded-xl' style={codeBlockStyle}>
<Text className='opacity-50'> <Text>{JSON.stringify(log.data, null, 2)}</Text>
{t("home.settings.logs.no_logs_available")} </ScrollView>
</Text> </View>
)} </Collapsible>
</View> </>
</ScrollView> )}
</View> </View>
))}
{filteredLogs?.length === 0 && (
<Text className='opacity-50'>
{t("home.settings.logs.no_logs_available")}
</Text>
)}
</View>
</ScrollView>
); );
} }