improve trash / starred view

templates/starred/starred.html

@@ -12,6 +12,19 @@
 
 <div class="container-fluid py-4">
     <div class="card shadow-sm">
+        <div class="card-header d-flex justify-content-between align-items-center bg-white">
+            <div class="d-flex align-items-center gap-3">
+                <div class="btn-group btn-group-sm" role="group" style="margin-right: 0.5rem;">
+                    <button type="button" id="gridViewBtn" class="btn btn-outline-secondary active" onclick="toggleView('grid')">
+                        <i class="fas fa-th-large"></i>
+                    </button>
+                    <button type="button" id="listViewBtn" class="btn btn-outline-secondary" onclick="toggleView('list')">
+                        <i class="fas fa-list"></i>
+                    </button>
+                </div>
+                <h5 class="mb-0">Files</h5>
+            </div>
+        </div>
         <div class="card-body">
             {% include 'components/search_bar.html' %}
             <div id="fileGrid" class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4"></div>
@@ -24,5 +37,78 @@
 {% endblock %}
 
 {% block extra_js %}
+<style>
+.btn-group .btn.active {
+    background-color: #e6f3f4 !important;
+    border-color: #16767b !important;
+    color: #16767b !important;
+}
+
+.btn-group .btn:not(.active) {
+    background-color: #fff !important;
+    border-color: #e9ecef !important;
+    color: #6c757d !important;
+}
+</style>
 <script src="{{ url_for('static', filename='js/file-grid.js') }}"></script>
+<script>
+    let currentView = 'grid';
+
+    document.addEventListener('DOMContentLoaded', function() {
+        // Initialize view
+        initializeView();
+    });
+
+    async function initializeView() {
+        try {
+            const response = await fetch('/api/user/preferred_view');
+            const data = await response.json();
+            currentView = data.preferred_view || 'grid';
+            toggleView(currentView);
+        } catch (error) {
+            console.error('Error fetching preferred view:', error);
+            currentView = 'grid';
+            toggleView(currentView);
+        }
+    }
+
+    function toggleView(view) {
+        currentView = view;
+        const grid = document.getElementById('fileGrid');
+        const gridBtn = document.getElementById('gridViewBtn');
+        const listBtn = document.getElementById('listViewBtn');
+        
+        // Reset both buttons first
+        gridBtn.classList.remove('active');
+        listBtn.classList.remove('active');
+        
+        if (view === 'grid') {
+            grid.classList.remove('list-view');
+            gridBtn.classList.add('active');
+        } else {
+            grid.classList.add('list-view');
+            listBtn.classList.add('active');
+        }
+        
+        // Save the new preference
+        fetch('/api/user/preferred_view', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
+            },
+            body: JSON.stringify({ preferred_view: view })
+        })
+        .then(response => {
+            if (!response.ok) {
+                throw new Error('Network response was not ok');
+            }
+            return response.json();
+        })
+        .then(data => {
+            console.log('Preferred view saved:', data);
+        })
+        .catch(error => console.error('Error saving preferred view:', error));
+    }
+</script>
 {% endblock %}