fixed state management bug

added position column to playlist_songs table
fixed create_playlist popup
2024-05-12 14:10:05 -07:00 · 2024-05-04 19:43:43 -04:00 · 2024-04-19 11:57:11 -04:00 · 2024-04-19 11:36:54 -04:00 · 2024-04-19 11:04:15 -04:00 · 2024-04-18 19:44:12 -04:00
64 changed files with 1275 additions and 3233 deletions
--- a/.dockerignore
+++ b/.dockerignore
@ -8,4 +8,3 @@
 !/style
 !/Cargo.lock
 !/Cargo.toml
-!/ascii_art.txt
--- a/.env.example
+++ b/.env.example
@ -15,6 +15,3 @@ DATABASE_URL=postgresql://libretunes:password@localhost:5432/libretunes
 # POSTGRES_HOST=localhost
 # POSTGRES_PORT=5432
 # POSTGRES_DB=libretunes
-
-LIBRETUNES_AUDIO_PATH=assets/audio
-LIBRETUNES_IMAGE_PATH=assets/images
--- a/.gitea/workflows/push.yaml
+++ b/.gitea/workflows/push.yaml
@ -1,75 +0,0 @@
-name: Push Workflows
-on: push
-
-jobs:
-  build:
-    runs-on: libretunes-cicd
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-      - name: Build project
-        env:
-          RUSTFLAGS: "-D warnings"
-        run: cargo-leptos build
-
-  docker-build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-      - name: Login to Gitea container registry
-        uses: docker/login-action@v3
-        with:
-          registry: ${{ env.registry }}
-          username: ${{ env.actions_user }}
-          password: ${{ secrets.CONTAINER_REGISTRY_TOKEN }}
-      - name: Get Image Name
-        id: get-image-name
-        run: |
-          echo "IMAGE_NAME=$(echo ${{ env.registry }}/${{ gitea.repository }} | tr '[:upper:]' '[:lower:]')" >> $GITHUB_OUTPUT
-      - name: Build and push Docker image
-        uses: docker/build-push-action@v5
-        with:
-          push: true
-          tags: "${{ steps.get-image-name.outputs.IMAGE_NAME }}:${{ gitea.sha }}"
-          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-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: Test project
-        run: cargo test --all-targets --all-features
-
-  leptos-test:
-    runs-on: libretunes-cicd
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-      - name: Run Leptos tests
-        run: cargo-leptos test
-
-  docs:
-    runs-on: libretunes-cicd
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-      - name: Generate docs
-        run: cargo doc --no-deps
-      - name: Upload docs
-        uses: actions/upload-artifact@v3
-        with:
-          name: docs
-          path: target/doc
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -0,0 +1,101 @@
+# Build the project
+build:
+  needs: []
+  image: $CI_REGISTRY/libretunes/ops/docker-leptos:latest
+  variables:
+    RUSTFLAGS: "-D warnings"
+  script:
+    - cargo-leptos build
+
+.docker:
+  image: docker:latest
+  services:
+    - docker:dind
+  tags:
+    - docker
+  before_script:
+    - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY
+
+# Build the docker image and push it to the registry
+docker-build:
+  needs: ["build"]
+  extends: .docker
+  script:
+    - docker build -t $CI_REGISTRY_IMAGE:$CI_COMMIT_SHORT_SHA .
+      # If running on the default branch, tag as latest
+    - if [ "$CI_COMMIT_BRANCH" == "$CI_DEFAULT_BRANCH" ]; then docker tag
+        $CI_REGISTRY_IMAGE:$CI_COMMIT_SHORT_SHA
+        $CI_REGISTRY_IMAGE:latest; fi
+    - docker push $CI_REGISTRY_IMAGE --all-tags
+
+# Run leptos tests
+leptos-tests:
+  needs: ["build"]
+  image: $CI_REGISTRY/libretunes/ops/docker-leptos:latest
+  script:
+    - cargo-leptos test
+
+# Run all tests
+tests:
+  needs: ["build"]
+  image: $CI_REGISTRY/libretunes/ops/docker-leptos:latest
+  script:
+    - cargo test --all-targets --all-features
+
+# Generate docs
+cargo-doc:
+  needs: []
+  image: rust:slim
+  script:
+    - cargo doc --no-deps
+  artifacts:
+    paths:
+      - target/doc
+
+# Start the review environment
+start-review:
+  extends: .docker
+  rules:
+    - if: $CI_PIPELINE_SOURCE == "merge_request_event"
+      when: manual
+  script:
+    - apk add curl openssl
+    - cd cicd
+    - echo "$CLOUDFLARE_TUNNEL_AUTH_JSON" > tunnel-auth.json
+    - ./add-dns.sh $CLOUDFLARE_ZONE_ID review-$CI_COMMIT_SHORT_SHA libretunes-auto-review $CLOUDFLARE_API_TOKEN $CLOUDFLARE_TUNNEL_ID
+    - ./create-tunnel-config.sh http://libretunes:3000 review-$CI_COMMIT_SHORT_SHA.libretunes.xyz $CLOUDFLARE_TUNNEL_ID
+    - export COMPOSE_PROJECT_NAME=review-$CI_COMMIT_SHORT_SHA
+    - export POSTGRES_PASSWORD=$(openssl rand -hex 16)
+    - export LIBRETUNES_VERSION=$CI_COMMIT_SHORT_SHA
+    - docker compose --file docker-compose-cicd.yml pull
+    - docker compose --file docker-compose-cicd.yml create
+    - export CONFIG_VOL_NAME=review-${CI_COMMIT_SHORT_SHA}_cloudflared-config
+    - export TMP_CONTAINER_NAME=$(docker run --rm -d -v $CONFIG_VOL_NAME:/data busybox sh -c "sleep infinity")
+    - docker cp tunnel-auth.json $TMP_CONTAINER_NAME:/data/auth.json
+    - docker cp cloudflared-tunnel-config.yml $TMP_CONTAINER_NAME:/data/config.yml
+    - docker stop $TMP_CONTAINER_NAME
+    - docker compose --file docker-compose-cicd.yml up -d
+  environment:
+    name: review/$CI_COMMIT_SHORT_SHA
+    url: https://review-$CI_COMMIT_SHORT_SHA.libretunes.xyz
+    on_stop: stop-review
+    auto_stop_in: 1 week
+
+# Stop the review environment
+stop-review:
+  needs: ["start-review"]
+  extends: .docker
+  rules:
+    - if: $CI_PIPELINE_SOURCE == "merge_request_event"
+      when: manual
+  allow_failure: true
+  script:
+    - apk add jq curl
+    - ./cicd/remove-dns.sh $CLOUDFLARE_ZONE_ID review-$CI_COMMIT_SHORT_SHA.libretunes.xyz libretunes-auto-review $CLOUDFLARE_API_TOKEN
+    - export COMPOSE_PROJECT_NAME=review-$CI_COMMIT_SHORT_SHA
+    - export LIBRETUNES_VERSION=$CI_COMMIT_SHORT_SHA
+    - docker compose --file cicd/docker-compose-cicd.yml down
+    - docker compose --file cicd/docker-compose-cicd.yml rm -f -v
+  environment:
+    name: review/$CI_COMMIT_SHORT_SHA
+    action: stop
--- a/Cargo.lock
+++ b/Cargo.lock
--- a/Cargo.toml
+++ b/Cargo.toml
@ -8,49 +8,41 @@ build = "src/build.rs"
 crate-type = ["cdylib", "rlib"]

 [dependencies]
-console_error_panic_hook = { version = "0.1", optional = true }
+console_error_panic_hook = "0.1"
 cfg-if = "1"
-http = { version = "1.0", default-features = false }
-leptos = { version = "0.6", default-features = false, features = ["nightly"] }
+http = "1.0"
+leptos = { version = "0.6", features = ["nightly"] }
 leptos_meta = { version = "0.6", features = ["nightly"] }
 leptos_axum = { version = "0.6", optional = true }
 leptos_router = { version = "0.6", features = ["nightly"] }
-wasm-bindgen = { version = "=0.2.93", default-features = false, optional = true }
+wasm-bindgen = "=0.2.92"
 leptos_icons = { version = "0.3.0" }
 icondata = { version = "0.3.0" }
 dotenv = { version = "0.15.0", optional = true }
-diesel = { version = "2.1.4", features = ["postgres", "r2d2", "time"], default-features = false, optional = true }
+diesel = { version = "2.1.4", features = ["postgres", "r2d2", "time"], optional = true }
 lazy_static = { version = "1.4.0", optional = true }
-serde = { version = "1.0.195", features = ["derive"], default-features = false }
+serde = { versions = "1.0.195", features = ["derive"] }
 openssl = { version = "0.10.63", optional = true }
-time = { version = "0.3.34", features = ["serde"], default-features = false }
+time = { version = "0.3.34", features = ["serde"] }
 diesel_migrations = { version = "2.1.0", optional = true }
 pbkdf2 = { version = "0.12.2", features = ["simple"], optional = true }
+futures = { version = "0.3.30", default-features = false, optional = true }
 tokio = { version = "1", optional = true, features = ["rt-multi-thread"] }
-axum = { version = "0.7.5", features = ["tokio", "http1"], default-features = false, optional = true }
-tower = { version = "0.5.1", optional = true, features = ["util"] }
-tower-http = { version = "0.6.1", optional = true, features = ["fs"] }
+axum = { version = "0.7.5", optional = true }
+tower = { veresion = "0.4.13", optional = true }
+tower-http = { version = "0.5", optional = true, features = ["fs"] }
 thiserror = "1.0.57"
+tower-sessions = { version = "0.11", default-features = false }
 tower-sessions-redis-store = { version = "0.11", optional = true }
-async-trait = { version = "0.1.79", optional = true }
+async-trait = "0.1.79"
 axum-login = { version = "0.14.0", optional = true }
-server_fn = { version = "0.6.11", features = ["multipart"] }
-symphonia = { version = "0.5.4", default-features = false, features = ["mp3"], optional = true }
-multer = { version = "3.0.0", optional = true }
-log = { version = "0.4.21", optional = true }
-flexi_logger = { version = "0.28.0", optional = true, default-features = false }
-web-sys = "0.3.69"
-leptos-use = "0.13.5"
-image-convert = { version = "0.18.0", optional = true, default-features = false }
+
+[patch.crates-io]
+gloo-net = { git = "https://github.com/rustwasm/gloo.git", rev = "a823fab7ecc4068e9a28bd669da5eaf3f0a56380" }

 [features]
