zetaphor/browser-recall
1
0
Fork 0
mirror of https://github.com/Zetaphor/browser-recall.git synced 2025-12-06 10:29:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add a basic UI

Browse Source
This commit is contained in:
Zetaphor
2025-01-25 23:54:03 -06:00
parent 668e1bfb0d
commit cb15adc9a6
9 changed files with 306 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
README.md
View File

@@ -86,12 +86,30 @@ python main.py
- Send content to the backend server - Send content to the backend server
- Update history and bookmarks - Update history and bookmarks
3. Access the API endpoints: 3. Access the web interface:
- Home page: `http://localhost:8523/`
- Search interface: `http://localhost:8523/search`
- Bookmarks page: `http://localhost:8523/bookmarks`
4. Access the API endpoints:
- Search history: `GET /history/search` - Search history: `GET /history/search`
- Search bookmarks: `GET /bookmarks/search` - Search bookmarks: `GET /bookmarks/search`
- Advanced search: `GET /history/search/advanced` - Advanced search: `GET /history/search/advanced`
- Manage ignored domains: `GET/POST/DELETE /config/ignored-domains` - Manage ignored domains: `GET/POST/DELETE /config/ignored-domains`
## Web Interface
Browser Recall includes a basic web interface for viewing and searching your browsing history and bookmarks:
- **Home Page**: Displays recent browsing history
- **Search Page**: Provides a form interface for searching history with filters
- **Bookmarks Page**: Shows your browser bookmarks
The interface is built with:
- Tailwind CSS for styling
- Responsive design for mobile and desktop
- Dark mode for comfortable viewing
## API Documentation ## API Documentation
The API documentation is available through FastAPI's interactive interface at `http://localhost:8523/docs`. This provides a complete API reference with: The API documentation is available through FastAPI's interactive interface at `http://localhost:8523/docs`. This provides a complete API reference with:

36
app/main.py
View File

@@ -12,6 +12,9 @@ from bs4 import BeautifulSoup
from sqlalchemy import text from sqlalchemy import text
from sqlalchemy.sql import text from sqlalchemy.sql import text
from .logging_config import setup_logger 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 .database import get_db, HistoryEntry, Bookmark
from .scheduler import HistoryScheduler from .scheduler import HistoryScheduler
@@ -34,6 +37,9 @@ app.add_middleware(
allow_headers=["*"], allow_headers=["*"],
) )
templates = Jinja2Templates(directory="app/templates")
app.mount("/static", StaticFiles(directory="app/static"), name="static")
@app.on_event("startup") @app.on_event("startup")
async def startup_event(): async def startup_event():
logger.info("Starting application") logger.info("Starting application")
@@ -343,3 +349,33 @@ async def remove_ignored_domain(pattern: str):
"""Remove a domain pattern from ignored list""" """Remove a domain pattern from ignored list"""
config.remove_ignored_domain(pattern) 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
View 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
View 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
View 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
View 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
View 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 %}

1
config/reader_config.yaml
View File

@@ -8,6 +8,7 @@ excluded_domains:
- 192.168.*.* - 192.168.*.*
- 10.*.*.* - 10.*.*.*
- 172.16.*.* - 172.16.*.*
- "0.0.0.*"
# Example wildcard patterns # Example wildcard patterns
# - *.local # - *.local

8
requirements.txt
View File

@@ -1,6 +1,14 @@
fastapi fastapi
uvicorn uvicorn
sqlalchemy sqlalchemy
jinja2
python-multipart
aiofiles
websockets
beautifulsoup4
markdown
python-iso8601
pytz
browser-history browser-history
beautifulsoup4>=4.9.3 beautifulsoup4>=4.9.3
markdownify markdownify