From 1617651a09b8f420d86e2ed952df2ce2ccb002af Mon Sep 17 00:00:00 2001
From: Pascal Repond <pascal.repond@rero.ch>
Date: Sat, 3 Jan 2026 18:30:45 +0100
Subject: [PATCH] feat(ui): enhance media list views display

- Improved layout, colours and buttons for better user experience.
- Created templatetags for media icons to standardize icon rendering across the app.
- Updated relevant views and templates to integrate new features seamlessly.
---
 .vscode/settings.json                         |   1 +
 src/core/forms.py                             |   2 +-
 src/core/templatetags/__init__.py             |   0
 src/core/templatetags/media_tags.py           |  75 +++++++++++
 src/core/urls.py                              |   2 -
 src/core/views.py                             |  48 -------
 src/templates/backup_manage.html              |   1 -
 .../partials/media-contributors.html          |  14 ++
 src/templates/partials/media-cover.html       |  16 +++
 src/templates/partials/media-edit-button.html |   7 +
 src/templates/partials/media-icon.html        |   1 +
 src/templates/partials/media-items.html       | 127 ++++++++----------
 src/templates/partials/media-list.html        |  18 ++-
 .../partials/media-review-clamped.html        |   6 +-
 src/templates/partials/media-review-full.html |   2 +-
 src/templates/partials/media-score-badge.html |   9 ++
 .../partials/media-status-badge.html          |   4 +
 .../partials/review-date-editable.html        |  98 --------------
 src/templates/partials/score-editable.html    | 103 --------------
 src/templates/partials/status-editable.html   |  55 --------
 src/tests/core/test_views.py                  |   6 +-
 21 files changed, 197 insertions(+), 398 deletions(-)
 create mode 100644 src/core/templatetags/__init__.py
 create mode 100644 src/core/templatetags/media_tags.py
 create mode 100644 src/templates/partials/media-contributors.html
 create mode 100644 src/templates/partials/media-cover.html
 create mode 100644 src/templates/partials/media-edit-button.html
 create mode 100644 src/templates/partials/media-icon.html
 create mode 100644 src/templates/partials/media-score-badge.html
 create mode 100644 src/templates/partials/media-status-badge.html
 delete mode 100644 src/templates/partials/review-date-editable.html
 delete mode 100644 src/templates/partials/score-editable.html
 delete mode 100644 src/templates/partials/status-editable.html

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 5e4fe5a..980596b 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -11,4 +11,5 @@
         "prettier.tabWidth": 2,
         "editor.tabSize": 2
     },
+    "djlint.ignore": "H006"
 }
\ No newline at end of file
diff --git a/src/core/forms.py b/src/core/forms.py
index 8c43b9a..13394b9 100644
--- a/src/core/forms.py
+++ b/src/core/forms.py
@@ -59,7 +59,7 @@ class Meta:
             "review_date": forms.TextInput(
                 attrs={
                     "class": "input validator w-full",
-                    "placeholder": _("YYYY, MM-YYYY, or DD-MM-YYYY"),
+                    "placeholder": _("YYYY, MM-YYYY, or YYYY-MM-DD"),
                 }
             ),
             "cover": CoverImageWidget(attrs={"class": "file-input file-input-ghost w-full max-w-xs"}),
diff --git a/src/core/templatetags/__init__.py b/src/core/templatetags/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/src/core/templatetags/media_tags.py b/src/core/templatetags/media_tags.py
new file mode 100644
index 0000000..542774d
--- /dev/null
+++ b/src/core/templatetags/media_tags.py
@@ -0,0 +1,75 @@
+"""Custom template tags for media-related functionality."""
+
+from django import template
+
+register = template.Library()
+
+
+MEDIA_TYPE_ICONS = {
+    "BOOK": "book-open",
+    "GAME": "computer-desktop",
+    "MUSIC": "musical-note",
+    "COMIC": "book-open",
+    "FILM": "film",
+    "TV": "tv",
+    "PERF": "ticket",
+    "BROADCAST": "microphone",
+}
+
+SIZE_CLASSES = {
+    "sm": "w-4 h-4",
+    "md": "w-6 h-6",
+    "lg": "w-8 h-8",
+}
+
+STATUS_CLASSES = {
+    "PLANNED": "badge-info",
+    "IN_PROGRESS": "badge-accent",
+    "COMPLETED": "badge-success",
+    "PAUSED": "badge-neutral",
+    "DNF": "badge-error",
+}
+
+
+@register.inclusion_tag("partials/media-icon.html")
+def media_icon(media_type, size="sm"):
+    """
+    Render a heroicon based on media type.
+
+    Args:
+        media_type: The type of media (BOOK, GAME, MUSIC, etc.)
+        size: Icon size (sm, md, lg) - default 'sm'
+
+    Returns:
+        Context dict with icon_name and size_class
+
+    Example usage:
+        {% load media_tags %}
+        {% media_icon media.media_type size="md" %}
+    """
+
+    icon_name = MEDIA_TYPE_ICONS.get(media_type, "question-mark-circle")
+    size_class = SIZE_CLASSES.get(size, "w-4 h-4")
+
+    return {
+        "icon_name": icon_name,
+        "size_class": size_class,
+    }
+
+
+@register.filter
+def status_badge_class(status):
+    """
+    Return the appropriate DaisyUI badge class for a given status.
+
+    Args:
+        status: The media status (PLANNED, IN_PROGRESS, etc.)
+
+    Returns:
+        String with DaisyUI badge class name
+
+    Example usage:
+        <span class="badge {{ media.status|status_badge_class }}">
+    """
+
+    return STATUS_CLASSES.get(status, "badge-ghost")
diff --git a/src/core/urls.py b/src/core/urls.py
index b09953c..c8e94d9 100644
--- a/src/core/urls.py
+++ b/src/core/urls.py
@@ -15,8 +15,6 @@
     path("media/validate_field/", validate_media_field, name="media_validate_field"),
     path("media/<int:pk>/review-full/", views.media_review_full_htmx, name="media_review_full_htmx"),
     path("media/<int:pk>/review-clamped/", views.media_review_clamped_htmx, name="media_review_clamped_htmx"),
