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

.dockerignore

@@ -9,6 +9,3 @@
 !/Cargo.lock
 !/Cargo.toml
 !/ascii_art.txt
-!/flake.nix
-!/flake.lock
-!/rust-toolchain.toml

.env.example

@@ -18,4 +18,3 @@ DATABASE_URL=postgresql://libretunes:password@localhost:5432/libretunes
 
 LIBRETUNES_AUDIO_PATH=assets/audio
 LIBRETUNES_IMAGE_PATH=assets/images
-LIBRETUNES_DISABLE_SIGNUP=true

.gitea/workflows/push.yaml

@@ -7,20 +7,18 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
-      - name: Use Cache
-        uses: Swatinem/rust-cache@v2
       - name: Build project
+        env:
+          RUSTFLAGS: "-D warnings"
         run: cargo-leptos build
 
   docker-build:
-    runs-on: ubuntu-latest-docker
+    runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
-        with:
-          endpoint: ${{ env.docker_endpoint }}
       - name: Login to Gitea container registry
         uses: docker/login-action@v3
         with:
@@ -36,22 +34,22 @@ jobs:
         with:
           push: true
           tags: "${{ steps.get-image-name.outputs.IMAGE_NAME }}:${{ gitea.sha }}"
-          cache-to: mode=max
+          cache-from: type=registry,ref=${{ steps.get-image-name.outputs.IMAGE_NAME }}:${{ gitea.sha }}
+          cache-to: type=inline
       - name: Build and push Docker image with "latest" tag
         uses: docker/build-push-action@v5
         if: gitea.ref == 'refs/heads/main'
         with:
           push: true
           tags: "${{ steps.get-image-name.outputs.IMAGE_NAME }}:latest"
-          cache-to: mode=max
+          cache-from: type=registry,ref=${{ steps.get-image-name.outputs.IMAGE_NAME }}:latest
+          cache-to: type=inline
 
   test:
     runs-on: libretunes-cicd
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
-      - name: Use Cache
-        uses: Swatinem/rust-cache@v2
       - name: Test project
         run: cargo test --all-targets --all-features
 
@@ -60,8 +58,6 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
-      - name: Use Cache
-        uses: Swatinem/rust-cache@v2
       - name: Run Leptos tests
         run: cargo-leptos test
 
@@ -70,8 +66,6 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
-      - name: Use Cache
-        uses: Swatinem/rust-cache@v2
       - name: Generate docs
         run: cargo doc --no-deps
       - name: Upload docs
@@ -79,23 +73,3 @@ jobs:
         with:
           name: docs
           path: target/doc
-
-  nix-build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Update Package Lists
-        run: apt update
-      - name: Install Nix
-        run: apt install -y nix-bin
-      - name: Restore and cache Nix store
-        uses: nix-community/cache-nix-action@v5
-        with:
-          primary-key: nix-build
-      - name: Build project with Nix
-        run: nix build --experimental-features 'nix-command flakes' git+$GITHUB_SERVER_URL/$GITHUB_REPOSITORY.git?ref=$GITHUB_REF_NAME#default --no-write-lock-file
-
-  env:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Print Environment
-        run: env

.gitignore

@@ -31,7 +31,3 @@ playwright/.cache/
 
 # Sass cache
 .sass-cache
-
-# Nix-related files
-.direnv/
-result/

Cargo.lock

@@ -3444,9 +3444,9 @@ checksum = "9c8d87e72b64a3b4db28d11ce29237c246188f4f51057d65a7eab63b7987e423"
 
 [[package]]
 name = "wasm-bindgen"
