fixed some ui stuff and added more ui stuff

apps/main/models.py

@@ -1284,8 +1284,8 @@ class Video(models.Model):
     is_marked_as_watched = models.BooleanField(default=False)  # mark video as watched
     is_favorite = models.BooleanField(default=False, blank=True)  # mark video as favorite
     num_of_accesses = models.IntegerField(default=0)  # tracks num of times this video was clicked on by user
-    user_label = models.CharField(max_length=100, default="")  # custom user given name for this video
-    user_notes = models.CharField(max_length=420, default="")  # user can take notes on the video and save them
+    user_label = models.CharField(max_length=100, blank=True)  # custom user given name for this video
+    user_notes = models.CharField(max_length=420, blank=True)  # user can take notes on the video and save them
 
     created_at = models.DateTimeField(auto_now_add=True)
     updated_at = models.DateTimeField(auto_now=True)
@@ -1339,9 +1339,9 @@ class Playlist(models.Model):
     # set playlist manager
     objects = PlaylistManager()
 
-    # playlist settings
-    hide_unavailable_videos = models.BooleanField(default=False)
-    confirm_before_deleting = models.BooleanField(default=True)
+    # playlist settings (moved to global preferences)
+    #hide_unavailable_videos = models.BooleanField(default=False)
+    #confirm_before_deleting = models.BooleanField(default=True)
 
     # for import
     is_in_db = models.BooleanField(default=False)  # is true when all the videos of a playlist have been imported

apps/main/templates/all_playlists_with_tag.html

@@ -2,7 +2,6 @@
 {% extends 'base.html' %}
 {% block content %}
 
-    <div id="search-results">
 
         <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 mb-3">
             <h1 class="h2"> <span style="border-bottom: 3px #e24949 dashed;" class="pt-3">Playlists Tagged as</span> <kbd>{{ tag.name }}</kbd> <span class="badge bg-warning rounded-pill">{{ playlists.count }}</span> <a href="{% url 'search' %}?tag={{ tag.name }}"><i class="fas fa-search" style="color: black"></i></a></h1>
@@ -10,46 +9,19 @@
         </div>
 
         {% if playlists %}
-        <div class="">
-            <input   class="form-control border border-secondary" type="text"
-       name="search" placeholder="Begin to search playlists..."
-       hx-post="{% url 'search_tagged_playlists' tag.name %}"
-       hx-trigger="keyup changed delay:500ms"
-       hx-target="#search-results"
-       hx-indicator=".htmx-indicator">
-          <br>
-        </div>
-
-        <div class="row row-cols-1 row-cols-md-3 g-4">
-                {% for playlist in playlists %}
-                <div class="col">
-                    <div class="card" style="background-color: #515355;">
-                        <a style="background-color: #1A4464;" href="{% url 'playlist' playlist.playlist_id %}" class="list-group-item list-group-item-action text-white-50" aria-current="true">
-
-                            <div class="card-body">
-
-                                <h5 class="card-title text-white">
-                                    {{ playlist.name }}
-
-                                </h5>
-                                <p class="card-text">
-                                    {% if playlist.is_user_owned %}<small><span class="badge bg-light text-black-50">OWNED</span></small>{% else %}<small><span class="badge bg-light text-black-50">IMPORTED</span></small>{% endif %}
-
-                                    {% if playlist.is_private_on_yt %}<small><span class="badge bg-secondary text-white">Private</span></small> {% endif %}
-                                    {% if playlist.is_from_yt %}<small><span class="badge bg-danger text-black-50">YT</span></small> {% endif %}
-
-                                </p>
-                                <small>
-                                    <span class="badge bg-primary rounded-pill">{{ playlist.video_count }} videos</span>
-                                    <span class="badge bg-primary rounded-pill">{{ playlist.playlist_duration }} </span>
-                                </small>
-                            </div>
-                        </a>
-                    </div>
-                </div>
-                {% endfor %}
+            <input  class="form-control border border-secondary" type="text"
+               name="search" placeholder="Begin to search tagged playlists..."
+               hx-post="{% url 'search_tagged_playlists' tag.name %}"
+               hx-trigger="keyup changed delay:700ms"
+               hx-target="#search-results"
+               hx-indicator=".htmx-indicator"
+            aria-describedby="searchHelp">
+            <div id="searchHelp" class="form-text">For a more extensive tagged playlist search and filtering, <a href="{% url 'search' %}?mode=playlists&tag={{ tag.name }}">click here</a>.</div>
 
