separation of css

static/css/room_members.css

@@ -0,0 +1,85 @@
+.badge.bg-primary.rounded-pill {
+    display: inline-flex;
+    align-items: center;
+    font-weight: 500;
+    letter-spacing: 0.02em;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
+    font-size: 1em;
+    height: 32px;
+    border-radius: 5px;
+    padding: 0 18px;
+}
+
+.btn-sm.member-action {
+    min-width: 70px;
+    height: 32px;
+    font-size: 1em;
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 16px;
+}
+
+.form-check-inline {
+    margin-right: 8px;
+}
+
+.member-row {
+    align-items: center;
+    gap: 8px;
+}
+
+.badge.creator-badge {
+    display: inline-flex;
+    align-items: center;
+    font-weight: 500;
+    letter-spacing: 0.02em;
+    font-size: 1em;
+    height: 32px;
+    border-radius: 5px;
+    padding: 0 18px;
+    background-color: rgba(22,118,123,0.08);
+    color: #16767b;
+    border: 1px solid #16767b22;
+}
+
+.btn-save-member {
+    background-color: #16767b;
+    color: #fff;
+    border: 1px solid #16767b;
+    min-width: 70px;
+    height: 32px;
+    font-size: 1em;
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 16px;
+    transition: background 0.2s, border 0.2s;
+}
+
+.btn-save-member:hover {
+    background-color: #1a8a90;
+    border-color: #1a8a90;
+}
+
+.btn-remove-member {
+    background-color: rgba(239,68,68,0.1);
+    color: #b91c1c;
+    border: 1px solid #b91c1c22;
+    min-width: 70px;
+    height: 32px;
+    font-size: 1em;
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 16px;
+    transition: background 0.2s, color 0.2s;
+}
+
+.btn-remove-member:hover {
+    background-color: #b91c1c;
+    color: #fff;
+} 

static/js/rooms.js

@@ -0,0 +1,26 @@
+// Debounce function
+function debounce(func, wait) {
+    let timeout;
+    return function(...args) {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => func.apply(this, args), wait);
+    };
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+    const searchInput = document.getElementById('roomSearchInput');
+    const form = document.getElementById('roomFilterForm');
+    if (searchInput && form) {
+        searchInput.addEventListener('input', debounce(function() {
+            form.submit();
+        }, 300));
+    }
+    // Clear button logic
+    const clearBtn = document.getElementById('clearRoomsFilter');
+    if (clearBtn && searchInput) {
+        clearBtn.addEventListener('click', function() {
+            searchInput.value = '';
+            form.submit();
+        });
+    }
+}); 

templates/rooms/room_members.html

@@ -6,85 +6,7 @@
 {% block extra_css %}
 <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
 <link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />
-<style>
+<link href="{{ url_for('static', filename='css/room_members.css') }}" rel="stylesheet" />
-.badge.bg-primary.rounded-pill {
-    display: inline-flex;
-    align-items: center;
-    font-weight: 500;
-    letter-spacing: 0.02em;
-    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
-    font-size: 1em;
-    height: 32px;
-    border-radius: 5px;
-    padding: 0 18px;
-}
-.btn-sm.member-action {
-    min-width: 70px;
-    height: 32px;
-    font-size: 1em;
-    border-radius: 5px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0 16px;
-}
-.form-check-inline {
-    margin-right: 8px;
-}
-.member-row {
-    align-items: center;
-    gap: 8px;
-}
-.badge.creator-badge {
-    display: inline-flex;
-    align-items: center;
-    font-weight: 500;
-    letter-spacing: 0.02em;
-    font-size: 1em;
-    height: 32px;
-    border-radius: 5px;
-    padding: 0 18px;
-    background-color: rgba(22,118,123,0.08);
-    color: #16767b;
-    border: 1px solid #16767b22;
-}
-.btn-save-member {
-    background-color: #16767b;
-    color: #fff;
-    border: 1px solid #16767b;
-    min-width: 70px;
-    height: 32px;
-    font-size: 1em;
-    border-radius: 5px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0 16px;
-    transition: background 0.2s, border 0.2s;
-}
-.btn-save-member:hover {
-    background-color: #1a8a90;
-    border-color: #1a8a90;
-}
-.btn-remove-member {
-    background-color: rgba(239,68,68,0.1);
-    color: #b91c1c;
-    border: 1px solid #b91c1c22;
-    min-width: 70px;
-    height: 32px;
-    font-size: 1em;
-    border-radius: 5px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0 16px;
-    transition: background 0.2s, color 0.2s;
-}
-.btn-remove-member:hover {
-    background-color: #b91c1c;
-    color: #fff;
-}
-</style>
 {% endblock %}
 
 {% block content %}
@@ -216,6 +138,7 @@ $(document).ready(function() {
         placeholder: 'Search for a user...',
         allowClear: true
     });
+    
     // Auto-submit permission form on checkbox change
     document.querySelectorAll('.auto-save-perms-form input[type="checkbox"]').forEach(function(checkbox) {
         checkbox.addEventListener('change', function() {