Simplify search results and make more efficient using tokio join through general search server function

Reviewed-on: LibreTunes/LibreTunes#146

.gitignore

@@ -24,6 +24,7 @@ playwright/.cache/
 *.jpeg
 *.png
 *.gif
+*.webp
 
 # Environment variables
 .env

Cargo.lock

@@ -378,13 +378,16 @@ checksum = "baf1de4339761588bc0619e3cbc0120ee582ebb74b53b4efbf79117bd2da40fd"
 
 [[package]]
 name = "chrono"
-version = "0.4.37"
+version = "0.4.38"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8a0d04d43504c61aa6c7531f1871dd0d418d91130162063b789da00fd7057a5e"
+checksum = "a21f936df1771bf62b77f047b726c4625ff2e8aa607c01ec06e5a05bd8463401"
 dependencies = [
  "android-tzdata",
  "iana-time-zone",
+ "js-sys",
  "num-traits",
+ "serde",
+ "wasm-bindgen",
  "windows-targets 0.52.4",
 ]
 
@@ -690,11 +693,11 @@ checksum = "03fc05c17098f21b89bc7d98fe1dd3cce2c11c2ad8e145f2a44fe08ed28eb559"
 dependencies = [
  "bitflags 2.5.0",
  "byteorder",
+ "chrono",
  "diesel_derives",
  "itoa",
  "pq-sys",
  "r2d2",
- "time",
 ]
 
 [[package]]
@@ -752,10 +755,10 @@ dependencies = [
 ]
 
 [[package]]
-name = "dotenv"
-version = "0.15.0"
+name = "dotenvy"
+version = "0.15.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "77c90badedccf4105eca100756a0b1289e191f6fcbdadd3cee1d2f614f97da8f"
+checksum = "1aaf95b3e5c8f23aa320147307562d361db0ae0d51242340f558153b4eb2439b"
 
 [[package]]
 name = "drain_filter_polyfill"