+          <br>
 
+        <div id="search-results" class="row row-cols-1 row-cols-md-4 g-4">
+            {% include 'intercooler/playlists.html' with show_controls=True %}
         </div>
         {% else %}
               <div class="card bg-dark text-white mb-3">
@@ -65,6 +37,5 @@
 
         {% endif %}
         <br>
-    </div>
 
 {% endblock %}

apps/main/templates/home.html

@@ -205,11 +205,13 @@
                         You haven't created any playlist tags yet.
                     {% endif %}
                 </div>
+            {% if playlist_tags %}
                 <div class="d-flex justify-content-center">
                     <h3>
                         <a href="{% url 'search' %}" class="btn btn-success">Filter Playlists by Tags</a>
                     </h3>
                 </div>
+                {% endif %}
             </div>
         </div>
 
@@ -305,7 +307,7 @@
 
                 {% if recently_accessed_playlists %}
                     <div class="row row-cols-1 row-cols-md-3 g-4 text-dark mt-0">
-                        {% include 'intercooler/playlists.html' with playlists=recently_accessed_playlists watching=False bg_color="#357779" show_controls=False %}
+                        {% include 'intercooler/playlists.html' with playlists=recently_accessed_playlists watching=False bg_color="#9363af" show_controls=False %}
                     </div>
                 {% else %}
                     <br>

apps/main/templates/intercooler/playlists.html

@@ -3,7 +3,7 @@
     {% for playlist in playlists %}
         <div class="col">
 
-            <div class="card overflow-auto" style="background-color: {{ bg_color|default:"#9363af" }};">
+            <div class="card overflow-auto" style="background-color: {{ bg_color|default:"#357779" }};">
                 <img  class="bd-placeholder-img card-img-top" src="{{ playlist.thumbnail_url }}" style="max-width:100%; height: 200px;   object-fit: cover;" alt="{{ playlist.name }} thumbnail">
 
                 <div class="card-body">
@@ -12,7 +12,7 @@
                         <span class="badge bg-{% if playlist.get_watch_time_left == "0secs." %}success{% else %}primary{% endif %} text-white">{{ playlist.get_watched_videos_count }}/{{ playlist.get_watchable_videos_count }} viewed</span>
                         {% if playlist.get_watch_time_left != "0secs." %}<span class="badge bg-dark text-white">{{ playlist.get_watch_time_left }} left</span>{% endif %}
                     </p>
-                    <p class="card-text"><small class="text-black">Last watched {{ playlist.last_watched|naturaltime }}</small></p>
+                    <p class="card-text"><small class="text-white-50">Last watched {{ playlist.last_watched|naturaltime }}</small></p>
                 </div>
             </div>
         </div>

apps/main/templates/unavailable_videos.html

@@ -4,7 +4,7 @@
 
 
         <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 mb-3">
-            <h1 class="h2"><span style="border-bottom: 3px #e24949 dashed;">Unavailable Video Names</span> <span class="badge bg-primary rounded-pill">{{ videos.count }}</span></h1>
+            <h1 class="h2"><span style="border-bottom: 3px #e24949 dashed;">Unavailable Videos</span> <span class="badge bg-primary rounded-pill">{{ videos.count }}</span></h1>
 
 
         </div>
@@ -31,7 +31,7 @@
                     Nothing here!
                 </div>
                 <div class="d-flex justify-content-center h5">
-                    Any video in your present UnTube collection that goes unavailable on YouTube will all show up here. Note that only
+                    Any videos in your present UnTube collection that go unavailable on YouTube will all show up here. <br>Note that only
                     video names will show up here.
                 </div>
             </div>

apps/main/templates/view_playlist_settings.html

