Fix media list template field names

- Use content_hash instead of hash
- Use type instead of media_type
- Show filename instead of size_bytes
- Detect media type from both type field and filename extension

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

app/templates/cache/media_list.html

@@ -20,19 +20,24 @@
     {% if items %}
     <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4" id="media-grid">
         {% for item in items %}
-        <a href="/cache/{{ item.hash }}"
+        {# Determine media category from type or filename #}
-           class="media-item bg-gray-800 rounded-lg overflow-hidden hover:ring-2 hover:ring-blue-500 transition-all"
+        {% set is_image = item.type in ('image', 'image/jpeg', 'image/png', 'image/gif', 'image/webp') or (item.filename and item.filename.lower().endswith(('.jpg', '.jpeg', '.png', '.gif', '.webp'))) %}
-           data-type="{{ item.media_type.split('/')[0] if item.media_type else 'other' }}">
+        {% set is_video = item.type in ('video', 'video/mp4', 'video/webm', 'video/x-matroska') or (item.filename and item.filename.lower().endswith(('.mp4', '.mkv', '.webm', '.mov'))) %}
+        {% set is_audio = item.type in ('audio', 'audio/mpeg', 'audio/wav', 'audio/flac') or (item.filename and item.filename.lower().endswith(('.mp3', '.wav', '.flac', '.ogg'))) %}
 
-            {% if item.media_type and item.media_type.startswith('image/') %}
+        <a href="/cache/{{ item.content_hash }}"
-            <img src="/cache/{{ item.hash }}/raw"
+           class="media-item bg-gray-800 rounded-lg overflow-hidden hover:ring-2 hover:ring-blue-500 transition-all"
+           data-type="{% if is_image %}image{% elif is_video %}video{% elif is_audio %}audio{% else %}other{% endif %}">
+
+            {% if is_image %}
+            <img src="/cache/{{ item.content_hash }}/raw"
                  alt=""
                  loading="lazy"
                  class="w-full h-40 object-cover">
 
-            {% elif item.media_type and item.media_type.startswith('video/') %}
+            {% elif is_video %}
             <div class="relative">
-                <video src="/cache/{{ item.hash }}/raw"
+                <video src="/cache/{{ item.content_hash }}/raw"
                        class="w-full h-40 object-cover"
                        muted
                        onmouseover="this.play()"
@@ -47,7 +52,7 @@
                 </div>
             </div>
 
-            {% elif item.media_type and item.media_type.startswith('audio/') %}
+            {% elif is_audio %}
             <div class="w-full h-40 bg-gray-900 flex flex-col items-center justify-center">
                 <svg class="w-12 h-12 text-gray-600 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
@@ -58,14 +63,14 @@
 
             {% else %}
             <div class="w-full h-40 bg-gray-900 flex items-center justify-center">
-                <span class="text-gray-600 text-sm">{{ item.media_type or 'Unknown' }}</span>
+                <span class="text-gray-600 text-sm">{{ item.type or 'Media' }}</span>
             </div>
             {% endif %}
 
             <div class="p-3">
-                <div class="font-mono text-xs text-gray-500 truncate">{{ item.hash[:16] }}...</div>
+                <div class="font-mono text-xs text-gray-500 truncate">{{ item.content_hash[:16] }}...</div>
-                {% if item.size_bytes %}
+                {% if item.filename %}
-                <div class="text-xs text-gray-600">{{ item.size_bytes | filesizeformat }}</div>
+                <div class="text-xs text-gray-600 truncate">{{ item.filename }}</div>
                 {% endif %}
             </div>
         </a>