separation of css

static/css/rooms.css

@@ -0,0 +1 @@
+ 

static/css/starred.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/starred.js

@@ -0,0 +1,58 @@
+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));
+}