Persist filters and favorites using web storage

src/components/CharacterDetailCard.css

@@ -167,6 +167,10 @@
   filter: brightness(0) invert(1);
 }
 
+.detail-star-favorite {
+  filter: brightness(0) saturate(100%) invert(84%) sepia(85%) saturate(829%) hue-rotate(359deg) brightness(105%) contrast(104%);
+}
+
 @media (max-width: 600px) {
   .detail-overlay {
     padding: 1rem;

src/components/CharacterDetailCard.tsx

@@ -13,6 +13,8 @@ type CharacterDetailCardProps = {
   onClose: () => void;
   onPrevious: () => void;
   onNext: () => void;
+  isFavorite: boolean;
+  onToggleFavorite: () => void;
 }
 
 type Episode = {
@@ -21,7 +23,7 @@ type Episode = {
   episode: string;
 }
 
-export default function CharacterDetailCard({ character, onClose, onPrevious, onNext }: CharacterDetailCardProps) {
+export default function CharacterDetailCard({ character, onClose, onPrevious, onNext, isFavorite, onToggleFavorite }: CharacterDetailCardProps) {
 
   const [episodes, setEpisodes] = useState<Episode[]>([]);
 
@@ -61,8 +63,21 @@ export default function CharacterDetailCard({ character, onClose, onPrevious, on
         <div className='detail-info'>
           <div className="detail-heading">
             <h2>{character.name}</h2>
-            <button type='button' className='detail-favorite-button' aria-label={`Add ${character.name} to favorites`}>
-              <img src={Star} alt="" className='detail-star' />
+            <button
+              type='button'
+              className='detail-favorite-button'
+              onClick={onToggleFavorite}
+              aria-label={
+                isFavorite
+                  ? `Remove ${character.name} from favorites`
+                  : `Add ${character.name} to favorites`
+              }
+            >
+              <img
+                src={Star}
+                alt=""
+                className={`detail-star ${isFavorite ? 'detail-star-favorite' : ''}`}
+              />
             </button>
           </div>
 

src/pages/CharactersPage.tsx

@@ -20,12 +20,42 @@ export default function CharactersPage() {
     const [characters, setCharacters] = useState<Character[]>([]);
     const [selectedCharacter, setSelectedCharacter] = useState<Character | null>(null);
     const [searchQuery, setsearchQuery] = useState("");
-    const [selectedFilters, setSelectedFilters] = useState<Record<FilterCategory, string[]>>({
-        gender: [],
-        species: [],
-        status: []
+    const [selectedFilters, setSelectedFilters] = useState<Record<FilterCategory, string[]>>(() => {
+        const storedFilters = sessionStorage.getItem("selectedFilters");
+
+        if (storedFilters) {
+            return JSON.parse(storedFilters);
+        }
+
+        return {
+            gender: [],
+            species: [],
+            status: []
+        };
+    });
+    const [favoriteCharacterIds, setFavoriteCharacterIds] = useState<number[]>(() => {
+        const storedFavorites = localStorage.getItem("favoriteCharacterIds");
+
+        if (storedFavorites) {
+            return JSON.parse(storedFavorites);
+        }
+
+        return [];
     });
-    const [favoriteCharacterIds, setFavoriteCharacterIds] = useState<number[]>([]);
+
+    useEffect(() => {
+        sessionStorage.setItem(
+            "selectedFilters",
+            JSON.stringify(selectedFilters)
+        );
+    }, [selectedFilters]);
+
+    useEffect(() => {
+        localStorage.setItem(
+            "favoriteCharacterIds",
+            JSON.stringify(favoriteCharacterIds)
+        );
+    }, [favoriteCharacterIds]);
 
     useEffect(() => {
         async function fetchCharacters() {
@@ -150,6 +180,8 @@ export default function CharactersPage() {
                     onClose={() => setSelectedCharacter(null)}
                     onPrevious={showPreviousCharacter}
                     onNext={showNextCharacter}
+                    isFavorite={favoriteCharacterIds.includes(selectedCharacter.id)}
+                    onToggleFavorite={() => handleToggleFavorite(selectedCharacter.id)}
                 />
             )}
         </main>