Improve UI

app/static/css/main.css

@@ -31,4 +31,179 @@
 input[type="date"]::-webkit-calendar-picker-indicator {
   filter: invert(1);
   opacity: 0.5;
+}
+
+/* Search result styles */
+.prose {
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.prose p {
+  margin-bottom: 0.75rem;
+}
+
+.prose h1,
+.prose h2,
+.prose h3,
+.prose h4 {
+  color: #f3f4f6;
+  font-weight: 600;
+  margin: 1.5rem 0 0.75rem 0;
+}
+
+.prose a {
+  color: #60a5fa;
+  text-decoration: underline;
+}
+
+.prose code {
+  background: #374151;
+  padding: 0.2em 0.4em;
+  border-radius: 0.25rem;
+  font-size: 0.875em;
+}
+
+.prose pre {
+  background: #374151;
+  padding: 1rem;
+  border-radius: 0.375rem;
+  overflow-x: auto;
+  margin: 1rem 0;
+}
+
+.prose pre code {
+  background: transparent;
+  padding: 0;
+}
+
+.prose ul,
+.prose ol {
+  padding-left: 1.5rem;
+  margin: 0.75rem 0;
+}
+
+.prose li {
+  margin: 0.25rem 0;
+}
+
+.prose blockquote {
+  border-left: 4px solid #4b5563;
+  padding-left: 1rem;
+  margin: 1rem 0;
+  color: #9ca3af;
+}
+
+/* Search highlight styles */
+.highlight-search {
+  background-color: #60a5fa;
+  color: #111827;
+  padding: 0.1em 0.2em;
+  border-radius: 0.2em;
+  font-weight: 600;
+}
+
+/* Preview text styles */
+.preview-text {
+  color: #9ca3af;
+  position: relative;
+}
+
+.preview-text::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 2rem;
+  background: linear-gradient(transparent, #1f2937);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.preview-text.collapsed::after {
+  opacity: 1;
+}
+
+.preview-text.collapsed {
+  max-height: 8rem;
+  overflow: hidden;
+}
+
+/* Expand button styles */
+.expand-button {
+  color: #60a5fa;
+  font-size: 0.875rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  transition: all 0.2s;
+  border: 1px solid #374151;
+}
+
+.expand-button:hover {
+  background-color: #374151;
+}
+
+/* Form input styles */
+.form-input {
+  background-color: #1f2937;
+  border-color: #374151;
+  color: #f3f4f6;
+  transition: all 0.2s;
+}
+
+.form-input:hover {
+  border-color: #4b5563;
+}
+
+.form-input:focus {
+  border-color: #60a5fa;
+  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
+  outline: none;
+}
+
+/* Form label styles */
+.form-label {
+  color: #9ca3af;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+}
+
+/* Search button styles */
+.search-button {
+  background-color: #2563eb;
+  color: white;
+  font-weight: 500;
+  padding: 0.5rem 1.5rem;
+  border-radius: 0.375rem;
+  transition: all 0.2s;
+  border: 1px solid transparent;
+}
+
+.search-button:hover {
+  background-color: #1d4ed8;
+}
+
+.search-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.5);
+}
+
+.search-button:active {
+  background-color: #1e40af;
+}
+
+/* Form grid layout */
+.form-grid {
+  display: grid;
+  gap: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+@media (min-width: 640px) {
+  .form-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
 }

app/templates/search.html

@@ -4,33 +4,35 @@
 
 {% 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">
+  <form id="search-form">
-    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
+    <div class="form-grid">
       <div>
-        <label for="search-term" class="block text-sm font-medium text-gray-300">Search Term</label>
+        <label for="search-term" class="form-label">Search Term</label>
-        <input type="text" name="search-term" id="search-term"
+        <input type="text" name="search-term" id="search-term" placeholder="Enter search terms..."
-          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">
+          class="form-input w-full rounded-md">
       </div>
       <div>
-        <label for="domain" class="block text-sm font-medium text-gray-300">Domain</label>
+        <label for="domain" class="form-label">Domain</label>
-        <input type="text" name="domain" id="domain"
+        <input type="text" name="domain" id="domain" placeholder="example.com" class="form-input w-full rounded-md">
-          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>
+        <label for="start-date" class="form-label">Start Date</label>
-        <input type="date" name="start-date" id="start-date"
+        <input type="date" name="start-date" id="start-date" class="form-input w-full rounded-md">
-          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>
+        <label for="end-date" class="form-label">End Date</label>
-        <input type="date" name="end-date" id="end-date"
+        <input type="date" name="end-date" id="end-date" class="form-input w-full rounded-md">
-          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"
+      <button type="submit" class="search-button">
-        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">
+        <span class="flex items-center">
-        Search
+          <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+          </svg>
+          Search
+        </span>
       </button>
     </div>
   </form>
@@ -44,7 +46,49 @@
   </div>
 </div>
 
+<!-- Add Marked.js -->
+<script src="{{ url_for('static', path='/js/marked.min.js') }}"></script>
+
 <script>
+  // Configure marked for security
+  marked.setOptions({
+    headerIds: false,
+    mangle: false
+  });
+
+  function highlightSearchTerm(text, searchTerm) {
+    if (!searchTerm || !text) return text;
+    const regex = new RegExp(`(${searchTerm})`, 'gi');
+    return text.replace(regex, '<mark class="highlight-search">$1</mark>');
+  }
+
+  function getPreviewAroundMatch(text, searchTerm) {
+    if (!text || !searchTerm) return '';
+
+    const regex = new RegExp(searchTerm, 'i');
+    const match = text.match(regex);
+    if (!match) return text.slice(0, 200) + '...';
+
+    const matchIndex = match.index;
+    const previewLength = 150;
+    const start = Math.max(0, matchIndex - previewLength);
+    const end = Math.min(text.length, matchIndex + match[0].length + previewLength);
+
+    let preview = text.slice(start, end);
+    if (start > 0) preview = '...' + preview;
+    if (end < text.length) preview = preview + '...';
+
+    return preview;
+  }
+
+  function toggleContent(button, contentId) {
+    const content = document.getElementById(contentId);
+    const isCollapsed = content.classList.contains('collapsed');
+
+    content.classList.toggle('collapsed');
+    button.textContent = isCollapsed ? 'Show Less' : 'Show More';
+  }
+
   document.getElementById('search-form').addEventListener('submit', async (e) => {
     e.preventDefault();
 
@@ -58,25 +102,53 @@
     if (domain) params.append('domain', domain);
     if (startDate) params.append('start_date', startDate);
     if (endDate) params.append('end_date', endDate);
+    params.append('include_content', 'true');
 
     const response = await fetch(`/history/search?${params.toString()}`);
     const results = await response.json();
 
     const resultsContainer = document.getElementById('search-results');
-    resultsContainer.innerHTML = results.map(entry => `
+    resultsContainer.innerHTML = results.map((entry, index) => {
-        <li class="px-4 py-4">
+      let contentHtml = '';
-            <div class="flex items-center justify-between">
+
-                <div class="flex-1 min-w-0">
+      if (entry.markdown_content) {
-                    <p class="text-sm font-medium text-primary truncate">
+        const preview = getPreviewAroundMatch(entry.markdown_content, searchTerm);
-                        <a href="${entry.url}" target="_blank">${entry.title}</a>
+        const fullContent = marked.parse(highlightSearchTerm(entry.markdown_content, searchTerm));
-                    </p>
+        const previewHtml = marked.parse(highlightSearchTerm(preview, searchTerm));
-                    <p class="text-sm text-gray-500">
+
-                        ${entry.domain} • ${new Date(entry.visit_time).toLocaleString()}
+        contentHtml = `
-                    </p>
+          <div class="mt-2 text-sm text-gray-300">
-                </div>
+            <div id="content-${index}" class="preview-text prose prose-invert max-w-none collapsed">
+              ${fullContent}
             </div>
+            <div class="mt-2">
+              <button
+                onclick="toggleContent(this, 'content-${index}')"
+                class="expand-button"
+              >
+                Show More
+              </button>
+            </div>
+          </div>
+        `;
+      }
+
+      return `
+        <li class="px-4 py-4">
+          <div class="flex-1 min-w-0">
+            <div class="flex items-center justify-between mb-2">
+              <p class="text-sm font-medium text-primary truncate">
+                <a href="${entry.url}" target="_blank">${highlightSearchTerm(entry.title, searchTerm)}</a>
+              </p>
+              <p class="text-sm text-gray-400 ml-4">
+                ${entry.domain} • ${new Date(entry.visit_time).toLocaleString()}
+              </p>
+            </div>
+            ${contentHtml}
+          </div>
         </li>
-    `).join('');
+      `;
+    }).join('');
   });
 </script>
 {% endblock %}