LinkSyncServer: - Fix app.py imports, add CORS middleware, lifespan events - Create api/routes.py router aggregator - Create config/settings.py for centralized configuration - Rewrite models/base.py with proper relationships and serialization - Rewrite all API endpoints with real DB integration (auth, links, collections, sync, queries, tags) - Add admin endpoints (user management, stats, audit log) - Complete query parser with recursive descent and proper precedence - Complete query executor with set operations and field filters - Set up Alembic migrations with initial schema - Create web interface (templates, CSS, JS) - Add 42 passing tests (auth, links, collections, queries) - Add deploy.ps1 and deploy.sh scripts - Update README with deployment workflow LinkSyncExtension: - Create utils/api.js (REST client with retries, auth, error handling) - Create utils/sync.js (3 sync modes + conflict detection) - Create utils/collection.js (collection management) - Create utils/query-engine.js (client-side query parser) - Rewrite background.js (sync loop, bookmark events, message routing) - Rewrite popup.js (tabs, settings modal, notifications, CRUD) - Update popup.html (tabbed interface, query builder, modal) - Update popup.css (full redesign) - Create content/content.js (page metadata extraction) - Create options.html/js (dedicated settings page) - Generate icons (48x48, 96x96) - Update manifest.json (host permissions, content scripts, options) - Create AGENTS.md
163 lines
5.0 KiB
HTML
163 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>LinkSync Settings</title>
|
|
<style>
|
|
:root {
|
|
--primary: #3b82f6;
|
|
--primary-hover: #2563eb;
|
|
--success: #10b981;
|
|
--error: #ef4444;
|
|
--background: #ffffff;
|
|
--surface: #f9fafb;
|
|
--border: #e5e7eb;
|
|
--text: #111827;
|
|
--text-secondary: #6b7280;
|
|
}
|
|
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
body {
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
line-height: 1.6;
|
|
padding: 2rem;
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
h1 { font-size: 1.5rem; margin-bottom: 1.5rem; color: var(--primary); }
|
|
h2 { font-size: 1.1rem; margin: 1.5rem 0 0.75rem; }
|
|
|
|
.card {
|
|
background: var(--background);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
padding: 1.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.form-group { margin-bottom: 1rem; }
|
|
.form-group label {
|
|
display: block;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.form-group input, .form-group select {
|
|
width: 100%;
|
|
padding: 0.5rem 0.75rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.form-group input:focus, .form-group select:focus {
|
|
outline: none;
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
|
|
}
|
|
|
|
.checkbox-group label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.checkbox-group input { width: auto; }
|
|
|
|
button {
|
|
padding: 0.5rem 1rem;
|
|
border: none;
|
|
border-radius: 4px;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn-primary { background: var(--primary); color: white; }
|
|
.btn-primary:hover { background: var(--primary-hover); }
|
|
.btn-secondary { background: var(--surface); border: 1px solid var(--border); }
|
|
|
|
.actions { display: flex; gap: 0.5rem; margin-top: 1rem; }
|
|
|
|
#status {
|
|
padding: 0.75rem;
|
|
border-radius: 4px;
|
|
margin-top: 1rem;
|
|
display: none;
|
|
}
|
|
#status.success { display: block; background: #d1fae5; color: #065f46; }
|
|
#status.error { display: block; background: #fee2e2; color: #991b1b; }
|
|
|
|
.sync-info {
|
|
font-size: 0.8rem;
|
|
color: var(--text-secondary);
|
|
margin-top: 0.5rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>LinkSync Settings</h1>
|
|
|
|
<div class="card">
|
|
<h2>Server Connection</h2>
|
|
<form id="connection-form">
|
|
<div class="form-group">
|
|
<label for="server-url">Server URL</label>
|
|
<input type="url" id="server-url" placeholder="http://localhost:5000">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="api-key">API Key</label>
|
|
<input type="password" id="api-key" placeholder="Your API key">
|
|
</div>
|
|
<div class="actions">
|
|
<button type="button" id="test-btn" class="btn-secondary">Test Connection</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>Sync Settings</h2>
|
|
<form id="sync-form">
|
|
<div class="form-group">
|
|
<label for="sync-mode">Sync Mode</label>
|
|
<select id="sync-mode">
|
|
<option value="bi-directional">Bi-directional</option>
|
|
<option value="browser-authoritative">Browser Authoritative</option>
|
|
<option value="server-authoritative">Server Authoritative</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group checkbox-group">
|
|
<label>
|
|
<input type="checkbox" id="deletions">
|
|
Enable deletions during sync
|
|
</label>
|
|
</div>
|
|
<div class="form-group checkbox-group">
|
|
<label>
|
|
<input type="checkbox" id="auto-sync">
|
|
Auto-sync every 5 minutes
|
|
</label>
|
|
</div>
|
|
<div class="actions">
|
|
<button type="submit" class="btn-primary">Save Settings</button>
|
|
<button type="button" id="sync-now-btn" class="btn-secondary">Sync Now</button>
|
|
</div>
|
|
<div class="sync-info" id="sync-info"></div>
|
|
</form>
|
|
</div>
|
|
|
|
<div id="status"></div>
|
|
|
|
<script src="utils/api.js"></script>
|
|
<script src="options.js"></script>
|
|
</body>
|
|
</html>
|