better UX/UI

frontend/src/components/Toggle.vue

@@ -1,29 +1,33 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed } from 'vue'
 
-const selectedOption = ref('film')
-
-const toggleOption = () => {
-  selectedOption.value = selectedOption.value === 'film' ? 'anime' : 'film'
-  emit('update:modelValue', selectedOption.value)
-}
+const props = defineProps({
+  modelValue: {
+    type: String,
+    required: true
+  }
+})
 
 const emit = defineEmits(['update:modelValue'])
+
+const isAnimeSelected = computed(() => props.modelValue === 'anime')
+
+const toggleOption = () => {
+  emit('update:modelValue', isAnimeSelected.value ? 'film' : 'anime')
+}
 </script>
 
 <template>
   <div class="switch-container">
     <span class="switch-label-left">Film</span>
     <label class="switch">
-      <input type="checkbox" :checked="selectedOption === 'anime'" @change="toggleOption">
+      <input type="checkbox" :checked="isAnimeSelected" @change="toggleOption">
       <span class="slider round"></span>
     </label>
     <span class="switch-label-right">Anime</span>
   </div>
 </template>
 
-<script setup lang="ts"></script>
-
 <style scoped>
 .switch-container {
   display: flex;

frontend/src/views/Details.vue

@@ -5,6 +5,7 @@
         <img :src="imageUrl" :alt="item.name" class="details-image" />
         <div class="details-title-container">
           <h1 class="details-title">{{ item.name }}</h1>
+          <h3>★ {{ item.score }}</h3>
           <div class="details-description">
             <p>{{ item.plot }}</p>
           </div>
@@ -86,6 +87,7 @@ const imageUrl: string = <string>route.params.imageUrl
 }
 
 .details-description {
+  padding-top: 10px;
   line-height: 1.5;
 }
 </style>

frontend/src/views/HomeView.vue

@@ -1,20 +1,39 @@
 <script setup lang="ts">
 import search from "@/api/api";
 import Toggle from "@/components/Toggle.vue";
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import type { MediaItem } from "@/api/interfaces";
 import Card from "@/components/Card.vue";
+import { onBeforeRouteLeave } from 'vue-router'
 
 const selectedOption = ref('film')
 const searchedTitle = ref('')
 const searchResults = ref<MediaItem[]>([])
 
+const storeSearchResults = () => {
+  localStorage.setItem('searchResults', JSON.stringify(searchResults.value))
+  localStorage.setItem('selectedOption', selectedOption.value)
+}
+
+const retrieveSearchResults = () => {
+  const storedResults = localStorage.getItem('searchResults')
+  if (storedResults) {
+    searchResults.value = JSON.parse(storedResults)
+    selectedOption.value = localStorage.getItem('selectedOption') || 'film'
+  }
+}
+
+watch(searchResults, storeSearchResults, { deep: true })
+
+retrieveSearchResults()
+
 function searchTitle() {
   search(searchedTitle.value, selectedOption.value).then((res) => {
     searchResults.value = res.media
   }).catch((err) => {
     console.log(err)
   })
+  storeSearchResults()
 }
 </script>
 
@@ -101,7 +120,7 @@ function searchTitle() {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
-  padding: 100px 20px 20px;
+  padding: 100px 8% 20px;
   max-width: 1200px;
   margin: 0 auto;
 }
@@ -113,6 +132,7 @@ function searchTitle() {
 @media (max-width: 768px) {
   .card-container {
     grid-template-columns: repeat(2, 1fr);
+    padding: 120px 12% 20px;
   }
 }