Apply header component to all pages

templates/components/header.html

@@ -0,0 +1,29 @@
+{% macro header(title, description="", button_text="", button_url="", icon="fa-folder", button_class="", button_icon="fa-plus", button_style="") %}
+<header class="py-4">
+    <div class="container-fluid">
+        <div class="d-flex justify-content-between align-items-center">
+            <div>
+                <h3 class="mb-0">
+                    <i class="fas {{ icon }} me-2" style="color:#16767b;"></i>
+                    {{ title }}
+                </h3>
+                {% if description %}
+                    <p class="text-muted mb-0 mt-2 small">{{ description }}</p>
+                {% endif %}
+            </div>
+            {% if button_text and button_url %}
+                <div>
+                    <button onclick="window.location.href='{{ button_url }}'" 
+                            class="btn {{ button_class if button_class else '' }}" 
+                            style="{{ 'background-color: #16767b; color: white;' if not button_class else '' }}{{ '; ' + button_style if button_style else '' }}">
+                        {% if button_icon %}
+                            <i class="fas {{ button_icon }} me-1"></i>
+                        {% endif %}
+                        {{ button_text }}
+                    </button>
+                </div>
+            {% endif %}
+        </div>
+    </div>
+</header>
+{% endmacro %} 

templates/contacts/contacts.html

@@ -1,8 +1,15 @@
 {% extends "common/base.html" %}
+{% from "components/header.html" import header %}
 
 {% block title %}Contacts - DocuPulse{% endblock %}
 
 {% block content %}
-<h2>Contacts</h2>
+{{ header(
+    title="Contacts",
+    description="Manage your contacts and their information",
+    button_text="Add Contact",
+    button_url="/contacts/new",
+    icon="fa-address-book"
+) }}
 <p class="text-muted">Your contacts will appear here.</p>
 {% endblock %} 

templates/contacts/form.html

@@ -3,15 +3,22 @@
 {% block content %}
 <div class="container mx-auto px-4 py-8">
     <div class="max-w-2xl mx-auto">
-        <div class="flex justify-between items-center mb-6">
+        <div class="d-flex justify-content-between align-items-center mb-6">
-            {% if title %}
+            <div>
-                <h1 class="text-2xl font-bold text-gray-800 mb-6">{{ title }}</h1>
+                <h3 class="mb-0">
-            {% else %}
+                    <i class="fas fa-user me-2" style="color:#16767b;"></i>
-                <h1 class="text-2xl font-bold text-gray-800 mb-6">User Form</h1>
+                    {% if title %}
-            {% endif %}
+                        {{ title }}
+                    {% else %}
+                        User Form
+                    {% endif %}
+                </h3>
+                <p class="text-muted mb-0 mt-2 small">Add or edit contact information</p>
+            </div>
             <a href="{{ url_for('contacts.contacts_list') }}" 
-               class="text-gray-600 hover:text-gray-900">
+               class="btn btn-sm btn-outline-secondary">
-                ← Back to Contacts
+                <i class="fas fa-arrow-left me-1"></i>
+                Back to Contacts
             </a>
         </div>
 

templates/contacts/list.html

@@ -1,4 +1,5 @@
 {% extends "common/base.html" %}
+{% from "components/header.html" import header %}
 
 {% block head %}
     {{ super() }}
@@ -10,19 +11,16 @@
 {% endblock %}
 
 {% block content %}
-<div class="container mx-auto px-4 py-8">
+{{ header(
-    <div class="flex justify-between items-center mb-6">
+    title="Contacts",
-        <h1 class="text-2xl font-bold text-gray-800">Contacts</h1>
+    description="Manage your contacts and their information",
-        <a href="{{ url_for('contacts.new_contact') }}" 
+    button_text="Add New Contact",
-           class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-white text-sm font-semibold transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg no-underline"
+    button_url=url_for('contacts.new_contact'),
-           style="background-color: #16767b; border: 1px solid #16767b;"
+    icon="fa-address-book",
-           onmouseover="this.style.backgroundColor='#1a8a90'"
+    button_icon="fa-plus"
-           onmouseout="this.style.backgroundColor='#16767b'">
+) }}
-            <i class="fas fa-plus"></i>
-            Add New Contact
-        </a>
-    </div>
 
