mirror of
https://github.com/Zetaphor/browser-recall.git
synced 2026-10-28 06:20:12 +00:00
Improve UI
This commit is contained in:
zetaphor committed
1 parent
1d09e7069a
commit
1134a814d2
3 files changed
+282
-29
No files matched your search
@@ -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);
|
||||
}
|
||||
}
|
||||
Vendored
+6
@@ -0,0 +1,6 @@
|
||||
/**
|
||||
* marked v15.0.6 - a markdown parser
|
||||
* Copyright (c) 2011-2025, Christopher Jeffrey. (MIT Licensed)
|
||||
* https://github.com/markedjs/marked
|
||||
*/
|
||||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).marked={})}(this,(function(e){"use strict";function t(){return{async:!1,breaks:!1,extensions:null,gfm:!0,hooks:null,pedantic:!1,renderer:null,silent:!1,tokenizer:null,walkTokens:null}}function n(t){e.defaults=t}e.defaults={async:!1,breaks:!1,extensions:null,gfm:!0,hooks:null,pedantic:!1,renderer:null,silent:!1,tokenizer:null,walkTokens:null};const s={exec:()=>null};function r(e,t=""){let n="string"==typeof e?e:e.source;const s={replace:(e,t)=>{let r="string"==typeof t?t:t.source;return r=r.replace(i.caret,"$1"),n=n.replace(e,r),s},getRegex:()=>new RegExp(n,t)};return s}const i={codeRemoveIndent:/^(?: {1,4}| {0,3}\t)/gm,outputLinkReplace:/\\([\[\]])/g,indentCodeCompensation:/^(\s+)(?:```)/,beginningSpace:/^\s+/,endingHash:/#$/,startingSpaceChar:/^ /,endingSpaceChar:/ $/,nonSpaceChar:/[^ ]/,newLineCharGlobal:/\n/g,tabCharGlobal:/\t/g,multipleSpaceGlobal:/\s+/g,blankLine:/^[ \t]*$/,doubleBlankLine:/\n[ \t]*\n[ \t]*$/,blockquoteStart:/^ {0,3}>/,blockquoteSetextReplace:/\n {0,3}((?:=+|-+) *)(?=\n|$)/g,blockquoteSetextReplace2:/^ {0,3}>[ \t]?/gm,listReplaceTabs:/^\t+/,listReplaceNesting:/^ {1,4}(?=( {4})*[^ ])/g,listIsTask:/^\[[ xX]\] /,listReplaceTask:/^\[[ xX]\] +/,anyLine:/\n.*\n/,hrefBrackets:/^<(.*)>$/,tableDelimiter:/[:|]/,tableAlignChars:/^\||\| *$/g,tableRowBlankLine:/\n[ \t]*$/,tableAlignRight:/^ *-+: *$/,tableAlignCenter:/^ *:-+: *$/,tableAlignLeft:/^ *:-+ *$/,startATag:/^<a /i,endATag:/^<\/a>/i,startPreScriptTag:/^<(pre|code|kbd|script)(\s|>)/i,endPreScriptTag:/^<\/(pre|code|kbd|script)(\s|>)/i,startAngleBracket:/^</,endAngleBracket:/>$/,pedanticHrefTitle:/^([^'"]*[^\s])\s+(['"])(.*)\2/,unicodeAlphaNumeric:/[\p{L}\p{N}]/u,escapeTest:/[&<>"']/,escapeReplace:/[&<>"']/g,escapeTestNoEncode:/[<>"']|&(?!(#\d{1,7}|#[Xx][a-fA-F0-9]{1,6}|\w+);)/,escapeReplaceNoEncode:/[<>"']|&(?!(#\d{1,7}|#[Xx][a-fA-F0-9]{1,6}|\w+);)/g,unescapeTest:/&(#(?:\d+)|(?:#x[0-9A-Fa-f]+)|(?:\w+));?/gi,caret:/(^|[^\[])\^/g,percentDecode:/%25/g,findPipe:/\|/g,splitPipe:/ \|/,slashPipe:/\\\|/g,carriageReturn:/\r\n|\r/g,spaceLine:/^ +$/gm,notSpaceStart:/^\S*/,endingNewline:/\n$/,listItemRegex:e=>new RegExp(`^( {0,3}${e})((?:[\t ][^\\n]*)?(?:\\n|$))`),nextBulletRegex:e=>new RegExp(`^ {0,${Math.min(3,e-1)}}(?:[*+-]|\\d{1,9}[.)])((?:[ \t][^\\n]*)?(?:\\n|$))`),hrRegex:e=>new RegExp(`^ {0,${Math.min(3,e-1)}}((?:- *){3,}|(?:_ *){3,}|(?:\\* *){3,})(?:\\n+|$)`),fencesBeginRegex:e=>new RegExp(`^ {0,${Math.min(3,e-1)}}(?:\`\`\`|~~~)`),headingBeginRegex:e=>new RegExp(`^ {0,${Math.min(3,e-1)}}#`),htmlBeginRegex:e=>new RegExp(`^ {0,${Math.min(3,e-1)}}<(?:[a-z].*>|!--)`,"i")},l=/^ {0,3}((?:-[\t ]*){3,}|(?:_[ \t]*){3,}|(?:\*[ \t]*){3,})(?:\n+|$)/,o=/(?:[*+-]|\d{1,9}[.)])/,a=r(/^(?!bull |blockCode|fences|blockquote|heading|html)((?:.|\n(?!\s*?\n|bull |blockCode|fences|blockquote|heading|html))+?)\n {0,3}(=+|-+) *(?:\n+|$)/).replace(/bull/g,o).replace(/blockCode/g,/(?: {4}| {0,3}\t)/).replace(/fences/g,/ {0,3}(?:`{3,}|~{3,})/).replace(/blockquote/g,/ {0,3}>/).replace(/heading/g,/ {0,3}#{1,6}/).replace(/html/g,/ {0,3}<[^\n>]+>\n/).getRegex(),c=/^([^\n]+(?:\n(?!hr|heading|lheading|blockquote|fences|list|html|table| +\n)[^\n]+)*)/,h=/(?!\s*\])(?:\\.|[^\[\]\\])+/,p=r(/^ {0,3}\[(label)\]: *(?:\n[ \t]*)?([^<\s][^\s]*|<.*?>)(?:(?: +(?:\n[ \t]*)?| *\n[ \t]*)(title))? *(?:\n+|$)/).replace("label",h).replace("title",/(?:"(?:\\"?|[^"\\])*"|'[^'\n]*(?:\n[^'\n]+)*\n?'|\([^()]*\))/).getRegex(),u=r(/^( {0,3}bull)([ \t][^\n]+?)?(?:\n|$)/).replace(/bull/g,o).getRegex(),g="address|article|aside|base|basefont|blockquote|body|caption|center|col|colgroup|dd|details|dialog|dir|div|dl|dt|fieldset|figcaption|figure|footer|form|frame|frameset|h[1-6]|head|header|hr|html|iframe|legend|li|link|main|menu|menuitem|meta|nav|noframes|ol|optgroup|option|p|param|search|section|summary|table|tbody|td|tfoot|th|thead|title|tr|track|ul",k=/<!--(?:-?>|[\s\S]*?(?:-->|$))/,d=r("^ {0,3}(?:<(script|pre|style|textarea)[\\s>][\\s\\S]*?(?:</\\1>[^\\n]*\\n+|$)|comment[^\\n]*(\\n+|$)|<\\?[\\s\\S]*?(?:\\?>\\n*|$)|<![A-Z][\\s\\S]*?(?:>\\n*|$)|<!\\[CDATA\\[[\\s\\S]*?(?:\\]\\]>\\n*|$)|</?(tag)(?: +|\\n|/?>)[\\s\\S]*?(?:(?:\\n[ \t]*)+\\n|$)|<(?!script|pre|style|textarea)([a-z][\\w-]*)(?:attribute)*? */?>(?=[ \\t]*(?:\\n|$))[\\s\\S]*?(?:(?:\\n[ \t]*)+\\n|$)|</(?!script|pre|style|textarea)[a-z][\\w-]*\\s*>(?=[ \\t]*(?:\\n|$))[\\s\\S]*?(?:(?:\\n[ \t]*)+\\n|$))","i").replace("comment",k).replace("tag",g).replace("attribute",/ +[a-zA-Z:_][\w.:-]*(?: *= *"[^"\n]*"| *= *'[^'\n]*'| *= *[^\s"'=<>`]+)?/).getRegex(),f=r(c).replace("hr",l).replace("heading"," {0,3}#{1,6}(?:\\s|$)").replace("|lheading","").replace("|table","").replace("blockquote"," {0,3}>").replace("fences"," {0,3}(?:`{3,}(?=[^`\\n]*\\n)|~{3,})[^\\n]*\\n").replace("list"," {0,3}(?:[*+-]|1[.)]) ").replace("html","</?(?:tag)(?: +|\\n|/?>)|<(?:script|pre|style|textLine truncated
|
||||
+101
-29
@@ -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">
|
||||
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
||||
<form id="search-form">
|
||||
<div class="form-grid">
|
||||
<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">
|
||||
<label for="search-term" class="form-label">Search Term</label>
|
||||
<input type="text" name="search-term" id="search-term" placeholder="Enter search terms..."
|
||||
class="form-input w-full rounded-md">
|
||||
</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">
|
||||
<label for="domain" class="form-label">Domain</label>
|
||||
<input type="text" name="domain" id="domain" placeholder="example.com" class="form-input w-full rounded-md">
|
||||
</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">
|
||||
<label for="start-date" class="form-label">Start Date</label>
|
||||
<input type="date" name="start-date" id="start-date" class="form-input w-full rounded-md">
|
||||
</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">
|
||||
<label for="end-date" class="form-label">End Date</label>
|
||||
<input type="date" name="end-date" id="end-date" class="form-input w-full rounded-md">
|
||||
</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 type="submit" class="search-button">
|
||||
<span class="flex items-center">
|
||||
<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 => `
|
||||
<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>
|
||||
resultsContainer.innerHTML = results.map((entry, index) => {
|
||||
let contentHtml = '';
|
||||
|
||||
if (entry.markdown_content) {
|
||||
const preview = getPreviewAroundMatch(entry.markdown_content, searchTerm);
|
||||
const fullContent = marked.parse(highlightSearchTerm(entry.markdown_content, searchTerm));
|
||||
const previewHtml = marked.parse(highlightSearchTerm(preview, searchTerm));
|
||||
|
||||
contentHtml = `
|
||||
<div class="mt-2 text-sm text-gray-300">
|
||||
<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 %}
|
||||
Reference in new issue
Block a user