@@ -29,6 +29,16 @@
                     </div>
                   </div>
                     <hr>
+                    <div class="row">
+                    <div class="col-sm-3">
+                      <h6 class="mb-0">Playlist User Label</h6>
+                    </div>
+                    <div class="col-sm-9 text-white-50">
+                        <input type="text" class="form-control" name="user_label" placeholder="Enter a user label to identify this playlist with" value="{{ playlist.user_label }}">
+                    </div>
+                  </div>
+
+                      <hr>
 
                       <div class="row">
                         <div class="col-sm-3">
@@ -62,25 +72,6 @@
                         </div>
                         </div>
                       <hr>
-                    <div class="row">
-                        <div class="col-sm-3">
-                            <h6 class="mb-0">Preferences</h6>
-                        </div>
-                        <div class="col-sm-9 text-white">
-
-                            <div class="mb-3 form-check form-switch">
-                            <input class="form-check-input" name="hide videos" type="checkbox" id="flexSwitchCheckChecked" {% if playlist.hide_unavailable_videos %}checked{% endif %}>
-                            <label class="form-check-label" for="flexSwitchCheckChecked">Hide deleted/private videos</label>
-                            </div>
-
-
-                            <div class="mb-3 form-check form-switch">
-                            <input class="form-check-input" name="confirm before deleting" type="checkbox" id="flexSwitchCheckChecked" {% if playlist.confirm_before_deleting %}checked{% endif %}>
-                            <label class="form-check-label" for="flexSwitchCheckChecked">Confirm before deleting</label>
-                            </div>
-                        </div>
-                    </div>
-                    <hr>
                     <div class="row">
                         <div class="col-sm-3">
                           <h6 class="mb-0">Danger Zone</h6>
@@ -129,6 +120,16 @@
                     </div>
                   </div>
 
+                      <hr>
+                        <div class="row">
+                    <div class="col-sm-3">
+                      <h6 class="mb-0">Playlist User Label</h6>
+                    </div>
+                    <div class="col-sm-9 text-white-50">
+                        <input type="text" class="form-control" name="user_label" placeholder="Enter a user label to identify this playlist with" value="{{ playlist.user_label }}">
+                    </div>
+                  </div>
+
                       <hr>
                       <div class="row">
                         <div class="col-sm-3">
@@ -138,25 +139,6 @@
                             <input type="text" class="form-control" id="fullname" value="{{ playlist.channel_name }}" disabled>
                         </div>
                       </div>
-                      <hr>
-                        <div class="row">
-                        <div class="col-sm-3">
-                            <h6 class="mb-0">Preferences</h6>
-                        </div>
-                        <div class="col-sm-9 text-white">
-
-                            <div class="mb-3 form-check form-switch">
-                            <input class="form-check-input" name="hide videos" type="checkbox" id="flexSwitchCheckChecked" checked>
-                            <label class="form-check-label" for="flexSwitchCheckChecked">Hide deleted/private videos</label>
-                            </div>
-
-
-                            <div class="mb-3 form-check form-switch">
-                            <input class="form-check-input" name="confirm before deleting" type="checkbox" id="flexSwitchCheckChecked" checked>
-                            <label class="form-check-label" for="flexSwitchCheckChecked">Confirm before deleting</label>
-                            </div>
-                        </div>
-                    </div>
 
                         <hr>
                       <div class="row">

apps/main/templates/view_video.html

@@ -108,7 +108,7 @@
                                     <span class="badge bg-warning text-black-50 mb-1"><i class="fas fa-thumbs-down"></i> {% if video.dislike_count == -1 %}HIDDEN{% else %}{{ video.dislike_count|intcomma }}{% endif %}</span>
                                     <span class="badge bg-info text-black-50 mb-1"><i class="fas fa-comments"></i> {% if video.comment_count == -1 %}HIDDEN{% else %}{{ video.comment_count|intcomma }}{% endif %} </span>
                                 {% endif %}