-    path("media/<int:pk>/update-score/", views.media_update_score_htmx, name="media_update_score_htmx"),
-    path("media/<int:pk>/update-status/", views.media_update_status_htmx, name="media_update_status_htmx"),
     # Backup management
     path("backup/", views.backup_manage, name="backup_manage"),
     path("backup/export/", views.backup_export, name="backup_export"),
diff --git a/src/core/views.py b/src/core/views.py
index 68f99e9..0999320 100644
--- a/src/core/views.py
+++ b/src/core/views.py
@@ -280,54 +280,6 @@ def media_review_full_htmx(request, pk):
     return render(request, "partials/media-review-full.html", {"media": media})
 
 
-@login_required
-def media_update_score_htmx(request, pk):
-    """HTMX view: update media score and return updated score widget."""
-    media = get_object_or_404(Media, pk=pk)
-
-    if request.method == "POST":
-        score_value = request.POST.get("score", "").strip()
-
-        # Handle empty score (clear)
-        if score_value == "":
-            media.score = None
-            media.save()
-        else:
-            try:
-                score = int(score_value)
-                # Validate that score is one of the valid choices
-                valid_scores = dict(Media.score.field.choices).keys()
-                if score in valid_scores:
-                    media.score = score
-                    media.save()
-            except ValueError:
-                # Invalid score format, don't update
-                pass
-
-    return render(request, "partials/score-editable.html", {"media": media})
-
-
-@login_required
-def media_update_status_htmx(request, pk):
-    """HTMX view: update media status and return updated status widget."""
-    media = get_object_or_404(Media, pk=pk)
-
-    if request.method == "POST":
-        status_value = request.POST.get("status", "").strip()
-
-        # Validate that status is one of the valid choices
-        valid_statuses = dict(Media.status.field.choices).keys()
-        if status_value in valid_statuses:
-            media.status = status_value
-            media.save()
-
-    context = {
-        "media": media,
-        "status_choices": Media.status.field.choices,
-    }
-    return render(request, "partials/status-editable.html", context)
-
-
 @login_required
 def backup_export(request):
     """Export backup and download it."""
diff --git a/src/templates/backup_manage.html b/src/templates/backup_manage.html
index 47c79f5..10f296d 100644
--- a/src/templates/backup_manage.html
+++ b/src/templates/backup_manage.html
@@ -1,6 +1,5 @@
 {% extends "base.html" %}
 {% load static %}
-{% load heroicons %}
 {% load i18n %}
 {% block title %}
   {% translate "Backup Management" %} - Datakult
