From 9eec1ec34fe00dcb27b8a06a5d60f293afa49f97 Mon Sep 17 00:00:00 2001
From: Junwei Zhao <wahyd4@gmail.com>
Date: Thu, 19 Dec 2024 17:07:32 +1100
Subject: [PATCH] Add tags to image collection

---
 data/db.sqlite3                               | Bin 331776 -> 335872 bytes
 links/forms.py                                |   3 +-
 links/migrations/0028_imagecollection_tags.py |  18 +++++
 links/models.py                               |   1 +
 links/templates/links/collection_detail.html  |  27 ++++++-
 links/templates/links/collection_form.html    |  70 +++++++++++++++++-
 links/templates/links/collection_list.html    |  46 +++++++++---
 new_theme/static/css/dist/styles.css          |  48 ++++++++++++
 8 files changed, 197 insertions(+), 16 deletions(-)
 create mode 100644 links/migrations/0028_imagecollection_tags.py

diff --git a/data/db.sqlite3 b/data/db.sqlite3
index 140ec139ea38d5015bf6b3a7f73fc4364ac5f597..81c688a306c7150847dc68fb8e25488cb2d306a1 100644
GIT binary patch
delta 1638
zcmb7EU2NM_6t=H@{gW>DCMYG-kS5oy3$0dTJ9g|ul-AN7hEP{DI+Y4Rnl?^J(`Bt%
zB>FOzg7(0Wwh^=|O=y$}@eE{IUiUPH_5x36QxQWvAf7gaco`Dn+6hYpR4tZ#bno?d
z&iTG`?(x~})Y+S<i-(@zV+_Nbpzq($`AbJEz{kFr{}gjNf3zVcUIqNo=33%DH!-e5
zCOzS=RBF|A!?3(U<y3JgSUkP55-e_1PS*+>#ie!2u<S9@8Z&c>;pA;E?__n?%@~f;
zd?!`!<C5r1LsSL;I@2_j83YfjoX?UUmqEV}`OD3#dXZ)IE#rp4@(&Y2{0f6V#^Y!Q
zZN?wPuTZaZ@%h&UVX8mw`?l*9OSw|f^~wu&rsR5ol_|UBa@KP#yO<4Tg7uAFM%lcP
z$y=W8WE?wZ?DEAiZSrUgR8wsg)W^yju5OvGo3+TM4yHR_94anv8M<fXvW`P`bTHNR
zar365TRGEkGp+Gw!B^XofCm|T3=g(q-+(mMhPWwqFa82CX2DQv<p=QLO9$h$NfNrv
z;4krcT*7zpIDQg6K)0L8)z1;H$vi`TodfF2K$Cc8@7SUy?gtjr1RD60S)hut#)lrH
zt^-Ac8uxeuWes#dP|#p!$-;A!+-H-#aWIDOQRdee{5)>rH2NAn!~uREU8Bt3L;NsL
zV<uk#11EtTuJ^2pDD4Xt6C)T|E%J&e3q2bM+nctKh(Je`%ynUc0BFUB8*2%bD%hb4
zt~0n5b`brE?&1&dDRiAG_z02Y92k00-cLiN{eZ-%>ukIEgf@Sa+<OgZ#GVBT3^@%^
zPRfmoJimH44lgq}g{pnG`cUj``8VmlbOCwdXxtKx!^?D9HXyD$6)|1(+4{*!trWZ!
zO<R97ZJ{YtN`>q~*3P-M-7|<Mh#7+^^7AslPyHuWRi=+CYUH6r09AQLZO2nb>T_?1
z=}n*Ag58t@?J)oRYtZzj>v@Y-vD}mXg>L$%_w?(b(gufA{+&l1*;*)zY2RnxohED*
z9D-5go~$-8t6;Ew-0%-LFbYCOmqC?WJpgA~7bF<)fSIHXcrLNUElKHmlB%5OsvO&u
zZKu{=+0D6zohiIotE~0pKGs-^_mf&56r!SM{#Try3XDXKyHwza^0-B2KrTsexHXU9
zHcKz~AB=?WF!&Ds1^<M9$KT=y_<Q^vz2HskK#paB99mHdZA=WUEQA)q$nwz%7uslU
GAoCZ%uCn0(

delta 333
zcmZoTAkwfvWP+3s^B)EVhCm?p1Y%|&Zl9=Q#Kin(W5N=CW?h!%$?O8rn++8dSvEI|
zG;%Ww@XedduAsPCu%L`@^E|yoMn>HxgKY+kEFbt-d4DnR&*!)0yTez>`wOV&1@H7<
zx=h(3hPsC43I?WDCYDx)=6V)J=B6eV(<}9u{6R8i3P#3OCdO6<hI$4TmKMe))9>gp
z`66VDtV~VyOf8HI%}lr3>N6c*z{bk&!NBjao#z6RIRE4Z0rlzJ;Y=#qbM7-u2>?3l
zJxENj&4GED1B(HSFTu_P^qB_(!*m4)7Lm;g1^4*3O<-Xukm2O$XW$p%%jQ1D&Bs;G
z`I+MZM?aqhhb0ICeIUuf!t;qCY;vJM(Dr@~)>IZIMz_s{0#1xfhN;sha<HmxPvB!+
Gzz6_)I9K2R

diff --git a/links/forms.py b/links/forms.py
index fe301cc..9e48c91 100644
--- a/links/forms.py
+++ b/links/forms.py
@@ -88,9 +88,10 @@ class MultipleFileField(forms.FileField):
 class ImageCollectionForm(forms.ModelForm):
     class Meta:
         model = ImageCollection
-        fields = ['name', 'description']
+        fields = ['name', 'description', 'tags']
         widgets = {
             'description': forms.Textarea(attrs={'rows': 3}),
+            'tags': forms.SelectMultiple(attrs={'class': 'select2'}),
         }
 
 class ImageUploadForm(forms.ModelForm):
diff --git a/links/migrations/0028_imagecollection_tags.py b/links/migrations/0028_imagecollection_tags.py
new file mode 100644
index 0000000..74599c9
--- /dev/null
+++ b/links/migrations/0028_imagecollection_tags.py
@@ -0,0 +1,18 @@
+# Generated by Django 5.0.9 on 2024-12-19 05:48
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('links', '0027_remove_tag_color'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='imagecollection',
+            name='tags',
+            field=models.ManyToManyField(blank=True, related_name='image_collections', to='links.tag', verbose_name='Tags'),
+        ),
+    ]
diff --git a/links/models.py b/links/models.py
index 1858d92..0f39898 100644
--- a/links/models.py
+++ b/links/models.py
@@ -275,6 +275,7 @@ class ImageCollection(models.Model):
     id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)
     name = models.CharField(_('Name'), max_length=200)
     description = models.TextField(_('Description'), blank=True)
+    tags = models.ManyToManyField('Tag', verbose_name=_('Tags'), blank=True, related_name='image_collections')
     created_at = models.DateTimeField(_('Created at'), auto_now_add=True)
     updated_at = models.DateTimeField(_('Updated at'), auto_now=True)
 
diff --git a/links/templates/links/collection_detail.html b/links/templates/links/collection_detail.html
index da68076..0abafab 100644
--- a/links/templates/links/collection_detail.html
+++ b/links/templates/links/collection_detail.html
@@ -176,10 +176,25 @@
     <div class="flex flex-col space-y-4 sm:space-y-0 sm:flex-row sm:justify-between sm:items-start mb-6">
         <!-- Title and Description -->
         <div class="flex-1">
-            <h1 class="text-2xl sm:text-3xl font-bold text-gray-900">{{ collection.name }}</h1>
             {% if collection.description %}
-                <p class="mt-2 text-gray-600">{{ collection.description }}</p>
+                <div class="mb-4">
+                    <h3 class="text-lg font-medium text-gray-900 mb-2">{% trans "Description" %}</h3>
+                    <p class="text-gray-600">{{ collection.description }}</p>
+                </div>
             {% endif %}
+
+            <!-- Tags Section -->
+            <div class="mb-6">
+                <div class="flex flex-wrap gap-2">
+                    {% for tag in collection.tags.all %}
+                    <a href="{% url 'tag-detail' tag.slug %}" class="tag-item">
+                        {{ tag.name }}
+                    </a>
+                    {% empty %}
+                    <span class="text-sm text-gray-500">{% trans "No tags" %}</span>
+                    {% endfor %}
+                </div>
+            </div>
         </div>
 
         <!-- Action Buttons -->
@@ -319,6 +334,14 @@
 {% block extra_js %}
 <script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
 <script>
+document.addEventListener('DOMContentLoaded', function() {
+    const colors = ['blue', 'green', 'yellow', 'red', 'indigo', 'purple', 'pink'];
+    document.querySelectorAll('.tag-item').forEach(tag => {
+        const randomColor = colors[Math.floor(Math.random() * colors.length)];
+        tag.className = `tag-item inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-${randomColor}-50 text-${randomColor}-700 hover:bg-${randomColor}-100`;
+    });
+});
+
 Dropzone.autoDiscover = false;
 
 const dropzone = new Dropzone("#uploadForm", {
diff --git a/links/templates/links/collection_form.html b/links/templates/links/collection_form.html
index ec2af1b..f19176a 100644
--- a/links/templates/links/collection_form.html
+++ b/links/templates/links/collection_form.html
@@ -1,6 +1,24 @@
 {% extends 'base.html' %}
 {% load i18n %}
 
+{% block extra_css %}
+<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
+<style>
+    .select2-container--classic .select2-selection--multiple {
+        border: 1px solid #d1d5db !important;
+        border-radius: 0.375rem !important;
+        min-height: 38px !important;
+    }
+    .select2-container--classic .select2-selection--multiple .select2-selection__choice {
+        background-color: #e5e7eb !important;
+        border: 1px solid #d1d5db !important;
+        border-radius: 0.25rem !important;
+        padding: 2px 8px !important;
+        margin: 3px !important;
+    }
+</style>
+{% endblock %}
+
 {% block content %}
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
     <!-- Back Button -->
@@ -38,7 +56,7 @@
                         <input type="text"
                                name="{{ form.name.name }}"
                                id="{{ form.name.id_for_label }}"
-                               value="{{ form.name.value|default:'' }}"
+                               value="{{ form.name.value|default_if_none:'' }}"
                                class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
                                required>
                     </div>
@@ -56,13 +74,26 @@
                         <textarea name="{{ form.description.name }}"
                                   id="{{ form.description.id_for_label }}"
                                   rows="3"
-                                  class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border border-gray-300 rounded-md">{{ form.description.value|default:'' }}</textarea>
+                                  class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md">{{ form.description.value|default_if_none:'' }}</textarea>
                     </div>
                     {% if form.description.errors %}
                         <p class="mt-2 text-sm text-red-600">{{ form.description.errors.0 }}</p>
                     {% endif %}
                 </div>
 
+                <!-- Tags Field -->
+                <div>
+                    <label for="{{ form.tags.id_for_label }}" class="block text-sm font-medium text-gray-700">
+                        {{ form.tags.label }}
+                    </label>
+                    <div class="mt-1">
+                        {{ form.tags }}
+                    </div>
+                    {% if form.tags.errors %}
+                        <p class="mt-2 text-sm text-red-600">{{ form.tags.errors.0 }}</p>
+                    {% endif %}
+                </div>
+
                 <!-- Action Buttons -->
                 <div class="pt-5">
                     <div class="flex justify-end space-x-3">
@@ -72,7 +103,11 @@
                         </a>
                         <button type="submit"
                                 class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
-                            {% trans "Save" %}
+                            {% if form.instance.pk %}
+                                {% trans "Update Collection" %}
+                            {% else %}
+                                {% trans "Create Collection" %}
+                            {% endif %}
                         </button>
                     </div>
                 </div>
@@ -81,3 +116,32 @@
     </div>
 </div>
 {% endblock %}
+
+{% block extra_js %}
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
+<script>
+    $(document).ready(function() {
+        // Initialize Select2 for tags
+        $('#id_tags').select2({
+            theme: 'classic',
+            width: '100%',
+            placeholder: '{% trans "Select tags" %}',
+            allowClear: true,
+            tags: true, // Allow creating new tags
+            tokenSeparators: [',', ' '],
+            createTag: function(params) {
+                var term = $.trim(params.term);
+                if (term === '') {
+                    return null;
+                }
+                return {
+                    id: term,
+                    text: term,
+                    newTag: true
+                };
+            }
+        });
+    });
+</script>
+{% endblock %}
diff --git a/links/templates/links/collection_list.html b/links/templates/links/collection_list.html
index 6a10ee8..657c648 100644
--- a/links/templates/links/collection_list.html
+++ b/links/templates/links/collection_list.html
@@ -49,17 +49,17 @@
 
                             <!-- Collection Info - Flex Grow to Fill Remaining Space -->
                             <div class="flex-1 p-3 sm:p-4 flex flex-col">
-                                <h3 class="text-base sm:text-lg font-medium text-gray-900 group-hover:text-blue-600 transition-colors duration-200 line-clamp-1">
-                                    {{ collection.name }}
-                                </h3>
-                                <p class="mt-0.5 text-xs sm:text-sm text-gray-500">
-                                    {{ collection.images.count }} {% trans "images" %}
-                                </p>
-                                {% if collection.description %}
-                                    <p class="mt-1 text-xs sm:text-sm text-gray-600 line-clamp-2 flex-1">
-                                        {{ collection.description }}
+                                <div class="flex-1">
+                                    <h3 class="text-lg font-semibold text-gray-900 mb-2">{{ collection.name }}</h3>
+                                    {% if collection.description %}
+                                        <p class="text-sm text-gray-600 mb-4">{{ collection.description }}</p>
+                                    {% endif %}
+
+                                    <!-- Image Count -->
+                                    <p class="mt-0.5 text-xs sm:text-sm text-gray-500">
+                                        {{ collection.images.count }} {% trans "images" %}
                                     </p>
-                                {% endif %}
+                                </div>
                             </div>
                         </div>
                     </a>
@@ -142,6 +142,32 @@ function deleteCollection(collectionId) {
         });
     }
 }
+
+document.addEventListener('DOMContentLoaded', function() {
+    const colors = [
+        'bg-blue-50 hover:bg-blue-100 text-blue-700',
+        'bg-green-50 hover:bg-green-100 text-green-700',
+        'bg-yellow-50 hover:bg-yellow-100 text-yellow-700',
+        'bg-red-50 hover:bg-red-100 text-red-700',
+        'bg-indigo-50 hover:bg-indigo-100 text-indigo-700',
+        'bg-purple-50 hover:bg-purple-100 text-purple-700',
+        'bg-pink-50 hover:bg-pink-100 text-pink-700',
+        'bg-cyan-50 hover:bg-cyan-100 text-cyan-700',
+        'bg-orange-50 hover:bg-orange-100 text-orange-700',
+        'bg-teal-50 hover:bg-teal-100 text-teal-700',
+        'bg-lime-50 hover:bg-lime-100 text-lime-700',
+        'bg-emerald-50 hover:bg-emerald-100 text-emerald-700',
+        'bg-sky-50 hover:bg-sky-100 text-sky-700',
+        'bg-violet-50 hover:bg-violet-100 text-violet-700',
+        'bg-rose-50 hover:bg-rose-100 text-rose-700',
+        'bg-amber-50 hover:bg-amber-100 text-amber-700'
+    ];
+
+    document.querySelectorAll('.tag-card').forEach(tag => {
+        const randomColor = colors[Math.floor(Math.random() * colors.length)];
+        tag.classList.add(...randomColor.split(' '));
+    });
+});
 </script>
 {% endblock %}
 {% endblock %}
diff --git a/new_theme/static/css/dist/styles.css b/new_theme/static/css/dist/styles.css
index 3450973..40a1531 100644
--- a/new_theme/static/css/dist/styles.css
+++ b/new_theme/static/css/dist/styles.css
@@ -795,6 +795,14 @@ video {
   margin-top: 2rem;
 }
 
+.-ml-4 {
+  margin-left: -1rem;
+}
+
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
+
 .line-clamp-1 {
   overflow: hidden;
   display: -webkit-box;
@@ -916,6 +924,14 @@ video {
   min-height: 100vh;
 }
 
+.min-h-0 {
+  min-height: 0px;
+}
+
+.min-h-\[120px\] {
+  min-height: 120px;
+}
+
 .w-12 {
   width: 3rem;
 }
@@ -1046,6 +1062,10 @@ video {
           user-select: all;
 }
 
+.resize-y {
+  resize: vertical;
+}
+
 .resize {
   resize: both;
 }
@@ -1120,6 +1140,10 @@ video {
   gap: 1.5rem;
 }
 
+.gap-3 {
+  gap: 0.75rem;
+}
+
 .gap-x-4 {
   -moz-column-gap: 1rem;
        column-gap: 1rem;
@@ -1248,6 +1272,10 @@ video {
   border-radius: 0.375rem;
 }
 
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+
 .rounded-l-md {
   border-top-left-radius: 0.375rem;
   border-bottom-left-radius: 0.375rem;
@@ -1514,6 +1542,18 @@ video {
   background-color: rgb(245 243 255 / var(--tw-bg-opacity));
 }
 
+.bg-black\/50 {
+  background-color: rgb(0 0 0 / 0.5);
+}
+
+.bg-black\/75 {
+  background-color: rgb(0 0 0 / 0.75);
+}
+
+.bg-gray-900\/75 {
+  background-color: rgb(17 24 39 / 0.75);
+}
+
 .bg-opacity-20 {
   --tw-bg-opacity: 0.2;
 }
@@ -1792,6 +1832,10 @@ video {
   line-height: 1.25;
 }
 
+.leading-relaxed {
+  line-height: 1.625;
+}
+
 .tracking-normal {
   letter-spacing: 0em;
 }
@@ -2898,4 +2942,8 @@ video {
   .xl\:grid-cols-6 {
     grid-template-columns: repeat(6, minmax(0, 1fr));
   }
+
+  .xl\:grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
 }