-                                    {% if video.is_unavailable_on_yt or video.was_deleted_on_yt %}<span class="badge bg-danger text-dark mb-1">UNAVAILABLE</span>{% endif %}
+                                    {% if video.is_unavailable_on_yt or video.was_deleted_on_yt %}<span class="badge bg-danger text-light mb-1">VIDEO WENT UNAVAILABLE ON YT</span>{% endif %}
                                     <span class="badge bg-light text-black-50 mb-1"><a href="#found-in" style="text-decoration: none; color: grey"> Found in {{ video.playlists.all.count }} playlist{% if video.playlists.all.count > 1 %}s{% endif %}</a></span>
                                     {% if video.is_marked_as_watched %}
                                         <span class="badge bg-dark text-white" >
@@ -156,14 +156,11 @@
             <div >
                 <textarea name="video-notes-text-area"
                     hx-post="{% url 'video_notes' video.video_id %}"
-                    hx-trigger="keyup changed delay:1.5s"
+                    hx-trigger="keyup changed delay:0.7s"
                     hx-target="#notes-save-status"
                     class="form-control"
-                    id="video-notes-text-area"
-                    placeholder="Enter here"
-                    rows="13">
-                    {{ video.user_notes }}
-                </textarea>
+                    placeholder="Enter here. Automatically saved after every 1s of typing!"
+                    rows="13">{{ video.user_notes }}</textarea>
 
                 <div>
 

apps/main/views.py

@@ -25,7 +25,7 @@ def home(request):
     user_profile = request.user
     watching = user_profile.playlists.filter(Q(marked_as="watching") & Q(is_in_db=True)).order_by("-num_of_accesses")
     recently_accessed_playlists = user_profile.playlists.filter(is_in_db=True).filter(
-        updated_at__gt=user_profile.profile.updated_at).order_by("-updated_at")[:6]
+        updated_at__gt=user_profile.profile.created_at).order_by("-updated_at")[:6]
     recently_added_playlists = user_profile.playlists.filter(is_in_db=True).order_by("-created_at")[:6]
 
     #### FOR NEWLY JOINED USERS ######
@@ -692,30 +692,25 @@ def update_playlist_settings(request, playlist_id):
     print(request.POST)
     playlist = request.user.playlists.get(playlist_id=playlist_id)
 
-    if 'confirm before deleting' in request.POST:
-        playlist.confirm_before_deleting = True
-    else:
-        playlist.confirm_before_deleting = False
-
-    if 'hide videos' in request.POST:
-        playlist.hide_unavailable_videos = True
-    else:
-        playlist.hide_unavailable_videos = False
-
-    playlist.save(update_fields=['hide_unavailable_videos', 'confirm_before_deleting'])
-
-    valid_title = request.POST['playlistTitle'].replace(">", "greater than").replace("<", "less than")
-    valid_description = request.POST['playlistDesc'].replace(">", "greater than").replace("<", "less than")
-    details = {
-        "title": valid_title,
-        "description": valid_description,
-        "privacyStatus": True if request.POST['playlistPrivacy'] == "Private" else False
-    }
+    if 'user_label' in request.POST:
+        playlist.user_label = request.POST["user_label"]
+        playlist.save(update_fields=['user_label'])
 
