fix build errors

src/App.tsx

@@ -1,7 +1,7 @@
 import './spinner.css'
 import { MovieWall } from './objects/movie-wall'
 import { HamburgerMenu } from './objects/HamburgerMenu'
-import { useState, useEffect, useRef, useLayoutEffect } from 'react'
+import { useState, useEffect } from 'react'
 import tmdb from './objects/tmdb'
 import { Sidebar } from './objects/sidebar'
 import { Movie } from './objects/movie-wall'
@@ -81,7 +81,8 @@ function App() {
     while (movies.length < desiredLength && movies.length >= 6) { desiredLength = desiredLength - 6 }
     return movies.slice(0, desiredLength)
   }
-
+  //TODO: search bar
+  //TODO: genre search?
   return (
     <>
 

src/hooks/useWindowDimensions.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect } from 'react';
 
 function getWindowDimensions() {
 	const { innerWidth: width, innerHeight: height } = window;

src/objects/movie-wall.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useLayoutEffect, useRef, useState } from "react"
+import React, { useState } from "react"
 import { Config } from "../App"
 import tmdb from "./tmdb"
 
@@ -48,7 +48,7 @@ export function MovieWall({ movies, setMovies, config, setChosenMovie, setSimila
 
     const borderColor = isHighlighted ? "border-orange-300" : "border-gray-300"
     posters.push(
-      <Poster className={"w-16 sm:w-28 xl:w-36 aspect-poster rounded-xl border-2 overflow-hidden relative " + borderColor} isHighlighted={isHighlighted} movie={movie} key={movie.id} index={i}
+      <Poster className={"w-16 sm:w-28 xl:w-36 aspect-poster rounded-xl border-2 overflow-hidden relative " + borderColor} movie={movie} key={movie.id} index={i}
         listSimilar={tmdb.getSimilar}
         config={config}
         setMovies={setMovies}
@@ -69,12 +69,11 @@ interface PosterProps extends React.ComponentPropsWithRef<"div"> {
   setMovies: React.Dispatch<React.SetStateAction<Array<Movie>>>;
   setChosenMovie: React.Dispatch<React.SetStateAction<Movie>>;
   setSimilarMoviesAvailable: React.Dispatch<React.SetStateAction<boolean>>;
-  isHighlighted: boolean;
   className: string
 }
 
 
-function Poster({ className, movie, config, listSimilar, setMovies, setChosenMovie, setSimilarMoviesAvailable, isHighlighted }: PosterProps) {
+function Poster({ className, movie, config, listSimilar, setMovies, setChosenMovie, setSimilarMoviesAvailable }: PosterProps) {
   function clickHandler() {
     setChosenMovie(movie)
     listSimilar(config, movie, setMovies, setSimilarMoviesAvailable)
@@ -83,7 +82,7 @@ function Poster({ className, movie, config, listSimilar, setMovies, setChosenMov
   const [hasError, setHasError] = useState(false)
   return <><div className={className} >
     {isLoading ?
-      <div className="m-auto text-center h-fit w-fit">
+      <div className="m-auto h-full w-full flex justify-center items-center">
         <div className="lds-spinner align-middle"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div>
       : <div className="z-10 h-full w-full absolute cursor-pointer hover:bg-white/40" onClick={() => clickHandler()}></div>
     }

src/objects/sidebar.tsx

@@ -18,6 +18,7 @@ export function Sidebar({ movie, similarMoviesAvailable, watchProviders, config,
     config.language == "en" ?
       "Summary unavailable." :
       ""
+  //TODO: fix initial screen 
   return <div id="sidebar" className={className}>
     <div className="sm:h-14 w-fit flex justify-center items-center">
       <h1 className="font-bold text-base sm:text-lg sm:text-wrap my-1 sm:my-4 overflow-hidden text-center text-balance">{movie?.title ?? "loading"}</h1>