improve trash / starred view

static/css/trash.css

@@ -0,0 +1,11 @@
+.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;
+} 

static/js/trash.js

@@ -0,0 +1,73 @@
+let currentView = 'grid';
+
+document.addEventListener('DOMContentLoaded', function() {
+    // Add event listener for the empty trash button
+    const emptyTrashBtn = document.getElementById('emptyTrashBtn');
+    if (emptyTrashBtn) {
+        emptyTrashBtn.addEventListener('click', function(e) {
+            e.preventDefault();
+            showEmptyTrashModal();
+        });
+    }
+
+    // Add event listener for the confirm empty trash button
+    const confirmEmptyTrashBtn = document.getElementById('confirmEmptyTrash');
+    if (confirmEmptyTrashBtn) {
+        confirmEmptyTrashBtn.addEventListener('click', emptyTrash);
+    }
+
+    // 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));
+} 

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 %} 

templates/trash/trash.html

@@ -3,6 +3,10 @@
 
 {% block title %}Trash - DocuPulse{% endblock %}
 
+{% block extra_css %}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/trash.css') }}">
+{% endblock %}
+
 {% block content %}
 {{ header(
     title="Trash",
@@ -16,6 +20,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>
@@ -31,22 +48,5 @@
 
 {% block extra_js %}
 <script src="{{ url_for('static', filename='js/file-grid.js') }}"></script>
-<script>
-    document.addEventListener('DOMContentLoaded', function() {
-        // Add event listener for the empty trash button
-        const emptyTrashBtn = document.getElementById('emptyTrashBtn');
-        if (emptyTrashBtn) {
-            emptyTrashBtn.addEventListener('click', function(e) {
-                e.preventDefault();
-                showEmptyTrashModal();
-            });
-        }
-
-        // Add event listener for the confirm empty trash button
-        const confirmEmptyTrashBtn = document.getElementById('confirmEmptyTrash');
-        if (confirmEmptyTrashBtn) {
-            confirmEmptyTrashBtn.addEventListener('click', emptyTrash);
-        }
-    });
-</script>
+<script src="{{ url_for('static', filename='js/trash.js') }}"></script>
 {% endblock %}