Enhance debug configuration and improve radio group item usability

- Added debug configuration to manage console output and warnings in production.
- Updated RadioGroupItemWithLabel to handle value changes and improved label press functionality.
- Integrated onValueChange handlers for streaming and download quality settings in PlaybackTab and StorageTab components.

App.tsx

@@ -1,4 +1,5 @@
 import './gesture-handler'
+import './src/utils/debug-config' // Import debug configuration early
 import React, { useState } from 'react'
 import 'react-native-url-polyfill/auto'
 import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'

src/components/Global/helpers/radio-group-item-with-label.tsx

@@ -1,15 +1,27 @@
 import { SizeTokens, XStack, RadioGroup } from 'tamagui'
 import { Label } from './text'
 
-export function RadioGroupItemWithLabel(props: { size: SizeTokens; value: string; label: string }) {
+interface RadioGroupItemWithLabelProps {
+	size: SizeTokens
+	value: string
+	label: string
+	onValueChange?: (value: string) => void
+}
+
+export function RadioGroupItemWithLabel(props: RadioGroupItemWithLabelProps) {
 	const id = `radiogroup-${props.value}`
+
+	const handleLabelPress = () => {
+		props.onValueChange?.(props.value)
+	}
+
 	return (
 		<XStack width={300} alignItems='center' space='$4'>
 			<RadioGroup.Item value={props.value} id={id} size={props.size}>
 				<RadioGroup.Indicator />
 			</RadioGroup.Item>
 
-			<Label size={props.size} htmlFor={id}>
+			<Label size={props.size} htmlFor={id} onPress={handleLabelPress}>
 				{props.label}
 			</Label>
 		</XStack>

src/components/Global/helpers/text.tsx

@@ -15,11 +15,20 @@ interface LabelProps {
 	htmlFor: string
 	children: string
 	size: SizeTokens
+	onPress?: () => void
 }
 
 export function Label(props: LabelProps): React.JSX.Element {
 	return (
-		<TamaguiLabel fontWeight={600} htmlFor={props.htmlFor} justifyContent='flex-end'>
+		<TamaguiLabel
+			fontWeight={600}
+			htmlFor={props.htmlFor}
+			justifyContent='flex-end'
+			size={props.size}
+			onPress={props.onPress}
+			pressStyle={{ opacity: 0.7 }}
+			cursor='pointer'
+		>
 			{props.children}
 		</TamaguiLabel>
 	)

src/components/Settings/components/playback-tab.tsx

@@ -48,21 +48,33 @@ export default function PlaybackTab(): React.JSX.Element {
 									size='$3'
 									value='original'
 									label='Original Quality (Highest bandwidth)'
+									onValueChange={(value) =>
+										setStreamingQuality(value as StreamingQuality)
+									}
 								/>
 								<RadioGroupItemWithLabel
 									size='$3'
 									value='high'
 									label='High (320kbps)'
+									onValueChange={(value) =>
+										setStreamingQuality(value as StreamingQuality)
+									}
 								/>
 								<RadioGroupItemWithLabel
 									size='$3'
 									value='medium'
 									label='Medium (192kbps)'
+									onValueChange={(value) =>
+										setStreamingQuality(value as StreamingQuality)
+									}
 								/>
 								<RadioGroupItemWithLabel
 									size='$3'
 									value='low'
 									label='Low (128kbps)'
+									onValueChange={(value) =>
+										setStreamingQuality(value as StreamingQuality)
+									}
 								/>
 							</RadioGroup>
 						</YStack>

src/components/Settings/components/storage-tab.tsx

@@ -65,21 +65,33 @@ export default function StorageTab(): React.JSX.Element {
 									size='$3'
 									value='original'
 									label='Original Quality'
+									onValueChange={(value) =>
+										setDownloadQuality(value as DownloadQuality)
+									}
 								/>
 								<RadioGroupItemWithLabel
 									size='$3'
 									value='high'
 									label='High (320kbps)'
+									onValueChange={(value) =>
+										setDownloadQuality(value as DownloadQuality)
+									}
 								/>
 								<RadioGroupItemWithLabel
 									size='$3'
 									value='medium'
 									label='Medium (192kbps)'
+									onValueChange={(value) =>
+										setDownloadQuality(value as DownloadQuality)
+									}
 								/>
 								<RadioGroupItemWithLabel
 									size='$3'
 									value='low'
 									label='Low (128kbps)'
+									onValueChange={(value) =>
+										setDownloadQuality(value as DownloadQuality)
+									}
 								/>
 							</RadioGroup>
 						</YStack>

src/utils/debug-config.ts

@@ -0,0 +1,37 @@
+/**
+ * Debug configuration for controlling console output and in-app warnings
+ * This disables console.debug, console.log in production builds
+ * and removes yellow/red warning boxes from the app interface
+ */
+
+import { LogBox } from 'react-native'
+
+// Disable all LogBox warnings (yellow boxes) in the app
+LogBox.ignoreAllLogs(true)
+
+// Only keep warnings and errors in production
+if (!__DEV__) {
+	console.debug = () => {}
+	console.log = () => {}
+	// Optionally disable warnings too:
+	// console.warn = () => {}
+
+	// Keep console.error for critical issues even in production
+	// console.error is preserved
+}
+
+// For development, you can control specific debug levels
+export const DEBUG_LEVELS = {
+	PLAYER: __DEV__, // Player-related debug messages
+	API: __DEV__, // API-related debug messages
+	QUEUE: __DEV__, // Queue-related debug messages
+	GENERAL: __DEV__, // General debug messages
+}
+
+// Utility functions for conditional logging
+export const debugLog = {
+	player: (...args: unknown[]) => DEBUG_LEVELS.PLAYER && console.debug('[PLAYER]', ...args),
+	api: (...args: unknown[]) => DEBUG_LEVELS.API && console.debug('[API]', ...args),
+	queue: (...args: unknown[]) => DEBUG_LEVELS.QUEUE && console.debug('[QUEUE]', ...args),
+	general: (...args: unknown[]) => DEBUG_LEVELS.GENERAL && console.debug('[DEBUG]', ...args),
+}