ci: typecheck on push

app/(tabs)/genres.tsx

@@ -0,0 +1,184 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import {
+  Animated,
+  FlatList,
+  Image,
+  LayoutAnimation,
+  Platform,
+  Pressable,
+  RefreshControl,
+  StyleSheet,
+  Text,
+  UIManager,
+  View,
+} from 'react-native'
+import { useRouter } from 'expo-router'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { api, imageUrl } from '../../src/lib/api'
+import type { Genre } from '../../src/lib/types'
+import { colors, radius, spacing } from '../../src/lib/theme'
+import Loader from '../../src/components/Loader'
+
+if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
+  UIManager.setLayoutAnimationEnabledExperimental(true)
+}
+
+interface GenreTileProps {
+  genre: Genre
+  onPress: () => void
+}
+
+function GenreTile({ genre, onPress }: GenreTileProps) {
+  const scale = useRef(new Animated.Value(1)).current
+  const image = imageUrl(genre.image?.optimized?.preview || genre.image?.preview)
+
+  function pressIn() {
+    Animated.spring(scale, { toValue: 0.96, useNativeDriver: true, speed: 50 }).start()
+  }
+
+  function pressOut() {
+    Animated.spring(scale, { toValue: 1, useNativeDriver: true, speed: 50 }).start()
+  }
+
+  return (
+    <Pressable onPress={onPress} onPressIn={pressIn} onPressOut={pressOut} style={styles.tileWrap}>
+      <Animated.View style={[styles.tile, { transform: [{ scale }] }]}>
+        {image && <Image source={{ uri: image }} style={styles.image} resizeMode="cover" />}
+        <View style={styles.overlay} />
+        <View style={styles.overlayBottom} />
+        <View style={styles.content}>
+          <Text numberOfLines={2} style={styles.name}>
+            {genre.name}
+          </Text>
+          {genre.total_releases != null && (
+            <Text style={styles.count}>{genre.total_releases} тайтлов</Text>
+          )}
+        </View>
+      </Animated.View>
+    </Pressable>
+  )
+}
+
+export default function GenresScreen() {
+  const router = useRouter()
+  const insets = useSafeAreaInsets()
+  const [genres, setGenres] = useState<Genre[] | null>(null)
+  const [refreshing, setRefreshing] = useState(false)
+
+  const load = useCallback(async () => {
+    try {
+      const data = await api.genres()
+      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
+      setGenres(data)
+    } catch {
+      setGenres([])
+    }
+  }, [])
+
+  useEffect(() => {
+    load()
+  }, [load])
+
+  async function onRefresh() {
+    setRefreshing(true)
+    await load()
+    setRefreshing(false)
+  }
+
+  if (!genres) return <Loader label="Загружаем жанры..." />
+
+  return (
+    <FlatList
+      style={styles.screen}
+      data={genres}
+      keyExtractor={(item) => String(item.id)}
+      numColumns={2}
+      columnWrapperStyle={styles.row}
+      contentContainerStyle={[
+        styles.list,
+        { paddingTop: insets.top + spacing(4), paddingBottom: insets.bottom + spacing(8) },
+      ]}
+      refreshControl={
+        <RefreshControl tintColor={colors.accent} refreshing={refreshing} onRefresh={onRefresh} />
+      }
+      ListHeaderComponent={<Text style={styles.title}>Жанры</Text>}
+      renderItem={({ item }) => (
+        <GenreTile
+          genre={item}
+          onPress={() =>
+            router.push({ pathname: '/(tabs)/catalog', params: { genre: String(item.id) } })
+          }
+        />
+      )}
+    />
+  )
+}
+
+const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+    backgroundColor: colors.background,
+  },
+  list: {
+    paddingHorizontal: spacing(4),
+  },
+  title: {
+    color: colors.text,
+    fontSize: 22,
+    fontWeight: '800',
+    marginBottom: spacing(4),
+  },
+  row: {
+    justifyContent: 'space-between',
+  },
+  tileWrap: {
+    width: '48%',
+    marginBottom: spacing(3),
+  },
+  tile: {
+    width: '100%',
+    aspectRatio: 16 / 9,
+    borderRadius: radius.lg,
+    overflow: 'hidden',
+    backgroundColor: colors.surfaceRaised,
+  },
+  image: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    opacity: 0.55,
+  },
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0,0,0,0.25)',
+  },
+  overlayBottom: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: '65%',
+    backgroundColor: 'rgba(0,0,0,0.55)',
+  },
+  content: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    padding: spacing(3),
+  },
+  name: {
+    color: colors.text,
+    fontSize: 14,
+    fontWeight: '700',
+  },
+  count: {
+    color: colors.textFaint,
+    fontSize: 11,
+    marginTop: spacing(0.5),
+  },
+})