Sooo... i'm doing this thing haha. Is this good or bad!

// ... imports
const categories = ['diy', 'kunst', 'sport', 'science', 'natur', 'mad', 'viden'] as const

type CategorizedVideos<T extends string> =
  | {
      [K in T]?: VideoEnriched[]
    }
  | undefined

const titleDictionary = {
  diy: 'DIY 🛠️',
  kunst: 'Kunst 🎨',
  sport: 'Sport ⚽️',
  science: 'Science 🧬',
  natur: 'Natur 🌳',
  mad: 'Mad 🥘',
  viden: 'Viden 🧠',
}

export function HomeScreen() {
  const isWeb = Platform.OS === 'web'

  const highlightedVideos = useQuery(api.videos.queries.listByHighlighted)

  const videos: CategorizedVideos<(typeof categories)[number]> = useQuery(
    api.videos.queries.getByCategories,
    {
      categories: ['diy', 'kunst'],
    }
  )

  return (
    <YStack>
      <ScrollView p="$3" pr="$0" showsVerticalScrollIndicator={false}>
        <YStack space="$1">
          <H4>Vi anbefaler 🌟</H4>
          <VideoCarousel height={300} videos={shuffle(highlightedVideos)} />
        </YStack>
        {categories.map((category) => (
          <YStack space="$1">
            <H4>{titleDictionary[category]}</H4>
            <VideoCarousel height={240} videos={shuffle(videos?.[`${category}`])} />
          </YStack>
        ))}
      </ScrollView>
    </YStack>
  )
}

function shuffle(array: VideoEnriched[] | undefined) {
  if (!array) return []
  let currentIndex = array.length,
    randomIndex

  // While there remain elements to shuffle.
  while (currentIndex > 0) {
    // Pick a remaining element.
    randomIndex = Math.floor(Math.random() * currentIndex)
    currentIndex--

    // And swap it with the current element.
    ;[array[currentIndex], array[randomIndex]] = [array[randomIndex]!, array[currentIndex]!]
  }

  return array
}

// ... imports
const categories = ['diy', 'kunst', 'sport', 'science', 'natur', 'mad', 'viden'] as const

type CategorizedVideos<T extends string> =
  | {
      [K in T]?: VideoEnriched[]
    }
  | undefined

const titleDictionary = {
  diy: 'DIY 🛠️',
  kunst: 'Kunst 🎨',
  sport: 'Sport ⚽️',
  science: 'Science 🧬',
  natur: 'Natur 🌳',
  mad: 'Mad 🥘',
  viden: 'Viden 🧠',
}

export function HomeScreen() {
  const isWeb = Platform.OS === 'web'

  const highlightedVideos = useQuery(api.videos.queries.listByHighlighted)

  const videos: CategorizedVideos<(typeof categories)[number]> = useQuery(
    api.videos.queries.getByCategories,
    {
      categories: ['diy', 'kunst'],
    }
  )

  return (
    <YStack>
      <ScrollView p="$3" pr="$0" showsVerticalScrollIndicator={false}>
        <YStack space="$1">
          <H4>Vi anbefaler 🌟</H4>
          <VideoCarousel height={300} videos={shuffle(highlightedVideos)} />
        </YStack>
        {categories.map((category) => (
          <YStack space="$1">
            <H4>{titleDictionary[category]}</H4>
            <VideoCarousel height={240} videos={shuffle(videos?.[`${category}`])} />
          </YStack>
        ))}
      </ScrollView>
    </YStack>
  )
}

function shuffle(array: VideoEnriched[] | undefined) {
  if (!array) return []
  let currentIndex = array.length,
    randomIndex

  // While there remain elements to shuffle.
  while (currentIndex > 0) {
    // Pick a remaining element.
    randomIndex = Math.floor(Math.random() * currentIndex)
    currentIndex--

    // And swap it with the current element.
    ;[array[currentIndex], array[randomIndex]] = [array[randomIndex]!, array[currentIndex]!]
  }

  return array
}