Friend List Styling

Organization and Friend Requests Page
API Endpoints for managing friend requests, and a LOT of trait bound debugging...
2024-12-07 02:56:16 +00:00 · 2024-12-07 01:34:12 +00:00 · 2024-12-01 22:56:50 +00:00 · 2024-11-29 23:37:16 +00:00 · 2024-11-29 22:40:50 +00:00 · 2024-11-29 21:08:50 +00:00
38 changed files with 547 additions and 920 deletions
--- a/.gitea/workflows/push.yaml
+++ b/.gitea/workflows/push.yaml
@ -7,15 +7,13 @@ 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
@ -52,8 +50,6 @@ jobs:
    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

@ -62,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

@ -72,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
@ -81,13 +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: Build project with Nix
-        run: nix build --experimental-features 'nix-command flakes' git+$GITHUB_SERVER_URL/$GITHUB_REPOSITORY.git?ref=$GITHUB_REF_NAME#default
--- a/.gitignore
+++ b/.gitignore
@ -31,7 +31,3 @@ playwright/.cache/

 # Sass cache
 .sass-cache
-
-# Nix-related files
-.direnv/
-result
--- a/Cargo.lock
+++ b/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"
--- a/Cargo.toml
+++ b/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 }
--- a/2
+++ b/2
@ -4,7 +4,7 @@ WORKDIR /app

 RUN rustup default nightly
 RUN rustup target add wasm32-unknown-unknown
-RUN cargo install cargo-leptos@0.2.22
+RUN cargo install cargo-leptos

 # Install a few dependencies
 RUN set -eux; \
--- a/flake.lock
+++ b/flake.lock
@ -1,114 +0,0 @@
-{
-  "nodes": {
-    "cargo-leptos": {
-      "flake": false,
-      "locked": {
-        "lastModified": 1732915351,
-        "narHash": "sha256-QPCYKlbPHuSBmwfkKdYhcVF81Lnirf65IYao7UVxz9Q=",
-        "owner": "leptos-rs",
-        "repo": "cargo-leptos",
-        "rev": "7d782a18e9d377be9de8d6217567ddde830fe89e",
-        "type": "github"
-      },
-      "original": {
-        "owner": "leptos-rs",
-        "ref": "v0.2.22",
-        "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
-}
--- a/flake.nix
+++ b/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;
-        };
-      }
-    );
-}
--- a/migrations/2024-10-23-231700_add_songs_added_date/down.sql
+++ b/migrations/2024-10-23-231700_add_songs_added_date/down.sql
@ -1,2 +0,0 @@
-ALTER TABLE songs
-DROP COLUMN added_date;
--- a/migrations/2024-10-23-231700_add_songs_added_date/up.sql
+++ b/migrations/2024-10-23-231700_add_songs_added_date/up.sql
@ -1,2 +0,0 @@
-ALTER TABLE songs
-ADD COLUMN added_date DATE DEFAULT CURRENT_DATE;
--- a/rust-toolchain.toml
+++ b/rust-toolchain.toml
@ -1,4 +1,3 @@
+
 [toolchain]
 channel = "nightly"