@@ -1563,9 +1566,9 @@ dependencies = [
 
 [[package]]
 name = "leptos-use"
-version = "0.13.5"
+version = "0.13.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3ab8914bd0ff8ab5029521540a6e15292dcc05d0f1a791a3aa8cc31a94436bfb"
+checksum = "32d4708472867704085a2813c47cada122a6e8c3b90ccff764862c0b351bfb96"
 dependencies = [
  "cfg-if",
  "codee",
@@ -1834,10 +1837,11 @@ dependencies = [
  "axum",
  "axum-login",
  "cfg-if",
+ "chrono",
  "console_error_panic_hook",
  "diesel",
  "diesel_migrations",
- "dotenv",
+ "dotenvy",
  "flexi_logger",
  "http 1.1.0",
  "icondata",
@@ -1857,7 +1861,6 @@ dependencies = [
  "server_fn",
  "symphonia",
  "thiserror",
- "time",
  "tokio",
  "tower 0.5.1",
  "tower-http",
@@ -3441,9 +3444,9 @@ checksum = "9c8d87e72b64a3b4db28d11ce29237c246188f4f51057d65a7eab63b7987e423"
 
 [[package]]
 name = "wasm-bindgen"
-version = "0.2.93"
+version = "0.2.95"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a82edfc16a6c469f5f44dc7b571814045d60404b55a0ee849f9bcfa2e63dd9b5"
+checksum = "128d1e363af62632b8eb57219c8fd7877144af57558fb2ef0368d0087bddeb2e"
 dependencies = [
  "cfg-if",
  "once_cell",
@@ -3452,9 +3455,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-backend"
-version = "0.2.93"
+version = "0.2.95"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9de396da306523044d3302746f1208fa71d7532227f15e347e2d93e4145dd77b"
+checksum = "cb6dd4d3ca0ddffd1dd1c9c04f94b868c37ff5fac97c30b97cff2d74fce3a358"
 dependencies = [
  "bumpalo",
  "log",
@@ -3479,9 +3482,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-macro"
-version = "0.2.93"
+version = "0.2.95"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "585c4c91a46b072c92e908d99cb1dcdf95c5218eeb6f3bf1efa991ee7a68cccf"
+checksum = "e79384be7f8f5a9dd5d7167216f022090cf1f9ec128e6e6a482a2cb5c5422c56"
 dependencies = [
  "quote",
  "wasm-bindgen-macro-support",
@@ -3489,9 +3492,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-macro-support"
-version = "0.2.93"
+version = "0.2.95"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "afc340c74d9005395cf9dd098506f7f44e38f2b4a21c6aaacf9a105ea5e1e836"
+checksum = "26c6ab57572f7a24a4985830b120de1594465e5d500f24afe89e16b4e833ef68"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -3502,9 +3505,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-shared"
-version = "0.2.93"
+version = "0.2.95"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c62a0a307cb4a311d3a07867860911ca130c3494e8c2719593806c08bc5d0484"
+checksum = "65fc09f10666a9f147042251e0dda9c18f166ff7de300607007e96bdebc1068d"
 
 [[package]]
 name = "wasm-streams"

Cargo.toml

@@ -15,15 +15,13 @@ leptos = { version = "0.6", default-features = false, features = ["nightly"] }
 leptos_meta = { version = "0.6", features = ["nightly"] }
 leptos_axum = { version = "0.6", optional = true }
 leptos_router = { version = "0.6", features = ["nightly"] }
-wasm-bindgen = { version = "=0.2.93", default-features = false, optional = true }
+wasm-bindgen = { version = "=0.2.95", default-features = false, optional = true }
 leptos_icons = { version = "0.3.0" }
 icondata = { version = "0.3.0" }
-dotenv = { version = "0.15.0", optional = true }
-diesel = { version = "2.1.4", features = ["postgres", "r2d2", "time"], default-features = false, optional = true }
+diesel = { version = "2.1.4", features = ["postgres", "r2d2", "chrono"], default-features = false, optional = true }
 lazy_static = { version = "1.4.0", optional = true }
 serde = { version = "1.0.195", features = ["derive"], default-features = false }
 openssl = { version = "0.10.63", optional = true }
-time = { version = "0.3.34", features = ["serde"], default-features = false }
 diesel_migrations = { version = "2.1.0", optional = true }
 pbkdf2 = { version = "0.12.2", features = ["simple"], optional = true }
 tokio = { version = "1", optional = true, features = ["rt-multi-thread"] }
@@ -42,6 +40,8 @@ flexi_logger = { version = "0.28.0", optional = true, default-features = false }
 web-sys = "0.3.69"
 leptos-use = "0.13.5"
 image-convert = { version = "0.18.0", optional = true, default-features = false }
+chrono = { version = "0.4.38", default-features = false, features = ["serde", "clock"] }
+dotenvy = { version = "0.15.7", optional = true }
 
 [features]
 hydrate = [
@@ -50,13 +50,14 @@ hydrate = [
   "leptos_router/hydrate",
   "console_error_panic_hook",
   "wasm-bindgen",
+  "chrono/wasmbind",
 ]
 ssr = [
   "dep:leptos_axum",
   "leptos/ssr",
   "leptos_meta/ssr",
   "leptos_router/ssr",
-  "dotenv",
+  "dotenvy",
   "diesel",
   "lazy_static",
   "openssl",

migrations/2024-10-22-212759_create_playlist_tables/down.sql

@@ -0,0 +1,5 @@
+DROP INDEX playlists_owner_idx;
+DROP TABLE playlists;
+
+DROP INDEX playlist_songs_playlist_idx;
+DROP TABLE playlist_songs;

migrations/2024-10-22-212759_create_playlist_tables/up.sql

@@ -0,0 +1,17 @@
+CREATE TABLE playlists (
+    id SERIAL PRIMARY KEY,
+    created_at TIMESTAMP NOT NULL DEFAULT NOW(),
+    updated_at TIMESTAMP NOT NULL DEFAULT NOW(),
+    owner_id INTEGER REFERENCES users(id) ON DELETE CASCADE NOT NULL,
+    name TEXT NOT NULL
+);
+
+CREATE INDEX playlists_owner_idx ON playlists(owner_id);
+
+CREATE TABLE playlist_songs (
+    playlist_id INTEGER REFERENCES playlists(id) ON DELETE CASCADE NOT NULL,
+    song_id INTEGER REFERENCES songs(id) ON DELETE CASCADE NOT NULL,
+    PRIMARY KEY (playlist_id, song_id)
+);
+
+CREATE INDEX playlist_songs_playlist_idx ON playlist_songs(playlist_id);

src/albumdata.rs

@@ -1,7 +1,7 @@
 use crate::models::Artist;
 use crate::components::dashboard_tile::DashboardTile;
 
-use time::Date;
+use chrono::NaiveDate;
 
 /// Holds information about an album
 /// 
@@ -14,7 +14,7 @@ pub struct AlbumData {
 	/// Album artists
 	pub artists: Vec<Artist>,
 	/// Album release date
-	pub release_date: Option<Date>,
+	pub release_date: Option<NaiveDate>,
 	/// Path to album image, relative to the root of the web server.
 	/// For example, `"/assets/images/Album.jpg"`
 	pub image_path: String,

src/api/history.rs

@@ -1,4 +1,4 @@
-use std::time::SystemTime;
+use chrono::NaiveDateTime;
 use leptos::*;
 use crate::models::HistoryEntry;
 use crate::models::Song;
@@ -25,7 +25,7 @@ pub async fn get_history(limit: Option<i64>) -> Result<Vec<HistoryEntry>, Server
 
 /// Get the listen dates and songs of the current user.
 #[server(endpoint = "history/get_songs")]
-pub async fn get_history_songs(limit: Option<i64>) -> Result<Vec<(SystemTime, Song)>, ServerFnError> {
+pub async fn get_history_songs(limit: Option<i64>) -> Result<Vec<(NaiveDateTime, Song)>, ServerFnError> {
 	let user = get_user().await?;
 	let db_con = &mut get_db_conn();
 	let songs = user.get_history_songs(limit, db_con)

src/api/profile.rs

@@ -3,10 +3,23 @@ use server_fn::codec::{MultipartData, MultipartFormData};
 
 use cfg_if::cfg_if;
 
+use crate::songdata::SongData;
+use crate::artistdata::ArtistData;
+
+use chrono::NaiveDateTime;
+
 cfg_if! {
 	if #[cfg(feature = "ssr")] {
 		use crate::auth::get_user;
 		use server_fn::error::NoCustomError;
+
+		use crate::database::get_db_conn;
+		use diesel::prelude::*;
+		use diesel::dsl::count;
+		use crate::models::*;
+		use crate::schema::*;
+
+		use std::collections::HashMap;
 	}
 }
 
@@ -47,3 +60,241 @@ pub async fn upload_picture(data: MultipartData) -> Result<(), ServerFnError> {
 
 	Ok(())
 }
+
+/// Get a user's recent songs listened to
+/// Optionally takes a limit parameter to limit the number of songs returned.
+/// If not provided, all songs ever listend to are returned.
+/// Returns a list of tuples with the date the song was listened to
+/// and the song data, sorted by date (most recent first).
+#[server(endpoint = "/profile/recent_songs")]
+pub async fn recent_songs(for_user_id: i32, limit: Option<i64>) -> Result<Vec<(NaiveDateTime, SongData)>, ServerFnError> {
+	let mut db_con = get_db_conn();
+
+	// Get the ids of the most recent songs listened to
+	let history_items: Vec<i32> = 
+		if let Some(limit) = limit {
+			song_history::table
+				.filter(song_history::user_id.eq(for_user_id))
+				.order(song_history::date.desc())
+				.limit(limit)
+				.select(song_history::id)
+				.load(&mut db_con)?
+		} else {
+			song_history::table
+				.filter(song_history::user_id.eq(for_user_id))
+				.order(song_history::date.desc())
+				.select(song_history::id)
+				.load(&mut db_con)?
+		};
+
+	// Take the history ids and get the song data for them
+	let history: Vec<(HistoryEntry, Song, Option<Album>, Option<Artist>, Option<(i32, i32)>, Option<(i32, i32)>)>
+	= song_history::table
+		.filter(song_history::id.eq_any(history_items))
+		.inner_join(songs::table)
+		.left_join(albums::table.on(songs::album_id.eq(albums::id.nullable())))
+		.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(for_user_id))))
+		.left_join(song_dislikes::table.on(
+			songs::id.eq(song_dislikes::song_id).and(song_dislikes::user_id.eq(for_user_id))))
+		.select((
+			song_history::all_columns,
+			songs::all_columns,
+			albums::all_columns.nullable(),
+			artists::all_columns.nullable(),
+			song_likes::all_columns.nullable(),
+			song_dislikes::all_columns.nullable(),
+		))
+		.load(&mut db_con)?;
+
+	// Process the history data into a map of song ids to song data
+	let mut history_songs: HashMap<i32, (NaiveDateTime, SongData)> = HashMap::with_capacity(history.len());
+
+	for (history, song, album, artist, like, dislike) in history {
+		let song_id = history.song_id;
+
+		if let Some((_, stored_songdata)) = history_songs.get_mut(&song_id) {
+			// 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.as_ref().map(|album| album.image_path.clone()).flatten()
+					.unwrap_or("/assets/images/placeholders/MusicPlaceholder.svg".to_string()));
+
+			let songdata = SongData {
+				id: song_id,
+				title: song.title,
+				artists: artist.map(|artist| vec![artist]).unwrap_or_default(),
+				album: 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,
+			};
+
+			history_songs.insert(song_id, (history.date, songdata));
+		}
+	}
+
+	// Sort the songs by date
+	let mut history_songs: Vec<(NaiveDateTime, SongData)> = history_songs.into_values().collect();
+	history_songs.sort_by(|a, b| b.0.cmp(&a.0));
+	Ok(history_songs)
+}
+
+/// Get a user's top songs by play count from a date range
+/// Optionally takes a limit parameter to limit the number of songs returned.
+/// If not provided, all songs listened to in the date range are returned.
+/// Returns a list of tuples with the play count and the song data, sorted by play count (most played first).
+#[server(endpoint = "/profile/top_songs")]
+pub async fn top_songs(for_user_id: i32, start_date: NaiveDateTime, end_date: NaiveDateTime, limit: Option<i64>)
+	-> Result<Vec<(i64, SongData)>, ServerFnError>
+{
+	let mut db_con = get_db_conn();
+
+	// Get the play count and ids of the songs listened to in the date range
+	let history_counts: Vec<(i32, i64)> = 
+		if let Some(limit) = limit {
+			song_history::table
+				.filter(song_history::date.between(start_date, end_date))
+				.filter(song_history::user_id.eq(for_user_id))
+				.group_by(song_history::song_id)
+				.select((song_history::song_id, count(song_history::song_id)))
+				.order(count(song_history::song_id).desc())
+				.limit(limit)
+				.load(&mut db_con)?
+		} else {
+			song_history::table
+				.filter(song_history::date.between(start_date, end_date))
+				.filter(song_history::user_id.eq(for_user_id))
+				.group_by(song_history::song_id)
+				.select((song_history::song_id, count(song_history::song_id)))
+				.load(&mut db_con)?
+		};
+
+	let history_counts: HashMap<i32, i64> = history_counts.into_iter().collect();
+	let history_song_ids = history_counts.iter().map(|(song_id, _)| *song_id).collect::<Vec<i32>>();
+
+	// Get the song data for the songs listened to in the date range
+	let history_songs: Vec<(Song, Option<Album>, Option<Artist>, Option<(i32, i32)>, Option<(i32, i32)>)>
+	= songs::table
+		.filter(songs::id.eq_any(history_song_ids))
+		.left_join(albums::table.on(songs::album_id.eq(albums::id.nullable())))
+		.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(for_user_id))))
+		.left_join(song_dislikes::table.on(
+			songs::id.eq(song_dislikes::song_id).and(song_dislikes::user_id.eq(for_user_id))))
+		.select((
+			songs::all_columns,
+			albums::all_columns.nullable(),
+			artists::all_columns.nullable(),
+			song_likes::all_columns.nullable(),
+			song_dislikes::all_columns.nullable(),
+		))
+		.load(&mut db_con)?;
+
+	// Process the history data into a map of song ids to song data
+	let mut history_songs_map: HashMap<i32, (i64, SongData)> = HashMap::with_capacity(history_counts.len());
+
+	for (song, album, artist, like, dislike) in history_songs {
+		let song_id = song.id
+			.ok_or(ServerFnError::ServerError::<NoCustomError>("Song id not found in database".to_string()))?;
+
+		if let Some((_, stored_songdata)) = history_songs_map.get_mut(&song_id) {
+			// 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.as_ref().map(|album| album.image_path.clone()).flatten()
+					.unwrap_or("/assets/images/placeholders/MusicPlaceholder.svg".to_string()));
+
+			let songdata = SongData {
+				id: song_id,
+				title: song.title,
+				artists: artist.map(|artist| vec![artist]).unwrap_or_default(),
+				album: 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,
+			};
+
+			let plays = history_counts.get(&song_id)
+				.ok_or(ServerFnError::ServerError::<NoCustomError>("Song id not found in history counts".to_string()))?;
+
+			history_songs_map.insert(song_id, (*plays, songdata));
+		}
+	}
+
+	// Sort the songs by play count
+	let mut history_songs: Vec<(i64, SongData)> = history_songs_map.into_values().collect();
+	history_songs.sort_by(|a, b| b.0.cmp(&a.0));
+	Ok(history_songs)
+}
+
+/// Get a user's top artists by play count from a date range
+/// Optionally takes a limit parameter to limit the number of artists returned.
+/// If not provided, all artists listened to in the date range are returned.
+/// Returns a list of tuples with the play count and the artist data, sorted by play count (most played first).
+#[server(endpoint = "/profile/top_artists")]
+pub async fn top_artists(for_user_id: i32, start_date: NaiveDateTime, end_date: NaiveDateTime, limit: Option<i64>)
+	-> Result<Vec<(i64, ArtistData)>, ServerFnError>
+{
+	let mut db_con = get_db_conn();
+
+	let artist_counts: Vec<(i64, Artist)> = 
+		if let Some(limit) = limit {
+			song_history::table
+				.filter(song_history::date.between(start_date, end_date))
+				.filter(song_history::user_id.eq(for_user_id))
+				.inner_join(song_artists::table.on(song_history::song_id.eq(song_artists::song_id)))
+				.inner_join(artists::table.on(song_artists::artist_id.eq(artists::id)))
+				.group_by(artists::id)
+				.select((count(artists::id), artists::all_columns))
+				.order(count(artists::id).desc())
+				.limit(limit)
+				.load(&mut db_con)?
+		} else {
+			song_history::table
+				.filter(song_history::date.between(start_date, end_date))
+				.filter(song_history::user_id.eq(for_user_id))
+				.inner_join(song_artists::table.on(song_history::song_id.eq(song_artists::song_id)))
+				.inner_join(artists::table.on(song_artists::artist_id.eq(artists::id)))
+				.group_by(artists::id)
+				.select((count(artists::id), artists::all_columns))
+				.order(count(artists::id).desc())
+				.load(&mut db_con)?
+		};
+
+	let artist_data: Vec<(i64, ArtistData)> = artist_counts.into_iter().map(|(plays, artist)| {
+		(plays, ArtistData {
+			id: artist.id.unwrap(),
+			name: artist.name,
+			image_path: format!("/assets/images/artists/{}.webp", artist.id.unwrap()),
+		})
+	}).collect();
+
+	Ok(artist_data)
+}

src/app.rs

@@ -1,22 +1,22 @@
 use crate::playbar::PlayBar;
 use crate::playbar::CustomTitle;
-use crate::playstatus::PlayStatus;
 use crate::queue::Queue;
 use leptos::*;
 use leptos_meta::*;
 use leptos_router::*;
 use crate::pages::login::*;
 use crate::pages::signup::*;
+use crate::pages::profile::*;
 use crate::error_template::{AppError, ErrorTemplate};
-
+use crate::util::state::GlobalState;
 
 #[component]
 pub fn App() -> impl IntoView {
     // Provides context that manages stylesheets, titles, meta tags, etc.
     provide_meta_context();
 
-    let play_status = PlayStatus::default();
-    let play_status = create_rw_signal(play_status);
+    provide_context(GlobalState::new());
+
     let upload_open = create_rw_signal(false);
 
     view! {
@@ -25,7 +25,7 @@ pub fn App() -> impl IntoView {
         <Stylesheet id="leptos" href="/pkg/libretunes.css"/>
 
         // sets the document title
-        <CustomTitle play_status=play_status/>
+        <CustomTitle />
 
         // content for this welcome page
         <Router fallback=|| {
@@ -38,10 +38,12 @@ pub fn App() -> impl IntoView {
         }>
             <main>
                 <Routes>
-                    <Route path="" view=move || view! { <HomePage play_status=play_status upload_open=upload_open/> }>
+                    <Route path="" view=move || view! { <HomePage upload_open=upload_open/> }>
                         <Route path="" view=Dashboard />
                         <Route path="dashboard" view=Dashboard />
                         <Route path="search" view=Search />
+                        <Route path="user/:id" view=Profile />
+                        <Route path="user" view=Profile />
                     </Route>
                     <Route path="/login" view=Login />
                     <Route path="/signup" view=Signup />
@@ -54,12 +56,12 @@ pub fn App() -> impl IntoView {
 use crate::components::sidebar::*;
 use crate::components::dashboard::*;
 use crate::components::search::*;
-use crate::components::personal::*;
+use crate::components::personal::Personal;
 use crate::components::upload::*;
 
 /// Renders the home page of your application.
 #[component]
-fn HomePage(play_status: RwSignal<PlayStatus>, upload_open: RwSignal<bool>) -> impl IntoView {
+fn HomePage(upload_open: RwSignal<bool>) -> impl IntoView {
     view! {
         <div class="home-container">
             <Upload open=upload_open/>
@@ -67,8 +69,8 @@ fn HomePage(play_status: RwSignal<PlayStatus>, upload_open: RwSignal<bool>) -> i
             // This <Outlet /> will render the child route components
             <Outlet />
             <Personal />
-            <PlayBar status=play_status/>
-            <Queue status=play_status/>
+            <PlayBar />
+            <Queue />
         </div>
     }
 }

src/artistdata.rs

@@ -1,8 +1,10 @@
 use crate::components::dashboard_tile::DashboardTile;
+use serde::{Serialize, Deserialize};
 
 /// Holds information about an artist
 /// 
 /// Intended to be used in the front-end
+#[derive(Clone, Serialize, Deserialize)]
 pub struct ArtistData {
 	/// Artist id
 	pub id: i32,

src/auth.rs

@@ -57,7 +57,7 @@ pub async fn signup(new_user: User) -> Result<(), ServerFnError> {
 /// Takes in a username or email and a password in plaintext
 /// Returns a Result with a boolean indicating if the login was successful
 #[server(endpoint = "login")]
-pub async fn login(credentials: UserCredentials) -> Result<bool, ServerFnError> {
+pub async fn login(credentials: UserCredentials) -> Result<Option<User>, ServerFnError> {
 	use crate::users::validate_user;
 
 	let mut auth_session = extract::<AuthSession<AuthBackend>>().await
@@ -66,12 +66,14 @@ pub async fn login(credentials: UserCredentials) -> Result<bool, ServerFnError>
 	let user = validate_user(credentials).await
 		.map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error validating user: {}", e)))?;
 
-	if let Some(user) = user {
+	if let Some(mut user) = user {
 		auth_session.login(&user).await
 			.map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error logging in user: {}", e)))?;
-		Ok(true)
+
+		user.password = None;
+		Ok(Some(user))
 	} else {
-		Ok(false)
+		Ok(None)
 	}
 }
 
@@ -145,6 +147,19 @@ pub async fn get_user() -> Result<User, ServerFnError> {
 	auth_session.user.ok_or(ServerFnError::<NoCustomError>::ServerError("User not logged in".to_string()))
 }
 
+#[server(endpoint = "get_logged_in_user")]
+pub async fn get_logged_in_user() -> Result<Option<User>, ServerFnError> {
+	let auth_session = extract::<AuthSession<AuthBackend>>().await
+		.map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error getting auth session: {}", e)))?;
+
+	let user = auth_session.user.map(|mut user| {
+		user.password = None;
+		user
+	});
+
+	Ok(user)
+}
+
 /// Check if a user is an admin
 /// Returns a Result with a boolean indicating if the user is logged in and an admin
 #[server(endpoint = "check_admin")]

src/components.rs

@@ -6,3 +6,5 @@ pub mod dashboard_tile;
 pub mod dashboard_row;
 pub mod upload;
 pub mod song_list;
+pub mod loading;
+pub mod error;

src/components/error.rs

@@ -0,0 +1,45 @@
+use leptos::*;
+use leptos_icons::*;
+use std::fmt::Display;
+
+#[component]
+pub fn ServerError<E: Display + 'static>(
+	#[prop(optional, into, default="An Error Occurred".into())]
+	title: TextProp,
+	#[prop(optional, into)]
+	message: TextProp,
+	#[prop(optional, into)]
+	error: Option<ServerFnError<E>>,
+) -> impl IntoView {
+	view!{
+		<div class="error-container">
+			<div class="error-header">
+				<Icon icon=icondata::BiErrorSolid />
+				<h1>{title}</h1>
+			</div>
+			<p>{message}</p>
+			<p>{error.map(|error| format!("{}", error))}</p>
+		</div>
+	}
+}
+
+#[component]
+pub fn Error<E: Display + 'static>(
+	#[prop(optional, into, default="An Error Occurred".into())]
+	title: TextProp,
+	#[prop(optional, into)]
+	message: TextProp,
+	#[prop(optional, into)]
+	error: Option<E>,
+) -> impl IntoView {
+	view! {
+		<div class="error-container">
+			<div class="error-header">
+				<Icon icon=icondata::BiErrorSolid />
+				<h1>{title}</h1>
+			</div>
+			<p>{message}</p>
+			<p>{error.map(|error| format!("{}", error))}</p>
+		</div>
+	}
+}

src/components/loading.rs

@@ -0,0 +1,19 @@
+use leptos::*;
+
+/// A loading indicator
+#[component]
+pub fn Loading() -> impl IntoView {
+	view! {
+		<div class="loading"></div>
+	}
+}
+
+/// A full page, centered loading indicator
+#[component]
+pub fn LoadingPage() -> impl IntoView {
+	view!{
+		<div class="loading-page">
+			<Loading />
+		</div>
+	}
+}

src/components/search.rs

@@ -1,10 +1,152 @@
+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">
-            <h1>Searching...</h1>
-        </div>
-    }
+		<div class="search-container home-component">
+			<div class="search-bar">
+				<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/song_list.rs

@@ -1,49 +1,109 @@
+use std::rc::Rc;
+
 use leptos::*;
+use leptos::logging::*;
 use leptos_icons::*;
 
+use crate::api::songs::*;
 use crate::songdata::SongData;
 use crate::models::{Album, Artist};
+use crate::util::state::GlobalState;
 
 const LIKE_DISLIKE_BTN_SIZE: &str = "2em";
 
 #[component]
-pub fn SongList(songs: MaybeSignal<Vec<SongData>>) -> impl IntoView {
+pub fn SongList(songs: Vec<SongData>) -> impl IntoView {
+	__SongListInner(songs.into_iter().map(|song| (song, ())).collect::<Vec<_>>(), false)
+}
+
+#[component]
+pub fn SongListExtra<T>(songs: Vec<(SongData, T)>) -> impl IntoView where 
+	T: Clone + IntoView + 'static
+{
+	__SongListInner(songs, true)
+}
+
+#[component]
+fn SongListInner<T>(songs: Vec<(SongData, T)>, show_extra: bool) -> impl IntoView where
+	T: Clone + IntoView + 'static
+{
+	let songs = Rc::new(songs);
+	let songs_2 = songs.clone();
+
+	// Signal that acts as a callback for a song list item to queue songs after it in the list
+	let (handle_queue_remaining, do_queue_remaining) = create_signal(None);
+	create_effect(move |_| {
+		let clicked_index = handle_queue_remaining.get();
+
+		if let Some(index) = clicked_index {
+			GlobalState::play_status().update(|status| {
+				let song: &(SongData, T) = songs.get(index).expect("Invalid song list item index");
+
+				if status.queue.front().map(|song| song.id) == Some(song.0.id) {
+					// If the clicked song is already at the front of the queue, just play it
+					status.playing = true;
+				} else {
+					// Otherwise, add the currently playing song to the history,
+					// clear the queue, and queue the clicked song and other after it
+					if let Some(last_playing) = status.queue.pop_front() {
+						status.history.push_back(last_playing);
+					}
+
+					status.queue.clear();
+					status.queue.extend(songs.iter().skip(index).map(|(song, _)| song.clone()));
+					status.playing = true;
+				}
+			});
+		}
+	});
+
 	view! {
 		<table class="song-list">
 			{
-				songs.with(|songs| {
-					let mut first_song = true;
+				songs_2.iter().enumerate().map(|(list_index, (song, extra))| {
+					let song_id = song.id;
+					let playing = create_rw_signal(false);
 
-					songs.iter().map(|song| {
-						let playing = first_song.into();
-						first_song = false;
+					create_effect(move |_| {
+						GlobalState::play_status().with(|status| {
+							playing.set(status.queue.front().map(|song| song.id) == Some(song_id) && status.playing);
+						});
+					});
 
-						view! {
-							<SongListItem song={song.clone()} song_playing=playing />
-						}
-					}).collect::<Vec<_>>()
-				})
+					view! {
+						<SongListItem song={song.clone()} song_playing=playing.into()
+							extra={if show_extra { Some(extra.clone()) } else { None }} list_index do_queue_remaining/>
+					}
+				}).collect::<Vec<_>>()
 			}
 		</table>
 	}
 }
 
 #[component]
-pub fn SongListItem(song: SongData, song_playing: MaybeSignal<bool>) -> impl IntoView {
+pub fn SongListItem<T>(song: SongData, song_playing: MaybeSignal<bool>, extra: Option<T>,
+	list_index: usize, do_queue_remaining: WriteSignal<Option<usize>>) -> impl IntoView where
+	T: IntoView + 'static
+{
 	let liked = create_rw_signal(song.like_dislike.map(|(liked, _)| liked).unwrap_or(false));
 	let disliked = create_rw_signal(song.like_dislike.map(|(_, disliked)| disliked).unwrap_or(false));
 	
 	view! {
 		<tr class="song-list-item">
-			<td class="song-image"><SongImage image_path=song.image_path song_playing /></td>
+			<td class="song-image"><SongImage image_path=song.image_path song_playing
+				list_index do_queue_remaining /></td>
 			<td class="song-title"><p>{song.title}</p></td>
 			<td class="song-list-spacer"></td>
 			<td class="song-artists"><SongArtists artists=song.artists /></td>
 			<td class="song-list-spacer"></td>
 			<td class="song-album"><SongAlbum album=song.album /></td>
 			<td class="song-list-spacer-big"></td>
-			<td class="song-like-dislike"><SongLikeDislike liked disliked/></td>
+			<td class="song-like-dislike"><SongLikeDislike song_id=song.id liked disliked/></td>
 			<td>{format!("{}:{:02}", song.duration / 60, song.duration % 60)}</td>
+			{extra.map(|extra| view! {
+				<td class="song-list-spacer"></td>
+				<td>{extra}</td>
+			})}
 		</tr>
 	}
 }
@@ -51,13 +111,27 @@ pub fn SongListItem(song: SongData, song_playing: MaybeSignal<bool>) -> impl Int
 /// Display the song's image, with an overlay if the song is playing
 /// When the song list item is hovered, the overlay will show the play button
 #[component]
-fn SongImage(image_path: String, song_playing: MaybeSignal<bool>) -> impl IntoView {
+fn SongImage(image_path: String, song_playing: MaybeSignal<bool>, list_index: usize,
+	do_queue_remaining: WriteSignal<Option<usize>>) -> impl IntoView
+{
+	let play_song = move |_| {
+		do_queue_remaining.set(Some(list_index));
+	};
+
+	let pause_song = move |_| {
+		GlobalState::play_status().update(|status| {
+			status.playing = false;
+		});
+	};
+
 	view! {
 		<img class="song-image" src={image_path}/>
-		{if song_playing.get() {
-			view! { <Icon class="song-image-overlay song-playing-overlay" icon=icondata::BsPauseFill /> }.into_view()
+		{move || if song_playing.get() {
+			view! { <Icon class="song-image-overlay song-playing-overlay"
+				icon=icondata::BsPauseFill on:click=pause_song /> }.into_view()
 		} else {
-			view! { <Icon class="song-image-overlay hide-until-hover" icon=icondata::BsPlayFill /> }.into_view()
+			view! { <Icon class="song-image-overlay hide-until-hover"
+				icon=icondata::BsPlayFill on:click=play_song /> }.into_view()
 		}}
 	}
 }
@@ -103,7 +177,12 @@ fn SongAlbum(album: Option<Album>) -> impl IntoView {
 
 /// Display like and dislike buttons for a song, and indicate if the song is liked or disliked
 #[component]
-fn SongLikeDislike(liked: RwSignal<bool>, disliked: RwSignal<bool>) -> impl IntoView {
+fn SongLikeDislike(
+	#[prop(into)]
+	song_id: MaybeSignal<i32>,
+	liked: RwSignal<bool>,
+	disliked: RwSignal<bool>) -> impl IntoView
+{
 	let like_icon = Signal::derive(move || {
 		if liked.get() {
 			icondata::TbThumbUpFilled
@@ -136,14 +215,48 @@ fn SongLikeDislike(liked: RwSignal<bool>, disliked: RwSignal<bool>) -> impl Into
 		}
 	});
 
+	// If an error occurs, check the like/dislike status again to ensure consistency
+	let check_like_dislike = move || {
+		spawn_local(async move {
+			match get_like_dislike_song(song_id.get_untracked()).await {
+				Ok((like, dislike)) => {
+					liked.set(like);
+					disliked.set(dislike);
+				},
+				Err(_) => {}
+			}
+		});
+	};
+
 	let toggle_like = move |_| {
-		liked.set(!liked.get_untracked());
+		let new_liked = !liked.get_untracked();
+		liked.set(new_liked);
 		disliked.set(disliked.get_untracked() && !liked.get_untracked());
+		
+		spawn_local(async move {
+			match set_like_song(song_id.get_untracked(), new_liked).await {
+				Ok(_) => {},
+				Err(e) => {
+					error!("Error setting like: {}", e);
+					check_like_dislike();
+				}
+			}
+		});
 	};
 
 	let toggle_dislike = move |_| {
 		disliked.set(!disliked.get_untracked());
 		liked.set(liked.get_untracked() && !disliked.get_untracked());
+
+		spawn_local(async move {
+			match set_dislike_song(song_id.get_untracked(), disliked.get_untracked()).await {
+				Ok(_) => {},
+				Err(e) => {
+					error!("Error setting dislike: {}", e);
+					check_like_dislike();
+				}
+			}
+		});
 	};
 
 	view! {

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)| view! {
+									move || filtered_artists.get().iter().enumerate().map(|(_index,(filtered_artist, _score))| 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)| view! {
+									move || filtered_albums.get().iter().enumerate().map(|(_index,(filtered_album, _score))| 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>>) -> impl IntoView {
+pub fn Artist(artist: Artist, artists: ReadSignal<String>, set_artists: WriteSignal<String>, set_filtered: WriteSignal<Vec<(Artist, f32)>>) -> 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_artirts: String = artists.get();
+		let all_artists: String = artists.get();
 		//Split the input into a vector of artists separated by commas
-		let mut ids: Vec<&str> = all_artirts.split(",").collect();
+		let mut ids: Vec<&str> = all_artists.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>>) -> impl IntoView {
+pub fn Album(album: Album, _albums: ReadSignal<String>, set_albums: WriteSignal<String>, set_filtered: WriteSignal<Vec<(Album, f32)>>) -> impl IntoView {
 	//Converts album title to album id to upload a song
 	let add_album = move |_| {
 		let value_str = match album.id.clone() {

src/main.rs

@@ -30,7 +30,7 @@ async fn main() {
     info!("\n{}", include_str!("../ascii_art.txt"));
     info!("Starting Leptos server...");
 
-    use dotenv::dotenv;
+    use dotenvy::dotenv;
     dotenv().ok();
 
     debug!("Running database migrations...");

src/models.rs

@@ -1,5 +1,4 @@
-use std::time::SystemTime;
-use time::Date;
+use chrono::{NaiveDate, NaiveDateTime};
 use serde::{Deserialize, Serialize};
 
 use cfg_if::cfg_if;
@@ -39,8 +38,8 @@ pub struct User {
 	#[cfg_attr(feature = "ssr", diesel(deserialize_as = String))]
 	pub password: Option<String>,
 	/// The time the user was created
-	#[cfg_attr(feature = "ssr", diesel(deserialize_as = SystemTime))]
-	pub created_at: Option<SystemTime>,
+	#[cfg_attr(feature = "ssr", diesel(deserialize_as = NaiveDateTime))]
+	pub created_at: Option<NaiveDateTime>,
 	/// Whether the user is an admin
 	pub admin: bool,
 }
@@ -103,7 +102,7 @@ impl User {
 	/// 
 	#[cfg(feature = "ssr")]
 	pub fn get_history_songs(self: &Self, limit: Option<i64>, conn: &mut PgPooledConn) ->
-		Result<Vec<(SystemTime, Song)>, Box<dyn Error>> {
+		Result<Vec<(NaiveDateTime, Song)>, Box<dyn Error>> {
 		use crate::schema::songs::dsl::*;
 		use crate::schema::song_history::dsl::*;
 
@@ -467,7 +466,7 @@ pub struct Album {
 	/// The album's title
 	pub title: String,
 	/// The album's release date
-	pub release_date: Option<Date>,
+	pub release_date: Option<NaiveDate>,
 	/// The path to the album's image file
 	pub image_path: Option<String>,
 }
@@ -532,7 +531,7 @@ impl Album {
 #[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)]
+#[derive(Serialize, Deserialize, Clone, Debug)]
 pub struct Song {
 	/// A unique id for the song
 	#[cfg_attr(feature = "ssr", diesel(deserialize_as = i32))]
@@ -546,7 +545,7 @@ pub struct Song {
 	/// The duration of the song in seconds
 	pub duration: i32,
 	/// The song's release date
-	pub release_date: Option<Date>,
+	pub release_date: Option<NaiveDate>,
 	/// The path to the song's audio file
 	pub storage_path: String,
 	/// The path to the song's image file
@@ -622,7 +621,28 @@ pub struct HistoryEntry {
 	/// The id of the user who listened to the song
 	pub user_id: i32,
 	/// The date the song was listened to
-	pub date: SystemTime,
+	pub date: NaiveDateTime,
 	/// The id of the song that was listened to
 	pub song_id: i32,
 }
+
+/// Model for a playlist
+#[cfg_attr(feature = "ssr", derive(Queryable, Selectable, Insertable))]
+#[cfg_attr(feature = "ssr", diesel(table_name = crate::schema::playlists))]
+#[cfg_attr(feature = "ssr", diesel(check_for_backend(diesel::pg::Pg)))]
+#[derive(Serialize, Deserialize)]
+pub struct Playlist {
+	/// A unique id for the playlist
+	#[cfg_attr(feature = "ssr", diesel(deserialize_as = i32))]
+	pub id: Option<i32>,
+	/// The time the playlist was created
+	#[cfg_attr(feature = "ssr", diesel(deserialize_as = NaiveDateTime))]
+	pub created_at: Option<NaiveDateTime>,
+	/// The time the playlist was last updated
+	#[cfg_attr(feature = "ssr", diesel(deserialize_as = NaiveDateTime))]
+	pub updated_at: Option<NaiveDateTime>,
+	/// The id of the user who owns the playlist
+	pub owner_id: i32,
+	/// The name of the playlist
+	pub name: String,
+}

src/pages.rs

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

src/pages/login.rs

@@ -1,4 +1,5 @@
 use crate::auth::login;
+use crate::util::state::GlobalState;
 use leptos::leptos_dom::*;
 use leptos::*;
 use leptos_icons::*;
@@ -27,18 +28,29 @@ pub fn Login() -> impl IntoView {
                 username_or_email: username_or_email1,
                 password: password1
             };
+
+            let user = GlobalState::logged_in_user();
             
             let login_result = login(user_credentials).await;
             if let Err(err) = login_result {
                 // Handle the error here, e.g., log it or display to the user
                 log!("Error logging in: {:?}", err);
-            } else if let Ok(true) = login_result {
+
+                // Since we're not sure what the state is, manually refetch the user
+                user.refetch();
+            } else if let Ok(Some(login_user)) = login_result {
+                // Manually set the user to the new user, avoiding a refetch
+                user.set(Some(login_user));
+
                 // Redirect to the login page
                 log!("Logged in Successfully!");
                 leptos_router::use_navigate()("/", Default::default());
                 log!("Navigated to home page after login");
-            } else if let Ok(false) = login_result {
+            } else if let Ok(None) = login_result {
                 log!("Invalid username or password");
+
+                // User could be already logged in or not, so refetch the user
+                user.refetch();
             }
         });
     };

src/pages/profile.rs

@@ -0,0 +1,316 @@
+use leptos::*;
+use leptos_router::use_params_map;
+use leptos_icons::*;
+use server_fn::error::NoCustomError;
+
+use crate::components::dashboard_row::DashboardRow;
+use crate::components::dashboard_tile::DashboardTile;
+use crate::components::song_list::*;
+use crate::components::loading::*;
+use crate::components::error::*;
+
+use crate::api::profile::*;
+
+use crate::models::User;
+use crate::users::get_user_by_id;
+use crate::util::state::GlobalState;
+
+/// Duration in seconds backwards from now to aggregate history data for
+const HISTORY_SECS: i64 = 60 * 60 * 24 * 30;
+const HISTORY_MESSAGE: &str = "Last Month";
+
+/// How many top songs to show
+const TOP_SONGS_COUNT: i64 = 10;
+/// How many recent songs to show
+const RECENT_SONGS_COUNT: i64 = 5;
+/// How many recent artists to show
+const TOP_ARTISTS_COUNT: i64 = 10;
+
+/// Profile page
+/// Shows the current user's profile if no id is specified, or a user's profile if an id is specified in the path
+#[component]
+pub fn Profile() -> impl IntoView {
+	let params = use_params_map();
+
+	view! {
+		<div class="profile-container home-component">
+			{move || params.with(|params| {
+				match params.get("id").map(|id| id.parse::<i32>()) {
+					None => {
+						// No id specified, show the current user's profile
+						view! { <OwnProfile /> }.into_view()
+					},
+					Some(Ok(id)) => {
+						// Id specified, get the user and show their profile
+						view! { <UserIdProfile id /> }.into_view()
+					},
+					Some(Err(e)) => {
+						// Invalid id, return an error
+						view! {
+							<Error<String>
+								title="Invalid User ID"
+								error=e.to_string()
+							/>
+						}.into_view()
+					}
+				}
+			})}
+		</div>
+	}
+}
+
+/// Show the logged in user's profile
+#[component]
+fn OwnProfile() -> impl IntoView {
+	view! {
+		<Transition
+			fallback=move || view! { <LoadingPage /> }
+		>
+			{move || GlobalState::logged_in_user().get().map(|user| {
+				match user {
+					Some(user) => {
+						let user_id = user.id.unwrap();
+						view! {
+								<UserProfile user />
+								<TopSongs user_id={user_id} />
+								<RecentSongs user_id={user_id} />
+								<TopArtists user_id={user_id} />
+						}.into_view()
+					},
+					None => view! {
+						<Error<String>
+							title="Not Logged In"
+							message="You must be logged in to view your profile"
+						/>
+					}.into_view(),
+				}
+			})}
+		</Transition>
+	}
+}
+
+/// Show a user's profile by ID
+#[component]
+fn UserIdProfile(#[prop(into)] id: MaybeSignal<i32>) -> impl IntoView {
+	let user_info = create_resource(move || id.get(), move |id| {
+		get_user_by_id(id)
+	});
+
+	// Show the details if the user is found
+	let show_details = create_rw_signal(false);
+
+	view!{ 
+		<Transition
+			fallback=move || view! { <LoadingPage /> }
+		>
+			{move || user_info.get().map(|user| {
+				match user {
+					Ok(Some(user)) => {
+						show_details.set(true);
+
+						view! { <UserProfile user /> }.into_view()
+					},
+					Ok(None) => {
+						show_details.set(false);
+
+						view! {
+							<Error<String>
+								title="User Not Found"
+								message=format!("User with ID {} not found", id.get())
+							/>
+						}.into_view()
+					},
+					Err(error) => {
+						show_details.set(false);
+
+						view! {
+							<ServerError<NoCustomError>
+								title="Error Getting User"
+								error
+							/>
+						}.into_view()
+					}
+				}
+			})}
+		</Transition>
+		<div hidden={move || !show_details.get()}>
+			<TopSongs user_id={id} />
+			<RecentSongs user_id={id} />
+			<TopArtists user_id={id} />
+		</div>
+	}
+}
+
+/// Show a profile for a User object
+#[component]
+fn UserProfile(user: User) -> impl IntoView {
+	let user_id = user.id.unwrap();
+	let profile_image_path = format!("/assets/images/profile/{}.webp", user_id);
+
+	view! {
+		<div class="profile-header">
+			<object class="profile-image" data={profile_image_path.clone()} type="image/webp">
+				<Icon class="profile-image" icon=icondata::CgProfile width="75" height="75"/>
+			</object>
+			<h1>{user.username}</h1>
+		</div>
+		<div class="profile-details">
+			<p>
+				{user.email}
+				{
+					user.created_at.map(|created_at| {
+						format!(" • Joined {}", created_at.format("%B %Y"))
+					})
+				}
+				{
+					if user.admin {
+						" • Admin"
+					} else {
+						""
+					}
+				}
+			</p>
+		</div>
+	}
+}
+
+/// Show a list of top songs for a user
+#[component]
+fn TopSongs(#[prop(into)] user_id: MaybeSignal<i32>) -> impl IntoView {
+	let top_songs = create_resource(move || user_id.get(), |user_id| async move {
+		use chrono::{Local, Duration};
+		let now = Local::now();
+		let start = now - Duration::seconds(HISTORY_SECS);
+		let top_songs = top_songs(user_id, start.naive_utc(), now.naive_utc(), Some(TOP_SONGS_COUNT)).await;
+
+		top_songs.map(|top_songs| {
+			top_songs.into_iter().map(|(plays, song)| {
+				let plays = if plays == 1 {
+					format!("{} Play", plays)
+				} else {
+					format!("{} Plays", plays)
+				};
+
+				(song, plays)
+			}).collect::<Vec<_>>()
+		})
+	});
+
+	view! {
+		<h2>{format!("Top Songs {}", HISTORY_MESSAGE)}</h2>
+		<Transition
+			fallback=move || view! { <Loading /> }
+		>
+			<ErrorBoundary
+				fallback=|errors| view! {
+					{move || errors.get()
+						.into_iter()
+						.map(|(_, e)| view! { <p>{e.to_string()}</p>})
+						.collect_view()
+					}
+				}
+			>
+				{move ||
+					top_songs.get().map(|top_songs| {
+						top_songs.map(|top_songs| {
+							view! {
+								<SongListExtra songs=top_songs />
+							}
+						})
+					})
+				}
+			</ErrorBoundary>
+		</Transition>
+	}
+}
+
+/// Show a list of recently played songs for a user
+#[component]
+fn RecentSongs(#[prop(into)] user_id: MaybeSignal<i32>) -> impl IntoView {
+	let recent_songs = create_resource(move || user_id.get(), |user_id| async move {
+		let recent_songs = recent_songs(user_id, Some(RECENT_SONGS_COUNT)).await;
+
+		recent_songs.map(|recent_songs| {
+			recent_songs.into_iter().map(|(_date, song)| {
+				song
+			}).collect::<Vec<_>>()
+		})
+	});
+
+	view! {
+		<h2>"Recently Played"</h2>
+		<Transition
+			fallback=move || view! { <Loading /> }
+		>
+			<ErrorBoundary
+				fallback=|errors| view! {
+					{move || errors.get()
+						.into_iter()
+						.map(|(_, e)| view! { <p>{e.to_string()}</p>})
+						.collect_view()
+					}
+				}
+			>
+				{move ||
+					recent_songs.get().map(|recent_songs| {
+						recent_songs.map(|recent_songs| {
+							view! {
+								<SongList songs=recent_songs />
+							}
+						})
+					})
+				}
+			</ErrorBoundary>	
+		</Transition>
+	}
+}
+
+/// Show a list of top artists for a user
+#[component]
+fn TopArtists(#[prop(into)] user_id: MaybeSignal<i32>) -> impl IntoView {
+	let top_artists = create_resource(move || user_id.get(), |user_id| async move {
+		use chrono::{Local, Duration};
+
+		let now = Local::now();
+		let start = now - Duration::seconds(HISTORY_SECS);
+		let top_artists = top_artists(user_id, start.naive_utc(), now.naive_utc(), Some(TOP_ARTISTS_COUNT)).await;
+
+		top_artists.map(|top_artists| {
+			top_artists.into_iter().map(|(_plays, artist)| {
+				artist
+			}).collect::<Vec<_>>()
+		})
+	});
+
+	view! {
+		<Transition
+			fallback=move || view! {
+				<h2>{format!("Top Artists {}", HISTORY_MESSAGE)}</h2>
+				<Loading />
+			}
+		>
+			<ErrorBoundary
+				fallback=|errors| view! {
+					<h2>{format!("Top Artists {}", HISTORY_MESSAGE)}</h2>
+					{move || errors.get()
+						.into_iter()
+						.map(|(_, e)| view! { <p>{e.to_string()}</p>})
+						.collect_view()
+					}
+				}
+			>
+				{move ||
+					top_artists.get().map(|top_artists| {
+						top_artists.map(|top_artists| {
+							let tiles = top_artists.into_iter().map(|artist| {
+								Box::new(artist) as Box<dyn DashboardTile>
+							}).collect::<Vec<_>>();
+
+							DashboardRow::new(format!("Top Artists {}", HISTORY_MESSAGE), tiles)
+						})
+					})
+				}
+			</ErrorBoundary>
+		</Transition>
+	}
+}

src/pages/signup.rs

@@ -1,5 +1,6 @@
 use crate::auth::signup;
 use crate::models::User;
+use crate::util::state::GlobalState;
 use leptos::leptos_dom::*;
 use leptos::*;
 use leptos_icons::*;
@@ -19,7 +20,7 @@ pub fn Signup() -> impl IntoView {
 
     let on_submit = move |ev: leptos::ev::SubmitEvent| {
         ev.prevent_default();
-        let new_user = User {
+        let mut new_user = User {
             id: None,
             username: username.get(),
             email: email.get(),
@@ -29,11 +30,20 @@ pub fn Signup() -> impl IntoView {
         };
         log!("new user: {:?}", new_user);
 
+        let user = GlobalState::logged_in_user();
+
         spawn_local(async move {
-            if let Err(err) = signup(new_user).await {
+            if let Err(err) = signup(new_user.clone()).await {
                 // Handle the error here, e.g., log it or display to the user
                 log!("Error signing up: {:?}", err);
+
+                // Since we're not sure what the state is, manually refetch the user
+                user.refetch();
             } else {
+                // Manually set the user to the new user, avoiding a refetch
+                new_user.password = None;
+                user.set(Some(new_user));
+
                 // Redirect to the login page
                 log!("Signed up successfully!");
                 leptos_router::use_navigate()("/", Default::default());

src/playbar.rs

@@ -1,7 +1,7 @@
 use crate::models::Artist;
-use crate::playstatus::PlayStatus;
 use crate::songdata::SongData;
 use crate::api::songs;
+use crate::util::state::GlobalState;
 use leptos::ev::MouseEvent;
 use leptos::html::{Audio, Div};
 use leptos::leptos_dom::*;
@@ -40,8 +40,8 @@ const HISTORY_LISTEN_THRESHOLD: u64 = MIN_SKIP_BACK_TIME as u64;
 /// * `None` if the audio element is not available
 /// * `Some((current_time, duration))` if the audio element is available
 /// 
-pub fn get_song_time_duration(status: impl SignalWithUntracked<Value = PlayStatus>) -> Option<(f64, f64)> {
-	status.with_untracked(|status| {
+pub fn get_song_time_duration() -> Option<(f64, f64)> {
+	GlobalState::play_status().with_untracked(|status| {
 		if let Some(audio) = status.get_audio() {
 			Some((audio.current_time(), audio.duration()))
 		} else {
@@ -61,13 +61,13 @@ pub fn get_song_time_duration(status: impl SignalWithUntracked<Value = PlayStatu
 /// * `status` - The `PlayStatus` to get the audio element from, as a signal
 /// * `time` - The time to skip to, in seconds
 /// 
-pub fn skip_to(status: impl SignalUpdate<Value = PlayStatus>, time: f64) {
+pub fn skip_to(time: f64) {
     if time.is_infinite() || time.is_nan() {
         error!("Unable to skip to non-finite time: {}", time);
         return
     }
 
-    status.update(|status| {
+    GlobalState::play_status().update(|status| {
         if let Some(audio) = status.get_audio() {
             audio.set_current_time(time);
             log!("Player skipped to time: {}", time);
@@ -85,8 +85,8 @@ pub fn skip_to(status: impl SignalUpdate<Value = PlayStatus>, time: f64) {
 /// * `status` - The `PlayStatus` to get the audio element from, as a signal
 /// * `play` - `true` to play the song, `false` to pause it
 /// 
-pub fn set_playing(status: impl SignalUpdate<Value = PlayStatus>, play: bool) {
-    status.update(|status| {
+pub fn set_playing(play: bool) {
+    GlobalState::play_status().update(|status| {
         if let Some(audio) = status.get_audio() {
             if play {
                 if let Err(e) = audio.play() {
@@ -109,8 +109,8 @@ pub fn set_playing(status: impl SignalUpdate<Value = PlayStatus>, play: bool) {
     });
 }
 
-fn toggle_queue(status: impl SignalUpdate<Value = PlayStatus>) {
-	status.update(|status| {
+fn toggle_queue() {
+	GlobalState::play_status().update(|status| {
 		status.queue_open = !status.queue_open;
 	});
 
@@ -126,8 +126,8 @@ fn toggle_queue(status: impl SignalUpdate<Value = PlayStatus>) {
 /// * `status` - The `PlayStatus` to get the audio element from, as a signal
 /// * `src` - The source to set the audio player to
 /// 
-fn set_play_src(status: impl SignalUpdate<Value = PlayStatus>, src: String) {
-    status.update(|status| {
+fn set_play_src(src: String) {
+    GlobalState::play_status().update(|status| {
         if let Some(audio) = status.get_audio() {
             audio.set_src(&src);
             log!("Player set src to: {}", src);
@@ -139,11 +139,13 @@ fn set_play_src(status: impl SignalUpdate<Value = PlayStatus>, src: String) {
 
 /// The play, pause, and skip buttons
 #[component]
-fn PlayControls(status: RwSignal<PlayStatus>) -> impl IntoView {
+fn PlayControls() -> impl IntoView {
+    let status = GlobalState::play_status();
+
     // On click handlers for the skip and play/pause buttons
 
     let skip_back = move |_| {
-        if let Some(duration) = get_song_time_duration(status) {
+        if let Some(duration) = get_song_time_duration() {
             // Skip to previous song if the current song is near the start
             // Also skip to the previous song if we're at the end of the current song
             // This is because after running out of songs in the queue, the current song will be at the end
@@ -160,8 +162,8 @@ fn PlayControls(status: RwSignal<PlayStatus>) -> impl IntoView {
                     // Push the popped song to the front of the queue, and play it
                     let next_src = last_played_song.song_path.clone();
                     status.update(|status| status.queue.push_front(last_played_song));
-                    set_play_src(status, next_src);
-                    set_playing(status, true);
+                    set_play_src(next_src);
+                    set_playing(true);
                 } else {
                     warn!("Unable to skip back: No previous song");
                 }
@@ -170,14 +172,14 @@ fn PlayControls(status: RwSignal<PlayStatus>) -> impl IntoView {
 
         // Default to skipping to start of current song, and playing
         log!("Skipping to start of current song");
-        skip_to(status, 0.0);
-        set_playing(status, true);
+        skip_to(0.0);
+        set_playing(true);
     };
 
     let skip_forward = move |_| {
-		if let Some(duration) = get_song_time_duration(status) {
-            skip_to(status, duration.1);
-            set_playing(status, true);
+		if let Some(duration) = get_song_time_duration() {
+            skip_to(duration.1);
+            set_playing(true);
 		} else {
 			error!("Unable to skip forward: Unable to get current duration");
 		}
@@ -185,7 +187,7 @@ fn PlayControls(status: RwSignal<PlayStatus>) -> impl IntoView {
 
     let toggle_play = move |_| {
         let playing = status.with_untracked(|status| { status.playing });
-		set_playing(status, !playing);
+		set_playing(!playing);
     };
 
     // We use this to prevent the buttons from being focused when clicked
@@ -248,7 +250,9 @@ fn PlayDuration(elapsed_secs: MaybeSignal<i64>, total_secs: MaybeSignal<i64>) ->
 
 /// The name, artist, and album of the current song
 #[component]
-fn MediaInfo(status: RwSignal<PlayStatus>) -> impl IntoView {
+fn MediaInfo() -> impl IntoView {
+    let status = GlobalState::play_status();
+
     let name = Signal::derive(move || {
 		status.with(|status| {
 			status.queue.front().map_or("No media playing".into(), |song| song.title.clone())
@@ -287,7 +291,9 @@ fn MediaInfo(status: RwSignal<PlayStatus>) -> impl IntoView {
 
 /// The like and dislike buttons
 #[component]
-fn LikeDislike(status: RwSignal<PlayStatus>) -> impl IntoView {
+fn LikeDislike() -> impl IntoView {
+    let status = GlobalState::play_status();
+
     let like_icon = Signal::derive(move || {
         status.with(|status| {
             match status.queue.front() {
@@ -400,7 +406,7 @@ fn LikeDislike(status: RwSignal<PlayStatus>) -> impl IntoView {
 
 /// The play progress bar, and click handler for skipping to a certain time in the song
 #[component]
-fn ProgressBar(percentage: MaybeSignal<f64>, status: RwSignal<PlayStatus>) -> impl IntoView {
+fn ProgressBar(percentage: MaybeSignal<f64>) -> impl IntoView {
     // Keep a reference to the progress bar div so we can get its width and calculate the time to skip to
     let progress_bar_ref = create_node_ref::<Div>();
 
@@ -412,10 +418,10 @@ fn ProgressBar(percentage: MaybeSignal<f64>, status: RwSignal<PlayStatus>) -> im
             let width = progress_bar.offset_width() as f64;
             let percentage = x_click_pos / width * 100.0;
 
-			if let Some(duration) = get_song_time_duration(status) {
+			if let Some(duration) = get_song_time_duration() {
 				let time = duration.1 * percentage / 100.0;
-				skip_to(status, time);
-                set_playing(status, true);
+				skip_to(time);
+                set_playing(true);
 			} else {
                 error!("Unable to skip to time: Unable to get current duration");
             }
@@ -438,11 +444,11 @@ fn ProgressBar(percentage: MaybeSignal<f64>, status: RwSignal<PlayStatus>) -> im
 }
 
 #[component]
-fn QueueToggle(status: RwSignal<PlayStatus>) -> impl IntoView {
-
+fn QueueToggle() -> impl IntoView {
     let update_queue = move |_| {
-        toggle_queue(status);
-		log!("queue button pressed, queue status: {:?}", status.with_untracked(|status| status.queue_open));
+        toggle_queue();
+		log!("queue button pressed, queue status: {:?}",
+            GlobalState::play_status().with_untracked(|status| status.queue_open));
     };
 
 	// We use this to prevent the buttons from being focused when clicked
@@ -463,9 +469,9 @@ fn QueueToggle(status: RwSignal<PlayStatus>) -> impl IntoView {
 
 /// Renders the title of the page based on the currently playing song
 #[component]
-pub fn CustomTitle(play_status: RwSignal<PlayStatus>) -> impl IntoView {
+pub fn CustomTitle() -> impl IntoView {
     let title = create_memo(move |_| {
-        play_status.with(|play_status| {
+        GlobalState::play_status().with(|play_status| {
             play_status.queue.front().map_or("LibreTunes".to_string(), |song_data| {
                     format!("{} - {} | {}",song_data.title.clone(),Artist::display_list(&song_data.artists), "LibreTunes")
                 })
@@ -478,31 +484,33 @@ pub fn CustomTitle(play_status: RwSignal<PlayStatus>) -> impl IntoView {
 
 /// The main play bar component, containing the progress bar, media info, play controls, and play duration
 #[component]
-pub fn PlayBar(status: RwSignal<PlayStatus>) -> impl IntoView {
+pub fn PlayBar() -> impl IntoView {
+    let status = GlobalState::play_status();
+
     // 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" {
+        if e.key() == "ArrowRight" && status.with_untracked(|status| status.search_active) == false {
             e.prevent_default();
             log!("Right arrow key pressed, skipping forward by {} seconds", ARROW_KEY_SKIP_TIME);
 
-            if let Some(duration) = get_song_time_duration(status) {
+            if let Some(duration) = get_song_time_duration() {
                 let mut time = duration.0 + ARROW_KEY_SKIP_TIME;
                 time = time.clamp(0.0, duration.1);
-                skip_to(status, time);
-                set_playing(status, true);
+                skip_to(time);
+                set_playing(true);
             } else {
                 error!("Unable to skip forward: Unable to get current duration");
             }
 
-        } else if e.key() == "ArrowLeft" {
+        } else if e.key() == "ArrowLeft" && status.with_untracked(|status| status.search_active) == false {
             e.prevent_default();
             log!("Left arrow key pressed, skipping backward by {} seconds", ARROW_KEY_SKIP_TIME);
 
-            if let Some(duration) = get_song_time_duration(status) {
+            if let Some(duration) = get_song_time_duration() {
                 let mut time = duration.0 - ARROW_KEY_SKIP_TIME;
                 time = time.clamp(0.0, duration.1);
-                skip_to(status, time);
-                set_playing(status, true);
+                skip_to(time);
+                set_playing(true);
             } else {
                 error!("Unable to skip backward: Unable to get current duration");
             }
@@ -511,12 +519,12 @@ pub fn PlayBar(status: RwSignal<PlayStatus>) -> 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() == " " {
+        if e.key() == " " && status.with_untracked(|status| status.search_active) == false {
             e.prevent_default();
             log!("Space bar pressed, toggling play/pause");
 
             let playing = status.with_untracked(|status| status.playing);
-            set_playing(status, !playing);
+            set_playing(!playing);
         }
     });
 
@@ -659,14 +667,14 @@ pub fn PlayBar(status: RwSignal<PlayStatus>) -> impl IntoView {
         <audio _ref=audio_ref on:play=on_play on:pause=on_pause
             on:timeupdate=on_time_update on:ended=on_end type="audio/mpeg" />
         <div class="playbar">
-        <ProgressBar percentage=percentage.into() status=status />
+        <ProgressBar percentage=percentage.into() />
         <div class="playbar-left-group">
-        <MediaInfo status=status />
-        <LikeDislike status=status />
+        <MediaInfo />
+        <LikeDislike />
         </div>
-        <PlayControls status=status />
+        <PlayControls />
         <PlayDuration elapsed_secs=elapsed_secs.into() total_secs=total_secs.into() />
-        <QueueToggle status=status />
+        <QueueToggle />
         </div>
     }
 }

src/playstatus.rs

@@ -11,6 +11,8 @@ 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
@@ -56,6 +58,7 @@ impl Default for PlayStatus {
         Self {
             playing: false,
 			queue_open: false,
+			search_active: false,
             audio_player: None,
             history: VecDeque::new(),
             queue: VecDeque::new(),

src/queue.rs

@@ -1,6 +1,6 @@
 use crate::models::Artist;
-use crate::playstatus::PlayStatus;
 use crate::song::Song;
+use crate::util::state::GlobalState;
 use leptos::ev::MouseEvent;
 use leptos::leptos_dom::*;
 use leptos::*;
@@ -9,22 +9,23 @@ use leptos::ev::DragEvent;
 
 const RM_BTN_SIZE: &str = "2.5rem";
 
-fn remove_song_fn(index: usize, status: RwSignal<PlayStatus>) {
+fn remove_song_fn(index: usize) {
 	if index == 0 {
 		log!("Error: Trying to remove currently playing song (index 0) from queue");
 	} else {
 		log!("Remove Song from Queue: Song is not currently playing, deleting song from queue and not adding to history");
-		status.update(|status| {
+		GlobalState::play_status().update(|status| {
 			status.queue.remove(index);
 		});
 	}
 }
 
 #[component]
-pub fn Queue(status: RwSignal<PlayStatus>) -> impl IntoView {
+pub fn Queue() -> impl IntoView {
+	let status = GlobalState::play_status();
 
 	let remove_song = move |index: usize| {
-		remove_song_fn(index, status);
+		remove_song_fn(index);
 		log!("Removed song {}", index + 1);
 	};
 

src/schema.rs

@@ -39,6 +39,23 @@ diesel::table! {
     }
 }
 
+diesel::table! {
+    playlist_songs (playlist_id, song_id) {
+        playlist_id -> Int4,
+        song_id -> Int4,
+    }
+}
+
+diesel::table! {
+    playlists (id) {
+        id -> Int4,
+        created_at -> Timestamp,
+        updated_at -> Timestamp,
+        owner_id -> Int4,
+        name -> Text,
+    }
+}
+
 diesel::table! {
     song_artists (song_id, artist_id) {
         song_id -> Int4,
@@ -95,6 +112,9 @@ diesel::table! {
 
 diesel::joinable!(album_artists -> albums (album_id));
 diesel::joinable!(album_artists -> artists (artist_id));
+diesel::joinable!(playlist_songs -> playlists (playlist_id));
+diesel::joinable!(playlist_songs -> songs (song_id));
+diesel::joinable!(playlists -> users (owner_id));
 diesel::joinable!(song_artists -> artists (artist_id));
 diesel::joinable!(song_artists -> songs (song_id));
 diesel::joinable!(song_dislikes -> songs (song_id));
@@ -111,6 +131,8 @@ diesel::allow_tables_to_appear_in_same_query!(
     artists,
     friend_requests,
     friendships,
+    playlist_songs,
+    playlists,
     song_artists,
     song_dislikes,
     song_history,

src/search.rs

@@ -39,10 +39,11 @@ 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>, ServerFnError> {
+pub async fn search_albums(query: String, limit: i64) -> Result<Vec<(Album, f32)>, 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)
@@ -58,10 +59,11 @@ pub async fn search_albums(query: String, limit: i64) -> Result<Vec<Album>, Serv
 /// # 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>, ServerFnError> {
+pub async fn search_artists(query: String, limit: i64) -> Result<Vec<(Artist, f32)>, 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)
@@ -77,10 +79,11 @@ pub async fn search_artists(query: String, limit: i64) -> Result<Vec<Artist>, Se
 /// # 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>, ServerFnError> {
+pub async fn search_songs(query: String, limit: i64) -> Result<Vec<(Song, f32)>, 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)
@@ -95,9 +98,10 @@ pub async fn search_songs(query: String, limit: i64) -> Result<Vec<Song>, Server
 /// `limit` - The maximum number of results to return for each type
 /// 
 /// # Returns
-/// A Result containing a tuple of vectors of albums, artists, and songs if the search was successful,
+/// A Result containing a tuple of vectors of albums, artists, and songs, 
+/// along with respective similarity scores, if the search was successful.
 #[server(endpoint = "search")]
-pub async fn search(query: String, limit: i64) -> Result<(Vec<Album>, Vec<Artist>, Vec<Song>), ServerFnError> {
+pub async fn search(query: String, limit: i64) -> Result<(Vec<(Album, f32)>, Vec<(Artist, f32)>, Vec<(Song, f32)>), 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="queue-song">
+		<div class="song">
 			<img src={song_image_path} alt={song_title.clone()} />
-			<div class="queue-song-info">
+			<div class="song-info">
 				<h3>{song_title}</h3>
 				<p>{song_artist}</p>
 			</div>

src/songdata.rs

@@ -1,12 +1,13 @@
 use crate::models::{Album, Artist, Song};
 use crate::components::dashboard_tile::DashboardTile;
 
-use time::Date;
+use serde::{Serialize, Deserialize};
+use chrono::NaiveDate;
 
 /// Holds information about a song
 /// 
 /// Intended to be used in the front-end, as it includes artist and album objects, rather than just their ids.
-#[derive(Clone)]
+#[derive(Serialize, Deserialize, Clone)]
 pub struct SongData {
 	/// Song id
 	pub id: i32,
@@ -21,7 +22,7 @@ pub struct SongData {
 	/// The duration of the song in seconds
 	pub duration: i32,
 	/// The song's release date
-	pub release_date: Option<Date>,
+	pub release_date: Option<NaiveDate>,
 	/// Path to song file, relative to the root of the web server.
 	/// For example, `"/assets/audio/Song.mp3"`
 	pub song_path: String,

src/upload.rs

@@ -10,7 +10,7 @@ cfg_if! {
 		use diesel::prelude::*;
 		use log::*;
 		use server_fn::error::NoCustomError;
-		use time::Date;
+		use chrono::NaiveDate;
 	}
 }
 
@@ -124,15 +124,14 @@ async fn validate_track_number(track_number: Field<'static>) -> Result<Option<i3
 /// Validate the release date in a multipart field
 /// Expects a field with a release date, and ensures it is a valid date in the format [year]-[month]-[day]
 #[cfg(feature = "ssr")]
-async fn validate_release_date(release_date: Field<'static>) -> Result<Option<Date>, ServerFnError> {
+async fn validate_release_date(release_date: Field<'static>) -> Result<Option<NaiveDate>, ServerFnError> {
 	match release_date.text().await {
 		Ok(release_date) => {
 			if release_date.trim().is_empty() {
 				return Ok(None);
 			}
 
-			let date_format = time::macros::format_description!("[year]-[month]-[day]");
-			let release_date = Date::parse(&release_date.trim(), date_format);
+			let release_date = NaiveDate::parse_from_str(&release_date.trim(), "%Y-%m-%d");
 
 			match release_date {
 				Ok(release_date) => Ok(Some(release_date)),
@@ -181,8 +180,7 @@ pub async fn upload(data: MultipartData) -> Result<(), ServerFnError> {
 					ServerError("Title field required and must precede file field".to_string()))?;
 
 				let clean_title = title.replace(" ", "_").replace("/", "_");
-				let date_format = time::macros::format_description!("[year]-[month]-[day]_[hour]:[minute]:[second]");
-				let date_str = time::OffsetDateTime::now_utc().format(date_format).unwrap_or_default();
+				let date_str = chrono::Utc::now().format("%Y-%m-%d_%H:%M:%S").to_string();
 				let upload_path = format!("assets/audio/upload-{}_{}.mp3", date_str, clean_title);
 				file_name = Some(format!("upload-{}_{}.mp3", date_str, clean_title));
 

src/users.rs

@@ -128,3 +128,15 @@ pub async fn get_user(username_or_email: String) -> Result<Option<User>, ServerF
 
 	Ok(user)
 }
+
+#[server(endpoint = "get_user_by_id")]
+pub async fn get_user_by_id(user_id: i32) -> Result<Option<User>, ServerFnError> {
+	let mut user = find_user_by_id(user_id).await?;
+
+	// Remove the password hash before returning the user
+	if let Some(user) = user.as_mut() {
+		user.password = None;
+	}
+
+	Ok(user)
+}

src/util/mod.rs

@@ -5,3 +5,5 @@ cfg_if! {
 		pub mod audio;
 	}
 }
+
+pub mod state;

src/util/state.rs

@@ -0,0 +1,49 @@
+use leptos::*;
+use leptos::logging::*;
+
+use crate::playstatus::PlayStatus;
+use crate::models::User;
+use crate::auth::get_logged_in_user;
+
+/// Global front-end state
+/// Contains anything frequently needed across multiple components
+/// Behaves like a singleton, in that provide/expect_context will
+/// always return the same instance
+#[derive(Clone)]
+pub struct GlobalState {
+	/// A resource that fetches the logged in user
+	/// This will not automatically refetch, so any login/logout related code
+	/// should call `refetch` on this resource
+    pub logged_in_user: Resource<(), Option<User>>,
+
+    /// The current play status
+    pub play_status: RwSignal<PlayStatus>,
+}
+
+impl GlobalState {
+    pub fn new() -> Self {
+        let play_status = create_rw_signal(PlayStatus::default());
+
+        let logged_in_user = create_resource(|| (), |_| async {
+            get_logged_in_user().await
+                .inspect_err(|e| {
+                    error!("Error getting logged in user: {:?}", e);
+                })
+                .ok()
+                .flatten()
+        });
+
+        Self {
+            logged_in_user,
+            play_status,
+        }
+    }
+
+    pub fn logged_in_user() -> Resource<(), Option<User>> {
+        expect_context::<Self>().logged_in_user
+    }
+
+    pub fn play_status() -> RwSignal<PlayStatus> {
+        expect_context::<Self>().play_status
+    }
+}

style/dashboard.scss

@@ -1,7 +1,6 @@
 @import "theme.scss";
 
 .dashboard-container {
-  width: calc(100% - 22rem - 16rem);
   .dashboard-header {
     font-size: 1.2rem;
     font-weight: 300;

style/error.scss

@@ -0,0 +1,18 @@
+.error-container {
+	.error-header {
+		display: inline-grid;
+
+		svg {
+			width: 30px;
+			height: 30px;
+			grid-row-start: 1;
+			align-self: center;
+			padding-right: 10px;
+		}
+
+		h1 {
+			grid-row-start: 1;
+			align-self: center;
+		}
+	}
+}

style/home.scss

@@ -9,8 +9,9 @@
 }
 .home-component {
   background: #1c1c1c;
-  height: 100vh;
+  width: calc(100% - 22rem - 16rem);
   margin: 2px;
-  padding: 0.2rem 1.5rem 1.5rem 1rem;
+  padding: 0.2rem 1.5rem $playbar-size 1rem;
   border-radius: 0.5rem;
+  overflow: scroll;
 }

style/loading.scss

@@ -0,0 +1,59 @@
+@import "theme.scss";
+
+.loading-page {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 100%;
+}
+
+.loading {
+	position: relative;
+	width: 10px;
+	height: 10px;
+	border-radius: 5px;
+	margin: 10px;
+	background-color: $accent-color;
+	color: $accent-color;
+	animation: dot-flashing 1s infinite linear alternate;
+	animation-delay: 0.5s;
+}
+
+.loading::before, .loading::after {
+	content: "";
+	display: inline-block;
+	position: absolute;
+	top: 0;
+}
+
+.loading::before {
+	left: -15px;
+	width: 10px;
+	height: 10px;
+	border-radius: 5px;
+	background-color: $accent-color;
+	color: $accent-color;
+	animation: dot-flashing 1s infinite alternate;
+	animation-delay: 0s;
+}
+
+.loading::after {
+	left: 15px;
+	width: 10px;
+	height: 10px;
+	border-radius: 5px;
+	background-color: $accent-color;
+	color: $accent-color;
+	animation: dot-flashing 1s infinite alternate;
+	animation-delay: 1s;
+}
+
+@keyframes dot-flashing {
+	0% {
+		background-color: $accent-color;
+	}
+
+	50%, 100% {
+		background-color: $controls-hover-color;
+	}
+}

style/main.scss

@@ -11,7 +11,10 @@
 @import 'dashboard_tile.scss';
 @import 'dashboard_row.scss';
 @import 'upload.scss';
+@import 'error.scss';
 @import 'song_list.scss';
+@import 'profile.scss';
+@import 'loading.scss';
 
 body {
   font-family: sans-serif;

style/personal.scss

@@ -3,7 +3,6 @@
 .personal-container {
   width: 16rem;
   background: #1c1c1c;
-  height: 100vh;
   margin: 2px;
   border-radius: 0.5rem;
 

style/playbar.scss

@@ -2,7 +2,7 @@
 
 .playbar {
 	width: 100%;
-	height: 75px;
+	height: $playbar-size;
 	background-color: $play-bar-background-color;
 	opacity: 0.9;
 	position: fixed;

style/profile.scss

@@ -0,0 +1,36 @@
+@import 'theme.scss';
+
+.profile-container {
+	.profile-header {
+		display: flex;
+		
+		.profile-image {
+			width: 75px;
+			height: 75px;
+			border-radius: 50%;
+			padding: 10px;
+			padding-bottom: 5px;
+			margin-top: auto;
+			margin-bottom: auto;
+
+			svg {
+				padding: 0;
+				margin: 0;
+			}
+		}
+		
+		h1 {
+			font-size: 40px;
+			align-self: center;
+			padding: 10px;
+			padding-bottom: 5px;
+		}
+	}
+
+	.profile-details {
+		p {
+			font-size: 1rem;
+			margin: 0.5rem;
+		}
+	}
+}

style/queue.scss

@@ -5,10 +5,12 @@
 	top: 0;
 	right: 0; 
 	width: 400px; 
-	height: calc(100% - 78.9px); /* Adjust height to fit the queue */
+	height: calc(100% - 87px); /* 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 */
@@ -29,31 +31,6 @@
 			padding-right: 10px;
 			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;

style/search.scss

@@ -1,6 +1,92 @@
 @import "theme.scss";
 
 .search-container {
-  width: calc(100% - 22rem - 16rem);
-  
+  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/song.scss

@@ -0,0 +1,22 @@
+.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

@@ -11,8 +11,11 @@ $play-bar-background-color: #212121;
 $play-grad-start: #0a0533;
 $play-grad-end: $accent-color;
 $queue-background-color: $play-bar-background-color;
+$search-background: $play-bar-background-color;
+$search-border: #3f3f3f;
 
 $auth-inputs: #796dd4;
 $auth-containers: white;
 
 $dashboard-tile-size: 200px;
+$playbar-size: 75px;