mirror of
https://github.com/Zetaphor/browser-recall.git
synced 2025-12-06 10:29:38 +00:00
Add a basic UI
This commit is contained in:
38
app/main.py
38
app/main.py
@@ -12,6 +12,9 @@ from bs4 import BeautifulSoup
|
||||
from sqlalchemy import text
|
||||
from sqlalchemy.sql import text
|
||||
from .logging_config import setup_logger
|
||||
from fastapi.templating import Jinja2Templates
|
||||
from fastapi.staticfiles import StaticFiles
|
||||
from fastapi import Request
|
||||
|
||||
from .database import get_db, HistoryEntry, Bookmark
|
||||
from .scheduler import HistoryScheduler
|
||||
@@ -34,6 +37,9 @@ app.add_middleware(
|
||||
allow_headers=["*"],
|
||||
)
|
||||
|
||||
templates = Jinja2Templates(directory="app/templates")
|
||||
app.mount("/static", StaticFiles(directory="app/static"), name="static")
|
||||
|
||||
@app.on_event("startup")
|
||||
async def startup_event():
|
||||
logger.info("Starting application")
|
||||
@@ -342,4 +348,34 @@ async def add_ignored_domain(pattern: str):
|
||||
async def remove_ignored_domain(pattern: str):
|
||||
"""Remove a domain pattern from ignored list"""
|
||||
config.remove_ignored_domain(pattern)
|
||||
return {"status": "success", "message": f"Removed pattern: {pattern}"}
|
||||
return {"status": "success", "message": f"Removed pattern: {pattern}"}
|
||||
|
||||
@app.get("/")
|
||||
async def home(request: Request, db: Session = Depends(get_db)):
|
||||
# Get recent history entries
|
||||
entries = db.query(HistoryEntry)\
|
||||
.order_by(HistoryEntry.visit_time.desc())\
|
||||
.limit(50)\
|
||||
.all()
|
||||
return templates.TemplateResponse(
|
||||
"index.html",
|
||||
{"request": request, "entries": entries}
|
||||
)
|
||||
|
||||
@app.get("/search")
|
||||
async def search_page(request: Request):
|
||||
return templates.TemplateResponse(
|
||||
"search.html",
|
||||
{"request": request}
|
||||
)
|
||||
|
||||
@app.get("/bookmarks")
|
||||
async def bookmarks_page(request: Request, db: Session = Depends(get_db)):
|
||||
bookmarks = db.query(Bookmark)\
|
||||
.order_by(Bookmark.added_time.desc())\
|
||||
.limit(50)\
|
||||
.all()
|
||||
return templates.TemplateResponse(
|
||||
"bookmarks.html",
|
||||
{"request": request, "bookmarks": bookmarks}
|
||||
)
|
||||
34
app/static/css/main.css
Normal file
34
app/static/css/main.css
Normal file
@@ -0,0 +1,34 @@
|
||||
/* Custom styles can be added here */
|
||||
.active-nav-link {
|
||||
border-color: #60a5fa;
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
/* Add smooth transitions for hover effects */
|
||||
.hover\:border-primary {
|
||||
transition: border-color 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
/* Custom scrollbar styles */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #1f2937;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #60a5fa;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #3b82f6;
|
||||
}
|
||||
|
||||
/* Dark mode input styles */
|
||||
input[type="date"]::-webkit-calendar-picker-indicator {
|
||||
filter: invert(1);
|
||||
opacity: 0.5;
|
||||
}
|
||||
64
app/templates/base.html
Normal file
64
app/templates/base.html
Normal file
@@ -0,0 +1,64 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}Browser History{% endblock %}</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="{{ url_for('static', path='/css/main.css') }}">
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: '#60a5fa',
|
||||
dark: {
|
||||
50: '#f9fafb',
|
||||
100: '#f3f4f6',
|
||||
200: '#e5e7eb',
|
||||
300: '#d1d5db',
|
||||
400: '#9ca3af',
|
||||
500: '#6b7280',
|
||||
600: '#4b5563',
|
||||
700: '#374151',
|
||||
800: '#1f2937',
|
||||
900: '#111827',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="bg-dark-900 text-gray-100">
|
||||
<nav class="bg-dark-800 shadow-lg border-b border-dark-700">
|
||||
<div class="max-w-7xl mx-auto px-4">
|
||||
<div class="flex justify-between h-16">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0 flex items-center">
|
||||
<a href="/" class="text-xl font-bold text-primary">Browser History</a>
|
||||
</div>
|
||||
<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
|
||||
<a href="/"
|
||||
class="text-gray-300 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-primary hover:text-primary">Home</a>
|
||||
<a href="/search"
|
||||
class="text-gray-300 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-primary hover:text-primary">Search</a>
|
||||
<a href="/bookmarks"
|
||||
class="text-gray-300 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-primary hover:text-primary">Bookmarks</a>
|
||||
<a href="/docs"
|
||||
class="text-gray-300 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-primary hover:text-primary">API
|
||||
Docs</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
32
app/templates/bookmarks.html
Normal file
32
app/templates/bookmarks.html
Normal file
@@ -0,0 +1,32 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Browser History - Bookmarks{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="bg-dark-800 shadow overflow-hidden sm:rounded-lg border border-dark-700">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-100">Bookmarks</h3>
|
||||
</div>
|
||||
<div class="border-t border-dark-700">
|
||||
<ul class="divide-y divide-gray-200" id="bookmarks-list">
|
||||
{% for bookmark in bookmarks %}
|
||||
<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="{{ bookmark.url }}" target="_blank">{{ bookmark.title }}</a>
|
||||
</p>
|
||||
<p class="text-sm text-gray-400">
|
||||
{{ bookmark.domain }} • {{ bookmark.added_time }}
|
||||
{% if bookmark.folder %}
|
||||
<span class="ml-2 px-2 py-1 text-xs rounded-full bg-dark-700 text-gray-300">{{ bookmark.folder }}</span>
|
||||
{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
29
app/templates/index.html
Normal file
29
app/templates/index.html
Normal file
@@ -0,0 +1,29 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Browser History - Home{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="bg-dark-800 shadow overflow-hidden sm:rounded-lg border border-dark-700">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-100">Recent History</h3>
|
||||
</div>
|
||||
<div class="border-t border-dark-700">
|
||||
<ul class="divide-y divide-gray-200" id="history-list">
|
||||
{% for entry in entries %}
|
||||
<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-400">
|
||||
{{ entry.domain }} • {{ entry.visit_time }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
82
app/templates/search.html
Normal file
82
app/templates/search.html
Normal file
@@ -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 %}
|
||||
Reference in New Issue
Block a user