diff --git a/src/templates/partials/media-contributors.html b/src/templates/partials/media-contributors.html
new file mode 100644
index 0000000..e5af5e8
--- /dev/null
+++ b/src/templates/partials/media-contributors.html
@@ -0,0 +1,14 @@
+{# Renders the list of contributors with HTMX links #}
+{# Parameters: media #}
+{% if media.contributors.all %}
+  {% for contributor in media.contributors.all %}
+    <a href="#"
+       class="link link-hover contributor-link"
+       data-contributor-id="{{ contributor.id }}"
+       data-contributor-name="{{ contributor.name }}"
+       hx-get="{% url 'home' %}?contributor={{ contributor.id }}"
+       hx-target="#media-list"
+       hx-include="#view-mode-input, #sort, #type, #status, #score, #review-from, #review-to"
+       hx-push-url="true">{{ contributor.name }}</a>{% if not forloop.last %};{% endif %}
+  {% endfor %}
+{% endif %}
diff --git a/src/templates/partials/media-cover.html b/src/templates/partials/media-cover.html
new file mode 100644
index 0000000..ea20afa
--- /dev/null
+++ b/src/templates/partials/media-cover.html
@@ -0,0 +1,16 @@
+{% load i18n %}
+{% load media_tags %}
+<div class="relative w-24 h-32 bg-base-300 rounded">
+  {% if media.cover %}
+    <img src="{{ media.cover.url }}"
+         alt="{% translate "Cover of" %} {{ media.title }}"
+         class="w-full h-full object-contain rounded">
+  {% else %}
+    <div class="w-full h-full flex items-center justify-center text-base-content/30">
+      {% heroicon_outline "photo" class="w-12 h-12" %}
+    </div>
+  {% endif %}
+  <div class="absolute top-1 left-1">
+    <span class="badge badge-neutral badge-sm" aria-label="{{ media.get_media_type_display }}">{% media_icon media.media_type size="sm" %}</span>
+  </div>
+</div>
diff --git a/src/templates/partials/media-edit-button.html b/src/templates/partials/media-edit-button.html
new file mode 100644
index 0000000..fbdd8d7
--- /dev/null
+++ b/src/templates/partials/media-edit-button.html
@@ -0,0 +1,7 @@
+{% load i18n %}
+{# Renders the edit button for a media #}
+{# Parameters: media #}
+<a href="{% url 'media_edit' media.id %}"
+   class="btn btn-outline btn-sm btn-primary tooltip"
+   data-tip="{% translate "Edit" %}"
+   aria-label="{% translate "Edit" %} {{ media.title }}">{% heroicon_outline "pencil-square" %}</a>
diff --git a/src/templates/partials/media-icon.html b/src/templates/partials/media-icon.html
new file mode 100644
index 0000000..46eaebb
--- /dev/null
+++ b/src/templates/partials/media-icon.html
@@ -0,0 +1 @@
+{% heroicon_outline icon_name class=size_class %}
diff --git a/src/templates/partials/media-items.html b/src/templates/partials/media-items.html
index 5becd65..b2bfc53 100644
--- a/src/templates/partials/media-items.html
+++ b/src/templates/partials/media-items.html
@@ -1,104 +1,85 @@
 {% load i18n %}
+{% load media_tags %}
 {# This partial renders only the media items without the container #}
 {% if view_mode == 'grid' %}
-  {# Grid items #}
+  {# Grid view - Cards #}
   {% for media in media_list %}
-    <div class="card lg:card-side bg-base-200 shadow-md hover:shadow-lg transition-shadow">
-      <figure class="basis-1/4 shrink-0 grow-0 h-full bg-base-300">
+    <div class="card bg-base-200 shadow-sm">
+      <figure class="relative w-full h-64 bg-base-300">
         {% if media.cover %}
           <img src="{{ media.cover.url }}"
-               alt="{{ media.title }}"
-               width="200"
-               height="300"
-               class="w-full h-full object-cover">
+               alt="{% translate "Cover of" %} {{ media.title }}"
+               class="w-full h-full object-contain">
         {% else %}
           <div class="w-full h-full flex items-center justify-center text-base-content/30">
-            {% heroicon_outline "photo" class="w-16 h-16" %}
+            {% heroicon_outline "photo" class="w-24 h-24" %}
           </div>
         {% endif %}
+        <div class="absolute top-2 left-2">
+          <span class="badge badge-neutral badge-lg"
+                aria-label="{{ media.get_media_type_display }}">{% media_icon media.media_type size="md" %}</span>
+        </div>
+        {% if media.score %}
+          <div class="absolute top-2 right-2">{% include "partials/media-score-badge.html" %}</div>
+        {% endif %}
       </figure>
-      <div class="card-body basis-3/4 p-3 h-full">
-        <h3 class="card-title text-sm line-clamp-2">
-          <a href="{% url 'media_edit' media.id %}" class="link link-hover">{{ media.title }}</a>
-        </h3>
-        <div class="text-xs space-y-1">
-          {% for contributor in media.contributors.all %}
-            <a href="#"
-               class="link link-secondary contributor-link"
-               data-contributor-id="{{ contributor.id }}"
-               data-contributor-name="{{ contributor.name }}"
-               hx-get="{% url 'home' %}?contributor={{ contributor.id }}"
-               hx-target="#media-list"
-               hx-include="#view-mode-input, #sort, #type, #status, #score, #review-from, #review-to"
-               hx-push-url="true">{{ contributor.name }}</a>
-            {% if not forloop.last %};{% endif %}
-          {% endfor %}
-          <div class="flex items-center gap-2 mt-1">
-            <span class="badge badge-sm">{{ media.get_media_type_display }}</span>
-            {% include "partials/status-editable.html" with status_choices=status_choices %}
+      <div class="card-body p-3">
+        <div class="flex justify-between gap-2">
+          <div>
+            <h3 class="card-title inline">{{ media.title }}</h3>
+            {% if media.pub_year %}<span class="opacity-70">({{ media.pub_year }})</span>{% endif %}
+            <div>{% include "partials/media-contributors.html" %}</div>
           </div>
-          {% include "partials/score-editable.html" %}
-          {% if media.review %}
-            <div id="review-cell-{{ media.id }}" class="text-sm review-text mt-2">
-              {% include "partials/media-review-clamped.html" %}
-            </div>
-          {% endif %}
-          {% if media.review_date %}
-            <div class="text-xs opacity-70 mt-1">{{ media.review_date }}</div>
-          {% endif %}
+          {% include "partials/media-edit-button.html" %}
         </div>
+        {% include "partials/media-status-badge.html" %}
+        {% if media.review %}
+          <div id="review-cell-{{ media.id }}" class="text-sm review-text">
+            {% include "partials/media-review-clamped.html" %}
+          </div>
+        {% endif %}
       </div>
     </div>
   {% endfor %}
 {% else %}
-  {# Table rows #}
+  {# List view - Table rows #}
   {% for media in media_list %}
     <tr>
-      <td>
-        {% if media.cover %}
-          <img src="{{ media.cover.url }}"
-               alt="{% translate "Cover" %}"
-               width="64"
-               height="96"
-               class="w-16 h-24 object-cover">
-        {% else %}
-          <div class="w-16 h-24 bg-gray-200 flex items-center justify-center text-xs">No cover</div>
-        {% endif %}
-      </td>
-      <td>
-        <a href="{% url 'media_edit' media.id %}" class="link link-secondary">{{ media.title }}</a>
-      </td>
-      <td class="max-w-xs">
-        {% for contributor in media.contributors.all %}
-          <a href="#"
-             class="link link-secondary contributor-link"
-             data-contributor-id="{{ contributor.id }}"
-             data-contributor-name="{{ contributor.name }}"
-             hx-get="{% url 'home' %}?contributor={{ contributor.id }}"
-             hx-target="#media-list"
-             hx-include="#view-mode-input, #sort, #type, #status, #score, #review-from, #review-to"
-             hx-push-url="true">{{ contributor.name }}</a>
-          {% if not forloop.last %};{% endif %}
-        {% endfor %}
-      </td>
-      <td>{{ media.get_media_type_display }}</td>
-      <td>
-        {% include "partials/status-editable.html" with status_choices=status_choices %}
+      {# Cover with media type badge #}
+      <td class="align-top p-2">{% include "partials/media-cover.html" %}</td>
+      {# Title, contributors #}
+      <td class="align-top p-2">
+        <div class="flex flex-col gap-1">
+          <h3 class="font-bold text-base">
+            {{ media.title }}
+            {% if media.pub_year %}<span class="opacity-70 text-sm font-normal">({{ media.pub_year }})</span>{% endif %}
+          </h3>
+          {% if media.contributors.all %}
+            <div class="text-sm opacity-70">{% include "partials/media-contributors.html" %}</div>
+          {% endif %}
+        </div>
       </td>
-      <td>{{ media.pub_year | default:"" }}</td>
-      <td class="max-w-md">
-        {% include "partials/score-editable.html" %}
+      {# Review #}
+      <td class="align-top p-2 hidden md:table-cell">
+        {% include "partials/media-score-badge.html" with size="sm" extra_class="mb-2" %}
         {% if media.review %}
-          <div id="review-cell-{{ media.id }}" class="text-sm review-text mt-2">
+          <div id="review-cell-{{ media.id }}" class="text-sm max-w-200 review-text">
             {% include "partials/media-review-clamped.html" %}
           </div>
         {% endif %}
       </td>
-      <td>
+      {# Status #}
+      <td class="align-top p-2 hidden sm:table-cell">{% include "partials/media-status-badge.html" %}</td>
+      {# Review date #}
+      <td class="align-top p-2 hidden lg:table-cell">
         {% if media.review_date %}
-          <div class="text-xs opacity-70">{{ media.review_date }}</div>
+          <span class="text-sm">{{ media.review_date }}</span>
+        {% else %}
+          <span class="text-sm opacity-50">—</span>
         {% endif %}
       </td>
+      {# Actions #}
+      <td class="align-top p-2">{% include "partials/media-edit-button.html" %}</td>
     </tr>
   {% endfor %}
 {% endif %}
diff --git a/src/templates/partials/media-list.html b/src/templates/partials/media-list.html
index 7a95ac4..a9a0a14 100644
--- a/src/templates/partials/media-list.html
+++ b/src/templates/partials/media-list.html
@@ -3,22 +3,20 @@
   {% if page_obj %}
     {% if view_mode == 'grid' %}
       {# Grid view - Cards layout #}
-      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mt-4"
+      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 mt-4"
            id="media-container">{% include "partials/media-items-page.html" %}</div>
     {% else %}
       {# List view - Table layout #}
-      <div class="overflow-x-auto">
+      <div class="overflow-x-auto mt-4">
         <table class="table table-zebra" id="media-container">
           <thead>
             <tr>
-              <th>{% translate "Cover" %}</th>
-              <th>{% translate "Title" %}</th>
-              <th>{% translate "Contributor" %}</th>
-              <th>{% translate "Type" %}</th>
-              <th>{% translate "Status" %}</th>
-              <th>{% translate "Year" %}</th>
-              <th>{% translate "Review" %}</th>
-              <th>{% translate "Reviewed on" %}</th>
+              <th class="w-32">{% translate "Cover" %}</th>
+              <th class="w-64 lg:w-80">{% translate "Title" %}</th>
+              <th class="hidden md:table-cell">{% translate "Review" %}</th>
+              <th class="hidden sm:table-cell w-32">{% translate "Status" %}</th>
+              <th class="hidden lg:table-cell w-32">{% translate "Review date" %}</th>
+              <th class="w-32">{% translate "Actions" %}</th>
             </tr>
           </thead>
           <tbody>
diff --git a/src/templates/partials/media-review-clamped.html b/src/templates/partials/media-review-clamped.html
index a4ed5c4..853526a 100644
--- a/src/templates/partials/media-review-clamped.html
+++ b/src/templates/partials/media-review-clamped.html
@@ -1,8 +1,8 @@
 {# Display the review truncated with a 'See more' button (HTMX) #}
 {% load i18n %}
-{{ media.review_rendered | truncatewords_html:20 | safe }}
-{% if media.review|wordcount > 20 %}
-  <button class="btn btn-xs btn-ghost mt-1"
+{{ media.review_rendered | truncatewords_html:50 | safe }}
+{% if media.review|wordcount > 50 %}
+  <button class="btn btn-xs btn-outline -mt-3"
           hx-get="{% url 'media_review_full_htmx' media.id %}"
           hx-target="#review-cell-{{ media.id }}"
           hx-swap="innerHTML">{% translate "See more" %}</button>
diff --git a/src/templates/partials/media-review-full.html b/src/templates/partials/media-review-full.html
index 021ee3b..18b33d3 100644
--- a/src/templates/partials/media-review-full.html
+++ b/src/templates/partials/media-review-full.html
@@ -1,7 +1,7 @@
 {# Displays the full review for a media item (HTMX) #}
 {% load i18n %}
 <div class="review-text">{{ media.review_rendered | safe }}</div>
-<button class="btn btn-xs btn-ghost mt-1"
+<button class="btn btn-xs btn-outline -mt-3"
         hx-get="{% url 'media_review_clamped_htmx' media.id %}"
         hx-target="#review-cell-{{ media.id }}"
         hx-swap="innerHTML">{% translate "See less" %}</button>
diff --git a/src/templates/partials/media-score-badge.html b/src/templates/partials/media-score-badge.html
new file mode 100644
index 0000000..074fd02
--- /dev/null
+++ b/src/templates/partials/media-score-badge.html
@@ -0,0 +1,9 @@
+{# Renders a score badge if score exists #}
+{# Parameters: media, extra_class (optional) #}
+{% if media.score %}
+  <span class="badge badge-neutral gap-0 {{ extra_class }}">
+    {{ media.score }}
+    {% heroicon_mini "star" class="fill-orange-400 h-4" %}
+    - {{ media.get_score_display }}
+  </span>
+{% endif %}
diff --git a/src/templates/partials/media-status-badge.html b/src/templates/partials/media-status-badge.html
new file mode 100644
index 0000000..a814aaf
--- /dev/null
+++ b/src/templates/partials/media-status-badge.html
@@ -0,0 +1,4 @@
+{% load media_tags %}
+{# Renders a status badge #}
+{# Parameters: media #}
+<span class="badge badge-soft {{ media.status|status_badge_class }}">{{ media.get_status_display }}</span>
diff --git a/src/templates/partials/review-date-editable.html b/src/templates/partials/review-date-editable.html
deleted file mode 100644
index f9073f2..0000000
--- a/src/templates/partials/review-date-editable.html
+++ /dev/null
@@ -1,98 +0,0 @@
-{% load i18n %}
-<div id="review-date-widget-{{ media.id }}" class="inline-block">
-  <div class="review-date-display cursor-pointer hover:opacity-80 transition-opacity">
-    {% if media.review_date %}
-      <span class="text-sm">{{ media.review_date }}</span>
-    {% else %}
-      <span class="text-sm text-base-content/50">{% translate "No date" %}</span>
-    {% endif %}
-  </div>
-
-  <div class="review-date-edit hidden">
-    <div class="flex flex-col gap-1">
-      <input type="text"
-             class="input input-xs input-bordered w-32"
-             name="review_date"
-             value="{{ media.review_date|default:'' }}"
-             placeholder="{% translate "YYYY-MM-DD" %}"
-             hx-post="{% url 'media_update_review_date_htmx' media.id %}"
-             hx-target="#review-date-widget-{{ media.id }}"
-             hx-swap="outerHTML"
-             hx-trigger="blur[!this.classList.contains('input-error')] delay:200ms">
-      <button type="button" class="btn btn-xs btn-link text-xs review-date-today-btn">
-        {% translate "Today" %}
-      </button>
-      <span class="text-xs text-error hidden review-date-error">{% translate "Invalid format" %}</span>
-    </div>
-  </div>
-</div>
-
-<script>
-(function() {
-  const widget = document.querySelector('#review-date-widget-{{ media.id }}');
-  if (!widget) return;
-
-  const display = widget.querySelector('.review-date-display');
-  const edit = widget.querySelector('.review-date-edit');
-  const input = widget.querySelector('input[name="review_date"]');
-  const todayBtn = widget.querySelector('.review-date-today-btn');
-  const errorMsg = widget.querySelector('.review-date-error');
-
-  // Add helper tooltip
-  input.setAttribute('title', '{% translate "Formats: YYYY, YYYY-MM, or YYYY-MM-DD" %}');
-
-  // Validate date format
-  function isValidDateFormat(value) {
-    if (!value) return true; // Empty is valid (clears the date)
-    // Match YYYY, YYYY-MM, or YYYY-MM-DD
-    const patterns = [
-      /^\d{4}$/,                    // YYYY
-      /^\d{4}-(0[1-9]|1[0-2])$/,    // YYYY-MM
-      /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/  // YYYY-MM-DD
-    ];
-    return patterns.some(pattern => pattern.test(value));
-  }
-
-  // Show edit mode on click
-  display.addEventListener('click', function() {
-    display.classList.add('hidden');
-    edit.classList.remove('hidden');
-    input.focus();
-  });
-
-  // Validate on input
-  input.addEventListener('input', function() {
-    const value = input.value.trim();
-    if (value && !isValidDateFormat(value)) {
-      input.classList.add('input-error');
-      errorMsg.classList.remove('hidden');
-    } else {
-      input.classList.remove('input-error');
-      errorMsg.classList.add('hidden');
-    }
-  });
-
-  // Handle escape key to cancel editing
-  input.addEventListener('keydown', function(event) {
-    if (event.key === 'Escape') {
-      // Reset to original value and clear error
-      input.value = '{{ media.review_date|default:"" }}';
-      input.classList.remove('input-error');
-      errorMsg.classList.add('hidden');
-      edit.classList.add('hidden');
-      display.classList.remove('hidden');
-    }
-  });
-
-  // Insert today's date
-  todayBtn.addEventListener('click', function() {
-    const today = new Date();
-    input.value = today.getFullYear() + '-' +
-                  String(today.getMonth() + 1).padStart(2, '0') + '-' +
-                  String(today.getDate()).padStart(2, '0');
-    input.classList.remove('input-error');
-    errorMsg.classList.add('hidden');
-    htmx.trigger(input, 'blur');
-  });
-})();
-</script>
diff --git a/src/templates/partials/score-editable.html b/src/templates/partials/score-editable.html
deleted file mode 100644
index baea83f..0000000
--- a/src/templates/partials/score-editable.html
+++ /dev/null
@@ -1,103 +0,0 @@
-{% load i18n %}
-<div id="score-widget-{{ media.id }}">
-  <div class="flex items-center gap-2">
-    {# Star rating container #}
-    <div class="rating rating-xs" data-media-id="{{ media.id }}">
-      <button type="button" class="mask mask-star-2 bg-orange-400 cursor-pointer transition-transform hover:scale-110 star-btn" data-score="1" data-label="{% translate "Detested" %}" aria-label="1 star" {% if media.score and 1 <= media.score %}aria-current="true"{% endif %} hx-post="{% url 'media_update_score_htmx' media.id %}" hx-vals='{"score": "1"}' hx-target="#score-widget-{{ media.id }}" hx-swap="outerHTML"></button>
-      <button type="button" class="mask mask-star-2 bg-orange-400 cursor-pointer transition-transform hover:scale-110 star-btn" data-score="2" data-label="{% translate "Hated" %}" aria-label="2 stars" {% if media.score and 2 <= media.score %}aria-current="true"{% endif %} hx-post="{% url 'media_update_score_htmx' media.id %}" hx-vals='{"score": "2"}' hx-target="#score-widget-{{ media.id }}" hx-swap="outerHTML"></button>
-      <button type="button" class="mask mask-star-2 bg-orange-400 cursor-pointer transition-transform hover:scale-110 star-btn" data-score="3" data-label="{% translate "Disliked" %}" aria-label="3 stars" {% if media.score and 3 <= media.score %}aria-current="true"{% endif %} hx-post="{% url 'media_update_score_htmx' media.id %}" hx-vals='{"score": "3"}' hx-target="#score-widget-{{ media.id }}" hx-swap="outerHTML"></button>
-      <button type="button" class="mask mask-star-2 bg-orange-400 cursor-pointer transition-transform hover:scale-110 star-btn" data-score="4" data-label="{% translate "Not appreciated" %}" aria-label="4 stars" {% if media.score and 4 <= media.score %}aria-current="true"{% endif %} hx-post="{% url 'media_update_score_htmx' media.id %}" hx-vals='{"score": "4"}' hx-target="#score-widget-{{ media.id }}" hx-swap="outerHTML"></button>
-      <button type="button" class="mask mask-star-2 bg-orange-400 cursor-pointer transition-transform hover:scale-110 star-btn" data-score="5" data-label="{% translate "Moderately appreciated" %}" aria-label="5 stars" {% if media.score and 5 <= media.score %}aria-current="true"{% endif %} hx-post="{% url 'media_update_score_htmx' media.id %}" hx-vals='{"score": "5"}' hx-target="#score-widget-{{ media.id }}" hx-swap="outerHTML"></button>
-      <button type="button" class="mask mask-star-2 bg-orange-400 cursor-pointer transition-transform hover:scale-110 star-btn" data-score="6" data-label="{% translate "Appreciated" %}" aria-label="6 stars" {% if media.score and 6 <= media.score %}aria-current="true"{% endif %} hx-post="{% url 'media_update_score_htmx' media.id %}" hx-vals='{"score": "6"}' hx-target="#score-widget-{{ media.id }}" hx-swap="outerHTML"></button>
-      <button type="button" class="mask mask-star-2 bg-orange-400 cursor-pointer transition-transform hover:scale-110 star-btn" data-score="7" data-label="{% translate "Enjoyed" %}" aria-label="7 stars" {% if media.score and 7 <= media.score %}aria-current="true"{% endif %} hx-post="{% url 'media_update_score_htmx' media.id %}" hx-vals='{"score": "7"}' hx-target="#score-widget-{{ media.id }}" hx-swap="outerHTML"></button>
-      <button type="button" class="mask mask-star-2 bg-orange-400 cursor-pointer transition-transform hover:scale-110 star-btn" data-score="8" data-label="{% translate "Really enjoyed" %}" aria-label="8 stars" {% if media.score and 8 <= media.score %}aria-current="true"{% endif %} hx-post="{% url 'media_update_score_htmx' media.id %}" hx-vals='{"score": "8"}' hx-target="#score-widget-{{ media.id }}" hx-swap="outerHTML"></button>
-      <button type="button" class="mask mask-star-2 bg-orange-400 cursor-pointer transition-transform hover:scale-110 star-btn" data-score="9" data-label="{% translate "Loved" %}" aria-label="9 stars" {% if media.score and 9 <= media.score %}aria-current="true"{% endif %} hx-post="{% url 'media_update_score_htmx' media.id %}" hx-vals='{"score": "9"}' hx-target="#score-widget-{{ media.id }}" hx-swap="outerHTML"></button>
-      <button type="button" class="mask mask-star-2 bg-orange-400 cursor-pointer transition-transform hover:scale-110 star-btn" data-score="10" data-label="{% translate "Adored" %}" aria-label="10 stars" {% if media.score and 10 <= media.score %}aria-current="true"{% endif %} hx-post="{% url 'media_update_score_htmx' media.id %}" hx-vals='{"score": "10"}' hx-target="#score-widget-{{ media.id }}" hx-swap="outerHTML"></button>
-    </div>
-
-    {# Clear button #}
-    {% if media.score %}
-      <button type="button"
-              class="opacity-70 hover:opacity-100 transition-opacity cursor-pointer"
-              title="{% translate "Clear rating" %}"
-              hx-post="{% url 'media_update_score_htmx' media.id %}"
-              hx-vals='{"score": ""}'
-              hx-target="#score-widget-{{ media.id }}"
-              hx-swap="outerHTML">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-        </svg>
-      </button>
-    {% endif %}
-  </div>
-
-  {# Score label with fixed height #}
-  <div class="star-label-{{ media.id }} text-xs mt-1 h-4" data-media-id="{{ media.id }}">
-    {% if media.score %}
-      <span class="badge badge-neutral badge-xs">{{ media.get_score_display }}</span>
-    {% endif %}
-  </div>
-</div>
-
-<script>
-(function() {
-  const mediaId = "{{ media.id }}";
-  const ratingContainer = document.querySelector(`.rating[data-media-id="${mediaId}"]`);
-  const labelDisplay = document.querySelector(`.star-label-${mediaId}`);
-  const stars = ratingContainer.querySelectorAll('.star-btn');
-
-  // Store original state
-  let originalLabel = labelDisplay.innerHTML;
-  let isHovering = false;
-
-  // Update stars visual state based on score
-  function updateStars(score) {
-    stars.forEach((star) => {
-      const starScore = parseInt(star.dataset.score);
-      if (score && starScore <= score) {
-        star.setAttribute('aria-current', 'true');
-      } else {
-        star.removeAttribute('aria-current');
-      }
-    });
-  }
-
-  // Restore original state
-  function restoreOriginalState() {
-    if (!isHovering) {
-      const currentScore = {{ media.score|default:"null" }};
-      updateStars(currentScore);
-      labelDisplay.innerHTML = originalLabel;
-    }
-  }
-
-  // Handle star hover
-  stars.forEach(star => {
-    star.addEventListener('mouseenter', function() {
-      isHovering = true;
-      const score = parseInt(this.dataset.score);
-      const label = this.dataset.label;
-
-      // Update stars appearance
-      updateStars(score);
-
-      // Show label as badge
-      labelDisplay.innerHTML = `<span class="badge badge-neutral badge-xs">${label}</span>`;
-    });
-  });
-
-  // Restore original state on mouse leave
-  ratingContainer.addEventListener('mouseleave', function() {
-    isHovering = false;
-    restoreOriginalState();
-  });
-
-  // Handle escape key to cancel hover/preview
-  document.addEventListener('keydown', function(event) {
-    if (event.key === 'Escape') {
-      isHovering = false;
-      restoreOriginalState();
-    }
-  });
-})();
-</script>
diff --git a/src/templates/partials/status-editable.html b/src/templates/partials/status-editable.html
deleted file mode 100644
index 9c81c1c..0000000
--- a/src/templates/partials/status-editable.html
+++ /dev/null
@@ -1,55 +0,0 @@
-{% load i18n %}
-<div id="status-widget-{{ media.id }}" class="inline-block">
-  <div class="status-display cursor-pointer hover:opacity-80 transition-opacity">
-    <div class="badge badge-soft badge-primary">{{ media.get_status_display }}</div>
-  </div>
-
-  <div class="status-edit hidden">
-    <select class="select select-xs select-bordered"
-            name="status"
-            hx-post="{% url 'media_update_status_htmx' media.id %}"
-            hx-target="#status-widget-{{ media.id }}"
-            hx-swap="outerHTML"
-            hx-trigger="change">
-      {% for value, label in status_choices %}
-        <option value="{{ value }}" {% if media.status == value %}selected{% endif %}>{{ label }}</option>
-      {% endfor %}
-    </select>
-  </div>
-</div>
-
-<script>
-(function() {
-  const widget = document.querySelector('#status-widget-{{ media.id }}');
-  if (!widget) return;
-
-  const display = widget.querySelector('.status-display');
-  const edit = widget.querySelector('.status-edit');
-  const select = widget.querySelector('select[name="status"]');
-
-  // Show edit mode on click
-  display.addEventListener('click', function() {
-    display.classList.add('hidden');
-    edit.classList.remove('hidden');
-    select.focus();
-  });
-
-  // Handle escape key to cancel editing
-  select.addEventListener('keydown', function(event) {
-    if (event.key === 'Escape') {
-      edit.classList.add('hidden');
-      display.classList.remove('hidden');
-    }
-  });
-
-  // Cancel editing on blur (with delay to allow HTMX change to process)
-  select.addEventListener('blur', function() {
-    setTimeout(() => {
-      if (edit && !edit.classList.contains('hidden')) {
-        edit.classList.add('hidden');
-        display.classList.remove('hidden');
-      }
-    }, 300);
-  });
-})();
-</script>
diff --git a/src/tests/core/test_views.py b/src/tests/core/test_views.py
index 1ece814..6c586a6 100644
--- a/src/tests/core/test_views.py
+++ b/src/tests/core/test_views.py
@@ -353,12 +353,12 @@ def test_media_review_clamped_with_short_review(self, logged_in_client, db):
         response = logged_in_client.get(reverse("media_review_clamped_htmx", kwargs={"pk": media.pk}))
 
         content = response.content.decode("utf-8")
-        # With less than 20 words, the 'See more' button should not appear
+        # With less than 50 words, the 'See more' button should not appear
         assert "See more" not in content
 
     def test_media_review_clamped_with_long_review(self, logged_in_client, db):
         """Clamped review with long text shows 'See more' button."""
-        long_review = " ".join(["word"] * 30)  # 30 words
+        long_review = " ".join(["word"] * 55)
         media = Media.objects.create(
             title="Test Media",
             media_type="BOOK",
@@ -367,7 +367,7 @@ def test_media_review_clamped_with_long_review(self, logged_in_client, db):
         response = logged_in_client.get(reverse("media_review_clamped_htmx", kwargs={"pk": media.pk}))
 
         content = response.content.decode("utf-8")
-        # With more than 20 words, the 'See more' button should appear
+        # With more than 50 words, the 'See more' button should appear
         assert "See more" in content
 
     def test_media_review_full_returns_partial(self, logged_in_client, db):