-hydrate = [
-  "leptos/hydrate",
-  "leptos_meta/hydrate",
-  "leptos_router/hydrate",
-  "console_error_panic_hook",
-  "wasm-bindgen",
-]
+csr = ["leptos/csr", "leptos_meta/csr", "leptos_router/csr"]
+hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]
 ssr = [
  "dep:leptos_axum",
  "leptos/ssr",
@ -62,19 +54,13 @@ ssr = [
  "openssl",
  "diesel_migrations",
  "pbkdf2",
+  "futures",
  "tokio",
  "axum",
  "tower",
  "tower-http",
  "tower-sessions-redis-store",
-  "async-trait",
  "axum-login",
-  "symphonia",
-  "multer",
-  "log",
-  "flexi_logger",
-  "leptos-use/ssr",
-  "image-convert",
 ]

 # Defines a size-optimized profile for the WASM bundle in release mode
--- a/46
+++ b/46
@ -1,37 +1,22 @@
-FROM rust:slim as builder
+FROM registry.mregirouard.com/libretunes/ops/docker-leptos/musl:latest as builder

 WORKDIR /app

-RUN rustup default nightly
-RUN rustup target add wasm32-unknown-unknown
-RUN cargo install cargo-leptos
-
 # Install a few dependencies
 RUN set -eux; \
    apt-get update; \
    apt-get install -y --no-install-recommends \
-		pkg-config \
-		clang \
-		build-essential \
-		libssl-dev \
-		libpq-dev \
-		wget; \
+		npm; \
 	rm -rf /var/lib/apt/lists/*

-# Install ImageMagick
-RUN cd / && \
-	wget https://github.com/ImageMagick/ImageMagick/archive/refs/tags/7.1.1-38.tar.gz && \
-	tar xf 7.1.1-38.tar.gz && \
-	rm 7.1.1-38.tar.gz && \
-	cd ImageMagick-7.1.1-38 && \
-	./configure && \
-	make install -j $(nproc) && \
-	cd .. && \
-	rm -rf ImageMagick-7.1.1-38
+RUN npm install tailwindcss@3.1.8 -g

 # Copy project dependency manifests
 COPY Cargo.toml Cargo.lock /app/

+# Add the target to Cargo.toml so we can statically link:
+RUN echo 'bin-target-triple = "x86_64-unknown-linux-musl"' >> Cargo.toml
+
 # Create dummy files to force cargo to build the dependencies
 RUN mkdir /app/src && mkdir /app/style && mkdir /app/assets && \
 		echo "fn main() {}" | tee /app/src/build.rs > /app/src/main.rs && \
@ -42,12 +27,14 @@ RUN mkdir /app/src && mkdir /app/style && mkdir /app/assets && \
 RUN cargo-leptos build --release --precompress

 RUN rm -rf /app/src /app/style /app/assets
+COPY style /app/style
+
+# Minify CSS
+RUN npx tailwindcss -i /app/style/main.scss -o /app/style/main.scss --minify

-COPY ascii_art.txt /app/ascii_art.txt
 COPY assets /app/assets
 COPY src /app/src
 COPY migrations /app/migrations
-COPY style /app/style

 # Touch files to force rebuild
 RUN touch /app/src/main.rs && touch /app/src/lib.rs && touch /app/src/build.rs
@ -55,11 +42,6 @@ RUN touch /app/src/main.rs && touch /app/src/lib.rs && touch /app/src/build.rs
 # Actually build the binary
 RUN cargo-leptos build --release --precompress

-# Use ldd to list all dependencies of /app/target/release/libretunes, then copy them to /app/libs
-# Setting LD_LIBRARY_PATH is necessary to find the ImageMagick libraries
-RUN mkdir /app/libs && LD_LIBRARY_PATH=/usr/local/lib ldd /app/target/release/libretunes | grep "=> /" | \
-	awk '{print $3}' | xargs -I '{}' cp '{}' /app/libs
-
 # Build the final image
 FROM scratch

@ -68,15 +50,9 @@ LABEL description="LibreTunes, an open-source browser audio player and \
 library manager built for collaborative listening."

 # Copy the binary and the compressed assets to the "site root"
-COPY --from=builder /app/target/release/libretunes /libretunes
+COPY --from=builder /app/target/x86_64-unknown-linux-musl/release/libretunes /libretunes
 COPY --from=builder /app/target/site /site

-# Copy libraries to /lib64
-COPY --from=builder /app/libs /lib64
-COPY --from=builder /lib/x86_64-linux-gnu/ld-linux-x86-64.so.2 /lib64/ld-linux-x86-64.so.2
-
-ENV LD_LIBRARY_PATH=/lib64
-
 # Configure Leptos settings
 ENV LEPTOS_SITE_ADDR=0.0.0.0:3000
 ENV LEPTOS_SITE_ROOT=/site
--- a/ascii_art.txt
+++ b/ascii_art.txt
@ -1,10 +0,0 @@
-                                                         .-=.  =+==-.    
-                                                       .=++++. =+++++=.  
-  _      _ _           _______                        =++++++= :*++++++= 
- | |    (_) |         |__   __|                      -++++**+.  -+**++++-
- | |     _| |__  _ __ ___| |_   _ _ __   ___  ___    *+++**+      +**+++*
- | |    | | '_ \| '__/ _ \ | | | | '_ \ / _ \/ __|   *+++**+      +**+++*
- | |____| | |_) | | |  __/ | |_| | | | |  __/\__ \   -++++**+-:  +**++++-
- |______|_|_.__/|_|  \___|_|\__,_|_| |_|\___||___/    =++++++**+ -+++++= 
-                                                       .=+++++++=.+++=.  
-                                                         .-==++++---.    
--- a/assets/images/placeholders/MusicPlaceholder.svg
+++ b/assets/images/placeholders/MusicPlaceholder.svg
@ -1 +0,0 @@
-<svg version="1.1" viewBox="0.0 0.0 960.0 960.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><clipPath id="p.0"><path d="m0 0l960.0 0l0 960.0l-960.0 0l0 -960.0z" clip-rule="nonzero"/></clipPath><g clip-path="url(#p.0)"><path fill="#4032a8" d="m0 0l960.0 0l0 960.0l-960.0 0z" fill-rule="evenodd"/><path fill="#ffffff" d="m290.11365 265.52475l35.496063 0l0 471.3386l-35.496063 0z" fill-rule="evenodd"/><path fill="#ffffff" d="m115.68951 737.6639l0 0c0 -36.946594 46.99247 -66.897644 104.960625 -66.897644l0 0c57.968155 0 104.96065 29.95105 104.96065 66.897644l0 0c0 36.946533 -46.992493 66.897644 -104.96065 66.897644l0 0c-57.968155 0 -104.960625 -29.95111 -104.960625 -66.897644z" fill-rule="evenodd"/><path fill="#ffffff" d="m723.79346 175.86597l35.496033 0l0 471.33856l-35.496033 0z" fill-rule="evenodd"/><path fill="#ffffff" d="m549.3693 648.00507l0 0c0 -36.946533 46.99243 -66.897644 104.96063 -66.897644l0 0c57.96814 0 104.96057 29.95111 104.96057 66.897644l0 0c0 36.946533 -46.99243 66.897644 -104.96057 66.897644l0 0c-57.9682 0 -104.96063 -29.95111 -104.96063 -66.897644z" fill-rule="evenodd"/><path fill="#ffffff" d="m759.2711 155.4385l-0.01727295 94.79588l-427.05206 100.14052l-42.09601 -84.920654z" fill-rule="evenodd"/><path fill="#ffffff" d="m421.49164 234.64502l21.039368 89.85828l-131.40158 30.803131l-21.039368 -89.85828z" fill-rule="evenodd"/></g></svg>
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -13,11 +13,8 @@ services:
      POSTGRES_USER: ${POSTGRES_USER}
      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
      POSTGRES_DB: ${POSTGRES_DB}
-      LIBRETUNES_AUDIO_PATH: /assets/audio
-      LIBRETUNES_IMAGE_PATH: /assets/images
    volumes:
-      - libretunes-audio:/assets/audio
-      - libretunes-images:/assets/images
+      - libretunes-audio:/site/audio
    depends_on:
      - redis
      - postgres
@ -53,6 +50,5 @@ services:

 volumes:
  libretunes-audio:
-  libretunes-images:
  libretunes-redis:
  libretunes-postgres:
--- a/migrations/2024-04-13-024749_create_playlists_table/down.sql
+++ b/migrations/2024-04-13-024749_create_playlists_table/down.sql
@ -0,0 +1,2 @@
+-- This file should undo anything in `up.sql`
+DROP TABLE playlists;
--- a/migrations/2024-04-13-024749_create_playlists_table/up.sql
+++ b/migrations/2024-04-13-024749_create_playlists_table/up.sql
@ -0,0 +1,13 @@
+-- Your SQL goes here
+CREATE TABLE playlists (
+    id SERIAL PRIMARY KEY UNIQUE NOT NULL,
+    name VARCHAR NOT NULL,
+    user_id INTEGER REFERENCES users(id) ON DELETE CASCADE NOT NULL
+);
+
+CREATE TABLE playlist_songs (
+    playlist_id INTEGER REFERENCES playlists(id) ON DELETE CASCADE NOT NULL,
+    song_id INTEGER REFERENCES songs(id) ON DELETE CASCADE NOT NULL,
+    position INTEGER NOT NULL,
+    PRIMARY KEY (playlist_id, song_id)
+);
--- a/migrations/2024-05-10-195644_create_likes_dislikes_table/down.sql
+++ b/migrations/2024-05-10-195644_create_likes_dislikes_table/down.sql
@ -1,2 +0,0 @@
-DROP TABLE song_likes;
-DROP TABLE song_dislikes;
--- a/migrations/2024-05-10-195644_create_likes_dislikes_table/up.sql
+++ b/migrations/2024-05-10-195644_create_likes_dislikes_table/up.sql
@ -1,11 +0,0 @@
-CREATE TABLE song_likes (
-	song_id INTEGER REFERENCES songs(id) ON DELETE CASCADE NOT NULL,
-	user_id INTEGER REFERENCES users(id) ON DELETE CASCADE NOT NULL,
-	PRIMARY KEY (song_id, user_id)
-);
-
-CREATE TABLE song_dislikes (
-	song_id INTEGER REFERENCES songs(id) ON DELETE CASCADE NOT NULL,
-	user_id INTEGER REFERENCES users(id) ON DELETE CASCADE NOT NULL,
-	PRIMARY KEY (song_id, user_id)
-);
--- a/migrations/2024-05-16-220659_add_album_images/down.sql
+++ b/migrations/2024-05-16-220659_add_album_images/down.sql
@ -1 +0,0 @@
-ALTER TABLE albums DROP COLUMN image_path;
--- a/migrations/2024-05-16-220659_add_album_images/up.sql
+++ b/migrations/2024-05-16-220659_add_album_images/up.sql
@ -1 +0,0 @@
-ALTER TABLE albums ADD COLUMN image_path VARCHAR;
--- a/migrations/2024-05-18-231505_add_user_admin/down.sql
+++ b/migrations/2024-05-18-231505_add_user_admin/down.sql
@ -1 +0,0 @@
-ALTER TABLE users DROP COLUMN admin;
--- a/migrations/2024-05-18-231505_add_user_admin/up.sql
+++ b/migrations/2024-05-18-231505_add_user_admin/up.sql
@ -1 +0,0 @@
-ALTER TABLE users ADD COLUMN admin BOOLEAN DEFAULT FALSE NOT NULL;
--- a/migrations/2024-05-19-163229_add_song_history/down.sql
+++ b/migrations/2024-05-19-163229_add_song_history/down.sql
@ -1,2 +0,0 @@
-DROP INDEX song_history_user_id_idx;
-DROP TABLE song_history;
--- a/migrations/2024-05-19-163229_add_song_history/up.sql
+++ b/migrations/2024-05-19-163229_add_song_history/up.sql
@ -1,8 +0,0 @@
-CREATE TABLE song_history (
-	id SERIAL PRIMARY KEY UNIQUE NOT NULL,
-	user_id INTEGER REFERENCES users(id) ON DELETE CASCADE NOT NULL,
-	date TIMESTAMP NOT NULL DEFAULT NOW(),
-	song_id INTEGER REFERENCES songs(id) ON DELETE CASCADE NOT NULL
-);
-
-CREATE INDEX song_history_user_id_idx ON song_history(user_id);
--- a/migrations/2024-05-20-154208_add_friends/down.sql
+++ b/migrations/2024-05-20-154208_add_friends/down.sql
@ -1,7 +0,0 @@
-DROP INDEX friendships_friend_2_idx;
-DROP INDEX friendships_friend_1_idx;
-DROP TABLE friendships;
-
-DROP INDEX incoming_friend_requests_idx;
-DROP INDEX outgoing_friend_requests_idx;
-DROP TABLE friend_requests;
--- a/migrations/2024-05-20-154208_add_friends/up.sql
+++ b/migrations/2024-05-20-154208_add_friends/up.sql
@ -1,19 +0,0 @@
-CREATE TABLE friend_requests (
-	created_at TIMESTAMP NOT NULL DEFAULT NOW(),
-	from_id INTEGER REFERENCES users(id) ON DELETE CASCADE NOT NULL,
-	to_id INTEGER REFERENCES users(id) ON DELETE CASCADE NOT NULL,
-	PRIMARY KEY (from_id, to_id)
-);
-
-CREATE INDEX outgoing_friend_requests_idx ON friend_requests(from_id);
-CREATE INDEX incoming_friend_requests_idx ON friend_requests(to_id);
-
-CREATE TABLE friendships (
-	created_at TIMESTAMP NOT NULL DEFAULT NOW(),
-	friend_1_id INTEGER REFERENCES users(id) ON DELETE CASCADE NOT NULL,
-	friend_2_id INTEGER REFERENCES users(id) ON DELETE CASCADE NOT NULL,
-	PRIMARY KEY (friend_1_id, friend_2_id)
-);
-
-CREATE INDEX friendships_friend_1_idx ON friendships(friend_1_id);
-CREATE INDEX friendships_friend_2_idx ON friendships(friend_2_id);
--- a/src/albumdata.rs
+++ b/src/albumdata.rs
@ -1,39 +0,0 @@
-use crate::models::Artist;
-use crate::components::dashboard_tile::DashboardTile;
-
-use time::Date;
-
-/// Holds information about an album
-/// 
-/// Intended to be used in the front-end
-pub struct AlbumData {
-	/// Album id
-	pub id: i32,
-	/// Album title
-	pub title: String,
-	/// Album artists
-	pub artists: Vec<Artist>,
-	/// Album release date
-	pub release_date: Option<Date>,
-	/// Path to album image, relative to the root of the web server.
-	/// For example, `"/assets/images/Album.jpg"`
-	pub image_path: String,
-}
-
-impl DashboardTile for AlbumData {
-	fn image_path(&self) -> String {
-		self.image_path.clone()
-	}
-
-	fn title(&self) -> String {
-		self.title.clone()
-	}
-
-	fn link(&self) -> String {
-		format!("/album/{}", self.id)
-	}
-
-	fn description(&self) -> Option<String> {
-		Some(format!("Album • {}", Artist::display_list(&self.artists)))
-	}
-}
--- a/src/api/history.rs
+++ b/src/api/history.rs
@ -1,44 +0,0 @@
-use std::time::SystemTime;
-use leptos::*;
-use crate::models::HistoryEntry;
-use crate::models::Song;
-
-use cfg_if::cfg_if;
-
-cfg_if! {
-	if #[cfg(feature = "ssr")] {
-		use leptos::server_fn::error::NoCustomError;
-		use crate::database::get_db_conn;
-		use crate::auth::get_user;
-	}
-}
-
-/// Get the history of the current user.
-#[server(endpoint = "history/get")]
-pub async fn get_history(limit: Option<i64>) -> Result<Vec<HistoryEntry>, ServerFnError> {
-	let user = get_user().await?;
-	let db_con = &mut get_db_conn();
-	let history = user.get_history(limit, db_con)
-		.map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error getting history: {}", e)))?;
-	Ok(history)
-}
-
-/// Get the listen dates and songs of the current user.
-#[server(endpoint = "history/get_songs")]
-pub async fn get_history_songs(limit: Option<i64>) -> Result<Vec<(SystemTime, Song)>, ServerFnError> {
-	let user = get_user().await?;
-	let db_con = &mut get_db_conn();
-	let songs = user.get_history_songs(limit, db_con)
-		.map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error getting history songs: {}", e)))?;
-	Ok(songs)
-}
-
-/// Add a song to the history of the current user.
-#[server(endpoint = "history/add")]
-pub async fn add_history(song_id: i32) -> Result<(), ServerFnError> {
-	let user = get_user().await?;
-	let db_con = &mut get_db_conn();
-	user.add_history(song_id, db_con)
-		.map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error adding history: {}", e)))?;
-	Ok(())
-}
--- a/src/api/mod.rs
+++ b/src/api/mod.rs
@ -1,3 +1,2 @@
-pub mod history;
-pub mod profile;
+pub mod playlists;
 pub mod songs;
--- a/src/api/playlists.rs
+++ b/src/api/playlists.rs
@ -0,0 +1,157 @@
+use leptos::*;
+use crate::models::Playlist;
+
+use cfg_if::cfg_if;
+
+cfg_if! {
+    if #[cfg(feature = "ssr")] {
+        use crate::database::get_db_conn;
+        use diesel::prelude::*;
+        use leptos_axum::extract;
+        use axum_login::AuthSession;
+        use crate::auth_backend::AuthBackend;
+    }
+}
+/// Create a new, empty playlist in the database
+/// 
+/// # Arguments
+/// 
+/// * `new_playlist` - The new playlist
+/// * `conn` - A mutable reference to a database connection
+/// 	
+/// # Returns
+/// 
+/// * `Result<(), Box<dyn Error>>` - A empty result if successful, or an error
+/// 
+#[server(endpoint = "playlists/create-playlist")]
+pub async fn create_playlist(playlist_name: String)->Result<(), ServerFnError> {
+    use crate::schema::playlists::dsl::*;
+    use leptos::server_fn::error::NoCustomError;
+
+    let auth_session = extract::<AuthSession<AuthBackend>>().await
+		.map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error getting auth session: {}", e)))?;
+
+    //Ensure the playlist has no id
+    let new_playlist = Playlist {
+        id: None,
+        name: playlist_name,
+        user_id: auth_session.user.unwrap().id.expect("User has no id"),
+    };
+
+    let db_con = &mut get_db_conn();
+    diesel::insert_into(playlists)
+        .values(&new_playlist)
+        .execute(db_con)
+        .map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error creating playlist: {}", e)))?;
+
+    Ok(())
+}
+
+/// Get all playlists for the current user
+/// 
+/// # Returns
+/// 
+/// * `Result<Vec<Playlist>, ServerFnError>` - A vector of playlists if successful, or an error
+/// 
+#[server(endpoint = "playlists/get-playlists")]
+pub async fn get_playlists() -> Result<Vec<Playlist>, ServerFnError> {
+    use crate::schema::playlists::dsl::*;
+    use leptos::server_fn::error::NoCustomError;
+
+    let auth_session = extract::<AuthSession<AuthBackend>>().await
+		.map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error getting auth session: {}", e)))?;
+
+    let other_user_id = auth_session.user.unwrap().id.expect("User has no id");
+
+    let db_con = &mut get_db_conn();
+    let results = playlists
+        .filter(user_id.eq(other_user_id))
+        .load::<Playlist>(db_con)
+        .map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error getting playlists: {}", e)))?;
+
+    Ok(results)
+}
+/// Add a song to a playlist
+/// 
+/// # Arguments
+/// 
+/// * `playlist_id` - The id of the playlist
+/// * `song_id` - The id of the song
+/// 
+/// # Returns
+/// 
+/// * `Result<(), ServerFnError>` - An empty result if successful, or an error
+/// 
+#[server(endpoint = "playlists/add-song")]
+pub async fn add_song(new_playlist_id: Option<i32>, new_song_id: Option<i32>) -> Result<(), ServerFnError> {
+    use crate::schema::playlist_songs::dsl::*;
+    use leptos::server_fn::error::NoCustomError;
+
+    let other_playlist_id = new_playlist_id.ok_or(ServerFnError::<NoCustomError>::ServerError("Playlist id must be present (Some) to add song".to_string()))?;
+
+    let other_song_id = new_song_id.ok_or(ServerFnError::<NoCustomError>::ServerError("Song id must be present (Some) to add song".to_string()))?;
+
+    let db_con = &mut get_db_conn();
+    diesel::insert_into(playlist_songs)
+        .values((playlist_id.eq(other_playlist_id), song_id.eq(other_song_id)))
+        .execute(db_con)
+        .map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error adding song to playlist: {}", e)))?;
+
+    Ok(())
+}
+/// Get songs from a playlist
+/// 
+/// # Arguments
+/// 
+/// * `playlist_id` - The id of the playlist
+/// 
+/// # Returns
+/// 
+/// * `Result<Vec<Song>, ServerFnError>` - A vector of songs if successful, or an error
+/// 
+#[server(endpoint = "playlists/get-songs")]
+pub async fn get_songs(new_playlist_id: Option<i32>) -> Result<Vec<crate::models::Song>, ServerFnError> {
+    use crate::schema::playlist_songs::dsl::*;
+    use crate::schema::songs::dsl::*;
+    use leptos::server_fn::error::NoCustomError;
+
+    let other_playlist_id = new_playlist_id.ok_or(ServerFnError::<NoCustomError>::ServerError("Playlist id must be present (Some) to get songs".to_string()))?;
+
+    let db_con = &mut get_db_conn();
+    let results = playlist_songs
+        .inner_join(songs)
+        .filter(playlist_id.eq(other_playlist_id))
+        .select(songs::all_columns())
+        .order_by(position)
+        .load(db_con)
+        .map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error getting songs from playlist: {}", e)))?;
+
+    Ok(results)
+}
+/// Remove a song from a playlist
+/// 
+/// # Arguments
+/// 
+/// * `playlist_id` - The id of the playlist
+/// * `song_id` - The id of the song
+/// 
+/// # Returns
+///    
+/// * `Result<(), ServerFnError>` - An empty result if successful, or an error
+///
+#[server(endpoint = "playlists/remove-song")]
+pub async fn remove_song(new_playlist_id: Option<i32>, new_song_id: Option<i32>) -> Result<(), ServerFnError> {
+    use crate::schema::playlist_songs::dsl::*;
+    use leptos::server_fn::error::NoCustomError;
+
+    let other_playlist_id = new_playlist_id.ok_or(ServerFnError::<NoCustomError>::ServerError("Playlist id must be present (Some) to remove song".to_string()))?;
+
+    let other_song_id = new_song_id.ok_or(ServerFnError::<NoCustomError>::ServerError("Song id must be present (Some) to remove song".to_string()))?;
+
+    let db_con = &mut get_db_conn();
+    diesel::delete(playlist_songs.filter(playlist_id.eq(other_playlist_id).and(song_id.eq(other_song_id))))
+        .execute(db_con)
+        .map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error removing song from playlist: {}", e)))?;
+
+    Ok(())
+} 
--- a/src/api/profile.rs
+++ b/src/api/profile.rs
@ -1,49 +0,0 @@
-use leptos::*;
-use server_fn::codec::{MultipartData, MultipartFormData};
-
-use cfg_if::cfg_if;
-
-cfg_if! {
-	if #[cfg(feature = "ssr")] {
-		use crate::auth::get_user;
-		use server_fn::error::NoCustomError;
-	}
-}
-
-/// Handle a user uploading a profile picture. Converts the image to webp and saves it to the server.
-#[server(input = MultipartFormData, endpoint = "/profile/upload_picture")]
-pub async fn upload_picture(data: MultipartData) -> Result<(), ServerFnError> {
-	// Safe to unwrap - "On the server side, this always returns Some(_). On the client side, always returns None."
-	let mut data = data.into_inner().unwrap();
-
-	let field = data.next_field().await
-		.map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error getting field: {}", e)))?
-		.ok_or_else(|| ServerFnError::<NoCustomError>::ServerError("No field found".to_string()))?;
-
-	if field.name() != Some("picture") {
-		return Err(ServerFnError::ServerError("Field name is not 'picture'".to_string()));
-	}
-
-	// Get user id from session
-	let user = get_user().await
-		.map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error getting user: {}", e)))?;
-
-	let user_id = user.id.ok_or_else(|| ServerFnError::<NoCustomError>::ServerError("User has no id".to_string()))?;
-
-	// Read the image, and convert it to webp
-	use image_convert::{to_webp, WEBPConfig, ImageResource};
-
-	let bytes = field.bytes().await
-		.map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error getting field bytes: {}", e)))?;
-
-	let reader = std::io::Cursor::new(bytes);
-	let image_source = ImageResource::from_reader(reader)
-		.map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error creating image resource: {}", e)))?;
-
-	let profile_picture_path = format!("assets/images/profile/{}.webp", user_id);
-	let mut image_target = ImageResource::from_path(&profile_picture_path);
-	to_webp(&mut image_target, &image_source, &WEBPConfig::new())
-		.map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error converting image to webp: {}", e)))?;
-
-	Ok(())
-}
--- a/src/api/songs.rs
+++ b/src/api/songs.rs
@ -1,55 +1,37 @@
 use leptos::*;
+use crate::models::Artist;
+

 use cfg_if::cfg_if;

-
 cfg_if! {
-	if #[cfg(feature = "ssr")] {
-		use leptos::server_fn::error::NoCustomError;
+if #[cfg(feature = "ssr")] {
 	use crate::database::get_db_conn;
-		use crate::auth::get_user;
-	}
+	use diesel::prelude::*;
+}
 }

-/// Like or unlike a song
-#[server(endpoint = "songs/set_like")]
-pub async fn set_like_song(song_id: i32, like: bool) -> Result<(), ServerFnError> {
-	let user = get_user().await.map_err(|e| ServerFnError::<NoCustomError>::
-		ServerError(format!("Error getting user: {}", e)))?;
+/// Gets a Vector of Artists associated with a Song
+/// 
+/// # Arguments
+/// `song_id_arg` - The id of the Song to get the Artists for
+/// 
+/// # Returns
+/// A Result containing a Vector of Artists if the operation was successful, or an error if the operation failed
+#[server(endpoint = "songs/get-artists")]
+pub async fn get_artists(song_id_arg: Option<i32>) -> Result<Vec<Artist>, ServerFnError> {
+	use crate::schema::artists::dsl::*;
+	use crate::schema::song_artists::dsl::*;
+    use leptos::server_fn::error::NoCustomError;

-	let db_con = &mut get_db_conn();
+	let other_song_id = song_id_arg.ok_or(ServerFnError::<NoCustomError>::ServerError("Song id must be present (Some) to get artists".to_string()))?;

-	user.set_like_song(song_id, like, db_con).await.map_err(|e| ServerFnError::<NoCustomError>::
-		ServerError(format!("Error liking song: {}", e)))
+	let my_artists = artists
+		.inner_join(song_artists)
+		.filter(song_id.eq(other_song_id))
+		.select(artists::all_columns())
+		.load(&mut get_db_conn())?;
+
+	Ok(my_artists)
 }

-/// Dislike or remove dislike from a song
-#[server(endpoint = "songs/set_dislike")]
-pub async fn set_dislike_song(song_id: i32, dislike: bool) -> Result<(), ServerFnError> {
-	let user = get_user().await.map_err(|e| ServerFnError::<NoCustomError>::
-		ServerError(format!("Error getting user: {}", e)))?;
-	
-	let db_con = &mut get_db_conn();
-
-	user.set_dislike_song(song_id, dislike, db_con).await.map_err(|e| ServerFnError::<NoCustomError>::
-		ServerError(format!("Error disliking song: {}", e)))
-}
-
-/// Get the like and dislike status of a song
-#[server(endpoint = "songs/get_like_dislike")]
-pub async fn get_like_dislike_song(song_id: i32) -> Result<(bool, bool), ServerFnError> {
-	let user = get_user().await.map_err(|e| ServerFnError::<NoCustomError>::
-		ServerError(format!("Error getting user: {}", e)))?;
-
-	let db_con = &mut get_db_conn();
-
-	// TODO this could probably be done more efficiently with a tokio::try_join, but 
-	// doing so is much more complicated than it would initially seem
-
-	let like = user.get_like_song(song_id, db_con).await.map_err(|e| ServerFnError::<NoCustomError>::
-		ServerError(format!("Error getting song liked: {}", e)))?;
-	let dislike = user.get_dislike_song(song_id, db_con).await.map_err(|e| ServerFnError::<NoCustomError>::
-		ServerError(format!("Error getting song disliked: {}", e)))?;
-
-	Ok((like, dislike))
-}
--- a/src/app.rs
+++ b/src/app.rs
@ -1,31 +1,26 @@
+use crate::error_template::{AppError, ErrorTemplate};
+use crate::pages::login::*;
+use crate::pages::signup::*;
 use crate::playbar::PlayBar;
-use crate::playbar::CustomTitle;
 use crate::playstatus::PlayStatus;
 use crate::queue::Queue;
 use leptos::*;
 use leptos_meta::*;
 use leptos_router::*;
-use crate::pages::login::*;
-use crate::pages::signup::*;
-use crate::error_template::{AppError, ErrorTemplate};
-
+use leptos::leptos_dom::*;

 #[component]
 pub fn App() -> impl IntoView {
    // Provides context that manages stylesheets, titles, meta tags, etc.
    provide_meta_context();

-    let play_status = PlayStatus::default();
-    let play_status = create_rw_signal(play_status);
-    let upload_open = create_rw_signal(false);
-
    view! {
        // injects a stylesheet into the document <head>
        // id=leptos means cargo-leptos will hot-reload this stylesheet
        <Stylesheet id="leptos" href="/pkg/libretunes.css"/>

        // sets the document title
-        <CustomTitle play_status=play_status/>
+        <Title text="LibreTunes"/>

        // content for this welcome page
        <Router fallback=|| {
@ -38,11 +33,7 @@ pub fn App() -> impl IntoView {
        }>
            <main>
                <Routes>
-                    <Route path="" view=move || view! { <HomePage play_status=play_status upload_open=upload_open/> }>
-                        <Route path="" view=Dashboard />
-                        <Route path="dashboard" view=Dashboard />
-                        <Route path="search" view=Search />
-                    </Route>
+                    <Route path="" view=HomePage/>
                    <Route path="/login" view=Login />
                    <Route path="/signup" view=Signup />
                </Routes>
@ -51,22 +42,49 @@ pub fn App() -> impl IntoView {
    }
 }

-use crate::components::sidebar::*;
 use crate::components::dashboard::*;
-use crate::components::search::*;
 use crate::components::personal::*;
-use crate::components::upload::*;
+use crate::components::search::*;
+use crate::components::sidebar::*;

 /// Renders the home page of your application.
 #[component]
-fn HomePage(play_status: RwSignal<PlayStatus>, upload_open: RwSignal<bool>) -> impl IntoView {
+fn HomePage() -> impl IntoView {
+    use crate::auth::check_auth;
+
+    let play_status = PlayStatus::default();
+    let play_status = create_rw_signal(play_status);
+
+    let (logged_in, set_logged_in) = create_signal(false);
+
+    let (dashboard_open, set_dashboard_open) = create_signal(true);
+
+    create_effect(move |_| {
+        spawn_local(async move {
+            let auth_result = check_auth().await;
+            if let Err(err) = auth_result {
+                log!("Error checking auth: {:?}", err);
+            } else if let Ok(true) = auth_result {
+                log!("User is logged in");
+                set_logged_in.update(|value| *value = true);
+            } else if let Ok(false) = auth_result {
+                log!("User is not logged in");
+                set_logged_in.update(|value| *value = false);
+            }
+            
+        });
+    });
+
    view! {
        <div class="home-container">
-            <Upload open=upload_open/>
-            <Sidebar upload_open=upload_open/>
-            // This <Outlet /> will render the child route components
-            <Outlet />
-            <Personal />
+            <Sidebar setter=set_dashboard_open active=dashboard_open logged_in=logged_in/>
+            <Show
+                when=move || {dashboard_open() == true}
+                fallback=move || view! { <Search /> }
+            >
+                <Dashboard />
+            </Show>
+            <Personal logged_in=logged_in/>
            <PlayBar status=play_status/>
            <Queue status=play_status/>
        </div>
--- a/src/artistdata.rs
+++ b/src/artistdata.rs
@ -1,32 +0,0 @@
-use crate::components::dashboard_tile::DashboardTile;
-
-/// Holds information about an artist
-/// 
-/// Intended to be used in the front-end
-pub struct ArtistData {
-	/// Artist id
-	pub id: i32,
-	/// Artist name
-	pub name: String,
-	/// Path to artist image, relative to the root of the web server.
-	/// For example, `"/assets/images/Artist.jpg"`
-	pub image_path: String,
-}
-
-impl DashboardTile for ArtistData {
-	fn image_path(&self) -> String {
-		self.image_path.clone()
-	}
-
-	fn title(&self) -> String {
-		self.name.clone()
-	}
-
-	fn link(&self) -> String {
-		format!("/artist/{}", self.id)
-	}
-
-	fn description(&self) -> Option<String> {
-		Some("Artist".to_string())
-	}
-}
--- a/src/auth.rs
+++ b/src/auth.rs
@ -21,10 +21,9 @@ use crate::users::UserCredentials;
 pub async fn signup(new_user: User) -> Result<(), ServerFnError> {
 	use crate::users::create_user;

-	// Ensure the user has no id, and is not a self-proclaimed admin
+	// Ensure the user has no id
 	let new_user = User {
 		id: None,
-		admin: false,
 		..new_user
 	};

@ -121,60 +120,3 @@ pub async fn require_auth() -> Result<(), ServerFnError> {
 		}
 	})
 }
-
-/// Get the current logged-in user
-/// Returns a Result with the user if they are logged in
-/// Returns an error if the user is not logged in, or if there is an error getting the user
-/// Intended to be used in a route to get the current user:
-/// ```rust
-/// use leptos::*;
-/// use libretunes::auth::get_user;
-/// #[server(endpoint = "user_route")]
-/// pub async fn user_route() -> Result<(), ServerFnError> {
-/// 	let user = get_user().await?;
-/// 	println!("Logged in as: {}", user.username);
-/// 	// Do something with the user
-/// 	Ok(())
-/// }
-/// ```
-#[cfg(feature = "ssr")]
-pub async fn get_user() -> Result<User, ServerFnError> {
-	let auth_session = extract::<AuthSession<AuthBackend>>().await
-		.map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error getting auth session: {}", e)))?;
-
-	auth_session.user.ok_or(ServerFnError::<NoCustomError>::ServerError("User not logged in".to_string()))
-}
-
-/// Check if a user is an admin
-/// Returns a Result with a boolean indicating if the user is logged in and an admin
-#[server(endpoint = "check_admin")]
-pub async fn check_admin() -> Result<bool, ServerFnError> {
-	let auth_session = extract::<AuthSession<AuthBackend>>().await
-		.map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error getting auth session: {}", e)))?;
-
-	Ok(auth_session.user.as_ref().map(|u| u.admin).unwrap_or(false))
-}
-
-/// Require that a user is logged in and an admin
-/// Returns a Result with the error message if the user is not logged in or is not an admin
-/// Intended to be used at the start of a protected route, to ensure the user is logged in and an admin:
-/// ```rust
-/// use leptos::*;
-/// use libretunes::auth::require_admin;
-/// #[server(endpoint = "protected_admin_route")]
-/// pub async fn protected_admin_route() -> Result<(), ServerFnError> {
-/// 	require_admin().await?;
-/// 	// Continue with protected route
-/// 	Ok(())
-/// }
-/// ```
-#[cfg(feature = "ssr")]
-pub async fn require_admin() -> Result<(), ServerFnError> {
-	check_admin().await.and_then(|is_admin| {
-		if is_admin {
-			Ok(())
-		} else {
-			Err(ServerFnError::<NoCustomError>::ServerError(format!("Unauthorized")))
-		}
-	})
-}
--- a/src/auth_backend.rs
+++ b/src/auth_backend.rs
@ -1,17 +1,10 @@
+use async_trait::async_trait;
 use axum_login::{AuthnBackend, AuthUser, UserId};
 use crate::users::UserCredentials;
 use leptos::server_fn::error::ServerFnErrorErr;

 use crate::models::User;

-use cfg_if::cfg_if;
-
-cfg_if! {
-	if #[cfg(feature = "ssr")] {
-		use async_trait::async_trait;
-	}
-}
-
 impl AuthUser for User {
 	type Id = i32;

--- a/src/components.rs
+++ b/src/components.rs
@ -2,7 +2,6 @@ pub mod sidebar;
 pub mod dashboard;
 pub mod search;
 pub mod personal;
-pub mod dashboard_tile;
-pub mod dashboard_row;
-pub mod upload;
-pub mod song_list;
+pub mod playlist;
+pub mod create_playlist;
+pub mod playlists;
--- a/src/components/create_playlist.rs
+++ b/src/components/create_playlist.rs
@ -0,0 +1,53 @@
+use leptos::*;
+use leptos_icons::*;
+use leptos::leptos_dom::*;
+use crate::api::playlists::create_playlist;
+use crate::api::playlists::get_playlists;
+use crate::models::Playlist;
+
+#[component]
+pub fn CreatePlayList(closer: WriteSignal<bool>, set_playlists: WriteSignal<Vec<Playlist>>) -> impl IntoView {
+
+    let (playlist_name, set_playlist_name) = create_signal("".to_string());
+
+    let on_submit = move |ev: leptos::ev::SubmitEvent| {
+        ev.prevent_default();
+        let new_playlist_name = playlist_name.get();
+        spawn_local(async move {
+            let create_result = create_playlist(new_playlist_name).await;
+            if let Err(err) = create_result {
+                // Handle the error here, e.g., log it or display to the user
+                log!("Error creating playlist: {:?}", err);
+            } else {
+                log!("Playlist created successfully!");
+                closer.update(|value| *value = false);
+            }
+            let playlists = get_playlists().await;
+            if let Err(err) = playlists {
+                // Handle the error here, e.g., log it or display to the user
+                log!("Error getting playlists: {:?}", err);
+            } else {
+                set_playlists.update(|value| *value = playlists.unwrap());
+            }
+        })
+    }; 
+
+    view! {
+        <div class="create-playlist-popup-container">
+            <div class="close-button" on:click=move |_| closer.update(|value| *value = false)>
+                <Icon icon=icondata::IoCloseSharp />
+            </div>
+            <h1 class="header">Create Playlist</h1>    
+            <form class="create-playlist-form" action="POST" on:submit=on_submit>
+                <input class="name-input"  type="text" placeholder="Playlist Name" 
+                    on:input=move |ev| {
+                        set_playlist_name(event_target_value(&ev));
+                        log!("playlist name changed to: {}", playlist_name.get());
+                    }
+                    prop:value=playlist_name
+                />
+                <button class="create-button" type="submit">Create</button>
+            </form>
+        </div>
+    }
+}
--- a/src/components/dashboard_row.rs
+++ b/src/components/dashboard_row.rs
@ -1,118 +0,0 @@
-use leptos::html::Ul;
-use leptos::leptos_dom::*;
-use leptos::*;
-use leptos_use::{use_element_size, UseElementSizeReturn, use_scroll, UseScrollReturn};
-use crate::components::dashboard_tile::DashboardTile;
-use leptos_icons::*;
-
-/// A row of dashboard tiles, with a title
-pub struct DashboardRow {
-	pub title: String,
-	pub tiles: Vec<Box<dyn DashboardTile>>,
-}
-
-impl DashboardRow {
-	pub fn new(title: String, tiles: Vec<Box<dyn DashboardTile>>) -> Self {
-		Self {
-			title,
-			tiles,
-		}
-	}
-}
-
-impl IntoView for DashboardRow {
-	fn into_view(self) -> View {
-		let list_ref = create_node_ref::<Ul>();
-
-		// Scroll functions attempt to align the left edge of the scroll area with the left edge of a tile
-		// This is done by scrolling to the nearest multiple of the tile width, plus some for padding
-
-		let scroll_left = move |_| {
-			if let Some(scroll_element) = list_ref.get_untracked() {
-				let client_width = scroll_element.client_width() as f64;
-				let current_pos = scroll_element.scroll_left() as f64;
-				let desired_pos = current_pos - client_width;
-
-				if let Some(first_tile) = scroll_element.first_element_child() {
-					let tile_width = first_tile.client_width() as f64;
-					let scroll_pos = desired_pos + (tile_width - (desired_pos % tile_width));
-					scroll_element.scroll_to_with_x_and_y(scroll_pos, 0.0);
-				} else {
-					warn!("Could not get first tile to scroll left");
-					// Fall back to scrolling by the client width if we can't get the tile width
-					scroll_element.scroll_to_with_x_and_y(desired_pos, 0.0);
-				}
-			} else {
-				warn!("Could not get scroll element to scroll left");
-			}
-		};
-
-		let scroll_right = move |_| {
-			if let Some(scroll_element) = list_ref.get_untracked() {
-				let client_width = scroll_element.client_width() as f64;
-				let current_pos = scroll_element.scroll_left() as f64;
-				let desired_pos = current_pos + client_width;
-				
-				if let Some(first_tile) = scroll_element.first_element_child() {
-					let tile_width = first_tile.client_width() as f64;
-					let scroll_pos = desired_pos - (desired_pos % tile_width);
-					scroll_element.scroll_to_with_x_and_y(scroll_pos, 0.0);
-				} else {
-					warn!("Could not get first tile to scroll right");
-					// Fall back to scrolling by the client width if we can't get the tile width
-					scroll_element.scroll_to_with_x_and_y(desired_pos, 0.0);
-				}
-			} else {
-				warn!("Could not get scroll element to scroll right");
-			}
-		};
-
-		let UseElementSizeReturn { width: scroll_element_width, .. } = use_element_size(list_ref);
-		let UseScrollReturn { x: scroll_x, .. } = use_scroll(list_ref);
-
-		let scroll_right_hidden = Signal::derive(move || {
-			if let Some(scroll_element) = list_ref.get() {
-				if scroll_element.scroll_width() as f64 - scroll_element_width.get() <= scroll_x.get() {
-					"visibility: hidden"
-				} else {
-					""
-				}
-			} else {
-				""
-			}
-		});
-
-		let scroll_left_hidden = Signal::derive(move || {
-			if scroll_x.get() <= 0.0 {
-				"visibility: hidden"
-			} else {
-				""
-			}
-		});
-
-		view! {
-			<div class="dashboard-tile-row">
-				<div class="dashboard-tile-row-title-row">
-					<h2>{self.title}</h2>
-					<div class="dashboard-tile-row-scroll-btn">
-						<button on:click=scroll_left tabindex=-1 style=scroll_left_hidden>
-							<Icon class="dashboard-tile-row-scroll" icon=icondata::FiChevronLeft />
-						</button>
-						<button on:click=scroll_right tabindex=-1 style=scroll_right_hidden>
-							<Icon class="dashboard-tile-row-scroll" icon=icondata::FiChevronRight />
-						</button>
-					</div>
-				</div>
-				<ul _ref={list_ref}>
-				{self.tiles.into_iter().map(|tile_info| {
-					view! {
-						<li>
-							{ tile_info.into_view() }
-						</li>
-					}
-				}).collect::<Vec<_>>()}
-				</ul>
-			</div>
-		}.into_view()
-	}
-}
--- a/src/components/dashboard_tile.rs
+++ b/src/components/dashboard_tile.rs
@ -1,27 +0,0 @@
-use leptos::leptos_dom::*;
-use leptos::*;
-
-pub trait DashboardTile {
-	fn image_path(&self) -> String;
-	fn title(&self) -> String;
-	fn link(&self) -> String;
-	fn description(&self) -> Option<String> { None }
-}
-
-impl IntoView for &dyn DashboardTile {
-	fn into_view(self) -> View {
-		let link = self.link();
-
-		view! {
-			<div class="dashboard-tile">
-				<a href={link}>
-					<img src={self.image_path()} alt="dashboard-tile" />
-					<p class="dashboard-tile-title">{self.title()}</p>
-					<p class="dashboard-tile-description">
-						{self.description().unwrap_or_default()}
-					</p>
-				</a>
-			</div>
-		}.into_view()
-	}
-}
--- a/src/components/personal.rs
+++ b/src/components/personal.rs
@ -3,16 +3,17 @@ use leptos::*;
 use leptos_icons::*;

 #[component]
-pub fn Personal() -> impl IntoView {
+pub fn Personal(logged_in: ReadSignal<bool>) -> impl IntoView {
    view! {
        <div class=" personal-container">
-            <Profile />
+            <Profile logged_in=logged_in/>
        </div>
    }
 }

 #[component]
-pub fn Profile() -> impl IntoView {
+pub fn Profile(logged_in: ReadSignal<bool>) -> impl IntoView {
+
    let (dropdown_open, set_dropdown_open) = create_signal(false);

    let open_dropdown = move |_| {
@ -25,7 +26,13 @@ pub fn Profile() -> impl IntoView {
                <Icon icon=icondata::CgProfile />
            </div>
            <div class="dropdown-container" style={move || if dropdown_open() {"display: flex"} else {"display: none"}}>
-                <DropDownNotLoggedIn />
+            <Show 
+                when=move || {logged_in() == true}
+                fallback=move || view!{<DropDownNotLoggedIn />}
+            >
+                <DropDownLoggedIn/>
+            </Show>
+                
            </div>
        </div>
    }
@ -40,3 +47,26 @@ pub fn DropDownNotLoggedIn() -> impl IntoView {
        </div>
    }
 }
+#[component]
+pub fn DropDownLoggedIn() -> impl IntoView {
+    use crate::auth::logout;
+
+    let logout = move |_ev: leptos::ev::MouseEvent| {
+        spawn_local(async move {
+            let _logout_result = logout().await;
+            if let Err(err) = _logout_result {
+                log!("Error logging out: {:?}", err);
+            } else {
+                log!("Logged out Successfully!");
+                leptos_router::use_navigate()("/login", Default::default());
+            }
+        
+        });
+    };
+    view! {
+        <div class="dropdown-logged-in">
+            <h1>Logged in!</h1>
+            <button on:click=logout class="auth-button">Log Out</button>
+        </div>
+    }
+}
--- a/src/components/playlist.rs
+++ b/src/components/playlist.rs
@ -0,0 +1,162 @@
+use leptos::*;
+use leptos_icons::*;
+use leptos::leptos_dom::*;
+use crate::models::Playlist;
+use crate::models::Song;
+use crate::api::playlists::get_songs;
+use crate::api::songs::get_artists;
+use crate::api::playlists::remove_song;
+
+fn total_duration(songs: ReadSignal<Vec<Song>>) -> i32 {
+    let mut total_duration = 0;
+    for song in songs.get() {
+        total_duration += song.duration;
+    }
+    total_duration
+}
+
+fn convert_seconds(seconds: i32) -> String {
+    let minutes = seconds / 60;
+    let seconds = seconds % 60;
+    let seconds_string = if seconds < 10 {
+        format!("0{}", seconds)
+    } else {
+        format!("{}", seconds)
+    };
+    format!("{}:{}", minutes, seconds_string)
+}
+
+fn convert_to_text_time(seconds: i32) -> String {
+    let hours = seconds / 3600;
+    let minutes = (seconds % 3600) / 60;
+    format!("{} hour{}, {} minute{}", hours, if hours > 1 { "s" } else { "" }, minutes, if minutes > 1 { "s" } else { "" })
+}
+
+#[component]
+pub fn Playlist(playlist: Playlist) -> impl IntoView {
+    let (show_playlist, set_show_playlist) = create_signal(false);
+
+    view! {
+        <div class="playlist" on:click=move|_| set_show_playlist.update(|value| *value=true) >
+            <h1 class="name">{playlist.name.clone()}</h1>
+
+            <Show
+                when=move || show_playlist()
+                fallback=move || view! {<div></div>}
+            >
+                <div class="screen-darkener"></div>
+            </Show>
+            
+            <Show
+                when=move || show_playlist()
+                fallback=move || view! {<div></div>}
+            >
+                <PlayListPopUp playlist=playlist.clone() set_show_playlist=set_show_playlist />
+            </Show>
+        </div>
+    }
+}
+#[component]
+pub fn PlayListPopUp(playlist: Playlist, set_show_playlist: WriteSignal<bool>) -> impl IntoView {
+    let (songs, set_songs) = create_signal(vec![]);
+    
+    create_effect(move |_| {
+        spawn_local(async move {
+            let playlist_songs = get_songs(playlist.id.clone()).await;
+            if let Err(err) = playlist_songs {
+                // Handle the error here, e.g., log it or display to the user
+                log!("Error getting songs: {:?}", err);
+            } else {
+                log!("Songs: {:?}", playlist_songs);
+                log!("number of songs: {:?}", playlist_songs.clone().expect("REASON").len());
+                set_songs.update(|value| *value = playlist_songs.unwrap());
+
+            }
+        })
+    });
+
+    view! {
+        <div class="playlist-container">
+            <div class="close-button" on:click=move |_| set_show_playlist.update(|value| *value = false)>
+                <Icon icon=icondata::IoCloseSharp />
+            </div>
+            <div class="info">
+                <h1>{playlist.name.clone()}</h1>
+                <p>{move || songs.get().len()} songs {move || convert_to_text_time(total_duration(songs))}</p>
+            </div>
+            <div class="options">
+                <button><Icon class="button-icons" icon=icondata::BsPlayFill />Play</button>
+                <button><Icon class="button-icons" icon=icondata::IoShuffle />Shuffle</button>
+            </div>
+            <ul class="songs">
+                {
+                    move || songs.get().iter().enumerate().map(|(_index,song)| view! {
+                        <PlaylistSong song=song.clone()  playlist_id=playlist.id.clone() set_songs=set_songs />
+                    }).collect::<Vec<_>>()
+                }
+            </ul>
+        </div>
+    }
+}
+#[component]
+pub fn PlaylistSong(song: Song, playlist_id: Option<i32>, set_songs: WriteSignal<Vec<Song>>) -> impl IntoView {
+    let (artists, set_artists) = create_signal("".to_string());
+    let (is_hovered, set_is_hovered) = create_signal(false);
+
+    let delete_song = move |_| {
+        spawn_local(async move {
+            let delete_result = remove_song(playlist_id,song.id.clone()).await;
+            if let Err(err) = delete_result {
+                // Handle the error here, e.g., log it or display to the user
+                log!("Error deleting song: {:?}", err);
+            } else {
+                log!("Song deleted successfully!");
+                set_songs.update(|value| *value = value.iter().filter(|s| s.id != song.id).cloned().collect());
+            }
+        })
+    };
+
+
+    create_effect(move |_| {
+        spawn_local(async move {
+            let song_artists = get_artists(song.id.clone()).await;
+            if let Err(err) = song_artists {
+                // Handle the error here, e.g., log it or display to the user
+                log!("Error getting artist: {:?}", err);
+            } else {
+                log!("Artist: {:?}", song_artists);
+                let mut artist_string = "".to_string();
+                let song_artists = song_artists.unwrap();
+                for i in 0..song_artists.len() {
+                    if i == song_artists.len() - 1 {
+                        artist_string.push_str(&song_artists[i].name);
+                    } else {
+                        artist_string.push_str(&song_artists[i].name);
+                        artist_string.push_str(" & ");
+                    }
+                }
+                set_artists.update(|value| *value = artist_string);
+            }
+        })
+    });
+
+    view! {
+        <div class="song" on:mouseenter=move |_| set_is_hovered.update(|value| *value=true) on:mouseleave=move |_| set_is_hovered.update(|value| *value=false)>
+            <img src={song.image_path.clone()} alt={song.title.clone()} />
+            <div class="song-info">
+				<h3>{song.title.clone()}</h3>
+				<p>{move || artists.get()}</p>
+			</div>
+            <div class="right">
+                <Show
+                    when=move || is_hovered()
+                    fallback=move || view! {<p class="duration">{convert_seconds(song.duration)}</p>}            
+                >
+                <div class="delete-song" on:click=delete_song>
+                    <Icon icon=icondata::FaTrashCanRegular />
+                </div>
+                </Show>
+            </div>
+        </div>
+    }
+}
--- a/src/components/playlists.rs
+++ b/src/components/playlists.rs
@ -0,0 +1,56 @@
+use leptos::*;
+use leptos::leptos_dom::*;
+use leptos_icons::*;
+use crate::components::create_playlist::CreatePlayList;
+use crate::components::playlist::Playlist;
+use crate::api::playlists::get_playlists;
+
+#[component]
+pub fn Playlists() -> impl IntoView {
+    let (create_playlist_open, set_create_playlist_open) = create_signal(false);
+    let (playlists, set_playlists) = create_signal(vec![]);
+
+    create_effect(move |_| {
+        spawn_local(async move {
+            let playlists2 = get_playlists().await;
+            if let Err(err) = playlists2 {
+                // Handle the error here, e.g., log it or display to the user
+                log!("Error getting playlists: {:?}", err);
+            } else {
+                set_playlists.update(|value| *value = playlists2.unwrap());
+            }
+        });
+    });
+    
+    view! {
+        <div class="sidebar-playlists-container">
+            <div class="heading">
+                <h1 class="header">Playlists</h1>
+                <button on:click=move|_| set_create_playlist_open.update(|value|*value = true) class="add-playlist">
+                    <div class="add-sign">
+                        <Icon icon=icondata::IoAddSharp />
+                    </div>
+                    New Playlist
+                </button>
+            </div>
+            <Show
+                when=move || create_playlist_open()
+                fallback=move || view! {<div></div>}
+            >
+                <CreatePlayList closer=set_create_playlist_open set_playlists=set_playlists/>
+            </Show>
+            
+            <ul class="playlists">
+                {
+                    move || playlists.get().iter().enumerate().map(|(_index,playlist)| view! {
+                       <Playlist playlist=playlist.clone() />
+                    }).collect::<Vec<_>>()
+                }
+            </ul>
+            
+        </div>
+    }
+}
+
+
+
--- a/src/components/sidebar.rs
+++ b/src/components/sidebar.rs
@ -1,54 +1,42 @@
 use leptos::leptos_dom::*;
 use leptos::*;
 use leptos_icons::*;
-use crate::components::upload::*;
+use crate::components::playlists::Playlists;
+

 #[component]
-pub fn Sidebar(upload_open: RwSignal<bool>) -> impl IntoView {
-    use leptos_router::use_location;
-    let location = use_location();
-
-    let on_dashboard = Signal::derive(
-        move || location.pathname.get().starts_with("/dashboard") || location.pathname.get() == "/",
-    );
-
-    let on_search = Signal::derive(
-        move || location.pathname.get().starts_with("/search"),
-    );
+pub fn Sidebar(setter: WriteSignal<bool>, active: ReadSignal<bool>, logged_in:ReadSignal<bool>) -> impl IntoView {
+    let open_dashboard = move |_| {
+        setter.update(|value| *value = true);
+        log!("open dashboard");
+    };
+    let open_search = move |_| {
+        setter.update(|value| *value = false);
+        log!("open search");
+    };

    view! {
        <div class="sidebar-container">
            <div class="sidebar-top-container">
                <h2 class="header">LibreTunes</h2>
-                <UploadBtn dialog_open=upload_open />
-                <a class="buttons" href="/dashboard" style={move || if on_dashboard() {"color: #e1e3e1"} else {""}} >
+                <div class="buttons" on:click=open_dashboard style={move || if active() {"color: #e1e3e1"} else {""}} >
                    <Icon icon=icondata::OcHomeFillLg />
                    <h1>Dashboard</h1>
-                </a>
-                <a class="buttons" href="/search" style={move || if on_search() {"color: #e1e3e1"} else {""}}>
+                </div>
+                <div class="buttons" on:click=open_search style={move || if !active() {"color: #e1e3e1"} else {""}}>
                    <Icon icon=icondata::BiSearchRegular />
                    <h1>Search</h1>
-                </a>
                </div>
-            <Bottom />
-
            </div>
-    }
-}
-
-#[component]
-pub fn Bottom() -> impl IntoView {
-    view! {
            <div class="sidebar-bottom-container">
-            <div class="heading">
-                <h1 class="header">Playlists</h1>
-                <button class="add-playlist">
-                    <div class="add-sign">
-                        <Icon icon=icondata::IoAddSharp />
-                    </div>
-                    New Playlist
-                </button>
+                <Show 
+                    when=move || {logged_in() == true}
+                    fallback=move|| view!{<h1>LOG IN PLEASE</h1>}
+                >
+                    <Playlists />
+                </Show>
            </div>
        </div>
    }
 }
+
--- a/src/components/song_list.rs
+++ b/src/components/song_list.rs
@ -1,157 +0,0 @@
-use leptos::*;
-use leptos_icons::*;
-
-use crate::songdata::SongData;
-use crate::models::{Album, Artist};
-
-const LIKE_DISLIKE_BTN_SIZE: &str = "2em";
-
-#[component]
-pub fn SongList(songs: MaybeSignal<Vec<SongData>>) -> impl IntoView {
-	view! {
-		<table class="song-list">
-			{
-				songs.with(|songs| {
-					let mut first_song = true;
-
-					songs.iter().map(|song| {
-						let playing = first_song.into();
-						first_song = false;
-
-						view! {
-							<SongListItem song={song.clone()} song_playing=playing />
-						}
-					}).collect::<Vec<_>>()
-				})
-			}
-		</table>
-	}
-}
-
-#[component]
-pub fn SongListItem(song: SongData, song_playing: MaybeSignal<bool>) -> impl IntoView {
-	let liked = create_rw_signal(song.like_dislike.map(|(liked, _)| liked).unwrap_or(false));
-	let disliked = create_rw_signal(song.like_dislike.map(|(_, disliked)| disliked).unwrap_or(false));
-	
-	view! {
-		<tr class="song-list-item">
-			<td class="song-image"><SongImage image_path=song.image_path song_playing /></td>
-			<td class="song-title"><p>{song.title}</p></td>
-			<td class="song-list-spacer"></td>
-			<td class="song-artists"><SongArtists artists=song.artists /></td>
-			<td class="song-list-spacer"></td>
-			<td class="song-album"><SongAlbum album=song.album /></td>
-			<td class="song-list-spacer-big"></td>
-			<td class="song-like-dislike"><SongLikeDislike liked disliked/></td>
-			<td>{format!("{}:{:02}", song.duration / 60, song.duration % 60)}</td>
-		</tr>
-	}
-}
-
-/// Display the song's image, with an overlay if the song is playing
-/// When the song list item is hovered, the overlay will show the play button
-#[component]
-fn SongImage(image_path: String, song_playing: MaybeSignal<bool>) -> impl IntoView {
-	view! {
-		<img class="song-image" src={image_path}/>
-		{if song_playing.get() {
-			view! { <Icon class="song-image-overlay song-playing-overlay" icon=icondata::BsPauseFill /> }.into_view()
-		} else {
-			view! { <Icon class="song-image-overlay hide-until-hover" icon=icondata::BsPlayFill /> }.into_view()
-		}}
-	}
-}
-
-/// Displays a song's artists, with links to their artist pages
-#[component]
-fn SongArtists(artists: Vec<Artist>) -> impl IntoView {
-	let num_artists = artists.len() as isize;
-
-	artists.iter().enumerate().map(|(i, artist)| {
-		let i = i as isize;
-		
-		view! {
-			{
-				if let Some(id) = artist.id {
-					view! { <a href={format!("/artist/{}", id)}>{artist.name.clone()}</a> }.into_view()
-				} else {
-					view! { <span>{artist.name.clone()}</span> }.into_view()
-				}
-			}
-			{if i < num_artists - 2 { ", " } else if i == num_artists - 2 { " & " } else { "" }}
-		}
-	}).collect::<Vec<_>>()
-}
-
-/// Display a song's album, with a link to the album page
-#[component]
-fn SongAlbum(album: Option<Album>) -> impl IntoView {
-	album.as_ref().map(|album| {
-		view! {
-			<span>
-				{
-					if let Some(id) = album.id {
-						view! { <a href={format!("/album/{}", id)}>{album.title.clone()}</a> }.into_view()
-					} else {
-						view! { <span>{album.title.clone()}</span> }.into_view()
-					}
-				}
-			</span>
-		}
-	})
-}
-
-/// Display like and dislike buttons for a song, and indicate if the song is liked or disliked
-#[component]
-fn SongLikeDislike(liked: RwSignal<bool>, disliked: RwSignal<bool>) -> impl IntoView {
-	let like_icon = Signal::derive(move || {
-		if liked.get() {
-			icondata::TbThumbUpFilled
-		} else {
-			icondata::TbThumbUp
-		}
-	});
-
-	let dislike_icon = Signal::derive(move || {
-		if disliked.get() {
-			icondata::TbThumbDownFilled
-		} else {
-			icondata::TbThumbDown
-		}
-	});
-
-	let like_class = MaybeProp::derive(move || {
-		if liked.get() {
-			Some(TextProp::from("controlbtn"))
-		} else {
-			Some(TextProp::from("controlbtn hide-until-hover"))
-		}
-	});
-
-	let dislike_class = MaybeProp::derive(move || {
-		if disliked.get() {
-			Some(TextProp::from("controlbtn hmirror"))
-		} else {
-			Some(TextProp::from("controlbtn hmirror hide-until-hover"))
-		}
-	});
-
-	let toggle_like = move |_| {
-		liked.set(!liked.get_untracked());
-		disliked.set(disliked.get_untracked() && !liked.get_untracked());
-	};
-
-	let toggle_dislike = move |_| {
-		disliked.set(!disliked.get_untracked());
-		liked.set(liked.get_untracked() && !disliked.get_untracked());
-	};
-
-	view! {
-		<button on:click=toggle_dislike>
-			<Icon class=dislike_class width=LIKE_DISLIKE_BTN_SIZE height=LIKE_DISLIKE_BTN_SIZE icon=dislike_icon />
-		</button>
-		<button on:click=toggle_like>
-			<Icon class=like_class width=LIKE_DISLIKE_BTN_SIZE height=LIKE_DISLIKE_BTN_SIZE icon=like_icon />
-		</button>
-	}
-}
--- a/src/components/upload.rs
+++ b/src/components/upload.rs
@ -1,245 +0,0 @@
-use std::rc::Rc;
-use leptos::leptos_dom::*;
-use leptos::*;
-use leptos_icons::*;
-use leptos_router::Form;
-use web_sys::Response;
-use crate::search::search_artists;
-use crate::search::search_albums;
-use crate::models::Artist;
-use crate::models::Album;
-
-#[component]
-pub fn UploadBtn(dialog_open: RwSignal<bool>) -> impl IntoView {
-	let open_dialog = move |_| {
-		dialog_open.set(true);
-	};
-
-	view! {
-		<button class="upload-btn" on:click=open_dialog>
-			<div class="add-sign">
-				<Icon icon=icondata::IoAddSharp />
-			</div>
-			Upload
-		</button>
-	}
-}
-
-#[component]
-pub fn Upload(open: RwSignal<bool>) -> impl IntoView {
-	// Create signals for the artist input and the filtered artists
-	let (artists, set_artists) = create_signal("".to_string());
-	let (filtered_artists, set_filtered_artists)  = create_signal(vec![]);
-
-	let (albums, set_albums) = create_signal("".to_string());
-	let (filtered_albums, set_filtered_albums) = create_signal(vec![]);
-
-	let (error_msg, set_error_msg) = create_signal::<Option<String>>(None);
-
-	let close_dialog = move |ev: leptos::ev::MouseEvent| {
-		ev.prevent_default();
-		open.set(false);
-	};
-	// Create a filter function to handle filtering artists
-	// Allow users to search for artists by name, converts the artist name to artist id to be handed off to backend
-	let handle_filter_artists = move |ev: leptos::ev::Event| {
-		ev.prevent_default();
-
-		let artist_input: String = event_target_value(&ev);
-
-		//Get the artist that we are currently searching for
-		let mut all_artists: Vec<&str> = artist_input.split(",").collect();
-		let search = all_artists.pop().unwrap().to_string();
-		
-		//Update the artist signal with the input
-		set_artists.update(|value: &mut String| *value = artist_input);
-
-		spawn_local(async move {
-			let filter_results = search_artists(search, 3).await;
-			if let Err(err) = filter_results {
-				log!("Error filtering artists: {:?}", err);
-			} else if let Ok(artists) = filter_results {
-				log!("Filtered artists: {:?}", artists);
-
-				set_filtered_artists.update(|value| *value = artists);
-			}
-		})
-	};
-	// Create a filter function to handle filtering albums
-	// Allow users to search for albums by title, converts the album title to album id to be handed off to backend
-	let handle_filter_albums = move |ev: leptos::ev::Event| {
-		ev.prevent_default();
-
-		let album_input: String = event_target_value(&ev);
-		
-		//Update the album signal with the input
-		set_albums.update(|value: &mut String| *value = album_input);
-
-		spawn_local(async move {
-			let filter_results = search_albums(albums.get_untracked(), 3).await;
-			if let Err(err) = filter_results {
-				log!("Error filtering albums: {:?}", err);
-			} else if let Ok(albums) = filter_results {
-				log!("Filtered albums: {:?}", albums);
-				set_filtered_albums.update(|value| *value = albums);
-			}
-		})
-	};
-
-	let handle_response = Rc::new(move |response: &Response| {
-		if response.ok() {
-			set_error_msg.update(|value| *value = None);
-			set_filtered_artists.update(|value| *value = vec![]);
-			set_filtered_albums.update(|value| *value = vec![]);
-			set_artists.update(|value| *value = "".to_string());
-			set_albums.update(|value| *value = "".to_string());
-			open.set(false);
-		} else {
-			// TODO: Extract error message from response
-			set_error_msg.update(|value| *value = Some("Error uploading song".to_string()));
-		}
-	});
-
-	view! {
-		<Show when=open fallback=move || view! {}>
-			<div class="upload-container" open=open>
-				<div class="close-button" on:click=close_dialog><Icon icon=icondata::IoClose /></div>
-				<div class="upload-header">
-					<h1>Upload Song</h1>
-				</div>
-				<Form action="/api/upload" method="POST" enctype=String::from("multipart/form-data")
-					class="upload-form" on_response=handle_response.clone()>
-					<div class="input-bx">
-						<input type="text" name="title" required class="text-input" required/>
-						<span>Title</span>
-					</div>
-					<div class="artists has-search">
-						<div class="input-bx">
-							<input type="text" name="artist_ids" class="text-input" prop:value=artists on:input=handle_filter_artists/>
-							<span>Artists</span>
-						</div>
-						<Show
-							when=move || {filtered_artists.get().len() > 0}
-							fallback=move || view! {}						
-						>
-							<ul class="artist_results search-results">
-								{
-									move || filtered_artists.get().iter().enumerate().map(|(_index,filtered_artist)| view! {
-										<Artist artist=filtered_artist.clone() artists=artists set_artists=set_artists set_filtered=set_filtered_artists/>
-									}).collect::<Vec<_>>()
-								}
-							</ul>
-						</Show>
-					</div>
-					<div class="albums has-search">
-						<div class="input-bx">
-							<input type="text" name="album_id" class="text-input" prop:value=albums on:input=handle_filter_albums/>
-							<span>Album ID</span>
-						</div>
-						<Show
-							when=move || {filtered_albums.get().len() > 0}
-							fallback=move || view! {}						
-						>
-							<ul class="album_results search-results">
-								{
-									move || filtered_albums.get().iter().enumerate().map(|(_index,filtered_album)| view! {
-										<Album album=filtered_album.clone() _albums=albums set_albums=set_albums set_filtered=set_filtered_albums/>
-									}).collect::<Vec<_>>()
-								}
-							</ul>
-						</Show>
-					</div>
-					
-					<div class="input-bx">
-						<input type="number" name="track_number" class="text-input"/>
-						<span>Track Number</span>
-					</div>
-					<div class="release-date">
-						<div class="left">
-							<span>Release</span>
-							<span>Date</span>
-						</div>
-						<input class="info" type="date" name="release_date"/>
-					</div>
-					<div class="file">
-						<span>File</span>
-						<input class="info" type="file" accept=".mp3" name="file" required/>
-					</div>
-					<button type="submit" class="upload-button">Upload</button>
-				</Form>
-				<Show
-					when=move || {error_msg.get().is_some()}
-					fallback=move || view! {}
-				>
-					<div class="error-msg">
-						<Icon icon=icondata::IoAlertCircleSharp />
-						{error_msg.get().as_ref().unwrap()}
-					</div>
-				</Show>
-			</div>
-		</Show>
-	}
-}
-
-#[component]
-pub fn Artist(artist: Artist, artists: ReadSignal<String>, set_artists: WriteSignal<String>, set_filtered: WriteSignal<Vec<Artist>>) -> impl IntoView {
-	// Converts artist name to artist id and adds it to the artist input
-	let add_artist = move |_| {
-		//Create an empty string to hold previous artist ids
-		let mut s: String = String::from("");
-		//Get the current artist input
-		let all_artirts: String = artists.get();
-		//Split the input into a vector of artists separated by commas
-		let mut ids: Vec<&str> = all_artirts.split(",").collect();
-		//If there is only one artist in the input, get their id equivalent and add it to the string
-		if ids.len() == 1 {
-			let value_str = match artist.id.clone() {
-				Some(v) => v.to_string(),
-				None => String::from("None"),
-			};
-			s.push_str(&value_str);
-			s.push_str(",");
-			set_artists.update(|value| *value = s);
-		//If there are multiple artists in the input, pop the last artist by string off the vector, 
-		//get their id equivalent, and add it to the string
-		} else {
-			ids.pop();
-			for id in ids {
-				s.push_str(id);
-				s.push_str(",");
-			}
-			let value_str = match artist.id.clone() {
-				Some(v) => v.to_string(),
-				None => String::from("None"),
-			};
-			s.push_str(&value_str);
-			s.push_str(",");
-			set_artists.update(|value| *value = s);
-		}
-		//Clear the search results
-		set_filtered.update(|value| *value = vec![]);
-	};
-
-	view! {
-		<div class="artist result" on:click=add_artist>
-			{artist.name.clone()}
-		</div>
-	}
-}
-#[component]
-pub fn Album(album: Album, _albums: ReadSignal<String>, set_albums: WriteSignal<String>, set_filtered: WriteSignal<Vec<Album>>) -> impl IntoView {
-	//Converts album title to album id to upload a song
-	let add_album = move |_| {
-		let value_str = match album.id.clone() {
-			Some(v) => v.to_string(),
-			None => String::from("None"),
-		};
-		set_albums.update(|value| *value = value_str);
-		set_filtered.update(|value| *value = vec![]);
-	};
-	view! {
-		<div class="album result" on:click=add_album>
-			{album.title.clone()}
-		</div>
-	}
-}
--- a/src/fileserv.rs
+++ b/src/fileserv.rs
@ -12,7 +12,6 @@ cfg_if! { if #[cfg(feature = "ssr")] {
    use tower_http::services::ServeDir;
    use leptos::*;
    use crate::app::App;
-    use std::str::FromStr;

    pub async fn file_and_error_handler(uri: Uri, State(options): State<LeptosOptions>, req: Request<Body>) -> AxumResponse {
        let root = options.site_root.clone();
@ -28,43 +27,14 @@ cfg_if! { if #[cfg(feature = "ssr")] {

    pub async fn get_static_file(uri: Uri, root: &str) -> Result<Response<Body>, (StatusCode, String)> {
        let req = Request::builder().uri(uri.clone()).body(Body::empty()).unwrap();
-
        // `ServeDir` implements `tower::Service` so we can call it with `tower::ServiceExt::oneshot`
        // This path is relative to the cargo root
-        match ServeDir::new(root).oneshot(req).await.ok() {
-            Some(res) => Ok(res.into_response()),
-            None => Err((
+        match ServeDir::new(root).oneshot(req).await {
+            Ok(res) => Ok(res.into_response()),
+            Err(err) => Err((
                StatusCode::INTERNAL_SERVER_ERROR,
-                format!("Something went wrong"),
+                format!("Something went wrong: {err}"),
            )),
        }
    }
-
-    pub enum AssetType {
-        Audio,
-        Image,
-    }
-
-    pub async fn get_asset_file(filename: String, asset_type: AssetType) -> Result<Response<Body>, (StatusCode, String)> {
-        const DEFAULT_AUDIO_PATH: &str = "assets/audio";
-        const DEFAULT_IMAGE_PATH: &str = "assets/images";
-
-        let root = match asset_type {
-            AssetType::Audio => std::env::var("LIBRETUNES_AUDIO_PATH").unwrap_or(DEFAULT_AUDIO_PATH.to_string()),
-            AssetType::Image => std::env::var("LIBRETUNES_IMAGE_PATH").unwrap_or(DEFAULT_IMAGE_PATH.to_string()),
-        };
-
-        // Create a Uri from the filename
-        // ServeDir expects a leading `/`
-        let uri = Uri::from_str(format!("/{}", filename).as_str());
-
-        match uri {
-            Ok(uri) => get_static_file(uri, root.as_str()).await,
-            Err(_) => Err((
-                StatusCode::INTERNAL_SERVER_ERROR,
-                format!("Attempted to serve an invalid file"),
-            )),
-        }
-    }
-
 }}
--- a/src/lib.rs
+++ b/src/lib.rs
@ -1,8 +1,6 @@
 pub mod app;
 pub mod auth;
 pub mod songdata;
-pub mod albumdata;
-pub mod artistdata;
 pub mod playstatus;
 pub mod playbar;
 pub mod database;
@ -16,9 +14,6 @@ pub mod search;
 pub mod fileserv;
 pub mod error_template;
 pub mod api;
-pub mod upload;
-pub mod util;
-
 use cfg_if::cfg_if;

 cfg_if! {
--- a/src/main.rs
+++ b/src/main.rs
@ -1,10 +1,10 @@
 // Needed for building in Docker container
 // See https://github.com/clux/muslrust?tab=readme-ov-file#diesel-and-pq-builds
 // See https://github.com/sgrif/pq-sys/issues/25
-#[cfg(target_env = "musl")]
+#[cfg(target = "x86_64-unknown-linux-musl")]
 extern crate openssl;

-#[cfg(target_env = "musl")]
+#[cfg(target = "x86_64-unknown-linux-musl")]
 #[macro_use]
 extern crate diesel;

@ -14,32 +14,22 @@ extern crate diesel_migrations;
 #[cfg(feature = "ssr")]
 #[tokio::main]
 async fn main() {
-    use axum::{routing::get, Router, extract::Path};
+    use axum::{routing::get, Router};
    use leptos::*;
    use leptos_axum::{generate_route_list, LeptosRoutes};
    use libretunes::app::*;
-    use libretunes::fileserv::{file_and_error_handler, get_asset_file, get_static_file, AssetType};
-    use axum_login::tower_sessions::SessionManagerLayer;
+    use libretunes::fileserv::{file_and_error_handler, get_static_file};
+    use tower_sessions::SessionManagerLayer;
    use tower_sessions_redis_store::{fred::prelude::*, RedisStore};
    use axum_login::AuthManagerLayerBuilder;
    use libretunes::auth_backend::AuthBackend;
-    use log::*;
-
-    flexi_logger::Logger::try_with_env_or_str("debug").unwrap().format(flexi_logger::opt_format).start().unwrap();
-
-    info!("\n{}", include_str!("../ascii_art.txt"));
-    info!("Starting Leptos server...");

    use dotenv::dotenv;
    dotenv().ok();

-    debug!("Running database migrations...");
-
    // Bring the database up to date
    libretunes::database::migrate();

-    debug!("Connecting to Redis...");
-
    let redis_url = std::env::var("REDIS_URL").expect("REDIS_URL must be set");
    let redis_config = RedisConfig::from_url(&redis_url).expect(&format!("Unable to parse Redis URL: {}", redis_url));
    let redis_pool = RedisPool::new(redis_config, None, None, None, 1).expect("Unable to create Redis pool");
@ -60,23 +50,35 @@ async fn main() {

    let app = Router::new()
        .leptos_routes(&leptos_options, routes, App)
-        .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(auth_layer)
        .fallback(file_and_error_handler)
        .with_state(leptos_options);

+    println!("listening on http://{}", &addr);
+
    let listener = tokio::net::TcpListener::bind(&addr).await.expect(&format!("Could not bind to {}", &addr));
-
-    info!("Listening on http://{}", &addr);
-
    axum::serve(listener, app.into_make_service()).await.expect("Server failed");
 }

-#[cfg(not(feature = "ssr"))]
+#[cfg(not(any(feature = "ssr", feature = "csr")))]
 pub fn main() {
    // no client-side main function
    // unless we want this to work with e.g., Trunk for pure client-side testing
    // see lib.rs for hydration function instead
+    // see optional feature `csr` instead
+}
+
+#[cfg(all(not(feature = "ssr"), feature = "csr"))]
+pub fn main() {
+    // a client-side main function is required for using `trunk serve`
+    // prefer using `cargo leptos serve` instead
+    // to run: `trunk serve --open --features csr`
+    use leptos::*;
+    use libretunes::app::*;
+    use wasm_bindgen::prelude::wasm_bindgen;
+
+    console_error_panic_hook::set_once();
+
+    leptos::mount_to_body(App);
 }
--- a/src/models.rs
+++ b/src/models.rs
@ -41,284 +41,13 @@ pub struct User {
 	/// The time the user was created
 	#[cfg_attr(feature = "ssr", diesel(deserialize_as = SystemTime))]
 	pub created_at: Option<SystemTime>,
-	/// Whether the user is an admin
-	pub admin: bool,
-}
-
-impl User {
-	/// Get the history of songs listened to by this user from the database
-	/// 
-	/// The returned history will be ordered by date in descending order,
-	/// and a limit of N will select the N most recent entries.
-	/// The `id` field of this user must be present (Some) to get history
-	/// 
-	/// # Arguments
-	/// 
-	/// * `limit` - An optional limit on the number of history entries to return
-	/// * `conn` - A mutable reference to a database connection
-	/// 
-	/// # Returns
-	/// 
-	/// * `Result<Vec<HistoryEntry>, Box<dyn Error>>` -
-	/// 	A result indicating success with a vector of history entries, or an error
-	/// 
-	#[cfg(feature = "ssr")]
-	pub fn get_history(self: &Self, limit: Option<i64>, conn: &mut PgPooledConn) ->
-		Result<Vec<HistoryEntry>, Box<dyn Error>> {
-		use crate::schema::song_history::dsl::*;
-
-		let my_id = self.id.ok_or("Artist id must be present (Some) to get history")?;
-
-		let my_history = 
-		if let Some(limit) = limit {
-			song_history
-				.filter(user_id.eq(my_id))
-				.order(date.desc())
-				.limit(limit)
-				.load(conn)?
-		} else {
-			song_history
-				.filter(user_id.eq(my_id))
-				.load(conn)?
-		};
-
-		Ok(my_history)
-	}
-
-	/// Get the history of songs listened to by this user from the database
-	/// 
-	/// The returned history will be ordered by date in descending order,
-	/// and a limit of N will select the N most recent entries.
-	/// The `id` field of this user must be present (Some) to get history
-	/// 
-	/// # Arguments
-	/// 
-	/// * `limit` - An optional limit on the number of history entries to return
-	/// * `conn` - A mutable reference to a database connection
-	/// 
-	/// # Returns
-	/// 
-	/// * `Result<Vec<(SystemTime, Song)>, Box<dyn Error>>` -
-	/// 	A result indicating success with a vector of listen dates and songs, or an error
-	/// 
-	#[cfg(feature = "ssr")]
-	pub fn get_history_songs(self: &Self, limit: Option<i64>, conn: &mut PgPooledConn) ->
-		Result<Vec<(SystemTime, Song)>, Box<dyn Error>> {
-		use crate::schema::songs::dsl::*;
-		use crate::schema::song_history::dsl::*;
-
-		let my_id = self.id.ok_or("Artist id must be present (Some) to get history")?;
-
-		let my_history =
-		if let Some(limit) = limit {
-			song_history
-				.inner_join(songs)
-				.filter(user_id.eq(my_id))
-				.order(date.desc())
-				.limit(limit)
-				.select((date, songs::all_columns()))
-				.load(conn)?
-		} else {
-			song_history
-				.inner_join(songs)
-				.filter(user_id.eq(my_id))
-				.order(date.desc())
-				.select((date, songs::all_columns()))
-				.load(conn)?
-		};
-
-		Ok(my_history)
-	}
-
-	/// Add a song to this user's history in the database
-	/// 
-	/// The date of the history entry will be the current time
-	/// The `id` field of this user must be present (Some) to add history
-	/// 
-	/// # Arguments
-	/// 
-	/// * `song_id` - The id of the song to add to this user's history
-	/// * `conn` - A mutable reference to a database connection
-	/// 
-	/// # Returns
-	/// 
-	/// * `Result<(), Box<dyn Error>>` - A result indicating success with an empty value, or an error
-	/// 
-	#[cfg(feature = "ssr")]
-	pub fn add_history(self: &Self, song_id: i32, conn: &mut PgPooledConn) -> Result<(), Box<dyn Error>> {
-		use crate::schema::song_history;
-
-		let my_id = self.id.ok_or("Artist id must be present (Some) to add history")?;
-
-		diesel::insert_into(song_history::table)
-			.values((song_history::user_id.eq(my_id), song_history::song_id.eq(song_id)))
-			.execute(conn)?;
-
-		Ok(())
-	}
-
-	/// Check if this user has listened to a song
-	/// 
-	/// The `id` field of this user must be present (Some) to check history
-	/// 
-	/// # Arguments
-	/// 
-	/// * `song_id` - The id of the song to check if this user has listened to
-	/// * `conn` - A mutable reference to a database connection
-	/// 
-	/// # Returns
-	/// 
-	/// * `Result<bool, Box<dyn Error>>` - A result indicating success with a boolean value, or an error
-	/// 
-	#[cfg(feature = "ssr")]
-	pub fn has_listened_to(self: &Self, song_id: i32, conn: &mut PgPooledConn) -> Result<bool, Box<dyn Error>> {
-		use crate::schema::song_history::{self, user_id};
-
-		let my_id = self.id.ok_or("Artist id must be present (Some) to check history")?;
-
-		let has_listened = song_history::table
-			.filter(user_id.eq(my_id))
-			.filter(song_history::song_id.eq(song_id))
-			.first::<HistoryEntry>(conn)
-			.optional()?
-			.is_some();
-
-		Ok(has_listened)
-	}
-
-	/// Like or unlike a song for this user
-	/// If likeing a song, remove dislike if it exists
-	#[cfg(feature = "ssr")]
-	pub async fn set_like_song(self: &Self, song_id: i32, like: bool, conn: &mut PgPooledConn) -> 
-		Result<(), Box<dyn Error>> {
-		use log::*;
-		debug!("Setting like for song {} to {}", song_id, like);
-
-		use crate::schema::song_likes;
-		use crate::schema::song_dislikes;
-
-		let my_id = self.id.ok_or("User id must be present (Some) to like/un-like a song")?;
-
-		if like {
-			diesel::insert_into(song_likes::table)
-				.values((song_likes::song_id.eq(song_id), song_likes::user_id.eq(my_id)))
-				.execute(conn)?;
-
-			// Remove dislike if it exists
-			diesel::delete(song_dislikes::table.filter(song_dislikes::song_id.eq(song_id)
-				.and(song_dislikes::user_id.eq(my_id))))
-				.execute(conn)?;
-		} else {
-			diesel::delete(song_likes::table.filter(song_likes::song_id.eq(song_id).and(song_likes::user_id.eq(my_id))))
-				.execute(conn)?;
-		}
-
-		Ok(())
-	}
-
-	/// Get the like status of a song for this user
-	#[cfg(feature = "ssr")]
-	pub async fn get_like_song(self: &Self, song_id: i32, conn: &mut PgPooledConn) -> Result<bool, Box<dyn Error>> {
-		use crate::schema::song_likes;
-
-		let my_id = self.id.ok_or("User id must be present (Some) to get like status of a song")?;
-
-		let like = song_likes::table
-			.filter(song_likes::song_id.eq(song_id).and(song_likes::user_id.eq(my_id)))
-			.first::<(i32, i32)>(conn)
-			.optional()?
-			.is_some();
-
-		Ok(like)
-	}
-
-	/// Get songs liked by this user
-	#[cfg(feature = "ssr")]
-	pub async fn get_liked_songs(self: &Self, conn: &mut PgPooledConn) -> Result<Vec<Song>, Box<dyn Error>> {
-		use crate::schema::songs::dsl::*;
-		use crate::schema::song_likes::dsl::*;
-
-		let my_id = self.id.ok_or("User id must be present (Some) to get liked songs")?;
-
-		let my_songs = songs
-			.inner_join(song_likes)
-			.filter(user_id.eq(my_id))
-			.select(songs::all_columns())
-			.load(conn)?;
-
-		Ok(my_songs)
-	}
-
-	/// Dislike or remove dislike from a song for this user
-	/// If disliking a song, remove like if it exists
-	#[cfg(feature = "ssr")]
-	pub async fn set_dislike_song(self: &Self, song_id: i32, dislike: bool, conn: &mut PgPooledConn) -> 
-		Result<(), Box<dyn Error>> {
-		use log::*;
-		debug!("Setting dislike for song {} to {}", song_id, dislike);
-
-		use crate::schema::song_likes;
-		use crate::schema::song_dislikes;
-
-		let my_id = self.id.ok_or("User id must be present (Some) to dislike/un-dislike a song")?;
-
-		if dislike {
-			diesel::insert_into(song_dislikes::table)
-				.values((song_dislikes::song_id.eq(song_id), song_dislikes::user_id.eq(my_id)))
-				.execute(conn)?;
-
-			// Remove like if it exists
-			diesel::delete(song_likes::table.filter(song_likes::song_id.eq(song_id)
-				.and(song_likes::user_id.eq(my_id))))
-				.execute(conn)?;
-		} else {
-			diesel::delete(song_dislikes::table.filter(song_dislikes::song_id.eq(song_id)
-				.and(song_dislikes::user_id.eq(my_id))))
-				.execute(conn)?;
-		}
-
-		Ok(())
-	}
-
-	/// Get the dislike status of a song for this user
-	#[cfg(feature = "ssr")]
-	pub async fn get_dislike_song(self: &Self, song_id: i32, conn: &mut PgPooledConn) -> Result<bool, Box<dyn Error>> {
-		use crate::schema::song_dislikes;
-
-		let my_id = self.id.ok_or("User id must be present (Some) to get dislike status of a song")?;
-
-		let dislike = song_dislikes::table
-			.filter(song_dislikes::song_id.eq(song_id).and(song_dislikes::user_id.eq(my_id)))
-			.first::<(i32, i32)>(conn)
-			.optional()?
-			.is_some();
-
-		Ok(dislike)
-	}
-
-	/// Get songs disliked by this user
-	#[cfg(feature = "ssr")]
-	pub async fn get_disliked_songs(self: &Self, conn: &mut PgPooledConn) -> Result<Vec<Song>, Box<dyn Error>> {
-		use crate::schema::songs::dsl::*;
-		use crate::schema::song_likes::dsl::*;
-
-		let my_id = self.id.ok_or("User id must be present (Some) to get disliked songs")?;
-
-		let my_songs = songs
-			.inner_join(song_likes)
-			.filter(user_id.eq(my_id))
-			.select(songs::all_columns())
-			.load(conn)?;
-
-		Ok(my_songs)
-	}
 }

 /// Model for an artist
-#[cfg_attr(feature = "ssr", derive(Queryable, Selectable, Insertable, Identifiable))]
+#[cfg_attr(feature = "ssr", derive(Queryable, Selectable, Insertable))]
 #[cfg_attr(feature = "ssr", diesel(table_name = crate::schema::artists))]
 #[cfg_attr(feature = "ssr", diesel(check_for_backend(diesel::pg::Pg)))]
-#[derive(Serialize, Deserialize, Clone, Debug)]
+#[derive(Serialize, Deserialize, Debug, Clone)]
 pub struct Artist {
 	/// A unique id for the artist
 	#[cfg_attr(feature = "ssr", diesel(deserialize_as = i32))]
@ -433,33 +162,13 @@ impl Artist {

 		Ok(my_songs)
 	}
-
-	/// Display a list of artists as a string.
-	/// 
-	/// For one artist, displays [artist1]. For two artists, displays [artist1] & [artist2].
-	/// For three or more artists, displays [artist1], [artist2], & [artist3].
-	pub fn display_list(artists: &Vec<Artist>) -> String {
-		let mut artist_list = String::new();
-
-		for (i, artist) in artists.iter().enumerate() {
-			if i == 0 {
-				artist_list.push_str(&artist.name);
-			} else if i == artists.len() - 1 {
-				artist_list.push_str(&format!(" & {}", artist.name));
-			} else {
-				artist_list.push_str(&format!(", {}", artist.name));
-			}
-		}
-
-		artist_list
-	}
 }

 /// Model for an album
-#[cfg_attr(feature = "ssr", derive(Queryable, Selectable, Insertable, Identifiable))]
+#[cfg_attr(feature = "ssr", derive(Queryable, Selectable, Insertable))]
 #[cfg_attr(feature = "ssr", diesel(table_name = crate::schema::albums))]
 #[cfg_attr(feature = "ssr", diesel(check_for_backend(diesel::pg::Pg)))]
-#[derive(Serialize, Deserialize, Clone, Debug)]
+#[derive(Serialize, Deserialize)]
 pub struct Album {
 	/// A unique id for the album
 	#[cfg_attr(feature = "ssr", diesel(deserialize_as = i32))]
@ -468,8 +177,6 @@ pub struct Album {
 	pub title: String,
 	/// The album's release date
 	pub release_date: Option<Date>,
-	/// The path to the album's image file
-	pub image_path: Option<String>,
 }

 impl Album {
@ -532,7 +239,7 @@ impl Album {
 #[cfg_attr(feature = "ssr", derive(Queryable, Selectable, Insertable))]
 #[cfg_attr(feature = "ssr", diesel(table_name = crate::schema::songs))]
 #[cfg_attr(feature = "ssr", diesel(check_for_backend(diesel::pg::Pg)))]
-#[derive(Serialize, Deserialize)]
+#[derive(Serialize, Deserialize, Debug, Clone)]
 pub struct Song {
 	/// A unique id for the song
 	#[cfg_attr(feature = "ssr", diesel(deserialize_as = i32))]
@ -582,8 +289,78 @@ impl Song {

 		Ok(my_artists)
 	}
+}
+/// Model for an playlist
+#[cfg_attr(feature = "ssr", derive(Queryable, Selectable, Insertable))]
+#[cfg_attr(feature = "ssr", diesel(table_name = crate::schema::playlists))]
+#[cfg_attr(feature = "ssr", diesel(check_for_backend(diesel::pg::Pg)))]
+#[derive(Serialize, Deserialize, Debug, Clone)]
+pub struct Playlist {
+	/// A unique id for the playlist
+	#[cfg_attr(feature = "ssr", diesel(deserialize_as = i32))]
+	pub id: Option<i32>,
+	/// The playlist's name
+	pub name: String,
+	/// The user who created the playlist
+	pub user_id: i32,
+}
+impl Playlist {

-	/// Get the album for this song from the database
+	/// Create a new, empty playlist in the database
+	/// 
+	/// # Arguments
+	/// 
+	/// * `new_playlist` - The new playlist
+	/// * `conn` - A mutable reference to a database connection
+	/// 	
+	/// # Returns
+	/// 
+	/// * `Result<(), Box<dyn Error>>` - A result indicating success with the new playlist, or an error
+	/// 
+	#[cfg(feature = "ssr")]
+	pub fn create_playlist(new_playlist: Playlist, conn: &mut PgPooledConn) -> Result<(), Box<dyn Error>> {
+		use crate::schema::playlists::dsl::*;
+		
+		let new_playlist = Playlist {
+			..new_playlist
+		};
+
+		diesel::insert_into(playlists)
+			.values(&new_playlist)
+			.execute(conn)?;
+
+		Ok(())
+	}
+
+	/// Add a song to this playlist in the database
+	/// 
+	/// The 'id' field of this playlist must be present (Some) to add a song
+	/// 
+	/// # Arguments
+	/// 
+	/// * `new_song_id` - The id of the song to add to this playlist
+	/// * `conn` - A mutable reference to a database connection
+	/// 
+	/// # Returns
+	/// 
+	/// * `Result<(), Box<dyn Error>>` - A result indicating success with an empty value, or an error
+	/// 
+	#[cfg(feature = "ssr")]
+	pub fn add_song(self: &Self, new_song_id: i32, conn: &mut PgPooledConn) -> Result<(), Box<dyn Error>> {
+		use crate::schema::playlist_songs::dsl::*;
+
+		let my_id = self.id.ok_or("Playlist id must be present (Some) to add a song")?;
+
+		diesel::insert_into(playlist_songs)
+			.values((playlist_id.eq(my_id), song_id.eq(new_song_id)))
+			.execute(conn)?;
+
+		Ok(())
+	}
+
+	/// Get songs by this playlist from the database
+	/// 
+	/// The 'id' field of this playlist must be present (Some) to get songs
 	/// 
 	/// # Arguments
 	/// 
@ -591,38 +368,23 @@ impl Song {
 	/// 
 	/// # Returns
 	/// 
-	/// * `Result<Option<Album>, Box<dyn Error>>` - A result indicating success with an album, or None if
-	/// the song does not have an album, or an error
+	/// * `Result<Vec<Song>, Box<dyn Error>>` - A result indicating success with a vector of songs, or an error
 	/// 
 	#[cfg(feature = "ssr")]
-	pub fn get_album(self: &Self, conn: &mut PgPooledConn) -> Result<Option<Album>, Box<dyn Error>> {
-		use crate::schema::albums::dsl::*;
+	pub fn get_songs(self: &Self, conn: &mut PgPooledConn) -> Result<Vec<Song>, Box<dyn Error>> {
+		use crate::schema::songs::dsl::*;
+		use crate::schema::playlist_songs::dsl::*;

-		if let Some(album_id) = self.album_id {
-			let my_album = albums
-				.filter(id.eq(album_id))
-				.first::<Album>(conn)?;
+		let my_id = self.id.ok_or("Playlist id must be present (Some) to get songs")?;

-			Ok(Some(my_album))
-		} else {
-			Ok(None)
+		let my_songs = songs
+			.inner_join(playlist_songs)
+			.filter(playlist_id.eq(my_id))
+			.select(songs::all_columns())
+			.load(conn)?;
+
+		Ok(my_songs)
 	}
-	}
-}

-/// Model for a history entry
-#[cfg_attr(feature = "ssr", derive(Queryable, Selectable, Insertable))]
-#[cfg_attr(feature = "ssr", diesel(table_name = crate::schema::song_history))]
-#[cfg_attr(feature = "ssr", diesel(check_for_backend(diesel::pg::Pg)))]
-#[derive(Serialize, Deserialize)]
-pub struct HistoryEntry {
-	/// A unique id for the history entry
-	#[cfg_attr(feature = "ssr", diesel(deserialize_as = i32))]
-	pub id: Option<i32>,
-	/// The id of the user who listened to the song
-	pub user_id: i32,
-	/// The date the song was listened to
-	pub date: SystemTime,
-	/// The id of the song that was listened to
-	pub song_id: i32,
+
 }
--- a/src/pages/login.rs
+++ b/src/pages/login.rs
@ -73,9 +73,7 @@ pub fn Login() -> impl IntoView {
                        <i></i>
                        <Show
                            when=move || {show_password() == false}
-                            fallback=move || view!{ <button on:click=toggle_password class="login-password-visibility">
-                                                  <Icon icon=icondata::AiEyeInvisibleFilled />
-                                               </button> /> }
+                            fallback=move || view!{ <button on:click=toggle_password class="login-password-visibility"><Icon icon=icondata::AiEyeInvisibleFilled /></button> /> }
                        >
                            <button on:click=toggle_password class="login-password-visibility">
                                <Icon icon=icondata::AiEyeFilled />
--- a/src/pages/signup.rs
+++ b/src/pages/signup.rs
@ -25,7 +25,6 @@ pub fn Signup() -> impl IntoView {
            email: email.get(),
            password: Some(password.get()),
            created_at: None,
-            admin: false,
        };
        log!("new user: {:?}", new_user);

--- a/src/playbar.rs
+++ b/src/playbar.rs
@ -1,14 +1,9 @@
-use crate::models::Artist;
 use crate::playstatus::PlayStatus;
-use crate::songdata::SongData;
-use crate::api::songs;
 use leptos::ev::MouseEvent;
 use leptos::html::{Audio, Div};
 use leptos::leptos_dom::*;
-use leptos_meta::Title;
 use leptos::*;
 use leptos_icons::*;
-use leptos_use::{utils::Pausable, use_interval_fn};

 /// Width and height of the forward/backward skip buttons
 const SKIP_BTN_SIZE: &str = "3.5em";
@ -24,9 +19,6 @@ const MIN_SKIP_BACK_TIME: f64 = 5.0;
 /// How many seconds to skip forward/backward when the user presses the arrow keys
 const ARROW_KEY_SKIP_TIME: f64 = 5.0;

-/// Threshold in seconds for considering when the user has listened to a song, for adding it to the history
-const HISTORY_LISTEN_THRESHOLD: u64 = MIN_SKIP_BACK_TIME as u64;
-
 // TODO Handle errors better, when getting audio HTML element and when playing/pausing audio

 /// Get the current time and duration of the current song, if available
@ -251,149 +243,37 @@ fn PlayDuration(elapsed_secs: MaybeSignal<i64>, total_secs: MaybeSignal<i64>) ->
 fn MediaInfo(status: RwSignal<PlayStatus>) -> impl IntoView {
    let name = Signal::derive(move || {
 		status.with(|status| {
-			status.queue.front().map_or("No media playing".into(), |song| song.title.clone())
+			status.queue.front().map_or("No media playing".into(), |song| song.name.clone())
 		})
    });

 	let artist = Signal::derive(move || {
 		status.with(|status| {
-			status.queue.front().map_or("".into(), |song| format!("{}", Artist::display_list(&song.artists)))
+			status.queue.front().map_or("".into(), |song| song.artist.clone())
 		})
 	});

 	let album = Signal::derive(move || {
 		status.with(|status| {
-			status.queue.front().map_or("".into(), |song|
-                song.album.as_ref().map_or("".into(), |album| album.title.clone()))
+			status.queue.front().map_or("".into(), |song| song.album.clone())
 		})
 	});

 	let image = Signal::derive(move || {
 		status.with(|status| {
-			status.queue.front().map_or("/images/placeholders/MusicPlaceholder.svg".into(),
-                |song| song.image_path.clone())
+			// TODO Use some default / unknown image?
+			status.queue.front().map_or("".into(), |song| song.image_path.clone())
 		})
 	});

    view! {
+        <div class="media-info">
        <img class="media-info-img" align="left" src={image}/>
        <div class="media-info-text">
            {name}
            <br/>
            {artist} - {album}
        </div>
-    }
-}
-
-/// The like and dislike buttons
-#[component]
-fn LikeDislike(status: RwSignal<PlayStatus>) -> impl IntoView {
-    let like_icon = Signal::derive(move || {
-        status.with(|status| {
-            match status.queue.front() {
-                Some(SongData { like_dislike: Some((true, _)), .. }) => icondata::TbThumbUpFilled,
-                _ => icondata::TbThumbUp,
-            }
-        })
-    });
-
-    let dislike_icon = Signal::derive(move || {
-        status.with(|status| {
-            match status.queue.front() {
-                Some(SongData { like_dislike: Some((_, true)), .. }) => icondata::TbThumbDownFilled,
-                _ => icondata::TbThumbDown,
-            }
-        })
-    });
-
-    let toggle_like = move |_| {
-        status.update(|status| {
-            match status.queue.front_mut() {
-                Some(SongData { id, like_dislike: Some((liked, disliked)), .. }) => {
-                    *liked = !*liked;
-
-                    if *liked {
-                        *disliked = false;
-                    }
-
-                    let id = *id;
-                    let liked = *liked;
-                    spawn_local(async move {
-                        if let Err(e) = songs::set_like_song(id, liked).await {
-                            error!("Error liking song: {:?}", e);
-                        }
-                    });
-                },
-                Some(SongData { id, like_dislike, .. }) => {
-                    // This arm should only be reached if like_dislike is None
-                    // In this case, the buttons will show up not filled, indicating that the song is not
-                    // liked or disliked. Therefore, clicking the like button should like the song.
-
-                    *like_dislike = Some((true, false));
-
-                    let id = *id;
-                    spawn_local(async move {
-                        if let Err(e) = songs::set_like_song(id, true).await {
-                            error!("Error liking song: {:?}", e);
-                        }
-                    });
-                },
-                _ => {
-                    log!("Unable to like song: No song in queue");
-                    return;
-                }
-            }
-        });
-    };
-
-    let toggle_dislike = move |_| {
-        status.update(|status| {
-            match status.queue.front_mut() {
-                Some(SongData { id, like_dislike: Some((liked, disliked)), .. }) => {
-                    *disliked = !*disliked;
-
-                    if *disliked {
-                        *liked = false;
-                    }
-
-                    let id = *id;
-                    let disliked = *disliked;
-                    spawn_local(async move {
-                        if let Err(e) = songs::set_dislike_song(id, disliked).await {
-                            error!("Error disliking song: {:?}", e);
-                        }
-                    });
-                },
-                Some(SongData { id, like_dislike, .. }) => {
-                    // This arm should only be reached if like_dislike is None
-                    // In this case, the buttons will show up not filled, indicating that the song is not
-                    // liked or disliked. Therefore, clicking the dislike button should dislike the song.
-                    
-                    *like_dislike = Some((false, true));
-
-                    let id = *id;
-                    spawn_local(async move { 
-                        if let Err(e) = songs::set_dislike_song(id, true).await {
-                            error!("Error disliking song: {:?}", e);
-                        }
-                    });
-                },
-                _ => {
-                    log!("Unable to dislike song: No song in queue");
-                    return;
-                }
-            }
-        });
-    };
-
-    view! {
-        <div class="like-dislike">
-            <button on:click=toggle_dislike>
-                <Icon class="controlbtn hmirror" width=SKIP_BTN_SIZE height=SKIP_BTN_SIZE icon=dislike_icon />
-            </button>
-            <button on:click=toggle_like>
-                <Icon class="controlbtn" width=SKIP_BTN_SIZE height=SKIP_BTN_SIZE icon=like_icon />
-            </button>
        </div>
    }
 }
@ -461,21 +341,6 @@ fn QueueToggle(status: RwSignal<PlayStatus>) -> impl IntoView {
    }
 }

-/// Renders the title of the page based on the currently playing song
-#[component]
-pub fn CustomTitle(play_status: RwSignal<PlayStatus>) -> impl IntoView {
-    let title = create_memo(move |_| {
-        play_status.with(|play_status| {
-            play_status.queue.front().map_or("LibreTunes".to_string(), |song_data| {
-                    format!("{} - {} | {}",song_data.title.clone(),Artist::display_list(&song_data.artists), "LibreTunes")
-                })
-            })
-        });
-    view! {
-        <Title text=title />
-    }
-}
-
 /// The main play bar component, containing the progress bar, media info, play controls, and play duration
 #[component]
 pub fn PlayBar(status: RwSignal<PlayStatus>) -> impl IntoView {
@ -535,7 +400,7 @@ pub fn PlayBar(status: RwSignal<PlayStatus>) -> impl IntoView {
        status.with_untracked(|status| {
            // Start playing the first song in the queue, if available
            if let Some(song) = status.queue.front() {
-                log!("Starting playing with song: {}", song.title);
+                log!("Starting playing with song: {}", song.name);

                // Don't use the set_play_src / set_playing helper function
                // here because we already have access to the audio element
@ -552,39 +417,6 @@ pub fn PlayBar(status: RwSignal<PlayStatus>) -> impl IntoView {
        });
    });

-    let current_song_id = create_memo(move |_| {
-        status.with(|status| {
-            status.queue.front().map(|song| song.id)
-        })
-    });
-
-    // Track the last song that was added to the history to prevent duplicates
-    let last_history_song_id = create_rw_signal(None);
-
-    let Pausable { 
-        is_active: hist_timeout_pending,
-        resume: resume_hist_timeout,
-        pause: pause_hist_timeout,
-        ..
-    } = use_interval_fn(move || {
-        if last_history_song_id.get_untracked() == current_song_id.get_untracked() {
-            return;
-        }
-
-        if let Some(current_song_id) = current_song_id.get_untracked() {
-            last_history_song_id.set(Some(current_song_id));
-
-            spawn_local(async move {
-                if let Err(e) = crate::api::history::add_history(current_song_id).await {
-                    error!("Error adding song {} to history: {}", current_song_id, e);
-                }
-            });
-        }
-    }, HISTORY_LISTEN_THRESHOLD * 1000);
-
-    // Initially pause the timeout, since the audio starts off paused
-    pause_hist_timeout();
-
    let on_play = move |_| {
        log!("Audio playing");
        status.update(|status| status.playing = true);
@ -593,7 +425,6 @@ pub fn PlayBar(status: RwSignal<PlayStatus>) -> impl IntoView {
    let on_pause = move |_| {
        log!("Audio paused");
        status.update(|status| status.playing = false);
-        pause_hist_timeout();
    };

    let on_time_update = move |_| {
@ -611,11 +442,6 @@ pub fn PlayBar(status: RwSignal<PlayStatus>) -> impl IntoView {
                error!("Unable to update time: Audio element not available");
            }
        });
-
-        // If time is updated, audio is playing, so make sure the history timeout is running
-        if !hist_timeout_pending.get_untracked() {
-            resume_hist_timeout();
-        }
    };

    let on_end = move |_| {
@ -627,7 +453,7 @@ pub fn PlayBar(status: RwSignal<PlayStatus>) -> impl IntoView {
            let prev_song = status.queue.pop_front();

            if let Some(prev_song) = prev_song {
-                log!("Adding song to history: {}", prev_song.title);
+                log!("Adding song to history: {}", prev_song.name);
                status.history.push_back(prev_song);
            } else {
                log!("Queue empty, no previous song to add to history");
@ -660,10 +486,7 @@ pub fn PlayBar(status: RwSignal<PlayStatus>) -> impl IntoView {
            on:timeupdate=on_time_update on:ended=on_end type="audio/mpeg" />
        <div class="playbar">
        <ProgressBar percentage=percentage.into() status=status />
-        <div class="playbar-left-group">
        <MediaInfo status=status />
-        <LikeDislike status=status />
-        </div>
        <PlayControls status=status />
        <PlayDuration elapsed_secs=elapsed_secs.into() total_secs=total_secs.into() />
        <QueueToggle status=status />
--- a/src/queue.rs
+++ b/src/queue.rs
@ -1,4 +1,3 @@
-use crate::models::Artist;
 use crate::playstatus::PlayStatus;
 use crate::song::Song;
 use leptos::ev::MouseEvent;
@ -99,7 +98,7 @@ pub fn Queue(status: RwSignal<PlayStatus>) -> impl IntoView {
 									on:dragenter=move |e: DragEvent| on_drag_enter(e, index)
 									on:dragover=on_drag_over
 								>
-									<Song song_image_path=song.image_path.clone() song_title=song.title.clone() song_artist=Artist::display_list(&song.artists) />
+									<Song song_image_path=song.image_path.clone() song_title=song.name.clone() song_artist=song.artist.clone() />
 									<Show
 										when=move || index != 0
 										fallback=|| view!{
--- a/src/schema.rs
+++ b/src/schema.rs
@ -12,7 +12,6 @@ diesel::table! {
        id -> Int4,
        title -> Varchar,
        release_date -> Nullable<Date>,
-        image_path -> Nullable<Varchar>,
    }
 }

@ -24,18 +23,18 @@ diesel::table! {
 }

 diesel::table! {
-    friend_requests (from_id, to_id) {
-        created_at -> Timestamp,
-        from_id -> Int4,
-        to_id -> Int4,
+    playlist_songs (playlist_id, song_id) {
+        playlist_id -> Int4,
+        song_id -> Int4,
+        position -> Int4,
    }
 }

 diesel::table! {
-    friendships (friend_1_id, friend_2_id) {
-        created_at -> Timestamp,
-        friend_1_id -> Int4,
-        friend_2_id -> Int4,
+    playlists (id) {
+        id -> Int4,
+        name -> Varchar,
+        user_id -> Int4,
    }
 }

@ -46,29 +45,6 @@ diesel::table! {
    }
 }

-diesel::table! {
-    song_dislikes (song_id, user_id) {
-        song_id -> Int4,
-        user_id -> Int4,
-    }
-}
-
-diesel::table! {
-    song_history (id) {
-        id -> Int4,
-        user_id -> Int4,
-        date -> Timestamp,
-        song_id -> Int4,
-    }
-}
-
-diesel::table! {
-    song_likes (song_id, user_id) {
-        song_id -> Int4,
-        user_id -> Int4,
-    }
-}
-
 diesel::table! {
    songs (id) {
        id -> Int4,
@ -89,32 +65,25 @@ diesel::table! {
        email -> Varchar,
        password -> Varchar,
        created_at -> Timestamp,
-        admin -> Bool,
    }
 }

 diesel::joinable!(album_artists -> albums (album_id));
 diesel::joinable!(album_artists -> artists (artist_id));
+diesel::joinable!(playlist_songs -> playlists (playlist_id));
+diesel::joinable!(playlist_songs -> songs (song_id));
+diesel::joinable!(playlists -> users (user_id));
 diesel::joinable!(song_artists -> artists (artist_id));
 diesel::joinable!(song_artists -> songs (song_id));
-diesel::joinable!(song_dislikes -> songs (song_id));
-diesel::joinable!(song_dislikes -> users (user_id));
-diesel::joinable!(song_history -> songs (song_id));
-diesel::joinable!(song_history -> users (user_id));
-diesel::joinable!(song_likes -> songs (song_id));
-diesel::joinable!(song_likes -> users (user_id));
 diesel::joinable!(songs -> albums (album_id));

 diesel::allow_tables_to_appear_in_same_query!(
    album_artists,
    albums,
    artists,
-    friend_requests,
-    friendships,
+    playlist_songs,
+    playlists,
    song_artists,
-    song_dislikes,
-    song_history,
-    song_likes,
    songs,
    users,
 );
--- a/src/search.rs
+++ b/src/search.rs
@ -102,7 +102,7 @@ pub async fn search(query: String, limit: i64) -> Result<(Vec<Album>, Vec<Artist
 	let artists = search_artists(query.clone(), limit);
 	let songs = search_songs(query.clone(), limit);

-	use tokio::join;
+	use futures::join;

 	let (albums, artists, songs) = join!(albums, artists, songs);
 	Ok((albums?, artists?, songs?))
--- a/src/songdata.rs
+++ b/src/songdata.rs
@ -1,81 +1,16 @@
-use crate::models::{Album, Artist, Song};
-use crate::components::dashboard_tile::DashboardTile;
-
-use time::Date;
-
 /// Holds information about a song
-/// 
-/// Intended to be used in the front-end, as it includes artist and album objects, rather than just their ids.
-#[derive(Clone)]
+#[derive(Debug, Clone)]
 pub struct SongData {
-	/// Song id
-	pub id: i32,
 	/// Song name
-	pub title: String,
-	/// Song artists
-	pub artists: Vec<Artist>,
+	pub name: String,
+	/// Song artist
+	pub artist: String,
 	/// Song album
-	pub album: Option<Album>,
-	/// The track number of the song on the album
-	pub track: Option<i32>,
-	/// The duration of the song in seconds
-	pub duration: i32,
-	/// The song's release date
-	pub release_date: Option<Date>,
+	pub album: String,
 	/// Path to song file, relative to the root of the web server.
 	/// For example, `"/assets/audio/Song.mp3"`
 	pub song_path: String,
 	/// Path to song image, relative to the root of the web server.
 	/// For example, `"/assets/images/Song.jpg"`
 	pub image_path: String,
-	/// Whether the song is liked by the user
-	pub like_dislike: Option<(bool, bool)>,
-}
-
-
-impl TryInto<Song> for SongData {
-	type Error = Box<dyn std::error::Error>;
-
-	/// Convert a SongData object into a Song object
-	/// 
-	/// The SongData/Song conversions are also not truly reversible,
-	/// due to the way the image_path data is handled.
-	fn try_into(self) -> Result<Song, Self::Error> {
-		Ok(Song {
-			id: Some(self.id),
-			title: self.title,
-			album_id: self.album.map(|album|
-				album.id.ok_or("Album id must be present (Some) to convert to Song")).transpose()?,
-			track: self.track,
-			duration: self.duration,
-			release_date: self.release_date,
-			storage_path: self.song_path,
-
-			// Note that if the source of the image_path was the album, the image_path
-			// will be set to the album's image_path instead of None
-			image_path: if self.image_path == "/assets/images/placeholder.jpg" {
-				None
-			} else {
-				Some(self.image_path)
-			},
-		})
-	}
-}
-
-impl DashboardTile for SongData {
-	fn image_path(&self) -> String {
-		self.image_path.clone()
-	}
-
-	fn title(&self) -> String {
-		self.title.clone()
-	}
-
-	fn link(&self) -> String {
-		format!("/song/{}", self.id)
-	}
-
-	fn description(&self) -> Option<String> {
-		Some(format!("Song • {}", Artist::display_list(&self.artists)))
-	}
 }
--- a/src/upload.rs
+++ b/src/upload.rs
@ -1,294 +0,0 @@
-use leptos::*;
-use server_fn::codec::{MultipartData, MultipartFormData};
-
-use cfg_if::cfg_if;
-
-cfg_if! {
-	if #[cfg(feature = "ssr")] {
-		use multer::Field;
-		use crate::database::get_db_conn;
-		use diesel::prelude::*;
-		use log::*;
-		use server_fn::error::NoCustomError;
-		use time::Date;
-	}
-}
-
-/// Extract the text from a multipart field
-#[cfg(feature = "ssr")]
-async fn extract_field(field: Field<'static>) -> Result<String, ServerFnError> {
-	let field = match field.text().await {
-		Ok(field) => field,
-		Err(e) => Err(ServerFnError::<NoCustomError>::ServerError(format!("Error reading field: {}", e)))?,
-	};
-
-	Ok(field)
-}
-
-/// Validate the artist ids in a multipart field
-/// Expects a field with a comma-separated list of artist ids, and ensures each is a valid artist id in the database
-#[cfg(feature = "ssr")]
-async fn validate_artist_ids(artist_ids: Field<'static>) -> Result<Vec<i32>, ServerFnError> {
-    use crate::models::Artist;
-	use diesel::result::Error::NotFound;
-
-	// Extract the artist id from the field
-	match artist_ids.text().await {
-		Ok(artist_ids) => {
-			let artist_ids = artist_ids.trim_end_matches(',').split(',');
-
-			artist_ids.filter(|artist_id| !artist_id.is_empty()).map(|artist_id| {
-				// Parse the artist id as an integer
-				if let Ok(artist_id) = artist_id.parse::<i32>() {
-					// Check if the artist exists
-					let db_con = &mut get_db_conn();
-					let artist = crate::schema::artists::dsl::artists.find(artist_id).first::<Artist>(db_con);
-
-					match artist {
-						Ok(_) => Ok(artist_id),
-						Err(NotFound) => Err(ServerFnError::<NoCustomError>::
-							ServerError("Artist does not exist".to_string())),
-						Err(e) => Err(ServerFnError::<NoCustomError>::
-							ServerError(format!("Error finding artist id: {}", e))),
-					}
-				} else {
-					Err(ServerFnError::<NoCustomError>::ServerError("Error parsing artist id".to_string()))
-				}
-			}).collect()
-		},
-
-		Err(e) => Err(ServerFnError::<NoCustomError>::ServerError(format!("Error reading artist id: {}", e))),
-	}
-}
-
-/// Validate the album id in a multipart field
-/// Expects a field with an album id, and ensures it is a valid album id in the database
-#[cfg(feature = "ssr")]
-async fn validate_album_id(album_id: Field<'static>) -> Result<Option<i32>, ServerFnError> {
-	use crate::models::Album;
-	use diesel::result::Error::NotFound;
-
-	// Extract the album id from the field
-	match album_id.text().await {
-		Ok(album_id) => {
-			if album_id.is_empty() {
-				return Ok(None);
-			}
-
-			// Parse the album id as an integer
-			if let Ok(album_id) = album_id.parse::<i32>() {
-				// Check if the album exists
-				let db_con = &mut get_db_conn();
-				let album = crate::schema::albums::dsl::albums.find(album_id).first::<Album>(db_con);
-
-				match album {
-					Ok(_) => Ok(Some(album_id)),
-					Err(NotFound) => Err(ServerFnError::<NoCustomError>::
-						ServerError("Album does not exist".to_string())),
-					Err(e) => Err(ServerFnError::<NoCustomError>::
-						ServerError(format!("Error finding album id: {}", e))),
-				}
-			} else {
-				Err(ServerFnError::<NoCustomError>::ServerError("Error parsing album id".to_string()))
-			}
-		},
-		Err(e) => Err(ServerFnError::<NoCustomError>::ServerError(format!("Error reading album id: {}", e))),
-	}
-}
-
-/// Validate the track number in a multipart field
-/// Expects a field with a track number, and ensures it is a valid track number (non-negative integer)
-#[cfg(feature = "ssr")]
-async fn validate_track_number(track_number: Field<'static>) -> Result<Option<i32>, ServerFnError> {
-	match track_number.text().await {
-		Ok(track_number) => {
-			if track_number.is_empty() {
-				return Ok(None);
-			}
-
-			if let Ok(track_number) = track_number.parse::<i32>() {
-				if track_number < 0 {
-					return Err(ServerFnError::<NoCustomError>::
-						ServerError("Track number must be positive or 0".to_string()));
-				} else {
-					Ok(Some(track_number))
-				}
-			} else {
-				return Err(ServerFnError::<NoCustomError>::ServerError("Error parsing track number".to_string()));
-			}
-		},
-		Err(e) => Err(ServerFnError::<NoCustomError>::ServerError(format!("Error reading track number: {}", e)))?,
-	}
-}
-
-/// Validate the release date in a multipart field
-/// Expects a field with a release date, and ensures it is a valid date in the format [year]-[month]-[day]
-#[cfg(feature = "ssr")]
-async fn validate_release_date(release_date: Field<'static>) -> Result<Option<Date>, ServerFnError> {
-	match release_date.text().await {
-		Ok(release_date) => {
-			if release_date.trim().is_empty() {
-				return Ok(None);
-			}
-
-			let date_format = time::macros::format_description!("[year]-[month]-[day]");
-			let release_date = Date::parse(&release_date.trim(), date_format);
-
-			match release_date {
-				Ok(release_date) => Ok(Some(release_date)),
-				Err(_) => Err(ServerFnError::<NoCustomError>::ServerError("Invalid release date".to_string())),
-			}
-		},
-		Err(e) => Err(ServerFnError::<NoCustomError>::ServerError(format!("Error reading release date: {}", e))),
-	}
-}
-
-/// Handle the file upload form
-#[server(input = MultipartFormData, endpoint = "/upload")]
-pub async fn upload(data: MultipartData) -> Result<(), ServerFnError> {
-	// Safe to unwrap - "On the server side, this always returns Some(_). On the client side, always returns None."
-	let mut data = data.into_inner().unwrap();
-
-	let mut title = None;
-	let mut artist_ids = None;
-	let mut album_id = None;
-	let mut track = None;
-	let mut release_date = None;
-	let mut file_name = None;
-	let mut duration = None;
-
-	// Fetch the fields from the form data
-	while let Ok(Some(mut field)) = data.next_field().await {
-		let name = field.name().unwrap_or_default().to_string();
-
-		match name.as_str() {
-			"title" => { title = Some(extract_field(field).await?); },
-			"artist_ids" => { artist_ids = Some(validate_artist_ids(field).await?); },
-			"album_id" => { album_id = Some(validate_album_id(field).await?); },
-			"track_number" => { track = Some(validate_track_number(field).await?); },
-			"release_date" => { release_date = Some(validate_release_date(field).await?); },
-			"file" => {
-				use symphonia::core::codecs::CODEC_TYPE_MP3;
-				use crate::util::audio::extract_metadata;
-				use std::fs::OpenOptions;
-				use std::io::{Seek, Write};
-
-				// Some logging is done here where there is high potential for bugs / failures,
-				// or behavior that we may wish to change in the future
-
-				// Create file name
-				let title = title.clone().ok_or(ServerFnError::<NoCustomError>::
-					ServerError("Title field required and must precede file field".to_string()))?;
-
-				let clean_title = title.replace(" ", "_").replace("/", "_");
-				let date_format = time::macros::format_description!("[year]-[month]-[day]_[hour]:[minute]:[second]");
-				let date_str = time::OffsetDateTime::now_utc().format(date_format).unwrap_or_default();
-				let upload_path = format!("assets/audio/upload-{}_{}.mp3", date_str, clean_title);
-				file_name = Some(format!("upload-{}_{}.mp3", date_str, clean_title));
-
-				debug!("Saving uploaded file {}", upload_path);
-
-				// Save file to disk
-				// Use these open options to create the file, write to it, then read from it
-				let mut file = OpenOptions::new()
-					.read(true)
-					.write(true)
-					.create(true)
-					.open(upload_path.clone())?;
-
-				while let Some(chunk) = field.chunk().await? {
-					file.write(&chunk)?;
-				}
-
-				file.flush()?;
-
-				// Rewind the file so the duration can be measured
-				file.rewind()?;
-
-				// Get the codec and duration of the file
-				let (file_codec, file_duration) = extract_metadata(file)
-					.map_err(|e| {
-						let msg = format!("Error measuring duration of audio file {}: {}", upload_path, e);
-						warn!("{}", msg);
-						ServerFnError::<NoCustomError>::ServerError(msg)
-					})?;
-
-				if file_codec != CODEC_TYPE_MP3 {
-					let msg = format!("Invalid uploaded audio file codec: {}", file_codec);
-					warn!("{}", msg);
-					return Err(ServerFnError::<NoCustomError>::ServerError(msg));
-				}
-
-				duration = Some(file_duration);
-			},
-			_ => {
-				warn!("Unknown file upload field: {}", name);
-			}
-		}
-	}
-
-	// Unwrap mandatory fields
-	let title = title.ok_or(ServerFnError::<NoCustomError>::ServerError("Missing title".to_string()))?;
-	let artist_ids = artist_ids.unwrap_or(vec![]);
-	let file_name = file_name.ok_or(ServerFnError::<NoCustomError>::ServerError("Missing file".to_string()))?;
-	let duration = duration.ok_or(ServerFnError::<NoCustomError>::ServerError("Missing duration".to_string()))?;
-	let duration = i32::try_from(duration).map_err(|e| ServerFnError::<NoCustomError>::
-		ServerError(format!("Error converting duration to i32: {}", e)))?;
-
-	let album_id = album_id.unwrap_or(None);
-	let track = track.unwrap_or(None);
-	let release_date = release_date.unwrap_or(None);
-
-	if album_id.is_some() != track.is_some() {
-		return Err(ServerFnError::<NoCustomError>
-			::ServerError("Album id and track number must both be present or both be absent".to_string()));
-	}
-
-	// Create the song
-	use crate::models::Song;
-	let song = Song {
-		id: None,
-		title,
-		album_id,
-		track,
-		duration,
-		release_date,
-		storage_path: file_name,
-		image_path: None,
-	};
-
-	// Save the song to the database
-	let db_con = &mut get_db_conn();
-	let song = song.insert_into(crate::schema::songs::table)
-		.get_result::<Song>(db_con)
-		.map_err(|e| {
-			let msg = format!("Error saving song to database: {}", e);
-			warn!("{}", msg);
-			ServerFnError::<NoCustomError>::ServerError(msg)
-		})?;
-
-	// Save the song's artists to the database
-	let song_id = song.id.ok_or_else(|| {
-		let msg = "Error saving song to database: song id not found after insertion".to_string();
-		warn!("{}", msg);
-		ServerFnError::<NoCustomError>::ServerError(msg)
-	})?;
-
-	use crate::schema::song_artists;
-	use diesel::ExpressionMethods;
-
-	let artist_ids = artist_ids.into_iter().map(|artist_id| {
-		(song_artists::song_id.eq(song_id), song_artists::artist_id.eq(artist_id))
-	}).collect::<Vec<_>>();
-
-	diesel::insert_into(crate::schema::song_artists::table)
-		.values(&artist_ids)
-		.execute(db_con)
-		.map_err(|e| {
-			let msg = format!("Error saving song artists to database: {}", e);
-			warn!("{}", msg);
-			ServerFnError::<NoCustomError>::ServerError(msg)
-		})?;
-
-	Ok(())
-}
--- a/src/util/audio.rs
+++ b/src/util/audio.rs
@ -1,37 +0,0 @@
-use symphonia::core::codecs::CodecType;
-use symphonia::core::formats::FormatOptions;
-use symphonia::core::io::MediaSourceStream;
-use symphonia::core::meta::MetadataOptions;
-use symphonia::core::probe::Hint;
-use std::fs::File;
-
-/// Extract the codec and duration of an audio file
-/// This is combined into one function because the file object will be consumed
-pub fn extract_metadata(file: File) -> Result<(CodecType, u64), Box<dyn std::error::Error>> {
-	let source_stream = MediaSourceStream::new(Box::new(file), Default::default());
-
-	let hint = Hint::new();
-	let format_opts = FormatOptions::default();
-	let metadata_opts = MetadataOptions::default();
-
-	let probe = symphonia::default::get_probe().format(&hint, source_stream, &format_opts, &metadata_opts)?;
-	let reader = probe.format;
-
-	if reader.tracks().len() != 1 {
-		return Err(format!("Expected 1 track, found {}", reader.tracks().len()).into())
-	}
-
-	let track = &reader.tracks()[0];
-
-	let time_base = track.codec_params.time_base.ok_or("Missing time base")?;
-	let duration = track.codec_params.n_frames
-		.map(|frames| track.codec_params.start_ts + frames)
-		.ok_or("Missing number of frames")?;
-
-	let duration = duration
-		.checked_mul(time_base.numer as u64)
-		.and_then(|v| v.checked_div(time_base.denom as u64))
-		.ok_or("Overflow while computing duration")?;
-
-	Ok((track.codec_params.codec, duration))
-}
--- a/src/util/mod.rs
+++ b/src/util/mod.rs
@ -1,7 +0,0 @@
-use cfg_if::cfg_if;
-
-cfg_if! {
-	if #[cfg(feature = "ssr")] {
-		pub mod audio;
-	}
-}
--- a/style/dashboard_row.scss
+++ b/style/dashboard_row.scss
@ -1,45 +0,0 @@
-.dashboard-tile-row {
-	.dashboard-tile-row-title-row {
-		display: flex;
-
-		.dashboard-tile-row-scroll-btn {
-			margin-left: auto;
-			margin-top: auto;
-			margin-bottom: auto;
-
-			button {
-				background-color: transparent;
-				border: none;
-				
-				.dashboard-tile-row-scroll {
-					color: $text-controls-color;
-					width: 2.5rem;
-					height: 2.5rem;
-				}
-				
-				.dashboard-tile-row-scroll:hover {
-					color: $controls-hover-color;
-				}
-				
-				.dashboard-tile-row-scroll:active {
-					color: $controls-click-color;
-				}
-			}
-		}
-	}
-
-	ul {
-		display: flex;
-		overflow-x: hidden;
-		scroll-behavior: smooth;
-		margin-left: 40px;
-		padding-inline-start: 0;
-
-		li {
-			list-style-type: none;
-	  	}
-
-		-webkit-mask-image: linear-gradient(90deg, #000000 95%, transparent);
-		mask-image: linear-gradient(90deg, #000000 95%, transparent);
-	}
-}
--- a/style/dashboard_tile.scss
+++ b/style/dashboard_tile.scss
@ -1,28 +0,0 @@
-.dashboard-tile {
-	img {
-		width: $dashboard-tile-size;
-		height: $dashboard-tile-size;
-		border-radius: 7px;
-		margin-right: 20px;
-	}
-
-	a {
-		text-decoration: none;
-		color: $text-controls-color;
-	}
-
-	p.dashboard-tile-title {
-		font-size: 16px;
-		font-weight: bold;
-		margin: 0;
-		padding: 0;
-	}
-
-	p.dashboard-tile-description {
-		font-size: 12px;
-		margin: 0;
-		padding: 0;
-	}
-	
-	margin-right: 10px;
-}
--- a/style/main.scss
+++ b/style/main.scss
@ -8,10 +8,6 @@
@import 'home.scss';
@import 'search.scss';
@import 'personal.scss';
-@import 'dashboard_tile.scss';
-@import 'dashboard_row.scss';
-@import 'upload.scss';
-@import 'song_list.scss';

 body {
  font-family: sans-serif;
--- a/style/playbar.scss
+++ b/style/playbar.scss
@ -39,12 +39,15 @@
 		}
 	}

-	.playbar-left-group {
-		display: flex;
+	.media-info {
+		font-size: 16;
+		margin-left: 10px;
+
 		position: absolute;
 		top: 50%;
 		transform: translateY(-50%);
-		margin-left: 10px;
+		display: grid;
+		grid-template-columns: 50px 1fr;

 		.media-info-img {
 			width: 50px;
@ -54,10 +57,6 @@
 			text-align: left;
 			margin-left: 10px;
 		}
-
-		.like-dislike {
-			margin-left: 20px;
-		}
 	}

 	.playcontrols {
@ -65,30 +64,8 @@
 		flex-direction: row;
 		justify-content: center;
 		align-items: center;
-	}
-
-	.playduration {
-		position: absolute;
-		right: 10px;
-		top: 13px;
-	}
-
-	.queue-toggle {
-		position: absolute;
-		bottom: 13px;
-		top: 13px;
-		right: 90px;
-	}

 		button {
-		.hmirror {
-			-moz-transform: scale(-1, 1);
-			-webkit-transform: scale(-1, 1);
-			-o-transform: scale(-1, 1);
-			-ms-transform: scale(-1, 1);
-			transform: scale(-1, 1);
-		}
-
 			.controlbtn {
 				color: $text-controls-color;
 			}
@ -104,4 +81,35 @@
 			background-color: transparent;
 			border: transparent;
 		}
+	}
+
+	.playduration {
+		position: absolute;
+		right: 10px;
+		top: 13px;
+	}
+
+	.queue-toggle {
+		position: absolute;
+		bottom: 13px;
+		top: 13px;
+		right: 90px;
+
+		button {
+			.controlbtn {
+				color: $text-controls-color;
+			}
+
+			.controlbtn:hover {
+				color: $controls-hover-color;
+			}
+
+			.controlbtn:active {
+				color: $controls-click-color;
+			}
+	
+			background-color: transparent;
+			border: transparent;
+		}
+	}
 }
--- a/style/sidebar.scss
+++ b/style/sidebar.scss
@ -4,43 +4,20 @@
  background-color: transparent;
  width: 22rem;
  height: calc(100% - 75px);
-  .sidebar-top-container {
+}
+
+.sidebar-top-container {
  border-radius: 1rem;
  background-color: #1c1c1c;
  height: 9rem;
  margin: 3px;
  padding: 0.1rem 1rem 1rem 1rem;
-    position: relative;
-    .header {
+}
+
+.sidebar-top-container .header {
  font-size: 1.2rem;
-    }
-    .upload-btn {
-      position: absolute;
-      top: 10px;
-      right: 7px;
-      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 {
+}
+.sidebar-top-container .buttons {
  display: flex;
  flex-direction: row;
  font-size: 1.8rem;
@ -48,24 +25,25 @@
  transition: all 0.5s;
  cursor: pointer;
  color: grey;
-      text-decoration: none;
-    }
-    .buttons:hover {
+}
+.sidebar-top-container .buttons:hover {
  color: white;
-    }
-    .buttons:last-child {
+}
+
+.sidebar-top-container .buttons:last-child {
  margin-left: 0.02rem;
  margin-top: 0.5rem;
-    }
-    h1 {
+}
+
+.sidebar-top-container h1 {
  font-size: 0.95rem;
  margin-left: 0.9rem;
  font-weight: 400;
  font-style: $standard-font;
  letter-spacing: 0.5px;
-    }
-  }
-  .sidebar-bottom-container {
+}
+
+.sidebar-bottom-container {
  border-radius: 1rem;
  background-color: #1c1c1c;
  margin: 3px;
@ -73,6 +51,10 @@
  padding: 0.2rem 1rem 1rem 1rem;
  height: calc(100% - 9rem);

+  .sidebar-playlists-container {
+    width: 100%;
+    height: 100%;
+  
    .heading {
      display: flex;
      flex-direction: row;
@ -110,7 +92,252 @@
        background-color: #9e9e9e;
      }
    }
+    .create-playlist-popup-container {
+      display: flex;
+      position: relative;
+      flex-direction: column;
+      // background-color: #1c1c1c;
+      height: 12rem;
+      width: 20rem;
+      border-radius: 2px;
+      padding: 1rem;
+      padding-top: 0.1rem;
+      border: 1px solid grey;
+      position: fixed;
+      top: 40%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      .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;
      }
+      .close-button:hover {
+        transform: scale(1.1);
+        background-color: rgba(255, 255, 255, 0.1);
+      }
+  
+      .close-button:active {
+        transform: scale(0.8);
+      }
+      .header {
+        font-size: 1.2rem;
+        font-weight: 200;
+        margin-bottom: 0.5rem;
+      }
+      .create-playlist-form {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        height: 100%;
+        .name-input {
+          background: transparent;
+          border: none;
+          border-bottom: 1px solid grey;
+          font-size: 1.1rem;
+          color: white;
+          margin-top: 2rem;
+        }
+        .name-input:focus {
+          outline: none;
+        }
+        .create-button {
+          position: absolute;
+          bottom: 0px;
+          width: 5rem;
+          padding: 0.4rem;
+          border-radius: 0.5rem;
+          cursor: pointer;
+        }
+      }
+    }
+    .playlists {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      margin-top: 5px;
+      height: 100%;
+      
+      .playlist {
+        padding: 0;
+        margin: 0;
+        margin-top: 5px;
+        display: flex;
+        flex-direction: row;
+        border: 1px solid grey;
+        height: 3rem;
+        border-radius: 5px;
+        cursor: pointer;
+        transition: background-color 0.3s ease;
+
+        .screen-darkener {
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background-color: rgba(0, 0, 0, 0.5);
+          z-index: 1;
+        }
+
+        .name {
+          font-size: 1rem;
+          margin-left: 1rem;
+          margin-top: 0.5rem;
+          color: white;
+        }
+
+        
+        .playlist-container {
+          background-color: #1c1c1c;
+          width: 40rem;
+          height: 40rem;
+          position: fixed;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          border: 1px solid white;
+          border-radius: 5px;
+          padding: 1rem;
+          padding-top: 0;
+          z-index: 2;
+          display: flex;
+          flex-direction: column;
+  
+          .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;
+          }
+  
+          .close-button:hover {
+            transform: scale(1.1);
+            background-color: rgba(255, 255, 255, 0.1);
+          }
+      
+          .close-button:active {
+            transform: scale(0.8);
+          }
+          h1 {
+            font-size: 2rem;
+            font-weight: bolder;
+            margin-bottom: 0.5rem;
+          }
+          .info {
+            display:flex;
+            flex-direction: row;
+            align-items: end;
+            h1 {
+              font-weight: bold;
+              font-size: 2rem;
+              margin-left: .5rem;
+              margin-right:2rem;
+            }
+            p {
+              color: #aaa;
+            }
+          }
+          .options {
+            display: flex;
+            button {
+              background-color: white;
+              border: none;
+              color: black;
+              font-size: 1rem;
+              padding: .6rem;
+              border-radius: 5px;
+              cursor: pointer;
+              transition: background-color 0.3s ease;
+              display: flex;
+              flex-direction: row;
+              align-items: center;
+              margin-right: 10px;
+              margin-top: 1rem;
+              margin-left: 5px;
+              .button-icons {
+                margin-right: 7px;
+                font-size: 1.3rem;
+              }  
+            }
+          }
+          .songs {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+            margin-top: 2rem;
+            .song {
+              display: flex;
+              align-items: center;
+              padding: 7px 10px 7px 10px;
+				      border-bottom: 1px solid #ccc; /* Separator line color */
+              
+              img {
+                max-width: 40px; /* 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; /* Remove default margin for heading */
+                  color: #fff; /* Adjust text color for song */
+                  font-size: 1rem;
+                  font-weight: 200;
+                }
+            
+                p {
+                  margin: 0; /* Remove default margin for paragraph */
+                  color: #aaa; /* Adjust text color for artist */
+                  font-size: 0.9rem;
+                }
+              }
+              .right {
+                position: fixed;
+                right: 25px;
+                transition: all 0.3s ease;
+                .duration {
+                  
+                }
+                .delete-song {
+                  cursor: pointer;
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+                }
+                .delete-song:hover {
+                  transform: scale(1.1);
+                }
+            
+                .delete-song:active {
+                  transform: scale(0.8);
+                }
+              }
+            }
+            .song:first-child {
+              border-top: 1px solid #ccc;
+            }
+          }
+        }
+      }
+      .playlist:hover {
+        background-color: #adadad36;
+      }
+    }
+  }
+
 }

