Add a basic UI

app/templates/search.html

@@ -0,0 +1,82 @@
+{% extends "base.html" %}
+
+{% block title %}Browser History - Search{% endblock %}
+
+{% block content %}
+<div class="bg-dark-800 shadow sm:rounded-lg p-6 border border-dark-700">
+  <form id="search-form" class="space-y-6">
+    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
+      <div>
+        <label for="search-term" class="block text-sm font-medium text-gray-300">Search Term</label>
+        <input type="text" name="search-term" id="search-term"
+          class="mt-1 block w-full rounded-md border-dark-600 bg-dark-700 text-gray-100 shadow-sm focus:border-primary focus:ring-primary">
+      </div>
+      <div>
+        <label for="domain" class="block text-sm font-medium text-gray-300">Domain</label>
+        <input type="text" name="domain" id="domain"
+          class="mt-1 block w-full rounded-md border-dark-600 bg-dark-700 text-gray-100 shadow-sm focus:border-primary focus:ring-primary">
+      </div>
+      <div>
+        <label for="start-date" class="block text-sm font-medium text-gray-300">Start Date</label>
+        <input type="date" name="start-date" id="start-date"
+          class="mt-1 block w-full rounded-md border-dark-600 bg-dark-700 text-gray-100 shadow-sm focus:border-primary focus:ring-primary">
+      </div>
+      <div>
+        <label for="end-date" class="block text-sm font-medium text-gray-300">End Date</label>
+        <input type="date" name="end-date" id="end-date"
+          class="mt-1 block w-full rounded-md border-dark-600 bg-dark-700 text-gray-100 shadow-sm focus:border-primary focus:ring-primary">
+      </div>
+    </div>
+    <div class="flex justify-end">
+      <button type="submit"
+        class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
+        Search
+      </button>
+    </div>
+  </form>
+
+  <div id="results" class="mt-8">
+    <div class="border-t border-dark-700 mt-4">
+      <ul class="divide-y divide-gray-200" id="search-results">
+        <!-- Results will be populated here -->
+      </ul>
+    </div>
+  </div>
+</div>
+
+<script>
+  document.getElementById('search-form').addEventListener('submit', async (e) => {
+    e.preventDefault();
+
+    const searchTerm = document.getElementById('search-term').value;
+    const domain = document.getElementById('domain').value;
+    const startDate = document.getElementById('start-date').value;
+    const endDate = document.getElementById('end-date').value;
+
+    const params = new URLSearchParams();
+    if (searchTerm) params.append('search_term', searchTerm);
+    if (domain) params.append('domain', domain);
+    if (startDate) params.append('start_date', startDate);
+    if (endDate) params.append('end_date', endDate);
+
+    const response = await fetch(`/history/search?${params.toString()}`);
+    const results = await response.json();
+
+    const resultsContainer = document.getElementById('search-results');
+    resultsContainer.innerHTML = results.map(entry => `
+        <li class="px-4 py-4">
+            <div class="flex items-center justify-between">
+                <div class="flex-1 min-w-0">
+                    <p class="text-sm font-medium text-primary truncate">
+                        <a href="${entry.url}" target="_blank">${entry.title}</a>
+                    </p>
+                    <p class="text-sm text-gray-500">
+                        ${entry.domain} • ${new Date(entry.visit_time).toLocaleString()}
+                    </p>
+                </div>
+            </div>
+        </li>
+    `).join('');
+  });
+</script>
+{% endblock %}