diff --git a/links/templates/links/_link_row.html b/links/templates/links/_link_row.html new file mode 100644 index 0000000..bf090b3 --- /dev/null +++ b/links/templates/links/_link_row.html @@ -0,0 +1,44 @@ +{% load i18n %} + + + + + + {{ link.alias }} + + + {% if '{' in link.original_url and '}' in link.original_url %} + {% trans "Template" %} + {% elif link.link_type == 'LINK' %} + {% trans "Link" %} + {% else %} + {% trans "Custom" %} + {% endif %} + + +
+ {{ link.original_url }} +
+ + {{ link.click_count }} + +
+ + + + + + + + + +
+ + diff --git a/links/templates/links/link_list.html b/links/templates/links/link_list.html index bab816c..293dacc 100644 --- a/links/templates/links/link_list.html +++ b/links/templates/links/link_list.html @@ -101,6 +101,10 @@ /* ---------- Hero search (frosted glass pill) ---------- */ .hero-search { position: relative; max-width: 40rem; margin: 2.6rem auto 0; text-align: left; } + /* Must stack above .hero-stats (which shares the same z-index: 1 from the + ">*:not(.hero-glow)" rule above) so the search results dropdown never + renders underneath the stats row. */ + .apple-hero > .hero-search { z-index: 20; } .hero-search .search-icon { position: absolute; left: 1.4rem; top: 50%; transform: translateY(-50%); width: 1.25rem; height: 1.25rem; color: var(--apple-gray); pointer-events: none; @@ -264,6 +268,14 @@ } .selection-hint { font-size: 0.85rem; color: var(--apple-gray); margin: 0; } + .library-load-more { display: flex; justify-content: center; padding: 0.4rem 1.8rem 1.2rem; } + .apple-btn-secondary { + background: var(--apple-bg); color: var(--apple-text); + border: 1px solid rgba(0, 0, 0, 0.10); + } + .apple-btn-secondary:hover { background: #ececef; } + .apple-btn-secondary[disabled] { opacity: 0.55; cursor: default; pointer-events: none; } + /* ---------- Posts ---------- */ .posts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; list-style: none; margin: 0; padding: 0; } .post-card { @@ -428,7 +440,7 @@
- {{ links|length }} + {{ total_links_count }} {% trans "Links" %}
@@ -444,6 +456,9 @@
+

+ {% blocktrans count counter=total_links_count %}{{ counter }} link{% plural %}{{ counter }} links{% endblocktrans %} +

@@ -516,49 +531,7 @@ {% for link in links %} - - - - - - {{ link.alias }} - - - {% if '{' in link.original_url and '}' in link.original_url %} - {% trans "Template" %} - {% elif link.link_type == 'LINK' %} - {% trans "Link" %} - {% else %} - {% trans "Custom" %} - {% endif %} - - -
- {{ link.original_url }} -
- - {{ link.click_count }} - -
- - - - - - - - - -
- - + {% include 'links/_link_row.html' %} {% empty %} {% trans "No links available" %} @@ -567,6 +540,20 @@
+ {% if has_more_links %} +
+ +
+ {% endif %}

@@ -880,6 +867,38 @@ }); } + /* ---------- Load more links ---------- */ + const loadMoreBtn = document.getElementById('load-more-links'); + if (loadMoreBtn && tbody) { + loadMoreBtn.addEventListener('click', function () { + const offset = loadMoreBtn.dataset.offset; + const sort = loadMoreBtn.dataset.sort; + const order = loadMoreBtn.dataset.order; + + loadMoreBtn.disabled = true; + loadMoreBtn.textContent = '{% trans "Loading…" %}'; + + const params = new URLSearchParams({ offset, sort, order }); + fetch(`{% url 'load_more_links' %}?${params.toString()}`) + .then(response => response.json()) + .then(data => { + tbody.insertAdjacentHTML('beforeend', data.html); + if (data.has_more) { + loadMoreBtn.dataset.offset = data.next_offset; + loadMoreBtn.disabled = false; + loadMoreBtn.textContent = '{% trans "Load more" %}'; + } else { + loadMoreBtn.remove(); + } + }) + .catch(error => { + console.error('Error loading more links:', error); + loadMoreBtn.disabled = false; + loadMoreBtn.textContent = '{% trans "Load more" %}'; + }); + }); + } + /* ---------- Select-all + selection hint ---------- */ const selectAll = document.getElementById('select-all'); const selectionHint = document.getElementById('selection-hint'); diff --git a/links/urls.py b/links/urls.py index dc44ac0..2173cca 100644 --- a/links/urls.py +++ b/links/urls.py @@ -14,6 +14,7 @@ urlpatterns = [ path('update//', views.LinkUpdateView.as_view(), name='link_update'), path('delete//', views.LinkDeleteView.as_view(), name='link_delete'), path('delete-selected/', views.delete_selected, name='delete_selected'), + path('links/load-more/', views.load_more_links, name='load_more_links'), path('detail//', views.LinkDetailView.as_view(), name='link_detail'), path('ui/search/', search_views.SearchReactView.as_view(), name='search'), path('link//', views.LinkDetailView.as_view(), name='link_detail'), diff --git a/links/views.py b/links/views.py index 853fb0a..4446e0f 100644 --- a/links/views.py +++ b/links/views.py @@ -45,6 +45,27 @@ from .search_views import search_aliases, search logger = logging.getLogger(__name__) +# Number of link rows rendered on the initial home page load / per "Load more" click. +LINKS_PAGE_SIZE = 50 + + +def _ordering_for(sort_by, order): + """Shared ordering logic for the link list page and its load-more endpoint.""" + if sort_by == 'alias': + return F('alias').asc(nulls_last=True) if order == 'asc' else F('alias').desc(nulls_last=True) + elif sort_by == 'link_type': + return F('link_type').asc(nulls_last=True) if order == 'asc' else F('link_type').desc(nulls_last=True) + elif sort_by == 'original_url': + return F('original_url').asc(nulls_last=True) if order == 'asc' else F('original_url').desc(nulls_last=True) + elif sort_by == 'clicks': + return F('click_count').asc(nulls_last=True) if order == 'asc' else F('click_count').desc(nulls_last=True) + elif sort_by == 'created_at': + return F('created_at').asc(nulls_last=True) if order == 'asc' else F('created_at').desc(nulls_last=True) + elif sort_by == 'updated_at': + return F('updated_at').asc(nulls_last=True) if order == 'asc' else F('updated_at').desc(nulls_last=True) + return F('click_count').desc(nulls_last=True) + + class LinkListView(ListView): model = Link template_name = 'links/link_list.html' @@ -54,23 +75,7 @@ class LinkListView(ListView): queryset = super().get_queryset() sort_by = self.request.GET.get('sort', 'click_count') order = self.request.GET.get('order', 'asc') - - if sort_by == 'alias': - ordering = F('alias').asc(nulls_last=True) if order == 'asc' else F('alias').desc(nulls_last=True) - elif sort_by == 'link_type': - ordering = F('link_type').asc(nulls_last=True) if order == 'asc' else F('link_type').desc(nulls_last=True) - elif sort_by == 'original_url': - ordering = F('original_url').asc(nulls_last=True) if order == 'asc' else F('original_url').desc(nulls_last=True) - elif sort_by == 'clicks': - ordering = F('click_count').asc(nulls_last=True) if order == 'asc' else F('click_count').desc(nulls_last=True) - elif sort_by == 'created_at': - ordering = F('created_at').asc(nulls_last=True) if order == 'asc' else F('created_at').desc(nulls_last=True) - elif sort_by == 'updated_at': - ordering = F('updated_at').asc(nulls_last=True) if order == 'asc' else F('updated_at').desc(nulls_last=True) - else: - ordering = F('click_count').desc(nulls_last=True) - - return queryset.order_by(ordering) + return queryset.order_by(_ordering_for(sort_by, order)) def get_context_data(self, **kwargs): context = super().get_context_data(**kwargs) @@ -105,8 +110,45 @@ class LinkListView(ListView): total=Sum('click_count') )['total'] or 0 + # Only render the first page of links up front (fastest by far for + # large link libraries); the rest is fetched on demand via the + # "Load more" button, which calls load_more_links() below. + total_links_count = context['links'].count() + context['total_links_count'] = total_links_count + context['links_page_size'] = LINKS_PAGE_SIZE + context['links'] = context['links'][:LINKS_PAGE_SIZE] + context['has_more_links'] = total_links_count > LINKS_PAGE_SIZE + return context + +def load_more_links(request): + """Return the next page of link rows (rendered as HTML) for the + home page's "Load more" button, so the initial page load doesn't have + to render the entire link table at once.""" + sort_by = request.GET.get('sort', 'click_count') + order = request.GET.get('order', 'asc') + try: + offset = max(int(request.GET.get('offset', 0)), 0) + except (TypeError, ValueError): + offset = 0 + + queryset = Link.objects.order_by(_ordering_for(sort_by, order)) + total_count = queryset.count() + page = queryset[offset:offset + LINKS_PAGE_SIZE] + + rows_html = ''.join( + render(request, 'links/_link_row.html', {'link': link}).content.decode('utf-8') + for link in page + ) + next_offset = offset + LINKS_PAGE_SIZE + + return JsonResponse({ + 'html': rows_html, + 'has_more': next_offset < total_count, + 'next_offset': next_offset, + }) + class LinkCreateView(CreateView): model = Link form_class = LinkForm