-targets = ["wasm32-unknown-unknown"]
-
--- a/src/api/albums.rs
+++ b/src/api/albums.rs
@ -1,65 +0,0 @@
-use leptos::*;
-
-use cfg_if::cfg_if;
-
-cfg_if! {
-    if #[cfg(feature = "ssr")] {
-        use crate::database::get_db_conn;
-        use diesel::prelude::*;
-        use chrono::NaiveDate;
-    }
-}
-
-/// Add an album to the database
-/// 
-/// # Arguments
-/// 
-/// * `album_title` - The name of the artist to add
-/// * `release_data` - The release date of the album (Optional)
-/// * `image_path` - The path to the album's image file (Optional)
-/// 
-/// # Returns
-///  * `Result<(), Box<dyn Error>>` - A empty result if successful, or an error
-/// 
-#[server(endpoint = "albums/add-album")]
-pub async fn add_album(album_title: String, release_date: Option<String>, image_path: Option<String>) -> Result<(), ServerFnError> {
-    use crate::schema::albums::{self};
-    use crate::models::Album;
-    use leptos::server_fn::error::NoCustomError;
-    
-    let parsed_release_date = match release_date {
-        Some(date) => {
-            match NaiveDate::parse_from_str(&date.trim(), "%Y-%m-%d") {
-                Ok(parsed_date) => Some(parsed_date),
-                Err(_e) => return Err(ServerFnError::<NoCustomError>::ServerError("Invalid release date".to_string()))
-            }
-        },
-        None => None
-    };
-
-    let image_path_arg = match image_path {
-        Some(image_path) => {
-            if image_path.is_empty() {
-                None
-            } else {
-                Some(image_path)
-            }
-        },
-        None => None
-    };
-    
-    let new_album = Album {
-        id: None,
-        title: album_title,
-        release_date: parsed_release_date,
-        image_path: image_path_arg
-    };
-
-    let db = &mut get_db_conn();
-    diesel::insert_into(albums::table)
-        .values(&new_album)
-        .execute(db)
-        .map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error adding album: {}", e)))?;
-
-    Ok(())
-}
--- a/src/api/artists.rs
+++ b/src/api/artists.rs
@ -1,39 +0,0 @@
-use leptos::*;
-
-use cfg_if::cfg_if;
-
-cfg_if! {
-    if #[cfg(feature = "ssr")] {
-        use crate::database::get_db_conn;
-        use diesel::prelude::*;
-    }
-}
-
-/// Add an artist to the database
-/// 
-/// # Arguments
-/// 
-/// * `artist_name` - The name of the artist to add
-/// 
-/// # Returns
-///  * `Result<(), Box<dyn Error>>` - A empty result if successful, or an error
-/// 
-#[server(endpoint = "artists/add-artist")]
-pub async fn add_artist(artist_name: String) -> Result<(), ServerFnError> {
-    use crate::schema::artists::dsl::*;
-    use crate::models::Artist;
-    use leptos::server_fn::error::NoCustomError;
-
-    let new_artist = Artist {
-        id: None,
-        name: artist_name,
-    };
-
-    let db = &mut get_db_conn();
-    diesel::insert_into(artists)
-        .values(&new_artist)
-        .execute(db)
-        .map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error adding artist: {}", e)))?;
-    
-    Ok(())
-}
--- a/src/api/friends.rs
+++ b/src/api/friends.rs
@ -0,0 +1,227 @@
+use leptos::*;
+use cfg_if::cfg_if;
+use crate::frienddata::FriendData;
+
+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::exists;
+		use crate::models::*;
+		use crate::schema::*;
+
+		use chrono::prelude::*;
+	}
+}
+
+/// Get a user's list of friends from the database
+#[server(endpoint = "/profile/friends")]
+pub async fn friends(for_user_id: i32)
+	-> Result<Vec<FriendData>, ServerFnError>
+{
+	let mut db_con = get_db_conn();
+
+	let friends = friendships::table
+		.filter(friendships::friend_1_id.eq(for_user_id))
+		.filter(friendships::friend_1_id.ne(friendships::friend_2_id))
+		.inner_join(users::table.on(users::id.eq(friendships::friend_2_id)))
+		.select((users::all_columns, friendships::created_at))
+		.order(friendships::created_at.desc())
+		.order(users::username.asc())
+		.union(
+			friendships::table
+			.filter(friendships::friend_2_id.eq(for_user_id))
+			.filter(friendships::friend_1_id.ne(friendships::friend_2_id))
+			.inner_join(users::table.on(users::id.eq(friendships::friend_1_id)))
+			.select((users::all_columns, friendships::created_at))
+			.order(friendships::created_at.desc())
+			.order(users::username.asc())
+		)
+		.load(&mut db_con)?;
+	
+	let friend_list: Vec<FriendData> = friends.into_iter().map(|(user, created_at): (User, NaiveDateTime)| {
+		FriendData {
+			username: user.username,
+			created_at: created_at.into(),
+			user_id: user.id.unwrap()
+		}
+	}).collect();
+
+	Ok(friend_list)
+}
+
+/// Get a user's list of friend requests (outgoing) from the database
+#[server(endpoint = "/profile/friend-requests-outgoing")]
+pub async fn friend_requests_outgoing(for_user_id: i32)
+	-> Result<Vec<FriendData>, ServerFnError>
+{
+	let mut db_con = get_db_conn();
+
+	let friends = friend_requests::table
+		.filter(friend_requests::from_id.eq(for_user_id))
+		.filter(friend_requests::from_id.ne(friend_requests::to_id))
+		.inner_join(users::table.on(users::id.eq(friend_requests::to_id)))
+		.select((users::all_columns, friend_requests::created_at))
+		.order(friend_requests::created_at.desc())
+		.order(users::username.asc())
+		.load(&mut db_con)?;
+	
+	let friend_list: Vec<FriendData> = friends.into_iter().map(|(user, created_at): (User, NaiveDateTime)| {
+		FriendData {
+			username: user.username,
+			created_at: created_at.into(),
+			user_id: user.id.unwrap()
+		}
+	}).collect();
+
+	Ok(friend_list)
+}
+
+/// Get a user's list of friend requests (incoming) from the database
+#[server(endpoint = "/profile/friend-requests-incoming")]
+pub async fn friend_requests_incoming(for_user_id: i32)
+	-> Result<Vec<FriendData>, ServerFnError>
+{
+	let mut db_con = get_db_conn();
+
+	let friends = friend_requests::table
+		.filter(friend_requests::to_id.eq(for_user_id))
+		.filter(friend_requests::from_id.ne(friend_requests::to_id))
+		.inner_join(users::table.on(users::id.eq(friend_requests::from_id)))
+		.select((users::all_columns, friend_requests::created_at))
+		.order(friend_requests::created_at.desc())
+		.order(users::username.asc())
+		.load(&mut db_con)?;
+	
+	let friend_list: Vec<FriendData> = friends.into_iter().map(|(user, created_at): (User, NaiveDateTime)| {
+		FriendData {
+			username: user.username,
+			created_at: created_at.into(),
+			user_id: user.id.unwrap()
+		}
+	}).collect();
+
+	Ok(friend_list)
+}
+
+/// Send a friend request
+#[server(endpoint = "/profile/send-friend-request")]
+pub async fn send_friend_request(to_user_id: i32)
+	-> Result<(), ServerFnError>
+{
+	let mut db_con = get_db_conn();
+
+	// Get user id from session
+	let user = get_user().await
+		.map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error getting user: {}", e)))?;
+
+	// Get current time for request
+	let timestamp: NaiveDateTime = Utc::now().naive_utc();
+
+	// Insert into database (if already exists, won't succeed due to primary key)
+	diesel::insert_into(crate::schema::friend_requests::table)
+		.values((friend_requests::created_at.eq(timestamp),friend_requests::from_id.eq(user.id.unwrap()),friend_requests::to_id.eq(to_user_id)))
+		.execute(&mut db_con)
+		.map_err(|e| {
+			let msg = format!("Error saving friend request to database: {}", e);
+			ServerFnError::<NoCustomError>::ServerError(msg)
+		})?;
+	
+	Ok(())
+}
+
+/// Remove an outgoing friend request
+#[server(endpoint = "/profile/friend-requests-incoming")]
+pub async fn delete_friend_request(to_user_id: i32)
+	-> Result<(), ServerFnError>
+{
+	let mut db_con = get_db_conn();
+
+	// Get user id from session
+	let user = get_user().await
+		.map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error getting user: {}", e)))?;
+
+	// Delete the friend request
+	diesel::delete(friend_requests::table
+		.filter(friend_requests::from_id.eq(user.id.unwrap()))
+		.filter(friend_requests::to_id.eq(to_user_id))
+	).execute(&mut db_con)?;
+
+	Ok(())
+}
+
+/// Remove an existing friendship
+#[server(endpoint = "/profile/delete-friend")]
+pub async fn delete_friend(for_user_id: i32)
+	-> Result<(), ServerFnError>
+{
+	let mut db_con = get_db_conn();
+
+	// Get user id from session
+	let user = get_user().await
+		.map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error getting user: {}", e)))?;
+
+	// Delete the friend request
+	diesel::delete(friendships::table
+		.filter(friendships::friend_1_id.eq(user.id.unwrap()))
+		.filter(friendships::friend_2_id.eq(for_user_id))
+	).execute(&mut db_con)?;
+
+	diesel::delete(friendships::table
+		.filter(friendships::friend_2_id.eq(user.id.unwrap()))
+		.filter(friendships::friend_1_id.eq(for_user_id))
+	).execute(&mut db_con)?;
+
+	Ok(())
+}
+
+/// Accept a friend request
+#[server(endpoint = "/profile/accept-friend-request")]
+pub async fn accept_friend_request(to_user_id: i32)
+	-> Result<(), ServerFnError>
+{
+	let mut db_con = get_db_conn();
+
+	// Get user id from session
+	let user = get_user().await
+		.map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error getting user: {}", e)))?;
+
+	// Get current time for request
+	let timestamp: NaiveDateTime = Utc::now().naive_utc();
+
+	// Make sure the person has received a friend request from the other person
+	let req = diesel::select(exists(
+		friend_requests::table
+			.filter(friend_requests::from_id.eq(user.id.unwrap()))
+			.filter(friend_requests::to_id.eq(to_user_id))
+	)).get_result::<bool>(&mut db_con)?;
+
+	if req == false {
+		Err(ServerFnError::<NoCustomError>::ServerError(format!("Error, the friend request does not exist!")))?;
+	}
+
+	// Delete the friend requests
+	diesel::delete(friend_requests::table
+		.filter(friend_requests::from_id.eq(user.id.unwrap()))
+		.filter(friend_requests::to_id.eq(to_user_id))
+	).execute(&mut db_con)?;
+
+	diesel::delete(friend_requests::table
+		.filter(friend_requests::to_id.eq(user.id.unwrap()))
+		.filter(friend_requests::from_id.eq(to_user_id))
+	).execute(&mut db_con)?;
+
+	// Add the new friend request either direction
+	diesel::insert_into(crate::schema::friendships::table)
+		.values((friendships::created_at.eq(timestamp),friendships::friend_1_id.eq(user.id.unwrap()),friendships::friend_2_id.eq(to_user_id)))
+		.execute(&mut db_con)
+		.map_err(|e| {
+			let msg = format!("Error saving friendship to database: {}", e);
+			ServerFnError::<NoCustomError>::ServerError(msg)
+	})?;
+	
+	Ok(())
+}
--- a/src/api/mod.rs
+++ b/src/api/mod.rs
@ -1,6 +1,5 @@
-pub mod artists;
-pub mod albums;
 pub mod history;
 pub mod profile;
 pub mod songs;
 pub mod album;