-
--- a/style/song_list.scss
+++ b/style/song_list.scss
@ -1,124 +0,0 @@
-table.song-list {
-	width: 100%;
-	border-collapse: collapse;
-
-	tr.song-list-item {
-		border: solid;
-		border-width: 1px 0;
-		border-color: #303030;
-		position: relative;
-
-		td {
-			color: $text-controls-color;
-			white-space: nowrap;
-			padding-left: 10px;
-			padding-right: 10px;
-			
-			a {
-				text-decoration: none;
-				color: $text-controls-color;
-			}
-		}
-
-		a:hover {
-			text-decoration: underline $controls-hover-color;
-		}
-		
-		td.song-image {
-			width: 35px;
-			display: flex;
-
-			img.song-image {
-				position: absolute;
-				top: 50%;
-				-ms-transform: translateY(-50%);
-				transform: translateY(-50%);
-				width: 35px;
-				height: 35px;
-				border-radius: 5px;
-			}
-
-			svg.song-image-overlay {
-				position: absolute;
-				top: 50%;
-				-ms-transform: translateY(-50%);
-				transform: translateY(-50%);
-				width: 35px;
-				height: 35px;
-				border-radius: 5px;
-				fill: $text-controls-color;
-			}
-
-			svg.song-image-overlay:hover {
-				fill: $controls-hover-color;
-			}
-
-			svg.song-image-overlay:active {
-				fill: $controls-click-color;
-			}
-		}
-
-		td.song-list-spacer {
-			width: 20%;
-		}
-
-		td.song-list-spacer-big {
-			width: 40%;
-		}
-
-		button {
-			svg.hmirror {
-				-moz-transform: scale(-1, 1);
-				-webkit-transform: scale(-1, 1);
-				-o-transform: scale(-1, 1);
-				-ms-transform: scale(-1, 1);
-				transform: scale(-1, 1);
-			}
-	
-			.controlbtn {
-				color: $text-controls-color;
-			}
-	
-			.controlbtn:hover {
-				color: $controls-hover-color;
-			}
-	
-			.controlbtn:active {
-				color: $controls-click-color;
-			}
-	
-			background-color: transparent;
-			border: transparent;
-		}
-
-		.hide-until-hover {
-			visibility: hidden;
-		}
-
-		.song-playing-overlay {
-			background-color: rgba(0, 0, 0, 0.8);
-		}
-	}
-
-	tr.song-list-item:first-child {
-		border-top: none;
-	}
-
-	tr.song-list-item:last-child {
-		border-bottom: none;
-	}
-
-	tr.song-list-item:hover {
-		background-color: #303030;
-
-		.hide-until-hover {
-			visibility: visible;
-		}
-
-		td.song-image {
-			svg.song-image-overlay {
-				background-color: rgba(0, 0, 0, 0.8);
-			}
-		}
-	}
-}
--- a/style/theme.scss
+++ b/style/theme.scss
@ -14,5 +14,3 @@ $queue-background-color: $play-bar-background-color;

 $auth-inputs: #796dd4;
 $auth-containers: white;
