olaf/Link-Log
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

plugin settings and eyecandy

Browse Source
This commit is contained in:
Olaf
2026-08-25 08:12:39 +02:00
parent f6077f0063
commit 1cba4e8649
7 changed files with 58 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+1
View File
@@ -79,6 +79,7 @@ Open these URLs:
The browser extension defaults to `http://localhost:8000`. The browser extension defaults to `http://localhost:8000`.
The supplied `Logo.svg` is bundled as `frontend/static/logo.svg` for web pages and `webextension/logo.svg` for the Firefox popup and settings page. The supplied `Logo.svg` is bundled as `frontend/static/logo.svg` for web pages and `webextension/logo.svg` for the Firefox popup and settings page.
The visible LinkLog brand text uses the Google Foundry `Asset` font when available, with local fallbacks in the Firefox extension.
## Regenerate Logo Assets ## Regenerate Logo Assets
VIBE/CHAT_LOG.md
+12
View File
@@ -439,3 +439,15 @@ Refine the Plugins Settings page. When the user is logged in it shows all "<user
### Assistant outcome ### Assistant outcome
Updated the Firefox extension settings page to restore valid stored sessions, show `<username> logged in at <backend URL>` with a sign-out button, and show the original login form when signed out or when token validation fails. Sign-out revokes the token when possible, clears stored credentials, and returns to the form. Extension and backend validation passed. Updated the Firefox extension settings page to restore valid stored sessions, show `<username> logged in at <backend URL>` with a sign-out button, and show the original login form when signed out or when token validation fails. Sign-out revokes the token when possible, clears stored credentials, and returns to the form. Extension and backend validation passed.
### User
On the plugin, next to the logo, create a link of the form: [LinkLog](https://<host>/<user>)
### Assistant outcome
Added a `LinkLog` link next to the Firefox popup logo. It uses the configured backend origin and authenticated username to target `/<user>/`, preserving HTTP or HTTPS from the configured backend. Popup HTML, scripts, manifest, and backend regression validation passed.
### User
Use the Asset Font from google foundry as font for the LinkLog text
### Assistant outcome
Applied the Google Foundry `Asset` font to visible LinkLog branding on the web and Firefox popup, retaining graceful local fallbacks for restricted or offline extension contexts. Font declarations, branding references, extension scripts, whitespace checks, and the strict backend suite passed.
VIBE/PROMPTS.md
+2
View File
@@ -76,6 +76,8 @@
72. Make sure the addon conforms to Firefox guidelines 72. Make sure the addon conforms to Firefox guidelines
73. How come when te container starts after docker compose down -v the database is still populated with old links 73. How come when te container starts after docker compose down -v the database is still populated with old links
74. Refine the Plugins Settings page. When the user is logged in it shows all "<user> logged in at <url>" and a sign-out button. If the user is not logged in it shows the form as is now. 74. Refine the Plugins Settings page. When the user is logged in it shows all "<user> logged in at <url>" and a sign-out button. If the user is not logged in it shows the form as is now.
75. On the plugin, next to the logo, create a link of the form: [LinkLog](https://<host>/<user>)
76. Use the Asset Font from google foundry as font for the LinkLog text
## Future entries ## Future entries
frontend/static/style.css
+6 -1
View File
@@ -1,4 +1,4 @@
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Asset&family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root { :root {
--base: #1e1e2e; --base: #1e1e2e;
@@ -93,6 +93,11 @@ body::selection {
object-position: left center; object-position: left center;
} }
.site-header .site-logo + h1,
.feed-link {
font-family: 'Asset', 'Space Grotesk', sans-serif;
}
.site-header p { .site-header p {
max-width: 34rem; max-width: 34rem;
margin: 14px 0 0; margin: 14px 0 0;
webextension/popup.css
+21 -1
View File
@@ -16,15 +16,35 @@ header h1 {
font-size: 1.2rem; font-size: 1.2rem;
} }
header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.extension-logo { .extension-logo {
display: block; display: block;
width: 150px; width: 150px;
height: 42px; height: 42px;
margin-bottom: 14px; margin-bottom: 0;
object-fit: contain; object-fit: contain;
object-position: left center; object-position: left center;
} }
.feed-link {
color: #b4befe;
font-family: 'Asset', 'Avenir Next', sans-serif;
font-size: 0.95rem;
font-weight: 700;
text-decoration: none;
}
.feed-link:hover {
color: #cba6f7;
text-decoration: underline;
}
label { label {
display: block; display: block;
margin-bottom: 12px; margin-bottom: 12px;
webextension/popup.html
+2 -1
View File
@@ -8,7 +8,8 @@
<body> <body>
<main class="popup-shell"> <main class="popup-shell">
<header> <header>
<img class="extension-logo" src="logo.svg" alt="LinkLog" /> <img class="extension-logo" src="logo.svg" alt="LinkLog" />
<a id="feed-link" class="feed-link hidden" href="/" target="_blank" rel="noopener noreferrer">LinkLog</a>
</header> </header>
<div id="status" class="status hidden" aria-live="polite"></div> <div id="status" class="status hidden" aria-live="polite"></div>
webextension/popup.js
+14
View File
@@ -6,6 +6,7 @@ const commentInput = document.getElementById('comment');
const openSettingsButton = document.getElementById('open-settings'); const openSettingsButton = document.getElementById('open-settings');
const existingTags = document.getElementById('existing-tags'); const existingTags = document.getElementById('existing-tags');
const newTagsInput = document.getElementById('new-tags'); const newTagsInput = document.getElementById('new-tags');
const feedLink = document.getElementById('feed-link');
function setStatus(message, isError = false) { function setStatus(message, isError = false) {
statusEl.textContent = message; statusEl.textContent = message;
@@ -23,6 +24,18 @@ async function getSettings() {
return result; return result;
} }
async function updateFeedLink() {
const settings = await browser.storage.local.get(['backendUrl', 'username', 'accessToken']);
if (!settings.backendUrl || !settings.username || !settings.accessToken) return;
try {
const backend = new URL(settings.backendUrl);
feedLink.href = `${backend.origin}/${encodeURIComponent(settings.username)}/`;
feedLink.classList.remove('hidden');
} catch (error) {
feedLink.classList.add('hidden');
}
}
async function loadExistingTags() { async function loadExistingTags() {
const settings = await getSettings(); const settings = await getSettings();
if (!settings.backendUrl || !settings.accessToken) { if (!settings.backendUrl || !settings.accessToken) {
@@ -128,3 +141,4 @@ openSettingsButton.addEventListener('click', () => browser.runtime.openOptionsPa
form.addEventListener('submit', handleSubmit); form.addEventListener('submit', handleSubmit);
populateCurrentTab(); populateCurrentTab();
loadExistingTags(); loadExistingTags();
updateFeedLink();