CSS Fixes - Scrollbars, Album page, and making constants

Reviewed-on: LibreTunes/LibreTunes#124

src/albumdata.rs

@@ -1,11 +1,14 @@
 use crate::models::Artist;
 use crate::components::dashboard_tile::DashboardTile;
+use serde::{Serialize, Deserialize};
 
 use chrono::NaiveDate;
 
 /// Holds information about an album
 /// 
 /// Intended to be used in the front-end
+
+#[derive(Serialize, Deserialize, Clone)]
 pub struct AlbumData {
 	/// Album id
 	pub id: i32,

src/api/album.rs

@@ -0,0 +1,33 @@
+use leptos::*;
+use crate::albumdata::AlbumData;
+use crate::songdata::SongData;
+
+use cfg_if::cfg_if;
+
+cfg_if! {
+	if #[cfg(feature = "ssr")] {
+		use leptos::server_fn::error::NoCustomError;
+		use crate::database::get_db_conn;
+	}
+}
+
+#[server(endpoint = "album/get")]
+pub async fn get_album(id: i32) -> Result<AlbumData, ServerFnError> {
+	use crate::models::Album;
+	let db_con = &mut get_db_conn();
+	let album = Album::get_album_data(id,db_con)
+		.map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error getting album: {}", e)))?;
+	Ok(album)
+}
+
+#[server(endpoint = "album/get_songs")]
+pub async fn get_songs(id: i32) -> Result<Vec<SongData>, ServerFnError> {
+	use crate::models::Album;
+	use crate::auth::get_logged_in_user;
+	let user = get_logged_in_user().await?;
+	let db_con = &mut get_db_conn();
+	// TODO: NEEDS SONG DATA QUERIES
+	let songdata = Album::get_song_data(id,user,db_con)
+		.map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error getting song data: {}", e)))?;
+	Ok(songdata)
+}

src/api/mod.rs

@@ -1,3 +1,4 @@
 pub mod history;
 pub mod profile;
 pub mod songs;
+pub mod album;

src/app.rs

@@ -7,6 +7,7 @@ use leptos_router::*;
 use crate::pages::login::*;
 use crate::pages::signup::*;
 use crate::pages::profile::*;
+use crate::pages::albumpage::*;
 use crate::error_template::{AppError, ErrorTemplate};
 use crate::util::state::GlobalState;
 