-version = "0.2.96"
+version = "0.2.95"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "21d3b25c3ea1126a2ad5f4f9068483c2af1e64168f847abe863a526b8dbfe00b"
+checksum = "128d1e363af62632b8eb57219c8fd7877144af57558fb2ef0368d0087bddeb2e"
 dependencies = [
  "cfg-if",
  "once_cell",
@@ -3455,9 +3455,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-backend"
-version = "0.2.96"
+version = "0.2.95"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "52857d4c32e496dc6537646b5b117081e71fd2ff06de792e3577a150627db283"
+checksum = "cb6dd4d3ca0ddffd1dd1c9c04f94b868c37ff5fac97c30b97cff2d74fce3a358"
 dependencies = [
  "bumpalo",
  "log",
@@ -3482,9 +3482,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-macro"
-version = "0.2.96"
+version = "0.2.95"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "920b0ffe069571ebbfc9ddc0b36ba305ef65577c94b06262ed793716a1afd981"
+checksum = "e79384be7f8f5a9dd5d7167216f022090cf1f9ec128e6e6a482a2cb5c5422c56"
 dependencies = [
  "quote",
  "wasm-bindgen-macro-support",
@@ -3492,9 +3492,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-macro-support"
-version = "0.2.96"
+version = "0.2.95"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "bf59002391099644be3524e23b781fa43d2be0c5aa0719a18c0731b9d195cab6"
+checksum = "26c6ab57572f7a24a4985830b120de1594465e5d500f24afe89e16b4e833ef68"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -3505,9 +3505,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-shared"
-version = "0.2.96"
+version = "0.2.95"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e5047c5392700766601942795a436d7d2599af60dcc3cc1248c9120bfb0827b0"
+checksum = "65fc09f10666a9f147042251e0dda9c18f166ff7de300607007e96bdebc1068d"
 
 [[package]]
 name = "wasm-streams"

Cargo.toml

@@ -15,7 +15,7 @@ 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.96", 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" }
 diesel = { version = "2.1.4", features = ["postgres", "r2d2", "chrono"], default-features = false, optional = true }

Dockerfile

@@ -1,4 +1,4 @@
-FROM rust:slim AS builder
+FROM rust:slim as builder
 
 WORKDIR /app
 

docker-compose.yml

@@ -3,7 +3,7 @@ name: libretunes
 services:
   libretunes:
     container_name: libretunes
-    # image: git.libretunes.xyz/libretunes/libretunes:latest
+    # image: registry.mregirouard.com/libretunes/libretunes:latest
     build: .
     ports:
       - "3000:3000"
@@ -15,7 +15,6 @@ services:
       POSTGRES_DB: ${POSTGRES_DB}
       LIBRETUNES_AUDIO_PATH: /assets/audio
       LIBRETUNES_IMAGE_PATH: /assets/images
-      LIBRETUNES_DISABLE_SIGNUP: "true"
     volumes:
       - libretunes-audio:/assets/audio
       - libretunes-images:/assets/images

flake.lock

@@ -1,114 +0,0 @@
-{
-  "nodes": {
-    "cargo-leptos": {
-      "flake": false,
-      "locked": {
-        "lastModified": 1730677835,
-        "narHash": "sha256-Oe65m9io7ihymUjylaWHQM/x7r0y/xXqD313H3oyjN8=",
-        "owner": "leptos-rs",
-        "repo": "cargo-leptos",
-        "rev": "ff6b19a5f9fd4e433774b6a9c57922ea5a1634cc",
-        "type": "github"
-      },
-      "original": {
-        "owner": "leptos-rs",
-        "ref": "v0.2.21",
-        "repo": "cargo-leptos",
-        "type": "github"
-      }
-    },
-    "flake-utils": {
-      "inputs": {
-        "systems": "systems"
-      },
-      "locked": {
-        "lastModified": 1731533236,
-        "narHash": "sha256-l0KFg5HjrsfsO/JpG+r7fRrqm12kzFHyUHqHCVpMMbI=",
-        "owner": "numtide",
-        "repo": "flake-utils",
-        "rev": "11707dc2f618dd54ca8739b309ec4fc024de578b",
-        "type": "github"
-      },
-      "original": {
-        "owner": "numtide",
-        "repo": "flake-utils",
-        "type": "github"
-      }
-    },
-    "nixpkgs": {
-      "locked": {
-        "lastModified": 1733940404,
-        "narHash": "sha256-Pj39hSoUA86ZePPF/UXiYHHM7hMIkios8TYG29kQT4g=",
-        "owner": "NixOS",
-        "repo": "nixpkgs",
-        "rev": "5d67ea6b4b63378b9c13be21e2ec9d1afc921713",
-        "type": "github"
-      },
-      "original": {
-        "owner": "NixOS",
-        "ref": "nixos-unstable",
-        "repo": "nixpkgs",
-        "type": "github"
-      }
-    },
-    "nixpkgs_2": {
-      "locked": {
-        "lastModified": 1728538411,
-        "narHash": "sha256-f0SBJz1eZ2yOuKUr5CA9BHULGXVSn6miBuUWdTyhUhU=",
-        "owner": "NixOS",
-        "repo": "nixpkgs",
-        "rev": "b69de56fac8c2b6f8fd27f2eca01dcda8e0a4221",
-        "type": "github"
-      },
-      "original": {
-        "owner": "NixOS",
-        "ref": "nixpkgs-unstable",
-        "repo": "nixpkgs",
-        "type": "github"
-      }
-    },
-    "root": {
-      "inputs": {
-        "cargo-leptos": "cargo-leptos",
-        "flake-utils": "flake-utils",
-        "nixpkgs": "nixpkgs",
-        "rust-overlay": "rust-overlay"
-      }
-    },
-    "rust-overlay": {
-      "inputs": {
-        "nixpkgs": "nixpkgs_2"
-      },
-      "locked": {
-        "lastModified": 1734230139,
-        "narHash": "sha256-zsp0Mz8VgyIAnU8UhP/YT1g+zlsl+NIJTBMAbY+RifQ=",
-        "owner": "oxalica",
-        "repo": "rust-overlay",
-        "rev": "150fbc8aa2bc501041810bbc1dbfe73694a861be",
-        "type": "github"
-      },
-      "original": {
-        "owner": "oxalica",
-        "repo": "rust-overlay",
-        "type": "github"
-      }
-    },
-    "systems": {
-      "locked": {
-        "lastModified": 1681028828,
-        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
-        "owner": "nix-systems",
-        "repo": "default",
-        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
-        "type": "github"
-      },
-      "original": {
-        "owner": "nix-systems",
-        "repo": "default",
-        "type": "github"
-      }
-    }
-  },
-  "root": "root",
-  "version": 7
-}

flake.nix

@@ -1,102 +0,0 @@
-{
-  description = "LibreTunes build and development environment";
-
-  inputs = {
-    nixpkgs.url      = "github:NixOS/nixpkgs/nixos-unstable";
-    rust-overlay.url = "github:oxalica/rust-overlay";
-    flake-utils.url  = "github:numtide/flake-utils";
-    cargo-leptos = {
-      url = "github:leptos-rs/cargo-leptos?ref=v0.2.22";
-      flake = false;
-    };
-  };
-
-  outputs = { self, nixpkgs, rust-overlay, flake-utils, cargo-leptos, ... }:
-    flake-utils.lib.eachDefaultSystem (system:
-      let
-        overlays = [ (import rust-overlay) ];
-        pkgs = import nixpkgs {
-          inherit system overlays;
-        };
-
-        # Build a specific version of cargo-leptos
-        cargo-leptos-build = pkgs.rustPlatform.buildRustPackage {
-          name = "cargo-leptos";
-          buildFeatures = ["no_downloads"];
-          src = cargo-leptos; 
-          cargoHash = "sha256-4v6sCTPRxe7bO7uV3HwUC8P1UsG8ydIvZ4rG2kU22zA=";
-
-          nativeBuildInputs = with pkgs; [
-            pkg-config
-            openssl
-          ];
-
-          doCheck = false;
-        };
-
-        buildPkgs = with pkgs; [
-          (rust-bin.fromRustupToolchainFile ./rust-toolchain.toml)
-          cargo-leptos-build
-          clang
-          sass
-          openssl
-          postgresql
-          imagemagick
-          pkg-config
-        ];
-      in
-      {
-        devShells.default = pkgs.mkShell {
-          LIBCLANG_PATH = pkgs.lib.makeLibraryPath [ pkgs.llvmPackages_latest.libclang.lib ];
-
-          buildInputs = with pkgs; buildPkgs ++ [
-            diesel-cli
-          ];
-
-          shellHook = ''
-            set -a
-            [[ -f .env ]] && source .env
-            set +a
-          '';
-        };
-
-        packages.default = pkgs.rustPlatform.buildRustPackage {
-          name = "libretunes";
-          src = ./.;
-          
-          cargoLock = {
-            lockFile = ./Cargo.lock;
-          };
-
-          LIBCLANG_PATH = pkgs.lib.makeLibraryPath [ pkgs.llvmPackages_latest.libclang.lib ];
-
-          nativeBuildInputs = with pkgs; buildPkgs ++ [
-            makeWrapper
-          ];
-
-          buildInputs = with pkgs; [
-            openssl
-            imagemagick
-          ];
-
-          # TODO enable --release builds
-          # Creates an issue with cargo-leptos trying to create cache directories
-          # See https://github.com/leptos-rs/cargo-leptos/issues/79
-          buildPhase = ''
-            cargo-leptos build --precompress #--release
-          '';
-
-          installPhase = ''
-            mkdir -p $out/bin
-            install -t $out target/debug/libretunes
-            cp -r target/site $out/site
-
-            makeWrapper $out/libretunes $out/bin/libretunes \
-              --set LEPTOS_SITE_ROOT $out/site
-          '';
-
-          doCheck = false;
-        };
-      }
-    );
-}

rust-toolchain.toml

@@ -1,4 +1,3 @@
+
 [toolchain]
 channel = "nightly"
-targets = ["wasm32-unknown-unknown"]
-

src/albumdata.rs

@@ -1,14 +1,11 @@
 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

@@ -1,33 +0,0 @@
-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,4 +1,3 @@
 pub mod history;
 pub mod profile;
 pub mod songs;
-pub mod album;

src/app.rs

@@ -7,7 +7,6 @@ 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;
 
@@ -45,7 +44,6 @@ 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

@@ -19,11 +19,6 @@ use crate::users::UserCredentials;
 /// Returns a Result with the error message if the user could not be created
 #[server(endpoint = "signup")]
 pub async fn signup(new_user: User) -> Result<(), ServerFnError> {
-	// Check LIBRETUNES_DISABLE_SIGNUP env var
-	if std::env::var("LIBRETUNES_DISABLE_SIGNUP").is_ok_and(|v| v == "true") {
-		return Err(ServerFnError::<NoCustomError>::ServerError("Signup is disabled".to_string()));
-	}
-
 	use crate::users::create_user;
 
 	// Ensure the user has no id, and is not a self-proclaimed admin
@@ -92,7 +87,6 @@ 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,4 +8,3 @@ pub mod upload;
 pub mod song_list;
 pub mod loading;
 pub mod error;
-pub mod album_info;

src/components/album_info.rs

@@ -1,25 +0,0 @@
-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,8 +1,6 @@
 use leptos::leptos_dom::*;
 use leptos::*;
 use leptos_icons::*;
-use crate::auth::logout;
-use crate::util::state::GlobalState;
 
 #[component]
 pub fn Personal() -> impl IntoView {
@@ -16,66 +14,18 @@ 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>
-				<Suspense fallback=|| view! { <Icon icon=icondata::CgProfile width="45" height="45"/> }>
+                <Icon icon=icondata::CgProfile />
-					<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>
     }
@@ -83,33 +33,10 @@ pub fn Profile() -> impl IntoView {
 #[component]
 pub fn DropDownNotLoggedIn() -> impl IntoView {
     view! {
-        <div class="dropdown-logged">
+        <div class="dropdown-not-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,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 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/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

@@ -14,11 +14,10 @@ extern crate diesel_migrations;
 #[cfg(feature = "ssr")]
 #[tokio::main]
 async fn main() {
-    use axum::{routing::get, Router, extract::Path, middleware::from_fn};
+    use axum::{routing::get, Router, extract::Path};
     use leptos::*;
     use leptos_axum::{generate_route_list, LeptosRoutes};
     use libretunes::app::*;
-    use libretunes::util::require_auth::require_auth_middleware;
     use libretunes::fileserv::{file_and_error_handler, get_asset_file, get_static_file, AssetType};
     use axum_login::tower_sessions::SessionManagerLayer;
     use tower_sessions_redis_store::{fred::prelude::*, RedisStore};
@@ -64,7 +63,6 @@ async fn main() {
         .route("/assets/audio/:song", get(|Path(song) : Path<String>| get_asset_file(song, AssetType::Audio)))
         .route("/assets/images/:image", get(|Path(image) : Path<String>| get_asset_file(image, AssetType::Image)))
         .route("/assets/*uri", get(|uri| get_static_file(uri, "")))
-        .layer(from_fn(require_auth_middleware))
         .layer(auth_layer)
         .fallback(file_and_error_handler)
         .with_state(leptos_options);

src/models.rs

@@ -6,10 +6,8 @@ use cfg_if::cfg_if;
 cfg_if! {
 	if #[cfg(feature = "ssr")] {
 		use diesel::prelude::*;
-		use crate::database::*;
+		use crate::database::PgPooledConn;
 		use std::error::Error;
-		use crate::songdata::SongData;
-		use crate::albumdata::AlbumData;
 	}
 }
 
@@ -500,7 +498,7 @@ impl Album {
 		Ok(())
 	}
 
-	/// Get songs by this album from the database
+	/// Get songs by this artist from the database
 	/// 
 	/// The `id` field of this album must be present (Some) to get songs
 	/// 
@@ -527,150 +525,13 @@ 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 artist_list: Vec<Artist> = album_artists::table
-			.filter(album_artists::album_id.eq(album_id))
-			.inner_join(artists::table.on(album_artists::artist_id.eq(artists::id)))
-			.select(
-				artists::all_columns
-			)
-			.load(conn)?;
-
-		// 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| a.track.cmp(&b.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)]
+#[derive(Serialize, Deserialize, Clone, Debug)]
 pub struct Song {
 	/// A unique id for the song
 	#[cfg_attr(feature = "ssr", diesel(deserialize_as = i32))]

src/pages.rs

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

src/pages/albumpage.rs

@@ -1,87 +0,0 @@
-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>
-        
-            <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>
-    }
-}
-

src/pages/login.rs

@@ -4,7 +4,6 @@ use leptos::leptos_dom::*;
 use leptos::*;
 use leptos_icons::*;
 use crate::users::UserCredentials;
-use crate::components::loading::Loading;
 
 #[component]
 pub fn Login() -> impl IntoView {
@@ -13,9 +12,6 @@ pub fn Login() -> impl IntoView {
 
     let (show_password, set_show_password) = create_signal(false);
 
-    let loading = create_rw_signal(false);
-    let error_msg = create_rw_signal(None);
-
     let toggle_password = move |_| {
         set_show_password.update(|show_password| *show_password = !*show_password);
         log!("showing password");
@@ -28,9 +24,6 @@ pub fn Login() -> impl IntoView {
         let password1 = password.get();
 
         spawn_local(async move {
-            loading.set(true);
-            error_msg.set(None);
-
             let user_credentials = UserCredentials {
                 username_or_email: username_or_email1,
                 password: password1
@@ -42,7 +35,6 @@ pub fn Login() -> impl IntoView {
             if let Err(err) = login_result {
                 // Handle the error here, e.g., log it or display to the user
                 log!("Error logging in: {:?}", err);
-                error_msg.set(Some(err.to_string()));
 
                 // Since we're not sure what the state is, manually refetch the user
                 user.refetch();
@@ -56,13 +48,10 @@ pub fn Login() -> impl IntoView {
                 log!("Navigated to home page after login");
             } else if let Ok(None) = login_result {
                 log!("Invalid username or password");
-                error_msg.set(Some("Invalid username or password".to_string()));
 
                 // User could be already logged in or not, so refetch the user
                 user.refetch();
             }
-
-            loading.set(false);
         });
     };
 
@@ -107,13 +96,7 @@ pub fn Login() -> impl IntoView {
                         </Show>
                     </div>
                     <a href="" class="forgot-pw">Forgot Password?</a>
-                    <div class="error-msg" >{ move || error_msg.get() }</div>
-                    <Show
-                        when=move || !loading.get()
-                        fallback=move || view! { <Loading /> }
-                    >
                     <input type="submit" value="Login" />
-                    </Show>
                     <span class="go-to-signup">
                         New here? <a href="/signup">Create an Account</a>
                     </span>

src/pages/signup.rs

@@ -4,7 +4,6 @@ use crate::util::state::GlobalState;
 use leptos::leptos_dom::*;
 use leptos::*;
 use leptos_icons::*;
-use crate::components::loading::Loading;
 
 #[component]
 pub fn Signup() -> impl IntoView {
@@ -14,9 +13,6 @@ pub fn Signup() -> impl IntoView {
 
     let (show_password, set_show_password) = create_signal(false);
 
-    let loading = create_rw_signal(false);
-    let error_msg = create_rw_signal(None);
-
     let toggle_password = move |_| {
         set_show_password.update(|show_password| *show_password = !*show_password);
         log!("showing password");
@@ -34,16 +30,12 @@ pub fn Signup() -> impl IntoView {
         };
         log!("new user: {:?}", new_user);
 
-        loading.set(true);
-        error_msg.set(None);
-
         let user = GlobalState::logged_in_user();
 
         spawn_local(async move {
             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);
-                error_msg.set(Some(err.to_string()));
 
                 // Since we're not sure what the state is, manually refetch the user
                 user.refetch();
@@ -57,8 +49,6 @@ pub fn Signup() -> impl IntoView {
                 leptos_router::use_navigate()("/", Default::default());
                 log!("Navigated to home page after signup")
             }
-
-            loading.set(false);
         });
     };
 
@@ -109,13 +99,7 @@ pub fn Signup() -> impl IntoView {
                             </button>
                         </Show>
                     </div>
-                    <div class="error-msg">{ move || error_msg.get() }</div>
-                    <Show
-                        when=move || !loading.get()
-                        fallback=move || view!{ <Loading /> }
-                    >
                     <input type="submit" value="Sign Up"  />
-                    </Show>
                     <span class="go-to-login">
                         Already Have an Account? <a href="/login" class="link" >Go to Login</a>
                     </span>

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" {
+        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);
 
@@ -502,7 +502,7 @@ pub fn PlayBar() -> impl IntoView {
                 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);
 
@@ -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() == " " {
+        if e.key() == " " && status.with_untracked(|status| status.search_active) == false {
             e.prevent_default();
             log!("Space bar pressed, toggling play/pause");
 

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/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/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 = "find_user")]
+#[server(endpoint = "get_user")]
 pub async fn get_user(username_or_email: String) -> Result<Option<User>, ServerFnError> {
 	let mut user = find_user(username_or_email).await?;
 

src/util/mod.rs

@@ -3,7 +3,6 @@ use cfg_if::cfg_if;
 cfg_if! {
 	if #[cfg(feature = "ssr")] {
 		pub mod audio;
-		pub mod require_auth;
 	}
 }
 

src/util/require_auth.rs

@@ -1,46 +0,0 @@
-use axum::extract::Request;
-use axum::response::Response;
-use axum::body::Body;
-use axum::middleware::Next;
-use axum_login::AuthSession;
-use http::StatusCode;
-
-use crate::auth_backend::AuthBackend;
-
-use axum::extract::FromRequestParts;
-
-// Things in pkg/ are allowed automatically. This includes the CSS/JS/WASM files
-const ALLOWED_PATHS: [&str; 5] = ["/login", "/signup", "/api/login", "/api/signup", "/favicon.ico"];
-
-/**
- * Middleware to require authentication for all paths except those in ALLOWED_PATHS
- * 
- * If a user is not authenticated, they will be redirected to the login page
- */
-pub async fn require_auth_middleware(req: Request, next: Next) -> Result<Response<Body>, (StatusCode, &'static str)> {
-	let path = req.uri().path();
-
-	if !ALLOWED_PATHS.iter().any(|&x| x == path) {
-		let (mut parts, body) = req.into_parts();
-
-		let auth_session = AuthSession::<AuthBackend>::from_request_parts(&mut parts, &())
-			.await?;
-
-		if auth_session.user.is_none() {
-			let response = Response::builder()
-				.status(StatusCode::TEMPORARY_REDIRECT)
-				.header("Location", "/login")
-				.body(Body::empty())
-				.map_err(|_| (StatusCode::INTERNAL_SERVER_ERROR, "Failed to build response"))?;
-
-			return Ok(response);
-		}
-
-		let req = Request::from_parts(parts, body);
-		let response = next.run(req).await;
-		Ok(response)
-	} else {
-		let response = next.run(req).await;
-		Ok(response)
-	}
-}

style/album_page.scss

@@ -1,80 +0,0 @@
-@import 'theme.scss';
-
-.album-page-container {
-	width: 90vw;
-
-	.album-header {
-		height: 40vh;
-		width: 65vw;
-		margin: auto;
-		
-
-		padding:20px;
-
-		background-image: linear-gradient($accent-color, $background-color);
-		border-radius: 15px;
-
-		.album-info {
-			width: 100%;
-			height: 100%;
-		}
-	}
-}
-
-.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/login.scss

@@ -8,7 +8,7 @@
   top: 50%;
   left: 50%;
   width: 27rem;
-  height: 31rem;
+  height: 30rem;
   transform: translate(-50%, -50%);
   background: $auth-containers;
   z-index: 1;
@@ -96,17 +96,6 @@
   color: #fff;
   transition: all 0.2s;
 }
-.login-form .error-msg {
-  color: $error-color;
-  margin-top: 1rem;
-  height: 1rem;
-}
-.login-form .loading {
-  margin-top: 4.5rem;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: calc(1.5rem - 10px);
-}
 .login-form input[type="submit"] {
   margin-top: 3rem;
   width: 100%;

style/main.scss

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

style/personal.scss

@@ -11,19 +11,9 @@
     border-radius: 0.4rem;
     margin: 0.2rem;
     min-height: 6rem;
-    border: 0.2rem solid rgba(89, 89, 89, 0.199);
+    border: 2px 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;
@@ -31,23 +21,17 @@
       font-size: 2rem;
       border-radius: 50%;
       transition: all 0.3s;
-      height: 45;
+      height: max-content;
-      width: 45;
       margin-left: auto;
-      .profile-image {
-        width: 100%;
-        height: 100%;
-        border-radius: 50%;
-      }
     }
 
     .profile-icon:hover {
-      transform: scale(1.05);
+      transform: scale(1.1);
       background-color: rgba(255, 255, 255, 0.1);
     }
 
     .profile-icon:active {
-      transform: scale(0.95);
+      transform: scale(0.8);
     }
     .dropdown-container {
       position: absolute;
@@ -57,10 +41,10 @@
       border-radius: 0.5rem;
       width: 10rem;
       z-index: 1;
-      background-color: #1c1c1c;
+      background-color: red;
-      border: 0.2rem solid rgba(89, 89, 89, 0.199);
+      border: 1px solid grey;
 
-      .dropdown-logged {
+      .dropdown-not-logged {
         display: flex;
         flex-direction: column;
         width: 100%;
@@ -69,29 +53,21 @@
         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,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 */
@@ -30,31 +32,6 @@
 			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/search.scss

@@ -1,4 +1,92 @@
 @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/signup.scss

@@ -17,7 +17,7 @@
   top: 50%;
   left: 50%;
   width: 27rem;
-  height: 36rem;
+  height: 35rem;
   transform: translate(-50%, -50%);
   background: $auth-containers;
   z-index: 1;
@@ -92,17 +92,7 @@
 .signup-form .input-box input:focus ~ i {
   height: 2.6rem;
 }
-.signup-form .error-msg {
+
-  color: $error-color;
-  margin-top: 1rem;
-  height: 1rem;
-}
-.signup-form .loading {
-  margin-top: 4.5rem;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: calc(1.5rem - 10px);
-}
 .signup-form input[type="submit"] {
   margin-top: 3.5rem;
   width: 100%;

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

@@ -10,9 +10,9 @@ $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;
-$error-color: red;
+$search-background: $play-bar-background-color;
+$search-border: #3f3f3f;
 
 $auth-inputs: #796dd4;
 $auth-containers: white;