add theme

frontend/src/components/LectureList.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 
 import MiniatureList from "../items/MiniatureList.vue";
-import {defineProps} from "vue";
-import {lectureListStore} from "../stores/dataStore.ts";
+import {defineProps, ref} from "vue";
+import {historyListStore, lectureListStore} from "../stores/dataStore.ts";
 import InPlayListIcon from "../assets/Icons/InPlayListIcon.vue";
 import Trash from "../assets/Icons/Trash.vue";
 import SwitchTab from "../items/SwitchTab.vue";
@@ -14,32 +14,51 @@ const props = defineProps({
   }
 });
 
+const nav = ref("lecture");
+
+const switchNav = (tabName: string) => {
+  nav.value = tabName;
+}
+
 const lecturesList = lectureListStore();
+const historyList = historyListStore();
 </script>
 
 <template>
   <div :class="props.popup == true ? 'lecture-list--popup' : 'lecture-list'">
     <div class="lecture-list__content">
       <div class="lecture-list__header">
-        <div>
+        <div v-if="nav == 'lecture'">
           <button>
             <Trash color="#FF306F"/>
           </button>
-          <div><p>{{ lecturesList.lectures.length }}</p>
+          <div>
+            <p>{{ lecturesList.lectures.length }}</p>
             <InPlayListIcon/>
           </div>
         </div>
-        <switch-tab
+        <SwitchTab
+            :selectedTab="nav == 'lecture' ? 1 : 2"
             tab1-label="Liste de lecture"
+            :tab1-click="() => {switchNav('lecture')}"
             tab2-label="Historique de lecture"
+            :tab2-click="() => {switchNav('history')}"
         />
       </div>
       <MiniatureList
+          v-if="nav == 'lecture'"
           v-for="lecture in lecturesList.lectures"
           :thumbnail="lecture.thumbnail"
           :title="lecture.title"
           :name="lecture.name"
       />
+      <MiniatureList
+          v-if="nav == 'history'"
+          v-for="history in historyList.history"
+          :thumbnail="history.thumbnail"
+          :title="history.title"
+          :name="history.name"
+      />
     </div>
   </div>
 </template>