@@ -44,6 +45,7 @@ pub fn App() -> impl IntoView {
                         <Route path="search" view=Search />
                         <Route path="user/:id" view=Profile />
                         <Route path="user" view=Profile />
+                        <Route path="album/:id" view=AlbumPage />
                     </Route>
                     <Route path="/login" view=Login />
                     <Route path="/signup" view=Signup />

src/auth.rs

@@ -87,6 +87,7 @@ pub async fn logout() -> Result<(), ServerFnError> {
 	auth_session.logout().await
 		.map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error getting auth session: {}", e)))?;
 
+	leptos_axum::redirect("/login");
 	Ok(())
 }
 

src/components.rs

@@ -8,3 +8,4 @@ pub mod upload;
 pub mod song_list;
 pub mod loading;
 pub mod error;
+pub mod album_info;

src/components/album_info.rs

@@ -0,0 +1,25 @@
+use leptos::leptos_dom::*;
+use leptos::*;
+use crate::albumdata::AlbumData;
+
+#[component]
+pub fn AlbumInfo(albumdata: AlbumData) -> impl IntoView {
+	view! {
+		<div class="album-info">
+			<img class="album-image" src={albumdata.image_path} alt="dashboard-tile" />
+			<div class="album-body">
+				<p class="album-title">{albumdata.title}</p>
+				<div class="album-artists">
+					{
+						albumdata.artists.iter().map(|artist| {
+							view! {
+								<a class="album-artist" href={format!("/artist/{}", artist.id.unwrap())}>{artist.name.clone()}</a>
+							}
+						}).collect::<Vec<_>>()
+					}
+				</div>
+			</div>
+		</div>
+	}.into_view()
+}
+

src/components/personal.rs

@@ -1,6 +1,8 @@
 use leptos::leptos_dom::*;
 use leptos::*;
 use leptos_icons::*;
+use crate::auth::logout;
+use crate::util::state::GlobalState;
 
 #[component]
 pub fn Personal() -> impl IntoView {
@@ -14,18 +16,66 @@ pub fn Personal() -> impl IntoView {
 #[component]
 pub fn Profile() -> impl IntoView {
     let (dropdown_open, set_dropdown_open) = create_signal(false);
+	let user = GlobalState::logged_in_user();
     
 	let open_dropdown = move |_| {
         set_dropdown_open.update(|value| *value = !*value);
-        log!("opened dropdown");
     };
+
+    let user_profile_picture = move || {
+        user.get().and_then(|user| {
+            if let Some(user) = user {
+				if user.id.is_none() {
+					return None;
+				}
+				Some(format!("/assets/images/profile/{}.webp", user.id.unwrap()))
+			} else {
+				None
+			}
+        })
+    };
+
     view! {
         <div class="profile-container">
+            <div class="profile-name">
+                <Suspense
+                    fallback=|| view!{
+                        <h1>Not Logged In</h1>
+                    }>
+					<Show
+						when=move || user.get().map(|user| user.is_some()).unwrap_or(false)
+						fallback=|| view!{
+							<h1>Not Logged In</h1>
+						}>
+                    	<h1>{move || user.get().map(|user| user.map(|user| user.username))}</h1>
+					</Show>
+                </Suspense>
+            </div>
             <div class="profile-icon" on:click=open_dropdown>
-                <Icon icon=icondata::CgProfile />
+				<Suspense fallback=|| view! { <Icon icon=icondata::CgProfile width="45" height="45"/> }>
+					<Show 
+						when=move || user.get().map(|user| user.is_some()).unwrap_or(false)
+						fallback=|| view! { <Icon icon=icondata::CgProfile width="45" height="45"/> }
+					>
+						<object class="profile-image" data={user_profile_picture} type="image/webp">
+							<Icon class="profile-image" icon=icondata::CgProfile width="45" height="45"/>
+						</object>
+					</Show>
+				</Suspense>
             </div>
             <div class="dropdown-container" style={move || if dropdown_open() {"display: flex"} else {"display: none"}}>
+				<Suspense
+					fallback=|| view!{
 						<DropDownNotLoggedIn />
+					}>
+					<Show
+						when=move || user.get().map(|user| user.is_some()).unwrap_or(false)
+						fallback=|| view!{
+							<DropDownNotLoggedIn />
+						}>
+						<DropDownLoggedIn />
+					</Show>
+				</Suspense>
             </div>
         </div>
     }
@@ -33,10 +83,33 @@ pub fn Profile() -> impl IntoView {
 #[component]
 pub fn DropDownNotLoggedIn() -> impl IntoView {
     view! {
-        <div class="dropdown-not-logged">
+        <div class="dropdown-logged">
-            <h1>Not Logged in!</h1>
+            <h1>Not Logged In</h1>
             <a href="/login"><button class="auth-button">Log In</button></a>
-            <a href="/signup"><button class="auth-button">Sign up</button></a>
+            <a href="/signup"><button class="auth-button">Sign Up</button></a>
+        </div>
+    }
+}
+#[component]
+pub fn DropDownLoggedIn() -> impl IntoView {
+    
+	let logout = move |_| {
+        spawn_local(async move {
+            let result = logout().await;
+            if let Err(err) = result {
+                log!("Error logging out: {:?}", err);
+            } else {
+				let user = GlobalState::logged_in_user();
+				user.refetch();
+                log!("Logged out successfully");
+            }
+        });
+    };
+
+    view! {
+        <div class="dropdown-logged">
+            <h1>"Logged In"</h1>
+            <button on:click=logout class="auth-button">Log Out</button>
         </div>
     }
 }

src/components/search.rs

@@ -1,152 +1,10 @@
-use html::Li;
 use leptos::*;
-use crate::search::search;
-use crate::song::Song;
-use crate::models::Album;
-use crate::models::Artist;
-use crate::models::Song;
-use crate::util::state::GlobalState;
-use leptos::ev::*;
-use leptos::leptos_dom::*;
-use leptos_icons::*;
-
-const OPTIONS_BTN_SIZE: &str = "2.5rem";
 
 #[component]
 pub fn Search() -> impl IntoView {
-
-	let status = GlobalState::play_status();
-
-    let search_query = create_rw_signal(String::new());
-	let search_results = create_rw_signal((Vec::<(Album, f32)>::new(), Vec::<(Artist, f32)>::new(), Vec::<(Song, f32)>::new()));
-    let search_limit = 10;
-
-    let on_input = move |e: Event| {
-        search_query.set(event_target_value(&e));
-
-        log!("Search Query: {:?}", search_query.get_untracked());
-
-        spawn_local(async move {
-            log!("Searching for: {:?}", search_query.get_untracked());
-			let results = search(search_query.get_untracked(), search_limit).await;
-
-			match results {
-				Ok((albums, artists, songs)) => {
-					search_results.set((albums, artists, songs));
-				}
-				Err(err) => {
-					log!("Error searching albums: {:?}", err);
-				}
-			}
-        });
-    };
-
-    let on_disabled = move |_e: FocusEvent| {
-		status.update(|status| {
-			status.search_active = false;
-		});
-        log!("Search Bar Disabled");
-    };
-
-    let on_enabled = move |_e: FocusEvent| {
-        status.update(|status| {
-            status.search_active = true;
-        });
-        log!("Search Bar Enabled");
-    };
-
-	let prevent_focus = move |e: MouseEvent| {
-		e.prevent_default();
-	};
-
     view! {
         <div class="search-container home-component">
-			<div class="search-bar">
+            <h1>Searching...</h1>
-				<input type="search" placeholder="Search" on:input=on_input on:blur=on_disabled on:focus=on_enabled/>
-			</div>
-			<div class="search-results">
-				// Display 3 columns of search results: songs, albums, and artists
-				<ul class="search-result-list">
-					{move || search_results.with(|results| -> Vec<leptos::HtmlElement<Li>> {
-						let mut song_list = Vec::new();
-						for (song, _) in results.2.clone() {
-							song_list.push(view! {
-								<li class="search-result">
-									<div class="result-container">
-										<Song song_image_path=match song.image_path.clone() {
-											Some(path) => path,
-											None => "".to_string()
-										} song_title=song.title.clone() song_artist="".to_string() />
-										<div class="right-side-result">
-											<div class="search-item-type">
-												"(Song)"
-											</div>
-											<button class="search-result-options" on:mousedown=prevent_focus>
-												<Icon class="search-result-options-icon" width=OPTIONS_BTN_SIZE height=OPTIONS_BTN_SIZE icon=icondata::BsThreeDotsVertical />
-											</button>
-										</div>
-									</div>
-								</li>
-							});
-						}
-						song_list
-					})}
-				</ul>
-				<ul class="search-result-list">
-					{move || search_results.with(|results| -> Vec<leptos::HtmlElement<Li>> {
-						let mut album_list = Vec::new();
-						for (album, _) in results.0.clone() {
-							album_list.push(view! {
-								<li class="search-result">
-									<div class="result-container">
-										<div class="search-result-album">
-											{album.title.clone()}
-											{match album.release_date {
-												Some(date) => format!(" ({})", date),
-												None => "".to_string()
-											}}
-										</div>
-										<div class="right-side-result">
-											<div class="search-item-type">
-												"(Album)"
-											</div>
-											<button class="search-result-options" on:mousedown=prevent_focus>
-												<Icon class="search-result-options-icon" width=OPTIONS_BTN_SIZE height=OPTIONS_BTN_SIZE icon=icondata::BsThreeDotsVertical />
-											</button>
-										</div>
-									</div>
-								</li>
-							});
-						}
-						album_list
-					})}
-				</ul>
-				<ul class="search-result-list">
-					{move || search_results.with(|results| -> Vec<leptos::HtmlElement<Li>> {
-						let mut artist_list = Vec::new();
-						for (artist, _) in results.1.clone() {
-							artist_list.push(view! {
-								<li class="search-result">
-									<div class="result-container">
-										<div class="search-result-artist">
-											{artist.name.clone()}
-										</div>
-										<div class="right-side-result">
-											<div class="search-item-type">
-												"(Artist)"
-											</div>
-											<button class="search-result-options" on:mousedown=prevent_focus>
-												<Icon class="search-result-options-icon" width=OPTIONS_BTN_SIZE height=OPTIONS_BTN_SIZE icon=icondata::BsThreeDotsVertical />
-											</button>
-										</div>
-									</div>
-								</li>
-							});
-						}
-						artist_list
-					})}
-				</ul>
-			</div>
         </div>
     }
 }

src/components/upload.rs

@@ -124,7 +124,7 @@ pub fn Upload(open: RwSignal<bool>) -> impl IntoView {
 						>
 							<ul class="artist_results search-results">
 								{
-									move || filtered_artists.get().iter().enumerate().map(|(_index,(filtered_artist, _score))| view! {
+									move || filtered_artists.get().iter().enumerate().map(|(_index,filtered_artist)| view! {
 										<Artist artist=filtered_artist.clone() artists=artists set_artists=set_artists set_filtered=set_filtered_artists/>
 									}).collect::<Vec<_>>()
 								}
@@ -142,7 +142,7 @@ pub fn Upload(open: RwSignal<bool>) -> impl IntoView {
 						>
 							<ul class="album_results search-results">
 								{
-									move || filtered_albums.get().iter().enumerate().map(|(_index,(filtered_album, _score))| view! {
+									move || filtered_albums.get().iter().enumerate().map(|(_index,filtered_album)| view! {
 										<Album album=filtered_album.clone() _albums=albums set_albums=set_albums set_filtered=set_filtered_albums/>
 									}).collect::<Vec<_>>()
 								}
@@ -182,15 +182,15 @@ pub fn Upload(open: RwSignal<bool>) -> impl IntoView {
 }
 
 #[component]
-pub fn Artist(artist: Artist, artists: ReadSignal<String>, set_artists: WriteSignal<String>, set_filtered: WriteSignal<Vec<(Artist, f32)>>) -> impl IntoView {
+pub fn Artist(artist: Artist, artists: ReadSignal<String>, set_artists: WriteSignal<String>, set_filtered: WriteSignal<Vec<Artist>>) -> impl IntoView {
 	// Converts artist name to artist id and adds it to the artist input
 	let add_artist = move |_| {
 		//Create an empty string to hold previous artist ids
 		let mut s: String = String::from("");
 		//Get the current artist input
-		let all_artists: String = artists.get();
+		let all_artirts: String = artists.get();
 		//Split the input into a vector of artists separated by commas
-		let mut ids: Vec<&str> = all_artists.split(",").collect();
+		let mut ids: Vec<&str> = all_artirts.split(",").collect();
 		//If there is only one artist in the input, get their id equivalent and add it to the string
 		if ids.len() == 1 {
 			let value_str = match artist.id.clone() {
@@ -227,7 +227,7 @@ pub fn Artist(artist: Artist, artists: ReadSignal<String>, set_artists: WriteSig
 	}
 }
 #[component]
-pub fn Album(album: Album, _albums: ReadSignal<String>, set_albums: WriteSignal<String>, set_filtered: WriteSignal<Vec<(Album, f32)>>) -> impl IntoView {
+pub fn Album(album: Album, _albums: ReadSignal<String>, set_albums: WriteSignal<String>, set_filtered: WriteSignal<Vec<Album>>) -> impl IntoView {
 	//Converts album title to album id to upload a song
 	let add_album = move |_| {
 		let value_str = match album.id.clone() {

src/models.rs

@@ -6,8 +6,10 @@ use cfg_if::cfg_if;
 cfg_if! {
 	if #[cfg(feature = "ssr")] {
 		use diesel::prelude::*;
-		use crate::database::PgPooledConn;
+		use crate::database::*;
 		use std::error::Error;
+		use crate::songdata::SongData;
+		use crate::albumdata::AlbumData;
 	}
 }
 
@@ -498,7 +500,7 @@ impl Album {
 		Ok(())
 	}
 
-	/// Get songs by this artist from the database
+	/// Get songs by this album from the database
 	/// 
 	/// The `id` field of this album must be present (Some) to get songs
 	/// 
@@ -525,13 +527,160 @@ impl Album {
 
 		Ok(my_songs)
 	}
+
+	/// Obtain an album from its albumid
+	/// # Arguments
+	/// 
+	/// * `album_id` - The id of the album to select
+	/// * `conn` - A mutable reference to a database connection
+	/// 
+	/// # Returns
+	/// 
+	/// * `Result<Album, Box<dyn Error>>` - A result indicating success with the desired album, or an error
+	/// 
+	#[cfg(feature = "ssr")]
+	pub fn get_album_data(album_id: i32, conn: &mut PgPooledConn) -> Result<AlbumData, Box<dyn Error>> {
+		use crate::schema::*;
+
+		let album: Vec<(Album, std::option::Option<Artist>)> = albums::table
+			.find(album_id)
+			.left_join(songs::table.on(albums::id.nullable().eq(songs::album_id)))
+			.left_join(song_artists::table.inner_join(artists::table).on(songs::id.eq(song_artists::song_id)))
+			.select((
+				albums::all_columns,
+				artists::all_columns.nullable()
+			))
+			.distinct()
+			.load(conn)?;
+
+		let mut artist_list: Vec<Artist> = Vec::new();
+
+		for (_, artist) in album {
+			if let Some(artist) = artist {
+				artist_list.push(artist);
+			}
+		}
+		// Get info of album
+		let albuminfo = albums::table
+			.filter(albums::id.eq(album_id))
+			.first::<Album>(conn)?;
+
+		let img = albuminfo.image_path.unwrap_or("/assets/images/placeholders/MusicPlaceholder.svg".to_string());
+
+		let albumdata = AlbumData {
+			id: albuminfo.id.unwrap(),
+			title: albuminfo.title,
+			artists: artist_list,
+			release_date: albuminfo.release_date,
+			image_path: img
+		};
+
+		Ok(albumdata)
+	}
+
+	/// Obtain an album from its albumid
+	/// # Arguments
+	/// 
+	/// * `album_id` - The id of the album to select
+	/// * `conn` - A mutable reference to a database connection
+	/// 
+	/// # Returns
+	/// 
+	/// * `Result<Album, Box<dyn Error>>` - A result indicating success with the desired album, or an error
+	/// 
+	#[cfg(feature = "ssr")]
+	pub fn get_song_data(album_id: i32, user_like_dislike: Option<User>, conn: &mut PgPooledConn) -> Result<Vec<SongData>, Box<dyn Error>> {
+		use crate::schema::*;
+		use std::collections::HashMap;
+		
+		let song_list = if let Some(user_like_dislike) = user_like_dislike {
+			let user_like_dislike_id = user_like_dislike.id.unwrap();
+			let song_list: Vec<(Album, Option<Song>, Option<Artist>, Option<(i32, i32)>, Option<(i32, i32)>)> =
+				albums::table
+					.find(album_id)
+					.left_join(songs::table.on(albums::id.nullable().eq(songs::album_id)))
+					.left_join(song_artists::table.inner_join(artists::table).on(songs::id.eq(song_artists::song_id)))
+					.left_join(song_likes::table.on(songs::id.eq(song_likes::song_id).and(song_likes::user_id.eq(user_like_dislike_id))))
+					.left_join(song_dislikes::table.on(songs::id.eq(song_dislikes::song_id).and(song_dislikes::user_id.eq(user_like_dislike_id))))
+					.select((
+						albums::all_columns,
+						songs::all_columns.nullable(),
+						artists::all_columns.nullable(),
+						song_likes::all_columns.nullable(),
+						song_dislikes::all_columns.nullable()
+					))
+					.order(songs::track.asc())
+					.load(conn)?;
+			song_list
+		} else {
+			let song_list: Vec<(Album, Option<Song>, Option<Artist>)> =
+				albums::table
+					.find(album_id)
+					.left_join(songs::table.on(albums::id.nullable().eq(songs::album_id)))
+					.left_join(song_artists::table.inner_join(artists::table).on(songs::id.eq(song_artists::song_id)))
+					.select((
+						albums::all_columns,
+						songs::all_columns.nullable(),
+						artists::all_columns.nullable()
+					))
+					.order(songs::track.asc())
+					.load(conn)?;
+
+			let song_list:  Vec<(Album, Option<Song>, Option<Artist>, Option<(i32, i32)>, Option<(i32, i32)>)> =
+				song_list.into_iter().map( |(album, song, artist)| (album, song, artist, None, None) ).collect();
+			song_list
+		};
+
+		let mut album_songs: HashMap<i32, SongData> = HashMap::with_capacity(song_list.len());
+		
+		for (album, song, artist, like, dislike) in song_list {
+			if let Some(song) = song {				
+				if let Some(stored_songdata) = album_songs.get_mut(&song.id.unwrap()) {
+					// If the song is already in the map, update the artists
+					if let Some(artist) = artist {
+						stored_songdata.artists.push(artist);
+					}
+				} else {
+					let like_dislike = match (like, dislike) {
+						(Some(_), Some(_)) => Some((true, true)),
+						(Some(_), None) => Some((true, false)),
+						(None, Some(_)) => Some((false, true)),
+						_ => None,
+					};
+		
+					let image_path = song.image_path.unwrap_or(
+						album.image_path.clone().unwrap_or("/assets/images/placeholders/MusicPlaceholder.svg".to_string()));
+		
+					let songdata = SongData {
+						id: song.id.unwrap(),
+						title: song.title,
+						artists: artist.map(|artist| vec![artist]).unwrap_or_default(),
+						album: Some(album),
+						track: song.track,
+						duration: song.duration,
+						release_date: song.release_date,
+						song_path: song.storage_path,
+						image_path: image_path,
+						like_dislike: like_dislike,
+					};
+		
+					album_songs.insert(song.id.unwrap(), songdata);
+				}
+			} 
+		}
+		
+		// Sort the songs by date
+		let mut songdata: Vec<SongData> = album_songs.into_values().collect();
+		songdata.sort_by(|a, b| b.track.cmp(&a.track));
+		Ok(songdata)
+	}
 }
 
 /// Model for a song
 #[cfg_attr(feature = "ssr", derive(Queryable, Selectable, Insertable))]
 #[cfg_attr(feature = "ssr", diesel(table_name = crate::schema::songs))]
 #[cfg_attr(feature = "ssr", diesel(check_for_backend(diesel::pg::Pg)))]
-#[derive(Serialize, Deserialize, Clone, Debug)]
+#[derive(Serialize, Deserialize)]
 pub struct Song {
 	/// A unique id for the song
 	#[cfg_attr(feature = "ssr", diesel(deserialize_as = i32))]

src/pages.rs

@@ -1,3 +1,4 @@
 pub mod login;
 pub mod signup;
 pub mod profile;
+pub mod albumpage;

src/pages/albumpage.rs

@@ -0,0 +1,88 @@
+use leptos::leptos_dom::*;
+use leptos::*;
+use leptos_router::*;
+use crate::components::song_list::*;
+use crate::api::album::*;
+use crate::components::album_info::*;
+
+
+#[derive(Params, PartialEq)]
+struct AlbumParams {
+    id: i32
+}
+
+#[component]
+pub fn AlbumPage() -> impl IntoView {
+    let params = use_params::<AlbumParams>();
+
+    let id = move || {params.with(|params| {
+            params.as_ref()
+                .map(|params| params.id)
+                .map_err(|e| e.clone())
+        })
+    };
+
+    let song_list = create_resource(
+        id,
+        |value| async move {
+            match value {
+                Ok(v) => {get_songs(v).await},
+                Err(e) => {Err(ServerFnError::Request(format!("Error getting song data: {}", e).into()))},
+            }
+        },
+    );
+
+    let albumdata = create_resource(
+        id,
+        |value| async move {
+            match value {
+                Ok(v) => {get_album(v).await},
+                Err(e) => {Err(ServerFnError::Request(format!("Error getting song data: {}", e).into()))},
+            }
+        },
+    );
+
+    view! {
+        <div class="album-page-container">
+            <div class="album-header">
+                <Suspense
+                    fallback=move || view! { <p class="loading">"Loading..."</p> }
+                >
+                    {move || {
+                        albumdata.with( |albumdata| {
+                            match albumdata {
+                                Some(Ok(s)) => {
+                                    view! { <AlbumInfo albumdata=(*s).clone() /> }
+                                },
+                                Some(Err(e)) => {
+                                    view! { <div class="error">{format!("Error loading album : {}",e)}</div> }.into_view()
+                                },
+                                None => {view! { }.into_view()}
+                            }
+                        })
+                    }}
+                </Suspense>
+            </div>
+            <div class="album-songs">
+            <Suspense
+                fallback=move || view! { <p class="loading">"Loading..."</p> }
+            >
+                {move || {
+                    song_list.with( |song_list| {
+                        match song_list {
+                            Some(Ok(s)) => {
+                                view! { <SongList songs=(*s).clone()/> }
+                            },
+                            Some(Err(e)) => {
+                                view! { <div class="error">{format!("Error loading albums: : {}",e)}</div> }.into_view()
+                            },
+                            None => {view! { }.into_view()}
+                        }
+                    })
+                }}
+            </Suspense>
+            </div>
+        </div>
+    }
+}
+

src/playbar.rs

@@ -489,7 +489,7 @@ pub fn PlayBar() -> impl IntoView {
 
     // Listen for key down events -- arrow keys don't seem to trigger key press events
     let _arrow_key_handle = window_event_listener(ev::keydown, move |e: ev::KeyboardEvent| {
-        if e.key() == "ArrowRight" && status.with_untracked(|status| status.search_active) == false {
+        if e.key() == "ArrowRight" {
             e.prevent_default();
             log!("Right arrow key pressed, skipping forward by {} seconds", ARROW_KEY_SKIP_TIME);
 
@@ -502,7 +502,7 @@ pub fn PlayBar() -> impl IntoView {
                 error!("Unable to skip forward: Unable to get current duration");
             }
 
-        } else if e.key() == "ArrowLeft" && status.with_untracked(|status| status.search_active) == false {
+        } else if e.key() == "ArrowLeft" {
             e.prevent_default();
             log!("Left arrow key pressed, skipping backward by {} seconds", ARROW_KEY_SKIP_TIME);
 
@@ -519,7 +519,7 @@ pub fn PlayBar() -> impl IntoView {
 
     // Listen for space bar presses to play/pause
     let _space_bar_handle = window_event_listener(ev::keypress, move |e: ev::KeyboardEvent| {
-        if e.key() == " " && status.with_untracked(|status| status.search_active) == false {
+        if e.key() == " " {
             e.prevent_default();
             log!("Space bar pressed, toggling play/pause");
 

src/playstatus.rs

@@ -11,8 +11,6 @@ pub struct PlayStatus {
     pub playing: bool,
 	/// Whether or not the queue is open
 	pub queue_open: bool,
-	/// Whether or not the search bar is active (useful for knowing when spacebar to play/pause, etc should be disabled)
-	pub search_active: bool,
 	/// A reference to the HTML audio element
     pub audio_player: Option<NodeRef<Audio>>,
 	/// A queue of songs that have been played, ordered from oldest to newest
@@ -58,7 +56,6 @@ impl Default for PlayStatus {
         Self {
             playing: false,
 			queue_open: false,
-			search_active: false,
             audio_player: None,
             history: VecDeque::new(),
             queue: VecDeque::new(),

src/search.rs

@@ -39,11 +39,10 @@ if #[cfg(feature = "ssr")] {
 /// # Returns
 /// A Result containing a vector of albums if the search was successful, or an error if the search failed
 #[server(endpoint = "search_albums")]
-pub async fn search_albums(query: String, limit: i64) -> Result<Vec<(Album, f32)>, ServerFnError> {
+pub async fn search_albums(query: String, limit: i64) -> Result<Vec<Album>, ServerFnError> {
 	use crate::schema::albums::dsl::*;
 
 	Ok(albums
-		.select((albums::all_columns(), trgm_distance(title, query.clone())))
 		.filter(trgm_similar(title, query.clone()))
 		.order_by(trgm_distance(title, query))
 		.limit(limit)
@@ -59,11 +58,10 @@ pub async fn search_albums(query: String, limit: i64) -> Result<Vec<(Album, f32)
 /// # Returns
 /// A Result containing a vector of artists if the search was successful, or an error if the search failed
 #[server(endpoint = "search_artists")]
-pub async fn search_artists(query: String, limit: i64) -> Result<Vec<(Artist, f32)>, ServerFnError> {
+pub async fn search_artists(query: String, limit: i64) -> Result<Vec<Artist>, ServerFnError> {
 	use crate::schema::artists::dsl::*;
 
 	Ok(artists
-		.select((artists::all_columns(), trgm_distance(name, query.clone())))
 		.filter(trgm_similar(name, query.clone()))
 		.order_by(trgm_distance(name, query))
 		.limit(limit)
@@ -79,11 +77,10 @@ pub async fn search_artists(query: String, limit: i64) -> Result<Vec<(Artist, f3
 /// # Returns
 /// A Result containing a vector of songs if the search was successful, or an error if the search failed
 #[server(endpoint = "search_songs")]
-pub async fn search_songs(query: String, limit: i64) -> Result<Vec<(Song, f32)>, ServerFnError> {
+pub async fn search_songs(query: String, limit: i64) -> Result<Vec<Song>, ServerFnError> {
 	use crate::schema::songs::dsl::*;
 
 	Ok(songs
-		.select((songs::all_columns(), trgm_distance(title, query.clone())))
 		.filter(trgm_similar(title, query.clone()))
 		.order_by(trgm_distance(title, query))
 		.limit(limit)
@@ -98,10 +95,9 @@ pub async fn search_songs(query: String, limit: i64) -> Result<Vec<(Song, f32)>,
 /// `limit` - The maximum number of results to return for each type
 /// 
 /// # Returns
-/// A Result containing a tuple of vectors of albums, artists, and songs, 
+/// A Result containing a tuple of vectors of albums, artists, and songs if the search was successful,
-/// along with respective similarity scores, if the search was successful.
 #[server(endpoint = "search")]
-pub async fn search(query: String, limit: i64) -> Result<(Vec<(Album, f32)>, Vec<(Artist, f32)>, Vec<(Song, f32)>), ServerFnError> {
+pub async fn search(query: String, limit: i64) -> Result<(Vec<Album>, Vec<Artist>, Vec<Song>), ServerFnError> {
 	let albums = search_albums(query.clone(), limit);
 	let artists = search_artists(query.clone(), limit);
 	let songs = search_songs(query.clone(), limit);

src/song.rs

@@ -3,9 +3,9 @@ use leptos::*;
 #[component]
 pub fn Song(song_image_path: String, song_title: String, song_artist: String) -> impl IntoView {
 	view!{
-		<div class="song">
+		<div class="queue-song">
 			<img src={song_image_path} alt={song_title.clone()} />
-			<div class="song-info">
+			<div class="queue-song-info">
 				<h3>{song_title}</h3>
 				<p>{song_artist}</p>
 			</div>

src/users.rs

@@ -117,7 +117,7 @@ pub async fn validate_user(credentials: UserCredentials) -> Result<Option<User>,
 
 /// Get a user from the database by username or email
 /// Returns a Result with the user if found, None if not found, or an error if there was a problem
-#[server(endpoint = "get_user")]
+#[server(endpoint = "find_user")]
 pub async fn get_user(username_or_email: String) -> Result<Option<User>, ServerFnError> {
 	let mut user = find_user(username_or_email).await?;
 

style/album_page.scss

@@ -0,0 +1,95 @@
+@import 'theme.scss';
+
+.album-page-container {
+	$album-header-height: calc(40% - 2px);
+	
+	width: $center-viewport-width;
+	max-height: $center-viewport-height;
+
+	overflow: hidden;
+
+	margin-top:2px;
+
+	.album-header {
+		$album-header-padding: 20px;
+
+		height: $album-header-height;
+		width: calc(100% - 2*$album-header-padding);
+		margin: 2px;
+		
+		padding: $album-header-padding;
+
+		background-image: linear-gradient($accent-color, $background-color);
+		border-radius: 15px;
+
+		.album-info {
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	.album-songs {
+		width: 100%;
+		max-height: calc(100% - $album-header-height);
+		overflow-x: hidden;
+		overflow-y: scroll;
+	}
+}
+
+.album-info {
+	display: flex;
+	flex-flow: row nowrap;
+	justify-content: space-around;
+
+	.album-image {
+		max-width: 80%;
+		max-height: 80%;
+		box-shadow: 10px 10px 50px -10px $background-color;
+	}
+
+	.album-body {
+		display: flex;
+		flex-flow: column nowrap;
+		justify-content: center;
+
+		.album-title {
+			color: $text-controls-color;
+			font-size: 40px;
+			font-weight: bold;
+			margin:15px;
+			text-align: center;
+		}
+
+		.album-artists {
+			display: flex;
+			flex-flow: row wrap;
+			justify-content: space-around;
+			align-content: space-around;
+			margin:15px;
+
+			color: $text-controls-color;
+			font-size: 20px;
+			
+			.album-artist {
+				margin: 5px;
+				text-align: center;
+				text-decoration: underline;
+			}
+		}
+	}
+
+	a {
+		color: $text-controls-color;
+	}
+	a:visited {
+		color: $text-controls-color;
+	  }
+	a:hover {
+		color: $controls-hover-color;
+	}
+
+	a:active {
+		color: $controls-click-color;
+	}
+	
+}

style/dashboard.scss

@@ -1,6 +1,9 @@
 @import "theme.scss";
 
 .dashboard-container {
+  max-width: $center-viewport-width;
+  max-height: $center-viewport-height;
+
   .dashboard-header {
     font-size: 1.2rem;
     font-weight: 300;

style/home.scss

@@ -1,17 +1,20 @@
 @import "theme.scss";
 
 .home-container {
-  margin-top: 0;
+  width: 100vw;
-  width: 100%;
   height: 100vh;
   display: flex;
   flex-direction: row;
 }
+
 .home-component {
   background: #1c1c1c;
-  width: calc(100% - 22rem - 16rem);
+
+  width: calc($center-viewport-width - 4px - 2rem);
+  height: calc($center-viewport-height - 4px - 1rem);
+
   margin: 2px;
-  padding: 0.2rem 1.5rem $playbar-size 1rem;
+  padding: 0.5rem 1rem;
   border-radius: 0.5rem;
   overflow: scroll;
 }

style/main.scss

@@ -15,6 +15,8 @@
 @import 'song_list.scss';
 @import 'profile.scss';
 @import 'loading.scss';
+@import 'album_page.scss';
+@import 'scrollbar.scss';
 
 body {
   font-family: sans-serif;

style/personal.scss

@@ -1,9 +1,9 @@
 @import "theme.scss";
 
 .personal-container {
-  width: 16rem;
+  width: $personal-width;
   background: #1c1c1c;
-  margin: 2px;
+  margin: $personal-margin;
   border-radius: 0.5rem;
 
   .profile-container {
@@ -11,9 +11,19 @@
     border-radius: 0.4rem;
     margin: 0.2rem;
     min-height: 6rem;
-    border: 2px solid rgba(89, 89, 89, 0.199);
+    border: 0.2rem solid rgba(89, 89, 89, 0.199);
     padding: 0.5rem;
 
+    .profile-name {
+      display: flex;
+      flex-direction: column;
+      margin-left: 0.5rem;
+      h1 {
+        font-size: 1.2rem;
+        margin: 0;
+      }
+    }
+
     .profile-icon {
       display: inline-flex;
       padding: 0.2rem;
@@ -21,17 +31,23 @@
       font-size: 2rem;
       border-radius: 50%;
       transition: all 0.3s;
-      height: max-content;
+      height: 45;
+      width: 45;
       margin-left: auto;
+      .profile-image {
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+      }
     }
 
     .profile-icon:hover {
-      transform: scale(1.1);
+      transform: scale(1.05);
       background-color: rgba(255, 255, 255, 0.1);
     }
 
     .profile-icon:active {
-      transform: scale(0.8);
+      transform: scale(0.95);
     }
     .dropdown-container {
       position: absolute;
@@ -41,10 +57,10 @@
       border-radius: 0.5rem;
       width: 10rem;
       z-index: 1;
-      background-color: red;
+      background-color: #1c1c1c;
-      border: 1px solid grey;
+      border: 0.2rem solid rgba(89, 89, 89, 0.199);
 
-      .dropdown-not-logged {
+      .dropdown-logged {
         display: flex;
         flex-direction: column;
         width: 100%;
@@ -53,21 +69,29 @@
         h1 {
           font-size: 1.2rem;
         }
+        .profile-info {
+          display: flex;
+          width: 100%;
+          justify-content: center;
+          border-top: 0.2rem solid rgba(89, 89, 89, 0.199);
+          border-bottom: 0.2rem solid rgba(89, 89, 89, 0.199);
+          h1 {
+            font-size: 1rem;
+            margin-top: 0.5rem;
+          }
+        }
         .auth-button {
+          margin-top: 0.5rem;
+          padding: 0.5rem;
+          border-radius: 0.5rem;
+          background-color: #1c1c1c;
+          border: 0.2rem solid rgba(89, 89, 89, 0.199);
+          color: white;
+          cursor: pointer;
+          transition: all 0.3s;
+          margin-bottom: 0.5rem;
         }
       }
     }
-    .dropdown-container:before {
-      content: "";
-      position: absolute;
-      top: -0.4rem;
-      right: 0.92rem;
-      width: 10px;
-      height: 10px;
-      transform: rotate(45deg);
-      background-color: red;
-      border-left: 1px solid grey;
-      border-top: 1px solid grey;
-    }
   }
 }

style/queue.scss

@@ -5,12 +5,10 @@
 	top: 0;
 	right: 0; 
 	width: 400px; 
-	height: calc(100% - 87px); /* Adjust height to fit the queue */
+	height: calc(100% - 78.9px); /* Adjust height to fit the queue */
 	background-color: #424242; /* Queue background color */
 	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 
 	overflow-y: auto; /* Add scroll bar when queue is too long */
-	margin: 5px;
-	border-radius: 5px;
   
 	.queue-header {
 	  background-color: #333; /* Header background color */
@@ -32,6 +30,31 @@
 			padding-top: 5px;
 			padding-bottom: 5px;
 			
+			.queue-song {
+				display: flex;
+				align-items: center;
+				padding: 10px;
+				border-bottom: 1px solid #ccc; /* Separator line color */
+			
+				img {
+					max-width: 50px; /* Adjust maximum width for images */
+					margin-right: 10px; /* Add spacing between image and text */
+					border-radius: 5px; /* Add border radius to image */
+				}
+			
+				.queue-song-info {
+					h3 {
+						margin: 0; /* Remove default margin for heading */
+						color: #fff; /* Adjust text color for song */
+					}
+			
+					p {
+						margin: 0; /* Remove default margin for paragraph */
+						color: #aaa; /* Adjust text color for artist */
+					}
+				}
+			}
+
 			button {
 				background: none;
 				border: none;

style/scrollbar.scss

@@ -0,0 +1,12 @@
+::-webkit-scrollbar {
+    width: 10px;
+    background-blend-mode: $scrollbar-background-color;
+}
+
+::-webkit-scrollbar-thumb {
+    background: $scrollbar-handle-color;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: $scrollbar-handle-hover-color;
+}

style/search.scss

@@ -1,92 +1,4 @@
 @import "theme.scss";
 
 .search-container {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-
-  .search-bar {
-    input[type="search"] {
-      width: 100%;
-      padding: 0.5rem 1rem;
-      font-size: 1rem;
-      border: 1px solid $search-border;
-      border-radius: 4px;
-      transition: border-color 0.2s;
-
-      &:focus {
-        border-color: $accent-color;
-        outline: none;
-      }
-    }
-  }
-
-  .search-results {
-    display: flex;
-    justify-content: space-between;
-    gap: 1rem;
-
-    .search-result-list {
-      flex: 1;
-      list-style: none;
-      margin: 0;
-      padding: 0;
-
-      .search-result {
-        display: flex;
-        flex-direction: column;
-        gap: 0.5rem;
-        padding: 0.5rem;
-        border: 1px solid $search-border;
-        border-radius: 4px;
-        background-color: $search-background;
-        transition: box-shadow 0.2s;
-        margin: 0.2rem;
-        min-height: 6rem;
-
-        .result-container {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-
-          .search-result-album,
-          .search-result-artist {
-            font-size: 1rem;
-            font-weight: bold;
-          }
-
-          .search-item-type {
-            font-size: 0.9rem;
-            color: $text-controls-color;
-          }
-
-          .right-side-result {
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-
-            .search-result-options {
-              background: none;
-              border: none;
-              padding: 0;
-              cursor: pointer;
-
-              .search-result-options-icon {
-                fill: $text-controls-color;
-                transition: fill 0.2s;
-
-                &:hover {
-                  fill: $controls-hover-color;
-                }
-
-                &:active {
-                  fill: $controls-click-color;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
 }

style/sidebar.scss

@@ -2,13 +2,15 @@
 
 .sidebar-container {
   background-color: transparent;
-  width: 22rem;
+  width: $sidebar-width;
-  height: calc(100% - 75px);
+  height: $center-viewport-height;
+  margin: 2px;
+
   .sidebar-top-container {
     border-radius: 1rem;
     background-color: #1c1c1c;
     height: 9rem;
-    margin: 3px;
+    margin: 2px 0px;
     padding: 0.1rem 1rem 1rem 1rem;
     position: relative;
     .header {
@@ -68,7 +70,7 @@
   .sidebar-bottom-container {
     border-radius: 1rem;
     background-color: #1c1c1c;
-    margin: 3px;
+    margin: 2px 0px;
     margin-top: 6px;
     padding: 0.2rem 1rem 1rem 1rem;
     height: calc(100% - 9rem);

style/song.scss

@@ -1,22 +0,0 @@
-.song {
-	display: flex;
-	align-items: center;
-
-	img {
-		max-width: 50px; /* Adjust maximum width for images */
-		margin-right: 10px; /* Add spacing between image and text */
-		border-radius: 5px; /* Add border radius to image */
-	}
-
-	.song-info {
-		h3 {
-			margin: 0; 
-			color: #fff; /* Adjust text color for song */
-		}
-
-		p {
-			margin: 0; 
-			color: #aaa; /* Adjust text color for artist */
-		}
-	}
-}

style/theme.scss

@@ -10,12 +10,23 @@ $controls-click-color: #909090;
 $play-bar-background-color: #212121;
 $play-grad-start: #0a0533;
 $play-grad-end: $accent-color;
+$border-color: #7851ed;
 $queue-background-color: $play-bar-background-color;
-$search-background: $play-bar-background-color;
+
-$search-border: #3f3f3f;
+$scrollbar-background-color: #101010;
+$scrollbar-handle-color:#292929;
+$scrollbar-handle-hover-color:#5c5b5b;
 
 $auth-inputs: #796dd4;
 $auth-containers: white;
 
 $dashboard-tile-size: 200px;
 $playbar-size: 75px;
+$personal-width: 16rem;
+$sidebar-width: 22rem;
+
+$personal-margin: 2px;
+$sidebar-margin: 2px;
+
+$center-viewport-width: calc(100vw - $personal-width - $sidebar-width - 2*$personal-margin - 2*$sidebar-margin);
+$center-viewport-height: calc(100vh - $playbar-size);