added play and shuffle non functional buttons

src/components/playlist.rs

@@ -84,7 +84,10 @@ pub fn PlayListPopUp(playlist: Playlist, set_show_playlist: WriteSignal<bool>) -
                 <h1>{playlist.name.clone()}</h1>
                 <p>{move || songs.get().len()} songs {move || convert_to_text_time(total_duration(songs))}</p>
             </div>
-            
+            <div class="options">
+                <button><Icon class="button-icons" icon=icondata::BsPlayFill />Play</button>
+                <button><Icon class="button-icons" icon=icondata::IoShuffle />Shuffle</button>
+            </div>
             <ul class="songs">
                 {
                     move || songs.get().iter().enumerate().map(|(index,song)| view! {

style/sidebar.scss

@@ -251,6 +251,29 @@
               color: #aaa;
             }
           }
+          .options {
+            display: flex;
+            button {
+              background-color: white;
+              border: none;
+              color: black;
+              font-size: 1rem;
+              padding: .6rem;
+              border-radius: 5px;
+              cursor: pointer;
+              transition: background-color 0.3s ease;
+              display: flex;
+              flex-direction: row;
+              align-items: center;
+              margin-right: 10px;
+              margin-top: 1rem;
+              margin-left: 5px;
+              .button-icons {
+                margin-right: 7px;
+                font-size: 1.3rem;
+              }  
+            }
+          }
           .songs {
             list-style: none;
             padding: 0;