-
-$dashboard-tile-size: 200px;
--- a/style/upload.scss
+++ b/style/upload.scss
@ -1,188 +0,0 @@
-@import "theme.scss";
-
-.upload-container {
-    position: fixed;
-    top: 45%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 30rem;
-    height: 30rem;
-    border: 1px solid white;
-    border-radius: 5px;
-    padding: 1rem;
-    padding-top: 0;
-    z-index: 2;
-    display: flex;
-    flex-direction: column;
-    background-color: #1c1c1c;
-    .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);
-    }
-    .upload-header {
-        font-size: .7rem;
-        font-weight: 300;
-        padding-bottom: 0;
-        border-bottom: 1px solid white;
-        font-family: "Roboto", sans-serif;
-    }
-    .upload-form {
-        padding: .1rem;
-        display: flex;
-        flex-direction: column;
-        .input-bx{
-            margin-top: 1rem;
-            position: relative;
-            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;
-            }
-        }
-        .file {
-            margin-top: .5rem;
-            display: flex;
-            align-items: center;
-            span {
-                font-size: .9rem;
-                color: #7f8fa6;
-                font-family: "Roboto", sans-serif;
-                margin-left: 5px;
-                margin-right: 10px;
-            }
-            input {
-                padding: 10px;
-            }
-        }
-        .upload-button {
-            margin-top: 1rem;
-            padding: 10px;
-            background-color: #7f8fa6;
-            color: #fff;
-            font-size: 1rem;
-            font-family: "Roboto", sans-serif;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-            transition: 0.3s;
-            &:hover {
-                background-color: #fff;
-                color: #7f8fa6;
-            }
-        }
-        .has-search {
-            position: relative;
-            width: 325px;
-            .search-results {
-                display: flex;
-                flex-direction: column;
-                border: 1px solid white;
-                width: 100%;
-                position: absolute;
-                top: 75%;
-                background-color: #1c1c1c;
-                z-index: 2;
-                border-radius: 5px;
-                padding: 0;
-                .result {
-                    border-bottom: 1px solid white; 
-                    padding: 10px;
-                    cursor: pointer;
-                    transition: 0.3s;
-                    &:hover {
-                        background-color: #7f8fa6;
-                    }
-                }
-                .result:last-child {
-                    border-bottom: none;
-                }
-            }
-        }
-    }
-
-    .error-msg {
-        padding-top: 10px;
-        color: red;
-
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        svg {
-            width: 20px;
-            height: 20px;
-            margin-right: 5px;
-        }
-    }
-}
Author	SHA1	Message	Date
dannyzou18	f311994058	fixed state management bug	2024-05-12 14:10:05 -07:00
dannyzou18	4d734ef594	added position column to playlist_songs table	2024-05-04 19:43:43 -04:00
dannyzou18	9c2cd94955	fixed create_playlist popup	2024-04-19 11:57:11 -04:00
dannyzou18	d7a3d4abd3	added play and shuffle non functional buttons	2024-04-19 11:36:54 -04:00
dannyzou18	1377743aba	added a delete playlist song	2024-04-19 11:04:15 -04:00
dannyzou18	f56e13eaa9	added a playlist component and a song component	2024-04-18 19:44:12 -04:00
dannyzou18	8d704ac6bd	seperated playlist component into different files	2024-04-18 12:08:01 -04:00
dannyzou18	c66e04643c	started work on playlist ui	2024-04-17 19:50:27 -04:00
dannyzou18	ac02fb9bd6	commit to work on laptop.	2024-04-16 14:58:45 -04:00
dannyzou18	1e59195aff	fixed warnings in palylist and sidebar	2024-04-13 16:22:52 -04:00
dannyzou18	2c1df1da3f	adding playlist to user now works.	2024-04-13 15:51:24 -04:00
dannyzou18	5dd0710eb8	Created Playlist	2024-04-13 15:12:50 -04:00
dannyzou18	1a9addefa4	created component to add a playlist	2024-04-13 13:50:31 -04:00
dannyzou18	79903c779a	added a logout button	2024-04-12 19:48:39 -04:00
dannyzou18	8556aa21ff	add user session check to profile icon	2024-04-12 19:10:45 -04:00
				`@ -1 +0,0 @@`
				<svg version="1.1" viewBox="0.0 0.0 960.0 960.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><clipPath id="p.0"><path d="m0 0l960.0 0l0 960.0l-960.0 0l0 -960.0z" clip-rule="nonzero"/></clipPath><g clip-path="url(#p.0)"><path fill="#4032a8" d="m0 0l960.0 0l0 960.0l-960.0 0z" fill-rule="evenodd"/><path fill="#ffffff" d="m290.11365 265.52475l35.496063 0l0 471.3386l-35.496063 0z" fill-rule="evenodd"/><path fill="#ffffff" d="m115.68951 737.6639l0 0c0 -36.946594 46.99247 -66.897644 104.960625 -66.897644l0 0c57.968155 0 104.96065 29.95105 104.96065 66.897644l0 0c0 36.946533 -46.992493 66.897644 -104.96065 66.897644l0 0c-57.968155 0 -104.960625 -29.95111 -104.960625 -66.897644z" fill-rule="evenodd"/><path fill="#ffffff" d="m723.79346 175.86597l35.496033 0l0 471.33856l-35.496033 0z" fill-rule="evenodd"/><path fill="#ffffff" d="m549.3693 648.00507l0 0c0 -36.946533 46.99243 -66.897644 104.96063 -66.897644l0 0c57.96814 0 104.96057 29.95111 104.96057 66.897644l0 0c0 36.946533 -46.99243 66.897644 -104.96057 66.897644l0 0c-57.9682 0 -104.96063 -29.95111 -104.96063 -66.897644z" fill-rule="evenodd"/><path fill="#ffffff" d="m759.2711 155.4385l-0.01727295 94.79588l-427.05206 100.14052l-42.09601 -84.920654z" fill-rule="evenodd"/><path fill="#ffffff" d="m421.49164 234.64502l21.039368 89.85828l-131.40158 30.803131l-21.039368 -89.85828z" fill-rule="evenodd"/></g></svg>
				`@ -1 +0,0 @@`
				`ALTER TABLE albums ADD COLUMN image_path VARCHAR;`
				`@ -1 +0,0 @@`
				`ALTER TABLE users ADD COLUMN admin BOOLEAN DEFAULT FALSE NOT NULL;`