Improve admin snapshot list/grid views with better UX

- Add prominent view mode switcher with List/Grid toggle buttons
- Improve filter sidebar CSS with modern styling, rounded corners
- Add live progress bar for in-progress snapshots showing hooks status
- Show plugin icons only when output directory has content
- Display archive result output_size sum from new field
- Show hooks succeeded/total count in size column
- Add get_progress_stats() method to Snapshot model
- Add CSS for progress spinner and status badges
- Update grid view template with progress indicator for archiving cards
- Add tests for admin views, search, and progress stats

archivebox/templates/admin/base.html

@@ -1346,10 +1346,16 @@
 
             <div id="content" class="{% block coltype %}colM{% endblock %}">
                 {% if opts.model_name == 'snapshot' and cl %}
-                    <small id="snapshot-view-mode">
-                        <a href="#list" title="List view" id="snapshot-view-list">☰</a> | 
-                        <a href="#grid" title="Grid view" id="snapshot-view-grid" style="letter-spacing: -.4em;">⣿⣿</a> 
-                    </small>
+                    <div id="snapshot-view-mode">
+                        <a href="#list" title="List view" id="snapshot-view-list">
+                            <span class="view-icon">☰</span>
+                            <span class="view-label">List</span>
+                        </a>
+                        <a href="#grid" title="Grid view" id="snapshot-view-grid">
+                            <span class="view-icon">⊞</span>
+                            <span class="view-label">Grid</span>
+                        </a>
+                    </div>
                 {% endif %}
                 {% block pretitle %}{% endblock %}
                 {% block content_title %}{# {% if title %}<h1>{{ title }}</h1>{% endif %} #}{% endblock %}
@@ -1500,10 +1506,20 @@
                 $("#snapshot-view-list").click(selectSnapshotListView)
                 $("#snapshot-view-grid").click(selectSnapshotGridView)
 
+                // Set active class based on current view
+                const isGridView = window.location.pathname === "{% url 'admin:grid' %}"
+                if (isGridView) {
+                    $("#snapshot-view-grid").addClass('active')
+                    $("#snapshot-view-list").removeClass('active')
+                } else {
+                    $("#snapshot-view-list").addClass('active')
+                    $("#snapshot-view-grid").removeClass('active')
+                }
+
                 $('#changelist-form .card input:checkbox').change(function() {
                     if ($(this).is(':checked'))
                         $(this).parents('.card').addClass('selected-card')
-                    else 
+                    else
                         $(this).parents('.card').removeClass('selected-card')
                 })
             };

archivebox/templates/admin/snapshots_grid.html

@@ -126,6 +126,21 @@
   .cards .card .card-info .timestamp {
       font-weight: 600;
   }
+  .cards .card .card-progress {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 4px 0;
+  }
+  .cards .card .card-progress .progress-text {
+      font-size: 11px;
+      color: #3b82f6;
+      font-weight: 500;
+  }
+  .cards .card.archiving {
+      border-color: #3b82f6;
+      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+  }
   .cards .card .card-footer code {
       display: inline-block;
       width: 100%;
@@ -145,14 +160,21 @@
 {% block content %}
   <section class="cards">
     {% for obj in results %}
-      <div class="card">
+      <div class="card{% if obj.status == 'started' %} archiving{% endif %}">
           <div class="card-info">
             <a href="{% url 'admin:core_snapshot_change' obj.pk %}">
               <span class="timestamp">{{obj.bookmarked_at}}</span>
             </a>
-            <div style="padding: 4px 0;">
-              {{ obj.icons|safe }}
-            </div>
+            {% if obj.status == 'started' %}
+              <div class="card-progress">
+                <span class="snapshot-progress-spinner"></span>
+                <span class="progress-text">Archiving...</span>
+              </div>
+            {% else %}
+              <div style="padding: 4px 0;">
+                {{ obj.icons|safe }}
+              </div>
+            {% endif %}
             <label>
               <span>🗄&nbsp; {{ obj.archive_size | file_size }}</span>
               <input type="checkbox" name="_selected_action" value="{{obj.pk}}"/>