+pub mod friends;
--- a/src/api/profile.rs
+++ b/src/api/profile.rs
@ -141,7 +141,6 @@ pub async fn recent_songs(for_user_id: i32, limit: Option<i64>) -> Result<Vec<(N
 				song_path: song.storage_path,
 				image_path: image_path,
 				like_dislike: like_dislike,
-				added_date: song.added_date.unwrap(),
 			};

 			history_songs.insert(song_id, (history.date, songdata));
@ -240,7 +239,6 @@ pub async fn top_songs(for_user_id: i32, start_date: NaiveDateTime, end_date: Na
 				song_path: song.storage_path,
 				image_path: image_path,
 				like_dislike: like_dislike,
-				added_date: song.added_date.unwrap(),
 			};

 			let plays = history_counts.get(&song_id)
--- a/src/app.rs
+++ b/src/app.rs
@ -8,6 +8,7 @@ use crate::pages::login::*;
 use crate::pages::signup::*;
 use crate::pages::profile::*;
 use crate::pages::albumpage::*;
+use crate::pages::friends::*;
 use crate::error_template::{AppError, ErrorTemplate};
 use crate::util::state::GlobalState;

@ -19,8 +20,6 @@ pub fn App() -> impl IntoView {
    provide_context(GlobalState::new());

    let upload_open = create_rw_signal(false);
-    let add_artist_open = create_rw_signal(false);
-    let add_album_open = create_rw_signal(false);

    view! {
        // injects a stylesheet into the document <head>
@ -41,12 +40,14 @@ pub fn App() -> impl IntoView {
        }>
            <main>
                <Routes>
-                    <Route path="" view=move || view! { <HomePage upload_open=upload_open add_artist_open=add_artist_open add_album_open=add_album_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 path="user/:id/friends" view=Friends />
+                        <Route path="user/:id/friendrequests" view=FriendRequests />
                        <Route path="album/:id" view=AlbumPage />
                    </Route>
                    <Route path="/login" view=Login />
@ -62,18 +63,14 @@ use crate::components::dashboard::*;
 use crate::components::search::*;
 use crate::components::personal::Personal;
 use crate::components::upload::*;
-use crate::components::add_artist::AddArtist;
-use crate::components::add_album::AddAlbum;

 /// Renders the home page of your application.
 #[component]
-fn HomePage(upload_open: RwSignal<bool>, add_artist_open: RwSignal<bool>, add_album_open: RwSignal<bool>) -> impl IntoView {
+fn HomePage(upload_open: RwSignal<bool>) -> impl IntoView {
    view! {
        <div class="home-container">
            <Upload open=upload_open/>
-            <AddArtist open=add_artist_open/>
-            <AddAlbum open=add_album_open/>
-            <Sidebar upload_open=upload_open add_artist_open=add_artist_open add_album_open=add_album_open/>
+            <Sidebar upload_open=upload_open/>
            // This <Outlet /> will render the child route components
            <Outlet />
            <Personal />
--- a/src/components.rs
+++ b/src/components.rs
@ -5,10 +5,8 @@ pub mod personal;
 pub mod dashboard_tile;
 pub mod dashboard_row;
 pub mod upload;
-pub mod upload_dropdown;
-pub mod add_artist;
-pub mod add_album;
 pub mod song_list;
 pub mod loading;
 pub mod error;
 pub mod album_info;
+pub mod friend_list;
--- a/src/components/add_album.rs
+++ b/src/components/add_album.rs
@ -1,92 +0,0 @@
-use leptos::*;
-use leptos::leptos_dom::log;
-use leptos_icons::*;
-use crate::api::albums::add_album;
-
-#[component]
-pub fn AddAlbumBtn(add_album_open: RwSignal<bool>) -> impl IntoView {
-    let open_dialog = move |_| {
-        add_album_open.set(true);
-    };
-    view! {
-        <button class="add-album-btn add-btns" on:click=open_dialog>
-            Add Album
-        </button>
-    }
-}
-#[component]
-pub fn AddAlbum(open: RwSignal<bool>) -> impl IntoView {
-    let album_title = create_rw_signal("".to_string());
-    let release_date = create_rw_signal("".to_string());
-    let image_path = create_rw_signal("".to_string());
-
-    let close_dialog = move |ev: leptos::ev::MouseEvent| {
-		ev.prevent_default();
-		open.set(false);
-	};
-
-    let on_add_album = move |ev: leptos::ev::SubmitEvent| {
-        ev.prevent_default();
-        let album_title_clone = album_title.get();
-        let release_date_clone = Some(release_date.get());
-        let image_path_clone = Some(image_path.get());
-
-        spawn_local(async move {
-            let add_album_result = add_album(album_title_clone, release_date_clone, image_path_clone).await;
-            if let Err(err) = add_album_result {
-                log!("Error adding album: {:?}", err);
-            } else if let Ok(album) = add_album_result {
-                log!("Added album: {:?}", album);
-                album_title.set("".to_string());
-                release_date.set("".to_string());
-                image_path.set("".to_string());
-            }
-        })
-    };
-
-    view! {
-        <Show when=open fallback=move|| view!{}>
-            <div class="add-album-container">
-                <div class="upload-header">
-                    <h1>Add Album</h1>
-                </div>
-                <div class="close-button" on:click=close_dialog><Icon icon=icondata::IoClose /></div>
-                <form class="create-album-form" action="POST" on:submit=on_add_album>
-                    <div class="input-bx">
-                        <input type="text" required class="text-input" 
-                            prop:value=album_title
-                            on:input=move |ev: leptos::ev::Event| {
-                                album_title.set(event_target_value(&ev));
-                            }        
-                            required 
-                         />
-                        <span>Album Title</span>
-                    </div>
-                    <div class="release-date">
-						<div class="left">
-							<span>Release</span>
-							<span>Date</span>
-						</div>
-						<input class="info" type="date"
-                            prop:value=release_date
-                            on:input=move |ev: leptos::ev::Event| {
-                                release_date.set(event_target_value(&ev));
-                            }
-                        />
-					</div>
-                    <div class="input-bx">
-                        <input type="text" class="text-input" 
-                            prop:value=image_path
-                            on:input=move |ev: leptos::ev::Event| {
-                                image_path.set(event_target_value(&ev));
-                            }        
-                         />
-                        <span>Image Path</span>
-                    </div>
-                    <button type="submit" class="upload-button">Add</button>
-                </form>
-            </div>
-        </Show>
-    }
-
-}
--- a/src/components/add_artist.rs
+++ b/src/components/add_artist.rs
@ -1,62 +0,0 @@
-use leptos::*;
-use leptos::leptos_dom::log;
-use leptos_icons::*;
-use crate::api::artists::add_artist;
-
-#[component]
-pub fn AddArtistBtn(add_artist_open: RwSignal<bool>) -> impl IntoView {
-    let open_dialog = move |_| {
-        add_artist_open.set(true);
-    };
-    view! {
-        <button class="add-artist-btn add-btns" on:click=open_dialog>
-            Add Artist
-        </button>
-    }
-}
-#[component]
-pub fn AddArtist(open: RwSignal<bool>) -> impl IntoView {
-    let artist_name = create_rw_signal("".to_string());
-
-    let close_dialog = move |ev: leptos::ev::MouseEvent| {
-		ev.prevent_default();
-		open.set(false);
-	};
-    let on_add_artist = move |ev: leptos::ev::SubmitEvent| {
-        ev.prevent_default();
-        let artist_name_clone = artist_name.get();
-        spawn_local(async move {
-            let add_artist_result = add_artist(artist_name_clone).await;
-            if let Err(err) = add_artist_result {
-                log!("Error adding artist: {:?}", err);
-            } else if let Ok(artist) = add_artist_result {
-                log!("Added artist: {:?}", artist);
-                artist_name.set("".to_string());
-            }
-        })
-    };
-
-    view! {
-        <Show when=open fallback=move|| view!{}>
-            <div class="add-artist-container">
-                <div class="upload-header">
-                    <h1>Add Artist</h1>
-                </div>
-                <div class="close-button" on:click=close_dialog><Icon icon=icondata::IoClose /></div>
-                <form class="create-artist-form" action="POST" on:submit=on_add_artist>
-                    <div class="input-bx">
-                        <input type="text" name="title" required class="text-input" 
-                            prop:value=artist_name
-                            on:input=move |ev: leptos::ev::Event| {
-                                artist_name.set(event_target_value(&ev));
-                            }        
-                            required 
-                         />
-                        <span>Artist Name</span>
-                    </div>
-                    <button type="submit" class="upload-button">Add</button>
-                </form>
-            </div>
-        </Show>
-    }
-}
--- a/src/components/friend_list.rs
+++ b/src/components/friend_list.rs
@ -0,0 +1,37 @@
+use leptos::leptos_dom::*;
+use leptos::*;
+use leptos_icons::*;
+use crate::frienddata::FriendData;
+
+#[component]
+pub fn FriendRow(user: FriendData) -> impl IntoView {
+	  
+    view! {
+		<div class="friend-row">
+            <div class="friend-info">
+                <div class="friend-item">
+                    <Suspense fallback=|| view! { <Icon class="friend-image" icon=icondata::CgProfile/> }>
+                        <img class="friend-image" src={format!("/assets/images/profile/{}.webp", user.user_id)} alt="Profile Photo" />
+                    </Suspense>
+                </div>
+                <a class="friend-item" href={format!("../../user/{}",user.user_id)}>{user.username}</a>
+            </div>
+            <p class="friend-created-date">{user.created_at.format("%m/%d/%Y").to_string()}</p>
+		</div>
+	}.into_view()
+}
+
+#[component]
+pub fn FriendList(friends: Vec<FriendData>) -> impl IntoView {
+    view! {
+		<div class="friend-container">
+            {
+                friends.iter().map(|friend| {
+                    view! {
+                        <FriendRow user={friend.clone()} />
+                    }
+                }).collect::<Vec<_>>()
+            }
+		</div>
+	}.into_view()
+}
--- a/src/components/sidebar.rs
+++ b/src/components/sidebar.rs
@ -1,15 +1,13 @@
 use leptos::leptos_dom::*;
 use leptos::*;
 use leptos_icons::*;
-use crate::components::upload_dropdown::*;
+use crate::components::upload::*;

 #[component]
-pub fn Sidebar(upload_open: RwSignal<bool>, add_artist_open: RwSignal<bool>, add_album_open: RwSignal<bool>) -> impl IntoView {
+pub fn Sidebar(upload_open: RwSignal<bool>) -> impl IntoView {
    use leptos_router::use_location;
    let location = use_location();

-    let dropdown_open = create_rw_signal(false);
-
    let on_dashboard = Signal::derive(
        move || location.pathname.get().starts_with("/dashboard") || location.pathname.get() == "/",
    );
@ -21,26 +19,8 @@ pub fn Sidebar(upload_open: RwSignal<bool>, add_artist_open: RwSignal<bool>, add
    view! {
        <div class="sidebar-container">
            <div class="sidebar-top-container">
-                <Show
-                    when=move || {upload_open.get() || add_artist_open.get() || add_album_open.get()}
-                    fallback=move || view! {}
-                >
-                    <div class="upload-overlay" on:click=move |_| {
-                        upload_open.set(false);
-                        add_artist_open.set(false);
-                        add_album_open.set(false);
-                    }></div>
-                </Show>
                <h2 class="header">LibreTunes</h2>
-                <div class="upload-dropdown-container">
-                    <UploadDropdownBtn dropdown_open=dropdown_open/>
-                    <Show
-                        when= move || dropdown_open()
-                        fallback=move || view! {}
-                    >
-                        <UploadDropdown dropdown_open=dropdown_open upload_open=upload_open add_artist_open=add_artist_open add_album_open=add_album_open/>
-                    </Show>
-                </div>
+                <UploadBtn dialog_open=upload_open />
                <a class="buttons" href="/dashboard" style={move || if on_dashboard() {"color: #e1e3e1"} else {""}} >
                    <Icon icon=icondata::OcHomeFillLg />
                    <h1>Dashboard</h1>
--- a/src/components/upload.rs
+++ b/src/components/upload.rs
@ -16,8 +16,11 @@ pub fn UploadBtn(dialog_open: RwSignal<bool>) -> impl IntoView {
 	};

 	view! {
-		<button class="upload-btn add-btns" on:click=open_dialog>
-			Upload Song
+		<button class="upload-btn" on:click=open_dialog>
+			<div class="add-sign">
+				<Icon icon=icondata::IoAddSharp />
+			</div>
+			Upload
 		</button>
 	}
 }
--- a/src/components/upload_dropdown.rs
+++ b/src/components/upload_dropdown.rs
@ -1,30 +0,0 @@
-use leptos::*;
-use leptos_icons::*;
-use crate::components::upload::*;
-use crate::components::add_artist::*;
-use crate::components::add_album::*;
-
-#[component]
-pub fn UploadDropdownBtn(dropdown_open: RwSignal<bool>) -> impl IntoView {
-    let open_dropdown = move |_| {
-        dropdown_open.set(!dropdown_open.get());
-    };
-    view! {
-        <button class={move || if dropdown_open() {"upload-dropdown-btn upload-dropdown-btn-active"} else {"upload-dropdown-btn"}} on:click=open_dropdown>
-			<div class="add-sign">
-				<Icon icon=icondata::IoAddSharp />
-			</div>
-		</button>
-    }
-}
-
-#[component]
-pub fn UploadDropdown(dropdown_open: RwSignal<bool>, upload_open: RwSignal<bool>, add_artist_open: RwSignal<bool>, add_album_open: RwSignal<bool>) -> impl IntoView {
-    view! {
-        <div class="upload-dropdown" on:click=move |_| dropdown_open.set(false)>
-            <UploadBtn dialog_open=upload_open />
-            <AddArtistBtn add_artist_open=add_artist_open/>
-            <AddAlbumBtn add_album_open=add_album_open/>
-        </div>
-    }
-}
--- a/src/frienddata.rs
+++ b/src/frienddata.rs
@ -0,0 +1,17 @@
+use serde::{Serialize, Deserialize};
+
+use chrono::NaiveDate;
+
+/// Holds information about a user (friend)
+/// 
+/// Intended to be used in the front-end
+
+#[derive(Serialize, Deserialize, Clone)]
+pub struct FriendData {
+	/// Username
+	pub username: String,
+	/// Date which the user/friend was added
+	pub created_at: NaiveDate,
+	/// User's id to be used to locate their profile image
+	pub user_id: i32
+}
--- a/src/lib.rs
+++ b/src/lib.rs
@ -3,6 +3,7 @@ pub mod auth;
 pub mod songdata;
 pub mod albumdata;
 pub mod artistdata;
+pub mod frienddata;
 pub mod playstatus;
 pub mod playbar;
 pub mod database;
--- a/src/models.rs
+++ b/src/models.rs
@ -542,14 +542,24 @@ impl Album {
 	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
-			)
+		let album: Vec<(Album, std::option::Option<Artist>)> = albums::table
+			.find(album_id)
+			.left_join(songs::table.on(albums::id.nullable().eq(songs::album_id)))
+			.left_join(song_artists::table.inner_join(artists::table).on(songs::id.eq(song_artists::song_id)))
+			.select((
+				albums::all_columns,
+				artists::all_columns.nullable()
+			))
+			.distinct()
 			.load(conn)?;

+		let mut artist_list: Vec<Artist> = Vec::new();
+
+		for (_, artist) in album {
+			if let Some(artist) = artist {
+				artist_list.push(artist);
+			}
+		}
 		// Get info of album
 		let albuminfo = albums::table
 			.filter(albums::id.eq(album_id))
@ -652,7 +662,6 @@ impl Album {
 						song_path: song.storage_path,
 						image_path: image_path,
 						like_dislike: like_dislike,
-						added_date: song.added_date.unwrap(),
 					};
 		
 					album_songs.insert(song.id.unwrap(), songdata);
@ -662,7 +671,7 @@ impl Album {
 		
 		// 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));
+		songdata.sort_by(|a, b| b.track.cmp(&a.track));
 		Ok(songdata)
 	}
 }
@ -690,9 +699,6 @@ pub struct Song {
 	pub storage_path: String,
 	/// The path to the song's image file
 	pub image_path: Option<String>,
-	/// The date the song was added to the database
-	#[cfg_attr(feature = "ssr", diesel(deserialize_as = NaiveDate))]
-	pub added_date: Option<NaiveDate>,
 }

 impl Song {
--- a/src/pages.rs
+++ b/src/pages.rs
@ -2,3 +2,4 @@ pub mod login;
 pub mod signup;
 pub mod profile;
 pub mod albumpage;
+pub mod friends;
--- a/src/pages/friends.rs
+++ b/src/pages/friends.rs
@ -0,0 +1,133 @@
+use leptos::leptos_dom::*;
+use leptos::*;
+use leptos_router::*;
+use crate::api::friends::*;
+use crate::components::friend_list::*;
+use crate::components::loading::Loading;
+
+
+#[derive(Params, PartialEq)]
+struct FriendParams {
+    id: i32
+}
+
+#[component]
+pub fn Friends() -> impl IntoView {
+    let params = use_params::<FriendParams>();
+
+    let id = move || {params.with(|params| {
+            params.as_ref()
+                .map(|params| params.id)
+                .map_err(|e| e.clone())
+        })
+    };
+
+    let friend_list = create_resource(
+        id,
+        |value| async move {
+            match value {
+                Ok(v) => {friends(v).await},
+                Err(e) => {Err(ServerFnError::Request(format!("Error getting song data: {}", e).into()))},
+            }
+        },
+    );
+
+    view! {
+        <div class="friend-page-container">
+            <h1 class="friend-header"> "Friends:" </h1>
+            <Transition
+                fallback=move || view! {
+                    <Loading />
+                }
+            >
+                <ErrorBoundary
+                    fallback=|errors| view! {
+                        {move || errors.get()
+                            .into_iter()
+                            .map(|(_, e)| view! { <p>{e.to_string()}</p>})
+                            .collect_view()
+                        }
+                    }
+                >
+                    {
+                        friend_list.get().map(|friend_list| {
+                            friend_list.map(|friend_list| {
+                                view! {<FriendList friends={friend_list} />}
+                            })
+                        })
+                    }
+                </ErrorBoundary>
+            </Transition>
+        </div>
+    }
+}
+
+#[component]
+pub fn FriendRequests() -> impl IntoView {
+    let params = use_params::<FriendParams>();
+
+    let id = move || {params.with(|params| {
+            params.as_ref()
+                .map(|params| params.id)
+                .map_err(|e| e.clone())
+        })
+    };
+
+    let friend_list_incoming = create_resource(
+        id,
+        |value| async move {
+            match value {
+                Ok(v) => {friend_requests_incoming(v).await},
+                Err(e) => {Err(ServerFnError::Request(format!("Error getting song data: {}", e).into()))},
+            }
+        },
+    );
+
+    let friend_list_outgoing = create_resource(
+        id,
+        |value| async move {
+            match value {
+                Ok(v) => {friend_requests_outgoing(v).await},
+                Err(e) => {Err(ServerFnError::Request(format!("Error getting song data: {}", e).into()))},
+            }
+        },
+    );
+
+    view! {
+        <div class="friend-page-container">
+            <h1 class="friend-header"> "Friend Requests:" </h1>
+            <Transition
+                fallback=move || view! {
+                    <Loading />
+                }
+            >
+                <ErrorBoundary
+                    fallback=|errors| view! {
+                        {move || errors.get()
+                            .into_iter()
+                            .map(|(_, e)| view! { <p>{e.to_string()}</p>})
+                            .collect_view()
+                        }
+                    }
+                >
+                    <h2>Sent: </h2>
+                    {
+                        friend_list_outgoing.get().map(|friend_list| {
+                            friend_list.map(|friend_list| {
+                                view! {<FriendList friends={friend_list} />}
+                            })
+                        })
+                    }
+                    <h2>Received: </h2>
+                    {
+                        friend_list_incoming.get().map(|friend_list| {
+                            friend_list.map(|friend_list| {
+                                view! {<FriendList friends={friend_list} />}
+                            })
+                        })
+                    }
+                </ErrorBoundary>
+            </Transition>
+        </div>
+    }
+}
--- a/src/schema.rs
+++ b/src/schema.rs
@ -96,7 +96,6 @@ diesel::table! {
        release_date -> Nullable<Date>,
        storage_path -> Varchar,
        image_path -> Nullable<Varchar>,
-        added_date -> Date,
    }
 }

--- a/src/songdata.rs
+++ b/src/songdata.rs
@ -31,8 +31,6 @@ pub struct SongData {
 	pub image_path: String,
 	/// Whether the song is liked by the user
 	pub like_dislike: Option<(bool, bool)>,
-	/// The date the song was added to the database
-	pub added_date: NaiveDate,
 }


@ -61,8 +59,6 @@ impl TryInto<Song> for SongData {
 			} else {
 				Some(self.image_path)
 			},
-
-			added_date: Some(self.added_date),
 		})
 	}
 }
--- a/src/upload.rs
+++ b/src/upload.rs
@ -253,7 +253,6 @@ pub async fn upload(data: MultipartData) -> Result<(), ServerFnError> {
 		release_date,
 		storage_path: file_name,
 		image_path: None,
-		added_date: None, // Defaults to current date
 	};

 	// Save the song to the database
--- a/style/addAlbum.scss
+++ b/style/addAlbum.scss
@ -1,135 +0,0 @@
-@import "theme.scss";
-
-.add-album-container {
-    position: fixed;
-    top: 45%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 30rem;
-    height: 24rem;
-    border: 1px solid white;
-    border-radius: 5px;
-    padding: 1rem;
-    padding-top: 0;
-    z-index: 2;
-    display: flex;
-    flex-direction: column;
-    background-color: #1c1c1c;
-    z-index: 11;
-    .upload-header {
-        font-size: .7rem;
-        font-weight: 300;
-        padding-bottom: 0;
-        border-bottom: 1px solid white;
-        font-family: "Roboto", sans-serif;
-    }
-    .close-button {
-        position: absolute;
-        top: 5px;
-        right: 5px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
-        border-radius: 50%;
-        font-size: 1.6rem;
-        transition: all 0.3s;
-        border: none;
-
-    }
-    .close-button:hover {
-        transform: scale(1.1);
-    background-color: rgba(255, 255, 255, 0.1);
-    }
-    .close-button:active {
-        transform: scale(0.8);
-    }
-    .create-album-form {
-        width:100%;
-        height: 100%;
-        position: relative;
-        .input-bx{
-            position: relative;
-            margin-top: 1rem;
-            width: 300px;
-            input{
-                width: 100%;
-                padding: 10px;
-                border: 2px solid #7f8fa6;
-                border-radius: 5px;
-                outline: none;
-                font-size: 1rem;
-                transition: 0.6s;
-                background-color: transparent;
-            }
-            span{
-                position: absolute;
-                left: 0;
-                top: 1px;
-                padding: 10px;
-                font-size: 1rem;
-                color: #7f8fa6;
-                text-transform: uppercase;
-                pointer-events: none;
-                transition: 0.6s;
-                background-color: transparent;
-            }
-            input:valid ~ span,
-            input:focus ~ span{
-                color: #fff;
-                transform: translateX(10px) translateY(-7px);
-                font-size: 0.65rem;
-                font-weight: 600;
-                padding: 0 10px;
-                background: #1c1c1c;
-                letter-spacing: 0.1rem;
-            }
-            input:valid,
-            input:focus{
-                color: #fff;
-                border: 2px solid #fff;
-            }
-
-        }
-        .release-date {
-            margin-top: 1rem;
-            font-size: 1.2rem;
-            color: #7f8fa6;
-            font-family: "Roboto", sans-serif;
-            display: flex;
-            align-items: center;
-            .left {
-                display: flex;
-                flex-direction: column;
-                margin-left: 5px;
-                margin-right: 10px;
-            }
-            span {
-                font-size: .85rem;
-            }
-            input {
-                padding: 8px;
-            }
-        }
-        .upload-button {
-            position: absolute;
-            bottom: 5px;
-            margin-top: 1rem;
-            padding: 10px;
-            background-color: #7f8fa6;
-            color: #fff;
-            width: 100%;
-            font-size: 1rem;
-            font-family: "Roboto", sans-serif;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-            transition: 0.3s;
-            &:hover {
-                background-color: #fff;
-                color: #7f8fa6;
-            }
-        }
-    }
-    
-}
--- a/style/addArtist.scss
+++ b/style/addArtist.scss
@ -1,115 +0,0 @@
-@import "theme.scss";
-
-.add-artist-container {
-    position: fixed;
-    top: 45%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 30rem;
-    height: 15rem;
-    border: 1px solid white;
-    border-radius: 5px;
-    padding: 1rem;
-    padding-top: 0;
-    z-index: 2;
-    display: flex;
-    flex-direction: column;
-    background-color: #1c1c1c;
-    z-index: 11;
-    .upload-header {
-        font-size: .7rem;
-        font-weight: 300;
-        padding-bottom: 0;
-        border-bottom: 1px solid white;
-        font-family: "Roboto", sans-serif;
-    }
-    .close-button {
-        position: absolute;
-        top: 5px;
-        right: 5px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
-        border-radius: 50%;
-        font-size: 1.6rem;
-        transition: all 0.3s;
-        border: none;
-
-    }
-    .close-button:hover {
-        transform: scale(1.1);
-    background-color: rgba(255, 255, 255, 0.1);
-    }
-    .close-button:active {
-        transform: scale(0.8);
-    }
-    .create-artist-form {
-        width:100%;
-        height: 100%;
-        position: relative;
-        .input-bx{
-            margin-top: 1rem;
-            width: 300px;
-            position: relative;
-            input{
-                width: 100%;
-                padding: 10px;
-                border: 2px solid #7f8fa6;
-                border-radius: 5px;
-                outline: none;
-                font-size: 1rem;
-                transition: 0.6s;
-                background-color: transparent;
-            }
-            span{
-                position: absolute;
-                left: 0;
-                top: 1px;
-                padding: 10px;
-                font-size: 1rem;
-                color: #7f8fa6;
-                text-transform: uppercase;
-                pointer-events: none;
-                transition: 0.6s;
-                background-color: transparent;
-            }
-            input:valid ~ span,
-            input:focus ~ span{
-                color: #fff;
-                transform: translateX(10px) translateY(-7px);
-                font-size: 0.65rem;
-                font-weight: 600;
-                padding: 0 10px;
-                background: #1c1c1c;
-                letter-spacing: 0.1rem;
-            }
-            input:valid,
-            input:focus{
-                color: #fff;
-                border: 2px solid #fff;
-            }
-
-        }
-        .upload-button {
-            position: absolute;
-            bottom: 5px;
-            margin-top: 1rem;
-            padding: 10px;
-            background-color: #7f8fa6;
-            color: #fff;
-            width: 100%;
-            font-size: 1rem;
-            font-family: "Roboto", sans-serif;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-            transition: 0.3s;
-            &:hover {
-                background-color: #fff;
-                color: #7f8fa6;
-            }
-        }
-    }
-    
-}
--- a/style/friend.scss
+++ b/style/friend.scss
@ -0,0 +1,60 @@
+@import 'theme.scss';
+
+.friend-page-container {
+    width: 100%;
+}
+
+.friend-container {
+	width: 100%;
+	border-collapse: collapse;
+
+    .friend-row {
+        border: solid;
+		border-width: 1px 0;
+		border-color: #303030;
+		position: relative;
+
+        min-width: 100%;
+        height: 50px;
+
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: space-between;
+        align-items: center;
+
+        .friend-info {
+            display: flex;
+            flex-flow: row nowrap;
+        }
+
+        .friend-item {
+            max-width: max-content;
+            margin: 0 20px;
+
+            .friend-image {
+                width: 35px;
+                height: 35px;
+                border-radius: 50%;
+            }
+
+        }
+
+        .friend-created-date {
+            margin-right: 50px;
+        }
+        a {
+            color: $text-controls-color;
+        }
+        a:visited {
+            color: $text-controls-color;
+        }
+        a:hover {
+            color: $controls-hover-color;
+        }
+        
+        a:active {
+            color: $controls-click-color;
+        }
+    }
+
+}
--- a/style/home.scss
+++ b/style/home.scss
@ -6,7 +6,6 @@
  height: 100vh;
  display: flex;
  flex-direction: row;
-  overflow: hidden;
 }
 .home-component {
  background: #1c1c1c;
--- a/style/main.scss
+++ b/style/main.scss
@ -11,13 +11,12 @@
@import 'dashboard_tile.scss';
@import 'dashboard_row.scss';
@import 'upload.scss';
-@import 'addArtist.scss';
-@import 'addAlbum.scss';
@import 'error.scss';
@import 'song_list.scss';
@import 'profile.scss';
@import 'loading.scss';
@import 'album_page.scss';
+@import 'friend.scss';

 body {
  font-family: sans-serif;
--- a/style/sidebar.scss
+++ b/style/sidebar.scss
@ -11,71 +11,35 @@
    margin: 3px;
    padding: 0.1rem 1rem 1rem 1rem;
    position: relative;
-    .upload-overlay {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100vw;
-      height: 100vh;
-      background-color: rgba(0, 0, 0, 0.5);
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      z-index: 10;
-    }
    .header {
      font-size: 1.2rem;
    }
-    .upload-dropdown-container {
+    .upload-btn {
      position: absolute;
      top: 10px;
      right: 7px;
-      .upload-dropdown-btn {
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-        font-size: 0.9rem;
-        border-radius: 50px;
-        border: none;
-        height: 2.2rem;
-        padding-right: 1rem;
-        padding-left: 1rem;
-        cursor: pointer;
-        transition: all 0.3s ease;
-        .add-sign {
-          font-size: 1.5rem;
-          margin-top: auto;
-        }
-      }
-      .upload-dropdown-btn:hover {
-        background-color: #9e9e9e;
-      }
-      .upload-dropdown-btn-active {
-        border-radius: 12.5px 12.5px 0 0;
-        width: 110px;
-      }
-      .upload-dropdown {
-        background-color: #f0ecec;
-        color: black;
-        width: 110px;
-        border-radius: 0 0 5px 5px;
-        .add-btns {
-          border: none;
-          border-bottom: 1px solid black;
-          width: 100%;
-          padding: 0.25rem;
-          cursor: pointer;
-        }
-        .add-btns:first-child {
-          border-top: 1px solid black;
-        }
-        .add-btns:last-child {
-          border-radius: 0 0 5px 5px;
-        }
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      font-size: 0.9rem;
+      border-radius: 50px;
+      border: none;
+      height: 2.2rem;
+      padding-right: 1rem;
+      padding-left: 1rem;
+      cursor: pointer;
+      transition: background-color 0.3s ease;
+      .add-sign {
+        font-size: 1.5rem;
+        margin-top: auto;
+        margin-right: 5px;
+        color: white;
      }
    }
-    
+    .upload-btn:hover {
+      background-color: #9e9e9e;
+    }
    .buttons {
      display: flex;
      flex-direction: row;
--- a/style/upload.scss
+++ b/style/upload.scss
@ -15,7 +15,6 @@
    display: flex;
    flex-direction: column;
    background-color: #1c1c1c;
-    z-index: 11;
    .close-button {
        position: absolute;
        top: 5px;
@ -28,7 +27,9 @@
        font-size: 1.6rem;
        transition: all 0.3s;
        border: none;
+
    }
+
    .close-button:hover {
    transform: scale(1.1);
    background-color: rgba(255, 255, 255, 0.1);
@ -47,9 +48,6 @@
        padding: .1rem;
        display: flex;
        flex-direction: column;
-        width: 100%;
-        height: 100%;
-        position: relative;
        .input-bx{
            margin-top: 1rem;
            position: relative;
@ -128,9 +126,6 @@
            }
        }
        .upload-button {
-            position: absolute;
-            bottom: 5px;
-            width: 100%;
            margin-top: 1rem;
            padding: 10px;
            background-color: #7f8fa6;
Author	SHA1	Message	Date
Aidan Westphal	e53e19cc3e	Friend List Styling Some checks failed Push Workflows / docs (push) Successful in 3m26s Details Push Workflows / build (push) Failing after 4m2s Details Push Workflows / test (push) Successful in 5m44s Details Push Workflows / leptos-test (push) Successful in 7m18s Details Push Workflows / docker-build (push) Failing after 13m56s Details	2024-12-07 02:56:16 +00:00
Aidan Westphal	49cfbff578	Organization and Friend Requests Page	2024-12-07 01:34:12 +00:00
Aidan Westphal	2391016709	API Endpoints for managing friend requests, and a LOT of trait bound debugging... Some checks failed Push Workflows / docs (push) Successful in 3m2s Details Push Workflows / test (push) Successful in 6m14s Details Push Workflows / leptos-test (push) Successful in 8m18s Details Push Workflows / build (push) Successful in 9m3s Details Push Workflows / docker-build (push) Failing after 15m10s Details	2024-12-01 22:56:50 +00:00
Aidan Westphal	0ad9383a08	Friend Page & Components Some checks failed Push Workflows / docs (push) Successful in 3m5s Details Push Workflows / test (push) Successful in 5m1s Details Push Workflows / leptos-test (push) Successful in 7m13s Details Push Workflows / build (push) Successful in 8m8s Details Push Workflows / docker-build (push) Failing after 14m6s Details	2024-11-29 23:37:16 +00:00
Aidan Westphal	aa9001e7d1	UserRow and deliberately structuring API query output	2024-11-29 22:40:50 +00:00
Aidan Westphal	25391863f6	Database Query and API Endpoint for User Friends	2024-11-29 21:08:50 +00:00