add icon save and upload file and fix switch tab

.idea/workspace.xml

@@ -5,15 +5,13 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="5847035d-0a9b-4d26-a129-e3ed88eb8bd7" name="Changes" comment="">
+      <change afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/SaveIcon.vue" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/UploadIcon.vue" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/frontend/src/assets/Global.scss" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Global.scss" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/frontend/src/components/Header.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/Header.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/frontend/src/components/Player.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/Player.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/components/LectureList.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/LectureList.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/frontend/src/items/Button.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/items/Button.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/items/Miniature.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/items/Miniature.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/frontend/src/items/Loader.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/items/Loader.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/frontend/src/items/SwitchTab.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/items/SwitchTab.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/frontend/src/items/PlaylistItem.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/items/PlaylistItem.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/frontend/src/items/UserLoginInfo.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/items/UserLoginInfo.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/frontend/src/views/Home.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/views/Home.vue" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -108,7 +106,7 @@
       <workItem from="1744962250986" duration="599000" />
       <workItem from="1744963762669" duration="7674000" />
       <workItem from="1745243053934" duration="15721000" />
-      <workItem from="1746260006352" duration="16911000" />
+      <workItem from="1746260006352" duration="20086000" />
     </task>
     <servers />
   </component>

frontend/src/assets/Icons/SaveIcon.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15 8H8.6C8.03995 8 7.75992 8 7.54601 7.89101C7.35785 7.79513 7.20487 7.64215 7.10899 7.45399C7 7.24008 7 6.96005 7 6.4V3M17 21V14.6C17 14.0399 17 13.7599 16.891 13.546C16.7951 13.3578 16.6422 13.2049 16.454 13.109C16.2401 13 15.9601 13 15.4 13H8.6C8.03995 13 7.75992 13 7.54601 13.109C7.35785 13.2049 7.20487 13.3578 7.10899 13.546C7 13.7599 7 14.0399 7 14.6V21M21 9.32548V16.2C21 17.8802 21 18.7202 20.673 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7202 21 17.8802 21 16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V7.8C3 6.11984 3 5.27976 3.32698 4.63803C3.6146 4.07354 4.07354 3.6146 4.63803 3.32698C5.27976 3 6.11984 3 7.8 3H14.6745C15.1637 3 15.4083 3 15.6385 3.05526C15.8425 3.10425 16.0376 3.18506 16.2166 3.29472C16.4184 3.4184 16.5914 3.59135 16.9373 3.93726L20.0627 7.06274C20.4086 7.40865 20.5816 7.5816 20.7053 7.78343C20.8149 7.96237 20.8957 8.15746 20.9447 8.36154C21 8.59171 21 8.8363 21 9.32548Z" class="iconFixedStrokeWhite" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+
+</template>
+
+<style scoped>
+
+</style>

frontend/src/assets/Icons/Top.vue

@@ -4,7 +4,7 @@
 
 <template>
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M21 3H3M12 21V7M12 7L5 14M12 7L19 14" class="iconDefaultStrokeReverse" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M21 3H3M12 21V7M12 7L5 14M12 7L19 14" class="iconFixedStrokeWhite" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
   </svg>
 
 </template>

frontend/src/assets/Icons/UploadIcon.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M21 15V16.2C21 17.8802 21 18.7202 20.673 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7202 21 17.8802 21 16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V15M17 8L12 3M12 3L7 8M12 3V15" class="iconFixedStrokeWhite" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+
+</template>
+
+<style scoped>
+
+</style>

frontend/src/components/Header.vue

@@ -4,6 +4,7 @@ import InputSearch from "../items/InputSearch.vue";
 import PlaylistIcon from "../assets/Icons/PlaylistIcon.vue";
 import LectureListIcon from "../assets/Icons/LectureListIcon.vue";
 import {lectureListIsOpen, lectureListPopUp, playlistPopUp, playlistsIsOpen} from "../stores/globalStore.ts";
+import UploadIcon from "../assets/Icons/UploadIcon.vue";
 
 const lectureList = lectureListIsOpen();
 const playlists = playlistsIsOpen();
@@ -18,11 +19,29 @@ const togglePlaylists = () => {
   playlists.togglePlaylists();
 };
 