+<div class="container mx-auto px-4 py-8">
     <!-- Search and Filter Section -->
     <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
         <form method="GET" class="flex flex-col md:flex-row gap-4" id="filterForm">

templates/dashboard/dashboard.html

@@ -1,4 +1,5 @@
 {% extends "common/base.html" %}
+{% from "components/header.html" import header %}
 
 {% block title %}Dashboard - DocuPulse{% endblock %}
 
@@ -7,15 +8,13 @@
 {% endblock %}
 
 {% block content %}
-<div class="d-flex justify-content-between align-items-center mb-4">
+{{ header(
-    <h2>Welcome back, {{ current_user.username }}!</h2>
+    title="Welcome back, " + current_user.username + "!",
-    <div class="input-group" style="max-width: 300px;">
+    description="View your document management overview and statistics",
-        <input type="text" class="form-control" placeholder="Search documents...">
+    button_text="",
-        <button class="btn btn-outline-secondary" type="button">
+    button_url="",
-            <i class="fas fa-search"></i>
+    icon="fa-home"
-        </button>
+) }}
-    </div>
-</div>
 
 {% from 'components/storage_overview.html' import storage_overview %}
 {% from 'components/storage_usage.html' import storage_usage %}

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">
+{{ header(
-    <div class="row mb-4">
+    title="Rooms",
-        <div class="col">
+    description="Manage your document rooms and collaborate with team members",
-            <h2>Rooms</h2>
+    button_text="New Room",
-        </div>
+    button_url=url_for('rooms.create_room'),
-        <div class="col text-end">
+    icon="fa-door-open",
-            <a href="{{ url_for('rooms.create_room') }}" class="btn btn-primary">
+    button_icon="fa-plus",
-                <i class="fas fa-plus"></i> New Room
+    button_class="btn-primary",
-            </a>
+    button_style="padding: 0.4rem 1rem;"
-        </div>
+) }}
-    </div>
 
+<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;">

templates/starred/starred.html

@@ -1,13 +1,17 @@
 {% extends "common/base.html" %}
+{% from 'components/header.html' import header %}
 
 {% block title %}Starred - DocuPulse{% endblock %}
 
 {% block content %}
+{{ header(
+    title="Starred",
+    description="View and manage your starred files and documents.",
+    icon="fa-star"
+) }}
+
 <div class="container-fluid py-4">
     <div class="card shadow-sm">
-        <div class="card-header bg-white d-flex justify-content-between align-items-center">
-            <h5 class="mb-0"><i class="fas fa-star me-2" style="color:#16767b;"></i>Starred</h5>
-        </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>

templates/trash/trash.html

@@ -1,16 +1,21 @@
 {% extends "common/base.html" %}
+{% from 'components/header.html' import header %}
 
 {% block title %}Trash - DocuPulse{% endblock %}
 
 {% block content %}
+{{ header(
+    title="Trash",
+    description="View and manage deleted files. Files in trash will be permanently deleted after 30 days.",
+    button_text="Empty Trash",
+    button_url="#",
+    icon="fa-trash",
+    button_class="btn-danger",
+    button_icon=""
+) }}
+
 <div class="container-fluid py-4">
     <div class="card shadow-sm">
-        <div class="card-header bg-white d-flex justify-content-between align-items-center">
-            <h5 class="mb-0"><i class="fas fa-trash me-2" style="color:#16767b;"></i>Trash</h5>
-            <button class="btn btn-danger btn-sm" onclick="showEmptyTrashModal()">
-                <i class="fas fa-trash me-1"></i>Empty Trash
-            </button>
-        </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>
@@ -26,4 +31,11 @@
 
 {% block extra_js %}
 <script src="{{ url_for('static', filename='js/file-grid.js') }}"></script>
+<script>
+    // Update the empty trash button click handler
+    document.querySelector('a[href="#"]').addEventListener('click', function(e) {
+        e.preventDefault();
+        showEmptyTrashModal();
+    });
+</script>
 {% endblock %}