Apply header component to all pages

templates/rooms/room.html

@@ -1,16 +1,21 @@
 {% extends "common/base.html" %}
+{% from "components/header.html" import header %}
 
 {% block title %}Room - DocuPulse{% endblock %}
 
 {% block content %}
 <meta name="csrf-token" content="{{ csrf_token }}">
+{{ header(
+    title=room.name,
+    description=room.description or 'No description',
+    button_text="Back to Rooms",
+    button_url=url_for('rooms.rooms'),
+    icon="fa-door-open",
+    button_class="btn-outline-secondary",
+    button_icon="fa-arrow-left"
+) }}
+
 <div class="container mt-4">
-    <div class="row mb-4">
-        <div class="col">
-            <h2>{{ room.name }}</h2>
-            <div class="text-muted">{{ room.description or 'No description' }}</div>
-        </div>
-    </div>
     <div class="card shadow-sm mb-4">
         <div class="card-header d-flex justify-content-between align-items-center bg-white">
             <div class="d-flex align-items-center gap-3">

templates/rooms/rooms.html

@@ -1,20 +1,21 @@
 {% extends "common/base.html" %}
+{% from "components/header.html" import header %}
 
 {% block title %}Rooms - DocuPulse{% endblock %}
 
 {% block content %}
-<div class="container mt-4">
-    <div class="row mb-4">
-        <div class="col">
-            <h2>Rooms</h2>
-        </div>
-        <div class="col text-end">
-            <a href="{{ url_for('rooms.create_room') }}" class="btn btn-primary">
-                <i class="fas fa-plus"></i> New Room
-            </a>
-        </div>
-    </div>
+{{ header(
+    title="Rooms",
+    description="Manage your document rooms and collaborate with team members",
+    button_text="New Room",
+    button_url=url_for('rooms.create_room'),
+    icon="fa-door-open",
+    button_icon="fa-plus",
+    button_class="btn-primary",
+    button_style="padding: 0.4rem 1rem;"
+) }}
 
+<div class="container mt-4">
     <!-- Search and Filter Section -->
     <div class="bg-white rounded-lg shadow-sm p-4 mb-4">
         <form method="GET" class="d-flex align-items-center w-100 justify-content-between" id="roomFilterForm" style="gap: 1rem;">