+const uploadMyFile = () => {
+  const input = document.createElement("input");
+  input.type = "file";
+  input.accept = ".MP4, .MP3, .WAV, .M4A, .AAC, .OGG, .FLAC";
+  input.click();
+  input.onchange = async (e) => {
+    const file = (e.target as HTMLInputElement).files?.[0];
+    if (file) {
+      const formData = new FormData();
+      formData.append("file", file);
+      console.log("File uploaded:", file);
+    }
+  };
+};
+
 </script>
 
 <template>
   <header>
     <InputSearch />
+    <button @click="uploadMyFile">
+      <UploadIcon />
+    </button>
     <button @click="togglePlaylists" v-if="playlistPopUp().popUp">
       <PlaylistIcon />
     </button>

frontend/src/components/LectureList.vue

@@ -28,15 +28,6 @@ const historyList = historyListStore();
   <div :class="props.popup == true ? 'lecture-list--popup' : 'lecture-list'">
     <div class="lecture-list__content">
       <div class="lecture-list__header">
-        <div v-if="nav == 'lecture'">
-          <button>
-            <Trash color="#FF306F"/>
-          </button>
-          <div>
-            <p>{{ lecturesList.lectures.length }}</p>
-            <InPlayListIcon/>
-          </div>
-        </div>
         <SwitchTab
             :selectedTab="nav == 'lecture' ? 1 : 2"
             tab1-label="Liste de lecture"
@@ -44,6 +35,15 @@ const historyList = historyListStore();
             tab2-label="Historique de lecture"
             :tab2-click="() => {switchNav('history')}"
         />
+        <div class="sub_header" v-if="nav == 'lecture'">
+          <div>
+            <p>{{ lecturesList.lectures.length }}</p>
+            <InPlayListIcon/>
+          </div>
+          <button>
+            <Trash color="#FF306F"/>
+          </button>
+        </div>
       </div>
       <MiniatureList
           v-if="nav == 'lecture'"
@@ -87,12 +87,27 @@ const historyList = historyListStore();
   overflow: hidden;
 
   &__header {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    box-sizing: border-box;
+
+
+    .sub_header {
+      flex : 1 1 auto;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 5px;
+      box-sizing: border-box;
+
 
       div {
         display: flex;
+        align-content: center;
         align-items: center;
-      justify-content: end;
+      }
-      gap: 5px;
     }
   }
 

frontend/src/items/Miniature.vue

@@ -2,6 +2,7 @@
 import { defineProps } from 'vue';
 import Add from "../assets/Icons/Add.vue";
 import Play from "../assets/Icons/Play.vue";
+import SaveIcon from "../assets/Icons/SaveIcon.vue";
 
 const props = defineProps<{
   thumbnail: string;
@@ -17,12 +18,21 @@ const props = defineProps<{
       <img :src="props.thumbnail" alt="Video Thumbnail" />
       <p class="miniature__img__duration" >{{duration}}</p>
       <div class="miniature__img__overlay">
-        <button>
+        <button
+          title="Ajouter à la liste de lecture"
+        >
           <Add />
         </button>
-        <button>
+        <button
+          title="Jouer le song maintenant"
+        >
           <Play />
         </button>
+        <button
+          title="Ajouter à la playlist"
+        >
+          <SaveIcon />
+        </button>
       </div>
     </div>
     <div class="miniature__info">

frontend/src/items/SwitchTab.vue

@@ -8,6 +8,7 @@ const props = defineProps<{
   tab1Label?: string;
   tab2Click?: (event: MouseEvent) => void;
   tab2Label?: string;
+  tab1Lecture?: number;
 }>();
 
 </script>
@@ -22,7 +23,7 @@ const props = defineProps<{
 
 <style scoped>
 .tab-container {
-  width: 100%;
+  width: 79%;
   display: flex;
   flex-direction: row;
   align-items: flex-start;
@@ -30,7 +31,7 @@ const props = defineProps<{
   padding: 2px;
   background-color: var(--neutral-50);
   border-radius: 9px;
-  margin: 10px 20px 0px 20px;
+  margin-right: 5px;
 }
 
 .indicator {