-    status = Playlist.objects.updatePlaylistDetails(request.user, playlist_id, details)
-    if status == -1:
-        message_type = "danger"
-        message_content = "Could not save :("
+    try:
+        valid_title = request.POST['playlistTitle'].replace(">", "greater than").replace("<", "less than")
+        valid_description = request.POST['playlistDesc'].replace(">", "greater than").replace("<", "less than")
+        details = {
+            "title": valid_title,
+            "description": valid_description,
+            "privacyStatus": True if request.POST['playlistPrivacy'] == "Private" else False
+        }
+
+        status = Playlist.objects.updatePlaylistDetails(request.user, playlist_id, details)
+        if status == -1:
+            message_type = "danger"
+            message_content = "Could not save :("
+    except:
+        pass
 
     return HttpResponse(loader.get_template("intercooler/messages.html")
         .render(

apps/search/views.py

@@ -166,39 +166,39 @@ def search_library(request, library_type):
     playlists = None
     if library_type == "all":
         try:
-            playlists = request.user.playlists.all().filter(Q(name__startswith=search_query) | Q(user_label__startswith=search_query) & Q(is_in_db=True))
+            playlists = request.user.playlists.all().filter(Q(is_in_db=True)).filter(Q(name__startswith=search_query) | Q(user_label__startswith=search_query))
         except:
-            playlists = request.user.playlists.all()
+            playlists = request.user.playlists.all().filter(is_in_db=True)
     elif library_type == "user-owned":  # YT playlists owned by user
         try:
-            playlists = request.user.playlists.filter(
-                Q(name__startswith=search_query) | Q(user_label__startswith=search_query) & Q(is_user_owned=True) & Q(is_in_db=True))
+            playlists = request.user.playlists.filter(Q(is_user_owned=True) & Q(is_in_db=True)).filter(
+                Q(name__startswith=search_query) | Q(user_label__startswith=search_query))
         except:
             playlists = request.user.playlists.filter(Q(is_user_owned=True) & Q(is_in_db=True))
     elif library_type == "imported":  # YT playlists (public) owned by others
         try:
-            playlists = request.user.playlists.filter(
-                Q(name__startswith=search_query) | Q(user_label__startswith=search_query) & Q(is_user_owned=False) & Q(is_in_db=True))
+            playlists = request.user.playlists.filter(Q(is_user_owned=False) & Q(is_in_db=True)).filter(
+                Q(name__startswith=search_query) | Q(user_label__startswith=search_query))
         except:
             playlists = request.user.playlists.filter(Q(is_user_owned=True) & Q(is_in_db=True))
     elif library_type == "favorites":  # YT playlists (public) owned by others
         try:
-            playlists = request.user.playlists.filter(
-                Q(name__startswith=search_query) | Q(user_label__startswith=search_query) & Q(is_favorite=True) & Q(is_in_db=True))
+            playlists = request.user.playlists.filter(Q(is_favorite=True) & Q(is_in_db=True)).filter(
+                Q(name__startswith=search_query) | Q(user_label__startswith=search_query))
         except:
             playlists = request.user.playlists.filter(Q(is_favorite=True) & Q(is_in_db=True))
     elif library_type in ["watching", "plan-to-watch"]:
         try:
-            playlists = request.user.playlists.filter(
-                Q(name__startswith=search_query) | Q(user_label__startswith=search_query) & Q(marked_as=playlist_type) & Q(is_in_db=True))
+            playlists = request.user.playlists.filter(Q(marked_as=library_type) & Q(is_in_db=True)).filter(
+                Q(name__startswith=search_query) | Q(user_label__startswith=search_query) )
         except:
-            playlists = request.user.playlists.all().filter(Q(marked_as=playlist_type) & Q(is_in_db=True))
+            playlists = request.user.playlists.all().filter(Q(marked_as=library_type) & Q(is_in_db=True))
         if library_type == "watching":
             watching = True
     elif library_type == "yt-mix":  # YT playlists owned by user
         try:
-            playlists = request.user.playlists.filter(
-                Q(name__startswith=search_query) | Q(user_label__startswith=search_query) & Q(is_yt_mix=True) & Q(is_in_db=True))
+            playlists = request.user.playlists.filter(Q(is_yt_mix=True) & Q(is_in_db=True)).filter(
+                Q(name__startswith=search_query) | Q(user_label__startswith=search_query))
         except:
             playlists = request.user.playlists.filter(Q(is_yt_mix=True) & Q(is_in_db=True))
     elif library_type == 'unavailable-videos':
@@ -216,7 +216,12 @@ def search_library(request, library_type):
 @login_required
 @require_POST
 def search_tagged_playlists(request, tag):
-    tag = get_object_or_404(Tag, created_by=request.user, name=tag)
-    playlists = tag.playlists.all()
+    search_query = request.POST["search"]
+    try:
+        playlists = request.user.playlists.all().filter(Q(is_in_db=True) & Q(tags__name=tag)).filter(
+            Q(name__startswith=search_query) | Q(user_label__startswith=search_query))
+    except:
+        playlists = request.user.playlists.all().filter(Q(is_in_db=True) & Q(tags__name=tag))
 
-    return HttpResponse("yay")
+    return HttpResponse(loader.get_template("intercooler/playlists.html")
+                        .render({"playlists": playlists}))

apps/users/templates/profile.html

@@ -63,27 +63,7 @@
 
 
           <div class="row gutters-sm">
-              {% if not user.profile.imported_yt_playlists %}
-              <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
-                  <symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
-                    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
-                  </symbol>
-                  <symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
-                    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
-                  </symbol>
-                  <symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
-                    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
-                  </symbol>
-              </svg>
-
-                <div class="alert alert-primary d-flex align-items-center" role="alert">
-                  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
-                  <div>
-                      You have not imported your YouTube playlists yet!
-                      <a class="btn btn-success btn-sm" href="{% url 'import_user_yt_playlists' %}">Import</a>
-                  </div>
-                </div>
-              {% endif %}
+
             <div class="col-sm-6 mb-3">
                   <div class="card h-100 bg-dark text-white">
                     <div class="card-body">

apps/users/templates/settings.html

@@ -4,25 +4,34 @@
 
     <!-- Template taken from https://www.bootdey.com/snippets/view/profile-with-data-and-skills#html -->
 
-<div class="container-fluid text-black">
-<div class="main-body" style="padding: 15px">
+    {% if not user.profile.imported_yt_playlists %}
+              <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+                  <symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
+                    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
+                  </symbol>
+                  <symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
+                    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
+                  </symbol>
+                  <symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
+                    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
+                  </symbol>
+              </svg>
+
+                <div class="alert alert-primary d-flex align-items-center" role="alert">
+                  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
+                  <div>
+                      You have not imported your YouTube playlists yet!
+                      <a class="btn btn-success btn-sm" href="{% url 'import_user_yt_playlists' %}">Import</a>
+                  </div>
+                </div>
+              {% endif %}
 
       <div class="row g-5">
-        <div class="col-md-4 mb-3 d-flex justify-content-center">
+        <div class="col-md-4 mb-3 d-flex justify-content-start">
           <h1><span style="border-bottom: 3px #a35a5a dashed;">User Settings</span></h1>
           <div class="card bg-dark text-white visually-hidden">
             <div class="card-body">
-                <!--
-              <div class="d-flex flex-column align-items-center text-center">
-                <img src="https://robohash.org/{{ user.username }}.png?set=set3" alt="{{ user.username }}" class="border border-5 border-primary rounded-circle" width="150">
-                <div class="mt-3">
-                  <h4>{{ user.get_full_name }}</h4>
-                  <p class="text-white-50 mb-1">Full Stack Developer</p>
-                  <p class="text-white-50 font-size-sm">Bay Area, San Francisco, CA</p>
-                  <button class="btn btn-primary"><i class="fas fa-pencil-alt"></i></button>
-                </div>
-              </div>
-              -->
+
             <div class="row">
                 <div class="col-sm-3">
                   <h6 class="mb-0">Pick a picture:</h6>
@@ -176,6 +185,4 @@
         </div>
       </div>
 
-    </div>
-</div>
 {% endblock %}

templates/base.html

@@ -191,10 +191,10 @@
                             </a>
                             <ul class="dropdown-menu dropdown-menu-lg-end" aria-labelledby="quickViewDropdown" style="z-index: 1021;">
                                 <li class="dropdown-item overflow-auto">Logged in as <span style="border-bottom: 3px #020000 dashed;">{{ user.username }}</span></li>
-                                <li><a class="dropdown-item" href="{% url 'profile' %}">Profile</a></li>
+                                <!-- <li><a class="dropdown-item" href="{% url 'profile' %}">Profile</a></li> -->
                                 <li><a class="dropdown-item" href="{% url 'settings' %}">Settings</a></li>
 
-                                <li><hr class="dropdown-divider"></li>
+                                <!-- <li><hr class="dropdown-divider"></li> -->
                                 <li><a class="dropdown-item" href="{% url 'log_out' %}">Log out</a></li>
                             </ul>
                         </li>