feat: Enhance category management UX

Introduced a more interactive and user-friendly design on the categories
page by streamlining the content layout and adding a "Create category"
button. This improvement aims to make the management and organization of
VR projects more intuitive for users, facilitating easier navigation and
category creation. Additionally, new views for media upload and category
creation have been implemented, expanding the platform's functionality
and offering users more control over their content.

These changes are in response to user feedback requesting a more
organized and accessible way to handle categories and media within the
platform. By making these adjustments, we're enhancing the overall user
experience and laying the groundwork for future feature expansions.

quackscape/users/templates/users/categories.html

@@ -1,18 +1,30 @@
-{% extends "users/base.html" %}
-
-{% block content %}
+{% extends "users/base.html" %} {% block content %}
 <div class="row">
-        <p>This page lists your categories, and the categories you were invited to.</p>
-        <p>Think of categories as a way to organize your VR projects. All content you create will be associated with a category, and can be interacted with by other content within the same category.</p>
+  <p>
+    This page lists your categories, and the categories you were invited to.
+  </p>
+  <p>
+    Think of categories as a way to organize your VR projects. All content you
+    create will be associated with a category, and can be interacted with by
+    other content within the same category.
+  </p>
 </div>
 <div class="row">
-    <div class="col-md-6">
-        <h4>Available categories</h4>
-        <ul>
-            {% for category in categories %}
-                <li><a href="/users/category/{{ category.id }}/">{{ category.title }}</a>{% if category.owner != request.user %} (owner: {{ category.owner.email }}){% endif %}</li>
-            {% endfor %}
-        </ul>
+  <div class="col-md-6">
+    <div class="d-flex justify-content-between align-items-center">
+      <h4>Available media</h4>
+      <button type="button" class="btn btn-primary">Create category</button>
     </div>
+    <ul>
+      {% for category in categories %}
+      <li>
+        <a href="/users/category/{{ category.id }}/">{{ category.title }} </a>
+        {% if category.owner != request.user %}
+            (owner: {{ category.owner.email }})
+        {% endif %}
+      </li>
+      {% endfor %}
+    </ul>
+  </div>
 </div>
 {% endblock %}

quackscape/users/views.py

@@ -44,3 +44,13 @@ class CategoryView(TitleMixin, DetailView):
             return category
         except (Category.DoesNotExist, AssertionError):
             raise Http404()
+
+
+class MediaUploadView(TitleMixin, TemplateView):
+    template_name = "users/media_upload.html"
+    title = "Upload Media"
+
+
+class CategoryCreateView(TitleMixin, TemplateView):
+    template_name = "users/category_create.html"
+    title = "Create Category"