Refactor components for consistent styling and improve button animations

app/_layout.tsx

@@ -1,21 +1,21 @@
-import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
-import { useFonts } from 'expo-font';
-import { Stack } from 'expo-router';
-import * as SplashScreen from 'expo-splash-screen';
-import { useEffect } from 'react';
-import { Platform, useColorScheme } from 'react-native';
+import { DarkTheme, DefaultTheme, ThemeProvider } from "@react-navigation/native";
+import { useFonts } from "expo-font";
+import { Stack } from "expo-router";
+import * as SplashScreen from "expo-splash-screen";
+import { useEffect } from "react";
+import { Platform, useColorScheme } from "react-native";
 
-import { useSettingsStore } from '@/stores/settingsStore';
+import { useSettingsStore } from "@/stores/settingsStore";
 
 // Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
 
 export default function RootLayout() {
-  const colorScheme = useColorScheme();
+  const colorScheme = useColorScheme() ?? "dark";
   const [loaded, error] = useFonts({
-    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
+    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
   });
-  const initializeSettings = useSettingsStore(state => state.loadSettings);
+  const initializeSettings = useSettingsStore((state) => state.loadSettings);
 
   useEffect(() => {
     initializeSettings();
@@ -35,11 +35,11 @@ export default function RootLayout() {
   }
 
   return (
-    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
+    <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
       <Stack>
         <Stack.Screen name="index" options={{ headerShown: false }} />
         <Stack.Screen name="detail" options={{ headerShown: false }} />
-        {Platform.OS !== 'web' && <Stack.Screen name="play" options={{ headerShown: false }} />}
+        {Platform.OS !== "web" && <Stack.Screen name="play" options={{ headerShown: false }} />}
         <Stack.Screen name="search" options={{ headerShown: false }} />
         <Stack.Screen name="+not-found" />
       </Stack>

app/detail.tsx

@@ -182,7 +182,7 @@ export default function DetailScreen() {
                   {item.episodes.length > 1 && (
                     <View style={styles.badge}>
                       <Text style={styles.badgeText}>
-                        {item.episodes.length > 99 ? "99+" : `${item.episodes.length}`}
+                        {item.episodes.length > 99 ? "99+" : `${item.episodes.length}`} 集
                       </Text>
                     </View>
                   )}
@@ -275,7 +275,7 @@ const styles = StyleSheet.create({
     flexWrap: "wrap",
   },
   sourceButton: {
-    margin: 5,
+    margin: 8,
   },
   sourceButtonText: {
     color: "white",

app/index.tsx

@@ -58,7 +58,6 @@ export default function HomeScreen() {
         text={item.title}
         onPress={() => handleCategorySelect(item)}
         isSelected={isSelected}
-        variant="primary"
         style={styles.categoryButton}
         textStyle={styles.categoryText}
       />
@@ -190,16 +189,16 @@ const styles = StyleSheet.create({
   },
   // Category Selector
   categoryContainer: {
-    paddingBottom: 10,
+    paddingBottom: 6,
   },
   categoryListContent: {
     paddingHorizontal: 16,
   },
   categoryButton: {
-    paddingHorizontal: 12,
+    paddingHorizontal: 2,
     paddingVertical: 6,
     borderRadius: 8,
-    marginHorizontal: 5,
+    marginHorizontal: 6,
   },
   categoryText: {
     fontSize: 16,