Implement tag cloud on bookmark page

bookmarks/styles/bookmarks.scss

@@ -25,3 +25,20 @@ ul.bookmark-list {
     }
   }
 }
+
+.tag-cloud {
+
+  a {
+    color: $alternative-color;
+  }
+
+  .group {
+    margin-bottom: 0.4rem;
+  }
+
+  .group-label {
+    font-weight: bold;
+    text-transform: uppercase;
+    color: $alternative-color-dark;
+  }
+}

bookmarks/styles/index.scss

@@ -5,7 +5,8 @@ $alternative-color: #f45d00;
 $alternative-color: #FF84E8;
 $alternative-color: #98C1D9;
 $alternative-color: #7B287D;
-$alternative-color: #06c5c2;
+$alternative-color: #05a6a3;
+$alternative-color-dark: darken($alternative-color, 5%);
 
 // Import Spectre CSS lib
 @import "../../node_modules/spectre.css/src/spectre";

bookmarks/templates/bookmarks/index.html

@@ -1,5 +1,6 @@
 {% extends "bookmarks/layout.html" %}
 {% load shared %}
+{% load bookmarks %}
 
 {% block content %}
     <div class="columns">
@@ -65,6 +66,7 @@
             <div class="content-area-header">
                 <h2>Tags</h2>
             </div>
+            {% tag_cloud tags %}
         </section>
     </div>
 

bookmarks/templates/bookmarks/tag_cloud.html

@@ -0,0 +1,14 @@
+{% load shared %}
+
+<div class="tag-cloud">
+    {% for group in groups %}
+        <p class="group">
+            <span class="group-label mr-2">{{ group.char }}</span>
+            {% for tag in group.tags %}
+                <a href="?{% append_query_param q=tag.name %}">
+                    <span class="mr-2">{{ tag.name }}</span>
+                </a>
+            {% endfor %}
+        </p>
+    {% endfor %}
+</div>

bookmarks/templatetags/bookmarks.py

@@ -1,6 +1,8 @@
+from typing import List
+
 from django import template
 
-from bookmarks.models import BookmarkForm
+from bookmarks.models import BookmarkForm, Tag
 
 register = template.Library()
 
@@ -10,3 +12,35 @@ def bookmark_form(form: BookmarkForm):
     return {
         'form': form,
     }
+
+
+class TagGroup:
+    def __init__(self, char):
+        self.tags = []
+        self.char = char
+
+
+def create_tag_groups(tags: List[Tag]):
+    sorted_tags = sorted(tags, key=lambda x: str.lower(x.name))
+    group = None
+    groups = []
+
+    # Group tags that start with a different character than the previous one
+    for tag in sorted_tags:
+        tag_char = tag.name[0].lower()
+
+        if not group or group.char != tag_char:
+            group = TagGroup(tag_char)
+            groups.append(group)
+
+        group.tags.append(tag)
+
+    return groups
+
+
+@register.inclusion_tag('bookmarks/tag_cloud.html', name='tag_cloud', takes_context=True)
+def tag_cloud(context, tags: List[Tag]):
+    groups = create_tag_groups(tags)
+    return {
+        'groups': groups,
+    }

bookmarks/templatetags/shared.py

@@ -5,7 +5,7 @@ register = template.Library()
 
 @register.simple_tag(takes_context=True)
 def update_query_string(context, **kwargs):
-    query = context['request'].GET.copy()
+    query = context.request.GET.copy()
 
     # Replace query params with the ones from tag parameters
     for key in kwargs:
@@ -16,7 +16,7 @@ def update_query_string(context, **kwargs):
 
 @register.simple_tag(takes_context=True)
 def append_query_param(context, **kwargs):
-    query = context['request'].GET.copy()
+    query = context.request.GET.copy()
 
     # Append to or create query param
     for key in kwargs:

bookmarks/views/bookmarks.py

@@ -4,7 +4,7 @@ from django.shortcuts import render
 from django.urls import reverse
 
 from bookmarks import queries
-from bookmarks.models import Bookmark, BookmarkForm
+from bookmarks.models import Bookmark, BookmarkForm, Tag
 from bookmarks.services.bookmarks import create_bookmark, update_bookmark
 
 _default_page_size = 30
@@ -16,6 +16,7 @@ def index(request):
     query_set = queries.query_bookmarks(request.user, query_string)
     paginator = Paginator(query_set, _default_page_size)
     bookmarks = paginator.get_page(page)
+    tags = Tag.objects.all()
 
     if request.GET.get('tag'):
         mod = request.GET.copy()
@@ -24,6 +25,7 @@ def index(request):
 
     context = {
         'bookmarks': bookmarks,
+        'tags': tags,
         'query': query_string if query_string else '',
     }
     return render(request, 'bookmarks/index.html', context)